@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Nunito+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --yellow:#FFD21A;
  --yellow-soft:#FFF7D6;
  --sky:#5BB9D4;
  --sky-soft:#EAF7FB;
  --coral:#EF806B;
  --coral-soft:#FDEAE5;
  --green:#8DBA62;
  --green-soft:#EEF5E7;
  --lavender:#C8B8E8;
  --lavender-soft:#F2EEFA;
  --navy:#17304F;
  --ink:#21364D;
  --muted:#5E6D7B;
  --cream:#FFFCF5;
  --white:#fff;
  --line:#E8E5DC;
  --shadow:0 18px 45px rgba(23,48,79,.08);
  --shadow-soft:0 8px 24px rgba(23,48,79,.07);
  --radius:30px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:'Nunito Sans',Arial,sans-serif;background:var(--cream)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.container{width:min(1180px,92%);margin:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* HEADER — editorial, airy and refined */
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(23,48,79,.10)}
.site-header:before{content:"";display:block;height:5px;background:linear-gradient(90deg,var(--yellow) 0 45%,var(--sky) 45% 70%,var(--coral) 70% 84%,var(--green) 84%)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:88px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-mark{width:160px;height:110px;display:grid;place-items:center}
.brand-logo{width:160px;height:110px;object-fit:contain}
.brand-text{line-height:.96}
.brand-text strong{font-family:'DM Serif Display',Georgia,serif;font-size:25px;font-weight:400;display:block;letter-spacing:-.015em;color:var(--navy)}
.brand-text small{display:block;font-size:9px;letter-spacing:.14em;color:#2A9DBB;font-weight:800;margin-top:7px}
.main-nav{display:flex;align-items:center;gap:3px;font-size:12px;font-weight:700}
.main-nav a{padding:10px 11px;position:relative;white-space:nowrap;border-radius:999px;transition:.2s ease;color:var(--navy)}
.main-nav a:not(.nav-cta):hover{background:var(--sky-soft);color:#157F9D}
.main-nav a.active{background:var(--yellow-soft)}
.main-nav a.active:after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;background:var(--coral);border-radius:10px}
.nav-cta{background:var(--yellow);padding:12px 17px!important;border:0;border-radius:999px!important;box-shadow:0 6px 16px rgba(255,210,26,.24);margin-left:8px}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 9px 20px rgba(255,210,26,.30)}
.cta-spark{font-size:12px}
.menu-toggle{display:none;border:1px solid var(--navy);background:var(--yellow);border-radius:12px;padding:8px 12px;font-size:20px}

/* TYPE */
h1,h2,h3{font-family:'DM Serif Display',Georgia,serif;margin:0 0 14px;line-height:1.04;letter-spacing:-.012em;color:var(--navy)}
h1{font-size:clamp(33px,4vw,55px);}
h2{font-size:clamp(24px,3.2vw,38px)}
h3{font-size:24px}
.eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:#2A9DBB;display:inline-flex;align-items:center;gap:8px;margin-bottom:11px}
.eyebrow:before{content:"";width:22px;height:3px;background:var(--yellow);border-radius:20px}
.eyebrow.blue{color:#2A9DBB}
.section-heading{max-width:780px;margin-bottom:38px}
.section-heading.center{text-align:center;margin-left:auto;margin-right:auto}

/* BUTTONS */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--navy);border-radius:999px;padding:13px 21px;font-weight:800;cursor:pointer;transition:.2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 9px 18px rgba(23,48,79,.10)}
.btn-yellow{background:var(--yellow);color:var(--navy);border-color:var(--yellow);box-shadow:0 7px 17px rgba(255,210,26,.25)}
.btn-blue{background:var(--sky);color:var(--navy);border-color:var(--sky);box-shadow:0 7px 17px rgba(91,185,212,.20)}
.btn-outline{background:rgba(255,255,255,.82);box-shadow:none}

/* INTRO VIDEO */

/* HERO — editorial composition */
.hero{position:relative;overflow:hidden;background:var(--white);padding:56px 0 70px}
.hero:before{content:"";position:absolute;left:-90px;top:50px;width:250px;height:170px;background:var(--yellow-soft);border-radius:42% 58% 54% 46%/52% 44% 56% 48%;transform:rotate(-9deg)}
.hero:after{content:"";position:absolute;right:-110px;top:-90px;width:340px;height:300px;background:var(--sky-soft);border-radius:48% 52% 42% 58%;transform:rotate(12deg)}
.hero-copy{display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:50px;position:relative;z-index:2}
.hero-content{padding:22px 0 18px}
.hero h1{position:relative;z-index:25;}
.hero h1 .accent-blue{color:var(--sky)}
.hero h1 .accent-coral{color:var(--coral)}
.hero-content p{max-width:560px;font-size:17px}
.hero-media{position:relative;min-height:520px}
.hero-media .hero-photo{height:420px;min-height:0;margin-top:0}
.hero-photo{position:relative;overflow:hidden;background:linear-gradient(135deg,#f3fbfd,#fff6d8);border-radius:52% 38% 46% 30%;box-shadow:0 22px 50px rgba(23,48,79,.10)}
.hero-photo:after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.75);border-radius:48% 36% 42% 27%;pointer-events:none}
.photo-placeholder{display:flex;align-items:center;justify-content:center}
.photo-placeholder:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 25%,rgba(255,255,255,.9),transparent 34%),linear-gradient(135deg,rgba(91,185,212,.13),rgba(255,210,26,.15))}
.photo-placeholder div,.photo-placeholder span{position:relative;text-align:center}
.photo-placeholder div{font-weight:800;font-size:17px;color:var(--navy)}
.photo-placeholder small{display:block;font-weight:600;margin-top:7px;color:var(--muted)}
.hero-video-card{position:absolute;right:-18px;top:18px;width:176px;height:176px;background:rgba(255,255,255,.94);border:1px solid rgba(23,48,79,.12);border-radius:30px;overflow:hidden;box-shadow:0 16px 36px rgba(23,48,79,.13);z-index:4;transform:rotate(2deg)}
.hero-brand-video{width:100%;height:100%;object-fit:cover}
.media-caption{position:absolute;left:11px;right:11px;bottom:10px;background:rgba(255,255,255,.92);border-radius:999px;padding:7px 10px;font-size:10px;font-weight:800;text-align:center;color:var(--navy)}
.hero-wave{position:absolute;bottom:-72px;left:-5%;width:110%;height:135px;background:var(--yellow);border-radius:50% 50% 0 0/70% 70% 0 0}
.hero-illustration{position:absolute;right:-12px;bottom:5px;width:310px;z-index:3;pointer-events:none}

/* CHARACTER BAND */
.character-band{height:104px;overflow:hidden;background:var(--yellow);border:0}
.character-band img{width:100%;height:100%;object-fit:cover;object-position:center}

