/* Orama · Hero (v6) — scopeado bajo .orama-hero-w para no afectar al resto de Elementor */
.orama-hero-w{
  --b:#5486FF; --bb:#7CA2FF; --bs:#A9C2FF; --bd:#0D4069;
  --bg:#0A1322; --bg2:#0E1A30; --surface:#15243F; --surface2:#1D3055;
  --line:rgba(124,162,255,.15); --line-soft:rgba(124,162,255,.08);
  --text:#EAF0FB; --muted:#97A6C2; --faint:#61748F; --good:#77A379;
  --ease:cubic-bezier(.22,.61,.36,1);
  font-family:"Inter",system-ui,sans-serif; color:var(--text);
  display:block; position:relative;
  padding:40px 0 56px;   /* como v6: aire entre el header y la card */
}
@media(max-width:560px){ .orama-hero-w{ padding:24px 0 36px; } }
.orama-hero-w *{box-sizing:border-box}
/* Card del hero más extendida lateralmente: ensancha el contenedor de Elementor
   que la aloja (por defecto 1140px → deja ~11% de margen por lado). */
.elementor-container:has(.orama-hero-w),
.e-con-inner:has(.orama-hero-w){max-width:min(1640px,94vw)!important;width:100%}
.orama-hero-w .hero-card{
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius:28px; padding:54px;
  background:linear-gradient(160deg,var(--surface) 0%,var(--bg2) 72%);
  box-shadow:0 50px 120px -60px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
}
.orama-hero-w .glow-blob{position:absolute;width:340px;height:340px;left:-6%;bottom:-20%;border-radius:50%;
  background:var(--b);filter:blur(90px);opacity:.3;pointer-events:none;z-index:0}
.orama-hero-w .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:7fr 5fr;gap:44px;align-items:center}
.orama-hero-w .hero-grid>*{min-width:0}   /* evita que el contenido ensanche la columna y desborde la card */
.orama-hero-w .hero-copy{position:relative;min-width:0}
.orama-hero-w h1{overflow-wrap:break-word}
.orama-hero-w .hero-copy>*{position:relative;z-index:1}
.orama-hero-w .orama-sphere{position:absolute;z-index:0;top:50%;left:50%;transform:translate(-50%,-50%);
  width:84%;aspect-ratio:1/1;opacity:.5;pointer-events:none}
.orama-hero-w .eyebrow{display:inline-flex;align-items:center;gap:9px;padding:.5em 1em;border-radius:999px;
  font-size:.84rem;font-weight:500;color:var(--bs);background:rgba(84,134,255,.1);border:1px solid rgba(84,134,255,.25);margin-bottom:22px}
.orama-hero-w .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--b);box-shadow:0 0 10px var(--b)}
.orama-hero-w h1{font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin:0 0 20px}
.orama-hero-w h1 .b{color:var(--bb)}
.orama-hero-w p.sub{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--muted);max-width:52ch;margin:0 0 30px;line-height:1.6}
.orama-hero-w .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.orama-hero-w .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;padding:.7em 1.25em;
  border-radius:11px;cursor:pointer;text-decoration:none;transition:transform .2s var(--ease),background .2s,border-color .2s}
