@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════
   MICHELLE RUIZ · SISTEMA VISUAL
   ───────────────────────────────────────────────────────────────────
   Se carga DESPUÉS de _astro/style.*.css y trabaja sobre él.

   Por qué así y no reescribiendo el otro archivo: el CSS de Astro tiene
   1019 reglas con selectores propios (`data-astro-cid-…`). Está bien
   construido y todo cuelga de variables. Cambiando las variables desde
   aquí se re-viste el sitio entero de una vez, sin tocar ni romper una
   sola de esas reglas. Lo que sigue después son correcciones de
   composición y la capa editorial, que sí son nuevas.

   Orden del archivo
     1 · Tipografías
     2 · Paleta y variables
     3 · Ritmo y retícula
     4 · Jerarquía tipográfica
     5 · Capa editorial (papel, collage, marcas)
     6 · Componentes
     7 · Responsive
     8 · Accesibilidad y movimiento
   ═══════════════════════════════════════════════════════════════════ */


/* ═══ 1 · TIPOGRAFÍAS ══════════════════════════════════════════════
   Tres familias visibles, ni una más:

     Libre Baskerville   editorial — titulares, cuerpo, citas
     Aloevera Display    funcional — navegación, botones, fechas
     Caveat              manuscrita — firmas y notas, muy de vez en cuando

   Prata, Playfair, DM Serif y Architects Daughter siguen en la carpeta
   pero ya no se usan: sus variables apuntan ahora a Baskerville. */

@font-face{
  font-family:"Libre Baskerville";
  src:url("../fonts/LibreBaskerville-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Aloevera Display";
  src:url("../fonts/AloeveraDisplay-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}


/* ═══ 2 · PALETA Y VARIABLES ═══════════════════════════════════════

   Chilli   #AA0003  botones, CTAs, títulos de impacto
   Rosa     #FFA1C2  fondos destacados, subrayados, tarjetas
   Ballet   #FFD6DE  fondos suaves, formularios, lectura
   Lemon    #FFF3B2  acentos puntuales, etiquetas, lanzamientos
   Marfil   #FFFCF7  el fondo dominante
   Tinta    #1A1210  negro cálido para leer

   Una advertencia que vale la pena dejar escrita: el chilli sobre el
   rosa da 4.11:1. Pasa AA solo en texto grande. Por eso sobre rosa el
   texto pequeño va en tinta, y el chilli se reserva para titulares. */

:root{
  /* — la paleta, con su nombre — */
  --chilli:#AA0003;
  --chilli-hondo:#8A0002;      /* hover y presionado */
  --rosa:#FFA1C2;
  --rosa-humo:#FFB9D2;
  --ballet:#FFD6DE;
  --ballet-claro:#FFE9EE;
  --lemon:#FFF3B2;
  --lemon-borde:#E8D68A;       /* el mismo amarillo, un tono más hondo */
  --marfil:#FFFCF7;
  --crema:#FDF6EE;
  --tinta:#1A1210;
  --cafe:#2B1A16;
  --humo:#6E5A54;
  --niebla:#A2908A;

  /* — el sistema anterior, redirigido — */
  --ivory:var(--marfil);
  --paper:var(--crema);
  --linen:var(--ballet-claro);
  --petal:var(--ballet);
  --blush:var(--rosa);
  --rose:var(--rosa);
  --rose-ink:var(--chilli);
  --ink:var(--tinta);
  --deep:var(--cafe);
  --night:#150E0C;
  --warm-gray:var(--humo);
  --silver:var(--niebla);
  --gilt:var(--chilli);
  --hairline:rgba(26,18,16,.16);
  --hairline-soft:rgba(26,18,16,.08);

  --bg:var(--marfil);
  --fg:var(--tinta);
  --muted:var(--humo);
  --rule:var(--hairline);
  --accent:var(--chilli);

  /* — tipografías — */
  --font-display:"Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-quote:"Libre Baskerville", Georgia, serif;
  --font-read:"Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-ui:"Aloevera Display", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-geometric:"Aloevera Display", ui-sans-serif, system-ui, sans-serif;
  --font-hand:"Caveat", "Segoe Script", cursive;

  /* — escala tipográfica —
     Baskerville tiene una x-height grande: pide un cuerpo algo menor
     que una sans al mismo tamaño nominal. La escala baja un punto en
     el cuerpo y sube en los titulares, que es donde debe notarse. */
  --step--2:clamp(.70rem, .68rem + .10vw, .76rem);
  --step--1:clamp(.79rem, .76rem + .16vw, .89rem);
  --step-0 :clamp(.97rem, .94rem + .18vw, 1.08rem);
  --step-1 :clamp(1.12rem, 1.06rem + .30vw, 1.32rem);
  --step-2 :clamp(1.32rem, 1.20rem + .58vw, 1.70rem);
  --step-3 :clamp(1.58rem, 1.36rem + 1.05vw, 2.20rem);
  --step-4 :clamp(1.90rem, 1.55rem + 1.68vw, 2.90rem);
  --step-5 :clamp(2.24rem, 1.72rem + 2.50vw, 3.70rem);
  --step-6 :clamp(2.62rem, 1.84rem + 3.75vw, 4.80rem);
  --step-7 :clamp(3.00rem, 1.86rem + 5.50vw, 6.20rem);

  /* — aire —
     El valor viejo llegaba a 11rem: 176 px de relleno por sección, y
     por eso Podcast y Conferencias se sentían vacías. Aquí el aire
     sigue siendo generoso pero deja de ser un hueco. */
  --space-3xs:.25rem;
  --space-2xs:.5rem;
  --space-xs:.75rem;
  --space-s:1rem;
  --space-m:1.5rem;
  --space-l:2.25rem;
  --space-xl:3rem;
  --space-2xl:4rem;
  --space-3xl:5.5rem;
  --space-4xl:clamp(3.5rem, 6.5vw, 7.5rem);

  /* — retícula —
     1440 px daba líneas larguísimas y la sensación de contenido
     recargado hacia un lado. 1180 es un pliego de revista. */
  --page:1180px;
  --page-ancha:1440px;
  --measure:60ch;
  --measure-narrow:44ch;
  --gutter:clamp(1.25rem, 5vw, 3.5rem);

  --radius-none:0;
  --radius-s:2px;
  --radius:3px;
  --header-h:66px;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}

/* Fondos de sección. El marfil manda; el resto son excepciones. */ :root .is-paper{ --bg:var(--crema);  background:var(--bg) } :root .is-petal{ --bg:var(--ballet); background:var(--bg) } :root .is-linen{ --bg:var(--ballet-claro); background:var(--bg) }  :root .is-dark{
  --bg:var(--night);
  --fg:#FBF3EF;
  --muted:#C3ADA6;
  --rule:rgba(255,255,255,.18);
  --accent:var(--rosa);
  color:var(--fg); background:var(--bg);
}

/* Image Method conserva su identidad propia —negro, blanco y olivo—
   porque es una marca aparte. Solo se le ajusta la tipografía. */ :root .is-im{
  --bg:var(--im-black);
  --fg:var(--im-white);
  --muted:var(--im-silver);
  --rule:rgba(255,255,255,.22);
  --accent:var(--im-moss);
  color:var(--fg); background:var(--bg);
}

/* Rosa fuerte. El texto pequeño va en tinta: sobre rosa, el chilli
   solo aguanta en tamaño grande. */ :root .es-rosa{
  --bg:var(--rosa); --fg:var(--tinta);
  --muted:#5A3B44; --rule:rgba(26,18,16,.22); --accent:var(--chilli);
  color:var(--fg); background:var(--bg);
} :root .es-lemon{
  --bg:var(--lemon); --fg:var(--tinta);
  --muted:#6B5A2A; --rule:rgba(26,18,16,.20); --accent:var(--chilli);
  color:var(--fg); background:var(--bg);
}


/* ═══ 3 · RITMO Y RETÍCULA ═════════════════════════════════════════ */

html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }  :root body{
  background:var(--marfil);
  color:var(--tinta);
  font-family:var(--font-read);
  font-size:var(--step-0);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

:root .shell{ width:min(100% - var(--gutter) * 2, var(--page)); margin-inline:auto } :root .shell-wide{ width:min(100% - var(--gutter) * 2, var(--page-ancha)); margin-inline:auto }

/* Un pliego estrecho, para texto que se lee de corrido. */ :root .pliego{ width:min(100% - var(--gutter) * 2, 760px); margin-inline:auto }  :root .section{ padding-block:var(--space-4xl) } :root .section--tight{ padding-block:clamp(2.5rem, 4.5vw, 4rem) }

/* Dos secciones seguidas del mismo color no necesitan doble relleno:
   ahí es donde nacían los huecos enormes. */ :root .section + .section:not(.is-dark):not(.is-paper):not(.is-petal):not(.is-im){
  padding-top:clamp(2rem, 3.5vw, 3.25rem);
}  :root .prose{ max-width:var(--measure) } :root .narrow{ max-width:var(--measure-narrow) } :root .lede{ max-width:46ch }


/* ═══ 4 · JERARQUÍA TIPOGRÁFICA ════════════════════════════════════

   Titulares    Baskerville 700, apretados y con salto intencional
   Destacados   Baskerville cursiva
   Cuerpo       Baskerville 400
   Interfaz     Aloevera, versalitas discretas y bien espaciadas
   Firma        Caveat, solo eso                                      */  :root h1, :root h2, :root h3, :root .hero__title, :root .hero__line, :root [class*="__title"], :root [class*="__h"]{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.018em;
  text-wrap:balance;                 /* evita el título roto por accidente */
  hyphens:none;
}  :root h1, :root .hero__title{ line-height:1.02; letter-spacing:-.028em } :root h2{ line-height:1.08; letter-spacing:-.022em } :root h3{ line-height:1.16; letter-spacing:-.012em; font-size:var(--step-1) }

/* Ningún titular debe cruzar la página de lado a lado. */ :root h1{ max-width:17ch } :root h2{ max-width:20ch }
:root .hero__title{ max-width:14ch }  :root p, :root li, :root dd, :root blockquote{ text-wrap:pretty } :root p{ max-width:var(--measure) }

/* Cursiva expresiva: frases destacadas, citas y remates. */ :root em, :root i, :root .cursiva, :root .lede em, :root blockquote{
  font-family:var(--font-quote);
  font-style:italic;
} :root blockquote{
  font-size:var(--step-2);
  line-height:1.42;
  letter-spacing:-.012em;
  max-width:28ch;
}

/* Interfaz: Aloevera. Mayúsculas discretas y con aire entre letras. */ :root .kicker, :root .eyebrow, :root .btn, :root .hd__link, :root .hd__name, :root .tag, :root .chip, :root .label, :root .badge, :root .pill, :root .meta, :root time, :root .date, :root .fecha, :root .nav__link, :root nav a, :root button:not(.hd__brand), :root .sf__tab, :root .cta, :root [class*="__kicker"], :root [class*="__eyebrow"], :root [class*="__label"], :root [class*="__meta"], :root [class*="__tag"], :root [class*="__cat"]{
  font-family:var(--font-ui);
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-size:var(--step--1);
  line-height:1.35;
}

/* Las etiquetas de sección respiran y se separan del titular. */ :root .kicker, :root .eyebrow, :root [class*="__kicker"], :root [class*="__eyebrow"]{
  display:block;
  color:var(--chilli);
  letter-spacing:.2em;
  font-size:var(--step--2);
  margin-bottom:var(--space-s);
}
:root .is-dark .kicker, :root .is-dark .eyebrow, :root .is-dark [class*="__kicker"], :root .is-dark [class*="__eyebrow"]{ color:var(--rosa) }
:root .is-im .kicker, :root .is-im .eyebrow, :root .is-im [class*="__kicker"], :root .is-im [class*="__eyebrow"]{ color:var(--im-moss) }

/* Manuscrita: firmas y notas cortas. Nunca párrafos. */ :root .firma, :root .nota-mano, :root .hand, :root [class*="__firma"]{
  font-family:var(--font-hand);
  font-size:var(--step-2);
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  line-height:1.2;
  color:var(--chilli);
}


/* ═══ 5 · CAPA EDITORIAL ═══════════════════════════════════════════
   El lenguaje de revista: papel, collage y marcas hechas a mano.
   Todo en CSS, sin una sola imagen extra que descargar.            */

/* Grano de papel impreso. Se posa sobre cualquier fondo. */ :root .grano{ position:relative; isolation:isolate } :root .grano::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.32'/%3E%3C/svg%3E");
} :root .is-dark .grano::after{ mix-blend-mode:screen; opacity:.22 }

/* El acanalado del papel de color. */ :root .tela{
  background-image:repeating-linear-gradient(
    100deg, rgba(26,18,16,.030) 0 1px, transparent 1px 7px);
}

/* Bordes de papel rasgado. Los puntos son irregulares a propósito:
   una línea recta no parece rota. */ :root .rasgado-arriba{
  clip-path:polygon(0 12px, 4% 4px, 9% 14px, 15% 3px, 22% 12px, 29% 5px,
    36% 15px, 43% 4px, 51% 13px, 58% 3px, 65% 12px, 72% 6px, 79% 14px,
    86% 4px, 93% 12px, 100% 5px, 100% 100%, 0 100%);
} :root .rasgado-abajo{
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 6px), 93% calc(100% - 13px),
    86% calc(100% - 4px), 79% calc(100% - 14px), 72% calc(100% - 5px),
    65% calc(100% - 13px), 58% calc(100% - 3px), 51% calc(100% - 12px),
    43% calc(100% - 5px), 36% calc(100% - 14px), 29% calc(100% - 4px),
    22% calc(100% - 13px), 15% calc(100% - 3px), 9% calc(100% - 12px),
    4% calc(100% - 5px), 0 calc(100% - 13px));
} :root .rasgado{ /* los dos bordes */
  clip-path:polygon(0 11px, 6% 3px, 13% 13px, 21% 4px, 29% 12px, 38% 3px,
    47% 13px, 56% 4px, 64% 12px, 73% 3px, 81% 13px, 89% 4px, 96% 12px, 100% 5px,
    100% calc(100% - 5px), 96% calc(100% - 12px), 89% calc(100% - 4px),
    81% calc(100% - 13px), 73% calc(100% - 3px), 64% calc(100% - 12px),
    56% calc(100% - 4px), 47% calc(100% - 13px), 38% calc(100% - 3px),
    29% calc(100% - 12px), 21% calc(100% - 4px), 13% calc(100% - 13px),
    6% calc(100% - 3px), 0 calc(100% - 11px));
}

