/* ============================================================================
   BORRÓN Y CUENTA NUEVA — Sistema de diseño
   CSS puro, sin dependencias.
   ---------------------------------------------------------------------------
   Una sola atmósfera: carbón, hueso, cobre. No hay tema claro y no es un
   olvido: es una decisión. Todo color se pinta explícitamente.

   Principio rector: la página dice poco y lo dice grande. No hay botones-caja;
   las acciones son texto con una regla que se dibuja. El vídeo nunca se
   muestra crudo — siempre pasa por la tarjeta gráfica y sale con la paleta.

   01. Tokens          05. Portada        09. Cierre
   02. Base            06. Servicios      10. Contacto
   03. Movimiento      07. El archivo     11. Pie
   04. Acciones        08. Etapas         12. Adaptaciones
   ========================================================================== */

/* ── 01. Tokens ─────────────────────────────────────────────────────────── */
:root {
  --ink:      #0F1211;
  --ink-2:    #151918;
  --ink-3:    #1B211F;

  --paper:    #E9E5DC;
  --paper-80: rgba(233, 229, 220, .80);
  --paper-55: rgba(233, 229, 220, .55);
  --paper-30: rgba(233, 229, 220, .30);

  --copper:    #B98455;
  --copper-hi: #D2A177;
  --sage:      #86A08D;

  --line:      rgba(233, 229, 220, .14);
  --line-soft: rgba(233, 229, 220, .06);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --bleed: 1440px;
  --measure: 62ch;

  /* Hueco entre secciones. Reparto asimétrico a propósito: poco aire encima
     del rótulo, para que se lea pegado a su sección y no flotando. */
  --gap-top: 2.75rem;
  --gap-bottom: 4.75rem;

  /* La altura de una lámina. Todas las secciones miden esto, así que cambiarlo
     aquí las cambia todas a la vez. NO es 100vh a propósito: a pantalla
     completa, en un monitor grande, el contenido queda flotando en el centro
     con medio metro de aire arriba y abajo. El tope en rem es lo que impide
     que siga creciendo en pantallas muy altas. */
  --lamina: clamp(36rem, 90vh, 54rem);

  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ── 02. Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1.02rem, .94rem + .38vw, 1.24rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 300; margin: 0; text-wrap: balance; }
p { margin: 0; }
img, video, canvas { display: block; max-width: 100%; }

.shell { width: 100%; max-width: var(--bleed); margin-inline: auto; padding-inline: var(--gutter); }

/* Navegación fija y contenida: toma la idea de la barra translúcida elegida,
   adaptada a la paleta carbón, marfil y cobre del sitio. */
.sitio-nav {
  position: fixed;
  top: clamp(.7rem, 1.8vw, 1.35rem);
  left: 50%;
  z-index: 50;
  width: min(calc(100% - 2rem), 82rem);
  transform: translateX(-50%);
  border: 1px solid rgba(185, 132, 85, .45);
  border-radius: 999px;
  background: rgba(15, 18, 17, .84);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1.15rem 3.5rem rgba(0, 0, 0, .24);
}
.sitio-nav__barra {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 4.1rem;
  gap: 1rem;
  padding-inline: clamp(.75rem, 1.5vw, 1.25rem);
}
.sitio-nav__marca {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: .58rem;
  color: var(--paper);
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
}
/* El logo completo, en su versión clara para el fondo oscuro del menú. */
.sitio-nav__logo { display: block; height: 3.1rem; width: auto; }
.sitio-nav__marca > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(185, 132, 85, .7);
  border-radius: 50%;
  color: var(--copper-hi);
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
}
.sitio-nav__enlaces {
  display: flex;
  align-items: center;
  gap: .15rem;
  padding: .28rem;
  border: 1px solid rgba(233, 229, 220, .1);
  border-radius: 999px;
  background: rgba(233, 229, 220, .045);
}
.sitio-nav__enlaces a,
.sitio-nav__movil a {
  color: var(--paper-80);
  padding: .4rem .72rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 500;
  text-decoration: none;
}
.sitio-nav__enlaces a:hover,
.sitio-nav__enlaces a:focus-visible { background: rgba(185, 132, 85, .16); color: var(--paper); }
.sitio-nav__cta {
  justify-self: end;
  padding: .64rem .9rem;
  border: 1px solid var(--copper-hi);
  border-radius: 999px;
  background: var(--copper);
  color: var(--ink);
  font-size: .74rem;
  font-weight: 600;
  text-decoration: none;
}
.sitio-nav__menu { display: none; }
.sitio-nav__movil { display: none; }
section[id] { scroll-margin-top: 5rem; }
/* El cierre ocupa la pantalla entera: se llega a él de borde a borde para
   que el vídeo se vea completo detrás del menú flotante. */
.cierre[id] { scroll-margin-top: 0; }

/* Todas las secciones miden lo mismo: una pantalla. La página se lee como una
   baraja de láminas y no como una tira continua. «min-height» y no «height»
   porque en pantallas bajas el contenido manda: vale más que se estire una
   lámina a que el texto se corte. */
.banda {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--lamina);
  padding-block: clamp(3.5rem, 8vh, 5.5rem);
  border-top: 1px solid var(--line);
}

/* Los fondos se alternan. Es lo que hace que al bajar se note que se cambió de
   sección aunque no haya un título a la vista. */
.banda--hondo { background: var(--ink-2); }
.banda--medio { border-top: 0; }

/* Muesca de cobre en el arranque de cada sección: una marca corta pegada al
   borde superior, del ancho del margen. */
.banda:not(.banda--medio)::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: clamp(2.5rem, 5vw, 4.5rem);
  height: 2px;
  background: var(--copper);
}

