/* ==========================================================================
   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:.56rem; font-weight:600; letter-spacing:.22em; opacity:.82}
html .chip{font-size:.57rem; letter-spacing:.12em; font-weight:600; opacity:.85}
html .chip svg{width:14px; height:14px}
html .pista{font-size:.59rem}

/* ---------- 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}
html .brand img{max-width:210px}
html .brand b{font-size:.94rem}
html .brand i{font-size:.47rem; letter-spacing:.2em}
html .nav-links{gap:26px}
html .nav-links a{font-size:.62rem; letter-spacing:.14em}

/* 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:150px}
  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:.63rem; letter-spacing:.02em; text-transform:none; font-weight:500; opacity:.72}
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}
}