/* Campamento Evermonth · Home reel (index.html)
   Loads after styles.css and halloween-m.css (the shared reel engine:
   shell, slides, steps, rail, sticky bar, labels, cards, beam, stickers, footer).
   This file only sets the home palette and the home slides (.h-*).

   Rules (same as the Halloween reel):
   - One slide = one focal point: a photo or a crest, a few words, one next step.
   - Slides have no own background, border, corners or shadow. Only photos and paper have edges.
   - Background tones fade with scroll: noche (navy) → house color (Casas) → noche →
     bosque (Un día, Padres) → noche. The house tabs change the Casas tone live. */

.h-page {
  --noche: #0a2230;
  --navy: #0a2230;
  --navy-hw: #0d2a38;
  --calabaza: #e8a720;   /* the engine's main accent: brand amber on the home */
  --amber: #e8a720;
  --oxido-claro: #8a100a;
  --tone-noche: 10, 34, 48;
  --tone-bosque: 24, 40, 25;
  --tone-emberclaw: 96, 64, 10;
  --tone-silverspin: 33, 54, 32;
  --tone-jawsreef: 12, 54, 76;
  --tone-braveroar: 102, 16, 10;
}
/* The house tabs change the tone while you look at it: home-m.js adds .h-retone
   for a moment so that change fades. Never during scroll (it would lag behind). */
.h-page .m-shell.h-retone { transition: background-color .5s ease; }

/* A website first: a fast flick may pass several slides, like a normal page.
   Each slide still lands clean at the top (snap), and still plays in. */
.h-page .m-slide { scroll-snap-stop: normal; }

/* ---------- Navbar: the wood sign (styles.css .nav), made dynamic ----------
   Fixed on top of the reel. home-m.js adds .is-hidden on scroll down, removes it on scroll up. */
.h-nav { z-index: 45; top: env(safe-area-inset-top); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.h-nav.is-hidden { transform: translate(-50%, calc(-100% - 40px)); }
.h-nav .nav__rope { height: 24px; }
.h-nav .nav__bar { margin-top: 20px; height: 74px; }
.h-nav .nav__logo img { width: 104px; height: 104px; margin: -16px 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.h-nav .nav__links a { position: relative; padding: 6px 0; }
.h-nav .nav__links a[aria-current] { color: var(--amber); }
.h-nav .nav__links a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--amber); }
.h-nav .btn--amber { color: var(--tinta); }
@media (max-width: 1099px) {
  .h-nav { width: calc(100% - 24px); }
  .h-nav .nav__rope { height: 12px; }
  .h-nav .nav__rope--l { left: 30px; } .h-nav .nav__rope--r { right: 30px; }
  .h-nav .nav__bar { margin-top: 8px; height: 58px; padding: 0 10px 0 12px; }
  .h-nav .nav__logo img { width: 70px; height: 70px; margin: -10px 0; }
  .h-nav .nav__ctas { margin-left: auto; }
  .h-nav .nav__ctas .btn { padding: 11px 14px 9px; font-size: 11px; }
  .h-nav .nav__burger { width: 40px; height: 40px; }
  .h-nav .nav__links a { padding: 14px 20px; }
  .h-nav .nav__links a[aria-current]::after { left: 20px; right: auto; width: 24px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .h-nav { transition: none; } }

/* ---------- Shared pieces, home look ---------- */
.h-page .m-amber { color: var(--papel); }
/* Buttons: pill + hard offset shadow (engine rule in halloween-m.css). Home colors: */
.h-page .btn--amber, .h-page .btn--amber.m-btn { --btn-sh: var(--pergamino); color: var(--tinta); }
.h-page .btn--outline { --btn-sh: var(--amber); }
.h-nav .btn { --btn-sh: var(--tinta); --btn-off: 3px; }
.h-chip {
  align-self: flex-start; background: var(--amber); color: var(--tinta);
  padding: 10px 14px 8px; font-family: var(--f-label); font-weight: 700; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1;
}
.h-link {
  align-self: flex-start; padding: 6px 0;
  font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
}
.h-link:hover { color: var(--papel); }
.h-label--red { color: var(--red); }

/* =========================================================
   01 · Hero: full photo, three paper words, one button
   ========================================================= */
.h-hero .m-slide__in { justify-content: flex-end; padding: 0 var(--gut) calc(104px + env(safe-area-inset-bottom)); }
.h-hero__photo { position: absolute; inset: 0; overflow: hidden; }
.h-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.h-hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,34,48,.55) 0%, rgba(10,34,48,0) 22%, rgba(10,34,48,0) 42%, rgba(10,34,48,.85) 72%, var(--noche) 100%);
}
.h-hero.is-live .h-hero__photo img { animation: m-kenburns 9s ease-out both; }
.h-hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; }
.h-hero__labels { gap: 6px; }
.h-hero__labels .m-label { font-size: clamp(38px, 12.5cqi, 60px); line-height: 1; padding: 10px 16px 6px; }
.h-hero__labels .m-label:nth-child(2) { align-self: center; }
.h-hero__labels .m-label--third { align-self: flex-end; margin: 0; }
.h-hero__sub { font-family: var(--f-label); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--pergamino); }
.h-hero__cta { align-self: flex-start; }

