/* Tokens del DS incrustados aqui (antes: @import url('ds/tokens.css'))
   para evitar la descarga en cadena de un segundo CSS. */
/* ============================================================
   AFEX AV · Design System 2026 — TOKENS
   Fuente: Figma "00-Design-System-nueva-web-2026"
           Colección de variables "Colors-Afex-26-v1" (Mode 1)
   Único archivo donde se permiten valores HEX en crudo.
   ============================================================ */

/* @import de Fontshare eliminado: Satoshi ya es self-hosted en assets/fonts */

:root {
  /* ---------- PALETA · Navy ---------- */
  --navy-950: #091327;
  --navy-900: #152244;
  --navy-800: #1a2553;
  --navy-700: #202b59;
  --navy-500: #42466b;
  --navy-300: #565a7f;
  --navy-100: #aeafc6;
  --navy-50:  #dce2ea;

  /* ---------- PALETA · Slate ---------- */
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-500: #7e83a0;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #dce2ea;
  --slate-50:  #f2f2f7;

  /* ---------- PALETA · Green ---------- */
  --green-700: #2a5a1f;
  --green-600: #479032;
  --green-500: #5aa03f;
  --green-400: #61c250;
  --green-300: #77d467;
  --green-100: #a5ff95;
  --green-50:  #ecf6e7;
  --green-25:  #f0fdf4;

  /* ---------- PALETA · Purple ---------- */
  --purple-500: #7371d9;
  --purple-400: #9290e0;
  --purple-300: #c8b7fc;
  --purple-200: #ddd2fd;

  /* ---------- PALETA · Amber ---------- */
  --amber-700: #b45309;
  --amber-500: #d97706;
  --amber-400: #f59e0b;
  --amber-300: #fcd34d;
  --amber-100: #fef3c7;
  --amber-50:  #fffbeb;

  /* ---------- PALETA · Red ---------- */
  --red-700: #b91c1c;
  --red-500: #dc2626;
  --red-400: #ef4444;
  --red-300: #fca5a5;
  --red-100: #fee2e2;
  --red-50:  #fef2f2;

  /* ---------- PALETA · Info (Blue) ---------- */
  --blue-500: #3b82f6;
  --blue-50:  #eff6ff;

  /* ---------- PALETA · Base ---------- */
  --base-white: #ffffff;
  --base-black: #000000;

  /* ============================================================
     SEMÁNTICOS (alias resueltos desde Figma)
     ============================================================ */

  /* Superficies */
  --surface-background:    var(--base-white);
  --surface-field-default: var(--base-white);
  --surface-field-disabled:var(--slate-50);
  --surface-slate-mid:     var(--slate-200);
  --surface-success-bg:    var(--green-50);
  --surface-error-bg:      var(--red-50);
  --surface-info-bg:       var(--blue-50);
  --surface-banner-info:   var(--blue-50);
  --surface-banner-success:var(--green-25);
  --surface-banner-warning:var(--amber-50);
  --surface-banner-danger: var(--red-50);

  /* Bordes */
  --border-default:  var(--slate-300);
  --border-hover:    var(--slate-500);
  --border-disabled: var(--slate-100);
  --border-focus:    var(--navy-500);

  /* Texto */
  --text-input:       var(--slate-900);
  --text-label:       var(--slate-800);
  --text-helper:      var(--slate-700);
  --text-placeholder: var(--slate-500);
  --text-disabled:    var(--slate-500);
  --text-primary:     var(--slate-900);
  --text-secondary:   var(--slate-700);
  --surface-base:     var(--base-white);

  /* Iconos */
  --icon-default:  var(--slate-700);
  --icon-disabled: var(--slate-300);

  /* Roles */
  --primary-600: var(--navy-500);
  --primary-100: var(--navy-100);
  --primary-50:  var(--navy-50);
  --success-600: var(--green-600);
  --success-50:  var(--green-100);
  --warning-600: var(--amber-500);
  --warning-50:  var(--amber-100);
  --error-600:   var(--red-500);
  --error-50:    var(--red-100);
  --info-600:    var(--blue-500);

  /* Acento de marca (sidebar / activos) */
  --accent: var(--green-500);

  /* ============================================================
     TIPOGRAFÍA · Satoshi (DS·02)  400 / 700
     ============================================================ */
  --font-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-h1: 72px;  --lh-h1: 1.1;
  --fs-h2: 48px;  --lh-h2: 1.2;
  --fs-h3: 32px;  --lh-h3: 1.3;
  --fs-h4: 24px;  --lh-h4: 1.35;
  --fs-body: 16px; --lh-body: 1.5;
  --fs-p: 14px;    --lh-p: 1.4;
  --fs-small: 12px; --lh-small: 1.4;

  --fw-regular: 400;
  --fw-bold: 700;

  /* ============================================================
     ESPACIADO · grilla 8pt (DS·02)
     ============================================================ */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 96px;

  /* ============================================================
     RADIO (DS·02)
     ============================================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ============================================================
     ELEVACIÓN (DS·02) · valores reales de Figma · base slate-900
     ============================================================ */
  --shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.03);
  --shadow-sm: 0 2px 5px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 3px 6px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 5px 14px rgba(15, 23, 42, 0.10);

  /* Foco accesible (anillos) */
  --ring-focus:   0 0 0 3px rgba(66, 70, 107, 0.25);
  --ring-error:   0 0 0 3px rgba(220, 38, 38, 0.20);
  --ring-success: 0 0 0 3px rgba(71, 144, 50, 0.20);
  --ring-warning: 0 0 0 3px rgba(217, 119, 6, 0.20);

  /* Scrim modal y bordes translúcidos */
  --scrim: rgba(15, 23, 42, 0.5);
  --border-translucent: rgba(255, 255, 255, 0.15);

  /* Texto sobre superficies de color (on-color) */
  --on-color: var(--base-white);

  /* Transiciones */
  --t-fast: 150ms ease-out;
  --t-base: 200ms ease-out;
}

/* ============================================================
   TEMA OSCURO — variantes tonales (Mode 1 de Figma es claro;
   el oscuro se deriva de la paleta Navy/Slate. Registrado como
   adaptación para el dashboard).
   ============================================================ */
.theme-dark {
  --surface-background:    var(--navy-950);
  --surface-field-default: var(--navy-900);
  --surface-field-disabled:var(--navy-800);
  --surface-slate-mid:     var(--navy-800);
  --surface-base:          var(--navy-950);

  --border-default:  var(--navy-700);
  --border-hover:    var(--navy-500);
  --border-disabled: var(--navy-800);

  --text-input:      var(--slate-50);
  --text-label:      var(--slate-200);
  --text-helper:     var(--slate-300);
  --text-primary:    var(--slate-50);
  --text-secondary:  var(--navy-100);
  --text-placeholder:var(--slate-500);

  --icon-default:  var(--slate-300);

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.50);
  --shadow-lg: 0 5px 14px rgba(0, 0, 0, 0.60);
}

/* ============================================================
   AFEX AV · HOJA DE ESTILOS ÚNICA (consolidada)
   Fuentes Satoshi + base + páginas (index, quienes-somos, blog)
   ============================================================ */

/* ===== FUENTES · SATOSHI (rutas -> ../fonts/) ===== */
/**
* @license
*
* Font Family: Satoshi
* Designed by: Deni Anggara
* URL: https://www.fontshare.com/fonts/satoshi
* © 2026 Indian Type Foundry
*
* Satoshi Light 
* Satoshi LightItalic 
* Satoshi Regular 
* Satoshi Italic 
* Satoshi Medium 
* Satoshi MediumItalic 
* Satoshi Bold 
* Satoshi BoldItalic 
* Satoshi Black 
* Satoshi BlackItalic 
* Satoshi Variable (Variable font)
* Satoshi VariableItalic (Variable font)

*
*/
/* Fuente variable Satoshi (wght 300–900) — cubre todos los pesos.
   Las familias estáticas (Light/Regular/Medium/Bold/Black) se eliminaron:
   solo se usa Satoshi-Variable en las reglas del sitio. */
@font-face {
  font-family: 'Satoshi-Variable';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi-VariableItalic';
  src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  font-style: italic;
}
/* Alias con estilos normal+italic bajo un solo nombre de familia */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-VariableItalic.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
  font-style: italic;
}


/* ============================================================
   BASE + PÁGINA INDEX (home)
   ============================================================ */
/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --navy:var(--navy-700);
  --navy-deep:var(--navy-900);
  --navy-darker:var(--navy-950);
  --slate:var(--navy-300);
  --muted:var(--slate-500);
  --muted-2:var(--navy-100);
  --border:var(--navy-50);
  --bg:var(--base-white);
  --bg-alt:var(--slate-50);
  --green:var(--green-300);
  --green-mid:var(--green-500);
  --green-cta:#2eb62c;
  --green-deep:#00C853;
  --card-dark:var(--slate-800);
  --card-darker:var(--navy-800);
  --card-darkest:var(--navy-900);
  --text-card-muted:var(--slate-300);
  --text-card-label:var(--navy-100);

  --container-max:1248px;

  /* Fluid spacing & typography */
  --pad-x: clamp(24px, 6.7vw, 96px);
  --section-py: clamp(48px, 6vw, 72px);

  --fs-h1: clamp(40px, 7.2vw, 88px);
  --fs-h2: clamp(32px, 5.4vw, 72px);
  --fs-h3: clamp(28px, 4.2vw, 56px);
  --fs-h4: clamp(26px, 3.5vw, 48px);
  --fs-stat: clamp(56px, 8.2vw, 96px);
  --fs-eyebrow: 14px;
  --fs-body-lg: clamp(16px, 1.4vw, 20px);
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 11px;
  --radius-card: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 32px rgba(32,43,89,.08);
  --shadow-cta: 0 12px 40px rgba(46,182,44,.35);
  --transition: 0.3s cubic-bezier(.22,.61,.36,1);

  /* Buscador del header · valores del frame v3 (s-B). Sin equivalente en la
     paleta: el degradado va de más oscuro arriba a más claro abajo para que
     el campo se lea hundido, no elevado. */
  --nav-search-top: rgba(232,236,244,.95);    /* #E8ECF4 al 95% */
  --nav-search-bottom: rgba(247,249,252,.92); /* #F7F9FC al 92% */
  --nav-search-edge: #D3DBE8;
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Satoshi-Variable','Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400;
  background:var(--bg);
  color:var(--navy);
  line-height:1.5;
  font-feature-settings:'ss01','cv11';
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{list-style:none}

/* ---------- ENLACE INLINE EN CUERPO DE TEXTO ----------
   El reset de arriba deja los <a> sin color ni subrayado, lo que es correcto
   para botones y navegación pero vuelve invisible un enlace dentro de un
   párrafo. .inline-link es la excepción explícita: se aplica solo donde el
   enlace vive en medio del copy (enlazado interno hacia /noticias/). */
.inline-link{
  color:var(--green-400);
  font-weight:500;
  text-decoration:none;
  transition:color .18s ease;
}
.inline-link:hover,
.inline-link:focus-visible{
  color:var(--green-300);
}
/* El anillo de foco se mantiene: es la única señal del enlace para quien
   navega con teclado, y no se ve en uso normal con mouse. */
.inline-link:focus-visible{
  outline:2px solid var(--green-400);
  outline-offset:3px;
  border-radius:2px;
}

/* Línea "Guía relacionada" al pie de una tarjeta de producto. */
.pr-related{
  margin:16px 0 0;
  font-size:14px;
  line-height:1.5;
  color:var(--slate-500);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container{
  width:100%;
  max-width:calc(var(--container-max) + var(--pad-x) * 2);
  margin:0 auto;
  padding-inline:var(--pad-x);
}

/* ============================================================
   HEADER · STICKY
   ============================================================ */
.top-bar{
  background:var(--navy-800);
  color:var(--base-white);
  font-size:11px;
  font-weight:500;
  height:40px;
}
/* Disolución líquida del top-bar al ocultarse: su contenido se desvanece,
   se eleva ligeramente y se difumina siguiendo --bar (suavizado por lerp). */
.top-bar .container{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:40px;
  gap:32px;
  padding-block:0;
  opacity:calc(1 - var(--bar, 0));
  transform:translateY(calc(var(--bar, 0) * -8px));
  filter:blur(calc(var(--bar, 0) * 1.6px));
  will-change:opacity, transform, filter;
}
.top-bar a{letter-spacing:.12em}

/* El header-shell se fija y se desplaza hacia arriba justo lo que mide el
   top-bar (offset inline via JS, ver main.js). Así, al hacer scroll solo
   queda fija la barra blanca y el top-bar se revela/oculta de forma nativa
   con el scroll, sin animar altura ni provocar saltos al volver al tope. */
.header-shell{
  --glass:0; /* 0 = barra arriba · 1 = vidrio condensado (lo controla main.js con lerp) */
  position:sticky;
  top:0; /* fallback sin JS; main.js lo ajusta a -altura-del-top-bar */
  z-index:100;
  /* Translucidez, blur y saturación que se intensifican de forma líquida. */
  background:rgba(255,255,255, calc(.92 - var(--glass) * .18));
  backdrop-filter:saturate(calc(180% + var(--glass) * 40%)) blur(calc(14px + var(--glass) * 8px));
  -webkit-backdrop-filter:saturate(calc(180% + var(--glass) * 40%)) blur(calc(14px + var(--glass) * 8px));
  border-bottom:1px solid var(--border);
  /* Ancho completo, sin redondeo ni separación: solo el efecto de vidrio. */
  box-shadow:0 calc(4px + var(--glass) * 10px) calc(10px + var(--glass) * 28px) rgba(32,43,89, calc(.05 + var(--glass) * .08));
  will-change:backdrop-filter, background-color, box-shadow;
}
/* Reflejo especular: brillo sutil en el borde que aparece con el vidrio. */
.header-shell::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255, calc(var(--glass) * .85)),
             inset 0 -1px 0 rgba(255,255,255, calc(var(--glass) * .35));
}
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:88px;
  padding-inline:var(--pad-x);
  max-width:1440px;
  margin:0 auto;
}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{display:flex;align-items:center}
.brand-logo img{height:64px;width:auto;display:block}
.footer-logo img{height:56px;width:auto}

.product-tabs{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 12px;
  border:1px solid var(--slate-200);
  border-radius:var(--radius-pill);
  background:rgba(248,250,252,.55);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(32,43,89,.04),
    0 3px 6px rgba(0,0,0,.08); /* Figma: 0/3/6/0 var(--base-black) 8% */
  height:44px;
}
.product-tabs button{
  font-size:14px;
  font-weight:400;
  letter-spacing:0;
  color:var(--slate-500);
  height:36px;
  padding:8px 12px;
  border-radius:var(--radius-pill);
  line-height:20px;
  white-space:nowrap;
  background:transparent;
  transition:color .2s ease, background .2s ease, box-shadow .2s ease;
}
.product-tabs button.is-active{
  color:var(--navy);
  font-weight:700;
  background:rgba(255,255,255,.9);
  box-shadow:
    0 1px 2px rgba(32,43,89,.06),
    0 4px 12px rgba(32,43,89,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.product-tabs button:hover{color:var(--navy)}

.nav-main{display:flex;align-items:center;gap:24px}
.nav-links{display:flex;align-items:center;gap:16px;position:relative}
.nav-links a{
  font-size:14px;
  letter-spacing:-.1px;
  color:var(--navy);
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding-block:4px;
}
/* Solo los enlaces de PRIMER NIVEL llevan el punto (hijos directos).
   Sin el ">" alcanzaba también a .ns-card.is-active del dropdown, que ya
   tiene su propio <span class="ns-mark"> → salían 2 puntos. */
.nav-links > a.is-active::after,
.nav-sub-trigger.is-active::after{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--green);
  display:inline-block;
}
/* El punto de "Qué hacemos" es el estado por defecto del frame: cede cuando la
   sección actual es otra — un enlace de primer nivel (Blog / Contacto) o una
   card del panel "Quiénes somos". Nunca dos puntos en la nav. */
.nav-links:has(> a.is-active) .nav-sub-trigger.is-active::after,
.nav-links:has(.nav-sub--narrow .ns-card[aria-current="page"]) .nav-sub-trigger.is-active::after{
  display:none;
}
/* En ese segundo caso el punto pasa al trigger de "Quiénes somos". */
.nav-item.has-sub:has(.nav-sub--narrow .ns-card[aria-current="page"]) .nav-sub-trigger::after{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--green);
  display:inline-block;
}
.nav-actions{display:flex;align-items:center;gap:8px}

/* ============ BUSCADOR DEL HEADER ============
   s-A: la lupa es un ícono suelto, último hijo de .nav-links (hereda su gap 16).
   s-B: al abrir, .nav-main toma .is-searching → los 4 ítems se ocultan y el
   form ocupa su lugar. Se anima opacity/transform, nunca width/height. */
.nav-search-toggle{
  /* 40 del frame − 20% = 32: el halo alrededor del glifo de 20px baja de
     10 a 6px por lado, que es el aire que sobraba junto a "Contacto". */
  width:32px;height:32px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:0;   /* ícono suelto, sin cápsula */
  color:var(--navy);cursor:pointer;
  transition:opacity var(--transition), color .2s ease;
}
.nav-search-toggle:hover{color:var(--navy-500, var(--navy))}
.nav-search-toggle:focus-visible{outline:2px solid var(--ring, #608cfa);outline-offset:2px}

/* El form es hijo de .nav-links y se ancla a su borde DERECHO, que es justo
   donde está la lupa. Los 4 ítems se apagan pero siguen en el flujo, así que
   .nav-links conserva su ancho y el form no puede tapar "Iniciar sesión". */
.nav-search-form{
  position:absolute;right:0;top:50%;
  width:520px;max-width:calc(100vw - 260px);
  height:48px;
  display:flex;align-items:center;gap:12px;
  padding:8px 16px;
  border-radius:999px;
  /* arriba más oscuro que abajo: se lee HUNDIDO */
  background:linear-gradient(180deg, var(--nav-search-top) 0%, var(--nav-search-bottom) 100%);
  border:1px solid var(--nav-search-edge);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  /* sin sombra exterior: elevaría y anularía el hundido */
  box-shadow:
    inset 0 2px 5px rgba(27,37,69,.13),
    inset 0 -1px 1px #FFFFFF;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-50%);
  /* Se revela de derecha a izquierda —nace donde estaba la lupa— con clip-path
     en vez de scaleX: scaleX achataría el placeholder, el hint y el ícono
     durante la transición. "round 999px" evita que el recorte cuadre el radio. */
  clip-path:inset(0 0 0 55% round 999px);
  transition:opacity var(--transition), clip-path var(--transition), visibility 0s .3s;
  z-index:130;
}
.nav-main.is-searching .nav-search-form{
  opacity:1;visibility:visible;pointer-events:auto;
  clip-path:inset(0 round 999px);
  transition:opacity var(--transition), clip-path var(--transition), visibility 0s;
}
/* Los 4 ítems y la lupa se apagan uno a uno (no el contenedor: si .nav-links
   quedara en opacity 0, el form —que es su hijo— también desaparecería).
   Siguen ocupando espacio, así que el ancho de .nav-links no cambia. */
.nav-links > .nav-item,
.nav-links > a,
.nav-search-toggle{transition:opacity var(--transition)}
.nav-main.is-searching .nav-links > .nav-item,
.nav-main.is-searching .nav-links > a,
.nav-main.is-searching .nav-search-toggle{opacity:0;pointer-events:none}

.nav-search-ic{flex:none;color:var(--muted)}
.nav-search-input{
  flex:1 1 auto;min-width:0;
  font-family:inherit;font-size:16px;line-height:1.25;
  color:var(--navy);background:none;border:0;
  appearance:none;-webkit-appearance:none;
}
.nav-search-input::placeholder{color:var(--muted);opacity:1}
.nav-search-input:focus{outline:none}
.nav-search-input::-webkit-search-cancel-button{display:none}
.nav-search-hint{
  flex:none;font-size:12px;font-weight:500;color:var(--muted);
  white-space:nowrap;
}

/* ---- panel de resultados · reusa el lenguaje glass de .nav-sub ----
   Es hermano del form, no su hijo: el clip-path del form recorta a sus
   descendientes y se comería el panel. Se ancla al mismo borde derecho y
   queda 8px bajo el form (el form mide 48 centrado en el 50% de .nav-links,
   así que su borde inferior está en 50% + 24). */
.ns-results{
  position:absolute;right:0;top:calc(50% + 32px);
  width:520px;max-width:calc(100vw - 260px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 45%),
    rgba(252,253,254,.94);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(220,226,234,.9);
  border-radius:20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(32,43,89,.04),
    0 20px 48px rgba(32,43,89,.16),
    0 2px 8px rgba(32,43,89,.06);
  padding:8px;
  max-height:min(60vh, 420px);overflow-y:auto;
  opacity:0;visibility:hidden;
  transition:opacity .18s ease, visibility 0s .18s;
}
/* El panel NO se abre con el buscador: aparece al escribir el primer carácter
   (lo controla search.js con .is-open) y se esconde si el campo queda vacío. */
.ns-results.is-open{
  opacity:1;visibility:visible;transition:opacity .18s ease, visibility 0s;
}
/* sin encabezado (caso "hay resultados") el <p> no debe dejar hueco */
.ns-results-head:empty{display:none}
.ns-results-list:empty{display:none}
.ns-results-head{
  font-size:12px;font-weight:500;color:var(--muted);
  padding:6px 12px 8px;
  margin:0;
}
/* Los resultados son <a> dentro de .nav-links, así que `.nav-links a`
   (0,1,1) les ganaba a `.ns-result` (0,1,0) e imponía inline-flex + gap 8 +
   padding-block 4 → salían en horizontal y apretados. Se escapan subiendo la
   especificidad a (0,2,0) con el contenedor. */
.ns-results .ns-result{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:42px;padding:8px 12px;border-radius:12px;
  width:100%;
  transition:background .15s ease;
}
.ns-results .ns-result-t{font-size:14px;color:var(--navy);line-height:1.3}
.ns-results .ns-result-s{font-size:12px;color:var(--muted);flex:none}
/* Mismo lenguaje que el dropdown: tinte azul en vez de blanco.
   El ítem marcado con ↑/↓ va más marcado que el hover del mouse, porque es
   el que se abrirá con Enter. */
.ns-results .ns-result:hover,
.ns-results .ns-result:focus-visible{background:rgba(96,140,250,.08);outline:none}
.ns-results .ns-result.is-active{
  background:rgba(96,140,250,.14);
  box-shadow:inset 0 0 0 1px rgba(96,140,250,.35);
  outline:none;
}
/* la lista apila: no hereda la fila de .nav-links */
.ns-results-list{display:flex;flex-direction:column;gap:2px}

@media (prefers-reduced-motion: reduce){
  .nav-search-form,.nav-main.is-searching .nav-search-form,
  .nav-links > .nav-item,.nav-links > a,
  .ns-results,.ns-results.is-open,
  .nav-search-toggle,.ns-result{transition:none}
  .nav-search-form,.nav-main.is-searching .nav-search-form{
    clip-path:inset(0 round 999px);
  }
}
/* a ≤1024 manda el panel móvil: el buscador desktop desaparece */
@media (max-width:1024px){
  .nav-search-toggle,.nav-search-form{display:none}
}

/* ============ SUBMENÚS DESKTOP · Qué hacemos / Quiénes somos ============ */
.nav-item.has-sub{position:relative;display:inline-flex}
.nav-sub-trigger{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;letter-spacing:-.1px;color:var(--navy);
  padding-block:4px;cursor:pointer;background:none;
}
.nav-sub-trigger .chev{color:var(--muted);transition:transform .2s ease}
.has-sub.is-open .nav-sub-trigger .chev{transform:rotate(180deg)}
/* y = 128px desde el tope del header (top-bar 40 + barra blanca 88).
   El trigger mide 29px (14px × line-height 1.5 heredado = 21, + 8 de
   padding-block) y va centrado en los 88 → (88-29)/2 = 29.5px hasta el
   borde inferior de la barra. El puente ::before usa el mismo valor. */
.nav-sub{
  position:absolute;top:calc(100% + 29.5px);left:0;
  min-width:320px;
  max-width:calc(100vw - 32px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 45%),
    rgba(252,253,254,.94);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(220,226,234,.9);
  border-radius:20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(32,43,89,.04),
    0 20px 48px rgba(32,43,89,.16),
    0 2px 8px rgba(32,43,89,.06);
  padding:8px;
  opacity:0;visibility:hidden;
  /* Deslizamiento limpio, sin scale: el scale combinado con la curva de
     rebote era lo que producía el "pop". 8px es recorrido suficiente para
     que el movimiento se LEA —con 4px solo se percibía el fundido y por eso
     parecía aparecer de golpe—. */
  transform:translateY(8px);
  transform-origin:top left;
  transition:opacity .22s ease, transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s .3s;
  z-index:120;
}
/* puente invisible: el cursor no se pierde en el hueco trigger→panel */
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-29.5px;height:29.5px}
/* destello liquid glass que recorre el panel al abrirse */
.nav-sub::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.7) 50%, transparent 62%);
  background-size:250% 100%;
  background-position:200% 0;
  opacity:0;
}
.has-sub.is-open .nav-sub{
  opacity:1;visibility:visible;
  transform:translateY(0);
  /* Curva del proyecto (--transition): ease-out puro. La original era
     cubic-bezier(.3,1.45,.45,1) y ese 1.45 sobrepasaba y volvía → "pop".
     La duración es larga a propósito: un ease-out de 300ms desacelera de
     forma visible al final, y ES lo que hace que se sienta suave. */
  transition:opacity .22s ease, transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s;
}
.has-sub.is-open .nav-sub::after{animation:glassSheen .7s ease-out .1s}
/* el destello llega a .28 en vez de 1: se insinúa el vidrio sin flashear */
@keyframes glassSheen{
  0%{opacity:0;background-position:180% 0}
  30%{opacity:.22}
  100%{opacity:0;background-position:-60% 0}
}
.nav-sub a{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:14px;
  opacity:0;transform:translateY(6px);
  /* 6px y 280ms: con 3px/180ms el desplazamiento no se percibía y los ítems
     parecían encenderse en seco. Sin rebote (antes .25,1.3,.45,1). */
  transition:opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1), background .15s ease;
}
/* entrada escalonada de los ítems */
.has-sub.is-open .nav-sub a{opacity:1;transform:none}
.has-sub.is-open .nav-sub a:nth-child(1){transition-delay:0.03s,0.03s,0s}
.has-sub.is-open .nav-sub a:nth-child(2){transition-delay:0.06s,0.06s,0s}
.has-sub.is-open .nav-sub a:nth-child(3){transition-delay:0.09s,0.09s,0s}
.has-sub.is-open .nav-sub a:nth-child(4){transition-delay:0.12s,0.12s,0s}
.has-sub.is-open .nav-sub a:nth-child(5){transition-delay:0.15s,0.15s,0s}
.has-sub.is-open .nav-sub a:nth-child(6){transition-delay:0.18s,0.18s,0s}
.has-sub.is-open .nav-sub a:nth-child(7){transition-delay:0.21s,0.21s,0s}
/* Hover/foco del panel: tinte del azul del sistema (el mismo #608CFA del
   icon-box) al 8%. El blanco al 72% que había antes se perdía sobre el glass
   —que ya es casi blanco— y a la vez saturaba las filas. El azul se lee
   claramente y nunca se confunde con el estado seleccionado, que es verde. */
.nav-sub a:hover,
.nav-sub a:focus-visible{background:rgba(96,140,250,.08)}
.nav-sub .ns-row:hover,
.nav-sub .ns-row:focus-visible{background:rgba(96,140,250,.10)}
.ns-ic{
  width:38px;height:38px;border-radius:12px;flex:none;
  background:rgba(96,140,250,.13);color:var(--navy);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  display:inline-flex;align-items:center;justify-content:center;
  /* misma curva del proyecto que el resto del panel: la anterior era
     cubic-bezier(.3,1.6,.5,1) y ese 1.6 hacía brincar el ícono. */
  transition:background .15s ease, transform .18s cubic-bezier(.22,.61,.36,1);
}
.nav-sub a:hover .ns-ic{background:rgba(96,140,250,.18);transform:scale(1.04)}
.ns-tx{display:flex;flex-direction:column;gap:1px;text-align:left}
.ns-tx strong{font-size:14px;font-weight:700;color:var(--navy);line-height:1.25}
.ns-tx small{font-size:12px;color:var(--slate);line-height:1.35}
.nav-sub .ns-tx small{color:var(--muted)}
.ns-ic img{width:24px;height:24px;display:block}

/* ---- panel "Qué hacemos" · 648 · dos columnas de 312 (gap 8 + padding 8) ---- */
.nav-sub--wide{
  width:648px;left:-28px;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start;
}
/* La columna derecha es el ÁREA RESERVADA del submenú: el panel mide 648 en
   todos los estados y ese espacio queda en blanco cuando no hay submenú que
   mostrar. Se anima solo la opacidad —nunca sale del flujo— así que no hay
   salto de layout.

   El estado por defecto depende de cuál card es la página actual:
   · Productos activa (o ninguna card lo es) → columna VISIBLE al abrir
   · otra card es la página actual (Portal Personas / Portal de Pagos)
     → columna VACÍA al abrir, y se revela al pasar por Productos          */
