/* ==========================================================
   AQUAARON — secciones posteriores al recorrido (parte 1)
   Servicios · Experiencia · Por qué Aquaaron
   ========================================================== */
.sec{position:relative;padding-block:clamp(76px,11vw,150px)}
.sec--cal{background:var(--cal);color:var(--text-dark);--prev:var(--ink)}
.sec--cal-2{background:var(--cal-2);color:var(--text-dark);--prev:var(--ink)}
.sec--ink{background:var(--ink);color:var(--text-light);--prev:var(--cal)}
#historia{--prev:var(--cal)}#porque{--prev:var(--ink)}#proceso{--prev:var(--cal-2)}#zonas{--prev:var(--ink)}#contacto{--prev:var(--cal)}#faq{--prev:var(--ink)}
/* borde de teja: cada sección "cuelga" de la anterior */
.sec::before{content:"";position:absolute;left:0;right:0;top:-1px;height:16px;background:radial-gradient(circle at 14px 0,var(--prev) 0 13px,transparent 13.5px) 0 0/28px 100% repeat-x;pointer-events:none}
.sec__head{max-width:780px;display:grid;gap:1.1rem;margin-bottom:clamp(36px,5vw,64px)}
.sec h2{font-size:clamp(2.2rem,5.4vw,4.5rem)}
.sec h2 em{font-style:normal;color:var(--water-deep)}
.sec--ink h2 em{color:var(--water)}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted-dark);max-width:56ch}
.sec--ink .lead{color:var(--muted-light)}

