@import url('/fuentes.css');

/* ---------------------------------------------------------------------------
   StayOnCase — hoja de la web publica
   ---------------------------------------------------------------------------
   Generada al convertir el diseno original, que calculaba los tamanos en
   JavaScript a partir de window.innerWidth. Aqui son media queries: la pagina
   se ve bien antes de que corra una sola linea de script, y se sigue viendo
   bien si el script no corre nunca.

   Los dos puntos de corte (1000 px y 720 px) son los del diseno original,
   no una eleccion nueva.
--------------------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #FFFFFF;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #40495A;
  -webkit-font-smoothing: antialiased;
}

a { color: #1C355E; text-decoration: none; }
a:hover { color: #29C4B7; }
input, select, textarea, button { font-family: inherit; }
::selection { background: #29C4B7; color: #FFFFFF; }
img, svg { max-width: 100%; }

.pagina { min-height: 100vh; display: flex; flex-direction: column; }

/* Enlace de la navegacion correspondiente a la pagina abierta. */
.activo { color: #1C355E !important; border-bottom-color: #29C4B7 !important; }

/* Foco visible: el diseno original no lo contemplaba y sin el la web no se
   puede recorrer con el teclado. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid #29C4B7;
  outline-offset: 2px;
}


/* --- Medidas: escritorio (>= 1000px) --- */
.c-hero { grid-template-columns: 1.05fr .95fr; }
.c-3 { grid-template-columns: repeat(3,1fr); }
.c-2 { grid-template-columns: repeat(2,1fr); }
.c-mod { grid-template-columns: 300px 1fr; }
.c-contacto { grid-template-columns: 1.35fr .65fr; }
.p-section { padding: 86px 28px; }
.p-hero { padding: 104px 28px 96px; }
.p-page { padding: 96px 28px 80px; }
.p-header { padding: 0 28px; }
.g-lg { gap: 64px; }
.g-nav { gap: 32px; }
.t-h1 { font-size: 54px; }
.t-h1p { font-size: 48px; }
.t-h2 { font-size: 34px; }
.t-lead { font-size: 19px; }
.t-nav { font-size: 15px; }

@media (max-width: 999px) {
  .c-hero { grid-template-columns: 1fr; }
  .c-3 { grid-template-columns: 1fr; }
  .c-mod { grid-template-columns: 1fr; }
  .c-contacto { grid-template-columns: 1fr; }
}

@media (max-width: 719px) {
  .c-2 { grid-template-columns: 1fr; }
  .p-section { padding: 56px 22px; }
  .p-hero { padding: 48px 22px 56px; }
  .p-page { padding: 56px 22px 48px; }
  .p-header { padding: 0 18px; }
  .g-lg { gap: 40px; }
  .g-nav { gap: 16px; }
  .t-h1 { font-size: 34px; }
  .t-h1p { font-size: 31px; }
  .t-h2 { font-size: 25px; }
  .t-lead { font-size: 17px; }
  .t-nav { font-size: 14px; }
}

/* --- Estados :hover (eran atributos style-hover del original) --- */
.hv-1:hover { color:#1C355E; border-bottom:2px solid #29C4B7; }
.hv-2:hover { background:#29C4B7; color:#FFFFFF; }
.hv-3:hover { color:#29C4B7; }
.hv-4:hover { color:#29C4B7; border-bottom:1px solid #29C4B7; }
.hv-5:hover { color:#FFFFFF; border-bottom:1px solid #FFFFFF; }
.hv-6:hover { background:#29C4B7; }

/* Boton de envio del formulario. El original pintaba el color desde el estado
   de React; aqui lo decide :disabled, asi el boton es coherente aunque el
   script no haya cargado todavia. */
.btn-enviar { background: #1C355E; cursor: pointer; transition: background .15s; }
.btn-enviar:disabled { background: #98A1B0; cursor: not-allowed; }
.btn-enviar:not(:disabled):hover { background: #29C4B7; }

/* Honeypot: invisible para una persona, rellenable por un robot. No se usa
   display:none porque hay robots que lo detectan y lo saltan. */
input[name="sitio_web"] {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* Avisos del formulario, ocultos hasta que el script los muestre. */
#form-exito, #form-error { display: none; }