.ns-col--prod{
  background:rgba(255,255,255,.55);
  border-radius:16px;
  padding:8px;
  position:relative;
  transition:opacity .18s ease;
}
/* puente sobre el gap de 8px: el cursor no se pierde al viajar de la card
   "Productos" a su columna (mismo recurso que .nav-sub::before) */
.ns-col--prod::before{
  content:"";position:absolute;top:0;bottom:0;left:-8px;width:8px;
}
/* 1 · se vacía mientras el cursor está sobre una card SIN submenú */
.ns-col--dest:has(.ns-card:not([href="/productos/"]):hover) + .ns-col--prod{
  opacity:0;
}
/* 2 · y arranca vacía cuando la página actual es una card distinta de Productos */
.nav-sub--wide:has(.ns-card[aria-current="page"]:not(.is-active)) .ns-col--prod{
  opacity:0;
}
/* 3 · en ese caso, el hover sobre Productos la revela… */
.nav-sub--wide:has(.ns-card[aria-current="page"]:not(.is-active))
  .ns-col--dest:has(.ns-card[href="/productos/"]:hover) + .ns-col--prod{
  opacity:1;
}
/* 4 · …y se mantiene mientras el cursor esté sobre la propia columna */
.nav-sub--wide:has(.ns-card[aria-current="page"]:not(.is-active)) .ns-col--prod:hover{
  opacity:1;
}
.ns-col{display:flex;flex-direction:column;gap:0;min-width:0}

/* ---- panel "Quiénes somos" · 320 ---- */
.nav-sub--narrow{width:320px;left:-17px;padding:8px 16px}

/* ---- card de destino: 58 de alto (10+38+10) ---- */
.nav-sub .ns-card{padding:10px 12px}

/* ESTADO ACTIVO — uno solo por panel.
   Por defecto lo lleva Productos (.is-active, estado del frame). Cuando el
   panel contiene la página actual, ese ítem toma el estado y Productos lo
   cede: nunca hay dos cards verdes al mismo tiempo. */
.nav-sub .ns-card.is-active,
.nav-sub .ns-card[aria-current="page"]{
  background:var(--green-50);
  padding-right:8px;
}
.nav-sub .ns-card.is-active:hover,
.nav-sub .ns-card.is-active:focus-visible,
.nav-sub .ns-card[aria-current="page"]:hover,
.nav-sub .ns-card[aria-current="page"]:focus-visible{background:var(--green-50)}
/* Marcador del ítem de página actual que no es Productos (Productos ya trae
   su <span class="ns-mark"> en el HTML). */
.nav-sub .ns-card[aria-current="page"]:not(.is-active)::after{
  content:"";flex:none;margin-left:auto;
  width:8px;height:8px;border-radius:50%;
  background:var(--green-300);
}
/* Productos deseleccionado cuando otro ítem del panel es la página actual */
.nav-sub:has(.ns-card[aria-current="page"]) .ns-card.is-active:not([aria-current="page"]){
  background:transparent;
  padding-right:12px;
}
.nav-sub:has(.ns-card[aria-current="page"]) .ns-card.is-active:not([aria-current="page"]) .ns-mark{
  display:none;
}
.ns-mark{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--green-300);margin-left:auto;
}
.nav-sub .ns-card[aria-disabled="true"]{cursor:default}
.nav-sub--narrow .ns-card{padding:10px 0}

/* ---- fila de producto: 32 de alto (6+20+6) ---- */
.nav-sub .ns-row{
  gap:0;padding:6px 12px;border-radius:8px;
  font-size:14px;line-height:20px;letter-spacing:-.1px;
  color:var(--navy);
}

@media (prefers-reduced-motion: reduce){
  .nav-sub,.has-sub.is-open .nav-sub,.nav-sub-trigger .chev,
  .nav-sub a,.has-sub.is-open .nav-sub a,.ns-ic,
  .ns-col--prod{transition:none;transition-delay:0s}
  .nav-sub{transform:none}
  .nav-sub a{opacity:1;transform:none}
  .has-sub.is-open .nav-sub::after{animation:none}
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;line-height:1;
  border-radius:var(--radius-pill);
  transition:transform var(--transition), box-shadow var(--transition), background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
/* Figma 16-v2: Button · Secondary Blue · S — outline blanco, 44px */
.btn-primary{
  background:var(--base-white);
  color:var(--navy);
  border:1.5px solid var(--navy);
  font-weight:500;
  letter-spacing:0;
  padding:0 16px;
  height:44px;
  box-shadow:0 3px 6px rgba(0,0,0,.15); /* Figma: 0/3/6/0 var(--base-black) 15% */
}
.btn-primary:hover{background:var(--navy);color:var(--base-white);transform:translateY(-2px)}

.btn-cta{
  position:relative;
  background:linear-gradient(90deg, var(--green-300) 0%, #61bc57 100%);
  color:var(--base-white);
  border:2px solid var(--green-cta);
  padding:6px 8px 6px 24px;
  gap:4px;
  height:44px;
  letter-spacing:0;
  font-weight:700;
  z-index:1;
  box-shadow:0 3px 6px rgba(0,0,0,.15); /* Figma: 0/3/6/0 var(--base-black) 15% */
}
.btn-cta::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:var(--radius-pill);
  border:2px solid var(--green-cta);
  z-index:-1;
  animation: ctaPulse 2.2s ease-out infinite;
  pointer-events:none;
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-cta);background:linear-gradient(90deg, #61bc57 0%, #4faa46 100%)}
.btn-cta .arrow{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.3);color:var(--base-white);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;
  transition:transform var(--transition);
}
.btn-cta .arrow svg path{stroke:var(--base-white)}
/* Header CTA: label cambia entre desktop y mobile (Figma 16-v2) */
.cta-label-m{display:none}
.btn-cta:hover .arrow{transform:translateX(4px)}
.btn-cta.is-large{height:56px;font-size:18px;padding:8px 8px 8px 24px}

@keyframes ctaPulse{
  0%{transform:scale(1);opacity:.9}
  70%{transform:scale(1.18);opacity:0}
  100%{transform:scale(1.2);opacity:0}
}

/* Hamburger */
.hamburger{display:none;width:44px;height:44px;align-items:center;justify-content:center;position:relative}
.hamburger span{
  position:absolute;
  left:11px;right:11px;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .3s ease, opacity .3s ease, top .3s ease;
}
.hamburger span:nth-child(1){top:15px}
.hamburger span:nth-child(2){top:21px}
.hamburger span:nth-child(3){top:27px}
.hamburger.is-open span:nth-child(1){top:21px;transform:rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
/* Hero Figma 16-v2: blanco + 01-hero-home-1.png op .70 + velo izq + fade blanco abajo */
.hero{
  position:relative;
  background:
    linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)),
    url('../img/01-hero-home-1.webp') center/cover no-repeat,
    var(--base-white);
  padding-block: clamp(40px, 5vw, 48px);
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.55) 32%, rgba(255,255,255,.10) 62%, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.85) 100%);
  z-index:0;
  pointer-events:none;
}
.hero .container{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: minmax(0, 1fr) clamp(320px, 36%, 480px);
  gap:24px;
  align-items:center;
}
.hero-left{display:flex;flex-direction:column;gap:24px}

.hero-right{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.hero-photo{display:none}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px 7px 12px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:var(--base-white);
  font-size:var(--fs-eyebrow);
  color:var(--navy);
  align-self:flex-start;
  letter-spacing:.02em;
}
.eyebrow .dot{
  width:8px;height:8px;border-radius:50%;background:var(--green);
  display:inline-block;flex-shrink:0;
}
.eyebrow.dark{color:var(--base-white);background:transparent}
.eyebrow.dark .dot{background:var(--green)}

.hero-title{
  font-size:var(--fs-h1);
  font-weight:800;
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--navy);
}
.hero-title .accent{color:var(--green-mid)}

.hero-sub{
  font-size:var(--fs-body-lg);
  line-height:1.45;
  color:var(--slate);
  font-weight:500;
  max-width:560px;
}

.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:8px;
}
.trust-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--base-white);
  font-size:14px;
  font-weight:500;
  color:var(--navy-500);
}
.trust-pill .check{color:var(--green);font-weight:700}

/* Tarifa floating card */
.tarifa-card{
  background:linear-gradient(254deg, rgba(14,25,71,.9) 0%, rgba(32,43,89,.9) 100%);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-radius:var(--radius-card);
  padding:28px 24px;
  color:var(--base-white);
  position:relative;
  z-index:2;
  overflow:hidden;
  border:12px solid rgba(242,242,247,.92);
  box-shadow:0 24px 60px rgba(21,34,68,.25);
  animation:floatY 3.4s ease-in-out infinite;
  min-height:400px;
  width:100%;
  max-width:380px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.tarifa-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(119,212,103,.22), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(173,206,250,.12), transparent 60%);
  pointer-events:none;
}
.tarifa-top{display:flex;flex-direction:column;gap:24px;position:relative;z-index:1}
.tarifa-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08);
  font-size:14px;
  align-self:flex-start;
  letter-spacing:.04em;
}
.tarifa-badge .dot-sm{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block}
.tarifa-price{display:flex;align-items:baseline;gap:4px}
.tarifa-price .currency{font-size:48px;font-weight:800;line-height:1}
.tarifa-price .amount{font-size:clamp(72px, 10vw, 100px);font-weight:800;line-height:1;letter-spacing:-0.04em}
.tarifa-pills{display:flex;gap:8px}
.pill-mini{
  padding:6px 14px;border-radius:var(--radius-pill);
  background:var(--green-cta);
  color:var(--base-white);font-size:14px;font-weight:500;
}
.pill-mini.outline{background:transparent;border:1px solid rgba(255,255,255,.5);color:var(--base-white);font-weight:400}

.tarifa-divider{height:1px;background:rgba(255,255,255,.18);margin:0;position:relative;z-index:1}
.tarifa-bottom{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.tarifa-bottom h4{font-size:20px;font-weight:500;line-height:1.2;white-space:nowrap}
.tarifa-bottom p{font-size:14px;color:rgba(255,255,255,.78);line-height:1.45}

@keyframes floatY{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* ============================================================
   STATS
   ============================================================ */
.stats{
  background:var(--base-white);
  padding-block: var(--section-py);
}
.stats .container{display:flex;flex-direction:column;gap:16px}
/* Grid 4 columnas · sin separadores (frame Figma 17C: 4×300 gap 16) */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
  align-items:start;
  position:relative;
}
.stat{display:flex;flex-direction:column;gap:8px;padding-block:8px;position:relative}
.stat-value{
  font-size:clamp(48px, 5.6vw, 80px); /* Figma 17C: 80px */
  font-weight:800;
  line-height:.85;
  letter-spacing:-0.04em;
  color:var(--navy);
  display:inline-flex;
  align-items:baseline;
}
.stat-value .plus{color:var(--green-300)}
.stat-value .word{color:var(--green-300);margin-left:.18em;font-size:clamp(30px, 3.2vw, 46px)}
.stat-label{font-size:var(--fs-body-lg);color:var(--navy);font-weight:500;line-height:1.3}
.stat-hint{font-size:14px;color:var(--muted);margin-top:4px}
/* Tablet: 2×2 */
@media (max-width:1024px) and (min-width:769px){
  .stats-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:32px 24px}
}

/* ============================================================
   SERVICIOS
   ============================================================ */
.services{
  background:var(--bg-alt);
  padding-block:var(--section-py);
}
.services .container{display:flex;flex-direction:column;gap:32px}
.section-head{display:flex;flex-direction:column;gap:16px}
.section-head h2{
  font-size:var(--fs-h2);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-0.02em;
  color:var(--navy);
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:24px;
}
.service-card{
  position:relative;
  padding:6px;
  background:var(--border);
  border-radius:var(--radius-card);
  transition:transform var(--transition), box-shadow var(--transition);
  cursor:pointer;
}
.service-card::after{
  content:"";
  position:absolute;
  top:6px;left:24px;right:24px;
  height:3px;
  background:var(--green-cta);
  border-radius:3px;
  opacity:0;transform:scaleX(.6);
  transition:opacity var(--transition), transform var(--transition);
}
.service-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(32,43,89,.18)}
.service-card:hover::after{opacity:1;transform:scaleX(1)}
.service-inner{
  background:linear-gradient(180deg,var(--slate-800),var(--navy-900));
  border-radius:19px;
  padding:20px 16px;
  display:flex;flex-direction:column;gap:16px;
  height:100%;
  min-height:312px;
}
/* El SVG (icons-trs-N.svg) ya trae el contenedor navy + borde de Figma */
.service-icon{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.service-icon img{width:48px;height:48px;object-fit:contain;display:block}
.service-icon.green{color:#a2ebcc}
.service-icon.purple{color:var(--purple-300)}
.service-icon.yellow{color:#fdd580}
.service-card .label{font-size:14px;color:var(--navy-100)}
.service-card .title{font-size:24px;font-weight:500;color:var(--base-white);line-height:1.17}
.service-card .desc{font-size:14px;color:var(--slate-300);line-height:1.3}
.tag{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px 4px 8px;
  border-radius:var(--radius-pill);
  background:var(--navy-700);border:1px solid var(--navy-500);
  font-size:14px;
}
.tag .dot-tag{width:5px;height:5px;border-radius:50%}
.tag.purple{color:var(--purple-200)}.tag.purple .dot-tag{background:var(--purple-200)}
.tag.green{color:#c0f2dd}.tag.green .dot-tag{background:#c0f2dd}
.tag.yellow{color:#fde3a7}.tag.yellow .dot-tag{background:#fde3a7}

/* ============================================================
   CARDS USD
   ============================================================ */
.cards-section{
  padding-block:var(--section-py);
  background:var(--base-white);
  border-block:1px solid var(--slate-200);
}
.cards-wrap{
  background:var(--base-white);
  border-radius:var(--radius-card);
  border:10px solid var(--slate-50);
  padding:clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px);
  display:grid;
  grid-template-columns: 1fr minmax(280px, 373px);
  gap:40px;
  align-items:center;
}
.cards-visual{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cards-visual img{
  width:100%;
  max-width:640px;
  height:auto;
  display:block;
  filter:drop-shadow(0 22px 40px rgba(20,32,68,.18));
}
.credit-card{
  position:absolute;
  width:62%;
  max-width:320px;
  aspect-ratio: 320/200;
  border-radius:18px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 18px 40px rgba(20,32,68,.18);
  color:var(--base-white);
  overflow:hidden;
  font-size:14px;
  transition:transform var(--transition);
}
.credit-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 35%);
  pointer-events:none;
}
.credit-card .row{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.credit-card .chip{
  width:38px;height:28px;border-radius:5px;
  background:linear-gradient(135deg,#e7d9a1,#b69540);
}
.credit-card .contactless{
  width:24px;height:24px;border:1.6px solid currentColor;border-radius:50%;
  position:relative;opacity:.95;
}
.credit-card .contactless::before,.credit-card .contactless::after{
  content:"";position:absolute;inset:0;margin:auto;border-radius:50%;border:1.6px solid currentColor;
}
.credit-card .contactless::before{width:14px;height:14px;top:0;left:0;right:0;bottom:0}
.credit-card .contactless::after{width:6px;height:6px;top:0;left:0;right:0;bottom:0}
.credit-card .num{font-size:16px;font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.credit-card .meta{display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.92}
.credit-card .label-account{font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}

.card-red    {background:linear-gradient(135deg,#c0392b 0%,#8d1a14 100%);transform:rotate(-8deg) translate(0,40px);left:0;top:20%;z-index:1}
.card-orange {background:linear-gradient(135deg,var(--amber-400) 0%,var(--amber-700) 100%);transform:rotate(-3deg) translate(40px,20px);left:12%;top:10%;z-index:2}
.card-silver {background:linear-gradient(135deg,#e8edf3 0%,#b6bfca 100%);color:var(--navy-700);transform:rotate(2deg) translate(80px,0);left:24%;top:5%;z-index:3}
.card-silver .chip{background:linear-gradient(135deg,#c9a96e,#8b6f3a)}
.card-blue   {background:linear-gradient(135deg,#1e3a8a 0%,var(--navy-950) 100%);transform:rotate(7deg) translate(120px,-20px);left:36%;top:0%;z-index:4}
.card-blue .credit-logo{display:flex;align-items:flex-end;gap:6px;font-weight:800}
.card-blue .credit-logo small{font-size:9px;font-weight:500;letter-spacing:.1em;opacity:.85}

.cards-copy{display:flex;flex-direction:column;gap:16px}
.cards-copy h3{
  font-size:var(--fs-h3);
  font-weight:800;
  line-height:1.07;
  letter-spacing:-0.02em;
  color:var(--navy);
}
.cards-copy p{font-size:14px;color:var(--navy);line-height:1.45}
.cards-tags{display:flex;gap:12px;flex-wrap:wrap}
.cards-tags .tag-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 18px 6px 10px;border-radius:var(--radius-pill);
  background:var(--slate-700);border:1px solid var(--navy-900);
  font-size:14px;color:var(--base-white);
}
.cards-tags .check{color:var(--green);font-weight:700}

/* ============================================================
   CONFIANZA
   ============================================================ */
.trust{
  background:var(--bg-alt);
  padding-block:var(--section-py);
}
.trust .container{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.trust .eyebrow{align-self:center;text-transform:uppercase;letter-spacing:.08em}
.trust h2{margin-bottom:0}
.trust h2 + .partners-grid{margin-top:40px}
.trust h2{
  font-size:var(--fs-h2);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-0.02em;
  color:var(--navy);
  text-align:center;
}
.partners-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:32px;
}
.partner{
  flex:0 0 calc((100% - 3 * 32px) / 4);
  height:100px;
  border-radius:16px;
  background:var(--base-white);
  display:flex;align-items:center;justify-content:center;
  padding:16px 16px 20px;
  color:var(--muted);
  box-shadow:0 1px 2px rgba(32,43,89,.04);
  transition:transform var(--transition), box-shadow var(--transition);
}
.partner:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(32,43,89,.08);
}
.partner img{
  max-width:75%;
  max-height:60px;
  width:auto;height:auto;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.9;
  transition:filter .25s ease, opacity .25s ease;
}
.partner:hover img{filter:grayscale(0);opacity:1}

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.testimonials{
  background:var(--base-white);
  padding-block:var(--section-py);
}
.testimonials .container{display:flex;flex-direction:column;gap:32px}
.testimonials h2{
  font-size:var(--fs-h2);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-0.02em;
  color:var(--navy);
}

.testimonials-track-wrap{position:relative;overflow:hidden}
.testimonials-track{
  display:flex;
  gap:24px;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.testimonial{
  flex:0 0 calc((100% - 48px) / 3);
  background:var(--bg-alt);
  border:8px solid var(--base-white);
  border-radius:var(--radius-card);
  padding:32px;
  display:flex;flex-direction:column;gap:32px;
  box-shadow:0 0 0 1px #eef0f5;
}
.testimonial-head{display:flex;align-items:center;gap:12px}
.t-tag{
  padding:4px 10px;border-radius:var(--radius-pill);
  background:var(--base-white);border:1px solid #d6d8e2;
  font-size:14px;color:var(--slate);
}
.t-stars{display:flex;gap:2px;color:var(--green-mid);font-size:14px;letter-spacing:2px}
.testimonial p{font-size:16px;color:var(--navy);line-height:1.44}
.t-author{display:flex;align-items:center;gap:14px}
.t-avatar{
  width:32px;height:32px;border-radius:50%;background:var(--navy);flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--slate-50);line-height:1;
}
.t-author small{font-size:12px;color:var(--muted);display:block}
.t-author strong{font-size:14px;color:var(--navy);font-weight:700;display:block}

.dots{display:flex;justify-content:center;gap:8px}
.dots button{
  width:18px;height:18px;border-radius:50%;
  background:var(--slate-300);transition:background .2s ease, transform .2s ease;
}
.dots button.is-active{background:var(--navy);transform:scale(1.05)}

/* ============================================================
   CTA WRAP
   ============================================================ */
.cta{
  background:var(--bg-alt);
  padding-block: clamp(40px, 5vw, 56px);
}
.cta-banner{
  background:
    url('../img/fondo-cta-banner.webp') center/cover no-repeat,
    var(--navy-950);
  border-radius:32px;
  padding: clamp(32px, 5vw, 48px) clamp(28px, 4.5vw, 56px);
  color:var(--base-white);
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:32px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.cta-banner::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(45% 70% at 80% 0%, rgba(119,212,103,.18), transparent 60%),
    radial-gradient(45% 70% at 0% 100%, rgba(95,135,255,.14), transparent 60%);
  pointer-events:none;
}
.cta-text{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1}
.cta-text .eyebrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:var(--base-white)}
.cta-text h2{
  font-size:var(--fs-h4);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-0.02em;
}
.cta-text p{font-size:15px;color:var(--navy-50);line-height:1.5}
.cta-actions{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--base-white);color:var(--base-white);
  padding:14px 22px;border-radius:var(--radius-pill);height:56px;font-weight:700;font-size:14px;
  transition:background .2s ease;
}
.btn-ghost:hover{background:rgba(255,255,255,.1)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  background:var(--navy-deep);
  color:var(--base-white);
}
.footer-main{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:64px;
  width:100%;
  max-width:calc(var(--container-max) + var(--pad-x) * 2);
  margin-inline:auto;
  padding: 80px var(--pad-x) 64px;
}
.footer-brand{display:flex;flex-direction:column;gap:24px}
.footer-brand .brand-logo{height:72px}
.footer-brand p{font-size:14px;color:var(--border);line-height:1.45;max-width:253px}
.app-download{display:flex;flex-direction:column;gap:16px}
.app-download .label{font-size:14px;color:var(--muted-2)}
.app-buttons{display:flex;gap:16px;flex-wrap:wrap}
.app-buttons .store-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;border-radius:12px;
  background:transparent;
  transition:transform .2s ease;
  height:48px;
}
.app-buttons .store-btn:hover{transform:translateY(-2px)}
.app-buttons .store-btn img{height:48px;width:auto;display:block;border-radius:12px}

.footer-cols{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 56px);
}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col h4{font-size:14px;font-weight:500;color:var(--base-white);letter-spacing:.04em;margin-bottom:0}
.footer-col a{font-size:14px;color:var(--border);transition:color .2s ease}
.footer-col a:hover{color:var(--base-white)}

.social{display:flex;gap:10px}
.social a{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--navy-50);transition:background .2s ease, color .2s ease, transform .2s ease;
  overflow:hidden;
}
.social a:hover{background:var(--base-white);transform:translateY(-2px)}
.social a img{width:18px;height:18px;object-fit:contain;display:block;filter:brightness(0) invert(1);transition:filter .2s ease}
.social a:hover img{filter:none}

.footer-bottom{
  background:var(--navy);
  padding: 24px var(--pad-x);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;
  font-size:14px;color:var(--muted-2);
}
.footer-bottom span{display:inline-flex;align-items:center;gap:16px}
.footer-bottom .sep{width:1px;height:12px;background:var(--muted-2);display:inline-block}

/* ============================================================
   SCROLL REVEALS
   ============================================================ */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1;transform:translateY(0)}
.reveal[data-delay="100"]{transition-delay:.1s}
.reveal[data-delay="200"]{transition-delay:.2s}
.reveal[data-delay="300"]{transition-delay:.3s}
.reveal[data-delay="400"]{transition-delay:.4s}
.reveal[data-delay="500"]{transition-delay:.5s}

/* ============================================================
   MOBILE PANEL
   ============================================================ */
.mobile-panel{
  position:fixed;
  inset:0;
  background:rgba(10,22,40,.4);
  backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
  z-index:90;
}
.mobile-panel.is-open{opacity:1;visibility:visible}
.mobile-panel-inner{
  position:absolute;
  top:0;right:0;bottom:0;
  width:min(92%, 360px);
  background:var(--base-white);
  padding:128px 24px 40px;
  display:flex;flex-direction:column;gap:24px;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto;
}
.mobile-panel.is-open .mobile-panel-inner{transform:translateX(0)}
.mobile-panel-inner a:not(.btn):not(.mp-link):not(.mp-row){
  font-size:18px;font-weight:700;color:var(--navy);
  padding:12px 0;border-bottom:1px solid var(--border);
}

/* ===== Lista del panel móvil — reutiliza el componente desktop (ns-ic / ns-tx) ===== */
.mobile-panel-inner{gap:20px}
.mp-list{display:flex;flex-direction:column;gap:2px}
.mp-link{
  display:flex;align-items:center;gap:14px;
  padding:10px 8px;border-radius:14px;
  min-height:68px;                         /* card de 48px + padding */
  transition:background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.mp-link:hover,.mp-link:active{background:var(--bg-alt)}
.mp-link:focus-visible{outline:2px solid var(--ring, #608cfa);outline-offset:2px}
/* Card del ítem a 48px (cuadrada) + tipografías e ícono cubicados — solo en el panel móvil */
.mp-link .ns-ic{width:48px;height:48px;border-radius:14px}
.mp-link .ns-ic svg,
.mp-link .ns-ic img{width:24px;height:24px;display:block}
.mp-link .ns-tx{gap:2px;flex:1 1 auto;min-width:0}
.mp-link .ns-tx strong{font-size:16px;line-height:1.3}
.mp-link .ns-tx small{font-size:13px;line-height:1.35}

/* Botones de acceso: reutilizan .btn-primary de desktop, full-width 48px ===== */
.mp-actions{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-top:4px;padding-top:20px;border-top:1px solid var(--border);
}
.mobile-panel-inner .btn{align-self:stretch;height:48px;font-size:15px}

/* ===== Acordeones del panel móvil (Qué hacemos · Quiénes somos) =====
   El trigger lleva .mp-link + .mp-group-btn: la card de 68px viene de
   .mp-link y aquí solo se aporta lo propio del <button>. */
.mp-group{display:flex;flex-direction:column}
.mp-group-btn{
  width:100%;
  cursor:pointer;background:none;text-align:left;
  font-family:inherit;color:var(--navy);
  -webkit-appearance:none;appearance:none;border:0;
}
.mp-group-btn .chev{
  flex:none;margin-left:auto;color:var(--slate);
  transition:transform .2s ease;
}
.mp-group.is-open .mp-group-btn .chev{transform:rotate(180deg)}
.mp-sub{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .25s cubic-bezier(.22,.61,.36,1);
}
/* overflow:hidden solo recorta: sin visibility el contenido colapsado seguiría
   siendo tabulable y anunciado por el lector de pantalla. El delay lo saca del
   árbol recién cuando terminó de cerrarse; al abrir entra de inmediato. */
.mp-sub-inner{
  min-height:0;overflow:hidden;
  visibility:hidden;transition:visibility 0s .25s;
}
.mp-group.is-open .mp-sub{grid-template-rows:1fr}
.mp-group.is-open .mp-sub-inner{visibility:visible;transition-delay:0s}
/* fila del acordeón: 42 de alto (11 + 20 + 11) */
.mp-row{
  display:block;font-size:15px;font-weight:500;line-height:20px;
  color:var(--slate);
  padding:11px 0 11px 14px;border-bottom:1px solid var(--bg-alt);
}
.mp-row:last-child{border-bottom:1px solid var(--border)}
/* Vista aún no publicada: emphasis reducido para que no se lea como tocable
   (cursor:default no existe en táctil). */
.mp-row[aria-disabled="true"]{cursor:default;opacity:.45}
@media (prefers-reduced-motion: reduce){
  .mp-sub,.mp-group-btn .chev{transition:none}
  .mp-sub-inner{transition-delay:0s}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ===== HEADER · DESKTOP COMPACTO (1025–1180): todo visible sin overflow ===== */
@media (max-width: 1180px) and (min-width: 1025px){
  .header{padding-inline:32px;gap:16px}
  .top-bar .container{padding-inline:32px}
  .brand{gap:12px}
  .brand-logo img{height:56px}
  .product-tabs button{padding:8px 10px}
  .nav-main{gap:16px}
  .nav-links{gap:12px}
  .btn-primary{padding:12px 18px}
  .nav-actions .btn-cta{padding:8px 10px 8px 18px}
}

@media (max-width: 1024px){
  .product-tabs{display:none}
  .nav-links{display:none}
  .nav-actions{gap:8px}
  .nav-actions .btn-primary{display:none}
  .hamburger{display:flex}
  .header{height:72px;padding-inline:24px}
  .top-bar .container{padding-inline:24px}
  .cta-label-d{display:none}
  .cta-label-m{display:inline}
  /* Botones derecha: CTA compacto 40px como Figma mobile */
  .nav-actions .btn-cta{height:40px;padding:4px 4px 4px 16px;font-size:14px;font-weight:500;gap:4px}
  .hamburger{width:40px;height:40px}
  .hamburger span{left:9px;right:9px}
  .hamburger span:nth-child(1){top:13px}
  .hamburger span:nth-child(2){top:19px}
  .hamburger span:nth-child(3){top:25px}
  .hamburger.is-open span:nth-child(1){top:19px}
  .hamburger.is-open span:nth-child(3){top:19px}

  .hero{background-position:right center}
  .hero::before{background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.7) 60%, rgba(255,255,255,.92) 100%)}
  .hero .container{grid-template-columns:1fr;gap:32px}
  .hero-right{min-height:auto}
  .tarifa-card{max-width:420px;width:100%;margin-inline:auto;min-height:340px}

  .service-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .partners-grid{gap:20px}
  .partner{flex-basis:calc((100% - 2 * 20px) / 3)}

  .cards-wrap{grid-template-columns:1fr;gap:24px}
  .cards-visual{max-width:600px;margin-inline:auto}

  .testimonial{flex:0 0 100%}

  .cta-banner{grid-template-columns:1fr;gap:24px}
  .footer-main{grid-template-columns:1fr;gap:48px}
  .footer-cols{grid-template-columns:repeat(2, minmax(0,1fr))}
}

/* ================ TABLET / SMALL DESKTOP ================ */
@media (max-width: 768px){
  /* Section padding reduced to figma spec (48 top/bottom) */
  :root{ --section-py: 48px; }

  /* Top bar mobile: visible y centrada (Figma 01-Movile-Home 16-v2) */
  .top-bar{font-size:10px}
  .top-bar .container{justify-content:center;gap:16px;padding-block:7px}

  /* Hero */
  .hero{ padding-block: 24px 32px; }
  .hero .container{ gap: 24px; }
  .hero-left{ gap: 16px; }
  .hero-sub{ font-size: 15px; line-height: 1.5; }

  /* Tarifa card — thinner border + tighter padding to feel native on small screens */
  .tarifa-card{
    max-width: 100%;
    border-width: 8px;
    padding: 24px 20px;
    min-height: 320px;
    box-shadow: 0 12px 32px rgba(21,34,68,.18);
  }
  .tarifa-price .currency{ font-size: 40px; }
  .tarifa-bottom h4{ white-space: normal; font-size: 18px; }

  /* Trust pills wrap snugly */
  .trust-row{ gap: 8px; }
  .trust-pill{ font-size: 13px; padding: 4px 10px; }

  /* Eyebrow shrinks on mobile */
  .eyebrow{ font-size: 12px; padding: 6px 12px 6px 10px; letter-spacing: .06em; }

  /* Hero CTA: keep DS sizing — was is-large 56h, mobile uses 48h to match figma 200x48 */
  .hero-left .btn-cta.is-large{ height: 48px; font-size: 16px; padding: 6px 6px 6px 20px; }
  .hero-left .btn-cta.is-large .arrow{ width: 32px; height: 32px; }

  /* Stats — stacked column with horizontal divider */
  .stats-grid{ grid-template-columns: 1fr; gap: 24px; }
  .stat + .stat::before{ display:none; }
  .stat + .stat{ border-top: 1px solid var(--border); padding-top: 24px; }
  .stat-value{ font-size: 64px; line-height: .9; }
  .stat-value .word{ font-size: 36px; }
  .stat-label{ font-size: 16px; }
  .stat-hint{ font-size: 14px; }

  /* Servicios — horizontal scroll carousel (matches figma row of 266×308 cards) */
  .service-grid{
    display: flex;
    grid-template-columns: none;
    gap: 16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-block: 4px 8px;
    margin-inline: calc(-1 * var(--pad-x));
    padding-inline: var(--pad-x);
    scrollbar-width: none;
  }
  .service-grid::-webkit-scrollbar{ display: none; }
  .service-card{
    flex: 0 0 78vw;
    max-width: 280px;
    scroll-snap-align: start;
  }
  .service-inner{ min-height: 300px; padding: 20px; gap: 14px; }
  .service-card .title{ font-size: 22px; }
  .service-card .desc{ font-size: 14px; }

  /* Cards USD section — stacked, tighter outer border */
  .cards-wrap{
    grid-template-columns: 1fr;
    gap: 24px;
    border-width: 6px;
    padding: 28px 20px;
  }
  .cards-visual{ max-width: 360px; }
  .cards-copy h3{ font-size: 32px; line-height: 1.08; }
  .cards-copy p{ font-size: 14px; }
  .cards-tags{ gap: 8px; }

  /* Partners — 2-col grid, shorter cells to match figma 167×56 */
  .partners-grid{
    gap: 12px;
  }
  .partner{
    flex-basis: calc((100% - 12px) / 2);
    height: 64px;
    padding: 10px 12px;
    border-radius: 12px;
  }
  .partner img{ max-height: 36px; max-width: 80%; }

  /* Testimonials — tighter padding to match figma 24px */
  .testimonials .container{ gap: 24px; }
  .testimonial{
    padding: 24px;
    gap: 24px;
    border-width: 6px;
  }
  .testimonial p{ font-size: 15px; }

  /* CTA Final banner — stacked + tighter */
  .cta{ padding-block: 32px; }
  .cta-banner{
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 24px;
    border-radius: 24px;
  }
  .cta-text{ gap: 16px; }
  .cta-text h2{ font-size: 28px; line-height: 1.15; }
  .cta-text p{ font-size: 14px; }
  .cta-actions{ width: 100%; }
  .cta-actions .btn-cta.is-large{
    height: 56px;
    width: 100%;
    justify-content: space-between;
  }
  .btn-ghost{ width: 100%; height: 52px; font-size: 14px; }

  /* Footer — 1-col stack at this breakpoint (matches figma vertical layout) */
  .footer-main{
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px var(--pad-x) 32px;
  }
  .footer-cols{
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .footer-col{ gap: 8px; }
  .footer-col h4{ font-size: 13px; letter-spacing: .06em; opacity: .72; }
  .footer-col + .footer-col{
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .footer-bottom{
    flex-direction: column;
    text-align: center;
    padding: 20px var(--pad-x);
    font-size: 12px;
  }
  .footer-bottom .sep{ display: none; }
  .footer-bottom span{ flex-direction: column; gap: 4px; }

  /* Hero card credits — slightly smaller on mobile */
  .credit-card{ font-size: 12px; padding: 14px; }
  .credit-card .num{ font-size: 14px; }
  .hero-title{ line-height: 1.04; }
}

/* ================ PHONE (390 / 414 / 360) ================ */
@media (max-width: 480px){
  .service-card{ flex: 0 0 82vw; }
  .tarifa-bottom h4{ font-size: 17px; }

  /* Header phone: logo 48, CTA 40 con texto visible (Figma 390) */
  .header{ height: 72px; gap: 12px; padding-inline: 24px; }
  .brand-logo img{ height: 48px; }
  .nav-actions .btn-cta{ padding: 4px 4px 4px 16px; font-size: 14px; font-weight: 500; height: 40px; gap: 4px; }

  /* CTA banner ghost button visual distinction at small width */
  .cta-text h2{ font-size: 26px; }
}

/* ================ TINY (< 360) ================ */
@media (max-width: 360px){
  .nav-actions .btn-cta span:not(.arrow){ display: none !important; } /* keep only arrow */
  .nav-actions .btn-cta{ padding: 4px; }
  .stat-value{ font-size: 56px; }
}


/* ============================================================
   PÁGINA · QUIÉNES SOMOS (.qs-*)
   ============================================================ */
/* ============================================================
   HERO — quiénes somos (foto luminosa con overlay suave)
   ============================================================ */
.qs-hero{
  background:var(--card-darker);
  color:var(--base-white);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
/* Frame: navy-800 + foto al 60%, sin velo */
.qs-hero::before{content:none}
.qs-hero .container{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: minmax(0,1fr) clamp(320px, 32%, 392px);
  gap:48px;
  align-items:center;
  padding-block:clamp(48px, 6vw, 80px);
}
.qs-hero-left{display:flex;flex-direction:column;gap:24px}
.qs-hero-left h1{
  font-size:var(--fs-h1);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--base-white);
  text-shadow:0 2px 24px rgba(10,22,40,.35);
}
.qs-hero-sub{
  font-size:var(--fs-body-lg);
  line-height:1.45;
  color:var(--border); /* slate-100 del frame */
  font-weight:500;
  max-width:560px;
  text-shadow:0 1px 12px rgba(10,22,40,.45);
}
.qs-hero-photo{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.qs-hero-photo picture,
.qs-hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:1; /* asset ya viene tinteado navy (export Figma) */
  display:block;
}

/* Logo card (right) */
.qs-logo-card{
  background:linear-gradient(222deg, rgba(43,56,112,.8) 0%, rgba(21,34,68,.8) 100%);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:10px solid rgba(255,255,255,.95);
  border-radius:24px;
  padding:40px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:24px;
  position:relative;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.30);
  animation:floatY 4s ease-in-out infinite;
}
.qs-logo-card::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(70% 60% at 100% 0%, rgba(119,212,103,.10), transparent 60%);
  pointer-events:none;
}
.qs-logo-card .label{
  font-size:12px;
  color:var(--muted-2);
  letter-spacing:.16em;
  font-weight:500;
  position:relative;z-index:1;
}
.qs-logo-card .logo{
  width:160px;
  display:block;
  position:relative;z-index:1;
  filter:brightness(0) invert(1);
}
.qs-logo-card .divider{
  width:100%;
  height:1px;
  background:rgba(255,255,255,.12);
  position:relative;z-index:1;
}
.qs-logo-card .since-label{
  font-size:11px;
  color:var(--muted-2);
  letter-spacing:.2em;
  text-transform:uppercase;
  position:relative;z-index:1;
}
.qs-logo-card .since-value{
  font-size:72px;
  font-weight:800;
  letter-spacing:-0.04em;
  line-height:1;
  color:var(--base-white);
  font-variant-numeric:tabular-nums;
  position:relative;z-index:1;
}

@keyframes floatY{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* ============================================================
   STATS · 4 columnas
   ============================================================ */
.qs-stats{
  background:var(--base-white);
  padding-block: var(--section-py);
}
.qs-stats-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(16px, 3vw, 40px);
  align-items:start;
  position:relative;
}
.qs-stat{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-block:8px;
  position:relative;
}
.qs-stat + .qs-stat::before{
  content:"";
  position:absolute;
  left:calc(-1 * clamp(8px, 1.5vw, 20px));
  top:0;bottom:0;width:1px;background:var(--border);
}
.qs-stat-value{
  font-size:var(--fs-stat);
  font-weight:800;
  line-height:.9;
  letter-spacing:-0.04em;
  color:var(--navy);
  display:inline-flex;align-items:baseline;
}
.qs-stat-value .plus{color:var(--green)}
.qs-stat-label{font-size:16px;color:var(--navy);font-weight:500;line-height:1.3}

/* ============================================================
   MVV — Misión / Visión / Valores
   ============================================================ */
.qs-mvv{
  background:var(--bg-alt);
  padding-block:var(--section-py);
}
.qs-mvv .container{display:flex;flex-direction:column;gap:32px}
.qs-mvv-head h2{
  font-size:var(--fs-h2);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-0.02em;
  color:var(--navy);
}
.qs-mvv-head{display:flex;flex-direction:column;gap:16px}
.qs-mvv-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
}
.qs-mvv-card{
  background:var(--base-white);
  border-radius:var(--radius-card);
  padding:32px;
  display:flex;flex-direction:column;gap:20px;
  box-shadow:var(--shadow-card);
  transition:transform var(--transition), box-shadow var(--transition);
}
.qs-mvv-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 60px rgba(32,43,89,.12);
}
.qs-mvv-card .icon{
  width:56px;height:56px;
  border-radius:14px;
  background:var(--card-darker);
  border:1px solid rgba(255,255,255,.04);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  box-shadow:0 6px 16px rgba(21,34,68,.25);
}
.qs-mvv-card .icon img{
  width:32px;height:32px;
  object-fit:contain;
  display:block;
}
.qs-mvv-card .label{color:var(--green-mid)}
.qs-mvv-card .label{
  font-size:14px;
  color:var(--muted);
  font-weight:500;
  letter-spacing:.02em;
}
.qs-mvv-card .title{
  font-size:24px;
  font-weight:600;
  line-height:1.25;
  color:var(--navy);
  letter-spacing:-0.01em;
}
.qs-mvv-card .desc{
  font-size:15px;
  color:var(--slate);
  line-height:1.55;
}

/* ============================================================
   SWIFT Banner — 2 cols
   ============================================================ */
.qs-swift{
  background:var(--navy-darker);
  color:var(--base-white);
  padding-block:var(--section-py);
}
.qs-swift .container{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:48px;
  align-items:center;
}
.qs-swift-visual{
  position:relative;
  background:linear-gradient(160deg, var(--navy-deep), var(--navy-darker));
  border-radius:var(--radius-card);
  border:1px solid rgba(255,255,255,.08);
  padding:32px;
  aspect-ratio:1/1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  text-align:center;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.qs-swift-visual::before{
  content:"";
  position:absolute;inset:0;
  background:url('../img/img-quienes-somos-1.webp') center/contain no-repeat;
  opacity:.88;
  pointer-events:none;
}
.qs-swift-visual::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 20% 10%, rgba(95,135,255,.16), transparent 60%);
  pointer-events:none;
}
.qs-swift-visual-content{
  position:relative;z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
  width:100%;
}
.qs-swift-visual .visual-label{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:12px;color:var(--muted-2);letter-spacing:.16em;font-weight:500;
}
.qs-swift-visual .visual-label::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;
}
.qs-swift-visual .visual-number{
  font-size:40px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--base-white);
  line-height:1;
  font-variant-numeric:tabular-nums;
  text-align:center;
}

.qs-swift-copy{display:flex;flex-direction:column;gap:20px}
.qs-swift-copy h2{
  font-size:clamp(32px, 4.5vw, 56px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--base-white);
}
.qs-swift-copy p{
  font-size:18px;
  color:var(--border);
  line-height:1.55;
  font-weight:400;
}

/* ============================================================
   POR QUÉ AFEX — 4 cards numbered
   ============================================================ */
.qs-why{
  background:var(--bg-alt);
  padding-block:var(--section-py);
}
.qs-why .container{display:flex;flex-direction:column;gap:32px}
.qs-why-head{display:flex;flex-direction:column;gap:16px}
.qs-why-head h2{
  font-size:var(--fs-h2);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-0.02em;
  color:var(--navy);
}
.qs-why-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:24px;
}
.qs-why-card{
  background:linear-gradient(180deg, var(--card-dark), var(--card-darkest));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-card);
  padding:32px 24px;
  display:flex;flex-direction:column;gap:16px;
  color:var(--base-white);
  transition:transform var(--transition), box-shadow var(--transition);
}
.qs-why-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 60px rgba(10,22,40,.35);
}
.qs-why-card .num{
  font-size:34px;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--green);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.qs-why-card .title{
  font-size:24px;
  font-weight:600;
  line-height:1.25;
  color:var(--base-white);
  letter-spacing:-0.01em;
}
.qs-why-card .qs-why-divider{
  width:48px;
  height:1px;
  background:rgba(255,255,255,.25);
  display:block;
  margin-block:4px;
}
.qs-why-card .desc{
  font-size:14px;
  color:var(--text-card-muted);
  line-height:1.5;
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.qs-cta{
  background:var(--bg-alt);
  padding-block: clamp(40px, 5vw, 56px);
}
.qs-cta-banner{
  background:
    url('../img/fondo-cta-banner.webp') center/cover no-repeat,
    var(--navy-darker);
  border-radius:32px;
  padding: clamp(32px, 5vw, 48px) clamp(28px, 4.5vw, 56px);
  color:var(--base-white);
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:32px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.qs-cta-banner::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(45% 70% at 80% 0%, rgba(119,212,103,.18), transparent 60%),
    radial-gradient(45% 70% at 0% 100%, rgba(95,135,255,.14), transparent 60%);
  pointer-events:none;
}
.qs-cta-text{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1}
.qs-cta-text h2{
  font-size:var(--fs-h4);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-0.02em;
}
.qs-cta-text p{font-size:15px;color:var(--border);line-height:1.5}
.qs-cta-actions{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--base-white);color:var(--base-white);
  padding:14px 22px;border-radius:var(--radius-pill);height:56px;font-weight:700;font-size:14px;
  transition:background .2s ease;
}
.btn-ghost:hover{background:rgba(255,255,255,.1)}

