/*
  Serena Bay Group — sistema de diseño ligero (v2).
  Capas: 1 tokens · 2 base · 3 layout · 4 componentes · 5 portada · 6 páginas · 7 movimiento.
  Decisiones y alternativas descartadas: docs/diseno.md. Paleta cerrada: docs/marca.md.
*/

/* ───────── fuentes (autoalojadas; optional = nunca hay salto de maquetación) ───────── */
@font-face{font-family:"Libre Baskerville";font-weight:400;font-style:normal;font-display:optional;src:url(../fonts/libre-baskerville-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Libre Baskerville";font-weight:700;font-style:normal;font-display:optional;src:url(../fonts/libre-baskerville-latin-700-normal.woff2) format("woff2")}

/* ───────── 1. tokens ───────── */
:root{
  /* marca (cerrada) */
  --noche:#0B1B2E; --medio:#1F3D5F; --ocre:#C09A5B; --marfil:#F3EEE2; --blanco:#FFFFFF;
  /* derivados (mezclas de la marca; cálculo en docs/diseno.md) */
  --texto-2:#485462;        /* 75 % noche + 25 % blanco: texto secundario, 7,7:1 sobre blanco */
  --linea:#E2E4E6;          /* 12 % noche sobre blanco: filetes sobre claro */
  --linea-marfil:#E0CEAF;   /* ocre muy suave: filetes sobre marfil */
  --disco:#12273F;          /* 35 % medio sobre noche: el disco de la portada */
  --ocre-hover:#C9A974;     /* ocre + 15 % blanco: hover del botón principal */
  --marfil-2:#C0C0BA;       /* marfil al 78 % sobre noche: texto secundario sobre oscuro, 9,5:1 */

  /* tipografía */
  --serif:"Libre Baskerville",Baskerville,"Baskerville Old Face",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* escala en DOS tramos, fluida de 360 a 1440 px: texto (xs 14 / sm 15 / base 17 / md 20, razón ≈ 1,15) y títulos (lg 22→24 / 2xl 34→44 / hero 46→72; topes bajados el 2026-10-25 a pedido del dueño: se veían grandes en pantallas anchas). Medido por el especialista (2026-10-25). Antes decía «≈ 1,25», que no se cumplía; --t-xl se quitó porque nada lo usaba. */
  --t-xs:.875rem; --t-sm:.9375rem; --t-base:1.0625rem; --t-md:1.25rem;
  --t-lg:clamp(1.375rem,1.2rem + .8vw,1.5rem);
  --t-2xl:clamp(2.1rem,1.5rem + 2.6vw,2.75rem);
  --t-hero:clamp(2.9rem,1.2rem + 5vw,4.5rem);   /* misma fórmula en todos los anchos: sin salto al cambiar de disposición */
  --lh-tight:1.1; --lh-snug:1.25; --lh-body:1.65;

  /* espaciado (base 0,25 rem) */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4.5rem; --s-9:6.5rem;
  --section:clamp(4rem,9vw,7.5rem);
  --gutter:clamp(1.25rem,5vw,3rem);
  --max:72rem; --measure:38rem;
  --tap:2.75rem;              /* objetivo táctil mínimo: 44 px (WCAG 2.5.5; el mínimo absoluto 2.5.8 es 24) */
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px); --safe-b:env(safe-area-inset-bottom,0px);

  /* forma */
  --radius:3px; --radius-lg:10px;
  --ring:var(--medio);       /* color del foco; las zonas oscuras lo cambian a ocre */
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ───────── 2. base ───────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:7rem;-webkit-tap-highlight-color:rgba(192,154,91,.28)}
a,button,summary,input,textarea,select{touch-action:manipulation}   /* sin retardo ni zoom por doble toque */
body{margin:0;font-family:var(--sans);font-size:var(--t-base);line-height:var(--lh-body);color:var(--noche);background:var(--blanco);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:var(--lh-snug);margin:0;text-wrap:balance;overflow-wrap:anywhere}
p{margin:0;text-wrap:pretty}
a{color:var(--medio);text-underline-offset:.22em;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:2px}
.is-dark{--ring:var(--ocre)}
::selection{background:var(--ocre);color:var(--noche)}
.sr-only{position:absolute;left:0;top:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s-4);top:-4rem;z-index:100;background:var(--noche);color:var(--marfil);padding:var(--s-3) var(--s-4);border-radius:var(--radius);text-decoration:none;font-weight:600}
.skip:focus{top:var(--s-4)}

