/* ============================================================
   software-empresas.css — estilos exclusivos de public/software-empresas.php
   Cargada solo en esta vista vía $pageStyles (ver header.php).

   Identidad propia: a diferencia de dominios-correos.php / hosting-vps.php
   / registro-dominios.php (hero oscuro con aurora + composición dividida
   texto/imagen), acá el protagonista son capturas REALES del producto
   (ThaSoft PRO en uso), así que el hero es claro y "apilado" (texto
   centrado arriba, captura grande abajo en marco de monitor), sin
   aurora ni grid técnico. El switcher de módulos (tabs) y el marco de
   dispositivo son técnicas que no se usaron en esas otras páginas.
   ============================================================ */

body.page-thasoft{background:var(--paper);}

:root{
  --ts-green:#1EA672;
  --ts-teal:#0E7C86;
}

.page-thasoft section{position:relative;}

.ts-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--crimson); background:rgba(234,33,81,.1); border:1px solid rgba(234,33,81,.25);
  padding:7px 15px; border-radius:20px; margin-bottom:20px;
}
.ts-eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--crimson); box-shadow:0 0 0 4px rgba(234,33,81,.22);}
.ts-eyebrow.is-light{color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2);}
.ts-eyebrow.is-light::before{background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.18);}

.reveal-scale{transform:scale(.94);}
.reveal-scale.in-view{transform:scale(1);}
@media (prefers-reduced-motion: reduce){ .reveal-scale{transform:none;} }


/* ============================================================
   HERO — claro, "apilado": texto centrado + captura grande debajo,
   con un mesh de manchas pastel muy suaves en vez de aurora oscura.
   ============================================================ */
.ts-hero{padding:150px 0 0; background:var(--paper); overflow:hidden;}

.ts-mesh{position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
.ts-mesh span{position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; will-change:transform;}
.ts-mesh .m1{width:480px; height:480px; top:-180px; left:-120px; background:radial-gradient(circle, var(--crimson-tint), transparent 70%); animation:tsDrift1 26s ease-in-out infinite alternate;}
.ts-mesh .m2{width:520px; height:520px; top:-120px; right:-160px; background:radial-gradient(circle, var(--navy-tint), transparent 70%); animation:tsDrift2 30s ease-in-out infinite alternate;}
.ts-mesh .m3{width:400px; height:400px; top:220px; left:38%; background:radial-gradient(circle, rgba(30,166,114,.16), transparent 70%); animation:tsDrift3 24s ease-in-out infinite alternate;}
@keyframes tsDrift1{from{transform:translate(0,0);} to{transform:translate(50px,40px);}}
@keyframes tsDrift2{from{transform:translate(0,0);} to{transform:translate(-40px,50px);}}
@keyframes tsDrift3{from{transform:translate(0,0);} to{transform:translate(30px,-30px);}}
@media (prefers-reduced-motion: reduce){ .ts-mesh span{animation:none;} }

/* puntos muy tenues repartidos por todo el hero, para que el fondo no
   se sienta vacío entre las manchas del mesh */
.ts-dotgrid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(30,44,81,.12) 1.5px, transparent 1.5px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 65% 55% at 50% 20%, #000 30%, transparent 100%);
  mask-image:radial-gradient(ellipse 65% 55% at 50% 20%, #000 30%, transparent 100%);
}

/* íconos flotantes ambientales, relacionados a los módulos del
   sistema — decoración pura, no interactúan con nada */
.ts-hero-floaters{position:absolute; inset:0; z-index:0; pointer-events:none;}
.ts-floater{
  position:absolute; width:52px; height:52px; border-radius:16px;
  display:flex; align-items:center; justify-content:center; font-size:19px;
  background:#fff; box-shadow:0 16px 32px -14px rgba(30,44,81,.25);
  animation:tsFloaterDrift 7s ease-in-out infinite;
}
.ts-floater-1{top:14%; left:9%; color:var(--crimson); animation-delay:0s;}
.ts-floater-2{top:62%; left:6%; color:var(--ts-teal); animation-delay:-2.3s;}
.ts-floater-3{top:20%; right:8%; color:var(--ts-green); animation-delay:-4.6s;}
.ts-floater-4{top:58%; right:5%; color:var(--navy); animation-delay:-1.4s;}
@keyframes tsFloaterDrift{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-16px) rotate(4deg);}}
@media (prefers-reduced-motion: reduce){ .ts-floater{animation:none;} }
@media (max-width:1080px){ .ts-hero-floaters{display:none;} }

