/* Galibo — hoja de estilo del sitio.
   Paleta y tipografía de `brand/BRAND_GUIDE.md`: Outfit para titulares, Inter
   para texto. Las fuentes se sirven DESDE AQUÍ, no desde Google: cargarlas de
   fonts.googleapis.com enviaría la IP de cada visitante a un tercero, justo lo
   que la política de privacidad promete que no hacemos. Ambas son SIL OFL, así
   que alojarlas es legítimo. */

/* Tipografía de marca ALOJADA AQUÍ: Outfit para titulares, Inter para texto,
   las del manual. Se sirven desde nuestro propio dominio y no desde Google:
   cargarlas de fonts.googleapis.com enviaría la IP de cada visitante a un
   tercero, justo lo que promete la política de privacidad. Ambas son SIL OFL,
   así que alojarlas es legítimo.

   Estuvieron desactivadas mientras la web vivía en GitHub Pages, cuyo
   constructor fallaba en cuanto aparecía la carpeta de fuentes. En Cloudflare
   no hay tal problema: los ficheros se suben tal cual, sin construir nada. */
@font-face {
  font-family: "Outfit"; src: url("fuentes/Outfit.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "InterVar"; src: url("fuentes/Inter.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}

:root {
  --naranja: #F7480D;
  --naranja-osc: #C93705;
  --crema: #FDF9F4;
  --carbon: #14140F;
  --grafito: #57575C;
  --niebla: #E8E4DE;
  --display: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  --texto: "InterVar", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ancho: 720px;
  --radio: 18px;
  --sombra: 0 1px 2px rgba(20,20,15,.04), 0 8px 24px rgba(20,20,15,.06);
}

* { box-sizing: border-box; }

/* Ningún elemento puede ensanchar la página: en móvil eso desplaza el texto y
   lo deja cortado por la derecha. */
html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--carbon);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

main { max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem 4rem; }
section { margin: 3.5rem 0; }

/* ---------- Cabecera ---------- */
.cab {
  position: sticky; top: 0; z-index: 20;
  background: rgba(253,249,244,.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--niebla);
}
.cab > * { max-width: var(--ancho); margin: 0 auto; }
.cab-int {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.5rem;
}
.marca {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 900; font-size: 1.2rem;
  color: var(--carbon); text-decoration: none; letter-spacing: -0.03em;
}
.marca svg { display: block; }
.cab nav a {
  margin-left: 1.4rem; color: var(--grafito); text-decoration: none;
  font-weight: 600; font-size: .93rem;
}
.cab nav a:hover { color: var(--naranja); }

/* ---------- Tipografía ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 900; letter-spacing: -0.035em; line-height: 1.08; }
h1 { font-size: clamp(2.3rem, 7vw, 3.6rem); margin: .4rem 0 .8rem; }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 .9rem; letter-spacing: -0.03em; }
h3 { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 .35rem; }
p { margin: 0 0 1.1rem; }
a { color: var(--naranja-osc); text-underline-offset: 3px; }
.entradilla { font-size: 1.22rem; line-height: 1.55; color: #34343a; }
.fecha { color: var(--grafito); font-size: .84rem; letter-spacing: .02em; text-transform: uppercase; font-weight: 600; }
.tenue { color: var(--grafito); font-size: .84rem; }
.volver { font-size: .9rem; font-weight: 600; margin-bottom: .6rem; }
hr { border: 0; border-top: 1px solid var(--niebla); margin: 3rem 0; }

/* ---------- Portada ---------- */
.hero { margin: 2.5rem 0 0; }
.hero .entradilla { max-width: 34ch; }
.sello {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #fff; border: 1px solid var(--niebla); border-radius: 999px;
  padding: .35rem .85rem; font-size: .82rem; font-weight: 600; color: var(--grafito);
  box-shadow: var(--sombra);
}
.sello b { color: var(--naranja-osc); font-weight: 700; }

