/* ==========================================================================
   KNND · Sistema visual del sitio
   Hoja única compartida por las cinco páginas.

   0 · Fuentes (provisionales alojadas en el tema · de marca pendientes)
   1 · Tokens
   2 · Base
   3 · Contenedores
   4 · Tipografía
   5 · Enlaces y áreas táctiles
   6 · Botones
   7 · Header
   8 · Footer
   9 · Scroll reveal
  10 · Componentes de contenido (etiqueta y enlace de sección, tarjeta,
       banner de página interna, pestañas, tarjeta de clase)
  11 · Páginas: Home
  12 · Páginas: The Classes
  13 · Responsive
  14 · Movimiento reducido
  15 · WordPress (footer al fondo, páginas de texto, 404, selector de idioma
       reservado, feed de Instagram, barra de administración)

   La retícula sale del proof a 1920 px (1vw = 19.2px); la tipografía va a 2/3
   de esa escala y es fija en px de 1024 px hacia arriba.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · Fuentes
   0.1 · Provisionales, alojadas en el tema (assets/fonts, licencia OFL).
   Son los mismos archivos que servía Google Fonts al sitio estático
   (subconjuntos latin y latin-ext), declarados igual: el render no cambia.
   Saira e Inter son variables; Archivo es la instancia wdth 125 · wght 900.
   -------------------------------------------------------------------------- */