/* ───────── 3. layout ───────── */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
@supports (padding:max(1px,2px)){.wrap{padding-left:max(var(--gutter),var(--safe-l));padding-right:max(var(--gutter),var(--safe-r))}}   /* muesca/barra en horizontal (requiere viewport-fit=cover) */
.section{padding-block:var(--section)}
.section--marfil{background:var(--marfil)}
.section--noche{background:var(--noche);color:var(--marfil);--ring:var(--ocre)}
.section--noche h2,.section--noche h3{color:var(--marfil)}
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-7) var(--s-8);align-items:start}
@media (min-width:56rem){.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.split--even{grid-template-columns:1fr 1fr}}
.stack>*+*{margin-top:var(--s-4)}
.grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
@media (min-width:40rem){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}   /* tarjetas de 4 pasos: 2×2, título en una línea y 50+ caracteres por línea de texto */

/* texto de sección: título con carácter, párrafo en medida corta */
.section-head{max-width:40rem;margin-bottom:var(--s-7)}
.section-head h2{font-size:var(--t-2xl);font-weight:400;letter-spacing:-.01em;line-height:var(--lh-tight)}
.split>.section-head{margin-bottom:0}
.section-head p{margin-top:var(--s-4);font-size:var(--t-md);color:var(--texto-2)}
.section--noche .section-head p{color:var(--marfil-2)}
.lede{font-size:var(--t-md);line-height:1.6;color:var(--texto-2);max-width:var(--measure)}
.prose{max-width:var(--measure)}
.prose p+p{margin-top:var(--s-4)}

/* ───────── 4. componentes ───────── */

