/* ===========================================================================
   IOplat — Landings de pais. Direccion C "Claridad estructural".
   Sistema compartido por las 7 landings (HN, SV, GT, NI, CR, PA, ES).

   Se carga DESPUES de /css/style.css mediante el hook $pageStylesHref de
   inc/header.php, y SOLO en las paginas que lo declaran: por eso puede
   reescribir la barra de navegacion y el pie globales sin afectar al resto
   del sitio. El contenido de la pagina vive dentro de .c-page y usa el
   prefijo `c-` en todas sus clases.

   Reglas del sistema (no negociar sin releer NOTES de la direccion):
     - Reticula de 12 columnas VISIBLE como elemento grafico.
     - Cero border-radius, cero sombras difusas: filetes y bloques solidos.
     - Archivo (eje de anchura) para display, IBM Plex Mono para senaletica.
     - El teal de marca #4A9B8E mide 3.02 sobre papel: NUNCA lleva texto.
       Sobre bloque teal el texto es tinta #131C24 (5.22).
     - Cero emojis en el contenido de la pagina.

   Contraste calculado con la formula WCAG 2.1 (todos los pares > 4.5):
     ink/paper 15.77 · ink-2/paper 6.62 · ink-3/paper 5.04 · teal-ink/paper 7.10
     blanco/navy 10.98 · gris/navy 6.19 · teal-soft/navy 6.55
     blanco/navy-deep 14.42 · gris/navy-deep 8.13 · teal-soft/navy-deep 8.60
     tinta/teal 5.22 · blanco/teal-deep 8.64 · tinta/soft 14.38
   =========================================================================== */

