/* =====================================================================
   ORAMA — Brand kit (design tokens reutilizables)
   Fuente de verdad de la marca para toda la web. Editar aquí = cambia en todo.
   ===================================================================== */
:root{
  /* Azul de marca (logo) — acento principal / anotaciones */
  --orama-brand:        #5486FF;
  --orama-brand-bright: #7CA2FF;
  --orama-brand-soft:   #A9C2FF;
  --orama-brand-deep:   #0D4069;

  /* Navy / superficies (estética "zonas de luz") */
  --orama-bg:        #0A1322;
  --orama-bg-2:      #0E1A30;
  --orama-surface:   #15243F;
  --orama-surface-2: #1D3055;
  --orama-line:      rgba(124,162,255,.15);
  --orama-line-soft: rgba(124,162,255,.08);

  /* Texto */
  --orama-text:  #EAF0FB;
  --orama-muted: #97A6C2;
  --orama-faint: #61748F;

  /* Verde de marca (solo datos positivos puntuales) */
  --orama-good: #77A379;

  /* Ritmo / radios */
  --orama-gap-title: 44px;   /* título → contenido (estándar) */
  --orama-zone-pad: 104px;   /* separación entre zonas */
  --orama-radius: 18px;
  --orama-ease: cubic-bezier(.22,.61,.36,1);
}

/* Foco de luz canónico (como el CTA final): grande, azul, desde arriba */
.orama-glow{
  position:absolute; width:620px; height:420px; left:50%; top:-40px;
  transform:translateX(-50%); border-radius:50%;
  background:var(--orama-brand); filter:blur(90px); opacity:.3;
  pointer-events:none; z-index:0;
}

/* Línea divisoria sutil entre zonas */
.orama-divider{ border-top:1px solid var(--orama-line-soft); }

/* .orama-sep — separador reutilizable entre zonas (línea con fundido a los lados, como v6).
   Úsalo como clase en un contenedor/HTML, o el widget "Orama · Separador". */
.orama-sep{ height:1px; width:100%; border:0; margin:0;
  background:linear-gradient(90deg,transparent,rgba(124,162,255,.22) 16%,rgba(124,162,255,.22) 84%,transparent); }
.orama-sep--solid{ background:rgba(124,162,255,.12); }
.orama-sep--center{ width:min(1640px,94vw); margin-inline:auto; }

/* Separador superior de zona (toggle "Separador superior" en una sección):
   línea con fundido a los lados, centrada al ancho de contenido. */
.orama-sep-top::after{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(1640px,92vw); height:1px; pointer-events:none; z-index:1;
  background:linear-gradient(90deg,transparent,rgba(124,162,255,.18) 16%,rgba(124,162,255,.18) 84%,transparent); }

/* =====================================================================
   FONDO GLOBAL v6 — atmósfera navy con "zonas de luz"
   Aplica a todo el front-end. Una página puede sobreescribir su fondo.
   Degradados en capas con background-attachment:fixed → ambiente a
   cualquier altura de scroll. Los "focos" puntuales por zona se añaden
   en cada sección con .orama-glow.
   ===================================================================== */
/* Evita el scroll horizontal que provoca el drawer cerrado (fuera de pantalla a la derecha).
   overflow-x:clip NO crea contenedor de scroll → el header sticky sigue funcionando. */
html{ overflow-x:clip; }
body{ background:var(--orama-bg); color:var(--orama-text); overflow-x:clip; }
/* Capa de luz FIJA detrás de todo el contenido (z-index:-1).
   Glows pequeños y tenues PEGADOS a las esquinas (no se extienden sobre el hero).
   NO usar background-attachment:fixed (causa seams / "z-index" raro contra cards). */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(820px 640px at 100% 0%, rgba(84,134,255,.16), transparent 58%),  /* arriba-derecha */
    radial-gradient(860px 720px at 0% 58%,  rgba(84,134,255,.12), transparent 58%);  /* más abajo-izquierda */
}
/* El contenido (incl. hero) en su propia capa, siempre por encima de la luz */
.elementor{ position:relative; z-index:0; }

/* ===== Móvil: aire lateral en las secciones de la home + títulos centrados ===== */
@media(max-width:768px){
  [data-elementor-type="wp-page"] .elementor-top-section > .elementor-container{ padding-left:22px!important; padding-right:22px!important; }
  .orama-head{ text-align:center; margin-left:auto; margin-right:auto; }
}

/* =====================================================================
   .orama-wide — contenedor extra-ancho reutilizable (card principal,
   bandas anchas v6). Marketing añade la clase "orama-wide" a la sección
   o contenedor desde "CSS Classes" y se extiende a min(1640px, 94vw).
   ===================================================================== */
.elementor-section.orama-wide > .elementor-container{ max-width:min(1640px,94vw)!important; }
.e-con.orama-wide{ --container-max-width:min(1640px,94vw); }
.e-con.orama-wide > .e-con-inner{ max-width:min(1640px,94vw)!important; }

/* =====================================================================
   .orama-zone — "foco de luz" opcional en mapa de 9 posiciones.
   Se aplica a cualquier sección/contenedor de Elementor: con las clases
   (orama-zone orama-zone--glow glow-tc ...) o con el control del panel
   "Orama: foco de luz". Modificadores de tamaño/color/intensidad.
   ===================================================================== */
.orama-zone{ position:relative; }
.orama-zone > *{ position:relative; z-index:1; }       /* contenido sobre el glow */
.orama-zone--glow::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:var(--glow-size,720px); height:var(--glow-size,720px);
  /* foco radial concentrado en un punto, se desvanece a transparente (no se "corta") */
  background:radial-gradient(circle at center, var(--glow-color,var(--orama-brand)) 0%, transparent 60%);
  filter:blur(var(--glow-blur,16px)); opacity:var(--glow-opacity,.32);
  top:-40px; left:50%; transform:translateX(-50%);   /* por defecto: arriba-centro */
}
/* Mapa de 9 posiciones (todas las offsets explícitas para no heredar) */
.orama-zone--glow.glow-tl::before{ top:-70px; bottom:auto; left:-70px;  right:auto;  transform:none; }
.orama-zone--glow.glow-tc::before{ top:-70px; bottom:auto; left:50%;    right:auto;  transform:translateX(-50%); }
.orama-zone--glow.glow-tr::before{ top:-70px; bottom:auto; left:auto;   right:-70px; transform:none; }
.orama-zone--glow.glow-cl::before{ top:50%;   bottom:auto; left:-90px;  right:auto;  transform:translateY(-50%); }
.orama-zone--glow.glow-cc::before{ top:50%;   bottom:auto; left:50%;    right:auto;  transform:translate(-50%,-50%); }
.orama-zone--glow.glow-cr::before{ top:50%;   bottom:auto; left:auto;   right:-90px; transform:translateY(-50%); }
.orama-zone--glow.glow-bl::before{ top:auto;  bottom:-70px; left:-70px; right:auto;  transform:none; }
.orama-zone--glow.glow-bc::before{ top:auto;  bottom:-70px; left:50%;   right:auto;  transform:translateX(-50%); }
.orama-zone--glow.glow-br::before{ top:auto;  bottom:-70px; left:auto;  right:-70px; transform:none; }
/* Tamaño / color / intensidad (CSS vars consumidas por ::before) */
.orama-zone.glow-sm{ --glow-size:420px; }
.orama-zone.glow-lg{ --glow-size:860px; }
.orama-zone.glow-xl{ --glow-size:1150px; }
.orama-zone.glow-bright{ --glow-color:var(--orama-brand-bright); }
.orama-zone.glow-deep{ --glow-color:var(--orama-brand-deep); }
.orama-zone.glow-soft{ --glow-opacity:.16; }
.orama-zone.glow-strong{ --glow-opacity:.42; }

/* =====================================================================
   .orama-card — tarjeta reutilizable (con o sin imagen / icono).
   Aplica la clase a un contenedor de Elementor y mete dentro lo que quieras.
   ===================================================================== */
.orama-card{ display:block; position:relative; overflow:hidden; border-radius:var(--orama-radius);
  /* display:block es imprescindible: cuando la card lleva enlace se renderiza
     como <a>, que por defecto es inline, y el fondo y el padding se fragmentan. */
  border:1px solid var(--orama-line); padding:28px;
  background:linear-gradient(160deg,var(--orama-surface),var(--orama-bg-2));
  transition:transform .35s var(--orama-ease),border-color .35s,box-shadow .35s; }
