/*
 * TITULARES: Heading Now (Zetafonts), pesos 66 Bold y 68 Heavy.
 *
 * Es tipografía comercial y no se puede redistribuir, así que los archivos no
 * viven en el repositorio. Hasta que llegue la licencia web de Zetafonts los
 * titulares caen a Montserrat 800: misma clase de letra -- grotesca geométrica
 * -- así que la jerarquía se sostiene y el cambio será solo de textura.
 *
 * PARA ACTIVARLA: copiar los dos woff2 de la licencia a assets/fonts/ con los
 * nombres de abajo y descomentar este bloque. Nada más cambia: "Heading Now" ya
 * encabeza todas las pilas de titular.
 *
 * @font-face {
 *   font-family: "Heading Now";
 *   src: url("../fonts/heading-now-66-bold.woff2") format("woff2");
 *   font-display: swap;
 *   font-style: normal;
 *   font-weight: 700;
 * }
 *
 * @font-face {
 *   font-family: "Heading Now";
 *   src: url("../fonts/heading-now-68-heavy.woff2") format("woff2");
 *   font-display: swap;
 *   font-style: normal;
 *   font-weight: 800;
 * }
 */

/* Cuerpo: Montserrat variable, autohospedada bajo OFL. Dos cortes de
   unicode-range en vez de un archivo: el latin básico son 35KB y el latin-ext
   (68KB) solo se descarga si la página usa un glifo que lo necesite. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-variable-latin.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400 800;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-variable-latin-ext.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400 800;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* La cursiva real, no la falsa: "del futuro." del titular va en italic a 72px y
   sin este archivo el navegador inclinaba la redonda, que a ese cuerpo se nota. */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-italic-latin.woff2") format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 400 800;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-italic-latin-ext.woff2") format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 400 800;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body.c4n-gin-page {
  /* Device floor, not a text floor: in `rem` this became 640px under 200%
     text zoom and forced the whole document wider than a 360px viewport. */
  min-width: 320px;
  margin: 0;
  background: #030a12;
  color: #f4efe7;
  color-scheme: dark;
  overscroll-behavior-x: none;
  scrollbar-color: #f14e23 #030a12;
  scrollbar-width: thin;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.c4n-gin-page::-webkit-scrollbar {
  width: 0.75rem;
}

body.c4n-gin-page::-webkit-scrollbar-track {
  background: #030a12;
}

body.c4n-gin-page::-webkit-scrollbar-thumb {
  border: 0.1875rem solid #030a12;
  border-radius: 99rem;
  background: #f14e23;
}

.c4n-skip-link {
  position: fixed;
  z-index: 100000;
  top: 0.75rem;
  left: 0.75rem;
  min-height: 2.75rem;
  padding: 0.75rem 1rem;
  transform: translateY(calc(-100% - 1.5rem));
  border: 0.1875rem solid #0e2fc2;
  border-radius: 0.125rem;
  outline: 0.1875rem solid #f4efe7;
  outline-offset: 0.125rem;
  background: #f4efe7;
  color: #05111d;
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
}

.c4n-skip-link:focus,
.c4n-skip-link:focus-visible {
  transform: translateY(0);
}

/* Solo para lectores de pantalla: fuera de la vista pero dentro del árbol de
   accesibilidad. `display: none` lo habría sacado de los dos. */
.c4n-sr-only {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  margin: -0.0625rem;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.c4n-event {
  --c4n-ink: #05111d;
  --c4n-night: #030a12;
  --c4n-ivory: #f4efe7;
  /*
   * Paleta de marca: naranja #f14e23 y azul #0e2fc2.
   *
   * El azul de marca mide 1.96:1 contra el fondo navy de la página, así que como
   * texto sería ilegible: queda reservado para rellenos que lleven encima letra
   * marfil (8.3:1) y para el borde del enlace de salto, que va sobre marfil.
   * --c4n-blue-ink es ese mismo azul aclarado hasta 4.8:1, y es el que pinta las
   * letras. El cyan anterior desapareció: no está en la paleta.
   */
  --c4n-orange: #f14e23;
  --c4n-blue: #0e2fc2;
  --c4n-blue-ink: #5f7dff;
  --c4n-smoke: #afbec2;
  --c4n-line: rgba(95, 125, 255, 0.24);
  --c4n-orange-line: rgba(241, 78, 35, 0.36);
  /* Both state colours were picked when registro was an ivory band. On the dark
     surface #9d2f24 measured 2.5:1 and #0d6650 2.7:1 -- under the 4.5:1 the
     message text needs and the 3:1 the borders need. Rose instead of a red-
     orange so the error never reads as the orange CTA. Now 6.2:1 and 8.3:1. */
  --c4n-error: #ff5c72;
  --c4n-success: #34c98a;
  --c4n-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --c4n-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* Fluid side frame. The second term only wins past 1280px, which is what
     keeps the content ceiling at 80rem on large screens; below that the clamp
     gives the composition a real margin instead of freezing at 16px. */
  /* Los insets laterales van en la base, no solo en el corte de 900px: un
     iPhone en horizontal mide 932px, se salía de esa media query y el contenido
     quedaba debajo del notch. En escritorio env() es 0, así que no cambia nada. */
  --c4n-frame: max(
    clamp(1rem, 4.5vw, 4rem),
    calc((100vw - 80rem) / 2),
    env(safe-area-inset-left, 0px),
    env(safe-area-inset-right, 0px)
  );
  --c4n-rule: 0.0625rem;

  /*
   * Ritmo vertical. Una sola escala mueve todas las costuras.
   *
   * CADA SECCIÓN CABE EN UNA PANTALLA. Ese es el criterio de dimensionado, y
   * cambia cómo se reparte el aire: antes cada sección llevaba 92px de padding
   * arriba y otros 92 abajo más 195px de cabecera, y solo el hero entraba en
   * un monitor de 1440x900 -- el registro medía pantalla y media, la agenda
   * 1,3 pantallas. La medida se tomó en el navegador, no a ojo.
   *
   * Ahora cada sección es `min-height: 100svh` con el contenido centrado. El
   * padding vertical es el mínimo que garantiza aire cuando el contenido llena
   * la pantalla; cuando sobra sitio, lo reparte `align-content: center`, no
   * un padding fijo. Así la misma sección se ve bien a 720 y a 1080 de alto.
   *
   * `--c4n-header-h` es lo que mide la cabecera fija. Se resta en el hero,
   * que es la única sección que arranca debajo de ella.
   */
  --c4n-header-h: 5.875rem;
  --c4n-section-y: clamp(3rem, 4.5vh, 4.5rem);
  --c4n-section-lead: clamp(1.5rem, 2.6vh, 2.5rem);
  /*
   * Los separadores verticales escalan con `vh`, no con `vw`.
   *
   * Es la corrección que hace que un portátil de 1366x768 quepa. Con `vw`, un
   * monitor ancho y bajo (1280x720, 1366x768) recibía los huecos más grandes
   * justo cuando menos altura tenía: el hero medía 772px en 633 de pantalla.
   * Lo que se está repartiendo es altura, así que la altura es quien manda.
   */
  --c4n-block-gap: clamp(1.5rem, 3.6vh, 3rem);
  --c4n-group-gap: clamp(1.1rem, 2.6vh, 2.25rem);
  --c4n-pair-gap: clamp(0.6rem, 1.2vh, 1rem);
  --c4n-footer-y: clamp(2.5rem, 4vw, 4rem);
  --c4n-agenda-time: 9.5rem;
  --c4n-agenda-gap: 4.5rem;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  background:
    radial-gradient(ellipse 56rem 42rem at 83% 15%, rgba(241, 78, 35, 0.13), transparent 68%),
    radial-gradient(ellipse 50rem 28rem at 60% 3%, rgba(95, 125, 255, 0.1), transparent 66%),
    linear-gradient(145deg, var(--c4n-ink) 0%, #071623 49%, var(--c4n-night) 100%);
  color: var(--c4n-ivory);
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.62;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@supports (color: color-mix(in srgb, white, transparent)) {
  .c4n-event {
    --c4n-line: color-mix(in srgb, var(--c4n-blue-ink) 24%, transparent);
    --c4n-orange-line: color-mix(in srgb, var(--c4n-orange) 36%, transparent);
  }
}

.c4n-event::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(circle, rgba(217, 247, 247, 0.16) 0 0.0375rem, transparent 0.04375rem);
  background-size: 0.625rem 0.625rem;
  content: "";
  opacity: 0.32;
  pointer-events: none;
}

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

.c4n-event :where(header, nav, main, section, footer, figure, form) {
  display: block;
}

.c4n-event :where(h1, h2, h3, p, ol, ul, figure) {
  margin: 0;
}

.c4n-event :where(ol, ul) {
  padding: 0;
  list-style: none;
}

.c4n-event :where(a) {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.22em;
}

.c4n-event :where(button, input) {
  margin: 0;
  color: inherit;
  caret-color: var(--c4n-blue-ink);
  font: inherit;
}

.c4n-event :where(button) {
  border: 0;
}

.c4n-event :where(img, svg) {
  display: block;
  max-width: 100%;
}

.c4n-event :where(img) {
  height: auto;
}

.c4n-event [hidden] {
  display: none !important;
}

.c4n-event ::selection {
  background: var(--c4n-orange);
  color: var(--c4n-night);
}

/* Cyan, not --c4n-blue: the blue ring dates from the ivory registro band and
   measures 3.2:1 against the navy every section now uses. The dark halo keeps
   the ring readable where it lands on the copper button or the hero photo. */
.c4n-event :where(a, button, input, [tabindex]):focus-visible {
  outline: 0.1875rem solid var(--c4n-blue-ink);
  outline-offset: 0.1875rem;
  box-shadow: 0 0 0 0.375rem rgba(3, 10, 18, 0.72);
}

.c4n-event main[tabindex="-1"]:focus {
  outline: none;
}

/* Controls only: kill the 300ms tap delay and the long-press text selection.
   Content text stays selectable. */
.c4n-skip-link,
.c4n-nav__links a,
.c4n-nav__registration,
.c4n-nav__toggle,
.c4n-button,
.c4n-mobile-registration,
.c4n-footer__links a {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* touch-action no se hereda: la etiqueta de privacidad ya lo tenía, pero el
   enlace que lleva dentro y los del panel de error seguían con el retardo de
   300ms al tocarlos. Las etiquetas de los campos también son zona táctil: al
   tocarlas enfocan su input. */
.c4n-field input:not([type="hidden"]),
.c4n-field label,
.c4n-field--privacy label,
.c4n-field--privacy label a,
.c4n-registration__status a {
  touch-action: manipulation;
}


/*
 * Al llegar por el menú, la sección se detiene bajo la barra fija.
 *
 * Pero ojo con una cosa: ahora cada sección mide exactamente una pantalla, y si
 * el ancla se detuviera 94px más abajo, el final de la sección quedaría fuera
 * de la vista. Por eso el margen aquí es 0: la sección ocupa la pantalla
 * entera, y el título no queda tapado porque el contenido está centrado con
 * más de 94px de aire arriba en cualquier monitor desde 768 de alto.
 */
.c4n-event :where(#registro, #galeria, #agenda, #conversacion, #experiencia) {
  scroll-margin-top: 0;
}

/* Both are scroll targets after a failed submit -- the panel gets focus, the
   fields get the summary links. Without this the fixed bar covers them, and on
   a field the extra room keeps its label in view too. */
.c4n-event :where(.c4n-registration__status, .c4n-field input:not([type="hidden"])) {
  scroll-margin-top: calc(7.25rem + env(safe-area-inset-top, 0px));
}

.c4n-site-header {
  position: fixed;
  z-index: 800;
  top: 0;
  right: 0;
  left: 0;
  pointer-events: none;
}


.c4n-nav {
  position: relative;
  /* Contexto de apilamiento propio: sin él, el `::before` a z:-1 que refuerza
     el fondo al hacer scroll caería detrás del nav entero y no se vería. */
  isolation: isolate;
  display: flex;
  width: 100%;
  min-height: 5.875rem;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) var(--c4n-frame) 1rem;
  align-items: center;
  /*
   * Velo translúcido con desenfoque, no bloque opaco.
   *
   * Al 92% de opacidad la cabecera era la última franja horizontal de la
   * página: una banda negra de 94px que las estrellas no atravesaban y que
   * cortaba el cielo en seco. Al 55% con `backdrop-filter` se ve lo que hay
   * detrás -- estrellas incluidas -- y el desenfoque es lo que sigue
   * garantizando el contraste del menú sobre cualquier fotografía: la nota
   * anterior sobre el H1 y el cobre pasando bajo las letras a 1.00:1 (WCAG
   * 1.4.3) sigue vigente, y el blur la resuelve sin tapar.
   */
  /*
   * Degradado que se funde, no franja. La barra necesita un fondo para que el
   * menú contraste sobre la foto del hero (WCAG 1.4.3), pero un bloque con
   * borde inferior era la última línea horizontal de la página: medido en la
   * captura, bajo el nav había cero estrellas y justo debajo tres o cuatro.
   *
   * Probé velo translúcido con backdrop-filter y no sirve: cualquier
   * desenfoque disuelve un punto de 1px en su entorno oscuro, así que las
   * estrellas desaparecían igual y la barra seguía leyéndose sólida. Un
   * degradado de opaco arriba a nada abajo hace lo que hace la foto del hero
   * con su propio scrim: da contraste donde están las letras y desaparece
   * donde no hay nada que proteger. Sin borde que cruzar, no hay franja.
   */
  background: linear-gradient(180deg, rgba(3, 10, 18, 0.94) 0%, rgba(3, 10, 18, 0.8) 55%, rgba(3, 10, 18, 0) 100%);
  pointer-events: auto;
}

/*
 * Al pasar el hero el degradado se cierra un poco más, para que el menú siga
 * contrastando sobre las fotos de agenda y experiencia, que son más claras que
 * el hero. Sigue fundiéndose a nada por abajo: nunca vuelve a ser una franja.
 *
 * Un degradado no se interpola con `transition`, así que el refuerzo va en un
 * pseudoelemento cuya opacidad sí se anima: el cambio se ve como «la barra se
 * asienta» y no como un fondo que aparece de golpe.
 */
.c4n-nav::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 10, 18, 0.97) 0%, rgba(3, 10, 18, 0.88) 60%, rgba(3, 10, 18, 0) 100%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.c4n-nav.is-scrolled::before {
  opacity: 1;
}

/*
 * Las estrellas dentro de la barra.
 *
 * Esto es lo que hace que la cabecera deje de ser una franja, y es la única
 * forma que funciona. El cielo fijo vive en `.c4n-event` a z:1 y el nav a
 * z:800 en el mismo contexto, así que cualquier fondo del nav -- opaco,
 * translúcido, degradado, con desenfoque -- se pinta encima del cielo y lo
 * tapa. Medido en las capturas: cero estrellas bajo la barra con las tres
 * variantes. Subir el cielo por encima del nav tampoco sirve: pasaría también
 * sobre los logos y el botón.
 *
 * La salida es pintar estrellas *dentro* del nav, en un pseudoelemento que
 * queda detrás de sus hijos (que no tienen z-index) y delante de su fondo.
 * Mismo mosaico, mismo `screen` y misma velocidad que el plano lejano de
 * `.c4n-stars__layer--far`, así que el cielo se lee continuo al cruzar la
 * barra. Se acepta que sea un plano en vez de tres: a 94px de alto la
 * profundidad no se aprecia y el coste de tres capas más no compensa.
 */
.c4n-nav::after {
  --c4n-star-tile: 170px;
  position: absolute;
  z-index: 0;
  top: calc(-1 * var(--c4n-star-tile));
  right: 0;
  left: 0;
  height: calc(100% + var(--c4n-star-tile) * 2);
  background-image:
    radial-gradient(circle at 18px 26px, rgba(244, 239, 231, 0.5) 0 0.9px, transparent 1.4px),
    radial-gradient(circle at 74px 9px, rgba(244, 239, 231, 0.34) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 129px 58px, rgba(175, 190, 194, 0.46) 0 0.9px, transparent 1.4px),
    radial-gradient(circle at 46px 96px, rgba(244, 239, 231, 0.3) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 152px 134px, rgba(95, 125, 255, 0.4) 0 0.9px, transparent 1.4px),
    radial-gradient(circle at 96px 152px, rgba(244, 239, 231, 0.38) 0 0.8px, transparent 1.3px);
  background-repeat: repeat;
  background-size: var(--c4n-star-tile) var(--c4n-star-tile);
  content: "";
  opacity: 0.72;
  /* Recorta el sobrante de arriba y de abajo al alto exacto de la barra, sin
     `overflow: hidden` en el nav: ese sí habría cortado el menú desplegable
     móvil, que es `absolute; top: 100%` y vive fuera de la caja. `clip-path`
     recorta el pseudoelemento y nada más. */
  clip-path: inset(var(--c4n-star-tile) 0);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: c4n-drift-far 45s linear infinite;
}

/* Los hijos del nav por encima de sus estrellas. Sin esto, con el `::after`
   posicionado y los hijos en flujo, el pseudoelemento se pintaría encima de
   los logos: los posicionados ganan a los estáticos dentro del mismo nivel. */
.c4n-nav > * {
  position: relative;
  z-index: 1;
}

.c4n-lockup {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 0.65rem;
  color: var(--c4n-ivory);
  line-height: 1;
  white-space: nowrap;
}

/* El primer hijo del lockup es el <img> del logo, no un <span>: la regla que
   había aquí venía del lockup de texto que se sustituyó por los logos reales y
   no casaba con nada. El separador "×" es el segundo hijo y ese sí existe. */
.c4n-lockup > span:nth-child(2) {
  color: #819398;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}

/* Real WSO2 wordmark, recoloured to ivory. Alpha carries the shape. */
.c4n-lockup__c4n,
.c4n-lockup__wso2 {
  width: auto;
  flex: 0 0 auto;
}

/* Misma altura de caja para las dos marcas: son socias y deben ocupar la misma
   banda vertical. Antes iban a 1.55 y 1.05rem, que igualaba la altura de las
   letras -- el wordmark de 4N son dos líneas y el de WSO2 una -- pero dejaba la
   huella de WSO2 visiblemente menor. */
.c4n-lockup__c4n,
.c4n-lockup__wso2 {
  height: 1.55rem;
}

.c4n-nav__menu {
  margin-left: auto;
}

.c4n-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.7vw, 2.75rem);
}

.c4n-nav__links a,
.c4n-nav__registration,
.c4n-nav__toggle {
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  color: var(--c4n-smoke);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    transform 140ms var(--c4n-ease-out);
}

.c4n-nav__links a {
  display: inline-flex;
}

.c4n-nav__registration {
  display: inline-flex;
  min-width: 7.75rem;
  margin-left: clamp(1.25rem, 2.75vw, 2.75rem);
  padding: 0.8rem 1rem;
  border: var(--c4n-rule) solid var(--c4n-orange);
  border-radius: 0.125rem;
  color: #ff9a6d;
}

.c4n-nav__toggle {
  display: none;
  padding: 0.75rem;
  border: var(--c4n-rule) solid var(--c4n-line);
  border-radius: 0.125rem;
  background: transparent;
  cursor: pointer;
}

.c4n-nav__toggle:active,
.c4n-nav__registration:active {
  transform: scale(0.97);
}

.c4n-hero {
  position: relative;
  display: grid;
  width: 100%;
  /* Una pantalla exacta. El comentario anterior justificaba `88svh` para que
     la sección siguiente asomara por debajo como pista de que había más; ahora
     que todas las secciones miden pantalla, la pista la dan las estrellas
     moviéndose y el hero cierra donde cierra la ventana. */
  min-height: 100svh;
  padding:
    calc(var(--c4n-header-h) + env(safe-area-inset-top, 0px) + 1.5rem)
    var(--c4n-frame)
    var(--c4n-section-y);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
}

.c4n-hero::before,
.c4n-hero::after {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.c4n-hero::before {
  top: 1rem;
  right: 4%;
  width: min(55vw, 48rem);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(241, 78, 35, 0.1), transparent 68%);
}

.c4n-hero::after {
  top: -9rem;
  left: 37%;
  width: min(58vw, 52rem);
  aspect-ratio: 1.7;
  background: radial-gradient(ellipse, rgba(95, 125, 255, 0.07), transparent 70%);
}

.c4n-hero__copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  grid-column: 1 / span 7;
  align-self: center;
}