:root{
  /* superficies */
  --c-paper:#F4F5F5;
  --c-surface:#FFFFFF;
  --c-soft:#E9EBEA;
  /* tinta */
  --c-ink:#131C24;
  --c-ink-2:#4A5964;
  --c-ink-3:#5C6B75;
  /* marca */
  --c-navy:#2C3E50;
  --c-navy-deep:#1E2B37;
  --c-teal:#4A9B8E;
  --c-teal-ink:#1E5C52;
  --c-teal-deep:#20544B;
  --c-on-navy:#FFFFFF;
  --c-on-navy-2:#B9C4CD;
  --c-teal-soft:#9AD3C7;
  /* filetes */
  --c-rule:rgba(44,62,80,.22);
  --c-rule-soft:rgba(44,62,80,.13);
  --c-rule-faint:rgba(44,62,80,.075);
  --c-rule-invert:rgba(255,255,255,.18);
  /* metrica */
  --c-maxw:1272px;
  --c-pad:clamp(1.25rem, 4vw, 3.5rem);
  --c-sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --c-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --c-ease:cubic-bezier(.2,.7,.2,1);
  --c-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- base --- */
body{
  background:var(--c-paper);
  color:var(--c-ink);
  font-family:var(--c-sans);
  font-size:clamp(1rem, 0.94rem + 0.25vw, 1.0625rem);
  line-height:1.6;
  font-variant-numeric:tabular-nums;
}
.c-page :focus-visible,.nav :focus-visible,.footer :focus-visible{
  outline:2px solid var(--c-teal-ink);outline-offset:3px;
}
.footer :focus-visible{outline-color:var(--c-teal-soft)}
.c-page h1,.c-page h2,.c-page h3,.c-page h4{color:var(--c-ink)}
/* Solo el margen: poner tambien `color:inherit` aqui (0,1,1) ganaria a los
   componentes de una sola clase (.c-lead, .c-seck, .c-note) y los dejaria en
   tinta plena. A cambio, `p{color:var(--color-gray-600)}` de style.css sigue
   activo para cualquier <p> SIN color propio: por eso TODO parrafo del sistema
   declara el suyo (.c-card p, .c-callout p, .c-adv p, .c-faq .ans p, .c-cta p
   y los parrafos con clase). Anadir un <p> nuevo obliga a darle color. */
.c-page p{margin:0}

/* medida unica: contenido, barra de navegacion, pie y reticula comparten caja */
.c-wrap,.nav .container,.footer .container{
  width:100%;max-width:var(--c-maxw);margin-inline:auto;padding-inline:var(--c-pad);
}
.c-wrap{position:relative;z-index:1}
.c-band{position:relative;z-index:1}

/* ------------------------------------------------- reticula de 12 col. --- */
.c-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  max-width:var(--c-maxw);margin-inline:auto;padding-inline:var(--c-pad);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.c-grid i{border-left:1px solid var(--c-rule-faint);display:block}
.c-grid i:last-child{border-right:1px solid var(--c-rule-faint)}
.c-grid i:nth-child(n+5){display:none}
@media (min-width:900px){
  .c-grid{grid-template-columns:repeat(12,1fr)}
  .c-grid i:nth-child(n+5){display:block}
}

/* ------------------------------------------------------- senaletica ------ */
.c-mono{
  font-family:var(--c-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;line-height:1.4;
}
.c-display{
  font-weight:800;font-stretch:104%;letter-spacing:-.03em;line-height:.98;
  text-wrap:balance;overflow-wrap:break-word;
}

/* =================================================== BARRA GLOBAL ========= */
.nav{
  padding:0;
  background:rgba(244,245,245,.94);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--c-rule-soft);
  box-shadow:none;
}
.nav.scrolled{padding:0;background:rgba(244,245,245,.94);box-shadow:none}
.nav__inner{min-height:66px;gap:clamp(.75rem, 2vw, 2rem)}
.nav__logo img{height:28px}
/* Etiqueta de pais junto al logotipo: senaletica decorativa, el pais real
   viaja en el <title>, el <h1> y el hreflang. Sin var definida no imprime nada. */
.nav__logo::after{
  content:var(--c-country, "");
  font-family:var(--c-mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--c-teal-ink);border-left:1px solid var(--c-rule);
  margin-left:.7rem;padding-left:.7rem;line-height:1;
}
@media (max-width:479px){.nav__logo::after{content:""}}
.nav__link,.nav__dropdown-trigger{
  font-family:var(--c-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--c-ink-2);border-radius:0;padding:.5rem .55rem;
}
.nav__link:hover,.nav__link.active,.nav__dropdown-trigger:hover{
  color:var(--c-ink);background:transparent;box-shadow:inset 0 -2px 0 var(--c-teal-deep);
}
.nav__links{gap:.35rem}
.nav__dropdown-menu{
  border-radius:0;border:1px solid var(--c-rule-soft);box-shadow:none;
  background:var(--c-surface);
}
.nav__dropdown-menu::before{display:none}
.nav__dropdown-item{border-radius:0;color:var(--c-ink-2)}
.nav__dropdown-item:hover{background:var(--c-navy);color:var(--c-on-navy)}
.nav__dropdown-icon{border-radius:0;background:var(--c-soft);border:0}
.nav__dropdown-item:hover .nav__dropdown-icon{background:rgba(255,255,255,.14)}
.nav__dropdown-icon svg{stroke:var(--c-teal-ink)}
.nav__dropdown-item:hover .nav__dropdown-icon svg{stroke:var(--c-teal-soft)}
.nav__dropdown-label{font-size:.8125rem}
.nav__actions{gap:.5rem}
.nav .btn{
  border-radius:0;border-width:1px;
  font-family:var(--c-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  padding:.72rem 1.05rem;transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.nav .btn:hover{transform:none;box-shadow:none}
.nav .btn-outline{color:var(--c-ink);border-color:var(--c-rule)}
.nav .btn-outline:hover{background:var(--c-surface);border-color:var(--c-navy);color:var(--c-ink)}
.nav .btn-primary{background:var(--c-navy);border-color:var(--c-navy);color:var(--c-on-navy)}
.nav .btn-primary:hover{background:var(--c-teal-deep);border-color:var(--c-teal-deep)}
.nav__hamburger span{border-radius:0;background:var(--c-ink)}
.nav__mobile{background:var(--c-paper)}
.nav__mobile-link{
  border-radius:0;border-bottom:1px solid var(--c-rule-faint);
  font-family:var(--c-mono);font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-ink-2);padding:.85rem .25rem;
}
.nav__mobile-link:hover{background:transparent;color:var(--c-ink)}
.nav__mobile-divider{background:var(--c-rule)}
.nav__mobile-close{border-radius:0;background:var(--c-surface);border:1px solid var(--c-rule);color:var(--c-ink)}
.nav__mobile-close:hover{background:var(--c-soft);transform:none}
.nav__mobile-actions .btn{
  border-radius:0;border-width:1px;font-family:var(--c-mono);font-size:.75rem;
  letter-spacing:.12em;text-transform:uppercase;padding:1rem 1.25rem;
}
.nav__mobile-actions .btn-primary{background:var(--c-navy);border-color:var(--c-navy)}
.nav__mobile-actions .btn-outline{color:var(--c-ink);border-color:var(--c-rule)}
/* La senaletica en monoespaciada con espaciado ancho ocupa mas que la Inter del
   sitio: por debajo de 1152px el bloque de acciones se salia del margen (a 1024
   el boton "Crear Cuenta" quedaba cortado por el borde). Se pasa al menu de
   hamburguesa antes, no se aprieta la tipografia. A 1152px la barra vuelve a
   caer exactamente sobre el margen de la reticula con la etiqueta de pais mas
   larga ("EL SALVADOR"). */
@media (max-width:1151.98px){
  .nav__links,.nav__actions{display:none}
  .nav__hamburger{display:flex}
}

/* =================================================== HERO ================= */
.c-hero{padding-block:clamp(6.5rem, 13vw, 9.5rem) clamp(2rem, 5vw, 4rem);position:relative}
.c-hero__grid{display:grid;gap:clamp(2.25rem, 5vw, 3.5rem)}
@media (min-width:960px){
  .c-hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:clamp(2rem, 4vw, 4.5rem)}
}
.c-eyebrow{
  display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;
  color:var(--c-ink-3);margin-bottom:clamp(1.5rem, 3vw, 2.25rem);
}
.c-eyebrow .sq{width:9px;height:9px;background:var(--c-teal);flex:0 0 auto}
.c-eyebrow .sep{width:clamp(1.5rem, 6vw, 4rem);height:1px;background:var(--c-rule)}
@media (max-width:600px){.c-eyebrow .sep{display:none}}
.c-page h1.c-h1{
  font-size:clamp(2.55rem, 7.2vw, 5.35rem);
  margin-bottom:clamp(1.35rem, 3vw, 1.9rem);
}
.c-h1 .mark{position:relative;color:var(--c-teal-ink);white-space:nowrap}
.c-h1 .mark::after{
  content:"";position:absolute;left:0;right:0;bottom:.055em;height:.085em;
  background:var(--c-teal);transform-origin:0 50%;
}
.c-lead{
  font-size:clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem);
  line-height:1.55;color:var(--c-ink-2);max-width:34em;
  padding-left:1.1rem;border-left:2px solid var(--c-teal);
}
.c-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.75rem, 3.5vw, 2.5rem)}
.c-note{display:flex;align-items:center;gap:.7rem;margin-top:1.5rem;color:var(--c-ink-3)}