.rotulo {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin: 0 0 1.5rem;
  font-family: var(--mono);
  font-size: clamp(.72rem, .68rem + .12vw, .84rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-55);
}
.rotulo b { color: var(--copper); font-weight: 500; }

.skip-link {
  position: absolute;
  left: -9999px; top: 1rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--ink);
  border: 1px solid var(--copper);
  color: var(--paper);
  font-size: .9rem;
}
.skip-link:focus { left: 1rem; }

:focus-visible { outline: 2px solid var(--copper-hi); outline-offset: 5px; border-radius: 2px; }

/* ── 03. Movimiento ─────────────────────────────────────────────────────── */
/* Todo lo que entra al hacer scroll usa esto. La clase «visible» la pone el
   script cuando el bloque asoma; sin script, el estado de reposo ya es el
   visible, así que la página se lee igual. */
[data-revelar] {
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--retraso, 0s);
}
[data-revelar].visible { opacity: 1; transform: none; }

/* El párrafo que entra palabra por palabra. Los tramos los parte el script. */
.palabra {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em);
  animation: entrarPalabra .7s var(--ease-out) forwards;
  animation-delay: calc(var(--base, .62s) + var(--i) * .028s);
}
@keyframes entrarPalabra { to { opacity: 1; transform: translateY(0); } }
@keyframes aparecer { to { opacity: 1; } }

/* ── 04. Acciones ───────────────────────────────────────────────────────── */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding-block: .55rem;
  color: var(--paper);
  text-decoration: none;
  font-size: clamp(.96rem, .92rem + .25vw, 1.12rem);
  overflow: hidden;
}
/* La regla se dibuja sola al aparecer. El relleno va «backwards», no
   «forwards»: así, al terminar, el valor vuelve al del CSS y la transición del
   hover sí funciona. Con «forwards» la animación se queda mandando. */
.cta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--copper);
  transform-origin: left;
  transition: transform .5s var(--ease-out), background-color .5s var(--ease-out);
  animation: trazar .9s var(--ease-out) .95s backwards;
}
@keyframes trazar { from { transform: scaleX(0); } }

.cta--ghost { color: var(--paper-80); }
.cta--ghost::after {
  background: var(--line);
  transform: scaleX(.32);
  animation-name: trazarCorto;
  animation-delay: 1.05s;
}
@keyframes trazarCorto { from { transform: scaleX(0); } to { transform: scaleX(.32); } }

.cta:hover::after, .cta:focus-visible::after { transform: scaleX(1); background: var(--copper-hi); }
.cta:hover, .cta:focus-visible { color: var(--paper); }
.cta svg { transition: transform .45s var(--ease-out); }
.cta:hover svg, .cta:focus-visible svg { transform: translateX(4px); }

/* Un haz recorre la regla de la acción principal cada tanto. Es lo único que
   se repite solo en toda la página; por eso va lento y con pausa larga. */
.cta--luz::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 40%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper-hi), transparent);
  animation: haz 6.5s var(--ease) 2.4s infinite;
}
@keyframes haz {
  0%        { transform: translateX(-110%); }
  38%, 100% { transform: translateX(320%); }
}

