/* =====================================================================
   MARIACHI TUXTLA — style.css
   Paleta: Negro (#0b0b0c) / Dorado (#c9922f, tono real del logo) / Blanco (#f7f5f0)
   ===================================================================== */

:root{
  --negro: #0b0b0c;
  --negro-suave: #141815;
  --acento: #c9922f;
  --acento-claro: #e3b568;
  --blanco: #f7f5f0;
  --gris: #b9b6ad;
  --radius: 10px;
  --sombra: 0 10px 30px rgba(0,0,0,.35);
  --fuente-titulo: "Playfair Display", Georgia, "Times New Roman", serif;
  --fuente-texto: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--fuente-texto);
  line-height:1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--acento-claro); text-decoration:none; }
a:hover{ color: var(--acento); }
h1,h2,h3,h4{
  font-family: var(--fuente-titulo);
  color: var(--blanco);
  line-height:1.2;
  margin:0 0 .6em;
}
h1{ font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2{ font-size: clamp(1.6rem, 3.2vw, 2.3rem); color: var(--acento-claro); }
h3{ font-size: 1.25rem; }
p{ margin:0 0 1em; color: var(--gris); }
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 20px; }
section{ padding: 64px 0; }
.section-alt{ background: var(--negro-suave); }
.text-center{ text-align:center; }
.small-caps{
  letter-spacing:.18em; text-transform:uppercase; font-size:.78rem;
  color: var(--acento); font-weight:600;
}

/* ===== BOTONES ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 14px 28px; border-radius: 50px; font-weight:600;
  font-size: .95rem; cursor:pointer; border:2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn-primary{ background: var(--acento); color: var(--negro); }
.btn-primary:hover{ background: var(--acento-claro); transform: translateY(-2px); box-shadow: var(--sombra); color: var(--negro); }
.btn-outline{ border-color: var(--acento); color: var(--acento-claro); background:transparent; }
.btn-outline:hover{ background: var(--acento); color: var(--negro); }
.btn-whatsapp{ background:#25D366; color:#0b0b0c; }
.btn-whatsapp:hover{ background:#1ebe5a; color:#0b0b0c; }
.btn-lg{ padding:18px 34px; font-size:1.05rem; }
.cta-row{ display:flex; flex-wrap:wrap; gap:16px; margin-top:20px; }

/* ===== HEADER ===== */
.site-header{
  position: sticky; top:0; z-index: 500;
  background: rgba(11,11,12,.97);
  border-bottom: 1px solid rgba(201,146,47,.25);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 20px; max-width:1180px; margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:44px; width:auto; }
.brand-text{ font-family: var(--fuente-titulo); font-size:1.3rem; color: var(--blanco); }
.brand-text span{ color: var(--acento); }

.main-nav ul{
  list-style:none; display:flex; gap:26px; margin:0; padding:0;
}
.main-nav a{
  color: var(--blanco); font-size:.92rem; font-weight:500;
  padding:6px 2px; border-bottom:2px solid transparent;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{
  color: var(--acento-claro); border-bottom-color: var(--acento);
}
.header-cta{ display:flex; align-items:center; gap:14px; }
.hamburger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;
}
.hamburger span{ width:26px; height:2px; background: var(--acento); display:block; }

/* ===== HERO ===== */
.hero{
  position:relative; min-height:88vh; display:flex; align-items:center;
  background: var(--negro);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: center 30%; opacity:.7;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,11,12,.55), rgba(11,11,12,.85));
  pointer-events:none;
}
.hero-content{ position:relative; z-index:1; max-width:720px; }
.hero-content .small-caps{ display:block; margin-bottom:14px; }
.hero-content h1{ margin-bottom:10px; }
.hero-content .subtitulo{ font-size:1.15rem; color: var(--gris); max-width:560px; }

/* ===== SERVICIOS GRID ===== */
.servicios-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
  gap:22px; margin-top:36px;
}
.servicio-card{
  background: var(--negro-suave); border:1px solid rgba(201,146,47,.2);
  border-radius: var(--radius); padding:26px; transition: transform .2s, border-color .2s;
}
.servicio-card:hover{ transform: translateY(-4px); border-color: var(--acento); }
.servicio-card h3{ color: var(--acento-claro); margin-bottom:8px; }
.servicio-card a{ font-size:.88rem; font-weight:600; }

