/* ============================================================
   pirela.css — hoja única · XX7
   Carlos Calabró · CCGWD · agosto 2026
   ------------------------------------------------------------
   CIMIENTO: tokens + reset + base. Los componentes
   (header, hero, prensa, footer) se agregan por debajo,
   en su propio bloque, a medida que se codean.
   ============================================================ */

/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
  /* --- Marca (valores reales confirmados) ------------------ */
  --gold: #896738; /* acentos, logo, detalles — igual al SVG real */
  --navy: #010f24; /* top-bar, footer, fondo dark        */
  --ink: #212529; /* texto principal                    */
  --gray: #767676; /* texto secundario (dropdown, etc.)  */
  --band: #f1ece3; /* bandas de título — entibiado para combinar con --bg */
  --white: #ffffff; /* fondo light                        */

  --btn: #896738; /* botón normal — mismo dorado real   */
  --btn-hover: #63492a; /* botón hover                        */

  --font-display: "Bodoni Moda", serif; /* títulos, nav        */
  --font-body: "Raleway", sans-serif; /* lectura             */

  /* --- Tema light (default) -------------------------------- */
  --bg: #faf7f1; /* blanco hueso — antes calcaba a --white directo */
  --text: var(--ink);
  --footer-text: rgba(255, 255, 255, 0.75); /* sirve en light y dark */

  /* --- Escala tipográfica (PROPUESTA — fluida con clamp) ----
     Móvil primero: el valor mínimo es el de teléfono,
     crece hasta el máximo en desktop. Ajustable. */
  --fs-sm: 0.875rem; /* 14px    */
  --fs-base: 1rem; /* 16px    */
  --fs-lg: 1.125rem; /* 18px    */
  --fs-h3: clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
  --fs-h2: clamp(1.6rem, 1.25rem + 1.8vw, 2.4rem);
  --fs-h1: clamp(2rem, 1.4rem + 3vw, 3.4rem);

  /* --- Espaciado (PROPUESTA) ------------------------------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;

  /* --- Layout (PROPUESTA) ---------------------------------- */
  --wrap: 1200px; /* ancho máx. contenido */
  --gutter: clamp(1rem, 5vw, 2rem); /* respiro lateral      */

  /* --- Detalle (PROPUESTA) --------------------------------- */
  --radius: 6px; /* boutique → esquinas suaves, no rectas */
  --ease: 0.2s ease;

  /* Breakpoints (referencia; en las media queries van literales)
     móvil < 768px · tablet 768–1024 · desktop > 1024 */
}

[data-theme="dark"] {
  --bg: var(--navy);
  --text: rgba(255, 255, 255, 0.85);
  --band: #0a1a2f;
}

/* ============================================================
   2. RESET / NORMALIZE (mínimo, moderno)
   ============================================================ */

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

* {
  margin: 0;
}

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

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Imágenes: display block + escala responsiva.
   Combinado con width/height en el HTML, esto preserva
   el aspect-ratio y MATA el CLS (0,407 → ~0). */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* ============================================================
   3. BASE — tipografía y enlaces
   ============================================================ */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--text);
  font-weight: 500;
}

h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}

p {
  max-width: 65ch;
} /* medida de lectura cómoda */

a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--ease);
}
a:hover {
  color: var(--btn-hover);
}

/* ============================================================
   4. LAYOUT — contenedor
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   5. BOTÓN base
   ------------------------------------------------------------
   Base de los CTA ("Schedule a consultation", "Call…").
   Las variantes (fantasma, sobre foto) se agregan aparte.
   ============================================================ */

.btn {
  display: inline-block;
  padding: 0.55rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--btn);
  border: none;
  border-radius: var(--radius);
  transition: background var(--ease);
}
.btn:hover {
  background: var(--btn-hover);
  color: var(--white);
}

/* ============================================================
   6. ACCESIBILIDAD
   ============================================================ */

/* Foco visible por teclado (suma en Lighthouse a11y) */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Respeta a quien pidió menos movimiento.
   El hero fija su imagen en su propio bloque; esto es la red. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   COMPONENTES  ↓  (se agregan por debajo, uno por bloque)
   ============================================================ */

/* ============================================================
   HEADER — top-bar + tres estados + dropdown + hamburguesa
   ------------------------------------------------------------
   Estructura real (corregida contra el header en producción):
   Home · About · Design (dropdown: Residential, Kitchen,
   Bathroom, Renovation & New Construction, Window Treatments
   & Accessories, Landscape Design, Furniture Repair/Refinishing
   /Restoration) · Press · Portfolio · FAQ · Shop (externo) · Contact

   Capas independientes que no se pisan:
   · ESTADO (A/B/C)    → scroll, clases en #site-header (wrapper)
   · TEMA (dark/light) → [data-theme] en <html>
   El toggle de tema queda cableado pero OCULTO (bloque
   "Theme toggle — stub" al final).
   ============================================================ */

