/* ==========================================================================
   Aktual Design — estilos comunes y página de inicio
   Dirección: sobria, inmersiva y precisa. Carbón cálido, marfil y el ámbar del LED a 2700 K,
   reservado para la acción principal. Las fotos y videos conservan su color real.

   Sistema de composición (todo sale de estas variables):
   - ancho editorial de 1320 px; las imágenes inmersivas pueden pasarlo a propósito
   - márgenes laterales fluidos de 24 px (teléfono) a 80 px (computadora)
   - espaciado en múltiplos de 8
   - tres composiciones: panorámica, dos columnas y obra vertical (.comp)
   ========================================================================== */

@property --mx { syntax: '<number>'; inherits: true; initial-value: 0.3; }
@property --my { syntax: '<number>'; inherits: true; initial-value: 0.3; }

:root {
  /* Materia */
  --carbon: #1C1712;           /* carbón cálido con fondo de tierra */
  --carbon-hondo: #120F0C;
  --carbon-claro: #2A231C;
  --marfil: #EFE8DC;
  --piedra: #D8CEBF;
  --mineral: #8E8579;
  --texto-claro: #F3EBDF;
  --texto-suave: #DED3C5;
  --tenue: #B3A797;
  --sombra: #221C17;
  --tenue-claro: #5E544A;

  /* Acentos tomados de las obras */
  --ambar: #F2A65A;            /* el LED cálido de Yamashiro y Wall Doble Altura */
  --ambar-rgb: 242 166 90;
  --ambar-boton: #DDA36B;      /* el mismo ámbar, más contenido para los botones: armoniza con las obras */
  --ambar-boton-luz: #E8B27F;
  --terracota: #A9542F;        /* el mural botánico de Rosario */
  --luz: #F4C88C;
  --luz-rgb: 244 200 140;

  /* Nombres heredados que usan obras.css y la ficha de obra */
  --negro: var(--carbon-hondo);
  --cal: var(--marfil);
  --travertino: var(--piedra);
  --taupe: var(--mineral);
  --taupe-texto: var(--tenue-claro);
  --bronce: var(--terracota);
  --cobre: var(--terracota);
  --noche: var(--carbon);
  --claro-sobre-noche: var(--texto-claro);
  --tenue-sobre-noche: var(--tenue);
  --linea-oscura: rgb(243 235 223 / .14);
  --linea-clara: rgb(34 28 23 / .16);

  /* Composición */
  --ancho: 1320px;
  --margen: clamp(24px, 5vw, 80px);
  --e1: 8px;  --e2: 16px; --e3: 24px; --e4: 32px;
  --e5: 48px; --e6: 64px; --e7: 96px; --e8: 128px;
  --hueco: clamp(16px, 3vw, 48px);                 /* entre columnas */
  --hueco-comp: clamp(32px, 6vw, 96px);            /* a cada lado del eje central de una composición */
  --columna: clamp(16px, 2.2vw, 32px);             /* separación de la cuadrícula de 12 columnas */
  --seccion: clamp(64px, 6.5vw, 104px);            /* relleno arriba y abajo de cada estancia */
  --cabeza-seccion: clamp(32px, 4vw, 56px);        /* de la cabecera de sección a su contenido */
  --entre-bloques: clamp(64px, 7vw, 112px);        /* entre composiciones de una misma estancia */
  --cabecera-alto: 96px;
  --estancia: var(--seccion);                      /* nombre heredado */

  /* Superficies: bordes suaves y transparencias sobrias */
  --r-boton: 14px;
  --r-imagen: 18px;
  --r-panel: 22px;
  --vidrio: rgb(28 23 18 / .58);
  --vidrio-claro: rgb(243 235 223 / .06);
  --borde: rgb(243 235 223 / .16);
  --borde-fuerte: rgb(243 235 223 / .34);
  --sombra-suave: 0 24px 64px -32px rgb(0 0 0 / .55);

  /* Movimiento: las mismas curvas en CSS y en js/movimiento.js */
  --facil: cubic-bezier(.22, .61, .36, 1);
  --lento: cubic-bezier(.16, 1, .3, 1);
  --escena: cubic-bezier(.65, 0, .35, 1);
}

/* Instrument Sans (OFL), variable en peso (400–700) y ancho (75–100 %): textos, navegación y botones */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url('../fuentes/instrument-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; src: url('../fuentes/instrument-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Titulares breves: geometría marcada.
   PROVISIONAL: Urbanist (OFL) ocupa el lugar de Ancola, que no está en el proyecto.
   Cuando lleguen los archivos de Ancola con licencia web, se declara aquí su @font-face
   y se pone 'Ancola' al principio de --f-display. Nada más cambia. */
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../fuentes/urbanist-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../fuentes/urbanist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --f-display: 'Urbanist', 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-titulo: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-texto: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-arte: var(--f-titulo);
  --t-track: 0;

  /* Escala tipográfica fluida (rem = 16 px) */
  /* Escala única para todo el recorrido: cada nivel se distingue del siguiente a simple vista */
  --t-portada: max(2.375rem, min(1.25rem + 4.4vw, 5.5rem, 10.5vh));   /* 38–88 px, cede en pantallas bajas */
  --t-seccion: clamp(2.125rem, 1.3rem + 2.6vw, 3.75rem);              /* 34–60 px: título de cada estancia */
  --t-obra: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);                  /* 28–44 px: nombre de obra, camino, cita */
  --t-sub: clamp(1.25rem, 1.05rem + .7vw, 1.75rem);                   /* 20–28 px: subtítulos y preguntas */
  --t-entradilla: clamp(1.0625rem, 1rem + .3vw, 1.25rem);             /* 17–20 px */
  --t-texto: clamp(1rem, .96rem + .18vw, 1.125rem);                   /* 16–18 px */
  --t-meta: .875rem;                                                  /* 14 px: pies de foto y datos breves */
  --t-etiqueta: .75rem;                                               /* 12 px: rótulos de ficha */
  --medida: 60ch;                                                     /* 45–65 caracteres por línea */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--carbon); scroll-padding-top: var(--cabecera-alto); }
/* Sin la espera del doble toque en el teléfono */
a, button, label, input, select, textarea, summary { touch-action: manipulation; }

body {
  margin: 0;
  background: var(--carbon);
  color: var(--texto-claro);
  font-family: var(--f-texto);
  font-weight: 400;
  font-size: var(--t-texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Grano sutil de piedra sobre todo: la superficie nunca es plana */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: url('../imagenes/grano.svg') repeat;
  background-size: 220px;
  opacity: .04;
}

img, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--ambar-boton); color: var(--carbon-hondo); }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 4px; }

.saltar { position: absolute; left: 16px; top: -100px; z-index: 200; padding: 12px 16px; border-radius: var(--r-boton); background: var(--marfil); color: var(--sombra); }
.saltar:focus { top: 16px; }

