/* ============================================================
   AR Arquitectura & Diseño — Estilos por sección
   Las 14 secciones en el orden del prototipo (briefing §4.3).
   Valores medidos sobre referencia/diseno-extraido.html.
   ============================================================ */

/* ============================================================
   01 · HERO — proyecto a pantalla completa
   ============================================================ */
.hero {
  position: relative;
  /* 100dvh evita el salto por la barra de Safari en iOS
     (ESPECIFICACION-TECNICA.md §11). */
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--negro);
}

.hero__media {
  position: absolute;
  inset: -14% 0 0 0;
  will-change: transform;
}
.hero__media .slot { height: 100%; }

.hero__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* La franja del medio se subió de 0.05 a ~0.27, y ahora un poco
     más (~0.34) a pedido de Alejandro: el logo centrado necesita
     contraste real contra la foto, no solo el drop-shadow. */
  background: linear-gradient(180deg,
    rgba(13, 13, 13, 0.35) 0%,
    rgba(13, 13, 13, 0.32) 35%,
    rgba(13, 13, 13, 0.36) 65%,
    rgba(13, 13, 13, 0.45) 100%);
}

/* Logo centrado sobre la foto. Este contenedor NO lleva z-index a
   propósito (aunque sea position:absolute): position + z-index juntos
   crean su propia burbuja de apilamiento, y CUALQUIER z-index que
   pusiera un hijo adentro (como el 201 del logo, más abajo) quedaría
   atrapado dentro de esa burbuja en vez de compararse de verdad
   contra #intro — eso fue justo el bug de la vuelta anterior: el
   logo desapareció porque su burbuja entera (nivel 2) perdía contra
   la intro (200), sin importar el z-index de adentro. Sin z-index
   aquí, el logo (con SU PROPIO z-index) sí compite de verdad contra
   la intro en el mismo nivel del documento. El orden en el HTML ya
   basta para que este contenedor se vea encima de la foto y el velo
   (van antes en el documento), así que no hacía falta el z-index de
   todos modos. */
.hero__logo-caja {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-inline: 24px;
  text-align: center;
}
/* z-index: 201, por encima de #intro (z-index: 200, css/base.css) a
   propósito: es el ÚNICO logo del sitio —la intro ya no tiene el
   suyo propio— y vive siempre aquí, por encima del rectángulo negro
   de la intro mientras ese existe. Aparece con su propio aparecer
   (heroLogo() en js/main.js) sin esperar a que la intro termine, y
   cuando el negro se disuelve detrás, el logo ya estaba ahí — nunca
   se crea ni se destruye. position:relative es necesario: z-index no
   hace nada en un elemento sin posicionar. */
.hero__logo {
  position: relative;
  z-index: 201;
  width: clamp(220px, 30vw, 380px);
  height: auto;
  filter: drop-shadow(0 6px 40px rgba(13, 13, 13, 0.45));
}
.hero__tagline {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crema);
}

/* Sin z-index alto a propósito (mismo motivo que .hero__logo-caja):
   se queda tapado por #intro hasta que se disuelve. */
.hero__desliza {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 12px;
  color: var(--crema);
}
.hero__desliza::before {
  content: "";
  width: 1px; height: 36px;
  background: linear-gradient(180deg, var(--crema), rgba(240, 235, 227, 0));
}
.hero__desliza span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero__pie-proyecto {
  position: absolute;
  bottom: 32px;
  right: clamp(24px, 6vw, 80px);
  z-index: 2;
  pointer-events: none;
  font-size: 13.5px;
  color: rgba(240, 235, 227, 0.9);
  max-width: 50%;
  text-align: right;
}

/* ============================================================
   02 · MANIFIESTO — scroll-driven
   ============================================================ */
