/* Sistema de diseño de los sitios generados. Los colores y la tipografia llegan como variables (--c, --a, --font...). */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;font:400 clamp(1rem,.96rem + .2vw,1.1rem)/1.65 var(--body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:var(--dw);line-height:1.06;letter-spacing:var(--track);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:3px solid var(--a);outline-offset:3px;border-radius:4px}
.w{width:min(100% - 2.5rem,1120px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:52px;padding:.8rem 1.5rem;border-radius:var(--r-btn);font-weight:700;text-decoration:none;border:2px solid transparent;transition:transform .3s cubic-bezier(.2,.9,.3,1.2),box-shadow .3s,background-color .2s}
.btn svg{width:20px;height:20px;flex:none}
.btn-p{background:var(--a);color:var(--on-a);box-shadow:0 10px 24px -12px var(--a)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px var(--a)}
.btn-g{border-color:currentColor}
.btn-g:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.btn:active{transform:scale(.97)}

/* Cabecera */
.s-head{position:fixed;inset:0 0 auto;z-index:20;color:var(--on-hero);transition:background-color .3s,box-shadow .3s,color .3s}
.s-head.is-scrolled{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.s-head .w{display:flex;align-items:center;justify-content:space-between;height:72px;transition:height .3s}
.s-head.is-scrolled .w{height:60px}
.s-logo{display:flex;align-items:center;gap:.6rem;font:var(--dw) 1.15rem var(--display);text-decoration:none}
.s-logo i{width:34px;height:34px;border-radius:var(--r-sm);background:var(--a);color:var(--on-a);display:grid;place-items:center;font-style:normal}
.s-logo i svg{width:20px;height:20px}
.s-nav{display:flex;gap:1.6rem;align-items:center}
.s-nav a{text-decoration:none;font-weight:600;opacity:.85}
.s-nav a:hover{opacity:1}
.s-menu{display:none;background:none;border:0;color:inherit;width:44px;height:44px;cursor:pointer}
.s-menu span{display:block;width:22px;height:2px;margin:5px auto;background:currentColor;transition:transform .3s}
.s-menu[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.s-menu[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:760px){
  .s-menu{display:block}
  .s-nav{position:fixed;inset:72px 0 auto;flex-direction:column;align-items:stretch;gap:0;padding:.5rem 1.25rem 1.25rem;background:var(--bg);color:var(--ink);box-shadow:0 20px 30px -20px rgba(0,0,0,.35);transform:translateY(-8px);opacity:0;visibility:hidden;transition:.25s}
  .s-nav.is-open{transform:none;opacity:1;visibility:visible}
  .s-nav a{padding:.9rem 0;border-bottom:1px solid var(--line)}
}

/* Portada */
.s-hero{position:relative;overflow:hidden;background:var(--hero);color:var(--on-hero);padding:clamp(8rem,18vh,11rem) 0 clamp(4.5rem,10vw,7rem);isolation:isolate}
.s-hero::before,.s-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(2px);transition:transform .1s linear}
.s-hero::before{width:min(70vw,620px);aspect-ratio:1;right:-12%;top:-18%;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--a) 55%,transparent),transparent 65%);transform:translateY(calc(var(--p,0) * 120px))}
.s-hero::after{width:min(50vw,420px);aspect-ratio:1;left:-14%;bottom:-30%;border:clamp(28px,5vw,60px) solid color-mix(in srgb,var(--on-hero) 7%,transparent);transform:translateY(calc(var(--p,0) * -80px)) rotate(calc(var(--p,0) * 40deg))}
.s-hero .w{display:grid;gap:1.4rem;max-width:var(--hero-max)}
.s-eyebrow{display:inline-flex;align-items:center;gap:.5rem;width:max-content;max-width:100%;padding:.35rem .9rem;border-radius:999px;background:color-mix(in srgb,var(--on-hero) 10%,transparent);font-size:.9rem;font-weight:600}
.s-eyebrow svg{width:16px;height:16px;color:var(--a)}
.s-hero h1{font-size:clamp(2.4rem,1.4rem + 5vw,4.8rem)}
.s-hero .lede{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);max-width:40ch;opacity:.88}
.s-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.6rem}
.s-high{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:1.2rem 0 0;padding:0;list-style:none;font-size:.95rem;opacity:.9}
.s-high li{display:flex;align-items:center;gap:.45rem}
.s-high svg{width:18px;height:18px;color:var(--a)}

