/* ALSO Talent — estilos base */

:root {
  --yellow: #FFCD00;
  --black: #000000;
  --white: #FFFFFF;
  --blue: #2563EB;   /* acento digital, nunca en el logo */
  --violet: #5B2EFF; /* acento digital, nunca en el logo */
  --gray: #D9D9D9;

  /* Respaldo de Neue Haas Grotesk Display Black mientras se resuelve la licencia */
  --font-display: "Neue Haas Grotesk Display", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala tipográfica (única fuente de verdad). Excepciones permitidas: --fs-giant (S4) y el
     "BUILD BEYOND BORDERS" del footer. */
  --fs-hero:  clamp(2.1rem, 4.3vw, 4.4rem);   /* H1 del hero */
  --fs-title: clamp(2.1rem, 4.6vw, 4.6rem);   /* títulos de sección: S2, S3, subbloque de S4 */
  --fs-giant: clamp(2.1rem, 5vw, 5.1rem);     /* tipografía gigante S4 (≈ -22% vs. antes) */
  --fs-sub:   clamp(1.6rem, 3vw, 2.8rem);     /* subtítulos de pieza: "Your day, aligned" */
  --fs-h3:    clamp(1.15rem, 1.6vw, 1.45rem); /* títulos de punto */
  --fs-lead:  clamp(1rem, 1.25vw, 1.2rem);    /* intro / cuerpo destacado */

  --nav-h: 72px;
  --gutter: clamp(20px, 4vw, 56px);
  --line: rgba(255, 255, 255, .16);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.no-scroll { overflow: hidden; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.01em;   /* manual: tracking -10 en cuerpo, subtítulos y etiquetas */
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8em 1.4em;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
  border: 2px solid transparent; border-radius: 999px;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn--yellow { background: var(--yellow); color: var(--black); }
.btn--yellow:hover { background: var(--white); }
.btn--ghost { border-color: var(--white); color: var(--white); }
.btn--ghost:hover { background: var(--white); color: var(--black); }
.btn--lg { padding: 1em 1.8em; font-size: 1rem; }
.btn--block { width: 100%; }

/* ---------- Selector de idioma ---------- */
.lang { display: inline-flex; align-items: center; gap: .4em; font-weight: 300; font-size: .85rem; letter-spacing: .06em; }
.lang__btn { opacity: .55; }
.lang__btn.is-active { opacity: 1; font-weight: 700; border-bottom: 2px solid var(--yellow); }
.lang__btn:disabled { cursor: not-allowed; }
.lang__sep { opacity: .35; }

/* ---------- Navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  color: var(--white);               /* tema por defecto = negro (hero); main.js cambia data-theme */
  transition: color .3s;
}
.nav__bg { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; pointer-events: none; }
.nav__bg--black { background: var(--black); }
.nav__bg--white { background: var(--white); }
.nav__bg--yellow { background: var(--yellow); }
.nav .nav__bg--black { opacity: 1; }
.nav[data-theme="white"] .nav__bg--black, .nav[data-theme="yellow"] .nav__bg--black { opacity: 0; }
.nav[data-theme="white"] .nav__bg--white, .nav[data-theme="yellow"] .nav__bg--yellow { opacity: 1; }
.nav[data-theme="white"], .nav[data-theme="yellow"] { color: var(--black); }
.nav.is-menu-open { color: var(--white); }
.nav.is-menu-open .nav__bg--black { opacity: 1; }
.nav.is-menu-open .nav__bg--white, .nav.is-menu-open .nav__bg--yellow { opacity: 0; }
.nav__inner {
  position: relative; height: 100%; max-width: 1600px; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__logo { position: relative; flex: none; width: 220px; }
.nav__logo img { transition: opacity .3s; }
.nav__logo .logo--white, .nav__logo .logo--yellow { position: absolute; inset: 0; opacity: 0; }
.nav[data-theme="white"] .logo--white, .nav[data-theme="yellow"] .logo--yellow { opacity: 1; }
.nav[data-theme="white"] .logo--black, .nav[data-theme="yellow"] .logo--black { opacity: 0; }
.nav.is-menu-open .logo--black { opacity: 1; }
.nav.is-menu-open .logo--white, .nav.is-menu-open .logo--yellow { opacity: 0; }   /* mínimo del logo completo: 220px */
.nav__links { display: flex; gap: clamp(16px, 2.2vw, 36px); font-size: .9rem; }
.nav__links a { position: relative; padding: 6px 0; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: 22px; }
.nav .btn--yellow { background: var(--yellow); color: var(--black); }            /* sobre negro: CTA amarillo */
.nav .btn--yellow:hover { background: var(--white); }
.nav[data-theme="white"] .btn--yellow, .nav[data-theme="yellow"] .btn--yellow { background: var(--black); color: var(--yellow); }
.nav[data-theme="white"] .btn--yellow:hover, .nav[data-theme="yellow"] .btn--yellow:hover { background: var(--white); color: var(--black); }
.nav.is-menu-open .btn--yellow { background: var(--yellow); color: var(--black); }
.nav .lang__btn.is-active { border-bottom-color: var(--yellow); }
.nav[data-theme="white"] .lang__btn.is-active, .nav[data-theme="yellow"] .lang__btn.is-active { border-bottom-color: var(--black); }
.nav__cta { padding: .7em 1.2em; font-size: .9rem; }

.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span {
  position: absolute; left: 10px; right: 10px; height: 2px; background: currentColor;
}
.burger span:first-child { top: 16px; }
.burger span:last-child { top: 26px; }
.nav.is-menu-open .burger span:first-child { top: 21px; transform: rotate(45deg); }
.nav.is-menu-open .burger span:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------- Menú móvil ---------- */
.menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--black);
  padding: calc(var(--nav-h) + 24px) var(--gutter) 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.9rem, 9vw, 3rem); line-height: 1.1; padding: .3em 0;
  border-bottom: 1px solid var(--line);
}
.menu__links a:hover { color: var(--yellow); }
.menu__foot { display: grid; gap: 20px; padding-top: 28px; }

/* ---------- Placeholders de foto (.ph) ---------- */
.ph {
  position: relative; overflow: hidden;
  background:
    var(--gray);
  border: 0;
  display: flex; align-items: flex-end;
}
.ph figcaption {
  padding: 10px 12px; font-weight: 300; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; line-height: 1.35; color: rgba(0, 0, 0, .7);
}

/* ---------- Recursos gráficos ---------- */
.reg { position: absolute; font-weight: 300; font-size: 22px; line-height: 1; color: rgba(255, 255, 255, .45); pointer-events: none; }
.reg--tl { top: calc(var(--nav-h) + 16px); left: var(--gutter); }
.reg--br { bottom: 16px; right: var(--gutter); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 300; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 28px; height: 4px; background: var(--yellow); flex: none; }

/* ---------- S1 · Hero ---------- */
.hero { position: relative; background: var(--black); }
.hero::before {            /* grano sutil */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hero__stage {
  position: relative; overflow: hidden;
  min-height: max(720px, calc(100svh - 64px));
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 56px) var(--gutter) 64px;
}
.hero__content {
  position: relative; z-index: 2;
  max-width: 980px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.hero__title {
  font-family: var(--font-display); font-weight: 900; letter-spacing: 0;
  font-size: var(--fs-hero); line-height: 1.04;
}
.line { display: block; overflow: hidden; padding-bottom: .08em; }   /* máscara por líneas (lista para animar) */
.line > span { display: block; }
.line--yellow { color: var(--yellow); }
.hero__body { max-width: 560px; font-size: 1.05rem; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 4px; }

/* Collage — escritorio. Fotos +35%; margen --cm a los bordes y bajo el nav; el retrato puede cortarse con la banda. */
.collage { --cm: clamp(48px, 4.2vw, 60px); position: absolute; inset: 0; z-index: 1; }
.collage .ph { position: absolute; }
.ph--left  { left: var(--cm); top: calc(var(--nav-h) + var(--cm) + 24px); width: clamp(120px, min(10.8vw, 17svh), 162px); aspect-ratio: 2 / 5; }
.ph--bl    { left: var(--cm); bottom: var(--cm); width: clamp(160px, min(18.8vw, 28svh), 270px); aspect-ratio: 4 / 3; }
.ph--right { right: var(--cm); top: calc(var(--nav-h) + var(--cm) + 24px); width: clamp(160px, min(16vw, 22.5svh), 230px); aspect-ratio: 4 / 5; }

.portrait { position: absolute; right: var(--cm); bottom: -14%; width: clamp(260px, min(25vw, 42svh), 420px); aspect-ratio: 3 / 4; }
.portrait__circle {
  position: absolute; z-index: 0;
  width: 150%; aspect-ratio: 1; left: 46%; top: 52%;
  transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--yellow);
}
.ph--main { position: absolute; inset: 0; z-index: 1; width: 100%; border-color: transparent; }

/* Banda de atributos */
.band {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--black);
}
.band li {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 22px 16px; text-align: center;
  font-weight: 700; font-size: clamp(.85rem, 1.25vw, 1.05rem); letter-spacing: -.01em;
}
.band li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); flex: none; }
.band li + li { border-left: 1px solid var(--line); }

/* ---------- Transición · foto que crece (clip-path animado por js/motion.js) ---------- */
.reveal { position: relative; height: 100svh; background: var(--black); overflow: hidden; }
.reveal__media { position: absolute; inset: 0; }
.reveal__media .ph { position: absolute; inset: 0; width: 100%; height: 100%; }
.reveal__media .ph figcaption { padding: 20px var(--gutter); font-size: 11px; }


/* ---------- Utilidades de sección ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { position: relative; max-width: 1600px; margin: 0 auto; padding: 0 var(--gutter); }
.reg--dark { color: rgba(0, 0, 0, .6); }
.label { font-weight: 300; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 20px; }
.label b { font-weight: 900; }
.services .label b { color: var(--yellow); }
.title {
  font-family: var(--font-display); font-weight: 900; letter-spacing: 0; text-transform: uppercase;
  font-size: var(--fs-title); line-height: 1.02; max-width: 16em; text-wrap: balance;
}
.title--bar::after { content: ""; display: block; width: clamp(72px, 8vw, 112px); height: 10px; margin-top: .45em; }
.problem .title--bar::after { background: var(--black); }
.services .title--bar::after { background: var(--yellow); }

/* ---------- S2 · Problema — AMARILLO, solo texto negro ---------- */
.problem { position: relative; background: var(--yellow); color: var(--black); padding: clamp(72px, 9vw, 130px) 0; scroll-margin-top: var(--nav-h); }
.problem .reg--tl { top: 24px; }
.problem__intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(28px, 3vw, 44px); font-size: var(--fs-lead); line-height: 1.55; }
.problem__intro p { max-width: 36em; }
.tasks { margin-top: clamp(40px, 5vw, 72px); border-top: 2px solid var(--black); }
.task {
  --rp: clamp(12px, 1.6vw, 24px);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: clamp(20px, 4vw, 64px);
  padding: clamp(22px, 2.6vw, 36px) 0; color: var(--black);
}
.tasks > li { border-bottom: 1px solid var(--black); }
.task::before {          /* relleno de hover: bleed lateral, texto alineado al borde */
  content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--rp) * -1);
  background: var(--black); transform: scaleY(0); transform-origin: bottom;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.task:focus-visible { outline: 3px solid var(--black); outline-offset: 4px; }
