/* ============================================================
   Fundación Emmanuel — Main stylesheet
   Extraído del mockup index.html · No editar manualmente,
   personalizar colores desde Apariencia → Personalizar.
   ============================================================ */

:root{
  color-scheme: light;
  --verde:#2FA45A; --cielo:#2BAEE0; --sol:#F4B400; --coral:#F0584E; --uva:#7C5CD6;
  --crema:#FFFDF6; --crema2:#F3F8EE; --tinta:#27304A; --tinta-suave:#5A6378;
  --display:'Quicksand','Trebuchet MS',sans-serif;
  --body:'Poppins','Segoe UI',system-ui,sans-serif;
  --r-lg:30px; --r-md:22px;
  --shadow:0 20px 44px -22px rgba(39,48,74,.30);
  --shadow-sm:0 10px 22px -12px rgba(39,48,74,.26);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; background:var(--crema); overflow-x:hidden; width:100%}
body{font-family:var(--body); font-weight:400; color:var(--tinta); background:var(--crema); line-height:1.65; overflow-x:hidden; width:100%; -webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:var(--display); font-weight:700; line-height:1.1; letter-spacing:-.4px}
a{color:inherit;text-decoration:none}
img,canvas{display:block}
.wrap{width:min(1180px,92vw); margin-inline:auto}

