/* =========================================================
   EMMA · Landing en INGLES  (/en/)
   Scopeada bajo .emma-en, que va JUNTO a .emma-home en el
   contenedor: la landing hereda todo el CSS de la Home y aqui
   solo vive lo que la Home no tiene.
     · .vcaps    notas en ingles bajo el video de EMMA inside
     · .getstarted / .gs-grid   "What it takes to run EMMA"
     · .faq-en   preguntas frecuentes
     · .contact-en   formulario de HubSpot al pie
   v7.49
   ========================================================= */

.emma-en{
  --morado:#4D4A9E;
  --deep:#3A3877;
  --violet:#AC92EC;
  --green:#8DC049;
  --slate:#516377;
  --surface:#F6F6FB;
  --line2:#E3E1F0;
}

/* --- pie propio de la landing ---------------------------
   La landing SI usa el encabezado del sitio: ahi vive el
   selector de idioma de Polylang, y el menu en ingles se
   resuelve creando un menu aparte y asignandolo a la
   ubicacion del header para el idioma "en".
   El PIE del sitio, en cambio, enlaza a paginas en espanol:
   se desactiva por pagina (metabox "Ajustes de Astra" >
   Desactivar elementos > Pie de pagina) y la landing pone
   el suyo, minimo y en ingles.
   -------------------------------------------------------- */

.emma-en .en-foot{
  background:var(--deep);
  color:rgba(255,255,255,.72);
  padding:52px 26px 30px;
}
.emma-en .en-foot-row{
  display:flex;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.emma-en .en-foot-row>*{margin-block-start:0}
.emma-en .en-foot-brand{max-width:38ch}
.emma-en .en-foot-name{
  font-family:'Inter',system-ui,sans-serif;
  font-weight:700;
  font-size:19px;
  letter-spacing:.02em;
  color:#fff;
  margin:0 0 8px;
}
.emma-en .en-foot-desc{font-size:15px;line-height:1.6;margin:0}
.emma-en .en-foot-links{display:grid;gap:8px;align-content:start}
.emma-en .en-foot-links>*{margin-block-start:0}
.emma-en .en-foot-links p{margin:0;font-size:15px}
.emma-en .en-foot a{color:#C9BEF0;text-decoration:none}
.emma-en .en-foot a:hover{color:#fff;text-decoration:underline}
.emma-en .en-foot-legal{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);
  font-size:13.5px;
}
.emma-en .en-foot-legal p{margin:0}

/* En ingles el titular es mas corto: se evita que quede suelto. */
.emma-en .hero-copy h1{max-width:14ch}

/* El titulo del grafico y su leyenda son mas largos en ingles que en
   espanol y se pisaban en una sola linea: se deja que bajen. */
.emma-en .prod .chart-h{flex-wrap:wrap;row-gap:7px}
.emma-en .prod .chart-h .t{flex:1 1 100%}

/* --- notas bajo el video (seccion .nova, fondo morado) --- */
.emma-en .vcaps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:38px;
}
.emma-en .vcaps>*{margin-block-start:0}
.emma-en .vcap{
  border-top:2px solid rgba(201,190,240,.35);
  padding-top:16px;
}
.emma-en .vcap .vnum{
  display:block;
  font-family:'Rubik','Inter',sans-serif;
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.14em;
  color:#C9BEF0;
  margin-bottom:8px;
}
.emma-en .vcap h3{
  font-size:18px;
  font-weight:600;
  color:#fff;
  margin:0 0 6px;
  letter-spacing:-.01em;
}
.emma-en .vcap p{
  font-size:15px;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  margin:0;
}

/* --- What it takes to run EMMA --- */
.emma-en .getstarted{padding:78px 26px}
.emma-en .gs-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px 40px;
  margin-top:40px;
}
.emma-en .gs-grid>*{margin-block-start:0}
.emma-en .gs-item{
  border-left:2px solid var(--green);
  padding-left:20px;
}
.emma-en .gs-item h3{
  font-size:19px;
  font-weight:600;
  color:var(--morado);
  margin:0 0 8px;
  letter-spacing:-.01em;
}
.emma-en .gs-item p{
  font-size:15.5px;
  line-height:1.65;
  color:var(--slate);
  margin:0;
}

/* --- FAQ --- */
.emma-en .faq-en{padding:78px 26px}
.emma-en .faq-list{
  max-width:760px;
  margin:40px auto 0;
  display:grid;
  gap:1px;
  background:var(--line2);
  border:1px solid var(--line2);
  border-radius:14px;
  overflow:hidden;
}
.emma-en .faq-list>*{margin-block-start:0}
.emma-en .faq-item{
  background:#fff;
  padding:22px 26px;
}
.emma-en .faq-item h3{
  font-size:17.5px;
  font-weight:600;
  color:var(--morado);
  margin:0 0 8px;
  letter-spacing:-.01em;
}
.emma-en .faq-item p{
  font-size:15.5px;
  line-height:1.65;
  color:var(--slate);
  margin:0;
}

/* --- formulario al pie (dentro de .final, fondo morado) --- */
.emma-en .contact-en .fcard-en{
  background:#fff;
  border-radius:18px;
  padding:30px 32px;
  max-width:620px;
  margin:32px auto 0;
  box-shadow:0 24px 60px rgba(0,0,0,.22);
  text-align:left;
}
.emma-en .contact-en .hs-slot{min-height:56px}
.emma-en .contact-en .hs-slot iframe{width:100% !important;max-width:100% !important;border:0}
/* La nota de montaje solo se ve dentro del editor (emma-editor.css).
   Se le da color propio porque la seccion .final pinta el texto en
   blanco: sin esto, dentro del editor la nota queda ilegible. */
.emma-en .contact-en .hs-slot__hint{
  display:none;
  background:#FDF2E4;
  border:1px dashed var(--emma-cta,#FD830D);
  border-radius:10px;
  padding:14px 16px;
  font-size:13px;
  line-height:1.6;
  color:#7A4A08;
}
.emma-en .contact-en .fnote{
  display:flex;
  gap:9px;
  align-items:flex-start;
  margin-top:16px;
  font-size:13px;
  line-height:1.55;
  color:var(--slate);
}
.emma-en .contact-en .fnote svg{
  width:15px;height:15px;flex:0 0 15px;margin-top:2px;
  fill:none;stroke:var(--slate);stroke-width:1.8;
}
.emma-en .contact-en .fnote a{color:var(--morado);text-decoration:underline}

/* --- responsive --- */
@media (max-width:900px){
  .emma-en .en-foot{padding:44px 20px 26px}
  .emma-en .en-foot-row{gap:26px}
  .emma-en .vcaps{grid-template-columns:1fr;gap:22px;margin-top:30px}
  .emma-en .gs-grid{grid-template-columns:1fr;gap:26px}
  .emma-en .getstarted,
  .emma-en .faq-en{padding:58px 20px}
  .emma-en .contact-en .fcard-en{padding:24px 20px;border-radius:14px}
  .emma-en .hero-copy h1{max-width:none}
}