/* ============================================================
   FOOTER · (copiado íntegro de index.html)
   ============================================================ */
.footer{
  background:var(--navy-deep);
  color:var(--base-white);
}
.footer-main{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:64px;
  width:100%;
  max-width:calc(var(--container-max) + var(--pad-x) * 2);
  margin-inline:auto;
  padding: 80px var(--pad-x) 64px;
}
.footer-brand{display:flex;flex-direction:column;gap:24px}
.footer-brand .brand-logo{height:72px}
.footer-brand p{font-size:14px;color:var(--border);line-height:1.45;max-width:253px}
.app-download{display:flex;flex-direction:column;gap:16px}
.app-download .label{font-size:14px;color:var(--muted-2)}
.app-buttons{display:flex;gap:16px;flex-wrap:wrap}
.app-buttons .store-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;border-radius:12px;
  background:transparent;
  transition:transform .2s ease;
  height:48px;
}
.app-buttons .store-btn:hover{transform:translateY(-2px)}
.app-buttons .store-btn img{height:48px;width:auto;display:block;border-radius:12px}

.footer-cols{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 56px);
}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col h4{font-size:14px;font-weight:500;color:var(--base-white);letter-spacing:.04em;margin-bottom:0}
.footer-col a{font-size:14px;color:var(--border);transition:color .2s ease}
.footer-col a:hover{color:var(--base-white)}

.social{display:flex;gap:10px}
.social a{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--border);transition:background .2s ease, color .2s ease, transform .2s ease;
  overflow:hidden;
}
.social a:hover{background:var(--base-white);transform:translateY(-2px)}
.social a img{width:18px;height:18px;object-fit:contain;display:block;filter:brightness(0) invert(1);transition:filter .2s ease}
.social a:hover img{filter:none}

.footer-bottom{
  background:var(--navy);
  padding: 24px var(--pad-x);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;
  font-size:14px;color:var(--muted-2);
}
.footer-bottom span{display:inline-flex;align-items:center;gap:16px}
.footer-bottom .sep{width:1px;height:12px;background:var(--muted-2);display:inline-block}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .product-tabs{display:none}
  .nav-links{display:none}
  .nav-actions{gap:8px}
  .nav-actions .btn-primary{display:none}
  .hamburger{display:flex}
  .header{height:72px;padding-inline:24px}
  .top-bar .container{padding-inline:24px}
  .cta-label-d{display:none}
  .cta-label-m{display:inline}
  /* Botones derecha: CTA compacto 40px como Figma mobile */
  .nav-actions .btn-cta{height:40px;padding:4px 4px 4px 16px;font-size:14px;font-weight:500;gap:4px}
  .hamburger{width:40px;height:40px}
  .hamburger span{left:9px;right:9px}
  .hamburger span:nth-child(1){top:13px}
  .hamburger span:nth-child(2){top:19px}
  .hamburger span:nth-child(3){top:25px}
  .hamburger.is-open span:nth-child(1){top:19px}
  .hamburger.is-open span:nth-child(3){top:19px}

  /* Hero collapses */
  .qs-hero .container{grid-template-columns:1fr;gap:32px}
  .qs-logo-card{max-width:420px;width:100%;margin-inline:auto}

  /* MVV 1 col below 1024 actually stays 3-col, mobile breakpoint takes over */
  .qs-mvv-grid{grid-template-columns:repeat(3, minmax(0,1fr));gap:16px}

  /* SWIFT stacks */
  .qs-swift .container{grid-template-columns:1fr;gap:32px}
  .qs-swift-visual{max-width:520px;margin-inline:auto;width:100%}

  /* Why grid 2 col */
  .qs-why-grid{grid-template-columns:repeat(2, minmax(0,1fr))}

  /* CTA stacks */
  .qs-cta-banner{grid-template-columns:1fr;gap:24px}

  /* Footer */
  .footer-main{grid-template-columns:1fr;gap:48px}
  .footer-cols{grid-template-columns:repeat(2, minmax(0,1fr))}
}

@media (max-width: 768px){
  :root{ --section-py: 48px; }

  /* Hero (frame mobile: pad 34/24 · gap 24 · pila 8 · alto 580) */
  .qs-hero{background:var(--card-darker)}
  .qs-hero .container{padding-block:34px;gap:24px}
  .qs-hero-left{gap:8px}
  .qs-hero-left h1{font-size:40px;line-height:1}
  .qs-hero-sub{font-size:14px;line-height:18px}
  /* Marco Figma es interior: padding = 40−11 / 48−11 para alto visual 227 */
  .qs-logo-card{padding:29px 37px;gap:8px;border-width:11px;border-radius:32px}
  .qs-logo-card .label{font-size:11px;line-height:1.4}
  .qs-logo-card .divider{display:none}
  .qs-logo-card .since-label{font-size:12px;line-height:1.35;margin-top:8px}
  .qs-logo-card .since-value{font-size:40px;margin-top:-6px}
  .qs-logo-card .logo{width:auto;height:48px}

  /* Stats — 2-col */
  .qs-stats-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:32px 24px;row-gap:32px}
  .qs-stat + .qs-stat::before{display:none}
  .qs-stat:nth-child(odd) + .qs-stat::before{
    content:"";position:absolute;left:calc(-1 * 12px);top:0;bottom:0;width:1px;background:var(--border);display:block;
  }
  .qs-stat-value{font-size:56px}

  /* MVV stack 1 col */
  .qs-mvv-grid{grid-template-columns:1fr;gap:16px}
  .qs-mvv-card{padding:24px;gap:16px}
  .qs-mvv-card .title{font-size:20px}

  /* SWIFT */
  .qs-swift-copy h2{font-size:32px;line-height:1.15}
  .qs-swift-copy p{font-size:15px}
  .qs-swift-visual{padding:24px}
  .qs-swift-visual .visual-number{font-size:32px}

  /* Why — stack 1 col */
  .qs-why-grid{grid-template-columns:1fr;gap:16px}
  .qs-why-card{padding:24px;gap:14px}
  .qs-why-card .title{font-size:20px}

  /* CTA */
  .qs-cta{padding-block:32px}
  .qs-cta-banner{padding:32px 24px;border-radius:24px}
  .qs-cta-text{gap:16px}
  .qs-cta-text h2{font-size:28px;line-height:1.15}
  .qs-cta-text p{font-size:14px}
  .qs-cta-actions{width:100%}
  .qs-cta-actions .btn-cta.is-large{height:56px;width:100%;justify-content:space-between}
  .btn-ghost{width:100%;height:52px;font-size:14px}

  /* Footer 1-col */
  .footer-main{
    grid-template-columns:1fr;gap:32px;
    padding:48px var(--pad-x) 32px;
  }
  .footer-cols{
    grid-template-columns:1fr;gap:24px;padding-top:8px;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .footer-col{gap:8px}
  .footer-col h4{font-size:13px;letter-spacing:.06em;opacity:.72}
  .footer-col + .footer-col{
    padding-top:24px;border-top:1px solid rgba(255,255,255,.08);
  }
  .footer-bottom{flex-direction:column;text-align:center;padding:20px var(--pad-x);font-size:12px}
  .footer-bottom .sep{display:none}
  .footer-bottom span{flex-direction:column;gap:4px}
}

@media (max-width: 480px){
  /* Header compacto */
  .header{height:64px;gap:12px;padding-inline:16px}
  .brand-logo img{height:32px}
  .nav-actions .btn-cta{padding:6px 6px 6px 14px;font-size:12px;height:40px;gap:6px}
  .nav-actions .btn-cta .arrow{width:28px;height:28px}
  .nav-actions .btn-cta .arrow svg{width:12px;height:12px}

  /* Stats — full stack */
  .qs-stats-grid{grid-template-columns:1fr;gap:24px}
  .qs-stat::before, .qs-stat + .qs-stat::before, .qs-stat:nth-child(odd) + .qs-stat::before{display:none !important}
  .qs-stat + .qs-stat{border-top:1px solid var(--border);padding-top:24px}
  .qs-stat-value{font-size:64px}

  .qs-cta-text h2{font-size:26px}
}

@media (max-width: 360px){
  .nav-actions .btn-cta span:first-child{display:none}
  .nav-actions .btn-cta{padding:6px}
  .qs-stat-value{font-size:56px}
  .qs-logo-card .since-value{font-size:48px}
}


/* ============================================================
   PÁGINA · BLOG / NOTICIAS (.bl-*)
   ============================================================ */
/* ============================================================
   HERO BLOG (dark navy with photo)
   ============================================================ */
.bl-hero{
  position:relative;
  background:var(--card-darker); /* navy-800 del frame */
  color:var(--base-white);
  isolation:isolate;
  overflow:hidden;
}
.bl-hero-photo{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.bl-hero-photo img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  opacity:.4; /* IMAGE @0.40 del frame */
}
/* Frame: sin velo sobre la foto */
.bl-hero::before{content:none}
.bl-hero h1,
.bl-hero-sub{
  text-shadow:0 2px 16px rgba(10,22,40,.45);
}
.bl-hero .container{
  position:relative;
  z-index:2;
  padding-block:clamp(64px, 8vw, 96px);
  display:flex;
  flex-direction:column;
  gap:32px;
}
.bl-hero-inner{
  max-width:780px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.bl-hero h1{
  font-size:var(--fs-h1);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--base-white);
}
.bl-hero-sub{
  font-size:16px;
  line-height:1.5;
  color:var(--base-white); /* base-white del frame */
  max-width:680px;
}

/* Search bar */
.bl-search{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--base-white);
  border-radius:var(--radius-pill);
  padding:8px 8px 8px 24px;
  box-shadow:0 12px 36px rgba(0,0,0,.25);
  max-width:760px;
  width:100%;
}
.bl-search-input{
  flex:1;min-width:0;
  border:0;
  outline:none;
  background:transparent;
  font-size:16px;
  color:var(--navy);
  height:40px;
}
.bl-search-input::placeholder{color:var(--muted)}
.bl-search-btn{
  background:var(--pr-grad-green);
  border:1px solid var(--ly-mail-dot);
  color:var(--base-white);
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:14px;
  height:48px;
  padding:0 28px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:filter .2s ease, transform var(--transition);
}
.bl-search-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* Category pills */
.bl-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.bl-pill{
  display:inline-flex;
  align-items:center;
  padding:7px 16px;
  border-radius:var(--radius-pill);
  border:1px solid var(--base-white);
  background:rgba(255,255,255,.7);
  color:var(--slate); /* navy-300 del frame */
  font-size:14px;
  font-weight:500;
  letter-spacing:.01em;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
  cursor:pointer;
}
.bl-pill:hover{background:rgba(255,255,255,.85);transform:translateY(-1px)}
.bl-pill.is-active{
  background:rgba(255,255,255,.7);
  color:var(--navy); /* navy-700 del frame */
  border-color:var(--base-white);
}

/* ============================================================
   FEATURED ARTICLE
   ============================================================ */
.bl-featured{
  background:var(--bg-alt);
  padding-block:var(--section-py);
}
.bl-featured .container{display:flex;flex-direction:column;gap:32px}
.bl-section-head{
  display:flex;flex-direction:column;gap:14px;
}
.bl-section-head h2{
  font-size:48px;
  font-weight:800;
  line-height:1.12;
  letter-spacing:-0.02em;
  color:var(--navy);
}
.bl-section-head-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}

.bl-featured-card{
  background:var(--base-white);
  border-radius:var(--radius-card);
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:0;
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform var(--transition), box-shadow var(--transition);
}
.bl-featured-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 48px rgba(32,43,89,.12);
}
.bl-featured-image{
  position:relative;
  min-height:380px;
  background:var(--bg-alt);
  overflow:hidden;
}
.bl-featured-image img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:0;
}
.bl-featured-body{
  padding:40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:20px;
}
.bl-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  font-weight:500;
  letter-spacing:.02em;
}
.bl-meta .tag{
  padding:4px 12px;
  border-radius:var(--radius-pill);
  background:var(--bg-alt);
  color:var(--navy);
  font-size:12px;
  font-weight:500;
}
.bl-meta .sep{
  width:4px;height:4px;border-radius:50%;background:var(--muted-2);
  display:inline-block;
}
.bl-featured-body h3{
  font-size:32px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--navy);
}
.bl-featured-body p{
  font-size:16px;
  line-height:1.5;
  color:var(--slate);
}
.bl-featured-cta{
  align-self:flex-start;
  background:var(--navy);
  color:var(--base-white);
  border-radius:var(--radius-pill);
  padding:12px 24px;
  height:48px;
  font-weight:700;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background .2s ease, transform var(--transition);
}
.bl-featured-cta:hover{background:#0d143a}

/* ============================================================
   GRID ARTÍCULOS
   ============================================================ */
.bl-grid-section{
  background:var(--base-white);
  padding-block:var(--section-py);
}
.bl-grid-section .container{display:flex;flex-direction:column;gap:32px}

.bl-sort{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--base-white);
  font-size:14px;
  color:var(--navy);
  font-weight:500;
  cursor:pointer;
  transition:border-color .2s ease;
}
.bl-sort:hover{border-color:var(--muted-2)}
.bl-sort svg{flex-shrink:0}

.bl-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
}
.bl-card{
  background:var(--base-white);
  border-radius:var(--radius-card);
  border:1px solid var(--border);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform var(--transition), box-shadow var(--transition);
  cursor:pointer;
}
.bl-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px rgba(32,43,89,.10);
}
.bl-card-image{
  position:relative;
  aspect-ratio:1.6/1;
  background:var(--bg-alt);
  overflow:hidden;
}
.bl-card-image img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:0;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.bl-card:hover .bl-card-image img{transform:scale(1.04)}
.bl-card-body{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.bl-card-body .bl-meta{margin-bottom:4px}
.bl-card-title{
  font-size:22px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--navy);
  flex:1;
}
.bl-card-read{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:500;
  color:var(--green-mid);
  transition:color .2s ease, gap .2s ease;
  align-self:flex-start;
}
.bl-card:hover .bl-card-read{color:var(--green-cta);gap:10px}

/* ============================================================
   FOOTER · SAME AS index.html
   ============================================================ */
