/* Construcións Brañavella — web pública v2 */
:root {
  /* Maqueta viva: una columna de lectura a la izquierda y la maqueta 3D como protagonista a la derecha */
  --fondo: #FBFAF8;
  --superficie: #FFFFFF;
  --hormigon: #E9E6E1;
  --hormigon-2: #DAD5CD;
  --hormigon-3: #C4BEB4;
  --grafito: #1C1F23;
  --grafito-2: #2A2E33;
  --grafito-3: #4A4F56;
  --banda: #1C1F23;
  --banda-texto: #FFFFFF;
  --banda-texto-2: #C4BEB4;
  --texto: #1C1F23;
  --texto-2: #5A5F66;
  --ocre: #D98E2B;
  --ocre-txt: #A9681A;
  --rojo: #C2412D;
  --verde: #2F7D5B;
  --sombra: 0 18px 40px -22px rgba(28, 31, 35, .35);

  --f-titulo: "Space Grotesk", system-ui, sans-serif;
  --f-texto: "Inter", system-ui, sans-serif;
  --ancho: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #121416; --superficie: #1B1E21; --hormigon: #181B1E; --hormigon-2: #2A2E33; --hormigon-3: #3E434A;
    --grafito: #ECEAE6; --grafito-2: #D6D2CB; --grafito-3: #A2A7AD; --banda: #0B0D0F; --banda-texto: #F2F0EC; --banda-texto-2: #9EA3A9;
    --texto: #ECEAE6; --texto-2: #A2A7AD; --ocre: #E39A3B; --ocre-txt: #E9AB57; --rojo: #E5654E; --verde: #4FB386;
    --sombra: 0 18px 40px -22px rgba(0, 0, 0, .7); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #121416; --superficie: #1B1E21; --hormigon: #181B1E; --hormigon-2: #2A2E33; --hormigon-3: #3E434A;
  --grafito: #ECEAE6; --grafito-2: #D6D2CB; --grafito-3: #A2A7AD; --banda: #0B0D0F; --banda-texto: #F2F0EC; --banda-texto-2: #9EA3A9;
  --texto: #ECEAE6; --texto-2: #A2A7AD; --ocre: #E39A3B; --ocre-txt: #E9AB57; --rojo: #E5654E; --verde: #4FB386;
  --sombra: 0 18px 40px -22px rgba(0, 0, 0, .7); color-scheme: dark;
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 1.0625rem/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--ocre); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 16px; top: -60px; background: var(--grafito); color: var(--fondo); padding: 10px 14px; z-index: 100; }
.saltar:focus { top: 12px; }
.opcional { color: var(--texto-2); font-weight: 400; }
.img-oscuro { display: none; }
:root[data-theme="dark"] .img-claro { display: none; }
:root[data-theme="dark"] .img-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .img-claro { display: none; }
  :root:not([data-theme="light"]) .img-oscuro { display: block; }
}

