/* ==========================================================
   Re:fly studio — estilos del sitio (dirección visual del 27/10/2026)
   Fondo platinum con mucho aire, tipografía grande y liviana (Medium), fotos
   que se revelan. Bold solo en el hero y en palabras puntuales.
   Sin cajas, sin tarjetas, sin bandas con curvas.
   Mobile first: los estilos base son para celular; las media queries agregan
   lo de computadora.
   ========================================================== */

:root {
  /* Colores de marca: usar solo estas variables */
  --cloudy-blue: #CCDFEE;      /* detalle */
  --chocolate: #482F21;        /* texto principal y capítulo oscuro */
  --greyish-blue: #89A0B8;     /* secundario */
  --cherry: #821A34;           /* botones y acentos */
  --platinum-blonde: #F3EBDD;  /* fondo base */
  --gunsmoke: #828282;         /* neutro */

  /* Líneas finas (separadores, no cajas) */
  --hairline: rgba(72, 47, 33, 0.18);
  --hairline-light: rgba(243, 235, 221, 0.22);

  --font-sans: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Italianno", "Brush Script MT", cursive;

  /* Tamaños de texto */
  --fs-display: clamp(3rem, 14vw, 9rem);            /* hero: hasta 9vw */
  --fs-h2: clamp(1.75rem, 1.25rem + 1.4vw, 2.5rem);   /* títulos de sección: 28 px en celular, 40 px en computadora */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);
  --fs-lead: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-body: clamp(0.9375rem, 0.89rem + 0.15vw, 1rem);  /* lectura: 15 px en celular, 16 px en computadora */
  --fs-small: 0.875rem;
  --fs-label: 0.6875rem;                              /* etiquetas: 11 px */

  /* Espacios */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);   /* 16 px en 375 */
  --section: clamp(4rem, 2rem + 5.5vw, 6.25rem);      /* 64 px en celular, 100 px en computadora */
  --title-gap: clamp(1.5rem, 1.2rem + 1.5vw, 2.75rem); /* entre título y contenido */
  --max: 100rem;
  --header-h: 4.5rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 900px) {
  :root {
    --fs-display: clamp(3.5rem, 9vw, 11rem);
    --header-h: 5.5rem;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--platinum-blonde);
  color: var(--chocolate);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }

h1, h2, h3, p, figure, blockquote, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }

h1, h2, h3 {
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

:focus-visible {
  outline: 2px solid var(--cherry);
  outline-offset: 3px;
}

::selection { background: var(--cherry); color: var(--platinum-blonde); }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 200;
  padding: 0.75rem 1rem;
  background: var(--chocolate);
  color: var(--platinum-blonde);
}
.skip-link:focus { top: 0.5rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Lenis (scroll suave). Solo se activa sin "reducir movimiento". */
html.lenis, html.lenis body { height: auto; }
/* Scroll suave a las secciones cuando Lenis no está. Con Lenis tiene que
   quedar desactivado: si no, ScrollTrigger mide mal al recalcular. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) { scroll-behavior: smooth; }
}
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Tipografía ---------- */

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

.display {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.h2 { font-size: var(--fs-h2); line-height: 1.02; }

/* Italianno: una sola palabra por titular, como acento */
.accent {
  font-family: var(--font-script);
  font-weight: 400;
  font-style: normal;
  font-size: 1.25em;
  line-height: 0.6;
  letter-spacing: 0;
  color: var(--cherry);
}

/* Etiquetas: 12-13 px, mayúsculas, letter-spacing 0,12em */
.eyebrow,
.label {
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--cherry);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.35;
  max-width: 34ch;
}

.section { padding-block: var(--section); }
.section-head { margin-bottom: var(--title-gap); }
.section-head .eyebrow { margin-bottom: 1rem; }

/* ---------- Pendientes: tienen que verse siempre ---------- */

.pendiente {
  display: inline-block;
  padding: 0.1em 0.45em;
  border: 1px dashed currentColor;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0;
  vertical-align: middle;
}

/* Dentro de frases grandes, el pendiente acompaña el tamaño de la frase */
blockquote .pendiente { font-size: 0.55em; }

.pendiente-bloque {
  display: grid;
  place-items: center;
  padding: 1.5rem;
  border: 1px dashed currentColor;
  font-size: var(--fs-small);
  font-weight: 500;
  text-align: center;
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease);
}
.btn:active { transform: scale(0.97); }

