/* Ámbar Iluminación · propuesta de diseño de Verisium (identidad propuesta) — la noche como lienzo y la guirnalda
   de focos como motivo. Un solo corte: 56.25rem. Fuentes OFL en /fuentes con su licencia. */
@font-face { font-family: 'Instrument Serif'; src: url(fuentes/instrument-serif-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: 'Instrument Serif'; src: url(fuentes/instrument-serif-400i.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap }
@font-face { font-family: 'Manrope'; src: url(fuentes/manrope-400.woff2) format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: 'Manrope'; src: url(fuentes/manrope-500.woff2) format('woff2'); font-weight: 500; font-display: swap }
@font-face { font-family: 'Manrope'; src: url(fuentes/manrope-600.woff2) format('woff2'); font-weight: 600; font-display: swap }
@font-face { font-family: 'DM Mono'; src: url(fuentes/dm-mono-400.woff2) format('woff2'); font-weight: 400; font-display: swap }
@font-face { font-family: 'DM Mono'; src: url(fuentes/dm-mono-500.woff2) format('woff2'); font-weight: 500; font-display: swap }

:root {
  --noche: #0d0b09; --carbon: #17130f; --ambar: #f5a524; --brasa: #e0761c; --filamento: #ffe7b8; --papel: #f3ece2; --humo: #b3a898;
  --cable: #463b30; --apagado: #2f2720; --linea: #2a231c;
  --display: 'Instrument Serif', 'Times New Roman', serif; --texto: 'Manrope', system-ui, sans-serif; --mono: 'DM Mono', ui-monospace, monospace;
  --t-0: .8125rem; --t-1: .9375rem; --t-2: 1.0625rem; --t-3: 1.375rem; --t-4: clamp(2.25rem, 1.3rem + 3.6vw, 4rem); --t-5: clamp(3rem, 1.4rem + 6.6vw, 6.5rem);
  --e-1: .5rem; --e-2: 1rem; --e-3: 1.5rem; --e-4: 2.5rem; --e-5: 4rem; --e-6: clamp(4.5rem, 3rem + 6vw, 7rem);
  --lado: clamp(1rem, 5vw, 5rem);
  --curva: cubic-bezier(.2, .7, .2, 1); --d-1: 180ms; --d-2: 320ms; --d-3: 600ms; --d-encendido: 900ms;
  --halo: 0 0 .5rem rgba(245, 165, 36, .55), 0 0 1.25rem rgba(245, 165, 36, .25);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box }
html { scroll-padding-top: 5rem; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--noche); color: var(--papel); font: 400 var(--t-2)/1.6 var(--texto); overflow-x: clip }
img { display: block; max-width: 100%; height: auto }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0 }
ol, ul { padding: 0; list-style: none }
a { color: inherit }
button, input, select { font: inherit; color: inherit }
:focus-visible { outline: 3px solid var(--filamento); outline-offset: 3px; border-radius: 2px }
.mono { font-family: var(--mono); font-size: var(--t-0); letter-spacing: .06em }
.saltar { position: absolute; left: var(--e-2); top: -4rem; z-index: 60; background: var(--ambar); color: var(--noche); padding: .75rem 1rem; border-radius: 999px; font-weight: 600 }
.saltar:focus { top: var(--e-2) }