.task__arrow svg { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.task__from, .task__help, .task__arrow { transition: color .25s, border-color .25s, background-color .25s; }
@media (hover: hover) {
  .task:hover::before { transform: scaleY(1); }
  .task:hover .task__from, .task:hover .task__help { color: var(--yellow); }
  .task:hover .task__arrow { border-color: var(--yellow); color: var(--yellow); }
  .task:hover .task__arrow svg { transform: translateX(5px); }
}
.task:focus-visible::before { transform: scaleY(1); }
.task:focus-visible .task__from, .task:focus-visible .task__help { color: var(--yellow); }
.task:focus-visible .task__arrow { border-color: var(--yellow); color: var(--yellow); }
.task:focus-visible .task__arrow svg { transform: translateX(5px); }
.task__from { font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 1.8vw, 1.6rem); line-height: 1.3; }
.task__help { font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.3; letter-spacing: -.01em; }
.task__arrow { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--black); border-radius: 50%; color: var(--black); flex: none; }

/* ---------- S3 · Servicios — NEGRO ---------- */
.services { position: relative; background: var(--black); color: var(--white); padding: clamp(72px, 9vw, 130px) 0; scroll-margin-top: var(--nav-h); overflow: hidden; }
.services .reg--tl { top: 24px; }
.services__intro { max-width: 36em; margin-top: clamp(28px, 3vw, 44px); font-size: var(--fs-lead); line-height: 1.55; color: rgba(255, 255, 255, .9); }
.rail {
  margin-top: clamp(40px, 5vw, 64px); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab;
  padding: 0 var(--gutter); scroll-padding: 0 var(--gutter);
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rail.is-dragging a { pointer-events: none; }
.rail__track { display: flex; gap: clamp(16px, 1.8vw, 28px); width: max-content; padding-top: 0; }
.card { flex: none; width: clamp(300px, 30vw, 440px); scroll-snap-align: start; }
.card article { height: 100%; display: flex; flex-direction: column; }
.card__tag {
  align-self: flex-start; background: var(--yellow); color: var(--black);
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0;
  font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1; padding: .7em 1em .6em;
}
.card__ph { aspect-ratio: 4 / 3; width: 100%; border: 1px solid var(--line); border-top: 0; }
.card__ph { border: 0; }
.card__foot {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: 22px 20px 24px; border: 1px solid var(--line); border-top: 0; margin-top: 0;
}
.card__desc { font-size: .98rem; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.btn--sm { align-self: flex-start; padding: .55em 1.1em; font-size: .85rem; }
.services__after { display: flex; align-items: center; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 64px); }
.services__after p { max-width: 38em; font-size: var(--fs-lead); line-height: 1.55; }

/* ---------- Responsive ---------- */
/* Escritorio compacto: el texto se desplaza a la izquierda para dejar libre el retrato */
@media (min-width: 861px) and (max-width: 1279px) {
  .hero__stage { padding-right: calc(var(--gutter) + 10vw); }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .ph--bl { display: none; }
  .hero__stage { padding-right: calc(var(--gutter) + 14vw); }
  .hero__title { font-size: 3.6vw; }
  .hero__body { max-width: 440px; }
}

@media (max-width: 980px) {
  .nav__links, .nav__cta, .nav__join, .nav__biz { display: none; }
  .burger { display: block; }
  .nav__logo { width: 220px; }
}

@media (max-width: 860px) {
  .hero__stage {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: calc(var(--nav-h) + 36px) var(--gutter) 0;
  }
  .hero__content { align-items: flex-start; text-align: left; }
  .hero__title { font-size: clamp(2rem, 9.2vw, 3rem); }
  .hero__ctas { flex-direction: column; align-self: stretch; }
  .hero__ctas .btn { width: 100%; }
  .reg { display: none; }

  /* Collage móvil: retrato principal con círculo + dos fotos pequeñas */
  .collage { position: relative; inset: auto; order: 2; height: 380px; margin: 44px calc(var(--gutter) * -1) 0; }
  .ph--bl { display: none; }
  .ph--left  { display: flex; left: 0; top: 40px; width: 28%; aspect-ratio: 3 / 4; }
  .ph--right { display: flex; right: 0; top: 0; width: 26%; aspect-ratio: 1; }
  .portrait { right: auto; bottom: 0; left: 50%; transform: translateX(-34%); width: 58%; max-width: 260px; }
  .portrait__circle { width: 140%; }

  .reveal { height: 70svh; }

  .band { grid-template-columns: 1fr; }
  .band li { justify-content: flex-start; padding: 16px var(--gutter); }
  .band li + li { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .problem__intro { grid-template-columns: 1fr; gap: 16px; }
  .task { grid-template-columns: 1fr auto; row-gap: 10px; column-gap: 16px; }
  .task__from { grid-column: 1; }
  .task__help { grid-column: 1; }
  .task__arrow { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; }
  .card { width: 82vw; max-width: 380px; scroll-snap-align: center; }
  .rail { scroll-snap-type: x mandatory; scroll-padding: 0 calc((100vw - min(82vw, 380px)) / 2); }
  .services__after { flex-direction: column; align-items: stretch; }
  .services__after .btn { width: 100%; }
}

/* ---------- Motion (solo activo con JS + sin reduced-motion; ver js/motion.js) ---------- */
.has-motion .hero__title .line > span { transform: translateY(110%); }
.has-motion .hero .eyebrow, .has-motion .hero__body, .has-motion .hero__ctas,
.has-motion .collage .ph, .has-motion .portrait__circle { opacity: 0; }
.hero__particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60;
  background: var(--yellow); transform: scaleX(0); transform-origin: left; pointer-events: none;
}
html[data-nav-theme="white"] .progress, html[data-nav-theme="yellow"] .progress { background: var(--black); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Motion S2/S3 ---------- */
.title--bar::after { transform: scaleX(var(--bar, 1)); transform-origin: left; }
.mark { position: relative; display: inline-block; z-index: 0; }
.mark::before { content: ""; position: absolute; z-index: -1; transform: scaleX(var(--m, 1)); transform-origin: left; }
.services .mark { color: var(--black); padding: 0 .12em; margin: 0 -.12em; }
.services .mark::before { inset: .04em 0 0 0; background: var(--yellow); }
.problem .mark::before { left: 0; right: 0; bottom: .02em; height: .11em; background: var(--black); }
.title .line > span.w { display: inline-block; }
.has-motion .problem .title, .has-motion .services .title { visibility: hidden; }
.has-motion .problem .label, .has-motion .problem__intro p, .has-motion .task,
.has-motion .services .label, .has-motion .services__intro, .has-motion .card, .has-motion .services__after { opacity: 0; }

/* Hover de tarjetas (S3) */
.card article { position: relative; isolation: isolate; }
.card article::before {
  content: ""; position: absolute; z-index: -1; inset: 0; background: var(--yellow);
  transform: scaleY(0); transform-origin: bottom; transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.card__tag, .card__desc, .card__foot, .card .btn { transition: color .25s, background-color .25s, border-color .25s; }
@media (hover: hover) {
  .card article:hover::before { transform: scaleY(1); }
  .card article:hover .card__desc { color: var(--black); }
  .card article:hover .card__tag { background: var(--black); color: var(--yellow); }
  .card article:hover .card__foot { border-color: transparent; }
  .card article:hover .btn { border-color: var(--black); color: var(--black); }
}
.card article:has(a:focus-visible)::before { transform: scaleY(1); }
.card article:has(a:focus-visible) .card__desc { color: var(--black); }
.card article:has(a:focus-visible) .card__tag { background: var(--black); color: var(--yellow); }
.card article:has(a:focus-visible) .card__foot { border-color: transparent; }
.card article:has(a:focus-visible) .btn { border-color: var(--black); color: var(--black); }
.card .btn:focus-visible { outline-color: var(--black); }

/* ---------- S4 · Trabajo con LATAM — BLANCO con cuadrícula fina ---------- */
.latam {
  position: relative; background-color: var(--white); color: var(--black);
  background-image:
    linear-gradient(rgba(0, 0, 0, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  padding: clamp(72px, 9vw, 130px) 0; scroll-margin-top: var(--nav-h);
}
.latam .reg--tl { top: 24px; }

.giant {
  font-family: var(--font-display); font-weight: 900; letter-spacing: 0; text-transform: uppercase;
  font-size: var(--fs-giant); line-height: .98;
}
.giant-wrap { position: relative; font-size: var(--fs-giant); }
/* Globos: posiciones en em de la tipografía gigante (la proporción del hueco se mantiene al escalar) */
.chat { position: absolute; inset: 0; pointer-events: none; color: var(--black); }
.chat svg { position: absolute; display: block; height: auto; overflow: visible; }
.chat__hello, .chat__hola { width: 3.4em; }
.chat__hello { right: 0; top: .05em; }
.chat__hola { left: 0; top: 3.45em; }
.chat .chat__line { left: 0; top: 0; width: 100%; height: 5.5em; }
.chat__t { font: 700 24px var(--font-body); fill: var(--black); stroke: none; letter-spacing: 0; }
.giant__a { display: block; max-width: 6.6em; }
.giant__b { display: block; max-width: 9.8em; margin: .35em 0 0 auto; }
.giant .line > span.w { display: inline-block; }
.latam .mark { color: var(--black); padding: 0 .08em; margin: 0 -.08em; white-space: nowrap; }
.latam .mark::before { inset: .06em 0 0 0; background: var(--yellow); }

.latam__intro { max-width: 36em; margin-top: clamp(28px, 3vw, 44px); font-size: var(--fs-lead); line-height: 1.55; }

/* 3 puntos + conectores punteados */
.points { list-style: none; padding: 0; --g: clamp(24px, 4vw, 64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--g); margin-top: clamp(48px, 6vw, 88px); }
.point { position: relative; }
.point__icon {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 64px; height: 64px; border: 2px solid var(--black); border-radius: 50%; background: var(--white);
}
.point__icon svg { width: 34px; height: 34px; }
.point:not(:last-child)::after {
  content: ""; position: absolute; top: 31px; left: 76px; width: calc(100% + var(--g) - 88px);
  border-top: 2px dashed var(--black);
  clip-path: inset(0 calc((1 - var(--d, 1)) * 100%) 0 0);
}
.point h3 { margin-top: 24px; font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; }
.point p { margin-top: 10px; max-width: 24em; line-height: 1.55; }

/* Momento firma — "Your day, aligned" */
.day { --who: 168px; --bh: 56px; --gap: 60px; margin-top: clamp(64px, 8vw, 112px); border: 2px solid var(--black); background: var(--white); padding: clamp(20px, 3vw, 40px); }
.day__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.day__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0; font-size: var(--fs-sub); line-height: 1; }
.day__tag { font-weight: 300; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.day__chart { padding-left: var(--who); margin-top: clamp(28px, 3vw, 40px); }
.day__plot { position: relative; padding-top: 34px; }
.day__row { position: relative; height: var(--bh); }
.day__bracket + .day__row { margin-top: var(--gap); }
.day__who { position: absolute; left: calc(var(--who) * -1); top: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; font-weight: 700; line-height: 1.25; }
.day__who small { font-weight: 300; font-size: .8rem; letter-spacing: .04em; }
.day__track { position: relative; height: 100%; background: rgba(0, 0, 0, .06); overflow: hidden; }
.day__bar { position: absolute; top: 0; bottom: 0; left: calc(var(--s) / 11 * 100%); width: calc((var(--e) - var(--s)) / 11 * 100%); background: var(--black); }
.day__fill { position: absolute; top: 0; bottom: 0; left: calc(var(--s) / 11 * 100%); width: calc((var(--e) - var(--s)) / 11 * 100%); background: var(--yellow); transform-origin: left; }
.day__bracket {
  position: absolute; z-index: 2; top: calc(var(--bh) + 8px); height: calc(var(--gap) - 16px);
  left: calc(var(--s) / 11 * 100%); width: calc((var(--e) - var(--s)) / 11 * 100%);
  border: 2px solid var(--black); border-block: 0;
}
.day__bracket::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--black); }
.day__bracket b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 2px 12px; background: var(--white); white-space: nowrap; font-weight: 900; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
.day__axis { position: relative; height: 34px; margin-top: 14px; border-top: 2px solid var(--black); }
.day__axis li { position: absolute; top: 6px; left: calc(var(--t) / 11 * 100%); transform: translateX(-50%); font-weight: 300; font-size: .78rem; letter-spacing: .06em; white-space: nowrap; }
.day__axis li:first-child { transform: none; }

/* Subbloque humano — NEGRO */
.human { position: relative; background: var(--black); color: var(--white); padding: clamp(72px, 9vw, 130px) 0; overflow: hidden; }
.human .reg--tl { top: 24px; }
.human__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.human__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0; font-size: var(--fs-title); line-height: 1.02; max-width: 14em; text-wrap: balance; }
.human__title::after { content: ""; display: block; transform: scaleX(var(--bar, 1)); transform-origin: left; width: clamp(72px, 8vw, 112px); height: 10px; margin-top: .45em; background: var(--yellow); }
.human .mark { color: var(--black); padding: 0 .12em; margin: 0 -.12em; }
.human .mark::before { inset: .04em 0 0 0; background: var(--yellow); }
.human__text p { max-width: 34em; margin-top: clamp(24px, 3vw, 40px); font-size: var(--fs-lead); line-height: 1.55; color: rgba(255, 255, 255, .9); }
.human__media { position: relative; display: flex; justify-content: center; align-items: center; min-height: clamp(380px, 40vw, 600px); }
.human__circle { position: absolute; z-index: 0; width: 135%; aspect-ratio: 1; left: 58%; top: 50%; transform: translate(-50%, -50%); }
.human__fill { position: absolute; inset: 0; border-radius: 50%; background: var(--yellow); }
.human__text { position: relative; z-index: 2; }
.human__photo { position: relative; z-index: 1; width: min(100%, 400px); aspect-ratio: 3 / 4; }

@media (max-width: 860px) {
  .giant__b { margin-left: 0; max-width: 9.8em; }
  .giant-wrap { font-size: inherit; }
  .chat { position: static; display: flex; align-items: flex-start; gap: 16px; margin-top: 20px; }
  .chat svg { position: static; width: min(38vw, 150px); }
  .chat .chat__line { display: none; }
  .points { grid-template-columns: 1fr; gap: 40px; --g: 40px; }
  .point { padding-left: 88px; }
  .point__icon { position: absolute; left: 0; top: 0; }
  .point h3 { margin-top: 0; padding-top: 18px; }
  .point:not(:last-child)::after { top: 76px; left: 31px; width: 0; height: calc(100% + var(--g) - 88px); border-top: 0; border-left: 2px dashed var(--black); clip-path: inset(0 0 calc((1 - var(--d, 1)) * 100%) 0); }
  .day { --who: 0px; }
  .day__plot { padding-top: 0; display: flow-root; }
  .day__row { height: var(--bh); margin-top: 28px; }
  .day__who { z-index: 3; left: 0; right: 0; top: -26px; height: auto; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .day__bracket + .day__row { margin-top: 76px; }
  .day__bracket { top: calc(28px + var(--bh) + 8px); height: 30px; }
  .day__axis { margin-top: 20px; }
  .day__axis li:nth-child(even) { display: none; }
  .human__grid { grid-template-columns: 1fr; }
  .human__media { min-height: 0; padding: 24px 0 48px; }
  .human__photo { width: 72%; }
  .human__circle { width: 150%; left: 60%; }
}

/* ---------- S5 · Evaluación y elección — AMARILLO, solo texto negro ---------- */
.assess { position: relative; background: var(--yellow); color: var(--black); padding: clamp(72px, 9vw, 130px) 0; scroll-margin-top: var(--nav-h); }
.assess .reg--tl { top: 24px; }
.assess .title--bar::after { background: var(--black); height: 14px; width: clamp(96px, 11vw, 150px); }
.assess .label b { color: var(--black); }
.assess__head { display: grid; gap: clamp(24px, 3vw, 40px); }
.assess__intro { max-width: 36em; font-size: var(--fs-lead); line-height: 1.55; }
.btn--black { border-color: var(--black); color: var(--black); }
.btn--black:hover { background: var(--black); color: var(--yellow); }

/* Base (móvil y sin JS): bloques apilados, cada uno con su ilustración */
.features { list-style: none; padding: 0; margin-top: clamp(40px, 6vw, 72px); display: grid; gap: clamp(48px, 8vw, 72px); }
.feature { display: grid; gap: 24px; }
.feature__n { font-weight: 900; font-size: .8rem; letter-spacing: .16em; margin-bottom: 10px; }
.feature__title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; }
.feature__body { margin-top: 12px; max-width: 34em; line-height: 1.55; }
.feature__art { position: relative; container-type: inline-size; aspect-ratio: 392 / 336; width: 100%; max-width: 480px; }
.feature__art svg:not(.cursor) { display: block; width: 100%; height: auto; }
.assess__cta { margin-top: clamp(40px, 6vw, 72px); }
.bar-fill, .check { transform-box: fill-box; }
.bar-fill { transform-origin: 0 50%; }
.check { transform-origin: 50% 50%; }

/* Ilustración 3: tarjetas de perfil (HTML; medidas en cqw para escalar con la ilustración) */
.profiles { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 1%; }
.pcard { position: relative; width: 31%; border: .9cqw solid var(--black); border-radius: 3cqw; }
.pcard__in { position: relative; z-index: 1; background: var(--white); border-radius: 2cqw; padding: 2.4cqw; display: grid; gap: 1.6cqw; }
.pcard .ph { width: 100%; aspect-ratio: 3 / 4; border-radius: 1.4cqw; }
.pcard .ph figcaption { padding: 1.2cqw; font-size: max(7px, 1.5cqw); line-height: 1.3; letter-spacing: .04em; }
.pline { display: block; height: 1.6cqw; background: var(--black); }
.pline--s { width: 62%; height: 1.2cqw; opacity: .25; }
.pill { display: block; text-align: center; font-weight: 700; font-size: max(9px, 2.9cqw); line-height: 1; padding: 1.6cqw 0; border: .7cqw solid var(--black); border-radius: 99px; }
.pill--on { position: absolute; z-index: 2; left: 2.4cqw; right: 2.4cqw; bottom: 2.4cqw; background: var(--black); color: var(--yellow); }
.pcard--pick { translate: 0 calc(var(--lift, 1) * -4%); }
.pcard__shadow { position: absolute; inset: 0; z-index: -1; transform: translate(2.6cqw, 2.6cqw); border-radius: 3cqw; background: var(--black); }
.pcard__badge { position: absolute; z-index: 3; width: 8.5cqw; aspect-ratio: 1; top: -4.2cqw; right: -3.4cqw; }
.cursor { position: absolute; width: 8cqw; left: 56%; top: 78%; z-index: 3; overflow: visible; translate: var(--cx, 0) var(--cy, 0); transform-origin: 20% 10%; }

/* Escritorio: pestañas a la izquierda, ilustración a la derecha, todo en una pantalla (pin) */
@media (min-width: 861px) {
  .assess { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 8px) 0 24px; }
  .assess .reg--tl { top: calc(var(--nav-h) + 4px); }
  .assess__head { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: clamp(32px, 5vw, 96px); }
  .assess .title { max-width: 13em; font-size: clamp(2rem, 3.9vw, 3.8rem); }
  .assess .label { margin-bottom: 12px; }
  .assess__intro { font-size: clamp(.95rem, 1.1vw, 1.1rem); line-height: 1.5; padding-bottom: 6px; }

  .assess__body { --art-h: clamp(250px, calc(100svh - 350px), 600px); margin-top: clamp(16px, 2.6svh, 32px); }
  .assess__body.is-tabs { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); grid-template-rows: auto auto auto auto 1fr; column-gap: clamp(40px, 6vw, 110px); align-items: start; }
  .is-tabs .features { display: contents; }
  .is-tabs .feature { display: contents; }
  .is-tabs .feature__text { grid-column: 1; display: grid; grid-template-columns: 2.2em 1fr; padding: 12px 0 12px 22px; border-left: 4px solid rgba(0, 0, 0, .18); cursor: pointer; }
  .is-tabs .feature__n { margin: .35em 0 0; grid-row: 1; }
  .is-tabs .feature__title, .is-tabs .feature__body { grid-column: 2; }
  .is-tabs .feature__title { font-size: clamp(1rem, 1.3vw, 1.3rem); }
  .is-tabs .feature__body { margin-top: 8px; font-size: clamp(.88rem, 1vw, 1rem); line-height: 1.5; }
  .is-tabs .feature:nth-child(1) .feature__text { grid-row: 1; margin-top: clamp(0px, 5svh, 56px); }
  .is-tabs .feature:nth-child(2) .feature__text { grid-row: 2; }
  .is-tabs .feature:nth-child(3) .feature__text { grid-row: 3; }
  .is-tabs .assess__cta { grid-column: 1; grid-row: 4; margin-top: 18px; padding-left: 26px; }
  .is-tabs .feature__art { grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: center; max-width: none; width: min(100%, calc(var(--art-h) * 392 / 336 * .85)); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .35s, transform .35s; }
  .is-tabs .feature__art { grid-area: 1 / 2 / -1 / 3; }
  .is-tabs .feature__title, .is-tabs .feature__n { opacity: .45; transition: opacity .3s; }
  .is-tabs .feature__body { display: none; }
  .is-tabs .feature.is-active .feature__text { border-left-color: var(--black); }
  .is-tabs .feature.is-active .feature__title, .is-tabs .feature.is-active .feature__n { opacity: 1; }
  .is-tabs .feature.is-active .feature__body { display: block; }
  .is-tabs .feature.is-active .feature__art { opacity: 1; transform: none; pointer-events: auto; }
}

