/* Ámbar Iluminación V4 · propuesta de diseño de Verisium (identidad propuesta).
   Una exposición de espacios transformados por luz. Foto grande, viva, dominante; interfaz silenciosa; texto compuesto.
   Dos familias: Big Shoulders Display (rótulo y folio) y Albert Sans (texto). Sin tarjetas, sin píldoras, sin rellenos.
   Un corte: 56.25rem (+ uno de ajuste en 80rem). Fuentes OFL autoalojadas. */
@font-face { font-family: 'Big Shoulders Display'; src: url(fuentes/big-shoulders-display-500.woff2) format('woff2'); font-weight: 500; font-display: swap }
@font-face { font-family: 'Big Shoulders Display'; src: url(fuentes/big-shoulders-display-800.woff2) format('woff2'); font-weight: 800; font-display: swap }
@font-face { font-family: 'Albert Sans'; src: url(fuentes/albert-sans-400.woff2) format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: 'Albert Sans'; src: url(fuentes/albert-sans-600.woff2) format('woff2'); font-weight: 600; font-display: swap }

:root {
  --noche: #08090c; --carbon: #101117; --cal: #ece2d0; --humo: #978c7d; --filamento: #fff3dc; --tungsteno: #ffb238;
  --linea: rgba(236, 226, 208, .16); --linea-fuerte: rgba(236, 226, 208, .34);
  --ff-cartel: 'Big Shoulders Display', 'Arial Narrow', sans-serif; --ff-texto: 'Albert Sans', system-ui, sans-serif;
  --fs-meta: .8125rem; --fs-chico: .9375rem; --fs-cuerpo: 1.0625rem; --fs-lead: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  --fs-tesis: clamp(1.6rem, 1.1rem + 2.2vw, 3.1rem); --fs-h2: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
  --fs-d1: clamp(2.9rem, 1rem + 9vw, 11rem); --fs-d2: clamp(3rem, 1.4rem + 6vw, 8rem); --fs-folio: clamp(4rem, 2rem + 8vw, 10rem);
  --m: clamp(1rem, 3.4vw, 3.25rem); --g: clamp(.75rem, 1.6vw, 1.5rem);
  --s1: .5rem; --s2: 1rem; --s3: 1.75rem; --s4: 3rem; --s5: clamp(4rem, 3rem + 5vw, 8rem); --s6: clamp(6rem, 4rem + 8vw, 12rem);
  --barra: 3.5rem;
  --dur-micro: 180ms; --dur-estado: 360ms; --dur-revela: 900ms;
  --ease-sale: cubic-bezier(.16, .84, .24, 1); --ease-estado: cubic-bezier(.2, 0, 0, 1); --ease-entra: cubic-bezier(.55, 0, .75, .2);
  color-scheme: dark;
}

@layer base {
  *, *::before, *::after { box-sizing: border-box }
  p, li, dd, figcaption { text-wrap: pretty }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barra) + 1rem); background: var(--noche) }
  body { margin: 0; background: var(--noche); color: var(--cal); font: 400 var(--fs-cuerpo)/1.6 var(--ff-texto); overflow-x: clip; font-variant-numeric: lining-nums }
  img { display: block; max-width: 100%; height: auto }
  h1, h2, h3, p, dl, dd, ol, ul, figure, blockquote, pre { margin: 0 }
  ol, ul { padding: 0; list-style: none }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em }
  button, input, select, textarea { font: inherit; color: inherit }
  :focus-visible { outline: 2px solid var(--filamento); outline-offset: 3px }
  [hidden] { display: none !important }
}
main { display: block }
.saltar { position: fixed; left: var(--s2); top: -5rem; z-index: 90; background: var(--tungsteno); color: var(--noche); padding: .75rem 1rem; font-weight: 600 }
.saltar:focus { top: var(--s2) }
.ref { font: 500 .95em/1 var(--ff-cartel); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--cal) }

