/* ============================================================
  styles-base.css — PRONK Printed Designs (Internas)
  ✅ Slogan centrado arriba del menú (siempre visible)
  ✅ Menú glass neon (wrap suave)
  ✅ Manchas fijas (misma ubicación)
  ✅ Logo pequeño acompaña al menú
  ✅ Burbuja WhatsApp fija
  ✅ Hamburguesa + overlay (móvil) SIN mover nada
============================================================ */

/* =========================
  0) VARIABLES / BASE
========================= */
:root{
  --bg: #1a2a6c;

  --grad-a: #0bcff1;
  --grad-b: #faff12;

  --text: #ffffff;
  --text-dark: #000000;

  --shadow-soft: 0 10px 25px rgba(0,0,0,.25);
  --shadow-text: 0 2px 10px rgba(0,0,0,.65);

  --radius-pill: 999px;
  --container: 1200px;

  --slogan-yellow: #faff12;
  --slogan-blue: #0bcff1;

  --ease: cubic-bezier(.2,.8,.2,1);

  /* NAV */
  --nav-pad-y: clamp(10px, 0.9vw, 12px);
  --nav-pad-x: clamp(12px, 1.2vw, 18px);

  --nav-gap: clamp(8px, 0.9vw, 10px);
  --nav-row-gap: clamp(8px, 0.9vw, 10px);

  --nav-link-pad-y: clamp(8px, 0.75vw, 10px);
  --nav-link-pad-x: clamp(10px, 0.9vw, 14px);
  --nav-font: clamp(12px, 0.95vw, 14px);

  /* Proporciones logo menú */
  --logo-small-w: clamp(74px, 4.5vw, 255px);

  /* ancho máximo cápsula menú */
  --menu-area-w: 1100px;

  /* Header padding */
  --header-pad-top: clamp(10px, 1vw, 14px);
  --header-pad-bot: clamp(10px, 1vw, 12px);

  /* Slogan (header) */
  --header-slogan-size: clamp(16px, 1.35vw, 22px);
  --header-slogan-gap: clamp(8px, 1vw, 12px);
}

*,
*::before,
*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x: hidden;
}

/* =========================
  1) FONDO: MANCHAS / SPLASHES
========================= */
.bg-splashes{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.splash{
  position: absolute;
  height: auto;
  opacity: 1;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.25));
}

.splash-top-right{
  top: -30px;
  right: -40px;
  width: min(520px, 60vw);
}

.splash-bottom-left{
  bottom: -40px;
  left: -40px;
  width: min(520px, 60vw);
}

/* =========================
  2) HEADER (internas)
========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;

  height: auto;
  padding: var(--header-pad-top) 0 var(--header-pad-bot);

  display: flex;
  align-items: center;

  background: rgba(26,42,108,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: background .25s var(--ease), backdrop-filter .25s var(--ease);
}

.header-inner{
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;

  /* slogan arriba, menú abajo */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo slogan"
    "logo nav";
  align-items: center;

  column-gap: clamp(12px, 1.6vw, 22px);
  row-gap: var(--header-slogan-gap);
}