.manifiesto {
  position: relative;
  height: var(--alto-manifiesto);
  background: var(--crema);
}
.manifiesto__fijo {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.manifiesto__simbolo {
  position: absolute;
  right: -8%;
  top: 50%;
  width: min(48vw, 640px);
  opacity: 0.07;
  transform: translateY(-50%);
  pointer-events: none;
}
.manifiesto__texto-caja {
  position: relative;
  max-width: 980px;
  padding-inline: var(--pad-lateral);
  text-align: center;
}
.manifiesto__etiqueta { justify-content: center; }
.manifiesto__frase {
  margin-top: 26px;
  font-weight: 300;
  font-size: var(--txt-mani);
  line-height: 1.24;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
/* Las palabras arrancan atenuadas y se "encienden" con el scroll.
   Sin JS quedan en su color final: el texto siempre es legible. */
.manifiesto__frase .palabra { transition: color 0.45s var(--ease-suave); }
.manifiesto__frase[data-animado="si"] .palabra { color: var(--mani-apagado); }

/* Degradación: sin scroll bloqueado, es una sección normal. */
@media (prefers-reduced-motion: reduce) {
  .manifiesto { height: auto; }
  .manifiesto__fijo {
    position: static;
    height: auto;
    padding-block: var(--sp-seccion);
  }
  .manifiesto__frase[data-animado="si"] .palabra { color: inherit; }
}

/* ============================================================
   03b · DIVISOR DE CAPÍTULO
   Entre el manifiesto y el comparador. Sin él, se salía de la
   sección que retiene el scroll y el antes/después empezaba de
   golpe, sin que el ojo tuviera un respiro para registrarlo.
   ============================================================ */
.separador {
  background: var(--crema);
  display: flex;
  justify-content: center;
  padding-block: clamp(90px, 15vh, 170px);
}
.separador::before {
  content: "";
  width: 1px;
  height: clamp(64px, 10vh, 120px);
  background: linear-gradient(180deg,
    rgba(212, 201, 184, 0) 0%,
    var(--beige-oscuro) 30%,
    var(--beige-oscuro) 70%,
    rgba(212, 201, 184, 0) 100%);
}

/* ============================================================
   04 · COMPARADOR ANTES / DESPUÉS
   ============================================================ */
.comparador { padding-block: clamp(40px, 6vh, 80px) var(--sp-seccion); }

.comparador__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.comparador__pista { font-size: 14px; color: var(--gris); }

/* Salida en el pico de deseo. El antes → después es el momento en que
   el visitante piensa "quiero eso"; desde ahí había 10 pantallas de
   móvil sin una sola acción. Va como enlace y no como botón: a esta
   altura no hace falta empujar, hace falta abrir una puerta. */
.comparador__pie {
  margin-top: clamp(20px, 3vh, 30px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 32px;
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--gris);
}

/* OJO: nada de min-height junto a aspect-ratio. Si la altura
   mínima supera la que da la proporción, el navegador ENSANCHA
   la caja para mantenerla y el bloque se sale de la pantalla.
   Era el desborde horizontal del sitio a 375 px.
   En móvil se usa 4:3 (más alto = se juzga mejor el antes/después
   en un teléfono) y 16:9 desde tablet, como en el prototipo. */
.cmp {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-xl);
  overflow: hidden;
  touch-action: pan-y;
  cursor: ew-resize;
  /* SIN background a propósito. Antes era var(--negro) y ese negro
     asomaba por el borde suavizado de las capas de encima: se veía un
     hilo oscuro de 1 px bordeando el lado izquierdo y las esquinas.
     Las dos capas traen su propio fondo y cubren el 100 %, así que ese
     negro solo era visible en el hilo. Se probó también
     isolation:isolate y no cambiaba nada, así que no se dejó. */
}
@media (min-width: 768px) {
  .cmp { aspect-ratio: 16 / 9; }
}
.cmp__capa,
.cmp__antes {
  position: absolute;
  inset: 0;
}

/* El recorte sangra 2 px hacia afuera por arriba, abajo e izquierda.
   Solo el borde derecho —el del divisor— va exacto.

   POR QUÉ: la altura de la caja es fraccionaria (viene de un
   aspect-ratio sobre un ancho fluido). Con el recorte a 0, sus bordes
   caían a mitad de píxel, el navegador los suavizaba y por esa rendija
   asomaba la capa oscura de abajo: se veía un hilo de 1 px bordeando
   el lado izquierdo y las esquinas redondeadas.
   Sangrando hacia afuera, esos tres bordes ya no recortan nada y quien
   redondea es el contenedor, en una sola pasada limpia. */
.cmp__antes {
  --cmp-corte: 50%;
  -webkit-clip-path: inset(-2px var(--cmp-corte) -2px -2px);
  clip-path: inset(-2px var(--cmp-corte) -2px -2px);
}
.cmp__etiqueta {
  position: absolute;
  top: 22px;
  pointer-events: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radio-pill);
  z-index: 2;
}
.cmp__etiqueta--antes {
  left: 22px;
  color: var(--crema);
  background: rgba(13, 13, 13, 0.65);
  backdrop-filter: blur(6px);
}
.cmp__etiqueta--despues {
  right: 22px;
  color: var(--negro);
  background: rgba(105, 143, 0, 0.95);
}
.cmp__divisor {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 0;
  pointer-events: none;
  z-index: 3;
}
.cmp__divisor::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -1px;
  width: 2px;
  background: rgba(240, 235, 227, 0.9);
}
.cmp__tirador {
  position: absolute;
  top: 50%; left: 0;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: var(--radio-pill);
  border: none;
  background: var(--verde);
  color: var(--negro);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: ew-resize;
  box-shadow: 0 12px 30px rgba(13, 13, 13, 0.35);
}
.cmp__tirador:focus-visible { outline: 3px solid var(--crema); outline-offset: 2px; }

/* ============================================================
   05 · ILUSTRACIÓN — plano que se dibuja
   ============================================================ */
/* ============================================================
   06 · PROPUESTA DE VALOR — 4 pilares
   ============================================================ */
.valor { padding-block: 0 var(--sp-seccion); }
.valor__titular { margin-top: 18px; max-width: 640px; }
.valor__grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 18px;
}

.tarjeta {
  background: var(--crema-claro);
  border: 1px solid var(--beige);
  border-radius: 26px;
  padding: 32px 28px;
  transition: transform 0.5s var(--ease), box-shadow 0.5s ease-out;
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(13, 13, 13, 0.1); }
/* Mismo lenguaje de línea que .stat__icono en Estadísticas, no uno
   nuevo: sin esto las 4 tarjetas eran indistinguibles entre sí salvo
   por las palabras. */
.tarjeta__icono { width: 34px; height: 34px; }
.tarjeta h3 { margin-top: 18px; font-size: 21px; font-weight: 500; }
.tarjeta p { margin-top: 12px; font-size: 15.5px; color: var(--gris); }

/* ============================================================
   07 · ESTADÍSTICAS
   ============================================================ */
.stats { padding-block: 0 var(--sp-seccion); }
.stats__grid {
  padding-block: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--beige-oscuro);
  border-bottom: 1px solid var(--beige-oscuro);
  display: grid;
  /* Puntos de quiebre explícitos, no auto-fit: con 5 tarjetas, un
     ancho fluido puede caer justo en "4 caben, la 5ª no" y dejarla
     huérfana en su propia fila (mismo problema que tuvo en su
     momento "Cinco pasos", ver .proceso__grid). 2 → 5 evita pasar
     por ese punto intermedio. */
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 24px;
}
@media (min-width: 720px) {
  .stats__grid { grid-template-columns: repeat(5, 1fr); }
}
.stat { display: flex; flex-direction: column; gap: 14px; }
.stat__icono { width: 40px; height: 40px; }
.stat__cifra {
  /* Alto mínimo = el tamaño completo de --txt-cifra a line-height 1,
     igual en las 5 tarjetas. Así, aunque "+6.000 m²" use una letra
     más chica (ver .stat__cifra--compacto) para caber en un renglón,
     su caja reserva el mismo alto que las demás — el pie de abajo
     ("transformados") queda a la misma altura que el resto sin
     depender de que las letras midan exactamente lo mismo. */
  min-height: var(--txt-cifra);
  font-size: var(--txt-cifra);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  display: flex;
  align-items: flex-end;
}
/* "+6.000 m²" tiene casi el doble de caracteres que "+18" o "+80":
   al tamaño normal de --txt-cifra no cabe en un renglón dentro de su
   columna, y "m²" se cae a la línea de abajo. Un tamaño más chico,
   solo para esta cifra, la deja en un renglón igual que a las otras
   (el alto de la caja lo sigue poniendo la regla de arriba). */
