/* CSS optimizado para móviles y compatibilidad total */

*{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(180deg,#fff0f6,#fffafc,#fef6ff);
    color:#4a2240;
}

img{ max-width:100%; display:block; }

/* ENCABEZADO */
/*
.encabezado{
    background: linear-gradient(135deg,#ff4fa3,#ff85c1,#ffd166);
    color:#fff;
    text-align:center;
    padding: clamp(20px,5vw,35px) 15px;
}
*/
.encabezado{
    background: linear-gradient(135deg,#ff4fa3,#ff85c1,#ffd166);
    color:#fff;
    text-align:center;
    padding: clamp(10px,3vw,18px) 12px;

    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.encabezado h1{
    margin:0;
    font-size: clamp(1.1rem, 4vw, 1.6rem);
    line-height: 1.2;
}

.encabezado p{
    font-size: clamp(0.8rem,3vw,1rem);
    margin:2px 0;
    line-height: 1.2;
}

.encabezado .letrero2{
    max-width:90%;
    margin:8px auto 0;
    font-size: clamp(0.6rem,2vw,0.9rem);
    color:#777;
}
.ayuda-lista{
    line-height: 1.1;
    margin-bottom: 4px;
}
.contenedor{
    width: min(95%, 1200px);
    margin: 30px auto;
}
/* GRID */
.contenedor{ width:min(95%,1200px); margin:30px auto; }

.grid{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap:18px;
}

/* CARD */
.card{
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(255,105,180,0.18);
    border:2px solid #ffe0ef;
    transition:0.25s;
}

.imagen{
    width:60%;
    height:180px;
    margin:15px auto 0;
    border-radius:16px;
    object-fit:cover;
}

.contenido{ padding:14px; text-align:center; }

.nombre{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.9rem;
    font-weight:bold;
    color:#8e245f;
}

.precio{
    display:inline-block;
    padding:8px 14px;
    border-radius:20px;
    background:#eefbea;
    color:#2e7d32;
    font-weight:bold;
}
.nota{
        text-align: center;
        margin: 35px 0 20px 0;
        color: #7b5b70;
        font-size: 0.95rem;
    }
    
    .pie{
        text-align: center;
        padding: 20px;
        color: #8a6b7f;
        font-size: 0.9rem;
    }

/* CHECKBOX ESTILO */
.seleccion-sabor{
    display:flex;
    justify-content:center;
    margin:12px 0 8px;
}

.label-seleccion{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    background:#fff0f6;
    border:1px solid #ffd1e6;
    border-radius:20px;
    color:#8e245f;
    font-size:0.8rem;
    font-weight:600;
    cursor:pointer;
    min-height:34px;
}

.check-sabor{
    width:18px;
    height:18px;
    accent-color:#ff4fa3;
}

/* COMPATIBLE CON TODOS LOS DISPOSITIVOS */
.check-sabor:checked + span{
    color:#c2185b;
    font-weight:bold;
}

/* SOLO SI SOPORTA :has */
@supports selector(.label-seleccion:has(.check-sabor:checked)){
    .label-seleccion:has(.check-sabor:checked){
        background:#ffdff0;
        border-color:#ff85c1;
        box-shadow:0 4px 10px rgba(255,105,180,0.18);
    }
}

/* BOTON WHATSAPP */
.acciones-whatsapp{ 
    text-align:center; 
    margin:25px 0;
    margin-bottom: 8px;
}

.btn-whatsapp-lista{
    background:#25D366;
    color:#fff;
    border:none;
    padding:12px 18px;
    border-radius:24px;
    font-weight:bold;
}

/* RESPONSIVE */
@media(max-width:600px){
    .grid{ grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); }
    .imagen{ height:150px; }
    .nombre{ font-size:0.85rem; }
}

@media(max-width:480px){
    .grid{ grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
    .imagen{ height:140px; }
}
.modal{
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(74, 34, 64, 0.45);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-contenido{
    background: #ffffff;
    width: min(90%, 360px);
    border-radius: 22px;
    padding: 24px 20px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(255, 105, 180, 0.22);
    border: 2px solid #ffe0ef;
    position: relative;
}

.modal-contenido p{
    margin: 10px 0 18px 0;
    color: #8e245f;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.cerrar-modal{
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 1.5rem;
    color: #b05a86;
    cursor: pointer;
    font-weight: bold;
}

.btn-modal{
    background: #ff4fa3;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-modal:hover{
    background: #e63d92;
    transform: translateY(-1px);
}