/* ── la guirnalda: el motivo ── */
.guirnalda { display: block; width: 100%; pointer-events: none; overflow: visible; filter: drop-shadow(0 0 .3rem rgba(245, 165, 36, .5)) }
.guirnalda__cable { fill: none; stroke: var(--cable); stroke-width: 1.6; vector-effect: non-scaling-stroke }
.guirnalda__foco line { stroke: var(--cable); stroke-width: 1.4; vector-effect: non-scaling-stroke }
.guirnalda__foco circle { fill: var(--ambar); stroke: var(--filamento); stroke-width: 1; vector-effect: non-scaling-stroke }
.guirnalda--hero { height: clamp(4.5rem, 3rem + 4vw, 6rem) }
.guirnalda--divisor { height: 3.5rem; margin-block: var(--e-4) calc(var(--e-2) * -1) }
.guirnalda--ficha { height: 3rem; margin: calc(var(--e-3) * -1) 0 var(--e-2) }
.guirnalda--pie { height: clamp(3.5rem, 2.5rem + 3vw, 4.75rem) }
.guirnalda--cabecera { position: absolute; left: 0; right: 0; top: 100%; height: 2.25rem; opacity: 0; transition: opacity var(--d-2) var(--curva) }
.guirnalda--pasos { position: absolute; inset: 0 0 auto; height: 2.5rem }
.guirnalda--boton { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--noche); box-shadow: inset 0 0 0 2px var(--noche); flex: none; transition: background var(--d-1) var(--curva), box-shadow var(--d-1) var(--curva) }

/* encendido: los focos pasan de apagados a ámbar en escalera (en la carga para el hero; al entrar en pantalla para los demás) */
@keyframes foco { 0%, 35% { fill: var(--apagado); stroke: var(--apagado) } 60% { fill: var(--filamento) } 100% { fill: var(--ambar); stroke: var(--filamento) } }
@keyframes encender { from { filter: brightness(.12) saturate(.3) } to { filter: brightness(1) saturate(1) } }
@keyframes linea { from { opacity: 0; transform: translateY(.35em) } to { opacity: 1; transform: none } }
@keyframes visor { from { opacity: 0; transform: scale(.97) } to { opacity: 1; transform: none } }
.js .guirnalda:not(.guirnalda--hero):not([data-encendida]) .guirnalda__foco circle { fill: var(--apagado); stroke: var(--apagado) }
.guirnalda--hero .guirnalda__foco circle { animation: foco 420ms var(--curva) both; animation-delay: calc(var(--i) * 25ms + 100ms) }
.guirnalda[data-encendida] .guirnalda__foco circle { animation: foco var(--d-3) var(--curva) both; animation-delay: calc(var(--i) * 45ms) }