/* ── 05. Portada ────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: clamp(7rem, 16vh, 10rem) clamp(3rem, 8vh, 5rem);
  overflow: clip;
}

/* El vídeo ocupa toda la portada; el velo protege la lectura del contenido. */
.medio { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.medio > * { position: absolute; }

/* Tratamiento por defecto para los vídeos que se usan como textura. */
.video-crudo {
  top: 0; left: 0;
  width: 100%; height: 116%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(1) sepia(.34) contrast(1.06) brightness(.5);
  animation: deriva 32s var(--ease) infinite alternate;
  transition: opacity .6s var(--ease-out);
}
@keyframes deriva {
  from { transform: scale(1.03); }
  to   { transform: scale(1.12); }
}
.video-crudo.oculto, .respaldo.oculto { opacity: 0; }
.respaldo { transition: opacity .8s var(--ease-out); }

/* En la portada no se repinta ni se anima artificialmente: se ve el vídeo
   original, encuadrado para conservar la silueta en cualquier pantalla. */
.hero .video-crudo {
  width: 100%;
  height: 100%;
  object-position: center center;
  filter: contrast(1.04) brightness(.78);
  animation: none;
}

.lienzo {
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.lienzo.activo { display: block; opacity: 1; }

/* Grano: le quita el brillo digital al vídeo y lo emparenta con el papel. */
.grano {
  inset: -50%;
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: parpadeo 5s steps(4) infinite;
}
@keyframes parpadeo {
  0%,100% { transform: translate(0,0); }
  25%     { transform: translate(-2%, 1%); }
  50%     { transform: translate(1%, -2%); }
  75%     { transform: translate(2%, 2%); }
}

.velo {
  inset: 0;
  background:
    linear-gradient(to top, var(--ink) 5%, rgba(15,18,17,.52) 46%, rgba(15,18,17,.24) 100%),
    linear-gradient(100deg,
      var(--ink) 24%,
      rgba(15,18,17,.80) 54%,
      rgba(15,18,17,.30) 88%,
      rgba(15,18,17,.44) 100%);
}

.hero .velo {
  background:
    linear-gradient(to top, rgba(15,18,17,.82) 0%, rgba(15,18,17,.32) 42%, rgba(15,18,17,.12) 100%),
    linear-gradient(90deg, rgba(15,18,17,.73) 0%, rgba(15,18,17,.42) 45%, rgba(15,18,17,.08) 100%);
}

/* El ancho completo es obligatorio: .hero es contenedor flex, y sin esto el
   bloque se encoge a su contenido y el «margin auto» del .shell lo manda al
   centro de la pantalla en vez de dejarlo contra el margen. */
.hero__inner { position: relative; z-index: 10; width: 100%; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .4rem 1.05rem .4rem .4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(233, 229, 220, .04);
  backdrop-filter: blur(10px);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper-80);
  opacity: 0;
  animation: aparecer .9s var(--ease-out) .05s forwards;
}
.badge__mark {
  display: grid;
  place-items: center;
  width: 1.65rem; height: 1.65rem;
  border-radius: 7px;
  background: linear-gradient(150deg, var(--copper-hi), var(--copper));
  color: #16110C;
  font-family: var(--serif);
  font-size: .9rem;
  font-weight: 500;
}

.titular {
  display: flex;
  flex-direction: column;
  margin: clamp(1.4rem, 3.5vh, 2.1rem) 0 0;
  max-width: 17ch;
  font-size: clamp(2.4rem, 1.3rem + 4.6vw, 5.2rem);
  /* Un pelo más suelto que antes: con el titular a tres líneas y la letra
     dibujada en el lienzo, un interlineado muy apretado hace que las colas de
     una línea toquen la línea siguiente. */
  line-height: 1.1;
  letter-spacing: -.025em;
}
.titular em { font-style: italic; font-weight: 400; color: var(--copper-hi); }

/* Cada línea sube desde su propia caja recortada. El relleno agranda la caja
   para que no le corte la cola a la «j»; el margen negativo devuelve la altura
   al layout, así que esto no mueve nada. */
.titular .ln {
  display: block;
  overflow: hidden;
  padding-block: .22em .16em;
  margin-block: -.22em -.16em;
}
.titular .ln > span {
  display: block;
  transform: translateY(105%);
  animation: subir 1.05s var(--ease-out) forwards;
  animation-delay: calc(.18s + var(--i) * .11s);
}
@keyframes subir { to { transform: translateY(0); } }

/* Cuando el lienzo del titular manda, la letra del documento se vuelve
   invisible pero SIGUE AHÍ: el buscador y los lectores de pantalla la leen.
   Lo que se ve pintado es el lienzo, justo encima. */
.enmascarado { color: transparent; }
.enmascarado em { color: transparent; }
.enmascarado .ln > span { animation: none; transform: none; }
.letras-lienzo { position: absolute; pointer-events: none; z-index: 1; }

.hero__sub {
  margin: clamp(1.4rem, 3vh, 2.1rem) 0 0;
  max-width: 46ch;
  font-size: clamp(1rem, .93rem + .38vw, 1.26rem);
  line-height: 1.6;
  color: var(--paper-80);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.5rem;
  margin-top: clamp(1.9rem, 4.5vh, 2.9rem);
  opacity: 0;
  animation: aparecer 1s var(--ease-out) .78s forwards;
}

.hero__foot {
  position: absolute;
  left: 0; right: 0; bottom: clamp(1.25rem, 3.5vh, 2.4rem);
  z-index: 10;
  opacity: 0;
  animation: aparecer 1s var(--ease-out) .95s forwards;
}
.hero__foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2.5rem;
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
  list-style: none;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .07em;
  color: var(--paper-55);
}
.hero__foot b { color: var(--paper-80); font-weight: 500; }
.hero__foot .abierto::before {
  content: "";
  display: inline-block;
  width: .42rem; height: .42rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--sage);
  vertical-align: middle;
}

/* ── 06. Servicios ──────────────────────────────────────────────────────── */
/* La primera sección toma la cara clara, sobria y editorial de «Qué
   revisamos». El alcance es local para no modificar textos, movimientos ni
   el ritmo cromático de las demás láminas. */
#servicios {
  --servicios-fondo: #F2EEE6;
  --servicios-tinta: #1B211F;
  --servicios-texto: #525750;
  --servicios-cobre: #A86F45;
  --servicios-linea: rgba(27, 33, 31, .17);

  background: var(--servicios-fondo);
  color: var(--servicios-tinta);
  border-top-color: var(--servicios-linea);
}
#servicios::before { background: var(--servicios-cobre); }
#servicios .rotulo { color: var(--servicios-texto); }
#servicios .rotulo b,
#servicios .promesa em,
#servicios .servicio__n { color: var(--servicios-cobre); }
#servicios .promesa + p,
#servicios .servicio p { color: var(--servicios-texto); }
#servicios .servicios { border-top-color: var(--servicios-linea); }
#servicios .servicio { border-bottom-color: var(--servicios-linea); }
#servicios .servicio:hover { background: rgba(27, 33, 31, .035); }

