/* ============================================================
   FOTABLOS STUDIO · Landing de precios
   styles.css
   ------------------------------------------------------------
   Estructura:
   1. Variables de marca y por sección
   2. Reset y base
   3. Tipografía y utilidades (eyebrow, títulos)
   4. Header sticky + navegación
   5. Botones (WhatsApp, line buttons)
   6. Hero
   7. Dividers
   8. Secciones (estructura común)
   9. Temas por sección (dark, cream, wine, brown, black, paper)
   10. Specs / for-who / cards / chips / steps
   11. Galerías y placeholders de imagen
   12. Reseñas
   13. Footer
   14. Botón flotante WhatsApp
   15. Animaciones de entrada
   16. Responsive
   17. Lightbox (galerías)
   18. Página de preparación (preparacion.html)
   19. Hero marquee (galería de retratos en bucle del hero)
   ============================================================ */

/* === 1. VARIABLES ========================================== */
:root {
  /* Marca */
  --brand-black: #0a0a0a;
  --brand-gold:  #d4b463;
  --brand-teal:  #2bbfa8;
  --brand-paper: #f5f1ea;
  --brand-bone:  #ebe5db;

  /* Acentos derivados por sección */
  --wine-bg:   #2a0f15;
  --wine-deep: #1c0a0e;
  --rose:      #dd8593;
  --brown-bg:  #2e2118;
  --brown-deep:#241a13;

  /* Tipografía */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter Tight", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Courier New", monospace;

  /* Ritmo */
  --maxw: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-pad: clamp(4.5rem, 10vw, 9rem);
  --radius: 4px;
  --radius-chip: 999px;

  /* Transiciones */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* === 2. RESET Y BASE ======================================= */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

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

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--brand-paper);
  color: var(--brand-black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; }

ul, ol { list-style: none; padding: 0; }

::selection {
  background: var(--brand-gold);
  color: var(--brand-black);
}

/* Foco visible y accesible */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Respeta reduce-motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === 3. TIPOGRAFÍA Y UTILIDADES ============================ */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.62rem, 1.4vw, 0.72rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 60%, transparent);
  margin-bottom: 1.4rem;
}
.eyebrow--gold { color: var(--brand-gold); }
.eyebrow--teal { color: #1c8a78; }
.eyebrow--rose { color: var(--rose); }

.hero-title,
.section-title,
.footer-claim {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.hero-title em,
.section-title em,
.footer-claim em {
  font-style: italic;
  font-weight: 400;
}

/* === 4. HEADER STICKY ====================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0.85rem var(--gutter);
  background: color-mix(in srgb, var(--brand-paper) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: color-mix(in srgb, var(--brand-black) 12%, transparent);
}

.brand { text-decoration: none; flex-shrink: 0; }

/* Logo placeholder — se sustituye por <img class="logo-img"> */
.logo-placeholder {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  user-select: none;
}
.logo-word {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  color: var(--brand-black);
}
.logo-a { color: var(--brand-teal); }
.logo-rule {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--brand-gold);
  margin: 3px 0;
}
.logo-sub {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: color-mix(in srgb, var(--brand-black) 70%, transparent);
}
.logo-img { height: 42px; width: auto; }

.site-nav {
  display: flex;
  gap: clamp(0.9rem, 2.2vw, 1.8rem);
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.site-nav a {
  text-decoration: none;
  color: color-mix(in srgb, var(--brand-black) 65%, transparent);
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.site-nav a:hover {
  color: var(--brand-black);
  border-bottom-color: var(--brand-gold);
}

/* Selector de idioma ES / EN */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: auto; /* en móvil (sin nav) lo mantiene a la derecha */
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.lang-switch a,
.lang-switch .lang-current {
  padding: 0.3rem 0.4rem;
  text-decoration: none;
  border-radius: 2px;
}
.lang-switch a {
  color: color-mix(in srgb, var(--brand-black) 50%, transparent);
  transition: color 0.2s var(--ease);
}
.lang-switch a:hover { color: var(--brand-black); }
.lang-switch .lang-current {
  color: var(--brand-black);
  background: color-mix(in srgb, var(--brand-gold) 30%, transparent);
}

/* Botón hamburguesa (solo móvil/tablet).
   Dibujado en CSS con tres líneas que rotan a X al abrir. */
.nav-toggle {
  display: none; /* oculto por defecto — se activa en ≤900px */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--brand-black) 24%, transparent);
  border-radius: var(--radius);
  color: var(--brand-black);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.nav-toggle:hover { border-color: var(--brand-gold); color: var(--brand-gold); }
.nav-toggle::before,
.nav-toggle::after,
.nav-toggle .nav-toggle-bar {
  content: "";
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: top 0.3s var(--ease), transform 0.3s var(--ease),
              opacity 0.2s var(--ease);
}
.nav-toggle::before                 { top: 35%; }
.nav-toggle .nav-toggle-bar         { top: 50%; }
.nav-toggle::after                  { top: 65%; }
.nav-toggle[aria-expanded="true"]::before {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { opacity: 0; }
.nav-toggle[aria-expanded="true"]::after {
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* === 5. BOTONES ============================================ */
/* Botón WhatsApp sólido */
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.7rem 1.25rem;
  background: var(--brand-black);
  color: var(--brand-paper);
  border-radius: var(--radius);
  border: 1px solid var(--brand-black);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              color 0.25s var(--ease);
  flex-shrink: 0;
}
.btn-wa:hover {
  transform: translateY(-3px);
  background: var(--brand-teal);
  border-color: var(--brand-teal);
  color: var(--brand-black);
}
.wa-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-teal);
  transition: background 0.25s var(--ease);
}
.btn-wa:hover .wa-dot { background: var(--brand-black); }

.btn-wa--footer {
  font-size: 0.82rem;
  padding: 1rem 1.8rem;
  margin: 2rem 0 2.5rem;
}

/* Botón "line" — texto subrayado con flecha, elegante */
.btn-line {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 1.5px solid currentColor;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.btn-line:hover { transform: translateY(-3px); opacity: 0.78; }
.btn-line--gold { color: var(--brand-gold); }
.btn-line--teal { color: #1c8a78; }
.btn-line--rose { color: var(--rose); }

/* === 6. HERO =============================================== */
.hero {
  position: relative;
  background: var(--brand-black);
  color: var(--brand-paper);
  padding: clamp(5rem, 14vw, 11rem) var(--gutter) clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
/* Atmósfera de luz */
.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -20% 30% auto -10%;
  height: 70%;
  background: radial-gradient(ellipse at 30% 30%,
              color-mix(in srgb, var(--brand-gold) 22%, transparent),
              transparent 62%);
  pointer-events: none;
}
/* Grano: filtro de ruido SVG inline como data-URI (sin peticiones extra) */
.hero-grain,
.section-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.hero-grain { position: absolute; inset: 0; z-index: 2; opacity: 0.5; pointer-events: none; }

/* Foto de fondo opcional (hero y secciones).
   El JS le pone la imagen solo cuando la sección se acerca al viewport
   (carga diferida). Va atenuada, por debajo de la textura, para que el
   texto se siga leyendo con buen contraste (WCAG AA). */
.section-photo,
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  pointer-events: none;
}
.section-photo.is-loaded,
.hero-photo.is-loaded { opacity: var(--photo-opacity, 0.24); }

/* Opacidad por tema: más sutil en fondos claros para no perder contraste. */
.hero-photo,
.section--dark  .section-photo,
.section--wine  .section-photo,
.section--brown .section-photo { --photo-opacity: 0.30; }
.section--cream .section-photo,
.section--paper .section-photo { --photo-opacity: 0.14; }
/* Extras: overlay más oscuro, la foto se mostraba demasiado y se leía mal. */
.section--black .section-photo { --photo-opacity: 0.16; }

.hero-inner {
  position: relative;
  z-index: 3;
  max-width: var(--maxw);
  margin: 0 auto;
}
.hero-title {
  font-size: clamp(2.4rem, 7vw, 5.3rem);
  max-width: 16ch;
  margin-bottom: 1.8rem;
  /* Cuando el título tenga que partirse, equilibrar las líneas
     en lugar de dejar una palabra suelta en la última línea. */
  text-wrap: balance;
}
.hero-lede {
  font-size: clamp(1rem, 2vw, 1.22rem);
  font-weight: 300;
  max-width: 52ch;
  color: color-mix(in srgb, var(--brand-paper) 82%, transparent);
  margin-bottom: 3rem;
}

/* Índice del hero */
.hero-index {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: color-mix(in srgb, var(--brand-paper) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-paper) 14%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 760px;
}
.hero-index a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 1.15rem 1.4rem;
  background: var(--brand-black);
  text-decoration: none;
  transition: background 0.25s var(--ease);
}
.hero-index a:hover { background: #161616; }
.hero-index-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--brand-gold);
}
.hero-index-label {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.18rem);
  font-weight: 300;
}
.hero-index-price {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--brand-paper) 70%, transparent);
  margin-left: auto;
}

