/* stylescss/aviso_de_privacidad.css
   -- CSS acotado para la sección "aviso-container".
   No modifica html/body global para evitar romper header/footer u otros estilos.
*/

:root{
  --card: #ffffff;
  --accent: #0047A0;
  --accent-2: #2fa6ff;
  --muted: #5b6b7a;
  --glass-shadow: 0 0.625rem 1.875rem rgba(7,18,40,0.06); /* 10px 30px */
  --text: #071f3a;
}

/* Solo aplicar la fuente y estilos dentro del aviso para no afectar otras páginas */
.aviso-container,
.aviso-container * {
  box-sizing: border-box;
}

/* Contenedor principal: centrado en flujo normal (no tocar body) */
.aviso-container{
  max-width: 57.5rem;              /* 920px */
  margin: 2.5rem auto;             /* 40px */
  background: var(--card);
  padding: 2.25rem;                /* 36px */
  border-radius: 0.875rem;         /* 14px */
  box-shadow: var(--glass-shadow);
  text-align: center;
  color: var(--text);
  animation: cardIn 700ms cubic-bezier(.22,.9,.32,1);
}

/* Título principal */
.aviso-container h1{
  font-size: clamp(2rem, 4.8vw, 3.6rem);
  margin: 0 0 1.125rem;            /* 18px */
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.01em;
  display: inline-block;
  position: relative;
  padding-bottom: 0.75rem;         /* 12px */
}

/* barra decorativa animada bajo el h1 */
.aviso-container h1::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 62%;
  height: 0.5rem;                  /* 8px */
  border-radius: 62.4375rem;       /* 999px */
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  filter: blur(0.025rem);          /* 0.4px */
  animation: slideGlow 2.8s linear infinite;
  opacity: .95;
}

/* Subtítulos y texto */
.aviso-container h2{
  font-size: 1.25rem;
  margin: 1.375rem 0 0.625rem;     /* 22px 10px */
  font-weight: 700;
  color: #0a2b4f;
  line-height: 1.22;
}

.aviso-container p{
  font-size: 1rem;
  margin: 0.5rem 0 1rem;           /* 8px 16px */
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
}

/* Listas */
.aviso-container ul{
  display: inline-block;
  text-align: left;
  margin: 0.625rem auto 1.375rem;  /* 10px 22px */
  padding-left: 1.15rem;
  max-width: 51.25rem;             /* 820px */
  width: 100%;
}

.aviso-container li{
  margin-bottom: 0.5rem;           /* 8px */
  line-height: 1.45;
}

/* Highlight */
.aviso-container .highlight{
  background: linear-gradient(180deg, #f0fbff, #eaf4fc);
  padding: 0.875rem;               /* 14px */
  border-left: 0.25rem solid var(--accent-2); /* 4px */
  border-radius: 0.625rem;         /* 10px */
  margin: 0.75rem auto;            /* 12px */
  display: inline-block;
  max-width: 100%;
  box-shadow: 0 0.25rem 1rem rgba(45,155,255,0.05); /* 4px 16px */
  animation: subtleFloat 6s ease-in-out infinite;
  color: #06314f;
}

/* Floating label inputs */
.aviso-container .form-field{
  position: relative;
  margin: 1.125rem auto 0.5rem;    /* 18px 8px */
  width: min(26.25rem, 92%);       /* 420px */
  text-align: left;
}

.aviso-container .form-field input,
.aviso-container .form-field textarea{
  width: 100%;
  padding: 0.875rem;               /* 14px */
  border-radius: 0.625rem;         /* 10px */
  border: 0.0625rem solid rgba(10,30,60,0.08); /* 1px */
  background: rgba(250,250,252,1);
  font-size: 1rem;
  transition: box-shadow .18s ease, border-color .18s ease, transform .12s ease;
  outline: none;
}

.aviso-container .form-field input:focus,
.aviso-container .form-field textarea:focus{
  border-color: var(--accent-2);
  box-shadow: 0 0.625rem 1.875rem rgba(47,166,255,0.08); /* 10px 30px */
  transform: translateY(-0.1875rem); /* 3px */
}

/* etiqueta flotante */
.aviso-container .form-field label{
  position: absolute;
  left: 0.75rem;                   /* 12px */
  top: 0.75rem;                    /* 12px */
  font-size: 0.96rem;
  color: var(--muted);
  pointer-events: none;
  transition: transform .16s ease, font-size .16s ease, top .16s ease, color .16s ease;
}

/* label activa */
.aviso-container .form-field input:focus + label,
.aviso-container .form-field input:not(:placeholder-shown) + label{
  top: -0.5rem;                    /* 8px */
  font-size: 0.78rem;
  color: var(--accent);
  background: var(--card);
  padding: 0 0.375rem;             /* 6px */
}

/* Animaciones */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(1.125rem) scale(.995); } /* 18px */
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideGlow {
  0% { transform: translateX(-50%) scaleX(.95); opacity:.8; }
  50% { transform: translateX(-50%) scaleX(1.02); opacity:1; }
  100% { transform: translateX(-50%) scaleX(.95); opacity:.8; }
}

@keyframes subtleFloat {
  0% { transform: translateY(0); }
  50%{ transform: translateY(-0.25rem); } /* 4px */
  100%{ transform: translateY(0); }
}

/* Responsive */

/* Laptops y Desktops Pequeños (1200px) */
@media (max-width: 75rem) {
  .aviso-container { max-width: 95%; }
}

/* Tablets (1024px) */
@media (max-width: 64rem) {
  .aviso-container { padding: 1.875rem; } /* 30px */
}

/* Móviles grandes (768px) */
@media (max-width: 48rem) {
  .aviso-container {
    margin: 1.25rem auto;          /* 20px */
    padding: 1.25rem;
    border-radius: 0.625rem;       /* 10px */
  }
}

/* Móviles pequeños (480px) */
@media (max-width: 30rem) {
  .aviso-container {
    padding: 0.9375rem;            /* 15px */
    margin: 0.9375rem auto;
  }
  .aviso-container .highlight {
    padding: 0.75rem;              /* 12px */
    border-radius: 0.5rem;         /* 8px */
  }
  .aviso-container .form-field {
    width: 96%;
  }
}


/* Móviles pequeños (375px) */
@media (max-width: 23.4375rem) {
  .aviso-container {
    padding: 0.9375rem;            /* 15px */
    margin: 0.9375rem auto;
  }
  .aviso-container .highlight {
    padding: 0.75rem;              /* 12px */
    border-radius: 0.5rem;         /* 8px */
  }
  .aviso-container .form-field {
    width: 96%;
  }
}