/* =============================================================
   SUERTE 506 — Fundamentos
   Tokens, reset, tipografía óptica, materiales y utilidades.
   ============================================================= */

/* ---------- 1. Tokens ------------------------------------- */
:root {
  /* Marca (tomados del logo) */
  --rojo:        #d61f2c;
  --rojo-vivo:   #ff3b41;
  --azul:        #1a56c4;
  --azul-vivo:   #3d7bff;

  /* Escala neutra — oscuro */
  --negro:       #000000;
  --carbon:      #0a0a0a;
  --grafito:     #141416;
  --humo:        #1d1d1f;
  --gris-borde:  rgba(255,255,255,.10);

  /* Escala neutra — claro (secciones alternas, estilo Apple) */
  --nieve:       #fbfbfd;
  --perla:       #f2f2f4;
  --tinta:       #1d1d1f;

  /* Texto sobre oscuro */
  --txt:         #f5f5f7;
  --txt-2:       rgba(245,245,247,.72);
  --txt-3:       rgba(245,245,247,.46);

  /* Texto sobre claro */
  --txt-inv:     #1d1d1f;
  --txt-inv-2:   rgba(29,29,31,.68);
  --txt-inv-3:   rgba(29,29,31,.44);

  /* Capas de relleno y acento. Se redefinen dentro de las
     secciones claras, así cada componente se adapta solo
     en vez de necesitar una regla aparte para cada fondo. */
  --capa:        rgba(255,255,255,.05);
  --capa-2:      rgba(255,255,255,.085);
  --capa-3:      rgba(255,255,255,.13);
  --acento:      var(--rojo-vivo);
  --enlace:      var(--azul-vivo);
  --tarjeta:     linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));

  /* Ritmo vertical y anchos */
  --gutter:      max(1.25rem, env(safe-area-inset-left));
  --ancho:       min(100% - var(--gutter) * 2, 78rem);
  --ancho-texto: min(100% - var(--gutter) * 2, 44rem);
  --seccion:     clamp(5rem, 11vh + 3rem, 9rem);

  /* Radios — grandes y suaves, nunca pastilla salvo en controles */
  --r-sm: .625rem;
  --r-md: 1.125rem;
  --r-lg: 1.75rem;
  --r-xl: 2.25rem;

  /* Curvas. La de entrada es la de Apple: sale rápido, aterriza suave */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in:   cubic-bezier(.7, 0, .84, 0);   /* inversa exacta, para el camino de vuelta */
  --ease-mid:  cubic-bezier(.4, 0, .2, 1);

  /* Altura del nav flotante */
  --nav-h: 3rem;

  color-scheme: dark;
}

/* ---------- 2. Reset -------------------------------------- */

/* `hidden` tiene que ganarle a cualquier display de componente.
   Sin esto, un .formulario { display: grid } sigue visible
   aunque lleve el atributo, y el bug es invisible al leer el
   HTML. */
[hidden] { display: none !important; }

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  overflow-x: clip;
}

body {
  background: var(--negro);
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;   /* respaldo */
  overflow-x: clip;     /* clip no crea scroll: el celular ya no puede "alejarse" */
  overscroll-behavior-y: none;
}

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

/* picture desaparece del layout: si no, es una caja inline sin
   altura y cualquier height:100% de la imagen no resuelve. */
picture { display: contents; }

button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

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

ul[role='list'], ol[role='list'] { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--azul-vivo);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--rojo); color: #fff; }

/* ---------- 3. Tipografía óptica --------------------------
   El tracking cambia con el tamaño: negativo cuando el texto
   crece, casi cero en el cuerpo, positivo en lo diminuto.
   El interlineado se mueve al revés.                        */

.t-display {
  font-size: clamp(2.75rem, 9.5vw, 6.5rem);
  line-height: .96;
  letter-spacing: -.035em;
  font-weight: 700;
}

.t-title {
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.028em;
  font-weight: 650;
}

.t-headline {
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 600;
}

.t-lead {
  font-size: clamp(1.125rem, 1.9vw, 1.375rem);
  line-height: 1.45;
  letter-spacing: -.014em;
  color: var(--txt-2);
  font-weight: 400;
}

.t-body { font-size: 1.0625rem; line-height: 1.55; letter-spacing: -.011em; }

.t-caption {
  font-size: .8125rem;
  line-height: 1.4;
  letter-spacing: .005em;
  color: var(--txt-3);
}

/* Ojal / etiqueta de sección */
.t-eyebrow {
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento);
}

/* Números grandes: tabulares para que no bailen al contar */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ---------- 4. Layout ------------------------------------- */
.contenedor { width: var(--ancho); margin-inline: auto; }
.contenedor-texto { width: var(--ancho-texto); margin-inline: auto; }

