/* ==========================================================================
   Lazza Arquitectura — sistema de diseño
   Fuente de autoridad: DesignLazza.md v3.0 §3 a §9
   Regla: border-radius 0, cero box-shadow, el sistema usa oscuridad
   ========================================================================== */

:root {
  /* Color, §3 */
  --color-bg-primary: #5C4F47;
  --color-bg-secondary: #3F3C39;
  --color-bg-surface: #2B2926;
  --color-bg-deep: #232120;
  --color-bg-light: #F5F2EF;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #D4D4D4;
  --color-text-muted: #9E9590;
  --color-text-dark: #2B2926;
  --color-accent: #BD9A00;
  --color-accent-hover: #A88900;
  --color-error: #E8B4B4;

  /* Líneas, §7. La línea tectónica es el divisor de la marca */
  --line-tectonic: 1px solid rgba(255, 255, 255, .12);
  --line-card: 1px solid rgba(255, 255, 255, .06);
  --line-hairline: 1px solid rgba(255, 255, 255, .14);

  /* Tipografía, §4 */
  --font-display: 'Gruppo', 'Futura PT', system-ui, sans-serif;
  --font-body: 'Jost', 'Futura PT', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Espaciado, §5. Ante la duda entre 32 y 48, el mayor */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout, §6 */
  --grid-margin: clamp(20px, 4vw, 48px);
  --section-y: clamp(64px, 8vw, 104px);
  --max-width-text: 680px;
  --max-width-wide: 1100px;

  /* Movimiento, §8. Casi nada se mueve */
  --transition-base: .25s ease;
  --transition-image: .5s ease;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--color-text-primary); text-decoration: none; }

img, picture, video { display: block; max-width: 100%; }

img { background: var(--color-bg-surface); }

hr { border: none; border-top: var(--line-tectonic); margin: 0; }

button { font: inherit; border-radius: 0; }

:focus-visible {
  outline: 1px solid var(--color-text-secondary);
  outline-offset: 2px;
}

