/* =========================================================
   Rebollo Arte y Madera — sistema visual PROVISIONAL
   Colores y tipografía funcionales, pendientes de aprobación
   final del cliente (ver CONTENIDO-PENDIENTE.md).
   ========================================================= */

:root {
  /* Color — roles funcionales, valores provisionales */
  --bg: #F1F0EC;
  --bg-alt: #DDD6CA;
  --surface: #FBFAF7;
  --text: #211E1B;
  --text-soft: #4F4942;
  --wood: #60412F;
  --wood-dark: #2F1D15;
  --accent: #7A321D;
  --olive: #55583A;
  --line: rgba(33, 30, 27, 0.18);
  --on-dark: #F7F5EF;
  --whatsapp: #0B633D;
  --whatsapp-hover: #084B2E;

  /* Tipografía */
  --font-display: "Baskerville", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-body: "Segoe UI", Aptos, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Escala */
  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.05rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  --step-5: clamp(2.6rem, 1.9rem + 3vw, 4.4rem);

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-space: clamp(4.5rem, 8vw, 7rem);
  --stage-height: 0px;
  --radius: 10px;
  --ease: cubic-bezier(.22,1,.36,1);
  --z-fab: 40;
  --z-header: 50;
  --z-nav: 60;
  --z-stage: 70;
  --z-skip: 80;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--wood-dark);
  text-wrap: balance;
}

p { margin: 0 0 1em; color: var(--text-soft); text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

address { font-style: normal; }

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: var(--z-skip);
  background: var(--surface);
  padding: 0.5rem 1rem;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  min-height: 44px;
  padding: 0.85em 1.6em;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn--primary {
  background: var(--wood-dark);
  color: var(--on-dark);
}
.btn--primary:hover { background: var(--accent); text-decoration: none; }
.btn--ghost {
  border-color: currentColor;
  color: inherit;
}
.btn--ghost:hover { background: rgba(0,0,0,0.06); text-decoration: none; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: var(--stage-height);
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background: transparent;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled,
.site-header.is-open {
  background: var(--bg);
  box-shadow: 0 1px 0 var(--line);
}
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.site-header__logo {
  display: block;
  border-radius: 50%;
  /* Respaldo oscuro solo en carga (header transparente): sin él el anillo
     claro del logo se funde con las zonas claras de la foto de fondo.
     Se retira al hacer scroll porque el header ya tiene fondo sólido claro. */
  background: rgba(15,11,8,0.38);
  transition: background 0.3s var(--ease);
}
.site-header.is-scrolled:not(.is-open) .site-header__logo,
.site-header.is-open .site-header__logo {
  background: transparent;
}
/* Mismo tratamiento que .site-footer__logo (círculo + anillo claro), solo que
   más pequeño para el header. */
.site-header__logo img {
  width: 60px; height: 60px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
  border: 3px solid rgba(245,239,227,0.85);
}
@media (max-width: 640px) {
  .site-header__logo img { width: 52px; height: 52px; }
}

.site-nav {
  display: none;
  gap: 2rem;
  font-size: 1.3rem;
  font-family: var(--font-display);
}
/* Grupos izquierdo/derecho del menú (flanquean el logo en escritorio).
   En móvil son "transparentes": sus enlaces se unen al listado plano de .site-nav. */
.site-nav__group { display: contents; }
.site-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--on-dark);
}
/* is-scrolled = header sólido en escritorio (fondo claro, texto oscuro).
   :not(.is-open) evita que esta regla pise el menú móvil a pantalla completa,
   que siempre tiene fondo de madera oscuro y necesita texto claro. */
/* :not(.site-header__cta) en las tres: el CTA vive dentro de .site-nav (grupo
   derecho) pero tiene sus propios colores vía .btn--primary — sin la exclusión,
   estas reglas (más específicas) se los pisan y el texto del botón se vuelve
   invisible sobre su propio fondo oscuro al hacer scroll. */