/* =========================================================
   02 · Evermonth: group photo, one big number, three words
   ========================================================= */
.h-que .m-que__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,34,48,0) 45%, var(--bg, var(--noche)) 100%); }
.h-page .m-que__photo img { width: 100%; height: 100%; object-fit: cover; }
.h-que .m-que__photo img { object-position: 50% 72%; }
.h-num { position: absolute; z-index: 1; left: var(--gut); bottom: 4px; display: flex; align-items: flex-end; gap: 12px; }
.h-num b { font-size: clamp(84px, 27cqi, 130px); line-height: .8; color: var(--amber); text-box: none; text-shadow: 4px 4px 0 var(--noche); }
.h-num span { font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.35; padding-bottom: 6px; }
.h-vdc { display: flex; flex-direction: column; gap: 10px; }
.h-vdc li { display: flex; align-items: baseline; gap: 14px; font-size: 16px; line-height: 1.3; }
.h-vdc b { flex: 0 0 5.4em; font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1; color: var(--amber); }

/* =========================================================
   03 · Casas: crest in the middle, team polaroid behind it, four tabs
   ========================================================= */
.h-casas .m-slide__in { align-items: center; text-align: center; gap: 18px; }
.h-casas__head { align-items: center; }
.h-casas .eyebrow { color: var(--pergamino); }
.h-casas .m-title { color: var(--papel); }
.h-casa { position: relative; height: min(38cqh, 400px); aspect-ratio: 1.12; }
.h-casa__crest {
  position: absolute; left: 0; bottom: 0; z-index: 2; height: 100%; width: auto; cursor: pointer;
  filter: drop-shadow(0 14px 16px rgba(0,0,0,.4));
  transition: opacity .2s ease, transform .35s cubic-bezier(.3,1.4,.5,1);
}
.h-casa__photo {
  position: absolute; right: 0; top: 4%; width: 54%; aspect-ratio: 4 / 5; margin: 0;
  background: var(--papel); padding: 7px 7px 26px; transform: rotate(7deg);
  box-shadow: 0 12px 18px rgba(0,0,0,.38); transition: opacity .2s ease;
}
.h-casa__photo img { width: 100%; height: 100%; object-fit: cover; }
.h-casa.is-swapping .h-casa__crest { opacity: 0; transform: scale(.88) rotate(-4deg); }
.h-casa.is-swapping .h-casa__photo { opacity: 0; }
.h-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: min(100%, 360px); }
.h-tabs button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 12px 9px; border: 0; border-radius: 999px;
  background: rgba(0,0,0,.28); color: var(--pergamino);
  font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  transition: background .2s, color .2s;
}
.h-tabs i { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(251,247,236,.6); flex-shrink: 0; }
.h-tabs button:hover { background: rgba(0,0,0,.45); }
.h-tabs button[aria-selected="true"] { background: var(--papel); color: var(--tinta); }
.h-tabs button:focus-visible { outline: 3px solid var(--papel); outline-offset: 2px; }
/* Motto + chant of the house on screen (data-casa on the slide picks the item) */
.h-lema { display: grid; width: min(100%, 360px); }
.h-lema__item { grid-area: 1 / 1; display: none; flex-direction: column; gap: 6px; }
.h-casas[data-casa="emberclaw"] [data-casa-item="emberclaw"],
.h-casas[data-casa="silverspin"] [data-casa-item="silverspin"],
.h-casas[data-casa="jawsreef"] [data-casa-item="jawsreef"],
.h-casas[data-casa="braveroar"] [data-casa-item="braveroar"] { display: flex; animation: h-lema-in .35s ease both; }
@keyframes h-lema-in { from { opacity: 0; transform: translateY(6px); } }
.h-lema__q { font-family: var(--f-display); font-size: clamp(19px, 5.6cqi, 24px); line-height: 1.1; color: var(--papel); }
.h-lema__grito { font-size: 13.5px; line-height: 1.35; color: var(--pergamino); }