/* botones del sistema C (independientes de .btn global) */
.c-btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--c-mono);font-size:.75rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  padding:1rem 1.5rem;border:1px solid transparent;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.c-btn svg{flex:0 0 auto;transition:transform .3s var(--c-ease)}
.c-btn:hover svg{transform:translateX(4px)}
.c-btn--solid{background:var(--c-navy);color:var(--c-on-navy)}
.c-btn--solid:hover{background:var(--c-teal-deep)}
.c-btn--line{background:transparent;color:var(--c-ink);border-color:var(--c-rule)}
.c-btn--line:hover{border-color:var(--c-navy);background:var(--c-surface)}
.c-btn--invert{background:var(--c-surface);color:var(--c-ink)}
.c-btn--invert:hover{background:var(--c-teal-soft)}
.c-btn--ghost{background:transparent;color:var(--c-on-navy);border-color:var(--c-rule-invert)}
.c-btn--ghost:hover{border-color:#fff}

/* ficha tecnica fiscal: la pieza que cambia en cada pais */
.c-spec{background:var(--c-surface);border:1px solid var(--c-rule-soft);position:relative}
.c-spec::before,.c-spec::after{
  content:"";position:absolute;width:12px;height:12px;border:1px solid var(--c-teal-deep);
}
.c-spec::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.c-spec::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.c-spec__head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1rem 1.25rem;background:var(--c-navy);color:var(--c-on-navy);
}
.c-spec__head b{font-weight:600}
.c-spec__head span{color:var(--c-teal-soft)}
.c-spec dl{display:grid;grid-template-columns:minmax(0,1fr)}
.c-spec .row{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:.5rem 1rem;padding:.8rem 1.25rem;border-bottom:1px solid var(--c-rule-faint);
}
.c-spec .row:last-child{border-bottom:0}
.c-spec dt{
  color:var(--c-ink-3);font-family:var(--c-mono);font-size:.6875rem;
  letter-spacing:.11em;text-transform:uppercase;
}
.c-spec dd{
  margin:0;font-weight:600;font-size:.9375rem;text-align:right;
  color:var(--c-ink);word-break:break-word;
}
.c-spec dd em{
  font-style:normal;font-family:var(--c-mono);font-size:.8125rem;
  font-weight:500;color:var(--c-teal-ink);
}
.c-spec__foot{
  padding:.9rem 1.25rem;background:var(--c-teal);color:var(--c-ink);
  display:flex;align-items:center;gap:.6rem;
}

