/* HUB · 02-servicios (#servicios) — «la lente de oro»: cinta tipográfica que cruza una lente vertical de vidrio.
   Base (sin JS · ?reduce · gama baja): las 11 palabras como .chip--gold en rejilla centrada.
   .is-live (JS): escenario con cintas; ≥900px dos cintas y la lista solo para lectores; <900px una cinta + chips debajo. */

#servicios{
  --sv-fs:clamp(2.4rem,6vw,6rem);
  --lw:clamp(220px,22vw,420px);           /* ancho de la lente */
  --lh:clamp(260px,40vh,440px);           /* alto de la lente */
  --lr:clamp(36px,3.6vw,60px);            /* radio de la losa-lente */
  position:relative;overflow:clip;
  padding-block:clamp(48px,5vw,88px);
  background:radial-gradient(90% 60% at 50% 55%,rgba(16,39,58,.55) 0%,rgba(5,9,15,0) 70%),var(--ink);
}
#servicios .sv-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(38% 42% at 50% 56%,rgba(216,166,70,.12) 0%,rgba(216,166,70,.04) 55%,rgba(216,166,70,0) 100%)}

/* ---------- Cabecera ---------- */
#servicios .sv-head{position:relative;text-align:center;margin-bottom:clamp(18px,2.4vw,36px)}
#servicios .sv-eyebrow{margin:0;justify-content:center}
#servicios .sv-eyebrow:after{content:"";width:32px;height:1px;background:currentColor;opacity:.65}

/* ---------- Lista (base): chips dorados en rejilla centrada ---------- */
#servicios .sv-listwrap{position:relative}
#servicios .sv-list{list-style:none;margin:0 auto;padding:0;max-width:1040px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 12px}
#servicios .sv-chip{min-height:46px;padding:12px 22px;font-size:1rem;letter-spacing:.01em;
  background:rgba(13,27,40,.6);transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease)}
#servicios .sv-chip i{flex:none;width:6px;height:6px;border-radius:1px;transform:rotate(45deg);background:var(--gold)}

/* ---------- Escenario de la lente (solo con JS en vivo) ---------- */
#servicios .sv-stage{display:none}
#servicios.is-live .sv-stage{display:block;position:relative;height:calc(var(--lh) + clamp(44px,6vh,84px));overflow:hidden;contain:layout paint}
#servicios.is-live .sv-stage:before,#servicios.is-live .sv-stage:after{content:"";position:absolute;left:0;right:0;height:1px;z-index:4;
  background:linear-gradient(90deg,transparent 0%,var(--hair) 22%,rgba(216,166,70,.4) 50%,var(--hair) 78%,transparent 100%)}
#servicios.is-live .sv-stage:before{top:0}
#servicios.is-live .sv-stage:after{bottom:0}

/* Cintas */
#servicios .sv-rows{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,1.6vh,22px);pointer-events:none}
#servicios .sv-row{white-space:nowrap;line-height:1}
#servicios .sv-track{display:flex;width:max-content;will-change:transform;backface-visibility:hidden}
#servicios .sv-i{display:inline-flex;align-items:center;flex:none}
#servicios .sv-w{display:block;flex:none;padding:.08em .34em .14em;font:300 var(--sv-fs)/1.05 var(--serif);letter-spacing:-.025em;color:rgba(243,234,219,.4);white-space:nowrap}   /* 0.40 ≈ 3.3:1 sobre tinta (AA texto grande) */
#servicios .sv-sep{display:block;flex:none;width:.13em;height:.13em;font-size:var(--sv-fs);transform:rotate(45deg);background:var(--gold);opacity:.85}

/* Cintas crema: se apagan en los bordes y dentro de la lente (ahí manda la copia de oro) */
#servicios .sv-rows--cream{z-index:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 calc(50% - var(--lw)/2 - 4px),transparent calc(50% - var(--lw)/2 + 10px),transparent calc(50% + var(--lw)/2 - 10px),#000 calc(50% + var(--lw)/2 + 4px),#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 calc(50% - var(--lw)/2 - 4px),transparent calc(50% - var(--lw)/2 + 10px),transparent calc(50% + var(--lw)/2 - 10px),#000 calc(50% + var(--lw)/2 + 4px),#000 93%,transparent 100%)}