.footer{
  background:var(--navy-deep);
  color:var(--base-white);
}
.footer-main{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:64px;
  width:100%;
  max-width:calc(var(--container-max) + var(--pad-x) * 2);
  margin-inline:auto;
  padding: 80px var(--pad-x) 64px;
}
.footer-brand{display:flex;flex-direction:column;gap:24px}
.footer-brand .brand-logo{height:72px}
.footer-brand p{font-size:14px;color:var(--border);line-height:1.45;max-width:253px}
.app-download{display:flex;flex-direction:column;gap:16px}
.app-download .label{font-size:14px;color:var(--muted-2)}
.app-buttons{display:flex;gap:16px;flex-wrap:wrap}
.app-buttons .store-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;border-radius:12px;
  background:transparent;
  transition:transform .2s ease;
  height:48px;
}
.app-buttons .store-btn:hover{transform:translateY(-2px)}
.app-buttons .store-btn img{height:48px;width:auto;display:block;border-radius:12px}

.footer-cols{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 56px);
}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col h4{font-size:14px;font-weight:500;color:var(--base-white);letter-spacing:.04em;margin-bottom:0}
.footer-col a{font-size:14px;color:var(--border);transition:color .2s ease}
.footer-col a:hover{color:var(--base-white)}

.social{display:flex;gap:10px}
.social a{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--border);transition:background .2s ease, color .2s ease, transform .2s ease;
  overflow:hidden;
}
.social a:hover{background:var(--base-white);transform:translateY(-2px)}
.social a img{width:18px;height:18px;object-fit:contain;display:block;filter:brightness(0) invert(1);transition:filter .2s ease}
.social a:hover img{filter:none}

.footer-bottom{
  background:var(--navy);
  padding: 24px var(--pad-x);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center;
  font-size:14px;color:var(--muted-2);
}
.footer-bottom span{display:inline-flex;align-items:center;gap:16px}
.footer-bottom .sep{width:1px;height:12px;background:var(--muted-2);display:inline-block}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .product-tabs{display:none}
  .nav-links{display:none}
  .nav-actions{gap:8px}
  .nav-actions .btn-primary{display:none}
  .hamburger{display:flex}
  .header{height:72px;padding-inline:24px}
  .top-bar .container{padding-inline:24px}
  .cta-label-d{display:none}
  .cta-label-m{display:inline}
  /* Botones derecha: CTA compacto 40px como Figma mobile */
  .nav-actions .btn-cta{height:40px;padding:4px 4px 4px 16px;font-size:14px;font-weight:500;gap:4px}
  .hamburger{width:40px;height:40px}
  .hamburger span{left:9px;right:9px}
  .hamburger span:nth-child(1){top:13px}
  .hamburger span:nth-child(2){top:19px}
  .hamburger span:nth-child(3){top:25px}
  .hamburger.is-open span:nth-child(1){top:19px}
  .hamburger.is-open span:nth-child(3){top:19px}

  /* Featured card collapse to 1-col */
  .bl-featured-card{grid-template-columns:1fr}
  .bl-featured-image{min-height:280px;aspect-ratio:1.6/1}

  /* Grid: 2 cols */
  .bl-grid{grid-template-columns:repeat(2, minmax(0,1fr))}

  .footer-main{grid-template-columns:1fr;gap:48px}
  .footer-cols{grid-template-columns:repeat(2, minmax(0,1fr))}
}

@media (max-width: 768px){
  :root{ --section-py: 48px; }

  /* Hero (frame mobile: pad 56 · gap 16 · sin overlay · alto ≤580) */
  .bl-hero{background:var(--card-darker)}
  .bl-hero .container{padding-block:56px;gap:16px}
  .bl-hero-inner{gap:16px}
  .bl-hero h1{font-size:40px;line-height:1.1}
  .bl-hero-sub{font-size:16px;line-height:1.5}

  /* Search */
  .bl-search{padding:6px 6px 6px 18px}
  .bl-search-input{height:36px;font-size:15px}
  .bl-search-btn{height:40px;padding:0 20px;font-size:13px}

  .bl-section-head h2{font-size:32px;line-height:1.15}
  .bl-section-head-row{flex-direction:column;align-items:flex-start;gap:16px}

  /* Featured */
  .bl-featured-image{min-height:220px}
  .bl-featured-body{padding:24px;gap:14px}
  .bl-featured-body h3{font-size:22px;line-height:1.25}
  .bl-featured-body p{font-size:14px}

  /* Grid 1 col */
  .bl-grid{grid-template-columns:1fr;gap:16px}
  .bl-card-body{padding:20px;gap:10px}
  .bl-card-title{font-size:18px}

  /* Footer 1-col */
  .footer-main{
    grid-template-columns:1fr;gap:32px;
    padding:48px var(--pad-x) 32px;
  }
  .footer-cols{
    grid-template-columns:1fr;gap:24px;padding-top:8px;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .footer-col{gap:8px}
  .footer-col h4{font-size:13px;letter-spacing:.06em;opacity:.72}
  .footer-col + .footer-col{
    padding-top:24px;border-top:1px solid rgba(255,255,255,.08);
  }
  .footer-bottom{flex-direction:column;text-align:center;padding:20px var(--pad-x);font-size:12px}
  .footer-bottom .sep{display:none}
  .footer-bottom span{flex-direction:column;gap:4px}
}

@media (max-width: 480px){
  .header{height:64px;gap:12px;padding-inline:16px}
  .brand-logo img{height:32px}
  .nav-actions .btn-cta{padding:6px 6px 6px 14px;font-size:12px;height:40px;gap:6px}
  .nav-actions .btn-cta .arrow{width:28px;height:28px}
  .nav-actions .btn-cta .arrow svg{width:12px;height:12px}

  /* Search apilado (frame mobile: input 56 · botón 160×56 a la derecha) */
  .bl-search{flex-direction:column;align-items:stretch;background:transparent;padding:0;box-shadow:none;gap:12px}
  .bl-search-input{
    flex:none;
    background:var(--base-white);
    border-radius:var(--radius-pill);
    padding:0 24px;
    height:56px;
    width:100%;
  }
  .bl-search-btn{
    width:160px;height:56px;align-self:flex-end;
    font-size:16px;font-weight:500;
    background:var(--pr-grad-green);
    border:1px solid var(--ly-mail-dot);
  }

  /* Pills claras en 2 filas (frame mobile: blancas .70 · 11px · h31) */
  .bl-pills{flex-wrap:wrap;gap:8px}
  .bl-pill{
    flex:0 0 auto;
    height:31px;padding:8px 16px;
    font-size:11px;
    background:rgba(255,255,255,.7);
    border-color:var(--base-white);
    color:var(--slate);
  }
  .bl-pill.is-active{background:rgba(255,255,255,.7);border-color:var(--base-white);color:var(--navy)}
}

@media (max-width: 360px){
  .nav-actions .btn-cta span:first-child{display:none}
  .nav-actions .btn-cta{padding:6px}
  .bl-hero h1{font-size:34px}
}


/* ============================================================
   PADDING LATERAL RESPONSIVO (desktop = 96px; escala en móvil)
   ============================================================ */
@media (max-width:1024px){ :root{ --pad-x: 48px; } }
@media (max-width:768px){ :root{ --pad-x: 24px; } }
@media (max-width:480px){ :root{ --pad-x: 16px; } }

/* ============================================================
   HEADER · PRODUCT TABS — LIQUID GLASS (solo desktop ≥1024px)
   Lente de vidrio (.pt-lens, inyectada por main.js) que se
   desliza y estira entre pestañas como una gota líquida.
   En tablet/móvil .product-tabs está oculto (nav va en panel).
   ============================================================ */
@media (min-width: 1024px){
  .product-tabs{
    position:relative;
    isolation:isolate;
    width:337px;
    height:48px;
    gap:10px;
    /* 1px borde + 11px pad + 56+72+79+76 botones + 3×10 gap = 337px exactos (Figma 16-v2) */
    padding:5px 11px;
    justify-content:center;
    border-color:var(--slate-200);
    background:linear-gradient(135deg, rgba(255,255,255,.45), rgba(255,255,255,.14) 55%, rgba(255,255,255,.30));
    backdrop-filter:blur(22px) saturate(180%);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.70),
      inset 0 -1px 1px rgba(32,43,89,.04),
      0 3px 6px rgba(0,0,0,.08); /* Figma: 0/3/6/0 var(--base-black) 8% */
  }
  /* borde degradado liquid glass (brilla arriba-izq y abajo-der) */
  .product-tabs::before{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
    background:linear-gradient(170deg,
      rgba(255,255,255,.95) 0%,
      rgba(206,214,226,.45) 32%,
      rgba(206,214,226,.30) 62%,
      rgba(255,255,255,.85) 100%);
    -webkit-mask:linear-gradient(var(--base-white) 0 0) content-box, linear-gradient(var(--base-white) 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(var(--base-white) 0 0) content-box, linear-gradient(var(--base-white) 0 0);
    mask-composite:exclude;
    pointer-events:none;
    z-index:2;
  }
  /* lente líquida — la mueve main.js (width + translateX) */
  .pt-lens{
    position:absolute; top:5px; bottom:5px; left:0; width:0;
    border-radius:var(--radius-pill);
    overflow:hidden;
    pointer-events:none;
    z-index:0;
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.70));
    -webkit-backdrop-filter:blur(8px) saturate(170%);
    backdrop-filter:blur(8px) saturate(170%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 -1px 1px rgba(32,43,89,.06),
      0 2px 6px rgba(16,24,40,.08),
      0 10px 22px rgba(16,24,40,.10);
    transition:
      transform .55s cubic-bezier(.30,1.25,.35,1),
      width .60s cubic-bezier(.34,1.30,.40,1);
  }
  .pt-lens.is-snap{ transition:none; }
  /* borde degradado de la lente */
  .pt-lens::before{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
    background:linear-gradient(170deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.35) 38%,
      rgba(255,255,255,.25) 62%,
      rgba(255,255,255,.9) 100%);
    -webkit-mask:linear-gradient(var(--base-white) 0 0) content-box, linear-gradient(var(--base-white) 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(var(--base-white) 0 0) content-box, linear-gradient(var(--base-white) 0 0);
    mask-composite:exclude;
  }
  /* reflejo líquido que recorre la lente */
  .pt-lens::after{
    content:""; position:absolute; inset:0; border-radius:inherit;
    background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%);
    background-size:240% 100%;
    background-position:180% 0;
    animation:tabLiquid 5s ease-in-out infinite;
  }
  .product-tabs button{
    position:relative;
    z-index:1;
    background:transparent;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    flex:none;
    transition:color .35s cubic-bezier(.32,.72,0,1), font-size .35s cubic-bezier(.32,.72,0,1);
  }
  /* Anchos fijos por pestaña (Figma 16-v2): Corp 56 · Afex TC 72 · Afex AV 79 · Afex GO 76 */
  .product-tabs button:nth-of-type(1){ width:56px; }
  .product-tabs button:nth-of-type(2){ width:72px; }
  .product-tabs button:nth-of-type(3){ width:79px; }
  .product-tabs button:nth-of-type(4){ width:76px; }
  .product-tabs button:hover{ color:var(--navy); }
  .product-tabs button.is-active{
    background:transparent;
    color:var(--navy);
    box-shadow:none;
  }
  /* fallback sin JS: pastilla blanca estática en la pestaña activa */
  .product-tabs:not(.has-lens) button.is-active{
    background:var(--base-white);
    box-shadow:
      0 1px 2px rgba(32,43,89,.06),
      0 4px 12px rgba(32,43,89,.12),
      inset 0 1px 0 rgba(255,255,255,.9);
  }
}
@keyframes tabLiquid{
  0%{ background-position:180% 0; }
  50%{ background-position:-80% 0; }
  100%{ background-position:180% 0; }
}
@media (prefers-reduced-motion: reduce){
  .pt-lens{ transition:none !important; }
  .pt-lens::after{ animation:none !important; }
}

/* ============================================================
   BLOG LANDING · CARDS COMO ENLACE (stretched link)
   Toda la superficie de la card navega al artículo.
   ============================================================ */
.bl-featured-card{ position:relative; cursor:pointer; }
.bl-card{ position:relative; }
.bl-featured-cta::after,
.bl-card-read::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}

/* ============================================================
   PÁGINA · BLOG FICHA (.bf-*)
   ============================================================ */
/* Reading progress bar */
.bf-progress{
  position:fixed; top:0; left:0; right:0;
  height:3px; z-index:1000;
  background:transparent;
  pointer-events:none;
}
.bf-progress-bar{
  display:block; height:100%; width:100%;
  background:var(--green-cta);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .1s linear;
}

/* Top wrapper */
.bf-top{ background:var(--bg-alt); padding-top:48px; padding-bottom:var(--section-py); }
.bf-top > .container + .container{ margin-top:40px; }

/* Breadcrumb */
.bf-breadcrumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:var(--fs-sm); color:var(--muted); font-weight:500; margin-bottom:24px;
}
.bf-breadcrumb a{ color:var(--muted); transition:color .2s ease; }
.bf-breadcrumb a:hover{ color:var(--navy); }
.bf-bc-sep{ color:var(--muted-2); }
.bf-bc-current{ color:var(--navy); }

/* Article header */
.bf-head{ display:flex; flex-direction:column; }
.bf-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.bf-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--base-white);
  font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--muted);
}
.bf-tag--primary{ background:var(--navy); border-color:var(--navy); color:var(--base-white); }
.bf-tag--primary .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; }
.bf-title{
  font-size:clamp(40px, 5.5vw, 56px); font-weight:800; line-height:1.1;
  letter-spacing:-0.02em; color:var(--navy); max-width:980px;
}
.bf-sub{
  font-size:var(--fs-body-lg); line-height:1.5; color:var(--slate);
  max-width:760px; margin-top:24px;
}
.bf-byline{
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  margin-top:32px; padding-top:24px; border-top:1px solid var(--border);
  font-size:var(--fs-sm); color:var(--muted); font-weight:500;
}

/* Hero figure */
.bf-figure{
  position:relative; border-radius:var(--radius-card); overflow:hidden;
  aspect-ratio:1248/520; background:var(--bg-alt);
  box-shadow:var(--shadow-card);
}
.bf-figure img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.bf-figure:hover img{ transform:scale(1.02); }
.bf-fig-badge{
  position:absolute; display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:var(--radius-pill);
  background:rgba(10,22,40,.72);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--base-white); font-size:12px; font-weight:600; letter-spacing:.06em;
}
.bf-fig-badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; }
.bf-fig-badge--tl{ top:24px; left:24px; }
.bf-fig-badge--bl{ bottom:24px; left:24px; background:rgba(46,182,44,.92); }

/* Body: 2 columnas */
.bf-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  column-gap:96px;
  align-items:start;
}

/* Article column */
.bf-article{ min-width:0; }
.bf-article > * + *{ margin-top:24px; }
.bf-lead{ font-size:var(--fs-body-lg); line-height:1.6; color:var(--navy); font-weight:500; }
.bf-article h2{
  font-size:clamp(24px, 3vw, 32px); font-weight:700; line-height:1.3;
  letter-spacing:-0.01em; color:var(--navy); margin-top:48px;
}
.bf-article p{ font-size:var(--fs-body); line-height:1.7; color:var(--slate); }

/* Checklist */
.bf-checklist{ display:flex; flex-direction:column; gap:12px; }
.bf-check{
  display:flex; align-items:center; gap:16px;
  background:var(--base-white); border:1px solid var(--border); border-radius:16px;
  padding:16px 20px; font-size:var(--fs-body); color:var(--navy); font-weight:500;
  transition:transform var(--transition), box-shadow var(--transition);
}
.bf-check:hover{ transform:translateX(4px); box-shadow:var(--shadow-card); }
.bf-check-icon{
  width:28px; height:28px; flex-shrink:0; border-radius:50%;
  background:var(--green-cta); display:inline-flex; align-items:center; justify-content:center;
}

/* Blockquote */
.bf-quote{
  border-left:4px solid var(--green-cta);
  padding:8px 0 8px 32px; margin-top:40px;
  transition:border-color var(--transition);
}
.bf-quote p{
  font-size:clamp(20px, 2.4vw, 24px); font-weight:700; line-height:1.4;
  color:var(--navy); letter-spacing:-0.01em;
}
.bf-quote cite{
  display:block; margin-top:16px; font-size:var(--fs-sm); font-style:normal;
  color:var(--muted); font-weight:500;
}
.bf-quote.is-in{ border-left-color:var(--green); }

/* CTA interno */
.bf-cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:var(--navy-deep); border-radius:var(--radius-card);
  padding:32px 40px; margin-top:48px;
}
.bf-cta-text{ display:flex; flex-direction:column; gap:12px; }
.bf-cta-title{ font-size:24px; font-weight:700; line-height:1.3; color:var(--base-white) !important; }

/* Fuentes */
.bf-sources{
  margin-top:48px; padding:24px 28px;
  background:var(--base-white); border:1px solid var(--border); border-radius:16px;
}
.bf-sources-label{
  display:block; font-size:12px; font-weight:700; letter-spacing:.08em;
  color:var(--muted); margin-bottom:16px;
}
.bf-sources ul{ display:flex; flex-direction:column; gap:10px; list-style:none; }
.bf-sources li{ font-size:var(--fs-sm); color:var(--slate); line-height:1.5; }
.bf-sources a{ color:var(--green-mid); font-weight:600; }
.bf-sources a:hover{ text-decoration:underline; }

/* Hashtags */
.bf-hashtags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:40px; }
.bf-hashtag{
  padding:6px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--base-white);
  font-size:var(--fs-sm); color:var(--muted); font-weight:500;
}

/* Sidebar */
.bf-sidebar{
  position:sticky; top:104px; align-self:start;
  display:flex; flex-direction:column; gap:24px;
}
.bf-card{
  background:var(--base-white); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:28px;
}
.bf-card-label{
  display:block; font-size:12px; font-weight:700; letter-spacing:.08em;
  color:var(--muted); margin-bottom:8px;
}
/* DATOS CLAVE */
.bf-stat{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--border);
}
.bf-stat:last-child{ border-bottom:0; padding-bottom:0; }
.bf-data .bf-card-label{ margin-bottom:8px; }
.bf-stat-value{ font-size:24px; font-weight:700; color:var(--navy); letter-spacing:-0.01em; }
.bf-stat-label{ font-size:12px; color:var(--muted); text-align:right; font-weight:500; }
/* BOLETÍN */
.bf-news{ background:var(--navy-deep); border-color:transparent; }
.bf-news-title{ font-size:24px; font-weight:700; line-height:1.3; color:var(--base-white); margin-top:16px; }
.bf-news-sub{ font-size:var(--fs-sm); line-height:1.5; color:var(--text-card-muted); margin-top:8px; }
.bf-news-form{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.bf-news-input{
  height:48px; border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.16);
  background:var(--base-white); padding:0 20px; font-family:inherit; font-size:var(--fs-sm); color:var(--navy);
}
.bf-news-input::placeholder{ color:var(--muted); }
.bf-news-input:focus{ outline:2px solid var(--green); outline-offset:1px; }
.bf-news-btn{
  height:48px; border-radius:var(--radius-pill); background:var(--green-cta); color:var(--base-white);
  font-family:inherit; font-weight:700; font-size:var(--fs-sm); cursor:pointer;
  transition:background .2s ease, transform var(--transition);
}
.bf-news-btn:hover{ background:#26a525; transform:translateY(-2px); }
.bf-news-btn:disabled{ opacity:.7; cursor:default; transform:none; }
/* LO MÁS LEÍDO */
.bf-popular-list{ list-style:none; display:flex; flex-direction:column; }
.bf-popular-list li{
  display:flex; gap:16px; align-items:flex-start;
  padding:16px 0; border-bottom:1px solid var(--border);
}
.bf-popular-list li:last-child{ border-bottom:0; padding-bottom:0; }
.bf-popular-num{ font-size:var(--fs-sm); font-weight:700; color:var(--green-mid); flex-shrink:0; }
.bf-popular-list a{
  font-size:var(--fs-sm); font-weight:600; line-height:1.4; color:var(--navy);
  transition:color .2s ease;
}
.bf-popular-list a:hover{ color:var(--green-mid); }

/* Más noticias (related) */
.bf-related{ background:var(--base-white); padding-block:var(--section-py); }
.bf-related .container{ display:flex; flex-direction:column; gap:40px; }
.bf-related-head{ display:flex; flex-direction:column; gap:16px; }
.bf-related-head h2{
  font-size:clamp(32px, 5.4vw, 48px); font-weight:800; line-height:1.2;
  letter-spacing:-0.02em; color:var(--navy);
}

.bf-visually-hidden,
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Responsive Blog Ficha ===== */
@media (max-width: 1024px){
  .bf-body{ grid-template-columns:1fr; row-gap:48px; }
  .bf-sidebar{ position:static; }
}
@media (max-width: 768px){
  .bf-top{ padding-top:32px; }
  .bf-byline{ flex-direction:column; gap:6px; }
  .bf-cta{ flex-direction:column; align-items:flex-start; gap:20px; padding:28px 24px; }
  .bf-fig-badge{ font-size:11px; padding:8px 12px; }
  .bf-fig-badge--tl{ top:16px; left:16px; }
  .bf-fig-badge--bl{ bottom:16px; left:16px; }
}
@media (max-width: 480px){
  .bf-card{ padding:24px; }
  .bf-quote{ padding-left:20px; }
}
@media (max-width: 360px){
  .bf-tags{ gap:6px; }
  .bf-tag{ padding:5px 10px; }
}

/* ============================================================
   PÁGINA · CONTACTO (.ct-*)
   ============================================================ */
:root{ --ct-error:#e5484d; --ct-focus:rgba(46,182,44,.16); --ct-error-bg:rgba(229,72,77,.06); }

/* ---------- HERO ---------- */
.ct-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--pe-hero-base); /* navy-950 del frame */
  padding-block:clamp(56px, 7vw, 96px);
}
.ct-hero-bg{ position:absolute; inset:0; z-index:-2; opacity:1; } /* asset ya viene horneado navy */
.ct-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.ct-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:none;
}
.ct-hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 441px; gap:64px; align-items:center;
}
.ct-hero-left{ display:flex; flex-direction:column; gap:24px; }
.ct-hero-title{
  font-size:clamp(40px, 5vw, 72px); font-weight:800; line-height:1.1;
  letter-spacing:-0.02em; color:var(--base-white); max-width:680px;
}
.ct-hero-sub{
  font-size:var(--fs-body-lg); line-height:1.55; color:var(--bg-alt); max-width:560px; /* slate-50 del frame */
}
.ct-hero-cta{ align-self:flex-start; margin-top:8px; }

/* ---------- PANEL CONTACTO (navy sólido + borde blanco) ---------- */
.ct-panel{
  background:
    linear-gradient(rgba(21,34,68,.2), rgba(21,34,68,.2)),
    linear-gradient(204deg, rgba(32,43,89,.8) 0%, rgba(14,25,71,.8) 100%),
    var(--navy-deep);
  border:12px solid rgba(255,255,255,0.92);
  border-radius:24px;
  padding:16px;
  display:flex; flex-direction:column;
  box-shadow:0 24px 60px rgba(10,22,40,.45);
}
.ct-channel{
  display:flex; align-items:center; gap:16px;
  padding:16px; border-radius:14px;
  transition:background var(--transition);
}
.ct-channel:hover{ background:rgba(255,255,255,0.06); }
/* Liquid glass chips */
.ct-channel-icon{
  position:relative;
  width:64px; height:64px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:22px; color:var(--base-white);
  background:linear-gradient(160deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.16) 55%, rgba(255,255,255,.24) 100%);
  box-shadow:
    0 14px 30px rgba(5,12,28,.40),
    0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 2px rgba(255,255,255,.55),
    inset 0 -1px 1px rgba(255,255,255,.15);
  transition:transform var(--transition), box-shadow var(--transition);
}
/* Borde degradado tipo liquid glass (brilla arriba y abajo-derecha) */
.ct-channel-icon::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:linear-gradient(170deg,
    rgba(255,255,255,.80) 0%,
    rgba(255,255,255,.30) 30%,
    rgba(255,255,255,.22) 60%,
    rgba(255,255,255,.60) 100%);
  -webkit-mask:linear-gradient(var(--base-white) 0 0) content-box, linear-gradient(var(--base-white) 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(var(--base-white) 0 0) content-box, linear-gradient(var(--base-white) 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.ct-channel-icon svg{ width:28px; height:28px; display:block; position:relative; }
.ct-channel-icon--wsp{ color:#c9e8b8; }
.ct-channel:hover .ct-channel-icon{
  transform:translateY(-2px) scale(1.03);
  box-shadow:
    0 18px 40px rgba(5,12,28,.5),
    inset 0 1px 1px rgba(255,255,255,.3),
    inset 0 -1px 1px rgba(255,255,255,.1);
}
.ct-channel-body{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.ct-channel-label{ font-size:11px; font-weight:600; letter-spacing:.1em; color:rgba(255,255,255,.55); }
.ct-channel-value{ font-size:16px; font-weight:700; color:var(--base-white); letter-spacing:-0.01em; }
.ct-channel-status, .ct-channel-sub{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--muted-2); line-height:1.4; /* navy-100 del frame */
}
.ct-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0; box-shadow:0 0 0 4px rgba(119,212,103,.18); }
.ct-channel-arrow{
  margin-left:auto; flex-shrink:0; font-size:24px; line-height:1; color:rgba(255,255,255,.45);
  transition:transform var(--transition), color var(--transition);
}
.ct-channel:hover .ct-channel-arrow{ transform:translateX(4px); color:var(--base-white); }
.ct-channel--callback{
  /* sin separador: se ve como los demás canales de arriba */
}

/* ---------- SECCIÓN FORMULARIO ---------- */
.ct-form-section{ background:var(--bg-alt); padding-block:var(--section-py); }
.ct-form-head{ display:flex; flex-direction:column; gap:16px; margin-bottom:48px; }
.ct-form-h2{ font-size:clamp(32px, 5.4vw, 48px); font-weight:800; line-height:1.2; letter-spacing:-0.02em; color:var(--navy); }
.ct-accent{ color:var(--navy); }
.ct-form-intro{ font-size:var(--fs-body); line-height:1.6; color:var(--slate); max-width:720px; }

.ct-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:start; }

/* ---------- CARD FORMULARIO ---------- */
.ct-form-card{
  background:var(--base-white); border:1px solid var(--border); border-radius:var(--radius-card);
  padding:40px; box-shadow:var(--shadow-card);
}
.ct-form-card-head{ margin-bottom:28px; }
.ct-form-card-head h3{ font-size:24px; font-weight:700; color:var(--navy); letter-spacing:-0.01em; }
.ct-form-card-head p{ font-size:var(--fs-sm); color:var(--muted); margin-top:6px; }
.ct-form{ display:flex; flex-direction:column; gap:24px; }
.ct-field{ display:flex; flex-direction:column; gap:8px; }
.ct-field label{ font-size:var(--fs-sm); font-weight:600; color:var(--navy); }
.ct-req{ color:var(--green-cta); }
.ct-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.ct-form input,
.ct-form select,
.ct-form textarea{
  width:100%; font-family:inherit; font-size:var(--fs-body); color:var(--navy);
  background:var(--base-white); border:1px solid var(--border); border-radius:12px;
  padding:0 16px; height:50px;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:border-color var(--transition), box-shadow var(--transition);
}
.ct-form textarea{ height:auto; min-height:72px; padding:14px 16px; line-height:1.5; resize:vertical; }
.ct-form input::placeholder, .ct-form textarea::placeholder{ color:var(--muted); }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus{
  outline:none; border-color:var(--green-cta); box-shadow:0 0 0 3px var(--ct-focus);
}
/* Select custom */
.ct-select-wrap{ position:relative; }
.ct-form select{ appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer; }
.ct-select-arrow{ position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; display:flex; }
/* Error states */
.ct-error{ font-size:12px; color:var(--ct-error); min-height:0; display:none; }
.ct-field.has-error input,
.ct-field.has-error select,
.ct-field.has-error textarea{ border-color:var(--ct-error); background:var(--ct-error-bg); }
.ct-field.has-error .ct-error, .ct-error.is-visible{ display:block; }
/* Checkbox */
.ct-check{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; font-size:var(--fs-sm); color:var(--slate); line-height:1.45; }
.ct-check input{ position:absolute; opacity:0; width:0; height:0; }
.ct-check-box{
  width:22px; height:22px; flex-shrink:0; border-radius:6px; border:1px solid var(--border);
  background:var(--base-white); display:flex; align-items:center; justify-content:center; margin-top:1px;
  transition:background var(--transition), border-color var(--transition);
}
.ct-check-box svg{ opacity:0; transition:opacity .2s ease; }
.ct-check input:checked + .ct-check-box{ background:var(--green-cta); border-color:var(--green-cta); }
.ct-check input:checked + .ct-check-box svg{ opacity:1; }
.ct-check input:focus-visible + .ct-check-box{ box-shadow:0 0 0 3px var(--ct-focus); }
.ct-check.has-error .ct-check-box{ border-color:var(--ct-error); }
/* Submit */
.ct-submit{ width:100%; justify-content:center; margin-top:4px; }
.ct-submit::after{ display:none; }
.ct-submit .ct-spinner{
  width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:var(--base-white);
  display:none; animation:ctSpin .7s linear infinite;
}
.ct-submit.is-loading .ct-submit-label,
.ct-submit.is-loading .arrow{ display:none; }
.ct-submit.is-loading .ct-spinner{ display:block; }
.ct-submit.shake{ animation:ctShake .4s cubic-bezier(.36,.07,.19,.97); }
.ct-disclaimer{ font-size:12px; color:var(--muted); text-align:center; margin-top:12px; }
/* Éxito */
.ct-success{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:32px 16px; }
.ct-success-icon{
  width:64px; height:64px; border-radius:50%; background:var(--green-cta);
  display:flex; align-items:center; justify-content:center; margin-bottom:8px;
}
.ct-success h3{ font-size:24px; font-weight:700; color:var(--navy); }
.ct-success p{ font-size:var(--fs-body); color:var(--slate); }
.ct-success.is-in{ animation:ctSuccessIn .45s cubic-bezier(.22,.61,.36,1); }

/* ---------- CARD OFICINA ---------- */
.ct-aside{ display:flex; flex-direction:column; gap:24px; }
.ct-office{
  background:var(--navy-deep); border-radius:var(--radius-card); padding:32px; color:var(--base-white);
  display:flex; flex-direction:column; flex:1;
}
.ct-office-title{ font-size:24px; font-weight:700; color:var(--base-white); margin-top:16px; letter-spacing:-0.01em; }
.ct-office-info{ display:flex; flex-wrap:wrap; gap:6px 24px; align-items:baseline; margin-top:8px; margin-bottom:20px; }
.ct-office-addr{ font-size:var(--fs-sm); color:var(--text-card-muted); line-height:1.5; margin:0; }
.ct-office-tel{ font-size:var(--fs-sm); color:var(--text-card-muted); margin:0; }
.ct-office-tel a{ color:var(--base-white); font-weight:600; }
.ct-office-tel a:hover{ color:var(--green); }
.ct-map{
  position:relative;
  flex:0 0 auto; height:238px; min-height:0;
  border-radius:16px; overflow:hidden;
  border:1px solid #70788D;
  background:var(--navy-deep);
}
/* Mapa Google (embed keyless) tintado a navy/Aubergine vía CSS.
   invert(1)+hue-rotate(~185) = mapa oscuro con colores naturales;
   el ::after navy unifica el tono con la card. */
.ct-map-iframe{
  position:absolute; inset:0;
  display:block; width:100%; height:100%; border:0;
  filter:invert(1) hue-rotate(186deg) saturate(1.42) brightness(.98) contrast(.9);
}
/* Capa navy que homogeniza el tinte con la card (sin bloquear interacción) */
.ct-map::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:rgba(18,40,95,.26); mix-blend-mode:multiply;
}
/* ---------- CARD HORARIOS ---------- */
.ct-hours{ background:var(--base-white); border:1px solid var(--border); border-radius:var(--radius-card); padding:32px; }
.ct-hours-title{ font-size:var(--fs-h4, 20px); font-size:20px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.ct-hours-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--border); font-size:var(--fs-sm); color:var(--slate);
}
.ct-hours-row:last-child{ border-bottom:0; padding-bottom:0; }
.ct-hours-val{ font-weight:600; color:var(--navy); }
.ct-hours-closed{ color:var(--muted); font-weight:500; }