/* Fotografías con vida: ligeramente giradas, como pegadas a mano.
   Solo en pantallas anchas; en móvil estorban. */
@media (min-width:900px){   :root .girada{ rotate:-1.6deg }   :root .girada-der{ rotate:1.4deg }   :root .girada-mas{ rotate:-2.8deg }   :root .girada, :root .girada-der, :root .girada-mas{
    transition:rotate .6s var(--ease-out);
  }   :root .girada:hover, :root .girada-der:hover, :root .girada-mas:hover{ rotate:0deg }
}

/* Cinta de papel que sujeta una pieza. */ :root .cinta{ position:relative } :root .cinta::before{
  content:""; position:absolute; z-index:3;
  inline-size:132px; block-size:34px;
  inset-block-start:-17px; inset-inline-start:50%;
  translate:-50% 0; rotate:-3.5deg;
  background:rgba(255,241,178,.82);
  box-shadow:0 1px 5px rgba(26,18,16,.14);
} :root .cinta--esquina::before{ inset-inline-start:12%; rotate:-19deg }

/* Marcas editoriales. Se dibujan al entrar en pantalla. */ :root .subrayado{
  background-image:linear-gradient(transparent 62%, var(--rosa) 62%);
  background-repeat:no-repeat;
  background-size:0% 100%;
  padding-inline:.06em;
  transition:background-size .8s var(--ease-out) .1s;
} :root .subrayado.a-la-vista{ background-size:100% 100% }  :root .subrayado-fino{
  text-decoration:none;
  background-image:linear-gradient(var(--chilli), var(--chilli));
  background-repeat:no-repeat;
  background-position:0 92%;
  background-size:100% 1.5px;
  transition:background-size .3s var(--ease-out);
} :root .subrayado-fino:hover{ background-size:100% 3px }  :root .circulado{ position:relative; display:inline-block } :root .circulado::after{
  content:""; position:absolute; inset:-.30em -.52em -.26em -.52em;
  border:2.5px solid var(--chilli);
  border-radius:52% 48% 49% 51% / 60% 40% 60% 40%;
  rotate:-2deg;
  opacity:0; scale:.86;
  transition:opacity .55s var(--ease-out), scale .55s var(--ease-out);
  pointer-events:none;
} :root .circulado.a-la-vista::after{ opacity:1; scale:1 }  :root .tachado{ position:relative; color:var(--humo) } :root .tachado::after{
  content:""; position:absolute; inset-block-start:52%; inset-inline:-.14em;
  block-size:2px; background:var(--chilli); rotate:-1.4deg;
  scale:0 1; transform-origin:left;
  transition:scale .5s var(--ease-out);
} :root .tachado.a-la-vista::after{ scale:1 1 }

/* Anotación al margen, como en un cuaderno. */ :root .nota-margen{
  font-family:var(--font-hand);
  font-size:var(--step-1);
  line-height:1.28;
  color:var(--chilli);
  text-transform:none;
  letter-spacing:0;
  rotate:-1.6deg;
  max-width:22ch;
} :root .is-dark .nota-margen{ color:var(--rosa) }

/* Palabra enorme al fondo. Decorativa: no se lee, se siente. */ :root .fragmento{
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(7rem, 22vw, 20rem); line-height:.78;
  color:var(--chilli); opacity:.055; letter-spacing:-.05em;
}

/* Sello: el isotipo o una marca de agua. */ :root .sello{ position:absolute; z-index:0; opacity:.09; pointer-events:none }

/* Número de pliego, como en una revista. */ :root .folio{
  font-family:var(--font-ui);
  font-size:var(--step--2);
  letter-spacing:.28em;
  color:var(--chilli);
  text-transform:uppercase;
} :root .is-dark .folio{ color:var(--rosa) }

/* Filete que abre sección. */ :root .filete{
  border:0; block-size:1px; background:var(--rule);
  margin-block:var(--space-xl);
} :root .filete--corto{ inline-size:74px; block-size:2.5px; background:var(--chilli); border:0 }


/* ═══ 6 · COMPONENTES ══════════════════════════════════════════════ */

/* — Cabecera ————————————————————————————————— */ :root .site-header{
  background:color-mix(in srgb, var(--marfil) 88%, transparent);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--hairline-soft);
}
:root .hd__name{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:none;
  letter-spacing:-.02em;
  font-size:var(--step-1);
}
:root .hd__link{
  font-size:var(--step--2);
  letter-spacing:.16em;
  color:var(--tinta);
  opacity:.72;
  transition:opacity .2s var(--ease-out), color .2s var(--ease-out);
}
:root .hd__link:hover, :root .hd__link:focus-visible{ opacity:1; color:var(--chilli) }
:root .hd__link[aria-current="page"]{
  opacity:1; color:var(--chilli);
  background-image:linear-gradient(var(--chilli), var(--chilli));
  background-repeat:no-repeat; background-position:0 100%; background-size:100% 2px;
}

/* — Botones ————————————————————————————————— */ :root .btn{
  font-family:var(--font-ui);
  font-weight:500;
  font-size:var(--step--1);
  letter-spacing:.12em;
  border-radius:var(--radius);
  padding:.92em 1.75em;
  min-height:48px;
}
:root .btn:not(.btn--ghost):not(.btn--light):not(.btn--im){
  --btn-bg:var(--chilli);
  --btn-fg:var(--marfil);
  border-color:var(--chilli);
}
:root .btn:not(.btn--ghost):not(.btn--light):not(.btn--im):hover{
  --btn-bg:var(--chilli-hondo);
  border-color:var(--chilli-hondo);
  translate:0 -2px;
} :root .btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--fg);
  border-color:color-mix(in srgb, currentColor 34%, transparent);
} :root .btn--ghost:hover{ --btn-fg:var(--chilli); border-color:var(--chilli) } :root .is-dark .btn--ghost:hover{ --btn-fg:var(--rosa); border-color:var(--rosa) } :root .btn--light{ --btn-bg:var(--marfil); --btn-fg:var(--chilli); border-color:var(--marfil) } :root .btn--light:hover{ --btn-bg:var(--lemon); border-color:var(--lemon) }
:root .btn:focus-visible{ outline:3px solid var(--chilli); outline-offset:3px }
:root .is-dark .btn:focus-visible{ outline-color:var(--rosa) }

/* — Tarjetas ————————————————————————————————— */ :root .card, :root [class*="__card"]{
  background:var(--marfil);
  border:1px solid var(--hairline-soft);
  border-radius:var(--radius);
  overflow:clip;
  transition:translate .35s var(--ease-out), box-shadow .35s var(--ease-out),
             border-color .35s var(--ease-out);
}
:root .card:hover, :root [class*="__card"]:hover{
  translate:0 -3px;
  border-color:var(--rosa);
  box-shadow:0 14px 40px -22px rgba(26,18,16,.45);
}
:root .is-dark .card, :root .is-dark [class*="__card"]{
  background:rgba(255,255,255,.045);
  border-color:rgba(255,255,255,.14);
}

/* — Formularios ————————————————————————————— */ :root input, :root textarea, :root select{
  font-family:var(--font-read);
  font-size:16px;                     /* iOS no hace zoom a partir de 16 */
  background:var(--marfil);
  color:var(--tinta);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:.85em 1em;
  min-height:50px;
  inline-size:100%;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
} :root textarea{ min-height:130px; line-height:1.6 } :root input:focus-visible, :root textarea:focus-visible, :root select:focus-visible{
  outline:none;
  border-color:var(--chilli);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--rosa) 55%, transparent);
} :root label{
  font-family:var(--font-ui);
  font-size:var(--step--2);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--humo);
} :root .is-dark input, :root .is-dark textarea, :root .is-dark select{
  background:rgba(255,255,255,.06);
  color:#FBF3EF;
  border-color:rgba(255,255,255,.22);
} :root .is-dark label{ color:#C3ADA6 }  :root ::placeholder{ color:var(--niebla); opacity:1 }

/* — Enlaces de texto ——————————————————————————— */ :root .prose a, :root p a:not(.btn):not([class*="__card"]){
  color:inherit;
  text-decoration:none;
  background-image:linear-gradient(var(--chilli), var(--chilli));
  background-repeat:no-repeat;
  background-position:0 92%;
  background-size:100% 1.4px;
  transition:background-size .25s var(--ease-out), color .25s var(--ease-out);
} :root .prose a:hover, :root p a:not(.btn):not([class*="__card"]):hover{
  color:var(--chilli); background-size:100% 3px;
} :root .is-dark .prose a, :root .is-dark p a:not(.btn){
  background-image:linear-gradient(var(--rosa), var(--rosa));
} :root .is-dark .prose a:hover{ color:var(--rosa) }

/* — Estado pendiente ——————————————————————————
   Lo que sigue en demo o por confirmar tiene que verse de lejos. */ :root .pendiente, :root .por-confirmar, :root [data-pendiente]{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-ui);
  font-size:var(--step--2);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#6B5A2A;
  background:var(--lemon);
  border:1px solid var(--lemon-borde);
  border-radius:2px;
  padding:.34em .7em;
  line-height:1.3;
} :root .pendiente::before, :root .por-confirmar::before, :root [data-pendiente]::before{
  content:""; inline-size:6px; block-size:6px; border-radius:50%;
  background:var(--chilli); flex:none;
}

/* — Hueco de contenido por llegar ————————————————
   Un espacio que se ve deliberado, no un error de maquetación. */ :root .hueco{
  display:grid; place-items:center; gap:var(--space-xs);
  min-block-size:clamp(180px, 26vw, 320px);
  background:
    repeating-linear-gradient(-45deg,
      color-mix(in srgb, var(--rosa) 26%, transparent) 0 9px,
      transparent 9px 18px),
    var(--ballet-claro);
  border:1.5px dashed var(--rosa);
  border-radius:var(--radius);
  text-align:center;
  padding:var(--space-l);
  color:#5A3B44;
} :root .hueco__que{
  font-family:var(--font-ui); font-size:var(--step--1);
  letter-spacing:.16em; text-transform:uppercase;
} :root .hueco__nota{
  font-family:var(--font-read); font-size:var(--step--1);
  letter-spacing:0; text-transform:none; color:#6E4A52; max-width:34ch;
}

/* — Piezas de medios ——————————————————————————
   Ningún iframe suelto ni miniatura borrosa: todo va dentro de una
   tarjeta con proporción fija, portada nítida y carga diferida.    */ :root .pieza{
  position:relative; display:block;
  background:var(--cafe);
  border-radius:var(--radius);
  overflow:clip;
  aspect-ratio:16 / 9;
  isolation:isolate;
} :root .pieza--retrato{ aspect-ratio:4 / 5 } :root .pieza--vertical{ aspect-ratio:9 / 16 } :root .pieza--cuadro{ aspect-ratio:1 } :root .pieza img, :root .pieza video, :root .pieza iframe{
  inline-size:100%; block-size:100%;
  object-fit:cover; display:block; border:0;
} :root .pieza__velo{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,
    rgba(21,14,12,.72) 0%, rgba(21,14,12,.18) 42%, transparent 72%);
} :root .pieza__pie{
  position:absolute; inset-inline:0; inset-block-end:0; z-index:2;
  padding:clamp(.9rem, 2vw, 1.4rem);
  color:#FFF;
} :root .pieza__tit{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--step-1); line-height:1.14; letter-spacing:-.015em;
  max-width:22ch;
} :root .pieza__meta{
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.16em; text-transform:uppercase;
  color:#FFD6DE; margin-top:.35em;
}
/* Botón de reproducción */ :root .pieza__play{
  position:absolute; inset-block-start:50%; inset-inline-start:50%;
  translate:-50% -50%; z-index:2;
  inline-size:64px; block-size:64px; border-radius:50%;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--chilli) 92%, transparent);
  color:#FFF; border:0; cursor:pointer;
  transition:scale .3s var(--ease-out), background .3s var(--ease-out);
} :root .pieza__play::before{
  content:""; inline-size:0; block-size:0;
  border-block:11px solid transparent;
  border-inline-start:18px solid currentColor;
  margin-inline-start:5px;
} :root .pieza:hover .pieza__play{ scale:1.08; background:var(--chilli) } :root .pieza__play:focus-visible{ outline:3px solid var(--lemon); outline-offset:4px }

/* Si la plataforma externa falla, queda la portada local: nunca un
   cuadro roto. */ :root .pieza__caida{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center; gap:.5rem;
  background:var(--ballet); color:#5A3B44; text-align:center;
  padding:var(--space-m);
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.14em; text-transform:uppercase;
}

/* — Pie como contraportada ————————————————————— */ :root .site-footer, :root footer[class*="foot"], :root .ft{
  background:var(--night);
  color:#FBF3EF;
  --fg:#FBF3EF; --muted:#C3ADA6; --rule:rgba(255,255,255,.18);
  position:relative;
}


/* ═══ 7 · RESPONSIVE ═══════════════════════════════════════════════ */

/* Tablet */
@media (max-width:1023px){
  :root{ --page:100%; --space-4xl:clamp(3rem, 6vw, 4.5rem) }   :root h1{ max-width:15ch } :root h2{ max-width:18ch }
}

/* Móvil */
@media (max-width:719px){
  :root{
    --gutter:1.15rem;
    --space-4xl:2.75rem;
    --space-3xl:2.5rem;
    --space-2xl:2rem;
    --step-7:clamp(2.5rem, 12vw, 3.4rem);
    --step-6:clamp(2.2rem, 10.5vw, 3rem);
    --step-5:clamp(1.95rem, 9vw, 2.5rem);
  }   :root h1, :root h2, :root h3, :root .hero__title{ max-width:none }   :root .fragmento{ display:none }   :root .cinta::before{ inline-size:96px; block-size:26px; inset-block-start:-13px }   :root .nota-margen{ rotate:0deg; max-width:none }
  /* Nada girado en móvil: se sale de la pantalla. */   :root .girada, :root .girada-der, :root .girada-mas{ rotate:0deg }   :root blockquote{ max-width:none; font-size:var(--step-1) }
  :root .btn{ inline-size:100%; justify-content:center }   :root .btn--auto{ inline-size:auto }
}

/* Pantallas muy pequeñas */
@media (max-width:359px){
  :root{ --gutter:.9rem; --step-0:.95rem }
  :root .btn{ padding:.85em 1.1em; font-size:var(--step--2) }
}

/* Nada se sale nunca de la pantalla. */ :root img, :root video, :root iframe, :root svg, :root table, :root pre{ max-inline-size:100% } :root body{ overflow-x:clip }


