/* finkea.es — sistema visual común (docs/web_rediseno_identidad.md).
   Una tipografía (Inter, autoalojada), un color de acción, superficies planas y el logo como motivo.
   Nada de etiquetas «//», monoespaciada, degradados decorativos, sombras en reposo ni emojis. */

@font-face{font-family:'Inter';src:url('/fonts/Inter-normal-400-latin.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Inter';src:url('/fonts/Inter-normal-500-latin.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'Inter';src:url('/fonts/Inter-normal-600-latin.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:'Inter';src:url('/fonts/Inter-normal-700-latin.woff2') format('woff2');font-weight:700;font-display:swap;}

:root{
  --noche:#0A1A1D; --alba:#173438; --suelo:#EEF3F0; --clara:#F7F9F7; --media:#DCE8E3;
  --tinta:#0E1C1B; --suave:#4A5F5C; --tinta-n:#EAF2EF; --suave-n:#94ABA7;
  --accion:#1F8F86; --accion-h:#17756D; --accion-n:#3FB6A8; --luz:#F2C46B;
  --m:32px; --max:1320px; --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--noche);}
@media (pointer:fine){ html{overscroll-behavior:none;} }
body{margin:0; background:var(--suelo); color:var(--tinta); font:400 18px/1.55 'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; font-feature-settings:'cv11','ss01';}
img{max-width:100%; height:auto; display:block;}
a{color:var(--accion); text-underline-offset:3px; text-decoration-thickness:1px;}
:focus-visible{outline:2px solid var(--accion-n); outline-offset:3px; border-radius:4px;}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.035em; text-wrap:balance;}
p{margin:0; text-wrap:pretty;}
.num{font-variant-numeric:tabular-nums;}
.w{max-width:var(--max); margin:0 auto; padding:0 var(--m);}
.g{display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px;}
.skip{position:absolute; left:-999px;} .skip:focus{left:16px; top:16px; background:#fff; color:var(--tinta); padding:8px 12px; z-index:50;}
.oscuro{background:var(--noche); color:var(--tinta-n);} .oscuro h1,.oscuro h2{color:#fff;}

/* botón plano y enlace */
.btn{display:inline-flex; align-items:center; min-height:50px; padding:0 24px; border-radius:10px; background:var(--accion); color:#fff; font-weight:600; font-size:16px; text-decoration:none; border:0; cursor:pointer; font-family:inherit; transition:background-color .2s var(--ease), transform .2s var(--ease);}
.btn:hover{background:var(--accion-h); color:#fff;} .btn:active{transform:translateY(1px);}
.oscuro .btn{background:var(--accion-n); color:#06201F;} .oscuro .btn:hover{background:#5cc7ba; color:#06201F;}
.lnk{font-weight:500; color:inherit; text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent);}
.lnk:hover{text-decoration-color:currentColor;}

h2{font-size:clamp(34px,4.4vw,62px); line-height:1.02;}
.sub{font-size:20px; margin-top:22px; max-width:33em;}
.oscuro .sub{color:var(--tinta-n);}
.cap{font-size:14px; color:var(--suave); margin-top:12px;} .oscuro .cap{color:var(--suave-n);}
.cap a{color:inherit;}
section{padding:140px 0;}
.clara{background:var(--clara);} .media{background:var(--media);} .suelo{background:var(--suelo);}
.hora{display:block; font-size:clamp(64px,10vw,152px); font-weight:600; letter-spacing:-.06em; line-height:.85; font-variant-numeric:tabular-nums; color:var(--accion);}
.oscuro .hora{color:var(--accion-n);}

/* navegación: en las páginas interiores va sobre la noche */
.nav{padding:24px 0;}
.nav .w{display:flex; align-items:center; gap:40px;}
.nav img{height:26px; width:auto;}
.nav ul{list-style:none; margin:0 0 0 auto; padding:0; display:flex; gap:28px;}
.nav ul a{color:#fff; text-decoration:none; font-size:15px; font-weight:500; opacity:.86;} .nav ul a:hover{opacity:1;}
.nav ul a[aria-current]{opacity:1; text-decoration:underline; text-underline-offset:6px; text-decoration-color:var(--accion-n);}
.nav .btn{min-height:42px; font-size:15px; padding:0 18px;}
.miga{font-size:14px; color:var(--suave-n);} .miga a{color:var(--tinta-n); text-decoration:none;} .miga a:hover{text-decoration:underline;}

/* cabecera de página interior */
.cab{padding-top:40px; padding-bottom:140px;} /* solo arriba y abajo: el margen lateral es el de .w */
.cab .izq{grid-column:1 / span 6; align-self:center;}
.cab h1{font-size:clamp(44px,5.4vw,84px); line-height:.96; letter-spacing:-.05em; margin-top:28px;}
.cab h1 em{font-style:normal; color:var(--luz);}
.cab .lead{font-size:20px; margin-top:26px; max-width:30em; color:var(--tinta-n);}
.cab .acc{display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:34px;}
.cab .meta{margin-top:30px; font-size:15px; color:var(--suave-n);}
.cab .der{grid-column:8 / span 5; align-self:center;}
.cab .der img{border-radius:12px;}
.cab .der img.alta{max-height:600px; width:auto; margin:0 auto;}

/* bloques de las páginas interiores */
.lista3{display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:72px;}
.lista3 h3{font-size:24px; letter-spacing:-.025em; margin-bottom:10px;}
.pasos .a{grid-column:1 / span 4;} .pasos .a .pin{position:sticky; top:48px;}
.pasos .b{grid-column:6 / span 7;}
.pasos ol{margin:0; padding:0 0 0 1.6em; display:grid; gap:44px;}
.pasos li::marker{color:var(--suave); font-weight:600; font-size:20px;}
.pasos li h3{font-size:26px; letter-spacing:-.025em;} .pasos li p{margin-top:8px;}
.dos{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;}
.dos img{border-radius:12px;}
ul.l{list-style:none; margin:40px 0 0; padding:0; display:grid; gap:24px;}
ul.l li b{display:block; font-weight:600; font-size:19px; margin-bottom:2px;}
ul.l.l2{grid-template-columns:1fr 1fr; column-gap:48px; max-width:1000px;}
.dos h3{font-size:24px; letter-spacing:-.025em;} .dos h3 + ul.l{margin-top:24px;}
.grande h2{font-size:clamp(44px,6.4vw,96px); line-height:.95; letter-spacing:-.05em; max-width:11em;}
.mas{display:grid; grid-template-columns:repeat(3,1fr); gap:24px 48px; margin-top:56px;}
.mas a{color:var(--tinta); text-decoration:none; display:block;}
.mas a b{display:block; font-size:24px; font-weight:600; letter-spacing:-.025em; margin-bottom:6px;}
.mas a b::after{content:" →"; color:var(--accion);}
.mas a span{color:var(--suave);}
.mas a:hover b{color:var(--accion);}

/* fragmentos de interfaz dibujados (lo que ve el proveedor o el gestor) */
.ot{background:#fff; color:var(--tinta); border-radius:16px; padding:22px 24px; max-width:420px; margin:0 auto; font-size:14px;}
.media .ot{background:#fff;}
.ot .bar{font-size:12px; color:var(--suave); margin-bottom:12px;}
.ot .st{display:inline-block; font-size:12px; font-weight:600; color:var(--accion-h); background:#E3F4F0; border-radius:6px; padding:3px 10px;}
.ot .t{font-weight:600; font-size:18px; margin:10px 0 14px; letter-spacing:-.02em;}
.ot .f{background:var(--clara); border-radius:10px; padding:9px 12px; margin-top:8px; color:var(--suave); font-size:13px;}
.ot .f b{display:block; color:var(--tinta); font-size:12px; font-weight:600; margin-bottom:2px;}
.ot .row{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.ot .go{margin-top:14px; background:var(--accion); color:#fff; font-weight:600; text-align:center; border-radius:10px; padding:11px;}

/* precios */
.planes{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; max-width:900px;}
.plan{background:#fff; border-radius:16px; padding:32px;}
.plan.dest{background:var(--noche); color:var(--tinta-n);}
.plan .t{font-size:15px; font-weight:600; color:var(--accion); margin-bottom:14px;} .plan.dest .t{color:var(--luz);}
.plan .p{font-weight:600; font-size:clamp(56px,6vw,84px); line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums;} .plan.dest .p{color:#fff;}
.plan .p small{font-size:18px; font-weight:500; letter-spacing:0;}
.plan .d{font-size:15px; color:var(--suave); margin-top:10px;} .plan.dest .d{color:var(--suave-n);}
.plan .x{font-size:16px; margin-top:16px;}

/* preguntas a la vista, en dos columnas */
.faq{display:grid; grid-template-columns:1fr 1fr; gap:56px 72px; margin-top:72px;}
.faq h3{font-size:21px; letter-spacing:-.02em; margin-bottom:10px;}

/* la llamada (fragmento real de interfaz) */
.llamada{background:#10262A; border:1px solid #21403F; border-radius:16px; padding:28px; font-size:16px; color:var(--tinta-n); min-height:470px;}
.llamada .top{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:22px;}
.llamada .top b{font-weight:600; color:#fff; font-size:17px;}
.llamada .reloj{font-variant-numeric:tabular-nums; color:var(--accion-n); font-weight:600;}
.llamada ol{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.llamada li{opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease), transform .45s var(--ease);}
.llamada li.on{opacity:1; transform:none;}
.llamada .quien{font-size:13px; color:var(--suave-n); margin-bottom:3px;}
.llamada .burbuja{background:#173236; border-radius:12px; padding:12px 14px; max-width:92%;}
.llamada .ia .burbuja{background:#1E4A47; margin-left:auto;} .llamada .ia .quien{text-align:right;}
.llamada .ficha{display:flex; gap:10px; flex-wrap:wrap; font-size:14px;}
.llamada .chip{background:#173236; border-radius:8px; padding:6px 10px;} .llamada .chip.pres{background:#3A3420; color:#F2D58A;}
.llamada .exp{border:1px solid var(--accion-n); border-radius:12px; padding:14px 16px;}
.llamada .exp b{color:#fff; font-weight:600; display:block;} .llamada .exp span{font-size:14px; color:var(--suave-n);} .llamada .urg{color:#F4A39A;}
.ejemplo{font-size:13px; color:var(--suave-n); margin-top:12px;}

/* el logo con sus ventanas */
.fachada{display:block; width:100%; height:auto;}
.fachada .silueta{fill:#122A2E;} .fachada .trazo{fill:#3FB6A8;}
.fachada .v{fill:#1B373B; transition:fill .5s var(--ease);} .fachada .v.on{fill:var(--luz);}
.fachada-nota{font-size:14px; color:var(--suave-n); margin-top:14px;}
.fin.anima .trazo{fill:transparent; stroke:var(--accion-n); stroke-width:3; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.6s var(--ease), fill .6s var(--ease);}
.fin.anima .silueta{opacity:0; transition:opacity .8s var(--ease);}
.fin.anima.dibujado .trazo{stroke-dashoffset:0;} .fin.anima.relleno .trazo{fill:#3FB6A8;} .fin.anima.relleno .silueta{opacity:1;}

/* cierre común y pie */
.cierre{background:var(--noche); color:var(--tinta-n); padding:140px 0 0; overflow:hidden;}
.cierre h2{color:#fff; max-width:12em;}
.cierre .g{align-items:end;}
.cierre .txt{grid-column:1 / span 6; padding-bottom:140px;}
.cierre .sub{margin:24px 0 40px; max-width:30em;}
.cierre .acc{display:flex; gap:24px; align-items:center; flex-wrap:wrap;}
.cierre .priv{font-size:14px; color:var(--suave-n); margin-top:20px;} .cierre .priv a{color:#fff;}
.cierre .logo-fin{grid-column:8 / span 5;}
.cierre .logo-fin .fachada-nota{margin:16px 0 40px;}
footer{background:var(--noche); color:var(--suave-n); padding:44px 0 48px; border-top:1px solid #17302F; font-size:15px;}
footer .w{display:grid; grid-template-columns:repeat(12,1fr); column-gap:24px; row-gap:24px;}
footer .marca{grid-column:1 / span 4;} footer .marca img{height:24px; width:auto; margin-bottom:12px;}
footer ul{grid-column:5 / span 8; list-style:none; margin:0; padding:0; columns:3; column-gap:24px;}
footer li{margin-bottom:10px; break-inside:avoid;}
footer a{color:var(--tinta-n); text-decoration:none;} footer a:hover{color:#fff; text-decoration:underline;}
footer .legal{grid-column:1 / -1; padding-top:24px; border-top:1px solid #17302F; display:flex; gap:24px; flex-wrap:wrap;}

/* texto largo (garantías, legales, guías) */
.texto{max-width:760px;}
.texto h2{font-size:clamp(28px,3vw,40px); margin:56px 0 16px;}
.texto h3{font-size:22px; margin:36px 0 10px; letter-spacing:-.02em;}
.texto p,.texto li{margin:0 0 14px;}
.texto ul,.texto ol{padding-left:1.3em; margin:0 0 14px;}

/* movimiento: solo con JS y si el visitante no pide menos */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .js .rv.in{opacity:1; transform:none;}
}
@media (prefers-reduced-motion:reduce){ .llamada li{opacity:1; transform:none;} }

@media (max-width:900px){
  :root{--m:20px;} body{font-size:17px;} section{padding:96px 0;}
  .nav ul{display:none;} .nav .btn{margin-left:auto;}
  .cab .izq,.cab .der,.pasos .a,.pasos .b,.cierre .txt,.cierre .logo-fin{grid-column:1 / -1;}
  .cab{padding-bottom:96px;} .cab .der{margin-top:48px;} .llamada li{opacity:1; transform:none;}
  .lista3,.faq,.mas,.dos,.planes,ul.l.l2{grid-template-columns:1fr;}
  .dos{gap:48px;}
  .pasos .a .pin{position:static; margin-bottom:48px;}
  .cierre .txt{padding-bottom:56px;} .cierre .logo-fin{max-width:420px;}
  footer ul{grid-column:1 / -1; columns:2;} footer .marca{grid-column:1 / -1;}
}