/* ==========================================================================
   IA Cinema Club · Recomendación de Mita Rodz
   ========================================================================== */

:root {
  --aubergine: #4B2848;
  --aubergine-deep: #2E1729;
  --aubergine-night: #1F0F1C;
  --cream: #F6F0E8;
  --taupe: #D9C8B7;
  --gold: #B07E1E;
  --gold-soft: #D2A65A;
  --cocoa: #4D403B;

  --serif: "Fraunces", "Times New Roman", Georgia, serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(5rem, 12vw, 10rem);
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Type scale for small text (reference: hero "Mita Rodz presenta", 16px). */
  --fs-label: 1rem;                                       /* editorial labels */
  --fs-body: clamp(1.0625rem, 1rem + .2vw, 1.125rem);     /* paragraphs 17 → 18 */
  --fs-card: clamp(1.0625rem, 1.02rem + .15vw, 1.125rem); /* card copy 17 → 18 */
  --fs-note: 1rem;                                        /* notes, minimum 16 */
  --fs-btn: clamp(.9375rem, .9rem + .1vw, 1rem);          /* buttons 15 → 16 */
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--cocoa);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }

em {
  font-style: italic;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

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

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1.25rem; background: var(--cream); color: var(--aubergine);
  border-radius: 999px; text-decoration: none; font-size: var(--fs-note);
}
.skip:focus { top: 1rem; }

.wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Shared type ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .7em;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.eyebrow::before {
  content: "";
  width: 2.25rem; height: 1px;
  background: currentColor;
  opacity: .8;
}
.eyebrow--dark { color: #7E5C17; }  /* ≥4.8:1 on cream and #EDE3D7 */

.dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; display: inline-block;
}

.section-title {
  font-family: var(--serif);
  font-size: clamp(2.125rem, 4.2vw + .5rem, 3.75rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 144;
  color: var(--aubergine);
  margin-top: 1.5rem;
  text-wrap: balance;
}
.section-title em { color: var(--gold); }
.section-title--light { color: var(--cream); }
.section-title--light em { color: var(--gold-soft); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 3.75rem;
  padding: 1.1rem 2.1rem;
  font-family: var(--sans);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: background-color .5s var(--ease), color .5s var(--ease),
              border-color .5s var(--ease), box-shadow .5s var(--ease),
              transform .5s var(--ease);
}
.btn__arrow {
  display: inline-block;
  font-size: 1.1rem;
  letter-spacing: 0;
  transition: transform .5s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(5px); }

@media (max-width: 519px) {
  .btn {
    display: flex;
    width: 100%;
    gap: .75rem;
    padding: 1.1rem 1.25rem;
    letter-spacing: .05em;
    text-align: center;
  }
}
.btn:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 4px; }