/* =================================================== CIFRAS =============== */
.c-stats{background:var(--c-navy-deep);color:var(--c-on-navy);position:relative;overflow:hidden}
.c-stats::after{
  content:"";position:absolute;inset:0;background-image:var(--c-grain);
  opacity:.05;pointer-events:none;
}
.c-stats__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));position:relative;z-index:1}
@media (min-width:820px){.c-stats__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.c-stat{
  padding:clamp(1.5rem, 3.5vw, 2.5rem) clamp(1rem, 2vw, 1.5rem);
  border-left:1px solid var(--c-rule-invert);
}
.c-stat:first-child{border-left:0}
@media (max-width:819px){
  .c-stat:nth-child(odd){border-left:0}
  .c-stat:nth-child(n+3){border-top:1px solid var(--c-rule-invert)}
}
.c-stat b{
  display:block;font-size:clamp(2rem, 5vw, 3.1rem);font-weight:800;font-stretch:104%;
  letter-spacing:-.035em;line-height:1;margin-bottom:.5rem;
}
.c-stat span{
  display:block;color:var(--c-on-navy-2);font-family:var(--c-mono);
  font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
}

/* =================================================== INDICE ============== */
.c-toc{padding-block:clamp(2.5rem, 5vw, 4rem)}
.c-toc__title{color:var(--c-ink-3);margin-bottom:1.25rem}
.c-toc ol{border-top:1px solid var(--c-rule-soft)}
.c-toc li{border-bottom:1px solid var(--c-rule-soft)}
.c-toc a{
  display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto;align-items:center;gap:1rem;
  padding:.95rem 0;color:var(--c-ink-2);
  transition:color .22s ease,padding .3s var(--c-ease);
}
.c-toc a:hover{color:var(--c-ink);padding-inline-start:.6rem}
.c-toc a .n{font-family:var(--c-mono);font-size:.75rem;color:var(--c-teal-ink);letter-spacing:.08em}
.c-toc a .t{font-size:clamp(1.05rem, 2.4vw, 1.4rem);font-weight:600;letter-spacing:-.015em}
.c-toc a .a{color:var(--c-ink-3);display:flex}
.c-toc a:hover .a{color:var(--c-teal-ink)}

/* =================================================== SECCIONES =========== */
/* `section{padding-block:5rem}` de style.css se anula por componente, NO con
   `.c-page section` (0,1,1): esa forma ganaria a .c-hero y .c-sec (0,1,0) y
   dejaria el titular del hero debajo de la barra fija. */
.c-page section{scroll-margin-top:84px}
.c-stats,.c-cta{padding-block:0}
.c-sec{padding-block:clamp(3.25rem, 8vw, 6.5rem)}
/* translucida a proposito: la reticula fija se sigue leyendo bajo el papel */
.c-sec--surface{background:rgba(255,255,255,.74);border-block:1px solid var(--c-rule-soft)}
.c-sechead{
  display:grid;gap:1rem;
  padding-bottom:clamp(1.75rem, 4vw, 3rem);margin-bottom:clamp(1.75rem, 4vw, 3rem);
  border-bottom:1px solid var(--c-rule);
}
@media (min-width:820px){
  .c-sechead{grid-template-columns:minmax(0,4rem) minmax(0,1fr);gap:clamp(1rem, 3vw, 2.5rem);align-items:start}
}
.c-secn{
  font-family:var(--c-mono);font-weight:600;font-size:clamp(1.6rem, 3.4vw, 2.4rem);
  line-height:1;color:var(--c-teal-ink);letter-spacing:-.02em;
}
.c-page .c-sect{font-size:clamp(1.75rem, 4.2vw, 3rem);max-width:22ch}
.c-seck{color:var(--c-ink-3);margin-top:.9rem;max-width:52ch}

/* 01 ventajas */
.c-cols3{display:grid;gap:1px;background:var(--c-rule-soft)}
@media (min-width:780px){.c-cols3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.c-card{
  background:var(--c-paper);
  padding:clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 1.9rem);
  display:grid;gap:1rem;align-content:start;
}
.c-sec--surface .c-card{background:var(--c-surface)}
.c-card__id{display:flex;align-items:center;justify-content:space-between;gap:1rem;color:var(--c-ink-3)}
.c-card__icon{color:var(--c-teal-ink);display:flex}
.c-page .c-card h3{font-size:clamp(1.125rem, 2.2vw, 1.375rem);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.c-card p{color:var(--c-ink-2);font-size:.9375rem;line-height:1.65}

/* 02 marco fiscal */
.c-fiscal{display:grid;gap:clamp(1.75rem, 4vw, 3rem)}
@media (min-width:900px){.c-fiscal{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem, 4vw, 4rem)}}
.c-blkh{
  display:flex;align-items:baseline;gap:.75rem;
  padding-bottom:.9rem;margin-bottom:1.25rem;border-bottom:2px solid var(--c-navy);
}
.c-blkh .k{font-family:var(--c-mono);font-size:.75rem;letter-spacing:.12em;color:var(--c-teal-ink)}
.c-page .c-blkh h3{font-size:clamp(1.15rem, 2.4vw, 1.5rem);font-weight:700;letter-spacing:-.02em}
.c-reqs li{
  display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.85rem;align-items:start;
  padding:.85rem 0;border-bottom:1px solid var(--c-rule-faint);
}
.c-reqs li:last-child{border-bottom:0}
.c-reqs svg{color:var(--c-teal-ink);margin-top:.18rem}
.c-reqs b{font-weight:600}
.c-reqs code{
  font-family:var(--c-mono);font-size:.8125rem;background:var(--c-soft);
  padding:.1rem .35rem;color:var(--c-teal-ink);word-break:break-word;
}
.c-tablewrap{overflow-x:auto}
table.c-rates{width:100%;border-collapse:collapse;min-width:min(100%,320px)}
table.c-rates th,table.c-rates td{
  text-align:left;padding:.85rem .5rem;border-bottom:1px solid var(--c-rule-faint);vertical-align:baseline;
}
table.c-rates th{font-weight:600;font-size:.9375rem;color:var(--c-ink)}
table.c-rates th:first-child,table.c-rates td:first-child{padding-left:0}
table.c-rates td:last-child{
  text-align:right;padding-right:0;font-family:var(--c-mono);font-size:.8125rem;
  color:var(--c-teal-ink);white-space:nowrap;
}
table.c-rates caption{
  text-align:left;color:var(--c-ink-3);padding-bottom:.75rem;
  font-family:var(--c-mono);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;
}
.c-callout{
  margin-top:clamp(1.75rem, 4vw, 2.75rem);background:var(--c-teal);color:var(--c-ink);
  padding:clamp(1.25rem, 3vw, 1.75rem);display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
}
.c-callout p{color:var(--c-ink);font-weight:600;font-size:clamp(1.0625rem, 2.2vw, 1.3rem);letter-spacing:-.015em;flex:1 1 16rem}
.c-callout .c-mono{color:var(--c-ink)}

/* 03 modulos como indice tabular */
.c-mods{border-top:1px solid var(--c-rule)}
.c-mod{
  display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem 1.5rem;
  padding:clamp(1.15rem, 2.4vw, 1.5rem) 0;border-bottom:1px solid var(--c-rule-soft);
  position:relative;
  transition:background-color .3s ease,padding-inline .3s var(--c-ease),color .3s ease;
}
@media (min-width:780px){
  .c-mod{grid-template-columns:3.75rem 2rem minmax(0,10rem) minmax(0,1fr) 1.5rem;align-items:center}
}
.c-mod__n{font-family:var(--c-mono);font-size:.75rem;color:var(--c-ink-3);letter-spacing:.06em}
.c-mod__i{color:var(--c-teal-ink);display:flex}
.c-mod__t{font-size:clamp(1.15rem, 2.2vw, 1.35rem);font-weight:700;letter-spacing:-.022em;line-height:1.15}
.c-mod__d{color:var(--c-ink-2);font-size:.9375rem;line-height:1.6}
.c-mod__d em{
  display:block;font-style:normal;font-family:var(--c-mono);font-size:.625rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--c-ink-3);margin-top:.4rem;
}
.c-mod__a{color:var(--c-ink-3);display:flex;justify-content:flex-end;transition:transform .3s var(--c-ease)}
@media (max-width:779px){
  .c-mod{grid-template-columns:3.5rem minmax(0,1fr);row-gap:.4rem}
  .c-mod__n{grid-column:1;grid-row:1;align-self:center}
  .c-mod__i{grid-column:2;grid-row:1;justify-self:start}
  .c-mod__t{grid-column:1 / -1;grid-row:2}
  .c-mod__d{grid-column:1 / -1;grid-row:3}
  .c-mod__a{display:none}
}
@media (hover:hover){
  .c-mod:hover{background:var(--c-navy);color:var(--c-on-navy);padding-inline:clamp(.75rem, 2vw, 1.25rem)}
  .c-mod:hover .c-mod__n,.c-mod:hover .c-mod__d,.c-mod:hover .c-mod__a{color:var(--c-on-navy-2)}
  .c-mod:hover .c-mod__i,.c-mod:hover .c-mod__d em{color:var(--c-teal-soft)}
  .c-mod:hover .c-mod__a{transform:translateX(3px)}
}