/* botones: el principal es ocre (sobre oscuro) o noche (sobre claro) */
.btn{max-width:100%;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3rem;padding:.7rem 1.5rem;border:2px solid transparent;border-radius:var(--radius);font:600 var(--t-base)/1.2 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.btn svg{width:1.15rem;height:1.15rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--ocre);border-color:var(--ocre);color:var(--noche)}
.btn--dark{background:var(--noche);border-color:var(--noche);color:var(--marfil)}
.btn--ghost{border-color:currentColor;color:var(--marfil)}
.btn--sm{min-height:var(--tap);padding:.45rem 1.05rem;font-size:var(--t-sm)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* enlace de texto con subrayado ocre que crece */
.link{color:inherit;text-decoration:none;background:linear-gradient(var(--ocre),var(--ocre)) 0 100%/100% 2px no-repeat;padding-bottom:.12em;transition:background-size .25s var(--ease)}

/* cabecera */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .25s}
.site-header.is-scrolled{border-bottom-color:var(--linea)}
.site-header__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--s-3);min-height:4.5rem}   /* wrap: con el texto al 200 % el menú baja en vez de salirse */
.site-header{padding-top:env(safe-area-inset-top,0px)}
.brand{--logo-h:50px;display:block;flex:none;line-height:0;margin-left:calc(var(--logo-h) * -.19)}   /* el SVG trae su zona de seguridad: se compensa para alinear el círculo con el contenido */
.brand img{height:var(--logo-h);width:auto}   /* guía de marca: logo completo >= 160 px de ancho (50 px × 3,44 = 172 px en móvil; 203 px en tableta; 230 px desde 56 rem; en px y no en rem: con «sólo texto 200 %» el logo no se infla ni desborda la cabecera) */
.nav{display:flex;align-items:center;gap:var(--s-3);margin-left:auto}
/* Sign in: texto sobrio; no compite con el botón de contacto */
.nav__signin{white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem;min-height:var(--tap);padding:.4rem .15rem;color:var(--texto-2);font-size:var(--t-sm);font-weight:500;text-decoration:none;transition:color .2s}
.nav__signin svg{display:block;width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav__signin{position:relative}
.nav__txt{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav__lang{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);color:var(--texto-2);font-size:var(--t-sm);font-weight:600;letter-spacing:.08em;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.35em;transition:color .2s,text-decoration-color .2s}
.nf__es{margin-top:var(--s-3)}
/* Cabecera con selector de idioma: «Sign in» es sólo ícono hasta 40rem y «Contact» se oculta por debajo de 26rem
   (la portada ya trae Call/Email al alcance). Medido sin desbordes de 320 a 1920 px, en EN, ES y 404. */
.nav__signin{min-width:var(--tap);justify-content:center}
@media (max-width:27.49rem){.nav .btn{display:none}}
@media (min-width:23rem){.nav{gap:var(--s-3)}}
@media (min-width:40rem){.site-header__in{min-height:5.25rem}.brand{--logo-h:68px}.nav{gap:var(--s-4)}.nav__signin{min-width:0}.nav__txt{position:static;width:auto;height:auto;overflow:visible;clip:auto}}
@media (min-width:56rem){.site-header__in{min-height:6.25rem}.brand{--logo-h:92px}}

/* tarjetas: sólo donde el contenido son piezas independientes */
.card{position:relative;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-6) var(--s-5) var(--s-5);background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radius-lg);transition:border-color .25s,transform .25s var(--ease)}
.card::before{content:"";position:absolute;left:var(--s-5);top:-1px;width:2.5rem;height:3px;background:var(--ocre);border-radius:0 0 2px 2px}
.card h3{font-size:var(--t-lg)}
.card p{color:var(--texto-2)}
.card .link{align-self:flex-start;margin-top:auto;font-weight:600;color:var(--medio);padding-block:.7rem .7rem;background-position:0 calc(100% - .55rem)}   /* objetivo de 44 px de alto con el subrayado pegado al texto */
.section--marfil .card{border-color:var(--linea-marfil)}
.card__icon{width:2.25rem;height:2.25rem;fill:none;stroke:var(--medio);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* filas de contacto: la pieza principal de la portada interior */
.contact-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea);max-width:44rem}
.contact-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-5) var(--s-4);border-bottom:1px solid var(--linea);color:var(--noche);text-decoration:none;transition:background-color .25s}
.contact-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ocre);transform:scaleY(0);transform-origin:50% 100%;transition:transform .3s var(--ease)}
.contact-row:focus-visible::before{transform:scaleY(1)}
.contact-row small{display:block;margin-bottom:var(--s-1);font-size:var(--t-sm);font-weight:500;color:var(--texto-2)}
.contact-row strong{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(1.125rem,4.3vw,1.625rem);line-height:1.2;overflow-wrap:anywhere}
.contact-row svg{flex:none;width:1.5rem;height:1.5rem;fill:none;stroke:var(--medio);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}

@media (max-width:30rem){.contact-row{padding-inline:var(--s-3)}}
@media (min-width:56rem){.contact-row strong{font-size:clamp(1.35rem,2.4vw,1.625rem)}}   /* en dos columnas el correo cabe en una línea desde 1024 */

/* pregunta / respuesta (sin JS: <details>) */
.faq{border-top:1px solid var(--linea-marfil);max-width:46rem}
.faq details{border-bottom:1px solid var(--linea-marfil)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-5) 0;font-family:var(--serif);font-weight:700;font-size:var(--t-md);line-height:1.35;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.75rem;height:.75rem;border-right:2px solid var(--medio);border-bottom:2px solid var(--medio);transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details>div{padding:0 0 var(--s-5);max-width:var(--measure);color:var(--texto-2)}

/* formulario base */
.form{display:grid;gap:var(--s-5);max-width:34rem}
.field{display:grid;gap:var(--s-2)}
.field label{font-size:var(--t-sm);font-weight:600}
.input,.textarea{width:100%;padding:.8rem 1rem;font:inherit;color:var(--noche);background:var(--blanco);border:1.5px solid var(--texto-2);border-radius:var(--radius);transition:border-color .2s,box-shadow .2s}
.textarea{min-height:9rem;resize:vertical}
.input:focus-visible,.textarea:focus-visible{outline:none;border-color:var(--medio);box-shadow:0 0 0 3px var(--ocre)}
.field__hint{font-size:var(--t-xs);color:var(--texto-2)}
.input::placeholder,.textarea::placeholder{color:var(--texto-2);opacity:1}
.input{min-height:var(--tap)}

