/* ===== Impulso360 — content sections below the scroll film =====
   Same palette, type and radii as the hero; rem-based sizing so the long page scales with text. */
:root{
  --navy:#000612;--navy2:#00071b;--card:#00091f;--line:#14264a;--line2:#1e3560;
  --blue:#0b5ffe;--cyan:#22c8e6;--mint:#19d9c0;--ink:#fff;--dim:#b9bfd3;--muted:#9aa3bd;
}
html{scroll-behavior:smooth}
.after{display:block}
.sec{padding:5.5rem 0;background:var(--navy)}
.sec--alt{background:var(--navy2)}
.wrap{width:min(1180px,91.4vw);margin:0 auto}
.kicker{font-size:.74rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase;color:var(--cyan);margin-bottom:1rem}
.h2c{font-size:clamp(1.7rem,3vw,2.5rem);font-weight:700;line-height:1.12;letter-spacing:-.01em;color:var(--ink);max-width:24ch}
.h2c .grad{background:linear-gradient(90deg,#1a5cff 0%,#1f8cff 45%,#22d3ee 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.h3c{font-size:1.1rem;font-weight:600;line-height:1.3;color:var(--ink)}
.lead{font-size:1.12rem;line-height:1.6;color:var(--dim);max-width:60ch}
.muted{color:var(--muted);line-height:1.6}
.num{font-family:"Consolas","SFMono-Regular",Menlo,monospace;font-size:.78rem;letter-spacing:.14em;color:var(--cyan)}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-6{margin-top:3rem}.btn-c{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.9rem 1.5rem;border-radius:.5rem;font-size:1rem;font-weight:500;line-height:1;white-space:nowrap;border:1.5px solid transparent}
.btn-c--primary{background:var(--blue);color:#fff}
.btn-c--outline{background:transparent;color:var(--mint);border-color:var(--mint)}
.btn-c--ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.link-arrow{color:var(--cyan);font-weight:500}
.link-arrow::after{content:" →"}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border:1px solid var(--line2);border-radius:999px;padding:.45rem .9rem;font-size:.85rem;color:var(--dim)}/* transition from the film */
.after-top{padding:3.5rem 0 3rem;background:linear-gradient(180deg,#000614 0%,var(--navy2) 100%)}.pains .h3c{font-size:.98rem}
.pains .muted{font-size:.88rem}.ba .num{min-width:1.6rem}/* faq */
.faq{display:grid;gap:.5rem;max-width:860px}
.faq details{border:1px solid var(--line);border-radius:.8rem;background:var(--card);padding:0 1.25rem}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 0;font-weight:500;color:var(--ink);display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cyan);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 1.2rem;color:var(--dim);line-height:1.6}

/* diagnóstico */
.cta-band{display:grid;grid-template-columns:1fr 1fr;gap:3rem;border:1px solid var(--line2);border-radius:1.25rem;padding:2.5rem;background:radial-gradient(120% 140% at 0% 0%,#06234f 0%,#00091f 55%,#000612 100%)}
.form{display:grid;gap:1rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:grid;gap:.35rem}
.field label{font-size:.85rem;color:var(--dim)}
.field input,.field select,.field textarea{width:100%;background:#020c22;border:1px solid var(--line2);border-radius:.5rem;color:var(--ink);padding:.8rem .9rem;font:inherit;font-size:.95rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--cyan);outline-offset:1px}
.form-note{font-size:.85rem;color:var(--muted)}
.form-ok{display:none;border:1px solid var(--mint);border-radius:.8rem;padding:1rem 1.2rem;color:var(--ink);background:rgba(25,217,192,.08)}
.form.is-sent .form-ok{display:block}
.contact-list{list-style:none;display:grid;gap:.6rem;color:var(--dim)}
.contact-list strong{color:var(--ink);font-weight:500}

/* footer */
.site-footer{background:#00081f;border-top:1px solid #0d1a30;padding:3.5rem 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.foot-grid h4{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem;font-weight:500}
.foot-grid a,.foot-grid span{display:block;color:var(--dim);font-size:.92rem;padding:.2rem 0}
.foot-grid a:hover{color:var(--cyan)}
.foot-brand img{height:2.6rem;width:auto}
.foot-brand p{color:var(--dim);font-size:.92rem;margin-top:.5rem}
.foot-brand .tag{color:var(--ink);font-weight:500;letter-spacing:.3em;text-transform:uppercase;font-size:.75rem;margin-top:1rem}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;border-top:1px solid #0d1a30;margin-top:2.5rem;padding-top:1.2rem;font-size:.78rem;color:var(--muted);letter-spacing:.06em}

/* section-aware nav highlight after the film */
.nav__link--section{color:#00ffff}

@media (max-width: 899px){
  .sec{padding:3.5rem 0}
  .g2,.g3,.g4,.g5,.split,.compare,.ind,.steps,.plans,.ba,.cta-band,.web-band,.foot-grid,.form .row,.sol{grid-template-columns:1fr}  .cta-band{padding:1.5rem}
  .h2c{max-width:none}
  .usecases article{grid-template-columns:2.6rem 1fr}
}

/* ===== Soluciones: grilla bento (4 col x 3 filas, como la referencia) ===== */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(11.5rem,auto));gap:1rem}
.b{position:relative;overflow:hidden;border-radius:1.25rem;background:var(--card);border:1px solid var(--line);padding:1.4rem;display:flex;flex-direction:column;gap:.5rem}
.b--blue{background:linear-gradient(160deg,#1a5cff 0%,#0b4fe0 60%,#083db4 100%);border-color:transparent;color:#fff}
.b--blue .h3c{color:#fff}
.b-sub{color:rgba(255,255,255,.82);line-height:1.5;font-size:.95rem}
.num--light{color:rgba(255,255,255,.75)}
.b-a{grid-column:1;grid-row:1;align-items:flex-start;justify-content:space-between}
.b-b{grid-column:2 / span 2;grid-row:1;flex-direction:row;align-items:stretch;gap:1.25rem}
.b-c{grid-column:4;grid-row:1 / span 2}
.b-d{grid-column:1;grid-row:2}
.b-f{grid-column:2;grid-row:2}
.b-g{grid-column:3;grid-row:2}
.b-copy{flex:1 1 55%;min-width:0}
.b-emblem{height:2.6rem;width:auto}
.b-brandline{font-weight:600;font-size:1.05rem;line-height:1.3;color:#fff}
.b-a{background:#020919;border-color:var(--line2)}
.b-a .b-brandline{color:var(--ink)}

/* illustrations */
.b-tag{position:absolute;right:1rem;top:1rem;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(34,200,230,.5);border-radius:.3rem;padding:.2rem .45rem;background:rgba(0,9,31,.6)}
.b-tag--dark{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(0,0,0,.18)}
.b-chat{flex:1 1 45%;position:relative;display:flex;flex-direction:column;justify-content:center;gap:.5rem;background:#03122b;border:1px solid var(--line);border-radius:1rem;padding:2.4rem 1.1rem 1.1rem;min-width:0}.b-flow{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.3rem}
.b-flow i{font-style:normal;font-size:.66rem;letter-spacing:.04em;color:var(--dim);border:1px solid var(--line2);border-radius:999px;padding:.2rem .5rem}
.b-flow i:last-child{color:var(--cyan);border-color:rgba(34,200,230,.6)}
.b-cal{position:relative;margin-top:auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:1rem;padding:2.2rem .9rem .9rem;display:flex;flex-direction:column;gap:.5rem}
.b-cal__head,.b-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;text-align:center;font-size:.72rem}
.b-cal__head span{color:rgba(255,255,255,.6)}
.b-cal__grid span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:.4rem;color:rgba(255,255,255,.85)}
.b-cal__grid .is-turno{background:rgba(255,255,255,.22)}
.b-cal__grid .is-hoy{background:#22c8e6;color:#001}
.b-pill{font-size:.72rem;border-radius:999px;padding:.35rem .7rem;background:rgba(255,255,255,.14);color:#fff;align-self:flex-start}
.b-pill--ok{background:#22c8e6;color:#001;font-weight:600}
.b-mini{margin-top:auto;display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--dim);flex-wrap:wrap}
.b-dot{width:.55rem;height:.55rem;border-radius:50%;display:inline-block}
.b-dot--warn{background:#f5c400}.b-dot--ok{background:var(--mint)}
.b-arrow{color:var(--cyan)}.b-chart{flex:1 1 50%;position:relative;display:flex;flex-direction:column;gap:.5rem;min-width:0}
.b-chart svg{width:100%;height:100%;min-height:5.5rem;flex:1}
.b-legend{display:flex;gap:1rem;align-items:center;font-size:.75rem;color:rgba(255,255,255,.85)}
.b-legend span{display:inline-flex;align-items:center;gap:.4rem}
.b-legend__dot{width:.5rem;height:.5rem;border-radius:50%;background:#fff;display:inline-block}
.b-legend__dot--2{background:#22c8e6}
.b-legend .b-tag{position:static;margin-left:auto}@media (max-width: 1100px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;grid-template-areas:"a c" "d c" "b b" "f g"}
  .b-a{grid-area:a}.b-b{grid-area:b;flex-direction:row}.b-c{grid-area:c}.b-d{grid-area:d}.b-f{grid-area:f}.b-g{grid-area:g}
}
@media (max-width: 899px){
  .bento{grid-template-columns:1fr;grid-template-areas:none}
  .b-a,.b-b,.b-c,.b-d,.b-f,.b-g{grid-area:auto;grid-column:1;grid-row:auto}
  .b-b{flex-direction:column}
  .b-a{min-height:9rem}
}

/* ===== Tucán posado sobre la tarjeta "Agendamiento inteligente" =====
   Ajustes editables: --toucan-w (ancho respecto de la tarjeta), --toucan-x (desplazamiento horizontal
   desde el borde izquierdo de la tarjeta), --toucan-y (cuánto bajan las patas sobre el borde superior),
   --toucan-space (espacio reservado encima para que no tape nada). El PNG está recortado a su caja
   opaca: las patas son el borde inferior de la imagen. */
:root{--toucan-w:84%;--toucan-x:1%;--toucan-y:6.5%;--toucan-space:clamp(9rem,13vw,13rem)} /* --toucan-y = claw length: the toe pads sit on the edge, claws hang in front */
.bento{padding-top:var(--toucan-space)}
.b-c{overflow:visible}
.b-c > *:not(.toucan){position:relative;z-index:1}
.toucan{position:absolute;left:var(--toucan-x);bottom:100%;transform:translateY(var(--toucan-y));width:var(--toucan-w);z-index:2;pointer-events:none;line-height:0}
/* contact shadow: only under the feet (their x-span in the image), centred on the toe-pad line */
.toucan::after{content:"";position:absolute;left:53%;width:34%;height:.9rem;top:calc(100% - var(--toucan-y));transform:translateY(-45%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.42) 0%,rgba(0,0,0,.18) 45%,transparent 72%);filter:blur(2px);z-index:-1}
.toucan__img{width:100%;height:auto;display:block;position:relative;z-index:1}
@media (max-width: 1100px){
  :root{--toucan-w:62%;--toucan-x:18%;--toucan-space:clamp(9rem,26vw,15rem)}
}
@media (max-width: 899px){
  :root{--toucan-w:58%;--toucan-x:22%;--toucan-space:0px}
  .bento{padding-top:0}
  .b-c{margin-top:clamp(9rem,44vw,14rem)}
}

.aud .num{letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}
/* ===== Una decisión con fundamento: bento con foto central ===== */
.dec-sec{background:var(--navy)}
.dec{display:grid;gap:1rem;grid-template-columns:1.04fr 1.1fr 1.1fr 1.04fr;
  grid-template-rows:auto minmax(8rem,auto) minmax(8rem,auto) auto;
  grid-template-areas:"a t1 t2 c" "a b b c" "org org d c" "cta cta cta cta"}
.dc{position:relative;overflow:hidden;background:#030f28;border:1px solid rgba(120,170,255,.18);border-radius:1.1rem;padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;min-width:0;transition:border-color .35s ease,background-color .35s ease}
.dc > *{position:relative;z-index:1}
.dc--a{grid-area:a}.dc--b{grid-area:b}.dc--c{grid-area:c}.dc--d{grid-area:d}.dc--t1{grid-area:t1}.dc--t2{grid-area:t2}.dc--org{grid-area:org}.dc--cta{grid-area:cta}.dc__t{font-size:1.1rem;font-weight:600;line-height:1.3;color:var(--ink)}
.dc__t--lg{font-size:1.35rem;line-height:1.22;letter-spacing:-.01em}
.dc__d{color:var(--dim);line-height:1.5;font-size:.96rem}
.dc--a,.dc--b{justify-content:flex-start}
.dc--a .dc__d,.dc--b .dc__d{font-size:1rem}
/* atención: dos momentos dentro de la misma tarjeta */
.dc__pair{display:grid;gap:.85rem;margin-top:.1rem}
.dc__blk + .dc__blk{border-top:1px solid rgba(120,170,255,.16);padding-top:.85rem}
.dc__st{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:.3rem}
.dc__foot{padding-top:.2rem;font-size:.82rem;line-height:1.45;color:#a7bad6}
.dc--org{align-items:center}
.dc--cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;background:linear-gradient(135deg,#1a5cff 0%,#0b4fe0 100%);border-color:transparent}
.dc--cta .dc__t{color:#fff}
.dc--cta .dc__d{color:rgba(255,255,255,.88)}
.dc--cta__copy{flex:1 1 22rem;min-width:0}
.dc__ask{flex:0 0 auto;margin-left:auto;display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.dc__asklabel{color:#fff;font-weight:600;font-size:1.02rem}
.dc__btn{display:inline-flex;align-items:center;gap:.6rem;background:#fff;color:#0a1a3a;font-weight:600;font-size:1rem;padding:.9rem 1.4rem;border-radius:.7rem;white-space:nowrap}
.dc__btn:hover{background:#eaf4ff}

/* ===== Escena de la capibara controlada por scroll =====
   --capi-track: alto del tramo que se recorre. El tiempo de video se reparte
   sobre (alto del tramo - alto de la escena). Subilo para un avance más lento. */
:root{--capi-track:230vh;--capi-w:min(1180px,91.4vw);--capi-stage:100svh;--capi-top:0px}
.capi{position:relative;height:var(--capi-track);margin:2.5rem 0 3rem}
.capi__stage{position:sticky;top:var(--capi-top);height:var(--capi-stage);display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vh,3rem) 0}
.capi__frame{position:relative;width:var(--capi-w);aspect-ratio:854/480;max-height:100%;
  border-radius:1.1rem;overflow:hidden;background:#061224;border:1px solid rgba(120,170,255,.18)}
.capi__still,.capi__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.capi__video{opacity:0}
body.capi-live .capi__video{opacity:1}
/* sin controles nativos en ningún navegador */
.capi__video::-webkit-media-controls,.capi__video::-webkit-media-controls-enclosure{display:none!important}
.capi__video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}

/* sin recorrido: movimiento reducido o video no reproducible → imagen fija */
body.capi-static .capi{height:auto;margin:2rem 0 2.5rem}
body.capi-static .capi__stage{position:static;height:auto;padding:0}
body.capi-static .capi__video{display:none}

@media (max-width:899px){
  /* el alto de la escena es el del video (91,4vw en 16:9 = 51,4vw) más su respiro,
     y se centra en pantalla con el desplazamiento del pegado. Así no queda alto sobrante. */
  :root{--capi-track:105vh;--capi-stage:calc(51.4vw + 2.6rem);--capi-top:calc((100svh - (51.4vw + 2.6rem)) / 2)}
  .capi{margin:1.4rem 0 1.8rem}
  .capi__stage{padding:1.3rem 0}
  .capi__frame{border-radius:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .capi{height:auto;margin:2rem 0 2.5rem}
  .capi__stage{position:static;height:auto;padding:0}
  .capi__video{display:none}
}

/* ---------- paisaje continuo detrás de la grilla ---------- */
.dec-scene{position:relative;margin-top:1.6rem}
.dec-scene__bg{position:absolute;inset:-1.6rem -1.6rem -1.6rem -1.6rem;border-radius:1.4rem;overflow:hidden;
  background:#0a1408 url("assets/dec-bg.jpg") center 30% / cover no-repeat;z-index:0;pointer-events:none}
/* velo: mantiene el contraste del texto y funde el borde superior con la sección */
.dec-scene__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--navy) 0%,rgba(0,6,18,.6) 5%,rgba(0,6,18,.22) 14%,rgba(0,6,18,.18) 86%,rgba(0,6,18,.58) 96%,var(--navy) 100%)}
.dec{position:relative;z-index:1}

/* ---------- tarjetas: oscuras, translúcidas, con filete cálido ---------- */
.dc{background:rgba(6,12,20,.6);border:1px solid rgba(226,208,178,.36);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  box-shadow:0 1.5rem 3rem rgba(0,0,0,.34)}
.dc--cta{background:rgba(6,12,20,.66);border-color:rgba(226,208,178,.46)}
.dc--cta .dc__d{color:var(--dim)}
.dc--cta .dc__t{color:var(--ink)}
.dc__btn{background:#f2e6d2;color:#20180d}
.dc__btn:hover{background:#fff6e6}
.dc__asklabel{color:var(--ink)}
@supports not ((backdrop-filter:blur(3px)) or (-webkit-backdrop-filter:blur(3px))){
  .dc{background:rgba(6,12,20,.8)}
  .dc--cta{background:rgba(6,12,20,.84)}
}

/* ---------- interacción: el filete se aclara, sin mover la tarjeta ---------- */
@media (hover:hover){
  .dc{transition:border-color .35s ease,background-color .35s ease}
  .dc:hover{border-color:rgba(240,226,201,.66);background:rgba(8,15,24,.68)}
}
.dc__btn:focus-visible,.dec a:focus-visible{outline:3px solid #7fe3ff;outline-offset:3px;border-radius:.7rem}
@media (prefers-reduced-motion:reduce){ .dc{transition:none} }

@media (max-width:1100px){
  .dec{grid-template-columns:1fr 1fr;grid-template-rows:auto;
    grid-template-areas:"a t1" "b t2" "c c" "org d" "cta cta"}
  .dc--a,.dc--b{justify-content:flex-start}
  .dc--org{align-items:flex-start}
}
@media (max-width:899px){
  .dec-scene__bg{inset:-1rem -.8rem}
  .dec{grid-template-columns:1fr;grid-template-areas:"a" "t1" "t2" "b" "org" "c" "d" "cta"}
  .dc--cta{min-height:0}
  .dc--org .dc__t,.dc--org .dc__d{max-width:none}
  .dc--cta{flex-direction:column;align-items:flex-start}
  .dc--cta__copy{flex:0 0 auto}
  .dc__ask{margin-left:0;align-self:stretch}
  .dc__btn{align-self:stretch;justify-content:center}
  .dc__t--lg{font-size:1.25rem}
}