:root{--turquesa-d:#237a60;--coral-d:#a73e3e}
html{scroll-padding-top:100px}
body{isolation:isolate}
.cover-background{display:none;position:fixed;inset:0;z-index:-1;background:var(--crema) url('familia-poster.jpg') center/cover no-repeat;pointer-events:none}
.on-cover .cover-background{display:block}
.cover-background video{width:100%;height:100%;object-fit:cover;object-position:center}
.cover-background:after{content:"";position:absolute;inset:0;background:rgba(250,236,230,.40)}
.cover-background.unavailable video{visibility:hidden}
.cover{background:rgba(255,250,247,.80)}
.on-cover .social-block{background:rgba(255,250,247,.80)}
.stage{position:relative}
.social-block{text-align:center;margin:20px 0 0;padding:18px 20px;border-radius:22px;background:rgba(255,250,247,.94)}
.social-block p{max-width:470px;margin:0 auto 12px;font-size:1rem;font-weight:600;line-height:1.6}
.social-links{display:flex;justify-content:center;gap:14px}
.social-links a{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;color:var(--tinta);background:#fff;border:1px solid #d3e6dd;transition:background .2s,transform .2s}
.social-links a:hover{background:#d7f4e8;transform:translateY(-2px)}
.social-links svg{width:24px;height:24px}
.video-toggle{min-height:44px;padding:10px 16px;background:transparent;border:0;text-decoration:underline;text-underline-offset:4px;color:var(--tinta);font:inherit;font-size:.875rem;cursor:pointer;margin-top:8px}
.brain-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.brain-zone{min-width:0;position:relative;padding:22px 12px}
.brain-zone .ico{position:relative;width:max-content;margin:0 auto 8px}
.signal{position:absolute;right:-15px;top:4px;width:11px;height:11px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 15%,transparent);animation:signal-pulse 2s ease-in-out infinite;animation-play-state:paused}
.stage.active .signal{animation-play-state:running}
.modal .m-ico{position:relative;width:max-content}
.modal-bg.show .signal{animation-play-state:running}
.modal .m-ico .signal-red{top:.625em}
.modal .m-ico .signal-green{top:.085em}
.signal-red{color:#d63232;right:auto;left:50%;top:22px;transform:translateX(-50%)}.signal-green{color:#16804b;right:auto;left:50%;top:3px;transform:translateX(-50%)}
@keyframes signal-pulse{0%,100%{opacity:.6;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 12%,transparent)}50%{opacity:1;box-shadow:0 0 12px 5px color-mix(in srgb,currentColor 30%,transparent)}}
.explored-label{display:block;font-size:.875rem;min-height:1.5em;margin-top:10px;font-weight:700;color:#237a60;visibility:hidden}
.opened .explored-label{visibility:visible}
.exploration-status{text-align:center;font-size:.9rem;font-weight:700;margin:12px 0 4px}
.btn:disabled{background:#e1e5e2;color:#616c66;box-shadow:none;cursor:not-allowed;transform:none}
.btn-primary:hover:not(:disabled){background:#237a60;color:white}
.btn-coral:hover{background:#a73e3e}
:focus-visible{outline:3px solid #155b46;outline-offset:5px}
h1:focus,h2:focus{outline:none}
.flip-inner{display:grid;min-height:0!important}
.rel-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr}
.rel-flip{display:flex;min-width:0}
.rel-flip .flip-inner{width:100%;flex:1}
.flip-face{position:relative;inset:auto;grid-area:1/1;min-width:0}
.flip-face p:last-child{margin-bottom:0}
.flip{border-radius:var(--radio);touch-action:manipulation}
.crit-tab{min-height:44px;font-size:.9rem}
.compare-col .txt,.q-opt,.feedback,.rel-back,.small{font-size:1rem}
.result-badge,.result-badge h2,.result-badge p,.rel-final{color:#243c32}
.four-q .qitem:before{color:#153e2d}
.q-opt.good.chosen .letter{color:#153e2d}
.crit-tab.done:not(.active):after{color:#153e2d}
.q-opt:disabled{opacity:1}
.modal-bg{overscroll-behavior:contain}
.modal{max-height:86dvh;overscroll-behavior:contain}
body.modal-open{overflow:hidden}
.btn,.social-links a{touch-action:manipulation}
.foot-nav{align-items:center}
.foot-nav .btn-primary{min-width:0}
.q-progress{scroll-margin-top:100px}
@media(max-width:480px){
 .rel-cards{grid-template-columns:1fr}
 .stage{padding-left:18px;padding-right:18px}
 .cover{padding:30px 18px 26px}.cover .intro{padding:16px}
 .crit-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .compare-row,.rel-cards{flex-direction:column}
 .brain-wrap{gap:10px}.brain-zone .zname{font-size:1rem}.brain-zone .ztag{font-size:.875rem}
 .social-block{padding:16px}.cover h1{font-size:clamp(2rem,8.5vw,2.7rem)}
 .modal{padding:22px 18px calc(24px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:359px){.brain-wrap{grid-template-columns:1fr}.foot-nav{flex-wrap:wrap}.foot-nav .btn-primary{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-list li{opacity:1;transform:none}}
