/* ==========================================================================
   Lutz Ferrando · lf-shell.css
   Estilos GLOBALES de nuestros componentes propios: barra de anuncios,
   header (+ nav / mega menú), menú mobile, footer y botones/inputs base.
   Fuente: /rediseno/estilo.css (prototipo). Se carga en TODAS las páginas
   Morelia, así que todo acá adentro está pensado para NO tocar nada que
   no sea nuestro.

   Decisiones de aislamiento (auditadas contra static/css/style-*.scss y
   snipplets/ del theme real, no contra el prototipo):

   1) El prototipo resetea con `* { margin:0; padding:0; box-sizing:border-box }`
      global. Acá NO se globaliza: el reset vive únicamente scopeado a la
      lista explícita de selectores propios (.anuncio, .header, .footer,
      .mmenu, .lf-btn, y sus descendientes) — nunca un `.lf-shell *` con
      wildcard. Motivo: la clase `.lf-shell` YA existe en este mismo theme
      con otro significado (static/css/lf-sucursales.scss define
      `.lf-shell { max-width:1240px; margin:-58px auto 0; ... }` para el
      buscador de sucursales) y un reset con wildcard bajo ese nombre
      pisaría ese componente. Este archivo no usa `.lf-shell` en ningún
      selector para evitar la colisión de raíz.

   2) `.header`, `.footer`, `.anuncio`, `.mmenu`, `.nav`, `.mega`,
      `.contenedor`, `.iconbtn`, `.cont` se auditaron contra el theme base
      (snipplets/**/*.tpl + static/css/style-critical|colors|async.scss) y
      NO tienen colisión real (Morelia siempre usa variantes compuestas,
      ej. `nav-desktop`, `btn-utility`, nunca la clase pelada) → se dejan
      TAL CUAL, sin prefijo.

   3) `.btn` SÍ colisiona de verdad: Morelia define `.btn{ margin:0;
      text-decoration:none; border:0; cursor:pointer; ... }` en
      static/css/style-colors.scss y lo usa en vivo en el selector de
      cantidad de producto, el toggle "ver contraseña" y el botón flotante
      de WhatsApp (snipplets/product/product-quantity.tpl,
      snipplets/forms/form-input.tpl, snipplets/whatsapp-chat.tpl). Un
      `.btn` nuestro sin scopear pisaría esos tres elementos en TODO el
      sitio. Se renombró a `.lf-btn` / `.lf-btn--primario` / `.lf-btn--linea`
      / `.lf-btn--tinta`, seteando el prefijo `lf-` que ya usa el resto del
      theme para esto mismo (ver comentario en snipplets/lf-sucursales.tpl:
      "Todo lo propio va con el prefijo lf- para no chocar con los estilos
      del tema", y `.lfg-btn` en snipplets/lf-gestion.tpl).

   4) `color` de base: el prototipo fija `body{ color:var(--tinta) }` de
      forma global y varios componentes (.nav__link, .mmenu__body a)
      heredan ese color sin declararlo ellos mismos. Como acá NO tocamos
      `body` (es de Morelia), se agregó `color:var(--tinta)` explícito en
      `.header` y `.mmenu` para no heredar el color de link de Morelia
      (`a{ color:var(--main-foreground) }`, static/css/style-colors.scss).

   5) `.header.solid`: en el prototipo TODAS las reglas de esa variante
      están scopeadas a `.home` (no hay una versión "pelada"). lf-app.js
      togglea la clase `solid` en TODAS las páginas al hacer scroll (no
      solo home), pero como el `.header` base ya es translúcido/sticky
      siempre, el toggle no necesita CSS propio fuera de home: no se
      rompe nada, simplemente no tiene efecto visual fuera de home (que es
      lo esperado, ese header-integrado-al-hero es solo del home).
   ========================================================================== */

