/* ==========================================================================
   Project X Madrid — sistema de diseño
   Negro + rojo de marca (#E30613). Todo lo demás se construye desde aquí.
   ========================================================================== */

:root {
  /* --- Color de marca --- */
  --rojo: #e30613;
  --rojo-vivo: #ff1130;
  --rojo-suave: #ff5c6e;
  --violeta: #7b2cff;

  /* --- Fondos: del negro del hero al gris de las tarjetas --- */
  --fondo: #08070a;
  --fondo-alt: #0e0d13;
  --superficie: #16141d;
  --superficie-alta: #1f1c29;
  --borde: #2a2733;

  /* --- Texto --- */
  --texto: #f4f3f7;
  --texto-medio: #b6b2c4;
  --texto-tenue: #7d7a8a;

  /* --- Efectos --- */
  --brillo-rojo: 0 0 32px rgba(227, 6, 19, .45);
  --brillo-rojo-fuerte: 0 0 12px rgba(255, 17, 48, .9), 0 0 40px rgba(227, 6, 19, .55);
  --sombra-card: 0 18px 50px rgba(0, 0, 0, .55);
  --degradado-rojo: linear-gradient(120deg, var(--rojo) 0%, var(--rojo-vivo) 55%, #ff4d1f 100%);

  /* --- Medidas --- */
  --ancho: 1180px;
  --radio: 18px;
  --radio-s: 12px;
  --radio-pill: 999px;

  /* Ritmo vertical de las secciones.
     Estaba en 7rem: sumado al de la sección siguiente daban 224 px de vacío
     entre bloque y bloque y la web parecía deshabitada. 5rem deja respirar
     sin que haya que hacer scroll a ciegas entre una cosa y la otra. */
  --seccion-y: clamp(2.75rem, 6vw, 5rem);
  --gap: clamp(1rem, 2.5vw, 2rem);

  /* Alto real de la barra de navegación, usado para el scroll con anclas */
  --nav-h: 68px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  scroll-behavior: smooth;
  /* Cualquier ancla queda por debajo de la barra fija, no oculta detrás */
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;

  /* El sitio nunca debe desplazarse en horizontal: lo que se salga se recorta.
     Va aquí y con `clip`, no `hidden` en el body: poner overflow-x en el body
     lo convierte en el contenedor de scroll, y entonces dejan de funcionar
     window.scrollTo, el scroll suave y la posición al cambiar de página.
     `hidden` queda de reserva para navegadores sin soporte de `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

input,
button,
textarea,
select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

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

ul, ol { list-style: none; padding: 0; }

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

/* Quien haya pedido menos movimiento en su sistema no debería sufrir
   ninguna de las animaciones de entrada ni los brillos pulsantes. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Tipografía
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: 'Anton', 'Outfit', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

h1 { font-size: clamp(2.5rem, 8.5vw, 5.5rem); }
h2 { font-size: clamp(1.9rem, 5.5vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 2.6vw, 1.75rem); }

p { text-wrap: pretty; }

h1, h2, h3 { text-wrap: balance; }

strong { color: #fff; font-weight: 600; }

.acento { color: var(--rojo-vivo); }

/* Texto con el degradado de marca. Necesita fondo transparente, así que se
   aísla en su propia clase para no romper la herencia de color. */
.degradado {
  background: var(--degradado-rojo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.entradilla {
  color: var(--texto-medio);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  max-width: 62ch;
}

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

.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

@media (max-width: 480px) {
  .contenedor { width: min(100% - 1.75rem, var(--ancho)); }
}

.seccion {
  position: relative;
  isolation: isolate;
  padding-block: var(--seccion-y);
}

/* La sección alterna se aclara con un velo blanquísimo en vez de con un color
   sólido. Un fondo opaco tapaba la textura de la página y devolvía el corte
   entre secciones; así se ve a través y el efecto de alternancia es el mismo. */
.seccion--alt { background: rgba(255, 255, 255, .026); }

.cabecera-seccion {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.cabecera-seccion--centro {
  align-items: center;
  text-align: center;
}

.cabecera-seccion--centro .entradilla { margin-inline: auto; }

/* Etiqueta pequeña sobre los títulos */
.kicker {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: 'Outfit', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rojo-vivo);
}

.cabecera-seccion--centro .kicker { align-self: center; }

.kicker::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--rojo-vivo);
  box-shadow: var(--brillo-rojo);
}

.rejilla {
  display: grid;
  gap: var(--gap);
}

.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.9rem;
  border-radius: var(--radio-pill);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  text-align: center;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  /* Objetivo táctil cómodo en móvil */
  min-height: 48px;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primario {
  background: var(--degradado-rojo);
  color: #fff;
  box-shadow: var(--brillo-rojo);
}

.btn--primario:hover { box-shadow: var(--brillo-rojo-fuerte); }

.btn--wa {
  background: #25d366;
  color: #062e14;
  box-shadow: 0 0 28px rgba(37, 211, 102, .38);
}

.btn--wa:hover { box-shadow: 0 0 14px rgba(37, 211, 102, .85), 0 0 40px rgba(37, 211, 102, .45); }

.btn--fantasma {
  border: 2px solid var(--borde);
  color: var(--texto);
  background: rgba(255, 255, 255, .02);
}

.btn--fantasma:hover {
  border-color: var(--rojo-vivo);
  color: #fff;
  box-shadow: var(--brillo-rojo);
}

.btn--bloque { width: 100%; }

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}

.acciones--centro { justify-content: center; }

/* En pantallas estrechas los botones ocupan la fila entera: dos botones
   apretados uno al lado del otro se cortan el texto. */
@media (max-width: 420px) {
  .acciones .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  isolation: isolate;
  /* Un degradado en vez de gris plano: la esquina alta coge algo de luz */
  background: linear-gradient(155deg, var(--superficie-alta) 0%, var(--superficie) 55%);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

/* Resplandor rojo dormido en la esquina; despierta al pasar por encima */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 100% 0%, rgba(227, 6, 19, .16), transparent 55%);
  opacity: .5;
  transition: opacity .3s ease;
}