/* =========================
  3) LOGO MENÚ
========================= */
.brand{
  grid-area: logo;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand__logo{
  display: block;
  height: auto;
}

.brand__logo--small{
  width: var(--logo-small-w);
  max-width: var(--logo-small-w);
}

/* =========================
  4) SLOGAN ARRIBA DEL MENÚ (SIEMPRE VISIBLE)
========================= */
.top-slogan{
  grid-area: slogan;
  justify-self: center;
  text-align: center;
}

.top-slogan .slogan{
  margin: 0;
  font-family: "League Spartan", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-shadow: var(--shadow-text);
  line-height: 1.1;
  letter-spacing: .2px;

  font-size: var(--header-slogan-size);
  font-weight: 800;
}

.word-yellow{ color: var(--slogan-yellow); }
.word-blue{ color: var(--slogan-blue); }

/* =========================
  5) NAV — GLASS NEON
========================= */
.main-nav{
  grid-area: nav;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  min-width: 0;
}

/* Cápsula (DESKTOP) */
.main-nav__list{
  list-style: none;
  margin: 0;
  padding: var(--nav-pad-y) var(--nav-pad-x);

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  column-gap: var(--nav-gap);
  row-gap: var(--nav-row-gap);

  width: min(100%, var(--menu-area-w));

  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 18px 30px rgba(0,0,0,.22),
    0 0 28px rgba(11, 207, 241, .25),
    0 0 18px rgba(250, 255, 18, .16);

  overflow: visible;
  min-width: 0;
}

@media (min-width: 1500px){
  .main-nav__list{ flex-wrap: nowrap; }
}

.main-nav__item{ margin: 0; }

.main-nav__link{
  position: relative;
  display: inline-block;

  padding: var(--nav-link-pad-y) var(--nav-link-pad-x);
  border-radius: var(--radius-pill);
  text-decoration: none;

  color: #000;
  font-weight: 800;
  font-size: var(--nav-font);
  letter-spacing: .2px;
  white-space: nowrap;

  background: linear-gradient(
    90deg,
    rgba(11, 207, 241, .72) 0%,
    rgba(250, 255, 18, .72) 100%
  );

  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 16px rgba(0,0,0,.12);

  transition:
    transform .18s var(--ease),
    box-shadow .18s var(--ease),
    filter .18s var(--ease),
    color .18s var(--ease),
    text-shadow .18s var(--ease),
    background .18s var(--ease);
}

.main-nav__link:hover{
  transform: translateY(-4px);
  filter: brightness(1.08);
  box-shadow:
    0 16px 24px rgba(0,0,0,.18),
    0 0 18px rgba(11, 207, 241, .22);
}

.main-nav__link.active{
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.70);

  background: rgba(26,42,108,.38);
  border: 1px solid rgba(255,255,255,.28);

  box-shadow:
    0 18px 30px rgba(0,0,0,.22),
    0 0 26px rgba(11, 207, 241, .40),
    0 0 18px rgba(250, 255, 18, .22);
}

.main-nav__link.active::after{
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -20%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #0bcff1 0%, #faff12 100%);
  filter: blur(.1rem);
  box-shadow:
    0 0 14px rgba(11, 207, 241, .35),
    0 0 12px rgba(250, 255, 18, .25);
  transform-origin: left center;
  animation: paintSwipe .22s var(--ease) both;
}

@keyframes paintSwipe{
  0%   { transform: scaleX(.2); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* =========================
  6) HAMBURGUESA (lo que te faltaba)
========================= */
.nav-toggle{
  display: none; /* solo móvil */
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: none;
  cursor: pointer;

  background: linear-gradient(90deg, var(--grad-a) 0%, var(--grad-b) 100%);
  box-shadow: var(--shadow-soft);

  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
}

.nav-toggle__bar,
.nav-toggle span{
  display: block;
  width: 22px;
  height: 3px;
  background: #000;
  border-radius: 999px;
}

/* =========================
  7) MENÚ MÓVIL OVERLAY (ENCIMA DE TODO)
========================= */
.mobile-nav{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none; /* cerrado */
}

.mobile-nav.is-open{
  display: block;
}

/* overlay desenfoque */
.mobile-nav__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.18); /* para que se note el blur */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* panel */
.mobile-nav__panel{
  position: absolute;
  top: clamp(16px, 3vw, 28px);
  right: clamp(14px, 3vw, 24px);
  left: clamp(14px, 3vw, 24px);

  max-width: 520px;
  margin-left: auto;

  border-radius: 22px;
  padding: 16px;

  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow: 0 18px 40px rgba(0,0,0,.35);

  transform: translateY(-8px);
  opacity: 0;

  transition:
    transform .22s var(--ease),
    opacity .22s var(--ease);
}

.mobile-nav.is-open .mobile-nav__panel{
  transform: translateY(0);
  opacity: 1;
}

.mobile-nav__close{
  position: absolute;
  top: 10px;
  right: 10px;

  width: 42px;
  height: 42px;
  border: none;
  border-radius: 14px;
  cursor: pointer;

  background: linear-gradient(90deg, rgba(11, 207, 241, .8), rgba(250, 255, 18, .8));
  color: #000;
  font-weight: 900;

  box-shadow: 0 10px 18px rgba(0,0,0,.22);
}