:root {
  /* marca */
  --verde: #069280;      /* color exacto del logo */
  --verde-osc: #0A7E6D;  /* teal del logo para secciones (footer, anuncio) */
  --verde-nte: #086A5C;  /* teal un punto más profundo (footer) */
  --verde-cl: #14B49E;   /* teal claro (acentos y gradientes) */
  --verde-txt: #0A7A67;  /* teal para texto/acentos sobre blanco (WCAG AA) */
  --menta: #D3F0EA;
  --agua: #E7F5F1;
  --agua-2: #F2FAF8;

  /* neutros cálidos, aire premium */
  --tinta: #0E1C18;
  --tinta-2: #33413C;
  --gris: #5E6B66;
  --linea: #E8ECE9;
  --linea-2: #EFF2F0;
  --hueso: #F7F9F8;
  --crema: #E7F4EF;

  /* acento cálido, guiño al bronce del edificio de Florida 238 */
  --bronce: #B08D57;
  --bronce-cl: #CBAE80;

  --radio: 18px;
  --radio-lg: 28px;

  --sombra-xs: 0 1px 2px rgba(14,28,24,.05);
  --sombra: 0 1px 2px rgba(14,28,24,.04), 0 10px 30px rgba(14,28,24,.07);
  --sombra-alta: 0 6px 16px rgba(14,28,24,.08), 0 34px 66px rgba(14,28,24,.16);

  --sans: 'Aeonik', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: var(--sans);

  --ease: cubic-bezier(.22,.68,0,1);
}

/* ══════════════ Reset scopeado (solo nuestros componentes) ══════════════
   Equivalente al `* { margin:0; padding:0; box-sizing:border-box }` global
   del prototipo, pero acotado por selector a lo que este archivo define.
   Va PRIMERO en el archivo para que las reglas específicas de cada
   componente (más abajo) ganen el empate de especificidad por orden de
   cascada, igual que pasaba con el reset global del prototipo. */
.anuncio, .anuncio *,
.header, .header *,
.footer, .footer *,
.mmenu, .mmenu *,
.lf-btn, .lf-btn * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* imágenes propias sin el hueco inline de ~4px por baseline */
.header img, .footer img, .mmenu img, .anuncio img { display: block; max-width: 100%; }

