/* ==========================================================================
   DRAXOR · estilos del sitio
   Marca según Manual de Identidad v2: negro carbón, gris concreto,
   blanco hueso y naranja obra (solo acento, máx. 10 %).
   ========================================================================== */

/* ---------- Tipografías autoalojadas (OFL, ver /fonts) ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* ---------- Colores y medidas ---------- */
:root {
  --negro: #141414;
  --concreto: #B8B4AD;
  --hueso: #F4F2EE;
  --naranja: #E8590C;
  /* Concreto oscurecido solo para texto secundario sobre hueso:
     el concreto puro no alcanza el contraste mínimo legible (WCAG AA). */
  --concreto-texto: #5E5A54;

  --titulos: "Archivo", "Arial Narrow", Arial, sans-serif;
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --margen: clamp(1.25rem, 5vw, 4rem);
  --ancho: 76rem;
  --barra: 3.5rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--negro);
  color: var(--hueso);
  font: 400 1.0625rem/1.55 var(--texto);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--naranja); }

:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 4px;
  border-radius: 2px;
}

.saltar {
  position: absolute;
  left: var(--margen);
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--hueso);
  color: var(--negro);
  font: 500 0.875rem var(--mono);
}
.saltar:focus { top: 0.75rem; }

/* ---------- Piezas comunes ---------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--margen);
}
.contenedor--angosto { max-width: 62rem; }

.etiqueta {
  font: 500 0.75rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--concreto);
}
.seccion--hueso .etiqueta { color: var(--concreto-texto); }

.titular {
  font: 700 clamp(2rem, 8vw, 6.5rem)/0.98 var(--titulos);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 16ch;
  margin: 1.5rem 0 clamp(3rem, 8vh, 6rem);
}
.titular--cita {
  font-size: clamp(2rem, 6vw, 4.75rem);
  line-height: 1.04;
  max-width: 20ch;
}

h3 {
  font: 700 clamp(1.5rem, 3vw, 2rem)/1.1 var(--titulos);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0.75rem 0 0.75rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border-radius: 999px;
  background: var(--naranja);
  /* Texto negro: sobre naranja da contraste 5.2:1 (el blanco no pasa). */
  color: var(--negro);
  font: 600 1rem/1 var(--texto);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.boton:hover { background: #F0691F; }
.boton:active { transform: scale(0.98); }
.boton--chico { min-height: 2.25rem; padding: 0 1rem; font-size: 0.875rem; }

/* Marcas de contenido pendiente: visibles a propósito */
.falta {
  font-family: var(--mono);
  font-size: 0.85em;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px dashed currentColor;
}

/* ---------- Menú fijo ---------- */
.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--barra);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--margen);
  padding-top: env(safe-area-inset-top);
  background: rgba(20, 20, 20, 0.78);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(184, 180, 173, 0.18);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.barra__logo { display: block; padding: 0.5rem 0; }
.barra__logo img { width: 132px; height: auto; transition: opacity 0.3s ease; }
.barra .logo-claro { display: none; }
.barra[data-tema="claro"] {
  background: rgba(244, 242, 238, 0.82);
  border-bottom-color: rgba(20, 20, 20, 0.08);
}
.barra[data-tema="claro"] .logo-claro { display: block; }
.barra[data-tema="claro"] .logo-oscuro { display: none; }
/* En la portada el logo grande ya está a la vista */
.barra--inicio { background: transparent; border-bottom-color: transparent; }
.barra--inicio .barra__logo img { opacity: 0; }

/* ---------- Secciones a pantalla completa ---------- */
.seccion {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--barra) + clamp(3rem, 10vh, 7rem)) 0 clamp(4rem, 12vh, 8rem);
  scroll-margin-top: 0;
}
.seccion--negro { background: var(--negro); color: var(--hueso); }
.seccion--hueso { background: var(--hueso); color: var(--negro); }