.stat__cifra--compacto { font-size: clamp(31px, 3.4vw, 45px); }
.stat__pie { font-size: 14.5px; color: var(--gris); }

/* ============================================================
   08 · SERVICIOS
   ============================================================ */
.servicios { padding-block: 0 var(--sp-seccion); }
.servicios__titular { margin-top: 18px; max-width: 640px; }


/* ============================================================
   09 · PORTAFOLIO
   ============================================================ */
.proyectos { padding-block: var(--sp-seccion-lg); }
.proyectos__titular { margin-top: 18px; max-width: 680px; }

/* Cabecera con la salida a /proyectos a la derecha del titular.
   Es el mismo patrón que ya usan .comparador__cabecera y
   .indice__cabecera: título a la izquierda, dato o acción a la
   derecha, alineados abajo y apilados cuando no caben.

   POR QUÉ AQUÍ Y NO AL FINAL: al final iba un botón negro, el mismo
   peso visual que "Agenda tu diagnóstico". La portada quedaba con dos
   acciones de rango primario y una de ellas sacaba al visitante del
   embudo justo cuando iba a seguir bajando hacia el proceso y el
   formulario. Arriba y como enlace, deja de competir: solo señala que
   hay más obra, que es lo que el escéptico busca al medir la sección. */
.proyectos__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
}
.proyectos__cabecera-texto { flex: 1 1 320px; }

/* Enlace de navegación secundaria. No es un botón a propósito:
   la única acción negra de la portada debe ser el diagnóstico.
   El padding no es decorativo — sostiene el objetivo táctil de
   24 px que pide la WCAG 2.5.8. */
.enlace-mas {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--negro);
  text-decoration: none;
  border-bottom: 1px solid var(--beige-oscuro);
  transition: border-color var(--dur-media) var(--ease-suave);
}
.enlace-mas svg { transition: transform var(--dur-media) var(--ease-suave); }
.enlace-mas:hover { border-bottom-color: var(--negro); }
.enlace-mas:hover svg { transform: translateX(4px); }
.enlace-mas:focus-visible { outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .enlace-mas svg { transition: none; }
  .enlace-mas:hover svg { transform: none; }
}

/* Índice con marquee al pasar el cursor. Solo en punteros finos:
   en táctil el hover no existe y el marquee sería ruido. */
.indice {
  display: block;
  margin-top: clamp(48px, 7vh, 80px);
  border-bottom: 1px solid var(--beige-oscuro);
}
/* En móvil las filas son más compactas: son 6 y no pueden comerse
   la pantalla. El marquee al pasar el cursor sigue siendo de
   escritorio, porque en táctil no hay hover. */
.indice__fila { padding-block: clamp(20px, 3.4vh, 52px); }
.indice__nombre { font-size: clamp(26px, 6vw, 80px); }
.indice__cinta span { font-size: clamp(26px, 6vw, 80px); }
@media (max-width: 860px) {
  .indice__cabecera { flex-direction: column; align-items: flex-start; gap: 4px; }
  .indice__meta { white-space: normal; }
  .indice__marquee { display: none; }
}

.indice__fila {
  position: relative;
  display: block;
  padding-block: clamp(32px, 5vh, 52px);
  border-top: 1px solid var(--beige-oscuro);
  text-decoration: none;
  color: var(--negro);
  overflow: hidden;
}
.indice__fila:focus-visible { outline-offset: -2px; }
.indice__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.indice__nombre {
  font-size: var(--txt-marquee);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  transition: opacity var(--dur-media) ease-out;
}
.indice__meta { font-size: 14px; color: var(--gris); white-space: nowrap; }

.indice__marquee {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity var(--dur-media) ease-out;
  pointer-events: none;
}
.indice__cinta {
  display: flex;
  white-space: nowrap;
  animation: arMarquee 14s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.indice__cinta span {
  font-size: var(--txt-marquee);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--verde);
  padding-right: 64px;
}
.indice__fila:hover .indice__nombre,
.indice__fila:focus-visible .indice__nombre { opacity: 0; }
.indice__fila:hover .indice__marquee,
.indice__fila:focus-visible .indice__marquee { opacity: 1; }
.indice__fila:hover .indice__cinta,
.indice__fila:focus-visible .indice__cinta { animation-play-state: running; }

@keyframes arMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .indice__fila:hover .indice__nombre,
  .indice__fila:focus-visible .indice__nombre { opacity: 1; }
  .indice__fila:hover .indice__marquee,
  .indice__fila:focus-visible .indice__marquee { opacity: 0; }
}

/* ---- Fichas de proyecto ----
   Rediseño: antes eran dos columnas (ficha alta y estrecha | tres
   imágenes apiladas). La ficha medía ~350 px y la columna de medios
   ~700 px, así que quedaban ~350 px de vacío al lado del texto.
   Ahora la ficha es una cabecera horizontal compacta y las imágenes
   viven en una galería deslizable a ancho completo. */
.proyecto { margin-top: clamp(64px, 9vh, 110px); scroll-margin-top: 90px; }

