/* web/styles.css — hoja unica del sitio legal de XerraDa.
   Sitio estatico para las tiendas (App Store / Play Console): SIN dependencias,
   SIN JavaScript, SIN analitica ni cookies (coherente con lo que declara el
   propio texto legal: "no usamos analitica ni publicidad").
   ⚠️ Este es el UNICO sitio con colores del sitio web: el azul de marca vive
   aqui y en la app vive en `constants/colors.ts` (mismo criterio: una sola
   fuente). Tema CLARO unico, igual que la app. */

/* ---------- Tipografia de marca (self-hosted) ----------
   `Manrope Variable` (licencia OFL: ver `fonts/MANROPE-OFL.txt`): UNA sola fuente
   variable (pesos 200-800) servida desde ESTE dominio ⇒ sin peticiones a terceros
   (coherente con lo que declara el texto legal: ni analitica ni cookies).
   Solo los 2 subsets que hacen falta: `latin` (ES/CA/EN/DE, incluidos · y €) y
   `latin-ext`. La ruta es relativa a ESTE fichero ⇒ vale para las 18 paginas.
   `font-display: swap` ⇒ nunca bloquea el pintado de la pagina. */
@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/manrope-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ⚠️ COPIA LITERAL de `constants/colors.ts` (la única fuente de color de la app).
     Si cambia la marca, se cambia EN LA APP y aquí a la vez: el sitio y la app
     tienen que verse del mismo color. El único valor que no viene de la app es
     `--primary-dark` (la app no tiene estados hover; la web sí). */
  --primary: #2563eb; /* Colors.primary (marca y acciones normales) */
  --primary-dark: #1d4ed8; /* solo web: hover de enlaces/botones */
  --primary-soft: #eff6ff; /* Colors.primarySoft */
  --primary-border: #bfdbfe; /* Colors.primaryBorder */
  --on-primary: #ffffff; /* Colors.onPrimary */
  --text: #0f172a; /* Colors.text */
  --text-secondary: #475569; /* Colors.textSecondary */
  --text-muted: #64748b; /* Colors.textMuted */
  --border: #e2e8f0; /* Colors.border */
  --border-strong: #cbd5e1; /* Colors.borderStrong */
  --surface: #f8fafc; /* Colors.surface */
  --surface-alt: #f1f5f9; /* Colors.surfaceAlt */
  --background: #ffffff; /* Colors.background */
  --danger: #dc2626; /* Colors.danger (SOLO peligro: borrar cuenta) */
  --gem: #f59e0b; /* Colors.gemGold (relleno/icono) */
  --gem-text: #b45309; /* Colors.gemGoldDark (texto legible) */
  --gem-soft: #fffbeb; /* Colors.gemGoldSoft */
  --xerrada: #7c3aed; /* Colors.xerrada (el XerraDa, nunca de marca) */
  --xerrada-soft: #f5f3ff; /* Colors.xerradaSoft */
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 30px rgba(15, 23, 42, 0.08);

  /* Solo web: la familia tipografica. La app y la web comparten el color, no el
     fichero: aqui va Manrope (self-hosted, ver el `@font-face` de arriba). */
  --font-sans: "Manrope Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Solo web: el blanco de la cabecera pegajosa, con un pelo de transparencia
     para que el `blur` se note cuando la pagina pasa por debajo. */
  --background-glass: rgba(255, 255, 255, 0.86);

  --radius: 14px;
  --radius-lg: 20px;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Cabecera ---------- */
/* Cabecera PEGAJOSA con cristal: asi los enlaces (La isla / Legal / Soporte)
   siguen a mano al bajar. El blanco va casi opaco ⇒ si el navegador no soporta
   `backdrop-filter`, se ve exactamente igual de bien. */
header.site {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: var(--background-glass);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.2px;
}

.brand .dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--primary);
  display: inline-block;
}

nav.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