/* separador de olas (adorno, no contenido) */
.wave-rule{height:1.5rem;background:url(../img/ola-ocre.svg) repeat-x 0 50%/auto 1.5rem;opacity:.9}

/* pie */
.site-footer{background:var(--marfil);color:var(--noche)}
.site-footer__in{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5) var(--s-8);padding-block:var(--s-8) var(--s-5)}
.site-footer .brand{--logo-h:62px}
.footer-col h2{font:600 var(--t-sm)/1.3 var(--sans);color:var(--texto-2);margin-bottom:var(--s-3)}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col a{overflow-wrap:anywhere;display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);color:var(--noche);text-decoration:none}
.footer-col .social{display:flex;gap:var(--s-3);margin-top:var(--s-3)}
.footer-col .social a{justify-content:center;width:var(--tap);height:var(--tap);border:1px solid var(--linea-marfil);border-radius:50%;transition:border-color .25s,background-color .25s}
.footer-col .social svg{width:1.25rem;height:1.25rem;fill:none;stroke:var(--noche);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.footer-col .social a:focus-visible{outline:3px solid var(--ocre);outline-offset:3px}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-2) var(--s-5);padding-block:var(--s-4) calc(var(--s-4) + var(--safe-b));border-top:1px solid var(--linea-marfil);font-size:var(--t-xs);color:var(--texto-2)}
.footer-base a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--texto-2);text-decoration:none}
/* pie en 2 columnas desde móvil ancho/tableta vertical (la marca arriba, ocupando las dos); en 3 desde 56 rem */
@media (min-width:36rem){.site-footer__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.site-footer__in>.brand{grid-column:1/-1}}
@media (min-width:56rem){.site-footer__in{grid-template-columns:1.4fr 1fr 1fr;align-items:start}.site-footer__in>.brand{grid-column:auto}.site-footer .brand{--logo-h:88px}}

/* ───────── 5. portada ─────────
   Móvil y tableta vertical (< 56 rem): el texto va primero y el disco con las olas es una banda debajo (nunca se superponen).
   Tableta horizontal y escritorio (>= 56 rem): dos zonas; el disco ocupa la derecha y el texto se limita para no entrar en él.
   --art-h = alto del dibujo en la banda; --d = diámetro del disco en escritorio (el SVG mide 1,25 × d de alto). */