.ts-hero-text{position:relative; z-index:1; max-width:720px; margin:0 auto; text-align:center;}
.ts-hero-text .badge-row{justify-content:center;}
.ts-hero-text h1{font-size:46px; line-height:1.16; color:var(--navy); letter-spacing:-.02em; margin-top:8px;}
.ts-hero-text .sub{font-size:16.5px; line-height:1.65; color:var(--muted); max-width:600px; margin:18px auto 0;}
.ts-hero-text .cta-row{justify-content:center; margin-top:30px;}

.ts-hero-trust{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin-top:32px;}
.ts-hero-trust span{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--muted);}
.ts-hero-trust svg{color:var(--ts-green); flex-shrink:0;}

/* ---------- captura en marco de monitor ---------- */
.ts-hero-visual{position:relative; z-index:1; max-width:920px; margin:56px auto 0; perspective:1400px;}
.ts-monitor{
  position:relative; border-radius:20px; overflow:hidden; padding:16px 16px 0;
  background:linear-gradient(160deg, #1B2440, var(--navy-ink));
  box-shadow:0 60px 100px -30px rgba(30,44,81,.45);
  transform-style:preserve-3d; transition:transform .25s ease-out; will-change:transform;
}
.ts-monitor::before{
  content:""; display:block; width:70px; height:8px; margin:0 auto 0; border-radius:0 0 6px 6px;
  background:rgba(255,255,255,.15);
}
.ts-monitor-screen{
  border-radius:10px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
  border-bottom:4px solid var(--navy-ink);
}
.ts-monitor-screen img{width:100%; height:100%; object-fit:cover; object-position:top; display:block;}
.ts-monitor-stand{width:160px; height:26px; margin:0 auto; background:linear-gradient(180deg, var(--navy-ink), #0C1020); clip-path:polygon(18% 0,82% 0,100% 100%,0% 100%);}
.ts-monitor-base{width:280px; height:10px; margin:0 auto; border-radius:6px; background:var(--navy-ink); box-shadow:0 14px 30px -10px rgba(30,44,81,.4);}

.ts-hero-float-badge{
  position:absolute; z-index:2;
  display:flex; align-items:center; gap:8px;
  padding:11px 17px; border-radius:14px; font-size:12.5px; font-weight:700; color:var(--navy);
  background:#fff; border:1px solid var(--line);
  box-shadow:0 20px 40px -16px rgba(30,44,81,.3);
  animation:tsFloatSlow 5.5s ease-in-out infinite;
}
.ts-hero-float-badge svg{color:var(--ts-green);}
.ts-badge-a{top:6%; left:-2%;}
.ts-badge-b{top:38%; right:-3%; animation-delay:-2.6s;}
@keyframes tsFloatSlow{0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);}}
@media (prefers-reduced-motion: reduce){ .ts-hero-float-badge{animation:none;} }

@media (max-width:900px){
  .ts-hero{padding:130px 0 0;}
  .ts-hero-text h1{font-size:32px;}
  .ts-badge-a, .ts-badge-b{display:none;}
  /* El marco del monitor no tenía NINGÚN ajuste para mobile: el pie y
     la base median 160px/280px fijos sin importar el ancho de
     pantalla, así que en un celular angosto quedaban desproporcionados
     frente a la pantalla del monitor (que sí se achica fluida) — se
     veía como una base ancha sostenida por un monitor chico, con
     mucho espacio vacío alrededor. Todo pasa a medidas relativas. */
  .ts-hero-visual{margin-top:36px; padding:0 20px;}
  .ts-monitor{border-radius:14px; padding:10px 10px 0;}
  .ts-monitor-screen{border-radius:7px;}
  .ts-monitor-stand{width:22%; height:16px;}
  .ts-monitor-base{width:40%; height:7px;}
}

/* ============================================================
   MÓDULOS — switcher de pestañas (fondo oscuro, contraste con el
   hero claro)
   ============================================================ */
.ts-modules{padding:120px 0 130px; background:linear-gradient(180deg, var(--navy) 0%, var(--navy-ink) 100%);}
.ts-modules .section-head h2{color:#fff;}
.ts-modules .section-head p{color:#B9C2E0;}

.ts-tabs-layout{display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; margin-top:52px; align-items:start;}
.ts-tab-list{display:flex; flex-direction:column; gap:12px;}
.ts-tab-btn{
  display:flex; align-items:center; gap:14px; text-align:left;
  padding:18px 20px; border-radius:16px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03); cursor:pointer;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.ts-tab-btn:hover{transform:translateX(4px);}
.ts-tab-btn.is-active{background:rgba(234,33,81,.12); border-color:rgba(234,33,81,.4);}
.ts-tab-icon{
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:17px;
  background:rgba(255,255,255,.06); color:#B9C2E0;
  transition:background .3s ease, color .3s ease;
}
.ts-tab-btn.is-active .ts-tab-icon{background:linear-gradient(135deg, var(--crimson), var(--crimson-dark)); color:#fff;}
.ts-tab-btn h3{font-size:15px; color:#fff; margin-bottom:3px;}
.ts-tab-btn p{font-size:12.5px; color:#8791AE; line-height:1.5;}

.ts-tab-panels{position:relative;}
.ts-tab-panel{display:none;}
.ts-tab-panel.is-active{display:block; animation:tsPanelIn .45s cubic-bezier(.2,.8,.2,1) both;}
@keyframes tsPanelIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}

.ts-panel-frame{
  border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 80px -26px rgba(0,0,0,.5); margin-bottom:24px;
}
.ts-panel-frame img{width:100%; height:280px; object-fit:cover; object-position:top; display:block;}
.ts-panel-items{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px;}
.ts-panel-items li{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:#DCE1F2;}
.ts-panel-items svg{color:var(--ts-green); flex-shrink:0; margin-top:2px;}

@media (max-width:900px){
  .ts-tabs-layout{grid-template-columns:1fr;}
  .ts-panel-items{grid-template-columns:1fr;}
}

/* ============================================================
   REPORTES GERENCIALES — captura real + barras animadas
   ============================================================ */
.ts-reports{padding:120px 0; background:var(--paper); overflow:hidden;}
.ts-reports > .wrap{position:relative; z-index:1;}
.ts-reports-bg-img{
  position:absolute; top:0; right:0; z-index:0;
  width:640px; max-width:58%; opacity:.16; pointer-events:none;
}
.ts-reports-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.ts-reports-text h2{font-size:32px; line-height:1.2; color:var(--navy);}
.ts-reports-text .sub{color:var(--muted); font-size:15.5px; line-height:1.65; margin:16px 0 30px;}

.ts-bar-row{margin-bottom:16px;}
.ts-bar-label{display:flex; justify-content:space-between; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:7px;}
.ts-bar-label span:last-child{color:var(--crimson);}
.ts-bar-track{height:8px; border-radius:6px; background:var(--line); overflow:hidden;}
.ts-bar-fill{height:100%; width:0; border-radius:6px; background:linear-gradient(90deg, var(--crimson), var(--ts-teal)); transition:width 1.1s cubic-bezier(.2,.8,.2,1);}

.ts-reports-visual{position:relative;}
.ts-reports-glow{position:absolute; inset:-40px; z-index:0; background:radial-gradient(circle, rgba(14,124,134,.18), transparent 70%); filter:blur(40px); pointer-events:none;}
.ts-reports-frame{
  position:relative; z-index:1; border-radius:20px; overflow:hidden;
  border:1px solid var(--line); box-shadow:0 40px 80px -26px rgba(30,44,81,.3);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.ts-reports-frame img{width:100%; height:100%; object-fit:cover; aspect-ratio:5/4; display:block;}
.ts-reports-visual:hover .ts-reports-frame{transform:translateY(-6px) scale(1.015);}

@media (max-width:1000px){
  .ts-reports-grid{grid-template-columns:1fr; gap:44px;}
  .ts-reports-visual{order:-1;}
}

/* ============================================================
   POR QUÉ ELEGIR THASOFT PRO — lista horizontal con divisores
   ============================================================ */
.ts-why{padding:120px 0; background:var(--paper);}
.ts-why-list{max-width:880px; margin:52px auto 0; display:flex; flex-direction:column;}
.ts-why-item{
  display:flex; align-items:flex-start; gap:24px;
  padding:28px 8px; border-bottom:1px solid var(--line);
  transition:padding-left .3s ease;
}
.ts-why-item:first-child{padding-top:0;}
.ts-why-item:last-child{border-bottom:none;}
.ts-why-item:hover{padding-left:14px;}
.ts-why-num{font-family:'IBM Plex Mono'; font-size:13px; font-weight:700; color:var(--crimson); flex-shrink:0; width:34px; padding-top:4px;}
.ts-why-icon{
  width:48px; height:48px; border-radius:13px; flex-shrink:0;
  background:var(--crimson-tint); color:var(--crimson);
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.ts-why-item h3{font-size:16.5px; color:var(--navy); margin-bottom:5px;}
.ts-why-item p{font-size:13.5px; color:var(--muted); line-height:1.6;}

/* ============================================================
   CASOS DE USO — grid mixto (foto + icono)
   ============================================================ */
.ts-cases{padding:120px 0; background:linear-gradient(180deg, var(--navy-ink) 0%, var(--navy) 100%);}
.ts-cases .section-head h2{color:#fff;}
.ts-cases .section-head p{color:#B9C2E0;}

.ts-cases-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:48px;}
.ts-case-card{
  border-radius:18px; overflow:hidden; position:relative;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease;
  min-height:260px; display:flex; flex-direction:column; justify-content:flex-end;
}
.ts-case-card:hover{transform:translateY(-8px); border-color:rgba(234,33,81,.4);}
.ts-case-card.has-photo{padding:0;}
.ts-case-photo{position:absolute; inset:0; z-index:0;}
.ts-case-photo img{width:100%; height:100%; object-fit:cover;}
.ts-case-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,14,30,.92) 10%, rgba(10,14,30,.35) 60%, transparent 100%);}
.ts-case-card:not(.has-photo){padding:26px 22px;}
.ts-case-icon{
  width:44px; height:44px; border-radius:12px; margin-bottom:14px;
  background:rgba(255,255,255,.06); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.ts-case-body{position:relative; z-index:1; padding:22px;}
.ts-case-card h3{font-size:15.5px; color:#fff; margin-bottom:8px;}
.ts-case-card p{font-size:12.5px; color:#B9C2E0; line-height:1.55; margin-bottom:12px;}
.ts-case-tag{display:inline-flex; font-size:11px; font-weight:700; color:#fff; background:rgba(234,33,81,.55); padding:5px 12px; border-radius:20px;}

@media (max-width:1080px){ .ts-cases-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .ts-cases-grid{grid-template-columns:1fr;} }

/* ============================================================
   CTA FINAL — centrada, con captura flotando (sin corte diagonal:
   distinto del patrón usado en las otras 3 páginas)
   ============================================================ */
.ts-cta{padding:110px 0; background:var(--paper);}
.ts-cta-card{
  position:relative; max-width:980px; margin:0 auto; padding:60px 48px 56px;
  border-radius:28px; text-align:center; overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(30,44,81,.35);
  background:linear-gradient(120deg, var(--navy) 0%, var(--navy-ink) 60%, var(--crimson-dark) 140%);
}
.ts-cta-card > *{position:relative; z-index:1;}
/* Resplandor suave detrás del contenido, para que la tarjeta no se
   sienta plana — mismo recurso (blob difuminado) que ya usa el hero
   de esta página en .ts-mesh, a menor escala y solo en esta tarjeta.
   Va DESPUÉS de ".ts-cta-card > *" a propósito: esa regla también
   matchea a .ts-cta-glow (es hijo directo de la tarjeta) y con la
   misma especificidad gana la que esté más abajo en el archivo — si
   quedara antes, el glow pasaba de position:absolute a position:
   relative y ocupaba un bloque real de 640x640px empujando todo el
   texto hacia abajo (el hueco vacío que se veía arriba del título). */
.ts-cta-glow{
  position:absolute; z-index:0; top:-30%; left:50%; transform:translateX(-50%);
  width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle, rgba(234,33,81,.35), transparent 70%);
  filter:blur(70px); pointer-events:none;
}
.ts-cta-card h2{color:#fff; font-size:30px; max-width:560px; margin:0 auto;}
.ts-cta-card p{color:#C7CEE3; font-size:15.5px; margin:14px auto 0; max-width:480px;}
.ts-cta-card .cta-row{justify-content:center; margin:28px 0 0;}
/* overflow:hidden vive en el <img> (no en .ts-cta-peek): así los
   badges flotantes pueden asomarse un poco por encima del borde de
   la captura sin quedar recortados. */
.ts-cta-peek{position:relative; margin-top:52px; max-width:760px; margin-left:auto; margin-right:auto;}
.ts-cta-peek img{
  width:100%; display:block; object-fit:cover; object-position:top;
  border-radius:16px; box-shadow:0 30px 60px -20px rgba(0,0,0,.45);
}
.ts-cta-badge-a{top:-18px; left:4%;}
.ts-cta-badge-b{bottom:-16px; right:-3%; animation-delay:-2.8s;}

@media (max-width:760px){
  .ts-cta{padding:70px 0;}
  .ts-cta-card{padding:48px 24px 40px; border-radius:22px;}
  .ts-cta-card h2{font-size:24px;}
  .ts-cta-badge-a, .ts-cta-badge-b{display:none;}
}