/* =========================================================
   04 · Próximos campamentos
   ========================================================= */
.h-prox .m-slide__in { gap: 22px; }
.h-card { gap: 10px; }
.h-card h3 { font-size: 34px; }
.h-card__ribbon {
  position: absolute; top: 14px; right: 14px;
  background: var(--amber); color: var(--tinta); padding: 8px 12px 6px;
  font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; line-height: 1;
}
.h-card__ribbon--soon { background: rgba(10,34,48,.75); color: var(--pergamino); border: 1px solid rgba(230,218,180,.5); }
.h-card__date { font-family: var(--f-label); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--pergamino); }
.h-card .h-card__meta { font-size: 15px; opacity: .9; }
.h-card__btn { align-self: flex-start; margin-top: 4px; padding: 14px 20px 12px; font-size: 12px; }
.h-card .btn--outline { border: 2px solid var(--pergamino); color: var(--pergamino); }
.h-card--next { outline: 3px solid var(--amber); outline-offset: -3px; }

/* =========================================================
   05 · Un día: the beam (engine: .m-plan / .m-stop). The cover under the
   wood follows the live background (--bg), so it works on any tone.
   ========================================================= */
.h-dia .m-plan__cards {
  background:
    linear-gradient(var(--bg, var(--noche)), var(--bg, var(--noche))) 0 16px / 100% 100% no-repeat local,
    linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,0) 45%, rgba(0,0,0,.5)) 0 0 / 100% 16px no-repeat local,
    url("../img/madera.webp") 0 0 / 176px 88px repeat-x local;
}
.h-dia .m-stop__photo { overflow: hidden; }
.h-dia .m-stop__photo img { width: 100%; height: 100%; object-fit: cover; }
.h-dia .m-stop__tag { grid-template-columns: 1fr; }
.h-dia .m-tag__time { font-size: 28px; }
.h-dia .m-stop__tag p b { display: block; font-size: 15px; }
.h-dia .m-stop--night .m-stop__tag { background: var(--navy-hw); color: var(--pergamino); border: 2px solid var(--amber); }
.h-dia .m-stop--night .m-tag__time { color: var(--amber); }

/* =========================================================
   06 · Padres: welcome-home photo, a promise on paper, four stickers
   ========================================================= */
.h-padres .m-que__photo { height: 40cqh; }
.h-padres .m-que__photo img { object-position: 50% 50%; }
.h-padres .m-que__text { gap: 16px; padding-top: 14px; }
.h-padres .m-label { font-size: clamp(28px, 8.4cqi, 38px); }
.h-stickers .m-sticker { color: var(--pergamino); }

/* =========================================================
   07 · Testimonio: the video as a polaroid, one quote
   ========================================================= */
