/* Página de ciudad «New Jersey» — opción B aprobada por el usuario (5 Nov 2026): estructura del prototipo (palabra blanca
   enorme sobre la foto, datos y botones abajo, tarjetas con foto sobre fondo cálido, franja de foto, cierre oscuro),
   letras de la página de New York (mayúsculas de peso medio) y color #6F89E0.
   #6F89E0 lleva letra OSCURA (5,4 de contraste; con blanca, 3,3). Como texto sobre fondo claro se usa --azul-texto. */
:root{
  --azul:#6F89E0; --azul-press:#5D77D2; --azul-on:#14171C; --azul-texto:#3F59B8; --azul-claro:#A9B8EE; --noche:#1B2750;
  --ink:#14171C; --grafito:#3A3F47; --muted:#646A73;
  --bg:#FAF9F6; --surface:#F0ECE5; --line:#E2DED6;
  --font-display:"Montserrat",system-ui,sans-serif; --font-body:"Poppins",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace; --font-firma:"Mrs Saint Delafield",cursive;
  --r-xl:26px; --r-lg:18px; --gutter:clamp(12px,1.6vw,24px); --maxw:1400px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.6;overflow-x:clip}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--azul-texto);outline-offset:3px}
.wrap{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}
.salto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.salto:focus{width:auto;height:auto;clip-path:none;left:8px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;z-index:99}
.progreso{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--azul);transform:scaleX(0);transform-origin:0 50%;z-index:70;pointer-events:none}
.rombo{display:inline-block;width:8px;height:8px;transform:rotate(45deg);background:var(--azul);flex:none}
.ceja{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.h2{font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:clamp(25px,2.8vw,38px);line-height:1.06;letter-spacing:-.01em;margin-top:12px}
.txt{color:var(--grafito);max-width:60ch}
.sec{padding:clamp(52px,6.5vw,88px) 0 0}
.enlace{display:inline-flex;gap:10px;align-items:center;margin-top:16px;font-weight:500;font-size:14px;color:var(--azul-texto);text-underline-offset:4px}
.enlace svg{transition:transform .3s}
.enlace:hover svg{transform:translateX(4px)}

/* ===== Botones ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:12px 22px;border-radius:999px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;transition:background .3s,color .3s,transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn svg{transition:transform .3s}
.btn:hover svg{transform:translateX(4px)}
.btn--azul{background:var(--azul);color:var(--azul-on)}
.btn--azul:hover{background:var(--azul-press);box-shadow:0 16px 34px -14px rgba(111,137,224,.95)}
.btn--blanco{background:#fff;color:var(--ink)}
.btn--blanco:hover{background:#E9EDFB}
.btn--linea{border:1.5px solid rgba(255,255,255,.75);color:#fff}
.btn--linea:hover{background:#fff;color:var(--ink)}

/* ===== Cabecera ===== */
.top{position:sticky;top:0;z-index:50;background:rgba(250,249,246,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:box-shadow .3s}
.top.con-borde{box-shadow:0 1px 0 var(--line)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 8px}
.top__logo img{height:42px;width:auto}
.top nav{display:none;gap:24px;font-size:14px}
.top nav a{text-decoration:none}
.top nav a:hover{text-decoration:underline;text-underline-offset:4px}
.top .btn{display:none;min-height:44px;padding:8px 20px}
.idioma{font-family:var(--font-mono);font-size:12px;border:1.5px solid var(--ink);border-radius:999px;padding:7px 12px;text-decoration:none}
.top__der{display:flex;gap:10px;align-items:center}
@media (min-width:1200px){.top nav{display:flex}.top .btn{display:inline-flex}}

/* ===== Portada ===== */
.portada{position:relative;border-radius:var(--r-xl);overflow:hidden;color:#fff;isolation:isolate;min-height:clamp(620px,calc(100vh - 86px),800px);display:flex;flex-direction:column;justify-content:space-between}
.portada__foto{position:absolute;inset:0;z-index:-2}
.portada__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.portada::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,20,35,.66) 0%,rgba(8,20,35,.34) 42%,rgba(8,20,35,0) 72%),linear-gradient(180deg,rgba(8,30,55,.3) 0%,rgba(8,30,55,0) 32%,rgba(8,20,35,.4) 55%,rgba(8,20,35,.86) 100%)}
.gigante{font-family:var(--font-display);font-weight:800;text-transform:uppercase;text-align:center;white-space:nowrap;line-height:.9;letter-spacing:-.035em;font-size:12.7vw;padding-top:.22em}
@media (min-width:1432px){.gigante{font-size:182px}}
.portada__pie{padding:clamp(20px,3vw,40px);display:grid;gap:22px;align-items:end}
@media (min-width:900px){.portada__pie{grid-template-columns:1fr auto}}
.portada h1{font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:clamp(28px,3.4vw,48px);line-height:1.08;letter-spacing:-.02em;text-shadow:0 2px 22px rgba(0,0,0,.45)}
.portada .lead{margin-top:12px;font-family:var(--font-display);font-weight:500;font-size:clamp(14px,1.2vw,16px);max-width:46ch}
.datos{list-style:none;display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:18px}
.datos li{display:flex;flex-direction:column;font-size:12px;color:#E1E6EE;padding-right:26px;border-right:1px solid rgba(255,255,255,.3)}
.datos li:last-child{border:0;padding-right:0}
.datos b{font-family:var(--font-display);font-weight:700;font-size:clamp(15px,1.4vw,18px);color:#fff}
.acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.lado{display:grid;justify-items:end;gap:18px;text-align:right}
.firma{font-family:var(--font-firma);font-size:clamp(40px,4.2vw,60px);line-height:.9;transform:rotate(-6deg)}
.lugar{display:flex;gap:10px;align-items:center;font-size:13px;line-height:1.3;text-align:left}
.lugar .rombo{background:#fff}
@media (max-width:899px){
  .lado{justify-items:start;text-align:left}.portada .firma{display:none}
  .portada::after{background:linear-gradient(180deg,rgba(8,20,35,.45) 0%,rgba(8,20,35,.5) 32%,rgba(8,20,35,.72) 62%,rgba(8,20,35,.88) 100%)}
}

/* ===== Para quién ===== */
.dos{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.dos{grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px)}}
.dos__foto{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/10}
.dos__foto img{width:100%;height:100%;object-fit:cover}
.comunidades{list-style:none;display:grid;gap:12px;margin-top:clamp(26px,3.6vw,40px)}
@media (min-width:760px){.comunidades{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.comunidades{grid-template-columns:repeat(4,1fr)}}
.comunidad{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:8px;transition:transform .45s var(--ease),border-color .3s}
.comunidad:hover{transform:translateY(-5px);border-color:var(--azul)}
.comunidad .n{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.comunidad h3{font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:16px;line-height:1.2}
.comunidad p{font-size:14px;color:var(--grafito);flex:1}
.comunidad a{font-size:14px;font-weight:500;color:var(--azul-texto);text-decoration:none;margin-top:4px}
.comunidad a::after{content:"";position:absolute;inset:0}
.fila{list-style:none;display:grid;gap:14px;margin-top:clamp(26px,3.6vw,40px);grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.fila{grid-template-columns:repeat(4,1fr)}}
.fila li{padding-left:16px;border-left:1px solid var(--line)}
.fila b{display:block;font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:clamp(14px,1.45vw,19px);line-height:1.2}
.fila span{font-size:13px;color:var(--muted)}

/* ===== Video ===== */
.video-ciudad .caja{position:relative;margin-top:22px;border-radius:var(--r-xl);overflow:hidden;background:var(--noche);aspect-ratio:16/9}
.video-ciudad video{width:100%;height:100%;object-fit:cover}
.video__play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border:0;border-radius:50%;background:var(--azul);color:var(--azul-on);cursor:pointer;display:grid;place-items:center;transition:transform .35s var(--ease)}
.video__play:hover{transform:scale(1.1)}
.video__play[hidden]{display:none}
@media (max-width:699px){.video-ciudad .caja{aspect-ratio:9/16;max-width:420px;margin-inline:auto}.video__play{width:68px;height:68px;margin:-34px 0 0 -34px}}

/* ===== Servicios ===== */
.bloque{margin-top:clamp(40px,5.5vw,72px);background:var(--surface);border-radius:var(--r-xl);padding:clamp(20px,3vw,40px);display:grid;gap:24px}
@media (min-width:1000px){.bloque{grid-template-columns:.6fr 1.6fr;align-items:start}}
.tarjetas{list-style:none;display:grid;gap:12px}
@media (min-width:700px){.tarjetas{grid-template-columns:repeat(3,1fr)}}
.tarjeta{background:#fff;border-radius:var(--r-lg);overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s}
.tarjeta:hover{transform:translateY(-6px);box-shadow:0 22px 40px -24px rgba(27,39,80,.5)}
.tarjeta__foto{aspect-ratio:4/3;overflow:hidden}
.tarjeta__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transition:transform .8s var(--ease)}
.tarjeta:hover .tarjeta__foto img{transform:scale(1.06)}
.tarjeta__pie{padding:14px 16px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.tarjeta h3{font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:15px}
.tarjeta p{font-size:13px;color:var(--muted);line-height:1.35}
.tarjeta i{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;flex:none;transition:background .3s,border-color .3s}
.tarjeta:hover i{background:var(--azul);border-color:var(--azul)}
.tarjeta a{text-decoration:none;display:block;color:inherit}

/* ===== El mejor seguro ===== */
.tres{list-style:none;display:grid;gap:12px;margin-top:26px}
@media (min-width:900px){.tres{grid-template-columns:repeat(3,1fr)}}
.tipo{border-radius:var(--r-lg);padding:24px;border:1.5px solid var(--ink);background:#fff;display:flex;flex-direction:column;gap:12px}
.tipo .num{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:13px}
.tipo .num .rombo{width:11px;height:11px;background:none;border:2px solid currentColor}
.tipo h3{font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:18px;line-height:1.15}
.tipo p{font-size:15px}
.tipo.n{background:var(--noche);color:#fff;border-color:var(--noche)}
.tipo.n p{color:#D7DCEA}
.tipo.n .rombo{background:var(--azul-claro);border-color:var(--azul-claro)}
.tipo.a{background:var(--azul);border-color:var(--azul)}

/* ===== Franja de Beneficios en Vida ===== */
.franja{position:relative;margin-top:clamp(40px,5.5vw,72px);border-radius:var(--r-xl);overflow:hidden;color:#fff;isolation:isolate;min-height:400px;display:flex;align-items:flex-end;padding:clamp(22px,3vw,40px)}
.franja>img{position:absolute;inset:-8% 0;width:100%;height:116%;max-width:none;object-fit:cover;z-index:-2}
.franja::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,20,35,.84),rgba(8,20,35,.4) 62%,rgba(8,20,35,.14))}
.franja .ceja{color:#DCE2EC}
.franja .rombo{background:var(--azul-claro)}
.franja p{margin:10px 0 16px;max-width:58ch;font-size:15px}
.franja small{display:block;margin:-6px 0 16px;max-width:64ch;font-size:12px;color:#D5DBE5}
@media (max-width:899px){.franja::after{background:linear-gradient(180deg,rgba(8,20,35,.55),rgba(8,20,35,.82))}}
.casos{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:22px 8px 0}
@media (min-width:900px){.casos{grid-template-columns:repeat(4,1fr)}}
.casos li{display:flex;gap:12px;align-items:center;font-size:14px;line-height:1.3}
.casos .rombo{width:10px;height:10px}

/* ===== Retiro y Premium Finance ===== */
.doble{display:grid;gap:14px}
@media (min-width:900px){.doble{grid-template-columns:1fr 1fr}}
.serv{border-radius:var(--r-xl);padding:clamp(24px,3.2vw,38px);background:var(--surface);scroll-margin-top:90px}
.serv.oscuro{background:var(--noche);color:#fff}
.serv.oscuro .ceja{color:#C6CFE6}
.serv.oscuro .rombo{background:var(--azul-claro)}
.serv.oscuro p{color:#D7DCEA}
.serv.oscuro .enlace{color:var(--azul-claro)}
.serv .h2{font-size:clamp(22px,2.2vw,29px)}
.serv p{color:var(--grafito);margin-top:12px;font-size:15px}
.cifra{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(44px,5vw,68px);line-height:1;letter-spacing:-.03em;color:var(--azul-claro);margin-top:16px}

/* ===== Carolina ===== */
.quien{display:grid;gap:30px;align-items:center}
@media (min-width:900px){.quien{grid-template-columns:.7fr 1.3fr}}
.quien__foto{border-radius:999px 999px var(--r-xl) var(--r-xl);overflow:hidden;aspect-ratio:4/5;max-width:340px;width:100%;justify-self:center}
.quien__foto img{width:100%;height:100%;object-fit:cover}
.credenciales{list-style:none;display:grid;gap:8px;margin-top:16px;font-size:15px}
.credenciales li{display:flex;align-items:center;gap:10px}

/* ===== Mapa ===== */
.mapa{margin-top:24px;display:grid;gap:14px;background:var(--noche);color:#fff;border-radius:var(--r-xl);padding:clamp(12px,1.5vw,18px);overflow:hidden}
@media (min-width:1000px){.mapa{grid-template-columns:1.35fr 1fr;align-items:stretch}}
.mapa__lienzo{position:relative;border-radius:calc(var(--r-xl) - 10px);overflow:hidden;background:#101A38;aspect-ratio:4/3;min-height:0}
.mapa__lienzo svg{display:block;width:100%;height:100%}
.m-agua{fill:#101A38}
.mapa__lienzo svg{overflow:hidden}
.m-otro{fill:#1A2545;stroke:#2E3B66;stroke-width:1;vector-effect:non-scaling-stroke}
.m-nj{fill:#2A3766;stroke:#42508A;stroke-width:1;vector-effect:non-scaling-stroke;transition:fill .5s}
.m-bergen{fill:var(--azul);stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke}
.m-zona{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;fill:#AEB9DA;pointer-events:none;opacity:0;transition:opacity .5s}
.cerca .m-zona{opacity:1}
.m-etiqueta{font-family:var(--font-display);font-weight:700;font-size:15px;fill:#fff;paint-order:stroke;stroke:#101A38;stroke-width:4px;pointer-events:none}
.pin__onda{fill:none;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:onda 2.4s ease-out infinite}
.pin__onda+.pin__onda{animation-delay:1.2s}
@keyframes onda{0%{transform:scale(.4);opacity:1}100%{transform:scale(2.8);opacity:0}}
.pin__punto{fill:#fff;stroke:var(--noche);stroke-width:2.5;vector-effect:non-scaling-stroke}
.mapa__vistas{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap}
.mapa__vistas button{background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 14px;font-family:var(--font-mono);font-size:12px;cursor:pointer;min-height:38px}
.mapa__vistas button[aria-pressed="true"],.mapa__vistas button:hover{background:var(--azul);color:var(--azul-on);border-color:var(--azul)}
.sede{align-self:center;padding:clamp(10px,2vw,28px)}
.sede .ceja{color:#C6CFE6}
.sede .rombo{background:var(--azul-claro)}
.sede b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2vw,26px);margin-top:12px;line-height:1.2}
.sede .ciudad{display:block;color:#C9D0E2;font-size:15px;margin-top:2px}
.sede .tel{display:block;font-family:var(--font-display);font-weight:500;font-size:18px;text-decoration:none;margin-top:16px}
.sede .btn{margin-top:16px}
.nota-mapa{font-size:12px;color:#AEB9DA;margin-top:12px}

/* ===== Cierre ===== */
.cierre{margin-top:clamp(40px,5vw,64px);background:var(--azul);color:var(--azul-on);border-radius:var(--r-xl);padding:clamp(24px,3.6vw,44px);display:grid;gap:22px;align-items:center;position:relative;overflow:hidden}
@media (min-width:1000px){.cierre{grid-template-columns:1.3fr auto auto;gap:32px}}
.cierre .h2{margin-top:0;font-size:clamp(23px,2.6vw,36px)}
.cierre .tel{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(18px,1.7vw,22px);text-decoration:none;margin-bottom:10px}
.cierre .btn{background:var(--noche);color:#fff}
.cierre .btn:hover{background:#26356B}
.cierre .firma{color:var(--noche)}
@media (max-width:999px){.cierre .firma{display:none}.cierre .btn{width:100%}}
@media (max-width:520px){.solo-grande{display:none}}

/* ===== Preguntas ===== */
.faq{margin-top:26px;border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:clamp(15px,1.25vw,17px);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary .rombo{transition:transform .3s var(--ease)}
.faq details[open] summary .rombo{transform:rotate(225deg)}
.faq .resp{padding:0 0 20px;max-width:78ch;color:var(--grafito);font-size:15px}

/* ===== Más guías y pie ===== */
.guias{list-style:none;display:grid;gap:10px;margin-top:20px}
@media (min-width:800px){.guias{grid-template-columns:repeat(4,1fr)}}
.guias a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border-radius:var(--r-lg);border:1px solid var(--line);text-decoration:none;font-family:var(--font-display);font-weight:500;text-transform:uppercase;font-size:14px;transition:background .3s,transform .4s var(--ease)}
.guias a:hover{background:var(--azul);border-color:var(--azul);transform:translateY(-3px)}
.guias a:hover .rombo{background:var(--ink)}
.pie{background:var(--noche);color:#D7DCEA;padding:48px 0 36px;margin-top:clamp(52px,6.5vw,88px)}
.pie__logo{height:40px;width:auto}
.pie__desc{margin-top:16px;font-size:13px;max-width:82ch}
.pie__links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:20px;font-size:14px}
.pie__links a{text-decoration:none}
.pie__links a:hover{color:var(--azul-claro)}
.pie__copy{margin-top:20px;font-size:12px;color:#A9B1C8}

/* ===== Barra del celular ===== */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(250,249,246,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);transition:transform .35s var(--ease)}
.barra .btn{width:100%}
.barra.oculta{transform:translateY(110%)}
@media (min-width:900px){.barra{display:none}}
@media (max-width:899px){body{padding-bottom:78px}}

.js [data-in]{opacity:0}
@media (max-width:640px){.gigante{white-space:normal;font-size:19.5vw;line-height:.92;padding-top:.45em}.acciones .btn{width:100%}.datos li{border:0;padding-right:0}.mapa__lienzo{aspect-ratio:1/1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.pin__onda{animation:none;opacity:.5}}
.m-solo-cerca{opacity:0;transition:opacity .5s}
.cerca .m-solo-cerca{opacity:1}
.cierre .btn{gap:.4em}