/* ── botones ── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 2.75rem; padding: .7rem 1.35rem; border-radius: 999px; font: 600 var(--t-1)/1.2 var(--texto); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform var(--d-1) var(--curva), box-shadow var(--d-1) var(--curva), background-color var(--d-1) var(--curva), color var(--d-1) var(--curva), border-color var(--d-1) var(--curva) }
.boton--ambar { background: var(--ambar); color: var(--noche) }
.boton--ambar:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.6rem -.6rem rgba(245, 165, 36, .65) }
.boton--ambar:hover .guirnalda--boton, .boton--ambar:focus-visible .guirnalda--boton { background: var(--filamento); box-shadow: 0 0 0 2px var(--noche), 0 0 .6rem .15rem var(--filamento) }
.boton--ambar:focus-visible { box-shadow: 0 0 0 3px var(--noche), 0 0 0 6px var(--filamento) }
.boton--linea { background: transparent; color: var(--papel); border-color: #5a4d40 }
.boton--linea:hover { border-color: var(--ambar); color: var(--filamento) }
.boton--grande { min-height: 3.25rem; padding: .9rem 1.6rem; font-size: var(--t-2) }

/* ── cabecera ── */
.cabecera { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: var(--e-2); height: 3.75rem; padding-inline: var(--lado); background: rgba(13, 11, 9, .94); border-bottom: 1px solid transparent; transition: border-color var(--d-2) var(--curva) }
.cabecera[data-bajo] { border-color: var(--linea) }
.cabecera[data-bajo] .guirnalda--cabecera { opacity: 1 }
.marca { display: inline-flex; align-items: baseline; gap: .55rem; text-decoration: none; margin-right: auto; min-height: 2.75rem; align-items: center }
.marca__foco { width: .8rem; height: .8rem; border-radius: 50%; background: var(--ambar); box-shadow: var(--halo); flex: none }
.marca__nombre { font: 400 1.75rem/1 var(--display) }
.marca__sub { display: none; font: 400 var(--t-0)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--humo) }
.nav { position: static }
.nav__boton { min-height: 2.75rem; min-width: 2.75rem; padding: 0 1rem; border-radius: 999px; background: transparent; border: 1px solid #5a4d40; font: 500 var(--t-0)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer }
.nav__boton[aria-expanded="true"] { border-color: var(--ambar); color: var(--filamento) }
.nav__lista { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: var(--e-2) var(--lado) var(--e-3); background: var(--noche); border-bottom: 1px solid var(--linea) }
.nav__boton[aria-expanded="true"] + .nav__lista { display: grid; gap: .25rem }
.nav__lista a { display: flex; align-items: center; gap: .75rem; min-height: 3rem; font: 400 var(--t-3)/1 var(--display); text-decoration: none }
.nav__lista a::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: var(--apagado); transition: background var(--d-1) var(--curva), box-shadow var(--d-1) var(--curva) }
.nav__lista a[aria-current="true"]::before, .nav__lista a:hover::before { background: var(--ambar); box-shadow: var(--halo) }
.idioma { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .75rem; border-radius: 999px; border: 1px solid #5a4d40; font: 500 var(--t-0)/1 var(--mono); letter-spacing: .12em; text-decoration: none }
.idioma:hover { border-color: var(--ambar); color: var(--filamento) }
.cabecera__cta { display: none }

/* ── hero ── */
.hero { position: relative; padding: 3.75rem var(--lado) var(--e-5); display: grid; gap: var(--e-3) }
.hero__texto > * { order: 4 }
.hero__texto > .rotulo { order: 1 }
.hero__texto > .hero__titulo { order: 2 }
.hero .hero__ventana { order: 3 }
.hero .guirnalda--hero { margin-inline: calc(var(--lado) * -1); width: calc(100% + var(--lado) * 2) }
.hero__texto { display: contents }
.rotulo { font: 500 var(--t-0)/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--humo); display: flex; align-items: center; gap: .6rem }
.rotulo::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ambar); box-shadow: var(--halo); flex: none }
.hero__titulo { font: 400 var(--t-5)/.95 var(--display); letter-spacing: -.015em }
.hero__titulo .linea { display: block; animation: linea 700ms var(--curva) both; animation-delay: calc(var(--i) * 140ms + 300ms) }
.hero__titulo em { font-style: italic; color: var(--ambar); text-shadow: 0 0 .45em rgba(245, 165, 36, .35) }
.hero__lead { max-width: 34rem; color: var(--humo); font-size: var(--t-2) }
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2) }
.regleta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-top: var(--e-2) }
.regleta div { background: var(--noche); padding: .8rem 1rem }
.regleta dt { font: 400 var(--t-0)/1.3 var(--mono); letter-spacing: .08em; color: var(--humo); text-transform: uppercase }
.regleta dd { font: 400 var(--t-3)/1.2 var(--display); color: var(--filamento) }
.hero__ventana { position: relative; display: grid; gap: .6rem }
.hero__ventana img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 55% 50%; border-radius: 50% 50% 2px 2px / 32% 32% 2px 2px; animation: encender var(--d-encendido) var(--curva) both; animation-delay: 150ms }
.hero__ventana figcaption { color: var(--humo) }

/* ── secciones ── */
section { padding: var(--e-6) var(--lado) }
.cabeza { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); max-width: 46rem }
.cabeza h2 { font: 400 var(--t-4)/1.02 var(--display); letter-spacing: -.01em }
.intro { color: var(--humo) }

/* tesis: cuatro planos */
.tesis { background: var(--carbon) }
.planos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4) var(--e-2) }
.plano { display: grid; gap: var(--e-2); align-content: start }
.plano img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; filter: brightness(.85); transition: filter var(--d-2) var(--curva) }
.plano:hover img { filter: brightness(1.05) }
.plano__texto { display: grid; gap: .35rem }
.plano__texto .mono { color: var(--brasa) }
.plano h3 { font: 400 var(--t-3)/1.1 var(--display) }
.plano p { color: var(--humo); font-size: var(--t-1) }