.c4n-hero__eyebrow {
  color: var(--c4n-blue-ink);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  line-height: 1.3;
}

.c4n-hero h1 {
  max-width: 7.2em;
  margin-top: clamp(1rem, 2vh, 1.85rem);
  color: var(--c4n-ivory);
  font-family: "Heading Now", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  /*
   * El titular cede con la altura, no solo con el ancho.
   *
   * Antes escalaba con `6.45vw`, y en un portátil de 1280x720 daba 72px: dos
   * líneas de 199px en una pantalla de 633, la pieza que hacía que el hero no
   * cupiera. El `min()` toma el más pequeño de los dos ejes, así que en
   * pantallas anchas y bajas es la altura la que frena al titular. El suelo
   * baja de 4.25rem a 3.5rem por la misma razón; el techo no cambia.
   */
  font-size: clamp(3.5rem, min(6.45vw, 10.5vh), 5.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  text-wrap: balance;
}

/*
 * Una frase por línea y ninguna se parte: «El perímetro / ya no es la red, /
 * es la identidad.». Antes el navegador cortaba donde cupiera y dejaba
 * «ya no es / la red,», que separa la idea a la mitad. El tamaño del titular
 * está calculado para que la frase más larga quepa en cada pantalla (ver las
 * reglas de .c4n-hero h1 en los cortes de abajo).
 */
.c4n-hero h1 .c4n-hero__line {
  display: block;
  white-space: nowrap;
}

.c4n-hero__orange {
  display: inline;
  color: var(--c4n-orange);
  font-style: italic;
  font-weight: 400;
}

/* Más grande que antes (18 → ~23px en una laptop): es la frase que dice para
   quién es el encuentro, y a 18px se leía como letra pequeña junto a un
   titular de 72. `balance` reparte las dos líneas a partes iguales. */
.c4n-hero__lead {
  position: relative;
  max-width: 36ch;
  text-wrap: balance;
  /* Sin el `padding-top` de 23px que había aquí: era el sitio del guion naranja
     de 4rem, retirado con el resto de líneas horizontales. Quedaba un hueco
     sosteniendo nada. */
  margin-top: clamp(1.25rem, 2.4vh, 2.25rem);
  color: var(--c4n-smoke);
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.5;
}


.c4n-button {
  display: inline-flex;
  min-height: 3.5rem;
  /* Side padding yields to the viewport so the label keeps its box under
     200% text zoom. */
  padding: 0.95rem min(1.4rem, 6vw);
  align-items: center;
  justify-content: center;
  border: var(--c4n-rule) solid transparent;
  border-radius: 0.125rem;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    opacity 160ms ease,
    transform 140ms var(--c4n-ease-out);
}

.c4n-button:active {
  transform: scale(0.97);
}

.c4n-button--primary {
  min-width: min(100%, 15.5rem);
  margin-top: var(--c4n-group-gap);
  background: var(--c4n-orange);
  color: #190b06;
}

.c4n-button--primary::after,
.c4n-button--secondary::after {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  margin-left: 0.65rem;
  background-color: currentColor;
  content: "";
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h15"/><path d="m13 6 6 6-6 6"/></svg>');
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.c4n-hero__axes,
.c4n-hero__event-data,
.c4n-hero__statement {
  font-variant-numeric: tabular-nums;
}

.c4n-hero__axes {
  max-width: 75ch;
  /* Un solo separador. Llevaba `margin-top` y `padding-top` encadenados (el
     padding era el hueco de la línea naranja que se retiró) y entre los dos
     sumaban 42px: el espacio más grande del hero, entre dos textos de 14px. */
  margin-top: var(--c4n-block-gap);
  color: #9fb3b8;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.7;
}

.c4n-hero__event-data {
  max-width: 75ch;
  margin-top: var(--c4n-pair-gap);
  color: #dbe7e7;
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: 0.005em;
  line-height: 1.6;
}

.c4n-hero__statement {
  max-width: 75ch;
  margin-top: var(--c4n-group-gap);
  color: var(--c4n-blue-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.6;
}

/* Full-bleed distillery photograph. The scrim is heavier on the left so the
   copy keeps its contrast while the copper stills stay legible on the right. */
.c4n-hero__backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  /* La foto se disuelve en el último tramo en vez de cortarse en seco. Sin esto
     el borde inferior del hero era una línea a todo lo ancho -- no dibujada,
     pero línea: la textura del grano acabando de golpe contra un fondo liso. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
  pointer-events: none;
}

.c4n-hero__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 44%;
  filter: saturate(1.04) contrast(1.02);
}

.c4n-hero__backdrop::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(3, 10, 18, 0.82) 0%,
      rgba(3, 10, 18, 0.58) 34%,
      rgba(4, 13, 22, 0.2) 58%,
      rgba(5, 17, 29, 0) 100%
    ),
    linear-gradient(180deg, rgba(3, 10, 18, 0.72) 0%, transparent 26%, rgba(3, 10, 18, 0.8) 100%);
  content: "";
}

/*
 * CIELO NOCTURNO
 *
 * Tres mosaicos de estrellas que derivan a velocidades distintas. La ilusión de
 * profundidad no viene del tamaño de los puntos, viene de que el plano de fondo
 * recorre 3,8 px por segundo y el de delante 13: el paralaje es la diferencia.
 *
 * Las duraciones son el mando de velocidad, y lo que hay que conservar al
 * tocarlas es la proporción 1 : 1,8 : 3,6 entre los tres planos. Si se igualan,
 * los tres se mueven en bloque y el cielo pasa de tener profundidad a parecer
 * una calcomanía deslizándose.
 *
 *   far   170px / 45s  =  3,8 px/s
 *   mid   184px / 27s  =  6,8 px/s   (130px en diagonal)
 *   near  424px / 32s  = 13,3 px/s   (300px en diagonal)
 *
 * El bucle es exacto y no se nota la costura. Cada plano desplaza justo la
 * medida de su mosaico, y como el fondo se repite cada esa misma medida, el
 * fotograma final es idéntico al primero. Por eso los @keyframes llevan el píxel
 * escrito a mano en vez de un porcentaje: un 100% dependería del alto del
 * contenedor y la repetición dejaría de cuadrar en cuanto cambiara.
 *
 * Solo se animan `transform` y `opacity`, así que el trabajo vive en el
 * compositor y no toca ni layout ni paint.
 */
/*
 * Fija al viewport y por encima de los fondos de sección.
 *
 * `z-index: 6` es deliberado: el máximo de las secciones es el 4 de
 * .c4n-registration y la cabecera va en 800, así que el cielo queda por encima
 * de todos los fondos opacos y por debajo de la navegación. Sin `fixed` no se
 * vería en ninguna sección, porque cada una pinta su propio fondo opaco encima.
 */
/*
 * `mix-blend-mode: screen` es lo que hace que esto funcione sobre fotografía.
 *
 * Con opacidad normal, un punto claro encima de un alambique iluminado se lee
 * como una mota de polvo en la imagen. En `screen` la estrella suma luz en vez
 * de taparla: sobre una zona ya clara apenas cambia nada, y sobre el cielo
 * oscuro destaca. Es el comportamiento físico de una fuente de luz, y resuelve
 * de una vez el problema en las cuatro secciones con foto, cada una con su
 * propio velo y su propio brillo.
 */
.c4n-stars {
  position: fixed;
  /*
   * Por debajo del contenido, por encima de los fondos. Con `z-index: 6` el
   * cielo quedaba encima de todo lo que no tuviera capa propia: sobre los
   * campos del formulario y sobre las fotos de la galería las estrellas se
   * leían como polvo en el cristal. Las secciones van del 2 al 4, así que en
   * 1 el cielo pasa por detrás de ellas y solo asoma donde su fondo lo deja.
   *
   * Eso obliga a que los fondos de sección sean translúcidos, que ya lo son:
   * quedaron en solo-resplandor al quitar las bases opacas para eliminar las
   * costuras. Las dos decisiones se sostienen la una a la otra.
   */
  z-index: 1;
  inset: 0;
  overflow: hidden;
  opacity: 0.72;
  mix-blend-mode: screen;
  pointer-events: none;
}

/*
 * El plano sobresale un mosaico por cada lado. Al derivar en diagonal el borde
 * que se vacía es el de arriba y el de la izquierda, y ese margen lo cubre.
 */
.c4n-stars__layer {
  position: absolute;
  top: calc(-1 * var(--c4n-star-tile));
  left: calc(-1 * var(--c4n-star-tile));
  display: block;
  width: calc(100% + var(--c4n-star-tile) * 2);
  height: calc(100% + var(--c4n-star-tile) * 2);
  background-repeat: repeat;
  background-size: var(--c4n-star-tile) var(--c4n-star-tile);
}

/* Fondo: muchas estrellas, pequeñas y apagadas, prácticamente quietas. */
.c4n-stars__layer--far {
  --c4n-star-tile: 170px;
  background-image:
    radial-gradient(circle at 18px 26px, rgba(244, 239, 231, 0.5) 0 0.9px, transparent 1.4px),
    radial-gradient(circle at 74px 9px, rgba(244, 239, 231, 0.34) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 129px 58px, rgba(175, 190, 194, 0.46) 0 0.9px, transparent 1.4px),
    radial-gradient(circle at 46px 96px, rgba(244, 239, 231, 0.3) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 152px 134px, rgba(95, 125, 255, 0.4) 0 0.9px, transparent 1.4px),
    radial-gradient(circle at 96px 152px, rgba(244, 239, 231, 0.38) 0 0.8px, transparent 1.3px);
  animation: c4n-drift-far 45s linear infinite;
}

/* Medio: menos estrellas, algo más brillantes, deriva en diagonal. */
.c4n-stars__layer--mid {
  --c4n-star-tile: 130px;
  background-image:
    radial-gradient(circle at 30px 20px, rgba(244, 239, 231, 0.72) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 104px 62px, rgba(95, 125, 255, 0.6) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 62px 108px, rgba(244, 239, 231, 0.6) 0 1px, transparent 1.6px);
  animation: c4n-drift-mid 27s linear infinite;
}

/*
 * Primer plano: pocas y nítidas, con una sola brasa naranja por mosaico para
 * amarrar el cielo a la paleta de marca sin que parezca un error de color.
 */
.c4n-stars__layer--near {
  --c4n-star-tile: 300px;
  background-image:
    radial-gradient(circle at 58px 44px, rgba(244, 239, 231, 0.8) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 232px 186px, rgba(241, 78, 35, 0.6) 0 1.5px, transparent 2.4px),
    radial-gradient(circle at 148px 268px, rgba(244, 239, 231, 0.68) 0 1.3px, transparent 2.1px);
  animation: c4n-drift-near 32s linear infinite;
}

@keyframes c4n-drift-far {
  to {
    transform: translate3d(0, -170px, 0);
  }
}

@keyframes c4n-drift-mid {
  to {
    transform: translate3d(-130px, -130px, 0);
  }
}

@keyframes c4n-drift-near {
  to {
    transform: translate3d(-300px, -300px, 0);
  }
}

/*
 * CUENTA REGRESIVA — arriba a la derecha del hero
 *
 * Los dígitos cambian sin animación, y es una decisión, no un olvido. El
 * segundero se mueve 86 400 veces al día: cualquier transición ahí se convierte
 * en un parpadeo perpetuo en la periferia de la vista, y el número que cambia ya
 * comunica por sí solo que la cuenta está viva. Lo que sí se anima es la entrada,
 * que cada visitante ve una vez.
 *
 * Sin recuadro ni fondo: la legibilidad sobre la fotografía la da el
 * `text-shadow` de las cifras. Una tarjeta encima de la foto habría vuelto a
 * partir la página en piezas, que es justo lo que se quería evitar.
 */
/* Cinco tramos y no cuatro: con las cifras a este cuerpo, «SEGUNDOS» debajo de
   un número de 62px necesita el ancho, y en cuatro tramos la fila se partía. La
   copia del hero ocupa del 1 al 7, así que del 8 al 12 está libre. */
.c4n-countdown {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1rem;
  grid-column: 8 / span 5;
  align-self: start;
  justify-items: end;
  text-align: right;
}

.c4n-countdown__title {
  margin: 0;
  color: var(--c4n-blue-ink);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  line-height: 1.3;
  text-shadow: 0 0.0625rem 0.75rem rgba(3, 10, 18, 0.92);
  text-transform: uppercase;
}

/* `flex-wrap` no es decorativo: las cuatro etiquetas miden distinto («SEGUNDOS»
   casi el doble que «DÍAS») y el ancho de los móviles es un rango, no un valor.
   Sin esto, en el teléfono más estrecho la fila desbordaría a lo ancho y se
   comería el scroll horizontal de la página; con esto, se parte en dos filas. */
.c4n-countdown__units {
  display: flex;
  margin: 0;
  padding: 0;
  gap: clamp(1rem, 2vw, 1.85rem);
  flex-wrap: wrap;
  justify-content: flex-end;
  list-style: none;
}

.c4n-countdown__unit {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
}

/*
 * `tabular-nums` es lo que impide que la fila se mueva: con cifras
 * proporcionales un 1 mide menos que un 8 y el ancho del bloque bailaba cada
 * segundo. El `min-width` cubre el resto -- el relleno a dos dígitos lo pintan
 * PHP y el script.
 */
/*
 * `tabular-nums` es lo que impide que la fila se mueva: con cifras
 * proporcionales un 1 mide menos que un 8 y el bloque bailaba cada segundo. El
 * `min-width` cubre el resto -- el relleno a dos dígitos lo pintan PHP y el
 * script.
 */
.c4n-countdown__value {
  min-width: 2ch;
  color: var(--c4n-ivory);
  font-family: "Heading Now", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.5rem, 4.2vw, 3.875rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
  /* La sombra crece con la cifra: a 62px sobre la fotografía, la anterior de
     1rem ya no bastaba para despegar el número del fondo. */
  text-shadow: 0 0.125rem 1.5rem rgba(3, 10, 18, 0.95), 0 0 0.5rem rgba(3, 10, 18, 0.9);
}

.c4n-countdown__label {
  color: var(--c4n-smoke);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-shadow: 0 0.0625rem 0.75rem rgba(3, 10, 18, 0.95);
  text-transform: uppercase;
}

.c4n-countdown__past {
  margin: 0;
  color: var(--c4n-ivory);
  font-family: "Heading Now", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-shadow: 0 0.125rem 1rem rgba(3, 10, 18, 0.95);
}

.c4n-countdown.is-past .c4n-countdown__units {
  display: none;
}

/*
 * Entrada de la banda, una sola vez y cuando entra en pantalla. El estado
 * visible es el de partida: si el observador no existe o el script no corre, la
 * cuenta ya está ahí y `both` nunca se aplica.
 */
.c4n-countdown.is-visible .c4n-countdown__unit {
  animation: c4n-rise-in 520ms var(--c4n-ease-out) both;
}

.c4n-countdown.is-visible .c4n-countdown__unit:nth-child(2) {
  animation-delay: 60ms;
}

.c4n-countdown.is-visible .c4n-countdown__unit:nth-child(3) {
  animation-delay: 120ms;
}

.c4n-countdown.is-visible .c4n-countdown__unit:nth-child(4) {
  animation-delay: 180ms;
}

/* The glass is the subject: identity nodes suspended in the gin. */

.c4n-registration,
.c4n-gallery-section,
.c4n-agenda,
.c4n-conversation,
.c4n-experience,
.c4n-footer {
  position: relative;
  width: 100%;
  padding-right: var(--c4n-frame);
  padding-left: var(--c4n-frame);
}

/*
 * La regla de la pantalla, en un solo sitio.
 *
 * `min-height` y no `height`: si en un monitor bajo el contenido no cabe, la
 * sección crece y se hace scroll dentro de ella, en vez de recortar el
 * formulario. `100svh` y no `100vh`: en móvil `vh` incluye la barra del
 * navegador que se esconde al bajar, y la sección medía más que la pantalla
 * visible; `svh` es la pantalla más pequeña posible, la que se ve siempre.
 *
 * `align-content: center` es lo que reparte el sobrante. Con padding fijo, a
 * 1080 de alto quedaba un vacío abajo y a 720 no cabía; centrando, el mismo
 * contenido se asienta en el medio en los dos casos.
 */
.c4n-registration,
.c4n-gallery-section,
.c4n-agenda,
.c4n-conversation,
.c4n-experience {
  min-height: 100svh;
  /*
   * El mismo padding arriba y abajo. La cabecera fija no se libra con padding
   * sino con el propio centrado: con `min-height` de pantalla y el contenido
   * en el medio, arriba quedan siempre más de 94px libres en cualquier monitor
   * desde 768 de alto, y el título nunca cae bajo la barra. Sumar la cabecera
   * al padding, que era lo que había, empujaba todo el contenido 94px hacia
   * abajo: 207px de aire arriba contra 141 abajo, y el formulario quedaba
   * visiblemente hundido. El único caso donde el título puede rozar la barra
   * es 1280x720, y ahí la sección ya crece y hace scroll.
   */
  padding-top: var(--c4n-section-y);
  padding-bottom: var(--c4n-section-y);
  align-content: center;
}

.c4n-registration {
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* Intro y formulario van lado a lado y se alinean por arriba: centrar el
     intro (3 líneas) contra el formulario (466px) lo dejaba flotando a media
     altura sin relación con nada. */
  gap: var(--c4n-group-gap) 2rem;
  align-items: start;
  /*
   * Solo los resplandores, sin base opaca.
   *
   * Antes cerraba con `linear-gradient(168deg, #0b1926 ...)`, un fondo propio y
   * opaco. Contra el casi negro de .c4n-agenda producía un escalón de tono a
   * todo lo ancho que se leía como una franja, aunque no hubiera ninguna línea
   * dibujada. Sin la base, el degradado de .c4n-event es el único fondo y la
   * página se lee de corrido. Mismo criterio en las otras cuatro secciones.
   */
  /*
   * Los centros van al interior de la sección, no pegados a sus bordes.
   *
   * Con el naranja centrado en `14% 0%` el resplandor empezaba a plena
   * intensidad exactamente en el borde superior, y como un fondo no se derrama
   * fuera de su caja, el borde quedaba marcado como una línea. Centrado hacia
   * dentro, el degradado llega a la costura ya transparente.
   */
  background:
    radial-gradient(ellipse 52rem 30rem at 14% 34%, rgba(241, 78, 35, 0.16), transparent 66%),
    radial-gradient(ellipse 40rem 26rem at 88% 66%, rgba(14, 47, 194, 0.12), transparent 70%);
  color: var(--c4n-ivory);
}

/* Sin `grid-row` a propósito: la galería pasó a ser una fila propia a los doce
   tramos, así que si el intro siguiera abarcando dos filas se le montaría
   encima. Ya no hace falta el span -- lo pedía la foto vertical que vivía en
   esta columna y que ahora está abajo. */
.c4n-registration__intro {
  display: flex;
  min-width: 0;
  grid-column: 1 / span 4;
  flex-direction: column;
}

/*
 * El vídeo bajo el título, a todo el ancho de la columna del intro. Su alto
 * viene de la proporción del clip (16:9 → 720x406), no de un valor fijo: así
 * en las cuatro columnas de escritorio mide ~220px y no compite con el
 * formulario de al lado, y en móvil a todo el ancho crece con él.
 *
 * El póster está escalado igual que el vídeo (`object-fit: cover` en ambos),
 * así que el paso de póster a primer fotograma no salta ni un píxel.
 */
.c4n-registration__media {
  margin-top: var(--c4n-block-gap);
  overflow: hidden;
  border-radius: 0.1875rem;
  background: var(--c4n-ink);
  aspect-ratio: 16 / 9;
}

.c4n-registration__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Un poco de velo para que las luces de la barra no compitan con el título
     que tiene encima: es ambiente, tiene que quedarse detrás del texto. */
  filter: brightness(0.86) saturate(1.05);
}

.c4n-registration .c4n-section-header {
  flex: 0 0 auto;
}

/*
 * SECCIÓN GALERÍA — MOSAICO EDITORIAL
 *
 * Una protagonista a toda la altura (7 tramos) y una retícula 2x2 (5 tramos).
 * La cabecera va en línea sobre el mosaico, no en una columna: así el mosaico
 * dispone de todo el ancho y de casi todo el alto.
 *
 * DIMENSIONADO. El alto del mosaico es lo que queda de la pantalla tras la
 * cabecera de sección y los paddings: `100svh - padding*2 - cabecera - hueco`.
 * Con eso las fotos ocupan ~88% del alto útil (antes 59%). Es un `height`, no
 * un `min-height`: el mosaico debe llenar exactamente lo que hay, y las fotos
 * se recortan con `object-fit: cover` para ajustarse al hueco, que es lo que
 * hace posible mezclar retratos en huecos de distinta proporción.
 */
.c4n-gallery-section {
  --c4n-mosaic-gap: clamp(0.5rem, 0.9vw, 0.85rem);
  z-index: 3;
  display: grid;
  isolation: isolate;
  /*
   * Aquí el padding de arriba SÍ libra la cabecera fija, al revés que en las
   * demás secciones. En las otras el contenido está centrado y sobra aire por
   * arriba; aquí el mosaico llena todo lo que hay y la cabecera de sección
   * arranca en el primer píxel útil -- en la captura «El laboratorio» quedaba
   * detrás de la barra. Como el alto del mosaico se calcula restando este
   * padding, la sección sigue midiendo exactamente una pantalla.
   */
  padding-top: calc(var(--c4n-header-h) + 1rem);
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: var(--c4n-section-lead);
  background: radial-gradient(ellipse 44rem 30rem at 84% 50%, rgba(95, 125, 255, 0.1), transparent 70%);
}

/* Título y línea en la misma fila, título a la izquierda y línea a la derecha,
   alineados por la base. Es la cabecera más compacta de la página porque la
   sección es de las fotos, no del texto. */
.c4n-gallery-section__header {
  display: flex;
  /* `flex-end` y no `baseline`: con un título de 67px y una línea de 27, la
     alineación por base de línea estiraba la cabecera a 92px. Alineados por
     abajo miden lo que el título, y la línea se asienta sobre el mismo suelo. */
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.c4n-gallery-section__header h2 {
  font-size: clamp(2.25rem, min(3.6vw, 6vh), 3.25rem);
}

/* `flex: 1` con `min-width: 24ch` es lo que impide que la línea se parta en dos
   («...que te espera / en Purificación.») y engorde la cabecera a 92px, que era
   lo que sacaba la sección de la pantalla. Un `white-space: nowrap` habría
   desbordado en anchos medios; el mínimo en `ch` deja que la línea sea larga
   donde cabe y baje entera, no partida, donde no. */
.c4n-gallery-section__header > p:not(.c4n-section-header__statement) {
  /* Sin el techo de 42ch de la regla base: aquí la línea va a la derecha del
     título y tiene 800px libres; con el techo se partía en dos aunque sobrara
     sitio. `nowrap` es seguro porque `flex-wrap` en el padre hace que, si de
     verdad no cabe, la línea baje entera bajo el título en vez de desbordar. */
  max-width: none;
  min-width: 0;
  margin-top: 0;
  flex: 0 1 auto;
  text-align: right;
  white-space: nowrap;
}

/*
 * El alto del mosaico es lo que queda de la pantalla tras el padding de la
 * cabecera fija, el padding inferior, la cabecera de sección (una línea de
 * 3.25rem como máximo) y el hueco entre ambas. Cada término es una medida
 * real, no una estimación: si uno de los cuatro cambia arriba, esto se
 * recalcula solo.
 */
.c4n-mosaic {
  display: grid;
  min-height: 0;
  height: calc(100svh - var(--c4n-header-h) - 1rem - var(--c4n-section-y) - var(--c4n-section-lead) - 4.25rem);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--c4n-mosaic-gap);
}

.c4n-mosaic__slot {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 0.1875rem;
  background: var(--c4n-ink);
  /*
   * Entrada: revelado de abajo arriba con clip-path, escalonado por hueco. El
   * estado de partida es la foto entera; `is-entered` es lo que dispara la
   * animación, y como el estado final es idéntico al de partida, si el script
   * no corre la galería está igualmente completa.
   */
  clip-path: inset(0 0 0 0);
}

.c4n-mosaic__slot--lead {
  grid-column: 1 / span 7;
  grid-row: 1 / span 2;
}

/*
 * Los cuatro huecos pequeños en la retícula 2x2 de la derecha (tramos 8-12).
 * Cinco tramos no se parten en dos iguales, así que la retícula es 3 + 2 con
 * los anchos cruzados por fila: el ancho arriba a la izquierda, abajo a la
 * derecha. El cruce evita que la retícula parezca una tabla y da al conjunto
 * el ritmo de una doble página editorial.
 */
.c4n-mosaic__slot[data-c4n-mosaic-slot="1"] { grid-column: 8 / span 3; grid-row: 1; }
.c4n-mosaic__slot[data-c4n-mosaic-slot="2"] { grid-column: 11 / span 2; grid-row: 1; }
.c4n-mosaic__slot[data-c4n-mosaic-slot="3"] { grid-column: 8 / span 2; grid-row: 2; }
.c4n-mosaic__slot[data-c4n-mosaic-slot="4"] { grid-column: 10 / span 3; grid-row: 2; }

/*
 * Dos capas de imagen por hueco, superpuestas. La que lleva `is-current` está
 * a la vista; la otra recibe la foto siguiente y las dos intercambian papel con
 * un fundido cruzado. Es lo que permite el crossfade sin parpadeo: la nueva ya
 * está cargada y pintada debajo antes de que la vieja empiece a desvanecerse.
 *
 * El `filter: blur` en la capa que sale es la técnica para que un crossfade no
 * se lea como dos fotos superpuestas: el desenfoque funde los bordes de ambas y
 * el ojo percibe una transformación, no un intercambio. 4px, no más: por
 * encima se nota como efecto y, en Safari, se paga.
 */
.c4n-mosaic__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  opacity: 0;
  filter: blur(4px);
  transform: scale(1.03);
  /* 600ms, en sintonía con los 2,2s del intervalo: el fundido debe haber
     terminado con margen antes de que arranque el siguiente cambio. */
  transition:
    opacity 600ms var(--c4n-ease-out),
    filter 600ms var(--c4n-ease-out),
    transform 600ms var(--c4n-ease-out);
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.c4n-mosaic__img.is-current {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* Pie sobre un velo, solo en la protagonista: en los huecos pequeños el texto
   competiría con la foto y a ese tamaño no se lee bien. */
.c4n-mosaic__caption {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 3rem 1.25rem 1.1rem;
  background: linear-gradient(180deg, transparent 0%, rgba(3, 10, 18, 0.72) 48%, rgba(3, 10, 18, 0.92) 100%);
  color: var(--c4n-ivory);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
  opacity: 1;
  transition: opacity 320ms var(--c4n-ease-out);
}

.c4n-mosaic__slot:not(.c4n-mosaic__slot--lead) .c4n-mosaic__caption {
  display: none;
}

/* Mientras cambia la foto el pie se apaga y vuelve con el texto nuevo: un pie
   que cambia de golpe en mitad del fundido delata el truco. */
.c4n-mosaic__slot.is-swapping .c4n-mosaic__caption {
  opacity: 0;
  transition-duration: 180ms;
}

/*
 * ENTRADA. Cada hueco se revela de abajo arriba con 70ms de desfase, empezando
 * por la protagonista. `both` es seguro porque el estado final coincide con el
 * de reposo. La curva es la de UI del sitio, no linear: esto es una entrada,
 * y las entradas arrancan rápido y frenan.
 */
/* El mosaico tiene su propia coreografía, así que se libra de la entrada
   genérica de sección: si no, el contenedor subiría y se fundiría a la vez que
   cada hueco se revela, y dos animaciones encimadas se leen como un temblor.
   La cabecera de la sección sí conserva la entrada genérica. */
.c4n-gallery-section.is-entered > .c4n-mosaic {
  animation: none;
}

.c4n-gallery-section.is-entered .c4n-mosaic__slot {
  animation: c4n-mosaic-reveal 640ms var(--c4n-ease-out) both;
}

.c4n-gallery-section.is-entered .c4n-mosaic__slot[data-c4n-mosaic-slot="1"] { animation-delay: 70ms; }
.c4n-gallery-section.is-entered .c4n-mosaic__slot[data-c4n-mosaic-slot="2"] { animation-delay: 140ms; }
.c4n-gallery-section.is-entered .c4n-mosaic__slot[data-c4n-mosaic-slot="3"] { animation-delay: 210ms; }
.c4n-gallery-section.is-entered .c4n-mosaic__slot[data-c4n-mosaic-slot="4"] { animation-delay: 280ms; }

@keyframes c4n-mosaic-reveal {
  from {
    clip-path: inset(100% 0 0 0);
    transform: translateY(0.75rem);
  }

  to {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

/*
 * AVISO DE PRIVACIDAD (modal)
 *
 * <dialog> nativo. Lo que sigue solo lo viste: la mecánica (bloqueo de la
 * página, foco atrapado, Escape) la trae el elemento.
 *
 * El panel está centrado y limitado a 40rem de ancho y 85svh de alto, con el
 * cuerpo desplazable por dentro: un aviso legal es largo, y hacer scroll en la
 * página con el modal abierto es lo que hay que evitar. Sin borde ni línea:
 * la separación con el fondo la dan el velo oscuro de `::backdrop` y la sombra.
 */
.c4n-privacy {
  width: min(40rem, calc(100vw - 2rem));
  max-height: min(85svh, 52rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: #071623;
  color: var(--c4n-ivory);
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.55);
  /* Entrada: aparece un paso por debajo de su sitio y sube. Nunca desde
     scale(0). 220ms, en el rango de un modal, con la curva de UI del sitio. */
  opacity: 0;
  transform: translateY(0.75rem) scale(0.98);
  transition:
    opacity 220ms var(--c4n-ease-out),
    transform 220ms var(--c4n-ease-out),
    overlay 220ms allow-discrete,
    display 220ms allow-discrete;
}

.c4n-privacy[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* El estado de partida de la entrada, para que la transición tenga desde dónde
   arrancar cuando el diálogo pasa de display:none a abierto. */
@starting-style {
  .c4n-privacy[open] {
    opacity: 0;
    transform: translateY(0.75rem) scale(0.98);
  }
}

.c4n-privacy::backdrop {
  background: rgba(3, 10, 18, 0.72);
  -webkit-backdrop-filter: blur(0.375rem);
  backdrop-filter: blur(0.375rem);
  opacity: 0;
  transition:
    opacity 220ms var(--c4n-ease-out),
    overlay 220ms allow-discrete,
    display 220ms allow-discrete;
}

.c4n-privacy[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .c4n-privacy[open]::backdrop {
    opacity: 0;
  }
}

/*
 * Sin JavaScript el enlace lleva a #c4n-privacy. Un <dialog> cerrado es
 * display:none y el salto no mostraría nada, así que cuando es el destino del
 * ancla (y no está abierto como modal) se pinta como un bloque normal al final
 * de la página, a todo el ancho de lectura.
 */
.c4n-privacy:target:not([open]) {
  display: block;
  position: static;
  width: min(44rem, 100% - 2rem);
  max-height: none;
  margin: 2rem auto;
  opacity: 1;
  transform: none;
}

/* La página no se desplaza por debajo del modal. La clase la pone y quita el
   script al abrir y cerrar; `scrollbar-gutter` evita el salto de 15px del
   contenido cuando la barra de scroll desaparece en escritorio. */
/*
 * Sin `scrollbar-gutter: stable` a propósito. Reservar el hueco de la barra
 * evita que la página salte al bloquear el scroll, pero ese hueco se le suma
 * al viewport del diálogo por la derecha y lo descentraba 15px (393 a la
 * izquierda contra 408, medido). Entre un salto de 15px en el fondo -- que
 * además queda oscurecido y desenfocado por el velo -- y un modal torcido,
 * la elección es clara. El diálogo queda centrado de verdad.
 */
html.c4n-has-dialog {
  overflow: hidden;
}

.c4n-privacy__panel {
  display: grid;
  max-height: inherit;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.c4n-privacy__header {
  position: relative;
  padding: 1.75rem 4rem 1.25rem 2rem;
}

.c4n-privacy__eyebrow {
  color: var(--c4n-orange);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  line-height: 1.3;
  text-transform: uppercase;
}

.c4n-privacy__header h2 {
  margin-top: 0.5rem;
  color: var(--c4n-ivory);
  font-family: "Heading Now", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* 44px de área de toque, aunque la «×» mida 20. */
.c4n-privacy__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c4n-smoke);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition:
    color 160ms ease,
    background-color 160ms ease,
    transform 160ms var(--c4n-ease-out);
}

.c4n-privacy__close:active {
  transform: scale(0.94);
}

.c4n-privacy__close:focus-visible {
  outline: 0.1875rem solid var(--c4n-blue-ink);
  outline-offset: 0.125rem;
}

/*
 * Cuerpo desplazable. El degradado de arriba y abajo se pinta con máscara y
 * dice «hay más» sin dibujar una línea; desaparece al llegar al final porque
 * la máscara es del contenedor, no del contenido.
 */
.c4n-privacy__body {
  min-height: 0;
  padding: 0 2rem 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #c4d0d2;
  font-size: 0.9375rem;
  line-height: 1.7;
  scrollbar-color: rgba(175, 190, 194, 0.35) transparent;
  scrollbar-width: thin;
}

.c4n-privacy__body h3 {
  margin-top: 1.6rem;
  color: var(--c4n-ivory);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.c4n-privacy__body p,
.c4n-privacy__body ul {
  margin-top: 0.6rem;
}

/* El reset global quita las viñetas de todas las listas de la página, y en la
   captura las finalidades salían como párrafos sueltos: una lista legal sin
   viñetas se lee como texto corrido. Se devuelven, en el naranja de marca. */
.c4n-privacy__body ul {
  padding-left: 1.2rem;
  list-style: disc;
}

.c4n-privacy__body li::marker {
  color: var(--c4n-orange);
}

.c4n-privacy__body li + li {
  margin-top: 0.3rem;
}

.c4n-privacy__body strong {
  color: var(--c4n-ivory);
  font-weight: 700;
}

.c4n-privacy__body a {
  color: var(--c4n-ivory);
  font-weight: 650;
  text-decoration-color: rgba(244, 239, 231, 0.45);
  text-underline-offset: 0.2em;
}

.c4n-privacy__lead {
  color: var(--c4n-ivory);
  font-size: 1rem;
}

.c4n-privacy__meta {
  margin-top: 1.75rem;
  color: var(--c4n-smoke);
  font-size: 0.8125rem;
}

.c4n-privacy__footer {
  padding: 1.25rem 2rem 1.75rem;
}

.c4n-privacy__footer .c4n-button {
  width: 100%;
}

/* Sin la flecha del botón primario: la flecha dice «vas a algún sitio», y
   «Entendido» cierra y te deja donde estabas. */
.c4n-privacy__footer .c4n-button::after {
  display: none;
}

/*
 * CAMBIO DE SECCIÓN
 *
 * El contenido de cada sección sube al entrar. Se dispara con scroll libre y se
 * repite al llegar por un enlace del menú, que es donde más falta hace: al
 * saltar por un ancla el lector aterriza sin recorrido y pierde la referencia de
 * dónde está. La entrada es lo que le dice «has llegado a otra sección».
 *
 * El gate es `.is-entered`, una clase que pone el script. Ese orden importa: el
 * estado de partida es el contenido visible, y la animación es lo que se añade
 * encima. Al contrario -- contenido oculto que el script revela -- cualquier
 * fallo del observador deja media página en blanco, que es exactamente el modo
 * de fallo por el que retiré el reveal de la galería.
 *
 * Se excluyen los hijos con `aria-hidden`: son los `__backdrop`, fotografías
 * absolutas que llenan la sección entera. Moverlas habría desplazado el fondo
 * junto al texto y delatado el truco.
 */
[data-c4n-section].is-entered > *:not([aria-hidden="true"]) {
  animation: c4n-section-in 520ms var(--c4n-ease-out) both;
}

[data-c4n-section].is-entered > *:not([aria-hidden="true"]):nth-child(2) {
  animation-delay: 70ms;
}

[data-c4n-section].is-entered > *:not([aria-hidden="true"]):nth-child(3) {
  animation-delay: 140ms;
}

[data-c4n-section].is-entered > *:not([aria-hidden="true"]):nth-child(4) {
  animation-delay: 210ms;
}

[data-c4n-section].is-entered > *:not([aria-hidden="true"]):nth-child(n + 5) {
  animation-delay: 280ms;
}

/* Más recorrido que la entrada del hero (0.75rem): aquí el gesto tiene que
   leerse como un cambio de sección, no como un asentamiento. */
@keyframes c4n-section-in {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.c4n-section-header h2 {
  max-width: 15ch;
  color: var(--c4n-ivory);
  font-family: "Heading Now", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  /* Misma regla que el H1 del hero: el titular cede con el eje más corto. A
     `5.2vw` medía 71px en un portátil de 1366x768, y ese cuerpo era lo que
     sacaba agenda, conversación y experiencia de la pantalla -- no el aire. */
  font-size: clamp(2.75rem, min(5.2vw, 8.4vh), 4.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

.c4n-registration .c4n-section-header h2 {
  color: var(--c4n-ivory);
}

.c4n-section-header > p:not(.c4n-section-header__statement) {
  max-width: 42ch;
  margin-top: 1.35rem;
  color: var(--c4n-smoke);
  font-size: 1rem;
  line-height: 1.66;
}

.c4n-section-header__statement {
  max-width: 34ch;
  margin-top: 1.5rem;
  color: var(--c4n-blue-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.5;
}

.c4n-registration__status,
.c4n-registration__unavailable {
  grid-column: 5 / -1;
  padding: 1.25rem 1.4rem;
  border: var(--c4n-rule) solid var(--c4n-line);
  border-radius: 0.125rem;
  background: rgba(5, 17, 29, 0.58);
}

/* Not stretch: the row is as tall as the intro column, so the panel grew to
   591px and left 380px of empty space inside a red border. */
.c4n-registration__status {
  align-self: start;
}

/*
 * Con el aviso visible, el intro abarca dos filas para que el aviso y el
 * formulario queden apilados a su derecha. Sin esto el formulario caía a una
 * segunda fila, debajo del vídeo, y dejaba media pantalla vacía entre el
 * mensaje de error y los campos que había que corregir. Solo aplica mientras
 * el aviso está visible: en reposo la maqueta no cambia.
 */
.c4n-registration:has(> .c4n-registration__status:not([hidden])) > .c4n-registration__intro {
  grid-row: 1 / span 2;
}

.c4n-registration__status[data-state="success"] {
  border-color: var(--c4n-success);
}

.c4n-registration__status[data-state="error"] {
  border-color: var(--c4n-error);
}

.c4n-registration__status h3,
.c4n-registration__unavailable p {
  color: var(--c4n-ivory);
  font-size: 1rem;
  font-weight: 800;
}

.c4n-registration__status > p,
.c4n-registration__status li {
  max-width: 58ch;
  margin-top: 0.4rem;
  color: var(--c4n-smoke);
  font-size: 0.875rem;
}

.c4n-registration__status ul {
  margin-top: 0.65rem;
  padding-left: 1.15rem;
  list-style: disc;
}

.c4n-registration__status li::marker {
  color: var(--c4n-error);
}

/* Six bold cyan links shouted louder than the panel title and turned the
   summary into the loudest block on the page. Ivory with a hairline underline
   still reads as a jump link. */
.c4n-registration__status a {
  color: var(--c4n-ivory);
  font-weight: 600;
  text-decoration-color: rgba(244, 239, 231, 0.42);
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.22em;
}

.c4n-registration__unavailable {
  align-self: start;
  border-style: dashed;
}

/*
 * El formulario crece con la pantalla en vez de flotar en ella.
 *
 * Medía 466px fijos: en un monitor de 1080 ocupaba el 47% de la sección y en
 * uno de 1440 el 34%, y el resto era vacío -- el «mucho aire» que se veía
 * entre la cabecera y los campos. El hueco entre filas y el alto de cada
 * campo escalan ahora con `vh`, con techo: a 1080 el formulario mide unos
 * 560px, a 1440 unos 640, y los campos nunca pasan de 4.25rem, que es donde
 * un input deja de parecer un input y empieza a parecer una caja.
 */
.c4n-registration__form {
  display: grid;
  min-width: 0;
  grid-column: 5 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vh, 3rem) clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.c4n-field {
  position: relative;
  display: grid;
  min-width: 0;
  row-gap: 0.4rem;
  align-content: start;
}

/* Son cinco campos en dos columnas: el quinto queda impar y emparejarlo con algo
   dejaba siempre una celda vacía. A todo el ancho la rejilla cierra y el
   formulario se lee en tres bloques: datos, consentimiento, acción. */
.c4n-field--wide {
  grid-column: 1 / -1;
}

.c4n-field label {
  color: #9fb3b8;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.4;
}

/* Caja cerrada, no una raya inferior. Con el filete de abajo y un lavado al 4%
   el campo se leía como un fantasma: había que cazar dónde hacer clic. El borde
   completo dice "aquí se escribe" sin que el ojo trabaje, que es lo que pide un
   formulario que se llena de prisa. */
.c4n-field input:not([type="checkbox"]):not([type="hidden"]) {
  width: 100%;
  min-height: clamp(3.4rem, 6.4vh, 4.25rem);
  padding: 0.75rem 0.95rem 0.7rem;
  border: var(--c4n-rule) solid rgba(175, 190, 194, 0.26);
  border-radius: 0.1875rem;
  outline-offset: 0.1875rem;
  /*
   * Fondo opaco sobre la tinta, no un velo. Al 5,5% de marfil el campo era
   * casi transparente y el cielo se veía a través: estrellas dentro de la
   * caja donde vas a escribir, que se leen como suciedad, no como cielo. Es
   * el mismo tono que resultaba antes sobre el fondo, pero sólido, así que el
   * campo no cambia de aspecto y las estrellas se quedan fuera.
   */
  background: #10202d;
  color: var(--c4n-ivory);
  /* 16px floor keeps iOS Safari from zooming the page on focus. */
  font-size: max(1rem, 16px);
  line-height: 1.25;
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
  appearance: none;
}

/* El anillo de foco ya es azul; teñir además el borde daba dos azules, uno
   dentro del otro. El borde se aclara y el fondo sube: el anillo manda. */
.c4n-field input:not([type="checkbox"]):not([type="hidden"]):focus-visible {
  border-color: rgba(175, 190, 194, 0.5);
  background: #142639;
}

/* The two gradients drew a red x inside the field, which read as a clear button
   next to an empty input. A rose wash over the navy only turned the field plum,
   so the state rides on the heavier rule at 6:1 plus the message below. */
/* Solo el color del borde. Con un inset de 1px encima el filete se veía de 2px y
   cinco cajas así gritaban; el borde a 6:1 más el mensaje de abajo ya no dejan
   duda de cuál campo falta. */
.c4n-field input[aria-invalid="true"]:not([type="checkbox"]):not([type="hidden"]) {
  border-color: var(--c4n-error);
}

.c4n-field input:-webkit-autofill,
.c4n-field input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0b1926 inset;
  -webkit-text-fill-color: var(--c4n-ivory);
  caret-color: var(--c4n-blue-ink);
}

.c4n-field__error {
  display: flex;
  margin-top: 0.15rem;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--c4n-error);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Texto de ayuda bajo el campo de cargo: qué hacer si el cargo propio no
   aparece. En humo, no en el rosa del error: es una indicación, no una queja. */
.c4n-field__hint {
  margin-top: 0.45rem;
  color: var(--c4n-smoke);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Si el campo tiene error, la ayuda sobra: el error ya dice qué hacer y dos
   textos bajo un mismo campo compiten. */
.c4n-field--role:has(.c4n-field__error:not([hidden])) .c4n-field__hint {
  display: none;
}

.c4n-field__error::before {
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  margin-top: 0.05rem;
  place-items: center;
  border: var(--c4n-rule) solid currentColor;
  border-radius: 50%;
  content: "!";
  font-size: 0.6875rem;
  font-weight: 900;
  line-height: 1;
}

/* A dos columnas: en la columna 2 dejaba una celda vacía de 100px al lado de
   "Celular", porque son cinco campos y el consentimiento hacía de sexto. Como
   fila propia el formulario se lee en tres bloques -- datos, consentimiento,
   acción -- que es el ritmo que espera quien llena esto en treinta segundos. */
.c4n-field--privacy {
  position: relative;
  display: grid;
  margin-top: 0.35rem;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem;
  align-items: start;
}

.c4n-field--privacy input[type="checkbox"] {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  margin: -0.0625rem;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Block, not flex: a flex container turns the runs around the inline link into
   anonymous items and eats the space before "aviso de privacidad". */
.c4n-field--privacy label {
  position: relative;
  display: block;
  min-height: 2.75rem;
  padding: 0.68rem 0 0.68rem 2rem;
  color: #c4d0d2;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 550;
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: none;
}

.c4n-field--privacy label::before,
.c4n-field--privacy label::after {
  position: absolute;
  top: 50%;
  content: "";
}

.c4n-field--privacy label::before {
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  transform: translateY(-50%);
  border: 0.09375rem solid rgba(175, 190, 194, 0.5);
  border-radius: 0.0625rem;
  /* Mismo fondo sólido que los campos de texto. Transparente, la casilla
     dejaba pasar el cielo: medido, 28 puntos claros de 324 dentro de una caja
     de 20px. Una estrella dentro de un checkbox vacío se lee como marcado. */
  background: #10202d;
}

.c4n-field--privacy label::after {
  left: 0.43rem;
  width: 0.32rem;
  height: 0.6rem;
  transform: translateY(-60%) rotate(45deg) scale(0.85);
  border-right: 0.125rem solid #05111d;
  border-bottom: 0.125rem solid #05111d;
  opacity: 0;
  transition:
    opacity 120ms ease,
    transform 120ms var(--c4n-ease-out);
}

.c4n-field--privacy input[type="checkbox"]:checked + label::before {
  border-color: var(--c4n-blue-ink);
  background: var(--c4n-blue-ink);
}

.c4n-field--privacy input[type="checkbox"]:checked + label::after {
  transform: translateY(-60%) rotate(45deg) scale(1);
  opacity: 1;
}

.c4n-field--privacy input[type="checkbox"][aria-invalid="true"] + label::before {
  border-width: 0.125rem;
  border-color: var(--c4n-error);
}

.c4n-field--privacy input[type="checkbox"]:focus-visible + label::before {
  outline: 0.1875rem solid var(--c4n-blue-ink);
  outline-offset: 0.1875rem;
}

/* Marfil, no azul en negrita. En azul con subrayado grueso era lo más brillante
   del formulario: un enlace legal le ganaba el pulso al botón de enviar. */
.c4n-field--privacy label a {
  color: var(--c4n-ivory);
  font-weight: 650;
  text-decoration-color: rgba(244, 239, 231, 0.45);
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.2em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.c4n-field--privacy .c4n-field__error {
  margin-left: 2rem;
  grid-column: 1;
}

.c4n-registration__required-note {
  /* "Acepto" -> "Enviar" is the most chained pair on the page; the group step
     added to the grid row-gap read as two separate blocks. */
  margin-top: 0;
  grid-column: 1;
  align-self: center;
  color: #8ba0a6;
  font-size: 0.8125rem;
  font-weight: 550;
  letter-spacing: 0;
  line-height: 1.4;
}

.c4n-button--submit {
  width: 100%;
  /* 12rem becomes 384px under 200% text zoom and pins the form grid track,
     dragging every field past the viewport. Cap it at the container. */
  min-width: min(12rem, 100%);
  /* Misma altura que los campos que tiene encima: si ellos crecen con la
     pantalla y el botón no, queda un botón bajo bajo cinco cajas altas. */
  min-height: clamp(3.65rem, 6.4vh, 4.25rem);
  margin-top: 0;
  grid-column: 2;
  background: var(--c4n-orange);
  color: #190b06;
}

.c4n-button--submit:disabled,
.c4n-registration__form.is-submitting .c4n-button--submit {
  cursor: wait;
  opacity: 0.62;
}

.c4n-button--submit:disabled:active,
.c4n-registration__form.is-submitting .c4n-button--submit:active {
  transform: none;
}

.c4n-button--submit [data-submit-progress]:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.c4n-button--submit [data-submit-progress]:not([hidden])::before {
  width: 0.9rem;
  height: 0.9rem;
  border: 0.125rem solid rgba(25, 11, 6, 0.34);
  border-top-color: #190b06;
  border-radius: 50%;
  animation: c4n-spin 700ms linear infinite;
  content: "";
}

/* Photographic ground shared by agenda, conversation and experience. The
   image sits under a per-section scrim; content rides above on z-index 2. */
.c4n-agenda__backdrop,
.c4n-conversation__backdrop,
.c4n-experience__backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  /* Igual que el hero, pero por los dos extremos: estas fotos tienen sección
     antes y después, así que entran y salen desvanecidas y ninguna de las dos
     costuras llega a marcarse. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  pointer-events: none;
}

.c4n-agenda__backdrop img,
.c4n-conversation__backdrop img,
.c4n-experience__backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c4n-agenda__backdrop::after,
.c4n-conversation__backdrop::after,
.c4n-experience__backdrop::after {
  position: absolute;
  inset: 0;
  content: "";
}

/*
 * Estrellas sobre la fotografía, en las tres secciones que la llevan.
 *
 * El cielo fijo de la página va a z:1 dentro de .c4n-event, y estas secciones
 * pintan una foto a pantalla completa con velo al 88-95% encima de él. Detrás
 * de una foto opaca las estrellas no se ven, y la agenda salía sin cielo
 * mientras registro y galería, que no tienen foto, sí lo tenían.
 *
 * Aquí el plano va *dentro* del backdrop, encima del velo: `::after` es el
 * velo, así que las estrellas se apoyan en `::before`, que dentro del mismo
 * elemento se pinta después en orden de código si lleva z-index mayor. Queda
 * debajo del contenido de la sección (z:2) y hereda la máscara del backdrop,
 * así que se desvanece en las costuras igual que la foto y no reintroduce
 * ninguna franja.
 *
 * Mismo mosaico, `screen` y velocidad que el plano lejano, para que al cruzar
 * de una sección a otra el cielo se lea como el mismo cielo.
 */
.c4n-agenda__backdrop::before,
.c4n-conversation__backdrop::before,
.c4n-experience__backdrop::before {
  --c4n-star-tile: 170px;
  position: absolute;
  z-index: 1;
  top: calc(-1 * var(--c4n-star-tile));
  left: calc(-1 * var(--c4n-star-tile));
  width: calc(100% + var(--c4n-star-tile) * 2);
  height: calc(100% + var(--c4n-star-tile) * 2);
  background-image:
    radial-gradient(circle at 18px 26px, rgba(244, 239, 231, 0.5) 0 0.9px, transparent 1.4px),
    radial-gradient(circle at 74px 9px, rgba(244, 239, 231, 0.34) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 129px 58px, rgba(175, 190, 194, 0.46) 0 0.9px, transparent 1.4px),
    radial-gradient(circle at 46px 96px, rgba(244, 239, 231, 0.3) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 152px 134px, rgba(95, 125, 255, 0.4) 0 0.9px, transparent 1.4px),
    radial-gradient(circle at 96px 152px, rgba(244, 239, 231, 0.38) 0 0.8px, transparent 1.3px);
  background-repeat: repeat;
  background-size: var(--c4n-star-tile) var(--c4n-star-tile);
  content: "";
  opacity: 0.72;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: c4n-drift-far 45s linear infinite;
}

/*
 * Encuadre: la mirada se carga a la derecha, donde están la ciudad y las
 * luces de la terraza.
 *
 * El 100% horizontal no es un descuido. La cara principal de la foto está en
 * su centro (x≈47%) y con cualquier encuadre centrado caía justo debajo de las
 * entradas de la agenda, compitiendo con «Gin Lab» y «Música». Pegando la
 * foto a su borde derecho, la cara se desplaza a x≈32% de la pantalla y queda
 * bajo el velo denso; el gafete legible («NETWORKING NIGHT») va con ella. La
 * ciudad, que es lo que da el ambiente, ocupa la mitad libre de la derecha.
 */
.c4n-agenda__backdrop img {
  /*
   * Más ancha que su caja, a propósito. La foto (1,83) y la sección (1,77 en
   * 1440x900) tienen casi la misma proporción: `cover` la ajustaba con 54px
   * de sobra y `object-position` no tenía recorrido -- medido: la cara seguía
   * en el mismo píxel con 68%, 78% y 100%. Con la imagen al 138% de ancho y
   * anclada a la derecha, sobran ~550px por la izquierda y ahí es donde va la
   * cara: fuera del área del texto, bajo el velo denso. La ciudad y la gente
   * de la derecha, que son el ambiente, quedan a la vista.
   *
   * El ancho es `max()` para que en pantallas muy anchas (donde la sección se
   * vuelve más apaisada que la foto y `cover` ya la ampliaría) no se dispare.
   */
  width: 138%;
  /* El reset global `.c4n-event :where(img) { max-width: 100% }` es correcto
     para imágenes de contenido, pero aquí impedía que el fondo midiera más que
     su caja: `width: 138%` computaba 1440px. Este es un fondo recortado por
     `overflow: hidden`, no una imagen que deba caber, así que se libera. */
  max-width: none;
  /* Desplazar con transform, no con margen: `margin-left: auto` sobre un bloque
     más ancho que su padre se resuelve a 0 (los márgenes automáticos nunca son
     negativos). El transform mueve el sobrante fuera del borde izquierdo. El
     porcentaje es sobre el propio elemento (138% de la caja), de ahí el /1.38:
     38/1.38 = 27.5% de 1987px = 547px, exactamente lo que sobra. */
  transform: translateX(calc(-38% / 1.38));
  object-position: 100% 30%;
}

/*
 * El velo sigue al texto. El bloque de la agenda ocupa hasta el 60% del ancho,
 * y ahí el velo se mantiene al 92% hasta el 58% para que las caras de la foto
 * no asomen entre las líneas; a partir de ahí cae rápido y la ciudad respira.
 * El velo de la copa anterior se abría desde el 46%, y con esta foto eso
 * dejaba una cara detrás de «Una conversación para conectar…».
 */
.c4n-agenda__backdrop::after {
  background:
    linear-gradient(95deg, rgba(3, 10, 18, 0.96) 0%, rgba(3, 10, 18, 0.92) 40%, rgba(3, 10, 18, 0.86) 58%, rgba(4, 13, 22, 0.38) 100%),
    linear-gradient(180deg, rgba(3, 10, 18, 0.7) 0%, transparent 30%, rgba(3, 10, 18, 0.72) 100%);
}

.c4n-conversation__backdrop img {
  object-position: 50% 88%;
}

.c4n-conversation__backdrop::after {
  background:
    linear-gradient(180deg, rgba(5, 17, 29, 0.93) 0%, rgba(5, 17, 29, 0.84) 44%, rgba(5, 17, 29, 0.95) 100%),
    radial-gradient(ellipse 48rem 30rem at 78% 22%, rgba(95, 125, 255, 0.08), transparent 68%);
}

.c4n-experience__backdrop img {
  object-position: 22% 52%;
}

.c4n-experience__backdrop::after {
  background:
    linear-gradient(90deg, rgba(3, 10, 18, 0.93) 0%, rgba(3, 10, 18, 0.78) 38%, rgba(3, 10, 18, 0.24) 72%, rgba(3, 10, 18, 0.5) 100%),
    linear-gradient(180deg, rgba(3, 10, 18, 0.6) 0%, transparent 26%, rgba(3, 10, 18, 0.78) 100%);
}

.c4n-agenda {
  z-index: 2;
  isolation: isolate;
  background: radial-gradient(ellipse 38rem 38rem at 12% 52%, rgba(14, 47, 194, 0.11), transparent 72%);
}

.c4n-agenda .c4n-section-header,
.c4n-conversation .c4n-section-header {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
  gap: 2rem;
  align-items: end;
}

.c4n-agenda .c4n-section-header__statement,
.c4n-conversation .c4n-section-header__statement {
  justify-self: end;
  text-align: right;
}

.c4n-agenda .c4n-section-header,
.c4n-conversation .c4n-section-header,
.c4n-conversation__intro,
.c4n-conversation__topics {
  position: relative;
  z-index: 2;
}

.c4n-agenda__timeline {
  position: relative;
  z-index: 2;
  max-width: 72rem;
  margin-top: var(--c4n-section-lead);
}

.c4n-agenda__timeline::before {
  position: absolute;
  /* Start at the first dot and die on the last rule instead of hanging
     ~100px below the final milestone. */
  top: calc(clamp(1.9rem, 3.2vw, 2.9rem) + 0.67rem);
  bottom: 0;
  left: calc(var(--c4n-agenda-time) + var(--c4n-agenda-gap) / 2 - var(--c4n-rule) / 2);
  width: var(--c4n-rule);
  background: var(--c4n-orange);
  content: "";
  opacity: 0.85;
}

.c4n-agenda__item {
  position: relative;
  display: grid;
  /* Cuatro entradas y cabecera en una pantalla. A 2,9rem por entrada la agenda
     medía 1071px; a este paso entra en 813 con aire. El `vh` en vez de `vw` es
     deliberado: lo que limita es la altura, así que es la altura quien manda. */
  padding: clamp(1rem, 1.9vh, 1.75rem) 0;
  grid-template-columns: var(--c4n-agenda-time) minmax(0, 1fr);
  column-gap: var(--c4n-agenda-gap);
}

.c4n-agenda__item::before {
  position: absolute;
  z-index: 1;
  top: calc(clamp(1.9rem, 3.2vw, 2.9rem) + 0.28rem);
  left: calc(var(--c4n-agenda-time) + var(--c4n-agenda-gap) / 2 - 0.39rem);
  width: 0.78rem;
  height: 0.78rem;
  border: 0.1875rem solid var(--c4n-ink);
  border-radius: 50%;
  background: var(--c4n-blue-ink);
  box-shadow: 0 0.5rem 1.25rem rgba(95, 125, 255, 0.2);
  content: "";
}

.c4n-agenda__time {
  padding-top: 0.15rem;
  color: var(--c4n-orange);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
  /* The rail is centred in the gutter, not between the texts; right-aligning
     the hour makes the two sides of the rail symmetric. */
  text-align: right;
}

.c4n-agenda__content h3 {
  color: var(--c4n-ivory);
  font-family: "Heading Now", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.35rem, min(2.3vw, 3.4vh), 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.c4n-agenda__content p {
  /* 1ch is the advance of "0", ~1.41x the mean lowercase in Montserrat, so 68ch
     rendered 92 real characters. 50ch lands at ~70. */
  max-width: 50ch;
  margin-top: clamp(0.5rem, 1.2vh, 1.05rem);
  color: var(--c4n-smoke);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.c4n-conversation {
  isolation: isolate;
  /* Era un `linear-gradient(115deg, ...)` que arrancaba a plena intensidad en la
     esquina superior y marcaba la costura. Radial y centrado hacia dentro. */
  background: radial-gradient(ellipse 46rem 26rem at 22% 46%, rgba(14, 47, 194, 0.1), transparent 70%);
}

.c4n-conversation__intro {
  max-width: 50ch;
  margin-top: var(--c4n-section-lead);
  color: #c4d0d2;
  font-size: clamp(1.05rem, min(1.7vw, 2.4vh), 1.3rem);
  line-height: 1.65;
}




.c4n-conversation__topics {
  display: grid;
  margin-top: var(--c4n-block-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The matrix is a rule system, not a card grid: row air comes from the cell's
   own padding so the horizontal rules stay continuous. */
.c4n-topic {
  display: grid;
  min-width: 0;
  /* Vertical en `vh`, horizontal en `vw`: cada eje escala con la medida que le
     corresponde. Con todo en `vw` los tres temas sumaban 686px en una pantalla
     de 633 y la conversación era la sección que no cabía. */
  min-height: clamp(5rem, 9vh, 7rem);
  padding: clamp(1.25rem, 2.6vh, 2.2rem) clamp(2rem, 3.4vw, 3rem) clamp(1.25rem, 2.6vh, 2.2rem) 0;
  /* La columna mide lo que el icono: si crece uno sin el otro, el círculo se
     aplasta o sobra un hueco antes del texto. */
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: 1.1rem;
  align-items: center;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}

/* Sin `border-left`: era la última línea de la página, una regla vertical azul
   entre las dos columnas de temas. Las columnas ya se separan por el hueco y
   por el icono que abre cada fila. */
.c4n-topic:nth-child(even) {
  padding-right: 0;
  padding-left: clamp(2rem, 3.4vw, 3rem);
}

/* Naranja de marca, no el azul de texto: los iconos son los únicos gráficos de
   la sección y en azul se confundían con el subtítulo. A 5.3:1 sobre el fondo
   superan el 3:1 que pide WCAG para elementos gráficos. */
.c4n-topic__icon {
  display: grid;
  width: 3.75rem;
  height: 3.75rem;
  place-items: center;
  border: var(--c4n-rule) solid var(--c4n-orange-line);
  border-radius: 50%;
  color: var(--c4n-orange);
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background-color 160ms ease;
}

.c4n-topic__icon svg {
  width: 1.9rem;
  height: 1.9rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}


.c4n-topic__text {
  color: var(--c4n-ivory);
  font-family: "Heading Now", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.2rem, 1.9vw, 1.55rem);
  font-weight: 700;
  line-height: 1.2;
}

/*
 * EXPERIENCIA: una columna de lectura, la copa limpia.
 *
 * La columna ocupa los tramos 1-5 y todo lo demás es fotografía. La jerarquía
 * es una escalera de tres peldaños y nada más: título (marfil, grande) →
 * párrafo (humo, cuerpo) → ficha del local (marfil, medio, con el botón). La
 * ficha cierra la columna a propósito: es donde termina el ojo, y es el único
 * elemento accionable de la sección.
 *
 * Antes la sección era una rejilla de 12 con la ficha en los tramos 9-12 y un
 * lema naranja de 155px a todo lo ancho por debajo, y las tres cosas pisaban
 * la copa, que está en el centro de la foto.
 */
.c4n-experience {
  display: grid;
  isolation: isolate;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 2rem;
  background: radial-gradient(ellipse 60rem 34rem at 88% 44%, rgba(241, 78, 35, 0.2), transparent 70%);
}

.c4n-experience__copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  grid-column: 1 / span 5;
  flex-direction: column;
  align-self: center;
}

/* Cabecera en una columna: título arriba, subtítulo debajo alineado a la
   izquierda. La regla compartida de las otras secciones la pone a dos columnas
   con el subtítulo a la derecha, y aquí la columna es estrecha. */
.c4n-experience .c4n-section-header {
  display: block;
}

.c4n-experience .c4n-section-header__statement {
  /* 1.1rem y no 0.75: con el título a 67px las descendentes de la «p» casi
     tocaban el subtítulo. Un poco más de aire y la relación se lee como
     título + apoyo, no como dos líneas del mismo bloque. */
  margin-top: 1.1rem;
  justify-self: start;
  text-align: left;
}

/* Cuerpo del párrafo: 30 palabras y 44ch de medida. A 50ch y 58 palabras eran
   siete líneas, y siete líneas de texto corrido junto a un título de 67px y
   una ficha de 40px es lo que hacía que la sección se leyera saturada. */
.c4n-experience__intro {
  max-width: 44ch;
  margin-top: var(--c4n-section-lead);
  color: #c5d0d1;
  font-size: clamp(1rem, min(1.5vw, 2.1vh), 1.125rem);
  line-height: 1.65;
}

/*
 * Ficha del local. Se separa del párrafo con más aire que el párrafo del
 * título, para que se lea como un bloque propio y no como la continuación del
 * texto; y lleva un rótulo pequeño («Sede») que dice qué es antes de leerla.
 * Sin recuadro ni fondo, como se pidió: la separación la da el espacio y el
 * cambio de registro tipográfico.
 */
.c4n-experience__venue {
  display: grid;
  margin-top: var(--c4n-block-gap);
  /* Texto y mapa lado a lado: el mapa mide lo que el bloque de texto, así que
     la sección no crece ni un píxel respecto a cuando solo había texto. */
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(1rem, 2vw, 1.75rem);
  align-items: center;
  text-shadow: 0 0.125rem 1.25rem rgba(3, 10, 18, 0.95), 0 0 0.5rem rgba(3, 10, 18, 0.9);
}

.c4n-experience__venue-text {
  min-width: 0;
}

/*
 * Mapa de la sede. Es una imagen con la paleta de la página
 * (aws/scripts/generar-mapa.mjs), no un iframe de Google Maps: el iframe pinta
 * un recuadro claro, carga ~1 MB y deja cookies de Google. Al tocarlo abre la
 * misma ubicación que el botón.
 */
.c4n-experience__map {
  width: clamp(8.5rem, 14vw, 13.5rem);
  margin: 0;
  text-shadow: none;
}

.c4n-experience__map > a {
  display: block;
  overflow: hidden;
  border: var(--c4n-rule) solid var(--c4n-line);
  border-radius: 0.125rem;
  transition: border-color 180ms ease;
}

.c4n-experience__map > a:hover,
.c4n-experience__map > a:focus-visible {
  border-color: var(--c4n-orange);
}

.c4n-experience__map > a:focus-visible {
  outline: 0.125rem solid var(--c4n-orange);
  outline-offset: 0.25rem;
}

.c4n-experience__map img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

/* El crédito que pide la licencia de OpenStreetMap. 11px: el suelo funcional
   de la página para texto que se tiene que poder leer. */
.c4n-experience__map figcaption {
  margin-top: 0.4rem;
  color: #8ba0a6;
  font-size: 0.6875rem;
  line-height: 1.3;
  text-align: right;
}

.c4n-experience__map figcaption a {
  color: inherit;
  text-decoration-color: rgba(139, 160, 166, 0.5);
  text-underline-offset: 0.18em;
}

/* En una sola columna el mapa pasa debajo del texto, apaisado y a lo ancho:
   un cuadrado a todo el ancho del celular sería una pantalla entera de mapa. */
@media (max-width: 900px) {
  .c4n-experience__venue {
    grid-template-columns: minmax(0, 1fr);
  }

  .c4n-experience__map {
    width: min(100%, 30rem);
    margin-top: 1.5rem;
  }

  .c4n-experience__map img {
    aspect-ratio: 16 / 9;
  }
}

.c4n-experience__venue-label {
  color: var(--c4n-orange);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  line-height: 1.3;
  text-transform: uppercase;
}

.c4n-experience__venue h3 {
  max-width: 22ch;
  margin-top: 0.6rem;
  color: var(--c4n-ivory);
  font-family: "Heading Now", "Montserrat", ui-sans-serif, system-ui, sans-serif;
  /* Un peldaño por debajo del título de sección y claramente por encima del
     párrafo: 1.5-1.75rem. Los 2rem de antes competían con el h2. */
  font-size: clamp(1.35rem, min(2vw, 3vh), 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.c4n-experience__venue-area {
  margin-top: 0.5rem;
  color: var(--c4n-smoke);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
}

/* Botón secundario: contorno naranja sobre fondo transparente. Es el único
   botón de contorno de la página y vive aquí, así que la regla va junto a la
   ficha. (Se restauró tras perderse en la reescritura del bloque.) */
.c4n-button--secondary {
  margin-top: 1.25rem;
  border-color: var(--c4n-orange);
  background: transparent;
  color: #ff9a6d;
}

.c4n-mobile-registration {
  display: none;
}

.c4n-footer {
  display: grid;
  min-height: 13rem;
  /* A footer is a closing line, not a section: the full section padding gave
     317px of void over 44px of ink. */
  padding-top: var(--c4n-footer-y);
  padding-bottom: calc(var(--c4n-footer-y) + env(safe-area-inset-bottom, 0px));
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--c4n-group-gap) clamp(2.5rem, 5.5vw, 5rem);
  align-items: center;
}

.c4n-footer__claim {
  justify-self: center;
  color: #9fb3b8;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.7;
  text-align: center;
}

.c4n-footer__links {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem 1.75rem;
  flex-wrap: wrap;
  color: var(--c4n-smoke);
  font-size: 0.75rem;
  line-height: 1.4;
}

.c4n-footer__links a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
}

.c4n-footer__links span {
  color: #7f9196;
}

.c4n-event.is-ready .c4n-hero__copy > * {
  animation: c4n-rise-in 680ms var(--c4n-ease-out) both;
}

.c4n-event.is-ready .c4n-hero__copy > :nth-child(1) {
  animation-delay: 0ms;
}

.c4n-event.is-ready .c4n-hero__copy > :nth-child(2) {
  animation-delay: 45ms;
}

.c4n-event.is-ready .c4n-hero__copy > :nth-child(3) {
  animation-delay: 90ms;
}

.c4n-event.is-ready .c4n-hero__copy > :nth-child(4) {
  animation-delay: 135ms;
}

.c4n-event.is-ready .c4n-hero__copy > :nth-child(5) {
  animation-delay: 180ms;
}

.c4n-event.is-ready .c4n-hero__copy > :nth-child(6) {
  animation-delay: 225ms;
}

.c4n-event.is-ready .c4n-hero__copy > :nth-child(7) {
  animation-delay: 270ms;
}

@keyframes c4n-rise-in {
  from {
    transform: translateY(0.75rem);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes c4n-spin {
  to {
    transform: rotate(1turn);
  }
}

@media (hover: hover) and (pointer: fine) {
  .c4n-nav__links a:hover,
  .c4n-footer__links a:hover {
    color: var(--c4n-ivory);
  }

  .c4n-nav__registration:hover {
    border-color: var(--c4n-ivory);
    background: var(--c4n-orange);
    color: var(--c4n-night);
  }

  .c4n-button--primary:hover,
  .c4n-button--submit:hover:not(:disabled) {
    background: #f96a44;
  }

  .c4n-button--secondary:hover {
    background: var(--c4n-orange);
    color: var(--c4n-night);
  }

  /* Was --c4n-blue for both, from when registro was an ivory band: 3.2:1 once
     the surface went dark. Each one hovers to the other's colour instead. */
  .c4n-registration__status a:hover {
    color: var(--c4n-blue-ink);
    text-decoration-color: currentcolor;
  }

  /* Sin `border-bottom-color`: ese borde se retiró con el resto de líneas
     horizontales y la regla teñía un borde que ya no existe. */
  .c4n-topic:hover {
    background: rgba(241, 78, 35, 0.045);
  }

  .c4n-topic:hover .c4n-topic__icon {
    border-color: var(--c4n-orange);
    background: rgba(241, 78, 35, 0.1);
  }

  /* El campo responde antes del clic. Sin esto el formulario no acusaba recibo
     del puntero en ningún momento previo al foco. */
  .c4n-field input:not([type="checkbox"]):not([type="hidden"]):hover:not(:focus-visible) {
    border-color: rgba(175, 190, 194, 0.44);
    background: rgba(244, 239, 231, 0.075);
  }

  /* El enlace ya no es azul en reposo, así que el azul queda para el hover. */
  .c4n-field--privacy label:hover a {
    color: var(--c4n-blue-ink);
    text-decoration-color: currentcolor;
  }

  .c4n-field--privacy label:hover::before {
    border-color: rgba(175, 190, 194, 0.78);
  }

}

@media (min-width: 1200px) {
  .c4n-hero h1 {
    font-size: clamp(4.5rem, 5vw, 6rem);
  }

  /* No font-size override here: 0.5625rem rendered 9px of all-caps copy,
     below the 11px functional floor. The 10px base stands. */
  .c4n-hero__axes {
    letter-spacing: 0.1em;
  }
}

@media (max-width: 1199px) {
  .c4n-hero {
    min-height: auto;
  }

  .c4n-hero h1 {
    font-size: clamp(3.75rem, 7vw, 5.2rem);
  }

  .c4n-event {
    --c4n-agenda-gap: 3.25rem;
  }
}

@media (max-width: 900px) {
  .c4n-nav {
    display: grid;
    min-height: 4.75rem;
    /* El inset tiene que seguir aquí: la regla base lo llevaba y este override
       lo borraba, así que con viewport-fit=cover la barra fija quedaba por
       debajo del notch y los logos se metían bajo la isla dinámica. */
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
    padding-bottom: 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "brand toggle action"
      "menu menu menu";
    gap: 0.6rem;
    /* Sin fondo propio: hereda el degradado de la regla base. El 0.95 opaco que
       había aquí devolvía la franja negra en móvil, que era donde más se notaba
       porque la barra mide más que en escritorio. */
  }

  .c4n-nav .c4n-lockup {
    min-width: 0;
    grid-area: brand;
    justify-self: start;
  }

  .c4n-nav__toggle {
    grid-area: toggle;
  }

  .c4n-nav__menu {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    grid-area: menu;
  }

  .c4n-nav__links {
    width: 100%;
    justify-content: flex-end;
    gap: 1.5rem;
  }

  .c4n-nav__registration {
    min-width: auto;
    margin-left: 0;
    grid-area: action;
    justify-self: end;
  }

  .c4n-event.is-ready .c4n-nav__toggle {
    display: inline-flex;
  }

  .c4n-event.is-ready .c4n-nav__menu {
    position: absolute;
    top: 100%;
    right: var(--c4n-frame);
    width: min(20rem, calc(100vw - 2rem));
    padding: 0.75rem;
    border: var(--c4n-rule) solid var(--c4n-line);
    border-top: 0.1875rem solid var(--c4n-orange);
    border-radius: 0.125rem;
    background: var(--c4n-night);
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.34);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.5rem);
    visibility: hidden;
    transition:
      opacity 180ms ease,
      transform 200ms var(--c4n-ease-out),
      visibility 0s linear 200ms;
  }

  .c4n-event.is-ready .c4n-nav__links {
    display: grid;
    justify-content: stretch;
    gap: 0;
  }

  .c4n-event.is-ready .c4n-nav__links a {
    justify-content: flex-start;
    padding: 0.85rem 0.75rem;
    border-bottom: var(--c4n-rule) solid var(--c4n-line);
  }

  .c4n-event.is-ready .c4n-nav__links li:last-child a {
    border-bottom: 0;
  }

  .c4n-event.is-ready .c4n-nav.is-open .c4n-nav__menu,
  .c4n-event.is-ready .c4n-nav__menu.is-open,
  .c4n-event.is-ready.is-open .c4n-nav__menu,
  .c4n-event.is-ready .c4n-nav:has(.c4n-nav__toggle[aria-expanded="true"]) .c4n-nav__menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .c4n-hero {
    padding-top: calc(9rem + env(safe-area-inset-top, 0px));
    grid-template-columns: 1fr;
    gap: var(--c4n-block-gap);
  }

  /* El selector venía duplicado en la lista, resto de una regla anterior. */
  .c4n-hero__copy {
    max-width: 43rem;
  }

  /*
   * A una columna la cuenta sube a la primera fila, encima del texto.
   *
   * En el DOM va después del copy, y en escritorio eso da igual porque están
   * lado a lado. En móvil, después del copy significa a 1600px de la parte de
   * arriba: la captura la mostraba cortada por el borde inferior de la primera
   * pantalla, que es justo donde más sentido tiene verla. `grid-row: 1` la
   * pone arriba sin tocar el orden del DOM, así que el lector de pantalla
   * sigue oyendo primero el titular y luego la cuenta.
   */
  .c4n-countdown {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-items: start;
    text-align: left;
  }

  .c4n-hero__copy {
    grid-row: 2;
  }

  .c4n-countdown__units {
    justify-content: flex-start;
  }

  .c4n-hero h1 {
    max-width: 8.5em;
    font-size: clamp(3.5rem, 10vw, 5rem);
  }

  /* Single column: the glass sits under the copy at a size that still reads as
     the subject, without opening a void the viewer has to scroll past. */

  /*
   * En móvil la regla de «una sección por pantalla» se suelta a propósito.
   *
   * Un formulario de seis campos mide más que un teléfono, y al tocar un campo
   * el teclado se lleva la mitad de la pantalla. Forzar `100svh` aquí recorta el
   * formulario o abre huecos enormes entre secciones cortas. El contenido manda
   * y el padding vuelve a ser fijo; el criterio de pantalla es de escritorio,
   * donde la altura sobra.
   */
  .c4n-registration,
  .c4n-gallery-section,
  .c4n-agenda,
  .c4n-conversation,
  .c4n-experience {
    min-height: 0;
    align-content: start;
    /*
     * En móvil el título necesita librar la barra fija con padding, porque ya
     * no hay centrado que le dé aire por arriba: «Agenda de noche» salía
     * tapado por el nav al llegar desde el menú. El `scroll-margin-top` hace
     * que el ancla se detenga bajo la barra (4.75rem), y el padding añade el
     * margen visual. En escritorio no hace falta ninguna de las dos cosas.
     */
    padding-top: calc(var(--c4n-section-y) + 1rem);
    scroll-margin-top: calc(4.75rem + env(safe-area-inset-top, 0px));
  }

  /*
   * Entre dos secciones apiladas solo cuenta un padding, no los dos.
   *
   * En escritorio cada sección mide una pantalla y sus paddings no se ven
   * juntos. En móvil sí: el inferior de la galería (48px) y el superior de la
   * agenda (64px) se tocaban y, con las marcas de la galería y su hueco,
   * sumaban 148px de vacío entre el pie de la última foto y «Agenda de noche»
   * -- medido en la captura. El inferior se reduce a un respiro; el superior,
   * que además libra la barra fija, es el que manda en la costura.
   */
  /* Todas menos la última (registro), que cierra contra el pie y conserva el
     padding completo. El orden es conversación → agenda → experiencia →
     galería → registro. */
  .c4n-conversation,
  .c4n-agenda,
  .c4n-experience,
  .c4n-gallery-section {
    padding-bottom: 1.25rem;
  }

  .c4n-registration,
  .c4n-gallery-section {
    display: block;
  }

  .c4n-registration__status,
  .c4n-registration__unavailable,
  .c4n-registration__form {
    margin-top: var(--c4n-section-lead);
  }

  /*
   * Mosaico en vertical: la protagonista arriba a todo el ancho y la retícula
   * 2x2 debajo. El alto deja de atarse a la pantalla (en móvil ninguna sección
   * lo hace) y se fija en proporciones: la protagonista a 4:5 como la foto, y
   * las pequeñas cuadradas, que a 45% de ancho es donde un retrato recortado
   * todavía muestra el sujeto.
   */
  .c4n-gallery-section {
    display: block;
  }

  .c4n-gallery-section__header {
    display: block;
  }

  /* Vuelve a partirse en líneas: el `nowrap` de escritorio cuenta con 800px a
     la derecha del título; aquí la línea va debajo, a todo el ancho, y sin esto
     desbordaba por la derecha («...que te espera en» cortado en la captura). */
  .c4n-gallery-section__header > p:not(.c4n-section-header__statement) {
    max-width: 42ch;
    margin-top: 0.75rem;
    text-align: left;
    white-space: normal;
  }

  .c4n-mosaic {
    height: auto;
    margin-top: var(--c4n-section-lead);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .c4n-mosaic__slot--lead {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 4 / 5;
  }

  .c4n-mosaic__slot[data-c4n-mosaic-slot="1"],
  .c4n-mosaic__slot[data-c4n-mosaic-slot="2"],
  .c4n-mosaic__slot[data-c4n-mosaic-slot="3"],
  .c4n-mosaic__slot[data-c4n-mosaic-slot="4"] {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 1;
  }

  /* La columna de texto ocupa todo el ancho: en vertical no hay copa que
     respetar a la derecha, la foto queda de fondo. */
  .c4n-experience__copy {
    grid-column: 1 / -1;
  }

  /* En vertical la sección es mucho más alta que ancha, así que `cover` ya
     amplía la foto al doble para llenar la altura y sobra mucho a los lados:
     el 138% de escritorio solo añadiría desenfoque. El encuadre a la derecha
     lo sigue dando object-position, que aquí sí tiene recorrido. */
  .c4n-agenda__backdrop img {
    width: 100%;
    transform: none;
    /* Encuadre distinto al de escritorio. En vertical `cover` amplía la foto
       al doble de alto y se ven ~390px de sus ~2900px de ancho: con el 100%
       aparecía media cara gigante del borde derecho. El 62% cae en la ciudad
       iluminada entre las dos personas, que es el único tramo sin caras. */
    object-position: 58% 20%;
  }

  .c4n-registration__form {
    grid-template-columns: 1fr;
  }

  .c4n-field--privacy {
    grid-column: 1;
  }

  /* One column: the note must release column 2 or grid invents an implicit
     track and squeezes every field to ~53px. */
  .c4n-registration__required-note,
  .c4n-button--submit {
    grid-row: auto;
    grid-column: 1;
  }

  .c4n-agenda .c4n-section-header,
  .c4n-conversation .c4n-section-header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .c4n-agenda .c4n-section-header__statement,
  .c4n-conversation .c4n-section-header__statement {
    justify-self: start;
    text-align: left;
  }


}

@media (max-width: 640px) {
  .c4n-event {
    --c4n-frame: max(1rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --c4n-agenda-gap: 2.5rem;
    padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px));
  }


  .c4n-nav {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .c4n-lockup {
    gap: 0.42rem;
    font-size: 0.5625rem;
    letter-spacing: 0.06em;
  }

  .c4n-lockup > span:first-child {
    padding: 0.55rem 0.5rem 0.5rem;
  }

  .c4n-lockup > span:nth-child(2) {
    font-size: 0.8rem;
  }

  .c4n-lockup > span:last-child {
    font-size: 0.6875rem;
  }

  .c4n-nav__registration,
  .c4n-nav__toggle {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.65rem;
    letter-spacing: 0.08em;
  }

  .c4n-nav__links {
    justify-content: space-between;
    gap: 0.5rem;
  }

  .c4n-nav__links a {
    min-height: 2.75rem;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
  }

  /* La barra móvil mide 4.75rem, no los 8.75rem que se dejaban aquí: 64px de
     hueco negro entre la cabecera y el titular, en la pantalla donde menos
     altura sobra. */
  .c4n-hero {
    padding-top: calc(4.75rem + 1.5rem + env(safe-area-inset-top, 0px));
    gap: var(--c4n-block-gap);
  }

  .c4n-event.is-ready .c4n-nav__menu {
    right: 1rem;
  }

  .c4n-hero__eyebrow {
    font-size: 0.625rem;
    letter-spacing: 0.22em;
  }

  .c4n-hero h1 {
    max-width: 8em;
    margin-top: 1.35rem;
    /* The clamp floor must stay below the fluid term, otherwise 200% text zoom
       doubles it to 91.2px and 13vw can no longer shrink anything. Desktop is
       untouched: this floor only lives inside the 640px breakpoint. */
    /* 12vw y no 13vw: «ya no es la red,» va en una sola línea y a 13vw se
       salía 14px de la columna en un celular de 360px. */
    font-size: clamp(1.75rem, 12vw, 4rem);
    line-height: 0.95;
  }

  .c4n-hero__lead {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    font-size: 1.125rem;
  }

  .c4n-button {
    min-height: 2.75rem;
  }

  .c4n-button--primary {
    width: 100%;
    min-height: 3.25rem;
  }

  .c4n-hero__event-data {
    max-width: 33ch;
  }

  .c4n-hero__statement {
    max-width: 40ch;
  }

  .c4n-section-header h2 {
    max-width: 10ch;
    font-size: clamp(1.75rem, 13vw, 4rem);
  }

  .c4n-field input:not([type="checkbox"]):not([type="hidden"]) {
    min-height: 3rem;
  }

  .c4n-registration__required-note {
    margin-top: 0;
    order: 2;
  }

  .c4n-button--submit {
    min-height: 3.5rem;
  }

  .c4n-agenda__timeline {
    padding-left: 0.25rem;
  }

  .c4n-agenda__timeline::before {
    left: 0.38rem;
  }

  .c4n-agenda__item {
    padding: 2.1rem 0 2.1rem min(2.15rem, 6vw);
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .c4n-agenda__item::before {
    top: 2.45rem;
    left: 0;
  }

  .c4n-agenda__time {
    padding-top: 0;
    /* Single column here: the hour sits above the title, not across a rail. */
    text-align: left;
  }

  .c4n-agenda__content h3 {
    font-size: clamp(1.45rem, 7vw, 1.8rem);
  }

  .c4n-conversation__intro,
  .c4n-experience__intro {
    font-size: 1rem;
    line-height: 1.7;
  }

  .c4n-conversation__topics {
    grid-template-columns: 1fr;
  }

  /* La columna del icono sigue al icono también aquí: la regla venía en
     2.4rem de cuando el icono medía 3rem y ya lo aplastaba; con 3.75rem lo
     habría partido por la mitad. */
  .c4n-topic,
  .c4n-topic:nth-child(even) {
    min-height: 7.25rem;
    padding: 1.75rem 0;
    grid-template-columns: 3.75rem minmax(0, 1fr);
    gap: 0.9rem;
  }

  .c4n-topic__text {
    font-size: 1.2rem;
  }

  .c4n-experience {
    display: block;
  }




  .c4n-mobile-registration {
    position: fixed;
    z-index: 900;
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    left: max(0.75rem, env(safe-area-inset-left, 0px));
    display: flex;
    min-height: 3.5rem;
    padding: 0.9rem 1rem;
    align-items: center;
    justify-content: center;
    border: var(--c4n-rule) solid #ff9a6d;
    border-radius: 0.125rem;
    background: var(--c4n-orange);
    color: #190b06;
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 2rem));
    visibility: hidden;
    transition:
      opacity 180ms ease,
      transform 200ms var(--c4n-ease-out),
      visibility 0s linear 200ms;
  }

  .c4n-mobile-registration.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .c4n-mobile-registration:active {
    transform: scale(0.97);
  }

  .c4n-footer {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    justify-items: start;
  }

  .c4n-footer__claim {
    justify-self: start;
    text-align: left;
  }

  .c4n-footer__links {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 400px) {
  .c4n-lockup > span:first-child {
    max-width: 5.3rem;
    white-space: normal;
  }

  .c4n-nav__registration {
    font-size: 0.5625rem;
  }

  .c4n-event.is-ready .c4n-nav__toggle span {
    position: absolute;
    width: 0.0625rem;
    height: 0.0625rem;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .c4n-event.is-ready .c4n-nav__toggle::before,
  .c4n-event.is-ready .c4n-nav__toggle::after {
    width: 1rem;
    height: var(--c4n-rule);
    background: currentColor;
    content: "";
  }

  .c4n-event.is-ready .c4n-nav__toggle {
    display: grid;
    gap: 0.35rem;
    place-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.c4n-gin-page {
    scroll-behavior: auto;
  }

  .c4n-nav,
  .c4n-nav__links a,
  .c4n-nav__registration,
  .c4n-nav__toggle,
  .c4n-button,
  .c4n-topic,
  .c4n-field input:not([type="checkbox"]):not([type="hidden"]),
  .c4n-field--privacy input[type="checkbox"] + label::after,
  /* Full prefix required: the base rule is `.c4n-event.is-ready
     .c4n-nav__menu` at 0,3,0, so a bare `.c4n-nav__menu` would lose and the
     open menu would keep its 180ms fade. Same trap already fixed for inputs. */
  .c4n-event.is-ready .c4n-nav__menu,
  .c4n-mobile-registration {
    transition-duration: 120ms;
    transition-property: color, background-color, border-color, opacity, visibility;
  }

  .c4n-event.is-ready .c4n-hero__copy > *,
  .c4n-button--submit [data-submit-progress]:not([hidden])::before,
  /* El cielo se queda: quieto, pero visible. Reducir movimiento no es apagar la
     escenografía, es dejar de moverla -- las estrellas siguen contando que es de
     noche sin desplazarse ni un píxel. Prefijo completo en la cuenta regresiva
     porque la regla base es `.c4n-countdown.is-visible .c4n-countdown__unit`. */
  /* El modal aparece en su sitio, sin subir ni escalar; el fundido de opacidad
     se queda porque ayuda a entender que algo se abrió encima. Incluye el
     estado de partida, o la entrada seguiría moviéndose desde ahí. */
  .c4n-privacy,
  .c4n-privacy[open] {
    transform: none;
  }

  @starting-style {
    .c4n-privacy[open] {
      transform: none;
    }
  }

  .c4n-stars__layer,
  .c4n-nav::after,
  .c4n-agenda__backdrop::before,
  .c4n-conversation__backdrop::before,
  .c4n-experience__backdrop::before,
  .c4n-countdown.is-visible .c4n-countdown__unit,
  /* Prefijo completo, igual que en el menú: la regla base lleva el atributo y el
     `:not()`, así que un selector más corto perdería y las secciones seguirían
     desplazándose. El script además no repite la entrada al pulsar el menú. */
  [data-c4n-section].is-entered > *:not([aria-hidden="true"]),
  /* La ligada al scroll del carrete. Aquí `animation: none` es obligatorio y no
     basta con neutralizar los valores: mientras la animación siga declarada, su
     estado interpolado gana a cualquier `opacity` o `transform` que se ponga
     fuera, porque una animación en curso pisa las declaraciones normales. */
  .c4n-gallery-section.is-entered .c4n-mosaic__slot {
    animation: none;
    transform: none;
    clip-path: inset(0 0 0 0);
  }

  /* El fundido se queda (es opacidad, ayuda a entender el cambio) pero sin
     desenfoque ni escala, que son movimiento. El script además no rota solo. */
  .c4n-mosaic__img {
    filter: none;
    transform: none;
    transition-property: opacity;
  }

  .c4n-event.is-ready .c4n-nav__menu,
  .c4n-mobile-registration,
  .c4n-mobile-registration.is-visible,
  .c4n-button:active,
  .c4n-nav__toggle:active,
  .c4n-nav__registration:active {
    transform: none;
  }
}

@media (forced-colors: active) {
  /* Decoración pura. En colores forzados los degradados se descartan y lo que
     queda son puntos sin relación con la paleta del sistema, así que se retira
     el cielo entero en vez de dejar un resto. */
  .c4n-stars,
  .c4n-nav::after,
  .c4n-agenda__backdrop::before,
  .c4n-conversation__backdrop::before,
  .c4n-experience__backdrop::before {
    display: none;
  }

  /* En colores forzados el text-shadow se descarta, así que las cifras sobre la
     fotografía se quedarían sin separación del fondo. Un relleno opaco del
     sistema es la única forma honesta de mantenerlas legibles. */
  .c4n-countdown,
  .c4n-experience__venue {
    padding: 0.5rem 0.75rem;
    background: Canvas;
  }

  /* Sin sombra ni velo desenfocado, el panel necesita un borde para
     distinguirse de la página que tiene detrás. */
  .c4n-privacy {
    border: 0.125rem solid CanvasText;
  }

  .c4n-privacy__close {
    border: var(--c4n-rule) solid CanvasText;
  }

  .c4n-nav__registration,
  .c4n-button,
  .c4n-field input,
  .c4n-field--privacy input[type="checkbox"] + label::before,
  .c4n-registration__status,
  .c4n-registration__unavailable {
    border: 0.125rem solid currentColor;
  }

  /* En colores forzados el velo del pie se descarta; una caja del sistema es
     la única forma honesta de mantenerlo legible sobre la foto. */
  .c4n-mosaic__caption {
    background: Canvas;
    color: CanvasText;
    padding: 0.6rem 0.75rem;
  }

  .c4n-mosaic__slot {
    border: var(--c4n-rule) solid CanvasText;
  }

  .c4n-field input[aria-invalid="true"] {
    outline: 0.1875rem double currentColor;
  }

  .c4n-agenda__item::before {
    border: 0.1875rem solid CanvasText;
  }
}