/* ==========================================================================
   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:88px; gap:22px}
html header.stuck .nav{height:74px}
/* Los logos van grandes y enteros: sin recorte en círculo ni placa de fondo. Los PNG ya
   llegan recortados al dibujo y sin fondo claro (_sistema/logos-png.py), así que
   object-fit:contain los muestra completos a cualquier proporción. */
html .brand img{height:clamp(58px,5.6vw,80px); width:auto; max-width:240px; aspect-ratio:auto;
  object-fit:contain; border-radius:8px; background:transparent; box-shadow:none; padding:0}
html header.stuck .brand img{height:clamp(50px,4.6vw,64px); width:auto}
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:54px}
  html header.stuck .brand img{height:46px}
  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:18.5px}
html body{font-size:1rem; line-height:1.72; letter-spacing:.004em; font-weight:430}
@media (max-width:640px){ html{font-size:17.5px} }

/* ==========================================================================
   Llamados a la acción
   La meta de estas páginas es que la gente escriba, pregunte o compre. El botón
   principal tiene que pesar más que todo lo demás de la pantalla: cuerpo grande,
   letra grande, sombra propia, un brillo que lo cruza al pasar el ratón y un aro
   del color de la marca que sale cada tres segundos. Los botones del catálogo
   también son llamados de verdad, así que se pintan en verde de WhatsApp en vez
   de dejarlos en contorno.
   ========================================================================== */
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:1.12rem 2.35rem; font-size:1.04rem; font-weight:700; letter-spacing:.012em;
  min-height:3.6rem; line-height:1.2}
html .btn-primary:not(.btn-sm), html .btn-wa:not(.btn-sm){
  box-shadow:0 12px 26px -12px rgba(0,0,0,.5)}
html .btn-primary:not(.btn-sm):hover, html .btn-wa:not(.btn-sm):hover{
  transform:translateY(-3px); box-shadow:0 24px 44px -16px rgba(0,0,0,.55)}
html .btn-linea:not(.btn-sm){border-width:2px}
html .btn svg{width:1.15em; height:1.15em}

/* Los botones del catálogo: más cuerpo que antes, porque cada uno es la venta. */
html .btn-sm{padding:.72rem 1.28rem; font-size:.86rem; font-weight:650}
html .btn-sm:hover{transform:translateY(-2px)}

/* El verde de WhatsApp también en las tarjetas. Antes iban en contorno para no
   llenar el catálogo de verde; Fernando prefiere que se note que ahí se compra. */
html .btn-wa.btn-sm{background:#25D366; color:#08240F; border:0;
  box-shadow:0 8px 18px -10px rgba(37,211,102,.9)}
html .btn-wa.btn-sm svg{color:inherit}
html .btn-wa.btn-sm:hover{background:#1FA855; color:#fff; box-shadow:0 14px 26px -12px rgba(37,211,102,.9)}

/* 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}