.h-testi .m-slide__in { align-items: center; text-align: center; gap: 20px; }
.h-video {
  position: relative; height: min(48cqh, 560px); aspect-ratio: 512 / 910;
  border: 8px solid var(--papel); border-bottom-width: 30px; background: var(--papel);
  --r: -2; box-shadow: 0 14px 22px rgba(0,0,0,.4);
}
.h-video__poster, .h-video__el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.h-video__play {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; padding: 0; border: 0; background: none;
  transform: translate(-50%, -50%); filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); transition: transform .2s;
}
.h-video__play img { width: 100%; height: 100%; }
.h-video__play:hover { transform: translate(-50%, -50%) scale(1.08); }
.h-video.is-playing .h-video__poster, .h-video.is-playing .h-video__play { display: none; }
.h-testi.is-live .h-video:not(.is-playing) .h-video__play { animation: h-pulse 2s ease-in-out 2s infinite; }
.h-quote { margin: 0; display: flex; flex-direction: column; gap: 12px; max-width: 30ch; }
.h-quote p { font-size: clamp(20px, 6cqi, 26px); line-height: 1.15; color: var(--papel); text-box: none; }
.h-quote footer { font-family: var(--f-label); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pergamino); opacity: .85; }
.h-stars { color: var(--amber); margin-left: 6px; letter-spacing: .1em; }
@keyframes h-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.1); } }

/* =========================================================
   08 · Preguntas: five questions on one paper sheet
   ========================================================= */
.h-faq__list {
  background: var(--papel); color: var(--tinta); border-radius: 3px;
  padding: 6px 18px; box-shadow: 0 10px 18px rgba(0,0,0,.3); --r: -.6;
}
.h-faq__list details { border-bottom: 1px dashed rgba(22,19,12,.22); }
.h-faq__list details:last-child { border-bottom: 0; }
.h-faq__list summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 15px 34px 13px 0; font-size: 16px; font-weight: 500; line-height: 1.3;
}
.h-faq__list summary::-webkit-details-marker { display: none; }
.h-faq__list summary::after {
  content: "+"; position: absolute; right: 2px; top: 50%; translate: 0 -50%;
  font-family: var(--f-display); font-size: 26px; color: var(--red); transition: rotate .25s;
}
.h-faq__list details[open] summary::after { rotate: 45deg; }
.h-faq__list summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.h-faq .m-slide__in { gap: 18px; }
/* Phone: the photo is a small polaroid above the heading (hidden on very short screens). */
.h-faq__photo {
  order: -1; align-self: center; width: min(46cqi, 230px); margin: 0;
  background: var(--papel); padding: 7px 7px 0; box-shadow: 0 12px 18px rgba(0,0,0,.38); --r: 3;
}
.h-faq__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.h-faq__photo figcaption { padding: 9px 4px 8px; font-family: var(--f-label); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); }
.h-faq__list details p { padding: 0 0 14px; font-size: 14.5px; line-height: 1.5; opacity: .8; }

/* =========================================================
   09 · Cierre: lantern photo, two paper labels, two buttons
   ========================================================= */
.h-cierre .m-slide__in { justify-content: flex-end; gap: 18px; padding-bottom: 56px; isolation: isolate; }
.h-cierre__bg {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,34,48,.2) 0%, rgba(10,34,48,0) 30%, rgba(10,34,48,.75) 62%, var(--noche) 92%), url("../img/dia_noche.webp") 50% 10% / cover no-repeat;
}
.h-cierre.is-live .h-cierre__bg { animation: m-kenburns 10s ease-out both; }
.h-cierre .m-label { font-size: clamp(30px, 9cqi, 42px); }
.h-cierre__ctas { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }

/* =========================================================
   Short phone screens (same breakpoints as the Halloween reel)
   ========================================================= */
@container (max-width: 1023px) and (max-height: 780px) {
  .h-hero__labels .m-label { font-size: clamp(34px, 11cqi, 52px); }
  .h-casas .m-slide__in { gap: 12px; }
  .h-casa { height: 34cqh; }
  .h-tabs button { padding: 9px 10px 7px; }
  .h-padres .m-que__photo { height: 35cqh; }
  .h-padres .m-que__text { gap: 10px; }
  .h-padres .m-label { font-size: clamp(24px, 7cqi, 32px); }
  .h-video { height: 44cqh; }
  .h-testi .m-slide__in { gap: 14px; }
  .h-faq__list summary { padding: 12px 30px 10px 0; font-size: 15px; }
  .h-num b { font-size: clamp(72px, 22cqi, 110px); }
  .h-vdc li { font-size: 15px; }
  .h-vdc b { font-size: 21px; }
}
@container (max-width: 1023px) and (max-height: 700px) {
  .h-faq__photo { display: none; }
  .h-lema__grito { display: none; }
}
@container (max-width: 1023px) and (max-height: 620px) {
  .h-casa { height: 29cqh; }
  .h-padres .m-que__photo { height: 27cqh; }
  .h-video { height: 38cqh; }
  .h-quote p { font-size: 18px; }
  .h-faq__list summary { padding: 10px 30px 8px 0; font-size: 14.5px; }
}