/* Motion (solo con JS y sin reduced-motion) */
.has-motion .assess .title { visibility: hidden; }
.has-motion .assess .label, .has-motion .assess__intro { opacity: 0; }

/* ---------- S6 · Cómo empezar (negro) ---------- */
.steps { position: relative; background: var(--black); color: var(--white); padding: clamp(72px, 9vw, 130px) 0; scroll-margin-top: var(--nav-h); }
.steps .reg--tl { top: 24px; }
.steps .label b { color: var(--yellow); }
.steps .title--bar::after { background: var(--yellow); height: 14px; width: clamp(96px, 11vw, 150px); }
.steps__head { display: grid; }
.steps__body { display: flex; flex-direction: column; margin-top: clamp(36px, 6vw, 64px); }
.steps__side { display: contents; }
.steps__cta { order: 2; }
.steps__big { display: none; }
.steps__cta { margin-top: clamp(36px, 6vw, 56px); }
.steps__list { list-style: none; padding: 0; display: grid; gap: clamp(36px, 7vw, 56px); }
.step__n { font-weight: 900; font-size: clamp(3.4rem, 17vw, 5.5rem); line-height: 1; letter-spacing: -.02em; color: var(--yellow); margin-bottom: 14px; }
.step__card { position: relative; border-radius: 22px; padding: clamp(24px, 6vw, 36px); display: grid; gap: 14px; align-content: start; color: var(--black); }
.step__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--black); opacity: var(--dim, 0); pointer-events: none; }
.step--yellow .step__card { background: var(--yellow); }
.step--white .step__card { background: var(--white); }
.step--blue .step__card { background: var(--blue); color: var(--white); }
.step__icon { width: 56px; height: 56px; margin-bottom: 10px; }
.step__title { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; }
.step__body { max-width: 30em; line-height: 1.55; }