/* Deep mustard with white text: 5.6:1 (WCAG AA). */
.btn--gold {
  background: #8A6015;
  color: #FFFFFF;
  border: 2px solid #E4BA72;
  box-shadow: 0 18px 40px -18px rgba(138, 96, 21, .75);
}
.btn--gold:hover { background: #775211; transform: translateY(-2px); }

/* Aubergine buttons: fine gold border, soft shadow, and an occasional light
   sweep across the face. Padding is reduced by the border so sizes don't change. */
.btn--plum {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(1.1rem - 2px) calc(2.1rem - 2px);
  background: var(--aubergine);
  color: #FFFDF8;
  border: 2px solid #E4BA72;
  box-shadow: 0 12px 28px -16px rgba(46, 23, 41, .55), 0 2px 6px rgba(46, 23, 41, .1);
}
.btn--plum::after {              /* light sweep, under the text */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg,
    transparent 38%, rgba(255, 233, 196, .16) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 140% 0;
  animation: plum-sheen 8s var(--ease) 2s infinite;
  pointer-events: none;
}
@keyframes plum-sheen {
  0%       { background-position: 140% 0; }
  22%, 100% { background-position: -40% 0; }
}
.btn--plum:hover {
  transform: translateY(-3px);
  border-color: #F3D49C;
  box-shadow: 0 20px 36px -18px rgba(46, 23, 41, .6), 0 0 0 4px rgba(228, 186, 114, .16);
}
@media (max-width: 519px) {
  .btn--plum { padding: calc(1.1rem - 2px) calc(1.25rem - 2px); }
}

.section-intro {
  margin-top: 1.5rem;
  max-width: 36rem;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--cocoa);
}
.section-head--center { margin: 0 auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .section-intro { margin-left: auto; margin-right: auto; }

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

/* ---------- Film grain ---------- */

.grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Top bar ---------- */

.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1.25rem, 3vw, 2.25rem) var(--gutter);
  padding-top: max(clamp(1.25rem, 3vw, 2.25rem), env(safe-area-inset-top));
  color: var(--cream);
}
.brand { display: inline-flex; flex-direction: column; gap: .2rem; line-height: 1; }
.wordmark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.375rem;
  letter-spacing: .01em;
}
.brand__tag {
  font-size: .6875rem;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .72;
}
.topbar { gap: 1rem; }
.topbar__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .6rem 1.25rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #FFFFFF;
  background: var(--aubergine);
  border: 1px solid rgba(176, 126, 30, .75);
  border-radius: 8px;
  box-shadow: 0 10px 24px -14px rgba(20, 9, 18, .8);
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
/* Same border language as the aubergine buttons (2px, 1px taken from padding). */
.topbar__link {
  border: 2px solid #E4BA72;
  padding: calc(.6rem - 1px) calc(1.25rem - 1px);
  color: #FFFDF8;
  transition: background-color .5s var(--ease), border-color .5s var(--ease),
              box-shadow .5s var(--ease), transform .5s var(--ease);
}
.topbar__link:hover {
  background: #5C3358;
  border-color: #F3D49C;
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -14px rgba(20, 9, 18, .8), 0 0 0 3px rgba(228, 186, 114, .16);
}
.topbar__link:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }

/* Smallest phones: a slightly tighter header so brand and button share one row. */
@media (max-width: 399px) {
  .topbar__link { padding: calc(.6rem - 1px) calc(.85rem - 1px); letter-spacing: .02em; }
  .brand__tag { letter-spacing: .1em; }
}

/* ==========================================================================
   1 · Hero  (mobile first: headline, then photograph)
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--aubergine-night);
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
}

.hero__inner {
  position: relative; z-index: 3;
  order: -1;                      /* headline above the photograph on mobile */
  padding: 7.5rem var(--gutter) 2.5rem;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(75, 40, 72, .9), transparent 70%),
    var(--aubergine-night);
}

/* Larger, calmer eyebrow so it balances the headline: 14px phones → 16px desktop. */
.hero__eyebrow {
  font-size: clamp(.875rem, .8rem + .3vw, 1rem);
  font-weight: 600;
  letter-spacing: .14em;
  row-gap: .35em;
}
.hero__eyebrow::before { width: 2.75rem; }
.hero__eyebrow .nw { white-space: nowrap; }
.hero__eyebrow .dot { width: 5px; height: 5px; }
@media (max-width: 519px) {
  .hero__eyebrow .dot { display: none; }   /* the two parts stack on phones */
}

