/* =========================================================
   TMT · TU MEJOR TÚ
   Archivo: styles.css
   Descripción:
   Hoja de estilos principal para Home Page TMT.

   Índice:
   01. Variables de marca
   02. Reset / Base general
   03. Contenedores y utilidades
   04. Header / Navegación
   05. Textos generales
   06. Botones
   07. Hero
   08. Sección Sobre Álvaro
   09. Lead Magnet
   10. Manifiesto
   11. Opciones de entrada
   12. Ecosistema / Productos
   13. CTA final
   14. CTA flotante
   15. Footer
   16. Animaciones
   17. Responsive tablet
   18. Responsive mobile
========================================================= */


/* =========================================================
   01. VARIABLES DE MARCA
========================================================= */

:root{
  --bg:#1C1C1E;
  --bg-2:#101012;
  --white:#FFFFFF;
  --muted:#A1A1A6;

  --green:#70a942;
  --green-dark:#39823d;
  --green-soft:rgba(112,169,66,.16);

  --border:rgba(255,255,255,.12);
  --shadow:0 24px 80px rgba(0,0,0,.38);

  --radius:28px;
  --container:1120px;
}


/* =========================================================
   02. RESET / BASE GENERAL
========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}

body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  background:var(--bg);
  color:var(--white);
  line-height:1.6;
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

p{
  margin-top:0;
}


/* =========================================================
   03. CONTENEDORES Y UTILIDADES
========================================================= */

.container{
  width:min(var(--container),calc(100% - 32px));
  margin-inline:auto;
}

.section-dark{
  background:
    radial-gradient(circle at top left,rgba(112,169,66,.16),transparent 36%),
    var(--bg-2);
}

.section-dark-soft{
  background:linear-gradient(180deg,#151516,#1C1C1E);
}


/* =========================================================
   04. HEADER / NAVEGACIÓN
========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(16,16,18,.78);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}

.nav{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}

.brand-logo{
  width:auto;
  height:52px;
  object-fit:contain;
  display:block;
}

.brand-copy{
  font-weight:800;
  color:#fff;
  line-height:1;
}

/* =========================================================
   LOGO CELULAR
========================================================= */

.brand-logo{
  height:44px;
}

.brand-copy{
  display:none;
}


.nav-menu{
  display:flex;
  align-items:center;
  gap:24px;
  color:var(--muted);
  font-weight:800;
}

.nav-menu a{
  transition:.2s ease;
}

.nav-menu a:hover,
.nav-menu a.active{
  color:var(--green);
}

.nav-highlight{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(112,169,66,.14);
  color:#d7ff91!important;
  border:1px solid rgba(112,169,66,.28);
}

.nav-toggle{
  display:none;
  background:transparent;
  color:white;
  border:0;
  font-size:30px;
}


/* =========================================================
   05. TEXTOS GENERALES
========================================================= */

.eyebrow{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--green);
  font-size:.78rem;
}

.eyebrow.dark{
  color:var(--green-dark);
}

h1,
h2,
h3{
  margin:0;
  line-height:1.05;
}

h1{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(2.35rem,6vw,5.45rem);
  letter-spacing:-.055em;
}

h2{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(2rem,4vw,3.7rem);
  letter-spacing:-.04em;
}

h3{
  font-size:1.35rem;
}

h1 span,
.gradient-text{
  background:linear-gradient(90deg,var(--green),#d7ff91,var(--green-dark));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.section-heading{
  text-align:center;
  max-width:840px;
  margin:0 auto 42px;
}

.section-heading p{
  font-size:1.08rem;
  color:var(--muted);
}


/* =========================================================
   06. BOTONES
========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:15px 23px;
  font-weight:900;
  transition:.2s ease;
  border:1px solid transparent;
  text-align:center;
}

.btn-primary{
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:white;
  box-shadow:0 14px 40px rgba(112,169,66,.28);
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 52px rgba(112,169,66,.38);
}

.btn-secondary{
  border-color:var(--border);
  color:#fff;
  background:rgba(255,255,255,.06);
}

.btn-secondary.light{
  border-color:rgba(28,28,30,.16);
  color:var(--bg);
  background:#f5f6f4;
}

.btn-full{
  width:100%;
  margin-top:16px;
}

.center-actions{
  justify-content:center;
}


/* =========================================================
   07. HERO
========================================================= */

.hero{
  position:relative;
  padding:86px 0 78px;
  overflow:hidden;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:46px;
  align-items:center;
}

.hero-content{
  position:relative;
}

.hero-subtitle{
  font-size:clamp(1.05rem,2vw,1.34rem);
  color:#d7d7dc;
  max-width:720px;
  margin:24px 0 28px;
}

.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.hero-note{
  margin:18px 0 0;
  color:var(--muted);
  font-weight:800;
}

.trust-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
}