/* Escritorio: número gigante a la izquierda, mazo de tarjetas a la derecha, todo en una pantalla (pin) */
@media (min-width: 861px) and (min-height: 620px) {
  .steps { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 8px) 0 24px; }
  .steps .reg--tl { top: calc(var(--nav-h) + 4px); }
  .steps .label { margin-bottom: 12px; }
  .steps .title { max-width: 24em; font-size: clamp(2rem, 3.9vw, 3.8rem); }
  .steps__body { --peek: 22px; --card-h: clamp(250px, calc(100svh - 415px), 420px);
    display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); column-gap: clamp(40px, 6vw, 110px);
    align-items: stretch; margin-top: clamp(16px, 2.6svh, 32px); }
  .steps__side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
  .steps__big { display: grid; flex: 1; align-content: center; margin-bottom: 20px; overflow: hidden; font-weight: 900; font-size: min(calc(100svh - 490px), 21vw); line-height: 1; letter-spacing: -.03em; color: var(--yellow); }
  .steps__big span { grid-area: 1 / 1; }
  .steps__big span:not(:first-child) { visibility: hidden; }   /* rodillo: el motion los muestra */
  .steps__cta { order: 0; margin-top: 0; }
  .steps__list { position: relative; display: block; height: calc(var(--card-h) + 3 * var(--peek)); overflow: hidden; }
  .step { position: absolute; left: 0; right: 0; top: 0; height: var(--card-h); }
  .step:not(:first-child) { top: calc(var(--card-h) + (var(--i) - 1) * var(--peek)); }  /* asoman como pestañas bajo la tarjeta 1 */
  .step__n { display: none; }
  .step__card { height: 100%; padding: clamp(24px, 3vw, 40px); grid-template-rows: auto 1fr auto auto; }
  .step__icon { width: clamp(100px, 16svh, 140px); height: auto; margin-bottom: 0; }
  .step__title { grid-row: 3; font-size: clamp(1.7rem, 2.7vw, 2.6rem); line-height: 1.1; }
  .step__body { grid-row: 4; font-size: clamp(1rem, 1.25vw, 1.2rem); }
}

/* ---------- Botón sólido (negro con texto amarillo), igual al CTA del nav sobre claro ---------- */
.btn--ink { background: var(--black); color: var(--yellow); }
.btn--ink:hover { background: var(--white); color: var(--black); }

/* ---------- S7 · Seguimiento — BLANCO ---------- */
.follow { position: relative; background: var(--white); color: var(--black); padding: clamp(72px, 9vw, 130px) 0; scroll-margin-top: var(--nav-h); overflow: hidden; }
.follow .reg--tl { top: 24px; }
.follow .label b { color: var(--black); }
.follow .title--bar::after { background: var(--yellow); height: 14px; width: clamp(96px, 11vw, 150px); }
.follow__grid { display: grid; gap: clamp(36px, 6vw, 56px); }
.follow__intro { max-width: 34em; margin-top: clamp(24px, 3vw, 36px); font-size: var(--fs-lead); line-height: 1.55; }
.follow__points { border-top: 2px solid var(--black); }
.fpoint { padding: 20px 0; border-bottom: 1px solid var(--black); }
.fpoint h3 { font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; }
.fpoint p { margin-top: 8px; max-width: 34em; line-height: 1.55; }
.fpoint--hl { background: var(--yellow); padding: 24px clamp(18px, 2vw, 28px); margin: 0 calc(clamp(18px, 2vw, 28px) * -1); border-bottom: 0; }
.follow__points .fpoint--hl + .fpoint { border-top: 1px solid var(--black); }
.fpoint--hl + .fpoint { margin-top: 0; }

/* Media: mancha amarilla + hoja de papel rasgado + foto + PiP */
.follow__media { position: relative; --tear-a: polygon(0.0% 0.4%,7.1% 0.2%,14.3% 0.7%,21.4% 0.1%,28.6% 0.6%,35.7% 0.4%,42.9% 0.1%,50.0% 0.6%,57.1% 0.0%,64.3% 0.5%,71.4% 0.1%,78.6% 0.1%,85.7% 0.5%,92.9% 0.9%,100.0% 0.1%,99.7% 5.6%,99.2% 11.1%,98.7% 16.7%,99.2% 22.2%,99.5% 27.8%,98.7% 33.3%,99.9% 38.9%,98.9% 44.4%,99.6% 50.0%,99.8% 55.6%,99.8% 61.1%,99.6% 66.7%,98.9% 72.2%,99.8% 77.8%,99.2% 83.3%,99.2% 88.9%,99.5% 94.4%,99.3% 100.0%,92.9% 99.8%,85.7% 99.8%,78.6% 99.3%,71.4% 97.6%,64.3% 98.5%,57.1% 98.9%,50.0% 97.9%,42.9% 98.4%,35.7% 98.9%,28.6% 97.2%,21.4% 97.5%,14.3% 99.1%,7.1% 98.0%,0.0% 98.2%,1.2% 94.4%,1.0% 88.9%,0.4% 83.3%,1.3% 77.8%,0.2% 72.2%,0.6% 66.7%,1.0% 61.1%,0.2% 55.6%,0.6% 50.0%,0.1% 44.4%,0.9% 38.9%,1.0% 33.3%,0.8% 27.8%,1.2% 22.2%,0.4% 16.7%,0.9% 11.1%,0.8% 5.6%); --tear-b: polygon(0.0% 1.0%,7.1% 0.8%,14.3% 1.4%,21.4% 1.6%,28.6% 0.8%,35.7% 1.1%,42.9% 0.1%,50.0% 1.2%,57.1% 1.1%,64.3% 1.7%,71.4% 1.4%,78.6% 0.5%,85.7% 0.7%,92.9% 1.1%,100.0% 0.0%,99.1% 5.6%,99.7% 11.1%,99.8% 16.7%,99.9% 22.2%,98.4% 27.8%,99.7% 33.3%,99.5% 38.9%,99.2% 44.4%,98.2% 50.0%,99.8% 55.6%,99.1% 61.1%,98.9% 66.7%,98.2% 72.2%,98.3% 77.8%,98.2% 83.3%,99.4% 88.9%,99.2% 94.4%,99.3% 100.0%,92.9% 95.2%,85.7% 94.8%,78.6% 99.2%,71.4% 99.0%,64.3% 98.7%,57.1% 98.7%,50.0% 97.4%,42.9% 96.8%,35.7% 98.6%,28.6% 100.0%,21.4% 97.7%,14.3% 98.0%,7.1% 96.9%,0.0% 94.8%,1.4% 94.4%,1.1% 88.9%,1.3% 83.3%,1.4% 77.8%,0.1% 72.2%,1.8% 66.7%,1.6% 61.1%,1.8% 55.6%,1.6% 50.0%,0.8% 44.4%,0.8% 38.9%,0.2% 33.3%,1.3% 27.8%,0.1% 22.2%,0.1% 16.7%,0.4% 11.1%,0.3% 5.6%); margin: 12px 4% 40px 0; }
.follow__stain { position: absolute; z-index: 0; width: 135%; left: 4%; top: -18%; height: auto; overflow: visible; pointer-events: none; }
.follow__sheet { position: relative; z-index: 1; aspect-ratio: 4 / 5; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .22)); }
.follow__paper { position: absolute; inset: -9px; background: var(--white); clip-path: var(--tear-b); transform: rotate(-1.2deg); }
.follow__photo { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: var(--tear-a); background: var(--gray); }
.follow__photo { align-items: flex-start; }
.follow__img { position: absolute; inset: 0; display: flex; align-items: flex-start; background: var(--gray); transform-origin: 50% 50%; }
.follow__photo figcaption { padding: 18px 20px; font-size: 11px; }
.follow__pip { position: absolute; z-index: 2; left: -3%; bottom: -8%; width: 36%; aspect-ratio: 3 / 4; border: 6px solid var(--white); background: #1a1a1a; box-shadow: 8px 8px 0 var(--black); }
.follow__pip figcaption { color: rgba(255, 255, 255, .8); }

@media (min-width: 861px) {
  .follow { padding: calc(var(--nav-h) + 20px) 0 32px; }
  .follow .reg--tl { top: calc(var(--nav-h) - 12px); }
  .follow .label { margin-bottom: 12px; }
  .follow__pip { left: -8%; border-width: 5px; box-shadow: 6px 6px 0 var(--black); }
  .follow__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); column-gap: clamp(40px, 5vw, 80px); grid-template-areas: "head media" "points media" "cta media"; grid-template-rows: auto auto 1fr; align-items: start; row-gap: 0; }
  .follow__head { grid-area: head; container-type: inline-size; }
  .follow .title { max-width: none; font-size: min(6.4cqw, 5.4svh); line-height: 1.02; text-wrap: wrap; }
  .follow .title--bar::after { height: 12px; width: 96px; }
  .follow .nb { display: block; white-space: nowrap; }
  .follow__intro { margin-top: 16px; font-size: .95rem; line-height: 1.5; max-width: 40em; }
  .follow__points { grid-area: points; margin-top: 22px; border-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
  .fpoint { padding: 12px 0 0; border-top: 2px solid var(--black); border-bottom: 0; }
  .fpoint h3 { font-size: 1.05rem; }
  .fpoint p { margin-top: 6px; font-size: .88rem; line-height: 1.45; }
  .fpoint--hl { padding: 12px 18px 16px; margin: 0; border-top: 2px solid var(--black); }
  .follow__points .fpoint--hl + .fpoint { border-top: 2px solid var(--black); }
  .follow__cta { grid-area: cta; margin-top: 24px; }
  .follow__cta .btn { padding: .85em 1.5em; font-size: .95rem; }
  .follow__media { grid-area: media; align-self: stretch; display: flex; flex-direction: column; margin: 28px 8% 36px 8%; }
  .follow__sheet { aspect-ratio: auto; flex: 1; min-height: 380px; }
}