/* enlaces y botones propios: sin heredar el estilo de link/botón de Morelia */
.header a, .footer a, .mmenu a, .anuncio a { color: inherit; text-decoration: none; }
.header button, .footer button, .mmenu button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* foco visible accesible (teclado), acotado a nuestros componentes */
:where(.header, .footer, .mmenu, .anuncio) :where(a, button, input, summary, .iconbtn, .nav__link):focus-visible,
.lf-btn:focus-visible {
  outline: 2px solid var(--verde-txt);
  outline-offset: 2px;
  border-radius: 6px;
}
.footer :focus-visible, .anuncio :focus-visible { outline-color: #fff; }

/* ══════════════ Utilidades ══════════════ */
.contenedor { max-width: none; width: 100%; margin: 0 auto; padding: 0 clamp(24px, 4vw, 72px); }

/* Sticky footer: en pantallas más altas que el contenido, el footer se ancla al
   fondo del viewport (nada de blanco debajo). El espacio sobrante queda entre el
   contenido y el footer, no debajo. Solo aplica a páginas internas. */
body { min-height: 100vh; display: flex; flex-direction: column; }
.lf-foot-wrap { margin-top: auto; }

/* ══════════════ Barra de anuncios ══════════════ */
.anuncio { background: var(--verde-osc); color: #fff; font-size: .82rem; letter-spacing: .01em; overflow: hidden; }
.anuncio__pista { display: flex; align-items: center; gap: 54px; padding: 10px 0; white-space: nowrap; animation: lf-correr 38s linear infinite; }
.anuncio__pista span { display: inline-flex; align-items: center; gap: 9px; opacity: .94; }
.anuncio__pista b { color: #57D6BC; font-weight: 700; }
@keyframes lf-correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .anuncio__pista { animation: none; }
}

/* ══════════════ Header ══════════════ */
/* .lf-frame envuelve solo el anuncio + header (no el contenido de la página):
   sin esto, el sticky del header se limita a esa altura corta y el header se va
   al scrollear. display:contents saca la caja de .lf-frame del árbol de layout,
   así el header queda sticky relativo al viewport (body). */
.lf-frame { display: contents; }
.header { position: sticky; top: 0; z-index: 900; background: #fff; backdrop-filter: none; border-bottom: 1px solid var(--linea); color: var(--tinta); }
.header__row { display: flex; align-items: center; gap: 58px; padding: 15px clamp(24px, 4vw, 72px); }
.header__logo { justify-self: start; display: inline-flex; align-items: center; }
.header__logo img { height: 29px; width: auto; transition: transform .45s var(--ease); }
.header__logo:hover img { transform: translateY(-2px) scale(1.06); }
.header__logo .marca, .header__logo .nombre { display: none; }

.header__acc { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.iconbtn { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--tinta); transition: .18s var(--ease); position: relative; }
.iconbtn:hover { background: var(--agua); color: var(--verde-osc); }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn .cont { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--verde); color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; }
.hamb { display: none; }

/* ══════════════ Nav + mega menú ══════════════ */
.nav { display: flex; gap: 0; position: relative; }
.nav__item { position: static; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 12px 17px; font-size: .9rem; font-weight: 500; transition: color .18s var(--ease); }
/* Hover en forma de "L" (la L de Lutz): traza vertical desde la primera letra + horizontal hasta el final */
.nav__link::before { content: ""; position: absolute; left: 4px; bottom: 6px; width: 2px; height: 0; background: var(--verde-txt); transition: height .22s var(--ease); }
.nav__link::after { content: ""; position: absolute; left: 4px; bottom: 6px; height: 2px; width: 0; background: var(--verde-txt); transition: width .3s var(--ease) .07s; }
.nav__link:hover, .nav__item:hover .nav__link { color: var(--verde-osc); background: transparent; }
.nav__link:hover::before, .nav__item:hover .nav__link::before { height: calc(100% - 15px); }
.nav__link:hover::after, .nav__item:hover .nav__link::after { width: calc(100% - 9px); }
.nav__link svg { width: 13px; height: 13px; opacity: .5; transition: transform .25s var(--ease); }
.nav__item:hover .nav__link svg { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(10px);
  width: max-content; min-width: 760px; max-width: 96vw; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-alta); padding: 24px 24px; opacity: 0; visibility: hidden; transition: .26s var(--ease);
  display: flex; gap: 28px; align-items: flex-start;
}
/* Grupos en FILA (columnas lado a lado) => el mega se despliega a lo ancho y
   queda corto (nada de scrollear vertical). Cada grupo es una columna al tope. */
.mega__cols { display: flex; gap: 20px; align-items: flex-start; flex: 1 1 auto; }
.mega__col { flex: 0 0 auto; min-width: 124px; }
.mega__col--wide { flex: 0 0 auto; width: 348px; min-width: 348px; columns: 2; column-gap: 18px; }
.mega__col--wide > h4 { column-span: all; }
.mega__col--wide > .mega__link { break-inside: avoid; font-size: .88rem; padding: 6px 9px; white-space: nowrap; }
.mega__link--all { color: var(--verde-txt); font-weight: 600; }
.mega::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav__item:hover .mega, .nav__item:focus-within .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mega__col h4 { position: relative; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--verde-txt); font-weight: 700; margin-bottom: 12px; padding: 0 12px 9px; border-bottom: 1px solid var(--linea); }
.mega__col h4::after { content: ""; position: absolute; left: 12px; bottom: -1px; width: 22px; height: 2px; background: var(--verde-txt); border-radius: 2px; }
.mega__link { display: block; padding: 9px 12px; border-radius: 11px; font-size: .92rem; font-weight: 500; color: var(--tinta-2); transition: .16s var(--ease); white-space: nowrap; }
.mega__link:hover { background: var(--agua-2); color: var(--verde-osc); transform: translateX(3px); }
.mega__promo { flex: 0 0 212px; align-self: auto; border-radius: 18px; overflow: hidden; position: relative; height: 300px; background: var(--crema); display: block; transition: transform .3s var(--ease); }
.mega__promo:hover { transform: translateY(-3px); }
.mega__promo img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; padding: 26px 22px 58px; mix-blend-mode: multiply; }
.mega__promo .cap { position: absolute; inset: auto 0 0 0; padding: 16px; background: linear-gradient(transparent, rgba(14,28,24,.85)); color: #fff; z-index: 1; }
.mega__promo .cap b { font-weight: 700; font-size: 1.02rem; }
.mega__promo .cap span { display: block; font-size: .8rem; opacity: .85; margin-top: 2px; }

/* ══════════════ Header · responsive (hamburguesa, todas las páginas) ══════════════ */
@media (max-width: 1300px) {
  .nav { display: none; }
  .hamb { display: grid; }
}
@media (max-width: 860px) {
  /* header más alto en internas, igual que el del home (specificity para ganarle al reset) */
  .header .header__row { gap: 14px; padding: 16px 20px; }
  .header__logo img { max-height: 36px; height: auto; }
  .hamb { width: 44px; height: 44px; }
}

/* ══════════════ Menú mobile ══════════════ */
.mmenu { position: fixed; inset: 0; z-index: 1000; background: var(--hueso); color: var(--tinta); transform: translateX(100%); transition: transform .32s var(--ease); display: flex; flex-direction: column; }
.mmenu.abierto { transform: translateX(0); }
.mmenu__top { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--linea); }
.mmenu__top .header__logo img { height: 25px; }
.mmenu__body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.mmenu__body a { position: relative; display: block; padding: 15px 0 15px 14px; font-size: 1.15rem; font-weight: 500; border-bottom: 1px solid var(--linea); transition: color .18s var(--ease); }
/* En móvil NO usamos la "L" (se veía cortada). Indicador simple: barra vertical
   corta a la izquierda + texto en negrita teal al hacer hover / item actual. */