.hero-meta {
  margin-top: 2.4rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--brand-paper) 55%, transparent);
}
.hero-meta a {
  color: var(--brand-teal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.hero-meta a:hover { border-bottom-color: var(--brand-teal); }

/* === 7. DIVIDERS =========================================== */
.divider {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
}
.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
              transparent,
              color-mix(in srgb, var(--brand-black) 28%, transparent),
              transparent);
}
.divider-label {
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 1.8vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-black) 62%, transparent);
}

/* Efecto sutil al entrar en pantalla: las líneas se despliegan desde
   la etiqueta hacia fuera (la etiqueta hace su fadeUp con .reveal).
   Solo se activa cuando el JS marca el divider con .reveal; si no hay
   JS o el usuario prefiere menos movimiento, las líneas se ven normales. */
.divider.reveal .divider-line {
  transform: scaleX(0);
  transition: transform 0.9s var(--ease);
}
.divider.reveal.is-visible .divider-line { transform: scaleX(1); }
.divider.reveal > .divider-line:first-child { transform-origin: right; }
.divider.reveal > .divider-line:last-child  { transform-origin: left; }

/* === 8. SECCIONES — estructura común ======================= */
.section {
  position: relative;
  padding: var(--section-pad) var(--gutter);
  overflow: hidden;
  scroll-margin-top: 70px; /* compensa el header sticky al usar anchors */
}
.section-inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
}
.section-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.section-title {
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  margin-bottom: 1.5rem;
}
.section-manifesto {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 300;
  max-width: 56ch;
}
.section-subnote {
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, currentColor 70%, transparent);
}
.section-subnote strong { font-weight: 500; color: currentColor; }

.section-cta { margin-top: clamp(2rem, 5vw, 3rem); }

/* Texturas y atmósfera para fondos oscuros */
.section-grain { position: absolute; inset: 0; z-index: 1; opacity: 0.45; pointer-events: none; }
.section-glow {
  position: absolute;
  z-index: 1;
  width: 60%;
  height: 60%;
  pointer-events: none;
  filter: blur(10px);
}
.section-glow--gold {
  top: -10%; right: -10%;
  background: radial-gradient(ellipse at center,
              color-mix(in srgb, var(--brand-gold) 16%, transparent),
              transparent 65%);
}
.section-glow--wine {
  bottom: -15%; left: -10%;
  background: radial-gradient(ellipse at center,
              color-mix(in srgb, var(--rose) 16%, transparent),
              transparent 65%);
}

/* === 9. TEMAS POR SECCIÓN ================================== */
.section--dark  { background: var(--brand-black); color: var(--brand-paper); }
.section--black { background: #060606;            color: #ece9e3; }
.section--cream { background: var(--brand-paper); color: var(--brand-black); }
.section--paper { background: var(--brand-bone);  color: var(--brand-black); }
.section--wine  {
  background: linear-gradient(180deg, var(--wine-bg), var(--wine-deep));
  color: #f3e4e6;
}
.section--brown {
  background: linear-gradient(180deg, var(--brown-bg), var(--brown-deep));
  color: #f0e6da;
}

/* === 10. SPECS / FOR-WHO / CARDS / CHIPS / STEPS =========== */
.layout-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: clamp(3rem, 7vw, 5rem);
  align-items: start;
}

/* Lista de specs */
.specs { display: grid; gap: 0; }
.spec {
  display: grid;
  grid-template-columns: minmax(120px, 0.4fr) 1fr;
  gap: 1.5rem;
  padding: 1.05rem 0;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.spec:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.spec dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 58%, transparent);
  padding-top: 0.2rem;
}
.spec dd {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 300;
}
.spec-price { font-size: clamp(1.6rem, 4vw, 2.4rem) !important; }
.specs--gold .spec-price { color: var(--brand-gold); }
.specs--teal .spec-price { color: #1c8a78; }
.spec-note {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 55%, transparent);
  vertical-align: middle;
  margin-left: 0.4rem;
}

