/* ==========================================================================
   1. VARIABLE ALIASES
   Variables cortas que referencian las de theme.json.
   Cambiar theme.json actualiza todo automaticamente.
   ========================================================================== */

:root {
  /* --- Header height (JS updates this, fallback for pre-JS) --- */
  --header-height: 72px;

  /* --- Colors --- */
  --color-primary: var(--wp--preset--color--primary);
  --color-primary-light: var(--wp--preset--color--primary-light);
  --color-primary-dark: var(--wp--preset--color--primary-dark);
  --color-secondary: var(--wp--preset--color--secondary);
  --color-accent: var(--wp--preset--color--accent);
  --color-bg: var(--wp--preset--color--background);
  --color-surface: var(--wp--preset--color--surface);
  --color-muted: var(--wp--preset--color--muted);
  --color-text: var(--wp--preset--color--foreground);
  --color-text-light: var(--wp--preset--color--foreground-light);
  --color-border: var(--wp--preset--color--border);
  --color-white: var(--wp--preset--color--white);
  --color-black: var(--wp--preset--color--black);
  --color-success: var(--wp--preset--color--success);
  --color-error: var(--wp--preset--color--error);

  /* --- Text sizes --- */
  --text-xs: var(--wp--preset--font-size--xs);
  --text-s: var(--wp--preset--font-size--s);
  --text-m: var(--wp--preset--font-size--m);
  --text-l: var(--wp--preset--font-size--l);
  --text-xl: var(--wp--preset--font-size--xl);
  --text-2xl: var(--wp--preset--font-size--2-xl);
  --text-3xl: var(--wp--preset--font-size--3-xl);
  --text-4xl: var(--wp--preset--font-size--4-xl);
  --text-5xl: var(--wp--preset--font-size--5-xl);

  /* --- Fonts --- */
  --font-primary: var(--wp--preset--font-family--primary);
  --font-secondary: var(--wp--preset--font-family--secondary);

  /* --- Spacing (base scale) --- */
  --space-3xs: var(--wp--preset--spacing--3-xs);
  --space-2xs: var(--wp--preset--spacing--2-xs);
  --space-xs: var(--wp--preset--spacing--xs);
  --space-s: var(--wp--preset--spacing--s);
  --space-m: var(--wp--preset--spacing--m);
  --space-l: var(--wp--preset--spacing--l);
  --space-xl: var(--wp--preset--spacing--xl);
  --space-2xl: var(--wp--preset--spacing--2-xl);
  --space-3xl: var(--wp--preset--spacing--3-xl);

  /* --- Spacing: One-up pairs (Utopia-style) ---
     Min del tamaño menor + max del tamaño mayor = rango fluido más dramático.
     Útiles para espaciados que crecen mucho entre móvil y escritorio. */
  --space-xs-s:  clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
  --space-s-m:   clamp(1rem, 0.75rem + 1.25vw, 2rem);
  --space-m-l:   clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  --space-l-xl:  clamp(2rem, 1.25rem + 3.75vw, 4rem);
  --space-xl-2xl: clamp(3rem, 2rem + 5vw, 5.5rem);

  /* --- Section spacing (×1.5 de la escala base) ---
     Padding vertical de secciones/patterns completos.
     Más generoso que el spacing regular para crear separación visual clara. */
  --section-space-s:  clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --section-space-m:  clamp(3rem, 2.25rem + 3.75vw, 4.5rem);
  --section-space-l:  clamp(4rem, 3rem + 5vw, 6rem);
  --section-space-xl: clamp(5rem, 3.75rem + 6.25vw, 8rem);

  /* --- Contextual tokens (intención semántica) ---
     En vez de elegir "space-m o space-l", usa el token con intención.
     Cambiar estos valores actualiza TODO el sitio de golpe. */
  --content-gap:   var(--space-s);    /* Entre párrafos, listas, texto corrido  */
  --heading-gap:   var(--space-m);    /* Encima de un heading (separarse de lo anterior) */
  --heading-sub:   var(--space-2xs);  /* Debajo de un heading (pegarse a su contenido) */
  --grid-gap:      var(--space-m);    /* Entre cards, grid items, columnas      */
  --section-space:  var(--section-space-m); /* Padding vertical por defecto de sección */
  --container-gap: var(--space-l);    /* Entre bloques dentro de una sección    */
  --gutter:        var(--space-m);    /* Margen lateral del contenedor principal */

  /* --- Layout --- */
  --content-width: 768px;
  --wide-width: 1200px;

  /* --- Borders (unificados para coherencia) --- */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-s: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-m: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-l: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* --- White alpha tokens (reusable across dark sections) --- */
  --white-5: rgba(255, 255, 255, 0.05);
  --white-8: rgba(255, 255, 255, 0.08);
  --white-10: rgba(255, 255, 255, 0.10);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-18: rgba(255, 255, 255, 0.18);
  --white-25: rgba(255, 255, 255, 0.25);
  --white-45: rgba(255, 255, 255, 0.45);
  --white-50: rgba(255, 255, 255, 0.50);
  --white-72: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   1b. GLOBAL BOX-SIZING RESET
   ========================================================================== */

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

html {
  scroll-padding-top: calc(var(--header-height, 72px) + var(--space-m, 32px));
}

html, body {
  overflow-x: hidden;
}

/* ==========================================================================
   1c. GLOBAL RESETS — WordPress block-gap margin override
   ========================================================================== */

.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > .wp-block-group,
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ==========================================================================
   1c. SECTION SPACING SYSTEM
   WordPress FSE generates margin-block from blockGap with !important.
   We kill ALL automatic margins between top-level sections.
   Each pattern/section owns its vertical spacing via inline padding.
   Internal blocks (columns, cards, paragraphs) are NOT affected.
   ========================================================================== */

/* Level 1: Direct children of wp-site-blocks */
.wp-site-blocks > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Level 2: Sections inside main wrapper (patterns) */
main.wp-block-group > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* Level 3: Restore internal spacing for blocks INSIDE patterns.
   blockGap:0 in theme.json kills ALL gaps — we restore spacing
   for content blocks inside sections so text flows naturally. */
main.wp-block-group > * > .wp-block-group__inner-container > *,
main.wp-block-group > .wp-block-group > *:not(:first-child),
main.wp-block-group > .wp-block-cover .wp-block-cover__inner-container > *:not(:first-child) {
  margin-block-start: var(--wp--preset--spacing--s);
}

/* ==========================================================================
   1c-b. HEADING MARGIN RESET — Margins controlados por nuestro sistema
   Los navegadores y WordPress aplican margin-block a h1-h6 por defecto.
   Nosotros lo reseteamos y lo controlamos con --heading-gap / --heading-sub.
   Esto evita que el margin del heading se SUME al padding del contenedor.
   ========================================================================== */

/* Reset: todos los headings arrancan sin margin */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Primer hijo de cualquier contenedor principal: nunca margin-top.
   Esto garantiza que el padding del contenedor es la UNICA distancia
   entre el borde superior y el primer contenido. */
main > *:first-child,
.wp-block-post-content > *:first-child,
.entry-content > *:first-child,
section > *:first-child,
.flow > *:first-child {
  margin-block-start: 0 !important;
}

/* Headings que NO son primer hijo: separarse de lo anterior */
:is(h1, h2, h3, h4, h5, h6, .wp-block-heading):not(:first-child) {
  margin-block-start: var(--heading-gap);
}

/* Elemento después de heading: pegarse al heading */
:is(h1, h2, h3, h4, h5, h6, .wp-block-heading) + * {
  margin-block-start: var(--heading-sub);
}

/* ==========================================================================
   1d. FLOW UTILITY — Vertical rhythm automático
   Aplica .flow a cualquier contenedor y sus hijos directos se espacian
   automáticamente. Los headings se separan más de lo anterior y se pegan
   a su contenido. Inspirado en Every Layout + ACSS contextual spacing.
   ========================================================================== */

/* Base flow: espacia hijos con --content-gap (default --space-s) */
.flow > * + * {
  margin-block-start: var(--flow-space, var(--content-gap));
}

/* Flow compacto y amplio */
.flow--tight > * + * {
  margin-block-start: var(--space-2xs);
}
.flow--loose > * + * {
  margin-block-start: var(--container-gap);
}

/* Headings dentro de flow: más espacio arriba, poco abajo */
.flow > :is(h1, h2, h3, h4, h5, h6) {
  --flow-space: var(--heading-gap);
}
.flow > :is(h1, h2, h3, h4, h5, h6) + * {
  --flow-space: var(--heading-sub);
}

/* Primer hijo nunca tiene margin-top (lobotomized owl ya lo maneja con +) */

/* ==========================================================================
   1e. SECTION UTILITY — Padding consistente para secciones/patterns
   Usa .section en el wrapper de cada pattern para padding vertical automático.
   Variantes: .section--s, .section--l, .section--xl para ajustar.
   ========================================================================== */

.section {
  padding-block: var(--section-space);
  padding-inline: var(--gutter);
}
.section--s  { padding-block: var(--section-space-s); }
.section--l  { padding-block: var(--section-space-l); }
.section--xl { padding-block: var(--section-space-xl); }

/* ==========================================================================
   ACCESSIBILITY — focus-visible, skip-link enhancement
   ========================================================================== */

*:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.wp-block-template-skip-link:focus {
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-m);
  padding: 12px 24px;
  border-radius: 0 0 6px 0;
  z-index: 100001;
}