.promesa {
  font-size: clamp(1.7rem, 1.1rem + 2.9vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: -.022em;
  max-width: 22ch;
}
.promesa em { font-style: italic; color: var(--copper-hi); }
.promesa + p { max-width: var(--measure); margin-top: 1.3rem; color: var(--paper-80); }

/* En pantalla ancha, dos columnas. Es lo que permite que la sección quepa en
   una pantalla como las demás en vez de estirarse a una y media. */
.servicios {
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
@media (min-width: 60rem) {
  .servicios {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3.5rem;
  }
}
.servicio {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: .4rem 1.75rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .5s var(--ease-out);
}
.servicio:hover { background: rgba(233, 229, 220, .02); }
.servicio__n {
  font-family: var(--mono);
  font-size: clamp(.78rem, .74rem + .12vw, .9rem);
  color: var(--copper);
  font-variant-numeric: tabular-nums;
  padding-top: .4rem;
}
.servicio h3 { font-size: clamp(1.25rem, 1.05rem + .75vw, 1.7rem); line-height: 1.2; letter-spacing: -.012em; }
.servicio p { margin-top: .55rem; max-width: 52ch; color: var(--paper-55); font-size: clamp(.95rem, .9rem + .28vw, 1.12rem); }

/* ── 07. El archivo (el vídeo atado al scroll) ──────────────────────────── */
/* La sección es alta a propósito: su altura ES la duración del recorrido. Lo
   que se ve pegado dura lo que el visitante tarde en pasarla. */
/* Mide lo mismo que las demás: una pantalla. El recorrido del vídeo ya no
   sale de la altura de la sección sino de su paso por delante de la ventana
   —dos pantallas de scroll—, así que no hace falta estirarla ni pegarla. */
.archivo {
  min-height: var(--lamina);
  overflow: hidden;
  align-items: flex-end;
}
.archivo .lienzo, .archivo .respaldo { position: absolute; }

/* Respaldo: el primer cuadro de la secuencia. Se ve mientras cargan los demás
   y se queda si no llegan a cargar. */
.respaldo {
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) sepia(.34) contrast(1.06) brightness(.55);
}

/* Los pasos van uno encima de otro, así que se posicionan en absoluto y no
   levantan altura. El contenedor tiene que reservarla él mismo o el texto se
   sale de la pantalla por abajo: es exactamente lo que pasaba. */
/* El texto va en el flujo normal, como en cualquier otra sección. Antes eran
   tres textos que se relevaban mientras la sección entraba y salía: el primero
   aparecía con media pantalla todavía fuera y el último se iba cuando ya había
   salido, así que nunca se leía ninguno entero. Uno solo, quieto, se lee. */
.archivo__texto {
  position: relative;
  z-index: 10;
  width: 100%;
}
.archivo__paso { max-width: 34ch; }
.archivo__paso h3 {
  max-width: 15ch;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.022em;
}
.archivo__paso p {
  margin-top: 1rem;
  max-width: 44ch;
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  color: var(--paper-80);
}
.archivo__paso .num {
  display: block;
  margin-bottom: .8rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--copper);
}

