/* Orgánica Digital · versión 2 · paleta A (10-version-2-para-code.md) */

@font-face { font-family: "Geist"; src: url("../fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
	--gris-calido: #F5F4F3;
	--petroleo: #0D343F;
	--noche: #112337;
	--naranja: #FF6724;
	--carbon: #353031;
	--blanco: #FFFFFF;

	--petroleo-suave: #BAC3C5;
	--petroleo-meta: #9FADB0;
	--petroleo-linea: #2D4F58;
	--petroleo-linea-fuerte: #4F6B72;
	--noche-suave: #BBBFC3;
	--noche-meta: #A0A6AD;
	--noche-linea: #314051;
	--noche-panel: #0B1D32;
	--carbon-suave: #C4C2C2;
	--carbon-meta: #AEABAB;
	--carbon-linea: #504B4C;
	--carbon-panel: #302B2C;
	--claro-suave: #426068;
	--claro-meta: #536E75;
	--claro-meta-carbon: #6F6B6C;

	--t-entrada: clamp(40px, 3.9vw, 58px);
	--t-seccion: clamp(34px, 3.4vw, 50px);
	--t-contador: clamp(140px, 17vw, 250px);
	--margen: 40px;
	--sans: "Geist", system-ui, sans-serif;
	--display: "Funnel Display", "Geist", system-ui, sans-serif;
	--mono: "Geist Mono", ui-monospace, monospace;
}

/* Base */
.od { margin: 0; background: var(--gris-calido); color: var(--carbon); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.od *, .od *::before, .od *::after { box-sizing: border-box; }
:where(.od) a { color: inherit; }
.od :focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; }
.od h1, .od h2, .od h3, .od p, .od figure, .od blockquote, .od ol, .od ul { margin: 0; }
.od img { max-width: 100%; height: auto; }
.mono { font-family: var(--mono); letter-spacing: .04em; }
.ancho { max-width: 1360px; margin: 0 auto; padding-left: var(--margen); padding-right: var(--margen); }
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pendiente { opacity: .75; }
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--noche); color: var(--gris-calido); padding: 10px 14px; border-radius: 7px; font-family: var(--mono); font-size: 13px; }
.saltar:focus { left: 8px; }

/* Capas: las partículas van sobre los fondos de las secciones y debajo del contenido */
.particulas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: block; }
main > section > *, main > div > section > *, .pie > *, .menu-fijo { position: relative; z-index: 2; }
/* Los paneles que solo ponen color de fondo quedan debajo de las partículas */
.od .entrada-nube { position: static; z-index: auto; }

/* Tipografía */
.t-entrada { font-family: var(--display); font-size: var(--t-entrada); line-height: 1; font-weight: 800; letter-spacing: -0.03em; max-width: 11em; }
.t-seccion { font-size: var(--t-seccion); line-height: 1.06; font-weight: 500; letter-spacing: -0.02em; }
.etiqueta { font-size: 13px; margin-bottom: 14px; }
.oscuro-petroleo .suave { color: var(--petroleo-meta); }
.oscuro-noche .suave { color: var(--noche-meta); }

