/* ============================================================
   WORK CENTER ÁLAMO · forma.css
   Sistema visual del sitio: identidad Forma (Mona Sans con el
   interletrado cerrado, etiqueta con punto, ligas subrayadas con
   flecha, botones de píldora) + paleta Océano profundo.

   Lo usan TODAS las páginas públicas. El widget de reservas
   tiene su propio archivo (reservas.css) porque solo vive en la
   portada.

   Orden del archivo:
     1. Base, tipografía, menú y héroes
     2. Componentes compartidos (fichas, cifras, galerías,
        preguntas, ubicación, formularios, pie)
     3. Componentes de la portada
     4. Páginas interiores y aviso de privacidad
   ============================================================ */

@font-face{font-family:"Mona Sans";src:url("../fonts/mona-sans.woff2") format("woff2-variations");font-weight:200 900;font-display:swap}

:root{
  --osc:#071A2E;               /* donde la referencia pone casi negro */
  --osc-2:#0A2137;             /* tarjetas sobre lo oscuro */
  --clr:#E8F1F8;               /* donde la referencia pone gris claro */
  --clr-2:#DCE7F1;             /* tarjetas sobre lo claro */
  --cian:#5EC2E8;
  --t-osc:#E8F1F8;  --tn-osc:rgba(232,241,248,.62);  --ln-osc:rgba(232,241,248,.13);
  --t-clr:#071A2E;  --tn-clr:rgba(7,26,46,.66);       --ln-clr:rgba(7,26,46,.14);
  --sans:"Mona Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --m:clamp(16px,5.56vw,96px);
  --nav:64px;
  --ease:cubic-bezier(.22,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--osc);color:var(--t-osc);font-family:var(--sans);font-size:16px;line-height:1.5;letter-spacing:-.01em;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--cian);color:var(--osc)}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

.cap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--m)}
.sec{padding-block:clamp(72px,9vw,140px);position:relative}
.claro{background:var(--clr);color:var(--t-clr)}
.oscuro{background:var(--osc);color:var(--t-osc)}
.claro .tn{color:var(--tn-clr)} .oscuro .tn{color:var(--tn-osc)}
.claro .ln{border-color:var(--ln-clr)} .oscuro .ln{border-color:var(--ln-osc)}

/* ---------- tipografía ---------- */
.d1{font-weight:500;font-size:clamp(40px,5vw,72px);line-height:1.04;letter-spacing:-.045em;margin:0}
.d2{font-weight:500;font-size:clamp(34px,3.35vw,48px);line-height:1.08;letter-spacing:-.04em;margin:0}
.d3{font-weight:500;font-size:clamp(24px,2.1vw,30px);line-height:1.15;letter-spacing:-.035em;margin:0}
.p{margin:0;font-size:16px;line-height:1.55;max-width:46ch}
.chico{font-size:14px;line-height:1.5}
.etq{display:inline-flex;align-items:center;gap:10px;font-size:14px;letter-spacing:-.005em}
.etq::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.oscuro .etq::before{background:var(--cian)}
.num{font-size:15px;letter-spacing:0}

/* liga subrayada con flecha (el botón de la referencia) */
.liga{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;padding-bottom:4px;position:relative;white-space:nowrap;align-self:flex-start}
.liga::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform .55s var(--ease)}
.liga:hover::after{transform:scaleX(0);transform-origin:left}
.liga .fl{display:inline-block;transition:transform .45s var(--ease)}
.liga:hover .fl{transform:translate(3px,-3px)}
.caja{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;font-size:15px;font-weight:500;
      background:var(--t-clr);color:var(--clr);transition:opacity .3s}
.oscuro .caja{background:var(--clr);color:var(--osc)}
.caja:hover{opacity:.88}

/* cabecera de sección: etiqueta + título a la izquierda, bajada a la derecha */
.cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.42fr);gap:24px;align-items:end;margin-bottom:clamp(36px,4.5vw,64px)}
.cab .izq{display:flex;flex-direction:column;gap:16px}
.cab .der{font-size:15px;line-height:1.5;max-width:34ch;justify-self:end}
@media (max-width:860px){.cab{grid-template-columns:1fr}.cab .der{justify-self:start}}

/* ---------- revelado ---------- */
.rev{opacity:0;transform:translateY(26px);filter:blur(8px);transition:opacity .95s var(--ease),transform .95s var(--ease),filter .95s ease}
.rev.on{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rev{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}}

/* ============================================================
   NAVEGACIÓN · barra clara arriba; al bajar queda logo + menú
   ============================================================ */
.nav{position:fixed;inset:0 0 auto;z-index:60;height:var(--nav);background:transparent;color:var(--t-osc);transition:background-color .45s,color .45s}
.nav.compacta{background:var(--clr);color:var(--t-clr)}
.nav .cap{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:20px;letter-spacing:-.02em;justify-self:start}
.logo img{width:24px;height:24px;transition:filter .45s}
.nav.compacta .logo img{filter:invert(1) brightness(.25)}
.nav-links{display:flex;gap:clamp(18px,2vw,30px);font-size:16px;color:rgba(232,241,248,.72)}
.nav-links a{transition:color .3s}.nav-links a:hover{color:#fff}
.nav-dat{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;align-self:start;padding-top:8px;font-size:16px;line-height:1.4;color:rgba(232,241,248,.72)}
.hamb{justify-self:end;grid-column:3;grid-row:1;display:none;width:40px;height:40px;place-items:center}
.hamb span{display:block;width:38px;height:1.5px;background:currentColor;box-shadow:0 7px 0 currentColor}
.nav.compacta .nav-links,.nav.compacta .nav-dat{display:none}
.nav.compacta .hamb{display:grid}
@media (max-width:900px){.nav-links,.nav-dat{display:none}.hamb{display:grid}}
.menu{position:fixed;inset:0;z-index:70;background:var(--osc);color:var(--t-osc);display:flex;flex-direction:column;padding:0 var(--m) 40px;
      clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--ease),visibility .8s}
.menu.ab{clip-path:inset(0);visibility:visible}
.menu-top{height:var(--nav);display:flex;align-items:center;justify-content:space-between}
.menu-top .logo img{filter:none}
.menu-links{margin-top:auto;display:flex;flex-direction:column}
.menu-links a{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--ln-osc);padding:14px 0;
              font-weight:500;font-size:clamp(34px,5vw,64px);letter-spacing:-.045em;line-height:1.05}
.menu-links a span{font-size:14px;letter-spacing:0;color:var(--tn-osc);font-weight:400}
.menu-pie{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:28px;font-size:14px;color:var(--tn-osc)}

/* ============================================================
   HERO DE LA PORTADA · foto fija, texto abajo a la izquierda
   y la marca gigante; lo siguiente sube por encima
   ============================================================ */
.hero-wrap{height:100svh;min-height:600px}
.hero{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background:#000}
.hero .foto-h{position:absolute;inset:0}
.hero .foto-h img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform:scale(1.07);
                  transition:transform 2.4s var(--ease)}
.hero.listo .foto-h img{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,12,22,.45) 0%,rgba(3,12,22,0) 18%,rgba(3,12,22,0) 55%,rgba(3,12,22,.35) 78%,rgba(3,12,22,.55) 100%)}
.hero-copy{position:relative;z-index:2;max-width:calc(40ch + var(--m) * 2);padding:0 var(--m);margin-bottom:clamp(18px,2.9vh,26px);color:var(--t-osc)}
.hero-copy .lugar{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(232,241,248,.72);margin-bottom:16px}
.hero-copy h1{margin:0 0 10px;font-weight:500;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.035em;line-height:1.15}
.hero-copy p{margin:0 0 30px;font-size:16px;line-height:1.4;color:rgba(232,241,248,.86)}
.marca-g{position:relative;z-index:2;width:100%;padding-inline:var(--m);white-space:nowrap;font-weight:600;letter-spacing:-.06em;line-height:1;
         color:var(--t-osc);font-size:11vw;margin:0;padding-bottom:clamp(26px,4.4vh,40px)}