/* ── 07. Nuestro criterio ───────────────────────────────────────────────── */
.criterio {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink-2);
  border-top: 0;
}
.criterio::before { display: none; }
.criterio::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%;
  right: 36%;
  width: 1px;
  height: 180%;
  background: var(--copper);
  opacity: .26;
  transform: rotate(35deg);
}
.criterio__marca {
  position: absolute;
  z-index: -1;
  top: -.32em;
  right: 2%;
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(14rem, 25vw, 27rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.08em;
  opacity: .035;
  pointer-events: none;
}
.criterio__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(18rem, .7fr);
  gap: clamp(2.5rem, 7vw, 9rem);
  align-items: center;
}
.criterio__rotulo,
.criterio__ficha > p {
  margin: 0;
  color: var(--copper-hi);
  font-family: var(--mono);
  font-size: clamp(.7rem, .66rem + .12vw, .82rem);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.criterio blockquote {
  max-width: 18ch;
  margin: 1.25rem 0 0;
  font-family: var(--serif);
  font-size: clamp(2.15rem, 1.55rem + 2.75vw, 3.75rem);
  font-weight: 300;
  line-height: 1.07;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.criterio blockquote span { display: block; }
.criterio blockquote span + span { margin-top: .8em; }
.criterio__descripcion {
  max-width: 60ch;
  margin-top: 1.65rem;
  color: var(--paper-80);
  font-size: clamp(.98rem, .94rem + .28vw, 1.16rem);
}
.criterio__ficha {
  border: 1px solid rgba(185, 132, 85, .58);
  background: rgba(15, 18, 17, .28);
}
.criterio__ficha > p { padding: .85rem 1.1rem; }
.criterio__ficha dl { margin: 0; }
.criterio__ficha dl > div {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 1rem;
  padding: .95rem 1.1rem;
  border-top: 1px solid var(--line);
}
.criterio__ficha dt {
  color: var(--paper-55);
  font-size: clamp(.84rem, .8rem + .18vw, 1rem);
}
.criterio__ficha dd {
  margin: 0;
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(1rem, .92rem + .35vw, 1.25rem);
  font-weight: 500;
}
.criterio__ficha small {
  display: block;
  padding: .9rem 1.1rem 1rem;
  border-top: 1px solid var(--line);
  color: var(--paper-55);
  font-size: .74rem;
  line-height: 1.45;
}

/* ── 08. Etapas ─────────────────────────────────────────────────────────── */
#beneficios {
  --beneficios-fondo: #F2EEE6;
  --beneficios-tinta: #1B211F;
  --beneficios-texto: #525750;
  --beneficios-cobre: #A86F45;
  --beneficios-linea: rgba(27, 33, 31, .17);

  background: var(--beneficios-fondo);
  color: var(--beneficios-tinta);
  border-top-color: var(--beneficios-linea);
}
#beneficios::before { background: var(--beneficios-cobre); }
#beneficios .rotulo { color: var(--beneficios-texto); }
#beneficios .rotulo b,
#beneficios .promesa em,
#beneficios .etapa .n { color: var(--beneficios-cobre); }
#beneficios .promesa + p,
#beneficios .etapa p { color: var(--beneficios-texto); }
.etapas {
  display: grid;
  gap: 1px;
  margin-top: 2.75rem;
  background: var(--beneficios-linea, var(--line-soft));
  border: 1px solid var(--beneficios-linea, var(--line-soft));
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.etapa {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 1.1rem;
  min-height: clamp(15.5rem, 28vh, 18rem);
  background: var(--beneficios-fondo, var(--ink));
  padding: 1.8rem 1.7rem 2rem;
  transition: transform .18s ease, background-color .18s ease;
}
.etapa .n {
  font-family: var(--mono);
  font-size: clamp(.72rem, .68rem + .12vw, .84rem);
  letter-spacing: .12em;
  color: var(--copper);
}
.etapa > div {
  display: grid;
  grid-template-rows: 6.6rem auto;
  align-content: start;
}
.etapa h3 {
  margin: 0;
  font-size: clamp(1.25rem, 1.05rem + .85vw, 1.8rem);
  line-height: 1.15;
  letter-spacing: -.012em;
}
.etapa p { color: var(--paper-55); font-size: clamp(.94rem, .9rem + .28vw, 1.1rem); }

/* Señal breve de foco para mouse o trackpad; en movimiento reducido conserva
   solo el cambio de color. */
@media (hover: hover) and (pointer: fine) {
  .etapa:hover {
    transform: translateY(-.25rem);
    background-color: #FBF7F0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .etapa { transition-property: background-color; }
}

/* ── 09. Cómo funciona ──────────────────────────────────────────────────── */
.proceso {
  /* Un tono propio entre la lámina clara anterior y el cierre cinematográfico.
     Evita que ambas se lean como una única masa negra. */
  background: #202823;
  border-top-color: rgba(210, 161, 119, .28);
}
.proceso__grid {
  display: grid;
  grid-template-columns: minmax(16rem, .78fr) minmax(24rem, 1.22fr);
  gap: clamp(3rem, 8vw, 11rem);
  align-items: start;
}
.proceso__intro h2 {
  max-width: 18ch;
  font-size: clamp(2.5rem, 1.6rem + 3.3vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -.028em;
}
.proceso__intro h2 > span { white-space: nowrap; }
.proceso__intro h2 em { color: var(--copper-hi); font-style: italic; }
.proceso__pasos {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.proceso__pasos li {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1rem;
  padding: clamp(1.25rem, 2.4vh, 1.8rem) 0;
  border-bottom: 1px solid var(--line);
}
.proceso__pasos li > span {
  padding-top: .32rem;
  color: var(--copper-hi);
  font-family: var(--mono);
  font-size: clamp(.72rem, .68rem + .12vw, .84rem);
  letter-spacing: .1em;
}
.proceso__pasos h3 {
  margin: 0;
  font-size: clamp(1.38rem, 1.1rem + .9vw, 2rem);
  line-height: 1.18;
  letter-spacing: -.015em;
}
.proceso__pasos p {
  max-width: 62ch;
  margin-top: .45rem;
  color: var(--paper-55);
  font-size: clamp(.95rem, .9rem + .25vw, 1.08rem);
}

/* ── 10. Testimonios ────────────────────────────────────────────────────── */
.testimonios {
  --testimonios-fondo: #F2EEE6;
  --testimonios-tinta: #1B211F;
  --testimonios-texto: #525750;
  --testimonios-cobre: #A86F45;
  --testimonios-linea: rgba(27, 33, 31, .17);

  background: var(--testimonios-fondo);
  color: var(--testimonios-tinta);
  border-top-color: var(--testimonios-linea);
}
.testimonios::before { background: var(--testimonios-cobre); }
.testimonios__grid {
  display: grid;
  grid-template-columns: minmax(16rem, .9fr) minmax(19rem, 1.1fr);
  gap: clamp(2.5rem, 8vw, 10rem);
  align-items: center;
}
.testimonios h2 {
  max-width: 14ch;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.026em;
}
.testimonios h2 em { color: var(--testimonios-cobre); font-style: italic; }
.testimonios__aviso {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px solid var(--testimonios-linea);
  border-left: 2px solid var(--testimonios-cobre);
}
.testimonios__aviso p {
  margin: 0;
  color: var(--testimonios-tinta);
  font-family: var(--serif);
  font-size: clamp(1.45rem, 1.15rem + .9vw, 2rem);
  line-height: 1.15;
}
.testimonios__aviso span {
  display: block;
  max-width: 48ch;
  margin-top: .9rem;
  color: var(--testimonios-texto);
  font-size: clamp(.98rem, .94rem + .25vw, 1.1rem);
}

/* ── 11. Cierre ─────────────────────────────────────────────────────────── */
.cierre {
  position: relative;
  /* Pantalla completa: al llegar desde el menú no debe asomarse la sección
     siguiente por abajo. */
  min-height: var(--lamina);
  min-height: max(var(--lamina), 100svh);
  display: flex;
  align-items: center;
  overflow: clip;
  border-top: 1px solid rgba(210, 161, 119, .52);
}
/* Aquí el metraje SÍ se ve de fondo, muy apagado. Cuando solo asomaba por
   dentro de las letras, el plano se perdía: no se entendía qué se estaba
   viendo. Apenas insinuado detrás, la letra se lee como una ventana abierta
   sobre la misma escena, que es lo que se buscaba. */
.cierre .video-crudo {
  filter: grayscale(1) sepia(.34) contrast(1.05) brightness(.3);
}
.cierre .velo {
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(15,18,17,.45), rgba(15,18,17,.88) 78%),
    linear-gradient(to top, var(--ink) 3%, rgba(15,18,17,.45) 50%, rgba(15,18,17,.35) 100%);
}
.cierre__inner { position: relative; z-index: 10; width: 100%; text-align: center; }
.cierre__titular {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(2.4rem, 1.2rem + 5.6vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.cierre__titular .ln { display: block; overflow: hidden; padding-block: .2em .16em; margin-block: -.2em -.16em; }
.cierre p { margin: 2rem auto 0; max-width: 46ch; color: var(--paper-80); }
.cierre .hero__cta { justify-content: center; animation: none; opacity: 1; }

/* ── 12. Primera orientación ────────────────────────────────────────────── */
.orientacion {
  --orientacion-fondo: #F2EEE6;
  --orientacion-tinta: #1B211F;
  --orientacion-texto: #525750;
  --orientacion-cobre: #A86F45;
  --orientacion-linea: rgba(27, 33, 31, .22);

  background: var(--orientacion-fondo);
  color: var(--orientacion-tinta);
  border-top-color: var(--orientacion-linea);
}
.orientacion::before { background: var(--orientacion-cobre); }
.orientacion__grid {
  display: grid;
  grid-template-columns: minmax(18rem, .92fr) minmax(22rem, 1.08fr);
  gap: clamp(3rem, 8vw, 10rem);
  align-items: start;
}
.orientacion .rotulo { color: var(--orientacion-texto); }
.orientacion .rotulo b { color: var(--orientacion-cobre); }
.orientacion h2 {
  max-width: 15ch;
  font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -.028em;
}
.orientacion h2 em { color: var(--orientacion-cobre); font-style: italic; }
.orientacion__lead {
  max-width: 50ch;
  margin-top: 1.3rem;
  color: var(--orientacion-texto);
}
.orientacion__datos {
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--orientacion-linea);
}
.orientacion__datos > div {
  display: grid;
  grid-template-columns: minmax(8rem, .9fr) 1.1fr;
  gap: 1rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--orientacion-linea);
}
.orientacion__datos dt {
  color: var(--orientacion-cobre);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.orientacion__datos dd {
  margin: 0;
  color: var(--orientacion-texto);
  font-size: clamp(.92rem, .88rem + .22vw, 1.06rem);
}
.orientacion__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem 1.2rem;
}
.orientacion__form .campo { gap: .45rem; }
.orientacion__form .campo--completo { grid-column: 1 / -1; }
.orientacion__form .campo label {
  color: var(--orientacion-texto);
}
.orientacion__form .campo input,
.orientacion__form .campo textarea,
.orientacion__form .campo select {
  width: 100%;
  padding: .7rem 0;
  border: 0;
  border-bottom: 1px solid var(--orientacion-linea);
  border-radius: 0;
  background: transparent;
  color: var(--orientacion-tinta);
  font: inherit;
  font-size: 1rem;
}
.orientacion__form .campo select { appearance: auto; }
.orientacion__form .campo input:focus,
.orientacion__form .campo textarea:focus,
.orientacion__form .campo select:focus {
  outline: none;
  border-bottom-color: var(--orientacion-cobre);
}
.orientacion__form textarea { min-height: 6rem; resize: vertical; }
.orientacion__form ::placeholder { color: rgba(82, 87, 80, .7); }
.orientacion__autorizacion {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  color: var(--orientacion-texto);
  font-size: .78rem;
  line-height: 1.45;
}
.orientacion__autorizacion input { margin-top: .2rem; accent-color: var(--orientacion-cobre); }
.orientacion__autorizacion a {
  color: var(--orientacion-tinta);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.orientacion__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.1rem;
  border: 0;
  background: var(--orientacion-cobre);
  color: var(--orientacion-tinta);
  cursor: pointer;
  font: 600 .92rem var(--sans);
}
.orientacion__nota {
  margin: 0;
  color: var(--orientacion-texto);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .02em;
}

/* Compatibilidad con la versión anterior del contacto. */
/* ── 10. Contacto ───────────────────────────────────────────────────────── */
.contacto { border-top: 1px solid var(--line); }
.contacto__grid {
  display: grid;
  gap: 2.5rem 4rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: start;
}
.contacto h2 { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem); letter-spacing: -.022em; }
.contacto__lead { margin-top: 1.2rem; max-width: 46ch; color: var(--paper-80); }

.datos { margin: 2rem 0 0; padding: 0; list-style: none; }
.datos li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: clamp(.78rem, .74rem + .14vw, .92rem);
  letter-spacing: .05em;
  color: var(--paper-55);
}
.datos b { color: var(--paper-80); font-weight: 500; }

form { display: grid; gap: 1.5rem; }
.campo { display: grid; gap: .5rem; }
.campo label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper-55);
}
.campo input, .campo textarea {
  width: 100%;
  padding: .8rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  transition: border-color .4s var(--ease-out);
}
.campo textarea { resize: vertical; min-height: 5.5rem; }
.campo input:focus, .campo textarea:focus {
  outline: none;
  border-bottom-color: var(--copper-hi);
}
.nota-form {
  font-size: .85rem;
  color: var(--paper-30);
  font-family: var(--mono);
  letter-spacing: .04em;
}

