/* ==========================================================================
   PIEL WEB DE "MI CUENTA"  ·  css/cuenta.css

   Se carga DESPUÉS de app/css/app.css y solo cambia el aspecto. Ni una sola
   funcionalidad vive aquí: la lógica es la misma de la app, sin copiar nada.

   Lo que cambia respecto a la app:
     · cabecera del sitio arriba, con los enlaces de la web
     · el menú de secciones pasa de barra inferior fija a pestañas horizontales
     · columna de contenido más ancha, y en pantallas grandes se centra de verdad
     · pie de página propio de la web
     · la campanita y el panel de contacto se colocan dentro de la cabecera

   Si algún día se quiere que la web se parezca menos a la app, este es el único
   archivo que hay que tocar. El comportamiento no se ve afectado.
   ========================================================================== */

:root {
  --web-ancho: 640px;      /* columna de contenido: ancha para leer, estrecha para formularios */
  --web-head-h: 62px;      /* alto de la cabecera */
}

/* La app fija `html, body { height:100% }` porque su barra de navegación es
   `position:fixed` y no le afecta. Aquí la cabecera y el menú son `sticky`, y
   un elemento sticky solo se pega DENTRO de la caja de su padre: con el body
   clavado en 698 px, la cabecera se despegaba en cuanto se bajaba de esa
   altura y dejaba un hueco enorme. El body tiene que crecer con el contenido. */
html, body { height: auto; min-height: 100%; }
body { overscroll-behavior-y: auto; }

/* ---------------------------------------------------------------- cabecera */
.web-head {
  position: sticky;
  top: 5px;                                /* justo debajo de la franja cubana */
  z-index: 90;
  background: rgba(10, 15, 46, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.web-head-in {
  max-width: 1100px;
  margin: 0 auto;
  height: var(--web-head-h);
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.web-logo {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-titulo);
  font-weight: 800; font-size: 17px;
  color: #fff; text-decoration: none;
  letter-spacing: -.02em;
  flex-shrink: 0;
}
.web-logo img { border-radius: 9px; background: rgba(255,255,255,.06); padding: 3px; }
.web-star { color: var(--gold); }

/* La cabecera lleva solo la marca. La campanita y el botón de contacto flotan
   fijos en la esquina superior derecha, así que el logo se queda a la izquierda
   y no hay nada que pueda solaparse con ellos. */
@media (max-width: 520px) {
  .web-head-in { padding: 0 14px; }
  .web-logo { font-size: 15px; }
}

/* ------------------------------------------------- menú de secciones (#nav)
   Mismo HTML y mismo código que en la app; aquí es una fila de pestañas bajo
   la cabecera en vez de una barra pegada abajo. */
.nav {
  position: sticky;
  top: calc(5px + var(--web-head-h));
  bottom: auto; left: auto; right: auto;
  z-index: 80;
  border-top: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.nav-in {
  max-width: var(--web-ancho);
  height: auto;
  gap: 4px;
  padding: 8px 18px;
}
.nav-btn {
  flex-direction: row;
  gap: 7px;
  font-size: 13px;
  padding: 9px 6px;
  border-radius: 11px;
  transition: background var(--rapido), color var(--rapido);
}
.nav-btn .ni { font-size: 16px; }
.nav-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-btn.active { background: rgba(0,229,160,.12); }

@media (min-width: 400px) { .nav-btn { font-size: 13px; } }

/* En móvil los textos no caben en fila: se apilan bajo el icono, como en la app. */
@media (max-width: 620px) {
  .nav-in { padding: 6px 10px; }
  .nav-btn { flex-direction: column; gap: 3px; font-size: 10.5px; padding: 7px 2px; }
  .nav-btn .ni { font-size: 19px; }
}

/* ---------------------------------------------------------------- contenido */
#app {
  max-width: var(--web-ancho);
  min-height: 50vh;                 /* el pie va justo después, no al fondo */
  padding: 26px 18px 60px;
}

/* Una sola columna, centrada y algo más ancha que en el móvil.
   Se probó a repartir las fichas en dos columnas en escritorio y se descartó:
   las vistas están escritas en un orden que se lee de arriba abajo, y al
   partirlas quedaban emparejadas cosas que no tienen nada que ver (el botón de
   "Regístrate gratis" al lado del formulario de entrar, por ejemplo). Ancho
   cómodo y orden intacto vale más que aprovechar el hueco. */

/* ------------------------------------------------ campanita y contacto
   En la app flotan sobre la esquina de una hoja de 480 px. Aquí se anclan a la
   cabecera, que es donde el ojo los busca en una web. */
.contact-wrap { position: fixed; top: 16px; right: 18px; }
.bell-wrap    { position: fixed; top: 16px; right: 74px; }


/* --------------------------------------------------------------------- FAB */
.fab { right: 20px; bottom: 20px; }

/* ------------------------------------------------------------------ el pie */
.web-pie {
  position: relative; z-index: 1;
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, .18);
  margin-top: 30px;
  padding: 30px 18px calc(30px + var(--safe-b));
}
.web-pie-in { max-width: var(--web-ancho); margin: 0 auto; text-align: center; }
.web-pie-t {
  font-family: var(--font-titulo);
  font-weight: 700; color: #fff;
  font-size: var(--t-md); margin-bottom: 12px;
}
.web-pie a {
  display: block;
  color: var(--text2); text-decoration: none;
  font-size: var(--t-sm); padding: 5px 0;
  transition: color var(--rapido);
}
.web-pie a:hover { color: var(--accent); }
.web-pie-legal { margin-top: 14px; font-size: var(--t-xs); color: var(--text3); }
.web-pie-legal a { display: inline; font-size: var(--t-xs); }
.web-pie-fin {
  margin-top: 16px;
  font-size: var(--t-xs);
  color: var(--text3);
  line-height: 1.7;
}
.web-pie-fin strong { color: var(--text2); }