/* =========================================================
   NEWSLETTER — estilos exclusivos de /newsletter
   La identidad general proviene de /css/style.css.
   ========================================================= */

.newsletter-page{
  background:var(--hueso);
}

.newsletter-page.newsletter-modal-open{
  overflow:hidden;
}

/* ---------- Portada de la edición ---------- */
.newsletter-hero{
  position:relative;
  overflow:hidden;
  padding:172px 0 116px;
  background:linear-gradient(180deg,var(--hueso) 0%,var(--arena-clara) 100%);
}

.newsletter-hero-inner{
  position:relative;
  z-index:1;
}

.newsletter-hero .eyebrow{
  position:relative;
  z-index:2;
  margin-bottom:24px;
}

.newsletter-hero h1{
  position:relative;
  z-index:2;
  max-width:920px;
  color:var(--azul-profundo);
  font-size:clamp(42px,6vw,76px);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-0.025em;
}

.newsletter-hero h1 em{
  color:var(--bronce);
  font-weight:300;
}

.newsletter-lead{
  position:relative;
  z-index:2;
  max-width:700px;
  margin-top:28px;
  color:var(--azul-profundo);
  font-size:19px;
  line-height:1.7;
}

.newsletter-horizon-sun{
  position:absolute;
  z-index:1;
  right:6%;
  bottom:-44px;
  width:180px;
  height:180px;
  border-radius:50%;
  background:var(--arena-media);
  opacity:.72;
  pointer-events:none;
}

.newsletter-page .newsletter-horizon{
  position:absolute;
  z-index:1;
  right:-8%;
  bottom:-205px;
  width:66%;
  height:190px;
  border-radius:50% 50% 0 0;
  /* Azul grisáceo muy claro: contraste alto aun si el texto crece o se traduce. */
  background:#D7E1E0;
  opacity:1;
  transform:rotate(-3deg);
  pointer-events:none;
}

/* ---------- Artículo ---------- */
.newsletter-main{
  padding:76px 0 100px;
}

.newsletter-article{
  max-width:920px;
}

.newsletter-edition-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 230px;
  align-items:start;
  gap:54px;
}

.newsletter-edition-layout .newsletter-article{
  min-width:0;
}

.newsletter-archive{
  position:sticky;
  top:120px;
  padding:24px 22px;
  border:1px solid var(--linea);
  border-radius:4px;
  background:#fff;
  box-shadow:0 14px 38px rgba(22,58,77,.07);
}

.newsletter-archive-kicker{
  margin-bottom:8px;
  color:var(--bronce);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.newsletter-archive h2{
  margin-bottom:18px;
  color:var(--azul-profundo);
  font-size:23px;
  font-weight:500;
  line-height:1.2;
}

.newsletter-archive nav{
  display:block;
}

.newsletter-archive ul{
  display:grid;
  gap:8px;
  list-style:none;
}

.newsletter-archive a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--linea);
  color:#304B58;
  font-size:14px;
  line-height:1.35;
}

.newsletter-archive li:last-child a{
  border-bottom:0;
}

.newsletter-archive a:hover span{
  color:var(--bronce);
}

.newsletter-archive small{
  flex-shrink:0;
  color:#738791;
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.newsletter-issue-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:34px;
  color:var(--azul-medio);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.newsletter-dot{
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--bronce);
}

.newsletter-title{
  max-width:800px;
  margin:0 auto 48px;
  color:var(--azul-profundo);
  font-size:clamp(32px,4.5vw,52px);
  font-weight:500;
  line-height:1.14;
  text-align:center;
}

.newsletter-content{
  max-width:760px;
  margin:0 auto;
}

.newsletter-content > p,
.newsletter-property > p:not(.eyebrow){
  color:#304B58;
  font-size:18px;
  line-height:1.82;
}

.newsletter-content > p + p{
  margin-top:20px;
}

.newsletter-content h3{
  margin:48px 0 16px;
  color:var(--azul-profundo);
  font-size:28px;
  font-weight:500;
  line-height:1.25;
}

.newsletter-content ul{
  display:grid;
  gap:14px;
  margin:18px 0 8px;
  padding:0;
  list-style:none;
}

.newsletter-content li{
  position:relative;
  padding:16px 18px 16px 48px;
  border:1px solid var(--linea);
  border-radius:3px;
  background:#fff;
  color:#304B58;
  font-size:16px;
  line-height:1.6;
}