/* Filo rojo superior que se enciende al pasar */
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--degradado-rojo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  z-index: 1;
}

.card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 17, 48, .55);
  box-shadow: var(--sombra-card), var(--brillo-rojo);
}

.card:hover::after { opacity: 1; }
.card:hover::before { transform: scaleX(1); }

.card__cuerpo {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

/* La barrita bajo el título le da firma de marca a cualquier tarjeta */
.card__cuerpo h3::after {
  content: '';
  display: block;
  width: 2.1rem;
  height: 3px;
  margin-top: .5rem;
  border-radius: 2px;
  background: var(--degradado-rojo);
}

.card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--superficie-alta);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: transform .5s ease;
}

.card:hover .card__media img { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   Listas de "qué incluye"
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Listas de "qué incluye"
   --------------------------------------------------------------------------
   Antes era una rejilla de texto suelto con una palomita delante. Problema: en
   una rejilla la altura de la fila la marca el elemento más alto, así que en
   cuanto un servicio ocupaba dos líneas ("Show robot LED y bazooka megatron")
   su vecino de la izquierda se quedaba pegado arriba y aparecía un hueco
   enorme en medio de la lista.

   Ahora cada servicio es su propia pastilla. Cada una se estira lo que
   necesite sin arrastrar a las demás, y de paso la lista se lee de un vistazo,
   que es justo lo que se mira aquí.
   -------------------------------------------------------------------------- */

.lista-check {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: .6rem;
}

.lista-check li {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .95rem 1.05rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  background: linear-gradient(150deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, .012) 60%);
  color: var(--texto);
  font-size: .96rem;
  line-height: 1.35;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* Halo rojo dormido en la esquina, el mismo recurso que las tarjetas del resto
   de la web: es lo que hace que la lista deje de parecer un formulario. */
.lista-check li::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 0% 0%, rgba(227, 6, 19, .18), transparent 62%);
  opacity: 0;
  transition: opacity .25s ease;
}

.lista-check li:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 17, 48, .5);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
}

.lista-check li:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   El icono de cada servicio
   --------------------------------------------------------------------------
   Lo pone servicios.js según lo que diga el texto. Va dentro de una pastilla
   con el rojo de marca para que tenga peso: una fila de doce iconos sueltos
   sobre negro se pierde.
   -------------------------------------------------------------------------- */