/* GENERAL SECTIONS */
.section{padding:88px 0}
.two-col{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.art-card{overflow:hidden;border-radius:38px;background:var(--white);box-shadow:var(--shadow)}
.yellow-art{padding:14px;background:var(--yellow-soft);position:relative}
.yellow-art:after{content:"";position:absolute;right:-22px;bottom:-28px;width:100px;height:100px;background:var(--green);border-radius:50%;opacity:.55}
.yellow-art img{width:100%;height:400px;object-fit:cover;border-radius:28px}
.text-link{display:inline-block;font-weight:800;color:#218EAA;margin-top:8px;border-bottom:2px solid var(--yellow);padding-bottom:3px}

/* FEATURED SPLIT */
.proposal{background:var(--sky-soft);position:relative;overflow:hidden}
.proposal:before{content:"";position:absolute;left:-100px;bottom:-120px;width:290px;height:220px;background:var(--yellow);border-radius:60% 40% 48% 52%;opacity:.75}
.proposal-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center;position:relative;z-index:1}
.proposal-art{background:var(--white);border:0;border-radius:44px;overflow:hidden;padding:0;box-shadow:var(--shadow)}
.proposal-art img{height:400px;width:100%;object-fit:cover;object-position:center;border-radius:44px}

/* PILLARS */
.pillars{background:var(--white)}
.pillar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillar{padding:30px;border:1px solid var(--line);border-radius:28px;min-height:220px;box-shadow:var(--shadow-soft);transition:.2s transform,.2s box-shadow}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pillar.yellow{background:var(--yellow-soft)}
.pillar.sky{background:var(--sky-soft)}
.pillar.green{background:var(--green-soft)}
.icon{width:58px;height:58px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--white);font-size:27px;margin-bottom:18px;box-shadow:0 8px 18px rgba(23,48,79,.08)}