/* ── 11. Pie ────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line-soft);
  padding-block: 3rem 4rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .05em;
  color: var(--paper-30);
}
.footer__contenido {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
  gap: clamp(1.35rem, 3vw, 3rem);
  align-items: center;
}
.footer__marca {
  width: 100%;
  max-width: 12rem;
  height: auto;
}
footer p { margin-bottom: .5rem; max-width: 70ch; }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1.1rem;
  margin-top: 1.25rem;
}
.footer__legal a {
  color: var(--paper-55);
  text-underline-offset: .3em;
  transition: color .18s var(--ease-out);
}
.footer__legal a:hover,
.footer__legal a:focus-visible { color: var(--copper-hi); }

/* Páginas legales: lectura sobria y deliberadamente separada del sitio comercial. */
.legal-body { min-height: 100vh; }
.saltar-contenido {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 20;
  padding: .65rem .85rem;
  background: var(--paper);
  color: var(--ink);
  font: 500 .8rem/1 var(--sans);
  transform: translateY(-150%);
}
.saltar-contenido:focus { transform: translateY(0); }
.legal-header { border-bottom: 1px solid var(--line); }
.legal-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5.5rem;
}
.legal-marca {
  color: var(--paper);
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
}
.legal-marca span { color: var(--copper-hi); font-style: italic; }
.legal-volver {
  color: var(--paper-80);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.legal-volver:hover,
.legal-volver:focus-visible { color: var(--copper-hi); }
.legal-main { padding-block: clamp(4rem, 10vw, 7.5rem); }
.legal-contenido { max-width: 48rem; }
.legal-contenido .rotulo { margin-bottom: 1.5rem; }
.legal-contenido h1 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 7vw, 5.75rem);
  font-weight: 300;
  letter-spacing: -.055em;
  line-height: .94;
}
.legal-contenido h1 em { color: var(--copper-hi); font-style: italic; }
.legal-actualizacion {
  margin: 2.25rem 0 3.5rem;
  color: var(--paper-55);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
}
.legal-texto { display: grid; gap: 2.5rem; }
.legal-texto section { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.legal-texto h2 {
  margin: 0 0 .75rem;
  color: var(--paper);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
}
.legal-texto p,
.legal-texto li { color: var(--paper-80); font-size: 1rem; }
.legal-texto p { margin: 0; }
.legal-texto p + p { margin-top: 1rem; }
.legal-texto ul { margin: 1rem 0 0; padding-left: 1.2rem; }
.legal-texto li + li { margin-top: .5rem; }
.legal-texto a { color: var(--copper-hi); text-underline-offset: .25em; }
.error-main {
  display: grid;
  min-height: calc(100dvh - 12rem);
  place-items: center;
  padding-block: clamp(7rem, 15vh, 12rem);
  text-align: center;
}
.error-contenido { max-width: 40rem; }
.error-codigo {
  margin: 0 0 1rem;
  color: var(--copper-hi);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .14em;
}
.error-contenido h1 { max-width: none; }
.error-contenido > p:not(.error-codigo) {
  max-width: 40ch;
  margin: 1.5rem auto 2rem;
  color: var(--paper-80);
}
@media (max-width: 38rem) {
  .footer__contenido { grid-template-columns: 1fr; gap: 1.2rem; }
  .footer__marca { width: min(13rem, 68vw); }
  .legal-header__inner { min-height: 4.6rem; }
  .legal-volver { font-size: .62rem; }
}

/* Arrow fill: adaptación HTML/CSS del botón de Obsidian UI para este sitio. */
.obsidian-arrow-fill-btn {
  --btn-bg: transparent;
  --btn-text: var(--paper);
  --btn-fill-bg: var(--copper-hi);
  --btn-fill-text: var(--ink);
  --btn-fill-bg-hover: var(--copper-hi);
  --btn-fill-text-hover: var(--ink);
  --btn-arrow: var(--btn-fill-text);
  --btn-arrow-hover: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 3rem;
  padding: 0 3.5rem 0 1.5rem;
  overflow: hidden;
  border: 1px solid var(--btn-border, transparent);
  border-radius: 1000px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  text-decoration: none;
  text-rendering: geometricPrecision;
  white-space: nowrap;
  cursor: pointer;
}
.obsidian-arrow-fill-btn__text { position: relative; z-index: 1; }
.obsidian-arrow-fill-btn__circle {
  position: absolute;
  inset: -1px;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 3.5rem 0 1.5rem;
  border-radius: 1000px;
  clip-path: inset(.4rem .4rem .4rem calc(100% - 2.5rem) round 2rem);
  background-color: var(--btn-fill-bg);
  color: var(--btn-fill-text);
  transition: clip-path .18s var(--ease-out), background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.obsidian-arrow-fill-btn__circle-text {
  display: flex;
  align-items: center;
  width: 100%;
  padding-right: 1px;
  white-space: nowrap;
}
.obsidian-arrow-fill-btn__icon {
  position: absolute;
  right: 1rem;
  width: .75rem;
  height: .75rem;
  overflow: hidden;
  color: var(--btn-arrow);
}
.obsidian-arrow-fill-btn__path {
  fill: currentColor;
  transform-origin: center;
  transition: transform .18s var(--ease-out);
}
.obsidian-arrow-fill-btn__path:first-child { transform: translateX(-120%) scale(.95); }
.obsidian-arrow-fill-btn__path:last-child { transform: translateX(0) scale(1); }
.arrow-fill--copper {
  --btn-bg: transparent;
  --btn-text: var(--paper);
  --btn-fill-bg: var(--copper-hi);
  --btn-fill-text: var(--ink);
  --btn-fill-bg-hover: var(--copper);
  --btn-fill-text-hover: var(--ink);
  --btn-arrow: var(--ink);
  --btn-arrow-hover: var(--ink);
  --btn-border: var(--copper);
}
.arrow-fill--ivory {
  --btn-bg: transparent;
  --btn-text: var(--paper);
  --btn-fill-bg: var(--paper);
  --btn-fill-text: var(--ink);
  --btn-fill-bg-hover: var(--paper-80);
  --btn-fill-text-hover: var(--ink);
  --btn-arrow: var(--ink);
  --btn-arrow-hover: var(--ink);
  --btn-border: var(--paper-30);
}
.arrow-fill--dark {
  --btn-bg: var(--orientacion-cobre);
  --btn-text: var(--orientacion-tinta);
  --btn-fill-bg: var(--orientacion-tinta);
  --btn-fill-text: var(--orientacion-fondo);
  --btn-fill-bg-hover: var(--ink);
  --btn-fill-text-hover: var(--orientacion-fondo);
  --btn-arrow: var(--orientacion-fondo);
  --btn-arrow-hover: var(--orientacion-fondo);
  --btn-border: transparent;
}
.cta.obsidian-arrow-fill-btn { padding: 0 3.5rem 0 1.5rem; }
.cta.obsidian-arrow-fill-btn::before,
.cta.obsidian-arrow-fill-btn::after { content: none; display: none; animation: none; }
.sitio-nav__cta.obsidian-arrow-fill-btn {
  height: 2.55rem;
  padding: 0 3.1rem 0 1rem;
  font-size: .72rem;
}
.sitio-nav__cta.obsidian-arrow-fill-btn .obsidian-arrow-fill-btn__circle {
  padding: 0 3.1rem 0 1rem;
  clip-path: inset(.32rem .32rem .32rem calc(100% - 2.14rem) round 2rem);
}
.sitio-nav__cta.obsidian-arrow-fill-btn .obsidian-arrow-fill-btn__icon { right: .78rem; }
.orientacion__submit.obsidian-arrow-fill-btn {
  justify-content: flex-start;
  width: 100%;
  padding: 0 3.5rem 0 1.5rem;
}
@media (hover: hover) and (pointer: fine) {
  .obsidian-arrow-fill-btn:hover:not(:disabled) .obsidian-arrow-fill-btn__circle {
    clip-path: inset(0 round 2rem);
    background-color: var(--btn-fill-bg-hover);
    color: var(--btn-fill-text-hover);
  }
  .obsidian-arrow-fill-btn:hover:not(:disabled) .obsidian-arrow-fill-btn__icon { color: var(--btn-arrow-hover); }
  .obsidian-arrow-fill-btn:hover:not(:disabled) .obsidian-arrow-fill-btn__path:first-child { transform: translateX(0) scale(1); }
  .obsidian-arrow-fill-btn:hover:not(:disabled) .obsidian-arrow-fill-btn__path:last-child { transform: translateX(120%) scale(.95); }
}
.obsidian-arrow-fill-btn:focus-visible { outline: 2px solid var(--copper-hi); outline-offset: 4px; }
.obsidian-arrow-fill-btn:disabled { cursor: not-allowed; opacity: .5; }
@media (prefers-reduced-motion: reduce) {
  .obsidian-arrow-fill-btn__circle,
  .obsidian-arrow-fill-btn__path { transition: none; }
  .obsidian-arrow-fill-btn:hover:not(:disabled) {
    background: var(--btn-fill-bg-hover);
    color: var(--btn-fill-text-hover);
  }
  .obsidian-arrow-fill-btn:hover:not(:disabled) .obsidian-arrow-fill-btn__circle { clip-path: inset(.4rem .4rem .4rem calc(100% - 2.5rem) round 2rem); }
  .sitio-nav__cta.obsidian-arrow-fill-btn:hover:not(:disabled) .obsidian-arrow-fill-btn__circle { clip-path: inset(.32rem .32rem .32rem calc(100% - 2.14rem) round 2rem); }
}

/* ── 12. Adaptaciones ───────────────────────────────────────────────────── */
/* El menú pasa a la hamburguesa antes que el resto del diseño: con cinco
   enlaces, por debajo de 60rem choca con el botón «Primera orientación». */
@media (max-width: 60rem) {
  .sitio-nav { width: calc(100% - 1.5rem); }
  .sitio-nav__barra { grid-template-columns: 1fr auto; min-height: 3.95rem; }
  .sitio-nav__enlaces, .sitio-nav__cta { display: none; }
  .sitio-nav__menu {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-content: center;
    gap: .33rem;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--paper);
    cursor: pointer;
  }
  .sitio-nav__menu span { display: block; width: 1rem; height: 1px; background: currentColor; }
  .sitio-nav__movil {
    position: absolute;
    top: calc(100% + .55rem);
    left: 0;
    width: 100%;
    display: grid;
    gap: .9rem;
    padding: 1.1rem 1.2rem 1.3rem;
    border: 1px solid rgba(185, 132, 85, .42);
    border-radius: 1.2rem;
    background: rgba(15, 18, 17, .96);
    box-shadow: 0 1.15rem 3.5rem rgba(0, 0, 0, .22);
  }
  .sitio-nav__movil a:last-child { color: var(--copper-hi); }
  .sitio-nav__movil[hidden] { display: none; }
}

@media (max-width: 52rem) {
  .hero { min-height: 92dvh; align-items: flex-end; padding-bottom: 8rem; }
  .titular { max-width: 100%; }
  .servicio { grid-template-columns: 2.75rem 1fr; gap: .4rem 1rem; }
  .criterio__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .criterio__marca { right: -4%; }
  .etapa > div { grid-template-rows: auto auto; gap: .55rem; }
  .proceso__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .testimonios__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .proceso__intro h2 { font-size: clamp(2.1rem, 1.7rem + 2.2vw, 2.7rem); }
  .orientacion__grid { grid-template-columns: 1fr; gap: 2.8rem; }
  .orientacion__form { grid-template-columns: 1fr; }
  .orientacion__form .campo { grid-column: 1 / -1; }

}

/* Pantallas bajas (portátiles de 720): se aprieta el aire de las láminas para
   que el contenido siga cabiendo en una sola. */
@media (max-height: 800px) {
  .banda { padding-block: clamp(2.5rem, 6vh, 4rem); }
  .servicio { padding: 1.1rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .titular .ln > span, .cierre__titular .ln > span { transform: none; }
  .badge, .hero__cta, .hero__foot { opacity: 1; }
  .palabra { opacity: 1; transform: none; }
  [data-revelar] { opacity: 1; transform: none; }
  .cta--luz::before { display: none; }
  .archivo__paso { transition: opacity .01ms; }
}