.saltar-al-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  padding: 12px 20px;
  font-size: 13px;
}
.saltar-al-contenido:focus { left: 0; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Tipografía
   Convención §4: títulos de contenido en minúsculas, labels en MAYÚSCULAS
   ESPACIADAS, textos funcionales en sentence case
   -------------------------------------------------------------------------- */

.h1 {
  font: 300 clamp(38px, 5.2vw, 62px)/1.1 var(--font-display);
  letter-spacing: .09em;
  color: var(--color-text-primary);
  margin: 0 0 22px;
  text-wrap: pretty;
}

.h2 {
  font: 300 clamp(28px, 3.4vw, 40px)/1.2 var(--font-display);
  letter-spacing: .12em;
  color: var(--color-text-primary);
  margin: 16px 0 20px;
  text-wrap: pretty;
}

.h2--menor {
  font-size: clamp(26px, 2.8vw, 32px);
  line-height: 1.25;
  letter-spacing: .11em;
}

.h3 {
  font: 400 22px/1.35 var(--font-display);
  letter-spacing: .08em;
  color: var(--color-text-primary);
  margin: 14px 0 16px;
  text-wrap: pretty;
}

.rotulo {
  font: 500 12px/1.6 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0;
}
.rotulo--tenue { color: var(--color-text-muted); }

.texto {
  font: 400 15px/1.75 var(--font-body);
  color: var(--color-text-secondary);
  margin: 0 0 24px;
  max-width: var(--max-width-text);
  text-wrap: pretty;
}
.texto--grande { font-size: 16px; }
.texto:last-child { margin-bottom: 0; }

.texto strong { color: var(--color-text-primary); font-weight: 500; }

.mono {
  font: 400 13px/1.6 var(--font-mono);
  color: var(--color-text-secondary);
  letter-spacing: 0;
}

.nota {
  font: 400 13px/1.7 var(--font-body);
  letter-spacing: .04em;
  color: var(--color-text-muted);
  max-width: var(--max-width-text);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.seccion {
  padding: var(--section-y) var(--grid-margin);
}
.seccion--bg-primary   { background: var(--color-bg-primary); }
.seccion--bg-secondary { background: var(--color-bg-secondary); }
.seccion--bg-surface   { background: var(--color-bg-surface); }

.seccion--estrecha { padding-block: clamp(56px, 7vw, 96px); }
.seccion--amplia   { padding-block: clamp(72px, 9vw, 120px); }

.contenido { max-width: var(--max-width-wide); }
.contenido--texto { max-width: var(--max-width-text); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(28px, 3.5vw, 40px);
}
.grid-partido {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}
.grid-partido--centrado { align-items: center; }

.fila-botones {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 32px);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Botones y enlaces
   Regla §3: máximo un elemento con acento por superficie
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font: 500 12px/1 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 1px solid transparent;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.btn--primario {
  color: var(--color-text-dark);
  background: var(--color-accent);
}
.btn--primario:hover { background: var(--color-accent-hover); }

.btn--secundario {
  color: var(--color-text-primary);
  background: transparent;
  border-color: var(--color-text-muted);
  letter-spacing: .15em;
  padding: 13px 28px;
}
.btn--secundario:hover {
  background: rgba(255, 255, 255, .06);
  border-color: var(--color-text-secondary);
}

.btn--grande { padding: 16px 34px; }

/* Botón con el glifo de WhatsApp delante. El texto manda: el icono solo
   confirma a dónde lleva, por eso va al tamaño de la línea y no más grande.

   La separación es margin y no gap a propósito: en móvil .btn pasa a
   display:block y ahí el gap no existe, así que el glifo quedaba pegado a la
   primera letra. El margin funciona en los dos modos. */
.btn--wa {
  display: inline-flex;
  align-items: center;
}
.btn--wa .wa__icono {
  width: 18px;
  height: 18px;
  margin-right: 12px;
}

.enlace {
  display: inline-block;
  font: 400 14px/1.4 var(--font-body);
  letter-spacing: .06em;
  color: var(--color-text-primary);
  border-bottom: 1px solid rgba(255, 255, 255, .4);
  padding-bottom: 2px;
  transition: border-color var(--transition-base);
}
.enlace:hover { border-bottom-color: var(--color-text-primary); }
.enlace--tenue { font-size: 13px; color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   Encabezado
   -------------------------------------------------------------------------- */

.encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 3vw, 34px) var(--grid-margin) clamp(20px, 3vw, 30px);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  position: relative;
  z-index: 10;
}

/* Sobre hero fotográfico: transparente con scrim propio */
.encabezado--sobre-foto {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding-bottom: clamp(48px, 7vw, 88px);
  background: linear-gradient(to bottom,
    rgba(35, 33, 32, .55) 0%,
    rgba(35, 33, 32, .28) 45%,
    rgba(35, 33, 32, 0) 100%);
  border-bottom: none;
}

.encabezado__marca { display: block; flex-shrink: 0; }
.encabezado__marca img { width: clamp(96px, 8.6vw, 132px); height: auto; background: none; }

/* Sobre el video, la rúbrica puede caer en una zona clara. La palabra
   "arquitectos" es fina y se pierde: esta sombra difusa la sostiene sin que
   se lea como sombra. */
.encabezado--sobre-foto .encabezado__marca img {
  filter: drop-shadow(0 1px 12px rgba(35, 33, 32, .55));
}

.nav {
  display: flex;
  gap: clamp(16px, 2.4vw, 34px);
  align-items: center;
  flex-wrap: wrap;
}

.nav__enlace {
  font: 500 12px/1 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base);
}
.nav__enlace:hover,
.nav__enlace[aria-current="page"] { border-bottom-color: var(--color-accent); }

