/* =========================================================
   AD Newsletter — cuadro de suscripción
   Los selectores van con .ad-nl delante para que los estilos
   del tema (inputs, botones, h2) no lo desarmen.
   ========================================================= */

div.ad-nl {
  --ad-nl-yellow: #ffec00;
  --ad-nl-ink: #0b1a0e;
  --ad-nl-white: #ffffff;
  --ad-nl-error: #c2002f;
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
  background: var(--ad-nl-yellow);
  color: var(--ad-nl-ink);
  padding: 16px 18px 18px 22px;
  font-family: "Barlow", "DIN Alternate", Arial, sans-serif;
  text-align: left;
  overflow: hidden;
}
.ad-nl *, .ad-nl *::before, .ad-nl *::after { box-sizing: border-box; }

.ad-nl .ad-nl__mark { position: absolute; left: 10px; top: 16px; width: 14px; height: 30px; }

.ad-nl .ad-nl__kicker {
  margin: 0 0 12px 12px; padding: 0;
  font-family: inherit; font-weight: 600; font-size: 15.5px; line-height: 1.12;
  color: var(--ad-nl-ink);
}

.ad-nl .ad-nl__title {
  margin: 0 0 12px 12px; padding: 0; border: 0; background: none;
  font-family: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
  font-weight: 400; font-size: 46px; line-height: .86; letter-spacing: .2px;
  text-transform: uppercase; color: var(--ad-nl-ink);
}

.ad-nl .ad-nl__form { margin: 0; padding: 0; }

.ad-nl .ad-nl__label {
  display: block; margin: 0 0 6px 12px; padding: 0;
  font-family: inherit; font-weight: 600; font-size: 13.5px; letter-spacing: .3px; line-height: 1.3;
  color: var(--ad-nl-ink);
}

.ad-nl .ad-nl__row { display: flex; align-items: center; padding-right: 50px; margin: 0; }

.ad-nl .ad-nl__input {
  flex: 1 1 auto; min-width: 0; width: auto; height: 32px; margin: 0;
  padding: 0 14px;
  border: 1.5px solid var(--ad-nl-white); border-radius: 999px;
  background: transparent; color: var(--ad-nl-ink); box-shadow: none;
  font: 500 14px/1 "Barlow", Arial, sans-serif;
  outline: none; -webkit-appearance: none; appearance: none;
  transition: background .2s, border-color .2s;
}
.ad-nl .ad-nl__input::placeholder { color: rgba(11, 26, 14, .45); opacity: 1; }
.ad-nl .ad-nl__input:focus { background: rgba(255, 255, 255, .55); border-color: var(--ad-nl-ink); box-shadow: none; }
.ad-nl.is-error .ad-nl__input { border-color: var(--ad-nl-error); background: rgba(255, 255, 255, .5); }

/* Botón = puntos + flecha + sobre */
.ad-nl .ad-nl__submit {
  display: flex; flex-direction: column; align-items: center;
  position: absolute; right: 12px; bottom: 12px;
  width: 40px; min-width: 0; height: auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--ad-nl-ink); cursor: pointer; line-height: 1;
}
.ad-nl .ad-nl__submit:hover,
.ad-nl .ad-nl__submit:focus { background: transparent; color: var(--ad-nl-ink); }
.ad-nl .ad-nl__submit:focus-visible { outline: 2px dashed var(--ad-nl-ink); outline-offset: 3px; }

.ad-nl .ad-nl__dots { display: flex; flex-direction: column; gap: 3px; margin-bottom: 3px; }
.ad-nl .ad-nl__dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--ad-nl-ink); }
.ad-nl .ad-nl__dots i:nth-child(1) { opacity: .12; }
.ad-nl .ad-nl__dots i:nth-child(2) { opacity: .25; }
.ad-nl .ad-nl__dots i:nth-child(3) { opacity: .45; }
.ad-nl .ad-nl__dots i:nth-child(4) { opacity: .7; }

.ad-nl .ad-nl__arrow { display: block; width: 34px; height: 46px; transition: transform .25s ease; }
.ad-nl .ad-nl__env { display: block; width: 34px; height: 28px; margin-top: 2px; }
.ad-nl .ad-nl__submit:hover .ad-nl__arrow,
.ad-nl .ad-nl__submit:focus-visible .ad-nl__arrow { transform: translateY(5px); }

/* Enviando */
.ad-nl.is-loading .ad-nl__submit { cursor: progress; }
.ad-nl.is-loading .ad-nl__dots i { animation: adnl-pulse 1s infinite ease-in-out; }
.ad-nl.is-loading .ad-nl__dots i:nth-child(2) { animation-delay: .12s; }
.ad-nl.is-loading .ad-nl__dots i:nth-child(3) { animation-delay: .24s; }
.ad-nl.is-loading .ad-nl__dots i:nth-child(4) { animation-delay: .36s; }
.ad-nl.is-loading .ad-nl__dots i:nth-child(5) { animation-delay: .48s; }
@keyframes adnl-pulse { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }

.ad-nl .ad-nl__msg { margin: 6px 50px 0 12px; padding: 0; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.ad-nl .ad-nl__msg:empty { display: none; }
.ad-nl.is-error .ad-nl__msg { color: var(--ad-nl-error); }

/* Éxito */
.ad-nl .ad-nl__done { display: none; margin: 0 0 0 12px; }
.ad-nl .ad-nl__done strong {
  display: block; margin-bottom: 4px;
  font-family: "Bebas Neue", "Oswald", "Arial Narrow", Impact, sans-serif;
  font-weight: 400; font-size: 30px; line-height: .9; text-transform: uppercase;
}
.ad-nl .ad-nl__done span { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.ad-nl .ad-nl__done svg { flex: 0 0 auto; color: var(--ad-nl-ink); }
.ad-nl.is-success .ad-nl__form { display: none; }
.ad-nl.is-success .ad-nl__done { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Honeypot */
.ad-nl .ad-nl__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 360px) {
  .ad-nl .ad-nl__title { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .ad-nl .ad-nl__arrow { transition: none; }
  .ad-nl.is-loading .ad-nl__dots i { animation: none; opacity: .6; }
}