/* 40px on phones → ~48px tablet → ~55px laptop → ~65px at 1440 → 76px max */
.hero__title {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(2.5rem, 1.75rem + 2.6vw, 4.75rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 144;
  margin-top: 1.5rem;
  max-width: 11.5em;              /* keeps line breaks balanced */
  text-wrap: balance;
  overflow-wrap: normal;
}
.hero__title em { color: var(--gold); font-weight: 350; }

.hero__lead {
  margin-top: 1.5rem;
  max-width: 33.5rem;             /* ~540px reading width */
  font-size: clamp(1rem, .95rem + .3vw, 1.1875rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--cream);
}

.hero .btn { margin-top: 2.25rem; }

/* Hero CTA: muted mustard gold with dark aubergine text (4.9:1, WCAG AA). */
.hero .btn--gold {
  min-height: 52px;
  padding: calc(.9rem - 2px) calc(2rem - 2px);   /* offsets the 2px border: same size */
  border-radius: 8px;
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: .04em;
  box-shadow: 0 14px 32px -18px rgba(138, 96, 21, .6);
}
.hero .btn--gold:hover { transform: translateY(-1px); }

.hero__credit {
  margin-top: 1.5rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(246, 240, 232, .88);
}
.hero__credit .nw { white-space: nowrap; }
.hero__credit .sep { color: var(--gold-soft); margin: 0 .3em; }

.hero__media {
  position: relative; z-index: 1;
  aspect-ratio: 4 / 5;
  margin-top: -2px;
  overflow: hidden;
}
.hero__media::before {          /* blend photo into the headline block */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 35%; z-index: 1;
  background: linear-gradient(var(--aubergine-night), transparent);
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% 20%;
}

.hero__veil { display: none; }
.hero__scroll { display: none; }

@media (min-width: 900px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    justify-content: center;
  }
  .hero__media {
    position: absolute; inset: 0;
    aspect-ratio: auto;
  }
  .hero__media::before { display: none; }
  .hero__media img { object-position: 85% 25%; }

  .hero__veil {
    display: block;
    position: absolute; inset: 0; z-index: 2;
    background:
      linear-gradient(90deg,
        rgba(31, 15, 28, .95) 0%,
        rgba(37, 19, 34, .9) 36%,
        rgba(55, 29, 52, .72) 47%,
        rgba(75, 40, 72, .3) 56%,
        rgba(75, 40, 72, 0) 63%),
      linear-gradient(0deg, rgba(31, 15, 28, .55) 0%, transparent 30%),
      linear-gradient(180deg, rgba(31, 15, 28, .45) 0%, transparent 18%);
  }

  .hero__inner {
    --edge: max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter)));
    background: none;
    padding: 9rem var(--gutter) 6rem var(--edge);
    width: calc(var(--edge) + 620px);
    max-width: 56%;
  }

  .hero__scroll {
    display: block;
    position: absolute; left: var(--gutter); bottom: 2.25rem; z-index: 3;
    width: 1px; height: 3.5rem;
    background: rgba(246, 240, 232, .2);
    overflow: hidden;
  }
  .hero__scroll span {
    position: absolute; left: 0; top: 0; width: 100%; height: 40%;
    background: var(--gold-soft);
    animation: scrollcue 2.8s var(--ease) infinite;
  }
}

/* ==========================================================================
   2 · Lo que puedes crear
   ========================================================================== */

.create {
  padding: clamp(4rem, 9vw, 7.5rem) 0;
  background: var(--cream);
}

.section-head { max-width: 46rem; }

/* Upper level: label + title on the left, intro on the right (desktop). */
.create__head {
  display: grid;
  gap: 1.5rem;
}
.create__label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8B651A;                  /* 4.6:1 on cream */
}
.create__title {
  margin-top: 1.25rem;
  max-width: 13em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.625rem);   /* 34 → 42 → 58px */
  line-height: 1.12;
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 144;
  color: var(--aubergine);
  text-wrap: balance;
}
.create__title em { color: #9B6B17; }
.create__intro {
  max-width: 670px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--cocoa);
}

@media (min-width: 900px) {
  .create__head {
    grid-template-columns: 7fr 5fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: end;
  }
  .create__intro {
    padding-bottom: .5rem;
    padding-left: clamp(1.5rem, 2.5vw, 2.25rem);
    border-left: 1px solid rgba(176, 126, 30, .45);
  }
}