/* Botones */
.btn { font-family: var(--mono); font-size: 14px; letter-spacing: .05em; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 7px; position: relative; transition: background .2s; }
.btn-n { background: var(--carbon); color: var(--gris-calido); }
.btn-n:hover { background: #504B4C; }
.btn-c { background: #E2E1E0; color: var(--carbon); }
.btn-c:hover { background: #D4D2D1; }
.btn-b { background: var(--gris-calido); color: var(--carbon); }
.btn-b:hover { background: var(--blanco); }
.btn .punto { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--naranja); }
.botones { display: flex; flex-wrap: wrap; gap: 8px; }
.botones.centro { justify-content: center; }

/* Menú: barra que contrasta con la sección de debajo y se deshace sobre ella */
.menu-fijo { --tinta: var(--petroleo); --tinta-suave: var(--claro-suave); --velo: var(--gris-calido); --contra: var(--gris-calido);
	position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 100px; padding: 0 clamp(24px, 5.5vw, 80px);
	display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--tinta);
	transition: transform .45s cubic-bezier(.2, .7, .2, 1), color .35s ease; }
.menu-fijo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--velo); transition: background-color .35s ease; }
.menu-fijo.escondido { transform: translateY(calc(-100% - 90px)); }
.menu-disu { position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 58px; overflow: hidden; pointer-events: none; color: var(--velo); transition: color .35s ease; }
.menu-disu pre { position: absolute; left: 50%; top: -13px; transform: translateX(-50%); margin: 0; font-family: var(--mono); font-size: 14px; line-height: 14px; white-space: pre; letter-spacing: 0; }
.menu-disu .disu-b { transform: translateX(-50%) scaleX(1.2); } /* el bloque de la fuente deja rendijas */
.menu-disu .disu-l { animation: titila 3.2s steps(2, end) infinite; }
.menu-fijo.oscuro { --tinta: var(--gris-calido); --tinta-suave: var(--petroleo-suave); --velo: var(--petroleo); --contra: var(--petroleo); }
.menu-fijo.naranja { --tinta: var(--noche); --tinta-suave: var(--noche); --velo: var(--naranja); --contra: var(--naranja); }
.menu-marca { display: flex; align-items: center; gap: 16px; flex: none; text-decoration: none; color: inherit; }
.menu-nombre { font-size: 20px; font-weight: 500; letter-spacing: 0.06em; line-height: 1; opacity: .9; white-space: pre; }
.menu-marca img { display: block; height: 69px; width: auto; border-radius: 6px; }
.menu-lista { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); list-style: none; margin: 0; padding: 0; }
.menu-item { position: relative; display: inline-flex; align-items: baseline; gap: 7px; padding: 10px 0; font-size: 17px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; color: inherit; }
.menu-n { font-size: 11px; color: var(--tinta-suave); transition: color .25s ease; }
.menu-t { position: relative; }
.menu-t::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.menu-item:hover .menu-t::after, .menu-item:focus-visible .menu-t::after, .menu-item[aria-current="page"] .menu-t::after { transform: scaleX(1); transform-origin: left; }
.menu-item[aria-current="page"] .menu-n { color: var(--naranja); }
.menu-fijo.naranja .menu-item[aria-current="page"] .menu-n { color: var(--gris-calido); }
.menu-cta { align-items: center; padding: 11px 20px 11px 18px; background: var(--naranja); color: var(--noche); border-radius: 999px; transition: background-color .25s ease, color .25s ease; }
.menu-cta .menu-t::after { display: none; }
.menu-cta .menu-n { color: inherit; opacity: .7; }
.menu-cta:hover, .menu-cta[aria-current="page"] { background: var(--noche); color: var(--gris-calido); }
.menu-fijo.oscuro .menu-cta:hover, .menu-fijo.oscuro .menu-cta[aria-current="page"] { background: var(--gris-calido); color: var(--noche); }
.menu-cta:hover .menu-n, .menu-cta[aria-current="page"] .menu-n { color: inherit; }
.menu-item .punto { width: 6px; height: 6px; margin-left: 2px; border-radius: 50%; background: currentColor; }
.menu-fijo.naranja .menu-cta { background: var(--noche); color: var(--naranja); }
.menu-boton { display: none; align-items: center; gap: 12px; background: none; border: 0; padding: 12px 0; min-height: 44px; color: inherit; font-size: 13px; cursor: pointer; }
.menu-boton-raya { position: relative; width: 22px; height: 1px; background: currentColor; transition: transform .35s ease; }
.menu-boton-raya::after { content: ""; position: absolute; left: 0; top: 6px; width: 22px; height: 1px; background: currentColor; transition: transform .35s ease, top .35s ease; }

