/* ===========================================================
   NECORA THEME – MAIN CSS
   v17.0  GAMMA SYNC WIND-SYSTEM
   ===========================================================
   🧊 Glass translúcido coherente (header / hero / cart)
   🌗 Modo oscuro automático con data-theme
   💡 Tokens alineados a dynamic-css.php + Gamma Fusion
   💎 Transiciones suaves y consistentes
=========================================================== */

/* ===========================
   1. VARIABLES GLOBALES
=========================== */
:root {
  /* === BASE LIGHT MODE === */
  --white-base: #F9F9F9;
  --panel-light: #F1F1F1;
  --hover-light: #E9E9E9;
  --text-primary: #111111;
  --text-secondary: #5B5B5B;
  --border-soft: #DADADA;
  --black-pure: #000000;
  --shadow-color: rgba(0,0,0,0.08);

  /* === DYNAMIC TOKENS (Gamma Sync) === */
  --necora-accent: var(--accent-color, #00C2B2);
  --necora-accent-alt: var(--accent-alt, #C6A676);
  --necora-bg: var(--bg-color, #F9F9F9);
  --necora-text: var(--text-color, #111111);
  --necora-text-secondary: var(--text-secondary);
  --necora-border: var(--border-soft);

  /* === GLASS === */
  --necora-glass-bg: rgba(255,255,255,0.08);
  --necora-glass-border: rgba(255,255,255,0.12);
  --necora-shadow-soft: 0 4px 16px var(--shadow-color);
  --necora-blur: 12px;
  --necora-radius-lg: 1.5rem;
  --necora-radius-md: 1rem;
  --necora-radius-sm: .5rem;

  /* === TYPOGRAPHY === */
  --font-body: "Inter", system-ui, sans-serif;
  --font-heading: "Poppins", sans-serif;
  --font-weight: 400;
  --font-size-base: 16px;

  /* === HEADER === */
  --header-height: 80px;

  /* === ALIASES (Compatibilidad) === */
  --accent: var(--necora-accent);
  --accent-muted: color-mix(in srgb, var(--necora-accent) 35%, transparent);
  --color-primary: var(--necora-accent);
  --color-link: var(--necora-accent);
  --color-link-hover: var(--necora-accent-alt);
  --color-border: var(--necora-border);
  --color-bg: var(--necora-bg);
  --color-text: var(--necora-text);
}

/* ===========================
   2. DARK MODE
=========================== */
[data-theme="dark"] {
  --black-base: #0B0C0E;
  --panel-dark: #151619;
  --hover-dark: #1F2024;
  --text-primary: #F1F1F1;
  --text-secondary: #9C9C9C;
  --border-soft: #2C2D30;
  --shadow-color: rgba(0,0,0,0.35);

  /* Gamma tokens en dark */
  --necora-bg: var(--bg-color, #0B0C0E);
  --necora-text: var(--text-color, #F1F1F1);
  --necora-border: var(--border-soft);
  --necora-glass-bg: rgba(255,255,255,0.05);
  --necora-glass-border: rgba(255,255,255,0.1);
  --necora-shadow-soft: 0 4px 22px rgba(0,0,0,0.55);
}

/* ===========================
   3. BASE GLOBAL
=========================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--necora-bg);
  color: var(--necora-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .3s ease, color .3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .5em;
  color: var(--necora-text);
}
h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 5vw, 2.8rem); }
h3 { font-size: clamp(1.5rem, 4vw, 2.2rem); }

p, li, span, a { font-family: var(--font-body); }

button, input, select, textarea {
  font-family: var(--font-body);
  font-size: inherit;
  color: inherit;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color .25s ease;
}
a:hover { color: var(--color-link-hover); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ===========================
   4. HEADER / NAVBAR
=========================== */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--header-height);
  display: flex; align-items: center;
  background: var(--necora-glass-bg);
  color: var(--necora-text);
  border-bottom: 1px solid rgba(255,255,255,0.02);
  backdrop-filter: blur(var(--necora-blur));
  -webkit-backdrop-filter: blur(var(--necora-blur));
  box-shadow: var(--necora-shadow-soft);
  transition: background .3s ease, box-shadow .3s ease;
  z-index: 9999;
}

.header-container {
  max-width: 1400px;
  width: 100%;
  margin: auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-header.is-scrolled {
  background: rgba(250,250,250,0.95);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
[data-theme="dark"] .site-header.is-scrolled {
  background: rgba(12,12,12,0.9);
  box-shadow: 0 4px 16px rgba(255,255,255,.03);
}

.site-logo .logo-img { max-height:48px; height:auto; transition:opacity .3s ease; }

/* ===========================
   5. NAVBAR LIST
=========================== */
.primary-nav .nav-list {
  display:flex; gap:24px;
  list-style:none;
  font-size:16px;
}
.primary-nav .nav-list a {
  color:var(--necora-text);
  font-weight:500;
  padding:.35rem .75rem;
  border-radius:6px;
  transition:all .25s ease;
}
.primary-nav .nav-list a:hover {
  color:var(--accent);
  background:rgba(0,0,0,.03);
  transform:translateY(-2px);
}
[data-theme="dark"] .primary-nav .nav-list a:hover {
  background:rgba(255,255,255,.05);
}
.primary-nav .current-menu-item>a {
  color:var(--accent-muted);
  font-weight:600;
  background:rgba(0,194,178,.08);
}

/* ===========================
   6. ICONOS HEADER
=========================== */
.header-icons { display:flex; align-items:center; gap:.75rem; }
.header-icons button, .header-icons a {
  background:none; border:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; width:36px; height:36px;
  transition:all .25s ease;
}
.header-icons button:hover, .header-icons a:hover {
  color:var(--accent);
  background:rgba(0,0,0,.03);
}
[data-theme="dark"] .header-icons button:hover {
  background:rgba(255,255,255,.05);
}

/* ===========================
   7. MENÚ MÓVIL
=========================== */
.menu-toggle {
  display:none;
  background:none;
  border:none;
  font-size:1.8rem;
  cursor:pointer;
  width:42px; height:42px;
  border-radius:50%;
  transition:background .25s, transform .2s;
}
.menu-toggle:hover { background:rgba(0,0,0,.05); transform:scale(1.05); }
[data-theme="dark"] .menu-toggle:hover { background:rgba(255,255,255,.08); }
@media (max-width:768px){ .menu-toggle{display:inline-flex;} .primary-nav{display:none;} }

/* ===========================
   8. LAYOUT BASE
=========================== */
.site-content { margin-top:var(--header-height); }

/* ===========================
   9. ENTRY CONTENT
=========================== */
.entry-content {
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.8;
  color:var(--necora-text);
}
.entry-content h1,
.entry-content h2,
.entry-content h3 {
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.25;
  margin:1.5em 0 .75em;
  color:var(--accent-muted);
}
.entry-content p{margin:1em 0;}
.entry-content a{color:var(--accent);text-decoration:underline;transition:color .25s;}
.entry-content a:hover{color:var(--color-link-hover);}
.entry-content blockquote{
  border-left:4px solid var(--accent);
  padding-left:1em;
  margin:1.5em 0;
  font-style:italic;
  opacity:.95;
}

/* ===========================
   10. MINI-CART ICON
=========================== */
.header-cart-toggle {
  position:relative;
  display:inline-flex;
  align-items:center; justify-content:center;
  font-size:1.3rem;
  background:none; border:none;
  color:inherit;
  cursor:pointer;
  border-radius:999px;
  width:38px; height:38px;
  transition:all .25s ease;
}
.header-cart-toggle:hover {
  background:rgba(0,0,0,.02);
  color:var(--accent);
}
[data-theme="dark"] .header-cart-toggle:hover {
  background:rgba(255,255,255,.05);
}
.necora-cart-count {
  position:absolute;
  top:-6px; right:-10px;
  background:var(--accent);
  color:#fff;
  font-size:.7rem; font-weight:600;
  border-radius:999px;
  padding:2px 6px;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}

/* ===========================
   11. FOOTER HIDDEN STATE
=========================== */
.site-footer.is-hidden { display:none !important; }

/* ===========================
   12. CARDS PREMIUM (GAMMA)
=========================== */

/* Card base tipo One-Off / Iceland */
.necora-card {
  position: relative;
  border-radius: var(--card-radius-lg, 24px);
  padding: 24px 22px 20px;
  background:
    radial-gradient(140% 180% at 0% 0%,
      color-mix(in srgb, #ffffff 16%, transparent 84%),
      transparent 55%
    ),
    var(--card-bg-soft, #f3f3f3);
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: var(--card-shadow-soft, 0 24px 60px rgba(15,23,42,.22));
  color: var(--necora-text);
  overflow: hidden;
}

/* Versión oscura automática */
html.dark-mode .necora-card,
[data-theme="dark"] .necora-card {
  background:
    radial-gradient(150% 200% at 12% 0%,
      rgba(255,255,255,.08),
      transparent 60%
    ),
    var(--card-bg-soft, #020617);
  border-color: rgba(255, 255, 255, .10);
}

/* Variante más glass (por si la necesitas) */
.necora-card--glass {
  background:
    radial-gradient(150% 200% at 0% 0%,
      rgba(255,255,255,.18),
      transparent 55%
    ),
    var(--glass-bg, rgba(255,255,255,.55));
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

/* Franja inferior tipo “Choose Design Only” */
.necora-card__footer {
  margin: 18px -22px -20px;
  padding: 12px 22px 16px;
  border-radius: 0 0 var(--card-radius-lg, 24px) var(--card-radius-lg, 24px);
  background: #050816;
  color: #f9fafb;
  text-align: center;
  font-weight: 600;
  font-size: .9rem;
}

html.dark-mode .necora-card__footer,
[data-theme="dark"] .necora-card__footer {
  background: var(--card-bg-strong, #020617);
  color: var(--necora-text);
}

/* CTA redondo que usa primario + secundario */
.necora-cta {
  display:block;
  width:100%;
  border-radius: 999px;
  padding: 11px 18px;
  text-align:center;
  font-weight:600;
  background: linear-gradient(
    135deg,
    var(--primary-color, var(--necora-accent)),
    var(--secondary-color, var(--necora-accent-alt))
  );
  color:#fff;
  border:none;
  cursor:pointer;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.necora-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

/* Badges chiquitos tipo “Top rated / 5 day stay” */
.necora-pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 5px 11px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:500;
  background: rgba(15,23,42,.04);
}

.necora-pill--primary {
  background: color-mix(in srgb, var(--primary-color, var(--necora-accent)) 16%, transparent 84%);
  color: var(--primary-color, var(--necora-accent));
}

html.dark-mode .necora-pill,
[data-theme="dark"] .necora-pill {
  background: rgba(255,255,255,.06);
}

/* ===========================
   13. HERO + HEADER SYNC (GAMMA)
=========================== */

/* --- HERO BASE --- */
.hero,
.hero-glass {
  position: relative;
  background: var(--glass-bg, rgba(255,255,255,0.06));
  color: var(--text-color, #111);
  overflow: hidden;
  transition: background .35s ease, color .35s ease;
}

.hero .hero-title,
.hero-glass .hero-title {
  color: var(--text-color, #111);
  font-family: var(--font-heading);
  font-weight: 700;
}

.hero .hero-subtitle,
.hero-glass .hero-subtitle {
  color: color-mix(in srgb, var(--text-color) 85%, transparent);
}

.hero .btn-primary,
.hero .button,
.hero-glass .btn-primary {
  background: var(--accent-color, #00C2B2);
  color: #fff;
  border-radius: var(--necora-radius-md);
  padding: .9rem 1.6rem;
  border: none;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-color) 40%, transparent);
  transition: background .3s ease, transform .25s ease;
}

.hero .btn-primary:hover,
.hero-glass .btn-primary:hover {
  background: var(--necora-accent-alt, #C6A676);
  transform: translateY(-2px);
}

/* --- HERO OVERLAY --- */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay-light, rgba(0,0,0,0.25));
  pointer-events: none;
  transition: background .3s ease;
}

[data-theme="dark"] .hero-overlay {
  background: var(--hero-overlay-dark, rgba(255,255,255,0.12));
}

/* --- HEADER SYNC --- */
.site-header.glass {
  --header-accent: var(--accent-color);
  --header-glass-bg: var(--glass-bg);
  --header-text: var(--text-color);
  background: var(--header-glass-bg);
  color: var(--header-text);
  transition: background .3s ease, color .3s ease;
}

.site-header.glass a:hover {
  color: var(--accent-color);
}
/* ===========================
   14. LAYOUT HERO PORTADA
   ============================ */

/* 1) En la portada, que el hero pueda ser full-width sin estar
      metido en un container genérico */
.home .necora-hero--classic,
.front-page .necora-hero--classic {
  width: 100%;
  margin-inline: 0;
}

/* 2) Opcional: si quieres que el hero “se funda” más con el header,
      deja muy poco espacio entre header y hero */
.home .necora-hero--classic,
.front-page .necora-hero--classic {
  margin-top: 0;               /* si se te esconde bajo el header sube esto a 1rem */
}

/* 3) Si debajo del hero tienes contenido con .container,
      mantenemos el layout normal ahí */
.home .home-content.container {
  max-width: 1200px;
  padding-inline: 20px;
  margin-top: 3rem;
}
/* ============================================
   FIX: Hero portada pegado al header glass
   ============================================ */

body.has-floating-header.home .site-content,
body.has-floating-header.home #content,
body.has-floating-header.front-page .site-content,
body.has-floating-header.front-page #content {
  padding-top: 0;
}

/* Opcional: si quieres que el hero baje un pelín para que
   la tarjeta no choque tanto con el header, ajusta aquí */
body.has-floating-header.home .necora-hero--classic,
body.has-floating-header.front-page .necora-hero--classic {
  margin-top: 0; /* prueba 0, y si lo ves muy pegado usa: calc(var(--header-height) * 0.25) */
}
/* ============================================
   HERO CLASSIC detrás del header glass
   ============================================ */

body.has-floating-header.home .necora-hero--classic,
body.has-floating-header.front-page .necora-hero--classic {
  /* sube el hero para que su fondo toque el top
     y quede por detrás del header */
  margin-top: calc(-1 * var(--header-height, 72px));
}

/* Extra padding arriba dentro del hero, para que la tarjeta
   no se pegue tanto al header al subir el bloque completo */
body.has-floating-header.home .necora-hero--classic .necora-hero__inner,
body.has-floating-header.front-page .necora-hero--classic .necora-hero__inner {
  padding-top: calc(3.5rem + 16px); /* ajusta 16px a tu gusto (0, 8, 24, etc.) */
}