/* =============================================================
   REFORMAS F.S FONSECA
   1. Tokens  2. Base  3. Superficies del navegador  4. Utilidades
   5. Componentes  6. Secciones  7. Movimiento  8. Responsive
   9. Movimiento reducido
   ============================================================= */

/* =============================================================
   0. TIPOGRAFÍAS
   ============================================================= */
/* Servidas desde la propia web. Las dos son variables: un solo archivo cubre
   todos los pesos que se usan. Solo el juego latino, que incluye tildes, eñe
   y el símbolo del euro. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("assets/fonts/jost.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Serif Display";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/noto-serif-display.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  color-scheme: dark;

  /* La web va siempre en azul oscuro, con el sistema en claro o en oscuro.
     Los fondos salen del azul del logo, oscurecido hasta casi negro. */
  --paper:      #0e161f;
  --mist:       #121c27;
  --mist-2:     #17222e;
  --field:      #101a24;
  --night:      #0a1119;

  --ink:        #eef4fb;
  --ink-2:      #b3c1d0;
  --muted:      #8b9aaa;
  --line:       #24313f;
  --line-2:     #36465a;

  /* Superficie de las fichas del manifiesto: un escalon por encima del
     fondo, y otro mas cuando el cursor pasa por encima. */
  --card:       #1b2836;
  --card-2:     #22334a;

  --marca:      #2e8bff;
  --slate:      #4e7196;
  --slate-deep: #6aa9ff;
  --btn-bg:     #2e8bff;
  --btn-fg:     #08121c;
  --invert-bg:  #e8eff7;
  --invert-fg:  #111a24;
  --invert-mut: #4a5a6b;
  --panel-line: rgba(17, 26, 36, .14);
  --error:      #e08a6f;
  --wa:         #25d366;

  --serif: "Noto Serif Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:  "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --maxw:   1240px;
  --sec:    clamp(5rem, 10vw, 8.5rem);

  --shadow:    0 22px 48px -24px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-lg: 0 32px 70px -30px rgba(0, 0, 0, .8), 0 4px 14px rgba(0, 0, 0, .4);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io:  cubic-bezier(0.77, 0, 0.175, 1);

  --hdr-top: 14px;
  --hdr-h:   80px;
}

/* =============================================================
   2. BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 118px;
  scrollbar-color: var(--slate) var(--mist);
}
body {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  caret-color: var(--slate-deep);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
strong { font-weight: 500; color: var(--ink); }

/* =============================================================
   3. SUPERFICIES DEL NAVEGADOR
   ============================================================= */
::selection { background: var(--slate-deep); color: var(--paper); }
:focus-visible { outline: 2px solid var(--slate-deep); outline-offset: 3px; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--mist); }
::-webkit-scrollbar-thumb { background: var(--slate); border: 3px solid var(--mist); }
::-webkit-scrollbar-thumb:hover { background: var(--slate-deep); }
::placeholder { color: var(--muted); opacity: 1; }

/* =============================================================
   4. UTILIDADES
   ============================================================= */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: -100px; left: 1rem; z-index: 2000;
  padding: .7rem 1.1rem; background: var(--ink); color: var(--paper); font-size: .9rem;
}
.skip:focus { top: 1rem; }

.h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
.lede { font-size: clamp(1.02rem, 1.3vw, 1.12rem); color: var(--ink-2); max-width: 58ch; margin-top: 1.2rem; }

/* =============================================================
   5. COMPONENTES
   ============================================================= */

/* --- Botones ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px;
  padding: 1rem 1.9rem;
  font-family: var(--sans);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.2; text-align: center;
  border: 1px solid transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .16s var(--ease-out);
}
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); } .btn:active { transform: scale(.97); } }
.btn--slate { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--slate:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .btn--line:hover { background: var(--ink); color: var(--paper); }
}

/* --- Marca: el logo del cliente ------------------------------- */
.brand {
  display: block; flex: none;
  transform-origin: left center;
  transition: transform .35s var(--ease-out);
}
.brand img { width: 208px; height: auto; }
.brand--foot img { width: 236px; }

/* --- Cabecera flotante --------------------------------------- */
.hdr {
  position: fixed; z-index: 1000;
  top: 0; left: 0; right: 0;
  padding: var(--hdr-top) clamp(.75rem, 2.4vw, 2.5rem) 0;
  pointer-events: none;
  transition: transform .45s var(--ease-out);
}
.hdr__card {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  max-width: 1400px; margin-inline: auto;
  height: var(--hdr-h);
  padding-inline: clamp(1.1rem, 2.4vw, 2.4rem);
  background: var(--paper);
  box-shadow: var(--shadow);
  transition: box-shadow .35s ease;
  animation: hdrIn .9s .15s var(--ease-out) both;
}
.hdr.is-compact { transform: translateY(calc(var(--hdr-top) * -1)); }
.hdr.is-compact .hdr__card { box-shadow: var(--shadow-lg); }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.2rem); }
.nav__a {
  position: relative; display: inline-block; padding-block: .5rem;
  font-size: .74rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink);
}
.nav__a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease-out);
}
.nav__a.is-active::after { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) and (pointer: fine) {
  .nav__a:hover::after { transform: scaleX(1); transform-origin: left; }
}

.hdr__tel {
  display: none; font-family: var(--serif); font-size: 1.05rem; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .hdr__tel:hover { color: var(--slate-deep); } }

.burger {
  position: relative; width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
}
.burger__l {
  position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink);
  transition: transform .3s var(--ease-out);
}
.burger__l:nth-of-type(1) { transform: translateY(-4px); }
.burger__l:nth-of-type(2) { transform: translateY(4px); }
.burger[aria-expanded="true"] .burger__l:nth-of-type(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__l:nth-of-type(2) { transform: rotate(-45deg); }

/* --- Menú móvil ---------------------------------------------- */
.menu {
  position: fixed; inset: 0; z-index: 990;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--hdr-h) + var(--hdr-top) + 2.5rem) var(--gutter) 2.5rem;
  background: var(--paper);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility 0s .2s;
  overflow-y: auto;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .3s var(--ease-out), visibility 0s; }
