/* FormaFlow · web 2026 · portada en local */

:root{
  --texto:#212529;
  --texto-2:#4b5560;
  --gris-1:#f4f4f4;
  --gris-2:#f3f5f7;
  --linea:#dfe3e8;
  --magenta:#c40fd6;      /* botón y acento: magenta violáceo del logotipo, un punto más claro para botón */
  --magenta-osc:#ae00e3;
  --rosa:#f820a8;
  --violeta:#8818f8;
  --indigo:#4800b8;
  --amarillo:#ffe500;
  --grad-cabecera:linear-gradient(129deg,#4a0fb8 0%,#8a14d8 38%,#c40fd6 68%,#d60082 100%);
  --grad-banda-a:linear-gradient(120deg,#2a0a8c 0%,#6a12c8 55%,#b010d0 100%);
  --grad-banda-b:linear-gradient(120deg,#d60082 0%,#b010d0 55%,#5a12c0 100%);
  --grad-banda-c:linear-gradient(120deg,#3d12c8 0%,#5a1fe0 50%,#2a0a8c 100%);
  --ancho:1320px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Work Sans',system-ui,sans-serif;font-size:16px;line-height:1.5;color:var(--texto);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;width:auto;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.cont{max-width:var(--ancho);margin:0 auto;padding:0 32px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:12px 18px;font-size:18px;font-weight:500;line-height:1.2;transition:filter .15s,background .15s;white-space:nowrap}
.btn-1{background:var(--magenta-osc);color:#fff}
.btn-1:hover{filter:brightness(1.12)}
.btn-2{background:#fff;color:var(--magenta-osc);box-shadow:inset 0 0 0 1px var(--magenta-osc)}
.btn-2:hover{background:#fbf0ff}
.btn.peq{font-size:15px;padding:10px 14px}
.botones{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- Franja de anuncio ---------- */
.anuncio{background:#1c0a45;color:#fff;font-size:14px;text-align:center;padding:9px 16px}
.anuncio a{text-decoration:underline;margin-left:10px;font-weight:500}

/* ---------- Cabecera y menú ---------- */
.cab{position:sticky;top:0;z-index:50;background:transparent;transition:background .2s,box-shadow .2s}
.cab .cont{display:flex;align-items:center;height:76px;gap:28px}
.cab .logo img{height:72px;margin-left:-10px}
.cab .logo .claro{display:none}
.cab nav{display:flex;gap:4px}
.cab nav > button{display:flex;align-items:center;gap:6px;padding:10px 12px;font-size:17px;font-weight:600;color:#fff;border-radius:8px}
.cab nav > button::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.cab nav > button[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}
.cab .der{margin-left:auto;display:flex;gap:12px;align-items:center}
.cab .der .btn-1{background:#fff;color:var(--magenta-osc)}
.cab .der .btn-2{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff}
.cab.fija,.cab.abierta{background:#fff;box-shadow:0 1px 0 var(--linea)}
.cab.fija .logo .oscuro,.cab.abierta .logo .oscuro{display:none}
.cab.fija .logo .claro,.cab.abierta .logo .claro{display:block}
.cab.fija nav > button,.cab.abierta nav > button{color:var(--texto)}
.cab.fija .der .btn-1,.cab.abierta .der .btn-1{background:var(--magenta-osc);color:#fff}
.cab.fija .der .btn-2,.cab.abierta .der .btn-2{background:#fff;color:var(--magenta-osc);box-shadow:inset 0 0 0 1px var(--magenta-osc)}

.mega{display:none;position:absolute;left:0;right:0;top:76px;background:#fff;box-shadow:0 18px 40px rgba(20,10,60,.16);border-top:1px solid var(--linea)}
.mega.visible{display:block}
.mega .cont{display:grid;grid-template-columns:400px 1fr;gap:0;padding-top:0;padding-bottom:0}
.mega .lista{background:var(--gris-2);padding:22px 14px}
.mega .lista button{display:block;width:100%;text-align:left;padding:13px 16px;border-radius:8px}
.mega .lista button b{display:block;font-weight:600;font-size:17px}
.mega .lista button span{display:block;font-size:14px;color:var(--texto-2);margin-top:2px}
.mega .lista button.activo{background:#fff;box-shadow:0 1px 4px rgba(51,51,51,.14)}
.mega .lista button.activo b{color:var(--magenta-osc)}
.mega .detalle{padding:30px 40px 34px}
.mega .detalle > div{display:none}
.mega .detalle > div.activo{display:block}
.mega .rot{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--texto-2);margin:22px 0 10px}
.mega .enlaces{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px}
.mega .enlaces a{display:block;padding:10px 12px;border-radius:8px}
.mega .enlaces a:hover{background:var(--gris-2)}
.mega .enlaces a b{display:block;font-weight:600}
.mega .enlaces a span{display:block;font-size:14px;color:var(--texto-2)}
.mega.simple .cont{display:block;padding:26px 32px 30px}
.mega.simple .enlaces{grid-template-columns:repeat(3,1fr)}

/* ---------- Cabecera de portada ---------- */
.portada{background:var(--grad-cabecera);color:#fff;margin-top:-76px;padding-top:76px;position:relative;overflow:hidden}
.portada .cont{display:grid;grid-template-columns:1.08fr 1fr;gap:40px;align-items:center;min-height:660px;padding-top:40px;padding-bottom:30px}
.ante{font-size:18px;letter-spacing:.02em;text-transform:uppercase;color:var(--amarillo)}
.portada h1{font-weight:200;font-size:68px;line-height:1;letter-spacing:-.6px;margin:6px 0 26px}
.portada p.sub{font-size:18px;line-height:1.6;max-width:640px;margin-bottom:38px}
.portada .botones .btn-1{background:var(--rosa)}
.portada .botones .btn-2{box-shadow:none}

.escena{position:relative;height:560px}
.escena .disco{position:absolute;right:20px;top:50px;width:470px;height:470px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffb26b 0%,#ff5fa2 55%,#d61fd0 100%);opacity:.9}
.escena .esfera{position:absolute;right:38px;top:20px;width:440px;filter:drop-shadow(0 30px 50px rgba(30,0,80,.45))}
.escena .ficha{position:absolute;background:#fff;border-radius:12px;box-shadow:0 14px 36px rgba(30,0,80,.32);overflow:hidden}
.escena .f1{left:0;top:96px;width:330px}
.escena .f2{right:0;top:300px;width:300px}
.escena .f3{left:60px;bottom:26px;width:360px}

.cinta{border-top:1px solid rgba(255,255,255,.18);overflow:hidden;padding:26px 0}
.cinta .pista{display:flex;gap:70px;white-space:nowrap;animation:pasa 38s linear infinite;width:max-content}
.cinta span{font-size:22px;font-weight:600;letter-spacing:.01em;opacity:.95}
.cinta span i{font-style:normal;font-weight:300}
@keyframes pasa{to{transform:translateX(-50%)}}

/* ---------- Secciones ---------- */
section{padding:96px 0}
.centro{text-align:center}
.etq{font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;background:linear-gradient(177deg,#c40fd6 0%,#4800b8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
h2{font-weight:300;font-size:46px;line-height:1.15;letter-spacing:-.5px}
h3{font-weight:400;font-size:30px;line-height:1.2;letter-spacing:-.3px}
.entr{font-size:17px;color:var(--texto);max-width:900px;margin:16px auto 0}
.marca-prod{font-size:38px;font-weight:600;letter-spacing:-.02em;line-height:1}
.marca-prod i{font-style:normal;font-weight:300}

/* Producto destacado */
.destacado .media{max-width:1040px;margin:44px auto 0;border-radius:22px;padding:3px;background:linear-gradient(120deg,var(--rosa),var(--violeta),var(--indigo));box-shadow:0 26px 60px rgba(72,0,184,.22)}
.destacado .media .dentro{border-radius:19px;overflow:hidden;background:#0b3a40;position:relative}
.destacado .media .nota{position:absolute;right:16px;bottom:14px;background:rgba(10,5,30,.72);color:#fff;font-size:13px;padding:6px 10px;border-radius:6px}
.destacado .btn{margin-top:22px}

/* Pestañas de productos */
.pest{margin-top:48px;border-radius:18px;background:#fbfbfb;box-shadow:0 0 2px rgba(51,51,51,.16),2px 4px 14px rgba(51,51,51,.14);overflow:hidden}
.pest .barra{display:grid;grid-template-columns:repeat(6,1fr)}
.pest .barra button{padding:26px 10px;font-size:17px;color:var(--texto-2);background:var(--gris-1);border-bottom:1px solid var(--linea);border-left:1px solid var(--linea);display:flex;gap:10px;align-items:center;justify-content:center}
.pest .barra button:first-child{border-left:0}
.pest .barra button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}
.pest .barra button.activo{background:#fbfbfb;color:var(--texto);border-bottom-color:transparent}
.pest .barra button.activo svg{stroke:var(--magenta-osc)}
.pest .panel{display:none;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:70px 80px;min-height:460px}
.pest .panel.activo{display:grid}
.pest .panel h3{margin:26px 0 14px}
.pest .panel p{font-size:17px;max-width:520px;margin-bottom:30px}
.pest .panel .img{border-radius:14px;overflow:hidden;box-shadow:0 16px 40px rgba(40,10,90,.22);background:#fff}
.pest .panel .hueco{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;text-align:center;border:2px dashed #c9b6e8;border-radius:14px;color:#7a5fb0;font-size:15px;padding:20px;background:#faf6ff}

/* Acordeón de casos de uso */
.ciclo .cuerpo{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;margin-top:56px;align-items:start}
.ciclo .lienzo{background:var(--gris-1);border-radius:18px;padding:36px;min-height:470px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.ciclo .lienzo img{border-radius:12px;box-shadow:0 14px 34px rgba(40,10,90,.2)}
.acord .fila{border-top:1px solid var(--linea)}
.acord .fila:last-child{border-bottom:1px solid var(--linea)}
.acord .fila > button{display:flex;width:100%;justify-content:space-between;align-items:center;padding:30px 0;font-size:22px;font-weight:600;text-align:left;gap:20px}
.acord .mas{flex:0 0 38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--magenta-osc);position:relative}
.acord .mas::before,.acord .mas::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;background:var(--magenta-osc);transform:translate(-50%,-50%)}
.acord .mas::after{transform:translate(-50%,-50%) rotate(90deg);transition:opacity .15s}
.acord .fila.abierta .mas::after{opacity:0}
.acord .resp{display:none;padding:0 60px 30px 0;font-size:19px;color:var(--texto)}
.acord .fila.abierta .resp{display:block}

/* Bandas de llamada */
.banda{padding:28px 0}
.banda .caja{border-radius:44px;color:#fff;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;min-height:440px;padding:60px 70px;position:relative;overflow:hidden}
.banda h2{font-weight:300;font-size:50px;margin-bottom:22px}
.banda p{font-size:19px;line-height:1.7;max-width:760px;margin-bottom:34px}
.banda .btn-2{box-shadow:none}
.banda .adorno{justify-self:center;width:340px;filter:drop-shadow(0 26px 40px rgba(20,0,60,.45))}
.banda.a .caja{background:var(--grad-banda-c)}
.banda.b .caja{background:var(--grad-banda-a)}
.banda.c .caja{background:var(--grad-banda-b);grid-template-columns:.8fr 1.2fr}

/* Sectores */
.sectores .rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:54px}
.tarjeta{background:#fff;border-radius:8px;padding:28px;box-shadow:0 0 2px rgba(51,51,51,.16),2px 2px 8px rgba(51,51,51,.16)}
.tarjeta svg{width:46px;height:46px;fill:none;stroke-width:1.7;margin-bottom:16px}
.tarjeta h4{font-size:22px;font-weight:500;line-height:1.25;margin-bottom:10px}
.tarjeta p{font-size:17px;color:var(--texto);margin-bottom:18px}
.tarjeta .ver{font-size:17px;display:inline-flex;gap:10px;align-items:center}
.ver::after{content:"→";font-size:20px}

/* Cifras */
.cifras .caja{background:var(--gris-2);border-radius:44px;padding:64px 70px;display:grid;grid-template-columns:1fr 330px;gap:30px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--linea)}
.cifras h2{font-size:38px;font-weight:400;grid-column:1/-1;margin-bottom:50px}
.cifras .tres{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.cifras .num{font-size:92px;font-weight:300;line-height:1;letter-spacing:-2px}
.cifras .tres > div:nth-child(1) .num{color:var(--indigo)}
.cifras .tres > div:nth-child(2) .num{color:#9b1fc0}
.cifras .tres > div:nth-child(3) .num{color:var(--rosa)}
.cifras .tres p{font-size:19px;margin-top:14px;max-width:290px}
.cifras .adorno{width:330px;align-self:end;margin-bottom:-110px}

/* Testimonios y artículos */
.tres-col{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:54px}
.cita{background:#fff;border-radius:14px;padding:34px;box-shadow:0 0 2px rgba(51,51,51,.16),2px 2px 8px rgba(51,51,51,.16);min-height:240px;display:flex;flex-direction:column;justify-content:space-between}
.cita p{font-size:18px}
.cita .quien{margin-top:22px;font-weight:600}
.cita .quien span{display:block;font-weight:400;color:var(--texto-2)}
.post{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--linea);display:flex;flex-direction:column}
.post .foto{aspect-ratio:16/8.6;overflow:hidden}
.post .foto img{width:100%;height:100%;object-fit:cover}
.post h4{font-size:26px;font-weight:400;line-height:1.3;padding:30px 30px 0;flex:1}
.post .ver{justify-content:center;padding:26px;font-size:18px}

/* Preguntas frecuentes */
.faq .dos{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;margin-top:54px;align-items:start}
.faq .acord .fila > button{font-size:19px;padding:26px 0}
.faq .acord .resp{font-size:17px}

/* Pie */
footer{padding:70px 0 34px;border-top:1px solid var(--linea);margin-top:60px}
footer .arriba{display:flex;justify-content:space-between;align-items:center;padding-bottom:30px;border-bottom:1px solid var(--linea)}
footer .arriba img{height:74px;margin-left:-10px}
footer .cols{display:grid;grid-template-columns:1.1fr 1fr 1.2fr 1.3fr;gap:40px;padding:46px 0}
footer h5{font-size:19px;font-weight:600;margin-bottom:14px}
footer li{list-style:none;margin-bottom:11px;font-size:17px}
footer .legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--linea);font-size:15px;color:var(--texto-2)}
footer .legal a{margin-right:18px}

/* ---------- Borradores: lo que falta por confirmar ---------- */
.aviso-borr{position:fixed;left:16px;bottom:16px;z-index:80;background:#1c0a45;color:#fff;font-size:14px;padding:10px 14px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;gap:10px;align-items:center}
.aviso-borr button{background:#fff;color:#1c0a45;border-radius:6px;padding:5px 10px;font-weight:600}
body.ver-borr [data-borr]{outline:2px dashed #ff8a00;outline-offset:4px;position:relative}
body.ver-borr [data-borr]::before{content:attr(data-borr);position:absolute;left:0;top:-22px;background:#ff8a00;color:#1c0a45;font-size:11px;font-weight:600;letter-spacing:.02em;padding:2px 6px;border-radius:4px;white-space:nowrap;z-index:5;text-transform:none;-webkit-text-fill-color:#1c0a45}

@media (max-width:1100px){
  .portada .cont,.pest .panel.activo,.ciclo .cuerpo,.banda .caja,.banda.c .caja,.cifras .caja,.faq .dos{grid-template-columns:1fr}
  .portada h1{font-size:46px}.escena{display:none}
  .cab nav,.cab .der .btn-2{display:none}
  .pest .barra{grid-template-columns:repeat(2,1fr)}.pest .panel{padding:40px 26px}
  .sectores .rejilla{grid-template-columns:repeat(2,1fr)}.tres-col,.cifras .tres{grid-template-columns:1fr}
  .banda .adorno,.cifras .adorno{display:none}.banda .caja{padding:40px 30px;border-radius:28px}
  h2{font-size:34px}.banda h2{font-size:36px}footer .cols{grid-template-columns:1fr 1fr}
}