@font-face { font-family:'Saira'; font-style:normal; font-weight:400 500; font-stretch:100%; font-display:swap;
  src:url('../fonts/saira-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Saira'; font-style:normal; font-weight:400 500; font-stretch:100%; font-display:swap;
  src:url('../fonts/saira-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/inter-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:900; font-stretch:125%; font-display:swap;
  src:url('../fonts/archivo-wdth125-900-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:900; font-stretch:125%; font-display:swap;
  src:url('../fonts/archivo-wdth125-900-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --------------------------------------------------------------------------
   0.2 · Fuentes de marca (pendientes)
   Cuando lleguen los woff2: copiarlos en assets/fonts/, descomentar su
   @font-face y cambiar las variables --font-display, --font-body,
   --font-detail y --font-black de la sección 1 (Tokens). Ajustar también la
   precarga de inc/assets.php y retirar los @font-face provisionales de 0.1.
   Al entrar Eurostile y Univers, sus métricas difieren de Saira, Inter y
   Archivo. En cada @font-face calibrar size-adjust, ascent-override y
   descent-override contra el render actual para que el layout no salte.
   Mantener font-display:swap.
   -------------------------------------------------------------------------- */
/* @font-face { font-family:'Eurostile';    src:url('../fonts/eurostile-medium.woff2') format('woff2');      font-weight:500; font-display:swap; } */
/*   ↳ TODO calibrar vs Saira 500:   size-adjust: ?%; ascent-override: ?%; descent-override: ?%; */
/* @font-face { font-family:'Univers';      src:url('../fonts/univers-roman.woff2') format('woff2');         font-weight:400; font-display:swap; } */
/*   ↳ TODO calibrar vs Inter 400:   size-adjust: ?%; ascent-override: ?%; descent-override: ?%; */
/* @font-face { font-family:'Univers';      src:url('../fonts/univers-bold.woff2') format('woff2');          font-weight:700; font-display:swap; } */
/*   ↳ Univers 65 Bold · TODO calibrar vs Inter 700: size-adjust: ?%; ascent-override: ?%; descent-override: ?%; */
/* @font-face { font-family:'EurostileExt'; src:url('../fonts/eurostile-53-extended.woff2') format('woff2'); font-weight:500; font-display:swap; } */
/*   ↳ TODO calibrar vs Archivo 500: size-adjust: ?%; ascent-override: ?%; descent-override: ?%; */
/* @font-face { font-family:'UniversXBlackExt'; src:url('../fonts/univers-extra-black-extended.woff2') format('woff2'); font-weight:900; font-display:swap; } */
/*   ↳ TODO calibrar vs Archivo 900 wdth125: size-adjust: ?%; ascent-override: ?%; descent-override: ?%; */

/* --------------------------------------------------------------------------
   1 · Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --heat:  #6C0006;  /* vino profundo — color de marca */
  --ivory: #EEE6D9;  /* ivory oficial — superficies claras */
  --cream: #FFEFE6;  /* crema cálida — texto sobre oscuro */
  --white: #FFFFFF;
  --heat-press: #5F0005;   /* --heat oscurecido 12 % (hover del botón sólido) */
  --heat-rgb: 108 0 6;     /* --heat en canales RGB, para velos con alfa */
  --scrim: 34 2 6;         /* vino casi negro, en canales RGB para scrims con alfa */

  /* Familias — el cambio a las fuentes reales son estas cuatro líneas */
  --font-display: 'Saira', system-ui, sans-serif;   /* → Eurostile Medium */
  --font-body:    'Inter', system-ui, sans-serif;   /* → Univers LT Std Roman */
  --font-detail:  'Archivo', system-ui, sans-serif; /* → Eurostile 53 Extended (sin uso por ahora) */
  --font-black:   'Archivo', system-ui, sans-serif; /* → Univers LT Std Extra Black Extended */

  /* Escala tipográfica — fija en px desde 1024; solo los titulares son fluidos */
  --fs-h1:     clamp(32px, 3.5vw, 50px);
  --fs-h2:     clamp(28px, 2.8vw, 40px);
  --fs-class:  45px;   /* nombres de clase / sesión */
  --fs-menu:   24px;   /* ítems del menú móvil */
  --fs-label:  24px;   /* etiquetas de sección y pestañas */
  --fs-phrase: 18px;   /* frases del bloque KNND50 */
  --fs-nav:    16px;
  --fs-body:   16px;
  --fs-btn:    14px;
  --fs-footer: 14px;
  --fs-tagline: 16px;  /* tagline del overlay de clase */
  --fs-desc:    15px;  /* descripción del overlay de clase */
  --fs-pillar:  20px;  /* nombre de pilar del método */
  --fs-quote:   26px;  /* cita */

  /* Tracking */
  --track-ui:     0.06em;   /* nav, etiquetas y pestañas */
  --track-btn:    0.04em;
  --track-class:  0.5em;    /* nombres de clase — rasgo central del diseño */
  --track-phrase: 0.02em;

  --measure: 52ch;          /* ancho máximo de párrafo */

  /* Retícula */
  --canvas: 1920px;
  --pad: clamp(20px, 2.5vw, 48px);      /* 48 px a 1920 */
  --gutter: 21px;
  --col-session: 593px;
  --col-ig: 440px;
  /* Anchos máximos de cada grid: a 1920 las columnas miden exactamente 593 y 440 */
  --sessions-max: calc(3 * var(--col-session) + 2 * var(--gutter)); /* 1821 */
  --ig-max:       calc(4 * var(--col-ig) + 3 * var(--gutter));      /* 1823 */
  --story-img-w:  clamp(380px, 30.6vw, 587px);                      /* 587 × 880 a 1920 */

  /* Espaciado */
  --space-section: clamp(72px, 6.25vw, 120px);
  --space-head:    clamp(40px, 3.33vw, 64px);   /* etiqueta de sección → contenido */
  --space-block:   48px;
  --space-p:       24px;
  --space-list:    16px;

  /* Header */
  --header-h: clamp(64px, 5.21vw, 100px);
  --logo-w: 145px;
  --nav-gap: 40px;

  /* Movimiento */
  --dur-ui: 200ms;
  --dur-btn: 250ms;
  --dur-media: 400ms;
  --dur-overlay: 300ms;
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);

  /* Botones: relleno de hover sobre superficie clara */
  --btn-fill: var(--heat);
  --btn-ink:  var(--cream);
}

/* Superficie oscura (hero, KNND50, header, footer, overlay de clase):
   texto crema y hover de outline en crema */
.surface-dark {
  color: var(--cream);
  --btn-fill: var(--cream);
  --btn-ink:  var(--heat);
}

/* --------------------------------------------------------------------------
   2 · Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scrollbar-gutter: stable;          /* la barra de scroll no desplaza el layout */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--heat);                /* nunca negro puro */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, figure, address { margin: 0; }
ul[role="list"] { list-style: none; padding: 0; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* Enlace "saltar al contenido": visible solo con foco de teclado */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 14px 20px;
  background: var(--cream);
  color: var(--heat);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-btn);
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* Solo para lectores de pantalla */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3 · Contenedores
   Las secciones con color de fondo van a sangre; lo que se topa en 1920 es
   el contenedor interno.
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--canvas);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.bleed { width: 100%; }               /* a sangre: nunca 100vw (incluiría la barra de scroll) */

/* --------------------------------------------------------------------------
   4 · Tipografía
   --tracking alimenta letter-spacing y su compensación óptica.
   -------------------------------------------------------------------------- */
.t-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1;
  --tracking: 0em;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  text-wrap: balance;
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.05;
  --tracking: 0em;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  text-wrap: balance;
}
.t-class {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-class);
  line-height: 1.1;
  --tracking: var(--track-class);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
}
.t-nav {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-nav);
  line-height: 1.2;
  --tracking: var(--track-ui);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.t-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1.2;
  --tracking: var(--track-ui);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.t-phrase {
  font-family: var(--font-black);
  font-weight: 900;
  font-stretch: 125%;                       /* eje wdth al máximo */
  font-variation-settings: 'wdth' 125;
  font-size: var(--fs-phrase);
  line-height: 1.3;
  --tracking: var(--track-phrase);
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}
.t-footer {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-footer);
  line-height: 1.6;
  text-transform: uppercase;
}
.w-700 { font-weight: 700; }

/* Saltos de línea del proof: mandan en desktop, desaparecen en móvil */
@media (max-width: 767px) {
  .copy-breaks br { display: none; }
}

/* letter-spacing añade espacio tras el último carácter: se compensa
   con un margin-right negativo igual al tracking del elemento. */
.optical-center { margin-right: calc(-1 * var(--tracking, 0em)); }

/* ™ sin <sup>. En texto con tracking, el margen izquierdo lo pega a su
   letra (anula el tracking previo) y el derecho repone el espacio final que
   .optical-center descuenta. El ÷0.33 convierte a la escala del padre. */