.oculto-visual {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pendiente {
  display: inline-block;
  padding: .12em .5em;
  border: 1px dashed currentColor;
  font-family: var(--f-texto);
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: none;
  color: #8A5A22;
  background: rgb(200 150 70 / .1);
}
[data-tono="oscuro"] .pendiente { color: #E7AE63; }

/* ==========================================================================
   Composición: contenedor, estancias y cabeceras de sección
   ========================================================================== */

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}
.seccion { padding-block: var(--seccion); }

/* Cuadrícula compartida de 12 columnas (cada composición la declara con --columna de separación):
   todas las estancias se apoyan en los mismos ejes — el borde izquierdo, la columna 7 y el borde derecho */

/* Cabecera de sección: el título a la izquierda (columnas 1–6) y su entrada a la derecha
   (columnas 7–12), apoyadas en la misma línea de base. Ocupa el ancho sin dejar vacíos laterales. */
.seccion-cabeza {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--columna);
  row-gap: var(--e2);
  align-items: end;
  margin: 0 0 var(--cabeza-seccion);
}
.seccion-cabeza > .titulo-seccion { grid-column: 1 / span 6; }
.seccion-cabeza > .entradilla { grid-column: 7 / -1; max-width: 44ch; margin: 0; }
@media (max-width: 899px) {
  .seccion-cabeza > .titulo-seccion, .seccion-cabeza > .entradilla { grid-column: 1 / -1; }
}

/* ==========================================================================
   Tipografía
   ========================================================================== */

/* Etiquetas: la única voz en mayúsculas, pequeña y discreta.
   Distingue obra terminada (fotografía) de propuesta conceptual (render). */
.etiqueta {
  display: inline-block;
  font-family: var(--f-texto);
  font-weight: 600;
  font-size: var(--t-etiqueta);
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tenue);
}
.etiqueta--acento { color: var(--ambar); }
[data-tono="claro"] .etiqueta { color: var(--tenue-claro); }
.etiqueta--propuesta { color: var(--ambar); }
[data-tono="claro"] .etiqueta--propuesta { color: var(--terracota); }

/* Titulares breves: la voz geométrica (--f-display), un solo peso */
.portada-video__titulo, .titulo-seccion, .titulo-sub, .proyecto__nombre {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--texto-claro);
  text-wrap: balance;
}
.titulo-seccion { font-size: var(--t-seccion); line-height: 1.04; }
.titulo-sub { font-size: var(--t-sub); line-height: 1.12; letter-spacing: -.02em; }

.entradilla { max-width: 46ch; font-size: var(--t-entradilla); line-height: 1.55; color: var(--texto-suave); text-wrap: pretty; }
.texto { max-width: var(--medida); line-height: 1.7; color: var(--texto-suave); text-wrap: pretty; }

.paso-form legend { font-family: var(--f-titulo); font-weight: 600; letter-spacing: -.02em; }

/* ==========================================================================
   Movimiento — estados iniciales (si el movimiento falla, nada queda escondido:
   la clase .mov solo existe cuando Motion cargó)
   ========================================================================== */

html.mov [data-imagen]:not(.revelada) { opacity: 0; transform: translateY(24px); }

/* ==========================================================================
   Cabecera: transparente sobre la portada; translúcida al avanzar
   ========================================================================== */

.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  /* Se alinea con el ancho editorial */
  padding: var(--e2) max(var(--margen), calc((100% - var(--ancho)) / 2));
  color: var(--texto-claro);
  background: linear-gradient(rgb(18 15 12 / .5), rgb(18 15 12 / 0)) border-box no-repeat;
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--facil), border-color .5s var(--facil), padding .5s var(--facil), -webkit-backdrop-filter .5s var(--facil), backdrop-filter .5s var(--facil);
}
.cabecera[data-tono="claro"] { color: var(--sombra); background: none; }
.cabecera.con-fondo {
  padding-block: var(--e1);
  background: rgb(28 23 18 / .72);
  border-bottom-color: rgb(243 235 223 / .08);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
}
.cabecera.con-fondo[data-tono="claro"] { background: rgb(239 232 220 / .8); border-bottom-color: var(--linea-clara); }

/* Logotipo original: se muestra entero, sin cambiar su forma ni su color */
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca__logo { width: auto; height: 64px; transition: height .5s var(--facil); }
.cabecera.con-fondo .marca__logo { height: 48px; }
.pie__logo { width: auto; height: 96px; }

.navegacion { display: flex; align-items: center; gap: var(--e4); margin-left: auto; }
.navegacion a {
  position: relative;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: var(--e1);
  white-space: nowrap;
}
.navegacion a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: currentColor;
  opacity: .8;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--lento);
}
.navegacion a:hover::after, .navegacion a:focus-visible::after, .navegacion a[aria-current="page"]::after { transform: scaleX(1); }

@media (min-width: 900px) {
  /* La acción principal: el único bloque de ámbar de la cabecera */
  .navegacion .navegacion__cta {
    padding: 12px 20px;
    border-radius: var(--r-boton);
    background: var(--ambar-boton);
    color: var(--carbon-hondo);
    transition: background-color .4s var(--facil), box-shadow .5s var(--facil), transform .2s var(--facil);
  }
  .navegacion .navegacion__cta::after { display: none; }
  .navegacion .navegacion__cta:hover, .navegacion .navegacion__cta:focus-visible { background: var(--ambar-boton-luz); box-shadow: 0 8px 28px -14px rgb(var(--ambar-rgb) / .7); }
  .navegacion .navegacion__cta:active { transform: scale(.98); }
}
@media (min-width: 900px) and (max-width: 1239px) {
  .navegacion a[href="#estudio"], .navegacion a[href="#proceso"], .navegacion a[href$="index.html#estudio"], .navegacion a[href$="index.html#proceso"] { display: none; }
}

.cabecera__acciones { display: flex; align-items: center; gap: var(--e2); }
.idiomas { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--borde); border-radius: 12px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; }
.idiomas button { min-width: 40px; min-height: 32px; padding: 0 8px; border-radius: 8px; opacity: .6; transition: opacity .3s, background-color .3s; }
.idiomas button[aria-pressed="true"] { opacity: 1; background: rgb(243 235 223 / .14); }
.idiomas button:hover { opacity: 1; }
.cabecera[data-tono="claro"] .idiomas { border-color: var(--linea-clara); }
.cabecera[data-tono="claro"] .idiomas button[aria-pressed="true"] { background: rgb(34 28 23 / .1); }
.menu-boton { display: none; min-height: 44px; padding: 0 16px; border: 1px solid var(--borde); border-radius: 12px; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* ==========================================================================
   Botones: misma forma para todos; el ámbar solo en la acción principal
   ========================================================================== */

.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: var(--r-boton);
  border: 1px solid transparent;
  background: var(--sombra);
  color: var(--marfil);
  font-family: var(--f-texto);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .4s var(--facil), border-color .4s var(--facil), box-shadow .5s var(--facil), color .4s var(--facil), transform .2s var(--facil);
}
.boton:active { transform: scale(.98); }