/* Lower level: one aubergine editorial block holding the three applications. */
.columns {
  position: relative;
  display: grid;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: .5rem clamp(1.5rem, 4vw, 3.5rem);
  border-radius: 18px;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(176, 126, 30, .14), transparent 60%),
    var(--aubergine);
  box-shadow: 0 40px 80px -50px rgba(46, 23, 41, .7);
  overflow: hidden;
}

.column {
  padding: 2.25rem 0;
}
.column + .column { border-top: 1px solid #8F718A; }

.column__num {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 2.4rem + 1.4vw, 4rem);           /* 48 → 64px */
  line-height: 1;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 144;
  color: #DDB777;
}
.column__num::after {             /* short gold accent */
  content: "";
  display: block;
  width: 2.5rem; height: 2px;
  margin-top: 1.25rem;
  background: var(--gold);
}
.column__title {
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.35rem + .45vw, 1.8125rem);   /* 24 → 29px */
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #FFFFFF;
  text-wrap: balance;
}
.column p {
  margin-top: .85rem;
  max-width: 32rem;
  font-size: var(--fs-card);
  line-height: 1.6;
  color: #F2E6EC;
}

/* Tablet: number beside the text so lines don't get cramped. */
@media (min-width: 600px) and (max-width: 899px) {
  .column {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    column-gap: 1.5rem;
    align-items: start;
  }
  .column__num { grid-row: span 2; }
  .column__title { margin-top: 0; }
}

@media (min-width: 900px) {
  .columns {
    grid-template-columns: repeat(3, 1fr);
    padding: clamp(2.75rem, 4vw, 3.75rem) clamp(1rem, 2vw, 1.75rem);
  }
  .column {
    padding: 0 clamp(1.5rem, 2.6vw, 2.75rem);
  }
  .column + .column {
    border-top: 0;
    border-left: 1px solid #8F718A;
  }
}

/* ==========================================================================
   3 · El curso
   ========================================================================== */

.course {
  position: relative;
  padding: var(--section-y) 0;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(176, 126, 30, .16), transparent 60%),
    radial-gradient(80% 80% at 0% 100%, rgba(31, 15, 28, .7), transparent 70%),
    var(--aubergine);
  color: var(--cream);
  overflow: hidden;
}

.course__grid {
  position: relative;
  display: grid;
  gap: clamp(3.5rem, 7vw, 6rem);
}

.course__lead {
  margin-top: 1.75rem;
  max-width: 32rem;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--cream);
}

/* Pillars CTA: colors, hover lift and arrow come from .btn / .btn--gold. */
.btn--pillars {
  margin-top: 30px;                /* phones; 36px tablet, 44px desktop below */
  min-height: 50px;
  padding: calc(.85rem - 2px) calc(1.75rem - 2px);
  border-radius: 12px;
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: .04em;
  box-shadow: 0 10px 24px -16px rgba(20, 9, 18, .6);
  animation: cta-glow 9s var(--ease) 3s infinite;
}
@media (min-width: 600px) { .btn--pillars { margin-top: 36px; } }
@media (min-width: 900px) { .btn--pillars { margin-top: 44px; } }

/* Occasional attention cue: a soft gold halo for ~1s every 9s.
   Turned off by the prefers-reduced-motion block below. */
@keyframes cta-glow {
  0%, 86%, 100% { box-shadow: 0 10px 24px -16px rgba(20, 9, 18, .6), 0 0 0 0 rgba(228, 186, 114, 0); }
  93%           { box-shadow: 0 10px 24px -16px rgba(20, 9, 18, .6), 0 0 0 7px rgba(228, 186, 114, .22); }
}

#pillars-title em { font-size: 1.1em; }