/* ═══ 8 · ACCESIBILIDAD Y MOVIMIENTO ═══════════════════════════════ */  :root :where(a, :root button, :root input, :root textarea, :root select, :root summary, :root [tabindex]):focus-visible{
  outline:3px solid var(--chilli);
  outline-offset:3px;
  border-radius:2px;
} :root .is-dark :where(a, :root button, :root input, :root textarea, :root select):focus-visible, :root .is-im  :where(a, :root button, :root input, :root textarea, :root select):focus-visible{
  outline-color:var(--rosa);
}  :root .saltar, :root .skip{
  position:absolute; inset-inline-start:-9999px;
  background:var(--chilli); color:var(--marfil);
  padding:.85rem 1.25rem; z-index:9999;
  font-family:var(--font-ui); font-size:var(--step--1);
  letter-spacing:.12em; text-transform:uppercase;
} :root .saltar:focus, :root .skip:focus{ inset-inline-start:1rem; inset-block-start:1rem }

/* Entrada suave de las piezas. Sin desplazamiento lateral. */ :root .entra{ opacity:0; translate:0 18px; transition:opacity .7s var(--ease-out), translate .7s var(--ease-out) } :root .entra.a-la-vista{ opacity:1; translate:0 0 }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }   :root .entra{ opacity:1; translate:none }   :root .subrayado{ background-size:100% 100% }   :root .circulado::after{ opacity:1; scale:1 }   :root .tachado::after{ scale:1 1 }   :root .girada, :root .girada-der, :root .girada-mas{ rotate:0deg }
}

@media print{
  :root .site-header, :root .site-footer, :root .btn, :root .pieza__play{ display:none }   :root body{ background:#fff; color:#000 }
}


/* ═══ 9 · COMPOSICIÓN POR PÁGINA ═══════════════════════════════════
   Lo de arriba es el sistema. Lo que sigue son decisiones de página:
   dónde cae cada cosa y cuánto pesa.                                */

/* — INICIO · portada ————————————————————————————
   El nombre en dos líneas, deliberadamente. No es un título que se
   parte solo: cada línea está escrita aparte. */ :root .portada__titulo{
  display:grid;
  gap:0;
  line-height:.86;
  letter-spacing:-.045em;
  font-size:clamp(3.2rem, 14vw, 9rem);
  max-width:none;
} :root .portada__l2{ padding-inline-start:.42em }         /* la segunda, desplazada */  :root .portada__frase{
  font-family:var(--font-quote);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.3rem, 3.2vw, 2.1rem);
  letter-spacing:-.01em;
  margin-top:.5em;
} :root .portada__punto{ color:var(--rosa); font-style:normal }  :root .portada__firma{
  position:absolute;
  inset-block-end:clamp(1.5rem, 4vh, 3rem);
  inset-inline-end:clamp(1.25rem, 5vw, 4rem);
  z-index:3;
  color:var(--marfil);
  opacity:.9;
  font-size:clamp(1.6rem, 3.4vw, 2.6rem);
  rotate:-6deg;
  pointer-events:none;
} :root .portada__fondo{
  inset-block-end:-.12em;
  inset-inline-start:-.04em;
  color:var(--marfil);
  opacity:.10;
  z-index:1;
}
@media (max-width:719px){   :root .portada__l2{ padding-inline-start:.22em }   :root .portada__firma{ font-size:1.4rem; inset-block-end:5.5rem }
}


/* — PODCAST ————————————————————————————————————
   Seis piezas en este orden: título, adelanto, T1, botón, T2, T3.
   La página tenía huecos enormes entre bloques idénticos; aquí el
   ritmo es corto y cada pieza cambia de peso. */  :root .pod-abre{ position:relative; padding-block:clamp(3rem, 8vw, 6.5rem) var(--space-3xl); overflow:clip } :root .pod-abre__fondo{ inset-block-start:-.06em; inset-inline-end:-.03em; opacity:.06 } :root .pod-abre__grid{
  position:relative; z-index:2;
  display:grid; gap:clamp(2rem, 5vw, 4.5rem);
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  align-items:center;
} :root .pod-abre__h{
  display:grid; gap:0; line-height:.88;
  font-size:clamp(2.9rem, 10vw, 6.4rem);
  letter-spacing:-.045em; max-width:none;
} :root .pod-abre__l2{ padding-inline-start:1.4em; color:var(--chilli) } :root .pod-abre__lede{ margin-top:var(--space-m); font-size:var(--step-1); max-width:34ch } :root .pod-abre__nota{ margin-top:var(--space-m) } :root .pod-abre__portada{ display:grid; place-items:center }  :root .pod-teaser__cab{ margin-bottom:var(--space-l) } :root .pod-teaser__marco{ background:var(--ballet-claro) } :root .pod-teaser__marco .hueco{
  position:absolute; inset:0; border:0; border-radius:0;
  min-block-size:0;
}

/* Las temporadas: filas, :root no tarjetas sueltas flotando. */ :root .pod-temps .shell{ display:grid; gap:0 } :root .temp{
  display:grid; gap:var(--space-s);
  padding-block:clamp(2rem, 4vw, 3rem);
  border-top:1px solid var(--rule);
} :root .temp:first-of-type{ border-top:2px solid var(--tinta) } :root .temp__cab{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-m) } :root .temp__h{ font-size:var(--step-3); max-width:22ch; margin:0 } :root .temp__body{ max-width:52ch; color:var(--humo) } :root .temp__cta{ margin-top:var(--space-2xs) } :root .temp__estado{ margin:0 }  :root .pod-todos{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-m);
  padding-block:clamp(1.75rem, 3.5vw, 2.5rem);
  border-top:1px solid var(--rule);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ballet) 55%, transparent), transparent 62%);
  padding-inline:clamp(1rem, 2.5vw, 2rem);
  margin-inline:calc(clamp(1rem, 2.5vw, 2rem) * -1);
} :root .pod-todos__nota{ margin:0; color:var(--humo); font-size:var(--step--1) }

/* Temporada 3: la pieza que debe verse desde lejos. */ :root .pod-t3{
  position:relative; overflow:clip;
  padding-block:clamp(3.5rem, 8vw, 6.5rem);
  margin-block:clamp(2rem, 4vw, 3.5rem);
} :root .pod-t3__fondo{
  inset-block-start:50%; inset-inline-end:2%; translate:0 -50%;
  font-size:clamp(12rem, 34vw, 30rem); opacity:.13; color:var(--chilli);
} :root .pod-t3__grid{ position:relative; z-index:2; display:grid; gap:var(--space-m); justify-items:start } :root .pod-t3__folio{ margin:0 } :root .pod-t3__h{
  display:grid; gap:0; margin:0;
  font-size:clamp(2.6rem, 9vw, 5.4rem); line-height:.9; letter-spacing:-.04em;
  max-width:none;
} :root .pod-t3__l2{ padding-inline-start:.9em; color:var(--chilli); font-style:italic } :root .pod-t3__lede{ font-size:var(--step-2); max-width:26ch; margin:0 } :root .pod-t3__datos{ display:grid; gap:var(--space-xs); margin:var(--space-s) 0 0; padding:0; list-style:none } :root .pod-t3__datos li{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-s) } :root .pod-t3__et{
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.18em; text-transform:uppercase; color:#6B5A2A;
  min-inline-size:6.5em;
} :root .pod-t3__val{ font-weight:700 } :root .pod-t3__firma{ margin-top:var(--space-s) } :root .pod-t3 .pendiente{ background:var(--marfil); border-color:var(--lemon-borde) }  :root .pod-rio__grid{
  display:grid; gap:clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
  align-items:start;
} :root .pod-rio__h{ font-size:var(--step-2); margin:0 } :root .pod-rio__texto p{ max-width:56ch } :root .pod-rio__enlaces{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
  margin-top:var(--space-s);
}

@media (max-width:899px){   :root .pod-abre__grid, :root .pod-rio__grid{ grid-template-columns:1fr }   :root .pod-abre__portada{ order:-1 }   :root .pod-abre__l2{ padding-inline-start:.7em }   :root .pod-t3__l2{ padding-inline-start:.4em }   :root .temp__h{ max-width:none }
}
@media (max-width:719px){   :root .pod-todos{ margin-inline:0; padding-inline:0; background:none }   :root .pod-t3__et{ min-inline-size:0 }   :root .pod-abre{ padding-block:2rem 3rem }
}


/* — CONFERENCIAS ————————————————————————————————
   El encabezado dejaba media pantalla en blanco antes de la foto, y
   en móvil era peor. Aquí el titular y la entradilla van juntos. */  :root .conf-abre{ padding-block:clamp(2.5rem, 6vw, 4.5rem) 0; position:relative } :root .conf-abre .hero__inner{ padding-block:0 clamp(1.75rem, 4vw, 3rem) } :root .conf-abre__h{
  display:grid; gap:0; max-width:none;
  font-size:clamp(2.8rem, 11vw, 6.6rem); line-height:.88; letter-spacing:-.045em;
  margin-block:.1em .35em;
} :root .conf-abre__l2{ padding-inline-start:1.1em; color:var(--rosa); font-style:italic }
:root .conf-abre .hero__grid{
  display:grid; gap:clamp(1.5rem, 4vw, 3rem);
  grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
  align-items:end;
}
:root .conf-abre .hero__lead{ max-width:46ch; margin:0 }
:root .conf-abre .hero__strip{ margin-top:clamp(1.5rem, 4vw, 2.75rem) }

/* Mírala en acción: rosa fuerte, cursiva y una sola pieza principal. */ :root .conf-accion__h{ font-style:normal } :root .conf-accion__h em{ color:var(--chilli); font-style:italic } :root .conf-accion__lede{ max-width:52ch; margin-block:var(--space-s) var(--space-l) } :root .conf-accion__principal{ background:var(--ballet-claro); margin-bottom:var(--space-xl) } :root .conf-accion__principal .hueco{
  position:absolute; inset:0; border:0; border-radius:0; min-block-size:0;
  background:
    repeating-linear-gradient(-45deg, rgba(170,0,3,.16) 0 9px, transparent 9px 18px),
    var(--ballet-claro);
} :root .conf-accion__sub{ margin-block:0 var(--space-m) }
:root .conf-accion .vid__cap{ color:#5A3B44 } :root .conf-paises{
  display:inline-block; font-family:var(--font-ui);
  font-size:var(--step--2); letter-spacing:.16em; text-transform:uppercase;
  color:var(--chilli); margin-bottom:.4em;
}

@media (max-width:899px){
  :root .conf-abre .hero__grid{ grid-template-columns:1fr }   :root .conf-abre__l2{ padding-inline-start:.5em }
}
@media (max-width:719px){   :root .conf-abre{ padding-block:1.5rem 0 }   :root .conf-abre__h{ margin-block:.05em .3em }
  :root .conf-abre .hero__strip figure{ --ratio:16 / 10 !important }
}


/* ═══ 10 · NINGUNA MITAD VACÍA ═════════════════════════════════════
   El hueco que se veía en «Invítala» —media pantalla en negro— y en
   varias secciones más tenía tres causas sumadas:

     · portadas con altura mínima forzada de hasta 900 px
     · videos verticales de 9:16 que a 340 px de ancho miden 604 de alto
     · rejillas de dos columnas alineadas al fondo, con una mitad corta

   Se corrigen las tres. Los selectores llevan «:root» delante porque
   las reglas de Astro van con atributo de ámbito y pesan más que una
   clase suelta: así quedan iguales y gana ésta, que se carga después.  */

/* 1 · Las portadas dejan de imponer una altura que luego hay que
       rellenar con aire. */
:root .hero[data-astro-cid-j7pv25f6]{ min-height:clamp(420px, 62svh, 640px) }
:root .hero[data-astro-cid-2vg4cjqq]{ min-height:clamp(400px, 58svh, 600px) }
:root .lbyn__video{ min-height:clamp(340px, 46svh, 520px) }
:root .hero__body[data-astro-cid-j7pv25f6]{ padding-block:var(--space-2xl) clamp(2rem, 5vh, 3.5rem) }
:root .hero__body[data-astro-cid-2vg4cjqq]{ padding-block:var(--space-2xl) clamp(1.75rem, 4vh, 3rem) }

/* 2 · Techo para los medios verticales. El encuadre sube porque la
       cara está siempre en el tercio superior. */ :root .vid--feature .vid__frame{ max-block-size:min(58vh, 460px) } :root .vid--feature .vid__el, :root .vid--feature .vid__fallback img{ object-position:50% 30% }

/* 3 · Ninguna columna alineada al fondo cuando la de al lado es más
       alta: eso es exactamente lo que abría el hueco. */
:root .speak__grid, :root .close__grid, :root .hero__grid,
:root .story__grid, :root .marriage__grid, :root .im__grid,
:root .shop__grid, :root .about__grid, :root .pro__grid,
:root .events__grid, :root .ask__grid, :root .church__grid,
:root .end__grid, :root .open__grid, :root .book__grid,
:root .bio__grid, :root .family__grid, :root .quick__grid,
:root .community__grid, :root .event__grid, :root .why__grid,
:root .rack__grid, :root .seasons__grid, :root .about__grid{
  align-items:center;
}

/* Los encabezados de dos piezas sí van abajo: ahí la línea base
   compartida es lo que se busca. Pero sin estirar la fila. */
:root .sf__head, :root .promo__head, :root .topics__head,
:root .eps__head, :root .team__head, :root .kits__head,
:root .shop__head, :root .tk__head{
  align-items:end; row-gap:var(--space-s);
}

/* 4 · Huecos entre columnas de 80–96 px. Demasiado: se quedan en 48. */
:root .story__grid, :root .im__grid, :root .bio__grid,
:root .marriage__grid, :root .book__grid, :root .pieces__grid,
:root .shop__grid, :root .close__grid, :root .pro__grid,
:root .form__grid, :root .end__grid, :root .main__grid,
:root .why__grid, :root .diag__grid, :root .rack__grid,
:root .community__grid, :root .ship__grid, :root .event__grid,
:root .collab__grid, :root .open__grid, :root .ask__grid,
:root .family__grid, :root .quick__grid, :root .church__grid,
:root .about__grid, :root .pdp__grid, :root .seasons__grid,
:root .nf__grid, :root .legal__grid, :root .art__body,
:root .hero__grid{
  gap:clamp(1.5rem, 3.2vw, 3rem);
}

/* 5 · «Invítala» del inicio: el titular pasó a vivir dentro de la
       columna izquierda, así que las dos mitades tienen contenido. */
