/* ===========================
   Mobile-first responsive theme
   =========================== */

/* Escala tipográfica y espaciados fluidos */
/* Escala tipográfica y espaciados (LEGACY, sin clamp) */


/* ===== LEGACY: sin var() ni clamp() ===== */
:root{
  /* Colores */
  --bg-0:#081313;
  --txt:#e7f8f1;
  --muted:#9fb4ad;
  --accent:#22e58f;
  --accent-weak: rgba(34,229,143,.18);
  --stroke: rgba(255,255,255,.08);
  --danger:#ff4d4f;

  /* Tipografía fluida (clamp: min, viewport, max) */
  --fs-xs: clamp(.85rem, .78rem + .3vw, .95rem);
  --fs-sm: clamp(.95rem, .9rem + .35vw, 1.05rem);
  --fs-base: clamp(1rem, .95rem + .4vw, 1.125rem);
  --fs-lead: clamp(1rem, .9rem + .9vw, 1.25rem);
  --fs-h1: clamp(1.6rem, 1.2rem + 3.2vw, 2.25rem);

  /* Radios y sombras escalables */
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);

  /* Layout */
  --content-max-sm: 520px;
  --content-max-md: 640px;
  --content-max-lg: 720px;
}

html, body { height: 100%; }
body.mail-theme{
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(34,229,143,.08), transparent 60%),
    radial-gradient(1000px 700px at 85% 20%, rgba(34,229,143,.06), transparent 55%),
    linear-gradient(180deg, #071010 0%, #0a1314 100%);
  color: var(--txt);
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  /* iOS safe areas */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ====== FIX LAYOUT: centro y ancho completo ====== */
.page-wrap{
  min-height: calc(100vh - 56px); /* descuenta altura nav aprox */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 4vw, 4rem) 1rem;
  width: 100%;
}
.page-wrap .row{ width: 100%; }
.form-col-max{ max-width: var(--content-max-sm); margin-inline: auto; }

/* Escala de tope por breakpoints */
@media (min-width: 768px){
  .form-col-max{ max-width: var(--content-max-md); }
}
@media (min-width: 992px){
  .form-col-max{ max-width: var(--content-max-lg); }
}

/* ===== Card tipo glass con halo ===== */
.glass-card{
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, rgba(19,32,30,.9), rgba(10,20,18,.9));
  border-radius: var(--radius-lg);
  border: 1px solid var(--stroke);
  box-shadow:
    0 0 0 1px var(--accent-weak) inset,
    0 30px 80px rgba(0,0,0,.55),
    var(--shadow);
  backdrop-filter: blur(8px);
}
.neon-card::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  background: radial-gradient(60% 80% at 50% 0%, var(--accent-weak), transparent 70%);
  filter: blur(12px);
  z-index:-1; pointer-events:none;
  animation: pulseGlow 4.8s ease-in-out infinite;
}
@keyframes pulseGlow{ 0%,100%{opacity:.55} 50%{opacity:.85} }