.marca-g>span{display:inline-block}
.hero .entra{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.hero.listo .entra{opacity:1;transform:none}
.hero.listo .entra.e1{transition-delay:.25s}.hero.listo .entra.e2{transition-delay:.45s}.hero.listo .entra.e3{transition-delay:.15s}
.lienzo{position:relative;z-index:5}

/* ============================================================
   HERO DE SECCIÓN · el que te gustó, en la letra del manual
   ============================================================ */
.hero-s{position:relative;height:100svh;min-height:620px;overflow:hidden;isolation:isolate;color:var(--t-osc)}
.hero-s .foto-h{position:absolute;inset:0;z-index:-2}
.hero-s .foto-h img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.82);transform:scale(1.07);transition:transform 2.4s var(--ease)}
.hero-s.listo .foto-h img{transform:none}
.hero-s::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,26,46,.72) 0%,rgba(7,26,46,.15) 34%,rgba(7,26,46,.2) 55%,rgba(7,26,46,.72) 80%,var(--osc) 100%)}
.miga{position:absolute;left:var(--m);top:calc(var(--nav) + 18px);display:flex;gap:10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(232,241,248,.75)}
.gigante{position:absolute;left:0;right:0;top:clamp(110px,15vh,160px);text-align:center;white-space:nowrap;padding-inline:var(--m);
         font-weight:600;line-height:.86;letter-spacing:-.05em;font-size:16vw;
         background:linear-gradient(180deg,#fff 0%,#E8F1F8 55%,rgba(232,241,248,.8) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
         opacity:0;transform:translateY(40px);filter:blur(10px);transition:opacity 1.3s var(--ease) .25s,transform 1.5s var(--ease) .25s,filter 1.3s ease .25s}
.gigante>span{display:inline-block}
.hero-s.listo .gigante{opacity:1;transform:none;filter:none}
.hs-pie{position:absolute;left:0;right:0;bottom:0;padding:0 var(--m) clamp(28px,4.5vh,48px);display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px}
.hs-pie .d1{font-size:clamp(40px,4.45vw,64px);color:rgba(232,241,248,.9)}
.hs-pie .lado{justify-self:end;max-width:30ch;font-size:15px;color:rgba(232,241,248,.86)}
.bajar{width:42px;height:42px;border-radius:50%;background:var(--cian);color:var(--osc);display:grid;place-items:center;margin-bottom:6px;animation:latido 2.6s ease-in-out infinite}
.bajar svg.i{stroke-width:2.2}
@keyframes latido{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hero-s .entra{opacity:0;transform:translateY(20px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.hero-s.listo .entra{opacity:1;transform:none}
.hero-s.listo .entra.e1{transition-delay:.8s}.hero-s.listo .entra.e2{transition-delay:1s}.hero-s.listo .entra.e3{transition-delay:1.2s}
@media (max-width:860px){.hs-pie{grid-template-columns:1fr;justify-items:start}.hs-pie .lado{justify-self:start}.bajar{display:none}}
@media (prefers-reduced-motion:reduce){
  .hero .foto-h img,.hero-s .foto-h img,.gigante,.entra{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .bajar{animation:none}
}

/* ============================================================
   SECCIÓN PARTIDA: cabecera fija a la izquierda, tarjetas que se
   apilan a la derecha (servicios, reservar, para quién es)
   ============================================================ */
.split{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.split-lado{position:sticky;top:calc(var(--nav) + 40px);display:flex;flex-direction:column;gap:16px}
.split-lado .p{font-size:15px}
.pila{display:flex;flex-direction:column;gap:clamp(40px,7vw,110px)}
.ficha{position:sticky;top:calc(var(--nav) + 28px + var(--i,0) * 20px);border:1px solid var(--ln-osc);background:var(--osc-2);
       padding:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:22px;min-height:340px}
.claro .ficha{border-color:var(--ln-clr);background:var(--clr-2)}
.ficha-txt{display:flex;flex-direction:column;gap:12px;padding:6px 4px 6px 6px}
.ficha .d3{margin-top:4px}
.ficha .p{font-size:15px}
.ficha .linea{font-size:14px;line-height:1.5;margin-top:auto;padding-top:10px}
.ficha .foto{position:relative;overflow:hidden;background:#000}
.ficha .foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.ficha.sin-foto{grid-template-columns:1fr;min-height:260px}
.ficha.sin-foto .ficha-txt{justify-content:space-between}
.tarifas-f{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px;margin-top:6px}
.tarifas-f div{border:1px solid var(--ln-osc);padding:8px 10px;display:flex;flex-direction:column;gap:1px}
.tarifas-f span{font-size:12px;color:var(--tn-osc)}
.tarifas-f b{font-weight:500;font-size:18px;letter-spacing:-.03em}
.ligas{display:flex;gap:22px;flex-wrap:wrap;margin-top:6px}
@media (max-width:980px){.split{grid-template-columns:1fr}.split-lado{position:static}.ficha{position:static;grid-template-columns:1fr}.ficha .foto{aspect-ratio:16/10}}

/* ============================================================
   CONTADORES DE RODILLO
   ============================================================ */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(40px,6vw,90px)}
.cifra:nth-child(2){justify-self:center;text-align:center}.cifra:nth-child(3){justify-self:center;text-align:center}.cifra:last-child{justify-self:end;text-align:right}
.cifra .v{display:inline-flex;align-items:flex-start;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:400;font-size:clamp(48px,6.4vw,92px);line-height:1;letter-spacing:-.04em}
.cifra .et{margin-top:12px;font-size:14px}
.odo{display:inline-block;height:1em;overflow:hidden;vertical-align:top}
.odo .col{display:block;transition:transform 1.4s cubic-bezier(.22,.8,.2,1)}
.odo i,.cifra .v>i{display:block;height:1em;line-height:1;font-style:normal}
@media (max-width:860px){.cifras{grid-template-columns:1fr 1fr;row-gap:36px}.cifra{justify-self:start!important;text-align:left!important}}

/* ============================================================
   RESEÑAS (testimonio grande) + EVENTOS (rejilla de obras)
   ============================================================ */
.obras{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.8vw,24px) clamp(14px,1.8vw,24px)}
.obra{cursor:pointer;display:block}
.obra.a{grid-column:span 7}.obra.b{grid-column:span 5}
.obra .img{overflow:hidden;background:var(--clr-2);aspect-ratio:1.55/1}
.obra.b .img{aspect-ratio:1.13/1}
.obra .img img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform 1.2s var(--ease)}
.obra:hover .img img{transform:scale(1.04)}
.obra .fila{display:flex;justify-content:space-between;gap:16px;padding-top:12px;font-size:15px}
.obra .fila span:last-child{color:var(--tn-clr);white-space:nowrap}
.oscuro .obra .fila span:last-child{color:var(--tn-osc)}
.centro-l{text-align:center;margin-top:clamp(30px,4vw,56px)}
@media (max-width:760px){.obra.a,.obra.b{grid-column:span 12}.obra .img,.obra.b .img{aspect-ratio:4/3}}

/* visor de fotos */
.visor{position:fixed;inset:0;z-index:90;background:rgba(3,12,22,.95);display:none;align-items:center;justify-content:center;padding:60px 20px;color:var(--t-osc)}
.visor.ab{display:flex}
.visor img{max-width:min(1100px,92vw);max-height:78vh;object-fit:contain}
.visor .ctl{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:1px solid rgba(232,241,248,.4);display:grid;place-items:center}
.visor .ant{left:18px}.visor .sig{right:18px}
.visor .cerrar{position:absolute;top:18px;right:18px;width:42px;height:42px;border:1px solid rgba(232,241,248,.4);display:grid;place-items:center}
.visor .pie-v{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:14px;color:var(--tn-osc)}

/* ============================================================
   COTIZADOR DE TALLERES
   ============================================================ */
.cotiza{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,80px);align-items:start}
.pregunta{display:grid;grid-template-columns:52px 1fr;gap:12px;border-top:1px solid var(--ln-clr);padding:22px 0}
.pregunta:last-child{border-bottom:1px solid var(--ln-clr)}
.pregunta .num{color:var(--tn-clr);padding-top:3px}
.pregunta h3{margin:0 0 14px;font-weight:500;font-size:clamp(20px,1.7vw,24px);letter-spacing:-.03em}
.ops{display:flex;flex-wrap:wrap;gap:8px}
.op{min-height:42px;padding:8px 14px;border:1px solid var(--ln-clr);font-size:14.5px;text-align:left;line-height:1.3;transition:background-color .25s,color .25s,border-color .25s}
.op small{display:block;font-size:12.5px;color:var(--tn-clr)}
.op:hover{border-color:rgba(7,26,46,.45)}
.op[aria-checked="true"]{background:var(--t-clr);color:var(--clr);border-color:var(--t-clr)}
.op[aria-checked="true"] small{color:rgba(232,241,248,.7)}
.precio-t{position:sticky;top:calc(var(--nav) + 40px);display:flex;flex-direction:column;gap:16px}
.precio-t .monto{display:flex;align-items:flex-start;font-weight:500;font-size:clamp(64px,7.6vw,112px);line-height:1;letter-spacing:-.05em}
.precio-t .monto .odo .col{transition-duration:.9s}
.precio-t .monto>i{display:block;height:1em;line-height:1;font-style:normal}
.precio-t .det{font-size:15px;min-height:46px}
.precio-t .nota{font-size:13.5px;border-top:1px solid var(--ln-clr);padding-top:14px;color:var(--tn-clr)}
@media (max-width:900px){.cotiza{grid-template-columns:1fr}.precio-t{position:static}}
.tabla-w{margin-top:clamp(50px,7vw,100px)}
.tabla-cab{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.tabla-cab .ops .op{min-height:36px;padding:6px 12px;font-size:13.5px}
.tabla-scroll{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:15px}
.tabla th,.tabla td{padding:15px 12px;text-align:right;border-bottom:1px solid var(--ln-clr);font-weight:400;white-space:nowrap}
.tabla th:first-child,.tabla td:first-child{text-align:left}
.tabla thead th{font-weight:500;font-size:15px;color:var(--tn-clr)}
.tabla td.sel{font-weight:600;box-shadow:inset 0 -2px 0 var(--t-clr)}
.oscuro .tabla th,.oscuro .tabla td{border-color:var(--ln-osc)}
.oscuro .tabla thead th{color:var(--tn-osc)}
.lista-n{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,3vw,48px);margin-top:clamp(50px,6vw,90px)}
.lista-n>div{border-top:1px solid var(--ln-clr);padding:18px 0 26px;display:flex;flex-direction:column;gap:8px}
.oscuro .lista-n>div{border-color:var(--ln-osc)}
.lista-n h4{margin:0;font-weight:500;font-size:19px;letter-spacing:-.03em}
.lista-n p{margin:0;font-size:15px;line-height:1.5}
@media (max-width:860px){.lista-n{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.lista-n{grid-template-columns:1fr}}

/* ============================================================
   PREGUNTAS
   ============================================================ */
.faq-r{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
.faq-r .izq{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--nav) + 40px)}
.faq-l{border-top:1px solid var(--ln-clr)}
.faq-i{border-bottom:1px solid var(--ln-clr)}
.faq-b{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 8px;text-align:left;font-size:17px;font-weight:500;letter-spacing:-.02em}
.faq-b .x{width:16px;height:16px;position:relative;flex:none;transition:transform .5s var(--ease)}
.faq-b .x::before,.faq-b .x::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.4px;background:currentColor;transform:translate(-50%,-50%)}
.faq-b .x::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-i.ab .x{transform:rotate(45deg)}
.faq-c{height:0;overflow:hidden;transition:height .5s var(--ease)}
.faq-c>div{padding:0 8px 22px;font-size:15px;line-height:1.6;color:var(--tn-clr);max-width:64ch}
.faq-c b{color:var(--t-clr);font-weight:500}
@media (max-width:900px){.faq-r{grid-template-columns:1fr}.faq-r .izq{position:static}}

/* ============================================================
   UBICACIÓN
   ============================================================ */
.mapa{position:relative;overflow:hidden;aspect-ratio:2.4/1;background:var(--osc-2)}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.6) contrast(1.05)}
@media (max-width:760px){.mapa{aspect-ratio:4/3}}
.datos-u{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:14px}
.datos-u div{font-size:15px}
.datos-u span{display:block;font-size:13px;color:var(--tn-clr);margin-bottom:2px}
@media (max-width:760px){.datos-u{grid-template-columns:1fr}}

