/* Web de pruebas 1.0.3: color suave, profundidad y espacio. */
:root{--shadow:0 5px 16px #173e3212;--gap:24px}
.panel{margin-bottom:28px;box-shadow:var(--shadow)}
.feature-grid{gap:20px;margin-bottom:28px}
.features .feature-grid{margin-bottom:0}
.feature{box-shadow:0 3px 12px #173e3210;transition:transform 180ms ease,box-shadow 180ms ease}
.feature:hover{transform:translateY(-2px);box-shadow:0 7px 18px #173e321b}
.story-grid,.bottom-grid{gap:24px}
.steps-panel,.notes-teaser{padding:28px}
.personal{padding:24px}
.personality-grid{gap:14px}
.personality{padding:15px;box-shadow:0 2px 7px #173e320a}
.closing{margin-top:28px;padding:22px}
.site-header{margin-bottom:8px}
.site-footer{padding-top:22px}
.page-intro{border:1px solid #cadfcb;border-radius:20px;margin:12px 0 32px;padding:42px;box-shadow:var(--shadow);background:#e7f2ee}
body[data-page=funciones] .page-intro{background:#deecde}
body[data-page=funciones] .function-section{background:#f0f6ec;padding:36px;gap:32px}
body[data-page=funciones] .function-section:nth-of-type(even){background:#e7f2ee}
body[data-page=funciones] #semana{background:#f7f1df}
body[data-page=funciones] #notas{background:#e0eee6}
body[data-page=novedades] .page-intro{background:#e0eee6}
.release-list{padding:0 22px 20px}
.release{background:#edf5ee;border-color:#c4d8ca;padding:30px;gap:28px}
.release:nth-child(even){background:#e7f2ee}
body[data-page=acerca] .page-intro{background:#e0eadb}
.about-story{background:#e7efdf;padding:42px}
.help-layout{padding:0 22px 32px;gap:32px}
body[data-page=ayuda] .page-intro{background:#f1ebdc}
.faq details{background:#f1f6ed;box-shadow:0 3px 12px #173e320c;margin-bottom:20px;padding:22px}
.faq details[open]{background:#e0eee6}
.steps-panel{background:#f1ebdc;scroll-margin-top:26px}
.steps{gap:24px}
.steps-help{display:inline-block;margin-top:24px;color:var(--green);font-size:14px;padding:4px 0}
.personal{background:#e7f2ee}.week-panel{background:#f0f6ec}
.demo-week{box-shadow:0 3px 9px #173e320a}
.function-section,.release,.faq details,.personality{transition:box-shadow 180ms ease}
/* Content remains visible without JS. A brief fade does not move the layout. */
@media(prefers-reduced-motion:no-preference){
 main>.page-intro,main>.hero{animation:nitu-arrive 350ms ease-out both}
 .feature:focus-visible{transform:translateY(-2px);box-shadow:0 7px 18px #173e321b}
 @keyframes nitu-arrive{from{opacity:.75}to{opacity:1}}
}
@media(max-width:800px){
 .panel{margin-bottom:24px}.story-grid,.bottom-grid{gap:20px}
 .feature-grid{gap:16px;margin-bottom:24px}
 .page-intro{padding:30px 25px;margin-bottom:26px}
 .function-section{gap:22px}.release-list{padding:0 8px 20px}
 .personality-grid{gap:12px}.closing{margin-top:24px}
}
@media(max-width:480px){
 .panel{margin-bottom:22px}.feature-grid{gap:12px}
 .feature{padding:17px}.features{padding:20px 14px}
 .steps-panel{padding:26px 22px}.steps{gap:30px}
 .story-grid,.bottom-grid{gap:0}
 .notes-teaser{padding:24px 18px}.personal{padding:22px 14px}
 .personality{padding:14px 17px}.closing{padding:20px 16px;margin-top:24px}
 .page-intro{padding:28px 20px;border-radius:15px}
 body[data-page=funciones] .function-section{padding:24px 20px;gap:22px}
 .release{padding:24px 20px;gap:18px}.about-story{padding:26px 22px}
 .help-layout{padding:0 6px 22px}.faq details{padding:20px 18px;margin-bottom:18px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Navigation stays visible on phones; links retain comfortable touch targets. */
[hidden]{display:none!important}
@media(max-width:800px){
 .site-header .brand{order:0}
 .site-header #site-nav{display:grid;order:1;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%;padding:8px;background:var(--sage);font-size:13px}
 #site-nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 4px;text-align:center;line-height:1.3;white-space:normal;border-radius:8px}
 #site-nav a[aria-current=page]{background:#d8e9d9;text-decoration:none}
 .site-header .header-actions{order:2;gap:10px}
 .header-actions .button{min-width:0;text-align:center;white-space:normal}
}