.mobile-nav__list{
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.mobile-nav__link{
  display: block;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 14px;

  background: linear-gradient(
    90deg,
    rgba(11, 207, 241, .72) 0%,
    rgba(250, 255, 18, .72) 100%
  );

  color: #000;
  font-weight: 800;
  letter-spacing: .2px;

  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 16px rgba(0,0,0,.12);

  transition: transform .18s var(--ease), filter .18s var(--ease);
}

.mobile-nav__link:hover{
  transform: translateY(-3px);
  filter: brightness(1.06);
}

.mobile-nav__link.active{
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
  background: rgba(26,42,108,.38);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow:
    0 16px 26px rgba(0,0,0,.22),
    0 0 22px rgba(11, 207, 241, .32);
}

/* cuando esté abierto, bloquea scroll del body */
body.menu-open{
  overflow: hidden;
}

/* =========================
  8) WHATSAPP FLOAT
========================= */
.whatsapp-float{
  position: fixed;
  right: clamp(14px, 2vw, 22px);
  bottom: clamp(14px, 2vw, 22px);
  z-index: 9990;

  width: clamp(54px, 4.2vw, 76px);
  height: clamp(54px, 4.2vw, 76px);

  border-radius: 999px;
  display: grid;
  place-items: center;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 30px rgba(0,0,0,.25);

  transition: transform .18s var(--ease), filter .18s var(--ease);
}

.whatsapp-float:hover{
  transform: translateY(-4px);
  filter: brightness(1.08);
}

.whatsapp-float__icon{
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}

/* =========================
  9) RESPONSIVE (CLAVE: ocultar desktop y mostrar hamburguesa)
========================= */
@media (max-width: 900px){
  /* 🔥 ESTA ES LA PARTE QUE TE FALTABA:
     - ocultar el menú desktop
     - mostrar el botón hamburguesa */
  .main-nav{
    justify-content: flex-end;
  }

  .main-nav__list{
    display: none;
  }

  .nav-toggle{
    display: inline-flex;
  }

  .top-slogan .slogan{
    font-size: clamp(14px, 3.2vw, 18px);
  }

  .splash-top-right{
    top: -20px;
    right: -30px;
    width: min(380px, 70vw);
  }

  .splash-bottom-left{
    bottom: -30px;
    left: -30px;
    width: min(380px, 70vw);
  }
}


/* =========================================
  WHATSAPP — EXCEPCIÓN MÓVIL (más grande y más “fluido”)
  - En móvil crece más con el ancho (vw)
  - Inicia un poco más grande
========================================= */

/* Base (todas las pantallas): un poco más grande */
.whatsapp-float{
  width: clamp(60px, 4.8vw, 82px);
  height: clamp(60px, 4.8vw, 82px);
}

/* Móvil: que crezca más conforme aumenta la pantalla (hasta 900px) */
@media (max-width: 900px){
  .whatsapp-float{
    width: clamp(64px, 12vw, 96px);
    height: clamp(64px, 12vw, 96px);
  }

  .whatsapp-float__icon{
    width: 74%;
    height: 74%;
  }
}

/* Móvil pequeño: que no se pase (pero siga grande) */
@media (max-width: 420px){
  .whatsapp-float{
    width: clamp(62px, 16vw, 88px);
    height: clamp(62px, 16vw, 88px);
  }
}
/* =========================
  BOTONES MENÚ MÓVIL — SÓLIDOS (sin transparencia)
========================= */
.mobile-nav__link{
  /* ✅ fondo sólido (sin rgba) */
  background: linear-gradient(90deg, #0bcff1 0%, #faff12 100%) !important;

  /* ✅ texto bien visible */
  color: #000 !important;
  font-weight: 900;
  letter-spacing: .3px;
  text-shadow: none;

  /* ✅ que no “se lave” con blur o filtros */
  opacity: 1 !important;
  filter: none !important;

  /* ✅ borde y sombra como botón real */
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 10px 18px rgba(0,0,0,.20);
}

/* Hover (solo efecto, sin cambiar visibilidad del texto) */
.mobile-nav__link:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 24px rgba(0,0,0,.22);
}

/* Activo: sólido también */
.mobile-nav__link.active{
  background: rgba(26,42,108,.95) !important; /* sólido */
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.28);
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
}
.search input{
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* ✅ */
}

.search input::placeholder{
  color: rgba(255,255,255,.75);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* ✅ */
  font-weight: 700; /* opcional */
}