/* =========================================================================
   RevChill v2
   Sistema: CSS nativo + tokens. Sin framework, sin build.
   Tema: un solo mundo visual, en dos modos (oscuro por defecto, claro si el
   sistema lo pide). Ninguna sección invierte el tema a mitad de página.
   Radios: superficies 14px, botones píldora, imágenes 14px. Una sola escala.
   ========================================================================= */

/* ---------- tokens ---------- */
:root {
  --bg:        #0E3334;
  --surface:   #15403E;
  --surface-2: #1C4B48;
  --fg:        #F2F4EA;
  --fg-dim:    #9BB3AD;
  --line:      rgba(242,244,234,.14);
  --line-2:    rgba(242,244,234,.26);
  --accent:    #FF7A4D;
  --accent-fg: #07211F;
  --lima:      #D7E86B;
  --shadow:    0 24px 60px rgba(4,18,18,.45);

  --display: "Outfit", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 1240px;
  --r: 14px;
  --ease: cubic-bezier(.16,1,.3,1);
  --sec-y: clamp(5rem, 11vw, 10rem);
  color-scheme: dark;
}

/* La web va siempre en verde oscuro, también si el sistema está en modo
   claro. color-scheme se lo dice al navegador para que los controles
   nativos (scrollbar, autocompletado, selects) salgan oscuros y no
   desentonen. El único documento claro del proyecto es partners.html,
   que es un dossier pensado para leerse e imprimirse. */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--body);font-size:clamp(1rem,.97rem+.15vw,1.08rem);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none;padding:0}
dl,dd{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--accent-fg)}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;top:-70px;left:1rem;z-index:99;background:var(--accent);color:var(--accent-fg);
  padding:.7em 1.2em;border-radius:0 0 12px 12px;font-weight:600;transition:top .2s var(--ease)}
.skip:focus{top:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- tipografía ---------- */
.h-display{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.3rem,4.6vw,4.15rem);
  line-height:1.02;letter-spacing:-.04em;text-wrap:balance;
}
.h-display em{font-style:normal;position:relative}
.h-display em::after{
  content:"";position:absolute;left:0;right:-.06em;bottom:-.1em;height:.085em;
  border-radius:99px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  animation:swash 1s var(--ease) .45s forwards;
}
@keyframes swash{to{transform:scaleX(1)}}

.h-sec{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.9rem,4.2vw,3.1rem);
  line-height:1.03;letter-spacing:-.035em;text-wrap:balance;
}
.h-sec--wide{max-width:16ch}
.h-small{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em}
h3{font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:-.02em;line-height:1.2}

.eyebrow{
  font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.1rem;
}
.lead{font-size:clamp(1.08rem,1.6vw,1.3rem);color:var(--fg-dim);max-width:52ch;line-height:1.5;text-wrap:pretty}
.h-sec + .lead{margin-top:1.1rem}
p{text-wrap:pretty}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.85em 1.5em;border-radius:999px;
  background:var(--accent);color:var(--accent-fg);
  font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  border:1px solid transparent;
  transition:transform .35s var(--ease),filter .3s var(--ease),background-color .3s var(--ease);
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.07)}
.btn:active{transform:translateY(0) scale(.985)}
.btn--lg{padding:1em 1.9em;font-size:1.02rem}
.btn--sm{padding:.58em 1.05em;font-size:.88rem}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--surface);border-color:var(--fg);filter:none}
.btn[aria-disabled="true"]{opacity:.42;pointer-events:none}

.link{
  display:inline-block;position:relative;font-weight:600;color:var(--accent);
  border-bottom:2px solid currentColor;padding-bottom:1px;
  transition:opacity .25s var(--ease)
}
/* zona pulsable de 44px sin desplazar el subrayado */
.link::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.link:hover{opacity:.72}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .h-display em::after{transform:scaleX(1);animation:none}
}

/* =========================================================================
   NAV
   ========================================================================= */
.nav{position:fixed;inset:0 0 auto 0;z-index:90;isolation:isolate;transition:background-color .35s var(--ease),border-color .35s var(--ease)}
.nav.stuck{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;gap:1.5rem;height:72px;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.nav__brand svg{height:34px;width:auto}
.nav__links{margin-left:auto;display:flex;gap:clamp(.5rem,1.5vw,1.6rem)}
.nav__links a{font-size:.88rem;font-weight:500;color:var(--fg-dim);padding:.65em 0;position:relative;white-space:nowrap;
  transition:color .25s var(--ease)}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:.45em;height:2px;background:var(--accent);
  transition:right .35s var(--ease)}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--fg)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{right:0}
.nav__end{display:flex;align-items:center;gap:.6rem}
.lang{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:999px}
.lang button{font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:.82em .9em;border-radius:999px;color:var(--fg-dim);
  transition:background-color .25s var(--ease),color .25s var(--ease)}
.lang button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line-2);border-radius:11px;place-items:center}
.burger i{display:block;width:17px;height:2px;background:var(--fg);position:relative;transition:background-color .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:17px;height:2px;background:var(--fg);
  transition:transform .35s var(--ease),top .35s var(--ease)}