/* Principal: ámbar del LED */
.boton--ambar { background: var(--ambar-boton); color: var(--carbon-hondo); }
.boton--ambar:hover, .boton--ambar:focus-visible { background: var(--ambar-boton-luz); box-shadow: 0 10px 32px -16px rgb(var(--ambar-rgb) / .7); }

/* Secundario: superficie translúcida, borde fino; al pasar o enfocar, más definición y brillo */
.boton--suave, .boton--linea {
  background: var(--vidrio-claro);
  border-color: var(--borde-fuerte);
  color: var(--texto-claro);
}
.boton--suave:hover, .boton--suave:focus-visible, .boton--linea:hover, .boton--linea:focus-visible {
  background: rgb(243 235 223 / .12);
  border-color: rgb(243 235 223 / .62);
}
.boton--suave:active, .boton--linea:active { background: rgb(243 235 223 / .18); }
/* Sobre imagen: un velo detrás del texto para que se lea en fotogramas claros y oscuros */
.boton--sobre-imagen {
  background: rgb(18 15 12 / .38);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
[data-tono="claro"] .boton--ambar { background: var(--sombra); color: var(--marfil); }
[data-tono="claro"] .boton--suave, [data-tono="claro"] .boton--linea { background: rgb(34 28 23 / .04); border-color: rgb(34 28 23 / .3); color: var(--sombra); }

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--e4); }

.enlace-luz {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
  text-decoration-color: rgb(243 235 223 / .4);
  transition: color .4s var(--facil), text-decoration-color .4s var(--facil);
}
.enlace-luz:hover, .enlace-luz:focus-visible { color: #FFF6EA; text-decoration-color: var(--ambar); }
[data-tono="claro"] .enlace-luz { text-decoration-color: rgb(34 28 23 / .4); }
[data-tono="claro"] .enlace-luz:hover, [data-tono="claro"] .enlace-luz:focus-visible { color: var(--terracota); text-decoration-color: var(--terracota); }

/* ==========================================================================
   Figuras: bordes suaves, sin sombras de tarjeta; la foto nunca se agranda
   por encima de su tamaño real ni se recorta sin un punto focal elegido
   ========================================================================== */

.figura { position: relative; display: block; overflow: hidden; border-radius: var(--r-imagen); background: var(--carbon-claro); }
.figura img { width: 100%; height: auto; }
/* Fotos que llevan a una obra: al pasar o enfocar, un borde de luz tenue (sin mover la foto) */
a.figura { transition: box-shadow .5s var(--facil); }
@media (hover: hover) and (pointer: fine) {
  a.figura:hover { box-shadow: 0 0 0 1px rgb(var(--ambar-rgb) / .4), 0 28px 64px -36px rgb(var(--ambar-rgb) / .55); }
}
a.figura:focus-visible { box-shadow: 0 0 0 1px rgb(var(--ambar-rgb) / .6); }
.pie-foto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 12px; font-size: .875rem; color: var(--tenue); }
figure > .etiqueta { margin-top: 12px; }
/* Pie de foto en voz baja, sin mayúsculas: dice qué es y si es obra terminada o propuesta */
.nota-foto { margin-top: 12px; font-size: var(--t-meta); line-height: 1.45; color: var(--tenue); }
/* Regla común para las obras verticales: centradas en la mitad izquierda (columnas 1–6), con el texto en la 7.
   El pie de foto toma el ancho de la imagen, no el de la columna. */
.estudio__obra > .nota-foto, .ficha__vertical > .nota-foto, .camino__medio > .nota-foto { width: 0; min-width: 100%; }

.lista-fina { margin: 12px 0 0; padding: 0; list-style: none; }
.lista-fina li { padding: 12px 0; border-top: 1px solid var(--linea-oscura); line-height: 1.45; }
.lista-fina li:last-child { border-bottom: 1px solid var(--linea-oscura); }

/* Superficie tipo lime wash (la usa Obras) */
.textura {
  --mx: .3; --my: .3;
  position: relative;
  isolation: isolate;
  background-color: var(--marfil);
  transition: --mx 1.1s var(--facil), --my 1.1s var(--facil);
}
.textura::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url('../imagenes/textura-cal.svg') repeat;
  background-size: 640px;
  mix-blend-mode: multiply;
  opacity: .35;
}
.textura::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle 42vmax at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgb(var(--luz-rgb) / .5), rgb(var(--luz-rgb) / 0) 70%);
  mix-blend-mode: soft-light;
}

/* ==========================================================================
   Composiciones reutilizables (.comp)
   1. Panorámica: el ambiente horizontal completo y, debajo, el texto en columnas
   2. Dos columnas: imagen y texto equilibrados
   3. Vertical: la obra vertical completa junto a un texto breve
   Todas comparten el eje central del contenedor y el mismo hueco entre columnas.
   ========================================================================== */

.comp { scroll-margin-top: var(--cabecera-alto); }
.comp + .comp { margin-top: var(--entre-bloques); }
.comp__medio { margin: 0; min-width: 0; }
.comp__texto { min-width: 0; }
.comp__texto > .etiqueta:first-child + .titulo-seccion,
.comp__texto > .etiqueta:first-child + .titulo-sub { margin-top: var(--e2); }
.comp__texto > .titulo-sub + .entradilla,
.comp__texto > .titulo-seccion + .entradilla,
.comp__bloque > .titulo-sub + .entradilla { margin-top: var(--e2); }
.comp__texto > .entradilla + .etiqueta,
.comp__texto > .entradilla + .texto { margin-top: var(--e4); }
.comp__detalle { margin: 0; }
.comp__detalle .etiqueta { margin-top: 12px; }

/* 1. Panorámica */
.comp--panoramica .comp__medio .figura { aspect-ratio: var(--proporcion, auto); }
.comp--panoramica .comp__texto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--hueco);
  align-items: start;
  margin-top: var(--e5);
}
.comp--panoramica .comp__bloque--lista > .etiqueta { display: block; }

/* 2. Dos columnas */
.comp--columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--hueco-comp);
  align-items: center;
}
.comp--columnas .comp__medio .figura { width: fit-content; max-width: 100%; margin-left: auto; }
.comp--columnas.comp--inverso .comp__medio .figura { margin-left: 0; }
.comp--columnas.comp--inverso .comp__medio .pie-foto { justify-content: flex-start; }
.comp--columnas .comp__medio img { width: auto; max-width: 100%; max-height: min(80svh, 880px); }
.comp--columnas .comp__medio .pie-foto { justify-content: flex-end; }
.comp--columnas .comp__texto { max-width: 34rem; }
.comp--columnas .lista-fina { columns: 2; column-gap: var(--e4); }
.comp--columnas .lista-fina li { break-inside: avoid; }
.comp--columnas .lista-fina li:nth-child(3) { border-bottom: 1px solid var(--linea-oscura); }
.comp--columnas .comp__detalle { width: clamp(136px, 13vw, 184px); margin-top: var(--e5); }