nav.tabs a {
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

nav.tabs a[aria-current="page"],
nav.tabs a:hover {
  color: var(--primary);
}

/* ---------- Contenido ---------- */
main {
  padding: 28px 0 8px;
}

h1 {
  font-size: 28px;
  line-height: 1.25;
  margin: 0 0 6px;
}

h2 {
  font-size: 18px;
  margin: 28px 0 6px;
}

p {
  margin: 0 0 14px;
}

.lead {
  color: var(--text-secondary);
  font-size: 17px;
}

.updated {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0 0 24px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 18px;
}

.card h2 {
  margin-top: 0;
}

ol.steps,
ul.plain {
  margin: 0 0 14px;
  padding-left: 22px;
}

ol.steps li,
ul.plain li {
  margin-bottom: 8px;
}

a {
  color: var(--primary);
}

a:hover {
  color: var(--primary-dark);
}

.gold {
  color: var(--gem-text);
  font-weight: 700;
}

/* ---------- Pie ---------- */
footer.site {
  border-top: 1px solid var(--border);
  margin-top: 36px;
}

footer.site .wrap {
  padding-top: 18px;
  padding-bottom: 28px;
  color: var(--text-secondary);
  font-size: 14px;
}

footer.site a {
  color: var(--text-secondary);
}

/* Los 4 idiomas como pastillas: se ve cual esta activo de un vistazo. */
.langs a {
  display: inline-block;
  margin: 0 10px 8px 0;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 600;
}

.langs a[aria-current="page"] {
  background: var(--primary-soft);
  border-color: var(--primary-border);
  color: var(--primary-dark);
}

/* ============================================================================
   HOME (`web/index.html` · `web/en/index.html`)
   El sitio es de PASO: no hay login, ni formularios, ni cookies, ni analítica.
   Todas las clases de aquí son NUEVAS (las páginas legales usan las de arriba).
   ============================================================================ */

main.home {
  padding: 0;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  /* 2 halos de marca (azul, nunca otro color) + el degradado de fondo. */
  background:
    radial-gradient(760px 380px at 50% -120px, rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0) 70%),
    radial-gradient(520px 300px at 92% 4%, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0) 72%),
    linear-gradient(180deg, var(--primary-soft) 0%, var(--background) 62%);
  border-bottom: 1px solid var(--border);
  padding: 52px 0 44px;
  text-align: center;
}

/* Hero en DOS piezas: el texto (`.hero-copy`) y la mascota, que senala al titular.
   En pantalla pequena se apilan (la mascota queda debajo de la tarjeta) y a partir
   de 760 px van lado a lado. */
main.home .hero > .wrap {
  max-width: 1040px;
  padding: 0 24px;
  display: grid;
  gap: 26px;
  align-items: center;
  justify-items: center;
}

main.home .hero-copy {
  width: 100%;
  max-width: 34em;
}

.hero-mascota {
  display: block;
  width: min(74vw, 300px);
  height: auto;
  filter: drop-shadow(0 26px 34px rgba(37, 99, 235, 0.22));
}

@media (min-width: 760px) {
  main.home .hero > .wrap {
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 40px;
  }

  main.home .hero-copy {
    text-align: left;
    justify-self: start;
  }

  /* Con el texto a la izquierda, los bloques que se centraban solos (logo, lead
     y tarjeta) tienen que soltar ese centrado. */
  .hero-logo,
  .hero .lead,
  .soon {
    margin-left: 0;
  }

  .hero-mascota {
    width: 372px;
    justify-self: end;
  }
}

/* El monograma sobre una pastilla blanca con sombra azul: da profundidad al hero.
   `padding` = 18px/14px sobre una caja de 140x120 ⇒ el PNG conserva EXACTAMENTE
   su ratio (104x92 = 740x652, ratio real 1,135). */
.hero-logo {
  display: block;
  width: 140px;
  height: 120px;
  padding: 14px 18px;
  margin: 0 auto 22px;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 30px;
  box-shadow: 0 24px 48px -24px rgba(37, 99, 235, 0.55),
    0 2px 6px rgba(15, 23, 42, 0.05);
}

/* La etiqueta, en pastilla y con un punto que late: es lo que le dice al ojo
   «esto se mueve, vuelve». Es decorativo (no es texto traducible). */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 6px 14px;
  background: var(--background);
  border: 1px solid var(--primary-border);
  border-radius: 999px;
  color: var(--primary-dark);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
  }
  65% {
    box-shadow: 0 0 0 7px rgba(37, 99, 235, 0);
  }
}

.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(31px, 8vw, 54px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.022em;
  /* Reparte las palabras entre lineas para que no quede una sola colgando.
     Los navegadores que no lo soportan ignoran la linea y ya esta. */
  text-wrap: balance;
}

.hero .lead {
  max-width: 33em;
  margin: 0 auto 28px;
  font-size: 18px;
  text-wrap: pretty;
}

.soon {
  max-width: 34em;
  margin: 0 auto;
  padding: 22px 24px 26px;
  background: var(--background);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-lg);
  /* Sombra en 2 capas: el halo azul de marca debajo (lo que la despega del
     fondo) + un filo fino para que el borde no se vea duro. */
  box-shadow: 0 18px 44px -20px rgba(37, 99, 235, 0.38),
    0 1px 2px rgba(15, 23, 42, 0.05);
}