.proyecto__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--beige-oscuro);
}
.proyecto__identidad { display: flex; align-items: baseline; gap: 16px; }
.proyecto__numero {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--verde-texto);
  flex: none;
}
.proyecto__nombre {
  font-size: var(--txt-proyecto);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.proyecto__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.proyecto__tag {
  font-size: 13px;
  color: var(--gris);
  background: var(--crema-claro);
  border: 1px solid var(--beige);
  border-radius: var(--radio-pill);
  padding: 7px 14px;
}

.proyecto__intro {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px 40px;
}
.proyecto__intro .texto-apoyo { max-width: 58ch; flex: 1 1 320px; }
.proyecto__intro .btn { flex: none; }

/* ---- Galería deslizable ----
   scroll-snap nativo: sin librerías, con inercia del sistema en
   táctil y con teclado gratis al ser un contenedor enfocable. */
.galeria-caja { margin-top: 28px; position: relative; }

.galeria {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* El desbordamiento sale del contenedor para que la galería llegue
     al borde de la pantalla en móvil: es lo que da sensación de
     amplitud sin añadir altura. */
  margin-inline: calc(var(--pad-lateral) * -1);
  padding-inline: var(--pad-lateral);
  padding-block: 2px;
  /* Sin esto el primer elemento se ancla en scrollLeft = 48 (el ancho
     del padding), la galería arranca desplazada y la flecha "anterior"
     nunca se deshabilita. scroll-padding mete el área de anclaje hacia
     dentro para que el reposo sea 0. */
  scroll-padding-inline: var(--pad-lateral);
}
.galeria::-webkit-scrollbar { display: none; }
.galeria:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px; }

.galeria__item {
  scroll-snap-align: start;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-lg);
  overflow: hidden;
}
.galeria__item.hueco-medio { border-radius: var(--radio-lg); }

@media (min-width: 768px) {
  .galeria { grid-auto-columns: 46%; gap: 16px; }
}
@media (min-width: 1024px) {
  .galeria { grid-auto-columns: 38%; }
}

/* Flechas ENCIMA de la foto, no en una fila aparte debajo: así la
   vista de reposo es solo la foto, sin botonera, y las flechas
   aparecen a quien puede usarlas (mouse/trackpad) al pasar por
   encima o al llegar por teclado. En táctil se desliza, por eso
   siguen sin mostrarse ahí. */
.galeria__mandos {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: space-between;
  padding-inline: 10px;
  opacity: 0;
  transition: opacity var(--dur-rapida) ease-out;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .galeria__mandos { display: flex; }
  .galeria-caja:hover .galeria__mandos,
  .galeria-caja:focus-within .galeria__mandos { opacity: 1; }
}
.galeria__flecha {
  width: 40px; height: 40px;
  border-radius: var(--radio-pill);
  border: none;
  background: rgba(240, 235, 227, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--negro);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(13, 13, 13, 0.16);
  transition: background var(--dur-rapida) ease-out, transform var(--dur-rapida) ease-out;
}
.galeria__flecha:hover { background: var(--crema); transform: scale(1.06); }
.galeria__flecha[disabled] { opacity: 0.35; cursor: default; }
.galeria__flecha[disabled]:hover { background: rgba(240, 235, 227, 0.92); transform: none; }

.proyecto__plano {
  margin-top: 20px;
  background: var(--crema-claro);
  border: 1px solid var(--beige);
  border-radius: var(--radio-lg);
  padding: 20px;
}
.proyecto__plano[hidden] { display: none; }
.proyecto__plano-caja {
  aspect-ratio: 16 / 8;
  border-radius: 16px;
  overflow: hidden;
}

/* ============================================================
   10 · PROCESO — 4 pasos
   ============================================================ */
.proceso { padding-block: 0 var(--sp-seccion); }
.proceso__titular { margin-top: 18px; max-width: 640px; }
.proceso__grid {
  margin-top: 52px;
  display: grid;
  /* Con 5 pasos, un ancho fluido (auto-fit) puede caer en un reparto
     4+1 según el viewport exacto —el quinto queda solo, huérfano, en
     su propio renglón—. Con columnas fijas por punto de quiebre eso
     no puede pasar: 1 → 3 (reparto 3+2, nunca 4+1) → 5 en un renglón
     desde escritorio. */
  grid-template-columns: 1fr;
  gap: 18px;
  /* Es un <ol> por semántica (el orden de los pasos importa), pero
     la numeración visible es la editorial 01–05, no la del navegador. */
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
@media (min-width: 640px) {
  .proceso__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .proceso__grid { grid-template-columns: repeat(5, 1fr); }
}
.paso { border-top: 2px solid var(--beige-oscuro); padding: 24px 8px 0 0; }
.paso--activo { border-top-color: var(--verde); }
.paso__numero {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--verde-texto);
}
.paso h3 { margin-top: 10px; font-size: 20px; font-weight: 500; }
.paso p { margin-top: 10px; font-size: 15px; color: var(--gris); }

/* ============================================================
   12 · BANNER CTA
   ============================================================ */