/* 01 · Inicio */
.inicio { text-align: center; }
.inicio .contenedor { display: flex; flex-direction: column; align-items: center; }
.inicio__logo { width: min(100%, 760px); }
.inicio__logo img { width: 100%; }
.inicio__frase {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  font: 700 clamp(1rem, 4.2vw, 2.25rem)/1.2 var(--titulos);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.inicio__linea {
  margin-top: 1.25rem;
  color: var(--hueso);
  font: 400 clamp(1.0625rem, 2.2vw, 1.375rem)/1.3 var(--texto);
  white-space: nowrap;
}
.inicio__zona { margin: 0.75rem 0 2.5rem; }
/* 02 · Servicios */
.trio {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}
.trio__item {
  border-top: 1px solid var(--concreto);
  padding-top: 1.25rem;
  max-width: 26rem;
}
.trio__item p:last-child { color: var(--concreto-texto); }
@media (min-width: 52rem) {
  .trio { grid-template-columns: repeat(3, 1fr); }
}

/* 05 · Sobre DRAXOR */
.firma {
  border-left: 2px solid var(--naranja);
  padding-left: 1.25rem;
  max-width: 34rem;
}
.firma__nombre { font-weight: 600; margin-bottom: 0.5rem; }

/* 06 · Contacto */
.contacto__vias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem clamp(2.5rem, 6vw, 5rem);
}
.datos { display: flex; flex-wrap: wrap; gap: 1.5rem clamp(2rem, 5vw, 4rem); }
.datos dd {
  margin-top: 0.35rem;
  font: 700 clamp(1.25rem, 2.6vw, 1.75rem)/1.2 var(--titulos);
  letter-spacing: 0.02em;
}
.datos a { text-decoration: none; border-bottom: 1px solid var(--concreto); }
.datos a:hover { border-bottom-color: var(--naranja); }

/* ---------- Pie ---------- */
.pie {
  background: var(--negro);
  color: var(--hueso);
  padding: 4rem 0 calc(3rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(184, 180, 173, 0.18);
}
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.pie__logo { width: 240px; }
.pie__datos { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
.pie__datos a { display: inline-block; padding: 0.5rem 0; margin: -0.5rem 0; }

/* ---------- Aviso de privacidad ---------- */
.legal {
  background: var(--hueso);
  color: var(--negro);
  padding: calc(var(--barra) + 4rem) 0 6rem;
}
.legal .contenedor { max-width: 46rem; }
.legal h1 {
  font: 700 clamp(2.25rem, 6vw, 4rem)/1 var(--titulos);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 1.25rem 0 1rem;
}
.legal h2 {
  font: 700 1.25rem/1.2 var(--titulos);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 3rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--concreto);
}
.legal p, .legal li { margin-bottom: 0.9rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.legal .etiqueta { color: var(--concreto-texto); }
.legal .nota {
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--naranja);
  background: rgba(184, 180, 173, 0.25);
  font-size: 0.95rem;
}

/* ---------- Aparición al hacer scroll ---------- */
.animar .aparecer {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.animar .aparecer.visible { opacity: 1; transform: none; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.barra[data-tema="claro"] .etiqueta { color: var(--concreto-texto); }
.titular--centro { margin-inline: auto; }

/* ==========================================================================
   v2 · Fotos a pantalla completa, servicios por pantalla, cifras
   ========================================================================== */

/* Secciones con foto de fondo */
.seccion--foto {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--negro);
  color: var(--hueso);
}
.seccion__fondo {
  position: absolute;
  inset: -8% 0;               /* margen extra para el parallax */
  z-index: -2;
  will-change: transform;
}
.foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.foto--vacia {                 /* espacio liso mientras no hay foto */
  display: grid;
  place-items: center;
  background: #3A3936;
  color: var(--concreto);
}
.foto--vacia .falta { position: relative; top: -18vh; }
.seccion--foto::after {        /* degradado negro para que se lea el texto */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.55) 0%, rgba(20, 20, 20, 0.25) 35%, rgba(20, 20, 20, 0.6) 65%, rgba(20, 20, 20, 0.94) 100%);
}
.inicio__texto { display: flex; flex-direction: column; align-items: center; }
/* Celular: la foto arriba a su ancho natural (máx. 708 px) y fundida en negro */
.inicio { justify-content: flex-end; }
.inicio .seccion__fondo { inset: 0 0 auto 0; display: flex; justify-content: center; }
.inicio .foto { width: 100%; max-width: 610px; height: auto; }
.inicio.seccion--foto::after {
  /* sin oscurecer arriba: la foto empieza en el borde de la pantalla */
  background: linear-gradient(180deg, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0) 30%, rgba(20, 20, 20, 0.85) 55%, var(--negro) 70%);
}
.inicio .foto { object-position: center 40%; }
@media (min-width: 52rem) {
  .inicio { text-align: left; justify-content: center; }
  .inicio .foto { height: 100%; max-width: none; object-fit: cover; }
  .inicio .contenedor { align-items: stretch; }
  .inicio__texto { align-items: flex-start; max-width: 50%; }
  .inicio__logo { width: min(100%, 560px); }
  .inicio .seccion__fondo {
    left: auto;
    right: 0;
    width: min(50%, 610px);
    inset-block: 0;
  }
  .inicio.seccion--foto::after {
    background: linear-gradient(90deg, var(--negro) 0%, var(--negro) 50%, rgba(20, 20, 20, 0.55) 62%, rgba(20, 20, 20, 0.15) 80%, rgba(20, 20, 20, 0.35) 100%);
  }
}
@media (min-width: 1220px) {
  /* pantallas anchas: la foto deja de crecer y se funde con el negro */
  .inicio.seccion--foto::after {
    background: linear-gradient(90deg, var(--negro) 0%, var(--negro) calc(100% - 610px), rgba(20, 20, 20, 0.15) calc(100% - 430px), rgba(20, 20, 20, 0.35) 100%);
  }
}

