/* ════════════════════════════════════════════════════════════
   NARVA VISAS — estilos propios de la WEB GENERAL
   Se carga después de styles.css y solo añade lo que la
   landing de ventas no usa: menú, hero con video, formulario
   a correo y bloques de respaldo.
   ════════════════════════════════════════════════════════════ */

/* ── transición entre páginas ────────────────────────────────
   Con View Transitions el paso de una página a otra deja de ser
   un parpadeo en blanco. Los navegadores que no lo soportan
   simplemente navegan como siempre. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtSalir .18s ease-in both}
  ::view-transition-new(root){animation:vtEntrar .28s ease-out both}
  /* el logo y el header se mantienen fijos entre páginas */
  .brand__logo{view-transition-name:logo}
  .hd--sitio{view-transition-name:cabecera}
}
@keyframes vtSalir{to{opacity:0}}
@keyframes vtEntrar{from{opacity:0;transform:translateY(8px)}}

/* ── header con menú de páginas ── */
.hd--sitio .hd__in{gap:1.6rem}
.nav{display:flex;gap:1.6rem;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--ink-60)}
.nav a{text-decoration:none;transition:color .2s;padding:.45rem 0;position:relative}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--acc);border-radius:2px;
}
/* Enlace a la página de ventas: se distingue del resto del menú
   porque es una acción, no una sección informativa. */
.nav__destacado{
  color:var(--acc-text)!important;font-weight:600;
  border:1px solid var(--line-acc);border-radius:99px;
  padding:.45rem 1rem!important;margin-left:.3rem;
  transition:background .2s,border-color .2s,color .2s;
}
.nav__destacado:hover{background:var(--acc);border-color:var(--acc);color:#fff!important}
.nav__destacado::after{display:none!important}

.burger{
  display:none;width:44px;height:44px;margin-left:.2rem;
  background:transparent;border:1px solid var(--line);border-radius:10px;
  cursor:pointer;padding:0;place-items:center;
}
.burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;margin:2.5px auto;transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── hero con video de fondo ── */
.vhero{position:relative;overflow:hidden;padding:6.5rem 0 6rem;color:var(--paper)}
/* Capas, de atrás hacia adelante: respaldo (0) · video (1) · velo (2) · texto (3) */
.vhero__video,.vhero__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vhero__fallback{z-index:0}
.vhero__video{z-index:1}
/* Respaldo mientras no exista el video: degradado de marca con textura */
.vhero__fallback{
  background:
    radial-gradient(120% 90% at 15% 10%, rgba(127,138,62,.35), transparent 60%),
    radial-gradient(100% 80% at 90% 90%, rgba(201,212,141,.18), transparent 60%),
    linear-gradient(160deg,#1B1E11 0%,#2A2F18 55%,#12140A 100%);
}
/* Velo suave: el degradado de respaldo ya es oscuro. Al activar el video,
   subir estos valores (p. ej. .88 / .62 / .35) para recuperar el contraste. */
.vhero__velo{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(18,20,10,.55) 0%,rgba(18,20,10,.3) 45%,rgba(18,20,10,.12) 100%)}
.vhero:has(.vhero__video) .vhero__velo{background:linear-gradient(90deg,rgba(18,20,10,.9) 0%,rgba(18,20,10,.66) 45%,rgba(18,20,10,.4) 100%)}
.vhero__in{position:relative;z-index:3;display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center}
.vhero h1{font-size:clamp(3.2rem,6.6vw,5.4rem);color:var(--paper);margin-bottom:1.5rem;line-height:1}
.vhero h1 em{color:var(--acc-mid)}
.vhero .eyebrow{color:var(--acc-l);font-size:12.5px;letter-spacing:.2em}
.vhero .eyebrow::before{background:var(--acc-mid)}
.vhero__sub{font-size:1.28rem;color:rgba(250,250,245,.84);max-width:50ch;line-height:1.6}
.vhero__sub strong{color:var(--paper);font-weight:600}
.vhero__cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
.btn--claro{border-color:rgba(250,250,245,.4);color:var(--paper);background:transparent}
.btn--claro:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);transform:translateY(-2px)}