.lista-check__icono {
  flex-shrink: 0;
  box-sizing: content-box;
  width: 1.35rem;
  height: 1.35rem;
  padding: .48rem;
  border-radius: calc(var(--radio-s) - 3px);
  border: 1px solid rgba(255, 17, 48, .28);
  background: radial-gradient(circle at 50% 25%, rgba(255, 17, 48, .22), rgba(255, 17, 48, .06));
  fill: none;
  stroke: var(--rojo-vivo);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.lista-check li:hover .lista-check__icono {
  transform: scale(1.06);
  border-color: rgba(255, 17, 48, .6);
  background: radial-gradient(circle at 50% 25%, rgba(255, 17, 48, .38), rgba(255, 17, 48, .1));
}

/* Reserva: lo que no encaja con ninguna regla de servicios.js se queda con la
   palomita de siempre, para que un servicio nuevo nunca deje un hueco. */
.lista-check li[data-icono='check']::before {
  content: '';
  flex-shrink: 0;
  width: .55rem;
  height: .95rem;
  margin-inline: .5rem .35rem;
  border-right: 2.5px solid var(--rojo-vivo);
  border-bottom: 2.5px solid var(--rojo-vivo);
  transform: rotate(42deg) translateY(-.1em);
}

/* --------------------------------------------------------------------------
   Animación de entrada al hacer scroll
   -------------------------------------------------------------------------- */

/* El estado invisible solo existe cuando el JS ha confirmado que va a animar
   (añade .anima en <html>). Si el script no carga, falla o el navegador es
   antiguo, no pasa nada: el contenido se ve, sin animación. Al revés —ocultar
   por defecto y confiar en que el JS lo destape— una web entera en blanco está
   a un error de distancia. */
.anima .revela {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}

.anima .revela.visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Utilidades
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Páginas de la SPA
   --------------------------------------------------------------------------
   Todas las páginas están en el mismo index.html. Sin estas reglas, entre que
   carga el HTML y arranca el JS se verían las veinte apiladas una detrás de
   otra. Por eso el estado de partida es: solo la portada.

   El router marca la página activa con [data-activa] y pone .enrutado en <html>
   para tomar el mando. Si el JS no llega a ejecutarse nunca (o falla), se queda
   la portada visible, que es mejor que una página en blanco.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Fondo de la página
   --------------------------------------------------------------------------
   Primero intenté vestir cada sección por separado y se veía el corte al
   cambiar de una a otra: la trama y los halos empezaban y terminaban de golpe
   en cada borde. La textura tiene que ser UNA, del alto de toda la página, y
   las secciones limitarse a poner color por encima —translúcido, para que se
   siga viendo—. Así no hay costuras.

   Va en .pagina y no en el body porque cada ruta tiene su propia altura, y
   así los halos se reparten a lo largo de lo que mide esa página en concreto.
   -------------------------------------------------------------------------- */

.pagina {
  position: relative;
  isolation: isolate;
}

/* Trama de puntos, continua de arriba abajo */
.pagina::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.5px);
  background-size: 26px 26px;
  pointer-events: none;
}

/* Halos de marca repartidos por la altura de la página. Al ir en porcentajes
   se estiran con ella, así que una página corta y una larga se ven igual de
   vestidas y ninguno cae siempre en el mismo sitio. */
.pagina::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(ellipse 55% 16% at 100% 12%, rgba(227, 6, 19, .11), transparent 70%),
    radial-gradient(ellipse 50% 14% at 0% 34%, rgba(123, 44, 255, .09), transparent 70%),
    radial-gradient(ellipse 55% 15% at 100% 58%, rgba(227, 6, 19, .09), transparent 70%),
    radial-gradient(ellipse 50% 14% at 0% 80%, rgba(123, 44, 255, .08), transparent 70%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Qué página se ve
   --------------------------------------------------------------------------
   Las cuatro reglas van juntas y en este orden A PROPÓSITO; separarlas o
   colar algo en medio deja dos páginas visibles a la vez (pasó, y la portada
   tapaba a las demás porque va primera en el HTML).

   Sin JS se ve la portada, que es mejor que una página en blanco. En cuanto
   el router arranca añade .enrutado en <html> y a partir de ahí manda él:
   la portada deja de ser especial y solo se ve la marcada como activa.
   -------------------------------------------------------------------------- */

.pagina { display: none; }

.pagina[data-ruta='/'] { display: block; }

.enrutado .pagina[data-ruta='/'] { display: none; }

.enrutado .pagina[data-activa] { display: block; }

/* Enlace de salto para teclado y lectores de pantalla */
.saltar {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--rojo);
  color: #fff;
  border-radius: var(--radio-s);
  font-weight: 700;
  transition: top .2s ease;
}

.saltar:focus { top: 1rem; }

[hidden] { display: none !important; }