/*
  JULIOLAMA.COM — Design System V2 (TASK-20260903-JULIO-WEB-RESTRUCTURE-01)
  Fuente: felpabiz-julio-m-lama-brief-raw.json / julio-m-lama-brand-spec.json —
  generado en la misma sesión de FELPA SUITE que el pack de logos aprobado
  (ver ASSET_MANIFEST.md / CREATIVE_DIRECTION.md). Reemplaza Design System V1
  (Barlow Condensed/Manrope, obsidian/ivory/gold), marcado explícitamente
  provisional en PROJECT_STATE.md. Misma estructura de variables — solo
  cambian los valores y se agregan utilidades nuevas (hero, reveal, grid asimétrico).
*/

:root {
  color-scheme: dark;

  /* Brand tokens (Design System V2 — brief FELPA SUITE 2026-09-02) */
  --obsidian: #0b0d10;
  --graphite: #2b3138;
  --ivory: #f4efe6;
  --gold: #b08a57;
  --steel: #969da8;
  --digital: #4178ff;

  /* Semantic (dark = primario) */
  --bg: var(--obsidian);
  --surface: rgba(43, 49, 56, 0.55);
  --surface-strong: rgba(43, 49, 56, 0.86);
  --ink: var(--ivory);
  --muted: rgba(244, 239, 230, 0.72);
  --quiet: rgba(244, 239, 230, 0.5);
  --border: rgba(244, 239, 230, 0.14);
  --border-strong: rgba(244, 239, 230, 0.5);
  --field: rgba(255, 255, 255, 0.06);
  --accent: var(--gold);
  /* Variante de --gold para TEXTO (fixing-accessibility, TASK-20260903-JULIO-WEB-RESTRUCTURE-01):
     #B08A57 sobre fondo oscuro pasa WCAG AA (6.13:1) pero sobre fondo claro NO (2.77:1).
     En dark theme es igual a --gold; en light theme se redefine más abajo a un tono más
     oscuro de la MISMA familia champagne/bronce (mismo hue/saturación, solo -L), nunca un
     color nuevo. Úsese en cualquier texto/ícono legible; --gold sigue siendo el color de
     marca para fondos sólidos, bordes y decoración (donde el ratio de texto no aplica). */
  --gold-text: var(--gold);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-full: 999px;

  --font-display: "Gloock", ui-serif, Georgia, serif;
  --font-primary: "Josefin Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Easing (emil-design-eng craft pass, TASK-20260903-JULIO-WEB-RESTRUCTURE-01) —
     los easing nativos de CSS son débiles; curvas con más carácter para que el
     motion se sienta intencional, no genérico. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: var(--ivory);
  --surface: rgba(255, 255, 255, 0.7);
  --surface-strong: rgba(255, 255, 255, 0.92);
  --ink: var(--obsidian);
  --muted: rgba(11, 13, 16, 0.72);
  /* 0.5 -> 0.62: a 0.5 el contraste era 3.54:1 (falla AA 4.5:1 en labels/fine-print
     pequeños de este tema); a 0.62 sube a 5.25:1. Fix de accesibilidad, mismo tono base. */
  --quiet: rgba(11, 13, 16, 0.62);
  --border: rgba(11, 13, 16, 0.12);
  --border-strong: rgba(11, 13, 16, 0.42);
  --field: rgba(11, 13, 16, 0.04);
  --accent: var(--gold);
  /* Mismo hue/saturación que --gold (#B08A57), luminosidad reducida para pasar
     WCAG AA como texto sobre fondo claro (2.77:1 -> 5.18:1). Fix de accesibilidad. */
  --gold-text: #7b5f3a;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(197, 161, 90, 0.06), transparent 40%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-primary);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

.wrap {
  width: min(100%, 1160px);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 840px) {
  .wrap {
    padding-inline: clamp(24px, 5vw, 64px);
  }
}

/* ---------- Header / nav ---------- */

header.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}

.wordmark img {
  display: block;
  height: clamp(37px, 4.8vw, 48px);
  width: auto;
}
/* logotipo-juliomlama.svg/png ya viene en tono champagne/bronce (ver ASSET_MANIFEST.md) —
   funciona sin invertir sobre fondo oscuro y sobre fondo claro, no se aplica filtro. */

nav.main-nav {
  display: none;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
}

@media (min-width: 760px) {
  nav.main-nav {
    display: flex;
  }
}

nav.main-nav a {
  position: relative;
  padding: 6px 0;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 160ms ease;
}

nav.main-nav a[aria-current="page"] {
  color: var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  nav.main-nav a:hover {
    color: var(--ink);
  }
}

nav.main-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--gold);
  border-radius: var(--radius-full);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .header-cta:hover {
    background: rgba(197, 161, 90, 0.12);
    border-color: var(--gold);
  }
}

.header-cta:active {
  transform: scale(0.97);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--field);
}

.theme-toggle button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--quiet);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  transition: background-color 140ms ease, color 140ms ease;
}

.theme-toggle button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

@media (max-width: 759px) {
  /* 22px was under the ~32px comfortable touch minimum; desktop (mouse) keeps the
     tighter size, this only grows the tap box on touch widths. */
  .theme-toggle button {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }
}

/* mobile nav (simple, no JS menu — stacked links under header on small screens) */
.mobile-nav {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 14px;
}

@media (min-width: 760px) {
  .mobile-nav {
    display: none;
  }
}