.btn--cherry { background: var(--cherry); color: var(--platinum-blonde); }
.btn--ghost { border-color: var(--chocolate); color: var(--chocolate); }
.btn--light { background: var(--platinum-blonde); color: var(--chocolate); }
.btn--sm {
  min-height: 2.75rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
}
.btn--xl {
  min-height: 4rem;
  padding: 1rem 2.5rem;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
}

@media (hover: hover) and (pointer: fine) {
  .btn--cherry:hover { background: var(--chocolate); }
  .btn--ghost:hover { background: var(--chocolate); color: var(--platinum-blonde); }
  .btn--light:hover { background: var(--cloudy-blue); }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
}
.link-arrow::after {
  content: "→";
  transition: transform 250ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover::after { transform: translateX(0.35em); }
}

/* ---------- Menú ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: transform 450ms var(--ease), background-color 300ms ease, box-shadow 300ms ease;
}

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--header-h);
}

.nav__logo { position: relative; z-index: 2; display: block; padding-block: 0.25rem; }
.nav__logo img { height: 40px; width: auto; }

.nav.is-scrolled {
  background: var(--platinum-blonde);
  box-shadow: 0 1px 0 var(--hairline);
}
/* Escondido: sin la sombra de 1 px, que si no queda asomando arriba de la pantalla */
.nav.is-hidden { transform: translateY(-100%); box-shadow: none; }

.nav__toggle {
  position: relative;
  z-index: 2;
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

/* Celular: menú a pantalla completa */
.nav__menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.5rem;
  padding: calc(var(--header-h) + 1rem) var(--gutter) 2.5rem;
  background: var(--platinum-blonde);
  visibility: hidden;
  opacity: 0;
  transition: opacity 350ms ease, visibility 0s linear 350ms;
}
.nav__menu { color: var(--chocolate); }
.nav__menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 350ms ease;
}

.nav__links a {
  display: block;
  padding-block: 0.15em;
  font-size: clamp(2.25rem, 10vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.nav__links a[aria-current] { color: var(--cherry); }

.nav__cta { align-self: flex-start; }

@media (min-width: 900px) {
  .nav__logo img { height: 48px; }
  .nav__toggle { display: none; }
  .nav__menu {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 2.25rem;
    padding: 0;
    background: none;
    visibility: visible;
    opacity: 1;
    transition: none;
  }
  .nav__links { display: flex; gap: 2rem; }
  .nav__links a {
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 200ms ease;
  }
  .nav__links a:hover,
  .nav__links a[aria-current] { text-decoration-color: currentColor; }
  .nav__links a[aria-current] { color: inherit; }
  .nav__cta { align-self: auto; }
}

/* ---------- Fotos ---------- */

.media {
  position: relative;
  overflow: hidden;
  background: var(--cloudy-blue);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%; /* hacia arriba: nunca cortar caras ni cabezas */
}

/* Foto a todo el ancho: en celular 4:5 (las fotos son verticales y así no se
   cortan caras); en computadora, pantalla completa. */
.media--full {
  width: 100%;
  aspect-ratio: 4 / 5;
}
@media (min-width: 700px) {
  .media--full { aspect-ratio: auto; height: 100vh; height: 100svh; }
}

/* ---------- Inicio: hero vivo ----------
   El ala ocupa toda la pantalla (imagen fija debajo; el canvas WebGL encima,
   solo si el navegador lo soporta). Abajo, un degradado chocolate para que
   se lean el titular, la bajada y los botones.
   Con movimiento, el hero es más alto que la pantalla: el escenario queda
   pegado arriba mientras el ala se aleja y aparece la frase manifiesto en el
   espacio chocolate (script.js). Sin movimiento, la frase va quieta debajo. */

.hero {
  position: relative;
  background: var(--chocolate);
  color: var(--platinum-blonde);
}
.motion .hero { height: 220vh; height: 220svh; }

.motion .hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
}

.hero__screen {
  position: relative;
  display: flex;
  height: 100vh;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
}
.motion .hero__screen { position: absolute; inset: 0; height: auto; min-height: 0; overflow: visible; }

.hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero__bg img,
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero__canvas { opacity: 0; transition: opacity 600ms ease; }
.hero__canvas.is-ready { opacity: 1; }

/* Degradado chocolate abajo, de transparente a ~60 %, detrás del texto */
.hero__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(72, 47, 33, 0.6) 0%, rgba(72, 47, 33, 0.42) 25%, rgba(72, 47, 33, 0) 62%);
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  text-shadow: 0 1px 2px rgba(72, 47, 33, 0.35), 0 4px 40px rgba(72, 47, 33, 0.7);
}

