/* iURBANS · hoja del sitio. Se carga después de tokens.css e iurbans-editorial.css.
   Solo añade lo que la web necesita y el kit no trae: cabecera, película de fondo,
   la manzana animada, el ecosistema y las llamadas a la acción. Sin radios, sin sombras. */

html { scroll-behavior: smooth; background: var(--color-white); }
body { background: var(--color-white); color: var(--color-ebony); margin: 0; }
:root { --cab: 64px; }
[id] { scroll-margin-top: var(--cab); }

/* ---------------------------------------------------------------- cabecera */
.cab { position: fixed; z-index: 50; left: 0; right: 0; top: 0; padding-top: env(safe-area-inset-top, 0px);
  color: var(--color-white); transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  border-bottom: 1px solid transparent; }
.cab__fila { height: var(--cab); display: flex; align-items: center; gap: var(--space-6); }
.cab .wm { font-size: 1.75rem; text-decoration: none; color: inherit; }
.cab .wm .r { color: inherit; }
.cab__nav { display: none; gap: var(--space-6); margin-left: auto; }
.cab__nav a, .cab__cta { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; text-decoration: none; color: inherit; }
.cab__nav a:hover { color: var(--color-crimson); }
.cab__cta { margin-left: auto; font-weight: 700; padding: 8px 12px; background: var(--color-crimson); color: var(--color-ebony); white-space: nowrap; }
.cab__cta:hover { background: var(--color-ebony); color: var(--color-white); }
.cab--claro .cab__cta:hover { background: var(--color-ebony); }
@media (min-width: 64em) { .cab__nav { display: flex; } .cab__cta { margin-left: 0; } }
.cab--claro { background: var(--color-white); color: var(--color-ebony); border-bottom-color: var(--color-ink-4); }
.cab--claro .wm .r { color: var(--color-ebony); }

/* ---------------------------------------------------------------- CTA 1: enlace mono con filete que crece */
.cta-filete { display: inline-flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-weight: 700;
  font-size: var(--fs-kicker); letter-spacing: var(--tracking-band); text-transform: uppercase; color: inherit; text-decoration: none; }
.iu-pagina a.cta-filete { text-decoration: none; }
.cta-filete::after { content: ""; display: block; height: 2px; width: 24px; background: var(--color-crimson); transition: width 220ms ease; }
.cta-filete:hover::after, .cta-filete:focus-visible::after { width: 100%; }
.iu-pagina a.cta-filete:hover { color: inherit; }

/* ---------------------------------------------------------------- película de fondo */
.pelicula { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--color-ebony); }
.pelicula video, .pelicula img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pelicula::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.pelicula--portada::after { background: linear-gradient(180deg,
  color-mix(in srgb, var(--color-ebony) 86%, transparent) 0%,
  color-mix(in srgb, var(--color-ebony) 66%, transparent) 36%,
  color-mix(in srgb, var(--color-ebony) 52%, transparent) 64%,
  color-mix(in srgb, var(--color-ebony) 92%, transparent) 100%); }
.pelicula--cierre::after { background: linear-gradient(180deg,
  var(--color-ebony) 0%,
  color-mix(in srgb, var(--color-ebony) 72%, transparent) 38%,
  color-mix(in srgb, var(--color-ebony) 62%, transparent) 66%,
  color-mix(in srgb, var(--color-ebony) 94%, transparent) 100%); }
.pelicula--manzana::after { background: linear-gradient(180deg,
  color-mix(in srgb, var(--color-ebony) 20%, transparent) 0%,
  color-mix(in srgb, var(--color-ebony) 30%, transparent) 40%,
  color-mix(in srgb, var(--color-ebony) 92%, transparent) 100%); }
.pausa { position: absolute; right: var(--iu-gutter); bottom: var(--space-4); z-index: 2; background: transparent;
  border: 1px solid var(--color-rule-on-dark); color: var(--color-paper-on-dark-2); font-family: var(--font-mono);
  font-size: var(--fs-note); letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; cursor: pointer; }