/* ═══ LA CÁMARA: cada foto responde al scroll según su modo. --p: posición en la ventana (−1…1) · --e: entrada (0…1) · --px/--py: puntero ═══ */
.cam { position: relative; overflow: hidden; background: var(--carbon); --p: 0; --e: 1; --px: 0; --py: 0 }
.cam__img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(var(--s, 1)); will-change: transform }
.js .cam[data-cam="pan"] .cam__img { --s: 1.12; --ty: calc(var(--p) * -5%) }
.js .cam[data-cam="pan-x"] .cam__img { --s: 1.14; --tx: calc(var(--p) * -6%); --ty: calc(var(--p) * -2%) }
.js .cam[data-cam="zoom"] .cam__img { --s: calc(1.02 + (1 - var(--e)) * .06 + var(--p) * -.01) }
.js .cam[data-cam="drop"] .cam__img { --s: 1.08; --ty: calc((1 - var(--e)) * -9% + var(--p) * -3%); clip-path: inset(calc((1 - var(--e)) * 34%) 0 0 0) }
.js .cam[data-cam="fold"] .cam__img { --s: 1.06; --ty: calc(var(--p) * -3%); -webkit-mask-image: linear-gradient(112deg, #000 calc(var(--e) * 140% - 40%), transparent calc(var(--e) * 140%)); mask-image: linear-gradient(112deg, #000 calc(var(--e) * 140% - 40%), transparent calc(var(--e) * 140%)) }
.js .cam[data-cam="rake"] .cam__img { --s: 1.06; --tx: calc((1 - var(--e)) * -3%); clip-path: inset(0 calc((1 - var(--e)) * 100%) 0 0); filter: brightness(calc(.3 + .7 * var(--e))) }
.js .cam[data-cam="still"] .cam__img { --s: calc(1 + var(--e) * .025) }
.js .cam[data-cam="drift"] .cam__img { --s: 1.1; --ty: calc(var(--p) * var(--drift, 0) * -8%) }
.js .cam[data-cam="pointer"] .cam__img { --s: 1.08; --tx: calc(var(--px) * 2.2%); --ty: calc(var(--py) * 2.2%); transition: transform 600ms var(--ease-sale) }
.js .cam[data-cam="hero"] .cam__img { --s: 1.06; --ty: calc(var(--p) * -8%) }
/* la foto aparece con la luz: hasta que la cámara la tiene, espera en negro (nunca se queda a oscuras: .sin-motor) */
.js .cam:not(.lista) .cam__img { opacity: 0 }
.js .cam.lista .cam__img, .sin-motor .cam .cam__img { opacity: 1 }
.js .cam .cam__img { transition: opacity 700ms var(--ease-sale) }
.js .cam[data-cam="pointer"] .cam__img { transition: opacity 700ms var(--ease-sale), transform 600ms var(--ease-sale) }

/* ═══ TITULARES: cada línea se revela por máscara al entrar ═══ */
.mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .16em 0 .06em; margin: -.16em 0 -.06em }
.mask__t { display: inline-block }
.js .mask:not(.vista) .mask__t { transform: translateY(108%) }
.js .mask .mask__t { transition: transform var(--dur-revela) var(--ease-sale) }
.js .mask.vista .mask__t { transform: none }
.sin-motor .mask .mask__t { transform: none !important }

/* ═══ ACCIONES: A texto + regla + flecha · B folio · C conversión con barrido ═══ */
.accion { position: relative; display: inline-flex; align-items: center; gap: .7rem; min-height: 2.75rem; padding: 0; background: none; border: 0; color: var(--cal); font: 600 var(--fs-chico)/1.2 var(--ff-texto); text-decoration: none; cursor: pointer; transition: color var(--dur-micro) var(--ease-estado) }
.accion__linea { display: block; width: 2.25rem; height: 1px; background: currentColor; transition: width var(--dur-estado) var(--ease-estado), background-color var(--dur-micro) }
.accion__flecha { display: inline-block; font-family: var(--ff-texto); transition: transform var(--dur-estado) var(--ease-estado) }
.accion:hover, .accion:focus-visible { color: var(--filamento) }
.accion:hover .accion__linea, .accion:focus-visible .accion__linea { width: 3.75rem; background: var(--tungsteno) }
.accion:hover .accion__flecha, .accion:focus-visible .accion__flecha { transform: translateX(.3rem) }
.accion:active .accion__flecha { transform: translateX(.55rem); transition-duration: 80ms }
.accion--sec { color: var(--humo) }
.accion--folio { min-height: 2.75rem; gap: .5rem; font-size: var(--fs-meta) }
.accion--folio .accion__linea { width: 1.25rem }
.accion--folio:hover .accion__linea { width: 2.25rem }
.accion--boton { cursor: pointer }
.accion--grande { gap: 1rem; min-height: 3.25rem; padding-bottom: .4rem; border-bottom: 1px solid var(--linea-fuerte); font: 500 clamp(1.35rem, 1.1rem + 1vw, 1.9rem)/1 var(--ff-cartel); letter-spacing: .03em; text-transform: uppercase; color: var(--filamento) }
.accion--grande::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--tungsteno); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-estado) var(--ease-estado) }
.accion--grande:hover::after, .accion--grande:focus-visible::after { transform: none }
.accion--grande .accion__linea { display: none }
.accion--grande .accion__flecha { font-family: var(--ff-cartel); font-size: 1.1em }
.accion--grande:hover .accion__flecha { transform: translateX(.5rem) }
.accion--barra { font-size: var(--fs-chico); color: var(--tungsteno) }
.accion--barra .accion__linea { width: 1.25rem }
.accion--barra:hover .accion__linea { width: 2rem }
.accion[aria-pressed="true"] .accion__flecha { color: var(--tungsteno) }
.accion:disabled { color: #5a5248; cursor: default }

/* ═══ LA BARRA ═══ */
.barra { position: fixed; z-index: 60; inset: 0 0 auto; height: var(--barra); display: flex; align-items: center; gap: var(--s2); padding: 0 var(--m); color: var(--cal); view-transition-name: barra; background: linear-gradient(rgba(8, 9, 12, .92), rgba(8, 9, 12, .6) 70%, transparent) }
.barra__marca { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; text-decoration: none; color: var(--filamento) }
.barra__punto { width: .5rem; height: .5rem; border-radius: 50%; background: var(--tungsteno); box-shadow: 0 0 .5rem rgba(255, 178, 56, .55) }
.barra__nombre { font: 800 1.45rem/1 var(--ff-cartel); letter-spacing: .06em; text-transform: uppercase }
.barra__folio { display: none; margin: 0 auto; font: 500 .95rem/1 var(--ff-cartel); letter-spacing: .08em; text-transform: uppercase; color: var(--humo); font-variant-numeric: tabular-nums }
.barra__nav { display: flex; align-items: center; gap: .1rem; margin-left: auto }
.barra__indice, .barra__idioma { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0 .6rem; background: none; border: 0; color: var(--cal); font: 600 var(--fs-chico)/1 var(--ff-texto); text-decoration: none; cursor: pointer; transition: color var(--dur-micro) }
.barra__indice:hover, .barra__idioma:hover { color: var(--filamento) }
.barra__indice-lineas { width: 1rem; height: .55rem; border-block: 1.5px solid currentColor }
.barra__idioma { font: 500 1rem/1 var(--ff-cartel); letter-spacing: .08em }
.barra .accion--barra { margin-left: .4rem }

/* ═══ EL ÍNDICE ═══ */
.indice { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--cal); overflow: hidden }
.indice::backdrop { background: rgba(4, 5, 7, .9) }
.indice__marco { position: absolute; inset: 0; overflow-y: auto; background: var(--noche); padding: var(--s2) var(--m) var(--s4); display: grid; align-content: start; gap: var(--s4) }
.indice__cab { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem }
.indice__k { font: 500 .9rem/1 var(--ff-cartel); letter-spacing: .08em; text-transform: uppercase; color: var(--humo) }
.indice__cerrar { min-height: 2.75rem; padding: 0; background: none; border: 0; cursor: pointer; font-weight: 600; font-size: var(--fs-chico); color: var(--cal) }
.indice__cerrar:hover { color: var(--filamento) }
.indice__planos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--g) }
.indice__plano { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .6rem; align-items: baseline; text-decoration: none; color: var(--cal) }
.indice__cam { grid-column: 1 / -1; aspect-ratio: 4 / 3; margin-bottom: .6rem }
.indice__n, .indice__c { font: 500 .95rem/1 var(--ff-cartel); letter-spacing: .06em; color: var(--humo); font-variant-numeric: tabular-nums }
.indice__nom { font: 800 clamp(1.5rem, 1rem + 2vw, 2.4rem)/1 var(--ff-cartel); text-transform: uppercase; transition: color var(--dur-micro) }
.indice__plano:hover .indice__nom, .indice__plano:focus-visible .indice__nom, .indice__plano[aria-current="page"] .indice__nom { color: var(--filamento) }
.indice__plano[aria-current="page"] .indice__n { color: var(--tungsteno) }
.indice__resto { display: grid }
.indice__resto a { display: flex; align-items: baseline; gap: .75rem; min-height: 3rem; padding: .5rem 0; text-decoration: none; color: var(--cal); font: 800 clamp(1.4rem, 1rem + 1.6vw, 2rem)/1 var(--ff-cartel); text-transform: uppercase; transition: color var(--dur-micro) }
.indice__resto a:hover, .indice__resto a[aria-current="page"] { color: var(--filamento) }
.indice__resto a[aria-current="page"] .indice__n { color: var(--tungsteno) }
.indice__datos { display: grid; gap: .1rem; font-size: var(--fs-chico); color: var(--humo) }
.indice__datos a { display: flex; align-items: center; min-height: 2.75rem; color: var(--cal) }
.indice__datos .indice__k { margin-top: var(--s2) }