/* ── formulario a correo ── */
.cform{
  position:relative;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:20px;padding:1.9rem;box-shadow:var(--sh-lg);
}
.cform::before{content:"";position:absolute;inset:0 0 auto;height:4px;border-radius:20px 20px 0 0;background:linear-gradient(90deg,var(--acc),var(--acc-mid))}
.cform__t{font-size:1.7rem;margin-bottom:.3rem}
.cform__sub{font-size:14px;color:var(--ink-60);margin-bottom:1.4rem}
.cform__par{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.cform textarea{
  width:100%;padding:.9rem 1rem;font:400 16px var(--sans);color:var(--ink);
  background:var(--paper-2);border:1.5px solid var(--line);border-radius:10px;
  resize:vertical;min-height:84px;transition:border-color .18s,box-shadow .18s,background .18s;
}
.cform textarea:focus{outline:none;border-color:var(--ink);background:#fff;box-shadow:0 0 0 3.5px rgba(99,107,47,.22)}
/* La región viva nunca se saca del render (display:none rompe el anuncio
   de los lectores de pantalla); vacía simplemente no ocupa espacio. */
.cform__estado{font-size:13.5px;margin:.8rem 0 0;text-align:center;line-height:1.5}
.cform__estado:empty{margin:0;padding:0}
.cform__estado.ok{color:var(--acc-text);font-weight:600}
.cform__estado.mal{color:var(--danger);font-weight:600}
/* Ruta alterna a WhatsApp, fuera de la región viva para poder alcanzarla */
.cform__alt{margin:.8rem 0 0;text-align:center}
.cform__wa{
  display:inline-flex;align-items:center;gap:.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;
}
.cform__wa:hover{color:var(--acc-text)}
/* Botón enviando */
.cform button[aria-busy="true"]{opacity:.75;pointer-events:none}

/* ── confirmación de envío ──────────────────────────────────
   El aviso de una línea pasaba desapercibido, sobre todo en móvil al
   cerrarse el teclado. Al confirmarse el envío la tarjeta ENTERA deja
   de ser un formulario y pasa a ser el acuse de recibo.

   El formulario NO se saca del DOM ni se pone en display:none: pasa a
   visibility:hidden, que hace cuatro cosas a la vez —
     (a) conserva el alto EXACTO de la tarjeta, así que el panel con
         inset:0 encaja y la página no salta (crítico en index.html:
         .vhero__in tiene align-items:center y cualquier cambio de alto
         recolocaría la tarjeta entera);
     (b) saca los campos del orden de tabulación;
     (c) los saca del árbol de accesibilidad, en todos los navegadores,
         sin depender de `inert` ni de emular con tabindex;
     (d) deja intacta la caja que observa el IntersectionObserver del
         botón flotante (app.js observa .cform).

   El panel depende de tres cosas que .cform cumple hoy: position:relative,
   sin overflow propio y sin altura fija. No se las quites. */
.cform.enviado > form,
.cform.enviado > .cform__t,
.cform.enviado > .cform__sub{visibility:hidden}

/* La región viva NO se oculta con display ni con visibility (rompería el
   anuncio): se recorta con la misma receta de .sr-only (styles.css).
   Sigue en el render, sigue anunciando, y deja de empujar el alto.
   OJO: el interruptor va sobre .cform, NUNCA sobre #cformEstado —
   decir() en sitio.js reescribe estado.className en cada mensaje y se
   llevaría por delante cualquier clase puesta ahí. */
.cform.enviado .cform__estado{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* La ruta alterna y la nota legal sí se retiran del todo: no son regiones
   vivas y, tapadas por un panel opaco, quedarían enfocables pero
   invisibles — un enlace fantasma en el orden de tabulación. */
.cform.enviado .cform__alt,
.cform.enviado .lead__legal{display:none}

/* La barra de marca de 4px sigue pintándose por encima del panel: la
   tarjeta conserva su identidad también en el estado de éxito. */
.cform::before{z-index:1}

/* El header fijo mide 84px. En index.html #contacto ya trae 84 y gana por
   especificidad; esta regla cubre contacto.html, cuya .cform no tiene id. */
.cform{scroll-margin-top:96px}

.exito{
  position:absolute;inset:0;
  display:grid;justify-items:center;
  align-content:center;
  align-content:safe center;         /* en pantallas bajas no recorta por arriba */
  padding:1.9rem;text-align:center;
  background:#fff;border-radius:19px;/* 20px del radio − 1px del borde */
  overflow-y:auto;overscroll-behavior:contain;
  animation:exitoEntra .28s var(--ease) both;
}
.exito:focus{outline:none}
/* El aro va hacia DENTRO: con inset:0, uno hacia fuera se saldría de la tarjeta. */
.exito:focus-visible{outline:2.5px solid var(--acc);outline-offset:-5px;border-radius:15px}

/* El acuse es FORMA, no color: disco relleno + visto se entienden sin
   distinguir el oliva, y a 360px un disco sólido de 52px se lee de reojo
   mientras un aro de 1.5px no. Blanco sobre --acc #636B2F = 5,7:1
   (el mínimo para un objeto gráfico es 3:1). */
.exito__ico{
  width:52px;height:52px;display:grid;place-items:center;
  border-radius:50%;background:var(--acc);color:#fff;margin-bottom:.9rem;
}
.exito__ico svg{width:26px;height:26px}
/* El trazo vive SOLO en los keyframes: el estado en reposo es el visto
   COMPLETO, así que si la animación no corriera nunca queda invisible.
   Curva simétrica a propósito, no --ease: un trazo tiene que acelerar y
   frenar por igual. Con --ease (.22,.8,.3,1) el visto casi terminaría y
   luego se arrastraría, y se leería como duda en vez de como firmeza.
   26 > la longitud real del trazo (22,6 en el viewBox de 24). */
.exito__marca{stroke-dasharray:26;animation:exitoMarca .4s cubic-bezier(.65,0,.35,1) .12s both}

.exito__t{font-size:1.55rem;margin:0}
.exito__p{font-size:15px;color:var(--ink-60);line-height:1.55;margin:.5rem 0 0;max-width:34ch}

/* Devolver lo que la persona acaba de escribir es la prueba más barata y
   más contundente de que el envío llegó: convierte un mensaje genérico en
   un recibo, y deja ver un número mal tecleado justo cuando todavía se
   puede arreglar. Mismo lenguaje visual que .lead__done.
   --ink-60 #4C5140 sobre --paper-2 #EFEFE2 = 7,0:1 (AA y AAA). */
.exito__dato{
  width:100%;max-width:36ch;margin:1.15rem 0 0;
  background:var(--paper-2);border:1px solid var(--line);border-radius:12px;
  padding:.85rem 1rem;
}
.exito__linea{font-size:14.5px;line-height:1.5;margin:0;color:var(--ink)}
.exito__plazo{font-size:13.5px;line-height:1.5;margin:.35rem 0 0;color:var(--ink-60)}
.exito__dato b{font-weight:600;color:var(--ink)}
.exito__linea b{white-space:nowrap}
.exito__hora{display:block;font-style:normal;font-size:12.5px;margin-top:.5rem}
/* .atencion--abierto está calibrado para fondos oscuros; aquí el fondo es
   claro. Mismo ajuste que ya hace .con__card en styles.css. */
.exito .atencion--abierto{color:var(--acc-text)}
.exito .atencion--abierto::before{background:var(--acc)}

/* .btn trae white-space:nowrap; en un celular de 360px la etiqueta se
   saldría de la tarjeta, así que aquí se le permite partir. */
.exito__cta{
  margin-top:1.3rem;width:100%;max-width:330px;
  white-space:normal;line-height:1.25;padding-inline:1.2rem;
}
.exito__nota{font-size:12.5px;color:var(--ink-60);line-height:1.5;margin:.6rem 0 0;max-width:34ch}

.exito__otra{
  margin-top:1.1rem;background:none;border:0;padding:.45rem 0 3px;cursor:pointer;
  font:600 13.5px var(--sans);color:var(--ink-60);
  border-bottom:1.5px solid var(--acc-mid);   /* --acc-mid da 3,7:1 sobre el
     blanco de la tarjeta y cumple la 1.4.11; --line-acc solo daría 1,76:1 */
  transition:color .2s,border-color .2s;
}
.exito__otra:hover{color:var(--ink);border-color:var(--acc)}

@keyframes exitoEntra{from{opacity:0;transform:translateY(8px)}}
@keyframes exitoMarca{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}

/* ── bloque de respaldo: foto a la izquierda, texto a la derecha ── */
.respaldo{display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:center}
.respaldo__media{display:flex;flex-direction:column;gap:1rem}
.respaldo__foto{
  position:relative;display:block;border-radius:18px;overflow:hidden;
  border:1px solid rgba(250,250,245,.18);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.respaldo__foto img{width:100%;height:auto;display:block;transition:transform .5s var(--ease)}
.respaldo__foto:hover{transform:translateY(-4px);border-color:var(--acc-mid);box-shadow:0 38px 70px -30px rgba(0,0,0,.8)}
.respaldo__foto:hover img{transform:scale(1.03)}
/* chapita de "ver en el mapa" sobre la foto */
.respaldo__pin{
  position:absolute;left:.9rem;bottom:.9rem;right:.9rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  background:rgba(18,20,10,.82);color:var(--paper);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(250,250,245,.2);border-radius:99px;
  padding:.6rem 1rem;font:600 13.5px var(--sans);
  transition:background .25s,border-color .25s;
}
.respaldo__pin svg{width:16px;height:16px;flex:none}
.respaldo__foto:hover .respaldo__pin{background:var(--acc);border-color:var(--acc)}

.respaldo__texto h2{font-size:clamp(2rem,4.2vw,3.1rem);color:var(--paper);margin-bottom:1.2rem}
.respaldo__sub{font-size:1.08rem;color:rgba(250,250,245,.78);max-width:56ch}
.respaldo__sub strong{color:var(--acc-mid);font-weight:600}

/* encabezado de sección centrado (solo en la web general) */
.shead--c{margin-inline:auto;text-align:center;max-width:56ch}
.shead--c .eyebrow{justify-content:center}
.shead--c .shead__note{margin-inline:auto}

/* ── cabecera de páginas internas ── */
.phead{padding:3.2rem 0 3.4rem;background:var(--paper-2);border-bottom:1px solid var(--line)}
/* eyebrow--gold está calibrado para fondos oscuros; aquí el fondo es claro */
.phead .eyebrow--gold{color:var(--acc-text)}
.phead .eyebrow--gold::before{background:var(--acc)}
/* anclas de las páginas nuevas: el header fijo no debe tapar el título */
#usa,#canada,#schengen,#servicios,#respaldo,#contacto{scroll-margin-top:84px}
.phead h1{font-size:clamp(2.2rem,4.8vw,3.4rem);margin-bottom:1rem}
.phead__sub{font-size:1.1rem;color:var(--ink-60);max-width:58ch;margin:0}
.migas{font-size:13px;color:var(--ink-60);margin-bottom:1.6rem}
.migas a{text-decoration:none;border-bottom:1px solid var(--line-acc);padding-bottom:1px}
.migas a:hover{color:var(--ink)}
.migas span{margin:0 .4rem;opacity:.6}
.phead__jump{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.phead__jump a{
  font:600 13.5px var(--sans);text-decoration:none;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:99px;padding:.6rem 1.1rem;
  transition:border-color .2s,transform .2s var(--ease);
}
.phead__jump a:hover{border-color:var(--acc);transform:translateY(-2px)}

/* ── bloque de destino (página de visas) ── */
.dest{padding:5.5rem 0;border-bottom:1px solid var(--line)}
.dest--alt{background:var(--paper-2)}
.dest__in{display:grid;grid-template-columns:.78fr 1.22fr;gap:3.5rem;align-items:start}
.dest__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:100% 45%;
  border-radius:16px;display:block;filter:saturate(.82) contrast(.97);
  box-shadow:var(--sh);
}
.dest__cuerpo h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:.9rem}
.dest__cuerpo>p{color:var(--ink-60);max-width:60ch}
.dest__paises{font-size:14px;color:var(--ink-60);font-style:italic;margin:1.4rem 0 0}

/* tabla de precios — ancho acotado para que etiqueta y valor no se separen */
.precio{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.6rem;margin:1.6rem 0 0;max-width:430px}
.dest--alt .precio{background:var(--paper)}
.precio__fila{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 0;border-bottom:1px dashed var(--line)}
.precio__fila span{font-size:14.5px;color:var(--ink-60)}
.precio__fila b{font-family:var(--serif);font-size:1.3rem;font-weight:400}
.precio__fila--total{border-bottom:0;border-top:1.5px solid var(--line-acc);margin-top:.4rem;padding-top:.8rem}
.precio__fila--total span{color:var(--ink);font-weight:600;font-size:15px}
.precio__fila--total b{font-size:1.9rem;color:var(--acc)}
.precio__nota{font-size:12.5px;color:var(--ink-60);margin:.9rem 0 0;line-height:1.55}

/* listas de incluye / requisitos */
.listas{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:1.8rem 0}
.listas h3{font-size:1.15rem;font-family:var(--sans);font-weight:600;letter-spacing:.02em;margin-bottom:.8rem}
.lista{list-style:none;margin:0;padding:0;font-size:14.5px}
.lista li{position:relative;padding-left:1.5rem;margin-bottom:.55rem;color:var(--ink-60)}
.lista--si li::before{
  content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;background:var(--acc);
  -webkit-mask:var(--mask-check) center/contain no-repeat;
          mask:var(--mask-check) center/contain no-repeat;
}
.lista--doc li::before{
  content:"";position:absolute;left:.25em;top:.55em;width:5px;height:5px;
  border-radius:50%;background:var(--acc-mid);
}

/* aviso de honestidad */
.aviso{max-width:64ch;margin-inline:auto;text-align:center}
.aviso h2{font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--paper);margin-bottom:1.1rem}
.aviso p{color:rgba(250,250,245,.76);margin-bottom:1.8rem}

/* número de tarjeta (principios en Nosotros) */
.card__num{
  font-family:var(--serif);font-size:2.6rem;line-height:1;color:transparent;
  -webkit-text-stroke:1px var(--acc);display:block;margin-bottom:.9rem;
}
/* tarjeta informativa: no es clicable, así que no debe levantar al pasar el cursor */
.visa--info:hover{transform:none;border-color:var(--line);box-shadow:none}

/* texto corrido */
.texto p{font-size:1.08rem;color:var(--ink-60);margin-bottom:1.3rem}
.texto p:first-child{font-size:1.2rem;color:var(--ink)}

/* ── ventana de video ──────────────────────────────────────── */
.vmodal{
  width:min(880px,92vw);padding:0;border:0;border-radius:18px;
  background:var(--dark);color:var(--paper);overflow:visible;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
}
.vmodal::backdrop{background:rgba(12,14,7,.82);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.vmodal__t{
  font-family:var(--serif);font-size:1.45rem;font-weight:400;color:var(--paper);
  margin:0;padding:1.2rem 3.4rem 1rem 1.6rem;
}
.vmodal__marco{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
/* Video vertical (Shorts): el ancho sale del alto disponible para que el
   9:16 entre completo, con un mínimo y un máximo para que nunca quede
   ni diminuto en pantallas bajas ni desproporcionado en monitores altos. */
.vmodal--vertical{width:min(clamp(300px, calc(64vh * 9 / 16), 420px), 92vw)}
.vmodal--vertical .vmodal__marco{aspect-ratio:9/16}
.vmodal__marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vmodal__x{
  position:absolute;top:-.9rem;right:-.9rem;z-index:2;
  width:42px;height:42px;display:grid;place-items:center;
  background:var(--paper);color:var(--ink);border:0;border-radius:50%;
  cursor:pointer;box-shadow:0 6px 18px -6px rgba(0,0,0,.6);
  transition:transform .2s var(--ease),background .2s,color .2s;
}
.vmodal__x svg{width:18px;height:18px}
.vmodal__x:hover{background:var(--acc);color:#fff;transform:rotate(90deg)}
.vmodal__wa{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--wa);color:#fff;text-decoration:none;
  font:600 15.5px var(--sans);padding:1rem;border-radius:0 0 18px 18px;
  transition:background .2s;
}
.vmodal__wa:hover{background:var(--wa-hover)}
@media (max-width:640px){
  .vmodal{width:94vw;border-radius:14px}
  .vmodal--vertical{width:min(clamp(260px, calc(58vh * 9 / 16), 380px), 88vw)}
  .vmodal__t{font-size:1.2rem;padding:1rem 3rem .9rem 1.1rem}
  .vmodal__x{top:-.7rem;right:-.7rem;width:38px;height:38px}
}

/* ── página 404 ── */
.err404{padding:5rem 0 6rem;text-align:center}
.err404 .eyebrow{justify-content:center}
.err404 h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1rem}
.err404__sub{font-size:1.1rem;color:var(--ink-60);max-width:52ch;margin-inline:auto}
.err404__enlaces{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin:2.2rem 0 3.2rem}
.err404__mapa{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;text-align:left;max-width:900px;margin-inline:auto}
.err404__mapa a{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem 1.4rem;text-decoration:none;
  transition:border-color .2s,transform .2s var(--ease),box-shadow .2s;
}
.err404__mapa a:hover{border-color:var(--acc);transform:translateY(-3px);box-shadow:var(--sh)}
.err404__mapa b{display:block;font-family:var(--serif);font-size:1.25rem;font-weight:400;margin-bottom:.3rem}
.err404__mapa span{font-size:14px;color:var(--ink-60)}
@media (max-width:640px){
  .err404__mapa{grid-template-columns:1fr}
  .err404__enlaces .btn{width:100%}
}

/* ── página de contacto ── */
.con{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.con__card{
  display:flex;gap:1rem;align-items:flex-start;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1.3rem 1.4rem;margin-bottom:.9rem;
  transition:border-color .2s,transform .2s var(--ease),box-shadow .2s;
}
.con__card .i{width:24px;height:24px;color:var(--acc);flex:none;margin-top:.15rem}
.con__card b{display:block;font-size:15px;margin-bottom:.2rem}
.con__card span{display:block;font-size:15px;color:var(--ink-60);line-height:1.5}
.con__card em{display:block;font-style:normal;font-size:12.5px;color:var(--acc-text);margin-top:.4rem}
.con__card a{color:var(--ink-60)}
.con__card--wa:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:var(--sh)}
.con__mapa{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;
  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;
}
.con__mapa:hover{color:var(--acc-text)}

/* ── responsive ── */
@media (max-width:1020px){
  .vhero__in{grid-template-columns:1fr;gap:2.8rem}
  .cform{max-width:520px;width:100%;margin-inline:auto}
  .vhero__velo{background:linear-gradient(180deg,rgba(18,20,10,.9) 0%,rgba(18,20,10,.8) 100%)}
  .respaldo{grid-template-columns:1fr;gap:2.4rem}
  .respaldo__media{max-width:420px;margin-inline:auto;order:2}
  .respaldo__texto{order:1;text-align:center}
  .respaldo__texto .eyebrow{justify-content:center}
  .respaldo__sub{margin-inline:auto}
  .burger{display:grid;order:3}
  /* menú desplegable a todo el ancho de la pantalla, no solo del .wrap */
  .nav{
    position:absolute;top:100%;left:50%;width:100vw;transform:translateX(-50%);
    flex-direction:column;gap:0;margin:0;
    background:var(--paper);border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    box-shadow:0 20px 40px -30px rgba(23,26,15,.6);
    max-height:0;overflow-y:auto;visibility:hidden;
    transition:max-height .3s var(--ease),visibility 0s .3s;
  }
  .nav.on{max-height:min(70vh,420px);visibility:visible;transition:max-height .3s var(--ease),visibility 0s}
  .nav a{padding:1rem 1.4rem;border-bottom:1px solid var(--line);font-size:16px}
  .nav a:last-child{border-bottom:0}
  .nav a[aria-current="page"]::after{display:none}
  /* en el menú desplegable el destacado se ve como una fila más, pero marcada */
  .nav__destacado{
    border:0!important;border-radius:0!important;margin-left:0;
    padding:1rem 1.4rem!important;background:var(--paper-2);
  }
  .hd--sitio .hd__in{position:relative;gap:.9rem}
  .hd--sitio .hd__cta{margin-left:auto;order:2}
  /* con el menú desplegado el header no puede esconderse al bajar */
  .hd--sitio:has(.nav.on){transform:none!important}
}
@media (max-width:1020px){
  .dest__in{grid-template-columns:1fr;gap:2.2rem}
  .dest__media{max-width:340px}
  .dest__media img{aspect-ratio:16/10;object-position:100% 40%}
  .con{grid-template-columns:1fr;gap:2.4rem}
}
@media (max-width:640px){
  .vhero{padding:3.2rem 0 3.6rem}
  .vhero__cta .btn{width:100%}
  .cform{padding:1.6rem 1.35rem}
  .cform__par{grid-template-columns:1fr}
  .exito{padding:1.6rem 1.35rem}
  .exito__t{font-size:1.45rem}
  .exito__ico{width:46px;height:46px}
  .exito__ico svg{width:23px;height:23px}
  .respaldo__media{max-width:none}
  .phead{padding:2.4rem 0 2.6rem}
  .dest{padding:3.6rem 0}
  .dest__media{max-width:none}
  .listas{grid-template-columns:1fr;gap:1.4rem}
  .precio{padding:1.2rem 1.2rem}
  .dest__cuerpo .btn{width:100%}
}

/* ══════════════════ ACUSE DE RECIBO: MOVIMIENTO Y CONTRASTE ══════════════════ */

/* Sin movimiento, pero igual de evidente. El bloque universal de styles.css
   ya aplasta las duraciones con !important, pero NO aplasta los retardos:
   una animación con delay y fill-mode:both se quedaría en su estado "from"
   durante todo el retardo, o sea con el visto invisible. Por eso se apaga el
   animation-name explícitamente. Como el reposo ES el estado final, el panel
   aparece completo y con el visto ya trazado. */
@media (prefers-reduced-motion:reduce){
  .exito{animation:none;opacity:1;transform:none}
  .exito__marca{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
}

/* Alto contraste de Windows. Dos cosas que el navegador no arregla solo:
   1) el fondo del disco se aplana a Canvas y el sello desaparecería;
      necesita contorno propio. El trazo del visto es currentColor y el
      sistema lo fuerza a CanvasText, así que queda dibujado.
   2) el fondo --paper-2 de la caja de datos se funde con el del panel.
   El fondo del panel se declara Canvas para garantizar que es opaco.
   .cform ya está contemplada en el bloque forced-colors de styles.css. */
@media (forced-colors:active){
  .exito{background:Canvas}
  .exito__ico{border:1.5px solid currentColor}
  .exito__dato{border:1px solid currentColor}
}

/* Impresión: no hace falta nada. styles.css ya oculta .cform entera. */