/* ════════════════════════════════════════════════════════════
   NARVA VISAS — hoja de estilos
   Marca: verde oliva #636B2F · negro · blanco (formal)
   Tipografía: Instrument Serif (display) + Instrument Sans (texto)
   ════════════════════════════════════════════════════════════ */

/* ── tipografías alojadas en el propio sitio ──────────────────
   Servidas desde Cloudflare (mismo origen, sin saltos a Google)
   y cacheadas un año por _headers. Subset latin. */
@font-face{
  font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/instrument-serif-400.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/instrument-serif-400-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/instrument-sans-400.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/instrument-sans-500.woff2') format('woff2');
}
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/instrument-sans-600.woff2') format('woff2');
}

:root{
  /* color */
  --paper:#FAFAF5;       /* blanco cálido */
  --paper-2:#EFEFE2;     /* crema oliva */
  --ink:#171A0F;         /* negro con calidez oliva */
  --ink-60:#4C5140;
  --dark:#1B1E11;        /* secciones oscuras (negro-oliva de marca) */
  --dark-deep:#12140A;
  --acc:#636B2F;         /* VERDE OLIVA de marca — acentos y texto grande */
  --acc-mid:#7F8A3E;     /* decorativo: líneas, sellos, puntos */
  --acc-text:#4D5424;    /* texto pequeño sobre fondos claros (AA) */
  --acc-l:#C9D48D;       /* oliva claro para fondos oscuros */
  --line:#DEDFCC;
  --line-acc:#C2C7A0;
  --line-dark:rgba(250,250,245,.14);
  --wa:#15773B;          /* verde WhatsApp accesible (blanco 5.6:1) */
  --wa-hover:#0F5C2E;
  --danger:#B4552D;

  /* tipografía */
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Instrument Sans',system-ui,sans-serif;

  /* métricas */
  --wrap:1160px;
  --r:16px;
  --sh:0 1px 2px rgba(23,26,15,.05),0 12px 32px -16px rgba(23,26,15,.18);
  --sh-lg:0 2px 4px rgba(23,26,15,.06),0 28px 60px -24px rgba(23,26,15,.35);
  --ease:cubic-bezier(.22,.8,.3,1);
}

/* En secciones oscuras los acentos cambian solos al oliva claro */
.dark,.final,.tbar,.ft{
  --acc:var(--acc-l);
  --acc-mid:#B7C177;
  --acc-text:var(--acc-l);
}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.65;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--acc)}
.sec--soft h2 em{color:var(--acc-text)}
.dark h2 em,.final h2 em{color:var(--acc-mid)}
p{margin:0 0 1em}
a{color:inherit}
svg{display:block}
.i{width:20px;height:20px;fill:currentColor;flex:none}
[hidden]{display:none!important}

.wrap{width:min(100% - 2.75rem,var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 2.75rem,780px)}

/* anclas: dejan espacio para el header sticky */
#visas,#proceso,#por-que,#asesor,#casos,#faq,#form,#contenido{scroll-margin-top:84px}

.skip{
  position:absolute;left:-999px;top:0;z-index:200;background:var(--ink);color:var(--paper);
  padding:.8rem 1.2rem;border-radius:0 0 10px 0;text-decoration:none;font-weight:600;font-size:14px;
}
.skip:focus{left:0}

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

/* accesibilidad de foco */
:focus-visible{outline:2.5px solid var(--acc);outline-offset:3px;border-radius:4px}

/* selección de texto con el color de marca */
::selection{background:var(--acc);color:#fff}

/* estado de atención en vivo (lo rellena app.js en hora de Ecuador) */
.atencion{font-weight:600}
.atencion--abierto{color:#5DE28A}
.atencion--abierto::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#5DE28A;margin-right:.35rem;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(93,226,138,.7);animation:latido 2.2s infinite;
}
@keyframes latido{70%{box-shadow:0 0 0 8px rgba(93,226,138,0)}100%{box-shadow:0 0 0 0 rgba(93,226,138,0)}}
.con__card .atencion--abierto{color:var(--acc-text)}
.con__card .atencion--abierto::before{background:var(--acc)}

/* barra de desplazamiento discreta y a tono */
@supports (scrollbar-color: auto){
  html{scrollbar-color:var(--line-acc) transparent;scrollbar-width:thin}
}

/* modo de alto contraste de Windows: los elementos decorativos no deben
   convertirse en manchas ilegibles */
@media (forced-colors: active){
  .btn{border:1px solid currentColor}
  .visa,.tst,.precio,.cform,.lead{border:1px solid currentColor}
  .route,.route-dot,.vhero__fallback,.vhero__velo{display:none}
}

/* ── utilidades tipográficas ── */
.eyebrow{
  font:600 11.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-60);margin:0 0 1.2rem;display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--acc-mid);flex:none}
.eyebrow--gold{color:var(--acc-mid)}