/* Logo/ícono: tamaño fluido y retina-ready */
.logo-wrap{ display:grid; place-items:center; }
.logo-img{
  width: clamp(60px, 10vw, 72px);
  height: clamp(60px, 10vw, 72px);
  object-fit: contain;
  background: linear-gradient(180deg, #2cf5a0, #16c779);
  border-radius: calc(var(--radius-md) + 4px);
  padding: clamp(8px, 1.2vw, 12px);
  box-shadow:
    0 10px 24px rgba(22,199,121,.35),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Titulares y lead fluidos */
.display-6{ font-size: var(--fs-h1) !important; line-height: 1.15; }
.lead{ font-size: var(--fs-lead); }
.text-muted-contrast{ color: var(--muted) !important; }

/* ===== Controles oscuros (inputs/selects) ===== */
.control-dark.form-control,
.control-dark.form-select{
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(10,18,17,.9), rgba(8,14,13,.9));
  border: 1px solid rgba(255,255,255,.08);
  color: var(--txt);
  border-radius: var(--radius-md);
  padding: clamp(.85rem, .75rem + .5vw, 1rem) 1.1rem;
  min-height: 48px;            /* objetivo táctil */
  font-size: var(--fs-base);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.control-dark.form-control::placeholder{ color: rgba(231,248,241,.45); }
.control-dark.form-control:focus,
.control-dark.form-select:focus{
  border-color: rgba(34,229,143,.45);
  box-shadow:
    0 0 0 3px rgba(34,229,143,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
  outline: none;
}
.form-label{
  color: var(--txt);
  font-weight: 600;
  margin-bottom: .5rem;
  display: inline-flex; align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
}

/* Evita zoom en iOS al enfocar inputs */
@supports (-webkit-touch-callout: none){
  input, select, textarea { font-size: 16px; }
}

/* ===== Botón CTA rojo ===== */
.cta-danger{
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: #ff5d60;
  --bs-btn-hover-border-color: #ff5d60;
  --bs-btn-active-bg: #e23f41;
  --bs-btn-color: #fff;
  border-radius: var(--radius-md);
  padding: clamp(.9rem, .8rem + .4vw, 1rem) 1rem;
  min-height: 52px;
  box-shadow:
    0 12px 30px rgba(255,77,79,.25),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* ===== Navbar & Footer ===== */
.navbar.bg-dark{
  background: rgba(6,12,11,.85) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}
footer.bg-dark{
  background: rgba(6,12,11,.85) !important;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* ===== Modal: full-screen en móviles ===== */
@media (max-width: 576px){
  .modal-dialog{
    margin: 0;
    max-width: none;
    height: 100%;
  }
  .modal-content{
    height: 100%;
    border-radius: 0;
  }
}

/* ===== Accesibilidad extra ===== */
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* Reduce efectos si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* Alto contraste (Windows/UA) */
@media (forced-colors: active){
  .glass-card, .control-dark, .cta-danger, .navbar, footer{ border: 1px solid CanvasText; }
}

/* ==== Card & layout tweaks (mobile-first) ==== */
.page-wrap{
  min-height: calc(100vh - 56px);
  display:flex; align-items:center; justify-content:center;
  padding: clamp(1.5rem, 3.5vw, 3.5rem) 1rem;
  width:100%;
}
.page-wrap .row{ width:100%; }
.form-col-max{ max-width: 560px; margin-inline:auto; }

/* Card más compacta en móvil, más aire en desktop */
.glass-card{
  padding: clamp(1rem, 3.5vw, 2rem) !important;
  border-radius: clamp(18px, 3vw, 24px);
}
@media (min-width: 768px){
  .glass-card{ padding: clamp(1.25rem, 2.5vw, 2.5rem) !important; }
}

/* Halo más suave en pantallas pequeñas */
.neon-card::before{ filter: blur(10px); opacity:.6; }
@media (max-width: 420px){
  .neon-card::before{ opacity:.45; filter: blur(8px); }
}

/* ==== Tipografía y jerarquía fluidas ==== */
.display-6{
  font-size: clamp(1.6rem, 1.1rem + 3.5vw, 2.3rem) !important;
  line-height: 1.15;
  letter-spacing: .2px;
}
.lead{
  font-size: clamp(0.95rem, 0.8rem + .7vw, 1.1rem);
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
.form-label{
  font-weight: 600;
  font-size: clamp(.92rem, .85rem + .25vw, 1rem);
  margin-bottom: .45rem;
}

/* ==== Controles: tamaños táctiles, mejor legibilidad ==== */
.control-dark.form-control,
.control-dark.form-select{
  min-height: clamp(46px, 5.5vw, 54px);
  padding: clamp(.8rem, .7rem + .4vw, 1rem) 1.05rem;
  border-radius: clamp(12px, 2.4vw, 16px);
}
.control-dark.form-control::placeholder{ opacity:.55; }
.control-dark.form-control:focus,
.control-dark.form-select:focus{
  border-color: rgba(34,229,143,.45);
  box-shadow: 0 0 0 3px rgba(34,229,143,.18), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Separación limpia entre elementos del form */
.stack-forms{ gap: clamp(.75rem, 2.4vw, 1.1rem) !important; }

/* ==== Botón CTA mejor balanceado y sin “salto” visual ==== */
.cta-danger{
  border-radius: clamp(12px, 2.4vw, 16px);
  min-height: clamp(48px, 6vw, 56px);
  font-size: clamp(1rem, .95rem + .2vw, 1.1rem);
  box-shadow:
    0 10px 24px rgba(255,77,79,.20),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* ==== Alert suave y alineado al ancho del card ==== */
.soft-alert{
  background: rgba(255, 77, 79, .18);
  border: 1px solid rgba(255,255,255,.08);
  color: #ffd9db;
  border-radius: clamp(12px, 2.4vw, 16px);
  padding: .85rem 1rem;
}

/* ==== Navbar: altura y paddings coherentes en móvil ==== */
.navbar .navbar-brand{ font-size: clamp(1rem, .9rem + .5vw, 1.125rem); }
.navbar .navbar-toggler{ padding: .35rem .5rem; }

/* ==== Modal: full-screen en móviles, card en desktop ==== */
@media (max-width: 576px){
  .modal-dialog{ margin:0; max-width:none; height:100%; }
  .modal-content{ height:100%; border-radius:0; }
}

/* ==== Evita zoom en iOS al enfocar ==== */
@supports (-webkit-touch-callout: none){
  input, select, textarea { font-size: 16px; }
}

/* ==== Respeto a reduce-motion ==== */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}


/* Contenedor del logo con marco glass y glow turquesa */
.logo-frame{
  display: inline-grid;
  place-items: center;
  margin-inline: auto;
  padding: clamp(8px, 1.8vw, 14px);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20,30,29,.75), rgba(10,18,17,.75));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 0 0 1px rgba(34,229,143,.18) inset,
    0 20px 40px rgba(0,0,0,.45),
    0 0 26px rgba(0, 216, 255, .25); /* glow exterior */
  backdrop-filter: blur(6px);
  max-width: clamp(180px, 60vw, 360px);
}

/* Imagen del logo: mantiene proporción y se centra */
.brand-logo{
  display:block;
  width: 100%;
  height: auto;
  object-fit: contain;      /* por si es más ancho que alto */
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.35));
}

/* Halo suave animado (opcional) */
.logo-frame::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(60% 90% at 50% 0%, rgba(34,229,143,.18), transparent 70%);
  filter: blur(10px);
  animation: logoGlow 5s ease-in-out infinite;
}
@keyframes logoGlow{
  0%,100%{ opacity:.55; }
  50%{ opacity:.85; }
}


.brand-logo-plain{
  display:block;
  margin-inline:auto;
  width: clamp(180px, 60vw, 360px);  /* se adapta a móvil/desktop */
  height: auto;
  object-fit: contain;
  border-radius: 12px;               /* suaviza esquinas del rectángulo */
  box-shadow:
    0 16px 34px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.06) inset;
}


html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;   /* evita scroll vertical y horizontal */
}
.page-wrap {
  min-height: 100vh;  /* ocupa toda la altura visible */
  display: flex;
  align-items: center;
  justify-content: center;
}