/* Servicios: una pantalla, una idea */
.titular--gigante {
  font-size: clamp(2rem, 8.4vw, 7.75rem);
  max-width: none;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.servicio__texto {
  max-width: 24ch;
  font-size: clamp(1.375rem, 3.2vw, 2.25rem);
  line-height: 1.25;
}
.seccion--hueso .servicio__texto { color: var(--negro); }
.seccion--negro .servicio__texto { color: var(--hueso); }



/* Obras: cada una en su pantalla, foto grande sin estirar + datos */
.obras-intro { min-height: 80svh; }
.obra__rejilla {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.obra__foto {
  display: flex;
  justify-content: center;
}
.obra__foto img { will-change: transform; }
.obra__foto img {
  width: auto;                 /* nunca más grande que su tamaño real */
  max-width: 100%;
  max-height: 78svh;
  height: auto;
}
.obra__info { min-width: 0; }
.obra__info .titular {
  font-size: clamp(1.75rem, 7.6vw, 2.5rem);
  max-width: none;
  margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
}
.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem clamp(1.75rem, 4vw, 3.5rem);
  margin-bottom: clamp(1.5rem, 4vh, 2.25rem);
}
.cifras dd {
  margin-top: 0.4rem;
  font: 500 clamp(2rem, 5.5vw, 4rem)/1 var(--mono);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.cifras--falta { font-size: 1rem; }
.obra__nota {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  margin-bottom: 1.25rem;
}
.obra__alcance {
  padding-top: 1rem;
  border-top: 1px solid rgba(184, 180, 173, 0.45);
  color: var(--concreto);
  max-width: 30rem;
}
.seccion--hueso .obra__alcance { color: var(--concreto-texto); border-top-color: var(--concreto); }
@media (min-width: 52rem) {
  .obra__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .obra--invertida .obra__foto { order: 2; }
  .obra__info .titular { font-size: clamp(2.25rem, 3.6vw, 3.25rem); }
}

/* Galería "En proceso" / "Render" */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  max-width: 32rem;
}
.galeria img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.galeria figcaption { margin-top: 0.5rem; }

/* Obra sin foto: pantalla tipográfica */
.obra--sin-foto .obra__rejilla { grid-template-columns: minmax(0, 1fr); }
.obra--sin-foto .titular { font-size: clamp(1.75rem, 7vw, 6rem); max-width: 16ch; }
.obra--sin-foto .cifras dd { font-size: clamp(2.5rem, 7vw, 5.5rem); }

/* Sobre DRAXOR */
.firma__texto { color: var(--concreto); max-width: 52ch; }
.seccion--hueso .firma__texto { color: var(--concreto-texto); }
.obra__foto { flex-direction: column; align-items: center; }
.obra__foto figcaption { margin-top: 0.75rem; align-self: stretch; text-align: center; }
.cifras dd.cifras__texto { font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.1; }
.galeria { max-width: 26rem; }

/* ==========================================================================
   v5 · Cómo trabajo en secuencia y transiciones al bajar
   ========================================================================== */

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Cómo trabajamos · celular: un paso por bloque, apilados */
.proceso__rejilla { display: grid; gap: clamp(2.5rem, 8vh, 4rem); }
.proceso__cabeza .titular { max-width: 14ch; margin-bottom: 0; }
.proceso__lema {
  margin-top: clamp(1.25rem, 3vh, 2rem);
  max-width: 24ch;
  font: 400 clamp(1.375rem, 2.6vw, 2.125rem)/1.25 var(--texto);
  color: var(--hueso);
}
.proceso__pasos { display: grid; gap: clamp(2.5rem, 7vh, 4rem); }
.paso {
  position: relative;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(184, 180, 173, 0.35);
}
.paso::before {                            /* línea fina del paso activo */
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--naranja);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.paso__num {
  display: block;
  font: 500 0.875rem/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--concreto);
  font-variant-numeric: tabular-nums;
  transition: color 0.5s ease;
}
.paso__verbo {
  font-size: clamp(2rem, 9vw, 3rem);
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0.9rem 0 1rem;
}
.paso__texto {
  max-width: 34ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.45;
}
.paso__recibes {
  margin-top: 1.1rem;
  font: 400 0.875rem/1.45 var(--mono);
  color: var(--concreto);
}
.paso.activo .paso__num { color: var(--naranja); }
.paso.activo::before { transform: scaleX(1); }