/* 04 confianza */
.c-trust{display:grid;gap:clamp(2rem, 4vw, 3rem)}
@media (min-width:900px){
  .c-trust{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem, 5vw, 4.5rem);align-items:start}
}
.c-figs{display:grid;gap:1px;background:var(--c-rule-soft);border:1px solid var(--c-rule-soft)}
.c-fig{background:var(--c-paper);padding:clamp(1.35rem, 3vw, 1.9rem)}
.c-fig b{
  display:block;font-size:clamp(2.4rem, 6vw, 3.6rem);font-weight:800;font-stretch:104%;
  letter-spacing:-.04em;line-height:1;color:var(--c-teal-ink);
}
.c-fig span{display:block;color:var(--c-ink-2);margin-top:.5rem;font-size:.9375rem}
.c-adv{display:grid;gap:1px;background:var(--c-rule-soft);border:1px solid var(--c-rule-soft)}
@media (min-width:560px){.c-adv{grid-template-columns:repeat(2,minmax(0,1fr))}}
.c-adv > li{
  background:var(--c-paper);padding:clamp(1.25rem, 2.6vw, 1.6rem);
  display:grid;gap:.7rem;align-content:start;
}
.c-page .c-adv h3{font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;display:flex;align-items:center;gap:.6rem}
.c-adv h3 svg{color:var(--c-teal-ink);flex:0 0 auto}
.c-adv p{color:var(--c-ink-2);font-size:.9063rem;line-height:1.6}