/* Escaparate de capturas: la principal grande, dos detrás en abanico. */
.escaparate {
  position: relative; margin: 2.5rem 0 0; padding: 2.5rem 0 3.5rem;
  display: flex; justify-content: center; align-items: flex-end; gap: 0;
}
.escaparate::before {
  content: ""; position: absolute; inset: auto 0 12% 0; height: 62%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(247,72,13,.13), transparent 70%);
  z-index: 0;
}
.escaparate img {
  position: relative; z-index: 1;
  width: 30%; max-width: 210px; height: auto; display: block;
  border-radius: 22px; border: 1px solid rgba(20,20,15,.1);
  box-shadow: 0 18px 44px rgba(20,20,15,.18);
  background: #fff;
}
.escaparate img:nth-child(1) { transform: rotate(-6deg) translateY(14px); margin-right: -5%; z-index: 1; }
.escaparate img:nth-child(2) { z-index: 3; transform: scale(1.07); }
.escaparate img:nth-child(3) { transform: rotate(6deg) translateY(14px); margin-left: -5%; z-index: 1; }

/* ---------- Bloques ---------- */
.rejilla { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .rejilla { grid-template-columns: repeat(3, 1fr); } }
.rejilla-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .rejilla-2 { grid-template-columns: 1fr 1fr; } }

.caja {
  background: #fff; border: 1px solid var(--niebla); border-radius: var(--radio);
  padding: 1.4rem; box-shadow: var(--sombra);
}
.caja p { margin: 0; color: var(--grafito); font-size: .95rem; }
.icono {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: #FFEDE5; margin-bottom: .9rem;
}
.icono svg { display: block; }

/* Lista de funciones con icono */
.funciones { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.15rem; }
.funciones li { display: flex; gap: .9rem; align-items: flex-start; }
.funciones .icono { flex: 0 0 auto; width: 36px; height: 36px; margin: 0; border-radius: 10px; }
.funciones b { display: block; font-weight: 700; }
.funciones span { color: var(--grafito); font-size: .96rem; }

/* Descarga */
.descarga {
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #1D1D18, #2E2A22);
  color: #fff; border-radius: var(--radio); padding: 1.8rem;
  box-shadow: var(--sombra);
}
.descarga h2 { color: #fff; margin-bottom: .5rem; }
.descarga p { color: rgba(255,255,255,.72); margin: 0; font-size: .96rem; max-width: 38ch; }
.boton {
  display: inline-block; margin-top: 1rem;
  background: var(--naranja); color: #fff; text-decoration: none;
  font-weight: 700; padding: .85rem 1.5rem; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(247,72,13,.35);
}
.boton:hover { background: var(--naranja-osc); }
.qr { margin: 0; text-align: center; }
.qr img { display: block; border-radius: 12px; background: #fff; padding: 8px; }
.qr figcaption { font-size: .76rem; color: rgba(255,255,255,.6); margin-top: .5rem; }

/* Bloque de honestidad */
.honestidad {
  background: #fff; border: 1px solid var(--niebla); border-left: 4px solid var(--naranja);
  border-radius: var(--radio); padding: 1.5rem; box-shadow: var(--sombra);
}
.honestidad h2 { font-size: 1.25rem; }
.honestidad p { margin: 0; color: var(--grafito); font-size: .97rem; }

/* Tarjetas de blog */
.tarjeta, .entrada {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--niebla); border-radius: var(--radio);
  padding: 1.3rem; box-shadow: var(--sombra); transition: border-color .15s, transform .15s;
}
.tarjeta:hover, .entrada:hover { border-color: var(--naranja); transform: translateY(-2px); }
.tarjeta p, .entrada p { color: var(--grafito); font-size: .93rem; margin: 0 0 .5rem; }
.entradas { display: grid; gap: 1.1rem; margin-top: 2rem; }
.entrada h2 { font-size: 1.35rem; margin-bottom: .4rem; }
.mas { font-weight: 700; }

/* ---------- Artículos ---------- */
article { max-width: 42rem; margin: 0 auto; }
article h2 { margin-top: 2.6rem; }
article p, article li { font-size: 1.06rem; }
article > p:first-of-type { font-size: 1.15rem; color: #34343a; }
.foto {
  width: 100%; height: auto; display: block;
  border-radius: var(--radio); margin: 1.8rem 0 .5rem;
  box-shadow: var(--sombra);
}
.pie-foto { font-size: .8rem; color: var(--grafito); margin: 0 0 2rem; }
.lista { padding-left: 1.2rem; }
.lista li { margin: .55rem 0; }

.tabla-envoltorio {
  overflow-x: auto; margin: 1.8rem 0; background: #fff;
  border: 1px solid var(--niebla); border-radius: var(--radio); box-shadow: var(--sombra);
}
table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .95rem; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--niebla); }
thead th { font-family: var(--display); font-weight: 800; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--grafito); }
tbody tr:last-child td { border-bottom: 0; }
tbody td:nth-child(2) { font-variant-numeric: tabular-nums; font-weight: 600; }
caption { caption-side: bottom; color: var(--grafito); font-size: .8rem;
  padding: .8rem 1rem; text-align: left; }