/* Cómo trabajamos · escritorio: titular fijo a la izquierda, lista vertical a pantalla completa */
@media (min-width: 52rem) {
  .proceso { display: block; padding-bottom: 0; }
  .proceso__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 5vw, 5rem); }
  .proceso__cabeza { position: sticky; top: calc(var(--barra) + 18vh); }
  .proceso__cabeza .titular { font-size: clamp(2.5rem, 4.2vw, 4.25rem); max-width: 15ch; }
  .paso {
    min-height: 72vh;
    min-height: 72svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 0;
    padding-top: 0;
  }
  .paso::before { display: none; }
  .paso__num { position: relative; padding-top: 1.1rem; }
  .paso__num::before {                     /* línea fina arriba del número */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3rem;
    height: 1px;
    background: rgba(184, 180, 173, 0.45);
    transition: background-color 0.5s ease, width 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .paso.activo .paso__num::before { background: var(--naranja); width: 6rem; }
  .paso__verbo { font-size: clamp(2.5rem, 4.6vw, 4.5rem); }
  .proceso__pasos { gap: 0; padding-bottom: 14vh; }
  /* el paso activo se resalta; los demás quedan tenues */
  .animar .paso.aparecer.visible { opacity: 0.22; }
  .animar .paso.aparecer.visible.activo { opacity: 1; }
}

/* Transiciones de cada pantalla: el contenido entra subiendo y sale desvaneciéndose */
.animar .seccion:not(.proceso) > .contenedor {
  opacity: calc(1 - var(--salida, 0) * 0.85);
  translate: 0 calc(var(--entrada, 0) * 5vh - var(--salida, 0) * 8vh);
  scale: calc(1 - var(--salida, 0) * 0.03);
  will-change: opacity, translate;
}
.animar .titular--gigante {
  transform-origin: left center;
  scale: calc(1 - var(--entrada, 0) * 0.14);
}
.animar .aparecer { transform: translateY(40px); }

/* ==========================================================================
   v8 · Calculadora de honorarios: un plano que crece con los m²
   ========================================================================== */