.menu__a {
  display: block; padding-block: .8rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: clamp(1.5rem, 6.5vw, 2rem); color: var(--ink);
}
.menu__list li { opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .4s var(--ease-out); }
.menu.is-open .menu__list li { opacity: 1; transform: none; }
.menu.is-open .menu__list li:nth-child(2) { transition-delay: 40ms; }
.menu.is-open .menu__list li:nth-child(3) { transition-delay: 80ms; }
.menu.is-open .menu__list li:nth-child(4) { transition-delay: 120ms; }
.menu.is-open .menu__list li:nth-child(5) { transition-delay: 160ms; }
.menu__foot { display: grid; gap: 1.1rem; margin-top: 2.5rem; }
.menu__tel { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); text-align: center; }

/* --- Plancha fotográfica ------------------------------------- */
.plate { position: relative; overflow: hidden; background: var(--mist-2); }
.plate img { width: 100%; height: 100%; object-fit: cover; }

/* --- Enlace con subrayado ------------------------------------ */
.more {
  align-self: flex-start;
  display: inline-block; padding-block: .8rem .55rem;
  font-size: .74rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size .35s var(--ease-out), color .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .more:hover { color: var(--slate-deep); background-size: 40% 1px; }
}

/* --- Campos -------------------------------------------------- */
.field { display: grid; gap: .35rem; }
.field__l {
  font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: .7rem 0;
  font-size: 1.02rem; color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0;
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* La flecha llevaba el gris de la paleta clara, que sobre el fondo oscuro casi
   no se veia. Y si una opcion no cabe, se corta con puntos suspensivos en vez
   de meterse por debajo de la flecha. */
.field select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 2rem;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9aaa' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right center / 16px no-repeat;
}
/* El desplegable que abre el sistema: los grupos, en versalitas apagadas;
   las opciones, sobre el mismo azul oscuro del formulario. */
.field select optgroup {
  background: var(--paper); color: var(--muted);
  font-size: .8rem; font-weight: 500; font-style: normal; letter-spacing: .08em;
}
.field select option {
  background: var(--paper); color: var(--ink);
  font-size: 1rem; font-weight: 400; letter-spacing: 0;
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--slate-deep); box-shadow: 0 1px 0 var(--slate-deep);
}
.field__err { display: none; font-size: .85rem; color: var(--error); }
.field.is-invalid input { border-color: var(--error); box-shadow: 0 1px 0 var(--error); }
.field.is-invalid .field__err { display: block; }

/* =============================================================
   6. SECCIONES
   ============================================================= */


/* ---------- PANTALLA DE CARGA -------------------------------- */
.splash {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center;
  background: var(--paper);
  animation: splashOut .8s 1.5s var(--ease-io) both;
}
.splash__in { display: grid; justify-items: center; gap: .55rem; padding-inline: var(--gutter); }
.splash__mark { width: 68px; height: auto; }
.splash__name { width: 232px; height: auto; margin-top: .3rem; }
.splash__bar { display: block; width: 116px; height: 1px; margin-top: 1.1rem; background: var(--line-2); overflow: hidden; }
.splash__bar i { display: block; width: 100%; height: 100%; background: var(--slate-deep); transform: scaleX(0); transform-origin: left; animation: splashBar 1.5s var(--ease-out) forwards; }
.splash__in > * { animation: splashIn .7s var(--ease-out) both; }
.splash__in > *:nth-child(2) { animation-delay: .08s; }
.splash__in > *:nth-child(3) { animation-delay: .14s; }
.splash__in > *:nth-child(4) { animation-delay: .2s; }

/* El JavaScript la retira antes, en cuanto la página está lista */
.splash.is-done { animation: none; transform: translateY(-100%); opacity: 0; transition: transform .75s var(--ease-io), opacity .75s var(--ease-io); pointer-events: none; }

@keyframes splashIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes splashBar { from { transform: scaleX(0); } 70% { transform: scaleX(.82); } to { transform: scaleX(1); } }
@keyframes splashOut { to { transform: translateY(-100%); opacity: 0; visibility: hidden; } }

/* La portada espera detrás del telón y arranca cuando este se levanta */
.js .hero__plate,
.js .hero__plate img,
.js .hero__t .ln > span,
.js .hero__k,
.js .hero__p,
.js .hero__cta,
.js .hdr__card { animation-play-state: paused; }
.js.is-revealed .hero__plate,
.js.is-revealed .hero__plate img,
.js.is-revealed .hero__t .ln > span,
.js.is-revealed .hero__k,
.js.is-revealed .hero__p,
.js.is-revealed .hero__cta,
.js.is-revealed .hdr__card { animation-play-state: running; }

/* ---------- PORTADA ----------------------------------------- */
.hero {
  position: relative; isolation: isolate;
  min-height: clamp(640px, 100svh, 1040px);
  display: flex; flex-direction: column;
  background: var(--night); color: #fff;
  overflow: hidden;
}
.hero__plate { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__plate img,
.hero__video {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%;
  filter: grayscale(1) contrast(1.06) brightness(.94);
}
/* El vídeo entra por encima de la foto y solo cuando ya está reproduciéndose */
.hero__video {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 1.1s var(--ease-out);
}
.hero__video.is-playing { opacity: 1; }
.hero__plate::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14,18,21,.8) 0%, rgba(14,18,21,.52) 46%, rgba(14,18,21,.14) 82%),
    linear-gradient(0deg, rgba(14,18,21,.6) 0%, rgba(14,18,21,0) 46%);
}
.hero__in {
  flex: 1;
  display: flex; align-items: flex-end;
  padding-top: calc(var(--hdr-h) + var(--hdr-top) + 3rem);
  padding-bottom: clamp(6.5rem, 12vh, 8.5rem);
}
.hero__copy { max-width: 64rem; will-change: opacity, transform; }
.hero__t {
  color: #fff;
  font-size: clamp(2.15rem, 3.75vw, 3.4rem);
  line-height: 1.1;
}
/* Etiqueta de zona encima del titular. Va dentro del H1 porque es lo que
   Google lee como tema principal de la página; se ve como las demás
   etiquetas pequeñas de la web. */