/* Bloque "para quién" */
.for-who {
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, currentColor 4%, transparent);
}
.for-who-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.for-who--gold .for-who-label { color: var(--brand-gold); }
.for-who--teal .for-who-label { color: #1c8a78; }
.for-who-text {
  font-size: 1rem;
  font-weight: 300;
  margin-bottom: 1.6rem;
}

/* Cards genéricas */
.cards { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.cards--events  { grid-template-columns: repeat(4, 1fr); }
.cards--bonos   { grid-template-columns: repeat(2, 1fr); }
.cards--extras  { grid-template-columns: repeat(2, 1fr); }

/* Event card */
.event-card {
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
  background: color-mix(in srgb, currentColor 4%, transparent);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.event-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--rose) 55%, transparent);
}
.event-card-body { padding: 1.4rem 1.4rem 1.6rem; }
.event-card-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}
.event-card-body p {
  font-size: 0.92rem;
  font-weight: 300;
  color: color-mix(in srgb, currentColor 82%, transparent);
}
.event-card-price {
  font-family: var(--font-mono) !important;
  font-size: 1.1rem !important;
  font-weight: 500;
  color: var(--rose) !important;
  margin-top: 1rem;
}

/* Bono card */
.bono-card {
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 35%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand-gold) 6%, transparent);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.bono-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-gold);
}
.bono-price {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  color: var(--brand-gold);
  line-height: 1;
  margin-bottom: 1.2rem;
}
.bono-desc {
  font-size: 1rem;
  font-weight: 300;
  margin-bottom: 1.2rem;
}
.bono-validity {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 60%, transparent);
  margin-bottom: 1.8rem;
}

/* Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 45%, transparent);
  border-radius: var(--radius-chip);
  color: color-mix(in srgb, currentColor 88%, transparent);
}

/* Cómo funciona — pasos */
.how-it-works { margin-top: clamp(3rem, 7vw, 5rem); }
.how-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 2rem;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
}
.step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid color-mix(in srgb, var(--brand-gold) 40%, transparent);
}
.step-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--brand-gold);
  letter-spacing: 0.1em;
}
.step-body h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.step-body p {
  font-size: 0.92rem;
  font-weight: 300;
  color: color-mix(in srgb, currentColor 80%, transparent);
}

/* Extra card */
.extra-card {
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.extra-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, currentColor 40%, transparent);
}
.extra-price {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1;
  margin-bottom: 1rem;
}
.extra-unit {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: color-mix(in srgb, currentColor 60%, transparent);
}
.extra-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  margin-bottom: 0.7rem;
}
.extra-card p {
  font-size: 0.95rem;
  font-weight: 300;
  color: color-mix(in srgb, currentColor 82%, transparent);
}

/* Sección Photobooks — bloque de declaración grande */
.photobook-statement {
  margin: clamp(2.5rem, 6vw, 4.5rem) 0;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  border-top: 1px solid color-mix(in srgb, var(--brand-gold) 38%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-gold) 38%, transparent);
}
.photobook-big {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  margin: 1rem 0 1.6rem;
  max-width: 16ch;
}
.photobook-big em {
  font-style: italic;
  font-weight: 400;
  color: var(--brand-gold);
}
.photobook-sub {
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  font-weight: 300;
  max-width: 52ch;
  color: color-mix(in srgb, currentColor 82%, transparent);
}
.photobook-note {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  align-items: flex-start;
  max-width: 60ch;
}
.photobook-note p {
  font-size: 1rem;
  font-weight: 300;
  color: color-mix(in srgb, currentColor 82%, transparent);
}
.photobook-note a:not(.btn-line) {
  color: var(--brand-gold);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-gold) 50%, transparent);
}
.photobook-note a:not(.btn-line):hover { border-bottom-color: var(--brand-gold); }

/* === 11. GALERÍAS Y PLACEHOLDERS DE IMAGEN ================= */
.gallery { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); }

/* Mosaico editorial asimétrico (Artística).
   Tres filas "justificadas": dentro de cada fila, las fotos comparten
   altura y su ancho es proporcional a su forma (flex-grow ∝ proporción
   ancho/alto). Así cada hueco respeta SU proporción exacta —vertical
   4:5, horizontal 3:2, cuadrada 1:1— y la fila se llena entera, sin
   huecos. El recorte de cada foto lo resuelve object-fit: cover. */
.gallery--mosaic {
  display: flex;
  flex-direction: column;
}
.mosaic-row {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  align-items: flex-start;
}
.gallery--mosaic .ph {
  min-width: 0; /* permite que el flex encoja la foto */
}
/* flex-grow proporcional a la proporción ancho/alto de cada foto
   (tall 4:5 → 0.8 · wide 3:2 → 1.5 · sq 1:1 → 1.0 · ×10 para enteros).
   Cada .ph conserva su aspect-ratio, que fija la altura. */
.gallery--mosaic .ph--tall { flex: 8 1 0; }
.gallery--mosaic .ph--wide { flex: 15 1 0; }
.gallery--mosaic .ph--sq   { flex: 10 1 0; }

/* Grid 4×2 retrato (Business) */
.gallery--grid8 { grid-template-columns: repeat(4, 1fr); }

/* Placeholder de imagen — estilo coherente, no gris genérico.
   Cuando se sustituye por <img>, el <img> hereda el aspect-ratio
   por las clases (ph--tall, ph--portrait, etc.) si se mantienen,
   o se define con los atributos width/height. */
.ph,
.card-ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
  background:
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, currentColor 6%, transparent) 0 12px,
      transparent 12px 24px);
  overflow: hidden;
}
.ph span,
.card-ph span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, currentColor 78%, transparent);
}
.ph small,
.card-ph small {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 48%, transparent);
}

/* Aspect ratios de los placeholders */
.ph--tall     { aspect-ratio: 4 / 5; }
.ph--wide     { aspect-ratio: 3 / 2; }
.ph--sq       { aspect-ratio: 1 / 1; }
.ph--portrait { aspect-ratio: 4 / 5; }
.card-ph      { aspect-ratio: 4 / 5; }

/* Tinte de placeholder según atmósfera de sección */
.ph--portrait { background-color: color-mix(in srgb, var(--brand-teal) 7%, transparent); }
.card-ph--wine { background-color: color-mix(in srgb, var(--rose) 10%, transparent); }

