/*
  Landing Tres Cantos — estilos (marketing, octubre 2026, MET-52).
  Diseño de marketing ("Programas Superiores Tres Cantos") casi tal cual. Cambios: solo modo
  claro (el logo de Método es oscuro sobre blanco), logo original de Método en vez de la "m"
  del modelo, mapa de Google Maps en un iframe en vez del dibujo, bloque legal del formulario
  como el resto de landings, aviso de cookies propio y sin estilos en línea.
*/
:root{
  color-scheme:light;
  --bg:#eef4f8; --surface:#ffffff; --surface-2:#e2edf4; --ink:#0a1e31; --ink-soft:#4a6175; --line:#cddce7;
  --blue:#0091ca; --cyan:#00bce4; --deep:#06314f; --lime:#d4f65a; --lime-ink:#1d2b00;
  --on-blue:#ffffff; --band:#00a6dc; --dark-card:#0a1e31; --dark-card-ink:#eaf4fb; --dark-field:#132f48; --dark-line:#244a68;
  --ok:#1f9d62; --err:#d23b3b; --shadow:0 18px 40px -18px rgba(6,49,79,.35);
  --display:"Urbanist", "Segoe UI", system-ui, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r-lg:28px; --r-md:20px; --r-sm:12px;
}
[hidden]{display:none!important}
img{max-width:100%}
body{margin:0}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Las anclas no quedan tapadas por la cabecera fija. */
section[id]{scroll-margin-top:72px}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.grad{background:linear-gradient(100deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:999px;background:var(--deep);color:var(--lime)}
.eyebrow.light{background:var(--surface);color:var(--blue);border:1px solid var(--line)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:600;font-size:15px;padding:13px 22px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease, background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--blue);color:var(--on-blue);box-shadow:0 10px 24px -10px var(--blue)}
.btn-primary:hover{background:var(--cyan)}
.btn-lime{background:var(--lime);color:var(--lime-ink)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn .arr{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2)}

/* Header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent}
header.site.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.03em;color:var(--ink)}
/* Logo original de Método (MET-52), con la sede al lado. */
.logo-img{height:36px;width:auto;display:block}
.logo-sede{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding-left:10px;border-left:1px solid var(--line);line-height:1.3}
@media (max-width:420px){.logo-img{height:30px}.logo-sede{display:none}}
.nav-links{display:flex;gap:26px;font-size:14px;font-weight:500}
.nav-links a{text-decoration:none;color:var(--ink-soft)}
.nav-links a:hover{color:var(--blue)}
.nav .btn{padding:10px 18px;font-size:14px}
@media (max-width:860px){.nav-links{display:none}}

/* Hero */
.hero{padding-block:56px 40px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(28px,4vw,46px);font-weight:700;max-width:24ch}
.hero .sub{font-size:clamp(17px,1.6vw,20px);color:var(--ink-soft);max-width:34ch;margin-top:20px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line);max-width:460px}
.hero .sub strong{color:var(--ink);font-weight:700}
.chip{font-size:13.5px;font-weight:600;padding:7px 15px;border-radius:999px;border:1px solid var(--line);color:var(--ink);background:var(--surface);text-decoration:none;transition:border-color .15s,color .15s,background .15s}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.prog.flash{border-color:var(--cyan);box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 30%,transparent)}
.prog{scroll-margin-top:96px}
/* Ilustración del hero (MET-52): imagen de marketing en vez de las tarjetas del modelo. */
.hero-art{display:flex;align-items:center;justify-content:center;min-width:0}
.hero-art img{width:100%;max-width:520px;height:auto;display:block}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}.hero-art img{max-width:400px}}
/* En movil la ilustracion del hero no se ensena (MET-53). */
@media (max-width:800px){.hero-art{display:none}}