/* Entrada */
.entrada { min-height: max(100vh, 720px); }
.entrada-texto { display: flex; flex-direction: column; justify-content: center; padding: 140px clamp(24px, 5.5vw, 80px) 100px; position: relative; color: var(--petroleo); }
.entrada-parrafo { margin-top: 26px; max-width: 31em; font-size: 18px; color: var(--claro-suave); }
.entrada .botones { margin-top: 34px; }
.baje { position: absolute; left: clamp(24px, 5.5vw, 80px); bottom: 36px; font-size: 13px; display: flex; align-items: center; gap: 10px; }
.entrada-nube { background: var(--petroleo); min-height: 420px; }

/* Bitácora */
.fondo-naranja { background: var(--naranja); color: var(--noche); }
.bitacora { padding-top: 120px; padding-bottom: 140px; gap: 56px; align-items: start; }
.col-fija { position: sticky; top: 140px; }
.t-bita { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.08; font-weight: 500; letter-spacing: -0.02em; max-width: 13em; }
.bita-parrafo { margin-top: 18px; max-width: 30em; }
.contador { margin-top: 36px; font-size: var(--t-contador); line-height: .82; font-weight: 500; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.bita-nota { margin-top: 14px; font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chip { background: var(--noche); color: var(--naranja); padding: 3px 8px; border-radius: 4px; }
.tabla-bita { border: 1px dashed #8E472D; border-radius: 4px; padding: 26px 28px; font-size: 13px; background: var(--naranja); }
.tabla-cab, .tabla-pie, .bita-anio, .fila { display: flex; justify-content: space-between; gap: 16px; }
.tabla-cab { padding-bottom: 18px; border-bottom: 1px dashed #8E472D; }
.bita-anio { padding: 22px 0 4px; }
.fila { padding: 5px 8px; margin: 0 -8px; border-radius: 3px; color: var(--carbon); transition: background .25s, color .25s; }
.fila span:last-child { text-align: right; }
.fila:hover { background: var(--carbon); color: var(--gris-calido); }
.tabla-pie { margin-top: 26px; padding-top: 18px; border-top: 1px dashed #8E472D; }

/* Disolución */
.disu { position: relative; height: 210px; overflow: hidden; }
.disu pre { position: absolute; left: 50%; top: 0; transform: translateX(-50%); margin: 0; font-family: var(--mono); font-size: 14px; line-height: 14px; white-space: pre; letter-spacing: 0; }
.disu-l { animation: titila 3.2s steps(2, end) infinite; }
@keyframes titila { 50% { opacity: .25; } }

/* Fondos oscuros */
.oscuro-petroleo { background: var(--petroleo); color: #EFEFEF; }
.oscuro-noche { background: var(--noche); color: #F0EFEE; }
.oscuro-carbon { background: var(--carbon); color: #F0EFEE; }

/* Servicios */
.servicios > .ancho { padding-top: 100px; padding-bottom: 140px; }
.servicios .t-seccion { max-width: 12em; }
.servicios-red { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 48px; margin: 72px 0 64px; }
.servicio { max-width: 30em; }
.servicio-1 { margin-top: 48px; }
.servicio-2 { margin-top: 96px; }
.servicio-nombre { font-size: 14px; color: var(--blanco); margin-bottom: 12px; }
.servicio-linea { font-size: 16px; color: var(--petroleo-suave); max-width: 26em; }

/* Encabezado de sección con párrafo a la derecha */
.cabeza-sec { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; }
.cabeza-parrafo { max-width: 30em; }
.oscuro-noche .cabeza-parrafo { color: var(--noche-suave); }
.oscuro-carbon .cabeza-parrafo { color: var(--carbon-suave); }
.oscuro-petroleo .cabeza-parrafo { color: var(--petroleo-suave); }
.tinta-suave-claro { color: var(--claro-suave); }

/* Archivo navegable */
.archivo-sec > .ancho { padding-top: 120px; padding-bottom: 140px; }
.archivo { border: 1px solid var(--noche-linea); border-radius: 10px; overflow: hidden; background: rgba(11, 29, 50, .72); }
.archivo-barra { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 10px 16px; font-size: 12px; color: var(--noche-meta); }
.archivo-barra:first-child { border-bottom: 1px solid var(--noche-linea); }
.archivo-barra:last-child { border-top: 1px solid var(--noche-linea); }
.archivo-barra b { color: #F0EFEE; font-weight: 400; }
.archivo-cuerpo { display: flex; min-height: 460px; }
.arbol { flex: 0 0 250px; border-right: 1px solid var(--noche-linea); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.arbol-raiz { padding: 6px 8px; color: var(--carbon-meta); }
.arbol-item { font-family: inherit; font-size: 13px; letter-spacing: inherit; text-align: left; border: 0; border-radius: 4px; cursor: pointer; min-height: 32px; padding: 6px 8px 6px 24px; background: transparent; color: #D5D3D3; }
.arbol-item.prof-2 { padding-left: 40px; }
.arbol-item:hover { background: rgba(240,239,238,.08); }
.arbol-item[aria-pressed="true"] { background: #F0EFEE; color: var(--carbon); }
.doc { flex: 1 1 auto; min-width: 0; padding: 26px 32px; display: flex; flex-wrap: wrap; gap: 32px; }
.doc[hidden] { display: none; }
.doc-texto { flex: 1 1 340px; font-size: 14px; line-height: 1.7; }
.doc-ruta { font-size: 12px; color: var(--noche-meta); margin-bottom: 6px; }
.doc-titulo { color: var(--blanco); font-size: 16px; margin-bottom: 18px; }
.doc-cuerpo { color: #CFD1D4; max-width: 46em; }
.doc-foto { flex: 0 1 380px; }
.doc-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 6px; filter: grayscale(.2); }
.doc-foto figcaption { margin-top: 8px; font-size: 12px; color: var(--noche-meta); }

/* Proyectos */
.proyectos-sec > .ancho { padding-top: 120px; padding-bottom: 120px; }
.cartas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px 28px; margin-bottom: 48px; }
.carta { text-decoration: none; color: #F0EFEE; display: block; container-type: inline-size; }
.carta-caja { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--carbon-panel); border: 1px solid var(--carbon-linea); border-radius: 6px; }
.carta .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.carta .asc { position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin: 0; font-family: var(--mono); color: var(--carbon-meta); font-size: calc(100cqw / 66); line-height: 1.02; letter-spacing: 0; transition: opacity .5s; }
.carta:hover .foto, .carta:focus-visible .foto, .carta.visto .foto { opacity: 1; }
.carta:hover .asc, .carta:focus-visible .asc, .carta.visto .asc { opacity: 0; }
.carta-pendiente { position: absolute; right: 10px; bottom: 10px; z-index: 1; font-size: 11px; color: var(--gris-calido); background: var(--carbon-panel); padding: 4px 8px; border-radius: 4px; }
.carta-pie { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--carbon-meta); }
.carta-t { color: var(--blanco); }
.voz { margin-top: 120px; border-top: 1px solid var(--carbon-linea); padding-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; align-items: end; }
.voz blockquote { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -0.01em; max-width: 24em; grid-column: span 2; }
.voz figcaption { font-size: 13px; color: var(--carbon-meta); display: flex; justify-content: space-between; gap: 16px; }

/* Cómo empezamos (boleto) */
.fondo-gris { background: var(--gris-calido); color: var(--petroleo); }
.empezamos { padding-top: 80px; padding-bottom: 140px; }
.empezamos .t-seccion { max-width: 11em; }
.boleto { position: relative; background: var(--petroleo); color: #EFEFEF; border-radius: 14px; display: flex; flex-wrap: wrap; }
.boleto-cara { flex: 999 1 640px; display: flex; flex-wrap: wrap; }
.boleto-cara[hidden] { display: none; }
.boleto-izq { flex: 1 1 360px; padding: 30px 34px 34px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 360px; }
.boleto-tag { font-size: 13px; color: var(--petroleo-meta); }
.boleto-cifra { font-size: clamp(110px, 13vw, 200px); line-height: .82; font-weight: 500; letter-spacing: -0.06em; }
.boleto-sub { font-size: 14px; }
.boleto-lista { flex: 1 1 280px; list-style: none; padding: 30px 34px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.boleto-lista li { display: grid; grid-template-columns: 34px 1fr; gap: 6px; }
.boleto-lista li span:first-child { color: var(--petroleo-meta); }
.boleto-der { flex: 1 1 320px; padding: 30px 34px 34px; border-left: 1px dashed var(--petroleo-linea-fuerte); display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; position: relative; }
.muesca { position: absolute; left: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--gris-calido); }
.muesca-a { top: -13px; }
.muesca-b { bottom: -13px; }
.formatos { display: flex; flex-wrap: wrap; gap: 6px; }
.formato { font-family: var(--mono); font-size: 12px; letter-spacing: .05em; min-height: 36px; padding: 0 12px; border-radius: 6px; cursor: pointer; border: 1px solid #6C6868; background: transparent; color: #F0EFEE; }
.formato[aria-pressed="true"] { border-color: #F0EFEE; background: #F0EFEE; color: var(--carbon); }
.boleto-der .btn { align-self: flex-start; }

/* Preguntas */
.preguntas-red { padding-top: 80px; padding-bottom: 120px; gap: 48px; align-items: start; }
.pregunta { border-bottom: 1px solid var(--petroleo-linea); }
.pregunta h3 { font: inherit; }
.pregunta-boton { width: 100%; display: grid; grid-template-columns: 76px 1fr 24px; gap: 10px; align-items: center; text-align: left; background: transparent; border: 0; color: #EFEFEF; font-size: 13px; padding: 18px 0; min-height: 44px; cursor: pointer; }
.q-n { color: #87999D; }
.q-signo { font-size: 18px; justify-self: end; transition: transform .25s; }
.pregunta-boton[aria-expanded="true"] .q-signo { transform: rotate(45deg); }
.respuesta { margin: 0 0 22px 86px; max-width: 34em; color: #CED4D5; font-size: 16px; }

/* Cierre */
.cierre { position: relative; height: 820px; overflow: hidden; }
.cierre > .cierre-circulo { position: absolute; left: 50%; top: 50%; width: 400px; height: 400px; max-width: 86vw; max-height: 86vw; transform: translate(-50%, -50%); border-radius: 50%; background: var(--naranja); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; padding: 40px; }
.cierre h2 { font-size: 36px; line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; color: var(--noche); }

/* Pie */
.pie { background: var(--gris-calido); color: var(--carbon); }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie-cols { padding-top: 72px; padding-bottom: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }
.pie-marca { display: flex; flex-direction: column; gap: 16px; }
.pie-marca img { height: 72px; width: auto; align-self: flex-start; border-radius: 6px; }
.pie-marca p { font-size: 15px; line-height: 1.5; color: var(--claro-meta-carbon); max-width: 18em; }
.pie-col { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.pie-tit { color: var(--claro-meta-carbon); }
.pie-final { padding-top: 20px; padding-bottom: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid #D4D2D1; font-size: 12px; color: var(--claro-meta-carbon); }

/* Móvil */
@media (max-width: 900px) {
	:root { --margen: 24px; }
	.dos { grid-template-columns: 1fr; }
	.entrada { min-height: 0; }
	.entrada-texto { padding-top: 140px; padding-bottom: 90px; }
	.entrada-nube { min-height: 480px; }
	.col-fija { position: relative; top: auto; }
	.servicios-red { grid-template-columns: 1fr; gap: 40px; }
	.servicio-1, .servicio-2 { margin-top: 0; }
	.arbol { display: none; }
	.archivo-cuerpo { min-height: 0; }
	.boleto-der { border-left: 0; border-top: 1px dashed var(--petroleo-linea-fuerte); }
	.muesca { display: none; }
	.voz blockquote { grid-column: auto; }
	.respuesta { margin-left: 0; }
	.cierre { height: 640px; }
}
@media (max-width: 700px) {
	.menu-fijo { height: 64px; }
	.menu-marca { position: relative; z-index: 2; }
	.menu-marca img { height: 55px; }
	.menu-nombre { font-size: 15px; }
	.menu-boton { display: inline-flex; position: relative; z-index: 2; }
	.menu { position: fixed; inset: 0; z-index: 1; background: var(--petroleo); color: var(--gris-calido); padding: 104px 24px 40px;
		opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
	.menu-fijo.abierto { color: var(--gris-calido); }
	.menu-fijo.abierto .menu { opacity: 1; visibility: visible; transition: opacity .35s ease; }
	.menu-fijo.abierto::before { background: transparent; }
	.menu-fijo.abierto .menu-disu { opacity: 0; }
	.menu-disu { height: 44px; }
	.menu-fijo.abierto .menu-boton-raya { transform: rotate(45deg) translate(2px, 2px); }
	.menu-fijo.abierto .menu-boton-raya::after { top: 0; transform: rotate(-90deg); }
	.menu-lista { flex-direction: column; align-items: stretch; gap: 0; }
	.menu-lista li { border-top: 1px solid var(--petroleo-linea); }
	.menu-lista li:last-child { border-bottom: 1px solid var(--petroleo-linea); }
	.menu-item, .menu-cta { width: 100%; padding: 18px 0; gap: 16px; align-items: center; font-size: clamp(30px, 9vw, 44px); letter-spacing: -0.03em; border: 0; border-radius: 0; color: var(--gris-calido); }
	.menu-cta, .menu-fijo.naranja .menu-cta, .menu-cta:hover, .menu-fijo.oscuro .menu-cta:hover, .menu-cta[aria-current="page"], .menu-fijo.oscuro .menu-cta[aria-current="page"], .menu-item[aria-current="page"] { background: none; color: var(--naranja); }
	.menu-cta { color: var(--gris-calido); }
	.menu-n, .menu-cta:hover .menu-n { font-size: 12px; color: var(--petroleo-meta); }
	.menu-t::after { display: none; }
	.menu-fijo .menu-item .punto { width: 8px; height: 8px; background: var(--naranja); }
	.menu-cta .menu-n { opacity: 1; }
	.menu-fijo.abierto .menu-item { animation: menu-entra .5s cubic-bezier(.2, .7, .2, 1) both; }
	.menu-fijo.abierto li:nth-child(2) .menu-item { animation-delay: .05s; }
	.menu-fijo.abierto li:nth-child(3) .menu-item { animation-delay: .1s; }
	.menu-fijo.abierto li:nth-child(4) .menu-item { animation-delay: .15s; }
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	.btn, .cinta, .disu-l, .menu-disu .disu-l, .menu-fijo.abierto .menu-item { animation: none; }
	.menu-fijo, .menu-t::after { transition: none; }
	.fila, .carta .foto, .carta .asc, .q-signo { transition: none; }
}
.od .entrada-parrafo { margin-top: 26px; }

.od { --disuelve: url("../img/mascara-disuelve.svg?v=2") center / 100% 100% no-repeat; }
/* Fotos con borde que se disuelve en bloques (el ASCII se conserva) y botones como globos de diálogo (referencia: Oxenfree) */
.btn { --globo: #1E4954; --globo-t: var(--gris-calido); --giro: -1.2deg; background: var(--globo); color: var(--globo-t); border: 0;
	border-radius: 26px 20px 28px 18px / 20px 26px 18px 28px; padding: 14px 26px; min-height: 52px; line-height: 1.2; text-align: center; justify-content: center;
	box-shadow: 0 14px 28px -18px rgba(13, 52, 63, .6); outline: 2px solid transparent; outline-offset: 4px;
	transform: rotate(var(--giro)); animation: globo 5.5s ease-in-out infinite; transition: outline-color .2s ease, filter .25s ease; }
.btn:hover, .btn:focus-visible { outline-color: currentColor; filter: brightness(1.06); animation-play-state: paused; }
.btn-n { --globo: #1E4954; --globo-t: var(--gris-calido); }
.btn-c, .btn-b { --globo: #8FA7AC; --globo-t: var(--noche); }
.botones .btn:nth-child(2) { --globo: var(--naranja); --globo-t: var(--noche); --giro: .9deg; animation-delay: -1.8s; border-radius: 20px 28px 18px 26px / 26px 18px 28px 20px; }
.botones .btn:nth-child(3) { --giro: -.5deg; animation-delay: -3.4s; border-radius: 24px 18px 26px 22px / 18px 24px 22px 26px; }
.btn:hover, .btn-n:hover, .btn-c:hover, .btn-b:hover { background: var(--globo); }
.btn-n:hover, .btn-n:focus-visible { outline-color: var(--globo); }
.botones { gap: 14px; }
@keyframes globo { 0%, 100% { transform: rotate(var(--giro)) translateY(0); } 50% { transform: rotate(var(--giro)) translateY(-5px); } }
.btn .punto { top: 9px; right: 10px; background: var(--naranja); }
.botones .btn:nth-child(2) .punto { background: var(--noche); }
.carta-caja { border-color: transparent; background: transparent; }
.carta-caja .foto, .carta-caja .asc, .carta-caja .carta-patron { -webkit-mask: var(--disuelve); mask: var(--disuelve); }
/* Sin foto publicada (Dulce y Salada): el ASCII se queda y titila al pasar el cursor */
.carta-caja:not(:has(.foto)) .asc { opacity: 1 !important; }
.carta:hover .carta-caja:not(:has(.foto)) .asc { animation: parpadeo 1.2s steps(2, end) infinite; }
@keyframes parpadeo { 50% { filter: brightness(1.9); } }
.od .bita-parrafo { margin-top: 18px; }
.od .contador { margin-top: 36px; }
.od .bita-nota { margin-top: 14px; }

/* Todos los títulos en Funnel Display */
.od h1:not(.mono), .od h2:not(.mono), .od h3:not(.mono), .t-seccion, .t-sub, .t-bita, .serv-t, .boleto-ok-t, .boleto-fijo-cifra, .contador { font-family: var(--display); font-weight: 800; }

/* Entrada del inicio: título a todo el ancho, una palabra por línea; los anillos quedan de fondo */
.entrada-inicio { display: flex; align-items: center; }
.entrada-inicio .entrada-texto { width: 100%; padding-top: 150px; padding-bottom: 120px; }
.entrada-inicio .t-entrada { font-size: clamp(44px, 7.6vw, 132px); line-height: .9; letter-spacing: -0.045em; max-width: none; margin-top: 18px; }
.t-entrada .linea { display: block; }
.entrada-pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 48px; flex-wrap: wrap; margin-top: 48px; }
.od .entrada-pie .entrada-parrafo { margin-top: 0; max-width: 30em; }
.entrada-pie .botones { margin-top: 0; }
.entrada-centro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: end; gap: 48px; }
/* Tablero: los proyectos se descifran desde caracteres y uno se enciende por turnos */
.tablero { border-top: 1px solid var(--petroleo); font-size: 12px; color: var(--petroleo); }
.tablero-cab { display: flex; justify-content: space-between; padding: 10px 0; color: var(--claro-meta); border-bottom: 1px solid rgba(13, 52, 63, .2); }
.tablero-lista { list-style: none; margin: 0; padding: 0; }
.tablero-fila { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 8px; border-bottom: 1px solid rgba(13, 52, 63, .12); color: inherit; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.tablero-n { color: var(--claro-meta); }
.tablero-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tablero-m { color: var(--claro-meta); font-size: 10px; white-space: nowrap; }
.tablero-fila.encendida, .tablero-fila:hover, .tablero-fila:focus-visible { background: var(--petroleo); color: var(--gris-calido); }
.tablero-fila.encendida .tablero-n, .tablero-fila:hover .tablero-n, .tablero-fila.encendida .tablero-m, .tablero-fila:hover .tablero-m { color: var(--petroleo-suave); }
.tablero-fila.encendida .tablero-n { color: var(--naranja); }
@media (max-width: 900px) {
	.entrada-centro { grid-template-columns: 1fr; }
	.tablero-m { display: none; }
}
.tablero-fila { grid-template-columns: minmax(28px, auto) minmax(0, 1fr) auto; }
.entrada-inicio .entrada-centro { margin-top: 18px; }
.entrada-inicio .entrada-centro .t-entrada { margin-top: 0; }

/* Visor de fotos */
[data-ampliar] { cursor: zoom-in; }
.visor { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 64px 24px 32px; background: rgba(4, 22, 28, .95); cursor: zoom-out; animation: visor-entra .3s ease; }
.visor figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.visor img { display: block; max-width: min(92vw, 1600px); max-height: 82vh; width: auto; height: auto; object-fit: contain; cursor: default; }
.visor figcaption { max-width: 60em; font-size: 12px; color: var(--petroleo-suave); text-align: center; }
.visor-cerrar { position: absolute; top: 20px; right: 24px; padding: 8px 4px; border: 0; background: none; color: var(--gris-calido); font-size: 13px; cursor: pointer; }
.visor-cerrar:hover, .visor-cerrar:focus-visible { color: var(--naranja); }
@keyframes visor-entra { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .visor { animation: none; } }

/* Logo y Hablemos del menú: mismo lenguaje de globo que los botones */
.menu-marca img { border-radius: 22px 16px 24px 14px / 16px 22px 14px 24px; transform: rotate(-1.2deg);
	box-shadow: 0 14px 28px -18px rgba(13, 52, 63, .6); animation: globo 5.5s ease-in-out infinite; --giro: -1.2deg; }
.menu-marca:hover img { animation-play-state: paused; filter: brightness(1.06); }
.menu-cta { font-family: var(--mono); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; padding: 14px 26px; --giro: .9deg;
	border-radius: 20px 28px 18px 26px / 26px 18px 28px 20px; box-shadow: 0 14px 28px -18px rgba(13, 52, 63, .6);
	animation: globo 5.5s ease-in-out infinite; animation-delay: -1.8s; outline: 2px solid transparent; outline-offset: 4px; transition: background-color .25s ease, color .25s ease, outline-color .2s ease; }
.menu-cta:hover, .menu-cta:focus-visible { animation-play-state: paused; outline-color: currentColor; }
.menu-cta .punto { position: absolute; top: 9px; right: 10px; margin: 0; background: var(--noche); }
.menu-cta:hover .punto, .menu-cta[aria-current="page"] .punto { background: var(--naranja); }
@media (max-width: 700px) {
	.menu-cta { font-family: inherit; font-size: clamp(30px, 9vw, 44px); letter-spacing: -0.03em; text-transform: none; padding: 18px 0; border-radius: 0; box-shadow: none; animation: none; transform: none; }
	.menu-cta .punto { position: static; }
}
@media (prefers-reduced-motion: reduce) { .menu-marca img, .menu-cta { animation: none; transform: rotate(var(--giro)); } }