/* Copia de oro líquido: recortada exactamente a la lente */
#servicios .sv-rows--gold{z-index:3;clip-path:inset(calc(50% - var(--lh)/2) calc(50% - var(--lw)/2) round var(--lr))}
#servicios .sv-rows--gold .sv-w{font-style:italic;font-weight:400;color:transparent;
  background:var(--gold-grad);background-size:240% 100%;-webkit-background-clip:text;background-clip:text}
#servicios .sv-rows--gold .sv-w.is-lit{animation:sv-shine 7s ease-in-out infinite}   /* el brillo solo corre en las palabras de la lente */
#servicios .sv-rows--gold .sv-row:nth-child(2){opacity:.78}                             /* jerarquía: manda la cinta superior */
#servicios .sv-rows--gold .sv-sep{background:var(--gold-2);opacity:1;box-shadow:0 0 12px rgba(244,213,138,.6)}
@keyframes sv-shine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* La lente: losa vertical de vidrio con hilo de oro en los cantos y menisco que gotea */
#servicios .sv-lens{position:absolute;left:50%;top:50%;z-index:2;width:var(--lw);height:var(--lh);transform:translate(-50%,-50%);border-radius:var(--lr)}
#servicios .sv-lens__tex{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;border-radius:inherit;
  opacity:.3;mix-blend-mode:screen;animation:sv-tex 24s ease-in-out infinite alternate}
@keyframes sv-tex{0%{object-position:30% 40%}100%{object-position:80% 60%}}
/* textura en video (hub-oro-liquido.mp4): aparece solo cuando ya reproduce; la imagen queda debajo como respaldo */
#servicios .sv-lens__vid{opacity:0;animation:none;object-position:50% 50%;transition:opacity 1.2s ease;pointer-events:none}
#servicios .sv-lens__vid.is-on{opacity:.36}
#servicios .sv-lens__glass{position:absolute;inset:0;border-radius:inherit;
  background:
    linear-gradient(180deg,rgba(243,234,219,.09) 0%,rgba(243,234,219,0) 16%,rgba(243,234,219,0) 82%,rgba(216,166,70,.12) 100%),
    linear-gradient(90deg,rgba(243,234,219,.07) 0%,rgba(243,234,219,.012) 18%,rgba(5,9,15,.28) 50%,rgba(243,234,219,.012) 82%,rgba(243,234,219,.07) 100%);
  box-shadow:inset 0 0 50px rgba(5,9,15,.6),0 40px 90px -40px rgba(216,166,70,.4)}
/* hilo de oro en el contorno (borde degradado con máscara: el interior queda transparente) */
#servicios .sv-lens__glass:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(180deg,rgba(244,213,138,.18) 0%,#F4D58A 20%,#D8A646 60%,#A77927 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* destello que destila por los cantos (con el tiempo, nunca con el puntero) */
#servicios .sv-lens__edge{position:absolute;top:var(--lr);bottom:var(--lr);width:2px;overflow:hidden;z-index:1}
#servicios .sv-lens__edge--l{left:-.5px}
#servicios .sv-lens__edge--r{right:-.5px}
#servicios .sv-lens__edge:before{content:"";position:absolute;left:0;right:0;top:0;height:38%;
  background:linear-gradient(180deg,transparent,#F7E2A8 55%,#fff8e4 70%,transparent);
  transform:translateY(-110%);animation:sv-fluye 5.5s cubic-bezier(.55,0,.35,1) infinite}
#servicios .sv-lens__edge--r:before{animation-delay:-2.75s}
@keyframes sv-fluye{0%{transform:translateY(-110%)}100%{transform:translateY(270%)}}
#servicios .sv-lens__menisco{position:absolute;left:50%;bottom:-5px;width:34%;height:11px;transform:translateX(-50%);
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  background:radial-gradient(120% 140% at 50% 0%,#F7E2A8 0%,#D8A646 45%,rgba(167,121,39,.95) 70%,rgba(167,121,39,0) 72%);
  filter:drop-shadow(0 4px 10px rgba(216,166,70,.45))}