/* ROOMS */
.rooms{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.room-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.room-card{background:var(--white);border:1px solid var(--line);border-radius:26px;padding:0 0 21px;overflow:hidden;box-shadow:var(--shadow-soft);transition:.2s transform,.2s box-shadow}
.room-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.room-card h3,.room-card p,.room-card a{margin-left:20px;margin-right:20px}
.room-card h3{font-size:21px;margin-top:19px}
.room-card p{font-size:13px;line-height:1.6}
.room-card a{font-weight:800;color:#218EAA;font-size:13px}
.room-art{height:155px;display:grid;place-items:center;font-size:55px;position:relative}
.room-art:after{content:"";position:absolute;width:95px;height:95px;border-radius:50%;background:rgba(255,255,255,.38);z-index:0}
.room-art{isolation:isolate}
.room-art::before{content:"";z-index:2;position:relative}
.room-art{font-family:Georgia,serif}
.room-art.poet{background:var(--yellow-soft);color:#C99E00}.room-art.music{background:var(--sky-soft);color:#278DAA}.room-art.discovery{background:var(--green-soft);color:#6B9B43}.room-art.alchemy{background:var(--coral-soft);color:#D4614B}.room-art.multi{background:var(--lavender-soft);color:#7C65A8}

/* SPACES */
.spaces{background:var(--white)}
.space-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.space-card{border:1px solid var(--line);border-radius:26px;overflow:hidden;background:var(--cream);box-shadow:var(--shadow-soft)}
.space-photo{height:230px;background:linear-gradient(135deg,var(--sky-soft),var(--yellow-soft))}
.space-photo span{font-weight:800;color:var(--navy);font-size:13px}
.space-card h3{font-size:20px;padding:19px 20px 21px;margin:0}
.space-art-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.space-art-row img{width:100%;height:270px;object-fit:cover;border-radius:32px;background:var(--yellow-soft)}

/* START */
.start{background:var(--yellow-soft)}
.start-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:65px;align-items:center}
.start-art{background:var(--white);border-radius:44px;padding:16px;box-shadow:var(--shadow)}
.start-art img{width:100%;height:430px;object-fit:cover;border-radius:32px}
.check-list{padding:0;margin:22px 0 0;list-style:none;display:grid;gap:12px}
.check-list li{position:relative;padding-left:28px;color:var(--ink);font-weight:700}
.check-list li:before{content:"✓";position:absolute;left:0;top:-1px;color:var(--coral);font-weight:900}

/* INVITATION */
.invitation{padding-top:70px;padding-bottom:88px;background:var(--white)}
.invitation-box{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:44px 50px;background:linear-gradient(100deg,var(--sky-soft),var(--lavender-soft));border-radius:36px;position:relative;overflow:hidden}
.invitation-box:after{content:"";position:absolute;right:-40px;bottom:-60px;width:180px;height:150px;background:var(--coral);opacity:.16;border-radius:55% 45% 40% 60%}
.invitation-box h2{max-width:760px;font-size:clamp(30px,3vw,44px)}
.invitation-box .btn{position:relative;z-index:1;flex-shrink:0}

/* FOOTER */
.footer{background:var(--navy);color:white;padding-top:66px}
.footer-grid{display:grid;grid-template-columns:1.1fr .9fr 1fr .8fr;gap:35px;padding-bottom:46px}
.footer h3{color:white;font-size:22px}
.footer p{color:rgba(255,255,255,.75);font-size:13px}
.footer-brand img{width:78px;filter:none;margin-bottom:14px}
.footer label{display:grid;gap:6px;color:rgba(255,255,255,.82);font-size:12px;font-weight:700;margin-bottom:10px}
.footer input,.footer textarea{border:0;border-radius:12px;padding:11px 12px;background:rgba(255,255,255,.95);color:var(--ink);outline:none}
.footer .btn-blue{border:0;color:var(--navy)}
.map-placeholder{min-height:220px;border-radius:24px;background:linear-gradient(135deg,#d8eef3,#f8e8c1);color:var(--navy);display:grid;place-items:center;text-align:center;font-weight:800}
.map-placeholder small{display:block;font-weight:600;margin-top:-75px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:17px 0;font-size:11px;color:rgba(255,255,255,.68)}
.footer-bottom .container{display:flex;justify-content:space-between;gap:20px}

/* SALAS — recorrido editorial sereno */
.rooms-heading{max-width:860px;margin-bottom:54px}
.rooms-heading p{max-width:780px}
.rooms-path{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
.room-card{display:flex;flex-direction:column;min-height:100%;background:var(--white);border:1px solid var(--line);border-radius:30px;overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
.room-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.room-art{height:175px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.room-art small{position:absolute;top:18px;right:20px;font-family:var(--sans);font-size:12px;font-weight:900;letter-spacing:.12em;opacity:.55}
.room-symbol{position:relative;z-index:2;font-family:Georgia,serif;font-size:68px;line-height:1;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.room-card:hover .room-symbol{transform:translateY(-3px) rotate(-2deg)}
.room-art:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.34);right:-42px;bottom:-82px;transition:transform .8s ease}
.room-card:hover .room-art:after{transform:scale(1.08)}
.room-body{padding:25px 26px 28px;display:flex;flex-direction:column;flex:1}
.room-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900;color:#688092;margin-bottom:8px}
.room-body h3{font-size:27px;margin:0 0 13px;letter-spacing:-.02em}
.room-body p{font-size:14px;line-height:1.72;margin:0 0 14px}
.room-pending{margin-top:auto;padding:11px 13px;border-radius:13px;background:var(--cream);font-size:12px;font-weight:750;color:#66737e}
.room-featured{grid-column:1 / -1;display:grid;grid-template-columns:.7fr 1.3fr}
.room-featured .room-art{height:100%;min-height:280px}
.room-featured .room-body{padding:34px 38px}
.room-points{margin:2px 0 16px;padding-left:20px;display:grid;gap:7px;font-size:14px;line-height:1.55}
.room-closing{font-weight:750;margin-top:auto!important}
.rooms-closing{margin:52px auto 0;max-width:720px;text-align:center;display:flex;align-items:center;justify-content:center;gap:16px;padding:20px 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rooms-closing-symbol{font-size:20px;color:#D99C00}
.rooms-closing p{margin:0;font-family:var(--serif);font-size:19px;line-height:1.55}
@media (max-width:900px){.rooms-path{grid-template-columns:1fr}.room-featured{grid-column:auto;display:block}.room-featured .room-art{min-height:175px;height:175px}.room-featured .room-body{padding:25px 26px 28px}}

@media(max-width:1080px){
  .main-nav{gap:0;font-size:11px}.main-nav a{padding:9px 7px}.nav-cta{padding:11px 12px!important}
  .room-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .nav-wrap{min-height:78px}.brand-mark,.brand-logo{width:60px;height:60px}.brand-text strong{font-size:22px}.brand-text small{font-size:8px}
  .main-nav{display:none}.menu-toggle{display:block}
  .hero{padding:38px 0 70px}.hero-copy{grid-template-columns:1fr;gap:28px}.hero-content{text-align:left}.hero-media{min-height:430px}.hero-media .hero-photo{height:430px}.hero-video-card{width:145px;height:145px;right:6px;top:-8px}.hero-illustration{width:235px}
  .two-col,.proposal-grid,.start-grid{grid-template-columns:1fr;gap:35px}.pillar-grid{grid-template-columns:1fr}.space-grid{grid-template-columns:1fr 1fr}.room-grid{grid-template-columns:1fr 1fr}
  .invitation-box{flex-direction:column;align-items:flex-start;padding:34px}.footer-grid{grid-template-columns:1fr}
}
@media(max-width:540px){
  h1{font-size:42px}.section{padding:65px 0}.character-band{height:78px}.space-grid,.room-grid{grid-template-columns:1fr}.hero-media{min-height:360px}.hero-media .hero-photo{height:360px}.hero-video-card{width:118px;height:118px}.hero-illustration{width:190px}.footer-bottom .container{flex-direction:column}.brand-text small{letter-spacing:.09em}
}


/* =========================================================
   MOVIMIENTO SUAVE — v7
   Animaciones delicadas, orgánicas y respetuosas.
   ========================================================= */

/* Preparación para las entradas al hacer scroll */
.js-motion .motion-reveal{
  opacity:0;
  transform:translate3d(0,14px,0) scale(.997);
  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    transform .95s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--motion-delay,0ms);
  will-change:opacity,transform;
}
.js-motion .motion-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

/* Movimiento lateral muy sutil para composiciones editoriales */
.js-motion .motion-left{
  opacity:0;
  transform:translate3d(-13px,7px,0);
  transition:
    opacity .78s cubic-bezier(.22,1,.36,1),
    transform .88s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--motion-delay,0ms);
}
.js-motion .motion-left.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}
.js-motion .motion-right{
  opacity:0;
  transform:translate3d(13px,7px,0);
  transition:
    opacity .78s cubic-bezier(.22,1,.36,1),
    transform .88s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--motion-delay,0ms);
}
.js-motion .motion-right.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* El hero respira, pero sin distraer */
.hero-content h1{
  animation:heroTextIn .95s cubic-bezier(.22,1,.36,1) both;
}
.hero-content > p{
  animation:heroTextIn .82s .10s cubic-bezier(.22,1,.36,1) both;
}
.hero-content .actions{
  animation:heroTextIn .78s .18s cubic-bezier(.22,1,.36,1) both;
}
.hero-media .hero-photo{
  animation:heroImageIn 1s .04s cubic-bezier(.22,1,.36,1) both;
}
.hero-video-card{
  animation:heroCardFloat 9s ease-in-out infinite;
}
.hero-illustration{
  animation:gentleFloat 10.5s ease-in-out infinite;
  transform-origin:70% 80%;
}

/* Formas orgánicas del hero con una respiración casi imperceptible */
.hero:before{
  animation:organicDrift 21s ease-in-out infinite alternate;
}
.hero:after{
  animation:organicDrift 18s ease-in-out -4s infinite alternate-reverse;
}
.hero-wave{
  animation:waveBreathe 14s ease-in-out infinite;
  transform-origin:50% 100%;
}

/* Franja de caritas: leve desplazamiento continuo */
.character-band img{
  width:110%;
  max-width:none;
  transform:translateX(-5%);
  animation:bandDrift 42s ease-in-out infinite alternate;
}

/* Las imágenes grandes tienen un pequeño efecto de vida */
.yellow-art img,
.proposal-art img,
.start-art img,
.space-art-row img{
  transition:transform 1.1s cubic-bezier(.22,1,.36,1), filter 1.1s ease;
}
.yellow-art:hover img,
.proposal-art:hover img,
.start-art:hover img,
.space-art-row img:hover{
  transform:scale(1.025) translateY(-3px);
}

/* Tarjetas: entrada escalonada + hover más orgánico */
.js-motion .pillar,
.js-motion .room-card,
.js-motion .space-card{
  opacity:0;
  transform:translate3d(0,14px,0) scale(.996);
  transition:
    opacity .72s cubic-bezier(.22,1,.36,1),
    transform .82s cubic-bezier(.22,1,.36,1),
    box-shadow .35s ease;
  transition-delay:var(--motion-delay,0ms);
}
.js-motion .pillar.is-visible,
.js-motion .room-card.is-visible,
.js-motion .space-card.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.pillar:hover,
.room-card:hover,
.space-card:hover{
  transform:translateY(-7px) scale(1.008);
}

/* Los símbolos de las salas flotan suavemente */
.room-art{
  overflow:hidden;
}
.room-art > *{
  position:relative;
  z-index:3;
}
.room-art::after{
  animation:orbFloat 7s ease-in-out infinite;
}
.room-card:nth-child(2) .room-art::after{animation-delay:-1.1s}
.room-card:nth-child(3) .room-art::after{animation-delay:-2.2s}
.room-card:nth-child(4) .room-art::after{animation-delay:-.7s}
.room-card:nth-child(5) .room-art::after{animation-delay:-1.8s}

.room-card .room-art{
  transition:background-color .45s ease;
}
.room-card:hover .room-art{
  background-color:rgba(255,255,255,.55);
}
.room-card h3{
  transition:transform .45s cubic-bezier(.22,1,.36,1), color .35s ease;
}
.room-card:hover h3{
  transform:translateX(2px);
  color:#157F9D;
}

/* Eyebrows y links con micro movimiento */
.eyebrow:before{
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.section-heading:hover .eyebrow:before,
.eyebrow:hover:before{
  width:30px;
}
.text-link{
  transition:color .3s ease, padding-left .45s cubic-bezier(.22,1,.36,1);
}
.text-link:hover{
  padding-left:5px;
}

/* Botones: respuesta física ligera */
.btn,
.nav-cta{
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    box-shadow .35s ease,
    background-color .35s ease;
}
.btn:active,
.nav-cta:active{
  transform:translateY(1px) scale(.985);
}

/* CTA final: un pequeño movimiento de luz */
.invitation-box{
  isolation:isolate;
}
.invitation-box:before{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  left:8%;
  top:-95px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  filter:blur(2px);
  z-index:-1;
  animation:invitationGlow 10s ease-in-out infinite alternate;
}

/* Footer aparece limpio, sin efectos excesivos */
.footer-grid > *{
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.footer-grid > *:hover{
  transform:translateY(-3px);
}

/* Ritmo general: pequeños movimientos ligados al recorrido, no al espectáculo */
html{scroll-behavior:smooth}

.section{
  position:relative;
}

/* Las secciones tienen una entrada común y muy ligera */
.js-motion main section[id]{
  scroll-margin-top:92px;
}

/* Separadores orgánicos: una leve respiración evita cortes bruscos entre bloques */
.section + .section{
  transition:background-color 1.2s ease;
}

/* Elementos decorativos secundarios se mueven más lento que el contenido */
.hero:before,.hero:after,.hero-wave,.invitation-box:before{
  pointer-events:none;
}

/* Hover más humano: sólo se activa cuando el dispositivo realmente lo permite */
@media (hover:hover){
  .pillar:hover,.room-card:hover,.space-card:hover{
    transition-duration:.5s;
  }
}

/* Respeto total por accesibilidad */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js-motion .motion-reveal,
  .js-motion .motion-left,
  .js-motion .motion-right,
  .js-motion .pillar,
  .js-motion .room-card,
  .js-motion .space-card{
    opacity:1 !important;
    transform:none !important;
  }
}

@keyframes heroTextIn{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroImageIn{
  from{opacity:0;transform:translate3d(18px,22px,0) scale(.97)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes heroCardFloat{
  0%,100%{transform:rotate(2deg) translate3d(0,0,0)}
  50%{transform:rotate(1.3deg) translate3d(-3px,5px,0)}
}
@keyframes gentleFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(-3px,-5px,0) rotate(-.6deg)}
}
@keyframes organicDrift{
  0%{transform:translate3d(0,0,0) rotate(-9deg) scale(1)}
  50%{transform:translate3d(6px,4px,0) rotate(-7deg) scale(1.015)}
  100%{transform:translate3d(-5px,-3px,0) rotate(-10deg) scale(.995)}
}
@keyframes waveBreathe{
  0%,100%{transform:scaleX(1) translateY(0)}
  50%{transform:scaleX(1.008) translateY(2px)}
}
@keyframes bandDrift{
  0%{transform:translateX(-5%)}
  100%{transform:translateX(-2.5%)}
}
@keyframes orbFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.02)}
}
@keyframes invitationGlow{
  0%{transform:translate3d(0,0,0) scale(.9);opacity:.3}
  100%{transform:translate3d(28px,12px,0) scale(1.12);opacity:.65}
}

/* Deriva de scroll extremadamente leve para piezas protagonistas */
.hero-illustration,
.proposal-art,
.start-art{
  --scroll-drift:0px;
}
.hero-illustration img,
.proposal-art img,
.start-art img{
  transform:translate3d(0,var(--scroll-drift),0);
}
@media (prefers-reduced-motion: reduce){
  .hero-illustration,
  .proposal-art,
  .start-art{--scroll-drift:0px !important}
}


/* =========================================================
   v9 — PUNTO MEDIO
   Más cálido y juguetón, pero todavía editorial.
   ========================================================= */
.hero-content h1 .accent-blue,.hero-content h1 .accent-coral{
  transition:letter-spacing .7s cubic-bezier(.22,1,.36,1);
}
.hero-content h1:hover .accent-blue{letter-spacing:.008em}
.hero-content h1:hover .accent-coral{letter-spacing:.004em}

.hero-video-card{
  box-shadow:0 16px 36px rgba(23,48,79,.13), 0 0 0 1px rgba(255,255,255,.35);
}

.hero-illustration{
  animation-duration:11.5s;
}

.pillar,.room-card,.space-card{
  transition:
    transform .55s cubic-bezier(.22,1,.36,1),
    box-shadow .55s ease,
    border-color .4s ease;
}
.pillar:hover,.room-card:hover,.space-card:hover{
  transform:translateY(-6px) rotate(.15deg);
}
.pillar:nth-child(2):hover,.room-card:nth-child(2):hover,.space-card:nth-child(2):hover{
  transform:translateY(-5px) rotate(-.15deg);
}

.room-art::before{
  animation:roomHalo 9s ease-in-out infinite;
}
.room-card:nth-child(2) .room-art::before{animation-delay:-2s}
.room-card:nth-child(3) .room-art::before{animation-delay:-4s}
.room-card:nth-child(4) .room-art::before{animation-delay:-1s}
.room-card:nth-child(5) .room-art::before{animation-delay:-3s}

.space-photo{
  transition:transform .8s cubic-bezier(.22,1,.36,1), filter .8s ease;
}
.space-card:hover .space-photo{
  transform:scale(1.018);
}

.btn:hover,.nav-cta:hover{
  transform:translateY(-2px) scale(1.008);
}

.text-link::after{
  content:' →';
  display:inline-block;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.text-link:hover::after{transform:translateX(3px)}

@keyframes roomHalo{
  0%,100%{transform:scale(.96);opacity:.38}
  50%{transform:scale(1.04);opacity:.58}
}

@keyframes heroTextIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroImageIn{
  from{opacity:0;transform:translate3d(12px,15px,0) scale(.985)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

@media (max-width:820px){
  .hero-illustration{animation-duration:13s}
  .character-band img{animation-duration:50s}
}

@media (prefers-reduced-motion: reduce){
  .hero-content h1 .accent-blue,.hero-content h1 .accent-coral{letter-spacing:normal !important}
  .pillar:hover,.room-card:hover,.space-card:hover,.space-card:hover .space-photo{transform:none !important}
}

/* =========================================================
   v10 — SERENO
   Movimiento continuo, pausado y cálido.
   ========================================================= */
html{scroll-behavior:smooth}

/* Entradas: menos desplazamiento, más sensación de asentarse */
.js-motion .motion-reveal{
  transform:translate3d(0,9px,0) scale(.999);
  transition-duration:.9s;
}
.js-motion .motion-left{transform:translate3d(-8px,4px,0)}
.js-motion .motion-right{transform:translate3d(8px,4px,0)}
.js-motion .motion-left,
.js-motion .motion-right{transition-duration:.95s}

/* Las tarjetas no saltan: se elevan apenas */
.pillar:hover,.room-card:hover,.space-card:hover{
  transform:translateY(-3px) rotate(0deg) !important;
  box-shadow:0 14px 30px rgba(23,48,79,.09);
}
.pillar:nth-child(2):hover,.room-card:nth-child(2):hover,.space-card:nth-child(2):hover{
  transform:translateY(-3px) rotate(0deg) !important;
}

/* Hero: respiración más lenta */
.hero-video-card{animation-duration:12s}
.hero-illustration{animation-duration:15s}
.hero:before{animation-duration:30s}
.hero:after{animation-duration:27s}
.hero-wave{animation-duration:20s}
.character-band img{animation-duration:58s}
.room-art::after{animation-duration:10s}
.room-art::before{animation-duration:13s}
.invitation-box:before{animation-duration:16s}

@keyframes heroCardFloat{
  0%,100%{transform:rotate(1.7deg) translate3d(0,0,0)}
  50%{transform:rotate(1.35deg) translate3d(-1px,3px,0)}
}
@keyframes gentleFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(-1px,-3px,0) rotate(-.25deg)}
}
@keyframes organicDrift{
  0%{transform:translate3d(0,0,0) rotate(-8deg) scale(1)}
  50%{transform:translate3d(3px,2px,0) rotate(-7.2deg) scale(1.008)}
  100%{transform:translate3d(-2px,-2px,0) rotate(-8.5deg) scale(.998)}
}
@keyframes waveBreathe{
  0%,100%{transform:scaleX(1) translateY(0)}
  50%{transform:scaleX(1.004) translateY(1px)}
}
@keyframes bandDrift{
  0%{transform:translateX(-4%)}
  100%{transform:translateX(-2.8%)}
}
@keyframes orbFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-2px) scale(1.01)}
}
@keyframes roomHalo{
  0%,100%{transform:scale(.98);opacity:.4}
  50%{transform:scale(1.02);opacity:.5}
}
@keyframes invitationGlow{
  0%{transform:translate3d(0,0,0) scale(.96);opacity:.28}
  100%{transform:translate3d(14px,6px,0) scale(1.05);opacity:.48}
}

/* Hover: sólo una respuesta de cercanía, no un efecto */
.btn:hover,.nav-cta:hover{transform:translateY(-1px) scale(1.003)}
.text-link:hover{padding-left:2px}
.text-link:hover::after{transform:translateX(2px)}
.room-card:hover h3{transform:translateX(1px)}
.space-card:hover .space-photo{transform:scale(1.01)}

/* En móvil, todavía más quieto */
@media(max-width:820px){
  .hero-illustration{animation-duration:17s}
  .character-band img{animation-duration:68s}
}

/* =========================================================
   v11 — MÁS AIRE ENTRE SECCIONES
   Espaciado amplio, respirado y sereno sin perder continuidad.
   ========================================================= */
.section{
  padding-top:112px;
  padding-bottom:112px;
}
.section-heading{
  margin-bottom:48px;
}
.two-col,
.proposal-grid,
.start-grid{
  row-gap:82px;
}
.pillar-grid,
.room-grid,
.space-grid{
  row-gap:24px;
}
.space-art-row{
  margin-top:42px;
}
.invitation{
  padding-top:92px;
  padding-bottom:112px;
}

/* Separaciones visuales muy suaves: la página respira sin crear cortes duros. */
.section + .section{
  border-top:1px solid rgba(23,48,79,.045);
}
.proposal + .pillars,
.pillars + .rooms,
.rooms + .section,
.section + .start{
  border-top-color:rgba(23,48,79,.025);
}

/* El contenido aparece con un poco más de espacio alrededor. */
.js-motion .motion-reveal,
.js-motion .motion-left,
.js-motion .motion-right{
  transition-duration:1s;
}

@media(max-width:820px){
  .section{
    padding-top:86px;
    padding-bottom:86px;
  }
  .section-heading{
    margin-bottom:40px;
  }
  .two-col,
  .proposal-grid,
  .start-grid{
    row-gap:52px;
  }
  .space-art-row{
    margin-top:34px;
  }
  .invitation{
    padding-top:72px;
    padding-bottom:88px;
  }
}

@media(max-width:540px){
  .section{
    padding-top:74px;
    padding-bottom:74px;
  }
  .section-heading{
    margin-bottom:34px;
  }
  .two-col,
  .proposal-grid,
  .start-grid{
    row-gap:40px;
  }
  .invitation{
    padding-top:60px;
    padding-bottom:74px;
  }
}

/* =========================================================
   v12 — IMÁGENES INSTITUCIONALES INCORPORADAS
   El material gráfico aportado por la institución acompaña
   el contenido sin competir con la lectura.
   ========================================================= */
.hero-institutional-art{
  background:#5fb3cf;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px 18px 0;
}
.hero-institutional-art img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  border-radius:inherit;
  filter:saturate(.98);
  transition:transform 1.2s cubic-bezier(.22,1,.36,1);
}
.hero-institutional-art:hover img{transform:translateY(-5px) scale(1.012)}
.hero-institutional-art .art-caption,
.proposal-art .art-caption,
.start-art .art-caption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  color:var(--navy);
  font-size:11px;
  font-weight:800;
  text-align:center;
  letter-spacing:.01em;
  z-index:4;
}
.hero-institutional-art .art-caption{bottom:14px}
.art-nido{background:var(--white);padding:0;display:flex;align-items:center;justify-content:center;min-height:400px}
.art-nido img{height:430px;object-fit:contain;border-radius:0;mix-blend-mode:multiply}
.proposal-art{position:relative;background:#3aa78e;min-height:400px}
.proposal-art img{height:430px;object-fit:contain;object-position:center;border-radius:0;background:#3aa78e}
.proposal-art .art-caption{bottom:14px}
.start-art{position:relative;min-height:430px;display:flex;align-items:center;justify-content:center;background:var(--white)}
.start-art img{height:400px;object-fit:contain;border-radius:24px}
.start-art .art-caption{bottom:14px}
.space-art-row img{height:360px;object-fit:contain;padding:0;background:#5fb3cf}
.character-band{background:#ffd24a}
.character-band img{object-fit:cover;object-position:center}

@media (max-width:900px){
  .hero-institutional-art{min-height:430px}
  .art-nido img{height:380px}
  .proposal-art img{height:390px}
  .start-art img{height:360px}
  .space-art-row img{height:320px}
}
@media (max-width:620px){
  .hero-institutional-art{min-height:420px;padding:12px 10px 0}
  .hero-institutional-art .art-caption,
  .proposal-art .art-caption,
  .start-art .art-caption{font-size:10px;left:10px;right:10px}
  .art-nido{min-height:330px}
  .art-nido img{height:330px}
  .proposal-art{min-height:340px}
  .proposal-art img{height:340px}
  .start-art{min-height:350px}
  .start-art img{height:330px}
  .space-art-row{grid-template-columns:1fr;gap:14px}
  .space-art-row img{height:330px}
}

/* =========================================================
   v14 — CONSTRUCCIÓN INSTITUCIONAL COMPLETA
   Contenido de los documentos + estructura preparada para
   fotografías reales futuras, sin inventar material faltante.
   ========================================================= */
.quote-strip{background:var(--yellow);padding:28px 0 30px;position:relative;overflow:hidden}
.quote-inner{display:flex;align-items:center;justify-content:center;gap:16px;max-width:900px;text-align:center}
.quote-mark{font-family:'DM Serif Display',Georgia,serif;font-size:60px;line-height:.7;color:rgba(23,48,79,.28)}
.quote-inner p{margin:0;color:var(--navy);font-family:'DM Serif Display',Georgia,serif;font-size:clamp(21px,2.2vw,30px);line-height:1.2}
.specialist{background:var(--white)}
.specialist-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}
.specialist-note{background:var(--green-soft);border-radius:34px;padding:38px;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.specialist-note:after{content:"";position:absolute;width:130px;height:130px;right:-45px;bottom:-45px;border-radius:50%;background:var(--yellow);opacity:.45}
.note-symbol{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--white);font-size:24px;margin-bottom:18px;box-shadow:0 8px 18px rgba(23,48,79,.07)}
.specialist-note h3{font-size:32px;position:relative;z-index:1}
.specialist-note p{position:relative;z-index:1}
.proposal-axes{background:var(--cream)}
.axis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.axis-card{padding:27px;border-radius:27px;border:1px solid var(--line);background:var(--white);min-height:190px;box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.axis-card:before{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-35px;top:-35px;background:rgba(255,255,255,.58)}
.axis-card>span{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--muted);display:block;margin-bottom:20px}
.axis-card h3{font-size:25px;position:relative;z-index:1}
.axis-card p{position:relative;z-index:1}
.axis-card.yellow{background:var(--yellow-soft)}
.axis-card.sky{background:var(--sky-soft)}
.axis-card.coral{background:var(--coral-soft)}
.axis-card.green{background:var(--green-soft)}
.axis-card.lavender{background:var(--lavender-soft)}
.axis-card.cream{background:#fffaf0}
.room-card{min-height:100%}
.room-card.room-featured{border-color:rgba(91,185,212,.38);box-shadow:0 18px 40px rgba(91,185,212,.11)}
.room-card.room-featured .room-art{background:var(--sky-soft)}
.room-card a{display:inline-block;margin-top:4px}
.start-principles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.start-principles article{padding:18px 19px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.7)}
.start-principles span{font-size:10px;font-weight:900;letter-spacing:.12em;color:#2A9DBB}
.start-principles h3{font-size:21px;margin:7px 0 6px}
.start-principles p{font-size:13px;margin:0;line-height:1.55}
.childhood{background:var(--yellow-soft)}
.childhood-box{max-width:900px;text-align:center}
.childhood-box p{max-width:760px;margin-left:auto;margin-right:auto}
.invitation-box>div{max-width:800px}
.invitation-box>div p{max-width:720px}

@media(max-width:1080px){
  .room-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .specialist-grid{grid-template-columns:1fr;gap:42px}
  .axis-grid{grid-template-columns:1fr 1fr}
  .start-principles{grid-template-columns:1fr 1fr}
  .quote-inner{padding:0 14px}
}
@media(max-width:540px){
  .axis-grid,.start-principles{grid-template-columns:1fr}
  .quote-strip{padding:24px 0 26px}
  .quote-mark{font-size:45px}
  .quote-inner p{font-size:20px}
  .specialist-note{padding:30px}
}

/* =========================================================
   v16 — SALAS / MOVIMIENTO SUTIL
   Cada sala tiene un gesto visual propio, muy discreto.
   ========================================================= */
.rooms-path .room-card{
  position:relative;
  overflow:hidden;
}
.rooms-path .room-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:currentColor;
  opacity:.32;
  z-index:4;
  transform:scaleX(.55);
  transform-origin:center;
  transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .5s ease;
}
.rooms-path .room-card:hover::before{
  transform:scaleX(.82);
  opacity:.5;
}

/* Poetas — una respiración vertical, casi imperceptible. */
.room-poetas .room-symbol{
  animation:roomPoetas 6.8s ease-in-out infinite;
}
/* Músicos — un pulso suave, como una nota que aparece y se retira. */
.room-musicos .room-symbol{
  animation:roomMusicos 5.8s ease-in-out infinite;
}
/* Descubridores — pequeño gesto lateral, como una mirada curiosa. */
.room-descubridores .room-symbol{
  animation:roomDescubridores 7.4s ease-in-out infinite;
}
/* Alquimistas — órbita mínima, sin perder estabilidad. */
.room-alquimistas .room-symbol{
  animation:roomAlquimistas 8.2s ease-in-out infinite;
}
/* Multiedad — movimiento de conjunto, muy lento y estable. */
.room-multiedad .room-symbol{
  animation:roomMultiedad 7.8s ease-in-out infinite;
}

.room-poetas .room-art::after{animation-duration:11s}
.room-musicos .room-art::after{animation-duration:12.5s}
.room-descubridores .room-art::after{animation-duration:14s}
.room-alquimistas .room-art::after{animation-duration:15.5s}
.room-multiedad .room-art::after{animation-duration:17s}

@keyframes roomPoetas{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-3px) rotate(-.5deg)}
}
@keyframes roomMusicos{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-2px) scale(1.025)}
}
@keyframes roomDescubridores{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(2px,-2px,0) rotate(1deg)}
}
@keyframes roomAlquimistas{
  0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}
  50%{transform:translate3d(2px,-2px,0) rotate(2deg)}
}
@keyframes roomMultiedad{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-2px) scale(1.018)}
}

