@charset "utf-8";

/* Sección superior (Combo) */
#content-1 {width:100%;height:auto;padding:30px 0;margin:0px 0 20px 0;float:left;background-color:#f4f4f4}

.content-box-content-1 {width:90%;margin:0 auto;float:left}

.h2-content-1{font-family: 'Rubik', sans-serif;font-weight:700;color:#000;text-align:center}

.p-content-1 {color:rgba(85,85,85,1.00);font-family: 'Rubik', sans-serif;font-weight:400;text-align:center}

.btn-comprar, .btn-ver-mas{font-family: 'Rubik', sans-serif;line-height:25px;font-weight:500;background-color:coral;color:rgba(255,255,255,1.00);position: relative;float: left;border-radius: 50px;letter-spacing: 1px;opacity:1}

.btn-comprar:hover, .btn-ver-mas:hover{opacity: 0.9}

.combo-detalle {display:flex;flex-wrap:wrap;align-items:center;gap:60px;justify-content:center;padding:60px 20px;background:#f9f9f9}

.combo-img {width:100%;margin: 20px 0px 0px 0px }

.combo-img img {width:25%;border-radius:12px;margin:0px 37.5%}

.combo-info {width:100%}

.h2-content-1 {font-size:28px;font-weight:700;width:90%;margin:10px 5%}

.p-content-1 {font-size:18px;color:#666;width:90%;margin:10px 5%}

.p-total {font-size:25px;font-weight:bold;width:90%;margin:10px 5%;text-align:center}

.btn-comprar, .btn-ver-mas {display:inline-block;padding:12px 24px;margin-right:10px;margin-top:10px;border-radius:6px;text-decoration:none;transition:all 0.3s ease;text-align:center}


/* Sección tabla (Detalle de productos) */
#content-2 {width:100%;height:auto;padding:40px 0;float:left;background:#fff}
.box-content-2 {width:90%;margin:0 5%;float:left;position: relative;;padding:30px 0px;background:#f9f9f9;border-radius:15px;box-shadow:0 2px 10px rgba(0,0,0,0.05)}
.h2-content-2 {font-family: 'Rubik', sans-serif;font-size:26px;margin-bottom:10px;color:#111}
.h3-content-2 {font-family: 'Rubik', sans-serif;font-size:18px;color:#666;margin-bottom:25px}

.tabla-detalle-combo { font-family: 'Rubik', sans-serif;width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 16px; }

.tabla-detalle-combo th, .tabla-detalle-combo td { font-family: 'Rubik', sans-serif;padding: 12px 10px; border: 1px solid #ddd; text-align: left; }

.tabla-detalle-combo thead { font-family: 'Rubik', sans-serif;background-color: #f4f7ff; font-weight: bold; }

.tabla-detalle-combo tbody tr:nth-child(even) { background-color: #f9f9f9; }

.h4-content-2 {font-family: 'Rubik', sans-serif;font-size:20px;text-align:right;margin-top:15px;margin-bottom:10px;font-weight:bold;color:#000}

.btn-ver-mas {font-family: 'Rubik', sans-serif;display:inline-block;padding:10px 18px;background:#0066cc;color:#fff;text-decoration:none;border-radius:5px;font-size:16px;float:right;transition:background .3s}

.btn-ver-mas:hover {background:#004999}

.btn-full { display: inline-block; width: 100%; max-width: 300px; text-align: center; margin: 10px auto; }

@media screen and (max-width:980px){

    .combo-img {width:100%;margin: 20px 0px 0px 0px }

    .combo-img img {width:25%;border-radius:12px;margin:0px 37.5%}

    .h2-content-1 {font-size:28px;font-weight:700;width:90%;margin:0px 5% 10px 5%}

    .p-content-1 {font-size:18px;}

    .btn-comprar{display:inline-block;padding:12px 0px;margin:20px 25%;border-radius:6px;text-decoration:none;transition:all 0.3s ease;position: relative;float: left;width: 50%}

    .btn-ver-mas {display:inline-block;padding:12px 0px;margin:20px 30%;border-radius:6px;text-decoration:none;transition:all 0.3s ease;position: relative;float: left;width: 40%}

    #content-2 {width:95%;height:auto;position: relative;float: left; margin:0px 2.5%;background:#fff}
    
    .box-content-2 {width:100%;margin:0px 0%;float:left;position: relative;padding:30px 0px;background:#f9f9f9;border-radius:15px;box-shadow:0 2px 10px rgba(0,0,0,0.05)}

    .tabla-detalle-combo{width:100%;height:auto;position: relative;float: left; margin:0px 0%;background:#fff}

    .tabla-detalle-combo th, .tabla-detalle-combo td { font-size: 13px;padding: 12px 4px }

    }


@media screen and (min-width:981px) and (max-width:1366px){

    #content-1 {width:100%;height:auto;padding:0px 0;margin:0px 0;float:left;background-color:#f4f4f4}
    
    .combo-detalle {display:block;position: relative;float: left;width:100%;margin:0px 0%;padding:20px 0px}

    .combo-img {position: relative;float: left !important;width:30%;margin: 20px 10% 0px 0px }

    .combo-img img {position: relative;float: left;width:100%;margin:0px 0%}

    .combo-info {display: block;position:  relative;float: left !important;width:50%;margin: 100px 10% 0px 0px }

    .h2-content-1 {font-size:28px;font-weight:700;width:90%;margin:0px 5% 10px 5%}

    .p-content-1 {font-size:18px;width:90%;margin:10px 5% 15px 5%}

    .btn-comprar{display:inline-block;padding:12px 0px;margin:20px 20px 20px 80px;border-radius:6px;text-decoration:none;transition:all 0.3s ease;position: relative;float: left;width:200px}

    .btn-ver-mas {display:inline-block;padding:12px 0px;margin:20px 0%;border-radius:6px;text-decoration:none;transition:all 0.3s ease;position: relative;float: left;width: 180px}

    #content-2 {width:95%;height:auto;position: relative;float: left; margin:0px 2.5%;background:#fff}
    
    .box-content-2 {width:95%;margin:0px 2.5%;float:left;position: relative;padding:30px 0px;background:#f9f9f9;border-radius:15px;box-shadow:0 2px 10px rgba(0,0,0,0.05)}

    .tabla-detalle-combo{width:100%;height:auto;position: relative;float: left; margin:0px 0%;background:#fff}
    
    .tabla-detalle-combo th, .tabla-detalle-combo td { font-size: 14px; }

    }
@media screen and (min-width:1367px){
    
    #content-1 {width:1300px;height:auto;padding:0px 0;margin:0px 0px 0px -650px;left: 50%;position: relative;float:left;background-color:#f4f4f4}
    
    .combo-detalle {display:block;position: relative;float: left;width:100%;margin:0px 0%;padding:20px 0px}

    .combo-img {position: relative;float: left !important;width:30%;margin: 20px 10% 0px 0px }

    .combo-img img {position: relative;float: left;width:100%;margin:0px 0%}

    .combo-info {display: block;position:  relative;float: left !important;width:50%;margin: 100px 10% 0px 0px }

    .h2-content-1 {font-size:28px;font-weight:700;width:90%;margin:0px 5% 10px 5%}

    .p-content-1 {font-size:18px;width:90%;margin:10px 5% 15px 5%}

    .btn-comprar{display:inline-block;padding:12px 0px;margin:20px 50px 20px 150px;border-radius:6px;text-decoration:none;transition:all 0.3s ease;position: relative;float: left;width:200px}

    .btn-ver-mas {display:inline-block;padding:12px 0px;margin:20px 0%;border-radius:6px;text-decoration:none;transition:all 0.3s ease;position: relative;float: left;width: 180px}

/* Sección tabla (Detalle de productos) */
#content-2 {width:100%;height:auto;padding:40px 0;float:left;background:#fff}
.box-content-2 {width:70%;margin:0 15%;float:left;position: relative;;padding:30px 20px;background:#f9f9f9;border-radius:15px;box-shadow:0 2px 10px rgba(0,0,0,0.05)}
.h2-content-2 {font-family: 'Rubik', sans-serif;font-size:26px;margin-bottom:10px;color:#111}
.h3-content-2 {font-family: 'Rubik', sans-serif;font-size:18px;color:#666;margin-bottom:25px}

.tabla-detalle-combo { font-family: 'Rubik', sans-serif;width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 16px; }
.tabla-detalle-combo th, .tabla-detalle-combo td { font-family: 'Rubik', sans-serif;padding: 12px 10px; border: 1px solid #ddd; text-align: left; }
.tabla-detalle-combo thead { font-family: 'Rubik', sans-serif;background-color: #f4f7ff; font-weight: bold; }
.tabla-detalle-combo tbody tr:nth-child(even) { background-color: #f9f9f9; }

.h4-content-2 {font-family: 'Rubik', sans-serif;font-size:20px;text-align:right;margin-top:15px;margin-bottom:10px;font-weight:bold;color:#000}

}