/* --- Top-bar: teléfono + sociales. Visible en TODOS los
   breakpoints (así está en producción — corregido contra el
   sitio real, no se oculta en móvil). Vive en flujo normal,
   NO fixed: se va con el scroll, como hoy. Altura de referencia
   en --topbar-h, la usa .header-row para saber dónde empezar. */
:root {
  --topbar-h: 42px;
}

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--topbar-h);
  padding-inline: var(--gutter);
  background: var(--navy);
  color: var(--footer-text);
  position: relative;
  z-index: 101; /* por encima del header-row cuando ambos coinciden arriba */
}

.top-bar__phone {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: clamp(0.7rem, 2.8vw, var(--fs-sm));
  letter-spacing: 0.02em;
  color: var(--gold);
  white-space: nowrap;
}
.top-bar__phone:hover {
  color: var(--white);
}

.top-bar__social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  flex-shrink: 0;
}
.top-bar__social a {
  color: var(--gold);
}
.top-bar__social a:hover {
  color: var(--white);
}

/* --- Fila principal: logo, nav, acciones ---
   Estado A: absoluta, pegada justo debajo del top-bar,
   transparente, sobre el hero.
   Estado B/C (scrolled): fija en top:0 — para entonces el
   top-bar ya salió de vista con el scroll, y el header ocupa
   su lugar sin salto. El umbral en pirela.js usa --topbar-h. */
.header-row {
  position: absolute;
  inset-block-start: var(--topbar-h);
  inset-inline: 0;
  z-index: 100;
  background: transparent;
  transition:
    background var(--ease),
    box-shadow var(--ease);
}

/* El contenido (logo, nav, acciones) centrado al ancho de página,
   igual que el resto de las secciones — antes iba de punta a punta. */
.header-row .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
}

.header-row.is-scrolled {
  position: fixed;
  inset-block-start: 0;
  background: var(--bg);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* --- Páginas SIN hero (About, y las que vengan): el header no
   arranca fijo — vive en flujo normal, empuja el contenido hacia
   abajo como un header de sitio común, y recién se fija al
   scrollear (mismo umbral de siempre). Sin esto, al no haber
   scroll todavía, el header fijo se solapaba con el top-bar. */
.header-row.no-hero:not(.is-scrolled) {
  position: static;
  inset-block-start: auto;
}
.header-row.no-hero.is-top::before {
  content: none; /* sin foto detrás, no hace falta el degradado */
}

/* --- Estado A — sobre el carrusel: texto claro --- */
.header-row.is-top .nav-link,
.header-row.is-top .icon {
  color: var(--white);
}

/* Sin hero: siempre oscuro, nunca blanco — no hay foto que
   justifique el estado transparente. Gana por especificidad
   (4 clases contra 3) a la regla de arriba. */
.header-row.no-hero.is-top .nav-link,
.header-row.no-hero.is-top .icon {
  color: var(--text);
}

/* --- Estado B/C — con scroll: texto oscuro --- */
.header-row.is-scrolled .nav-link,
.header-row.is-scrolled .icon {
  color: var(--text);
}

/* Hover dorado — necesita 3 clases para ganarle a las reglas
   de estado de arriba (misma especificidad, pero esta pesa más
   por ir en las dos condiciones a la vez). */
.header-row.is-top .nav-link:hover,
.header-row.is-scrolled .nav-link:hover {
  color: var(--btn-hover);
}

/* Degradado de seguridad detrás del header en estado A
   (bug actual documentado en la arquitectura, sección 7). */
.header-row.is-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent);
  pointer-events: none;
}

/* --- Logo --- */
.site-header__logo {
  display: block;
}
.site-header__logo img {
  width: 250px;
  height: auto;
  transition: width var(--ease);
}
.header-row.is-scrolled .site-header__logo img {
  width: 150px;
}

/* --- Nav desktop --- */
.site-nav {
  display: none;
  list-style: none;
  padding: 0;
}

@media (min-width: 1024px) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .site-nav > li {
    position: relative;
  }

  .nav-link {
    display: flex;
    align-items: center;
    gap: 0.3em;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color var(--ease);
    white-space: nowrap;
  }
  .nav-link:hover {
    color: var(--btn-hover);
  }

  /* Caret del padre "Design" */
  .has-dropdown > .nav-link::after {
    content: "";
    width: 6px;
    height: 6px;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--ease);
  }
  .has-dropdown:hover > .nav-link::after,
  .has-dropdown:focus-within > .nav-link::after {
    transform: rotate(-135deg) translateY(1px);
  }

  /* Panel del dropdown: fondo propio, siempre texto oscuro
     sin importar el estado A/B/C del header (mayor especificidad
     por ir después en la hoja + selector más largo). */
  .dropdown-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 200;
    min-width: 300px;
    margin-block-start: var(--space-2);
    padding: var(--space-2) 0;
    background: var(--white);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
    border-radius: var(--radius);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity var(--ease),
      transform var(--ease),
      visibility var(--ease);
  }
  .has-dropdown:hover .dropdown-menu,
  .has-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .dropdown-menu .nav-link {
    display: block;
    width: 100%;
    padding: 0.6em var(--space-3);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: normal;
  }
  /* Mismo truco de especificidad que arriba: .header-row de más
     para ganarle a los .is-top/.is-scrolled que si no, pisan
     el gris del dropdown (era la causa de que no se viera). */
  .header-row .dropdown-menu .nav-link {
    color: var(--gray);
  }
  .header-row .dropdown-menu .nav-link:hover {
    color: var(--btn-hover);
    background: var(--band);
  }
}