.mobile-nav a {
  flex: none;
  display: inline-flex;
  align-items: center;
  /* Tap target: text line-height alone was ~19px tall (well under the ~40-44px
     comfortable minimum) — pad it without changing the row's visual height budget
     (row already carries its own padding-bottom, so this just grows the hit box). */
  padding: 12px 2px;
  margin: -12px 0;
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mobile-nav a[aria-current="page"] {
  color: var(--gold-text);
}

/* ---------- Typography helpers ---------- */

.eyebrow {
  margin: 0 0 14px;
  color: var(--gold-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

h1 {
  margin: 0;
  /* Floor lowered from 34px: at narrow mobile widths (<467px, where 6vw drops
     below the floor) 34px forced long hero headlines into 4 near-word-by-word
     lines. Desktop is untouched — 6vw dominates and hits the 56px ceiling well
     above this floor on any real desktop viewport. */
  font-size: clamp(29px, 6vw, 56px);
  line-height: 1.08;
  text-wrap: balance;
}

h2 {
  margin: 0 0 18px;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.15;
}

h3 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 600;
}

p.lede {
  max-width: 640px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.65;
  /* Editorial justify, matching the approved Home reading-paragraph treatment
     (text-align-last:left so the final line doesn't stretch; hyphens:none so
     words never split; text-wrap:pretty avoids orphan words on the last line). */
  text-align: justify;
  text-align-last: left;
  hyphens: none;
  text-wrap: pretty;
}

.section {
  padding-block: clamp(48px, 8vw, 96px);
  border-top: 1px solid var(--border);
}

.section:first-of-type {
  border-top: 0;
}

/* PASS 3.2 — ritmo "denso/respiro" (Bartlett, ver CREATIVE_DIRECTION.md): un
   lavado casi imperceptible en las secciones de grid denso (pilares/proceso),
   para que alternen visualmente con las secciones planas y con la foto
   full-bleed, sin depender de que el usuario note un color nuevo — solo un
   leve cambio de densidad al hacer scroll. Theme-safe: deriva de --bg/--ink,
   nunca un color fijo. Uso deliberado, sección por sección — no nth-child. */
.section-tint {
  /* DELTA 2: antes 100% opaco — ahora deja un 8% de transparencia para que
     el .page-ambient fijo (ver más abajo) siga asomando MUY sutil incluso
     en las secciones "densas", en vez de leerse como un panel muerto. El
     tinte ink sigue diferenciando esta sección de las planas vecinas. */
  background: color-mix(in srgb, color-mix(in srgb, var(--bg) 96%, var(--ink) 4%) 92%, transparent 8%);
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  /* DELTA 2 — CTA en una sola línea siempre (ej. "Aplicar para una
     conversación" en Mentorship): nowrap + padding/tamaño que ceden un poco
     en viewports angostos en vez de forzar el wrap a 2 líneas. */
  padding: 0 clamp(20px, 5vw, 28px);
  border-radius: var(--radius-full);
  text-decoration: none;
  font-size: clamp(12.5px, 3.3vw, 14px);
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  /* PASS 4 — microinteracción "glup": presionar es rápido/lineal (90ms en
     :active, abajo), soltar vuelve con un leve overshoot (~1.01-1.02) antes
     de asentar en 1 — la curva bezier de acá abajo es la que se usa al
     SOLTAR (cuando :active deja de aplicar), no al presionar. */
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 160ms ease, border-color 160ms ease, box-shadow 220ms ease;
  border: 1.5px solid transparent;
}

.btn:active {
  transform: scale(0.97);
  transition: transform 90ms cubic-bezier(0.4, 0, 1, 1), background-color 160ms ease, border-color 160ms ease;
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}

.btn-gold {
  background: var(--gold);
  color: var(--obsidian);
}

.btn-outline {
  border-color: var(--border-strong);
  color: var(--ink);
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-1px);
  }
  .btn-gold:hover,
  .btn-primary:hover {
    box-shadow: 0 10px 26px -10px rgba(176, 138, 87, 0.55);
  }
  .btn-primary:hover {
    background: var(--gold);
  }
  .btn-outline:hover {
    border-color: var(--gold);
    background: rgba(197, 161, 90, 0.1);
  }
}

/* FIX (QA independiente, PASS 4 round 1): en desktop, un click real es
   hover+active a la vez — la regla :hover de arriba (misma especificidad,
   pero definida después) le ganaba a :active y el "glup" nunca se veía.
   Reafirmar acá, después del bloque hover, hace que :active gane siempre
   que esté presente, sin subir specificity artificialmente. */
.btn:active {
  transform: scale(0.97);
}

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

/* ---------- Cards / grid ---------- */

.grid {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
}

@media (min-width: 720px) {
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.card {
  position: relative;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

/* ==========================================================
   PASS 4 / DELTA 2 — Liquid Glass (moderado, ver
   FELPABIZ_WEB_BUILD_SYSTEM.md). Un solo mixin visual aplicado a
   card/vertical-block/theme-toggle/btn — nunca "glass por todas
   partes". DELTA 2 sube la percepción: más blur, sheen diagonal
   (refracción), glow al hover — sigue siendo un acento, no un
   rediseño.
   ========================================================== */
.card,
.vertical-block,
.theme-toggle,
.btn-outline {
  position: relative;
  --glass-highlight: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 18px 40px -28px rgba(0, 0, 0, 0.55);
  transition: box-shadow 260ms var(--ease-out), background-color 260ms var(--ease-out);
}

html[data-theme="light"] .card,
html[data-theme="light"] .vertical-block,
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] .btn-outline {
  --glass-highlight: rgba(255, 255, 255, 0.55);
}

/* Sheen diagonal — la "refracción" del cristal. Un solo gradiente sutil,
   nunca un brillo animado ni un reflejo que se mueva solo (eso sí sería
   glassmorphism genérico de stock). Se aplica también a los CTA sólidos
   (btn-gold/btn-primary) porque ahí el backdrop-filter no serviría de nada
   (fondo opaco, no hay nada detrás que desenfocar) — el sheen es lo que
   les da la sensación de cristal sin perder el color de marca. */
.card::before,
.vertical-block::before,
.theme-toggle::before,
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 45%);
  pointer-events: none;
}

.btn {
  position: relative;
  overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .card:hover,
  .vertical-block:hover {
    box-shadow: inset 0 1px 0 var(--glass-highlight), 0 22px 48px -26px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
}

/* Tinte de glass por vertical — mismo mixin, distinta temperatura de color.
   Se resuelve por página (cada página trae su .page-ambient--X a nivel
   body, no por marca global — Home/Ecosistema/Sobre Julio/Contacto quedan
   con el glass neutro. */
body:has(.page-ambient--salud) .card,
body:has(.page-ambient--salud) .vertical-block {
  background: color-mix(in srgb, var(--surface) 88%, var(--gold) 12%);
}

body:has(.page-ambient--portafolios) .card,
body:has(.page-ambient--portafolios) .vertical-block {
  background: color-mix(in srgb, var(--surface) 90%, var(--steel) 10%);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
}

body:has(.page-ambient--mentorship) .card,
body:has(.page-ambient--mentorship) .vertical-block {
  background: color-mix(in srgb, var(--surface) 82%, var(--obsidian) 18%);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.card h3 {
  color: var(--ink);
}

.card p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
}

.card .btn {
  min-height: 44px;
  padding: 0 20px;
  font-size: 12.5px;
}

/* ---------- Content block (impeccable craft-floor: cards son el contenedor
   perezoso para agrupaciones puramente informativas sin interacción propia —
   listas/párrafos usan un divisor fino en vez de una caja. Coherente además
   con el propio brief de marca: "divisores horizontales champagne de 1px
   para crear ritmo consultivo". .card se reserva para bloques con su propia
   acción/CTA — ver ASSET_MANIFEST / uso real en el sitio.) ---------- */

.content-block {
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.content-block h3 {
  color: var(--ink);
}

.section-photo {
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16 / 10;
}

.section-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}

/* Banda editorial de foto ancha — respiro visual entre bloques de texto densos
   (principio Stephen Bartlett: pulso denso/respiro, ver CREATIVE_DIRECTION.md). */
.section-photo-wide {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  aspect-ratio: 21 / 9;
}

@media (max-width: 640px) {
  .section-photo-wide {
    aspect-ratio: 4 / 5;
  }
}

.section-photo-wide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  display: block;
}

.section-photo-wide figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 22px;
  background: linear-gradient(0deg, rgba(11, 13, 16, 0.78), transparent 70%);
  color: var(--ivory);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.content-block p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
  text-align: justify;
  text-align-last: left;
  hyphens: none;
  text-wrap: pretty;
}

.tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--gold-text);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Press / mentions list ---------- */

.press-list {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.press-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  transition: padding-left 220ms var(--ease-out), border-color 220ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .press-list li:hover {
    padding-left: 10px;
    border-color: var(--border-strong);
  }
}