.pausa:hover { color: var(--color-white); border-color: var(--color-white); }
.pausa:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }

/* ---------------------------------------------------------------- portada */
.portada { position: relative; isolation: isolate; overflow: hidden; background: var(--color-ebony); color: var(--color-white);
  min-height: min(100svh, 60rem); display: flex; flex-direction: column; }
.portada__contenido { flex: 1; display: flex; flex-direction: column; padding-block: calc(var(--cab) + var(--space-12)) var(--space-16); }
.portada .iu-titular--portada { color: var(--color-white); margin: var(--space-12) 0 var(--space-6); max-width: 24ch; text-wrap: balance; }
.portada .iu-bajada { color: var(--color-paper-on-dark-2); max-width: 40ch; }
.portada .iu-portada__lema { margin-top: 0; }
.portada .cta-filete { color: var(--color-white); margin-top: var(--space-2); align-self: flex-start; }
.portada .iu-portada__rejilla { margin-top: auto; padding-top: var(--space-12); max-width: 36rem; }
@media (min-width: 64em) { .portada .iu-titular--portada { margin-top: var(--space-20); } }
/* la rejilla de manzanas: ocho celdas se deciden juntas */
.iu-celda { transition: background-color 180ms ease, border-color 180ms ease; }
.rejilla-armando .iu-celda--on { background: transparent; border-color: color-mix(in srgb, var(--color-white) 22%, transparent); }
.rejilla-armando .iu-celda--on.encendida { background: var(--color-crimson); border-color: var(--color-crimson); }

/* ---------------------------------------------------------------- utilidades de sección */
.seccion { padding-block: var(--space-16); }
@media (min-width: 64em) { .seccion { padding-block: var(--space-24); } }
.encabezado { max-width: 52rem; margin-bottom: var(--space-10); }
.encabezado .iu-titular { text-wrap: balance; }
.mosaico { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.mosaico .iu-figura img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 48em) {
  .mosaico { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto auto; }
  .mosaico > :first-child { grid-row: 1 / 3; }
  .mosaico > :first-child img { aspect-ratio: auto; height: 100%; min-height: 26rem; }
  .mosaico > :not(:first-child) img { aspect-ratio: 16 / 10; }
}
.mosaico .iu-figura--grande { display: flex; flex-direction: column; }
.mosaico .iu-figura--grande img { flex: 1; }

.banda-foto { margin-block: var(--space-12) 0; }
.banda-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
@media (min-width: 40em) { .banda-foto img { aspect-ratio: 21 / 8; } }

.fila-cifras-3 { margin-top: var(--space-10); }
.flecha { font-family: var(--font-display); }

/* ---------------------------------------------------------------- la manzana: apertura con película */
.apertura { position: relative; isolation: isolate; overflow: hidden; background: var(--color-ebony); color: var(--color-white);
  min-height: clamp(30rem, 78svh, 48rem); display: flex; align-items: flex-end; }
.apertura__texto { padding-block: var(--space-16) var(--space-12); }
.apertura .iu-titular { color: var(--color-white); }
.apertura .iu-bajada { color: var(--color-paper-on-dark-2); }
.apertura .iu-kicker { color: var(--color-white); }

/* ---------------------------------------------------------------- la manzana: recorrido fijado */
.mz { position: relative; background: var(--color-white); }
.mz__datos { padding-block: var(--space-10) var(--space-4); }
.mz__carril { position: relative; }
.mz--fijo .mz__carril { height: 440vh; }
.mz__escena { padding-block: var(--space-6) var(--space-10); }
.mz--fijo .mz__escena { position: sticky; top: var(--cab); height: calc(100vh - var(--cab)); height: calc(100svh - var(--cab));
  padding-block: var(--space-4); display: flex; align-items: center; }
.mz__rejilla { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (min-width: 64em) { .mz__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-10); align-items: center; } }