.hero__title {
  font-size: 15vw;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.hero__title .line { display: block; }
.hero__title .accent { color: var(--platinum-blonde); text-shadow: 0 1px 2px rgba(72, 47, 33, 0.6), 0 2px 18px rgba(72, 47, 33, 0.9); }

.hero__side { margin-top: 1.5rem; } /* aire para la cola de la "y" de Fly. */
.hero__lead { font-size: 0.9375rem; font-weight: 500; line-height: 1.35; max-width: 34ch; }

.hero__actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  text-shadow: none;
}
@media (max-width: 899px) {
  .hero__actions .btn { min-height: 2.75rem; padding-inline: 1rem; font-size: 0.9375rem; }
}

/* Frase manifiesto. Con movimiento, va al pie del escenario y la imagen se
   achica por encima (script.js); sin movimiento, es un bloque debajo. */
.hero__phrase { padding-block: var(--section); }
.motion .hero__phrase {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-block: 0 clamp(2.5rem, 1.5rem + 4vw, 5rem);
  pointer-events: none;
}
.hero__phrase .manifesto__text { font-size: clamp(1.75rem, 7.6vw, 2.5rem); max-width: none; }
/* Cada oración empieza en su propia línea */
.hero__phrase-line { display: block; }
/* Sobre chocolate, el acento va en cloudy blue (el cherry no se lee) */
.hero__phrase .accent { font-size: 1.45em; color: var(--cloudy-blue); }

/* Computadora: el titular en una línea de borde a borde, abajo, y debajo
   la bajada y los botones */
@media (min-width: 900px) {
  /* Ocupa el ancho del contenedor: 8,6vw, con tope para pantallas muy anchas */
  .hero__title { font-size: min(8.6vw, 8.6rem); white-space: nowrap; }
  .hero__title .line { display: inline; }
  .hero__side {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
    margin-top: clamp(1.25rem, 0.5rem + 1.5vw, 2.25rem);
  }
  .hero__lead { font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.375rem); max-width: 30ch; } /* el hero no cambia de escala */
  .hero__actions { margin-top: 0; }
  /* La frase en 2 líneas: una por oración */
  .hero__phrase .manifesto__text { font-size: min(3.6vw, 3.6rem); }
}

/* Menú sobre el hero: claro hasta que se baja */
.nav__logo .logo--light { display: none; }
.has-hero .nav:not(.is-scrolled):not(.menu-open),
.has-hero .nav:not(.is-scrolled):not(.menu-open) .nav__menu { color: var(--platinum-blonde); }
.has-hero .nav:not(.is-scrolled):not(.menu-open) .logo--light { display: block; }
.has-hero .nav:not(.is-scrolled):not(.menu-open) .logo--dark { display: none; }
.has-hero .nav:not(.is-scrolled):not(.menu-open) .nav__links a { text-shadow: 0 1px 2px rgba(72, 47, 33, 0.5), 0 1px 18px rgba(72, 47, 33, 0.85); }
.has-hero .nav:not(.is-scrolled):not(.menu-open) :focus-visible { outline-color: var(--platinum-blonde); }

/* ---------- Inicio: frase manifiesto (va dentro del hero) ---------- */

.manifesto__text {
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

/* ---------- Re:fly Growth System™ (capítulo chocolate) ----------
   Título a la izquierda y bajada a la derecha. Debajo, 5 tarjetas con
   textura y velo chocolate (la última, un recorte del ala): en computadora
   lado a lado; en celular se deslizan en horizontal. Al entrar en pantalla
   aparecen de a una (script.js). */

.gs {
  background: var(--chocolate);
  color: var(--platinum-blonde);
}
.gs.section { padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem); }
.gs :focus-visible { outline-color: var(--platinum-blonde); }
.gs .eyebrow::before { background: var(--cloudy-blue); }

.gs__head { display: grid; gap: 1rem; margin-bottom: var(--title-gap); }
.gs__title { margin-top: 1rem; color: var(--cloudy-blue); }
.gs__lead { font-size: var(--fs-lead); line-height: 1.4; max-width: 34ch; }

@media (min-width: 900px) {
  .gs__head { grid-template-columns: 1fr auto; align-items: end; gap: 3rem; }
  .gs__lead { max-width: 30ch; }
}

.gs__cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 68%;
  gap: 0.75rem;
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.gs__cards::-webkit-scrollbar { display: none; }