/* ── Botones ──────────────────────────────────────────────── */
.btn{font-family:var(--display); font-weight:600; font-size:1.02rem; border:none; cursor:pointer; padding:.82em 1.5em; border-radius:999px;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, background .2s; display:inline-flex; align-items:center; gap:.5em}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn:active{transform:translateY(-1px) scale(.99)}
.btn:focus-visible{outline:3px solid var(--uva); outline-offset:3px}
.btn--solid{background:var(--coral); color:#fff; box-shadow:0 12px 24px -10px rgba(240,88,78,.75)}
.btn--ghost{background:#fff; color:var(--tinta); box-shadow:var(--shadow-sm)}
.btn--leaf{background:var(--verde); color:#fff; box-shadow:0 12px 24px -10px rgba(47,164,90,.75)}

/* ── Nav 3D cápsula flotante ──────────────────────────────── */
:where(section,header,footer)[id]{scroll-margin-top:96px}
nav.bar{position:fixed; top:0; left:0; right:0; z-index:60; display:flex; justify-content:center;
  padding:14px clamp(12px,4vw,32px); pointer-events:none; transition:padding .45s cubic-bezier(.2,.85,.25,1)}
.cap{pointer-events:auto; width:min(1180px,100%); display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.5rem .55rem .5rem 1.1rem; border-radius:999px;
  background:rgba(255,253,246,.7); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 10px 30px -16px rgba(39,48,74,.28), inset 0 1px 0 rgba(255,255,255,.6);
  transition:width .45s cubic-bezier(.2,.85,.25,1), background .4s, box-shadow .4s}
nav.bar.scrolled{padding:10px clamp(12px,4vw,32px)}
nav.bar.scrolled .cap{width:min(940px,100%); background:rgba(255,253,246,.93); box-shadow:0 20px 44px -20px rgba(39,48,74,.45), inset 0 1px 0 rgba(255,255,255,.7)}

.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:700; font-size:1.2rem; perspective:520px}
.brand .mark{width:40px;height:40px;flex:none; transform-style:preserve-3d; animation:logoBob 4.5s ease-in-out infinite}
.brand:hover .mark{animation-duration:1.5s}
@keyframes logoBob{0%,100%{transform:rotateY(-24deg) rotateZ(-3deg)} 50%{transform:rotateY(24deg) rotateZ(3deg)}}
.brand small{display:block; font-family:var(--body); font-weight:600; font-size:.58rem; letter-spacing:.12em; color:var(--tinta-suave); text-transform:uppercase}

.nav-links{display:flex; align-items:center; gap:.45rem; perspective:700px}
.tab{position:relative; font-family:var(--display); font-weight:600; font-size:.95rem; color:var(--tinta);
  padding:.58rem 1.05rem; border-radius:15px; background:#fff; --edge:#E7E1D4; transform-style:preserve-3d; will-change:transform;
  box-shadow:0 4px 0 var(--edge), 0 8px 12px -7px rgba(39,48,74,.32);
  transition:transform .14s ease-out, box-shadow .18s, color .2s}
.tab[data-c="verde"]{--edge:#1E7B41} .tab[data-c="verde"]:hover{color:var(--verde)}
.tab[data-c="cielo"]{--edge:#1B86AE} .tab[data-c="cielo"]:hover{color:var(--cielo)}
.tab[data-c="sol"]{--edge:#C8910A}   .tab[data-c="sol"]:hover{color:#C8910A}
.tab[data-c="coral"]{--edge:#BE3C34} .tab[data-c="coral"]:hover{color:var(--coral)}
.tab[data-c="uva"]{--edge:#5E43B0}   .tab[data-c="uva"]:hover{color:var(--uva)}
.tab:hover{box-shadow:0 7px 0 var(--edge), 0 16px 22px -10px rgba(39,48,74,.4)}
.tab:active{transform:translateY(3px)!important; box-shadow:0 2px 0 var(--edge), 0 6px 9px -7px rgba(39,48,74,.35)}
.tab:focus-visible{outline:3px solid var(--uva); outline-offset:3px}
.tab.cta{background:var(--coral); color:#fff; --edge:#B0372F; padding:.58rem 1.25rem;
  box-shadow:0 5px 0 var(--edge), 0 14px 20px -9px rgba(240,88,78,.55)}
.tab.cta:hover{color:#fff; box-shadow:0 8px 0 var(--edge), 0 20px 28px -10px rgba(240,88,78,.6)}

.menu-btn{display:none; flex-direction:column; gap:5px; width:48px; height:48px; align-items:center; justify-content:center;
  background:#fff; border:none; border-radius:15px; --edge:#E7E1D4; cursor:pointer;
  box-shadow:0 4px 0 var(--edge), 0 8px 12px -7px rgba(39,48,74,.32); transition:transform .14s ease-out, box-shadow .18s}
.menu-btn:active{transform:translateY(3px); box-shadow:0 2px 0 var(--edge), 0 5px 8px -7px rgba(39,48,74,.3)}
.menu-btn span{width:22px; height:2.7px; background:var(--tinta); border-radius:3px; transition:transform .25s, opacity .25s}
.menu-btn.open span:nth-child(1){transform:translateY(7.7px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7.7px) rotate(-45deg)}

/* Menú móvil overlay */
.mobile-menu{position:fixed; inset:0; z-index:59; display:flex; flex-direction:column; justify-content:center; gap:.65rem;
  padding:6.4rem 1.3rem calc(1.6rem + env(safe-area-inset-bottom,0px));
  background:radial-gradient(680px 380px at 112% -4%, #DFF3FB, transparent 60%), radial-gradient(620px 360px at -12% 104%, #FBF4D8, transparent 60%), rgba(255,253,246,.985);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .32s ease, visibility .32s}
.mobile-menu.open{opacity:1; visibility:visible; pointer-events:auto}
.mobile-menu > *{transform:translateX(-36px) rotate(-2deg); opacity:0; transition:transform .55s cubic-bezier(.34,1.45,.5,1), opacity .45s, box-shadow .2s}
.mobile-menu.open > *{transform:none; opacity:1}
.mobile-menu.open > *:nth-child(1){transition-delay:.05s}
.mobile-menu.open > *:nth-child(2){transition-delay:.10s}
.mobile-menu.open > *:nth-child(3){transition-delay:.15s}
.mobile-menu.open > *:nth-child(4){transition-delay:.20s}
.mobile-menu.open > *:nth-child(5){transition-delay:.25s}
.mobile-menu.open > *:nth-child(6){transition-delay:.30s}
.mm-item{display:flex; align-items:center; gap:.9rem; padding:.78rem 1rem; border-radius:20px; background:#fff; color:var(--tinta); text-decoration:none; font-family:var(--display); font-weight:600; font-size:1.25rem; box-shadow:0 5px 0 var(--mcd,#ddd), 0 12px 20px -10px rgba(39,48,74,.32)}
.mm-item:active{transform:translateY(3px) scale(.99); box-shadow:0 2px 0 var(--mcd,#ddd), 0 6px 10px -8px rgba(39,48,74,.3)}
.mm-ic{flex:none; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:1.4rem; background:var(--mc); box-shadow:inset 0 -4px 0 rgba(0,0,0,.12); animation:mmIcon 2.6s ease-in-out infinite}
@keyframes mmIcon{50%{transform:translateY(-4px) rotate(-6deg)}}
.mobile-menu > *:nth-child(1) .mm-ic{animation-delay:0s}
.mobile-menu > *:nth-child(2) .mm-ic{animation-delay:.25s}
.mobile-menu > *:nth-child(3) .mm-ic{animation-delay:.5s}
.mobile-menu > *:nth-child(4) .mm-ic{animation-delay:.75s}
.mobile-menu > *:nth-child(5) .mm-ic{animation-delay:1s}
.mm-close{position:absolute; top:1.15rem; right:1.15rem; width:52px; height:52px; border-radius:50%; border:none; background:var(--coral); color:#fff; font-size:1.45rem; line-height:1; cursor:pointer; display:grid; place-items:center; box-shadow:0 12px 24px -8px rgba(240,88,78,.75); transform:none!important; opacity:1!important; transition:transform .28s cubic-bezier(.34,1.6,.5,1); animation:closePulse 2.2s ease-in-out infinite}
.mm-close:hover{transform:rotate(90deg) scale(1.08)!important}
.mm-close:active{transform:rotate(90deg) scale(.9)!important}
@keyframes closePulse{50%{box-shadow:0 16px 32px -8px rgba(240,88,78,.9)}}
.mm-tx{flex:1}
.mm-ar{font-size:1.3rem; color:var(--mc); transition:transform .2s}
.mm-item:active .mm-ar{transform:translateX(5px)}
.mm-cta{display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:.5rem; padding:1.05rem; border-radius:999px; background:var(--coral); color:#fff; text-decoration:none; font-family:var(--display); font-weight:600; font-size:1.2rem; box-shadow:0 7px 0 #B0372F, 0 16px 26px -10px rgba(240,88,78,.6)}
.mm-cta:active{transform:translateY(3px); box-shadow:0 3px 0 #B0372F, 0 8px 14px -8px rgba(240,88,78,.5)}
@media(min-width:861px){ .mobile-menu{display:none} }
@media(max-width:860px){ .nav-links{display:none} .menu-btn{display:flex} }

/* ── Hero ─────────────────────────────────────────────────── */
.hero{position:relative; width:100%; height:100vh; height:100svh; display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(180deg, #BFE3F6 0%, #D6EEFA 34%, #E9F6FD 60%, #FBF9F1 100%)}
#tree{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:auto; touch-action:pan-y; cursor:grab; display:block}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; border:none; outline:none; pointer-events:none; background:transparent}
.hero-sky{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.cloud-layer{position:absolute; left:0; right:0; pointer-events:none; background-repeat:repeat-x; will-change:background-position}
.cl1{top:4%; height:42%; opacity:.7; background-size:520px 100%; animation:drift1 95s linear infinite;
  background-image:
    radial-gradient(70px 34px at 70px 60%, #fff 0%, rgba(255,255,255,.7) 50%, transparent 75%),
    radial-gradient(100px 44px at 220px 50%, #fff 0%, rgba(255,255,255,.72) 48%, transparent 75%),
    radial-gradient(60px 30px at 360px 64%, #fff 0%, rgba(255,255,255,.65) 52%, transparent 77%)}
.cl2{top:16%; height:50%; opacity:.96; background-size:660px 100%; animation:drift2 62s linear infinite;
  background-image:
    radial-gradient(120px 60px at 95px 58%, #fff 0%, rgba(255,255,255,.9) 46%, transparent 73%),
    radial-gradient(80px 46px at 180px 50%, #fff 0%, rgba(255,255,255,.85) 50%, transparent 75%),
    radial-gradient(155px 72px at 300px 64%, #fff 0%, rgba(255,255,255,.92) 46%, transparent 73%),
    radial-gradient(95px 52px at 500px 55%, #fff 0%, rgba(255,255,255,.86) 50%, transparent 75%)}
@keyframes drift1{from{background-position-x:0}to{background-position-x:-520px}}
@keyframes drift2{from{background-position-x:0}to{background-position-x:-660px}}
.cl1{animation-duration:80s!important}
.cl2{animation-duration:55s!important}
.hero::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, var(--crema) 15%, rgba(255,253,246,.5) 38%, transparent 60%)}
.hero-in{position:relative; z-index:3; padding:5rem 0; pointer-events:none}
.hero-in :where(a,button){pointer-events:auto}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; background:#fff; color:var(--verde); font-family:var(--display); font-weight:600; font-size:.82rem; letter-spacing:.02em; padding:.45rem .95rem; border-radius:999px; box-shadow:var(--shadow-sm); margin-bottom:1.3rem}
.eyebrow .dot{width:9px;height:9px;border-radius:50%;background:var(--coral)}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.5rem); max-width:14ch}
.hero h1 .hl{position:relative; display:inline-block}
.hero h1 .hl::after{content:""; position:absolute; left:-3%; right:-3%; bottom:.07em; height:.34em; background:var(--sol); opacity:.5; border-radius:6px; z-index:-1; transform:rotate(-1.4deg)}
.hero p.lead{font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--tinta-suave); max-width:44ch; margin:1.3rem 0 2rem; font-weight:400}
.hero .cta-row{display:flex; gap:.8rem; flex-wrap:wrap}
.hero-hints{margin-top:2.4rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap}
.gyro-btn{display:none; align-items:center; gap:.5rem; font-family:var(--display); font-weight:600; font-size:.9rem; background:#fff; color:var(--tinta); border:none; border-radius:999px; padding:.6rem 1.05rem; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .18s}
.gyro-btn:hover{transform:translateY(-2px)}
.gyro-btn:active{transform:scale(.97)}
@media (pointer: coarse){ .gyro-btn{display:inline-flex} }
.scroll-hint{display:inline-flex; align-items:center; gap:.6rem; color:var(--tinta-suave); font-weight:500; font-size:.9rem; background:rgba(255,253,246,.7); padding:.35rem .7rem .35rem .35rem; border-radius:999px}
.scroll-hint .arr{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--shadow-sm); animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}

/* Hero móvil */
.hero-copy{display:contents}
.copy-close{display:none}
.hero-toggle{display:none}
@media(max-width:860px){
  .hero{align-items:stretch; height:100dvh}
  .hero::after{background:linear-gradient(180deg, transparent 52%, rgba(255,253,246,.32) 78%, transparent 100%)}
  .hero-in{position:absolute; inset:0; width:auto; padding:0 0 calc(1.2rem + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; justify-content:flex-end; align-items:center; pointer-events:none}
  .hero-hints{margin:0; display:flex; flex-direction:column; align-items:center; gap:.6rem; z-index:6}
  .hero-toggle{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--display); font-weight:600; font-size:1rem; color:#fff; background:var(--coral); border:none; border-radius:999px; padding:.85rem 1.5rem; box-shadow:0 14px 26px -10px rgba(240,88,78,.75); cursor:pointer; animation:sBob 3s ease-in-out infinite}
  .hero-copy{display:block; position:fixed; left:0; right:0; bottom:0; z-index:58; background:rgba(255,253,246,.98); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-radius:28px 28px 0 0; box-shadow:0 -24px 54px -22px rgba(39,48,74,.45); padding:1.9rem 1.4rem calc(1.6rem + env(safe-area-inset-bottom,0px)); transform:translateY(115%); transition:transform .42s cubic-bezier(.2,.85,.25,1); pointer-events:auto; max-height:84vh; overflow-y:auto}
  .hero.info-open .hero-copy{transform:none}
  .hero-copy::before{content:""; display:block; width:44px; height:5px; border-radius:3px; background:rgba(39,48,74,.18); margin:-.7rem auto 1.1rem}
  .copy-close{display:flex; align-items:center; justify-content:center; position:absolute; top:.9rem; right:1rem; width:38px; height:38px; border-radius:50%; border:none; background:#fff; box-shadow:var(--shadow-sm); font-size:1rem; color:var(--tinta); cursor:pointer}
  .hero-copy .eyebrow{margin-bottom:.9rem}
  .hero h1{font-size:clamp(1.9rem,7.5vw,2.4rem); max-width:none}
  .hero p.lead{font-size:1rem; margin:.9rem 0 1.3rem; max-width:none}
  .hero-copy .cta-row{flex-direction:column; gap:.6rem}
  .hero-copy .cta-row .btn{width:100%; justify-content:center}
  .hero-toggle{margin-bottom:3rem}
  .gyro-btn{position:absolute; right:.7rem; bottom:calc(.85rem + env(safe-area-inset-bottom,0px)); width:46px; height:46px; padding:0; gap:0; justify-content:center; border-radius:50%; font-size:1.3rem; z-index:7; box-shadow:0 8px 18px -8px rgba(39,48,74,.4)}
  .gyro-btn .gt{display:none}
  .scroll-hint{position:absolute; left:.7rem; bottom:calc(.95rem + env(safe-area-inset-bottom,0px)); max-width:58vw; font-size:.74rem; line-height:1.25; padding:.42rem .72rem; border-radius:14px; z-index:7; background:rgba(255,253,246,.85); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 8px 18px -10px rgba(39,48,74,.35)}
  .scroll-hint .arr{display:none}
  .hero{align-items:flex-start}
  .hero-in{padding:5.5rem 0 3rem}
  .hero-hints{margin-top:1.8rem}
}

/* ── Secciones genéricas ──────────────────────────────────── */
.sec{position:relative; padding:6rem 0}
.sec-head{text-align:center; max-width:42rem; margin:0 auto 3.2rem}
.kicker{font-family:var(--display); font-weight:600; color:var(--coral); font-size:1rem; margin-bottom:.4rem}
.sec-head h2{font-size:clamp(2rem,4.4vw,2.9rem)}
.sec-head p{color:var(--tinta-suave); font-weight:400; margin-top:.8rem; font-size:1.06rem}
@media(max-width:640px){ .sec{padding:4.2rem 0} .sec-head{margin-bottom:2.4rem} }
.wave{display:block; width:100%; height:62px; margin-bottom:-1px}

/* ── Galería polaroids ────────────────────────────────────── */
.gallery{background:var(--crema)}
.gal-rows{display:flex; flex-direction:column; gap:1rem; overflow-x:auto; overflow-y:hidden; padding:1.6rem 0 1rem;
  -webkit-mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  cursor:grab; scrollbar-width:none; -ms-overflow-style:none}
.gal-rows::-webkit-scrollbar{display:none}
.gal-rows:active{cursor:grabbing}
.gal-track{display:flex; width:max-content; will-change:transform}
#galA{animation:marqL 46s linear infinite}
#galB{animation:marqR 62s linear infinite}
@media(hover:hover){ .gal-rows:hover .gal-track{animation-play-state:paused} }
@keyframes marqL{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@keyframes marqR{from{transform:translateX(-50%)} to{transform:translateX(0)}}
.polas{flex:none; width:clamp(150px,21vw,216px); margin-right:1.1rem; background:#fff; border:none; cursor:pointer; padding:10px 10px 0; border-radius:18px;
  box-shadow:var(--shadow); transform:rotate(var(--rot,0deg)); transform-origin:center;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s}
.polas:hover{transform:rotate(0deg) translateY(-10px) scale(1.05); box-shadow:0 28px 52px -20px rgba(39,48,74,.45); z-index:3}
.polas:focus-visible{outline:3px solid var(--uva); outline-offset:3px}
.pola-img{display:grid; place-items:center; aspect-ratio:4/3; border-radius:12px; overflow:hidden}
.pola-emoji{font-size:clamp(2.4rem,6vw,3.2rem); line-height:1; filter:drop-shadow(0 5px 7px rgba(0,0,0,.14))}
.pola-cap{display:block; font-family:var(--display); font-weight:600; font-size:.95rem; color:var(--tinta); text-align:center; padding:.6rem .2rem .75rem}
.gal-note{color:var(--tinta-suave); font-weight:400; font-size:.88rem; text-align:center; margin-top:1.2rem}

/* Lightbox */
.lb{position:fixed; inset:0; z-index:90; display:none; place-items:center; padding:5vw;
  background:rgba(39,48,74,.74); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.lb.open{display:grid}
.lb-card{position:relative; width:min(560px,92vw); background:#fff; border-radius:24px; padding:14px 14px 0;
  box-shadow:0 40px 80px -28px rgba(0,0,0,.6); transform:scale(.92); transition:transform .3s cubic-bezier(.2,.9,.3,1)}
.lb.open .lb-card{transform:scale(1)}
.lb-img{display:grid; place-items:center; aspect-ratio:4/3; border-radius:16px; overflow:hidden}
.lb-img .e{font-size:clamp(4rem,16vw,6.5rem); line-height:1}
.lb-cap{font-family:var(--display); font-weight:600; font-size:1.15rem; text-align:center; padding:.9rem; color:var(--tinta)}
.lb-x{position:absolute; top:-16px; right:-16px; width:46px;height:46px; border-radius:50%; border:none; background:#fff; box-shadow:var(--shadow); cursor:pointer; font-size:1.2rem; color:var(--tinta)}
.lb-x:active{transform:scale(.94)}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:50px;height:50px; border-radius:50%; border:none; background:rgba(255,255,255,.96); box-shadow:var(--shadow); cursor:pointer; font-size:1.6rem; color:var(--tinta); display:grid; place-items:center; line-height:1}
.lb-nav:active{transform:translateY(-50%) scale(.94)}
.lb-prev{left:-24px} .lb-next{right:-24px}
@media(max-width:600px){ .lb-prev{left:8px} .lb-next{right:8px} .lb-x{top:8px; right:8px} }

/* ── Equipo ───────────────────────────────────────────────── */
.sec--equipo{background:var(--crema2)}
.orbit-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center}
@media(max-width:860px){ .orbit-grid{grid-template-columns:1fr; gap:2.4rem} }
.orbit-copy h2{font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:1rem}
.orbit-copy p{color:var(--tinta-suave); font-weight:400; font-size:1.06rem; max-width:42ch}
.orbit-copy .tag-list{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem}
.orbit-copy .tag{background:#fff; padding:.5rem 1rem; border-radius:999px; font-family:var(--display); font-weight:600; font-size:.9rem; box-shadow:var(--shadow-sm)}
.orbit-stage{--stage:min(420px,84vw); position:relative; width:var(--stage); height:var(--stage); margin-inline:auto}
.orbit-stage svg.links{position:absolute; inset:0; width:100%; height:100%}
.node{position:absolute; left:50%; top:50%; --node:calc(var(--stage)*0.255); --off:calc(var(--stage)*0.357);
  width:var(--node); height:var(--node); margin:calc(var(--node)/-2); border-radius:24px; display:grid; place-items:center; text-align:center; background:#fff; box-shadow:var(--shadow); padding:.4rem; font-family:var(--display); font-weight:600; font-size:clamp(.7rem, calc(var(--stage)*0.034), .92rem); transition:transform .25s}
.node .ic{width:calc(var(--stage)*0.085); height:calc(var(--stage)*0.085); margin-bottom:.2rem}
.node.n1{transform:translateY(calc(var(--off)*-1))}
.node.n2{transform:translateX(var(--off))}
.node.n3{transform:translateY(var(--off))}
.node.n4{transform:translateX(calc(var(--off)*-1))}
.node.n1:hover{transform:translateY(calc(var(--off)*-1)) scale(1.06)}
.node.n2:hover{transform:translateX(var(--off)) scale(1.06)}
.node.n3:hover{transform:translateY(var(--off)) scale(1.06)}
.node.n4:hover{transform:translateX(calc(var(--off)*-1)) scale(1.06)}
.core{position:absolute; left:50%; top:50%; --c:calc(var(--stage)*0.3); width:var(--c); height:var(--c); margin:calc(var(--c)/-2); border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%, #fff, #EEF5E6); box-shadow:var(--shadow); text-align:center}
.core b{font-family:var(--display); font-weight:700; font-size:clamp(.85rem, calc(var(--stage)*0.045), 1.05rem); line-height:1.1}
.core span{font-size:.7rem; color:var(--tinta-suave); font-weight:500}
.orbit-stage .links line{animation:dashFlow 1.1s linear infinite}
@keyframes dashFlow{to{stroke-dashoffset:-24}}
.orbit-stage .node{cursor:pointer}

/* ── Servicios (flip cards) ───────────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem}
@media(max-width:980px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media(max-width:540px){ .cards{grid-template-columns:1fr} }
.flip{perspective:1200px; min-height:336px; cursor:pointer; background:none; border:none; text-align:left; font:inherit; padding:0}
.flip:focus-visible{outline:3px solid var(--uva); outline-offset:4px; border-radius:var(--r-lg)}
.flip-in{position:relative; width:100%; height:100%; min-height:336px; transition:transform .6s cubic-bezier(.4,.2,.2,1); transform-style:preserve-3d}
.flip.is-flip .flip-in{transform:rotateY(180deg)}
.face{position:absolute; inset:0; border-radius:var(--r-lg); padding:1.6rem 1.4rem; backface-visibility:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow)}
.face.front{background:#fff}
.face.front .badge{width:64px;height:64px;border-radius:20px; display:grid; place-items:center; margin-bottom:1rem}
.face.front .badge svg{width:36px;height:36px}
.face.front h3{font-size:1.38rem; margin-bottom:.4rem}
.face.front .one{color:var(--tinta-suave); font-weight:400; font-size:.97rem; flex:1; line-height:1.55}
.face.front .more{margin-top:1rem; font-family:var(--display); font-weight:600; font-size:.9rem; display:inline-flex; align-items:center; gap:.4rem}
.face.back{transform:rotateY(180deg); color:#fff; justify-content:center}
.face.back h3{font-size:1.28rem; margin-bottom:.6rem; color:#fff}
.face.back ul{list-style:none; display:flex; flex-direction:column; gap:.5rem; font-weight:500; font-size:.95rem; overflow-y:auto; max-height:190px; padding-right:6px; margin-right:-6px}
.face.back ul::-webkit-scrollbar{width:5px}
.face.back ul::-webkit-scrollbar-thumb{background:rgba(255,255,255,.45); border-radius:3px}
.face.back li{display:flex; gap:.5rem; align-items:flex-start; font-size:.88rem; line-height:1.4}
.face.back li::before{content:"✦"; opacity:.85}
.face.back .turn{margin-top:1.1rem; font-size:.82rem; opacity:.9; font-weight:500}

/* ── Juego ────────────────────────────────────────────────── */
.sec--game{background:radial-gradient(900px 500px at 90% 0%, #E7F6FB 0%, transparent 60%), var(--crema2)}
.game-shell{max-width:760px; margin-inline:auto}
.game-frame{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); background:linear-gradient(180deg,#CFEBF7 0%,#E8F7DC 78%,#D6EFB8 100%); aspect-ratio:16/10}
@media(max-width:540px){ .game-frame{aspect-ratio:4/5} }
#game{width:100%; height:100%; touch-action:none; cursor:grab}
#game:active{cursor:grabbing}
.game-hud{position:absolute; top:.9rem; left:.9rem; right:.9rem; display:flex; justify-content:space-between; pointer-events:none}
.pill{background:rgba(255,255,255,.92); border-radius:999px; padding:.4rem .9rem; font-family:var(--display); font-weight:600; box-shadow:var(--shadow-sm)}
.game-over{position:absolute; inset:0; display:grid; place-items:center; background:rgba(39,48,74,.42); backdrop-filter:blur(3px); transition:opacity .3s}
.game-over .panel{background:#fff; border-radius:var(--r-md); padding:1.8rem 2rem; text-align:center; box-shadow:var(--shadow); max-width:88%}
.game-over h3{font-size:1.55rem; margin-bottom:.3rem}
.game-over p{color:var(--tinta-suave); font-weight:400; margin-bottom:1.1rem}
.hidden{opacity:0; pointer-events:none}
.game-note{text-align:center; color:var(--tinta-suave); font-weight:400; font-size:.92rem; margin-top:1rem}

/* ── Pasos ────────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; counter-reset:s}
@media(max-width:760px){ .steps{grid-template-columns:1fr; gap:1.8rem} }
.step{position:relative; background:#fff; border-radius:var(--r-lg); padding:2.4rem 1.6rem 1.6rem; box-shadow:var(--shadow); counter-increment:s}
.step::before{content:counter(s); position:absolute; top:-22px; left:1.6rem; width:48px;height:48px; border-radius:16px; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:1.4rem; color:#fff; box-shadow:var(--shadow-sm)}
.step:nth-child(1)::before{background:var(--cielo)}
.step:nth-child(2)::before{background:var(--sol)}
.step:nth-child(3)::before{background:var(--coral)}
.step h3{font-size:1.28rem; margin-bottom:.4rem}
.step p{color:var(--tinta-suave); font-weight:400}
.step{transition:transform .28s cubic-bezier(.34,1.4,.64,1), box-shadow .28s}
.step:hover{transform:translateY(-8px) rotate(-1deg); box-shadow:0 30px 54px -24px rgba(39,48,74,.4)}
.step::before{transition:transform .28s cubic-bezier(.34,1.6,.64,1)}
.step:hover::before{transform:rotate(-8deg) scale(1.08)}

/* ── Footer ───────────────────────────────────────────────── */
footer{background:var(--tinta); color:#fff; padding:4.5rem 0 2rem}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem}
@media(max-width:760px){ .foot-grid{grid-template-columns:1fr; gap:1.8rem} }
footer .brand{color:#fff}
footer .brand small{color:rgba(255,255,255,.6)}
.foot-grid > div > p{color:rgba(255,255,255,.72); font-weight:400; margin-top:1rem; max-width:34ch}
.foot-col h4{font-family:var(--display); font-weight:600; font-size:1.05rem; margin-bottom:1rem}
.foot-col a, .foot-col span{display:block; color:rgba(255,255,255,.72); font-weight:400; margin-bottom:.6rem; transition:color .2s}
.foot-col a:hover{color:var(--sol)}
.foot-bottom{margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.5); font-size:.85rem; font-weight:400; text-align:center}

/* ── Extras UI ────────────────────────────────────────────── */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.blob{position:absolute; border-radius:50%; filter:blur(40px); opacity:.5; z-index:0; pointer-events:none}
.ctrail{position:fixed; width:11px;height:11px; border-radius:50%; pointer-events:none; z-index:80; transform:translate(-50%,-50%); opacity:.85; transition:opacity .6s ease, transform .6s ease}
.conf{position:fixed; z-index:95; pointer-events:none; border-radius:2px; will-change:transform,opacity; animation:confPop var(--t,1.1s) cubic-bezier(.2,.6,.3,1) forwards}
@keyframes confPop{0%{transform:translate(-50%,-50%) rotate(0) scale(1); opacity:1} 100%{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(.4); opacity:0}}
.surprise{position:fixed; right:18px; bottom:18px; z-index:56; width:58px; height:58px; border-radius:50%; border:none; cursor:pointer; font-size:1.6rem; line-height:1; background:#fff; box-shadow:var(--shadow); transition:transform .2s; animation:sBob 3s ease-in-out infinite}
.surprise:hover{transform:scale(1.12) rotate(8deg)} .surprise:active{transform:scale(.94)}
@keyframes sBob{50%{transform:translateY(-6px)}}
.balloon{position:fixed; bottom:-130px; width:44px; height:56px; border-radius:50% 50% 48% 48%; cursor:pointer; z-index:54; pointer-events:auto; box-shadow:inset -6px -8px 12px rgba(0,0,0,.12); will-change:transform; animation:floatUp var(--up,6s) ease-in forwards}
.balloon::after{content:""; position:absolute; left:50%; bottom:-8px; width:2px; height:11px; background:rgba(0,0,0,.22); transform:translateX(-50%)}
@keyframes floatUp{to{transform:translate(var(--sway,0),calc(-100vh - 200px))}}
.vine{position:fixed; left:6px; top:0; width:26px; height:100vh; z-index:40; pointer-events:none}
@media(max-width:860px){ .vine{display:none} .surprise{right:14px; bottom:14px; width:52px; height:52px; font-size:1.4rem} }

/* ══════════════════════════════════════════════════════════
   BLOG — sección portada, archivo, single
   ══════════════════════════════════════════════════════════ */

/* Sección portada */
.blog-preview{background:var(--crema2); padding:100px 0 80px}
.blog-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:28px; margin-top:48px}
.blog-more{text-align:center; margin-top:48px}

/* Tarjeta blog */
.blog-card{background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s}
.blog-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.blog-card__link{display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none}
.blog-card__img{aspect-ratio:16/9; overflow:hidden; background:var(--crema2)}
.blog-card__img img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.blog-card:hover .blog-card__img img{transform:scale(1.04)}
.blog-card__img--placeholder{display:flex; align-items:center; justify-content:center}
.blog-card__body{padding:24px; display:flex; flex-direction:column; gap:10px; flex:1}
.blog-card__cat{font-family:var(--display); font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase}
.blog-card__title{font-family:var(--display); font-size:1.15rem; font-weight:700; line-height:1.3; color:var(--tinta)}
.blog-card__excerpt{font-size:.93rem; color:var(--tinta-suave); flex:1}
.blog-card__meta{font-size:.82rem; color:var(--tinta-suave); margin-top:auto}

/* Archive */
.archive-hero{padding:120px 0 48px; text-align:center}
.archive-hero h1{font-size:clamp(2rem,5vw,3.2rem); margin-top:8px}
.archive-content{padding-bottom:80px}
.archive-pagination{margin-top:56px; display:flex; justify-content:center}
.archive-pagination .nav-links{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.archive-pagination a,.archive-pagination span{padding:.5em 1em; border-radius:12px; background:#fff; box-shadow:var(--shadow-sm); font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--tinta); transition:background .2s, color .2s}
.archive-pagination .current{background:var(--verde); color:#fff}
.archive-pagination a:hover{background:var(--verde); color:#fff}
.archive-empty{text-align:center; padding:80px 0; color:var(--tinta-suave); font-size:1.1rem}

/* Single post */
.single-post{padding:120px 0 80px; max-width:780px}
.entry__header{margin-bottom:32px}
.entry__cat{font-family:var(--display); font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; display:inline-block; margin-bottom:12px}
.entry__title{font-size:clamp(1.8rem,4.5vw,2.8rem); line-height:1.15; margin-bottom:16px}
.entry__meta{font-size:.9rem; color:var(--tinta-suave); display:flex; gap:8px; align-items:center}
.entry__thumb{margin-bottom:40px; border-radius:var(--r-lg); overflow:hidden}
.entry__thumb img{width:100%; height:auto; display:block}
.entry__content{font-size:1.06rem; line-height:1.8; color:var(--tinta)}
.entry__content h2,.entry__content h3{font-family:var(--display); margin:2em 0 .6em}
.entry__content p{margin-bottom:1.2em}
.entry__content ul,.entry__content ol{padding-left:1.6em; margin-bottom:1.2em}
.entry__content img{max-width:100%; border-radius:var(--r-md); margin:1.4em 0}
.entry__content blockquote{border-left:4px solid var(--verde); padding:1em 1.4em; background:var(--crema2); border-radius:0 var(--r-md) var(--r-md) 0; margin:1.6em 0; font-style:italic; color:var(--tinta-suave)}
.entry__tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:40px}
.entry__tag{background:var(--crema2); padding:.35em .9em; border-radius:999px; font-size:.85rem; font-family:var(--display); font-weight:600; color:var(--tinta-suave); transition:background .18s, color .18s}
.entry__tag:hover{background:var(--verde); color:#fff}

/* Navegación anterior/siguiente */
.entry-nav{display:flex; gap:16px; margin-top:56px; padding-top:40px; border-top:1px solid rgba(39,48,74,.1)}
.entry-nav__link{flex:1; padding:20px 24px; background:#fff; border-radius:var(--r-md); box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s}
.entry-nav__link:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.entry-nav__link--next{text-align:right}
.entry-nav__dir{display:block; font-size:.78rem; color:var(--tinta-suave); font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px}
.entry-nav__tit{font-family:var(--display); font-weight:700; font-size:.97rem; color:var(--tinta); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* ══════════════════════════════════════════════════════════
   CONTACTO
   ══════════════════════════════════════════════════════════ */
.contact-page{position:relative; overflow:hidden; background:linear-gradient(180deg, #dff5ff 0%, #f7fff0 54%, #fff9eb 100%)}
.contact-page::before{content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(circle at 15% 10%, rgba(255,255,255,.92), rgba(255,255,255,0) 26%),
  radial-gradient(circle at 78% 12%, rgba(125,200,255,.22), rgba(125,200,255,0) 24%),
  radial-gradient(circle at 50% 68%, rgba(127,214,125,.2), rgba(127,214,125,0) 32%),
  radial-gradient(circle at 50% 90%, rgba(255,255,255,.6), rgba(255,255,255,0) 24%)}
.contact-stage{position:relative; z-index:1; padding:72px 0 96px}
.contact-stage__scene{position:relative; min-height:560px; border-radius:40px; overflow:hidden; background:linear-gradient(180deg, #AEE3FA 0%, #C9EEEA 55%, #BFE9C2 100%); box-shadow:0 34px 80px -38px rgba(39,48,74,.36); border:1px solid rgba(39,48,74,.06)}
.contact-stage__scene::after{content:""; position:absolute; inset:auto 10% 6% 10%; height:14%; border-radius:50%; background:radial-gradient(ellipse at center, rgba(20,40,25,.28), rgba(20,40,25,0) 72%); filter:blur(18px); opacity:.5; pointer-events:none}
@media(max-width:640px){.contact-stage__scene{min-height:280px}}
#contactWorld{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none}
.contact-stage__intro{max-width:640px; margin:0 0 28px}
.contact-stage__hint{position:absolute; right:20px; bottom:18px; z-index:3; display:inline-flex; align-items:center; gap:10px; padding:.62em .95em; border-radius:999px; background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:var(--tinta); box-shadow:0 12px 28px -20px rgba(39,48,74,.28); font-family:var(--display); font-size:.84rem; font-weight:700}
.contact-stage__hint-dot{width:10px; height:10px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 6px rgba(240,88,78,.12)}
.contact-stage__content{display:grid; grid-template-columns:320px minmax(0,1fr); gap:28px; position:relative; z-index:2}
.contact-stage__side{display:flex; flex-direction:column; gap:28px; align-self:start; position:sticky; top:104px}
@media(max-width:860px){
  .contact-stage__content{grid-template-columns:1fr; padding-top:296px}
  .contact-stage__side{position:static; top:auto; display:contents}
  .contact-stage__scene{position:fixed; top:100px; left:12px; right:12px; z-index:45; min-height:0; height:250px; border-radius:28px; transition:top .32s cubic-bezier(.2,.8,.2,1), height .32s cubic-bezier(.2,.8,.2,1)}
  .contact-stage__hint{display:none}

  body.is-typing-contact .contact-stage__scene{top:var(--focus-scene-top, 10dvh); height:var(--focus-scene-height, 42dvh); z-index:200}
}
@media(max-width:400px){
  .contact-stage__content{padding-top:262px}
  .contact-stage__scene{height:218px}
}
.contact-card{background:rgba(255,255,255,.76); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(39,48,74,.07); border-radius:28px; box-shadow:0 18px 44px -30px rgba(39,48,74,.24); padding:26px}
.contact-info h2,.contact-paper__header h2{font-size:1.45rem; margin-bottom:18px; font-family:var(--display)}
.contact-stage .kicker,.contact-paper__eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--verde); background:rgba(47,164,90,.1); padding:.4em .95em; border-radius:999px; margin-bottom:14px}
.contact-stage h1{font-size:clamp(2.15rem,5vw,3.5rem); line-height:1.03; margin:0 0 14px}
.contact-hero__lead,.contact-paper__copy{font-size:1.02rem; line-height:1.75; color:var(--tinta-suave)}
.contact-info__list{list-style:none; display:flex; flex-direction:column; gap:18px; margin-bottom:32px}
.contact-info__list li{display:flex; align-items:flex-start; gap:14px; font-size:.98rem; line-height:1.5}
.contact-info__list li a{color:var(--verde); font-weight:600}
.contact-info__list li a:hover{text-decoration:underline}
.ci-icon{font-size:1.3rem; flex-shrink:0; margin-top:1px}

.contact-social{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px}
.contact-social__btn{display:inline-flex; align-items:center; gap:8px; padding:.6em 1.2em; border-radius:999px; background:#fff; box-shadow:var(--shadow-sm); font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--tinta); transition:transform .18s, box-shadow .18s, background .18s}
.contact-social__btn:hover{transform:translateY(-2px); box-shadow:var(--shadow); background:var(--verde); color:#fff}

.contact-paper{position:relative; padding:26px; border-radius:34px; background:linear-gradient(180deg, rgba(255,253,246,.72), rgba(255,247,227,.72)); -webkit-backdrop-filter:blur(18px) saturate(1.15); backdrop-filter:blur(18px) saturate(1.15); box-shadow:0 40px 90px -42px rgba(39,48,74,.4), 0 2px 0 rgba(255,255,255,.6) inset; border:1px solid rgba(255,255,255,.55); overflow:hidden}
.contact-paper::before{content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,0) 34%); pointer-events:none}
.contact-paper::after{content:""; position:absolute; inset:14px 14px auto auto; width:86px; height:86px; background:linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,0)); clip-path:polygon(0 0, 100% 0, 100% 100%); opacity:.7; pointer-events:none}
.contact-paper__fold{position:absolute; top:0; right:0; width:92px; height:92px; background:linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,0)); clip-path:polygon(0 0, 100% 0, 100% 100%); opacity:.75}
.contact-paper__header{position:relative; z-index:1; margin-bottom:22px}
.contact-paper__copy{max-width:58ch}
.contact-paper__map{margin-top:24px}
.contact-map{border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-sm)}
.contact-map iframe{display:block; width:100%}

/* Formulario */
.contact-form{display:flex; flex-direction:column; gap:18px; position:relative; z-index:1}
.cf-row--2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media(max-width:560px){.cf-row--2{grid-template-columns:1fr}}
.cf-field{display:flex; flex-direction:column; gap:6px}
.cf-label{font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--tinta)}
.cf-field input,.cf-field textarea{padding:.95em 1.1em; border:2px solid rgba(39,48,74,.08); border-radius:18px; font-family:var(--body); font-size:1rem; color:var(--tinta); background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s, box-shadow .22s, background .22s; outline:none; resize:vertical; box-shadow:0 10px 24px -18px rgba(39,48,74,.28)}
.cf-field input:hover,.cf-field textarea:hover{transform:translateY(-1px)}
.cf-field input:focus,.cf-field textarea:focus{border-color:var(--verde); box-shadow:0 0 0 4px rgba(47,164,90,.16), 0 18px 32px -22px rgba(47,164,90,.36); background:#fff; transform:translateY(-2px)}
.contact-notice{padding:14px 20px; border-radius:14px; font-weight:600; font-size:.95rem; margin-bottom:4px}
.contact-notice--ok{background:#CDEFD6; color:#1F7E43}
.contact-notice--fail{background:#FBD9D6; color:#B0372F}
.contact-form__meta{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:4px}
.contact-form__helper{margin:0; color:var(--tinta-suave); font-size:.92rem; line-height:1.5; max-width:44ch}
.contact-thanks{margin-top:18px; padding:16px 20px; border-radius:18px; background:linear-gradient(135deg, rgba(205,239,214,.95), rgba(255,255,255,.92)); color:#1F7E43; font-weight:700; box-shadow:0 16px 28px -24px rgba(31,126,67,.5); text-align:center}

/* Mensaje flotante que sale volando de la escena 3D al enviar */
.contact-fly-msg{position:absolute; left:50%; bottom:18%; z-index:5; display:inline-flex; align-items:center; gap:10px; padding:.7em 1.15em; border-radius:999px; background:linear-gradient(180deg, #fffdf6, #fff7e3); box-shadow:0 22px 44px -20px rgba(20,40,35,.5); font-family:var(--display); font-weight:800; color:var(--tinta); font-size:.98rem; white-space:nowrap; opacity:0; pointer-events:none; transform:translate(-50%, 0) scale(.5); will-change:transform, opacity}
.contact-fly-msg__icon{font-size:1.2rem}

/* Modal de confirmación de envío — su tarjeta "sale" volando de la cajita de la animación (ver flyModalFromScene en JS) */
.contact-sent-modal{position:fixed; inset:0; z-index:999; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(20,40,35,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .3s ease}
.contact-sent-modal:not([hidden]){opacity:1}
.contact-sent-modal[hidden]{display:flex; pointer-events:none}
.contact-sent-modal__card{max-width:380px; width:100%; text-align:center; background:linear-gradient(180deg, #fffdf6, #fff7e3); border-radius:28px; padding:36px 30px 30px; box-shadow:0 40px 90px -30px rgba(20,40,35,.55); transform-origin:center center; will-change:transform, opacity}
.contact-sent-modal__icon{display:block; font-size:3rem; margin-bottom:12px}
.contact-sent-modal__title{font-family:var(--display); font-size:1.4rem; font-weight:800; color:var(--tinta); margin:0 0 8px}
.contact-sent-modal__copy{color:var(--tinta-suave); font-size:.98rem; line-height:1.6; margin:0 0 22px}
.contact-sent-modal__close{width:100%}

/* ── Blog: barra de filtros ─────────────────────────────────── */
.blog-filters{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:8px 0 36px}

.blog-filter-cats{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.blog-filter-pill{display:inline-flex; align-items:center; gap:5px; padding:.38em 1em; border-radius:999px; font-family:var(--display); font-size:.82rem; font-weight:700; color:var(--tinta-suave); background:#fff; box-shadow:var(--shadow-sm); text-decoration:none; border:2px solid transparent; transition:all .18s; white-space:nowrap}
.blog-filter-pill:hover,.blog-filter-pill.is-active{background:var(--verde); color:#fff; box-shadow:none; border-color:var(--verde)}
.blog-filter-pill__count{font-size:.75em; opacity:.75; font-weight:600}

.blog-filter-select{padding:.48em 1.1em; border-radius:12px; border:2px solid rgba(39,48,74,.12); font-family:var(--display); font-size:.85rem; font-weight:600; color:var(--tinta); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6378' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; appearance:none; padding-right:2.2em; cursor:pointer; outline:none; transition:border-color .2s}
.blog-filter-select:focus{border-color:var(--verde)}

.archive-empty-wrap{text-align:center; padding:48px 20px; display:flex; flex-direction:column; align-items:center; gap:20px}

@media(max-width:640px){
  .blog-filters{flex-direction:column; align-items:flex-start; gap:12px}
  .blog-filter-cats{overflow-x:auto; flex-wrap:nowrap; max-width:100%; -webkit-overflow-scrolling:touch; padding-bottom:4px; scrollbar-width:none}
  .blog-filter-cats::-webkit-scrollbar{display:none}
}

/* ── Página Equipo / Quiénes somos ──────────────────────────── */
.equipo-page{padding-bottom:80px}

.equipo-hero{text-align:center; padding:80px 20px 56px; max-width:700px; margin:0 auto}
.equipo-hero .kicker{display:inline-block; font-family:var(--display); font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--verde); background:rgba(47,164,90,.1); padding:.35em 1em; border-radius:999px; margin-bottom:18px}
.equipo-hero h1{font-family:var(--display); font-size:clamp(2rem,5vw,3rem); font-weight:800; color:var(--tinta); line-height:1.15; margin-bottom:20px}
.equipo-intro{font-size:1.1rem; color:var(--tinta-suave); line-height:1.7; max-width:560px; margin:0 auto 32px}

.institucional{padding:16px 0 64px}
.institucional .sec-head{margin-bottom:2.6rem}

.institucional-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px}
.institucional-card{position:relative; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:34px 32px 30px; overflow:hidden; transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s}
.institucional-card::before{content:""; position:absolute; inset:0 0 auto 0; height:6px; background:var(--ic,var(--verde))}
.institucional-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.institucional-card--verde{--ic:var(--verde)}
.institucional-card--cielo{--ic:var(--cielo)}
.institucional-card--sol{--ic:var(--sol)}
.institucional-card--coral{--ic:var(--coral)}
.institucional-card--uva{--ic:var(--uva)}
.institucional-card__icon{display:inline-grid; place-items:center; width:52px; height:52px; border-radius:16px; background:color-mix(in srgb, var(--ic,var(--verde)) 16%, #fff); font-size:1.6rem; margin-bottom:14px}
.institucional-card--full{margin-bottom:28px}
.institucional-card h3{font-family:var(--display); font-size:1.2rem; font-weight:800; color:var(--tinta); margin-bottom:12px}
.institucional-card p{color:var(--tinta-suave); line-height:1.75; font-size:.98rem}

.objetivos-block{margin-bottom:44px}
.objetivos-block__title{font-family:var(--display); font-size:1.4rem; font-weight:800; color:var(--tinta); text-align:center; margin-bottom:24px}
.objetivos-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.objetivo-item{display:flex; align-items:flex-start; gap:16px; background:#fff; border-radius:var(--r-md); padding:20px 22px; box-shadow:var(--shadow-sm); transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s}
.objetivo-item:hover{transform:translateY(-4px) scale(1.015); box-shadow:var(--shadow)}
.objetivo-item__num{flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:.95rem; color:#fff; background:var(--oc,var(--verde))}
.objetivo-item--verde .objetivo-item__num{--oc:var(--verde)}
.objetivo-item--cielo .objetivo-item__num{--oc:var(--cielo)}
.objetivo-item--sol .objetivo-item__num{--oc:var(--sol)}
.objetivo-item--coral .objetivo-item__num{--oc:var(--coral)}
.objetivo-item--uva .objetivo-item__num{--oc:var(--uva)}
.objetivo-item p{margin:0; color:var(--tinta-suave); line-height:1.6; font-size:.94rem}

.valores-title{font-family:var(--display); font-size:1.4rem; font-weight:800; color:var(--tinta); text-align:center; margin-bottom:20px}
.valores-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; margin-bottom:16px}
.valor-chip{background:var(--crema2); border-radius:var(--r-lg); padding:24px 22px; border-top:4px solid var(--vc,var(--verde)); transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, background .28s}
.valor-chip:hover{transform:translateY(-5px); box-shadow:var(--shadow-sm); background:#fff}
.valor-chip--verde{--vc:var(--verde)}
.valor-chip--cielo{--vc:var(--cielo)}
.valor-chip--sol{--vc:var(--sol)}
.valor-chip--coral{--vc:var(--coral)}
.valor-chip--uva{--vc:var(--uva)}
.valor-chip__icon{display:block; font-size:1.7rem; margin-bottom:10px}
.valor-chip h4{font-family:var(--display); font-size:1rem; font-weight:800; color:var(--tinta); margin-bottom:6px}
.valor-chip p{color:var(--tinta-suave); font-size:.88rem; line-height:1.55; margin:0}

@media(max-width:640px){
  .institucional-grid, .objetivos-grid{grid-template-columns:1fr}
  .institucional-card{padding:26px 22px}
}

.team-section-head{text-align:center; max-width:640px; margin:0 auto 44px}
.team-section-head .kicker{display:inline-block; font-family:var(--display); font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--uva); background:rgba(124,92,214,.1); padding:.35em 1em; border-radius:999px; margin-bottom:16px}
.team-section-head h2{font-family:var(--display); font-size:clamp(1.7rem,4vw,2.4rem); font-weight:800; color:var(--tinta); line-height:1.2; margin-bottom:12px}
.team-section-head p{color:var(--tinta-suave); font-size:1.02rem; line-height:1.6; margin:0 auto}

.team-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:28px; padding-bottom:60px}

.team-card{position:relative; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column; border-top:4px solid var(--card-accent,var(--verde)); transition:transform .22s,box-shadow .22s}
.team-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}

.team-card__sky{position:absolute; inset:0; z-index:5; overflow:hidden; pointer-events:none}

.team-card__sun{position:absolute; top:10px; right:10px; width:36px; height:36px; animation:fe-sun-spin 12s linear infinite; filter:drop-shadow(0 2px 4px rgba(0,0,0,.28))}

.team-card__sun-glow{position:absolute; top:0; right:0; width:56px; height:56px; border-radius:50%; background:radial-gradient(circle, rgba(255,211,91,.9), rgba(255,180,60,0) 70%); filter:blur(3px); animation:fe-sun-glow 3.4s ease-in-out infinite}

.team-card__cloud{position:absolute; width:74px; opacity:.8; filter:drop-shadow(0 2px 3px rgba(0,0,0,.1))}
.team-card__cloud--1{top:12%; left:-30%; animation:fe-cloud-drift 15s linear infinite}
.team-card__cloud--2{top:44%; width:54px; opacity:.65; left:-45%; animation:fe-cloud-drift 21s linear infinite; animation-delay:-6s}
.team-card__cloud--3{top:72%; width:44px; opacity:.55; left:-55%; animation:fe-cloud-drift 25s linear infinite; animation-delay:-13s}

@keyframes fe-cloud-drift{ from{transform:translateX(0)} to{transform:translateX(360%)} }
@keyframes fe-sun-spin{ to{transform:rotate(360deg)} }
@keyframes fe-sun-glow{ 0%,100%{opacity:.4; transform:scale(.82)} 50%{opacity:1; transform:scale(1.25)} }

@media (prefers-reduced-motion: reduce){
  .team-card__sun, .team-card__cloud, .team-card__sun-glow{animation:none}
}

.team-card__photo-wrap{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--crema2)}
.team-card__img{width:100%; height:100%; object-fit:contain; object-position:center; display:block; transition:transform .4s}
.team-card:hover .team-card__img{transform:scale(1.03)}
.team-card__placeholder{width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--card-accent,var(--verde))}

.team-card__badge{position:absolute; bottom:12px; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:var(--display); font-size:.75rem; font-weight:700; letter-spacing:.06em; background:var(--card-accent,var(--verde)); color:#fff; padding:.3em .9em; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,.18)}

.team-card__body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1}
.team-card__name{font-family:var(--display); font-size:1.1rem; font-weight:800; color:var(--tinta); margin:0}
.team-card__bio{font-size:.9rem; color:var(--tinta-suave); line-height:1.6; margin:0; flex:1}
.team-card__linkedin{display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-size:.82rem; font-weight:700; color:var(--card-accent,var(--verde)); text-decoration:none; margin-top:4px; transition:opacity .18s}
.team-card__linkedin:hover{opacity:.75}

.team-empty{text-align:center; color:var(--tinta-suave); padding:60px 20px; font-size:1.05rem}

@media(max-width:640px){
  .team-grid{grid-template-columns:1fr 1fr}
  .team-card__badge{font-size:.68rem}
}
@media(max-width:400px){
  .team-grid{grid-template-columns:1fr}
}

/* ── Motion reduce ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .gal-rows{cursor:default}
}