.mz__bandas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
@media (min-width: 40em) { .mz__bandas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mz__banda { appearance: none; margin: 0; cursor: pointer; text-align: left; font: inherit;
  display: flex; align-items: center; gap: .45em; min-height: 2.5rem; padding: 6px 10px;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
  background: var(--color-white); color: var(--color-ebony); border: 1px solid var(--color-ebony);
  transition: background-color 160ms ease, color 160ms ease; }
.mz__banda:nth-child(2), .mz__banda:nth-child(3) { background: var(--color-paper); border-color: var(--color-paper); }
.mz__banda .wm { font-size: 1.2em; letter-spacing: 0; }
.mz__banda .wm .r { color: inherit; }
.mz__banda[aria-selected="true"] { background: var(--color-ebony); color: var(--color-white); border-color: var(--color-ebony); }
.mz__banda:hover:not([aria-selected="true"]) { border-color: var(--color-ebony); }
.mz__banda:focus-visible { outline: 2px solid var(--color-crimson); outline-offset: 2px; }
.mz__progreso { height: 2px; background: var(--color-ink-4); margin-top: var(--space-2); position: relative; overflow: hidden; }
.mz__progreso span { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--color-crimson); transform-origin: left; transform: scaleX(var(--p, 0)); }

.mz__dibujo { position: relative; width: 100%; max-width: 100%; aspect-ratio: 56 / 48; margin: var(--space-3) auto 0; }
.mz--fijo .mz__dibujo { max-height: calc(100svh - var(--cab) - 11rem); width: auto; }
.mz__dibujo > svg, .mz__dibujo > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mz__dibujo > svg { opacity: 0; transition: opacity 360ms ease 420ms; }
.mz__dibujo > svg.activo { opacity: 1; transition: opacity 0ms; z-index: 2; }
.mz__dibujo > svg.saliente { z-index: 1; opacity: 0; }
.mz__dibujo > svg.saliente.sosten { opacity: 1; }
.mz__dibujo .nuevo { opacity: 0; transform: translateY(1.6px); transition: opacity 260ms ease, transform 320ms cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.mz__dibujo .nuevo.listo { opacity: 1; transform: none; }
.mz__cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--color-ebony); margin-top: var(--space-3); }
.mz__cifra { padding: 8px 12px 6px 0; }
.mz__cifra + .mz__cifra { padding-left: var(--space-4); border-left: 1px solid var(--color-ink-4); }
.mz__cifra b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.mz__cifra b.rojo { color: var(--color-crimson); }
.mz__cifra span { display: block; font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-ink-2); margin-top: 4px; line-height: 1.35; }

.mz__texto { min-width: 0; }
.mz__paso { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-ink-2); }
.mz__paso b { color: var(--color-crimson); }
.mz__titulo { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: .94; margin: 8px 0 8px; text-wrap: balance; }
.mz__titulo em { font-style: normal; color: var(--color-crimson); }
.mz__sub { font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: .06em; text-transform: uppercase; color: var(--color-ink-2); line-height: 1.4; }
.mz__frase { font-style: italic; font-size: var(--fs-lead); line-height: var(--leading-lead); color: var(--color-ink-2); margin: var(--space-4) 0 var(--space-2); max-width: 34ch; }
.mz__llamadas { list-style: none; padding: 0; margin: var(--space-3) 0 0; border-bottom: 1px solid var(--color-ink-4); }
.mz__llamadas .iu-llamada { min-height: 2.6rem; }
.mz__llamadas .iu-llamada span:last-child { transition: opacity 180ms ease; }
.mz__llamadas.cambiando .iu-llamada span:last-child { opacity: 0; }
.mz__pista { font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink-2); margin-top: var(--space-4); }
.mz:not(.mz--fijo) .mz__pista { display: none; }
@media (max-width: 63.99em) {
  .mz__texto { order: 2; }
  .mz__frase { display: none; }
}

.mz__cierre { padding-block: var(--space-8) var(--space-16); }
.leyenda-extra { margin-top: var(--space-8); }

