/* Code Cloud v3: marca (logo, paleta cian/magenta), tipografías por sitio, carrusel de reels y ajustes. Se carga después de v2.css. */
:root{
  --cian-marca:#04CFD8; --magenta-marca:#CE009D; --tinta:#0B1222; --marino:#0F1B33;
  --acento:#0891B2; --acento-suave:#E0FAFB; --oro:#CE009D; --oro-suave:#FBE4F4;
  --electrico:#04CFD8; --cian:#04CFD8; --noche:#070D1C; --noche-2:#0E1A33;
  --grad:linear-gradient(120deg,#04CFD8 0%,#38B6FF 45%,#CE009D 100%);
  --f-tit:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --f-txt:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --f-hero:"Sora","Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
}
:root[data-sitio="marketing"]{
  --acento:#B8008C; --acento-suave:#FBE4F4; --marino:#2A0A3A; --electrico:#CE009D; --cian:#04CFD8;
  --noche:#120519; --noche-2:#22093A;
  --grad:linear-gradient(120deg,#CE009D 0%,#7B3BFF 50%,#04CFD8 100%);
  --f-tit:"DM Sans","Segoe UI",system-ui,sans-serif;
  --f-txt:"DM Sans","Segoe UI",system-ui,sans-serif;
  --f-hero:"Sora","DM Sans","Segoe UI",system-ui,sans-serif;
}
/* Títulos principales (hero, titulares de sección, cabeceras internas): tipografía de autor propia,
   distinta de la tipografía de texto/UI, para que combinen por contraste en vez de repetirse. */
h1,h2,h3,h4{letter-spacing:-.02em;font-weight:700}
.hero2 h1,.titular,.cab-imagen h1{font-family:var(--f-hero);font-weight:800;letter-spacing:-.02em}
:root[data-sitio="marketing"] h1,:root[data-sitio="marketing"] h2,:root[data-sitio="marketing"] h3,:root[data-sitio="marketing"] h4{font-weight:600;letter-spacing:-.015em}
:root[data-sitio="marketing"] .hero2 h1,:root[data-sitio="marketing"] .titular,:root[data-sitio="marketing"] .cab-imagen h1{font-weight:700;letter-spacing:-.015em}
.hero2 h1{font-size:clamp(2.7rem,6.3vw,5.6rem);line-height:1.02}
.titular{font-size:clamp(2.1rem,4.4vw,3.9rem);line-height:1.08}
.cab-imagen h1{font-size:clamp(2.2rem,4.6vw,4rem);line-height:1.08}
.giro{font-family:var(--f-hero);font-weight:600}
.btn,.menu>li>button,.marca,.etiqueta-mk{font-family:var(--f-txt)}
.btn-grad{color:#fff}
.btn-prim{background:var(--tinta)}
.btn-prim:hover{background:var(--acento)}
:root[data-sitio="marketing"] .btn-prim{background:var(--magenta-marca)}
:root[data-sitio="marketing"] .btn-prim:hover{background:var(--marino)}
.hero2 .apoyo li::before{color:var(--cian-marca)}
.hero2::after{background:radial-gradient(ellipse 80% 70% at 15% 30%,rgba(4,207,216,.22),transparent 60%),radial-gradient(ellipse 60% 60% at 90% 90%,rgba(206,0,157,.22),transparent 60%),linear-gradient(180deg,rgba(7,13,28,.2),var(--noche) 98%)}
:root[data-sitio="marketing"] .hero2::after{background:radial-gradient(ellipse 80% 70% at 10% 20%,rgba(206,0,157,.38),transparent 60%),radial-gradient(ellipse 60% 60% at 90% 80%,rgba(4,207,216,.22),transparent 60%),linear-gradient(180deg,rgba(18,5,25,.2),var(--noche) 98%)}
.tag{background:var(--acento-suave);color:var(--acento)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Logo en encabezado y pie */
.marca{gap:12px}
.marca .logo{width:auto;height:54px;display:block}
.marca .logo-blanco{display:none}
.sobre-oscuro .encabezado:not(.solido) .marca .logo-oscuro{display:none}
.sobre-oscuro .encabezado:not(.solido) .marca .logo-blanco{display:block}
.encabezado.abierto .marca .logo-oscuro{display:block!important}
.encabezado.abierto .marca .logo-blanco{display:none!important}
.pie .marca .logo{height:64px}
.lp-top .marca .logo{height:48px}
.etiqueta-mk{font:700 .78rem/1 var(--f-txt);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--magenta-marca);padding:6px 10px;border-radius:999px;font-style:normal}
.sobre-oscuro .encabezado:not(.solido) .etiqueta-mk{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25)}
@media (max-width:760px){.marca .logo{height:48px;filter:drop-shadow(0 2px 8px rgba(4,207,216,.3)) drop-shadow(0 0 14px rgba(206,0,157,.16))}.etiqueta-mk{display:none}}

/* Cifras parejas: mismo tamaño, una línea, mismo margen */
.cifras{grid-template-columns:repeat(4,1fr);gap:0 24px}
.cifra{padding:30px 0 10px;border-left:1px solid rgba(255,255,255,.14);padding-left:22px}
.cifra:first-child{border-left:0;padding-left:0}
.cifra b{font-size:clamp(1.9rem,3.2vw,2.9rem);white-space:nowrap;line-height:1.05;min-height:1.05em}
.cifra span{display:block;margin-top:8px;min-height:2.6em}
@media (max-width:1080px){.cifras{grid-template-columns:repeat(2,1fr);gap:18px 24px}.cifra:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:480px){.cifra b{font-size:1.7rem}}

/* Historia con viñetas */
.mini-checks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.mini-checks li{position:relative;padding-left:26px;font-size:.98rem;color:var(--gris)}
.mini-checks li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:5px;background:var(--grad)}
.mini-checks li::after{content:"";position:absolute;left:5px;top:8px;width:6px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
@media (min-width:1081px){.pasos-historia>li{min-height:78vh}}
.oscuro .mini-checks li{color:#C9D4F2}

/* Carrusel de reels de clientes */
.reels-clientes{padding-bottom:70px;overflow:hidden}
.pista-reels{display:flex;gap:22px;padding:8px max(6vw,calc((100% - var(--ancho)) / 2 + 16px)) 20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.reel{flex:0 0 230px;margin:0;scroll-snap-align:start}
.tel-mini{aspect-ratio:9/18;border-radius:28px;padding:8px;background:#0A0A12;box-shadow:0 0 0 2px rgba(255,255,255,.12),0 30px 60px -30px rgba(0,0,0,.8);overflow:hidden;position:relative}
.tel-mini video{width:100%;height:100%;object-fit:cover;border-radius:22px;display:block}
.tel-mini::before{content:"";position:absolute;top:14px;left:50%;width:60px;height:16px;margin-left:-30px;background:#0A0A12;border-radius:12px;z-index:2}
.reel figcaption{margin-top:12px;font:600 .95rem var(--f-tit);color:#fff;text-align:center}
.reel.marcador .tel-mini{display:grid;place-items:center;background:linear-gradient(160deg,var(--noche-2),var(--marino));color:#C9D4F2;text-align:center;font:600 .9rem/1.3 var(--f-tit)}
.reel.marcador .tel-mini small{display:block;font:400 .78rem var(--f-txt);color:#9FB0D6;margin-top:6px}
.reel.marcador:nth-child(2) .tel-mini{background:linear-gradient(160deg,#2A0A3A,#CE009D)}
.reel.marcador:nth-child(4) .tel-mini{background:linear-gradient(160deg,#0E1A33,#04CFD8)}
.reel.marcador:nth-child(6) .tel-mini{background:linear-gradient(160deg,#7B3BFF,#22093A)}

/* Tarjetas de hijos en hubs */
.tarjeta-hijo{text-decoration:none;color:inherit;display:block;transition:transform .35s,box-shadow .35s}
.tarjeta-hijo:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(11,18,34,.4)}
.tarjeta-hijo .ir{display:inline-block;margin-top:8px;font-weight:650;color:var(--acento);border-bottom:2px solid var(--cian-marca);padding-bottom:2px}
.tarjeta-hijo h3{font-size:1.1rem}
.con-indice .texto h2{margin-top:1.6em}
.con-indice .texto h2:first-child{margin-top:0}
.con-indice .texto ul li{margin-bottom:.35em}
.sobre-oscuro .encabezado:not(.solido) .btn-prim{background:var(--cian-marca);color:#0B1222}
.marca .logo{height:58px}
.cab-imagen .ficha .btn-prim{background:var(--cian-marca);color:#0B1222}
:root[data-sitio="marketing"] .cab-imagen .ficha .btn-prim{background:var(--magenta-marca);color:#fff}
.giro b,.cifra b{background:linear-gradient(120deg,#04CFD8 0%,#8ED8FF 45%,#FF5AD5 100%);-webkit-background-clip:text;background-clip:text}
/* Pasos de la historia: que el texto se siga leyendo aunque el paso no esté "activo" (antes quedaba casi invisible) */
@media (min-width:1081px){.pasos-historia>li{min-height:62vh}}
.pasos-historia>li{opacity:.72}
.pasos-historia>li.activo{opacity:1}
@media (max-width:1080px){.pasos-historia>li{opacity:1}}
.pasos-historia p{color:#3C4660}
.oscuro .pasos-historia p{color:#D7DEF2}
.mini-checks li{color:#3C4660}
.oscuro .mini-checks li{color:#D7DEF2}

/* Hero: paneles flotantes más interactivos (relieve al mover el mouse + brillo que sigue el cursor) y franja de confianza en forma de chips */
.vidrio,.telefono{transition:transform .1s linear}
.hero2 .apoyo{gap:10px 12px}
.hero2 .apoyo li{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:7px 14px 7px 11px;border-radius:999px;backdrop-filter:blur(6px);transition:background .25s,transform .25s}
.hero2 .apoyo li:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}

/* ---------- Encabezado v3.1: una barra, menú centrado, paneles con foto ---------- */
.encabezado.v31{position:sticky;top:0}
.encabezado.v31 .barra{display:flex;align-items:center;gap:18px;min-height:78px}
.encabezado.v31 .marca .logo{height:52px}
.encabezado.v31 .acciones{display:flex;align-items:center;gap:10px;margin-left:auto}
.btn-ico{width:44px;height:44px;border-radius:50%;padding:0;background:var(--wa);color:#fff;border-color:transparent}
.btn-ico svg{width:22px;height:22px}
.btn-ico:hover{transform:translateY(-2px)}
@media (min-width:1081px){
  .encabezado.v31 .nav-principal{border:0;flex:1;display:block;min-width:0}
  .encabezado.v31 .menu{justify-content:center;gap:0;margin:0}
  .encabezado.v31 .menu>li>button{font-size:.9rem;font-weight:600;padding:28px 10px;border-bottom:0;position:relative}
  .encabezado.v31 .menu>li>button::before{content:"";position:absolute;left:10px;right:10px;bottom:19px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
  .encabezado.v31 .menu>li>button:hover::before,.encabezado.v31 .menu>li>button[aria-expanded="true"]::before{transform:scaleX(1)}
  .encabezado.v31 .menu>li>button::after{transition:transform .25s}
}
@media (min-width:1081px){
  .encabezado.v31 .menu>li>button{font-size:.86rem;padding:28px 9px}
  .encabezado.v31.dos-filas .barra{flex-wrap:wrap;min-height:0;padding-top:10px}
  .encabezado.v31.dos-filas .nav-principal{order:3;flex-basis:100%;border-top:1px solid var(--linea);margin-top:8px}
  .encabezado.v31.dos-filas .menu{justify-content:space-between}
  .encabezado.v31.dos-filas .menu>li>button{padding:14px 8px}
  .encabezado.v31.dos-filas .menu>li>button::before{bottom:6px}
}
.sobre-oscuro .encabezado:not(.solido) .nav-principal{border-color:rgba(255,255,255,.1)}
.encabezado.v31 .panel{animation:panel-in .28s cubic-bezier(.2,.8,.2,1)}
@keyframes panel-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.encabezado.v31 .panel .contenedor{grid-template-columns:300px 1fr;gap:44px;padding:28px 24px 32px}
.panel-intro picture{display:block;border-radius:14px;overflow:hidden;aspect-ratio:16/10;margin-bottom:16px;background:var(--niebla)}
.panel-intro picture img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.panel-intro:hover picture img{transform:scale(1.05)}
.panel-intro h3{font-size:1.35rem}
.panel-intro a.ver{display:inline-flex;margin-top:12px;padding:9px 16px;font-size:.88rem}
.panel-cols{gap:22px 28px}
.panel-cols h4{color:var(--acento);text-transform:uppercase;letter-spacing:.06em;font-size:.74rem}
.panel-cols li a{display:flex;align-items:center;gap:9px;padding:6px 0;transition:transform .2s,color .2s}
.panel-cols li a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad);opacity:0;transform:scale(.4);transition:opacity .2s,transform .2s;flex:none}
.panel-cols li a:hover{transform:translateX(4px)}
.panel-cols li a:hover::before{opacity:1;transform:none}
@media (max-width:760px){.encabezado.v31 .acciones{display:none}.encabezado.v31 .barra{min-height:72px;box-shadow:0 10px 26px -18px rgba(11,18,34,.4)}.encabezado.v31 .marca .logo{height:48px;filter:drop-shadow(0 2px 8px rgba(4,207,216,.3)) drop-shadow(0 0 14px rgba(206,0,157,.16))}}
@media (max-width:1080px){.encabezado.v31 .barra{gap:12px}.encabezado.v31 .acciones .btn-prim{display:none}}
.encabezado .panel .btn-sec,.sobre-oscuro .encabezado:not(.solido) .panel .btn-sec{background:#fff;color:var(--tinta);border-color:var(--linea)}
.encabezado .panel .btn-sec:hover{border-color:var(--tinta)}
.encabezado.v31 .barra,.encabezado.v31 .marca .logo,.encabezado.v31 .menu>li>button{transition:min-height .3s,height .3s,padding .3s}
.encabezado.v31.solido .barra{min-height:62px}
.encabezado.v31.solido .marca .logo{height:40px}
.encabezado.v31.solido:not(.dos-filas) .menu>li>button{padding:20px 10px}
.encabezado.v31.solido:not(.dos-filas) .menu>li>button::before{bottom:12px}
.encabezado.v31.dos-filas.solido .barra{padding-top:4px}
.encabezado.v31.dos-filas.solido .menu>li>button{padding:9px 8px}
.encabezado.v31.dos-filas.solido .nav-principal{margin-top:2px}
@media (max-width:760px){.encabezado.v31.solido .marca .logo{height:44px}}

/* ---------- Cabeceras de menú (desktop): foto con degradado, tarjeta flotante y ayuda al final ---------- */
.panel{border-radius:0 0 22px 22px;margin:0 14px;overflow:hidden;isolation:isolate}
.panel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad);z-index:3}
.encabezado.v31 .panel .contenedor{align-items:stretch}
.panel-intro{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:auto;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;isolation:isolate}
.panel-intro picture{position:absolute;inset:0;margin:0;border-radius:0;aspect-ratio:auto}
.panel-intro picture img{width:100%;height:100%;object-fit:cover}
.panel-intro::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,10,24,.92) 0%,rgba(5,10,24,.4) 55%,rgba(5,10,24,.1) 85%);z-index:1}
.panel-intro h3,.panel-intro p,.panel-intro a.ver{position:relative;z-index:2}
.panel-intro h3{color:#fff;font-size:1.3rem;margin-bottom:.3em}
.panel-intro p{color:#D7DEF2;font-size:.92rem}
.panel-intro a.ver{align-self:flex-start;margin-top:14px;background:#fff;color:var(--tinta);border-color:transparent}
.panel-intro a.ver:hover{background:var(--cian-marca)}
.panel-cols li a{border-radius:10px;padding:7px 12px;margin:0 -12px;transition:background .2s,transform .2s,color .2s}
.panel-cols li a:hover{background:var(--niebla)}
.panel-ayuda{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px;padding-top:18px;border-top:1px solid var(--linea);font-size:.9rem;color:var(--gris)}
.panel-ayuda a{display:inline-flex;align-items:center;gap:8px;font-weight:650;color:var(--tinta);text-decoration:none}
.panel-ayuda a svg{width:18px;height:18px;color:var(--wa);flex:none}
.panel-ayuda a:hover{color:var(--acento)}

/* ---------- Menú móvil a pantalla completa (inspirado en purodulce.cl) ---------- */
body.sin-scroll{overflow:hidden}
.menu-movil{position:fixed;inset:0;z-index:90;display:none;flex-direction:column;background:var(--papel)}
.encabezado.abierto .menu-movil{display:flex}
@media (min-width:1081px){.menu-movil{display:none!important}}
.mm-cab{position:relative;flex:none;background:linear-gradient(160deg,var(--noche) 0%,var(--noche-2) 100%);color:#fff;padding:28px 60px 26px 22px;border-radius:0 0 26px 26px}
.mm-cab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--grad);border-radius:0 0 26px 26px}
.mm-ojo{display:block;font:700 .72rem var(--f-txt);letter-spacing:.1em;text-transform:uppercase;color:var(--cian-marca);margin-bottom:8px}
.mm-cab h2{font-family:var(--f-hero);font-weight:800;font-size:1.7rem;line-height:1.1;margin:0;max-width:12ch;color:#fff}
.mm-cerrar{position:absolute;right:18px;top:24px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer}
.mm-cuerpo{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 20px 120px}
.mm-accesos{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--linea);font-size:.9rem}
.mm-accesos a{display:inline-flex;align-items:center;gap:6px;color:var(--tinta);text-decoration:none;font-weight:650}
.mm-accesos a span{color:var(--acento)}
.mm-promo{position:relative;display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--noche-2),var(--marino));color:#fff;border-radius:18px;padding:16px 18px;text-decoration:none;margin-bottom:24px;overflow:hidden}
.mm-promo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:repeating-linear-gradient(135deg,var(--magenta-marca) 0 10px,var(--cian-marca) 10px 20px);opacity:.9}
.mm-promo-ico{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none}
.mm-promo-ico svg{width:20px;height:20px}
.mm-promo-txt{flex:1;min-width:0}
.mm-promo-txt b{display:block;font-size:1rem}
.mm-promo-txt small{color:#C9D4F2}
.mm-promo-fl{font-size:1.3rem;opacity:.8;flex:none}
.mm-sub{font:700 .92rem var(--f-txt);color:var(--tinta);margin:0 0 12px}
.mm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.mm-tile{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--linea);border-radius:16px;padding:10px;text-decoration:none;color:var(--tinta);transition:border-color .2s,transform .2s}
.mm-tile:active{transform:scale(.97)}
.mm-tile picture{width:52px;height:52px;border-radius:12px;overflow:hidden;flex:none;display:block}
.mm-tile img{width:100%;height:100%;object-fit:cover}
.mm-tile b{display:block;font-size:.9rem;line-height:1.15}
.mm-tile small{display:block;color:var(--gris);font-size:.72rem;line-height:1.25;margin-top:2px}
.mm-otro{display:block;text-align:center;font-size:.88rem;color:var(--acento);text-decoration:none;font-weight:650;margin:16px 0 24px}
.mm-ayuda{background:var(--niebla);border-radius:18px;padding:18px}
.mm-ayuda b{display:block;margin-bottom:4px}
.mm-ayuda p{margin:0 0 14px;color:var(--gris);font-size:.9rem}
.mm-ayuda .btn{width:100%}
.mm-ayuda .btn-grad{background:var(--wa);color:#fff;justify-content:flex-start;gap:12px;padding:13px 18px;border-radius:14px;font-weight:650;box-shadow:0 14px 28px -12px rgba(18,131,68,.55)}
.mm-ayuda .btn-grad svg{width:20px;height:20px;flex:0 0 auto}
.mm-ayuda .btn-grad:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(18,131,68,.65)}

/* ---------- Botones flotantes: WhatsApp + enlace cruzado entre codecloud.cl y marketingcodecloud.cl ---------- */
.wa-grupo{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;align-items:stretch;gap:10px;width:min(80vw,272px)}
.wa-boton{position:relative;display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;border-radius:16px;padding:12px 32px 12px 14px;box-shadow:0 16px 32px -14px rgba(11,18,34,.55);transition:transform .2s,box-shadow .2s}
.wa-boton:hover{transform:translateY(-2px)}
.wa-boton svg:not(.wa-boton-flecha){width:22px;height:22px;flex:0 0 auto}
.wa-boton-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.wa-boton b{display:block;font-size:.86rem;line-height:1.2}
.wa-boton span{display:block;font-size:.72rem;opacity:.88;line-height:1.25}
.wa-boton-flecha{position:absolute;right:10px;top:10px;width:14px;height:14px;opacity:.75}
.wa-flotante{background:var(--wa);box-shadow:0 16px 32px -14px rgba(18,131,68,.6)}
.wa-cruce{background:var(--acento)}
:root[data-sitio="marketing"] .wa-cruce{background:var(--magenta-marca)}
@media (max-width:760px){.wa-grupo{right:14px;bottom:14px}}
@media (max-width:560px){
  .wa-grupo{width:auto;gap:12px}
  .wa-boton{width:50px;height:50px;padding:0;border-radius:50%;justify-content:center}
  /* V66: ".wa-boton span{display:block}" tiene mas especificidad que ".wa-boton-txt{display:none}",
     por eso el texto no se ocultaba del todo en mobile y se veia "sangrando" detras del circulo */
  .wa-boton .wa-boton-txt,.wa-boton .wa-boton-flecha{display:none}
}
@media (max-width:1080px){
  /* El menú de acordeón antiguo queda reemplazado por el menú móvil a pantalla completa */
  .encabezado.abierto .nav-principal{display:none}
  /* Los botones flotantes no deben tapar el menú móvil abierto */
  body.sin-scroll .wa-grupo{display:none}
}

/* ---------- V40: encabezado con más efecto, rubros más vivos, carrusel de planes ---------- */

/* Encabezado: línea de acento en degradé + logo con giro al pasar + menú con subrayado animado + CTA con brillo */
.encabezado{overflow:visible}
.enc-acento{display:block;height:3px;background:var(--grad);background-size:220% 100%;animation:enc-flujo 7s linear infinite}
@keyframes enc-flujo{to{background-position:220% 0}}
.encabezado .marca .logo{transition:transform .5s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 2px 6px rgba(4,207,216,.22)) drop-shadow(0 0 12px rgba(206,0,157,.12))}
.encabezado .marca:hover .logo-oscuro,.encabezado .marca:hover .logo-blanco{transform:rotate(-7deg) scale(1.07)}
.menu>li>button{position:relative;border-bottom-color:transparent!important}
.menu>li>button::before{content:"";position:absolute;left:12px;right:12px;bottom:7px;height:2px;background:var(--grad);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.menu>li>button:hover::before,.menu>li>button[aria-expanded="true"]::before{transform:scaleX(1)}
.encabezado.solido{box-shadow:0 18px 40px -28px rgba(11,18,34,.35)}
.acciones .btn-prim{position:relative;overflow:hidden;isolation:isolate}
.acciones .btn-prim::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);transition:left .65s ease;z-index:1}
.acciones .btn-prim:hover::after{left:140%}
@media (max-width:1080px){.enc-acento{height:2px}}

/* Mosaico "para tu rubro": tarjetas con más vida al pasar el mouse */
.rubro{transition:box-shadow .45s}
.rubro:hover,.rubro:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.16),0 30px 55px -24px rgba(0,0,0,.6)}
.rubro-cta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:700 .78rem var(--f-txt);color:#fff;background:var(--grad);padding:6px 13px;border-radius:999px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s;width:fit-content}
.rubro:hover .rubro-cta,.rubro:focus-visible .rubro-cta{opacity:1;transform:translateY(0)}
.rubro-cta i{font-style:normal;display:inline-block;transition:transform .35s}
.rubro:hover .rubro-cta i{transform:translateX(4px)}
@media (hover:none){.rubro-cta{opacity:1;transform:none}}

/* Carrusel de planes: desliza en vez de romper el grid con el plan Empresa suelto */
.planes-carrusel{position:relative;margin:0 -4px}
.planes-carrusel .planes{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:4px;padding:6px 4px 14px;scrollbar-width:thin}
.planes-carrusel .plan{flex:0 0 272px;scroll-snap-align:start}
.car-nav{position:absolute;top:40%;translate:0 -50%;width:42px;height:42px;border-radius:50%;border:1px solid var(--linea);background:#fff;box-shadow:0 14px 30px -14px rgba(11,18,34,.4);display:grid;place-items:center;font-size:1.3rem;cursor:pointer;z-index:3;transition:transform .25s,background .25s}
.car-nav:hover{transform:translateY(-50%) scale(1.08);background:var(--acento-suave)}
.car-prev{left:-14px}
.car-next{right:-14px}
.oscuro .car-nav{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(6px)}
.oscuro .car-nav:hover{background:rgba(255,255,255,.18)}
.car-puntos{display:flex;justify-content:center;gap:7px;margin-top:4px}
.car-puntos span{width:7px;height:7px;border-radius:50%;background:var(--linea);transition:background .3s,transform .3s}
.car-puntos span.activo{background:var(--acento);transform:scale(1.3)}
.oscuro .car-puntos span{background:rgba(255,255,255,.2)}
.oscuro .car-puntos span.activo{background:var(--cian-marca)}
@media (max-width:640px){.car-nav{display:none}}

/* Plan "Empresa": tarjeta aparte con imagen, para que no quede como plan suelto y desordenado */
.plan-medida{position:relative;color:#fff;overflow:hidden;border-color:transparent}
.plan-medida picture{position:absolute;inset:0;z-index:0;display:block}
.plan-medida .plan-fondo{width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.4);display:block}
.plan-medida::before{content:"";position:absolute;inset:0;background:linear-gradient(175deg,rgba(11,18,34,.55) 0%,var(--marino) 78%);z-index:1}
.plan-medida>*{position:relative;z-index:2}
.plan-medida h3,.plan-medida .para{color:#fff}
.plan-medida .nota{color:#C9D4F2}
.plan-medida li{border-color:rgba(255,255,255,.14);color:#E3E9F8}
.plan-medida li.no{color:#9FB0D6}
.tag-medida{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3)}

/* ---------- V41: el encabezado deja de ser fijo/pegado — al hacer scroll se va con la página ---------- */
.encabezado,.encabezado.v31{position:relative;top:auto}
.sobre-oscuro main{margin-top:0}
.sobre-oscuro .encabezado:not(.solido){background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,250,255,.95));border-color:var(--linea);backdrop-filter:saturate(1.4) blur(6px);box-shadow:0 14px 32px -26px rgba(11,18,34,.32)}
.sobre-oscuro .encabezado:not(.solido) .marca,.sobre-oscuro .encabezado:not(.solido) .menu>li>button{color:var(--tinta)}
.sobre-oscuro .encabezado:not(.solido) .marca small{color:var(--gris)}
.sobre-oscuro .encabezado:not(.solido) .nav-principal{border-color:var(--linea)}
.sobre-oscuro .encabezado:not(.solido) .btn-sec{background:#fff;color:var(--tinta);border-color:var(--linea)}
.sobre-oscuro .encabezado:not(.solido) .hamburguesa{border-color:var(--linea)}
.sobre-oscuro .encabezado:not(.solido) .hamburguesa span{background:var(--tinta)}
.sobre-oscuro .encabezado:not(.solido) .marca .logo-oscuro{display:block}
.sobre-oscuro .encabezado:not(.solido) .marca .logo-blanco{display:none}
.sobre-oscuro .encabezado:not(.solido) .etiqueta-mk{background:var(--magenta-marca);border:0;color:#fff}
.sobre-oscuro .encabezado:not(.solido) .btn-prim{background:var(--acento);color:#fff}

/* ---------- V42: "Tu mes con nosotros" (marketing) ahora es una línea de tiempo, sin imágenes ---------- */
.linea-tiempo{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.linea-tiempo::before{content:"";position:absolute;top:19px;left:0;right:0;height:2px;background:var(--linea);z-index:0}
.linea-tiempo>li{position:relative;z-index:1;padding:0 16px 0 0;display:flex;flex-direction:column;align-items:flex-start}
.lt-punto{width:40px;height:40px;border-radius:50%;background:var(--papel);border:2px solid var(--acento);color:var(--acento);display:grid;place-items:center;font:700 1.05rem var(--f-tit);margin-bottom:20px;transition:background .3s,color .3s,transform .3s}
.linea-tiempo>li:hover .lt-punto{background:var(--acento);color:#fff;transform:scale(1.08)}
.lt-cont time{display:block;font:700 .76rem var(--f-txt);color:var(--acento);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.lt-cont h3{font-size:1.08rem;line-height:1.2;margin-bottom:8px}
.lt-cont p{font-size:.92rem;color:var(--gris);line-height:1.5;margin:0}
@media (max-width:900px){
  .linea-tiempo{grid-template-columns:1fr;gap:30px}
  .linea-tiempo::before{top:0;bottom:0;left:19px;right:auto;width:2px;height:auto}
  .linea-tiempo>li{flex-direction:row;align-items:flex-start;gap:18px;padding:0}
  .lt-punto{margin-bottom:0;flex:0 0 auto}
}

/* ---------- V46: carrusel de video "coverflow" (gira y se aleja como si pasara por una esquina) ---------- */
.reels-carrusel{position:relative}
.reels-clientes .pista-reels{scroll-padding-inline:calc(50% - 115px);padding-inline:calc(50% - 115px)}
.reel{scroll-snap-align:center}
.reels-clientes .car-prev{left:6px}
.reels-clientes .car-next{right:6px}
@media (max-width:760px){.reels-clientes .pista-reels{scroll-padding-inline:calc(50% - 95px);padding-inline:calc(50% - 95px)}}

/* ---------- V46: numero de orden en el mosaico de rubros ---------- */
.rubro-num{position:absolute;top:14px;left:16px;z-index:3;font:700 .78rem var(--f-tit);color:#fff;background:rgba(5,10,24,.45);backdrop-filter:blur(4px);padding:4px 9px;border-radius:999px;letter-spacing:.04em}

/* ---------- V46: nueva seccion "Grabamos en tu negocio" como collage flotante de video ---------- */
.mk-collage{padding:100px 0 110px;overflow:hidden}
.mk-collage-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.mk-collage-txt p{color:#C9D4F2;font-size:1.05rem;max-width:46ch;margin:16px 0 26px}
.mk-collage-visual{position:relative;height:420px}
.mk-tarjeta{position:absolute;width:168px;aspect-ratio:9/16;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -22px rgba(0,0,0,.75),0 0 0 2px rgba(255,255,255,.12)}
.mk-tarjeta video{width:100%;height:100%;object-fit:cover;display:block}
.mk-t1{left:0;top:6%;transform:translate3d(var(--px,0),var(--py,0),0) rotate(-8deg);z-index:2}
.mk-t2{left:30%;top:32%;transform:translate3d(var(--px,0),var(--py,0),0) rotate(4deg);z-index:3}
.mk-t3{left:60%;top:0;transform:translate3d(var(--px,0),var(--py,0),0) rotate(11deg);z-index:1}
.mk-collage-visual .burbuja{position:absolute}
.mk-b1{left:-2%;bottom:0}
.mk-b2{right:-2%;top:-2%}
.mk-b3{left:38%;bottom:-6%;animation-delay:-3s}
@media (max-width:900px){
  .mk-collage-grid{grid-template-columns:1fr}
  .mk-collage-visual{height:300px;margin-top:16px}
  .mk-tarjeta{width:120px}
  .mk-t1{left:0;top:8%}
  .mk-t2{left:30%;top:36%}
  .mk-t3{left:58%;top:2%}
  .mk-b1{display:none}
  .mk-b2{right:0;top:-10%}
  .mk-b3{display:none}
}

/* ---------- V47: ocultar scrollbars nativas + rediseño sección rubros ---------- */
.pista-reels,.planes-carrusel .planes,.horizontal .pista-h{scrollbar-width:none;-ms-overflow-style:none}
.pista-reels::-webkit-scrollbar,.planes-carrusel .planes::-webkit-scrollbar,.horizontal .pista-h::-webkit-scrollbar{display:none;width:0;height:0}
.rubros{grid-template-columns:repeat(4,1fr);grid-auto-rows:260px;gap:18px}
.rubro:nth-child(7){grid-column:span 1;grid-row:span 1}
.rubro:nth-child(7) b{font-size:1.15rem}
.rubro{border-radius:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.rubro img{filter:saturate(1.05)}
.rubro:hover img{filter:saturate(1.25)}
.rubro::after{background:linear-gradient(180deg,transparent 28%,rgba(5,10,24,.18) 52%,rgba(5,10,24,.94) 100%)}
.rubro .txt>span{max-height:none;opacity:.8;overflow:visible;transition:opacity .4s}
.rubro:hover .txt>span,.rubro:focus-visible .txt>span{opacity:1}
.rubro-num{background:var(--grad);color:#fff;font-size:.8rem;padding:5px 12px;box-shadow:0 10px 22px -10px rgba(123,59,255,.75);backdrop-filter:none}
.rubro-cta{opacity:.92}
.rubro:nth-child(1) .txt{left:28px;right:28px;bottom:28px}
.rubro:nth-child(1) .txt>span{font-size:.95rem;max-width:36ch}
@media (max-width:1080px){.rubros{grid-template-columns:repeat(3,1fr);grid-auto-rows:240px}}
@media (max-width:760px){
  .rubros{grid-template-columns:repeat(2,1fr);grid-auto-rows:190px;gap:12px}
  .rubro:nth-child(1) .txt{left:18px;right:18px;bottom:16px}
  .rubro:nth-child(1) .txt>span{font-size:.85rem}
}

/* ---------- V48: servicios como carrusel normal (ya no scroll-jacked) ---------- */
.tarjeta-h{scroll-snap-align:start}
.tarjetas-h-carrusel{position:relative}
.tarjetas-h-carrusel .pista-h{display:flex;gap:22px;padding:6px max(6vw,calc((100% - var(--ancho)) / 2 + 16px)) 20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.tarjetas-h-carrusel .pista-h::-webkit-scrollbar{display:none;width:0;height:0}
.tarjetas-h-carrusel .car-prev{left:6px}
.tarjetas-h-carrusel .car-next{right:6px}

/* ---------- V49: collage de video real en el hero de marketing ---------- */
.hero-visual{margin:0 auto}
@media (max-width:1080px){.hero-visual{margin-top:40px}}

/* ---------- V50: "Marketing para tu rubro" / "Planes a la medida de tu rubro" como carrusel ---------- */
.rubros-carrusel{position:relative;margin:0 -4px}
.rubros{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:4px;padding:6px 4px 16px;scrollbar-width:none;-ms-overflow-style:none}
.rubros::-webkit-scrollbar{display:none;width:0;height:0}
.rubro{flex:0 0 280px;height:400px;scroll-snap-align:start}
.rubro:nth-child(1) b,.rubro:nth-child(7) b{font-size:1.15rem}
.rubro:nth-child(1) .txt{left:18px;right:18px;bottom:18px}
.rubro:nth-child(1) .txt>span{font-size:.85rem;max-width:none}
@media (max-width:760px){.rubro{flex:0 0 220px;height:330px}}

/* ---------- V51: reels de clientes vuelve a carrusel normal, todos los videos activos ---------- */
.reels-clientes .pista-reels{padding-inline:max(6vw,calc((100% - var(--ancho)) / 2 + 16px))}
.reel{scroll-snap-align:start}

/* ---------- V51: contraste de color entre "Grabamos en tu negocio" y el formulario de contacto ---------- */
.mk-collage+.bloque-marino{position:relative;isolation:isolate;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.mk-collage+.bloque-marino::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 60% 55% at 88% -8%,rgba(123,59,255,.38),transparent 62%),radial-gradient(ellipse 55% 45% at 4% 108%,rgba(255,79,163,.2),transparent 62%)}
.mk-collage+.bloque-marino>.contenedor{position:relative;z-index:1}

/* ---------- V51: formulario de contacto con más diseño UI/UX ---------- */
.caja{border-radius:20px;box-shadow:0 20px 48px -22px rgba(10,16,40,.35);transition:transform .25s ease,box-shadow .25s ease}
.caja:hover{transform:translateY(-3px);box-shadow:0 26px 56px -20px rgba(10,16,40,.42)}
.bloque-marino .caja h2,.bloque-marino .caja h3{color:var(--tinta)}
.caja h3{display:flex;align-items:center;gap:9px}
.caja h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad);flex:none}
.form label{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gris);font-weight:700}
.form input,.form select,.form textarea{padding:13px 14px;border-radius:12px;background:#FAFBFF;transition:border-color .2s,box-shadow .2s,background .2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 4px rgba(61,107,255,.14);background:#fff}
:root[data-sitio="marketing"] .form input:focus,:root[data-sitio="marketing"] .form select:focus,:root[data-sitio="marketing"] .form textarea:focus{box-shadow:0 0 0 4px rgba(123,59,255,.16)}
.form .full button{width:auto;padding:13px 30px}
.agenda-dias button,.agenda-horas button{border-radius:12px;transition:transform .15s,border-color .15s}
.agenda-dias button:hover,.agenda-horas button:hover{transform:translateY(-1px);border-color:var(--acento)}

/* ---------- V52: que ninguna tarjeta se vea cortada en el borde de los carruseles (se desvanece en vez de cortarse) ---------- */
.pista-reels,.tarjetas-h-carrusel .pista-h{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.rubros-carrusel{margin:0 -16px}
.rubros{padding:6px 16px 16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
@media (max-width:640px){
  .pista-reels,.tarjetas-h-carrusel .pista-h{-webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
  .rubros{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
}

/* ---------- V55: "Marketing para tu rubro" / "Planes a la medida de tu rubro" en 3D (coverflow) sobre fondo oscuro ---------- */
.rubros-seccion{position:relative;overflow:hidden}
.rubros-seccion::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 70% 60% at 50% -10%,rgba(255,255,255,.07),transparent 60%)}
.rubros-seccion>.contenedor{position:relative;z-index:1}
.rubros-carrusel{perspective:1400px}
.rubros{padding-inline:max(6vw,calc((100% - var(--ancho)) / 2 + 16px));mask-image:none;-webkit-mask-image:none}
.rubro{scroll-snap-align:center;transform-origin:center;will-change:transform,opacity}
@media (max-width:760px){.rubros{padding-inline:20px}}

/* ---------- V56: portada de marketing — título más compacto para que los 3 videos se luzcan más ---------- */
:root[data-sitio="marketing"] .hero2{padding:140px 0 70px}
:root[data-sitio="marketing"] .hero2 h1{font-size:clamp(2.1rem,4vw,3.5rem);line-height:1.08;max-width:11ch;margin-bottom:.3em}
:root[data-sitio="marketing"] .hero2 .giro{font-size:clamp(1.05rem,1.8vw,1.3rem);margin-bottom:18px}
:root[data-sitio="marketing"] .hero2 .bajada{font-size:1.05rem;max-width:42ch}
:root[data-sitio="marketing"] .hero2 .contenedor{grid-template-columns:1fr 1.08fr;gap:56px}
.hero-visual.mk-collage-visual{height:29.375rem;width:100%}
.hero-visual .mk-tarjeta{width:11.75rem}
.hero-visual .mk-t1{left:0;top:6%}
.hero-visual .mk-t2{left:30%;top:32%}
.hero-visual .mk-t3{left:60%;top:0}
.hero-visual .mk-b1{left:-4%;bottom:6%;white-space:nowrap}
.hero-visual .mk-b2{white-space:nowrap}
.hero-visual .mk-b3{left:auto;right:-4%;bottom:-8%;white-space:nowrap}
@media (max-width:1080px){
  :root[data-sitio="marketing"] .hero2 .contenedor{grid-template-columns:1fr}
  .hero-visual.mk-collage-visual{height:340px;margin-top:24px}
  .hero-visual .mk-tarjeta{width:136px}
}
@media (max-width:480px){
  .hero-visual.mk-collage-visual{height:300px}
  .hero-visual .mk-tarjeta{width:120px}
}

/* ---------- V58: portada — profundidad 3D al mover el mouse + globos flotantes con más diseño ---------- */
:root[data-sitio="marketing"] .hero2 .contenedor{perspective:1800px}
.hero-visual{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.hero-visual .mk-tarjeta{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;will-change:transform}
.hero-visual .mk-tarjeta:hover{z-index:5!important;box-shadow:0 44px 90px -26px rgba(0,0,0,.85),0 0 0 2px rgba(255,255,255,.3)}
.hero-visual .burbuja{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.6);box-shadow:0 20px 44px -18px rgba(0,0,0,.6),0 0 24px -6px var(--acento);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
:root[data-sitio="marketing"] .hero-visual .burbuja{box-shadow:0 20px 44px -18px rgba(0,0,0,.6),0 0 26px -4px rgba(255,79,163,.45)}
@media (prefers-reduced-motion:reduce){.hero-visual,.hero-visual .mk-tarjeta,.hero-visual .burbuja{transition:none}}

/* ---------- V61: arregla el menu movil roto -- backdrop-filter en el header creaba un "containing block" que
   encogia el panel fixed (#menu-movil) al tamano del header en vez de pantalla completa ---------- */
.encabezado.abierto{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* ---------- V65: formulario de contacto con selector de 4 contextos (solicitud especifica, que me contacten, reunion online, visita presencial) ---------- */
.selector-contacto{display:flex;flex-wrap:wrap;gap:8px;max-width:640px;margin:0 auto 26px;justify-content:center;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);padding:7px;border-radius:16px}
.selector-contacto button{display:inline-flex;align-items:center;gap:8px;flex:1 1 auto;justify-content:center;white-space:nowrap;color:#C9D3EC;border-radius:10px}
.selector-contacto button svg{width:18px;height:18px;flex:0 0 auto}
.selector-contacto button[aria-pressed="true"]{background:var(--acento);color:#fff}
.contacto-panel{max-width:640px;margin:0 auto}
.contacto-panel .caja{margin:0}
.contacto-alt{text-align:center;margin-top:18px;color:#C7D0E4}
@media (max-width:640px){
  .selector-contacto button{flex:1 1 45%;font-size:.8rem;padding:9px 8px}
}

/* V84: fixes de accesibilidad (contraste) - ver parche_v84.py */
.pasos-historia time{color:#1A3FC4}
.pie-cols>div>p>a{color:#C4CBD9}
.wa-boton .wa-boton-txt b,.wa-boton .wa-boton-txt span{color:#fff;opacity:1}
.popup-mk-insignia img{object-fit:contain}