/* ═══ INICIO · el héroe: foto a sangre, título físicamente en la foto ═══ */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; color: var(--filamento) }
.hero__cam { position: absolute; inset: 0; z-index: 0 }
.hero__cam .cam__img { height: 100% }
.hero__velo { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8, 9, 12, .35) 0, transparent 22%, transparent 40%, rgba(8, 9, 12, .72) 62%, rgba(8, 9, 12, .97) 100%); pointer-events: none }
.hero__texto { position: relative; z-index: 2; grid-row: 2; padding: 0 var(--m); align-self: end }
.hero__voz { font-size: var(--fs-lead); line-height: 1.35; color: var(--cal); max-width: 22ch; margin-bottom: .6rem }
.hero__h1 { font: 800 var(--fs-d1)/.86 var(--ff-cartel); text-transform: uppercase; letter-spacing: -.01em; color: var(--filamento) }
.hero__h1 .mask { display: block }
.hero__meta { position: relative; z-index: 2; grid-row: 3; padding: var(--s3) var(--m) var(--s3); display: grid; gap: var(--s2) }
.hero__lista { display: grid; gap: .15rem; font-size: var(--fs-chico); color: var(--cal) }
.hero__dato { font-weight: 600; color: var(--filamento); font-variant-numeric: tabular-nums }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .5rem var(--s3) }
.hero__folio { position: absolute; z-index: 2; right: var(--m); top: calc(var(--barra) + .5rem); max-width: 16rem; text-align: right; font-size: var(--fs-meta); color: var(--humo); display: none }
.js .hero__meta { transition: opacity 900ms var(--ease-sale) 1500ms, transform 900ms var(--ease-sale) 1500ms }
.js .hero:not(.abre) .hero__meta { opacity: 0; transform: translateY(.75rem) }
.js .hero:not(.abre) .hero__cam .cam__img { transform: translate3d(0, 5%, 0) scale(1.22); filter: brightness(.3) }
.js .hero.abre .hero__cam .cam__img { transition: opacity 700ms var(--ease-sale), transform 2600ms var(--ease-sale), filter 2200ms var(--ease-sale) 200ms; filter: brightness(1) }
.sin-motor .hero .hero__meta, .sin-motor .hero .hero__cam .cam__img { opacity: 1 !important; transform: none !important; filter: none !important }

/* la tesis: una frase grande y la entrada a los capítulos */
.tesis { padding: var(--s5) var(--m) var(--s4); display: grid; gap: var(--s2) }
.tesis__t { font: 400 var(--fs-tesis)/1.18 var(--ff-texto); letter-spacing: -.012em; color: var(--filamento); max-width: 24ch; text-wrap: balance }
.tesis__k { margin-top: var(--s3); font: 500 .9rem/1 var(--ff-cartel); letter-spacing: .08em; text-transform: uppercase; color: var(--humo) }
.tesis__d { max-width: 34rem; color: var(--cal) }

/* los cinco planos: una pila continua; cada capítulo cubre al anterior */
.planos { position: relative }
.plano { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--noche); color: var(--filamento); display: grid }
.plano__cam { position: absolute; inset: 0 }
.plano--piezas .plano__cam { inset: 12svh var(--m) 24svh; left: auto; width: min(100%, 36rem); background: transparent }
.plano__capa { position: relative; z-index: 2; align-self: end; padding: 0 var(--m) var(--s4); display: grid; gap: .4rem; background: linear-gradient(transparent, rgba(8, 9, 12, .82) 55%) }
.plano__capa::before { content: ''; display: block; height: 30svh }
.plano__n { position: absolute; left: var(--m); top: calc(var(--barra) + .25rem); font: 500 var(--fs-folio)/1 var(--ff-cartel); letter-spacing: -.02em; color: var(--filamento); font-variant-numeric: tabular-nums; opacity: .9 }
.plano__nom { font: 800 var(--fs-d2)/.88 var(--ff-cartel); text-transform: uppercase; letter-spacing: -.005em }
.plano__nom a { text-decoration: none; color: inherit }
.plano__d { max-width: 32rem; font-size: var(--fs-lead); line-height: 1.35; color: var(--cal) }
.plano__pie { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; margin-top: .5rem; font-size: var(--fs-meta); color: var(--humo) }
.js .plano { --c: 0 }
.js .plano .plano__cam, .js .plano .plano__capa, .js .plano .plano__n { transition: filter 200ms linear, opacity 200ms linear }
.js .plano.cubierto .plano__cam { filter: brightness(.45) }
.js .plano.cubierto .plano__capa, .js .plano.cubierto .plano__n { opacity: .25 }

/* la tira del archivo: ocho fotos que se desplazan a destiempo */
.tira { padding: var(--s6) 0 var(--s5); overflow: hidden }
.tira__cab { padding: 0 var(--m) var(--s3); display: grid; gap: .5rem }
.tira__k { font: 500 .9rem/1 var(--ff-cartel); letter-spacing: .08em; text-transform: uppercase; color: var(--humo) }
.tira__t { max-width: 36rem; font-size: var(--fs-lead); line-height: 1.4; color: var(--filamento) }
.tira__carril { display: flex; gap: var(--g); padding: var(--s2) var(--m) 0; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--m) }
.tira__carril::-webkit-scrollbar { display: none }
.tira__f { flex: 0 0 min(60vw, 22rem); text-decoration: none; color: var(--humo); font-size: var(--fs-meta) }
.tira__f .cam { aspect-ratio: 3 / 2; margin-bottom: .5rem }
.tira__f[data-drift="1"] { margin-top: var(--s4) }
.tira__f[data-drift="1"] .cam { --drift: 1 }
.tira__f[data-drift="-1"] .cam { --drift: -1 }
/* la hoja de contactos: cada columna se desplaza a destiempo al hacer scroll, además del reencuadre por puntero */
.hoja[data-modo="hoja"] .ficha[data-drift="1"] .cam__img { --ty: calc(var(--py) * 2.2% + var(--p) * -4%) }
.hoja[data-modo="hoja"] .ficha[data-drift="-1"] .cam__img { --ty: calc(var(--py) * 2.2% + var(--p) * 4%) }
.tira__ref { display: flex; align-items: baseline; gap: .5rem }

