/* Pulido de diseño (noviembre 2026): escala de letra, contraste, tarjetas,
   celular y cierre de página. Se carga al final; no cambia colores de marca,
   textos, productos ni el funcionamiento del carrito. */

:root{
 --muted:#56604f;          /* gris de notas con contraste AA sobre crema y blanco */
 --fs-small:13px;          /* notas y datos secundarios */
 --fs-ui:14px;             /* botones, filtros, etiquetas */
 --fs-body:16px;           /* texto corrido */
 --fs-lead:18px;           /* bajadas */
 --fs-h2:36px;
}

body{font-size:var(--fs-body)}

/* ---------- 1 y 2. Escala de letra y contraste ---------- */
.announcement{font-size:var(--fs-small);letter-spacing:.2px}
.eyebrow{font-size:12px;letter-spacing:1.4px}
.button{font-size:15px}
.header-toolbar .cart-trigger{font-size:15px}

.hero-copy>p{font-size:var(--fs-lead);line-height:1.6;color:var(--ink)}
.carousel-caption{font-size:var(--fs-small);color:var(--muted)}

.service-strip strong{font-size:16px}
.service-strip small{font-size:var(--fs-ui);color:var(--muted);margin-top:2px}

.section-heading>p{font-size:var(--fs-body);color:var(--ink)}
.search input{font-size:16px}
.sort{font-size:var(--fs-ui);color:var(--muted)}
.sort select{font-size:var(--fs-ui)}
.category{font-size:var(--fs-ui);border-color:#cfd5c7}
.results-line{font-size:var(--fs-small);color:var(--muted)}
.catalog-section-heading>span{font-size:var(--fs-ui);color:var(--muted)}
.catalog-note{font-size:var(--fs-small);color:var(--muted);line-height:1.6}

/* ---------- 3. Tarjetas de producto ---------- */
.product-card{border-color:transparent}
.product-card:hover{border-color:var(--line)}
/* En el catálogo agrupado la categoría ya es el título de la sección */
.catalog-section .product-category{display:none}
.product-category{font-size:11px;color:var(--muted);letter-spacing:.8px}
.product-tag{font-size:13px;padding:4px 9px}
.product-info h3{font-size:16px;line-height:1.4;font-weight:650;min-height:45px;margin-bottom:16px;color:var(--ink)}
.product-price{font-size:21px}
.product-price.pending-price{font-size:16px}
.add-button{background:var(--green);border-color:var(--green);color:#fff;font-size:var(--fs-ui);font-weight:650;min-height:40px}
.add-button:hover{background:var(--green-dark)}
.quantity{min-height:40px}
.quantity strong{font-size:15px}
.unavailable{font-size:var(--fs-small);color:var(--muted)}
.load-more .button{font-size:15px}

.combo-info>p{font-size:var(--fs-body);color:var(--ink)}
.combo-info ul{font-size:15px}
.combo-info .eyebrow{font-size:11px}
.combo-bottom .button{font-size:15px}
.combo-note{font-size:var(--fs-small)}

/* ---------- 5. Cierre de página ---------- */
.how,.about{border-top:0;padding-top:72px;padding-bottom:24px}
.how h2,.about h2{font-size:var(--fs-h2);line-height:1.15;letter-spacing:-1.4px}
.how-intro>p{font-size:var(--fs-body);color:var(--ink);line-height:1.6}
.steps article>span{font-size:var(--fs-ui);width:44px;height:44px}
.steps h3{font-size:18px;line-height:1.35;min-height:0}
.steps p{font-size:15px;line-height:1.6;color:var(--muted)}

.about-body>p{font-size:var(--fs-body);line-height:1.7;color:var(--ink);max-width:62ch}
.about-points strong{font-size:16px}
.about-points span{font-size:var(--fs-ui);color:var(--muted);line-height:1.55}
.about-points li{border-color:transparent}

.closing{margin-top:72px;border-color:transparent}
.closing h2{font-size:26px;line-height:1.25}
.closing p{font-size:var(--fs-body);color:var(--ink)}
.closing .button{font-size:15px}

.footer-contact{font-size:15px}
footer p{font-size:var(--fs-ui);color:var(--ink)}
footer small{font-size:var(--fs-small);color:var(--muted)}

.service-strip{border-color:transparent}
.carousel-controls #carousel-prev,.carousel-controls #carousel-next{box-shadow:none}

/* ---------- Carrito y formulario: solo tamaños de letra ---------- */
.cart-item h3{font-size:15px}
.cart-item-bottom>strong{font-size:16px}
.remove-item{font-size:var(--fs-small)}
.subtotal{font-size:15px}
.shipping-row{font-size:var(--fs-ui)}
.shipping-explanation{font-size:var(--fs-ui);color:var(--ink);line-height:1.6}
.text-button{font-size:var(--fs-ui)}
.form-intro{font-size:15px;color:var(--ink)}
form>label,legend{font-size:var(--fs-ui)}
form input:not([type=radio]),form select,form textarea{font-size:16px}
form textarea::placeholder,form input::placeholder{font-size:15px;color:#7a8274}
.payment-options span{font-size:15px}
.form-summary{font-size:var(--fs-ui)}
.form-summary small,.form-note,.drawer-footer p{font-size:var(--fs-small);color:var(--muted)}
#message-review p{font-size:15px}
#message-review .whatsapp-help{font-size:var(--fs-small)}
#message-text{font-size:15px;line-height:1.6}
.toast{font-size:var(--fs-ui)}
.mobile-cart{font-size:15px}
.mobile-cart b{font-size:13px}

/* ---------- Tablet ---------- */
@media(max-width:1050px){
 .how,.about{grid-template-columns:1fr;gap:28px}
 .product-info h3{font-size:15px}
}

/* ---------- 4. Celular ---------- */
@media(max-width:760px){
 :root{--fs-h2:30px}
 .announcement{font-size:11px;gap:7px;padding:8px 10px;white-space:nowrap;letter-spacing:0}
 .eyebrow{font-size:11px;letter-spacing:1px}
 .button{font-size:15px}

 /* Cabecera más compacta */
 .header-inner{height:auto;padding:10px 0 4px}
 .brand-wordmark{width:118px}
 .header-toolbar{min-height:52px;padding-bottom:8px}
 .header-toolbar .cart-trigger{font-size:14px}

 .hero-copy>p{font-size:16px;margin:14px auto 20px}
 .carousel-caption{font-size:12px}
 .service-strip strong{font-size:15px}
 .service-strip small{font-size:var(--fs-small)}

 .section-heading h2{font-size:28px}
 .section-heading>p{font-size:15px}
 .sort,.sort select{font-size:var(--fs-small)}

 /* Fila de categorías: de borde a borde, con aviso de que se desliza */
 #categories{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px;scroll-padding-inline:18px;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 36px),transparent);
          mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 36px),transparent)}
 .category{font-size:var(--fs-ui);scroll-snap-align:start}

 .results-line{font-size:12px}
 .catalog-section-heading{font-size:22px;flex-wrap:wrap;row-gap:2px}
 .catalog-section-heading>span{font-size:var(--fs-small)}

 .product-info{padding:12px 12px 12px}
 .product-info h3{font-size:14px;min-height:40px;margin-bottom:10px}
 .product-price{font-size:19px}
 .add-button{font-size:var(--fs-ui);min-height:42px}
 .quantity{min-height:42px}
 .product-tag{font-size:11px}
 .unavailable{font-size:12px}
 .catalog-note{font-size:12px}

 .how,.about{padding-top:48px;padding-bottom:8px;gap:20px}
 .steps article>span{width:40px;height:40px;font-size:13px}
 .steps h3{font-size:17px;margin:0 0 4px}
 .steps p{font-size:15px}
 .about-body>p{font-size:16px}

 .closing{margin-top:48px}
 .closing h2{font-size:22px;line-height:1.3}
 .closing p{font-size:15px}
 .closing .button{font-size:15px}

 .footer-contact{font-size:15px}
 footer p{font-size:var(--fs-ui)}
 footer small{font-size:var(--fs-small);line-height:1.6}

 .combo-info>p{font-size:15px}
 .combo-note{font-size:12px}
}

@media(max-width:360px){
 .product-info h3{font-size:13px}
 .brand-wordmark{width:108px}
}