/* ── botones ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  font:600 15.5px/1 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;
  padding:1.05rem 1.7rem;border-radius:12px;border:1.5px solid transparent;
  white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,color .2s;
}
.hd__ctaShort{display:none}
.btn--wa{
  background:var(--wa);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 10px 24px -10px rgba(15,92,46,.65);
}
.btn--wa:hover{background:var(--wa-hover);transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 16px 30px -12px rgba(15,92,46,.7)}
.btn--wa:active{transform:translateY(0) scale(.99)}
.btn--line{border-color:var(--line);color:var(--ink);background:transparent}
.btn--line:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn--compact{padding:.72rem 1.15rem;font-size:14px;border-radius:10px}
.btn--block{width:100%}
.btn--xl{padding:1.25rem 2.2rem;font-size:17px;border-radius:14px}
.btn--chip{
  background:#fff;border-color:var(--line);color:var(--ink);
  padding:.85rem 1.3rem;font-size:14.5px;border-radius:99px;
  justify-content:space-between;gap:.9rem;
}
.btn--chip:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:var(--sh)}
.btn--chip .visa__arrow{color:var(--acc-text)}
.btn--chip:hover .visa__arrow{transform:translateX(4px)}
.i--arrow{transition:transform .2s var(--ease)}
.btn:hover .i--arrow{transform:translateX(4px)}

/* ── header ── */
.hd{
  position:sticky;top:0;z-index:90;
  background:var(--paper); /* fallback para navegadores sin color-mix */
  background:color-mix(in srgb,var(--paper) 96%,transparent);
  border-bottom:1px solid transparent;
  transition:border-color .3s,box-shadow .3s,transform .35s var(--ease);
}
@media (min-width:1021px){
  .hd{
    background:var(--paper);
    background:color-mix(in srgb,var(--paper) 90%,transparent);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
}
.hd.stuck{border-color:var(--line);box-shadow:0 12px 32px -28px rgba(23,26,15,.5)}
/* Se oculta al bajar y reaparece al subir: más pantalla para el contenido
   y evita el choque del header claro sobre las secciones oscuras. */
.hd.hide{transform:translateY(-100%)}
/* …pero reaparece si el teclado le da foco a algo dentro */
.hd.hide:focus-within{transform:none}
.hd__in{display:flex;align-items:center;gap:2.2rem;padding:.9rem 0}
/* Flecha para volver al sitio desde la landing de pauta.
   Discreta a propósito: quien llega por un anuncio no debe tener
   una salida llamativa, pero quien navega desde el sitio sí debe poder volver. */
.volver{
  display:inline-flex;align-items:center;gap:.35rem;flex:none;
  font:600 13.5px var(--sans);color:var(--ink-60);text-decoration:none;
  border:1px solid var(--line);border-radius:99px;
  padding:.5rem .9rem .5rem .7rem;margin-right:.9rem;
  transition:color .2s,border-color .2s,background .2s;
}
.volver svg{width:16px;height:16px;flex:none;transition:transform .2s var(--ease)}
.volver:hover{color:var(--ink);border-color:var(--acc);background:var(--paper-2)}
.volver:hover svg{transform:translateX(-3px)}

.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.brand__logo{height:44px;width:auto;display:block}
.brand--ft .brand__logo{height:52px}
/* sello tipográfico de respaldo (se mantiene para el favicon) */
.brand__seal{width:38px;height:38px;color:var(--ink)}
.brand__seal svg{width:100%;height:100%}
.brand__name{font-family:var(--serif);font-size:1.45rem;letter-spacing:.01em}
.brand__name em{color:var(--acc)}
.hd__nav{display:flex;gap:1.7rem;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--ink-60)}
.hd__nav a{text-decoration:none;transition:color .2s;padding:.4rem 0}
.hd__nav a:hover{color:var(--ink)}