.hero{--art-h:clamp(15rem,52vw,22rem);--d:clamp(21rem,34vw,29rem);position:relative;isolation:isolate;overflow:hidden;background:var(--noche);color:var(--marfil);--ring:var(--ocre)}
.hero__in{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(3rem,8vw,5rem) var(--s-6)}
.hero h1{max-width:11ch;font-size:var(--t-hero);font-weight:400;line-height:1;letter-spacing:-.02em;color:var(--marfil)}
.hero__lede{max-width:32rem;margin-top:var(--s-6);font-size:var(--t-md);line-height:1.6;color:var(--marfil-2)}
.hero .btn-row{margin-top:var(--s-6)}
@media (max-width:30rem){.hero .btn-row{flex-direction:column;align-items:stretch}}   /* botones apilados y a todo el ancho: más fáciles de tocar */
.hero__art{position:relative;z-index:1;height:var(--art-h);pointer-events:none}
.hero__art svg{position:absolute;right:0;top:0;height:100%;width:auto;max-width:none;aspect-ratio:2220/700}
/* teléfono horizontal: poca altura, así que se compacta para que el botón de llamar quede en la primera pantalla */
@media (orientation:landscape) and (max-height:32rem){.hero{--art-h:12rem}.hero__in{padding-block:var(--s-5) var(--s-5)}.hero h1{font-size:clamp(2.4rem,11vh,3rem)}.hero__lede{margin-top:var(--s-3)}.hero .btn-row{margin-top:var(--s-4)}}
@media (min-width:56rem),(min-width:46rem) and (max-height:32rem) and (orientation:landscape){
  .hero__in{min-height:min(74vh,36rem);min-height:min(74svh,36rem);padding-block:clamp(3rem,6vw,4.5rem)}
  .hero:not(.hero--compact) .hero__in>*{max-width:min(32rem,calc(100vw - 1.25 * var(--d) - 2rem - var(--gutter) - max(0px,(100vw - var(--max)) / 2)))}
  .hero__art{position:absolute;inset:0;height:auto}
  .hero__art svg{top:50%;height:calc(var(--d) * 1.25);transform:translateY(-50%)}
  /* las olas finas se desvanecen antes de llegar al texto; sólo al lado del disco se ven completas */
  .hero:not(.hero--compact)::after{content:"";position:absolute;top:0;bottom:0;left:0;right:calc(1.25 * var(--d) + 2rem);z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--noche) 0%,var(--noche) 55%,rgba(11,27,46,0) 100%)}
}
@media (min-width:46rem) and (max-height:32rem) and (orientation:landscape){.hero{--d:15rem}.hero__in{padding-block:var(--s-5)}}   /* teléfono horizontal (844×390): dos zonas con un disco más chico */
/* trazos de olas (el SVG vive inline en index.html) */
.w-bg{fill:none;stroke-linecap:round}
.w-bg--m{stroke:var(--marfil);stroke-width:3;opacity:.26}
.w-bg--o{stroke:var(--ocre);stroke-width:3;opacity:.36}
.w-disc{fill:var(--disco)}
.w-fg{fill:none;stroke-width:15;stroke-linecap:round}
.w-fg--m{stroke:var(--marfil)}
.w-fg--o{stroke:var(--ocre)}

/* ───────── 6. páginas ───────── */
.nf{min-height:60vh;min-height:60svh;display:flex;align-items:center}
.nf .btn-row{margin-top:var(--s-5)}
.page-404{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}   /* el pie queda abajo aunque el contenido sea corto */
.page-404 .nf{flex:1 0 auto;min-height:0;padding-block:var(--s-8)}
.nf h1{font-size:var(--t-2xl);font-weight:400;letter-spacing:-.01em;line-height:var(--lh-tight)}
.nf p{margin-block:var(--s-4) var(--s-6);color:var(--texto-2);font-size:var(--t-md)}

.hero--compact .hero__in{min-height:0;padding-block:clamp(3.5rem,8vw,6rem)}
.hero--compact h1{max-width:20ch;font-size:var(--t-2xl);line-height:var(--lh-tight)}

/* aviso de la página de muestra */
.sample-bar{background:var(--ocre);color:var(--noche);text-align:center;font-size:var(--t-sm);font-weight:600;padding:.55rem var(--gutter);line-height:1.35}
.sample-tag{max-width:100%;display:inline-block;margin-bottom:var(--s-3);padding:.15rem .6rem;border:1px solid var(--linea-marfil);border-radius:99px;font-size:var(--t-xs);font-weight:600;color:var(--texto-2)}
.section--noche .sample-tag{color:var(--marfil-2);border-color:rgba(243,238,226,.3)}
.sample-art{display:block;width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg);background:var(--noche) url(../img/ola-ocre.svg) repeat-x 0 50%/auto 3rem}
.cta-band{display:grid;gap:var(--s-6);align-items:center}
.cta-band h2{font-size:var(--t-2xl);font-weight:400;line-height:var(--lh-tight);max-width:20ch}
@media (min-width:56rem){.cta-band{grid-template-columns:1fr auto}}