/* Cuando se reemplaza por <img>, asegura encuadre correcto */
.gallery img,
.event-card > img,
.ph img,
.card-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.gallery--mosaic img.ph--tall { aspect-ratio: 4 / 5; }
.gallery--mosaic img.ph--wide { aspect-ratio: 3 / 2; }
.gallery--mosaic img.ph--sq   { aspect-ratio: 1 / 1; }

/* Cuando el placeholder ya contiene una foto real, se oculta el marco
   de relleno (borde a rayas, fondo). Así basta con pegar un <img>
   DENTRO del <div class="ph ..."> — no hace falta sustituir el div. */
.ph:has(img),
.card-ph:has(img) {
  padding: 0;
  border: none;
  background: none;
}

/* Efecto hover de las galerías: la foto se eleva un poco, hace un
   zoom suave dentro de su marco y se ilumina. Reposo ligeramente
   atenuado para que el hover "encienda" la imagen. */
.gallery .ph {
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.gallery .ph img,
.card-ph img {
  transition: transform 0.7s var(--ease), filter 0.45s var(--ease);
  filter: brightness(0.93);
}
.gallery .ph:has(img):hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.6);
}
.gallery .ph:has(img):hover img {
  transform: scale(1.07);
  filter: brightness(1.05);
}
/* En las cards de eventos, la card entera ya se eleva: aquí solo
   hacemos el zoom + iluminación de la foto. */
.event-card:hover .card-ph img {
  transform: scale(1.06);
  filter: brightness(1.05);
}

/* === 12. RESEÑAS =========================================== */
.reviews-widget { min-height: 280px; }

/* Reseñas a ancho completo: rompemos el max-width de .section-inner
   para que el widget de EmbedSocial vaya de borde a borde del viewport.
   El header (eyebrow + título + manifesto) mantiene su columna de
   lectura. La sección tiene overflow:hidden, así que el desbordamiento
   horizontal no genera scroll en el body. */
#resenas .reviews-widget {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  /* Anulamos el padding lateral de la sección solo para el widget */
  padding-left: 0;
  padding-right: 0;
}

/* === 12b. FAQ (acordeón) =================================== */
/* Acordeón nativo con <details>: accesible y funciona sin JS.
   El JS solo añade el comportamiento de "uno abierto a la vez". */
.faq {
  max-width: 760px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.faq-item:first-child {
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.3rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.32;
  transition: color 0.2s var(--ease);
}
.faq-q::-webkit-details-marker { display: none; } /* quita el triángulo */
.faq-q:hover { color: var(--brand-gold); }
.faq-q:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 4px;
  border-radius: 2px;
}
.faq-item[open] > .faq-q { color: var(--brand-gold); }

/* Chevron dibujado en CSS: gira al abrir */
.faq-icon {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-bottom: 4px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.faq-item[open] .faq-icon { transform: rotate(225deg); }

.faq-a {
  padding: 0 0 1.5rem;
}
.faq-a p {
  font-size: 1rem;
  font-weight: 300;
  max-width: 62ch;
  color: color-mix(in srgb, currentColor 82%, transparent);
}
.faq-a a {
  color: var(--brand-gold);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-gold) 50%, transparent);
  transition: border-color 0.2s var(--ease);
}
.faq-a a:hover { border-bottom-color: var(--brand-gold); }
/* Aparición suave del contenido al abrir */
.faq-item[open] .faq-a {
  animation: faqIn 0.35s var(--ease);
}
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === 12c. CTA hacia la galería externa ===================== */
/* Es una sección como las demás (#galeria-cta), pero con la
   cabecera y la llamada centradas para que funcione como un
   "alto en el camino" antes del último mensaje. */
#galeria-cta .section-head {
  margin-inline: auto;
  text-align: center;
}
#galeria-cta .section-manifesto { margin-inline: auto; }
#galeria-cta .section-cta { text-align: center; }

/* === 13. FOOTER ============================================ */
.site-footer {
  background: var(--brand-paper);
  padding: clamp(4rem, 9vw, 7rem) var(--gutter);
  border-top: 1px solid color-mix(in srgb, var(--brand-black) 12%, transparent);
}
.footer-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.logo-placeholder--footer { margin: 0 auto 2.5rem; }
.logo-placeholder--footer .logo-word { font-size: 1.7rem; }
.logo-placeholder--footer .logo-sub  { font-size: 0.62rem; }

.footer-claim {
  font-size: clamp(1.8rem, 5vw, 3rem);
  margin-bottom: 1.2rem;
}
.footer-text {
  font-size: 1.05rem;
  font-weight: 300;
  color: color-mix(in srgb, var(--brand-black) 78%, transparent);
}
/* Sub-navegación del footer: secciones que no están en la cabecera
   (Extras, Reseñas, FAQ). Tipografía mono en uppercase para distinguirla
   visualmente del CTA grande de WhatsApp y de la meta info. */
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.8rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--brand-black) 10%, transparent);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-nav a {
  color: color-mix(in srgb, var(--brand-black) 75%, transparent);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-nav a:hover {
  color: var(--brand-teal);
  border-bottom-color: var(--brand-gold);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--brand-black) 60%, transparent);
}
.footer-meta a {
  color: var(--brand-black);
  text-decoration: none;
  border-bottom: 1px solid var(--brand-gold);
}
.footer-meta a:hover { color: var(--brand-teal); }
.footer-fineprint {
  margin-top: 2rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--brand-black) 45%, transparent);
}

/* === 14. BOTÓN FLOTANTE WHATSAPP (solo móvil) ============== */
.btn-wa-float {
  display: none; /* visible solo en móvil — ver media query */
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 200;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.15rem;
  background: var(--brand-black);
  color: var(--brand-paper);
  text-decoration: none;
  border-radius: var(--radius-chip);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.btn-wa-float svg { color: var(--brand-teal); }

/* Botón "volver arriba" — aparece al bajar (clase .is-visible vía JS) */
.scroll-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: color-mix(in srgb, var(--brand-black) 86%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--brand-paper);
  border: 1px solid color-mix(in srgb, var(--brand-paper) 22%, transparent);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease),
              transform 0.35s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease);
}
.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top:hover {
  border-color: var(--brand-gold);
  color: var(--brand-gold);
  transform: translateY(-2px);
}
.scroll-top svg { width: 18px; height: 18px; }

/* === 15. ANIMACIONES DE ENTRADA ============================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Pequeño escalonado para grupos */
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