/* servicio: pieza editorial en dos columnas, con foto */
.servicio { padding: var(--s5) 0 0; display: grid; gap: var(--s4) }
.servicio__foto .cam { aspect-ratio: 4 / 5 }
.servicio__pie { padding: .55rem var(--m) 0; font-size: var(--fs-meta); color: var(--humo) }
.servicio__texto { padding: 0 var(--m); display: grid; gap: var(--s3); align-content: start }
.servicio__t { font: 800 var(--fs-h2)/.95 var(--ff-cartel); text-transform: uppercase; color: var(--filamento) }
.servicio__lista { display: grid; gap: .2rem; color: var(--cal); font-size: var(--fs-lead); line-height: 1.3; counter-reset: s }
.servicio__lista li { display: flex; gap: .75rem; align-items: baseline; counter-increment: s }
.servicio__lista li::before { content: counter(s, decimal-leading-zero); font: 500 .9rem/1 var(--ff-cartel); letter-spacing: .06em; color: var(--humo); min-width: 1.6rem }
.servicio__cifras { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4) }
.cifra { display: grid }
.cifra__n { font: 500 clamp(3rem, 2rem + 4vw, 5.5rem)/1 var(--ff-cartel); letter-spacing: -.01em; color: var(--filamento); font-variant-numeric: tabular-nums }
.cifra__d { font-size: var(--fs-chico); color: var(--humo) }
.servicio__mas { max-width: 34rem; color: var(--cal) }
.servicio__fuente { display: block; margin-top: .3rem; font-size: var(--fs-meta); color: var(--humo) }
.servicio__cob { max-width: 34rem; color: var(--cal) }
.servicio__k { display: block; font: 500 .85rem/1.6 var(--ff-cartel); letter-spacing: .08em; text-transform: uppercase; color: var(--humo) }

/* la fecha: campo tipográfico, cierre del inicio */
.fecha { padding: var(--s6) var(--m) var(--s5) }
.fecha__forma { display: grid; gap: var(--s3); max-width: 60rem }
.fecha__k { font: 800 var(--fs-d2)/.9 var(--ff-cartel); text-transform: uppercase; color: var(--filamento); max-width: 12ch }
.fecha__k .mask { display: block }
.fecha__campo { position: relative; max-width: 24rem }
.fecha__campo input { width: 100%; padding: .5rem 0 .6rem; background: transparent; border: 0; border-bottom: 1px solid var(--linea-fuerte); border-radius: 0; color: var(--filamento); font: 500 clamp(2rem, 1.5rem + 2vw, 3.2rem)/1.1 var(--ff-cartel); letter-spacing: .03em; color-scheme: dark }
.fecha__campo input:focus { outline: none }
.fecha__linea { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--tungsteno); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-estado) var(--ease-estado) }
.fecha__campo:focus-within .fecha__linea, .fecha__campo.lleno .fecha__linea { transform: none }
.fecha__dias { color: var(--humo); font-size: var(--fs-chico); min-height: 1.5em }
.fecha__dias.pronto { color: var(--tungsteno) }

/* ═══ CAPÍTULOS ═══ */
.cap__hero { position: relative; min-height: 86svh; display: grid; color: var(--filamento) }
.cap__cam { position: absolute; inset: 0 }
.cap--piezas .cap__cam { inset: calc(var(--barra) + 1rem) var(--m) 30svh; background: transparent }
.cap__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 9, 12, .4), transparent 25%, transparent 45%, rgba(8, 9, 12, .86) 100%); pointer-events: none }
.cap__capa { position: relative; z-index: 2; align-self: end; padding: 0 var(--m) var(--s4); display: grid; gap: .4rem }
.cap__n { font: 500 1.3rem/1 var(--ff-cartel); letter-spacing: .06em; color: var(--tungsteno); font-variant-numeric: tabular-nums }
.cap__de { color: var(--humo) }
.cap__h1 { font: 800 var(--fs-d1)/.86 var(--ff-cartel); text-transform: uppercase; letter-spacing: -.01em }
.cap__linea { font-size: var(--fs-lead); color: var(--cal); max-width: 26ch }
.cap__folio { position: absolute; z-index: 2; right: var(--m); bottom: var(--s2); max-width: 18rem; text-align: right; font-size: var(--fs-meta); line-height: 1.4; color: var(--humo); display: none }
.cap__intro { padding: var(--s4) var(--m) 0; display: grid; gap: var(--s3) }
.cap__texto { font-size: var(--fs-lead); line-height: 1.4; color: var(--filamento); max-width: 30ch }
.cap__datos { display: grid; gap: var(--s2); align-content: start }
.cap__meta { font-size: var(--fs-meta); color: var(--humo) }
.serie { padding: var(--s4) 0 0; display: grid; gap: var(--s4) }
.serie__f { display: grid; gap: .6rem }
.serie__f .cam { aspect-ratio: 3 / 2 }
.serie__pie { padding: 0 var(--m); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; row-gap: .1rem; font-size: var(--fs-meta); color: var(--humo) }
.serie__pie .ref { grid-row: span 3; padding-top: .15rem }
.serie__desc { color: var(--cal); font-size: var(--fs-chico) }
.serie__pie .accion { grid-column: 2; justify-self: start }
.cap__sig { margin-top: var(--s5) }
.sig { position: relative; display: block; min-height: 62svh; color: var(--filamento); text-decoration: none; overflow: hidden }
.sig__cam { position: absolute; inset: 0 }
.sig__capa { position: absolute; inset: 0; display: grid; align-content: end; padding: 0 var(--m) var(--s4); gap: .25rem; background: linear-gradient(transparent 30%, rgba(8, 9, 12, .85)) }
.sig__k { font-size: var(--fs-meta); font-weight: 600; color: var(--humo) }
.sig__n { font: 500 1.3rem/1 var(--ff-cartel); letter-spacing: .06em; color: var(--tungsteno) }
.sig__nom { font: 800 var(--fs-d2)/.88 var(--ff-cartel); text-transform: uppercase; transition: letter-spacing var(--dur-revela) var(--ease-sale) }
.sig:hover .sig__nom, .sig:focus-visible .sig__nom { letter-spacing: .02em }
.sig:hover .sig__cam .cam__img { --s: 1.09 }
.cap__otros { padding: var(--s3) var(--m) 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; font-size: var(--fs-chico); color: var(--humo) }
.cap__otros a { display: inline-flex; align-items: baseline; gap: .4rem; min-height: 2.75rem; color: var(--cal); text-decoration: none; transition: color var(--dur-micro) }
.cap__otros a:hover { color: var(--filamento) }
.cap__otros-k { width: 100%; font: 500 .85rem/1 var(--ff-cartel); letter-spacing: .08em; text-transform: uppercase }

/* ═══ CABECERA DE PÁGINA ═══ */
.pag { padding: calc(var(--barra) + var(--s4)) var(--m) var(--s4); display: grid; gap: var(--s2); align-items: end }
.pag__h1 { font: 800 var(--fs-d1)/.86 var(--ff-cartel); text-transform: uppercase; letter-spacing: -.01em; color: var(--filamento); text-wrap: balance }
.pag__d { max-width: 36rem; font-size: var(--fs-lead); line-height: 1.45; color: var(--cal) }