/* --- Acciones a la derecha: tema, hamburguesa --- */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* --- Hamburguesa (visible < 1024px) --- */
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  background: none;
  border: none;
  padding: var(--space-1);
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  color: inherit;
  transition:
    transform var(--ease),
    opacity var(--ease);
}
@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

/* --- Panel de nav móvil (full-screen) ---
   z-index por encima del header-row (100): así el logo fijo del
   header no se filtra por encima del panel al abrirlo (el bug
   que se veía en el screenshot — "Home"/"About" tapados por el
   logo). Blanco, con su propia mini-cabecera y lista con
   divisores — igual que el sitio en producción hoy, en vez del
   panel navy full-bleed que había antes. */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--white);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav__topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--gutter);
  background: var(--navy);
  flex-shrink: 0;
}
.mobile-nav__topbar a {
  color: var(--gold);
}
.mobile-nav__topbar a:hover {
  color: var(--white);
}

.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--gutter);
  border-block-end: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.mobile-nav__header img {
  width: 150px;
  height: auto;
}
.mobile-nav__close {
  background: none;
  border: none;
  color: var(--text);
  padding: var(--space-1);
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  padding-inline: var(--gutter);
}

/* Ítem "Design" con acordeón en móvil */
.mobile-nav .nav-link,
.mobile-nav .submenu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: var(--space-3);
  border-block-end: 1px solid rgba(0, 0, 0, 0.08);
  background: none;
  border-inline: none;
  border-block-start: none;
  text-align: start;
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mobile-nav .nav-link:hover,
.mobile-nav .nav-link:active {
  color: var(--gold);
}

.mobile-nav .submenu-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(-45deg); /* apunta a la derecha, en reposo */
  transition: transform var(--ease);
}
.mobile-nav .submenu-toggle[aria-expanded="true"]::after {
  transform: rotate(45deg); /* apunta hacia abajo, expandido */
}

.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding-inline-start: var(--space-3);
  transition: max-height 0.3s ease;
}
.mobile-submenu.is-open {
  max-height: 600px;
}

.mobile-submenu .nav-link {
  border-block-end: 1px solid rgba(0, 0, 0, 0.05);
  padding-block: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--gray);
}

.mobile-nav__phone {
  border-block-end: none !important;
  padding-block: var(--space-4) var(--space-3) !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-base) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--gray) !important;
}

/* Bloquea el scroll del body cuando el panel móvil está abierto */
body.nav-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-submenu {
    transition: none;
  }
}

/* ============================================================
   HERO — 15 slides, Ken Burns (desktop) / fade (móvil)
   ------------------------------------------------------------
   Primera imagen visible de entrada (sin display:none, con
   opacity vía .is-active) — arregla el LCP. Las demás lazy.
   El Ken Burns SOLO corre en desktop (media query abajo);
   en móvil el <img> queda quieto, solo cambia la opacidad
   del contenedor — más sobrio, respeta el encuadre curado.
   prefers-reduced-motion ya congela animaciones/transiciones
   por la regla global de la sección 6 (ACCESIBILIDAD).
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  height: 85svh;
  min-height: 480px;
  max-height: 780px;
  overflow: hidden;
  background: var(--navy);
}
/* Mobile: 85svh deja la frase de intro empujada bien abajo,
   casi invisible sin scrollear. La achicamos solo acá — desktop
   se queda con el 85svh de siempre. */
@media (max-width: 767px) {
  .hero {
    height: 65svh;
    min-height: 380px;
  }
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.is-active {
  opacity: 1;
  z-index: 1;
}

/* FIX: el reset global (sección 2) pone picture { height:auto },
   así que sin esto la imagen no llega a cubrir el 100% del hero
   y queda navy a la vista abajo — esta regla se lo devuelve. */
.hero-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* Ken Burns — desktop únicamente. Variante por slide vía
   data-kb="in|out|pan" (cicla en el markup). Duración real
   la fija pirela.js con --kb-duration, tomada de data-duration
   (spec: primeros 3 slides 6-7s, resto 4-5s). */
@media (min-width: 768px) {
  .hero-slide.is-active img {
    animation-duration: var(--kb-duration, 6500ms);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
  }
  .hero-slide[data-kb="in"].is-active img {
    animation-name: kb-in;
  }
  .hero-slide[data-kb="out"].is-active img {
    animation-name: kb-out;
  }
  .hero-slide[data-kb="pan"].is-active img {
    animation-name: kb-pan;
  }
}

@keyframes kb-in {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.12);
  }
}
@keyframes kb-out {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1);
  }
}
@keyframes kb-pan {
  from {
    transform: scale(1.08) translateX(-1.5%);
  }
  to {
    transform: scale(1.08) translateX(1.5%);
  }
}