/* Secciones */
.s-sec{padding:clamp(4.5rem,10vw,7.5rem) 0}
.s-sec.alt{background:var(--soft)}
.s-title{display:grid;gap:.8rem;margin-bottom:clamp(2rem,5vw,3.2rem);max-width:44rem}
.s-title h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem)}
.s-title h2::after{content:"";display:block;width:56px;height:4px;margin-top:1rem;border-radius:4px;background:var(--a)}
.s-title p{color:var(--muted);font-size:1.1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.card{position:relative;padding:1.8rem;border-radius:var(--r);background:var(--card);border:1px solid var(--line);transition:transform .35s cubic-bezier(.2,.9,.3,1),box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(0,0,0,.45);border-color:color-mix(in srgb,var(--c) 35%,var(--line))}
.ico{width:52px;height:52px;border-radius:var(--r-sm);display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,var(--card));color:var(--c);margin-bottom:1.2rem}
.ico svg{width:26px;height:26px}
.card h3{font-size:1.25rem;margin-bottom:.5rem}
.card p{color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.about-txt{display:grid;gap:1.1rem;font-size:1.1rem}
.about-art{aspect-ratio:4/3;border-radius:var(--r);background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 55%,var(--a)));position:relative;overflow:hidden;color:var(--on-c);display:grid;place-items:center}
.about-art svg{width:34%;height:auto;opacity:.92}
.about-art::after{content:"";position:absolute;inset:auto -20% -40% auto;width:70%;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--a) 70%,transparent);mix-blend-mode:screen;opacity:.5}
.list{display:grid;gap:1rem;margin:0;padding:0;list-style:none}
.list li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.list .ico{margin:0;width:44px;height:44px}
.list h3{font-size:1.15rem;margin-bottom:.25rem}
.list p{color:var(--muted)}
.faq{max-width:48rem;display:grid;gap:.75rem}
.faq details{border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line);transition:border-color .3s}
.faq details[open]{border-color:color-mix(in srgb,var(--c) 40%,var(--line))}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 3rem 1.15rem 1.3rem;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.3rem;top:50%;width:10px;height:10px;border-right:2px solid;border-bottom:2px solid;transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding:0 1.3rem 1.2rem;color:var(--muted)}
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:start}
@media (max-width:820px){.contact{grid-template-columns:1fr}}
.c-list{display:grid;gap:.8rem;margin:0;padding:0;list-style:none}
.c-list a,.c-list div{display:flex;gap:.9rem;align-items:center;padding:1rem 1.2rem;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line);text-decoration:none;transition:border-color .25s,transform .25s}
.c-list a:hover{border-color:var(--c);transform:translateX(4px)}
.c-list svg{width:22px;height:22px;color:var(--c);flex:none}
.c-list small{display:block;color:var(--muted);font-size:.85rem}
.closing{background:var(--hero);color:var(--on-hero);border-radius:var(--r);padding:clamp(2.5rem,7vw,4.5rem);display:flex;flex-wrap:wrap;gap:1.6rem 3rem;align-items:center;justify-content:space-between;position:relative;overflow:hidden}
.closing h2{font-size:clamp(1.8rem,1.2rem + 2.2vw,2.8rem);max-width:20ch}
.closing p{opacity:.85;margin-top:.6rem;max-width:44ch}
.s-foot{padding:2.5rem 0 6rem;color:var(--muted);font-size:.92rem}
.s-foot .w{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}

/* Barra de contacto en celular */
.s-bar{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:15;display:none;transform:translateY(140%);transition:transform .45s cubic-bezier(.2,.9,.3,1)}
.s-bar .btn{width:100%}
.s-bar.is-on{transform:none}
@media (max-width:760px){.s-bar{display:block}}

/* Animaciones de entrada (solo con JS y sin movimiento reducido) */
.js [data-reveal]{opacity:0;transform:translateY(var(--rise,28px));transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.js [data-reveal].in{opacity:1;transform:none}
.js .s-hero [data-reveal]{--rise:18px}
html.js[data-motion=expressive] [data-reveal]{--rise:48px}
html[data-motion=reduced] *{transition:none!important}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.js [data-reveal]{opacity:1;transform:none}}