/* ═══ ARCHIVO ═══ */
.archivo { padding: 0 var(--m) }
.archivo__indices { display: grid; gap: .1rem; margin-bottom: var(--s4) }
.indices { display: flex; align-items: center; gap: 0 1.1rem; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--m) * -1); padding-inline: var(--m) }
.indices::-webkit-scrollbar { display: none }
.indices__k { flex: none; min-width: 3.5rem; font: 500 .85rem/1 var(--ff-cartel); letter-spacing: .08em; text-transform: uppercase; color: var(--humo) }
.indx { flex: none; position: relative; display: inline-flex; align-items: baseline; gap: .35rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0; background: none; border: 0; cursor: pointer; color: var(--humo); font: 600 var(--fs-chico)/2.75rem var(--ff-texto); transition: color var(--dur-micro) }
.indx::after { content: ''; position: absolute; left: 0; right: 0; bottom: .5rem; height: 1px; background: var(--tungsteno); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-estado) var(--ease-estado) }
.indx__n { font: 500 .8rem/1 var(--ff-cartel); letter-spacing: .05em; font-variant-numeric: tabular-nums }
.indx:hover { color: var(--cal) }
.indx[aria-pressed="true"] { color: var(--filamento) }
.indx[aria-pressed="true"]::after { transform: none }
.indx:disabled { color: #4e473f; cursor: default }
.archivo__conteo { padding-top: .5rem; font-size: var(--fs-meta); color: var(--humo) }
.archivo__conteo span { font: 500 .95rem/1 var(--ff-cartel); color: var(--filamento) }
.hoja[data-modo="hoja"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--g) }
.ficha { position: relative; display: grid; gap: .6rem; align-content: start }
.ficha[hidden] { display: none }
.ficha__abrir { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left }
.ficha__cam { aspect-ratio: 3 / 2 }
.ficha__pie { position: relative; display: grid; gap: .15rem; padding-right: 2.75rem; font-size: var(--fs-meta); color: var(--humo) }
.ficha__linea { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: baseline }
.ficha__plano { font-weight: 600; color: var(--cal) }
.ficha__desc { color: var(--cal); font-size: var(--fs-chico); max-height: 0; overflow: hidden; opacity: 0; transition: max-height var(--dur-estado) var(--ease-estado), opacity var(--dur-estado) }
.ficha:hover .ficha__desc, .ficha:focus-within .ficha__desc { max-height: 4em; opacity: 1 }
.ficha__tono { display: none }
.ficha:hover .ref, .ficha:focus-within .ref { color: var(--tungsteno) }
.ficha__guardar { position: absolute; right: 0; top: -.6rem; justify-items: end; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; background: none; border: 0; cursor: pointer }
.ficha__marca { width: .9rem; height: .9rem; border: 1px solid var(--humo); transition: background-color var(--dur-micro), border-color var(--dur-micro) }
.ficha__guardar:hover .ficha__marca { border-color: var(--filamento) }
.ficha__guardar[aria-pressed="true"] .ficha__marca { background: var(--tungsteno); border-color: var(--tungsteno) }
.ficha.guardada .ficha__cam { outline: 1px solid var(--tungsteno); outline-offset: 3px }
.hoja[data-modo="indice"] .ficha { grid-template-columns: 6rem minmax(0, 1fr); column-gap: var(--s2); padding: .7rem 0; border-top: 1px solid var(--linea) }
.hoja[data-modo="indice"] .ficha__desc { max-height: none; opacity: 1 }
.hoja[data-modo="indice"] .ficha__tono { display: block }
.archivo__vacio { padding: var(--s3) 0; color: var(--humo) }
.bandeja { position: sticky; bottom: 0; z-index: 20; display: grid; gap: .5rem; margin: var(--s3) calc(var(--m) * -1) 0; padding: .75rem var(--m) calc(.75rem + env(safe-area-inset-bottom)); background: var(--noche); border-top: 1px solid var(--linea-fuerte) }
.bandeja__k { font-size: var(--fs-meta); font-weight: 600; color: var(--humo) }
.bandeja__refs { font: 500 1rem/1 var(--ff-cartel); letter-spacing: .05em; color: var(--filamento); margin-left: .35rem }
.bandeja__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem var(--s3) }
.bandeja__acciones .accion--grande { margin-left: auto; font-size: 1.2rem }
/* el detalle: la misma foto se expande desde la hoja (FLIP en app.js) */
.detalle { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--noche); color: var(--cal) }
.detalle::backdrop { background: var(--noche) }
.detalle__marco { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
.detalle__foto { margin: 0; display: grid; place-items: center; min-height: 0; padding: calc(var(--barra) - .5rem) var(--s2) var(--s1) }
.detalle__foto img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transform-origin: 0 0 }
.detalle__foto img.cambia { opacity: 0 }
.detalle__meta { display: grid; gap: .45rem; padding: var(--s2) var(--m) calc(var(--s2) + env(safe-area-inset-bottom)); overflow-y: auto; max-height: 50svh }
.detalle__pos { font-size: var(--fs-meta); color: var(--humo); font-variant-numeric: tabular-nums }
.detalle__ref { font: 800 2.4rem/1 var(--ff-cartel); text-transform: uppercase; color: var(--filamento); letter-spacing: .02em }
.detalle__ref-k { font-weight: 500; color: var(--humo) }
.detalle__desc { color: var(--cal); font-size: var(--fs-lead); line-height: 1.35 }
.detalle__datos { font-size: var(--fs-chico); color: var(--humo) }
.detalle__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--s3); margin-top: .5rem }
.detalle__nav { display: flex; gap: var(--s3); padding-top: .5rem }
.detalle__btn { min-height: 2.75rem; padding: 0; background: none; border: 0; cursor: pointer; font-weight: 600; font-size: var(--fs-chico); color: var(--cal); transition: color var(--dur-micro) }
.detalle__btn:hover { color: var(--filamento) }
.detalle__btn--cerrar { margin-left: auto }
.js .detalle[open] .detalle__meta { animation: aparece 420ms var(--ease-sale) 160ms both }
@keyframes aparece { from { opacity: 0; transform: translateY(.5rem) } to { opacity: 1; transform: none } }