@media (prefers-reduced-motion: reduce){
  .room-poetas .room-symbol,
  .room-musicos .room-symbol,
  .room-descubridores .room-symbol,
  .room-alquimistas .room-symbol,
  .room-multiedad .room-symbol,
  .room-art::after,
  .room-art::before{
    animation:none !important;
  }
}

/* =========================================================
   REFINAMIENTO FINAL — v17
   Tipografía editorial + ritmo espacial consistente
   ========================================================= */
:root{
  --serif:'DM Serif Display', Georgia, serif;
  --sans:'Nunito Sans', Arial, sans-serif;
  --space-section:clamp(96px, 10vw, 148px);
  --space-section-tight:clamp(72px, 7vw, 104px);
  --reading-width:66ch;
}

/* Lectura más descansada */
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance}
h1{line-height:1.02;letter-spacing:-.025em;margin-bottom:22px}
h2{line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}
h3{line-height:1.16;letter-spacing:-.012em}
p{font-size:16px;line-height:1.78;margin-bottom:18px;max-width:var(--reading-width)}
.hero-content p{font-size:17px;line-height:1.75}
.eyebrow{font-size:10.5px;letter-spacing:.145em;margin-bottom:15px}
.section-heading{margin-bottom:54px}
.section-heading h2{margin-bottom:16px}