.press-list .press-outlet {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.press-list a {
  color: var(--gold-text);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .press-list a:hover {
    text-decoration: underline;
  }
}

@media (max-width: 759px) {
  /* "Leer artículo" was a ~23px tap target (text line-height only) — pad it out on
     touch without moving its visual position (negative margin compensates). */
  .press-list a {
    display: inline-block;
    padding: 10px 2px;
    margin: -10px -2px;
  }
}

.press-photo-slot {
  margin-top: 28px;
  padding: 22px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--quiet);
  font-size: 13px;
  line-height: 1.6;
}

/* ---------- Press photo grid (fotos reales, asimétrico) ---------- */

.press-photo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 32px;
}

@media (min-width: 640px) {
  .press-photo-grid {
    grid-template-columns: 7fr 5fr;
    align-items: stretch;
  }
}

.press-photo-grid figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  min-height: 260px;
}

.press-photo-grid img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
}

.press-photo-grid figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(0deg, rgba(11, 13, 16, 0.82), transparent);
  color: var(--ivory);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Pillars / lists ---------- */

.pillars {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pillars li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.pillars li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 999px;
  background: var(--gold);
}

/* ---------- Form (Contacto) ---------- */

.lead-panel {
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.field-grid {
  display: grid;
  gap: 14px;
}

@media (min-width: 620px) {
  .field-grid.two-col {
    grid-template-columns: 1fr 1fr;
  }
  .field-grid.two-col .full {
    grid-column: 1 / -1;
  }
}

label {
  display: grid;
  gap: 7px;
  color: var(--quiet);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  /* 16px is the mobile-Safari floor: any form-field font-size below it makes iOS
     auto-zoom the whole viewport on focus, and the user has to zoom back out by hand. */
  font-size: 16px;
  padding: 0 14px;
  outline: none;
}

textarea {
  min-height: 100px;
  padding: 12px 14px;
  resize: vertical;
}

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--steel) 50%),
    linear-gradient(135deg, var(--steel) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 21px,
    calc(100% - 13px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197, 161, 90, 0.16);
}

option {
  color: #10131d;
}

.classification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.14);
}

html[data-theme="light"] .classification {
  background: rgba(10, 12, 16, 0.05);
}

.classification span {
  color: var(--quiet);
  font-size: 12px;
}

.classification strong {
  color: var(--gold-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: right;
}

.submit {
  width: 100%;
  min-height: 52px;
  /* Was sitting flush against the field-grid (14px field gap, no extra pause
     before the CTA) — a clear beat of space before the action reads more
     deliberate/premium. */
  margin-top: 28px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-full);
  background: var(--gold);
  color: var(--obsidian);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.submit {
  transition: filter 140ms ease, transform 120ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .submit:hover {
    filter: brightness(1.08);
  }
}

.submit:active {
  transform: scale(0.98);
}

.fine-print {
  margin: 14px 0 0;
  color: var(--quiet);
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
}

.hidden {
  display: none;
}

.whatsapp-direct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.whatsapp-direct p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* ---------- Footer ---------- */

footer.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 40px;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

.footer-nav a {
  color: var(--quiet);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-nav a {
  transition: color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .footer-nav a:hover {
    color: var(--ink);
  }
}

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.footer-social a,
.footer-social-pending {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--muted);
  opacity: 0.85;
  transition: opacity 160ms ease, color 160ms ease;
}

@media (max-width: 759px) {
  /* Touch targets: 18px icon hit boxes and un-padded legal links are both under the
     ~32px comfortable minimum on touch — grow the tap area only, icon glyphs (16px,
     set by .footer-social svg below) and link text are untouched. */
  .footer-nav a {
    display: inline-block;
    padding: 8px 0;
  }
  .footer-social {
    gap: 4px;
  }
  .footer-social a,
  .footer-social-pending {
    width: 34px;
    height: 34px;
  }
}

.footer-social-pending {
  opacity: 0.35;
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .footer-social a:hover {
    opacity: 1;
    color: var(--gold-text);
  }
}

.footer-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--quiet);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-logo {
  width: 74px;
  height: auto;
  opacity: 0.7;
}

html[data-theme="light"] .footer-logo {
  filter: invert(1);
  opacity: 0.6;
}

/* ---------- Utility ---------- */

.center {
  text-align: center;
  margin-inline: auto;
}

.stack {
  display: grid;
  gap: 14px;
}

/* ==========================================================
   Design System V2 additions — TASK-20260903-JULIO-WEB-RESTRUCTURE-01
   Hero, scroll-reveal, grid asimétrico, FAQ, timeline.
   ========================================================== */

/* ---------- Scroll reveal (Intersection Observer, site.js) ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Efecto de inmersión: fotos grandes entran con un leve zoom-out al hacer
   scroll (Ken Burns sutil), en vez de aparecer estáticas. Mismo observer
   que [data-reveal] (ver site.js), solo cambia qué anima. */
[data-reveal-zoom] img {
  transform: scale(1.09);
  transition: transform 900ms var(--ease-out);
}

[data-reveal-zoom].is-visible img {
  transform: scale(1);
}

/* PASS 3 (Visual Life, TASK-20260903-JULIO-WEB-RESTRUCTURE-01): cortina que
   revela el bloque de izquierda a derecha, combinada con el zoom-out de arriba.
   FIX (QA independiente encontró deadlock): la primera versión aplicaba
   clip-path directo al contenedor observado por IntersectionObserver — en
   Chromium, un elemento recortado a área visible 0 nunca reporta
   isIntersecting=true, así que la cortina nunca se abría (bloqueaba fotos y
   dejaba el carrusel de Sobre Julio sin click). Fix: la cortina es ahora un
   ::after decorativo (no afecta la geometría/intersección del contenedor
   real) con pointer-events:none (nunca bloquea clicks, ni a mitad de
   animación). */
[data-reveal-zoom] {
  position: relative;
}

[data-reveal-zoom]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--bg);
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 900ms var(--ease-out);
  pointer-events: none;
}

[data-reveal-zoom].is-visible::after {
  transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal-zoom] img {
    transform: none;
    transition: none;
  }
  [data-reveal-zoom]::after {
    transform: scaleX(0);
    transition: none;
  }
}

/* PASS 3 — texto secuenciado (data-reveal-stagger): cada línea envuelta en
   .reveal-line entra con un pequeño delay incremental respecto a la anterior.
   Mismo observer/clase .is-visible que [data-reveal] (ver site.js). */
[data-reveal-stagger] .reveal-line {
  display: block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
}

[data-reveal-stagger].is-visible .reveal-line {
  opacity: 1;
  transform: none;
}

[data-reveal-stagger] .reveal-line:nth-child(1) { transition-delay: 40ms; }
[data-reveal-stagger] .reveal-line:nth-child(2) { transition-delay: 160ms; }
[data-reveal-stagger] .reveal-line:nth-child(3) { transition-delay: 280ms; }

/* PASS densidad (TASK-20260910-JULIO-HOME-DENSITY-01) — la lede y los CTAs del
   hero antes aparecían sin transición (solo el H1 tenía [data-reveal-stagger]).
   Reutilizan el [data-reveal] genérico ya existente, solo se secuencia el delay
   para que la entrada se lea como un único gesto (H1 en 2 líneas → lede → CTAs),
   no una carga plana. Mismo IntersectionObserver/mecanismo, cero JS nuevo. */
