:root{
  color-scheme: only light;
  --azul:#2F73D3; --azul-hi:#4083E1; --azul-lt:#98C0F0; --azul-pl:#CBDDF2; --azul-soft:#E9F0FA; --azul-tx:#28518D;
  --amb:#F2C245; --amb-hi:#FFD269; --amb-soft:#FCF3DE; --amb-dk:#7E6100;
  --tinta:#171B2A; --tinta-2:#202438; --tinta-3:#31354E; --tinta-tx:#A2A9C4;
  --bg:#EFF1F7; --pap:#FFFFFF; --line:#E0E4F0; --line2:#EFF1F6; --t2:#525978; --t3:#8990AE;
  --sombra:0 1px 2px rgba(23,27,42,.05), 0 10px 28px -14px rgba(23,27,42,.22);
  --sombraD:0 2px 4px rgba(23,27,42,.14), 0 18px 44px -18px rgba(23,27,42,.55);
  --f:'Space Grotesk',system-ui,-apple-system,sans-serif; --ancho:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#EFF1F7;color-scheme:only light}
body{font:400 16.5px/1.6 var(--f);-webkit-font-smoothing:antialiased}
#lienzo{background:#EFF1F7;color:#171B2A;min-height:100vh;isolation:isolate;position:relative}
#lienzo::before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60rem 44rem at 10% -10%, rgba(47,115,211,.115), transparent 62%),
    radial-gradient(50rem 40rem at 94% 10%, rgba(242,194,69,.130), transparent 60%),
    radial-gradient(46rem 36rem at 24% 62%, rgba(242,194,69,.095), transparent 58%),
    radial-gradient(54rem 42rem at 78% 98%, rgba(47,115,211,.080), transparent 62%)}