:root .speak__title{ font-size:clamp(2.6rem, 7vw, 5rem); margin-bottom:var(--space-m) }
:root .lbyn__title, :root .open__title{ font-size:clamp(2.4rem, 6.4vw, 4.6rem) }
:root .speak__grid{
  grid-template-columns:minmax(0, 1fr) minmax(0, 300px);
  align-items:center;
} :root .speak__col{ display:grid; align-content:center }
:root .speak__evidence{ max-inline-size:300px; margin-inline-start:auto }

@media (max-width:899px){
  :root .speak__grid{ grid-template-columns:1fr }
  :root .speak__evidence{ margin-inline:0; max-inline-size:min(300px, 100%) }   :root .vid--feature .vid__frame{ max-block-size:min(52vh, 400px) }
  :root .hero[data-astro-cid-j7pv25f6],
  :root .hero[data-astro-cid-2vg4cjqq]{ min-height:0 }
}


/* — MICHELLE · «Su historia» ————————————————————— */ :root .hist-foto{ margin:var(--space-l) 0 0; min-block-size:clamp(200px, 24vw, 300px) } :root .hist-aviso{ margin-top:var(--space-s) }

/* — MATRIMONIO ———————————————————————————————— */ :root .mat-foto{ margin:0 0 var(--space-l); min-block-size:clamp(190px, 22vw, 280px) }

/* Los diez días: la pieza que se anuncia con el QR. */ :root .diez{ position:relative; overflow:clip } :root .diez__fondo{
  inset-block-start:50%; inset-inline-end:1%; translate:0 -50%;
  font-size:clamp(11rem, 30vw, 26rem); opacity:.12; color:var(--chilli);
} :root .diez__grid{
  position:relative; z-index:2;
  display:grid; gap:clamp(2rem, 4vw, 3.5rem);
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  align-items:start;
} :root .diez__h{
  display:grid; gap:0; margin:0 0 var(--space-m);
  font-size:clamp(2.4rem, 8vw, 4.8rem); line-height:.9; letter-spacing:-.04em;
  max-width:none;
} :root .diez__l2{ padding-inline-start:1.1em; color:var(--chilli); font-style:italic } :root .diez__lede{ font-size:var(--step-1); max-width:44ch } :root .diez__datos{ display:grid; gap:var(--space-xs); margin:var(--space-l) 0 0; padding:0; list-style:none } :root .diez__datos li{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem var(--space-s) } :root .diez__et{
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.18em; text-transform:uppercase; color:#6B5A2A;
  min-inline-size:6em;
} :root .diez__val{ font-weight:700 } :root .diez__nota{ margin-top:var(--space-m) } :root .diez .pendiente{ background:var(--marfil); border-color:var(--lemon-borde) }  :root .diez__lado{ display:grid; gap:var(--space-l) } :root .diez__form{
  display:grid; gap:var(--space-s);
  background:var(--marfil);
  border:1px solid rgba(26,18,16,.14);
  border-radius:var(--radius);
  padding:clamp(1.25rem, 3vw, 2rem);
} :root .diez__form-h{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--step-2); line-height:1.1; margin:0 0 var(--space-2xs);
} :root .diez__form .field{ display:grid; gap:.35rem } :root .diez__legal{ color:var(--humo); margin:0 } :root .diez__qr{ margin:0; display:grid; gap:.5rem } :root .hueco--qr{ min-block-size:0; aspect-ratio:1; max-inline-size:230px }

@media (max-width:899px){   :root .diez__grid{ grid-template-columns:1fr }   :root .diez__l2{ padding-inline-start:.4em }   :root .diez__et{ min-inline-size:0 }
}


/* — TIENDA · lo que sigue en demostración ————————————
   Los estados ya estaban marcados, pero en gris y del tamaño de una
   nota al pie: se perdían. Ahora son amarillo mantequilla con punto
   rojo, imposibles de confundir con un dato en firme. */

:root .soon{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.14em; text-transform:uppercase;
  color:#6B5A2A; background:var(--lemon);
  border:1px solid var(--lemon-borde); border-radius:2px;
  padding:.3em .65em; line-height:1.3;
}
:root .soon__mark{
  inline-size:6px; block-size:6px; border-radius:50%;
  background:var(--chilli); opacity:1; translate:0 0;
}
:root .is-dark .soon, :root .is-im .soon{
  background:rgba(255,243,178,.14); color:var(--lemon);
  border-color:rgba(255,243,178,.4);
}

/* El aviso de que la tienda es una demostración. */
:root .demo{
  background:var(--ballet-claro);
  border:1px solid var(--rosa);
  border-left:4px solid var(--chilli);
  border-radius:var(--radius);
  padding:clamp(.9rem, 2vw, 1.35rem);
  color:#5A3B44;
}
:root .demo strong, :root .demo b{ color:var(--chilli) }

/* Precio simulado: que se lea como simulado. */
:root .pdp__price, :root .price, :root [class*="__price"]{
  font-family:var(--font-display); font-weight:700;
  color:var(--tinta);
}


/* — BLOG · portadas homologadas ————————————————————
   Cada artículo con la misma proporción, el mismo tratamiento de
   papel y el mismo peso tipográfico. */

:root .post__media, :root .art__media, :root .blog-portada{
  aspect-ratio:3 / 2; overflow:clip; background:var(--ballet-claro);
  border-radius:var(--radius);
}
:root .post__media img, :root .art__media img, :root .blog-portada img{
  inline-size:100%; block-size:100%; object-fit:cover;
} :root .blog-video{ margin-block:var(--space-xl) }


/* — IMAGE METHOD ————————————————————————————————
   Marca aparte: negro, blanco y olivo. Sólo se le presta la
   tipografía y los huecos marcados, para que se note que es de la
   misma casa sin dejar de ser otra cosa. */ :root .im-foto{
  margin:0 0 var(--space-xl);
  min-block-size:clamp(200px, 26vw, 340px);
  background:
    repeating-linear-gradient(-45deg, rgba(130,135,62,.22) 0 9px, transparent 9px 18px),
    rgba(255,255,255,.04);
  border-color:var(--im-moss);
  color:#D8DCC0;
} :root .im-foto .hueco__que{ color:#E8EBD8 } :root .im-foto .hueco__nota{ color:#B9BE9C } :root .im-url{ margin-top:var(--space-s) }
:root .is-im .pendiente{
  background:rgba(255,243,178,.12); color:var(--lemon);
  border-color:rgba(255,243,178,.42);
}
:root .im__nota{ margin-top:var(--space-s); color:var(--im-silver); max-width:44ch }


/* ═══ 11 · LAS FOTOGRAFÍAS NUEVAS ══════════════════════════════════ */

/* Matrimonio · el retrato de los dos, sujeto con cinta. */ :root .mat-retrato{ position:relative; margin:0 0 var(--space-xl) } :root .mat-retrato .pic{ border-radius:var(--radius); overflow:clip } :root .mat-retrato__pie{ margin-top:var(--space-s); color:var(--humo); max-width:34ch }

/* Conferencias · el escenario lleno, a todo lo ancho del pliego. */ :root .conf-escena{ margin:0 0 var(--space-xl) } :root .conf-escena .pic{ border-radius:var(--radius); overflow:clip } :root .conf-escena__pie{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:var(--space-s) var(--space-m); margin-top:var(--space-s);
} :root .conf-escena__nota{ color:#5A3B44; font-size:var(--step--1) }

/* Podcast · el set de grabación. */ :root .pod-set{ margin:0 } :root .pod-set .pic{ border-radius:var(--radius); overflow:clip } :root .pod-set__pie{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-s);
  margin-top:var(--space-s); color:var(--humo); font-size:var(--step--1);
}

/* La Biblia y Nosotras · Michelle con su Biblia, girada sobre el texto. */ :root .lbyn-retrato{
  position:relative; float:inline-end;
  inline-size:min(38%, 340px); margin:0 0 var(--space-l) var(--space-xl);
} :root .lbyn-retrato .pic{ border-radius:var(--radius); overflow:clip }

/* Image Method · retrato provisional, con su nota. */ :root .im-retrato{ margin:0 0 var(--space-xl) } :root .im-retrato .pic{ border-radius:var(--radius); overflow:clip } :root .im-retrato__pie{ margin-top:var(--space-s); color:var(--im-silver) }

@media (max-width:719px){   :root .lbyn-retrato{ float:none; inline-size:100%; margin:0 0 var(--space-l) }   :root .conf-escena, :root .mat-retrato, :root .im-retrato{ margin-bottom:var(--space-l) }
}


/* ═══ 12 · EL BOLETÍN ══════════════════════════════════════════════
   Antes había hasta tres llamadas en la misma página —la franja de
   arriba, la sección de cierre y el pie— y las tres decían lo mismo.
   Ahora es una sola: este bloque rosa. El pie sólo apunta aquí, y el
   pop-up de bienvenida es la misma invitación, dicha al entrar.

   El copy dejó de ser genérico. No dice «suscríbete»: dice qué va a
   llegar y quién lo escribe.                                        */  :root .boletin{
  position:relative; overflow:clip;
  padding-block:clamp(3rem, 7vw, 5.5rem);
  margin-block-start:clamp(2rem, 4vw, 3.5rem);
} :root .boletin__fondo{
  inset-block-end:-.18em; inset-inline-start:-.02em;
  font-size:clamp(9rem, 26vw, 22rem); opacity:.13; color:var(--chilli);
} :root .boletin__grid{
  position:relative; z-index:2;
  display:grid; gap:clamp(2rem, 4.5vw, 4rem);
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  align-items:center;
} :root .boletin__h{
  display:grid; gap:0; margin:0 0 var(--space-m); max-width:none;
  font-size:clamp(2.4rem, 8vw, 4.6rem); line-height:.9; letter-spacing:-.042em;
} :root .boletin__l2{ padding-inline-start:1.05em; color:var(--chilli); font-style:italic } :root .boletin__lede{ font-size:var(--step-1); max-width:38ch; margin:0 }

/* Los tres motivos, numerados como en una revista. */ :root .boletin__que{
  display:grid; gap:.55rem; margin:var(--space-l) 0 0; padding:0; list-style:none;
} :root .boletin__que li{
  display:flex; align-items:baseline; gap:.85rem;
  font-size:var(--step-0); line-height:1.45;
  padding-block:.45rem;
  border-top:1px solid rgba(26,18,16,.2);
} :root .boletin__que li:last-child{ border-bottom:1px solid rgba(26,18,16,.2) } :root .boletin__n{
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.16em; color:var(--chilli); flex:none;
}  :root .boletin__lado{ display:grid; gap:var(--space-m); justify-items:start } :root .boletin__form{
  display:grid; gap:.65rem; inline-size:100%;
  background:var(--marfil);
  border-radius:var(--radius);
  padding:clamp(1.15rem, 2.6vw, 1.75rem);
  box-shadow:0 18px 50px -30px rgba(26,18,16,.5);
} :root .boletin__form input{ min-height:50px } :root .boletin__form .btn{ inline-size:100%; justify-content:center } :root .boletin__msg{ margin:0; min-block-size:1.1em; color:var(--chilli) } :root .boletin__legal{ margin:0; color:var(--humo); font-size:var(--step--2) } :root .boletin__firma{ font-size:var(--step-2); margin:0 }

@media (max-width:899px){   :root .boletin__grid{ grid-template-columns:1fr }   :root .boletin__l2{ padding-inline-start:.4em }   :root .boletin__lado{ justify-items:stretch }
}

/* El pie ya no lleva formulario: sólo apunta al bloque. Así deja de
   competir con «Una misma convicción», que es la firma de cierre. */
:root .ft__apunta{ display:grid; gap:.6rem; justify-items:start; align-content:center } :root .ft__apunta-t{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--step-2); line-height:1.1; margin:0;
} :root .ft__apunta-c{ margin:0; color:#C3ADA6; max-width:34ch; font-size:var(--step--1) }
:root .ft__apunta .btn{ margin-top:.35rem }


/* ═══ 13 · LA BIENVENIDA ═══════════════════════════════════════════
   La misma invitación, dicha al entrar. Rosa, con la fotografía a un
   lado. No es un banner: es una tarjeta. */  :root .bienve{
  position:fixed; inset:0; z-index:999;
  display:grid; place-items:center;
  padding:clamp(1rem, 3vw, 2.5rem);
  background:rgba(26,18,16,.42);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease-out), visibility .45s;
} :root .bienve[data-abierto]{ opacity:1; visibility:visible }  :root .bienve__caja{
  position:relative;
  inline-size:min(100%, 700px);
  max-block-size:calc(100dvh - 2rem);
  overflow:auto;
  display:grid; grid-template-columns:minmax(0, .78fr) minmax(0, 1.22fr);
  background:var(--rosa);
  color:var(--tinta);
  border-radius:var(--radius);
  box-shadow:0 34px 100px -34px rgba(26,18,16,.7);
  translate:0 20px; scale:.98;
  transition:translate .5s var(--ease-out), scale .5s var(--ease-out);
} :root .bienve[data-abierto] .bienve__caja{ translate:0 0; scale:1 }

/* El lado de la fotografía, con una mancha de tinta detrás. */ :root .bienve__foto{
  position:relative; overflow:clip;
  background:linear-gradient(160deg, var(--ballet), var(--rosa) 70%);
  display:grid; place-items:center; padding:var(--space-s);
  min-block-size:180px;
} :root .bienve__mancha{
  position:absolute; inset-block-end:-22%; inset-inline-start:-18%;
  inline-size:150%; aspect-ratio:1;
  background:var(--chilli); opacity:.14;
  border-radius:48% 52% 42% 58% / 55% 45% 55% 45%;
} :root .bienve__hueco{
  position:relative; z-index:1;
  background:none; border:1.5px dashed rgba(170,0,3,.55);
  min-block-size:0; block-size:100%; inline-size:100%;
  color:#5A3B44;
}  :root .bienve__texto{
  padding:clamp(1.4rem, 3.4vw, 2.25rem);
  display:grid; align-content:center; gap:.7rem;
} :root .bienve__et{
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.2em; text-transform:uppercase; color:var(--chilli); margin:0;
} :root .bienve__h{
  display:grid; gap:0; margin:0; max-width:none;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.7rem, 4.4vw, 2.6rem); line-height:.94; letter-spacing:-.032em;
} :root .bienve__l2{ padding-inline-start:.9em; color:var(--chilli); font-style:italic } :root .bienve__copy{ margin:0; font-size:var(--step--1); max-width:32ch }  :root .bienve__que{ display:grid; gap:.3rem; margin:.3rem 0 .2rem; padding:0; list-style:none } :root .bienve__que li{
  position:relative; padding-inline-start:1.15em;
  font-size:var(--step--1); line-height:1.45;
} :root .bienve__que li::before{
  content:""; position:absolute; inset-block-start:.62em; inset-inline-start:0;
  inline-size:6px; block-size:6px; border-radius:50%; background:var(--chilli);
}  :root .bienve__form{ display:grid; gap:.5rem; margin-top:.35rem } :root .bienve__form input{ min-height:48px; background:var(--marfil) } :root .bienve__form .btn{ justify-content:center } :root .bienve__msg{ margin:0; min-block-size:1.1em; font-size:var(--step--2); color:var(--chilli) }  :root .bienve__pie{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:.6rem;
} :root .bienve__no{
  background:none; border:0; padding:.25rem 0; cursor:pointer;
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.13em; text-transform:uppercase; color:#5A3B44;
  text-decoration:underline; text-underline-offset:3px;
} :root .bienve__no:hover{ color:var(--chilli) } :root .bienve__firma{ margin:0; font-size:var(--step-1) }  :root .bienve__cerrar{
  position:absolute; inset-block-start:.55rem; inset-inline-end:.55rem; z-index:3;
  inline-size:38px; block-size:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--marfil); color:var(--tinta);
  border:1px solid rgba(26,18,16,.16); cursor:pointer;
  font-size:1.15rem; line-height:1;
} :root .bienve__cerrar:hover{ background:var(--chilli); color:var(--marfil); border-color:var(--chilli) }