.banner { padding-block: 0 var(--sp-seccion); }
.banner__caja {
  position: relative;
  border-radius: var(--radio-2xl);
  overflow: hidden;
  background: var(--negro);
  min-height: min(56vh, 480px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner__fondo { position: absolute; inset: 0; opacity: 0.5; }
/* Mientras no haya foto, el texto del hueco se va arriba para no
   chocar con el titular. Desaparece solo al cargar la imagen real. */
.banner__fondo .slot { align-items: flex-start; }
.banner__velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 13, 13, 0.35), rgba(13, 13, 13, 0.6));
}
.banner__contenido {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(56px, 8vh, 90px) clamp(24px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.banner__titular {
  font-size: var(--txt-h2-cta);
  line-height: 1.12;
  color: var(--crema);
  max-width: 760px;
}
.banner .btn { min-height: 54px; padding: 15px 36px; }

/* ============================================================
   13 · ESTUDIO — equipo
   ============================================================ */
.estudio { padding-block: 0 var(--sp-seccion); }
.estudio__titular { margin-top: 18px; max-width: 640px; }
.estudio__intro { margin-top: 18px; max-width: 62ch; }

/* Una sola foto grande, dividida en dos zonas invisibles (izquierda /
   derecha). Cada .estudio__zona es un <button> de medio ancho: en
   puntero fino la abre estudioPerfiles() al pasar el cursor, en
   táctil al tocar. La tarjeta de perfil se superpone a la foto en
   vez de empujar contenido, así la sección no crece. */
.estudio__foto {
  position: relative;
  margin-top: clamp(40px, 5.5vh, 64px);
  aspect-ratio: 16 / 10;
  border-radius: var(--radio-xl);
  overflow: hidden;
}
.estudio__foto .slot { position: absolute; inset: 0; }

.estudio__zona {
  appearance: none;
  position: absolute;
  inset-block: 0;
  width: 50%;
  margin: 0;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.estudio__zona--izq { left: 0; justify-content: flex-start; }
.estudio__zona--der { right: 0; justify-content: flex-end; }

/* En celular la foto es angosta: un encuadre más alto agranda las
   caras (el corte se queda centrado entre los dos, así que la división
   50/50 sigue cayendo en medio de ambos). */
@media (max-width: 640px) {
  .estudio__foto { aspect-ratio: 4 / 3; }
  .estudio__zona { padding: 12px; }
  .estudio__zona .estudio__zona-nombre { font-size: 12px; padding: 7px 12px; }
}
.estudio__zona-nombre {
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--crema);
  background: rgba(13, 13, 13, 0.55);
  padding: 9px 16px;
  border-radius: var(--radio-pill);
  transition: background var(--dur-media) var(--ease);
}
.estudio__zona:hover .estudio__zona-nombre,
.estudio__zona[aria-expanded="true"] .estudio__zona-nombre {
  background: var(--verde);
  color: var(--negro);
}

.estudio__perfil {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 380px;
  box-shadow: 0 20px 44px rgba(13, 13, 13, 0.22);
}
.estudio__perfil--der { left: auto; }
.estudio__perfil h3 { font-size: 21px; font-weight: 500; }
.estudio__perfil-rol {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
}
.estudio__perfil p:not(.estudio__perfil-rol) {
  margin-top: 10px;
  font-size: 15.5px;
  color: var(--gris);
}

/* ============================================================
   14 · CONTACTO — CTA final + formulario
   ============================================================ */
.contacto { padding-block: 0 clamp(100px, 13vh, 160px); }
.contacto .contenedor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.contacto__intro {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 12px;
}
/* En dos columnas, esta columna (más corta que el formulario) viaja
   con el scroll en vez de dejar un hueco, y el 01-02-03 queda a la
   vista mientras la persona llena los campos. SOLO desde 900 px: el
   límite de un sticky es todo el contenedor, no su fila, así que en
   una sola columna se quedaba pegado ENCIMA del formulario y tapaba
   los campos. Las dos columnas arrancan cerca de 740 px; 900 deja
   margen. */
@media (min-width: 900px) {
  .contacto__intro { position: sticky; top: 84px; }
}
.contacto__intro .btn { min-height: 54px; padding: 15px 34px; }
/* Un solo canal de salida (WhatsApp) además del formulario. Se
   decidió NO poner un botón de llamar: quien llama es AR, no el
   cliente — la promesa de "te llamamos" vive en el formulario, que
   ya pide el teléfono. Un botón de llamar aquí habría contradicho
   ese mensaje. */
.contacto__canales {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Lo que sigue después de enviar el formulario. Ocupa el espacio que
   deja libre la columna corta junto al formulario (mucho más alto) y
   de paso responde, antes de que lo pregunten, "¿y ahora qué pasa?" */
.contacto__pasos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contacto__pasos li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid var(--beige-oscuro);
  font-size: 15px;
  color: var(--gris);
}
.contacto__pasos li:first-child { border-top: none; padding-top: 0; }
.contacto__pasos-numero {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--verde-texto);
}
.contacto__nota { font-size: 13.5px; color: var(--gris); }

.contacto__caja {
  background: var(--blanco);
  border: 1px solid var(--beige);
  border-radius: var(--radio-lg);
  padding: clamp(28px, 3.5vw, 44px);
}

/* ---- Formulario ---- */
.form { display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo > label { font-size: 14px; font-weight: 500; }
.campo input,
.campo select,
.campo textarea {
  min-height: 50px;
  padding: 13px 18px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--beige);
  background: var(--crema-claro);
  font-size: 16px;          /* 16px evita el zoom automático en iOS */
  color: var(--negro);
  width: 100%;
}
.campo select { appearance: none; }
.campo textarea { resize: vertical; min-height: 110px; }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 1px;
  border-color: var(--verde);
}
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: var(--rojo-error); }

.campo__error {
  font-size: 14px;
  color: var(--rojo-error);
  font-weight: 500;
}
.campo__error[hidden] { display: none; }

.campo--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}
.campo--check input {
  /* 24x24 es el mínimo de WCAG 2.2 (2.5.8, nivel AA). Estaba en 22. */
  width: 24px; height: 24px;
  min-height: 24px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--verde);
  padding: 0;
}
.campo--check label { font-size: 14px; font-weight: 400; color: var(--gris); line-height: 1.5; }
.campo--check a { color: var(--verde-texto); }

.campo--preferencia { border: 0; padding: 0; margin: 0; }
.campo--preferencia legend { padding: 0; font-size: 14px; font-weight: 500; }
.campo--preferencia__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.campo--preferencia label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 400;
  color: var(--gris);
}
.campo--preferencia input[type="radio"] {
  /* 24x24: mismo mínimo de WCAG 2.2 (2.5.8) que ya usa .campo--check. */
  width: 24px; height: 24px;
  min-height: 0;
  flex: none;
  accent-color: var(--verde);
}