/* 3. Vertical: la obra entera a la altura de la pantalla, sin recorte; el texto a su lado */
.comp--vertical {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--hueco-comp);
  align-items: center;
}
.comp--vertical .comp__medio { justify-self: end; }
.comp--vertical .comp__medio .figura { width: fit-content; max-width: 100%; margin-left: auto; }
.comp--vertical .comp__medio .pie-foto { justify-content: flex-end; text-align: right; }
.comp--vertical.comp--inverso .comp__medio .figura { margin-left: 0; }
.comp--vertical.comp--inverso .comp__medio .pie-foto { justify-content: flex-start; text-align: left; }
.comp--vertical .comp__medio img { width: auto; max-width: 100%; height: min(82svh, 900px); object-fit: contain; }
.comp--vertical .comp__texto { max-width: 34rem; }
.comp--inverso .comp__medio { order: 2; justify-self: start; }
.comp--inverso .comp__texto { order: 1; justify-self: end; }

@media (max-width: 899px) {
  .comp--panoramica .comp__texto { grid-template-columns: 1fr; row-gap: var(--e4); margin-top: var(--e4); }
  .comp--columnas, .comp--vertical { grid-template-columns: 1fr; row-gap: var(--e4); }
  .comp--columnas .comp__medio .figura, .comp--vertical .comp__medio .figura { width: auto; margin: 0; }
  .comp--columnas .comp__medio img, .comp--vertical .comp__medio img { width: 100%; height: auto; max-height: none; }
  .comp--vertical .comp__medio, .comp--inverso .comp__medio { justify-self: stretch; order: 0; }
  .comp--inverso .comp__texto { order: 1; justify-self: stretch; }
  .comp--columnas .comp__medio .pie-foto, .comp--vertical .comp__medio .pie-foto { justify-content: flex-start; text-align: left; }
  .comp--columnas .lista-fina { columns: 1; }
  .comp--columnas .lista-fina li:nth-child(3) { border-bottom: 0; }
  .comp__detalle, .comp--columnas .comp__detalle { width: min(52%, 220px); margin-top: 0; }
  .comp--columnas .comp__detalle { margin-top: var(--e4); }
}

/* ==========================================================================
   Tres caminos
   ========================================================================== */

/* ¿Qué quieres crear?: tres caminos que se entienden antes de tocar nada.
   Cada camino muestra siempre su título y su resumen; al abrirlo aparecen lo que incluye,
   la acción y su obra. Sin JavaScript se leen los tres completos, uno debajo de otro.
   - computadora: la obra del camino abierto, entera, en las columnas 1–6;
     los tres caminos en las columnas 7–12, centrados respecto de la obra
   - teléfono: acordeón; cada camino se despliega con su obra dentro */

.caminos { background: var(--carbon); }

.camino { scroll-margin-top: var(--cabecera-alto); }
.camino + .camino { margin-top: var(--e6); }
.camino__cabeza { position: relative; padding: 20px 0 20px 28px; border-top: 1px solid var(--linea-oscura); }
.camino__titulo { font: inherit; }
.camino__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  width: 100%;
  min-height: 44px;
  font-family: var(--f-display);
  font-size: var(--t-obra);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-align: left;
  color: var(--texto-claro);
  -webkit-tap-highlight-color: transparent;
  transition: color .5s var(--facil);
}
/* Toda la cabecera del camino responde al clic, no solo el título */
.camino__boton::after { content: ''; position: absolute; inset: 0; }
/* El foco se dibuja alrededor de toda la cabecera del camino; donde el navegador no entiende :has(),
   el botón conserva su propio contorno de foco */
@supports selector(:has(*)) {
  .camino__boton:focus-visible { outline: none; }
  .camino__cabeza:has(.camino__boton:focus-visible) { outline: 2px solid var(--ambar); outline-offset: 2px; border-radius: 4px; }
}
.camino__resumen { max-width: 46ch; margin-top: 8px; font-size: var(--t-texto); line-height: 1.55; color: var(--texto-suave); text-wrap: pretty; }
/* La línea de luz vertical: se enciende en el camino abierto */
.camino__cabeza::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 2px;
  border-radius: 2px;
  background: var(--ambar);
  box-shadow: 0 0 14px rgb(var(--ambar-rgb) / .8);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .6s var(--lento);
}

.camino__medio { margin: var(--e3) 0 0; }
/* Ancho definido desde el principio en el marco (proporción en --ar): la imagen reserva su espacio
   antes de cargar y la página no salta al llegar a una sección */
.camino__medio .figura { width: min(100%, calc(64svh * var(--ar, .5625))); }
.camino__medio img { width: 100%; height: auto; }

.camino__interior { padding: 0 0 0 28px; }
.camino__incluye { font-size: var(--t-meta); font-weight: 600; color: var(--ambar); }
/* Lo que incluye: dos columnas cortas, sin cajas */
.camino__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--e4); max-width: 34rem; margin: 10px 0 0; padding: 0; list-style: none; font-size: .975rem; line-height: 1.4; color: var(--texto-claro); }
.camino__lista li { position: relative; padding-left: 16px; }
.camino__lista li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 1px; background: var(--tenue); }
.camino__interior .acciones { margin-top: var(--e4); }

/* Con JavaScript: un camino abierto a la vez; los cerrados conservan título y resumen legibles */
.selector--activo .camino + .camino { margin-top: 0; }
.selector--activo .camino:last-child { border-bottom: 1px solid var(--linea-oscura); }
.selector--activo .camino__cabeza { cursor: pointer; }
.selector--activo .camino__boton { color: var(--texto-suave); }
.selector--activo .camino__cabeza:hover .camino__boton { color: var(--texto-claro); }
.selector--activo .camino.abierto .camino__cabeza { cursor: default; }
.selector--activo .camino.abierto .camino__boton { color: var(--texto-claro); }
.selector--activo .camino.abierto .camino__cabeza::before { transform: scaleY(1); }
/* El detalle se despliega a su altura natural, sin medidas fijas */
.selector--activo .camino__detalle { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--lento); }
.selector--activo .camino.abierto .camino__detalle { grid-template-rows: 1fr; }
.selector--activo .camino__interior { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .3s var(--facil); }
.selector--activo .camino__interior > :first-child { margin-top: 4px; }
.selector--activo .camino__interior > :last-child { margin-bottom: var(--e4); }
.selector--activo .camino.abierto .camino__interior { opacity: 1; transition: opacity .5s var(--facil) .12s; }