/* ---------- Animaciones ---------- */
@keyframes ctSpin{ to{ transform:rotate(360deg); } }
@keyframes ctShake{ 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);} 30%,50%,70%{transform:translateX(-4px);} 40%,60%{transform:translateX(4px);} }
@keyframes ctSuccessIn{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:scale(1); } }

/* ---------- Responsive Contacto ---------- */
@media (max-width: 1024px){
  .ct-hero-grid{ grid-template-columns:1fr; gap:40px; }
  .ct-panel{ max-width:520px; }
  .ct-grid{ grid-template-columns:1fr; }
  .ct-aside{ flex-direction:row; flex-wrap:wrap; }
  .ct-office, .ct-hours{ flex:1; min-width:280px; }
}
@media (max-width: 768px){
  /* Hero (frame mobile: pad 24 · gap 16 · velo navy .60 · alto ≤580) */
  .ct-hero{ padding-block:16px; }
  .ct-hero::before{ background:rgba(21,34,68,.5); } /* frame mobile más oscuro */
  .ct-hero-grid{ gap:12px; }
  .ct-hero-left{ gap:8px; }
  .ct-hero .eyebrow{ padding:8px 16px; font-size:11px; line-height:1; }
  .ct-hero-title{ font-size:40px; line-height:1; }
  .ct-hero-sub{ font-size:14px; line-height:1.5; }
  .ct-hero-cta{
    margin-top:0; align-self:stretch; width:100%;
    height:48px; justify-content:center; gap:8px;
  }
  /* Panel contacto (frame mobile: pad 24 con marco interior 8 · filas 44 · gap 8) */
  .ct-panel{
    border-width:8px; padding:16px; gap:8px; max-width:none;
    background:linear-gradient(196deg, rgba(32,43,89,.5) 0%, rgba(14,25,71,.5) 100%), var(--navy-deep);
  }
  .ct-channel{ padding:12px 8px; gap:14px; min-height:48px; }
  .ct-channel-icon{ width:48px; height:48px; border-radius:14px; }
  .ct-channel-icon svg{ width:26px; height:26px; }
  /* El frame mobile solo muestra etiqueta + valor por canal */
  .ct-channel-status, .ct-channel-sub{ display:none; }
  .ct-channel--callback{ margin-top:0; padding-top:0; border-top:0; }
  .ct-channel--callback .ct-channel-sub{ display:flex; }

  .ct-form-card{ padding:28px; }
  .ct-aside{ flex-direction:column; }
  .ct-office, .ct-hours{ min-width:0; }
}
@media (max-width: 480px){
  .ct-row{ grid-template-columns:1fr; }
  .ct-form-card{ padding:24px; }
}
@media (max-width: 360px){
  .ct-panel{ padding:10px; }
}

/* Fix: respetar atributo [hidden] sobre display:flex */
.ct-form[hidden], .ct-success[hidden]{ display:none !important; }

/* ============================================================
   PÁGINA · LEY 20.393 (.ly-*)
   ============================================================ */
:root{
  --ly-text:var(--slate-700);
  --ly-card-border:var(--slate-200);
  --ly-badge-navy:#202e6a;
  --ly-badge-num:var(--green-50);
  --ly-letter-bg:var(--green-50);
  --ly-letter-border:#aed6a7;
  --ly-channel-title:var(--navy-500);
  --ly-dot-amber:var(--amber-400);
  --ly-dot-green:var(--green-400);
  --ly-mail-dot:var(--green-600);
  --ly-section-py:clamp(64px, 7vw, 72px);
}

/* ---------- HERO ---------- */
.ly-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--navy-deep);
  padding-block:72px;
}
.ly-hero-bg{ position:absolute; inset:0; z-index:-2; opacity:.7; }
.ly-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.ly-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(21,34,68,.3);
}
.ly-hero-inner{ display:flex; flex-direction:column; gap:24px; }
.ly-hero .eyebrow{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);
  font-size:12px;
}
.ly-hero-title{
  font-size:clamp(40px, 6.5vw, 72px); font-weight:800; line-height:1.1;
  letter-spacing:-0.02em; color:var(--base-white); max-width:1248px;
}
.ly-hero-sub{
  font-size:18px; font-weight:500; line-height:1.5; color:var(--base-white); max-width:869px;
}
.ly-hero-badges{
  list-style:none; margin:8px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:12px;
}
.ly-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.8); border:1px solid var(--base-white);
  font-size:14px; font-weight:500; color:var(--ly-text);
}
.ly-badge-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--ly-dot-green); flex-shrink:0;
}
.ly-badge-dot--amber{ background:var(--ly-dot-amber); }

/* ---------- TITULARES COMPARTIDOS ---------- */
.ly-h2{
  font-size:clamp(32px, 5vw, 48px); font-weight:800; line-height:1.2;
  letter-spacing:-0.02em; color:var(--navy);
}
.ly-head{ display:flex; flex-direction:column; gap:24px; margin-bottom:64px; }
.ly-head-sub{ font-size:18px; line-height:1.5; color:var(--ly-text); }
.ly-card-title{ font-size:22px; font-weight:700; line-height:1.35; color:var(--navy-deep); }
.ly-card-body{ font-size:14px; line-height:1.55; color:var(--ly-text); }

/* ---------- QUÉ ES LA LEY ---------- */
.ly-intro{ background:var(--bg); padding-block:var(--ly-section-py); }
.ly-intro-inner{
  display:flex; flex-direction:column; align-items:center; gap:24px;
  text-align:center;
}
.ly-intro .eyebrow{ align-self:center; }
.ly-intro-body{
  font-size:18px; line-height:1.65; color:var(--ly-text); max-width:840px;
}

/* ---------- 4 CATEGORÍAS ---------- */
.ly-crimes{ background:var(--bg-alt); padding-block:var(--ly-section-py); }
.ly-crimes-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px;
}
.ly-crime-card{
  background:var(--base-white); border:1px solid var(--ly-card-border);
  border-radius:var(--radius-card); padding:32px;
  display:flex; flex-direction:column; gap:24px;
}
.ly-num-badge{
  width:64px; height:64px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--ly-badge-navy); border:1px solid var(--navy-deep);
  border-radius:14px;
  font-size:22px; font-weight:700; color:var(--ly-badge-num);
}

/* ---------- 3 CANALES ---------- */
.ly-channels{ background:var(--bg); padding-block:var(--ly-section-py); }
.ly-channels-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px;
}
.ly-channel-card{
  background:var(--base-white); border:1px solid var(--ly-card-border);
  border-radius:var(--radius-card); padding:32px;
  display:flex; flex-direction:column; gap:24px;
}
.ly-channel-card .ly-card-body{ font-size:15px; }
.ly-letter-badge{
  width:56px; height:56px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--ly-letter-bg); border:2px solid var(--ly-letter-border);
  border-radius:50%;
  box-shadow:0 1px 3px rgba(32,43,89,.10);
  font-size:22px; font-weight:700; color:var(--green-mid);
}
.ly-channel-title{ font-size:28px; font-weight:700; line-height:1.2; color:var(--ly-channel-title); }
.ly-btn{
  margin-top:auto; width:100%; height:56px;
  justify-content:center; padding:8px 24px;
}
.ly-mail-pill{
  margin-top:auto;
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:56px; padding:12px 24px;
  background:var(--bg-alt); border:1px solid var(--ly-card-border);
  border-radius:42px;
  font-size:14px; font-weight:500; color:var(--navy-deep);
  transition:border-color var(--transition), background var(--transition);
}
.ly-mail-pill:hover{ border-color:var(--ly-letter-border); background:var(--base-white); }
.ly-mail-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--ly-mail-dot); flex-shrink:0;
}

/* ---------- PROCESO 4 PASOS ---------- */
.ly-steps{ background:var(--bg-alt); padding-block:var(--ly-section-py); }
.ly-steps-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px;
}
.ly-step-card{
  background:var(--base-white); border:1px solid var(--ly-card-border);
  border-radius:var(--radius-card); padding:32px;
  display:flex; flex-direction:column; gap:20px;
}
.ly-step-num-wrap{ display:flex; flex-direction:column; gap:20px; }
.ly-step-num{ font-size:40px; font-weight:700; line-height:1.1; color:var(--slate); }
.ly-step-line{
  display:block; width:32px; height:2px; border-radius:1px;
  background:var(--green);
}
.ly-step-content{ display:flex; flex-direction:column; gap:20px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px){
  .ly-crimes-grid, .ly-steps-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ly-channels-grid{ grid-template-columns:minmax(0,1fr); }
  .ly-head{ margin-bottom:48px; }
}
@media (max-width: 768px){
  /* Hero (frame mobile: pad 56 · gap 24 · eyebrow blanca · alto 580) */
  .ly-hero{ padding-block:56px; }
  .ly-hero-bg{ opacity:.8; } /* IMAGE @0.80 del frame mobile */
  .ly-hero::before{ background:rgba(21,34,68,.2); }
  .ly-hero .eyebrow{
    font-size:11px; line-height:1; padding:7px 14px 7px 12px;
    background:var(--base-white); border-color:var(--border); color:var(--navy);
  }
  .ly-hero-title{ font-size:40px; line-height:1.1; }
  .ly-hero-sub{ font-size:15px; line-height:24px; }
  .ly-hero-badges{ gap:8px; margin-top:0; }
  /* Marco exterior: pad 10/14 del frame − 1px de borde */
  .ly-badge{ padding:9px 13px; font-size:12px; line-height:1; }
  .ly-intro-body, .ly-head-sub{ font-size:15px; }
  .ly-head{ gap:16px; margin-bottom:32px; }
  .ly-hero-inner{ gap:24px; }
  .ly-intro-inner{ gap:16px; }
  .ly-crimes-grid, .ly-steps-grid{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .ly-channels-grid{ gap:16px; }
  /* Cards compactas horizontales (según frame mobile) */
  .ly-crime-card, .ly-step-card{
    flex-direction:row; align-items:flex-start; gap:16px; padding:20px;
  }
  .ly-crime-card > div, .ly-step-content{ flex:1; min-width:0; }
  .ly-card-title{ font-size:18px; }
  .ly-channel-card{ padding:24px; gap:16px; }
  .ly-channel-title{ font-size:24px; }
  .ly-step-num{ font-size:32px; }
  .ly-step-num-wrap{ gap:12px; }
  .ly-step-content{ gap:12px; }
}
@media (max-width: 480px){
  .ly-num-badge{ width:56px; height:56px; font-size:20px; }
  .ly-mail-pill{ font-size:13px; padding:12px 16px; }
}
@media (max-width: 360px){
  .ly-hero-title{ font-size:34px; }
  .ly-crime-card, .ly-step-card{ padding:16px; }
  .ly-channel-card{ padding:20px; }
}

/* ============================================================
   PÁGINA · ESTADOS FINANCIEROS (.ef-*)
   ============================================================ */
:root{
  --ef-ink:var(--navy-950);
  --ef-border:var(--slate-300);
  --ef-blue:var(--blue-500);
  --ef-blue-bg:var(--blue-50);
  --ef-featured-border:#383e86;
  --ef-grad-green:linear-gradient(135deg, #4fae5a 0%, #52bc48 100%);
  --ef-grad-navy:linear-gradient(135deg, var(--navy-700) 0%, #191f69 100%);
  --ef-grad-banner:linear-gradient(115deg, #161e3f 0%, #354282 100%);
}

/* ---------- BOTONES ---------- */
.ef-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:56px; padding:0 24px; gap:8px;
  border-radius:28px; /* = mitad de la altura → pill limpio en Firefox y Chrome (evitar valores enormes + borde) */
  background:var(--ef-grad-green); border:1px solid var(--ly-mail-dot);
  font-size:16px; font-weight:500; color:var(--base-white); line-height:1;
  cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.ef-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 10px 24px rgba(46,182,44,.25); }
.ef-btn:focus-visible{ outline:3px solid rgba(46,182,44,.4); outline-offset:2px; }
.ef-btn--navy{ background:var(--ef-grad-navy); border-color:var(--navy); }
.ef-btn--navy:hover{ box-shadow:0 10px 24px rgba(32,43,89,.25); }
.ef-btn--navy:focus-visible{ outline-color:rgba(32,43,89,.35); }
.ef-btn--card{ height:48px; padding:0 16px; min-width:190px; margin-left:auto; border-radius:24px; }

/* ---------- HERO ---------- */
.ef-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--bg);
  padding-block:80px;
}
/* Imagen real del frame Figma (encuadre con más aire que el asset original) */
.ef-hero-bg{
  position:absolute; inset:0; z-index:-1; opacity:.3;
}
.ef-hero-bg img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.ef-hero-inner{ display:flex; flex-direction:column; gap:24px; }
.ef-eyebrow-hero{ font-size:12px; border-color:var(--ef-border); color:var(--ef-ink); }
.ef-dot-ink{ width:6px; height:6px; border-radius:3px; background:var(--ef-ink); flex-shrink:0; }
.ef-hero-title{
  font-size:clamp(40px, 6.5vw, 72px); font-weight:800; line-height:1.1;
  letter-spacing:-0.02em; color:var(--navy); max-width:920px;
}
.ef-hero-sub{ font-size:16px; line-height:1.5; color:var(--ly-text); max-width:1017px; }
.ef-hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; margin-top:16px; }

/* ---------- BIBLIOTECA ---------- */
.ef-h2{
  font-size:clamp(32px, 5vw, 48px); font-weight:800; line-height:1.2;
  letter-spacing:-0.02em; color:var(--navy);
}
.ef-library{ background:var(--bg-alt); padding-block:var(--ly-section-py); }
.ef-lib-head{ display:flex; flex-direction:column; gap:16px; margin-bottom:56px; }
.ef-lib-sub{ font-size:16px; line-height:1.5; color:var(--ly-text); max-width:720px; }

/* Barra de filtros */
.ef-filterbar{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:var(--base-white); border:1px solid var(--ef-border); border-radius:var(--radius-pill);
  padding:8px 16px 8px 24px;
  margin-bottom:56px;
}
.ef-filter-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.ef-filter-label{ font-size:12px; color:var(--muted); flex-shrink:0; }
.ef-filter-sep{ width:1px; height:20px; background:var(--ef-border); flex-shrink:0; }
.ef-chips{ display:flex; gap:8px; }
.ef-pill{
  height:36px; padding:8px 16px;
  border-radius:var(--radius-pill);
  background:var(--base-white); border:1px solid var(--ef-border);
  font-size:14px; color:var(--ef-ink); line-height:1; white-space:nowrap;
  cursor:pointer;
  transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.ef-pill:hover{ border-color:var(--navy); }
.ef-pill:focus-visible{ outline:3px solid rgba(32,43,89,.3); outline-offset:2px; }
.ef-pill.is-active{ background:var(--navy); border-color:var(--navy); color:var(--base-white); }
.ef-sort{
  display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
  height:40px; padding:10px 16px;
  background:var(--bg-alt); border:1px solid var(--ef-border); border-radius:var(--radius-pill);
  font-size:14px; color:var(--ef-ink); line-height:1;
}
/* Sort como <select> nativo manteniendo el look de pill */
select.ef-sort{ display:inline-block; cursor:pointer; padding-right:40px; font-family:inherit;
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'><path d='M5 6l3 3 3-3M5 10l3-3 3 3' stroke='%23565a7f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center;
}
select.ef-sort:focus-visible{ outline:none; box-shadow:var(--ring-focus); }

/* Secciones por año */
.ef-years{ display:flex; flex-direction:column; gap:48px; }
.ef-year-section{ display:flex; flex-direction:column; gap:24px; }
/* Fix: respetar atributo [hidden] sobre display:flex (filtro por año) */
.ef-year-section[hidden]{ display:none !important; }
.ef-year-section.is-faded{ animation:efFadeIn .4s cubic-bezier(.22,.61,.36,1) both; }
@keyframes efFadeIn{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}
.ef-year-head{ display:flex; align-items:center; gap:16px; padding-block:16px; }
.ef-year-num{ font-size:48px; font-weight:800; line-height:1.2; letter-spacing:-0.02em; color:var(--ef-ink); }
.ef-year-count{ font-size:14px; color:var(--muted); }
.ef-year-badge{ margin-left:auto; font-size:12px; font-weight:500; align-self:center; }

/* Cards de documentos */
.ef-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
.ef-card{
  background:var(--base-white); border:1px solid var(--ef-border); border-radius:28px; padding:6px;
}
.ef-card--featured{ border:5px solid var(--ef-featured-border); }
.ef-card-core{
  background:var(--base-white); border-radius:22px; padding:32px;
  display:flex; flex-direction:column; gap:24px; height:100%;
}
.ef-card-top{ display:flex; align-items:center; gap:12px; }
.ef-badge-kind{
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:6px;
  background:var(--bg-alt); border:1px solid var(--ef-border);
  font-size:12px; color:var(--ef-ink); letter-spacing:.04em;
}
.ef-badge-kind--audit{ background:var(--ef-blue-bg); border-color:var(--muted-2); color:var(--slate); }
.ef-badge-status{ display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--ly-text); }
.ef-status-dot{ width:8px; height:8px; border-radius:4px; background:var(--green-mid); flex-shrink:0; }
.ef-status-dot--blue{ background:var(--ef-blue); }
.ef-card-title{ font-size:24px; font-weight:700; line-height:1.35; color:var(--navy); }
.ef-meta{ display:flex; flex-direction:column; margin:0; }
.ef-meta-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:12px;
}
.ef-meta-row dt{ font-size:14px; color:var(--muted); }
.ef-meta-row dd{ font-size:14px; color:var(--ef-ink); margin:0; text-align:right; }
.ef-divider{ height:1px; background:var(--ef-border); }
.ef-card-actions{ display:flex; align-items:center; gap:16px; margin-top:auto; }
.ef-card-note{ font-size:14px; color:var(--muted); }

/* Estado vacío del filtro */
.ef-empty{
  background:var(--base-white); border:1px dashed var(--ef-border); border-radius:var(--radius-card);
  padding:48px 32px; text-align:center;
}
.ef-empty p{ font-size:16px; line-height:1.5; color:var(--ly-text); }
.ef-empty a{ color:var(--navy); font-weight:700; text-decoration:underline; }

/* ---------- MARCO REGULATORIO ---------- */
.ef-regulatory{ background:var(--bg); padding-block:var(--ly-section-py); }
.ef-reg-grid{
  display:grid; grid-template-columns:minmax(0,608fr) minmax(0,560fr); gap:80px;
  align-items:start; margin-bottom:64px;
}
.ef-reg-left{ display:flex; flex-direction:column; gap:24px; }
.ef-reg-body{ font-size:16px; line-height:1.5; color:var(--ly-text); }
.ef-data-shell{
  background:var(--bg-alt); border:1px solid var(--ef-border); border-radius:28px; padding:6px;
}
.ef-data-card{ background:var(--base-white); border-radius:22px; padding:32px; }
.ef-data-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:16px;
}
.ef-data-title{ font-size:12px; color:var(--ef-ink); letter-spacing:.06em; }
.ef-data-brand{ font-size:12px; color:var(--muted); }
.ef-data-table{ display:flex; flex-direction:column; margin:0; }
.ef-data-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-block:16px;
}
.ef-data-row + .ef-data-row{ border-top:1px solid var(--bg-alt); }
.ef-data-row dt{ font-size:14px; color:var(--muted); }
.ef-data-row dd{ font-size:14px; color:var(--ef-ink); margin:0; text-align:right; }

/* Cards de documentos PDF */
.ef-docs-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.ef-doc{
  display:block;
  background:var(--bg-alt); border:1px solid var(--ef-border); border-radius:24px; padding:6px;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.ef-doc:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:var(--muted-2); }
.ef-doc:focus-visible{ outline:3px solid rgba(32,43,89,.3); outline-offset:2px; }
.ef-doc-core{
  background:var(--base-white); border-radius:18px; padding:28px;
  display:flex; flex-direction:column; gap:16px; height:100%;
}
.ef-doc-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.ef-pdf-icon{ width:40px; height:48px; flex-shrink:0; display:block; object-fit:contain; }
.ef-doc-arrow{
  width:36px; height:36px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--border); border-radius:50%;
  transition:background var(--transition), transform var(--transition);
}
.ef-doc:hover .ef-doc-arrow{ background:var(--green); transform:translate(2px,-2px); }
.ef-doc-title{ font-size:24px; font-weight:700; line-height:1.35; color:var(--navy); }
.ef-doc-desc{ font-size:14px; line-height:1.4; color:var(--ly-text); }

/* ---------- CTA INVERSIONISTAS ---------- */
.ef-cta{ background:var(--bg-alt); padding-block:80px; }
.ef-cta-banner{
  background:var(--ef-grad-banner); border-radius:32px;
  padding:48px 56px;
  display:flex; align-items:center; gap:64px;
}
.ef-cta-text{ display:flex; flex-direction:column; gap:20px; flex:1; min-width:0; }
.ef-cta-eyebrow{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2);
  color:var(--base-white); font-size:12px;
}
.ef-cta-h2{
  font-size:clamp(32px, 4.5vw, 48px); font-weight:800; line-height:1.2;
  letter-spacing:-0.02em; color:var(--base-white); max-width:560px;
}
.ef-cta-sub{ font-size:16px; line-height:1.5; color:var(--border); }
.ef-cta-btn{ flex-shrink:0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px){
  .ef-reg-grid{ grid-template-columns:minmax(0,1fr); gap:48px; margin-bottom:48px; }
  .ef-docs-grid{ grid-template-columns:minmax(0,1fr); }
  .ef-cta-banner{ flex-direction:column; align-items:flex-start; gap:32px; }
}
@media (max-width: 768px){
  /* Hero (frame mobile: gap 32 · btn navy 48 · alto 580) */
  .ef-hero{ padding-block:62px; }
  .ef-hero-bg{ opacity:.2; } /* IMAGE @0.20 del frame mobile */
  .ef-hero-inner{ gap:32px; }
  .ef-eyebrow-hero{ font-size:11px; line-height:1; padding:7px 11px; }
  .ef-hero-title{ font-size:40px; line-height:1.1; }
  .ef-hero-ctas{ flex-direction:column; margin-top:8px; gap:12px; }
  .ef-hero-ctas .ef-btn{ width:100%; }
  .ef-hero-ctas .ef-btn--navy{ height:48px; }
  .ef-library, .ef-regulatory{ padding-block:56px; }
  .ef-lib-head{ margin-bottom:32px; }
  .ef-filterbar{
    flex-direction:column; align-items:stretch; gap:12px;
    border-radius:24px; padding:8px 16px; margin-bottom:32px;
  }
  .ef-filter-label, .ef-filter-sep{ display:none; }
  .ef-chips{ overflow-x:auto; padding-block:4px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .ef-chips::-webkit-scrollbar{ display:none; }
  .ef-sort{ align-self:flex-start; }
  .ef-years{ gap:32px; }
  .ef-grid{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .ef-year-head{ flex-wrap:wrap; row-gap:8px; padding-block:8px; }
  .ef-year-num{ font-size:35px; }
  .ef-card-core{ padding:24px; gap:16px; }
  .ef-card-title{ font-size:20px; }
  .ef-cta{ padding-block:56px; }
  .ef-cta-banner{ padding:32px 24px; }
  .ef-cta-h2{ font-size:clamp(28px, 8vw, 35px); }
  .ef-cta-btn{ width:100%; }
  .ef-doc-title{ font-size:20px; }
}
@media (max-width: 480px){
  .ef-card-actions{ flex-direction:column; align-items:stretch; gap:12px; }
  .ef-card-note{ text-align:center; }
  .ef-btn--card{ min-width:0; width:100%; margin-left:0; }
  .ef-meta-row dd{ max-width:60%; }
  .ef-year-badge{ margin-left:0; }
}
@media (max-width: 360px){
  .ef-hero-title{ font-size:34px; }
  .ef-card-core{ padding:20px; }
  .ef-data-card{ padding:20px; }
  .ef-doc-core{ padding:20px; }
}

/* ============================================================
   PÁGINA · PRODUCTOS AFEX (.pr-*)
   ============================================================ */
:root{
  --pr-text:var(--slate-700);
  --pr-navy-why:var(--navy-800);
  --pr-navy-box:var(--navy-900);
  --pr-img-bg:var(--navy-50);
  --pr-card-border:var(--slate-200);
  --pr-grad-green:linear-gradient(135deg, #4fae5a 0%, #52bc48 100%);
  --pr-grad-banner:linear-gradient(115deg, #161e3f 0%, #354282 100%);
  --pr-section-py:clamp(64px, 7vw, 80px);
}

/* ---------- BOTONES ---------- */
.pr-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding:0 24px; gap:8px;
  border-radius:100px;
  background:var(--pr-grad-green); border:1px solid var(--ly-mail-dot);
  font-size:16px; font-weight:500; color:var(--base-white); line-height:1;
  cursor:pointer; white-space:nowrap;
  transition:transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.pr-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 10px 24px rgba(46,182,44,.25); }
.pr-btn:focus-visible{ outline:3px solid rgba(46,182,44,.4); outline-offset:2px; }
.pr-btn--xl{ height:64px; padding:0 44px; font-size:18px; font-weight:700; gap:10px; }
.pr-btn--xl svg{ flex-shrink:0; transition:transform var(--transition); }
.pr-btn--xl:hover svg{ transform:translateX(4px); }

/* El estado de página actual del dropdown se resuelve en el bloque .nav-*
   (~línea 636): el ítem con aria-current toma el verde del frame y Productos
   lo cede. Aquí solo quedan las filas de producto, que no lo usan. */

/* ---------- HERO ---------- */
.pr-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--card-darkest);
  padding-block:clamp(72px, 9vw, 111px);
}
.pr-hero-bg{ position:absolute; inset:0; z-index:-2; opacity:.88; }
.pr-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* Frame: gradiente 90° (var(--navy-950) 1% → var(--navy-800)/.80 38% → var(--base-white)/.50 100%) @0.50 */
.pr-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(9,19,39,.5) 1%, rgba(26,37,83,.4) 38%, rgba(255,255,255,.25) 100%);
}
.pr-hero-inner{ display:flex; flex-direction:column; gap:24px; }
.pr-eyebrow-hero{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2);
  color:var(--base-white); font-size:12px;
}
.pr-hero-title{
  font-size:clamp(40px, 6.5vw, 72px); font-weight:800; line-height:1.1;
  letter-spacing:-0.02em; color:var(--base-white); max-width:753px;
}
.pr-hero-sub{ font-size:clamp(16px, 1.6vw, 20px); line-height:1.5; color:var(--base-white); max-width:753px; }
.pr-hero-cta{ margin-top:16px; }

