/* ============================================================
   TEMPLO MEZKI — Frontend (nuevo mockup aprobado, tema oscuro)
   Negro volcánico · Arena cálida · Dorado suave · Jade oscuro
   ============================================================ */
:root{
  --negro:#0C0A07;          /* fondo volcánico */
  --negro-2:#14100B;        /* paneles */
  --negro-3:#1A150F;        /* tarjetas */
  --jade:#16201B;           /* verde jade oscuro */
  --oro:#C9A36B;            /* dorado suave */
  --arena:#DCC09A;          /* arena cálida */
  --crema:#F1E9DA;          /* beige piedra */
  --texto:#CFC4B2;
  --texto-suave:#9A8F7D;
  --borde:rgba(201,163,107,.22);
  --borde-suave:rgba(201,163,107,.12);
  --radio:10px;
  --ancho:1180px;
  --f-serif:'Cormorant Garamond',Georgia,serif;
  --f-sans:'Jost',system-ui,sans-serif;
  --f-script:'Great Vibes',cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html{background:var(--negro);overflow-x:hidden}
body{overflow-x:hidden;width:100%}
body{background:var(--negro);color:var(--texto);font-family:var(--f-sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 28px}
.eyebrow{font-size:11px;letter-spacing:.28em;color:var(--oro);text-transform:uppercase;font-weight:500}
.titulo-serif{font-family:var(--f-serif);font-weight:500;color:var(--crema)}
.ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;padding:13px 26px;border-radius:8px;border:1px solid transparent;cursor:pointer;transition:.25s}
.btn--oro{background:linear-gradient(180deg,var(--arena),var(--oro));color:#241A0D;border-color:rgba(255,255,255,.15)}
.btn--oro:hover{filter:brightness(1.07)}
.btn--borde{border-color:var(--borde);color:var(--arena);background:rgba(201,163,107,.05)}
.btn--borde:hover{background:rgba(201,163,107,.13)}
.btn--fantasma{border-color:var(--borde);color:var(--arena);background:rgba(12,10,7,.78);backdrop-filter:blur(4px);padding:9px 16px;font-size:10px;border-radius:8px}

/* Greca zapoteca decorativa (baja intensidad) */
.greca{height:10px;background-image:repeating-linear-gradient(90deg,var(--borde-suave) 0 2px,transparent 2px 10px);opacity:.5}
.deco-ancestral{position:absolute;opacity:.16;color:var(--oro);pointer-events:none}

/* ============ HEADER ============ */
.header{position:sticky;top:0;z-index:60;background:rgba(12,10,7,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--borde-suave);transition:.3s}
.header-int{display:flex;align-items:center;gap:26px;height:78px}
.header-logo img{width:56px;height:56px;border-radius:50%;border:1px solid var(--borde)}
.nav{display:flex;gap:30px;margin-left:8px}
.nav a{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--texto);padding:6px 0;position:relative}
.nav a.activo,.nav a:hover{color:var(--arena)}
.nav a.activo::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--oro);border-radius:2px}
.header-der{margin-left:auto;display:flex;align-items:center;gap:18px}
.header-ig{width:38px;height:38px;border:1px solid var(--borde);border-radius:9px;display:grid;place-items:center;color:var(--arena)}
.header-ig:hover{background:rgba(201,163,107,.1)}
.burger{display:none;background:none;border:1px solid var(--borde);color:var(--arena);border-radius:8px;width:42px;height:38px;font-size:18px;cursor:pointer}