.mmenu__body a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: var(--verde-txt); border-radius: 2px; transition: height .2s var(--ease); }
.mmenu__body a:hover, .mmenu__body a.selected, .mmenu__body a:active { color: var(--verde-osc); font-weight: 700; }
.mmenu__body a:hover::before, .mmenu__body a.selected::before, .mmenu__body a:active::before { height: 56%; }
.mmenu__body a.sub { font-size: .95rem; font-weight: 400; padding: 10px 0 10px 16px; color: var(--gris); border: 0; }

/* Menú mobile · acordeón (colapsable) */
.mmenu__body .mm-sec { display: block; padding: 20px 0 4px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--verde-txt); font-weight: 700; border-bottom: 0; }
.mmenu__body .mm-sec::before { display: none; }
.mm-acc { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 0; padding: 15px 0 15px 14px; background: none; border: 0; border-bottom: 1px solid var(--linea); font-family: inherit; font-size: 1.1rem; font-weight: 500; color: inherit; text-align: left; cursor: pointer; }
.mm-acc__chev { width: 20px; height: 20px; flex: 0 0 auto; color: var(--gris); transition: transform .25s var(--ease); }
.mm-acc[aria-expanded="true"] { color: var(--verde-osc); font-weight: 700; }
.mm-acc[aria-expanded="true"] .mm-acc__chev { transform: rotate(180deg); color: var(--verde-osc); }
.mm-panel { max-height: 0; overflow: hidden; transition: max-height .34s var(--ease); }
.mm-acc[aria-expanded="true"] + .mm-panel { max-height: 1600px; }
.mmenu__body .mm-panel__all,
.mmenu__body .mm-panel__link { padding: 11px 0 11px 28px; font-size: .98rem; font-weight: 400; color: var(--gris); border-bottom: 0; }
.mmenu__body .mm-panel__all::before,
.mmenu__body .mm-panel__link::before { display: none; }
.mmenu__body .mm-panel__all { color: var(--verde-txt); font-weight: 600; }
.mmenu__body .mm-panel__link.selected,
.mmenu__body .mm-panel__link:active { color: var(--verde-osc); }
.mm-panel > a:last-child { margin-bottom: 10px; }
.mmenu__foot { padding: 24px 24px 32px; border-top: 1px solid var(--linea); }
.mmenu__foot-lbl { display: block; font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gris); font-weight: 700; margin-bottom: 13px; }
.mmenu__redes { display: flex; gap: 10px; }
.mmenu__redes a { width: 44px; height: 44px; border: 1px solid var(--linea); display: grid; place-items: center; color: var(--verde-txt); transition: .2s var(--ease); }
.mmenu__redes a:hover { background: var(--verde-txt); color: #fff; border-color: var(--verde-txt); }
.mmenu__redes svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .mmenu { transition: none; }
}