.site-header.is-scrolled:not(.is-open) .site-nav a:not(.site-header__cta) { color: var(--text); }
.site-header.is-open .site-nav a:not(.site-header__cta) { color: var(--on-dark); }
.site-nav a:not(.site-header__cta):hover { text-decoration: none; opacity: 0.7; }

/* especificidad "a.site-header__cta" (no solo ".site-header__cta"): el CTA vive
   ahora dentro de .site-nav, y ".site-nav a" tiene más especificidad que una
   sola clase — sin el selector de tipo aquí, .site-nav a le ganaría y el CTA
   se quedaría visible en móvil pese al display:none. */
a.site-header__cta { display: none; white-space: nowrap; }
/* En carga (header transparente) el botón hereda de .btn--primary un fondo
   casi negro (--wood-dark) que se pierde contra la foto. En claro solo
   durante la carga; al hacer scroll el header ya tiene fondo sólido y el
   botón vuelve al marrón de marca, igual que el resto de CTAs del sitio. */
a.site-header__cta { background: var(--on-dark); color: var(--wood-dark); }
a.site-header__cta:hover { background: var(--surface); }
.site-header.is-scrolled:not(.is-open) a.site-header__cta,
.site-header.is-open a.site-header__cta {
  background: var(--wood-dark);
  color: var(--on-dark);
}
.site-header.is-scrolled:not(.is-open) a.site-header__cta:hover,
.site-header.is-open a.site-header__cta:hover {
  background: var(--accent);
}

.nav-toggle {
  margin-left: auto;
  width: 52px; height: 52px;
  background: rgba(15,11,8,0.42);
  border: none;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
  transition: background 0.3s var(--ease);
  position: relative;
  z-index: calc(var(--z-nav) + 1);
}
.nav-toggle span {
  display: block; height: 2px; width: 22px; background: var(--on-dark);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
/* header sólido (scrolleado, menú cerrado): iconos oscuros sobre fondo claro */
.site-header.is-scrolled .nav-toggle { background: rgba(15,11,8,0.08); }
.site-header.is-scrolled .nav-toggle span { background: var(--text); }
/* menú abierto a pantalla completa con fondo de madera oscuro: iconos siempre claros,
   independientemente de si el header estaba scrolleado, y se transforma en aspa (X) */
.site-header.is-open .nav-toggle { background: rgba(245,239,227,0.16); }
.site-header.is-open .nav-toggle span { background: var(--on-dark); }
.site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (min-width: 900px) {
  /* Logo centrado y agrandado, menú partido en dos grupos a los lados
     (grid en vez de flex: así el logo queda matemáticamente centrado
     aunque los dos lados no pesen lo mismo, con el CTA metido dentro
     del grupo derecho). */
  .site-header__inner {
    display: grid;
    /* minmax(0, 1fr), no 1fr a secas: con 1fr puro, si el contenido de un lado
       pide más ancho mínimo que el otro, el grid deja de repartir las columnas
       a partes iguales y el logo se descentra. minmax(0,…) fuerza el reparto
       exacto 50/50 pase lo que pase. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 3rem;
  }
  .site-nav { display: contents; }
  .site-nav__group { display: flex; align-items: center; gap: 2rem; }
  /* grid-row:1 explícito en los tres: en el HTML el grupo derecho (columna 3)
     va antes que el logo (columna 2), y la colocación automática de grid no
     "retrocede" a una columna ya pasada — sin esto, el logo caía en una
     segunda fila en vez de compartir la primera con el menú. */
  /* justify-content hacia el logo, no hacia el borde exterior: si no, el texto
     queda pegado a los extremos del header y deja un hueco muerto enorme
     alrededor del logo, en vez de leerse como un solo bloque centrado. */
  .site-nav__group--left { grid-column: 1; grid-row: 1; justify-content: flex-end; }
  .site-nav__group--right { grid-column: 3; grid-row: 1; justify-content: flex-start; }
  .site-header__logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .site-header__logo img { width: 92px; height: 92px; }
  /* Más pequeño que un .btn normal: así el grupo derecho (Taller, Contacto,
     botón) pesa parecido al izquierdo (Servicios, Proyectos, Proceso) y no
     depende solo de forzar las columnas a la misma anchura por CSS. */
  a.site-header__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.65em 1.1em;
    font-size: 0.85rem;
    min-height: 0;
  }
  .nav-toggle { display: none; }
}

@media (max-width: 899px) {
  /* En móvil el header se mantiene siempre transparente (no cambia a fondo sólido al
     hacer scroll) — solo el círculo del logo y del botón de menú dan contraste.
     :not(.is-open) para no interferir con el menú a pantalla completa. */
  .site-header.is-scrolled:not(.is-open) { background: transparent; box-shadow: none; }
  .site-header.is-scrolled:not(.is-open) .nav-toggle { background: rgba(15,11,8,0.42); }
  .site-header.is-scrolled:not(.is-open) .nav-toggle span { background: var(--on-dark); }

  .site-nav {
    position: fixed;
    inset: var(--stage-height) 0 0;
    z-index: var(--z-nav);
    background-color: #1f130c;
    background-image:
      linear-gradient(180deg, rgba(15,9,5,0.86) 0%, rgba(15,9,5,0.92) 100%),
      url("../assets/img/footer/madera-taracea.webp");
    background-size: cover;
    background-position: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.75rem;
    padding: 2rem;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
  }
  .site-nav a {
    color: var(--on-dark);
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 8vw, 2.6rem);
    font-weight: 500;
  }
  .site-header.is-open .site-nav { transform: translateX(0); display: flex; }
}