.hero-reveal-lede[data-reveal] { transition-delay: 360ms; }
.hero-reveal-cta[data-reveal] { transition-delay: 460ms; }

/* PASS 4 — entrada direccional para grupos de 3 (cards del ecosistema en
   Home). Se combina con [data-reveal] existente — solo cambia la dirección
   del translate inicial, no el mecanismo. Una vez asentadas quedan quietas
   (nada de movimiento perpetuo, ver FELPABIZ_WEB_BUILD_SYSTEM.md §3). */
[data-reveal].enter-left { transform: translateX(-28px); }
[data-reveal].enter-right { transform: translateX(28px); }
[data-reveal].enter-up { transform: translateY(32px); }
[data-reveal].enter-left.is-visible,
[data-reveal].enter-right.is-visible,
[data-reveal].enter-up.is-visible {
  transform: none;
}

.grid-bento-3 > [data-reveal]:nth-child(1) { transition-delay: 0ms; }
.grid-bento-3 > [data-reveal]:nth-child(2) { transition-delay: 120ms; }
.grid-bento-3 > [data-reveal]:nth-child(3) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal-stagger] .reveal-line {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Hero (Home) ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 78% 8%, rgba(176, 138, 87, 0.16), transparent 60%),
    radial-gradient(ellipse 90% 70% at 15% 100%, rgba(43, 49, 56, 0.9), transparent 65%),
    linear-gradient(175deg, #0b0d10 0%, #14171c 46%, #0b0d10 100%);
  will-change: transform;
}

/* Fallback sin foto (páginas/casos donde no hay retrato real disponible aún) */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(115deg, rgba(244, 239, 230, 0.025) 0px, rgba(244, 239, 230, 0.025) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}

/* ---------- Hero photo (foto real + overlay cinemático) ---------- */

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* sujeto descentrado hacia la derecha (principio Stephen Bartlett, ver
     CREATIVE_DIRECTION.md) — deja el tercio izquierdo despejado para el texto */
  object-position: 78% 22%;
  will-change: transform;
}

.hero-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* overlay más oscuro donde vive el texto (izquierda/abajo), más transparente
     hacia la derecha donde está el sujeto — para que la foto respire sin que
     el copy pierda legibilidad. Nunca compite con el logotipo del header. */
  background:
    linear-gradient(100deg, rgba(11, 13, 16, 0.96) 0%, rgba(11, 13, 16, 0.82) 30%, rgba(11, 13, 16, 0.35) 62%, rgba(11, 13, 16, 0.12) 100%),
    linear-gradient(0deg, rgba(11, 13, 16, 0.9) 0%, rgba(11, 13, 16, 0.15) 42%, rgba(11, 13, 16, 0.05) 70%);
}

html[data-theme="light"] .hero-photo-overlay {
  background:
    linear-gradient(100deg, rgba(11, 13, 16, 0.9) 0%, rgba(11, 13, 16, 0.7) 30%, rgba(11, 13, 16, 0.28) 62%, rgba(11, 13, 16, 0.08) 100%),
    linear-gradient(0deg, rgba(11, 13, 16, 0.75) 0%, rgba(11, 13, 16, 0.1) 42%, rgba(11, 13, 16, 0.02) 70%);
}

/* PASS 4 — matiz de overlay por vertical (mismo scrim oscuro que ya garantiza
   contraste de texto, solo con una temperatura de color distinta encima —
   Salud más cálida/luminosa, Portafolios se queda en el obsidian sobrio
   original, Mentorship un poco más profunda/aterciopelada). No cambia
   opacidad base, no arriesga contraste. */
body:has(.page-ambient--salud) .hero-photo-overlay {
  background:
    linear-gradient(100deg, rgba(43, 26, 11, 0.9) 0%, rgba(43, 26, 11, 0.72) 30%, rgba(43, 26, 11, 0.3) 62%, rgba(43, 26, 11, 0.1) 100%),
    linear-gradient(0deg, rgba(43, 26, 11, 0.82) 0%, rgba(43, 26, 11, 0.12) 42%, rgba(43, 26, 11, 0.04) 70%);
}

body:has(.page-ambient--mentorship) .hero-photo-overlay {
  background:
    linear-gradient(100deg, rgba(6, 7, 12, 0.97) 0%, rgba(6, 7, 12, 0.86) 30%, rgba(6, 7, 12, 0.4) 62%, rgba(6, 7, 12, 0.14) 100%),
    linear-gradient(0deg, rgba(6, 7, 12, 0.92) 0%, rgba(6, 7, 12, 0.18) 42%, rgba(6, 7, 12, 0.06) 70%);
}

/* ==========================================================
   PASS 4 / FINAL POLISH DELTA 2 (TASK-20260903-JULIO-WEB-RESTRUCTURE-01)
   — fondos vivos ambientales por vertical.
   DELTA 2: dejó de vivir DENTRO del hero (absolute, se iba con
   el scroll) y pasó a ser una capa `position: fixed` a nivel
   `<body>` (primer hijo, antes del header) — así el mismo patrón
   ambiental queda visible detrás de CUALQUIER sección oscura de
   la página, no solo del hero, sin duplicar el SVG por sección.
   El hero (foto + overlay opaco) sigue tapándolo ahí donde ya
   tiene su propia foto — el punto es que ahora SÍ se ve en el
   resto de las secciones oscuras/planas de la página. z-index:0,
   por debajo de header (20), cards y contenido — nunca compite
   con la legibilidad ni bloquea clicks (pointer-events:none).
   ========================================================== */

.page-ambient {
  position: fixed;
  inset: 0;
  /* z-index NEGATIVO a propósito (no 0): el contenido de las secciones
     (.section, párrafos, listas) no tiene position propio, así que pinta en
     el nivel "in-flow no posicionado" del stacking context — que va POR
     ENCIMA de un z-index:0/auto posicionado, no por detrás. -1 lo manda
     detrás de ese contenido pero sigue por delante del fondo propio de
     <body> (radial-gradient + var(--bg)), que sigue pintándose como base. */
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.85;
}

.page-ambient svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .page-ambient * {
    animation: none !important;
  }
}

/* Mobile — menos densidad, menos movimiento (§13 del pass) */
@media (max-width: 640px) {
  .page-ambient {
    opacity: 0.55;
  }
  .page-ambient--salud .cell:nth-child(n + 4),
  .page-ambient--portafolios .node:nth-child(n + 6),
  .page-ambient--portafolios .link:nth-child(n + 6),
  .page-ambient--mentorship .star:nth-child(n + 15) {
    display: none;
  }
}

/* ---------- Salud y Bienestar — células / hebra, cálido, orgánico ---------- */

.page-ambient--salud .cell {
  transform-origin: center;
  animation: cell-drift 24s ease-in-out infinite;
}
.page-ambient--salud .cell:nth-child(1) { animation-duration: 24s; }
.page-ambient--salud .cell:nth-child(2) { animation-duration: 19s; animation-delay: -4s; }
.page-ambient--salud .cell:nth-child(3) { animation-duration: 27s; animation-delay: -9s; }
.page-ambient--salud .cell:nth-child(4) { animation-duration: 21s; animation-delay: -14s; }
.page-ambient--salud .cell:nth-child(5) { animation-duration: 30s; animation-delay: -2s; }

