/* ==========================================================================
   PLUSERS · Bloque de alta a la newsletter
   Este archivo va en:  /assets/plusers-newsletter.css
   Se carga una vez por página con:
     <link rel="stylesheet" href="/assets/plusers-newsletter.css">

   Dos temas:
     .pl-nl--oscuro  → sobre el azul #011489
     .pl-nl--claro   → sobre fondo blanco o gris claro
   ========================================================================== */

.pl-nl{
  /* Marca Plusers */
  --pl-azul:#011489;
  --pl-azul-oscuro:#000f6b;
  --pl-amarillo:#FFCC00;
  --pl-dorado:#8A6300;

  box-sizing:border-box;
  font-family:"Open Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  padding:2.5rem 1.25rem;
}
.pl-nl *,.pl-nl *::before,.pl-nl *::after{box-sizing:border-box;}
.pl-nl__inner{max-width:44rem;margin:0 auto;}

/* ---------- Tema claro ---------- */
.pl-nl--claro{
  --pl-fondo:#f6f7fc;
  --pl-texto:#12142b;
  --pl-suave:#5b5f7a;
  --pl-acento:var(--pl-azul);
  --pl-kicker:var(--pl-dorado);
  --pl-campo-fondo:#ffffff;
  --pl-campo-borde:#d7d9e8;
  --pl-campo-texto:#12142b;
  --pl-boton-fondo:var(--pl-azul);
  --pl-boton-texto:#ffffff;
  --pl-boton-hover:var(--pl-azul-oscuro);
  background:var(--pl-fondo);
  border-radius:14px;
}

/* ---------- Tema oscuro (sobre el azul) ---------- */
.pl-nl--oscuro{
  --pl-fondo:transparent;
  --pl-texto:#ffffff;
  --pl-suave:#c5cbf2;
  --pl-acento:#ffffff;
  --pl-kicker:var(--pl-amarillo);
  --pl-campo-fondo:#ffffff;
  --pl-campo-borde:transparent;
  --pl-campo-texto:#12142b;
  --pl-boton-fondo:var(--pl-amarillo);
  --pl-boton-texto:#12142b;
  --pl-boton-hover:#ffd633;
  background:var(--pl-fondo);
}

.pl-nl{color:var(--pl-texto);}

/* Variante estrecha: para barras laterales o columnas de menos de 30rem.
   Añadid la clase pl-nl--estrecho junto al tema. */
.pl-nl--estrecho{padding:1.75rem 1.25rem;}
.pl-nl--estrecho .pl-nl__title{font-size:1.35rem;}
.pl-nl--estrecho .pl-nl__row{flex-direction:column;}

.pl-nl__intro{margin-bottom:2rem;}
.pl-nl__kicker{
  display:flex;align-items:center;gap:.7rem;
  margin:0 0 .9rem;font-size:.78rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--pl-kicker);
}
.pl-nl__kicker::before{
  content:"";width:2.2rem;height:3px;background:var(--pl-amarillo);border-radius:2px;flex:0 0 auto;
}
.pl-nl__title{
  font-family:"Poppins","Open Sans",system-ui,sans-serif;
  margin:0 0 .9rem;font-size:1.75rem;line-height:1.2;font-weight:700;color:var(--pl-acento);
}
.pl-nl__lead{margin:0;font-size:1rem;line-height:1.65;color:var(--pl-suave);}

.pl-nl__form{display:flex;flex-direction:column;gap:1rem;}

.pl-nl__row{display:flex;flex-direction:column;gap:.75rem;}
.pl-nl__field{display:flex;flex-direction:column;gap:.35rem;flex:1 1 auto;min-width:0;}
.pl-nl__label{font-size:.85rem;font-weight:600;color:var(--pl-texto);}
.pl-nl__opt{font-weight:400;color:var(--pl-suave);}
.pl-nl__sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.pl-nl__input{
  width:100%;padding:.95rem 1rem;font:inherit;font-size:1rem;
  color:var(--pl-campo-texto);background:var(--pl-campo-fondo);
  border:1px solid var(--pl-campo-borde);border-radius:10px;
  transition:box-shadow .15s ease,border-color .15s ease;
}
.pl-nl__input::placeholder{color:#8b90b0;}
.pl-nl__input:focus-visible{
  outline:none;border-color:var(--pl-amarillo);
  box-shadow:0 0 0 3px rgba(255,204,0,.45);
}
.pl-nl__select{
  appearance:none;padding-right:2.6rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='%23011489' d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;
}

.pl-nl__button{
  font:inherit;font-family:"Poppins","Open Sans",system-ui,sans-serif;
  font-size:1rem;font-weight:700;white-space:nowrap;
  color:var(--pl-boton-texto);background:var(--pl-boton-fondo);
  border:0;border-radius:10px;padding:.95rem 1.6rem;cursor:pointer;
  transition:background .15s ease;
}
.pl-nl__button:hover{background:var(--pl-boton-hover);}
.pl-nl__button:focus-visible{outline:3px solid var(--pl-amarillo);outline-offset:3px;}
.pl-nl__button[disabled]{opacity:.6;cursor:progress;}

.pl-nl__extra{margin:0;}
.pl-nl__summary{
  cursor:pointer;font-size:.88rem;color:var(--pl-suave);
  padding:.15rem 0;list-style:none;display:flex;align-items:center;gap:.45rem;
}
.pl-nl__summary::-webkit-details-marker{display:none;}
.pl-nl__summary::before{
  content:"+";font-weight:700;color:var(--pl-amarillo);font-size:1rem;line-height:1;
}
.pl-nl__extra[open] .pl-nl__summary::before{content:"–";}
.pl-nl__summary:hover{color:var(--pl-texto);}
.pl-nl__summary:focus-visible{outline:2px solid var(--pl-amarillo);outline-offset:3px;border-radius:4px;}
.pl-nl__extra-inner{display:flex;flex-direction:column;gap:.75rem;padding-top:.85rem;}

.pl-nl__hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden;}

.pl-nl__consent{display:flex;gap:.65rem;align-items:flex-start;}
.pl-nl__check{
  margin-top:.2rem;width:1.05rem;height:1.05rem;flex:0 0 auto;
  accent-color:var(--pl-amarillo);
}
.pl-nl__consent-text{font-size:.82rem;line-height:1.55;color:var(--pl-suave);}
.pl-nl__consent-text a{color:var(--pl-acento);text-underline-offset:2px;}

.pl-nl__status{margin:0;font-size:.92rem;line-height:1.55;font-weight:600;}
.pl-nl--claro .pl-nl__status[data-estado="ok"]{color:#0b6b3a;}
.pl-nl--claro .pl-nl__status[data-estado="error"]{color:#a11b1b;}
.pl-nl--oscuro .pl-nl__status[data-estado="ok"]{color:var(--pl-amarillo);}
.pl-nl--oscuro .pl-nl__status[data-estado="error"]{color:#ffb4b4;}

@media (min-width:640px){
  .pl-nl{padding:3.5rem 2rem;}
  .pl-nl__title{font-size:2.15rem;}
  .pl-nl__row{flex-direction:row;align-items:stretch;}
  .pl-nl__extra-inner{flex-direction:row;}
  .pl-nl__extra-inner .pl-nl__field{flex:1 1 50%;}
  .pl-nl--estrecho{padding:1.75rem 1.5rem;}
  .pl-nl--estrecho .pl-nl__row,
  .pl-nl--estrecho .pl-nl__extra-inner{flex-direction:column;}
}
@media (prefers-reduced-motion:reduce){
  .pl-nl *{transition:none !important;animation:none !important;}
}