.gs-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 2 / 3;
  padding: 1.25rem;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--chocolate);
  scroll-snap-align: start;
}
.gs-card__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gs-card--ala .gs-card__img { object-position: 28% 50%; } /* recorte del ala */
/* Velo: chocolate fuerte abajo (detrás del texto) y un toque cherry arriba */
.gs-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(72, 47, 33, 0.94) 0%, rgba(72, 47, 33, 0.72) 36%, rgba(72, 47, 33, 0.2) 68%, rgba(130, 26, 52, 0.38) 100%);
}
.gs-card__num {
  position: absolute;
  top: 1rem;
  left: 1.25rem;
  font-size: clamp(2.25rem, 1.75rem + 1.4vw, 3rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
}
.gs-card__name { font-size: 1.125rem; font-weight: 500; line-height: 1.15; }
.gs-card__text { margin-top: 0.4rem; font-size: var(--fs-small); line-height: 1.45; }

.gs__hint { margin-top: 1rem; font-size: var(--fs-small); }

@media (min-width: 900px) {
  .gs__cards {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    max-width: var(--max);
    margin-inline: auto;
    overflow: visible;
  }
  .gs__hint { display: none; }
}

/* ---------- Inicio: servicios (cinta + planes) ---------- */

.marquee {
  overflow: hidden;
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-block: 1px solid var(--hairline);
}

.marquee__track {
  display: flex;
  width: max-content;
}

.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0;
}

.marquee__item {
  display: flex;
  align-items: center;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.marquee__item::after {
  content: "";
  width: 0.14em;
  height: 0.14em;
  margin-inline: 0.5em;
  border-radius: 50%;
  background: var(--cherry);
}

@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 38s linear infinite; }
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* Con "reducir movimiento": la cinta queda quieta y se lee completa */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { width: auto; flex-wrap: wrap; padding-inline: var(--gutter); }
  .marquee__group { flex-wrap: wrap; }
  .marquee__group[aria-hidden="true"] { display: none; }
  .marquee__item { font-size: clamp(1.375rem, 1rem + 1.2vw, 2.25rem); white-space: normal; }
}

/* ---------- Inicio: para quién trabajamos ----------
   Textura cloudy gris a todo el ancho, con un velo platinum para que el
   texto chocolate se lea perfecto. Con movimiento, la textura baja más lento
   que la página (parallax, script.js). Sin zoom continuo: nada se mueve en
   loop (regla de movimiento del 28/10/2026). */

.fit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fit__bg {
  position: absolute;
  inset: -12% 0;
  z-index: -1;
}
.fit__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fit__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(243, 235, 221, 0.62);
}

.fit__line {
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.fit__line + .fit__line { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.fit__line--soft { margin-left: auto; text-align: right; font-weight: 400; max-width: 24ch; }

/* ---------- Inicio: quiénes somos (equipo y números) ----------
   Arriba, el título y los 3 números; debajo, los 4 retratos. Viene entre
   Servicios y Resultados, con el mismo fondo platinum: sin aire propio
   arriba ni abajo, para no duplicar el de esas secciones (100 px como
   máximo entre secciones). */

.team.section { padding-block: 0; }
.team__head { margin-bottom: var(--title-gap); }
.team__head .eyebrow { margin-bottom: 1rem; }

.team__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: 1rem;
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.team__row::-webkit-scrollbar { display: none; }

.team__person { scroll-snap-align: start; }

.team__photo {
  aspect-ratio: 4 / 5;
  border-radius: 0.5rem;
}
.team__photo img { object-position: 50% 15%; }

.team__name {
  margin-top: 0.9rem;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.team__role { margin-top: 0.35rem; font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; }

.team__hint { margin-top: 1.25rem; font-size: var(--fs-small); }

@media (min-width: 900px) {
  .team__row {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 columnas iguales, todo el ancho */
    grid-auto-columns: auto;
    gap: clamp(1rem, 2vw, 2rem);
    max-width: var(--max);
    margin-inline: auto;
    overflow: visible;
  }
  .team__hint { display: none; }
}

/* Lugar para el logo del cliente en un testimonio: se muestra solo con
   autorización escrita */
.quote__logo { height: 2rem; width: auto; margin-bottom: 1.25rem; }

/* ---------- Inicio: números (dentro de Quiénes somos) ----------
   El título a la izquierda y los 3 números en fila a la derecha (en
   computadora, en la misma línea). Los números cuentan desde 0 al entrar
   en pantalla (script.js). */

.numbers__inner { display: grid; gap: 1.75rem; align-items: center; }
.numbers__title { max-width: none; } /* corte fijo: "30 marcas." / "Un mismo criterio." */

.numbers__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.numbers__list .number__value { color: var(--chocolate); }

.number__value {
  display: block;
  font-size: clamp(2.25rem, 1.75rem + 1.4vw, 3rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cherry);
}
.number__label { display: block; margin-top: 0.6rem; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; max-width: 22ch; }

@media (min-width: 900px) {
  .numbers__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 3rem; }
  .numbers__list { gap: 2rem; }
}

/* ---------- Cierre (uno solo, al final de la landing) ---------- */

.closing__head { padding-block: var(--section) clamp(3rem, 2rem + 4vw, 6rem); }
.closing__title { max-width: 14ch; }
.closing__head .btn { margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.btn--closing { padding: 18px 36px; font-size: 1.0625rem; }
/* Encuadre hacia arriba: se ven las 4 caras completas */
.closing__media img { object-position: 50% 15%; }

/* Cierre de la landing: con la misma fuerza que el hero. La foto llena la
   pantalla; en celular se ve entera de ancho (no se corta ninguna cara) y
   debajo sigue el chocolate. Degradado chocolate abajo, detrás del texto. */
.closing--full {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--chocolate);
  color: var(--platinum-blonde);
}
.closing--full .closing__media {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  aspect-ratio: auto;
  height: min(100%, 66.667vw); /* 66,667vw = la foto entera de ancho (es 3:2) */
  height: round(down, min(100%, 66.667vw), 1px); /* píxel entero: sin línea clara abajo */
  background: var(--chocolate);
}
.closing--full .closing__media img { object-position: 50% 18%; }
.closing--full .closing__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--chocolate) 0%, rgba(72, 47, 33, 0.88) 26%, rgba(72, 47, 33, 0.5) 42%, rgba(72, 47, 33, 0) 60%);
}
.closing--full .closing__head {
  padding-block: 0 clamp(2.5rem, 1.5rem + 4vw, 5rem);
  text-shadow: 0 1px 2px rgba(72, 47, 33, 0.35), 0 4px 40px rgba(72, 47, 33, 0.7);
}
.closing--full .closing__title {
  max-width: 13ch;
  font-size: var(--fs-h2);
  line-height: 1.05;
}
.closing--full .closing__title .accent { color: var(--cloudy-blue); }
.closing--full .btn { text-shadow: none; }