/* ==========================================================================
   UTILITIES — Typography
   ========================================================================== */

.text-xs { font-size: var(--text-xs); }
.text-s { font-size: var(--text-s); }
.text-m { font-size: var(--text-m); }
.text-l { font-size: var(--text-l); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

.weight-light { font-weight: 300; }
.weight-normal { font-weight: 400; }
.weight-medium { font-weight: 500; }
.weight-semibold { font-weight: 600; }
.weight-bold { font-weight: 700; }

.font-primary { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

.leading-tight { line-height: 1.2; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.7; }

.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.05em; }

/* ==========================================================================
   UTILITIES — Colors
   ========================================================================== */

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-light { color: var(--color-text-light); }
.text-white { color: var(--color-white); }
.text-black { color: var(--color-black); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }

.bg-primary { background-color: var(--color-primary); }
.bg-primary-light { background-color: var(--color-primary-light); }
.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-white { background-color: var(--color-white); }
.bg-surface { background-color: var(--color-surface); }
.bg-muted { background-color: var(--color-muted); }
.bg-black { background-color: var(--color-black); }

/* ==========================================================================
   UTILITIES — Spacing
   ========================================================================== */

.gap-3xs { gap: var(--space-3xs); }
.gap-2xs { gap: var(--space-2xs); }
.gap-xs { gap: var(--space-xs); }
.gap-s { gap: var(--space-s); }
.gap-m { gap: var(--space-m); }
.gap-l { gap: var(--space-l); }
.gap-xl { gap: var(--space-xl); }
.gap-2xl { gap: var(--space-2xl); }
.gap-3xl { gap: var(--space-3xl); }

.pad-3xs { padding: var(--space-3xs); }
.pad-2xs { padding: var(--space-2xs); }
.pad-xs { padding: var(--space-xs); }
.pad-s { padding: var(--space-s); }
.pad-m { padding: var(--space-m); }
.pad-l { padding: var(--space-l); }
.pad-xl { padding: var(--space-xl); }
.pad-2xl { padding: var(--space-2xl); }
.pad-3xl { padding: var(--space-3xl); }

.pad-y-3xs { padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); }
.pad-y-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); }
.pad-y-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.pad-y-s { padding-top: var(--space-s); padding-bottom: var(--space-s); }
.pad-y-m { padding-top: var(--space-m); padding-bottom: var(--space-m); }
.pad-y-l { padding-top: var(--space-l); padding-bottom: var(--space-l); }
.pad-y-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

