/* MARAYC · estilos comunes (portada y páginas legales) */
:root {
  --fondo: #0c1422; --superficie: #131d2e; --superficie-2: #1a2539; --tinta: #f3f5f8; --tinta-suave: #b6c0cf;
  --naranja: #e8822f; --naranja-osc: #c96a1c; --navy: #1e2939;
  --display: "Montserrat", system-ui, sans-serif; --texto: "Inter", system-ui, sans-serif;
  --m: clamp(18px, 4vw, 64px); --radio: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 1.0625rem/1.6 var(--texto); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; }
::selection { background: var(--naranja); color: #111; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* marca provisional (hasta tener el logo original) */
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); font: 800 1.35rem/1 var(--display); letter-spacing: .02em; }
.marca svg { width: 34px; height: 34px; flex: none; }
.marca b { color: var(--naranja); font-weight: 800; }

/* botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: 0 1.35em; border: 0; border-radius: 10px; background: var(--naranja); color: #111; font: 700 1rem/1 var(--texto); text-decoration: none; cursor: pointer; transition: transform .18s, background-color .2s; }
.btn:hover { background: #f19244; } .btn:active { transform: scale(.97); }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn--linea { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 2px rgba(243,245,248,.35); }
.btn--linea:hover { background: rgba(243,245,248,.08); }

/* barra superior */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px var(--m); transition: background-color .3s; }
.bar.solida { background: rgba(12,20,34,.92); }
.bar nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); font-weight: 600; font-size: .95rem; }
.bar nav a:not(.btn) { text-decoration: none; opacity: .9; } .bar nav a:not(.btn):hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.bar .btn { min-height: 44px; font-size: .95rem; }

/* páginas legales */
.legal { max-width: 820px; margin: 0 auto; padding: 130px var(--m) 80px; }
.legal h1 { font: 800 clamp(2rem, 1.4rem + 2.4vw, 3rem)/1.05 var(--display); text-transform: uppercase; margin: 0 0 24px; }
.legal h2 { font: 700 1.25rem/1.3 var(--display); margin: 34px 0 10px; }
.legal p, .legal li { color: var(--tinta-suave); }
.legal .pendiente { background: rgba(232,130,47,.15); color: var(--tinta); padding: 0 .3em; border-radius: 4px; }

/* pie */
.pie { padding: 48px var(--m) 30px; background: #08101b; color: var(--tinta-suave); font-size: .92rem; }
.pie-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.pie h3 { font: 700 .95rem/1.2 var(--display); color: var(--tinta); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .04em; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pie a { text-decoration: none; } .pie a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; }
.pie-legal { margin-top: 36px; padding-top: 20px; box-shadow: inset 0 1px 0 rgba(243,245,248,.08); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: .85rem; }

@media (max-width: 860px) {
  .bar nav a:not(.btn) { display: none; }
  .bar .btn span { display: none; } .bar .btn { width: 44px; padding: 0; }
  .pie-cols { grid-template-columns: 1fr 1fr; }
}