/*.glass-card {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 
    0 0 15px rgba(34, 229, 143, .6),   /* glow verde 
    0 0 30px rgba(34, 229, 143, .4), 
    0 0 45px rgba(34, 229, 143, .2);
}  
*/


.glass-card {
  position: relative;
  border-radius: 20px;
  background: rgba(10,18,17,.9);
  overflow: hidden;
  z-index: 0;
}

/* Borde multicolor */
.glass-card::before {
  content: "";
  position: absolute;
  inset: -3px; /* sobresale un poco fuera */
  border-radius: inherit;
  background: linear-gradient(270deg,
    #ff0040,   /* rojo */
    #ff8c00,   /* naranja */
    #ffee00,   /* amarillo */
    #22e58f,   /* verde */
    #00d9ff,   /* celeste */
    #8a2be2,   /* violeta */
    #ff0040    /* vuelve al rojo */
  );
  background-size: 600% 600%;
  animation: borderRGB 12s linear infinite;
  z-index: -1;
  filter: blur(8px); /* luz difusa */
}

/* Fondo interno para que no tape el contenido */
.glass-card::after {
  content: "";
  position: absolute;
  inset: 3px; /* crea margen interior */
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(19,32,30,.95), rgba(10,20,18,.95));
  z-index: -1;
}

/* Animación del gradiente */
@keyframes borderRGB {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

#particles-js {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;     /* queda detrás de todo */
  background: #081313; /* tu color de fondo base */
}


/*BORDES*/