/* Botones */
.btn { --bg: var(--grafito); --fg: var(--fondo); display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: 600 1rem/1 var(--f-titulo); padding: 15px 22px; border-radius: 4px; border: 2px solid var(--bg); background: var(--bg); color: var(--fg); text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background-color .2s, color .2s, border-color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--ocre { --bg: var(--ocre); --fg: #1C1F23; }
.btn--ocre:hover { --bg: #E9A243; }
.btn--linea { background: transparent; color: var(--grafito); }
.btn--linea:hover { background: var(--grafito); color: var(--fondo); }
.btn--sm { padding: 10px 16px; font-size: .9375rem; }
.btn--ancho { width: 100%; }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* Navegación */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background-color .3s, box-shadow .3s; }
.nav.is-scrolled, .pagina-proyecto .nav { background: color-mix(in srgb, var(--fondo) 90%, transparent); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--hormigon-2); }
.nav-in { max-width: var(--ancho); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; gap: 18px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1.25rem/1 var(--f-titulo); letter-spacing: -0.03em; margin-right: auto; }
.marca svg { width: 30px; height: 30px; fill: none; stroke: var(--grafito); stroke-width: 2.6; stroke-linejoin: round; }
.marca svg path:first-child { stroke: var(--ocre); }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a:not(.btn) { text-decoration: none; font-weight: 500; font-size: .9375rem; position: relative; padding: 6px 0; }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ocre); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }
.nav-cliente { padding-left: 18px !important; border-left: 1px solid var(--hormigon-3); }
.tema-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hormigon-3); background: transparent; color: var(--texto); display: grid; place-items: center; cursor: pointer; flex: none; }
.tema-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.nav-toggle span:not(.sr) { display: block; height: 2px; background: var(--grafito); margin: 6px 0; transition: transform .25s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* HERO */
.hero { background: var(--hormigon); padding: 104px var(--gutter) 0; overflow: hidden; }
.hero-in { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.hero-txt { padding-block: clamp(24px, 6vw, 72px); }
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.0; max-width: 12.5ch; }
.hero-lead { margin-top: 24px; font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); color: var(--texto-2); max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-dato { margin: 36px 0 0; padding-top: 16px; border-top: 1px solid var(--hormigon-3); max-width: 46ch; }
.hero-dato dt { font-family: var(--f-titulo); font-weight: 600; font-size: .9375rem; }
.hero-dato dd { margin: 2px 0 0; color: var(--texto-2); font-size: .9375rem; }
.hero-3d { position: relative; margin: 0; aspect-ratio: 1 / .92; max-width: 100%; }
.hero-3d canvas { width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.hero-3d canvas:active { cursor: grabbing; }
.hero-3d-alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.hero-3d.sin-3d canvas { display: none; }
.hero-3d.sin-3d .hero-3d-alt { opacity: 1; }
.hero-3d.sin-3d .hero-fase, .hero-3d.sin-3d .hero-ayuda { display: none; }
.hero-fase { position: absolute; left: 4%; right: 4%; bottom: 4%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 16px; background: color-mix(in srgb, var(--superficie) 86%, transparent); backdrop-filter: blur(8px); border-radius: 6px; box-shadow: var(--sombra); font-size: .9375rem; }
.hero-fase-nombre { font: 600 1rem var(--f-titulo); min-width: 13ch; }
.hero-fase-nombre.is-cambia { animation: fase-entra .45s var(--ease); }
@keyframes fase-entra { from { opacity: 0; transform: translateY(6px); } }
.hero-fase-barra { height: 4px; background: var(--hormigon-2); border-radius: 2px; overflow: hidden; }
.hero-fase-barra i { display: block; height: 100%; background: var(--ocre); transform-origin: left; transform: scaleX(0); }
.hero-fase-cota { font: 600 .9375rem var(--f-titulo); font-variant-numeric: tabular-nums; color: var(--texto-2); }
.hero-ayuda { position: absolute; top: 6%; right: 4%; font-size: .8125rem; color: var(--texto-2); background: color-mix(in srgb, var(--superficie) 70%, transparent); padding: 6px 10px; border-radius: 20px; transition: opacity .4s; }
.hero-ayuda.is-oculto { opacity: 0; }
.hero-pie { max-width: var(--ancho); margin: 0 auto; font-size: .8125rem; color: var(--texto-2); text-align: right; padding: 4px 0 16px; }

/* CIFRAS */
.cifras { background: var(--banda); color: var(--banda-texto); padding: clamp(40px, 6vw, 72px) var(--gutter); }
.cifras-in { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.cifra { padding: 4px 24px; border-left: 1px solid color-mix(in srgb, var(--banda-texto) 18%, transparent); display: flex; flex-direction: column; gap: 8px; }
.cifra:first-child { border-left: 0; padding-left: 0; }
.cifra-n { font: 600 clamp(2.25rem, 4.4vw, 3.5rem)/1 var(--f-titulo); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cifra-l { color: var(--banda-texto-2); font-size: .9375rem; max-width: 24ch; }

/* RECORRIDO */
.recorrido { padding: clamp(72px, 10vw, 128px) var(--gutter) clamp(40px, 6vw, 80px); }
.recorrido-in { max-width: var(--ancho); margin: 0 auto; }
.recorrido-cab { max-width: 640px; margin-bottom: clamp(24px, 4vw, 48px); }
.recorrido-cab h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.recorrido-cab p { margin-top: 14px; color: var(--texto-2); font-size: 1.125rem; }
.recorrido-cuerpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.recorrido-3d { position: sticky; top: 92px; aspect-ratio: 1 / .95; background: var(--hormigon); border-radius: 8px; overflow: hidden; }
.recorrido-3d canvas { width: 100%; height: 100%; }
.recorrido.sin-3d .recorrido-3d { display: none; }
.recorrido.sin-3d .recorrido-cuerpo { grid-template-columns: 1fr; }
.recorrido-plazo { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 12px; font: 600 .875rem var(--f-titulo); font-variant-numeric: tabular-nums; color: var(--texto-2); }
.recorrido-plazo span:first-child { color: var(--texto); min-width: 4.5em; }
.recorrido-plazo-barra { flex: 1; height: 4px; background: var(--hormigon-2); border-radius: 2px; overflow: hidden; }
.recorrido-plazo-barra i { display: block; height: 100%; background: var(--ocre); transform-origin: left; transform: scaleX(0); }
.recorrido-pasos { list-style: none; margin: 0; padding: 8vh 0 30vh; display: grid; gap: 22vh; }
.recorrido-paso { display: grid; grid-template-columns: 52px 1fr; gap: 18px; opacity: .38; transition: opacity .4s var(--ease); cursor: pointer; }
.recorrido-paso.is-activo, .recorrido-paso.is-hecho { opacity: 1; }
.recorrido-paso.is-hecho { opacity: .6; }
.recorrido-n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--hormigon-3); font: 600 1.25rem var(--f-titulo); transition: background-color .35s, border-color .35s, color .35s; }
.recorrido-paso.is-activo .recorrido-n { background: var(--ocre); border-color: var(--ocre); color: #1C1F23; }
.recorrido-paso.is-hecho .recorrido-n { background: var(--grafito); border-color: var(--grafito); color: var(--fondo); }
.recorrido-mes { font: 600 .875rem var(--f-titulo); color: var(--ocre-txt); }
.recorrido-paso h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: 4px 0 10px; }
.recorrido-paso p:not(.recorrido-mes) { color: var(--texto-2); max-width: 44ch; }

/* SECCIONES */
.seccion { padding: clamp(72px, 10vw, 128px) var(--gutter); }
.seccion--hormigon { background: var(--hormigon); }
.seccion--grafito { background: var(--banda); color: var(--banda-texto); }
.seccion-in { max-width: var(--ancho); margin: 0 auto; }
.seccion-cab { max-width: 640px; margin-bottom: clamp(40px, 5vw, 64px); }
.seccion-cab h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
.seccion-cab p { margin-top: 14px; color: var(--texto-2); font-size: 1.125rem; }
.seccion-cab--fila { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.seccion-cab--fila > div { max-width: 560px; }

/* Servicios */
.servicios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
.servicio { display: flex; flex-direction: column; border-top: 2px solid var(--grafito); padding-top: 24px; text-decoration: none; }
.servicio svg { width: 44px; height: 44px; fill: none; stroke: var(--grafito); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; margin-bottom: 20px; }
.servicio:hover svg { stroke: var(--ocre-txt); }
.servicio h3 { font-size: 1.375rem; }
.servicio p { margin-top: 10px; color: var(--texto-2); font-size: 1rem; flex: 1; }
.servicio-ver { margin-top: 16px; font-weight: 600; font-size: .9375rem; color: var(--ocre-txt); }
.servicio:hover .servicio-ver { text-decoration: underline; }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro { display: inline-flex; align-items: center; gap: 6px; font: 500 .9375rem/1 var(--f-texto); padding: 10px 14px; border-radius: 999px; border: 1px solid var(--hormigon-3); background: transparent; color: var(--texto); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.filtro:hover { border-color: var(--grafito); }
.filtro.is-on { background: var(--grafito); color: var(--fondo); border-color: var(--grafito); }

/* Proyectos */
.proyectos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
.proyectos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proyecto { position: relative; display: flex; flex-direction: column; gap: 14px; text-decoration: none; }
.proyecto-img { display: block; border-radius: 4px; overflow: hidden; background: var(--hormigon-2); aspect-ratio: 4 / 3; }
.proyecto-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.proyecto:hover .proyecto-img img { transform: scale(1.045); }
.proyecto.is-oculto { display: none; }
.proyecto.is-entra { animation: entra .45s var(--ease) both; }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }
.proyecto-txt { display: flex; flex-direction: column; gap: 3px; }
.proyecto-tipo { font-size: .8125rem; color: var(--ocre-txt); font-weight: 600; }
.proyecto-t { font: 600 1.125rem/1.25 var(--f-titulo); }
.proyecto-m { color: var(--texto-2); font-size: .875rem; }
.proyecto-3d { position: absolute; top: 10px; right: 10px; font: 700 .75rem/1 var(--f-titulo); padding: 6px 8px; border-radius: 4px; background: color-mix(in srgb, var(--superficie) 88%, transparent); color: var(--texto); opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s var(--ease); }
.proyecto:hover .proyecto-3d, .proyecto:focus-visible .proyecto-3d { opacity: 1; transform: none; }

/* MAPA */
.mapa { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.mapa-txt h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
.mapa-txt > p { margin-top: 14px; color: var(--texto-2); font-size: 1.125rem; max-width: 44ch; }
.filtros--mapa { margin: 28px 0 18px; }
.mapa-ley { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mapa-ley--obra { background: var(--ocre); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ocre) 25%, transparent); }
.mapa-ley--entregada { background: var(--grafito); }
.mapa-lista { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 20px; }
.mapa-lista li { break-inside: avoid; }
.mapa-lista a, .mapa-lista span[data-punto-ref] { display: grid; grid-template-columns: 10px 1fr; column-gap: 10px; align-items: baseline; padding: 8px 6px; border-radius: 4px; text-decoration: none; }
.mapa-lista li.is-activo a, .mapa-lista li.is-activo span[data-punto-ref], .mapa-lista a:hover { background: var(--hormigon); }
.mapa-lista strong { font-weight: 600; font-size: .9375rem; }
.mapa-lista small { grid-column: 2; color: var(--texto-2); font-size: .8125rem; }
.mapa-fig { position: relative; margin: 0; }
.mapa-fig svg { width: 100%; height: auto; }
.mapa-provincias path { fill: var(--hormigon); stroke: var(--hormigon-3); stroke-width: 1.4; transition: fill .3s; }
.mapa-provincias path:hover { fill: var(--hormigon-2); }
.mapa-municipios { fill: none; stroke: var(--hormigon-2); stroke-width: .6; pointer-events: none; }
.mapa-nombres text { font: 600 22px var(--f-titulo); fill: var(--texto-2); opacity: .55; text-anchor: middle; pointer-events: none; }
.mapa-punto { cursor: pointer; outline: none; transition: opacity .3s; }
.mapa-punto.is-oculto { opacity: 0; pointer-events: none; }
.mapa-circulo { fill: var(--grafito); stroke: var(--fondo); stroke-width: 3; transition: transform .2s var(--ease); }
.mapa-punto--en_obra .mapa-circulo { fill: var(--ocre); }
.mapa-onda { fill: var(--ocre); opacity: .3; transform-origin: center; transform-box: fill-box; animation: onda 2.4s ease-out infinite; }
@keyframes onda { from { transform: scale(.6); opacity: .45; } to { transform: scale(2.2); opacity: 0; } }
.mapa-punto:hover .mapa-circulo, .mapa-punto:focus-visible .mapa-circulo, .mapa-punto.is-activo .mapa-circulo { transform: scale(1.4); }
.mapa-punto:focus-visible .mapa-circulo { stroke: var(--ocre); }
.mapa-tip { position: absolute; z-index: 5; width: 220px; transform: translateY(-100%); background: var(--grafito); color: var(--fondo); padding: 10px 12px; border-radius: 6px; font-size: .875rem; box-shadow: var(--sombra); pointer-events: none; }
.mapa-tip strong { display: block; font-family: var(--f-titulo); }
.mapa-tip span { display: block; opacity: .75; }
.mapa-tip em { display: block; font-style: normal; color: var(--ocre); margin-top: 4px; font-weight: 600; }

/* CALCULADORA */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.calc-form h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.calc-lead { margin-top: 14px; color: var(--banda-texto-2); font-size: 1.0625rem; max-width: 46ch; }
.calc fieldset { border: 0; padding: 0; margin: 28px 0 0; }
.calc legend, .calc-campo label { display: block; font: 600 .9375rem var(--f-titulo); margin-bottom: 10px; }
.calc-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.calc-tipos legend { grid-column: 1 / -1; }
.calc-tipo input, .calc-calidad input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc-tipo span, .calc-calidad span { display: block; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--banda-texto) 22%, transparent); border-radius: 6px; cursor: pointer; font-size: .9375rem; transition: border-color .2s, background-color .2s; }
.calc-tipo input:checked + span, .calc-calidad input:checked + span { border-color: var(--ocre); background: color-mix(in srgb, var(--ocre) 18%, transparent); }
.calc-tipo input:focus-visible + span, .calc-calidad input:focus-visible + span { outline: 2px solid var(--ocre); outline-offset: 2px; }
.calc-calidad { display: flex; gap: 8px; }
.calc-calidad legend { width: 100%; }
.calc-calidad label { flex: 1; text-align: center; }
.calc-campo { margin-top: 28px; }
.calc-m2 { display: flex; align-items: center; gap: 16px; }
.calc-m2 input { flex: 1; accent-color: var(--ocre); height: 28px; }
.calc-m2 output { font: 600 1.25rem var(--f-titulo); min-width: 6.5ch; text-align: right; font-variant-numeric: tabular-nums; }
.calc-campo input:not([type="range"]) { width: 100%; font: inherit; padding: 12px 14px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--banda-texto) 22%, transparent); background: transparent; color: var(--banda-texto); }
.calc-res { background: color-mix(in srgb, var(--banda-texto) 6%, transparent); border: 1px solid color-mix(in srgb, var(--banda-texto) 14%, transparent); border-radius: 10px; padding: clamp(22px, 3vw, 36px); position: sticky; top: 96px; }
.calc-res-t { color: var(--banda-texto-2); font-size: .9375rem; }
.calc-precio { font: 700 clamp(1.9rem, 3.6vw, 2.9rem)/1.1 var(--f-titulo); letter-spacing: -0.03em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.calc-sub { margin-top: 10px; color: var(--banda-texto-2); }
.calc-sub strong { color: var(--banda-texto); }
.calc-desglose { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; margin-top: 26px; }
.calc-desglose i { transition: flex .45s var(--ease); }
.calc-ley { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: .875rem; color: var(--banda-texto-2); }
.calc-ley li { display: flex; align-items: center; gap: 8px; }
.calc-ley i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.calc-ley strong, .calc-ley b, .calc-ley li > :last-child { white-space: nowrap; }
.calc-ley strong { margin-left: auto; color: var(--banda-texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-nota { margin-top: 14px; font-size: .8125rem; color: var(--banda-texto-2); }

/* ÁREA DE CLIENTE (presentación) */
.en-directo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.en-directo h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
.en-directo-txt > p { margin-top: 14px; color: var(--texto-2); font-size: 1.125rem; max-width: 48ch; }
.en-directo-lista { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 12px; }
.en-directo-lista li { padding-left: 26px; position: relative; color: var(--texto-2); }
.en-directo-lista li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 3px; background: var(--ocre); }
.en-directo-lista strong { color: var(--texto); }
.movil { justify-self: center; width: min(320px, 100%); aspect-ratio: 9 / 18.5; border-radius: 40px; background: #0E1012; padding: 12px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); transform: rotate(-3deg); }
.movil-pantalla { height: 100%; border-radius: 30px; background: #F6F4F0; color: #1C1F23; padding: 26px 16px 16px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; font-size: .8125rem; }
.movil-cab strong { display: block; font: 700 1rem var(--f-titulo); }
.movil-cab span { color: #5A5F66; }
.movil-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.movil-total strong { font: 700 1.5rem var(--f-titulo); }
.movil-barra { height: 8px; background: #DAD5CD; border-radius: 4px; overflow: hidden; }
.movil-barra i, .movil-fases i { display: block; height: 100%; background: #D98E2B; transform-origin: left; transform: scaleX(var(--v)); }
.movil-fases { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 7px; }
.movil-fases li { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; }
.movil-fases i { height: 5px; border-radius: 3px; background: #1C1F23; }
.movil-t { font-weight: 600; margin-top: 4px; }
.movil-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.movil-fotos img { border-radius: 6px; aspect-ratio: 1; object-fit: cover; }
.movil-msg { margin-top: auto; background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: 0 6px 18px -10px rgba(0,0,0,.25); }
.movil-msg strong { display: block; color: #A9681A; font-size: .75rem; }

/* Testimonios */
.testimonios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.testimonios figure { margin: 0; border-left: 3px solid var(--ocre); padding-left: 22px; }
.testimonios blockquote { margin: 0; font: 500 1.25rem/1.4 var(--f-titulo); letter-spacing: -0.01em; }
.testimonios figcaption { margin-top: 18px; color: var(--texto-2); font-size: .9375rem; }
.testimonios strong { color: var(--texto); font-weight: 600; }

/* Contacto */
.contacto { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 96px); }
.contacto-txt h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
.contacto-txt > p { margin-top: 14px; color: var(--texto-2); font-size: 1.125rem; max-width: 40ch; }
.contacto-datos { margin: 40px 0 0; display: grid; gap: 18px; }
.contacto-datos div { border-top: 1px solid var(--hormigon-2); padding-top: 12px; }
.contacto-datos dt { font-size: .875rem; color: var(--texto-2); }
.contacto-datos dd { margin: 2px 0 0; font-family: var(--f-titulo); font-weight: 500; font-size: 1.0625rem; }
.form { display: grid; gap: 18px; background: var(--hormigon); padding: clamp(24px, 4vw, 40px); border-radius: 8px; align-self: start; }
.form-calc { background: var(--superficie); border-left: 3px solid var(--ocre); padding: 12px 14px; border-radius: 4px; font-size: .9375rem; }
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo label { display: block; font-weight: 500; font-size: .9375rem; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--texto); background: var(--superficie); border: 1px solid var(--hormigon-3); border-radius: 4px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; }
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--grafito); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ocre) 35%, transparent); }
.campo.is-error input, .campo.is-error select, .campo.is-error textarea { border-color: var(--rojo); }
.campo-error { color: var(--rojo); font-size: .875rem; margin-top: 6px; }
.campo-error:empty { display: none; }
.form .btn { justify-self: start; }
.form-legal { font-size: .8125rem; color: var(--texto-2); }
.form-ok { background: var(--grafito); color: var(--fondo); padding: 16px 18px; border-radius: 4px; border-left: 4px solid var(--ocre); animation: entra .4s var(--ease); }
.hp { position: absolute; left: -9999px; }

/* Pie */
.pie { background: var(--banda); color: var(--banda-texto-2); padding: 44px var(--gutter) calc(44px + env(safe-area-inset-bottom, 0px)); }
.pie-in { max-width: var(--ancho); margin: 0 auto; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: .9375rem; }
.pie-marca { color: var(--banda-texto); font: 600 1.0625rem var(--f-titulo); margin-bottom: 4px; }
.pie-nota { margin-top: 10px; font-size: .8125rem; max-width: 46ch; }
.pie-links { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pie-links a { color: var(--banda-texto); font-weight: 500; }
.pie-links strong { color: var(--ocre); }

/* PÁGINA DE PROYECTO */
.proyecto-pag { padding: 108px var(--gutter) 0; }
.proyecto-cab, .visor, .proyecto-cuerpo, .proyecto-cita, .proyecto-otros, .banda-cta { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.miga-web { font-size: .875rem; color: var(--texto-2); }
.miga-web a { color: var(--ocre-txt); }
.proyecto-cab h1 { font-size: clamp(2.3rem, 5.2vw, 4.2rem); letter-spacing: -0.035em; margin-top: 10px; max-width: 18ch; }
.proyecto-resumen { margin-top: 14px; font-size: 1.1875rem; color: var(--texto-2); max-width: 56ch; }
.proyecto-chips { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.proyecto-chips li { padding: 7px 12px; border-radius: 999px; background: var(--hormigon); font-size: .875rem; font-weight: 500; }
.visor { position: relative; margin-top: 32px; height: min(72vh, 720px); min-height: 420px; background: var(--hormigon); border-radius: 10px; overflow: hidden; }
.visor canvas { width: 100%; height: 100%; cursor: grab; touch-action: none; }
.visor-alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; pointer-events: none; }
.visor.sin-3d canvas, .visor.sin-3d .visor-barra, .visor.sin-3d .visor-ayuda { display: none; }
.visor.sin-3d .visor-alt { opacity: 1; }
.visor.is-completa { border-radius: 0; }
.visor-barra { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px; background: color-mix(in srgb, var(--superficie) 88%, transparent); backdrop-filter: blur(10px); border-radius: 12px; box-shadow: var(--sombra); max-width: calc(100% - 24px); overflow-x: auto; }
.visor-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--texto); font: 500 .9375rem var(--f-texto); cursor: pointer; white-space: nowrap; transition: background-color .15s; }
.visor-btn:hover { background: var(--hormigon); }
.visor-btn[aria-pressed="true"] { background: var(--grafito); color: var(--fondo); }
.visor-btn svg, .visor-plantas svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; flex: none; }
.visor-btn[data-visor-construir] svg { fill: var(--ocre); stroke: var(--ocre); }
.visor-btn--icono { padding: 0 11px; }
.visor-plantas { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; font-size: .875rem; }
.visor-plantas input { width: 110px; accent-color: var(--ocre); }
.visor-plantas output { min-width: 7ch; font-variant-numeric: tabular-nums; }
.visor-ayuda { position: absolute; top: 16px; left: 16px; font-size: .8125rem; color: var(--texto-2); }
.visor-fase { position: absolute; top: 16px; right: 16px; width: min(320px, calc(100% - 32px)); padding: 12px 14px; border-radius: 8px; background: color-mix(in srgb, var(--superficie) 90%, transparent); box-shadow: var(--sombra); display: grid; gap: 8px; font: 600 1rem var(--f-titulo); }
.visor-fase-barra { height: 4px; background: var(--hormigon-2); border-radius: 2px; overflow: hidden; }
.visor-fase-barra i { display: block; height: 100%; background: var(--ocre); transform-origin: left; transform: scaleX(0); }
.visor-division { --x: 50%; position: absolute; inset: 0; cursor: ew-resize; touch-action: none; }
.visor-division::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.visor-asa { position: absolute; top: 50%; left: var(--x); width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 2px solid #fff; background: var(--ocre); box-shadow: var(--sombra); cursor: ew-resize; }
.visor-asa::before { content: "‹ ›"; color: #1C1F23; font: 700 15px var(--f-titulo); }
.visor-etq { position: absolute; top: 16px; padding: 6px 10px; border-radius: 4px; background: rgba(28,31,35,.78); color: #fff; font: 600 .8125rem var(--f-titulo); }
.visor-etq--antes { left: 16px; }
.visor-etq--despues { right: 16px; }
.proyecto-cuerpo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); margin-top: clamp(48px, 6vw, 80px); }
.proyecto-texto h2, .proyecto-ficha h2 { font-size: 1.5rem; margin-bottom: 14px; }
.proyecto-texto > p { font-size: 1.125rem; color: var(--texto-2); max-width: 62ch; }
.proyecto-texto h2 + p + h2, .proyecto-texto p + h2 { margin-top: 44px; }
.cronologia { list-style: none; padding: 0; margin: 0; position: relative; }
.cronologia::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--hormigon-2); }
.cronologia li { position: relative; display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 10px 0 10px 28px; }
.cronologia li::before { content: ""; position: absolute; left: 0; top: 16px; width: 14px; height: 14px; border-radius: 50%; background: var(--fondo); border: 2px solid var(--ocre); }
.cronologia li:last-child::before { background: var(--ocre); }
.cronologia-cuando { font: 600 .9375rem var(--f-titulo); color: var(--ocre-txt); }
.proyecto-ficha dl { margin: 0; display: grid; }
.proyecto-ficha dl div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--hormigon-2); }
.proyecto-ficha dt { color: var(--texto-2); }
.proyecto-ficha dd { margin: 0; font: 600 1rem var(--f-titulo); text-align: right; }
.proyecto-cita { margin-top: clamp(56px, 7vw, 96px); padding-left: 28px; border-left: 4px solid var(--ocre); }
.proyecto-cita blockquote { margin: 0; font: 500 clamp(1.4rem, 2.6vw, 2.1rem)/1.3 var(--f-titulo); letter-spacing: -0.02em; max-width: 34ch; }
.proyecto-cita figcaption { margin-top: 16px; color: var(--texto-2); }
.proyecto-otros { margin-top: clamp(64px, 8vw, 112px); }
.proyecto-otros h2 { font-size: 1.75rem; margin-bottom: 24px; }
.banda-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: clamp(64px, 8vw, 112px); margin-bottom: clamp(64px, 8vw, 112px); padding: clamp(24px, 4vw, 44px); background: var(--banda); color: var(--banda-texto); border-radius: 10px; }
.banda-cta h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.banda-cta p { color: var(--banda-texto-2); margin-top: 6px; }