/* Ritmo vertical: cada sección tiene una pausa clara */
.section{padding:var(--space-section) 0}
.hero{padding:clamp(66px,8vw,110px) 0 clamp(82px,9vw,122px)}
.quote-strip{padding:clamp(42px,5vw,68px) 0}
.character-band{height:clamp(92px,9vw,130px)}
.specialist{padding-top:var(--space-section-tight);padding-bottom:var(--space-section-tight)}
.invitation{padding:var(--space-section-tight) 0 var(--space-section)}

/* Mejor relación entre texto y composiciones */
.two-col{gap:clamp(48px,7vw,96px)}
.proposal-grid{gap:clamp(48px,6vw,82px)}
.start-grid{gap:clamp(48px,7vw,92px)}
.specialist-grid{column-gap:clamp(42px,6vw,86px)}
.hero-copy{gap:clamp(38px,6vw,82px)}

/* Pausas internas más elegantes */
.actions{margin-top:34px;gap:14px}
.btn{padding:14px 23px;letter-spacing:.005em}
.pillar{padding:34px;min-height:236px}
.pillar h3{margin-bottom:13px}
.rooms-heading{margin-bottom:clamp(42px,5vw,68px)}
.rooms-path{gap:28px}
.room-body{padding:30px 30px 32px}
.room-body h3{font-size:28px;line-height:1.1}
.room-card p{line-height:1.75}
.space-grid{gap:22px}
.space-card h3{padding:22px 22px 25px}
.check-list{gap:15px;margin-top:28px}
.invitation-box{padding:clamp(42px,5vw,64px);gap:44px}
.footer{padding-top:80px}
.footer-grid{gap:48px;padding-bottom:58px}

