/* El encabezado de las páginas públicas (portada, Análisis, Conector IA,
   Quiénes somos y perfil), igual al de la app: a todo lo ancho, vidrio casi
   transparente, la píldora del menú con la pestaña activa iluminada y los
   botones redondos. Antes cada página traía su copia: encajonado a 1080 px,
   sobre una franja oscura, la pestaña activa solo en negritas y el menú del
   teléfono cuadrado; al entrar a la app se sentía otro producto.
   Se carga después del <style> de cada página, así que manda sobre él. */

header{ padding:12px 0; padding-top:calc(12px + env(safe-area-inset-top));
  background:rgba(46,41,35,.34); border-bottom:1px solid transparent;
  backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%); }
header.bajo{ background:rgba(46,41,35,.55); border-bottom-color:transparent;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07), 0 12px 30px -18px rgba(0,0,0,.7); }

/* a todo lo ancho, como la app: la marca a la orilla y la píldora al centro */
.barra{ max-width:none; padding:0 28px; }

/* la píldora: las opciones del mismo ancho y la activa con el vidrio de las tarjetas */
.pildora{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:3px; padding:3px;
  background:rgba(255,255,255,.055); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
.pildora a{ text-align:center; font-size:14px; padding:7px 16px; color:var(--soft); }
.pildora a.act{ background:rgba(255,255,255,.15); color:var(--ink); font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px -4px rgba(0,0,0,.6); }

/* crear cuenta, en píldora como los demás controles */
.barra .btn{ border-radius:99px; padding:9px 18px; }

/* el menú del teléfono: un botón redondo, como la lupa y la cuenta de la app */
.menu-btn{ width:40px; height:40px; border-radius:50%; color:var(--soft);
  background:rgba(255,240,220,.07); border:1px solid rgba(255,240,220,.10);
  box-shadow:inset 0 1px 0 rgba(255,240,220,.10), 0 1px 2px rgba(0,0,0,.3), 0 6px 16px -8px rgba(0,0,0,.5); }
.menu-btn:hover{ color:var(--ink); background:rgba(255,240,220,.12); }
.menu-btn svg{ width:18px; height:18px; }

/* en el teléfono y tabletas la píldora no cabe: el menú va en el botón */
@media (max-width:860px){
  .pildora{ display:none; }
}
@media (max-width:700px){
  .barra{ padding:0 16px; }
}

/* En el teléfono, a la derecha solo «Iniciar sesión» y el menú: cada página
   ya trae su propio botón para empezar. Antes cambiaba de una página a otra
   («Crear cuenta» en el conector, «Iniciar sesión» en blanco o en verde). */
@media (max-width:700px){
  .cab-acc .btn{ display:none; }
  .entrar-link{ display:inline !important; font-weight:500; color:var(--ink); }
}

/* Los botones de las páginas, en píldora y con el mismo vidrio: el
   conector los traía cuadrados y el secundario sin vidrio. */
main .btn{ border-radius:99px; }
main .btn-2{ background:rgba(var(--blanco),.5); color:var(--ink); border:1px solid rgba(var(--blanco),.9);
  backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(var(--blanco),.95), 0 6px 16px -10px rgba(17,17,16,.16); }

/* El pie, el mismo en todas: los mismos enlaces en el mismo orden y siempre
   el aviso legal (al del conector le faltaba). */
footer{ border-top:1px solid var(--line-soft); margin-top:90px; padding:34px 0 60px; }
.pie-in{ max-width:1080px; margin:0 auto; padding:0 28px; display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center;
  font-size:13.5px; color:var(--faint); }
.pie-in a{ color:var(--soft); } .pie-in a:hover{ color:var(--ink); }
.pie-lugar{ margin-left:auto; }
.legal{ max-width:1080px; margin:18px auto 0; padding:0 28px; font-size:12px; color:var(--faint); line-height:1.6; }
@media (max-width:700px){
  footer{ margin-top:40px; padding:28px 0 40px; }
  .pie-in, .legal{ padding-left:20px; padding-right:20px; }
  .pie-lugar{ margin-left:0; flex-basis:100%; }
}