/*
Theme Name: HaaL Events — Premium Bilingual
Theme URI: https://haal.mx
Author: HaaL
Description: Tema premium bilingüe (ES/EN) para HaaL Events — The Art of Celebration. Incluye portafolio de proyectos, formulario de cotización con subida de inspiración, Christmas Mode, WhatsApp, Instagram y SEO integrado, sin plugins de pago.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: haal
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root{
  --haal-bg: #0c0c0d;
  --haal-bg-soft: #131315;
  --haal-bg-alt: #17171a;
  --haal-fg: #f6f4ef;
  --haal-fg-muted: #b7b3aa;
  --haal-gold: #c8a24a;
  --haal-gold-soft: #e7d19a;
  --haal-line: rgba(246,244,239,0.12);
  --haal-line-soft: rgba(246,244,239,0.07);
  --haal-radius: 16px;
  --haal-radius-sm: 10px;
  --haal-max: 1220px;
  --haal-ig: #d6284a;
  --haal-fb: #1877f2;
  --haal-wa: #25d366;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--haal-bg);
  color: var(--haal-fg);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }

.haal-container{ max-width: var(--haal-max); margin: 0 auto; padding: 0 24px; }

h1,h2,h3,h4{
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: .01em;
  margin: 0 0 .45em;
  line-height: 1.15;
}
h1{ font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3{ font-size: 1.4rem; }

p{ margin: 0 0 1em; }

.haal-eyebrow{
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--haal-gold);
  margin-bottom: 10px;
}

.screen-reader-text{
  position: absolute !important;
  clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px; overflow: hidden;
}

/* ==========================================================================
   Header + navegación + selector de idioma
   ========================================================================== */
.haal-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(12,12,13,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--haal-line);
}
.haal-header-inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 16px 24px;
  max-width: var(--haal-max);
  margin: 0 auto;
}
.haal-logo{
  font-family: var(--font-serif);
  font-size: 1.25rem;
  letter-spacing: .04em;
}
.haal-logo span{ color: var(--haal-gold); }
.haal-logo img{ max-height: 44px; width: auto; }

.haal-nav ul{ list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.haal-nav a{ font-size: .92rem; color: var(--haal-fg-muted); transition: color .2s ease; }
.haal-nav a:hover{ color: var(--haal-gold-soft); }
.haal-nav-mobile-extra{ display: none; }

.haal-header-actions{ display: flex; align-items: center; gap: 18px; }
.haal-btn-small{ padding: 10px 18px; font-size: .82rem; }

.haal-lang-switch{ display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; letter-spacing: .06em; }
.haal-lang-switch a{ color: var(--haal-fg-muted); }
.haal-lang-switch a:hover{ color: var(--haal-gold); }
.haal-lang-switch .is-current{ color: var(--haal-gold); font-weight: 600; }
.haal-lang-sep{ opacity: .4; }

.haal-menu-toggle{ display: none; background: none; border: none; color: var(--haal-fg); cursor: pointer; }
.haal-menu-toggle svg{ width: 26px; height: 26px; fill: currentColor; }

@media (max-width: 860px){
  .haal-header-actions{ display: none; }
  .haal-menu-toggle{ display: block; }
  .haal-nav{
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--haal-bg-alt);
    border-bottom: 1px solid var(--haal-line);
    display: none;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  .haal-nav.is-open{ display: block; }
  .haal-nav ul{ flex-direction: column; gap: 0; padding: 10px 24px 0; }
  .haal-nav li{ border-top: 1px solid var(--haal-line-soft); }
  .haal-nav a{ display: block; padding: 15px 0; font-size: 1rem; }
  .haal-nav-mobile-extra{
    display: flex; flex-direction: column; gap: 16px;
    padding: 20px 24px 26px;
  }
}

/* ==========================================================================
   Botones
   ========================================================================== */
.haal-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: .95rem; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  text-align: center;
}
.haal-btn:hover{ transform: translateY(-2px); }
.haal-btn svg{ width: 19px; height: 19px; fill: currentColor; }

