/* =========================================================
   Abónate a Volver — CB Gran Canaria
   Réplica HTML/CSS del frame de Figma (1440 × 5162)
   + tabla de precios (1000 px más de alto en desktop, 560 en mobile)
   Todas las medidas son las del diseño, expresadas en una
   unidad fluida (--u) para que el frame escale con el viewport.
   ========================================================= */

/* ---------- Tipografías ---------- */

@font-face {
  font-family: "PP Lettra Mono";
  font-style: normal;
  font-weight: 200;
  font-display: block;
  src: url("assets/fonts/PPLettraMono-Ultralight.otf") format("opentype");
}

@font-face {
  font-family: "PP Lettra Mono";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("assets/fonts/PPLettraMono-Medium.otf") format("opentype");
}

:root {
  --yellow: #ffff00;
  --blue: #0082ca;
  /* --radius se define en .stage > * porque depende de --u */
  --font: "PP Lettra Mono", ui-monospace, monospace;
  --tracking: -0.09em;   /* tracking del diseño, igual en todos los textos */
}

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

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

body {
  margin: 0;
  font-weight: 200;   /* Ultralight por defecto; Medium solo en nota y línea legal */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--yellow);
  color: var(--blue);
  font-family: var(--font);
}

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

/* ---------- Lienzo ---------- */

.stage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  aspect-ratio: 1440 / 6162;
  margin: 0 auto;
  background: var(--yellow);
  overflow: hidden;
  container-type: inline-size;
}

/* 1 unidad = 1px del diseño, referida al ancho real del lienzo
   (cqw evita el desfase de la barra de scroll que produce vw). */
.stage > * {
  --u: calc(100cqw / 1440);
  --radius: calc(24 * var(--u));
}