/* --- Flechas prev/next --- */
.hero-arrow {
  position: absolute;
  z-index: 5;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(1, 15, 36, 0.35);
  border: none;
  color: var(--white);
  transition: background var(--ease);
}
.hero-arrow:hover {
  background: rgba(1, 15, 36, 0.6);
}
.hero-arrow--prev {
  inset-inline-start: var(--space-2);
}
.hero-arrow--next {
  inset-inline-end: var(--space-2);
}
@media (min-width: 768px) {
  .hero-arrow--prev {
    inset-inline-start: var(--space-4);
  }
  .hero-arrow--next {
    inset-inline-end: var(--space-4);
  }
}

/* --- Franja "Serving the Tri-State Area…" (se conserva, sección 4) --- */
.service-area-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  background: var(--gold);
  color: var(--white);
  text-align: center;
  padding-inline: var(--gutter);
  font-size: 0.7rem;
  line-height: 1;
  letter-spacing: 0.03em;
}

/* ============================================================
   FOOTER — 4 columnas (logo/premio · contacto · horario ·
   sellos de confianza) + barra de copyright
   ============================================================ */

.site-footer {
  background: var(--navy);
  color: var(--footer-text);
  padding-block-start: var(--space-8);
}

.footer-widgets {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-inline: var(--gutter);
  padding-block-end: var(--space-6);
  max-width: var(--wrap);
  margin-inline: auto;
  text-align: center;
}
@media (min-width: 768px) {
  .footer-widgets {
    grid-template-columns: repeat(4, 1fr);
    text-align: start;
  }
}

.footer-col h5 {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-block-end: var(--space-2);
}

.footer-col p {
  max-width: none;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--footer-text);
}
.footer-col a {
  color: var(--footer-text);
}
.footer-col a:hover {
  color: var(--btn-hover);
}

.footer-logo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.footer-logo-col img:first-child {
  width: 160px;
  height: auto;
}
.footer-logo-col img:last-child {
  width: 80px;
  height: auto;
}

.footer-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .footer-badges {
    align-items: flex-end;
  }
}
.footer-badges img {
  width: 130px;
  height: auto;
}
.footer-badges small {
  display: block;
  margin-block-start: 0.25rem;
  font-size: 0.7rem;
  color: var(--footer-text);
}

/* --- Barra de copyright --- */
.footer-bottom {
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--space-3);
}
.footer-bottom .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.75rem;
  color: var(--footer-text);
}
@media (min-width: 768px) {
  .footer-bottom .wrap {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer-social {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}
.footer-social a {
  color: var(--gold);
}
.footer-social a:hover {
  color: var(--white);
}

/* ============================================================
   FEATURE CARDS — Design · Boutique · Press
   ------------------------------------------------------------
   Imagen con aspect-ratio forzado por CSS (mismo truco que el
   hero): el width/height del HTML es solo el fallback previo
   a CSS, así que no hace falta la dimensión real del archivo
   para que el CLS quede en cero.
   ============================================================ */

.feature-cards {
  padding-block-start: var(--space-3);
  padding-block-end: var(--space-6);
}

.feature-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .feature-cards__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card {
  text-align: center;
}

.feature-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
}
.feature-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.feature-card:hover .feature-card__media img {
  transform: scale(1.04);
}

.feature-card__body {
  padding-block-start: var(--space-2);
}

.feature-card h3 {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.feature-card__body p {
  margin-inline: auto;
  color: var(--text);
}

.feature-card .btn {
  margin-block-start: var(--space-2);
}

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

/* ============================================================
   GO TO TOP
   ------------------------------------------------------------
   Aparece recién después de bajar un tramo (ver umbral en JS).
   El salto respeta prefers-reduced-motion vía JS (scrollTo
   con behavior condicional, no alcanza con CSS acá).
   ============================================================ */

.go-to-top {
  position: fixed;
  z-index: 90;
  inset-block-end: var(--space-3);
  inset-inline-end: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  border: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--ease),
    transform var(--ease),
    visibility var(--ease),
    background var(--ease);
}
.go-to-top:hover {
  background: var(--btn-hover);
}
.go-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .go-to-top {
    transition:
      opacity 0.01ms,
      visibility 0.01ms;
  }
}

/* ============================================================
   HOME INTRO — H1 real de la home + subtítulo de servicio
   ------------------------------------------------------------
   El único H1 de la página (antes no existía contenido
   indexable acá — sección 9 del documento). Poético a propósito:
   la geografía ya vive en la franja dorada del hero, no hace
   falta repetirla. El H2 es chico por decisión de diseño — el
   peso SEO está en la etiqueta semántica, no en el tamaño visual.
   ============================================================ */

.home-intro {
  padding-block: var(--space-6) var(--space-3);
  text-align: center;
}