.tm {
  font-size: 0.33em;
  vertical-align: super;
  line-height: 0;
  letter-spacing: 0;
  margin-inline: calc(var(--tracking, 0em) / -0.33) calc(var(--tracking, 0em) / 0.33);
}

/* --------------------------------------------------------------------------
   5 · Enlaces y áreas táctiles
   -------------------------------------------------------------------------- */
/* Subrayado que aparece en hover (nav, frase enlazada de KNND50, footer) */
.link-reveal {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-ui) ease;
}
.link-reveal:hover,
.link-reveal:focus-visible,
.link-reveal[aria-current="page"] { text-decoration-color: currentColor; }

/* Subrayado permanente que engrosa a 2 px en hover */
.link-underline {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness var(--dur-ui) ease;
}
.link-underline:hover { text-decoration-thickness: 2px; }

/* Área activa mínima de 44 × 44 sin alterar el tamaño visual */
.hit { position: relative; }
.hit::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------------
   6 · Botones
   -------------------------------------------------------------------------- */
.btn {
  --tracking: var(--track-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* 16 × 40; el lado derecho descuenta el tracking final para centrar ópticamente */
  padding: 16px calc(40px - var(--tracking)) 16px 40px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-btn);
  line-height: 1;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-btn) ease,
    color var(--dur-btn) ease,
    border-color var(--dur-btn) ease;
}
.btn--outline { background-color: transparent; border-color: currentColor; }
.btn--solid   { background-color: var(--heat); color: var(--cream); }
.btn--block   { width: 100%; }

/* Estado activo permanente: el CTA de la página actual se ve relleno */
.btn--outline[aria-current="page"],
.btn--outline:hover,
.btn--outline:active {
  background-color: var(--btn-fill);
  border-color: var(--btn-fill);
  color: var(--btn-ink);
}
.btn--solid:hover,
.btn--solid:active { background-color: var(--heat-press); }

/* --------------------------------------------------------------------------
   7 · Header (componente compartido por todas las páginas)
   Sin JS queda en position:absolute (se va con el banner y nunca queda crema
   sobre blanco). El JS lo fija y le da fondo sólido al pasar el banner.
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 100;
  background-color: transparent;
  transition: background-color var(--dur-btn) ease;
}
.site-header.is-fixed { position: fixed; }
.site-header.is-solid { background-color: var(--heat); }

/* Tres columnas: logo (auto) · nav (1fr) · idioma + CTA (auto).
   Los ítems se centran dentro de la columna libre, no respecto a la página. */
.site-header__bar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  min-height: var(--header-h);
}

.site-header__logo {
  position: relative;
  z-index: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-header__logo .logo {
  width: var(--logo-w);
  height: auto;
  aspect-ratio: 640 / 126;
  /* el viewBox deja 23/640 de aire a la izquierda: se descuenta para que la K
     quede sobre el margen de la retícula */
  margin-left: calc(var(--logo-w) * -23 / 640);
}

.site-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nav-gap);
}
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.site-header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.67vw, 32px);
}

/* Selector de idioma — Polylang lo reemplazará */
.lang {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  opacity: 0.5;
  transition: opacity var(--dur-ui) ease;
}
.lang a:hover,
.lang a[aria-current] { opacity: 1; }
.lang__sep { opacity: 0.5; }

/* Hamburguesa → X */
.menu-toggle {
  position: relative;
  z-index: 2;
  display: none;
  justify-self: end;
  width: 44px;
  height: 44px;
  margin-right: -10px;               /* alinea las barras con el margen de la retícula */
}
.menu-toggle__bar {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--dur-btn) ease;
}
.menu-toggle__bar:nth-child(1) { top: calc(50% - 5px); }
.menu-toggle__bar:nth-child(2) { top: calc(50% + 3px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Desktop: el panel desaparece como caja y nav + acciones ocupan la retícula.
   El menú horizontal empieza en 1200 px (cambio del tema; en el estático era
   1024): entre 1024 y 1199 los cuatro ítems no caben en una línea sin
   apretarse, así que ahí también se usa la hamburguesa. Debe coincidir con
   `desktop` en knnd.js. */
@media (min-width: 1200px) {
  .site-header__panel { display: contents; }
}

/* Móvil, tablet e iPad en horizontal: panel a pantalla completa en --heat */
@media (max-width: 1199px) {
  .site-header__bar { grid-template-columns: 1fr auto; }
  .menu-toggle { display: block; }

  .site-header__panel {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding:
      calc(var(--header-h) + 32px)
      var(--pad)
      max(32px, env(safe-area-inset-bottom));
    background-color: var(--heat);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur-btn) ease, visibility 0s linear var(--dur-btn);
  }
  .site-header.is-menu-open .site-header__panel {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--dur-btn) ease;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
  }
  .site-nav .nav-link {
    min-height: 56px;
    font-size: var(--fs-menu);
    line-height: 1.1;
  }

  .site-header__actions { display: contents; }
  .lang { margin-block: 40px 48px; }
  .site-header__actions .btn {
    width: 100%;
    margin-top: auto;
  }
}

/* Bloqueo de scroll del menú: overflow, nunca position:fixed */
html.is-menu-open,
html.is-menu-open body { overflow: hidden; }

