/* =========================================================================
   Guarabit · Componentes
   ========================================================================= */

/* ---------------------------------------------------------------- Logo -- */
.logo { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; }
.logo__mark { height: 1.375rem; width: auto; flex: none; }
.logo__word {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--w-bold);
  letter-spacing: -0.03em;
}

/* ----------------------------------------------------------------- Nav -- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--rule);
}

/* Sin fondo propio, la nav se apoya sobre el hero, que ahora es oscuro:
   mientras esté ahí arriba tiene que leerse en claro. Al despegarse recupera
   el papel y vuelve al registro oscuro. */
.nav:not(.is-stuck) { color: var(--text-on-ink); }
.nav:not(.is-stuck) .nav__link { color: var(--text-on-ink-muted); }
.nav:not(.is-stuck) .nav__link:hover,
.nav:not(.is-stuck) .nav__link[aria-current='true'] { color: var(--text-on-ink); }
.nav:not(.is-stuck) .nav__toggle span { background: var(--text-on-ink); }
.nav:not(.is-stuck) .btn--primary { background: var(--field); color: var(--text-on-field); }
.nav:not(.is-stuck) .btn--primary:hover { background: var(--paper); color: var(--ink); }
.nav:not(.is-stuck) :focus-visible { outline-color: var(--accent-on-ink); }
/* Barra de progreso de lectura, pegada al borde inferior de la nav. */
.nav__progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--field);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.nav.is-stuck .nav__progress { opacity: 1; }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 4.25rem;
}
.nav__links { display: none; align-items: center; gap: var(--s-6); }
@media (min-width: 60rem) { .nav__links { display: flex; } }

.nav__link {
  position: relative;
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  padding-block: var(--s-2);
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--field);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover { color: var(--text-strong); }
.nav__link:hover::after,
.nav__link[aria-current='true']::after { transform: scaleX(1); }
.nav__link[aria-current='true'] { color: var(--text-strong); }

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem; height: 2.75rem;
  padding: 0 0.6875rem;
  background: none;
  border: 0;
}
@media (min-width: 60rem) { .nav__toggle { display: none; } }
.nav__toggle span {
  display: block; height: 1.5px;
  background: var(--text-strong);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__drawer {
  position: fixed;
  inset: 4.25rem 0 0;
  z-index: 99;
  background: var(--ink);
  color: var(--text-on-ink);
  padding: var(--s-7) var(--gutter) var(--s-8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-2);
  overflow-y: auto;
}
.nav__drawer a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 11vw, 3.5rem);
  font-weight: var(--w-black);
  letter-spacing: var(--ls-colossal);
  color: var(--text-on-ink);
  text-decoration: none;
  padding-block: var(--s-2);
}
.nav__drawer a:hover { color: var(--accent-on-ink); font-style: italic; }
.nav__drawer .btn { margin-top: var(--s-6); align-self: flex-start; }

/* ---------------------------------------------------------------- Hero --
   El carrusel es el fondo, a pantalla completa; el texto va encima.
   Entre los dos hay un velo en degradado: sin él, el contraste del titular
   dependería de qué escena esté pasando, que es justo lo que no se puede
   dejar librado al azar.                                                    */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(6rem, 12vw, 9rem) clamp(5rem, 10vw, 8rem);
  background: var(--ink);
  color: var(--text-on-ink);
  overflow: hidden;
}

.hero__fondo { position: absolute; inset: 0; z-index: 0; }

/* Velo. En pantallas anchas se abre hacia la derecha para dejar ver la
   escena; en angostas cubre parejo, porque el texto la cruza entera. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(16, 16, 16, 0.85) 0%, rgba(16, 16, 16, 0) 22%),
    linear-gradient(to right, rgba(16, 16, 16, 0.94) 0%, rgba(16, 16, 16, 0.86) 42%, rgba(16, 16, 16, 0.6) 72%, rgba(16, 16, 16, 0.42) 100%);
}
@media (min-width: 68rem) {
  .hero::after {
    background:
      linear-gradient(to bottom, rgba(16, 16, 16, 0.8) 0%, rgba(16, 16, 16, 0) 20%),
      linear-gradient(to right, var(--ink) 0%, rgba(16, 16, 16, 0.92) 34%, rgba(16, 16, 16, 0.45) 66%, rgba(16, 16, 16, 0.12) 100%);
  }
}

.hero__contenido { position: relative; z-index: 2; width: 100%; }

.hero__title { max-width: none; color: var(--text-on-ink); }
.hero__title .mask:nth-child(2) { margin-left: clamp(0rem, 7vw, 9rem); }
.hero__title .mask:nth-child(3) { margin-left: clamp(0rem, 3vw, 4rem); }
.hero__title .mask:nth-child(4) { margin-left: clamp(0rem, 9vw, 11rem); }
.hero__title em { color: var(--accent-on-ink); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: clamp(var(--s-6), 4vw, var(--s-8));
}

/* ------------------------------------------------------------- Carrusel --
   Vive dentro del hero y lo llena. Los controles flotan abajo a la derecha,
   sobre el velo.                                                            */
