/* Ciento Diez 2.0 · v2 (borrador) — paleta: blanco predominante, negro, azul eléctrico #374fff.
   Rosa y naranja SOLO en transiciones/detalles. Amarillo #E6C253 reservado para campañas (no se usa aquí). */
@font-face{font-family:"Lilac Block";src:local("Lilac Block"),local("LilacBlock-Regular");font-weight:300 800;font-display:swap}
/* Cuando compren la licencia web de Lilac Block: agregar  url("../fonts/LilacBlock-Variable.woff2") format("woff2")  al src de arriba. */
:root{
 --azul:#374fff;--azul-d:#2336e0;--azul-l:#e9ecff;--negro:#0a0a0d;--negro2:#15161c;--blanco:#fff;--gris:#f3f4f8;--linea:#e4e6ee;
 --txt:#14151b;--mut:#5b5f72;--mut-d:#a6a9bd;--rosa:#ff5fa2;--naranja:#ff7a1a;
 --serif:"Lilac Block","Zilla Slab",Georgia,serif;--sans:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 --r:22px;--ease:cubic-bezier(.22,1,.36,1);--wrap:min(1240px,92vw)}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:82px}
body{margin:0;font-family:var(--sans);font-size:16.5px;line-height:1.65;color:var(--txt);background:var(--blanco);transition:background-color .7s var(--ease);overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{width:var(--wrap);margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--azul);color:#fff;padding:10px 16px;border-radius:10px}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px}
.dark :focus-visible,.blue :focus-visible{outline-color:#fff}

/* Tipografía */
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.04;letter-spacing:-.015em;margin:0}
h1,h2{color:var(--azul)}
h2{font-size:clamp(36px,5.6vw,80px)}
h3{font-size:clamp(22px,2.1vw,28px)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,var(--rosa),var(--naranja))}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--mut);max-width:640px}
.sec{padding:clamp(80px,11vw,150px) 0;position:relative}
.sec-head{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.sec-head p{margin:0;color:var(--mut)}
.dark{background:var(--negro);color:#e9eaf2}.dark h2{color:#8795ff}.dark h3{color:#fff}.dark .eyebrow,.dark .sec-head p,.dark .lead{color:var(--mut-d)}
.blue{background:var(--azul);color:#fff}.blue h2,.blue h3{color:#fff}.blue .eyebrow,.blue .sec-head p,.blue .lead{color:#dfe3ff}
.blue .eyebrow:before{background:#fff}
.dark,.blue{transition:background-color .7s var(--ease)}
html.theme-js .dark{background-color:#1e1725}
html.theme-js .blue{background-color:#2d42e8}
html.theme-js body.t-dark .dark{background-color:var(--negro)}
html.theme-js body.t-blue .blue{background-color:var(--azul)}

/* Placeholder / borrador */
.draft{position:relative;z-index:120;background:var(--negro);color:#fff;font-size:13px;padding:8px 0}
.draft .wrap{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.draft b{background:linear-gradient(90deg,var(--rosa),var(--naranja));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.12em}
.ph{align-self:flex-start;display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1.4;color:#9a3a00;background:#fff1e6;border:1px dashed var(--naranja);border-radius:6px;padding:2px 7px;vertical-align:middle;white-space:nowrap;text-transform:none}

/* Header */
.hdr{position:sticky;top:0;z-index:100;transition:transform .45s var(--ease),background .4s,border-color .4s}
.hdr.hide:not(:focus-within){transform:translateY(-100%)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.hdr{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid #0000000d}
.hdr.on-dark{background:rgba(10,10,13,.72);border-color:#ffffff14;color:#fff}
.hdr.on-blue{background:rgba(55,79,255,.85);border-color:#ffffff22;color:#fff}
.logo{display:block;position:relative;width:180px;height:44px}
.logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.logo .l-w{opacity:0}.hdr.on-dark .l-w,.hdr.on-blue .l-w{opacity:1}.hdr.on-dark .l-b,.hdr.on-blue .l-b{opacity:0}
.nav{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.nav a{display:block;text-decoration:none;font-size:14.5px;font-weight:500;padding:8px 14px;border-radius:999px;transition:background .25s,color .25s}
.nav a:hover{background:#0000000d}.on-dark .nav a:hover,.on-blue .nav a:hover{background:#ffffff1a}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid currentColor;background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:13px;right:13px;height:2px;background:currentColor;transition:transform .35s var(--ease)}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:25px}
.menu-open .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}.menu-open .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:90;background:var(--azul);color:#fff;padding:110px 6vw 40px;display:flex;flex-direction:column;justify-content:space-between;clip-path:circle(0 at calc(100% - 46px) 38px);transition:clip-path .7s var(--ease);visibility:hidden}
.menu-open .mmenu{clip-path:circle(150% at calc(100% - 46px) 38px);visibility:visible}
.mmenu ul{list-style:none;margin:0;padding:0}
.mmenu li a{display:block;font-family:var(--serif);font-size:clamp(34px,9vw,54px);line-height:1.15;text-decoration:none;padding:4px 0}
.mmenu .btn{align-self:flex-start}

/* Botones */
.btn{--bg:var(--azul);--fg:#fff;position:relative;display:inline-flex;align-items:center;gap:12px;background:var(--bg);color:var(--fg);text-decoration:none;font-weight:600;font-size:15.5px;padding:16px 26px;border-radius:999px;border:0;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .35s}
.btn:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--rosa),var(--naranja));transform:translateY(101%);border-radius:inherit;transition:transform .5s var(--ease)}
.btn:hover:before{transform:none}.btn:hover{color:var(--negro)}
.btn .arr{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#ffffff26;transition:transform .45s var(--ease)}
.btn:hover .arr{transform:rotate(-45deg)}
.btn.ghost{--bg:transparent;--fg:currentColor;box-shadow:inset 0 0 0 1.5px currentColor}
.btn.ghost .arr{background:#0000000f}
.btn.white{--bg:#fff;--fg:var(--azul)}.btn.white:hover{color:var(--negro)}
.btn.sm{padding:11px 18px;font-size:14px}
.btn-label{position:relative;z-index:1}

/* Hero */
.hero{position:relative;isolation:isolate;padding:clamp(32px,4vw,62px) 0;background:var(--blanco)}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 94% 10%,#ff5fa21f,transparent 60%),radial-gradient(ellipse at 70% 15%,#ff7a1a15,transparent 50%);animation:hero-color 1.2s var(--ease) both}
@keyframes hero-color{from{opacity:0}}
.hero-top{display:grid;grid-template-columns:1fr;gap:16px}
.hero h1{font-size:clamp(52px,7.6vw,112px);line-height:.96;letter-spacing:-.025em}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .w{display:inline-block}
.hero h1 em{font-style:italic;font-weight:500;background:linear-gradient(95deg,var(--azul) 0%,var(--azul) 45%,var(--rosa) 82%,var(--naranja) 100%);background-size:200% 100%;background-position:right center;-webkit-background-clip:text;background-clip:text;color:transparent;animation:hero-highlight 1.25s var(--ease) .25s both}
@keyframes hero-highlight{from{background-position:left center}}
.hero-sub{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:center}
.hero-sub .lead{margin:0;max-width:520px}
.hero-sub strong{color:var(--txt)}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* Servicios interactivos */
#servicios{padding-block:clamp(52px,6vw,86px)}
#servicios .sec-head{margin-bottom:clamp(24px,3vw,40px)}
#servicios h2{font-size:clamp(36px,4.65vw,66px)}
.svc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;list-style:none;margin:0;padding:0}
.svc{border:1px solid #ffffff2a;border-radius:var(--r);background:#ffffff08}
.svc:focus-within,.svc:hover{border-color:#ffffff64}
.svc-btn{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:12px;text-align:left;cursor:pointer;padding:12px 16px;color:#fff;list-style:none;border-radius:inherit}
.svc-btn::-webkit-details-marker{display:none}
.svc-n{font-size:12px;color:var(--mut-d);font-variant-numeric:tabular-nums}
.svc-t{font-family:var(--serif);font-size:clamp(21px,2.3vw,32px);line-height:1.05;transition:color .3s}
.svc-btn:hover .svc-t,.svc details[open] .svc-t{color:#aab3ff}
.svc-ico{width:38px;height:38px;border-radius:50%;border:1px solid #ffffff40;display:grid;place-items:center;position:relative;transition:background .3s,border-color .3s}
.svc-ico:before,.svc-ico:after{content:"";position:absolute;width:13px;height:2px;background:#fff}
.svc-ico:after{transform:rotate(90deg);transition:transform .4s var(--ease)}
.svc details[open] .svc-ico{background:var(--azul);border-color:var(--azul)}
.svc details[open] .svc-ico:after{transform:rotate(0)}
.svc-body{display:flex;align-items:start;gap:14px;padding:0 16px 16px 54px;font-size:14px}
.svc-body p{margin:0 0 12px;color:#e1e2ee}
.svc-body img{width:clamp(70px,10vw,130px);height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px}
.svc-body .btn{min-height:44px}
.svc-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Galería horizontal */
.gal-sec{padding:clamp(24px,2.8vw,40px) 0 22px;background:var(--blanco)}
.gal-head{display:flex;justify-content:space-between;align-items:end;gap:8px 24px;flex-wrap:wrap;margin-bottom:clamp(14px,2.2vw,30px)}
.gal-head h2{margin-top:6px}
.gal-tools,.gal-controls{display:flex;align-items:center;gap:10px}
.gal-tools p{margin:0;color:var(--mut);font-size:13px}
.gal-controls[hidden]{display:none}
.gal-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);background:#fff;color:var(--azul);cursor:pointer;font-size:19px;transition:background .25s}
.gal-arrow:hover:not(:disabled){background:var(--azul-l)}
.gal-arrow:disabled{opacity:.45;cursor:default}
.gal-track{display:flex;gap:18px;padding:5px 4vw 8px;width:max-content}
.gal-track figure{margin:0;flex:none;width:clamp(185px,19vw,280px);aspect-ratio:9/16;border-radius:20px;overflow:hidden;position:relative;background:var(--gris)}
.gal-track figure:nth-child(even){margin-top:22px}
.gal-track img,.gal-track video{width:100%;height:100%;object-fit:cover}
.gal-track img{transition:transform .9s var(--ease)}
.gal-track figure:hover img{transform:scale(1.025)}
.gal-track figcaption{position:absolute;left:12px;bottom:12px;font-size:12px;background:#0a0a0de6;color:#fff;padding:4px 10px;border-radius:999px;pointer-events:none}
.gal-track .gal-video figcaption{top:12px;bottom:auto}
.gal-scroller{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:4vw;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#a1abff var(--gris)}
.gal-scroller:focus-visible{outline-offset:-3px}
.gal-scroller figure{scroll-snap-align:start}
.portfolio-social{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:24px}
.instagram-link{color:var(--azul);min-height:48px}
.instagram-account{font-size:13px;color:var(--mut)}

/* Franja de confianza */
.trust{background:var(--gris);border-block:1px solid var(--linea)}
.trust-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:9px 28px;padding-block:15px}
.trust h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:clamp(20px,2.2vw,27px);color:var(--txt)}
.trust ul{display:flex;gap:4px 12px;flex-wrap:wrap;list-style:none;margin:0;padding:0;color:var(--mut);font-size:13px}
.trust li+li{border-left:1px solid #c4c8d8;padding-left:12px}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:60px}
.faq details{border-top:1px solid var(--linea)}
.faq details:last-child{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:12px 0;min-height:54px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-family:var(--sans);font-size:18px;font-weight:600;color:var(--txt);letter-spacing:0;line-height:1.35}
.faq summary:after{content:"+";flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--linea);font-size:22px;color:var(--azul);transition:transform .4s var(--ease),background .3s}
.faq details[open] > summary:after{transform:rotate(45deg);background:var(--azul);color:#fff;border-color:var(--azul)}
.faq details p{margin:0 0 24px;color:var(--mut);max-width:70ch}

.faq-more > summary{justify-content:flex-start;color:var(--azul);font-weight:600}
.faq-more > summary:after{order:-1}
.faq-more .less,.faq-more[open] .more{display:none}
.faq-more[open] .less{display:inline}

/* CTA final */
.cta{text-align:left;overflow:hidden}
.cta h2{font-size:clamp(48px,9vw,150px);line-height:.95;max-width:12ch}
.cta-row{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-top:40px}
.cta-btn{width:clamp(150px,16vw,210px);height:clamp(150px,16vw,210px);border-radius:50%;background:#fff;color:var(--azul);display:grid;place-items:center;text-align:center;font-weight:600;text-decoration:none;font-size:16px;line-height:1.3;position:relative;overflow:hidden;isolation:isolate}
.cta-btn:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,var(--rosa),var(--naranja));transform:scale(0);border-radius:50%;transition:transform .6s var(--ease)}
.cta-btn:hover{color:var(--negro)}.cta-btn:hover:before{transform:scale(1)}
.contact{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(50px,7vw,90px);border-top:1px solid #ffffff40}
.contact div{padding:24px 20px 0 0}
.contact b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#dfe3ff;margin-bottom:6px;font-weight:600}
.contact a,.contact span.v{font-size:17px;font-weight:600;text-decoration:none;word-break:break-word}
.contact a:hover{text-decoration:underline}

/* Footer */
.foot{background:var(--negro);color:var(--mut-d);padding:70px 0 34px;overflow:hidden}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot-top img{width:210px;height:28px;object-fit:cover}
.foot nav{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.foot nav a{text-decoration:none}.foot nav a:hover{color:#fff}
.foot-big{font-family:var(--serif);font-size:clamp(120px,30vw,440px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px #374fff;margin:40px 0 20px;letter-spacing:-.04em;user-select:none}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}

/* Extras */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:130;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--rosa),var(--naranja),var(--azul))}
.wa{position:fixed;right:20px;bottom:20px;z-index:95;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 10px 30px #0006;transition:transform .4s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:30px;height:30px;fill:#fff}
.cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;opacity:0;width:19px;height:19px;margin:-9.5px 0 0 -9.5px;border:1px solid var(--azul);border-radius:50%;transition:opacity .25s,scale .3s var(--ease)}
.cursor.link{scale:1.35}
html.has-cursor .cursor{opacity:.55}
.on-dark-cursor .cursor{border-color:#fff}

/* Estados iniciales de animación (solo con JS y sin reduced-motion) */
html.anim .rv{opacity:0;transform:translateY(40px)}
html.anim .hero h1 .w{transform:translateY(105%)}
html.anim .hero-fade{opacity:0;transform:translateY(20px)}

/* Responsive */
@media (max-width:1080px){
 .sec-head{grid-template-columns:1fr;gap:16px}
 .faq-grid{grid-template-columns:1fr;gap:24px}
}
@media (max-width:860px){
 .nav{display:none}.burger{display:block}.hdr .hdr-cta{display:none}
 .hero-sub{grid-template-columns:1fr}.hero-ctas{justify-content:flex-start}
}
@media (max-width:720px){
 body{font-size:16px}
 html{scroll-padding-top:72px}
 .hdr-in{height:66px}.logo{width:152px;height:44px}
 .hero h1{font-size:clamp(38px,11vw,72px)}
 .hero-top{gap:12px}
 .hero-ctas .btn{min-height:48px;padding:10px 13px;gap:8px;font-size:13.5px}
 .svc-list,.contact{grid-template-columns:1fr}
 .svc-btn{grid-template-columns:21px minmax(0,1fr) auto;gap:8px;padding-inline:12px}
 .svc-body{padding-inline:12px}
 .gal-head{display:block}
 .gal-tools{justify-content:space-between;margin-top:5px}
 .portfolio-social{flex-direction:column;align-items:flex-start;gap:8px}
 .instagram-link{font-size:13.5px;padding:12px 15px;gap:10px}
 .gal-track{gap:12px}
 .gal-track figure{width:clamp(162px,55vw,250px)}
 .gal-track figure:nth-child(even){margin-top:14px}
 .wa{width:46px;height:46px;right:12px;bottom:12px}
 .wa svg{width:25px;height:25px}
 .trust li+li{padding-left:8px}
 .trust ul{gap:4px 8px}
}
@media (prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
 .hero h1 em,.hero:before,.seal svg{animation:none!important}
}

/* Sello giratorio del hero */
.hero-top{position:relative}
.seal{position:absolute;right:0;top:4px;width:clamp(135px,15vw,210px);aspect-ratio:1;display:grid;place-items:center}
.seal svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.seal text{font-family:var(--sans);font-size:9.2px;font-weight:600;letter-spacing:1px;fill:var(--txt);text-transform:uppercase}
.seal b{font-family:var(--serif);font-size:clamp(40px,4vw,58px);color:#fff;background:var(--azul);width:58%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-weight:600;box-shadow:0 20px 40px -14px #374fff99}
.seal:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--rosa),var(--naranja));right:16%;top:12%}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:860px){.seal{display:none}}

.menu-open .hdr{background:transparent;border-color:transparent;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.menu-open .hdr .l-w{opacity:1}.menu-open .hdr .l-b{opacity:0}
.menu-open .wa{opacity:0;pointer-events:none}