/* ============================================================
   CIERRE CON FOTO + FORMULARIO
   ============================================================ */
.cta{position:relative;min-height:clamp(480px,48vw,640px);display:grid;place-items:center;text-align:center;overflow:hidden;color:var(--t-osc);background:#000}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.75)}
.cta::after{content:"";position:absolute;inset:0;background:rgba(7,26,46,.45)}
.cta-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px var(--m)}
.cta .d1{max-width:16ch;font-size:clamp(40px,4.6vw,66px)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:30px 40px;margin-top:clamp(40px,5vw,64px)}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.todo{grid-column:1/-1}
.campo label{font-size:13.5px;color:var(--tn-osc)}
.campo input,.campo select,.campo textarea{background:transparent;border:0;border-bottom:1px solid rgba(232,241,248,.3);padding:10px 0;font-size:16px;color:var(--t-osc);outline:none;border-radius:0;transition:border-color .3s}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--cian)}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(232,241,248,.38)}
.campo select{appearance:none;-webkit-appearance:none}
.campo select option{color:#071A2E}
.campo textarea{min-height:90px;resize:vertical}
.form .fin{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.form .fin small{font-size:13.5px;color:var(--tn-osc)}
.form .fin small a{text-decoration:underline}
@media (max-width:700px){.form{grid-template-columns:1fr}}

/* ============================================================
   PIE
   ============================================================ */
.pie{background:var(--osc);color:var(--t-osc);padding-top:clamp(56px,7vw,96px);overflow:hidden}
.pie-r{display:grid;grid-template-columns:1.5fr .7fr .8fr .7fr 1fr;gap:28px;font-size:14.5px}
.pie-r .d3{max-width:16ch}
.pie-r ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pie-r a{color:rgba(232,241,248,.85)}.pie-r a:hover{color:#fff}
.pie-r .der{text-align:right}
.pie-marca{margin-top:clamp(56px,8vw,120px);white-space:nowrap;font-weight:600;letter-spacing:-.05em;line-height:1.05;font-size:11vw}
.pie-marca>span{display:inline-block}
.pie-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--ln-osc);padding:18px 0 26px;margin-top:20px;font-size:13.5px;color:var(--tn-osc)}
@media (max-width:980px){.pie-r{grid-template-columns:1fr 1fr}.pie-r .der{text-align:left}}

/* WhatsApp flotante (como hoy) */
.flota{position:fixed;right:18px;bottom:18px;z-index:55;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;
       background:var(--clr);color:var(--osc);font-weight:500;font-size:15px;box-shadow:0 14px 30px -12px rgba(0,0,0,.55);transition:opacity .4s,transform .5s var(--ease)}
.flota.oculta{opacity:0;transform:translateY(20px);pointer-events:none}

/* ============================================================
   PÁGINA INTERIOR
   ============================================================ */
.planes{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ln-clr);border-left:1px solid var(--ln-clr)}
.plan{border-right:1px solid var(--ln-clr);border-bottom:1px solid var(--ln-clr);padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:14px;position:relative}
.plan.destaca{background:var(--t-clr);color:var(--clr)}
.plan .val{display:flex;align-items:baseline;gap:6px}
.plan .val b{font-weight:500;font-size:clamp(40px,3.6vw,52px);letter-spacing:-.05em;line-height:1}
.plan .q{margin:0;font-size:15px;min-height:44px}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.plan li::before{content:"— ";opacity:.5}
.plan .ojo{margin-top:auto;font-size:13.5px}
.plan .tn{color:var(--tn-clr)}
.plan.destaca .tn{color:rgba(232,241,248,.7)}
.plan .sello{position:absolute;top:16px;right:16px;font-size:12px;padding:3px 8px;background:var(--cian);color:var(--osc);font-weight:600}
@media (max-width:1080px){.planes{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.planes{grid-template-columns:1fr}}
.equipo{display:grid;grid-template-columns:1fr 1.4fr auto;gap:24px;align-items:center;border:1px solid var(--ln-clr);border-top:0;padding:clamp(18px,2.4vw,28px)}
.equipo ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;font-size:14.5px}
.equipo li::before{content:"— ";opacity:.5}
@media (max-width:900px){.equipo{grid-template-columns:1fr}}

/* ============================================================
   REDONDEZ Y PROFUNDIDAD
   Las esquinas rectas de la referencia se veían planas. Se
   suavizan con tres radios y una sombra larga y tenue; las
   fotos a sangre (heros, cierre) se quedan rectas.
   ============================================================ */
:root{
  --r-xl:28px;   /* cajas grandes */
  --r-l:20px;    /* fotos y cajas dentro de cajas */
  --r-m:14px;    /* opciones, mosaicos, precios */
  --sombra:0 34px 70px -38px rgba(0,0,0,.6);
  --brillo:inset 0 1px 0 rgba(255,255,255,.06);
}
.caja,.flota{border-radius:999px}
.flota{box-shadow:0 16px 34px -14px rgba(0,0,0,.6)}
.op{border-radius:var(--r-m)}
.mapa{border-radius:var(--r-xl);box-shadow:var(--sombra)}
.visor img{border-radius:var(--r-l)}
.visor .ctl,.visor .cerrar{border-radius:50%}
.menu .menu-top button{border-radius:50%}
/* coworking */
.ficha{border-radius:var(--r-xl);box-shadow:var(--sombra),var(--brillo)}
.ficha .foto{border-radius:var(--r-l)}
.obra .img{border-radius:var(--r-l)}
.planes{border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:hidden}
.equipo{border-radius:0 0 var(--r-xl) var(--r-xl)}
.plan .sello{border-radius:999px}
#razon .foto{border-radius:var(--r-xl);box-shadow:var(--sombra)}


/* ============================================================
   PORTADA
   ============================================================ */
:root{ --alt:#0A2137; --fondo-pie:#030E1A; }
.alt{background:var(--alt);color:var(--t-osc)}
.alt .tn{color:var(--tn-osc)}

/* ---------- cabecera centrada (como las de hoy) ---------- */
.cab-c{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin:0 auto clamp(40px,5vw,64px);max-width:760px}
.cab-c .d2{max-width:18ch}
.cab-c .sub{margin:0;font-size:17px;line-height:1.5;max-width:52ch}

/* ---------- botones de la identidad ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;font-size:15px;font-weight:500;
     letter-spacing:-.01em;white-space:nowrap;transition:background-color .3s,color .3s,border-color .3s}
.btn .fl{transition:transform .45s var(--ease)}
.btn:hover .fl{transform:translate(3px,-3px)}
.btn.solido{background:var(--clr);color:var(--osc)}
.btn.solido:hover{background:#fff}
.btn.borde{border:1px solid rgba(232,241,248,.4);color:var(--t-osc)}
.btn.borde:hover{border-color:var(--t-osc)}
.claro .btn.solido{background:var(--osc);color:var(--clr)}
.claro .btn.solido:hover{background:#0d2a47}
.claro .btn.borde{border-color:rgba(7,26,46,.35);color:var(--t-clr)}
.btn.lleno{width:100%}

/* ---------- caja con línea fina (sustituye a las tarjetas con brillo) ---------- */
.caja-l{border:1px solid var(--ln-osc);background:rgba(7,26,46,.35)}
.alt .caja-l{background:rgba(7,26,46,.45)}

/* ============================================================
   1 · SERVICIOS (pestañas + panel)
   ============================================================ */
.tabs-f{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.tab-f{height:42px;padding:0 18px;border:1px solid var(--ln-osc);font-size:15px;font-weight:500;color:var(--tn-osc);transition:all .3s}
.tab-f:hover{color:var(--t-osc);border-color:rgba(232,241,248,.35)}
.tab-f[aria-selected="true"]{background:var(--clr);border-color:var(--clr);color:var(--osc)}
.panel-f{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding:clamp(14px,1.6vw,20px)}
.panel-f.activo{display:grid;animation:entraPanel .6s var(--ease)}
@keyframes entraPanel{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel-f .foto{overflow:hidden;background:#000;min-height:420px}
.panel-f .foto img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.panel-f .txt{display:flex;flex-direction:column;gap:18px;padding:clamp(6px,1.4vw,20px) clamp(4px,1vw,12px)}
.panel-f .d3{font-size:clamp(30px,2.8vw,40px)}
.panel-f .p{max-width:none;font-size:16px}
.rasgos-f{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ln-osc)}
.rasgos-f li{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--ln-osc);font-size:14.5px;color:rgba(232,241,248,.86)}
.rasgos-f li:nth-child(odd){padding-right:14px}
.rasgos-f svg.i{width:16px;height:16px;color:var(--cian)}
.precios-f{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));border-top:1px solid var(--ln-osc);border-bottom:1px solid var(--ln-osc)}
.precios-f div{padding:12px 12px 12px 0;display:flex;flex-direction:column;gap:2px}
.precios-f div+div{padding-left:12px;border-left:1px solid var(--ln-osc)}
.precios-f span{font-size:12.5px;color:var(--tn-osc)}
.precios-f b{font-weight:500;font-size:22px;letter-spacing:-.035em}
.acc-f{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:4px}
@media (max-width:900px){.panel-f{grid-template-columns:1fr}.panel-f .foto{min-height:0;aspect-ratio:16/10}.rasgos-f{grid-template-columns:1fr}}

