/* VasNavarra — base común de las propuestas B y C (fuentes, tokens y reset).
   Tokens copiados del sistema de diseño del CRM (vasnavarra-crm/design/sistema/tokens).
   Las fuentes van alojadas aquí y no en Google Fonts: cargarlas de Google manda la IP del
   visitante a un tercero sin consentimiento. */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('/assets/fonts/montserrat-latin.woff2') format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/opensans-latin.woff2') format('woff2')}

:root{
  --vn-blue-50:#e8f1fa; --vn-blue-100:#cadef2; --vn-blue-200:#9bc0e6; --vn-blue-400:#2e74bf;
  --vn-blue-500:#005aaa; --vn-blue-600:#004e93; --vn-blue-700:#003d73; --vn-blue-800:#002e57;
  --vn-blue-900:#001e3a;
  --vn-yellow-50:#fffbe0; --vn-yellow-400:#fadc00; --vn-yellow-500:#e6c400; --vn-yellow-700:#8f7900;
  --vn-gray-50:#f5f7fa; --vn-gray-100:#eceff3; --vn-gray-200:#dde3ea; --vn-gray-300:#c4cdd8;
  --vn-gray-500:#6b7885; --vn-gray-700:#333c44;
  --vn-success:#2e9e5b; --vn-success-bg:#e4f4ea; --vn-danger:#d64545; --vn-danger-bg:#fbe6e6;

  --text-strong:var(--vn-blue-700); --text-body:var(--vn-gray-700); --text-muted:var(--vn-gray-500);
  --border-subtle:var(--vn-gray-200);

  --font-display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:28px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(0,46,87,.06); --shadow-sm:0 2px 6px rgba(0,46,87,.08);
  --shadow-md:0 8px 20px rgba(0,46,87,.10); --shadow-lg:0 18px 40px rgba(0,46,87,.14);
  --shadow-focus:0 0 0 3px rgba(46,116,191,.35); --shadow-accent:0 8px 20px rgba(250,220,0,.30);
  --ease-out:cubic-bezier(.16,1,.3,1); --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;

  --container-max:1200px; --gutter:1.5rem; --section-y:5rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text-body);font-family:var(--font-body);font-size:1rem;
  line-height:1.65;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{max-width:100%;display:block}
a{color:var(--vn-blue-500)}
h1,h2,h3{font-family:var(--font-display);color:var(--text-strong);line-height:1.15;margin:0;letter-spacing:-.01em}
p{margin:0}
.icono{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contenedor{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.salto{position:absolute;left:-9999px;top:0;background:#fff;padding:.5rem 1rem;z-index:100}
.salto:focus{left:1rem;top:1rem}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-display);
  font-weight:600;font-size:.9375rem;line-height:1;text-decoration:none;border:2px solid transparent;cursor:pointer;
  padding:.875rem 1.375rem;border-radius:var(--radius-md);min-height:48px;
  transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),box-shadow var(--dur-base),transform var(--dur-fast)}
.boton:active{transform:translateY(1px)}
.boton-primario{background:var(--vn-blue-500);color:#fff}
.boton-primario:hover{background:var(--vn-blue-600)}
.boton-secundario{background:#fff;color:var(--vn-blue-600);border-color:var(--vn-gray-300)}
.boton-secundario:hover{border-color:var(--vn-blue-500);background:var(--vn-blue-50)}

.video{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:var(--vn-blue-900)}
.video button{all:unset;position:absolute;inset:0;cursor:pointer;display:block}
.video img{width:100%;height:100%;object-fit:cover}
.video button::after{content:"";position:absolute;inset:0;background:rgba(0,30,58,.18);transition:background var(--dur-base)}
.video button:hover::after{background:rgba(0,30,58,.06)}
.video .play{position:absolute;left:50%;top:50%;z-index:1;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;
  background:var(--vn-yellow-400);color:var(--vn-blue-700);display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(0,30,58,.35);transition:transform var(--dur-base) var(--ease-out)}
.video .play svg{width:26px;height:26px;margin-left:4px;fill:currentColor;stroke:none}
.video button:hover .play{transform:scale(1.06)}
.video button:focus-visible .play{box-shadow:0 0 0 4px #fff,0 0 0 7px var(--vn-blue-400)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.campo{display:flex;flex-direction:column;gap:.375rem}
.campo label{font-family:var(--font-display);font-weight:600;font-size:.875rem;color:var(--text-strong)}
.campo label span{font-family:var(--font-body);font-weight:400;color:var(--text-muted)}
.campo input,.campo textarea{font:inherit;color:var(--text-body);background:#fff;border:1px solid var(--vn-gray-300);
  border-radius:var(--radius-sm);padding:.75rem .875rem;min-height:48px;width:100%;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.campo textarea{min-height:120px;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--vn-blue-500);box-shadow:var(--shadow-focus)}
.campo input[aria-invalid="true"],.campo textarea[aria-invalid="true"]{border-color:var(--vn-danger)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.casilla{display:flex;gap:.75rem;align-items:flex-start;font-size:.875rem;line-height:1.5}
.casilla input{width:20px;height:20px;margin:.1rem 0 0;accent-color:var(--vn-blue-500);flex:none}
.aviso{display:none;padding:.875rem 1rem;border-radius:var(--radius-md);font-size:.9375rem}
.aviso.ok{display:block;background:var(--vn-success-bg);color:#1f7d46}
.aviso.error{display:block;background:var(--vn-danger-bg);color:#9e2a2f}
.rgpd{font-size:.75rem;line-height:1.55;color:var(--text-muted)}
.rgpd strong{color:var(--vn-gray-700)}

.aparece{animation:aparece .7s var(--ease-out) both}
.aparece.d1{animation-delay:.08s}.aparece.d2{animation-delay:.16s}.aparece.d3{animation-delay:.24s}
@keyframes aparece{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}