/* Base de todo elemento posicionado: usa --l/--t/--w/--h del diseño */
.hero,
.hero__wordmark,
.hero__crest,
.deco,
.manifesto__body,
.manifesto__sign,
.cta,
.btn,
.prices,
.video,
.video__play,
.lockup,
.lockup__wordmark,
.lockup__crest,
.lockup__plus,
.lockup__season,
.lockup__claim,
.team,
.footer,
.footer__crest,
.footer__legal {
  position: absolute;
  left: calc(var(--l) * var(--u));
  top: calc(var(--t) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}

/* Los saltos de línea del diseño son manuales: nada de reflow. */
.squeeze {
  display: inline-block;
  white-space: nowrap;
}

/* El cuerpo del manifiesto viene escalado en horizontal en el diseño. */
.manifesto__body .squeeze {
  transform: scaleX(0.831);
  transform-origin: center;
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  --l: 32; --t: 25; --w: 1377; --h: 944;
  border-radius: var(--radius);
  overflow: hidden;
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46.26%;
}

.hero__wordmark {
  --l: 247; --t: 403; --w: 881; --h: 138;
  margin: 0;
}

.hero__wordmark-art { width: 100%; height: 100%; }
.hero__wordmark-art--block { display: none; }   /* solo mobile */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hero__crest { --l: 588; --t: 577; --w: 206; --h: 195; }

/* =========================================================
   MANIFIESTO
   ========================================================= */

.deco--wormhole-top { --l: 692; --t: 1032; --w: 89; --h: 120; }
.deco--figure-mid   { --l: 695; --t: 1925; --w: 69;  --h: 87; }

.manifesto__body,
.manifesto__sign {
  --w: 2400;
  --h: auto;
  height: auto;
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  text-transform: uppercase;
  font-weight: 200;
  line-height: calc(44 * var(--u));
  letter-spacing: var(--tracking);
}

.manifesto__body { --l: 734; --t: 1221; font-size: calc(43.75 * var(--u)); }
.manifesto__sign { --l: 725; --t: 1746; font-size: calc(36.25 * var(--u)); }

/* =========================================================
   CTA
   ========================================================= */

.cta { --l: 529; --t: 2204; --w: 382; --h: 176; }   /* un solo botón, centrado */

.btn {
  --t: 0; --w: 382; --h: 176;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: calc(3 * var(--u)) solid var(--blue);
  border-radius: var(--radius);
  color: var(--blue);
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 160ms ease, color 160ms ease;
}

.btn--nuevos { --l: 0; }

a.btn:hover,
a.btn:focus-visible {
  background: var(--blue);
  color: var(--yellow);
  outline: none;
}

.btn.is-disabled {
  cursor: not-allowed;
}

.btn__title {
  font-weight: 200;
  font-size: calc(60 * var(--u));
  line-height: calc(55 * var(--u));
  letter-spacing: var(--tracking);
}

.btn--nuevos .btn__title { margin-top: calc(-19 * var(--u)); }

.btn__note {
  position: absolute;
  left: calc(3 * var(--u));
  right: calc(-3 * var(--u));
  top: calc(131 * var(--u));
  font-weight: 500;
  font-size: calc(16 * var(--u));
  letter-spacing: -0.03em;
  text-transform: none;
}

/* =========================================================
   PRECIOS
   Altura determinista (13 filas × --row + 14 × --gap) para que
   encaje en el lienzo de posiciones absolutas.
   ========================================================= */

.prices {
  --l: 220; --t: 2572; --w: 1000;
  --row: 56;
  --gap: 6;
  height: auto;
  border-collapse: separate;
  border-spacing: calc(var(--gap) * var(--u));
  table-layout: fixed;
  text-transform: uppercase;
  font-weight: 500;
  font-size: calc(26 * var(--u));
  line-height: 1;
  letter-spacing: -0.03em;
}

.prices th,
.prices td {
  height: calc(var(--row) * var(--u));
  padding: 0 calc(20 * var(--u));
  background: #fff;
  color: var(--blue);
  text-align: left;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
}

.prices thead th {
  background: var(--blue);
  color: var(--yellow);
  text-align: center;
}

.prices thead th[rowspan] { height: calc((var(--row) * 2 + var(--gap)) * var(--u)); }

.prices tbody th { padding-left: calc(40 * var(--u)); }


.prices .prices__sector { width: 50%; }

.prices sup {
  font-size: 0.6em;
  line-height: 0;
  vertical-align: super;
}

.prices small {
  font-size: 0.7em;
  text-transform: none;
}

/* =========================================================
   VÍDEO
   ========================================================= */

.video {
  --l: 32; --t: 3572; --w: 1377; --h: 722;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
}

.video__media {
  width: 100%;
  height: 100%;
  cursor: pointer;
  object-fit: cover;
  object-position: 50% 33.33%;
}

/* Play del diseño como overlay. El vídeo solo lleva `controls` mientras
   reproduce (lo pone/quita el propio elemento en onplay/onpause), así que
   el atributo sirve de estado para el CSS. */
.video__play {
  cursor: pointer;
  transition: opacity 150ms ease, filter 150ms ease;
}

.video__play:hover { filter: brightness(0.8); }

/* reproduciendo: el play desaparece y deja de tapar el vídeo */
.video__media[controls] ~ .video__play {
  opacity: 0;
  pointer-events: none;
}

.only-mobile { display: none; }

.video__play {
  --l: 609; --t: 272; --w: 183; --h: 183;
}

/* =========================================================
   LOCKUP
   ========================================================= */

.lockup { --l: 0; --t: 4346; --w: 1440; --h: 570; }

.lockup__wordmark { --l: 68;   --t: 0;   --w: 802; --h: 488; }
.lockup__crest    { --l: 961;  --t: 67;  --w: 397; --h: 430; }

.lockup__plus { --w: 22; --h: 22; }
.lockup__plus--tl { --l: 928;  --t: 46; }
.lockup__plus--tr { --l: 1383; --t: 46; }
.lockup__plus--bl { --l: 928;  --t: 475; }
.lockup__plus--br { --l: 1383; --t: 475; }

.lockup__season { --l: 68;  --t: 513; --w: 116; --h: 45; }
.lockup__claim  { --l: 762; --t: 509; --w: 108; --h: 56; }

/* =========================================================
   AFICIÓN
   ========================================================= */

.team {
  --l: 32; --t: 5018; --w: 1377; --h: 630;
  object-fit: cover;
  object-position: 50% 38.6%;
  border-radius: var(--radius);
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer { --l: 0; --t: 5755; --w: 1440; --h: 407; }

.footer__crest { --l: 646; --t: 0; --w: 150; --h: 144; }

.deco--wormhole-foot { --l: 53;   --t: 275; --w: 71; --h: 96; }
.deco--figure-foot   { --l: 1315; --t: 291; --w: 69; --h: 87; }

.footer__legal {
  --l: 711; --t: 338; --w: 1200;
  height: auto;
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  font-weight: 500;
  font-size: calc(20 * var(--u));
  line-height: calc(27 * var(--u));
  letter-spacing: -0.03em;
}

.footer__legal a {
  color: inherit;
  text-decoration: none;
}

.footer__legal a:hover,
.footer__legal a:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* =========================================================
   HEADER STICKY
   Fijo arriba, oculto hasta 200 px de scroll. La aparición es una
   animación de scroll (CSS puro, sin JS). Si el navegador no soporta
   scroll-driven animations, el header se muestra siempre en lugar de
   quedar invisible.
   ========================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  container-type: inline-size;   /* referencia de --u sin barra de scroll */
  pointer-events: none;          /* solo la barra recibe clics */
}

.site-header__bar {
  --u: calc(100cqw / 1440);
  position: relative;
  pointer-events: auto;
  width: calc(1422 * var(--u));
  height: calc(145 * var(--u));
  margin: calc(8 * var(--u)) auto 0;
  background: var(--yellow);
  border-radius: calc(22 * var(--u));
  /* borde interior como el de los botones, sin afectar a la caja */
  box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--blue);
}