.home-intro h1 {
  font-style: italic;
  font-size: var(
    --fs-h2
  ); /* poético, no grita — a propósito más chico que --fs-h1 */
  max-width: 20ch;
  margin-inline: auto;
}

.home-intro h2 {
  margin-block-start: var(--space-2);
  font-family: var(--font-body);
  font-size: 1rem; /* ≈10pt en pantalla */
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--gray);
}

/* ============================================================
   PAGE-TITLE — banda reusable para páginas internas (sin hero)
   ============================================================ */

.page-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--band);
}
.page-title h1 {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 1px;
  color: var(--navy);
  font-size: 1rem;
  text-transform: uppercase;
}

/* ============================================================
   ABOUT — dos secciones: bio + retrato/cita, y estudio + lightbox
   ============================================================ */

.about-section {
  padding-block: var(--space-8);
}
.about-section + .about-section {
  padding-block-start: 0;
  border-block-start: 1px solid rgba(0, 0, 0, 0.08);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-6);
}

.about-bio__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .about-bio__grid {
    grid-template-columns: 2fr 1fr;
  }
}

.about-bio p {
  max-width: 65ch;
  margin-block-end: var(--space-3);
  text-align: justify;
  hyphens: none;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .about-bio {
    columns: 2 200px;
    column-gap: 4em;
    column-rule: 1px dotted var(--gold);
  }
}

.about-portrait {
  margin-block-end: var(--space-3);
}
.about-portrait img {
  width: 100%;
  height: auto;
}

.about-quote {
  border: none;
  margin: 0;
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--gold);
}
.about-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--gold);
  text-wrap: pretty;
}
.about-quote cite {
  display: block;
  margin-block-start: var(--space-2);
  font-style: normal;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
}

.about-studio__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .about-studio__grid {
    grid-template-columns: 1fr 2fr;
  }
}

.about-studio__media {
  position: relative;
}
.about-studio__media img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) - 2px);
}
.about-studio__hint {
  display: block;
  margin-block-start: var(--space-1);
  font-size: 0.75rem;
  color: var(--gray);
}

.about-studio h2 {
  font-size: var(--fs-h3);
  margin-block-end: var(--space-2);
}
.about-studio p {
  max-width: 65ch;
  margin-block-end: var(--space-3);
  text-align: justify;
  hyphens: none;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .about-studio__text {
    columns: 2 200px;
    column-gap: 4em;
    column-rule: 1px dotted var(--gold);
  }
  .about-studio__text h2 {
    column-span: all; /* el título queda arriba, no se parte entre columnas */
  }
}

/* ============================================================
   LIGHTBOX — componente propio, sin dependencias. Primera vez
   que se usa (foto del estudio); se reutiliza tal cual para
   Portfolio cuando lleguemos ahí. Usa <dialog> nativo: foco
   atrapado, cierre con Esc y backdrop, todo gratis del navegador.
   ============================================================ */

.lightbox-trigger {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
}
.lightbox-trigger__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--white);
  background: rgba(1, 15, 36, 0.35);
  opacity: 0;
  transition: opacity var(--ease);
}
.lightbox-trigger:hover .lightbox-trigger__icon,
.lightbox-trigger:focus-visible .lightbox-trigger__icon {
  opacity: 1;
}

.lightbox {
  border: none;
  padding-block: 56px 20px;
  padding-inline: 36px;
  margin: auto; /* el reset global (`* { margin:0 }`) le pisaba
                   el auto-centrado nativo del <dialog> — esto
                   se lo devuelve. */
  max-width: min(90vw, 1400px);
  max-height: 90vh;
  background: transparent;

  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    overlay 0.3s ease allow-discrete,
    display 0.3s ease allow-discrete;
}
@media (min-width: 768px) {
  .lightbox {
    padding-block: 64px 24px;
    padding-inline: 64px;
  }
}
.lightbox[open] {
  opacity: 1;
  transform: scale(1);
}
@starting-style {
  .lightbox[open] {
    opacity: 0;
    transform: scale(0.94);
  }
}
.lightbox::backdrop {
  background: rgba(1, 15, 36, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition:
    opacity 0.3s ease,
    overlay 0.3s ease allow-discrete,
    display 0.3s ease allow-discrete;
}
.lightbox[open]::backdrop {
  opacity: 1;
}
@starting-style {
  .lightbox[open]::backdrop {
    opacity: 0;
  }
}
.lightbox__image {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  border-radius: var(--radius);
  margin-inline: auto;
}
.lightbox__caption {
  margin: var(--space-2) 0 0;
  text-align: center;
  color: var(--white);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
}
.lightbox__caption:empty {
  display: none;
}

/* --- Controles: viven en el padding del dialog, NUNCA sobre
   la foto — antes eran position:fixed contra la ventana entera,
   y en pantallas donde la imagen casi la llenaba, terminaban
   cayendo encima. Ahora son relativos al propio <dialog>. --- */
.lightbox__close {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
}
.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.lightbox__arrow {
  display: none; /* solo aparecen si el dialog tiene .has-nav */
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
}
.lightbox__arrow:hover {
  background: rgba(255, 255, 255, 0.3);
}
.lightbox.has-nav .lightbox__arrow {
  display: flex;
}
.lightbox__arrow--prev {
  inset-inline-start: var(--space-2);
}
.lightbox__arrow--next {
  inset-inline-end: var(--space-2);
}

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

/* ============================================================
   FAQ — grid de dos columnas, un H2 por pregunta
   ============================================================ */

.faq-section {
  padding-block: var(--space-8);
}

.faq-grid {
  display: grid;
  gap: 0 var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .faq-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.faq-item {
  padding-block: var(--space-4);
  border-block-end: 1px solid rgba(0, 0, 0, 0.08);
}
.faq-item:first-child {
  padding-block-start: 0;
}

.faq-item h2 {
  font-size: var(--fs-lg);
  margin-block-end: var(--space-2);
}
.faq-item h2 .faq-number {
  color: var(--gold);
  font-style: italic;
}

.faq-item p {
  max-width: 60ch;
  margin: 0;
}

.faq-cta-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 26px;
  background: var(--gold);
  color: var(--white);
  padding-inline: var(--gutter);
  font-size: 0.7rem;
  line-height: 1;
}
.faq-cta-bar a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-cta-bar a:hover {
  color: var(--navy);
}

/* ============================================================
   CONTACT — sin formulario: botón de mail (anti-spam, base64),
   mini-slide de 3 fotos, mapa en iframe liviano (sin API key,
   sin JS, reemplaza el plugin jQuery + Google Maps JS viejo).
   ============================================================ */

.contact-section {
  padding-block: var(--space-8);
}

.contact-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-intro h2 {
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.4rem);
  margin-block-end: var(--space-3);
}