@keyframes cell-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(14px, -10px) scale(1.05); }
}

.page-ambient--salud .dna-strand {
  stroke-dasharray: 6 12;
  animation: dna-flow 46s linear infinite;
}
.page-ambient--salud .dna-strand:nth-of-type(2) {
  animation-duration: 58s;
  animation-direction: reverse;
}

@keyframes dna-flow {
  to { stroke-dashoffset: -540; }
}

/* ---------- Portafolios / Inversión — nodos y red, sobrio, tecnológico ---------- */

.page-ambient--portafolios .node {
  animation: node-drift 26s ease-in-out infinite;
}
.page-ambient--portafolios .node:nth-child(odd) { animation-duration: 23s; }
.page-ambient--portafolios .node:nth-child(even) { animation-duration: 29s; animation-delay: -6s; }

@keyframes node-drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-7px, 7px); }
}

.page-ambient--portafolios .link {
  animation: link-pulse 9s ease-in-out infinite;
}
.page-ambient--portafolios .link:nth-child(3n) { animation-delay: -3s; }
.page-ambient--portafolios .link:nth-child(3n + 1) { animation-delay: -6s; }

@keyframes link-pulse {
  0%, 100% { opacity: 0.14; }
  50% { opacity: 0.4; }
}

/* ---------- Mentorship — techo estrellado, íntimo, cinematográfico ---------- */

.page-ambient--mentorship .star {
  animation: star-twinkle 4.2s ease-in-out infinite;
}
.page-ambient--mentorship .star:nth-child(3n) { animation-duration: 5.4s; animation-delay: -1.1s; }
.page-ambient--mentorship .star:nth-child(3n + 1) { animation-duration: 3.6s; animation-delay: -2.4s; }
.page-ambient--mentorship .star:nth-child(3n + 2) { animation-duration: 6.3s; animation-delay: -0.6s; }

@keyframes star-twinkle {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.9; }
}

.page-ambient--mentorship .constellation-line {
  animation: constellation-fade 24s ease-in-out infinite;
}
.page-ambient--mentorship .constellation-line:nth-of-type(2) {
  animation-duration: 31s;
  animation-delay: -12s;
}

@keyframes constellation-fade {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.3; }
}

/* Cuando hay foto real (estática o carrusel), el texto del hero siempre queda
   claro/ivory encima del overlay oscuro, en ambos temas — el theme toggle
   solo afecta el resto del sitio. */
.hero:has(.hero-photo) .hero-content,
.hero:has(.hero-photo) .hero-scroll-cue,
.hero:has(.hero-carousel-bg) .hero-content,
.hero:has(.hero-carousel-bg) .hero-scroll-cue {
  color: var(--ivory);
}

/* h1/.lede tienen su propio color explícito (h1{color:var(--ink)}, .lede{color:var(--muted)})
   que gana por sobre el heredado de .hero-content de arriba — en tema claro --ink/--muted
   se vuelven oscuros y el texto queda ilegible sobre la foto (reportado por Félix). Se
   fuerza acá el mismo tratamiento claro que ya tenía .hero-content, en ambos temas. */
.hero:has(.hero-photo) .hero-content h1,
.hero:has(.hero-carousel-bg) .hero-content h1 {
  color: var(--ivory);
}

.hero:has(.hero-photo) .hero-content .lede,
.hero:has(.hero-carousel-bg) .hero-content .lede {
  color: rgba(244, 239, 230, 0.82);
}

.hero:has(.hero-photo) .hero-content .eyebrow,
.hero:has(.hero-carousel-bg) .hero-content .eyebrow {
  color: var(--gold);
}

/* .btn-outline normalmente usa var(--ink) (cambia con el tema) — sobre la foto
   siempre necesita quedar claro, sin importar el tema activo. */
.hero:has(.hero-photo) .hero-content .btn-outline,
.hero:has(.hero-carousel-bg) .hero-content .btn-outline {
  color: var(--ivory);
  border-color: rgba(244, 239, 230, 0.5);
}

@media (hover: hover) and (pointer: fine) {
  .hero:has(.hero-photo) .hero-content .btn-outline:hover,
  .hero:has(.hero-carousel-bg) .hero-content .btn-outline:hover {
    border-color: var(--gold);
    background: rgba(176, 138, 87, 0.16);
  }
}

/* ---------- Hero carousel (variante multi-foto del hero — Sobre Julio y futuras páginas) ---------- */

.hero-carousel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-carousel-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* el hero es muy ancho/bajo comparado con una foto de retrato — sin esto,
     "cover" centra verticalmente y corta la cabeza. Sesgo hacia arriba por
     default; cada <img> puede pisarlo inline si una foto puntual lo necesita. */
  object-position: 50% 15%;
  opacity: 0;
  transition: opacity 1400ms var(--ease-in-out), transform 6000ms linear;
  transform: scale(1);
}

.hero-carousel-bg img.is-active {
  opacity: 1;
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel-bg img {
    transition: opacity 400ms ease;
    transform: none;
  }
  .hero-carousel-bg img.is-active {
    transform: none;
  }
}

/* Isologo: vuelve a su rol de sello premium (ver ASSET_MANIFEST.md) — chico,
   esquina, discreto — nunca compitiendo con la foto ni con el texto. */
.hero-mark {
  position: absolute;
  z-index: 2;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(48px, 7vw, 96px);
  top: auto;
  transform: none;
  width: clamp(64px, 7vw, 96px);
  opacity: 0.85;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  /* PASS 3 — aparición al cargar (ya estaba prevista en EXPERIENCE_BLUEPRINT.md
     §4 pero nunca implementada). Sello premium entra con fade+scale, no salta. */
  animation: hero-mark-in 1100ms var(--ease-out) 240ms backwards;
}

@keyframes hero-mark-in {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
  to {
    opacity: 0.85;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark {
    animation: none;
  }
}

@media (max-width: 640px) {
  .hero-mark {
    width: 56px;
    bottom: 32px;
    right: 20px;
    opacity: 0.8;
  }
}

html[data-theme="light"] .hero-bg {
  background:
    radial-gradient(ellipse 60% 50% at 78% 8%, rgba(176, 138, 87, 0.14), transparent 60%),
    radial-gradient(ellipse 90% 70% at 15% 100%, rgba(43, 49, 56, 0.08), transparent 65%),
    linear-gradient(175deg, #f4efe6 0%, #eae2d3 46%, #f4efe6 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  /* antes clamp(120px,22vh,220px) arriba — con el H1 grande + lede, el bloque
     completo no entraba en el viewport y el final del párrafo quedaba tapado
     por el borde de la pantalla (reportado por Félix). Menos aire arriba =
     el bloque entero sube y se lee completo sin scrollear. Abajo también
     recortado: QA independiente encontró el 2do botón cortado ~6.5px en
     1280x800 — se ajusta el mínimo del clamp para dar margen real. */
  padding-block: clamp(56px, 10vh, 130px) clamp(28px, 5vw, 64px);
}

.hero-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

/* ==========================================================
   DIRECCIÓN BESPOKE — Home (ver .impeccable/surfaces/site-index-html.md,
   seed 57f97f28). "Julio es la medida, no la plantilla." Estas clases son
   EXCLUSIVAS de site/index.html -- nunca se agregan a .hero, .vertical-block,
   .eyebrow, .tag ni ningún otro selector base compartido con las landings
   FROZEN o las páginas top-level sin tocar (mentorship/portafolios/salud-
   bienestar, sobre-julio, ecosistema, contacto usan estas mismas clases base
   hoy). El intro de logo a pantalla completa de la iteración previa fue
   descartado como anti-referencia -- reemplazado por este mundo.
   ========================================================== */

/* Cifras de credibilidad -- solo hechos verificados (6 medios reales, 3
   caminos reales). Entran con un cascadeo tipo panel de aeropuerto, tomado
   del retador "tablero de vuelos" del concept-seed. Reusa [data-reveal] ya
   existente en site.js, sin JS nuevo. */
.home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 48px);
  list-style: none;
  margin: clamp(36px, 5vw, 56px) 0 0;
  padding: 20px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ivory) 18%, transparent);
}