/* ── hero ── */
.hero{position:relative;padding:4.8rem 0 5.2rem;overflow:hidden}
.hero__routes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.route{fill:none;stroke:rgba(99,107,47,.3);stroke-width:1.3;stroke-dasharray:2 7}
.route-dot{fill:var(--acc-mid)}
.hero__grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:4.5rem;align-items:center}
h1{font-size:clamp(2.7rem,5.6vw,4.35rem);margin-bottom:1.35rem}
.hero__sub{font-size:1.16rem;color:var(--ink-60);max-width:54ch}
.hero__sub strong{color:var(--ink);font-weight:600}
.hero__cta{display:flex;gap:.9rem;flex-wrap:wrap;margin:2rem 0 1.7rem}
.hero__proof{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin:0;padding:0;font-size:14px;color:var(--ink-60)}
.hero__proof li{display:flex;align-items:center;gap:.5rem}
.hero__proof li::before{
  content:"";width:15px;height:15px;flex:none;background:var(--acc);
  -webkit-mask:var(--mask-check) center/contain no-repeat;
          mask:var(--mask-check) center/contain no-repeat;
}
:root{
  --mask-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* formulario del hero */
.lead{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:1.9rem 1.9rem 1.6rem;box-shadow:var(--sh-lg);outline:none;
}
.lead::before{content:"";position:absolute;inset:0 0 auto;height:4px;border-radius:20px 20px 0 0;background:linear-gradient(90deg,var(--acc-mid),var(--acc))}
.lead__title{font-size:1.75rem;margin-bottom:.3rem}
.lead__sub{font-size:14px;color:var(--ink-60);margin-bottom:1.4rem}
.fld{display:block;margin-bottom:1.05rem}
.fld__t{display:block;font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);margin-bottom:.45rem}
.fld__t small{text-transform:none;letter-spacing:0;font-weight:400}
.fld input,.fld select{
  width:100%;padding:.9rem 1rem;font:400 16px var(--sans);color:var(--ink);
  background:var(--paper);border:1.5px solid var(--line);border-radius:10px;
  transition:border-color .18s,box-shadow .18s,background .18s;
  appearance:none;-webkit-appearance:none;
}
.fld select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%234C5140' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:16px;
  padding-right:2.6rem;
}
.fld select:invalid{color:var(--ink-60)}          /* placeholder ≠ valor elegido */
.fld input:focus,.fld select:focus{outline:none;border-color:var(--ink);background:#fff;box-shadow:0 0 0 3.5px rgba(99,107,47,.22)}
.fld .err{border-color:var(--danger);box-shadow:0 0 0 3.5px rgba(180,85,45,.15)}
.fld__msg{display:block;font:600 12.5px/1.4 var(--sans);color:var(--danger);margin-top:.4rem}
.lead__done{
  font-size:14px;font-weight:500;color:var(--ink);text-align:center;
  background:var(--paper-2);border:1px solid var(--line);border-radius:10px;
  padding:.75rem .9rem;margin:.9rem 0 0;
}
.lead__done a{color:var(--acc-text);font-weight:600}
.lead__legal{font-size:12.5px;color:var(--ink-60);text-align:center;margin:.9rem 0 0}
.lead__legal a{color:var(--ink)}
.lead__stamp{
  position:absolute;top:-1.15rem;right:1.4rem;transform:rotate(6deg);
  font:700 10px/1.35 var(--sans);letter-spacing:.14em;text-align:center;color:var(--acc-text);
  border:1.5px solid var(--acc-mid);border-radius:8px;padding:.45rem .6rem;background:var(--paper);
}

/* ── barra de confianza ── */
.tbar{background:var(--dark);color:var(--paper)}
.tbar__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px}
.tbar__i{
  display:flex;align-items:center;gap:.9rem;padding:1.35rem 1.4rem;
  border-left:1px solid var(--line-dark);text-decoration:none;
}
.tbar__i:first-child{border-left:0}
.tbar__i .i{width:24px;height:24px;color:var(--acc-mid)}
.tbar__i b{display:block;font-size:14.5px;font-weight:600;letter-spacing:.01em}
.tbar__i span{font-size:13px;color:rgba(250,250,245,.62)}
.tbar__i--link{transition:background .2s}
.tbar__i--link:hover{background:rgba(250,250,245,.06)}
.tbar__i--link span{color:var(--acc-mid)}

/* ── secciones ──
   content-visibility deja fuera del primer pintado lo que está más abajo.
   contain-intrinsic-size reserva el alto para que la barra de scroll no salte. */
.sec,.dark,.final,.ckl,.dest{content-visibility:auto;contain-intrinsic-size:auto 700px}
.sec{padding:6.2rem 0}
.sec--soft{background:var(--paper-2);border-block:1px solid var(--line)}
.shead{max-width:52ch;margin-bottom:3.4rem}
.shead h2{font-size:clamp(2rem,4vw,3rem)}
.shead--dark h2{color:var(--paper)}
.shead__sub{margin-top:1.1rem;font-size:1.08rem;color:rgba(250,250,245,.72);max-width:60ch}
.shead__note{margin-top:1.1rem;font-size:1.05rem;color:var(--ink-60);max-width:58ch}