/* aparición al hacer scroll (solo si el JS de secciones está activo) */
.rv [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv [data-reveal].is-in{opacity:1;transform:none;transition-delay:var(--rd,0s)}
.rv .brkr[data-reveal].is-in:hover{transform:translateY(-3px)}

/* ---------- SERVICIOS ---------- */
#servicios{padding-bottom:0}
.svc{display:grid;grid-template-columns:minmax(260px,.75fr) 1.6fr;gap:clamp(20px,3.4vw,56px);align-items:start}
.svc__tabs{display:flex;flex-direction:column}
.svc__tab{text-align:left;background:none;border:0;border-top:2px solid rgba(11,28,40,.14);padding:1.2rem 0;display:grid;grid-template-columns:auto 1fr;gap:.25rem 1rem;color:var(--ink);opacity:.5;transition:opacity .3s,padding-left .45s var(--ease)}
.svc__tab:last-child{border-bottom:2px solid rgba(11,28,40,.14)}
.svc__tab .n{font-family:var(--f-mono);font-size:.8rem;grid-row:1/3;padding-top:.7em}
.svc__tab .t{font-family:var(--f-display);font-weight:700;font-size:clamp(1.4rem,2.5vw,2.1rem);letter-spacing:-.03em;line-height:1.05}
.svc__tab .d{grid-column:2;font-size:.95rem;color:var(--muted-dark);max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s}
.svc__tab:hover{opacity:.9}
.svc__tab.is-on{opacity:1;border-top-color:var(--ink);padding-left:.6rem;box-shadow:inset 4px 0 0 var(--spark)}
.svc__tab.is-on .d{max-height:3.6em;opacity:1}
.pan{background:var(--ink);color:var(--text-light);border-radius:28px;overflow:hidden;display:grid;box-shadow:0 40px 80px -40px rgba(11,28,40,.55)}
.svc.is-js .pan:not(.is-on){display:none}
.pan.is-on{animation:panIn .7s var(--ease)}
@keyframes panIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.pan__art{background:radial-gradient(70% 90% at 50% 40%,rgba(60,200,234,.2),transparent 70%),var(--ink-2);aspect-ratio:7/4;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.pan__art svg{width:min(100%,540px);height:auto}
.pan__body{padding:clamp(22px,3vw,40px);display:grid;gap:1.1rem;justify-items:start}
.pan__body h3{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.pan__body p{color:var(--muted-light);max-width:52ch}
.tags{display:flex;flex-wrap:wrap;gap:.45rem}
.tags li{border:1px solid var(--line);padding:.36em .85em;border-radius:99px;font-size:.88rem;font-weight:600;background:rgba(245,239,228,.05)}
.pan .btn--ink{--bg:var(--spark);--fg:var(--ink)}
.pan__art use{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mp-out{stroke:#d0793a;stroke-width:16}.mp-in{stroke:#0b1c28;stroke-width:9.5}.mp-w{stroke:#3cc8ea;stroke-width:6}
.mp-flow{stroke:rgba(255,255,255,.92);stroke-width:2.4;stroke-dasharray:2 16;animation:flow 1.5s linear infinite}
.mp-drop{animation:mdrip 1.4s cubic-bezier(.5,0,.9,.6) infinite;animation-delay:var(--d,0s);transform-box:fill-box;transform-origin:center;opacity:0}
@keyframes mdrip{0%{transform:translateY(-6px) scale(.4);opacity:0}15%{opacity:1;transform:translateY(0) scale(1)}80%{opacity:1}100%{transform:translateY(96px);opacity:0}}
.mp-ripple{animation:ripple 1.4s ease-out infinite;transform-box:fill-box;transform-origin:center;opacity:0}
@keyframes ripple{0%,55%{opacity:0;transform:scale(.3)}65%{opacity:.9}100%{opacity:0;transform:scale(1.7)}}
.mc-base{stroke:rgba(255,194,60,.4);stroke-width:5}.mc-glow{stroke:#ffc23c;stroke-opacity:.16;stroke-width:18}
.mc-pulse{stroke:#fff6d0;stroke-width:7;stroke-dasharray:22 520;animation:pulse2 2.6s linear infinite}
.mc-pulse--b{animation-delay:-1.3s}
@keyframes pulse2{to{stroke-dashoffset:-542}}
.mc-bulb{animation:bulb 2.6s ease-in-out infinite}.mc-cone{animation:bulb 2.6s ease-in-out infinite}
@keyframes bulb{0%,40%{opacity:.35}60%,100%{opacity:1}}
.mc-sw{animation:sw 3.2s ease-in-out infinite}.mc-sw--b{animation-delay:-1.6s}
@keyframes sw{0%,40%{transform:translateY(0);fill:#5ee0a4}50%,90%{transform:translateY(22px);fill:#ff6a4d}100%{transform:translateY(0);fill:#5ee0a4}}
.mb{animation:lay 6s ease-out infinite;animation-delay:calc(var(--i)*.15s);transform-box:fill-box}
@keyframes lay{0%{opacity:0;transform:translateY(-16px)}7%{opacity:1;transform:none}86%{opacity:1}95%,100%{opacity:0}}
.mm-gear{animation:spin 10s linear infinite;transform-box:fill-box;transform-origin:center}.mm-gear--b{animation-duration:6.5s;animation-direction:reverse}
.mm-tick{stroke-dasharray:44;animation:mtick 3.2s ease infinite;animation-delay:var(--d,0s)}
@keyframes mtick{0%{stroke-dashoffset:44}25%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:44}}

/* cinta de oficios */
.ticker{margin-top:clamp(64px,9vw,120px);background:var(--spark);color:var(--ink);border-block:2px solid var(--ink);overflow:hidden}
.ticker__row{display:flex;align-items:center;gap:1.6rem;width:max-content;padding:.95rem 0;font-family:var(--f-display);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.8rem);letter-spacing:-.02em;white-space:nowrap;animation:marquee 46s linear infinite;padding-left:1.6rem}
.ticker__row i{width:10px;height:10px;border-radius:50%;background:var(--ink);flex:none}
.ticker:hover .ticker__row{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- EXPERIENCIA ---------- */
.hist{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.hist .sec__head{margin-bottom:0}
.hist__text{display:grid;gap:1rem;color:var(--muted-light);font-size:1.1rem}
.tape{margin-top:clamp(48px,7vw,96px);display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(20px,4vw,56px)}
.tape__num{font-family:var(--f-display);font-weight:800;line-height:.8;display:flex;align-items:baseline;gap:.3em;color:var(--spark)}
.tape__num span{font-size:clamp(6rem,16vw,14rem);letter-spacing:-.07em;font-variant-numeric:tabular-nums}
.tape__num small{font-family:var(--f-mono);font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cal);font-weight:400}
.tape__rule{position:relative;height:92px;--p:1}
.tape__band{position:absolute;inset:0;background:var(--spark);border-radius:6px;clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0);box-shadow:0 18px 40px -20px rgba(255,194,60,.5)}
.tape__ticks{position:absolute;inset:0 14px}
.tick{position:absolute;top:0;width:2px;height:24px;background:var(--ink);transform:translateX(-1px)}
.tick.m5{height:42px;width:3px}
.tick b{position:absolute;top:46px;left:50%;transform:translateX(-50%);font-family:var(--f-mono);font-size:.8rem;font-weight:500;color:var(--ink)}
.tape__hook{position:absolute;top:-8px;bottom:-8px;left:calc(var(--p) * 100%);width:12px;margin-left:-6px;background:#2b3a44;border-radius:4px;border:2px solid var(--spark);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:clamp(44px,6vw,84px);background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.facts li{background:var(--ink);padding:1.7rem;display:grid;gap:.4rem;align-content:start}
.facts b{font-family:var(--f-display);font-size:1.4rem;letter-spacing:-.02em}
.facts span{color:var(--muted-light)}

/* ---------- POR QUÉ: cuadro de mandos ---------- */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;background:#173a4f;padding:14px;border-radius:30px;border:3px solid var(--ink);box-shadow:0 40px 80px -40px rgba(11,28,40,.65)}
.brkr{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:.9rem 1rem;text-align:left;background:var(--ink);color:var(--text-light);border:1px solid var(--line);border-radius:20px;padding:1.4rem 1.4rem 1.6rem;transition:transform .35s var(--ease),border-color .3s,background .3s}
.brkr:hover{transform:translateY(-3px);border-color:rgba(255,194,60,.5)}
.brkr__sw{flex:none;width:46px;height:78px;border-radius:9px;background:#08141d;border:2px solid rgba(245,239,228,.35);position:relative}
.brkr__sw i{position:absolute;left:5px;right:5px;bottom:5px;height:34px;border-radius:6px;background:var(--alert);transition:transform .5s var(--ease),background .3s,box-shadow .3s;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.brkr__c{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-light);padding-top:.3rem}
.brkr h3{flex:1 1 100%;font-size:1.45rem;transition:color .3s}
.brkr p{flex:1 1 100%;color:var(--muted-light);font-size:1rem;transition:opacity .4s;opacity:.4}
.brkr::after{content:"";position:absolute;top:1.3rem;right:1.3rem;width:10px;height:10px;border-radius:50%;background:var(--alert);opacity:.5;transition:.4s}
.brkr[aria-checked="true"] .brkr__sw i{transform:translateY(-34px);background:var(--mint);box-shadow:0 -4px 0 rgba(0,0,0,.25)}
.brkr[aria-checked="true"] p{opacity:1}
.brkr[aria-checked="true"] h3{color:var(--spark)}
.brkr[aria-checked="true"]::after{background:var(--mint);opacity:1;box-shadow:0 0 12px var(--mint)}
.board__cta{margin-top:clamp(32px,4vw,52px);display:flex;justify-content:center}

/* ---------- Responsive (parte 1) ---------- */
@media (max-width:960px){
  .svc{grid-template-columns:1fr}
  .svc__tabs{flex-direction:row;overflow-x:auto;gap:8px;scrollbar-width:none;padding-bottom:4px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-snap-type:x proximity}
  .svc__tabs::-webkit-scrollbar{display:none}
  .svc__tab{flex:none;border:1.5px solid rgba(11,28,40,.22)!important;border-radius:99px;padding:.7rem 1.1rem!important;grid-template-columns:1fr;scroll-snap-align:start;box-shadow:none!important;opacity:.7}
  .svc__tab .n,.svc__tab .d{display:none}
  .svc__tab .t{font-size:1.02rem;white-space:nowrap;letter-spacing:-.01em}
  .svc__tab.is-on{background:var(--ink);color:var(--cal);opacity:1}
  .hist{grid-template-columns:1fr}
  .board{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .board{grid-template-columns:1fr}
  .tape{grid-template-columns:1fr;gap:20px}
  .tape__rule{height:78px}
  .facts{grid-template-columns:1fr}
  .pan__art{aspect-ratio:7/5}
}
@media (prefers-reduced-motion:reduce){
  .rv [data-reveal]{opacity:1;transform:none;transition:none}
  .ticker__row,.mb,.mm-gear,.mp-flow,.mp-drop,.mc-pulse{animation:none}
  .mb{opacity:1}
}