.burger i::before{top:-6px}.burger i::after{top:6px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

@media (max-width:920px){
  .burger{display:grid}
  .nav__links{position:fixed;inset:72px 0 auto 0;z-index:2;flex-direction:column;gap:0;margin:0;
    background:var(--surface);border-bottom:1px solid var(--line);padding:.5rem var(--gut) 1.8rem;
    transform:translateY(-120%);transition:transform .45s var(--ease)}
  .nav__links.open{transform:none}
  .nav__links a{font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;
    padding:.75em 0;border-bottom:1px solid var(--line);color:var(--fg)}
  .nav__links a::after{display:none}
  .nav__end{margin-left:auto}
  .nav__end .btn{display:none}
}

/* =========================================================================
   1. HERO · split asimétrico, la foto sangra al borde derecho
   ========================================================================= */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(300px,36vw,560px));
  gap:clamp(2rem,4vw,4rem);align-items:center;
  padding-top:clamp(6.5rem,10vw,8.5rem);padding-bottom:clamp(3rem,6vw,5rem);
  padding-left:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
  padding-right:0;
  min-height:min(100dvh,860px);
}
.hero__shot{width:100%;aspect-ratio:4/5;border-radius:var(--r) 0 0 var(--r)}
.hero__text>*{animation:rise .9s var(--ease) backwards}
.hero__text .hero__sub{animation-delay:.1s}
.hero__text .hero__cta{animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero__sub{margin-top:1.7rem;font-size:clamp(1.08rem,1.6vw,1.3rem);color:var(--fg-dim);max-width:38ch;line-height:1.45}
.hero__cta{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.75rem}
.hero__shot{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  animation:rise 1s var(--ease) .15s backwards}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0;
    padding-top:clamp(6rem,20vw,8rem);padding-right:var(--gut)}
  .hero__shot{max-width:440px;border-radius:var(--r)}
}

/* placeholder de foto (sustituir por <img src>) */
.ph{position:relative;background:var(--surface-2);border-radius:var(--r);overflow:hidden}
.ph::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,transparent),transparent 58%),
    repeating-linear-gradient(45deg,var(--line) 0 1px,transparent 1px 13px);
}
.ph::after{
  content:attr(data-ph);position:absolute;inset:auto 1rem 1rem 1rem;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);line-height:1.5;
}
.ph img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.ph img:not([src]){display:none}
.ph--portrait{aspect-ratio:4/5}

/* =========================================================================
   2. STRIP · próximo encuentro
   ========================================================================= */
.strip{border-block:1px solid var(--line);background:var(--surface)}
.strip__in{max-width:var(--maxw);margin-inline:auto;padding:clamp(1.5rem,3vw,2.1rem) var(--gut);
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.6rem);flex-wrap:wrap}
.strip__when{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.6vw,2rem);letter-spacing:-.035em;line-height:1}
.strip__city{color:var(--accent)}
.strip__where{color:var(--fg-dim);font-size:.95rem;flex:1 1 240px;min-width:0}
.strip__seats{font-size:.9rem;color:var(--fg-dim);display:flex;align-items:center;gap:.6rem}
.strip__bar{width:92px;height:5px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.strip__bar span{display:block;height:100%;border-radius:99px;background:var(--accent);width:0;
  transition:width 1.2s var(--ease)}
.strip__empty{color:var(--fg-dim);font-size:1rem}

/* =========================================================================
   3. MANIFIESTO · bento (5 celdas, 5 contenidos)
   ========================================================================= */
.sec{padding-block:var(--sec-y)}
.sec--tint{background:var(--surface)}
.sec--slim{padding-block:clamp(3rem,6vw,5rem)}

.bento{display:grid;gap:12px;margin-top:clamp(2.4rem,5vw,3.6rem);
  grid-template-columns:repeat(6,1fr)}
.cell{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.4rem,2.6vw,2rem);display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem}
.sec--tint .cell{background:var(--bg)}
.cell p{color:var(--fg-dim)}
.cell--lead{grid-column:span 4;background:var(--accent);border-color:transparent}
.cell--lead p{color:var(--accent-fg);font-family:var(--display);font-weight:500;
  font-size:clamp(1.2rem,2.3vw,1.75rem);line-height:1.22;letter-spacing:-.02em}
.cell--photo{grid-column:span 2;grid-row:span 2;padding:0;min-height:260px}
.cell--ratio{grid-column:span 4}
.cell:not(.cell--lead):not(.cell--photo):not(.cell--ratio){grid-column:span 3}

.ratio{height:14px;border-radius:99px;background:var(--surface);overflow:hidden;margin-bottom:1rem;
  border:1px solid var(--line)}
.ratio__fill{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;
  transition:width 1.3s var(--ease)}
.ratio.on .ratio__fill{width:var(--w)}
.ratio__legend{color:var(--fg-dim)}
.ratio__legend b{color:var(--fg);font-family:var(--display);font-weight:800;font-size:1.35em;letter-spacing:-.03em}

@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .cell--lead,.cell--ratio{grid-column:span 2}
  .cell--photo{grid-column:span 2;grid-row:auto;aspect-ratio:16/10;min-height:0}
  .cell:not(.cell--lead):not(.cell--photo):not(.cell--ratio){grid-column:span 1}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .cell,.cell--lead,.cell--ratio,.cell--photo{grid-column:span 1}
}