/* ============================================================
   2 · RESEÑAS (cinta de reseñas + cinta de eventos + aviso)
   ============================================================ */
.calif-f{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:-26px;margin-bottom:40px}
.calif-f .est{letter-spacing:.2em;color:var(--t-osc)}
.calif-f span{font-size:14.5px}
.cinta{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.pista{display:flex;gap:16px;width:max-content;animation:desliza var(--dur,60s) linear infinite}
.cinta:hover .pista,.cinta:focus-within .pista{animation-play-state:paused}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}}
@media (prefers-reduced-motion:reduce){.cinta{overflow-x:auto}.pista{animation:none}}
.resena-f{flex:0 0 clamp(280px,80vw,380px);border:1px solid var(--ln-osc);padding:26px 24px;display:flex;flex-direction:column;gap:18px}
.resena-f .est{letter-spacing:.16em;font-size:14px}
.resena-f p{margin:0;font-size:17px;line-height:1.45;letter-spacing:-.02em;flex:1}
.resena-f .autor{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--ln-osc)}
.resena-f .av{width:40px;height:40px;background:var(--clr);color:var(--osc);display:grid;place-items:center;font-weight:600;flex:none}
.resena-f .av img{width:40px;height:40px;object-fit:cover}
.resena-f .autor b{display:block;font-weight:500;font-size:15px}
.resena-f .autor small{font-size:13px;color:var(--tn-osc)}
.resena-f.marcador p{color:var(--tn-osc)}
.eventos{margin-top:clamp(40px,5vw,64px)}
.evento-f{flex:0 0 clamp(240px,24vw,300px);cursor:pointer;display:flex;flex-direction:column;gap:10px}
.evento-f .img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#000}
.evento-f .img img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform 1.1s var(--ease)}
.evento-f:hover .img img{transform:scale(1.05)}
.evento-f .mas{position:absolute;right:10px;bottom:10px;min-width:34px;height:28px;padding:0 8px;background:var(--clr);color:var(--osc);font-size:13px;font-weight:600;display:grid;place-items:center}
.evento-f .cat{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--cian)}
.evento-f .tit{font-size:16px;font-weight:500;letter-spacing:-.025em;line-height:1.3}
.aviso-r{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px);padding:24px 28px}
.aviso-r .d3{font-size:24px}
.aviso-r p{margin:6px 0 0;font-size:15px;max-width:60ch}

/* ============================================================
   3 · TALLERES (cotizador + incluido + formulario)
   ============================================================ */
.cot{padding:clamp(20px,2.6vw,36px);display:flex;flex-direction:column;gap:22px;max-width:1000px;margin:0 auto}
.cot .pregunta{display:grid;grid-template-columns:44px 1fr;gap:10px;border:0;padding:0}
.cot .pregunta:last-child{border:0}
.cot .pregunta .num{color:var(--tn-osc);padding-top:2px}
.cot .pregunta h3{margin:0 0 12px;font-weight:500;font-size:19px;letter-spacing:-.03em}
.cot .ops{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cot .ops.cuatro{grid-template-columns:repeat(4,1fr)}
.cot .ops.dos{grid-template-columns:repeat(2,1fr)}
.oscuro .op,.alt .op{border-color:var(--ln-osc);color:var(--t-osc);text-align:center}
.oscuro .op:hover,.alt .op:hover{border-color:rgba(232,241,248,.35)}
.oscuro .op small,.alt .op small{color:var(--tn-osc)}
.oscuro .op[aria-checked="true"],.alt .op[aria-checked="true"]{background:var(--clr);color:var(--osc);border-color:var(--clr)}
.oscuro .op[aria-checked="true"] small,.alt .op[aria-checked="true"] small{color:rgba(7,26,46,.65)}
.cot-precio{border:1px solid var(--ln-osc);background:rgba(16,48,79,.35);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.cot-precio .et{font-size:14px;color:var(--tn-osc)}
.cot-precio .monto{display:flex;align-items:flex-start;justify-content:center;font-weight:500;font-size:clamp(56px,6vw,84px);line-height:1;letter-spacing:-.05em}
.cot-precio .monto .odo .col{transition-duration:.9s}
.cot-precio .monto>i{display:block;height:1em;line-height:1;font-style:normal}
.cot-precio .det{margin:0;font-size:15px;color:var(--tn-osc)}
.cot-precio .nota{margin:0;font-size:13.5px;color:var(--tn-osc);max-width:56ch}
.ver-tabla{align-self:center}
.tabla-caja{display:none;margin-top:6px}
.tabla-caja.ab{display:block;animation:entraPanel .5s var(--ease)}
.tabla-caja .tabla-cab{margin-bottom:12px}
.tabla-caja .ops{display:flex}
.incluido{max-width:1000px;margin:clamp(56px,7vw,96px) auto 0}
.incluido .d3{text-align:center;margin-bottom:28px}
.inc-r{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ln-osc)}
.inc-r>div{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:20px 18px 20px 0;border-bottom:1px solid var(--ln-osc)}
.inc-r>div:not(:nth-child(3n+1)){padding-left:18px;border-left:1px solid var(--ln-osc)}
.inc-r .ic{width:40px;height:40px;border:1px solid var(--ln-osc);display:grid;place-items:center;color:var(--cian)}
.inc-r h4{margin:0 0 4px;font-weight:500;font-size:16.5px;letter-spacing:-.025em}
.inc-r p{margin:0;font-size:14.5px;line-height:1.5}
.inc-nota{text-align:center;max-width:70ch;margin:24px auto 0;font-size:15px;line-height:1.55}
.inc-nota b{color:var(--t-osc);font-weight:500}
@media (max-width:860px){.inc-r{grid-template-columns:1fr}.inc-r>div:not(:nth-child(3n+1)){padding-left:0;border-left:0}.cot .ops,.cot .ops.cuatro{grid-template-columns:1fr 1fr}}
.form-taller{max-width:1000px;margin:clamp(56px,7vw,96px) auto 0;padding:clamp(22px,3vw,44px)}
.form-taller .cab-c{margin-bottom:28px}
.form-taller .form{margin-top:0}
.form .fin.centro{justify-content:center;flex-direction:column}
.form .fin small.it{font-style:normal}

/* ============================================================
   4 · FRASE (la sección clara)
   ============================================================ */
.frase-f{text-align:center;padding-block:clamp(80px,10vw,140px)}
.frase-f .comillas{font-size:56px;line-height:.6;font-weight:500;color:rgba(7,26,46,.3)}
.frase-f q{display:block;quotes:none;max-width:24ch;margin:12px auto 0;font-weight:500;font-size:clamp(30px,3.6vw,52px);line-height:1.1;letter-spacing:-.045em}
.frase-f .firma{display:block;margin-top:22px;font-size:14px;color:var(--tn-clr)}
.frase-f .acc-f{justify-content:center;margin-top:30px}

/* ============================================================
   5 · FORMAS DE PAGO
   ============================================================ */
.pagos-f{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--ln-osc);border-bottom:1px solid var(--ln-osc);max-width:1000px;margin:0 auto}
.pagos-f div{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 8px}
.pagos-f div+div{border-left:1px solid var(--ln-osc)}
.pagos-f .m{width:56px;height:56px;border:1px solid var(--ln-osc);display:grid;place-items:center;font-weight:600;font-size:15px;letter-spacing:-.02em}
.pagos-f span{font-size:14px;color:var(--tn-osc)}
@media (max-width:760px){.pagos-f{grid-template-columns:repeat(3,1fr)}.pagos-f div:nth-child(4){border-left:0}.pagos-f div:nth-child(n+4){border-top:1px solid var(--ln-osc)}}

/* ============================================================
   6 · RESERVAR
   ============================================================ */
.pasos-f{display:grid;grid-template-columns:repeat(3,1fr);max-width:880px;margin:0 auto;border-top:1px solid var(--ln-osc)}
.pasos-f div{padding:18px 18px 18px 0}
.pasos-f div+div{padding-left:18px;border-left:1px solid var(--ln-osc)}
.pasos-f h4{margin:6px 0 6px;font-weight:500;font-size:17px;letter-spacing:-.025em}
.pasos-f p{margin:0;font-size:14.5px;line-height:1.5}
.reservar-w{margin-top:clamp(40px,5vw,56px)}
.reservar-w .pie-l{text-align:center;margin-top:22px;font-size:15px}
@media (max-width:760px){.pasos-f{grid-template-columns:1fr}.pasos-f div+div{padding-left:0;border-left:0;border-top:1px solid var(--ln-osc)}}