@media (min-width: 900px) {
  .selector--activo {
    --alto-escena: min(72svh, 720px);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--columna);
    grid-template-rows: 1fr repeat(6, auto) 1fr;
  }
  .selector--activo .camino { display: contents; }
  .selector--activo .camino__cabeza, .selector--activo .camino__detalle { grid-column: 7 / -1; }
  .selector--activo .camino:nth-child(1) .camino__cabeza { grid-row: 2; }
  .selector--activo .camino:nth-child(1) .camino__detalle { grid-row: 3; }
  .selector--activo .camino:nth-child(2) .camino__cabeza { grid-row: 4; }
  .selector--activo .camino:nth-child(2) .camino__detalle { grid-row: 5; }
  .selector--activo .camino:nth-child(3) .camino__cabeza { grid-row: 6; }
  .selector--activo .camino:nth-child(3) .camino__detalle { grid-row: 7; border-bottom: 1px solid var(--linea-oscura); }
  .selector--activo .camino:last-child { border-bottom: 0; }

  /* El escenario: las tres obras en la misma celda, apoyadas en el eje izquierdo.
     Solo la del camino abierto se ve: entera, a la altura del escenario. */
  .selector--activo .camino__medio {
    grid-column: 1 / span 6;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: center;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(.985);
    transition: opacity .6s var(--facil), transform 1s var(--lento), visibility 0s linear .6s;
  }
  .selector--activo .camino.abierto .camino__medio { opacity: 1; visibility: visible; transform: none; transition: opacity .8s var(--facil) .1s, transform 1.1s var(--lento) .1s, visibility 0s; }
  .selector--activo .camino__medio .figura { width: fit-content; max-width: 100%; }
  .selector--activo .camino__medio img { width: auto; height: var(--alto-escena); max-height: none; }
}

/* Teléfono: acordeón; el camino cerrado muestra título, resumen y un signo para abrirlo */
@media (max-width: 899px) {
  .selector--activo .camino__medio { display: none; }
  .selector--activo .camino.abierto .camino__medio { display: block; margin: 0 0 var(--e3); }
  .selector--activo .camino__medio .figura { margin-inline: auto; }
  html.mov .selector--activo .camino.abierto .camino__medio { animation: caminoLlega .7s var(--lento) both; }
  .selector--activo .camino__boton::before {
    content: '';
    order: 2;
    flex: none;
    width: 14px;
    height: 14px;
    background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
    opacity: .7;
  }
  .selector--activo .camino.abierto .camino__boton::before { opacity: 0; }
  .camino__lista { grid-template-columns: minmax(0, 1fr); }
  .camino__cabeza { padding-left: 20px; }
  .camino__interior { padding-left: 20px; }
}
@keyframes caminoLlega { from { opacity: 0; transform: translateY(12px); } }

@media (prefers-reduced-motion: reduce) {
  .camino__boton, .camino__cabeza::before, .selector--activo .camino__detalle, .selector--activo .camino__interior, .selector--activo .camino__medio { transition: none !important; }
}

/* ==========================================================================
   Obras protagonistas (las pinta js/main.js)
   Ficha en banda: la foto principal y sus detalles comparten la línea de arriba y la de abajo;
   cada foto conserva su proporción real (nada se recorta) y su ancho sale de ella.
   Debajo, el texto sobre la cuadrícula: nombre y acción en las columnas 1–5, ficha en 7–12.
   Ficha vertical (obra sin detalles): la foto en las columnas 1–5 y el texto en 7–12.
   ========================================================================== */

.proyectos { background: linear-gradient(180deg, var(--carbon) 0%, var(--carbon-claro) 45%, var(--carbon-claro) 60%, var(--carbon) 100%); }
.ficha { scroll-margin-top: var(--cabecera-alto); }
.ficha + .ficha { margin-top: var(--entre-bloques); }

/* La banda nunca pasa de la altura cómoda de la pantalla: si lo haría, se estrecha */
.ficha__banda { --alto-max: min(68svh, 660px); margin: 0; max-width: calc(var(--suma) * var(--alto-max) + (var(--fotos) - 1) * var(--columna)); }
.ficha--final .ficha__banda { margin-left: auto; }
.ficha--final .ficha__banda > .nota-foto { text-align: right; }
.ficha__fotos { display: flex; gap: var(--columna); align-items: flex-start; }
.ficha__foto { flex: var(--ar) 1 0; min-width: 0; aspect-ratio: var(--ar); }
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }

.ficha__texto {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--columna);
  row-gap: var(--e3);
  align-items: start;
  margin-top: var(--e5);
}
.ficha__cabeza { grid-column: 1 / span 5; }
.ficha__datos { grid-column: 7 / -1; grid-row: 1 / span 2; margin: 0; }
.ficha__acciones { grid-column: 1 / span 5; margin-top: 0; }
.ficha__nombre { font-family: var(--f-display); font-size: var(--t-obra); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; color: var(--texto-claro); text-wrap: balance; }
.ficha__lugar { margin-top: 10px; font-size: var(--t-meta); color: var(--tenue); }

.proyecto__fila { padding: 14px 0; border-top: 1px solid var(--linea-oscura); }
.proyecto__fila:first-child { padding-top: 0; border-top: 0; }
.proyecto__fila dt { font-weight: 600; font-size: var(--t-etiqueta); letter-spacing: .1em; text-transform: uppercase; color: var(--ambar); }
.proyecto__fila dd { max-width: var(--medida); margin: 6px 0 0; line-height: 1.6; color: var(--texto-suave); }
.proyecto__fila dd .etiqueta { margin-top: 4px; color: var(--tenue); }

/* Vertical: la foto entera a la altura de la sala; el texto apoyado en la columna 7 */
.ficha--vertical { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--columna); align-items: center; }
.ficha__vertical { grid-column: 1 / span 6; justify-self: center; margin: 0; }
.ficha__vertical .figura { width: fit-content; max-width: 100%; }
.ficha__vertical img { width: auto; max-width: 100%; height: min(76svh, 760px); object-fit: contain; }
.ficha--vertical .ficha__texto { grid-column: 7 / -1; display: block; margin: 0; }
.ficha--vertical .ficha__datos { margin-top: var(--e4); }
.ficha--vertical .ficha__acciones { margin-top: var(--e4); }

@media (max-width: 899px) {
  .ficha__texto { grid-template-columns: minmax(0, 1fr); }
  .ficha__cabeza, .ficha__datos, .ficha__acciones { grid-column: 1; grid-row: auto; }
  .ficha__acciones { order: 3; }
  .ficha--vertical { grid-template-columns: minmax(0, 1fr); row-gap: var(--e4); }
  .ficha__vertical, .ficha--vertical .ficha__texto { grid-column: 1; justify-self: stretch; }
  .ficha__vertical .figura { width: auto; }
  .ficha__vertical img { width: 100%; height: auto; }
}
/* Teléfono: la principal a todo el ancho y los detalles en una fila debajo, a la misma altura */
@media (max-width: 599px) {
  .ficha__banda { max-width: none; }
  .ficha__fotos { flex-wrap: wrap; gap: 10px; }
  .ficha__foto--principal { flex-basis: 100%; order: -1; }
  .ficha--final .ficha__banda > .nota-foto { text-align: left; }
}