.carrusel { position: absolute; inset: 0; }

.carrusel__marco { position: absolute; inset: 0; overflow: hidden; background: var(--ink-soft); }
.carrusel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.carrusel__slide.is-active { opacity: 1; }

/* Las escenas son SVG: el color vive acá, no en el marcado, así que siguen
   los mismos tokens que el resto del sitio. */
.escena { width: 100%; height: 100%; display: block; }
.esc-bg           { fill: var(--ink-soft); }
.esc-marco        { fill: none; stroke: var(--rule-on-ink); stroke-width: 1.5; }
.esc-linea        { stroke: var(--rule-on-ink); stroke-width: 1.5; fill: none; }
.esc-panel        { fill: rgba(244, 243, 238, 0.045); }
.esc-panel-vivo   { fill: rgba(39, 196, 160, 0.13); stroke: var(--field); stroke-width: 1.5; }
.esc-tenue        { fill: rgba(244, 243, 238, 0.2); }
.esc-acento       { fill: var(--field); }
.esc-punto        { fill: var(--field); }
.esc-punto-alerta { fill: #FFB020; }
.esc-curva        { fill: none; stroke: var(--field); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.esc-curva-tenue  { fill: none; stroke: rgba(244, 243, 238, 0.28); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.esc-area         { fill: rgba(39, 196, 160, 0.12); stroke: none; }
.esc-conector     { fill: none; stroke: var(--rule-on-ink); stroke-width: 2; }
.esc-anillo-base  { fill: none; stroke: rgba(244, 243, 238, 0.12); stroke-width: 18; }
.esc-anillo       { fill: none; stroke: var(--field); stroke-width: 18; stroke-linecap: round; }

.carrusel__barra {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  bottom: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.carrusel__puntos { display: flex; gap: var(--s-2); }
.carrusel__punto {
  width: 2rem;
  height: 2px;
  padding: 0;
  border: 0;
  background: rgba(244, 243, 238, 0.3);
  transition: background var(--dur) var(--ease);
}
.carrusel__punto[aria-current='true'] { background: var(--field); }
.carrusel__punto:focus-visible { outline-offset: 6px; }

.carrusel__pausa {
  display: grid;
  place-items: center;
  width: 1.875rem; height: 1.875rem;
  padding: 0;
  border: 1px solid var(--rule-on-ink);
  border-radius: 50%;
  background: none;
  color: var(--text-on-ink-muted);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.carrusel__pausa:hover { color: var(--text-on-ink); border-color: var(--text-on-ink-faint); }

/* ------------------------------------------------------------- Marquee --
   Cinta continua. Tres copias idénticas del contenido (dos ocultas a
   lectores de pantalla) desplazándose un tercio del ancho total: al llegar
   ahí la pista está exactamente como empezó, así que el salto no se ve.

   Tres y no dos: con dos, en una pantalla más ancha que el contenido, se
   abría un hueco vacío al final del ciclo.                                 */
.marquee {
  background: var(--ink);
  color: var(--text-on-ink);
  padding-block: var(--s-5);
  overflow: hidden;
  border-top: 1px solid var(--rule-on-ink);
  position: relative;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-dur, 34s) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--s-7);
  padding-inline: var(--s-5);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 2.25rem);
  font-weight: var(--w-semi);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.marquee__item::after {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--field);
  flex: none;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); }
}

.marquee__track.is-paused { animation-play-state: paused !important; }

.marquee :focus-visible { outline-color: var(--accent-on-ink); }

/* Botón de pausa. Se apoya sobre un degradado para que el texto pase por
   debajo sin chocar con él. Siempre presente en el orden de tabulación:
   discreto en reposo, pleno al enfocarlo o al pasar por la cinta. */