/* --------------------------------------------------------------------------
   8 · Footer (componente compartido)
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--heat);
  padding-block: var(--space-section) clamp(40px, 3.33vw, 64px);
}
.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.site-footer__contact a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-ui) ease;
}
.site-footer__contact a:hover { text-decoration-color: currentColor; }
.site-footer__sep { margin-inline: 0.75em; }
.site-footer .logo {
  width: 160px;
  height: auto;
  aspect-ratio: 640 / 126;
  margin-top: clamp(64px, 6.25vw, 120px);
  margin-left: calc(160px * -23 / 640);   /* alinea la K con el texto */
}

/* --------------------------------------------------------------------------
   9 · Scroll reveal (componente compartido)
   El estado oculto solo existe con JS activo (clase .js en <html>): sin JS
   todo el contenido se ve. Se animan opacity y transform, nunca el layout.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms var(--ease-reveal),
    transform 700ms var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0ms);
}

/* --------------------------------------------------------------------------
   10 · Componentes de contenido
   -------------------------------------------------------------------------- */

/* 10.1 · Etiqueta de sección y enlace de sección ---------------------------- */
.section-label {
  text-align: center;
  color: var(--heat);
}
.section-link {
  margin-top: var(--space-block);
  text-align: center;
}
.section-link--loose { margin-top: var(--space-section); }
.section-link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 10.2 · Tarjeta con foto y nombre centrado -------------------------------- */
.card {
  position: relative;
  isolation: isolate;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  color: var(--cream);
  background-color: var(--heat);
}
.card:focus-visible { outline-color: var(--heat); }
.card__media,
.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.card__media { z-index: -2; }
.card__media img {
  object-fit: cover;
  transition: transform var(--dur-media) ease-out;
}
/* Scrim radial muy suave detrás del nombre: solo lo necesario para que el
   crema llegue a 3:1 sobre las zonas más claras de la foto. Sin bordes. */
.card__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 78% 36% at 50% 50%,
    rgb(var(--scrim) / 0.39) 0%,
    rgb(var(--scrim) / 0.37) 48%,
    rgb(var(--scrim) / 0.18) 74%,
    rgb(var(--scrim) / 0) 100%);
}
.card__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgb(var(--scrim) / 0.16);
  opacity: 0;
  transition: opacity var(--dur-media) ease-out;
}
.card__name {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: 12px;
}
@media (hover: hover) {
  .card:hover .card__media img { transform: scale(1.04); }
  .card:hover .card__scrim::after { opacity: 1; }
}
.card:focus-visible .card__media img { transform: scale(1.04); }
.card:focus-visible .card__scrim::after { opacity: 1; }

/* 10.3 · Banner de página interna ------------------------------------------ */
.page-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;          /* el título se centra bajo el header */
  padding: var(--header-h) var(--pad) 0;
  height: 50vh;                     /* respaldo */
  height: 50svh;                    /* la mitad exacta del hero de la Home */
  min-height: 320px;
  overflow: hidden;
  text-align: center;
}
.page-hero__media,
.page-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.page-hero__media { z-index: -3; }
.page-hero__media img {
  object-fit: cover;
  object-position: center;
}
/* Velo plano opcional, para fotos de baja resolución */
.page-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: rgb(0 0 0 / 0.2);
}
.page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 52% 40% at 50% 58%, rgb(var(--scrim) / 0.42) 0%, rgb(var(--scrim) / 0.26) 60%, rgb(var(--scrim) / 0) 100%),
    linear-gradient(to bottom,
      rgb(var(--scrim) / 0.62) 0%,
      rgb(var(--scrim) / 0.24) 30%,
      rgb(var(--scrim) / 0.12) 60%,
      rgb(var(--scrim) / 0.40) 100%);
}

/* Centinela al final de un banner (Home o página interna): el
   IntersectionObserver del header lo observa para pasar a fondo sólido */
.hero__sentinel {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* 10.4 · Pestañas ---------------------------------------------------------- */
.tabs { border-bottom: 1px solid var(--heat); }
.tabs__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);   /* columnas iguales, sea cual sea el número */
}
.tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-block: 16px;
  color: var(--heat);
}
.tab::after {                       /* barra sobre la línea base */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 0;
  background-color: var(--heat);
  transition: height var(--dur-ui) ease;
}
.tab[aria-selected="true"]::after { height: 3px; }
@media (hover: hover) {
  .tab[aria-selected="false"]:hover::after { height: 1px; }
}

.tabs__panel { opacity: 1; }
.js .tabs__panel { transition: opacity var(--dur-btn) ease; }
.js .tabs__panel.is-entering { opacity: 0; }

/* 10.5 · Tarjeta de clase (extiende .card con overlay de información) ------- */
.class-card {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  color: var(--cream);
  background-color: var(--heat);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.class-card__veil {                 /* --heat al 85 %: la foto se sigue intuyendo */
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: rgb(var(--heat-rgb) / 0.85);
  opacity: 0;
  transition: opacity var(--dur-overlay) ease;
}
.class-card__panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: clamp(20px, 1.67vw, 32px);
  text-align: center;
}
.class-card__info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.class-card__tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-tagline);
  line-height: 1.4;
}
.class-card__desc {
  margin-top: 16px;
  max-width: 36ch;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-desc);
  line-height: 1.5;
}
/* El nombre no se mueve: sigue centrado como en el estado base. Cubre toda la
   tarjeta, así que deja pasar los clics: si no, tapa el botón BOOK NOW
   (corrección del tema; en el estático el botón no se podía pulsar). */
