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

/* ---------- 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:1.08rem}
html .brand i{font-size:.54rem; letter-spacing:.2em}
html .nav-links{gap:26px}
html .nav-links a{font-size:.72rem; 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:.94rem; line-height:1.08; overflow:visible; text-overflow:clip}
  html .brand i{display:none}
}

/* ---------- Botones: proporción fina ---------- */
html .btn{padding:13px 24px; font-size:.84rem; font-weight:600; letter-spacing:.02em; gap:.5rem}
html .btn-sm{padding:9px 16px; font-size:.75rem}
html .btn svg{width:1.05em; height:1.05em}
html .btn-primary, html .btn-wa{box-shadow:none}
html .btn-primary:hover, html .btn-wa:hover{box-shadow:0 14px 28px -14px rgba(0,0,0,.35)}

/* El verde de WhatsApp solo en los llamados principales. En las tarjetas del
   catálogo, seis botones verdes seguidos parecen un bazar: ahí va en contorno,
   con el icono en verde para que siga reconociéndose. */
html .btn-wa.btn-sm{background:transparent; color:inherit; border:1px solid rgba(0,0,0,.18);
  box-shadow:none}
html .btn-wa.btn-sm svg{color:#1FA855}
html .btn-wa.btn-sm:hover{background:rgba(37,211,102,.1); border-color:#25D366}

/* ---------- 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:500; opacity:.72}
html :is(.variants, .v-opciones, .t-op, .b-op) small + small::before{content:"·"; margin:0 .45em}

/* ---------- Botón flotante más discreto ---------- */
html .wa-float{padding:12px 18px; font-size:.66rem; gap:8px}
html .wa-float svg{width:16px; height:16px}
@media (max-width:640px){ html .wa-float{padding:14px} }

/* ---------- 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.
   ========================================================================== */
html body{font-size:17px; line-height:1.72; letter-spacing:.005em}
html p, html li{font-size:1.02rem}
html .lead, html .hero p, html .intro p{font-size:1.14rem; line-height:1.66}
html .card p, html .prod p, html .item p{font-size:.99rem; line-height:1.64}
@media (max-width:640px){
  html body{font-size:16.5px}
  html .lead, html .hero p, html .intro p{font-size:1.06rem}
}

/* ==========================================================================
   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: más grande, con
   sombra propia, con un brillo que lo cruza al pasar el ratón y una
   respiración lenta que lo hace notar sin marear. Los botones pequeños de las
   tarjetas se quedan discretos: si respiran todos, no respira ninguno.
   ========================================================================== */
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: más cuerpo y más peso. */
html .btn-primary:not(.btn-sm), html .btn-wa:not(.btn-sm){
  padding:17px 34px; font-size:.95rem; font-weight:700; letter-spacing:.015em;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
html .btn-primary:not(.btn-sm):hover, html .btn-wa:not(.btn-sm):hover{
  transform:translateY(-2px); box-shadow:0 20px 38px -16px rgba(0,0,0,.5)}
html .btn-linea:not(.btn-sm){padding:16px 30px; font-size:.92rem; font-weight:600}

/* 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,.42), 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%}}

/* La respiración: un halo que sale del botón cada pocos segundos. Solo en el
   llamado principal, nunca en los botones del catálogo. */
html .btn-primary.cta-late, html .btn-wa.cta-late{animation:ctaLatido 3.6s ease-out infinite}
@keyframes ctaLatido{
  0%  {box-shadow:0 10px 24px -12px rgba(0,0,0,.45), 0 0 0 0 currentColor}
  18% {box-shadow:0 10px 24px -12px rgba(0,0,0,.45), 0 0 0 13px transparent}
  100%{box-shadow:0 10px 24px -12px rgba(0,0,0,.45), 0 0 0 13px 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(3px)}
html .btn-wa:hover svg{transform:scale(1.12)}
html .btn-sm:hover{transform:translateY(-1px)}

/* El flotante de WhatsApp es el llamado que siempre está en pantalla. */
html .wa-float{padding:14px 22px; font-size:.72rem; font-weight:700; gap:9px;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.45); animation:waRespira 3.8s ease-in-out infinite}
html .wa-float svg{width:19px; height:19px}
html .wa-float:hover{animation-play-state:paused}
@keyframes waRespira{0%,100%{transform:none} 50%{transform:translateY(-3px)}}
@media (max-width:640px){ html .wa-float{padding:16px} }

@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}
}