.site-header__brand,
.site-header__claim,
.site-header__cta {
  position: absolute;
  left: calc(var(--l) * var(--u));
  top: calc(var(--t) * var(--u));
}

.site-header__brand {
  --l: 52; --t: 19;
  display: flex;
  align-items: flex-start;
  gap: calc(18 * var(--u));
  text-decoration: none;
}

.site-header__crest { width: calc(95 * var(--u)); height: calc(91 * var(--u)); }

.site-header__wordmark { width: calc(545 * var(--u)); height: calc(86 * var(--u)); }

.site-header__claim {
  --l: 771; --t: 48;
  width: calc(161 * var(--u));
  margin: 0;
  color: var(--blue);
  text-transform: uppercase;
  text-align: center;
  font-weight: 200;
  font-size: calc(22 * var(--u));
  line-height: calc(21.6 * var(--u));
  letter-spacing: -0.064em;
}

.site-header__cta {
  --l: 1158; --t: 30;   /* un solo botón: mismo margen derecho que antes */
  display: flex;
  gap: calc(13 * var(--u));
}

.hbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--u));
  height: calc(69 * var(--u));
  border: calc(2 * var(--u)) solid var(--blue);
  border-radius: calc(24 * var(--u));
  color: var(--blue);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 200;
  font-size: calc(25 * var(--u));
  line-height: 1;
  letter-spacing: var(--tracking);
  transition: background-color 160ms ease, color 160ms ease;
}

.hbtn--nuevos { width: calc(215 * var(--u)); }

a.hbtn:hover,
a.hbtn:focus-visible {
  background: var(--blue);
  color: var(--yellow);
  outline: none;
}

.hbtn.is-disabled { cursor: not-allowed; }

.hbtn__note {
  font-weight: 500;
  font-size: calc(11 * var(--u));
  letter-spacing: -0.03em;
  text-transform: none;
}

@keyframes header-reveal {
  from {
    opacity: 0;
    transform: translateY(-40px);
    pointer-events: none;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

@supports (animation-timeline: scroll()) {
  .site-header {
    animation: header-reveal 1s ease-out both;
    animation-timeline: scroll(root block);
    animation-range: 200px 440px;
  }
}

@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: scroll()) {
    .site-header { animation-range: 200px 201px; }
  }
}

/* =========================================================
   MOBILE — Frame 2 del diseño (393 × 3673, + 560 de la tabla)
   Mismo DOM, otro sistema de coordenadas: se reescriben
   --l/--t/--w/--h y la unidad pasa a 100cqw/393.
   ========================================================= */