/* ── visas por destino ── */
.visas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.visa{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.9rem 1.7rem 1.5rem;display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s;
}
.visa:hover{transform:translateY(-5px);border-color:var(--line-acc);box-shadow:var(--sh-lg)}
.visa:focus-within{outline:2.5px solid var(--acc);outline-offset:3px}
.visa__flag{width:52px;margin-bottom:1.3rem;filter:saturate(.85)}
.visa__flag svg{width:100%;height:auto;border-radius:5px;box-shadow:0 2px 8px rgba(23,26,15,.18)}
.visa h3{font-size:1.65rem;margin-bottom:.55rem}
.visa h3 span{font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--acc-text);vertical-align:middle;margin-left:.4rem;border:1px solid var(--acc-mid);border-radius:99px;padding:.28rem .55rem;white-space:nowrap}
.visa>p{font-size:15px;color:var(--ink-60)}
.visa__price{
  background:var(--paper-2);border:1px solid var(--line);border-radius:12px;
  padding:.9rem 1.1rem;margin:.2rem 0 .4rem;
}
.visa__price b{font-family:var(--serif);font-size:1.9rem;font-weight:400;color:var(--acc);line-height:1}
.visa__price span{font:600 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);margin-left:.5rem}
.visa__price small{display:block;font-size:12.5px;color:var(--ink-60);margin-top:.45rem;line-height:1.5}
.visa__price small b{color:var(--ink);font-weight:600}
.visa__video{width:100%;border-radius:10px;margin:.7rem 0 .2rem;display:block}
.visa__img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:100% 45%;
  border-radius:12px;margin:.1rem 0 1rem;display:block;
  /* gradación común: las tres artes vienen con temperaturas distintas */
  filter:saturate(.82) contrast(.97);
}
.visa ul{list-style:none;margin:.9rem 0 1.4rem;padding:1.1rem 0 0;border-top:1px solid var(--line);font-size:14.5px;flex:1}
.visa li{position:relative;padding-left:1.5rem;margin-bottom:.55rem}
.visa li::before{
  content:"";position:absolute;left:0;top:.32em;width:14px;height:14px;background:var(--acc);
  -webkit-mask:var(--mask-check) center/contain no-repeat;
          mask:var(--mask-check) center/contain no-repeat;
}
/* requisitos oficiales por destino (plegados: SEO sin alargar la tarjeta) */
.visa__req{border-top:1px dashed var(--line-acc);margin:0 0 1.2rem;padding-top:.9rem;position:relative;z-index:1}
.visa__req summary{
  font:600 13px var(--sans);color:var(--acc-text);cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.25rem 0;
}
.visa__req summary::-webkit-details-marker{display:none}
.visa__req summary::after{
  content:"";width:13px;height:13px;flex:none;background:var(--acc);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s var(--ease);
}
.visa__req[open] summary::after{transform:rotate(45deg)}
.visa__req ul{margin:.7rem 0 .2rem;padding:0;border:0;font-size:13.5px}
.visa__req li{padding-left:1.1rem;margin-bottom:.4rem;color:var(--ink-60)}
.visa__req li::before{
  content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;
  background:var(--acc-mid);-webkit-mask:none;mask:none;
}

/* CTA de ancho completo al pie de la tarjeta.
   NO se usa "stretched link" (una capa absoluta sobre toda la tarjeta):
   dentro hay un acordeón de requisitos que la gente necesita poder abrir,
   y esa capa se tragaba el toque y lo contaba como conversión. */
.visa__cta{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  width:100%;margin-top:auto;
  font:600 15px var(--sans);text-decoration:none;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line);border-radius:10px;
  padding:.85rem 1.1rem;
  transition:background .2s,border-color .2s,color .2s;outline:none;
}
.visa__cta:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.visa__cta:hover .visa__arrow{color:#fff}
.visa__arrow{display:inline-block;transition:transform .2s var(--ease)}
.visa__cta:hover .visa__arrow,.adv__cta:hover .visa__arrow,.tsts__cta a:hover .visa__arrow{transform:translateX(4px)}

/* ── proceso ── */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;position:relative}
.steps::before{
  content:"";position:absolute;top:1.55rem;left:0;right:0;
  border-top:1px dashed var(--acc-mid);opacity:.5;
}
.stepc{position:relative}
.stepc__n{
  font-family:var(--serif);font-size:3.2rem;line-height:1;color:transparent;
  -webkit-text-stroke:1px var(--acc);display:inline-block;margin-bottom:1.1rem;
  background:var(--paper-2);position:relative;padding-inline:.7rem;margin-left:-.7rem;
}
.stepc h3{font-size:1.5rem;margin-bottom:.6rem}
.stepc p{font-size:15px;color:var(--ink-60);margin-bottom:1.1rem}
.stepc__tag{
  font:600 11.5px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--acc-text);border-top:1px dashed var(--line-acc);display:block;padding-top:.9rem;
}