/* === 16. RESPONSIVE ======================================== */

/* Tablet — hasta 900px */
@media (max-width: 900px) {
  .layout-split { grid-template-columns: 1fr; }
  .cards--events { grid-template-columns: repeat(2, 1fr); }
  .gallery--grid8 { grid-template-columns: repeat(2, 1fr); }
  /* El mosaico 6×6 escala solo, se mantiene tal cual en tablet. */
  .steps { grid-template-columns: 1fr; }

  /* Navegación móvil: la nav inline se oculta y aparece el botón
     hamburguesa. Cuando el header tiene .is-menu-open la nav vuelve,
     pero esta vez como panel desplegable bajo la cabecera. */
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; }
  .site-header.is-menu-open .site-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.6rem var(--gutter) 1.2rem;
    background: color-mix(in srgb, var(--brand-paper) 96%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-black) 12%, transparent);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    animation: navPanelIn 0.25s var(--ease);
  }
  .site-header.is-menu-open .site-nav a {
    padding: 0.85rem 0;
    color: var(--brand-black);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-black) 8%, transparent);
  }
  .site-header.is-menu-open .site-nav a:last-child { border-bottom: none; }
  .site-header.is-menu-open .site-nav a:hover {
    color: var(--brand-gold);
    border-bottom-color: var(--brand-gold);
  }
  @keyframes navPanelIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Móvil — hasta 600px */
@media (max-width: 600px) {
  /* Título del hero: reducimos el tamaño y eliminamos el límite
     de max-width:16ch para que "No es un fotógrafo más." quepa
     en una sola línea en pantallas estrechas. */
  .hero-title {
    font-size: clamp(1.45rem, 6.6vw, 2rem);
    max-width: none;
  }

  .hero-index { grid-template-columns: 1fr; }
  .cards--events,
  .cards--bonos,
  .cards--extras { grid-template-columns: 1fr; }
  .gallery--grid8 { grid-template-columns: 1fr; }
  /* En móvil cada fila del mosaico se apila: una foto por línea, a
     ancho completo, conservando su proporción. */
  .mosaic-row {
    flex-direction: column;
    align-items: stretch;
  }
  .gallery--mosaic .ph { flex: 0 0 auto; }

  .spec { grid-template-columns: 1fr; gap: 0.3rem; }
  .spec dt { padding-top: 0; }

  .btn-wa--header { display: none; } /* el flotante lo cubre en móvil */
  .btn-wa-float { display: inline-flex; }

  /* En móvil el WhatsApp ocupa la esquina derecha: el "volver
     arriba" se pasa a la izquierda para que no se solapen. */
  .scroll-top { right: auto; left: 1rem; bottom: 1rem; }

  .hero-index a { flex-wrap: wrap; }

  /* En móvil se ocultan las fotos de fondo de las secciones: se veían
     raras y, además, así no se descargan en el dispositivo donde más
     importa la velocidad. Cada sección queda con su color y textura. */
  .section-photo,
  .hero-photo { display: none; }
}

/* Pantallas grandes — un poco más de aire */
@media (min-width: 1280px) {
  .hero-title { font-size: 5.3rem; }
}

/* === 17. LIGHTBOX (galerías) =============================== */
/* Cursor de "ampliar" en las fotos de galería que abren lightbox */
.gallery .ph:has(img),
.card-ph:has(img) { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--brand-black) 95%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  max-width: 100%;
  transform: scale(0.94);
  transition: transform 0.4s var(--ease);
}
.lightbox.is-open .lightbox-figure { transform: scale(1); }

.lightbox-img {
  display: block;
  max-width: min(92vw, 1400px);
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  background: var(--brand-black);
  transition: opacity 0.3s var(--ease);
}
.lightbox-img.is-swapping { opacity: 0; }

.lightbox-caption {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: center;
  max-width: 60ch;
  color: color-mix(in srgb, var(--brand-paper) 68%, transparent);
}

.lightbox-counter {
  position: absolute;
  top: clamp(1rem, 3vw, 1.9rem);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  color: color-mix(in srgb, var(--brand-paper) 55%, transparent);
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--brand-paper) 22%, transparent);
  border-radius: 50%;
  color: var(--brand-paper);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
              transform 0.25s var(--ease);
}
.lightbox-close:hover,
.lightbox-nav:hover {
  border-color: var(--brand-gold);
  color: var(--brand-gold);
}
.lightbox-nav:hover { transform: scale(1.06); }

.lightbox-close {
  top: clamp(1rem, 3vw, 1.9rem);
  right: clamp(1rem, 3vw, 1.9rem);
  width: 44px;
  height: 44px;
}
.lightbox-close svg { width: 17px; height: 17px; }

.lightbox-nav {
  top: 50%;
  width: 52px;
  height: 52px;
  margin-top: -26px;
}
.lightbox-prev { left: clamp(0.6rem, 3vw, 2rem); }
.lightbox-next { right: clamp(0.6rem, 3vw, 2rem); }
.lightbox-nav svg { width: 22px; height: 22px; }
.lightbox-nav[hidden] { display: none; }

/* Bloquea el scroll del fondo mientras el lightbox está abierto */
body.lightbox-open { overflow: hidden; }

@media (max-width: 600px) {
  .lightbox-nav {
    width: 42px;
    height: 42px;
    margin-top: -21px;
  }
  .lightbox-img { max-height: 70vh; }
}

/* === 18. PÁGINA DE PREPARACIÓN (preparacion.html) ========== */
/* Estilos exclusivos de la guía de preparación de sesión. Las
   clases .prep-* no se usan en ninguna otra página, así que esta
   sección no afecta a la landing ni a la galería. */

/* Firma de Pablo bajo el saludo del hero */
.prep-signature {
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--brand-gold);
}

/* Animación de entrada de los bloques propios de la página.
   El script de la página añade .prep-reveal solo si el navegador
   puede animar; sin JS, el contenido se ve directamente. */