/* Separación más limpia entre bloques consecutivos */
.section + .section{position:relative}
.section-heading.center{max-width:840px}
.text-link{margin-top:14px}

/* Navegación y marca con jerarquía más tranquila */
.nav-wrap{min-height:94px}
.main-nav{font-size:11.5px;letter-spacing:.005em}
.main-nav a{padding:10px 10px}
.brand-text strong{letter-spacing:-.025em}

/* Ajustes móviles: aire sin alargar en exceso */
@media(max-width:820px){
  :root{--space-section:82px;--space-section-tight:68px}
  p{font-size:15.5px;line-height:1.75}
  .hero-content p{font-size:16px}
  .section-heading{margin-bottom:40px}
  .hero{padding-top:58px;padding-bottom:88px}
  .character-band{height:88px}
  .pillar{padding:30px}
  .room-body{padding:26px 24px 28px}
  .space-grid{gap:18px}
}
@media(max-width:540px){
  :root{--space-section:70px;--space-section-tight:58px}
  h1{font-size:clamp(39px,11vw,48px);line-height:1.04}
  h2{font-size:clamp(31px,9vw,40px)}
  p{font-size:15px;line-height:1.72}
  .section-heading{margin-bottom:34px}
  .character-band{height:76px}
  .invitation-box{padding:32px 28px}
}

/* =========================================================
   REFINAMIENTO FINAL — v17
   Tipografía editorial, ritmo vertical y espacios respirables
   ========================================================= */
:root{
  --measure:66ch;
  --section-space:clamp(92px,9vw,142px);
  --section-space-tight:clamp(72px,7vw,108px);
  --heading-gap:18px;
}

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:.002em;
}
.container{width:min(1180px,91.5%)}

/* Jerarquía más tranquila y legible */
h1,h2,h3{
  text-wrap:balance;
  letter-spacing:-.018em;
}
h1{font-size:clamp(46px,5.15vw,72px);line-height:1.015;margin-bottom:20px}
h2{font-size:clamp(36px,3.55vw,54px);line-height:1.08;margin-bottom:18px}
h3{font-size:clamp(22px,1.75vw,27px);line-height:1.18;margin-bottom:11px}
p{
  font-size:clamp(15px,1.05vw,16.5px);
  line-height:1.78;
  margin-bottom:18px;
  max-width:var(--measure);
}
.eyebrow{
  font-size:10px;
  letter-spacing:.15em;
  margin-bottom:14px;
}
.eyebrow:before{width:28px;height:2px}
.section-heading{max-width:820px;margin-bottom:52px}
.section-heading.center{margin-bottom:56px}
.section-heading h2{max-width:19ch}
.section-heading.center h2{margin-left:auto;margin-right:auto}