/* ═══ CÓMO TRABAJAMOS: una línea que avanza ═══ */
.secuencia { position: relative; padding: var(--s2) var(--m) 0 calc(var(--m) + 1.5rem); display: grid; gap: var(--s5) }
.secuencia__linea { position: absolute; left: var(--m); top: 0; bottom: 0; width: 1px; background: var(--linea) }
.secuencia__linea span { display: block; width: 100%; height: calc(var(--avance, 0) * 100%); background: var(--tungsteno); transition: height 120ms linear }
.paso { position: relative; display: grid; gap: .5rem; max-width: 40rem }
.paso::before { content: ''; position: absolute; left: calc(-1.5rem - 3px); top: .55rem; width: 7px; height: 7px; background: var(--noche); border: 1px solid var(--humo); transition: background-color var(--dur-estado), border-color var(--dur-estado) }
.paso.visto::before { background: var(--tungsteno); border-color: var(--tungsteno) }
.paso__n { font: 500 .95rem/1 var(--ff-cartel); letter-spacing: .08em; text-transform: uppercase; color: var(--humo); font-variant-numeric: tabular-nums }
.paso__k { color: var(--humo) }
.paso__h { font: 800 var(--fs-d2)/.9 var(--ff-cartel); text-transform: uppercase; color: var(--filamento) }
.paso__d { font-size: var(--fs-lead); line-height: 1.4; color: var(--cal); max-width: 32ch }
.paso__foto { margin-top: var(--s2); max-width: 32rem }
.paso__foto .cam { aspect-ratio: 3 / 2 }
.paso__pie { padding-top: .5rem; font-size: var(--fs-meta); color: var(--humo) }
.servicio--pag { padding-top: var(--s6) }
.cierre { padding: var(--s6) var(--m) var(--s5); display: grid; gap: var(--s3); justify-items: start }
.cierre__t { font: 800 var(--fs-d2)/.9 var(--ff-cartel); text-transform: uppercase; color: var(--filamento); max-width: 14ch }

/* ═══ COTIZA ═══ */
.pag--corta { padding-bottom: var(--s3) }
.cotiza { display: grid; gap: var(--s5); padding: 0 var(--m) var(--s6) }
.forma { display: grid; gap: var(--s4); align-content: start }
.campo { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; min-width: 0 }
.campo__k, .campo legend { padding: 0; font: 500 .95rem/1 var(--ff-cartel); letter-spacing: .08em; text-transform: uppercase; color: var(--humo) }
.campo legend { margin-bottom: .6rem }
.campo input:not([type="radio"]):not([type="checkbox"]), .campo select { width: 100%; min-height: 3.25rem; padding: .4rem 0; background: transparent; border: 0; border-bottom: 1px solid var(--linea-fuerte); border-radius: 0; color: var(--filamento); font: 400 clamp(1.25rem, 1.05rem + .8vw, 1.6rem)/1.2 var(--ff-texto); color-scheme: dark; transition: border-color var(--dur-micro) }
.campo select { appearance: none; -webkit-appearance: none; background: linear-gradient(45deg, transparent 50%, var(--humo) 50%) right .4rem top 55% / .5rem .5rem no-repeat, linear-gradient(135deg, var(--humo) 50%, transparent 50%) right 0 top 55% / .5rem .5rem no-repeat; padding-right: 1.5rem }
.campo select option { background: var(--noche); font-size: 1rem }
.campo input:focus, .campo select:focus { border-color: var(--tungsteno); outline: none }
.campo input::placeholder { color: #6e665b }
.opciones { display: flex; flex-wrap: wrap; gap: 0 var(--s4) }
.opcion { position: relative; cursor: pointer }
.opcion input, .marca input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer }
.opcion span { position: relative; display: inline-flex; align-items: center; min-height: 3rem; font: 500 clamp(1.3rem, 1.1rem + 1vw, 1.9rem)/1 var(--ff-cartel); letter-spacing: .03em; text-transform: uppercase; color: var(--humo); transition: color var(--dur-micro) }
.opcion span::after { content: ''; position: absolute; left: 0; right: 0; bottom: .35rem; height: 1px; background: var(--tungsteno); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-estado) var(--ease-estado) }
.opcion:hover span { color: var(--cal) }
.opcion input:checked + span { color: var(--filamento) }
.opcion input:checked + span::after { transform: none }
.opcion input:focus-visible + span, .marca input:focus-visible + span { outline: 2px solid var(--filamento); outline-offset: 4px }
.marcas { display: grid; gap: 0 }
.marca { position: relative; cursor: pointer }
.marca span { display: flex; align-items: baseline; gap: .85rem; min-height: 3rem; padding: .6rem 0; font-size: var(--fs-lead); line-height: 1.3; color: var(--cal); transition: color var(--dur-micro) }
.marca span::before { content: ''; flex: none; width: .9rem; height: .9rem; transform: translateY(.05em); border: 1px solid var(--humo); transition: background-color var(--dur-micro), border-color var(--dur-micro) }
.marca:hover span::before { border-color: var(--filamento) }
.marca input:checked + span { color: var(--filamento) }
.marca input:checked + span::before { background: var(--tungsteno); border-color: var(--tungsteno) }
.referencias__lista { display: grid; gap: .5rem }
.referencias__lista li { display: grid; grid-template-columns: 5rem auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; font-size: var(--fs-meta); color: var(--cal) }
.referencias__lista img { width: 5rem; aspect-ratio: 3 / 2; object-fit: cover }
.referencias__lista button { min-height: 2.75rem; padding: 0; background: none; border: 0; color: var(--humo); cursor: pointer; font-size: var(--fs-meta); font-weight: 600; text-decoration: underline; text-underline-offset: .2em }
.referencias__lista button:hover { color: var(--filamento) }
.referencias__vacia { color: var(--humo); font-size: var(--fs-chico) }
.mensaje { align-self: start; display: grid; gap: var(--s2) }
.mensaje__cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2) }
.mensaje__k { font: 500 .85rem/1 var(--ff-cartel); letter-spacing: .08em; text-transform: uppercase; color: var(--humo) }
.mensaje__n { font: 500 1rem/1 var(--ff-cartel); letter-spacing: .05em; color: var(--filamento); font-variant-numeric: tabular-nums }
.mensaje__avance { height: 1px; background: var(--linea) }
.mensaje__avance span { display: block; height: 100%; width: calc(var(--carga, .33) * 100%); background: var(--tungsteno); transition: width var(--dur-revela) var(--ease-sale) }
.mensaje__texto { padding: var(--s2) 0; font: 400 var(--fs-lead)/1.5 var(--ff-texto); white-space: pre-wrap; word-break: break-word; color: var(--filamento) }
.mensaje__aviso { padding: .5rem 0; border-top: 1px solid var(--tungsteno); color: var(--tungsteno); font-size: var(--fs-chico) }
.mensaje__nota { color: var(--humo); font-size: var(--fs-chico) }
.mensaje__nota--chica { font-size: var(--fs-meta) }
.mensaje__acciones { display: grid; gap: .25rem; justify-items: start }
.mensaje__acciones .accion--grande { margin-bottom: .5rem }