.nav__cta {
  font: 500 12px/1 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  border: 1px solid rgba(255, 255, 255, .55);
  padding: 11px 22px;
  white-space: nowrap;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.nav__cta:hover {
  background: rgba(255, 255, 255, .06);
  border-color: var(--color-text-secondary);
}

.nav__boton-menu {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, .55);
  color: var(--color-text-primary);
  padding: 10px 16px;
  font: 500 12px/1 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(1080px, 100vh);
  /* svh es la altura de la ventana con las barras del navegador desplegadas.
     Con vh a secas, en móvil el hero mide más que la pantalla y el CTA se va
     abajo del pliegue justo cuando llega el visitante. */
  min-height: min(1080px, 100svh);
  display: flex;
  align-items: flex-end;
  background: var(--color-bg-surface);
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video del hero. Mudo, en bucle, sin controles: es una fotografía que
   respira, no una pieza que se reproduce. */
.hero__video { background: var(--color-bg-surface); }

/* Protección de legibilidad y costura con la sección siguiente.
   Tres capas, de arriba abajo en el orden en que se pintan:

   1. Costura. La última franja del hero se funde hasta el mismo color de la
      sección que sigue, y en el píxel de abajo es exactamente ese color. Sin
      esto el video termina en un canto duro contra el marrón.
   2. Legibilidad. El video pasa por planos con cielo blanco y el titular es
      blanco, así que el oscurecimiento no es opcional. Se detiene antes del
      borde inferior para no ensuciar la costura.
   3. Lateral. Refuerza la esquina donde vive el texto.

   La parte alta de la imagen queda limpia: oscurecer el cuadro entero
   apagaría la obra, que es justo lo que se quiere mostrar. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* 1. Costura, corta: solo lo necesario para que la junta no se vea */
    linear-gradient(to top,
      var(--color-bg-primary) 0,
      rgba(92, 79, 71, .92) 44px,
      rgba(92, 79, 71, .42) 120px,
      rgba(92, 79, 71, 0) 230px),
    /* 2. Legibilidad, en elipse anclada a la esquina del texto y no a lo
       ancho de la pantalla. Un degradado de borde a borde oscurecía la mitad
       del cuadro, incluida la parte de la obra que hay que dejar ver. */
    radial-gradient(
      ellipse clamp(460px, 68vw, 1120px) clamp(430px, 60vh, 660px) at 3% 100%,
      rgba(35, 33, 32, .84) 0%,
      rgba(35, 33, 32, .62) 40%,
      rgba(35, 33, 32, .30) 68%,
      rgba(35, 33, 32, 0) 100%);
}

/* El texto del hero lleva su propia protección, muy difusa. Levantar la
   opacidad del degradado hasta que el subtítulo se leyera sobre el tronco
   iluminado habría apagado media obra; esto separa el texto del fondo sin
   tocar la imagen. No es una sombra decorativa: no debe verse como tal. */
.hero__contenido .h1,
.hero__contenido .texto {
  text-shadow: 0 1px 28px rgba(35, 33, 32, .62), 0 1px 3px rgba(35, 33, 32, .38);
}

/* En el hero el marcador de fotografía se va a la esquina superior derecha:
   centrado chocaría con el titular, que es lo que de verdad hay que leer. */
.hero__media.foto-pendiente {
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: clamp(90px, 13vw, 130px);
}
.hero__media .foto-pendiente__etiqueta { text-align: right; max-width: 46%; }
@media (max-width: 780px) {
  .hero__media.foto-pendiente { justify-content: center; align-items: flex-start; }
  .hero__media .foto-pendiente__etiqueta { text-align: center; max-width: 80%; }
}

.hero__contenido {
  position: relative;
  /* El padding inferior levanta el texto por encima de la franja de costura,
     para que el titular caiga sobre el video y no sobre el color plano. */
  padding: 120px var(--grid-margin) clamp(130px, 17vh, 200px);
  max-width: min(760px, 100%);
  /* Sin esto, el min-width:auto del flex item deja que el botón de CTA, que
     va en nowrap, empuje el bloque unos píxeles fuera de la pantalla. */
  min-width: 0;
}
.hero__contenido .texto { max-width: 560px; margin-bottom: 34px; font-size: clamp(15px, 1.4vw, 17px); }

/* Hero corto para páginas interiores, sin fotografía a sangre */
.hero-interior {
  padding: clamp(72px, 9vw, 120px) var(--grid-margin) clamp(48px, 6vw, 72px);
  background: var(--color-bg-surface);
}
.hero-interior .h1 { font-size: clamp(32px, 4.4vw, 52px); }