/* Ritmo general: más aire sin generar vacíos excesivos */
.section{padding:var(--section-space) 0}
.section + .section{border-top-color:rgba(232,229,220,.72)}
.hero{padding:clamp(68px,7vw,102px) 0 clamp(86px,8vw,122px)}
.hero-copy{gap:clamp(48px,6vw,78px)}
.hero-content{padding:28px 0}
.hero-content h1{max-width:13.2ch}
.hero-content p{font-size:clamp(16px,1.25vw,18px);line-height:1.74;margin-top:4px}
.character-band{height:clamp(86px,8vw,118px)}
.quote-strip{padding:clamp(44px,5vw,68px) 0}

/* Pausas visuales entre bloques */
.two-col{gap:clamp(54px,7vw,96px)}
.proposal-grid{gap:clamp(50px,6vw,82px)}
.specialist{padding-top:var(--section-space-tight);padding-bottom:var(--section-space-tight)}
.proposal-axes{padding-top:var(--section-space-tight);padding-bottom:var(--section-space)}
.pillars{padding-top:var(--section-space-tight);padding-bottom:var(--section-space)}
.rooms{padding-top:clamp(98px,10vw,150px);padding-bottom:clamp(104px,10vw,156px)}
.spaces{padding-top:var(--section-space);padding-bottom:var(--section-space-tight)}
.start{padding-top:var(--section-space);padding-bottom:var(--section-space)}
.childhood{padding-top:clamp(84px,8vw,126px);padding-bottom:clamp(84px,8vw,126px)}
.invitation{padding-top:var(--section-space-tight);padding-bottom:var(--section-space)}

/* Tarjetas: mejor respiración interna */
.pillar{padding:34px 32px 36px;min-height:236px}
.pillar h3{margin-bottom:12px}
.pillar p{line-height:1.7}
.axis-card{padding:30px 30px 32px}
.axis-card h3{margin-top:12px}
.space-card h3{margin-top:20px}
.space-card p{line-height:1.7}
.start-copy{max-width:62ch}
.start-steps{gap:18px}
.start-steps article{padding:24px 22px 25px}

/* Salas: lectura más serena y mayor separación */
.rooms-path{gap:20px}
.room-body{padding:29px 30px 32px}
.room-kicker{font-size:10px;letter-spacing:.14em;margin-bottom:10px}
.room-body h3{font-size:clamp(26px,2.1vw,31px);line-height:1.12;margin-bottom:14px}
.room-body p{font-size:14.5px;line-height:1.76;margin-bottom:17px}
.room-featured .room-body{padding:42px 46px}
.rooms-closing{margin-top:64px;padding:25px 30px;max-width:760px}
.rooms-closing p{font-size:20px;line-height:1.6}

/* CTA y cierre con más calma */
.actions{gap:14px;margin-top:32px}
.btn{padding:14px 23px;line-height:1.2}
.invitation-box{padding:clamp(38px,5vw,62px)}
.invitation-box h2{max-width:20ch}
.footer{padding-top:68px}
.footer-grid{gap:52px}
.footer p{line-height:1.7}

/* Navegación y microtipografía */
.main-nav{font-size:11.5px;letter-spacing:.01em}
.main-nav a{padding:10px 10px}
.brand-text strong{letter-spacing:-.025em}
.brand-text small{letter-spacing:.16em}

@media(max-width:900px){
  :root{--section-space:clamp(76px,10vw,106px);--section-space-tight:clamp(62px,8vw,86px)}
  .container{width:min(1180px,90%)}
  .section-heading{margin-bottom:42px}
  .room-featured .room-body{padding:30px 28px}
}
/* =========================================================
   v18 — MÁS VIDA
   Íconos ilustrados, color más presente, menos vacío visual.
   ========================================================= */

/* Ritmo vertical algo más compacto: la v17 dejó demasiado aire */
:root{
  --section-space:clamp(74px,7.5vw,116px);
  --section-space-tight:clamp(58px,5.5vw,86px);
}