.marquee__pause {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2rem; height: 2rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--rule-on-ink);
  border-radius: 50%;
  background: var(--ink);
  color: var(--text-on-ink-muted);
  opacity: 0.45;
  transition: opacity var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.marquee:hover .marquee__pause,
.marquee__pause:hover,
.marquee__pause:focus-visible { opacity: 1; color: var(--text-on-ink); }
.marquee__pause::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 4rem;
  height: 3.5rem;
  background: linear-gradient(to right, transparent, var(--ink) 78%);
  pointer-events: none;
}

/* ---------------------------------------------------------- Situaciones --
   Campo verde pleno. Cada afirmación ocupa su propia franja, con el
   numeral gigante como estructura y alineación alternada.                 */
.situaciones__title { max-width: 18ch; margin-bottom: clamp(var(--s-7), 7vw, var(--s-10)); }

.situaciones__item {
  display: grid;
  gap: var(--s-4);
  padding-block: clamp(var(--s-6), 5vw, var(--s-8));
  border-top: 1px solid var(--rule-on-field);
}
@media (min-width: 60rem) {
  .situaciones__item {
    grid-template-columns: minmax(0, 7rem) minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--s-7);
    align-items: start;
  }
  /* Asimetría: las pares se corren a la derecha. */
  .situaciones__item:nth-child(even) { margin-left: clamp(0rem, 8vw, 10rem); }
}
.situaciones__num {
  color: var(--text-on-field);
  opacity: 0.34;
  font-size: clamp(2.5rem, 7vw, 5rem);
}
.situaciones__claim {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.75rem);
  font-weight: var(--w-bold);
  font-style: italic;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-colossal);
  color: var(--text-on-field);
}
.situaciones__desc { color: var(--text-on-field-muted); font-size: var(--fs-body); line-height: var(--lh-loose); }

/* ------------------------------------------------------------ Services --
   El numeral gigante se superpone al título, no lo acompaña.              */
.services {
  display: grid;
  gap: clamp(var(--s-8), 7vw, var(--s-10));
  margin-top: clamp(var(--s-8), 8vw, var(--s-10));
}

.service { position: relative; display: grid; gap: var(--s-5); }
@media (min-width: 60rem) {
  .service {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(var(--s-7), 6vw, var(--s-10));
    align-items: end;
  }
  .service:nth-child(2) { margin-left: clamp(0rem, 10vw, 13rem); }
  .service:nth-child(3) { margin-left: clamp(0rem, 4vw, 5rem); }
}

.service__head { position: relative; }
.service__num {
  --drift: 1.75rem;
  position: absolute;
  top: -0.42em;
  left: -0.07em;
  color: var(--field);
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}
.service__title {
  position: relative;
  z-index: 1;
  font-size: var(--fs-giant);
  font-weight: var(--w-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-colossal);
}
.service__body { display: grid; gap: var(--s-5); }
.service__desc { color: var(--text-muted); font-size: var(--fs-lead); line-height: var(--lh-loose); max-width: var(--measure); }
.service__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--text-faint); }

/* ------------------------------------------------------------- Proceso --
   Sin imagen: solo tipografía. El paso que estás leyendo se enciende y los
   demás se apagan.                                                         */
.proceso { display: grid; margin-top: clamp(var(--s-7), 6vw, var(--s-9)); }

.paso {
  display: grid;
  gap: var(--s-4);
  padding-block: clamp(var(--s-6), 5vw, var(--s-8));
  border-top: 1px solid var(--rule-on-ink);
  transition: opacity var(--dur-slow) var(--ease);
}
.paso:last-child { border-bottom: 1px solid var(--rule-on-ink); }
@media (min-width: 64rem) {
  .paso { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
  .paso:not(.is-current) { opacity: 0.32; }
}
.paso__num { color: var(--accent-on-ink); font-size: clamp(2.25rem, 6vw, 5rem); }
.paso__body { display: grid; gap: var(--s-4); }
@media (min-width: 64rem) {
  .paso__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
}
.paso__title { font-size: var(--fs-h2); font-weight: var(--w-black); line-height: var(--lh-tight); letter-spacing: var(--ls-colossal); }
.paso__desc { color: var(--text-on-ink-muted); font-size: var(--fs-lead); line-height: var(--lh-loose); max-width: var(--measure); }

/* -------------------------------------------------------------- Trabajo --
   Cada caso contado entero: la ficha a la izquierda y las piezas del
   producto a la derecha. El segundo se separa con un filete.               */
.caso {
  display: grid;
  gap: clamp(var(--s-7), 5vw, var(--s-9));
  margin-top: clamp(var(--s-7), 5vw, var(--s-9));
}
@media (min-width: 68rem) {
  .caso {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }
}

.caso__marca { margin: 0 0 var(--s-5); }
.caso__marca img { width: auto; height: clamp(5.5rem, 11vw, 9rem); }
/* El logotipo de Kunecito es apaisado (480×109): con el alto del de Kune
   ocuparía media pantalla de ancho. */
.caso__marca--ancha img { height: clamp(2.5rem, 4.5vw, 3.5rem); max-width: 100%; }

.caso--siguiente {
  margin-top: clamp(var(--s-8), 7vw, var(--s-10));
  padding-top: clamp(var(--s-7), 5vw, var(--s-9));
  border-top: 1px solid var(--rule);
}

.caso__rubro { color: var(--accent); margin-bottom: var(--s-5); }

.caso__desc {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--text-muted);
  max-width: var(--measure);
}
.caso__desc + .caso__desc { margin-top: var(--s-4); }
.caso__enlace { margin-top: var(--s-6); }