/* ── por qué narva (oscuro) ── */
.dark{background:var(--dark);color:var(--paper);padding:6.2rem 0;position:relative;overflow:hidden}
.dark::before{
  content:"";position:absolute;top:-14rem;right:-10rem;width:36rem;height:36rem;border-radius:50%;
  background:radial-gradient(circle,rgba(183,193,119,.12),transparent 65%);pointer-events:none;
}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-bottom:2.8rem}
.cmp__col{border:1px solid var(--line-dark);border-radius:var(--r);padding:1.9rem 1.7rem;background:rgba(250,250,245,.03)}
.cmp__col--narva{background:rgba(183,193,119,.08);border-color:rgba(183,193,119,.4)}
.cmp__t{font-size:1.45rem;margin-bottom:1.2rem}
.cmp__t--solo{color:rgba(250,250,245,.6)}
.cmp__t--narva{color:var(--acc-mid)}
.cmp__list{list-style:none;margin:0;padding:0;font-size:15px}
.cmp__list li{position:relative;padding-left:1.7rem;margin-bottom:.85rem;color:rgba(250,250,245,.78)}
.cmp__list--solo li::before{content:"✕";position:absolute;left:0;color:#D98A64;font-weight:700;font-size:.85em;top:.15em}
.cmp__list--narva li::before{
  content:"";position:absolute;left:0;top:.3em;width:15px;height:15px;background:var(--acc-mid);
  -webkit-mask:var(--mask-check) center/contain no-repeat;
          mask:var(--mask-check) center/contain no-repeat;
}
.dark__cta{text-align:center}

/* ── asesor ── */
.adv{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:center}
.adv__photo{position:relative}
.adv__ph{
  aspect-ratio:1;border-radius:20px;background:var(--paper-2);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-60);overflow:hidden;
  box-shadow:var(--sh);
}
.adv__ph svg{width:62%;height:62%}
.adv__badge{
  position:absolute;right:-.9rem;bottom:1.6rem;transform:rotate(-2deg);
  background:var(--dark);color:var(--paper);font:600 12.5px/1.45 var(--sans);
  padding:.75rem 1rem;border-radius:10px;box-shadow:var(--sh-lg);
}
.adv__bio h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:1rem}
.adv__bio>p{color:var(--ink-60);max-width:56ch}
.adv__quote{
  margin:1.4rem 0;padding:1.1rem 1.4rem;border-left:3px solid var(--acc-mid);
  font-family:var(--serif);font-size:1.3rem;font-style:italic;line-height:1.35;
  background:var(--paper-2);border-radius:0 12px 12px 0;
}
.adv__facts{list-style:none;display:flex;gap:2.4rem;margin:1.6rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--line);flex-wrap:wrap}
.adv__facts b{display:block;font-family:var(--serif);font-size:1.75rem;font-weight:400;color:var(--acc)}
.adv__facts span{font-size:13px;color:var(--ink-60)}
.adv__cta{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;
  font:600 14.5px var(--sans);text-decoration:none;color:var(--ink);
  border-bottom:1.5px solid var(--acc-mid);padding:.5rem 0 3px;transition:color .2s;
}
.adv__cta:hover{color:var(--acc-text)}

/* ── testimonios ── */
.tsts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.tst{
  margin:0;background:#fff;border-radius:var(--r);box-shadow:var(--sh);
  padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:1.2rem;
}
.tst blockquote{margin:0;font-family:var(--serif);font-size:1.3rem;line-height:1.4;flex:1}
.tst blockquote::before{content:"“ ";color:var(--acc);font-size:1.5em;line-height:0}
.tst blockquote::after{content:" ”";color:var(--acc);font-size:1.5em;line-height:0}
.tst figcaption{display:flex;align-items:center;gap:.8rem}
.tst__ava{
  width:40px;height:40px;border-radius:50%;background:var(--dark);color:var(--acc-mid);
  font-family:var(--serif);font-size:1.15rem;display:grid;place-items:center;flex:none;
}
.tst figcaption b{display:block;font-size:14.5px}
.tst figcaption em{font-style:normal;font-size:12.5px;color:var(--ink-60)}
.tst__estrellas{color:var(--acc);font-size:15px;letter-spacing:.15em;line-height:1}
.tsts__cta{text-align:center;margin:2.4rem 0 0}

/* Aviso de contenido de ejemplo — BORRAR junto con el contenido de prueba */
.demo-aviso{
  display:block;text-align:center;margin:0 0 1.6rem;
  font:600 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:#7A4A12;background:#FDF3E2;border:1px dashed #D9A860;
  border-radius:99px;padding:.55rem 1rem;
}
.tsts__cta a{
  display:inline-flex;align-items:center;gap:.5rem;font:600 15px var(--sans);
  text-decoration:none;color:var(--ink);border-bottom:1.5px solid var(--acc-mid);
  padding:.5rem 0 3px;transition:color .2s;
}
.tsts__cta a:hover{color:var(--acc-text)}

/* ── checklist por destino ──
   Fondo crema: rompe el tramo de tres secciones claras seguidas
   mientras los testimonios estén ocultos. */
.ckl{padding:6.2rem 0;background:var(--paper-2);border-block:1px solid var(--line)}
.ckl__card{
  display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center;
  background:#fff;
  border:1px solid var(--line-acc);border-radius:20px;padding:2.6rem 2.8rem;
  box-shadow:var(--sh);
}
.ckl__copy h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:.7rem}
.ckl__copy p:last-child{margin:0;color:var(--ink-60);font-size:15.5px}
.ckl__btns{display:flex;flex-direction:column;gap:.7rem}

