/* =============================================================================
   ANDERSON'S GIFT CARD v2 · MARCO DEL SITIO (header + footer)
   -----------------------------------------------------------------------------
   La tienda NO es una página suelta: es una sección más del sitio. Por eso
   lleva el mismo encabezado y el mismo pie que el landing, con los mismos
   colores, la misma tipografía y los mismos enlaces.

   Estos estilos replican los del landing (landing-giftcard/index.html).
   Si allá cambia la navegación, hay que reflejarlo aquí.

   CÓMO SE COMPORTA
     El encabezado se ve en TODOS los tamaños, igual que en el landing.
     Por debajo de 1024px solo se esconden los ENLACES (el mismo punto de corte
     del landing); logo, idioma y carrito se quedan. El pie aparece completo.
   ============================================================================= */


/* ===========================================================================
   1 · ENCABEZADO DEL SITIO
   =========================================================================== */
/* ⚠️ Estas medidas son LAS MISMAS del landing, copiadas una por una para que
   el encabezado no "salte" al pasar del landing a la tienda:
       alto 70px · padding 0 40px (22px en móvil) · logo 40px
       enlaces 13px / 700 / letter-spacing 1px / gap 30px
       fondo navy al 90% con blur 18px · borde inferior blanco al 10%
   Si el landing cambia, hay que cambiar esto igual. */
.sitio-nav{
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:1000;

  background:color-mix(in srgb, var(--navy) 90%, transparent);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.1);

  padding-top:var(--safe-top);
}

.sitio-nav-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--nav-h);
  padding:0 40px;
}

.sitio-nav .marca{ display:flex; align-items:center; gap:11px; flex:none }
.sitio-nav .marca img{ height:40px; width:auto; display:block }

/* Enlaces al landing */
.sitio-links{
  display:flex;
  gap:30px;
  list-style:none;
}
.sitio-links a{
  color:#C6CDD4;
  font-family:'Quicksand',sans-serif;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:.25s;
  white-space:nowrap;
}
.sitio-links a:hover{ color:var(--taupe-2) }

.sitio-nav-der{ display:flex; align-items:center; gap:14px; flex:none }

/* Interruptor de idioma — mismo componente que el landing */
.lang-toggle{
  display:inline-flex;
  align-items:center;
  gap:1px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:3px;
  background:rgba(255,255,255,.08);
}
.lang-toggle button{
  border:0;
  background:transparent;
  font-family:'Quicksand',sans-serif;
  font-weight:600;
  font-size:11.5px;
  letter-spacing:.6px;
  color:#B9C6D3;
  padding:6px 12px;
  border-radius:999px;
  transition:background var(--t-rapido), color var(--t-rapido);
  line-height:1;
}
.lang-toggle button.on{ background:#C6CDD4; color:#16202F }

/* Carrito del encabezado del sitio (escritorio) */
.sitio-carrito{
  position:relative;
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%;
  color:#fff;
  transition:background var(--t-rapido);
}
.sitio-carrito:hover{ background:rgba(255,255,255,.12) }
.sitio-carrito svg{
  width:21px; height:21px;
  stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ===== Menu hamburguesa (solo movil) ===== */
.sitio-burger{display:none;position:relative;width:44px;height:44px;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(255,255,255,.06);cursor:pointer}
.sitio-burger .sb-line{width:20px;height:2px;background:#C6CDD4;border-radius:2px;transition:.25s}
.sitio-burger[aria-expanded="true"] .sb-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.sitio-burger[aria-expanded="true"] .sb-line:nth-child(2){opacity:0}
.sitio-burger[aria-expanded="true"] .sb-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.sitio-burger .globito{position:absolute;top:-6px;right:-6px}
.sitio-menu{position:fixed;top:var(--nav-h);left:0;right:0;z-index:999;background:#16202F;border-bottom:1px solid rgba(255,255,255,.12);padding:12px 22px 22px;display:flex;flex-direction:column;transform:translateY(-14px);opacity:0;pointer-events:none;transition:transform .28s,opacity .28s}
.sitio-menu.open{transform:translateY(0);opacity:1;pointer-events:auto}
.sitio-menu a,.sitio-menu-cart{font-family:'Quicksand',sans-serif;font-weight:600;font-size:15px;letter-spacing:1px;text-transform:uppercase;color:#C6CDD4;text-decoration:none;padding:15px 4px;border:0;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;background:none;cursor:pointer;width:100%}
.sitio-menu-cart{color:#16202F;background:#C6CDD4;border-radius:40px;text-align:center;margin-top:16px;padding:15px;border-bottom:0}
@media (max-width:1024px){
  .sitio-burger{display:flex}
  .sitio-carrito{display:none}   /* el carrito se mueve al menu hamburguesa */
}

/* ===========================================================================
   2 · PIE DEL SITIO
   =========================================================================== */
.sitio-footer{
  border-top:1px solid rgba(255,255,255,.1);
  background:#282C3B;                 /* el mismo tono de pie del landing */
  color:#fff;
  padding:56px 0 38px;
  margin-top:auto;
}

.sitio-footer .wrap{
  max-width:1240px;
  margin:0 auto;
  padding:0 26px;
}

.foot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:30px;
  margin-bottom:40px;
}

.foot-grid h4{
  font-size:13px;
  font-weight:800;
  margin-bottom:14px;
  color:#fff;
}
.foot-grid p{
  color:rgba(255,255,255,.55);
  font-size:14px;
  max-width:280px;
}
.foot-grid a{
  display:block;
  color:rgba(255,255,255,.55);
  font-size:14px;
  margin-bottom:9px;
  transition:color var(--t-rapido);
}
.foot-grid a:hover{ color:var(--taupe-2) }

.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  color:rgba(255,255,255,.42);
  font-size:12.5px;
}


/* ===========================================================================
   3 · MÓVIL
   ---------------------------------------------------------------------------
   El encabezado NO se esconde: se queda en todos los tamaños, como en el
   landing. Lo único que desaparece por debajo de 1024px son los enlaces;
   el logo, el interruptor de idioma y el carrito siguen ahí.
   =========================================================================== */
/* El landing esconde sus enlaces por debajo de 1024px y deja el resto del
   encabezado en su sitio. Aquí igual: mismo punto de corte. */
@media (max-width:1024px){
  .sitio-links{ display:none }
}

@media (max-width:768px){
  .sitio-nav-in{ padding:0 22px }   /* el mismo padding móvil del landing */

  .foot-grid{
    grid-template-columns:1fr 1fr;
    gap:26px;
  }
  .sitio-footer{ padding:42px 0 30px }
  .foot-bottom{ flex-direction:column; gap:8px }
}


/* ===========================================================================
   4 · LA BARRA COMPACTA DE LA APP
   ---------------------------------------------------------------------------
   Hay UN SOLO encabezado en toda la tienda —el del sitio, idéntico al del
   landing, en todos los tamaños— así que la barra de la app se queda
   únicamente con el botón de volver, transparente, apoyado en la esquina del
   panel. Logo y carrito ya viven arriba: repetirlos sería ruido.
   =========================================================================== */
.app-header{
  position:absolute;
  height:auto;
  padding:14px 14px 0;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:0;
  justify-content:flex-start;
  transform:none;
  left:0;
  top:0;
  z-index:60;
}
.app-header .logo,
.app-header .btn-carrito{ display:none }

/* Sobre el fondo hueso del panel la flecha va en oscuro */
.app-header .btn-volver{ color:var(--text) }
.app-header .btn-volver:hover{ background:rgba(0,0,0,.06) }