/* ===== Reset básico ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== Variables personalizadas ===== */
:root {
  --fuente-principal: "Manrope", sans-serif;
  --fuente-secundaria: "Funnel Display", sans-serif;
  --color-azul: #111347;
  --color-naranja: #FF7300;
  --color-verde: #88F893;
  --color-azul-claro: #111347;
  --color-azul-fondo: #ECF1F4;
  --color-gris-fondo: #AAC4C6;
  --orb-azul: #00A4FF;
  --orb-amarillo: #ff8800;
  --orb-naranja: #FF7300;
  --orb-rojo: #FB605E;
  --orb-rojo-2: #FF413F;
  --orb-verde: #88F893;
  --orb-morado: #2659FA;
}

/* ===== Estilos globales ===== */
body {
  font-family: var(--fuente-principal);
  background-color: #ffff;
  color: var(--color-azul);
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

main {
  margin-top: 5rem;
}

/* h1,
h2,
h3,
h4,
h5,
h6 {
  
} */

h1 {
  font-size: 3.8rem;
  font-family: var(--fuente-secundaria);
  font-weight: 600;
}

button.srl_button.navButton {
  /* font-size: 1.05rem;*/
  padding: 0.7rem 1.4rem;
  font-weight: 500;
  min-width: auto;
  white-space: nowrap;
}

button.srl_button.orange {
  background-color: var(--color-naranja);
  background-image: none;
}

button.srl_button.green {
  background-image: none;
  background-color: var(--color-verde);
  color: #111347;
}

button.srl_button.ghost {
  background-color: transparent;
  background-image: none;
  color: #000;
  border: 1px solid #c3c3c3;
}

button.srl_button {
  background-color: #111347;
  background-image: url("/assets/backBlueButton.png");
  background-repeat: no-repeat;
  background-position: center left 45%;
  background-size: cover;
  color: #ffff;
  height: fit-content;
  border: none;
  padding: 0.68rem 2.5rem;
  min-width: 14.4rem;
  outline: none;
  box-sizing: border-box;
  cursor: pointer;
  margin: auto 0;
  border-radius: 28px;
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: 0.6px;
  transition: background-position 0.3s;
}

button.srl_button:hover {
  background-position: 0%;
}

.campo .field-note {
  margin-top: 6px;
  font-size: .9rem;
  line-height: 1.2;
  min-height: 1em;
}

.campoBox .note-error {
  color: #c62828;
}

.campoBox .field-note {
  margin-top: 6px;
  font-size: .9rem;
  line-height: 1.2;
  min-height: 1em;
}

.campo .note-error {
  color: #c62828;
}

.toast-fallback {
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  background: #e9f2ff;
  color: #0a1b3d;
  border: 2px solid #1f6fff;
  padding: 10px 14px;
  border-radius: 8px;
  z-index: 9999;
}

.toast-fallback.error {
  background: #ffefef;
  border-color: #ff4d4f;
  color: #3d0a0a;
}

.toast-region.br {
  position: fixed;
  bottom: 16px;
  right: 16px;
  left: auto;
  top: auto;
  z-index: 9999;
  pointer-events: none;
  max-width: 420px;
}

.toast-region.br .toast {
  pointer-events: auto;
  margin-top: 10px;
}

.toast {
  --bg: #E8F2FB;
  --fg: #0a1b3d;
  --accent: #D0DDFF;
  background: var(--bg);
  color: var(--fg);
  border: 2px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(2, 32, 71, .12);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  pointer-events: auto;
  width: 400px;
  max-width: 960px;
  margin: 0 auto;
  transform: translateY(-20px);
  opacity: 0;
  animation: toast-in .25s ease-out forwards
}

.toast--error {
  --bg: #ffefef;
  --fg: #3d0a0a;
  --accent: #ff4d4f
}

.toast__icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--fg);
  color: #fff;
  border-radius: 999px
}

.toast__msg {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  flex: 1
}

.toast__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px
}

.toast__close:hover {
  background: rgba(0, 0, 0, .06)
}

@keyframes toast-in {
  from {
    transform: translateY(-16px);
    opacity: 0
  }

  to {
    transform: translateY(0);
    opacity: 1
  }
}

@keyframes toast-out {
  from {
    transform: translateY(0);
    opacity: 1
  }

  to {
    transform: translateY(-16px);
    opacity: 0
  }
}

@media (max-width: 768px) {
  button.srl_button {
    font-size: 0.93rem;
  }

}