@media (max-width:720px){   :root .bienve__caja{ grid-template-columns:1fr }   :root .bienve__foto{ min-block-size:120px }   :root .bienve__l2{ padding-inline-start:.35em }
}
@media (prefers-reduced-motion:reduce){   :root .bienve, :root .bienve__caja{ transition:none }
}


/* ═══ 14 · LAS FOTOGRAFÍAS Y LOS RECORTES ══════════════════════════
   Regla de la casa: cada fotografía tiene un oficio y no se repite en
   otra sección. Los recortes transparentes no son fotos: son piezas
   de collage, y por eso van pocos y bien puestos.                   */


/* ── El recorte, como pieza ───────────────────────────────────── */ :root .calco{ display:block; pointer-events:none; user-select:none } :root .calco img{
  display:block; inline-size:100%; block-size:auto;
  filter:drop-shadow(0 22px 34px rgba(26,18,16,.26));
}
/* En móvil los recortes tapan texto. Se retiran salvo aviso. */
@media (max-width:719px){   :root .calco{ display:none }   :root .calco--movil{ display:block }
}


/* ── INICIO · «Una mujer, varios llamados» ─────────────────────
   Va justo después de la portada, que no se toca. Cinco piezas, una
   por llamado, y ninguna se repite más abajo. */ :root .llamados{
  position:relative;
  padding-block:clamp(2.5rem, 6vw, 5rem);
  background:var(--crema);
  overflow:clip;
} :root .llamados__h{ font-size:var(--step-3); margin:0 0 clamp(1.5rem, 3.5vw, 2.5rem) } :root .llamados__rejilla{
  display:grid; gap:clamp(1rem, 2.2vw, 1.75rem);
  grid-template-columns:repeat(6, 1fr);
  margin:0; padding:0; list-style:none;
}
/* Un ritmo de revista: la familia manda, el resto la acompaña. */ :root .llamado--familia{ grid-column:span 2; grid-row:span 2 } :root .llamado--ensena{ grid-column:span 4 } :root .llamado--escenario{ grid-column:span 2 } :root .llamado--podcast{ grid-column:span 2 } :root .llamado--escribe{ grid-column:span 6 }  :root .llamado__enlace{
  position:relative; display:block; block-size:100%;
  border-radius:var(--radius); overflow:clip;
  text-decoration:none; color:#FFF;
  background:var(--cafe);
} :root .llamado__enlace .pic{ block-size:100% } :root .llamado__enlace::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,
    rgba(21,14,12,.78) 0%, rgba(21,14,12,.16) 46%, transparent 74%);
} :root .llamado__pie{
  position:absolute; inset-inline:0; inset-block-end:0; z-index:2;
  display:grid; gap:.2rem;
  padding:clamp(.85rem, 2vw, 1.35rem);
} :root .llamado__et{
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.18em; text-transform:uppercase; color:var(--rosa);
} :root .llamado__t{
  font-family:var(--font-display); font-weight:700;
  font-size:var(--step-1); line-height:1.1; letter-spacing:-.02em;
} :root .llamado__enlace:hover .pic img{ scale:1.04 } :root .llamado__enlace .pic img{ transition:scale .7s var(--ease-out) } :root .llamado__enlace:focus-visible{ outline:3px solid var(--chilli); outline-offset:3px }  :root .llamados__calco{
  position:absolute; z-index:3;
  inline-size:clamp(150px, 20vw, 280px);
  inset-block-end:-1.5rem; inset-inline-end:clamp(.5rem, 3vw, 3rem);
  rotate:3deg;
}

@media (max-width:1023px){   :root .llamados__rejilla{ grid-template-columns:repeat(4, 1fr) }   :root .llamado--familia{ grid-column:span 2; grid-row:span 2 }   :root .llamado--ensena, :root .llamado--escribe{ grid-column:span 2 }   :root .llamado--escenario, :root .llamado--podcast{ grid-column:span 2 }   :root .llamados__calco{ display:none }
}
@media (max-width:719px){   :root .llamados__rejilla{ grid-template-columns:1fr }   :root .llamado{ grid-column:span 1 !important; grid-row:span 1 !important }
}

/* El recorte sobre el bloque oscuro de conferencias del inicio. */ :root .speak__calco{
  position:absolute; z-index:3;
  inline-size:clamp(140px, 17vw, 240px);
  inset-block-end:0; inset-inline-start:clamp(.5rem, 4vw, 4rem);
  rotate:-3deg;
}
:root .speak{ position:relative; overflow:clip }


/* ── MICHELLE · familia, retrato y puente ──────────────────────── */ :root .hist-familia{ margin:var(--space-l) 0 0 } :root .hist-familia .pic{ border-radius:var(--radius); overflow:clip } :root .hist-familia__pie{ margin-top:var(--space-s); color:var(--humo); max-width:44ch }  :root .puente-lbyn{
  position:relative; overflow:clip;
  padding-block:clamp(2.5rem, 6vw, 4.5rem);
} :root .puente-lbyn__grid{
  position:relative; z-index:2;
  display:grid; gap:clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
  align-items:center;
} :root .puente-lbyn__media .pic{ border-radius:var(--radius); overflow:clip } :root .puente-lbyn__h{
  display:grid; gap:0; margin:.1em 0 .45em; max-width:none;
  font-size:clamp(2rem, 5.5vw, 3.4rem); line-height:.94; letter-spacing:-.035em;
} :root .puente-lbyn__l2{ padding-inline-start:.9em; color:var(--chilli); font-style:italic } :root .puente-lbyn__lede{ max-width:38ch; margin:0 0 var(--space-m) } :root .puente-lbyn__calco{
  position:absolute; z-index:1;
  inline-size:clamp(160px, 18vw, 250px);
  inset-block-end:-2rem; inset-inline-end:-1rem;
  rotate:5deg; opacity:.92;
}  :root .bienve__calco{ inline-size:min(100%, 190px); margin-inline:auto } :root .bienve__calco img{ filter:drop-shadow(0 14px 22px rgba(26,18,16,.28)) }
@media (max-width:719px){ :root .bienve__calco{ display:block } }


/* ── CONFERENCIAS · la galería de escenarios ───────────────────── */ :root .conf-galeria{
  display:grid; gap:clamp(.85rem, 2vw, 1.4rem);
  grid-template-columns:repeat(3, minmax(0, 1fr));
  margin-block:var(--space-m) var(--space-l);
} :root .conf-galeria__pieza{ margin:0 } :root .conf-galeria__pieza .pic{ border-radius:var(--radius); overflow:clip } :root .conf-galeria__pie{
  margin-top:.5rem;
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.14em; text-transform:uppercase; color:#5A3B44;
} :root .conf-accion__calco{
  position:absolute; z-index:1;
  inline-size:clamp(160px, 19vw, 280px);
  inset-block-start:-1rem; inset-inline-end:clamp(.5rem, 3vw, 3rem);
  rotate:4deg; opacity:.9;
}
:root .conf-accion{ position:relative; overflow:clip }

@media (max-width:899px){   :root .conf-galeria{ grid-template-columns:repeat(2, minmax(0, 1fr)) }   :root .puente-lbyn__grid{ grid-template-columns:1fr }   :root .puente-lbyn__l2{ padding-inline-start:.4em }
}
@media (max-width:719px){   :root .conf-galeria{ grid-template-columns:1fr }
}


/* ── PODCAST ───────────────────────────────────────────────────── */ :root .pod-otra{
  margin:0 0 var(--space-l);
  max-inline-size:520px;
} :root .pod-otra .pic{ border-radius:var(--radius); overflow:clip } :root .pod-otra figcaption{ margin-top:.5rem; color:var(--humo) }


/* ── LA BIBLIA Y NOSOTRAS · collage ────────────────────────────── */ :root .lbyn-collage{
  position:relative;
  display:grid; gap:clamp(.85rem, 2vw, 1.5rem);
  grid-template-columns:repeat(6, 1fr);
  margin-block:var(--space-l) var(--space-xl);
} :root .lbyn-collage figure{ margin:0 } :root .lbyn-collage .pic{ border-radius:var(--radius); overflow:clip } :root .lbyn-collage__a{ grid-column:span 4 } :root .lbyn-collage__b{ grid-column:span 2; align-self:end } :root .lbyn-collage__c{ grid-column:span 3 } :root .lbyn-collage__calco{
  position:absolute; z-index:2;
  inline-size:clamp(170px, 21vw, 300px);
  inset-block-end:-1rem; inset-inline-end:0;
  rotate:-4deg;
}
@media (max-width:899px){   :root .lbyn-collage{ grid-template-columns:repeat(4, 1fr) }   :root .lbyn-collage__a{ grid-column:span 4 }   :root .lbyn-collage__b, :root .lbyn-collage__c{ grid-column:span 2 }
}
@media (max-width:719px){   :root .lbyn-collage{ grid-template-columns:1fr }   :root .lbyn-collage__a, :root .lbyn-collage__b, :root .lbyn-collage__c{ grid-column:span 1 }
}


/* ── TIENDA · el banner de producto ────────────────────────────── */ :root .tienda-banner{
  position:relative; overflow:clip;
  padding-block:clamp(2.5rem, 6vw, 4.5rem);
  margin-block:clamp(1.5rem, 3vw, 2.5rem);
} :root .tienda-banner__grid{
  display:grid; gap:clamp(1.5rem, 4vw, 3rem);
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  align-items:center;
} :root .tienda-banner__h{
  display:grid; gap:0; margin:.1em 0 .4em; max-width:none;
  font-size:clamp(2rem, 6vw, 3.6rem); line-height:.94; letter-spacing:-.04em;
} :root .tienda-banner__l2{ padding-inline-start:.8em; color:var(--chilli); font-style:italic } :root .tienda-banner__lede{ margin:0 0 var(--space-m); max-width:32ch } :root .tienda-banner__piezas{ position:relative; min-block-size:clamp(200px, 26vw, 320px) } :root .tienda-banner__gorra{
  position:absolute; z-index:2;
  inline-size:min(62%, 300px);
  inset-block-start:0; inset-inline-start:0;
  rotate:-6deg;
} :root .tienda-banner__tote{
  position:absolute; z-index:1; margin:0;
  inline-size:min(58%, 280px);
  inset-block-end:0; inset-inline-end:0;
  rotate:4deg;
} :root .tienda-banner__tote .pic{ border-radius:var(--radius); overflow:clip }
@media (max-width:899px){   :root .tienda-banner__grid{ grid-template-columns:1fr }   :root .tienda-banner__l2{ padding-inline-start:.35em }
}
@media (max-width:719px){   :root .tienda-banner__piezas{ min-block-size:240px }   :root .tienda-banner__gorra{ display:block; inline-size:56%; rotate:-5deg }   :root .tienda-banner__tote{ inline-size:52% }
}


/* ═══ 15 · LO QUE SE VEÍA MAL EN PANTALLA ══════════════════════════
   Revisado sobre el sitio publicado, midiendo cada elemento. Cuatro
   defectos reales, y esto los corrige.

   1 · EL GRANDE, y la causa de casi todo lo demás.
       Mis clases nuevas (.conf-abre__h, .portada__titulo…) viven en
       elementos que TAMBIÉN llevan una clase de Astro (.hero__title).
       Astro la escribe con atributo de ámbito, que pesa más, así que
       ganaba su tamaño: el titular de Conferencias salía a 240 px en
       lugar de 105. De ahí los títulos gigantes, los cortes por la
       máscara de animación y los huecos.
       Arreglado antes de este bloque: todas mis reglas llevan «:root»
       delante, que iguala el peso y gana por orden de carga.

   2 · Las palabras decorativas de fondo se salían de su sección y
       algunas quedaban encima de los botones.
   3 · La firma de la portada caía sobre el indicador «Desliza».
   4 · El sello de la portada del podcast tapaba su propio texto.    */


/* ── 2 · Las palabras de fondo, en su sitio y detrás ───────────── */

:root .fragmento{
  z-index:0;                 /* nunca por delante del contenido */
  max-inline-size:100%;
  pointer-events:none;
}
/* El contenido de esas secciones, por delante. */
:root .boletin__grid, :root .diez__grid, :root .pod-t3__grid,
:root .pod-abre__grid, :root .llamados .wrap, :root .llamados .shell{
  position:relative; z-index:2;
}

/* «Abrí» en la portada duplicaba la frase que ya se lee al lado y
   además caía sobre los dos botones. Fuera: la portada no pierde
   nada y gana aire. */
:root .portada__fondo{ display:none }

/* «Hola» se salía 63 px por abajo del bloque rosa. Se sube y se
   apaga un punto: es textura, no un titular. */
:root .boletin__fondo{
  inset-block-end:auto; inset-block-start:50%;
  translate:0 -50%;
  font-size:clamp(7rem, 18vw, 15rem);
  opacity:.09;
}

/* «10» tapaba el botón de apartar lugar. Se va al margen. */
:root .diez__fondo{
  inset-inline-end:-.06em;
  font-size:clamp(8rem, 20vw, 17rem);
  opacity:.10;
}
:root .pod-t3__fondo{ opacity:.10 }
:root .pod-abre__fondo{
  inset-block-start:auto; inset-block-end:-.1em;
  font-size:clamp(6rem, 15vw, 12rem); opacity:.05;
}