.pad-x-3xs { padding-left: var(--space-3xs); padding-right: var(--space-3xs); }
.pad-x-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs); }
.pad-x-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.pad-x-s { padding-left: var(--space-s); padding-right: var(--space-s); }
.pad-x-m { padding-left: var(--space-m); padding-right: var(--space-m); }
.pad-x-l { padding-left: var(--space-l); padding-right: var(--space-l); }
.pad-x-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }

.margin-y-3xs { margin-top: var(--space-3xs); margin-bottom: var(--space-3xs); }
.margin-y-2xs { margin-top: var(--space-2xs); margin-bottom: var(--space-2xs); }
.margin-y-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.margin-y-s { margin-top: var(--space-s); margin-bottom: var(--space-s); }
.margin-y-m { margin-top: var(--space-m); margin-bottom: var(--space-m); }
.margin-y-l { margin-top: var(--space-l); margin-bottom: var(--space-l); }
.margin-y-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }

/* --- Contextual gap utilities (semánticas) --- */
.content-gap  { gap: var(--content-gap); }
.heading-gap  { gap: var(--heading-gap); }
.grid-gap     { gap: var(--grid-gap); }
.container-gap { gap: var(--container-gap); }

/* --- One-up pair gaps --- */
.gap-xs-s   { gap: var(--space-xs-s); }
.gap-s-m    { gap: var(--space-s-m); }
.gap-m-l    { gap: var(--space-m-l); }
.gap-l-xl   { gap: var(--space-l-xl); }
.gap-xl-2xl { gap: var(--space-xl-2xl); }