/* Honeypot: fuera de pantalla, nunca display:none (§4.5). */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

.form__enviar { min-height: 54px; padding: 15px 32px; }
.form__enviar[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.form__estado { font-size: 14.5px; color: var(--gris); }
.form__estado:empty { display: none; }

.form__exito {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 40px 12px;
}
.form__exito[hidden] { display: none; }
.form__exito-icono {
  width: 56px; height: 56px;
  border-radius: var(--radio-pill);
  background: var(--verde);
  display: flex;
  align-items: center;
  justify-content: center;
}
.form__exito h3 { font-size: 24px; font-weight: 400; }
.form__exito p { font-size: 15.5px; color: var(--gris); max-width: 340px; }

/* ============================================================
   09b · REJILLA DE PROYECTOS  ·  /proyectos.html
   ============================================================ */
.proyectos-todos { padding-block: clamp(120px, 18vh, 200px) var(--sp-seccion); }
.proyectos-todos__entrada { margin-top: 18px; max-width: 62ch; }

.rejilla-proyectos {
  margin-top: clamp(48px, 7vh, 72px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 3vw, 40px);
}

.tarjeta-proyecto { display: flex; flex-direction: column; gap: 18px; }
/* La galería reutiliza .galeria-caja/.galeria tal cual (ver "Galería
   deslizable" más arriba), pero ahí el componente se pensó para el
   ancho completo de una página, no para una tarjeta angosta dentro de
   una rejilla de varias columnas: sin este ajuste, sus puntos de
   quiebre propios (46%/38% del contenedor) dejarían ver 2-3 fotos
   diminutas en vez de una grande. margin-top en 0 porque aquí la
   galería es el primer elemento de la tarjeta, no algo que sigue a un
   título. */
.tarjeta-proyecto .galeria-caja { margin-top: 0; }
.tarjeta-proyecto .galeria {
  grid-auto-columns: 86%;
  /* .galeria trae un sangrado pensado para llegar al borde de la
     pantalla en una página completa (ver "Galería deslizable" más
     arriba). Aquí la tarjeta es angosta y comparte fila con otras:
     ese mismo sangrado se salía de su columna y se montaba sobre la
     tarjeta vecina. Contenida a los bordes de la propia tarjeta. */
  margin-inline: 0;
  padding-inline: 0;
  scroll-padding-inline: 0;
}
.tarjeta-proyecto__cuerpo { display: flex; flex-direction: column; gap: 6px; }
.tarjeta-proyecto__nombre {
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 400;
  letter-spacing: -0.01em;
}
/* Si el proyecto tiene logo propio (HabitAR 55, Habitat 100), el logo
   reemplaza visualmente al nombre en texto — no tiene sentido decir
   "HabitAR 55" y mostrar su isotipo debajo. El <h2> se queda en el
   DOM, oculto solo para la vista: sigue siendo el nombre accesible
   de la tarjeta para lectores de pantalla y buscadores (regla 6). */
.tarjeta-proyecto:has(.tarjeta-proyecto__logo) .tarjeta-proyecto__nombre {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Caja fija: ningún logo puede verse más grande que otro, sin
   importar sus proporciones reales (el de HabitAR 55 es un
   wordmark ancho; el de Habitat 100, un isotipo casi cuadrado). */
.tarjeta-proyecto__logo {
  display: block;
  height: 44px;
  width: 160px;
  object-fit: contain;
  object-position: left center;
  margin-block: 2px 4px;
}
.tarjeta-proyecto__meta { font-size: 14px; color: var(--gris); }
.tarjeta-proyecto__resumen { margin-top: 8px; font-size: 15.5px; color: var(--gris); }

/* Un proyecto en trámite se marca. No se promete fecha: el briefing
   avisa de no publicar claims que no se puedan sustentar (regla 18). */
.etiqueta-estado {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Texto en negro, no en verde: sobre el fondo verde al 12 % el
     verde de marca daba 4,11:1 y a 11,5 px hace falta 4,5:1.
     En negro da 14,5:1 y el punto verde mantiene la identidad. */
  color: var(--negro);
  background: rgba(105, 143, 0, 0.16);
  border-radius: var(--radio-pill);
  padding: 4px 12px 4px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.etiqueta-estado::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--verde);
  flex: none;
}

/* Cierre de /proyectos.html: frase + botón verde de conversión.
   La portada ya NO usa este bloque; su salida vive en la cabecera. */
.proyectos__mas {
  margin-top: clamp(56px, 8vh, 90px);
  padding-top: clamp(32px, 4vh, 48px);
  border-top: 1px solid var(--beige-oscuro);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
}
.proyectos__mas-texto {
  font-size: 16.5px;
  color: var(--gris);
  max-width: 46ch;
}

/* ============================================================
   08b · ALCANCE DE SERVICIOS
   ============================================================ */
.servicios__entrada { margin-top: 18px; max-width: 60ch; }

/* ------------------------------------------------------------
   ALCANCE — el catálogo, resuelto en tipografía y no en cajas.

   Sustituye a la tarjeta negra + dos columnas con viñetas verdes.
   Aquello fallaba por tres razones, y ninguna era de gusto:

   1 · Metía un tercer lenguaje visual. La página se explica con
       secciones a sangre, filos de 1 px y tipografía grande y ligera.
       Aquella tarjeta negra redondeada venía de otro sitio.
   2 · Repetía el verde de marca once veces en una pantalla. El verde
       es el color de la acción —WhatsApp, agendar—. Gastado en
       viñetas deja de significar "aquí se hace clic".
   3 · "Lo que más hacemos" era una afirmación de frecuencia sin
       respaldo (regla 18) y encima cerraba puertas. El ORDEN ya dice
       dónde está el foco sin necesidad de declararlo.

   Ahora son dos hileras separadas por un filo: rótulo a la izquierda,
   alcance a la derecha. Añadir un servicio es añadir una línea; la
   caja no cambia de forma ni deja huecos como los de antes.
   ------------------------------------------------------------ */
.alcance { margin-top: clamp(44px, 6vh, 72px); }

.alcance__grupo {
  display: grid;
  gap: 14px;
  padding-block: clamp(30px, 4.5vh, 52px);
  border-top: 1px solid var(--beige-oscuro);
}
.alcance__grupo:last-child { border-bottom: 1px solid var(--beige-oscuro); }

@media (min-width: 720px) {
  .alcance__grupo {
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 40px;
  }
  /* Baja el rótulo hasta la altura de mayúscula de la primera línea
     de la lista, que es mucho más grande. Alineados por la caja se
     veían desfasados. */
  .alcance__cab { padding-top: 8px; }
}

/* Mismo tratamiento que .etiqueta pero SIN el punto verde: aquí se
   repetiría dos veces más y el acento se gasta con cada uso. */
.alcance__rotulo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
}