/* ============================================================
   7 · PREGUNTAS (sobre fondo oscuro, como hoy)
   ============================================================ */
.faq-o{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,80px);align-items:center}
.faq-o .izq{display:flex;flex-direction:column;gap:16px}
.alt .faq-l,.alt .faq-i,.oscuro .faq-l,.oscuro .faq-i{border-color:var(--ln-osc)}
.alt .faq-c>div,.oscuro .faq-c>div{color:var(--tn-osc)}
.alt .faq-c b,.oscuro .faq-c b{color:var(--t-osc)}
.faq-info{margin-top:20px;padding:18px 20px;font-size:14.5px;line-height:1.6;color:var(--tn-osc)}
.faq-info b{color:var(--t-osc);font-weight:500}
.faq-info a{text-decoration:underline}
@media (max-width:900px){.faq-o{grid-template-columns:1fr}}

/* ============================================================
   8 · UBICACIÓN (mapa + tarjeta)
   ============================================================ */
.ubica-f{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:16px;align-items:stretch}
.ubica-f .mapa{aspect-ratio:auto;min-height:420px}
.tarjeta-u{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column}
.tarjeta-u .d3{margin-bottom:18px}
.tarjeta-u .fila{padding:14px 0;border-top:1px solid var(--ln-osc)}
.tarjeta-u .fila span{display:block;font-size:13px;color:var(--tn-osc);margin-bottom:3px}
.tarjeta-u .fila b{font-weight:500;font-size:16px;line-height:1.45}
.tarjeta-u .acc-f{margin-top:auto;padding-top:18px;border-top:1px solid var(--ln-osc)}
@media (max-width:900px){.ubica-f{grid-template-columns:1fr}}

/* ============================================================
   9 · CONTACTO (texto + formulario)
   ============================================================ */
.contacto-f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,80px);align-items:start}
.contacto-f .izq{display:flex;flex-direction:column;gap:18px}
.contacto-f .d1{font-size:clamp(40px,4.4vw,62px)}
.datos-c{margin-top:10px;border-top:1px solid var(--ln-osc)}
.datos-c div{padding:14px 0;border-bottom:1px solid var(--ln-osc)}
.datos-c span{display:block;font-size:13px;color:var(--tn-osc);margin-bottom:3px}
.datos-c b,.datos-c a{font-weight:500;font-size:16px}
.form-c{padding:clamp(22px,2.8vw,36px)}
.form-c .form{margin-top:0;gap:26px 28px}
.extra{grid-column:1/-1;display:none;grid-template-columns:1fr 1fr;gap:26px 28px}
.extra.ab{display:grid}
.mas-datos{grid-column:1/-1;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--tn-osc);justify-self:start}
.mas-datos .x{width:22px;height:22px;border:1px solid var(--ln-osc);display:grid;place-items:center;transition:transform .4s var(--ease)}
.mas-datos[aria-expanded="true"] .x{transform:rotate(45deg)}
@media (max-width:900px){.contacto-f{grid-template-columns:1fr}.extra{grid-template-columns:1fr}}

/* ============================================================
   10 · PIE (con newsletter, como hoy)
   ============================================================ */
.pie-f{background:var(--fondo-pie);color:var(--t-osc);padding-top:clamp(56px,7vw,96px)}
.pie-f .arriba{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.pie-f .logo-g{width:52px;height:52px}
.pie-f .news{margin-top:20px;max-width:440px}
.pie-f .news .d2{font-size:clamp(28px,2.6vw,38px)}
.news-f{display:flex;align-items:center;border-bottom:1px solid rgba(232,241,248,.3);margin-top:24px}
.news-f input{flex:1;background:transparent;border:0;padding:12px 0;font-size:16px;color:var(--t-osc);outline:none}
.news-f input::placeholder{color:rgba(232,241,248,.4)}
.news-f button{width:40px;height:40px;display:grid;place-items:center}
.pie-f .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:clamp(48px,6vw,80px);padding-top:28px;border-top:1px solid var(--ln-osc)}
.pie-f h5{margin:0 0 14px;font-size:14px;font-weight:500;color:var(--tn-osc)}
.pie-f ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15px}
.pie-f ul a:hover{color:#fff}
.redes-f{display:flex;gap:8px}
.redes-f a{width:40px;height:40px;border:1px solid var(--ln-osc);display:grid;place-items:center;transition:border-color .3s}
.redes-f a:hover{border-color:var(--t-osc)}
.pie-f .abajo{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px);padding:18px 0;border-top:1px solid var(--ln-osc);font-size:13.5px;color:var(--tn-osc)}
.pie-f .abajo a{text-decoration:underline}
.pie-f .firma{text-align:center;padding:16px 0 28px;font-size:13px;color:var(--tn-osc);border-top:1px solid var(--ln-osc)}
.pie-f .firma b{color:var(--t-osc);font-weight:600}
@media (max-width:860px){.pie-f .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pie-f .cols{grid-template-columns:1fr}}

.alt .etq::before{background:var(--cian)}
.cot-precio .liga{align-self:center}

/* celular: el cotizador y los precios respiran mejor */
@media (max-width:560px){
  .cot .pregunta{grid-template-columns:1fr;gap:4px}
  .cot .ops,.cot .ops.cuatro{grid-template-columns:1fr 1fr}
  .cot .ops.dos{grid-template-columns:1fr}
  .precios-f{grid-template-columns:1fr 1fr}
  .precios-f div+div{border-left:0;padding-left:0}
  .precios-f div:nth-child(even){border-left:1px solid var(--ln-osc);padding-left:12px}
  .precios-f div:nth-child(n+3){border-top:1px solid var(--ln-osc)}
}


/* ============================================================
   REDONDEZ Y PROFUNDIDAD (portada)
   ============================================================ */
.btn,.tab-f{border-radius:999px}
.btn.solido{box-shadow:0 12px 26px -14px rgba(232,241,248,.35)}
.claro .btn.solido{box-shadow:0 12px 26px -14px rgba(7,26,46,.45)}
.tab-f[aria-selected="true"]{box-shadow:0 10px 24px -12px rgba(232,241,248,.4)}
.caja-l{border-radius:var(--r-xl);background:linear-gradient(180deg,rgba(16,48,79,.55),rgba(10,33,55,.32));box-shadow:var(--sombra),var(--brillo)}
.alt .caja-l{background:linear-gradient(180deg,rgba(16,48,79,.62),rgba(7,26,46,.42))}
.panel-f .foto{border-radius:var(--r-l)}
.precios-f{border:1px solid var(--ln-osc);border-radius:var(--r-m);background:rgba(7,26,46,.35);overflow:hidden}
.precios-f div{padding:12px 14px}
.precios-f div+div{padding-left:14px}
.resena-f{border-radius:var(--r-l);background:linear-gradient(180deg,rgba(16,48,79,.5),rgba(10,33,55,.25));box-shadow:var(--brillo)}
.resena-f .av{border-radius:50%;overflow:hidden}
.evento-f .img{border-radius:var(--r-l);box-shadow:0 24px 40px -28px rgba(0,0,0,.7)}
.evento-f .mas{border-radius:999px}
.cot-precio{border-radius:var(--r-l);background:radial-gradient(ellipse 80% 70% at 50% 115%,rgba(94,194,232,.2),rgba(94,194,232,0) 70%),rgba(16,48,79,.45);box-shadow:var(--brillo)}
.inc-r .ic{border-radius:50%}
.pagos-f{border:1px solid var(--ln-osc);border-radius:var(--r-xl);background:linear-gradient(180deg,rgba(16,48,79,.45),rgba(10,33,55,.25));overflow:hidden;box-shadow:var(--sombra)}
.pagos-f .m{border-radius:var(--r-m);background:rgba(232,241,248,.04)}
.mas-datos .x,.redes-f a{border-radius:50%}
.news-f button{border-radius:50%}
@media (max-width:560px){
  .precios-f div,.precios-f div+div{padding:12px 14px}
  .precios-f div:nth-child(even){padding-left:14px}
}


/* ============================================================
   SITIO REAL · piezas que el preview no necesitaba
   ============================================================ */

/* ---------- hero de la portada: fachada + video ----------
   La foto es el respaldo y el "poster" del video. Mientras
   assets/video/hero-fachada.mp4 no exista, se ve la foto y
   nadie nota nada. Cuando exista, el video entra con un fundido
   encima de la foto (clase .va la pone forma.js). */
.hero .foto-h video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;opacity:0;transition:opacity 1.4s ease}
.hero .foto-h video.va{opacity:1}
.hero.fachada .foto-h img{object-position:50% 42%}
/* La fachada es clara (cielo y banqueta); el degradado de abajo
   va más cargado que en el preview para que el nombre gigante y
   el texto se lean sobre el piso gris. */
.hero.fachada::after{background:linear-gradient(180deg,rgba(3,12,22,.6) 0%,rgba(3,12,22,.08) 20%,rgba(3,12,22,0) 40%,rgba(3,12,22,.5) 66%,rgba(3,12,22,.88) 100%)}
@media (prefers-reduced-motion:reduce){.hero .foto-h video{display:none}}