.newsletter-content li::before{
  content:'—';
  position:absolute;
  left:20px;
  color:var(--bronce);
  font-weight:700;
}

.newsletter-inline-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin:56px 0;
  padding:32px 34px;
  border-left:4px solid var(--bronce);
  border-radius:3px;
  background:var(--arena-clara);
}

.newsletter-inline-cta strong{
  display:block;
  margin-bottom:7px;
  color:var(--azul-profundo);
  font-family:'Fraunces',serif;
  font-size:22px;
  font-weight:500;
}

.newsletter-inline-cta p{
  color:#4A6069;
  font-size:15px;
  line-height:1.55;
}

.newsletter-cta-button,
.newsletter-submit{
  flex-shrink:0;
  border:0;
  font-family:'Outfit',sans-serif;
  cursor:pointer;
}

.newsletter-cta-button:disabled,
.newsletter-submit:disabled{
  cursor:wait;
  opacity:.6;
}

.newsletter-divider{
  width:100%;
  height:1px;
  margin:64px 0;
  background:var(--linea);
}

.newsletter-property{
  padding:38px;
  border:1px solid var(--linea);
  border-radius:4px;
  background:#fff;
  box-shadow:0 18px 50px rgba(22,58,77,.07);
}

.newsletter-property .eyebrow{
  margin-bottom:12px;
}

.newsletter-property h3{
  margin:0 0 14px;
  font-size:32px;
}

.newsletter-property-link{
  display:inline-flex;
  margin-top:24px;
}

.newsletter-empty{
  min-height:70vh;
  padding:190px 0 100px;
  background:linear-gradient(180deg,var(--hueso),var(--arena-clara));
}

.newsletter-empty h1{
  margin-bottom:18px;
  color:var(--azul-profundo);
  font-size:clamp(38px,5vw,62px);
  font-weight:500;
}

/* ---------- Modal de suscripción ---------- */
.newsletter-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,41,52,.72);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}

.newsletter-overlay.is-open{
  opacity:1;
  visibility:visible;
}

.newsletter-modal{
  position:relative;
  width:min(680px,100%);
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  padding:46px;
  border-radius:5px;
  background:var(--hueso);
  box-shadow:0 28px 80px rgba(8,28,37,.32);
  transform:translateY(14px);
  transition:transform .25s ease;
}

.newsletter-overlay.is-open .newsletter-modal{
  transform:translateY(0);
}

.newsletter-close{
  position:absolute;
  top:15px;
  right:18px;
  width:38px;
  height:38px;
  border:0;
  background:transparent;
  color:var(--azul-profundo);
  font-size:30px;
  line-height:1;
  cursor:pointer;
}

.newsletter-mark-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  color:var(--azul-medio);
  font-size:12px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.newsletter-mark{
  width:28px;
  height:1px;
  background:var(--bronce);
}

.newsletter-modal h2,
.newsletter-success h2{
  color:var(--azul-profundo);
  font-size:34px;
  font-weight:500;
}

.newsletter-modal-description{
  margin:12px 0 28px;
  color:#4A6069;
  font-size:15px;
  line-height:1.65;
}

.newsletter-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.newsletter-field label{
  display:block;
  margin-bottom:7px;
  color:var(--azul-profundo);
  font-size:13.5px;
  font-weight:600;
}

.newsletter-field label span{
  color:#74858C;
  font-size:12px;
  font-weight:400;
}

.newsletter-field input{
  width:100%;
  border:1.5px solid var(--linea);
  border-radius:3px;
  background:#fff;
  padding:12px 14px;
  color:var(--tinta);
  font-family:'Outfit',sans-serif;
  font-size:15px;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}

.newsletter-field input:focus{
  border-color:var(--bronce);
  box-shadow:0 0 0 3px rgba(179,135,62,.12);
}

.newsletter-submit{
  margin-top:26px;
}