.trust-row span{
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:var(--muted);
  font-size:.9rem;
}


/* =================== HERO / IMAGEN =================== */

.hero-image{
  margin:0;
  position:relative;
}

.hero-image img{
  border-radius:34px;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  background:#101012;
}

.hero-image figcaption{
  margin-top:14px;
  text-align:center;
  color:var(--muted);
  font-weight:800;
}


/* =================== HERO / GLOWS DECORATIVOS =================== */

.glow{
  position:absolute;
  border-radius:999px;
  filter:blur(90px);
  opacity:.6;
}

.glow-1{
  width:360px;
  height:360px;
  background:var(--green-dark);
  top:20%;
  left:-110px;
}

.glow-2{
  width:300px;
  height:300px;
  background:var(--green);
  bottom:-120px;
  right:10%;
}


/* =================== HERO / SEPARADOR PREMIUM =================== */

.hero-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  margin:34px 0;
  font-size:1.08rem;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--muted);
}

.hero-divider::before,
.hero-divider::after{
  content:"";
  flex:1;
  height:2px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(28,28,30,0) 8%,
    rgba(57,130,61,.35) 28%,
    rgba(57,130,61,.85) 50%,
    rgba(57,130,61,.35) 72%,
    rgba(28,28,30,0) 100%
  );
}

.hero-divider span{
  white-space:nowrap;
  padding:0 6px;
  font-size:1.12rem;
  font-weight:900;
  background:linear-gradient(
    180deg,
    #ffffff 0%,
    #d7ff91 55%,
    var(--green-dark) 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 12px rgba(112,169,66,.18);
}


/* =================== HERO / NOTA DE CONFIANZA =================== */

.hero-trust-note{
  margin:14px 0 0;
  padding:0;
  font-size:.92rem;
  font-weight:700;
  line-height:1.2;
  color:var(--muted);
  white-space:nowrap;
}

.hero-trust-note span{
  margin:0 8px;
  color:var(--green);
  font-weight:900;
  opacity:.7;
}


/* =========================================================
   08. SECCIÓN SOBRE ÁLVARO
========================================================= */

.about,
.ecosystem{
  padding:88px 0;
  background:var(--white);
  color:var(--bg);
}

.about p,
.ecosystem p{
  color:#4f4f55;
}


/* =================== SOBRE / GRID PRINCIPAL =================== */

.about-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:56px;
  align-items:start;
}


/* =================== SOBRE / CARD OSCURA IMAGEN + AUTORIDAD =================== */