#servicios .sv-drop{position:absolute;top:calc(100% + 2px);width:7px;height:10px;margin-left:-3.5px;border-radius:50% 50% 50% 50% / 62% 62% 40% 40%;
  background:radial-gradient(circle at 40% 35%,#FFF4D2 0%,#F4D58A 30%,#D8A646 65%,#A77927 100%);opacity:0;transform-origin:50% 0;
  animation:sv-gota 4.2s cubic-bezier(.6,0,.9,.6) infinite}
#servicios .sv-drop--1{left:46%}
#servicios .sv-drop--2{left:53%;animation-delay:1.5s;animation-duration:4.8s}
#servicios .sv-drop--3{left:49.5%;animation-delay:3s;animation-duration:5.3s}
@keyframes sv-gota{
  0%{opacity:0;transform:translateY(-6px) scale(.3,.2)}
  18%{opacity:1;transform:translateY(-2px) scale(.9,1.25)}
  34%{opacity:1;transform:translateY(0) scale(1,1)}
  88%{opacity:.9;transform:translateY(clamp(40px,7vh,72px)) scale(.8,1.2)}
  100%{opacity:0;transform:translateY(clamp(48px,8vh,84px)) scale(.6,1.3)}}

/* ---------- Índice vivo (con JS): cada servicio es un botón que trae su palabra a la lente ----------
   El que cruza la lente se enciende en oro (cinta superior: texto + subrayado · cinta inferior: solo texto). */
#servicios.is-live .sv-chip{min-height:0;border:0;border-radius:0;background:none;padding:0}
#servicios .sv-chip__btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;
  cursor:pointer;color:rgba(243,234,219,.74);font:inherit;letter-spacing:inherit;text-transform:inherit;
  box-shadow:inset 0 -1px 0 rgba(216,166,70,0);transition:color .45s var(--ease),box-shadow .45s var(--ease);-webkit-tap-highlight-color:transparent}
#servicios .sv-chip__btn i{flex:none;width:4px;height:4px;border-radius:1px;transform:rotate(45deg);background:var(--gold);opacity:.55;transition:opacity .45s var(--ease)}
#servicios .sv-chip__btn:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px;border-radius:4px}
@media (hover:hover){#servicios .sv-chip__btn:hover{color:var(--cream)}}
#servicios .sv-chip.is-on .sv-chip__btn{color:var(--gold-2);box-shadow:inset 0 -1px 0 var(--gold)}
#servicios .sv-chip.is-on2 .sv-chip__btn{color:rgba(244,213,138,.82)}
#servicios .sv-chip.is-on .sv-chip__btn i,#servicios .sv-chip.is-on2 .sv-chip__btn i{opacity:1}
/* Base estática (sin JS · ?reduce): rejilla de lectura, no invita a tocar */
#servicios .sv-chip{cursor:default}

/* Escritorio en vivo: línea discreta en versalitas bajo el escenario */
@media (min-width:900px){
  #servicios.is-live .sv-listwrap{margin-top:clamp(18px,2.6vh,30px)}
  #servicios.is-live .sv-list{max-width:1180px;gap:0 24px}
  #servicios.is-live .sv-chip{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
}

/* ---------- Celular ---------- */
@media (max-width:899px){
  #servicios{--sv-fs:1.9rem;--lw:44vw;--lh:6.4rem;--lr:22px;padding-block:clamp(56px,14vw,88px)}
  #servicios.is-live .sv-stage{height:calc(var(--lh) + 68px)}
  #servicios .sv-row:nth-child(n+2){display:none}
  #servicios .sv-w{padding-inline:.3em}
  #servicios .sv-drop{width:6px;height:9px}
  #servicios .sv-list{gap:10px 8px}
  #servicios .sv-chip{min-height:40px;padding:9px 13px;font-size:.95rem;white-space:normal;text-align:center}
  #servicios.is-live .sv-listwrap{margin-top:clamp(22px,6vw,34px)}
  #servicios.is-live .sv-list{gap:0 14px}
  #servicios.is-live .sv-chip{min-height:0;padding:0;font-size:.95rem}
}

/* Gama baja / sin backdrop: superficies opacas (no usamos backdrop-filter; las animaciones CSS se apagan si no hay cinta) */
html.reduce #servicios .sv-stage{display:none!important}

/* Celular: sin hueco vacío entre los chips y «Membresía» */
@media (max-width:767px){#servicios{padding-bottom:28px}}