/* ───────── 6b. estados: hover sólo donde hay puntero fino; :active siempre (táctil) ───────── */
@media (hover:hover){
  a:hover{text-decoration-color:var(--ocre);text-decoration-thickness:2px}
  .btn:hover{text-decoration:none}
  .btn--primary:hover{background:var(--ocre-hover);border-color:var(--ocre-hover)}
  .btn--dark:hover{background:var(--medio);border-color:var(--medio)}
  .btn--ghost:hover{background:rgba(243,238,226,.1)}
  .link:hover{background-size:100% 4px}
  .nav__lang:hover{color:var(--noche);text-decoration-color:var(--ocre)}
  .nav__signin:hover{color:var(--noche);text-decoration:underline;text-decoration-color:var(--ocre);text-decoration-thickness:2px}
  .card:hover{border-color:var(--ocre)}
  .contact-row:hover{background:var(--marfil)}
  .contact-row:hover::before{transform:scaleY(1)}
  .contact-row:hover svg{transform:translateX(.3rem)}
  .input:hover,.textarea:hover{border-color:var(--noche)}
  .footer-col a:hover{text-decoration:underline;text-decoration-color:var(--ocre);text-decoration-thickness:2px}
  .footer-col .social a:hover{border-color:var(--ocre);background:var(--blanco)}
  .footer-base a:hover{color:var(--noche);text-decoration:underline;text-decoration-color:var(--ocre);text-decoration-thickness:2px}
}
a:active{text-decoration-color:var(--ocre)}
.btn--primary:active{background:var(--ocre-hover);border-color:var(--ocre-hover)}
.btn--dark:active{background:var(--medio);border-color:var(--medio)}
.btn--ghost:active{background:rgba(243,238,226,.16)}
.link:active{background-size:100% 4px}
.nav__lang:active{color:var(--noche);text-decoration-color:var(--ocre)}
.nav__signin:active{color:var(--noche)}
.card:active{border-color:var(--ocre)}
.contact-row:active{background:var(--marfil)}
.contact-row:active::before{transform:scaleY(1)}
.footer-col a:active,.footer-base a:active{color:var(--noche);text-decoration:underline;text-decoration-color:var(--ocre);text-decoration-thickness:2px}

/* ───────── 7. movimiento (sólo si el visitante no pidió reducirlo) ───────── */
@media (prefers-reduced-motion:no-preference){
  /* un único momento orquestado: las olas se trazan al cargar (2,6 s) y quedan quietas; sin movimiento continuo (WCAG 2.2.2) */
  .w-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s var(--ease) .15s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  @media (hover:hover){.card:hover{transform:translateY(-3px)}}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}

/* ───────── 8. alto contraste (forced-colors: Windows «Contraste alto») ─────────
   El navegador reemplaza colores por los del sistema; aquí sólo se asegura que los elementos que
   dependen de un fondo o borde de color (botones, foco, filetes) sigan viéndose como tales. */
@media (forced-colors:active){
  .btn{border-color:ButtonText}
  .btn--primary,.btn--dark{border-color:ButtonText;forced-color-adjust:none;background:ButtonFace;color:ButtonText}
  :focus-visible{outline-color:Highlight}
  .contact-row::before,.card::before{background:Highlight}
  .contact-row,.card,.faq details,.footer-base{border-color:CanvasText}
  .faq summary::after{border-color:CanvasText}
  .hero__art svg *{forced-color-adjust:none}
  .wave-rule{display:none}
}

/* ───────── 9. impresión: el contacto tiene que salir bien en papel ───────── */
@media print{
  @page{margin:16mm}
  html{scroll-behavior:auto}
  body{background:#fff;color:#000;font-size:11pt}
  .site-header{position:static;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav,.skip,.hero__art,.wave-rule,.btn-row,.sample-bar,.nav__signin{display:none!important}
  .hero,.section--noche,.section--marfil,.site-footer{background:none!important;color:#000!important}
  .hero::after{display:none}
  .hero__in{min-height:0;padding-block:1rem}
  .hero h1,.section-head h2,.nf h1{color:#000;font-size:26pt}
  .hero__lede,.section-head p,.lede,.card p{color:#000}
  .section{padding-block:1.2rem}
  .contact-row{padding:.6rem 0;border-color:#999;break-inside:avoid}
  .contact-row svg{display:none}
  .contact-row strong{font-size:14pt}
  .site-footer__in{display:none}   /* el contacto ya salió arriba; no se repite */
  .footer-base a{min-height:0;color:#000}
  .footer-base{border-color:#999;color:#000}
  .brand img{height:2.4rem}
  a[href^="tel:"],a[href^="mailto:"]{text-decoration:none}
}