/* ── 3 · La firma de la portada, lejos del «Desliza» ───────────── */
:root .portada__firma{
  inset-block-end:auto;
  inset-block-start:clamp(5.5rem, 12vh, 8rem);
  inset-inline-end:clamp(1.25rem, 5vw, 4rem);
  font-size:clamp(1.3rem, 2.4vw, 2rem);
  rotate:-5deg;
}
@media (max-width:719px){
  :root .portada__firma{ display:none }   /* en móvil no cabe sin estorbar */
}


/* ── 4 · El sello de la portada del podcast ────────────────────── */
:root .cover__mark{ z-index:0; opacity:.5 }
:root .cover__kicker, :root .cover__title{ position:relative; z-index:2 }


/* ── 5 · Y una red de seguridad para los titulares ─────────────
   La animación de máscara recorta lo que sobresalga. Si un titular
   crece más que su caja —por una traducción larga, por una tipografía
   que tarde en cargar— se vería cortado. Con esto, nunca. */
:root [data-mask]{ overflow:clip; overflow-clip-margin:.35em }
:root h1, :root h2, :root h3{ overflow-wrap:break-word }


/* ── Las bandas que se sacaron de las rejillas ──────────────────
   Tres piezas estaban metidas como hijo de más dentro de rejillas
   de dos columnas de Astro. Eso descuadraba la fila entera y dejaba
   media página vacía. Ahora cada una tiene su propio bloque. */
:root .mat-banda .mat-retrato,
:root .lbyn-banda .lbyn-collage,
:root .im-banda .im-retrato{ margin-block:0 }
:root .mat-banda .mat-retrato{ max-inline-size:min(100%, 760px) }
:root .im-banda .im-retrato{ max-inline-size:min(100%, 820px) }


/* ═══ 16 · EL TAMAÑO DE LAS FOTOGRAFÍAS ════════════════════════════
   Medido en el sitio publicado: la rejilla de «Una mujer, varios
   llamados» tenía filas de 569, 274 y 864 px. Casi una pantalla por
   celda, y las que ocupaban seis columnas quedaban en tiras de 6:1
   donde no se distinguía nada.

   El error fue mío: le di a cada celda una proporción propia, pero
   las celdas tienen anchos muy distintos según cuántas columnas
   ocupen. Una proporción 4:3 en una celda de 1153 px de ancho son
   865 px de alto.

   La corrección: la rejilla manda la altura de la fila, no la foto.
   Tres columnas iguales, filas de altura fija, y las imágenes
   rellenan por recorte. Así todas las piezas se parecen y ninguna
   se dispara.                                                       */

:root .llamados__rejilla{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-auto-rows:clamp(160px, 17vw, 240px);
}
:root .llamado--familia  { grid-column:span 1; grid-row:span 2 }
:root .llamado--ensena,
:root .llamado--escenario,
:root .llamado--podcast,
:root .llamado--escribe  { grid-column:span 1; grid-row:span 1 }

:root .llamado__enlace{ block-size:100% }
:root .llamado .pic{ block-size:100%; aspect-ratio:auto }
:root .llamado .pic img{ block-size:100%; inline-size:100%; object-fit:cover }

/* Techo general: ninguna fotografía puede comerse la pantalla.
   Las portadas quedan fuera: ahí la altura es intencional. */
:root figure.pic{ max-block-size:min(72vh, 620px) }
:root .hero figure.pic,
:root .hero__strip figure.pic,
:root .open__media figure.pic{ max-block-size:none }

/* La máscara de animación recortaba 7 px del titular de la portada:
   se comía la base de «Ruiz». Un poco más de aire y desaparece. */
:root [data-mask]{
  overflow:clip; overflow-clip-margin:.5em;
  padding-block-end:.26em; margin-block-end:-.26em;
}

@media (max-width:899px){
  :root .llamados__rejilla{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
  :root .llamado--familia{ grid-row:span 2 }
}
@media (max-width:719px){
  :root .llamados__rejilla{
    grid-template-columns:1fr;
    grid-auto-rows:clamp(180px, 46vw, 260px);
  }
  :root .llamado--familia{ grid-row:span 1 }
}


/* ═══ 16 · RONDA DE REVISIÓN — AGOSTO 2026 ═════════════════════════
   Correcciones pedidas en la revisión grabada del sitio.
   Todo lo de aquí abajo es de esta ronda; nada de arriba se tocó.  */

/* — 16.1 · EL HUECO ROSA DE LAS FOTOGRAFÍAS ————————————————
   Diagnóstico: cada figura .pic reserva su alto con aspect-ratio y
   pinta el fondo lino; dentro, <picture> es un elemento en línea, así
   que el block-size:100% del <img> no encontraba contra qué medirse y
   caía a auto. La fotografía se dibujaba con su proporción natural
   —casi siempre 16:9— dentro de una caja 4/5, y lo que sobraba era
   esa franja rosa que parecía un error de carga.
   Se veía en Michelle, Inicio, Matrimonio, Conferencias, La Biblia y
   Nosotras, Tienda y Blog. Con dar altura al <picture> se corrige en
   todas de una vez, sin tocar una sola proporción del diseño.        */
:root .pic > picture,
:root .pic > a > picture{
  display:block;
  inline-size:100%;
  block-size:100%;
}
:root .pic img{
  display:block;
  inline-size:100%;
  block-size:100%;
  object-fit:cover;
  object-position:var(--pos, 50% 50%);
}
/* Los marcos sin proporción declarada no deben estirar la imagen. */
:root .pic:not([style*="--ratio"]) img{ block-size:auto; object-fit:contain }

/* — 16.2 · INICIO · el bloque del libro ————————————————————
   La foto lateral era Michelle en una terraza con un café: bonita,
   pero no decía «Amor a prueba de todo». Ahora está el matrimonio
   del que salió el libro, y la nota admite que falta la portada. */
:root .marriage__media-pie{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.5rem .75rem;
  margin-top:var(--space-s); margin-bottom:0;
  color:var(--humo);
  font-size:var(--step--1); line-height:1.5;
  max-width:52ch;
}
:root .marriage__media-pie .pendiente{ flex:none }

/* — 16.3 · MICHELLE · el equipo ————————————————————————————
   Entra Isma y la nota de Javi deja de hablar sólo de plumones. La
   rejilla es auto-fit: con siete integrantes se acomoda sola. Sólo
   hacía falta fijar el aviso de que aún no hay retratos.            */
:root .team__aviso{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.5rem .75rem;
  margin-top:var(--space-s); margin-bottom:0;
  color:var(--humo); font-size:var(--step--1); line-height:1.5;
  max-width:60ch;
}
:root .team__aviso .pendiente{ flex:none }
:root .member__note{ max-width:34ch }

/* — 16.4 · MATRIMONIO · «Diez días juntos» ————————————————
   El cupo pasó a 500 parejas y, sobre todo, dejó de poder leerse como
   un evento presencial: dos sellos bajo el titular, el «dónde» con su
   aclaración y el lede diciéndolo en la primera línea.               */
:root .diez__virtual{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin:var(--space-s) 0 var(--space-m);
}
:root .diez__sello{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.1em; text-transform:uppercase; line-height:1.3;
  padding:.5em .85em; border-radius:999px;
  background:var(--chilli); color:#FFF;
}
:root .diez__sello--zoom{
  background:var(--marfil); color:var(--chilli);
  border:1.5px solid var(--chilli);
}
:root .diez__sello svg{ flex:none }
:root .diez__lede strong{ color:var(--tinta); font-weight:700 }
:root .diez__aclara{
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.08em; text-transform:uppercase; color:var(--humo);
}
:root .diez__form-sub{ margin:-.35rem 0 .25rem; color:var(--humo) }

/* Los estados del registro: obligatorio, error, carga y resultado.  */
:root .field__req{ color:var(--chilli) }
:root .field__opt{
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.08em; text-transform:uppercase; color:var(--humo);
  margin-inline-start:.4em;
}
:root .field__err{
  margin:.15rem 0 0; color:var(--chilli);
  font-size:var(--step--1); line-height:1.4;
}
:root input.is-mal, :root textarea.is-mal{
  border-color:var(--chilli);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--chilli) 18%, transparent);
}
:root .esta-enviando .diez__enviar{ opacity:.7; cursor:progress }
:root .diez__enviar[disabled]{ cursor:progress }
:root .diez__msg{ margin:0 }
:root .diez__msg:empty{ display:none }
:root .diez__msg--mal{ color:var(--chilli); font-weight:700 }
:root .diez__msg--pendiente{
  background:var(--lemon); border:1px solid var(--lemon-borde);
  border-left:4px solid var(--chilli);
  border-radius:var(--radius);
  padding:.7rem .85rem; color:#5A4418; line-height:1.5;
}
:root .diez__msg--pendiente strong{ color:#4A2A08 }
:root .diez__msg--pendiente a{ color:var(--chilli) }

/* — 16.5 · LA BIBLIA Y NOSOTRAS · la portada ————————————————
   Antes la portada era un primer plano de Michelle: el rostro ocupaba
   el ancho entero y el titular caía justo encima. Ahora corre el
   material de la gira —mujeres, mesas, salón lleno—, reencuadrado a
   16:9 desde el reel vertical de Diego. Es un recorte provisional y
   lo dice la etiqueta; el corte horizontal definitivo sigue pendiente.

   El video no lleva audio, se repite, no entra al orden de tabulación
   y se detiene solo si la persona pidió reducir movimiento o está en
   móvil: eso ya lo resuelve el guion de [data-ambient] de la página.
   Si el video no carga, queda la fotografía del mismo encuadre.      */
:root .vid--gira .vid__el,
:root .vid--gira .vid__fallback img{ object-position:50% 58% }

/* El metraje de la gira está rodado a contraluz y sale muy claro: en
   crudo, el titular blanco desaparecía. Se le baja un punto la luz y
   se sube el contraste, lo justo para que el texto se sostenga sin
   que la escena se vea apagada.                                     */
:root .vid--gira .vid__el,
:root .vid--gira .vid__fallback img{
  filter:brightness(.94) contrast(1.05) saturate(1.02);
}

/* El velo, reforzado. Antes bajaba a .25 justo en la franja donde
   cae el titular, y sobre metraje a contraluz el blanco se perdía:
   medido, el contraste bajaba a 1.6:1 en los fotogramas más claros.
   Con este perfil el peor fotograma queda por encima de 4.5:1.      */
:root .hero[data-astro-cid-2vg4cjqq] .hero__veil{
  background:
    linear-gradient(180deg,
      rgba(8,6,5,.44) 0%,
      rgba(8,6,5,.34) 20%,
      rgba(8,6,5,.62) 42%,
      rgba(8,6,5,.80) 66%,
      rgba(8,6,5,.92) 100%);
}
:root .hero__title,
:root .hero__line{ text-shadow:0 1px 22px rgba(10,8,7,.6) }
:root .lbyn-oficial__nota{ color:rgba(255,255,255,.9) }

/* — 16.6 · PÓDCAST · el adelanto de la temporada tres ————————
   La sección «El adelanto» mostraba una fotografía del set en el sitio
   donde va el video: parecía un reproductor que no arranca. Ahora hay
   un hueco declarado —el reproductor completo espera en un <template>
   listo para sustituirlo— y la fotografía quedó abajo, dicha como lo
   que es. La etiqueta de pendiente se queda hasta que llegue el
   archivo de Diego.                                                  */
:root .pod-teaser__hueco{
  inline-size:100%;
  min-block-size:clamp(240px, 26vw, 380px);
  align-content:center; gap:var(--space-s);
  margin-block:var(--space-m) var(--space-l);
  text-align:center;
  padding:var(--space-l);
}
:root .pod-teaser__hueco .hueco__que{ font-size:var(--step-1) }
:root .pod-teaser__hueco .hueco__nota{ max-width:44ch }

:root .pod-teaser__player{ margin:var(--space-m) 0 var(--space-l) }
:root .pod-teaser__video{
  inline-size:100%; block-size:auto; display:block;
  aspect-ratio:16 / 9; background:var(--cafe);
  border-radius:var(--radius);
}
:root .pod-teaser__pie{ margin-top:var(--space-s); color:var(--humo) }

/* — 16.7 · IMAGE METHOD · el material fotográfico ————————————
   La banda de apertura llevaba a Michelle en una terraza con un café:
   una fotografía personal, repetida de otra página, que no decía nada
   de una asesoría de imagen y comunicación. En su lugar van dos piezas
   de trabajo real —el recorte de traje negro en sala y la ponencia en
   atril— que sí hablan del oficio. La foto ejecutiva de estudio sigue
   marcada como pendiente: no se inventó ninguna.                     */
:root .im-par{
  display:grid;
  grid-template-columns:minmax(0, .84fr) minmax(0, 1.16fr);
  gap:clamp(1.5rem, 4vw, 3.5rem);
  align-items:end;
}
:root .im-par__recorte,
:root .im-par__foto{ margin:0; min-inline-size:0 }
:root .im-par__recorte .calco img{
  inline-size:100%; block-size:auto;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));
}
:root .im-par__foto .pic{ border-radius:var(--radius); overflow:clip }
:root .im-par__pie{ margin-top:var(--space-s); color:var(--im-silver); max-width:36ch }
:root .im-banda__nota{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .75rem;
  margin-top:var(--space-l); color:var(--im-silver);
  font-size:var(--step--1); line-height:1.5; max-width:64ch;
}
:root .im-banda__nota .pendiente{ flex:none }

@media (max-width:899px){
  :root .im-par{ grid-template-columns:1fr; gap:var(--space-l) }
  :root .im-par__recorte{ max-inline-size:min(70%, 320px); margin-inline:auto }
}

/* La etiqueta de pendiente sobre fondo oscuro. El .soon ya tenía su
   versión; .pendiente se había quedado sin ella y quemaba. */
:root .is-dark .pendiente,
:root .is-im .pendiente,
:root .hero .pendiente{
  background:rgba(255,243,178,.16);
  color:var(--lemon);
  border-color:rgba(255,243,178,.42);
}

/* — 16.8 · EL VELO QUE NUNCA SE PINTÓ ——————————————————————
   Diagnóstico: en las portadas con video ambiental, el <video> lleva
   z-index:1 y .hero__veil se había quedado en auto. Como el .vid no
   abre contexto de apilamiento propio, el video subía por encima del
   velo y lo tapaba entero: pintarlo de rojo sólido no cambiaba un
   solo píxel. Por eso el titular blanco caía directo sobre metraje a
   contraluz —1,6:1 medido— y se leía a duras penas.
   Con el velo en z-index 2 y el texto en 3, el degradado vuelve a
   hacer su trabajo y el contraste sube por encima de 4,5:1.          */