/* montajes: filtros + mosaico + visor */
.filtros { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; margin-inline: calc(var(--lado) * -1); padding-inline: var(--lado); scrollbar-width: none }
.filtro { flex: none; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1px solid #5a4d40; background: transparent; cursor: pointer; font: 500 var(--t-1)/1 var(--texto); display: inline-flex; align-items: center; gap: .5rem; transition: background-color var(--d-1) var(--curva), color var(--d-1) var(--curva), border-color var(--d-1) var(--curva) }
.filtro .mono { color: var(--humo) }
.filtro:hover { border-color: var(--ambar) }
.filtro[aria-pressed="true"] { background: var(--ambar); color: var(--noche); border-color: var(--ambar) }
.filtro[aria-pressed="true"] .mono { color: var(--noche) }
.conteo { margin: var(--e-3) 0 var(--e-2); color: var(--humo) }
.conteo span { color: var(--ambar) }
.mosaico { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 10rem; grid-auto-flow: dense; gap: .5rem }
.pieza--ancha, .pieza--panorama { grid-column: span 2 }
.pieza--panorama { grid-row: span 1 }
.pieza__tipo { display: none }
.pieza--alta { grid-row: span 2 }
.pieza[hidden] { display: none }
.pieza__boton { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--carbon); cursor: zoom-in; overflow: hidden; border-radius: 2px }
.pieza__boton img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.78) saturate(.9); transition: filter var(--d-2) var(--curva), transform var(--d-3) var(--curva) }
.pieza__boton:hover img, .pieza__boton:focus-visible img { filter: brightness(1.05) saturate(1); transform: scale(1.03) }
.pieza__pie { position: absolute; left: .5rem; bottom: .5rem; padding: .3rem .55rem; background: rgba(13, 11, 9, .82); color: var(--papel); border-radius: 2px; text-align: left }
.visor { width: min(72rem, 100vw - 2rem); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--linea); background: var(--carbon); color: var(--papel); border-radius: 2px }
.visor[open] { animation: visor var(--d-2) var(--curva) both }
.visor::backdrop { background: rgba(5, 4, 3, .9) }
.visor figure { display: grid }
.visor img { width: 100%; max-height: 70dvh; object-fit: contain; background: #000 }
.visor figcaption { display: grid; gap: .25rem; padding: var(--e-2) var(--e-3) 0 }
.visor figcaption .mono { color: var(--brasa) }
.visor__acciones { display: flex; flex-wrap: wrap; gap: .5rem; padding: var(--e-2) var(--e-3) var(--e-3); align-items: center }
.visor__cerrar { margin-left: auto; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid #5a4d40; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer }
.visor__cerrar:hover { border-color: var(--ambar) }

/* proceso: cinco focos colgados de una cuerda */
.proceso__cuerda { position: relative; padding-top: .25rem }
.pasos { position: relative; display: grid; grid-template-columns: repeat(5, 1fr) }
.pasos li { display: flex; justify-content: center }
.paso { position: relative; display: grid; justify-items: center; gap: .4rem; width: 100%; min-height: 2.75rem; padding: calc(var(--y) * 1px + 1.1rem) .25rem .5rem; background: transparent; border: 0; cursor: pointer; color: var(--humo) }
.paso::before { content: ''; position: absolute; top: calc(var(--y) * 1px); left: 50%; width: 1px; height: 1.1rem; background: var(--cable) }
.paso__foco { width: 2rem; height: 2rem; border-radius: 50%; background: var(--apagado); border: 1px solid #4a3e33; transition: background var(--d-2) var(--curva), box-shadow var(--d-2) var(--curva) }
.paso__n { font: 400 clamp(1.75rem, 1.2rem + 2vw, 2.75rem)/1 var(--display); color: var(--papel) }
.paso__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.paso:hover .paso__foco { background: #6b4f22 }
.paso[aria-pressed="true"] .paso__foco { background: var(--ambar); border-color: var(--filamento); box-shadow: var(--halo) }
.paso[aria-pressed="true"] { color: var(--filamento) }
.proceso__detalle { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); align-items: center; margin-top: var(--e-4); padding: var(--e-3) var(--e-4) var(--e-3) var(--e-3); background: var(--carbon); border-left: 2px solid var(--ambar); min-height: 10rem }
.proceso__num { font: 400 clamp(3rem, 2rem + 4vw, 5rem)/.9 var(--display); color: var(--brasa) }
.proceso__detalle h3 { font: 400 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1.15 var(--display); margin-bottom: .4rem }
.proceso__detalle p { color: var(--humo) }
.pasos-texto { display: grid; gap: .75rem; margin-top: var(--e-4); color: var(--humo) }
.pasos-texto strong { color: var(--papel); font-weight: 600 }
.js .pasos-texto { display: none }

/* cotiza: formulario + ficha de luz */
.cotiza { background: var(--carbon) }
.cotiza__cuerpo { display: grid; gap: var(--e-4) }
.forma { display: grid; gap: var(--e-3) }
.campo { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; min-width: 0 }
.campo > span, .campo legend { font: 500 var(--t-0)/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--humo); padding: 0; margin-bottom: .5rem }
.campo input:not([type="radio"]):not([type="checkbox"]), .campo select { width: 100%; min-height: 3rem; padding: .7rem .9rem; background: var(--noche); border: 1px solid #4a3e33; border-radius: 2px; transition: border-color var(--d-1) var(--curva) }
.campo input:focus, .campo select:focus { border-color: var(--ambar); outline: none; box-shadow: 0 0 0 2px var(--ambar) }
.campo--chips { display: flex; flex-wrap: wrap; gap: .5rem }
.campo--chips legend { width: 100% }
.chip { position: relative; display: inline-flex; cursor: pointer }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer }
.chip span { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1px solid #5a4d40; font-size: var(--t-1); transition: background-color var(--d-1) var(--curva), color var(--d-1) var(--curva), border-color var(--d-1) var(--curva) }
.chip span::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--apagado); transition: background var(--d-1) var(--curva), box-shadow var(--d-1) var(--curva) }
.chip:hover span { border-color: var(--ambar) }
.chip input:checked + span { border-color: var(--ambar); color: var(--filamento) }
.chip input:checked + span::before { background: var(--ambar); box-shadow: var(--halo) }
.chip input:focus-visible + span { outline: 3px solid var(--filamento); outline-offset: 2px }
.referencia output { color: var(--filamento); font-family: var(--mono); font-size: var(--t-1) }
.ficha { position: relative; align-self: start; padding: var(--e-3); background: var(--noche); border: 1px solid var(--linea); border-radius: 2px; display: grid; gap: var(--e-2); overflow: hidden }
.ficha__mensaje { margin: 0; padding: var(--e-2); background: var(--carbon); border-left: 2px solid var(--ambar); font: 400 var(--t-1)/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; color: var(--papel) }
.ficha__aviso { color: var(--noche); background: var(--brasa); padding: .6rem .8rem; font-weight: 600; font-size: var(--t-1) }
.ficha__nota { color: var(--humo); font-size: var(--t-1) }
.ficha__nota--chica { font-size: var(--t-0) }
.ficha__acciones { display: grid; gap: .5rem }

/* cobertura: cinco estados como focos */
.cobertura__cuerpo { display: grid; gap: var(--e-3) }
.estados { display: grid; gap: .25rem; border-top: 1px solid var(--linea) }
.estado { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 3.5rem; padding: .5rem 0; background: transparent; border: 0; border-bottom: 1px solid var(--linea); font: 400 var(--t-3)/1.1 var(--display); text-align: left; cursor: pointer; color: var(--humo); transition: color var(--d-1) var(--curva) }
.estado__foco { width: .9rem; height: .9rem; border-radius: 50%; background: var(--apagado); flex: none; transition: background var(--d-2) var(--curva), box-shadow var(--d-2) var(--curva) }
.estado:hover { color: var(--papel) }
.estado[aria-pressed="true"] { color: var(--filamento) }
.estado[aria-pressed="true"] .estado__foco { background: var(--ambar); box-shadow: var(--halo) }
.estado__detalle { display: grid; gap: var(--e-2); align-content: start; padding: var(--e-3); background: var(--carbon); border-radius: 2px }
.estado__detalle [data-estado-nombre] { font: 400 var(--t-4)/1 var(--display); letter-spacing: -.01em; color: var(--ambar) }
.showroom { color: var(--humo); font-size: var(--t-1); padding-top: var(--e-2); border-top: 1px solid var(--linea) }
.showroom .mono { color: var(--brasa); margin-right: .5rem }

/* confianza: datos comprobables */
.confianza { background: var(--carbon) }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3) var(--e-2) }
.datos div { display: grid; gap: .3rem; align-content: start; padding-top: var(--e-2); border-top: 1px solid #3a3027 }
.datos dt { font: 400 clamp(2.5rem, 1.8rem + 3vw, 4rem)/1 var(--display); color: var(--brasa) }
.datos dd { color: var(--humo); font-size: var(--t-1) }
.incluye { margin-top: var(--e-5); display: grid; gap: var(--e-2) }
.incluye h3 { font: 400 var(--t-3)/1.2 var(--display) }
.incluye ul { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem var(--e-2) }
.incluye li { display: flex; gap: .6rem; align-items: baseline; font-size: var(--t-1) }
.incluye li::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: var(--ambar); flex: none; transform: translateY(-.1em) }