.haal-btn-primary{
  background: linear-gradient(135deg, var(--haal-gold), var(--haal-gold-soft));
  color: #18140b;
  box-shadow: 0 12px 30px -14px rgba(200,162,74,.65);
}
.haal-btn-outline{ border-color: var(--haal-line); color: var(--haal-fg); background: rgba(255,255,255,0.03); }
.haal-btn-outline:hover{ border-color: var(--haal-gold); }
.haal-btn-instagram{ background: linear-gradient(135deg,#feda75,#d62976,#962fbf); color: #fff; }
.haal-btn-facebook{ background: var(--haal-fb); color: #fff; }
.haal-btn-whatsapp{ background: var(--haal-wa); color: #08210f; }

.haal-icon-btn{
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--haal-line); color: var(--haal-fg);
  transition: transform .2s ease, border-color .2s ease;
}
.haal-icon-btn:hover{ transform: translateY(-2px); border-color: var(--haal-gold); }
.haal-icon-btn svg{ width: 18px; height: 18px; fill: currentColor; }

/* ==========================================================================
   Hero (Home ES/EN)
   ========================================================================== */
.haal-hero{
  position: relative;
  min-height: 82vh;
  display: flex; align-items: center;
  overflow: hidden;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(200,162,74,0.18), transparent 60%), var(--haal-bg);
}
.haal-hero-media{ position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .34; }
.haal-hero-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(12,12,13,.5), rgba(12,12,13,.94)); }
.haal-hero-content{ position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 0 24px; text-align: center; }
.haal-hero-content h1{ font-size: clamp(2.3rem, 5.2vw, 4rem); }
.haal-hero-content > p{ color: var(--haal-fg-muted); font-size: 1.15rem; max-width: 560px; margin: 0 auto 30px; }
.haal-hero-ctas{ display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Hero de páginas internas */
.haal-page-hero{
  position: relative;
  padding: 120px 24px 70px;
  text-align: center;
  overflow: hidden;
}
.haal-page-hero-media{ position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .3; }
.haal-page-hero-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(12,12,13,.4), var(--haal-bg) 92%); }
.haal-page-hero-content{ position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }

/* ==========================================================================
   Secciones / prosa pegada desde el editor de bloques
   ========================================================================== */
.haal-section{ padding: 90px 0; }
.haal-section-alt{ background: var(--haal-bg-soft); }
.haal-section-head{ text-align: center; max-width: 660px; margin: 0 auto 50px; }
.haal-section-head p{ color: var(--haal-fg-muted); }

.haal-page-body{ padding: 20px 0 40px; }

.haal-prose h2{ margin-top: 2.4em; }
.haal-prose h2:first-child{ margin-top: 0; }
.haal-prose h3{ color: var(--haal-gold-soft); }
.haal-prose p{ color: var(--haal-fg-muted); max-width: 760px; }
.haal-prose > .wp-block-heading, .haal-prose > h2, .haal-prose > h3, .haal-prose > p{ max-width: 760px; margin-left: auto; margin-right: auto; }
.haal-prose blockquote{
  border-left: 2px solid var(--haal-gold);
  margin: 2em auto; padding: 0 0 0 24px;
  max-width: 760px;
  font-family: var(--font-serif); font-size: 1.3rem; font-style: italic;
  color: var(--haal-fg);
}
.haal-prose .wp-block-columns{ gap: 32px; margin: 2.4em 0; }
.haal-prose .wp-block-column img{ border-radius: var(--haal-radius-sm); }
.haal-prose .wp-block-gallery{ margin: 2.4em 0; }
.haal-prose .wp-block-gallery figure{ border-radius: var(--haal-radius-sm); overflow: hidden; }
.haal-prose figure.wp-block-image{ margin: 2.4em 0; }
.haal-prose figure.wp-block-image img{ border-radius: var(--haal-radius); }
.haal-prose figcaption{ color: var(--haal-fg-muted); font-size: .85rem; text-align: center; margin-top: 8px; }
.haal-prose .wp-block-buttons{ justify-content: center; margin: 2em 0; }
.haal-prose .wp-block-button__link{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px; border-radius: 999px; font-weight: 600;
  background: linear-gradient(135deg, var(--haal-gold), var(--haal-gold-soft)); color: #18140b !important;
}
.haal-prose ul, .haal-prose ol{ max-width: 760px; margin: 0 auto 1.4em; color: var(--haal-fg-muted); }
.haal-prose .wp-block-separator{ border-color: var(--haal-line); max-width: 200px; margin: 3em auto; }

/* ==========================================================================
   Grids / tarjetas de proyecto y categoría
   ========================================================================== */