/* --------------------------------------------------------------------------
   Placeholder de fotografía
   No es un patrón de diseño: es el marcador de una imagen que falta.
   Se elimina en cuanto exista la fotografía real.
   -------------------------------------------------------------------------- */

.foto-pendiente {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg,
    var(--color-bg-surface) 0 10px, #332F2C 10px 20px);
  transition: filter var(--transition-image);
}
.foto-pendiente--profunda {
  background: repeating-linear-gradient(135deg,
    var(--color-bg-deep) 0 10px, var(--color-bg-surface) 10px 20px);
}
.foto-pendiente__etiqueta {
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: .08em;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 70%;
  padding: 16px;
}
.foto-pendiente--alto { min-height: clamp(320px, 46vw, 620px); }
.foto-pendiente--medio { min-height: clamp(320px, 42vw, 560px); }
.foto-pendiente--bajo { min-height: 230px; }
.foto-pendiente--4-3 { aspect-ratio: 4 / 3; }
.foto-pendiente--3-2 { aspect-ratio: 3 / 2; }

/* --------------------------------------------------------------------------
   Tarjetas de portafolio
   -------------------------------------------------------------------------- */

.tarjeta { display: block; }
.tarjeta:hover .foto-pendiente,
.tarjeta:hover .tarjeta__media { filter: brightness(1.12); }

.tarjeta__media {
  aspect-ratio: 4 / 3;
  width: 100%;
  /* Sin este auto, el atributo height del <img> fija la altura y aspect-ratio
     no llega a aplicarse: la tarjeta sale con el alto completo de la foto. */
  height: auto;
  object-fit: cover;
  /* En fotografía de arquitectura el edificio vive bajo la línea del horizonte.
     Recortar por el centro deja tarjetas de puro cielo. */
  object-position: center 62%;
  filter: brightness(.9);
  transition: filter var(--transition-image);
}

/* Imagen que llena su contenedor. Sustituye al div .foto-pendiente cuando
   llega la fotografía real, sin estilos en línea repartidos por el HTML. */
/* Imagen que llena su contenedor sin deformarse nunca.
   El tope de altura existe porque el archivo trae fotografía vertical: a
   ancho completo, un retrato de 3:4 crece hasta dos mil píxeles y convierte
   una galería en un tobogán. Al topar la altura, object-fit recorta en vez
   de estirar. */
.media-completa {
  width: 100%;
  height: auto;
  max-height: 74vh;
  object-fit: cover;
  object-position: center;
}
.media-completa--cubre {
  width: 100%;
  height: 100%;
  max-height: 74vh;
  object-fit: cover;
}

/* Fotografía vertical dentro de un bloque partido. Conserva el mismo hueco
   4:3 que ocupaba el marcador: la imagen se recorta para llenarlo, nunca se
   deforma ni estira el bloque. El height auto es necesario para que el
   aspect-ratio gane al atributo height del <img>. */
.media-retrato {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* El encuadre baja al 58 %: ahí están el rostro reflejado y la mano */
  object-position: center 74%;
}