.orama-card:hover{ transform:translateY(-4px); border-color:rgba(124,162,255,.35);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.8); }
.orama-card__media{ margin:-28px -28px 18px; aspect-ratio:16/9; overflow:hidden; background:var(--orama-bg-2); }
.orama-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.orama-card__icon{ width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:13px; margin-bottom:14px; color:var(--orama-brand-bright);
  background:rgba(84,134,255,.12); border:1px solid rgba(84,134,255,.25);
  transition:background .3s var(--orama-ease), border-color .3s, transform .3s, color .3s; }
.orama-card__icon svg{ width:24px; height:24px; }
.orama-card__icon .ph{ font-size:25px; line-height:1; }
/* Sin borde (icono "suelto") */
.orama-card__icon--noborder{ background:transparent; border-color:transparent; width:auto; height:auto; border-radius:0; }
.orama-card__icon--noborder .ph{ font-size:30px; }
/* Hover de la card: el borde/fondo del icono se ilumina (sin cambiar el color del icono) */
.orama-card:hover .orama-card__icon{ background:rgba(84,134,255,.2); border-color:rgba(124,162,255,.55);
  transform:translateY(-2px); }
.orama-card:hover .orama-card__icon--noborder{ background:transparent; border-color:transparent; }

/* Foco de luz de la card — 8 posiciones, de fuera a dentro, aparece al hover.
   overflow:hidden de .orama-card lo recorta → entra hacia dentro desde el borde. */
.orama-card > *{ position:relative; z-index:1; }   /* contenido sobre el foco */
.orama-card--glow::after{ content:""; position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  width:280px; height:220px; background:var(--orama-brand); filter:blur(70px);
  opacity:0; transition:opacity .45s var(--orama-ease); }
.orama-card--glow:hover::after{ opacity:.42; }
.orama-card--glow.cglow-tl::after{ top:-90px;  bottom:auto; left:-90px;  right:auto;  transform:none; }
.orama-card--glow.cglow-tc::after{ top:-110px; bottom:auto; left:50%;    right:auto;  transform:translateX(-50%); }
.orama-card--glow.cglow-tr::after{ top:-90px;  bottom:auto; left:auto;   right:-90px; transform:none; }
.orama-card--glow.cglow-cl::after{ top:50%;    bottom:auto; left:-110px; right:auto;  transform:translateY(-50%); }
.orama-card--glow.cglow-cr::after{ top:50%;    bottom:auto; left:auto;   right:-110px;transform:translateY(-50%); }
.orama-card--glow.cglow-bl::after{ top:auto; bottom:-90px;  left:-90px;  right:auto;  transform:none; }
.orama-card--glow.cglow-bc::after{ top:auto; bottom:-110px; left:50%;    right:auto;  transform:translateX(-50%); }
.orama-card--glow.cglow-br::after{ top:auto; bottom:-90px;  left:auto;   right:-90px; transform:none; }
.orama-card h3, .orama-card .orama-card__title{ font-size:1.12rem; font-weight:700; margin:0 0 8px; color:var(--orama-text); }
.orama-card p, .orama-card .orama-card__text{ color:var(--orama-muted); font-size:.95rem; line-height:1.6; margin:0; }
.orama-card .orama-card__cta{ display:inline-block; margin-top:14px; color:var(--orama-brand-bright); font-weight:600; font-size:.92rem; }

/* Variante "plan/segmento": centrado, icono en círculo, acento superior */
.orama-card--plan{ text-align:center; border-color:rgba(124,162,255,.22); padding-top:32px; }
.orama-card--plan::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:2;
  background:linear-gradient(90deg,var(--orama-brand),var(--orama-brand-bright)); }
.orama-card--plan .orama-card__icon{ margin-left:auto; margin-right:auto; width:58px; height:58px; border-radius:50%; }
.orama-card--plan .orama-card__icon .ph{ font-size:29px; }
.orama-card--plan p, .orama-card--plan .orama-card__text{ margin-inline:auto; max-width:32ch; }

/* === Planes (entrada a precios, estilo PDF: 4 cards, medias elevadas) === */
.orama-plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:44px auto 0; max-width:1080px; padding-inline:8px; align-items:stretch; }
.orama-plan{ position:relative; display:flex; flex-direction:column; padding:26px 24px; border-radius:18px;
  border:1px solid var(--orama-line); background:rgba(255,255,255,.02); color:inherit; text-decoration:none; min-height:220px;
  transition:transform .25s var(--ease,cubic-bezier(.22,1,.36,1)), border-color .25s ease, box-shadow .25s ease; }
.orama-plan--featured{ background:linear-gradient(180deg,rgba(84,134,255,.12),rgba(84,134,255,.03));
  border-color:rgba(84,134,255,.4); box-shadow:0 24px 60px rgba(84,134,255,.14); }