.alcance__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vh, 16px);
}

/* En pantallas anchas la lista pasa a dos columnas. En una sola, el
   texto ocupaba media pantalla y dejaba un rectángulo vacío a la
   derecha: eso no se lee como aire, se lee como sección sin terminar.
   De paso la sección mide casi la mitad de alto. */
@media (min-width: 1000px) {
  /* Columnas de texto (multicol), NO rejilla. Con rejilla las filas se
     alinean entre columnas: en cuanto un trámite largo ocupaba dos
     líneas, abría un hueco a su derecha. Multicol deja fluir cada
     columna a su aire y el hueco desaparece. */
  .alcance__lista {
    display: block;
    columns: 2;
    column-gap: clamp(32px, 4vw, 64px);
  }
  .alcance__lista li {
    break-inside: avoid;
    margin-bottom: clamp(14px, 1.8vh, 20px);
  }
  .alcance__lista li:last-child { margin-bottom: 0; }
  /* Impide que el reparto en columnas separe un par relacionado
     —estructura metálica y cerramientos son los dos metalurgia—.
     Si el navegador lo ignora, la lista sigue siendo correcta. */
  .alcance__lista li.alcance__juntos { break-after: avoid; }
}
.alcance__lista li {
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
/* La coletilla vive en la columna del rótulo, no en la lista: no es
   un servicio más, es una salvedad sobre TODO el grupo. De paso llena
   la columna izquierda, que debajo del rótulo quedaba vacía. */
.alcance__cab { align-self: start; }
.alcance__resto {
  margin-top: 12px;
  max-width: 26ch;
  font-size: clamp(14px, 1.2vw, 15.5px);
  font-style: italic;
  line-height: 1.45;
  color: var(--gris);
}

.alcance__cta { margin-top: clamp(26px, 3.5vh, 38px); }

/* La puerta abierta. Contesta en una línea la pregunta que deja toda
   lista —"¿y si lo mío no está?"—, para quien sigue explorando o no
   encontró lo suyo. */
.alcance__puerta {
  margin-top: 14px;
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--gris);
  max-width: 58ch;
}
.alcance__puerta a {
  color: var(--negro);
  text-decoration: none;
  border-bottom: 1px solid var(--beige-oscuro);
  transition: border-color var(--dur-media) var(--ease-suave);
}
.alcance__puerta a:hover { border-bottom-color: var(--negro); }

/* ============================================================
   09 · MOSAICO DE PROYECTOS
   Sustituye al índice de texto + las dos fichas al detalle. Eran
   tres tratamientos del mismo contenido, uno detrás de otro.
   Ahora hay uno solo: tres losetas, la primera manda.
   ============================================================ */
.mosaico {
  margin-top: clamp(40px, 6vh, 64px);
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
}
@media (min-width: 900px) {
  .mosaico { grid-template-columns: 1.6fr 1fr; align-items: stretch; }
}
.mosaico__columna {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-rows: 1fr 1fr;
}