/* 05 preguntas frecuentes */
.c-faq{border-top:1px solid var(--c-rule)}
.c-faq details{border-bottom:1px solid var(--c-rule-soft)}
.c-faq summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:2.75rem minmax(0,1fr) 1.5rem;gap:1rem;
  align-items:baseline;padding:1.35rem 0;
}
.c-faq summary::-webkit-details-marker{display:none}
.c-faq summary .n{font-family:var(--c-mono);font-size:.75rem;color:var(--c-teal-ink)}
.c-faq summary .q{font-size:clamp(1.0625rem, 2.1vw, 1.25rem);font-weight:600;letter-spacing:-.02em;line-height:1.35}
.c-faq summary .x{position:relative;width:14px;height:14px;justify-self:end;align-self:center}
.c-faq summary .x::before,.c-faq summary .x::after{
  content:"";position:absolute;background:var(--c-ink-2);transition:transform .3s var(--c-ease);
}
.c-faq summary .x::before{left:0;right:0;top:6px;height:2px}
.c-faq summary .x::after{top:0;bottom:0;left:6px;width:2px}
.c-faq details[open] summary .x::after{transform:rotate(90deg)}
.c-faq details[open] summary .q{color:var(--c-teal-ink)}
.c-faq .ans{padding:0 0 1.6rem;display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:780px){.c-faq .ans{padding-left:3.75rem;max-width:60ch}}
.c-faq .ans p{color:var(--c-ink-2);line-height:1.7}