/* ---------- Sección genérica ---------- */
.section-head { max-width: 760px; margin: 0 auto 3rem; text-align: left; padding: 0 var(--gutter); }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head h2 { font-size: var(--step-3); }
.section-head__lead { font-size: var(--step-1); color: var(--text-soft); }

.hero__context,
.section-context {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 1rem;
}
.hero__context { color: var(--on-dark); }
.section-context { color: var(--accent); }

.section-action {
  max-width: var(--container);
  margin: 2.5rem auto 0;
  padding: 0 var(--gutter);
  text-align: center;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.text-link:hover { text-decoration-thickness: 2px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(92svh - var(--stage-height));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--on-dark);
}
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(15,11,8,0.68) 0%, rgba(15,11,8,0.38) 32%, rgba(15,11,8,0.06) 62%, rgba(15,11,8,0) 80%),
    linear-gradient(180deg, rgba(20,15,10,0.18) 0%, rgba(20,15,10,0.1) 40%, rgba(20,15,10,0.7) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
  padding-inline: var(--gutter);
  padding-bottom: 5rem;
}
.hero__title { font-size: var(--step-5); color: var(--on-dark); }
.hero__lead { font-size: var(--step-1); color: var(--on-dark); opacity: 0.92; max-width: 30em; margin-inline: auto; }
.hero__actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero__actions .btn--primary { background: var(--accent); }
.hero__actions .btn--primary:hover { background: var(--wood-dark); }
.hero__actions .btn--ghost { border-color: var(--on-dark); color: var(--on-dark); }
@media (min-width: 641px) {
  .hero {
    /* Evita que la cabecera fija alcance el contenido en portátiles y pantallas bajas. */
    padding-top: calc(var(--stage-height) + 7.5rem);
  }

  .hero__content {
    /* Conserva la composición inferior; si falta altura, el margen se reduce antes de solapar. */
    margin-top: auto;
  }
}
@media (max-width: 640px) {
  .hero {
    align-items: flex-start;
  }

  .hero__media {
    object-position: left center;
  }

  .hero__scrim {
    /* En móvil el texto ocupa todo el ancho: oscurecido uniforme y más fuerte. */
    background: linear-gradient(180deg, rgba(10,6,4,0.72) 0%, rgba(10,6,4,0.74) 35%, rgba(10,6,4,0.78) 60%, rgba(10,6,4,0.92) 100%);
  }

  .hero__content {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    text-align: left;
    /* Reserva la franja de validación, la cabecera móvil y un espacio de respiración. */
    padding: calc(var(--stage-height) + 7.5rem) clamp(1.5rem, 6vw, 2rem) 5rem;
  }

  .hero__lead { margin-inline: 0; }
  .hero__actions { justify-content: flex-start; }
}
.hero__portrait {
  position: absolute;
  z-index: 1;
  right: clamp(1rem, 4vw, 3.5rem);
  bottom: clamp(1rem, 4vw, 3.5rem);
  width: clamp(90px, 14vw, 160px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 4px solid rgba(245, 239, 227, 0.9);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  filter: sepia(0.18) saturate(1.05) contrast(1.05) brightness(1.02);
}
@media (max-width: 640px) {
  .hero__portrait { display: none; }
}
.hero__credit {
  position: absolute;
  z-index: 1;
  left: var(--gutter);
  bottom: 1rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  color: rgba(245, 239, 227, 0.7);
}

/* ---------- Declaración de marca ---------- */
.statement {
  display: grid;
  gap: 3rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-space) var(--gutter);
  align-items: center;
}
.statement__media {
  position: relative;
}
.statement__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.statement__credit {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  background: rgba(15, 11, 8, 0.45);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  color: rgba(245, 239, 227, 0.9);
}
.statement__text h2 { font-size: var(--step-3); }
.statement__signature { font-family: var(--font-display); font-size: 1.2rem; color: var(--wood); }
@media (min-width: 800px) {
  .statement { grid-template-columns: 0.9fr 1.1fr; }
}