.seccion { padding-block: var(--seccion); position: relative; }
.seccion--clara {
  background: var(--nieve);
  --txt:        var(--txt-inv);
  --txt-2:      var(--txt-inv-2);
  --txt-3:      var(--txt-inv-3);
  --gris-borde: rgba(0,0,0,.10);
  --capa:       rgba(0,0,0,.035);
  --capa-2:     rgba(0,0,0,.062);
  --capa-3:     rgba(0,0,0,.10);
  --acento:     var(--rojo);
  --enlace:     var(--azul);
  --tarjeta:    #fff;
  color: var(--txt);
}
.seccion--carbon { background: var(--carbon); }

.centro { text-align: center; }
.apilado > * + * { margin-top: var(--gap, 1rem); }

/* ---------- 5. Materiales ---------------------------------
   Capa translúcida que deja pasar el contenido por debajo.
   Nunca se apila un material claro sobre otro claro.        */
.material {
  background: rgba(22,22,24,.62);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,.09);
  /* borde superior más claro: la luz pegando en el canto del vidrio */
  border-top-color: rgba(255,255,255,.16);
}

.material--claro {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(0,0,0,.07);
  border-top-color: rgba(255,255,255,.9);
  color: var(--txt-inv);
}

/* Superficie sólida (tarjetas dentro de secciones oscuras) */
.superficie {
  background: var(--tarjeta);
  border: 1px solid var(--gris-borde);
  border-radius: var(--r-lg);
}

/* Dentro de una sección clara el vidrio también aclara */
.seccion--clara .material {
  background: rgba(255,255,255,.75);
  border-color: rgba(0,0,0,.08);
  border-top-color: rgba(255,255,255,.95);
  color: var(--txt-inv);
}

/* ---------- 6. Botones ------------------------------------
   El estado se ve al PRESIONAR, no al soltar.               */
.btn {
  --btn-bg: var(--txt);
  --btn-fg: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.875rem;
  padding: .75rem 1.5rem;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 550;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform 110ms var(--ease-out), filter 160ms var(--ease-mid), opacity 160ms;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover   { filter: brightness(.93); }
.btn:active  { transform: scale(.965); filter: brightness(.88); }
.btn[disabled] { opacity: .4; pointer-events: none; }

.btn--rojo   { --btn-bg: var(--rojo); --btn-fg: #fff; }
.btn--rojo:hover { filter: brightness(1.08); }
.btn--azul   { --btn-bg: var(--azul); --btn-fg: #fff; }
.btn--fantasma {
  --btn-bg: transparent; --btn-fg: var(--txt);
  border: 1px solid var(--capa-3);
}
.btn--fantasma:hover { background: var(--capa-2); filter: none; }

.btn--grande { min-height: 3.25rem; padding: .875rem 2rem; font-size: 1.0625rem; }

/* Enlace con flecha, patrón Apple */
.enlace {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--enlace); font-size: 1.0625rem; font-weight: 450;
  transition: gap 220ms var(--ease-out);
}
.enlace::after { content: '›'; font-size: 1.2em; line-height: 0; transform: translateY(-.04em); }
.enlace:hover { gap: .5rem; }

/* ---------- 7. Aparición al hacer scroll ------------------ */
[data-revelar] {
  opacity: 0;
  transform: translate3d(0, 1.75rem, 0);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--retraso, 0ms);
  will-change: opacity, transform;
}
[data-revelar].visible { opacity: 1; transform: none; }
[data-revelar].visible { will-change: auto; }

/* ---------- 8. Accesibilidad ------------------------------ */
.saltar {
  position: absolute; left: 50%; top: .5rem; transform: translate(-50%, -400%);
  z-index: 200; padding: .625rem 1.25rem; border-radius: 999px;
  background: var(--txt); color: #000; font-weight: 600; font-size: .9375rem;
  transition: transform 220ms var(--ease-out);
}
.saltar:focus { transform: translate(-50%, 0); }

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

/* Movimiento reducido: se mantiene el entendimiento, se quita el vestíbulo */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .16s !important;
    scroll-behavior: auto !important;
  }
  [data-revelar] { transform: none; transition: opacity 240ms ease; }
  .btn:active { transform: none; }
}

/* Transparencia reducida: el vidrio se vuelve opaco */
@media (prefers-reduced-transparency: reduce) {
  .material { background: #161618; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .material--claro { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav::before { background: #0a0a0c !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav__menu { background: #0a0a0c !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Más contraste: fondos casi sólidos y bordes definidos */
@media (prefers-contrast: more) {
  :root { --txt-2: rgba(245,245,247,.92); --txt-3: rgba(245,245,247,.78); --gris-borde: rgba(255,255,255,.35); }
  .material { background: rgba(10,10,12,.96); border-color: rgba(255,255,255,.4); }
  .superficie { background: #111; border-color: rgba(255,255,255,.35); }
}