/* =========================================================
   EMMA — estilos de componentes premium para la Home
   Portados desde la maqueta (emma-home-propuesta.html).
   Se aplican vía clases en los bloques + el hero en HTML.
   ========================================================= */
.emma-home{
  --eh-ink:#1b1840; --eh-deep:#2e2b66; --eh-indigo:#4d4a9e; --eh-violet:#ac92ec;
  --eh-green:#8dc049; --eh-green-deep:#6fa033; --eh-orange:#fd830d; --eh-slate:#516377;
  --eh-surface:#f6f6fb; --eh-card:#fff; --eh-line:#e6e6f1; --eh-line2:#d9d8e8;
  --eh-radius:18px; --eh-radius-sm:12px;
  --eh-shadow-sm:0 1px 2px rgba(27,24,64,.06),0 8px 24px rgba(27,24,64,.05);
  --eh-shadow-md:0 2px 6px rgba(27,24,64,.08),0 24px 60px rgba(27,24,64,.10);
}

/* Titulares con el peso/tracking de la maqueta */
.emma-home h1,.emma-home h2,.emma-home h3{
  letter-spacing:-.02em;font-weight:800;
}

/* Eyebrow con guion verde */
.emma-eyebrow{
  font-family:'Rubik',sans-serif!important;font-weight:600!important;font-size:12.5px!important;
  letter-spacing:.14em!important;text-transform:uppercase;
}
.emma-eyebrow::before{
  content:"";width:22px;height:2px;background:var(--eh-green);
  display:inline-block;border-radius:2px;vertical-align:middle;margin-right:9px;
}

/* Tarjetas con sombra y profundidad */
.emma-home .emma-card{
  background:var(--eh-card)!important;border:1px solid var(--eh-line);
  border-radius:var(--eh-radius)!important;box-shadow:var(--eh-shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease;
}
.emma-home .emma-card:hover{transform:translateY(-3px);box-shadow:var(--eh-shadow-md)}

/* Tarjeta destacada / gradiente índigo */
.emma-home .emma-card-new,
.emma-home .emma-feature{
  background:linear-gradient(160deg,var(--eh-deep),var(--eh-indigo))!important;
  border:none!important;border-radius:var(--eh-radius)!important;
  box-shadow:var(--eh-shadow-md);color:#fff!important;
}
.emma-home .emma-card-new :where(h1,h2,h3,p,li),
.emma-home .emma-feature :where(h1,h2,h3,p,li){color:#fff!important}

/* Botón CTA con sombra naranja + lift */
.emma-home .is-style-emma-cta .wp-block-button__link,
.emma-cta-shadow .wp-block-button__link{
  box-shadow:0 6px 18px rgba(253,131,13,.32);
}
.emma-home .is-style-emma-cta .wp-block-button__link:hover{
  transform:translateY(-1px);box-shadow:0 10px 24px rgba(253,131,13,.42);
}
/* Botón fantasma sobre fondo oscuro */
.emma-home .is-style-outline .wp-block-button__link{
  border-width:1px!important;border-color:rgba(255,255,255,.35)!important;
}
.emma-home .is-style-outline .wp-block-button__link:hover{
  background:#fff!important;color:var(--eh-ink)!important;border-color:#fff!important;
}

/* Números héroe en Rubik */
.emma-home .emma-data{font-family:'Rubik',sans-serif!important;font-weight:700!important;letter-spacing:-.02em}

/* ====================== HERO (HTML) ====================== */
.emma-hero{position:relative;overflow:hidden;padding:72px 24px 64px;background:var(--eh-surface)}
.emma-hero::before{content:"";position:absolute;top:-200px;right:-180px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,rgba(172,146,236,.22),transparent 62%);z-index:0}
.emma-hero-grid{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:54px;
  align-items:center;position:relative;z-index:1}
/* Hero con columnas editables de Gutenberg */
.emma-hero .wp-block-columns{max-width:1160px;margin:0 auto;align-items:center;gap:54px;position:relative;z-index:1}
.emma-hero .wp-block-column h1{font-size:54px;line-height:1.04;letter-spacing:-.035em;color:var(--eh-ink);font-weight:800;margin:14px 0 0}
.emma-hero .wp-block-column h1 .has-inline-color{color:var(--eh-indigo)!important}
.emma-hero .lead{font-size:18.5px;margin-top:18px;color:var(--eh-slate)}
.emma-hero .trust-line{font-size:13px;margin-top:22px;color:var(--eh-slate);font-weight:500}
/* Botón fantasma del hero (fondo claro) */
.emma-hero .is-style-outline .wp-block-button__link{
  border-color:var(--eh-line2)!important;color:var(--eh-ink)!important;background:transparent}
.emma-hero .is-style-outline .wp-block-button__link:hover{
  border-color:var(--eh-indigo)!important;color:var(--eh-indigo)!important;background:transparent!important}
.emma-hero .emma-eyebrow{color:var(--eh-indigo)}
.emma-hero h1{font-size:54px;line-height:1.04;margin:18px 0 0;letter-spacing:-.035em;color:var(--eh-ink);font-weight:800}
.emma-hero h1 .hl{color:var(--eh-indigo)}
.emma-hero .lead{font-size:18.5px;margin-top:20px;max-width:540px;color:var(--eh-slate)}
.emma-hero .cta-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.emma-hero .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;
  padding:13px 22px;border-radius:11px;border:1px solid transparent;cursor:pointer;transition:.18s ease;white-space:nowrap}