/* preguntas */
.faq { border-top: 1px solid var(--linea); max-width: 56rem }
.faq details { border-bottom: 1px solid var(--linea) }
.faq summary { display: grid; grid-template-columns: 2.5rem 1fr 1.5rem; align-items: baseline; gap: .5rem; min-height: 3.5rem; padding: 1rem 0; cursor: pointer; list-style: none; font: 400 var(--t-3)/1.25 var(--display) }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: '+'; font: 400 1.5rem/1 var(--texto); color: var(--ambar); transition: transform var(--d-2) var(--curva) }
.faq details[open] summary::after { transform: rotate(45deg) }
.faq summary .mono { color: var(--brasa) }
.faq summary:hover { color: var(--filamento) }
.faq details p { padding: 0 0 1.25rem 3rem; color: var(--humo); max-width: 44rem }

/* pie */
.pie { padding: var(--e-5) var(--lado) 7rem; display: grid; gap: var(--e-3); border-top: 1px solid var(--linea) }
.pie .guirnalda--pie { margin-inline: calc(var(--lado) * -1); width: calc(100% + var(--lado) * 2); margin-top: calc(var(--e-5) * -1) }
.pie__h { font: 400 var(--t-3)/1.2 var(--display); color: var(--humo) }
.pie__marca { font: 400 clamp(5rem, 2rem + 14vw, 13rem)/1 var(--display); letter-spacing: -.03em; padding-top: .12em }
.pie__marca em { color: var(--ambar); font-style: normal; text-shadow: var(--halo) }
.pie__tag { color: var(--humo) }
.pie__cta { justify-self: start }
.pie__cols { display: grid; gap: var(--e-3); margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--linea) }
.pie__cols > * { display: grid; gap: .1rem; align-content: start }
.pie__cols .mono { color: var(--brasa); margin-bottom: .4rem }
.pie__cols a { display: flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: var(--papel) }
.pie__cols a:hover { color: var(--ambar) }
.pie__cols p:not(.mono) { color: var(--humo) }
.pie__propuesta { color: var(--humo); font-size: var(--t-0); max-width: 48rem }
.idioma--pie { justify-self: start }

