/* =========================================================================
   Tentarte — paleta tomada del flyer de la marca: fondo negro cálido,
   tipografía serif dorada, acento vino/rojo como segundo color. Estética
   elegante y mística, acorde a "arte terapia / aromaterapia".
   ========================================================================= */

:root {
  --bg: #100d10;
  --bg-alt: #17131a;
  --surface: #1c1720;
  --surface-2: #221c27;
  --ink: #f3ead9;
  --ink-muted: #b8a888;
  --accent: #c9a227;
  --accent-dark: #8b1e3f;
  --accent-soft: rgba(201, 162, 39, 0.12);
  --line: rgba(243, 234, 217, 0.12);

  --radius-lg: 26px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow-soft: 0 24px 50px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.35);

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Jost", "Segoe UI", sans-serif;

  --container: 1120px;
}


* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.28; letter-spacing: 0.04em; margin: 0; }

.section-inner { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; }
.section-alt { background: var(--bg-alt); }

.section-header { margin-bottom: 44px; }
.section-header.centered { text-align: center; }
.section-title { font-size: clamp(1.8rem, 2.6vw, 2.5rem); }
.section-text { color: var(--ink-muted); max-width: 700px; margin: 14px auto 0; }
.centered .section-text { margin-left: auto; margin-right: auto; }

.prose { color: var(--ink-muted); max-width: 760px; }
.prose p { margin: 0 0 1.1em; }
.prose-centered { max-width: 760px; margin: 0 auto; text-align: center; }

.kicker {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 0 0 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 34px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #ffffff;
  box-shadow: var(--shadow-card);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn-ghost-dark {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.btn-ghost-dark:hover { background: rgba(255, 255, 255, 0.18); }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(94%, 1080px);
  background: var(--surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
}

.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px 28px; }
.nav-brand { display: flex; align-items: center; }
.nav-logo { height: 52px; width: auto; display: block; }

@media (max-width: 920px) {
  .nav-logo { height: 42px; }
}

.nav-links { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.nav-links a {
  display: block;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-links a:hover { background: rgba(255, 255, 255, 0.08); }
.nav-links a.nav-cta { background: var(--accent); color: #ffffff; font-weight: 600; }
.nav-links a.nav-cta:hover { background: var(--accent-dark); }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 10px; cursor: pointer; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    padding: 10px;
    gap: 2px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { text-align: center; }
}

/* ---------- Hero ---------- */

/* El degradé de fondo es la base "por si no hay foto de portada cargada todavía"
   (queda prolijo igual); en cuanto se sube una imagen real, la tapa por completo. */
.hero {
  position: relative;
  /* z-index (aunque sea 0) es lo que hace que .hero cree su propio contexto de
     apilamiento - sin esto, el z-index:-1 de .hero-media se escapa al contexto raíz
     de la página entera, y el fondo de acá abajo termina pintándose ARRIBA de la
     foto en vez de detrás (bug real: pasó exactamente esto con la primera foto que
     se subió). */
  z-index: 0;
  min-height: 90vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  /* Fondo sólido oscuro (igual al de la marca), no el degradé dorado/vino - la foto que
     se usa acá ya es oscura de por sí, y el degradé desentonaba fuerte contra eso. */
  background: var(--bg);
}
/* top:85px en vez de inset:0 (0 arriba) - lo justo para que el nav fijo (top:18px, unos
   55px de alto) no tape el borde de la foto, sin dejar un hueco grande arriba. */
.hero-media { position: absolute; top: 85px; right: 0; bottom: 0; left: 0; z-index: -1; }
/* object-fit: contain (no "cover") a propósito - la foto de portada acá suele ser un
   flyer con texto, no una foto de paisaje, y recortarla ("cover") se come partes
   importantes del texto en los bordes según el ancho de pantalla. Con "contain" entra
   completa siempre, con el fondo oscuro de la marca rellenando lo que sobra. */
.hero-img { width: 100%; height: 100%; object-fit: contain; background: var(--bg); }
.hero-veil {
  position: absolute;
  inset: 0;
  /* Antes llegaba a 0.94 de opacidad abajo y prácticamente tapaba la foto entera -
     bajado a un rango donde la imagen se sigue viendo, y la lectura del texto la da
     el text-shadow de abajo, no el velo. */
  background: linear-gradient(180deg, rgba(16,13,16,0.2) 0%, rgba(16,13,16,0.15) 40%, rgba(16,13,16,0.55) 100%);
}

.hero-content { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 28px 90px; width: 100%; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; color: rgba(255,255,255,0.9); margin: 0 0 14px; font-weight: 600; text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.hero-title { font-size: clamp(2.4rem, 5.6vw, 4.2rem); margin-bottom: 18px; max-width: 780px; color: #ffffff; text-shadow: 0 2px 20px rgba(0,0,0,0.55); }
.hero-subtitle { font-size: 1.1rem; max-width: 560px; margin: 0 0 32px; color: rgba(255,255,255,0.92); text-shadow: 0 1px 14px rgba(0,0,0,0.5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Próximo evento ---------- */

.proximo-evento { background: var(--surface); border-bottom: 1px solid var(--line); padding: 56px 0; }
.proximo-evento-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
}
.proximo-evento-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--accent);
}
.proximo-evento-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.video-frame { position: relative; aspect-ratio: 16 / 9; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.proximo-evento-headline {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 800px) {
  .proximo-evento-inner { grid-template-columns: 1fr; }
}

/* ---------- Stats ---------- */

.stats { background: var(--surface); border-bottom: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 40px 28px; gap: 20px; }
.stat-number { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: 0.03em; color: var(--accent); font-weight: 500; }
.stat-label { display: block; font-size: 0.85rem; color: var(--ink-muted); margin-top: 6px; }

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Servicios ---------- */

.servicios-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.servicio-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  box-shadow: var(--shadow-card);
}
.servicio-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.servicio-icon svg { width: 22px; height: 22px; }
.servicio-card p { margin: 0; color: var(--ink-muted); font-size: 0.95rem; }

/* ---------- Colaboraciones (reusa .servicios-list / .servicio-card) ---------- */

.colab-nombre { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); margin: 0 0 8px; }
.colab-card p { margin: 0 0 10px; }
.colab-contacto { display: block; color: var(--ink-muted); font-size: 0.88rem; margin-bottom: 4px; }
.colab-link { color: var(--accent); font-size: 0.88rem; }

/* ---------- Galería ---------- */

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.gallery button {
  padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card);
  aspect-ratio: 1 / 1;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery button:hover img { transform: scale(1.06); }

@media (max-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 560px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* Honeypot anti-spam del formulario de contacto: campo trampa invisible para
   personas, visible para bots que completan todos los inputs de un formulario. */
.hp-field { position: absolute; left: -9999px; opacity: 0; }

/* ---------- Listas de tipos de evento / servicios (texto separado por "·") ---------- */

.tipos-lista {
  color: var(--ink-muted);
  font-size: 0.95rem;
  line-height: 2;
  margin-top: 18px;
}

.subseccion { margin-top: 44px; }
.subseccion-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink);
  margin-bottom: 4px;
}

/* ---------- Formularios (compartido: testimonios y contacto) ---------- */

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 6px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  resize: vertical;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--accent); }