.tarjeta__pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}
.tarjeta__nombre {
  font: 400 20px/1.3 var(--font-display);
  letter-spacing: .1em;
  color: var(--color-text-primary);
}
.tarjeta__accion {
  font: 400 13px/1.4 var(--font-body);
  letter-spacing: .06em;
  color: var(--color-text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  padding-bottom: 2px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   La cartela — elemento de firma de la marca, DesignLazza §10.5
   Ficha permitida: solo nombre público y tipología. Nunca cliente,
   ubicación, metros, costo, plazo ni planos.
   -------------------------------------------------------------------------- */

.cartela {
  border-top: var(--line-hairline);
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.cartela__nombre {
  font: 500 12px/1.4 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0;
}
.cartela__tipologia {
  font: 400 13px/1.6 var(--font-body);
  letter-spacing: .04em;
  color: var(--color-text-secondary);
  margin: 6px 0 0;
}
.cartela__folio {
  font: 400 13px/1.4 var(--font-mono);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Línea de premio. Dorado como texto solo sobre --color-bg-surface (5.38:1) */
.linea-premio {
  font: 500 12px/1.6 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Pasos numerados
   -------------------------------------------------------------------------- */

.pasos { list-style: none; margin: 0; padding: 0; }
.pasos > li { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 20px; }
.pasos__numero { font: 400 13px/1 var(--font-mono); color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   Registro de hechos
   -------------------------------------------------------------------------- */

.registro {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 0 clamp(32px, 4vw, 56px);
  max-width: var(--max-width-wide);
}
.registro > li {
  border-top: var(--line-tectonic);
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.registro > li:last-child { border-bottom: var(--line-tectonic); }
.registro__hecho {
  font: 500 12px/1.6 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}
.registro__anio {
  font: 400 13px/1.6 var(--font-mono);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Fichas de premio y bloques con línea tectónica
   -------------------------------------------------------------------------- */

.ficha {
  border-top: var(--line-tectonic);
  padding: 28px 0;
  max-width: var(--max-width-wide);
}
.ficha:last-of-type { border-bottom: var(--line-tectonic); }
.ficha__titulo {
  font: 400 clamp(20px, 2.2vw, 26px)/1.3 var(--font-display);
  letter-spacing: .09em;
  color: var(--color-text-primary);
  margin: 0 0 12px;
}
.ficha__datos {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 20px;
  font-size: 14px;
}
.ficha__datos dt {
  font: 500 11px/1.7 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.ficha__datos dd { margin: 0; color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   Tarjeta de contenido (artículo, bloque destacado)
   -------------------------------------------------------------------------- */

.card {
  background: var(--color-bg-secondary);
  border: var(--line-card);
}
.card--partida {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card__cuerpo { padding: 32px clamp(20px, 2.4vw, 34px); }
.card__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  font: 400 12px/1.6 var(--font-mono);
  color: var(--color-text-muted);
  margin: 0;
}
.card__titulo {
  font: 400 clamp(20px, 2.2vw, 24px)/1.35 var(--font-display);
  letter-spacing: .08em;
  color: var(--color-text-primary);
  margin: 16px 0 14px;
}
.card__texto {
  font: 400 14px/1.7 var(--font-body);
  color: var(--color-text-secondary);
  margin: 0 0 26px;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Formularios — solo borde inferior, nunca caja completa. §7
   -------------------------------------------------------------------------- */

.form { max-width: 560px; }

.campo { margin-bottom: 32px; }

.campo__etiqueta {
  display: block;
  font: 500 12px/1.6 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.campo__ayuda {
  display: block;
  font: 400 13px/1.6 var(--font-body);
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.campo__control {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  border-radius: 0;
  color: var(--color-text-primary);
  font: 400 16px/1.6 var(--font-body);
  padding: 10px 0;
  transition: border-color var(--transition-base);
}
.campo__control:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}
.campo__control::placeholder { color: var(--color-text-muted); }
textarea.campo__control { min-height: 120px; resize: vertical; }

.campo__error {
  display: none;
  font: 400 13px/1.6 var(--font-body);
  color: var(--color-error);
  margin-top: 8px;
}
.campo[data-error="true"] .campo__error { display: block; }
.campo[data-error="true"] .campo__control { border-bottom-color: var(--color-error); }

.casilla {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
  cursor: pointer;
}
.casilla input {
  width: 18px; height: 18px;
  margin: 4px 0 0;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}
.casilla span {
  font: 400 14px/1.6 var(--font-body);
  color: var(--color-text-secondary);
}
.casilla a { border-bottom: 1px solid rgba(255, 255, 255, .4); }

/* --------------------------------------------------------------------------
   Acordeón de preguntas frecuentes
   -------------------------------------------------------------------------- */

.faq { max-width: 820px; border-top: var(--line-tectonic); }
.faq details { border-bottom: var(--line-tectonic); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 40px 22px 0;
  position: relative;
  font: 400 clamp(17px, 1.9vw, 20px)/1.4 var(--font-display);
  letter-spacing: .06em;
  color: var(--color-text-primary);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 22px;
  font: 300 22px/1 var(--font-body);
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}
.faq details[open] summary::after { content: "–"; color: var(--color-text-primary); }
.faq summary:hover { color: var(--color-text-primary); }
.faq__respuesta {
  font: 400 15px/1.75 var(--font-body);
  color: var(--color-text-secondary);
  margin: 0 0 24px;
  max-width: var(--max-width-text);
  padding-right: 40px;
}

/* --------------------------------------------------------------------------
   Migas de pan
   -------------------------------------------------------------------------- */

.migas {
  font: 400 12px/1.6 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 20px;
}
.migas a { color: var(--color-text-muted); border-bottom: 1px solid transparent; }
.migas a:hover { color: var(--color-text-primary); border-bottom-color: var(--color-text-primary); }
.migas span { margin: 0 8px; }

/* --------------------------------------------------------------------------
   Aviso de estado — bloques informativos internos y de bloqueo
   -------------------------------------------------------------------------- */

.aviso {
  border-left: 2px solid var(--color-accent);
  padding: 20px 24px;
  background: rgba(0, 0, 0, .18);
  max-width: var(--max-width-text);
  margin: 0 0 32px;
}
.aviso p { margin: 0; font-size: 14px; line-height: 1.7; }
.aviso p + p { margin-top: 12px; }

/* --------------------------------------------------------------------------
   Texto largo de artículo y documento legal
   -------------------------------------------------------------------------- */

.prosa { max-width: var(--max-width-text); }
.prosa h2 {
  font: 300 clamp(24px, 2.6vw, 30px)/1.3 var(--font-display);
  letter-spacing: .1em;
  color: var(--color-text-primary);
  margin: 48px 0 18px;
}
.prosa h3 {
  font: 400 20px/1.4 var(--font-display);
  letter-spacing: .08em;
  color: var(--color-text-primary);
  margin: 36px 0 14px;
}
.prosa p { font: 400 16px/1.8 var(--font-body); color: var(--color-text-secondary); margin: 0 0 20px; text-wrap: pretty; }
.prosa ul, .prosa ol { margin: 0 0 24px; padding-left: 22px; }
.prosa li { font: 400 16px/1.8 var(--font-body); color: var(--color-text-secondary); margin-bottom: 10px; }
.prosa a { border-bottom: 1px solid rgba(255, 255, 255, .4); }
.prosa strong { color: var(--color-text-primary); font-weight: 500; }
.prosa blockquote {
  margin: 32px 0;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, .2);
  font: 400 18px/1.7 var(--font-body);
  color: var(--color-text-primary);
}
.prosa blockquote cite {
  display: block;
  margin-top: 14px;
  font: 400 13px/1.6 var(--font-body);
  font-style: normal;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */

.pie {
  padding: clamp(44px, 6vw, 64px) var(--grid-margin) 48px;
  background: var(--color-bg-secondary);
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(32px, 5vw, 48px);
  flex-wrap: wrap;
}
/* El pie baja con el encabezado: si se queda en el tamaño anterior, la
   rúbrica de abajo pesa más que la de arriba y el sitio se ve descuadrado. */
.pie__marca img { width: 136px; height: auto; opacity: .85; background: none; }
.pie__columnas { display: flex; gap: clamp(32px, 5vw, 64px); flex-wrap: wrap; }
.pie__columna { display: flex; flex-direction: column; gap: 12px; }
.pie__titulo {
  font: 500 11px/1.4 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pie__enlace {
  font: 400 13px/1.5 var(--font-body);
  color: var(--color-text-secondary);
  transition: color var(--transition-base);
}
.pie__enlace:hover { color: var(--color-text-primary); }

.pie__legal {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 24px;
  margin-top: 8px;
  font: 400 12px/1.7 var(--font-body);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .registro { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav__enlace, .nav__cta { display: none; }
  .nav__boton-menu { display: block; }

  .nav--abierta {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--color-bg-secondary);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding: var(--grid-margin);
  }
  .nav--abierta .nav__enlace,
  .nav--abierta .nav__cta {
    display: block;
    font-size: 15px;
    min-height: 44px;
    line-height: 44px;
  }
  .nav--abierta .nav__cta { line-height: 1; padding: 15px 26px; }
  .nav--abierta .nav__boton-menu {
    position: absolute;
    top: clamp(20px, 3vw, 34px);
    right: var(--grid-margin);
  }
}

@media (max-width: 780px) {
  .grid-partido { grid-template-columns: 1fr; }
  /* La fotografía va antes del texto en móvil, según el mockup aprobado */
  .grid-partido > .grid-partido__media { order: -1; }
  .ficha__datos { grid-template-columns: 1fr; gap: 2px 0; }
  .ficha__datos dd { margin-bottom: 10px; }
}

@media (max-width: 480px) {
  .btn { display: block; width: 100%; }
  .fila-botones { gap: 20px; }
  .hero__contenido { padding-top: 100px; }
  .hero .h1 { font-size: clamp(34px, 9vw, 42px); }
  /* Área táctil mínima. Ojo: .nav__enlace queda fuera a propósito, porque
     debajo de 860px ya está oculto tras el menú y darle display aquí lo
     resucitaría encima del botón. */
  .pie__enlace { min-height: 44px; display: inline-flex; align-items: center; }
  .nav--abierta .nav__enlace { min-height: 44px; }

  /* En .enlace el área táctil se crece con un pseudo-elemento y no con
     min-height: si se estira la caja, el subrayado se despega del texto. */
  .enlace { position: relative; }
  .enlace::after { content: ""; position: absolute; inset: -12px 0; }
}

/* --------------------------------------------------------------------------
   Impresión
   -------------------------------------------------------------------------- */

@media print {
  .encabezado, .pie, .btn, .foto-pendiente { display: none; }
  body { background: #fff; color: #000; }
  .h1, .h2, .h3, .texto, .prosa p { color: #000; }
}

/* --------------------------------------------------------------------------
   Visor de imagen
   Amplía una imagen del portafolio a pantalla completa. Sin librerías y sin
   dependencias: si el JS no carga, las imágenes siguen siendo imágenes y la
   página funciona igual.
   Registro de museo: fondo oscuro, sin radios, sin sombras, movimiento mínimo.
   -------------------------------------------------------------------------- */

/* La imagen ampliable avisa que lo es, sin decorarla */
.ampliable { cursor: zoom-in; }
.ampliable:focus-visible { outline: 1px solid var(--color-text-secondary); outline-offset: 3px; }

.visor {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(35, 33, 32, .97);
  padding: clamp(56px, 8vh, 96px) clamp(16px, 5vw, 88px);
}
.visor[open], .visor.visor--abierto { display: flex; }

.visor__figura {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* contain, nunca cover: aquí la imagen se ve completa y sin deformar */
.visor__img {
  max-width: min(1600px, 92vw);
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--color-bg-surface);
}

.visor__pie {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 32px);
  max-width: min(1600px, 92vw);
}
.visor__leyenda {
  font: 400 13px/1.6 var(--font-body);
  letter-spacing: .04em;
  color: var(--color-text-secondary);
  margin: 0;
}
.visor__contador {
  font: 400 13px/1.6 var(--font-mono);
  color: var(--color-text-muted);
  white-space: nowrap;
  margin: 0;
}

.visor__boton {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 300 22px/1 var(--font-body);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.visor__boton:hover { background: rgba(255, 255, 255, .06); border-color: var(--color-text-secondary); }
.visor__boton[hidden] { display: none; }

.visor__cerrar { top: clamp(16px, 3vh, 28px); right: clamp(16px, 3vw, 28px); }
.visor__anterior { left: clamp(8px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.visor__siguiente { right: clamp(8px, 2vw, 28px); top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
  .visor { padding: 64px 12px 84px; }
  .visor__img { max-height: 66vh; }
  /* En móvil las flechas bajan al pie: a los lados tapan la imagen */
  .visor__anterior, .visor__siguiente { top: auto; bottom: 16px; transform: none; }
  .visor__anterior { left: 12px; }
  .visor__siguiente { right: 12px; }
}

/* --------------------------------------------------------------------------
   Lectura a dos columnas
   El texto corre a la izquierda y la imagen se queda fija a la derecha,
   cambiando conforme avanza la lectura. Es la traducción a pantalla de la
   plana impresa: el texto en columnas y la fotografía sosteniendo la página.
   En móvil se deshace: una sola columna y las imágenes en el flujo, porque
   una imagen fija en una pantalla de teléfono se come la lectura.
   -------------------------------------------------------------------------- */

.lectura {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}

.lectura__bloque + .lectura__bloque { margin-top: clamp(28px, 4vw, 44px); }

.lectura__figura {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.lectura__figura + .lectura__figura { margin-top: clamp(28px, 4vw, 40px); }
.lectura__figura img { width: 100%; height: auto; }
.lectura__pie { margin-top: 12px; }

@media (min-width: 901px) {
  .lectura { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }

  .lectura__panel {
    position: sticky;
    top: clamp(56px, 9vh, 96px);
    height: min(74vh, 660px);
  }

  /* Las tres figuras ocupan el mismo lugar y se turnan */
  .lectura__figura {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s ease, visibility .45s;
    justify-content: center;
  }
  .lectura__figura + .lectura__figura { margin-top: 0; }
  .lectura__figura--activa { opacity: 1; visibility: visible; }

  .lectura__figura img {
    max-height: calc(min(74vh, 660px) - 68px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    align-self: flex-start;
  }
}

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

/* --------------------------------------------------------------------------
   Banda de fondo fijo
   La imagen se queda quieta y la página pasa por encima. No es una animación:
   nada se mueve por sí solo, solo cambia lo que se ve por la ventana.
   El alto es el mismo que tenía el marcador que sustituye, así que la sección
   conserva su medida exacta.
   En móvil y con prefers-reduced-motion el fondo se ancla al scroll normal:
   iOS ignora background-attachment fixed y lo deja en un encuadre roto.
   -------------------------------------------------------------------------- */

.banda-fija {
  min-height: clamp(320px, 42vw, 560px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-color: var(--color-bg-surface);
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .banda-fija { background-attachment: scroll; }
}

/* --------------------------------------------------------------------------
   Contacto directo por WhatsApp
   Añadido el 14-sep-2026 a petición de Elías. Número 55 4615 1819.

   El botón de WhatsApp de fábrica —círculo verde con sombra— contradice dos
   reglas del sistema: border-radius 0 y cero box-shadow. Este se construye con
   el vocabulario de la marca: rectángulo, superficie oscura, línea hairline y
   el acento solo al pasar el cursor, para no gastar el único acento que §3
   permite por superficie.

   z-index 40 a propósito: por debajo del menú móvil (50) y del visor de
   imágenes (200), que lo cubren cuando están abiertos, y por encima del resto.
   -------------------------------------------------------------------------- */

.wa {
  position: fixed;
  right: clamp(16px, 4vw, 32px);
  bottom: clamp(16px, 4vw, 32px);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 52px;
  padding: 0 14px;
  background: var(--color-bg-surface);
  border: var(--line-hairline);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.wa:hover,
.wa:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.wa:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 3px; }

/* inline-block y no block: si por lo que sea el contenedor no llega a ser
   flex —un CSS viejo en caché, por ejemplo— el glifo se queda en la línea del
   texto en vez de saltar a una propia y romper el botón. */
.wa__icono {
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  flex: none;
  fill: currentColor;
}

/* La palabra se despliega al acercarse; en reposo el botón es solo el glifo */
.wa__texto {
  font: 500 12px/1 var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width var(--transition-base), margin-left var(--transition-base), opacity var(--transition-base);
}

.wa:hover .wa__texto,
.wa:focus-visible .wa__texto {
  max-width: 120px;
  margin-left: 12px;
  opacity: 1;
}

/* En táctil no hay hover: el botón se queda en glifo, cuadrado */
@media (hover: none) {
  .wa { padding: 0; width: 52px; }
  .wa__texto { display: none; }
}

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