.home-stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-stats-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--gold);
  line-height: 1;
}

.home-stats-label {
  max-width: 16ch;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--steel);
  line-height: 1.4;
}

@media (prefers-reduced-motion: no-preference) {
  .home-stats li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
  }
  .home-stats.is-visible li:nth-child(1) { transition-delay: 80ms; }
  .home-stats.is-visible li:nth-child(2) { transition-delay: 200ms; }
  .home-stats.is-visible li { opacity: 1; transform: none; }
}

/* Ecosistema — selector "velado / encendido", tomado del retador de
   instrumento de precisión: las 3 opciones quedan atenuadas en reposo, la
   que recibe foco/hover se enciende. Capa nueva sobre .vertical-block
   compartido -- nunca reemplaza sus reglas. */
.home-vertical {
  filter: saturate(0.72) brightness(0.94);
  transition: filter 340ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .home-vertical:hover,
  .home-vertical:focus-within {
    filter: saturate(1) brightness(1);
  }
}

.home-vertical:focus-within {
  filter: saturate(1) brightness(1);
}

.home-vertical .tag {
  transition: text-shadow 340ms var(--ease-out);
}

.home-vertical:hover .tag,
.home-vertical:focus-within .tag {
  text-shadow: 0 0 16px color-mix(in srgb, var(--gold) 55%, transparent);
}

/* Entrada "desplegada desde un punto" -- tomado del retador de la hoja
   plegable: además del translate direccional ya existente ([data-reveal] +
   .enter-left/up/right, ver más abajo en este archivo), las cards de Home
   arrancan levemente más chicas y con origen en el punto de partida del
   Ecosistema, como si se desplegaran desde ahí. Especificidad mayor que la
   regla base para poder sumar el scale sin tocarla. */
.home-vertical.enter-left[data-reveal] {
  transform-origin: right center;
  transform: translateX(-28px) scale(0.93);
}
.home-vertical.enter-right[data-reveal] {
  transform-origin: left center;
  transform: translateX(28px) scale(0.93);
}
.home-vertical.enter-up[data-reveal] {
  transform-origin: center top;
  transform: translateY(32px) scale(0.93);
}
.home-vertical[data-reveal].is-visible {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .home-vertical {
    filter: none;
  }
}

/* ==========================================================
   RECONSTRUCCIÓN COMPLETA — Home (2026-09-11, ver DECISIONS.md
   "Ruteo #2" en TASK-20260910-JULIO-HOME-DENSITY-01). Félix rechazó la
   primera pasada ("maquillaje, no página nueva"): esto reemplaza la
   presentación completa a escala editorial grande, reutilizando el ÚNICO
   asset fotográfico real (hero-eljacaguero-2024.jpg) en distintos
   encuadres/capas -- cero fotos o video nuevos. Todo bajo .home-* / .home-
   scene, exclusivo de site/index.html, nunca toca .hero/.vertical-block/
   .eyebrow/.tag compartidos con las landings FROZEN. Profundidad y ritmo de
   scroll via GSAP/ScrollTrigger (site/assets/home-motion.js, exclusivo de
   esta página) -- nivel L2 fijado por felpa-design-router, sin WebGL.
   ========================================================== */

.home-scene {
  position: relative;
  padding-block: clamp(72px, 11vw, 148px);
  border-top: 1px solid var(--border);
  overflow: hidden;
}

.home-scene:first-of-type {
  border-top: 0;
}

.home-kicker {
  margin: 0 0 18px;
  color: var(--gold-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.home-kicker.center {
  text-align: center;
}

.home-h1 {
  margin: 0;
  max-width: 15ch;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(42px, 6.8vw, 92px);
  line-height: 1.02;
}

.home-h2 {
  margin: 0 0 20px;
  max-width: 20ch;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.08;
}

.home-h2.center {
  margin-inline: auto;
  text-align: center;
}

.home-lede {
  margin: 22px 0 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.6;
}

.home-lede.center {
  margin-inline: auto;
  text-align: center;
}

.home-text-link {
  display: inline-block;
  margin-top: 28px;
  color: var(--gold-text);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  padding-bottom: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .home-text-link:hover {
    border-color: var(--gold);
  }
}

/* ---------- Escena 1: Hero ---------- */

.home-scene--hero {
  padding-block: 0;
}

.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
  gap: clamp(32px, 5vw, 64px);
  min-height: 100svh;
  padding-block: clamp(120px, 14vh, 180px) clamp(48px, 6vw, 72px);
}

.home-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-hero-photo-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 360px;
}

.home-depth-bg,
.home-depth-fg,
.home-story-bg,
.home-story-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.home-depth-bg {
  filter: blur(18px) brightness(0.55) saturate(0.85);
  transform: scale(1.18);
  object-position: 60% 20%;
}

.home-depth-fg {
  -webkit-mask-image: radial-gradient(62% 82% at 55% 40%, black 48%, transparent 90%);
  mask-image: radial-gradient(62% 82% at 55% 40%, black 48%, transparent 90%);
  object-position: 60% 15%;
}

.home-hero-mark {
  position: absolute;
  right: clamp(18px, 2.4vw, 32px);
  bottom: clamp(18px, 2.4vw, 32px);
  width: clamp(52px, 5vw, 72px);
  height: auto;
  opacity: 0.92;
  z-index: 2;
}

/* Canvas WebGL del Hero (L3) -- se agrega via JS (home-webgl.js) SOLO si WebGL
   está disponible y prefers-reduced-motion no está activo. Mientras eso no
   pase, las capas CSS de abajo (.home-depth-bg/.home-depth-fg) son el hero
   real -- nunca hay un hueco en blanco. */
.home-hero-webgl {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* Una vez que el canvas monta con éxito, las capas de foto estática se
   retiran (siguen en el DOM como fallback si algo falla después). */
.home-hero-photo-wrap.has-webgl .home-depth-bg,
.home-hero-photo-wrap.has-webgl .home-depth-fg {
  opacity: 0;
}

@media (max-width: 900px) {
  .home-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-block: clamp(96px, 20vh, 140px) 48px;
  }
  .home-hero-photo-wrap {
    order: -1;
    aspect-ratio: 4 / 5;
    min-height: 0;
  }
}

