/* Páginas legales — neo-brutalismo Terxo Mobile (index-neo.css en aporta variables y base; sin @import para Safari móvil) */ body.legal-page { min-height: 100vh; min-height: 100dvh; overflow-x: hidden; -webkit-text-size-adjust: 100%; } .legal-page .menu-superior { position: fixed !important; padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-right: max(12px, env(safe-area-inset-right, 0px)); } .legal-shell { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 20px; max-width: 1080px; margin: calc(var(--header-height, 76px) + 28px) auto 40px; padding: 0 max(var(--page-gutter, 16px), env(safe-area-inset-left, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)); padding-right: max(var(--page-gutter, 16px), env(safe-area-inset-right, 0px)); align-items: start; box-sizing: border-box; width: 100%; } /* ─── Sidebar / navegación ─── */ .legal-sidebar { position: sticky; top: calc(var(--header-height, 76px) + 16px); display: flex; flex-direction: column; gap: 14px; } .legal-back { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 10px 14px; background: var(--neo-surface); border: var(--neo-border); box-shadow: var(--neo-shadow-sm); font-family: var(--font-display); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neo-ink); text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .legal-back:hover { background: var(--neo-yellow); transform: translate(-2px, -2px); box-shadow: var(--neo-shadow); } .legal-sidebar__label { font-family: var(--font-display); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(10, 10, 10, 0.55); padding-left: 4px; } .legal-nav { display: flex; flex-direction: column; gap: 8px; list-style: none; } .legal-nav__link { display: block; padding: 12px 14px; background: var(--neo-surface); border: var(--neo-border); box-shadow: var(--neo-shadow-sm); font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--neo-ink); text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease; } .legal-nav__link:hover { transform: translate(-2px, -2px); box-shadow: var(--neo-shadow); background: var(--neo-yellow); } .legal-nav__link.is-active { background: var(--brand-blue); color: #fff; box-shadow: var(--neo-shadow); } /* ─── Contenido principal ─── */ .legal-main { min-width: 0; } .legal-hero-banner { grid-column: 1 / -1; background: linear-gradient(135deg, #fffef5 0%, #ffffff 55%, #f0f6ff 100%); border: var(--neo-border); box-shadow: var(--neo-shadow); padding: 22px 22px 20px; margin-bottom: 4px; position: relative; overflow: hidden; } .legal-hero-banner::after { content: "LEGAL"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%) rotate(-6deg); font-family: var(--font-display); font-size: clamp(2.4rem, 9vw, 4.2rem); font-weight: 800; letter-spacing: 0.08em; color: rgba(10, 10, 10, 0.05); pointer-events: none; user-select: none; } .legal-header { background: var(--neo-surface); border: var(--neo-border); box-shadow: var(--neo-shadow); padding: 22px 22px 20px; margin-bottom: 18px; position: relative; overflow: hidden; } .legal-header::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; background: linear-gradient(90deg, var(--neo-yellow) 0 33%, var(--brand-blue) 33% 66%, var(--neo-mint) 66% 100%); border-bottom: var(--neo-border); } .legal-header__chip { display: inline-flex; align-items: center; padding: 6px 10px; margin-bottom: 12px; background: var(--neo-mint); border: var(--neo-border); box-shadow: var(--neo-shadow-sm); font-family: var(--font-display); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .legal-header h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 4.5vw, 2.35rem); font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; line-height: 1.05; margin: 0 0 10px; } .legal-updated { display: inline-block; margin: 0; padding: 6px 10px; background: var(--neo-yellow); border: 2px solid var(--neo-ink); box-shadow: 2px 2px 0 var(--neo-ink); font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; color: rgba(10, 10, 10, 0.82); } .legal-intro { margin: 0 0 16px; font-size: 1rem; line-height: 1.65; color: rgba(10, 10, 10, 0.82); } .legal-article { display: flex; flex-direction: column; gap: 14px; } .legal-section { background: var(--neo-surface); border: var(--neo-border); box-shadow: var(--neo-shadow-sm); padding: 18px 18px 16px; } .legal-section h2 { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); font-size: 0.92rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 12px; line-height: 1.25; } .legal-section h2::before { content: attr(data-num); flex-shrink: 0; display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; background: var(--brand-blue); color: #fff; border: 2px solid var(--neo-ink); box-shadow: 2px 2px 0 var(--neo-ink); font-size: 0.72rem; } .legal-section h3 { font-family: var(--font-display); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin: 16px 0 8px; padding-left: 10px; border-left: 4px solid var(--neo-yellow); } .legal-section p, .legal-section li { font-size: 0.92rem; line-height: 1.65; margin: 0 0 10px; color: rgba(10, 10, 10, 0.88); } .legal-section ul { margin: 0 0 8px; padding-left: 1.15rem; } .legal-section li:last-child { margin-bottom: 0; } .legal-section a { color: var(--brand-blue); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; } .legal-section a:hover { color: var(--neo-ink); background: var(--neo-yellow); text-decoration: none; box-shadow: 2px 2px 0 var(--neo-ink); } .legal-note { margin: 0; padding: 12px 14px; background: #fff8d6; border: 2px dashed var(--neo-ink); font-size: 0.86rem; line-height: 1.55; color: rgba(10, 10, 10, 0.8); } .legal-section code { padding: 2px 6px; background: var(--neo-bg); border: 2px solid var(--neo-ink); box-shadow: 2px 2px 0 var(--neo-ink); font-family: ui-monospace, monospace; font-size: 0.82em; } .legal-cookie-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 4px; } .legal-cookie-card { display: flex; flex-direction: column; gap: 8px; min-height: 100%; padding: 14px; border: var(--neo-border); box-shadow: var(--neo-shadow-sm); background: var(--neo-surface); } .legal-cookie-card__icon { width: 40px; height: 40px; display: grid; place-items: center; border: var(--neo-border); box-shadow: 2px 2px 0 var(--neo-ink); font-size: 1.1rem; } .legal-cookie-card--tech .legal-cookie-card__icon { background: var(--neo-mint); } .legal-cookie-card--ads .legal-cookie-card__icon { background: var(--neo-yellow); } .legal-cookie-card--auth .legal-cookie-card__icon { background: #d8e4ff; } .legal-cookie-card h3 { margin: 0; font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; border-left: none; padding-left: 0; } .legal-cookie-card p { margin: 0; font-size: 0.84rem; line-height: 1.55; color: rgba(10, 10, 10, 0.82); } .legal-cookie-card__tag { display: inline-flex; width: fit-content; padding: 4px 8px; border: 2px solid var(--neo-ink); box-shadow: 2px 2px 0 var(--neo-ink); font-family: var(--font-display); font-size: 0.55rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: #fff; } .legal-cookie-card--tech .legal-cookie-card__tag { background: var(--neo-mint); } .legal-cookie-card--ads .legal-cookie-card__tag { background: var(--neo-yellow); } .legal-manage-box { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .legal-manage-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border: var(--neo-border); box-shadow: var(--neo-shadow-sm); background: var(--neo-surface); font-family: var(--font-display); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neo-ink); text-decoration: none; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .legal-manage-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--neo-shadow); background: var(--neo-yellow); } .legal-manage-btn--primary { background: var(--brand-blue); color: #fff; } .legal-manage-btn--primary:hover { background: var(--brand-blue-dark); color: #fff; } .legal-tabs-mobile { display: none; } @media (max-width: 900px) { .legal-cookie-grid { grid-template-columns: 1fr; } } @media (max-width: 820px) { .legal-shell { grid-template-columns: 1fr; gap: 12px; margin-top: calc(var(--header-height, 76px) + 12px + env(safe-area-inset-top, 0px)); padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); } .legal-sidebar { position: static; } .legal-back { width: 100%; justify-content: center; box-sizing: border-box; min-height: 44px; } .legal-sidebar__label, .legal-nav { display: none; } .legal-tabs-mobile { display: flex; flex-wrap: wrap; gap: 8px; position: sticky; top: calc(var(--header-height, 76px) + env(safe-area-inset-top, 0px)); z-index: 4; margin: 0 0 10px; padding: 8px 0 10px; background: var(--neo-bg, #f5f5f0); } .legal-tabs-mobile .legal-nav__link { flex: 1 1 calc(33.333% - 8px); min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 10px 8px; font-size: 0.62rem; line-height: 1.15; word-break: break-word; } .legal-header { padding: 18px 16px 16px; } .legal-header h1 { font-size: clamp(1.35rem, 6vw, 1.9rem); word-break: break-word; } .legal-hero-banner::after { display: none; } .legal-section h2 { flex-wrap: wrap; } .legal-section p, .legal-section li { overflow-wrap: anywhere; } } @media (max-width: 520px) { .legal-header { padding: 16px 14px 14px; } .legal-section { padding: 16px 14px 14px; } .legal-tabs-mobile .legal-nav__link { flex: 1 1 100%; } .legal-manage-box { flex-direction: column; } .legal-manage-btn { width: 100%; box-sizing: border-box; min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .legal-back, .legal-nav__link { transition: none; } .legal-back:hover, .legal-nav__link:hover { transform: none; } }