.contact-hint {
  margin-block-start: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--gray);
  max-width: 45ch;
}

/* --- Mini-slide: 3 fotos, fade automático, sin flechas ni dots
   (es un acento decorativo, no un visor de portfolio). --- */
.contact-slide {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  margin-block-start: var(--space-6);
  background: var(--band);
}
/* Contenedor intermedio: separa el marco (padding, en .img-thumbnail)
   de la zona donde las 3 fotos position:absolute se superponen para
   el fundido. Sin este nivel de más, las fotos absolutas ignoran
   el padding del marco y lo tapan — es geometría de CSS, no un bug
   de navegador (position:absolute + inset:0 siempre llega hasta el
   borde interior del padding de su contenedor posicionado). */
.contact-slide__track {
  position: relative;
  width: 100%;
  height: 100%;
}
.contact-slide__item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.contact-slide__item.is-active {
  opacity: 1;
}
.contact-slide__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-grid {
  align-items: stretch;
}

.contact-map {
  display: flex;
  flex-direction: column;
}
.contact-map__label {
  display: block;
  margin-block-end: var(--space-2);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
}
.contact-map iframe {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 320px; /* piso de seguridad si el otro bloque queda muy bajo */
  border: none;
  border-radius: var(--radius);
}

/* ============================================================
   DESIGN PAGE — plantilla compartida por las 7 páginas del
   dropdown Design (Residential, Kitchen, Bathroom, Renovation,
   Window Treatments, Landscape, Furniture) — y reusable después
   para Press/Portfolio (modal de Alirio + lightbox de galería).
   ============================================================ */

.design-intro {
  padding-block: var(--space-8) var(--space-6);
}

.design-intro__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .design-intro__grid {
    grid-template-columns: 3fr 1fr;
  }
}

.design-intro__text p {
  max-width: 55ch;
  text-align: justify;
  hyphens: none;
  margin-block-end: var(--space-3);
}
@media (min-width: 640px) {
  .design-intro__text {
    columns: 2 260px;
    column-gap: 4em;
    column-rule: 1px dotted var(--gold);
  }
}

.design-intro .btn {
  margin-block-start: var(--space-2);
}

.design-intro__text ul {
  break-inside: avoid;
  margin: 0 0 var(--space-3);
  padding-inline-start: var(--space-4);
  color: var(--text);
}
.design-intro__text li {
  margin-block-end: var(--space-1);
}

/* --- Sidebar Quicklinks --- */
.design-quicklinks h2 {
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-block-end: var(--space-3);
}
.design-quicklinks ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.design-quicklinks a {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  color: var(--gold);
}
.design-quicklinks a:hover {
  color: var(--btn-hover);
}
.design-quicklinks a::before {
  content: "›";
  font-weight: 700;
}
.design-quicklinks li.is-active a {
  color: var(--text);
  font-weight: 600;
  pointer-events: none; /* ya estás en esa página */
}

/* --- Banda de fotos: full-bleed, ancho completo del viewport.
   Slider por scroll-snap nativo — "siempre 5 visibles" en
   desktop (2 en móvil, 3 en tablet), deslizás para ver el resto
   si hay más. Sin carousel de JS: el navegador hace el trabajo
   (inercia, swipe táctil) solo. Las flechas de abajo son un
   agregado opcional para mouse/trackpad. --- */