/* ── faq ── */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  font-family:var(--serif);font-size:1.35rem;padding:1.25rem 0;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1.2rem;
  transition:color .2s;
}
.faq summary:hover{color:var(--acc-text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";width:16px;height:16px;flex:none;background:var(--acc);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
/* enlace profundo desde Google: la pregunta no debe quedar bajo el header */
.faq details{scroll-margin-top:96px}
.faq details p{margin:0 0 1.4rem;font-size:15.5px;color:var(--ink-60);max-width:68ch}

/* ── cta final ── */
.final{
  background:linear-gradient(180deg,var(--dark) 0%,var(--dark-deep) 100%);
  color:var(--paper);padding:6.5rem 0;text-align:center;position:relative;overflow:hidden;
}
.final::before{
  content:"";position:absolute;left:50%;top:-22rem;transform:translateX(-50%);
  width:52rem;height:52rem;border-radius:50%;
  background:radial-gradient(circle,rgba(183,193,119,.14),transparent 62%);pointer-events:none;
}
.final__in{position:relative;display:flex;flex-direction:column;align-items:center}
.final .eyebrow{justify-content:center}
.final h2{font-size:clamp(2.1rem,4.6vw,3.4rem);color:var(--paper);max-width:22ch}
.final__sub{margin-top:1.2rem;font-size:1.1rem;color:rgba(250,250,245,.72);max-width:52ch}
.final__cta{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:2.2rem}
.final__alt{font-size:14.5px;color:rgba(250,250,245,.7)}
.final__alt a{color:var(--acc-mid);text-decoration:none;font-weight:600;display:inline-block;padding:.4rem 0}
.final__alt a:hover{text-decoration:underline}

/* ── footer ── */
.ft{background:var(--dark-deep);color:rgba(250,250,245,.7);font-size:14.5px;padding:4.2rem 0 1.6rem;border-top:1px solid var(--line-dark)}
.ft__grid{display:grid;grid-template-columns:1.4fr repeat(auto-fit,minmax(150px,1fr));gap:2.6rem}
.brand--ft .brand__seal{color:var(--acc-mid)}
.brand--ft .brand__name{color:var(--paper)}
.ft__brand>p{margin-top:1.1rem;max-width:38ch}
.ft__disclaimer{font-size:12.5px;color:rgba(250,250,245,.66);border-left:2px solid rgba(183,193,119,.4);padding-left:.9rem}
.ft__t{font:600 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--paper);margin:0 0 1rem}
.ft__grupo{font-size:12.5px;color:rgba(250,250,245,.5);margin-top:.4rem}
.ft__nota{font-size:12.5px;color:rgba(250,250,245,.55);font-style:italic}
.ft__tgap{margin-top:1.6rem}
.ft__col p{margin:0 0 .35rem}
.ft address{font-style:normal;margin-bottom:.8rem;line-height:1.7}
.ft a{text-decoration:none;transition:color .2s;display:inline-block;padding-block:.25rem}
.ft a:hover{color:var(--acc-mid)}
.ft__map{font-weight:600;color:var(--acc-mid)}
.ft__base{border-top:1px solid var(--line-dark);margin-top:3rem;padding-top:1.3rem;font-size:12.5px;color:rgba(250,250,245,.55)}
.ft__base a{padding-block:.4rem}

/* ── panel deslizante de captación ──────────────────────────
   Cerrado: fuera de pantalla a la derecha + pestaña visible.
   Abierto: entra hacia la izquierda. */
.drawer{
  position:fixed;top:0;right:0;z-index:120;
  width:min(400px,92vw);
  height:100vh;height:100dvh;            /* vh de respaldo si no hay dvh */
  background:var(--paper);border-left:1px solid var(--line-acc);
  box-shadow:-24px 0 60px -30px rgba(23,26,15,.55);
  transform:translateX(105%);visibility:hidden;
  /* visibility cambia de golpe al abrir y se retrasa al cerrar: así el
     foco puede entrar al primer campo apenas se abre */
  transition:transform .45s var(--ease),visibility 0s .45s;
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer.on{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s}
.drawer::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--acc),var(--acc-mid))}
.drawer__in{padding:2.6rem 1.9rem 2rem}
.drawer h2{font-size:2rem;margin-bottom:.6rem}
.drawer__sub{font-size:14.5px;color:var(--ink-60);margin-bottom:1.5rem}
.drawer__x{
  position:sticky;top:.9rem;float:right;margin:.9rem .9rem -3.2rem 0;z-index:2;
  width:44px;height:44px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);border-radius:50%;
  color:var(--ink-60);cursor:pointer;transition:background .2s,color .2s,transform .2s;
}
.drawer__x svg{width:18px;height:18px}
.drawer__x:hover{background:var(--ink);color:var(--paper);transform:rotate(90deg)}
.drawer__proof{list-style:none;margin:1.6rem 0 0;padding:1.3rem 0 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-60)}
.drawer__proof li{position:relative;padding-left:1.5rem;margin-bottom:.5rem}
.drawer__proof li::before{
  content:"";position:absolute;left:0;top:.3em;width:14px;height:14px;background:var(--acc);
  -webkit-mask:var(--mask-check) center/contain no-repeat;
          mask:var(--mask-check) center/contain no-repeat;
}