/* Responsive */
@media (max-width: 1100px) {
  .nav-links { gap: 16px; }
  .servicios { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .proyectos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mapa-lista { columns: 1; }
}
@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .nav-links { position: fixed; inset: calc(64px + env(safe-area-inset-top, 0px)) 0 auto; background: var(--fondo); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; box-shadow: 0 12px 24px rgba(0,0,0,.14); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .25s var(--ease), visibility .2s; }
  .nav-links.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-links a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--hormigon-2); }
  .nav-cliente { padding-left: 0 !important; border-left: 0; }
  .nav-links .btn { margin-top: 14px; }
  .nav.is-open { background: var(--fondo); }
  .hero { padding-top: 88px; }
  .hero-in { grid-template-columns: 1fr; }
  .hero-txt { padding-block: 16px 0; }
  .hero-3d { aspect-ratio: 1 / .85; }
  .hero-pie { text-align: left; }
  .cifras-in { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .cifra:nth-child(3) { border-left: 0; padding-left: 0; }
  .recorrido-cuerpo { grid-template-columns: 1fr; }
  .recorrido-3d { top: calc(64px + env(safe-area-inset-top, 0px)); aspect-ratio: auto; height: 42vh; z-index: 2; box-shadow: 0 10px 20px -16px rgba(0,0,0,.4); }
  .recorrido-pasos { padding: 4vh 0 20vh; gap: 12vh; }
  .proyectos, .proyectos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mapa, .calc, .en-directo, .contacto, .proyecto-cuerpo { grid-template-columns: 1fr; }
  .calc-res { position: static; }
  .movil { transform: none; width: min(280px, 100%); }
  .testimonios { grid-template-columns: 1fr; gap: 32px; }
  .visor { height: 62vh; min-height: 360px; }
}
@media (max-width: 560px) {
  .servicios, .proyectos, .proyectos--3 { grid-template-columns: 1fr; }
  .campo-fila, .calc-tipos { grid-template-columns: 1fr; }
  .cifra { padding: 4px 14px; }
  .pie-links { align-items: flex-start; }
  .hero-fase { grid-template-columns: 1fr auto; }
  .hero-fase-barra { grid-column: 1 / -1; grid-row: 2; }
  .calc-ley { grid-template-columns: 1fr; }
  .visor-btn span { display: none; }
  .visor-btn { padding: 0 11px; }
  .visor-plantas input { width: 64px; }
  .visor-plantas { padding: 0 6px; gap: 6px; }
  .visor-plantas output { min-width: 0; font-size: .75rem; }
  .visor-barra { gap: 0; }
  [data-visor-descargar] { display: none; }
  .cronologia li { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}

/* ---- Maquetas: capa de etiquetas, medidas, marcas y recorrido (v2.1) ---- */
.maqueta-capa { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.maqueta-etq, .maqueta-pin { position: absolute; left: 0; top: 0; will-change: transform; }
.maqueta-etq--medida { display: grid; gap: 1px; margin: -18px 0 0 -40px; min-width: 80px; padding: 5px 9px; border-radius: 6px; background: #1C1F23; color: #fff; font: 600 .8125rem/1.2 "Space Grotesk", system-ui, sans-serif; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.maqueta-etq--medida small { font: 500 .6875rem "Inter", system-ui, sans-serif; color: #D9D5CE; }
.maqueta-pin { pointer-events: auto; display: flex; align-items: center; gap: 6px; margin: -30px 0 0 -13px; padding: 0 9px 0 0; height: 26px; border: 0; border-radius: 13px; background: #fff; color: #1C1F23; font: 600 .75rem/1 "Inter", system-ui, sans-serif; box-shadow: 0 3px 10px rgba(0,0,0,.25); cursor: pointer; max-width: 200px; transition: transform .05s linear, box-shadow .15s; }
.maqueta-pin::after { content: ""; position: absolute; left: 9px; bottom: -6px; border: 4px solid transparent; border-top: 6px solid #fff; }
.maqueta-pin:hover, .maqueta-pin:focus-visible { box-shadow: 0 0 0 3px rgba(217,142,43,.6), 0 3px 10px rgba(0,0,0,.25); z-index: 2; }
.maqueta-pin-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #5B8DB8; color: #fff; font-weight: 700; flex: none; }
.maqueta-pin--incidencia .maqueta-pin-n { background: #C2412D; }
.maqueta-pin.is-alta .maqueta-pin-n { animation: latido 1.6s ease-in-out infinite; }
.maqueta-pin.is-cerrada { opacity: .55; }
.maqueta-pin.is-cerrada .maqueta-pin-n { background: #2F7D5B; }
.maqueta-pin-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 rgba(194,65,45,.5); } 50% { box-shadow: 0 0 0 7px rgba(194,65,45,0); } }
.visor-guion { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(28,31,35,.88); color: #fff; font: 600 .9375rem "Space Grotesk", system-ui, sans-serif; backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: guion .4s cubic-bezier(.2,.7,.2,1); white-space: nowrap; max-width: calc(100% - 24px); }
.visor-guion span { overflow: hidden; text-overflow: ellipsis; }
.visor-guion small { font: 500 .75rem "Inter", system-ui, sans-serif; color: #B9B4AB; }
.visor-guion button { flex: none; border: 0; border-radius: 999px; padding: 5px 11px; background: rgba(255,255,255,.14); color: #fff; font: 600 .75rem "Inter", system-ui, sans-serif; cursor: pointer; }
.visor-guion button:hover { background: rgba(255,255,255,.26); }
@keyframes guion { from { opacity: 0; transform: translate(-50%, -8px); } }
.calidad-menu { position: relative; }
.calidad-opciones { position: fixed; z-index: 120; display: grid; gap: 2px; min-width: 190px; padding: 6px; border-radius: 10px; background: #1C1F23; color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.calidad-opciones[hidden] { display: none; }
.calidad-opciones p { margin: 4px 8px 6px; font: 600 .6875rem "Inter", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #8a857d; }
.calidad-opciones button { display: grid; gap: 1px; text-align: left; padding: 7px 9px; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; font: 500 .8125rem "Inter", system-ui, sans-serif; }
.calidad-opciones button small { color: #9a958d; font-size: .6875rem; }
.calidad-opciones button:hover, .calidad-opciones button[aria-checked="true"] { background: rgba(255,255,255,.1); }
.calidad-opciones button[aria-checked="true"]::before { content: "✓ "; color: #D98E2B; }
@media (prefers-reduced-motion: reduce) { .maqueta-pin.is-alta .maqueta-pin-n, .visor-guion { animation: none; } }

/* CONFIGURADOR DE VIVIENDA */
.conf { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr); gap: clamp(24px, 4vw, 56px); max-width: 1400px; margin: 0 auto; padding: 100px var(--gutter) clamp(56px, 8vw, 96px); align-items: start; }
.conf-visor { position: sticky; top: 86px; }
.visor--conf { margin-top: 0; height: min(calc(100vh - 220px), 720px); min-height: 380px; }
.conf-precio { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 18px; margin-top: 14px; padding: 16px 20px; background: var(--banda); color: var(--banda-texto); border-radius: 10px; }
.conf-precio-t { grid-column: 1 / -1; font-size: .8125rem; color: var(--banda-texto-2); }
.conf-precio-v { font: 700 clamp(1.5rem, 2.6vw, 2.125rem)/1.1 var(--f-titulo); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.conf-precio-sub { color: var(--banda-texto-2); font-size: .9375rem; text-align: right; }
.conf-precio-sub strong { color: var(--banda-texto); }
.conf-panel h1 { font-size: clamp(2rem, 3.4vw, 2.75rem); margin-top: 8px; }
.conf-lead { margin-top: 10px; color: var(--texto-2); }
.conf-grupo { border: 0; padding: 0; margin: 26px 0 0; min-width: 0; }
.conf-grupo legend, .conf-legend { display: block; font: 600 .9375rem var(--f-titulo); margin-bottom: 10px; }
.conf-seg { display: flex; gap: 6px; padding: 4px; background: var(--hormigon); border-radius: 8px; }
.conf-seg label { flex: 1; }
.conf-seg input, .conf-carta input, .conf-extra input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.conf-seg span { display: block; text-align: center; padding: 9px 10px; border-radius: 6px; cursor: pointer; font-weight: 500; transition: background-color .2s, box-shadow .2s; }
.conf-seg input:checked + span { background: var(--superficie); box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 600; }
.conf-seg input:focus-visible + span, .conf-carta input:focus-visible + span, .conf-extra input:focus-visible ~ .conf-check { outline: 2px solid var(--ocre); outline-offset: 2px; }
.conf-m2 { display: flex; align-items: center; gap: 16px; }
.conf-m2 input { flex: 1; accent-color: var(--ocre); height: 28px; }
.conf-m2 output { font: 600 1.25rem var(--f-titulo); min-width: 6.5ch; text-align: right; font-variant-numeric: tabular-nums; }
.conf-cartas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.conf-cartas--4 { grid-template-columns: repeat(2, 1fr); }
.conf-carta span { display: grid; gap: 2px; height: 100%; padding: 12px; border: 1px solid var(--hormigon-3); border-radius: 8px; cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s var(--ease); }
.conf-carta span:hover { border-color: var(--grafito-3); }
.conf-carta input:checked + span { border-color: var(--ocre); background: color-mix(in srgb, var(--ocre) 10%, var(--superficie)); }
.conf-carta svg { width: 48px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; margin-bottom: 4px; color: var(--grafito-3); }
.conf-carta input:checked + span svg { color: var(--ocre-txt); }
.conf-carta strong { font-weight: 600; font-size: .9375rem; }
.conf-carta small, .conf-extra small { color: var(--texto-2); font-size: .8125rem; }
.conf-muestra { display: block; height: 26px; border-radius: 4px; margin-bottom: 6px; border: 1px solid rgba(0,0,0,.08); }
.conf-muestra--blanca { background: #EEEBE5; }
.conf-muestra--ladrillo { background: repeating-linear-gradient(0deg, #A55B3E 0 7px, #D8CFC4 7px 8px); }
.conf-muestra--madera { background: repeating-linear-gradient(90deg, #A47A52 0 9px, #8C6440 9px 10px); }
.conf-muestra--piedra { background: radial-gradient(circle at 30% 40%, #B9B2A6 0 4px, transparent 5px), radial-gradient(circle at 70% 60%, #9E978C 0 5px, transparent 6px), #ABA497; background-size: 16px 13px; }
.conf-extras { display: grid; gap: 8px; }
.conf-extra { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--hormigon-3); border-radius: 8px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.conf-extra:has(input:checked) { border-color: var(--ocre); background: color-mix(in srgb, var(--ocre) 10%, var(--superficie)); }
.conf-extra > span:last-child { display: flex; justify-content: space-between; flex: 1; gap: 12px; }
.conf-extra strong { font-weight: 500; }
.conf-check { flex: none; width: 22px; height: 22px; border-radius: 5px; border: 1.5px solid var(--hormigon-3); display: grid; place-items: center; transition: background-color .15s, border-color .15s; }
.conf-extra input:checked ~ .conf-check { background: var(--ocre); border-color: var(--ocre); }
.conf-extra input:checked ~ .conf-check::after { content: ""; width: 10px; height: 6px; border: solid #1C1F23; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
.conf-desglose { margin-top: 24px; border-top: 1px solid var(--hormigon-2); padding-top: 14px; }
.conf-desglose summary { cursor: pointer; font-weight: 500; color: var(--texto-2); }
.conf-desglose ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: .9375rem; }
.conf-desglose li { display: flex; justify-content: space-between; gap: 16px; }
.conf-desglose b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.conf-desglose-tot { border-top: 1px solid var(--hormigon-2); padding-top: 8px; margin-top: 4px; color: var(--texto-2); }
.conf-resumen { margin-top: 22px; padding: 14px 16px; background: var(--superficie); border-left: 3px solid var(--ocre); border-radius: 4px; font-size: .9375rem; max-width: 46ch; }
.banda-cta--conf { margin-top: 18px; }
@media (max-width: 960px) {
  .conf { grid-template-columns: 1fr; padding-top: 80px; }
  .conf-visor { position: static; }
  .visor--conf { height: 52vh; min-height: 300px; }
  .conf-panel { order: 2; }
}
@media (max-width: 520px) {
  .conf-cartas { grid-template-columns: 1fr 1fr 1fr; }
  .conf-cartas--4 { grid-template-columns: 1fr 1fr; }
  .conf-carta span { padding: 9px; }
  .conf-precio { grid-template-columns: 1fr; }
  .conf-precio-sub { text-align: left; }
}

.calc-conf { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 16px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--ocre) 55%, transparent); background: color-mix(in srgb, var(--ocre) 12%, transparent); color: var(--banda-texto); text-decoration: none; font-size: .9375rem; max-width: 52ch; transition: background-color .2s, transform .2s var(--ease); }
.calc-conf:hover { background: color-mix(in srgb, var(--ocre) 22%, transparent); transform: translateX(3px); }
.calc-conf strong { color: var(--ocre); }
.calc-conf svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }