.wrap{max-width:1120px;margin:0 auto;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
.top{position:sticky;top:0;z-index:10;background:var(--superficie);border-bottom:1px solid var(--linea);padding-top:env(safe-area-inset-top)}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--tinta);text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.25rem}
.brand img{width:auto;height:44px;border-radius:0}
/* Selector de idioma (js/i18n.js): solo aparece si la página declara más de un idioma en data-idiomas. */
.idioma-btn,.idioma-sel{min-height:44px;padding:0 14px;border:1px solid var(--linea);border-radius:999px;background:transparent;color:var(--tinta);font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--linea);border-radius:12px;background:transparent}
nav.links{display:flex;gap:4px}
nav.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;color:var(--tinta-2);font-weight:600;text-decoration:none}
nav.links a[aria-current="page"]{background:var(--marca);color:var(--sobre-marca)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:999px;border:0;background:var(--marca);color:var(--sobre-marca);font-weight:700;text-decoration:none;cursor:pointer}
.hero{padding:56px 0}
.hero h1{font-family:var(--display);font-size:clamp(2rem,6vw,3.25rem);line-height:1.05;margin:0 0 12px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));gap:16px;padding-bottom:48px}
.card{background:var(--superficie);border-radius:var(--radio);padding:20px;box-shadow:var(--sombra)}
/* Celular: menú a la derecha, cerca del pulgar, en cajón que sale por la derecha. */
@media (max-width:760px){
  .menu-btn{display:inline-grid;place-items:center;order:3}
  /* El cajón se queda DENTRO de la pantalla y se revela con clip-path: con translateX quedaba fuera y ensanchaba la
     página (desborde a 320). Cerrado, además, no se ve ni se enfoca con Tab (visibility). Lección de VidaFit. */
  nav.links{position:fixed;top:0;right:0;bottom:0;width:min(300px,84vw);flex-direction:column;padding:calc(72px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) 16px;overscroll-behavior:contain;overflow-y:auto;background:var(--superficie);box-shadow:-20px 0 40px -10px rgba(0,0,0,.25);clip-path:inset(0 0 0 100%);visibility:hidden;transition:clip-path .28s cubic-bezier(.2,0,0,1),visibility 0s .28s;z-index:20}
  nav.links.open{clip-path:inset(0 0 0 -40px);visibility:visible;transition:clip-path .28s cubic-bezier(.2,0,0,1)}
}
.pie{margin-top:56px;border-top:1px solid var(--linea);background:var(--superficie);padding:20px 0 calc(20px + env(safe-area-inset-bottom))}
.pie .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;font-size:var(--t-chico);color:var(--tinta-2)}
.pie p{margin:0}
.pie nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.pie a,.pie-boton{color:var(--tinta-2);display:inline-flex;align-items:center;min-height:44px}
.pie-boton{padding:0;border:0;background:none;font:inherit;text-decoration:underline;cursor:pointer}
.legal{max-width:760px;padding-bottom:32px}
.legal h1{font-family:var(--display);font-size:var(--t-2);margin:32px 0 4px}
.legal h2{font-size:var(--t-3);margin:28px 0 6px}
.legal p{line-height:1.65;overflow-wrap:anywhere}
.legal-meta{color:var(--tinta-2);font-size:var(--t-chico)}
.borrador{margin-top:24px;padding:12px 16px;border-radius:var(--radio-chico);background:var(--marca-suave);border-left:4px solid var(--aviso)}
.aviso-corto{font-size:var(--t-chico);color:var(--tinta-2)}
.consentimiento{display:flex;gap:10px;align-items:flex-start;min-height:44px}
.consentimiento input{width:20px;height:20px;margin-top:2px;flex:none}