/* Landing de sevitime.com. Mismo aire que la app y que la política de
   privacidad: fondo oscuro y el verde agua de la marca. Deliberadamente
   independiente del estilo.css de sevitime.github.io, que lo comparten las
   páginas de /perfil/ y /ruta/ y no conviene tocar desde aquí. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --verde: #00897B;
  --verde-claro: #00BFA5;
  --fondo: #0f0f13;
  --superficie: #16161c;
  --borde: #26262f;
  --texto: #e8e8ea;
  --apagado: #a0a0a8;
  --tenue: #7a7a84;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* El distintivo de Google Play trae su propio margen en el PNG, así que no
   lleva relleno extra ni fondo: sus normas de marca no permiten alterarlo. */
.badge {
  display: inline-block;
  border-radius: 10px;
}
.badge img { width: 200px; height: auto; }
.badge:focus-visible { outline: 3px solid var(--verde-claro); outline-offset: 2px; }

/* ---------- hero ---------- */

.hero {
  text-align: center;
  padding: 56px 24px 44px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0,137,123,0.30) 0%, rgba(0,137,123,0) 62%),
    var(--fondo);
}
.hero .logo {
  width: 76px;
  height: 76px;
  border-radius: 19px;
  margin: 0 auto 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.hero .marca {
  font-size: 13px;
  font-weight: 600;
  color: var(--verde-claro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(30px, 8vw, 46px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 10px 0 14px;
}
.hero .claim {
  font-size: 17px;
  color: var(--apagado);
  max-width: 30ch;
  margin: 0 auto 26px;
}

/* señas: sin registro / anónima / Android */
.senas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin-top: 22px;
}
.senas li {
  font-size: 12.5px;
  color: var(--tenue);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ---------- capturas ---------- */

.capturas { padding: 8px 0 4px; }
.capturas ul {
  list-style: none;
  display: flex;
  gap: 18px;
  padding: 18px 24px 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.capturas li { flex: 0 0 66vw; max-width: 260px; scroll-snap-align: center; }
/* Las capturas vienen del móvil con alturas distintas (2255-2403 px). Sin una
   proporción común, cada pie de foto caería a una altura y la fila se vería
   descuadrada, así que se fuerza una y se recorta por el borde. */
.capturas img {
  width: 100%;
  height: auto;          /* sin esto, el atributo height del HTML pisa aspect-ratio */
  aspect-ratio: 1080 / 2300;
  object-fit: cover;
  object-position: center top;
  border-radius: 18px;
  border: 1px solid var(--borde);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55);
}
.capturas figcaption {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--tenue);
}

/* ---------- qué hace ---------- */

.que-hace { padding: 36px 24px 8px; max-width: 900px; margin: 0 auto; }
.que-hace h2,
.cierre h2 {
  font-size: 13px;
  font-weight: 700;
  color: var(--verde-claro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 26px;
}
.que-hace ul { list-style: none; display: grid; gap: 14px; }
.que-hace li {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 18px 20px;
}
.que-hace h3 { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.que-hace p { font-size: 15px; color: var(--apagado); }

/* ---------- cierre ---------- */

.cierre { text-align: center; padding: 46px 24px 52px; }
.cierre p { color: var(--apagado); margin-bottom: 20px; }

/* ---------- pie ---------- */

footer {
  text-align: center;
  padding: 24px;
  font-size: 13px;
  color: #6a6a74;
  border-top: 1px solid var(--borde);
}
footer a { color: var(--verde-claro); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer span { margin: 0 8px; }

/* ---------- pantallas grandes ---------- */

@media (min-width: 720px) {
  .hero { padding: 76px 24px 52px; }
  .capturas ul {
    justify-content: center;
    overflow-x: visible;
    max-width: 1000px;
    margin: 0 auto;
  }
  .capturas li { flex: 0 0 205px; }
  .que-hace { padding-top: 48px; }
  .que-hace ul { grid-template-columns: 1fr 1fr; }
  .badge img { width: 215px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}