.photo-band-wrap {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.photo-band {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
}
.photo-band::-webkit-scrollbar {
  display: none;
} /* Chrome/Safari */

.photo-band__item {
  position: relative;
  display: block;
  flex: 0 0 50%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  scroll-snap-align: start;
}
@media (min-width: 640px) {
  .photo-band__item {
    flex-basis: 33.333%;
  }
}
@media (min-width: 1024px) {
  .photo-band__item {
    flex-basis: 20%;
    aspect-ratio: 1 / 1.15;
  }
}

.photo-band__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.photo-band__item:hover img,
.photo-band__item:focus-visible img {
  transform: scale(1.06);
}

.photo-band__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  color: var(--white);
  background: rgba(1, 15, 36, 0.45);
  opacity: 0;
  transition: opacity var(--ease);
}
.photo-band__item:hover .photo-band__overlay,
.photo-band__item:focus-visible .photo-band__overlay {
  opacity: 1;
}

.photo-band__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 1.4rem;
  font-weight: 300;
}
.photo-band__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}
.photo-band__subtitle {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.8);
}

/* --- Flechas del slider: solo aparecen si hay más fotos de las
   que entran en pantalla (JS agrega .has-overflow) --- */
.photo-band__nav {
  display: none;
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(1, 15, 36, 0.5);
  color: var(--white);
  z-index: 2;
}
.photo-band__nav:hover {
  background: rgba(1, 15, 36, 0.75);
}
.photo-band-wrap.has-overflow .photo-band__nav {
  display: flex;
}
.photo-band__nav--prev {
  inset-inline-start: var(--space-2);
}
.photo-band__nav--next {
  inset-inline-end: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .photo-band__item img {
    transition: none;
  }
  .photo-band {
    scroll-behavior: auto;
  }
}

/* ============================================================
   ALIRIO MODAL — mismo <dialog> nativo del lightbox, reusa el
   glassmorphism del backdrop. Contenido propio (foto + cita).
   ============================================================ */

.alirio-modal {
  border: none;
  margin: auto;
  padding: var(--space-4);
  max-width: min(90vw, 1100px);
  max-height: 90vh;
  background: var(--white);
  border-radius: var(--radius);

  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    overlay 0.3s ease allow-discrete,
    display 0.3s ease allow-discrete;
}
.alirio-modal[open] {
  opacity: 1;
  transform: scale(1);
}
@starting-style {
  .alirio-modal[open] {
    opacity: 0;
    transform: scale(0.94);
  }
}
.alirio-modal::backdrop {
  background: rgba(1, 15, 36, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition:
    opacity 0.3s ease,
    overlay 0.3s ease allow-discrete,
    display 0.3s ease allow-discrete;
}
.alirio-modal[open]::backdrop {
  opacity: 1;
}
@starting-style {
  .alirio-modal[open]::backdrop {
    opacity: 0;
  }
}

.alirio-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-3);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid rgba(0, 0, 0, 0.08);
}
.alirio-modal__header h2 {
  font-size: var(--fs-h3);
  margin: 0;
}
.alirio-modal__close {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gray);
}
.alirio-modal__close:hover {
  color: var(--text);
}

.alirio-modal__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .alirio-modal__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.alirio-modal__grid img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.alirio-modal__quote {
  border: none;
  margin: 0;
}
.alirio-modal__quote p {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
}
.alirio-modal__quote cite {
  display: block;
  margin-block-start: var(--space-2);
  font-style: normal;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
}
.alirio-modal__grid .alirio-modal__logo {
  display: block;
  width: 140px;
  height: auto;
  margin-block-start: var(--space-4);
}

/* ============================================================
   PRESS — grilla de tarjetas. Cada una puede abrir 1 a 4 fotos
   en el lightbox (mismo componente compartido, agrupado por
   ítem) — sin mini-carrusel propio, sin paginación de JS.
   ============================================================ */

.press-section {
  padding-block: var(--space-8);
}

.press-grid {
  display: grid;
  gap: var(--space-6) var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .press-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .press-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.press-card__media {
  aspect-ratio: 4 / 3;
  margin-block-end: var(--space-2);
}

.press-card__title {
  font-size: var(--fs-base);
  margin-block-end: var(--space-1);
}
.press-card__title a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--text);
}
.press-card__title a:hover {
  color: var(--gold);
}
.press-card__title a::after {
  content: "›";
  font-weight: 700;
  color: var(--gold);
}

.press-card__caption {
  font-size: var(--fs-sm);
  color: var(--gray);
  margin: 0;
}

/* Triggers extra de un mismo ítem (2da, 3ra, 4ta foto): no se
   ven en la grilla, solo alimentan el grupo del lightbox para
   que next/prev navegue entre todas las fotos de esa nota. */
.lightbox-trigger.is-extra {
  display: none;
}

/* --- Paginación — genérica, la maneja pirela.js a partir de
   [data-per-page] + el <nav class="pagination"> que le sigue.
   La misma pieza sirve para Press, Portfolio, o cualquier otra
   grilla que la necesite — no hay nada específico de Press acá. --- */