.haal-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.haal-grid-index{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .haal-grid, .haal-grid-index{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .haal-grid, .haal-grid-index{ grid-template-columns: 1fr; } }

.haal-card{ position: relative; display: block; border-radius: var(--haal-radius); overflow: hidden; aspect-ratio: 4/5; background: #1c1c1f; }
.haal-card.haal-card-square{ aspect-ratio: 1/1; }
.haal-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.haal-card:hover img{ transform: scale(1.06); }
.haal-card-overlay{ position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 22px; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85) 100%); }
.haal-card-overlay .haal-eyebrow{ display: block; margin-bottom: 6px; }
.haal-card-title{ font-family: var(--font-serif); font-size: 1.1rem; color: #fff; }

.haal-empty-state{ text-align: center; color: var(--haal-fg-muted); border: 1px dashed var(--haal-line); border-radius: var(--haal-radius); padding: 50px 24px; }
.haal-cta-more{ text-align: center; margin-top: 44px; }

/* Filtro de categorías */
.haal-filter-bar{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 44px; }
.haal-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--haal-line); font-size: .84rem; color: var(--haal-fg-muted); }
.haal-chip:hover{ color: var(--haal-fg); border-color: var(--haal-gold); }
.haal-chip.is-active{ background: var(--haal-gold); color: #18140b; border-color: var(--haal-gold); font-weight: 600; }

/* ==========================================================================
   Proyecto individual
   ========================================================================== */
.haal-single-project{ padding: 60px 0 100px; }
.haal-back-link{ display: inline-block; margin-bottom: 26px; color: var(--haal-gold); font-size: .9rem; }
.haal-project-meta{ list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 34px; padding: 0; color: var(--haal-fg-muted); font-size: .92rem; }
.haal-project-meta li:not(:last-child)::after{ content: "·"; margin-left: 18px; color: var(--haal-line); }
.haal-single-project-cover{ border-radius: var(--haal-radius); overflow: hidden; margin-bottom: 40px; }
.haal-project-video{ margin: 40px 0; border-radius: var(--haal-radius); overflow: hidden; }
.haal-project-cta{ display: flex; flex-wrap: wrap; gap: 14px; margin: 40px 0; }
.haal-related-projects{ margin-top: 70px; padding-top: 50px; border-top: 1px solid var(--haal-line); }
.haal-related-projects h2{ margin-bottom: 30px; }

/* ==========================================================================
   Formulario de cotización
   ========================================================================== */
.haal-quote-section{ background: var(--haal-bg-soft); }
.haal-quote-wrap{ max-width: 820px; }
.haal-quote-form{ display: flex; flex-direction: column; gap: 22px; }
.haal-form-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 640px){ .haal-form-grid{ grid-template-columns: 1fr; } }
.haal-quote-form label{ display: flex; flex-direction: column; gap: 8px; font-size: .88rem; color: var(--haal-fg-muted); }
.haal-form-full{ grid-column: 1 / -1; }
.haal-quote-form input[type=text], .haal-quote-form input[type=email], .haal-quote-form input[type=tel],
.haal-quote-form input[type=date], .haal-quote-form input[type=number], .haal-quote-form select, .haal-quote-form textarea{
  background: var(--haal-bg); border: 1px solid var(--haal-line); border-radius: var(--haal-radius-sm);
  color: var(--haal-fg); padding: 13px 16px; font-family: inherit; font-size: .95rem;
}
.haal-quote-form input:focus, .haal-quote-form select:focus, .haal-quote-form textarea:focus{ outline: none; border-color: var(--haal-gold); }
.haal-form-file input[type=file]{ color: var(--haal-fg-muted); font-size: .85rem; }
.haal-form-file .description{ font-size: .8rem; color: var(--haal-fg-muted); opacity: .8; }
.haal-form-hint{ font-size: .8rem; color: var(--haal-fg-muted); opacity: .8; }
.haal-quote-form button{ align-self: flex-start; }
.haal-form-notice{ padding: 16px 20px; border-radius: var(--haal-radius-sm); margin-bottom: 26px; font-size: .9rem; }
.haal-form-notice-error{ background: rgba(214,40,74,0.12); border: 1px solid rgba(214,40,74,0.4); color: #ffb8c6; }

/* ==========================================================================
   Instagram band / CTA final / footer
   ========================================================================== */
.haal-instagram-inner{ text-align: center; }
.haal-social-band{ display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 10px; }

.haal-final-cta{ text-align: center; }
.haal-final-cta-inner{ max-width: 680px; }
.haal-final-cta p{ color: var(--haal-fg-muted); margin-bottom: 30px; }

.haal-footer{ border-top: 1px solid var(--haal-line); padding: 56px 0 32px; color: var(--haal-fg-muted); font-size: .87rem; }
.haal-footer-top{ display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; align-items: flex-start; margin-bottom: 34px; }
.haal-footer-brand p{ margin: 10px 0 0; }
.haal-footer-bottom{ border-top: 1px solid var(--haal-line); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }

/* ==========================================================================
   Botón flotante de WhatsApp
   ========================================================================== */
.haal-whatsapp-float{
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--haal-wa); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.6);
  animation: haal-pulse 2.6s infinite;
}
.haal-whatsapp-float svg{ width: 30px; height: 30px; fill: #08210f; }
@keyframes haal-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70%{ box-shadow: 0 0 0 14px rgba(37,211,102,0); }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ==========================================================================
   404
   ========================================================================== */
.haal-404 .haal-btn{ margin-top: 20px; }