/* =========================================================================
   4. AGENDA · lista editorial
   ========================================================================= */
.agenda__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  margin-bottom:clamp(2rem,4vw,3rem)}
.tabs{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px}
.tab{padding:.65em 1.15em;border-radius:999px;font-size:.88rem;font-weight:600;color:var(--fg-dim);
  transition:background-color .3s var(--ease),color .3s var(--ease)}
.tab[aria-selected="true"]{background:var(--fg);color:var(--bg)}

.ev{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(1.2rem,4vw,3rem);
  align-items:center;padding-block:clamp(1.6rem,3vw,2.2rem);border-top:1px solid var(--line)}
.agenda > .ev:last-child{border-bottom:1px solid var(--line)}
/* Los pasados ya no son el añadido de la agenda, son el historial del
   proyecto: se recuesta un poco la jerarquía, pero sin apagarlos. */
.ev--past{opacity:.9}
.ev__d{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.88;
  font-size:clamp(2.4rem,6vw,4.6rem);min-width:2.2ch;font-variant-numeric:tabular-nums}
.ev__m{display:block;font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);line-height:1;margin-top:.5rem}
.ev__city{font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,2.2vw,1.6rem);letter-spacing:-.03em}
.ev__meta{color:var(--fg-dim);font-size:.95rem;margin-top:.3rem}
.ev__side{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;text-align:right}
.ev__seats{font-size:.82rem;color:var(--fg-dim);font-variant-numeric:tabular-nums}
.agenda__empty{border:1px dashed var(--line-2);border-radius:var(--r);padding:clamp(1.8rem,4vw,2.6rem);
  text-align:center;color:var(--fg-dim)}
.agenda__empty .btn{margin-top:1.4rem}

@media (max-width:720px){
  .ev{grid-template-columns:auto minmax(0,1fr)}
  .ev__side{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;text-align:left}
}

/* =========================================================================
   5. GALERÍA · masonry
   ========================================================================= */
.mason{columns:3;column-gap:12px;margin-top:clamp(2.4rem,5vw,3.6rem)}
.mason > *{break-inside:avoid;margin-bottom:12px;border-radius:var(--r);overflow:hidden}
@media (max-width:860px){.mason{columns:2}}
/* en móvil se queda a 2 columnas: la mitad de scroll */
.mason img{display:block;width:100%;height:auto}
.mason__btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  color:inherit;font:inherit}
.mason__item{position:relative;background:var(--surface-2)}
.mason__item img{transition:transform .5s var(--ease),opacity .3s}
.mason__btn:hover img,.mason__btn:focus-visible img{transform:scale(1.03)}
.mason__btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mason figcaption{position:absolute;inset:auto 0 0 0;padding:1.6rem .9rem .7rem;
  font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:#F2F4EA;
  background:linear-gradient(transparent,rgba(7,33,31,.82));
  opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.mason__item:hover figcaption,.mason__btn:focus-visible + figcaption{opacity:1}
@media (hover:none){.mason figcaption{opacity:1}}

/* ---------- foto ampliada ---------- */
.lb{border:0;background:transparent;max-width:min(92vw,1400px);max-height:100dvh;
  width:100%;color:var(--fg);overflow:visible;
  padding:clamp(1.2rem,5vh,3rem) clamp(3.6rem,7vw,5.5rem)}
.lb::backdrop{background:rgba(4,18,17,.96)}
.lb__img{display:block;max-width:100%;max-height:76dvh;width:auto;height:auto;
  margin:0 auto;border-radius:var(--r);background:var(--surface-2)}
.lb__cap{text-align:center;margin:.9rem 0 0;font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sage,#9BB3AD)}
.lb__x,.lb__nav{position:fixed;z-index:2;display:grid;place-items:center;
  background:rgba(242,244,234,.1);color:#F2F4EA;border:1px solid rgba(242,244,234,.22);
  border-radius:999px;cursor:pointer;line-height:1;
  transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.lb__x:hover,.lb__nav:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.lb__x:focus-visible,.lb__nav:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lb__x{top:1rem;right:1rem;width:48px;height:48px;font-size:1.7rem}
.lb__nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2.2rem;
  padding-bottom:.18em}
.lb__nav--prev{left:1rem}
.lb__nav--next{right:1rem}
@media (max-width:620px){
  /* Las flechas bajan al pie, así que el hueco lateral ya no hace falta
     y la foto puede ocupar casi todo el ancho. */
  .lb{padding:1rem 1rem 0;max-width:100vw}
  .lb__img{max-height:72dvh}
  .lb__nav{top:auto;bottom:1.1rem;transform:none;width:46px;height:46px}
  .lb__cap{margin-bottom:5rem}
}
@media (prefers-reduced-motion:reduce){
  .mason__item img,.lb__x,.lb__nav{transition:none}
  .mason__btn:hover img{transform:none}
}

/* =========================================================================
   6. EMPRESAS · cifras, muro de partners y petición del dossier
   ========================================================================= */
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(2.6rem,5vw,4rem);
  border-top:1px solid var(--line-2)}
.stats > div{padding:1.5rem 1.2rem 1.5rem 0;border-bottom:1px solid var(--line)}
.stats dt{font-size:.78rem;letter-spacing:.06em;color:var(--fg-dim);order:2}
.stats dd{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.04em;
  line-height:1;margin-bottom:.4rem;font-variant-numeric:tabular-nums}
.stats > div{display:flex;flex-direction:column}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}