/* conmutador de nota (CTA 3): + carmesí que pasa a − */
.conmutador { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: inherit; margin-top: var(--space-6); }
.conmutador__signo { color: var(--color-crimson); font-size: 1.35em; line-height: 1; width: .8em; display: inline-block; }
.conmutador:hover .conmutador__texto { text-decoration: underline; text-decoration-color: var(--color-crimson); text-underline-offset: .2em; }
.conmutador:focus-visible { outline: 2px solid var(--color-crimson); outline-offset: 3px; }
.nota-desplegable { border-top: 1px solid var(--iu-filete); margin-top: var(--space-3); padding-top: var(--space-2); }

/* ---------------------------------------------------------------- cómo funciona */
.fases-animadas .iu-fases { position: relative; }
.fases-animadas .iu-fases::before { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 100%; background: var(--color-crimson);
  transform-origin: left; transform: scaleX(0); transition: transform 1400ms cubic-bezier(.3,.6,.2,1); }
.fases-animadas.en-vista .iu-fases::before { transform: scaleX(1); }
.fases-animadas .iu-fase__numero { transition: color 200ms ease; }
.fases-animadas:not(.en-vista) .iu-fase__numero { color: var(--color-ebony); }
.fases-animadas.en-vista .iu-fase:nth-child(1) .iu-fase__numero { transition-delay: 0ms; }
.fases-animadas.en-vista .iu-fase:nth-child(2) .iu-fase__numero { transition-delay: 170ms; }
.fases-animadas.en-vista .iu-fase:nth-child(3) .iu-fase__numero { transition-delay: 340ms; }
.fases-animadas.en-vista .iu-fase:nth-child(4) .iu-fase__numero { transition-delay: 510ms; }
.fases-animadas.en-vista .iu-fase:nth-child(5) .iu-fase__numero { transition-delay: 680ms; }
.fases-animadas.en-vista .iu-fase:nth-child(6) .iu-fase__numero { transition-delay: 850ms; }
.fases-animadas.en-vista .iu-fase:nth-child(7) .iu-fase__numero { transition-delay: 1020ms; }
.fases-animadas.en-vista .iu-fase:nth-child(8) .iu-fase__numero { transition-delay: 1190ms; }
.modelos { margin-top: var(--space-4); }

/* ---------------------------------------------------------------- ecosistema */
.eco-seccion .iu-banda { margin-bottom: var(--space-6); }
.iu-ecosistema__lineas line { stroke-dasharray: 100; stroke-dashoffset: 0; }
.eco-armando .iu-ecosistema__lineas line { stroke-dashoffset: 100; transition: stroke-dashoffset 900ms cubic-bezier(.3,.6,.2,1); }
.eco-armando.en-vista .iu-ecosistema__lineas line { stroke-dashoffset: 0; }
.eco-armando.en-vista .iu-ecosistema__lineas line:nth-child(2) { transition-delay: 150ms; }
.eco-armando.en-vista .iu-ecosistema__lineas line:nth-child(3) { transition-delay: 300ms; }
.eco-armando.en-vista .iu-ecosistema__lineas line:nth-child(4) { transition-delay: 450ms; }
.eco-armando .iu-ecosistema__nucleo { transition: background-color 300ms ease; }
.eco-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8) var(--space-6); margin-top: var(--space-12); }
@media (min-width: 48em) { .eco-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.eco-grid--b { margin-top: var(--space-8); }
@media (min-width: 48em) { .eco-grid--b { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.eco-video { position: relative; margin-top: var(--space-12); }
.eco-video video, .eco-video img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 40em) { .eco-video video, .eco-video img { aspect-ratio: 21 / 9; } }
.estado { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin-top: var(--space-10); align-items: start; }
@media (min-width: 48em) { .estado { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

/* ---------------------------------------------------------------- cierre y contacto */
.cierre { position: relative; isolation: isolate; overflow: hidden; background: var(--color-ebony); color: var(--color-white); }
.cierre__contenido { padding-block: var(--space-24) var(--space-12); }
.cierre .iu-titular, .cierre .iu-kicker { color: var(--color-white); }
.cierre .iu-bajada { color: var(--color-paper-on-dark-2); }
.cierre__acciones { display: grid; gap: var(--space-8); margin-top: var(--space-10); align-items: end; }
@media (min-width: 64em) { .cierre__acciones { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-16); } }

/* CTA 4: banda carmesí maciza */
.cta-banda { display: inline-flex; align-items: center; gap: 12px; background: var(--color-crimson); color: var(--color-ebony);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-kicker); letter-spacing: var(--tracking-band); text-transform: uppercase;
  padding: 16px 22px; text-decoration: none; transition: background-color 160ms ease, color 160ms ease; }
.iu-pagina a.cta-banda { text-decoration: none; }
.cta-banda::before { content: ""; width: 0; height: 12px; background: var(--color-crimson); transition: width 160ms ease; }
.iu-pagina a.cta-banda:hover, .cta-banda:focus-visible { background: var(--color-ebony); color: var(--color-white); outline: 1px solid var(--color-white); }
.cta-banda:hover::before, .cta-banda:focus-visible::before { width: 12px; }

/* CTA 5: el correo compuesto grande */
.cta-correo { position: relative; display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5.4vw, 4.5rem);
  line-height: 1; letter-spacing: .005em; color: var(--color-white); text-decoration: none; padding-left: 0; transition: padding-left 180ms ease; overflow-wrap: anywhere; }
.iu-pagina a.cta-correo { text-decoration: none; color: var(--color-white); }
.cta-correo::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 0; background: var(--color-crimson); transition: width 180ms ease; }
.cta-correo:hover, .cta-correo:focus-visible { padding-left: 18px; }
.cta-correo:hover::before, .cta-correo:focus-visible::before { width: 3px; }
.contacto-meta { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-paper-on-dark-2); margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.contacto-meta .min { text-transform: none; letter-spacing: .06em; }
.firma { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-top: var(--space-16);
  border-top: 1px solid var(--color-rule-on-dark); padding-top: var(--space-6); }