/* Más obras: filas justificadas; cada foto con su proporción real, todas alineadas por arriba y por abajo */
.galeria-breve { margin-top: var(--entre-bloques); }
.galeria-breve__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--e2) var(--e4); padding-top: var(--e3); border-top: 1px solid var(--linea-oscura); }
/* Franja horizontal: cada obra con presencia y su proporción real; se recorre de lado sin secuestrar el scroll */
.galeria-breve__controles { display: flex; align-items: center; gap: 8px var(--e3); }
.galeria-breve__mover {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--borde-fuerte); border-radius: 50%;
  background: var(--vidrio-claro); color: var(--texto-claro);
  transition: border-color .3s var(--facil), background-color .3s var(--facil), opacity .3s;
  -webkit-tap-highlight-color: transparent;
}
.galeria-breve__mover:hover, .galeria-breve__mover:focus-visible { border-color: rgb(243 235 223 / .62); background: rgb(243 235 223 / .1); }
.galeria-breve__mover:disabled { opacity: .3; cursor: default; }
.galeria-breve__lista {
  display: flex;
  gap: var(--hueco);
  align-items: flex-start;
  margin: var(--e5) calc(-1 * var(--margen)) 0;
  padding: 0 var(--margen) var(--e3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margen);
  scrollbar-width: thin;
  scrollbar-color: rgb(243 235 223 / .22) transparent;
}
.breve { display: block; flex: 0 0 clamp(220px, 21vw, 300px); min-width: 0; scroll-snap-align: start; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.breve .figura { aspect-ratio: var(--ar); }
.breve .figura img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--lento); }
.breve__nombre { display: block; margin-top: 12px; font-family: var(--f-titulo); font-size: 1.125rem; font-weight: 500; line-height: 1.3; }
.breve .etiqueta { margin-top: 4px; }
@media (hover: hover) and (pointer: fine) {
  .breve:hover .figura img { transform: scale(1.03); }
  .breve:hover .breve__nombre { color: var(--ambar); }
}
.breve:active .figura { opacity: .9; }

/* ==========================================================================
   El artista
   ========================================================================== */

.estudio {
  background:
    radial-gradient(ellipse 40% 56% at 30% 50%, rgb(var(--ambar-rgb) / .1), rgb(var(--ambar-rgb) / 0) 70%),
    linear-gradient(180deg, var(--carbon) 0%, var(--carbon-hondo) 50%, var(--carbon) 100%);
}
/* La obra en las columnas 1–5, el texto en 7–12: los mismos ejes que obras, servicios y contacto */
.estudio__rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--columna); align-items: center; }
.estudio__obra { grid-column: 1 / span 6; justify-self: center; margin: 0; }
.estudio__obra .figura { width: fit-content; max-width: 100%; }
.estudio__obra img { width: auto; max-width: 100%; height: min(74svh, 740px); object-fit: contain; }
.estudio__texto { grid-column: 7 / -1; }
.estudio__rol { margin-top: 12px; font-size: var(--t-entradilla); color: var(--texto-suave); }
/* La declaración de la marca: la voz más grande de la estancia después del nombre, con su línea de luz */
.estudio__cita { position: relative; margin: var(--e5) 0 0; padding-left: 24px; }
.estudio__cita::before { content: ''; position: absolute; left: 0; top: .2em; bottom: .2em; width: 2px; border-radius: 2px; background: var(--ambar); box-shadow: 0 0 14px rgb(var(--ambar-rgb) / .7); }
.estudio__cita p { max-width: 22ch; font-family: var(--f-display); font-size: var(--t-obra); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; color: #F0DEC6; text-wrap: balance; }
.estudio .texto { margin-top: var(--e4); }
.estudio__cadena { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); margin: var(--e5) 0 var(--e3); padding: var(--e3) 0 0; border-top: 1px solid var(--linea-oscura); list-style: none; }
.estudio__cadena li { display: flex; flex-direction: column; gap: 4px; font-size: .975rem; line-height: 1.4; }
.estudio__cadena .etiqueta { color: var(--ambar); }
@media (max-width: 899px) {
  .estudio__rejilla { grid-template-columns: minmax(0, 1fr); row-gap: var(--e5); }
  .estudio__obra, .estudio__texto { grid-column: 1; justify-self: stretch; }
  .estudio__obra .figura { width: auto; }
  .estudio__obra img { width: 100%; height: auto; }
}

/* ==========================================================================
   Proceso: los cinco pasos en una fila, unidos por una línea de luz que avanza
   con el recorrido; debajo, tres momentos reales a la misma altura y enteros
   ========================================================================== */

.proceso { background: var(--carbon); }
.etapas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--hueco);
  margin: 0;
  padding: 0;
  list-style: none;
}
.etapas::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 24px;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ambar), rgb(var(--ambar-rgb) / .15));
  transform-origin: left;
}
html.mov .etapas::before { transform: scaleX(var(--avance, 0)); }
.etapa { position: relative; display: flex; flex-direction: column; gap: 12px; }
.etapa__numero {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border: 1px solid rgb(var(--ambar-rgb) / .7);
  border-radius: 50%;
  background: var(--carbon);
  font-weight: 600;
  font-size: .875rem;
  color: var(--ambar);
}
.etapa__titulo { font-family: var(--f-display); font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.etapa p { max-width: 30ch; color: var(--texto-suave); line-height: 1.6; font-size: .975rem; }
.etapa__recibes { font-weight: 600; color: var(--ambar); }

.proceso__imagenes { display: flex; gap: var(--columna); align-items: flex-start; max-width: calc((1.7474 + .5625) * min(62svh, 600px) + var(--columna)); margin-top: var(--e6); }
.proceso__imagen { flex: var(--ar) 1 0; min-width: 0; margin: 0; }
.proceso__imagen .figura { aspect-ratio: var(--ar); }
.proceso__imagen .figura img { width: 100%; height: 100%; object-fit: cover; }
.proceso__imagen figcaption { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; }
.etapa__ref { font-size: .8rem; font-weight: 600; color: var(--ambar); }

@media (max-width: 1099px) and (min-width: 900px) {
  .etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--e5); }
  .etapas::before { display: none; }
}

/* ==========================================================================
   Consulta: el formulario en un panel translúcido sobre el carbón
   ========================================================================== */