/* pestaña lateral: trae el panel de vuelta */
.dtab{
  position:fixed;top:50%;right:0;z-index:110;transform:translateY(-50%);
  display:flex;align-items:center;gap:.55rem;
  background:var(--dark);color:var(--acc-l);
  border:0;border-radius:12px 0 0 12px;padding:1rem .8rem;
  font:600 13px var(--sans);cursor:pointer;
  writing-mode:vertical-rl;
  box-shadow:-6px 0 20px -8px rgba(23,26,15,.6);
  transition:background .2s,padding .2s,opacity .3s,transform .3s;
}
.dtab svg{width:18px;height:18px;fill:currentColor;transform:rotate(90deg)}
.dtab:hover{background:var(--acc);color:#fff;padding-right:1.1rem}
/* visibility:hidden la saca también del recorrido con Tab */
.dtab.off{opacity:0;visibility:hidden;pointer-events:none;transform:translate(100%,-50%)}

/* ── whatsapp flotante ── */
.wafab{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:95;
  display:flex;align-items:center;gap:.6rem;
  background:var(--wa);color:#fff;text-decoration:none;
  padding:.95rem 1.25rem;border-radius:99px;
  font:600 14.5px var(--sans);
  box-shadow:0 6px 22px -6px rgba(15,92,46,.8);
  /* `backwards` y NO `both`. Con `both` el relleno hacia adelante congela
     opacity:1 al terminar la entrada, y en la cascada una animación le gana
     a una declaración normal: .wafab.off{opacity:0} no llegaba a aplicarse
     nunca. El botón se quedaba a la vista sobre el formulario, sin poder
     pulsarse (pointer-events:none sí funcionaba, porque no está en los
     keyframes) — un botón visible que no hace nada.
     Con `backwards` la entrada se ve idéntica (usa el estado inicial durante
     el retardo de 1.1s) pero al acabar suelta el control y .off funciona. */
  animation:fabIn .45s var(--ease) 1.1s backwards;
  transition:transform .25s var(--ease),box-shadow .2s,opacity .25s;
}
.wafab:hover{transform:scale(1.05);box-shadow:0 10px 28px -6px rgba(15,92,46,.85)}
/* visibility además de opacity: lo saca del recorrido con Tab, igual que .dtab.
   El `visibility 0s .25s` retrasa el corte hasta que termina el desvanecido;
   sin ese retardo desaparecería de golpe en vez de irse suavemente. Al volver
   (se quita .off) manda la transición de .wafab, sin retardo: reaparece ya. */
.wafab.off,.con-panel .wafab{
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);
  transition:opacity .25s,transform .25s var(--ease),visibility 0s .25s;
}
.wafab svg{width:24px;height:24px;fill:currentColor}
@keyframes fabIn{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}

/* ── revelado al hacer scroll ──
   Solo se oculta cuando JS está activo (html.js): sin JS todo es visible. */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:var(--d,0s)}
.js .rv.on{opacity:1;transform:none}

/* ── páginas legales ── */
.doc{padding:3.4rem 0 5.5rem}
.doc h1{font-size:clamp(2.1rem,5vw,3rem);margin-bottom:1.6rem}
.doc h2{font-size:1.45rem;margin:2.3rem 0 .7rem}
.doc p,.doc li{color:var(--ink-60);max-width:72ch}
.doc a{color:var(--ink)}
.doc__back{display:inline-block;margin-bottom:2rem;font-size:14px;font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--acc-mid);padding-bottom:2px}