/* ===== BREADCRUMB ===== */
.breadcrumb{ padding: 16px 0 0; font-size:.82rem; color: var(--gris); }
.breadcrumb a{ color: var(--gris); }
.breadcrumb a:hover{ color: var(--acento); }
.breadcrumb span{ color: var(--acento); }

/* ===== IMAGEN + TEXTO ===== */
.split{
  display:grid; grid-template-columns: 1fr 1fr; gap:44px; align-items:center;
}
.split img{ width:100%; height:auto; border-radius: var(--radius); box-shadow: var(--sombra); }
.img-frame{
  position:relative; width:100%; aspect-ratio: 3 / 2; overflow:hidden;
  border-radius: var(--radius); box-shadow: var(--sombra); background: var(--negro-suave);
}
.img-frame img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; box-shadow:none; }

/* ===== LISTAS DE ZONAS / CHECKS ===== */
.check-list{ list-style:none; padding:0; margin:0; }
.check-list li{
  padding-left:28px; position:relative; margin-bottom:10px; color: var(--gris);
}
.check-list li::before{
  content:"✓"; position:absolute; left:0; color: var(--acento); font-weight:700;
}

.zonas-grid{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:18px; margin-top:30px;
}
.zona-card{
  background: var(--negro-suave); border-left:3px solid var(--acento);
  padding:20px; border-radius: 6px;
}

/* ===== REPERTORIO ===== */
.repertorio-grid{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin-top:30px;
}
.repertorio-cat{
  background: var(--negro-suave); border:1px solid rgba(201,146,47,.18);
  border-radius: var(--radius); padding:22px;
}
.repertorio-cat h3{ color: var(--acento); border-bottom:1px solid rgba(201,146,47,.25); padding-bottom:8px; margin-bottom:12px; }
.repertorio-cat ul{ margin:0; padding-left:18px; color: var(--gris); }
.repertorio-cat li{ margin-bottom:6px; }

/* ===== GALERÍA ===== */
.galeria-grid{
  display:grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:30px;
}
.galeria-grid figure{ margin:0; overflow:hidden; border-radius:8px; background: var(--negro-suave); }
.galeria-grid img{ width:100%; height:230px; object-fit:cover; transition: transform .3s; cursor:pointer; display:block; }
.galeria-grid figure:hover img{ transform: scale(1.06); }
.galeria-grid figcaption{ padding:10px 14px; font-size:.85rem; }
.galeria-grid figcaption a{ color: var(--gris); }
.galeria-grid figcaption a:hover{ color: var(--acento-claro); }

.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.92); display:none;
  align-items:center; justify-content:center; z-index:1000; flex-direction:column;
}
.lightbox.active{ display:flex; }
.lightbox img{ max-width:88vw; max-height:78vh; border-radius:6px; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:none; border:none; color: var(--acento);
  font-size:2.2rem; cursor:pointer; padding:10px;
}
.lightbox-close{ top:16px; right:20px; }
.lightbox-prev{ left:12px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:12px; top:50%; transform:translateY(-50%); }
.lightbox-caption{ color: var(--gris); margin-top:12px; font-size:.9rem; }

/* ===== FAQ ===== */
.faq-item{
  border-bottom:1px solid rgba(201,146,47,.2); padding:18px 0;
}
.faq-question{
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; font-weight:600; color: var(--blanco); font-size:1.02rem;
}
.faq-question .icon{ color: var(--acento); transition: transform .25s; }
.faq-item.open .faq-question .icon{ transform: rotate(45deg); }
.faq-answer{
  max-height:0; overflow:hidden; transition: max-height .3s ease;
  color: var(--gris); font-size:.94rem;
}
.faq-item.open .faq-answer{ padding-top:12px; }