.author-media-card{
  padding:18px;
  border-radius:34px;
  background:linear-gradient(180deg,#101012,#1C1C1E);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}


/* =================== SOBRE / STICKY SOLO DESKTOP =================== */

@media (min-width:981px){
  .author-media-card{
    position:sticky;
    top:110px;
    align-self:start;
  }
}


/* =================== SOBRE / IMAGEN =================== */

.about-image{
  position:static;
  width:100%;
  margin:0;
}

.about-image img{
  width:100%;
  border-radius:26px;
  border:1px solid var(--border);
  background:#101012;
  object-fit:cover;
}


/* =================== SOBRE / FIRMA DEL AUTOR =================== */

.about-image figcaption{
  margin-top:14px;
  text-align:center;
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.02em;
  background:linear-gradient(
    90deg,
    var(--green-dark),
    #d7ff91,
    var(--green)
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}


/* =================== SOBRE / AUTORIDAD =================== */

.author-credentials{
  margin-top:20px;
  padding:22px;
  border-radius:24px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
}


/* =================== SOBRE / PERFIL PROFESIONAL =================== */

.author-summary{
  margin:0 0 14px;
  color:#ffffff!important;
  font-weight:800;
  line-height:1.45;
}

.author-summary:last-of-type{
  margin-bottom:0;
}


/* =================== SOBRE / LOGROS SECUNDARIOS =================== */

.author-achievements{
  list-style:none;
  margin:24px 0 0;
  padding:0;
  display:grid;
  gap:14px;
}

.author-achievements li{
  position:relative;
  padding-left:26px;
  color:#ffffff;
  line-height:1.45;
  font-size:.95rem;
  font-weight:400;
  opacity:.92;
}

.author-achievements li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#d7ff91;
  font-size:.9rem;
  font-weight:700;
  opacity:.85;
}


/* =================== SOBRE / HISTORIA DEL AUTOR =================== */

.about-copy{
  display:grid;
  gap:16px;
}

.story-card{
  padding:24px;
  border:1px solid rgba(28,28,30,.12);
  border-radius:22px;
  background:#f5f6f4;
  text-align: justify;
}

.story-card span{
  font-family:'Archivo Black';
  font-size:2rem;
  color:var(--green-dark);
}

.story-card h3{
  margin:8px 0 12px;
}

.story-card p:last-child{
  margin-bottom:0;
}


/* =================== SOBRE / CTA FINAL =================== */

.about-cta{
  text-align:center;
  margin-top:40px;
  padding:34px;
  border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(112,169,66,.14),#f5f6f4);
  border:1px solid #e5e7e1;
}

.about-cta h3{
  margin-bottom:18px;
  font-family:'Archivo Black',sans-serif;
}


/* =========================================================
   09. LEAD MAGNET
========================================================= */

.lead-magnet,
.entry-options,
.final-cta{
  padding:88px 0;
}

.lead-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:30px;
  align-items:start;
}

.resources-grid{
  display:grid;
  gap:18px;
}

.resource-card,
.brevo-card,
.option-card,
.product-card,
.final-card{
  padding:28px;
  border-radius:24px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  box-shadow:0 18px 50px rgba(0,0,0,.16);
}

/* =================== 🡇 RECURSOS / ICONO CÁPSULA =================== */

/* =========================================================
   RECURSOS / ICONO CÁPSULA
   Contenedor premium con borde verde sutil
========================================================= */

.resource-icon{

  width:72px;
  height:72px;

  margin:0 0 18px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;

  border-radius:22px;

  border:1px solid rgba(112,169,66,.35);

  background:rgba(112,169,66,.04);

  box-shadow:
    inset 0 0 0 1px rgba(112,169,66,.08);

  transition:all .35s ease;
}



/* =================== IMAGEN CÁPSULA =================== */

.resource-icon img{

  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
  object-position:center;

  border-radius:inherit;

  transition:transform .35s ease;

}



/* =================== HOVER =================== */

.resource-card:hover .resource-icon{

  border-color:rgba(112,169,66,.55);

  background:rgba(112,169,66,.08);

  box-shadow:
    0 8px 24px rgba(112,169,66,.10),
    inset 0 0 0 1px rgba(112,169,66,.12);

}


.resource-card:hover .resource-icon img{

  transform:scale(1.08);

}

/* ===================  🡅 FIN RECURSOS / ICONO CÁPSULA =================== */

.resource-card p,
.brevo-card p,
.option-card p,
.product-card p,
.final-card p{
  color:var(--muted);
}

.brevo-card{
  background:#1C1C1E;
  position:sticky;
  top:110px;
}

.tag,
.option-label{
  display:inline-block;
  background:var(--green-soft);
  color:#d7ff91;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  margin-bottom:16px;
}

.lead-form{
  display:grid;
  gap:12px;
  margin-top:20px;
}

.lead-form label{
  font-weight:900;
  color:#fff;
}

.lead-form input{
  width:100%;
  padding:15px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.08);
  color:#fff;
  font:inherit;
}

.lead-form input::placeholder{
  color:#9c9ca2;
}

.brevo-card small{
  display:block;
  color:var(--muted);
  text-align:center;
  margin-top:14px;
}


/* =========================================================
   10. MANIFIESTO
========================================================= */

.manifesto{
  padding:88px 0;
  background:var(--bg);
}

