/* ======================================================================
   app.css – Smilina Urban Studio
   Reemplaza por completo este archivo en: /wp-content/themes/smilina-urban-studio/assets/css/app.css
   ====================================================================== */

/* ===== Variables */
:root{
  --brand-blue:#0e2a3b;
  --text:#0f1720;
  --muted:#64748b;
  --pill:#193a4f;
  --accent:#ff6b61;
}

/* ===== Reset mínimo + base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}

/* ===== Layout helpers */
.container{max-width:1200px;margin:0 auto;padding:0 24px}

/* ======================================================================
   HERO (imagen sin overlay, alto algo mayor de lo anterior)
   ====================================================================== */
.home-hero{
  position:relative;
  min-height:90vh;           /* ← un poco más alto */
  display:flex;
  align-items:center;
}
.home-hero__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
.home-hero__container{
  position:relative;
  z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding:72px 24px;
}
.home-hero__title{
  margin:0 0 .6rem;
  font-weight:900;
  letter-spacing:-.4px;
  font-size:clamp(28px,5vw,56px);
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.home-hero__subtitle{
  margin:0 0 1.2rem;
  color:#f1f5f9;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}
.home-hero__actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.55rem .9rem;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);color:#fff}
.btn--accent{background:var(--accent);border-color:var(--accent)}

/* ======================================================================
   STORES – Slider fullwidth pegado al hero
   ====================================================================== */
.stores{
  position:relative;
  background:#0b1620;   /* base oscura bajo las fotos */
  color:#fff;
}
.stores-slider{
  position:relative;
  overflow:hidden;
}
.stores-track{
  display:flex;
  transition:transform .5s ease;
  will-change:transform;
}
.store-slide{
  position:relative;
  flex:0 0 100vw;     /* cada slide ocupa un ancho de viewport */
  height:62vh;        /* alto visual cómodo */
}
.store-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.store-card{
  position:absolute;
  left:32px;
  bottom:28px;
  max-width:min(520px,80vw);
  background:rgba(15,23,32,.72);
  backdrop-filter:saturate(120%) blur(4px);
  color:#fff;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12)
}
.store-card .badge{
  display:inline-block;
  background:#0b1620;
  color:#fff;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  margin-bottom:8px;
  border:1px solid rgba(255,255,255,.14)
}
.store-card .address{margin:.15rem 0 .25rem}
.store-card .hours{margin:0;opacity:.85}

/* Flechas y dots */
.stores-slider .nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  border:0;
  width:40px;height:40px;
  border-radius:50%;
  background:rgba(15,23,32,.65);
  color:#fff;
  display:grid;place-items:center;
  cursor:pointer
}
.stores-slider .nav:hover{background:rgba(15,23,32,.85)}
.stores-slider .prev{left:10px}
.stores-slider .next{right:10px}