/* Título del muro de partners, ahora dentro de la propia sección */
#empresas .h-small{margin-top:clamp(2.6rem,5vw,3.6rem)}
/* Cierre de la sección: una frase y el botón del dossier */
.biz__cta{margin-top:clamp(2rem,4vw,2.8rem);display:flex;flex-wrap:wrap;
  align-items:center;gap:1rem clamp(1.2rem,3vw,2.2rem)}
.biz__cta span{font-size:clamp(1rem,1.7vw,1.12rem);color:var(--fg);max-width:40ch}

/* =========================================================================
   7. SPONSORS
   ========================================================================= */
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:1.6rem}
.wall__c{background:var(--bg);aspect-ratio:5/2.6;display:grid;place-items:center;padding:1rem;
  transition:background-color .3s var(--ease)}
.wall__c:hover{background:var(--surface)}
/* 40px dejaba ilegible cualquier logo que no fuera de una sola línea.
   Se sube a 56 en escritorio y baja solo en pantallas estrechas. */
.wall__c img{max-height:clamp(40px,6.5vw,56px);width:auto;
  filter:grayscale(1);opacity:.82;transition:filter .3s,opacity .3s}
.wall__c:hover img{filter:none;opacity:1}
.wall__slot{text-align:center;font-size:.76rem;color:var(--fg-dim);line-height:1.4}
.wall__slot b{display:block;color:var(--fg);font-weight:600;font-size:.84rem}
/* Partner de temporada: fila entera para él solo y logo al doble.
   Ocupar la fila completa (y no dos huecos) evita que queden celdas
   huérfanas al cambiar el nº de columnas en cada breakpoint. */
.wall__c--big{grid-column:1 / -1;aspect-ratio:auto;min-height:clamp(96px,11vw,132px)}
.wall__c--big img{max-height:clamp(56px,6.5vw,84px);filter:none;opacity:1}
@media (max-width:860px){.wall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.wall{grid-template-columns:repeat(2,1fr)}}

/* Partners en la ficha de cada encuentro y en la franja de próximo */
.ev__sponsors{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .8rem;margin-top:.55rem}
.ev__with{font-size:.84rem;color:var(--fg-dim);letter-spacing:.01em}
.ev__with b{color:var(--fg);font-weight:600}
.ev__logo{display:inline-flex;align-items:center}
/* height fija (no max-height): dentro de un flex el ancho no se puede
   resolver solo con max-height y el logo colapsaba a cero. */
.ev__logo img{height:26px;width:auto;max-width:130px;object-fit:contain;
  filter:grayscale(1);opacity:.75;transition:filter .3s,opacity .3s}
.ev__logo:hover img{filter:none;opacity:1}
.strip__where .ev__with{font-size:inherit;color:inherit}

/* Línea de agradecimiento del pie */
.foot__partners{margin:0 0 1.1rem;font-size:.82rem;color:var(--fg-dim);
  flex-basis:100%;order:-1}
.foot__partners a{color:var(--fg);padding-block:.5rem;display:inline-block;
  text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.foot__partners a:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* =========================================================================
   8. HOST · banda centrada
   ========================================================================= */
.band{padding-block:clamp(4.5rem,9vw,8rem);background:var(--surface);border-block:1px solid var(--line);
  position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:auto -10% -60% 30%;height:120%;pointer-events:none;
  background:radial-gradient(45% 50% at 50% 50%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%)}
.band__in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.3rem}
.band__in p{color:var(--fg-dim);max-width:46ch}
.band__in .btn{margin-top:.6rem}

/* =========================================================================
   9. FAQ
   ========================================================================= */
.faq__grid{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:820px){.faq__grid{grid-template-columns:1fr}}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.3rem 0;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:700;font-size:clamp(1.02rem,1.7vw,1.22rem);letter-spacing:-.02em;
  transition:color .25s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{content:"";width:12px;height:12px;flex:0 0 12px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-3px,-3px);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq details p{padding-bottom:1.4rem;color:var(--fg-dim);max-width:62ch}

/* =========================================================================
   10. CTA comunidad
   ========================================================================= */
.cta{padding-block:var(--sec-y)}
.cta__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.8rem,4vw,3.5rem);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:28px;
  padding:clamp(2rem,5vw,4rem);position:relative;overflow:hidden}
.cta__in::before{content:"";position:absolute;inset:-60% 40% auto -10%;height:160%;pointer-events:none;
  background:radial-gradient(40% 46% at 50% 50%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 72%)}