.manifesto-card{
  padding:46px;
  border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(112,169,66,.16),rgba(255,255,255,.05));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.manifesto-card h2{
  max-width:900px;
  margin-bottom:24px;
}

.manifesto-card p{
  font-size:1.15rem;
  color:#dfdfe4;
  max-width:950px;
}

.manifesto-card strong{
  color:#d7ff91;
}


/* =========================================================
   11. OPCIONES DE ENTRADA
========================================================= */

.options-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.option-card ul{
  padding-left:0;
  list-style:none;
  display:grid;
  gap:10px;
  color:#e4e4e8;
  margin:20px 0;
}

.option-featured{
  background:linear-gradient(135deg,rgba(112,169,66,.16),rgba(255,255,255,.06));
  border-color:rgba(112,169,66,.35);
}


/* =========================================================
   12. ECOSISTEMA / PRODUCTOS
========================================================= */

.products-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.product-card{
  position:relative;
  background:#1C1C1E;
  color:white;
  display:flex;
  flex-direction:column;
  min-height:100%;
}


.product-card h3{
  margin-bottom:18px;
}

.product-badge{
  position:absolute;
  top:12px;
  left:12px;
  background:var(--green);
  color:white;
  padding:6px 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
  z-index:10;
}

/* =================== PRODUCTOS / COVER =================== */

.product-icon{
  width:100%;
  aspect-ratio:1/1;

  margin:16px 0 22px;

  border-radius:22px;
  overflow:hidden;

  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.product-icon img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
  object-position:center;

  transition:transform .45s ease;
}


/* Hover */
.product-card:hover .product-icon img{
  transform:scale(1.04);
}

.product-card:hover{
  transform:translateY(-4px);
  transition:.2s ease;
  border-color:rgba(112,169,66,.5);
}

.product-footer{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.product-price{
  font-family:'Archivo Black',sans-serif;
  font-size:2rem;
  margin:18px 0;
  text-align:center;
}

.price-1{
  color:var(--green);
}

.price-2{
  color:#d7ff91;
}

.product-card .btn{
  width:100%;
  position:relative;
  overflow:hidden;
  z-index:1;
  background:linear-gradient(135deg,var(--green),#a8ff60,var(--green-dark));
  color:#120101;
  border:none;
  font-weight:900;
  letter-spacing:0.02em;
  box-shadow:0 8px 24px rgba(112,169,66,.25);
}

.product-card .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(112,169,66,.42);
}

.featured-product{
  border-color:rgba(112,169,66,.42);
}


/* =========================================================
   13. CTA FINAL
========================================================= */

.final-card{
  text-align:center;
  max-width:900px;
  margin:auto;
  background:rgba(255,255,255,.06);
}

.final-card h2{
  margin-bottom:18px;
}


/* =========================================================
   14. CTA FLOTANTE
========================================================= */

.sticky-cta{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translate(-50%,120%);
  width:min(720px,calc(100% - 28px));
  z-index:60;
  background:rgba(16,16,18,.92);
  border:1px solid var(--border);
  backdrop-filter:blur(16px);
  border-radius:999px;
  padding:10px 12px 10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow:var(--shadow);
  transition:.25s;
}

.sticky-cta.visible{
  transform:translate(-50%,0);
}

.sticky-cta span{
  font-weight:900;
}

.sticky-cta a{
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  padding:12px 18px;
  border-radius:999px;
  font-weight:900;
}







/* =========================================================
   15. FOOTER  🡇
========================================================= */


/* =========================================================
   15. FOOTER
   Controla:
   1. Espacio para sticky CTA
   2. Grid de 3 columnas
   3. Jerarquía visual
   4. Links de contacto
   5. CTA destacado
   6. Iconos SVG
   7. Responsive
========================================================= */



/* =========================================================
   15.1 ESPACIO INFERIOR
   Evita que la sticky CTA tape el footer
========================================================= */

.footer{

  padding-bottom:115px;

}


@media (max-width:720px){

  .footer{

    padding-bottom:170px;

  }

}





/* =========================================================
   15.2 GRID PRINCIPAL
   3 columnas:
   Marca | Contacto | Acción
========================================================= */

.footer-grid{

  display:grid;

  grid-template-columns:1.2fr .8fr 1fr;

  gap:28px;

}


@media (max-width:720px){

  .footer-grid{

    grid-template-columns:1fr;

    gap:24px;

  }

}





/* =========================================================
   15.3 TITULOS DE COLUMNA
========================================================= */

.footer strong{

  display:block;

  margin-bottom:14px;

  color:#FFFFFF;

  font-weight:700;

}





/* =========================================================
   15.4 ITEMS DEL FOOTER
   Email / WhatsApp / Instagram / textos
========================================================= */

.footer p{

  margin:0 0 12px;

  color:var(--muted);

  line-height:1.5;

}





/* =========================================================
   15.5 LINKS DE CONTACTO
   Solo para Email / WhatsApp / Instagram
========================================================= */
/* =========================================================
   FOOTER / LINKS DE CONTACTO
========================================================= */

.footer .footer-contact-link,
.footer .footer-contact-link:visited{

  display:flex;

  align-items:center;

  gap:12px;

  color:var(--muted) !important;

  text-decoration:none;

  font-weight:400;

  transition:all .3s ease;

}


.footer .footer-contact-link:hover{

  color:#FFFFFF !important;

  opacity:.92;

}



/* =========================================================
   FOOTER / ICONOS SVG
========================================================= */

.footer-icon{

  width:22px;

  height:22px;

  flex-shrink:0;

  object-fit:contain;

  display:block;

  opacity:.95;

  transition:all .3s ease;

}


.footer-contact-link:hover .footer-icon{

  transform:scale(1.08);

}



/* =========================================================
   15.6 CTA / LINKS DE ACCIÓN
   Se mantiene verde para destacar
========================================================= */

.footer a:not(.footer-contact-link){

  color:#d7ff91;

  font-weight:900;

}





/* =========================================================
   15.7 ICONOS SVG
========================================================= */

.footer-icon{

  width:24px;

  height:24px;

  flex-shrink:0;

  display:block;

  opacity:.92;

  transition:all .3s ease;

}





/* =========================================================
   15.8 HOVER ICONOS
========================================================= */

.footer a:hover .footer-icon{

  transform:scale(1.08);

}


/* ========================🡅  FIN 15. FOOTER================================
=============================================================================*/











/* =========================================================
   16. ANIMACIONES AL HACER SCROLL
========================================================= */

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .65s ease,transform .65s ease;
}

