/* ====================================================================
   SAT SEN — Sistema de Alerta Temprana (SEN)
   Hoja de estilos profesional. Paleta naranja igual a la app.
   ==================================================================== */

:root {
  --naranja:        #FF9800;
  --naranja-osc:    #F57C00;
  --naranja-mas-osc:#E65100;
  --tinta:          #1f2330;
  --tinta-suave:    #5a6072;
  --crema:          #FFF8F0;
  --gris-claro:     #f4f5f7;
  --blanco:         #ffffff;
  --sombra:         0 10px 30px rgba(0,0,0,.08);
  --sombra-fuerte:  0 18px 50px rgba(245,124,0,.25);
  --radio:          16px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--blanco);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; }

a { text-decoration: none; }

.contenedor {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ───────────── NAVBAR ───────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  transition: box-shadow .3s ease;
}
.nav.scrolled { box-shadow: var(--sombra); }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--tinta);
  font-size: 1.15rem;
}
.nav__brand img { height: 38px; width: auto; border-radius: 8px; }
.nav__brand span b { color: var(--naranja-osc); }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links a {
  color: var(--tinta-suave);
  font-weight: 500;
  font-size: .95rem;
  transition: color .2s;
}
.nav__links a:hover { color: var(--naranja-osc); }
.nav__cta {
  background: var(--naranja);
  color: #fff !important;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 600 !important;
  transition: transform .2s, box-shadow .2s;
}
.nav__cta:hover { transform: translateY(-2px); box-shadow: var(--sombra-fuerte); }
.nav__toggle { display: none; background: none; border: 0; font-size: 1.6rem; color: var(--tinta); cursor: pointer; }

/* ───────────── BOTONES ───────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.btn--naranja { background: var(--naranja); color: #fff; }
.btn--naranja:hover { background: var(--naranja-osc); transform: translateY(-3px); box-shadow: var(--sombra-fuerte); color: #fff; }
.btn--linea { background: transparent; border-color: var(--naranja); color: var(--naranja-osc); }
.btn--linea:hover { background: var(--naranja); color: #fff; transform: translateY(-3px); }
.btn--play { background: #1f2330; color: #fff; padding: 14px 26px; }
.btn--play:hover { background: #000; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.3); color:#fff; }
.btn--play .bi { font-size: 1.7rem; color: var(--naranja); }
.btn--play .play-txt { display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.btn--play .play-txt small { font-size:.62rem; font-weight:500; opacity:.8; }
.btn--play .play-txt strong { font-size:1.05rem; }
.btn--block { width: 100%; }

/* ───────────── HERO ───────────── */
.hero {
  position: relative;
  background: radial-gradient(1200px 500px at 80% -10%, rgba(255,152,0,.18), transparent 60%),
              radial-gradient(900px 400px at -10% 10%, rgba(245,124,0,.12), transparent 55%),
              var(--crema);
  padding: 80px 0 90px;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 50px;
  align-items: center;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,152,0,.14);
  color: var(--naranja-mas-osc);
  font-weight: 600;
  font-size: .85rem;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 0 0 18px; }
.hero h1 .resalte { color: var(--naranja-osc); }
.hero p.lead { font-size: 1.15rem; color: var(--tinta-suave); margin: 0 0 32px; max-width: 540px; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__phone {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero__phone img {
  width: 100%;
  max-width: 340px;
  filter: drop-shadow(0 30px 60px rgba(245,124,0,.35));
  border-radius: 28px;
  animation: flotar 5s ease-in-out infinite;
}
/* El logo en el hero: contenido sin recorte ni marco de "teléfono" */
.hero__phone img.hero__logo {
  max-width: 300px;
  border-radius: 24px;
  object-fit: contain;
}
@keyframes flotar { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-16px);} }

/* ───────────── SECCIONES ───────────── */
.seccion { padding: 90px 0; }
.seccion--gris { background: var(--gris-claro); }
.seccion__titulo { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.seccion__titulo .eyebrow {
  color: var(--naranja-osc); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; font-size: .82rem;
}
.seccion__titulo h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 10px 0 14px; }
.seccion__titulo p { color: var(--tinta-suave); font-size: 1.05rem; margin: 0; }

/* ───────────── CARACTERÍSTICAS ───────────── */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.feature {
  background: var(--blanco);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: var(--radio);
  padding: 32px 26px;
  transition: transform .3s, box-shadow .3s;
}
.feature:hover { transform: translateY(-8px); box-shadow: var(--sombra); }
.feature__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: rgba(255,152,0,.14);
  color: var(--naranja-osc);
  border-radius: 14px;
  font-size: 1.6rem;
  margin-bottom: 18px;
}
.feature h3 { font-size: 1.2rem; margin: 0 0 8px; }
.feature p { color: var(--tinta-suave); margin: 0; font-size: .96rem; }

/* ───────────── CAPTURAS ───────────── */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.shot {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--sombra);
  background:#fff;
  transition: transform .3s;
}
.shot:hover { transform: translateY(-8px) scale(1.02); }
.shot img { width: 100%; display: block; vertical-align: bottom; }
/* Recorta una fina franja al pie de la captura 3 (línea blanca residual) */
.shot--crop { overflow: hidden; }
.shot--crop img { margin-bottom: -10px; }