.cta__in > *{position:relative}
.cta__in p{color:var(--fg-dim);margin-top:.9rem;max-width:48ch}
.cta__actions{display:flex;flex-direction:column;gap:.7rem}
@media (max-width:820px){.cta__in{grid-template-columns:1fr}.cta__actions{flex-direction:row;flex-wrap:wrap}}

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot{border-top:1px solid var(--line);padding-top:clamp(3.5rem,7vw,5.5rem);padding-bottom:2rem}
.foot__in{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:2.5rem}
.foot__brand svg{height:40px;width:auto}
.foot__brand p{margin-top:1.1rem;color:var(--fg-dim);font-size:.9rem;max-width:34ch}
.social{display:flex;gap:.5rem;margin-top:1.3rem}
.social a{width:40px;height:40px;border:1px solid var(--line);border-radius:11px;display:grid;place-items:center;
  color:var(--fg-dim);cursor:pointer;transition:color .25s,background-color .25s,border-color .25s}
.social a svg{width:18px;height:18px}
.social a:hover{color:var(--accent-fg);background:var(--accent);border-color:var(--accent)}
.foot__col{display:flex;flex-direction:column;gap:.75rem}
.foot__col h3{font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-dim);margin-bottom:.5rem}
.foot__col a{font-size:.9rem;color:var(--fg-dim);cursor:pointer;transition:color .2s;
  padding-block:.55rem;margin-block:-.55rem}  /* zona táctil de 44px sin cambiar el aspecto */
.foot__col a:hover{color:var(--accent)}
.foot__end{margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.78rem;color:var(--fg-dim)}
@media (max-width:860px){.foot__in{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__in{grid-template-columns:1fr}}


/* =========================================================================
   TESTIMONIOS · carril con scroll-snap
   ========================================================================= */
.rail{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:clamp(2rem,4vw,3rem) var(--gut) 1rem;
  padding-left:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)));
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.q{
  flex:0 0 min(400px,78vw);scroll-snap-align:start;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.5rem,2.6vw,2rem);display:flex;flex-direction:column;gap:1.3rem;
}
.q__text{font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,1.7vw,1.26rem);
  line-height:1.32;letter-spacing:-.015em}
.q__by{display:flex;align-items:center;gap:.8rem;margin-top:auto}
.q__av{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-fg);font-family:var(--display);font-weight:800;font-size:.84rem}
.q__name{font-weight:600;font-size:.9rem;display:block}
.q__role{color:var(--fg-dim);font-size:.8rem}
.q--pending{border-style:dashed;border-color:var(--line-2)}
.q--pending .q__text{color:var(--fg-dim);font-family:var(--body);font-weight:400;font-size:1rem;line-height:1.5}
.q--pending .q__av{background:var(--surface-2);color:var(--fg-dim);font-size:.7rem;letter-spacing:.06em}

/* =========================================================================
   HOST · ciudades
   ========================================================================= */
.band__label{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-dim);margin-top:1.6rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;max-width:46rem}
.chip{padding:.42em .95em;border:1px solid var(--line-2);border-radius:999px;
  font-size:.85rem;font-weight:600;letter-spacing:.02em}
.chip--live{border-color:var(--accent);color:var(--accent)}
.chip--soon{color:var(--fg-dim);border-style:dashed}

/* =========================================================================
   TEASER DEL WEEKEND HACK (home) · tarjeta promo
   ========================================================================= */
.promo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  background:var(--surface);border:1px solid var(--line-2);border-radius:28px;
  padding:clamp(1.8rem,4vw,3.2rem);position:relative;overflow:hidden;
}
.promo::before{content:"";position:absolute;inset:-50% 50% auto -15%;height:160%;pointer-events:none;
  background:radial-gradient(40% 46% at 50% 50%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 72%)}
.promo__body{position:relative}
.promo__badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:.34em .85em;margin-bottom:1.2rem}
.promo__name{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.7rem,3.6vw,2.7rem)}
.promo__line{color:var(--fg-dim);margin-top:.9rem;max-width:46ch}
.promo__duo{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.8rem;max-width:44ch}
.promo__duo b{display:block;font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.015em}
.promo__duo span{display:block;color:var(--fg-dim);font-size:.9rem;margin-top:.25rem}
.promo__btn{position:relative;margin-top:1.9rem}
.promo__shot{aspect-ratio:3/4;position:relative;border-radius:var(--r)}
@media (max-width:820px){
  .promo{grid-template-columns:1fr}
  .promo__shot{aspect-ratio:16/10;order:-1}
  .promo__duo{max-width:none}
}
@media (max-width:460px){.promo__duo{grid-template-columns:1fr;gap:1rem}}

/* =========================================================================
   LANDING WEEKEND HACK
   ========================================================================= */
.lnav{position:fixed;inset:0 0 auto 0;z-index:90;isolation:isolate;transition:background-color .35s var(--ease)}
.lnav.stuck{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--line)}
.lnav__in{display:flex;align-items:center;gap:1rem;height:72px;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gut)}
.lnav__in svg{height:34px;width:auto}
.lnav__back{margin-left:auto;font-size:.88rem;color:var(--fg-dim);display:inline-flex;
  align-items:center;gap:.4em;padding-block:.7rem;white-space:nowrap}
.lnav__back:hover{color:var(--fg)}