.prep-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.prep-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --- La ropa: dos columnas (funciona bien / mejor evitar) --- */
.prep-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.prep-cols-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 0.9rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.prep-do .prep-cols-label   { color: #1c8a78; }
.prep-dont .prep-cols-label { color: #b3475a; }
.prep-cols ul { display: grid; gap: 0.9rem; }
.prep-cols li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.5;
}
.prep-cols li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
.prep-do li::before   { content: "+"; color: #1c8a78; }
.prep-dont li::before { content: "\00d7"; color: #b3475a; }

.prep-aside {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: 1rem 1.3rem;
  border-left: 2px solid var(--brand-gold);
  font-size: 0.97rem;
  font-weight: 300;
  font-style: italic;
  color: color-mix(in srgb, currentColor 82%, transparent);
}

/* --- Tips (antes de venir / puntualidad y cambios) --- */
.prep-tips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
}
.prep-tips--two { grid-template-columns: 1fr 1fr; }
.prep-tip {
  padding-top: 1.3rem;
  border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}
.prep-tip h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}
.prep-tip p {
  font-size: 0.95rem;
  font-weight: 300;
  color: color-mix(in srgb, currentColor 82%, transparent);
}

/* --- Callout destacado (venir sin acompañantes) --- */
.prep-callout {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 50%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--brand-gold) 9%, transparent);
}
.prep-callout-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 62%, transparent);
  margin-bottom: 0.7rem;
}
.prep-callout-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 1.95rem);
  margin-bottom: 1rem;
}
.prep-callout p {
  font-size: 1rem;
  font-weight: 300;
  max-width: 64ch;
}
.prep-callout p + p { margin-top: 0.9rem; }

/* --- Checklist interactivo (qué traer) --- */
.prep-checklist { max-width: 720px; }
.prep-checklist ul { display: grid; }
.prep-checklist li {
  border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.prep-checklist li:first-child {
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.prep-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.05rem 0.2rem;
  cursor: pointer;
}
.prep-checklist input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0.1rem 0 0;
  border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.prep-checklist input:hover { border-color: var(--brand-gold); }
.prep-checklist input:checked {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
}
.prep-checklist input:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--brand-black);
  border-bottom: 2px solid var(--brand-black);
  transform: rotate(45deg);
}
.prep-checklist input:focus-visible {
  outline: 2px solid var(--brand-teal);
  outline-offset: 3px;
}
.prep-checklist span {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.5;
  transition: color 0.25s var(--ease);
}
.prep-checklist li.is-done span {
  color: color-mix(in srgb, currentColor 42%, transparent);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--brand-gold) 75%, transparent);
}
.prep-checklist-count {
  margin-top: 1.7rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--brand-gold);
}

/* --- Línea de tiempo (el día paso a paso / después) --- */
.prep-timeline { max-width: 780px; }
.prep-tl-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 1.6rem);
  padding: 1.6rem 0;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.prep-tl-item:last-child {
  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.prep-tl-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, currentColor 52%, transparent);
  padding-top: 0.25rem;
}
.prep-tl-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  margin-bottom: 0.45rem;
}
.prep-tl-body p {
  font-size: 0.97rem;
  font-weight: 300;
  color: color-mix(in srgb, currentColor 82%, transparent);
}

/* --- Párrafo de texto suelto (sección "en la sesión") --- */
.prep-text {
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  font-weight: 300;
  max-width: 58ch;
  margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
}

/* Responsive de la página de preparación */
@media (max-width: 900px) {
  .prep-tips { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .prep-cols { grid-template-columns: 1fr; }
  .prep-tips,
  .prep-tips--two { grid-template-columns: 1fr; }
}

/* === 19. HERO MARQUEE (galería de retratos en bucle) ======== */
/* Dos filas de fotos pasando en bucle continuo a lo ancho del
   hero, en direcciones opuestas. La fila se duplica en el HTML
   y se traslada un -50% para que el bucle sea perfectamente
   continuo (no se nota el salto). Al hacer hover se pausa y la
   foto se ilumina; respeta prefers-reduced-motion. */
.hero-marquee {
  /* Va entre el final del hero y el divider de la primera
     sesión. Full-bleed (de borde a borde del viewport) con
     fondo negro: las fotos se funden en el negro del hero
     gracias al mask-image de los bordes laterales. */
  position: relative;
  z-index: 3;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  background: var(--brand-black);
  display: grid;
  grid-template-columns: 1fr;  /* explícito: 1 columna, las dos filas apiladas */
  gap: clamp(0.6rem, 1.2vw, 1rem);
  overflow: hidden;
}

.hero-marquee-row {
  overflow: hidden;
  /* Fundido en los bordes laterales: las fotos parecen "entrar y
     salir" del fondo del hero en lugar de cortarse en seco. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 6%,
    black 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 6%,
    black 94%,
    transparent 100%
  );
}

.hero-marquee-track {
  display: flex;
  flex-direction: row;       /* explícito: las fotos van en horizontal, no apiladas */
  flex-wrap: nowrap;
  gap: clamp(0.6rem, 1.2vw, 1rem);
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
}

.hero-marquee-track li {
  flex-shrink: 0;
  width: clamp(140px, 17vw, 200px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: #161616;
}

.hero-marquee-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.82) saturate(0.95);
  transition: filter 0.5s var(--ease);
}

/* Direcciones de scroll: la primera fila a la izquierda, la
   segunda a la derecha — da sensación de profundidad. */
.hero-marquee-row--left .hero-marquee-track {
  animation: marquee-left 60s linear infinite;
}
.hero-marquee-row--right .hero-marquee-track {
  animation: marquee-right 60s linear infinite;
}

@keyframes marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes marquee-right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Hover solo en desktop con puntero: pausa la fila y aclara
   la foto bajo el cursor — para que se pueda mirar con calma. */
@media (hover: hover) and (pointer: fine) {
  .hero-marquee-row:hover .hero-marquee-track {
    animation-play-state: paused;
  }
  .hero-marquee-track li:hover img {
    filter: brightness(1.05) saturate(1.05);
  }
}

/* Si el visitante prefiere menos movimiento, dejamos las fotos
   quietas en una posición intermedia y se ve sin animación. */
@media (prefers-reduced-motion: reduce) {
  .hero-marquee-row--left .hero-marquee-track,
  .hero-marquee-row--right .hero-marquee-track {
    animation: none;
    transform: translate3d(-25%, 0, 0);
  }
}

/* Móvil y tablet pequeña: mantenemos las DOS filas visibles para
   que el marquee siga teniendo presencia, pero las fotos se hacen
   más pequeñas y el espacio entre filas se reduce para no comer
   demasiada pantalla. */
@media (max-width: 700px) {
  .hero-marquee { gap: 0.5rem; }
  .hero-marquee-track { gap: 0.5rem; }
  .hero-marquee-track li {
    width: clamp(95px, 28vw, 130px);
  }
}