/* Las dos piezas conservan su proporción: son diapositivas con texto y
   recortarlas para igualar alturas cortaría palabras. */
.caso__galeria { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 48rem) {
  .caso__galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.caso__figura { margin: 0; }
.caso__figura img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
}

/* Las tres capturas del teléfono. En pantalla angosta son una tira que se
   arrastra: tres teléfonos apilados dejarían la sección de dos metros de alto,
   y en tres columnas entrarían a 105 px. Desde 48rem pasan a grilla. */
.caso__pantallas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(13rem, 1fr);
  gap: var(--s-5);
  margin-top: clamp(var(--s-7), 5vw, var(--s-8));
  overflow-x: auto;
  padding-bottom: var(--s-3);
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}
@media (min-width: 48rem) {
  .caso__pantallas {
    grid-auto-columns: minmax(0, 1fr);
    overflow-x: visible;
    padding-bottom: 0;
  }
}

.pantalla { margin: 0; scroll-snap-align: start; max-width: 19rem; }

/* Marco oscuro y no un borde claro: la captura es casi toda blanca y sobre el
   papel hundido de esta sección se derramaría por los bordes. Con el marco se
   lee como un teléfono, que es lo que es. */
.pantalla__marco {
  background: var(--ink);
  border-radius: 1.35rem;
  padding: 0.5rem;
  overflow: hidden;
}
.pantalla__marco img { width: 100%; border-radius: 0.9rem; }

.pantalla__pie { margin-top: var(--s-4); }
.pantalla__pie b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--w-bold);
  color: var(--text-strong);
}
.pantalla__pie span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--text-muted);
}

/* -------------------------------------------------------------- Estudio -- */
.estudio { position: relative; }
.estudio__col { position: relative; z-index: 1; }
.estudio__title { font-size: var(--fs-giant); font-weight: var(--w-black); max-width: 12ch; margin-bottom: var(--s-6); }
.estudio__prose { display: grid; gap: var(--s-5); max-width: var(--measure); }
.estudio__prose p { font-size: var(--fs-lead); line-height: var(--lh-loose); color: var(--text-muted); }
.estudio__prose p:first-of-type { color: var(--text); }


/* Marca de agua: el isotipo, gigante, saliéndose por el borde derecho. */
.estudio__watermark {
  position: absolute;
  right: calc(var(--gutter) * -1);
  bottom: -12%;
  width: min(42vw, 30rem);
  color: var(--text-strong);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 64rem) { .estudio__watermark { display: none; } }

/* -------------------------------------------------------------- Contacto --
   Dos columnas: el título ocupa la izquierda y el centro, el formulario se
   va a la derecha. Antes el formulario colgaba a la izquierda y la mitad
   derecha de la sección quedaba vacía.                                     */
.contacto { display: grid; gap: clamp(var(--s-7), 5vw, var(--s-9)); }
@media (min-width: 64rem) {
  .contacto {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(var(--s-8), 5vw, var(--s-10));
    align-items: center;
  }
}

/* El bloque de título no se pega al canto: se corre hacia el centro para
   ocupar parte del espacio que dejó el formulario. */
.contacto__intro { max-width: 20ch; }
@media (min-width: 64rem) {
  .contacto__intro {
    max-width: none;
    padding-right: var(--s-6);
    padding-left: clamp(0rem, 4vw, 5rem);
  }
}

