/* Coralia — Nuestros servicios v2 (octubre 2026)
   1) Cards de servicios "Ahumado": foto HD, vidrio oscuro, inclinación 3D con reflejo
   2) Panel de cada servicio: tarjetas "Arcoíris v2" (borde arcoíris al pasar el mouse, inclinación 3D)
   3) Portada: las 3 tarjetas flotantes con inclinación 3D, reflejo y borde arcoíris
   Se carga después de styles.css. La lógica del mouse está en servicios-v2.js. */
@property --scang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes scSpin{to{--scang:360deg}}

/* ================= 1) Cards de servicios ================= */
.folder[data-svc="medir"]{--sc-ic:#b9e07a;--sc-tint:#7fb83a}
.folder[data-svc="mitigar"]{--sc-ic:#f2c46b;--sc-tint:#e3a22a}
.folder[data-svc="adaptar"]{--sc-ic:#7fd6c8;--sc-tint:#22a08f}
.folders .folder{perspective:950px}
.scard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:1;max-width:100%;padding:12px;border-radius:20px;overflow:hidden;isolation:isolate;background:#0f1f18;color:#fff;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--ease),box-shadow .6s;will-change:transform}
.folder:hover .scard{transition:transform .15s linear,box-shadow .6s;box-shadow:0 46px 70px -34px rgba(12,28,20,.6)}
.scard__media{position:absolute;inset:0;z-index:-2}
.scard__media::after{content:"";position:absolute;inset:0;background:var(--sc-tint);mix-blend-mode:color;opacity:.22;pointer-events:none}
.scard__img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.12) translate(calc(var(--px,0) * -18px),calc(var(--py,0) * -18px));transition:transform .7s var(--ease)}
.folder:hover .scard__img{transition:transform .15s linear}
.scard::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.22),rgba(255,255,255,0) 42%)}
.folder:hover .scard::before{opacity:1}
.scard__glass{position:relative;z-index:2;display:flex;flex-direction:column;gap:11px;padding:16px 18px 18px;border-radius:16px;background:rgba(10,24,17,.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.16);transition:transform .7s var(--ease),border-color .4s}
.scard__glass::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;border-radius:inherit;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.26),rgba(255,255,255,0) 55%)}
.folder:hover .scard__glass::after{opacity:1}
.folder:hover .scard__glass{transform:translateY(-4px);border-color:rgba(255,255,255,.3)}
.scard__head{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
.scard__ic,.scard__go{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%}
.scard__ic{background:rgba(255,255,255,.14);color:var(--sc-ic)}
.scard__ic svg,.scard__go svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.scard__ic svg{width:21px;height:21px;stroke-width:1.7}
.scard h3{flex:1;margin:0;font-family:var(--font);font-weight:500;font-size:clamp(25px,2.1vw,29px);letter-spacing:-.01em;line-height:1.05;color:#fff}
.scard__go{border:1.5px solid rgba(255,255,255,.75);color:#fff;transition:background .3s,color .3s,border-color .3s}
.scard__go svg{width:19px;height:19px;stroke-width:2;transition:transform .45s var(--ease)}
.folder:hover .scard__go svg{transform:translateX(3px)}
.folder.is-on .scard__go svg{transform:rotate(90deg)}
.folder:hover .scard__go,.folder.is-on .scard__go{background:var(--sc-ic);border-color:var(--sc-ic);color:#10231a}
.scard p{position:relative;z-index:1;margin:0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.9)}
.folder:focus-visible{outline:none}
.folder:focus-visible .scard{box-shadow:0 0 0 3px var(--lime)}

/* ================= 2) Panel de cada servicio: tarjetas Arcoíris v2 ================= */
.sv--medir{--pl:#b9e07a;--pd:#3f6a1c}
.sv--mitigar{--pl:#f2c46b;--pd:#94621a}
.sv--adaptar{--pl:#82c4ee;--pd:#1f6a9e}
.svx :is(.svx__fact,.tl__card,.sv-flow__it,.sv-case,.sv-feat__stats>div){position:relative;background:#fff;border:1px solid rgba(18,38,30,.08);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 18px 34px -26px rgba(18,38,30,.35);
  transform:perspective(900px) rotateX(var(--trx,0deg)) rotateY(var(--try,0deg));
  transition:transform .6s var(--ease),opacity .6s var(--ease),translate .6s var(--ease),box-shadow .45s,border-color .4s}
.svx .pipc{background:#fff;border:1px solid rgba(18,38,30,.08);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 18px 34px -26px rgba(18,38,30,.35)}
.svx .sc-tilting{transition:transform .12s linear,opacity .6s var(--ease),translate .6s var(--ease),box-shadow .45s,border-color .4s}
.svx :is(.svx__fact,.tl__card,.sv-flow__it,.sv-case,.sv-feat__stats>div)::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.3),rgba(255,255,255,0) 55%)}
.svx .sc-tilting::after{opacity:1}
.svx .sv-case:hover{translate:0 -4px;transform:perspective(900px) rotateX(var(--trx,0deg)) rotateY(var(--try,0deg))}
/* borde arcoíris (no en los casos ni en el pipeline) */
.svx :is(.svx__fact,.tl__card,.sv-flow__it,.sv-feat__stats>div)::before{content:"";position:absolute;inset:-1px;z-index:4;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--scang),#ff4d6d,#ff9f43,#ffe14d,#5ef08a,#3fd8ff,#6c7bff,#c35cff,#ff4d6d);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s;animation:scSpin 3.2s linear infinite}
.svx :is(.svx__fact,.tl__card,.sv-flow__it,.sv-feat__stats>div):hover::before{opacity:1}
.svx :is(.svx__fact,.tl__card,.sv-flow__it,.sv-feat__stats>div):hover{border-color:transparent;box-shadow:0 30px 50px -28px rgba(18,38,30,.45)}
.svx :is(.sv-case,.pipc):hover{border-color:rgba(18,38,30,.12)}
.svx .svx__fact{background:linear-gradient(160deg,#fff,color-mix(in srgb,var(--pl) 14%,#fff))}
.svx .svx__fact b,.svx .sv-feat__stats dt{color:var(--pd)}
.svx .tl__item.is-on .tl__dot{background:#12261e;border-color:#12261e;color:#fff;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pl)}
.svx .sv-flow__ic{background:#12261e}
.svx .sv-flow__ic svg{stroke:var(--pl)}
.svx .sv-tab.is-on{background:#12261e;color:#fff;box-shadow:0 0 0 1px #fff,0 0 0 2.5px var(--pl)}
/* los 3 datos clave: paleta propia de claro a oscuro (verdes en Medir, celestes en Adaptarse) con textura topográfica */
.sv--medir .svx__fact:nth-child(1){--f1:#f1f9e4;--f2:#d9f0b8;--fb:#3f7a22;--ft:#4a6a33;--fs:rgba(63,122,34,.28)}
.sv--medir .svx__fact:nth-child(2){--f1:#b9e07a;--f2:#86c246;--fb:#14330a;--ft:#24451a;--fs:rgba(76,140,40,.4)}
.sv--medir .svx__fact:nth-child(3){--f1:#3f7a22;--f2:#1d4512;--fb:#d6f5a6;--ft:rgba(236,248,220,.82);--fs:rgba(29,69,18,.55)}
.sv--adaptar .svx__fact:nth-child(1){--f1:#eef8fe;--f2:#d2ebfa;--fb:#1f6a9e;--ft:#3d6280;--fs:rgba(31,106,158,.25)}
.sv--adaptar .svx__fact:nth-child(2){--f1:#a8daf6;--f2:#6db8e6;--fb:#0b2f4a;--ft:#1b4664;--fs:rgba(45,130,190,.4)}
.sv--adaptar .svx__fact:nth-child(3){--f1:#2f86c2;--f2:#17507e;--fb:#d9f0ff;--ft:rgba(226,242,255,.84);--fs:rgba(23,80,126,.55)}
:is(.sv--medir,.sv--adaptar) .svx__fact:nth-child(-n+2){--topo:url(assets/deco/topo-oscuro.svg)}
:is(.sv--medir,.sv--adaptar) .svx__fact:nth-child(3){--topo:url(assets/deco/topo-claro.svg)}
:is(.sv--medir,.sv--adaptar) .svx__fact:nth-child(1){--tpos:85% 30%}
:is(.sv--medir,.sv--adaptar) .svx__fact:nth-child(2){--tpos:62% 15%}
:is(.sv--medir,.sv--adaptar) .svx__fact:nth-child(3){--tpos:10% 45%}
.svx:is(.sv--medir,.sv--adaptar) .svx__fact:nth-child(n){
  background:var(--topo) var(--tpos)/230% auto no-repeat,radial-gradient(120% 120% at 100% 0%,rgba(255,255,255,.35),rgba(255,255,255,0) 50%),linear-gradient(150deg,var(--f1),var(--f2));
  border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 22px 38px -24px var(--fs)}
.svx:is(.sv--medir,.sv--adaptar) .svx__fact:nth-child(n) b{color:var(--fb)}
.svx:is(.sv--medir,.sv--adaptar) .svx__fact:nth-child(n) span{color:var(--ft)}
.svx:is(.sv--medir,.sv--adaptar) .svx__fact:nth-child(n):hover{border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 32px 50px -24px var(--fs)}
/* modo oscuro: las tarjetas blancas pasan al papel oscuro */
:root[data-theme="dark"] .svx :is(.tl__card,.sv-flow__it,.sv-case,.pipc,.sv-feat__stats>div){background:var(--paper);border-color:var(--line);box-shadow:0 18px 34px -26px rgba(0,0,0,.6)}
:root[data-theme="dark"] .svx .tl__item.is-on .tl__dot{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--pl)}

/* ================= 3) Portada: tarjetas flotantes ================= */
.hero__ui{perspective:1000px}
.hero .ui-card{rotate:var(--tax,1) var(--tay,0) 0 var(--tang,0deg)!important;transition:rotate .7s var(--ease),box-shadow .5s}
.hero .ui-card.sc-tilting{transition:rotate .12s linear,box-shadow .5s;box-shadow:0 44px 70px -30px rgba(6,16,11,.75)}
.hero .ui-card::before{content:"";position:absolute;inset:-1px;z-index:4;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--scang),#ff4d6d,#ff9f43,#ffe14d,#5ef08a,#3fd8ff,#6c7bff,#c35cff,#ff4d6d);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .4s;animation:scSpin 3.2s linear infinite}
.hero .ui-card::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),rgba(255,255,255,0) 55%)}
.hero .ui-card:hover::before,.hero .ui-card.sc-tilting::after{opacity:1}
.hero .ui-card:hover{border-color:transparent}

@media (prefers-reduced-motion:reduce){
  .scard,.scard__img,.svx :is(.svx__fact,.tl__card,.sv-flow__it,.sv-case){transform:none!important}
  .hero .ui-card{rotate:none!important}
  .svx :is(.svx__fact,.tl__card,.sv-flow__it)::before,.hero .ui-card::before{animation:none}
}
/* Comparador antes/después: la primera vez que aparece, el control late para invitar a deslizar */
@keyframes baHint{0%,100%{box-shadow:0 8px 24px -8px rgba(0,0,0,.45),0 0 0 0 rgba(255,255,255,.7)}50%{box-shadow:0 8px 24px -8px rgba(0,0,0,.45),0 0 0 12px rgba(255,255,255,0)}}
.ba.is-hint .ba__handle{animation:baHint 1s ease-out 2}

/* ================= 4) Equipo: hexágonos con inclinación 3D, reflejo y borde arcoíris fino ================= */
.hive{perspective:900px}
.hex .hex__in{inset:1.5px}
.hex::before{background:conic-gradient(from var(--hexa),#ff4d6d,#ff9f43,#ffe14d,#5ef08a,#3fd8ff,#6c7bff,#c35cff,#ff4d6d)}
.hex:hover::before{animation-duration:3.2s}
.hex{transform:rotateX(var(--trx,0deg)) rotateY(var(--try,0deg));transition:left .5s var(--ease),top .5s var(--ease),opacity .4s,filter .4s,transform .6s var(--ease)}
.hex:hover{transform:rotateX(var(--trx,0deg)) rotateY(var(--try,0deg)) scale(1.07);z-index:2;filter:drop-shadow(0 18px 22px rgba(12,28,20,.35))}
.hex.sc-tilting{transition:left .5s var(--ease),top .5s var(--ease),opacity .4s,filter .4s,transform .12s linear}
.hex__shine{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(circle at var(--gx,50%) var(--gy,20%),rgba(255,255,255,.42),rgba(255,255,255,0) 55%)}
.hex.sc-tilting .hex__shine{opacity:1}
.hex img{transition:transform .6s var(--ease)}
.hex.sc-tilting img{transform:scale(1.08) translate(calc(var(--px,0) * -8px),calc(var(--py,0) * -8px));transition:transform .12s linear}
@media (prefers-reduced-motion:reduce){.hex,.hex img{transform:none!important}}