@media (min-width: 900px) {
  .closing--full .closing__title { max-width: 18ch; }
}

/* Celular: la foto grupal es horizontal, así que el cierre no ocupa toda la
   pantalla. Foto entera de ancho y, enseguida debajo, el título y el botón. */
@media (max-width: 899px) {
  .closing--full { min-height: 0; }
  .closing--full .closing__media {
    position: relative;
    inset: auto;
  }
  .closing--full .closing__head { padding-top: 1.5rem; }
  /* Tapa la línea fina que aparece donde termina la foto (borde en medio
     de un píxel). Esa franja de la foto ya es chocolate por el degradado. */
  .closing--full::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(round(down, 66.667vw, 1px) - 1px);
    height: 2px;
    background: var(--chocolate);
    pointer-events: none;
  }
}

/* ---------- Landing: servicios ---------- */

.services { padding-bottom: var(--section); }

/* Los 4 planes, uno por fila, con línea fina entre filas: número; nombre y
   etiqueta; para quién es; lo que incluye, en texto; modalidad y
   duración; y el botón a la derecha (en celular, debajo). */
.plans { margin-top: var(--title-gap); border-top: 1px solid var(--hairline); }
.plan {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0 1rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--hairline);
  scroll-margin-top: var(--header-h);
}
.plan__num { padding-top: 0.6rem; font-size: var(--fs-label); letter-spacing: 0.12em; color: var(--cherry); }
.plan__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.9rem;
  font-size: clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem); /* 28 px en computadora */
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.plan__mix { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cherry); }
.plan__for { margin-top: 0.6rem; font-size: var(--fs-body); line-height: 1.45; max-width: 70ch; }
.plan__includes { margin-top: 0.5rem; font-size: var(--fs-body); font-weight: 500; line-height: 1.45; max-width: 70ch; }
.plan__terms { margin-top: 0.9rem; font-size: 0.8125rem; line-height: 1.4; }
.plan__cta { grid-column: 2; justify-self: start; margin-top: 1rem; }

@media (min-width: 900px) {
  .plan {
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    gap: 0 2rem;
    align-items: start;
    padding-block: 1.75rem;
  }
  .plan__cta { grid-column: 3; grid-row: 1; margin-top: 0.15rem; }
}

/* Adicionales: cierre de Servicios, pegado a los planes. Título chico y
   la lista en una línea de texto, con puntos cherry. */
