/* ============================================================
   MARCO COMÚN para páginas con estilos propios (/prep/, /privacidad/) · 6-oct-2026
   Solo la cabecera, el menú, el pie y la barra del móvil de home.css, sin tocar el resto de la página:
   así toda la web lleva el mismo menú aunque estas páginas conserven su diseño interior.
   ============================================================ */
:root {
  --cian: #5FE3E8; --cian-tinta: #03181b; --arena: #C8A87A; --oro: #FACC15; --wa: #25D366;
  --linea: rgba(255, 255, 255, .08); --linea-2: rgba(255, 255, 255, .14);
  --txt: #f1f5f9; --suave: #a3b0c2; --tenue: #6f7d93;
  --cab: 60px; --lado: 20px; --aviso-alto: 0px;
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --cuerpo: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.cab, .menu, .pie, .barra { font-family: var(--cuerpo); line-height: 1.6; -webkit-font-smoothing: antialiased; color: var(--txt); }
.cab *, .menu *, .pie *, .barra * { box-sizing: border-box; }
.cab a, .menu a, .pie a, .barra a { color: inherit; text-decoration: none; }
.cab img, .pie img { display: block; max-width: 100%; height: auto; }
.pie p { margin: 0; }
.cab-hueco { height: var(--cab); }
body.menu-abierto { overflow: hidden; }

.saltar { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--cian); color: var(--cian-tinta); padding: 10px 14px; border-radius: 10px; font-weight: 700; }
.saltar:focus { left: 8px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 22px; border-radius: 14px;
  font: 700 16px/1.1 var(--cuerpo); letter-spacing: .01em; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, background-color .2s ease;
}
.btn--pri { background: var(--cian); color: var(--cian-tinta); }
.btn--wa { background: var(--wa); color: #062b14; }

/* Cabecera */
.cab {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--cab);
  background: rgba(5, 8, 16, .82); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--linea);
}
.cab__in { height: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--lado); display: flex; align-items: center; gap: 12px; }
.marca { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.marca__logo { width: 36px; height: 36px; border-radius: 10px; }
.marca__txt { font-family: var(--display); font-size: 21px; letter-spacing: .03em; color: var(--txt); -webkit-text-fill-color: currentColor; background: none; }
.nav-escritorio { display: none; }
.cab__cta { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 11px; background: var(--cian); color: var(--cian-tinta) !important; font-weight: 700; font-size: 14px; white-space: nowrap; }
.burger { width: 44px; height: 44px; display: grid; place-content: center; gap: 5px; background: none; border: 0; cursor: pointer; margin-right: -8px; }
.burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--txt); transition: transform .25s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú del móvil */
.menu { position: fixed; inset: var(--cab) 0 0 0; z-index: 55; background: #050810; overflow-y: auto; opacity: 0; transform: translateY(-8px); transition: opacity .22s ease, transform .22s ease; }
.menu.abierto { opacity: 1; transform: none; }
.menu[hidden] { display: none; }
.menu__in { display: flex; flex-direction: column; padding: 18px var(--lado) 40px; max-width: 560px; margin: 0 auto; }
.menu__link { display: flex; flex-direction: column; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--linea); font-family: var(--display); font-size: 30px; line-height: 1.05; text-transform: uppercase; }
.menu__link span { font-family: var(--cuerpo); font-size: 14px; color: var(--suave); text-transform: none; }
.menu__grupo { margin: 26px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }
.menu__mini { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-weight: 600; font-size: 17px; }
.punto { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.punto--cian { background: var(--cian); } .punto--arena { background: var(--arena); } .punto--oro { background: var(--oro); }
.menu__wa { margin-top: 28px; }
.menu__ig { margin-top: 16px; text-align: center; color: var(--suave); font-size: 14px; }

/* Pie */
.pie { border-top: 1px solid var(--linea); padding: 40px 0 calc(110px + env(safe-area-inset-bottom)); background: #04060d; }
.pie .caja { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--lado); }
.pie__in { display: grid; gap: 28px; }
.pie__marca strong { font-family: var(--display); font-size: 24px; font-weight: 400; letter-spacing: .03em; display: block; }
.pie__marca span { color: var(--suave); font-style: italic; }
.pie__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pie__nav div { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; color: var(--suave); }
.pie__nav a:hover { color: var(--txt); }
.pie__tit { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.pie__legal { font-size: 12.5px; color: var(--tenue); }
.pie__legal a { text-decoration: underline; text-underline-offset: 3px; }

/* Barra fija del móvil */
.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto; gap: 10px;
  padding: 10px var(--lado) calc(10px + env(safe-area-inset-bottom));
  background: rgba(5, 8, 16, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--linea);
  transform: translateY(110%); transition: transform .3s ease;
}
.barra.visible { transform: none; }
.barra .btn { min-height: 50px; }
.barra__wa { padding: 0 18px; }

:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .menu, .barra, .btn { transition: none; } }

@media (min-width: 900px) {
  :root { --cab: 72px; --lado: 32px; }
  .marca__txt { font-size: 23px; }
  .nav-escritorio { display: flex; gap: 26px; margin-right: 18px; font-size: 15px; font-weight: 600; color: #c9d3df; }
  .nav-escritorio a:hover { color: var(--cian); }
  .burger { display: none; }
  .menu { display: none !important; }
  .cab__cta { height: 44px; padding: 0 20px; font-size: 15px; }
  .pie { padding-bottom: 48px; }
  .pie__in { grid-template-columns: 1fr 1.2fr; align-items: start; }
  .pie__legal { grid-column: 1 / -1; }
  .barra { display: none; }
}