/* =========================================================
   ESPIRAL - SOBRE NOSOTROS (FINAL ELECTRO / WPBAKERY)
   Layout con FLEX (más robusto que GRID en Electro)
   Encapsulado en .esp-about
   ========================================================= */

body{ overflow-x:hidden; }

/* Full width */
body .esp-about{
  --esp-accent:#ce1e76;
  --esp-accent2:#ff4aa6;
  --esp-green:#16a34a;
  --esp-green2:#22c55e;
  --esp-green-bg:#f1fbf5;

  --ink:#111827;
  --muted:#4b5563;
  --border:rgba(15,23,42,.12);
  --bg:#faf7fb;

  --shadow:0 10px 30px rgba(2,6,23,.10);
  --shadowSoft:0 6px 16px rgba(2,6,23,.08);

  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  overflow:hidden !important;

  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}

/* Wrapper */
body .esp-about .wrap{
  max-width:1160px !important;
  margin:0 auto !important;
  padding:0 18px !important;
}

/* Tipografía dentro del bloque */
body .esp-about h1,
body .esp-about h2,
body .esp-about h3{
  margin:0 !important;
  line-height:1.15 !important;
  letter-spacing:-.3px !important;
  color:var(--ink) !important;
}
body .esp-about p{ margin:0 !important; color:var(--muted) !important; }
body .esp-about a{ text-decoration:none !important; }

/* Secciones */
body .esp-about .sec{ padding:56px 0 !important; background:#fff !important; }
body .esp-about .sec.alt{
  background:var(--bg) !important;
  border-top:1px solid var(--border) !important;
  border-bottom:1px solid var(--border) !important;
}

/* Eyebrow */
body .esp-about .eyebrow{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  border:1px solid var(--border) !important;
  background:rgba(206,30,118,.06) !important;
  font-weight:800 !important;
  font-size:12px !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  color:var(--ink) !important;
}
body .esp-about .dot{
  width:8px !important;
  height:8px !important;
  border-radius:999px !important;
  background:var(--esp-accent) !important;
  box-shadow:0 0 0 6px rgba(206,30,118,.12) !important;
}

/* Botones */
body .esp-about .btns{ display:flex !important; gap:12px !important; flex-wrap:wrap !important; margin-top:18px !important; }
body .esp-about .btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px 16px !important;
  border-radius:14px !important;
  border:1px solid var(--border) !important;
  background:#fff !important;
  box-shadow:var(--shadowSoft) !important;
  font-weight:800 !important;
  font-size:14px !important;
  color:var(--ink) !important;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
body .esp-about .btn.primary{
  background:linear-gradient(135deg,var(--esp-accent),var(--esp-accent2)) !important;
  border-color:rgba(206,30,118,.35) !important;
  color:#fff !important;
  box-shadow:0 14px 34px rgba(206,30,118,.22) !important;
}
body .esp-about .btn.ecoBtn{
  background:linear-gradient(135deg,var(--esp-green),var(--esp-green2)) !important;
  border-color:rgba(22,163,74,.25) !important;
  color:#fff !important;
  box-shadow:0 14px 34px rgba(22,163,74,.18) !important;
}
body .esp-about .btn:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(206,30,118,.35) !important;
  box-shadow:0 12px 30px rgba(2,6,23,.12) !important;
}