/* ── responsive ── */
@media (max-width:1020px){
  .hero__grid{grid-template-columns:1fr;gap:3rem}
  .lead{max-width:520px;width:100%;margin-inline:auto}
  .visas,.tsts{grid-template-columns:1fr 1fr}
  .visa:last-child,.tst:last-child{grid-column:1/-1}  /* sin tarjeta huérfana */
  /* la tarjeta ensanchada no debe estirar su imagen a pantalla completa */
  .visa:last-child .visa__img{aspect-ratio:auto;height:340px}
  .steps{grid-template-columns:1fr;gap:2rem}
  .steps::before{display:none}
  .stepc__n{background:transparent;padding-inline:0;margin-left:0}
  .tbar__grid{grid-template-columns:1fr 1fr}
  .tbar__i{border-left:0;border-top:1px solid var(--line-dark)}
  .tbar__i:nth-child(-n+2){border-top:0}              /* primera fila sin línea */
  .adv{grid-template-columns:1fr;gap:2.6rem}
  .adv__photo{max-width:380px}
  .cmp{grid-template-columns:1fr}
  .ckl__card{grid-template-columns:1fr;gap:1.8rem}
  .ckl__btns{flex-direction:row;flex-wrap:wrap}
  .ft__grid{grid-template-columns:1fr 1fr}
  .hd__nav{display:none}
  .hd__in .btn--wa{margin-left:auto}                  /* CTA a la derecha sin nav */
}
@media (max-width:640px){
  body{font-size:16px}
  .eyebrow{font-size:10.5px;letter-spacing:.15em}
  .hero{padding:3rem 0 3.6rem}
  .sec,.dark,.final{padding:4.2rem 0}
  .ckl{padding:4.2rem 0}
  .visas,.tsts,.tbar__grid,.ft__grid{grid-template-columns:1fr}
  /* móvil: el precio va antes de la foto — decide más rápido y acorta la tarjeta */
  /* Si se ordena un contenedor flex, se ordenan TODOS los hijos:
     el que quede sin order cae en 0 y se pinta el primero. */
  .visa__flag{order:1} .visa h3{order:2} .visa>p{order:3}
  .visa__price{order:4} .visa__img{order:5} .visa ul{order:6}
  .visa__req{order:7} .visa__cta{order:8}
  .visa__img,.visa:last-child .visa__img{aspect-ratio:16/10;height:auto;object-position:100% 40%;margin:.6rem 0 1rem}
  .tbar__i:nth-child(2){border-top:1px solid var(--line-dark)} /* 1 columna: solo el 1.º sin línea */
  .hero__cta .btn{width:100%}
  /* los <br> de titulares están pensados para desktop */
  h1 br,.shead h2 br,.final h2 br{display:none}
  .lead{padding:1.6rem 1.35rem 1.35rem}
  .lead__stamp{display:none}
  .adv__badge{right:.4rem}
  .final h2{font-size:clamp(1.9rem,8vw,2.4rem)}
  .btn--xl{width:100%}
  .ckl__card{padding:1.9rem 1.5rem}
  .ckl__btns{flex-direction:column}
  .ckl__btns .btn{width:100%}
  .wafab .wafab__hint{display:none}
  .wafab{padding:1rem}
  /* el panel pasa a hoja inferior; nunca cubre toda la pantalla para no
     contar como intersticial intrusivo ante Google */
  .drawer{
    top:auto;bottom:0;right:0;left:0;width:100%;
    height:auto;max-height:74vh;max-height:74dvh;
    border-left:0;border-top:1px solid var(--line-acc);border-radius:20px 20px 0 0;
    transform:translateY(105%);
    box-shadow:0 -20px 50px -24px rgba(23,26,15,.6);
  }
  .drawer__in{padding:1.6rem 1.35rem 1.6rem}
  .drawer h2{font-size:1.55rem}
  .drawer__x{margin:.6rem .6rem -3rem 0;top:.6rem}
  .drawer__proof{display:none}       /* la hoja se queda solo con lo que convierte */
  .dtab{
    top:auto;bottom:1rem;right:auto;left:.9rem;transform:none;
    writing-mode:horizontal-tb;border-radius:99px;padding:.9rem 1.15rem;
  }
  .dtab svg{transform:none}
  .dtab.off{transform:translateY(150%)}
}
@media (max-width:640px){
  /* en móvil la flecha se queda sin texto, solo el ícono */
  .volver span{display:none}
  .volver{padding:.5rem;margin-right:.5rem}
}
@media (max-width:420px){
  /* header: etiqueta corta para que el CTA no se parta en dos líneas */
  .hd__ctaLong{display:none}
  .hd__ctaShort{display:inline}
  .hd__in{gap:.8rem}
  .brand__name{font-size:1.25rem}
  .brand__seal{width:32px;height:32px}
  .btn--compact{padding:.65rem .9rem;font-size:13px}
}
/* ── impresión ──────────────────────────────────────────────
   En este rubro la gente imprime la lista de requisitos para ir
   marcando documentos. Que salga limpia y con los datos de contacto. */
@media print{
  *{background:transparent!important;color:#000!important;box-shadow:none!important}
  .hd,.wafab,.drawer,.dtab,.skip,.hero__routes,.vhero__fallback,.vhero__velo,
  .ckl,.final,.demo-aviso,.visa__img,.dest__media,.adv__photo,.migas,
  .phead__jump,.tsts,.lead,.cform,.burger,.nav{display:none!important}
  body{font-size:11pt;line-height:1.45}
  .wrap{width:100%!important;max-width:none}
  .sec,.dest,.dark{padding:.6rem 0!important;border:0!important}
  h1{font-size:20pt} h2{font-size:15pt} h3{font-size:12pt}
  h2,h3{page-break-after:avoid}
  .visa,.precio,.listas,.faq details{page-break-inside:avoid}
  /* los desplegables se imprimen abiertos */
  details{display:block!important}
  details>summary{font-weight:700;list-style:none}
  details>*{display:block!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;word-break:break-all}
  a[href^="#"]::after,a[href^="mailto"]::after{content:""}
  /* pie con los datos, en cada página impresa */
  main::after{
    content:"NARVA Visas · WhatsApp +593 97 874 0894 · info@narvavisas.com · Edificio Gaia, piso 5, of. 54, Quito";
    display:block;margin-top:1.5rem;padding-top:.6rem;border-top:1px solid #000;
    font-size:9pt;
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv{opacity:1;transform:none}
  .route-dot{display:none}   /* animateMotion (SMIL) no obedece a las reglas CSS */
}