.soon-title {
  margin: 0 0 6px;
  color: var(--primary);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.soon-text {
  margin: 0 0 18px;
  color: var(--text-secondary);
  font-size: 15px;
}

/* Los 2 logos de redes (el glifo de Instagram y la nota de TikTok): misma ALTURA
   (32 px), fila centrada y un aire entre ellos. El logo es el unico contenido del
   enlace, asi que el texto va en `aria-label` (accesible) y en `title` (raton). */
.social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 16px;
}

.social a {
  line-height: 0;
}

.social img {
  display: block;
  width: auto;
  height: 32px;
  transition: transform 0.16s ease;
}

.social a:hover img,
.social a:focus-visible img {
  transform: translateY(-2px) scale(1.06);
}

.soon p:last-child {
  margin-bottom: 0;
}

.btn {
  display: inline-block;
  padding: 14px 26px;
  /* Degradado con los 2 azules que YA existen (no se inventa color nuevo). */
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 999px;
  color: var(--on-primary);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 24px -12px rgba(37, 99, 235, 0.7);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.btn:hover {
  color: var(--on-primary);
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -12px rgba(37, 99, 235, 0.75);
}

.btn:active {
  transform: translateY(0) scale(0.99);
}

/* Badges oficiales (FASE B): mismo alto, aire >= 1/4 de su altura y SIN tocar el
   arte (reglas de Apple y Google). App Store (negro) siempre el primero. */
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.badges img {
  display: block;
  height: 44px;
  width: auto;
}

/* ---------- Bloques ---------- */
.block {
  padding: 34px 0;
  border-bottom: 1px solid var(--border);
}

.block:last-of-type {
  border-bottom: 0;
}

.block h2 {
  margin: 0 0 8px;
  font-size: clamp(20px, 4.6vw, 24px);
}

.block .intro {
  margin: 0 0 20px;
  color: var(--text-secondary);
}

.features {
  display: grid;
  gap: 12px;
}

@media (min-width: 620px) {
  .features {
    grid-template-columns: 1fr 1fr;
  }
}

.feature {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.feature h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.feature p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 15px;
}

.truths {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.truths li {
  position: relative;
  padding-left: 30px;
  color: var(--text-secondary);
}

/* Bola de marca con un anillo suave alrededor: lee como lista de la casa. */
.truths li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--primary);
  border: 4px solid var(--primary-soft);
  border-radius: 50%;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-block;
  padding: 5px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
}

.chip-xerrada {
  background: var(--xerrada-soft);
  border-color: var(--xerrada);
  color: var(--xerrada);
}

.house {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.house h2 {
  margin-top: 0;
}

.house p {
  margin: 0;
  color: var(--text-secondary);
}

.ensaimada {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  /* Sombra propia, SIN recortar el PNG (tiene canal alfa). */
  filter: drop-shadow(0 10px 16px rgba(15, 23, 42, 0.22));
}

/* ============================================================================
   PULIDO DE LA HOME (todo dentro de `main.home`: las legales no se tocan)
   ============================================================================ */

/* Titulos de bloque con un filete de marca debajo: le da ritmo a la pagina. */
main.home .block > .wrap > h2::after,
main.home .house h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--primary);
}

/* Las 3 tarjetas legales de la home: mas aire y se levantan al pasar por encima.
   (En movil no hay hover: se quedan tal cual, sin nada roto.) */
main.home .card {
  padding: 18px 20px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

main.home .card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-border);
  box-shadow: 0 14px 30px -18px rgba(15, 23, 42, 0.4);
}

main.home .card h2 {
  font-size: 17px;
}

/* Entrada suave del hero, escalonada.
   Va dentro de `prefers-reduced-motion: no-preference` a proposito: quien pida
   reducir movimiento (o un navegador que no entienda la consulta) ve la pagina
   entera y quieta. CSS puro: sin JavaScript y sin esconderle nada a nadie. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .hero-copy > *,
  .hero-mascota {
    animation: rise 0.6s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  }

  .hero-copy > :nth-child(2) {
    animation-delay: 0.06s;
  }

  .hero-copy > :nth-child(3) {
    animation-delay: 0.12s;
  }

  .hero-copy > :nth-child(4) {
    animation-delay: 0.18s;
  }

  .hero-copy > :nth-child(5) {
    animation-delay: 0.24s;
  }

  .hero-mascota {
    animation-delay: 0.3s;
  }
}