/* ============ HERO ============ */
.hero{position:relative;width:100%;height:calc(100vw * .46875);min-height:540px;max-height:720px;display:flex;align-items:stretch;overflow:hidden}
.hero-fondo,.hero-fondo video,.hero-fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,10,7,.93) 0%,rgba(12,10,7,.55) 45%,rgba(12,10,7,.35) 65%,rgba(12,10,7,.78) 100%)}
.hero-int{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-top:34px;padding-bottom:40px;width:100%}
.hero-txt .eyebrow{display:block;margin-bottom:14px}
.hero-titulo{font-family:var(--f-serif);font-size:clamp(42px,5.2vw,64px);line-height:1;color:var(--crema);font-weight:500;letter-spacing:.02em}
.hero-script{font-family:var(--f-script);font-size:28px;color:var(--oro);margin:6px 0 14px}
.hero-parrafo{max-width:430px;color:var(--texto);margin-bottom:20px;font-size:14px}
.hero-mini{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:24px}
.hero-mini li{display:flex;gap:10px;align-items:center;max-width:150px}
.hero-mini .ico{color:var(--oro);flex:none;width:26px;height:26px;border:1px solid var(--borde);border-radius:50%;padding:5px}
.hero-mini span{font-size:11.5px;line-height:1.35;color:var(--texto)}

/* Tarjeta de preconsulta (NO motor de reservas) */
.tarjeta-reserva{background:linear-gradient(180deg,rgba(20,16,11,.92),rgba(14,11,8,.94));border:1px solid var(--borde);border-radius:14px;padding:22px 22px 20px;backdrop-filter:blur(8px);box-shadow:0 30px 60px rgba(0,0,0,.45);position:relative;max-width:440px;justify-self:end;width:100%}
.tarjeta-reserva h2{font-family:var(--f-serif);font-size:23px;letter-spacing:.04em;color:var(--crema);font-weight:500}
.tarjeta-reserva .sub{font-size:12px;color:var(--texto-suave);margin:3px 0 14px}
.tr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.tr-campo{border:1px solid var(--borde);border-radius:9px;padding:8px 12px;background:rgba(12,10,7,.5);position:relative}
.tr-campo label{display:block;font-size:9.5px;letter-spacing:.22em;color:var(--oro);text-transform:uppercase;margin-bottom:3px}
.tr-campo input,.tr-campo select{width:100%;background:none;border:none;color:var(--crema);font-family:var(--f-sans);font-size:14.5px;outline:none;appearance:none;color-scheme:dark}
.tr-campo--full{grid-column:1/-1}
.tr-campo select option{background:var(--negro-2);color:var(--crema)}
.tarjeta-reserva .btn{width:100%;justify-content:center;margin-top:6px}
.tr-nota{display:flex;gap:8px;align-items:center;justify-content:center;font-size:12px;color:var(--texto-suave);margin-top:14px}
.tr-nota .ico{width:16px;height:16px;color:var(--oro)}
.tr-error{display:none;color:#E08A8A;font-size:12.5px;text-align:center;margin-top:10px}

/* ============ BARRA DE BENEFICIOS ============ */
.beneficios{border-top:1px solid var(--borde-suave);border-bottom:1px solid var(--borde-suave);background:var(--negro-2)}
.beneficios-int{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:13px 28px}
.beneficio{display:flex;gap:10px;align-items:center;justify-content:center}
.beneficio .ico{color:var(--oro);width:22px;height:22px;flex:none}
.beneficio div{font-size:11.5px;line-height:1.3;color:var(--texto)}

/* ============ ESENCIA ============ */
.esencia{position:relative;padding:34px 0 40px;background:var(--negro)}
.esencia-int{display:grid;grid-template-columns:1.05fr 1fr;gap:42px;align-items:center}
.esencia-img{border-radius:12px;overflow:hidden;border:1px solid var(--borde-suave);aspect-ratio:16/7;max-height:260px}
.esencia-img img{width:100%;height:100%;object-fit:cover}
.esencia-cont .eyebrow{display:block;margin-bottom:7px;font-size:10.5px}
.esencia-cont h2{font-size:clamp(23px,2.3vw,29px);line-height:1.2;margin-bottom:12px;max-width:430px}
.esencia-cont p{max-width:440px;margin-bottom:9px;font-size:12.5px;line-height:1.55}

.esencia-cont .btn{border-radius:999px;padding:8px 16px;font-size:10px;letter-spacing:.12em;gap:7px}
.esencia-cont .btn .ico{width:15px;height:15px}

/* ============ SECCIONES CENTRADAS ============ */
.seccion{padding:26px 0;position:relative}
.seccion-cab{text-align:center;margin-bottom:16px}
.seccion-cab .eyebrow{display:block;margin-bottom:4px;font-size:10px}
.seccion-cab h2{font-size:clamp(20px,2.1vw,24px)}

/* ============ HABITACIONES ============ */
.habitaciones{background:var(--negro)}
.hab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hab-card{background:var(--negro-3);border:1px solid var(--borde-suave);border-radius:12px;overflow:hidden;transition:.3s}
.hab-card:hover{border-color:var(--borde);transform:translateY(-4px)}
.hab-card img{aspect-ratio:5/2;width:100%;object-fit:cover}
.hab-cuerpo{padding:10px 12px 12px}
.hab-cuerpo h3{font-family:var(--f-sans);font-size:13px;color:var(--crema);font-weight:500;margin-bottom:6px;letter-spacing:.01em}
.hab-meta{display:flex;gap:14px;font-size:10.5px;color:var(--texto-suave);margin-bottom:10px}
.hab-meta span{display:flex;gap:6px;align-items:center}
.hab-meta .ico{width:13px;height:13px;color:var(--oro)}
.hab-card .btn{width:100%;justify-content:center;padding:7px 10px;font-size:10px;border-radius:6px}
.centro-btn{display:flex;justify-content:center;margin-top:16px}

/* ============ EXPERIENCIAS ============ */
.exp-zona{position:relative}
.exp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.exp-card{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:1.32/1;border:1px solid var(--borde-suave)}
.exp-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.4s}
.exp-card:hover img{transform:scale(1.06)}
.exp-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(10,8,6,.92))}
.exp-info{position:absolute;left:0;right:0;bottom:0;padding:9px 8px;text-align:center;z-index:2}
.exp-ico{width:28px;height:28px;margin:0 auto 5px;border:1px solid var(--borde);border-radius:50%;display:grid;place-items:center;background:rgba(12,10,7,.55);color:var(--oro)}
.exp-ico .ico{width:14px;height:14px}
.exp-info h3{font-size:12px;color:var(--arena);font-weight:500;letter-spacing:.02em;line-height:1.25}
.exp-info small{font-size:10px;color:var(--texto-suave)}
.flecha{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--borde);background:rgba(12,10,7,.7);color:var(--arena);display:grid;place-items:center;cursor:pointer;z-index:5}
.flecha--izq{left:4px}.flecha--der{right:4px}