.consulta {
  background:
    radial-gradient(ellipse 50% 60% at 78% 40%, rgb(var(--ambar-rgb) / .1), rgb(var(--ambar-rgb) / 0) 70%),
    linear-gradient(180deg, var(--carbon) 0%, var(--carbon-claro) 100%);
}
.consulta__rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--columna);
  row-gap: var(--e5);
  align-items: start;
}
.consulta__lado { grid-column: 1 / span 5; }
.consulta__rejilla > .formulario { grid-column: 7 / -1; }
.consulta__lado .entradilla { margin-top: var(--e3); }
.consulta__directo { display: grid; gap: var(--e3); margin-top: var(--e5); padding: 0; list-style: none; }
.consulta__directo li, .consulta__directo a { display: flex; flex-direction: column; gap: 4px; font-size: 1.0625rem; text-decoration: none; }
.consulta__directo a:hover, .consulta__directo a:focus-visible { color: var(--ambar); }

.panel {
  padding: clamp(24px, 3.4vw, 48px);
  border: 1px solid var(--borde);
  border-radius: var(--r-panel);
  background: var(--vidrio);
  box-shadow: var(--sombra-suave);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.formulario__contexto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: var(--e3); padding: 12px 16px; border: 1px solid rgb(var(--ambar-rgb) / .35); border-radius: var(--r-boton); background: rgb(var(--ambar-rgb) / .08); }
.formulario__contexto[hidden] { display: none; }
.formulario__contexto strong { font-weight: 600; }
.formulario__quitar { margin-left: auto; min-height: 32px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.formulario__progreso { font-weight: 600; font-size: var(--t-etiqueta); letter-spacing: .14em; text-transform: uppercase; color: var(--ambar); }
.paso-form { margin: var(--e2) 0 0; padding: 0; border: 0; min-width: 0; }
.paso-form legend { padding: 0; font-size: var(--t-sub); line-height: 1.2; color: var(--texto-claro); }
.opciones { display: grid; gap: 8px; margin-top: var(--e3); }
.opciones label {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--r-boton);
  background: rgb(243 235 223 / .03);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .4s var(--facil), background-color .4s var(--facil);
}
.opciones label:hover { border-color: var(--borde-fuerte); background: rgb(243 235 223 / .06); }
.opciones label:has(input:checked) { border-color: rgb(var(--ambar-rgb) / .8); background: rgb(var(--ambar-rgb) / .1); }
.opciones label:has(input:focus-visible) { outline: 2px solid var(--ambar); outline-offset: 2px; }
.opciones input { accent-color: var(--ambar); width: 18px; height: 18px; flex: none; }
.campo { display: grid; gap: 8px; margin-top: var(--e3); font-size: .9rem; color: var(--tenue); }
/* Solo los campos de texto: los botones de opción y las casillas conservan su tamaño */
.campo input:not([type="radio"]):not([type="checkbox"]), .campo textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: rgb(18 15 12 / .4);
  font: inherit;
  font-size: 1.0625rem;
  color: var(--texto-claro);
  transition: border-color .3s var(--facil), box-shadow .3s var(--facil);
}
.campo textarea { resize: vertical; }
.campo input:not([type="radio"]):not([type="checkbox"]):hover, .campo textarea:hover { border-color: var(--borde-fuerte); }
.campo input:not([type="radio"]):not([type="checkbox"]):focus, .campo textarea:focus { outline: none; border-color: var(--ambar); box-shadow: 0 0 0 3px rgb(var(--ambar-rgb) / .2); }
.formulario__error { min-height: 1.4em; margin-top: var(--e2); font-size: .92rem; color: #F0A27A; }
.formulario__error.aviso { color: var(--texto-claro); }
.formulario__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.formulario__nota { max-width: 52ch; margin-top: var(--e3); font-size: .875rem; color: var(--tenue); }
/* Consulta guiada: avance, acceso directo, campos opcionales, casillas y resumen */
.formulario__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px var(--e3); }
.formulario__directo { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; color: var(--texto-suave); text-decoration: underline; text-decoration-color: rgb(243 235 223 / .35); text-underline-offset: 6px; transition: color .3s, text-decoration-color .3s; }
.formulario__directo:hover, .formulario__directo:focus-visible { color: var(--texto-claro); text-decoration-color: var(--ambar); }
.formulario__barra { height: 2px; margin: 8px 0 var(--e3); border-radius: 2px; background: rgb(243 235 223 / .1); overflow: hidden; }
.formulario__barra span { display: block; height: 100%; background: var(--ambar); transform: scaleX(.25); transform-origin: left; transition: transform .5s var(--lento); }
.campo__rotulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--texto-suave); }
.campo__opcional { font-size: .78rem; color: var(--tenue); }
.campo__ayuda { font-size: .82rem; color: var(--tenue); }
.casilla { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--texto-suave); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.casilla input { width: 18px; height: 18px; accent-color: var(--ambar); }
.campo input:disabled { opacity: .45; cursor: not-allowed; }
.opciones--fila { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 4px; }
.resumen { margin-top: var(--e4); padding: var(--e3); border: 1px solid var(--borde); border-radius: 16px; background: rgb(18 15 12 / .35); }
.resumen__lista { margin: 12px 0 0; }
.resumen__fila { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--linea-oscura); }
.resumen__fila dt { font-size: .82rem; color: var(--tenue); }
.resumen__fila dd { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.resumen__editar { min-height: 36px; padding: 4px 12px; border-radius: 10px; border: 1px solid var(--borde); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); transition: border-color .3s, background-color .3s, color .3s; }
.resumen__editar:hover, .resumen__editar:focus-visible { border-color: var(--borde-fuerte); background: rgb(243 235 223 / .08); color: var(--texto-claro); }
@media (max-width: 599px) {
  .resumen__fila { grid-template-columns: minmax(0, 1fr) auto; }
  .resumen__fila dt { grid-column: 1; }
  .resumen__fila dd { grid-column: 1; }
  .resumen__editar { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulario { position: relative; }
.formulario__enviar[aria-busy="true"] { opacity: .75; cursor: progress; }
.formulario__hecho { padding: var(--e3) 0 var(--e2); }
.formulario__hecho:focus { outline: none; }
.formulario__hecho-titulo { margin-top: 12px; font-family: var(--f-display); font-size: var(--t-sub); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.formulario__hecho-texto { max-width: 46ch; margin-top: 12px; color: var(--texto-suave); }
.formulario.enviada .formulario__cabeza > .formulario__progreso, .formulario.enviada .formulario__barra, .formulario.enviada .formulario__contexto,
.formulario.enviada .paso-form, .formulario.enviada .formulario__acciones, .formulario.enviada .formulario__nota, .formulario.enviada .formulario__error { display: none !important; }
html.mov .formulario.por-pasos .paso-form.actual { animation: pasoLlega .45s var(--lento) both; }
@keyframes pasoLlega { from { opacity: 0; transform: translateY(8px); } }

.formulario.por-pasos .paso-form { display: none; }
.formulario.por-pasos .paso-form.actual { display: block; }
.formulario.por-pasos .formulario__atras[hidden], .formulario.por-pasos .formulario__siguiente[hidden], .formulario.por-pasos .formulario__enviar[hidden] { display: none; }

/* ==========================================================================
   Pie y acceso fijo en el teléfono
   ========================================================================== */

.pie { background: var(--carbon-hondo); color: var(--texto-claro); }
.pie__rejilla, .pie:not(:has(.pie__rejilla)) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--e4) var(--e6);
  padding-block: var(--e6);
}
.pie:not(:has(.pie__rejilla)) { padding-inline: max(var(--margen), calc((100% - var(--ancho)) / 2)); }
.pie__datos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e2) var(--e5); font-size: .9rem; color: var(--tenue); }
.pie__datos a { color: var(--texto-claro); text-decoration: none; background: linear-gradient(var(--ambar), var(--ambar)) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .6s var(--lento), color .4s; }
.pie__datos a:hover, .pie__datos a:focus-visible { background-size: 100% 1px; color: var(--ambar); }
/* Área táctil de 44 px de alto sin cambiar el aspecto del enlace */
.pie__datos a { position: relative; }
.pie__datos a::before { content: ''; position: absolute; inset: -12px -4px; }
.pie__nota { grid-column: 1 / -1; padding-top: var(--e3); border-top: 1px solid var(--linea-oscura); font-size: .75rem; letter-spacing: .08em; color: var(--mineral); }
.pie__correo { font-family: var(--f-titulo); line-height: 1.2; overflow-wrap: anywhere; }