.reveal.active{
  opacity:1;
  transform:none;
}


/* =========================================================
   17. RESPONSIVE TABLET
========================================================= */

@media (max-width:980px){

  .hero-grid,
  .about-grid,
  .lead-grid,
  .options-grid,
  .footer-grid{
    grid-template-columns:1fr;
  }

  .products-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .author-media-card{
    position:static;
  }

  .brevo-card{
    position:static;
  }

  .nav-toggle{
    display:block;
  }

  .nav-menu{
    position:absolute;
    top:76px;
    left:0;
    right:0;
    background:#101012;
    border-bottom:1px solid var(--border);
    padding:20px;
    display:none;
    flex-direction:column;
    align-items:flex-start;
  }

  .nav-menu.open{
    display:flex;
  }

  .hero-image{
    max-width:620px;
    margin:auto;
  }

  .about-image{
    width:100%;
    max-width:100%;
    margin:auto;
  }

}


/* =========================================================
   18. RESPONSIVE MOBILE
========================================================= */

@media (max-width:560px){

  .container{
    width:min(100% - 22px,var(--container));
  }

  .hero{
    padding:54px 0 52px;
  }

  .about,
  .lead-magnet,
  .manifesto,
  .entry-options,
  .ecosystem,
  .final-cta{
    padding:58px 0;
  }

  .products-grid{
    grid-template-columns:1fr;
  }

  .resource-card,
  .brevo-card,
  .option-card,
  .product-card,
  .final-card,
  .manifesto-card{
    padding:24px;
  }

  .author-credentials{
    padding:20px;
  }

  .hero-trust-note{
    white-space:normal;
    font-size:.86rem;
  }

  .sticky-cta{
    border-radius:22px;
    align-items:stretch;
    flex-direction:column;
    text-align:center;
  }

  .sticky-cta a{
    display:block;
  }

  .brand-copy{
    display:none;
  }

  .btn,
  .hero-actions .btn{
    width:100%;
  }

  .center-actions{
    width:100%;
  }

}