.hero__k {
  display: block; margin-bottom: 1.1rem;
  font-family: var(--sans); font-size: clamp(.68rem, .9vw, .76rem); font-weight: 500;
  letter-spacing: .16em; line-height: 1.5; text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.hero__k::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 1.6rem; height: 1px; margin: -.15em .7rem 0 0;
  background: var(--marca);
}
.hero__t .ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__t .ln > span { display: block; }
.hero__p { margin-top: 1.6rem; max-width: 54ch; font-size: clamp(1rem, 1.3vw, 1.1rem); color: rgba(255,255,255,.86); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2.3rem; }
.hero__tel { display: inline-block; padding-block: .6rem; color: rgba(255,255,255,.8); font-size: .98rem; }
.hero__tel strong {
  color: #fff; font-family: var(--serif); font-weight: 400; font-size: 1.12rem;
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px;
  transition: border-color .25s ease;
}
@media (hover: hover) and (pointer: fine) { .hero__tel:hover strong { border-color: #fff; } }


/* ---------- MANIFIESTO -------------------------------------- */
.stance { padding-block: var(--sec) 0; }
.stance__t {
  max-width: 27em; margin-inline: auto; text-align: center;
  font-weight: 400; font-size: clamp(1.45rem, 2.6vw, 2.25rem); line-height: 1.35;
}
.stance__grid {
  display: grid; gap: 1.5rem;
  margin-top: clamp(3rem, 6vw, 4.8rem);
  padding-bottom: var(--sec);
}
/* Antes cruzaba estas fichas por detras una banda de color a media altura y,
   sobre fondo oscuro, aquello solo se leia como una costura. Ahora se
   sostienen solas: la superficie sube un escalon sobre el fondo, un filete
   claro cierra el contorno y el icono en azul, con su regla al lado, las
   hace localizables de un vistazo. */
.note {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line-2);
  padding: clamp(1.9rem, 3.2vw, 2.7rem);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.note__i {
  position: relative;
  display: grid; place-items: center;
  width: 54px; height: 54px; margin-bottom: 1.7rem;
  background: rgba(46, 139, 255, .13);
  border: 1px solid rgba(46, 139, 255, .32);
  color: var(--marca);
}
/* Regla fina que arranca del icono y muere en el borde de la ficha */
.note__i::after {
  content: ""; position: absolute; top: 50%;
  left: calc(100% + 1.1rem); width: 100vw;
  border-top: 1px solid var(--line);
}
.note__i svg {
  width: 25px; height: 25px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.note__t { color: var(--ink); font-size: clamp(1.25rem, 1.7vw, 1.45rem); line-height: 1.3; }
.note p { margin-top: 1.2rem; font-size: 1rem; line-height: 1.8; }

/* ---------- LA EMPRESA -------------------------------------- */
.about { padding-block: var(--sec); }
.about__grid { display: grid; gap: clamp(3.5rem, 7vw, 6.5rem); align-items: center; }
.about__fig { position: relative; margin: 0 1.6rem 1.6rem 0; }
.about__fig .plate { aspect-ratio: 4 / 5; }
.about__frame {
  position: absolute; z-index: -1;
  top: 2.4rem; left: 2.4rem; right: -1.6rem; bottom: -1.6rem;
  border: 1px solid var(--slate);
}
.about__text p + p { margin-top: 1.1rem; }
.about__text { margin-top: 1.6rem; }
.about__sign {
  margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-family: var(--serif); font-size: 1.05rem; color: var(--slate-deep);
}

/* ---------- OPINIÓN ----------------------------------------- */
.voice {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(6rem, 14vw, 11rem);
  background: var(--night);
}
.voice__plate { position: absolute; inset: -12% 0; z-index: -1; will-change: transform; }
.voice__plate img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.9); }
.voice__plate::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,18,21,.1) 0%, rgba(14,18,21,.28) 100%);
}
.voice__in { display: flex; justify-content: flex-end; }
.voice__card {
  width: 100%; max-width: 36rem;
  padding: clamp(2.2rem, 4.5vw, 3.6rem);
  background: rgba(255,255,255,.97);
  box-shadow: var(--shadow-lg);
}
.voice__t { font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.stars { display: flex; gap: .2rem; margin-top: 1.4rem; }
.stars svg { width: 18px; height: 18px; fill: var(--slate-deep); }
.stars svg.is-part { fill: var(--line-2); }
.quote { margin-top: 1.4rem; }
.quote blockquote p { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.4; color: var(--ink); }
.quote figcaption { margin-top: 1rem; font-size: .92rem; color: var(--muted); }
.voice__more { display: grid; gap: 1.2rem; margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.voice__more p { font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
.voice__more span { display: block; margin-top: .3rem; font-size: .82rem; color: var(--muted); }
.voice__meta { margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: .95rem; }
.voice__meta a { color: var(--slate-deep); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .voice__meta a:hover { color: var(--ink); } }

/* ---------- SERVICIOS --------------------------------------- */
.svc { padding-block: var(--sec); }
.svc__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: clamp(2.4rem, 4vw, 3.4rem); }
.arrows { display: flex; gap: .6rem; }
.arrow {
  width: 54px; height: 54px; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--ink);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease, transform .16s var(--ease-out);
}
.arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.arrow:active { transform: scale(.95); }
.arrow:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .arrow:not(:disabled):hover { background: var(--ink); border-color: var(--ink); color: #fff; }
}

.car {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84%;
  gap: 1.4rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: .8rem .8rem 2.4rem; margin: -.8rem -.8rem -2.4rem;
}
.car::-webkit-scrollbar { display: none; }
.car:focus-visible { outline-offset: -2px; }
.scard {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--paper);
}
.scard__img { overflow: hidden; aspect-ratio: 4 / 5; background: var(--mist-2); }
.scard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.scard__t { margin-top: 1.4rem; font-size: 1.42rem; }
.scard p { margin-top: .6rem; margin-bottom: 1.2rem; font-size: .98rem; line-height: 1.7; }
.scard .more { margin-top: auto; }
@media (hover: hover) and (pointer: fine) {
  .scard:hover .scard__img img { transform: scale(1.045); }
}
.car__rail { position: relative; height: 1px; margin-top: 2rem; background: var(--line); overflow: hidden; }
.car__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: var(--ink); transform-origin: left; will-change: transform; }
.svc__also { margin-top: 2.4rem; max-width: 70ch; font-size: 1rem; }