/* Section */
section{padding-block:72px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.sec-head h2{font-size:clamp(30px,3.8vw,46px);font-weight:700;max-width:22ch;margin-top:16px}
.sec-head p{color:var(--ink-soft);max-width:38ch}

/* Ventajas */
.adv-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.adv{border-radius:var(--r-md);padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;min-width:0}
.adv h3{font-size:17px;font-weight:700;line-height:1.2;padding-right:42px;min-height:2.4em}
.adv p{font-size:13.5px;line-height:1.45;opacity:.9}
.adv .ic{position:absolute;top:14px;right:14px;width:34px!important;height:34px!important;border-radius:10px!important}
.adv .ic svg{width:18px!important;height:18px!important}
.adv .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center}
.adv .big{position:absolute;right:-4px;top:-14px;font-family:var(--display);font-weight:800;font-size:84px;line-height:1;opacity:.13;pointer-events:none;letter-spacing:-.05em}
.adv.t1{background:var(--lime);color:var(--lime-ink)}
.adv.t1 .ic{background:var(--lime-ink);color:var(--lime)}
.adv.t2{background:linear-gradient(140deg,var(--blue),var(--deep));color:#fff}
.adv.t2 .ic{background:rgba(255,255,255,.16)}
.adv.t3{background:var(--surface);border:1px solid var(--line)}
.adv.t3 .ic{background:var(--surface-2);color:var(--blue)}
.adv.t4{background:var(--cyan);color:#022a3a}
.adv.t4 .ic{background:rgba(255,255,255,.4)}
.adv.t5{background:var(--deep);color:#eaf4fb}
.adv.t5 .ic{background:var(--blue);color:#fff}
.adv .ic svg{width:24px;height:24px}
@media (max-width:900px){.adv-scroll{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-inline:-4px;padding-inline:4px}.adv-grid{grid-template-columns:repeat(5,230px)}.adv{scroll-snap-align:start}}

/* Programs */
.prog-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.prog{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:22px;min-width:0;transition:border-color .2s, transform .2s, box-shadow .2s}
.prog:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--shadow)}
.prog-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.prog .pic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;color:#fff;flex:none}
.prog .pic svg{width:28px;height:28px}
.ects{text-align:right;flex:none}
.ects b{font-family:var(--display);font-size:34px;line-height:1;display:block;font-variant-numeric:tabular-nums}
.ects small{font-size:12px;color:var(--ink-soft);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.prog .kicker{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--blue)}
.prog h3{font-size:24px;font-weight:700;margin-top:6px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14px;padding-top:18px;border-top:1px dashed var(--line)}
.facts dt{color:var(--ink-soft);font-weight:500}
.facts dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.prog-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.prog-actions .btn{padding:11px 18px;font-size:14px}
@media (max-width:820px){.prog-grid{grid-template-columns:1fr}}

/* Steps band */
.band{background:var(--band);color:#fff;position:relative;overflow:hidden}
.band::after{content:"MÉTODO";position:absolute;left:50%;bottom:-0.28em;transform:translateX(-50%);font-family:var(--display);font-weight:800;font-size:clamp(120px,22vw,300px);letter-spacing:-.04em;line-height:1;color:rgba(255,255,255,.09);pointer-events:none;white-space:nowrap}
.band-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;z-index:1}
.band h2{font-size:clamp(30px,3.6vw,44px);font-weight:700}
.band .lead{margin-top:14px;max-width:40ch;opacity:.9}
.steps{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.steps li{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:var(--r-md);padding:18px 20px}
.steps .n{flex:none;width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:18px}
.steps b{display:block;font-family:var(--display);font-size:18px}
.steps span{font-size:15px;opacity:.9}
@media (max-width:860px){.band-grid{grid-template-columns:1fr}}

/* Form */
.form-sec .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start}
.form-aside h2{font-size:clamp(30px,3.6vw,44px);font-weight:700;margin-top:16px}
.form-aside p{color:var(--ink-soft);margin-top:14px;max-width:40ch}
.assure{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:12px}
.assure li{display:flex;gap:12px;align-items:center;font-weight:500}
.assure li i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:800}
.fcard{background:var(--dark-card);color:var(--dark-card-ink);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow);min-width:0}
.fcard h3{font-size:24px;font-weight:700}
.fcard .fsub{color:#9fbbd0;font-size:14px;margin-top:6px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label,.field legend{font-size:13px;font-weight:600;color:#c6d9e7}
.field input[type=text],.field input[type=tel],.field input[type=email],.field select{width:100%;font:inherit;font-size:15px;color:#fff;background:var(--dark-field);border:1.5px solid var(--dark-line);border-radius:var(--r-sm);padding:12px 14px;transition:border-color .15s;color-scheme:dark}
.field input::placeholder{color:#6f8ea6}
.field input:focus,.field select:focus{outline:none;border-color:var(--cyan)}
.field.bad input,.field.bad select{border-color:var(--err)}
.field .err{font-size:12.5px;color:#ff8f8f;min-height:0}
.field .err:empty{display:none}
fieldset.field{border:0;padding:0;margin:0}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg label{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-sm);border:1.5px solid var(--dark-line);background:var(--dark-field);cursor:pointer;font-size:14.5px;font-weight:500;color:#fff}
.seg input{accent-color:var(--cyan);width:18px;height:18px;margin:0}
.seg label:has(input:checked){border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 18%,var(--dark-field))}
.notice{grid-column:1/-1;font-size:13.5px;background:color-mix(in srgb,var(--lime) 14%,transparent);border:1px solid color-mix(in srgb,var(--lime) 45%,transparent);color:#eef8c8;padding:12px 14px;border-radius:var(--r-sm)}
.consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:#a9c2d4}
.consent input{accent-color:var(--cyan);width:18px;height:18px;margin-top:2px;flex:none}
.fgrid .btn{grid-column:1/-1;width:100%;padding:15px;font-size:16px}
.success{text-align:center;padding:30px 10px}
.success .tick{width:72px;height:72px;border-radius:50%;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;margin:0 auto 18px;font-size:34px;font-weight:800}
.success h3{font-size:26px}
.success p{color:#b8cfdf;margin-top:10px}
@media (max-width:900px){.form-sec .grid{grid-template-columns:1fr}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}.seg{grid-template-columns:1fr}.fcard{padding:24px 18px}}

/* Map */
.map-card{display:grid;grid-template-columns:1.3fr .7fr;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.map-art{position:relative;min-height:340px;background:var(--surface-2);min-width:0}
/* Google Maps interactivo (MET-52). */
.map-art iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map-info{padding:32px;display:flex;flex-direction:column;gap:18px;justify-content:center}
.map-info h3{font-size:26px;font-weight:700}
.map-info address{font-style:normal;color:var(--ink-soft);font-size:16px}
.map-info .btns{display:flex;flex-direction:column;gap:10px}
.map-info .btn{justify-content:flex-start}
.map-info .btn svg{width:18px;height:18px}
@media (max-width:820px){.map-card{grid-template-columns:1fr}.map-art{min-height:260px}}

/* Program detail */
.crumbs{font-size:14px;color:var(--ink-soft);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--blue);text-decoration:none;font-weight:600}
.p-hero{padding-block:36px 24px}
.p-hero-card{border-radius:var(--r-lg);padding:40px;color:#fff;position:relative;overflow:hidden;margin-top:20px}
.p-hero-card::after{content:attr(data-ects);position:absolute;right:-10px;bottom:-60px;font-family:var(--display);font-weight:800;font-size:clamp(160px,22vw,280px);line-height:1;opacity:.12;letter-spacing:-.05em}
.p-hero-card .kicker{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;opacity:.85}
.p-hero-card h1{font-size:clamp(30px,4.4vw,52px);font-weight:700;margin-top:10px;max-width:22ch;position:relative;z-index:1}
.p-hero-card .p-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;position:relative;z-index:1}
.kfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.kf{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;min-width:0}
.kf small{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.kf b{display:block;font-family:var(--display);font-size:22px;margin-top:6px;line-height:1.2;font-variant-numeric:tabular-nums}
.kf span{font-size:13.5px;color:var(--ink-soft)}
@media (max-width:860px){.kfacts{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.kfacts{grid-template-columns:1fr}.p-hero-card{padding:28px 22px}}
.p-body{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:start;padding-block:24px 72px}
.p-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px}
.block h2{font-size:26px;font-weight:700;margin-bottom:18px}
.obj{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.obj li{display:flex;gap:14px;align-items:flex-start}
.obj li::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--cyan);margin-top:9px;transform:rotate(45deg)}
.mods{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:m}
.mods li{counter-increment:m;display:flex;gap:16px;align-items:center;padding:14px 16px;border-radius:var(--r-sm);background:var(--surface-2);font-weight:600}
.mods li::before{content:counter(m,decimal-leading-zero);font-family:var(--display);font-weight:800;color:var(--blue);font-size:18px;min-width:28px;font-variant-numeric:tabular-nums}
.req h3{font-size:17px;margin:20px 0 10px}
.req .must{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--lime) 35%,var(--surface));color:var(--ink);font-weight:600}
.req .must i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--lime-ink);color:var(--lime);display:grid;place-items:center;font-size:13px;flex:none}
.req ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--ink-soft)}
.p-side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px)}
@media (max-width:980px){.p-body{grid-template-columns:1fr}.p-side{position:static}}
.other{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.other a{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px;transition:border-color .15s}
.other a:hover{border-color:var(--blue)}
.other small{font-size:12px;color:var(--blue);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.other b{font-family:var(--display);font-size:17px;line-height:1.25}
@media (max-width:760px){.other{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:32px;color:var(--ink-soft);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.view{animation:fade .35s ease}
@keyframes fade{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- Añadidos de la web (MET-52) ---- */
.sec-compacta{padding-top:32px}
.sec-ubicacion{padding-top:8px}
.band .btn-lime{margin-top:26px}
.band .btn-lime .arr{background:rgba(0,0,0,.08)}
.consent-err{grid-column:1/-1;font-size:12.5px;color:#ff8f8f;margin-top:-8px}
.consent-err:empty{display:none}
.consent a{color:#d7ecfa}
.success .btn-ghost{margin-top:22px;color:#eaf4fb;border-color:#2a4f6e}
.p-hero-card .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.otros-titulo{font-size:22px;margin:12px 0 14px}
.facts.facts-libre{border-top:0;padding-top:0;font-size:15px}
.legal-info{grid-column:1/-1;font-size:12px;line-height:1.5;color:#8fabc0}
.legal-info b{color:#c6d9e7;font-weight:600}
.legal-info a{color:#d7ecfa}
.form-error{grid-column:1/-1;font-size:13.5px;color:#ff8f8f;margin:0}
.btn[disabled]{opacity:.6;cursor:default;transform:none}
/* Trampa antispam: fuera de la vista, pero no display:none (algunos bots la saltan). */
.campo-oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
footer .legales a{color:inherit}
footer .logo-img{height:28px}

/* Aviso de cookies: la landing no carga el banner de la web, así que lleva el suyo, que
   guarda las mismas cookies (vale para toda la web y al revés). */
.aviso-cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:80;max-width:720px;margin:0 auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);padding:18px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.aviso-cookies p{flex:1 1 320px;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.aviso-cookies p a{color:var(--blue);font-weight:600}
.aviso-cookies .botones{display:flex;gap:8px;flex-wrap:wrap}
.aviso-cookies .btn{padding:10px 16px;font-size:14px}

/* Color de cada programa (tarjeta y cabecera de su ficha). */
.fondo-contable{background:linear-gradient(135deg,var(--blue),var(--deep))}
.fondo-laboral{background:linear-gradient(135deg,var(--cyan),var(--blue))}
.fondo-ofimatica{background:linear-gradient(135deg,var(--deep),#0b4f7a)}
.fondo-bigdata{background:linear-gradient(135deg,#0b4f7a,var(--cyan))}

/* Logos de financiación bajo los chips del hero (la imagen trae fondo blanco). */
.logos-financiacion{margin-top:22px;max-width:520px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px}
.logos-financiacion img{display:block;width:100%;height:auto}

/* Transiciones suaves en los mouseover (MET-52). Una sola curva y duración para toda la
   página. A propósito NO se apagan con "reducir movimiento" del sistema: Windows lo activa
   al quitar sus animaciones y entonces la página entera cambiaba de golpe. */
:root{--suave:cubic-bezier(.22,.61,.36,1);--t-suave:.35s}
.btn{transition:transform var(--t-suave) var(--suave),box-shadow var(--t-suave) var(--suave),background-color var(--t-suave) var(--suave),border-color var(--t-suave) var(--suave),color var(--t-suave) var(--suave),opacity var(--t-suave) var(--suave)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0);transition-duration:.12s}
.btn .arr{transition:transform var(--t-suave) var(--suave)}
.btn:hover .arr{transform:translateX(3px)}
.btn-primary:hover{box-shadow:0 14px 28px -12px var(--blue)}
.nav-links a,.crumbs a,.consent a,.legal-info a,.aviso-cookies p a,footer .legales a{transition:color var(--t-suave) var(--suave)}
header.site{transition:border-color var(--t-suave) var(--suave),background-color var(--t-suave) var(--suave)}
.chip{transition:border-color var(--t-suave) var(--suave),color var(--t-suave) var(--suave),background-color var(--t-suave) var(--suave),transform var(--t-suave) var(--suave)}
.chip:hover{transform:translateY(-1px)}
.prog{transition:border-color var(--t-suave) var(--suave),transform .45s var(--suave),box-shadow .45s var(--suave)}
.prog .pic{transition:transform .45s var(--suave)}
.prog:hover .pic{transform:scale(1.06) rotate(-3deg)}
.adv{transition:transform .45s var(--suave),box-shadow .45s var(--suave)}
.adv:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.steps li{transition:background-color var(--t-suave) var(--suave),transform var(--t-suave) var(--suave)}
.steps li:hover{background:rgba(255,255,255,.18);transform:translateX(4px)}
.other a{transition:border-color var(--t-suave) var(--suave),transform var(--t-suave) var(--suave),box-shadow var(--t-suave) var(--suave)}
.other a:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.kf,.block{transition:border-color var(--t-suave) var(--suave)}
.kf:hover{border-color:var(--blue)}
.field input[type=text],.field input[type=tel],.field input[type=email],.field select{transition:border-color var(--t-suave) var(--suave),box-shadow var(--t-suave) var(--suave)}
.field input:focus,.field select:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 25%,transparent)}
.seg label{transition:border-color var(--t-suave) var(--suave),background-color var(--t-suave) var(--suave)}
.seg label:hover{border-color:var(--cyan)}
.hero-art img{transition:transform .6s var(--suave)}
.hero-art img:hover{transform:rotate(-2deg) scale(1.02)}
/* Al pasar el ratón, además del borde, un halo azul que aparece poco a poco. */
:root{--halo:0 0 0 3px color-mix(in srgb,var(--blue) 16%,transparent)}
.chip:hover,.btn-ghost:hover,.kf:hover,.seg label:hover{box-shadow:var(--halo)}
.prog:hover,.other a:hover{box-shadow:var(--shadow),var(--halo)}
.btn-ghost,.kf{transition:border-color var(--t-suave) var(--suave),color var(--t-suave) var(--suave),box-shadow var(--t-suave) var(--suave),transform var(--t-suave) var(--suave),background-color var(--t-suave) var(--suave)}
.seg label{transition:border-color var(--t-suave) var(--suave),background-color var(--t-suave) var(--suave),box-shadow var(--t-suave) var(--suave)}
.chip{box-shadow:0 0 0 0 transparent}