.class-card .card__name { z-index: 2; pointer-events: none; }

/* Entrada escalonada del contenido del overlay */
.class-card__tagline,
.class-card__desc,
.class-card__panel .btn {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-overlay) ease,
    transform var(--dur-overlay) ease;
}
.class-card__tagline { transition-delay: 0ms; }
.class-card__desc { transition-delay: 60ms; }
.class-card__panel .btn {
  transition-delay: 120ms;
  pointer-events: none;             /* solo se puede reservar con la tarjeta abierta */
}

.class-card.is-open .class-card__veil { opacity: 1; }
.class-card.is-open .class-card__tagline,
.class-card.is-open .class-card__desc,
.class-card.is-open .class-card__panel .btn {
  opacity: 1;
  transform: none;
}
.class-card.is-open .class-card__panel .btn { pointer-events: auto; }

@media (hover: hover) {
  .class-card:hover .class-card__veil,
  .class-card:focus-within .class-card__veil { opacity: 1; }

  .class-card:hover .class-card__tagline,
  .class-card:hover .class-card__desc,
  .class-card:hover .class-card__panel .btn,
  .class-card:focus-within .class-card__tagline,
  .class-card:focus-within .class-card__desc,
  .class-card:focus-within .class-card__panel .btn {
    opacity: 1;
    transform: none;
  }
  .class-card:hover .class-card__panel .btn,
  .class-card:focus-within .class-card__panel .btn { pointer-events: auto; }

  .class-card:hover .card__media img,
  .class-card:focus-within .card__media img { transform: scale(1.04); }
}

/* 10.6 · Pilares sobre fotografía (The Method y futuras páginas) ----------- */
.pillars {
  position: relative;
  isolation: isolate;
  padding-block: clamp(96px, 14.3vw, 275px);   /* ~1200 px de alto a 1920, como el proof */
  overflow: hidden;
  text-align: center;
}
.pillars__media,
.pillars__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pillars__media { z-index: -3; }
.pillars__media img {
  object-fit: cover;
  object-position: center;
}
/* La foto es de baja resolución: velo plano + scrim de legibilidad */
.pillars__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: rgb(0 0 0 / 0.45);
}
.pillars__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 62% 58% at 50% 50%, rgb(var(--scrim) / 0.42) 0%, rgb(var(--scrim) / 0.30) 60%, rgb(var(--scrim) / 0.10) 100%),
    linear-gradient(to bottom, rgb(var(--scrim) / 0.24), rgb(var(--scrim) / 0) 28%, rgb(var(--scrim) / 0) 72%, rgb(var(--scrim) / 0.24));
}
.pillars__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: var(--space-head);
}
.pillar__name {
  font-family: var(--font-black);
  font-weight: 900;
  font-stretch: 125%;
  font-variation-settings: 'wdth' 125;
  font-size: var(--fs-pillar);
  line-height: 1.2;
  text-transform: uppercase;
}
.pillar__desc {
  max-width: 68ch;
  margin: 12px auto 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  text-wrap: pretty;
}
.pillars .btn { margin-top: var(--space-block); }

/* 10.7 · Cita -------------------------------------------------------------- */
.quote {
  padding-block: var(--space-section);
  text-align: center;
  color: var(--heat);
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-quote);
  line-height: 1.35;
  text-wrap: pretty;
}
.quote figcaption { margin-top: 40px; }
.quote__author {
  display: block;
  font-family: var(--font-black);
  font-weight: 900;
  font-stretch: 125%;
  font-variation-settings: 'wdth' 125;
  font-size: 18px;
  line-height: 1.2;
  text-transform: uppercase;
}
.quote__role {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
}

/* 10.8 · Acordeón ---------------------------------------------------------- */
/* Cada fila es un <details>: abre y cierra sin JavaScript. El JS solo anima
   la altura del contenido. */
.accordion__item {
  position: relative;
  border-bottom: 1px solid rgb(var(--heat-rgb) / 0.4);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.accordion__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding-block: 24px;
  list-style: none;
  cursor: pointer;
}
.accordion__item > summary::-webkit-details-marker { display: none; }
.accordion__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-label);   /* 24 px desktop y tablet · 18 px móvil */
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--heat);
}
/* Sin cambio visual en hover: la fila ya se lee como control (cursor + icono).
   El foco de teclado sí se marca con el contorno global. */
/* + que gira 45° y se convierte en × */
.accordion__icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--heat);
  transition: transform var(--dur-btn) ease;
}
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: currentColor;
  transform: translate(-50%, -50%);
}
.accordion__icon::before { width: 16px; height: 1.5px; }
.accordion__icon::after  { width: 1.5px; height: 16px; }
.accordion__item[open] .accordion__icon { transform: rotate(45deg); }
.accordion__content { overflow: hidden; }
.accordion__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 62ch;
  padding: 0 0 24px 40px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--heat);
  text-wrap: pretty;
}