.emma-hero .btn-cta{background:var(--eh-orange);color:#fff;box-shadow:0 6px 18px rgba(253,131,13,.32)}
.emma-hero .btn-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(253,131,13,.42)}
.emma-hero .btn-ghost{background:transparent;color:var(--eh-ink);border-color:var(--eh-line2)}
.emma-hero .btn-ghost:hover{border-color:var(--eh-indigo);color:var(--eh-indigo)}
.emma-hero .trust-line{display:flex;gap:18px;margin-top:26px;flex-wrap:wrap;font-size:13px;color:var(--eh-slate);font-weight:500}

/* product card */
.emma-prod{background:var(--eh-card);border-radius:var(--eh-radius);box-shadow:var(--eh-shadow-md);
  border:1px solid var(--eh-line);overflow:hidden;position:relative}
.emma-prod .topbar{background:linear-gradient(120deg,var(--eh-deep),var(--eh-indigo));padding:13px 16px;display:flex;align-items:center;gap:9px}
.emma-prod .topbar .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4)}
.emma-prod .topbar .tt{color:#fff;font-size:12.5px;font-weight:600;margin-left:6px;opacity:.92}
.emma-prod .topbar .live{margin-left:auto;color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;gap:6px;opacity:.9}
.emma-prod .topbar .live i{width:7px;height:7px;border-radius:50%;background:var(--eh-green);display:inline-block;animation:emmaPulse 2s infinite}
@keyframes emmaPulse{0%{box-shadow:0 0 0 0 rgba(141,192,73,.6)}70%{box-shadow:0 0 0 7px rgba(141,192,73,0)}100%{box-shadow:0 0 0 0 rgba(141,192,73,0)}}
.emma-prod .pbody{padding:20px}
.emma-kpi-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.emma-kpi{background:var(--eh-surface);border:1px solid var(--eh-line);border-radius:var(--eh-radius-sm);padding:13px 14px}
.emma-kpi .lbl{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--eh-slate)}
.emma-kpi .val{font-family:'Rubik';font-weight:700;font-size:25px;color:var(--eh-ink);margin-top:3px;line-height:1}
.emma-kpi .val small{font-size:13px;color:var(--eh-slate);font-weight:600}
.emma-kpi.good .val{color:var(--eh-green-deep)}
.emma-chart-card{background:var(--eh-surface);border:1px solid var(--eh-line);border-radius:var(--eh-radius-sm);padding:14px 14px 12px}
.emma-chart-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.emma-chart-head .t{font-size:12.5px;font-weight:700;color:var(--eh-ink)}
.emma-legend{display:flex;gap:12px;font-size:10.5px;font-weight:600}
.emma-legend span{display:inline-flex;align-items:center;gap:5px;color:var(--eh-slate)}
.emma-legend i{width:9px;height:3px;border-radius:2px;display:inline-block}
.emma-gap-pill{margin-top:10px;display:inline-flex;align-items:center;gap:7px;background:rgba(141,192,73,.14);
  color:var(--eh-green-deep);font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:8px}

/* Marco para captura/clip de Nova */
.emma-nova-frame{max-width:880px;margin:8px auto 0;border-radius:var(--eh-radius);overflow:hidden;
  box-shadow:var(--eh-shadow-md);border:1px solid rgba(255,255,255,.12)}
.emma-nova-frame img{display:block;width:100%;height:auto}

/* Responsive */
@media (max-width:900px){
  .emma-hero-grid{grid-template-columns:1fr;gap:36px}
  .emma-hero h1{font-size:38px}
  .emma-hero{padding:56px 20px 48px}
}
@media (prefers-reduced-motion:reduce){
  .emma-prod .topbar .live i{animation:none}
  .emma-home .emma-card:hover{transform:none}
}