/* ---------- OBRAS ------------------------------------------- */
.obras { padding-block: var(--sec); background: var(--mist); }
.obras__t { max-width: 20ch; }
.obras__lede { margin-bottom: clamp(2.6rem, 5vw, 3.8rem); }

/* --- Antes y después ----------------------------------------- */
.cmp { margin: 0 0 clamp(2.6rem, 5vw, 3.8rem); }
.cmp__box {
  --pos: 50%;
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--mist-2);
  box-shadow: var(--shadow-lg);
  touch-action: pan-y;
}
.cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp__clip {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.cmp__tag {
  position: absolute; top: 0; z-index: 3;
  padding: .55rem .95rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: rgba(16, 19, 22, .76);
  backdrop-filter: blur(6px);
  transition: opacity .3s ease;
}
.cmp__tag--a { left: 0; }
.cmp__tag--b { right: 0; }
/* Cada etiqueta se apaga cuando su mitad casi ha desaparecido */
.cmp__box[style*="--pos: 0"] .cmp__tag--a,
.cmp__box[style*="--pos: 1%"] .cmp__tag--a,
.cmp__box[style*="--pos: 2%"] .cmp__tag--a { opacity: 0; }

.cmp__bar {
  position: absolute; top: 0; bottom: 0; z-index: 4;
  left: var(--pos); width: 2px; margin-left: -1px;
  background: #fff; box-shadow: 0 0 0 1px rgba(16, 19, 22, .22);
  pointer-events: none;
}
.cmp__knob {
  position: absolute; top: 50%; left: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 4px 18px rgba(16, 19, 22, .3);
}
.cmp__knob::before, .cmp__knob::after {
  content: ""; position: absolute; top: 50%; margin-top: -5px;
  width: 0; height: 0; border-block: 5px solid transparent;
}
.cmp__knob::before { left: 13px; border-right: 7px solid var(--ink); }
.cmp__knob::after { right: 13px; border-left: 7px solid var(--ink); }

/* El control real es un range invisible: teclado y lector de pantalla incluidos */
.cmp__range {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: none; cursor: ew-resize;
}
.cmp__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 56px; height: 100%; background: none; cursor: ew-resize;
}
.cmp__range::-moz-range-thumb {
  width: 56px; height: 999px; border: 0; background: none; cursor: ew-resize;
}
.cmp__range:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }
.cmp figcaption {
  margin-top: 1.1rem; max-width: 62ch;
  font-size: .95rem; line-height: 1.7; color: var(--ink-2);
}

/* --- Rejilla de obras ---------------------------------------- */
.gal {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(.5rem, 1vw, .75rem);
}
.gal__it { position: relative; }
.gal__btn,
.gal__it--video video {
  display: block; position: relative; width: 100%;
  aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--mist-2);
  border: 0; padding: 0;
}
.gal__btn { cursor: zoom-in; }
.gal__it--video video { object-fit: cover; background: var(--night); }
.gal__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }

/* El pie vive sobre la imagen para que la rejilla no crezca */
.gal__pie {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.6rem .7rem .6rem;
  font-size: .76rem; line-height: 1.35; color: #fff; text-align: left;
  background: linear-gradient(0deg, rgba(11, 14, 16, .88) 0%, rgba(11, 14, 16, .62) 52%, rgba(11, 14, 16, 0) 100%);
  opacity: 0; transform: translateY(6px);
  transition: opacity .32s ease, transform .32s var(--ease-out);
}
.gal__it--video .gal__pie { opacity: 1; transform: none; }
.gal__zoom {
  position: absolute; right: .5rem; top: .5rem; z-index: 3;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(16, 19, 22, .62); backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.9);
  transition: opacity .3s ease, transform .3s var(--ease-out);
}
.gal__zoom svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) {
  .gal__btn:hover img { transform: scale(1.06); }
  .gal__btn:hover .gal__pie,
  .gal__btn:hover .gal__zoom { opacity: 1; transform: none; }
}
.gal__btn:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }
.gal__btn:focus-visible .gal__pie,
.gal__btn:focus-visible .gal__zoom { opacity: 1; transform: none; }
/* Sin hover (moviles y tabletas) el pie se queda puesto */
@media (hover: none) {
  .gal__pie { opacity: 1; transform: none; }
}

/* Entran escalonadas, en el orden en que se leen */
.gal__it[data-reveal] { transition-delay: calc(var(--i, 0) * 45ms); }

@media (min-width: 1000px) {
  .gal { grid-template-columns: repeat(5, 1fr); }
}

/* --- Barra de avance de lectura ------------------------------ */
.hdr__card { position: relative; }
.hdr__prog {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: 2px;
  background: var(--marca);
  transform: scaleX(0); transform-origin: left;
}

/* --- Visor de fotografía -------------------------------------- */
.lupa {
  position: fixed; inset: 0; z-index: 1900;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(11, 14, 16, .92);
  opacity: 0; transition: opacity .3s ease;
}
.lupa[hidden] { display: none; }
.lupa.is-on { opacity: 1; }
.lupa__caja { position: relative; max-width: min(1100px, 100%); }
.lupa__img {
  display: block; max-width: 100%; max-height: calc(100dvh - 9rem);
  width: auto; height: auto; object-fit: contain;
  transform: scale(.97); transition: transform .35s var(--ease-out);
}
.lupa.is-on .lupa__img { transform: none; }
.lupa__pie {
  margin-top: .9rem; max-width: 62ch;
  font-size: .9rem; line-height: 1.6; color: rgba(255, 255, 255, .78);
}
.lupa__x {
  position: absolute; top: -3.1rem; right: 0;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 1px solid rgba(255, 255, 255, .3);
  transition: background-color .25s ease, border-color .25s ease;
}
.lupa__x svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; }
.lupa__x:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .55); }
.lupa__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .lupa, .lupa__img, .gal__btn img, .gal__zoom { transition: none; }
  .lupa__img { transform: none; }
}

