/* ===============================
   RecurreTusMultas — Coming Soon
   Clean Stylesheet
   =============================== */

:root {
  --bg-light: #ffffff;  --fg-light: #0e0f11;
  --bg-dark:  #0b0c0e;  --fg-dark:  #f3f5f7;

  --accent: #ba2a32;    --muted: #8b8f96;

  --max: 980px;         --pad: 24px;

  --reveal-ms: 700ms;   --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg-light);
  color: var(--fg-light);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Layout ---------- */

.section{
  position: relative;
  min-height: 100svh;    
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: calc(var(--pad) * 2) var(--pad);
  transition: background-color .4s ease, color .4s ease;
  scroll-snap-align: start;   
  scroll-snap-stop: always;   
}


.section--light { background: var(--bg-light); color: var(--fg-light); }
.section--dark  { background: var(--bg-dark);  color: var(--fg-dark);  }
.section--light .layer { display: none; }
.is-hero .layer { display: block; }


.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  text-align: center;
}

/* ---------- Branding & text ---------- */

.brand {
  margin: 0 0 12px;
  font-family: "Michroma", system-ui;
  line-height: 1.2;
  font-size: clamp(28px, 6vw, 46px);
  letter-spacing: .4px;
}

.brand__logo { font-size: 1.1em; }
.subtitle   { margin: 0 0 28px; color: var(--muted); }

.headline {
  margin: 0 0 12px;
  font-family: "Michroma", system-ui;
  font-size: clamp(26px, 5.4vw, 40px);
  line-height: 1.2;
}

.copy {
  margin: 0 auto;
  max-width: 60ch;
  font-size: clamp(14px, 2.6vw, 18px);
  color: color-mix(in oklab, currentColor 75%, var(--muted));
}

.link {
  color: inherit;
  border-bottom: 1px dotted currentColor;
  text-decoration: none;
}
.link:hover { opacity: .85; }

.footer { margin-top: 30px; opacity: .8; font-size: 13px; }

/* ---------- Scroll hint ---------- */

.scroll-indicator {
  margin: 42px auto 0;
  border: 1px solid currentColor;
  background: transparent;
  padding: 10px 14px;
  border-radius: 999px;
  display: inline-flex;
  gap: .6rem;
  align-items: center;
  cursor: pointer;
  transition: transform .15s ease;
}
.scroll-indicator:hover { transform: translateY(2px); }
.scroll-indicator__text  { font-size: 14px; }
.scroll-indicator__arrow { display: inline-block; font-size: 18px; animation: bounce 1400ms infinite; }

@keyframes bounce {
  0%, 100% { translate: 0 0; opacity: .9; }
  50%      { translate: 0 6px; opacity: 1; }
}

/* ---------- Parallax layers (decorativos) ---------- */

.layer {
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  pointer-events: none;
  opacity: .08;
  transform: translateZ(0);
}
.is-hero .layer { inset: 0; height: 100%; } /* el hero cubre todo, sin cortes */

.layer--dots {
  background-image: radial-gradient(currentColor 1px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: .085;
}
.layer--bg {
  background: linear-gradient(180deg, transparent 60%, color-mix(in oklab, var(--accent) 14%, transparent));
  opacity: .10;
}

/* capas extra (sutiles) para secciones */
.layer--doc   { background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--accent) 20%, transparent)); }
.layer--lines { background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 12px); }
.layer--cards { background: linear-gradient(180deg, transparent, currentColor); }
.layer--icons { background: repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 16px); }
.layer--pages { background: linear-gradient(180deg, currentColor, transparent); }

/* ---------- Reveal (IntersectionObserver añade .in-view) ---------- */

.observe { opacity: 0; translate: 0 10px; will-change: opacity, translate; }
.in-view { opacity: 1; translate: 0 0; transition: opacity var(--reveal-ms) var(--ease), translate var(--reveal-ms) var(--ease); }
.observe[data-reveal="1"] { transition-delay: 90ms; }
.observe[data-reveal="2"] { transition-delay: 180ms; }

/* ---------- Índice “histórico” compacto (chips flotantes) ---------- */

.index {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 30;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg-dark) 55%, transparent);
  color: var(--fg-dark);
  border: 1px solid color-mix(in oklab, #fff 10%, transparent);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.index--show { opacity: 1; pointer-events: auto; }
.index--idle { opacity: .35; }
.index:hover { opacity: 1; }

.index__item {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  font: 600 12px/1 Inter;
  letter-spacing: .2px;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.index__item.is-available { opacity: 1; transform: scale(1); }
.index__item:hover        { background: color-mix(in oklab, #fff 12%, transparent); }
.index__item.is-active    { background: var(--accent); color: #fff; }

/* ---------- Noscript ---------- */

.noscript {
  position: fixed;
  inset: auto 0 0 0;
  padding: 12px 16px;
  font-size: 14px;
  background: #111;
  color: #fff;
  text-align: center;
  z-index: 50;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .scroll-indicator__arrow { animation: none; }
  .observe, .in-view {
    transition: none !important;
    translate: none !important;
    opacity: 1 !important;
  }
  .layer { display: none; }
}

/* Hide index when there are no available chips */
.index--empty { opacity: 0 !important; pointer-events: none !important; }

main { scroll-snap-type: y mandatory; }

/* ==== HERO video background ==== */
#hero { position: relative; }
#hero .container { position: relative; z-index: 1; } /* contenido encima del vídeo */

.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(1.05);
}

.hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.20), transparent 70%),
    linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.35));
  pointer-events: none;
}

/* HERO — siempre en modo claro sobre vídeo */
#hero {
  color: var(--fg-dark); /* texto en claro */
}

#hero .brand__text,
#hero .subtitle,
#hero .headline,
#hero .copy {
  color: var(--fg-dark);
  text-shadow: 0 1px 4px rgba(0,0,0,.45); /* contraste extra */
}


#hero{ position: relative; min-height: 100svh; color: var(--fg-dark); }
#hero .container{ position: relative; z-index: 1; }

/* Vídeo siempre visible */
.hero-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: saturate(1.05);
}

/* Overlay para legibilidad del texto */
.hero-overlay{
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.30), transparent 70%),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.45));
}

/* Texto legible sobre cualquier frame */
#hero .brand__text, #hero .subtitle, #hero .headline, #hero .copy{
  color: var(--fg-dark);
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}

/* Evitar cortes en móvil */
#hero .container{
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  overflow-wrap: anywhere;
}