/* ═══ COBERTURA ═══ */
.mapa { display: grid; gap: var(--s4); padding: 0 0 0 }
.mapa__esquema { margin: 0; padding: 0 var(--m) }
.mapa__svg { display: block; width: 100%; max-width: 36rem; aspect-ratio: 1; overflow: visible }
.mapa__ruta { stroke: var(--linea-fuerte); stroke-width: .22; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--avance, 1)); transition: stroke-dashoffset 1400ms var(--ease-sale) }
.mapa__nodo { fill: var(--noche); stroke: var(--cal); stroke-width: .25 }
.mapa__nodo--base { fill: var(--tungsteno); stroke: none }
.mapa__txt { fill: var(--cal); font: 600 4.3px var(--ff-texto) }
.mapa__txt--base { fill: var(--filamento); font-size: 4.8px }
.mapa__esquema figcaption { margin-top: var(--s1); font-size: var(--fs-meta); color: var(--humo) }
.mapa__texto { padding: 0 var(--m); display: grid; gap: var(--s3); align-content: start }
.mapa__k { display: block; font: 500 .85rem/1.6 var(--ff-cartel); letter-spacing: .08em; text-transform: uppercase; color: var(--humo) }
.mapa__base { font-size: var(--fs-lead); color: var(--filamento) }
.mapa__base .mapa__k { color: var(--tungsteno) }
.mapa__fuera { max-width: 34rem; color: var(--cal) }
.mapa__showroom { display: grid; gap: .25rem; max-width: 34rem; color: var(--cal) }
.mapa__dir { font-size: var(--fs-lead); color: var(--filamento) }
.mapa__foto { grid-column: 1 / -1; margin-top: var(--s4) }
.mapa__foto .cam { aspect-ratio: 16 / 9 }
.preguntas { padding: var(--s6) var(--m) 0; display: grid; gap: var(--s3) }
.preguntas__t { font: 800 var(--fs-h2)/.95 var(--ff-cartel); text-transform: uppercase; color: var(--filamento) }
.faq details { border-top: 1px solid var(--linea) }
.faq details:last-child { border-bottom: 1px solid var(--linea) }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 3.25rem; padding: .9rem 0; cursor: pointer; list-style: none; font-size: var(--fs-lead); line-height: 1.3; color: var(--cal); transition: color var(--dur-micro) }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: ''; flex: none; width: .75rem; height: .75rem; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; transition: transform var(--dur-estado) var(--ease-estado) }
.faq details[open] summary { color: var(--filamento) }
.faq details[open] summary::after { transform: rotate(45deg) }
.faq summary:hover { color: var(--filamento) }
.faq details p { padding: 0 0 1.2rem; color: var(--cal); max-width: 42rem }

/* ═══ PIE ═══ */
.pie { margin-top: var(--s5); padding: var(--s4) var(--m) var(--s3); display: grid; gap: var(--s4) }
.pie__arriba { display: grid; gap: var(--s2) }
.pie__nombre { font: 800 1.6rem/1 var(--ff-cartel); text-transform: uppercase; letter-spacing: .04em; color: var(--filamento) }
.pie__nav { display: flex; flex-wrap: wrap; gap: 0 1.25rem }
.pie__nav a, .pie__canales a { display: inline-flex; align-items: baseline; gap: .4rem; min-height: 2.75rem; color: var(--cal); text-decoration: none; font-size: var(--fs-chico); transition: color var(--dur-micro) }
.pie__nav a:hover, .pie__canales a:hover { color: var(--filamento); text-decoration: underline }
.pie__n { font: 500 .8rem/1 var(--ff-cartel); letter-spacing: .06em; color: var(--humo) }
.pie__abajo { display: grid; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--linea) }
.pie__canales { display: flex; flex-wrap: wrap; gap: 0 1.25rem }
.pie__propuesta { color: var(--humo); font-size: var(--fs-meta); max-width: 52rem }
.pie__idioma { justify-self: start; display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--cal); font-size: var(--fs-chico) }