/* ---------- S8 · Alcance del puesto — AMARILLO (banda corta) ---------- */
.scope { position: relative; background: var(--yellow); color: var(--black); padding: clamp(64px, 8vw, 110px) 0 calc(clamp(90px, 13vw, 190px) + 28px); scroll-margin-top: var(--nav-h); overflow: hidden; }
.scope .reg--tl { top: 24px; }
.scope__grid { display: grid; gap: clamp(24px, 4vw, 40px); }
.scope .title { max-width: 11em; font-size: clamp(2rem, 3.9vw, 3.8rem); }
.scope__text { display: grid; gap: 16px; align-content: start; max-width: 34em; font-size: var(--fs-lead); line-height: 1.55; }
.scope__cta { margin-top: 12px; }
@media (min-width: 861px) {
  .scope { padding: clamp(48px, 5vw, 72px) 0 calc(clamp(70px, 8vw, 120px) + 28px); }
  .scope .reg--tl { top: 16px; }
  .scope__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .scope .title { max-width: none; font-size: min(3vw, 3.2rem); line-height: 1.04; text-wrap: balance; }
  .scope__text { font-size: 1rem; line-height: 1.5; gap: 12px; }
  .scope__cta { margin-top: 8px; }
  .scope .waves { height: clamp(70px, 8vw, 120px); }
}
/* Barras verticales finas tipo onda (altura en --h; el motion las moverá con transform) */
.waves { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 13vw, 190px); display: flex; align-items: flex-end; justify-content: space-between; padding: 0 var(--gutter); pointer-events: none; }
.waves i { display: block; flex: none; width: 2px; height: calc(var(--h) * 100%); background: var(--black); transform-origin: bottom; }
@media (max-width: 860px) {
  .waves i:nth-child(even) { display: none; }
}

/* Motion S7 / S8 (solo con JS y sin reduced-motion; ver initFollow / initScope en js/motion.js) */
.has-motion .follow .title, .has-motion .scope .title { visibility: hidden; }
.has-motion .follow .label, .has-motion .follow__intro, .has-motion .fpoint, .has-motion .follow__cta,
.has-motion .follow__sheet, .has-motion .follow__stain, .has-motion .follow__pip,
.has-motion .scope__text > * { opacity: 0; }
.follow .title .line, .scope .title .line { display: block; overflow: hidden; padding-bottom: .08em; }

/* ---------- S11 · Precios — NEGRO ---------- */
.pricing { position: relative; background: var(--black); color: var(--white); padding: clamp(72px, 9vw, 130px) 0; scroll-margin-top: var(--nav-h); overflow: hidden; }
.pricing .reg--tl { top: 24px; }
.pricing .label b { color: var(--yellow); }
.pricing .title--bar::after { background: var(--yellow); }
.pricing__intro { max-width: 40em; margin-top: clamp(28px, 3vw, 44px); font-size: var(--fs-lead); line-height: 1.55; color: rgba(255, 255, 255, .9); }
.plans { display: grid; gap: clamp(16px, 1.8vw, 28px); margin-top: clamp(40px, 5vw, 64px); }
.plan article { height: 100%; display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 36px); color: var(--black); }
.plan--yellow article { background: var(--yellow); }
.plan--white article { background: var(--white); }
.plan__name { font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .35em; margin-top: clamp(28px, 3.4vw, 52px); }
.price__from { flex-basis: 100%; font-weight: 300; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; }
.price__amt { font-family: var(--font-display); font-weight: 900; letter-spacing: -.02em; line-height: 1; font-size: clamp(2.5rem, 3.8vw, 3.9rem); white-space: nowrap; }
.price__per { white-space: nowrap; font-weight: 700; font-size: clamp(1rem, 1.3vw, 1.25rem); }
.plan__hours { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--black); font-weight: 700; font-size: .95rem; }
.plan__desc { margin: 14px 0 28px; line-height: 1.55; }
.plan .btn { margin-top: auto; }
.pricing__more { display: grid; gap: clamp(24px, 3vw, 40px); margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--line); }
.pricing__more h3 { font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; }
.pricing__more p { margin-top: 10px; max-width: 36em; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.pricing__part { padding: clamp(20px, 2.2vw, 32px); border: 1px solid var(--yellow); align-self: start; }
.pricing__legal { margin-top: clamp(32px, 4vw, 56px); font-weight: 300; font-size: .85rem; line-height: 1.5; color: rgba(255, 255, 255, .7); }
@media (min-width: 861px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan__name { min-height: 2.4em; }   /* precios alineados aunque un nombre ocupe 2 líneas */
  .pricing__more { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); }
}