/* barra inferior en móvil */
.barra-movil { position: fixed; left: var(--e-2); right: var(--e-2); bottom: .75rem; z-index: 35; min-height: 3.25rem; box-shadow: 0 .75rem 2rem -.5rem rgba(0, 0, 0, .7); transition: transform var(--d-2) var(--curva), opacity var(--d-2) var(--curva) }
.barra-movil[data-oculta] { transform: translateY(160%); opacity: 0; pointer-events: none }

/* ── escritorio ── */
@media (min-width: 56.25rem) {
  .cabecera { height: 4.25rem }
  .nav__boton { display: none }
  .nav__lista { display: flex; position: static; padding: 0; background: none; border: 0; gap: var(--e-2) }
  .nav__lista a { min-height: 2.75rem; font: 500 var(--t-1)/1 var(--texto); gap: .5rem; white-space: nowrap }
  .nav__lista a::before { width: .45rem; height: .45rem }
  .cabecera__cta { display: inline-flex; min-height: 2.75rem; padding: .6rem 1.1rem; white-space: nowrap; flex: none }
  .cabecera { gap: var(--e-2) }
  .hero { grid-template-columns: repeat(12, 1fr); column-gap: var(--e-3); padding-top: 4.25rem; min-height: min(100dvh, 62rem); align-items: start }
  .hero .guirnalda--hero { grid-column: 1 / -1 }
  .hero__texto { display: grid; gap: var(--e-3); align-content: start; grid-column: 1 / 8; padding-top: var(--e-2) }
  .hero__titulo { font-size: clamp(3rem, 1.2rem + 4.6vw, 5.75rem) }
  .hero__titulo .linea { white-space: nowrap }
  .hero .hero__ventana { grid-column: 8 / 13; margin-top: calc(var(--e-4) * -1) }
  .hero__ventana img { aspect-ratio: auto; height: min(70dvh, 42rem) }
  .regleta { grid-template-columns: repeat(4, 1fr) }
  .planos { grid-template-columns: repeat(4, 1fr); gap: var(--e-3) }
  .plano:nth-child(even) { margin-top: var(--e-5) }
  .mosaico { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 13rem; grid-auto-flow: row; gap: .75rem }
  .pieza { grid-column: span 4 }
  .pieza--ancha { grid-column: span 8 }
  .pieza--panorama { grid-column: 1 / -1; grid-row: span 2 }
  .pieza__tipo { display: inline }
  .filtros { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible }
  .paso { padding-top: calc(var(--y) * 1px + 1.4rem) }
  .paso::before { height: 1.4rem }
  .paso__foco { width: 2.75rem; height: 2.75rem }
  .paso__h { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; font: 500 var(--t-1)/1.3 var(--texto); text-align: center }
  .proceso__detalle { max-width: 52rem; margin-inline: auto }
  .cotiza__cuerpo { grid-template-columns: 7fr 5fr; gap: var(--e-5) }
  .forma { grid-template-columns: 1fr 1fr; column-gap: var(--e-3) }
  .campo--ancho, .campo--chips { grid-column: 1 / -1 }
  .ficha { position: sticky; top: 6rem }
  .ficha__acciones { grid-template-columns: 1fr 1fr }
  .ficha__acciones [data-copiar] { grid-column: 1 / -1 }
  .cobertura__cuerpo { grid-template-columns: minmax(16rem, 5fr) 7fr; gap: var(--e-5) }
  .datos { grid-template-columns: repeat(5, 1fr) }
  .incluye ul { grid-template-columns: repeat(3, 1fr) }
  .pie__cols { grid-template-columns: 1fr 1fr 1fr }
  .barra-movil { display: none }
}

/* escritorio ancho: hay lugar para el apellido de la marca y más aire en el menú */
@media (min-width: 70rem) {
  .marca__sub { display: inline }
  .nav__lista { gap: var(--e-3) }
}

/* ── movimiento reducido: todo aparece en su estado final ── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}