:root .hero__veil{ z-index:2 }
:root .hero__body{ position:relative; z-index:3 }

/* — 16.9 · CONFERENCIAS · el grupo «Modalidad» ————————————————
   El rótulo era un <label for="f-modalidad"> que no apuntaba a ningún
   elemento —no existe ese id— y el role="radiogroup" se quedaba sin
   nombre accesible. Ahora el rótulo es un <span> con id propio y el
   grupo lo referencia. Se le da el mismo aspecto que a los demás.   */
:root .field__rotulo{
  display:block;
  font-family:var(--font-ui);
  font-size:var(--step--2);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--humo);
  margin-block-end:.35rem;
}

/* — 16.10 · LOS CAMPOS QUE FALTAN, SEÑALADOS ————————————————
   Conferencias y contacto decían «faltan algunos datos obligatorios»
   sin marcar cuáles. La clase .ya-se-intento se pone en el primer
   envío: a partir de ahí el campo vacío se ve, no se adivina.       */
:root form.ya-se-intento :invalid{
  border-color:var(--chilli);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--chilli) 18%, transparent);
}
:root form.ya-se-intento .radios:has(:invalid){
  outline:2px solid color-mix(in srgb, var(--chilli) 45%, transparent);
  outline-offset:4px; border-radius:4px;
}

/* — 16.11 · CHECKOUT · el paso de envío sin conectar ——————————
   /api/shipping-quote no existe todavía, así que la cotización nunca
   volvía: el panel se quedaba en «Cotizando…» y el botón de pago,
   deshabilitado, sin decir por qué. No se simula una tarifa ni se
   deja pasar al pago; se explica el tope y se ofrece salida.        */
:root .rates__sin{
  display:grid; gap:var(--space-xs);
  background:var(--ballet-claro);
  border:1px solid var(--rosa);
  border-left:4px solid var(--chilli);
  border-radius:var(--radius);
  padding:clamp(.9rem, 2vw, 1.35rem);
  color:#5A3B44;
}
:root .rates__sin p{ margin:0; max-width:60ch }
:root .rates__sin code{
  font-size:.92em; background:var(--marfil);
  border:1px solid rgba(26,18,16,.14); border-radius:3px; padding:.1em .35em;
}

/* ========================================================================
   Ajustes de agosto 2026 · huecos, fotos que tapaban texto y portadas reales
   ======================================================================== */

/* Matrimonio · portada real del libro, con la sombra blush que ya tenía. */
:root .book__foto{ margin:0; max-inline-size:340px }
:root .book__foto img{
  display:block; inline-size:100%; block-size:auto; border-radius:2px;
  box-shadow:22px 22px 0 -6px var(--blush), 0 18px 42px -20px rgba(0,0,0,.5);
}
@media (max-width:900px){
  :root .book__foto{ max-inline-size:min(62vw, 300px); margin-inline:auto }
}

/* Matrimonio · el retrato deja de estar solo: dos columnas reales. */
:root .mat-banda__grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}
:root .mat-banda__grid .mat-retrato{ margin-block-end:0 }
:root .mat-banda__texto .kicker{ margin-block-end:var(--space-xs) }
:root .mat-banda__texto .body{ max-inline-size:46ch }
@media (max-width:900px){
  :root .mat-banda__grid{ grid-template-columns:1fr; gap:var(--space-l) }
}

/* Inicio · fuera el recorte de Michelle: caía encima de las tarjetas y
   les comía el título. Las tarjetas se ven mejor solas. */
:root .llamados__calco{ display:none }

/* Podcast · la portada del hero ya no es tipografía dibujada: es la foto
   del podcast, cuadrada y con la misma cinta de siempre. */
:root .pod-portada{ margin:0; max-inline-size:380px; position:relative }
:root .pod-portada img{
  display:block; inline-size:100%; block-size:auto; aspect-ratio:1;
  object-fit:cover; border-radius:2px;
  box-shadow:0 22px 48px -22px rgba(0,0,0,.55);
}
@media (max-width:899px){
  :root .pod-portada{ max-inline-size:min(72vw, 340px) }
}

/* Podcast · la foto del set ocupaba media fila y dejaba el resto en
   blanco. Ahora va a todo el ancho, con su pie debajo. */
:root .pod-set{ inline-size:100%; max-inline-size:none; margin-block-start:var(--space-l) }
:root .pod-set .pic{ inline-size:100% }

/* La Biblia y Nosotras · el collage no tenía jerarquía: tres fotos del
   mismo tamaño, cortadas, y media fila vacía. Ahora manda una foto
   principal y las otras dos van debajo, a mitades exactas. */
:root .lbyn-collage__c{
  grid-column:span 6; order:-1;
  margin-block-end:clamp(.4rem, 1.2vw, .9rem);
}
:root .lbyn-collage__c .pic{ aspect-ratio:21 / 9 }
:root .lbyn-collage__a,
:root .lbyn-collage__b{ grid-column:span 3; align-self:stretch }
:root .lbyn-collage__a .pic,
:root .lbyn-collage__b .pic{ aspect-ratio:3 / 2 }
:root .lbyn-collage__pie{
  grid-column:1 / -1;
  margin-block-start:var(--space-s);
  color:var(--humo); font-size:var(--step--1);
  max-inline-size:56ch;
}
/* el recorte caía sobre las fotos: se fue al manifiesto, donde había
   una columna vacía esperándolo */

@media (max-width:899px){
  :root .lbyn-collage__c{ grid-column:1 / -1 }
  :root .lbyn-collage__a, :root .lbyn-collage__b{ grid-column:span 2 }
  :root .lbyn-collage__c .pic{ aspect-ratio:16 / 9 }
}
@media (max-width:719px){
  :root .lbyn-collage__c, :root .lbyn-collage__a, :root .lbyn-collage__b{ grid-column:1 / -1 }
  :root .lbyn-collage__c .pic{ aspect-ratio:4 / 3 }
  :root .lbyn-collage__a .pic, :root .lbyn-collage__b .pic{ aspect-ratio:4 / 3 }
}

/* Afinados finales de la revisión de agosto 2026. */

/* El collage pasó de div a figure: sin el margen que trae el navegador. */
:root .lbyn-collage{ margin-inline:0 }
/* La principal va derecha; las dos de abajo conservan su inclinación. */
:root .lbyn-collage__c.girada{ rotate:0deg }

/* La Biblia y Nosotras · el manifiesto tenía la columna izquierda vacía;
   ahí va el recorte de Michelle con su Biblia y las flores. */
:root .manifest__lado{
  display:grid; align-content:start; gap:var(--space-m);
}
:root .manifest__recorte{
  position:relative; isolation:isolate;
  display:block; inline-size:min(100%, 260px);
  rotate:-2deg;
}
/* el medio círculo: la base termina justo donde se corta la foto y la
   cúpula sube por detrás; la cabeza y las flores quedan fuera del color */
:root .manifest__recorte::before{
  content:""; position:absolute; z-index:-1;
  inset-inline:-9%;
  inset-block:13% 0;
  background:var(--ballet);
  border-radius:999px 999px 0 0;
}
:root .manifest__recorte img{
  position:relative;
  display:block; inline-size:100%; block-size:auto;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.16));
}
@media (max-width:899px){
  :root .manifest__lado{
    grid-template-columns:auto minmax(0,1fr);
    align-items:center; gap:var(--space-l);
  }
  :root .manifest__recorte{ inline-size:min(46vw, 200px); order:-1 }
}
@media (max-width:519px){
  :root .manifest__recorte{ display:none }
}

/* La Biblia y Nosotras · el video de la portada se recortaba tanto que
   sólo se veía el suéter. Encuadre un poco más alto y menos apretado. */
:root .vid--gira .vid__el,
:root .vid--gira .vid__fallback img{ object-position:50% 42% }

/* ==========================================================================
   Contenido incrustado real (YouTube, Spotify)
   Marco editorial: nada de iframe pegado. Portada con foto de verdad,
   el reproductor entra encima cuando se pide, y si la plataforma falla
   queda una tarjeta con el enlace, nunca un hueco blanco.
   ========================================================================== */
:root .embed{
  position:relative;
  border-radius:var(--radius);
  overflow:clip;
  background:var(--cafe);
  aspect-ratio:var(--embed-ar, 16 / 9);
}
:root .embed--alto{ aspect-ratio:auto; block-size:352px; background:transparent }

:root .embed__marco{ position:absolute; inset:0 }
:root .embed__marco iframe{
  inline-size:100%; block-size:100%; border:0; display:block;
}

/* La portada: foto real + botón. Se va cuando el reproductor carga. */
:root .embed__portada{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
  inline-size:100%; padding:0; border:0; cursor:pointer;
  background:none; color:#FFF; text-align:center;
  transition:opacity .5s var(--ease-out), visibility .5s;
}
:root .embed__portada img{
  position:absolute; inset:0; z-index:0;
  inline-size:100%; block-size:100%; object-fit:cover;
}
:root .embed__portada::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(21,14,12,.72), rgba(21,14,12,.18) 60%, rgba(21,14,12,.34));
}
:root .embed__portada-txt{
  position:relative; z-index:2;
  display:grid; justify-items:center; gap:.7rem;
}
:root .embed__glifo{
  display:grid; place-items:center;
  inline-size:clamp(56px, 7vw, 74px); aspect-ratio:1;
  border-radius:50%;
  background:var(--chilli); color:#FFF;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.7);
  transition:scale .4s var(--ease-out);
}
:root .embed__portada:hover .embed__glifo,
:root .embed__portada:focus-visible .embed__glifo{ scale:1.07 }
:root .embed__rotulo{
  font-family:var(--font-ui); font-size:var(--step--1);
  letter-spacing:.16em; text-transform:uppercase;
}
:root .embed__portada:focus-visible{ outline:3px solid var(--rosa); outline-offset:-4px }

/* Estados */
:root .embed.is-loaded .embed__portada,
:root .embed.is-unavailable .embed__portada{ opacity:0; visibility:hidden }

:root .embed__cargando{
  position:absolute; inset:0; z-index:3;
  display:none; place-items:center;
  background:rgba(21,14,12,.55);
  color:#F6ECE4; font-family:var(--font-ui);
  font-size:var(--step--1); letter-spacing:.14em; text-transform:uppercase;
}
:root .embed.is-loading .embed__cargando{ display:grid }

/* Si la plataforma no responde: tarjeta editorial, no un error técnico. */
:root .embed__respaldo{
  position:absolute; inset:0; z-index:4;
  display:none; align-content:center; justify-items:start;
  gap:var(--space-s);
  padding:clamp(1.4rem, 4vw, 2.6rem);
  background:var(--cafe); color:#F6ECE4;
}
:root .embed.is-unavailable .embed__respaldo{ display:grid }
:root .embed__respaldo p{ margin:0; max-inline-size:44ch; color:#E7D9D2 }

/* ── El bloque del podcast ─────────────────────────────────────────── */
:root .escucha{ padding-block:clamp(2.5rem, 6vw, 4.5rem) }
:root .escucha__cab{ margin-block-end:var(--space-l) }
:root .escucha__grid{
  display:grid; gap:clamp(1.5rem, 4vw, 3rem);
  grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr);
  align-items:start;
}
:root .escucha__pieza{ display:grid; gap:var(--space-s) }
:root .escucha__et{
  display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
  font-family:var(--font-ui); font-size:var(--step--1);
  letter-spacing:.16em; text-transform:uppercase; color:var(--humo);
}
:root .escucha__et a{ color:var(--chilli); text-underline-offset:.25em }
:root .escucha__nota{ color:var(--humo); font-size:var(--step--1); margin:0 }

@media (max-width:899px){
  :root .escucha__grid{ grid-template-columns:1fr }
  :root .embed--alto{ block-size:232px }
}

/* Matrimonio · «Favoritos de Michelle»: la selección real de Amazon. */
:root .favoritos__grid{
  display:grid; gap:clamp(1.8rem, 5vw, 4rem);
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  align-items:center;
}
:root .favoritos__texto{ display:grid; justify-items:start; gap:var(--space-s) }
:root .favoritos__body{ max-inline-size:44ch }
:root .favoritos__legal{ color:var(--humo); font-size:var(--step--1); margin:0 }
:root .favoritos__foto{ margin:0 }
:root .favoritos__foto img{
  display:block; inline-size:100%; block-size:auto;
  border-radius:var(--radius);
}
@media (max-width:899px){
  :root .favoritos__grid{ grid-template-columns:1fr }
}

/* ==========================================================================
   Blog en vivo · entradas reales traídas de bymichelleruiz.com
   ========================================================================== */
:root .bviv__cab{
  display:grid; gap:var(--space-m);
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  align-items:end;
  margin-block-end:var(--space-l);
}
:root .bviv__lead{ margin:0; color:var(--humo); max-inline-size:46ch }
:root .bviv__lead a{ color:var(--chilli) }

:root .bviv__grid{
  display:grid; gap:clamp(1.1rem, 2.5vw, 2rem);
  grid-template-columns:repeat(3, minmax(0, 1fr));
  margin:0; padding:0; list-style:none;
}
:root .bviv__item{ margin:0 }
:root .bviv__link{
  display:grid; gap:var(--space-s);
  text-decoration:none; color:inherit; block-size:100%;
}
:root .bviv__media{
  border-radius:var(--radius); overflow:clip;
  aspect-ratio:4 / 5; background:var(--ballet-claro);
}
:root .bviv__media img{
  inline-size:100%; block-size:100%; object-fit:cover; display:block;
  transition:scale .7s var(--ease-out);
}
:root .bviv__link:hover .bviv__media img{ scale:1.04 }
:root .bviv__link:focus-visible{ outline:3px solid var(--chilli); outline-offset:4px }
:root .bviv__pie{ display:grid; gap:.35rem }
:root .bviv__fecha{
  margin:0; color:var(--humo);
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.14em; text-transform:uppercase;
}
:root .bviv__t{
  margin:0; font-family:var(--font-display);
  font-size:var(--step-1); line-height:1.14;
}
:root .bviv__link:hover .bviv__t{ color:var(--chilli) }
:root .bviv__resumen{ margin:0; color:var(--humo); font-size:var(--step--1) }

