/* ============================================================
   Portada (index.html): mensaje a la izquierda, ingreso a la derecha,
   consulta más abajo. Fondo animado en el tono de ForeStart.
   ============================================================ */
:root {
  --fs-brand: #588B98;          /* color del logo de ForeStart */
  --fs-brand-dark: #3a5159;
  --fs-barra: #49656D;          /* la misma barra del sistema: el fondo va de este tono a uno apenas más oscuro */
  --fs-acento: #a6e8ee;
  --fs-destacado: #9CCBD6;      /* "de forma fácil y cómoda" y los tildes: la marca, apenas más clara. El Super la cambia en Estado del deploy (PORTADA_COLOR) */
  --fs-bg: #f4f4f9;
  --fs-text: #1b2a3a;
  --fs-muted: #5d6b7c;
  --bs-primary: var(--fs-brand);
  --bs-primary-rgb: 88, 139, 152;
  --bs-body-bg: var(--fs-bg);
  --bs-body-color: var(--fs-text);
  --bs-link-color: var(--fs-brand);
}
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

/* Botones (Ingresar, Enviar consulta): #49656D, el color de la barra de ForeStart */
.btn-primary { --bs-btn-bg: #49656D; --bs-btn-border-color: #49656D; --bs-btn-hover-bg: #3a5159; --bs-btn-hover-border-color: #3a5159;
  --bs-btn-active-bg: #3a5159; --bs-btn-active-border-color: #3a5159; --bs-btn-disabled-bg: #49656D; --bs-btn-disabled-border-color: #49656D; }
.btn-accent { --bs-btn-color: #fff; --bs-btn-bg: var(--fs-brand); --bs-btn-border-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--fs-brand-dark);
  --bs-btn-hover-border-color: #fff; --bs-btn-active-bg: var(--fs-brand-dark); --bs-btn-active-border-color: #fff; --bs-btn-active-color: #fff; }
.btn-outline-light-fs { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.55); --bs-btn-hover-bg: rgba(255,255,255,.12); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #fff; }
.form-control:focus { border-color: var(--fs-brand); box-shadow: 0 0 0 .2rem rgba(88,139,152,.25); }

/* ---- Logo arriba del ingreso ---- */
.logo-ingreso { width: 140px; max-width: 60%; height: auto; margin: 0 auto 6px; display: block; }

/* ---- Portada con fondo animado ---- */
.portada { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(1200px 500px at 85% -10%, rgba(140,195,210,.35), transparent 60%), linear-gradient(160deg, var(--fs-barra) 0%, var(--fs-brand-dark) 100%);
  background-size: 100% 100%, 160% 160%; animation: portada-fondo 24s ease-in-out infinite alternate; }
@keyframes portada-fondo { from { background-position: 0 0, 0% 0%; } to { background-position: 0 0, 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .portada { animation: none; } }
.portada-red { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.5s ease; pointer-events: none; }
.portada-red.listo { opacity: 1; }
.portada > nav, .portada > div { position: relative; z-index: 1; }
.portada .navbar a.nav-link { color: rgba(255,255,255,.85); }
.portada .navbar a.nav-link:hover { color: #fff; }
.portada h1 { font-weight: 800; letter-spacing: -.025em; line-height: 1.1; font-size: clamp(2rem, 4.4vw, 3.15rem); }
.portada h1 em { font-style: normal; color: var(--fs-destacado); }
.portada .puntos li { margin-bottom: .45rem; color: rgba(255,255,255,.9); }
.portada .puntos i { color: var(--fs-destacado); margin-right: .5rem; }

/* ---- Botones de las tiendas de apps ---- */
.disponible { font-size: 1.1rem; font-weight: 600; color: #fff; }
/* Insignias oficiales. Las dos imágenes traen mucho margen alrededor, así que
   cada una se recorta a su recuadro real (medido sobre el archivo) y quedan
   del mismo alto. Google: 633x189 dentro de 866x650. Apple: 296x100 dentro de 300x300. */
.insignia { position: relative; display: block; height: 46px; overflow: hidden; border-radius: 5px; }
.insignia img { position: absolute; max-width: none; height: auto; }
.insignia-google { aspect-ratio: 633 / 189; }
.insignia-google img { width: 136.81%; left: -18.48%; top: -121.69%; }
.insignia-apple { aspect-ratio: 296 / 100; }
.insignia-apple img { width: 101.35%; left: -0.68%; top: -100%; }
.caja-ingreso { background: #fff; color: var(--fs-text); border-radius: 1.1rem; padding: 1.75rem; box-shadow: 0 22px 60px rgba(0,0,0,.28); }
.caja-ingreso h2 { font-size: 1.25rem; font-weight: 700; }
.etiqueta-campo { font-size: .85rem; font-weight: 600; color: var(--fs-muted); }

/* ---- Contáctenos ---- */
.seccion { padding: 4.25rem 0; background: #fff; }
.seccion h2.grande { font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.55rem, 3vw, 2.15rem); }
.tarjeta-cuerpo { background: var(--fs-bg); border-radius: 1rem; padding: 1.5rem; }
/* Captcha de Cloudflare: centrado y un poco más chico (el widget mide 300x65). */
.captcha-caja { justify-content: center; }
#captcha { width: 255px; height: 56px; transform: scale(.85); transform-origin: top left; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pie { background: var(--fs-barra); color: rgba(255,255,255,.7); padding: 1.5rem 0; font-size: .9rem; text-align: center; }
@media (max-width: 575.98px) { .caja-ingreso { padding: 1.35rem; } .seccion { padding: 3rem 0; } }

/* Celular: solo el ingreso (logo, usuario y contraseña), centrado en la pantalla. */
@media (max-width: 767.98px) {
  /* 100dvh = el alto que realmente se ve (sin las barras del navegador); 100vh queda de respaldo. */
  .portada { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; }
  .portada > div { width: 100%; padding-top: 1.5rem !important; padding-bottom: 4rem !important; }
}