.pillars {
  list-style: none;
  margin: 0; padding: 0;
  border-top: 1px solid rgba(217, 200, 183, .22);
}
/* Numbers reuse .column__num from section 02 (size, color, gold accent). */
.pillar {
  padding: 2.25rem 0;
  border-bottom: 1px solid rgba(217, 200, 183, .22);
}
.pillar__label {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1vw + 1.15rem, 1.875rem);
  line-height: 1.2;
  color: var(--cream);
}
.pillar p {
  margin-top: .6rem;
  font-size: var(--fs-card);
  line-height: 1.6;
  color: var(--cream);
}

@media (min-width: 900px) {
  .course__grid {
    grid-template-columns: 5fr 6fr;
    align-items: start;
  }
  .course__intro { position: sticky; top: 4rem; }
  .pillar { padding: 2.75rem 0; }
}

/* From tablet up: number beside the text, same pattern as section 02 on tablet. */
@media (min-width: 600px) {
  .pillar {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    column-gap: 1.5rem;
    align-items: start;
  }
  .pillar .column__num { grid-row: span 2; }
  .pillar__label { margin-top: .35rem; }
}

/* ==========================================================================
   4 · Recomendación
   ========================================================================== */

.closing {
  padding: var(--section-y) 0;
  background: linear-gradient(var(--cream) 0%, #EFE5D9 100%);
}

.closing__grid {
  display: grid;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

.closing__media { margin: 0; }
.closing__frame { position: relative; }
.closing__frame::before {          /* thin gold frame, offset */
  content: "";
  position: absolute;
  inset: 1rem -1rem -1rem 1rem;
  border: 1px solid rgba(176, 126, 30, .55);
  border-radius: 2px;
  z-index: 0;
}
.closing__media img {
  position: relative; z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 66% 30%;
  border-radius: 2px;
  box-shadow: 0 40px 80px -40px rgba(46, 23, 41, .55);
}
.closing__media figcaption {
  position: relative; z-index: 1;
  margin-top: 2rem;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cocoa);
}

.closing__body { margin-top: 2rem; max-width: 34rem; }
.closing__body p + p { margin-top: 1.25rem; }

.closing .btn { margin-top: 2.5rem; }

.disclosure-note {
  margin-top: 2rem;
  padding-top: 1.25rem;
  max-width: 30rem;
  border-top: 1px solid rgba(77, 64, 59, .16);
  max-width: 34rem;
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--cocoa);
}

@media (max-width: 899px) {
  .closing__media { margin-right: 1rem; }
}

@media (min-width: 900px) {
  .closing__grid { grid-template-columns: 5fr 6fr; }
  .closing__media img { aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   4 · Galería cinematográfica
   ========================================================================== */

.gallery {
  padding: var(--section-y) 0;
  background: #EDE3D7;
}

.reels {
  display: grid;
  gap: 3rem;
  max-width: 22rem;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
}

.reel__play {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: var(--aubergine-night);
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 60px -36px rgba(46, 23, 41, .7);
  isolation: isolate;
}
.reel__play img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
}
.reel__play::after {          /* soft vignette so the play button reads */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(31, 15, 28, .1), rgba(31, 15, 28, .45));
}
.reel__icon {
  position: absolute; z-index: 1;
  left: 50%; top: 50%;
  width: 4.25rem; height: 4.25rem;
  margin: -2.125rem 0 0 -2.125rem;
  border-radius: 50%;
  border: 1px solid rgba(246, 240, 232, .7);
  background: rgba(31, 15, 28, .32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color .5s var(--ease), transform .5s var(--ease);
}
.reel__icon::before {         /* play triangle */
  content: "";
  position: absolute;
  left: 54%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: .55rem 0 .55rem .9rem;
  border-color: transparent transparent transparent var(--cream);
}
.reel__time {
  position: absolute; z-index: 1;
  right: .9rem; bottom: .8rem;
  font-size: .875rem; font-weight: 600;
  letter-spacing: .08em;
  color: var(--cream);
}
.reel__play:hover img { transform: scale(1.04); }
.reel__play:hover .reel__icon { background: var(--gold); transform: scale(1.06); }
.reel__play:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Gallery heading: stronger type, scoped so other sections keep their styles. */
.gallery .section-title {
  font-size: clamp(2.125rem, 1.6rem + 2vw, 3.5rem);        /* 34 → 54px */
  line-height: 1.12;
  color: var(--aubergine);
}
.gallery .section-title em { color: #9B6B17; }
.gallery .section-intro {
  max-width: 650px;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--cocoa);
}

.reel__title {
  margin-top: 1.125rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.3rem + .3vw, 1.5rem);       /* 22 → 24px */
  line-height: 1.2;
  color: var(--aubergine);
}
.reel__title::after {              /* short gold accent */
  content: "";
  display: block;
  width: 2.25rem; height: 2px;
  margin-top: .85rem;
  background: var(--gold);
}
.reel p {
  margin-top: .85rem;
  font-size: var(--fs-card);
  line-height: 1.6;
  color: var(--cocoa);
}