/* ---------- EYEBROW + TÍTULOS DE SECCIÓN ---------- */
.pr-eyebrow{ font-size:12px; font-weight:500; }
.pr-h2{
  font-size:clamp(32px, 5vw, 48px); font-weight:800; line-height:1.2;
  letter-spacing:-0.02em; color:var(--pr-text);
}
.pr-h3{
  font-size:clamp(30px, 4.4vw, 48px); font-weight:800; line-height:1.15;
  letter-spacing:-0.02em; color:var(--pr-text);
}

/* ---------- CATÁLOGO · INTRO ---------- */
.pr-intro{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--bg-alt); padding-block:var(--pr-section-py);
}
/* Capas Figma: base var(--slate-50) + imagen op .15 + velo var(--slate-50) op .20 */
.pr-intro-bg{ position:absolute; inset:0; z-index:-2; opacity:.15; }
.pr-intro-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.pr-intro::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(242,242,247,.2);
}
.pr-intro-inner{ display:flex; flex-direction:column; gap:20px; }
.pr-intro-sub{ font-size:clamp(16px, 1.6vw, 20px); line-height:1.5; color:var(--pr-text); max-width:1005px; }

/* ---------- PRODUCTOS · LAYOUT ALTERNADO ---------- */
/* Al aterrizar en un ancla el usuario ya scrolleó, así que lo único fijo es
   la barra blanca (88px), no el header completo: 88 + 12 de aire = 100. */
.pr-product{ background:var(--bg); padding-block:var(--pr-section-py); scroll-margin-top:100px; }
.pr-product--alt{ background:var(--bg-alt); }
.pr-row{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:64px;
  align-items:center;
}
.pr-product--reverse .pr-text{ order:2; }
.pr-product--reverse .pr-img-card{ order:1; }
.pr-text{ display:flex; flex-direction:column; gap:19px; }
.pr-body{ font-size:18px; line-height:1.5; color:var(--pr-text); }
.pr-checklist{
  list-style:none; margin:6px 0 0; padding:0;
  display:flex; flex-direction:column; gap:16px;
}
.pr-checklist li{
  display:flex; align-items:center; gap:12px;
  font-size:16px; line-height:1.5; color:var(--pr-text);
}
.pr-check{
  width:24px; height:24px; border-radius:100px; flex-shrink:0;
  background:var(--pr-grad-green);
  display:inline-flex; align-items:center; justify-content:center;
}
.pr-cta{ margin-top:6px; }
.pr-img-card{
  background:var(--base-white); border:1px solid var(--pr-card-border); border-radius:24px; padding:20px;
  box-shadow:var(--shadow-card);
}
.pr-img{
  border-radius:16px; overflow:hidden; background:var(--pr-img-bg);
  height:440px;
}
.pr-img img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* ---------- POR QUÉ AFEX ---------- */
.pr-why{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--pr-navy-why); padding-block:var(--pr-section-py);
}
/* Capas Figma: base var(--navy-800) + imagen op .60 */
.pr-why-bg{ position:absolute; inset:0; z-index:-1; opacity:.6; }
.pr-why-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.pr-why-intro{ display:flex; flex-direction:column; gap:16px; margin-bottom:48px; }
.pr-why-il{ display:flex; flex-direction:column; gap:24px; }
.pr-eyebrow-why{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.2);
  color:var(--base-white); font-size:11px; font-weight:500;
}
.pr-eyebrow-why .dot{ background:var(--ly-dot-green); width:6px; height:6px; }
.pr-why-h2{
  font-size:clamp(32px, 5vw, 48px); font-weight:800; line-height:1.2;
  letter-spacing:-0.02em; color:var(--base-white);
}
.pr-why-sub{ font-size:16px; line-height:1.5; color:var(--muted-2); }
.pr-why-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px;
}
.pr-why-box{
  background:var(--pr-navy-box); border-radius:16px; padding:32px;
  display:flex; flex-direction:column; gap:12px;
}
.pr-why-box h3{ font-size:24px; font-weight:700; line-height:1.3; color:var(--base-white); }
.pr-why-box p{ font-size:16px; line-height:1.5; color:var(--muted-2); }

/* ---------- CÓMO FUNCIONA · 3 PASOS ---------- */
.pr-steps{ background:var(--bg); padding-block:var(--pr-section-py); }
.pr-steps-head{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:20px; max-width:760px; margin:0 auto 56px;
}
.pr-steps-head .pr-eyebrow{ align-self:center; }
.pr-steps-sub{ font-size:16px; line-height:1.5; color:var(--pr-text); }
.pr-steps-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px;
}
.pr-step{
  background:var(--base-white); border:1px solid var(--pr-card-border); border-radius:32px; padding:8px;
}
.pr-step-core{
  background:var(--pr-navy-box); border-radius:26px; padding:32px;
  display:flex; flex-direction:column; gap:16px; height:100%;
}
.pr-step-num{ font-size:34px; line-height:1.2; color:var(--green-400); font-variant-numeric:tabular-nums; }
.pr-step-core h3{ font-size:24px; font-weight:700; line-height:1.3; color:var(--base-white); }
.pr-step-line{ width:40px; height:1px; background:rgba(255,255,255,.6); display:block; }
.pr-step-core p{ font-size:14px; line-height:1.5; color:var(--base-white); }

/* ---------- CTA FINAL ---------- */
.pr-cta-final{ background:var(--bg-alt); padding-block:var(--pr-section-py); }
.pr-cta-banner{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--pr-grad-banner); border-radius:32px;
  padding:clamp(40px, 5vw, 66px) clamp(28px, 4vw, 64px);
}
/* Capas Figma: gradiente + imagen op .10 + velo #161e3f op .50 */
.pr-cta-bg{ position:absolute; inset:0; z-index:-2; opacity:.1; }
.pr-cta-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.pr-cta-banner::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(22,30,63,.5);
}
/* Figma: la columna de 780px va centrada en el banner (1136px) y todo su
   contenido —título, bajada y botones— con alineación centrada. */
.pr-cta-col{
  display:flex; flex-direction:column; gap:16px;
  max-width:780px; margin-inline:auto; text-align:center;
}
.pr-cta-h2{
  font-size:clamp(30px, 4.6vw, 48px); font-weight:800; line-height:1.15;
  letter-spacing:-0.02em; color:var(--base-white);
}
.pr-cta-sub{ font-size:16px; line-height:1.5; color:var(--muted-2); }
.pr-cta-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:24px; }
.pr-cta-actions .btn-ghost{ height:48px; font-weight:500; font-size:16px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px){
  .pr-product{ scroll-margin-top:84px; }   /* barra blanca 72 */
  .pr-row{ grid-template-columns:1fr; gap:32px; }
  /* Mobile/tablet: imagen siempre arriba, texto abajo */
  .pr-text{ order:2; }
  .pr-img-card{ order:1; }
  .pr-img{ height:360px; }
  .pr-why-grid{ grid-template-columns:1fr; }
  .pr-steps-grid{ grid-template-columns:1fr; }
}
@media (max-width: 768px){
  /* Hero (frame mobile: alto 480 · pila gap 0 · btn 48/18) */
  .pr-hero{ padding-block:84px; }
  /* Frame mobile: gradiente 90° (var(--navy-900) 0% → var(--base-white)/.70 100%) @0.50 */
  .pr-hero::before{
    background:linear-gradient(90deg, rgba(21,34,68,.5) 0%, rgba(255,255,255,.35) 100%);
  }
  .pr-hero-inner{ gap:0; }
  .pr-hero-title{ font-size:40px; line-height:1.1; }
  .pr-hero-sub{ font-size:16px; line-height:1.5; }
  .pr-hero-cta{ margin-top:8px; }
  .pr-hero-cta .pr-btn--xl{ width:100%; height:48px; font-size:18px; font-weight:700; }

  .pr-img{ height:300px; }
  .pr-why-box{ padding:24px; }
  .pr-step-core{ padding:24px; }
  .pr-cta-actions .pr-btn,
  .pr-cta-actions .btn-ghost{ width:100%; }
}
@media (max-width: 480px){
  .pr-product{ scroll-margin-top:76px; }   /* barra blanca 64 */
  .pr-hero-title{ font-size:40px; }
  .pr-btn--xl{ width:100%; height:56px; font-size:16px; }
  .pr-hero-cta .pr-btn--xl{ height:48px; font-size:18px; font-weight:700; }
  .pr-img-card{ padding:12px; }
  .pr-img{ height:240px; }
  .pr-checklist li{ align-items:flex-start; }
  .pr-checklist .pr-check{ margin-top:1px; }
  .pr-cta-banner{ border-radius:24px; }
}
@media (max-width: 360px){
  .pr-hero-title{ font-size:34px; }
  .pr-h2, .pr-h3{ font-size:28px; }
  .pr-why-box h3, .pr-step-core h3{ font-size:20px; }
}

/* ============================================================
   PÁGINA · PORTAL CLIENTES (.pc-*)
   ============================================================ */
:root{
  --pc-text:var(--slate-700);
  --pc-ink:var(--slate-800);
  --pc-navy-sec:var(--navy-800);
  --pc-grad-check:linear-gradient(135deg, #9ce78f 0%, #57c84d 100%);
  --pc-section-py:clamp(64px, 7vw, 96px);
}

/* ---------- HERO (claro · imagen de fondo + velo blanco) ---------- */
.pc-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--base-white);
  padding-block:clamp(64px, 7vw, 96px);
}
/* Capas Figma: base var(--base-white) + imagen op .80 + gradiente var(--slate-50) → transparente */
/* Laptop grande a la derecha, foto nítida; el velo izquierdo da el aire para el texto */
.pc-hero-bg{
  position:absolute; inset:0; z-index:-2; opacity:1;
}
.pc-hero-bg img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center right; }
.pc-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, var(--bg-alt) 0%, rgba(255,255,255,0) 100%); /* f1f1f6→0 del frame */
}
.pc-hero-inner{ display:flex; flex-direction:column; gap:24px; }
.pc-hero-title{
  font-size:clamp(40px, 6.5vw, 72px); font-weight:800; line-height:1.1;
  letter-spacing:-0.02em; color:var(--navy); max-width:680px;
}
.pc-hero-sub{ font-size:18px; line-height:1.5; color:var(--card-darker); max-width:680px; }
.pc-hero-cta{ margin-top:16px; }

/* ---------- STATS ---------- */
.pc-stats{ background:var(--base-white); padding-block:clamp(48px, 5vw, 64px); }
.pc-stats-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.pc-stat{ display:flex; flex-direction:column; gap:8px; }
.pc-stat-value{
  font-size:clamp(44px, 4.5vw, 64px); font-weight:700; line-height:1.1;
  letter-spacing:-0.02em; color:var(--navy); font-variant-numeric:tabular-nums;
}
.pc-green{ color:var(--green); }
.pc-stat-label{ font-size:16px; font-weight:700; color:var(--pc-ink); }
.pc-stat-hint{ font-size:14px; color:var(--muted); }

/* ---------- VISIBILIDAD · INTRO ---------- */
.pc-intro{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--bg-alt); padding-block:var(--pc-section-py);
}
/* Capas Figma: base var(--slate-50) + imagen op .50 + velo var(--slate-50) op .20 */
.pc-intro-bg{ position:absolute; inset:0; z-index:-2; opacity:.5; }
.pc-intro-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.pc-intro::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(242,242,247,.2);
}
.pc-intro-inner{
  display:grid; grid-template-columns:minmax(0,686fr) minmax(0,562fr); gap:48px;
  align-items:center;
}
.pc-h2{
  font-size:clamp(32px, 5vw, 48px); font-weight:800; line-height:1.2;
  letter-spacing:-0.02em; color:var(--pc-text);
}
.pc-intro-sub{ font-size:clamp(16px, 1.6vw, 20px); font-weight:500; line-height:1.5; color:var(--pc-text); }

/* ---------- CAPACIDADES · LAYOUT ALTERNADO ---------- */
.pc-cap{ background:var(--bg); padding-block:var(--pc-section-py); }
.pc-cap--alt{ background:var(--bg-alt); }
.pc-row{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:64px;
  align-items:center;
}
.pc-cap--reverse .pc-text{ order:2; }
.pc-cap--reverse .pc-img-card{ order:1; }
.pc-text{ display:flex; flex-direction:column; gap:24px; }
.pc-eyebrow{ font-size:12px; font-weight:500; }
.pc-h3{
  font-size:clamp(26px, 2.6vw, 32px); font-weight:800; line-height:1.25;
  letter-spacing:-0.01em; color:var(--pc-text);
}
.pc-body{ font-size:16px; line-height:1.5; color:var(--pc-text); }
.pc-checklist{
  list-style:none; margin:8px 0 0; padding:0;
  display:flex; flex-direction:column; gap:20px;
}
.pc-checklist li{
  display:flex; align-items:center; gap:12px;
  font-size:16px; line-height:1.5; color:var(--pc-text);
}
.pc-check{
  width:24px; height:24px; border-radius:100px; flex-shrink:0;
  background:var(--pc-grad-check);
  display:inline-flex; align-items:center; justify-content:center;
}
.pc-img-card{
  background:var(--base-white); border:1px solid var(--pr-card-border); border-radius:24px; padding:20px;
  box-shadow:var(--shadow-card);
}
.pc-img{
  border-radius:16px; overflow:hidden; background:var(--pr-img-bg);
  height:440px;
}
.pc-img img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* ---------- SEGURIDAD ---------- */
.pc-security{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--pc-navy-sec); padding-block:var(--pc-section-py);
}
/* Capas Figma: base var(--navy-800) + textura op .60 (misma de "Por qué AFEX") */
.pc-security-bg{ position:absolute; inset:0; z-index:-1; opacity:.6; }
.pc-security-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.pc-sec-intro{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:64px;
  align-items:start; margin-bottom:56px;
}
.pc-sec-h2{
  font-size:clamp(32px, 5vw, 48px); font-weight:800; line-height:1.2;
  letter-spacing:-0.02em; color:var(--base-white);
}
.pc-sec-sub{ font-size:16px; line-height:1.5; color:var(--border); }
.pc-sec-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px;
}
.pc-sec-box{
  background:var(--pc-navy-sec); border-radius:16px; padding:24px 32px;
  display:flex; flex-direction:column; gap:8px;
  min-height:140px;
}
.pc-sec-box h3{ font-size:16px; font-weight:700; line-height:1.4; color:var(--base-white); }
.pc-sec-box p{ font-size:14px; line-height:1.5; color:var(--muted-2); }

/* ---------- LOGIN · CTA FINAL ---------- */
.pc-login{ background:var(--bg); padding-block:clamp(64px, 7vw, 80px); }
.pc-login-banner{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--pr-grad-banner); border-radius:32px;
  padding:clamp(28px, 3vw, 32px) clamp(28px, 4vw, 56px);
  display:grid; grid-template-columns:minmax(0,1fr) 412px; gap:48px;
  align-items:center;
}
/* Capas Figma: gradiente + imagen op .10 + velo #161e3f op .50 */
.pc-login-bg{ position:absolute; inset:0; z-index:-2; opacity:.1; }
.pc-login-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.pc-login-banner::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(22,30,63,.5);
}
.pc-login-left{ display:flex; flex-direction:column; gap:16px; }
.pc-eyebrow-login{
  background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2);
  color:var(--base-white); font-size:14px;
}
.pc-login-h2{
  font-size:clamp(32px, 5vw, 48px); font-weight:800; line-height:1.15;
  letter-spacing:-0.02em; color:var(--base-white);
}
.pc-login-sub{ font-size:16px; line-height:1.5; color:var(--border); max-width:580px; }
.pc-login-box{
  background:var(--base-white); border-radius:24px; padding:32px;
  display:flex; flex-direction:column; gap:20px;
}
.pc-field{ display:flex; flex-direction:column; gap:8px; }
.pc-field label{ font-size:14px; color:var(--pc-ink); }
.pc-field input{
  height:56px; padding:0 16px;
  border:1px solid var(--pr-card-border); border-radius:16px;
  background:var(--base-white);
  font-family:inherit; font-size:16px; color:var(--pc-ink);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.pc-field input::placeholder{ color:var(--muted); }
.pc-field input:focus-visible{
  outline:none; border-color:var(--green-mid);
  box-shadow:0 0 0 3px rgba(97,194,80,.2);
}
.pc-field.has-error input{ border-color:var(--red-500); }
.pc-field-error{ font-size:12px; color:var(--red-500); min-height:0; display:none; }
.pc-field.has-error .pc-field-error{ display:block; }
.pc-login-btn{ width:100%; }
.pc-login-btn.is-ok{ filter:saturate(.9); }
.pc-login-links{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pc-login-links a{ font-size:14px; font-weight:500; color:var(--pc-text); }
.pc-login-links a:hover{ text-decoration:underline; }
.pc-login-links .pc-link-green{ font-weight:700; color:var(--green-400); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px){
  .pc-row{ grid-template-columns:1fr; gap:32px; }
  /* Mobile/tablet: imagen siempre arriba, texto abajo */
  .pc-text{ order:2; }
  .pc-img-card{ order:1; }
  .pc-img{ height:360px; }
  .pc-stats-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 16px; }
  .pc-intro-inner{ grid-template-columns:1fr; gap:20px; }
  .pc-sec-intro{ grid-template-columns:1fr; gap:16px; }
  .pc-sec-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pc-login-banner{ grid-template-columns:1fr; gap:32px; padding:clamp(28px, 4vw, 40px); }
  .pc-login-box{ max-width:480px; }
  .pc-hero::before{
    background:linear-gradient(90deg, var(--bg-alt) 0%, rgba(255,255,255,0) 100%);
  }
}
@media (max-width: 768px){
  /* Hero (frame mobile: pad 72 · gap 20 · btn 48/16 · alto 536) */
  .pc-hero{ padding-block:72px; }
  .pc-hero::before{
    background:linear-gradient(90deg, var(--bg-alt) 0%, rgba(255,255,255,0) 100%);
  }
  .pc-hero-inner{ gap:20px; }
  .pc-hero .eyebrow{ padding:7px 15px 7px 13px; font-size:11px; line-height:1; }
  .pc-hero-title{ font-size:40px; line-height:1.1; }
  .pc-hero-sub{ font-size:16px; line-height:1.5; }
  .pc-hero-cta{ margin-top:8px; }
  .pc-hero-cta .pr-btn--xl{ width:100%; height:48px; font-size:16px; font-weight:500; }

  .pc-img{ height:300px; }
  .pc-sec-grid{ grid-template-columns:1fr; }
  .pc-sec-box{ min-height:0; }
}
@media (max-width: 480px){
  .pc-hero-title{ font-size:40px; }
  .pc-hero .pr-btn--xl{ width:100%; height:48px; font-size:16px; font-weight:500; }
  .pc-stats-grid{ grid-template-columns:1fr; gap:32px; }
  .pc-img-card{ padding:12px; }
  .pc-img{ height:240px; }
  .pc-checklist li{ align-items:flex-start; }
  .pc-checklist .pc-check{ margin-top:1px; }
  .pc-login-banner{ border-radius:24px; }
  .pc-login-box{ padding:24px; max-width:none; }
}
@media (max-width: 360px){
  .pc-hero-title{ font-size:34px; }
  .pc-h2, .pc-sec-h2, .pc-login-h2{ font-size:28px; }
  .pc-h3{ font-size:24px; }
}

/* ============================================================
   PÁGINA · PORTAL EXPRESS (.pe-*)
   ============================================================ */
:root{
  --pe-ink:var(--slate-800);
  --pe-text:var(--slate-700);
  --pe-hero-base:var(--navy-950);
  --pe-hero-grad:#141f4d;
  --pe-section-py:clamp(64px, 7vw, 96px);
}

/* ---------- HERO ---------- */
.pe-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--pe-hero-base);
  padding-block:clamp(56px, 6vw, 72px);
}
/* Capas Figma: base var(--navy-950) + imagen op .70 + gradiente transparente → #141f4d hacia la izquierda */
.pe-hero-bg{ position:absolute; inset:0; z-index:-2; opacity:.7; }
.pe-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center right; display:block; }
.pe-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(270deg, rgba(20,31,77,0) 0%, rgba(20,31,77,.6) 100%); /* frame: →#141f4d @0.60 */
}
.pe-hero-inner{ display:flex; flex-direction:column; gap:24px; }
.pe-eyebrow-hero{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.2);
  color:var(--base-white); font-size:12px; font-weight:500;
}
.pe-hero-title{
  font-size:clamp(40px, 6.5vw, 72px); font-weight:800; line-height:1.1;
  letter-spacing:-0.02em; color:var(--base-white); max-width:920px;
}
.pe-hero-sub{ font-size:16px; line-height:1.5; color:var(--border); max-width:560px; }
.pe-chips{
  list-style:none; margin:16px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:16px;
}
.pe-chips li{
  display:inline-flex; align-items:center;
  height:35px; padding:0 16px;
  background:rgba(255,255,255,.7); border-radius:var(--radius-pill);
  font-size:14px; font-weight:500; color:var(--card-darker); white-space:nowrap;
}

/* ---------- TÍTULOS ---------- */
.pe-h2{
  font-size:clamp(32px, 5vw, 48px); font-weight:800; line-height:1.2;
  letter-spacing:-0.02em; color:var(--pe-ink);
}

/* ---------- S1 · TARJETAS DE ACCESO ---------- */
.pe-access{ background:var(--bg-alt); padding-block:64px; }
.pe-access-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
.pe-access-card{
  display:grid; grid-template-columns:52px minmax(0,1fr) 40px;
  align-items:center; gap:16px;
  background:var(--base-white); border-radius:16px; padding:24px 32px;
  box-shadow:0 3px 6px rgba(0,0,0,.04);
  transition:transform var(--transition), box-shadow var(--transition);
}
.pe-access-card:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(32,43,89,.10); }
.pe-access-ic{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:16px;
  background:var(--navy-500); color:var(--base-white);   /* frame: #42466b + glifo blanco */
}
.pe-access-tx{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.pe-access-label{ font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--muted); }
.pe-access-title{ font-size:24px; font-weight:700; line-height:1.3; color:var(--pe-ink); }
.pe-access-caption{ font-size:12px; line-height:1.5; color:var(--pe-text); }
.pe-access-arrow{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--green-500); color:var(--base-white);  /* frame: #5aa03f */
  transition:transform var(--transition);
}
.pe-access-card:hover .pe-access-arrow{ transform:translateX(3px); }

/* ---------- S2 / S3 · BLOQUES TEXTO + IMAGEN ---------- */
.pe-split{ background:var(--bg); padding-block:var(--pe-section-py); }
.pe-split--alt{ background:var(--bg-alt); }
.pe-split-row{
  display:grid; grid-template-columns:600px minmax(0,1fr); gap:80px; align-items:center;
}
/* En S3 la imagen va a la izquierda */
.pe-split--reverse .pe-split-row{ grid-template-columns:minmax(0,1fr) 600px; }
.pe-split--reverse .pe-split-text{ order:2; }
.pe-split--reverse .pe-split-img{ order:1; }
.pe-split-text{ display:flex; flex-direction:column; gap:24px; }
.pe-split-sub{ font-size:16px; line-height:1.5; color:var(--pe-text); }
.pe-split-img{ border-radius:16px; overflow:hidden; aspect-ratio:568/424; }
.pe-split-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.pe-checklist{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:16px;
}
.pe-checklist li{
  display:flex; align-items:flex-start; gap:12px;
  font-size:14px; line-height:1.5; color:var(--pe-text);
}
/* frame: badge 32x32 r16 con fondo --green-50 y el check en --green-600 */
.pe-check{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:16px;
  background:var(--green-50); color:var(--green-600);
}
.pe-checklist li{ align-items:center; }
.pe-fineprint{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--border);
  font-size:12px; line-height:1.5; color:var(--muted);
}

/* ---------- ENCABEZADO CENTRADO (S4 y S6) ---------- */
.pe-center-head{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  text-align:center; margin-bottom:48px;
}

/* ---------- S4 · ANTES Y AHORA ---------- */
.pe-change{ background:var(--bg); padding-block:var(--pe-section-py); }
.pe-change-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px; align-items:start; }
.pe-change-card{
  background:var(--base-white); border:1px solid var(--pr-card-border); border-radius:24px;
  padding:32px; display:flex; flex-direction:column; gap:24px;
}
.pe-change-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.pe-change-title{ font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--muted); }
.pe-pill{
  display:inline-flex; align-items:center; height:24px; padding:0 12px;
  border-radius:var(--radius-pill); font-size:12px; font-weight:500; white-space:nowrap;
}
.pe-pill--grey{ background:var(--bg-alt); color:var(--muted); }
.pe-pill--green{ background:var(--green-50); color:var(--green-600); }
.pe-steps-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:24px;
}
.pe-steps-list li{ display:flex; align-items:flex-start; gap:16px; position:relative; }
/* Línea vertical que une los nodos, como en el frame */
/* Frame "segmento": rectángulo de 2x16 en #dce2ea, centrado bajo el nodo */
.pe-steps-list li:not(:last-child)::before{
  content:""; position:absolute; left:19px; top:44px; height:16px;
  width:2px; background:var(--slate-100);
}
.pe-node{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--base-white); color:var(--slate-500);   /* frame: #ffffff + icono #7e83a0 */
  border:1.5px dashed var(--slate-300);                   /* frame: #cbd5e1, dash 4-4 */
}
/* En la columna "Portal de Pagos" el borde es continuo: --navy-800 al 30% */
.pe-node--on{
  background:var(--navy-50); color:var(--navy-700);       /* frame: #dce2ea + icono #202b59 */
  border:1.5px solid rgba(26,37,83,.30);
}
.pe-node-tx{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.pe-node-tx strong{ font-size:14px; font-weight:500; line-height:1.4; color:var(--pe-ink); }
.pe-node-tx small{ font-size:12px; line-height:1.5; color:var(--pe-text); }
.pe-change-btn{ align-self:stretch; justify-content:center; margin-top:auto; }

/* ---------- S5 · TRANSPARENCIA ----------
   2026-08-13: se agregaron los bordes que faltaban contra el frame:
   separador punteado, botón de descarga sin relleno y sellos con contorno. */
.pe-proof{ background:var(--bg-alt); padding-block:var(--pe-section-py); }
.pe-proof-row{ display:grid; grid-template-columns:528px minmax(0,1fr); gap:80px; align-items:center; }
.pe-receipt{
  background:var(--base-white); border:1px solid var(--slate-300); border-radius:16px;  /* frame: #cbd5e1 */
  padding:32px; display:flex; flex-direction:column; gap:24px;
}
.pe-receipt-head{ display:flex; align-items:center; gap:12px; }
.pe-receipt-ic{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:var(--green-50); color:var(--green-600);    /* frame: badge-check 40 r20 */
}
.pe-receipt-tx{ display:flex; flex-direction:column; gap:2px; }
.pe-receipt-tx strong{ font-size:16px; font-weight:700; line-height:1.4; color:var(--pe-ink); }
.pe-receipt-tx small{ font-size:12px; line-height:1.5; color:var(--pe-text); }
.pe-receipt-rows{
  /* frame "separador": línea punteada #cbd5e1, dash 4-4 */
  margin:0; padding-top:24px; border-top:1px dashed var(--slate-300);
  display:flex; flex-direction:column; gap:16px;
}
.pe-receipt-rows > div{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.pe-receipt-rows dt{ font-size:14px; line-height:1.5; color:var(--pe-text); }
.pe-receipt-rows dd{ margin:0; font-size:14px; font-weight:700; line-height:1.5; color:var(--pe-ink); font-variant-numeric:tabular-nums; }
/* Es una muestra del comprobante, no un botón real: no lleva foco ni acción */
.pe-receipt-btn{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  /* frame "btn-descargar": sin relleno, borde #7e83a0 */
  height:40px; padding:0 20px; border:1px solid var(--slate-500);
  border-radius:var(--radius-pill);
  font-size:14px; font-weight:500; color:var(--navy-900); background:transparent;
}
.pe-proof-text{ display:flex; flex-direction:column; gap:16px; }
.pe-seals{
  list-style:none; margin:16px 0 0; padding:0;
  display:flex; flex-direction:column; gap:24px;
}
.pe-seals li{ display:flex; align-items:flex-start; gap:16px; }
.pe-seal-ic{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  background:var(--blue-50); color:var(--navy-500);      /* frame: #eff6ff + icono #42466b */
  border:1px solid var(--navy-300);                      /* frame: #565a7f */
}
.pe-seal-tx{ display:flex; flex-direction:column; gap:2px; }
.pe-seal-tx strong{ font-size:14px; font-weight:700; line-height:1.4; color:var(--pe-ink); }
.pe-seal-tx small{ font-size:12px; line-height:1.5; color:var(--pe-text); }

/* ---------- S6 · FAQ EN TARJETAS ---------- */
.pe-faq{ background:var(--bg); padding-block:var(--pe-section-py); }
.pe-faq-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
.pe-faq-card{
  background:var(--base-white); border:1px solid var(--pr-card-border); border-radius:16px;
  padding:32px; display:flex; flex-direction:column; gap:12px;
}
.pe-faq-ic{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:16px;
  background:var(--green-50); color:var(--green-600); margin-bottom:4px;
}
.pe-faq-card h3{ font-size:16px; font-weight:700; line-height:1.4; color:var(--pe-ink); }
.pe-faq-card p{ font-size:14px; line-height:1.5; color:var(--pe-text); }
/* En el frame la línea de contacto solo existe en la versión móvil */
.pe-faq-contact{ display:none; margin-top:32px; font-size:14px; line-height:1.5; color:var(--pe-text); }

/* ---------- CTA FINAL ---------- */
.pe-cta{ background:var(--bg-alt); padding-block:clamp(48px, 5vw, 64px); }
.pe-cta-banner{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--pr-grad-banner); border-radius:32px;
  padding:clamp(36px, 4vw, 52px) clamp(28px, 4vw, 56px);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px;
  align-items:center;
}
/* Capas Figma: gradiente + textura mapa op .10 + velo #161e3f op .50 */
.pe-cta-bg{ position:absolute; inset:0; z-index:-2; opacity:.1; }
.pe-cta-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.pe-cta-banner::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(22,30,63,.5);
}
.pe-cta-left{ display:flex; flex-direction:column; gap:16px; }
.pe-eyebrow-cta{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.2);
  color:var(--base-white); font-size:12px;
}
.pe-cta-h2{
  font-size:clamp(30px, 4.6vw, 48px); font-weight:800; line-height:1.15;
  letter-spacing:-0.02em; color:var(--base-white); max-width:752px;
}
.pe-cta-sub{ font-size:16px; line-height:1.5; color:var(--border); max-width:571px; }
.pe-btn-crear{ min-width:320px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px){
  /* Los splits pasan a una columna; en S3 la imagen vuelve arriba */
  .pe-split-row,
  .pe-split--reverse .pe-split-row{ grid-template-columns:1fr; gap:32px; }
  .pe-split--reverse .pe-split-text{ order:2; }
  .pe-split--reverse .pe-split-img{ order:1; }
  .pe-access-grid{ grid-template-columns:1fr; }
  .pe-change-grid{ grid-template-columns:1fr; gap:24px; }
  .pe-proof-row{ grid-template-columns:1fr; gap:40px; }
  .pe-faq-grid{ grid-template-columns:1fr; }
  .pe-cta-banner{ grid-template-columns:1fr; gap:32px; }
  .pe-btn-crear{ min-width:0; width:100%; max-width:420px; }
}
@media (max-width: 768px){
  /* Hero · frame mobile: pad 52 · gap 20 · titulo 40 sin cortes forzados */
  .pe-hero{ padding-block:52px; }
  .pe-hero-inner{ gap:20px; }
  .pe-eyebrow-hero{ font-size:11px; line-height:1; }
  .pe-hero-title{ font-size:40px; line-height:1.1; }
  .pe-hero-sub{ font-size:16px; line-height:1.5; }
  /* En mobile el título fluye, sin los saltos de línea del desktop */
  .pe-brd{ display:none; }

  /* Tarjetas de acceso: el frame mobile las apila y la flecha baja a la izquierda */
  .pe-access{ padding-block:48px; }
  .pe-access-card{
    grid-template-columns:52px minmax(0,1fr);
    grid-template-areas:"ic tx" "arrow arrow";
    padding:24px;
  }
  .pe-access-ic{ grid-area:ic; }
  .pe-access-tx{ grid-area:tx; }
  .pe-access-arrow{ grid-area:arrow; justify-self:start; margin-top:8px; }
  .pe-access-title{ font-size:20px; }

  .pe-change-card, .pe-receipt, .pe-faq-card{ padding:24px; }
  .pe-center-head{ margin-bottom:32px; }

  /* La línea de contacto del FAQ solo existe en el frame mobile */
  .pe-faq-contact{ display:block; }
}
@media (max-width: 480px){
  .pe-hero-title{ font-size:40px; }
  .pe-cta-banner{ border-radius:24px; }
  .pe-btn-crear{ max-width:none; height:56px; font-size:16px; }
  .pe-receipt-rows > div{ flex-direction:column; align-items:flex-start; gap:2px; }
}
@media (max-width: 360px){
  .pe-hero-title{ font-size:34px; }
  .pe-h2, .pe-cta-h2{ font-size:28px; }
  .pe-access-title{ font-size:18px; }
}