.loseta {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--negro);
  border-radius: var(--radio-lg);
  overflow: hidden;
  isolation: isolate;
}
.loseta__foto {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.loseta--grande .loseta__foto { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .loseta__foto { aspect-ratio: auto; height: 100%; min-height: 220px; }
  .loseta--grande .loseta__foto { min-height: 520px; }
}
.loseta__foto img { transition: transform 0.7s var(--ease); }

/* Al pasar el cursor, el nombre del proyecto RECORRE la loseta.
   Sustituye a la miniatura flotante, que enseñaba la misma foto que ya
   estaba debajo: ocupaba pantalla sin añadir información.
   El velo no es decorativo: garantiza que el texto crema se lea sobre
   cualquier foto, clara u oscura. */
.loseta__marquee {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-media) var(--ease-suave);
}
.loseta__marquee::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.45);
}
.loseta__cinta {
  position: relative;
  display: flex;
  white-space: nowrap;
  animation: arMarquee 18s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.loseta__cinta span {
  font-size: clamp(34px, 5.5vw, 84px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--crema);
  padding-right: 56px;
}
.loseta:hover .loseta__marquee,
.loseta:focus-visible .loseta__marquee { opacity: 1; }
.loseta:hover .loseta__cinta,
.loseta:focus-visible .loseta__cinta { animation-play-state: running; }

/* En táctil no hay cursor que pasar: la cinta no aportaría nada. */
@media (hover: none) {
  .loseta__marquee { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .loseta__cinta { animation: none; }
}
.loseta:hover .loseta__foto img { transform: scale(1.04); }

/* El pie se apoya sobre la foto con un degradado, no en una barra
   aparte: así la loseta se lee como una sola pieza. */
.loseta__pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(20px, 2.4vw, 32px);
  background: linear-gradient(180deg, rgba(13, 13, 13, 0) 0%, rgba(13, 13, 13, 0.72) 70%);
  color: var(--crema);
}
.loseta__nombre {
  font-size: clamp(21px, 2.2vw, 32px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.loseta--grande .loseta__nombre { font-size: clamp(26px, 3vw, 44px); }
.loseta__tipo {
  font-size: 13.5px;
  color: rgba(240, 235, 227, 0.86);
}
.loseta:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }

/* ============================================================
   VARIANTES · el visitante elige el acabado
   ------------------------------------------------------------
   Radios nativos + CSS, cero JavaScript: funciona con teclado, con
   lector de pantalla y con el script apagado. El radio marcado
   decide qué lámina se ve, con el selector :checked ~ .
   ============================================================ */
.variantes { padding-block: 0 var(--sp-seccion); }

.variantes__visor {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;              /* sin esto un fieldset no se deja encoger */
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}
/* Desde tablet: imagen a la izquierda, TEXTO Y MANDOS a la derecha.
   Antes el texto iba arriba y la columna derecha solo llevaba botones:
   la seccion medía más de una pantalla y la mitad derecha quedaba
   vacía. Junto todo, se abarca de un vistazo. */
@media (min-width: 860px) {
  .variantes__visor { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
}

.variantes__radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.variantes__laminas {
  position: relative;
  display: grid;
  border-radius: var(--radio-xl);
  overflow: hidden;
  background: var(--negro);
  aspect-ratio: 4 / 5;       /* la proporción real de los renders */
}
.variantes__lamina {
  grid-area: 1 / 1;          /* apiladas: sin salto de alto al cambiar */
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s var(--ease-suave);
}
/* Por defecto la primera: si :has() faltara, se ve una y no ninguna. */
.variantes__laminas .variantes__lamina:first-child { opacity: 1; }
.variantes__visor:has(.variantes__radio:checked) .variantes__lamina { opacity: 0; }
.variantes__visor:has(#v-madera:checked)   #lam-madera,
.variantes__visor:has(#v-negro:checked)    #lam-negro,
.variantes__visor:has(#v-ladrillo:checked) #lam-ladrillo { opacity: 1; }

.variantes__panel { min-width: 0; }
.variantes__titular { margin-top: 18px; max-width: 12ch; }
.variantes__entrada { margin-top: 18px; max-width: 46ch; }

/* Los mandos son hileras compactas: miniatura pequeña y nombre al lado.
   Apiladas en tarjetas grandes ocupaban 900 px de alto ellas solas. */
.variantes__mandos {
  margin-top: clamp(24px, 3vh, 34px);
  display: grid;
  gap: 8px;
}
.variantes__boton {
  cursor: pointer;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--beige-oscuro);
  border-radius: 999px;
  transition: border-color var(--dur-media) var(--ease-suave),
              background-color var(--dur-media) var(--ease-suave);
}
.variantes__boton img {
  width: 52px; height: 52px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.variantes__boton span { font-size: 15px; font-weight: 500; color: var(--gris); }
.variantes__boton:hover { border-color: var(--negro); }

.variantes__radio:checked + .variantes__boton {
  background: var(--negro);
  border-color: var(--negro);
}
.variantes__radio:checked + .variantes__boton span { color: var(--crema); }
.variantes__radio:focus-visible + .variantes__boton {
  outline: 3px solid var(--verde);
  outline-offset: 3px;
}

.variantes__pie {
  margin-top: 18px;
  font-size: 14px;
  color: var(--gris);
}

@media (prefers-reduced-motion: reduce) {
  .variantes__lamina { transition: none; }
}

/* ============================================================
   CERTEZAS · el miedo, dicho en voz alta
   Filos y tipografía, como el resto: sin tarjetas ni cajas. La duda
   en negro y la respuesta en gris, para que el ojo lea primero la
   pregunta —que es la que engancha— y después el mecanismo.
   ============================================================ */
.certezas { padding-block: 0 var(--sp-seccion); }
.certezas__titular { margin-top: 18px; max-width: 620px; }

.certezas__lista {
  margin: clamp(36px, 5vh, 56px) 0 0;
  display: grid;
  gap: 0;
}
.certeza {
  display: grid;
  gap: 10px 40px;
  padding-block: clamp(24px, 3.5vh, 38px);
  border-top: 1px solid var(--beige-oscuro);
}
.certeza:last-child { border-bottom: 1px solid var(--beige-oscuro); }
@media (min-width: 820px) {
  .certeza { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); align-items: start; }
}
.certeza__duda {
  font-size: clamp(18px, 1.8vw, 23px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.certeza__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.certeza__boton:focus-visible { outline: 2px solid var(--verde); outline-offset: 6px; }
.certeza__icono {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--gris);
  transition: transform var(--dur-media) var(--ease);
}
.certeza__boton[aria-expanded="true"] .certeza__icono {
  transform: rotate(180deg);
  color: var(--verde-texto);
}
.certeza__respuesta {
  margin: 14px 0 0;
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--gris);
  line-height: 1.6;
  text-wrap: pretty;
}
@media (min-width: 820px) {
  /* En dos columnas la respuesta vive a la derecha, no debajo de la
     pregunta: ese margen de arriba era para el apilado en móvil. */
  .certeza__respuesta { margin-top: 0; }
}

/* Cada servicio de la lista enlaza a su explicación en servicios.html.
   Se ve igual que antes (mismo tamaño y color); el subrayado solo
   aparece al pasar o enfocar, para no convertir la lista en una
   pared de enlaces. */
.alcance__lista a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-media) var(--ease);
}
.alcance__lista a:hover,
.alcance__lista a:focus-visible { background-size: 100% 1px; color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .alcance__lista a { transition: none; }
}