/* ───────────── DISPOSITIVOS SAT / SATITO ───────────── */
.devices { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.device {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 38px;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: var(--sombra);
}
.device__img {
  margin-top: auto;            /* empuja la imagen al pie de la tarjeta */
  padding-top: 24px;
  text-align: center;
}
.device__img img {
  height: 300px;               /* 👈 TAMAÑO DE LAS FOTOS SAT/SATITO: subí o bajá este número */
  width: auto;
  max-width: 90%;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}
.device__tag {
  align-self: flex-start;
  background: var(--naranja); color:#fff;
  font-weight:700; padding:6px 16px; border-radius:999px; font-size:.85rem; margin-bottom:16px;
}
.device h3 { font-size: 1.5rem; margin: 0 0 12px; }
.device p { color: var(--tinta-suave); margin: 0 0 16px; }
.device ul { margin: 0; padding-left: 20px; color: var(--tinta-suave); }
.device ul li { margin-bottom: 6px; }

/* ───────────── FORMULARIO SMS ───────────── */
.form-card {
  background: var(--blanco);
  max-width: 520px;
  margin: 0 auto;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 40px;
  border: 1px solid rgba(0,0,0,.05);
}
.campo { margin-bottom: 20px; }
.campo label { display: block; font-weight: 600; margin-bottom: 8px; font-size: .95rem; }
.campo input, .campo select {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.campo input:focus, .campo select:focus {
  outline: none;
  border-color: var(--naranja);
  box-shadow: 0 0 0 4px rgba(255,152,0,.15);
}

/* ───────────── ALERTAS / MENSAJES ───────────── */
.msg {
  max-width: 520px; margin: 40px auto; padding: 22px 26px;
  border-radius: var(--radio); text-align: center; font-weight: 500;
  box-shadow: var(--sombra);
}
.msg--ok    { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.msg--warn  { background: #fff8e1; color: #e65100; border: 1px solid #ffe082; }
.msg--error { background: #ffebee; color: #b71c1c; border: 1px solid #ef9a9a; }

/* ───────────── LOGIN ───────────── */
.auth-wrap {
  min-height: calc(100vh - 68px);
  display: grid; place-items: center;
  background: radial-gradient(900px 500px at 50% -10%, rgba(255,152,0,.15), transparent), var(--crema);
  padding: 40px 20px;
}
.auth-card {
  background: #fff; width: 100%; max-width: 420px;
  border-radius: 20px; box-shadow: var(--sombra); padding: 44px 38px;
  border: 1px solid rgba(0,0,0,.05);
}
.auth-card__logo { text-align:center; margin-bottom: 8px; }
.auth-card__logo img { height: 60px; border-radius: 12px; }
.auth-card h1 { font-size: 1.5rem; text-align: center; margin: 14px 0 4px; }
.auth-card p.sub { text-align:center; color: var(--tinta-suave); margin: 0 0 28px; font-size: .95rem; }

/* ───────────── PANEL ───────────── */
.panel-top {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 40px;
}
.panel-cards { display:grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.panel-card {
  background:#fff; border:1px solid rgba(0,0,0,.05); border-radius: var(--radio);
  padding: 34px; box-shadow: var(--sombra); text-align:center;
  transition: transform .3s, box-shadow .3s;
}
.panel-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-fuerte); }
.panel-card .bi { font-size: 2.6rem; color: var(--naranja-osc); }
.panel-card h3 { margin: 14px 0 8px; }
.panel-card p { color: var(--tinta-suave); margin: 0 0 22px; }

/* ───────────── FOOTER ───────────── */
.footer { background: var(--tinta); color: #c9cdd9; padding: 56px 0 28px; }
.footer__grid { display:flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; margin-bottom: 34px; }
.footer__brand { display:flex; align-items:center; gap:12px; color:#fff; font-weight:700; font-size:1.1rem; }
.footer__brand img { height: 40px; border-radius: 8px; }
.footer__col h4 { color:#fff; font-size: .95rem; margin: 0 0 14px; }
.footer__col a { display:block; color:#c9cdd9; margin-bottom: 8px; font-size: .92rem; transition: color .2s; }
.footer__col a:hover { color: var(--naranja); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px;
  display:flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: .85rem; color: #8b90a0;
}
.footer__bottom a.team-access { color:#8b90a0; }
.footer__bottom a.team-access:hover { color: var(--naranja); }

/* ───────────── BACK LINK (páginas internas) ───────────── */
.back-link {
  display:inline-flex; align-items:center; gap:8px;
  color: var(--naranja-osc); font-weight:600; margin-bottom: 24px;
}

/* ───────────── ANIMACIÓN DE APARICIÓN (scroll reveal) ───────────── */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }

/* ───────────── RESPONSIVE ───────────── */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__cta { justify-content: center; }
  .hero p.lead { margin-left: auto; margin-right: auto; }
  .hero__phone { order: -1; margin-bottom: 20px; }
  .features, .shots { grid-template-columns: 1fr; }
  .devices, .panel-cards { grid-template-columns: 1fr; }
  .nav__links {
    position: absolute; top: 68px; left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: stretch;
    gap: 0; padding: 10px 20px 20px; box-shadow: var(--sombra);
    display: none;
  }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
  .nav__cta { text-align:center; margin-top: 8px; }
  .nav__toggle { display: block; }
}