/* HERO */
body .esp-about .hero{
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(206,30,118,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(206,30,118,.14), transparent 55%),
    linear-gradient(180deg,#fff,var(--bg)) !important;
  border-bottom:1px solid var(--border) !important;
  padding:56px 0 36px !important;
}
body .esp-about .hero h1{ font-size:clamp(30px,4.2vw,48px) !important; margin-top:14px !important; }
body .esp-about .lead{ margin-top:10px !important; font-size:16px !important; line-height:1.75 !important; max-width:62ch !important; }
body .esp-about .note{
  margin-top:14px !important;
  display:inline-flex !important;
  gap:10px !important;
  align-items:center !important;
  padding:10px 12px !important;
  border-radius:16px !important;
  background:rgba(206,30,118,.05) !important;
  border:1px solid rgba(206,30,118,.10) !important;
  color:var(--muted) !important;
  font-size:13px !important;
}

/* LAYOUT FLEX (reemplaza grid) */
body .esp-about .two{
  display:flex !important;
  gap:18px !important;
  align-items:stretch !important;
  flex-wrap:wrap !important;
}
body .esp-about .col{
  flex:1 1 520px !important; /* dos columnas en desktop, una en mobile */
  min-width:280px !important;
}

/* Stats */
body .esp-about .statsWrap{ background:var(--bg) !important; padding:26px 0 56px !important; }
body .esp-about .stats{
  display:flex !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  margin-top:16px !important;
}
body .esp-about .stat{
  flex:1 1 240px !important;
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:18px !important;
  box-shadow:var(--shadowSoft) !important;
  padding:16px !important;
  min-height:92px !important;
}
body .esp-about .stat .k{ font-size:22px !important; font-weight:900 !important; color:var(--ink) !important; }
body .esp-about .stat .k span{ color:var(--esp-accent) !important; }
body .esp-about .stat .l{ margin-top:6px !important; font-size:13px !important; color:var(--muted) !important; }

/* Cards / list */
body .esp-about .card{
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:26px !important;
  box-shadow:var(--shadowSoft) !important;
  padding:22px !important;
}
body .esp-about .card p{ margin-top:10px !important; font-size:14px !important; line-height:1.75 !important; }
body .esp-about .list{ margin-top:14px !important; display:flex !important; flex-direction:column !important; gap:10px !important; }
body .esp-about .li{
  display:flex !important;
  gap:10px !important;
  padding:10px 12px !important;
  border-radius:14px !important;
  background:rgba(206,30,118,.05) !important;
  border:1px solid rgba(206,30,118,.10) !important;
}
body .esp-about .check{
  width:22px !important; height:22px !important;
  border-radius:999px !important;
  background:var(--esp-accent) !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:900 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 22px !important;
  margin-top:1px !important;
}
body .esp-about .li strong{ display:block !important; color:var(--ink) !important; font-size:14px !important; margin-bottom:2px !important; }
body .esp-about .li span{ display:block !important; color:var(--muted) !important; font-size:13px !important; line-height:1.6 !important; }

/* Media (background images) */
body .esp-about .media{
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:28px !important;
  overflow:hidden !important;
  box-shadow:var(--shadow) !important;
}
body .esp-about .mediaBox{
  height:360px !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
body .esp-about .mediaHero .mediaBox{ height:520px !important; }
body .esp-about .meta{
  padding:14px 16px !important;
  border-top:1px solid rgba(15,23,42,.08) !important;
}
body .esp-about .meta strong{ display:block !important; color:var(--ink) !important; font-size:14px !important; }
body .esp-about .meta span{ display:block !important; color:var(--muted) !important; font-size:13px !important; margin-top:3px !important; line-height:1.6 !important; }

/* Bloques “grid” en flex */
body .esp-about .grid3,
body .esp-about .grid4,
body .esp-about .faq{
  display:flex !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  margin-top:14px !important;
}
body .esp-about .grid3 > .card{ flex:1 1 320px !important; }
body .esp-about .grid4 > .card{ flex:1 1 240px !important; }
body .esp-about .faq > .q{ flex:1 1 420px !important; }

body .esp-about .q{
  background:#fff !important;
  border:1px solid var(--border) !important;
  border-radius:26px !important;
  box-shadow:var(--shadowSoft) !important;
  padding:16px !important;
}
body .esp-about .q h3{ font-size:14px !important; }
body .esp-about .q p{ margin-top:8px !important; font-size:13px !important; line-height:1.7 !important; }

/* Eco */
body .esp-about .eco.sec{
  background:var(--esp-green-bg) !important;
  border-top:1px solid rgba(22,163,74,.22) !important;
  border-bottom:1px solid rgba(22,163,74,.22) !important;
}
body .esp-about .eco .dot{
  background:var(--esp-green) !important;
  box-shadow:0 0 0 6px rgba(34,197,94,.18) !important;
}
body .esp-about .eco .li{
  background:rgba(34,197,94,.10) !important;
  border-color:rgba(22,163,74,.18) !important;
}
body .esp-about .eco .check{ background:var(--esp-green) !important; }

/* CTA */
body .esp-about .cta{
  padding:44px 0 !important;
  background:
    radial-gradient(900px 360px at 10% 20%, rgba(206,30,118,.24), transparent 60%),
    radial-gradient(900px 360px at 90% 10%, rgba(206,30,118,.18), transparent 60%),
    linear-gradient(180deg,#fff,var(--bg)) !important;
  border-top:1px solid var(--border) !important;
}
body .esp-about .strip{
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(206,30,118,.18) !important;
  border-radius:28px !important;
  box-shadow:var(--shadow) !important;
  padding:22px !important;

  display:flex !important;
  gap:18px !important;
  align-items:center !important;
  flex-wrap:wrap !important;
}
body .esp-about .strip .left{ flex:1 1 520px !important; min-width:280px !important; }
body .esp-about .strip .right{ flex:1 1 260px !important; min-width:240px !important; }
body .esp-about .actions{ display:flex !important; gap:12px !important; justify-content:flex-end !important; flex-wrap:wrap !important; }

@media (max-width:980px){
  body .esp-about .mediaBox{ height:320px !important; }
  body .esp-about .mediaHero .mediaBox{ height:420px !important; }
  body .esp-about .actions{ justify-content:flex-start !important; }
}
@media (max-width:520px){
  body .esp-about .btn{ width:100% !important; }
  body .esp-about .actions .btn{ width:100% !important; }
}