blockquote {
  margin: 2rem 0; padding: 0 0 0 1.4rem;
  border-left: 4px solid var(--naranja);
  font-family: var(--display); font-weight: 800; font-size: 1.25rem;
  line-height: 1.4; letter-spacing: -0.02em;
}
blockquote p { margin: 0; }
blockquote strong { color: var(--naranja-osc); }

/* ---------- Pie ---------- */
.pie {
  border-top: 1px solid var(--niebla); margin-top: 2rem;
  background: #fff;
}
.pie-int {
  max-width: var(--ancho); margin: 0 auto; padding: 2.2rem 1.5rem 3rem;
  color: var(--grafito); font-size: .88rem;
}
.pie a { color: var(--grafito); }
.pie p { margin: .45rem 0; }
.pie .marca { font-size: 1.05rem; margin-bottom: .6rem; }

/* Foto de apertura de la portada. A sangre en móvil (rompe el margen del
   contenedor) porque una foto contenida entre márgenes pierde toda la fuerza. */
.foto-hero { margin: 2.5rem 0 0; }
.foto-hero img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.foto-hero figcaption {
  font-size: .84rem; color: var(--grafito); padding-top: .6rem;
}

/* Pareja de fotos de la sección de puntos propios. Apiladas en móvil, en dos
   columnas a partir de tableta. */
.par-fotos { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 1.8rem; }
@media (min-width: 640px) { .par-fotos { grid-template-columns: 1fr 1fr; } }
.par-fotos figure { margin: 0; }
.par-fotos img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.par-fotos figcaption {
  font-size: .84rem; color: var(--grafito); margin-top: .5rem;
}

/* Icono real de la app en cabecera y pie. */
.marca-icono { display: block; border-radius: 7px; }

/* Foto a ancho completo dentro de una sección. */
.foto-ancha { margin: 1.8rem auto .5rem; max-width: 440px; }
.foto-ancha img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.foto-ancha figcaption { font-size: .84rem; color: var(--grafito); margin-top: .5rem; }

/* Párrafo encabezado por un icono (peajes). */
.con-icono {
  display: flex; gap: .8rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--niebla); border-radius: var(--radio);
  padding: 1.1rem 1.3rem; box-shadow: var(--sombra); margin-top: 1.8rem;
}
.con-icono svg { flex: 0 0 auto; margin-top: .15rem; }
.con-icono span { color: #2a2a2c; }

/* Enlace a redes en el pie. */
.redes a {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--grafito); text-decoration: none; font-weight: 600;
}
.redes a:hover { color: var(--naranja); }
.redes svg { display: block; }