/* ══════════════ Hero de página (estilo sucursales: teal + curva inferior) ══════════════ */
.lf-pagehero { position: relative; background: linear-gradient(150deg, #0A7E6D, #069280 55%, #14B49E); color: #fff; text-align: center; padding: 66px 24px 104px; overflow: hidden; }
.lf-pagehero__in { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.lf-pagehero__crumb { color: rgba(255,255,255,.72); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; font-weight: 600; }
.lf-pagehero__crumb a { color: inherit; }
.lf-pagehero h1 { font-family: 'Aeonik', sans-serif; font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.04; color: #fff; margin: 0; }
.lf-pagehero p { margin: 14px auto 0; max-width: 60ch; color: rgba(255,255,255,.92); font-size: 1.04rem; line-height: 1.6; }
.lf-pagehero__ring { position: absolute; border: 2px solid rgba(255,255,255,.14); border-radius: 50%; pointer-events: none; }
.lf-pagehero__ring--1 { width: 320px; height: 320px; top: -120px; right: -70px; }
.lf-pagehero__ring--2 { width: 200px; height: 200px; bottom: -70px; left: -50px; }
.lf-pagehero__curve { position: absolute; left: -2%; right: -2%; bottom: -1px; height: 62px; background: var(--lf-hero-curve, #fff); border-radius: 55% 55% 0 0 / 100% 100% 0 0; z-index: 1; }
.lf-pagehero--beige { --lf-hero-curve: #F2F5F4; }
/* Páginas con hero curvado (blog, institucionales): fondo blanco. */
body.template-blog, body.template-blog-post, body.template-page { background: #fff; }
.lf-pagehero__sello { display: inline-block; margin-top: 22px; font-size: .82rem; color: rgba(255,255,255,.9); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 8px 17px; }
.lf-pagehero__sello b { color: #fff; font-weight: 700; }
@media (max-width: 860px) { .lf-pagehero { padding: 46px 20px 74px; } .lf-pagehero__curve { height: 42px; } }

/* ══════════════ Footer ══════════════ */
/* Footer split: columna marca (teal) + columna navegación (beige) */
.footer { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; border-top: 2px solid var(--bronce); padding: 0 !important; margin: 0 !important; }

/* ── Izquierda: marca sobre teal ── */
.footer__brand { position: relative; overflow: hidden; background: var(--verde-nte); color: rgba(255,255,255,.86); padding: clamp(52px, 5.2vw, 82px) clamp(32px, 4vw, 66px); display: flex; }
.footer__mapa { position: absolute; right: -10%; bottom: -12%; height: 125%; width: auto; opacity: .07; z-index: 0; pointer-events: none; user-select: none; }
.footer__brand-in { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; }
.footer__logo img { height: 27px; width: auto; filter: brightness(0) invert(1); transition: transform .45s var(--ease); }
.footer__logo:hover img { transform: translateY(-2px) scale(1.04); }
.footer__tag { margin-top: 22px; font-size: .92rem; line-height: 1.7; max-width: 42ch; }
.footer__redes { margin-top: 26px; display: flex; gap: 10px; }
.footer__redes a { width: 42px; height: 42px; border-radius: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; color: #fff; transition: .2s var(--ease); }
.footer__redes a:hover { background: var(--verde); border-color: var(--verde); transform: translateY(-2px); }
.footer__redes svg { width: 17px; height: 17px; }
.footer__firma { margin-top: auto; padding-top: 46px; font-family: var(--display); font-weight: 300; font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.05; letter-spacing: -.03em; color: rgba(255,255,255,.5); }
.footer__firma b { font-weight: 700; color: var(--bronce-cl); }

/* ── Derecha: navegación sobre beige ── */
.footer__nav { background: var(--crema); color: var(--tinta-2); padding: clamp(52px, 5.2vw, 82px) clamp(32px, 4vw, 66px); display: flex; flex-direction: column; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer__col h4 { color: var(--tinta); font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 15px; }
.footer__col a { display: block; font-size: .9rem; color: var(--gris); padding: 6px 0; transition: .16s var(--ease); }
.footer__col a:hover { color: var(--verde-txt); transform: translateX(3px); }
.footer__pagos { margin-top: 42px; padding-top: 28px; border-top: 1px solid var(--linea); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pago { height: 36px; min-width: 54px; padding: 0 12px; background: #fff; border: 1px solid var(--linea); border-radius: 0; display: grid; place-items: center; }
.pago img { height: 18px; width: auto; }
.pago--txt { font-size: .72rem; font-weight: 700; letter-spacing: .01em; color: var(--tinta-2); }
.footer__legal { margin-top: auto; padding-top: 30px; font-size: .8rem; color: var(--gris); display: flex; flex-direction: column; gap: 5px; }
.footer__legal .bronce { color: var(--bronce); font-weight: 500; }

/* ══════════════ Footer · responsive ══════════════ */
@media (max-width: 1080px) {
  .footer__cols { gap: 22px; }
}
@media (max-width: 860px) {
  .footer { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .contenedor { padding: 0 20px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

/* ══════════════ Botones / inputs base ══════════════
   Renombrados de .btn a .lf-btn: ver punto 3 del comentario de cabecera
   (colisión real con el .btn propio de Morelia). */
.lf-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-weight: 500; font-size: .95rem; padding: 15px 27px; border-radius: 0;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s, color .2s;
  white-space: nowrap; border: 1.5px solid transparent; overflow: hidden; isolation: isolate;
  cursor: pointer; text-decoration: none;
}
.lf-btn svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.lf-btn--primario { background: var(--verde-txt); color: #fff; box-shadow: 0 6px 16px rgba(15,87,72,.18); }
.lf-btn--primario::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.28), transparent 80%); transform: translateX(-120%); transition: transform .6s var(--ease); }
.lf-btn--primario:hover { background: var(--verde-nte); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,87,72,.28); }
.lf-btn--primario:hover::after { transform: translateX(120%); }
.lf-btn--primario:hover svg { transform: translateX(3px); }
.lf-btn--tinta { background: var(--tinta); color: #fff; }
.lf-btn--tinta:hover { background: #000; transform: translateY(-2px); }
.lf-btn--linea { border-color: var(--linea); color: var(--tinta); background: #fff; box-shadow: var(--sombra-xs); }
.lf-btn--linea:hover { border-color: var(--verde); color: var(--verde-osc); transform: translateY(-2px); box-shadow: var(--sombra); }
@media (prefers-reduced-motion: reduce) {
  .lf-btn, .lf-btn--primario::after { transition: none; }
}