/* =========================================================
   BREVO / FORMULARIO TMT
========================================================= */

.sib-form{
  background:transparent !important;
  padding:0 !important;
}

#sib-form-container,
#sib-container{
  max-width:100% !important;
  width:100% !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
}

#sib-form{
  display:grid;
  gap:14px;
}

#sib-form .sib-form-block{
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
}

#sib-form .entry__label{
  display:block !important;
  margin-bottom:8px !important;
  color:#ffffff !important;
  font-family:Inter,system-ui,sans-serif !important;
  font-weight:900 !important;
  font-size:.95rem !important;
}

#sib-form .entry__field{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

#sib-form input.input,
#sib-form select.input{
  width:100% !important;
  padding:15px 16px !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.08) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  font-family:Inter,system-ui,sans-serif !important;
  font-size:16px !important;
  outline:none !important;
  box-shadow:none !important;
}

#sib-form input.input::placeholder{
  color:#9c9ca2 !important;
  -webkit-text-fill-color:#9c9ca2 !important;
}

#sib-form input.input:focus,
#sib-form select.input:focus{
  border-color:rgba(112,169,66,.75) !important;
  box-shadow:0 0 0 3px rgba(112,169,66,.14) !important;
}

#sib-form .entry__specification{
  display:none !important;
}

#sib-form .entry__error{
  display:none;
  margin-top:8px !important;
  padding:10px 12px !important;
  border-radius:12px !important;
  background:rgba(255,82,82,.10) !important;
  border:1px solid rgba(255,82,82,.22) !important;
  color:#ffd3d3 !important;
  font-size:.85rem !important;
}

#sib-form .entry__error:not(:empty),
#sib-form .entry__error.sib-visible{
  display:block !important;
}

#error-message,
#success-message{
  display:none !important;
  max-width:100% !important;
  margin:0 0 16px !important;
  padding:14px 16px !important;
  border-radius:14px !important;
  font-family:Inter,system-ui,sans-serif !important;
}

#error-message.sib-form-message-panel--active,
#success-message.sib-form-message-panel--active{
  display:block !important;
}

#error-message{
  background:rgba(255,82,82,.10) !important;
  border:1px solid rgba(255,82,82,.22) !important;
  color:#ffd3d3 !important;
}

#success-message{
  background:rgba(112,169,66,.13) !important;
  border:1px solid rgba(112,169,66,.32) !important;
  color:#e5f7d9 !important;
}

#sib-form .sib-form-block__button{
  width:100% !important;
  border:0 !important;
  border-radius:999px !important;
  padding:15px 23px !important;
  background:linear-gradient(135deg,var(--green),var(--green-dark)) !important;
  color:#ffffff !important;
  font-family:Inter,system-ui,sans-serif !important;
  font-weight:900 !important;
  cursor:pointer !important;
  box-shadow:0 14px 40px rgba(112,169,66,.28) !important;
}

#sib-form .sib-form-block__button:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 52px rgba(112,169,66,.38) !important;
}

.input--hidden{
  position:absolute !important;
  left:-9999px !important;
  visibility:hidden !important;
}


/* =================== OPCIONES / INTRO =================== */

.options-intro{
  text-align:center;
  margin-bottom:34px;
}

.options-intro h2{
  margin:0 0 10px;
}

.options-intro p{
  margin:0;
  opacity:.78;
}


.brevo-iframe-wrap{
  width:100%;
  margin-top:18px;
  border-radius:18px;
  overflow:hidden;
}

.brevo-iframe-wrap iframe{
  width:100%;
  height:650px;
  border:0;
  display:block;
}

@media (max-width:720px){

  .brevo-iframe-wrap iframe{
    height:700px;
  }

}


/* =========================================================
   CAPSULAS QUE ACOMPAÑAN EL SCROLL
========================================================= */

/* =========================================================
   LAS 2 CÁPSULAS ACOMPAÑAN EL SCROLL
   Solo desktop
========================================================= */

@media (min-width:981px){

  .lead-grid{
    align-items:start;
  }

  .resources-grid{
    position:sticky;
    top:130px;
    align-self:start;
    display:grid;
    gap:28px;
  }

}