/* 06 cobertura */
.c-geo{display:grid;gap:1px;background:var(--c-rule-soft);border:1px solid var(--c-rule-soft)}
@media (min-width:520px){.c-geo{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:860px){.c-geo{grid-template-columns:repeat(4,minmax(0,1fr))}}
.c-geo a{
  background:var(--c-surface);padding:clamp(1.1rem, 2.4vw, 1.5rem);
  display:grid;gap:.45rem;transition:background-color .25s ease,color .25s ease;
}
.c-geo a:hover{background:var(--c-navy);color:var(--c-on-navy)}
.c-geo a:hover .iso{color:var(--c-teal-soft)}
.c-geo a:hover .st{color:var(--c-on-navy-2)}
.c-geo .iso{
  font-family:var(--c-mono);font-size:1.5rem;font-weight:600;letter-spacing:.04em;
  color:var(--c-teal-ink);line-height:1;
}
.c-geo .nm{font-weight:600;letter-spacing:-.01em}
.c-geo .st{
  font-family:var(--c-mono);font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--c-ink-3);
}
.c-geo a[aria-current="page"]{background:var(--c-navy);color:var(--c-on-navy)}
.c-geo a[aria-current="page"] .iso,.c-geo a[aria-current="page"] .st{color:var(--c-teal-soft)}