/* ============ GALERÍA ============ */
.galeria-strip{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.galeria-strip a{border-radius:8px;overflow:hidden;aspect-ratio:1.75/1;border:1px solid var(--borde-suave);position:relative}
.galeria-strip img{width:100%;height:100%;object-fit:cover;transition:.4s}
.galeria-strip a:hover img{transform:scale(1.06)}
.galeria-btn-centro{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3}
.galeria-btn-centro .btn{pointer-events:auto}

/* ============ UBICACIÓN + TESTIMONIOS ============ */
.zona-ubicacion{padding:36px 0;background:var(--negro-2);border-top:1px solid var(--borde-suave);border-bottom:1px solid var(--borde-suave)}
.ubi-grid{display:grid;grid-template-columns:1fr 1.05fr 1fr;gap:40px;align-items:center}
.ubi-col .eyebrow{display:block;margin-bottom:8px}
.ubi-col h2{font-size:28px;margin-bottom:20px}
.ubi-lista li{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:13.5px}
.ubi-lista .ico{color:var(--oro);width:19px;height:19px;flex:none}
.ubi-lista b{color:var(--crema);font-weight:500;flex:1}
.ubi-lista span{color:var(--texto-suave);font-size:12.5px}
.ubi-mapa{border-radius:14px;overflow:hidden;border:1px solid var(--borde);aspect-ratio:1.25/1;filter:saturate(.7) contrast(.95)}
.ubi-mapa iframe{width:100%;height:100%;border:0}
.testi-card{position:relative;text-align:center}
.testi-card .comillas{font-family:var(--f-serif);font-size:64px;line-height:.5;color:var(--oro);display:block;margin-bottom:18px}
.testi-texto{font-size:14.5px;color:var(--texto);margin-bottom:16px;min-height:88px}
.testi-estrellas{color:var(--oro);letter-spacing:4px;font-size:15px;margin-bottom:8px}
.testi-nombre{font-size:12.5px;color:var(--texto-suave)}
.testi-dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.testi-dots button{width:8px;height:8px;border-radius:50%;border:none;background:var(--borde);cursor:pointer}
.testi-dots button.activo{background:var(--oro)}
.testi-nav{position:relative}

/* ============ INSTAGRAM ============ */
.instagram{padding:28px 0;border-bottom:1px solid var(--borde-suave)}
.ig-int{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:center}
.ig-marca .eyebrow{display:block;margin-bottom:6px}
.ig-marca a{font-family:var(--f-serif);font-size:24px;color:var(--crema)}
.ig-thumbs{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.ig-thumbs a{border-radius:9px;overflow:hidden;aspect-ratio:1/1;border:1px solid var(--borde-suave)}
.ig-thumbs img{width:100%;height:100%;object-fit:cover;transition:.35s}
.ig-thumbs a:hover img{transform:scale(1.08)}

/* ============ FOOTER ============ */
.footer{background:var(--negro-2);padding:56px 0 0}
.footer-int{display:grid;grid-template-columns:1.3fr 1fr 1.2fr 1.1fr .9fr;gap:34px}
.footer h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--oro);margin-bottom:16px;font-weight:500}
.footer-marca img{width:74px;height:74px;border-radius:50%;border:1px solid var(--borde);margin-bottom:14px}
.footer-marca p{font-size:13px;max-width:220px;margin-bottom:16px}
.footer-redes{display:flex;gap:12px}
.footer-redes a{width:34px;height:34px;border:1px solid var(--borde);border-radius:8px;display:grid;place-items:center;color:var(--arena)}
.footer-redes a:hover{background:rgba(201,163,107,.1)}
.footer ul li{margin-bottom:9px;font-size:13px}
.footer ul a:hover{color:var(--arena)}
.footer-info li{display:flex;gap:9px;align-items:flex-start}
.footer-info .ico{width:16px;height:16px;color:var(--oro);flex:none;margin-top:3px}
.footer-wa{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer-wa .btn{padding:12px 20px}
.footer-bajo{margin-top:44px;border-top:1px solid var(--borde-suave);padding:18px 0;text-align:center;font-size:12px;color:var(--texto-suave)}

/* WhatsApp flotante */
.wa-flotante{position:fixed;right:22px;bottom:22px;width:54px;height:54px;border-radius:50%;background:#1FAF59;display:grid;place-items:center;z-index:80;box-shadow:0 12px 28px rgba(0,0,0,.45)}
.wa-flotante svg{width:28px;height:28px;fill:#fff}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){
  .hab-grid{grid-template-columns:repeat(2,1fr)}
  .exp-grid{grid-template-columns:repeat(3,1fr)}
  .galeria-strip,.ig-thumbs{grid-template-columns:repeat(4,1fr)}
  .ubi-grid{grid-template-columns:1fr;gap:34px}
  .footer-int{grid-template-columns:1fr 1fr}
  .beneficios-int{grid-template-columns:repeat(3,1fr);row-gap:18px}
}
@media(max-width:900px){
  .nav{display:none;position:absolute;top:78px;left:0;right:0;background:var(--negro-2);flex-direction:column;padding:18px 28px;gap:14px;border-bottom:1px solid var(--borde)}
  .nav.abierto{display:flex}
  .burger{display:block}
  .hero{height:auto;max-height:none}
  .hero-int{grid-template-columns:1fr;padding-top:28px}
  .tarjeta-reserva{max-width:100%;justify-self:stretch}
  .hero{min-height:0}
  .esencia-int{grid-template-columns:1fr}
}
@media(max-width:620px){
  .hab-grid,.exp-grid{grid-template-columns:1fr 1fr}
  .galeria-strip,.ig-thumbs{grid-template-columns:repeat(2,1fr)}
  .beneficios-int{grid-template-columns:repeat(2,1fr)}
  .footer-int{grid-template-columns:1fr}
  .tr-grid{grid-template-columns:1fr}
  .ig-int{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}