/* ==========================================================================
   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 más fino ---------- */
html .nav{height:72px; gap:22px}
html header.stuck .nav{height:60px}
html .brand img{width:38px; height:38px}
html .brand b{font-size:1.02rem}
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 b{white-space:normal; font-size:.9rem; 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}