/* SKIP · estilos de la web. Un solo archivo para todas las plantillas.
   Primero Nocturna, el sistema de diseño de SKIP (clases noc-), y después las piezas propias de la web (clases web-). */

/* ==========================================================================
   NOCTURNA · el sistema de SKIP
   Una sección, una idea. La pieza se arma con un catálogo cerrado de módulos (portada, cifras, palabras,
   cifra corta, herramienta, fases, cifra gigante, datos, filas y cierre) sobre una rejilla de 12 columnas.
   Los claros se turnan crema y lienzo. El negro, con sus luces, va en la portada, un momento central
   y el cierre. La tipografía gigante cortada por los bordes es el recurso que distingue al sistema. La cifra
   gigante completa con una lista al lado, la cifra corta en las secciones cortas y las palabras en espejo, enteras.
   Cada sección abre con su índice (01, 02...) y nunca lleva un párrafo debajo del título.
   Todo cuelga de .noc y usa el prefijo noc-. Las variables --noc-* tienen respaldo sin tokens.css.
   ========================================================================== */
.noc {
  --noc-crema: var(--crema, #faf8f3); --noc-arena: var(--arena, #efede7); --noc-lienzo: var(--lienzo, #e6e2da); --noc-negro: var(--negro, #0a0a0a);
  --noc-naranja: var(--naranja, #e85b03); --noc-naranja-profundo: var(--naranja-profundo, #c24e03); --noc-naranja-hover: #f16001;
  --noc-gris-oscuro: var(--gris-oscuro, #333333); --noc-gris: var(--gris, #646464); --noc-gris-claro: var(--gris-claro, #a7a7a7);
  --noc-blanco: var(--blanco, #f9f9f9); --noc-acento-texto: #b84502; --noc-acento-lienzo: var(--acento-lienzo, #a84002);
  --noc-tarjeta: #ffffff; --noc-borde: #e3e0d8;
  --noc-font: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --noc-margen: clamp(20px, 5vw, 64px);
  --noc-col: 24px;
  --noc-seccion: clamp(96px, 10.8vw, 156px);
  --noc-seccion-corta: clamp(72px, 7.6vw, 110px);
  --noc-titulo-fs: clamp(34px, 3.9vw, 56px);
  color-scheme: light; background: var(--noc-crema); color: var(--noc-gris-oscuro);
  font-family: var(--noc-font); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
.noc *, .noc *::before, .noc *::after { box-sizing: border-box; }
.noc img { max-width: 100%; }
.noc :where(p, h1, h2, h3, ol, ul, dl, dd) { margin: 0; }
.noc :where(ol, ul) { padding: 0; list-style: none; }
.noc :where(h1, h2, h3) { text-wrap: balance; font-weight: 700; }
.noc :where(a) { color: inherit; }
.noc :focus-visible { outline: 2px solid var(--noc-fuerte, var(--noc-gris-oscuro)); outline-offset: 3px; }
.noc-num { font-variant-numeric: tabular-nums; }
.noc-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: var(--noc-margen); position: relative; }
/* Rejilla de 12 columnas. Solo hay tres bordes izquierdos: columna 1, columna 4 (la frase de una fila) y columna 7 (la mitad). */
.noc-rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); }

/* Secciones. Crema por defecto. Cada fondo define sus tintas, también la de sus cifras (--noc-cifra). */
.noc-sec {
  --noc-bg: var(--noc-crema); --noc-fuerte: var(--noc-gris-oscuro); --noc-tx: var(--noc-gris-oscuro); --noc-tx2: var(--noc-gris);
  --noc-ln: #dcd7cc; --noc-ln2: #bdb7aa; --noc-acc: var(--noc-acento-texto); --noc-cifra: var(--noc-naranja);
  position: relative; overflow: hidden; isolation: isolate; padding-block: var(--noc-seccion); background-color: var(--noc-bg); color: var(--noc-tx);
}
.noc-sec--corta { padding-block: var(--noc-seccion-corta); }
/* Lienzo. Gris cálido sólido y sin luces, el claro que se turna con la crema. El naranja no llega a 3 a 1 sobre
   lienzo (2,74), así que las cifras van en naranja profundo (3,71) y los rótulos en acento-lienzo (4,78). */
.noc-sec--lienzo { --noc-bg: var(--noc-lienzo); --noc-ln: #c5c2bb; --noc-ln2: #bab7b0; --noc-acc: var(--noc-acento-lienzo); --noc-cifra: var(--noc-naranja-profundo); }
/* Arena. Tercer claro en reserva. Solo junto a un negro, porque junto a la crema o al lienzo casi no se nota. */
.noc-sec--arena { --noc-bg: var(--noc-arena); --noc-ln: #d6d1c6; }
.noc-sec--negro { --noc-bg: var(--noc-negro); --noc-fuerte: var(--noc-blanco); --noc-tx: #ffffffd9; --noc-tx2: #ffffff9e; --noc-ln: #ffffff26; --noc-ln2: #ffffff4d; --noc-acc: var(--noc-naranja); }
/* Las cifras naranja brillan solo sobre negro. */
.noc-sec--negro :is(.noc-dato__cifra, .noc-cifras dt) { text-shadow: 0 0 110px #e85b0366; }
.noc-sec--negro .noc-fases b { text-shadow: 0 0 90px #e85b0359; }

/* Luces de fondo sobre negro. Una receta por sección negra. */
.noc-luz-portada {
  background-image: linear-gradient(to right, #ffffff0d 1px, #ffffff00 1px), linear-gradient(to bottom, #ffffff0d 1px, #ffffff00 1px), radial-gradient(circle at 95% 7%, #e85b034d 0%, #e85b0300 42%);
  background-size: 84px 84px, 84px 84px, auto;
}
.noc-luz-esquinas { background-image: radial-gradient(ellipse 45% 55% at 0% 0%, #e85b0338 0%, #e85b0300 72%), radial-gradient(ellipse 45% 55% at 100% 0%, #e85b0338 0%, #e85b0300 72%), radial-gradient(ellipse 45% 55% at 0% 100%, #e85b0338 0%, #e85b0300 72%), radial-gradient(ellipse 45% 55% at 100% 100%, #e85b0338 0%, #e85b0300 72%); }
.noc-luz-lados { background-image: radial-gradient(ellipse 28% 95% at -3% 50%, #e85b0340 0%, #e85b0300 72%), radial-gradient(ellipse 28% 95% at 103% 50%, #e85b0340 0%, #e85b0300 72%); }
.noc-luz-vertical { background-image: radial-gradient(ellipse 62% 70% at 50% 0%, #e85b0340 0%, #e85b0300 72%), radial-gradient(ellipse 62% 60% at 50% 100%, #e85b032e 0%, #e85b0300 72%); }
.noc-luz-cierre {
  background-image: linear-gradient(to right, #ffffff0d 1px, #ffffff00 1px), linear-gradient(to bottom, #ffffff0d 1px, #ffffff00 1px), radial-gradient(ellipse 95% 30% at 50% -3%, #e85b0340 0%, #e85b0300 72%), radial-gradient(ellipse 95% 30% at 50% 103%, #e85b0333 0%, #e85b0300 72%);
  background-size: 84px 84px, 84px 84px, auto, auto;
}
/* El isotipo blanco casi invisible. Solo en la portada, completo y sin pisar texto. */
.noc-isotipo { position: absolute; z-index: -1; right: -60px; bottom: 10px; width: min(30%, 430px); opacity: .035; pointer-events: none; }

/* Tipografía. Tres niveles por sección como máximo: el índice, el título o la frase, y el contenido. */
.noc-titulo { font-size: var(--noc-titulo-fs); line-height: 1.04; letter-spacing: -0.03em; font-weight: 500; color: var(--noc-fuerte); text-wrap: balance; }
.noc-rotulo { font-size: 17px; line-height: 24px; font-weight: 500; color: var(--noc-acc); }
.noc-nota { font-size: 16px; line-height: 1.5; color: var(--noc-tx2); text-wrap: pretty; }
.noc :where(p) { text-wrap: pretty; }

/* Índice. Número de la sección, un filete corto y su nombre. Abre toda sección menos la portada. */
.noc-indice { display: flex; align-items: center; gap: 14px; font-size: 17px; line-height: 24px; font-weight: 500; color: var(--noc-tx2); }
.noc-indice b { display: inline-flex; align-items: center; gap: 14px; font-weight: 700; color: var(--noc-acc); font-variant-numeric: tabular-nums; }
.noc-indice b::after { content: ""; width: 32px; height: 1px; background: var(--noc-ln2); }

/* Encabezados. Solo hay tres.
   Centrado: el índice y el título centrados, sobre un contenido simétrico (datos, cifras).
   Izquierda: el índice y el título en la columna 1, sobre un contenido que arranca a la izquierda (filas, fases, herramientas, cierre).
   Columna 7: el índice y el título o la frase en la columna 7, junto a una cifra gigante (completa o corta). */
.noc-encabezado { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.noc-encabezado .noc-titulo { max-width: 20ch; }
.noc-encabezado--izquierda { align-items: flex-start; text-align: left; }
.noc-encabezado--izquierda .noc-titulo { max-width: 32ch; }
.noc-encabezado + * { margin-top: clamp(48px, 5.6vw, 80px); }

/* Portada */
.noc-portada { min-height: min(100vh, 920px); padding-block: 40px 56px; display: flex; }
.noc-portada > .noc-wrap { display: flex; flex-direction: column; }
.noc-portada__barra { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid #ffffff29; }
.noc-portada__barra img { height: 30px; width: auto; display: block; }
.noc-portada__barra p { font-size: 17px; font-weight: 500; color: #ffffff8c; }
.noc-portada__centro { margin-block: clamp(64px, 12vh, 140px) clamp(48px, 8vh, 96px); }
.noc-portada__entrada { display: flex; align-items: center; gap: 16px; font-size: 17px; font-weight: 500; color: #ffffff99; margin-bottom: 26px; }
.noc-portada__entrada::before { content: ""; width: 40px; height: 2px; background: var(--noc-naranja); flex: none; }
.noc-portada__titulo { font-size: clamp(40px, 6.2vw, 84px); line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--noc-blanco); }
.noc-portada__parrafo { margin-top: 40px; max-width: 640px; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; color: #ffffffd1; text-wrap: pretty; }
.noc-ficha { margin-top: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--noc-col); row-gap: 20px; border-top: 1px solid #ffffff2e; padding-top: 28px; }
.noc-ficha dt { font-size: 17px; font-weight: 500; color: var(--noc-naranja); margin-bottom: 8px; }
.noc-ficha dd { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.4; font-weight: 500; color: #ffffffeb; max-width: 22ch; }

/* Datos. Dos cifras que se comparan, cada una con una frase de dos líneas, y la fuente una sola vez debajo.
   La que cuenta la historia va en el color de cifra y la otra en tinta (noc-dato--tinta). */
.noc-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; row-gap: 0; max-width: 920px; margin-inline: auto; }
.noc-dato { display: grid; grid-row: span 2; grid-template-rows: subgrid; justify-items: center; align-content: start; text-align: center; padding-inline: 32px; }
.noc-dato + .noc-dato { border-left: 1px solid var(--noc-ln2); }
.noc-dato__cifra { font-size: clamp(96px, 11.8vw, 170px); line-height: .86; font-weight: 700; letter-spacing: -0.055em; color: var(--noc-cifra); white-space: nowrap; font-variant-numeric: tabular-nums; }
.noc-dato--tinta .noc-dato__cifra { color: var(--noc-fuerte); text-shadow: none !important; }
/* La unidad de una cifra (días, h, semanas) va en <small>, a un tercio del tamaño. */
.noc-dato__cifra small, .noc-cifras dt small { font-size: .32em; letter-spacing: -0.01em; margin-left: .14em; }
.noc-dato p { margin-top: 24px; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.35; font-weight: 500; color: var(--noc-fuerte); max-width: 360px; text-wrap: balance; }
.noc-fuente { display: block; margin-top: clamp(40px, 4.4vw, 56px); text-align: center; font-size: 16px; color: var(--noc-tx2); }

/* Cifras en fila. Tres cifras completas a 96 px, cada una con su nombre en una línea. Logos aparte. */
.noc-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; row-gap: 0; }
.noc-cifras > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; justify-items: center; align-content: start; text-align: center; padding-inline: 16px; }
.noc-cifras > div + div { border-left: 1px solid var(--noc-ln2); }
.noc-cifras dt { font-size: clamp(56px, 6.6vw, 96px); line-height: .92; font-weight: 700; letter-spacing: -0.05em; color: var(--noc-cifra); font-variant-numeric: tabular-nums; white-space: nowrap; }
.noc-cifras dd { margin-top: 18px; font-size: 20px; line-height: 1.35; font-weight: 500; color: var(--noc-fuerte); }
.noc-logos-titulo { margin-top: clamp(72px, 8vw, 112px); display: flex; justify-content: center; }
.noc-logos { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; }
.noc-logos > div { flex: 0 0 20%; display: grid; place-items: center; height: 100px; padding: 16px; }
.noc-logos img { display: block; filter: grayscale(1) brightness(.62) contrast(1.6); opacity: .72; }

/* Fases. Cuatro pasos en las columnas 1, 4, 7 y 10, alineados a la izquierda, bajo un solo filete. */
.noc-fases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--noc-col); }
.noc-fases:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.noc-fases li { display: flex; flex-direction: column; align-items: flex-start; }
.noc-fases b { display: block; align-self: stretch; font-size: clamp(80px, 8.4vw, 120px); line-height: .692; padding-bottom: 18px; border-bottom: 1px solid var(--noc-ln2); font-weight: 700; letter-spacing: -0.04em; color: var(--noc-cifra); font-variant-numeric: proportional-nums; }
.noc-fases h3 { margin-top: 26px; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.15; color: var(--noc-fuerte); }
.noc-fases p { margin-top: 8px; font-size: 18px; line-height: 1.45; color: var(--noc-tx); max-width: 22ch; }

/* Cifra gigante. Una por pieza. La cifra va en las columnas 1 a 6, cortada por el borde izquierdo, y el texto
   en la columna 7. SKIP.nocturna.ajustarCifras la mide para que mida lo mismo que el texto y la centra en alto. */
.noc-gigante { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); }
.noc-gigante__caja { position: relative; grid-column: 1 / 7; }
.noc-gigante__texto { grid-column: 7 / 13; }
.noc-giga { position: absolute; top: 0; right: 0; margin: 0; font-size: 560px; font-weight: 700; line-height: 1; letter-spacing: -0.06em; color: var(--noc-cifra); white-space: nowrap; pointer-events: none; user-select: none; font-variant-numeric: proportional-nums; }
.noc-giga__base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.noc-gigante__texto .noc-indice + .noc-titulo { margin-top: 22px; }
.noc-lista { margin-top: 40px; border-top: 3px solid var(--noc-fuerte); }
.noc-lista li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-content: start; padding-block: 18px; border-top: 1px solid var(--noc-ln); }
.noc-lista li:first-child { border-top: 0; }
.noc-lista b { grid-row: span 2; font-size: 28px; line-height: 1.05; font-weight: 700; color: var(--noc-cifra); font-variant-numeric: tabular-nums; }
.noc-lista h3 { grid-column: 2; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; color: var(--noc-fuerte); }
.noc-lista p { grid-column: 2; margin-top: 4px; font-size: 17px; line-height: 1.45; color: var(--noc-tx); }
.noc-medida { margin-top: 24px; font-size: 17px; color: var(--noc-tx); }
.noc-medida .noc-rotulo { display: block; margin-bottom: 2px; }

/* Cifra corta. La cifra gigante a la medida de una sección corta, que siempre la lleva: sin cifra no hay sección
   corta. La cifra arranca a la altura del filete de la frase, la corta el borde izquierdo y la corta el borde de
   abajo, y queda a 48 px de la columna 7. La frase va en la columna 7, abre con un filete de 3 px y empieza con la
   unidad de la cifra, en su color. Los símbolos (%) van pegados a la cifra en <small>. Para cifras de dos o tres
   caracteres; un solo dígito va en la cifra gigante completa. SKIP.nocturna.ajustarCifras la mide y busca un
   corte que no deje trozos sueltos. */
.noc-corta { padding-block: var(--noc-seccion-corta); }
.noc-corta > .noc-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); position: static; }
.noc-corta__texto { grid-column: 7 / 13; min-height: var(--noc-corta-alto, clamp(220px, 23vw, 330px)); display: flex; flex-direction: column; }
.noc-corta__frase { margin-top: 22px; padding-top: 26px; border-top: 3px solid var(--noc-fuerte); font-size: var(--noc-titulo-fs); line-height: 1.06; letter-spacing: -0.03em; font-weight: 500; color: var(--noc-fuerte); text-wrap: balance; }
.noc-corta__frase b { font-weight: 700; color: var(--noc-cifra); white-space: nowrap; }
.noc-giga--corta { top: 0; left: 0; right: auto; z-index: -1; }
/* Naranja si es lo que SKIP logra o entrega. En tinta si es un costo o un problema (la espera). */
.noc-giga--tinta { color: var(--noc-fuerte); }
/* Si la cifra sale de otra sección o de una fuente, una sola línea abajo lo dice, como la fuente de los datos. */
.noc-corta__nota { margin-top: auto; padding-top: 16px; font-size: 16px; line-height: 1.5; color: var(--noc-tx2); }
.noc-giga small { font-size: .32em; letter-spacing: -0.02em; margin-left: .05em; position: relative; top: -1.5em; }
.noc-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Filas. Ideas hermanas una debajo de otra, nunca en columnas de texto: rótulo en la columna 1, título en la 4
   y una línea en la 9. Para lo que incluye una propuesta o los hallazgos de un reporte. */
.noc-filas { border-top: 1px solid var(--noc-ln2); }
.noc-fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); align-items: baseline; padding-block: clamp(26px, 3vw, 40px); border-bottom: 1px solid var(--noc-ln2); }
.noc-fila > .noc-rotulo { grid-column: 1 / 4; }
.noc-fila > h3 { grid-column: 4 / 9; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; color: var(--noc-fuerte); }
.noc-fila > p:not(.noc-rotulo) { grid-column: 9 / 13; font-size: 18px; line-height: 1.45; color: var(--noc-tx); }

/* Palabras en espejo. Dos ideas hermanas, cada una con una palabra gigante en tinta que se lee de corrido con su
   frase. Las palabras van enteras, sin cortes, dentro de la rejilla. La primera abre su frase y llena las columnas
   1 a 6, con la frase en la columna 7. La segunda cierra su frase, va en espejo (noc-palabra--espejo) y llena las
   columnas 7 a 12, con la frase en la columna 1. Cada frase abre con un filete de 3 px y su rótulo. La palabra
   va centrada en alto frente a su frase. SKIP.nocturna.ajustarCifras las mide. Es Quiénes somos en la presentación. */
.noc-palabras > .noc-wrap > .noc-indice + .noc-palabra { margin-top: clamp(56px, 6.4vw, 92px); }
.noc-palabra { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); align-items: start; }
.noc-palabra + .noc-palabra { margin-top: clamp(48px, 5vw, 72px); }
.noc-palabra__texto { grid-column: 7 / 13; border-top: 3px solid var(--noc-fuerte); padding-top: 22px; }
.noc-palabra--espejo .noc-palabra__texto { grid-column: 1 / 7; }
.noc-palabra__texto .noc-rotulo { margin-bottom: 10px; }
.noc-palabra__texto h3 { font-size: clamp(28px, 3.1vw, 44px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 500; color: var(--noc-fuerte); text-wrap: pretty; }
.noc-palabra__texto h3 b { font-weight: 700; color: var(--noc-cifra); }
.noc-palabra__linea { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.noc-palabra__gigante { position: absolute; top: 0; left: 0; margin: 0; font-size: 240px; line-height: 1; font-weight: 700; letter-spacing: -0.06em; color: var(--noc-fuerte); white-space: nowrap; pointer-events: none; user-select: none; }

/* Herramienta. Dos tarjetas iguales en las columnas 1 y 7: controles en blanco y resultado en negro sin luces.
   Va sobre lienzo. El resultado pone arriba lo que importa (los totales) y debajo el desglose. */
.noc-herr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--noc-col); align-items: stretch; }
.noc-herr > div { min-width: 0; display: flex; flex-direction: column; gap: 26px; border-radius: 24px; padding: clamp(26px, 3vw, 40px); }
.noc-herr__ctrl { background: var(--noc-tarjeta); border: 1px solid var(--noc-borde); --noc-fuerte: var(--noc-gris-oscuro); --noc-tx: var(--noc-gris-oscuro); --noc-tx2: var(--noc-gris); --noc-ln: #e3e0d8; --noc-ln2: #c9c4b8; --noc-acc: var(--noc-acento-texto); color: var(--noc-tx); }
.noc-herr__res { background-color: var(--noc-negro); color: #ffffffd9; --noc-fuerte: var(--noc-blanco); --noc-tx: #ffffffd9; --noc-tx2: #ffffff99; --noc-ln: #ffffff21; --noc-ln2: #ffffff40; }
.noc-herr__titulo { padding-bottom: 14px; border-bottom: 1px solid var(--noc-ln); font-size: 19px; font-weight: 700; color: var(--noc-fuerte); }
.noc-herr__res .noc-herr__titulo { color: var(--noc-naranja); }
.noc-herr .noc-nota { font-size: 17px; }
.noc-etq { display: flex; justify-content: space-between; gap: 12px; font-size: 17px; font-weight: 500; color: var(--noc-fuerte); margin-bottom: 10px; }
.noc-etq b { color: var(--noc-fuerte); }
.noc-ayuda { font-size: 17px; line-height: 1.5; color: var(--noc-tx2); margin-top: 10px; text-wrap: pretty; }
.noc-campo { display: flex; align-items: center; gap: 10px; border: 1px solid var(--noc-ln2); border-radius: 10px; padding: 0 14px; height: 52px; background: var(--noc-crema); }
.noc-campo span { font-weight: 500; font-size: 17px; color: var(--noc-tx2); }
.noc-campo input { flex: 1; min-width: 0; border: 0; background: transparent; font: 500 20px var(--noc-font); color: var(--noc-fuerte); outline: none; font-variant-numeric: tabular-nums; }
.noc-campo:focus-within { border-color: var(--noc-fuerte); }
.noc-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.noc-chip { border: 1px solid var(--noc-ln2); background: transparent; color: var(--noc-fuerte); border-radius: 999px; min-height: 44px; padding: 8px 12px; font: 500 16px/1.2 var(--noc-font); text-align: center; cursor: pointer; }
.noc-chip.is-on { background: var(--noc-naranja-profundo); border-color: var(--noc-naranja-profundo); color: var(--noc-blanco); font-weight: 700; }
.noc-tareas { margin-top: 14px; border-top: 1px solid var(--noc-ln); }
.noc-tarea { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 8px; border-bottom: 1px solid var(--noc-ln); }
.noc-tarea span { font-size: 17px; min-width: 0; color: var(--noc-tx); }
.noc-paso { display: inline-flex; align-items: center; border: 1px solid var(--noc-ln2); border-radius: 10px; overflow: hidden; height: 44px; flex: none; background: var(--noc-crema); }
.noc-paso button { width: 42px; height: 100%; border: 0; background: transparent; font: 500 20px var(--noc-font); color: var(--noc-fuerte); cursor: pointer; }
.noc-paso button:disabled { color: var(--noc-gris-claro); cursor: not-allowed; }
.noc-paso output { min-width: 80px; text-align: center; font: 500 17px var(--noc-font); color: var(--noc-fuerte); border-inline: 1px solid var(--noc-ln2); align-self: stretch; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.noc-paso--peq { height: 38px; } .noc-paso--peq button { width: 36px; } .noc-paso--peq output { min-width: 84px; font-size: 17px; }
.noc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--noc-ln2); border-radius: 12px; background: var(--noc-crema); }
.noc-seg button { height: 44px; border: 0; border-radius: 8px; background: transparent; font: 500 17px var(--noc-font); color: var(--noc-fuerte); cursor: pointer; }
.noc-seg button[aria-pressed="true"] { background: var(--noc-naranja-profundo); color: var(--noc-blanco); font-weight: 700; }
.noc-rango { width: 100%; accent-color: var(--noc-naranja-profundo); height: 28px; }
.noc-interruptor { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 0; border-top: 1px solid var(--noc-ln); border-bottom: 1px solid var(--noc-ln); padding: 14px 0; background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
.noc-interruptor b { display: block; font-size: 17px; font-weight: 500; color: var(--noc-fuerte); }
.noc-interruptor small { display: block; font-size: 17px; color: var(--noc-tx2); }
.noc-interruptor i { flex: none; width: 48px; height: 28px; border-radius: 999px; background: var(--noc-ln2); position: relative; transition: background .15s ease; }
.noc-interruptor i::after { content: ""; position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--noc-tarjeta); transition: transform .15s ease; }
.noc-interruptor[aria-checked="true"] i { background: var(--noc-naranja-profundo); }
.noc-interruptor[aria-checked="true"] i::after { transform: translateX(20px); background: var(--noc-negro); }
.noc-grupo { display: flex; flex-direction: column; gap: 26px; }
.noc-grupo[hidden] { display: none !important; }
.noc-herr__res .noc-btn { margin-top: auto; align-self: flex-start; min-height: 48px; padding: 0 22px; font-size: 17px; }
.noc-herr__res dl div { display: flex; justify-content: space-between; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--noc-ln); font-size: 17px; }
.noc-herr__res dl div:first-child { border-top: 1px solid var(--noc-ln); }
.noc-herr__res dl div[hidden] { display: none; }
.noc-herr__res dt { color: var(--noc-tx); }
.noc-herr__res dd { font-weight: 700; color: var(--noc-fuerte); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.noc-herr__totales { display: flex; flex-direction: column; gap: 22px; }
.noc-total span { display: block; font-size: 18px; font-weight: 500; color: var(--noc-naranja); }
.noc-total b { display: block; margin-top: 6px; font-size: clamp(40px, 4.4vw, 64px); line-height: 1; font-weight: 700; letter-spacing: -0.035em; color: var(--noc-blanco); text-shadow: 0 0 48px #e85b0359; font-variant-numeric: tabular-nums; white-space: nowrap; }
.noc-total--sec b { font-size: clamp(28px, 2.8vw, 40px); }
.noc-total[hidden] { display: none; }
.noc-total small { display: block; margin-top: 8px; font-size: 16px; color: var(--noc-tx2); }
/* Barras del resultado. Muestran el argumento como dato y se mueven con los controles. */
.noc-barras { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.noc-barra__fila { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; color: var(--noc-tx); margin-bottom: 6px; }
.noc-barra__fila b { color: var(--noc-fuerte); font-variant-numeric: tabular-nums; }
.noc-barra { position: relative; height: 8px; border-radius: 999px; background: #ffffff26; overflow: visible; }
.noc-barra i { position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); border-radius: 999px; background: var(--noc-blanco); transition: width .2s ease; }
.noc-barra--naranja i { background: var(--noc-naranja); }

/* Cierre. A la izquierda, como la portada: dos caminos en las columnas 1 y 7, cada uno con su botón, y los contactos en fila. */
.noc-caminos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; column-gap: var(--noc-col); row-gap: 0; }
.noc-caminos > div { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; justify-items: start; border-top: 1px solid var(--noc-ln2); padding-top: 24px; }
.noc-caminos h3 { margin: 8px 0 8px; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; color: var(--noc-fuerte); }
.noc-caminos p:not(.noc-rotulo) { font-size: 18px; color: var(--noc-tx); }
.noc-caminos .noc-btn { margin-top: 28px; }
.noc-contactos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--noc-col); row-gap: 20px; margin-top: clamp(56px, 6.4vw, 88px); }
.noc-contactos div { display: flex; flex-direction: column; gap: 2px; font-size: 17px; color: var(--noc-tx2); }
.noc-contactos b { font-size: 19px; color: var(--noc-fuerte); }
.noc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border: 1px solid transparent; border-radius: 12px; background: var(--noc-naranja); color: var(--noc-blanco); font: 700 19px/1 var(--noc-font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.noc-btn:hover { background: var(--noc-naranja-hover); }
.noc-btn svg { width: 20px; height: 20px; flex: none; }
.noc-btn--contorno { background: transparent; border-color: var(--noc-fuerte); color: var(--noc-fuerte); }
.noc-btn--contorno:hover { background: transparent; border-color: var(--noc-naranja); }
/* La sección que termina en el pie cierra con 48 px abajo. */
.noc-sec:has(.noc-pie) { padding-bottom: 48px; }
.noc-pie { display: flex; justify-content: space-between; gap: 16px; margin-top: clamp(64px, 7vw, 96px); padding-top: 20px; border-top: 1px solid var(--noc-ln); font-size: 16px; color: var(--noc-tx2); }

/* Tablet */
@media (max-width: 900px) {
  .noc-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .noc-logos > div { flex-basis: 25%; }
  .noc-herr { grid-template-columns: 1fr; }
  .noc-fases { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .noc-gigante { display: block; }
  .noc-gigante__caja { height: 300px; }
  .noc-giga { font-size: 430px; top: auto; bottom: 0; right: auto; left: -0.12em; }
  .noc-fila > .noc-rotulo, .noc-fila > h3, .noc-fila > p:not(.noc-rotulo) { grid-column: 1 / -1; }
  .noc-fila > h3 { margin: 6px 0 10px; }
  .noc-palabra { display: flex; flex-direction: column; }
  .noc-palabra__gigante { position: relative; font-size: 30vw; line-height: .86; }
  .noc-palabra:not(.noc-palabra--espejo) .noc-palabra__texto { margin-top: 24px; }
  .noc-palabra--espejo .noc-palabra__gigante { margin-top: 18px; }
  /* La cifra corta pasa entre el índice y la frase, cortada solo por la izquierda. */
  .noc-corta > .noc-wrap { display: flex; flex-direction: column; }
  .noc-corta__texto { display: contents; }
  .noc-corta__texto > .noc-indice { order: 1; }
  .noc-giga--corta { order: 2; position: relative; z-index: 0; top: auto; font-size: clamp(220px, 62vw, 400px); line-height: .8; margin: 20px 0 -.04em -.07em; }
  .noc-corta__frase { order: 3; margin-top: 18px; text-wrap: pretty; }
  .noc-corta__nota { order: 4; }
}
/* Teléfono */
@media (max-width: 600px) {
  .noc-portada__barra p { display: none; }
  .noc-ficha { grid-template-columns: 1fr; }
  .noc-isotipo { display: none; }
  .noc-datos, .noc-cifras, .noc-caminos, .noc-contactos { grid-template-columns: 1fr; }
  .noc-dato + .noc-dato, .noc-cifras > div + div { border-left: 0; border-top: 1px solid var(--noc-ln2); }
  .noc-dato, .noc-cifras > div { padding-inline: 0; padding-block: 28px; }
  .noc-fases { grid-template-columns: 1fr; row-gap: 0; }
  .noc-fases li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; padding-block: 18px; border-bottom: 1px solid var(--noc-ln); }
  .noc-fases { border-top: 1px solid var(--noc-ln2); }
  .noc-fases li b { grid-row: span 2; font-size: 44px; line-height: 1; padding-bottom: 0; border-bottom: 0; }
  .noc-fases h3 { margin-top: 2px; font-size: 21px; }
  .noc-fases p { max-width: none; font-size: 17px; }
  .noc-lista li { grid-template-columns: 36px minmax(0, 1fr); }
  .noc-logos > div { flex-basis: 50%; height: 84px; padding: 10px; }
  .noc-logos img { transform: scale(.78); }
  .noc-chip { padding: 8px 10px; }
  .noc-caminos > div { grid-row: auto; display: block; margin-bottom: 32px; }
  .noc-btn { white-space: normal; text-align: left; }
  .noc-pie { flex-direction: column; }
}

/* ===== Nocturna · Web. Menú fijo, portada con botones, preguntas y pie. Solo actúan donde están sus clases. ===== */
html:has(.noc-menu) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.noc-menu) { scroll-behavior: auto; } }
body:has(.noc-menu)::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: #0a0a0a; }
html:has(.noc-menu) .noc-sec { scroll-margin-top: var(--nocturna-menu, 72px); }

/* Menú fijo. Negro como la portada, con el imagotipo, de tres a cinco enlaces y el botón de agendar. */
.noc-menu { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: #0a0a0aeb; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid #ffffff1f; }
.noc-menu__barra { height: var(--nocturna-menu, 72px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.noc-menu__logo img { display: block; height: 26px; width: auto; }
.noc-menu__enlaces { display: flex; align-items: center; gap: 30px; }
.noc-menu__enlaces a { font-size: 17px; font-weight: 500; color: #ffffffc2; text-decoration: none; padding-block: 6px; border-bottom: 1px solid transparent; }
.noc-menu__enlaces a.is-activo { color: #f9f9f9; border-bottom-color: var(--noc-naranja); }
@media (hover: hover) { .noc-menu__enlaces a:hover { color: #f9f9f9; border-bottom-color: var(--noc-naranja); } }
.noc-menu .noc-btn { min-height: 44px; padding: 0 18px; font-size: 17px; }
.noc-menu__boton { display: none; height: 44px; padding: 0 16px; border: 1px solid #ffffff4d; border-radius: 12px; background: transparent; color: #f9f9f9; font: 500 17px var(--noc-font); cursor: pointer; }
.noc-menu__panel { display: none; }

/* Portada de la web. Sin su barra, porque la barra es el menú, y con dos botones. */
.noc-portada.noc-portada--web { min-height: min(calc(100vh - var(--nocturna-menu, 72px)), 840px); padding-top: 24px; }
.noc-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.noc-acciones .noc-btn--contorno { border-color: #ffffff66; }
@media (prefers-reduced-motion: no-preference) {
  .noc-portada--web .noc-portada__entrada, .noc-portada--web .noc-portada__titulo, .noc-portada--web .noc-portada__parrafo, .noc-portada--web .noc-acciones, .noc-portada--web .noc-ficha { animation: noc-entra 240ms cubic-bezier(.2, .7, .2, 1) both; }
  .noc-portada--web .noc-portada__titulo { animation-delay: 60ms; }
  .noc-portada--web .noc-portada__parrafo { animation-delay: 120ms; }
  .noc-portada--web .noc-acciones { animation-delay: 180ms; }
  .noc-portada--web .noc-ficha { animation-delay: 240ms; }
}
@keyframes noc-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Preguntas. Cada pregunta abre su respuesta. El rótulo en la columna 1, la pregunta y la respuesta en la 4. */
.noc-preguntas { border-top: 1px solid var(--noc-ln2); }
.noc-pregunta { border-bottom: 1px solid var(--noc-ln2); }
.noc-pregunta summary { list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); align-items: baseline; padding-block: clamp(22px, 2.6vw, 34px); cursor: pointer; }
.noc-pregunta summary::-webkit-details-marker { display: none; }
.noc-pregunta summary .noc-rotulo { grid-column: 1 / 4; }
.noc-pregunta summary h3 { grid-column: 4 / 12; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; color: var(--noc-fuerte); }
.noc-pregunta summary i { grid-column: 12 / 13; justify-self: end; align-self: center; position: relative; width: 22px; height: 22px; }
.noc-pregunta summary i::before, .noc-pregunta summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--noc-cifra); transition: transform .2s ease; }
.noc-pregunta summary i::after { transform: rotate(90deg); }
.noc-pregunta[open] summary i::after { transform: rotate(0deg); }
@media (hover: hover) { .noc-pregunta summary:hover h3 { color: var(--noc-acc); } }
.noc-pregunta summary:focus-visible { outline: 2px solid var(--noc-naranja); outline-offset: 4px; border-radius: 4px; }
.noc-pregunta__respuesta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); padding-bottom: clamp(24px, 2.8vw, 36px); margin-top: -6px; }
.noc-pregunta__respuesta p { grid-column: 4 / 11; font-size: 20px; line-height: 1.5; color: var(--noc-tx); max-width: 52ch; }

/* Pie de la web, dentro del cierre, con el imagotipo, los enlaces y el año. */
.noc-pie.noc-pie--web { margin-top: clamp(64px, 7vw, 96px); padding-top: 28px; border-top: 1px solid var(--noc-ln); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); row-gap: 28px; }
.noc-pie__marca { grid-column: 1 / 5; display: flex; flex-direction: column; gap: 14px; }
.noc-pie__marca img { height: 24px; width: auto; align-self: flex-start; }
.noc-pie__marca p, .noc-pie__fin { font-size: 16px; color: var(--noc-tx2); }
.noc-pie__enlaces { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--noc-col); row-gap: 10px; align-content: start; }
.noc-pie__enlaces a { font-size: 17px; color: var(--noc-tx); text-decoration: none; }
.noc-pie__enlaces a:hover { color: var(--noc-naranja); }
.noc-pie__fin { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--noc-ln); }

@media (max-width: 900px) {
  .noc-menu__enlaces, .noc-menu__barra > .noc-btn { display: none; }
  .noc-menu__boton { display: inline-flex; align-items: center; }
  .noc-menu__panel { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--nocturna-menu, 72px)); overflow-y: auto; padding: 8px var(--noc-margen) 24px; background: #0a0a0a; border-top: 1px solid #ffffff1f; border-bottom: 1px solid #ffffff1f; }
  .noc-menu__panel:not([hidden]) { display: flex; flex-direction: column; }
  .noc-menu__panel a:not(.noc-btn) { padding-block: 14px; border-bottom: 1px solid #ffffff1f; font-size: 20px; font-weight: 500; color: #f9f9f9; text-decoration: none; }
  .noc-menu__panel .noc-btn { margin-top: 20px; align-self: flex-start; }
  .noc-pregunta summary .noc-rotulo { grid-column: 1 / 12; }
  .noc-pregunta summary h3 { grid-column: 1 / 12; margin-top: 6px; }
  .noc-pregunta summary i { grid-row: 2; }
  .noc-pregunta__respuesta p { grid-column: 1 / -1; font-size: 18px; }
  .noc-pie__marca, .noc-pie__enlaces { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .noc-pie__fin { flex-direction: column; } }


/* ==========================================================================
   WEB DE SKIP · lo que la web pide y Nocturna todavía no trae
   Todo lo de aquí arriba es el sistema, tal cual. Desde aquí, las piezas propias de la web, con el prefijo web-.
   Las que funcionen se pueden pasar al sistema como Nocturna · Web.
   ========================================================================== */

/* La letra, servida desde el mismo sitio. Sin Google Fonts, así no sale ninguna petición a terceros sin permiso. */
@font-face { font-family: "Space Grotesk"; src: url("fuentes/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }

:root { --nocturna-menu: 72px; --web-barra: 80px; --noc-font: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; color-scheme: light; }
body, button, input, textarea { font-family: var(--noc-font); }
html, body { margin: 0; background: #0a0a0a; }
body { min-height: 100vh; }
.noc { font-size: 18px; }

/* Accesibilidad. El botón naranja va siempre en 19 px negrita, con letra blanca. Zonas para tocar de 48 px. */
.noc-btn { min-height: 56px; font-size: 19px; }
.noc-menu .noc-btn { min-height: 48px; padding: 0 20px; font-size: 19px; }
.noc :is(a, button, summary, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--noc-naranja); outline-offset: 3px; border-radius: 4px; }
.web-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Lo que falta por definir se ve, en su lugar y con su tamaño. */
.web-pendiente { display: inline-block; padding: 2px 8px; border: 1px dashed currentColor; border-radius: 6px; font-weight: 500; letter-spacing: 0; opacity: .8; }

/* Enlace con flecha. Dice a dónde lleva. */
.web-enlace { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-size: 18px; font-weight: 700; color: var(--noc-fuerte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.web-enlace svg { width: 20px; height: 20px; flex: none; }
@media (hover: hover) { .web-enlace:hover { color: var(--noc-acc); } }

/* ---------- Menú ---------- */
.noc-menu__logo { display: inline-flex; align-items: center; min-height: 48px; }
.noc-menu__enlaces a { display: inline-flex; align-items: center; min-height: 48px; padding-block: 0; border-bottom-width: 2px; }
.noc-menu__enlaces a[aria-current="page"] { color: #f9f9f9; border-bottom-color: var(--noc-naranja); }
.noc-menu__barra > .noc-btn[aria-current="page"] { box-shadow: inset 0 0 0 2px #f9f9f9; }
.web-menu__boton { display: none; width: 48px; height: 48px; padding: 0; border: 1px solid #ffffff4d; border-radius: 12px; background: transparent; color: #f9f9f9; cursor: pointer; place-items: center; }
.web-menu__boton svg { width: 24px; height: 24px; }
.web-menu__boton .web-x { display: none; }
.web-menu__boton[aria-expanded="true"] .web-lineas { display: none; }
.web-menu__boton[aria-expanded="true"] .web-x { display: block; }
.noc-menu__panel a[aria-current="page"] { color: var(--noc-naranja); }

/* ---------- Botón de agendar en el celular. Siempre a la vista, abajo, sin abrir el menú. ---------- */
.web-agendar { display: none; }

/* ---------- Portada de la web ---------- */
.web-portada .noc-portada__centro { margin-block: clamp(40px, 7vh, 88px) clamp(40px, 6vh, 72px); }
.web-portada .noc-portada__titulo { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.02; max-width: none; }
.web-portada .noc-portada__parrafo { margin-top: 28px; max-width: 760px; }
.web-portada .noc-acciones { margin-top: 36px; }
.web-bajo-boton { margin-top: 14px; font-size: 17px; line-height: 1.45; color: #ffffffb8; max-width: 62ch; }
.noc-portada.web-portada--media { min-height: min(calc(100vh - var(--nocturna-menu)), 700px); }
.noc-portada.web-portada--corta { min-height: 0; padding-block: clamp(72px, 8vw, 120px) clamp(64px, 7vw, 104px); }
.web-portada--corta .noc-portada__centro { margin: 0; }
.web-portada--corta .noc-portada__titulo { max-width: 22ch; }
/* La entrada no esconde nada. Sube 16 px y nada más, para que el texto siempre esté a la vista. */
@keyframes noc-entra { from { transform: translateY(16px); } to { transform: none; } }

/* Barra de prueba. Las dos cifras aprobadas, al pie de la portada, en naranja que brilla sobre negro. */
.web-prueba { margin-top: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); border-top: 1px solid #ffffff2e; padding-top: 28px; }
.web-prueba li { grid-column: span 3; display: flex; flex-direction: column; }
.web-prueba li + li { grid-column: 4 / span 3; }
.web-prueba span:first-child { font-size: 17px; font-weight: 500; color: #ffffffb8; }
.web-prueba b { font-size: clamp(44px, 4.6vw, 72px); line-height: 1; font-weight: 700; letter-spacing: -0.045em; color: var(--noc-naranja); text-shadow: 0 0 110px #e85b0366; font-variant-numeric: proportional-nums; margin-block: 4px 8px; }
.web-prueba span:last-child { font-size: 19px; line-height: 1.3; font-weight: 500; color: #ffffffeb; }

/* ---------- Clientes ---------- */
.web-clientes h2 { font-size: 17px; line-height: 24px; font-weight: 500; color: var(--noc-acc); text-align: center; }
.web-logos { margin-top: 32px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 8px; }
.web-logo { height: 104px; display: grid; place-items: center; padding: 12px; }
.web-logo img { display: block; max-width: 100%; height: auto; filter: grayscale(1); opacity: .72; transition: filter .2s ease, opacity .2s ease; }
@media (hover: hover) { .web-logo:hover img { filter: none; opacity: 1; } }
.web-logo--pendiente span { display: grid; place-items: center; width: 100%; max-width: 150px; height: 56px; border: 1px dashed var(--noc-ln2); border-radius: 8px; font-size: 16px; font-weight: 500; color: var(--noc-tx2); text-align: center; }

/* ---------- Las dos líneas, en Palabras en espejo. La palabra gigante es el título de cada línea. ---------- */
.web-lineas .noc-palabra__gigante { letter-spacing: -0.055em; }
.web-lineas .noc-palabra__texto p { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--noc-fuerte); }
.web-lineas .noc-palabra__texto .web-enlace { margin-top: 14px; }

/* ---------- Pasos. Cinco pasos en filas, el número gigante en la columna 1 y el texto en la 4. ---------- */
.web-pasos { border-top: 1px solid var(--noc-ln2); counter-reset: paso; }
.web-pasos li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); align-items: start; padding-block: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--noc-ln2); }
.web-pasos b { grid-column: 1 / 4; grid-row: span 2; font-size: clamp(64px, 6.6vw, 96px); line-height: .74; font-weight: 700; letter-spacing: -0.04em; color: var(--noc-cifra); font-variant-numeric: proportional-nums; }
.noc-sec--negro .web-pasos b { text-shadow: 0 0 90px #e85b0359; }
.web-pasos h3 { grid-column: 4 / 12; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; color: var(--noc-fuerte); }
.web-pasos p { grid-column: 4 / 12; margin-top: 10px; font-size: 18px; line-height: 1.5; color: var(--noc-tx); max-width: 62ch; }

/* ---------- Testimonios. La frase en la columna 4 y la firma en la 1, como una fila. ---------- */
.web-testimonios { border-top: 1px solid var(--noc-ln2); }
.web-testimonio { margin: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); padding-block: clamp(30px, 3.4vw, 48px); border-bottom: 1px solid var(--noc-ln2); }
.web-testimonio blockquote { grid-column: 4 / 12; grid-row: 1; margin: 0; }
.web-testimonio blockquote p { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; color: var(--noc-fuerte); text-indent: -0.42em; }
.web-testimonio figcaption { grid-column: 1 / 4; grid-row: 1; padding-top: .3em; font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--noc-acc); }
.web-testimonios__apoyo { margin-top: 28px; margin-left: calc((100% - 11 * var(--noc-col)) / 12 * 3 + 3 * var(--noc-col)); max-width: 62ch; font-size: 18px; line-height: 1.5; color: var(--noc-tx2); }

/* ---------- Preguntas sin rótulo. La pregunta arranca en la columna 1 de su bloque. ---------- */
.web-preguntas .noc-pregunta summary h3 { grid-column: 1 / 12; }
.web-preguntas .noc-pregunta__respuesta p { grid-column: 1 / 11; }
.web-preguntas .noc-pregunta summary { min-height: 48px; }
.web-preguntas .noc-pregunta summary.is-foco { outline: 2px solid var(--noc-naranja); outline-offset: 4px; border-radius: 4px; }
.web-preguntas + .web-enlace { margin-top: 28px; }
/* El banco completo, por grupos. El título del grupo en la columna 1 y sus preguntas en la 4. */
.web-faq__grupo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); padding-block: clamp(40px, 4.4vw, 64px); }
.web-faq__grupo > h2 { padding-top: clamp(22px, 2.6vw, 34px); }
.web-faq__grupo:first-child { border-top: 0; padding-top: 0; }
.web-faq__grupo > h2 { grid-column: 1 / 4; align-self: start; position: sticky; top: calc(var(--nocturna-menu) + 28px); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; color: var(--noc-fuerte); }
.web-faq__grupo > .noc-preguntas { grid-column: 4 / 13; }
.web-faq__final { margin-top: clamp(40px, 4.4vw, 64px); }

/* ---------- Soluciones. Una sola frase, una línea por solución, cada una con su ícono. ---------- */
.web-soluciones { border-top: 1px solid var(--noc-ln2); }
.web-solucion { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); align-items: start; padding-block: clamp(24px, 2.6vw, 34px); border-bottom: 1px solid var(--noc-ln2); }
.web-solucion svg { grid-column: 1 / 4; width: 40px; height: 40px; color: var(--noc-fuerte); }
.web-solucion span { grid-column: 4 / 12; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; letter-spacing: -0.015em; font-weight: 500; color: var(--noc-fuerte); }
.web-soluciones__cierre { display: block; margin-top: 28px; margin-left: calc((100% - 11 * var(--noc-col)) / 12 * 3 + 3 * var(--noc-col)); font-size: 19px; line-height: 1.5; font-weight: 500; color: var(--noc-acc); }

/* ---------- Respaldo. El título en las columnas 1 a 6 y su texto en la 7. ---------- */
.web-respaldo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); align-items: start; }
.web-respaldo h2 { grid-column: 1 / 6; }
.web-respaldo p { grid-column: 7 / 13; padding-top: 22px; border-top: 3px solid var(--noc-fuerte); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.5; color: var(--noc-fuerte); }

/* ---------- Nosotros ---------- */
.web-texto { border-top: 1px solid var(--noc-ln2); }
.web-texto p { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); padding-block: clamp(30px, 3.4vw, 48px); border-bottom: 1px solid var(--noc-ln2); }
.web-texto p span { grid-column: 4 / 12; font-size: clamp(21px, 2vw, 27px); line-height: 1.4; letter-spacing: -0.01em; color: var(--noc-fuerte); }
.web-texto p b { font-weight: 700; }
.web-cifras dt { display: flex; flex-direction: column; align-items: center; }
.web-cifras dt .web-mas { display: block; margin-bottom: 10px; font-size: 20px; line-height: 1; letter-spacing: 0; font-weight: 500; color: #ffffffb8; text-shadow: none; }
.web-donde { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); align-items: start; }
.web-donde h2 { grid-column: 1 / 4; font-size: 17px; line-height: 24px; font-weight: 500; color: var(--noc-acc); padding-top: .55em; }
.web-donde p { grid-column: 4 / 12; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.5; color: var(--noc-tx); }
.web-donde p b { display: block; margin-bottom: 10px; font-size: var(--noc-titulo-fs); line-height: 1.06; letter-spacing: -0.03em; font-weight: 500; color: var(--noc-fuerte); }

/* ---------- Cierre de cada página ---------- */
.web-cierre .noc-titulo { max-width: 18ch; }
.web-cierre__texto { margin-top: 26px; max-width: 56ch; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--noc-tx); }
.web-cierre .noc-btn { margin-top: 36px; }

/* ---------- Contacto: la reunión, el aviso de datos y la agenda ---------- */
.web-contacto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); align-items: start; }
.web-contacto__info { grid-column: 1 / 6; position: sticky; top: calc(var(--nocturna-menu) + 32px); }
.web-contacto__agenda { grid-column: 7 / 13; }
.web-reunion { margin-top: 36px; border-top: 1px solid var(--noc-ln2); }
.web-reunion li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding-block: 20px; border-bottom: 1px solid var(--noc-ln2); font-size: 20px; line-height: 1.4; font-weight: 500; color: var(--noc-fuerte); }
.web-reunion svg { width: 28px; height: 28px; margin-top: 1px; color: var(--noc-fuerte); }
.web-aviso { font-size: 16px; line-height: 1.6; color: var(--noc-tx); margin-bottom: 24px; }
.web-aviso b { color: var(--noc-fuerte); }
.web-agenda { position: relative; height: 700px; border-radius: 24px; background: #ffffff; border: 1px solid #e3e0d8; display: grid; place-items: center; padding: 32px; text-align: center; color: #333333; }
.web-agenda__antes { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 380px; }
.web-agenda__antes > svg { width: 48px; height: 48px; color: #333333; }
.web-agenda__aviso { font-size: 16px; line-height: 1.5; color: #646464; }
.web-agenda__cargada { position: absolute; inset: 16px; display: grid; place-items: center; border: 1px dashed #bdb7aa; border-radius: 16px; background: #faf8f3; font-size: 17px; font-weight: 500; color: #646464; }
.web-agenda__cargada[hidden], .web-agenda__antes[hidden] { display: none; }
.web-respaldo-agenda { margin-top: 18px; font-size: 17px; line-height: 1.5; color: var(--noc-tx); }
.web-respaldo-agenda a { color: var(--noc-fuerte); font-weight: 500; text-underline-offset: 4px; display: inline-block; padding-block: 12px; margin-block: -12px; }

/* ---------- Si prefieres escribirnos: el formulario ---------- */
.web-escribir { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); align-items: start; }
.web-escribir > h2 { grid-column: 1 / 6; grid-row: 1; }
.web-escribir__datos { grid-column: 1 / 6; grid-row: 2; margin-top: 32px; display: flex; flex-direction: column; gap: 6px; font-size: 20px; line-height: 1.45; color: var(--noc-fuerte); }
.web-escribir__datos a { font-weight: 500; text-underline-offset: 4px; display: inline-block; padding-block: 10px; margin-block: -6px; align-self: flex-start; }
.web-escribir > .web-formulario { grid-column: 7 / 13; grid-row: 1 / span 2; }
.web-formulario { display: flex; flex-direction: column; gap: 22px; }
.web-campo { display: flex; flex-direction: column; gap: 8px; }
.web-campo label { font-size: 17px; line-height: 1.3; font-weight: 500; color: var(--noc-fuerte); }
.web-campo input, .web-campo textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid #646464; border-radius: 10px; background: #ffffff; font: 400 17px/1.4 var(--noc-font); color: #333333; }
.web-campo textarea { min-height: 148px; resize: vertical; }
.web-campo input:focus-visible, .web-campo textarea:focus-visible { outline: 2px solid #333333; outline-offset: 2px; border-color: #333333; }
.web-campo--error input, .web-campo--error textarea { border: 2px solid #b20701; }
.web-campo__mensaje { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 1.4; font-weight: 500; color: #9b0601; }
.web-campo__mensaje svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.web-campo__mensaje[hidden] { display: none; }
.web-casilla { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; align-items: start; padding-block: 12px; font-size: 16px; line-height: 1.5; color: var(--noc-tx); cursor: pointer; }
.web-casilla input { width: 24px; height: 24px; margin: 0; accent-color: #333333; cursor: pointer; }
.web-formulario .noc-btn { align-self: flex-start; }
.web-formulario .noc-btn[disabled] { opacity: .7; cursor: progress; }
.web-girando { width: 20px; height: 20px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: web-gira .8s linear infinite; }
@keyframes web-gira { to { transform: rotate(360deg); } }
.web-enviado { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; align-items: start; padding-top: 22px; border-top: 3px solid var(--noc-fuerte); font-size: clamp(22px, 2vw, 28px); line-height: 1.25; font-weight: 500; color: var(--noc-fuerte); }
.web-enviado svg { width: 32px; height: 32px; color: var(--noc-fuerte); }
.web-enviado[hidden] { display: none; }
.web-enviado:focus, .web-enviado:focus-visible { outline: none !important; }
.web-formulario[hidden] { display: none; }
.web-escribir > .web-enviado { grid-column: 7 / 13; grid-row: 1 / span 2; align-self: start; }

/* ---------- Páginas legales. Texto largo, justificado con guiones desde 600 px. ---------- */
.web-legal { max-width: 760px; margin-inline: auto; }
.web-legal h2 { margin-top: clamp(48px, 5vw, 72px); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; color: var(--noc-fuerte); }
.web-legal h2:first-child { margin-top: 0; }
.web-legal :is(p, ul, ol) { margin-top: 18px; font-size: 18px; line-height: 1.7; color: var(--noc-tx); }
.web-legal ul { list-style: disc; padding-left: 1.3em; }
.web-legal ol { list-style: decimal; padding-left: 1.4em; }
.web-legal li + li { margin-top: 10px; }
.web-legal li::marker { color: var(--noc-acc); font-weight: 700; }
.web-legal__version { margin-top: clamp(48px, 5vw, 72px) !important; padding-top: 22px; border-top: 1px solid var(--noc-ln2); font-weight: 500; color: var(--noc-fuerte) !important; }
@media (min-width: 600px) {
  .web-legal :is(p, li) { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
  .web-legal .web-legal__version { text-align: left; }
}

/* ---------- Gracias y la 404 ---------- */
.web-gracias .noc-portada__parrafo a { color: #f9f9f9; font-weight: 500; text-underline-offset: 5px; display: inline-block; padding-block: 10px; margin-block: -10px; }
.web-gracias .noc-acciones { margin-top: 40px; }
.web-gracias .noc-btn--contorno { border-color: #ffffff99; color: #f9f9f9; }

/* ---------- Pie ---------- */
.web-pie { padding-block: clamp(64px, 6.4vw, 96px) 48px; border-top: 1px solid #ffffff1f; }
.web-pie__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); row-gap: 40px; }
.web-pie__marca { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 22px; }
.web-pie__marca img { height: 26px; width: auto; align-self: flex-start; }
.web-pie__marca p { font-size: 16px; line-height: 1.6; color: var(--noc-tx2); max-width: 46ch; }
.web-pie__marca a { color: var(--noc-tx); text-underline-offset: 4px; display: inline-block; padding-block: 12px; margin-block: -12px; }
.web-pie__legal { grid-column: 7 / 10; }
.web-pie__redes { grid-column: 10 / 13; }
.web-pie__legal li, .web-pie__redes li { display: block; }
.web-pie__legal :is(a, button), .web-pie__redes a { display: inline-flex; align-items: center; min-height: 48px; padding: 0; border: 0; background: none; font: 500 17px/1.3 var(--noc-font); color: var(--noc-tx); text-align: left; text-decoration: none; cursor: pointer; }
@media (hover: hover) { .web-pie__legal :is(a, button):hover, .web-pie__redes a:hover { color: var(--noc-naranja); text-decoration: underline; text-underline-offset: 4px; } }

/* ---------- Aviso de cookies y sus preferencias ---------- */
.web-cookies { position: fixed; z-index: 40; left: 24px; bottom: 24px; width: min(480px, calc(100% - 48px)); padding: 24px; border: 1px solid #e3e0d8; border-radius: 24px; background: #ffffff; color: #333333; box-shadow: 0 2px 4px #33333314, 0 16px 32px -8px #3333332e; font-family: var(--noc-font); }
.web-cookies[hidden] { display: none; }
.web-cookies__texto { font-size: 17px; line-height: 1.5; }
.web-cookies__botones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.web-neutro { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border: 1.5px solid #333333; border-radius: 12px; background: transparent; font: 700 17px/1 var(--noc-font); color: #333333; cursor: pointer; }
@media (hover: hover) { .web-neutro:hover { background: #33333310; } }
.web-cookies__enlace { display: inline-flex; align-items: center; min-height: 48px; margin-top: 6px; padding: 0; border: 0; background: none; font: 500 17px var(--noc-font); color: #333333; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.web-cookies :focus-visible, .web-preferencias :focus-visible { outline: 2px solid #e85b03; outline-offset: 3px; }
.web-preferencias { width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 24px; background: #ffffff; color: #333333; box-shadow: 0 16px 48px -8px #0a0a0a66; font-family: var(--noc-font); }
.web-preferencias::backdrop { background: #0a0a0a99; }
.web-preferencias__caja { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.web-preferencias h2 { font-size: 26px; line-height: 1.15; font-weight: 500; letter-spacing: -0.02em; }
.web-opcion { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; min-height: 72px; padding: 14px 0; border: 0; border-top: 1px solid #e3e0d8; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.web-opcion:last-of-type { border-bottom: 1px solid #e3e0d8; }
.web-opcion b { display: block; font-size: 18px; font-weight: 700; }
.web-opcion small { display: block; margin-top: 4px; font-size: 16px; color: #646464; }
.web-opcion i { flex: none; position: relative; width: 52px; height: 30px; border-radius: 999px; background: #bdb7aa; }
.web-opcion i::after { content: ""; position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: #ffffff; transition: transform .15s ease; }
.web-opcion[aria-checked="true"] i { background: #333333; }
.web-opcion[aria-checked="true"] i::after { transform: translateX(22px); }
.web-preferencias__botones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.web-preferencias__guardar { grid-column: 1 / -1; }

/* ---------- Tableta y celular ---------- */
@media (max-width: 900px) {
  .web-menu__boton { display: grid; }
  .noc-menu__panel a:not(.noc-btn) { min-height: 56px; display: flex; align-items: center; padding-block: 0; }
  .noc-menu__panel:not([hidden]) { height: calc(100svh - var(--nocturna-menu) - var(--web-barra)); max-height: none; }
  .web-agendar { display: block; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: 12px var(--noc-margen) calc(12px + env(safe-area-inset-bottom, 0px)); background: #0a0a0af2; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid #ffffff1f; }
  .web-agendar .noc-btn { width: 100%; justify-content: center; text-align: center; }
  .web-agendar .noc-btn:active, .web-agendar .noc-btn.is-tocado { background: var(--noc-naranja-profundo); transform: scale(.98); }
  body:has(.web-agendar) { padding-bottom: calc(var(--web-barra) + env(safe-area-inset-bottom, 0px)); }
  .web-cookies { left: 12px; right: 12px; width: auto; bottom: calc(var(--web-barra) + 12px + env(safe-area-inset-bottom, 0px)); padding: 20px; }

  .web-logos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--noc-margen); margin-inline: calc(-1 * var(--noc-margen)); padding-inline: var(--noc-margen); gap: 12px; scrollbar-width: thin; overscroll-behavior-x: contain; }
  .web-logo { flex: 0 0 42%; scroll-snap-align: start; height: 96px; border: 1px solid var(--noc-ln); border-radius: 16px; }
  .web-logo img { filter: grayscale(1); }

  .web-pasos li { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; }
  .web-pasos b { grid-column: 1; font-size: 52px; }
  .web-pasos h3, .web-pasos p { grid-column: 2; }
  .web-testimonio blockquote { grid-column: 1 / -1; }
  .web-testimonio figcaption { grid-column: 1 / -1; grid-row: 2; padding-top: 14px; }
  .web-testimonios__apoyo { margin-left: 0; }
  .web-preguntas .noc-pregunta summary i { grid-row: 1; }
  .web-preguntas .noc-pregunta summary h3 { margin-top: 0; }
  .web-preguntas .noc-pregunta__respuesta p { grid-column: 1 / -1; }
  .web-faq__grupo > h2 { grid-column: 1 / -1; position: static; margin-bottom: 20px; }
  .web-faq__grupo > .noc-preguntas { grid-column: 1 / -1; }
  .web-solucion { grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; }
  .web-solucion svg { grid-column: 1; width: 32px; height: 32px; }
  .web-solucion span { grid-column: 2; }
  .web-soluciones__cierre { margin-left: 0; }
  .web-respaldo h2, .web-respaldo p { grid-column: 1 / -1; }
  .web-respaldo p { margin-top: 36px; }
  .web-texto p span { grid-column: 1 / -1; }
  .web-donde h2, .web-donde p { grid-column: 1 / -1; }
  .web-donde p { margin-top: 14px; }
  .web-contacto__info, .web-contacto__agenda { grid-column: 1 / -1; position: static; }
  .web-contacto__agenda { margin-top: 48px; }
  .web-escribir > h2, .web-escribir__datos, .web-escribir > .web-formulario { grid-column: 1 / -1; grid-row: auto; }
  .web-escribir > .web-formulario { margin-top: 32px; }
  .web-escribir > .web-enviado { grid-column: 1 / -1; grid-row: auto; margin-top: 32px; }
  .web-escribir__datos { margin-top: 40px; }
  .web-pie__marca, .web-pie__legal, .web-pie__redes { grid-column: 1 / -1; }
  .web-prueba li { grid-column: span 6 !important; }
  /* La portada deja a la vista la barra de prueba por encima del botón de agendar. */
  .noc-portada.noc-portada--web:not(.web-portada--corta):not(.web-portada--media):not(.web-gracias) { min-height: calc(100svh - var(--nocturna-menu) - var(--web-barra)); }
  .noc-portada.web-portada--media, .noc-portada.web-gracias { min-height: 0; padding-block: 56px 72px; }
}
@media (max-width: 420px) { .web-portada .noc-acciones .noc-btn svg { display: none; } }
@media (max-width: 600px) {
  :root { --nocturna-menu: 64px; }
  .noc-menu__logo img { height: 24px; }
  .noc-portada.noc-portada--web { padding-block: 20px 28px; }
  .web-portada .noc-portada__centro { margin-block: 12px 28px; }
  .web-portada .noc-portada__titulo { font-size: 33px; line-height: 1.06; letter-spacing: -0.025em; }
  .web-portada .noc-portada__parrafo { margin-top: 18px; font-size: 17px; line-height: 1.5; }
  .web-portada .noc-acciones { margin-top: 24px; }
  .web-portada .noc-acciones .noc-btn { width: 100%; padding: 10px 14px; line-height: 1.2; letter-spacing: -0.01em; justify-content: center; text-align: center; }
  /* Nocturna tiene Fases de tres pasos en tres columnas también en el celular. Aquí van en una. */
  .noc-fases:has(> li:nth-child(3):last-child) { grid-template-columns: 1fr; }
  .web-bajo-boton { font-size: 16px; margin-top: 10px; }
  .web-prueba { padding-top: 18px; }
  .web-prueba span:first-child { font-size: 16px; }
  .web-prueba b { font-size: 40px; margin-block: 2px 4px; }
  .web-prueba span:last-child { font-size: 17px; }
  .noc-portada.web-portada--corta { padding-block: 56px 48px; }
  .web-agenda { padding: 24px; }
  .web-testimonio blockquote p { font-size: 21px; }
}

/* Con movimiento reducido activado, nada se anima. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Conexión de la web (3-nov). La agenda de Calendly ya cargada, la trampa para robots del formulario y el
   aviso cuando el envío falla.
   ========================================================================== */
.web-agenda__cargada--calendly { inset: 0; display: block; border: 0; border-radius: 24px; overflow: hidden; background: #ffffff; }
.web-agenda__cargada--calendly iframe { display: block; width: 100%; height: 100%; border: 0; }
.web-agenda:has(.web-agenda__cargada--calendly:not([hidden])) { padding: 0; }
.web-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.web-formulario__error { font-size: 16px; line-height: 1.4; font-weight: 500; color: #9b0601; }
.web-formulario__error[hidden] { display: none; }

/* ==========================================================================
   Revisión del 3-nov en la noche (Playwright a 320, 390, 768, 1024, 1280, 1440 y 1920 px).
   ========================================================================== */
/* El muro sale con 12 logos mientras llegan Italfoods y Central Sports. Dos filas de 6 en vez de 7 y 5. */
.web-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Entre 901 y 1.100 px los cuatro enlaces no caben junto al logo y al botón, y "Preguntas frecuentes" se partía en
   dos renglones. En ese tramo el menú pasa al botón del panel, como en el celular, y el botón de agendar se queda. */
@media (min-width: 901px) and (max-width: 1100px) {
  .noc-menu__enlaces { display: none; }
  .noc-menu__barra { gap: 16px; }
  .noc-menu__barra > .noc-btn { margin-left: auto; }
  .web-menu__boton { display: grid; }
  .noc-menu__panel { position: absolute; top: 100%; left: 0; right: 0; padding: 8px var(--noc-margen) 24px; background: #0a0a0a; border-top: 1px solid #ffffff1f; border-bottom: 1px solid #ffffff1f; }
  .noc-menu__panel:not([hidden]) { display: flex; flex-direction: column; }
  .noc-menu__panel a { min-height: 56px; display: flex; align-items: center; border-bottom: 1px solid #ffffff1f; font-size: 20px; font-weight: 500; color: #f9f9f9; text-decoration: none; }
}
/* En el celular las dos palabras gigantes van encima de su texto. El espejo solo tiene sentido en escritorio. */
@media (max-width: 900px) {
  .noc-palabra--espejo .noc-palabra__gigante { order: -1; margin-top: 0; }
  .noc-palabra--espejo .noc-palabra__texto { margin-top: 24px; }
}

/* Las secciones recortan con overflow: hidden, y eso volvía inútil el sticky de las columnas de Contacto y de
   Preguntas frecuentes, que además quedaban corridas hacia abajo lo que mide su top. clip recorta sin ese efecto. */
.noc-sec:has(.web-faq__grupo, .web-contacto) { overflow: clip; }
/* El botón al final de las preguntas frecuentes, en la columna de las preguntas. */
.web-faq__final { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--noc-col); }
.web-faq__final .noc-btn { grid-column: 4 / 13; justify-self: start; }
/* En "Si prefieres escribirnos" el formulario ocupa dos filas, y el correo y la dirección flotaban en la mitad. */
@media (min-width: 901px) { .web-escribir { grid-template-rows: auto 1fr; } .web-escribir__datos { align-self: start; } }
/* Los títulos de cierre en dos renglones parejos, y la dirección de Nosotros sin "Colombia." suelta. */
.web-cierre .noc-titulo { max-width: 24ch; }
.web-donde p b { text-wrap: balance; }
/* La firma de los testimonios. El cargo puede partirse, la empresa no, y no se pega a las comillas. */
.web-testimonio figcaption { padding-right: 16px; }
.web-empresa { white-space: nowrap; }
/* El pie. La lista legal toma una columna más para que ningún enlace se parta. */
@media (min-width: 901px) { .web-pie__legal { grid-column: 7 / 11; } .web-pie__redes { grid-column: 11 / 13; } }
/* Las legales arrancan en el mismo borde que su título. El justificado queda (0038), sin cortes de dos letras. */
.web-legal { margin-inline: 0; }
.web-legal :is(p, li) { hyphenate-limit-chars: 7 3 3; }
/* Portadas sin botón (Empecemos y Nosotros). Sin la altura de pantalla completa, que dejaba un hueco negro. */
.noc-portada.web-portada:not(.web-portada--corta):not(:has(.noc-acciones)) { min-height: 0; padding-block: clamp(72px, 8vw, 120px) clamp(56px, 6vw, 88px); }
.noc-portada.web-portada:not(.web-portada--corta):not(:has(.noc-acciones)) .noc-portada__centro { margin: 0; }
.noc-portada.web-portada:not(.web-portada--corta):not(:has(.noc-acciones)) .web-prueba { margin-top: clamp(48px, 6vw, 80px); }
/* Gracias, la 404 e Implementación. El contenido al centro de la portada, con el mismo aire arriba y abajo. */
.noc-portada.web-portada--media:has(.noc-acciones) > .noc-wrap { justify-content: center; }
/* El botón de la portada parte parejo ("Agendar una reunión / de 30 minutos"), sin "minutos" suelto. */
.web-portada .noc-btn { text-wrap: balance; }
/* La agenda sin cargar no reserva los 700 px de Calendly. Crece cuando la persona toca Ver horarios. */
.web-agenda:has(.web-agenda__cargada[hidden]) { height: auto; min-height: 420px; }
/* Los tres pasos de "Cómo empezamos". Títulos de uno, dos o tres renglones, y el texto de los tres arranca a la misma altura. */
@media (min-width: 901px) {
  .noc-fases { grid-template-rows: auto auto auto; }
  .noc-fases li { display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: start; }
  .noc-fases li b { justify-self: stretch; }
}
@media (max-width: 900px) {
  .web-faq__final .noc-btn { grid-column: 1 / -1; }
  .web-agenda:has(.web-agenda__cargada[hidden]) { min-height: 360px; }
}
/* Gracias y la 404 en el celular. El mismo aire arriba que las portadas cortas de Contacto y las legales. */
@media (max-width: 600px) {
  .noc-portada.web-portada--aviso { padding-block: 56px 48px; }
  .web-portada--aviso .noc-portada__centro { margin: 0; }
}
/* La casilla de autorización heredaba los 52 px de alto de los campos de texto y quedaba más abajo que su texto. */
.web-campo .web-casilla input[type="checkbox"] { height: 24px; min-height: 24px; padding: 0; margin-top: 0; }