.lhero{padding-top:clamp(7rem,13vw,10rem);padding-bottom:clamp(2rem,4vw,3rem)}
.lhero__badge{display:inline-flex;align-items:center;gap:.55em;font-size:.73rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent);border-radius:999px;padding:.45em 1.05em;margin-bottom:1.8rem}
.lhero__badge b{font-weight:800}
.lhero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.2rem}
.lshot{margin-top:clamp(2.5rem,5vw,4rem);aspect-ratio:16/10;border-radius:var(--r)}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(2.4rem,5vw,3.4rem)}
.duo__p{border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.6rem,3vw,2.4rem);
  display:flex;flex-direction:column;gap:1rem;background:var(--surface)}
.duo__p:first-child{background:var(--accent);border-color:transparent}
.duo__p:first-child h3,.duo__p:first-child p{color:var(--accent-fg)}
.duo__p h3{font-size:clamp(1.15rem,2vw,1.5rem)}
.duo__p p{color:var(--fg-dim)}
.duo__end{margin-top:1.6rem;font-family:var(--display);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.3;max-width:40ch}
@media (max-width:760px){.duo{grid-template-columns:1fr}}

.tl{margin-top:clamp(2.2rem,4vw,3rem);border-top:1px solid var(--line)}
.tl__row{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:clamp(1rem,4vw,3rem);
  padding-block:clamp(1.2rem,2.4vw,1.7rem);border-bottom:1px solid var(--line)}
.tl__when{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:1.05rem}
.tl__what{color:var(--fg-dim)}
.tl__note{margin-top:1.4rem;font-size:.86rem;color:var(--fg-dim);font-style:italic}
@media (max-width:620px){.tl__row{grid-template-columns:1fr;gap:.3rem}}

.ways{margin-top:clamp(2.2rem,4vw,3rem);display:grid;gap:12px}
.way{display:grid;grid-template-columns:minmax(0,.26fr) minmax(0,1fr) auto;gap:clamp(1rem,3vw,2.4rem);
  align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.2rem);transition:border-color .3s var(--ease)}
