/* ==========================
   TAROIA HEADER — v1.3 (ÚNICA FUENTE)
   + Intro global (logo “baja desde arriba”)
   + ✅ Anchor de layout REAL (considera header + logo)
   + ✅ Blur alineado al header (no invade “zona fantasma”)
   + ✅ BLINDAJE GLOBAL: el header NUNCA deja de ser fixed
   ========================== */

:root{
  /* Logo (solo visual) */
  --logo-h: 156px;

  /* Header (layout real) */
  --header-height: 89px;

  /* ✅ Auto: alinear el borde inferior del logo con el borde inferior del header
     (se sigue calculando por si lo usás para otras cosas, pero YA NO posiciona logo/burger) */
  --logo-shift: calc(var(--header-height) - var(--logo-h));
  --logo-gap: 6px;

  /* ✅ Bottom real del logo (visual real que tapa contenido) */
  --logo-bottom: calc(var(--logo-h) + var(--logo-shift));

  /* ✅ ANCLA REAL GLOBAL (layout): lo que realmente “tapa arriba” */
  --anchor-y: max(var(--header-height), var(--logo-bottom));

  /* Burger */
  --tmenu-burger-w: 26px;
  --tmenu-burger-h: 18px;

  /* ===== Centro UI (regla tuya) =====
     Centrar logo/burger entre: TOP DEL TELÉFONO (0) y TOP DEL PILL.
     Según tu medición, pillTop = 61px.
     Si cambia, tocás SOLO --pill-top.
  */
  --pill-top: 61px;
  --ui-center-y: calc(var(--pill-top) / 2);

  /* ===== Intro global (unificado) ===== */
  --hdr-ease-soft: cubic-bezier(.15,.85,.20,1);
  --hdr-dur: 1.2s;
  --hdr-delay-logo: .45s;
  --hdr-delay-burger: .65s;
  --hdr-intro-rise: 12px;
}

/* =========================================================
   ✅ FIX GLOBAL DE ANCHORS (HASH LINKS)
   ========================================================= */
html{
  scroll-padding-top: calc(var(--anchor-y) + 16px);
}
:where([id]){
  scroll-margin-top: calc(var(--anchor-y) + 16px);
}

/* ================= HEADER ================= */

#taroia-header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;

  width: 100% !important;
  height: var(--header-height) !important;
  min-height: var(--header-height) !important;
  max-height: var(--header-height) !important;

  z-index: 11000 !important;
  background: transparent !important;
  isolation: isolate;
  pointer-events: none;

  box-sizing: border-box !important;
  transform: none !important;
}

#taroia-header > *{
  pointer-events: auto;
}

/* ================= LOGO ================= */

#taroia-logo{
  position: fixed !important;
  left: 50% !important;

  /* ✅ centro real entre top viewport y top pill */
  top: var(--ui-center-y) !important;

  height: var(--logo-h) !important;

  /* ✅ base: centrado perfecto (ya no depende de --logo-shift) */
  transform: translate(-50%, -50%) !important;

  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
  z-index: 1;

  transition:
    opacity var(--hdr-dur) var(--hdr-ease-soft) var(--hdr-delay-logo),
    transform var(--hdr-dur) var(--hdr-ease-soft) var(--hdr-delay-logo);
  opacity: 1;
}

/* ================= INTRO GLOBAL ================= */

#taroia-header.intro-start #taroia-logo{
  opacity: 0;
  transform:
    translate(-50%, -50%)
    translateY(calc(-1 * var(--hdr-intro-rise)))
    scale(.985) !important;
}

/* ================= BLUR ================= */

#taroia-header::before{
  content:"";
  position: fixed !important;
  left:0 !important;
  right:0 !important;
  top: 0 !important;
  height: var(--header-height) !important;

  background: linear-gradient(
    180deg,
    rgba(8,8,16,.70) 0%,
    rgba(8,8,16,.52) 60%,
    rgba(8,8,16,.34) 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: -1;
}

body.scrolled #taroia-header::before{
  opacity: 1;
}

html.intro #taroia-header::before{
  opacity: 0 !important;
}

/* ================= BURGER ================= */

#taroia-header .tmenu-burger{
  position: fixed !important;
  right: calc(16px + env(safe-area-inset-right, 0px)) !important;

  /* ✅ mismo centro que el logo (zona 0..pillTop) */
  top: var(--ui-center-y) !important;
  transform: translateY(-50%) !important;

  width: var(--tmenu-burger-w);
  height: var(--tmenu-burger-h);
  display:flex;
  flex-direction:column;
  justify-content:space-between;

  background:none;
  border:none;
  cursor:pointer;

  z-index:2147483602;

  transition:
    opacity var(--hdr-dur) var(--hdr-ease-soft) var(--hdr-delay-burger),
    transform var(--hdr-dur) var(--hdr-ease-soft) var(--hdr-delay-burger);
  opacity: 1;
}

#taroia-header.intro-start .tmenu-burger{
  opacity: 0;
  transform: translateY(calc(-50% - 5px)) !important;
}

#taroia-header .tmenu-burger span{
  height:2px;
  width:70%;
  margin:0 auto;
  border-radius:2px;
  background:#e7c372;
  box-shadow:0 0 8px rgba(231,195,114,.45);
}

/* ================= ACCESIBILIDAD ================= */

@media (prefers-reduced-motion: reduce){
  #taroia-logo,
  #taroia-header .tmenu-burger{
    transition:none !important;
  }
  #taroia-header.intro-start #taroia-logo{
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
  }
  #taroia-header.intro-start .tmenu-burger{
    opacity: 1 !important;
    transform: translateY(-50%) !important;
  }
}