.newsletter-trap{
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.newsletter-status{
  display:none;
  margin-top:16px;
  padding:12px 14px;
  border-radius:3px;
  font-size:14px;
  line-height:1.5;
}

.newsletter-status.is-visible{
  display:block;
}

.newsletter-status.is-error{
  border:1px solid rgba(168,50,50,.25);
  background:rgba(196,68,68,.1);
  color:#A83232;
}

.newsletter-status.is-success{
  border:1px solid rgba(46,140,90,.25);
  background:rgba(46,140,90,.1);
  color:#1F6B45;
}

.newsletter-fine-print,
.subscription-privacy{
  margin-top:18px;
  color:#74858C;
  font-size:12.5px;
  line-height:1.5;
}

.newsletter-success,
.subscription-success{
  text-align:center;
}

.newsletter-success-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  margin-bottom:20px;
  border-radius:50%;
  background:var(--arena-clara);
  color:var(--bronce);
  font-size:31px;
  font-weight:600;
}

.newsletter-success p{
  margin-top:12px;
  color:#4A6069;
  line-height:1.65;
}

/* ---------- Página de confirmación ---------- */
.subscription-main{
  min-height:78vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:170px 24px 96px;
  background:linear-gradient(180deg,var(--hueso) 0%,var(--arena-clara) 100%);
}

/* Acceso directo por GET: formulario aislado, sin la maqueta completa. */
.subscription-page.is-compact .subscription-main{
  min-height:100vh;
  padding:32px 24px;
}

.subscription-card{
  width:min(820px,100%);
  overflow:hidden;
  border:1px solid var(--linea);
  border-radius:5px;
  background:#fff;
  box-shadow:0 24px 70px rgba(22,58,77,.12);
}

.subscription-heading{
  padding:42px 46px 34px;
  background:var(--azul-profundo);
}

.subscription-heading .eyebrow{
  margin-bottom:14px;
  color:var(--arena-media);
}

.subscription-heading .eyebrow::before{
  background:var(--bronce);
}

.subscription-heading h1{
  color:var(--hueso);
  font-size:clamp(34px,5vw,48px);
  font-weight:500;
  line-height:1.12;
}

.subscription-heading > p:last-child:not(.eyebrow){
  max-width:610px;
  margin-top:14px;
  color:rgba(251,248,242,.72);
  font-size:15px;
  line-height:1.65;
}

.subscription-content{
  padding:42px 46px 46px;
}

.subscription-notice{
  margin-bottom:24px;
  padding:13px 16px;
  border:1px solid rgba(168,50,50,.25);
  border-radius:3px;
  background:rgba(196,68,68,.1);
  color:#A83232;
  font-size:14px;
  line-height:1.5;
}

.subscription-success p{
  max-width:520px;
  margin:0 auto;
  color:#304B58;
  font-size:18px;
  line-height:1.7;
}

.subscription-back{
  margin-top:26px;
}

@media (max-width:760px){
  .newsletter-hero{
    padding:142px 0 86px;
  }

  .newsletter-horizon-sun{
    right:-25px;
    width:130px;
    height:130px;
  }

  .newsletter-horizon{
    right:-35%;
    width:100%;
  }

  .newsletter-main{
    padding:58px 0 76px;
  }

  .newsletter-edition-layout{
    grid-template-columns:1fr;
    gap:48px;
  }

  .newsletter-archive{
    position:static;
  }

  .newsletter-inline-cta{
    align-items:flex-start;
    flex-direction:column;
    padding:28px;
  }

  .newsletter-property{
    padding:28px;
  }

  .newsletter-modal{
    padding:38px 26px 30px;
  }

  .newsletter-form-grid{
    grid-template-columns:1fr;
    gap:17px;
  }

  .subscription-main{
    padding:138px 16px 70px;
  }

  .subscription-page.is-compact .subscription-main{
    padding:18px 12px;
  }

  .subscription-heading,
  .subscription-content{
    padding:32px 26px;
  }
}

@media (max-width:480px){
  .newsletter-hero h1{
    font-size:39px;
  }

  .newsletter-lead,
  .newsletter-content > p,
  .newsletter-property > p:not(.eyebrow){
    font-size:16.5px;
  }

  .newsletter-issue-meta{
    align-items:flex-start;
    flex-direction:column;
  }

  .newsletter-dot{
    display:none;
  }

  .newsletter-title{
    text-align:left;
  }

  .newsletter-overlay{
    padding:10px;
  }

  .newsletter-modal{
    max-height:calc(100vh - 20px);
  }
}

@media (prefers-reduced-motion:reduce){
  .newsletter-overlay,
  .newsletter-modal{
    transition:none;
  }
}