/* ============================================================
   JAC SISTEMAS — Hoja de estilos (v4)
   Para cambiar el color de marca, edita --acento.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --acento:   #1A66FF;   /* azul de marca JAC */
  --acento-2: #0F4FD6;   /* azul más oscuro (hover) */
  --cian:     #38D3F2;
  --negro:    #18191B;   /* fondo oscuro principal */
  --negro-2:  #212225;   /* tarjetas sobre oscuro */
  --gris:     #DADCE0;   /* secciones claras */
  --gris-2:   #CFD2D7;
  --tinta:    #18191B;   /* texto sobre claro */
  --linea:    rgba(255,255,255,0.12);
  --linea-o:  rgba(24,25,27,0.14);
  --txt-2:    rgba(255,255,255,0.68);
  --f-titulo: 'Inter Tight', system-ui, sans-serif;
  --f-texto:  'Inter Tight', system-ui, sans-serif;
  --f-mono:   'Space Mono', ui-monospace, monospace;
  --pad: clamp(20px, 4vw, 56px);
  --maxw: 1440px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:64px; overflow-x:clip; }
body{ margin:0; background:#060C18; color:#fff; font:400 16px/1.55 var(--f-texto); letter-spacing:.01em; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0; }
p{ margin:0; }
h1,h2,h3{ margin:0; font-family:var(--f-titulo); font-weight:500; }
b,strong{ font-weight:600; color:#fff; }
.light b,.light strong{ color:var(--tinta); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.etq{ font:400 12px/1.4 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--txt-2); }
.light .etq{ color:rgba(24,25,27,.6); }
.h-xl{ font-size:clamp(44px, 7.4vw, 112px); line-height:.94; letter-spacing:-.02em; }
.h-lg{ font-size:clamp(36px, 5.6vw, 84px); line-height:1; letter-spacing:-.015em; }
.h-md{ font-size:clamp(28px, 3.4vw, 48px); line-height:1.05; letter-spacing:-.01em; }
.acc{ color:var(--acento); }
.cursor{ display:inline-block; width:.09em; height:.82em; background:var(--acento); margin-left:.06em; vertical-align:-.04em; animation:parpadeo 1.1s steps(1) infinite; }
@keyframes parpadeo{ 50%{ opacity:0; } }

/* Botón con caja de flecha */
.btn{ display:inline-flex; align-items:center; gap:14px; padding:6px 6px 6px 16px; border-radius:4px; background:#fff; color:var(--tinta); font:500 14px var(--f-texto); transition:background .2s, color .2s; white-space:nowrap; }
.btn .fl{ width:28px; height:28px; border-radius:3px; background:var(--acento); display:grid; place-items:center; flex-shrink:0; transition:transform .25s; }
.btn .fl::before{ content:''; width:12px; height:12px; background:#fff; clip-path:polygon(0 42%,62% 42%,40% 18%,52% 6%,100% 50%,52% 94%,40% 82%,62% 58%,0 58%); }
.btn:hover .fl{ transform:translateX(3px); }
.btn.osc{ background:var(--negro); color:#fff; }
.btn.acc-b{ background:var(--acento); color:#fff; }
.btn.acc-b .fl{ background:#fff; }
.btn.acc-b .fl::before{ background:var(--acento); }
.lnk{ display:inline-flex; align-items:center; gap:10px; font:500 14px var(--f-texto); color:#fff; }
.lnk::after{ content:'→'; color:var(--acento); transition:transform .2s; }
.lnk:hover::after{ transform:translateX(4px); }

/* ============ HEADER ============ */
.hdr{ position:fixed; inset:0 0 auto 0; z-index:100; height:64px; display:flex; align-items:stretch; transition:background .3s, backdrop-filter .3s; }
.hdr.scrolled{ background:rgba(24,25,27,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.hdr-logo{ background:var(--acento); display:flex; align-items:center; padding:0 24px; min-width:200px; }
.hdr-logo img{ height:34px; width:auto; }
.hdr-nav{ display:flex; align-items:center; justify-content:flex-end; gap:30px; padding:0 8px 0 30px; flex:1; }
.hdr-nav a{ font:500 14px var(--f-texto); color:#fff; opacity:.88; transition:opacity .2s; }
.hdr-nav a:hover{ opacity:1; }
.hdr-cta{ display:flex; align-items:center; padding:0 var(--pad); }
.hdr-burger{ display:none; width:64px; align-items:center; justify-content:center; }
.hdr-burger span{ display:block; width:22px; height:2px; background:#fff; box-shadow:0 -7px 0 #fff, 0 7px 0 #fff; }
.mmenu{ position:fixed; inset:0; z-index:200; background:var(--negro); display:flex; flex-direction:column; padding:90px var(--pad) 40px; gap:6px; opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .3s, transform .3s, visibility .3s; }
.mmenu.open{ opacity:1; visibility:visible; transform:none; }
.mmenu a{ font:500 34px/1.25 var(--f-titulo); border-bottom:1px solid var(--linea); padding:12px 0; }
.mmenu .x{ position:absolute; top:14px; right:18px; font-size:38px; line-height:1; }
@media (max-width:1040px){
  .hdr-nav{ display:none; }
  .hdr-burger{ display:flex; }
  .hdr-cta{ margin-left:auto; padding-right:0; }
  .hdr-logo{ min-width:0; padding:0 18px; }
}

/* ============ HERO ============ */
/* Video fijo: se queda quieto y el contenido se desliza encima al hacer scroll */
.bg-fijo{ position:fixed; inset:0; z-index:-1; overflow:hidden; background:#060C18; pointer-events:none; }
.bg-fijo video{ width:100%; height:100%; object-fit:cover; display:block; }
/* Transparencia de las secciones oscuras: súbela (0.9) para ver menos video, bájala (0.6) para ver más */
:root{ --velo: rgba(14,17,22,0.50); }
main > section:not(.light):not(.hero):not(.contacto), .pie{ background:var(--velo); }
.cifras{ background:rgba(14,17,22,0.30) !important; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.hero{ position:relative; height:100vh; min-height:620px; overflow:hidden; background:transparent; }
.hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%); }
.hero-in{ position:absolute; inset:auto 0 0 0; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding:0 var(--pad) clamp(40px,7vh,80px); max-width:var(--maxw); margin:0 auto; }
.hero-txt{ max-width:900px; }
.hero-txt .etq{ margin-bottom:22px; color:rgba(255,255,255,.8); }
.hero-side{ max-width:340px; padding-bottom:10px; }
.hero-side p{ font-size:17px; line-height:1.5; color:rgba(255,255,255,.88); margin-bottom:22px; }
.hero-bar{ position:absolute; left:0; bottom:clamp(40px,7vh,80px); width:12px; height:clamp(70px,11vw,170px); background:var(--acento); z-index:2; }
@media (max-width:860px){ .hero-in{ flex-direction:column; align-items:flex-start; } .hero-bar{ display:none; } }

/* ============ CIFRAS ============ */
.cifras{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--linea); }
.cifra{ position:relative; padding:44px 28px 48px; border-right:1px solid var(--linea); min-height:330px; display:flex; flex-direction:column; justify-content:space-between; }
.cifra:last-child{ border-right:0; }
.cifra::before{ content:''; position:absolute; left:-1px; top:0; width:2px; height:100%; background:linear-gradient(var(--acento), transparent 70%); }
.cifra-n{ font:500 clamp(48px,5vw,76px)/1 var(--f-titulo); letter-spacing:-.02em; }
.cifra-n + .etq{ margin-top:10px; }
.cifra-t{ font-weight:600; margin-bottom:8px; }
.cifra-d{ color:var(--txt-2); font-size:15px; }
@media (max-width:900px){ .cifras{ grid-template-columns:1fr 1fr; } .cifra{ min-height:260px; } .cifra:nth-child(2){ border-right:0; } .cifra:nth-child(-n+2){ border-bottom:1px solid var(--linea); } }
@media (max-width:520px){ .cifras{ grid-template-columns:1fr; } .cifra{ border-right:0; border-bottom:1px solid var(--linea); min-height:0; gap:40px; } }

/* ============ BLOQUE TITULAR (título grande + texto a la derecha) ============ */
.titular{ display:grid; grid-template-columns:1.5fr 1fr; gap:50px; align-items:end; padding:clamp(80px,11vw,150px) 0 60px; }
.titular .etq{ margin-bottom:22px; }
.titular-p{ color:var(--txt-2); font-size:17px; max-width:460px; }
.light .titular-p{ color:rgba(24,25,27,.72); }
@media (max-width:860px){ .titular{ grid-template-columns:1fr; gap:24px; } }

/* ============ NOSOTROS ============ */
.nos-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.nos-col{ padding:40px 28px 46px; border-right:1px solid var(--linea); }
.nos-col:last-child{ border-right:0; }
.nos-col .etq{ margin-bottom:20px; color:var(--acento); }
.nos-col p{ color:var(--txt-2); font-size:15.5px; margin-bottom:14px; }
.valores{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.valores li{ display:flex; gap:12px; font-size:15px; color:var(--txt-2); }
.valores li b{ min-width:120px; }
@media (max-width:900px){ .nos-grid{ grid-template-columns:1fr; } .nos-col{ border-right:0; border-bottom:1px solid var(--linea); } .nos-col:last-child{ border-bottom:0; } }

/* ============ SERVICIOS (carrusel) ============ */
.carr{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); }
.carr::-webkit-scrollbar{ display:none; }
.serv{ flex:0 0 clamp(270px, 25%, 360px); scroll-snap-align:start; border-right:1px solid var(--linea); padding:30px 26px 34px; display:flex; flex-direction:column; min-height:540px; transition:background .3s; }
.serv:hover{ background:var(--negro-2); }
.serv-tl{ font:500 22px/1.15 var(--f-titulo); min-height:52px; }
.serv-ico{ width:150px; height:150px; margin:46px auto 50px; }
.serv-d{ color:var(--txt-2); font-size:15px; flex:1; margin-bottom:24px; }
.carr-nav{ display:flex; border-bottom:1px solid var(--linea); }
.carr-nav button{ width:64px; height:58px; border-right:1px solid var(--linea); font-size:20px; color:rgba(255,255,255,.8); transition:color .2s, background .2s; }
.carr-nav button:hover{ color:#fff; background:var(--negro-2); }

/* ============ TAMBIÉN OFRECEMOS (mosaico) ============ */
.mosaico{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding-bottom:clamp(80px,10vw,140px); }
.mos{ border:1px solid var(--linea); border-radius:4px; padding:22px; display:flex; align-items:center; gap:14px; min-height:92px; transition:border-color .25s, background .25s; }
.mos:hover{ border-color:var(--acento); background:rgba(26,102,255,.06); }
.mos img{ width:28px; height:28px; flex-shrink:0; }
.mos p{ font-size:14.5px; line-height:1.3; }
@media (max-width:900px){ .mosaico{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .mosaico{ grid-template-columns:1fr; } }

/* ============ SECCIONES CLARAS ============ */
.light{ background:var(--gris); color:var(--tinta); }
.light .linea-t{ border-top:1px solid var(--linea-o); }

/* Proceso */
.pasos{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--linea-o); }
.paso{ padding:34px 28px 50px; border-right:1px solid var(--linea-o); position:relative; }
.paso:last-child{ border-right:0; }
.paso::before{ content:''; position:absolute; left:0; top:-1px; width:56px; height:3px; background:var(--acento); }
.paso-n{ font:400 13px var(--f-mono); color:var(--acento); margin-bottom:60px; display:block; }
.paso-tl{ font:500 clamp(26px,2.6vw,36px)/1.05 var(--f-titulo); margin-bottom:16px; }
.paso-d{ color:rgba(24,25,27,.72); font-size:15.5px; max-width:380px; }
@media (max-width:860px){ .pasos{ grid-template-columns:1fr; } .paso{ border-right:0; border-bottom:1px solid var(--linea-o); } .paso-n{ margin-bottom:24px; } }

/* Portafolio */
.pf-dest{ display:grid; grid-template-columns:1fr 380px; min-height:560px; background:var(--negro); color:#fff; }
.foto{ position:relative; overflow:hidden; background:linear-gradient(135deg,#25303f,#11161f); min-height:240px; }
.foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.foto span{ position:absolute; inset:0; display:grid; place-items:center; font:400 12px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.foto .foto-tl{ position:absolute; left:26px; top:24px; z-index:2; font:500 clamp(26px,3vw,40px)/1 var(--f-titulo); color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.4); }
.pf-card{ background:#ECEEF1; color:var(--tinta); padding:28px 26px; display:flex; flex-direction:column; gap:18px; }
.pf-card ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--linea-o); }
.pf-card li{ padding:13px 0 13px 16px; border-bottom:1px solid var(--linea-o); position:relative; font-size:14.5px; }
.pf-card li::before{ content:''; position:absolute; left:0; top:50%; width:3px; height:16px; margin-top:-8px; background:var(--acento); }
.pf-fila{ display:grid; grid-template-columns:1fr 1fr 1fr; }
.pf-mini{ background:#ECEEF1; border-right:1px solid var(--linea-o); display:flex; flex-direction:column; }
.pf-mini .foto{ aspect-ratio:16/10; min-height:0; }
.pf-mini-i{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px; }
.pf-mini-tl{ font:500 19px var(--f-titulo); }
.pf-acc{ background:var(--acento); color:#fff; padding:28px 26px; display:flex; flex-direction:column; justify-content:space-between; gap:30px; }
.pf-acc .btn,.pf-card .btn{ align-self:flex-start; }
.pf-acc p{ font:500 clamp(24px,2.4vw,32px)/1.1 var(--f-titulo); }
@media (max-width:980px){ .pf-dest{ grid-template-columns:1fr; } .pf-fila{ grid-template-columns:1fr; } .pf-mini{ border-right:0; border-bottom:1px solid var(--linea-o); } }

/* Sectores (filas) */
.filas{ border-top:1px solid var(--linea-o); padding-bottom:clamp(80px,10vw,140px); }
.fila{ display:grid; grid-template-columns:64px 1.2fr 1fr auto; align-items:center; gap:24px; padding:26px 0; border-bottom:1px solid var(--linea-o); }
.fila img{ width:44px; height:44px; padding:9px; border:1px solid var(--linea-o); border-radius:4px; background:rgba(255,255,255,.4); }
.fila-tl{ font:500 clamp(28px,3.2vw,46px)/1 var(--f-titulo); letter-spacing:-.01em; }
.fila-d{ font-size:15px; color:rgba(24,25,27,.72); max-width:420px; }
@media (max-width:760px){ .fila{ grid-template-columns:48px 1fr; } .fila-d{ grid-column:2; } .fila .btn{ grid-column:2; justify-self:start; } }

/* ============ FRANJA EN MOVIMIENTO ============ */
.franja{ padding:clamp(80px,10vw,130px) 0 clamp(30px,4vw,50px); text-align:center; overflow:hidden; }
.franja .h-lg{ margin-bottom:16px; }
.franja .titular-p{ margin:0 auto 46px; }
.marq{ display:flex; width:max-content; animation:marq 38s linear infinite; }
.marq-g{ display:flex; gap:12px; padding-right:12px; }
.marq-i{ font:400 13px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--linea); border-radius:4px; padding:20px 30px; white-space:nowrap; }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marq{ animation:none; } }

/* ============ EQUIPO ============ */
.equipo{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--linea); padding-bottom:0; }
.miembro{ padding:30px 26px 34px; border-right:1px solid var(--linea); border-bottom:1px solid var(--linea); display:flex; gap:18px; align-items:center; transition:background .25s; }
.miembro:nth-child(4n){ border-right:0; }
.miembro:hover{ background:var(--negro-2); }
.av{ width:58px; height:58px; flex-shrink:0; border-radius:4px; background:var(--acento); display:grid; place-items:center; font:500 19px var(--f-titulo); overflow:hidden; }
.av img{ width:100%; height:100%; object-fit:cover; }
.m-nm{ font:500 18px/1.2 var(--f-titulo); margin-bottom:4px; }
.m-rl{ font:400 11.5px/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--txt-2); }
@media (max-width:1000px){ .equipo{ grid-template-columns:1fr 1fr; } .miembro:nth-child(4n){ border-right:1px solid var(--linea); } .miembro:nth-child(2n){ border-right:0; } }
@media (max-width:560px){ .equipo{ grid-template-columns:1fr; } .miembro{ border-right:0 !important; } }

/* ============ PREGUNTAS ============ */
.faq-w{ display:grid; grid-template-columns:1fr 1.4fr; gap:60px; padding-top:clamp(80px,10vw,140px); padding-bottom:clamp(80px,10vw,140px); }
.faq-w .etq{ margin-bottom:22px; }
.faq-w .h-lg{ margin-bottom:26px; }
.faqs{ border-top:1px solid var(--linea-o); }
.faq{ border-bottom:1px solid var(--linea-o); }
.faq summary{ list-style:none; cursor:pointer; padding:24px 50px 24px 0; position:relative; font:500 clamp(19px,1.7vw,23px)/1.25 var(--f-titulo); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:''; position:absolute; right:0; top:50%; width:30px; height:30px; margin-top:-15px; border-radius:3px; background:var(--negro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center/12px no-repeat; transition:background-color .25s; }
.faq[open] summary::after{ background-color:var(--acento); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h10' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); }
.faq p{ padding:0 50px 26px 0; color:rgba(24,25,27,.75); font-size:15.5px; }
@media (max-width:860px){ .faq-w{ grid-template-columns:1fr; gap:30px; } }

/* ============ CONTACTO ============ */
.contacto{ display:grid; grid-template-columns:1fr 1.15fr; }
.ct-izq{ background:var(--acento); padding:clamp(50px,6vw,90px) var(--pad); position:relative; overflow:hidden; min-height:640px; display:flex; flex-direction:column; }
.ct-izq .etq{ color:rgba(255,255,255,.85); margin-bottom:20px; }
.ct-izq .h-lg{ margin-bottom:40px; position:relative; z-index:1; font-size:clamp(36px,4.4vw,66px); }
.ct-datos{ display:grid; gap:18px; position:relative; z-index:1; margin-top:auto; }
.ct-dato .etq{ margin-bottom:4px; font-size:11px; }
.ct-dato a,.ct-dato p{ font:500 18px/1.35 var(--f-titulo); }
.ct-marca{ position:absolute; right:-80px; bottom:-90px; width:420px; height:420px; border:44px solid rgba(255,255,255,.14); border-radius:50%; }
.ct-marca::after{ content:''; position:absolute; inset:60px; border:30px solid rgba(255,255,255,.1); border-radius:50%; }
.ct-der{ background:rgba(14,17,22,0.62); padding:clamp(50px,6vw,90px) var(--pad); }
.ct-form{ display:grid; gap:12px; max-width:620px; }
.ct-form .etq{ margin-bottom:10px; }
.ct-form input,.ct-form textarea{ width:100%; background:transparent; border:1px solid rgba(255,255,255,.28); border-radius:4px; padding:16px 16px; color:#fff; font:400 15px var(--f-texto); outline:none; transition:border-color .2s; }
.ct-form input:focus,.ct-form textarea:focus{ border-color:var(--acento); }
.ct-form input::placeholder,.ct-form textarea::placeholder{ color:rgba(255,255,255,.55); }
.ct-form textarea{ min-height:190px; resize:vertical; }
.ct-count{ font:400 11px var(--f-mono); color:rgba(255,255,255,.45); text-align:right; margin-top:-6px; }
.ct-form .btn{ width:100%; justify-content:space-between; padding:8px 8px 8px 18px; font-size:15px; }
.ct-mapa{ margin-top:28px; height:220px; border:1px solid var(--linea); border-radius:4px; overflow:hidden; max-width:620px; }
.ct-mapa iframe{ width:100%; height:100%; border:0; filter:grayscale(1) invert(.92) contrast(.9); }
.ct-wa{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; font-size:14.5px; color:rgba(255,255,255,.85); }
.ct-wa img{ width:24px; }
@media (max-width:900px){ .contacto{ grid-template-columns:1fr; } .ct-izq{ min-height:0; } .ct-marca{ width:300px; height:300px; } }

/* ============ FOOTER ============ */
.pie{ padding:70px 0 34px; }
.pie-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; border-bottom:1px solid var(--linea); padding-bottom:50px; }
.pie-top .h-md{ max-width:760px; }
.pie-top img{ height:46px; width:auto; }
.pie-cols{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; padding:40px 0 50px; }
.pie-col .etq{ margin-bottom:14px; }
.pie-col a,.pie-col p{ display:block; font-size:14.5px; color:rgba(255,255,255,.8); margin-bottom:9px; }
.pie-col a:hover{ color:#fff; }
.pie-bot{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font:400 11.5px var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.45); }
@media (max-width:860px){ .pie-cols{ grid-template-columns:1fr 1fr; } .pie-top{ flex-direction:column-reverse; } }

/* ============ ANIMACIÓN DE ENTRADA ============ */
.rv{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }
.foto-w{ position:relative; min-height:320px; }
.foto-w .foto{ position:absolute; inset:0; }
.foto-w .foto-tl{ position:absolute; left:26px; top:24px; z-index:2; font:500 clamp(26px,3vw,40px)/1 var(--f-titulo); color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.4); }

/* Compatibilidad con el editor visual */
[data-ed-ui] b,[data-ed-ui] strong{ color:inherit; }
body.ed-on .hdr{ top:56px; }
body.ed-on .rv{ opacity:1; transform:none; }
/* Tarjetas sobre el video: un poco más sólidas para que el texto se lea bien */
.serv,.mos,.miembro,.nos-col{ background:rgba(14,17,22,0.35); }
.serv:hover,.miembro:hover{ background:rgba(33,34,37,0.85); }

/* ============ EFECTO DE PROFUNDIDAD CON EL MOUSE ============
   --mx y --my van de -1 a 1 según la posición del cursor (los calcula el script).
   Para hacerlo más fuerte o más suave cambia --fuerza (1 = normal, 0 = apagado). */
:root{ --mx:0; --my:0; --fuerza:1; }
.bg-fijo video{ transform:scale(1.08) translate(calc(var(--mx) * -18px * var(--fuerza)), calc(var(--my) * -12px * var(--fuerza))); will-change:transform; }
.hero-txt{ transform:translate(calc(var(--mx) * 22px * var(--fuerza)), calc(var(--my) * 12px * var(--fuerza))); }
.hero-side{ transform:translate(calc(var(--mx) * 36px * var(--fuerza)), calc(var(--my) * 20px * var(--fuerza))); }
.hero-bar{ transform:translateY(calc(var(--my) * 16px * var(--fuerza))); }
.titular h2, .franja h2, .faq-w h2, .ct-izq h2{ transform:translate(calc(var(--mx) * 14px * var(--fuerza)), calc(var(--my) * 8px * var(--fuerza))); }
.serv-ico{ transform:translate(calc(var(--mx) * 10px * var(--fuerza)), calc(var(--my) * 10px * var(--fuerza))); }
.ct-marca{ transform:translate(calc(var(--mx) * -30px * var(--fuerza)), calc(var(--my) * -30px * var(--fuerza))); }
/* Inclinación 3D de tarjetas */
.tilt{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0); transition:transform .35s ease, background .3s; }
.tilt.on{ transition:transform .08s linear, background .3s; }
.tilt.on::after{ content:''; position:absolute; inset:0; pointer-events:none; background:radial-gradient(400px circle at var(--gx,50%) var(--gy,50%), rgba(26,102,255,.18), transparent 45%); }
.serv,.mos,.miembro,.cifra{ position:relative; }
@media (hover:none), (prefers-reduced-motion:reduce){ :root{ --fuerza:0; } .tilt{ transform:none !important; } }
body.ed-on{ --fuerza:0; }

/* Equipo con fotografía */
.miembro{ flex-direction:column; align-items:stretch; gap:16px; padding:22px 22px 26px; }
.miembro .av{ width:100%; height:auto; aspect-ratio:1/1; border-radius:4px; background:var(--negro-2); }
.miembro .av img{ filter:grayscale(1) contrast(1.05); transition:filter .4s ease, transform .6s ease; }
.miembro:hover .av img{ filter:none; transform:scale(1.04); }
.miembro .av{ position:relative; }
.miembro .av::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:3px; background:var(--acento); transition:width .4s ease; }
.miembro:hover .av::after{ width:100%; }
@media (max-width:560px){ .equipo{ grid-template-columns:1fr 1fr; } .miembro{ border-right:1px solid var(--linea) !important; padding:14px 14px 18px; } .miembro:nth-child(2n){ border-right:0 !important; } .m-nm{ font-size:15px; } }
.hdr-nav a{ white-space:nowrap; }
@media (max-width:1200px){ .hdr-nav{ gap:20px; padding-left:20px; } .hdr-nav a{ font-size:13.5px; } }

/* ============ COMPRAR (TIENDA EN IFRAME) ============ */
.nav-comprar{ color:#fff !important; opacity:1 !important; position:relative; }
.nav-comprar::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--acento); }
.tienda-btn{ margin-top:22px; }
.tienda{ border:1px solid var(--linea); border-radius:8px; overflow:hidden; background:#fff; margin-bottom:clamp(80px,10vw,140px); box-shadow:0 30px 80px rgba(0,0,0,.45); }
.tienda-bar{ display:flex; align-items:center; gap:7px; height:40px; padding:0 16px; background:var(--negro-2); border-bottom:1px solid var(--linea); }
.tienda-bar span{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22); }
.tienda-bar span:first-child{ background:var(--acento); }
.tienda-bar p{ margin-left:14px; font:400 12px var(--f-mono); letter-spacing:.06em; color:rgba(255,255,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tienda iframe{ display:block; width:100%; height:min(85vh, 900px); min-height:560px; border:0; background:#fff; }
@media (max-width:700px){ .tienda iframe{ height:80vh; min-height:520px; } .tienda{ border-radius:6px; } }
/* Tienda a todo lo ancho */
.tienda-full{ border-radius:0; border-left:0; border-right:0; margin-bottom:0; box-shadow:none; }
.tienda-full iframe{ height:calc(100vh - 64px - 40px); min-height:600px; }
#comprar .titular{ padding-bottom:50px; }

/* Al dar clic en el menú, la sección queda a ~40px debajo de la barra (no 160px) */
main section[id]:not(#inicio):not(#contacto){ scroll-margin-top:calc(-1 * (clamp(80px,11vw,150px) - 40px)); }
#contacto{ scroll-margin-top:calc(-1 * (clamp(50px,6vw,90px) - 40px)); }

/* ============ ACCESIBILIDAD (auditoría 29/10/2026) ============ */
/* Contraste suficiente en textos pequeños */
.nos-col .etq{ color:#6FA0FF; }
.paso-n{ color:var(--acento-2); }
.light .etq{ color:rgba(24,25,27,.78); }
.ct-izq .etq, .ct-dato .etq{ color:#fff; }
/* Foco visible al navegar con teclado */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--cian); outline-offset:3px; }
.pie-lema{ font-family:var(--f-titulo); font-weight:500; }

/* Formulario: aceptación de aviso, estado de envío y campo trampa anti-spam */
.ct-trampa{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.ct-acepto{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:rgba(255,255,255,.78); margin:4px 0 6px; cursor:pointer; }
.ct-acepto input{ width:18px; height:18px; margin-top:1px; accent-color:var(--acento); flex-shrink:0; }
.ct-acepto a, .pie-bot a{ color:#fff; text-decoration:underline; }
.ct-estado{ font-size:14px; min-height:20px; color:rgba(255,255,255,.75); }
.ct-estado.ok{ color:#6EE7A8; }
.ct-estado.err{ color:#FF9C9C; }
.btn:disabled{ opacity:.6; cursor:wait; }

/* Logo TechZone (fondo blanco) */
.hdr-logo{ background:#fff; min-width:0; padding:0 22px; }
.hdr-logo img{ height:58px; width:auto; }
.pie-logo{ display:inline-flex; background:#fff; border-radius:8px; padding:10px 14px; }
.pie-top .pie-logo img{ height:88px; width:auto; }
@media (max-width:1040px){ .hdr-logo{ padding:0 14px; } .hdr-logo img{ height:54px; } }
/* Logo como pestaña que cuelga bajo la barra */
.hdr-logo{ align-self:flex-start; height:92px; padding:0 18px; border-radius:0 0 10px 0; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.hdr-logo img{ height:80px; }
@media (max-width:1040px){ .hdr-logo{ height:78px; padding:0 12px; } .hdr-logo img{ height:68px; } }
/* Logo TechZone versión para fondo oscuro: sin recuadro, integrado a la barra */
.hdr-logo{ background:transparent !important; height:64px !important; align-self:stretch !important; box-shadow:none !important; border-radius:0 !important; padding:0 0 0 var(--pad) !important; }
.hdr-logo img{ height:54px !important; width:auto; margin-top:4px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
.pie-top .pie-logo-img{ height:110px; width:auto; }
@media (max-width:1040px){ .hdr-logo{ padding-left:16px !important; } .hdr-logo img{ height:50px !important; } }
.hdr-logo img{ height:76px !important; margin-top:6px; }
@media (max-width:1040px){ .hdr-logo img{ height:64px !important; margin-top:4px; } }

/* Barra más alta: el logo queda completo dentro de la barra */
.hdr{ height:84px; }
.hdr-logo{ height:84px !important; align-items:center !important; }
.hdr-logo img{ height:68px !important; margin-top:0 !important; }
html{ scroll-padding-top:84px; }
.tienda-full iframe{ height:calc(100vh - 84px - 40px); }
@media (max-width:1040px){
  .hdr{ height:72px; }
  .hdr-logo{ height:72px !important; }
  .hdr-logo img{ height:58px !important; margin-top:0 !important; }
  html{ scroll-padding-top:72px; }
}
body.ed-on .hdr{ top:56px; }

/* ============ CÓMO TRABAJAMOS: tarjetas con video y texto flotante ============ */
.pasos-video{ grid-template-columns:repeat(3,1fr); gap:18px; border-top:0; }
.pasos-video .paso{ position:relative; overflow:hidden; border:0; border-radius:12px; min-height:460px; padding:0; display:flex; align-items:flex-end; background:#0A1222; box-shadow:0 18px 40px rgba(10,18,34,.25); isolation:isolate; }
.pasos-video .paso::before{ display:none; }
.paso-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s ease; }
.pasos-video .paso::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(6,10,20,0) 30%, rgba(6,10,20,.55) 100%); }
.pasos-video .paso:hover .paso-vid{ transform:scale(1.05); }
.paso-txt{ position:relative; margin:16px; padding:22px 22px 24px; border-radius:10px; background:rgba(10,16,30,.58); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); color:#fff; animation:flotar 6s ease-in-out infinite; }
.pasos-video .paso:nth-child(2) .paso-txt{ animation-delay:-2s; }
.pasos-video .paso:nth-child(3) .paso-txt{ animation-delay:-4s; }
.paso-txt::before{ content:''; position:absolute; left:22px; top:-1px; width:44px; height:3px; border-radius:2px; background:var(--acento); }
@keyframes flotar{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.pasos-video .paso-n{ color:var(--cian); margin-bottom:14px; }
.pasos-video .paso-tl{ color:#fff; }
.pasos-video .paso-d{ color:rgba(255,255,255,.84); max-width:none; }
@media (max-width:860px){ .pasos-video{ grid-template-columns:1fr; } .pasos-video .paso{ min-height:380px; border-bottom:0; } }
@media (prefers-reduced-motion:reduce){ .paso-txt{ animation:none; } .paso-vid{ transition:none; } }
body.ed-on .paso-txt{ animation:none; }

/* ============ SERVICIOS: tarjetas con video y texto flotante ============ */
.carr{ gap:14px; padding:14px 0 14px 14px; border-top:0; border-bottom:0; }
.serv.serv-video{ position:relative; overflow:hidden; border:0; border-radius:12px; min-height:560px; padding:0; justify-content:flex-end; background:#0A1222; isolation:isolate; box-shadow:0 14px 34px rgba(0,0,0,.35); }
.serv-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s ease; }
.serv.serv-video::before{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(6,10,20,0) 35%, rgba(6,10,20,.6) 100%); }
.serv.serv-video:hover{ background:#0A1222; }
.serv.serv-video:hover .serv-vid{ transform:scale(1.05); }
.serv-txt{ position:relative; margin:14px; padding:20px 20px 22px; border-radius:10px; background:rgba(10,16,30,.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; gap:12px; animation:flotar 6s ease-in-out infinite; }
.serv.serv-video:nth-child(2n) .serv-txt{ animation-delay:-2s; }
.serv.serv-video:nth-child(3n) .serv-txt{ animation-delay:-4s; }
.serv-txt::before{ content:''; position:absolute; left:20px; top:-1px; width:44px; height:3px; border-radius:2px; background:var(--acento); }
.serv-txt .serv-tl{ min-height:0; }
.serv-txt .serv-d{ flex:0; margin:0; color:rgba(255,255,255,.84); }
.carr-nav{ border-top:0; }
@media (max-width:560px){ .serv.serv-video{ min-height:500px; flex-basis:82%; } }
@media (prefers-reduced-motion:reduce){ .serv-txt{ animation:none; } .serv-vid{ transition:none; } }
body.ed-on .serv-txt{ animation:none; }

/* ============ MOSAICO "Infraestructura y servicios": imagen de fondo + parallax ============ */
.mosaico .mos{ position:relative; overflow:hidden; isolation:isolate; min-height:200px; padding:18px; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:12px; background:#0A1222; transition:border-color .3s, box-shadow .3s; }
.mos-bg{ position:absolute; left:0; top:-16%; width:100%; height:132%; object-fit:cover; z-index:-2; translate:0 var(--py,0%); scale:1; transition:scale .8s cubic-bezier(.2,.7,.2,1); will-change:translate; }
.mosaico .mos::before{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(6,10,20,.05) 0%, rgba(6,10,20,.35) 45%, rgba(6,10,20,.88) 100%); transition:background .4s; }
.mos-ico{ display:grid; place-items:center; width:42px; height:42px; border-radius:10px; background:rgba(10,16,30,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.16); }
.mos-ico img{ width:24px; height:24px; filter:brightness(0) invert(1); }
.mosaico .mos p{ font:600 16px/1.3 var(--f-titulo); color:#fff; padding-right:26px; text-shadow:0 2px 10px rgba(0,0,0,.4); }

.mosaico .mos:hover{ border-color:rgba(56,211,242,.55); box-shadow:0 18px 40px rgba(0,0,0,.4); background:#0A1222; }
.mosaico .mos:hover .mos-bg{ scale:1.08; }
.mosaico .mos:hover::before{ background:linear-gradient(180deg, rgba(6,10,20,0) 0%, rgba(6,10,20,.25) 45%, rgba(6,10,20,.85) 100%); }

/* brillo que sigue al cursor (usa las variables del efecto 3D) */

.mosaico .mos.tilt.on .mos-ico{ border-color:rgba(56,211,242,.6); }
/* entrada escalonada */
.mosaico.rv{ opacity:1; transform:none; }
.mosaico.rv .mos{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease, border-color .3s, box-shadow .3s; }
.mosaico.rv.in .mos{ opacity:1; transform:none; }
.mosaico.rv.in .mos:nth-child(2){ transition-delay:.06s; } .mosaico.rv.in .mos:nth-child(3){ transition-delay:.12s; }
.mosaico.rv.in .mos:nth-child(4){ transition-delay:.18s; } .mosaico.rv.in .mos:nth-child(5){ transition-delay:.24s; }
.mosaico.rv.in .mos:nth-child(6){ transition-delay:.30s; } .mosaico.rv.in .mos:nth-child(7){ transition-delay:.36s; }
.mosaico.rv.in .mos:nth-child(8){ transition-delay:.42s; }
.mosaico.rv.in .mos.tilt.on{ transition-delay:0s; }
@media (max-width:560px){ .mosaico .mos{ min-height:170px; } }
@media (prefers-reduced-motion:reduce){ .mosaico.rv .mos{ opacity:1; transform:none; transition:none; } .mos-bg{ translate:none; transition:none; } }
body.ed-on .mosaico.rv .mos{ opacity:1; transform:none; }

/* correcciones del mosaico */
.mosaico .mos img.mos-bg{ width:100%; height:132%; max-width:none; }
.mosaico .mos p::after{ content:'→'; position:absolute; right:18px; bottom:18px; color:var(--cian); font-size:20px; opacity:0; transform:translateX(-8px); transition:opacity .35s, transform .35s; }
.mosaico .mos:hover p::after{ opacity:1; transform:none; }

/* Voz · Datos · Video */
.vdv{ margin:clamp(30px,4vw,50px) 0 clamp(36px,5vw,60px); }
.vdv .paso{ min-height:600px; box-shadow:0 18px 40px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.1); }
.vdv .paso-d{ color:rgba(255,255,255,.82); }
.vdv-l{ list-style:none; margin:14px 0 0; padding:12px 0 0; border-top:1px solid rgba(255,255,255,.14); display:grid; gap:7px; }
.vdv-l li{ position:relative; padding-left:20px; font-size:14px; line-height:1.45; color:rgba(255,255,255,.9); }
.vdv-l li::before{ content:''; position:absolute; left:2px; top:.5em; width:8px; height:8px; border-radius:2px; background:var(--cian); transform:rotate(45deg); }
@media (max-width:860px){ .vdv .paso{ min-height:500px; } }
.vdv .paso-txt{ text-align:left; }
@media (max-width:860px){ .vdv .paso{ min-height:0; padding-top:230px; } .vdv .paso-vid{ object-position:center top; } }
.vdv .paso-txt{ padding-top:24px; }