/* PILARES — círculos de color con íconos propios en vez de glifos sueltos */
.pillar .icon{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  box-shadow:0 10px 22px rgba(23,48,79,.14);
  margin-bottom:20px;
}
.pillar .icon svg{width:28px;height:28px}
.pillar.yellow .icon{background:linear-gradient(145deg,#FFD21A,#F2B705)}
.pillar.sky .icon{background:linear-gradient(145deg,#5BB9D4,#2E9BB8)}
.pillar.green .icon{background:linear-gradient(145deg,#8DBA62,#6FA144)}
.pillar{border-width:0;position:relative;overflow:hidden}
.pillar:before{content:"";position:absolute;right:-30px;bottom:-34px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.4);pointer-events:none}

/* SALAS — íconos sobre círculos de color sólido, más contraste y calidez */
.room-art{background:var(--white)}
.room-art.poet{background:linear-gradient(145deg,#FFD21A,#F2B705);color:#fff}
.room-art.music{background:linear-gradient(145deg,#5BB9D4,#2E9BB8);color:#fff}
.room-art.discovery{background:linear-gradient(145deg,#8DBA62,#6FA144);color:#fff}
.room-art.alchemy{background:linear-gradient(145deg,#EF806B,#D8583F);color:#fff}
.room-art.multi{background:linear-gradient(145deg,#C8B8E8,#A98FD9);color:#fff}
.room-art small{color:rgba(255,255,255,.8)}
.room-art:after{background:rgba(255,255,255,.28)}

/* ESPACIOS — íconos amigables en lugar de placeholders vacíos */
.space-photo{
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.space-photo .icon-circle{
  width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  position:relative;z-index:1;background:rgba(255,255,255,.22);
  box-shadow:0 12px 26px rgba(23,48,79,.14),inset 0 0 0 1px rgba(255,255,255,.35);
}
.space-photo svg{width:32px;height:32px;filter:drop-shadow(0 2px 4px rgba(23,48,79,.18))}
.space-photo.icon-yellow{background:linear-gradient(135deg,#FFE38A,#FFD21A)}
.space-photo.icon-sky{background:linear-gradient(135deg,#B7E4F0,#5BB9D4)}
.space-photo.icon-coral{background:linear-gradient(135deg,#F7BBAA,#EF806B)}
.space-photo.icon-lavender{background:linear-gradient(135deg,#E3D8F7,#C8B8E8)}
.space-card p{padding:0 22px;margin-bottom:8px}
.space-pending{
  display:inline-block;margin:auto 22px 22px;align-self:flex-start;padding:8px 13px;border-radius:12px;
  background:var(--white);font-size:11.5px;font-weight:750;color:#7a8794;
}
.space-card{display:flex;flex-direction:column}
.space-card h3{margin-top:20px}

/* MAPA — pin ilustrado en vez de un bloque vacío */
.map-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(135deg,#CDEEF6,#FFF1C2);color:var(--navy);
}
.map-placeholder .map-pin{width:36px;height:36px;color:#218EAA;margin-bottom:2px}
.map-placeholder span{font-weight:800;font-size:15px}
.map-placeholder small{display:block;font-weight:600;margin-top:0;color:var(--muted)}

/* Datos de contacto pendientes: menos "roto", más placeholder cuidado */
.to-complete{font-style:italic;font-weight:400;opacity:.65}

/* MURAL — banda ilustrada de color entre secciones */
.mural-band{
  height:clamp(160px,22vw,320px);overflow:hidden;
}
.mural-band img{width:100%;height:100%;object-fit:cover;object-position:center 30%}

/* Un poco más de color de fondo en tramos largos de lectura */
.rooms{position:relative;overflow:hidden}
.rooms:before{content:"";position:absolute;left:-70px;top:-40px;width:220px;height:220px;border-radius:50%;background:rgba(255,210,26,.10);pointer-events:none}
.rooms:after{content:"";position:absolute;right:-90px;bottom:10%;width:260px;height:260px;border-radius:50%;background:rgba(91,185,212,.08);pointer-events:none}
.spaces{position:relative;overflow:hidden}
.spaces:before{content:"";position:absolute;right:-60px;top:20%;width:180px;height:180px;border-radius:50%;background:rgba(141,186,98,.09);pointer-events:none}

/* =========================================================
   v19 — COLOR Y VIDA, MÁS FUERTE
   Confetti, mascota, ilustración liberada de su marco,
   franja de caritas repetida y footer amarillo.
   ========================================================= */

/* Doodles del hero: mismo espíritu que los trazos sueltos de la referencia */
.hero-content{position:relative}
.doodle{position:absolute;pointer-events:none}
.doodle-heart{width:30px;height:30px;top:-6px;right:64px;transform:rotate(8deg)}
.doodle-swirl{width:70px;height:34px;bottom:-6px;left:2px;opacity:.8}
@media(max-width:820px){.doodle{display:none}}

/* Confetti reutilizable: puntos y estrellas de color cerca de los títulos */
.heading-with-confetti{position:relative}
.confetti{position:absolute;pointer-events:none;z-index:2}
.confetti-dot{width:13px;height:13px;border-radius:50%;box-shadow:0 3px 6px rgba(23,48,79,.12)}
.confetti-dot.c-yellow{background:var(--yellow)}
.confetti-dot.c-sky{background:var(--sky)}
.confetti-dot.c-coral{background:var(--coral)}
.confetti-dot.c-green{background:var(--green)}
.confetti-star{font-size:22px;line-height:1;font-family:Georgia,serif}
.confetti-star.c-yellow{color:#E0A800}
.confetti-star.c-sky{color:var(--sky)}
.confetti-star.c-coral{color:var(--coral)}

/* La ilustración del nido sale de su marco blanco: más grande, más viva */
.art-nido{
  background:transparent;box-shadow:none;overflow:visible;position:relative;
  min-height:460px;padding:0;
}
.art-nido:before{
  content:"";position:absolute;left:50%;top:50%;
  width:86%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,210,26,.42) 0%,rgba(255,210,26,.16) 55%,rgba(255,210,26,0) 72%);
  border-radius:50%;z-index:0;
}
.art-nido img{height:480px;position:relative;z-index:1;filter:drop-shadow(0 18px 30px rgba(23,48,79,.12))}
@media(max-width:900px){.art-nido{min-height:380px}.art-nido img{height:370px}}
@media(max-width:620px){.art-nido{min-height:320px}.art-nido img{height:310px}}

/* Más color detrás de los títulos de secciones largas */
.pillars{position:relative;overflow:hidden}
.pillars:before{content:"";position:absolute;left:-60px;top:-50px;width:230px;height:230px;border-radius:50%;background:rgba(255,210,26,.14);pointer-events:none}
.pillars:after{content:"";position:absolute;right:-80px;bottom:-70px;width:260px;height:260px;border-radius:50%;background:rgba(91,185,212,.10);pointer-events:none}
.specialist{position:relative;overflow:hidden}
.specialist:before{content:"";position:absolute;left:-70px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:rgba(141,186,98,.10);pointer-events:none}

/* Segunda franja de caritas, más chica, antes del footer */
.character-band-footer{height:clamp(56px,6vw,84px)}

/* FOOTER — de navy plano a amarillo, con la mascota del ojo en grande */
.footer{
  position:relative;overflow:hidden;
  background:linear-gradient(175deg,#FFDA3D,#FFC300);
  color:var(--navy);
}
.footer h3{color:var(--navy)}
.footer p{color:rgba(23,48,79,.72)}
.footer-brand img{filter:none}
.footer label{color:rgba(23,48,79,.78)}
.footer input,.footer textarea{background:rgba(255,255,255,.96);box-shadow:inset 0 0 0 1px rgba(23,48,79,.10)}
.footer .btn-blue{background:var(--navy);color:#fff;box-shadow:0 8px 18px rgba(23,48,79,.22)}
.footer .to-complete{color:rgba(23,48,79,.55)}
.map-placeholder{background:rgba(255,255,255,.6)}
.map-embed{
  min-height:220px;border-radius:24px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(23,48,79,.08);
  background:#eef2f0;
}
.map-embed iframe{display:block;width:100%;height:100%;min-height:220px}
@media(max-width:820px){.map-embed{min-height:260px}.map-embed iframe{min-height:260px}}
.footer-bottom{border-top-color:rgba(23,48,79,.14);color:rgba(23,48,79,.62)}
.footer-mascot{
  position:absolute;right:clamp(-10px,2vw,30px);bottom:0;
  width:clamp(120px,14vw,220px);z-index:0;opacity:.94;
  transform:rotate(-4deg);
}
.footer-mascot img{width:100%;filter:drop-shadow(0 14px 22px rgba(23,48,79,.18))}
.footer-grid,.footer-bottom{position:relative;z-index:1}
@media(max-width:820px){.footer-mascot{width:110px;opacity:.5}}
@media(max-width:540px){.footer-mascot{display:none}}

/* =========================================================
   v21 — FOTOS DE MUESTRA
   Ubicación de fotos provisorias (a reemplazar por las
   definitivas) en el hero y en tres salas, para evaluar el
   tratamiento visual antes de tener las fotos finales.
   ========================================================= */
.sample-tag{
  position:absolute;z-index:5;top:12px;left:12px;
  background:rgba(23,48,79,.82);color:#fff;font-size:10.5px;font-weight:800;
  letter-spacing:.04em;padding:5px 10px;border-radius:8px;
  box-shadow:0 4px 10px rgba(23,48,79,.25);
  pointer-events:none;
}

/* Hero con foto real en vez de la ilustración */
.hero-institutional-art.is-photo{background:#e9eef0;display:block;padding:0}
.hero-institutional-art.is-photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
}
.hero-institutional-art.is-photo .art-caption{bottom:16px}

/* Salas con foto real en vez del ícono de color */
.room-art.has-photo{padding:0;background:#e9eef0}
.room-art.has-photo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.room-art.has-photo:after{display:none}
.room-art.has-photo:before{
  content:"";position:absolute;inset:0;z-index:2;animation:none;
  background:linear-gradient(180deg,rgba(23,48,79,0) 55%,rgba(23,48,79,.38) 100%);
}
.room-art.has-photo small{
  z-index:3;color:#fff;opacity:.9;
}
.room-card:hover .room-art.has-photo img{transform:scale(1.05)}

@media(max-width:540px){
  :root{--section-space:72px;--section-space-tight:58px}
  .container{width:90%}
  h1{font-size:clamp(40px,12vw,52px);line-height:1.04}
  h2{font-size:clamp(32px,9vw,42px);line-height:1.1}
  h3{font-size:23px}
  p{font-size:15.5px;line-height:1.74}
  .hero{padding:58px 0 84px}
  .hero-content h1{max-width:15ch}
  .section-heading{margin-bottom:34px}
  .section-heading.center{margin-bottom:38px}
  .pillar{padding:28px 26px 30px;min-height:auto}
  .room-body{padding:26px 24px 28px}
  .rooms-closing{margin-top:46px;padding:21px 18px;gap:10px}
  .rooms-closing p{font-size:18px}
  .invitation-box{padding:30px 24px}
}