.dots{
  position:absolute;left:0;right:0;bottom:14px;
  display:flex;gap:8px;justify-content:center
}
.dots button{width:8px;height:8px;border-radius:999px;border:0;background:rgba(255,255,255,.4);cursor:pointer}
.dots button[aria-selected="true"]{background:#fff}

/* ======================================================================
   FOOTER
   ====================================================================== */
.site-footer{border-top:1px solid #e9eef2;background:#fff;padding:44px 0 0;color:var(--text)}
.footer-grid{
  display:grid;
  gap:28px;
  grid-template-columns:repeat(4,minmax(0,1fr))
}
.footer-col h4{margin:0 0 .6rem;font-size:14px;font-weight:800}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col a{color:var(--text);text-decoration:none}
.footer-col a:hover{opacity:.75}

.nl-form{display:flex;gap:10px;margin:.6rem 0}
.nl-form input{padding:.55rem .75rem;border:1px solid #ccd6de;border-radius:6px;min-width:220px}
.nl-form button{padding:.55rem .9rem;border-radius:6px;border:0;background:var(--text);color:#fff}

/* Wordmark UNA línea y full-width */
.footer-brandline{
  width:100%;
  display:block;
  white-space:nowrap;       /* ← fuerza una sola línea */
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:900;
  letter-spacing:-.5px;
  color:var(--brand-blue);
  line-height:1.05;
  font-size:clamp(20px,6vw,56px);
  padding:16px 4vw 24px;
  text-align:center;
  background:#fff;
  box-sizing:border-box;
}

/* Bottom row */
.footer-bottom{border-top:1px solid #e9eef2}
.footer-bottom__inner{
  padding:16px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px
}
.footer-bottom .social{display:flex;gap:12px;list-style:none;margin:0;padding:0}
.footer-bottom .social a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:#0f1720;color:#fff;font-size:12px}

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width:920px){
  .store-card{left:16px;right:16px;max-width:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom__inner{flex-direction:column;align-items:flex-start}
}

/* ============ HEADER / NAV ============ */
:root{
  --nav-h: 64px;
  --nav-bg: rgba(12,17,23,.35);
  --nav-bg-solid: rgba(12,17,23,.9);
  --brand-blue:#0e2a3b;
}
.site-header{position:sticky;top:0;z-index:150;background:var(--nav-bg);backdrop-filter:saturate(140%) blur(6px);-webkit-backdrop-filter:saturate(140%) blur(6px);transition:background .25s ease,border-color .25s ease}
.site-header.is-absolute{position:fixed;left:0;right:0;background:transparent}
.site-header.solid{background:var(--nav-bg-solid)}
.site-header .nav-row{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand__wordmark{font-weight:900;letter-spacing:.02em;white-space:nowrap;font-size:18px;line-height:1;color:#fff}
.site-header.solid .brand__wordmark{color:#fff}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Desktop nav */
.site-nav{display:none}
@media (min-width: 1024px){
  .site-nav{display:block}
}
.menu{display:flex;gap:26px;align-items:center;margin:0;padding:0;list-style:none}
.menu a,.menu .menu-link{color:#fff;text-decoration:none;font-weight:600;letter-spacing:.01em;line-height:1}
.menu .menu-link{background:transparent;border:0;cursor:pointer;padding:0}
.menu .menu-link:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Right actions */
.nav-actions{display:flex;align-items:center;gap:12px}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff}
.icon-btn:hover{background:rgba(255,255,255,.1)}
.burger{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff}
.burger span{display:block;width:18px;height:2px;background:#fff;margin:3px 0}

/* Mega Root + Panels */
.mega-root{position:relative;z-index:140}
.mega-panel{position:absolute;left:0;right:0;top:calc(var(--nav-h));background:#fff;color:#0f1720;border-top:1px solid #e7eef4;box-shadow:0 18px 46px rgba(0,0,0,.12);display:none}
.mega-panel.open{display:block}
.mega-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 420px;gap:32px;max-width:1200px;margin:0 auto;padding:28px 20px}
.mega-panel h4{margin:.2rem 0 .6rem;font-size:14px;font-weight:800;color:#394a56}
.mega-panel ul{list-style:none;margin:0;padding:0}
.mega-panel li{margin:.35rem 0}
.mega-panel a{color:#0f1720;text-decoration:none}
.mega-panel a:hover{text-decoration:underline}
.mega-panel .side{display:flex;flex-direction:column;gap:10px}
.side-visual{border-radius:14px;min-height:220px;background:#e9eef2 url() center/cover no-repeat}
.side-cta{font-weight:700;text-decoration:none}

/* Search bar */
.search-bar{position:fixed;left:0;right:0;top:var(--nav-h);background:#fff;border-bottom:1px solid #e7eef4;box-shadow:0 12px 28px rgba(0,0,0,.08);display:none;z-index:149}
.search-bar.open{display:block}
.search-bar form{display:flex;gap:10px;align-items:center;max-width:1200px;margin:0 auto;padding:14px 20px}
.search-bar input{flex:1;padding:.65rem .8rem;border:1px solid #d7e0e7;border-radius:8px}
.search-bar button{border:0;background:#0f1720;color:#fff;padding:.62rem .9rem;border-radius:8px}
.search-bar .close{background:#e9eef2;color:#0f1720}

/* Mobile drawer */
.mobile-drawer{position:fixed;inset:0 0 0 auto;width:min(86vw,380px);background:#0f1720;color:#fff;transform:translateX(100%);transition:transform .25s ease;z-index:200}
.mobile-drawer.open{transform:none}
.drawer-inner{padding:18px}
.drawer-close{background:transparent;border:0;color:#fff;font-size:22px;line-height:1;margin-bottom:8px}
.mobile-nav{display:flex;flex-direction:column;gap:10px}
.mobile-nav a,.mobile-accordion{color:#fff;text-decoration:none;background:transparent;border:0;text-align:left;font-size:16px;padding:.55rem .25rem;border-radius:6px}
.mobile-accordion{font-weight:700}
.mobile-panel{display:none;flex-direction:column;padding:2px 10px 10px}
.mobile-panel a{opacity:.9}

/* Estado sólido al hacer scroll */
@media (min-width:1px){
  body:not(.admin-bar) .site-header.is-absolute.solid{background:var(--nav-bg-solid)}
}

/* Ajuste del hero: el wordmark azul a una línea (footer) */
.footer-wordmark{display:block;width:100%;text-align:center;font-weight:900;letter-spacing:.03em;color:#0e2a3b;font-size:clamp(42px,9vw,120px);line-height:1;padding:36px 0}

/* Mega: asegúrate de capas y eventos */
.site-header{z-index:150}
.mega-root{position:relative;z-index:140}
.mega-panel{pointer-events:auto}
.mega-panel.open{display:block}

/* En algunos temas, un padding del header empuja el mega.
   Esto lo “pega” justo bajo la barra. */
.mega-panel{top:calc(var(--nav-h));}

/* Por si hay gap entre hero y mega, eliminamos margenes del primer bloque */
body.home .home-hero{margin-top:0 !important;}

/* ==== Mega: asegurar capas y posición exacta */
.site-header{ z-index:150; }           /* ya lo tienes, lo refuerzo aquí */
.mega-root{ position:relative; z-index:145; }
.mega-panel{ position:absolute; left:0; right:0; top:var(--nav-h); z-index:146; }
.mega-panel.open{ display:block; }

/* Compensar la barra de admin de WP cuando estés logueado */
.admin-bar .mega-panel,
.admin-bar .search-bar{ top: calc(var(--nav-h) + 32px); }

/* Por si el botón es <button>, mano al pasar */
.menu .menu-link{ cursor:pointer; }

/* ==== Slider de tiendas pegado al hero y sin “hairline” blanco */
.home-hero{ margin-bottom:0; }
.stores{ margin-top:-1px; }           /* elimina el “píxel fantasma” entre bloques */
.store-slide{ height: 62vh; }         /* como ya tienes, lo dejo para contexto */

/* Opcional: si Swiper mete padding por defecto en tu tema, lo neutralizamos */
.store-slider,
.swiper{ padding:0 !important; }

/* --- Fix de clipping/visibilidad del mega --- */
.site-header{ z-index:150; overflow:visible; }
.mega-root{ position:relative; z-index:140; }

.mega-panel{
  position:absolute;
  left:0; right:0;
  top:calc(var(--nav-h));
  background:#fff; color:#0f1720;
  border-top:1px solid #e7eef4;
  box-shadow:0 18px 46px rgba(0,0,0,.12);
  display:none;               /* cerrado por defecto */
  pointer-events:auto;        /* aseguramos eventos */
}
.mega-panel.open{ display:block; }