/* includes/header.php · bloque 1 · movido fuera del HTML el 2026-09-24 (punto 4: style-src sin 'unsafe-inline') */
/* =================== VARIABLES LOCALES (compatibilidad) =================== */
:root {
  /* Mapeo a sistema unificado pe-base.css */
  --vino: var(--pe-gold-1, #f6d46b);
  --vino-oscuro: var(--pe-bg-0, #050304);
  --oro-claro: var(--pe-gold-1, #f6d46b);
  --oro-oscuro: var(--pe-gold-2, #c9a227);
  --text-color: var(--pe-text-1, #ffffff);
  --glass-bg: var(--pe-glass-1, rgba(5,3,4,0.7));
  --shadow-dorada: var(--pe-shadow-gold, 0 0 25px rgba(246,212,107,0.35));
  --radius-xl: var(--pe-radius-xl, 50px);
  --header-height: 72px;
}

body {
  margin: 0;
  background: var(--pe-bg-0, #050304);
  color: var(--pe-text-1, #ffffff);
  font-family: var(--pe-font-sans, "Poppins", ui-sans-serif, system-ui, sans-serif);
  overflow-x: hidden;
}

/* =================== ENCABEZADO GLASS =================== */
header.pe-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between; /* Logo a la izq, Auth a la der */
  align-items: center;
  padding: .8rem 1.5rem; /* Más padding horizontal */
  height: var(--header-height);
  box-sizing: border-box;
  background: var(--glass-bg);
  backdrop-filter: blur(16px); /* Más blur */
  box-shadow: var(--shadow-dorada);
  border-bottom: 1px solid rgba(246,212,107,0.1); /* Borde más sutil */
  z-index: 999;
  transition: background .4s ease, box-shadow .4s ease; /* Transición más suave */
}

/* Logo */
.pe-logo {
  display: flex;
  align-items: center;
  gap: .75rem; /* Más espacio */
  text-decoration: none;
  color: var(--oro-claro);
  flex-shrink: 0;
  z-index: 10; /* Asegura que esté por encima del nav centrado */
}
.pe-logo img {
  height: 50px; /* Logo ligeramente más grande */
  width: auto;
  border-radius: .4rem; /* Mantenemos borde */
}
.pe-logo span {
  font-family: "Didot", serif;
  font-size: 1.5rem; /* Texto del logo más grande */
  letter-spacing: .05em;
  font-weight: 600;
  white-space: nowrap;
}

/* --- CORRECCIÓN CENTRADO --- */
/* Contenedor central para la navegación */
.pe-nav-container {
    position: absolute; /* Permite centrado absoluto */
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    justify-content: center; /* Centra el nav dentro */
    align-items: center;
    pointer-events: none; /* No interfiere con clics a logo/auth */
}
.pe-nav-desktop {
  display: flex;
  align-items: center;
  gap: 1.75rem; /* Más espacio entre links */
  pointer-events: auto; /* Sí permite clics en los links */
}
/* --- FIN CORRECCIÓN CENTRADO --- */

.pe-nav-desktop a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 500;
  letter-spacing: .03em;
  position: relative;
  transition: color .2s ease;
  padding: 0.5rem 0; /* Añade padding vertical para hover */
}
.pe-nav-desktop a::after {
  content: "";
  position: absolute;
  bottom: 0; /* Pegado abajo */
  left: 0;
  width: 0%; height: 2px;
  background: var(--oro-claro);
  transition: width .3s ease;
}
.pe-nav-desktop a:hover::after { width: 100%; }
.pe-nav-desktop a:hover { color: var(--oro-claro); }

/* Contenedor de botones (Derecha) */
.pe-auth-desktop {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto; /* Empuja a la derecha */
  z-index: 10; /* Encima del nav centrado */
}

/* =================== BOTONES CTA =================== */
.pe-cta {
  display: inline-block; /* H88 (2026-10-24): en línea, su relleno tapaba la última línea del texto de encima (medido: 10 px en public/baja.php) */
  background: linear-gradient(90deg,var(--oro-oscuro),var(--oro-claro));
  color: #050304 !important; /* Forzar color texto */
  font-weight: 600;
  padding: .7rem 1.2rem; /* Ligeramente más padding */
  border-radius: var(--radius-xl);
  text-decoration: none !important; /* Forzar sin subrayado */
  box-shadow: 0 0 15px rgba(246,212,107,0.25);
  transition: transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
  border: none; /* Asegurar que no hay borde */
}
.pe-cta:hover {
  transform: translateY(-3px); /* Efecto hover más pronunciado */
  box-shadow: 0 5px 25px rgba(246,212,107,0.5);
  color: #050304 !important;
}
.pe-cta::after { display: none !important; } /* Ocultar linea de hover en boton */
/* LA COLA 75 · 2026-10-06: un <button> con este estilo (el «Confirmar mi correo» de public/verify_email.php) se ve igual que el enlace:
   hereda la letra (un botón no la hereda solo) y, como su texto puede ser largo en otro idioma, parte la línea en un móvil estrecho
   en vez de salirse de la pantalla. */
button.pe-cta { font: inherit; font-weight: 600; cursor: pointer; white-space: normal; max-width: 100%; }
p + .pe-cta { margin-top: .9rem; } /* H88: el botón que sigue a un texto, separado de él */

/* Variante outline para "Soy Modelo" */
.pe-cta-outline {
  background: transparent !important;
  border: 2px solid var(--oro-claro) !important;
  color: var(--oro-claro) !important;
}
.pe-cta-outline:hover {
  background: rgba(246,212,107,0.15) !important;
  color: var(--oro-claro) !important;
  box-shadow: 0 0 20px rgba(246,212,107,0.3);
}

/* =================== MENU MOVIL =================== */
.pe-burger {
  display: none;
  flex-direction: column;
  justify-content: space-around; /* Espacio uniforme */
  width: 28px; /* Ligeramente más grande */
  height: 22px;
  cursor: pointer;
  z-index: 1001;
  margin-left: 1rem;
}
.pe-burger span {
  background: var(--oro-claro);
  height: 3px;
  border-radius: 2px;
  transition: all .3s ease;
  width: 100%; /* Asegura ancho completo */
}

/* --- MENÚ MÓVIL (Slide-down) --- */
.pe-nav-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  position: fixed;
  top: var(--header-height);
  left: 0; right: 0;
  background: rgba(5,3,4,0.95); /* Casi opaco */
  backdrop-filter: blur(20px);
  padding: 2.5rem 1rem; /* Más padding */
  box-shadow: 0 10px 20px rgba(0,0,0,0.4);
  transform: translateY(-110%);
  transition: transform .4s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 998;
}
.pe-nav-mobile.active {
  transform: translateY(0);
}
.pe-nav-mobile a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 500;
  font-size: 1.3rem; /* Links más grandes en móvil */
  padding: 0.5rem 1rem;
  transition: color .2s ease;
}
.pe-nav-mobile a:hover {
  color: var(--oro-claro);
}
.pe-mobile-divider {
  width: 70%;
  height: 1px;
  background: rgba(246,212,107,0.2);
  margin: 0.5rem 0;
}
.pe-cta-mobile {
  width: 80%;
  text-align: center;
  padding: .8rem 1.2rem; /* Botones más grandes en móvil */
  font-size: 1.1rem;
}

@media (max-width: 900px) { /* Ajustado punto de quiebre */
  .pe-nav-desktop { display: none; }
  .pe-auth-desktop { display: none; }
  .pe-burger { display: flex; }
}
@media (max-width: 400px) {
  .pe-logo span { display: none; }
  header.pe-header { padding: .8rem 1rem; } /* Menos padding en móvil */
}

/* Animación del menú al abrir */
.pe-burger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}
.pe-burger.active span:nth-child(2) { opacity: 0; transform: translateX(-10px);}
.pe-burger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* =================== ESPACIADO INICIAL =================== */
.pe-spacer { height: var(--header-height); }

/* =================== EFECTO DESPLAZAMIENTO =================== */
header.pe-header.scrolled {
  background: rgba(5,3,4,0.9); /* Más opaco al hacer scroll */
  box-shadow: 0 5px 35px rgba(0,0,0,0.3); /* Sombra más oscura */
  border-bottom-color: rgba(246,212,107,0.05); /* Borde aún más sutil */
}