/* Más chico que en el hero: acá vive en media pantalla, no en el ancho
   completo. */
.contacto__title {
  font-size: clamp(2.25rem, 5.4vw, 5.25rem);
  margin-bottom: clamp(var(--s-5), 3vw, var(--s-7));
}
.contacto__title em { color: var(--accent-on-ink); }
.contacto__title .mask:nth-child(2) { margin-left: clamp(0rem, 4vw, 4rem); }

.contacto__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--text-on-ink-muted);
  max-width: var(--measure-tight);
}

.contacto__social { margin-top: var(--s-6); }
.contacto__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: var(--w-medium);
  color: var(--text-on-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-on-ink);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.contacto__social a:hover { color: var(--accent-on-ink); border-bottom-color: var(--accent-on-ink); }

.form { display: grid; gap: var(--s-5); max-width: 36rem; }

/* Aire al pie del formulario para que el botón flotante de volver arriba no
   se apoye sobre el envío ni sobre el aviso legal en pantallas angostas. */
@media (max-width: 64rem) {
  .form { padding-bottom: var(--s-8); }
}
.field { display: grid; gap: var(--s-2); }
.field > label { font-size: var(--fs-xs); font-weight: var(--w-semi); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-on-ink-muted); }
.field__hint { font-size: var(--fs-xs); color: var(--text-on-ink-faint); }

/* Campos sin caja: solo una línea inferior. Menos ruido, más presencia. */
.field input, .field select, .field textarea {
  width: 100%;
  padding: var(--s-3) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-on-ink);
  border-radius: 0;
  color: var(--text-on-ink);
  font-size: var(--fs-lead);
  transition: border-color var(--dur) var(--ease);
}
.field select option { background: var(--ink); color: var(--text-on-ink); }
.field textarea { min-height: 6rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-on-ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--field); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--field);
  box-shadow: 0 1px 0 0 var(--field);
}
.field[data-invalid='true'] input,
.field[data-invalid='true'] textarea { border-bottom-color: #FF8A80; }
.field__error { font-size: var(--fs-xs); color: #FF8A80; }

.form__status { font-size: var(--fs-sm); min-height: 1.25rem; }
.form__status[data-tone='ok'] { color: var(--accent-on-ink); }
.form__status[data-tone='error'] { color: #FF8A80; }
.form__legal { font-size: var(--fs-xs); color: var(--text-on-ink-faint); }
.form .btn { justify-self: start; }
/* Las dos salidas del formulario, lado a lado; en angosto, una abajo de la otra. */
.form__envio { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.form__envio .btn svg { flex-shrink: 0; }
.field__opcional { text-transform: none; letter-spacing: 0; font-weight: var(--w-regular); color: var(--text-on-ink-faint); }

/* --------------------------------------------------------------- Footer --
   El logotipo, enorme, cerrando la página.                                */
.footer { background: var(--ink); color: var(--text-on-ink-muted); padding-block: var(--s-8) var(--s-6); overflow: hidden; }
.footer__word {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 18vw, 17rem);
  font-weight: var(--w-black);
  line-height: 0.82;
  letter-spacing: -0.055em;
  color: var(--text-on-ink);
  margin-bottom: var(--s-7);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-8);
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--rule-on-ink);
  padding-top: var(--s-5);
}
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer__links a { font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-on-ink-muted); text-decoration: none; }
.footer__links a:hover { color: var(--accent-on-ink); }
.footer__copy { font-size: var(--fs-xs); color: var(--text-on-ink-faint); }

/* ---------------------------------------------------------- Volver arriba --
   Aparece pasado el hero. Fuera de la vista queda además fuera del orden de
   tabulación (tabIndex -1 en el componente), para no ser una parada muerta. */
.to-top {
  position: fixed;
  right: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 90;
  width: 3rem; height: 3rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  opacity: 0;
  transform: translateY(0.75rem) scale(0.9);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease-out),
              background var(--dur-fast) var(--ease);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--field-deep); }
.to-top:focus-visible { outline-offset: 4px; }

/* ----------------------------------------------------- Estados por JS --
   El cajón móvil está siempre en el marcado y se oculta con `hidden`;
   su `display: flex` le ganaría al atributo sin esta regla.               */
.nav__drawer[hidden] { display: none; }

/* El titular del hero espera a SplitText (ver el <head> de index.html). */
.js-split [data-split='inmediato'] { visibility: hidden; }