/* Móviles muy estrechos (iPhone SE, etc.) */
@media (max-width: 380px) {
  .hero-marquee-track li {
    width: 95px;
  }
}

/* === 20. NAV DROPDOWN "Proyectos" ========================== */
/* Un ítem del menú que despliega una vista previa de proyectos.
   En desktop se abre al hover o al pulsar; en móvil, dentro del
   menú hamburguesa, se comporta como acordeón. */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-trigger {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--brand-black) 65%, transparent);
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger[aria-expanded="true"] {
  color: var(--brand-black);
  border-bottom-color: var(--brand-gold);
}
/* Chevron dibujado en CSS: gira 180° al abrir */
.nav-dropdown-chevron {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-1px, -2px);
  transition: transform 0.3s var(--ease);
}
.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-chevron {
  transform: rotate(-135deg) translate(1px, 2px);
}

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: -0.5rem;
  min-width: 340px;
  background: var(--brand-paper);
  border: 1px solid color-mix(in srgb, var(--brand-black) 12%, transparent);
  box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.28),
              0 6px 14px -8px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--ease),
              transform 0.22s var(--ease),
              visibility 0.22s var(--ease);
  z-index: 110;
}
.nav-dropdown[data-open="true"] .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 0.95rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  color: var(--brand-black);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-black) 8%, transparent);
  transition: background 0.18s var(--ease);
}
.nav-dropdown-item:last-child { border-bottom: 0; }
.nav-dropdown-item:hover {
  background: color-mix(in srgb, var(--brand-gold) 10%, transparent);
}
.nav-dropdown-item img {
  width: 60px;
  height: 75px;
  object-fit: cover;
  background: color-mix(in srgb, var(--brand-black) 8%, transparent);
}
.nav-dropdown-item-name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--brand-black);
  margin-bottom: 0.2rem;
  line-height: 1.2;
}
.nav-dropdown-item-desc {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 300;
  color: color-mix(in srgb, var(--brand-black) 65%, transparent);
  line-height: 1.4;
}
/* Nota "más proyectos en camino" al pie del panel */
.nav-dropdown-empty {
  display: block;
  padding: 0.85rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-black) 45%, transparent);
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--brand-black) 8%, transparent);
}

/* En móvil (dentro del menú hamburguesa): acordeón inline */
@media (max-width: 900px) {
  .nav-dropdown { display: block; }
  .nav-dropdown-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 0.85rem 0;
    color: var(--brand-black);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-black) 8%, transparent);
    font-size: 0.85rem;
    letter-spacing: 0.18em;
  }
  .nav-dropdown-panel {
    position: static;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding-bottom: 0.6rem;
  }
  .nav-dropdown[data-open="true"] .nav-dropdown-panel {
    display: block;
  }
  .nav-dropdown-item {
    padding: 0.8rem 0.4rem;
  }
}

/* === 21. SECCIÓN "PROYECTOS" (landing) ===================== */
/* Grid editorial de tarjetas de proyecto: imagen 4:5, número
   pequeño en mono, título display italic, descripción corta.
   Hover: la card sube y la foto respira con brightness+scale. */
.cards--proyectos {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
}
.proyecto-card {
  position: relative;
  transition: transform 0.4s var(--ease);
}
.proyecto-card > a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.proyecto-card:hover { transform: translateY(-4px); }
.proyecto-card-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 8%, transparent);
  margin-bottom: 1.4rem;
}
.proyecto-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92);
  transition: transform 0.7s var(--ease), filter 0.5s var(--ease);
}
.proyecto-card:hover .proyecto-card-image img {
  transform: scale(1.04);
  filter: brightness(1.05);
}
.proyecto-card-number {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-gold);
  margin-bottom: 0.7rem;
}
.proyecto-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  line-height: 1.1;
  margin-bottom: 0.7rem;
}
.proyecto-card-desc {
  font-size: 1rem;
  font-weight: 300;
  color: color-mix(in srgb, currentColor 82%, transparent);
  margin-bottom: 1.4rem;
  max-width: 32ch;
}
.proyecto-card-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-gold);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--brand-gold);
  transition: transform 0.3s var(--ease);
}
.proyecto-card:hover .proyecto-card-link { transform: translateX(5px); }

/* Card placeholder "próximamente" — mantiene rejilla mientras
   añades más proyectos. Puedes borrarla cuando tengas los 9. */
.proyecto-card--coming .proyecto-card-image {
  background:
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, currentColor 6%, transparent) 0 12px,
      transparent 12px 24px);
  border: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
  display: grid;
  place-items: center;
}
.proyecto-card--coming .proyecto-card-image::after {
  content: "Próximamente";
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 48%, transparent);
}
.proyecto-card--coming .proyecto-card-title,
.proyecto-card--coming .proyecto-card-desc {
  color: color-mix(in srgb, currentColor 45%, transparent);
}
.proyecto-card--coming { pointer-events: none; }

@media (max-width: 700px) {
  .cards--proyectos { grid-template-columns: 1fr; gap: 3rem; }
}

/* Nota final al pie de la sección */
.proyectos-more {
  margin-top: clamp(2.8rem, 5vw, 4rem);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 55%, transparent);
}

/* === 22. SUBPÁGINA DE PROYECTO (proyecto-*.html) =========== */
/* Página independiente por proyecto — mini-editorial estilo revista.
   Header simplificado (sin nav de venta), hero full-bleed, ensayo,
   ritmo de imágenes mixto, pull-quote, notas técnicas, CTA suave. */
.proyecto-page {
  background: var(--brand-paper);
  color: var(--brand-black);
}
.proyecto-header {
  gap: clamp(0.8rem, 2vw, 1.6rem);
}
.proyecto-back {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-black) 65%, transparent);
  text-decoration: none;
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  margin-left: auto;
}
.proyecto-back:hover {
  color: var(--brand-black);
  border-bottom-color: var(--brand-gold);
}

.proyecto-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--brand-black);
}
.proyecto-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 700px) {
  .proyecto-hero { aspect-ratio: 4 / 5; }
}

.proyecto-intro {
  padding: clamp(3.5rem, 7vw, 6rem) var(--gutter) clamp(2rem, 5vw, 3.5rem);
}
.proyecto-intro-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.proyecto-intro .eyebrow { margin-bottom: 1.4rem; }
.proyecto-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 0;
  text-wrap: balance;
}
.proyecto-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--brand-gold);
}