/* ---------- mensajes de los formularios ---------- */
.msg-f{grid-column:1/-1;display:none;padding:14px 18px;border-radius:var(--r-m);font-size:15px;line-height:1.5;border:1px solid transparent}
.msg-f.ok{display:block;background:rgba(46,194,126,.12);border-color:rgba(46,194,126,.45);color:#c9f2dd}
.msg-f.error{display:block;background:rgba(231,76,60,.12);border-color:rgba(231,76,60,.5);color:#ffd5cf}
.btn[disabled]{opacity:.6;cursor:progress}
.news-f+.msg-f{margin-top:12px}

/* ---------- formas de pago con el logo real ---------- */
.pagos-f .m img{width:42px;height:42px;object-fit:contain}
.pagos-f .m.logo{background:#fff;border-color:#fff}

/* ---------- reseñas: estado mientras cargan o si fallan ---------- */
.resenas-espera{text-align:center;padding:30px 20px;font-size:15px;color:var(--tn-osc)}
.resenas-espera a{text-decoration:underline}

/* ---------- liga "o mándanos tus datos" del cotizador ---------- */
.cot-precio .liga{align-self:center}

/* ============================================================
   PÁGINAS INTERIORES
   ============================================================ */
.planes.tres{grid-template-columns:repeat(3,1fr)}
.planes.dos{grid-template-columns:repeat(2,1fr)}
.planes.solo{border-radius:var(--r-xl)}
.plan .liga{margin-top:6px}
.plan.destaca .liga{color:var(--clr)}
@media (max-width:1080px){.planes.tres{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.planes.tres,.planes.dos{grid-template-columns:1fr}}
.grupo-t{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.grupo-t .d3{font-size:clamp(22px,1.9vw,26px)}
.grupo-t p{margin:0;font-size:15px;max-width:44ch}
.grupo-t+.planes{margin-bottom:clamp(40px,5vw,64px)}
.pie-legal a{text-decoration:underline}
.pie-legal b{color:var(--t-osc);font-weight:600}

/* ============================================================
   AVISO DE PRIVACIDAD · página de lectura, sin hero
   ============================================================ */
.legal{padding:calc(var(--nav) + clamp(48px,7vw,96px)) 0 clamp(72px,9vw,120px)}
.legal .cap{max-width:1180px}
.legal-cab{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(36px,5vw,64px)}
.legal-cab .meta{font-size:14px}
.legal-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.legal-toc{position:sticky;top:calc(var(--nav) + 28px);padding:22px 22px 18px;border:1px solid var(--ln-clr);border-radius:var(--r-l);background:var(--clr-2)}
.legal-toc h3{margin:0 0 12px;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--tn-clr)}
.legal-toc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:14.5px}
.legal-toc a:hover{text-decoration:underline}
.legal-txt{max-width:72ch}
.legal-txt section{scroll-margin-top:calc(var(--nav) + 24px)}
.legal-txt section:first-child h2{margin-top:0}
.legal-txt h2{font-weight:500;font-size:clamp(24px,2.2vw,30px);line-height:1.15;letter-spacing:-.035em;margin:56px 0 14px}
.legal-txt h3{font-weight:600;font-size:16.5px;letter-spacing:-.015em;margin:28px 0 10px}
.legal-txt h4{font-weight:600;font-size:15.5px;margin:20px 0 8px}
.legal-txt p,.legal-txt li{font-size:16px;line-height:1.7;color:var(--tn-clr)}
.legal-txt p{margin:0 0 14px}
.legal-txt ul,.legal-txt ol{margin:10px 0 16px;padding-left:22px}
.legal-txt li{margin-bottom:6px}
.legal-txt strong{color:var(--t-clr);font-weight:600}
.legal-txt a{text-decoration:underline;text-underline-offset:3px}
.legal-box{background:var(--clr-2);border:1px solid var(--ln-clr);border-radius:var(--r-l);padding:20px 24px;margin:22px 0}
.legal-box h3{margin-top:0}
.legal-box p:last-child{margin-bottom:0}
.legal-txt .volver{margin-top:40px}
@media (max-width:900px){.legal-grid{grid-template-columns:1fr}.legal-toc{position:static}}

/* tarifas sobre fondo oscuro (salas y content studio alternan al revés que coworking) */
.oscuro .planes,.oscuro .plan,.oscuro .equipo{border-color:var(--ln-osc)}
.oscuro .plan .tn{color:var(--tn-osc)}
.oscuro .plan.destaca{background:var(--clr);color:var(--osc)}
.oscuro .plan.destaca .tn{color:rgba(7,26,46,.66)}
.oscuro .plan.destaca .liga{color:var(--osc)}
.oscuro .planes{background:linear-gradient(180deg,rgba(16,48,79,.35),rgba(10,33,55,.2))}

/* entre tableta y escritorio el correo de la barra ya no cabe junto a las ligas */
@media (max-width:1080px){.nav-dat{display:none}}

/* ============================================================
   SERVICIOS · todas las fotos del mismo tamaño, horizontales
   Antes la foto se estiraba al alto del texto: en Coworking salía
   casi cuadrada y en Salas vertical. Ahora es 4:3 en todas las
   pestañas y siempre arriba, así no brinca al cambiar de pestaña.
   ============================================================ */
.panel-f{align-items:start}
.panel-f .foto{min-height:0;aspect-ratio:4/3;align-self:start}
@media (max-width:900px){.panel-f .foto{aspect-ratio:4/3}}

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP · verde de marca con onda de gota
   Verde #25D366 con letra blanca, igual que el botón anterior.
   Es una excepción decidida: el contraste (1.98) no llega al
   mínimo accesible, pero se prefiere que se lea como WhatsApp de
   un vistazo. Si algún día se quiere resolver: misma forma con
   letra #06301a (7.33) o verde #17823f con letra blanca (4.88).
   La "gota" es un anillo que sale del botón y se desvanece, como
   la onda de una gota en el agua.
   ============================================================ */
.flota{background:#25D366;color:#fff;font-weight:600;gap:9px;padding:0 22px 0 16px;height:54px;
       box-shadow:0 12px 30px -8px rgba(37,211,102,.55);isolation:isolate}
.flota .wa{width:26px;height:26px;flex:none}
.flota::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#25D366;z-index:-1;
              animation:gota 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.flota:hover{transform:scale(1.05)}
.flota.oculta{transform:translateY(20px)}
@keyframes gota{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.flota::after{animation:none;opacity:0}}
/* En el teléfono queda solo el círculo con el logo: se reconoce solo
   y ahí el espacio es lo caro (mismo criterio que el sitio anterior). */
@media (max-width:640px){
  .flota{width:54px;height:54px;padding:0;gap:0;justify-content:center;border-radius:50%;right:16px;bottom:18px}
  .flota span{display:none}
  .flota .wa{width:28px;height:28px}
}

/* ============================================================
   SERVICIOS · la tarjeta mide lo mismo en las cinco pestañas
   Las cinco fichas se apilan en la misma celda de la rejilla: la
   tarjeta toma el alto de la más larga (Salas, con seis precios)
   y ya no cambia de tamaño al cambiar de pestaña. Las que no están
   activas quedan invisibles (y fuera del lector de pantalla).
   La foto va centrada en vertical y los botones siempre abajo,
   así todo cae en el mismo lugar en las cinco.
   En celular la foto va arriba del texto y cada ficha conserva su
   alto natural: igualarlas ahí dejaría huecos de 300 px.
   ============================================================ */
@media (min-width:901px){
  .paneles{display:grid}
  .paneles>.panel-f{grid-area:1/1;display:grid;align-items:stretch;visibility:hidden;opacity:0;pointer-events:none;animation:none}
  .paneles>.panel-f.activo{visibility:visible;opacity:1;pointer-events:auto;animation:entraPanel .6s var(--ease)}
  .paneles .panel-f .foto{align-self:center}
  .paneles .panel-f .acc-f{margin-top:auto}
}
.acc-f .liga{align-self:center}

/* Servicios: la tarjeta sigue midiendo lo mismo en las cinco
   pestañas, pero el contenido va CENTRADO en vertical (foto y
   texto) y los botones justo debajo de los precios. Así las de
   poca información (oficina virtual, domicilio fiscal) no quedan
   con un hueco entre los precios y el botón. */
@media (min-width:901px){
  .paneles .panel-f .txt{justify-content:center}
  .paneles .panel-f .acc-f{margin-top:4px}
}

/* ============================================================
   BARRA CLARA · las secciones se siguen viendo al bajar
   En computadora la barra clara conserva las ligas (en azul) y el
   correo y teléfono; la hamburguesa queda solo para celular.
   ============================================================ */
@media (min-width:901px){
  .nav.compacta .nav-links{display:flex;color:rgba(7,26,46,.7)}
  .nav.compacta .nav-links a:hover{color:var(--osc)}
  .nav.compacta .nav-dat{display:flex;color:rgba(7,26,46,.7);padding-top:0;align-self:center}
  .nav.compacta .hamb{display:none}
  .nav.compacta{box-shadow:0 1px 0 rgba(7,26,46,.08)}
}
@media (min-width:901px) and (max-width:1080px){.nav.compacta .nav-dat{display:none}}

/* ============================================================
   SERVICIOS · foto vertical que llena el alto de la tarjeta
   La foto ocupa todo el alto (sin huecos arriba ni abajo) y su
   columna es más angosta, así queda vertical (aprox. 3:4). El
   texto gana ancho, se acomoda en menos renglones y las cinco
   fichas quedan con un alto parecido: la tarjeta la manda la foto
   y el texto va centrado a su lado.
   En celular la foto sigue arriba del texto y horizontal: vertical
   ocuparía casi toda la pantalla antes de llegar a la información.
   ============================================================ */
@media (min-width:901px){
  .paneles .panel-f{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .paneles .panel-f .foto{aspect-ratio:auto;align-self:stretch;min-height:clamp(480px,44vw,640px)}
}
/* encuadre de la fachada en vertical: que se vea el logo y la entrada */
#p-fis .foto img{object-position:32% 50%}

/* ============================================================
   WHATSAPP · siempre verde y con su logo
   Regla de la casa: todo botón o llamado a la acción que lleve a
   WhatsApp va en verde de marca (#25D366) y, si es botón, con el
   logo. Las ligas dentro de un texto van solo en verde.
   (Misma excepción de contraste que el botón flotante: decidida
   por marca, ver más arriba.)
   ============================================================ */
.wa-i{width:20px;height:20px;fill:currentColor;flex:none}
.btn.wa,.claro .btn.wa{background:#25D366;color:#fff;border:0;box-shadow:0 12px 26px -12px rgba(37,211,102,.6)}
.btn.wa:hover,.claro .btn.wa:hover{background:#1FBF5B}
.btn.wa .wa-i{width:21px;height:21px}
a[href*="wa.me"]:not(.btn):not(.flota):not(.wa-r):not(.btn-pill),
a[href*="api.whatsapp.com"]:not(.btn){color:#25D366;text-decoration-color:rgba(37,211,102,.6)}
.claro a[href*="wa.me"]:not(.btn):not(.flota),.legal a[href*="wa.me"]:not(.btn):not(.flota){color:#0E7A43}
.wa-l{display:inline-flex;align-items:center;gap:8px}
.wa-l .wa-i{width:18px;height:18px}
.redes-f a.wa-r{background:#25D366;border-color:#25D366;color:#fff}
.redes-f a.wa-r .wa-i{width:19px;height:19px}

/* ============================================================
   RESEÑAS · estrellas en cian, que resalten sobre el azul
   ============================================================ */
.calif-f .est,.resena-f .est{color:var(--cian);text-shadow:0 0 14px rgba(94,194,232,.45)}
.calif-f .est{font-size:18px}
.resena-f .est i{font-style:normal;opacity:.35;text-shadow:none}
/* en las columnas de texto el botón de WhatsApp no se estira */
.faq-r .izq .btn,.split-lado .btn,.pie-r .btn{align-self:flex-start}

/* ============================================================
   TÍTULOS MÁS GRANDES
   Los títulos de sección (d2) y los de tarjeta (d3) se veían
   chicos junto a la letra del texto. Suben un escalón en todo el
   sitio para que la jerarquía se note de lejos.
   ============================================================ */
/* mismo tamaño que el título de las tarjetas de servicios («Coworking») */
.d2{font-size:clamp(32px,3vw,44px);line-height:1.08}
.d3{font-size:clamp(26px,2.4vw,34px)}
.panel-f .d3{font-size:clamp(32px,3vw,44px)}
.cab-c .d2{max-width:20ch}

/* ============================================================
   SERVICIOS · letra más grande dentro de las tarjetas
   (Coworking, Salas, Content Studio, Oficina virtual, Fiscal).
   El título se queda igual que los títulos de sección; crece todo
   lo de adentro: etiqueta, descripción, lista, precios y botones.
   ============================================================ */
.panel-f .etq{font-size:15.5px}
.panel-f .p{font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.55}
.panel-f .rasgos-f li{font-size:clamp(15px,1.15vw,16.5px);padding:12px 0}
.panel-f .rasgos-f svg.i{width:18px;height:18px}
.panel-f .precios-f span{font-size:13.5px}
.panel-f .precios-f b{font-size:clamp(22px,1.9vw,27px)}
.panel-f .acc-f .btn{height:52px;padding:0 26px;font-size:16px}
.panel-f .acc-f .liga{font-size:16px}

/* ============================================================
   SERVICIOS · precios que resaltan
   Más grandes, en blanco y con más peso; la caja lleva un tinte
   cian para que se lea como "aquí está el precio". El "/h" y
   "/mes" van chicos para que mande el número.
   ============================================================ */
.panel-f .precios-f{background:linear-gradient(180deg,rgba(94,194,232,.12),rgba(94,194,232,.03));border-color:rgba(94,194,232,.3)}
.panel-f .precios-f div+div{border-left-color:rgba(94,194,232,.2)}
.panel-f .precios-f span{font-size:13.5px;color:rgba(232,241,248,.72)}
.panel-f .precios-f b{font-size:clamp(26px,2.3vw,34px);font-weight:600;color:#fff;letter-spacing:-.045em;line-height:1.1}
.panel-f .precios-f b small{font-size:.5em;font-weight:500;letter-spacing:0;color:rgba(232,241,248,.7);margin-left:2px}
@media (max-width:560px){.panel-f .precios-f div:nth-child(n+3){border-top-color:rgba(94,194,232,.2)}}

/* Video del hero: entra con el mismo acercamiento que la foto, para
   que al cambiar de foto a video no se note un brinco de encuadre. */
.hero .foto-h video{transform:scale(1.07);transition:opacity 1.4s ease,transform 2.4s var(--ease)}
.hero.listo .foto-h video{transform:none}
.hero.fachada .foto-h img,.hero.fachada .foto-h video{object-position:52% 50%}

/* ============================================================
   MÁS ANCHO · el sitio respira de orilla a orilla
   Antes el contenido se quedaba en 1440 px con 96 px de margen a
   cada lado: en pantallas de 1700 px sobraban ~230 px por lado y
   todo se sentía apretado al centro. Ahora el contenedor llega a
   1800 px y el margen lateral es más angosto (máx. 72 px). Los
   bloques centrados (cotizador, incluido, formularios, pagos,
   pasos) también se abren.
   ============================================================ */
:root{--m:clamp(18px,4vw,72px)}
.cap{max-width:1800px}
.cab-c{max-width:880px}
.cot,.incluido,.form-taller,.pagos-f{max-width:1180px}
.pasos-f{max-width:1040px}
@media (min-width:901px){.paneles .panel-f .foto{min-height:clamp(480px,40vw,720px)}}

/* Ancho: un punto medio entre el original (1440 px) y el de 1800 px,
   que se sentía demasiado abierto. */
:root{--m:clamp(18px,4.8vw,84px)}
.cap{max-width:1600px}
.cab-c{max-width:820px}
.cot,.incluido,.form-taller,.pagos-f{max-width:1100px}
.pasos-f{max-width:960px}

/* ============================================================
   FRASE · más compacta
   La frase se abre a lo ancho (dos renglones en computadora en vez
   de cuatro), con letra un poco más chica y menos aire arriba y
   abajo. La sección queda a casi la mitad de alto.
   ============================================================ */
.frase-f{padding-block:clamp(52px,6vw,84px)}
.frase-f .comillas{font-size:44px}
.frase-f q{max-width:46ch;margin-top:6px;font-size:clamp(26px,2.6vw,38px);line-height:1.15;text-wrap:balance}
.frase-f .firma{margin-top:14px}
.frase-f .acc-f{margin-top:22px}

/* ============================================================
   FORMAS DE PAGO · animadas
   1. Entrada: al aparecer la sección, los logos saltan uno por uno
      de izquierda a derecha.
   2. Ola: después, cada logo sube un poquito por turnos y su nombre
      se ilumina, como una ola que recorre la barra cada 5 s.
   3. Brillo: una franja de luz cian cruza la barra de vez en cuando.
   4. Al pasar el mouse, el logo se levanta y la celda se aclara.
   La ola usa la propiedad «translate» y la entrada «transform»,
   así no se pisan. Sin animaciones del sistema: todo quieto.
   ============================================================ */
.pagos-f{position:relative}
.pagos-f>div{transition:background-color .35s}
.pagos-f>div:nth-child(1){--k:0}.pagos-f>div:nth-child(2){--k:1}.pagos-f>div:nth-child(3){--k:2}
.pagos-f>div:nth-child(4){--k:3}.pagos-f>div:nth-child(5){--k:4}.pagos-f>div:nth-child(6){--k:5}
.pagos-f .m{transform:translateY(16px) scale(.7);opacity:0;
  transition:transform .75s cubic-bezier(.34,1.56,.64,1),opacity .45s ease;transition-delay:calc(.15s + var(--k) * .11s)}
.pagos-f.on .m{transform:none;opacity:1;animation:pago-ola 5s ease-in-out infinite;animation-delay:calc(1.4s + var(--k) * .2s)}
.pagos-f>div>span:last-child{color:#fff;opacity:.62}
.pagos-f.on>div>span:last-child{animation:pago-nombre 5s ease-in-out infinite;animation-delay:calc(1.4s + var(--k) * .2s)}
@keyframes pago-ola{0%,22%,100%{translate:0 0}11%{translate:0 -7px}}
@keyframes pago-nombre{0%,22%,100%{opacity:.62}11%{opacity:1}}
.pagos-f::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(94,194,232,.13) 50%,transparent 65%);
  transform:translateX(-100%);animation:pago-brillo 6s ease-in-out infinite 2s}
@keyframes pago-brillo{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}}
.pagos-f>div:hover{background:rgba(94,194,232,.07)}
.pagos-f.on>div:hover .m{transform:translateY(-4px) scale(1.08);transition-delay:0s}
@media (prefers-reduced-motion:reduce){
  .pagos-f .m{transform:none;opacity:1;transition:none}
  .pagos-f.on .m,.pagos-f.on>div>span:last-child,.pagos-f::after{animation:none}
}

/* ============================================================
   TÍTULOS DE SECCIÓN (d2) · más grandes
   «Soluciones flexibles para tu negocio», «Lo que dicen de
   nosotros», «Lo que más nos preguntan», etc. Ya no van atados al
   título de las tarjetas de servicios: suben a 64 px como máximo.
   ============================================================ */
.d2{font-size:clamp(36px,4.2vw,64px);line-height:1.04;letter-spacing:-.045em}
.cab-c .d2{max-width:22ch}

/* Pestañas de servicios más grandes */
.tabs-f{gap:10px;margin-bottom:34px}
.tab-f{height:56px;padding:0 28px;font-size:17.5px}
@media (max-width:640px){.tabs-f{gap:8px}.tab-f{height:46px;padding:0 18px;font-size:15.5px}}

/* ============================================================
   SERVICIOS EN LA BARRA · menú desplegable (computadora)
   Al pasar el mouse por «Servicios» (o llegar con el tabulador)
   se abre un panel claro con las tres páginas: foto, nombre y
   precio desde. Un clic en «Servicios» sigue llevando a la
   sección. Las fotos son miniaturas de ~30 KB (menu-*.jpg).
   ============================================================ */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop>a{display:inline-flex;align-items:center}
.nav-drop .chev{width:7px;height:7px;margin-left:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
                transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--ease)}
.nav-drop:hover .chev,.nav-drop:focus-within .chev{transform:translateY(1px) rotate(-135deg)}
.drop{position:absolute;left:50%;top:100%;padding-top:18px;z-index:75;
      opacity:0;visibility:hidden;transform:translate(-50%,10px);transition:opacity .25s,transform .35s var(--ease),visibility .35s}
.nav-drop:hover .drop,.nav-drop:focus-within .drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.drop-in{width:min(700px,92vw);display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;
         background:var(--clr);color:var(--t-clr);border-radius:var(--r-xl);
         box-shadow:0 34px 70px -26px rgba(3,12,22,.6),0 0 0 1px rgba(7,26,46,.08)}
.nav-links .drop a,.nav-links .drop a:hover{color:var(--osc)}
.drop-i{display:flex;flex-direction:column;gap:10px;padding:8px;border-radius:var(--r-l);transition:background-color .25s}
.drop-i:hover{background:#fff}
.drop-i img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-m);transition:transform .6s var(--ease)}
.drop-i:hover img{transform:scale(1.03)}
.drop-i b{display:block;font-weight:500;font-size:17px;letter-spacing:-.02em}
.drop-i small{display:block;margin-top:2px;font-size:13.5px;color:var(--tn-clr)}
.drop-pie{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
          margin-top:4px;padding:12px 8px 4px;border-top:1px solid var(--ln-clr);font-size:14px;color:var(--tn-clr)}
.drop-pie a{font-weight:500}

/* ============================================================
   MENÚ DEL CELULAR · accesos a las tres páginas de servicio
   ============================================================ */
.menu{overflow-y:auto}
.menu-serv{margin-top:24px}
.menu-serv>span{display:block;font-size:14px;color:var(--tn-osc);margin-bottom:10px}
.menu-serv>div{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.menu-serv a{display:flex;flex-direction:column;gap:6px}
.menu-serv img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-m)}
.menu-serv b{font-weight:500;font-size:15px;line-height:1.2;letter-spacing:-.015em}
.menu-serv small{font-size:12.5px;color:var(--tn-osc)}

/* ============================================================
   «QUÉ INCLUYE» / «EQUIPAMIENTO» · con ícono
   Cada punto lleva su ícono en un círculo a la izquierda y el
   número a la derecha, en la misma línea.
   ============================================================ */
.lista-n .ln-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.lista-n .ic{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;
             border:1px solid rgba(20,120,168,.25);background:rgba(20,120,168,.08);color:#1478A8}
.lista-n .ic svg.i{width:22px;height:22px}
.oscuro .lista-n .ic{border-color:rgba(94,194,232,.3);background:rgba(94,194,232,.1);color:var(--cian)}

/* Redes del pie con su color de marca */
.redes-f a[aria-label="Facebook"]{background:#1877F2;border-color:#1877F2;color:#fff}
.redes-f a[aria-label="Instagram"]{border-color:transparent;color:#fff;
  background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.redes-f a{transition:transform .3s var(--ease),box-shadow .3s}
.redes-f a:hover{transform:translateY(-2px);box-shadow:0 10px 20px -10px rgba(0,0,0,.6)}

/* ============================================================
   SELECTOR DE IDIOMA · ES / EN en la barra
   Vive a la derecha, junto al correo y teléfono (o junto a la
   hamburguesa en celular). Lleva a la misma página en el otro
   idioma: /coworking ⇄ /en/coworking.
   ============================================================ */
.nav-der{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:18px}
.nav-der .nav-dat{align-self:center;padding-top:0}
.nav-der .hamb{grid-column:auto;grid-row:auto}
.idioma{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;border:1px solid rgba(232,241,248,.3);flex:none}
.idioma a{display:grid;place-items:center;min-width:34px;height:28px;padding:0 9px;border-radius:999px;
          font-size:12.5px;font-weight:600;letter-spacing:.04em;color:rgba(232,241,248,.75);transition:background-color .25s,color .25s}
.idioma a:hover{color:#fff}
.idioma a.act{background:var(--clr);color:var(--osc)}
.nav.compacta .idioma{border-color:rgba(7,26,46,.2)}
.nav.compacta .idioma a{color:rgba(7,26,46,.65)}
.nav.compacta .idioma a:hover{color:var(--osc)}
.nav.compacta .idioma a.act{background:var(--osc);color:var(--clr)}
@media (max-width:900px){.nav-der{gap:12px}}


/* ============================================================
   «CALIFICAR EN GOOGLE» · aro de colores, versión ligera
   Antes el aro giraba cambiando el degradado en cada cuadro
   (@property) y con un resplandor desenfocado: el navegador lo
   volvía a pintar 60 veces por segundo aunque el botón no se
   viera, y eso hacía sentir lenta toda la página.
   Ahora gira un cuadrado de colores detrás del botón con
   «transform», que mueve la tarjeta gráfica sin repintar; el
   botón lo recorta y una cara blanca encima deja un aro de 4 px.
   El resplandor es una sombra fija con los cuatro colores.
   ============================================================ */
.btn.google{position:relative;isolation:isolate;overflow:hidden;background:transparent;color:var(--osc);
  box-shadow:-10px 0 24px -9px rgba(66,133,244,.8),10px 0 24px -9px rgba(52,168,83,.8),0 -7px 22px -9px rgba(234,67,53,.75),0 9px 22px -9px rgba(251,188,5,.75);
  transition:box-shadow .35s}
.btn.google:hover{box-shadow:-12px 0 30px -8px rgba(66,133,244,.95),12px 0 30px -8px rgba(52,168,83,.95),0 -9px 28px -8px rgba(234,67,53,.9),0 11px 28px -8px rgba(251,188,5,.9)}
.btn.google::before{content:"";position:absolute;left:50%;top:50%;width:max(170%,260px);aspect-ratio:1;z-index:-2;
  background:conic-gradient(#4285F4 0 22%,#EA4335 25% 47%,#FBBC05 50% 72%,#34A853 75% 97%,#4285F4 100%);
  transform:translate(-50%,-50%) rotate(0deg);will-change:transform;animation:g-gira 3.2s linear infinite}
.btn.google::after{content:"";position:absolute;inset:4px;border-radius:inherit;background:#fff;z-index:-1;transition:background-color .3s}
.btn.google:hover::after{background:#F4F8FF}
@keyframes g-gira{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ============================================================
   ANIMACIONES QUE NO SE VEN, EN PAUSA
   Lo que se mueve sin parar (aro de Google, formas de pago,
   cintas de reseñas y talleres) solo corre mientras está en
   pantalla. forma.js pone la clase .en-vista.
   ============================================================ */
.btn.google:not(.en-vista)::before,
.pagos-f:not(.en-vista) .m,.pagos-f:not(.en-vista)>div>span:last-child,.pagos-f:not(.en-vista)::after,
.cinta:not(.en-vista) .pista{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.btn.google::before{animation:none}}

/* ============================================================
   RENDIMIENTO · revelados y cintas más ligeros
   1. El desenfoque al aparecer (blur) se queda solo en los textos.
      En cajas grandes (tarjetas, formularios, mapa, reservas) el
      navegador tenía que volver a pintar el desenfoque en cada
      cuadro mientras aparecían, y eso trababa el scroll. Las cajas
      siguen apareciendo con fundido y subida, sin desenfoque.
   2. Las orillas que se desvanecen en las cintas eran una máscara
      sobre algo que se mueve sin parar; ahora son dos degradados
      fijos encima, que cuestan casi nada.
   ============================================================ */
.rev{filter:none}
.etq.rev,.d1.rev,.d2.rev,.d3.rev,.sub.rev,.p.rev,.der.rev,.liga.rev,.firma.rev,q.rev,.comillas.rev,.inc-nota.rev,h3.rev{filter:blur(6px)}
.rev.on{filter:none}
.cinta{position:relative;-webkit-mask-image:none;mask-image:none}
.cinta::before,.cinta::after{content:"";position:absolute;top:0;bottom:0;width:6%;z-index:2;pointer-events:none}
.cinta::before{left:0;background:linear-gradient(90deg,var(--osc),rgba(7,26,46,0))}
.cinta::after{right:0;background:linear-gradient(270deg,var(--osc),rgba(7,26,46,0))}
/* cajas grandes: sin animación de entrada (ver forma.js, «rev-fija») */
.rev.rev-fija{opacity:1;transform:none;filter:none;transition:none}