/* ═══ ESCRITORIO ═══ */
@media (min-width: 56.25rem) {
  :root { --barra: 4rem }
  .barra__folio { display: block }
  .indice__marco { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--s5); padding: var(--s2) var(--m) var(--s4) }
  .indice__cab { grid-column: 1 / -1 }
  .indice__planos { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-column: 1 / -1 }
  .indice__cam { aspect-ratio: 3 / 4 }
  .indice__resto { grid-column: 1 }
  .indice__datos { grid-column: 2; grid-row: 3 }

  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: minmax(0, 1fr) auto }
  .hero__texto { grid-column: 1; grid-row: 2; padding-bottom: var(--s4) }
  .hero__meta { grid-column: 2; grid-row: 2; padding: 0 var(--m) var(--s4) 0; align-self: end; justify-self: end; max-width: 24rem }
  .hero__folio { display: block }
  .hero__velo { background: linear-gradient(180deg, rgba(8, 9, 12, .3) 0, transparent 20%, transparent 50%, rgba(8, 9, 12, .7) 80%, rgba(8, 9, 12, .94) 100%) }

  .tesis { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-top: var(--s6) }
  .tesis__t { grid-column: 1 / span 8 }
  .tesis__k { grid-column: 9 / span 4; grid-row: 1; margin-top: .6rem }
  .tesis__d { grid-column: 9 / span 4; grid-row: 1; margin-top: 2.4rem }

  .plano__capa { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end; padding-bottom: var(--s5) }
  .plano__capa::before { grid-column: 1 / -1 }
  .plano__nom { grid-column: 1 / span 7 }
  .plano__d { grid-column: 8 / span 5; margin-bottom: .4rem }
  .plano__pie { grid-column: 1 / span 7; margin-top: 0 }
  .plano__n { top: calc(var(--barra) + .5rem) }
  .plano--piezas .plano__cam { inset: calc(var(--barra) + 2rem) var(--m) 22svh auto; width: 58vw; max-width: none }

  .tira__f { flex-basis: 22vw }
  .servicio { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s4) var(--s5); align-items: start }
  .servicio__texto { padding-right: var(--m); padding-left: 0; padding-top: var(--s4) }
  .servicio--pag { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) }
  .servicio--pag .servicio__texto { padding-left: var(--m); padding-right: 0; grid-column: 1 }
  .servicio--pag .servicio__foto { grid-column: 2 }
  .fecha__forma { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end }
  .fecha__k { grid-column: 1 / span 7; grid-row: 1 / span 3 }
  .fecha__campo { grid-column: 8 / span 5; grid-row: 1; max-width: none }
  .fecha__dias { grid-column: 8 / span 5; grid-row: 2 }
  .fecha__forma .accion--grande { grid-column: 8 / span 5; grid-row: 3; justify-self: start }

  .cap__hero { min-height: 100svh }
  .cap__capa { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-bottom: var(--s5); align-items: end }
  .cap__n { grid-column: 1 / -1 }
  .cap__h1 { grid-column: 1 / span 8 }
  .cap__linea { grid-column: 9 / span 4; margin-bottom: .6rem }
  .cap__folio { display: block }
  .cap__intro { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-top: var(--s4) }
  .cap__texto { grid-column: 1 / span 7 }
  .cap__datos { grid-column: 9 / span 4 }
  .serie { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--s5); padding: var(--s5) var(--m) 0; align-items: start }
  .serie__pie { padding: 0 }
  .serie__f--1 { grid-column: 1 / span 8 }
  .serie__f--2 { grid-column: 6 / span 7; margin-top: calc(var(--s4) * -1) }
  .serie__f--3 { grid-column: 2 / span 9 }
  /* cada capítulo compone su serie según lo que muestra */
  .serie--entradas .serie__f--1 { grid-column: 1 / span 12 }
  .serie--entradas .serie__f--1 .cam { aspect-ratio: 21 / 9 }
  .serie--entradas .serie__f--2 { grid-column: 1 / span 6; margin-top: 0 }
  .serie--entradas .serie__f--3 { grid-column: 7 / span 6 }
  .serie--techos .serie__f { grid-column: auto / span 6; margin-top: 0 }
  .serie--techos .serie__f:nth-child(odd) .cam { aspect-ratio: 4 / 5 }
  .serie--techos .serie__f:nth-child(even) { margin-top: var(--s4) }
  .serie--arquitectura .serie__f { grid-column: 1 / span 12; margin-top: 0; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--g); align-items: end }
  .serie--arquitectura .serie__f .cam { aspect-ratio: 16 / 9 }
  .serie--piezas .serie__f--1 { grid-column: 3 / span 6 }
  .serie--piezas .serie__f--1 .cam { aspect-ratio: 4 / 5 }
  .serie--piezas .serie__f--2 { grid-column: 9 / span 4; margin-top: var(--s5) }
  .serie--piezas .serie__f--3 { grid-column: 1 / span 5; margin-top: 0 }
  .serie--telas .serie__f--3 { grid-column: 3 / span 10 }
  .sig { min-height: 72svh }
  .sig__capa { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s2); align-items: baseline }
  .sig__k { grid-column: 1 / -1 }
  .cap__otros { padding-top: var(--s3) }

  .pag { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-top: calc(var(--barra) + var(--s5)) }
  .pag__h1 { grid-column: 1 / span 8 }
  .pag__d { grid-column: 9 / span 4; align-self: end; padding-bottom: .4rem }

  .archivo__indices { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); align-items: end }
  .indices { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; gap: 0 1.4rem; grid-column: 1 }
  .indices--vista { grid-column: 2; grid-row: 1 }
  .archivo__conteo { grid-column: 2; grid-row: 2; text-align: right }
  .hoja[data-modo="hoja"] { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s5) }
  .hoja[data-modo="indice"] .ficha { grid-template-columns: 8rem auto minmax(0, 1fr) auto; column-gap: var(--s3) }
  .bandeja { grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-inline: 0; padding-inline: 0 }
  .detalle__marco { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem) }
  .detalle__foto { padding: var(--s3) }
  .detalle__meta { max-height: none; padding: calc(var(--barra) + var(--s2)) var(--s3) var(--s3); align-content: start }
  .detalle__ref { font-size: 3.2rem }
  .detalle__nav { margin-top: auto }

  .secuencia { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); padding-left: calc(var(--m) + 2rem) }
  .paso { grid-column: 1 / span 12; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); max-width: none; align-items: start }
  .paso::before { left: calc(-2rem - 3px) }
  .paso__n { grid-column: 1 / span 2 }
  .paso__h { grid-column: 1 / span 5; grid-row: 2 }
  .paso__d { grid-column: 6 / span 5; grid-row: 2; padding-top: .5rem }
  .paso__foto { grid-column: 7 / span 6; grid-row: 3; margin-top: var(--s3); max-width: none }
  .cierre { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: end }
  .cierre__t { grid-column: 1 / span 7 }
  .cierre .accion--grande { grid-column: 8 / span 5; justify-self: start }

  .cotiza { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g) }
  .forma { grid-column: 1 / span 7; grid-template-columns: 1fr 1fr; column-gap: var(--s4) }
  .campo--ancho { grid-column: 1 / -1 }
  .marcas { grid-template-columns: 1fr 1fr; column-gap: var(--s4) }
  .mensaje { grid-column: 9 / span 4; position: sticky; top: calc(var(--barra) + var(--s2)) }

  .mapa { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g) }
  .mapa__esquema { grid-column: 1 / span 6; padding-right: 0 }
  .mapa__texto { grid-column: 8 / span 5; padding-left: 0 }
  .preguntas { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g) }
  .preguntas__t { grid-column: 1 / span 4 }
  .faq { grid-column: 5 / span 8 }

  .pie { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s5) }
  .pie__arriba { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s5); align-items: baseline }
  .pie__abajo { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); align-items: center }
  .pie__canales { grid-column: 1 / -1 }
}
@media (min-width: 80rem) {
  .hoja[data-modo="hoja"] { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .plano__nom { grid-column: 1 / span 6 }
  .plano__d { grid-column: 8 / span 4 }
}

/* ── transiciones entre páginas: un oscurecimiento corto; la barra no se mueve ── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto }
  ::view-transition-old(root) { animation: vt-sale 220ms var(--ease-entra) both }
  ::view-transition-new(root) { animation: vt-entra 380ms var(--ease-sale) 120ms both }
  ::view-transition-group(barra) { animation: none }
  @keyframes vt-sale { to { opacity: 0 } }
  @keyframes vt-entra { from { opacity: 0 } }
  .indice[open] .indice__marco { animation: indice-abre 420ms var(--ease-estado) both }
  .indice[open]::backdrop { animation: aparece-fondo 300ms var(--ease-estado) both }
  @keyframes indice-abre { from { clip-path: inset(0 0 100% 0) } to { clip-path: inset(0) } }
  @keyframes aparece-fondo { from { opacity: 0 } }
}
/* ── movimiento reducido: composición completa, fotos quietas, sin máscaras ── */
@media (prefers-reduced-motion: reduce) {
  .js .cam .cam__img { transform: none !important; clip-path: none !important; -webkit-mask-image: none !important; mask-image: none !important; filter: none !important; opacity: 1 !important; transition: none !important }
  .js .mask .mask__t { transform: none !important; transition: none !important }
  .js .hero .hero__meta { opacity: 1 !important; transform: none !important; transition: none !important }
  .js .plano.cubierto .plano__cam { filter: none }
  .ficha__desc { max-height: none; opacity: 1 }
  .secuencia__linea span { height: 100% }
  .mapa__ruta { stroke-dashoffset: 0 }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important }
}