.calculadora[hidden] { display: none; }
.calculadora__rejilla { display: grid; gap: clamp(2.5rem, 6vh, 4rem) clamp(2rem, 6vw, 6rem); align-items: center; }
.calculadora__controles { display: grid; gap: clamp(1.5rem, 4vh, 2.25rem); min-width: 0; }
.calculadora__controles .titular { max-width: 12ch; margin: 0; }
.calculadora__lema { max-width: 26ch; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.3; color: var(--concreto); }
.pregunta { border: 0; margin: 0; padding: 0; min-width: 0; }
.pregunta legend, .pregunta > label { display: block; padding: 0; margin-bottom: 0.9rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 1px solid rgba(184, 180, 173, 0.45);
  border-radius: 999px;
  font-size: 0.9375rem;
  color: var(--hueso);
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.chip:hover span { border-color: var(--hueso); }
.chip input:checked + span { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }
.chip input:focus-visible + span { outline: 2px solid var(--naranja); outline-offset: 3px; }

/* Deslizador como regla de medir */
.regla { --relleno: 23%; }
.regla input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2.75rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.regla input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(90deg, var(--naranja) var(--relleno), rgba(184, 180, 173, 0.35) var(--relleno));
}
.regla input[type="range"]::-moz-range-track { height: 2px; background: rgba(184, 180, 173, 0.35); }
.regla input[type="range"]::-moz-range-progress { height: 2px; background: var(--naranja); }
.regla input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--hueso);
  border: 6px solid var(--negro);
  box-shadow: 0 0 0 1px var(--hueso);
}
.regla input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hueso);
  border: 6px solid var(--negro);
  box-shadow: 0 0 0 1px var(--hueso);
}
.regla input[type="range"]:focus-visible { outline: 2px solid var(--naranja); outline-offset: 4px; }
.regla__marcas {
  display: flex;
  justify-content: space-between;
  padding-top: 0.6rem;
  background: repeating-linear-gradient(90deg, rgba(184, 180, 173, 0.5) 0 1px, transparent 1px 2.5%) top / 100% 6px no-repeat;
  font: 400 0.75rem/1 var(--mono);
  color: var(--concreto);
}