.form-status { margin: 14px 0 0; font-size: 0.9rem; min-height: 1.2em; }
.form-status.ok { color: #7cc47a; }
.form-status.error { color: #e08a7f; }

/* ---------- Contacto ---------- */

.contacto-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.info-list li { display: flex; flex-direction: column; gap: 4px; }
.info-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); }
.contact-form { background: var(--surface); padding: 36px; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

@media (max-width: 900px) {
  .contacto-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- Footer ---------- */

.footer { background: var(--bg-alt); color: var(--ink); padding: 56px 0 34px; text-align: center; border-top: 1px solid var(--line); }
.footer-inner { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.footer-brand { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.06em; color: var(--ink); margin: 0 0 22px; font-weight: 500; }

.social-row { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 0 0 26px; padding: 0; }
.social-row a {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(28,28,26,0.06); color: var(--ink);
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.social-row a:hover { background: var(--accent); color: #ffffff; transform: translateY(-2px); }
.social-row svg { width: 18px; height: 18px; }

.copyright { font-size: 0.82rem; color: var(--ink-muted); margin: 0; }

/* ---------- WhatsApp flotante ---------- */

.whatsapp-float {
  position: fixed; bottom: 26px; right: 26px; width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft); z-index: 90; transition: transform 0.2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 40px;
}
.lightbox img { max-width: min(90vw, 1000px); max-height: 86vh; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.lightbox-close, .lightbox-nav {
  position: absolute; background: rgba(255,255,255,0.12); color: #fff; border: none; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lightbox-close { top: 24px; right: 24px; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }

@media (max-width: 640px) {
  .lightbox-nav { width: 42px; height: 42px; font-size: 1.6rem; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
}