.compass-preview{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;padding-top:55px}.compass-panel{text-align:center;min-width:0}.compass-panel>.eyebrow{color:#51665b;letter-spacing:2px}.compass-stage{position:relative;width:100%;max-width:480px;aspect-ratio:1;margin:auto}.compass-face{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle at 40% 32%,#e5edcd,#f7f8f2 70%);box-shadow:0 14px 35px #123e3210}.compass-rose{display:block;width:100%;height:100%;object-fit:contain;animation:explore-direction 24s ease-in-out infinite}.compass-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#123e32;color:#d3ee8a;font:italic clamp(18px,2.5vw,30px) Georgia;box-shadow:0 2px 8px #092c2420}.direction{position:absolute;transform:translate(-50%,-50%);font:italic clamp(15px,1.6vw,20px)/1.4 Georgia;color:#51665b;width:35%;padding:8px 0}.direction::after{content:"";display:block;width:5px;height:5px;border-radius:50%;background:#809f45;margin:8px auto 0;opacity:.3}.d1{top:11%;left:50%;animation:phrase-one 24s ease-in-out infinite}.d2{top:77%;left:81%;animation:phrase-two 24s ease-in-out infinite}.d3{top:77%;left:19%;animation:phrase-three 24s ease-in-out infinite}.compass-caption{font:italic 18px/1.6 Georgia;color:#51665b}.compass-panel button{border:0;border-bottom:1px solid #a7b99c;background:none;color:#51665b;font:13px Arial;padding:10px;cursor:pointer}@keyframes explore-direction{0%,19%{transform:rotate(0)}33%,52%{transform:rotate(130deg)}66%,85%{transform:rotate(230deg)}100%{transform:rotate(360deg)}}@keyframes phrase-one{0%,19%,100%{color:#123e32;text-shadow:0 0 18px #93b84955}33%,85%{color:#708069;text-shadow:none}}@keyframes phrase-two{0%,19%,66%,100%{color:#708069;text-shadow:none}33%,52%{color:#123e32;text-shadow:0 0 18px #93b84955}}@keyframes phrase-three{0%,52%,100%{color:#708069;text-shadow:none}66%,85%{color:#123e32;text-shadow:0 0 18px #93b84955}}.paused .compass-rose,.paused .direction{animation-play-state:paused}@media(max-width:800px){.compass-preview{grid-template-columns:1fr;gap:25px}.compass-stage{max-width:380px}.compass-core{font-size:23px}}@media(prefers-reduced-motion:reduce){.compass-rose,.direction{animation:none!important}.compass-panel button{display:none}}@media print{.compass-rose,.direction{animation:none!important}.compass-panel button{display:none}}
/* Brújula más ligera; énfasis sincronizado con cada dirección. */
.compass-face{background:radial-gradient(circle at 42% 36%,#e5edcd55,transparent 68%);box-shadow:none}
.compass-rose{opacity:.7;filter:drop-shadow(0 3px 5px #123e3210)}
.compass-core{background:radial-gradient(circle at 35% 30%,#486a42,#123e32 75%);box-shadow:0 0 20px #aacd7430;font-weight:400}
.direction{isolation:isolate;transition:color .5s}
.direction::before{content:"";position:absolute;z-index:-1;inset:-7px -10px;border-radius:50%;background:radial-gradient(ellipse,#d3ee8a99 0%,#d3ee8a40 42%,transparent 73%);opacity:0}
.direction::after{width:6px;height:6px;background:#739337;box-shadow:0 0 10px #aacd74;opacity:.3}
.d1::before,.d1::after{animation:illuminate-one 24s ease-in-out infinite}
.d2::before,.d2::after{animation:illuminate-two 24s ease-in-out infinite}
.d3::before,.d3::after{animation:illuminate-three 24s ease-in-out infinite}
@keyframes phrase-one{0%,19%,100%{color:#123e32;text-shadow:0 0 12px #c7e88a;font-weight:700}28%,90%{color:#708069;text-shadow:none;font-weight:400}}
@keyframes phrase-two{0%,24%,61%,100%{color:#708069;text-shadow:none;font-weight:400}33%,52%{color:#123e32;text-shadow:0 0 12px #c7e88a;font-weight:700}}
@keyframes phrase-three{0%,57%,96%,100%{color:#708069;text-shadow:none;font-weight:400}66%,85%{color:#123e32;text-shadow:0 0 12px #c7e88a;font-weight:700}}
@keyframes illuminate-one{0%,19%,100%{opacity:1}28%,90%{opacity:0}}
@keyframes illuminate-two{0%,24%,61%,100%{opacity:0}33%,52%{opacity:1}}
@keyframes illuminate-three{0%,57%,96%,100%{opacity:0}66%,85%{opacity:1}}
.paused .direction::before,.paused .direction::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.direction::before,.direction::after{animation:none!important}.direction::before{opacity:0}.direction::after{opacity:.5}}
@media print{.direction::before,.direction::after{animation:none!important}}
/* Volumen sin transparencia; iluminación gradual sin cambios de peso. */
.compass-rose{opacity:1;filter:drop-shadow(0 1px 0 #e5efc6) drop-shadow(0 3px 1px #092c2438) drop-shadow(0 9px 7px #092c2426)}
.compass-face{background:radial-gradient(circle at 38% 28%,#eaf0dc88,transparent 66%);box-shadow:none}
.direction{font-weight:400!important}
.d1{animation:soft-phrase-one 24s linear infinite}.d2{animation:soft-phrase-two 24s linear infinite}.d3{animation:soft-phrase-three 24s linear infinite}
.d1::before,.d1::after{animation:soft-light-one 24s linear infinite}.d2::before,.d2::after{animation:soft-light-two 24s linear infinite}.d3::before,.d3::after{animation:soft-light-three 24s linear infinite}
@keyframes soft-light-one{0%,22%,100%{opacity:0}7%,14%{opacity:1}}
@keyframes soft-light-two{0%,30%,55%,100%{opacity:0}38%,47%{opacity:1}}
@keyframes soft-light-three{0%,63%,90%,100%{opacity:0}71%,80%{opacity:1}}
@keyframes soft-phrase-one{0%,22%,100%{color:#708069;text-shadow:0 0 12px #c7e88a00}7%,14%{color:#123e32;text-shadow:0 0 12px #c7e88a99}}
@keyframes soft-phrase-two{0%,30%,55%,100%{color:#708069;text-shadow:0 0 12px #c7e88a00}38%,47%{color:#123e32;text-shadow:0 0 12px #c7e88a99}}
@keyframes soft-phrase-three{0%,63%,90%,100%{color:#708069;text-shadow:0 0 12px #c7e88a00}71%,80%{color:#123e32;text-shadow:0 0 12px #c7e88a99}}
@media(prefers-reduced-motion:reduce){.direction,.direction::before,.direction::after{animation:none!important}}
/* Adaptación al fondo verde de la portada vigente. */
.hero .compass-panel{width:100%;max-width:380px;justify-self:center;align-self:center}
.hero .compass-panel>.eyebrow,.hero .compass-caption,.hero .compass-panel button{color:#d4dfc5}
.hero .compass-caption{font-size:15px;margin:0 0 6px}
.hero .compass-face{background:radial-gradient(circle at 35% 28%,#f7f8f2,#dbe6c9 76%,#b2c395);box-shadow:0 9px 22px #092c2455}
.hero .direction{font-size:17px;color:#d4dfc5}
@keyframes soft-phrase-one{0%,22%,100%{color:#d4dfc5;text-shadow:0 0 12px #c7e88a00}7%,14%{color:#f4ffdc;text-shadow:0 0 12px #c7e88a99}}
@keyframes soft-phrase-two{0%,30%,55%,100%{color:#d4dfc5;text-shadow:0 0 12px #c7e88a00}38%,47%{color:#f4ffdc;text-shadow:0 0 12px #c7e88a99}}
@keyframes soft-phrase-three{0%,63%,90%,100%{color:#d4dfc5;text-shadow:0 0 12px #c7e88a00}71%,80%{color:#f4ffdc;text-shadow:0 0 12px #c7e88a99}}
@media(max-width:1000px){.hero .compass-panel{max-width:320px;margin-top:8px}.hero .compass-core{font-size:23px}}
@media(max-width:480px){.hero .compass-panel{max-width:290px}.hero .direction{font-size:15px}.hero .compass-core{font-size:19px}}
/* Más aire entre frases; fondo circular de borde difuminado. */
.hero .d2,.hero .d3{top:85%}
.hero .compass-face{background:none;box-shadow:none;isolation:isolate}
.hero .compass-face::before{content:"";position:absolute;inset:-15%;z-index:-1;border-radius:50%;background:radial-gradient(circle at 50% 50%,#edf2df 0%,#dbe6c9 43%,#c3d2ab99 56%,#b2c39533 65%,transparent 74%);pointer-events:none}
@media(max-width:1000px){.hero .compass-panel{max-width:390px;width:100%}.hero .compass-stage{max-width:none}}
@media(max-width:480px){.hero .compass-panel{max-width:360px;width:100%}.hero .compass-face{inset:20%}.hero .direction{font-size:16px}.hero .compass-core{font-size:23px}}

/* Apertura compacta solicitada: misma brújula, menor espacio vertical. */
.hero .compass-panel{max-width:280px;margin-top:0}
.hero .compass-panel>.eyebrow{margin:0 0 6px;font-size:11px}
.hero .compass-stage{max-width:280px}
.hero .direction{font-size:15px}
.hero .compass-caption{font-size:14px;line-height:1.45;margin:0 0 4px}
@media(max-width:800px){.hero .compass-panel{max-width:250px}.hero .compass-stage{max-width:250px}.hero .compass-core{font-size:20px}.hero .direction{font-size:14px}.hero .compass-panel button{padding:8px 10px}}

/* En escritorio, la apertura aprovecha el ancho disponible sin cambiar el móvil. */
@media(min-width:1001px){
 .hero{padding-top:44px;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);column-gap:48px;align-items:center}
 .hero h1{font-size:clamp(3.4rem,4.8vw,5rem);letter-spacing:-.045em;line-height:1.08;margin:20px 0}
 .hero .lead{font-size:clamp(18px,1.25vw,20px);line-height:1.65;max-width:660px;margin-bottom:26px}
 .hero .primary{font-size:18px;padding:22px 28px}
 .hero .quiet{font-size:14px;margin-top:16px}
 .hero .intro>.eyebrow{font-size:13px}
 .hero .compass-panel{max-width:clamp(340px,30vw,460px)}
 .hero .compass-stage{max-width:none}
 .hero .compass-panel>.eyebrow{font-size:13px;margin-bottom:8px}
 .hero .direction{font-size:clamp(18px,1.5vw,23px)}
 .hero .compass-core{font-size:clamp(26px,2.4vw,36px)}
 .hero .compass-caption{font-size:18px;line-height:1.5;margin-bottom:8px}
 .hero .compass-panel button{font-size:14px;padding:10px 14px}
 .hero-foot{margin-top:18px;padding:18px 0;font-size:14px}
}