@media (max-width: 767px) {

  .stage {
    max-width: none;
    aspect-ratio: 393 / 4233;
  }

  .stage > * {
    --u: calc(100cqw / 393);
    --radius: calc(24 * var(--u));
  }

  .only-desktop { display: none; }
  .only-mobile { display: block; }

  /* ---------- Hero ---------- */

  .hero { --l: 15; --t: 21; --w: 366; --h: 699; }
  .hero__photo { object-position: 50% 50%; }

  .hero__wordmark { --l: 58; --t: 292; --w: 270; --h: 165; }
  .hero__wordmark-art--line  { display: none; }
  .hero__wordmark-art--block { display: block; }

  .hero__crest { --l: 124; --t: 521; --w: 110; --h: 103; }

  /* ---------- Manifiesto ----------
     En mobile es un único bloque que fluye: se anulan los saltos
     de línea del diseño desktop y la compresión horizontal, y los
     dos párrafos se unen en un mismo flujo de texto. */

  .manifesto {
    position: absolute;
    left: calc(15 * var(--u));
    top: calc(887 * var(--u));
    width: calc(366 * var(--u));
  }

  .manifesto__body,
  .manifesto__sign {
    position: static;
    display: inline;
    left: auto; top: auto;
    width: auto; height: auto;
    transform: none;
    font-size: calc(20.5 * var(--u));
    line-height: calc(24 * var(--u));
    letter-spacing: -0.074em;
  }

  .manifesto { text-align: center; text-transform: uppercase; color: var(--blue); }

  .manifesto .squeeze {
    display: inline;
    white-space: normal;
    transform: none;
  }

  .manifesto br { display: none; }
  .manifesto__sign::before { content: "\00a0\00a0"; }

  .deco--wormhole-top { --l: 175; --t: 799; --w: 33; --h: 44; }
  .deco--figure-mid   { --l: 176; --t: 1382; --w: 32; --h: 40; }

  /* ---------- CTA ---------- */

  .cta { --l: 81.5; --t: 1486; --w: 230; --h: 102; }

  .btn { --w: 230; border-width: calc(2 * var(--u)); }
  .btn--nuevos { --l: 0; --t: 0; --h: 102; }

  .btn__title {
    font-size: calc(30 * var(--u));
    line-height: calc(30 * var(--u));
  }

  .btn--nuevos .btn__title { margin-top: calc(-16 * var(--u)); }

  .btn__note {
    top: calc(72 * var(--u));
    left: 0;
    right: 0;
    font-size: calc(8 * var(--u));
  }

  /* ---------- Precios ---------- */

  .prices {
    --l: 15; --t: 1696; --w: 366;
    --row: 40;
    --gap: 3;
    font-size: calc(12.5 * var(--u));
  }

  .prices th,
  .prices td { padding: 0 calc(8 * var(--u)); }

  .prices tbody th { padding-left: calc(12 * var(--u)); }

  .prices .prices__sector { width: 46%; }

  /* ---------- Vídeo ---------- */

  .video { --l: 15; --t: 2371; --w: 366; --h: 722; }
  .video__media { object-position: 50% 50%; }
  .video__play { --l: 140; --t: 312; --w: 113; --h: 113; }

  /* ---------- Lockup ---------- */

  .lockup { --l: 0; --t: 3110; --w: 393; --h: 240; }
  .lockup__wordmark { --l: 28;  --t: 0;   --w: 337; --h: 205; }
  .lockup__season   { --l: 28;  --t: 215; --w: 51;  --h: 20; }
  .lockup__claim    { --l: 319; --t: 215; --w: 48;  --h: 25; }

  /* ---------- Afición (espejada en el diseño mobile) ---------- */

  .team {
    --l: 15; --t: 3376; --w: 368; --h: 336;
    object-position: 50% 32.5%;
    transform: scaleX(-1);
  }

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

  .footer { --l: 0; --t: 3819; --w: 393; --h: 414; }
  .footer__crest { --l: 94; --t: 0; --w: 206; --h: 197; }
  .deco--wormhole-foot { --l: 16;  --t: 307; --w: 39; --h: 53; }
  .deco--figure-foot   { --l: 337; --t: 316; --w: 35; --h: 45; }

  .footer__legal {
    --l: 196.5; --t: 375;   /* centro del lienzo mobile; el translateX(-50%) viene del desktop */
    width: calc(292 * var(--u));   /* la primera línea mide 284: con 263 desbordaba y descentraba */
    font-size: calc(12 * var(--u));
    line-height: calc(15 * var(--u));
  }

  .footer__legal .squeeze {
    display: inline;
    white-space: normal;
    transform: none;
  }

  /* ---------- Header mobile ---------- */

  .site-header__bar {
    --u: calc(100cqw / 393);
    width: calc(384 * var(--u));
    height: calc(68 * var(--u));
    margin: calc(6 * var(--u)) auto 0;
    border-radius: calc(10 * var(--u));
  }

  .site-header__brand { --l: 7; --t: 7; gap: calc(10 * var(--u)); }
  .site-header__crest { width: calc(53 * var(--u)); height: calc(51 * var(--u)); }
  .site-header__wordmark { width: calc(306 * var(--u)); height: calc(48 * var(--u)); }

  .site-header__claim,
  .site-header__cta { display: none; }
}