/* ---------- LO QUE VA SIEMPRE INCLUIDO ----------------------- */
.always { padding-block: var(--sec); background: var(--mist); border-top: 1px solid var(--line); }
.always__head { max-width: 46rem; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }

.panel {
  display: grid; gap: clamp(2rem, 4vw, 3.2rem);
  padding: clamp(1.8rem, 3.6vw, 3.2rem);
  background: var(--invert-bg); color: var(--invert-mut);
  box-shadow: var(--shadow-lg);
}
.panel__list { display: grid; }
.panel__list li { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .panel:not(.is-in) .panel__list li { opacity: 0; transform: translateY(14px); }
.panel__list li:nth-child(2) { transition-delay: 70ms; }
.panel__list li:nth-child(3) { transition-delay: 140ms; }
.panel__list li:nth-child(4) { transition-delay: 210ms; }
.panel__list li:nth-child(5) { transition-delay: 280ms; }
.panel__list li:nth-child(6) { transition-delay: 350ms; }
.panel__list li { padding-block: 1.15rem; border-top: 1px solid var(--panel-line); }
.panel__list li:first-child { border-top: 0; padding-top: 0; }
.panel__list h3 { font-size: 1.1rem; color: var(--invert-fg); letter-spacing: -0.005em; }
.panel__list p { margin-top: .35rem; font-size: .95rem; line-height: 1.6; max-width: 38ch; }

.panel__q {
  font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--invert-mut); opacity: .85;
}
.picks { margin-top: 1rem; }
.pick {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: .95rem;
  border-top: 1px solid var(--panel-line);
  font-family: var(--serif); font-size: 1.15rem; color: var(--invert-fg);
  transition: color .3s var(--ease-out);
}
.pick:last-child { border-bottom: 1px solid var(--panel-line); }
.pick__i { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .5; transition: transform .35s var(--ease-out), opacity .3s; }
@media (hover: hover) and (pointer: fine) {
  .pick:hover .pick__i { transform: translateX(4px); opacity: 1; }
}
.pick:active .pick__i { transform: translateX(2px); }
.panel__note { margin-top: 1.3rem; font-size: .88rem; line-height: 1.6; opacity: .75; max-width: 34ch; }

/* ---------- PROCESO ----------------------------------------- */
.steps { padding-block: var(--sec); }
.steps__head { max-width: 44rem; margin-bottom: clamp(2.8rem, 5vw, 4rem); }
.steps__list { position: relative; display: grid; gap: 2.2rem; }
.steps__list::before, .steps__list::after {
  content: ""; position: absolute; z-index: -1;
  left: 23px; top: 24px; bottom: 24px; width: 1px;
  background: var(--line-2);
}
.steps__list::after { background: var(--ink); transform: scaleY(0); transform-origin: top; transition: transform 1.8s var(--ease-io); }
.steps__list.is-drawn::after { transform: scaleY(1); }
.step { display: grid; grid-template-columns: 48px 1fr; column-gap: 1.3rem; align-items: start; align-content: start; }
.step__n {
  grid-row: span 2;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--line-2);
  font-family: var(--serif); font-size: 1.15rem; color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.step__t { font-size: 1.3rem; padding-top: .55rem; }
.step p { margin-top: .4rem; font-size: .98rem; line-height: 1.7; max-width: 32ch; }

