/* soylumbrera.com · estilo limpio (tipo Apple): tipografía del sistema, mucho aire, color solo donde importa. */
:root{
  --verde:#00eb75; --verde-tx:#08793f; --marina:#0e1b2c; --marina-2:#15283f;
  --tinta:#1d1d1f; --suave:#6e6e73; --fondo:#ffffff; --fondo-2:#f5f5f7; --linea:#e5e5ea;
  --wa:#25d366; --lila:#5b3ec8;
  --radio:22px; --sombra:0 1px 2px rgba(14,27,44,.04),0 12px 32px rgba(14,27,44,.07);
  --fuente:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,system-ui,sans-serif;
  --titulos:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,system-ui,sans-serif;
  --ancho:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:64px;-webkit-text-size-adjust:100%}
body{font-family:var(--fuente);color:var(--tinta);background:var(--fondo);line-height:1.5;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--titulos);letter-spacing:-.025em;line-height:1.08;font-weight:700}
h1{font-size:clamp(40px,7.4vw,80px)}
h2{font-size:clamp(32px,5vw,56px)}
h3{font-size:21px;letter-spacing:-.01em;line-height:1.25}
.c{width:min(var(--ancho),100% - 40px);margin-inline:auto}
.sec{padding:clamp(80px,12vw,140px) 0}
.sec.gris{background:var(--fondo-2)}
.cab{text-align:center;max-width:720px;margin:0 auto clamp(40px,6vw,64px)}
.eti{display:block;font-size:14px;font-weight:600;color:var(--verde-tx);margin-bottom:12px;letter-spacing:.01em}
.sub{color:var(--suave);font-size:clamp(19px,2.2vw,22px);line-height:1.4;margin-top:16px}
.verde{background:linear-gradient(100deg,var(--verde),#7cf5b6);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Barra */
.barra{position:fixed;inset:0 0 auto;z-index:30;height:56px;background:rgba(14,27,44,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.barra .c{display:flex;align-items:center;gap:28px;height:100%}
.marca{display:flex;align-items:center;gap:9px;font-family:var(--titulos);font-weight:700;font-size:19px;letter-spacing:-.02em}
.marca img{width:24px;height:24px}
.barra nav{display:flex;gap:26px;margin-left:auto;font-size:14px}
.barra nav a{opacity:.82;transition:opacity .2s}
.barra nav a:hover{opacity:1}
.barra .btn{min-height:34px;padding:0 16px;font-size:14px}
@media (max-width:860px){.barra nav{display:none}.barra .btn{margin-left:auto}}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border-radius:999px;font-weight:600;font-size:17px;border:0;cursor:pointer;transition:transform .2s,filter .2s,background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:none}
.btn svg{width:20px;height:20px;flex:none}
.btn-v{background:var(--verde);color:var(--marina)}
.btn-v:hover{filter:brightness(1.06)}
.btn-l{color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.btn-l:hover{background:rgba(255,255,255,.16)}
.btn-m{background:var(--marina);color:#fff}
.enlace{color:var(--verde-tx);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.enlace:hover{text-decoration:underline}

/* Héroe */
.heroe{position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 75% 20%,#1b3a52 0%,transparent 60%),var(--marina);color:#fff;padding:clamp(140px,20vw,200px) 0 clamp(96px,12vw,140px);text-align:center;isolation:isolate}
.heroe .astro{position:absolute;z-index:-1;width:min(820px,140vw);left:50%;top:-6%;opacity:.12;transform:translateX(-50%);animation:gira 90s linear infinite}
.heroe .brillo{position:absolute;z-index:-1;width:520px;height:520px;left:50%;top:40%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(0,235,117,.28),transparent 65%);filter:blur(30px)}
.heroe .pre{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--verde);background:rgba(0,235,117,.1);box-shadow:inset 0 0 0 1px rgba(0,235,117,.3);padding:7px 14px;border-radius:999px;margin-bottom:28px}
.heroe .pre i{width:7px;height:7px;border-radius:50%;background:var(--verde);animation:late 2s infinite}
.heroe h1{max-width:900px;margin-inline:auto}
.heroe .sub{color:rgba(255,255,255,.72);max-width:620px;margin-inline:auto;margin-top:24px}
.acciones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:clamp(72px,10vw,104px) auto 0;max-width:880px;background:rgba(255,255,255,.1);border-radius:var(--radio);overflow:hidden}
.cifras div{background:var(--marina);padding:24px 12px}
.cifras b{display:block;font-family:var(--titulos);font-size:clamp(28px,4vw,40px);letter-spacing:-.03em;line-height:1.1}
.cifras span{font-size:14px;color:rgba(255,255,255,.6)}
@media (max-width:640px){.cifras{grid-template-columns:repeat(2,1fr)}}
@keyframes gira{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes late{0%{box-shadow:0 0 0 0 rgba(0,235,117,.6)}70%,100%{box-shadow:0 0 0 8px rgba(0,235,117,0)}}

/* Tarjetas */
.rejilla{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.tar{background:var(--fondo);border-radius:var(--radio);padding:28px;box-shadow:var(--sombra);transition:transform .3s}
.sec:not(.gris) .tar{background:var(--fondo-2);box-shadow:none}
.tar:hover{transform:translateY(-3px)}
.ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;color:var(--c,var(--verde-tx));background:color-mix(in srgb,var(--c,var(--verde-tx)) 12%,transparent)}
.ico svg{width:22px;height:22px}
.tar p{color:var(--suave);font-size:16px;margin-top:6px}

/* Membresía */
.planes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
@media (max-width:720px){.planes{grid-template-columns:1fr}}
.plan{border-radius:var(--radio);padding:36px 32px;background:var(--fondo);box-shadow:var(--sombra);display:flex;flex-direction:column;gap:10px}
.plan.dest{background:var(--marina);color:#fff}
.plan.dest p{color:rgba(255,255,255,.7)}
.plan .tag{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--marina);background:var(--verde);padding:4px 10px;border-radius:999px}
.plan h3{font-size:28px}
.plan p{color:var(--suave)}
.plan .btn{margin-top:18px;align-self:flex-start}
.nota{text-align:center;color:var(--suave);font-size:15px;margin-top:28px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.nota span{display:inline-flex;align-items:center;gap:6px}
.nota svg{width:18px;height:18px;color:var(--verde-tx)}

/* Temas */
.temas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px;margin:0 auto}
.temas span{padding:12px 20px;border-radius:999px;background:var(--fondo);box-shadow:var(--sombra);font-weight:500;font-size:16px}

/* Calendario */
.cal{display:grid;gap:12px;max-width:820px;margin:0 auto}
.ses{display:grid;grid-template-columns:72px 1fr auto;gap:20px;align-items:center;padding:18px 22px;border-radius:18px;background:var(--fondo-2)}
.ses .dia{text-align:center;border-radius:14px;background:var(--fondo);padding:8px 0;box-shadow:var(--sombra)}
.ses .dia b{display:block;font-family:var(--titulos);font-size:26px;line-height:1;letter-spacing:-.02em}
.ses .dia small{font-size:12px;font-weight:600;text-transform:uppercase;color:#d62d20}
.ses h3{font-size:18px}
.ses p{color:var(--suave);font-size:15px;margin-top:2px}
.ses .chip{font-size:12px;font-weight:600;color:var(--verde-tx);background:rgba(0,235,117,.14);padding:4px 10px;border-radius:999px;white-space:nowrap}
.ses .chip.dip{color:var(--lila);background:rgba(124,92,255,.12)}
.ses[hidden]{display:none}
@media (max-width:560px){.ses{grid-template-columns:60px 1fr;gap:14px;padding:16px}.ses .chip{grid-column:2;justify-self:start}}
.mas{text-align:center;margin-top:24px}
.mas button{background:none;border:0;font:inherit;cursor:pointer}
.vacio{text-align:center;color:var(--suave)}

/* Expositores */
.expo{text-align:center}
.expo .ini{width:96px;height:96px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-family:var(--titulos);font-size:32px;font-weight:700;color:#fff;background:linear-gradient(140deg,var(--marina-2),var(--marina));box-shadow:inset 0 0 0 3px var(--verde)}
.expo .areas{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
.expo .areas span{font-size:13px;color:var(--suave);background:var(--fondo-2);padding:4px 10px;border-radius:999px}

/* Quiénes somos */
.somos{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.somos .txt p{font-size:clamp(19px,2.2vw,22px);line-height:1.5;color:var(--suave);margin-top:20px}
.somos .txt p b{color:var(--tinta);font-weight:600}
.somos .vis{aspect-ratio:1;border-radius:32px;background:radial-gradient(circle at 50% 45%,rgba(0,235,117,.35),transparent 60%),var(--marina);display:grid;place-items:center;overflow:hidden}
.somos .vis img{width:46%;filter:drop-shadow(0 0 40px rgba(0,235,117,.55))}
@media (max-width:820px){.somos{grid-template-columns:1fr}.somos .vis{display:none}}

/* Preguntas */
.faq{max-width:780px;margin:0 auto}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;font-size:19px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;border-right:2px solid var(--suave);border-bottom:2px solid var(--suave);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding:0 40px 24px 0;color:var(--suave);font-size:17px}

/* Llamado final */
.final{background:var(--marina);color:#fff;text-align:center;position:relative;overflow:hidden;isolation:isolate}
.final::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:-60%;height:120%;background:radial-gradient(closest-side,rgba(0,235,117,.25),transparent)}
.final .sub{color:rgba(255,255,255,.7);max-width:560px;margin-inline:auto}
.datos{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:44px;color:rgba(255,255,255,.72);font-size:15px}
.datos span,.datos a{display:inline-flex;align-items:center;gap:8px}
.datos a:hover{color:#fff}
.datos svg{width:18px;height:18px;color:var(--verde)}

/* Pie */
.pie{background:var(--fondo-2);color:var(--suave);font-size:13px;padding:28px 0}
.pie .c{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.pie nav{display:flex;gap:18px;margin-left:auto}
.pie a:hover{color:var(--tinta)}

/* WhatsApp flotante */
.wa{position:fixed;right:20px;bottom:20px;z-index:40;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--wa);color:#fff;box-shadow:0 8px 24px rgba(37,211,102,.4);transition:transform .2s}
.wa:hover{transform:scale(1.06)}
.wa svg{width:30px;height:30px}

/* Aparecer al hacer scroll (solo si hay JS: la clase .js la pone sitio.js) */
.js .ap{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .ap.si{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .ap{opacity:1;transform:none}*{animation:none!important;transition:none!important}}

/* Página legal */
.legal{padding:120px 0 80px}
.legal .c{max-width:760px}
.legal h1{font-size:clamp(34px,5vw,48px);margin-bottom:12px}
.legal h2{font-size:22px;margin:36px 0 10px;letter-spacing:-.01em}
.legal p,.legal li{color:#3a3a3c;margin-bottom:10px}
.legal ul{padding-left:22px}

/* Composición: la última fila de beneficios se centra; expositores en filas de 3 */
.rejilla.flex{display:flex;flex-wrap:wrap;justify-content:center}
.rejilla.flex>.tar{flex:1 1 230px;max-width:calc(25% - 12px)}
@media (max-width:1000px){.rejilla.flex>.tar{max-width:calc(50% - 8px)}}
@media (max-width:520px){.rejilla.flex>.tar{max-width:100%}}
.rejilla.tres{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
@media (max-width:520px){
  .rejilla.flex{gap:10px}
  .rejilla.flex>.tar{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding:18px;align-items:start}
  .rejilla.flex>.tar .ico{grid-row:span 2;margin:0}
  .rejilla.flex>.tar h3{font-size:18px}
  .rejilla.flex>.tar p{margin-top:2px;font-size:15px}
  .rejilla.tres{grid-template-columns:1fr 1fr;gap:10px}
  .expo{padding:20px 12px}
  .expo .ini{width:64px;height:64px;font-size:22px;margin-bottom:12px}
  .expo h3{font-size:15px}
  .expo .areas span{font-size:11px;padding:3px 8px}
}