/* 10.9 · Contenedor del widget de reservas --------------------------------- */
/* Neutro a propósito: no impone tipografía ni color al marcado que inyecte EVO */
.schedule-embed {
  width: 100%;
  min-height: 900px;
}
.schedule-embed iframe,
.schedule-embed__frame {
  display: block;
  width: 100%;
  min-height: 900px;
  border: 0;
}
.schedule-embed__placeholder {
  display: grid;
  place-items: center;
  min-height: 900px;
  padding: var(--pad);
  background-color: var(--ivory);
  color: var(--heat);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  text-align: center;
}

/* --------------------------------------------------------------------------
   11 · Página: Home
   -------------------------------------------------------------------------- */

/* 11.1 · Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--header-h) var(--pad) 0;
  height: 100vh;                     /* respaldo */
  height: 100svh;                    /* nunca 100vh en móvil */
  min-height: 640px;
  overflow: hidden;
  text-align: center;
}
.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__media { z-index: -2; }
.hero__media img {
  aspect-ratio: 16 / 9;              /* ratio del asset; la caja la fija 100svh */
  object-fit: cover;
  object-position: 50% 50%;
}
/* Scrim direccional: oscurece arriba (header), abajo y detrás del bloque de texto */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 48% 28% at 50% 50%, rgb(var(--scrim) / 0.52) 0%, rgb(var(--scrim) / 0.36) 55%, rgb(var(--scrim) / 0) 100%),
    linear-gradient(to bottom,
      rgb(var(--scrim) / 0.62) 0%,
      rgb(var(--scrim) / 0.22) 16%,
      rgb(var(--scrim) / 0) 32%,
      rgb(var(--scrim) / 0) 64%,
      rgb(var(--scrim) / 0.34) 86%,
      rgb(var(--scrim) / 0.56) 100%);
}
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__lede {
  margin-top: 24px;
  max-width: var(--measure);
  text-wrap: pretty;
}
.hero__content .btn { margin-top: var(--space-block); }


/* 11.2 · Story ------------------------------------------------------------- */
.story {
  background-color: var(--ivory);
  color: var(--heat);
  padding-block: var(--space-section);
  scroll-margin-top: var(--header-h);
}
.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--story-img-w);
  column-gap: var(--gutter);
  align-items: center;
}
.story__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: clamp(0px, 3.33vw, 64px);
}
.story__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-p);
  max-width: var(--measure);
  margin-top: clamp(32px, 2.5vw, 48px);
  text-wrap: pretty;
}
.story__text .btn { margin-top: var(--space-block); }
.story__media {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background-color: var(--heat);
}
.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 11.3 · Sesiones ---------------------------------------------------------- */
.sessions {
  background-color: var(--white);
  padding-block: var(--space-section);
}
.sessions__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  max-width: var(--sessions-max);
  margin: var(--space-head) auto 0;
}

/* 11.4 · KNND50 ------------------------------------------------------------ */
.knnd50 {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 90vh;
  min-height: 90svh;
  padding-block: var(--space-section);
  overflow: hidden;
  text-align: center;
}
.knnd50__media,
.knnd50__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.knnd50__media { z-index: -3; }
.knnd50__media img {
  object-fit: cover;
  object-position: center 35%;
}
/* Velo plano al 35 %: unifica la foto mientras llega el original en alta */
.knnd50__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: rgb(0 0 0 / 0.35);
}
/* Scrim de legibilidad concentrado donde va el texto */
.knnd50__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 58% 60% at 50% 50%, rgb(var(--scrim) / 0.58) 0%, rgb(var(--scrim) / 0.46) 55%, rgb(var(--scrim) / 0.16) 100%),
    linear-gradient(to bottom, rgb(var(--scrim) / 0.2), rgb(var(--scrim) / 0) 30%, rgb(var(--scrim) / 0) 70%, rgb(var(--scrim) / 0.2));
}
.knnd50-mark {
  width: 300px;
  height: auto;
  aspect-ratio: 472.3 / 58.8;
  margin-inline: auto;
}
.knnd50__list {
  margin-top: clamp(32px, 2.5vw, 48px);
}
.knnd50__list li { text-wrap: balance; }
.knnd50__list li + li::before {
  content: "•";
  content: "•" / "";                 /* separador: el lector de pantalla lo omite */
  display: block;
  margin-block: var(--space-list);
}
.knnd50__content .btn { margin-top: var(--space-block); }

/* 11.5 · Instagram --------------------------------------------------------- */
.instagram {
  background-color: var(--white);
  padding-block: var(--space-section);
}
.instagram__title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 0.6em;
}
.instagram__title a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.instagram__frame {
  max-width: var(--ig-max);
  margin: var(--space-head) auto 0;
  container-type: inline-size;
}
/* Reserva exacta de altura del grid: al inyectar Smash Balloon no hay salto */
#instagram-feed {
  min-height: calc((100cqw - 3 * var(--gutter)) / 4 * 5 / 4);
}
.instagram__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}
.instagram__tile {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--ivory);
}
.instagram__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   12 · Página: The Classes
   -------------------------------------------------------------------------- */