/* ==========================================================================
   UTILITIES — Layout
   ========================================================================== */

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-row { display: flex; flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.grow { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }

.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-content { max-width: var(--content-width); }
.max-w-wide { max-width: var(--wide-width); }
.mx-auto { margin-left: auto; margin-right: auto; }

.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; top: 0; }
.overflow-hidden { overflow: hidden; }

/* ==========================================================================
   UTILITIES — Borders & Effects
   ========================================================================== */

.rounded-s { border-radius: var(--radius-s); }
.rounded-m { border-radius: var(--radius-m); }
.rounded-l { border-radius: var(--radius-l); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-s { box-shadow: var(--shadow-s); }
.shadow-m { box-shadow: var(--shadow-m); }
.shadow-l { box-shadow: var(--shadow-l); }
.shadow-xl { box-shadow: var(--shadow-xl); }

.border { border: 1px solid var(--color-border); }
.border-top { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }

.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }

/* ==========================================================================
   RESPONSIVE GRIDS — auto-collapse without media queries
   ========================================================================== */

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--space-m);
}

.auto-grid-narrow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--space-m);
}

.auto-grid-wide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
  gap: var(--space-m);
}

/* ==========================================================================
   ANIMATIONS — Hero + Scroll reveal (IntersectionObserver)
   ========================================================================== */

.hero-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.hero-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hero-animate[data-delay="1"] { transition-delay: 0.1s; }
.hero-animate[data-delay="2"] { transition-delay: 0.2s; }
.hero-animate[data-delay="3"] { transition-delay: 0.35s; }
.hero-animate[data-delay="4"] { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  .hero-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal[data-stagger-children] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.scroll-reveal[data-stagger-children] > *.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

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

/* ==========================================================================
   COMPONENTS BASE
   ========================================================================== */

.expand-click {
  position: static;
}
.expand-click::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

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

/* ==========================================================================
   RESPONSIVE — Grid breakpoints
   ========================================================================== */

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}