.orama-hero-w .btn-primary{color:#0A1322;background:#fff}
.orama-hero-w .btn-primary:hover{transform:translateY(-2px);background:#E6EDFB}
.orama-hero-w .btn-ghost{color:#fff;background:transparent;border:2px solid rgba(255,255,255,.5)}
.orama-hero-w .btn-ghost:hover{transform:translateY(-2px);border-color:#fff}
.orama-hero-w .rating{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.9rem;flex-wrap:wrap}
.orama-hero-w .rating .stars{color:#F1BC7A;letter-spacing:2px}
.orama-hero-w .rating b{color:var(--text)}
/* Badge Capterra en vivo: SVG inline SIN modificar; el CSS oculta logo + palabra
   "Capterra" + caja apuntando a sus fill/stroke. Quedan solo estrellas + nota,
   que se actualizan solas cuando Capterra regenera el SVG. */
.orama-hero-w .cap-badge{display:inline-flex;align-items:center;gap:10px;text-decoration:none;transition:filter .2s ease}
.orama-hero-w .cap-mark{line-height:0;display:inline-flex}
.orama-hero-w .cap-mark svg{height:40px;width:auto;display:block;overflow:visible}
/* ocultar: caja + sombra oscura (#002e47), palabra "Capterra" (#fff) y el logo */
.orama-hero-w .cap-mark svg [fill="#002e47"],
.orama-hero-w .cap-mark svg [fill="#fff"],
.orama-hero-w .cap-mark svg [fill="#69c3ea"],
.orama-hero-w .cap-mark svg [fill="#004f80"],
.orama-hero-w .cap-mark svg [fill="#e14748"]{display:none}
/* ala naranja del logo: mismo color que las estrellas pero SIN stroke → no toca estrellas */
.orama-hero-w .cap-mark svg path[fill="#ff9d28"]:not([stroke]){display:none}
/* barra separadora: mantener, en blanco y un poco más ancha (original .4078) */
.orama-hero-w .cap-mark svg path[fill="none"][stroke="#68c5ed"]{stroke:#fff;stroke-width:1.6}
/* número "4,5": recolor editable (default blanco vía control) */
.orama-hero-w .cap-mark svg [fill="#68c5ed"]{fill:var(--cap-num,#fff)}
/* subir + agrandar SOLO las estrellas para centrarlas verticalmente con el "4.5" */
.orama-hero-w .cap-mark svg g[fill="#ff9d28"],
.orama-hero-w .cap-mark svg path[fill="#ff9d28"][stroke],
.orama-hero-w .cap-mark svg path[fill="none"][stroke="#ff9d28"]{
  transform-box:view-box;transform-origin:133px 64px;transform:translateY(-19px) translateX(-6px) scale(1.1);
}
.orama-hero-w .cap-text{color:var(--muted);font-size:.9rem}
.orama-hero-w .cap-badge:hover{filter:brightness(1.06)}
.orama-hero-w .cap-badge:hover .cap-text{color:var(--text)}
.orama-hero-w .hero-visual{position:relative;z-index:2}
.orama-hero-w .panel{background:linear-gradient(180deg,var(--surface2),var(--surface));border:1px solid var(--line);border-radius:16px;
  box-shadow:0 40px 90px -34px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.orama-hero-w .panel:hover{transform:translateY(-6px) scale(1.012);box-shadow:0 50px 110px -30px rgba(84,134,255,.5),0 40px 90px -34px rgba(0,0,0,.85)}
.orama-hero-w .app-top{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.orama-hero-w .app-top .tdot{width:10px;height:10px;border-radius:50%;background:#2b3c58}
.orama-hero-w .app-top .ttl{margin-left:12px;font-size:.78rem;color:var(--faint)}
.orama-hero-w .app-pad{padding:20px}
.orama-hero-w .kpis{display:flex;gap:12px;margin-bottom:16px}
.orama-hero-w .kpi{flex:1;background:rgba(255,255,255,.03);border:1px solid var(--line-soft);border-radius:11px;padding:12px 14px}
.orama-hero-w .kpi .lbl{font-size:.7rem;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.orama-hero-w .kpi .val{font-size:1.2rem;font-weight:700;margin-top:3px;letter-spacing:-.02em}
.orama-hero-w .kpi .val.pos{color:var(--bb)}
.orama-hero-w .chart-card{background:rgba(255,255,255,.02);border:1px solid var(--line-soft);border-radius:12px;padding:16px}
/* La línea del gráfico se dibuja sola al cargar; el área aparece con fundido */
.orama-hero-w .chart-card .hero-line{stroke-dasharray:1;stroke-dashoffset:1;animation:oheroDraw 1.7s var(--ease) .35s forwards}
@keyframes oheroDraw{to{stroke-dashoffset:0}}
.orama-hero-w .chart-card .hero-area{opacity:0;animation:oheroFade 1.2s ease .55s forwards}
@keyframes oheroFade{to{opacity:1}}
/* Escenarios al hover del panel: positivo (arriba) y negativo (abajo) */
.orama-hero-w .chart-card .hero-scn{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:opacity .35s var(--ease)}
.orama-hero-w .panel:hover .hero-scn{opacity:.95;animation:oheroScn .9s var(--ease) forwards}
.orama-hero-w .panel:hover .hero-scn-neg{animation-delay:.12s}
@keyframes oheroScn{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .orama-hero-w .chart-card .hero-line{stroke-dashoffset:0;animation:none}
  .orama-hero-w .chart-card .hero-area{opacity:1;animation:none}
}
.orama-hero-w .chart-card h4{font-size:.82rem;font-weight:600;color:var(--muted);margin:0 0 2px}
.orama-hero-w .chart-card .big{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
@media(max-width:900px){
  .orama-hero-w .hero-card{padding:30px}
  .orama-hero-w .hero-grid{grid-template-columns:1fr;gap:30px}
  .orama-hero-w .orama-sphere{width:150%;opacity:.4}
}
/* Móvil real: menos aire en la card + KPIs en 2 filas con el valor sin partir (va al final para ganar al bloque de 900px) */
@media(max-width:560px){
  .orama-hero-w .hero-card{padding:18px}
  .orama-hero-w .kpis{flex-wrap:wrap;gap:8px}
  .orama-hero-w .kpi{flex:1 1 calc(50% - 4px)}
  .orama-hero-w .kpi .lbl{white-space:nowrap}
  .orama-hero-w .kpi .val{white-space:nowrap;font-size:1rem}
  /* menos aire FUERA de la card (doble padding sección + widget) + card más ancha */
  .orama-hero-w{padding:4px 0 12px}
  .elementor-top-section:has(.orama-hero-w){padding:10px 0!important}
  .elementor-container:has(.orama-hero-w){max-width:100%!important;padding-left:12px!important;padding-right:12px!important}
  .elementor-top-section:has(.orama-hero-w) .elementor-widget-wrap{padding:0!important}
  .elementor-top-section:has(.orama-hero-w) .elementor-column{padding:0!important}
}