/* Esqueleto muy sutil mientras llega el feed. */
:root .bviv__hueso{
  border-radius:var(--radius);
  aspect-ratio:4 / 5;
  background:linear-gradient(100deg, var(--ballet-claro) 30%, #FFF4F6 50%, var(--ballet-claro) 70%);
  background-size:220% 100%;
  animation:bviv-latido 1.9s ease-in-out infinite;
}
@keyframes bviv-latido{ to{ background-position:-120% 0 } }
@media (prefers-reduced-motion:reduce){ :root .bviv__hueso{ animation:none } }

:root .bviv__cargando,
:root .bviv__respaldo{ display:none }
:root .bviv.is-loading .bviv__cargando{ display:block; margin-block-start:var(--space-m); color:var(--humo) }
:root .bviv.is-unavailable .bviv__grid,
:root .bviv.is-unavailable .bviv__mas{ display:none }
:root .bviv.is-unavailable .bviv__respaldo{
  display:grid; justify-items:start; gap:var(--space-s);
  padding:clamp(1.5rem, 4vw, 2.5rem);
  border-radius:var(--radius);
  background:var(--ballet-claro);
}
:root .bviv__mas{ margin-block-start:var(--space-l) }

@media (max-width:899px){
  :root .bviv__cab{ grid-template-columns:1fr }
  :root .bviv__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (max-width:559px){
  :root .bviv__grid{ grid-template-columns:1fr }
  :root .bviv__media{ aspect-ratio:16 / 10 }
}

/* Blog · encabezado de las entradas propias del sitio, que van después
   de las que llegan de bymichelleruiz.com. */
:root .list__h{ margin:.2rem 0 var(--space-l) }

/* La tarjeta ahora es un botón: abre la entrada aquí, no manda a otro sitio. */
:root .bviv__link{
  appearance:none; border:0; background:none; padding:0;
  font:inherit; color:inherit; text-align:start; cursor:pointer;
  inline-size:100%;
}
:root .bviv__leer{
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.16em; text-transform:uppercase; color:var(--chilli);
  margin-block-start:.2rem;
}
:root .bviv__link:hover .bviv__leer{ text-decoration:underline; text-underline-offset:.3em }

/* ==========================================================================
   El lector: la entrada completa, dentro de la página
   ========================================================================== */
:root.blector-abierto{ overflow:hidden }

:root .blector{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center;
  padding:clamp(.75rem, 3vw, 2.5rem);
}
:root .blector[hidden]{ display:none }

:root .blector__velo{
  position:absolute; inset:0;
  background:rgba(21,14,12,.62);
  backdrop-filter:blur(3px);
  animation:blector-vela .35s var(--ease-out) both;
}
@keyframes blector-vela{ from{ opacity:0 } }

:root .blector__hoja{
  position:relative;
  inline-size:min(100%, 720px);
  max-block-size:min(92vh, 1000px);
  overflow:auto; overscroll-behavior:contain;
  padding:clamp(2rem, 5vw, 3.4rem);
  border-radius:var(--radius);
  background:var(--crema);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55);
  animation:blector-sube .45s var(--ease-out) both;
}
@keyframes blector-sube{ from{ opacity:0; translate:0 18px } }
@media (prefers-reduced-motion:reduce){
  :root .blector__velo, :root .blector__hoja{ animation:none }
}
:root .blector__hoja:focus{ outline:none }

:root .blector__cerrar{
  position:sticky; inset-block-start:0; float:inline-end;
  z-index:2;
  display:grid; place-items:center;
  inline-size:40px; aspect-ratio:1;
  border:0; border-radius:50%; cursor:pointer;
  background:var(--ballet-claro); color:var(--cafe);
  transition:background .25s var(--ease-out);
}
:root .blector__cerrar:hover{ background:var(--ballet) }
:root .blector__cerrar:focus-visible{ outline:3px solid var(--chilli); outline-offset:2px }

:root .blector__fecha{
  margin:0 0 .4rem; color:var(--humo);
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.16em; text-transform:uppercase;
}
:root .blector__t{
  margin:0 0 var(--space-m);
  font-family:var(--font-display);
  font-size:clamp(1.7rem, 4.2vw, 2.6rem); line-height:1.08;
  max-inline-size:22ch;
}

/* El texto que llega de Blogger, vestido con la tipografía de la casa. */
:root .blector__texto{ color:var(--cafe) }
:root .blector__texto p{ margin:0 0 1.05em; line-height:1.7 }
:root .blector__texto h1, :root .blector__texto h2,
:root .blector__texto h3, :root .blector__texto h4{
  font-family:var(--font-display); line-height:1.16;
  margin:1.8em 0 .5em; font-size:var(--step-1);
}
:root .blector__texto img{
  display:block; inline-size:100%; block-size:auto;
  margin:1.6em 0; border-radius:var(--radius);
}
:root .blector__texto a{ color:var(--chilli) }
:root .blector__texto ul, :root .blector__texto ol{ margin:0 0 1.05em 1.2em }
:root .blector__texto li{ margin-block-end:.4em }
:root .blector__texto blockquote{
  margin:1.6em 0; padding-inline-start:1.1em;
  border-inline-start:3px solid var(--rosa);
  font-style:italic; color:var(--humo);
}
:root .blector__texto hr{
  border:0; border-block-start:1px solid var(--ballet);
  margin:2em 0;
}

:root .blector__pie{
  margin-block-start:var(--space-l);
  padding-block-start:var(--space-m);
  border-block-start:1px solid var(--ballet);
  color:var(--humo); font-size:var(--step--1);
}
:root .blector__pie a{ color:var(--chilli) }

@media (max-width:559px){
  :root .blector{ padding:0 }
  :root .blector__hoja{
    max-block-size:100vh; block-size:100vh;
    border-radius:0;
  }
}

/* Sus entradas están maquetadas con <div> y <br> (venían de Word).
   Se les da el mismo aire que a un párrafo para que se lean bien. */
:root .blector__texto div{ margin:0 0 1.05em; line-height:1.7 }
:root .blector__texto div:empty{ display:none }
:root .blector__texto b, :root .blector__texto strong{ color:var(--cafe) }

/* Blog · la apertura: donde estaba el cuadro rosa del video pendiente
   ahora va una foto de ella escribiendo. */
:root .blog-abre__foto{ margin:var(--space-l) 0 0 }
:root .blog-abre__foto img{
  display:block; inline-size:100%; block-size:auto;
  border-radius:var(--radius);
  aspect-ratio:21 / 9; object-fit:cover; object-position:50% 42%;
}
@media (max-width:899px){
  :root .blog-abre__foto img{ aspect-ratio:16 / 10 }
}
@media (max-width:559px){
  :root .blog-abre__foto img{ aspect-ratio:4 / 3 }
}

/* ==========================================================================
   Tienda · el instructivo para comprar
   ========================================================================== */
:root .comprar__cab{ margin-block-end:var(--space-l) }
:root .comprar__pasos{
  display:grid; gap:clamp(1.2rem, 3vw, 2.2rem);
  grid-template-columns:repeat(4, minmax(0, 1fr));
  margin:0; padding:0; list-style:none; counter-reset:none;
}
:root .paso{
  display:grid; align-content:start; gap:.5rem;
  padding-block-start:var(--space-s);
  border-block-start:2px solid var(--ballet);
}
:root .paso__n{
  font-family:var(--font-ui); font-size:var(--step--1);
  letter-spacing:.18em; color:var(--chilli);
}
:root .paso__t{
  margin:0; font-family:var(--font-display);
  font-size:var(--step-1); line-height:1.14;
}
:root .paso__b{ margin:0; color:var(--humo); font-size:var(--step--1); line-height:1.65 }

:root .comprar__fuera{
  margin-block-start:var(--space-l);
  color:var(--humo); max-inline-size:60ch;
}
:root .comprar__fuera a{ color:var(--chilli) }

@media (max-width:1023px){
  :root .comprar__pasos{ grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (max-width:559px){
  :root .comprar__pasos{ grid-template-columns:1fr }
}

/* ==========================================================================
   Ofrendar · la pantalla del QR de la arena
   Se abre en el teléfono, en medio de una reunión, con poca luz y prisa:
   un paso a la vez, botones grandes y el pulgar llega a todo.
   ========================================================================== */
:root .ofr{
  display:grid; align-items:center;
  min-block-size:calc(100svh - 88px);
  padding-block:clamp(1.5rem, 6vw, 4rem);
  background:var(--crema);
}
:root .ofr__hoja{
  display:grid; justify-items:center; gap:var(--space-m);
  text-align:center; max-inline-size:560px;
}
:root .ofr__kicker{ margin:0 }
:root .ofr__h{
  margin:0; font-family:var(--font-display);
  font-size:clamp(2rem, 7.5vw, 3.2rem); line-height:1.04;
}

/* Los tres puntos del recorrido. */
:root .ofr__barra{
  display:flex; gap:.5rem; align-items:center;
  margin:.2rem 0 0; padding:0; list-style:none;
}
:root .ofr__punto{
  display:grid; gap:.4rem; justify-items:center;
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.14em; text-transform:uppercase; color:var(--humo);
}
:root .ofr__punto::before{
  content:""; inline-size:34px; block-size:3px; border-radius:2px;
  background:var(--ballet);
}
:root .ofr__punto.is-aqui{ color:var(--chilli) }
:root .ofr__punto.is-aqui::before,
:root .ofr__punto.is-hecho::before{ background:var(--chilli) }
:root .ofr__punto[hidden]{ display:none }

/* Un paso a la vez. */
:root .ofr__paso{
  display:grid; justify-items:center; gap:var(--space-m);
  inline-size:100%;
}
:root .ofr__paso[hidden]{ display:none }
:root .ofr__paso:focus{ outline:none }

/* Campos */
:root .ofr__campo{ display:grid; gap:.5rem; inline-size:100%; text-align:start }
:root .ofr__label{
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.16em; text-transform:uppercase; color:var(--humo);
}
:root .ofr__label em{ font-style:normal; opacity:.65; text-transform:none; letter-spacing:.04em }
:root .ofr__label--suelto{ margin:0; justify-self:start }
:root .ofr__input{
  inline-size:100%; padding:.9rem 1rem;
  font:inherit; font-size:var(--step-0); color:var(--cafe);
  background:#FFF; border:1px solid var(--ballet);
  border-radius:calc(var(--radius) / 1.6);
}
:root .ofr__input::placeholder{ color:#B9A69F }
:root .ofr__input:focus-visible{ outline:3px solid var(--rosa); outline-offset:1px; border-color:var(--rosa) }
:root .ofr__area{ resize:vertical; min-block-size:110px; line-height:1.6 }

/* Montos */
:root .ofr__montos{
  display:grid; gap:clamp(.6rem, 2vw, .9rem);
  grid-template-columns:repeat(2, minmax(0, 1fr));
  inline-size:100%; margin:0; padding:0; list-style:none;
}
:root .ofr__monto{
  inline-size:100%;
  display:grid; align-content:center; justify-items:center; gap:.15rem;
  min-block-size:clamp(78px, 20vw, 100px);
  padding:var(--space-s);
  border:2px solid var(--ballet); border-radius:var(--radius);
  background:#FFF; color:var(--cafe); cursor:pointer;
  font:inherit;
  transition:border-color .2s var(--ease-out), background .2s var(--ease-out), translate .2s var(--ease-out);
}
:root .ofr__monto:hover{ border-color:var(--rosa); translate:0 -2px }
:root .ofr__monto.is-elegido{
  background:var(--chilli); border-color:var(--chilli); color:#FFF;
}
:root .ofr__monto:focus-visible{ outline:3px solid var(--chilli); outline-offset:2px }
:root .ofr__cifra{
  font-family:var(--font-display);
  font-size:clamp(1.4rem, 5.5vw, 1.9rem); line-height:1.05;
}
:root .ofr__moneda{
  font-family:var(--font-ui); font-size:var(--step--2);
  letter-spacing:.16em; opacity:.75;
}
:root .ofr__libre{ margin:0; inline-size:100% }
:root .ofr__libre[hidden]{ display:none }
:root .ofr__monto--libre{ min-block-size:64px }
:root .ofr__monto--libre .ofr__cifra{ font-size:var(--step-0) }
:root .ofr__monto--libre .ofr__moneda{ text-transform:none; letter-spacing:.04em }

/* Botones del recorrido */
:root .ofr__seguir, :root .ofr__pagar{ inline-size:100%; justify-content:center }
:root .ofr__seguir[disabled]{ opacity:.4; cursor:not-allowed }
:root .ofr__acciones{ display:grid; gap:.6rem; inline-size:100%; justify-items:center }
:root .ofr__acciones .btn{ inline-size:100%; justify-content:center }
:root .ofr__texto-btn{
  border:0; background:none; padding:.4rem; cursor:pointer;
  font-family:var(--font-ui); font-size:var(--step--1);
  color:var(--humo); text-decoration:underline; text-underline-offset:.3em;
}
:root .ofr__texto-btn:hover{ color:var(--chilli) }
:root .ofr__atras{ justify-self:center }

:root .ofr__resumen{
  margin:0; padding:.6rem 1.1rem;
  border-radius:100px; background:var(--ballet-claro);
  font-family:var(--font-ui); font-size:var(--step--1);
  letter-spacing:.1em; color:var(--cafe);
}

/* Métodos de pago: se anuncian, no se dibujan. Los dibuja Stripe. */
:root .ofr__metodos{
  display:grid; gap:.5rem; inline-size:100%;
  margin:0; padding:0; list-style:none;
}
:root .ofr__metodo{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.85rem 1rem;
  border:1px solid var(--ballet); border-radius:calc(var(--radius) / 1.6);
  background:#FFF; text-align:start;
}
:root .ofr__metodo-n{ font-family:var(--font-display); font-size:var(--step-0) }
:root .ofr__metodo-b{ font-size:var(--step--2); color:var(--humo) }
:root .ofr__metodos-nota{ margin:0; color:var(--humo); font-size:var(--step--2) }

/* Espera */
:root .ofr__espera{
  display:grid; gap:.5rem; inline-size:100%;
  padding:clamp(1.4rem, 5vw, 2.2rem);
  border-radius:var(--radius); background:var(--ballet-claro);
}
:root .ofr__espera[hidden]{ display:none }
:root .ofr__espera-t{
  margin:0; font-family:var(--font-display);
  font-size:var(--step-1); line-height:1.2;
}
:root .ofr__espera-b{ margin:0; color:var(--humo); font-size:var(--step--1) }

:root .ofr__seguro{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  flex-wrap:wrap; margin:var(--space-s) 0 0;
  color:var(--humo); font-size:var(--step--2); max-inline-size:40ch;
}
:root .ofr__seguro svg{ flex:none; color:var(--chilli) }

@media (max-width:399px){
  :root .ofr__montos{ grid-template-columns:1fr }
  :root .ofr__punto span{ display:none }
}