/* El plano */
.plano {
  display: grid;
  border: 1px solid rgba(184, 180, 173, 0.3);
  background: rgba(244, 242, 238, 0.025);
  min-width: 0;
}
.plano__dibujo { position: relative; border-bottom: 1px solid rgba(184, 180, 173, 0.3); }
.plano__svg { display: block; width: 100%; height: auto; max-height: 52svh; color: rgba(184, 180, 173, 0.22); }
.plano__planta {
  transform-box: view-box;
  transform-origin: 160px 160px;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.plano__muro { fill: rgba(244, 242, 238, 0.06); stroke: var(--hueso); stroke-width: 1.5; }
.plano__cota { fill: none; stroke: var(--naranja); stroke-width: 1; }
.plano__medida {
  position: absolute;
  right: 1rem;
  bottom: 0.85rem;
  font: 500 0.875rem/1 var(--mono);
  color: var(--concreto);
}
.plano__datos { padding: clamp(1.25rem, 3vw, 2rem); }
.plano__label { margin-top: 1rem; font-size: 0.9375rem; color: var(--concreto); }
.plano__precio {
  margin-top: 0.35rem;
  font: 500 clamp(2.5rem, 6vw, 4.5rem)/1 var(--mono);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.plano__obra { margin-top: 0.75rem; font: 400 0.875rem/1.4 var(--mono); color: var(--concreto); }
.plano__gancho {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(184, 180, 173, 0.3);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  line-height: 1.35;
}
.plano__gancho strong { font: 700 1em/1.35 var(--titulos); letter-spacing: 0.02em; text-transform: uppercase; }
.plano .boton { margin-top: 1.25rem; }
.plano__nota { margin-top: 1.25rem; max-width: 46ch; font-size: 0.8125rem; color: var(--concreto); }
@media (min-width: 52rem) {
  .calculadora__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .calculadora__controles { position: sticky; top: calc(var(--barra) + 6vh); }
  .calculadora__controles .titular { font-size: clamp(2.25rem, 3.6vw, 3.75rem); }
  .plano__svg { max-height: 32svh; margin: 0 auto; }
}

/* ==========================================================================
   v9 · Más flow: escalonado, cortinilla en fotos y entrada de la portada
   ========================================================================== */
:root { --suave: cubic-bezier(0.16, 1, 0.3, 1); }

/* Aparición escalonada: los elementos que entran juntos llegan uno tras otro */
.animar .aparecer {
  transform: translateY(56px);
  transition: opacity 1.1s var(--suave), transform 1.3s var(--suave);
  transition-delay: var(--retraso, 0s);
}
.animar .aparecer.visible { transform: none; }

/* Fotos de obra: se descubren con una cortinilla y se asientan con un leve zoom */
.animar .obra__foto.aparecer {
  opacity: 1;
  transform: none;
  clip-path: inset(16% 0 16% 0);
  transition: clip-path 1.5s var(--suave);
  transition-delay: var(--retraso, 0s);
}
.animar .obra__foto.aparecer.visible { clip-path: inset(0 0 0 0); }
.animar .obra__foto img { scale: 1.08; transition: scale 1.8s var(--suave); transition-delay: var(--retraso, 0s); }
.animar .obra__foto.visible img { scale: 1; }
.animar .galeria.aparecer img { scale: 1.06; transition: scale 1.6s var(--suave) 0.2s; }
.animar .galeria.aparecer.visible img { scale: 1; }
.galeria figure { overflow: hidden; }

/* Portada: entrada en secuencia al cargar */
@keyframes draxor-subir {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: none; }
}
@keyframes draxor-asentar {
  from { opacity: 0.35; scale: 1.06; }
  to { opacity: 1; scale: 1; }
}
.animar .inicio .foto { animation: draxor-asentar 2.2s var(--suave) both; }
.animar .inicio__texto > * { animation: draxor-subir 1.2s var(--suave) both; }
.animar .inicio__texto > :nth-child(1) { animation-delay: 0.15s; }
.animar .inicio__texto > :nth-child(2) { animation-delay: 0.3s; }
.animar .inicio__texto > :nth-child(3) { animation-delay: 0.42s; }
.animar .inicio__texto > :nth-child(4) { animation-delay: 0.52s; }
.animar .inicio__texto > :nth-child(5) { animation-delay: 0.64s; }

/* Pasos y titulares gigantes con la misma curva suave */
.animar .paso.aparecer { transition: opacity 0.9s var(--suave), transform 1.3s var(--suave); transition-delay: var(--retraso, 0s); }
.animar .titular--gigante { transition: scale 0.2s linear; }

/* v10 · Precio DRAXOR "tapado": el gancho para escribir por WhatsApp */
.plano__secreto {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(184, 180, 173, 0.3);
}
.plano__tapado {
  position: relative;
  display: inline-block;
  margin-top: 0.45rem;
  font: 500 clamp(2rem, 4.5vw, 3.25rem)/1 var(--mono);
  letter-spacing: -0.03em;
  padding: 0 0.15em;
  color: transparent;
  user-select: none;
}
.plano__tapado::after {                    /* franja como dato reservado en un plano */
  content: "";
  position: absolute;
  inset: 0.08em 0;
  background: repeating-linear-gradient(135deg, var(--hueso) 0 6px, rgba(244, 242, 238, 0.82) 6px 9px);
}
.plano__gancho { border-top: 0; padding-top: 0; margin-top: 1.25rem; color: var(--concreto); }
.plano__gancho strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--hueso);
  font: 700 clamp(1.25rem, 2.2vw, 1.75rem)/1.15 var(--titulos);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.plano__secreto { position: relative; }

/* ==========================================================================
   v11 · Menú superior, idioma, menú a pantalla completa, redes y modos
   ========================================================================== */
.icono { width: 1.25rem; height: 1.25rem; flex: none; }