.extras { margin-top: 1.75rem; }
.extras__title { font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cherry); }
.extras__line { margin-top: 0.6rem; font-size: var(--fs-body); line-height: 1.6; }
.extras__line .dot { padding-inline: 0.35em; color: var(--cherry); }

/* ---------- Landing: cómo empezamos ----------
   Sección propia con fondo cloudy blue. 4 pasos en fila en computadora
   (en celular, uno debajo del otro): número grande cherry, título corto
   y una línea. */
.start { background: var(--cloudy-blue); }
.start__steps { display: grid; gap: 1.5rem; }
.start__step {
  display: grid;
  grid-template-columns: 3.5rem 1fr; /* mismo ancho para los 4 números: los textos quedan alineados */
  gap: 0.25rem 1rem;
  align-items: baseline;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(72, 47, 33, 0.25);
}
.start__num {
  grid-row: 1 / span 2;
  font-size: clamp(2.25rem, 1.75rem + 1.4vw, 3rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cherry);
}
.start__title { font-size: 1.125rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.start__title a { text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) {
  .start__title a:hover { color: var(--cherry); }
}
.start__text { grid-column: 2; font-size: var(--fs-small); line-height: 1.45; max-width: 30ch; }
/* Botón debajo de los 4 pasos (mismo estilo que los demás botones) */
.start__cta { margin-top: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }

@media (min-width: 900px) {
  .start__steps { grid-template-columns: repeat(4, 1fr); gap: 0 2rem; }
  .start__step { grid-template-columns: 1fr; gap: 0.5rem; align-content: start; }
  .start__num { grid-row: auto; margin-bottom: 0.75rem; }
  .start__text { grid-column: auto; }
}

/* ---------- Landing: testimonios y resultados ---------- */

.results__head { display: grid; justify-items: center; margin-bottom: var(--title-gap); text-align: center; }
.results__head .eyebrow { margin-bottom: 1rem; }
.results__lead { margin-top: 0.9rem; font-size: var(--fs-lead); line-height: 1.4; max-width: 40ch; }

/* Tarjetas compactas de bordes redondeados: arriba el logo (o el nombre de
   la marca como logo tipográfico), la frase corta o los números, "Leer
   más", línea fina y "Cliente:" / "Servicios:" al pie. En computadora, 3
   por fila; en celular se deslizan en horizontal. */
.results {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: 0.75rem;
  align-items: stretch;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.results::-webkit-scrollbar { display: none; }
.result {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.25rem 1.25rem;
  border-radius: 1rem;
  background: var(--cloudy-blue);
  scroll-snap-align: start;
}
/* Los testimonios pendientes (con "hidden") no se ven ni como hueco */
.result[hidden] { display: none; }

/* Logo del cliente: chico, máx. 120 px de ancho */
.result__logo {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.result__logo-img { display: block; max-width: 120px; max-height: 2.5rem; width: auto; height: auto; }

.result__quote { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.45; letter-spacing: -0.01em; }
.client__full { font-size: var(--fs-body); line-height: 1.55; }
.client__more {
  -webkit-appearance: none;
  appearance: none;
  align-self: flex-start;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--chocolate);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .client__more:hover { color: var(--cherry); }
}
html:not(.js) .client__short,
html:not(.js) .client__more { display: none; }
html:not(.js) .client__full { display: block; }

/* Rocha: los dos números en lugar de la frase */
.result__figures { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.result__figure .number__label { max-width: none; }
.result__detail { display: block; margin-top: 0.4rem; font-size: 0.8125rem; line-height: 1.45; }
.result__note { margin-top: 0.9rem; font-size: 0.8125rem; }

/* Cliente y Servicios al pie, con línea fina arriba y un punto cherry */
.result__meta {
  display: grid;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(72, 47, 33, 0.25);
  font-size: var(--fs-small);
}
.result .client__more,
.result .result__note { margin-bottom: 1.25rem; } /* aire antes del pie */
.result__meta div { display: flex; align-items: baseline; gap: 0.4rem; }
.result__meta div::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cherry);
  transform: translateY(-1px);
}
.result__meta dt { font-weight: 500; }

.results__hint { margin-top: 1rem; font-size: var(--fs-small); }

@media (min-width: 900px) {
  .results {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .result { padding: 1.75rem 1.75rem 1.5rem; }
  .results__hint { display: none; }
}

/* ---------- Landing: contacto ---------- */

/* Email e Instagram, clickeables (mismos íconos del footer) */
/* Viene después de Cómo empezamos (cloudy blue): lleva su aire normal
   arriba. La línea fina que la separaba de Testimonios (mismo fondo) ya
   no hace falta. */
.contact-direct__title { margin-top: 1rem; }

.direct__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem 2.5rem;
  margin-top: 1.25rem;
}
.direct__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 2.75rem;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 200ms ease;
}
.direct__icon { flex-shrink: 0; width: 1.1em; height: 1.1em; }
@media (hover: hover) and (pointer: fine) {
  .direct__link:hover { color: var(--cherry); }
}
@media (min-width: 900px) {
  .direct__list { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Trabajá con nosotros (formulario) ---------- */

/* Quien llega ya decidió escribir: encabezado corto y el formulario se ve
   en la primera pantalla. Columna centrada, máximo 720 px. */
.contact {
  padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 3vw, 4rem));
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
  scroll-margin-top: 0;
}
.contact__inner { max-width: calc(720px + 2 * var(--gutter)); }