.gallery__note {
  margin: clamp(3rem, 6vw, 4rem) auto 0;
  max-width: 40rem;
  text-align: center;
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--cocoa);
}

@media (min-width: 760px) {
  .reels {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 clamp(1.5rem, 3vw, 2.75rem);
    max-width: 1100px;
  }
  /* Subgrid keeps the three descriptions on one line even if a title wraps. */
  .reel {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    align-content: start;
  }
  /* If one title wraps, the others sit on the same baseline row, so the gold
     accents and the descriptions line up across all three cards. */
  .reel__title { align-self: end; }
}

/* ==========================================================================
   5 · Descubre la formación
   ========================================================================== */

.discover {
  padding: var(--section-y) 0;
  background: var(--cream);
}
.discover__inner {
  max-width: 54rem;
  text-align: center;
}
.discover .eyebrow {
  justify-content: center;
}
.discover__title {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 8vw + .5rem, 6.5rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-variation-settings: "opsz" 144;
  color: var(--aubergine);
}
.discover__sub {
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3125rem, 1.2rem + .5vw, 1.6875rem);   /* 21 → 26px */
  line-height: 1.35;
  color: #8F6219;                  /* #93651B nudged darker: 4.7:1 on cream */
  text-wrap: balance;
}
.discover__text {
  margin: 1.5rem auto 0;
  max-width: 650px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--cocoa);
  text-wrap: pretty;               /* no single-word last line */
}

/* Six-step sequence: open editorial row on cream, no boxes.
   Large serif numbers, a short gold accent, then the step word.
   On desktop a fine gold "path" runs above the row with a dot per step. */
.process {
  --step-gold: #A97B2D;            /* soft editorial gold, 3.4:1 on cream (large text) */
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.25rem 1rem;
  margin: 2.75rem auto 0;
  padding: 0;
  max-width: 100%;
}
.process li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--fs-btn);                               /* 15 → 16px */
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--aubergine);
}
.process__num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.75rem, 2.2rem + 1.6vw, 3.75rem);     /* 44 → 60px */
  line-height: 1;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 144;
  color: var(--step-gold);
}
.process__num::after {             /* short accent between number and word */
  content: "";
  display: block;
  width: 1.75rem; height: 1px;
  margin: .9rem auto .85rem;
  background: var(--step-gold);
}
@media (min-width: 520px) {
  .process { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1rem; }
}
@media (min-width: 900px) {
  .process {
    grid-template-columns: repeat(6, 1fr);
    gap: 0 .5rem;
    padding-top: 2.25rem;
    /* a little wider than the text column so the steps breathe */
    --row: min(62rem, calc(100vw - 2 * var(--gutter)));
    width: var(--row);
    max-width: none;
    margin-left: calc((100% - var(--row)) / 2);   /* centred; .reveal owns transform */
  }
  .process::before {               /* the path: fades in and out at the ends */
    content: "";
    position: absolute; left: 0; right: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent, rgba(169, 123, 45, .55) 10%, rgba(169, 123, 45, .55) 90%, transparent);
  }
  .process li::before {            /* one dot per step, sitting on the path */
    content: "";
    position: absolute;
    top: calc(-2.25rem - 3px);
    left: 50%;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--cream);
    border: 1px solid var(--step-gold);
    transform: translateX(-50%);
  }
}