/* =========================================================
   Desktop (1024px and up): each slide gets its own layout
   ========================================================= */
@media (min-width: 1024px) {
  .h-prox .m-slide__in, .h-casas .m-slide__in, .h-testi .m-slide__in, .h-faq .m-slide__in, .h-cierre .m-slide__in {
    padding-left: clamp(40px, 7cqi, 150px); padding-right: clamp(40px, 7cqi, 150px);
  }
  .h-link { font-size: 14px; }

  /* ---- 01 · Hero: copy left, photo right ---- */
  .h-hero .m-slide__in { justify-content: center; padding: var(--top) 0 var(--bottom) clamp(40px, 7cqi, 150px); }
  .h-hero__photo { left: 44%; }
  .h-hero__photo::after {
    background:
      linear-gradient(90deg, var(--noche) 0%, rgba(10,34,48,0) 22%),
      linear-gradient(180deg, rgba(10,34,48,.35) 0%, rgba(10,34,48,0) 25%, rgba(10,34,48,0) 75%, var(--noche) 100%);
  }
  .h-hero__copy { max-width: 46cqi; gap: 26px; }
  .h-hero__labels { gap: 10px; width: max-content; }
  .h-hero__labels .m-label { font-size: clamp(64px, 6.4cqi, 112px); padding: 14px 22px 8px; }
  .h-hero__sub { font-size: 16px; }
  .h-hero__cta { padding: 20px 34px 18px; }

  /* ---- 02 · Evermonth: photo left half, words right ---- */
  .h-que .m-que__photo::after { background: linear-gradient(90deg, rgba(10,34,48,0) 55%, var(--bg, var(--noche)) 100%); }
  .h-num { left: 48px; bottom: 11%; }
  .h-num b { font-size: clamp(130px, 12cqi, 210px); text-shadow: 6px 6px 0 var(--noche); }
  .h-num span { font-size: 15px; }
  .h-vdc { gap: 18px; }
  .h-vdc li { font-size: 19px; }
  .h-vdc b { font-size: 34px; }

  /* ---- 03 · Casas: words and tabs left, crest right ---- */
  .h-casas .m-slide__in {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-rows: auto auto auto;
    align-content: center; column-gap: clamp(40px, 5cqi, 96px); row-gap: 30px; text-align: left; justify-items: start;
  }
  .h-casas__head { grid-column: 1; grid-row: 1; align-self: end; align-items: flex-start; }
  .h-casas .m-title { font-size: clamp(48px, 4.8cqi, 84px); }
  .h-casas__txt { font-size: 18px; max-width: 38ch; }
  .h-lema { grid-column: 1; grid-row: 2; width: auto; max-width: 30ch; }
  .h-lema__q { font-size: clamp(24px, 2.2cqi, 34px); }
  .h-lema__grito { font-size: 16px; }
  .h-tabs { grid-column: 1; grid-row: 3; align-self: start; width: auto; grid-template-columns: repeat(2, auto); gap: 12px; }
  .h-tabs button { padding: 15px 22px 13px; font-size: 13px; justify-content: flex-start; }
  .h-casa { grid-column: 2; grid-row: 1 / span 3; justify-self: center; height: min(68cqh, 640px); }

  /* ---- 04 · Próximos: all four in a row ---- */
  .h-prox .m-slide__in { gap: 30px; }
  .h-prox .m-head { padding: 0; }
  .h-prox .m-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; overflow: visible; padding: 0; }
  .h-prox .m-card { height: min(60cqh, 560px); padding: 24px 22px; }
  .h-prox .m-card img { transition: transform .7s ease; }
  .h-prox .m-card:hover img { transform: scale(1.06); }
  .h-prox .m-card h3 { font-size: clamp(26px, 2.2cqi, 36px); }
  .h-prox .m-dots { display: none; }

  /* ---- 05 · Un día: three stops fit, no scroll ---- */
  .h-dia .m-stop { flex-basis: 300px; }

  /* ---- 06 · Padres: photo left, promise right ---- */
  .h-padres .m-que__photo { height: auto; }
  .h-padres .m-que__photo img { object-position: 50% 40%; }
  .h-padres .m-que__text { gap: 22px; padding-top: var(--top); }
  .h-padres .m-label { font-size: clamp(38px, 3.6cqi, 62px); }
  .h-stickers { gap: 16px; max-width: 560px; }
  .h-stickers .m-sticker { padding: 20px 18px; }
  .h-stickers .m-sticker b { font-size: 30px; }
  .h-stickers .m-sticker span { display: block; font-size: 12px; }

  /* ---- 07 · Testimonio: video left, quote right ---- */
  .h-testi .m-slide__in {
    display: grid; grid-template-columns: auto minmax(0, 640px); grid-template-rows: auto auto;
    column-gap: clamp(48px, 7cqi, 140px); row-gap: 20px; align-content: center; justify-content: center; text-align: left;
  }
  .h-video { grid-column: 1; grid-row: 1 / span 2; height: min(70cqh, 640px); }
  .h-testi__eyebrow { grid-column: 2; grid-row: 1; align-self: end; }
  .h-quote { grid-column: 2; grid-row: 2; align-self: start; max-width: none; gap: 22px; }
  .h-quote p { font-size: clamp(32px, 3.2cqi, 54px); }
  .h-quote footer { font-size: 13px; }

  /* ---- 08 · Preguntas: heading, link and photo left, paper list right ---- */
  .h-faq .m-slide__in {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto auto auto;
    column-gap: clamp(40px, 5cqi, 96px); row-gap: 22px; align-content: center;
  }
  .h-faq .m-head { grid-column: 1; grid-row: 1; }
  .h-faq .m-title { font-size: clamp(48px, 4.6cqi, 80px); }
  .h-faq .h-link { grid-column: 1; grid-row: 2; }
  .h-faq__list { grid-column: 2; grid-row: 1 / span 3; align-self: center; padding: 10px 30px; }
  .h-faq__list summary { font-size: 18px; padding: 20px 40px 18px 0; }
  .h-faq__list details p { font-size: 16px; }
  .h-faq__photo { order: 0; grid-column: 1; grid-row: 3; align-self: start; justify-self: start; margin: 14px 0 0 10px; width: min(300px, 22cqi); padding: 9px 9px 0; }
  .h-faq__photo figcaption { padding: 12px 4px 11px; font-size: 11px; }

  /* ---- 09 · Cierre: centered over the lantern ---- */
  .h-cierre .m-slide__in { justify-content: flex-end; align-items: center; text-align: center; gap: 24px; padding-bottom: 12cqh; }
  /* Portrait photo: keep it in a centered band, the sides fade to night. */
  .h-cierre__bg {
    background:
      linear-gradient(90deg, var(--noche) 28%, rgba(10,34,48,0) 40%, rgba(10,34,48,0) 60%, var(--noche) 72%),
      linear-gradient(180deg, rgba(10,34,48,0) 0%, rgba(10,34,48,0) 40%, rgba(10,34,48,.8) 70%, var(--noche) 92%),
      url("../img/dia_noche.webp") 50% 12% / auto 150% no-repeat var(--noche);
  }
  .h-cierre .m-labels { align-items: center; }
  .h-cierre .m-label { font-size: clamp(48px, 5cqi, 84px); align-self: center; }
  .h-cierre__ctas { flex-direction: row; justify-content: center; }
  .h-cierre__ctas .m-btn { align-self: auto; padding: 20px 34px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .h-hero__photo img, .h-cierre__bg, .h-video__play { animation: none !important; }
  .h-page .m-shell.h-retone { transition: none; }
}