.contact__title { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); line-height: 1.05; }
.contact__intro { margin-top: clamp(1rem, 0.5rem + 1.2vw, 1.75rem); font-size: var(--fs-lead); line-height: 1.35; }
.contact__required { margin-top: 1.25rem; font-size: var(--fs-small); }

/* Formulario: campos con línea inferior, sin recuadros */

.form { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }

.form__trap { position: absolute; left: -9999px; opacity: 0; }

.form__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.form__group + .form__group { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.form__group > legend {
  float: left;
  width: 100%;
  margin-bottom: 1.5rem;
  padding: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.form__group > legend + * { clear: both; }

.field { display: block; margin: 0 0 2rem; padding: 0; border: 0; min-width: 0; }
/* En computadora, dos campos cortos por fila; en celular, uno debajo del otro */
@media (min-width: 900px) {
  .field-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}
.field > label,
.field > legend {
  display: block;
  padding: 0;
  font-weight: 500;
  line-height: 1.35;
}
.field__hint { margin-top: 0.25rem; font-size: var(--fs-small); }
.field__optional { font-weight: 400; }
.nowrap { white-space: nowrap; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid var(--chocolate);
  border-radius: 0;
  background: transparent;
  color: var(--chocolate);
  font: inherit;
  font-size: var(--fs-lead);
  transition: border-color 200ms ease;
}
/* Caja de texto: borde fino alrededor para que el cursor arranque arriba a la
   izquierda a la vista, como en cualquier campo de texto. 3 líneas, unos 90 px. */
.field textarea {
  box-sizing: border-box;
  height: 5.625rem;
  min-height: 5.625rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--chocolate);
  line-height: 1.3;
  resize: vertical;
}
.field:has(textarea) { margin-bottom: 1.25rem; }
.field textarea:focus { border-color: var(--cherry); }
.field textarea:focus-visible { box-shadow: 0 0 0 1px var(--cherry); }
.field input:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--cherry); }
.field input:focus-visible,
.field textarea:focus-visible { box-shadow: 0 1px 0 var(--cherry); }

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  margin-top: 0.75rem;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  cursor: pointer;
}
.choice input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--cherry);
  cursor: pointer;
}

.form__consent { display: grid; gap: 0; margin-top: 0; }
.choice--consent { align-items: flex-start; min-height: 2.25rem; }
.choice--consent input { margin-top: 0.15rem; }

.field__error {
  margin-top: 0.5rem;
  color: var(--cherry);
  font-size: var(--fs-small);
  font-weight: 500;
}
[aria-invalid="true"] { border-bottom-color: var(--cherry) !important; }

.form__actions { margin-top: 2.5rem; }
.form__actions .btn { width: 100%; }
.form__actions .btn[disabled] { cursor: progress; background: var(--chocolate); }
.form__status { margin-top: 1rem; font-weight: 500; color: var(--cherry); }
.form__status:empty { display: none; }

@media (min-width: 640px) {
  .form__actions .btn { width: auto; }
}

.form-done { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.form-done:focus { outline: none; }
.form-done__title { font-size: var(--fs-h2); }
.form-done__text { margin-top: 1.5rem; font-size: var(--fs-lead); max-width: 34ch; }

/* ---------- Footer (igual en la landing y en el formulario) ----------
   Franja con el ala del hero y velo chocolate (55 %), con el logo blanco al
   centro y parallax suave (script.js). Debajo, en una fila: links, email,
   Instagram y lugar. */

.footer {
  padding-bottom: 1.5rem;
  background: var(--chocolate);
  color: var(--platinum-blonde);
}

.footer__band {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 30vh;
  min-height: 12rem;
  overflow: hidden;
}
.footer__bg {
  position: absolute;
  inset: -12% 0;
  z-index: -1;
}
.footer__bg img { width: 100%; height: 100%; object-fit: cover; }
.footer__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(72, 47, 33, 0.55);
}
.footer__logo { width: 160px; height: auto; }