/* ---------- S9 · Preguntas frecuentes — BLANCO ---------- */
.faq { position: relative; background: var(--white); color: var(--black); padding: clamp(72px, 9vw, 130px) 0; scroll-margin-top: var(--nav-h); }
.faq .reg--tl { top: 24px; }
.faq .label b { color: var(--black); }
.faq .title { font-size: clamp(2rem, 3.5vw, 3.5rem); }
.faq .title--bar::after { background: var(--yellow); height: 14px; width: clamp(96px, 11vw, 150px); }
.faq__grid { display: grid; gap: clamp(32px, 5vw, 56px); }
.faq__search { display: flex; align-items: center; gap: 12px; margin-top: clamp(28px, 3vw, 40px); max-width: 32em; padding: 0 18px; border: 2px solid var(--black); border-radius: 999px; }
.faq__search:focus-within { outline: 2px solid var(--yellow); outline-offset: 3px; box-shadow: 0 0 0 2px var(--black); }
.faq__search input { flex: 1; min-width: 0; padding: 14px 0; font: inherit; font-size: 1rem; letter-spacing: -.01em; color: var(--black); background: none; border: 0; outline: 0; }
.faq__search input::placeholder { color: rgba(0, 0, 0, .55); }
.faq__status { margin-top: 20px; font-weight: 700; }
.faq__group + .faq__group { margin-top: clamp(36px, 4vw, 56px); }
.faq__gtitle { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0; font-size: var(--fs-sub); line-height: 1.05; padding-bottom: 14px; border-bottom: 2px solid var(--black); }
.qa { position: relative; border-bottom: 1px solid var(--black); }
.qa h4 { margin: 0; font: inherit; }
.qa__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 22px 0; text-align: left; font-weight: 700; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em; }
.qa__q:focus-visible { outline: 3px solid var(--black); outline-offset: 2px; }
.qa__icon { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: var(--black); }
.qa__icon::after { transform: rotate(90deg); }
.qa__a { max-width: 46em; line-height: 1.6; }
.qa__in > * { margin-left: 24px; margin-right: 60px; }   /* sin padding en .qa__in: así puede colapsar a 0 */
.qa__in::after { content: ""; display: block; height: 26px; }
.qa__a p + p { margin-top: 12px; }
.qa::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.qa.is-open::before { transform: scaleX(1); }
.qa__q span { padding-right: 24px; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.qa.is-open .qa__q span { transform: translateX(24px); }
.qa__icon { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.qa.is-open .qa__icon { transform: rotate(45deg); }
/* Acordeón: con JS (.is-ready) la altura se anima con grid-template-rows; sin JS las respuestas se ven abiertas */
.faq:not(.is-ready) .qa__icon { display: none; }
.faq.is-ready .qa__a { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1), visibility 0s .45s; }
.faq.is-ready .qa.is-open .qa__a { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.faq.is-ready .qa__in { overflow: hidden; min-height: 0; }
/* Buscador: las preguntas que no coinciden se desvanecen antes de ocultarse */
.qa, .faq__group, .faq__status { transition: opacity .22s ease; }
.qa.is-fading, .faq__group.is-fading, .faq__status.is-fading { opacity: 0; }
.qa[hidden], .faq__group[hidden] { display: none; }
.qa__prices { margin: 14px 0; border-top: 2px solid var(--black); }
.qa__prices li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding: 12px 0; border-bottom: 1px solid var(--black); }
.qa__role { font-weight: 700; }
.price--sm { margin: 0; justify-content: flex-end; align-items: baseline; }
.price--sm .price__from { flex-basis: auto; font-size: .7rem; }
.price--sm .price__amt { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.price--sm .price__per { font-size: .95rem; }
@media (min-width: 981px) {
  .faq__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .faq__head { position: sticky; top: calc(var(--nav-h) + 32px); }
}

/* Escritorio compacto: S11 y S9 caben mejor en una pantalla */
@media (min-width: 861px) {
  .pricing { padding: clamp(56px, 5.5vw, 80px) 0; }
  .pricing .title { font-size: clamp(2rem, 3.4vw, 3.4rem); }
  .pricing__intro { margin-top: 20px; font-size: 1rem; }
  .plans { margin-top: 32px; }
  .plan article { padding: 22px 26px; }
  .plan__name { min-height: 0; font-size: 1.15rem; }
  .price { margin-top: 20px; }
  .price__amt { font-size: clamp(2.2rem, 3.2vw, 3.3rem); }
  .plan__hours { margin-top: 12px; padding-top: 10px; font-size: .9rem; }
  .plan__desc { margin: 10px 0 20px; font-size: .95rem; line-height: 1.5; }
  .plan .btn--lg { padding: .8em 1.4em; font-size: .95rem; }
  .pricing__more { margin-top: 36px; padding-top: 24px; gap: 24px 48px; }
  .pricing__more p { font-size: .95rem; line-height: 1.5; }
  .pricing__part { padding: 18px 24px; }
  .pricing__legal { margin-top: 24px; }
}
@media (min-width: 861px) and (max-width: 1180px) { .plan__name { min-height: 2.4em; } }
@media (min-width: 981px) {
  .faq { padding: clamp(56px, 5.5vw, 80px) 0; }
  .faq__gtitle { font-size: clamp(1.3rem, 2vw, 1.8rem); padding-bottom: 10px; }
  .faq__group + .faq__group { margin-top: 32px; }
  .qa__q { padding: 14px 0; font-size: 1rem; }
  .qa__icon { width: 32px; height: 32px; }
  .qa__icon::before, .qa__icon::after { width: 13px; margin: -1px 0 0 -6.5px; }
  .qa__a { font-size: .95rem; line-height: 1.55; }
  .qa__in::after { height: 18px; }
  .price--sm .price__amt { font-size: 1.6rem; }
}
.qa .price--sm { margin-top: 0; }

/* ---------- Motion S11 / S9 (solo con JS y sin reduced-motion; ver initPricing / initFaq en js/motion.js) ---------- */
.has-motion .pricing .title, .has-motion .faq .title { visibility: hidden; }
.has-motion .pricing .label, .has-motion .pricing__intro, .has-motion .plan, .has-motion .pricing__more > *, .has-motion .pricing__legal,
.has-motion .faq .label, .has-motion .faq__search, .has-motion .faq__group { opacity: 0; }
.pricing .title .line, .faq .title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.price__amt { font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .plan article { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
  .plan:hover article { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(255, 255, 255, .14); }   /* igual en las tres */
}

/* ---------- S10 · Consulta y contacto — AMARILLO ---------- */
.contact { position: relative; background: var(--yellow); color: var(--black); padding: clamp(72px, 9vw, 130px) 0; scroll-margin-top: var(--nav-h); }
.contact__anchor { position: absolute; top: 0; left: 0; scroll-margin-top: var(--nav-h); }
.contact .reg--tl { top: 24px; }
.contact .label b { color: var(--black); }
.contact .title { font-size: clamp(2rem, 3.8vw, 3.8rem); max-width: 11em; }
.contact .title--bar::after { background: var(--black); }
.contact__grid { display: grid; gap: clamp(40px, 6vw, 64px); }
.contact__text { max-width: 34em; margin-top: clamp(24px, 3vw, 36px); font-size: var(--fs-lead); line-height: 1.55; }
.contact__cta { margin-top: 24px; }
.contact__details { display: grid; gap: 14px; margin: clamp(32px, 4vw, 52px) 0 0; padding-top: 24px; border-top: 2px solid var(--black); max-width: 34em; }
.contact__details div { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; align-items: baseline; }
.contact__details dt { font-weight: 300; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
.contact__details dd { margin: 0; font-weight: 700; }
/* Placeholders pendientes del cliente: visibles como tales, nunca como datos reales */
.todo { font-weight: 700; border-bottom: 2px dashed currentColor; opacity: .75; }
@media (min-width: 981px) {
  .contact { padding: clamp(56px, 5.5vw, 80px) 0; }
  .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .contact__info { position: sticky; top: calc(var(--nav-h) + 32px); }
}

/* Formulario por pasos: tarjeta negra, barra amarilla */
.inquiry__card { background: var(--black); color: var(--white); padding: clamp(24px, 3vw, 44px); }
.inquiry__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0; font-size: var(--fs-sub); line-height: 1.05; }
.inquiry__step-label { margin-top: 20px; font-weight: 300; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
.inquiry__step-label #inq-count { color: var(--yellow); font-weight: 700; }
.inquiry__bar { position: relative; height: 6px; margin-top: 12px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.inquiry__bar i { position: absolute; inset: 0; background: var(--yellow); transform: scaleX(var(--p, .3333)); transform-origin: left; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.inquiry__form { margin-top: clamp(24px, 3vw, 36px); }
.istep { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 20px; }
.istep[hidden] { display: none; }
.istep__hint { color: rgba(255, 255, 255, .85); line-height: 1.55; }
.prefill-note { padding: 12px 14px; border-left: 4px solid var(--yellow); background: rgba(255, 205, 0, .12); font-size: .95rem; line-height: 1.45; }
.field label { display: block; margin-bottom: 8px; font-weight: 700; font-size: .95rem; }
.field .opt { font-weight: 300; opacity: .75; }
.field input, .field textarea {
  display: block; width: 100%; min-height: 56px; padding: 14px 16px;
  font: inherit; font-size: 1rem; letter-spacing: -.01em; color: var(--white);
  background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .45); border-radius: 0;
  transition: border-color .2s, background-color .2s;
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.field input:hover, .field textarea:hover { border-color: var(--white); }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-color: var(--yellow); }
.field.is-valid input, .field.is-valid textarea { border-color: var(--yellow); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #FF8A7A; background: rgba(255, 138, 122, .08); }
.field__msg { display: none; margin-top: 8px; font-weight: 700; font-size: .9rem; line-height: 1.4; color: #FFB4A8; }
.field.is-invalid .field__msg { display: flex; gap: 8px; align-items: flex-start; }
.field.is-invalid .field__msg::before { content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: #FFB4A8; color: var(--black); font-size: .8rem; font-weight: 900; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.inquiry__error { margin-top: 20px; padding: 12px 14px; border-left: 4px solid #FFB4A8; background: rgba(255, 138, 122, .1); font-weight: 700; line-height: 1.45; }
.inquiry__nav { display: flex; gap: 12px; margin-top: clamp(24px, 3vw, 32px); }
.inquiry__nav .btn { flex: 1; min-height: 56px; }
.inquiry__nav .btn[hidden] { display: none; }
.inquiry__nav .btn:disabled { opacity: .6; cursor: progress; }
@media (min-width: 640px) { .inquiry__nav .btn { flex: none; min-width: 9em; } .inquiry__nav { justify-content: flex-end; } }
.inquiry__done { display: grid; gap: 20px; justify-items: start; padding: clamp(8px, 2vw, 24px) 0; font-size: var(--fs-lead); line-height: 1.55; }
.inquiry__done[hidden] { display: none; }
.inquiry__done:focus { outline: none; }
.inquiry__check { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--yellow); color: var(--black); }
.inquiry__card.is-done .inquiry__head, .inquiry__card.is-done .inquiry__form { display: none; }

/* ---------- Footer — NEGRO ---------- */
.footer { position: relative; background: var(--black); color: var(--white); padding: clamp(56px, 7vw, 96px) 0 28px; overflow: hidden; }
.footer .reg--br { bottom: 16px; }
.footer__giant { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0; color: var(--yellow); line-height: .9; white-space: nowrap; overflow: hidden; padding-bottom: .06em; }
.footer__fit { display: inline-block; font-size: 6vw; }   /* main.js lo ajusta al ancho exacto (fitFooter) */
.footer__fit > span { display: inline; }
@media (max-width: 700px) { .footer__fit > span { display: block; } .footer__fit { white-space: normal; } }
.footer__grid { display: grid; gap: 36px; margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.footer__logo { display: block; width: 220px; }   /* mínimo del logo completo: 220px */
.footer__h { margin: 0 0 14px; font-weight: 300; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.footer__col ul { display: grid; gap: 4px; }
.footer__col a, .footer__col .todo { display: inline-block; padding: 8px 0; font-weight: 700; }
.footer__col a:hover { color: var(--yellow); }
.footer__col li { padding: 8px 0; }
.footer__col a, .footer__col .todo { padding: 0; }
.footer__col .todo { display: inline; }
.footer .todo { opacity: .7; font-weight: 700; }
a[data-pending] { cursor: not-allowed; opacity: .6; }
a[data-pending]::after { content: "pending"; margin-left: 8px; padding: 2px 6px; border: 1px dashed currentColor; font-weight: 300; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; vertical-align: middle; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: clamp(32px, 4vw, 56px); padding-top: 20px; border-top: 1px solid var(--line); font-weight: 300; font-size: .85rem; color: rgba(255, 255, 255, .7); }
.footer__join { padding: 8px 0; font-weight: 300; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 700px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__logo { grid-column: 1 / -1; } }
@media (min-width: 981px) {
  .footer__grid { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); align-items: start; }
  .footer__logo { grid-column: auto; }
}

/* ---------- Motion S10 / Footer (solo con JS y sin reduced-motion; ver initContact / initFooter en js/motion.js) ---------- */
.contact .wrap { z-index: 1; }
.contact .title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.has-motion .contact .title { visibility: hidden; }
.fan { display: none; }
@media (min-width: 981px) {
  .contact { overflow: clip; padding-bottom: clamp(150px, 13vw, 200px); }   /* deja ver el abanico bajo la tarjeta */
  .fan { display: block; position: absolute; right: 0; bottom: 0; z-index: 0; width: min(52vw, 760px); height: min(30vw, 400px); perspective: 1200px; perspective-origin: 50% 50%; pointer-events: none; }
  .fan__c { position: absolute; bottom: calc(var(--i) * 30px - 90px); left: calc(var(--i) * 17%); width: 32%; aspect-ratio: 3 / 4; transform-origin: 50% 100%; transform: rotateY(-24deg) rotateZ(-7deg); }
  .fan__in, .fan__in .ph { width: 100%; height: 100%; }
  .fan__in .ph { border: 2px solid var(--black); }
  .fan__c:nth-child(even) .ph { background: var(--white); }
}
/* Pasos, errores y éxito: solo transform/opacity */
@media (prefers-reduced-motion: no-preference) {
  .field.is-invalid .field__msg { animation: msgIn .25s cubic-bezier(.2, .7, .2, 1); }
  .inquiry__done:not([hidden]) .inquiry__check { animation: popIn .55s cubic-bezier(.2, .9, .3, 1.2) both; }
  .inquiry__done:not([hidden]) p { animation: riseIn .6s .18s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes msgIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.footer__fit > span { display: inline-block; }
@media (max-width: 700px) { .footer__fit > span { display: block; } }

/* ---------- Drawer del formulario (mismo componente que S10) ---------- */
.drawer { position: fixed; inset: 0; z-index: 70; }
.drawer[hidden] { display: none; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); opacity: 0; transition: opacity .35s; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(580px, 100%);
  background: var(--black); color: var(--white); overflow-y: auto; overscroll-behavior: contain;
  border-left: 4px solid var(--yellow);
  transform: translateX(100%); transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__close {
  position: sticky; top: 12px; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px;
  margin: 12px 12px -36px auto; border-radius: 50%; background: var(--yellow); color: var(--black);
  transition: background-color .2s;
}
.drawer__close:hover { background: var(--white); }
.drawer__close:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.drawer__slot .inquiry__card { padding: clamp(24px, 4vw, 44px); padding-top: 56px; min-height: 100%; }
.drawer__slot .inquiry__title { padding-right: 44px; }
@media (max-width: 640px) {
  .drawer__panel { width: 100%; border-left: 0; }
  .drawer__scrim { display: none; }
  .drawer__slot .inquiry__card { padding: 24px 20px 32px; padding-top: 56px; }
}

/* ---------- S2 y S3: caben en una pantalla en escritorio (medidas ligadas a la altura, no solo al ancho) ---------- */
@media (min-width: 861px) and (min-height: 600px) {
  .problem { padding: clamp(40px, 5.5vh, 72px) 0; }
  .problem .reg--tl, .services .reg--tl { top: 16px; }
  .problem .label, .services .label { margin-bottom: clamp(10px, 1.8vh, 20px); }
  .problem .title, .services .title { font-size: min(var(--fs-title), 6.4vh); }
  .problem__intro { margin-top: clamp(14px, 2.2vh, 30px); font-size: min(var(--fs-lead), 2.1vh); line-height: 1.5; }
  .tasks { margin-top: clamp(18px, 3.6vh, 48px); }
  .task { padding: clamp(10px, 1.9vh, 24px) 0; }
  .task__arrow { width: clamp(38px, 5vh, 52px); height: clamp(38px, 5vh, 52px); }
  .task__from { font-size: min(clamp(1.15rem, 1.8vw, 1.6rem), 3.1vh); }
  .task__help { font-size: min(clamp(1.05rem, 1.5vw, 1.35rem), 2.7vh); }

  .services { padding: clamp(32px, 4.5vh, 60px) 0; }
  .services .title { font-size: min(var(--fs-title), 5.8vh); }
  .services__intro { margin-top: clamp(14px, 2.2vh, 30px); font-size: min(var(--fs-lead), 2.1vh); line-height: 1.5; }
  .rail { margin-top: clamp(18px, 3.2vh, 40px); }
  .card { width: min(clamp(300px, 30vw, 440px), 40vh); }
  .card__ph { aspect-ratio: 16 / 9; }
  .card__tag { font-size: min(clamp(1rem, 1.5vw, 1.35rem), 2.6vh); }
  .card__foot { gap: 12px; padding: 14px 18px 16px; }
  .card__desc { font-size: min(.98rem, 2vh); line-height: 1.45; }
  .services > .wrap:not(.services__after) { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: end; }
  .services > .wrap:not(.services__after) .label { grid-column: 1 / -1; }
  .services__intro { margin: 0 0 clamp(8px, 1.5vh, 16px); }
  .services__after { margin-top: clamp(18px, 3vh, 40px); }
  .services__after p { font-size: min(var(--fs-lead), 2.1vh); line-height: 1.5; }
}
@media (min-width: 861px) and (min-height: 600px) and (max-height: 780px) {
  .card { width: min(clamp(300px, 30vw, 440px), 36vh); }
  .card__desc { font-size: .88rem; line-height: 1.4; }
  .services .title--bar::after, .problem .title--bar::after { height: 7px; margin-top: .3em; }
  .services__after .btn { padding: .65em 1.3em; }
}

/* Pantallas con altura holgada (>=860px): más aire; las secciones llenan la pantalla bajo el nav, con el contenido centrado */
@media (min-width: 861px) and (min-height: 860px) {
  .problem, .services { min-height: calc(100vh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; }
  .problem { padding: clamp(40px, 6vh, 84px) 0; }
  .problem .title { font-size: min(var(--fs-title), 6.8vh); }
  .problem__intro { margin-top: clamp(14px, 2.6vh, 32px); font-size: min(var(--fs-lead), 2.3vh); }
  .tasks { margin-top: clamp(18px, 3.9vh, 52px); }
  .task { padding: clamp(10px, 2.2vh, 28px) 0; }
  .task__arrow { width: clamp(38px, 5.3vh, 56px); height: clamp(38px, 5.3vh, 56px); }
  .task__from { font-size: min(clamp(1.15rem, 1.8vw, 1.6rem), 3.3vh); }
  .task__help { font-size: min(clamp(1.05rem, 1.5vw, 1.35rem), 2.85vh); }

  .services { padding: clamp(32px, 5vh, 72px) 0; }
  .services .title { font-size: min(var(--fs-title), 6.2vh); }
  .services__intro { font-size: min(var(--fs-lead), 2.3vh); }
  .rail { margin-top: clamp(18px, 3.4vh, 44px); }
  .card { width: min(clamp(300px, 30vw, 440px), 40vh); }
  .card__ph { aspect-ratio: 16 / 9; }
  .card__tag { font-size: min(clamp(1rem, 1.5vw, 1.35rem), 2.9vh); }
  .card__foot { gap: 14px; padding: 16px 20px 18px; }
  .card__desc { font-size: min(.98rem, 2.2vh); line-height: 1.5; }
  .services__after { margin-top: clamp(18px, 3vh, 40px); }
  .services__after p { font-size: min(var(--fs-lead), 2.3vh); }
}
@media (min-width: 861px) and (min-height: 781px) and (max-height: 859px) { .card { width: min(clamp(300px, 30vw, 440px), 38vh); } }
/* El carrusel de S3 alinea su primera tarjeta con el título en pantallas más anchas que el contenedor (1600px) */
.rail { --rail-x: max(var(--gutter), calc((100% - 1600px) / 2 + var(--gutter))); padding-left: var(--rail-x); padding-right: var(--rail-x); scroll-padding: 0 var(--rail-x); }
.problem > .wrap, .services > .wrap, .services > .rail { width: 100%; }   /* con la sección en flex, el contenedor no se encoge a su contenido */

/* ---------- Cambio de idioma: fundido corto del texto (solo opacity; ver js/i18n.js) ---------- */
html.i18n-fading [data-i18n], html.i18n-fading [data-i18n-attr] { transition: opacity .12s ease; }
html.i18n-out [data-i18n] { opacity: 0 !important; }
.lang__btn { padding: 4px 2px; }

/* Español: los textos del menú son más largos; el menú de hamburguesa entra antes para que el nav no se parta */
.nav__links a { white-space: nowrap; }
@media (max-width: 1199px) {
  html[lang="es"] .nav__links, html[lang="es"] .nav__cta, html[lang="es"] .nav__join, html[lang="es"] .nav__biz { display: none; }
  html[lang="es"] .burger { display: block; }
}

/* Español en S4: el titular gigante es más largo; menos cuerpo y bloques más anchos (los globos usan em, así que escalan con él) */
html[lang="es"] .giant-wrap, html[lang="es"] .giant { font-size: calc(var(--fs-giant) * .8); }
html[lang="es"] .giant__a { max-width: 10em; }
html[lang="es"] .giant__b { max-width: 14.5em; }
@media (max-width: 600px) { html[lang="es"] .giant-wrap, html[lang="es"] .giant { font-size: min(1.5rem, 6.2vw); } }

/* ---------- Botón discreto "Join our team" (contorno fino; más chico que el CTA principal) ---------- */
.nav__join { padding: .5em 1em; font-size: .82rem; font-weight: 700; border: 1px solid currentColor; background: transparent; color: inherit; transition: background-color .2s, color .2s, border-color .2s; }
@media (hover: hover) { .nav__join:hover { background: currentColor; } .nav__join:hover > * { color: inherit; } }
.nav__actions { gap: 16px; }
.menu__join { border: 1px solid var(--white); color: var(--white); background: transparent; }
@media (hover: hover) { .menu__join:hover { background: var(--white); color: var(--black); } }
/* Nav compacto (981–1365px): con el botón "Join our team" el menú necesita menos aire */
@media (min-width: 981px) and (max-width: 1365px) {
  .nav__links { font-size: .84rem; gap: clamp(12px, 1.5vw, 20px); }
  .nav__inner { gap: 16px; }
  .nav__actions { gap: 12px; }
  .nav__cta { padding: .62em 1em; font-size: .84rem; }
  .nav__join { padding: .45em .85em; font-size: .78rem; }
  .nav__logo { width: 220px; }
}
@media (max-width: 1010px) {   /* EN: con el botón extra, 981–1010px ya no cabe → hamburguesa (antes ≤980) */
  .nav__links, .nav__cta, .nav__join, .nav__biz { display: none; }
  .burger { display: block; }
}

/* =====================================================================================================
   /join — página de candidatos (mismo sistema visual que el home)
   ===================================================================================================== */
.nav__biz { font-size: .82rem; font-weight: 300; text-decoration: underline; text-underline-offset: 4px; opacity: .85; white-space: nowrap; }
.nav__biz:hover { opacity: 1; }
.menu__links a[href="../"] { font-size: clamp(1.1rem, 5vw, 1.5rem); font-family: var(--font-body); font-weight: 300; text-transform: none; opacity: .85; }

/* J1 · Hero (negro) */
.jhero { position: relative; background: var(--black); color: var(--white); overflow: hidden; }
.jhero__stage { display: grid; gap: 40px; align-items: center; padding-top: calc(var(--nav-h) + 40px); padding-bottom: 56px; }
.jhero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.jhero__title { font-family: var(--font-display); font-weight: 900; letter-spacing: 0; font-size: var(--fs-hero); line-height: 1.04; max-width: 15em; }
.jhero__body { max-width: 34em; font-size: 1.05rem; line-height: 1.55; color: rgba(255, 255, 255, .9); }
.jhero .hero__ctas { justify-content: flex-start; }
.jhero__media { position: relative; width: min(100%, 360px); aspect-ratio: 4 / 5; justify-self: center; margin-top: 8px; }
.jhero__circle { position: absolute; width: 125%; aspect-ratio: 1; left: 50%; top: 56%; transform: translate(-50%, -50%); border-radius: 50%; background: var(--yellow); }
.jhero__photo { position: absolute; inset: 0; z-index: 1; width: 100%; }
@media (min-width: 861px) {
  .jhero__stage { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 80px); min-height: max(600px, calc(100svh - 64px - 70px)); padding-top: calc(var(--nav-h) + 24px); padding-bottom: 40px; }
  .jhero__media { width: min(100%, clamp(280px, 30vw, 440px)); justify-self: end; margin: 0 4% 0 0; }
}
.has-motion .jhero__title .line > span { transform: translateY(110%); }
.has-motion .jhero .eyebrow, .has-motion .jhero__body, .has-motion .jhero .hero__ctas, .has-motion .jhero__photo, .has-motion .jhero .band li { opacity: 0; }

/* Secciones /join: padding, etiquetas y barras bajo títulos */
.jroles, .jsteps, .jlook, .japply, .jcta { position: relative; padding: clamp(64px, 8vw, 120px) 0; scroll-margin-top: var(--nav-h); }
.jroles, .japply { background: var(--white); color: var(--black); }
.jsteps { background: var(--black); color: var(--white); }
.jlook, .jcta { background: var(--yellow); color: var(--black); }
.jroles .reg--tl, .jsteps .reg--tl, .jlook .reg--tl, .japply .reg--tl, .jcta .reg--tl { top: 24px; }
.jroles .label b, .jlook .label b, .japply .label b { color: var(--black); }
.jsteps .label b, .faq--black .label b { color: var(--yellow); }
.jroles .title--bar::after, .japply .title--bar::after { background: var(--yellow); height: 14px; width: clamp(96px, 11vw, 150px); }
.jsteps .title--bar::after, .faq--black .title--bar::after { background: var(--yellow); height: 14px; width: clamp(96px, 11vw, 150px); }
.jlook .title--bar::after { background: var(--black); height: 14px; width: clamp(96px, 11vw, 150px); }
.jroles .title, .jsteps .title, .jlook .title, .japply .title, .jcta .title { font-size: clamp(2rem, 3.8vw, 3.8rem); }
.jroles .title .line, .jsteps .title .line, .jlook .title .line, .japply .title .line, .jcta .title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.has-motion .jroles .title, .has-motion .jsteps .title, .has-motion .jlook .title, .has-motion .japply .title, .has-motion .jcta .title { visibility: hidden; }
.jnote { margin-top: clamp(28px, 3vw, 44px); max-width: 42em; font-weight: 300; font-size: .98rem; line-height: 1.5; }
.jnote--light { color: rgba(255, 255, 255, .8); }
.jlink { text-decoration: underline; text-underline-offset: 3px; }
.inquiry__card .jlink, .faq--black .jlink { color: var(--yellow); }

/* J2 · tarjetas (blanco) */
.jroles__intro { max-width: 40em; margin-top: clamp(24px, 3vw, 36px); font-size: var(--fs-lead); line-height: 1.55; }
.jcards { display: grid; gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(32px, 4vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 640px) { .jcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 981px) { .jcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jcard { border: 2px solid var(--black); padding: clamp(20px, 2vw, 28px); display: grid; gap: 14px; align-content: start; background: var(--white); }
.jcard__t { justify-self: start; background: var(--yellow); font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0; font-size: clamp(.95rem, 1.25vw, 1.15rem); line-height: 1.12; padding: .6em .9em .5em; }
.jcard__d { line-height: 1.55; }
@media (hover: hover) { .jcard { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; } .jcard:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--black); } }

/* J3 · pasos (negro): mismas tarjetas de color de S6, sin pin */
.jsteps__list { list-style: none; padding: 0; display: grid; gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(32px, 4vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 700px) { .jsteps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 981px) { .jsteps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jsteps .step__n { display: block; font-size: clamp(2.6rem, 4.4vw, 4rem); margin-bottom: 10px; }
.jsteps .jstep { display: flex; flex-direction: column; }
.jsteps .step__card { flex: 1; min-height: 170px; }
.jsteps .step__title { font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
.jsteps .step__body { font-size: .98rem; }

/* J4 · dos columnas (amarillo, texto negro) */
.jlook__cols { display: grid; gap: clamp(32px, 4vw, 48px); margin-top: clamp(32px, 4vw, 56px); }
@media (min-width: 861px) { .jlook__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 6vw, 96px); } }
.jcol__h { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0; font-size: var(--fs-sub); line-height: 1.05; padding-bottom: 14px; border-bottom: 2px solid var(--black); }
.jcol__list { list-style: none; padding: 0; }
.jcol__list li { position: relative; padding: 16px 0 16px 34px; border-bottom: 1px solid var(--black); font-size: var(--fs-lead); line-height: 1.45; }
.jcol__list li::before { content: ""; position: absolute; left: 0; top: 1.35em; width: 14px; height: 14px; background: var(--black); transform: rotate(45deg) scale(.7); }

/* J5 · formulario (blanco; tarjeta negra como S10) */
.japply__grid { display: grid; gap: clamp(32px, 5vw, 56px); }
.japply__intro { max-width: 30em; margin-top: clamp(24px, 3vw, 36px); font-size: var(--fs-lead); line-height: 1.55; }
@media (min-width: 981px) {
  .japply__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .japply__info { position: sticky; top: calc(var(--nav-h) + 32px); }
}
.japply .inquiry__card { box-shadow: 10px 10px 0 var(--yellow); }
.field__label { display: block; margin-bottom: 8px; font-weight: 700; font-size: .95rem; }
.field__hint { margin: -2px 0 10px; font-weight: 300; font-size: .85rem; line-height: 1.4; opacity: .85; }
.field--group { border: 0; padding: 0; min-width: 0; }
.field select {
  display: block; width: 100%; min-height: 56px; padding: 14px 44px 14px 16px; font: inherit; font-size: 1rem; letter-spacing: -.01em; color: var(--white);
  background: rgba(255, 255, 255, .06) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23FFCD00' stroke-width='2'/></svg>") no-repeat right 16px center;
  border: 2px solid rgba(255, 255, 255, .45); border-radius: 0; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.field select option { color: #000; background: #fff; }
.field select:hover { border-color: var(--white); }
.field select:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-color: var(--yellow); }
.choices { display: grid; gap: 10px; }
.choice { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 10px 14px; border: 2px solid rgba(255, 255, 255, .45); cursor: pointer; font-weight: 400; line-height: 1.35; transition: border-color .2s, background-color .2s; }
.field .choice { margin-bottom: 0; font-weight: 400; font-size: 1rem; }
.choice input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--yellow); cursor: pointer; }
.choice:hover { border-color: var(--white); }
.choice:has(input:checked) { border-color: var(--yellow); background: rgba(255, 205, 0, .12); }
.choice:has(input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 2px; }
.field.is-invalid .choice { border-color: #FF8A7A; }
.choice--privacy { align-items: flex-start; border-color: transparent; padding: 6px 0; min-height: 0; line-height: 1.45; font-size: .95rem; }
.choice--privacy:hover, .choice--privacy:has(input:checked) { border-color: transparent; background: none; }
.field--check.is-invalid .choice--privacy { border-color: transparent; }
.field--check.is-invalid .choice--privacy input { outline: 2px solid #FF8A7A; outline-offset: 2px; }
.filepick { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.filepick input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.field .filepick__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; margin: 0; padding: 0 1.4em; border-radius: 999px; background: var(--yellow); color: var(--black); font-weight: 700; font-size: .95rem; cursor: pointer; transition: background-color .2s; }
.field .filepick__btn:hover { background: var(--white); }
.filepick input:focus-visible + .filepick__btn { outline: 3px solid var(--white); outline-offset: 3px; }
.filepick__name { font-size: .92rem; line-height: 1.35; word-break: break-all; }
.filepick__remove { min-height: 44px; padding: 0 .8em; font-weight: 700; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; color: var(--yellow); }
.filepick__remove[hidden] { display: none; }
.field.is-invalid .filepick__btn { box-shadow: 0 0 0 2px #FF8A7A; }
.field__count { margin-top: 6px; text-align: right; font-weight: 300; font-size: .8rem; opacity: .75; }
.inquiry__nav .btn:disabled { opacity: .6; }

/* J6 · FAQ en negro (variante del S9 blanco) */
.faq--black { background: var(--black); color: var(--white); }
.faq--black .qa { border-bottom-color: rgba(255, 255, 255, .35); }
.faq--black .qa__q:focus-visible { outline-color: var(--yellow); }
.faq--black .faq__group + .faq__group { margin-top: 0; }
.faq--black .faq__lists ul { border-top: 2px solid var(--white); }
.faq--black .reg--tl { top: 24px; }
.has-motion .faq--black .title { visibility: hidden; }

/* J7 · CTA final (amarillo) */
.jcta { padding: clamp(56px, 7vw, 100px) 0; }
.jcta__inner { display: grid; gap: 28px; justify-items: start; }
.jcta .title { max-width: 16em; }
@media (min-width: 861px) { .jcta__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(32px, 5vw, 80px); } }
.page-join .footer .todo { opacity: .7; }

/* /join en español: el nav tiene pocos enlaces, cabe hasta 981px */
@media (min-width: 981px) and (max-width: 1199px) {
  html[lang="es"] .page-join .nav__links, html[lang="es"] .page-join .nav__cta, html[lang="es"] .page-join .nav__biz { display: flex; }
  html[lang="es"] .page-join .nav__cta { display: inline-flex; }
  html[lang="es"] .page-join .burger { display: none; }
}
.field .choice input[type="checkbox"], .field .choice input[type="radio"] { -webkit-appearance: auto; appearance: auto; display: inline-block; width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; background: transparent; flex: none; }
.field .choice { display: flex; align-items: center; gap: 14px; }
.field .choice--privacy { align-items: flex-start; }
.field .choice--privacy input { margin-top: 2px; }

/* Móvil / hamburguesa: el selector de idioma sigue visible en la barra, compacto: muestra el OTRO idioma (un toque para cambiar) */
@media (max-width: 1010px) {
  .nav__actions > .lang .lang__sep, .nav__actions > .lang .lang__btn.is-active { display: none; }
  .nav__actions > .lang .lang__btn { opacity: 1; padding: .5em .8em; font-weight: 700; font-size: .78rem; letter-spacing: .06em; border: 1px solid currentColor; border-radius: 999px; min-height: 36px; }
  .nav__actions { gap: 6px; }
}
@media (min-width: 1011px) and (max-width: 1199px) {
  html[lang="es"] body:not(.page-join) .nav__actions > .lang .lang__sep, html[lang="es"] body:not(.page-join) .nav__actions > .lang .lang__btn.is-active { display: none; }
  html[lang="es"] body:not(.page-join) .nav__actions > .lang .lang__btn { opacity: 1; padding: .5em .8em; font-weight: 700; font-size: .78rem; letter-spacing: .06em; border: 1px solid currentColor; border-radius: 999px; min-height: 36px; }
}
@media (max-width: 349px) { .nav__actions > .lang { display: none; } }   /* el logo de 220px no deja sitio; queda el del menú */
@media (min-width: 1200px) and (max-width: 1299px) { html[lang="es"] body:not(.page-join) .nav__links { gap: 10px; } html[lang="es"] body:not(.page-join) .nav__inner { gap: 12px; } }

/* ---------- Fotos reales del hero (home y /join): ya traen el tratamiento B&N + amarillo; sin filtros ni overlays ---------- */
.ph__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; color: transparent; }   /* si no carga, se ve el fondo gris del .ph (sin texto alt encima) */
.ph--left .ph__img { object-position: 40% 50%; }        /* lámpara amarilla y cara conviven en el recorte 2:5 (escritorio) y 3:4 (móvil) */
.ph--right .ph__img { object-position: center; }
.ph--main .ph__img { object-position: center top; }     /* cara arriba: el corte inferior (25–29%) solo se come la chaqueta */
.ph--bl .ph__img { object-position: center; }
.jhero__photo .ph__img { object-position: center top; }

/* ---------- Transición: video de prueba (póster + fondo negro sostienen la transición si el video falla o tarda) ---------- */
.reveal__media .ph { background: var(--black); }
.reveal__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; background: var(--black); }

/* ---------- Fotos reales S4 / S5 / S7 (ya traen su tratamiento; sin filtros ni overlays). Base: .ph__img (ver "Fotos reales del hero") ---------- */
.human__photo .ph__img { object-position: center top; }
.follow__img .ph__img { object-position: 50% 40%; }     /* en móvil el marco es 4:5: las caras quedan dentro */
.follow__pip .ph__img { object-position: 50% 30%; }
.pcard__ph .ph__img { object-position: 50% 25%; }       /* caras arriba: la píldora y el cursor tapan la parte baja */
/* Microtexto "Sample profiles": mismo estilo que las etiquetas del sitio (Inter Light, mayúsculas, tracking amplio) */
.art__sample { position: absolute; left: 0; right: 0; bottom: 1.2cqw; margin: 0; text-align: center; font-weight: 300; font-size: max(9px, 1.9cqw); letter-spacing: .16em; text-transform: uppercase; color: var(--black); pointer-events: none; }

/* ---------- Fotos S3 (tarjetas de servicios): imagen 960×720 (4:3), 16:9 en escritorio vía .card__ph; sin filtros ---------- */
.card__ph .ph__img { object-position: center; -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; }   /* sin arrastre nativo de la imagen: no estorba al carrusel arrastrable */
.card:nth-child(1) .card__ph .ph__img { object-position: 50% 35%; }   /* Executive: conserva el peinado y el pasaporte en el recorte 16:9 */
.card:nth-child(4) .card__ph .ph__img { object-position: 50% 25%; }   /* Marketing: conserva el aro de luz amarillo */
.card:nth-child(5) .card__ph .ph__img { object-position: 50% 25%; }   /* Real estate: conserva el peinado, las llaves y la maqueta */