/* Tooltip propio del sistema (2026-10-09) -- mismo componente que ya usa
   el panel administrativo (public/css/components/tooltip.css), traído
   aquí para que la landing pública también reemplace title="" (tooltip
   nativo del navegador, sin estilo) por data-tooltip="" en sus propios
   elementos. @import en vez de copiar el contenido: una sola fuente de
   verdad, la landing hereda cualquier cambio futuro de diseño del
   componente sin tocar este archivo. Requiere que public/js/
   components/tooltip.js también se cargue -- ver landing-core.js. */
@import url('components/tooltip.css?v=20261009-1');

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    /* Paleta institucional oficial real (Pantone 7715 C, confirmada por el
       dueño), alineada a sidebar.css/login.css -- antes usaba un tono de
       teal distinto (#127778/#126178) sin relación con la guía de marca. */
    --teal:        #036469;   /* Verde Principal institucional */
    --teal-dark:   #024F52;   /* Variante accesible para hover y contraste */
    --teal-light:  #D8E5E1;   /* Sage / fondos suaves */
    --amber:       #EB7A01;   /* CTA / botones de acción */
    --amber-dark:  #9A5C00;   /* Brown / acento cálido */
    --brown:       #9A5C00;
    --beige:       #E8E4DC;   /* Fondo general */
    --beige-mid:   #ddd8cf;
    --text:        #3D2B1F;   /* Café oscuro */
    --gray:        #555555;
    --white:       #ffffff;
    --font-body:   'Inter', Arial, sans-serif;
    --font-display:'Jost', 'Inter', Arial, sans-serif;
    --section-title-size: clamp(2.2rem, 2.8vw, 2.8rem);
    --section-title-weight: 800;
    --section-title-line-height: 1.08;
    --section-title-color: var(--teal-dark);
    --section-title-accent: var(--amber);
    /* Título principal (h1) de las páginas públicas standalone -- FAQ,
       Aviso de Privacidad, Cómo funciona. Más grande que .section-title
       (que es para subtítulos de sección dentro de una página), nunca se
       usa dentro de landing.blade.php (ahí el h1 es .hb-headline, con su
       propia animación de escritura, no comparable). Un solo lugar para
       cambiar "cómo se ve el título de una página nueva" cuando se separe
       otra sección a página propia (ver CLAUDE.md, plan a futuro). */
    --page-hero-size: clamp(2.4rem, 3.4vw, 3.65rem);
    --page-hero-weight: 800;
    --page-hero-line-height: 1.06;
    --page-hero-color: var(--teal-dark);
    --page-hero-accent: var(--amber);
  }

  /*
      AQUI PONDRE LOS ESTILOS DE LA LANDING PAGE QUE ME SUGIERAN
      
  */

  html {
    scroll-behavior: smooth;
    /* Scroll-snap sobre el elemento raíz para una mayor compatibilidad entre navegadores. */
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100%;
  }
  body {
    font-family: var(--font-body); color: var(--text); background: var(--white);
    min-height: 100%;
  }

  /* .snap-sec hoy solo lo usa #inicio (landing.blade.php) -- el resto de
     secciones ya se separó a páginas propias y el scroll-snap se
     desactivó ahí (ver landing-inicio.css). Se queda esta clase porque
     sigue dando el layout real que queremos (altura de pantalla
     completa) -- scroll-snap-align/stop y los !important ya no tienen
     ningún otro snap point con el que coordinarse, se quitaron. */
  .snap-sec {
    height: 100dvh;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
  }

  /* Todas las secciones: padding-bottom ≥ 110px para que la onda no tape el contenido */
  .snap-sec { padding-bottom: 110px; }

  /* navbar 84px + onda corporativa 45px + margen visual */
  .hero-banner.snap-sec {
    padding-top: 153px;
    padding-bottom: 80px;
    display: flex;
    align-items: center;
  }
  /* Antes solo "display: block", sin centrado -- dejaba el contenido
     pegado arriba y un hueco enorme antes de la onda. 2 intentos previos
     descartados: align-items:center (repartía el aire sobrante mitad
     arriba/mitad abajo, seguía dejando hueco visible en pantallas altas)
     y align-items:flex-end con padding-bottom chico (mejoró pero seguía
     sin igualar el resultado real de Inicio/Cómo funciona, confirmado
     por el dueño). Mismo padding-top/padding-bottom fijos que
     .hero-banner.snap-sec (Inicio, la referencia que el dueño confirmó
     que sí funciona perfecto) en vez de intentar repartir el espacio de
     forma dinámica -- navbar 84px + onda + margen visual, igual que ahí. */

  /* El footer no mide 100vh; este punto permite llegar hasta él. */
  .snap-sec--footer {
    scroll-snap-align: start;
    height: auto;
    min-height: 50vh;
    overflow: hidden;
    position: relative;
  }

  /* Onda SVG al pie de cada sección. Las dos capas aportan profundidad. */
  .sec-wave-top {
    position: absolute; bottom: 0; left: 0; right: 0;
    line-height: 0; pointer-events: none; z-index: 3;
    height: 110px;          /* altura visible de la onda */
  }
  .sec-wave-top svg {
    position: absolute; bottom: 0; left: 0;
    width: 100%; display: block;
  }
  /* La onda de Inicio usa un viewBox de 230 px: conservar su profundidad
     en escritorio evita que las dos capas se vean comprimidas. Piso
     subido de 140 a 170px (2026-10-01) -- a 140 el monitor de trabajo
     del dueño (1366×577, 24dvh=138px) caía en el piso y se veía
     notablemente más aplanada que en su laptop (1536×730, 24dvh=175px,
     nunca toca el piso) -- confirmado visualmente, no solo cálculo. Con
     170 todo el cluster "corto" (1366×577/633, 1424×646, 1966×632)
     converge a una altura consistente, muy cercana a la de la laptop. */
  .hero-banner .sec-wave-top { height: clamp(170px, 24dvh, 230px); }
  .hero-banner .sec-wave-top svg { height: 100%; }

  /* Navbar: adaptación web del encabezado corporativo de los correos. */
  .navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 400;
    background-color: var(--teal-dark);
    overflow: visible;
    padding: 0;
    box-shadow: 0 2px 10px rgba(2, 79, 82,.12);
  }
  .navbar-logo-shape {
    position: absolute;
    top: -38px;
    left: 0;
    width: 380px;
    height: 137px;
    pointer-events: none;
    z-index: 1;
  }
  .navbar-inner {
    width: 100%; margin: 0;
    display: flex; align-items: center; justify-content: space-between;
    height: 92px;
    padding: 0 32px 0 0;
    position: relative;
    z-index: 3;
  }
  .navbar-logo {
    display: flex; align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative; z-index: 2;
    width: 320px;
    flex: 0 0 320px;
    align-self: stretch;
    padding-right: 60px;
  }
  .navbar-logo img {
    height: 80px;
    width: auto;
    max-width: 210px;
    object-fit: contain;
    display: block;
  }
  .navbar-logo .logo-mark {
    width: 64px; height: 64px; border-radius: 12px;
    background: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 900; color: var(--teal-dark);
  }
  /* Links en blanco sobre el teal */
  .nav-links {
    display: flex; align-items: center; gap: 4px;
    flex: 1; justify-content: center;
    min-width: 0;
  }
  .nav-links a {
    font-size: 14px; font-weight: 600; color: rgba(255,255,255,.9);
    text-decoration: none; padding: 7px 13px; border-radius: 8px;
    transition: color .15s;
  }
  .nav-links a:hover { color: var(--amber); }
  .nav-links a.active {
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--amber);
  }
  .nav-sep { color: rgba(255,255,255,.3); font-size: 16px; }

  /* Dropdown "Productos" (Microcrédito/Crédito Simple unificados,
     2026-10-20) -- hover/focus en escritorio, abre un panel flotante
     bajo el botón con el mismo fondo/borde ámbar que el resto de
     menús flotantes del navbar (.nav-links.is-open). */
  .nav-dropdown { position: relative; }
  .nav-dropdown-toggle {
    display: inline-flex; align-items: center; gap: 4px;
    font: inherit; font-size: 14px; font-weight: 600;
    color: rgba(255,255,255,.9);
    background: none; border: none; cursor: pointer;
    padding: 7px 13px; border-radius: 8px;
    transition: color .15s;
  }
  .nav-dropdown-toggle i { font-size: 15px; transition: transform .15s; }
  .nav-dropdown-toggle:hover { color: var(--amber); }
  /* .active = "estás en una página de este submenú" (calculado en Blade
     vía routeIs, nunca por JS) -- el subrayado ámbar es EXCLUSIVO de
     este significado. .open = "el menú está desplegado ahora mismo"
     (JS, click/hover), solo gira la flecha -- mezclar ambos en la misma
     clase hacía que "Inicio" (página actual) y "Servicios" (recién
     abierto) se vieran subrayados a la vez, confundiendo cuál es la
     página real. Bug real reportado por el dueño 2026-10-20. */
  .nav-dropdown.active .nav-dropdown-toggle {
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--amber);
  }
  .nav-dropdown.open .nav-dropdown-toggle { color: #fff; }
  .nav-dropdown-menu {
    position: absolute; top: calc(100% + 6px); left: 50%;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    min-width: 180px;
    padding: 8px;
    background: var(--teal-dark);
    border: 1px solid rgba(255,255,255,.16);
    border-bottom: 3px solid var(--amber);
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(0,0,0,.28);
    z-index: 401;
  }
  /* Puente invisible de 6px entre el botón y el menú flotante -- sin
     esto, el cursor sale de .nav-dropdown al cruzar ese hueco (el único
     elemento con :hover es .nav-dropdown, que termina en el borde
     inferior del botón) y el menú se cierra ANTES de llegar a los
     links. Bug real reportado por el dueño 2026-10-20: "no permite
     navegar el submenú hasta dar clic". El puente extiende el área
     hoverable sin mover el menú ni cambiar su separación visual. */
  .nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%; left: 0; right: 0;
    height: 6px;
  }
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    display: flex;
  }
  .nav-dropdown:hover .nav-dropdown-toggle i,
  .nav-dropdown:focus-within .nav-dropdown-toggle i { transform: rotate(180deg); }
  .nav-dropdown-menu a {
    font-size: 14px; font-weight: 600; color: rgba(255,255,255,.9);
    text-decoration: none; padding: 9px 12px; border-radius: 8px;
    white-space: nowrap;
    transition: background .15s, color .15s;
  }
  .nav-dropdown-menu a:hover { background: rgba(255,255,255,.1); color: var(--amber); }
  .nav-dropdown-menu a.active { color: #fff; background: rgba(255,255,255,.14); }

  .navbar-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 24px;
    color: #fff;
  }
  .navbar-hamburger:hover,
  .navbar-hamburger:focus-visible { background: rgba(255,255,255,.14); }

  @media (min-width: 700px) and (max-width: 900px) and (min-height: 900px) and (orientation: portrait) {
    .snap-sec--footer { min-height: 0; }
  }

  .section-eyebrow {
    text-align: center; font-size: 11px; font-weight: 700;
    color: var(--teal); text-transform: uppercase; letter-spacing: .1em;
    margin-bottom: 10px;
  }
  .section-title {
    text-align: center;
    font-family: var(--font-display);
    font-size: var(--section-title-size);
    font-style: normal;
    font-weight: var(--section-title-weight);
    line-height: var(--section-title-line-height);
    color: var(--section-title-color);
    margin-bottom: 12px;
  }
  .section-title::after {
    content: '';
    display: block;
    width: 72px;
    height: 3px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: var(--section-title-accent);
  }
  /* h1 de página pública standalone (FAQ, Privacidad, Cómo funciona) --
     ver comentario de las variables --page-hero-* en :root. El subrayado
     (::after) nace alineado a la izquierda (default) -- cada página que
     centra su hero (ej. .privacy-hero) también centra el subrayado con
     una regla propia y corta en su propio CSS, en vez de que esta clase
     compartida imponga una sola alineación a todas. */
  .page-hero-title {
    margin: 11px 0 16px;
    font-family: var(--font-display);
    font-size: var(--page-hero-size);
    font-weight: var(--page-hero-weight);
    line-height: var(--page-hero-line-height);
    color: var(--page-hero-color);
    letter-spacing: -.025em;
  }
  .page-hero-title::after {
    content: '';
    display: block;
    width: 54px; height: 2px;
    margin-block-start: 7px;
    background: var(--page-hero-accent);
  }
  .section-chip {
    display: inline-block; background: var(--teal); color: white;
    font-size: 13px; font-weight: 600; border-radius: 20px;
    padding: 5px 18px; margin: 0 auto 50px; display: block; width: fit-content;
  }

  /* ── FOOTER ──────────────────────────────────────────────── */
  .footer-trust {
    background: var(--teal-light);
    padding: 24px 40px; text-align: center;
  }
  .footer-trust p,
  .footer-trust > .landing-rich-content { font-size: 14px; color: #444; line-height: 1.6; }
  .footer-trust strong { color: var(--teal-dark); }

  .footer {
    position: relative;
    overflow: hidden;
    background: var(--teal-dark);
    padding: 48px 40px 38px;
    border-top: 2px solid var(--amber);
  }
  .footer::before {
    content: "";
    position: absolute;
    width: 360px; height: 360px;
    right: -160px; top: -220px;
    border: 48px solid rgba(255,255,255,.025);
    border-radius: 50%;
    pointer-events: none;
  }
  .footer-inner {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 2.5vw, 36px);
    position: relative; z-index: 1;
  }
  .footer-brand {
    width: max-content;
    max-width: 220px;
    justify-self: center;
    text-align: center;
  }
  .footer-social-title {
    margin-top: 0;
    color: #ffc178;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .footer-social { display: flex; justify-content: center; gap: 11px; margin-top: 10px; }
  .social-btn {
    width: 38px; height: 38px; border-radius: 11px;
    color: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; text-decoration: none;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 6px 14px rgba(0,0,0,.10);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  }
  .social-btn:hover {
    color: white;
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 13px 24px rgba(0,0,0,.23);
    border-color: rgba(255,255,255,.38);
  }
  .social-btn--facebook:hover { background: #1877f2; }
  .social-btn--instagram:hover {
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 52%, #fcb045 100%);
  }
  .social-btn--whatsapp:hover { background: #25d366; }
  .footer-col-title {
    font-size: 11px; font-weight: 800; color: #ffc178;
    text-transform: uppercase; letter-spacing: .1em;
    margin-bottom: 16px; text-align: left;
  }
  .footer-col { min-width: 0; width: 100%; max-width: 100%; }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-col ul li { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.88); display: flex; align-items: flex-start; gap: 8px; }
  .footer-col ul li i { color: #9adfd7; margin-top: 2px; flex-shrink: 0; }
  .footer-col ul li a { color: inherit; text-decoration: none; }
  .footer-col ul li a,
  .footer-col ul li span { overflow-wrap: anywhere; }
  .footer-col ul li a:hover { color: white; }
  /* Solo escritorio: los dos teléfonos comparten fila; en móvil siguen apilados. */
  @media (min-width: 901px) {
    .footer-contact-list {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 8px;
    }
    .footer-contact-list > li:not(.footer-contact-phone) { grid-column: 1 / -1; }
    .footer-contact-phone { white-space: nowrap; }
  }
  .footer-bottom {
    position: relative; z-index: 1;
    background: var(--beige);
    border-top: 2px solid rgba(235,122,1,.72);
    padding: 15px 40px;
  }
  .footer-bottom-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
  }
  .footer-bottom p { font-size: 12px; font-weight: 500; color: var(--teal-dark); }
  .footer-bottom-inner p:last-child {
    text-align: right;
    padding-right: clamp(0px, 12vw, 150px);
  }
  .footer-bottom a { color: var(--teal-dark); text-decoration: none; }
  .footer-bottom a:hover { color: var(--amber-dark); }

  @media (max-width: 1100px) {
    .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; row-gap: 30px; }
    .footer-brand { justify-self: start; text-align: left; }
    .footer-social { justify-content: flex-start; }
    .footer-col-title { text-align: left; }
    .footer-bottom-inner p:last-child { padding-right: 0; }
  }

  /* ── WHATSAPP FLOAT ──────────────────────────────────────── */
  /* ── Chat bot widget (reemplaza el botón estático de WA) ─────── */
  .chat-float {
    position: fixed;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    right: calc(22px + env(safe-area-inset-right, 0px));
    z-index: 300;
    display: flex; align-items: center; gap: 8px;
    background: white; border-radius: 50px;
    padding: 7px 14px 7px 7px;
    box-shadow: 0 8px 24px rgba(2, 79, 82,.16), 0 2px 7px rgba(0,0,0,.08);
    border: 1px solid rgba(2, 79, 82,.09); cursor: pointer;
    transition: box-shadow .2s, transform .15s, bottom .25s ease;
  }
  .chat-float:hover { box-shadow: 0 12px 30px rgba(2, 79, 82,.21), 0 3px 8px rgba(0,0,0,.09); transform: translateY(-2px); }
  .chat-float-icon {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--teal-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 21px; color: white; flex-shrink: 0;
  }
  .chat-float-text { line-height: 1.2; text-align: left; }
  .chat-float-text small { font-size: 9px; color: #7b8583; display: block; letter-spacing: .025em; }
  .chat-float-text strong { font-size: 13px; color: var(--teal-dark); font-weight: 750; }
  @media (max-width: 1450px) {
    .chat-float {
      bottom: calc(18px + env(safe-area-inset-bottom, 0px));
      right: calc(18px + env(safe-area-inset-right, 0px));
      gap: 7px;
      padding: 6px 12px 6px 6px;
    }
    .chat-float-icon { width: 36px; height: 36px; font-size: 19px; }
    .chat-float-text small { font-size: 8px; }
    .chat-float-text strong { font-size: 12px; }
  }
  /* iPad horizontal: dejar aire bajo el acceso al chat sin reducir su
     área táctil (1151-1230 × 651-768). */
  @media (min-width: 1151px) and (max-width: 1230px) and (min-height: 651px) and (max-height: 768px) and (orientation: landscape) {
    #chat-toggle.chat-float { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  }
  .chat-panel {
    position: fixed;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    right: calc(22px + env(safe-area-inset-right, 0px));
    z-index: 600;
    width: 360px; max-width: calc(100vw - 32px);
    background: #f5faf8; border: 1px solid #c9dfd9; border-radius: 18px;
    box-shadow: 0 18px 48px rgba(2,79,82,.18), 0 4px 14px rgba(2,79,82,.09);
    display: flex; flex-direction: column;
    max-height: min(520px, calc(100dvh - 48px - env(safe-area-inset-bottom, 0px)));
    opacity: 0; pointer-events: none; transform: translateY(16px) scale(.97);
    transition: opacity .2s, transform .2s, bottom .2s;
  }
  .chat-panel--open { opacity: 1; pointer-events: all; transform: none; }
  body.chat-abierto #chat-toggle { display: none; }
  body.chat-abierto .chat-panel { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  .chat-panel-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; background: var(--teal-dark);
    border-bottom: 2px solid var(--amber);
    border-radius: 17px 17px 0 0; color: white; flex-shrink: 0;
  }
  .chat-panel-avatar {
    width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
  }
  .chat-panel-name { font-weight: 700; font-size: 14px; }
  .chat-panel-status { font-size: 11px; opacity: .8; }
  .chat-panel-close {
    margin-left: auto; width: 40px; height: 40px; flex: 0 0 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
    color: #fff; cursor: pointer; font-size: 20px;
  }
  .chat-panel-close:hover { background: rgba(255,255,255,.2); }
  .chat-panel-close:focus-visible,
  .chat-voice-btn:focus-visible,
  .chat-send-btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
  .chat-messages {
    flex: 1; overflow-y: auto; padding: 16px 14px;
    display: flex; flex-direction: column; gap: 10px; background: #f3f8f6; min-height: 0;
  }
  .chat-msg { display: flex; }
  .chat-msg--user { justify-content: flex-end; }
  .chat-bubble {
    max-width: 86%; padding: 11px 13px; border-radius: 14px;
    font-size: 13.5px; line-height: 1.5; word-break: break-word;
  }
  .chat-bubble__text { min-width: 0; }
  .chat-bubble__text strong { font-weight: 750; }
  .chat-msg--welcome .chat-bubble {
    width: 100%; max-width: 100%;
    padding: 16px 18px; border-bottom-left-radius: 14px;
    text-align: justify;
  }
  .chat-msg--welcome .chat-voice-btn {
    width: 32px; height: 32px; margin: 0 0 0 6px;
    vertical-align: middle;
    border: 1px solid #bfddd5; border-radius: 50%;
    background: #e8f5f1; color: var(--teal-dark);
  }
  .chat-msg--welcome .chat-voice-btn:hover,
  .chat-msg--welcome .chat-voice-btn.is-hablando {
    background: var(--teal-dark); color: #fff;
  }
  .chat-msg--user .chat-bubble { background: var(--teal-dark); color: #fff; border-bottom-right-radius: 4px; }
  .chat-msg--assistant .chat-bubble {
    background: #fff; color: #314945; border: 1px solid #deebe7;
    border-bottom-left-radius: 4px; box-shadow: 0 3px 10px rgba(2,79,82,.05);
    display: flex; align-items: flex-end; gap: 8px;
  }
  .chat-msg--assistant.chat-msg--welcome .chat-bubble {
    display: block; position: relative;
    border-bottom-left-radius: 14px;
  }
  .chat-msg--assistant.chat-msg--welcome .chat-bubble__text { display: block; padding-right: 38px; }
  .chat-msg--assistant.chat-msg--welcome .chat-voice-btn {
    position: absolute; right: 14px; bottom: 12px;
    display: inline-flex; margin: 0;
  }
  .chat-voice-btn {
    flex-shrink: 0; width: 32px; height: 32px; margin-bottom: -3px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: #edf5f2; padding: 0; cursor: pointer;
    color: #49736e; border-radius: 9px; transition: color .15s, background .15s;
  }
  .chat-voice-btn:hover { color: var(--teal-dark); background: #dbece7; }
  .chat-voice-btn.is-hablando { color: var(--teal-dark); }
  .chat-voice-btn i { font-size: 15px; }
  .chat-typing { display: flex; align-items: center; gap: 5px; padding: 12px 14px !important; }
  .chat-typing span { width:7px; height:7px; border-radius:50%; background:#aaa; animation:chatTyping 1.2s infinite ease-in-out; }
  .chat-typing span:nth-child(2){animation-delay:.2s} .chat-typing span:nth-child(3){animation-delay:.4s}
  @keyframes chatTyping{0%,80%,100%{transform:scale(.8);opacity:.5}40%{transform:scale(1.2);opacity:1}}
  .chat-wa-banner {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    padding: 10px 14px; background: #f0fdf4; border-top: 1px solid #d1fae5;
  }
  .chat-wa-btn {
    margin-left: auto; background: #25d366; color: white;
    padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
    text-decoration: none; display: flex; align-items: center; gap: 5px;
  }
  .chat-wa-btn:hover { background: #1ea952; }
  .chat-opciones {
    display: flex; flex-direction: column; gap: 6px;
    max-width: 78%; align-self: flex-start;
  }
  .chat-opcion-btn {
    padding: 9px 13px; border: 1px solid var(--teal-light, #D8E5E1); border-radius: 14px;
    background: #fff; color: var(--teal-dark); font: inherit; font-size: 13px; font-weight: 700;
    text-align: left; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: background .15s ease, color .15s ease;
  }
  .chat-opcion-btn:hover { background: var(--teal-dark); color: #fff; }
  .chat-opcion-btn--whatsapp {
    display: block; border-color: #b7ebc6; color: #1ea952;
    text-decoration: none;
  }
  .chat-opcion-btn--whatsapp:hover { background: #25d366; color: #fff; }
  .chat-input-wrap {
    display: flex; align-items: flex-end; gap: 8px; flex-shrink: 0;
    padding: 12px 14px; border-top: 1px solid #dceae6; background: #fff;
    border-radius: 0 0 17px 17px;
  }
  .chat-input {
    flex: 1; min-width: 0; min-height: 42px;
    border: 1px solid #bcd5ce; border-radius: 12px; background: #fbfefd;
    padding: 10px 13px; font-size: 13.5px; resize: none;
    line-height: 1.4; max-height: 120px; overflow-y: auto;
    font-family: inherit; outline: none;
  }
  .chat-input:focus { border-color: var(--teal-dark); box-shadow: 0 0 0 3px rgba(2,79,82,.12); }
  .chat-send-btn {
    width: 42px; height: 42px; border-radius: 12px; border: none; cursor: pointer;
    background: var(--teal-dark); color: white; font-size: 17px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .chat-send-btn:hover { background: #0a6769; }
  .chat-send-btn:disabled { background: #aaa; cursor: not-allowed; }

  .landing-rich-content ul,
  .landing-rich-content ol { margin: 8px 0; padding-left: 22px; }
  .landing-rich-content p + p { margin-top: 9px; }
  .landing-rich-content .rt-teal { color: var(--teal); }
  .landing-rich-content .rt-amber { color: #9a5c00; }
  .landing-rich-content .rt-ink { color: #263b43; }
  .landing-rich-content .rt-align-left { text-align: left; }
  .landing-rich-content .rt-align-center { text-align: center; }
  .landing-rich-content .rt-align-right { text-align: right; }
  .landing-rich-content .rt-align-justify { text-align: justify; }

  /* ── HERO BANNER ─────────────────────────────────────────── */
  .hero-banner {
    background: linear-gradient(135deg, var(--teal-light) 0%, var(--beige) 100%);
    display: flex;
    align-items: center;
  }
  .hero-banner-inner {
    max-width: 1280px; margin: 0 auto; width: 100%;
    display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
    gap: 56px; align-items: center;
    padding: 0 40px;
    position: relative; z-index: 4;
  }
  .hb-left {
    display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
    /* El elemento superpuesto está centrado, mide 180px y no interfiere con la cuadrícula de texto. */
  }
  .hb-topline {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
  }
  /* Badge superior autoadministrable: landing_hero_badge. */
  .hb-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(200, 129, 26, .12);
    border: 1.5px solid rgba(200, 129, 26, .45);
    color: #8a5500;
    font-size: 12px; font-weight: 700;
    padding: 6px 14px; border-radius: 50px;
    letter-spacing: .02em;
  }
  .hb-badge i { font-size: 14px; color: #b87010; }
  .hb-replay {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 11px;
    border: 1px solid rgba(2, 79, 82,.22);
    border-radius: 50px;
    background: rgba(255,255,255,.52);
    color: var(--teal-dark);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .hb-replay:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.82);
    border-color: rgba(2, 79, 82,.38);
  }
  .hb-replay i { font-size: 14px; }
  /* Encabezado autoadministrable: landing_hero_headline. */
  .hb-headline {
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    font-weight: 800; color: var(--teal-dark);
    line-height: 1.15; margin: 0;
    letter-spacing: -.02em;
    text-wrap: balance;
  }
  .hb-headline em { font-style: normal; color: var(--amber-dark); }
  .hb-type-word {
    display: inline-block;
    white-space: nowrap;
  }
  .hb-type-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(9px) scale(.72);
    transform-origin: 50% 70%;
    will-change: opacity, transform;
  }
  .hb-headline.is-typing .hb-type-char {
    animation: hb-type-char .34s cubic-bezier(.2,.9,.3,1.28) forwards;
    animation-delay: var(--char-delay, 0ms);
  }
  .hb-headline.is-typed .hb-type-char {
    opacity: 1;
    transform: none;
  }
  .hb-type-caret {
    display: none;
    position: absolute;
    width: 0;
    height: .82em;
    margin-left: 2px;
    border-left: 3px solid var(--amber);
    border-radius: 2px;
    vertical-align: -.04em;
    pointer-events: none;
  }
  .hb-headline.is-typing .hb-type-caret {
    display: inline-block;
    animation: hb-caret .62s steps(1,end) infinite;
  }
  @keyframes hb-type-char {
    0%   { opacity: 0; transform: translateY(9px) scale(.72); }
    70%  { opacity: 1; transform: translateY(-2px) scale(1.06); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes hb-caret {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
  }
  /* Subtítulo autoadministrable: landing_hero_sub. */
  .hb-sub {
    font-size: 17px; color: var(--teal-dark);
    line-height: 1.65; margin: 0; max-width: 520px;
  }
  .hero-fx-ready .hb-sub-part {
    position: relative;
    top: 10px;
    opacity: 0;
    filter: blur(5px);
  }
  .hero-fx-ready .hb-sub.is-revealing .hb-sub-part {
    animation: hb-sub-reveal .9s cubic-bezier(.2,.8,.25,1) forwards;
  }
  .hero-fx-ready .hb-sub.is-revealing .hb-sub-part:nth-child(2) {
    animation-delay: .62s;
  }
  .hero-fx-ready .hb-sub.is-revealed .hb-sub-part {
    top: 0;
    opacity: 1;
    filter: blur(0);
    animation: none;
  }
  @keyframes hb-sub-reveal {
    to { top: 0; opacity: 1; filter: blur(0); }
  }
  /* Botón CTA autoadministrable: landing_hero_cta. */
  .hb-cta {
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--amber); color: white;
    font-size: 17px; font-weight: 800; text-decoration: none;
    padding: 18px 40px; border-radius: 50px;
    box-shadow: 0 10px 32px rgba(235,122,1,.45);
    transition: background .15s, transform .15s, box-shadow .15s;
    letter-spacing: .01em;
  }
  .hero-fx-ready .hb-cta {
    opacity: 0;
    transform: translateY(14px) scale(.94);
  }
  .hero-fx-ready .hb-cta.is-cta-arriving {
    animation: hb-cta-arrive 1s cubic-bezier(.2,.85,.25,1.12) forwards;
  }
  .hero-fx-ready .hb-cta.is-cta-settled {
    opacity: 1;
    transform: none;
  }
  .hb-cta i.is-arrow-active {
    animation: hb-arrow-nudge .68s ease-in-out 3;
  }
  @keyframes hb-cta-arrive {
    0%   { opacity: 0; transform: translateY(14px) scale(.94) rotate(0); }
    58%  { opacity: 1; transform: translateY(0) scale(1.035) rotate(0); }
    70%  { opacity: 1; transform: translateY(0) scale(1.02) rotate(-1.2deg); }
    82%  { opacity: 1; transform: translateY(0) scale(1.02) rotate(1.2deg); }
    92%  { opacity: 1; transform: translateY(0) scale(1.01) rotate(-.5deg); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes hb-arrow-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
  }
  .hb-cta:hover { background: var(--amber-dark); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(235,122,1,.55); color: white; }
  .hero-fx-ready .hb-cta.is-cta-settled:hover { transform: translateY(-2px); }
  .hb-cta i { font-size: 20px; }
  /* Trust pills debajo del botón */
  .hb-trust {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    margin-top: 14px;
  }
  .hb-trust-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--teal-dark);
  }
  .hb-trust-item i { font-size: 15px; color: var(--teal); }
  .hero-fx-ready .hb-trust-item {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px);
  }
  .hero-fx-ready .hb-trust.is-trust-visible .hb-trust-item {
    animation: hb-trust-reveal .65s cubic-bezier(.2,.8,.25,1) forwards;
  }
  .hero-fx-ready .hb-trust.is-trust-visible .hb-trust-item:nth-child(2) {
    animation-delay: .18s;
  }
  .hero-fx-ready .hb-trust.is-trust-visible .hb-trust-item:nth-child(3) {
    animation-delay: .36s;
  }
  .hero-fx-ready .hb-trust.is-trust-settled .hb-trust-item {
    opacity: 1;
    filter: blur(0);
    transform: none;
    animation: none;
  }
  @keyframes hb-trust-reveal {
    to { opacity: 1; filter: blur(0); transform: none; }
  }
  /* La columna derecha del video es más amplia porque el logotipo ocupa la izquierda. */
  .hb-right { display: flex; align-items: center; justify-content: flex-end; }
  .hb-video-wrapper {
    position: relative; width: 100%; max-width: 600px;
    aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: 0;
    box-shadow: 0 20px 56px rgba(3, 100, 105,.35);
    border: 3px solid rgba(3, 100, 105,.4);
  }
  .hb-video-wrapper iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
    border-radius: inherit; /* algunos navegadores no recortan un iframe solo con el overflow:hidden del padre */
  }
  /* Promoción temporal (imagen/GIF) en vez del video -- mismo wrapper,
     contenido intercambiado (ver landing.blade.php). El <a> (si hay link)
     debe ocupar todo el espacio para que el área clickeable sea completa,
     no solo el <img> adentro.
     overflow:visible (en vez del overflow:hidden heredado de
     .hb-video-wrapper base) -- el badge del contador en posición
     "debajo"/"empalmado" necesita sobresalir fuera del marco; la imagen
     en sí no se desborda porque ya es position:absolute;inset:0 (se
     recorta sola al tamaño del contenedor, sin depender del overflow del
     padre) y border-radius:0 (sin esquinas redondeadas que recortar). */
  .hb-video-wrapper--promo { overflow: visible; }
  .hb-video-wrapper--promo .hb-promo-link,
  .hb-video-wrapper--promo img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border-radius: inherit; display: block;
  }
  .hb-video-wrapper--promo img { object-fit: cover; }
  /* Promoción marcada como vertical (toggle "Imagen vertical" en
     /marketing/promociones) -- MISMO tamaño/posición exactos que el
     video vertical (selector compartido con --vertical, ver bloque de
     abajo) -- el dueño confirmó con captura real que una copia con
     valores propios (intento anterior) se desincronizaba del video en
     cuanto --vertical se recalibraba en otra sesión (translateY,
     breakpoints de escritorio bajo/tablet/móvil), dejando el marco de
     la promoción desplazado. Compartir el selector es la fuente única
     de verdad real: cualquier ajuste futuro de --vertical aplica
     también aquí, sin tener que recordar replicarlo a mano. */

  /* Contador de cuenta regresiva (toggle "Mostrar contador" +
     select "Posición" en /marketing/promociones) -- ver
     landing-inicio.js para el cálculo en vivo. */
  .hb-promo-countdown {
    --promo-countdown-bg: #07585c;
    --promo-countdown-text: #fff;
    --promo-countdown-accent: #ffc27a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .hb-promo-countdown--color-naranja {
    --promo-countdown-bg: #a84800;
    --promo-countdown-accent: #ffe0ad;
  }
  .hb-promo-countdown i {
    color: var(--promo-countdown-accent);
    font-size: 15px;
  }

  /* Las 6 posiciones viven TODAS dentro de .hb-video-wrapper vía
     position:absolute (ya es position:relative) -- nunca un <div>
     hermano/envolvente aparte. Un <div> extra alrededor del wrapper
     (intento anterior, con o sin width:100%) cambiaba cómo
     justify-content:flex-end de .hb-right reparte el espacio libre,
     desplazando el marco completo de su posición original (bug real
     reportado por el dueño con captura) -- el wrapper debe seguir
     siendo hijo DIRECTO de .hb-right en todos los casos, exactamente
     igual que el video, sin excepción.
     "debajo" (fuera del marco, sin superponerse a la imagen) se retiró
     del catálogo -- el dueño la confundía visualmente con "empalmado"
     (ambas aparecen bajo el marco) y pidió quitarla, quedándose solo
     con variantes que SÍ se distinguen entre sí a simple vista. */

  /* Esquinas (4 variantes: superior/inferior × izquierda/derecha) --
     dentro del marco visual, con margen interno (14px) para nunca
     tocar el borde de 3px del propio marco -- confirmado con el dueño
     que el badge debe quedar lejos del navbar/la onda decorativa,
     ambos completamente fuera de este marco.
     "esquina_superior"/"esquina_inferior" (sin sufijo) son las
     IZQUIERDA originales -- nombre sin cambiar para no invalidar datos
     reales ya guardados con esa clave exacta (ver LandingPromocion). */
  .hb-promo-countdown--esquina_superior,
  .hb-promo-countdown--esquina_inferior,
  .hb-promo-countdown--esquina_superior_derecha,
  .hb-promo-countdown--esquina_inferior_derecha {
    position: absolute;
    z-index: 2;
    font-size: 12px;
    color: var(--promo-countdown-text);
    background: var(--promo-countdown-bg);
    border: 1px solid var(--promo-countdown-accent);
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  }
  .hb-promo-countdown--esquina_superior,
  .hb-promo-countdown--esquina_inferior { left: 14px; }
  .hb-promo-countdown--esquina_superior_derecha,
  .hb-promo-countdown--esquina_inferior_derecha { right: 14px; }
  .hb-promo-countdown--esquina_superior,
  .hb-promo-countdown--esquina_superior_derecha { top: 14px; }
  .hb-promo-countdown--esquina_inferior,
  .hb-promo-countdown--esquina_inferior_derecha { bottom: 14px; }

  /* "Empalmado" (superior/inferior): centrado horizontalmente, a
     caballo del borde correspondiente (mitad visible dentro del marco,
     mitad fuera) -- requiere que el wrapper use overflow:visible (ver
     regla de .hb-video-wrapper--promo arriba), si no, overflow:hidden
     del wrapper base recortaría la mitad que debe sobresalir. El
     transform resta la mitad de su propia altura (sin necesitar
     conocerla exacta) para que quede centrado justo sobre el borde. */
  .hb-promo-countdown--empalmado_superior,
  .hb-promo-countdown--empalmado_inferior {
    position: absolute;
    left: 50%;
    z-index: 2;
    font-size: 14px;
    color: var(--promo-countdown-text);
    background: var(--promo-countdown-bg);
    border: 1.5px solid var(--promo-countdown-accent);
    padding: 9px 18px;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(3, 100, 105, .32);
    white-space: nowrap;
  }
  .hb-promo-countdown--empalmado_superior {
    top: 0;
    transform: translate(-50%, -50%);
  }
  .hb-promo-countdown--empalmado_inferior {
    top: 100%;
    transform: translate(-50%, -50%);
  }

  /* Video vertical (Reel/Story, 9:16): crece con el alto disponible y
     conserva la proporción sin dejar franjas a los lados. Compartido
     con --promo-vertical (promoción marcada como vertical) a propósito
     -- ver comentario arriba, donde antes vivía una copia separada. */
  .hb-video-wrapper--vertical,
  .hb-video-wrapper--promo-vertical {
    width: clamp(260px, calc((100dvh - 250px) * 9 / 16), 365px);
    max-width: 100%;
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    /* transform, NO margin-bottom -- un margin-bottom asimétrico aquí
       (primer intento, 2026-10-01) sí separaba el video de la onda,
       pero #.hb-right vive dentro de .hero-banner.snap-sec, que en
       escritorio bajo (@media max-height:800px más abajo) usa
       height:auto!important -- un margin que agranda el elemento más
       alto de la fila agranda TODA la sección, y como la onda es
       position:absolute;bottom:0 de esa misma sección, la sección más
       alta empuja la onda hacia abajo (reportado por el dueño: "la
       curva se desplazó"). transform no participa en el cálculo de
       layout/alto -- mueve el video visualmente sin crecer nada.
       -28px (primer valor) subía el video de más ("se pasó un poco más
       arriba", feedback del dueño con fotos reales de monitor 1366×633 y
       laptop 1536×730, 2026-10-01) -- bajado a -15px (valor final
       elegido por el dueño, tras validar -18px con recorte real en las
       mismas 2 resoluciones y confirmar que sobraba espacio hacia la
       onda sin riesgo de rozar). */
    transform: translateY(-15px);
  }
  @media (min-width: 901px) and (max-height: 800px) {
    .hero-banner.snap-sec {
      height: auto !important;
      min-height: 100dvh !important;
      padding-top: 125px;
      padding-bottom: 72px;
      overflow: visible;
    }
    .hero-banner-inner { gap: 34px; }
    .hb-left { gap: 15px; }
    .hero-banner .hb-video-wrapper--vertical,
    .hero-banner .hb-video-wrapper--promo-vertical {
      width: min(300px, calc((100dvh - 200px) * 9 / 16));
    }
  }
  @media (max-width: 900px) {
    .hero-banner.snap-sec#inicio {
      height: auto !important;
      min-height: 100dvh !important;
      padding: 116px 20px 90px !important;
      overflow: visible;
    }
    .hero-banner-inner { max-width: 680px; padding: 0; gap: 34px; }
    .hero-banner .hb-right { order: initial; justify-content: center; }
    .hero-banner .hb-video-wrapper--vertical,
    .hero-banner .hb-video-wrapper--promo-vertical { width: min(300px, 100%); }
    .hb-left { gap: 16px; }
    .hb-headline { font-size: clamp(2.25rem, 5vw, 3rem); }
    .hb-sub { max-width: 100%; }
  }
  @media (max-width: 560px) {
    .hero-banner.snap-sec#inicio { padding: 105px 16px 76px !important; }
    .hero-banner-inner { gap: 28px; }
    .hb-headline { font-size: clamp(2rem, 8vw, 2.5rem); }
    .hb-sub { font-size: 15px; line-height: 1.55; }
    .hb-cta { padding: 14px 24px; font-size: 15px; }
    .hb-trust { gap: 10px 16px; }
    .hb-trust-item { font-size: 12px; }
    .hero-banner .hb-video-wrapper--vertical,
    .hero-banner .hb-video-wrapper--promo-vertical { width: min(70vw, 260px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hb-type-char {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
    }
    .hero-fx-ready .hb-sub-part,
    .hero-fx-ready .hb-cta,
    .hero-fx-ready .hb-trust-item {
      top: 0 !important;
      opacity: 1 !important;
      filter: none !important;
      transform: none !important;
      animation: none !important;
    }
    .hb-type-caret,
    .hb-replay { display: none !important; }
  }

  /* ── RESPONSIVE ──────────────────────────────────────────── */
  /* Rango de menú completo (apretado) bajado a 1150px (antes 1241px) --
     el dueño confirmó que prefiere el menú completo visible en tablets
     horizontales en vez de hamburguesa: iPad horizontal (1194px) caía en
     hamburguesa mientras la tablet Android horizontal (1280px) ya
     mostraba el menú completo, y el dueño quería lo segundo para ambas,
     no lo primero (intento anterior, revertido). 1150px deja margen bajo
     los 1194px del iPad real. */
  @media (min-width: 1151px) and (max-width: 1450px) {
    .navbar-inner { padding-right: 18px; }
    .nav-links { gap: 1px; }
    .nav-links a { padding: 7px 9px; font-size: 13px; white-space: nowrap; }
    .nav-sep { font-size: 13px; }
    .nav-dropdown-toggle { padding: 7px 9px; font-size: 13px; }
  }
  /* Dropdown "Productos" dentro del menú móvil/tablet (.nav-links.is-open,
     sin hover real): se muestra como bloque inline siempre expandido en
     vez de flotante -- mismo criterio ya usado para .nav-sep (oculto) en
     esos 2 breakpoints. */
  @media (max-width: 1150px) {
    .nav-links.is-open .nav-dropdown { position: static; width: 100%; }
    .nav-links.is-open .nav-dropdown-toggle {
      width: 100%; justify-content: space-between;
      padding: 11px 12px;
    }
    .nav-links.is-open .nav-dropdown-menu {
      display: none; position: static; transform: none;
      min-width: 0; width: 100%;
      margin-top: 2px; padding: 4px;
      background: rgba(0,0,0,.14);
      border: none; box-shadow: none;
    }
    .nav-links.is-open .nav-dropdown.open .nav-dropdown-menu { display: flex; }
    .nav-links.is-open .nav-dropdown-toggle i { transform: none !important; }
    .nav-links.is-open .nav-dropdown.open .nav-dropdown-toggle i { transform: rotate(180deg) !important; }
  }
  @media (min-width: 901px) and (max-width: 1150px) {
    .navbar-inner { padding-right: 24px; }
    .navbar-hamburger { display: flex; }
    .nav-links { display: none; }
    .nav-links.is-open {
      position: absolute;
      top: 92px;
      left: 0;
      right: 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 5px;
      padding: 16px 24px;
      background: var(--teal-dark);
      border-top: 1px solid rgba(255,255,255,.16);
      border-bottom: 3px solid var(--amber);
      box-shadow: 0 10px 24px rgba(0,0,0,.18);
    }
    .nav-links.is-open a { padding: 11px 12px; }
    .nav-links.is-open .nav-sep { display: none; }
  }
  @media (max-width: 900px) {
    /* Navbar en tablet vertical (iPad 834px, Tablet 800px): altura proporcional más imponente */
    .navbar-inner { height: 84px; padding: 0 24px 0 16px; }
    .navbar-logo-shape { top: -34px; width: 280px; height: 126px; }
    .navbar-logo { width: 220px; flex-basis: 220px; padding-top: 4px; }
    .navbar-logo img { height: 66px; width: auto; max-width: 175px; transform: translateY(2px); }
    .navbar-logo .logo-mark { width: 50px; height: 50px; font-size: 22px; }
    .navbar-hamburger { width: 48px; height: 48px; font-size: 28px; }
    .nav-links { display: none; }
    .nav-links.is-open {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 3px;
      top: 90px;
      right: 16px;
      left: auto;
      width: min(290px, calc(100vw - 32px));
      padding: 12px 14px 16px;
      background: var(--teal-dark);
      border: 1px solid rgba(255,255,255,.16);
      border-bottom: 3px solid var(--amber);
      border-radius: 16px;
      box-shadow: 0 16px 40px rgba(0,0,0,.35);
      max-height: calc(100dvh - 100px);
      overflow-y: auto;
      z-index: 500;
    }
    .nav-links.is-open a {
      display: flex;
      align-items: center;
      min-height: 40px;
      padding: 8px 12px;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      transition: background .15s ease;
    }
    .nav-links.is-open a:hover,
    .nav-links.is-open a.active {
      background: rgba(255,255,255,.14);
      color: #fff;
    }
    .nav-links.is-open .nav-sep { display: none; }
    .hb-left { padding-left: 0; }
    .hero-banner { padding: 40px 20px; }
    .hero-banner.snap-sec { padding-top: 112px; align-items: center; }
    .hero-banner-inner { grid-template-columns: 1fr; gap: 32px; }
    .navbar-hamburger { display: flex; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .footer { padding: 40px 20px 20px; }

    :root {
      --footer-nav-h: 84px;
    }

    /* ── Footer Snap Componente Compartido (móvil y tablet) ── */
    .snap-sec--footer {
      scroll-snap-align: start !important;
      scroll-snap-stop: always !important;
      scroll-margin-top: var(--footer-nav-h, 84px) !important;
      min-height: calc(100dvh - var(--footer-nav-h, 84px)) !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      box-sizing: border-box !important;
    }
  }
  @media (max-width: 560px) {
    /* Navbar compacto para teléfonos móviles */
    .navbar-inner { height: 68px; padding: 0 16px 0 12px; }
    .navbar-logo-shape { top: -30px; width: 215px; height: 104px; }
    .navbar-logo { width: 150px; flex-basis: 150px; padding-top: 6px; }
    .navbar-logo img { height: 52px; width: 125px; max-width: 125px; transform: translateY(3px); }
    .navbar-logo .logo-mark { width: 40px; height: 40px; font-size: 18px; }
    .navbar-hamburger { width: 42px; height: 42px; font-size: 24px; }
    .nav-links.is-open { top: 74px; max-height: calc(100dvh - 84px); }

    :root {
      --section-title-size: 2rem;
      --footer-nav-h: 68px;
    }

    .snap-sec--footer {
      scroll-margin-top: var(--footer-nav-h, 68px) !important;
      min-height: calc(100dvh - var(--footer-nav-h, 68px)) !important;
    }

    .snap-sec--footer .footer-trust,
    .footer-trust {
      flex: 0 0 auto !important;
      padding: 16px 20px !important;
      text-align: center !important;
      background: var(--teal-light, #e0edea) !important;
    }

    .snap-sec--footer .footer-trust p,
    .snap-sec--footer .footer-trust > .landing-rich-content,
    .footer-trust p,
    .footer-trust > .landing-rich-content {
      font-size: 12px !important;
      line-height: 1.45 !important;
      color: #374151 !important;
      margin: 0 !important;
    }

    .snap-sec--footer .footer-trust strong,
    .footer-trust strong {
      color: var(--teal-dark, #024f52) !important;
    }

    .snap-sec--footer .footer,
    .footer {
      flex: 1 1 auto !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      padding: 20px 20px 18px !important;
    }

    .snap-sec--footer .footer-inner,
    .footer-inner {
      grid-template-columns: 1fr !important;
      gap: 16px !important;
    }

    .footer-brand {
      justify-self: center !important;
      text-align: center !important;
      width: 100% !important;
      max-width: 280px !important;
    }
    .footer-social-title {
      font-size: 11px !important;
      margin-bottom: 8px !important;
      letter-spacing: .08em !important;
    }
    .footer-social { justify-content: center !important; }
    .footer-col {
      width: 100% !important;
      max-width: 280px !important;
      justify-self: center !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
    }
    .footer-col-title {
      font-size: 11px !important;
      margin-bottom: 6px !important;
      letter-spacing: .08em !important;
      text-align: center !important;
    }
    .footer-col ul {
      gap: 5px !important;
      font-size: 12px !important;
      align-items: center !important;
      width: 100% !important;
    }
    .footer-col ul li {
      justify-content: center !important;
      text-align: center !important;
    }
    .footer-bottom { padding: 12px 18px !important; }
    .footer-bottom-inner { justify-content: center !important; text-align: center !important; }
    .footer-bottom-inner p {
      font-size: 10.5px !important;
      line-height: 1.4 !important;
      text-align: center !important;
    }
    .footer-rights { display: block; }
    .chat-float { padding: 7px; border-radius: 50%; }
    body.chat-footer-visible #chat-toggle.chat-float {
      bottom: calc(55px + env(safe-area-inset-bottom, 0px));
    }
    .chat-float-text { display: none; }
  }
/* Utilidades y componentes extraídos del marcado de la landing. */
.sec-wave-layer { position: relative; }
.sec-wave-layer--back { z-index: 1; }
.sec-wave-layer--front { z-index: 2; }

.is-hidden { display: none !important; }
.chat-wa-icon {
  color: #25d366;
  font-size: 20px;
}
.chat-wa-title {
  font-size: 13px;
  font-weight: 700;
}
.chat-wa-subtitle {
  color: #666;
  font-size: 12px;
}
.chat-float-icon--whatsapp { background: #25d366; }

/* En pantallas bajas/anchas angostas, #inicio crece en alto en vez de
   recortar contenido -- scroll-snap-type ya está desactivado de forma
   incondicional en landing-inicio.css (carga después que este archivo),
   el bloque que lo reactivaba aquí ya no tenía ningún efecto real, se
   quitó. */
@media (max-width: 900px), (max-height: 800px) {
  body { overflow-x: clip; }
  .snap-sec {
    height: auto;
    min-height: 100dvh;
    overflow-x: clip;
    overflow-y: visible;
  }
}
/* Tablet horizontal baja: mantener completos el encabezado, los cuatro pasos
   y el CTA dentro de una sola pantalla, sin desplazar el inicio de la sección. */
@media (max-width: 900px) and (max-height: 480px) {
  .hero-banner.snap-sec#inicio { padding: 112px 16px 56px !important; }
  .hero-banner-inner { gap: 20px; }
  .chat-float { padding: 6px; border-radius: 50%; }
  .chat-float-text { display: none; }
}
@media (min-width: 561px) and (max-width: 900px) and (max-height: 480px) {
  .hero-banner-inner {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 20px;
    padding-right: 64px;
    align-items: center;
  }
  .hero-banner .hb-video-wrapper--vertical,
  .hero-banner .hb-video-wrapper--promo-vertical { width: 180px; }
  .hb-headline { font-size: clamp(1.75rem, 4vw, 2.25rem); }
  .hb-sub { font-size: 14px; line-height: 1.45; }
  .hb-left { gap: 12px; }
  .hb-trust { gap: 7px 14px; }
  .hb-trust-item { font-size: 11px; }
}

/* Decisión del dueño (sesión dedicada a rediseñar las curvas, confirmada
   de nuevo 2026-10-01 al corregir el bug de la onda aplanada en su
   monitor): la onda decorativa de fin de sección (.sec-wave-top) solo se
   oculta en TELÉFONO -- el resto de anchos, incluidas las 2 tablets en
   horizontal (iPad 1194×702, Android 1280×605) y cualquier monitor/
   laptop de escritorio, deben mostrarla siempre. Ya NO existe la regla
   "ocultar en tablet horizontal" + los 2 parches que la reactivaban
   selectivamente a 52px solo para esos 2 dispositivos exactos (ambos
   eliminados 2026-10-01, ver CLAUDE.md -- validado visualmente antes de
   quitarlos: la onda ya se veía bien en ambas tablets sin necesitar
   ocultarla primero). El `clamp(170px, 24dvh, 230px)` de arriba ya
   resuelve la altura correcta para TODO lo que no sea teléfono, sin
   ninguna excepción por dispositivo. */
@media (max-width: 900px) {
  .sec-wave-top { display: none; }
}

/* En pantallas anchas pero bajas, el acceso al chat no tapa las CTA inferiores. */
@media (min-width: 901px) and (max-width: 1400px) and (max-height: 650px) {
  .chat-float { padding: 6px; border-radius: 50%; }
  .chat-float-text { display: none; }
}

/* ── PANTALLAS GRANDES (monitores 1920px+, 32"+) ───────────────────────────
   El resto del CSS solo tiene breakpoints hacia abajo (900px, 640px, 560px),
   el contenido nunca crecía más allá de esos topes, así que en un monitor
   grande todo se veía correcto pero pequeño, con mucho espacio vacío
   alrededor. Bloque aislado a propósito (no se tocan los clamp()/max-width
   base) para no arriesgar el resto de tamaños ya validados. */
@media (min-width: 1920px) {
  :root {
    --section-title-size: clamp(2.2rem, 2.2vw, 3.6rem);
  }
  .hb-headline { font-size: clamp(2rem, 2.6vw, 4.1rem); }
  .hb-sub { font-size: 19px; max-width: 620px; }

  /* Resto de secciones: en vez de reescribir cada tamaño de fuente/tarjeta
     interna una por una (alto riesgo de inconsistencias), se escala el
     bloque completo con zoom: crece texto, iconos y espaciados a la vez,
     manteniendo proporciones y sin desalinear los hitboxes de los clics
     (a diferencia de transform:scale, zoom sí ajusta el flujo del layout). */

  .footer-inner { max-width: 1780px; margin: 0 auto; zoom: 1.15; }
}

/* En monitores anchos pero bajos, el zoom de 1920px oculta el paginador. */

/* Monitores muy grandes (2560px+, ~27"-32"+): el mismo contenido de arriba
   necesita zoom más agresivo: 1920px cubre laptops/monitores estándar,
   este tramo cubre lo que sobra en pantallas notablemente más grandes. */
@media (min-width: 2560px) {
  .hb-headline { font-size: clamp(2rem, 2.4vw, 5rem); }
  .hb-sub { font-size: 21px; max-width: 700px; }

  .footer-inner { max-width: 2160px; zoom: 1.4; }
}

/* Tablet vertical (iPad/Android, ≥700px ancho): en Microcrédito y Crédito
   Simple, al apilarse en 1 columna la tarjeta "Requisitos" aparece
   primero -- sin ningún título de producto visible arriba (a diferencia
   de escritorio, donde la tarjeta de producto ya está visible al lado).
   El dueño pidió intercambiar el orden aquí para que la tarjeta de
   producto (con foto y nombre) aparezca primero en ambas secciones.
   Crédito Simple YA tiene order:1/2 en escritorio (línea ~1561) pero el
   bloque genérico max-width:900px (línea ~3616) lo resetea a
   `order: initial` sin distinguir orientación -- aquí se vuelve a fijar
   el orden correcto, pero solo en vertical (el dueño lo pidió
   explícitamente así, no en horizontal) mediante orientation:portrait,
   más específico que ese bloque genérico. */

/* Tablet vertical (iPad/Android, ≥700px ancho): Crédito Simple no tiene
   Aval, así que sus 8 requisitos viven en UN solo grupo (`--single`) en
   vez de repartirse en 2 grupos (Solicitante+Aval) como Microcrédito.
   En escritorio esto se compensa con `.requisitos-groups--single
   .requisito-list` en 2 columnas internas (línea ~1631) -- pero el
   bloque genérico max-width:900px (línea ~3672) lo colapsa a 1 columna
   para que quepa en teléfono angosto, sin distinguir tablet. En un
   iPad vertical (768-834px) sí hay espacio para las 2 columnas, y sin
   ellas la lista de Crédito Simple duplica su altura frente a
   Microcrédito, dejando un hueco mayor antes del widget flotante. */

/* Teléfono de 384 px: Microcrédito primero y Requisitos después, cada
   tarjeta con su propio punto de parada dentro de la misma sección. */

/* ════ Modal de WhatsApp (QR + link directo) ═══════════════════════ */
/* .lf-map-modal/.lf-map-dialog/.lf-map-header/.lf-map-close son el "chrome"
   genérico compartido por los 2 modales que usan este patrón en
   landing.blade.php: #lf-modal-whatsapp (este, vive en la página principal
   junto al footer) y #lf-modal-mapa (ahora en /solicitar, página propia --
   landing-solicitar.css trae solo lo específico del mapa, reutiliza este
   chrome de aquí ya que esa página también enlaza landing.css). */
.lf-map-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
}
.lf-map-modal.is-open { display: flex; }
.lf-map-dialog {
  width: 94%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
}
.lf-map-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  background: var(--teal-dark);
  color: #fff;
}
.lf-map-header > span {
  font-size: 14px;
  font-weight: 700;
}
.lf-map-close {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lf-wa-dialog { max-width: 380px; }
.lf-wa-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 20px 28px;
  text-align: center;
}
.lf-wa-instrucciones {
  margin: 0;
  color: #4a5a58;
  font-size: 14px;
  line-height: 1.5;
}
.lf-wa-qr {
  padding: 12px;
  background: #fff;
  border: 1px solid #e3ecea;
  border-radius: 12px;
}
.lf-wa-qr svg { display: block; }
.lf-wa-link-directo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.lf-wa-link-directo:hover { text-decoration: underline; }

/* El botón "Escríbenos por WhatsApp" del footer pasó de <a> a <button> para
   poder abrir el modal en vez de navegar directo — se mantiene visualmente
   idéntico al resto de links del footer. */
.footer-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.footer-link-btn:hover { text-decoration: underline; }
.proceso-continuar { display: none; }


/* Crédito Simple: perfiles como badges de selección, en el mismo verde
   institucional que la ficha de requisitos. El activo se distingue sin
   competir visualmente con el botón principal del producto. */