/* ============================================================
   THE BALLER COMPANY — menú de servicios
   Apertura con fondo desenfocado, servicios que entran en cascada
   y panel de vista previa que cambia con cada servicio.
   ============================================================ */
.mega-backdrop{position:fixed;inset:0;z-index:60;background:rgba(26,19,21,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;pointer-events:none}
html.mega-open .mega-backdrop{opacity:1;visibility:visible}

.nav-links .mega{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto auto;gap:0;padding:0;overflow:hidden;
  border-radius:26px;box-shadow:0 50px 120px -40px rgba(26,19,21,.6);
  clip-path:inset(0 0 100% 0 round 26px);transform:translateY(-10px);
  transition:clip-path .55s var(--ease),transform .55s var(--ease),opacity .3s,visibility .55s}
.has-mega:hover > .mega,.has-mega:focus-within > .mega,.has-mega.open > .mega{clip-path:inset(0 0 0 0 round 26px);transform:none;opacity:1;visibility:visible}
.js .has-mega:not(.open) > .mega{opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0 round 26px);transform:translateY(-10px)}
.has-mega.open > a.top .caret{transform:rotate(180deg)}

.mega-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 18px;padding:22px 22px 14px}
.mega h5{display:flex;align-items:center;gap:8px;margin:4px 10px 10px;padding-bottom:10px;border-bottom:1px solid var(--line);position:relative}
.mega h5 span{font-family:var(--mono);font-size:10px;color:var(--wine);letter-spacing:0}
.mega h5::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--wine);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .7s var(--ease) calc(.15s + var(--c) * .08s)}
.has-mega.open h5::after,.has-mega:hover h5::after{transform:scaleX(1)}
.mega ul li{opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .55s var(--ease);
  transition-delay:calc(.12s + var(--c,0) * .06s + var(--i) * .045s)}
.mega-col{--c:0}
.has-mega.open .mega ul li,.has-mega:hover .mega ul li,.has-mega:focus-within .mega ul li{opacity:1;transform:none}
.mega ul a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 12px;align-items:center;padding:9px 10px;border-radius:14px;position:relative;
  transition:background .25s,transform .35s var(--ease)}
.mega ul a:hover,.mega ul a:focus-visible,.mega ul a.is-hot{background:var(--wine-tint);transform:translateX(4px)}
.mega ul a::after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-top:1.6px solid var(--wine);border-right:1.6px solid var(--wine);
  transform:translate(-6px,-50%) rotate(45deg);opacity:0;transition:opacity .25s,transform .35s var(--ease)}
.mega ul a:hover::after,.mega ul a.is-hot::after{opacity:1;transform:translate(0,-50%) rotate(45deg)}
.mg-ico{grid-row:span 2;width:34px;height:34px;display:block;transition:transform .45s var(--ease)}
.mg-ico svg{width:100%;height:100%;display:block}
.mega ul a:hover .mg-ico,.mega ul a.is-hot .mg-ico{transform:scale(1.12) rotate(-6deg)}
.mega ul b{font-size:14.5px;font-weight:600}
.mega ul span{font-size:12.5px}