#lienzo > *{position:relative;z-index:1}
.wrap{max-width:var(--ancho);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
h1,h2,h3{letter-spacing:-.04em;line-height:1.06}
h1{font-size:clamp(34px,4.8vw,55px);font-weight:600}
h2{font-size:clamp(27px,3.4vw,39px);font-weight:600}
h3{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
h4{font-size:14.5px;font-weight:600;letter-spacing:0}
p{color:var(--t2);max-width:58ch}
/* Red de seguridad: dentro de un panel de color, ningún párrafo hereda el gris
   de la regla general. Es el fallo que dejó la nota del gráfico en #525978. */
.panel.blue p,.panel.blue small,.panel.blue span{color:#fff}
.panel.dark p{color:var(--tinta-tx)}
.panel.amber p{color:rgba(23,27,42,.80)}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--azul);outline-offset:3px;border-radius:6px}
.num{font-variant-numeric:tabular-nums}
.grad{color:#2F73D3}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{background-image:linear-gradient(96deg,#2F73D3,#D8AD33);-webkit-background-clip:text;background-clip:text;color:transparent}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--f);
  padding-top:14px;padding-bottom:14px;padding-left:24px;padding-right:24px;
  border:1px solid transparent;border-radius:11px;cursor:pointer;text-decoration:none;
  transition:background .15s,border-color .15s,transform .1s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn-a{background:var(--azul);color:#fff;background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(0,0,0,.07))}
.btn-a:hover{background-color:var(--azul-hi);box-shadow:0 8px 26px -6px rgba(47,115,211,.60)}
.btn-m{background:var(--amb);color:var(--tinta);background-image:linear-gradient(180deg,rgba(255,255,255,.26),rgba(23,27,42,.08));box-shadow:0 4px 16px -6px rgba(242,194,69,.55)}
.btn-m:hover{box-shadow:0 10px 30px -6px rgba(242,194,69,.75)}
.btn-2{background:var(--pap);border-color:var(--line);color:var(--tinta);font-weight:500}
.btn-2:hover{border-color:#C9D2E6}
.btn-g{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);color:#fff;font-weight:500}
.btn-g:hover{background:rgba(255,255,255,.16)}
.btn-sm{padding-top:10px;padding-bottom:10px;padding-left:16px;padding-right:16px;font-size:14px;border-radius:9px}
.btn-wa{background:#25D366;color:#0B3D1E}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;padding:6px 12px;border-radius:999px;background:var(--line2);color:var(--t2)}
.chip.az{background:var(--azul-soft);color:var(--azul-tx)}
.chip.am{background:var(--amb-soft);color:var(--amb-dk);background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
.chip.on{background:rgba(255,255,255,.10);color:var(--tinta-tx)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:vt-pulso 2.4s ease-in-out infinite}
@keyframes vt-pulso{0%,100%{box-shadow:0 0 0 0 rgba(242,194,69,.60)}50%{box-shadow:0 0 0 6px rgba(242,194,69,0)}}
@media (prefers-reduced-motion:reduce){.chip .dot{animation:none}}
header{position:sticky;top:0;z-index:50;background:rgba(239,241,247,.90);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:22px;padding-top:13px;padding-bottom:13px}
.logo{height:24px;width:auto;display:block}
.nav ul{display:flex;gap:4px;list-style:none;margin-left:auto}
.nav ul a{text-decoration:none;font-size:13.5px;font-weight:500;color:var(--t2);padding:8px 13px;border-radius:999px;display:block}
.nav ul a:hover{background:var(--pap);color:var(--azul)}
@media(max-width:1040px){.nav ul{display:none}.nav .btn{margin-left:auto}}
.panel{background:var(--pap);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:var(--sombra);background-image:linear-gradient(180deg,rgba(47,115,211,.040),rgba(255,255,255,0) 42%);
  transition:transform .18s ease,box-shadow .18s ease;position:relative}
.panel.dark{background-color:#171B2A;background-image:linear-gradient(158deg,#2A3253 0%,#1E2440 46%,#161B31 100%);
  border-color:#31354E;color:#fff;box-shadow:0 2px 4px rgba(23,27,42,.16),0 26px 58px -22px rgba(47,115,211,.46),inset 0 1px 0 rgba(139,190,255,.14)}
.panel.blue{background-color:#2F73D3;background-image:linear-gradient(150deg,#3A7ED9,#3665A7);border-color:#2F73D3;color:#fff;
  box-shadow:0 2px 4px rgba(23,27,42,.14),0 24px 54px -22px rgba(47,115,211,.55);overflow:hidden}
.panel.amber{background-color:#F2C245;border-color:#F2C245;color:var(--tinta);
  background-image:radial-gradient(26rem 17rem at 6% 0%, rgba(255,255,255,.34), transparent 58%),radial-gradient(22rem 15rem at 98% 100%, rgba(23,27,42,.16), transparent 56%);
  box-shadow:0 2px 4px rgba(23,27,42,.12),0 22px 50px -22px rgba(242,194,69,.62)}
.panel.dark::before,.panel.blue::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}
.panel.dark::before{background:radial-gradient(30rem 20rem at 2% -6%,rgba(139,190,255,.22),transparent 62%),radial-gradient(26rem 18rem at 100% 104%,rgba(242,194,69,.20),transparent 58%)}
.panel.blue::before{background:radial-gradient(28rem 18rem at 8% 0%,rgba(255,255,255,.20),transparent 60%),radial-gradient(24rem 16rem at 96% 100%,rgba(242,194,69,.22),transparent 58%)}
.panel.dark > *,.panel.blue > *{position:relative;z-index:1}
.panel.dark::after,.panel.blue::after,.panelpie::after{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 20%,rgba(242,194,69,.70) 50%,rgba(255,255,255,.12) 80%,transparent)}
.panel.amber::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.45) 22%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.45) 78%,transparent)}
.g3 .panel:hover,.g4 .panel:hover,.g2 .panel:hover{transform:translateY(-3px)}
.cuerpo{padding:24px}
.ph{padding:16px 20px;border-bottom:1px solid var(--line2);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14.5px;font-weight:600}
.dark .ph,.blue .ph{border-color:rgba(139,190,255,.16)} .amber .ph{border-color:rgba(23,27,42,.16)}
.ph small{font-size:12.5px;font-weight:400;color:var(--t3)}
.dark .ph small{color:var(--tinta-tx)}
.blue .ph small{color:#fff}
.row{padding:12px 20px;display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:14.5px;border-bottom:1px solid var(--line2)}
.dark .row{border-color:rgba(139,190,255,.13)} .blue .row{border-color:rgba(255,255,255,.16)}
.row span{color:var(--t2)} .dark .row span{color:var(--tinta-tx)}
.blue .row span{color:#fff}
.row b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.row.hi{background-color:#FBF3DC;background-image:linear-gradient(96deg,rgba(242,194,69,.22),rgba(47,115,211,.14));
  box-shadow:inset 0 0 46px -14px rgba(242,194,69,.55)}
.dark .row.hi{background-color:#2B2A1A;background-image:linear-gradient(96deg,rgba(242,194,69,.16),rgba(139,190,255,.10));
  box-shadow:inset 0 0 52px -12px rgba(242,194,69,.34)}
.row.hi b{font-size:22px;letter-spacing:-.03em;text-shadow:0 0 22px rgba(242,194,69,.45)}
.dark .row.hi b{color:var(--amb);text-shadow:0 0 30px rgba(242,194,69,.58)}
.tl{display:flex;align-items:center;gap:12px}
.ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--azul-soft)}
.ic.a{background:var(--amb-soft)}
.dark .ic,.blue .ic{background:rgba(255,255,255,.10)} .amber .ic{background:rgba(23,27,42,.14)}
.tl + p,.tl + .lista,.tl + .cif{margin-top:20px}
.lista{list-style:none}
.lista li{display:flex;gap:12px;align-items:baseline;padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--line2);font-size:15px;color:var(--t2)}
.lista li:last-child{border-bottom:0}
.lista li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--azul);flex:none;transform:translateY(-2px)}
.dark .lista li{border-color:rgba(255,255,255,.12);color:var(--tinta-tx)}
.blue .lista li{border-color:rgba(255,255,255,.16);color:#fff}
.dark .lista li::before,.blue .lista li::before{background:var(--amb)}
.amber .lista li{border-color:rgba(23,27,42,.16);color:rgba(23,27,42,.78)}
.amber .lista li::before{background:var(--tinta)}
section{padding-top:80px;padding-bottom:80px}
.sec-h{max-width:46ch;margin-bottom:32px}
.sec-h p{margin-top:16px;font-size:16.5px}
.sec-h h2{position:relative;padding-bottom:14px}
.sec-h h2::after{content:"";position:absolute;left:0;bottom:0;width:76px;height:3px;border-radius:2px;background-color:#2F73D3;background-image:linear-gradient(90deg,#2F73D3,#F2C245)}
section:nth-of-type(even) .sec-h h2::after{background-image:linear-gradient(90deg,#F2C245,#2F73D3)}
/* Tarjetas de contacto: UN solo contenedor y UNA sola separación, así todos
   los huecos son iguales por construcción. El email ocupa la fila entera
   porque la dirección no cabe en una columna estrecha. */
.contacto{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px}
.contacto > .panel{flex:1 1 220px}
.contacto > .panel.ancho{flex:1 1 100%}
.g2{display:grid;gap:16px}@media(min-width:900px){.g2{grid-template-columns:1.1fr .9fr;align-items:start}}
.g3{display:grid;gap:16px}@media(min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}}
.g4{display:grid;gap:16px}@media(min-width:820px){.g4{grid-template-columns:repeat(4,1fr)}}
.mini{padding:24px}
.mini b{display:block;font-size:32px;font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.mini span{display:block;font-size:13.5px;color:var(--t2);margin-top:8px}
.dark .mini span{color:var(--tinta-tx)} .dark .mini b{color:var(--amb)}
.blue .mini span{color:#fff}
.amber .mini span{color:rgba(23,27,42,.74)}
.cif{font-size:36px;font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;display:block}
.cif + small{display:block;font-size:12.5px;color:var(--t3);margin-top:6px}
.paso{padding:24px}
.paso .n{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;margin-bottom:15px;
  background:var(--amb);color:var(--tinta);font-variant-numeric:tabular-nums;background-image:linear-gradient(180deg,rgba(255,255,255,.26),rgba(23,27,42,.08))}
.paso h3{margin-bottom:7px} .paso p{font-size:14.5px}
.dark .paso p{color:var(--tinta-tx)}
details{border-bottom:1px solid var(--line2)}
details:last-of-type{border-bottom:0}
summary{list-style:none;cursor:pointer;padding-top:18px;padding-bottom:18px;font-size:16.5px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:22px;font-weight:400;color:var(--azul);flex:none}
details[open] summary::after{content:"–"}
details p{padding-bottom:18px;font-size:15px}
form .campo{margin-bottom:15px}
label{display:block;font-size:13.5px;font-weight:500;margin-bottom:6px;color:var(--t2)}
input,textarea,select{width:100%;font:400 15.5px/1.4 var(--f);color:var(--tinta);background:var(--bg);
  border:1px solid var(--line);border-radius:10px;padding-top:13px;padding-bottom:13px;padding-left:14px;padding-right:14px}
textarea{min-height:96px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(47,115,211,.22)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--t2);margin:6px 0 18px}
.consent input{width:auto;margin-top:3px;accent-color:var(--azul)}
.consent a{color:var(--azul-tx)}
.dato{padding:20px}
.dato h3,.dato .et{display:block;font-size:12.5px;color:var(--t3);font-weight:500;letter-spacing:0;margin-bottom:5px}
.dark .dato h3,.dark .dato .et{color:var(--tinta-tx)}
.blue .dato h3,.blue .dato .et{color:#fff}
.dato p{font-size:17px;font-weight:600;color:var(--tinta);max-width:none}
.dark .dato p,.blue .dato p{color:#fff}
.amber .dato h3,.amber .dato .et{color:rgba(23,27,42,.66)}
.dato a{text-decoration:none}
/* El correo no se parte nunca. Para que quepa, va SIEMPRE en una tarjeta a
   ancho completo, no en una columna de tres: ahí no cabe a ningún tamaño
   razonable y acaba partiéndose por el dominio o desbordando. */
.dato p.mail{white-space:nowrap;letter-spacing:-.01em;font-size:16px}
@media(max-width:420px){.dato p.mail{font-size:14px}}
footer{padding-bottom:40px;margin-top:64px}
.panelpie{background-color:#171B2A;background-image:linear-gradient(158deg,#2A3253 0%,#1E2440 46%,#161B31 100%);
  border:1px solid #31354E;border-radius:18px;padding:44px 44px 32px;color:#fff;box-shadow:var(--sombraD);position:relative;overflow:hidden}
.fgrid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.flinks{display:flex;flex-wrap:wrap;font-size:14.5px}
.flinks a{color:var(--tinta-tx);text-decoration:none;margin-right:20px}
.flinks a:hover{color:var(--amb)}
/* En móvil los enlaces del pie se envuelven en filas desiguales y quedan
   descuadrados: pasan a una columna, uno por línea. */
@media(max-width:900px){
  footer .flinks{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%}
  footer .flinks a{margin-right:0;display:block}
}
.legal{margin-top:32px;padding-top:24px;border-top:1px solid var(--tinta-3);font-size:12.5px;color:#7C86A8;line-height:1.7}
@media (prefers-color-scheme: dark){html,body,#lienzo{background-color:#EFF1F7 !important;color:#171B2A !important}}
.panel.dark{background-color:#171B2A !important;color:#fff}
.panel.blue{background-color:#2F73D3 !important;color:#fff}
.panel.amber{background-color:#F2C245 !important;color:#171B2A}