/* =================================================== CIERRE ============== */
.c-cta{background:var(--c-teal-deep);color:#fff;position:relative;overflow:hidden}
.c-cta::after{
  content:"";position:absolute;inset:0;background-image:var(--c-grain);opacity:.06;pointer-events:none;
}
.c-cta__in{
  padding-block:clamp(3rem, 7vw, 5.5rem);position:relative;z-index:1;
  display:grid;gap:clamp(1.75rem, 4vw, 2.5rem);
}
@media (min-width:900px){
  .c-cta__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:clamp(2rem, 5vw, 4rem)}
}
.c-page .c-cta h2{font-size:clamp(1.9rem, 4.6vw, 3.2rem);max-width:18ch;margin-top:1rem;color:#fff}
.c-cta__k{color:var(--c-teal-soft)}
.c-cta p{color:#DCEAE6;margin-top:1rem;font-size:clamp(1rem, 2vw, 1.15rem)}
.c-cta__actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* =================================================== PIE GLOBAL ========== */
.footer{
  position:relative;z-index:1;
  background:var(--c-navy-deep);color:var(--c-on-navy-2);
  font-family:var(--c-sans);
}
.footer__grid{gap:clamp(2rem, 4vw, 3rem)}
.footer__brand img{height:28px}
.footer__brand p{color:var(--c-on-navy-2);font-size:.9063rem;line-height:1.65}
.footer__heading{
  font-family:var(--c-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:#fff;
}
.footer__link{color:var(--c-on-navy-2);font-size:.875rem}
.footer__link:hover{color:var(--c-teal-soft)}
/* El pie global pinta "Crear Cuenta Gratis" con un color en atributo style
   (#4A9B8E): mide 3.33 sobre el pie actual y 4.38 sobre este, o sea nunca
   llega a AA. Se corrige aqui, sin tocar inc/footer.php, que es compartido
   por todas las paginas del sitio. Teal claro sobre navy profundo: 8.60. */
.footer__link[style*="color:var(--color-primary)"]{color:var(--c-teal-soft) !important}
.footer__newsletter{gap:0;border:1px solid var(--c-rule-invert)}
.footer__newsletter .form-input{
  border-radius:0;border:0;background:rgba(255,255,255,.07);color:#fff;
  padding:.85rem .9rem;font-size:.875rem;
}
.footer__newsletter .form-input::placeholder{color:var(--c-on-navy-2)}
.footer__newsletter .form-input:focus{
  box-shadow:none;outline:2px solid var(--c-teal-soft);outline-offset:-2px;
}
.footer__newsletter .btn{
  border-radius:0;border:0;background:var(--c-teal-deep);color:#fff;
  font-family:var(--c-mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;padding:.85rem 1.1rem;
}
.footer__newsletter .btn:hover{background:var(--c-teal);color:var(--c-ink);box-shadow:none;transform:none}
@media (max-width:480px){.footer__newsletter{flex-direction:column}}
.footer__newsletter-msg{font-family:var(--c-mono);letter-spacing:.06em}
.footer__bottom{border-top:1px solid var(--c-rule-invert)}
.footer__bottom p{color:var(--c-on-navy-2)}
.footer__socials a{border-radius:0;background:rgba(255,255,255,.06)}
.footer__socials a:hover{background:var(--c-teal-deep)}
.footer__social-link svg{fill:var(--c-on-navy-2)}

/* =================================================== MOVIMIENTO ========== */
@keyframes cRiseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cRuleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.c-hero .c-eyebrow,.c-hero .c-h1,.c-hero .c-lead,.c-hero .c-actions,.c-hero .c-note,.c-hero .c-spec{
  animation:cRiseIn .8s var(--c-ease) backwards;
}
.c-hero .c-eyebrow{animation-delay:.05s}
.c-hero .c-h1{animation-delay:.13s}
.c-hero .c-lead{animation-delay:.22s}
.c-hero .c-actions{animation-delay:.3s}
.c-hero .c-note{animation-delay:.36s}
.c-hero .c-spec{animation-delay:.28s}
.c-h1 .mark::after{animation:cRuleIn .7s var(--c-ease) .55s backwards}

/* El estado oculto SOLO existe si hay JS y el usuario no pidio menos movimiento:
   sin JS la pagina entera es visible sin depender del observador. */
html.c-js .c-rv{opacity:0;transform:translateY(14px)}
html.c-js .c-rv.is-in{
  opacity:1;transform:none;
  transition:opacity .75s var(--c-ease) var(--d,0s),transform .75s var(--c-ease) var(--d,0s);
}

@media (prefers-reduced-motion: reduce){
  .c-page *,.c-page *::before,.c-page *::after{
    animation-duration:.001ms !important;animation-delay:0s !important;transition-duration:.001ms !important;
  }
  html.c-js .c-rv{opacity:1 !important;transform:none !important}
}

@media print{
  .c-grid,.nav,.c-cta{display:none}
  body{background:#fff}
}