.way:hover{border-color:var(--line-2)}
.way__k{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.way h3{margin-bottom:.5rem}
.way p{color:var(--fg-dim);font-size:.95rem;max-width:56ch}
@media (max-width:860px){
  .way{grid-template-columns:1fr}
  .way .btn{justify-self:start}
}

.pend{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:clamp(2rem,4vw,3rem)}
.pend > div{background:var(--bg);padding:clamp(1.3rem,2.4vw,1.8rem)}
.pend dt{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;margin-bottom:.5rem}
.pend dd{color:var(--fg-dim);font-size:.9rem}
@media (max-width:860px){.pend{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pend{grid-template-columns:1fr}}

/* el pie de la landing también necesita zona táctil */
.foot__end a{padding-block:.6rem;display:inline-block}

/* En pantallas estrechas la píldora del hero se parte en dos líneas y el
   separador se queda huérfano. Ahí mejor sin píldora: dos líneas limpias. */
@media (max-width:600px){
  .lhero__badge{display:block;border:0;border-radius:0;padding:0;line-height:1.55;margin-bottom:1.4rem}
  .lhero__badge b{display:block}
  .lhero__badge span[aria-hidden]{display:none}
  .lhero__badge span:last-child{color:var(--fg-dim)}
}
/* Muy estrecho: en la cabecera de la landing basta la flecha */
@media (max-width:430px){
  .lnav__back span:not([aria-hidden]){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .lnav__back{font-size:1.1rem;padding-inline:.5rem}
}


/* =========================================================================
   11. PÁGINA DE PATROCINIO
   ========================================================================= */
/* Comparación de los dos formatos. En escritorio son tres columnas con la
   etiqueta a la izquierda; en móvil cada fila se convierte en un bloque con
   las dos respuestas una encima de otra, que es lo único que se lee bien. */
.cmp{margin-top:clamp(2.2rem,4vw,3rem);border-top:1px solid var(--line-2)}
.cmp__head,.cmp__row{display:grid;gap:1rem clamp(1rem,3vw,2.4rem);
  grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);
  padding:1rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.cmp__head{border-bottom:1px solid var(--line-2);padding-bottom:.9rem}
.cmp__head b{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em}
.cmp__row span{color:var(--fg-dim);font-size:.88rem}
.cmp__row b{font-weight:500;font-size:.98rem}
.cmp__row b:last-child{color:var(--accent)}
.cmp__note{margin-top:1.4rem;font-size:.9rem;color:var(--fg-dim);max-width:62ch}
@media (max-width:720px){
  .cmp__head{display:none}
  .cmp__row{grid-template-columns:1fr;gap:.25rem;padding:1.1rem 0}
  .cmp__row span{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
  .cmp__row b::before{content:attr(data-eq) " ";color:var(--fg-dim);font-weight:400}
  .cmp__row b:nth-of-type(1)::before{content:"Afterwork · "}
  .cmp__row b:nth-of-type(2)::before{content:"Weekend · "}
}

/* Rejilla de tarjetas de texto, para "lo que te llevas" y "lo que no" */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-top:clamp(2.2rem,4vw,3rem)}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
.cards > div{background:var(--bg);padding:clamp(1.3rem,2.4vw,1.8rem)}
.sec--tint .cards > div{background:var(--surface)}
.cards b{display:block;font-family:var(--display);font-weight:700;font-size:1rem;
  letter-spacing:-.015em;margin-bottom:.45rem}
.cards span{display:block;color:var(--fg-dim);font-size:.93rem}

/* En esta página el muro va dentro de una sección teñida */
#wall{margin-top:clamp(2.2rem,4vw,3rem)}

/* ======================================================================
   12. PÁGINAS LEGALES
   Texto largo y sin adornos: lo que importa aquí es que se lea de un
   tirón y que cada apartado se pueda citar. Columna estrecha, jerarquía
   clara y nada de columnas ni cajas de color que compitan con el texto.
   ====================================================================== */
.lgl{padding-block:calc(72px + clamp(3rem,7vw,5.5rem)) var(--sec-y)}
.lgl .wrap{max-width:46rem}
.lgl h1{font-family:var(--ff-head);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(2.1rem,5vw,3.1rem);line-height:1.05;text-wrap:balance}
.lgl__date{color:var(--fg-dim);font-size:.93rem;margin-top:1rem}
.lgl__intro{margin-top:1.6rem;font-size:clamp(1.02rem,1.4vw,1.15rem);color:var(--fg-dim);line-height:1.6}

/* El índice: en un texto legal la gente casi nunca lee de arriba abajo,
   viene buscando un apartado concreto. */
.lgl__toc{margin-top:2.4rem;padding:1.2rem 1.4rem;border:1px solid var(--line);border-radius:var(--r);
  background:color-mix(in srgb,var(--fg) 3%,transparent)}
.lgl__toc h2{font-family:var(--ff-head);font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-dim);font-weight:600;margin-bottom:.8rem}
.lgl__toc ol{list-style:none;counter-reset:t;display:grid;gap:.45rem}
.lgl__toc li{counter-increment:t;display:flex;gap:.6rem;font-size:.97rem}
.lgl__toc li::before{content:counter(t) ".";color:var(--fg-dim);font-variant-numeric:tabular-nums;min-width:1.4em}
.lgl__toc a{color:var(--fg);text-decoration:none;border-bottom:1px solid transparent}
.lgl__toc a:hover{border-bottom-color:var(--accent)}

.lgl section{margin-top:clamp(2.6rem,5vw,3.6rem);scroll-margin-top:90px}
.lgl h2.lgl__h{font-family:var(--ff-head);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.4vw,1.65rem);line-height:1.2;padding-top:1.4rem;border-top:1px solid var(--line)}
.lgl h3{font-family:var(--ff-head);font-weight:600;font-size:1.03rem;margin-top:1.8rem;letter-spacing:-.01em}
.lgl p,.lgl li{line-height:1.65;color:var(--fg-dim)}
.lgl p{margin-top:1rem;text-wrap:pretty}
.lgl ul{margin-top:1rem;padding-left:1.1rem;display:grid;gap:.6rem}
.lgl li::marker{color:var(--accent)}
.lgl a{color:var(--fg);text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.lgl b,.lgl strong{color:var(--fg);font-weight:600}

/* Ficha de datos identificativos: pares etiqueta/valor, no una tabla. */
.lgl__id{margin-top:1.4rem;display:grid;gap:.1rem;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lgl__id div{display:grid;grid-template-columns:1fr;gap:.15rem;padding:.85rem 1.1rem;
  background:color-mix(in srgb,var(--fg) 3%,transparent)}
.lgl__id dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-dim);font-weight:600}
.lgl__id dd{color:var(--fg)}
@media(min-width:560px){.lgl__id div{grid-template-columns:11rem 1fr;align-items:baseline;gap:1rem}}

/* Hueco pendiente de rellenar. Se ve a propósito: más vale que cante
   en la página que publicar un dato legal inventado. */
.fill{display:inline-block;padding:.08em .45em;border-radius:.3em;font-weight:600;
  background:#F2B33D;color:#1A1203;font-size:.92em}

/* Aviso de cabecera (por ejemplo, que el texto solo está en español). */
.lgl__note{margin-top:2rem;padding:.9rem 1.1rem;border-left:2px solid var(--accent);
  background:color-mix(in srgb,var(--fg) 3%,transparent);border-radius:0 var(--r) var(--r) 0}
.lgl__note p{margin-top:0;font-size:.93rem}

.lgl__end{margin-top:clamp(3rem,6vw,4rem);padding-top:1.6rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center}

/* ======================================================================
   13. LOS TRES PLANES DEL WEEKEND
   Tríptico, no carrusel: en un carrusel la gente no pasa de la primera
   diapositiva, así que esconderíamos dos de los tres planes que queremos
   enseñar. Aquí se ven los tres de golpe. En móvil se convierte en una
   tira que se arrastra con el dedo, con scroll-snap del navegador: sin
   JavaScript, sin librería y con la inercia nativa del sistema.
   ====================================================================== */
.promo--solo{grid-template-columns:1fr}
.promo--solo .promo__line{max-width:58ch}
.promo--solo::before{inset:-60% auto auto -10%;width:70%}

.plans{list-style:none;margin:clamp(1.8rem,3.5vw,2.6rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.plan{display:flex;flex-direction:column}
.plan b{display:block;font-family:var(--display);font-weight:700;font-size:1.05rem;
  letter-spacing:-.015em;margin-top:.9rem}
.plan span{display:block;color:var(--fg-dim);font-size:.9rem;line-height:1.5;margin-top:.3rem}

/* El hueco de la foto. Mientras no haya imagen, un degradado del propio
   verde con un punto de acento: se lee como una superficie, no como un
   error de carga. */
.plan__shot{aspect-ratio:4/3;border-radius:calc(var(--r) * .8);overflow:hidden;position:relative;
  background:
    radial-gradient(70% 60% at 30% 25%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%),
    linear-gradient(160deg,color-mix(in srgb,var(--fg) 9%,transparent),color-mix(in srgb,var(--fg) 3%,transparent));
  border:1px solid var(--line)}
.plan__shot img{width:100%;height:100%;object-fit:cover;display:block}

/* Tira deslizable en pantallas estrechas. El padding lateral negativo deja
   que las tarjetas lleguen al borde al arrastrar, que es lo que el dedo
   espera, sin que el texto del resto del bloque se desalinee. */
@media (max-width:760px){
  .plans{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(14rem,72%);
    overflow-x:auto;overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);
    scrollbar-width:none}
  .plans::-webkit-scrollbar{display:none}
  .plan{scroll-snap-align:start}
}

/* Sin esto la tira no desliza: .promo__body es un hijo de grid y su
   min-width:auto implícito lo obliga a crecer hasta lo que mida su
   contenido, así que las tres tarjetas lo estiraban por detrás del
   overflow:hidden de la tarjeta en vez de generar su propio scroll. */
.promo__body{min-width:0}

/* Mientras un plan no tenga foto, su hueco no se dibuja: tres rectángulos
   vacíos parecen un error de carga, y el texto ya cuenta el plan. En cuanto
   se mete el <img> dentro, el hueco aparece solo. */
.plan__shot:empty{display:none}
.plan__shot:empty + b{margin-top:0}

/* En cuanto uno de los tres planes tiene foto, los otros recuperan su hueco
   aunque estén vacíos: si no, el del medio subiría el texto y las tres
   tarjetas quedarían descuadradas entre sí. Solo desaparecen los tres a la
   vez, cuando no hay ninguna imagen todavía. */
.plans:has(img) .plan__shot:empty{display:block}
.plans:has(img) .plan__shot:empty + b{margin-top:.9rem}

/* =========================================================================
   EN NARANJA
   El naranja de marca ocupando una sección entera. No es un tema aparte:
   es el mismo sistema con los tokens cambiados, así que todo lo que hay
   dentro (botones, logotipo, enlaces, cenefas) se recoloca solo.

   El terracota va un punto por debajo del de la muestra (#B34822) para que
   el texto secundario llegue a 4.9:1 sobre el fondo. El acento pasa a ser
   la crema: sobre naranja, el naranja ya no puede destacar nada.
   ========================================================================= */
.fuego{
  --bg:        #A8401D;
  --surface:   #8E3416;
  --surface-2: #7C2C11;
  --fg:        #FFF6F0;
  --fg-dim:    #F6E3DA;
  --line:      rgba(255,246,240,.26);
  --line-2:    rgba(255,246,240,.48);
  --accent:    #FFF6F0;
  --accent-fg: #5E1E0A;
  --lima:      #FFF6F0;
  background:var(--bg);color:var(--fg);
  position:relative;overflow:hidden;
}
.fuego::before{content:"";position:absolute;inset:-40% -12% auto 48%;height:150%;pointer-events:none;
  background:radial-gradient(45% 45% at 50% 50%,rgba(255,246,240,.15),transparent 70%)}
.fuego > *{position:relative}
.fuego.band{border-block-color:rgba(255,246,240,.32)}
.fuego .btn--ghost:hover{background:rgba(255,246,240,.14);border-color:var(--fg)}

/* En naranja, la cita del manifiesto se lleva la crema: dentro de una
   sección de color, el bloque claro es lo que destaca, no el acento. */
.fuego .ratio{background:rgba(255,246,240,.2);border-color:transparent}

/* -------------------------------------------------------------------------
   EN PAPEL
   El otro extremo del mismo sistema: fondo crema y tinta verde, como el
   dossier impreso. Sirve para los bloques que se leen despacio —una tabla,
   unas citas—, donde el verde oscuro cansa. El acento aquí no puede ser el
   naranja encendido de la marca, que sobre crema no contrasta: entra el
   terracota, el mismo de .fuego, y así los dos registros riman.
   ------------------------------------------------------------------------- */
.papel{
  --bg:        #F2F4EA;
  --surface:   #FDFDF8;
  --surface-2: #E6EADB;
  --fg:        #0E3334;
  --fg-dim:    #44635F;
  --line:      rgba(14,51,52,.16);
  --line-2:    rgba(14,51,52,.34);
  --accent:    #A8401D;
  --accent-fg: #FFF6F0;
  --lima:      #6E7F18;
  --shadow:    0 20px 44px rgba(14,51,52,.12);
  background:var(--bg);color:var(--fg);
}
.papel .q,.papel .cards > div{background:var(--surface)}
.papel .btn--ghost{color:var(--fg)}
.papel .btn--ghost:hover{background:var(--surface);border-color:var(--fg)}
.papel ::selection{background:var(--accent);color:var(--accent-fg)}

.band__in > .band__label:first-child{margin-top:0}