.barra-accion { display: none; }

/* ==========================================================================
   Teléfono y tableta
   ========================================================================== */

@media (max-width: 899px) {
  :root { --cabecera-alto: 80px; }

  .menu-boton { display: block; }
  .navegacion {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--e2);
    padding: 0 var(--margen);
    background: var(--carbon);
    color: var(--texto-claro);
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s var(--facil), visibility 0s linear .5s;
  }
  .navegacion a { font-family: var(--f-display); font-size: 2rem; font-weight: 600; letter-spacing: -.02em; text-transform: none; line-height: 1.2; }
  .navegacion .navegacion__cta { margin-top: var(--e2); padding: 14px 20px; border-radius: var(--r-boton); background: var(--ambar-boton); color: var(--carbon-hondo); font-family: var(--f-texto); font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
  .navegacion .navegacion__cta::after { display: none; }
  html.menu-abierto { overflow: hidden; }
  html.menu-abierto .navegacion { opacity: 1; visibility: visible; transition-delay: 0s; }
  html.menu-abierto .cabecera { color: var(--texto-claro); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

  .marca__logo { height: 48px; }
  .cabecera.con-fondo .marca__logo { height: 40px; }
  .pie__logo { height: 80px; }


  .proyecto__detalles { gap: 12px; margin-top: var(--e4); }
  .comp--panoramica.proyecto__cuerpo .comp__texto { grid-template-columns: 1fr; }
  .comp--panoramica.proyecto__cuerpo .figura { aspect-ratio: 4 / 3; }

  /* En el teléfono los detalles comparten el ancho, cada uno según su proporción */
  .proyecto__detalle { flex: var(--ar) 1 0; width: auto; min-width: 0; }
  .breve { flex-basis: 62vw; }
  .breve__nombre { font-size: 1rem; }

  .estudio__cadena { grid-template-columns: 1fr; gap: var(--e2); }

  /* Proceso en el teléfono: los pasos en columna con la línea de luz vertical */
  .etapas { grid-template-columns: 1fr; gap: var(--e4); }
  .etapas::before { top: 0; bottom: 0; left: 20px; right: auto; width: 1px; height: auto; background: linear-gradient(var(--ambar), rgb(var(--ambar-rgb) / .15)); transform-origin: top; }
  html.mov .etapas::before { transform: scaleY(var(--avance, 0)); }
  .etapa { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; }
  .etapa__numero { grid-row: span 2; width: 40px; height: 40px; margin: 0; }
  .etapa p { max-width: none; }
  /* Las fotos: el render a todo el ancho y las dos verticales lado a lado */
  .proceso__imagenes { flex-wrap: wrap; row-gap: var(--e4); column-gap: 12px; margin-top: var(--e6); }
  .proceso__imagen:first-child { flex-basis: 100%; }
  /* La obra vertical, a media anchura con su pie al lado: entera y sin dejar un vacío debajo */
  .proceso__imagen:last-child { flex-basis: 100%; display: grid; grid-template-columns: 46% minmax(0, 1fr); column-gap: var(--e2); align-items: end; }
  .proceso__imagen:last-child figcaption { margin: 0; flex-direction: column; gap: 4px; }

  .consulta__rejilla { grid-template-columns: minmax(0, 1fr); }
  .consulta__lado, .consulta__rejilla > .formulario { grid-column: 1; }
  .panel { padding: var(--e3) 20px; margin-inline: -8px; }
  .formulario__acciones .boton { flex: 1 1 auto; }

  .pie__rejilla, .pie:not(:has(.pie__rejilla)) { grid-template-columns: 1fr; padding-bottom: 112px; }
  .pie__datos { flex-direction: column; justify-content: flex-start; gap: 24px; }
  /* EN / ES y Menú a 44 px de alto: cómodos para el pulgar */
  .idiomas { padding: 2px; }
  .idiomas button { min-width: 44px; min-height: 44px; }
  .menu-boton { min-height: 50px; }

  .barra-accion {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 8px var(--margen) calc(8px + env(safe-area-inset-bottom));
    background: rgb(28 23 18 / .78);
    border-top: 1px solid rgb(243 235 223 / .08);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transform: translateY(110%);
    transition: transform .6s var(--lento);
  }
  .barra-accion.visible { transform: none; }
  /* La barra fija de abajo no tapa el campo o enlace que recibe el foco (8 + 48 + 8 px más el borde seguro) */
  html:has(.barra-accion) { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .barra-accion a { display: grid; place-items: center; min-height: 48px; padding: 0 14px; border-radius: var(--r-boton); font-weight: 600; font-size: .6875rem; letter-spacing: .06em; white-space: nowrap; text-transform: uppercase; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .barra-accion a:active { transform: scale(.98); }
  .barra-accion__principal { background: var(--ambar-boton); color: var(--carbon-hondo); }
  .barra-accion__wa { color: var(--texto-claro); border: 1px solid var(--borde-fuerte); background: var(--vidrio-claro); }
}

/* Teléfono: las acciones ocupan todo el ancho, fáciles de tocar con el pulgar */
@media (max-width: 599px) {
  .acciones .boton { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .textura, .boton, .navegacion a::after, .breve .figura img, .barra-accion, .cabecera, .marca__logo { transition: none; }
  .boton:active, .barra-accion a:active { transform: none; }
}