.proyecto-essay {
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}
.proyecto-essay-inner {
  max-width: 620px;
  margin: 0 auto;
  font-size: 1.08rem;
  font-weight: 300;
  line-height: 1.72;
  color: color-mix(in srgb, var(--brand-black) 88%, transparent);
}
.proyecto-essay-inner p + p { margin-top: 1.4rem; }
.proyecto-essay-drop::first-letter {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 4em;
  line-height: 0.9;
  float: left;
  padding: 0.05em 0.12em 0 0;
  color: var(--brand-gold);
}

/* Ritmo de imágenes: bloques full-bleed alternados con pares
   lado a lado. Mezcla ancho completo y proporción editorial. */
.proyecto-images {
  padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem);
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
.proyecto-figure { margin: 0; overflow: hidden; }
.proyecto-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.proyecto-figure--full img {
  aspect-ratio: 3 / 2;
}
.proyecto-figure-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.8rem);
}
@media (max-width: 600px) {
  .proyecto-figure-row { grid-template-columns: 1fr; }
  .proyecto-figure--full img { aspect-ratio: 4 / 5; }
}

/* Pull quote entre las fotos — respiro editorial */
.proyecto-quote {
  padding: clamp(2.5rem, 6vw, 4.5rem) 1rem;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.proyecto-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--brand-black);
  text-wrap: balance;
  position: relative;
}
.proyecto-quote p::before {
  content: "\201C";
  display: block;
  font-size: 3.6rem;
  line-height: 0.3;
  color: var(--brand-gold);
  margin-bottom: 1.4rem;
}

/* Notas técnicas — cierre discreto tipo colofón */
.proyecto-tech {
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
  border-top: 1px solid color-mix(in srgb, var(--brand-black) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-black) 12%, transparent);
}
.proyecto-tech-inner {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.proyecto-tech .eyebrow { margin-bottom: 1.8rem; }
.proyecto-tech-list {
  display: grid;
  gap: 0.9rem;
  list-style: none;
  text-align: left;
}
.proyecto-tech-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-black) 8%, transparent);
  font-size: 0.95rem;
  font-weight: 300;
}
.proyecto-tech-list li strong {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-black) 60%, transparent);
  padding-top: 0.15rem;
}
@media (max-width: 600px) {
  .proyecto-tech-list li { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* CTA final del proyecto — suave, no agresivo */
.proyecto-cta {
  padding: clamp(4rem, 8vw, 6.5rem) var(--gutter);
  text-align: center;
}
.proyecto-cta-inner { max-width: 620px; margin: 0 auto; }
.proyecto-cta .eyebrow { margin-bottom: 1.2rem; color: color-mix(in srgb, var(--brand-black) 60%, transparent); }
.proyecto-cta-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  line-height: 1.15;
  margin-bottom: clamp(2rem, 4vw, 2.6rem);
  text-wrap: balance;
}
.proyecto-cta-title em { font-style: italic; font-weight: 400; color: var(--brand-gold); }

.proyecto-footer {
  padding: clamp(3rem, 5vw, 4.5rem) var(--gutter);
  background: var(--brand-black);
  color: var(--brand-paper);
  border-top: 0;
}
.proyecto-footer .footer-inner { text-align: center; }
.proyecto-footer .footer-inner .btn-line--gold { margin-bottom: 1.6rem; }
.proyecto-footer .footer-meta { color: color-mix(in srgb, var(--brand-paper) 60%, transparent); }
.proyecto-footer .footer-meta a {
  color: var(--brand-paper);
  border-bottom-color: var(--brand-gold);
}
.proyecto-footer .footer-fineprint {
  color: color-mix(in srgb, var(--brand-paper) 45%, transparent);
}

/* === 23. BANDA "JUNTABLOS" (sesiones en grupo) ============== */
/* Banda compacta entre Bonos y Extras: desvío respetuoso para
   quien no busca sesión individual. Fondo paper, altura reducida
   respecto a secciones completas, chips mono y CTA externo. */
.section--juntablos {
  background: var(--brand-paper);
  color: var(--brand-black);
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
  text-align: center;
}
.juntablos-inner {
  max-width: 760px;
  margin: 0 auto;
}
.juntablos-title {
  font-size: clamp(1.7rem, 3.8vw, 2.6rem) !important;
  margin-bottom: 1.4rem !important;
}
.juntablos-manifesto {
  margin: 0 auto 2rem !important;
  max-width: 56ch;
}
.juntablos-manifesto strong {
  display: block;
  margin-top: 0.9rem;
  font-weight: 500;
  color: var(--brand-gold);
}
.juntablos-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0 auto 2.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-black) 70%, transparent);
}
.juntablos-types li {
  padding: 0.5rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--brand-gold) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-gold) 5%, transparent);
}
.juntablos-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.juntablos-cta[target="_blank"]::after {
  display: none;
}

/* ============================================================
   24 · PRECIOS DESTACADOS
   Hace que los precios (data-price*) salten mas a la vista.
   El JS del banner countdown (Worker) ya setea --fp-banner-h y
   .fp-has-banner en <html>; aqui los usamos para que el header
   sticky se coloque bajo la banda.
   ============================================================ */

/* El header sticky lee la altura del banner countdown.
   Si no hay banda, --fp-banner-h es 0 y el header queda en top:0. */
html.fp-has-banner .site-header {
  top: var(--fp-banner-h, 0px);
}

/* Hero index: numerales en oro vivo + mas peso. */
.hero-index-price {
  color: var(--brand-gold) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.01em;
}

/* Event cards: subir tamano + oro. */
.event-card-price {
  color: var(--brand-gold) !important;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* Subrayado oro sutil bajo los precios de cards principales. */
.spec-price,
.event-card-price,
.bono-price,
.extra-price {
  position: relative;
  display: inline-block;
}
.spec-price::after,
.event-card-price::after,
.bono-price::after,
.extra-price::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.15em;
  height: 3px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand-gold) 85%, transparent),
    color-mix(in srgb, var(--brand-gold) 25%, transparent)
  );
  border-radius: 2px;
}

/* El spec-price teal (business) mantiene su color propio pero gana el subrayado. */
.specs--teal .spec-price::after {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, #1c8a78 85%, transparent),
    color-mix(in srgb, #1c8a78 25%, transparent)
  );
}

/* Precios inline (dentro de parrafos FAQ): ligero realce. */
[data-price-inline],
[data-price-extra]:not(.extra-price) {
  color: var(--brand-gold);
  font-weight: 600;
}