@media (min-width: 900px) {
  .footer__band { height: 40vh; }
  .footer__logo { width: 220px; }
}

.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  padding-top: 1.5rem;
}

/* En celular, los 4 links en 2 columnas; en computadora, en fila */
.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: 0 2.5rem;
}
@media (min-width: 700px) {
  .footer__nav { display: flex; gap: 0.25rem 1.75rem; }
}
.footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 200ms ease;
}
.footer__nav a[aria-current="page"] { text-decoration: underline; }

.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

/* Solo el ícono; el texto oculto ("Email", "Instagram") es para lectores de pantalla */
.footer__icon-link {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  transition: color 200ms ease;
}
.footer :focus-visible { outline-color: var(--cloudy-blue); }
@media (hover: hover) and (pointer: fine) {
  .footer__nav a:hover,
  .footer__icon-link:hover { color: var(--cloudy-blue); }
}
.icon { width: 22px; height: 22px; }

.footer__place { margin-left: 0.75rem; font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }

.footer__legal { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); font-size: 0.72rem; letter-spacing: 0.04em; }

/* ---------- Intro (solo Inicio, primera vez por sesión) ---------- */

.intro { display: none; }
.intro-on .intro {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: var(--chocolate);
  color: var(--platinum-blonde);
  /* Seguro: a los 3 segundos se oculta sola, pase lo que pase */
  animation: intro-safety 0s linear 3s forwards;
}
.intro__mark { width: clamp(4.5rem, 12vw, 8rem); height: auto; overflow: visible; }
.intro__mark path {
  fill: var(--platinum-blonde);
  fill-opacity: 0;
  stroke: var(--platinum-blonde);
  stroke-width: 1.2;
}
.intro__count {
  position: absolute;
  bottom: clamp(1.5rem, 1rem + 3vw, 3rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-label);
  font-weight: 300;
  letter-spacing: 0.2em;
}
@keyframes intro-safety { to { visibility: hidden; } }

/* ---------- Fundido chocolate entre páginas (0,5 s) ---------- */

.page-fade { display: none; }
.motion .page-fade {
  position: fixed;
  inset: 0;
  z-index: 350;
  display: block;
  background: var(--chocolate);
  opacity: 0;
  pointer-events: none;
  /* Seguro: a los 3 segundos se oculta solo, pase lo que pase */
  animation: page-in 500ms ease 50ms backwards, fade-safety 0s linear 3s forwards;
}
/* Seguro con otro nombre: si repitiera "fade-safety", el navegador no lo
   reiniciaría y el fundido de salida quedaría oculto */
.motion .page-fade.is-leaving { animation: page-out 450ms ease forwards, leave-safety 0s linear 3s forwards; }
/* Al volver con "atrás" (script.js): transparente y sin bloquear clics */
.motion .page-fade.is-done { animation: none; opacity: 0; visibility: hidden; }
@keyframes fade-safety { to { opacity: 0; visibility: hidden; } }
@keyframes leave-safety { to { opacity: 0; visibility: hidden; } }
@keyframes page-in { from { opacity: 1; } to { opacity: 0; } }
@keyframes page-out { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Cursor propio (solo computadora con mouse) ---------- */

.cursor { display: none; }
.has-cursor .cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--cherry);
  color: var(--platinum-blonde);
  pointer-events: none;
  transition: width 300ms var(--ease), height 300ms var(--ease), margin 300ms var(--ease), opacity 200ms ease;
}
.has-cursor .cursor span {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 200ms ease;
}
/* Grande, al costado del puntero: acompaña sin tapar el texto del botón o link */
.has-cursor .cursor.is-big { width: 64px; height: 64px; margin: 14px 0 0 14px; }
.has-cursor .cursor.is-big span { opacity: 1; }
.has-cursor .cursor.is-hidden { opacity: 0; }
.has-cursor body,
.has-cursor a,
.has-cursor button,
.has-cursor .choice { cursor: none; }
.has-cursor input,
.has-cursor textarea { cursor: text; }

/* ---------- Movimiento ----------
   Los estados iniciales los pone script.js solo si hay movimiento.
   Sin JavaScript o con "reducir movimiento", todo se ve quieto y completo. */

/* Los textos que aparecen por línea se ocultan hasta que script.js los anima.
   Si el movimiento no arranca en 4 segundos, se muestran igual. */
.motion [data-split] { visibility: hidden; }
.motion-safe [data-split] { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}