a.orama-plan:hover{ transform:translateY(-6px); border-color:rgba(84,134,255,.55); box-shadow:0 26px 60px rgba(8,14,30,.42); }
.orama-plan__tag{ font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--orama-brand-bright,#7CA2FF); margin-bottom:14px; }
.orama-plan__title{ font-size:1.35rem; color:var(--orama-text); margin:0 0 10px; }
.orama-plan__text{ color:var(--orama-muted); font-size:.92rem; line-height:1.55; margin:0 0 20px; }
.orama-plan__arrow{ width:24px; height:24px; color:var(--orama-brand-bright,#7CA2FF); margin-top:auto; align-self:flex-end; transition:transform .22s ease; }
a.orama-plan:hover .orama-plan__arrow{ transform:translateX(5px); }
/* color = 2 del centro (.--featured) ; elevación = los 2 laterales (1ª y última card) */
@media(min-width:981px){
  .orama-plans > .orama-plan:first-child, .orama-plans > .orama-plan:last-child{ transform:translateY(-14px); }
  a.orama-plan:first-child:hover, a.orama-plan:last-child:hover{ transform:translateY(-20px); }
}
@media(max-width:980px){ .orama-plans{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .orama-plans{ grid-template-columns:1fr; } .orama-plan{ min-height:0; } }

/* Composición alternativa "Título entre tarjetas" (orama_plans · comp=split):
   1 card alta a cada lado, cabecera arriba-centro y las 2 del centro (bajas) debajo del título */
.orama-plans-split{ display:grid; grid-template-columns:repeat(4,1fr);
  grid-template-areas:"left title title right" "left c2 c3 right";
  gap:20px 20px; margin:40px auto 0; max-width:1080px; padding-inline:8px; align-items:start; }
/* laterales un poco más abajo (solo ellas, vía top relative; no afecta al resto) */
.orama-plans-split > :nth-child(2), .orama-plans-split > :nth-child(5){ align-self:start; top:var(--side-drop,80px); }
.orama-plans-split > :nth-child(3), .orama-plans-split > :nth-child(4){ align-self:start; top:var(--center-drop,0px); }
.orama-plans-split .orama-plan{ min-height:272px; }   /* todas la altura de la más alta (≈4 líneas) */
.orama-plans-split > :nth-child(1){ grid-area:title; }
.orama-plans-split > :nth-child(2){ grid-area:left; }
.orama-plans-split > :nth-child(3){ grid-area:c2; }
.orama-plans-split > :nth-child(4){ grid-area:c3; }
.orama-plans-split > :nth-child(5){ grid-area:right; }
.orama-plans__head{ text-align:center; align-self:center; padding:6px 10px; }
.orama-plans__head .orama-eyebrow{ margin:0 auto 14px; }
.orama-plans__head h2{ font-size:clamp(1.5rem,2.5vw,2.1rem); line-height:1.15; color:var(--orama-text); margin:0 0 10px; }
.orama-plans__head p{ color:var(--orama-muted); font-size:1rem; line-height:1.5; max-width:46ch; margin:0 auto; }
/* las 2 del centro: contenido centrado y "dentro" de la caja */
.orama-plans-split > :nth-child(3), .orama-plans-split > :nth-child(4){ text-align:center; align-items:center; justify-content:center; }
.orama-plans-split > :nth-child(3) .orama-plan__arrow, .orama-plans-split > :nth-child(4) .orama-plan__arrow{ align-self:center; margin-top:14px; }
@media(max-width:900px){ .orama-plans-split{ grid-template-columns:1fr 1fr; grid-template-areas:"title title" "left right" "c2 c3"; }
  /* el desplazamiento vertical lo fijan los controles responsive del widget (80 px escritorio, 0 tablet/móvil por defecto) */ }
@media(max-width:560px){ .orama-plans-split{ grid-template-columns:1fr; grid-template-areas:"title" "left" "c2" "c3" "right"; } .orama-plans-split .orama-plan{ min-height:0; } }

/* === Clientes (testimonios en vídeo) — estilo PDF: head izq + carrusel dcha === */
.orama-clients > .orama-clients__eyebrow{ display:block; width:auto; text-align:center; margin:0 0 40px; background:none; border:0; padding:0;
  color:var(--orama-brand-bright,#7CA2FF); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:600; }
.orama-clients--split{ display:grid; grid-template-columns:5fr 7fr; gap:26px; align-items:start; max-width:1280px; margin-inline:auto; }
.orama-clients--split > *{ min-width:0; }
.orama-clients--split .orama-head{ text-align:left; margin:0; max-width:none; padding-right:24px; }
.orama-clients--split .orama-head .orama-eyebrow{ background:none; border:0; padding:0; margin-bottom:14px; display:block; text-align:center;
  color:var(--orama-brand-bright,#7CA2FF); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:600; }
.orama-clients--split .orama-head h1, .orama-clients--split .orama-head h2{ font-size:clamp(1.8rem,2.7vw,2.5rem); line-height:1.12; margin-bottom:16px; }
.orama-clients--split .orama-head p{ margin:0; max-width:42ch; font-size:1.05rem; }
.orama-clients__carousel{ position:relative; min-width:0; }
.orama-clients__track{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:2px; margin:-2px; -ms-overflow-style:none; scrollbar-width:none; }
.orama-clients__track::-webkit-scrollbar{ display:none; }
.orama-client{ flex:0 0 220px; scroll-snap-align:start; }
.orama-client.has-video{ cursor:pointer; }
.orama-client__media{ position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden;
  border:1px solid var(--orama-line); background:linear-gradient(160deg,var(--orama-surface),var(--orama-bg-2,#0c1426)); }
.orama-client__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s var(--ease,cubic-bezier(.22,1,.36,1)); }
.orama-client:hover .orama-client__media img{ transform:scale(1.05); }
.orama-client__play{ position:absolute; inset:0; margin:auto; width:50px; height:50px; border-radius:50%;
  background:rgba(255,255,255,.94); color:#0A1322; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,.42); transition:transform .25s ease; }
.orama-client__play svg{ width:22px; height:22px; margin-left:2px; }
.orama-client:hover .orama-client__play{ transform:scale(1.1); }
.orama-client__ph{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; color:rgba(124,162,255,.18); }
.orama-client__ph svg{ width:62%; height:auto; }
.orama-client__quote{ color:var(--orama-text); font-size:.9rem; line-height:1.5; margin:14px 0 12px; }
.orama-client__person{ display:flex; align-items:center; gap:10px; }
.orama-client__avatar{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:600; color:var(--orama-brand-bright,#7CA2FF); background:rgba(124,162,255,.14); border:1px solid rgba(124,162,255,.25); }
.orama-client__pinfo{ display:flex; flex-direction:column; line-height:1.25; }
.orama-client__pinfo strong{ color:var(--orama-text); font-size:.86rem; }
.orama-client__pinfo span{ color:var(--orama-muted); font-size:.76rem; }
.orama-clients__nav{ display:flex; gap:18px; margin-top:22px; justify-content:flex-end; }
.orama-clients__arrow{ display:flex; align-items:center; justify-content:center; padding:4px;
  background:none; border:0; border-radius:0; color:var(--orama-muted); cursor:pointer; transition:color .2s ease; }
.orama-clients__arrow:hover, .orama-clients__arrow:focus, .orama-clients__arrow:active{ background:none; }
.orama-clients__arrow svg{ width:24px; height:24px; transition:transform .22s var(--ease,cubic-bezier(.22,1,.36,1)); }
.orama-clients__arrow[data-nav="prev"] svg{ transform:rotate(180deg); }
.orama-clients__arrow:hover{ color:var(--orama-brand-bright,#7CA2FF); }
.orama-clients__arrow[data-nav="next"]:hover svg{ transform:translateX(4px); }
.orama-clients__arrow[data-nav="prev"]:hover svg{ transform:rotate(180deg) translateX(4px); }
/* === Variante CON CAJA (nuevo diseño de testimonio en vídeo) ===
   Tarjeta con borde completo + padding, miniatura panorámica 16:9 (object-fit:cover
   recorta las bandas negras del frame 4:3 de YouTube), línea separadora antes de la
   persona y play como triángulo azul Orama (sin círculo). Siguen viéndose 3 tarjetas.
   La variante "sin caja" (.orama-clients--plain) conserva el diseño anterior. */
.orama-clients--boxed .orama-clients--split{ grid-template-columns:4fr 8fr; } /* más ancho para el carrusel → 3 tarjetas más grandes */
.orama-clients--boxed .orama-client{ display:flex; flex-direction:column; flex-basis:256px;
  border:1px solid var(--orama-line); border-radius:20px; padding:16px; background:var(--orama-surface);
  transition:transform .25s var(--ease,cubic-bezier(.22,1,.36,1)), box-shadow .25s ease; }
/* Comillas dobles tipográficas alrededor de la cita (parece cita textual). */
.orama-clients--boxed .orama-client__quote::before{ content:"\201C"; }
.orama-clients--boxed .orama-client__quote::after{ content:"\201D"; }
.orama-clients--boxed .orama-client.has-video:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.3); }
.orama-clients--boxed .orama-client__media{ aspect-ratio:16/9; border:0; border-radius:14px; }
.orama-clients--boxed .orama-client__play{ background:none; box-shadow:none; width:auto; height:auto;
  color:var(--orama-brand-bright,#7CA2FF); filter:drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
.orama-clients--boxed .orama-client__play svg{ width:52px; height:52px; margin-left:3px; opacity:.92; }
.orama-clients--boxed .orama-client__quote{ margin:14px 0 14px; }
.orama-clients--boxed .orama-client__person{ border-top:1px solid var(--orama-line); margin-top:auto; padding-top:14px; }
@media(max-width:860px){
  /* incluye la variante boxed: su regla 4fr 8fr (0,2,0) pisaba a esta (0,1,0) y el móvil seguía a 2 columnas */
  .orama-clients--split, .orama-clients--boxed .orama-clients--split{ grid-template-columns:1fr; gap:30px; }
  .orama-clients--split .orama-head{ text-align:center; }
  .orama-clients--split .orama-head .orama-eyebrow{ display:inline-block; }
  .orama-clients--split .orama-head p{ margin-inline:auto; max-width:40ch; }
  .orama-clients__nav{ justify-content:center; }
}

/* === Comparativa en tabla (alternativa a orama_compare) === */
.orama-ctable__scroll{ overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; padding-top:24px; }
.orama-ctable__scroll::-webkit-scrollbar{ display:none; }
.orama-ctable__grid{ display:grid; grid-template-columns:0.82fr 1.05fr minmax(250px,1.18fr); min-width:600px;
  max-width:1000px; margin:0 auto; background:rgba(255,255,255,.02); border:1px solid var(--orama-line); border-radius:18px; }
.orama-ctable .ct-cell{ display:flex; align-items:center; gap:11px; padding:17px 22px; font-size:.92rem; line-height:1.45; }
/* divisores de fila (columnas izquierda) */
.orama-ctable .ct-feat:not(.ct-h), .orama-ctable .ct-excel:not(.ct-h){ border-bottom:1px solid var(--orama-line); }
.orama-ctable__grid > .ct-feat:nth-last-child(3), .orama-ctable__grid > .ct-excel:nth-last-child(2){ border-bottom:0; }
/* cabecera */
.orama-ctable .ct-h{ text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; font-weight:600; color:var(--orama-muted); border-bottom:1px solid var(--orama-line); }
.orama-ctable .ct-h.ct-excel{ gap:8px; }
.orama-ctable .ct-h.ct-excel .ph{ font-size:18px; }
/* columna característica */
.orama-ctable .ct-feat:not(.ct-h){ color:var(--orama-text); font-weight:600; }
/* columna excel */
.orama-ctable .ct-excel:not(.ct-h){ color:var(--orama-muted); }
.orama-ctable .ct-mark{ flex:0 0 auto; display:inline-flex; }
.orama-ctable .ct-ic{ width:17px; height:17px; }
.orama-ctable .ct-mark--no{ color:var(--orama-muted,#97A6C2); }
.orama-ctable .ct-mark--yes{ color:var(--orama-brand-bright,#7CA2FF); }
/* columna Orama destacada (azul, elevada) */
.orama-ctable .ct-orama{ background:linear-gradient(180deg,rgba(84,134,255,.18),rgba(84,134,255,.06));
  border-left:1px solid rgba(84,134,255,.45); border-right:1px solid rgba(84,134,255,.45); color:var(--orama-text); }
.orama-ctable .ct-orama:not(:last-child){ border-bottom:1px solid rgba(124,162,255,.18); }
.orama-ctable .ct-h.ct-orama{ justify-content:center; color:var(--orama-text);
  border-top:1px solid rgba(84,134,255,.45); border-radius:18px 18px 0 0; }
.orama-ctable .ct-orama-logo{ display:flex; align-items:center; color:#fff; }
.orama-ctable .ct-orama-logo .ct-logo{ height:23px; width:auto; display:block; }
.orama-ctable__grid > .ct-orama:last-child{ border-bottom:1px solid rgba(84,134,255,.45); border-radius:0 0 18px 18px; box-shadow:0 18px 44px rgba(84,134,255,.12); }
@media(max-width:760px){
  .orama-ctable__grid{ min-width:560px; }
}

/* lightbox de vídeo */
.orama-vlb{ position:fixed; inset:0; z-index:99999; background:rgba(6,11,22,.85); backdrop-filter:blur(5px);
  display:flex; align-items:center; justify-content:center; padding:24px; animation:oramaVlbIn .25s ease; }
@keyframes oramaVlbIn{ from{opacity:0} to{opacity:1} }
.orama-vlb__box{ position:relative; width:min(900px,92vw); aspect-ratio:16/9; }
.orama-vlb__box iframe, .orama-vlb__box video{ width:100%; height:100%; border:0; border-radius:14px; background:#000; }
.orama-vlb__x{ position:absolute; top:-46px; right:0; background:none; border:0; color:#fff; font-size:36px; line-height:1; cursor:pointer; }

/* =====================================================================
   .orama-head — encabezado de sección (eyebrow + título + subtítulo)
   ===================================================================== */
.orama-head{ max-width:60ch; margin:0 0 44px; }
.orama-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
/* Eyebrow ESTÁNDAR = estilo plano "casos reales" (texto en mayúsculas, sin píldora).
   Antes era una píldora azul; se estandarizó al diseño de la sección "Casos reales". */
.orama-eyebrow{ display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orama-brand-bright); margin-bottom:16px; }
/* Variante PÍLDORA (el diseño anterior — NO se elimina, sigue disponible).
   Se activa con el control "Estilo de etiqueta" → "Píldora" del widget Encabezado,
   o añadiendo la clase `orama-eyebrow--pill`. */
.orama-eyebrow--pill{ font-size:.8rem; letter-spacing:.04em; text-transform:none;
  background:rgba(84,134,255,.1); border:1px solid rgba(84,134,255,.25);
  padding:.42em .95em; border-radius:999px; }
.orama-head h1, .orama-head h2{ font-size:clamp(2rem,4vw,3rem); font-weight:800; line-height:1.12; letter-spacing:-.02em;
  margin:0 0 18px; color:var(--orama-text); }
.orama-head h1 .hl, .orama-head h2 .hl{ color:var(--orama-brand-bright); }
.orama-head p{ font-size:1.12rem; color:var(--orama-muted); line-height:1.6; margin:0; }

/* Grid reutilizable de columnas iguales (cards, etc.) */
.orama-grid{ display:grid; gap:22px; }
.orama-grid-2{ grid-template-columns:repeat(2,1fr); }
.orama-grid-3{ grid-template-columns:repeat(3,1fr); }
.orama-grid-4{ grid-template-columns:repeat(4,1fr); }
@media(max-width:900px){ .orama-grid-3,.orama-grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .orama-grid-2,.orama-grid-3,.orama-grid-4{ grid-template-columns:1fr; } }

/* =====================================================================
   .orama-logos — strip de logotipos de clientes en escala de grises
   (objetivo del PDF: se ven grises aunque tengan color; color al hover).
   ===================================================================== */
.orama-logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:30px 46px; }
.orama-logos img{ height:var(--logo-h,34px); width:auto; object-fit:contain;
  filter:grayscale(1) brightness(0) invert(.7); opacity:.6;
  transition:filter .25s var(--orama-ease), opacity .25s; }
.orama-logos:not(.is-static) img:hover{ filter:none; opacity:1; }

/* .orama-trust — línea de confianza (doble color, pequeña como v6) + logos */
.orama-trust{ text-align:center; }
.orama-trust__title{ color:var(--orama-text); font-weight:700; font-size:clamp(1.5rem,2.7vw,2.1rem); line-height:1.2; letter-spacing:-.01em; margin:0 auto 10px; max-width:26ch; }
.orama-trust__sub{ color:var(--orama-muted); font-size:1.05rem; line-height:1.5; margin:0 auto 28px; max-width:54ch; }

/* =====================================================================
   .orama-compare — comparativa Orama vs Excel (v6): checks verdes / X grises
   ===================================================================== */
.orama-compare{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:920px; margin:0 auto; }
.orama-compare .col-c{ border-radius:var(--orama-radius); padding:30px; border:1px solid var(--orama-line); }
.orama-compare .col-c.is-good{ position:relative; overflow:hidden;
  background:linear-gradient(180deg,rgba(84,134,255,.14),var(--orama-surface)); border-color:rgba(84,134,255,.4); }
.orama-compare .col-c.is-bad{ background:var(--orama-bg-2); opacity:.85; }
.orama-compare .col-c h4{ font-size:1.2rem; margin:0 0 20px; display:flex; align-items:center; gap:10px; color:var(--orama-text); }
.orama-compare .col-c h4 .logo-mini{ height:26px; width:auto; color:#fff; }
.orama-compare .col-c.is-bad h4 .ph{ font-size:26px; color:var(--orama-muted); }
.orama-compare ul{ list-style:none; display:flex; flex-direction:column; gap:14px; margin:0; padding:0; }
.orama-compare li{ display:flex; gap:11px; font-size:.98rem; color:var(--orama-text); align-items:flex-start; }
.orama-compare li svg{ flex:0 0 20px; width:20px; height:20px; margin-top:2px; }
.orama-compare .is-good li svg{ color:var(--orama-brand-bright); }
.orama-compare .is-bad li{ color:var(--orama-muted); }
.orama-compare .is-bad li svg{ color:var(--orama-faint); }
.orama-compare .col-c.is-good .glow{ position:absolute; width:240px; height:240px; top:-110px; right:-70px; border-radius:50%;
  background:radial-gradient(circle,var(--orama-brand) 0%,transparent 62%); opacity:.3; pointer-events:none; }
@media(max-width:760px){ .orama-compare{ grid-template-columns:1fr; } }

/* =====================================================================
   Botones reutilizables
   ===================================================================== */
.orama-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(--orama-ease), background .2s, border-color .2s; }
.orama-btn--primary{ color:#0A1322; background:#fff; }
.orama-btn--primary:hover{ transform:translateY(-2px); background:#E6EDFB; }
.orama-btn--ghost{ color:#fff; background:transparent; border:1px solid var(--orama-line); }
.orama-btn--ghost:hover{ transform:translateY(-2px); border-color:var(--orama-brand-bright); }
.orama-btn svg{ width:16px; height:16px; opacity:.85; }

/* =====================================================================
   .orama-stats — banda de contadores v6
   ===================================================================== */
.orama-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1000px; margin:0 auto;
  background:linear-gradient(180deg,var(--orama-surface),var(--orama-bg-2)); border:1px solid var(--orama-line);
  border-radius:24px; padding:46px 30px; position:relative; overflow:hidden; }
.orama-stats .glow{ position:absolute; width:560px; height:360px; left:50%; top:-150px; transform:translateX(-50%);
  border-radius:50%; background:radial-gradient(circle,var(--orama-brand) 0%,transparent 60%); opacity:.2; pointer-events:none; }
.orama-stats .stat{ text-align:center; position:relative; }
.orama-stats .stat .n{ font-size:clamp(2.1rem,3.8vw,2.9rem); font-weight:800; letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff,var(--orama-brand-bright)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.orama-stats .stat .l{ color:var(--orama-muted); font-size:.93rem; margin-top:6px; }
@media(max-width:760px){ .orama-stats{ grid-template-columns:1fr 1fr; gap:30px; } }

/* =====================================================================
   .orama-cta — bloque de cierre v6 (centrado, foco grande)
   ===================================================================== */
.orama-cta{ text-align:center; position:relative; }
.orama-cta > *{ position:relative; z-index:1; }
.orama-cta .glow{ position:absolute; z-index:0; width:760px; height:760px; left:50%; top:-130px; transform:translateX(-50%);
  border-radius:50%; background:radial-gradient(circle,var(--orama-brand) 0%,transparent 58%); opacity:.3; pointer-events:none; }
.orama-cta .eyebrow-text{ color:var(--orama-brand-bright); font-weight:600; display:block; margin-bottom:14px; }
.orama-cta h2{ font-size:clamp(2.2rem,4.6vw,3.4rem); max-width:20ch; margin:0 auto 20px; font-weight:800; line-height:1.1; color:var(--orama-text); }
.orama-cta p{ color:var(--orama-muted); font-size:1.12rem; max-width:52ch; margin:0 auto 32px; line-height:1.6; }
.orama-cta__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* =====================================================================
   .orama-faq — acordeón (native <details>, sin JS)
   ===================================================================== */
.orama-faq{ display:flex; flex-direction:column; gap:12px; width:100%; max-width:820px; margin:0 auto; }
.orama-faq__item{ min-width:0; }
.orama-faq__a{ overflow-wrap:break-word; }
/* La sección de dudas+academy centrada y a un ancho consistente (no a todo el ancho) */
.elementor-section:has(.orama-faq) > .elementor-container{ max-width:1180px; }
.orama-faq__item{ border:1px solid var(--orama-line); border-radius:14px; background:rgba(255,255,255,.02); overflow:hidden; transition:border-color .25s; }
.orama-faq__item[open]{ border-color:rgba(124,162,255,.35); }
.orama-faq__item summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:17px 20px; font-weight:600; color:var(--orama-text); font-size:1rem; }
.orama-faq__item summary::-webkit-details-marker{ display:none; }
.orama-faq__item .pl{ color:var(--orama-brand-bright); font-size:1.5rem; line-height:1; transition:transform .25s var(--orama-ease); }
.orama-faq__item[open] .pl{ transform:rotate(45deg); }
.orama-faq__a{ padding:0 20px 18px; color:var(--orama-muted); line-height:1.6; font-size:.95rem; }

/* =====================================================================
   Academy — card especial v6 (gradiente azul + borde + glow + birrete)
   ===================================================================== */
.orama-academy-block{ position:relative; overflow:hidden; border-radius:20px;
  background:linear-gradient(160deg,rgba(84,134,255,.22),var(--orama-surface));
  border:1px solid rgba(84,134,255,.4); padding:34px; height:100%; }
.orama-academy-block .oa-glow{ position:absolute; width:240px; height:240px; top:-90px; right:-60px; border-radius:50%;
  background:radial-gradient(circle,var(--orama-brand) 0%,transparent 62%); opacity:.4; pointer-events:none; z-index:0; }
.orama-academy-block > *{ position:relative; z-index:1; }
.orama-academy-block .academy-copy h3{ font-size:1.4rem; font-weight:800; margin:0 0 10px; color:var(--orama-text); }
.orama-academy-block .academy-copy p{ color:var(--orama-brand-soft); font-size:.98rem; line-height:1.6; margin:0 0 20px; }
/* Vertical (aside, p.ej. a la derecha de las dudas): todo centrado */
.orama-academy-block.is-stack{ display:flex; flex-direction:column; justify-content:center; text-align:center; }
.orama-academy-block.is-stack .academy-copy p{ max-width:36ch; margin-inline:auto; }
/* En línea (visual + copy lado a lado), para usos a todo el ancho */
.orama-academy-block.is-inline{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; }
.orama-academy-block.is-inline .academy-copy{ text-align:left; }
@media(max-width:820px){ .orama-academy-block.is-inline{ grid-template-columns:1fr; gap:18px; text-align:center; } }

/* =====================================================================
   .orama-seq — "Todo el control de tu tesorería"
   Copy + panel compartidos (ambos modos)
   ===================================================================== */
.orama-seq .copy h3{ font-size:1.55rem; font-weight:800; margin:0 0 12px; color:var(--orama-text); }
.orama-seq .copy p{ color:var(--orama-muted); line-height:1.6; margin:0 0 16px; }
.orama-seq .tick{ display:flex; gap:10px; align-items:flex-start; color:var(--orama-text); font-size:.95rem; margin-top:10px; }
.orama-seq .tick svg{ flex:0 0 20px; width:20px; height:20px; color:var(--orama-brand-bright); margin-top:2px; }
.orama-seq .panel{ background:linear-gradient(180deg,var(--orama-surface-2),var(--orama-surface));
  border:1px solid var(--orama-line); border-radius:16px; padding:20px; overflow:hidden; box-shadow:0 40px 90px -40px rgba(0,0,0,.8); }
.orama-seq .panel img{ width:100%; height:auto; display:block; border-radius:10px; }
/* paneles por defecto distintos */
.orama-seq .panel .seq-rec{ display:flex; flex-direction:column; gap:11px; }
.orama-seq .panel .seq-rec .row{ display:flex; justify-content:space-between; align-items:center; font-size:.9rem;
  background:rgba(255,255,255,.03); border:1px solid var(--orama-line-soft); border-radius:10px; padding:11px 14px; }
.orama-seq .panel .seq-rec .row.is-hi{ background:rgba(84,134,255,.08); border-color:rgba(84,134,255,.3); }
.orama-seq .panel .seq-rec .lbl{ color:var(--orama-muted); }
.orama-seq .panel .seq-rec .ok{ color:var(--orama-good); font-weight:600; }
.orama-seq .panel .seq-rec .auto{ color:var(--orama-brand-bright); font-weight:600; }
.orama-seq .panel .seq-kpis{ display:flex; gap:12px; margin-bottom:14px; }
.orama-seq .panel .seq-kpi{ flex:1; background:rgba(255,255,255,.03); border:1px solid var(--orama-line-soft); border-radius:11px; padding:12px 14px; }
.orama-seq .panel .seq-kpi .lbl{ font-size:.7rem; color:var(--orama-faint); text-transform:uppercase; letter-spacing:.05em; }
.orama-seq .panel .seq-kpi .val{ font-size:1.2rem; font-weight:700; margin-top:3px; color:var(--orama-text); }
.orama-seq .panel .seq-kpi .val.pos{ color:var(--orama-brand-bright); }

/* ---- Hover de cada panel (efecto especial distinto) ---- */
/* Barras: ecualizador (suben y bajan, en ola) */
.orama-seq .seq-fx-bars rect{ transform-box:fill-box; transform-origin:bottom; }
.orama-seq .panel:hover .seq-fx-bars rect{ animation:oseq-bar 2s ease-in-out infinite; }
.orama-seq .panel:hover .seq-fx-bars rect:nth-of-type(1){ animation-delay:0s; }
.orama-seq .panel:hover .seq-fx-bars rect:nth-of-type(2){ animation-delay:.18s; }
.orama-seq .panel:hover .seq-fx-bars rect:nth-of-type(3){ animation-delay:.36s; }
.orama-seq .panel:hover .seq-fx-bars rect:nth-of-type(4){ animation-delay:.54s; }
.orama-seq .panel:hover .seq-fx-bars rect:nth-of-type(5){ animation-delay:.72s; }
.orama-seq .panel:hover .seq-fx-bars rect:nth-of-type(6){ animation-delay:.9s; }
.orama-seq .panel:hover .seq-fx-bars rect:nth-of-type(7){ animation-delay:1.08s; }
@keyframes oseq-bar{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.5); } }
/* Forecast: punto que late + línea futura que fluye */
.orama-seq .seq-fx-forecast .seq-dot{ transform-box:fill-box; transform-origin:center; }
.orama-seq .panel:hover .seq-fx-forecast .seq-dot{ animation:oseq-pulse 1.4s ease-in-out infinite; }
@keyframes oseq-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.6); } }
.orama-seq .panel:hover .seq-fx-forecast .seq-future{ animation:oseq-flow 1s linear infinite; }
@keyframes oseq-flow{ to{ stroke-dashoffset:-16; } }
/* Conciliación: filas entran escalonadas */
.orama-seq .panel:hover .seq-fx-rec .row{ animation:oseq-row .6s var(--orama-ease) both; }
.orama-seq .panel:hover .seq-fx-rec .row:nth-child(1){ animation-delay:0s; }
.orama-seq .panel:hover .seq-fx-rec .row:nth-child(2){ animation-delay:.1s; }
.orama-seq .panel:hover .seq-fx-rec .row:nth-child(3){ animation-delay:.2s; }
@keyframes oseq-row{ from{ transform:translateX(-12px); opacity:.3; } to{ transform:none; opacity:1; } }
@media(prefers-reduced-motion:reduce){
  .orama-seq .panel:hover .seq-fx-bars rect,
  .orama-seq .panel:hover .seq-fx-forecast .seq-dot,
  .orama-seq .panel:hover .seq-fx-forecast .seq-future,
  .orama-seq .panel:hover .seq-fx-rec .row{ animation:none; }
}

/* ---- Modo SLIDE (entrada lateral) ---- */
.orama-seq.is-slide .orama-seq__track{ display:flex; flex-direction:column; gap:90px; max-width:1100px; margin:56px auto 0; }
.orama-seq.is-slide .orama-seq__item{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.orama-seq.is-slide .orama-seq__item.is-reverse .copy{ order:2; }
.orama-seq.is-slide .orama-seq__item.is-reverse .panel{ order:1; }
.orama-seq.is-slide .orama-seq__item .copy,.orama-seq.is-slide .orama-seq__item .panel{ opacity:0; transition:opacity .7s var(--orama-ease), transform .7s var(--orama-ease); }
.orama-seq.is-slide .orama-seq__item .copy{ transform:translateX(-44px); }
.orama-seq.is-slide .orama-seq__item .panel{ transform:translateX(44px); }
.orama-seq.is-slide .orama-seq__item.is-reverse .copy{ transform:translateX(44px); }
.orama-seq.is-slide .orama-seq__item.is-reverse .panel{ transform:translateX(-44px); }
.orama-seq.is-slide .orama-seq__item.in .copy,.orama-seq.is-slide .orama-seq__item.in .panel{ opacity:1; transform:none; }

/* ---- Fichas alternadas ESTÁTICAS (widget orama_zigzag): mismo look que .orama-seq, todas visibles, sin animación ---- */
.orama-zz__track{ display:flex; flex-direction:column; gap:90px; max-width:1100px; margin:48px auto 0; }
.orama-zz__item{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.orama-zz__item.is-reverse .copy{ order:2; }
.orama-zz__item.is-reverse .panel{ order:1; }
@media(max-width:820px){
  .orama-zz__track{ gap:48px; }
  .orama-zz__item{ grid-template-columns:1fr; gap:24px; }
  .orama-zz__item.is-reverse .copy{ order:1; }   /* en móvil el texto siempre arriba */
  .orama-zz__item.is-reverse .panel{ order:2; }
}

/* Conciliación (zigzag): feed de movimientos que se desplaza al hover (efecto scroll) */
.orama-seq .panel .zz-rec__win{ position:relative; max-height:200px; overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);
          mask:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent); }
.orama-seq .panel .zz-rec__track{ gap:0; will-change:transform; }
.orama-seq .panel .zz-rec__track .row{ margin-bottom:11px; }   /* margen uniforme → loop -50% sin saltos */
.orama-seq .panel:hover .zz-rec__track{ animation:zz-rec-scroll 9s linear infinite; }
@keyframes zz-rec-scroll{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@media (prefers-reduced-motion: reduce){ .orama-seq .panel:hover .zz-rec__track{ animation:none; } }

/* ---- Modo PINNED (tipo Apple/v6) ---- */
.orama-seq.is-pinned .orama-seq__pin{ position:relative; height:calc((var(--n,3) - 1) * 50vh + 100vh); }
.orama-seq.is-pinned .orama-seq__stage{ position:sticky; top:0; min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; gap:34px; overflow:hidden; padding:90px 0 40px; }
.orama-seq.is-pinned .orama-head{ margin-bottom:0; }
.orama-seq.is-pinned .orama-seq__viewport{ position:relative; width:100%; max-width:1100px; margin:0 auto; min-height:380px; }
/* Items apilados; el JS los mueve atados al scroll (scrub), como v6:
   entra desde la derecha (115%→0), el anterior sale por la izquierda (0→-115%). */
.orama-seq.is-pinned .orama-seq__pitem{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center;
  opacity:0; pointer-events:none; will-change:transform,opacity; }
.orama-seq.is-pinned .orama-seq__dots{ display:flex; gap:9px; justify-content:center; }
.orama-seq.is-pinned .orama-seq__dots button{ width:9px; height:9px; border-radius:50%; border:0; cursor:pointer; padding:0;
  background:rgba(124,162,255,.3); transition:background .25s, width .25s; }
.orama-seq.is-pinned .orama-seq__dots button.is-active{ background:var(--orama-brand-bright); width:26px; border-radius:5px; }

@media(max-width:820px){
  .orama-seq.is-slide .orama-seq__item{ grid-template-columns:1fr; gap:24px; }
  .orama-seq.is-slide .orama-seq__item.is-reverse .copy{ order:1; } .orama-seq.is-slide .orama-seq__item.is-reverse .panel{ order:2; }
  .orama-seq.is-slide .orama-seq__item .copy,.orama-seq.is-slide .orama-seq__item .panel{ transform:translateY(30px); }
  /* Pinned → en móvil se desactiva el pin: ítems apilados normales */
  .orama-seq.is-pinned .orama-seq__pin{ height:auto; }
  .orama-seq.is-pinned .orama-seq__stage{ position:static; min-height:0; display:block; padding:0; overflow:visible; }
  .orama-seq.is-pinned .orama-seq__viewport{ min-height:0; display:flex; flex-direction:column; gap:40px; }
  .orama-seq.is-pinned .orama-seq__pitem{ position:static; inset:auto; opacity:1; transform:none; grid-template-columns:1fr; gap:22px; pointer-events:auto; }
  .orama-seq.is-pinned .orama-seq__dots{ display:none; }
  .orama-seq.is-pinned .orama-head{ margin-bottom:30px; }
}
@media(prefers-reduced-motion:reduce){
  .orama-seq.is-slide .orama-seq__item .copy,.orama-seq.is-slide .orama-seq__item .panel{ opacity:1; transform:none; }
}

/* Marquee — scroll infinito automático, 6 logos visibles a la vez */
.orama-logos--marquee{ display:block; overflow:hidden; container-type:inline-size; gap:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.orama-logos--marquee .orama-logos__track{ display:flex; width:max-content; align-items:center;
  animation:orama-marquee 45s linear infinite; will-change:transform; }
.orama-logos--marquee:hover .orama-logos__track{ animation-play-state:paused; }
.orama-logos--marquee .orama-logos__item{ flex:0 0 calc(100cqw / 6); display:flex; align-items:center; justify-content:center; }
.orama-logos--marquee .orama-logos__item img{ max-height:var(--logo-h,46px); max-width:74%; height:auto; width:auto; }
@keyframes orama-marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media(max-width:768px){ .orama-logos--marquee .orama-logos__item{ flex-basis:calc(100cqw / 3); } }
@media(prefers-reduced-motion:reduce){ .orama-logos--marquee .orama-logos__track{ animation:none; } }

/* ---- Anular el botón "rosa" (#c36) por defecto del tema en toda la web ----
   brand.css carga tras el tema padre, así que esto gana al rosa; los botones
   propios de Orama (.pr-toggle, .orama-clients__arrow, etc.) llevan su CSS
   después y mantienen su estilo. Ver [[orama-hover-colores]]. */
[type=button]:not([class]), [type=submit]:not([class]), button:not([class]){ background-color:transparent; border-color:transparent; color:inherit; }
[type=button]:not([class]):hover, [type=submit]:not([class]):hover, button:not([class]):hover,
[type=button]:not([class]):focus, [type=submit]:not([class]):focus, button:not([class]):focus{ background-color:transparent; color:inherit; text-decoration:none; }

/* Enlaces "rosa" (#c36) por defecto del tema → azul de marca en enlaces sin clase propia */
a:not([class]){ color:var(--orama-brand); }
a:not([class]):hover{ color:var(--orama-brand-bright); }

/* ---- Bloques auxiliares de las landings (banks / caso de éxito / relacionados) ---- */
.lp-banks{ display:flex; flex-wrap:wrap; gap:10px; max-width:1000px; margin:0 auto; justify-content:center; }
.lp-banks span{ background:rgba(255,255,255,.04); border:1px solid var(--orama-line); border-radius:8px; padding:8px 14px; font-size:.9rem; color:var(--orama-muted); }
.lp-case{ max-width:1000px; margin:0 auto; background:linear-gradient(160deg,var(--orama-surface-2),var(--orama-surface)); border:1px solid var(--orama-line); border-radius:16px; padding:28px 32px; color:var(--orama-text); font-size:1.12rem; line-height:1.5; text-align:center; }
.lp-related{ max-width:1000px; margin:0 auto; background:rgba(255,255,255,.02); border:1px solid var(--orama-line); border-radius:14px; padding:22px 26px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
/* 20-10-2026: enlaces en pastillas, con la flecha dibujada por CSS (sin «→» en el texto) */
.lp-related strong{ flex-basis:100%; display:block; margin:0 0 4px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--orama-muted); }
.lp-related a{ display:inline-flex; align-items:center; gap:10px; margin:0; padding:9px 16px; border:1px solid var(--orama-line); border-radius:999px; background:rgb(255 255 255 / .03); color:var(--orama-text); font-weight:600; font-size:.92rem; line-height:1.2; transition:border-color .2s,background .2s,color .2s; }
.lp-related a::after{ content:""; width:6px; height:6px; border-top:2px solid var(--orama-brand-bright); border-right:2px solid var(--orama-brand-bright); transform:rotate(45deg); }
.lp-related a:hover{ border-color:var(--orama-brand-bright); background:rgb(84 134 255 / .1); color:#fff; }

/* ===== Paneles SVG del zigzag por tema (cada uno con hover) ===== */
/* escenarios: las 3 líneas (up/base/down) se dibujan al hover */
.orama-seq .panel:hover .zz-scn{ animation:zz-scn-draw 1s var(--orama-ease) both; }
.orama-seq .panel:hover .zz-scn-base{ animation-delay:.12s; }
.orama-seq .panel:hover .zz-scn-dn{ animation-delay:.24s; }
@keyframes zz-scn-draw{ from{ stroke-dasharray:1; stroke-dashoffset:1; opacity:.2; } to{ stroke-dasharray:2 6; stroke-dashoffset:0; opacity:1; } }
/* posición de caja: barras crecen al hover */
.zz-fx-caja .zz-caja-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.zz-fx-caja .zz-caja-top .lbl{ color:var(--orama-faint); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.zz-fx-caja .zz-caja-top .val{ color:var(--orama-text); font-size:1.5rem; font-weight:700; }
.zz-fx-caja .zz-caja-rows .row{ display:grid; grid-template-columns:92px 1fr auto; align-items:center; gap:12px; padding:7px 0; font-size:.85rem; color:var(--orama-muted); }
.zz-fx-caja .zz-caja-rows i{ height:8px; border-radius:4px; background:linear-gradient(90deg,var(--orama-brand),var(--orama-brand-bright)); width:0; transition:width .7s var(--orama-ease); }
.orama-seq .panel:hover .zz-fx-caja .zz-caja-rows i{ width:var(--w); }
.zz-fx-caja .zz-caja-rows .amt{ color:var(--orama-text); font-variant-numeric:tabular-nums; }
/* IA: puntos "escribiendo" + respuesta aparece al hover */
.zz-fx-ia{ display:flex; flex-direction:column; gap:14px; }
.zz-fx-ia .zz-ia-q{ align-self:flex-end; max-width:82%; background:rgba(84,134,255,.16); border:1px solid rgba(84,134,255,.3); color:var(--orama-text); padding:11px 14px; border-radius:14px 14px 4px 14px; font-size:.9rem; }
.zz-fx-ia .zz-ia-a{ align-self:flex-start; max-width:88%; background:rgba(255,255,255,.04); border:1px solid var(--orama-line); color:var(--orama-muted); padding:11px 14px; border-radius:14px 14px 14px 4px; font-size:.9rem; display:flex; gap:8px; align-items:center; }
.zz-fx-ia .zz-ia-a b{ color:var(--orama-brand-bright); }
.zz-fx-ia .zz-ia-txt{ opacity:0; transition:opacity .3s ease; }
.zz-fx-ia .zz-ia-typing{ display:inline-flex; gap:4px; }
.zz-fx-ia .zz-ia-typing span{ width:6px; height:6px; border-radius:50%; background:var(--orama-brand-bright); opacity:.5; }
.orama-seq .panel:hover .zz-fx-ia .zz-ia-typing span{ animation:zz-ia-blink 1s infinite; }
.orama-seq .panel:hover .zz-fx-ia .zz-ia-typing span:nth-child(2){ animation-delay:.15s; }
.orama-seq .panel:hover .zz-fx-ia .zz-ia-typing span:nth-child(3){ animation-delay:.3s; }
.orama-seq .panel:hover .zz-fx-ia .zz-ia-txt{ opacity:1; transition-delay:.45s; }
@keyframes zz-ia-blink{ 0%,100%{ opacity:.4; transform:translateY(0);} 50%{ opacity:1; transform:translateY(-3px);} }
/* bancos: chips encienden en cascada al hover */
.zz-fx-bancos .zz-bank-grid{ display:flex; flex-wrap:wrap; gap:9px; }
.zz-fx-bancos .zz-bank-grid span{ background:rgba(255,255,255,.04); border:1px solid var(--orama-line); border-radius:8px; padding:8px 12px; font-size:.82rem; color:var(--orama-muted); }
.orama-seq .panel:hover .zz-fx-bancos .zz-bank-grid span{ animation:zz-bank-on .45s var(--orama-ease) both; animation-delay:var(--d); }
@keyframes zz-bank-on{ to{ border-color:rgba(84,134,255,.5); color:#fff; background:rgba(84,134,255,.10); } }
@media (prefers-reduced-motion: reduce){ .orama-seq .panel:hover *{ animation:none!important; } }

/* Conciliación · variante "emparejar": las líneas se trazan al hover */
.zz-fx-match .zz-match{ stroke-dasharray:1; stroke-dashoffset:1; }
.orama-seq .panel:hover .zz-fx-match .zz-match{ animation:zz-match-draw .7s var(--orama-ease) forwards; }
.orama-seq .panel:hover .zz-fx-match .zz-match:nth-child(2){ animation-delay:.15s; }
.orama-seq .panel:hover .zz-fx-match .zz-match:nth-child(3){ animation-delay:.3s; }
@keyframes zz-match-draw{ to{ stroke-dashoffset:0; } }
/* Conciliación · variante "tasa": el anillo se rellena al hover */
.zz-fx-rate .zz-rate-foot{ text-align:center; color:var(--orama-muted); font-size:.85rem; margin-top:6px; }
.zz-fx-rate .zz-rate-foot b{ color:var(--orama-brand-bright); }
.orama-seq .panel:hover .zz-fx-rate .zz-rate-arc{ animation:zz-rate-fill 1.1s var(--orama-ease) forwards; }
@keyframes zz-rate-fill{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:.02; } }

/* Conciliación · variante "palabras clave": keyword del movimiento parpadea + partida que casa se ilumina */
.zz-fx-kw{ display:flex; align-items:center; gap:14px; }
.zz-fx-kw .zz-kw-lbl{ display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.1em; color:var(--orama-faint); margin-bottom:9px; }
.zz-fx-kw .zz-kw-mov{ flex:1.1; }
.zz-fx-kw .zz-kw-desc{ background:rgba(255,255,255,.04); border:1px solid var(--orama-line); border-radius:11px; padding:14px; font-size:.9rem; color:var(--orama-text); line-height:1.5; }
.zz-fx-kw .zz-kw{ color:var(--orama-brand-bright); font-weight:700; }
.zz-fx-kw .zz-kw-arrow{ color:var(--orama-muted); flex:0 0 auto; }
.zz-fx-kw .zz-kw-arrow svg{ width:24px; height:24px; }
.zz-fx-kw .zz-kw-list{ flex:1; display:flex; flex-direction:column; gap:4px; }
.zz-fx-kw .zz-kw-list .row{ padding:8px 12px; border-radius:8px; font-size:.86rem; color:var(--orama-muted); border:1px solid transparent; transition:all .25s ease; }
.zz-fx-kw .zz-hit b{ color:var(--orama-brand-bright); }
.orama-seq .panel:hover .zz-fx-kw .zz-kw{ animation:zz-blink 1.1s infinite; }
.orama-seq .panel:hover .zz-fx-kw .zz-hit{ background:rgba(84,134,255,.10); border-color:rgba(84,134,255,.4); color:var(--orama-text); }
@keyframes zz-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

/* EL PRINCIPAL: cuadro de tesorería (partidas × meses; saldos verde/ámbar que se rellenan al hover) */
.zz-fx-cuadro .zz-cu-grid{ display:flex; flex-direction:column; gap:8px; font-variant-numeric:tabular-nums; }
.zz-fx-cuadro .zz-cu-r{ display:grid; grid-template-columns:74px repeat(5,1fr); align-items:center; gap:8px; }
.zz-fx-cuadro .zz-cu-head span{ font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--orama-faint); text-align:right; }
.zz-fx-cuadro .zz-cu-head .rl{ text-align:left; }
.zz-fx-cuadro .zz-cu-r .rl{ font-size:.82rem; color:var(--orama-muted); }
.zz-fx-cuadro .zz-cu-r b{ text-align:right; font-size:.86rem; font-weight:600; color:var(--orama-muted); }
.zz-fx-cuadro .zz-cu-r b.pos{ color:var(--orama-good); }
.zz-fx-cuadro .zz-cu-saldo{ margin-top:4px; padding-top:8px; border-top:1px solid var(--orama-line); }
.zz-fx-cuadro .zz-cu-saldo b{ color:var(--orama-text); font-weight:700; border-radius:7px; padding:6px 4px; background:transparent; transition:background .35s var(--orama-ease); }
.orama-seq .panel:hover .zz-fx-cuadro .cell{ animation:zz-cu-fill .5s var(--orama-ease) forwards; animation-delay:calc(var(--i) * .1s); }
@keyframes zz-cu-fill{ to{ } }
.orama-seq .panel:hover .zz-fx-cuadro .cell.g{ background:rgba(91,185,140,.16); }
.orama-seq .panel:hover .zz-fx-cuadro .cell.a{ background:rgba(224,176,90,.18); color:#F1C27A; }

/* Hero con mockup por tema (reusa los paneles del zigzag dentro de .hero-visual) */
.orama-hero-w .hero-mock{ width:100%; }
.orama-hero-w .hero-mock .panel{ min-height:260px; display:flex; flex-direction:column; justify-content:center; }
.orama-hero-w .hero-mock .panel .app-pad{ padding:6px 0; }

/* ============================================================
   Página "Quiénes somos" (qs-*) — secciones a medida
   ============================================================ */
/* Hero: bloque de vídeo + tarjeta de prensa */
.qs-hero-media{ display:grid; grid-template-columns:1.7fr 1fr; gap:26px; align-items:stretch; margin-top:14px; }
.qs-video{ position:relative; border-radius:var(--orama-radius); overflow:hidden; border:1px solid var(--orama-line);
  background:linear-gradient(160deg,var(--orama-surface),var(--orama-bg-2)); min-height:360px; display:block; text-decoration:none; }
.qs-video img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.92; }
.qs-video__play{ position:absolute; inset:0; margin:auto; width:76px; height:76px; border-radius:50%;
  display:grid; place-items:center; background:rgba(10,19,34,.5); border:1px solid rgba(124,162,255,.4);
  backdrop-filter:blur(6px); transition:transform .3s var(--orama-ease), background .3s; }
.qs-video:hover .qs-video__play{ transform:scale(1.08); background:rgba(84,134,255,.35); }
.qs-video__play svg{ fill:#7CA2FF; margin-left:5px; }
.qs-press{ border-radius:var(--orama-radius); border:1px solid var(--orama-line);
  background:rgba(21,36,63,.6); padding:30px; display:flex; flex-direction:column; justify-content:center; gap:16px; }
.qs-press__quote{ font-size:1.26rem; font-weight:700; line-height:1.32; color:var(--orama-text); }
.qs-press__src{ font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--orama-muted); }
.qs-press a{ color:var(--orama-brand-bright); font-size:.92rem; font-weight:600; text-decoration:none; }
.qs-press a:hover{ text-decoration:underline; }
@media(max-width:820px){ .qs-hero-media{ grid-template-columns:1fr; } .qs-video{ min-height:230px; } }

/* Historia / año destacado */
.qs-history{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; justify-content:center; }
.qs-year{ font-size:clamp(4.5rem,14vw,10rem); font-weight:800; line-height:.9; letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff 40%,#7CA2FF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.qs-history__text{ font-size:1.3rem; color:var(--orama-muted); max-width:22ch; }
@media(max-width:640px){ .qs-history{ gap:16px; } .qs-history__text{ text-align:center; } }

/* Orama en los medios */
.qs-media-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.qs-media-card{ border-radius:var(--orama-radius); border:1px solid var(--orama-line);
  background:rgba(21,36,63,.5); padding:26px 22px; display:flex; flex-direction:column; gap:14px;
  text-decoration:none; transition:transform .3s var(--orama-ease), border-color .3s; }
.qs-media-card:hover{ transform:translateY(-4px); border-color:rgba(124,162,255,.35); }
.qs-media-card__logo{ font-family:Georgia,'Times New Roman',serif; font-size:1.4rem; font-weight:700; color:var(--orama-brand-soft); letter-spacing:.02em; }
.qs-media-card__title{ font-size:.98rem; color:var(--orama-muted); line-height:1.5; }
@media(max-width:900px){ .qs-media-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .qs-media-grid{ grid-template-columns:1fr; } }

/* 20-10-2026: utilidad «orama-cards-igual» (clase CSS de la sección en Elementor): las tarjetas de una misma fila miden lo mismo de alto */
.orama-cards-igual .elementor-column,.orama-cards-igual .elementor-widget-wrap{align-self:stretch}
.orama-cards-igual .elementor-widget-wrap,.orama-cards-igual .elementor-widget-orama_card,.orama-cards-igual .elementor-widget-orama_card>.elementor-widget-container,.orama-cards-igual .orama-card{height:100%;box-sizing:border-box}

/* 20-10-2026: Capterra en los héroes: estrellas, nota y frase más juntas (el SVG trae aire a los lados) */
.rating .cap-badge{gap:6px}
.rating .cap-mark{margin-left:calc(var(--cap-h,40px) * -.68);margin-right:calc(var(--cap-h,40px) * -.15)}

/* === 22-10-2026 · Testimonios: mismo alto y nombre / cargo / empresa en tres filas === */
.orama-clients__track{ align-items:stretch; }
.orama-clients__track > .orama-client{ height:auto; }
.orama-client__pinfo > span, .orama-client__pinfo > .orama-client__empresa{ display:block; }
/* === 22-10-2026 · Consejo CONS2610221032415db: en móvil, 32 px arriba y abajo en cada sección de página (≈64 px entre bloques); el hero conserva su ajuste === */
@media (max-width:767px){
  [data-elementor-type="wp-page"] > .elementor-top-section:not(:first-child){ padding-top:32px !important; padding-bottom:32px !important; }
}

/* === 22-10-2026 · Tarjetas de una misma fila, siempre del mismo alto (sin tener que poner «orama-cards-igual» a mano).
   Solo en columnas cuyo único widget es una tarjeta, para no estirar columnas con varios elementos. === */
.elementor-column:has(> .elementor-widget-wrap > .elementor-widget-orama_card:only-child){ align-self:stretch; }
.elementor-column > .elementor-widget-wrap:has(> .elementor-widget-orama_card:only-child){ height:100%; }
.elementor-widget-wrap > .elementor-widget-orama_card:only-child,
.elementor-widget-wrap > .elementor-widget-orama_card:only-child > .elementor-widget-container,
.elementor-widget-wrap > .elementor-widget-orama_card:only-child .orama-card{ height:100%; box-sizing:border-box; }