/* =========================================================
   Save The American Inventor – Landing CSS (clean rebuild)
   ========================================================= */

/* ---------- Global anti-overflow ---------- */
*{ box-sizing:border-box; }
img, video{ max-width:100%; height:auto; display:block; }
html, body{ overflow-x:hidden; }

/* =========================
   FONTS
   ========================= */
@font-face{
  font-family:'Blackside';
  src:url('../assets/fonts/Blackside-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Blackside';
  src:url('../assets/fonts/Blackside-Bold-Italic.woff2') format('woff2');
  font-weight:700;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:'Blackside Rust';
  src:url('../assets/fonts/Blackside-Rust-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* =========================
   BASE + CONTAINERS
   ========================= */
.landing{
  background:#F7F3EA;
  color:#09082A;
}

.landing-container{
  max-width: 1197px;
  margin:0 auto;
  padding:0 70px;
}

/* Full-bleed helper (para secciones que deben tocar bordes) */
.landing-bleed{
  max-width:1920px;
  margin:0 auto;
  padding:0;
}

/* Dividers */
.landing-divider{ height:22px; width:100%; }
.landing-divider--red{ background:#ED1C24; }
.landing-divider--blue{ background:#2D457B; }

/* =========================
   TYPE SYSTEM
   ========================= */
.landing-stars{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#ED1C24;
  font-size:18px;
  line-height:1;
  margin:0 0 3vh;
}

.landing-h2{
  font-family:"Blackside", sans-serif;
  font-weight:400;
  font-size:42px;
  color:#211F5D;
  text-align:center;
  margin:0 0 14px;
}

.landing-h3{
  font-family:"Blackside", sans-serif;
  font-weight:400;
  font-size:36px;
  color:#211F5D;
  margin:0 0 14px;
}

.landing-copy{
  font-family:"Montserrat", sans-serif;
  font-weight:500;
  font-size:16px;
  color:#000;
  line-height:1.35;
  max-width:705px;
  margin:0 auto 28px;
  text-align:center;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

.landing-copy--narrow{
  font-family:"Montserrat", sans-serif;
  font-weight:400;
  font-size:16px;
  color:#09082A;
  line-height:1.35;
  max-width:518px;
  margin:0;
  text-align:left;

  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

/* CTA (default) */
.landing-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:"Montserrat", sans-serif;
  font-weight:400;
  font-size:20px;
  color:#fff;
  width:167px;
  height:56px;
  padding:0 22px;
  background:#DB565B;
  text-decoration:none;
  border-radius:4px;
  margin-top:18px;

  white-space:nowrap;
}

/* =========================
   HERO TIMELINE
   ========================= */
.landing-hero{
  max-height:800px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.landing-hero__grid{
  display:grid;
  grid-template-columns: 0.8fr 0.9fr;
  gap:48px;
  align-items:center;
  min-height: 600px;
  max-height: 800px;
}

.landing-hero__kicker{
  font-family:"Blackside", sans-serif;
  font-weight:400;
  font-size:36px;
  color:#09082A;
  letter-spacing:0.02em;
  margin:0 0 10px;
}

.landing-hero__bigrow{
  display:flex;
  align-items:flex-end;
  gap:14px;
  line-height:1;
  margin:0 0 10px;
}

.landing-hero__bigimage img{
  width:100%;
  height:auto;
}

.landing-hero__bigsuffix{
  font-family:"Posey Textured", serif;
  font-style:italic;
  font-weight:400;
  font-size:77px;
  color:#09082A;
  transform: translateY(-10px);
}

.landing-hero__subtitle{
  font-family:"Blackside Rust", sans-serif;
  font-weight:400;
  font-size:45px;
  color:#09082A;
  max-width:760px;
  margin:0;
}

.landing-hero__right{
  display:flex;
  justify-content:flex-end;
}

.landing-hero__timeline-img{
  width:100%;
  max-width:760px;
  height:auto;
  object-fit:contain;
}

/* Mid breakpoint */
@media (max-width:1100px){
  .landing-hero{ min-height:auto; padding:75px 0; }
  .landing-hero__grid{ grid-template-columns:1fr; gap:28px; min-height:auto; }
  .landing-hero__right{ justify-content:center; }
  .landing-hero__kicker{ font-size:clamp(18px, 2.2vw, 36px); text-align:center; }
  .landing-hero__subtitle{ font-size:clamp(26px, 4.8vw, 51px); text-align:center; margin-left:auto; margin-right:auto; }
  .landing-hero__bigrow{ justify-content:center; }
  .landing-hero__bigimage img{ width:min(65%, 520px); margin:0 auto; }
  .landing-hero__bigsuffix{ font-size:clamp(36px, 6vw, 77px); transform:none; }
}

/* =========================
   ICON STRIP + INTRO
   (con transparencias edge-fade reales)
   ========================= */
.landing-intro{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:20px 0;
  height: 600px;
}

/* Wrapper de icons: full width “usable” */
.landing-icons{
  width:100%;
  max-width:1461px;
  margin:0 auto 10vh;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;

  flex-wrap:nowrap;
}

/* Item */
.landing-icons__item{
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}

.landing-icons__item img{
  object-fit:cover;
  width: 150px;
  height: auto;
}

/* FADING 
.landing-icons > *,
.landing-icons__item{
  filter:grayscale(100%);
  opacity:1;
  transition: opacity .2s ease, filter .2s ease;
}*/

/* “Activo” */
.landing-icons > *.is-active,
.landing-icons__item.is-active{
  filter:none !important;
}

/* Edge fade: 1 2 3 … 3 2 1 (funciona aunque cambie el wrapper) 
.landing-icons > :nth-child(1),
.landing-icons__item:nth-child(1){ opacity:.25; }
.landing-icons > :nth-child(2),
.landing-icons__item:nth-child(2){ opacity:.50; }
.landing-icons > :nth-child(3),
.landing-icons__item:nth-child(3){ opacity:.75; }

.landing-icons > :nth-last-child(3),
.landing-icons__item:nth-last-child(3){ opacity:.75; }
.landing-icons > :nth-last-child(2),
.landing-icons__item:nth-last-child(2){ opacity:.50; }
.landing-icons > :nth-last-child(1),
.landing-icons__item:nth-last-child(1){ opacity:.25; }*/

/* Asegura herencia de filtros al <img>
.landing-icons__item img{ filter:inherit; opacity:inherit; }*/

/* =========================
   QUOTE SPLIT
   ========================= */
.landing-quote{
  background:#fff;
  max-height:850px;
}

.landing-quote__grid{
  display:grid;
  grid-template-columns: 50vw 1fr;
  max-height:850px;
  background-image: url("https://dev-savethe-inventor.pantheonsite.io/wp-content/uploads/Frame-14.jpg")!important;
  background: no-repeat;
  background-size: cover;
}

.landing-quote__left{
  background-size:cover;
  background-repeat:no-repeat;
  width: 50vw;
}

.landing-quote__right{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 10vw 0;
}

.landing-quote__right > *{
  width:min(518px, 100%);
  color: #fff;
  hyphens: manual;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
}

.landing-quote__source{
  font-family:"Montserrat", sans-serif;
  font-weight:400;
  font-size:24px;
  color:#fff;
  margin:0 0 18px;
}

.landing-quote__text{
  font-family:"Baskerville", serif;
  font-weight:400;
  font-size:48px;
  color:#fff;
  line-height:1.15;
  margin:0 0 18px;
}

@media (min-width: 768px) and (max-width: 1100px){
  .landing-quote{ min-height:auto; }
  .landing-quote__grid{ grid-template-columns:1fr; min-height:auto; }
  .landing-quote__right{ padding:50px 16px; }
  .landing-quote__text{ font-size:clamp(28px, 4.6vw, 48px);
  .landing-final__headline{font-size: 40px!important;} 
  .landing-importance__left .landing-copy--narrow{max-width: 100vw!important; text-align: center!important;}
  .landing-importance__left{padding: 24px 10vw;}
  .landing-importance__left .landing-stars{justify-content: center!important;}}
}

/* =========================
   IMPORTANCE MEDIA
   ========================= */
.landing-importance{
  background:#F7F3EA;
  /* padding: 2vh 0 2vh; */
}

/* IMPORTANCE full-bleed imagen: usar .landing-bleed en vez de padding del container */
.landing-importance__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap:70px;
  align-items:stretch;
}

.landing-importance__left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left: 10vw;
  padding-right:16px;
}

.landing-importance__left .landing-stars{
  justify-content:flex-start;
  margin:0 0 18px;
}

.landing-importance__left .landing-copy--narrow{
  max-width:420px;
  margin:0 0 14px;
  font-weight: 500;
  hyphens: manual;
  -ms-hyphens: auto; 
  -webkit-hyphens: auto;
}

.landing-importance__right{
  display:flex;
  align-items:stretch;
}

.landing-importance__img{
  width:100%;
  height:auto;
  max-height:600px;
  object-fit:cover;
}

/* Botón “badge” */
.landing-importance .landing-btn{
  width:143px;
  height:56px;
  font-size:20px;
  line-height:22px;
  padding:0 10px;
  margin-top:12px;
}

/* Stack en tablet/mid */
@media (max-width:1200px){
  .landing-importance__grid{
    grid-template-columns:1fr;
    gap:22px;
  }
  .landing-importance__left{
    padding:24px 16px;
    order:2;
  }
  .landing-importance__right{ order:1; }
  .landing-importance__img{ max-height:320px; }
  .landing-importance__left .landing-copy--narrow{ margin: 0; text-align:left; }
}

/* =========================
   FINAL BANNER (pre-footer)
   ========================= */
.landing-final{
  min-height:850px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
}

.landing-final__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle, #09082a00 0%, #09082A 100%);
}

.landing-final__inner{
  text-align:center;
  padding:80px 16px;
}

.landing-final__logo{
  width:410px;
  max-width:70vw;
  height:auto;
  margin:0 auto 56px;
}

.landing-final__headline{
  font-family:"Blackside Rust", sans-serif;
  font-weight:400;
  font-size:40px;
  color:#fff;
  line-height:1;
  margin:0 auto;
  max-width: 100vw;
}

/* =========================
   MOBILE (single block, no duplicates)
   ========================= */
@media only screen and (max-width: 575px){
  .landing-container{ padding:0 16px; margin: 0;}

  .landing-h2{ font-size:24px; line-height:1.15; }
  .landing-copy{ font-size:12px; line-height:1.5; max-width:306px; }

  /* Intro: centrar el bloque completo */
  .landing-intro{
    padding:35px 0;
    text-align:center;
    align-items:center;
    height: 480px;
  }

  /* ICONS: centradas y ocupando el ancho. Si no entran, scroll suave */
  .landing-icons{
    width:100vw;
    margin:0 auto 18px;
    padding:0 16px 6px;
    justify-content:center;
    gap:12px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    z-index: 9999;
  }

  .landing-icons > *{ scroll-snap-align:center; }

  .landing-icons__item{
    width:56px;
    height:56px;
    flex:0 0 auto;
    border-radius:50%;
    overflow:hidden;
  }

  /* En mobile NO fades*/
  .landing-icons > *,
  .landing-icons__item{
    opacity:1 !important;
    filter:grayscale(0) !important;
  }
  .landing-importance{
    padding: 0;
  }

  /* Quote: layout compacto */
  .landing-quote__grid{
    grid-template-columns: 170px 1fr;
    column-gap:16px;
    min-height:auto;
    padding:0;
  }

  .landing-quote__right{
    padding: 10vw 5vw 10vw 5vw;
    align-items:flex-start;
    background: #284579!important;
  }

  .landing-quote__left{
    background-position: center;
    background-image: url("https://dev-savethe-inventor.pantheonsite.io/wp-content/uploads/Frame-14-2.png");
  }

  .landing-quote__source{ font-size:10px; margin:0 0 6px; color:#fff;}
  .landing-quote__text{ font-size:19px; line-height:1.25; margin:10px 0; color:#fff;}
  .landing-copy--narrow{ font-size:10px; line-height:1.45; color:#fff;}
  .landing-importance__left .landing-copy--narrow{color:#09082A;}

  /* Final: que no colapse */
  .landing-final{ min-height:350px; }
  .landing-final__logo{ width:180px; margin:0 auto 25px; }
  .landing-final__headline{ font-size:16px; line-height:1.1;}

  /* Botón “badge” */
  .landing-importance .landing-btn{
    width:143px;
    height:52px;
    font-size:16px;
    line-height:16px;
    padding:20px 25px;
    margin-top: 3vh;
    text-align: left;
  }
  .landing-importance__left{
    padding: 5vw 8vw 10vw;
  }
  .landing-importance__left .landing-copy--narrow{
    font-size: 13px;
    text-align: left;
  }
  .landing-hero__right{
    padding: 0 0 75px 0;
  }
  .landing-hero{
    padding: 75px 0 0 0;
  }
}

/* Proporciones más pequeñas, adaptable */
@media (max-width: 1280px) and (min-width: 1101px) {
  /* Final */ 
  .landing-final__logo{
      margin: 0px auto 5vw;
   }
   .landing-final__inner{
      padding: 0 15vw;
   }
   .landing-final__headline{
      font-size: 30px;
   }
   .landing-final{
      max-height: 720px;
   }

   .landing-importance__left .landing-copy--narrow{
      font-size: 16px;
   }
   .landing-hero__subtitle{
      font-size: 45px;
   }
}

/* Intento de quitar background video en Iphone */
.landing-hero__timeline{
  background: transparent !important;
  display: block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.landing-hero__right{
  background: transparent !important;
}

.landing-hero__timeline{
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* =========================
   NEWSLETTER (Knowledgis)
   ========================= */
.landing-newsletter{
  width:100%;
}

.landing-newsletter__grid{
  display:grid;
  grid-template-columns: 1fr 0.8fr;
  column-gap: 70px;
  align-items: stretch;
}

.landing-newsletter__left{
  background:#f6f2e8;
  padding-left: 10vw;
  padding-right: 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.landing-newsletter__right{
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  min-height: 520px;
}

.landing-newsletter__left .landing-stars {
  justify-content: flex-start;
  margin: 0 0 18px;
}

.landing-newsletter__title{
  text-transform: uppercase;
  font-family: "Blackside", sans-serif;
  font-weight: 400;
  font-size: 36px;
  color: #211F5D;
  margin: 0 0 14px;
}

.landing-newsletter__text{
  max-width: 420px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #09082A;
  line-height: 1.35;
  max-width: 518px;
  margin: 0;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.landing-newsletter__privacy{
  max-width: 420px;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #09082A;
  line-height: 1.35;
  max-width: 518px;
  margin: 0;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.landing-newsletter__formwrap{
  max-width: 420px;
}

.landing-newsletter__form{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.landing-newsletter__label span{
  display:block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}

.landing-newsletter__label input{
  width:100%;
  border:0;
  border-bottom: 2px solid rgba(0,0,0,.35);
  background: transparent;
  padding: 10px 0;
  outline:none;
}

.landing-newsletter__btn{
  margin-top: 8px;
  align-self:flex-start;
  border:0;
  padding: 10px 18px;
  font-weight: 700;
  cursor:pointer;
}

.landing-newsletter__img{
  width:100vw;
  height:100vw;
  max-height:700px;
  object-fit:cover;
}

/* Mobile */
@media (max-width: 900px){
  .landing-newsletter__grid{
    grid-template-columns: 1fr;
  }
  .landing-newsletter__right{
    min-height: 320px;
    order: -1;
  }
  .landing-newsletter__left{
    padding: 5vw 8vw;
  }
}

@media (max-width: 1200px) {
    .landing-newsletter__img {
        max-height: 355px;
        object-fit: cover;
    }
}

/* =========================================================
   EveryAction form: match STI landing style
   Scope: only inside newsletter section
   ========================================================= */

.landing-newsletter .ngp-form {
  /* Evitar márgenes raros */
  margin-top: 5px;
}

/* 1) Sacar el "card" blanco */
.landing-newsletter .ngp-form form,
.landing-newsletter .ngp-form .at-form,
.landing-newsletter .ngp-form .at-inner,
.landing-newsletter .ngp-form .at {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2) Ocultar títulos internos tipo */
.landing-newsletter .ngp-form h1,
.landing-newsletter .ngp-form h2,
.landing-newsletter .ngp-form h3,
.landing-newsletter .ngp-form legend,
.landing-newsletter .ngp-form .at-title,
.landing-newsletter .ngp-form .at-section-title {
  display: none !important;
}

/* 3) Labels en mayúscula */
.landing-newsletter .ngp-form label {
  display: block !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  margin: 0;
}

/* 4) Inputs con línea inferior */
.landing-newsletter .ngp-form input[type="text"],
.landing-newsletter .ngp-form input[type="email"],
.landing-newsletter .ngp-form input[type="tel"],
.landing-newsletter .ngp-form input[type="number"]{
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(10, 20, 60, .35) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Focus */
.landing-newsletter .ngp-form input:focus{
  border-bottom-color: rgba(10, 20, 60, .75) !important;
}

/* Placeholder suave */
.landing-newsletter .ngp-form input::placeholder{
  opacity: .45;
}

/* 6) Alinear botón a la izquierda y con espacio */
.landing-newsletter .ngp-form .at-submit,
.landing-newsletter .ngp-form .at-actions,
.landing-newsletter .ngp-form .actions {
  margin-top: 18px !important;
  display: flex !important;
  justify-content: flex-start !important;
}

/* 7) Espaciados generales */
.landing-newsletter .ngp-form .at-row,
.landing-newsletter .ngp-form .at-field,
.landing-newsletter .ngp-form .field {
  margin: 0 !important;
  padding: 0 !important;
}

/******* Botón Sing Up ********/

/* Contenedor de acciones */
.landing-newsletter .ngp-form .at-submit,
.landing-newsletter .ngp-form .at-actions,
.landing-newsletter .ngp-form .actions{
  display:flex !important;
  justify-content:flex-start !important;
  margin-top:18px !important;
}

/* Botón */
.landing-newsletter .ngp-form button,
.landing-newsletter .ngp-form button[type="submit"],
.landing-newsletter .ngp-form input[type="submit"],
.landing-newsletter .ngp-form .at-submit button{
  width:147px !important;
  height:61px !important;
  min-width:147px !important;
  min-height:61px !important;

  font-family: "Montserrat", Arial, sans-serif !important;
  font-size:24px !important;
  font-weight:700 !important;
  line-height:61px !important;

  background:#E85B63 !important;
  color:#fff !important;
  border:0 !important;
  border-radius:4px !important;

  padding:0 !important;
  margin:0 !important;
  cursor:pointer !important;
}

.landing-newsletter .at-form-submit{
  display: flex;
  margin: 0;
  padding: 10px 0;
}

/* ocultar opcional completo */
#NVSignupForm1481069-ContactInformation-PersonalUrl{
  display: none!important; 
}

.at fieldset:last-of-type{
  padding: 0;
}