/* Barra superior */
.barra { gap: 1.5rem; }
.barra__nav { display: none; }
.barra__acciones { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.barra__whatsapp { display: none; }
.idioma {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--concreto);
}
.idioma a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.2rem; text-decoration: none; color: inherit; }
.idioma a[aria-current="page"] { color: var(--hueso); }
.idioma a:hover { color: var(--hueso); }
.barra[data-tema="claro"] .idioma { color: var(--concreto-texto); }
.barra[data-tema="claro"] .idioma a[aria-current="page"],
.barra[data-tema="claro"] .idioma a:hover { color: var(--negro); }
.barra__menu {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.5rem;
  border: 0;
  background: transparent;
  color: var(--hueso);
  cursor: pointer;
}
.barra[data-tema="claro"] .barra__menu { color: var(--negro); }
.barra__linea {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.45s var(--suave, ease), top 0.45s var(--suave, ease);
}
.barra__linea:nth-of-type(2) { top: calc(50% - 4px); }
.barra__linea:nth-of-type(3) { top: calc(50% + 3px); left: 1.1rem; }
.barra__menu[aria-expanded="true"] .barra__linea:nth-of-type(2) { top: 50%; transform: rotate(45deg); }
.barra__menu[aria-expanded="true"] .barra__linea:nth-of-type(3) { top: 50%; left: 0.6rem; transform: rotate(-45deg); }
.barra__nav a {
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--concreto);
  padding: 0.9rem 0;
  transition: color 0.2s ease;
}
.barra__nav a:hover { color: var(--hueso); }
.barra[data-tema="claro"] .barra__nav a { color: var(--concreto-texto); }
.barra[data-tema="claro"] .barra__nav a:hover { color: var(--negro); }
@media (min-width: 64rem) {
  .barra__nav { display: flex; gap: clamp(1.25rem, 2.5vw, 2.25rem); margin-left: auto; }
  .barra__acciones { margin-left: 1rem; }
  .barra__whatsapp { display: inline-flex; }
}

/* Con el menú abierto la barra siempre va en negro */
.menu-abierto .barra { background: var(--negro); border-bottom-color: rgba(184, 180, 173, 0.18); }
.menu-abierto .barra .logo-oscuro { display: block; opacity: 1; }
.menu-abierto .barra .logo-claro { display: none; }
.menu-abierto .barra .barra__menu, .menu-abierto .barra .idioma a[aria-current="page"] { color: var(--hueso); }
.menu-abierto .barra .barra__nav a, .menu-abierto .barra .idioma { color: var(--concreto); }
.menu-abierto body { overflow: hidden; }
.menu-abierto .flotante { opacity: 0; pointer-events: none; }

/* Menú a pantalla completa */
.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  background: var(--negro);
  color: var(--hueso);
  padding: calc(var(--barra) + env(safe-area-inset-top) + clamp(1.5rem, 6vh, 3rem)) 0 calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--suave, ease);
}
.menu.abierto { clip-path: inset(0 0 0 0); }
.menu[hidden] { display: none; }
.menu__nav { display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; min-height: 100%; }
.menu__lista { display: grid; gap: clamp(0.25rem, 1.2vh, 0.75rem); }
.menu__lista a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.35rem 0;
  font: 700 clamp(2rem, 7vw, 4.5rem)/1.05 var(--titulos);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s ease;
}
.menu__lista a:hover { color: var(--concreto); }
.menu__num { font: 500 0.75rem/1 var(--mono); letter-spacing: 0.14em; color: var(--concreto); transform: translateY(-0.6em); }
.menu__lista a:hover .menu__num { color: var(--naranja); }
.menu__lista li { opacity: 0; transform: translateY(24px); transition: opacity 0.5s ease, transform 0.7s var(--suave, ease); }
.menu.abierto .menu__lista li { opacity: 1; transform: none; }
.menu.abierto .menu__lista li:nth-child(2) { transition-delay: 0.04s; }
.menu.abierto .menu__lista li:nth-child(3) { transition-delay: 0.08s; }
.menu.abierto .menu__lista li:nth-child(4) { transition-delay: 0.12s; }
.menu.abierto .menu__lista li:nth-child(5) { transition-delay: 0.16s; }
.menu.abierto .menu__lista li:nth-child(6) { transition-delay: 0.2s; }
.menu__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(184, 180, 173, 0.3);
}
.menu__red, .menu__correo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  font: 500 0.8125rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hueso);
}
.menu__correo { text-transform: none; letter-spacing: 0; color: var(--concreto); margin-left: auto; }
.menu__red:hover, .menu__correo:hover { color: var(--naranja); }