/* ---------- Servicios ---------- */
.services { padding: var(--section-space) 0; background: var(--bg-alt); }
.services__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.service-card {
  padding: 0;
  position: relative;
}
.service-card__media { aspect-ratio: 4/5; overflow: hidden; margin-bottom: 1.5rem; border-radius: var(--radius); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.service-card h3 { font-size: var(--step-1); margin-top: 0; }
@media (min-width: 800px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Casos destacados ---------- */
.case { padding: var(--section-space) 0; }
.case__frame {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
}
.case__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Slideshow: todas las imágenes apiladas exactamente encima, solo .is-active
   visible. Si la fase tiene una sola imagen, simplemente no hay nada que
   alternar (el JS no crea intervalo). */
.case__slideshow img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.case__slideshow img.is-active { opacity: 1; }
.case-study {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.case-study + .case-study {
  margin-top: 4.5rem;
  padding-top: 4.5rem;
  border-top: 1px solid var(--line);
}
.case-study__title { font-size: var(--step-3); margin-bottom: 1.75rem; }
.case-study__columns { display: grid; gap: 1.75rem; }
.case-study__label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 0.75rem;
}
@media (min-width: 800px) {
  .case-study__columns { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

/* ---------- Proceso ---------- */
.process { padding: var(--section-space) 0; background: var(--bg-alt); }
.process__list {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--gutter);
  max-width: var(--container);
  display: grid;
  gap: 2.5rem;
  border-left: 1px solid var(--line);
}
.process__step { padding-left: 2rem; position: relative; }
.process__step::before {
  content: "";
  position: absolute; left: -5px; top: 0.4rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
}
.process__index { font-family: var(--font-display); color: var(--accent); font-size: 0.85rem; }
.process__step h3 { margin-top: 0.2em; font-size: 1.15rem; }
@media (min-width: 900px) {
  .process__list { grid-template-columns: repeat(3, 1fr); border-left: none; border-top: 1px solid var(--line); padding-top: 2.5rem; }
  .process__step { padding-left: 0; }
  .process__step::before { left: 0; top: -2.9rem; }
}

/* ---------- Galería ---------- */
.gallery { padding: var(--section-space) var(--gutter); max-width: var(--container); margin: 0 auto; }
/* Masonry con columnas CSS (sin JS): cada foto conserva su proporción real
   en vez de recortarse a una rejilla, así 21 fotos de tamaños distintos
   siguen leyéndose ordenadas. break-inside:avoid evita que una foto se
   parta entre dos columnas. */
.gallery__grid {
  column-count: 2;
  column-gap: 0.75rem;
}
.gallery__item {
  margin: 0 0 0.75rem;
  break-inside: avoid;
  overflow: hidden;
  border-radius: var(--radius);
}
.gallery__item img { width: 100%; height: auto; display: block; transition: transform 0.5s var(--ease); }
.gallery__item:hover img { transform: scale(1.03); }
@media (min-width: 640px) {
  .gallery__grid { column-count: 3; }
}
@media (min-width: 1000px) {
  .gallery__grid { column-count: 4; column-gap: 1rem; }
  .gallery__item { margin-bottom: 1rem; }
}

/* ---------- Taller y persona ---------- */
.workshop {
  display: grid;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--section-space) var(--gutter);
  gap: 3rem;
  align-items: center;
}
.workshop__media { position: relative; }
.workshop__media > img:first-child { border-radius: var(--radius); aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.workshop__portrait {
  position: absolute;
  right: -1.5rem;
  bottom: -1.5rem;
  width: 42%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border: 6px solid var(--bg);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(20, 15, 10, 0.25);
  filter: sepia(0.12) saturate(0.96) contrast(1.03);
}
.workshop__text address { color: var(--text-soft); margin-top: 1.5rem; display: block; }
@media (min-width: 800px) {
  .workshop { grid-template-columns: 0.9fr 1.1fr; }
}
@media (max-width: 799px) {
  .workshop__portrait {
    right: 1rem;
    bottom: -1rem;
    width: 38%;
  }
}

/* ---------- FAQ ---------- */
.faq { padding: var(--section-space) 0; background: var(--bg-alt); }
.faq__list { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.faq__item {
  border-bottom: 1px solid var(--line);
  padding: 1.25rem 0;
}
.faq__item summary {
  cursor: pointer;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--wood-dark);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 1.4rem; color: var(--accent); margin-left: 1rem; }
.faq__item[open] summary::after { content: "–"; }
.faq__item p { margin-top: 1rem; }

/* ---------- Contacto ---------- */
.contact { padding: var(--section-space) 0; max-width: var(--container); margin: 0 auto; }
.contact-form { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.contact-form__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-bottom: 1.5rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; color: var(--text-soft); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7em 0.8em;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  color: var(--text);
}
.field input::placeholder,
.field textarea::placeholder { color: #655E56; opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field--full { grid-column: 1 / -1; }
.field--checkbox { flex-direction: row; align-items: flex-start; font-size: 0.85rem; margin-bottom: 1.5rem; }
.field--checkbox input { width: 1.15rem; height: 1.15rem; margin-top: 0.15em; flex: 0 0 auto; }
@media (min-width: 700px) {
  .contact-form__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Contacto: WhatsApp principal + email secundario ---------- */
.contact-primary { text-align: center; margin: 0 auto 3rem; }
.btn--whatsapp {
  display: inline-flex; align-items: center; gap: 0.6em;
  background: var(--whatsapp); color: #fff;
  padding: 1em 2em; font-size: 1.1rem; font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 4px 8px rgba(11,99,61,0.22);
}
.btn--whatsapp:hover { background: var(--whatsapp-hover); text-decoration: none; }
.contact-primary__hint { margin-top: 1rem; font-size: 0.85rem; color: var(--text-soft); }
.contact-secondary {
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.contact-secondary p { margin-bottom: 0.75rem; }
.contact-secondary__alt { font-size: 0.85rem; margin-top: 1rem; margin-bottom: 0; }

/* ---------- Modal de email ---------- */
.email-modal {
  width: min(92vw, 640px);
  max-height: 88vh;
  overflow-y: auto;
  border: none;
  border-radius: 4px;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--surface);
  color: var(--text);
}
.email-modal::backdrop { background: rgba(15,11,8,0.55); }
.email-modal h2 { font-size: 1.6rem; margin-bottom: 0.5rem; padding-right: 3rem; }
.email-modal__hint { font-size: 0.9rem; color: var(--text-soft); margin-bottom: 1.75rem; }
.email-modal__close {
  position: absolute; top: 1rem; right: 1rem;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: var(--bg-alt); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.email-modal .contact-form { max-width: none; padding: 0; }
.email-modal__result p { margin-bottom: 1rem; }
.email-modal__options { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---------- Botones flotantes ---------- */
.fab-stack {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-fab);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.fab {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  border: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease), opacity 0.25s var(--ease), visibility 0.25s;
}
.fab:hover { transform: translateY(-2px); }
.fab--whatsapp { background: var(--whatsapp); color: #fff; }
.fab--top {
  background: var(--wood-dark); color: var(--on-dark);
  opacity: 0; visibility: hidden;
}
.fab--top.is-visible { opacity: 1; visibility: visible; }

/* ---------- Páginas legales ---------- */
/* Páginas legales: reutilizan el site-header completo (con menú), pero sin
   hero oscuro detrás — así que se fuerza siempre el aspecto "header sólido"
   (fondo claro, texto oscuro), en vez del transparente pensado para fotos.
   :not(.is-open) para no romper el menú móvil a pantalla completa. */
.legal-body .site-header:not(.is-open) { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.legal-body .site-header:not(.is-open) .site-nav a:not(.site-header__cta) { color: var(--text); }
.legal-body .site-header:not(.is-open) .nav-toggle { background: rgba(15,11,8,0.08); }
.legal-body .site-header:not(.is-open) .nav-toggle span { background: var(--text); }
.legal-page { max-width: 760px; margin: 0 auto; padding: calc(var(--stage-height) + 100px + 3rem) var(--gutter) 5rem; }
.legal-page h1 { font-size: var(--step-3); }
.legal-page h2 { font-size: 1.2rem; margin-top: 2.2em; }
.legal-page ul { color: var(--text-soft); padding-left: 1.25em; }
.legal-page li { margin-bottom: 0.4em; }
.legal-updated { margin-top: 3rem; font-size: 0.8rem; color: var(--text-soft); font-style: italic; }

/* ---------- Footer ---------- */
.site-footer {
  color: var(--on-dark);
  padding: 6.5rem var(--gutter) 3.5rem;
  background-color: #1f130c;
  /* degradado oscuro + textura de madera en una sola capa (más fiable entre navegadores
     que un ::before con isolation/z-index negativo) */
  background-image:
    linear-gradient(180deg, rgba(15,9,5,0.8) 0%, rgba(15,9,5,0.88) 100%),
    url("../assets/img/footer/madera-taracea.webp");
  background-size: cover;
  background-position: center;
}
.site-footer__inner { max-width: var(--container); margin: 0 auto; text-align: center; }
.site-footer__logo {
  width: 108px; height: 108px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
  border: 3px solid rgba(245,239,227,0.85);
}
.site-footer__descriptor { color: var(--on-dark); text-transform: uppercase; font-weight: 600; font-size: 1rem; letter-spacing: 0.14em; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.site-footer address { font-style: normal; font-size: 1.05rem; line-height: 1.8; opacity: 0.95; margin: 1rem 0 1.75rem; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.site-footer address a { color: var(--on-dark); }
.site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.site-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--on-dark);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.5em 1.1em;
  border: 1px solid rgba(245,239,227,0.4);
  border-radius: 999px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.site-footer__social:hover { background: rgba(245,239,227,0.12); border-color: rgba(245,239,227,0.7); text-decoration: none; }
.site-footer__legal { display: flex; justify-content: center; gap: 2rem; font-size: 0.9rem; margin-bottom: 1.75rem; }
.site-footer__legal a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--on-dark);
  opacity: 0.9;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.site-footer__copy { font-size: 0.82rem; opacity: 0.75; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.site-footer__copy a { color: inherit; }