.classes {
  background-color: var(--white);
  padding-block: var(--space-section);
}
.classes-intro {
  text-align: center;
  color: var(--heat);
}
.classes-intro__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-p);
  max-width: 78ch;            /* deja mandar a los saltos de línea del proof */
  margin-inline: auto;
  text-wrap: pretty;
}
.classes .tabs { margin-top: var(--space-head); }
/* Rejilla de clases: funciona con cualquier número de tarjetas; con cuatro,
   la última queda sola a la izquierda en la segunda fila. */
.classes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  max-width: var(--sessions-max);
  margin: var(--space-head) auto 0;
}
/* Menos de tres tarjetas: conservan el ancho de columna y se centran, para que
   el panel no parezca incompleto. Las pistas vacías de auto-fit se colapsan. */
.classes-grid:not(:has(> :nth-child(3))) {
  grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 2 * var(--gutter)) / 3)));
  justify-content: center;
}
@media (max-width: 1023px) {
  .classes-grid:not(:has(> :nth-child(3))) {
    grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - var(--gutter)) / 2)));
  }
}
@media (max-width: 767px) {
  .classes-grid:not(:has(> :nth-child(3))) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   12.1 · Página: The Method
   -------------------------------------------------------------------------- */
.method-intro {
  background-color: var(--white);
  padding-block: var(--space-section);
  text-align: center;
  color: var(--heat);
}
.method-intro .knnd50-mark { color: var(--heat); }
.method-intro__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-p);
  max-width: 78ch;
  margin: 48px auto 0;
  text-wrap: pretty;
}
.method-quote { background-color: var(--white); }

/* --------------------------------------------------------------------------
   12.2 · Página: The Rules
   -------------------------------------------------------------------------- */
.rules {
  background-color: var(--white);
  /* el aire de abajo lo pone el padding del cierre */
  padding-block: var(--space-section) 0;
}
.rules-outro {
  background-color: var(--white);
  padding-block: clamp(96px, 10vw, 192px);
  text-align: center;
  color: var(--heat);
}
.rules-outro p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-label);   /* 24 px desktop y tablet · 18 px móvil */
  line-height: 1.4;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   12.3 · Página: The Schedule
   -------------------------------------------------------------------------- */
.schedule {
  background-color: var(--white);
  padding-block: var(--space-section);
}

/* --------------------------------------------------------------------------
   13 · Responsive
   -------------------------------------------------------------------------- */
/* Entre 1024 y 1199 el nombre de clase baja a 36 px */
@media (max-width: 1199px) {
  :root { --fs-class: 36px; }
}

/* Tablet y móvil (≤1023) */
@media (max-width: 1023px) {
  :root {
    --fs-class: 32px;
    --track-class: 0.4em;
    --logo-w: 110px;
    --fs-tagline: 14px;
    --fs-desc: 14px;
  }
  .story__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 64px;
  }
  .story__media {
    width: 100%;
    max-width: 560px;
    justify-self: center;
  }
  .sessions__grid { grid-template-columns: minmax(0, 1fr); }
  .instagram__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #instagram-feed {
    min-height: calc((100cqw - var(--gutter)) / 2 * 5 / 4 * 2 + var(--gutter));
  }
  .classes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Móvil (≤767) */
@media (max-width: 767px) {
  :root {
    --fs-phrase: 15px;
    --fs-label: 18px;   /* "VER PROGRAMACIÓN COMPLETA" en una sola línea */
  }
  .knnd50-mark { width: 200px; }
  .hero__media img { object-position: center 40%; }
  /* En vertical el bloque de texto ocupa más foto: el scrim central sube */
  .hero__scrim {
    background:
      radial-gradient(ellipse 62% 32% at 50% 50%, rgb(var(--scrim) / 0.66) 0%, rgb(var(--scrim) / 0.46) 55%, rgb(var(--scrim) / 0) 100%),
      linear-gradient(to bottom,
        rgb(var(--scrim) / 0.62) 0%,
        rgb(var(--scrim) / 0.22) 16%,
        rgb(var(--scrim) / 0) 32%,
        rgb(var(--scrim) / 0) 64%,
        rgb(var(--scrim) / 0.34) 86%,
        rgb(var(--scrim) / 0.56) 100%);
  }
  /* Encuadre por página en vertical */
  .page-hero--classes .page-hero__media img { object-position: 58% center; }
  .page-hero--rules .page-hero__media img { object-position: 50% 30%; }

  .classes-grid { grid-template-columns: minmax(0, 1fr); }
  :root {
    --fs-pillar: 16px;
    --fs-quote: 20px;
  }
  .accordion__body { padding-left: 0; }
  .pillars__media img { object-position: 45% center; }
}

/* --------------------------------------------------------------------------
   14 · Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important;
    transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  /* sin animación de entrada: el contenido nace en su estado final */
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   15 · WordPress
   Piezas que solo existen en el tema: páginas de texto (page.php), 404,
   enlace a la política de datos y barra de administración. Todo sale del
   sistema existente: mismas variables, tipografías y botones.
   -------------------------------------------------------------------------- */

