/* Las fuentes (Montserrat + Roboto Serif) se cargan desde Google Fonts
en el de index.php. Aquí se quitaron 45 bloques @font-face
heredados del export de Claude Design: apuntaban a UUIDs inexistentes
(daban 404 → errores de consola). No re-agregar @font-face locales. */
.foco_green{
width:9px;height:9px;
border-radius:999px;
background:#29A045;
box-shadow:0 0 0 4px rgba(41,160,69,.25);
flex:none;
}
:root{
--ink:#000009;
--blue:#0C8FD3;
--blue-2:#2F9CD2;
--blue-3:#7BC4E8;
--blue-light:#EAF6FF;
--deep:#062E4F;
--green:#8DE590;
--green-strong:#58C25F;
--red:#ED254E;
--paper:#F7FAFD;
--surface:#FFFFFF;
--line:#DDE7F0;
--muted:#5A6475;
--soft:#F1F5FA;
--shadow:0 26px 70px -34px rgba(6,46,79,.42);
--sans:'Montserrat',system-ui,-apple-system,Segoe UI,sans-serif;
--serif:'Roboto Serif',Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
background:var(--surface);
color:var(--ink);
font-family:var(--sans);
line-height:1.55;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
a{text-decoration:none;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
/*/ ESTILOS ANA */
span.boldd{
font-weight: 800;
}
.mar_bot_cinco{
margin-bottom:5vh;
}
.text_center{
text-align:center;
}
.nav{
top:0;z-index:20;
}
.nav-in{height:72px;display:flex;align-items:center;justify-content:space-between}
.nav-links{display:flex;font-size:14px;font-weight:700;color:var(--muted)}
.btn{
display:inline-flex;align-items:center;justify-content:center;
border:none;border-radius:999px;padding:14px 24px;
background:var(--blue);color:#fff;font-weight:800;font-size:15px;
box-shadow:0 12px 28px -12px rgba(12,143,211,.9);
cursor:pointer;transition:.2s ease;
}
.btn:hover{transform:translateY(-2px);background:#0A7FBD}
.btn.ghost{background:#fff;color:var(--blue);border:1px solid var(--line);box-shadow:none}
.kicker.green{color:var(--green-strong)}
.kicker.red{color:var(--red)}
h1,h2,h3{margin:0;color:var(--ink);line-height:1.08;letter-spacing:-.035em}
h1{font-size:clamp(42px,5.8vw,76px);font-weight:900;margin-bottom:20px}
h2{font-size:clamp(32px,4.4vw,56px);font-weight:900;margin-bottom:16px}
h3{font-size:24px;font-weight:900;margin-bottom:10px}
.mar_top_dos{margin-top:2vh}
p{margin:0;color:var(--muted);font-size:17px; font-family:var(--sans);}
.lead{
font-size:20px;max-width:55ch;margin-bottom:30px
}
.subtitle_lead{
font-size:1.5em;max-width:55ch;margin-bottom:2vh
}
.section-head{max-width:930px;margin-bottom:52px}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto}
.section-head.center .kicker{justify-content:center}
/* .section-head .sub{max-width:72ch} */
.hero{
background:radial-gradient(120% 100% at 85% 15%,rgba(12,143,211,.16),transparent 40%),
linear-gradient(180deg,#fff 0%,#F7FAFD 100%);
padding:86px 0 72px;
}
.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:56px;align-items:center}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero-card{
border:1px solid var(--line);
background:#fff;
border-radius:24px;
padding:22px;
box-shadow:var(--shadow);
}
.mini-browser{height:16px;display:flex;gap:6px;margin-bottom:16px}
.mini-browser span{width:9px;height:9px;border-radius:50%;background:#D5E2EE}
section{padding:90px 0}
/* Unified prospect generator + Tablax traceability section */
.unified-flow{
background:#F7FAFD;
padding:92px 0;
}
.value-map{
background:#fff;
border:1px solid var(--line);
border-radius:24px;
padding:54px 44px 46px;
box-shadow:0 24px 70px -42px rgba(6,46,79,.45);
position:relative;
}
.value-map:before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 18% 26%,rgba(141,229,144,.16),transparent 23%),
radial-gradient(circle at 82% 24%,rgba(12,143,211,.12),transparent 24%);
pointer-events:none;
}
.map-title{
position:relative;
text-align:center;
margin-bottom:38px;
z-index:2;
}
.map-title h3{
font-family:var(--serif);
font-size:clamp(13px,3.5vw,40px);
margin-bottom:10px;
letter-spacing:-.025em;
white-space:nowrap;
}
@media(max-width:680px){
.value-map{padding:34px 14px 30px!important}
}
.map-kicker-wrap{
display:inline-block;
margin:0 auto 22px;
}
.map-kicker{
font-family:var(--serif);
font-weight:800;
font-size:clamp(34px,4.6vw,52px);
color:var(--ink);
letter-spacing:-.02em;
line-height:1.1;
white-space:nowrap;
}
@media(max-width:680px){
.map-kicker{font-size:clamp(22px,7vw,34px);white-space:normal;text-align:center}
.map-kicker-wrap{max-width:100%}
}
.map-kicker-bar{
width:100%;
height:4px;
border-radius:999px;
background:var(--ink);
margin-top:8px;
}
.map-title p{
max-width:760px;
margin:0 auto;
font-weight:600;
}
.grouped-flow{
position:relative;
z-index:2;
display:grid;
grid-template-columns:2fr 4fr;
gap:18px;
align-items:stretch;
width:100%;
}
.flow-group{
border-radius:22px;
padding:18px;
display:flex;
flex-direction:column;
min-width:0;
}
.flow-group.generator{
border:2px dashed var(--green-strong);
background:rgba(141,229,144,.08);
}
.flow-group.trace{
border:2px dashed var(--blue);
background:rgba(12,143,211,.055);
}
.group-title{
text-align:center;
text-transform:uppercase;
letter-spacing:.13em;
font-size:12px;
font-weight:900;
margin-bottom:16px;
}
.flow-group.generator .group-title{color:#2C7D34}
.flow-group.trace .group-title{color:var(--deep)}
.flow-items{
display:grid;
align-items:stretch;
gap:14px;
min-width:0;
}
.flow-group.generator .flow-items{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.flow-group.trace .flow-items{
grid-template-columns:repeat(4,minmax(0,1fr));
}
.flow-item{
min-height:118px;
border-radius:18px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:16px 10px;
box-shadow:0 16px 34px -26px rgba(6,46,79,.46);
position:relative;
min-width:0;
}
.flow-item strong{
font-family:var(--serif);
font-size:clamp(15px,1.35vw,20px);
font-weight:800;
line-height:1.08;
margin-bottom:8px;
color:var(--deep);
white-space:normal;
}
.flow-item span{
font-size:clamp(10px,.9vw,13px);
font-weight:700;
color:var(--deep);
line-height:1.25;
}
.flow-item.generator{
background:var(--green);
border:1px solid rgba(44,125,52,.15);
}
.flow-item.prospect{
background:var(--blue-light);
border:1px solid #D9ECF8;
}
.flow-item.quote{background:var(--blue-3)}
.flow-item.project{background:var(--blue-2)}
.flow-item.income{background:var(--blue)}
.flow-item.project strong,
.flow-item.income strong,
.flow-item.project span,
.flow-item.income span{
color:#fff;
}
.flow-item:not(:last-child):after{
content:"→";
position:absolute;
right:-14px;
top:50%;
transform:translate(50%,-50%);
color:var(--blue);
font-size:22px;
font-weight:800;
z-index:5;
}
.flow-group.generator .flow-item:last-child:after{
content:"→";
position:absolute;
right:-32px;
top:50%;
transform:translate(50%,-50%);
color:var(--blue);
font-size:24px;
font-weight:800;
z-index:8;
}
.map-footer{
position:relative;
z-index:2;
margin-top:32px;
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
align-items:stretch;
}
.map-note{
border-radius:18px;
padding:22px;
border:1px solid var(--line);
background:#fff;
}
.map-note.generator{
border-color:rgba(88,194,95,.45);
background:linear-gradient(180deg,rgba(141,229,144,.18),#fff);
}
.map-note.trace{
border-color:rgba(12,143,211,.38);
background:linear-gradient(180deg,rgba(12,143,211,.10),#fff);
}
.map-note b{
font-size:16px;
color:var(--ink);
}
.map-note p{
font-size:14.5px;
font-weight:600;
}
/* proof section */
.proof{background:#fff}
.proof-stack{display:grid;gap:52px}
.proof-row{
display:grid;
grid-template-columns:.82fr 1.18fr;
gap:48px;
align-items:center;
}
.proof-row.reverse{grid-template-columns:1.18fr .82fr}
.proof-row.reverse .proof-copy{order:2}
.proof-row.reverse .proof-visual{order:1}
.proof-tag{
display:block;
text-transform:uppercase;
letter-spacing:.12em;
font-size:12px;
font-weight:900;
margin-bottom:12px;
}
.blue{color:var(--blue)}
.green-text{color:#2C7D34}
.red{color:var(--red)}
.proof-copy p{max-width:42ch}
.ui-card{
background:#fff;
border:1px solid var(--line);
border-radius:18px;
padding:22px 22px 24px;
box-shadow:var(--shadow);
}
.ui-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.ui-title{font-weight:900;font-size:14px;display:flex;align-items:center;gap:8px;color:var(--ink)}
.ui-title:before{
content:"";width:14px;height:16px;background:var(--blue);display:inline-block;flex:none;
clip-path:polygon(50% 0,100% 27%,100% 73%,50% 100%,0 73%,0 27%);
}
.ui-kpi{font-size:13px;color:var(--muted)}
.ui-kpi b{color:var(--ink);font-size:15px;font-weight:900}
.status{display:grid;grid-template-columns:140px 1fr 92px;gap:12px;align-items:center;padding:8px 0}
.status .label{font-size:13px;font-weight:700;color:#273142}
.track{height:12px;background:var(--soft);border-radius:999px;overflow:hidden}
.fill{height:100%;border-radius:999px;background:var(--blue)}
.amt{font-size:13px;font-weight:900;text-align:right}
table.matrix{width:100%;border-collapse:collapse;font-size:13px}
.matrix th,.matrix td{padding:10px 10px;text-align:right;white-space:nowrap}
.matrix th:first-child,.matrix td:first-child{text-align:left}
.matrix th{
font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;
border-bottom:1px solid var(--line);font-weight:800
}
.matrix td:first-child{font-weight:800;color:#2C3545}
.matrix tbody tr:not(:last-child) td{border-bottom:1px solid #F0F3F8}
.matrix .total td{border-top:2px solid var(--line);font-weight:900;color:var(--ink);padding-top:12px}
.pill{display:inline-block;border-radius:7px;padding:4px 9px;font-weight:900}
.pill.fact{background:rgba(12,143,211,.12);color:#0A6FA3}
.pill.pend{background:rgba(237,37,78,.10);color:#C01B3C}
.pill.ok{background:rgba(141,229,144,.28);color:#256E2C}
.dash{color:#AAB2C0;font-weight:700}
.chart{width:100%;height:auto;display:block}
.screens-real{background:var(--paper)}
.screens-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.screen{
background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px;
box-shadow:0 18px 50px -32px rgba(6,46,79,.45)
}
.screen img{width:100%;display:block;border-radius:14px;border:1px solid var(--line)}
.screen h3{font-size:20px;margin:16px 6px 6px}
.screen p{font-size:14px;margin:0 6px 10px}
.fit h2,.fit h3{color:#fff}
.fit p{color:rgba(255,255,255,.82)}
.cta-section{background:#fff}
.cta{
background:#062E4F;
color:#fff;
border-radius:32px;
padding:54px;
display:grid;
grid-template-columns:1.05fr .95fr;
gap:34px;
align-items:center;
}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.82)}
form{background:#fff;border-radius:22px;padding:24px;color:var(--ink)}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:14px 15px;font:inherit;margin-bottom:12px}
textarea{min-height:96px;resize:vertical}
.note{font-size:12px;margin-top:12px;color:var(--muted)}
footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:1060px){
.value-map{padding:44px 24px 40px}
.grouped-flow{grid-template-columns:2fr 4fr;gap:12px}
.flow-group{padding:14px}
.flow-items{gap:10px}
.flow-item{min-height:104px;padding:12px 8px}
.flow-item:not(:last-child):after{right:-10px;font-size:18px}
.flow-group.generator .flow-item:last-child:after{right:-23px;font-size:20px}
}
@media(max-width:920px){
.hero-grid,.proof-row,.proof-row.reverse,.cta{grid-template-columns:1fr}
.proof-row.reverse .proof-copy,.proof-row.reverse .proof-visual{order:initial}
.screens-grid{grid-template-columns:1fr}
.fit-grid{grid-template-columns:1fr 1fr}
.map-footer{grid-template-columns:1fr}
.nav-links a:not(.btn){display:none}
}
@media(max-width:680px){
.wrap{padding:0 20px}
.hero{padding:58px 0}
section{padding:64px 0}
.grouped-flow{grid-template-columns:2fr 4fr;gap:6px}
.flow-group{border-radius:16px;padding:8px}
.group-title{font-size:8px;letter-spacing:.08em;margin-bottom:8px}
.flow-items{gap:5px}
.flow-item{min-height:78px;border-radius:12px;padding:8px 4px}
.flow-item strong{font-size:10px;margin-bottom:4px}
.flow-item span{font-size:7px}
.flow-item:not(:last-child):after{right:-5px;font-size:12px}
.flow-group.generator .flow-item:last-child:after{right:-13px;font-size:13px}
.map-footer{grid-template-columns:1fr}
.chain-line{font-size:12px}
.status{grid-template-columns:105px 1fr 78px;gap:8px}
.fit-grid{grid-template-columns:1fr}
.cta{padding:32px 20px}
}
/* Optimized unified proof section */
.proof-optimized .trace-stack{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:64px;
}
.trace-row{
display:grid;
grid-template-columns:.72fr 1.28fr;
gap:46px;
align-items:center;
}
.trace-row.reverse{
grid-template-columns:1.28fr .72fr;
}
.trace-row.reverse .trace-copy{order:2}
.trace-row.reverse .dash-card{order:1}
.trace-copy h3{
font-size:clamp(25px,2.6vw,34px);
margin-bottom:12px;
letter-spacing:-.025em;
}
.trace-copy p{
font-size:16px;
line-height:1.65;
max-width:42ch;
}
.dash-card{
background:#fff;
border:1px solid var(--line);
border-radius:24px;
padding:26px;
box-shadow:0 26px 70px -34px rgba(6,46,79,.42);
overflow:hidden;
}
.table-wrap{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.heat-table{
width:100%;
border-collapse:separate;
border-spacing:0;
color:var(--deep);
font-size:14px;
min-width:780px;
}
.heat-table th{
text-align:center;
font-weight:900;
color:var(--deep);
padding:12px 10px;
border-bottom:1px solid var(--line);
white-space:nowrap;
}
.heat-table th:first-child,
.heat-table td:first-child{
text-align:left;
}
.heat-table td{
padding:13px 10px;
text-align:center;
border-bottom:1px solid #EDF2F7;
font-weight:700;
vertical-align:middle;
white-space:nowrap;
}
.heat-table td:first-child{
font-weight:900;
color:var(--deep);
}
.cot-table tbody td:nth-child(n+2):nth-child(-n+6){
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.project-table thead th{
background:linear-gradient(180deg,#06345A,#062E4F);
color:#fff;
border-bottom:0;
}
.project-table thead th:first-child{
border-top-left-radius:12px;
}
.project-table thead th:last-child{
border-top-right-radius:12px;
}
.project-table .summary td{
background:linear-gradient(180deg,#0C61A0,#0A4D83);
color:#fff;
font-weight:900;
border-bottom:1px solid rgba(255,255,255,.18);
}
.project-table td:nth-child(2){
text-align:left;
color:#2F4360;
font-weight:600;
white-space:normal;
min-width:170px;
}
.total-cell,
.heat-table tfoot td{
font-weight:900;
color:var(--ink);
background:#fff;
}
.heat-table tfoot td{
border-top:2px solid var(--line);
border-bottom:0;
padding-top:18px;
font-size:15px;
}
.empty{
font-weight:700!important;
}
@media(max-width:980px){
.trace-row,
.trace-row.reverse{
grid-template-columns:1fr;
}
.trace-row.reverse .trace-copy,
.trace-row.reverse .dash-card{
order:initial;
}
}
@media(max-width:680px){
.dash-card{
padding:18px;
border-radius:18px;
}
.heat-table{
font-size:12px;
min-width:720px;
}
}
/* Clean horizontal arrows for Generador + Trazabilidad */
.clean-arrows.grouped-flow{
grid-template-columns:minmax(245px, 1.95fr) 28px minmax(520px, 4.05fr);
gap:8px;
align-items:stretch;
}
.clean-arrows .flow-items{
display:grid;
align-items:center;
gap:8px;
width:100%;
}
.clean-arrows .flow-items-2{
grid-template-columns:minmax(82px,1fr) 18px minmax(82px,1fr);
}
.clean-arrows .flow-items-4{
grid-template-columns:minmax(92px,1fr) 18px minmax(92px,1fr) 18px minmax(92px,1fr) 18px minmax(92px,1fr);
}
.clean-arrows .flow-item:after,
.clean-arrows .flow-group.generator .flow-item:last-child:after{
display:none;
content:none;
}
.flow-connector,
.group-connector{
color:var(--blue);
font-size:20px;
font-weight:900;
display:flex;
align-items:center;
justify-content:center;
line-height:1;
opacity:.95;
}
.group-connector{
padding-top:45px;
font-size:22px;
}
.clean-arrows .flow-item{
min-width:0;
width:100%;
}
@media(max-width:1060px){
.clean-arrows.grouped-flow{
grid-template-columns:minmax(210px, 1.85fr) 22px minmax(430px, 4.15fr);
gap:6px;
}
.clean-arrows .flow-items-2{
grid-template-columns:minmax(68px,1fr) 14px minmax(68px,1fr);
}
.clean-arrows .flow-items-4{
grid-template-columns:minmax(72px,1fr) 12px minmax(72px,1fr) 12px minmax(72px,1fr) 12px minmax(72px,1fr);
}
.flow-connector{font-size:16px}
.group-connector{font-size:18px;padding-top:40px}
}
@media(max-width:680px){
.clean-arrows.grouped-flow{
grid-template-columns:minmax(116px, 1.9fr) 12px minmax(210px, 4.1fr);
gap:3px;
}
.clean-arrows .flow-group{
padding:6px;
}
.clean-arrows .group-title{
font-size:7px;
letter-spacing:.055em;
margin-bottom:6px;
white-space:normal;
}
.clean-arrows .flow-items{
gap:3px;
}
.clean-arrows .flow-items-2{
grid-template-columns:minmax(47px,1fr) 7px minmax(47px,1fr);
}
.clean-arrows .flow-items-4{
grid-template-columns:minmax(42px,1fr) 6px minmax(42px,1fr) 6px minmax(42px,1fr) 6px minmax(42px,1fr);
}
.flow-connector{
font-size:9px;
}
.group-connector{
font-size:10px;
padding-top:31px;
}
.clean-arrows .flow-item{
min-height:66px;
padding:6px 3px;
border-radius:10px;
}
.clean-arrows .flow-item strong{
font-size:8.2px;
line-height:1.02;
margin-bottom:3px;
}
.clean-arrows .flow-item span{
font-size:6.2px;
line-height:1.1;
}
}
/* FINAL: Horizontal-only value map. Keeps every step in one row. */
.value-map{
overflow:hidden;
}
.flow-scroll{
position:relative;
z-index:3;
width:100%;
overflow-x:auto;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
padding:2px 0 6px;
}
.flow-scroll::-webkit-scrollbar{
height:8px;
}
.flow-scroll::-webkit-scrollbar-track{
background:#EEF5FB;
border-radius:999px;
}
.flow-scroll::-webkit-scrollbar-thumb{
background:#BBDDF3;
border-radius:999px;
}
.horizontal-flow{
display:flex;
flex-direction:row;
align-items:stretch;
justify-content:center;
margin:0 auto;
}
.horizontal-flow .flow-group{
flex:0 0 auto;
border-radius:22px;
display:flex;
flex-direction:column;
justify-content:flex-start;
}
.horizontal-flow .flow-group.generator{
border:2px dashed var(--green-strong);
background:rgba(141,229,144,.08);
}
.horizontal-flow .flow-group.trace{
border:2px dashed var(--blue);
background:rgba(12,143,211,.055);
}
.horizontal-flow .group-title{
text-align:center;
text-transform:uppercase;
letter-spacing:.13em;
font-size:12px;
font-weight:900;
margin:0 0 16px;
line-height:1.2;
white-space:nowrap;
}
.horizontal-flow .generator .group-title{
color:#2C7D34;
}
.horizontal-flow .trace .group-title{
color:var(--deep);
}
.horizontal-flow .flow-row{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
flex-wrap:nowrap;
width:100%;
}
.horizontal-flow .flow-item{
border-radius:16px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
box-shadow:0 16px 34px -26px rgba(6,46,79,.46);
position:relative;
}
.horizontal-flow .flow-item strong{
font-family:var(--serif);
font-weight:800;
line-height:1.05;
margin:0 0 7px;
color:var(--deep);
white-space:normal;
}
.horizontal-flow .flow-item span{
font-weight:800;
line-height:1.2;
color:var(--deep);
white-space:normal;
}
.horizontal-flow .flow-item.generator{
background:var(--green);
border:1px solid rgba(44,125,52,.15);
}
.horizontal-flow .flow-item.prospect{
background:var(--blue-light);
border:1px solid #D9ECF8;
}
.horizontal-flow .flow-item.quote{
background:var(--blue-3);
}
.horizontal-flow .flow-item.project{
background:var(--blue-2);
}
.horizontal-flow .flow-item.income{
background:var(--blue);
}
.horizontal-flow .flow-item.project strong,
.horizontal-flow .flow-item.income strong,
.horizontal-flow .flow-item.project span,
.horizontal-flow .flow-item.income span{
color:#fff;
}
.horizontal-flow .flow-item:after,
.horizontal-flow .flow-group.generator .flow-item:last-child:after,
.clean-arrows .flow-item:after,
.clean-arrows .flow-group.generator .flow-item:last-child:after{
display:none;
content:none;
}
.horizontal-flow .flow-arrow{
color:var(--blue);
font-weight:900;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
transform:none;
padding:0;
margin:0;
}
.horizontal-flow .flow-arrow.bridge{
align-self:center;
}
@media(max-width:1060px){
.horizontal-flow{
justify-content:flex-start;
margin:0;
}
}
@media(max-width:680px){
.horizontal-flow .flow-group{
border-radius:18px;
}
.horizontal-flow .flow-item{
flex-basis:122px;
}
}
/* Final refinements: hero image replacement + tighter horizontal flow */
.hero-card{
display:flex;
align-items:center;
justify-content:center;
min-height:420px;
overflow:hidden;
}
.hero-card img{
width:100%;
max-height:430px;
object-fit:contain;
object-position:center center;
border-radius:16px;
border:0;
background:#4289E6;
display:block;
}
.horizontal-flow{
gap:10px;
min-width:0;
width:100%;
}
.horizontal-flow .flow-group.generator{
width:270px;
flex:0 0 270px;
}
.horizontal-flow .flow-group.trace{
width:auto;
flex:1 1 auto;
min-width:0;
}
.horizontal-flow .flow-group{
padding:16px 12px;
}
.horizontal-flow .flow-row{
gap:6px;
}
.horizontal-flow .flow-item{
width:auto;
flex:1 1 0;
min-width:0;
height:100px;
min-height:100px;
padding:10px 4px;
}
.horizontal-flow .flow-item strong{
font-size:15.5px;
margin-bottom:6px;
}
.horizontal-flow .flow-item span{
font-size:10.8px;
}
.horizontal-flow .flow-arrow{
width:12px;
flex:0 0 12px;
font-size:15px;
}
.horizontal-flow .flow-arrow.bridge{
width:16px;
flex-basis:16px;
font-size:18px;
margin-top:24px;
}
@media(max-width:680px){
.hero-card{
min-height:320px;
}
.hero-card img{
max-height:320px;
}
.horizontal-flow{
min-width:0;
width:100%;
gap:6px;
}
.horizontal-flow .flow-group.generator{
width:auto;
flex:1 1 0;
}
.horizontal-flow .flow-group.trace{
width:auto;
flex:2.2 1 0;
}
.horizontal-flow .flow-group{
padding:10px 6px;
}
.horizontal-flow .flow-item{
width:auto;
flex:1 1 0;
min-width:0;
height:88px;
min-height:88px;
padding:8px 3px;
}
.horizontal-flow .flow-item strong{
font-size:11px;
}
.horizontal-flow .flow-item span{
font-size:8px;
}
.horizontal-flow .flow-arrow{
width:8px;
flex:0 0 8px;
font-size:11px;
}
.horizontal-flow .group-title{
font-size:8px;
letter-spacing:.06em;
white-space:normal;
overflow-wrap:break-word;
margin-bottom:8px;
}
}
/* V4 proof: compact, no horizontal scroll */
.proof-v4 .trace-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:70px}
.proof-v4 .trace-row{display:grid;grid-template-columns:.70fr 1.30fr;gap:42px;align-items:center}
.proof-v4 .trace-row.reverse{grid-template-columns:1.30fr .70fr}
.proof-v4 .trace-row.reverse .trace-copy{order:2}
.proof-v4 .trace-row.reverse .dash-card{order:1}
.proof-v4 .trace-copy h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:12px;letter-spacing:-.025em}
.proof-v4 .trace-copy p{font-size:16px;line-height:1.65;max-width:42ch}
.no-scroll-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 26px 70px -34px rgba(6,46,79,.42);overflow:hidden}
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.dash-title{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:900;font-size:17px;letter-spacing:-.015em}
.hex{width:16px;height:18px;background:var(--blue);display:inline-block;clip-path:polygon(50% 0,100% 27%,100% 73%,50% 100%,0 73%,0 27%);flex:none}
@media(max-width:900px){
}
@media(max-width:680px){
}
@media(max-width:480px){
}
.dash-question{margin:2px 0 14px;font-size:20px;color:var(--deep);letter-spacing:-.02em}
.summary-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:12px}
.summary-strip div{border:1px solid var(--line);border-radius:12px;padding:9px 6px;text-align:center;background:#F7FBFF}
.summary-strip span{display:block;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);line-height:1.1}
.summary-strip b{display:block;margin-top:4px;font-size:14px;color:var(--deep);font-weight:900}
.cot-summary div:nth-child(4),.project-summary div:nth-child(1){background:#EAF6FF;border-color:#BFE3F7}
.project-summary div:nth-child(1){background:#FFE3E8;border-color:#FFC6D1}
.fit-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:clamp(9px,.78vw,12px);color:var(--deep)}
.fit-table th{background:linear-gradient(180deg,#06345A,#062E4F);color:#fff;text-align:center;font-weight:900;padding:9px 4px;border-right:1px solid rgba(255,255,255,.18);line-height:1.05}
.fit-table th:first-child{border-top-left-radius:10px}
.fit-table th:last-child{border-top-right-radius:10px;border-right:0}
.fit-table td{text-align:center;padding:8px 4px;border-right:1px solid #fff;border-bottom:1px solid #EDF2F7;font-weight:800;line-height:1.12;word-break:normal;overflow:hidden}
.fit-table td:first-child{text-align:left;color:var(--deep);font-weight:900}
.fit-table td:last-child{font-weight:900;color:var(--ink);background:#fff}
.cot-fit th:first-child,.cot-fit td:first-child{width:17%}
.project-fit th:nth-child(1),.project-fit td:nth-child(1){width:15%}
.project-fit th:nth-child(2),.project-fit td:nth-child(2){width:21%;text-align:left}
.project-fit th:nth-child(3),.project-fit td:nth-child(3){width:10%}
.project-fit th:nth-child(n+4),.project-fit td:nth-child(n+4){width:9%}
.b1{background:#EFF7FE;color:#0B66A1}
.b2{background:#DFF0FC!important;color:#0B66A1!important}
.b3{background:#CFE8FA!important;color:#0B66A1!important}
.b4{background:#B9DDF6!important;color:#075D9A!important}
.b5{background:#A4D2F2!important;color:#064F85!important}
.b6{background:#8FC8EF!important;color:#063F6E!important}
.b7{background:#78BDEC;color:#04395F}
.b8{background:#55ABE6;color:#033151}
.overdue{background:#FFE3E8;color:#D8183D;font-weight:900!important}
.empty{background:#fff!important;color:#B5BFCC!important}
.chart-card .chart{width:100%;height:auto;max-height:275px}
.legend{display:flex;gap:18px;margin-top:10px;font-size:12px;color:var(--muted);font-weight:800}
.legend i{width:11px;height:11px;display:inline-block;border-radius:3px;margin-right:6px;vertical-align:-1px}
@media(max-width:980px){
.proof-v4 .trace-row,.proof-v4 .trace-row.reverse{grid-template-columns:1fr}
.proof-v4 .trace-row.reverse .trace-copy,.proof-v4 .trace-row.reverse .dash-card{order:initial}
.proof-v4 .trace-copy p{max-width:100%}
}
@media(max-width:680px){
.summary-strip{gap:4px}
.summary-strip div{padding:7px 3px;border-radius:9px}
.summary-strip span{font-size:7px}
.summary-strip b{font-size:10px}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
.table-scroll .fit-table{width:auto;min-width:460px;font-size:11px}
.fit-table th{padding:8px 6px}
.fit-table td{padding:7px 6px}
.dash-title{font-size:14px}
}
/* CEO matrix visual upgrade */
@media(max-width:680px){
}
/* Header. Estas reglas ya venían después de las base (.nav, .logo, .btn…)
y con especificidad igual o mayor, así que el !important que traían era
puro ruido: se quitó para que el nav vuelva a ser sobreescribible. */
.nav{
position:sticky;
top:0;
z-index:50;
background:rgba(255,255,255,.92);
backdrop-filter:saturate(160%) blur(10px);
border-bottom:1px solid var(--line);
}
.nav-in{min-height:58px}
.logo{
font-size:28px;
letter-spacing:-.04em;
font-weight:900;
color:var(--ink);
}
.nav-links{align-items:center;gap:34px}
.nav-links a{
color:#616C80;
font-weight:800;
font-size:14px;
}
.nav-links .btn{
color:#fff;
padding:14px 24px;
border-radius:999px;
box-shadow:0 16px 34px -18px rgba(12,143,211,.55);
}
/* El botón secundario del nav es blanco con texto azul: el color:#fff de
arriba lo dejaba invisible (texto blanco sobre fondo blanco). */
.nav-links .btn.ghost{
color:var(--blue);
background:#fff;
border:1px solid var(--line);
box-shadow:none;
}
.hero-v2{
/* Medidas base del hero. El panel de imagen las usa para sangrar
hasta el borde superior/inferior del hero y hasta el borde derecho
del viewport (fuera de .wrap). */
--hero-pad-top:72px;
--hero-pad-bottom:36px;
--wrap-max:1180px;
--wrap-pad:28px;
--hero-bleed:calc(max((100vw - var(--wrap-max)) / 2, 0px) + var(--wrap-pad));
position:relative;
background:
radial-gradient(circle at 85% 18%, rgba(176, 217, 245, .35), transparent 32%),
linear-gradient(90deg,#F7F9FC 0%, #F7F9FC 38%, #EAF5FC 100%);
padding:var(--hero-pad-top) 0 var(--hero-pad-bottom);
overflow:hidden;
}
.hero-v2 .hero-grid{
display:grid;
grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
grid-template-areas:"copy visual" "below visual";
column-gap:36px;
row-gap:22px;
align-items:start;
}
.hero-v2 .hero-copy{max-width:590px;grid-area:copy}
.hero-v2 .hero-below{
grid-area:below;
max-width:100%;
align-self:end;
}
.hero-v2 .kicker{
margin-bottom:18px;
color:var(--blue);
font-size:13px;
letter-spacing:.18em;
font-weight:900;
text-transform:uppercase;
display:flex;
align-items:center;
gap:10px;
}
.hero-v2 .kicker::before{
content:"";
width:16px;
height:18px;
background:var(--blue);
display:inline-block;
clip-path:polygon(50% 0,100% 27%,100% 73%,50% 100%,0 73%,0 27%);
flex:none;
}
.hero-v2 h1{
font-size:clamp(66px, 6.9vw, 84px);
line-height:.98;
letter-spacing:-.055em;
max-width:630px;
margin:0 0 28px;
color:var(--ink);
font-weight:900;
text-wrap:balance;
}
.hero-v2 .lead{
font-size:17px;
line-height:1.55;
color:#687487;
max-width:520px;
margin:0 0 34px;
}
.hero-v2 .actions{
display:flex;
gap:14px;
flex-wrap:wrap;
}
.hero-v2 .actions .btn{
padding:14px 26px;
border-radius:999px;
font-size:16px;
font-weight:900;
box-shadow:0 18px 34px -18px rgba(12,143,211,.5);
}
.hero-v2 .actions .ghost{
background:rgba(255,255,255,.72);
color:var(--blue);
border:1px solid #D5E3EE;
box-shadow:none;
}
/* ── Panel de imagen del hero (a sangre) ───────────────────────────────
.hero-visual sólo reserva la columna derecha de la retícula.
.hero-card es el contenedor real de la imagen: se ancla a esa columna
y crece hasta el borde superior/inferior del hero y hasta el borde
derecho del viewport. La imagen lo llena por completo (object-fit:cover).
Para cambiar la imagen basta con reemplazar el ![]()
del .hero-card. */
.hero-v2 .hero-visual{
grid-area:visual;
position:relative;
align-self:stretch;
display:block;
min-height:520px; /* altura mínima del panel en desktop */
}
.hero-v2 .hero-dots{display:none}
.hero-v2 .hero-card{
position:absolute;
top:calc(-1 * var(--hero-pad-top));
bottom:calc(-1 * var(--hero-pad-bottom));
left:0;
right:calc(-1 * var(--hero-bleed));
width:auto;
height:auto;
min-height:0;
z-index:1;
display:block;
margin:0;
padding:0;
border:0;
border-radius:0;
box-shadow:none;
background:var(--blue-light); /* color de respaldo mientras carga */
overflow:hidden;
}
.hero-v2 .hero-card .mini-browser{display:none}
.hero-v2 .hero-card img{
width:100%;
height:100%;
display:block;
object-fit:cover;
object-position:center;
border:0;
border-radius:0;
box-shadow:none;
background:transparent;
max-height:none;
}
@media(max-width:980px){
.hero-v2{padding:56px 0 0;--hero-pad-top:56px;--hero-pad-bottom:0px}
.hero-v2 .hero-grid{
grid-template-columns:1fr;
grid-template-areas:"copy" "below" "visual";
gap:16px;
}
.hero-v2 .hero-copy{max-width:100%}
.hero-v2 h1{
font-size:clamp(30px, 7.2vw, 72px);
max-width:700px;
}
.hero-v2 .lead{max-width:100%}
/* En móvil el panel pasa a ser una banda a sangre completa al final del hero */
.hero-v2 .hero-visual{
min-height:0;
height:320px;
margin-top:28px;
}
.hero-v2 .hero-card{
top:0;
bottom:0;
left:calc(-1 * var(--hero-bleed));
right:calc(-1 * var(--hero-bleed));
}
/* En móvil el encuadre baja para que la cabeza del hombre se vea completa */
.hero-v2 .hero-card img{object-position:center 18%}
}
@media(max-width:680px){
.hero-v2{--wrap-pad:20px}
}
@media(max-width:620px){
.nav-links{gap:12px!important}
.nav-links a:not(.btn){display:none}
.hero-v2 .hero-visual{height:260px}
}
@media(max-width:420px){
.hero-v2{--wrap-pad:14px}
}
/* CEO matrix refined: remove vertical cobrado, keep horizontal income axis, add missing subtotal */
/* Vista CEO - matriz actualizada */
/* Perimeter navy border: header-row through Total general only */
/* Divisor Cobrado Fuera de Tiempo | Cobrado En Tiempo */
/* Vista CEO — celdas clicables y panel de detalle */
@keyframes ceoDetailIn{
from{opacity:0;transform:translateY(-6px)}
to{opacity:1;transform:translateY(0)}
}
.status-ok{background:#D9F2E6;color:#0E7A48}
.status-warn{background:#FDEEDB;color:#9A5B0A}
.status-danger{background:#FCE0E5;color:#B21030}
.status-neutral{background:#E6EEF6;color:var(--deep)}
@media(max-width:680px){
}
@media(max-width:900px){
}
@media(max-width:620px){
}
/* Ajuste sección fit: tarjetas horizontales con icono al estilo referencia */
.fit{
background:linear-gradient(125deg,#071B31 0%, #0A3A63 42%, #0C8FD3 100%);
color:#fff;
}
.fit .section-head.center{
max-width:900px;
margin:0 auto;
text-align:center;
}
.fit .section-head h2{
color:#fff;
}
.fit .section-head .sub{
color:rgba(255,255,255,.9);
max-width:760px;
margin:14px auto 0;
}
.fit-grid{
display:grid;
margin-top:38px;
}
.fit-card.fit-card-horizontal{
gap:16px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
border-radius:16px;
padding:18px 18px 18px 16px;
min-height:140px;
box-shadow:0 10px 26px -22px rgba(6,46,79,.4);
}
.fit-icon{
width:54px;
height:54px;
min-width:54px;
border-radius:999px;
background:#D8E9F5;
color:#0C8FD3;
display:flex;
align-items:center;
justify-content:center;
margin-top:2px;
}
.fit-icon svg{
width:24px;
height:24px;
display:block;
}
.fit-copy{
min-width:0;
}
@media (max-width: 1100px){
.fit-grid{
gap:12px;
}
.fit-card.fit-card-horizontal{
padding:16px 14px;
gap:12px;
}
.fit-icon{
width:48px;
height:48px;
min-width:48px;
}
.fit-card h3{
font-size:15px;
}
.fit-card p{
font-size:13.5px;
line-height:1.5;
}
}
@media (max-width: 900px){
.fit-grid{
grid-template-columns:repeat(4, minmax(0,1fr));
}
.fit-card.fit-card-horizontal{
min-height:128px;
padding:14px 12px;
}
.fit-icon{
width:42px;
height:42px;
min-width:42px;
}
.fit-icon svg{
width:20px;
height:20px;
}
.fit-card h3{
font-size:13px;
}
.fit-card p{
font-size:13px;
line-height:1.5;
}
}
@media (max-width:680px){
.fit-grid{
grid-template-columns:1fr;
}
.fit-card.fit-card-horizontal{
grid-template-columns:44px minmax(0,1fr);
min-height:0;
}
.fit-icon{
width:44px;
height:44px;
min-width:44px;
}
.fit-card h3{font-size:16px}
.fit-card p{font-size:14px}
}
/* Sección problema Dirección (reemplaza síntomas roja) */
.kicker{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:var(--blue);font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;}
.kicker:before{content:"";width:15px;height:17px;background:currentColor;display:inline-block;clip-path:polygon(50% 0,100% 27%,100% 73%,50% 100%,0 73%,0 27%);}
.ceo-problem{background:radial-gradient(circle at 84% 12%, rgba(12,143,211,.14), transparent 32%),
linear-gradient(180deg,#FFFFFF 0%, #F7FAFD 100%);padding:92px 0 40px;}
.problem-head{max-width:980px;margin:0 auto 42px;text-align:center;}
.problem-head .kicker{justify-content:center;margin-bottom:18px;}
@media(max-width:720px){
.solution-flow{gap:5px;}
.solution-flow article{padding:10px 4px;border-radius:10px;}
.solution-flow article span{width:7px;height:7px;margin-bottom:8px;}
.solution-flow article h3{font-size:11px;margin-bottom:3px;}
.solution-flow article p{font-size:8.5px;}
.solution-flow > span{font-size:11px;}
.ceo-solution > .wrap > div:last-child{padding:16px!important;}
.ceo-solution > .wrap > div:last-child p{font-size:13px!important;}
.ceo-problem .problem-cards{gap:8px;}
.ceo-problem .problem-card{padding:12px 10px;border-radius:14px;}
.ceo-problem .problem-copy span{font-size:8.5px;letter-spacing:.08em;}
.ceo-problem .problem-copy h3{font-size:15px!important;margin-bottom:6px;}
.ceo-problem .problem-copy p{font-size:10.5px!important;line-height:1.4;}
.ceo-problem .problem-head p{font-size:14px;}
.ceo-problem .board-top strong{font-size:19px;}
.ceo-problem .problem-board{padding:16px;border-radius:18px;}
}
.problem-head h2{max-width:900px;margin:0 auto 18px;font-size:clamp(38px,5vw,68px);line-height:.98;letter-spacing:-.055em;color:var(--ink);}
.problem-head p{max-width:820px;margin:0 auto;color:#5D687B;font-size:18px;line-height:1.55;font-weight:600;}
.problem-board{background:#FFFFFF;border:1px solid #CFE2F2;border-radius:30px;padding:30px;box-shadow:0 30px 80px -48px rgba(6,46,79,.52);overflow:hidden;}
.board-top{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid #E2EEF8;}
.board-label{display:block;color:var(--blue);font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px;}
.board-top strong{display:block;color:var(--deep);font-size:30px;line-height:1.05;letter-spacing:-.04em;font-weight:900;}
.board-kpi{color:#5A6475;font-size:14px;font-weight:800;white-space:nowrap;}
.board-kpi b{display:inline-block;margin-left:6px;color:var(--ink);font-weight:900;font-size:18px;}
.problem-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.problem-card{position:relative;background:linear-gradient(180deg,#FFFFFF 0%,#F9FCFF 100%);border:1px solid #D6E5F1;border-radius:22px;padding:22px;min-height:280px;box-shadow:0 20px 46px -38px rgba(6,46,79,.42);overflow:hidden;}
.problem-card:before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--blue);}
.problem-card.past:before{background:#94A3B8}.problem-card.sales:before{background:var(--blue)}.problem-card.projects:before{background:#58C25F}.problem-card.income:before{background:#ED254E}
.problem-icon{width:54px;height:54px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#E6F4FD;color:var(--blue);margin-bottom:18px;}
.problem-card.past .problem-icon{background:#F1F5F9;color:#64748B}.problem-card.sales .problem-icon{background:#E6F4FD;color:var(--blue)}.problem-card.projects .problem-icon{background:#EAFBEF;color:#29A045}.problem-card.income .problem-icon{background:#FFE8EE;color:#ED254E}
.problem-icon svg{width:25px;height:25px;display:block;}
.problem-copy span{display:block;margin-bottom:7px;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;}
.problem-card.past .problem-copy span{color:#64748B}.problem-card.projects .problem-copy span{color:#29A045}.problem-card.income .problem-copy span{color:#ED254E}
.problem-copy h3{margin:0 0 12px;color:var(--deep);font-size:20px;line-height:1.12;letter-spacing:-.035em;font-weight:900;}
.problem-copy p{margin:0;color:#5D687B;font-size:14px;line-height:1.55;font-weight:600;}
.problem-close{margin-top:24px;display:flex;align-items:center;gap:20px;background:linear-gradient(135deg,#062E4F 0%, #0C8FD3 100%);border-radius:24px;padding:26px 30px;color:#FFFFFF;box-shadow:0 24px 54px -36px rgba(6,46,79,.72);}
.close-icon{width:64px;height:64px;min-width:64px;border-radius:999px;background:#FFFFFF;color:var(--blue);display:flex;align-items:center;justify-content:center;}
.close-icon svg{width:34px;height:34px;display:block;}
.problem-close h3{margin:0 0 6px;color:#FFFFFF;font-size:30px;line-height:1.05;letter-spacing:-.04em;font-weight:900;}
.problem-close p{margin:0;color:rgba(255,255,255,.86);font-size:16px;line-height:1.45;font-weight:700;}
@media(max-width:980px){.problem-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.board-top{align-items:flex-start;flex-direction:column}.board-kpi{white-space:normal}}
@media(max-width:620px){.ceo-problem{padding:68px 0}.problem-board{padding:20px;border-radius:24px}.problem-cards{grid-template-columns:1fr 1fr}.problem-close{flex-direction:column;align-items:flex-start;padding:24px}.problem-close h3{font-size:25px}}
/* fit section simplificada (imagen 2) */
.fit-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.fit-card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:18px;padding:22px;display:block;min-height:0;box-shadow:none}
.fit-card h3{font-family:var(--sans);font-size:20px;color:#fff;margin:0 0 12px;font-weight:900;letter-spacing:-.02em;line-height:1.15}
.fit-card p{color:rgba(255,255,255,.82);font-size:14px;line-height:1.55;margin:0}
@media(max-width:900px){.fit-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.fit-grid{grid-template-columns:1fr}}
/* === Vista CEO (v2 móvil) === */
.dash-kpi b{
margin-left:4px;
}
@media(max-width:680px){
}
.dash-kpi{color:var(--deep);font-size:10.5px;font-weight:700;text-align:center}
.dash-kpi b{display:block;color:var(--deep);font-weight:900;font-size:16px;margin-top:3px;white-space:nowrap}
.ceo-kpi-row{display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:8px}
@media(max-width:900px){
.ceo-head{flex-direction:column;align-items:stretch}
.ceo-kpi-row{flex-wrap:nowrap;justify-content:space-between;max-width:none;gap:5px}
.ceo-kpi-row .dash-kpi{min-width:0;flex:1 1 0;padding:8px 4px}
.ceo-kpi-row .dash-kpi b{font-size:14px}
}
@media(max-width:680px){
.ceo-kpi-row{gap:3px}
.ceo-kpi-row .dash-kpi{padding:6px 2px;font-size:8.5px}
.ceo-kpi-row .dash-kpi b{font-size:11px;margin-top:1px}
}
@media(max-width:480px){
.ceo-kpi-row{gap:2px}
.ceo-kpi-row .dash-kpi{padding:5px 1px;font-size:6.8px;border-radius:8px}
.ceo-kpi-row .dash-kpi b{font-size:9px}
}
.ceo-kpi-row .dash-kpi{
background:#F4F8FC;
border:1px solid #DCE9F4;
border-radius:12px;
padding:8px 8px;
width:100px;
flex:0 0 100px;
white-space:normal;
line-height:1.2;
}
.ceo-legend{display:flex;flex-direction:column;gap:8px;margin-top:10px;align-items:flex-end}
.ceo-legend-row{display:flex;gap:16px}
.ceo-legend-chip{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--deep);white-space:nowrap;line-height:1}
.ceo-legend-chip i{width:14px;height:14px;border-radius:4px;flex:none;display:inline-block;border:1px solid rgba(6,46,79,.12)}
.ceo-section{padding-top:18px}
.ceo-card{overflow:hidden}
.ceo-head{display:flex;justify-content:space-between;gap:18px;}
.ceo-head > div:first-child{flex:0 0 auto;min-width:0}
.ceo-kicker{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.ceo-head h3{margin:5px 0 0;}
.axis-label.operativo{position:absolute;left:0;top:60px;bottom:60px;writing-mode:vertical-rl;transform:rotate(180deg);font-weight:900;text-transform:uppercase;display:flex;align-items:center;justify-content:center;border-radius:12px;padding:10px 6px}
.ceo-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:clamp(10px,.9vw,13px);}
.ceo-table th{font-weight:900;line-height:1.05;}
.ceo-table td{text-align:center;font-weight:900;color:var(--deep)}
.ceo-table td:first-child.etapa-label{text-align:left;background:#1CA9ED;color:#001B34}
.ceo-table tfoot td:nth-child(4){color:#2CCAC6}
.ceo-table tfoot td:nth-child(5){color:#2CCAC6}
@media(max-width:680px){
.no-scroll-card,.ceo-card{padding:14px;border-radius:18px}
.dash-kpi{font-size:11px}
.dash-kpi b{font-size:13px}
.axis-label.operativo{font-size:8px;border-radius:8px}
}
/* CEO matrix visual upgrade */
.ceo-section .section-head{
margin-bottom:14px;
}
.ceo-section .section-head h2{
font-size:clamp(24px,2.6vw,32px);
margin-bottom:8px;
}
.ceo-section .section-head .sub{
font-size:14px;
}
.ceo-card{
background:linear-gradient(180deg,#FFFFFF 0%,#F9FCFF 100%);
border:2px solid var(--deep);
border-radius:22px;
padding:16px;
box-shadow:0 30px 80px -42px rgba(6,46,79,.52);
}
.ceo-head{
align-items:flex-start;
padding-bottom:8px;
border-bottom:1px solid #E2EEF8;
margin-bottom:10px;
}
.ceo-kicker{
color:var(--blue);
}
.ceo-head h3{
color:var(--deep);
font-size:24px;
letter-spacing:-.03em;
}
.axis-label.operativo{
box-shadow:0 12px 24px -16px rgba(12,143,211,.8);
}
.ceo-table{
border-radius:18px;
overflow:hidden;
box-shadow:0 18px 44px -34px rgba(6,46,79,.55);
border:1px solid #D6E5F1;
background:#fff;
}
.ceo-table th{
background:#062E4F!important;
color:#fff!important;
font-size:10.5px!important;
padding:7px 4px!important;
border-right:1px solid rgba(255,255,255,.16)!important;
text-transform:none;
}
.ceo-table th:first-child{
background:#062E4F!important;
width:22%!important;
text-align:left!important;
padding-left:10px!important;
}
.ceo-table td{
padding:6px 4px!important;
border-right:1px solid #fff!important;
border-bottom:1px solid #E7EEF6!important;
font-size:11px!important;
}
.ceo-table td.etapa-label{
background:#062E4F!important;
color:#fff!important;
text-align:left!important;
padding-left:10px!important;
font-weight:900!important;
line-height:1.1;
}
.ceo-table .op{
background:#D7ECFA!important;
color:#06395F!important;
}
.ceo-table .ok{
background:#28C9C8!important;
color:#003B3A!important;
}
.ceo-table .risk{
background:#F45D7B!important;
color:#fff!important;
}
.ceo-table .warning{
background:#FFD000;
color:#062E4F;
}
.ceo-table .danger{
background:#ED254E!important;
color:#fff!important;
}
.ceo-table tbody tr:nth-child(even) td.etapa-label{
background:#0A3C66!important;
}
.ceo-table tbody td:last-child{
background:#F7FAFD;
color:#062E4F;
font-weight:900;
}
.ceo-table tfoot td{
background:#062E4F;
color:#fff;
font-weight:900!important;
border-bottom:0;
padding:14px 8px!important;
}
.ceo-table tfoot td.etapa-label{
background:#062E4F;
color:#fff;
text-align:left!important;
padding-left:14px!important;
}
.ceo-table tfoot td:nth-child(4),
.ceo-table tfoot td:nth-child(5){
color:#2CCAC6;
}
@media(max-width:680px){
.ceo-card{
padding:18px;
}
.ceo-grid{
padding-left:22px;
}
.ceo-head h3{
font-size:28px;
}
.ceo-table th{
font-size:7px;
padding:7px 2px;
}
.ceo-table td{
font-size:7px;
padding:7px 2px;
}
.ceo-table th:first-child,
.ceo-table td.etapa-label{
padding-left:5px;
}
}
/* CEO matrix refined: remove vertical cobrado, keep horizontal income axis, add missing subtotal */
.ceo-grid{
position:relative;
padding-left:34px;
padding-top:0;
}
.axis-label.operativo{
background:#0C8FD3;
color:#fff;
font-size:12px;
letter-spacing:.10em;
}
/* Vista CEO - matriz actualizada */
.ceo-matrix-updated{
position:relative;
}
.ceo-matrix-updated .axis-proyecto-corner{
background:#fff;
border-right:1px solid #E7EEF6;
padding:0!important;
}
.ceo-matrix-updated .axis-proyecto-filler{
background:#fff;
border-right:1px solid #E7EEF6!important;
padding:0!important;
}
.ceo-matrix-updated .ceo-table tfoot td.axis-proyecto-filler{
background:#fff!important;
border-right:1px solid #E7EEF6!important;
border-top:0;
}
.ceo-matrix-updated .axis-proyecto-cell{
background:#FFFFFF;
padding:0!important;
position:relative;
text-align:center;
vertical-align:middle;
}
.ceo-matrix-updated .axis-proyecto-pill{
position:absolute;
top:6px;
bottom:6px;
left:6px;
right:6px;
background:#FFFFFF;
color:var(--deep);
border:2px solid var(--blue);
border-radius:12px;
box-shadow:0 12px 24px -18px rgba(6,46,79,.12);
overflow:hidden;
}
.ceo-matrix-updated .axis-proyecto-pill .axis-tag{
font-size:7px;
font-weight:600;
color:rgba(6,46,79,.45);
text-transform:none;
}
.ceo-matrix-updated .axis-proyecto-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) rotate(180deg);
writing-mode:vertical-rl;
font-size:11px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
white-space:nowrap;
line-height:1;
text-align:center;
}
.ceo-matrix-updated .matrix-wrap{
overflow:hidden;
border-radius:18px;
border:3px solid var(--deep);
box-shadow:0 18px 44px -34px rgba(6,46,79,.55);
background:#fff;
}
.ceo-matrix-updated .ceo-table{
width:100%;
border-collapse:separate;
border-spacing:0;
table-layout:fixed;
font-size:12px;
color:var(--deep);
}
.ceo-matrix-updated .ceo-table th,
.ceo-matrix-updated .ceo-table td{
border-right:1px solid rgba(255,255,255,.92);
border-bottom:1px solid #E7EEF6;
text-align:center;
font-weight:900;
line-height:1.08;
}
.ceo-matrix-updated .ceo-table th:last-child,
.ceo-matrix-updated .ceo-table td:last-child{
border-right:0;
}
.ceo-matrix-updated .ceo-table thead th{
background:var(--deep);
color:#fff;
padding:12px 6px;
}
.ceo-matrix-updated .axis-row th{
padding:0;
height:42px;
border-bottom:1px solid rgba(255,255,255,.18);
background:var(--deep);
}
.ceo-matrix-updated .axis-row .blank-corner{
width:21%;
background:#FFFFFF!important;
border-right:1px solid #E7EEF6!important;
border-bottom:1px solid #E7EEF6;
}
.ceo-matrix-updated .axis-row .axis-ingresos{
background:#FFFFFF;
padding:6px 8px;
border-right:1px solid #E7EEF6!important;
}
.ceo-matrix-updated .axis-row .axis-ingresos .axis-ingreso-tag{
font-size:10px;
font-weight:600;
color:rgba(6,46,79,.4);
text-transform:none;
letter-spacing:0;
}
.ceo-matrix-updated .axis-row .axis-ingresos > span{
display:flex;
align-items:center;
justify-content:center;
background:#FFFFFF;
color:var(--deep);
border:2px solid var(--blue);
border-radius:12px;
box-shadow:0 12px 24px -18px rgba(6,46,79,.12);
font-size:12px;
font-weight:900;
letter-spacing:.14em;
text-transform:uppercase;
white-space:nowrap;
}
.ceo-matrix-updated .axis-row .total-top{
background:#FFFFFF!important;
border-left:0;
border-bottom:1px solid #E7EEF6;
}
.ceo-matrix-updated .header-row th:first-child{
width:21%;
text-align:left;
padding-left:14px;
}
.ceo-matrix-updated .header-row th{
font-size:11px;
min-height:54px;
}
.ceo-matrix-updated .ceo-table td{
padding:5px 4px;
font-size:11px;
min-height:56px;
}
.ceo-matrix-updated .ceo-table td.etapa-label{
background:var(--deep);
color:#fff;
text-align:left;
padding-left:14px;
line-height:1.14;
}
.ceo-matrix-updated .ceo-table tbody tr:nth-child(even):not(.subtotal-row) td.etapa-label{
background:#0A3C66;
}
.ceo-matrix-updated .ceo-table td b{
display:block;
font-size:15px;
line-height:1;
margin-bottom:4px;
font-weight:900;
}
.ceo-matrix-updated .ceo-table td span{
display:block;
font-size:10.5px;
line-height:1;
font-weight:900;
opacity:.98;
}
.ceo-matrix-updated .op{background:#D7ECFA;color:#06395F}
.ceo-matrix-updated .ok{background:#28C9C8;color:#003B3A}
.ceo-matrix-updated .ok-strong{background:#0B8C74;color:#fff;font-weight:900}
.ceo-matrix-updated .risk{background:#F45D7B;color:#fff}
.ceo-matrix-updated .danger{background:#ED254E;color:#fff}
.ceo-matrix-updated .danger-strong{background:#B00D30;color:#fff}
.ceo-matrix-updated .warning{background:#FFD000;color:#062E4F}
.ceo-matrix-updated .overdue-soft{background:#FFE3E8;color:#D8183D}
.ceo-matrix-updated .ok-soft{background:#D6F5EF;color:#0B6F5E}
.ceo-matrix-updated .empty{
background:#EEF2F6;
color:#9AA8B8;
font-size:0!important;
}
.ceo-matrix-updated .empty::before{
content:"";
display:block;
width:22px;
height:2px;
background:#B9C5D1;
margin:8px auto;
border-radius:999px;
}
.ceo-matrix-updated .ceo-table tbody td:last-child{
background:var(--deep);
color:#fff;
}
.ceo-matrix-updated .ceo-table tbody tr.subtotal-row td.etapa-label{
background:#FFFFFF!important;
color:var(--deep);
}
.ceo-matrix-updated .subtotal-row td.etapa-label::before{
content:"Entregado";
display:block;
color:var(--deep);
font-size:9px;
text-transform:uppercase;
letter-spacing:.12em;
margin-bottom:3px;
}
.ceo-matrix-updated .subtotal-row.subtotal-start td.etapa-label::before{
content:"6. Entregado";
}
.ceo-matrix-updated .subtotal-row:not(.subtotal-start) td.etapa-label::before{
content:"7. Entregado";
}
.ceo-matrix-updated .ceo-table tbody tr.subtotal-row.subtotal-start td.etapa-label{
color:#8DE590!important;
}
.ceo-matrix-updated .ceo-table tbody tr.subtotal-row:not(.subtotal-start) td.etapa-label{
color:#ED254E!important;
}
.ceo-matrix-updated .ceo-table tbody tr.subtotal-row td:last-child{
background:#FFFFFF;
color:var(--deep);
}
.ceo-matrix-updated .subtotal-start td{
border-top:3px solid var(--deep);
}
/* Perimeter navy border: header-row through Total general only */
.ceo-matrix-updated .header-row th{
border-top:2px solid var(--deep);
border-bottom:2px solid var(--deep);
}
.ceo-matrix-updated .header-row th:first-child,
.ceo-matrix-updated .ceo-table tbody tr td.etapa-label,
.ceo-matrix-updated .ceo-table tfoot tr:first-child td.etapa-label{
border-left:2px solid var(--deep);
}
.ceo-matrix-updated .header-row th:last-child,
.ceo-matrix-updated .ceo-table tbody tr td:last-child,
.ceo-matrix-updated .ceo-table tfoot tr:first-child td:last-child{
border-right:2px solid var(--deep)!important;
}
.ceo-matrix-updated .ceo-table tfoot tr:first-child td{
border-bottom:2px solid var(--deep)!important;
}
.ceo-matrix-updated .ceo-table tfoot td{
background:var(--deep)!important;
color:#fff!important;
border-bottom:0;
padding:8px 4px;
}
.ceo-matrix-updated .ceo-table tfoot td.etapa-label{
text-align:left;
padding-left:10px;
}
.ceo-matrix-updated .ceo-table .header-row th:last-child,
.ceo-matrix-updated .ceo-table tbody td:last-child,
.ceo-matrix-updated .ceo-table tfoot tr:first-child td:last-child{
border-left:3px solid var(--deep);
}
.ceo-matrix-updated .ceo-table .header-row th:nth-last-child(3),
.ceo-matrix-updated .ceo-table tbody td:nth-last-child(3),
.ceo-matrix-updated .ceo-table tfoot tr:first-child td:nth-last-child(3){
border-left:3px solid var(--deep);
}
/* Divisor Cobrado Fuera de Tiempo | Cobrado En Tiempo */
.ceo-matrix-updated .ceo-table .header-row th:nth-last-child(2),
.ceo-matrix-updated .ceo-table tbody td:nth-last-child(2),
.ceo-matrix-updated .ceo-table tfoot tr:first-child td:nth-last-child(2){
border-left:1px solid #C6D4E2;
}
.ceo-matrix-updated .ceo-table .header-row th:first-child,
.ceo-matrix-updated .ceo-table tbody td.etapa-label,
.ceo-matrix-updated .ceo-table tfoot tr:first-child td.etapa-label{
border-left:3px solid var(--deep);
}
.ceo-matrix-updated .ceo-table .header-row th:nth-last-child(4),
.ceo-matrix-updated .ceo-table tbody td:nth-last-child(4),
.ceo-matrix-updated .ceo-table tfoot tr:first-child td:nth-last-child(4){
border-left:1px solid rgba(255,255,255,.92);
}
.ceo-matrix-updated .ceo-table tfoot tr:first-child td:nth-last-child(3) b,
.ceo-matrix-updated .ceo-table tfoot tr:first-child td:nth-last-child(3) span,
.ceo-matrix-updated .ceo-table tfoot tr:first-child td:nth-last-child(2) b,
.ceo-matrix-updated .ceo-table tfoot tr:first-child td:nth-last-child(2) span{
color:#28C9C8;
}
.ceo-matrix-updated .ceo-table td.etapa-label .responsable{
display:block;
margin-top:5px;
font-size:10px;
line-height:1.15;
font-weight:500;
color:rgba(255,255,255,.78);
letter-spacing:0;
text-transform:none;
}
.ceo-matrix-updated .ceo-table .cobrado-head{
vertical-align:middle;
background:#FFFFFF!important;
}
.ceo-matrix-updated .ceo-table .cobrado-head .head-parent{
display:block;
color:var(--deep);
font-size:9px;
line-height:1;
font-weight:900;
letter-spacing:.12em;
text-transform:uppercase;
margin-bottom:4px;
}
.ceo-matrix-updated .ceo-table .cobrado-head .head-main{
display:block;
font-size:11px;
line-height:1.05;
font-weight:900;
letter-spacing:0;
text-transform:none;
}
.ceo-matrix-updated .ceo-table .cobrado-head .cobrado-ok{color:#8DE590}
.ceo-matrix-updated .ceo-table .cobrado-head .cobrado-late{color:#ED254E}
.ceo-matrix-updated .ceo-table .header-owner{
display:block;
margin-top:5px;
font-size:9px;
line-height:1.1;
font-weight:500;
color:rgba(255,255,255,.72);
letter-spacing:0;
text-transform:none;
}
.ceo-matrix-updated .ceo-table tfoot .cobrado-total-row td{
border-top:1px solid #FFFFFF;
border-bottom:0!important;
padding:7px 4px!important;
}
.ceo-matrix-updated .ceo-table tfoot .cobrado-total-empty{
background:#FFFFFF!important;
color:transparent!important;
border-top:0;
border-bottom:0;
border-left:0;
border-right:1px solid #E7EEF6!important;
}
.ceo-matrix-updated .ceo-table tfoot .total-potential-cell{
background:#FFD000!important;
color:#062E4F!important;
text-align:center;
vertical-align:middle;
border-left:1px solid #fff;
border-top:3px solid var(--deep);
border-bottom:0;
border-right:0;
padding:14px 4px!important;
}
.ceo-matrix-updated .ceo-table tfoot .total-potential-cell b{
display:block;
font-size:15px;
color:#062E4F;
}
.ceo-matrix-updated .ceo-table tfoot .total-potential-cell span{
display:block;
font-size:16px;
color:#062E4F;
margin-top:2px;
white-space:nowrap;
}
.ceo-matrix-updated .ceo-table tfoot .total-potential-cell em{
display:block;
font-style:normal;
font-weight:800;
font-size:8px;
letter-spacing:0;
text-transform:uppercase;
color:#062E4F;
margin-top:8px;
padding-top:8px;
border-top:1px solid rgba(6,46,79,.25);
}
.ceo-matrix-updated .ceo-table tfoot .cobrado-total-cell{
background:var(--blue)!important;
color:#FFFFFF!important;
text-align:center;
border:3px solid var(--deep)!important;
padding:14px 6px;
box-shadow:none!important;
}
.ceo-matrix-updated .ceo-table tfoot tr.cobrado-total-row td.cobrado-total-cell{
border-top:3px solid var(--deep)!important;
border-bottom:3px solid var(--deep)!important;
}
.ceo-matrix-updated .ceo-table tfoot .cobrado-total-cell b{
display:block;
font-size:15px;
line-height:1.05;
margin:0 0 6px;
color:#FFFFFF;
font-weight:800;
}
.ceo-matrix-updated .ceo-table tfoot .cobrado-total-cell span{
display:block;
font-size:20px;
line-height:1.05;
color:#FFFFFF;
font-weight:900;
}
.ceo-matrix-updated .matrix-note{
display:none;
}
.ceo-thesis{
margin:10px 0 0;
padding-bottom:2px;
text-align:center;
font-family:var(--serif);
font-weight:800;
font-size:clamp(16px,1.8vw,20px);
color:var(--deep);
letter-spacing:-.02em;
line-height:1.25;
}
/* Vista CEO — celdas clicables y panel de detalle */
.ceo-table td.cell-clickable{
cursor:pointer;
position:relative;
transition:box-shadow .15s ease, transform .15s ease;
}
.ceo-table td.cell-clickable:hover{
box-shadow:inset 0 0 0 2px rgba(6,46,79,.55);
transform:translateY(-1px);
}
.ceo-table td.cell-active{
box-shadow:inset 0 0 0 2px var(--deep);
}
.ceo-detail{
margin-top:22px;
border:1.5px solid var(--deep);
border-radius:16px;
background:#F7FAFD;
overflow:hidden;
animation:ceoDetailIn .22s ease;
}
@keyframes ceoDetailIn{
from{opacity:0;transform:translateY(-6px)}
to{opacity:1;transform:translateY(0)}
}
.ceo-detail-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px 18px;
background:var(--deep);
}
.ceo-detail-eyebrow{
display:block;
font-size:10px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
color:rgba(255,255,255,.6);
margin-bottom:3px;
}
.ceo-detail-head h4{
margin:0;
font-family:var(--serif);
font-size:17px;
font-weight:800;
color:#fff;
line-height:1.3;
}
.ceo-detail-close{
flex:0 0 auto;
width:30px;
height:30px;
border-radius:50%;
border:1px solid rgba(255,255,255,.4);
background:transparent;
color:#fff;
font-size:13px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}
.ceo-detail-close:hover{background:rgba(255,255,255,.15)}
.ceo-detail-scroll{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.ceo-detail-table{
width:100%;
min-width:0;
border-collapse:collapse;
font-size:10.5px;
table-layout:fixed;
}
.ceo-detail-table thead th{
background:#E9F0F7;
color:var(--deep);
font-size:8.5px;
font-weight:800;
letter-spacing:.02em;
text-transform:uppercase;
text-align:left;
padding:8px 6px;
border-bottom:1.5px solid var(--deep);
white-space:normal;
}
.ceo-detail-table tbody td{
padding:8px 6px;
border-bottom:1px solid #E2EBF3;
color:var(--ink);
white-space:normal;
font-weight:600;
overflow-wrap:break-word;
}
.ceo-detail-table tbody tr:last-child td{border-bottom:0}
.ceo-detail-table tbody tr:nth-child(even){background:#EFF5FA}
.ceo-detail-table td.monto-cell{font-weight:900;color:var(--deep)}
.ceo-detail-chips{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:10px;
}
.ceo-detail-chip{
display:inline-block;
padding:5px 12px;
border-radius:999px;
font-size:11px;
font-weight:800;
}
.ceo-detail-chip small{
display:block;
font-size:9px;
font-weight:600;
opacity:.8;
margin-top:2px;
text-transform:none;
letter-spacing:0;
}
.ceo-detail-table td.id-cell{font-weight:800;color:rgba(6,46,79,.5)}
.ceo-detail-table td.status-cell span, .ceo-detail-table td.etapa-cell span{
display:inline-block;
padding:3px 7px;
border-radius:999px;
font-size:9px;
font-weight:800;
white-space:normal;
line-height:1.2;
}
@media(max-width:680px){
.ceo-detail-head{padding:12px 14px}
.ceo-detail-head h4{font-size:15px}
.ceo-detail-table{font-size:11px}
}
@media(max-width:900px){
.ceo-matrix-updated .matrix-wrap{-webkit-overflow-scrolling:touch}
}
@media(max-width:620px){
.ceo-matrix-updated .axis-proyecto-text{font-size:9px}
.ceo-matrix-updated .ceo-table{min-width:680px}
.ceo-matrix-updated .axis-row .axis-ingresos > span{height:26px;min-height:26px;font-size:8px;border-radius:8px}
}
.seg-cobrado{background:#0C8FD3;}
/* Ajuste Vista CEO: fondo atrás de Etapas de Ingreso en blanco */
/* --- v2 móvil overrides --- */
/* v2 móvil: matriz completa sin scroll horizontal */
@media(max-width:900px){
.ceo-matrix-updated .matrix-wrap{overflow-x:visible}
.ceo-matrix-updated .ceo-table{min-width:0;width:100%;table-layout:fixed;font-size:clamp(7px,1.15vw,11px)}
.ceo-matrix-updated .ceo-table th{font-size:clamp(6.5px,1.05vw,10px)!important;padding:clamp(3px,.6vw,7px) clamp(1px,.4vw,4px)!important}
.ceo-matrix-updated .ceo-table td{font-size:clamp(7px,1.1vw,10.5px)!important;padding:clamp(3px,.6vw,7px) clamp(1px,.4vw,4px)!important}
.ceo-matrix-updated .ceo-table td b{font-size:clamp(8px,1.25vw,12px)!important}
.ceo-matrix-updated .ceo-table td span{font-size:clamp(6.5px,1vw,10px)!important}
.ceo-matrix-updated .ceo-table td.etapa-label{padding-left:clamp(4px,.8vw,10px)!important}
.ceo-matrix-updated .ceo-table td.etapa-label .responsable{font-size:clamp(6px,.9vw,9px);margin-top:2px}
.ceo-matrix-updated .ceo-table .header-owner{font-size:clamp(5.5px,.85vw,8px);margin-top:2px}
.ceo-matrix-updated .ceo-table .cobrado-head .head-parent{font-size:clamp(5.5px,.85vw,8px);margin-bottom:2px}
.ceo-matrix-updated .ceo-table .cobrado-head .head-main{font-size:clamp(6.5px,1vw,9.5px)}
.ceo-matrix-updated .ceo-table tfoot .cobrado-total-cell b{font-size:clamp(8px,1.25vw,12px)!important}
.ceo-matrix-updated .ceo-table tfoot .cobrado-total-cell span{font-size:clamp(8px,1.3vw,14px)!important}
.ceo-matrix-updated .axis-row .axis-ingresos > span{font-size:clamp(6.5px,1vw,10px);height:auto;min-height:0}
.ceo-matrix-updated .axis-proyecto-text{font-size:clamp(7px,1vw,10px)}
}
/* Personalizable en 2 renglones */
.ceo-matrix-updated .axis-row .axis-ingresos > span{flex-direction:column;height:auto;min-height:30px;line-height:1.15;padding:5px 10px}
.ceo-matrix-updated .axis-row .axis-ingresos .axis-ingreso-tag{display:block;margin-top:2px}
.ceo-matrix-updated .axis-proyecto-pill .axis-tag{display:block;margin-top:2px}
/* KPIs en 2x2 en móvil para que se vean los 4 */
@media(max-width:600px){
.ceo-kpi-row{flex-wrap:wrap;gap:6px}
.ceo-kpi-row .dash-kpi{flex:1 1 46%;font-size:10px}
.ceo-kpi-row .dash-kpi b{font-size:14px}
}
/* Detalle: celda Proyecto/Cliente combinada, ambos en bold */
.ceo-detail-table td.proj-cell{line-height:1.25}
.ceo-detail-table td.proj-cell .proj-name{display:block;font-weight:800;color:var(--deep)}
.ceo-detail-table td.proj-cell .cli-name{display:block;font-weight:700;color:#5B6B7E;font-size:.9em;margin-top:1px}
/* Detalle adaptable: la letra se reduce conforme la pantalla se achica */
@media(max-width:760px){
.ceo-detail-scroll{overflow-x:visible}
.ceo-detail-table{font-size:11px}
.ceo-detail-table th{padding:8px 6px!important;font-size:9px!important}
.ceo-detail-table td{padding:8px 6px}
}
@media(max-width:560px){
.ceo-detail-table{font-size:9.5px}
.ceo-detail-table th{padding:6px 4px!important;font-size:8px!important}
.ceo-detail-table td{padding:6px 4px}
.ceo-detail-chips{gap:6px}
.ceo-detail-chip{font-size:9px;padding:4px 9px}
}
@media(max-width:400px){
.ceo-detail-table{font-size:8px}
.ceo-detail-table th{font-size:7px!important;padding:5px 3px!important}
.ceo-detail-table td{padding:5px 3px}
}
/* "6./7. Entregado" responsive en la columna de etapa */
@media(max-width:640px){
.ceo-matrix-updated .subtotal-row td.etapa-label::before{font-size:7px;letter-spacing:.02em;white-space:normal}
}
@media(max-width:400px){
.ceo-matrix-updated .subtotal-row td.etapa-label::before{font-size:6px;letter-spacing:0}
}
/* SEO: título accesible oculto sin afectar el diseño */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* filas del detalle: apariencia clickeable (sin función en hover) */
.ceo-detail-table tbody tr{cursor:pointer}
/* Chips lista Tablax (difference card) */
.difference-section .difference-card-tablax ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0}
.difference-section .difference-card-tablax ul li{position:relative;display:inline-flex;align-items:center;gap:8px;background:#FFFFFF;border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:9px 16px 9px 13px;margin:0;font-weight:800;font-size:15px;line-height:1.15;color:#062E4F;letter-spacing:-.01em;box-shadow:0 8px 20px -12px rgba(3,20,38,.55);transition:transform .18s ease, box-shadow .18s ease}
.difference-section .difference-card-tablax ul li:before{content:"";display:inline-block;width:16px;height:16px;flex:none;margin:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230C8FD3'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6l1-8z'/%3E%3C/svg%3E") center/contain no-repeat}
.difference-section .difference-card-tablax ul li:hover{transform:translateY(-1px);box-shadow:0 12px 24px -12px rgba(3,20,38,.6)}
@media(max-width:900px){
.difference-section .difference-card-tablax ul{gap:6px}
.difference-section .difference-card-tablax ul li{font-size:clamp(10px,2.4vw,13px);padding:7px 12px}
}
/* Implementación Brains (nueva sección) */
/* Implementación Brains */
.brains-implementation{
padding:92px 0;
background:
radial-gradient(circle at 82% 12%, rgba(12,143,211,.13), transparent 34%),
linear-gradient(180deg,#FFFFFF 0%, #F7FAFD 100%);
}
.brains-implementation-card{
display:grid;
grid-template-columns:1.08fr .92fr;
gap:32px;
align-items:stretch;
background:#FFFFFF;
border:1px solid var(--line);
border-radius:32px;
padding:42px;
box-shadow:0 30px 80px -48px rgba(6,46,79,.46);
overflow:hidden;
}
.brains-implementation-kicker{
color:var(--blue);
margin-bottom:16px;
}
.brains-implementation-copy h2{
margin:0 0 18px;
max-width:760px;
color:var(--ink);
font-size:clamp(36px,4.2vw,58px);
line-height:1;
letter-spacing:-.055em;
font-weight:900;
}
.brains-implementation-copy p{
margin:0 0 18px;
max-width:680px;
color:var(--muted);
font-size:17px;
line-height:1.62;
font-weight:600;
}
.brains-implementation-copy .brains-implementation-lead{
color:var(--deep);
font-size:21px;
line-height:1.42;
font-weight:800;
}
.brains-implementation-btn{
margin-top:14px;
}
.brains-implementation-panel{
background:
radial-gradient(circle at 78% 14%, rgba(12,143,211,.42), transparent 36%),
linear-gradient(135deg,#000009 0%, #062E4F 100%);
border-radius:28px;
padding:34px;
color:#FFFFFF;
min-height:460px;
display:flex;
flex-direction:column;
justify-content:space-between;
position:relative;
overflow:hidden;
}
.brains-implementation-logo{
position:relative;
z-index:1;
display:block;
width:min(100%, 310px);
height:auto;
object-fit:contain;
object-position:left center;
margin-bottom:26px;
}
.brains-implementation-metrics{
position:relative;
z-index:1;
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}
.brains-implementation-metrics div{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
border-radius:18px;
padding:17px;
min-height:132px;
}
.brains-implementation-metrics strong{
display:block;
margin-bottom:8px;
color:var(--green);
font-size:28px;
line-height:1;
font-weight:900;
letter-spacing:-.035em;
}
.brains-implementation-metrics span{
display:block;
color:rgba(255,255,255,.82);
font-size:13px;
line-height:1.35;
font-weight:700;
}
.brains-implementation-footer{
margin:22px auto 0;
max-width:980px;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
background:#EAF6FF;
border:1px solid #CFE8FA;
border-radius:22px;
padding:22px 26px;
}
.brains-implementation-footer strong{
color:var(--deep);
font-size:18px;
line-height:1.2;
font-weight:900;
}
.brains-implementation-footer span{
color:var(--muted);
font-size:15px;
line-height:1.45;
font-weight:700;
max-width:560px;
}
@media(max-width:980px){
.brains-implementation-card{
grid-template-columns:1fr;
padding:30px;
}
.brains-implementation-panel{
min-height:0;
}
.brains-implementation-footer{
flex-direction:column;
align-items:flex-start;
}
}
@media(max-width:620px){
.brains-implementation{
padding:68px 0;
}
.brains-implementation-card{
padding:24px;
border-radius:26px;
}
.brains-implementation-copy .brains-implementation-lead{
font-size:18px;
}
.brains-implementation-panel{
padding:24px;
border-radius:22px;
}
.brains-implementation-logo{
width:min(100%, 240px);
}
.brains-implementation-metrics{
grid-template-columns:1fr;
}
.brains-implementation-metrics div{
min-height:0;
}
}
/* Formulario demo Tablax */
.demo-form-section{
background:#FFFFFF!important;
color:var(--ink);
padding:70px 0 56px;
}
.demo-form-head{
max-width:780px;
margin:0 auto 30px;
text-align:center;
}
.demo-form-head h2{
margin:0 0 10px;
color:var(--ink);
font-size:34px;
line-height:1.05;
letter-spacing:-.045em;
font-weight:900;
}
.demo-form-head p{
margin:0 auto;
color:#5D687B;
font-size:17px;
line-height:1.45;
max-width:700px;
}
.demo-form{
max-width:780px;
margin:0 auto;
background:#FFFFFF;
}
.form-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:28px 18px;
}
.form-field{
min-width:0;
}
.form-field.full{
grid-column:1 / -1;
}
.form-field label{
display:block;
margin:0 0 8px;
color:#344052;
font-size:13px;
line-height:1.1;
font-weight:900;
}
.form-field label span{
color:#FF3158;
}
.form-field label em{
font-style:normal;
font-weight:600;
color:#6D7787;
}
.demo-form input,
.demo-form select,
.demo-form textarea{
width:100%;
margin:0;
background:#FFFFFF;
border:1.5px solid #FF3158;
border-radius:12px;
color:#111827;
font:inherit;
font-size:15px;
line-height:1.2;
padding:14px 16px;
outline:none;
box-shadow:0 0 0 4px rgba(255,49,88,.08);
transition:border-color .18s ease, box-shadow .18s ease;
}
.demo-form input,
.demo-form select{
height:48px;
}
.demo-form textarea{
min-height:86px;
resize:vertical;
border-color:#DDE7F0;
box-shadow:none;
}
.demo-form input::placeholder,
.demo-form textarea::placeholder{
color:#7A7F89;
}
.demo-form select{
appearance:auto;
cursor:pointer;
}
.form-field small{
display:block;
margin-top:8px;
color:#FF3158;
font-size:12px;
line-height:1.1;
font-weight:800;
}
.form-field.full:last-child small{
display:none;
}
.demo-submit{
width:100%;
margin-top:22px;
border:0;
cursor:pointer;
border-radius:999px;
padding:16px 24px;
font-size:16px;
font-weight:900;
box-shadow:0 16px 34px -18px rgba(12,143,211,.7);
}
.demo-note{
margin:16px 0 0;
text-align:center;
color:#687487;
font-size:12px;
line-height:1.3;
font-weight:600;
}
@media(max-width:760px){
.demo-form-section{
padding:54px 0 44px;
}
.demo-form-head h2{
font-size:30px;
}
.demo-form-head p{
font-size:15px;
}
.form-grid{
grid-template-columns:1fr;
gap:22px;
}
}
/* Sección: No es un ERP. No es un CRM. */
.difference-section{
padding:88px 0;
background:#F5F9FD;
}
.difference-section .section-head{
margin-bottom:38px;
}
.difference-section .section-head .eyebrow{
display:inline-flex;
align-items:center;
gap:12px;
color:var(--blue);
font-size:14px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:18px;
}
.difference-section .section-head .eyebrow i{
width:16px;
height:16px;
background:var(--blue);
clip-path:polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
display:inline-block;
}
.difference-section .section-head h2{
margin:0 0 16px;
color:var(--ink);
font-size:64px;
line-height:1.02;
letter-spacing:-.05em;
font-weight:900;
max-width:980px;
}
.difference-section .section-head .sub{
margin:0;
max-width:980px;
color:#64748B;
font-size:24px;
line-height:1.35;
}
.difference-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:36px;
align-items:stretch;
}
.difference-card{
border-radius:18px;
padding:40px 38px 34px;
min-height:560px;
box-shadow:0 12px 32px -24px rgba(6,46,79,.28);
}
.difference-card-light{
background:#FFFFFF;
border:1px solid #E3ECF5;
color:var(--ink);
}
.difference-card-tablax{
background:var(--blue);
border:1px solid rgba(12,143,211,.2);
color:#FFFFFF;
}
.difference-icon{
width:110px;
height:110px;
border-radius:999px;
background:#EEF4F9;
color:#06213E;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:24px;
}
.difference-icon svg{
width:54px;
height:54px;
display:block;
}
.difference-icon-tablax{
background:#FFFFFF;
color:var(--blue);
}
.difference-card h3{
margin:0 0 10px;
color:inherit;
font-size:56px;
line-height:1;
letter-spacing:-.04em;
font-weight:900;
}
.difference-card .accent{
margin:0 0 18px;
color:var(--blue);
font-size:24px;
line-height:1.12;
font-weight:900;
}
.difference-card .tablax-accent{
color:#FFFFFF;
}
.difference-card p{
margin:0 0 18px;
color:inherit;
font-size:22px;
line-height:1.23;
}
.difference-card-light p{
color:#5E6C82;
}
.difference-card p strong{
color:var(--ink);
font-weight:900;
}
.difference-card .warn{
color:#9F0A0A;
font-weight:900;
}
.difference-card .bottom-note{
margin-top:26px;
color:#6C7A8F;
}
.difference-card-tablax p{
color:rgba(255,255,255,.95);
}
.difference-card-tablax ul{
margin:26px 0 0 24px;
padding:0 0 0 18px;
}
.difference-card-tablax li{
margin:8px 0;
font-size:22px;
line-height:1.22;
color:#FFFFFF;
}
.difference-card-tablax li::marker{
color:#FFFFFF;
}
.difference-card-tablax li strong{
font-weight:900;
}
@media (max-width: 1200px){
.difference-section .section-head h2{
font-size:52px;
}
.difference-section .section-head .sub{
font-size:21px;
}
.difference-grid{
gap:22px;
}
.difference-card{
min-height:0;
padding:28px 26px 26px;
}
.difference-icon{
width:86px;
height:86px;
}
.difference-icon svg{
width:42px;
height:42px;
}
.difference-card h3{
font-size:44px;
}
.difference-card .accent{
font-size:18px;
}
.difference-card p,
.difference-card-tablax li{
font-size:18px;
}
}
@media (max-width: 900px){
.difference-section{
padding:70px 0;
}
.difference-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.difference-card{min-height:0;padding:18px 12px}
.difference-icon{width:clamp(40px,10vw,56px);height:clamp(40px,10vw,56px);margin-bottom:12px}
.difference-icon svg{width:clamp(20px,5vw,28px);height:clamp(20px,5vw,28px)}
.difference-card h3{font-size:clamp(18px,4.6vw,26px);margin:0 0 5px}
.difference-card .accent{font-size:clamp(11px,2.6vw,15px);margin:0 0 8px;line-height:1.15}
.difference-card p{font-size:clamp(10.5px,2.4vw,13px);line-height:1.4;margin:0 0 8px}
.difference-card .bottom-note{margin-top:10px}
.difference-card .crm-note{font-size:clamp(11px,2.6vw,15px);margin-top:10px}
.difference-card-tablax ul{margin:10px 0 0 16px;font-size:clamp(10.5px,2.4vw,13px)}
.difference-section .section-head h2{
font-size:42px;
}
.difference-section .section-head .sub{
font-size:18px;
}
}
/* Frase final CRM */
.difference-card .crm-note{
margin-top:26px;
color:#062E4F;
font-weight:900;
font-size:24px;
line-height:1.18;
}
@media (max-width:1200px){
.difference-card .crm-note{
font-size:19px;
}
}
/* Ajustes sección Generador + Trazabilidad */
.map-footer .map-note{
display:flex;
align-items:flex-start;
gap:18px;
}
.map-note-icon{
width:48px;
height:48px;
min-width:48px;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
margin-top:2px;
}
.map-note-icon svg{
width:24px;
height:24px;
display:block;
}
.map-note-icon.generator-icon{
background:#DDF8DF;
color:#23A947;
}
.map-note-icon.trace-icon{
background:#E6F4FD;
color:var(--blue);
}
.map-note b{
display:block;
margin-bottom:8px;
}
/* Formulario sin textos rojos */
.demo-form .form-field small{
display:none;
}
.demo-form input,
.demo-form select{
border-color:#DDE7F0;
box-shadow:none;
}
.demo-form label span{
color:var(--blue);
}
.demo-form input:focus,
.demo-form select:focus,
.demo-form textarea:focus{
border-color:var(--blue);
box-shadow:0 0 0 4px rgba(12,143,211,.12);
}
/* Lanzamiento Agosto 2026 */
.launch-section{
padding:86px 0;
background:
radial-gradient(circle at 80% 16%, rgba(12,143,211,.18), transparent 34%),
linear-gradient(135deg,#062E4F 0%, #0A5B8F 48%, #0C8FD3 100%);
color:#FFFFFF;
overflow:hidden;
}
.launch-card{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:34px;
align-items:stretch;
}
.launch-kicker{
color:#8DE590;
margin-bottom:18px;
}
.launch-copy{
padding:22px 0;
}
.launch-copy h2{
margin:0 0 18px;
color:#FFFFFF;
font-size:clamp(46px, 5.5vw, 72px);
line-height:.98;
letter-spacing:-.055em;
font-weight:900;
max-width:760px;
}
.launch-copy p{
margin:0 0 18px;
color:rgba(255,255,255,.88);
font-size:18px;
line-height:1.55;
max-width:680px;
}
.launch-copy .launch-lead{
font-size:22px;
line-height:1.42;
color:#FFFFFF;
font-weight:800;
}
.launch-btn{
margin-top:16px;
background:#FFFFFF;
color:#062E4F;
border:0;
box-shadow:0 18px 42px -24px rgba(0,0,0,.45);
}
.launch-panel{
background:rgba(255,255,255,.96);
color:#062E4F;
border:1px solid rgba(255,255,255,.5);
border-radius:30px;
padding:34px;
box-shadow:0 30px 80px -44px rgba(0,0,0,.55);
position:relative;
overflow:hidden;
}
.launch-panel::before{
content:"";
position:absolute;
inset:auto -50px -80px auto;
width:220px;
height:220px;
border-radius:50%;
background:rgba(12,143,211,.12);
}
.launch-badge{
display:inline-flex;
align-items:center;
justify-content:center;
background:#E6F4FD;
color:var(--blue);
border:1px solid #B8DDF3;
border-radius:999px;
padding:9px 14px;
font-size:12px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
margin-bottom:22px;
}
.launch-panel h3{
margin:0 0 18px;
font-size:38px;
line-height:1;
letter-spacing:-.04em;
color:#062E4F;
font-weight:900;
}
.launch-panel ul{
margin:0;
padding:0;
list-style:none;
display:grid;
gap:14px;
}
.launch-panel li{
position:relative;
padding-left:28px;
font-size:16px;
line-height:1.35;
color:#344052;
font-weight:800;
}
.launch-panel li::before{
content:"";
position:absolute;
left:0;
top:.42em;
width:12px;
height:12px;
border-radius:50%;
background:#8DE590;
box-shadow:0 0 0 5px rgba(141,229,144,.22);
}
.launch-bottom{
margin-top:28px;
padding:18px 20px;
border-radius:18px;
background:#062E4F;
color:#FFFFFF;
}
.launch-bottom-title{
display:block;
font-size:15px;
font-weight:800;
line-height:1.1;
margin-bottom:12px;
color:#fff;
}
.phase-rows{
display:flex;
flex-direction:column;
}
.phase-row{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:10px;
padding:6px 0;
font-size:13.5px;
border-bottom:1px solid rgba(255,255,255,.16);
}
.phase-row:last-of-type{
border-bottom:none;
}
.phase-row .phase-range{
color:rgba(255,255,255,.72);
font-weight:600;
}
.phase-row .phase-disc{
color:#8DE590;
font-weight:800;
white-space:nowrap;
}
.phase-note{
display:block;
margin-top:12px;
font-size:11.5px;
color:rgba(255,255,255,.6);
line-height:1.4;
}
.phase-note-2{
margin-top:4px;
}
.launch-bottom span{
color:rgba(255,255,255,.8);
font-size:14px;
line-height:1.3;
}
@media(max-width:900px){
.launch-card{
grid-template-columns:1fr;
}
.launch-section{
padding:68px 0;
}
}
@media(max-width:620px){
.map-footer .map-note{
flex-direction:column;
}
.launch-panel{
padding:26px;
border-radius:24px;
}
.launch-copy .launch-lead{
font-size:18px;
}
}
/* Ajuste Vista CEO: fondo atrás de Etapas de Ingreso en blanco */
.ceo-matrix-updated .ceo-table thead .axis-row .axis-ingresos,
.ceo-matrix-updated .ceo-table thead .axis-row th.axis-ingresos{
background:#FFFFFF!important;
}
.ceo-matrix-updated .ceo-table thead .axis-row .axis-ingresos > span{
background:#FFFFFF;
}
/* Ajuste recuadros ¿Tablax es para tu empresa?: texto normal alineado al círculo */
.fit-card.fit-card-horizontal{
display:grid;
grid-template-columns:54px minmax(0,1fr);
column-gap:16px;
row-gap:12px;
align-items:start;
}
.fit-card.fit-card-horizontal .fit-icon{
grid-column:1;
grid-row:1;
margin-top:0;
}
.fit-card.fit-card-horizontal .fit-copy{
display:contents;
}
.fit-card.fit-card-horizontal .fit-copy h3{
grid-column:2;
grid-row:1;
margin:0;
align-self:start;
}
.fit-card.fit-card-horizontal .fit-copy p{
grid-column:1 / -1;
grid-row:2;
text-align:left;
margin:0;
padding-left:0;
}
@media (max-width:1100px){
.fit-card.fit-card-horizontal{
grid-template-columns:48px minmax(0,1fr);
column-gap:12px;
}
}
@media (max-width:900px){
.fit-card.fit-card-horizontal{
grid-template-columns:42px minmax(0,1fr);
}
}
/* Sección Brains proof antes de lanzamiento */
.brains-proof-section{
padding:88px 0;
background:#FFFFFF;
color:var(--ink);
}
.brains-proof-card{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:34px;
align-items:stretch;
background:
radial-gradient(circle at 85% 12%, rgba(12,143,211,.12), transparent 38%),
linear-gradient(180deg,#FFFFFF 0%,#F7FAFD 100%);
border:1px solid #D6E5F1;
border-radius:34px;
padding:44px;
box-shadow:0 28px 80px -54px rgba(6,46,79,.45);
}
.brains-kicker{
color:var(--blue);
margin-bottom:16px;
}
.brains-proof-copy h2{
margin:0 0 18px;
max-width:780px;
color:var(--ink);
font-size:clamp(42px, 4.8vw, 64px);
line-height:1;
letter-spacing:-.055em;
font-weight:900;
}
.brains-proof-copy p{
margin:0 0 18px;
max-width:760px;
color:#5D687B;
font-size:17px;
line-height:1.58;
}
.brains-proof-copy .brains-lead{
color:#062E4F;
font-size:21px;
line-height:1.42;
font-weight:800;
}
.brains-link{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:10px;
padding:14px 22px;
border-radius:999px;
background:var(--blue);
color:#FFFFFF;
text-decoration:none;
font-weight:900;
box-shadow:0 16px 34px -20px rgba(12,143,211,.7);
}
.brains-proof-panel{
background:#062E4F;
color:#FFFFFF;
border-radius:28px;
padding:34px;
display:flex;
flex-direction:column;
justify-content:space-between;
min-height:430px;
position:relative;
overflow:hidden;
}
.brains-proof-panel::before{
content:"";
position:absolute;
width:260px;
height:260px;
border-radius:50%;
right:-90px;
top:-90px;
background:rgba(12,143,211,.34);
}
.brains-logo-word{
position:relative;
z-index:1;
font-size:44px;
line-height:1;
letter-spacing:-.06em;
font-weight:900;
color:#FFFFFF;
}
.proof-metrics{
position:relative;
z-index:1;
display:grid;
gap:16px;
}
.proof-metrics div{
padding:18px;
border-radius:18px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
}
.proof-metrics strong{
display:block;
margin-bottom:6px;
font-size:26px;
line-height:1;
color:#8DE590;
font-weight:900;
}
.proof-metrics span{
display:block;
color:rgba(255,255,255,.82);
font-size:14px;
line-height:1.4;
font-weight:700;
}
.brains-testimonial-strip{
margin-top:22px;
grid-template-columns:.55fr 1fr 1fr;
gap:18px;
align-items:stretch;
}
.testimonial-label{
display:flex;
align-items:center;
justify-content:center;
min-height:130px;
border-radius:22px;
background:#E6F4FD;
color:var(--blue);
font-size:13px;
font-weight:900;
letter-spacing:.12em;
text-transform:uppercase;
text-align:center;
padding:18px;
}
.testimonial-card{
min-height:130px;
border:1px solid #D6E5F1;
border-radius:22px;
background:#FFFFFF;
padding:22px;
box-shadow:0 18px 44px -34px rgba(6,46,79,.35);
}
.testimonial-card p{
margin:0 0 12px;
color:#062E4F;
font-size:18px;
line-height:1.35;
font-weight:900;
}
.testimonial-card span{
color:#64748B;
font-size:13px;
line-height:1.3;
font-weight:700;
}
@media(max-width:900px){
.brains-proof-card{
grid-template-columns:1fr;
padding:30px;
}
.brains-proof-panel{
min-height:0;
}
.brains-testimonial-strip{
grid-template-columns:1fr;
}
}
@media(max-width:620px){
.brains-proof-section{
padding:64px 0;
}
.brains-proof-card{
padding:24px;
border-radius:26px;
}
.brains-proof-copy .brains-lead{
font-size:18px;
}
.brains-proof-copy p{
font-size:15px;
}
.brains-proof-panel{
padding:26px;
border-radius:22px;
}
}
/* Ajuste sección Brains: quitar testimoniales y usar logo oficial */
.brains-logo-img{
position:relative;
z-index:1;
display:block;
width:min(100%, 360px);
max-height:160px;
object-fit:contain;
object-position:left center;
margin-bottom:34px;
}
.brains-testimonial-strip{
display:none;
}
@media(max-width:900px){
.brains-logo-img{
width:min(100%, 300px);
max-height:130px;
}
}
/* ===== Optimización responsive global (v2) ===== */
html{-webkit-text-size-adjust:100%;}
img,svg{max-width:100%;}
@media(max-width:680px){
h1{font-size:clamp(28px,8vw,42px);}
h2{font-size:clamp(22px,6.4vw,32px)!important;}
h3{font-size:clamp(17px,4.6vw,22px);}
p{font-size:15px;}
.lead{font-size:16px;}
.lead b{font-size:18px;}
.section-head{margin-bottom:34px;}
.actions{flex-wrap:wrap;gap:10px;}
.actions .btn{width:100%;text-align:center;}
.problem-head h2{font-size:clamp(24px,7vw,34px)!important;}
.board-top{flex-direction:column;align-items:flex-start;gap:12px;}
.board-top strong{font-size:18px!important;}
.board-top strong span{font-size:20px!important;}
.ceo-problem .problem-cards{gap:6px;}
#pricing .problem-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
#pricing .problem-card{padding:12px;}
#pricing .problem-copy h3{font-size:17px;}
#pricing .problem-copy p{font-size:11px;}
.brains-implementation-metrics{grid-template-columns:1fr 1fr;gap:12px;}
.demo-form-head h2{font-size:clamp(24px,7vw,32px)!important;}
}
@media(max-width:420px){
.wrap{padding:0 14px;}
section{padding:48px 0;}
}
/* === TABLAX V2 === */
/* ══════════════════════════════════════════════════════════════════════════
SISTEMA VISUAL v2 — ritmo de fondos, línea de tiempo, pricing, movimiento
y navegación con CTA permanente.
Todos los componentes de aquí abajo son NUEVOS y tienen nombre propio
(.tone-*, .flow-tl, .price-*, .reveal, .nav-*), así que no compiten con
ninguna regla anterior: por eso este bloque no usa NI UN !important.
══════════════════════════════════════════════════════════════════════════ */
:root{
--tone-paper:#F1F6FB;
--deep-1:#071B31;
--deep-2:#0A2C4B;
--ink-on-deep:#FFFFFF;
--muted-on-deep:#9DBAD2;
}
/* ── 3 · RITMO: tres temperaturas de fondo que se alternan ───────────────── */
.tone-white{background:#FFFFFF}
.tone-paper{background:var(--tone-paper)}
.tone-deep{
background:
radial-gradient(110% 80% at 82% 0%, rgba(12,143,211,.30), transparent 58%),
linear-gradient(180deg, var(--deep-1) 0%, var(--deep-2) 100%);
color:var(--muted-on-deep);
}
.tone-deep h2,
.tone-deep h3,
.tone-deep strong{color:var(--ink-on-deep)}
.tone-deep p,
.tone-deep .sub{color:var(--muted-on-deep)}
.tone-deep .kicker{color:var(--blue-3)}
/* Costura entre secciones claras consecutivas: una hairline en vez de nada. */
.tone-white + .tone-white,
.tone-paper + .tone-paper{border-top:1px solid var(--line)}
/* ── 4a · LOS 5 MOMENTOS: línea de tiempo, no cinco cajitas ──────────────── */
.flow-tl{position:relative;margin:10px 0 60px}
.flow-tl-track{
position:absolute;
left:10%;right:10%;top:11px;height:2px;
background:#D8E5EF;border-radius:2px;overflow:hidden;
}
.flow-tl-progress{
display:block;height:100%;width:0;
background:linear-gradient(90deg,#0C8FD3 0%,#3F51D8 55%,#29A045 100%);
transition:width 1.5s cubic-bezier(.22,.61,.36,1);
}
.flow-tl.in .flow-tl-progress{width:100%}
.flow-tl-steps{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
}
.flow-tl-step{position:relative;text-align:center;padding:0 8px}
.flow-tl-dot{
position:relative;z-index:1;
display:block;width:24px;height:24px;margin:0 auto 18px;
border-radius:50%;background:#fff;border:2px solid #D8E5EF;
transition:border-color .35s ease, box-shadow .35s ease, transform .35s ease;
transition-delay:calc(var(--i) * .18s);
}
.flow-tl-dot::after{
content:"";position:absolute;inset:5px;border-radius:50%;
background:#D8E5EF;transition:background .35s ease;
transition-delay:calc(var(--i) * .18s);
}
.flow-tl.in .flow-tl-dot{
border-color:var(--step);
box-shadow:0 0 0 6px color-mix(in srgb, var(--step) 15%, transparent);
transform:scale(1.06);
}
.flow-tl.in .flow-tl-dot::after{background:var(--step)}
.flow-tl-step h3{
margin:0 0 4px;
font-size:clamp(14px,1.55vw,21px);
font-weight:900;letter-spacing:-.03em;color:var(--deep);
}
.flow-tl-step p{
margin:0;font-size:13px;font-weight:700;color:#8095A8;
}
@media(max-width:680px){
.flow-tl{margin:6px 0 44px;padding-left:2px}
.flow-tl-steps{grid-template-columns:1fr;gap:24px}
.flow-tl-track{left:11px;right:auto;top:12px;bottom:12px;width:2px;height:auto}
.flow-tl-progress{width:100%;height:0;transition:height 1.5s cubic-bezier(.22,.61,.36,1)}
.flow-tl.in .flow-tl-progress{height:100%}
.flow-tl-step{
display:grid;grid-template-columns:24px 1fr;
align-items:center;gap:16px;text-align:left;padding:0;
}
.flow-tl-dot{margin:0}
.flow-tl-step h3{font-size:19px}
}
/* ── 4b · PRICING: la tipografía ES el gráfico ───────────────────────────── */
.price-section{padding:96px 0}
.price-section .problem-head{max-width:820px;margin-bottom:52px}
.price-ladder{
display:grid;
grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
gap:48px;align-items:start;
}
/* ── Columna izquierda: tarjeta destacada que flota sobre el navy ── */
.price-hero{
position:relative;
/*background:linear-gradient(165deg, rgba(18,58,92,.75) 0%, rgba(9,34,58,.85) 100%);*/
/*border:1px solid rgba(123,196,232,.28);*/
border-radius:26px;
padding:clamp(28px,3vw,44px);
/*box-shadow:0 30px 70px -30px rgba(0,0,0,.6),
0 0 0 1px rgba(255,255,255,.03) inset;*/
}
/* Halo sutil que la despega del fondo */
.price-hero::before{
content:"";position:absolute;inset:-1px;border-radius:27px;z-index:-1;
background:radial-gradient(120% 80% at 20% 0%, rgba(12,143,211,.35), transparent 60%);
pointer-events:none;
}
.price-tag{
display:inline-flex;align-items:center;gap:9px;
padding:7px 14px;border-radius:999px;
background:rgba(12,143,211,.18);border:1px solid rgba(123,196,232,.5);
color:var(--blue-3);
font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
}
.price-amount{
display:flex;align-items:flex-start;gap:8px;
margin:20px 0 4px;line-height:.86;
}
.price-cur{
font-size:clamp(26px,3.4vw,44px);font-weight:900;
color:var(--blue-3);margin-top:.28em;
}
.price-num{
font-size:clamp(56px,8.4vw,104px);font-weight:900;
letter-spacing:-.055em;color:var(--ink-on-deep);
font-variant-numeric:tabular-nums;
}
.price-year{
font-size:15px;font-weight:800;color:var(--muted-on-deep);
margin:0 0 18px;
}
/* Descuento destacado, debajo del precio */
.price-discount{
display:flex;align-items:center;gap:14px;
margin:0 0 26px;
}
.price-list{
font-size:14px;font-weight:700;color:var(--muted-on-deep);
}
.price-list s{color:#6E8AA4;text-decoration-thickness:1.5px}
/* Badge de descuento: sólido, alto contraste — el gancho de la sección */
.price-off{
display:inline-flex;align-items:center;
padding:6px 13px;border-radius:8px;
background:var(--red);color:#fff;
font-weight:900;font-size:18px;letter-spacing:-.01em;
line-height:1;box-shadow:0 8px 20px -8px rgba(237,37,78,.7);
}
.price-terms{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:10px}
.price-terms li{
display:flex;align-items:baseline;gap:10px;
font-size:15px;color:var(--muted-on-deep);font-weight:700;
}
.price-terms b{
color:var(--ink-on-deep);font-size:19px;font-weight:900;
font-variant-numeric:tabular-nums;
}
.price-terms i{
width:7px;height:7px;border-radius:50%;background:var(--blue);
flex:none;transform:translateY(-3px);
}
/* ── Columna derecha: escalera de fases ── */
.price-steps{list-style:none;margin:0;padding:0}
.price-step{
display:grid;
grid-template-columns:1fr auto;
align-items:center;
gap:6px 24px;
padding:22px 0;
border-bottom:1px solid rgba(255,255,255,.12);
}
.price-steps li:first-child{border-top:1px solid rgba(255,255,255,.12)}
.price-step .p-head{grid-column:1;grid-row:1}
.price-step .p-fase{
display:block;
font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
color:var(--blue-3);margin-bottom:4px;
}
.price-step .p-empresas{
display:block;
font-size:clamp(20px,2.1vw,26px);font-weight:900;letter-spacing:-.02em;
color:var(--ink-on-deep);line-height:1.05;
}
/* Precio con el descuento justo debajo, alineado a la derecha */
.price-step .p-price{
grid-column:2;grid-row:1;
display:flex;flex-direction:column;align-items:flex-end;gap:8px;
}
.price-step .p-num{
font-size:clamp(22px,2.3vw,30px);font-weight:900;letter-spacing:-.04em;
color:var(--ink-on-deep);font-variant-numeric:tabular-nums;line-height:1;
}
/* Mismo badge rojo sólido que el hero, un punto más chico */
.price-step .p-off{
display:inline-flex;align-items:center;
padding:4px 10px;border-radius:7px;
background:var(--red);color:#fff;
font-weight:900;font-size:14px;letter-spacing:-.01em;line-height:1;
box-shadow:0 6px 16px -8px rgba(237,37,78,.7);
}
.price-step .p-detalle{
grid-column:1/-1;grid-row:2;
font-size:13px;font-weight:700;color:#7D97AF;
}
.price-note{
margin-top:22px;font-size:13.5px;font-weight:700;color:#7D97AF;
}
@media(max-width:980px){
.price-section{padding:76px 0}
.price-ladder{grid-template-columns:1fr;gap:36px}
}
@media(max-width:520px){
.price-step .p-empresas{font-size:19px}
.price-step .p-price{align-items:flex-start}
.price-step{grid-template-columns:1fr auto}
}
/* ── 5 · MOVIMIENTO: aparición al entrar en pantalla ─────────────────────── */
.reveal{
opacity:0;transform:translateY(22px);
transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
transition-delay:var(--d,0s);
}
/* Al terminar, el elemento vuelve a ser "plano": sin transform propio no deja
capas de composición colgadas ni rompe los position:fixed de sus hijos. */
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.reveal,.reveal.in{opacity:1;transform:none;transition:none}
.flow-tl-progress{transition:none;width:100%}
.flow-tl-dot,.flow-tl-dot::after{transition:none}
}
/* ── 6 · NAV: CTA permanente, progreso de lectura y sección activa ───────── */
.nav-progress{
position:absolute;left:0;bottom:-1px;height:3px;width:0;
background:linear-gradient(90deg,var(--blue),#3F51D8);
transition:width .12s linear;
pointer-events:none;
}
/* El CTA late una vez cuando ya pasaste el hero: recuerda que se puede
llenar el formulario en vivo con el cliente enfrente. */
.nav-links .nav-cta{position:relative;transition:transform .2s ease, box-shadow .2s ease}
.nav.past-hero .nav-cta{animation:cta-pop .6s ease 1}
@keyframes cta-pop{
0%,100%{transform:translateY(0)}
35%{transform:translateY(-3px) scale(1.03)}
}
@media(prefers-reduced-motion:reduce){
.nav.past-hero .nav-cta{animation:none}
}
/* El header en móvil se encimaba con el logo: se va el botón secundario y
el CTA se compacta, pero NUNCA desaparece. */
@media(max-width:620px){
.nav-in{height:64px;gap:10px}
.logo{font-size:22px}
.nav-links .btn.ghost{display:none}
.nav-links .nav-cta{padding:11px 16px;font-size:13px;white-space:nowrap}
}
/* ── 7 · SPLIT: imagen a sangre al 50% + texto grande ─────────────────────
Mismo truco de sangrado que el hero, pero como componente reutilizable y
en dos variantes (imagen a la izquierda o a la derecha), para poder repetir
el patrón en otras secciones sin volver a escribirlo. */
.split{
--pad-y:clamp(64px,7vw,104px);
--wrap-max:1180px;
--wrap-pad:28px;
--bleed:calc(max((100vw - var(--wrap-max)) / 2, 0px) + var(--wrap-pad));
position:relative;
overflow:hidden;
padding:var(--pad-y) 0;
}
.split-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
column-gap:clamp(32px,4.5vw,64px);
align-items:center;
}
/* La columna sólo reserva el espacio; el contenedor de imagen sangra fuera. */
.split-visual{position:relative;align-self:stretch;min-height:min(560px,62vh)}
.split-media{
position:absolute;
top:calc(-1 * var(--pad-y));
bottom:calc(-1 * var(--pad-y));
overflow:hidden;
background:var(--blue-light);
}
.split-media img{
width:100%;height:100%;display:block;
object-fit:cover;object-position:center;
}
.split-media-left .split-visual{grid-column:1;grid-row:1}
.split-media-left .split-copy {grid-column:2;grid-row:1}
.split-media-left .split-media {left:calc(-1 * var(--bleed));right:0}
.split-media-right .split-visual{grid-column:2;grid-row:1}
.split-media-right .split-copy {grid-column:1;grid-row:1}
.split-media-right .split-media {right:calc(-1 * var(--bleed));left:0}
.split-copy .kicker{margin-bottom:20px}
.split-copy h2{
margin:0 0 20px;
font-size:clamp(32px,3.9vw,56px);
line-height:1.04;letter-spacing:-.045em;font-weight:900;
text-wrap:balance;
}
.split-copy .acento{color:var(--red)}
.split-copy p{
margin:0;max-width:46ch;
font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--muted);
}
@media(max-width:900px){
.split-grid{grid-template-columns:1fr;row-gap:34px}
.split-media-left .split-visual,
.split-media-right .split-visual{
grid-column:1;grid-row:1;
min-height:0;height:clamp(260px,52vw,380px);
}
.split-media-left .split-copy,
.split-media-right .split-copy{grid-column:1;grid-row:2}
/* La imagen pasa a ser una banda a sangre completa arriba del texto.
Se repite el selector de las dos variantes para igualar especificidad:
si aquí pusiéramos sólo `.split-media`, las reglas de arriba
(`.split-media-left .split-media`) le ganarían y la banda se quedaría
corta de un lado. */
.split-media-left .split-media,
.split-media-right .split-media{
top:calc(-1 * var(--pad-y));bottom:0;
left:calc(-1 * var(--bleed));right:calc(-1 * var(--bleed));
}
}
@media(max-width:680px){.split{--wrap-pad:20px}}
@media(max-width:420px){.split{--wrap-pad:14px}}
/* ══════════════════════════════════════════════════════════════════════════
SISTEMA VISUAL TABLAX (importado de Claude Design) — #problema-direccion
Proyecto: 914faacd-2aa5-421b-b590-a6246a0e092d · "Ilustraciones e Iconos"
Los tokens van ACOTADOS a la sección, NO en :root, a propósito: el design
system define --paper:#FBFAF6 y este sitio ya tiene --paper:#F7FAFD. Si los
metiera en :root, importar el DS repintaría secciones que nadie pidió tocar.
Cuando migremos el sitio entero al DS, se suben a :root de una vez.
Sin !important: son clases nuevas (.ds-*) y no compiten con nada.
══════════════════════════════════════════════════════════════════════════ */
/* La sección conserva los iconos, las ilustraciones y el acomodo del design
system, pero se re-viste con la TIPOGRAFÍA y los TOKENS del sitio (Montserrat
var(--sans), --blue/--deep/--red/--line/--muted) para que se lea como parte
del resto del sitio y no como un bloque importado. */
#problema-direccion{
background:var(--soft);
color:var(--ink);
font-family:var(--sans);
padding:92px 0 96px;
}
/* Esta sección respira un poco más ancha que el resto: el contenedor pasa de
1180px a 1320px sólo aquí. */
#problema-direccion .wrap{max-width:1320px}
/* --- tarjeta base: convención del sitio (borde --line, radio grande, sombra suave) --- */
.ds-cards{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px;
}
.ds-card{
display:flex;flex-direction:column;
background:var(--surface);
border:1px solid var(--line);
border-radius:20px;
box-shadow:0 18px 44px -30px rgba(6,46,79,.4);
overflow:hidden;
transition:transform .25s ease, box-shadow .25s ease;
}
.ds-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px -30px rgba(6,46,79,.5)}
.ds-card__bar{height:4px;background:var(--red)} /* filete: rojo = problema/pasado */
.ds-card--blue .ds-card__bar{background:var(--blue)} /* azul = Tablax presente/futuro */
/* eyebrow de tarjeta al estilo del sitio: Montserrat 900, tracking ancho */
.ds-kicker{
display:block;
font-family:var(--sans);
font-size:12px;font-weight:900;
letter-spacing:.14em;text-transform:uppercase;
color:var(--red);
}
.ds-card--blue .ds-kicker,
.ds-kicker--blue{color:var(--blue)}
/* --- fila comercial: Cotizaciones / Proyectos / Facturas --- */
.ds-metric{padding:26px 26px 24px}
.ds-metric .ds-kicker{margin-bottom:14px}
.ds-metric__row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.ds-metric__name{
font-family:var(--sans);
font-size:26px;font-weight:900;letter-spacing:-.03em;
color:var(--deep);line-height:1.05;margin:0;
}
.ds-metric__sub{margin:8px 0 0;font-size:15px;font-weight:600;color:var(--muted)}
.ds-metric__icon{
flex:none;width:64px;height:64px;
border-radius:16px;background:var(--blue-light);
display:flex;align-items:center;justify-content:center;
}
.ds-metric__icon img{width:38px;height:38px;display:block}
/* --- pósters: Ayer / Hoy / Mañana --- */
.ds-poster__media{padding:20px 20px 0}
.ds-poster__media img{width:100%;display:block;border-radius:12px}
.ds-poster__body{padding:22px 24px 26px}
.ds-poster__body .ds-kicker{margin-bottom:10px}
.ds-poster__title{
margin:0;
font-family:var(--sans);font-weight:900;
font-size:30px;line-height:1;letter-spacing:-.035em;
color:var(--deep);
}
.ds-card--blue .ds-poster__title{color:var(--blue)}
.ds-poster__q{margin:12px 0 0;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--deep)}
.ds-poster__p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
/* --- tablero intermedio: por qué la contabilidad no basta --- */
.ds-board{
margin-top:clamp(40px,4.5vw,64px);
padding:clamp(24px,3.2vw,40px);
}
.ds-board__lead{
display:block;margin-top:14px;
font-size:18px;font-weight:600;color:var(--muted);line-height:1.4;
}
.ds-board__lead b{
display:block;margin-top:10px;font-weight:900;
font-family:var(--sans);
font-size:clamp(28px,3.6vw,46px);line-height:1.05;
letter-spacing:-.035em;
color:var(--ink);
}
/* Grupos Pasado / Presente-Futuro: la línea de color pasa a ser un CONTORNO
que encierra las cards que le corresponden, con su rótulo como encabezado. */
.ds-groups{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,2fr);
gap:24px;
margin:clamp(26px,3vw,36px) 0 0;
}
.ds-group{
border:2px solid;
border-radius:24px;
padding:16px 18px 20px;
}
.ds-group--past{border-color:var(--red)}
.ds-group--future{border-color:var(--blue)}
.ds-group__label{
display:block;
font-family:var(--sans);
font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
margin:2px 4px 16px;
}
.ds-group--past .ds-group__label{color:var(--red)}
.ds-group--future .ds-group__label{color:var(--blue)}
.ds-group__cards{display:grid;gap:18px}
.ds-group--future .ds-group__cards{grid-template-columns:1fr 1fr}
/* Dentro del contorno las cards son paneles blancos limpios: el color lo aporta
el borde del grupo, así que se les quita la sombra y el hover propios. */
.ds-group .ds-card{box-shadow:none}
.ds-group .ds-card:hover{transform:none;box-shadow:none}
@media(max-width:980px){
.ds-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
.ds-groups{grid-template-columns:1fr;gap:18px}
}
@media(max-width:680px){
.ds-cards{grid-template-columns:1fr}
.ds-group--future .ds-group__cards{grid-template-columns:1fr}
.ds-poster__title{font-size:28px}
/* En móvil la ilustración pasa a banner recortado (la card se acorta mucho)
y se ajustan los paddings verticales para quitar el vacío. */
.ds-poster__media{padding:0}
.ds-poster__media img{aspect-ratio:16/9;object-fit:cover;height:auto;border-radius:0}
.ds-poster__body{padding:18px 20px 20px}
.ds-group{padding:14px 14px 16px}
}
/* ── Tablero "dos relojes" (#la-solucion): layout movido de inline a clases
para poder apilarlo en móvil. En desktop: nodo | flecha | cards. En móvil
se apila y la flecha se oculta. Sin !important: el inline ya no fija el layout. */
.relojes-grid{
display:grid;
grid-template-columns:auto auto minmax(0,1fr);
}
.relojes-cards{max-width:720px}
.relojes-fork{display:none}
@media(max-width:760px){
.relojes-grid{
grid-template-columns:1fr;
gap:4px;
justify-items:stretch;
}
.relojes-arrow{display:none}
/* En móvil: Cotización arriba, la bifurcación baja y las 2 cards en 2 columnas */
.relojes-fork{display:block;width:100%;max-width:320px;height:auto;margin:2px auto 6px}
.relojes-cards{max-width:none;grid-template-columns:1fr 1fr;gap:10px}
}
/* ══════════════════════════════════════════════════════════════════════════
Fondos + test de perfil ("¿Tablax es para tu empresa?")
Clases nuevas (.objetivo-band, .fit-check*), sin !important.
══════════════════════════════════════════════════════════════════════════ */
/* Banda "Nuestro objetivo": fondo CLARO para cortar contra las secciones navy
de arriba (pricing) y de abajo (el test), con un glow azul tenue de acento. */
.objetivo-band{
background:
radial-gradient(90% 130% at 50% 0%, rgba(12,143,211,.12), transparent 60%),
linear-gradient(180deg, #FFFFFF 0%, #F1F5FA 100%);
}
.objetivo-band h2{color:var(--deep)}
/* Sección del test: navy más calmado que continúa desde la banda de arriba,
para que las tarjetas del test resalten. (compone especificidad para ganarle
a .tone-deep, que carga después). */
.fit.tone-deep{
background:
radial-gradient(100% 80% at 85% 0%, rgba(12,143,211,.15), transparent 55%),
linear-gradient(180deg, #071F34 0%, #06182A 100%);
}
/* ── Tarjetas del perfil (estáticas, con icono y texto con más énfasis) ──── */
.fit-items{margin-top:38px}
.fit-item{
display:flex;flex-direction:column;gap:20px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.16);
border-radius:18px;
padding:32px 28px;
transition:border-color .2s ease, transform .2s ease;
}
.fit-item:hover{transform:translateY(-4px);border-color:rgba(123,196,232,.5)}
/* icono en chip, más grande */
.fit-item__icon{
width:64px;height:64px;border-radius:16px;flex:none;
display:flex;align-items:center;justify-content:center;
background:rgba(12,143,211,.20);color:var(--blue-3);
}
.fit-item__icon svg{width:34px;height:34px;display:block}
.fit-item h3{
font-family:var(--sans);
font-size:22px;font-weight:900;letter-spacing:-.02em;line-height:1.18;
color:#fff;margin:0;
}
.fit-item p{
font-size:16px;line-height:1.55;color:rgba(255,255,255,.78);margin:0;
}
@media(max-width:900px){
.fit-item{padding:28px 24px}
}
/* ── Chips de advertencia en las cards ERP / CRM (con "taquesito" ⚡) ────── */
.difference-card .warn-chip{
display:inline-flex;align-items:center;gap:8px;
margin-top:14px;
background:#FDE7EC;border:1px solid #F6C6D0;border-radius:999px;
padding:9px 16px 9px 13px;
font-weight:800;font-size:14.5px;line-height:1.2;
letter-spacing:-.01em;color:#C01B3C;
}
.difference-card .warn-chip::before{
content:"";display:inline-block;width:16px;height:16px;flex:none;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ED254E'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6l1-8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* ── Precio de lista (tachado) en cada fila de fases ────────────────────── */
.price-step .p-offrow{
display:flex;align-items:center;gap:10px;
}
.price-step .p-lista{
font-size:15px;font-weight:700;color:#6E8AA4;
text-decoration:line-through;text-decoration-thickness:1.5px;
font-variant-numeric:tabular-nums;
}
@media(max-width:520px){
.price-step .p-lista{font-size:13px}
}
/* ── Fila superior de precios: 2 cards (Precio de lista + Fase 1) ────────── */
.price-topcards{
display:grid;grid-template-columns:1fr 1fr;gap:22px;
margin:0 0 clamp(28px,3.4vw,44px);
}
.pcard{
display:flex;flex-direction:column;
background:rgba(255,255,255,.05);
border:1.5px solid rgba(255,255,255,.16);
border-radius:18px;
padding:clamp(24px,2.6vw,32px);
}
.pcard--fase{
border-color:rgba(74,222,128,.5);
background:rgba(74,222,128,.06);
}
.pcard__kicker{
font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
color:var(--blue-3);margin-bottom:12px;
}
.pcard--fase .pcard__kicker{color:#4ADE80}
.pcard__num{
display:flex;align-items:baseline;
font-size:clamp(34px,4vw,48px);font-weight:900;letter-spacing:-.045em;line-height:.95;
color:var(--ink-on-deep);font-variant-numeric:tabular-nums;
}
.pcard--fase .pcard__num{color:#4ADE80}
.pcard__cur{font-size:.62em;font-weight:900;margin-right:3px}
.pcard__sub,.pcard__save{
display:block;margin-top:8px;font-size:14px;font-weight:800;color:var(--muted-on-deep);
}
.pcard--fase .pcard__save{color:#7EE6A2}
.pcard__terms{margin-top:20px;display:grid;gap:7px}
.pcard__terms p{margin:0;font-size:15px;font-weight:700;color:var(--muted-on-deep)}
.pcard__terms b{color:var(--ink-on-deep);font-weight:900;font-variant-numeric:tabular-nums}
.pcard--fase .pcard__terms b{color:#CDEFCF}
/* CTA de la sección, centrado bajo las fases */
.price-cta{display:flex;width:fit-content;margin:30px auto 0}
@media(max-width:760px){
.price-topcards{grid-template-columns:1fr}
}
/* ── Botón "Ver Demo" bajo las cards de "¿Tablax es para tu empresa?" ────── */
.fit-cta{
display:flex;flex-direction:column;align-items:center;gap:14px;
margin-top:clamp(36px,4vw,52px);
}
.fit-demo-btn{
display:inline-flex;align-items:center;gap:10px;
padding:15px 30px;font-size:16px;font-weight:900;letter-spacing:-.01em;
border-radius:999px;
color:#fff;background:var(--blue);
box-shadow:0 18px 36px -16px rgba(12,143,211,.7);
transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.fit-demo-btn:hover{
transform:translateY(-2px);
background:#0A7FBD;
box-shadow:0 22px 44px -16px rgba(12,143,211,.8);
}
.fit-cta-note{
font-size:13px;font-weight:700;color:var(--muted-on-deep);text-align:center;
}
/* ── Móvil: ERP / CRM / Tablax apiladas en 1 columna (no 3 apretadas) ────── */
@media(max-width:760px){
.difference-grid{grid-template-columns:1fr;gap:16px}
.difference-card{padding:28px 24px}
.difference-icon{width:64px;height:64px;margin-bottom:16px}
.difference-icon svg{width:32px;height:32px}
.difference-card h3{font-size:34px;margin:0 0 8px}
.difference-card .accent{font-size:16px;margin:0 0 12px;line-height:1.2}
.difference-card p{font-size:15px;line-height:1.55;margin:0 0 12px}
.difference-section .difference-card-tablax ul{gap:8px;margin-top:18px}
.difference-section .difference-card-tablax ul li{font-size:14px;padding:9px 15px}
}
/* ── Móvil: matriz CEO — columna "Estatus de Proyecto" más angosta + fuentes
más chicas para que todo quepa. (Este componente ya usa !important en toda
su cascada, así que aquí se iguala para poder sobreescribir.) ──────────── */
@media(max-width:680px){
/* Los anchos reales los fijan los ; con table-layout:fixed mandan ellos.
Se angosta la columna del eje (col 1) y la de etapa/responsable (col 2). */
.ceo-matrix-updated .ceo-table colgroup col:first-child{width:22px!important}
.ceo-matrix-updated .ceo-table colgroup col:nth-child(2){width:54px!important}
.ceo-matrix-updated .axis-proyecto-pill{left:3px!important;right:3px!important;border-radius:8px!important}
.ceo-matrix-updated .axis-proyecto-text{font-size:8px!important;letter-spacing:.02em!important;line-height:1!important}
.ceo-matrix-updated .axis-proyecto-pill .axis-tag{display:none!important}
/* columna de etapa/responsable un poco más angosta */
.ceo-matrix-updated .ceo-table td.etapa-label{width:56px!important;padding-left:4px!important}
.ceo-matrix-updated .ceo-table td.etapa-label .responsable{font-size:5.5px!important}
/* fuentes más chicas en toda la matriz para que quepan las columnas */
.ceo-matrix-updated .ceo-table{font-size:6.5px!important}
.ceo-matrix-updated .ceo-table th{font-size:6px!important;padding:3px 1px!important;line-height:1.08!important}
.ceo-matrix-updated .ceo-table td{font-size:6.5px!important;padding:3px 1px!important;line-height:1.12!important}
.ceo-matrix-updated .ceo-table td b{font-size:7.5px!important}
.ceo-matrix-updated .ceo-table td span{font-size:6px!important}
.ceo-matrix-updated .ceo-table .header-owner{font-size:5px!important;line-height:1.05!important}
.ceo-matrix-updated .ceo-table .cobrado-head .head-parent{font-size:5px!important}
.ceo-matrix-updated .ceo-table .cobrado-head .head-main{font-size:6px!important}
}
/* ── Móvil: cadena de valor (Generador + Inteligencia) en vertical ─────────
En móvil no hay ancho para la tira horizontal. En vez de scroll lateral,
toda la cadena se apila hacia abajo y las flechas "→" se giran 90° para
que apunten hacia abajo, siguiendo la lectura natural. */
@media(max-width:680px){
/* Se apaga el scroll lateral: ya no hace falta. */
.flow-scroll{overflow-x:visible;overflow-y:visible;padding:2px 0}
.horizontal-flow{
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
width:auto;
min-width:0;
gap:10px;
}
.horizontal-flow .flow-group.generator,
.horizontal-flow .flow-group.trace{width:auto;flex:0 0 auto;min-width:0}
/* Las pills dentro de cada grupo también se apilan. */
.horizontal-flow .flow-row{
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
gap:8px;
width:auto;
}
.horizontal-flow .flow-item{
flex:0 0 auto;
width:auto;
min-width:0;
height:auto;
min-height:0;
padding:14px 12px;
}
.horizontal-flow .flow-item strong{font-size:15px;margin-bottom:3px}
.horizontal-flow .flow-item span{font-size:12px}
/* La flecha apunta hacia abajo. */
.horizontal-flow .flow-arrow{
transform:rotate(90deg);
font-size:18px;
align-self:center;
height:16px;
}
.horizontal-flow .flow-arrow.bridge{font-size:22px;height:20px}
}
/* ── Móvil: menos padding vertical entre secciones (había mucho vacío) ───── */
@media(max-width:680px){
#pregunta-lunes{--pad-y:36px}
#problema-direccion{padding-top:40px;padding-bottom:44px}
#problema-direccion .ds-board{margin-top:8px}
.unified-flow{padding-top:44px;padding-bottom:48px}
#pricing.price-section{padding-top:52px;padding-bottom:56px}
}
/* ══════════════════════════════════════════════════════════════════════════
Landing /sales — banda del video y footer en azul marino profundo
(El header se queda con su fondo claro original.)
══════════════════════════════════════════════════════════════════════════ */
/* Footer navy con la misma familia de gradiente */
footer{
background:linear-gradient(180deg, #071B31 0%, #0A2C4B 100%);
border-top:1px solid rgba(123,196,232,.18);
color:#9DBAD2;
}
footer .foot strong{color:var(--blue-3)}
/* Fase 1: el −60% se muestra como la píldora roja de las otras fases */
.pcard__save{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pcard .p-off{
display:inline-flex;align-items:center;
padding:4px 10px;border-radius:7px;
background:var(--red);color:#fff;
font-weight:900;font-size:14px;letter-spacing:-.01em;line-height:1;
box-shadow:0 6px 16px -8px rgba(237,37,78,.7);
}
/* ══════════════════════════════════════════════════════════════════════════
Implementación Brains v2 — navy, copy a la izquierda + imagen a la derecha
(compone .brains-v2 para ganarle al fondo claro de .brains-implementation)
══════════════════════════════════════════════════════════════════════════ */
.brains-implementation.brains-v2{
background:linear-gradient(165deg, #0C1D38 0%, #0A1730 100%);
padding:clamp(56px,6vw,88px) 0;
}
.brains-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
gap:clamp(30px,4vw,58px);
align-items:center;
}
.brains-v2 .brains-implementation-kicker{color:var(--blue-3);margin-bottom:18px}
.brains-title{margin:0 0 20px}
.brains-title__big{
display:block;
font-size:clamp(54px,7vw,92px);font-weight:900;
letter-spacing:-.05em;line-height:.95;
color:#7FC3EA;
}
.brains-title__sub{
display:block;margin-top:8px;
font-size:clamp(21px,2.4vw,30px);font-weight:900;
letter-spacing:-.03em;line-height:1.15;
color:#FFFFFF;
}
.brains-lead{
margin:0 0 clamp(26px,3vw,36px);
max-width:56ch;
font-size:clamp(15px,1.15vw,17px);line-height:1.6;
color:#9DBAD2;
}
/* Filas de credenciales */
.brains-stats{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.brains-stat{
display:flex;align-items:baseline;gap:clamp(12px,1.6vw,20px);
background:rgba(255,255,255,.045);
border:1px solid rgba(123,196,232,.18);
border-radius:14px;
padding:clamp(15px,1.6vw,19px) clamp(16px,1.8vw,24px);
}
.brains-stat strong{
flex:none;
font-size:clamp(23px,2.4vw,30px);font-weight:900;
letter-spacing:-.03em;line-height:1;color:#7FC3EA;
}
.brains-stat span{
font-size:clamp(13px,1.05vw,15px);font-weight:700;
line-height:1.35;color:#9DBAD2;
}
/* Imagen del prototipo */
.brains-visual__img{
width:100%;height:auto;display:block;
border-radius:18px;
border:1px solid rgba(123,196,232,.25);
box-shadow:0 34px 76px -34px rgba(0,0,0,.65);
}
@media(max-width:900px){
.brains-grid{grid-template-columns:1fr;gap:30px}
.brains-lead{max-width:100%}
}
/* ── Banda de cierre "antes del Primer Café" (bajo el formulario) ─────────
Ilustración a sangre con el mensaje encima. El degradado inferior es un
scrim: garantiza que el texto se lea sin importar dónde recorte la imagen. */
.cafe-band{
position:relative;
display:flex;
align-items:flex-end;
justify-content:center;
min-height:clamp(300px,40vw,540px);
overflow:hidden;
/* La banda es un , que trae padding vertical. La imagen va a sangre
(inset:0) pero el degradado vive en __inner, dentro del área de contenido:
ese padding dejaba una franja abajo sin sombra. Se anula aquí. */
padding:0;
}
.cafe-band__img{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
object-position:center 30%;
display:block;
}
.cafe-band__inner{
position:relative;z-index:1;
width:100%;
padding:clamp(90px,16vw,220px) 20px clamp(30px,4vw,58px);
text-align:center;
background:linear-gradient(180deg, transparent 0%, rgba(6,20,38,.30) 45%, rgba(6,20,38,.62) 100%);
}
.cafe-band__title{
margin:0 auto;
max-width:900px;
font-size:clamp(26px,3.5vw,46px);
font-weight:900;
letter-spacing:-.035em;
line-height:1.14;
color:#FFFFFF;
text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.cafe-band__title span{color:var(--blue)}
/* ── Móvil: "¿Tablax es para tu empresa?" en 2 columnas ────────────────────
A una card por fila la sección era un scroll larguísimo. Se compactan
tipografía, icono y padding para que entren dos por fila sin apretarse. */
@media(max-width:620px){
.fit-grid.fit-items{grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.fit-item{padding:18px 14px;gap:12px;border-radius:14px}
.fit-item__icon{width:42px;height:42px;border-radius:11px}
.fit-item__icon svg{width:23px;height:23px}
.fit-item h3{font-size:15px;line-height:1.2}
.fit-item p{font-size:12.5px;line-height:1.42}
/* El hover de "levantar" no aplica en touch y estorbaba al tap. */
.fit-item:hover{transform:none}
}
@media(max-width:380px){
.fit-item{padding:15px 12px}
.fit-item h3{font-size:14px}
.fit-item p{font-size:12px}
}
/* ── Menú hamburguesa (solo móvil) ─────────────────────────────────────────
En desktop los links viven en línea dentro de .nav-menu. En móvil ese
mismo contenedor se convierte en un panel desplegable bajo el header y el
botón hamburguesa (a la derecha del CTA) lo abre. Un solo juego de links. */
.nav-menu{display:flex;align-items:center;gap:34px}
.nav-toggle{display:none}
@media(max-width:760px){
.nav-toggle{
display:flex;
flex-direction:column;
justify-content:center;
gap:5px;
width:40px;height:40px;
padding:0 9px;
flex:none;
background:transparent;
border:1px solid var(--line);
border-radius:11px;
cursor:pointer;
}
.nav-toggle__bar{
display:block;width:100%;height:2px;
background:var(--deep);border-radius:2px;
transition:transform .22s ease, opacity .18s ease;
}
/* Abierto: las barras forman una "X". */
.nav.open .nav-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .nav-toggle__bar:nth-child(2){opacity:0}
.nav.open .nav-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* El panel cuelga del header (que es sticky, así que le sirve de ancla). */
.nav-menu{
display:none;
position:absolute;
left:0;right:0;top:100%;
flex-direction:column;
align-items:stretch;
gap:0;
padding:6px 20px 12px;
/* Blanco sólido y sin backdrop-filter a propósito: el header ya tiene uno
y anidarlos hace que el fondo del panel no pinte (se transparentaba el
hero por debajo). Un dropdown sobre contenido variable debe ser opaco. */
background:#FFFFFF;
border-bottom:1px solid var(--line);
box-shadow:0 22px 40px -26px rgba(6,46,79,.5);
}
.nav.open .nav-menu{display:flex}
/* Gana a la regla que esconde los links en móvil. */
.nav.open .nav-menu a{
display:block;
padding:14px 2px;
font-size:15px;
border-bottom:1px solid var(--line);
}
.nav.open .nav-menu a:last-child{border-bottom:0}
}
/* ── Carátula (facade) del video de YouTube ────────────────────────────────
Se ve como el video, pero YouTube NO carga hasta el clic (ver script en
index.php). Mismo ancho/sombra que tenía el iframe; aspecto 16:9 estándar. */
.yt-facade{
position:relative;
width:70%;max-width:90%;
margin-inline:auto;
aspect-ratio:16 / 9;
border-radius:12px;
overflow:hidden;
cursor:pointer;
background:#000;
box-shadow:0 26px 70px -34px rgba(6,46,79,.55);
}
.yt-facade__thumb{
width:100%;height:100%;
object-fit:cover;display:block;
transition:transform .3s ease, filter .3s ease;
}
.yt-facade:hover .yt-facade__thumb{ transform:scale(1.03); filter:brightness(.9); }
.yt-facade__play{
position:absolute;inset:0;margin:auto;
width:76px;height:76px;
background:var(--blue);
border-radius:50%;
box-shadow:0 10px 30px -8px rgba(0,0,0,.5);
transition:transform .2s ease, background .2s ease;
}
.yt-facade:hover .yt-facade__play,
.yt-facade:focus-visible .yt-facade__play{ transform:scale(1.08); background:var(--blue-2); }
.yt-facade__play::before{ /* triángulo de play */
content:"";position:absolute;top:50%;left:54%;
transform:translate(-50%,-50%);
border-style:solid;border-width:15px 0 15px 24px;
border-color:transparent transparent transparent #fff;
}
.yt-facade iframe{ width:100%;height:100%;border:0;display:block; }
@media(max-width:680px){
.yt-facade{ width:92%; }
.yt-facade__play{ width:60px;height:60px; }
.yt-facade__play::before{ border-width:12px 0 12px 19px; }
}
/* como envoltura transparente: no altera el layout, el ![]()
interno
se comporta como si estuviera directo en su contenedor. Se usa para servir
una versión chica de las imágenes en móvil (≤700px) sin tocar el desktop. */
picture{display:contents}