/* ===== FORMULARIO ===== */
.form-cotizacion{
  display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-top:30px;
}
.form-cotizacion .full{ grid-column: 1 / -1; }
.form-cotizacion label{
  display:block; font-size:.85rem; color: var(--acento-claro); margin-bottom:6px; font-weight:600;
}
.form-cotizacion input, .form-cotizacion select, .form-cotizacion textarea{
  width:100%; padding:12px 14px; border-radius:6px; border:1px solid rgba(201,146,47,.35);
  background: var(--negro-suave); color: var(--blanco); font-family: var(--fuente-texto); font-size:.95rem;
}
.form-cotizacion textarea{ resize:vertical; min-height:100px; }
.form-cotizacion input:focus, .form-cotizacion select:focus, .form-cotizacion textarea:focus{
  outline:none; border-color: var(--acento);
}

/* ===== WHATSAPP FLOTANTE ===== */
.whatsapp-float{
  position:fixed; bottom:22px; right:22px; z-index:600;
  background:#25D366; color:#0b0b0c; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow: var(--sombra);
  border:none; cursor:pointer;
}
.whatsapp-float svg{ width:28px; height:28px; }

/* ===== FOOTER ===== */
.site-footer{
  background: var(--negro-suave); border-top:1px solid rgba(201,146,47,.2);
  padding: 50px 0 24px; margin-top:60px;
}
.footer-grid{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:30px; margin-bottom:30px;
}
.footer-grid h4{ color: var(--acento); font-size:1rem; margin-bottom:14px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom:8px; }
.footer-grid a, .footer-grid p{ color: var(--gris); font-size:.9rem; }
.social-row{ display:flex; gap:14px; margin-top:10px; }
.social-row a{ color: var(--acento); font-size:1.3rem; }
.footer-bottom{
  border-top:1px solid rgba(201,146,47,.15); padding-top:20px; text-align:center;
  color: var(--gris); font-size:.8rem;
}

/* ===== UTILIDADES ===== */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.badge-acento{
  display:inline-block; background: rgba(201,146,47,.15); color: var(--acento-claro);
  padding:4px 12px; border-radius: 20px; font-size:.75rem; letter-spacing:.05em; margin-bottom:14px;
}

/* ===== ÍCONO DE WHATSAPP EN BOTONES =====
   Se aplica automáticamente a todos los botones "Cotizar por WhatsApp"
   (atributo data-whatsapp-btn) y al botón "Enviar por WhatsApp" del
   formulario de contacto, sin necesidad de editar el HTML de cada página. */
a[data-whatsapp-btn].btn-primary::before,
.btn-whatsapp::before{
  content:"";
  display:inline-block;
  width:18px; height:18px;
  margin-right:8px;
  vertical-align:-3px;
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22%230b0b0c%22%3E%3Cpath%20d%3D%22M16%200C7.2%200%200%207.2%200%2016c0%202.8.7%205.5%202.1%207.9L0%2032l8.3-2.1c2.3%201.3%204.9%201.9%207.7%201.9%208.8%200%2016-7.2%2016-16S24.8%200%2016%200zm0%2029.3c-2.5%200-4.9-.7-7-1.9l-.5-.3-4.9%201.3%201.3-4.8-.3-.5C3.1%2021%202.6%2018.5%202.6%2016c0-7.4%206-13.4%2013.4-13.4S29.4%208.6%2029.4%2016%2023.4%2029.3%2016%2029.3zm7.4-9.9c-.4-.2-2.4-1.2-2.7-1.3-.4-.1-.6-.2-.9.2-.3.4-1%201.3-1.2%201.5-.2.3-.4.3-.8.1-.4-.2-1.7-.6-3.2-2-1.2-1.1-2-2.4-2.2-2.8-.2-.4%200-.6.2-.8.2-.2.4-.4.6-.7.2-.2.3-.4.4-.6.1-.3.1-.5%200-.7-.1-.2-.9-2.2-1.3-3-.3-.8-.7-.7-.9-.7h-.8c-.3%200-.7.1-1%20.5-.4.4-1.4%201.3-1.4%203.2s1.4%203.7%201.6%204c.2.3%202.8%204.3%206.8%206%204%201.7%204%201.1%204.7%201%20.7-.1%202.4-1%202.7-1.9.3-.9.3-1.7.2-1.9-.1-.2-.4-.3-.8-.5z%22/%3E%3C/svg%3E');
}