/* ---------- Escena 2: Criterio (composición tipográfica) ---------- */

.home-scene--criteria {
  background: color-mix(in srgb, var(--bg) 100%, var(--ink) 0%);
}

.home-criteria-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.home-statement-lg {
  margin: 0;
  max-width: 18ch;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.12;
}

.home-statement-lg em {
  color: var(--gold-text);
  font-style: normal;
}

.home-word-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0 0 0 clamp(20px, 2.4vw, 32px);
  list-style: none;
  border-left: 1px solid var(--border-strong);
}

.home-word-list li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 30px);
  color: var(--quiet);
  line-height: 1.5;
}

.home-word-list li:first-child {
  color: var(--gold-text);
}

@media (max-width: 760px) {
  .home-criteria-grid {
    grid-template-columns: 1fr;
  }
  .home-word-list {
    flex-direction: row;
    flex-wrap: wrap;
    border-left: 0;
    border-top: 1px solid var(--border-strong);
    padding: 20px 0 0;
    gap: 10px 20px;
  }
}

/* ---------- Escena 3: Trayectoria (segundo momento fotográfico real) ---------- */

.home-scene--story {
  padding-block: 0;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
}

.home-story-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-story-bg {
  filter: blur(22px) brightness(0.4) grayscale(0.55);
  transform: scale(1.16);
  object-position: 62% 10%;
}

.home-story-fg {
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, black 45%);
  mask-image: linear-gradient(100deg, transparent 0%, black 45%);
  object-position: 66% 8%;
  filter: grayscale(0.5) contrast(1.05);
}

/* Scrim independiente del mask de arriba -- el mask por si solo no daba
   contraste suficiente para leer el texto sobre la cara (detectado en QA
   visual real, no a priori). Oscurece de forma confiable donde vive el
   texto, sin depender de que el blend del mask alcance. */
.home-story-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 1ra QA visual real mostro el texto ilegible sobre la cara -- este scrim
     tiene que cubrir hasta ~70% del ancho con opacidad alta, no solo un
     wash diagonal chico. Radial extra centrado en la zona real del texto
     (medida en la captura) + wash de abajo para el bloque de parrafo. */
  background:
    radial-gradient(58% 65% at 42% 60%, rgba(6, 7, 9, 0.82) 0%, rgba(6, 7, 9, 0.6) 55%, transparent 85%),
    linear-gradient(100deg, rgba(6, 7, 9, 0.92) 0%, rgba(6, 7, 9, 0.78) 45%, rgba(6, 7, 9, 0.4) 68%, transparent 88%),
    linear-gradient(0deg, rgba(6, 7, 9, 0.6) 0%, transparent 40%);
  pointer-events: none;
}

.home-story-copy {
  position: relative;
  z-index: 1;
  max-width: 620px;
  padding-block: clamp(56px, 8vw, 96px);
}

/* El texto vive sobre foto+scrim oscuro en AMBOS temas -- --ink/--muted se
   invierten en tema claro y quedan oscuro-sobre-oscuro (bug real detectado
   en QA de tema claro). Se fuerza claro acá, mismo patrón ya usado para
   .hero:has(.hero-photo) más arriba en este archivo. */
.home-story-copy .home-h2 {
  color: var(--ivory);
}

.home-story-copy .home-lede {
  color: rgba(244, 239, 230, 0.82);
}

.home-story-copy .home-kicker {
  color: var(--gold);
}

/* ---------- Escena 4: Prensa a escala ---------- */

.home-press-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.home-press-grid li {
  background: var(--bg);
}

.home-press-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 100%;
  padding: clamp(24px, 3vw, 34px) clamp(20px, 2.6vw, 28px);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 20px);
  text-decoration: none;
  transition: background-color 220ms var(--ease-out), color 220ms var(--ease-out);
}

.home-press-grid a span {
  color: var(--gold-text);
  font-family: var(--font-primary);
  font-size: 15px;
}

@media (hover: hover) and (pointer: fine) {
  .home-press-grid a:hover {
    background: var(--surface-strong);
  }
}

@media (max-width: 760px) {
  .home-press-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Escena 5: Ecosistema numerado ---------- */

.home-path-list {
  margin-top: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--border);
}

.home-path {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  padding-block: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: padding-left 260ms var(--ease-out);
}

.home-path-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--gold-text);
}

.home-path-body h3 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.8vw, 32px);
  color: var(--ink);
}

.home-path-body .home-lede {
  margin-top: 8px;
  font-size: 16px;
}

.home-path-arrow {
  font-size: 22px;
  color: var(--gold-text);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .home-path:hover {
    padding-left: 12px;
  }
  .home-path:hover .home-path-arrow {
    opacity: 1;
    transform: none;
  }
}

.home-path:focus-visible .home-path-arrow {
  opacity: 1;
  transform: none;
}

@media (max-width: 700px) {
  .home-path {
    grid-template-columns: auto 1fr;
  }
  .home-path-arrow {
    display: none;
  }
}

/* ---------- Escena CTA ---------- */

.home-scene--cta {
  padding-block: clamp(88px, 13vw, 160px);
}

/* ---------- Profundidad de scroll (GSAP, ver home-motion.js) + reduced-motion ---------- */

/* [data-home-reveal] -- exclusivo de home-motion.js/GSAP (no lo toca site.js,
   ver DECISIONS.md "Ruteo #2"). Oculto por default para que no haya flash
   antes de que GSAP tome el control; con prefers-reduced-motion, GSAP nunca
   se ejecuta (ver home-motion.js) asi que se fuerza visible acá. */
[data-home-reveal] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-home-reveal] {
    opacity: 1;
  }
  .home-depth-bg,
  .home-depth-fg,
  .home-story-bg,
  .home-story-fg {
    transform: none !important;
  }
}

/* Cuarta línea del H1 escalonado (el hero ahora tiene 4 líneas, no 2) */
[data-reveal-stagger] .reveal-line:nth-child(4) {
  transition-delay: 400ms;
}

.hero h1 {
  max-width: 19ch;
  /* Floor lowered from 38px: forced long hero headlines (e.g. "El cuidado
     personal también merece un lugar en tu vida.") into 4 near-word-by-word
     lines on mobile. Desktop untouched — 6.2vw dominates well above this
     floor on any real desktop viewport. */
  font-size: clamp(29px, 6.2vw, 76px);
  line-height: 1.05;
}
@media (max-width: 560px) {
  .hero h1 { max-width: 24ch; }
}

.hero-scroll-cue {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px clamp(20px, 5vw, 64px) 26px;
  color: var(--quiet);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.hero-scroll-cue::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
}

/* ---------- Grid asimétrico (editorial / bento) ---------- */

.grid-asym {
  display: grid;
  gap: clamp(16px, 2.2vw, 24px);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .grid-asym-a {
    grid-template-columns: 7fr 5fr;
  }
  .grid-asym-a > :first-child {
    grid-row: span 2;
  }
  .grid-asym-b {
    grid-template-columns: 5fr 7fr;
  }
  .grid-asym-b > :last-child {
    grid-row: span 2;
  }
}