/* Botón flotante de WhatsApp en celular */
.flotante {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 45;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--naranja);
  color: var(--negro);
  box-shadow: 0 6px 20px rgba(20, 20, 20, 0.35);
  transition: opacity 0.3s ease, transform 0.3s var(--suave, ease);
}
.flotante .icono { width: 1.6rem; height: 1.6rem; }
.flotante:active { transform: scale(0.94); }
@media (min-width: 64rem) { .flotante { display: none; } }

/* Redes en el pie */
.pie__redes { display: flex; gap: 0.5rem; }
.pie__redes a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(184, 180, 173, 0.35);
  border-radius: 50%;
  color: var(--hueso);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.pie__redes a:hover { border-color: var(--hueso); color: var(--naranja); }
[data-red].pendiente { opacity: 0.45; cursor: not-allowed; }

/* Presupuesto: selector de modo */
.modos { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid rgba(184, 180, 173, 0.45); border-radius: 0.9rem; padding: 0.25rem; }
.modo { position: relative; cursor: pointer; }
.modo input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.modo span {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-radius: 0.65rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.modo strong { font: 700 1rem/1.1 var(--titulos); letter-spacing: 0.06em; text-transform: uppercase; }
.modo small { font: 400 0.75rem/1.2 var(--mono); letter-spacing: 0.08em; color: var(--concreto); transition: color 0.3s ease; }
.modo input:checked + span { background: var(--hueso); color: var(--negro); }
.modo input:checked + span small { color: var(--concreto-texto); }
.modo input:focus-visible + span { outline: 2px solid var(--naranja); outline-offset: 2px; }
.plano [data-modo][hidden] { display: none; }
@media (max-width: 23.5rem) { .inicio__linea { white-space: normal; } }
[hidden] { display: none !important; }
/* En la portada la barra lleva un degradado suave para que los enlaces se lean sobre la foto */
.barra--inicio { background: linear-gradient(180deg, rgba(20, 20, 20, 0.7) 0%, rgba(20, 20, 20, 0) 100%); }
.menu-abierto .barra--inicio { background: var(--negro); }

/* ==========================================================================
   v12 · Sitio de varias páginas
   ========================================================================== */
.portada-pagina { min-height: 78vh; min-height: 78svh; }
.portada-pagina .titular--gigante { font-size: clamp(2.25rem, 7vw, 6.5rem); max-width: 16ch; }
.cierre { min-height: 60vh; min-height: 60svh; }
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  font: 500 0.8125rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
  width: fit-content;
}
.enlace-flecha::after { content: "→"; font-family: var(--texto); letter-spacing: 0; transition: transform 0.3s var(--suave, ease); }
.enlace-flecha:hover { border-bottom-color: var(--naranja); }
.enlace-flecha:hover::after { transform: translateX(4px); }
.seccion .boton.aparecer, .seccion .enlace-flecha { align-self: flex-start; }
.barra__nav a[aria-current="page"] { color: var(--hueso); }
.barra[data-tema="claro"] .barra__nav a[aria-current="page"] { color: var(--negro); }
.menu__lista a[aria-current="page"] .menu__num { color: var(--naranja); }
@media (min-width: 64rem) and (max-width: 74rem) { .barra__nav { gap: 1.1rem; } }
/* Primera pantalla: entra al cargar con una animación corta */
.animar .aparecer.al-cargar { transition: none; animation: draxor-subir 1s var(--suave) both; animation-delay: var(--retraso, 0s); }
.animar .obra__foto.aparecer.al-cargar { animation-name: none; clip-path: none; }
/* Aire entre el texto y el botón que va debajo */
.servicio__texto + .boton { margin-top: clamp(2rem, 5vh, 3rem); }
/* Página 404 */
.error404 { text-align: center; }
.error404 .contenedor { display: flex; flex-direction: column; align-items: center; }
.error404__logo { display: block; margin-bottom: clamp(2.5rem, 8vh, 4rem); }
.error404__logo img { width: 220px; height: auto; }
.error404__en { margin: 1rem 0 2.5rem; color: var(--concreto); }
.error404 .enlace-flecha { align-self: center; }
.error404 .titular { margin-bottom: 0; }