/* 15.0 · Footer siempre al fondo ------------------------------------------- */
/* En páginas cortas el contenido se estira y el footer queda pegado al borde
   inferior de la ventana. Header y "saltar al contenido" están fuera del flujo,
   así que la columna solo la forman <main> y el footer. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}
body > #main { flex: 1 0 auto; }
body > .site-footer { flex-shrink: 0; }

/* 15.1 · Páginas de texto y 404 ------------------------------------------- */
/* Sin banner: el header llega fijo y sólido, el contenido arranca debajo */
.page-plain { padding-top: var(--header-h); }
.page-text {
  padding-block: var(--space-section);
  color: var(--heat);
}
.page-text__title {
  text-align: center;
  overflow-wrap: anywhere;
}
.page-text__body {
  max-width: 62ch;
  margin: var(--space-head) auto 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  text-wrap: pretty;
}
.page-text__body > * + * { margin-top: 16px; }
.page-text__body :is(h2, h3, h4, h5, h6) {
  margin-top: var(--space-block);
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
}
.page-text__body h2 { font-size: var(--fs-label); }
.page-text__body :is(h3, h4, h5, h6) { font-size: var(--fs-phrase); }
.page-text__body :is(h2, h3, h4, h5, h6) + * { margin-top: 16px; }
.page-text__body :is(ul, ol) { padding-left: 1.25em; }
.page-text__body li + li { margin-top: 8px; }
.page-text__body a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness var(--dur-ui) ease;
}
.page-text__body a:hover { text-decoration-thickness: 2px; }
.page-text__body :is(strong, b) { font-weight: 700; }
.page-text__body blockquote {
  margin-inline: 0;
  padding-left: 24px;
  border-left: 1px solid var(--heat);
}
.page-text__body hr {
  border: 0;
  border-top: 1px solid rgb(var(--heat-rgb) / 0.4);
  margin-block: var(--space-block);
}
.page-text__body :is(img, figure, iframe, video) { max-width: 100%; }
.page-text__body figure { margin-inline: 0; }
.page-text__body figcaption {
  margin-top: 8px;
  font-size: var(--fs-footer);
}
.page-text__body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-footer);
}
.page-text__body :is(th, td) {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid rgb(var(--heat-rgb) / 0.4);
  text-align: left;
  vertical-align: top;
}

.page-text--center .page-text__body { text-align: center; }
.page-text__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: var(--space-block);
}
/* Móvil: los botones se apilan con el mismo ancho (el del más largo) */
@media (max-width: 767px) {
  .page-text__actions {
    display: grid;
    grid-template-columns: max-content;
    justify-content: center;
  }
}

/* 15.2 · Selector de idioma reservado --------------------------------------- */
/* Con un solo idioma el selector no se muestra, pero ocupa su lugar para que
   el menú quede centrado exactamente como en el diseño. Invisible, sin foco y
   fuera del árbol de accesibilidad. */
.lang--reserved { visibility: hidden; }
.lang--reserved > span:not(.lang__sep) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 15.3 · Fondo de respaldo de las secciones con foto: si falta la imagen o
   mientras carga, el texto crema nunca queda sobre blanco. */
.hero, .page-hero, .knnd50, .pillars { background-color: var(--heat); }

/* 15.4 · Footer: enlace a la política de datos ------------------------------ */
.site-footer__legal {
  margin-top: 24px;
  opacity: 0.7;
}
.site-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-ui) ease;
}
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible { text-decoration-color: currentColor; }

/* 15.5 · Feed de Instagram (Smash Balloon) --------------------------------- */
/* El marcado del plugin se ajusta a la rejilla del diseño: 4 columnas con
   gutter de 21 px y recorte 4:5 (2 × 2 en tablet y móvil), sin cabecera,
   botones, iconos ni textos del plugin. Los !important ganan a los estilos
   en línea que el plugin imprime según su configuración. */
#instagram-feed #sb_instagram {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  background: none !important;
}
#instagram-feed #sb_instagram #sbi_images {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--gutter) !important;
  width: 100% !important;
  padding: 0 !important;
}
#instagram-feed #sb_instagram #sbi_images .sbi_item {
  position: relative;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--ivory);
  opacity: 1 !important;
}
#instagram-feed #sb_instagram #sbi_images .sbi_item:nth-child(n + 5) { display: none !important; }
#instagram-feed #sb_instagram .sbi_photo_wrap,
#instagram-feed #sb_instagram .sbi_photo {
  position: absolute !important;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  background-image: none !important;
}
#instagram-feed #sb_instagram .sbi_photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: 1 !important;
  scale: 1 !important;
  transform: none !important;
}
#instagram-feed :is(.sb_instagram_header, #sbi_load, .sbi_follow_btn, .sbi_load_btn, .sbi_link, .sbi_playbtn, .sbi_carousel, .svg-inline--fa, .sbi_lightbox_link, .sbi_info, #sbi_mod_error) { display: none !important; }
@media (max-width: 1023px) {
  #instagram-feed #sb_instagram #sbi_images { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* 15.6 · Barra de administración (solo con sesión iniciada) ----------------- */
@media (min-width: 601px) {
  .admin-bar .site-header.is-fixed { top: 46px; }
}
@media (min-width: 783px) {
  .admin-bar .site-header.is-fixed { top: 32px; }
}