.grid-asym .card {
  height: 100%;
}

/* ---------- Bento grid de 3 (Home, foco Portafolios en el medio, más ancho) ---------- */

/* FIX (QA independiente, PASS 4 round 1): las cards de entrada direccional
   (.enter-left/.enter-right, más arriba) empiezan desplazadas con
   translateX ANTES de que el usuario scrollee hasta acá — ese desplazamiento
   ensanchaba el scrollWidth de TODA la página desde el load (8px de overflow
   horizontal real en Home a 390/768px), no solo visualmente dentro de esta
   sección. overflow-x:hidden acá recorta esa excursión localmente, sin
   necesitar un overflow-x global en body/html. */
.grid-bento-3 {
  overflow-x: hidden;
}

@media (min-width: 760px) {
  .grid-bento-3 {
    grid-template-columns: 1fr 1.32fr 1fr;
    align-items: stretch;
  }
  .grid-bento-3 > :nth-child(1) {
    grid-column: 2;
    grid-row: 1;
  }
  .grid-bento-3 > :nth-child(2) {
    grid-column: 1;
    grid-row: 1;
  }
  .grid-bento-3 > :nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }
}

.vertical-block--featured {
  padding: clamp(30px, 3.4vw, 42px);
}

.vertical-block--featured h3 {
  font-size: clamp(24px, 2.6vw, 30px);
}

/* ---------- Vertical block (Ecosistema / Home ecosystem preview) ---------- */

.vertical-block {
  position: relative;
  padding: clamp(26px, 3vw, 36px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  transition: transform 260ms var(--ease-out), border-color 260ms var(--ease-out), background-color 260ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .vertical-block:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    background: var(--surface-strong);
  }
}

.vertical-block::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.vertical-block h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
}

/* ---------- FAQ (native <details>/<summary> — sin JS, accesible) ---------- */

.faq-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 600;
  color: var(--ink);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 400;
  color: var(--gold-text);
  transition: transform 200ms var(--ease-in-out);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 0;
  padding: 0 4px 22px;
  max-width: 720px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

/* ---------- Timeline (Sobre Julio) ---------- */

.timeline {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
  position: relative;
}

.timeline-item {
  display: grid;
  gap: 6px;
  padding-left: 22px;
  border-left: 2px solid var(--border);
  position: relative;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gold);
}

.timeline-year {
  color: var(--gold-text);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
}

.timeline-item p {
  margin: 0;
  max-width: 620px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

/* PASS 3 — zigzag izquierda/derecha por hito (principio Bartlett, ver
   CREATIVE_DIRECTION.md), solo desde 760px para no arriesgar mobile (QA en
   390/768/1440 — a 768 ya entra el zigzag). Cada .timeline-item ya trae su
   propio [data-reveal] (agregado en HTML) — entran uno por uno al hacer
   scroll, no como bloque único. */
@media (min-width: 760px) {
  .timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--border);
  }

  .timeline-item {
    width: calc(50% - 40px);
    border-left: 0;
    padding-left: 0;
  }

  .timeline-item::before {
    left: auto;
  }

  .timeline-item:nth-child(odd) {
    justify-self: start;
  }

  .timeline-item:nth-child(odd)::before {
    right: -46px;
  }

  .timeline-item:nth-child(even) {
    justify-self: end;
    text-align: right;
  }

  .timeline-item:nth-child(even)::before {
    left: -46px;
  }

  .timeline-item:nth-child(even) p {
    margin-left: auto;
  }
}

/* ---------- Photo carousel (dinámico, scroll-snap nativo, sin librería) ---------- */

.photo-carousel {
  position: relative;
  margin-top: 32px;
}

.photo-carousel-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.photo-carousel-track::-webkit-scrollbar {
  display: none;
}

.photo-carousel-slide {
  flex: 0 0 min(76%, 400px);
  scroll-snap-align: start;
  margin: 0;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4 / 5;
}

@media (min-width: 640px) {
  .photo-carousel-slide {
    flex-basis: min(42%, 360px);
  }
}

.photo-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
  /* la transición de zoom la maneja [data-reveal-zoom] img cuando el carrusel
     lo usa (ver arriba) — acá solo el layout base de la imagen. */
}

.photo-carousel-slide figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(0deg, rgba(11, 13, 16, 0.85), transparent 65%);
  color: var(--ivory);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
}

.carousel-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.carousel-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  position: relative;
  /* DELTA 2 — el activo ya no es solo "más grande" (círculo escalado), pasa
     a pill horizontal (ancho crece, alto se mantiene) — más distinguible. */
  transition: background-color 160ms ease, width 260ms var(--ease-out);
}

.carousel-dot[aria-current="true"] {
  width: 22px;
  background: var(--gold);
}

@media (max-width: 759px) {
  /* Real tap target on touch: the visible dot stays 7-22px (unchanged look), but an
     invisible ::before pads out the hit box to a comfortable touch size. Desktop
     mouse precision doesn't need this, so it's touch-only. */
  .carousel-dot::before {
    content: "";
    position: absolute;
    inset: -11px;
  }
}

.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 120ms var(--ease-out);
}

.carousel-btn:active {
  transform: scale(0.92);
}

@media (hover: hover) and (pointer: fine) {
  .carousel-btn:hover {
    border-color: var(--gold);
    background: rgba(176, 138, 87, 0.1);
  }
}

/* ---------- Oversized editorial statement ---------- */

.statement {
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 5.4vw, 58px);
  line-height: 1.08;
  color: var(--ink);
}

.statement em {
  font-style: normal;
  color: var(--gold-text);
}

/* ---------- Social icons (redes) — reemplaza los pill-buttons de texto ---------- */

.social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.social-icons a,
.social-icons .social-icon-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 120ms var(--ease-out);
}

.social-icons svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

@media (hover: hover) and (pointer: fine) {
  .social-icons a:hover {
    border-color: var(--gold);
    background: rgba(176, 138, 87, 0.1);
  }
}

.social-icons a:active {
  transform: scale(0.94);
}

.social-icon-pending {
  color: var(--quiet);
  cursor: default;
  border-style: dashed;
  position: relative;
}

/* El tooltip (::after) es una afordancia solo de hover — en touch nunca se
   dispara, así que ni siquiera se genera la caja en mobile. Antes se creaba
   siempre (solo con opacity:0), y su `white-space:nowrap` absoluto empujaba
   el scrollWidth del documento más allá del viewport en 390px (overflow
   horizontal real, aunque invisible — bug real de QA, corregido). */
@media (hover: hover) and (pointer: fine) {
  .social-icon-pending::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    /* PASS 3.2 — QA independiente encontró que un tooltip nowrap puede seguir
       empujando el scrollWidth del documento en un viewport angosto NO-touch
       (navegador desktop redimensionado a ~390px, hover:hover sigue true).
       max-width + wrap acota el tooltip a un ancho fijo pase lo que pase con
       el texto, sin depender de que el viewport sea touch o no. */
    max-width: 160px;
    white-space: normal;
    text-align: center;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface-strong);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
  }

  .social-icon-pending:hover::after {
    opacity: 1;
  }
}