/* ---------- CONTACTO ---------------------------------------- */
.contact { padding-block: var(--sec); background: var(--mist); }
.contact__grid { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: start; }
.data { margin-top: 2.2rem; }
.data__row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding-block: .95rem; border-bottom: 1px solid var(--line-2); }
.data__row:first-child { border-top: 1px solid var(--line-2); }
.data dt { font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-top: .3rem; }
.data dd { color: var(--ink); font-variant-numeric: tabular-nums; }
.data dd a { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .25em; text-decoration-thickness: 1px; transition: text-decoration-color .25s ease, color .25s ease; }
@media (hover: hover) and (pointer: fine) { .data dd a:hover { color: var(--slate-deep); text-decoration-color: currentColor; } }
.zones__t { margin-top: 2.2rem; font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.zones { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.zones li { padding: .35rem .8rem; font-size: .9rem; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); }

.form {
  display: grid; gap: 1.6rem;
  padding: clamp(2rem, 4vw, 3.2rem);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
}
.form__t { font-size: 1.6rem; }
.form__row { display: grid; gap: 1.6rem; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; }
.form__note { font-size: .85rem; line-height: 1.55; color: var(--muted); max-width: 36ch; }
.form__status { min-height: 1.4em; font-size: .95rem; color: var(--slate-deep); }
.form__status.is-error { color: var(--error); }

/* ---------- PIE --------------------------------------------- */
.foot { padding-block: clamp(3.5rem, 7vw, 5rem) 1.8rem; background: var(--field); color: var(--ink-2); }
.foot__top { display: grid; gap: 2.2rem; justify-items: start; }
.brand--foot { justify-items: start; }
.foot__nav { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; }
.foot__nav a { font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.foot__contact { display: grid; gap: .3rem; font-size: .98rem; }
.foot__contact a { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .foot__nav a:hover, .foot__contact a:hover { color: var(--slate-deep); }
}
.foot__bot {
  display: grid; gap: .8rem;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(27,33,38,.16);
  font-size: .85rem;
}
.foot__credits { font-size: .78rem; line-height: 1.6; color: #3f4b54; max-width: 90ch; }
.foot__credits a { text-decoration: underline; text-underline-offset: .2em; }

/* --- WhatsApp ------------------------------------------------ */
.wa {
  position: fixed; left: clamp(.9rem, 2.5vw, 1.5rem); bottom: clamp(.9rem, 2.5vw, 1.5rem); z-index: 900;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wa); color: #fff;
  box-shadow: 0 10px 26px -10px rgba(10, 14, 16, .55);
  opacity: 0; transform: translateY(12px) scale(.94); pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.wa.is-on { opacity: 1; transform: none; pointer-events: auto; }
.wa:active { transform: scale(.94); }
.wa svg { width: 28px; height: 28px; fill: currentColor; }

/* =============================================================
   7. MOVIMIENTO
   ============================================================= */

/* Entrada de la portada: CSS puro, termina visible aunque falle el JS */
@keyframes hdrIn   { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
@keyframes rise    { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle  { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes lineUp  { from { transform: translateY(108%); } to { transform: none; } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }

.hero__plate { animation: rise 1.25s var(--ease-io) both; }
.hero__plate img { animation: settle 2.6s .1s var(--ease-out) both; }
.hero__t .ln > span { animation: lineUp 1s var(--ease-out) both; }
/* La entrada de la portada va seguida: titular, párrafo y botón llegan en
   menos de un segundo, para que el contenido principal esté a la vista
   pronto (lo que Google mide como LCP). Mismo orden y mismo ritmo que antes. */
.hero__t .ln:nth-child(2) > span { animation-delay: .3s; }
.hero__t .ln:nth-child(3) > span { animation-delay: .39s; }
.hero__t .ln:nth-child(4) > span { animation-delay: .48s; }
.hero__k { animation: fadeUp .8s .15s var(--ease-out) both; }
.hero__p   { animation: fadeUp .9s .5s var(--ease-out) both; }
.hero__cta { animation: fadeUp .9s .62s var(--ease-out) both; }
.hero__bar { animation: fadeIn 1s .75s ease both; }

/* Apariciones al hacer scroll. Solo se ocultan cuando el JS está vivo. */
[data-reveal] {
  transition:
    opacity .9s var(--ease-out),
    transform 1s var(--ease-out),
    clip-path 1.3s var(--ease-io);
}
.js [data-reveal]:not(.is-in) { opacity: 0; }
.js [data-reveal="up"]:not(.is-in)    { transform: translateY(28px); }
.js [data-reveal="left"]:not(.is-in)  { transform: translateX(-40px); }
.js [data-reveal="right"]:not(.is-in) { transform: translateX(40px); }
.js [data-reveal="clip"]:not(.is-in)  { opacity: 1; clip-path: inset(0 0 12% 0); }
.js [data-reveal="frame"]:not(.is-in) { opacity: 1; clip-path: inset(0 45% 45% 0); }
[data-reveal="clip"] img { transition: transform 1.8s var(--ease-out); }
.js [data-reveal="clip"]:not(.is-in) img { transform: scale(1.08); }
[data-reveal="frame"] { transition-delay: .35s; }
.js [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
[data-d="1"] { transition-delay: 90ms; }
[data-d="2"] { transition-delay: 180ms; }
[data-d="3"] { transition-delay: 270ms; }
[data-d="4"] { transition-delay: 360ms; }

/* =============================================================
   8. RESPONSIVE
   ============================================================= */
@media (min-width: 540px) {
  .form__row { grid-template-columns: 1fr 1fr; }
  .hero__bar-in span:nth-child(3) { display: inline; }
}

@media (min-width: 720px) {
  :root { --hdr-top: 18px; --hdr-h: 88px; }
  .strip__in { grid-template-columns: repeat(3, 1fr); }
  .strip__item { border-top: 0; border-left: 1px solid var(--line); padding-left: clamp(1.2rem, 2.6vw, 2.2rem); }
  .strip__item:first-child { border-left: 0; padding-left: 0; }
  .brand img { width: 238px; }
  .hero__bar-in span:nth-child(2) { display: inline; }
  .car { grid-auto-columns: calc((100% - 1.4rem) / 2); }
  .panel__list { grid-template-columns: 1fr 1fr; column-gap: clamp(1.6rem, 3vw, 2.6rem); }
  .panel__list li:nth-child(2) { border-top: 0; padding-top: 0; }
  .foot__top { grid-template-columns: auto 1fr; align-items: center; column-gap: 4rem; }
  .foot__contact { grid-column: 2; }
  .foot__bot { grid-template-columns: auto 1fr; align-items: start; column-gap: 3rem; }
  .foot__credits { text-align: right; justify-self: end; }
}

@media (min-width: 960px) {
  :root { --hdr-h: 96px; }
  .voice__more { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
  .nav { display: block; }
  .burger, .menu { display: none; }
  .hdr.is-compact .brand { transform: scale(.86); }

  .stance__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .about__grid { grid-template-columns: 1fr 1fr; }
  .about__fig { margin: 0 2.4rem 2.4rem 0; }
  .about__frame { right: -2.4rem; bottom: -2.4rem; }
  .car { grid-auto-columns: calc((100% - 2 * 1.8rem) / 3); gap: 1.8rem; }
  .panel { grid-template-columns: minmax(0, 1.42fr) minmax(0, .58fr); }
  .panel__side { padding-left: clamp(2rem, 3vw, 3rem); border-left: 1px solid var(--panel-line); }

  .steps__list { grid-template-columns: repeat(5, 1fr); gap: 2rem; }
  .steps__list::before, .steps__list::after { left: 24px; right: 24px; top: 23px; bottom: auto; width: auto; height: 1px; }
  .steps__list::after { transform: scaleX(0); transform-origin: left; }
  .steps__list.is-drawn::after { transform: scaleX(1); }
  .step { grid-template-columns: 1fr; }
  .step__n { grid-row: auto; }
  .step__t { padding-top: 0; margin-top: 1.6rem; }

  .contact__grid { grid-template-columns: .9fr 1.1fr; }
  .foot__top { grid-template-columns: auto 1fr auto; column-gap: 1.6rem; }
  .foot__nav { justify-content: center; }
  .foot__contact { grid-column: auto; text-align: right; justify-items: end; }
}

@media (min-width: 1280px) {
  .hdr__tel { display: inline; }

}

/* ---------- FRANJA DE CONFIANZA ------------------------------ */
.strip { border-bottom: 1px solid var(--line); background: var(--paper); }
.strip__in { display: grid; gap: 0; }
.strip__item { padding-block: clamp(1.4rem, 2.6vw, 2rem); border-top: 1px solid var(--line); }
.strip__item:first-child { border-top: 0; }
.strip__k { font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.strip__v { margin-top: .35rem; font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink); }
.strip__score { font-weight: 600; font-size: 1.25em; color: var(--slate-deep); font-variant-numeric: tabular-nums; }

/* --- Centinela invisible: sustituye a escuchar el scroll global --- */
.sentinel { display: block; width: 1px; height: 1px; margin-bottom: -1px; pointer-events: none; }

/* ---------- REVELADO DE TITULARES CON MASCARA ---------------- */
[data-reveal="mask"] { transition: clip-path 1.05s var(--ease-io), transform 1.05s var(--ease-out); }
.js [data-reveal="mask"]:not(.is-in) { opacity: 1; clip-path: inset(0 0 106% 0); transform: translateY(.16em); }

/* ---------- MOVIMIENTO LIGADO AL SCROLL (CSS, sin JS) -------- */
@keyframes drift     { from { transform: translate3d(0, 0, 0); }      to { transform: translate3d(0, 14vh, 0); } }
@keyframes driftBack { from { transform: translate3d(0, -5%, 0); }    to { transform: translate3d(0, 5%, 0); } }
@keyframes heroFade  { from { opacity: 1; transform: none; }          to { opacity: 0; transform: translate3d(0, -6vh, 0); } }
@keyframes avance    { from { transform: scaleX(0); }                 to { transform: scaleX(1); } }
@keyframes acercar   { from { transform: scale(1.04); }               to { transform: none; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__plate {
      animation-name: rise, drift;
      animation-duration: 1.25s, auto;
      animation-timing-function: var(--ease-io), linear;
      animation-fill-mode: both, both;
      animation-timeline: auto, scroll(root block);
      animation-range: normal, 0 100vh;
    }
    .hero__copy {
      animation: heroFade linear both;
      animation-timeline: scroll(root block);
      animation-range: 10vh 78vh;
    }
    .voice__plate {
      animation: driftBack linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    /* Cuanto queda de pagina, leido de un vistazo */
    .hdr__prog {
      animation: avance linear both;
      animation-timeline: scroll(root block);
    }
    /* La comparativa se acerca un poco al entrar, como el resto de fotos */
    .cmp__img {
      animation: acercar linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 42%;
    }
  }
}

/* ---------- ESTADOS DEL CARRUSEL ----------------------------- */
.car__empty { display: none; }

/* =============================================================
   9. MOVIMIENTO REDUCIDO
   Se quita el desplazamiento; se conservan los fundidos.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .splash { animation: splashFade .5s 1s ease both; }
  .splash.is-done { transform: none; transition: opacity .4s ease; }
  .splash__in > *, .splash__bar i { animation: none; }
  @keyframes splashFade { to { opacity: 0; visibility: hidden; } }
  .hero__plate { animation: fadeIn .8s ease both; }
  .hero__plate img { animation: none; }
  .hero__t .ln > span, .hero__k { animation: fadeIn .8s .2s ease both; }
  .hero__p, .hero__cta, .hero__bar, .hdr__card { animation-name: fadeIn; }
  .js [data-reveal]:not(.is-in) { transform: none; clip-path: none; }
  .js [data-reveal="clip"]:not(.is-in), .js [data-reveal="frame"]:not(.is-in) { opacity: 0; }
  .js [data-reveal="clip"]:not(.is-in) img { transform: none; }
  .steps__list::after { transition-duration: .01s; }
  .scard__img img { transition: none; }
  .gal__btn img { transition: none; }
  .gal__it[data-reveal] { transition-delay: 0s; }
  .gal__pie, .gal__zoom { transition: none; }
  .js .panel:not(.is-in) .panel__list li { opacity: 1; transform: none; }
  .hdr__prog { display: none; }
  .cmp__img { animation: none; }
}


/* =============================================================
   10. AJUSTES DEL FONDO OSCURO
   Van al final a proposito: sobrescriben reglas anteriores que
   estaban pensadas para fondo claro.
   ============================================================= */
.hero__plate img { filter: grayscale(1) contrast(1.02) brightness(.8); }
.voice__plate img { filter: grayscale(1) brightness(.62); }
.voice__card { background: var(--paper); }
.foot__bot { border-top-color: var(--line-2); }
.foot__credits { color: var(--muted); }
.zones li, .more__list li { background: transparent; }

/* Las fichas del manifiesto responden al cursor: se levantan un poco, el
   contorno se tine de azul y el icono se enciende. El selector lleva .is-in
   porque la regla de las apariciones tiene la misma especificidad y, sin el,
   ganaria ella y el desplazamiento no llegaria a verse. */
@media (hover: hover) and (pointer: fine) {
  .note {
    transition: transform .45s var(--ease-out), background-color .45s ease,
                box-shadow .45s ease, border-color .45s ease;
  }
  .note__i {
    transition: background-color .45s ease, border-color .45s ease,
                transform .45s var(--ease-out);
  }
  .note__i::after { transition: border-color .45s ease; }
  .note:hover,
  .note.is-in:hover {
    transform: translateY(-6px);
    background: var(--card-2);
    border-color: rgba(46, 139, 255, .5);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .07);
  }
  .note:hover .note__i,
  .note.is-in:hover .note__i {
    background: rgba(46, 139, 255, .24);
    border-color: rgba(46, 139, 255, .6);
    transform: scale(1.06);
  }
  .note:hover .note__i::after,
  .note.is-in:hover .note__i::after { border-top-color: rgba(46, 139, 255, .4); }
}
@media (prefers-reduced-motion: reduce) {
  .note, .note__i { transition: background-color .2s ease, border-color .2s ease; }
  .note:hover, .note.is-in:hover { transform: none; }
  .note:hover .note__i, .note.is-in:hover .note__i { transform: none; }
}

/* =============================================================
   11. CURSOR DE OBRA
   ============================================================= */
/* En toda la página el cursor es un martillo de uña: cabeza de acero, uña
   curva y mango en el azul de la marca, con contorno oscuro para que se lea
   sobre el fondo, sobre las fotos y sobre el blanco. El punto activo es la
   cara que golpea, arriba del todo. Solo los campos donde se escribe
   conservan el cursor de texto, para saber dónde cae la letra.
   En táctiles no hay cursor, y Safari, que no admite cursores en SVG, se
   queda con los de siempre. */
@media (hover: hover) and (pointer: fine) {
  html, *:not(input):not(textarea), input[type="range"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 40 40'%3E%3Cg transform='rotate(-45 20 20)' stroke='%230a1119' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='17.3' y='13' width='5.4' height='25' rx='2' fill='%232e8bff'/%3E%3Cpath d='M16 4.5h8v10h-8z' fill='%23c9d3dd'/%3E%3Cpath d='M24 5.5h9.5a1.5 1.5 0 0 1 1.5 1.5v5a1.5 1.5 0 0 1-1.5 1.5H24z' fill='%23eef4fb'/%3E%3Cpath d='M16 5.5C11 5.5 6.5 7.5 4 12.5c3-2 6.5-3 12-2.5z' fill='%23eef4fb'/%3E%3C/g%3E%3C/svg%3E%0A") 18 2, auto !important;
  }
}

/* Al hacer clic el martillo da el golpe: durante un instante el cursor pasa a
   la cabeza inclinada hacia delante y, donde cae, salta un pequeño impacto en
   el azul de la marca. Quien pide menos movimiento no ve el impacto. */
@media (hover: hover) and (pointer: fine) {
  html.is-golpe, html.is-golpe *:not(input):not(textarea), html.is-golpe input[type="range"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 40 40'%3E%3Cg transform='rotate(-65 20 20)' stroke='%230a1119' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='17.3' y='13' width='5.4' height='25' rx='2' fill='%232e8bff'/%3E%3Cpath d='M16 4.5h8v10h-8z' fill='%23c9d3dd'/%3E%3Cpath d='M24 5.5h9.5a1.5 1.5 0 0 1 1.5 1.5v5a1.5 1.5 0 0 1-1.5 1.5H24z' fill='%23eef4fb'/%3E%3Cpath d='M16 5.5C11 5.5 6.5 7.5 4 12.5c3-2 6.5-3 12-2.5z' fill='%23eef4fb'/%3E%3C/g%3E%3C/svg%3E%0A") 14 2, auto !important;
  }
}
.golpe {
  position: fixed; z-index: 2147483000; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
}
.golpe::before {
  content: ""; position: absolute; inset: 9px;
  border: 2px solid var(--marca); border-radius: 50%;
  animation: golpe-onda .42s var(--ease-out) forwards;
}
.golpe i {
  position: absolute; left: 50%; top: 50%;
  width: 2px; height: 7px; margin: -3.5px 0 0 -1px;
  background: var(--marca);
  transform: rotate(var(--a)) translateY(-7px);
  animation: golpe-chispa .38s var(--ease-out) forwards;
}
@keyframes golpe-onda {
  from { transform: scale(.3); opacity: 1; }
  to   { transform: scale(1.5); opacity: 0; }
}
@keyframes golpe-chispa {
  from { transform: rotate(var(--a)) translateY(-6px) scaleY(1); opacity: 1; }
  to   { transform: rotate(var(--a)) translateY(-17px) scaleY(.3); opacity: 0; }
}

/* =============================================================
   12. PÁGINA 404
   ============================================================= */
/* Misma piel que la web, sin cabecera ni animaciones: logo, aviso claro y
   dos salidas, volver al inicio o llamar. */
.nf { min-height: 100vh; min-height: 100dvh; display: grid; align-items: center; }
.nf__in { padding-block: 4rem; }
.nf__logo { display: inline-block; }
.nf__logo img { width: 220px; height: auto; }
.nf__k {
  margin-top: clamp(3rem, 8vh, 5rem);
  font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--marca);
}
.nf__t { margin-top: 1rem; max-width: 18em; }
.nf__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2.4rem; }
.nf__tel { color: var(--ink-2); }
.nf__tel strong { color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: 1.12rem; }

/* =============================================================
   13. DEDOS
   ============================================================= */
/* En pantallas táctiles los enlaces del pie medían 20 px de alto y costaba
   acertarlos con el dedo. Crece la zona que se puede tocar, no la letra: en
   el ordenador el pie queda igual. */
@media (pointer: coarse) {
  .foot__nav { row-gap: 0; }
  .foot__nav a { display: inline-block; padding-block: .75rem; }
  .foot__contact a { display: inline-block; padding-block: .6rem; }
}

/* En móvil el pie ocupa todo el ancho y el botón flotante de WhatsApp tapaba
   la última línea de los créditos al llegar al final. Se le deja sitio
   debajo. En pantallas anchas los créditos van a la derecha y no chocan. */
@media (max-width: 719.98px) {
  .foot { padding-bottom: calc(56px + 2.4rem); }
}

/* =============================================================
   14. PÁGINAS LEGALES Y CASILLA DE PRIVACIDAD
   ============================================================= */
.legal__in { max-width: 46rem; padding-block: clamp(2.5rem, 6vw, 4.5rem) 5rem; }
.legal__logo img { width: 200px; height: auto; }
.legal__back {
  display: inline-block; margin: 2.2rem 0 1.4rem; padding-block: .4rem;
  font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--marca);
}
.legal__back::before { content: "← "; }
.legal h2 { margin-top: 2.6rem; font-size: 1.3rem; }
.legal p { margin-top: .9rem; color: var(--ink-2); line-height: 1.75; }
.legal p a, .legal dd a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.legal__datos { margin-top: 1.4rem; border-top: 1px solid var(--line); }
.legal__datos div { display: grid; gap: .2rem 1.5rem; padding-block: .85rem; border-bottom: 1px solid var(--line); }
.legal__datos dt { font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.legal__datos dd { color: var(--ink); }
@media (min-width: 540px) { .legal__datos div { grid-template-columns: 8rem 1fr; } }
/* Hueco sin rellenar: salta a la vista para que no se publique así */
mark.falta { background: #e08a6f; color: #111a24; padding: 0 .3em; font-weight: 500; }

.foot__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .5rem; font-size: .85rem; }
.foot__legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }

.check { display: flex; gap: .75rem; align-items: flex-start; font-size: .9rem; line-height: 1.55; color: var(--ink-2); cursor: pointer; }
.check input {
  flex: none; width: 20px; height: 20px; margin: .1rem 0 0;
  accent-color: var(--marca);
}
.check a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.check.is-invalid { color: var(--error); }
.check.is-invalid input { outline: 2px solid var(--error); outline-offset: 2px; }