/* ============================================================
   HEADER MOBILE · AJUSTES (panel + logo + tabs Afex en panel)
   ============================================================ */
/* Opciones del panel: sin bold, 18px.
   .mp-link y .mp-row quedan fuera: son cards y filas con su propia escala. */
.mobile-panel-inner a:not(.mp-link):not(.mp-row){ font-weight:400; font-size:18px; }
.mp-group-btn{ font-family:inherit; }

/* Logo del header en mobile/tablet: 50px */
@media (max-width: 1024px){
  .brand-logo img{ height:50px; }

  /* Sticky mobile: el top-bar (Portal Clientes / Portal de Pagos) queda fijo
     junto al header. En desktop main.js desplaza el header-shell hacia arriba
     (top:-altura-del-top-bar, inline) para ocultarlo al scrollear; aquí lo
     forzamos a top:0 y mantenemos los enlaces visibles (sin la disolución --bar). */
  .header-shell{ top:0 !important; }
  .top-bar .container{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  /* El reflejo especular (::after) dibuja una línea blanca en el borde superior
     del header-shell; con top:0 queda sobre la barra navy. Se quita en mobile. */
  .header-shell::after{ box-shadow:none; }
}

/* Tabs de producto dentro del panel móvil — como desktop, a ancho completo */
.mobile-panel .product-tabs{
  display:flex;
  width:100%;
  height:48px;
  padding:5px;
  gap:2px;
  align-items:center;
  background:var(--base-white);
  border:1px solid var(--slate-200);
  border-radius:var(--radius-pill);
  box-shadow:0 3px 6px rgba(0,0,0,.08);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  margin-bottom:4px;
  flex-shrink:0;
}
.mobile-panel .product-tabs button{
  width:auto; min-width:0; height:36px; padding:0 2px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; letter-spacing:0; white-space:nowrap;
  border-radius:var(--radius-pill);
}
/* Anchos armonizados con las proporciones del frame (56/72/79/76) */
.mobile-panel .product-tabs button:nth-of-type(1){ flex:56 1 0; }
.mobile-panel .product-tabs button:nth-of-type(2){ flex:72 1 0; }
.mobile-panel .product-tabs button:nth-of-type(3){ flex:79 1 0; }
.mobile-panel .product-tabs button:nth-of-type(4){ flex:76 1 0; }
/* La lente liquid-glass (.pt-lens) es feature solo-desktop (position:absolute
   bajo @media min-width:1024). En el panel móvil queda en flujo (static) y
   empuja los tabs a la derecha. Se oculta para que los botones llenen el ancho. */
.mobile-panel .pt-lens{ display:none; }

/* Botones de portales en el panel móvil (Secondary Blue del DS, con sombra) */
.mp-actions .btn-primary{
  font-size:15px;
  width:90%;align-self:center;       /* 10% más cortos y centrados */
  box-shadow:0 6px 16px rgba(16,24,40,.12), 0 2px 4px rgba(16,24,40,.08); /* sombra suave que los eleva y separa */
}
.mp-actions .btn-primary:hover{
  box-shadow:0 10px 22px rgba(16,24,40,.16), 0 3px 6px rgba(16,24,40,.10);
}

/* ============================================================
   HOME UPDATE · HERO CAROUSEL (.hm-*)
   3 slides con fade secuencial + stagger por elemento.
   Reutiliza .container, .eyebrow.dark, .btn-cta, .trust-pill,
   .tarifa-badge, .tarifa-price, .tarifa-pills, .tarifa-divider.
   ============================================================ */
.hm-hero-carousel{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-areas:"hm-stack";
  min-height:clamp(480px, 56vw, 560px);
  background:var(--bg);
  padding:0;
  overflow:hidden;
}
.hm-hero-carousel::before{content:none}

/* --- Slide base (apilados en la misma celda grid para fade fluido) --- */
.hm-slide{
  grid-area:hm-stack;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:0;
  display:flex;
  align-items:center;
  transition:opacity .3s ease-in, filter .3s ease-in, transform .3s ease-in;
}
.hm-slide::before{
  content:"";
  position:absolute;inset:0;
  background:var(--hm-bg, var(--navy-950)) center/cover no-repeat;
  z-index:0;
  opacity:0;
  filter:blur(2px);
  transition:opacity .3s ease, filter .3s ease;
}
/* Slide 1: usa el export horneado (02-hero.webp trae el velo) → sin overlay CSS */
.hm-slide--light::after{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:none;
}
/* Overlay claro slide 3: foto visible con velo blanco suave (más fuerte sobre el texto) */
.hm-slide--3.hm-slide--light::after{
  background:
    linear-gradient(90deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.25) 45%, rgba(255,255,255,0) 70%),
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22));
}
/* Overlay slide 2 (Regulación CMF) — réplica exacta de los fills del frame Figma:
   imagen al 90% sobre blanco (= velo plano 10%) + gradiente blanco 60% desde la
   izquierda (sólido hasta 9%, se disuelve al 58%) + haze blanco desde la derecha. */
.hm-slide--2.hm-slide--light::after{
  background:
    linear-gradient(90deg, rgba(255,255,255,.60) 8.7%, rgba(255,255,255,0) 58%),
    linear-gradient(270deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10));
}
/* Slide 2 (frame hero-2): navy-800 + foto al 45%, sin velo */
.hm-slide--dark::after{content:none}
.hm-slide--dark{background:var(--card-darker)}
.hm-slide--dark::before{background-color:var(--navy-800)}
.hm-slide--1{--hm-bg:url('../img/02-hero.webp')} /* export horneado V3 */
/* Posición del fondo slide 1: deja ver la persona completa (con aire sobre la cabeza)
   en todos los ratios; el cover recorta desde este punto. */
.hm-slide--1::before{background-position:50% 28%}
/* Fondos de slides 2/3 diferidos: main.js agrega .hm-bgs en idle (post-LCP, pre-rotación) */
html.hm-bgs .hm-slide--2{--hm-bg:url('../img/02-hero-02.webp')}
html.hm-bgs .hm-slide--3{--hm-bg:url('../img/02-hero-03.webp')}

.hm-slide.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:1;
  transition:opacity .3s ease;
}
.hm-slide.is-active::before{opacity:1;filter:blur(0)}
/* Opacidad de foto por frame (slide 1 horneado al 100% · 2: .45 · 3: .90) */
.hm-slide--1.is-active::before{opacity:1}
.hm-slide--2.is-active::before{opacity:1}
.hm-slide--3.is-active::before{opacity:.9}

.hm-slide.is-leaving{
  opacity:0;
  filter:blur(3px);
  transform:scale(1.01);
  z-index:0;
  transition:opacity .3s ease-in, filter .3s ease-in, transform .3s ease-in;
}

.hm-slide .container{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 40%, 420px);
  gap:48px;
  align-items:center;
  width:100%;
}
/* Slide 2 (Regulación CMF): full-bleed a una columna, texto a la izquierda */
.hm-slide--2 .container{grid-template-columns:1fr}
.hm-slide--2 .hm-slide-content{max-width:760px} /* Hero/Left del frame Figma: 745px */
/* Slide 3 (Dólar): card de tasas con ancho fijo 400px (igual al frame hero-3) */
.hm-slide--3 .container{grid-template-columns:minmax(0,1fr) 400px}

/* --- Columna izquierda --- */
.hm-slide-content{display:flex;flex-direction:column;gap:24px;max-width:600px}
.hm-slide-content--wide{max-width:760px}
.hm-slide-content .hero-title{max-width:12ch}
.hm-slide-content .hero-sub{max-width:560px}
.hm-slide-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:8px}

/* Tamaños de titular por slide (escala DS · Figma) */
.hm-slide--1 .hero-title{font-size:clamp(40px, 6.6vw, 80px)}
.hm-slide--2 .hero-title{font-size:clamp(40px, 6vw, 72px);max-width:none}
.hm-slide--3 .hero-title{font-size:clamp(32px, 4.4vw, 60px);max-width:15ch}

/* Tema oscuro (slide 2): texto blanco (frame: base-white) */
.hm-slide--dark .hero-title{color:var(--base-white)}
.hm-slide--dark .hero-sub{color:var(--base-white)}
.hm-slide--dark .eyebrow.dark{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

.trust-pill.on-dark{
  background:rgba(255,255,255,.5);
  border-color:var(--border);
  color:var(--base-white);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* --- Columna derecha --- */
.hm-slide-visual{display:flex;align-items:center;justify-content:flex-end;width:100%}

/* Card de tasas (CSS puro · marco blanco como la card de $25) */
.hm-rates-card{
  width:100%;max-width:400px;
  background:linear-gradient(247deg, rgba(14,25,71,.9) 0%, rgba(32,43,89,.9) 100%);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:10px solid rgba(242,242,247,.92);
  border-radius:var(--radius-card);
  padding:32px;
  color:var(--base-white);
  display:flex;flex-direction:column;gap:24px;
  box-shadow:0 24px 60px rgba(10,22,40,.25);
}
.hm-rate-main{display:flex;align-items:baseline;gap:10px}
.hm-rate-cur{font-size:24px;font-weight:700;color:var(--green);line-height:1}
.hm-rate-val{font-size:clamp(64px, 9vw, 80px);font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hm-rate-note{font-size:14px;color:var(--text-card-muted);margin-top:-16px}
.hm-rate-list{display:flex;flex-direction:column;gap:16px;border-top:1px solid rgba(255,255,255,.14);padding-top:24px}
.hm-rate-row{display:flex;align-items:center;gap:16px}
.hm-rate-k{font-size:16px;font-weight:600;color:var(--green);min-width:44px}
.hm-rate-v{font-size:16px;font-weight:500;color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}

/* Card de tarifa $25 · reusa el componente .tarifa-card existente.
   Dentro del carousel se ancla a la celda (sin float infinito que pelee con el fade). */
.hm-slide .tarifa-card{animation:none;margin-left:auto}

/* --- Stagger por elemento --- */
.hm-slide-el{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .42s cubic-bezier(.22,.61,.36,1), transform .42s cubic-bezier(.22,.61,.36,1);
}
.hm-slide-el--5{transform:translateY(12px)}
.hm-slide.is-active .hm-slide-el{opacity:1;transform:none}
.hm-slide.is-active .hm-slide-el--1{transition-delay:.12s}
.hm-slide.is-active .hm-slide-el--2{transition-delay:.24s}
.hm-slide.is-active .hm-slide-el--3{transition-delay:.36s}
.hm-slide.is-active .hm-slide-el--4{transition-delay:.48s}
.hm-slide.is-active .hm-slide-el--4b{transition-delay:.56s}
.hm-slide.is-active .hm-slide-el--5{transition-delay:.58s}

/* --- Dots liquid glass --- */
.hm-dots{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:clamp(14px, 4vw, 30px); /* 10px más abajo */
  z-index:3;
  display:flex;
  align-items:center;
  gap:0; /* el botón de 48px ya da el espaciado táctil */
}
/* Botón táctil 48x48 (tap target Lighthouse); el dot visual vive en ::before */
.hm-dot{
  position:relative;
  width:48px;height:48px;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.hm-dot::before{
  content:"";
  width:10px;height:10px;
  border-radius:var(--radius-pill);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  /* tema claro por defecto (slides 1 y 3): dots navy */
  background:rgba(32,43,89,.18);
  border:1px solid rgba(32,43,89,.30);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55);
  transition:width .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.hm-dot:hover::before{background:rgba(32,43,89,.30)}
.hm-dot:focus-visible{outline:2px solid var(--green-cta);outline-offset:-10px;border-radius:var(--radius-pill)}
.hm-dot.is-active::before{
  width:34px;
  background:rgba(119,212,103,.55);
  border:1px solid rgba(46,182,44,.7);
  box-shadow:0 0 12px rgba(46,182,44,.35);
}
/* tema oscuro (slide 2): dots blancos liquid glass */
.hm-hero-carousel[data-theme="dark"] .hm-dot::before{
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4);
}
.hm-hero-carousel[data-theme="dark"] .hm-dot:hover::before{background:rgba(255,255,255,.32)}
.hm-hero-carousel[data-theme="dark"] .hm-dot.is-active::before{
  width:34px;
  background:rgba(119,212,103,.30);
  border:1px solid rgba(119,212,103,.50);
  box-shadow:0 0 12px rgba(119,212,103,.35);
}

/* --- Responsive --- */
@media (max-width:1024px){
  .hm-hero-carousel{min-height:0}
  .hm-slide .container{
    grid-template-columns:1fr;
    gap:24px;
    padding-block:clamp(40px,8vw,64px) clamp(72px,12vw,88px);
  }
  /* Mobile (Figma): texto primero, card DEBAJO */
  .hm-slide-content{order:1;max-width:none}
  .hm-slide-visual{order:2;justify-content:stretch}
  .hm-rates-card,.hm-slide .tarifa-card{max-width:none;width:100%;margin-inline:0}
  .hm-slide .tarifa-card{min-height:0;border-width:8px}
  .hm-dots{left:50%;transform:translateX(-50%)}
}
/* Dots del carrusel: 10px más abajo en mobile */
@media (max-width:768px){
  .hm-dots{bottom:6px}
}
@media (max-width:768px){
  /* Frames mobile: hero carousel a altura única 580px (≤580 spec) */
  .hm-hero-carousel{height:580px;min-height:0}
  .hm-slide .container{gap:16px;padding-block:24px}
  .hm-slide--2 .container{padding-block:0}
  .hm-slide--3 .container{padding-block:32px 20px}

  /* Tipografía hero (escala mobile: H1 40) */
  .hm-slide .hero-title,
  .hm-slide--1 .hero-title,
  .hm-slide--2 .hero-title,
  .hm-slide--3 .hero-title{font-size:40px;max-width:none;line-height:1.08}
  .hm-slide--1 .hero-title{line-height:1}
  /* Slide 2 mobile (frame hero-3-mobile): H1 44/1.04 · sub 20/29 angosta · foto corrida a la banda de la mujer */
  .hm-slide--2 .hero-title{font-size:44px;line-height:1.04}
  .hm-slide--3 .hero-title{line-height:1.05}
  .hm-slide--1 .hero-sub{font-size:14px;line-height:18px}
  .hm-slide--2 .hero-sub{font-size:20px;line-height:29px;font-weight:500;max-width:250px}
  .hm-slide--2::before{background-position:73% 50%}
  .hm-slide--3 .hero-sub{font-size:14px;line-height:1.05}
  .hm-slide--dark .hero-sub{color:var(--base-white)}
  .hm-slide--1 .eyebrow{font-size:11px;padding:7px 14px 7px 12px}

  /* Gaps de pila por frame */
  .hm-slide-content{gap:8px}
  .hm-slide--2 .hm-slide-content{gap:24px}
  .hm-slide-actions{margin-top:0}

  /* Frame hero-1 mobile: sin trust pills */
  .hm-slide--1 .trust-row{display:none}

  /* Botones por frame: h1=48/18 · h2=56/18 · h3=48/16 */
  .hm-slide .btn-cta.is-large{height:48px;font-size:18px;padding:10px 16px 10px 24px;gap:4px}
  .hm-slide--2 .btn-cta.is-large{height:56px;gap:8px}
  .hm-slide--3 .btn-cta.is-large{font-size:16px;gap:8px}
  .hm-slide .btn-cta.is-large .arrow{width:32px;height:32px}

  /* Card tarifa $25 (frame hero-1: pad 32 · marco 12 · pills junto al precio) */
  .hm-slide .tarifa-card{border-width:12px;padding:32px;min-height:0}
  .hm-slide .tarifa-top{
    display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:end;
  }
  .hm-slide .tarifa-badge{grid-column:1 / -1;justify-self:start}
  .hm-slide .tarifa-price .currency{font-size:32px}
  .hm-slide .tarifa-price .amount{font-size:64px}
  .hm-slide .tarifa-bottom h4{font-size:16px;font-weight:500}
  .hm-slide .tarifa-bottom p{font-size:14px;line-height:16px}

  /* Card tasas (frame hero-3: pad 32 · marco 12 · $905 56px · alto 179) */
  .hm-rates-card{border-width:12px;padding:32px;gap:0}
  .hm-rates-card .tarifa-badge{background:none;padding:0;font-size:14px;line-height:20px}
  .hm-rate-main{gap:8px}
  .hm-rate-val{font-size:56px}
  .hm-rate-note{font-size:12px;line-height:13px;margin-top:0}
  .hm-rate-list{flex-direction:row;gap:24px;border-top:0;padding-top:0}

}
@media (max-width:768px){
  .hm-slide-el{transform:translateY(10px)}
  .hm-slide-el--5{transform:translateY(10px)}
  .hm-slide.is-active .hm-slide-el--1{transition-delay:.08s}
  .hm-slide.is-active .hm-slide-el--2{transition-delay:.16s}
  .hm-slide.is-active .hm-slide-el--3{transition-delay:.24s}
  .hm-slide.is-active .hm-slide-el--4{transition-delay:.32s}
  .hm-slide.is-active .hm-slide-el--4b{transition-delay:.40s}
  .hm-slide.is-active .hm-slide-el--5{transition-delay:.40s}
  .hm-slide-actions{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){
  .hm-slide .container{gap:16px}
  /* Frames hero-2/3 mobile: padding lateral 24 (hero-1 usa --pad-x = 16) */
  .hm-slide--2 .container,
  .hm-slide--3 .container{padding-inline:24px}
}

@media (prefers-reduced-motion: reduce){
  .hm-slide,.hm-slide::before,.hm-slide-el,.hm-dot{transition:none}
  .hm-slide.is-leaving{filter:none;transform:none}
  .hm-slide-el{opacity:1;transform:none}
}

/* ============================================================
   FICHA — orden del hero por breakpoint (fiel al frame Figma)
   Desktop: H1 → hero → bajada → byline
   Mobile : H1 → bajada → byline → hero  (reorden vía order)
   ============================================================ */
.bf-head .bf-figure{ margin-top:32px; }
@media (max-width:768px){
  .bf-head .bf-figure{ order:1; }
}

/* ============================================================
   FICHA — refinamientos mobile (fieles al frame)
   · Mobile: solo el tag primario (los secundarios se ocultan)
   · Mobile: caption con borde bajo el hero; los badges del hero se ocultan
   ============================================================ */
.bf-figcaption{ display:none; }
@media (max-width:768px){
  .bf-tags .bf-tag:not(.bf-tag--primary){ display:none; }
  .bf-figure .bf-fig-badge{ display:none; }
  .bf-head .bf-figcaption{ order:1; }
  .bf-figcaption{
    display:block; margin-top:16px; padding-left:16px;
    border-left:3px solid var(--green);
    font-size:var(--fs-sm); line-height:1.45; color:var(--slate);
  }
}

/* ============================================================
   Header CTA en responsive (override autoritativo)
   - En todo el responsive el botón dice "Hazte Cliente".
   - En vistas reducidas (≤360px) se elimina la flecha → botón más compacto.
   ============================================================ */
@media (max-width: 1024px){
  .nav-actions .btn-cta span.cta-label-d{display:inline !important}  /* "Hazte Cliente" */
  .nav-actions .btn-cta span.cta-label-m{display:none !important}    /* oculta "Abrir una cuenta" */
  .nav-actions .btn-cta{height:48px !important}                      /* botón header 48px */
}
@media (max-width: 360px){
  .nav-actions .btn-cta span.cta-label-d{display:inline !important}  /* anula span:not(.arrow){display:none!important} (0,3,1) */
  .nav-actions .btn-cta span.cta-label-m{display:none !important}
  .nav-actions .btn-cta .arrow{display:none !important}              /* sin flecha → más chico */
  .nav-actions .btn-cta{padding:8px 16px !important;gap:0 !important}
}

/* ============================================================
   Homologar el FONDO de todos los CTA banners al estándar
   (fondo-cta-banner.webp + navy) — desktop y mobile.
   Antes: ef = gradiente plano; pr/pe = imagen al 10% + velo.
   ============================================================ */
.ef-cta-banner,
.pr-cta-banner,
.pe-cta-banner{
  background:
    url('../img/fondo-cta-banner.webp') center/cover no-repeat,
    var(--navy-950) !important;
  position:relative;
  overflow:hidden;
}
/* quitar las capas de imagen tenue propias de productos / portal-de-pagos */
.pr-cta-bg, .pe-cta-bg{ display:none !important; }
/* mismo glow sutil del .cta-banner estándar (esquinas verde/azul) */
.pr-cta-banner::before,
.pe-cta-banner::before{
  background:
    radial-gradient(45% 70% at 80% 0%, rgba(119,212,103,.18), transparent 60%),
    radial-gradient(45% 70% at 0% 100%, rgba(95,135,255,.14), transparent 60%) !important;
  z-index:0 !important;
  pointer-events:none !important;   /* el velo no debe bloquear clics en botones/enlaces */
}

/* fondo-cta-banner.webp está recortado a 1440×450 (sin la franja
   blanca del export original), por lo que `cover` funciona en
   desktop y mobile sin hacks de zoom. */


/* ============================================================
   SKELETON OFF (1/2) — cuando este archivo carga, estas reglas
   ganan la cascada sobre el <style> inline del <head>. Requieren
   ademas la clase js-ready que agrega main.js al terminar de
   inicializar: el skeleton se apaga cuando AMBOS llegaron.
   ============================================================ */
html.js-ready #page-skeleton{display:none !important}
/* Nota: el contenido se revela solo — la regla inline de ocultar exige
   html:not(.js-ready), asi que al llegar js-ready deja de aplicar y cada
   elemento vuelve a su visibilidad natural (ej: .mobile-panel cerrado). */
/* durante el destape (~300ms) se congelan TODAS las transiciones: los
   reveals visibles aparecen ya formados y nada queda a medio desvanecer */
html.sk-instant *{transition:none !important}

/* ============================================================
   FASE 5 · Refinamiento alta gama (2026-07)
   Micro-detalles transversales. No cambia marca ni layout.
   ============================================================ */

/* Selección de texto con identidad de marca */
::selection{ background:var(--navy); color:var(--base-white); }

/* Feedback físico al presionar — complementa los :hover existentes.
   Va al final del archivo para ganar al transform del hover mientras dura el click. */
.btn:active, .btn-ghost:active, .store-btn:active{ transform:translateY(1px) scale(.98); }

/* Titulares sin palabras huérfanas; párrafos con cortes de línea cuidados.
   Progressive enhancement: navegadores viejos lo ignoran sin efecto. */
h1, h2, h3, .hero-title{ text-wrap:balance; }
p{ text-wrap:pretty; }

/* ============================================================
   WHATSAPP FLOTANTE · disco liquid glass 64px (mismo lenguaje
   del header: blur + saturate) con glifo verde
   El .wa-dock es el contenedor fijo: lleva el disco (<a>) y la X de
   cerrar (<button>), que no puede ir anidada dentro del enlace.
   ============================================================ */
.wa-dock{
  position:fixed;
  right:24px;
  bottom:40px; /* separación pedida al borde inferior */
  z-index:900; /* sobre el contenido, bajo el skeleton (9999) */
  transition:opacity .2s ease, transform .2s ease;
}
.wa-dock[hidden]{display:none}
/* Estado de salida al pulsar la X (el JS lo pasa a [hidden] al terminar) */
.wa-dock.is-hidden{opacity:0; transform:scale(.85); pointer-events:none}

.wa-float{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(160deg, rgba(119,212,103,.92) 0%, rgba(97,188,87,.88) 55%, rgba(46,182,44,.90) 100%);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 12px 28px rgba(46,182,44,.30),
    inset 0 1px 1px rgba(255,255,255,.65),
    inset 0 -10px 18px rgba(32,43,89,.14);
  transition:transform var(--transition), box-shadow var(--transition);
}
/* Brillo superior tipo lente */
.wa-float::before{
  content:"";
  position:absolute;
  top:2px;left:8px;right:8px;height:45%;
  border-radius:50% 50% 42% 42%;
  background:linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0));
  pointer-events:none;
}
.wa-float img{display:block;width:100%;height:100%;position:relative}
.wa-float:hover{
  box-shadow:
    0 18px 36px rgba(46,182,44,.28),
    inset 0 1px 1px rgba(255,255,255,.85),
    inset 0 -10px 18px rgba(119,212,103,.22);
}
/* El "lift" del hover vive en el dock para que la X suba junto con el disco
   (antes estaba en .wa-float y la X se habría quedado atrás). */
.wa-dock:hover{transform:translateY(-4px) scale(1.04)}
.wa-dock:active{transform:translateY(-1px) scale(.98)}
.wa-dock.is-hidden:hover{transform:scale(.85)} /* no revivir al salir */
/* Fallback sin backdrop-filter: verde sólido */
@supports not (backdrop-filter: blur(1px)){
  .wa-float{background:linear-gradient(160deg, #77D467, #2EB62C)}
}

/* ---- X de cerrar · esquina superior derecha del disco ----
   Disco blanco translúcido de 22px, montado sobre el borde. Siempre
   visible pero atenuado (opacidad .7) para que no compita con el botón;
   al pasar el mouse o al recibir foco sube a opacidad plena. */
.wa-close{
  position:absolute;
  top:-3px;
  right:-3px;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(8px) saturate(160%);
  -webkit-backdrop-filter:blur(8px) saturate(160%);
  box-shadow:0 2px 6px rgba(32,43,89,.18);
  color:var(--green-700); /* verde oscuro del DS (#2a5a1f) */
  cursor:pointer;
  opacity:.7;             /* siempre visible, pero discreta */
  transition:opacity .18s ease, transform .18s ease, background .18s ease;
}
.wa-close svg{display:block}
/* Se afirma al acercarse el mouse o al llegar por teclado */
.wa-dock:hover .wa-close,
.wa-dock:focus-within .wa-close{opacity:1}
.wa-close:hover{background:#fff}
.wa-close:active{transform:scale(.9)}
.wa-close:focus-visible{
  opacity:1;
  outline:2px solid var(--green-700);
  outline-offset:2px;
}

@media (max-width:768px){
  /* Misma separación de 40px, pero respetando la barra inferior del
     navegador en iOS/Android (safe-area) para que no quede tapado. */
  .wa-dock{right:16px; bottom:calc(40px + env(safe-area-inset-bottom, 0px))}
  .wa-float{width:56px;height:56px}
}
/* Sin animación de salida si el usuario pidió menos movimiento */
@media (prefers-reduced-motion:reduce){
  .wa-dock, .wa-close{transition:none}
}

/* Red de seguridad: si HubSpot llegara a montar el chat igual (cambio de
   configuración en su panel), su iframe se sienta encima del botón de
   WhatsApp con z-index 2147483647 y se come los clicks. Lo dejamos fuera. */
#hubspot-messages-iframe-container{display:none !important}


/* ============================================================
   PÁGINA · CONVENIOS LANDING (.cv-*)
   ============================================================ */

/* ── Colores candy convenios — EXCEPCIÓN deliberada al DS ──
   Verificados nodo a nodo en Figma (2026-08-06). Definidos en Figma como
   estilos locales convenios/badge-*. NO mapear a tokens. NO alterar pares:
   texto pleno sobre tinte claro = AA garantizado. */
:root{
  --cv-muni-bg:#EAF2FE;   --cv-muni-bd:#93C5FD;   --cv-muni-fg:#1D4ED8;
  --cv-nuevos-bg:#EBFBF0; --cv-nuevos-bd:#86EFAC; --cv-nuevos-fg:#15803D;
  --cv-tarifas-bg:#E3FAFD;--cv-tarifas-bd:#67E8F9;--cv-tarifas-fg:#0E7490;
}

/* ---------- HERO ---------- */
.cv-hero{
  position:relative;
  height:520px;
  display:flex;
  align-items:center;
  color:var(--base-white);
  isolation:isolate;
  overflow:hidden;
  background:var(--navy-deep);
}
.cv-hero-photo{position:absolute;inset:0;z-index:-2}
.cv-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
/* Velo para legibilidad AA del H1 y la bajada sobre la foto. */
.cv-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, rgba(9,19,39,.86) 0%, rgba(9,19,39,.72) 46%, rgba(9,19,39,.36) 100%);
}
.cv-hero-inner{display:flex;flex-direction:column;gap:24px;max-width:760px}
.cv-hero h1{
  font-size:clamp(40px, 5.5vw, 64px);font-weight:800;line-height:1.1;
  letter-spacing:-0.02em;color:var(--base-white);
}
.cv-hero-sub{font-size:var(--fs-body-lg);line-height:1.5;color:var(--navy-50);max-width:560px}
/* Eyebrow glass sobre la foto */
.cv-eyebrow-glass{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  padding:8px 16px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--base-white);
}
.cv-eyebrow-glass .dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}

/* ---------- FILTROS · liquid glass ---------- */
.cv-pills-wrap{background:var(--base-white);padding-block:40px}
.cv-pills{
  display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;
}
.cv-pill{
  display:inline-flex;align-items:center;gap:8px;
  height:52px;padding-inline:24px;border-radius:26px;
  font-size:16px;font-weight:500;line-height:1;white-space:nowrap;
  border:1.5px solid transparent;
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 4px 12px rgba(10,22,40,.08);
  transition:transform var(--t-base), box-shadow var(--t-base), filter var(--t-base);
  cursor:pointer;
}
.cv-pill svg{width:14px;height:14px;flex-shrink:0}
.cv-pill:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 8px 18px rgba(10,22,40,.12)}
.cv-pill:focus-visible{outline:2px solid var(--navy-500);outline-offset:3px}