.discover .btn { margin-top: 2.75rem; }

/* ==========================================================================
   6 · Recursos incluidos
   ========================================================================== */

.resources {
  position: relative;
  padding: clamp(4.5rem, 10vw, 8rem) 0;
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(75, 40, 72, .85), transparent 70%),
    var(--aubergine-night);
  color: var(--cream);
  overflow: hidden;
}
.resources .wrap { position: relative; }

.resources__grid {
  display: grid;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid rgba(217, 200, 183, .22);
}
.resource {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 2.25rem 0;
  border-bottom: 1px solid rgba(217, 200, 183, .22);
}
.resource__num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.25rem, 5vw, 4.5rem);
  line-height: .9;
  color: var(--gold-soft);
  font-variation-settings: "opsz" 144;
}
.resource__title {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1vw + 1.15rem, 1.875rem);
  line-height: 1.2;
}
.resource p {
  margin-top: .6rem;
  font-size: var(--fs-card);
  line-height: 1.6;
  color: var(--cream);
}

.resources__note {
  margin-top: 2rem;
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--cream);
}

@media (min-width: 900px) {
  .resources__grid { grid-template-columns: 1fr 1fr; }
  .resource { padding: 2.75rem 2.5rem 2.75rem 0; }
  .resource + .resource {
    padding-left: 2.5rem;
    border-left: 1px solid rgba(217, 200, 183, .22);
  }
}

/* Affiliate-programme perk: a cream panel inside the dark resources section. */
.perk {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 16px;
  border-top: 2px solid var(--gold);
  background: var(--cream);
  color: var(--cocoa);
}
.perk__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);     /* 26 → 36px */
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--aubergine);
  text-wrap: pretty;
}
.perk__title em { color: #8F6219; }
.perk__text {
  max-width: 36rem;
  font-size: var(--fs-card);                              /* 17 → 18px */
  line-height: 1.6;
  color: var(--cocoa);
}
@media (min-width: 900px) {
  .perk {
    grid-template-columns: 5fr 6fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
  .perk__text {
    padding-left: clamp(1.5rem, 2.5vw, 2.25rem);
    border-left: 1px solid rgba(176, 126, 30, .45);
  }
}

/* ---------- Video player (modal) ---------- */

.player {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  overflow: visible;
}
.player::backdrop {
  background: rgba(20, 9, 18, .88);
  backdrop-filter: blur(4px);
}
.player__box {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  width: min(92vw, calc((100svh - 7rem) * 9 / 16));
}
.player__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--cream);
}
.player__title {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.25;
}
.player__close {
  flex: none;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(246, 240, 232, .45);
  background: transparent;
  color: var(--cream);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .3s var(--ease);
}
.player__close:hover { background: rgba(246, 240, 232, .12); }
.player__close:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.player__frame {
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.player__video {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;          /* never crop during playback */
}

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

.footer {
  background: var(--cocoa);
  color: var(--taupe);
  padding: 3.5rem 0 calc(3rem + env(safe-area-inset-bottom));
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
}
.wordmark--small { font-size: 1.25rem; color: var(--cream); }
.footer .brand__tag { font-size: .875rem; opacity: 1; }
.footer__copy {
  font-size: var(--fs-note);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--taupe);                 /* 6:1 on cocoa */
}

/* ==========================================================================
   Motion (subtle, opt-in via .js, respects reduced motion)
   ========================================================================== */

@keyframes scrollcue {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}
@keyframes settle {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

.hero__media img { animation: settle 2.6s var(--ease) both; }

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}