/* Vista previa */
.mega-preview{grid-row:1 / span 2;grid-column:2;position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:100%;
  padding:24px;background:var(--night);color:#F5EFF0;isolation:isolate}
.mp-mesh{position:absolute;inset:-40%;z-index:-2;background:
  radial-gradient(closest-side at 30% 30%,rgba(201,74,88,.55),transparent),
  radial-gradient(closest-side at 70% 70%,rgba(125,43,52,.7),transparent);animation:mpmesh 12s linear infinite}
@keyframes mpmesh{to{transform:rotate(360deg)}}
.mp-orbit{position:absolute;right:-60px;top:-60px;width:240px;height:240px;z-index:-1}
.mp-orbit i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.14)}
.mp-orbit i:nth-child(2){inset:34px;border-style:dashed;animation:spin 18s linear infinite}
.mp-orbit i:nth-child(3){inset:74px;background:rgba(255,255,255,.04)}
.mp-in{display:flex;flex-direction:column;gap:10px;width:100%}
.mp-in.swap > *{animation:mpin .5s var(--ease) both}
.mp-in.swap > :nth-child(2){animation-delay:.04s}
.mp-in.swap > :nth-child(3){animation-delay:.08s}
.mp-in.swap > :nth-child(4){animation-delay:.12s}
.mp-in.swap > :nth-child(5){animation-delay:.16s}
.mp-in.swap > :nth-child(6){animation-delay:.2s}
@keyframes mpin{from{opacity:0;transform:translateY(12px)}}
.mp-group{color:#B3A7A9}
.mp-logos{display:flex;gap:6px;margin-bottom:4px}
.mp-logos svg{width:40px;height:40px;display:block;border-radius:11px;box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.mp-in.swap .mp-logos svg{animation:mplogo .55s var(--ease) both}
.mp-in.swap .mp-logos svg:nth-child(2){animation-delay:.06s}
.mp-in.swap .mp-logos svg:nth-child(3){animation-delay:.12s}
.mp-in.swap .mp-logos svg:nth-child(4){animation-delay:.18s}
@keyframes mplogo{from{opacity:0;transform:scale(.4) rotate(-20deg)}}
.mp-title{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.035em;line-height:1.1}
.mp-text{font-size:13.5px;line-height:1.5;color:#CFC4C6}
.mp-stat{align-self:flex-start;padding:5px 11px;border-radius:100px;border:1px solid rgba(255,255,255,.18);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:#F5EFF0}
.mp-link{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-size:13.5px;font-weight:500;color:var(--wine-light);transition:gap .3s}
.mega-preview:hover .mp-link{gap:12px}

.mega-foot{grid-column:1;display:flex;flex-wrap:wrap;gap:6px 22px;padding:14px 32px 18px;border-top:1px solid var(--line);background:var(--paper-2)}
.mega-foot a{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--ink-2);transition:color .25s,gap .3s}
.mega-foot a:hover{color:var(--wine);gap:11px}

@media(prefers-reduced-motion:reduce){
  .nav-links .mega,.mega ul li,.mega h5::after{transition:none}
  .mp-mesh,.mp-orbit i,.mp-in.swap *{animation:none!important}
}

/* Icono único de la vista previa */
.mp-logos svg{width:52px;height:52px;border-radius:15px}

/* ---------- Pestañas del menú: resaltado deslizante ---------- */
.nav-pill{position:absolute;left:0;top:0;height:38px;border-radius:11px;z-index:0;background:var(--wine-tint);pointer-events:none;
  opacity:0;transform:translateX(0);transition:transform .45s var(--ease),width .45s var(--ease),opacity .25s}
.nav-links.pill-on .nav-pill{opacity:1}
.nav-links.has-pill > li{position:relative;z-index:1}
.nav-links.has-pill > li.has-mega{position:static}
.nav-links.has-pill > li.has-mega > a.top{position:relative;z-index:1}
.nav-links.has-pill a.top:hover,.nav-links.has-pill li:hover > a.top,.nav-links.has-pill li:focus-within > a.top{background:transparent;color:var(--wine-deep)}
.nav-links a.top{position:relative}
.nav-links a.top::before{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:1.5px;border-radius:2px;background:var(--wine);
  transform:scaleX(0);transition:transform .4s var(--ease)}
.nav-links a.top:hover::before,.nav-links a.top:focus-visible::before{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.nav-pill{transition:opacity .2s}}

/* ============================================================
   Menú móvil
   ============================================================ */
.burger{position:relative;z-index:71;transition:border-color .3s,background .3s}
.bg-lines{position:relative;display:block;width:18px;height:14px}
.bg-lines i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--ink);transition:transform .45s var(--ease),opacity .25s,top .45s var(--ease)}
.bg-lines i:nth-child(1){top:0}
.bg-lines i:nth-child(2){top:6px}
.bg-lines i:nth-child(3){top:12px}
.burger[aria-expanded="true"]{background:var(--ink);border-color:var(--ink)}
.burger[aria-expanded="true"] .bg-lines i{background:#fff}
.burger[aria-expanded="true"] .bg-lines i:nth-child(1){top:6px;transform:rotate(45deg)}
.burger[aria-expanded="true"] .bg-lines i:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded="true"] .bg-lines i:nth-child(3){top:6px;transform:rotate(-45deg)}

.sheet{padding:0;background:var(--paper);clip-path:inset(0 0 100% 0);transform:none;
  transition:clip-path .55s var(--ease),opacity .3s,visibility .55s}
.sheet[data-open]{clip-path:inset(0 0 0 0)}
.sheet-in{min-height:100%;display:flex;flex-direction:column;padding:10px var(--pad) calc(28px + env(safe-area-inset-bottom))}
.sheet ul{list-style:none;margin:0;padding:0}
.sheet-main > li{border-bottom:1px solid var(--line);opacity:0;transform:translateY(16px);
  transition:opacity .45s var(--ease),transform .55s var(--ease);transition-delay:calc(.08s + var(--k) * .05s)}
.sheet[data-open] .sheet-main > li,.sheet[data-open] .sheet-foot{opacity:1;transform:none}
.sheet-link,.sheet-acc > summary{display:flex;align-items:center;gap:14px;padding:18px 2px;font-family:var(--display);font-size:26px;font-weight:600;
  letter-spacing:-.035em;color:var(--ink);cursor:pointer;list-style:none}
.sheet-acc > summary::-webkit-details-marker{display:none}
.sm-n{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:0;color:var(--wine);min-width:18px}
.sm-t{flex:1}
.sm-arrow{color:var(--ink-3);transition:transform .35s var(--ease),color .3s}
.sheet-link:active .sm-arrow{transform:translateX(4px);color:var(--wine)}
.sheet a[aria-current="page"] .sm-t,.sheet-link[aria-current="page"] .sm-t{color:var(--wine)}
.sm-plus{position:relative;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);transition:background .3s,border-color .3s,transform .45s var(--ease)}
.sm-plus::before,.sm-plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;margin:-.8px 0 0 -6px;border-radius:2px;background:var(--ink);transition:transform .45s var(--ease)}
.sm-plus::after{transform:rotate(90deg)}
.sheet-acc[open] .sm-plus{background:var(--wine);border-color:var(--wine);transform:rotate(180deg)}
.sheet-acc[open] .sm-plus::before,.sheet-acc[open] .sm-plus::after{background:#fff}
.sheet-acc[open] .sm-plus::after{transform:rotate(0)}
.sheet-groups{display:flex;flex-direction:column;gap:18px;padding:2px 0 22px}
.sheet-acc[open] .sheet-groups{animation:sheetgroups .5s var(--ease)}
@keyframes sheetgroups{from{opacity:0;transform:translateY(-8px)}}
.sheet-groups h4{margin:0 0 6px;font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.sheet-groups ul{display:grid;grid-template-columns:1fr;gap:2px}
.sheet-groups a{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 0;border-radius:12px;font-size:15.5px;font-weight:500;color:var(--ink-2)}
.sheet-groups a svg{flex:none;width:32px;height:32px}
.sheet-groups a:active{background:var(--wine-tint)}
.sheet-all{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--wine)}
.sheet-groups a.sheet-all{color:var(--wine);font-size:14.5px;margin-top:4px}
.sheet-groups a.sheet-all svg{width:14px;height:14px;padding:0;background:none;border:0;transition:transform .3s var(--ease)}
.sheet-groups a.sheet-all:active svg{transform:translateX(3px)}
.sheet-foot{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;transform:translateY(16px);
  transition:opacity .45s var(--ease) .4s,transform .55s var(--ease) .4s}
.sheet-foot .btn{width:100%;justify-content:center;margin-top:0}
.sheet-mail{font-size:14px;color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){.sheet,.sheet-main > li,.sheet-foot{transition:opacity .2s}}
.sheet-acc > summary[aria-current="page"] .sm-t{color:var(--wine)}

/* ============================================================
   Ajustes generales para móvil
   ============================================================ */
@media(max-width:640px){
  /* Etiquetas pequeñas legibles */
  .seq-tag,.ln-tag,.ph-when,.aud-n,.post .meta,.post .cat,.meta-row .cat,.kpi small,.case-meta b,.dow,.ab-tag,.win-badge,.load-chip,
  .ln-share,.lab-gate span,.price-tag,.ceo span:not(.ceo-avatar),.area-ba .mono,.case-tags span{font-size:11px}
  /* Zonas táctiles más cómodas en enlaces sueltos */
  .link,.foot a.foot-mail,.card-more,.seqx-more{padding-block:8px}
  .foot ul a{display:inline-block;padding-block:5px}
  /* Medidor de SEO para IA */
  .gm-row{grid-template-columns:80px 1fr 34px}
}
@media(max-width:600px){
  /* Botones de cabecera a ancho completo */
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{justify-content:center}
  /* Motor de canales: los avisos van debajo, sin tapar el centro */
  .hero .engine-feed{position:relative;right:auto;bottom:auto;width:100%;margin-top:6px}
  .hero .engine-feed .ef-item.in:nth-child(3){display:none}
  /* Servicios de portada: los canales no se salen de la tarjeta */
  .pl-visual{--m:.68}
  /* Órbita de la página de servicios */
  .orbit .oc{transform:rotate(var(--a)) translateX(33cqw)}
  .orbit .r2 .oc{transform:rotate(var(--a)) translateX(19cqw)}
  .orbit .oc span{font-size:10.5px;padding:5px 9px;gap:5px}
  .orbit .oc span i{display:none}
  /* Barra de áreas de servicios sin cortes */
  .pillbar a{padding:8px 11px;font-size:13px}
}
@media(max-width:960px){
  /* Panel de operaciones (software): avisos encima y debajo, sin tapar la tarjeta */
  .ops{display:flex;flex-direction:column;gap:10px}
  .ops-chip{position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;align-self:flex-start;animation:none}
  .ops-chip.c1{order:-1}
  .ops-chip.c2{align-self:flex-end}
}

/* ---------- Móvil: títulos, metadatos y tablas ---------- */
@media(max-width:600px){
  /* Los títulos por líneas fluyen como texto normal para no dejar palabras sueltas */
  .js .lines > span{display:inline;overflow:visible;padding:0}
  .js .lines i{display:inline;transform:none;opacity:0;transition:opacity .9s var(--ease);transition-delay:var(--d,0ms)}
  .js .lines.in i{opacity:1}
  .meta-row > span:nth-child(3){display:none}
  .meta-row{column-gap:12px;row-gap:6px}

  /* Tablas: cada fila se convierte en una tarjeta */
  .table-wrap:has(table.stackable){overflow:visible;border:0;background:none;border-radius:0}
  table.cmp.stackable{min-width:0;display:block;font-size:14px}
  table.cmp.stackable thead{display:none}
  table.cmp.stackable tbody{display:grid;gap:10px}
  table.cmp.stackable tr{display:block;border:1px solid var(--line);border-radius:var(--r-md,14px);background:var(--paper);overflow:hidden}
  table.cmp.stackable tbody th{display:block;width:auto;padding:13px 16px;background:var(--paper-2);border-bottom:1px solid var(--line);
    font-family:var(--display);font-weight:600;letter-spacing:-.01em}
  table.cmp.stackable td{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 16px;text-align:right;border-bottom:1px solid var(--line)}
  table.cmp.stackable td:last-child{border-bottom:0}
  table.cmp.stackable td::before{content:attr(data-label);flex:0 0 42%;text-align:left;font-size:12.5px;color:var(--ink-3);font-weight:500}
  table.cmp.stackable td:not([data-label])::before{display:none}
  table.cmp.stackable td:not([data-label]){text-align:left}
  table.cmp.stackable td.hl::before{color:var(--wine)}
  table.cmp.stackable td:not(.c){display:block;text-align:left}
  table.cmp.stackable td:not(.c)::before{display:block;margin-bottom:3px}
}
@media(max-width:600px){
  .ba-l{flex-direction:column;align-items:flex-start;gap:2px}
  .ba-l b{white-space:nowrap}
}
@media(min-width:601px) and (max-width:960px){
  .hero .engine-feed{position:relative;right:auto;bottom:auto;left:auto;width:min(100%,420px);margin:10px auto 0}
}

/* ---------- Precios en páginas de servicio ---------- */
.price-grid.p3{grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.price-grid.p3{grid-template-columns:1fr;max-width:520px;margin-inline:auto;row-gap:22px}}
.price-note{margin-top:22px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.price-note .link{font-size:inherit}
@media(max-width:600px){
  /* Tarjetas de casos: sin hueco vacío entre el texto y la cifra */
  .case{min-height:0}
  .case .case-foot{margin-top:22px}
}