.firma .wm { font-size: clamp(3rem, 9vw, 7rem); color: var(--color-white); }
.firma__lema { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-tagline); text-transform: uppercase; color: var(--color-paper-on-dark-2); }
.pie-global { background: var(--color-ebony); color: var(--color-paper-on-dark-3); }
.pie-global .iu-pie__linea { border-top-color: var(--color-rule-on-dark); }
.pie-global .creditos { font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: .02em; line-height: 1.5; color: var(--color-paper-on-dark-2);
  margin-top: var(--space-4); max-width: 110ch; }

/* ---------------------------------------------------------------- movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mz__dibujo .nuevo { opacity: 1; transform: none; }
  .fases-animadas:not(.en-vista) .iu-fase__numero { color: var(--color-crimson); }
  .fases-animadas .iu-fases::before { display: none; }
  .eco-armando .iu-ecosistema__lineas line { stroke-dashoffset: 0; }
  .rejilla-armando .iu-celda--on { background: var(--color-crimson); border-color: var(--color-crimson); }
}

.cierre .pausa { top: calc(var(--cab) + var(--space-4)); bottom: auto; }
.pie-global .iu-pie__linea .wm { color: var(--color-paper-on-dark-2); }
.pie-global .iu-pie__linea .wm .r { color: inherit; }

/* ---------------------------------------------------------------- selector de idioma */
.cab__idioma { display: flex; align-items: center; gap: 2px; margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; }
.cab__idioma > * { padding: 6px 7px; line-height: 1; color: inherit; text-decoration: none; border: 1px solid transparent; }
.cab__idioma [aria-current="true"] { font-weight: 700; border-color: currentColor; }
.iu-pagina .cab__idioma a { text-decoration: none; }
.cab__idioma a:hover { color: var(--color-crimson); }
.cab__idioma + .cab__cta { margin-left: 0; }
@media (min-width: 64em) { .cab__idioma { margin-left: 0; } .cab__nav { margin-left: auto; } }
@media (max-width: 26em) { .cab__cta { padding: 8px 9px; font-size: var(--fs-note); } .cab__fila { gap: var(--space-3); } }