/* ==========================================================================
   Capa de acabado. Se carga DESPUÉS del tema.
   No cambia colores, radios ni tipografías: eso es identidad de cada negocio.
   Cambia medidas y acabado, que es lo que distingue un trabajo profesional de
   uno aficionado: proporción de los botones, peso de las etiquetas, aire entre
   secciones, sombras, y cuánto verde de WhatsApp hay en pantalla.
   Un tema que necesite salirse de aquí puede hacerlo con más especificidad.
   ========================================================================== */

/* ---------- Texto ---------- */
h1, h2, h3{text-wrap:balance}
p, li{text-wrap:pretty}
::selection{background:var(--lav); color:#fff}
:focus-visible{outline:2px solid var(--lav); outline-offset:3px; border-radius:4px}

/* ---------- Ritmo vertical ---------- */
html .sec{padding-top:clamp(84px,10vw,124px); padding-bottom:clamp(84px,10vw,124px)}

/* ---------- Etiquetas pequeñas: discretas, no gritan ----------
   La raíz subió de 16 a 18,5 px para que el texto de lectura crezca. Estas
   etiquetas no son texto de lectura: son rótulos. Si crecieran con el resto,
   la fila de sellos del héroe se ensancharía hasta chocar con la pista de
   deslizar, y el menú dejaría de caber. Por eso se recalculan para quedar en
   los mismos píxeles que antes. */
html .eyebrow{font-size:.68rem; font-weight:700; letter-spacing:.18em; opacity:1}
html .chip{font-size:.68rem; letter-spacing:.08em; font-weight:600; opacity:1}
html .chip svg{width:15px; height:15px}
html .pista{font-size:.66rem; opacity:1}

/* ---------- Encabezado ----------
   El logo es lo primero que identifica al negocio y estaba saliendo diminuto
   porque esta capa lo encajaba a la fuerza en 38 píxeles cuadrados. Ahora solo
   se le pone un techo de ancho y cada tema decide su alto. La barra crece lo
   justo para que el logo respire sin comerse la pantalla. */
html .nav{height:84px; gap:22px}
html header.stuck .nav{height:72px}
html .brand img{height:46px !important; width:auto !important; max-width:220px !important; aspect-ratio:auto;
  object-fit:contain; border-radius:0 !important; background:transparent !important; box-shadow:none !important; padding:0 !important}
html header.stuck .brand img{height:42px !important; width:auto !important}
html .brand b{font-size:.94rem}
/* El lema bajo el nombre sale en cabecera clara y en pie oscuro. Con un color
   propio no puede acertar en los dos: hereda el del bloque y solo se atenúa. */
html .brand i{font-size:.72rem; letter-spacing:.14em; opacity:1}
html .nav-links{gap:26px}
/* El menú iba en 11 píxeles con mucho espaciado: se leía como una etiqueta, no
   como un menú. Ahora es texto de verdad, y se encoge solo si la barra aprieta. */
html .nav-links a{font-size:clamp(.82rem, .5rem + .55vw, .95rem); font-weight:700;
  letter-spacing:.03em; text-transform:none}
html .nav-links{gap:clamp(16px, 1.6vw, 30px)}
@media (max-width:1080px){ html .nav-links a{letter-spacing:.01em} }

/* En pantallas estrechas, un nombre largo en una tipografía ancha no cabe en una
   línea: antes que recortarlo con puntos suspensivos, se deja bajar a dos. */
@media (max-width:520px){
  html .brand img{max-width:170px; height:min(62px, calc(54px * var(--logo-f,1)))}
  html header.stuck .brand img{height:min(54px, calc(46px * var(--logo-f,1)))}
  html .brand b{white-space:normal; font-size:.86rem; line-height:1.08; overflow:visible; text-overflow:clip}
  html .brand i{display:none}
}

/* ---------- Botones: base común ----------
   Lo que hace grande al botón está más abajo, en el bloque de llamados a la
   acción. Aquí solo queda lo que comparten todos. */
html .btn{letter-spacing:.02em; gap:.5rem}

/* ---------- Variantes en el catálogo: una línea, no fichas ---------- */
html .variants, html .v-opciones, html .t-op, html .b-op{gap:0; margin-bottom:14px}
html :is(.variants, .v-opciones, .t-op, .b-op) small{
  background:none; border:0; padding:0; box-shadow:none; transform:none;
  font-size:.72rem; letter-spacing:.02em; text-transform:none; font-weight:600; opacity:1}
html :is(.variants, .v-opciones, .t-op, .b-op) small + small::before{content:"·"; margin:0 .45em}

/* ---------- Imágenes y tarjetas ---------- */
img{image-rendering:auto}


/* ==========================================================================
   Cuerpo de texto: que se lea sin esfuerzo
   Las descripciones venían pequeñas. Un párrafo que cuesta leer no vende.
   Aquí se sube el tamaño base y se abre la línea, sin tocar los colores ni las
   tipografías de identidad de cada negocio.
   ========================================================================== */
/* La palanca que sí llega a todas partes es la raíz. Cada tema pide sus tamaños
   en rem, así que subir la raíz de 16 a 18,5 px agranda todo el texto de las
   treinta y tres landings a la vez sin romper la jerarquía de ninguna: lo que
   el tema quería grande sigue siendo grande, solo que todo se lee mejor.
   Poner reglas de tamaño aquí no bastaba: un selector de clase del tema, como
   .k-ficha p, gana a html p por especificidad y las descripciones seguían
   saliendo en 14 píxeles. */
html{font-size:16px}
html body{font-size:1rem; line-height:1.68; letter-spacing:.004em; font-weight:400}
@media (max-width:640px){ html{font-size:15px} }

/* ==========================================================================
   Llamados a la acción
   ========================================================================== */
html .btn{position:relative; overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, background-color .2s ease}
html .btn:active{transform:translateY(1px) scale(.99)}

/* El botón grande. */
html .btn-primary:not(.btn-sm), html .btn-wa:not(.btn-sm), html .btn-linea:not(.btn-sm){
  padding:13px 26px; font-size:.95rem; font-weight:700; letter-spacing:.012em;
  line-height:1.2}
html .btn-primary:not(.btn-sm), html .btn-wa:not(.btn-sm){
  box-shadow:0 10px 24px -6px rgba(0,82,255,.35)}
html .btn-primary:not(.btn-sm):hover, html .btn-wa:not(.btn-sm):hover{
  transform:translateY(-2px); box-shadow:0 14px 30px -6px rgba(0,82,255,.45)}
html .btn-linea:not(.btn-sm){border-width:2px}
html .btn svg, html .btn i{width:1.15em; height:1.15em}

/* Los botones del catálogo */
html .btn-sm{padding:9px 18px; font-size:.82rem; font-weight:650}
html .btn-sm:hover{transform:translateY(-2px)}

/* El verde de WhatsApp también en las tarjetas */
html .btn-wa.btn-sm{background:rgba(37,211,102,.95); color:#fff; border:0;
  box-shadow:0 8px 18px -10px rgba(37,211,102,.6)}
html .btn-wa.btn-sm svg, html .btn-wa.btn-sm i{color:inherit}
html .btn-wa.btn-sm:hover{background:#1eb956; color:#fff; box-shadow:0 12px 24px -10px rgba(37,211,102,.7)}

/* El brillo que lo cruza. Va en ::after para no pisar el ::before que algunos
   temas usan como fondo. */
html .btn-primary:not(.btn-sm)::after, html .btn-wa:not(.btn-sm)::after{
  content:""; position:absolute; z-index:2; top:-60%; bottom:-60%; width:38%; left:-70%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg); pointer-events:none}
html .btn-primary:not(.btn-sm):hover::after, html .btn-wa:not(.btn-sm):hover::after{
  animation:ctaBrillo .75s ease-out}
@keyframes ctaBrillo{from{left:-70%} to{left:120%}}

/* El aro que respira. Va con el color de la marca, que sí se ve sobre cualquier
   fondo; con currentColor salía blanco sobre blanco en los temas claros. */
html .btn-primary.cta-late, html .btn-wa.cta-late{
  animation:ctaLatido 3s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes ctaLatido{
  0%  {box-shadow:0 12px 26px -12px rgba(0,0,0,.5), 0 0 0 0 var(--marca-1, #25D366)}
  55% {box-shadow:0 12px 26px -12px rgba(0,0,0,.5), 0 0 0 16px transparent}
  100%{box-shadow:0 12px 26px -12px rgba(0,0,0,.5), 0 0 0 16px transparent}
}

/* La flecha del botón avanza al pasar por encima. */
html .btn svg{transition:transform .22s cubic-bezier(.2,.7,.3,1)}
html .btn:hover svg{transform:translateX(4px)}
html .btn-wa:hover svg{transform:scale(1.14)}

/* El flotante de WhatsApp es el llamado que siempre está en pantalla. */
html .wa-float{padding:1rem 1.5rem; font-size:.8rem; font-weight:700; gap:10px;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.5); animation:waRespira 3.4s ease-in-out infinite}
html .wa-float svg{width:22px; height:22px}
html .wa-float:hover{transform:translateY(-3px) scale(1.04); animation-play-state:paused}
@keyframes waRespira{0%,100%{transform:none} 50%{transform:translateY(-4px)}}
@media (max-width:640px){ html .wa-float{padding:1.05rem} }

@media (prefers-reduced-motion:reduce){
  html .btn, html .btn svg, html .wa-float{transition:none; animation:none}
  html .btn-primary::after, html .btn-wa::after{display:none}
}

/* ==========================================================================
   Tira de garantías de la ficha de producto
   Iba en letra pequeña y cada grupo pegado al borde izquierdo de su columna,
   así que los tres quedaban descolgados en una banda ancha. Ahora la letra es
   de lectura y cada grupo va centrado dentro de su columna.
   ========================================================================== */
html body .p-tira.p-tira{padding:34px 0}
html body .p-tira.p-tira .wrap{gap:34px; align-items:center}
html body .p-tira.p-tira .wrap > div{justify-content:center; gap:16px}
html body .p-tira.p-tira b{font-size:1.08rem; line-height:1.3}
html body .p-tira.p-tira b + span{font-size:.95rem; line-height:1.5; opacity:.9}
html body .p-tira.p-tira .ic{width:50px; height:50px; flex:none}
html body .p-tira.p-tira .ic svg{width:24px; height:24px}
@media (max-width:820px){
  html body .p-tira.p-tira .wrap > div{justify-content:flex-start}
}

/* ==========================================================================
   Suelo de tamaño para el texto que dice algo
   Un rótulo de dos palabras puede ir pequeño; una frase entera, no. Estos son
   los sitios donde una frase estaba saliendo por debajo de los quince píxeles:
   avisos legales, notas al pie del catálogo, medidas, subtítulos.
   ========================================================================== */
html body small{font-size:.84rem}
html body .foot-bot{font-size:.84rem}
html body .foot-legal{font-size:.82rem; line-height:1.7}
html body .b-aval, html body .foot-aviso, html body .d-nota, html body .m-medidas,
html body .n-pie-buscar, html body .h-num, html body .g-nota, html body .v-serv-sub{
  font-size:.88rem; line-height:1.6}
/* El «desde · según largo y diseño» que acompaña al precio iba en 10 píxeles. */
html body [class*="precio"] small{font-size:.82rem}
/* En la ficha de producto: las migas de pan llevan el nombre del producto, que
   puede ser largo; el rótulo del grupo de variantes a veces trae una frase
   entera en vez de «Talla»; y el subtítulo de la descripción es texto de lectura. */
html body .crumbs, html body .p-migas{font-size:.8rem}
html body .p-opciones h3{font-size:.8rem; letter-spacing:.1em; line-height:1.5}
html body .rico-titulo{font-size:.94rem; line-height:1.5}
/* La franja legal del alcohol: es un aviso obligatorio, no un rótulo decorativo. */
html body .z-legal span{font-size:.8rem; letter-spacing:.06em; text-transform:none}

/* ==========================================================================
   Interlínea de los textos en negrita
   Varios precios y sellos iban con interlínea 1.0: a esos tamaños la letra
   sobresale de su propia línea y se mete en la de abajo. Se veía como un choque
   entre el precio y la nota que lo acompaña. Un 1.3 lo resuelve y no cambia
   nada donde ya había aire.
   ========================================================================== */
html body b{line-height:1.3}
/* Los bloques de precio traen su propia regla en el tema y ganan por
   especificidad, así que hay que nombrarlos uno a uno. */
html body .q-precio.q-precio b, html body .x-etiqueta.x-etiqueta b,
html body .m-sello.m-sello b, html body .h-precio-l.h-precio-l b{line-height:1.32}
/* La cita gigante de Ikay arrancaba pegada al rótulo de encima. */
html body .l-cita.l-cita{margin-top:16px; line-height:1.16}

/* ==========================================================================
   Acabados premium (septiembre de 2026)
   Detalles que no cambian la identidad de nadie pero que separan una página
   profesional de una casera: anclas que no quedan tapadas, cifras alineadas,
   letra nítida, logos que no hacen saltar la cabecera y el paso suave entre la
   portada y la ficha de cada producto.
   ========================================================================== */
/* Un salto del menú deja el título a la vista, no debajo del encabezado fijo. */
html{scroll-padding-top:96px}
/* El logo trae ancho y alto en el HTML para que la cabecera no salte al cargar.
   :where() no suma especificidad: cualquier alto que fije el tema sigue mandando. */
:where(img[width][height]){height:auto}
/* Los precios con cifras de igual ancho: se leen alineados, como en una carta. */
html body [class*="precio"], html body .p-precio b{font-variant-numeric:tabular-nums lining-nums}
html body{text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
a, button, summary{-webkit-tap-highlight-color:transparent}
main{display:block}

/* ---------- Paso entre páginas ----------
   La página que se va se desvanece y la que llega sube un poco. El encabezado se
   queda quieto y la foto del producto viaja de la tarjeta a la ficha. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} }
::view-transition-old(root){animation:.24s cubic-bezier(.4,0,1,1) both vtSale}
::view-transition-new(root){animation:.44s cubic-bezier(.2,.8,.25,1) .04s both vtEntra}
@keyframes vtSale{to{opacity:0}}
@keyframes vtEntra{from{opacity:0; transform:translateY(16px)}}
#hdr{view-transition-name:cabecera}
::view-transition-group(cabecera){animation-duration:.3s}
#pFoto{view-transition-name:foto-producto}
::view-transition-group(foto-producto){animation-duration:.52s; animation-timing-function:cubic-bezier(.2,.8,.25,1)}
::view-transition-old(foto-producto), ::view-transition-new(foto-producto){height:100%; object-fit:cover}

/* ---------- El logo va limpio, sin placa ni marco (sep 2026) ----------
   Varios temas ponían el logo del encabezado o del pie sobre una placa blanca o crema, o dentro de
   un marco. Con los logos ya transparentes eso se veía como un logo con fondo, y distinto en cada
   página. Ahora el dibujo va directo sobre el diseño; donde el fondo no deja leerlo, logo_en()
   entrega la versión en el color de la página (_sistema/logos-contexto.sh). */
html body #hdr .brand img, html body footer .brand img{
  background:transparent !important; padding:0 !important; border:0 !important;
  box-shadow:none !important; outline:0 !important; border-radius:0 !important}