.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
}
.pagination button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-sm);
}
.pagination button:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.pagination button.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

/* ============================================================
   PORTFOLIO — masonry con CSS multi-columna (mismo truco que el
   texto de About/Design), sin librería de JS. Cada foto respeta
   su proporción real — nada de recortes forzados a un cuadrado.
   ============================================================ */

.portfolio-section {
  padding-block: var(--space-8);
}

.portfolio-masonry {
  columns: 2 240px;
  column-gap: var(--space-4);
}
@media (min-width: 768px) {
  .portfolio-masonry {
    columns: 3 240px;
  }
}
@media (min-width: 1200px) {
  .portfolio-masonry {
    columns: 4 240px;
  }
}

.portfolio-item {
  display: block;
  break-inside: avoid;
  margin-block-end: var(--space-4);
}
.portfolio-item .lightbox-trigger img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.portfolio-item__caption {
  display: block;
  margin-block-start: var(--space-1);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--gray);
}

/* ============================================================
   404 — el <body> se vuelve flex SOLO en esta página (clase
   .page-flex, opt-in) para que el footer quede pegado abajo
   aunque el contenido sea corto. No toca el <body> global.
   ============================================================ */

body.page-flex {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.error-404__main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding-block: var(--space-8);
}

.error-404__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  width: 100%;
}
@media (min-width: 1024px) {
  .error-404__grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

.error-404__number {
  font-family: var(--font-display);
  font-size: clamp(8rem, 20vw, 14rem);
  line-height: 1;
  color: var(--gold);
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.08);
  text-align: center;
}
@media (min-width: 1024px) {
  .error-404__number {
    text-align: start;
  }
}

.error-404__intro h2 {
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.error-404__intro p {
  color: var(--gray);
}

.error-404__links {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-block-start: var(--space-4);
}
@media (min-width: 640px) {
  .error-404__links {
    grid-template-columns: repeat(3, 1fr);
  }
}
.error-404__links ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.error-404__links a {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gold);
}
.error-404__links a::before {
  content: "›";
  font-weight: 700;
}
.error-404__links a:hover {
  color: var(--gray);
}

/* ============================================================
   Theme toggle — STUB
   ------------------------------------------------------------
   Botón funcional, cableado a pirela.js, pero OCULTO por
   decisión de producto: es un valor agregado del sitio,
   no algo que Alirio pidió. Se activa el día que Carlos
   decida mostrarlo: basta borrar/comentar esta única regla,
   nada más cambia.
   ============================================================ */
.theme-toggle {
  display: none;
}

/* ============================================================
   UTILIDAD — .img-thumbnail
   ------------------------------------------------------------
   Marco tipo "polaroid": padding blanco + borde gris delicado.
   Calcado de .img-thumbnail de Bootstrap (mismos valores:
   0.25rem, gris ≈ #dee2e6, 0.25rem de radio) — reusable en
   cualquier imagen del sitio con solo agregar la clase en el
   HTML, sin tocar CSS cada vez.

   Va AL FINAL de la hoja a propósito: así, por orden de cascada,
   le gana a cualquier regla de componente que también toque
   width/height/border-radius/object-fit en esa misma imagen
   (como .contact-slide__item img) — sin necesitar !important.

   overflow:hidden explícito: algunos navegadores no respetan
   bien el border-radius en un <img> que además tiene
   object-fit:cover + padding (soporte inconsistente) — esto lo
   fuerza pase lo que pase.

   Uso — REGLA IMPORTANTE, probada hoy con Contact y About:
   la clase SIEMPRE va en un elemento CONTENEDOR (<a>, <div>,
   <span>) — NUNCA directo en un <img> suelto. Un <img> con
   object-fit:cover no respeta bien el border-radius/padding
   combinados en algunos navegadores; un contenedor con
   overflow:hidden sí, siempre, sin excepción.
   · Sobre un link de lightbox: <a class="lightbox-trigger img-thumbnail">
   · Sobre una foto suelta: envolverla en <span class="img-thumbnail">
     (si esa foto usa position:absolute para algo, como un fundido
     entre varias, hace falta un contenedor intermedio adentro —
     ver .contact-slide__track como ejemplo real)
   ============================================================ */

.img-thumbnail,
a.img-thumbnail {
  overflow: hidden !important;
  padding: 0.25rem;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius) !important;
}
.img-thumbnail img {
  display: block;
  overflow: hidden !important;
  border-radius: var(--radius) !important;

  /*border-radius: calc(var(--radius) - 2px) !important;*/
}

/* La columna que contiene los dos mapas */
.contact-maps {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* reparte el alto → cierra parejo con la foto */
  gap: var(--space-6); /* separación mínima garantizada entre mapas */
}

/* Cada bloque de mapa (label + imagen) */
.contact-map {
  display: flex;
  flex-direction: column;
}
.contact-map__label {
  display: block;
  margin-block-end: var(--space-2);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
}
.contact-map a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
}
.contact-map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}