.cv-pill--todos{background:rgba(21,34,68,.85);color:var(--base-white);border-color:rgba(21,34,68,.85)}
.cv-pill--muni{
  background:linear-gradient(180deg, rgba(234,242,254,.65), rgba(219,234,254,.65));
  border-color:rgba(147,197,253,.6);color:var(--cv-muni-fg);
}
.cv-pill--nuevos{
  background:linear-gradient(180deg, rgba(235,251,240,.65), rgba(220,252,231,.65));
  border-color:rgba(134,239,172,.6);color:var(--cv-nuevos-fg);
}
.cv-pill--tarifas{
  background:linear-gradient(180deg, rgba(227,250,253,.65), rgba(207,250,254,.65));
  border-color:rgba(103,232,249,.6);color:var(--cv-tarifas-fg);
}
/* La activa siempre lee como seleccionada, sea cual sea su familia. */
.cv-pill.is-active{box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 2px rgba(21,34,68,.22), 0 4px 12px rgba(10,22,40,.10)}

/* Sin backdrop-filter: relleno sólido al 100%, sin blur. */
@supports not (backdrop-filter: blur(22px)){
  .cv-pill--todos{background:#152244}
  .cv-pill--muni{background:var(--cv-muni-bg)}
  .cv-pill--nuevos{background:var(--cv-nuevos-bg)}
  .cv-pill--tarifas{background:var(--cv-tarifas-bg)}
  .cv-eyebrow-glass{background:rgba(9,19,39,.72)}
}

/* ---------- BADGES DE CARD (tamaño S, sin glass) ---------- */
.cv-badge{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  height:30px;padding-inline:12px;border-radius:var(--radius-pill);
  font-size:13px;font-weight:600;line-height:1;white-space:nowrap;
  border:1px solid transparent;
}
.cv-badge svg{width:14px;height:14px;flex-shrink:0}
.cv-badge--muni{background:var(--cv-muni-bg);border-color:var(--cv-muni-bd);color:var(--cv-muni-fg)}
.cv-badge--nuevos{background:var(--cv-nuevos-bg);border-color:var(--cv-nuevos-bd);color:var(--cv-nuevos-fg)}
.cv-badge--tarifas{background:var(--cv-tarifas-bg);border-color:var(--cv-tarifas-bd);color:var(--cv-tarifas-fg)}

/* ---------- GRID ---------- */
.cv-grid-section{background:var(--base-white);padding-block:var(--section-py)}
.cv-grid-section .container{display:flex;flex-direction:column;gap:32px}
.cv-section-head{display:flex;flex-direction:column;gap:14px}
.cv-section-head h2{
  font-size:48px;font-weight:800;line-height:1.12;letter-spacing:-0.02em;color:var(--navy);
}
.cv-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:24px}

.cv-card{
  position:relative;
  background:var(--base-white);
  border-radius:var(--radius-card);
  border:1px solid var(--border);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform var(--transition), box-shadow var(--transition);
  cursor:pointer;
}
.cv-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(32,43,89,.10)}
.cv-card-image{position:relative;height:200px;background:var(--bg-alt);overflow:hidden}
.cv-card-image img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.cv-card:hover .cv-card-image img{transform:scale(1.04)}
/* Chip de logo: iniciales de la organización, sobre la foto */
.cv-chip{
  position:absolute;left:16px;bottom:16px;
  width:48px;height:48px;border-radius:50%;
  background:var(--base-white);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--navy);
  box-shadow:0 4px 12px rgba(10,22,40,.18);
}
.cv-card-body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.cv-card-title{
  font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-0.01em;color:var(--navy);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.cv-card-valid{font-size:14px;line-height:1.4;color:var(--slate-500);margin-top:auto}
.cv-card-read{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;color:var(--green-mid);
  transition:color .2s ease, gap .2s ease;align-self:flex-start;
}
.cv-card:hover .cv-card-read{color:var(--green-cta);gap:10px}
/* Card completa clickeable (mismo mecanismo que .bl-card) */
.cv-card-read::after{content:"";position:absolute;inset:0;z-index:1}

@media (max-width:1024px){
  .cv-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:768px){
  .cv-hero{height:480px}
  .cv-hero h1{font-size:clamp(32px, 8vw, 40px)}
  .cv-pills-wrap{padding-block:24px}
  .cv-pills{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-inline:var(--pad-x);
    margin-inline:calc(var(--pad-x) * -1);
    gap:8px;
  }
  .cv-pills::-webkit-scrollbar{display:none}
  .cv-pill{height:48px;padding-inline:16px;font-size:15px}
  .cv-grid{grid-template-columns:1fr}
  .cv-section-head h2{font-size:32px}
}


/* ============================================================
   PÁGINA · CONVENIOS FICHA (.cf-*)
   ============================================================ */

/* ---------- CABECERA ---------- */
.cf-top{background:var(--bg-alt);padding-top:48px;padding-bottom:var(--section-py)}
.cf-top > .container + .container{margin-top:40px}

/* Fondo del cuerpo del artículo.
   En el frame las tres primeras secciones (hero, imagen destacada y cuerpo)
   comparten el mismo #f2f2f7 y solo "Otros convenios" queda en blanco.
   El cuerpo usaba la clase genérica .section, transparente, y dejaba ver el
   blanco del body. Lleva además .cf-main para no tocar el .section del
   resto del sitio. */
.cf-main{
  background:var(--bg-alt);
  /* Frame "04 - Cuerpo Artículo": pad 24 arriba / 96 abajo en desktop,
     24 / 64 en mobile. Sin el padding inferior la banda gris terminaba
     pegada a la tarjeta de bases legales y el corte se veía brusco. */
  padding-top:24px;
  padding-bottom:clamp(64px, 6.7vw, 96px);
}
.cf-head{display:flex;flex-direction:column}
.cf-head .cv-badge{margin-bottom:24px}
.cf-title{
  font-size:clamp(40px, 5.5vw, 56px);font-weight:800;line-height:1.1;
  letter-spacing:-0.02em;color:var(--navy);max-width:980px;
}
.cf-sub{font-size:var(--fs-body-lg);line-height:1.5;color:var(--slate);max-width:760px;margin-top:24px}

/* ---------- IMAGEN DESTACADA ---------- */
.cf-figure{
  position:relative;border-radius:var(--radius-card);overflow:hidden;
  aspect-ratio:1248/520;background:var(--bg-alt);box-shadow:var(--shadow-card);
}
.cf-figure img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.cf-figure:hover img{transform:scale(1.02)}
.cf-fig-badge{
  position:absolute;display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:var(--radius-pill);
  background:rgba(10,22,40,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:var(--base-white);font-size:12px;font-weight:600;letter-spacing:.06em;
}
.cf-fig-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}
.cf-fig-badge--tl{top:24px;left:24px}
.cf-fig-badge--bl{bottom:24px;left:24px;background:rgba(46,182,44,.92)}

/* ---------- CUERPO 2 COLUMNAS ---------- */
.cf-body{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;
  column-gap:96px;align-items:start;
}
.cf-article{min-width:0}
.cf-article > * + *{margin-top:24px}
.cf-article h2{
  font-size:clamp(24px, 3vw, 32px);font-weight:700;line-height:1.3;
  letter-spacing:-0.01em;color:var(--navy);margin-top:48px;
}
.cf-article p{font-size:var(--fs-body);line-height:1.7;color:var(--slate)}

/* ---------- CÓMO FUNCIONA · 4 PASOS ---------- */
.cf-steps{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:16px}
.cf-step{
  background:var(--base-white);border:1px solid var(--border);border-radius:16px;
  padding:24px;display:flex;flex-direction:column;gap:8px;
  transition:transform var(--transition), box-shadow var(--transition);
}
.cf-step:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.cf-step-num{font-size:32px;font-weight:800;line-height:1;color:var(--green-cta);letter-spacing:-0.02em}
.cf-step-title{font-size:var(--fs-body);font-weight:700;color:var(--navy);line-height:1.35}
.cf-step-sub{font-size:var(--fs-sm);line-height:1.5;color:var(--slate-500)}

/* ---------- CHECKLIST ---------- */
.cf-checklist{display:flex;flex-direction:column;gap:12px}
.cf-check{
  display:flex;align-items:center;gap:16px;
  background:var(--base-white);border:1px solid var(--border);border-radius:16px;
  padding:16px 20px;font-size:var(--fs-body);color:var(--navy);font-weight:500;
  transition:transform var(--transition), box-shadow var(--transition);
}
.cf-check:hover{transform:translateX(4px);box-shadow:var(--shadow-card)}
.cf-check-icon{
  width:28px;height:28px;flex-shrink:0;border-radius:50%;
  background:var(--green-cta);display:inline-flex;align-items:center;justify-content:center;
}

/* ---------- CUPÓN ----------
   Frame "cupon-card": 832x114 · bg #f5fff9 · borde 2px dashed #77d467 ·
   r16 · padding 24/32 · gap 8. Los tres botones miden 240x40 con gap 24. */
.cf-coupon{
  /* #f5fff9 no tiene token en el DS; queda nombrado aquí para no repetirlo */
  --cf-coupon-bg:#f5fff9;
  border:2px dashed var(--green-300);border-radius:16px;
  background:var(--cf-coupon-bg);
  padding:24px 32px;display:flex;flex-direction:column;gap:8px;
}
/* Frame: 16px peso 400 en gris pizarra, sin versalitas ni tracking */
.cf-coupon-label{
  font-size:16px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--slate);
}
.cf-coupon-actions{display:flex;flex-wrap:wrap;gap:24px}
/* Los tres botones son del mismo ancho en el frame (240px). La columna del
   artículo es más angosta que el frame, así que reparten el ancho a partes
   iguales en vez de fijar 240 y desbordar. */
.cf-coupon-actions .cf-btn{
  flex:1 1 0;min-width:0;height:40px;min-height:0;padding:0 16px;font-size:14px;
  border:1px solid transparent;   /* iguala el ancho: en el frame el verde también lleva borde */
}
.cf-coupon-actions .cf-btn--primary{font-weight:700;border-color:var(--green-600)}
/* El borde se vuelve a declarar aquí: la regla de arriba .cf-coupon-actions
   .cf-btn (0,2,0) le ganaba a .cf-btn--ghost (0,1,0) y dejaba el borde
   transparente, así que los botones blancos se perdían sobre el cupón. */
.cf-coupon-actions .cf-btn--ghost{font-weight:500;border-color:var(--green-300)}
.cf-coupon-actions .cf-btn--ghost:hover{border-color:var(--green-600)}
.cf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 24px;border-radius:var(--radius-pill);
  font-size:var(--fs-body);font-weight:600;line-height:1;
  transition:background var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.cf-btn svg{width:16px;height:16px;flex-shrink:0}
.cf-btn:hover{transform:translateY(-1px)}
.cf-btn:focus-visible{outline:2px solid var(--navy-500);outline-offset:3px}
/* Es el mismo componente "Button · Primary Green · M" del DS que usa .pr-btn:
   degradado #4fae5a → #52bc48 y peso 500, no verde plano ni semibold. */
.cf-btn--primary{background:var(--pr-grad-green);color:var(--base-white);font-weight:500}
.cf-btn--primary:hover{filter:brightness(1.06)}
/* Frame "cbtn": fondo blanco, borde #77d467 y texto/icono en #479032 */
.cf-btn--ghost{background:var(--base-white);border:1px solid var(--green-300);color:var(--green-600)}
.cf-btn--ghost:hover{border-color:var(--green-600);background:var(--green-50)}

/* ---------- BANNER 2° LECTOR ----------
   Frame: 832x121 · bg #152244 · r24 · padding 32 · gap 24 · centrado vertical */
.cf-banner{
  background:var(--navy-900);border-radius:24px;color:var(--base-white);
  padding:32px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.cf-banner-txt{display:flex;flex-direction:column;gap:8px}
/* Frame: 12px, peso 400, blanco, tracking 2px (no verde ni semibold) */
.cf-banner-eyebrow{font-size:12px;font-weight:400;letter-spacing:2px;color:var(--base-white)}
/* El título es un <p> dentro de .cf-article, y esa regla (0,1,1) le ganaba a
   .cf-banner-title (0,1,0): lo dejaba gris pizarra y a 16px en vez de blanco
   y 24px. Se ancla también desde .cf-article para ganar la especificidad. */
.cf-banner-title,
.cf-article .cf-banner-title{
  font-size:24px;font-weight:700;line-height:1.3;
  letter-spacing:-0.3px;color:var(--base-white);
}

/* ---------- FAQ (sin acordeón) ---------- */
.cf-faq{display:flex;flex-direction:column;gap:24px}
.cf-faq-item{display:flex;flex-direction:column;gap:8px}
.cf-faq-q{font-size:var(--fs-body);font-weight:700;color:var(--navy);line-height:1.45}
.cf-faq-a{font-size:var(--fs-body);line-height:1.7;color:var(--slate)}
.cf-canal{font-size:var(--fs-body);line-height:1.7;color:var(--slate)}

/* ---------- BASES LEGALES ----------
   Frame: 832x193 · bg #f8fafc · borde 1px #e2e8f0 · r16 · pad 24 · gap 16.
   Sin el borde la tarjeta desaparecía: su fondo era el mismo --bg-alt
   (#f2f2f7) que el de la sección, así que no se distinguía del artículo. */
.cf-legal{
  /* #f8fafc no tiene token en el DS: es un paso más claro que --slate-50 */
  --cf-legal-bg:#f8fafc;
  background:var(--cf-legal-bg);
  border:1px solid var(--slate-200);border-radius:16px;padding:24px;
  display:flex;flex-direction:column;gap:16px;
}
/* Frame: 12px peso 400, tracking 2px, en --navy-300 (no bold) */
.cf-legal-label{font-size:12px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:var(--navy-300)}
.cf-legal p{font-size:var(--fs-sm);line-height:1.6;color:var(--navy-700)}
.cf-legal-updated{font-size:12px;color:var(--slate-500)}

/* ---------- SIDEBAR ---------- */
.cf-sidebar{min-width:0}
.cf-sidebar-card{
  background:var(--base-white);border:1px solid var(--border);border-radius:16px;
  padding:24px;display:flex;flex-direction:column;gap:16px;
  box-shadow:var(--shadow-card);
}
.cf-sidebar-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cf-stat{display:flex;flex-direction:column;gap:4px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.cf-stat:last-of-type{border-bottom:0;padding-bottom:0}
.cf-stat-value{font-size:32px;font-weight:800;line-height:1;color:var(--navy);letter-spacing:-0.02em}
.cf-stat-label{font-size:var(--fs-sm);line-height:1.4;color:var(--slate-500)}
.cf-mini{
  background:var(--bg-alt);border-radius:12px;padding:16px;
  display:flex;flex-direction:column;gap:12px;
}
.cf-mini-title{font-size:var(--fs-sm);font-weight:600;color:var(--navy)}
.cf-mini .cf-btn{width:100%}

/* ---------- RELACIONADOS ---------- */
/* Frame "07 - Otros Convenios": pad 96 arriba / 120 abajo en desktop,
   64 / 80 en mobile. */
.cf-related{background:var(--base-white);padding-top:clamp(64px, 6.7vw, 96px);padding-bottom:clamp(80px, 8.3vw, 120px)}
.cf-related .container{display:flex;flex-direction:column;gap:32px}

/* ── Ficha convenio · simplificación mobile (regla confirmada 2026-07-23) ──
   La mini-card del código solo convierte cuando el sidebar FLOTA junto al
   scroll (desktop). En mobile queda tras las bases legales: se oculta.
   NO es un bug — no "corregir" en futuros prompts. */
@media (max-width: 768px){
  .cf-coupon-label{ display:none }
  .cf-sidebar .cf-mini{ display:none }
}
@media (min-width: 769px){
  .cf-sidebar-card{ position:sticky; top:96px }
}

@media (max-width:768px){
  .cf-body{grid-template-columns:1fr;row-gap:48px}
  .cf-steps{grid-template-columns:1fr}
  .cf-banner{flex-direction:column;align-items:flex-start}
  .cf-banner .cf-btn{width:100%}
  .cf-coupon{padding:24px}
  .cf-coupon-actions{flex-direction:column;gap:8px}
  .cf-coupon-actions .cf-btn{flex:none;width:100%}
}

/* ============================================================
   === PÁGINA · PREGUNTAS FRECUENTES (.pf-*) ===
   Frames: desktop 1070:11296 · mobile 1070:11369
   ============================================================ */
:root{
  --pf-hero-grad:#141f4d;              /* velo del hero · sin token previo */
  --pf-section-py:clamp(56px, 6vw, 72px);
  /* Botón XL del CTA: el degradado del frame no existe en la paleta
     (el global .btn-cta usa --green-300 → #61bc57). Se declaran aquí
     para no hardcodear el hex dentro de la regla. */
  --pf-cta-btn-a:#4fae5a;
  --pf-cta-btn-b:#52bc48;
}

/* ---------- S1 · HERO ----------
   Tres capas exactas del frame, en este orden:
   1) base sólida var(--navy-950)
   2) foto <picture> absoluta, opacidad .70
   3) velo lineal transparente → var(--pf-hero-grad) al 60 %, navy a la izquierda
   Mismo patrón que .pe-hero (Portal de Pagos), con prefijo propio. */
.pf-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--navy-950);
  padding-block:56px;
}
.pf-hero-bg{ position:absolute; inset:0; z-index:-2; opacity:.7; }
.pf-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.pf-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(270deg, rgba(20,31,77,0) 0%, rgba(20,31,77,.6) 100%); /* frame: →#141f4d @0.60 */
}
.pf-hero-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.pf-hero-title{
  font-size:72px; font-weight:800; line-height:1.1; letter-spacing:0;
  color:var(--base-white); max-width:700px;
}
.pf-hero-sub{
  font-size:16px; line-height:1.5; color:var(--base-white); max-width:640px;
}
/* Chips: 8 px de aire propio sobre el gap de 24 → 32 al subtítulo (frame). */
.pf-chips{
  list-style:none; margin:0; padding:8px 0 0;
  display:flex; flex-wrap:wrap; gap:16px;
}
.pf-chips li{
  display:inline-flex; align-items:center;
  height:32px; padding-inline:16px;
  background:var(--base-white);
  border:1px solid var(--navy-700);
  border-radius:var(--radius-pill);
  font-size:14px; font-weight:500; line-height:20px;
  color:var(--navy-700); white-space:nowrap;
}

/* ---------- EYEBROW (pill) ----------
   Dos variantes del frame: sobre blanco (FAQ) y glass sobre el hero. */
.pf-eyebrow{
  gap:8px; height:32px; padding:0 16px;
  border:1px solid var(--navy-50);
  background:var(--base-white);
  font-size:12px; font-weight:500; line-height:16px; letter-spacing:1px;
  color:var(--navy-700);
}
.pf-eyebrow .dot{ width:8px; height:8px; background:var(--green-400); }
.pf-eyebrow-hero{
  background:rgba(255,255,255,.4);
  border-color:transparent;
  color:var(--base-white);
}

/* ---------- S2 · FAQ ---------- */
.pf-faq{ background:var(--base-white); padding-block:var(--pf-section-py); }
/* 384 + 64 + 800 = 1248 = .container. En fr para mantener la proporción
   exacta del frame a cualquier ancho intermedio. */
.pf-faq-grid{
  display:grid; grid-template-columns:384fr 800fr; gap:64px; align-items:start;
}

/* Columna izquierda · queda fija mientras se recorre el acordeón.
   112 = alto del header sticky + 24 de aire. */
.pf-head{
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  position:sticky; top:112px; align-self:start;
}
.pf-h2{
  font-size:48px; font-weight:800; line-height:1.2; letter-spacing:0;
  color:var(--navy-700);
}
.pf-head-tx{ font-size:16px; line-height:1.5; color:var(--navy-500); }

/* Columna derecha · acordeón */
.pf-acc{ display:flex; flex-direction:column; gap:48px; min-width:0; }
.pf-group{ display:flex; flex-direction:column; gap:16px; }
/* El texto ya viene en mayúsculas del frame: sin text-transform.
   Los cuatro subtítulos van a 20 px (en el frame el 4.º quedó en 18). */
.pf-group-tt{
  font-size:20px; font-weight:500; line-height:24px; letter-spacing:1px;
  color:var(--navy-700); margin:0;
}
.pf-items{ display:flex; flex-direction:column; }
/* El ítem sangra 16 px a cada lado para que el fondo de hover respire;
   el separador se dibuja con ::before para conservar el ancho exacto
   de la columna (800) y no aparecer nunca después del último ítem. */
.pf-item{
  position:relative;
  margin-inline:-16px; padding:24px 16px;
  border-radius:8px;
  transition:background-color var(--transition);
}
.pf-item + .pf-item::before{
  content:""; position:absolute; top:0; left:16px; right:16px;
  height:1px; background:var(--navy-50);
}
@media (hover:hover){
  .pf-item:hover{ background:var(--slate-50); }
}

.pf-q-wrap{ margin:0; font-size:inherit; font-weight:inherit; line-height:inherit; }
.pf-q{
  display:flex; width:100%; align-items:center; justify-content:space-between;
  gap:24px; padding:0; text-align:left;
}
.pf-q:focus-visible{
  outline:2px solid var(--navy-700); outline-offset:4px; border-radius:8px;
}
.pf-q-tx{ font-size:16px; font-weight:700; line-height:24px; color:var(--navy-700); }

/* Indicador +/− · los dos glifos van en CSS, sin imagen ni SVG.
   El glifo abierto es el signo menos U+2212. */
.pf-ind{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; flex-shrink:0; border-radius:50%;
  background:var(--navy-50); border:1px solid var(--navy-300);
  color:var(--navy-700); font-size:18px; font-weight:700; line-height:1;
  transition:background-color var(--transition), border-color var(--transition), color var(--transition);
}
.pf-ind::before{ content:"+"; }
.pf-q[aria-expanded="true"] .pf-ind{
  background:var(--green-400); border-color:var(--green-600); color:var(--base-white);
}
.pf-q[aria-expanded="true"] .pf-ind::before{ content:"−"; }

/* Panel: nunca display:none (el contenido debe quedar en el DOM).
   Cerrar = max-height 0 + overflow hidden; el JS anima con scrollHeight. */
.pf-a{ max-height:0; overflow:hidden; transition:max-height var(--transition); }
.pf-a-in{ display:flex; flex-direction:column; gap:16px; padding-top:16px; max-width:640px; }
.pf-a-in p{ margin:0; font-size:16px; line-height:1.5; color:var(--navy-500); }
.pf-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.pf-list li{
  position:relative; padding-left:16px;
  font-size:16px; line-height:1.5; color:var(--navy-500);
}
.pf-list li::before{
  content:""; position:absolute; left:0; top:10px;
  width:4px; height:4px; border-radius:50%; background:var(--green-400);
}
@media (prefers-reduced-motion: reduce){
  .pf-a{ transition-duration:0s; }
}

/* ---------- S3 · CTA FINAL ----------
   Reutiliza el banner global (.cta / .cta-banner / .cta-text / .cta-actions).
   Solo se declaran las diferencias del frame de esta página. */
.pf-cta .cta-banner{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:32px;
}
.pf-cta .cta-text{ max-width:622px; gap:20px; }
.pf-cta .cta-text h2{ font-size:clamp(32px, 5vw, 48px); font-weight:800; line-height:1.2; }
.pf-cta .cta-text p{ font-size:16px; color:var(--navy-50); }
.pf-cta .cta-actions{ flex:0 0 320px; width:320px; gap:16px; }
/* Botón XL del frame: 64 de alto, sin flecha ni ícono (los slots van vacíos). */
.pf-cta-btn{
  width:100%; height:64px; padding:0 24px; gap:0;
  font-size:18px; font-weight:500;
  border:1px solid var(--green-600); border-radius:var(--radius-pill);
  background:linear-gradient(90deg, var(--pf-cta-btn-a) 0%, var(--pf-cta-btn-b) 100%);
}
.pf-cta-btn:hover{
  background:linear-gradient(90deg, var(--pf-cta-btn-b) 0%, var(--pf-cta-btn-a) 100%);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .pf-faq-grid{ grid-template-columns:1fr; gap:32px; }
  .pf-head{ position:static; }
  .pf-cta .cta-banner{ flex-direction:column; align-items:stretch; }
  .pf-cta .cta-actions{ flex:none; width:100%; }
}
@media (max-width:768px){
  .pf-hero-title{ font-size:40px; }
  /* Frame mobile: 32 entre el bloque de texto y los chips + 8 del propio
     bloque = 40 (en desktop son 24 + 8 = 32). */
  .pf-chips{ padding-top:16px; }
  .pf-h2{ font-size:32px; }
  .pf-group-tt{ font-size:18px; }
  .pf-acc{ gap:40px; }
  .pf-q{ gap:16px; }
  .pf-a-in{ max-width:none; }
  .pf-cta .cta-banner{ padding:34px 24px; }
  .pf-cta .cta-text{ gap:24px; }
}
@media (max-width:480px){
  .pf-chips{ gap:8px; }
  .pf-item{ margin-inline:-12px; padding-inline:12px; }
  .pf-item + .pf-item::before{ left:12px; right:12px; }
}
@media (max-width:360px){
  .pf-q{ gap:12px; }
}