/* ============================================================
   COLORES BASE (paleta "grafito"): se usan solo mientras carga la pagina.
   Las paletas de verdad estan en assets/js/paletas.js (un solo lugar para
   el admin y la pagina); render-catalogo.js las aplica sobre <body>.
   ============================================================ */
:root {
  --bg:            #0e1013;
  --surface:       #181b20;
  --surface-2:     #1f232a;
  --text:          #e9ebee;
  --text-dim:      #9aa0a6;
  --accent:        #4f8cff;
  --on-accent:     #ffffff;
  --border:        #2a2f36;
  --shadow:        0 10px 30px rgba(0,0,0,.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.catalogo {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Hyperspace (main.css) fuerza h1-h6 a blanco fijo; lo anulamos para que cada paleta use su propio --text */
.catalogo h1, .catalogo h2, .catalogo h3 { font-family: "Space Grotesk", "Inter", sans-serif; line-height: 1.2; color: var(--text); font-weight: 700; }
.catalogo img { max-width: 100%; display: block; }
.catalogo .contenedor { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 819px) { .catalogo .contenedor { padding: 0 26px; } }
.catalogo section { padding: 72px 0; }
/* en celular 72px arriba + 72px abajo entre secciones dejaba huecos muy grandes */
@media (max-width: 819px) { .catalogo section { padding: 52px 0; } }
/* Fuente y grosor de los titulos: los elige el negocio en el panel (render-catalogo.js pone las variables) */
.catalogo .titulo-seccion { font-family: var(--fuente-titulos, "Space Grotesk", "Inter", sans-serif); font-size: var(--tamano-titulos, 1.9rem); font-weight: var(--peso-titulos, 700); margin-bottom: 8px; }
.catalogo .subtitulo-seccion { color: var(--text-dim); margin-bottom: 36px; }

/* ---------- Botones ---------- */
.catalogo .btn {
  /* Hyperspace (main.css) fuerza altura/interlineado enormes en <button> reales (no en <a>); los anulamos aqui */
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px; height: auto; line-height: normal;
  font-weight: 600; font-size: .92rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.catalogo .btn svg { width: 17px; height: 17px; flex-shrink: 0; }
@media (max-width: 819px) {
  .catalogo .btn { padding: 9px 16px; font-size: .85rem; gap: 6px; }
  .catalogo .btn svg { width: 14px; height: 14px; }
}
.catalogo .btn:hover { transform: translateY(-1px); }
.catalogo .btn:active { transform: translateY(0) scale(.97); }
.catalogo .btn-primary { background: transparent; color: var(--accent); border-color: var(--accent); }
.catalogo .btn-primary:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.catalogo .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.catalogo .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.catalogo .btn-resaltado {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--text);
}
.catalogo .btn-resaltado:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }

/* ---------- Aviso de vista previa (solo cuando se abre desde el boton "Vista previa" del admin) ---------- */
.catalogo .aviso-preview {
  position: sticky; top: 0; z-index: 60; height: 36px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--on-accent);
  font-size: .82rem; font-weight: 600; text-align: center; padding: 0 12px;
}
.catalogo.con-aviso-preview .header { top: 36px; }

/* ---------- Header fijo ---------- */
.catalogo .header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--border);
}
.catalogo .header .contenedor { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.catalogo .marca { display: flex; align-items: center; gap: 14px; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.4rem; }
.catalogo .marca img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.catalogo .marca .iniciales {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 1.2rem;
}
/* Celular: un poco mas chico para que entren el nombre y los botones de la derecha */
@media (max-width: 600px) {
  .catalogo .header .contenedor { height: 68px; }
  .catalogo .marca { gap: 10px; font-size: 1.15rem; }
  .catalogo .marca img, .catalogo .marca .iniciales { width: 48px; height: 48px; }
}
.catalogo .header-derecha { display: flex; align-items: center; gap: 22px; }
.catalogo .separador-header { width: 1px; height: 20px; background: var(--border); }
.catalogo .nav { display: none; gap: 26px; }
.catalogo .nav a {
  position: relative; display: inline-block; color: var(--text-dim); text-decoration: none;
  border-bottom: 0; font-size: .9rem; font-weight: 500; padding: 4px 1px;
  transition: color .2s ease, transform .2s ease;
}
.catalogo .nav a::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 2px;
  border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(.65,0,.35,1);
}
.catalogo .nav a:hover { color: var(--accent); transform: translateY(-2px); }
.catalogo .nav a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (min-width: 820px) { .catalogo .nav { display: flex; } }
.catalogo .btn-compartir-header {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; color: var(--text-dim); text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.catalogo .btn-compartir-header svg { width: 18px; height: 18px; }
.catalogo .btn-compartir-header:hover { color: var(--accent); background: var(--surface-2); }

.catalogo .btn-menu-movil {
  /* el boton generico de Hyperspace (main.css) fuerza padding/borde/color/alto con !important; los anulamos aqui */
  display: none; width: 36px; height: 36px; padding: 0; margin: 0;
  border: 0 !important; background: transparent; color: var(--text) !important;
  text-transform: none; letter-spacing: normal; font-weight: 400; line-height: 1;
  cursor: pointer; place-items: center;
}
.catalogo .btn-menu-movil svg { width: 22px; height: 22px; }
@media (max-width: 819px) {
  .catalogo .btn-menu-movil { display: grid; }
  .catalogo .nav {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 26px 16px;
    box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .catalogo .nav.abierto { opacity: 1; visibility: visible; transform: translateY(0); }
  .catalogo .nav a { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .catalogo .nav a:last-child { border-bottom: 0; }
}

/* ---------- Hero / portada ---------- */
.catalogo .hero { position: relative; overflow: hidden; padding: 0; min-height: clamp(420px, 62vh, 560px); display: flex; align-items: center; }
.catalogo .hero.grande { min-height: clamp(600px, 92vh, 900px); }
.catalogo .hero.grande .hero-inner { padding-top: 40px; padding-bottom: 40px; }
.catalogo .hero-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
.catalogo .hero-bg img, .catalogo .hero-bg video { width: 100%; height: 100%; object-fit: cover; }
/* Portada con video: sin capa oscura (en PC y en celular por separado) */
@media (min-width: 820px) {
  .catalogo .hero.video-pc .hero-bg::after, .catalogo .hero.video-pc .hero-completa-fondo::after { display: none; }
}
@media (max-width: 819px) {
  .catalogo .hero.video-movil .hero-bg::after, .catalogo .hero.video-movil .hero-completa-fondo::after { display: none; }
}
.catalogo .hero-bg::after {
  /* velo parejo sobre toda la foto (ajustable desde el admin: claro/medio/oscuro) */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: color-mix(in srgb, var(--velo-color, var(--bg)) var(--velo-portada, 55%), transparent);
}
/* Carrusel(es) de portada: uno para PC y otro para celular (independientes), con mas de una foto
   se van alternando solas. Solo se muestra el que corresponde segun el ancho de pantalla. */
.catalogo .hero-carrusel { position: absolute; inset: 0; display: none; }
.catalogo .hero-carrusel-pc { display: block; }
@media (max-width: 819px) {
  .catalogo .hero-carrusel-pc { display: none; }
  .catalogo .hero-carrusel-movil { display: block; }
}
.catalogo .hero-carrusel .slide-portada { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.catalogo .hero-carrusel .slide-portada.activa { opacity: 1; }
.catalogo .hero-carrusel-flecha {
  /* el boton generico de Hyperspace (main.css) fuerza padding/borde/color/alto con !important; los anulamos aqui */
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; padding: 0; margin: 0; border: 0 !important;
  background: rgba(0,0,0,.3); color: #fff !important; border-radius: 50%;
  text-transform: none; letter-spacing: normal; font-weight: 400; line-height: 1; font-size: 1.6rem;
  cursor: pointer; display: grid; place-items: center; transition: background .15s ease;
}
.catalogo .hero-carrusel-flecha:hover { background: rgba(0,0,0,.5); }
.catalogo .hero-carrusel-anterior { left: 16px; }
.catalogo .hero-carrusel-siguiente { right: 16px; }
.catalogo .hero-carrusel-puntos { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 8px; }
.catalogo .hero-carrusel-puntos .punto {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.catalogo .hero-carrusel-puntos .punto.activo { background: #fff; transform: scale(1.3); }
@media (max-width: 600px) {
  .catalogo .hero-carrusel-flecha { width: 36px; height: 36px; font-size: 1.3rem; }
  .catalogo .hero-carrusel-anterior { left: 8px; }
  .catalogo .hero-carrusel-siguiente { right: 8px; }
}
.catalogo .hero-inner {
  position: relative; z-index: 1; padding-top: 96px; padding-bottom: 80px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.catalogo .hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 700; line-height: 1; }
.catalogo .hero .slogan { color: var(--accent); font-weight: 600; margin-top: 4px; line-height: 1.15; font-family: "Space Grotesk", sans-serif; }
.catalogo .hero .desc { max-width: 560px; margin-top: 6px; color: var(--text-dim); font-size: 1.05rem; line-height: 1.25; }

/* Portada "completa": la foto (o carrusel) se ve entera a lo ancho, con su propio alto (no se recorta).
   El bloque de texto + botones va encima y se ubica con la alineacion horizontal/vertical del admin,
   para imagenes disenadas dejando un espacio libre para el texto. */
/* foto y texto comparten la misma celda: el alto es el de la foto, o el del texto si este fuera mas alto (nunca se corta) */
/* align-items: stretch anula el "centrar" del .hero base: el bloque de texto ocupa todo el alto y la alineacion
   vertical (arriba/centro/abajo) se aplica dentro de el */
.catalogo .hero-completa { display: grid; align-items: stretch; min-height: 0; background: var(--surface-2); }
.catalogo .hero-completa > * { grid-area: 1 / 1; }
.catalogo .hero-completa-fondo { position: relative; align-self: start; }
.catalogo .hero-completa-fondo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: color-mix(in srgb, var(--velo-color, var(--bg)) var(--velo-portada, 55%), transparent);
}
/* la PRIMERA foto define el alto de la portada; las demas llenan ese mismo cuadro (si tienen otra proporcion se
   recortan un poco). Asi el texto queda siempre en el mismo lugar aunque las fotos no sean del mismo tamano. */
.catalogo .hero-completa .hero-carrusel { position: relative; inset: auto; display: none; }
.catalogo .hero-completa .hero-carrusel-pc { display: block; }
@media (max-width: 819px) {
  .catalogo .hero-completa .hero-carrusel-pc { display: none; }
  .catalogo .hero-completa .hero-carrusel-movil { display: block; }
  .catalogo .hero-completa.texto-debajo-movil > .hero-inner { grid-area: 2 / 1; }
}
.catalogo .hero-completa .slide-portada { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.catalogo .hero-completa .slide-portada:first-child { position: relative; height: auto; }
.catalogo .hero-completa .hero-inner {
  position: relative; z-index: 2; padding-top: 32px; padding-bottom: 44px;
  pointer-events: none; /* deja pasar los clics a las flechas/puntos del carrusel */
}
.catalogo .hero-completa .hero-inner > * { pointer-events: auto; }

/* Alineacion "extremo": el bloque de texto usa todo el ancho de la pantalla y queda cerca del borde
   (deja libre el espacio de las flechas del carrusel, que miden 44px a 16px del borde) */
.catalogo .hero-inner.hero-inner-extremo { max-width: none; padding-left: clamp(26px, 5vw, 80px); padding-right: clamp(26px, 5vw, 80px); }

/* ---- Bloque de texto de la portada en paginas web (los dos tipos; las invitaciones no cambian) ---- */
/* margen interior chico para que "Arriba"/"Abajo" se note de verdad */
.catalogo .hero.portada-pagina:not(.hero-completa) .hero-inner { padding-top: 40px; padding-bottom: 48px; }
/* Espaciado parejo entre nombre, slogan, descripcion y botones (Hyperspace agrega margenes grandes y desiguales) */
.catalogo .portada-pagina .hero-inner h1 { margin: 0; }
.catalogo .portada-pagina .hero-inner .slogan { margin: 14px 0 0; }
.catalogo .portada-pagina .hero-inner .desc { margin: 16px 0 0; line-height: 1.55; }
/* slogan y descripcion: ancho limitado (no se estiran por toda la pantalla) y texto justificado */
.catalogo .portada-pagina .hero-inner .slogan,
.catalogo .portada-pagina .hero-inner .desc { max-width: 36rem; text-align: justify; hyphens: auto; }
/* en celular la linea es corta y el justificado deja huecos grandes entre palabras: ahi se alinea normal */
@media (max-width: 600px) {
  .catalogo .portada-pagina .hero-inner .slogan,
  .catalogo .portada-pagina .hero-inner .desc { text-align: inherit; }
}

/* Botones de la portada (los dos tipos): el primero relleno, el segundo con borde */
.catalogo .hero-botones { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.catalogo .btn-portada-principal { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.catalogo .btn-portada-principal:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.catalogo .hero-botones .btn-ghost { background: color-mix(in srgb, var(--bg) 70%, transparent); }

/* Entrada suave: el texto sube de a poco, uno tras otro */
.catalogo .portada-pagina .hero-inner > * { animation: heroSubir .7s ease both; }
.catalogo .portada-pagina .hero-inner > :nth-child(2) { animation-delay: .1s; }
.catalogo .portada-pagina .hero-inner > :nth-child(3) { animation-delay: .2s; }
.catalogo .portada-pagina .hero-inner > :nth-child(4) { animation-delay: .3s; }
@keyframes heroSubir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .catalogo .portada-pagina .hero-inner > * { animation: none; } }

/* Celular con "texto debajo de la foto" (opcion del admin): la foto arriba sin nada encima y el bloque de texto
   abajo, sobre un tono de la paleta del negocio (combina con cualquier paleta). Si un color personalizado no se
   lee sobre ese fondo, render-catalogo.js le pone .sin-contraste-movil y se usa el color de la paleta. */
@media (max-width: 819px) {
  .catalogo .hero.texto-debajo-movil:not(.hero-completa) { display: block; min-height: 0; }
  .catalogo .hero.texto-debajo-movil:not(.hero-completa) .hero-bg { position: relative; aspect-ratio: 4 / 5; }
  /* sin texto encima, la foto no necesita la capa: se ve con sus colores reales */
  .catalogo .hero.texto-debajo-movil .hero-bg::after,
  .catalogo .hero.texto-debajo-movil .hero-completa-fondo::after { display: none; }
  .catalogo .hero.texto-debajo-movil .hero-inner {
    padding-top: 28px; padding-bottom: 40px;
    background: var(--surface-2);
  }
  .catalogo .hero.texto-debajo-movil .hero-inner h1.sin-contraste-movil { color: var(--text) !important; }
  .catalogo .hero.texto-debajo-movil .hero-inner .slogan.sin-contraste-movil { color: var(--accent) !important; }
  .catalogo .hero.texto-debajo-movil .hero-inner .desc.sin-contraste-movil { color: var(--text-dim) !important; }
}

/* ---------- Sobre nosotros ---------- */
.catalogo .sobre-grid { display: grid; gap: 32px; align-items: center; }
.catalogo .sobre-grid.sin-foto { max-width: 720px; }
@media (min-width: 760px) { .catalogo .sobre-grid.con-foto { grid-template-columns: 1fr 1fr; } }
/* "Texto e imagen": en celular la foto va arriba del texto (el texto esta primero en el HTML) */
@media (max-width: 759px) { .catalogo .sobre-grid.foto-derecha .sobre-foto { order: -1; } }
/* La foto se ve completa, con su propia proporcion (sin recortes) */
.catalogo .sobre-foto img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--border); }
.catalogo .sobre-texto strong { font-weight: 700; color: var(--text); }
.catalogo .sobre-texto { margin: 0; color: var(--text-dim); font-size: 1.05rem; line-height: 1.6; white-space: pre-line; text-align: justify; } /* margin 0: Hyperspace le pone 2em abajo a todo <p> */

/* Contenedor mas ancho que el normal (1080px): lo usan Equipo, Nuestro Servicio y la Galeria (titulo incluido) */
.catalogo .contenedor-ancho { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 819px) { .catalogo .contenedor-ancho { padding: 0 26px; } }
/* En los carruseles el titulo arranca donde empieza la primera foto (despues de la flecha de 40px + 10px de espacio) */
.catalogo #equipo .titulo-seccion, .catalogo #equipo .subtitulo-seccion,
.catalogo #nuestro-servicio .titulo-seccion { padding-left: 52px; }
@media (max-width: 600px) {
  .catalogo #equipo .titulo-seccion, .catalogo #equipo .subtitulo-seccion,
  .catalogo #nuestro-servicio .titulo-seccion { padding-left: 0; }
}

/* Nuestro equipo (carrusel): foto en circulo + nombre, cargo y resena debajo.
   Tarjetas visibles a la vez: 4 en PC, 3 en tablet, 2 en celular (el ancho se reparte segun la pantalla) */
.catalogo .equipo-track { gap: 24px; padding-top: 10px; }
.catalogo .equipo-card {
  scroll-snap-align: start; flex: 0 0 calc((100% - 3 * 24px) / 4);
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
@media (max-width: 999px) { .catalogo .equipo-card { flex-basis: calc((100% - 2 * 24px) / 3); } }
@media (max-width: 699px) {
  .catalogo .equipo-track { gap: 16px; }
  .catalogo .equipo-card { flex-basis: calc((100% - 16px) / 2); }
}
.catalogo .equipo-foto { width: min(210px, 80%); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--surface-2); border: 4px solid var(--surface); box-shadow: 0 8px 24px var(--shadow); display: grid; place-items: center; margin-bottom: 18px; transition: transform .3s ease; }
.catalogo .equipo-card:hover .equipo-foto { transform: translateY(-4px); }
/* Recorte desde arriba (no desde el centro): en fotos verticales asi se ve la cara y los hombros, no el pecho */
.catalogo .equipo-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.catalogo .equipo-foto span { font-size: 3.2rem; font-weight: 700; color: var(--accent); }
.catalogo .equipo-nombre { margin: 0; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.catalogo .equipo-cargo { margin: 4px 0 0; padding-bottom: 10px; font-size: .9rem; color: var(--text-dim); position: relative; }
.catalogo .equipo-cargo::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 44px; height: 2px; margin-left: -22px; background: var(--accent); border-radius: 2px; }
.catalogo .equipo-resena { margin: 12px 0 0; font-size: .95rem; line-height: 1.55; color: var(--text-dim); white-space: pre-line; }
@media (max-width: 600px) {
  .catalogo .equipo-foto span { font-size: 2.4rem; }
  .catalogo .equipo-nombre { font-size: .92rem; }
  .catalogo .equipo-resena { font-size: .88rem; }
}

/* ---------- Nuestro Servicio (carrusel de tarjetas) ---------- */
.catalogo .servicio-carrusel { position: relative; display: flex; align-items: center; gap: 10px; }
.catalogo .servicio-track {
  display: flex; align-items: flex-start; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 4px 2px 16px; flex: 1; scrollbar-width: none;
}
.catalogo .servicio-track::-webkit-scrollbar { display: none; }
.catalogo .servicio-card {
  /* 4 tarjetas visibles en PC, 3 en tablet, una y un poco de la siguiente en celular */
  scroll-snap-align: start; scroll-snap-stop: always; flex: 0 0 calc((100% - 3 * 20px) / 4);
  /* sin alto fijo: cada foto se ve completa con su propia proporcion (el ancho es el mismo en todas) */
  border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
  cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
}
.catalogo .servicio-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.catalogo .servicio-card img { width: 100%; height: auto; aspect-ratio: auto 4 / 3; display: block; } /* 4/3 solo mientras carga */
.catalogo .servicio-flecha {
  /* el boton generico de Hyperspace (main.css) fuerza borde/mayusculas/alto con !important; los anulamos aqui */
  position: relative; width: 40px; height: 40px; padding: 0; margin: 0; flex-shrink: 0;
  border: 1px solid var(--border) !important; border-radius: 50%;
  background: var(--surface); color: var(--text) !important;
  text-transform: none; letter-spacing: normal; font-weight: 400; line-height: 1; font-size: 1.5rem;
  cursor: pointer; display: grid; place-items: center; transition: color .15s ease, border-color .15s ease;
}
.catalogo .servicio-flecha:hover { color: var(--accent) !important; border-color: var(--accent) !important; }
@media (max-width: 600px) { .catalogo .servicio-flecha { display: none; } }
@media (max-width: 999px) { .catalogo .servicio-card { flex-basis: calc((100% - 2 * 20px) / 3); } }
@media (max-width: 699px) { .catalogo .servicio-card { flex-basis: 80%; } }
/* Si todas las tarjetas caben, sin flechas y centradas */
.catalogo .servicio-carrusel.sin-desborde .servicio-flecha { display: none; }
.catalogo .servicio-carrusel.sin-desborde .servicio-track { justify-content: center; }

/* ---------- Galeria de trabajos ---------- */
/* Mosaico ordenado: fotos cuadradas del mismo tamano y la primera destacada (2x2).
   4 columnas en PC (con 5 fotos quedan 2 filas exactas), 3 en tablet, 2 en celular.
   "dense" rellena los huecos que deja la foto grande. */
.catalogo .galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; grid-auto-flow: dense; }
@media (max-width: 899px) { .catalogo .galeria { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (max-width: 599px) { .catalogo .galeria { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.catalogo .galeria img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin: 0; border-radius: 14px;
  border: 1px solid var(--border); cursor: pointer;
  transition: opacity .15s ease;
}
.catalogo .galeria img:first-child { grid-column: span 2; grid-row: span 2; }
/* PC y tablet: fotos rectangulares 4:3 (no cuadradas) para que el mosaico sea mas bajo y quepa en pantalla junto
   con el titulo. La grande ocupa el alto de dos filas (aspect-ratio auto = se estira a su espacio). */
@media (min-width: 600px) {
  .catalogo .galeria img { aspect-ratio: 4 / 3; }
  /* height 0 + min-height 100%: la grande no impone su propio alto (el de la foto original), solo llena sus dos filas */
  .catalogo .galeria img:first-child { aspect-ratio: auto; height: 0; min-height: 100%; }
}
.catalogo .galeria img:hover { opacity: .88; }
/* Aparicion en cascada de las fotos (desenfoque que se aclara + movimiento), el retraso de cada una viene inline desde render-catalogo.js */
.catalogo .galeria img.reveal-item {
  opacity: 0; transform: translateY(44px) scale(.92); filter: blur(10px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s cubic-bezier(.16,1,.3,1);
}
.catalogo .galeria img.reveal-item.visible { opacity: 1; transform: none; filter: blur(0); }

/* ---------- Promociones del mes ----------
   Mismo mosaico que la galeria: la primera promo destacada (2x2) + 4 cuadradas = 2 filas exactas en PC.
   Texto blanco sobre la foto con un degradado oscuro abajo, para que se lea con cualquier paleta. */
.catalogo .promos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; grid-auto-flow: dense; }
.catalogo .promo-card {
  position: relative; aspect-ratio: 1; border-radius: 18px; overflow: hidden;
  background: var(--surface-2); box-shadow: 0 10px 28px var(--shadow);
}
.catalogo .promo-card.promo-destacada { grid-column: span 2; grid-row: span 2; }
/* PC: tarjetas 4:3 (mas bajas) por la misma razon que la galeria; la destacada ocupa el alto de dos filas */
@media (min-width: 900px) {
  .catalogo .promo-card { aspect-ratio: 4 / 3; }
  .catalogo .promo-card.promo-destacada { aspect-ratio: auto; }
  .catalogo .promo-card:not(.promo-destacada) .promo-desc { -webkit-line-clamp: 1; }
}
/* PC: el mosaico se acomoda a la cantidad de promociones (promos-N lo pone render-catalogo.js)
   2 -> dos tarjetas iguales | 3 -> la destacada + dos apiladas a su derecha
   4 -> la destacada + 2 arriba y la ultima a lo ancho abajo | 5 -> el mosaico de 2 filas */
@media (min-width: 900px) {
  .catalogo .promos-2 { grid-template-columns: 1fr 1fr; }
  .catalogo .promos-2 .promo-card.promo-destacada { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; }
  .catalogo .promos-3 { grid-template-columns: 2fr 1fr; }
  .catalogo .promos-3 .promo-card.promo-destacada { grid-column: auto; }
  .catalogo .promos-3 .promo-card:not(.promo-destacada) { aspect-ratio: 16 / 10; }
  .catalogo .promos-4 .promo-card:last-child { grid-column: span 2; aspect-ratio: 2.72; }
}
/* Tablet: con 2 promociones, las dos lado a lado; con 4, la ultima a lo ancho (asi no queda un hueco) */
@media (min-width: 600px) and (max-width: 899px) {
  .catalogo .promos-2 .promo-card, .catalogo .promos-2 .promo-card.promo-destacada { grid-column: auto; aspect-ratio: 4 / 3.4; }
  .catalogo .promos-4 .promo-card:last-child { grid-column: span 2; aspect-ratio: 16 / 9; }
}
.catalogo .promos-grid.una-sola { grid-template-columns: 1fr; max-width: 640px; }
.catalogo .promos-grid.una-sola .promo-card { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 10; }
.catalogo .promo-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.catalogo .promo-card:hover > img { transform: scale(1.05); }
.catalogo .promo-sin-foto { position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent), var(--surface-2)); }
.catalogo .promo-capa {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 70%);
}
.catalogo .promo-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.catalogo .promo-descuento {
  background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: .95rem;
  padding: 6px 12px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.catalogo .promo-vence {
  display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: #fff;
  padding: 6px 11px; border-radius: 999px; background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .25);
}
.catalogo .promo-vence svg { width: 14px; height: 14px; }
.catalogo .promo-vence.urgente { background: #dc2626; border-color: #dc2626; animation: promo-latido 1.6s ease-in-out infinite; }
@keyframes promo-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .catalogo .promo-vence.urgente { animation: none; } }
.catalogo .promo-texto { color: #fff; }
.catalogo .promo-card .promo-titulo {
  margin: 0; color: #fff; font-size: 1.15rem; line-height: 1.25; text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  /* maximo 2 lineas: un titulo largo nunca empuja el precio ni el boton fuera de la tarjeta */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.catalogo .promo-desc {
  margin: 6px 0 0; font-size: .88rem; line-height: 1.45; color: rgba(255, 255, 255, .88);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.catalogo .promo-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.catalogo .promo-precios { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.catalogo .promo-precio { font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 800; font-size: 1.35rem; color: #fff; }
.catalogo .promo-antes { font-size: .9rem; color: rgba(255, 255, 255, .7); }
.catalogo .promo-boton {
  display: inline-block; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: .88rem;
  background: #fff; color: #111 !important; border: 0 !important; text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, background .15s ease;
}
.catalogo .promo-boton:hover { transform: translateY(-2px); background: var(--accent); color: var(--on-accent) !important; }
/* Estilo "claro": letras negras sobre un degradado blanco (para fotos oscuras o marcas de estilo claro) */
.catalogo .promos-estilo-claro .promo-capa { background: linear-gradient(to top, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .6) 45%, rgba(255, 255, 255, 0) 72%); }
.catalogo .promos-estilo-claro .promo-card .promo-titulo, .catalogo .promos-estilo-claro .promo-precio { color: #111; text-shadow: none; }
.catalogo .promos-estilo-claro .promo-desc { color: rgba(0, 0, 0, .75); }
.catalogo .promos-estilo-claro .promo-antes { color: rgba(0, 0, 0, .55); }
.catalogo .promos-estilo-claro .promo-boton { background: #111; color: #fff !important; }
/* Estilo "marca": como el oscuro, pero el precio y el boton con el color de acento de la paleta */
.catalogo .promos-estilo-marca .promo-precio { color: var(--accent); text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.catalogo .promos-estilo-marca .promo-boton { background: var(--accent); color: var(--on-accent) !important; }
.catalogo .promos-estilo-marca .promo-boton:hover { background: #fff; color: #111 !important; }
/* La destacada: letras mas grandes y mas aire */
.catalogo .promo-destacada .promo-capa { padding: 26px; }
.catalogo .promo-destacada .promo-titulo { font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
.catalogo .promo-destacada .promo-desc { font-size: 1rem; }
.catalogo .promo-destacada .promo-precio { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.catalogo .promo-destacada .promo-descuento { font-size: 1.15rem; padding: 8px 16px; }
.catalogo .promo-destacada .promo-boton { padding: 12px 22px; font-size: 1rem; }
/* Tablet: 2 columnas, la destacada a lo ancho y mas bajita */
@media (max-width: 899px) {
  .catalogo .promos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .catalogo .promo-card.promo-destacada { grid-row: auto; aspect-ratio: 16 / 9; }
}
/* Celular: una por fila */
@media (max-width: 599px) {
  .catalogo .promos-grid { grid-template-columns: 1fr; }
  .catalogo .promo-card, .catalogo .promo-card.promo-destacada { grid-column: auto; aspect-ratio: 4 / 3.4; }
  .catalogo .promo-destacada .promo-capa { padding: 18px; }
  /* En celular la destacada es del mismo tamano que las demas: letras un poco mas chicas para que quepan precio y boton */
  .catalogo .promo-destacada .promo-titulo { font-size: 1.3rem; }
  .catalogo .promo-destacada .promo-desc { font-size: .9rem; }
  .catalogo .promo-destacada .promo-precio { font-size: 1.6rem; }
  .catalogo .promo-destacada .promo-descuento { font-size: 1rem; padding: 6px 13px; }
  .catalogo .promo-destacada .promo-boton { padding: 10px 18px; font-size: .92rem; }
}

/* ---------- Preguntas frecuentes ---------- */
.catalogo .faq-grid { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); }
/* PC: arriba el titulo; debajo, la imagen a la izquierda y las preguntas a la derecha CENTRADAS con la imagen;
   el texto de introduccion va bajo la imagen. (.faq-intro se disuelve para que sus hijos entren a la cuadricula) */
@media (min-width: 760px) {
  .catalogo .faq-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; column-gap: 36px; row-gap: 0; }
  .catalogo .faq-intro { display: contents; }
  .catalogo .faq-grid .titulo-seccion { grid-column: 1 / -1; grid-row: 1; }
  .catalogo .faq-grid .faq-imagen { grid-column: 1; grid-row: 2; }
  .catalogo .faq-grid .faq-texto { grid-column: 1; grid-row: 3; }
  .catalogo .faq-grid .faq-lista { grid-column: 2; grid-row: 2; align-self: center; }
  /* sin imagen: el texto de introduccion y debajo las preguntas, a todo el ancho */
  .catalogo .faq-grid.sin-imagen .faq-texto { grid-column: 1 / -1; grid-row: 2; }
  .catalogo .faq-grid.sin-imagen .faq-lista { grid-column: 1 / -1; grid-row: 3; }
}
.catalogo .titulo-seccion.faq-titulo-centro { text-align: center; }
/* La imagen se ve completa y con su propia proporcion: a su tamano real, o reducida si no cabe en la columna */
.catalogo .faq-imagen img { display: block; width: auto; max-width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--border); margin: 18px 0; }
.catalogo .faq-texto { color: var(--text-dim); font-size: 1.02rem; line-height: 1.6; text-align: center; }
.catalogo .faq-item { border-bottom: 1px solid var(--border); }
.catalogo .faq-item:first-child { border-top: 1px solid var(--border); }
.catalogo .faq-pregunta {
  /* el boton generico de Hyperspace (main.css) fuerza borde/mayusculas/alto con !important; los anulamos aqui */
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 2px; margin: 0; border: 0 !important; background: none; text-align: left; cursor: pointer;
  font-size: 1.05rem; font-weight: 600; color: var(--text) !important;
  text-transform: none !important; letter-spacing: normal !important; line-height: 1.3; height: auto;
  white-space: normal; /* el boton generico no deja partir lineas: una pregunta larga se salia de la pantalla en celular */
  transition: color .15s ease;
}
.catalogo .faq-item.abierto .faq-pregunta { color: var(--accent) !important; }
.catalogo .faq-icono { position: relative; width: 16px; height: 16px; flex-shrink: 0; color: var(--text-dim); }
.catalogo .faq-item.abierto .faq-icono { color: var(--accent); }
.catalogo .faq-icono::before, .catalogo .faq-icono::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; transform: translate(-50%, -50%);
  transition: transform .25s ease;
}
.catalogo .faq-icono::before { width: 16px; height: 2px; }
.catalogo .faq-icono::after { width: 2px; height: 16px; }
.catalogo .faq-item.abierto .faq-icono::after { transform: translate(-50%, -50%) scaleY(0); }
.catalogo .faq-respuesta-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.catalogo .faq-item.abierto .faq-respuesta-wrap { grid-template-rows: 1fr; }
.catalogo .faq-respuesta-inner { overflow: hidden; }
.catalogo .faq-respuesta-inner p { padding: 0 2px 20px; color: var(--text-dim); line-height: 1.6; }

/* ---------- Contacto ---------- */
.catalogo .grid-contacto { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .catalogo .grid-contacto { grid-template-columns: 1fr 1fr; align-items: start; } }
/* Sin WhatsApp (no hay a donde enviar el formulario): la lista de contacto no deja un hueco vacio */
.catalogo .grid-contacto.sin-formulario { grid-template-columns: 1fr; }
@media (min-width: 820px) { .catalogo .grid-contacto.sin-formulario > div:first-child { max-width: 480px; margin: 0 auto; } }
.catalogo .lista-contacto { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.catalogo .lista-contacto li { display: flex; gap: 14px; align-items: center; }
.catalogo .lista-contacto li > div { min-width: 0; width: 300px; max-width: 65%; flex-shrink: 0; }
.catalogo .lista-contacto .ic {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--accent);
}
.catalogo .lista-contacto .ic svg { width: 20px; height: 20px; }
.catalogo .lista-contacto .et { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.catalogo .lista-contacto .va-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.catalogo .lista-contacto .va { font-weight: 500; min-width: 0; flex: 1; word-break: break-word; }
.catalogo .lista-contacto a { color: var(--text); }
.catalogo .btn-copiar {
  /* el boton generico de Hyperspace (main.css) fuerza borde/color/alto con !important; los anulamos aqui */
  border: 0 !important; background: transparent; cursor: pointer; padding: 4px; height: auto; flex-shrink: 0;
  color: var(--text-dim) !important; display: grid; place-items: center; border-radius: 6px;
  transition: color .15s ease, background .15s ease;
}
.catalogo .btn-copiar:hover { color: var(--accent) !important; background: var(--surface-2); }
.catalogo .btn-copiar svg { width: 15px; height: 15px; }
.catalogo .btn-copiar .ic-copiado { display: none; }
.catalogo .btn-copiar.copiado { color: var(--accent) !important; }
.catalogo .btn-copiar.copiado .ic-copiar { display: none; }
.catalogo .btn-copiar.copiado .ic-copiado { display: block; }
.catalogo .tarjeta-mapa { border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.catalogo .mapa-embed { width: 100%; height: 220px; border: 0; display: block; }
.catalogo .tarjeta-mapa-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; }
.catalogo .tarjeta-mapa-pie p { font-weight: 500; font-size: .92rem; }
.catalogo .tarjeta-mapa-pie[hidden] { display: none; }
.catalogo .sede-botones { display: flex; gap: 10px; flex-wrap: wrap; }
/* Varias sedes: botones para elegir la sede (se deslizan de lado en celular) y ficha de la sede elegida */
.catalogo .sedes-selector {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 14px; padding-bottom: 2px;
}
.catalogo .sedes-selector::-webkit-scrollbar { display: none; }
.catalogo .sede-boton {
  /* el boton generico de Hyperspace (main.css) fuerza alto/borde/mayusculas: se anulan aqui */
  flex-shrink: 0; height: auto; line-height: 1.2; padding: 9px 16px; margin: 0; border-radius: 999px;
  border: 1px solid var(--border) !important; background: var(--surface); color: var(--text) !important;
  font-family: inherit; font-size: .88rem; font-weight: 600; text-transform: none; letter-spacing: normal;
  box-shadow: none; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.catalogo .sede-boton:hover { border-color: var(--accent) !important; }
.catalogo .sede-boton.activa { background: var(--accent); border-color: var(--accent) !important; color: var(--on-accent) !important; }
.catalogo .sede-ficha { align-items: flex-end; }
.catalogo .sede-ficha .sede-datos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.catalogo .tarjeta-mapa-pie .sede-datos p { margin: 0; } /* Hyperspace pone 2em debajo de cada <p> */
.catalogo .sede-ficha .sede-nombre { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--accent); }
.catalogo .sede-ficha .sede-direccion { color: var(--text); }
.catalogo .sede-ficha .sede-horario { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-weight: 400 !important; font-size: .88rem !important; }
.catalogo .sede-ficha .sede-horario .ic svg { width: 15px; height: 15px; display: block; }
.catalogo .sede-ficha .btn-ghost svg { width: 16px; height: 16px; }

/* ---------- Formulario de mensaje (envia por WhatsApp) ---------- */
.catalogo .formulario-mensaje {
  background: color-mix(in srgb, var(--surface) 65%, transparent);
  backdrop-filter: blur(6px); border: 1px solid var(--border); border-radius: 16px;
  padding: 26px; display: flex; flex-direction: column; gap: 18px; height: fit-content;
}
.catalogo .formulario-mensaje h3 { font-family: "Space Grotesk", sans-serif; font-size: 1.1rem; }
.catalogo .fila-form-dos { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .catalogo .fila-form-dos { grid-template-columns: 1fr 1fr; } }
.catalogo .campo-form { display: flex; flex-direction: column; gap: 6px; }
.catalogo .campo-form label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim) !important; font-weight: 500; margin: 0; }
.catalogo .campo-form input, .catalogo .campo-form textarea {
  /* estilo "solo raya inferior", igual al de la plantilla original */
  width: 100%; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--border) !important;
  border-radius: 0; background: transparent; color: var(--text); font: inherit; font-size: .92rem;
}
.catalogo .campo-form textarea { resize: vertical; min-height: 80px; }
.catalogo .campo-form input:focus, .catalogo .campo-form textarea:focus { outline: none; border-bottom-color: var(--accent) !important; box-shadow: none; }
.catalogo .check-terminos { display: flex; align-items: flex-start; justify-content: center; gap: 10px; font-size: .84rem; color: var(--text-dim); cursor: pointer; text-align: left; }
.catalogo .check-terminos input {
  /* Hyperspace (main.css) esconde el checkbox real (opacity:0, z-index:-1) porque su propio diseño
     dibuja el cuadrito con un <label> adyacente; como aqui no usamos ese patron, se lo revertimos */
  opacity: 1; z-index: auto; float: none; margin-right: 0;
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0;
  border: 1px solid var(--border) !important; border-radius: 4px; background: var(--bg); cursor: pointer;
  display: inline-grid; place-content: center; transition: background .15s ease, border-color .15s ease;
}
.catalogo .check-terminos input::before {
  content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .1s ease;
  box-shadow: inset 1em 1em var(--on-accent, #fff);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.catalogo .check-terminos input:checked { background: var(--accent); border-color: var(--accent) !important; }
.catalogo .check-terminos input:checked::before { transform: scale(1); }
.catalogo .link-terminos {
  /* el boton generico de Hyperspace (main.css) fuerza borde/mayusculas/alto con !important; los anulamos aqui */
  background: none; border: 0 !important; padding: 0; margin: 0; height: auto;
  color: var(--accent) !important; text-decoration: underline; cursor: pointer; font: inherit;
  text-transform: none !important; letter-spacing: normal !important;
}
.catalogo .terminos-texto {
  margin: -6px 0 0; font-size: .8rem; color: var(--text-dim); background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
/* Boton solido verde de WhatsApp, igual criterio que el boton flotante: convencion reconocible, no se le aplica el estilo minimalista */
.catalogo .btn-whatsapp { background: #25d366; border-color: #25d366; color: #fff; align-self: center; min-width: 200px; }
.catalogo .btn-whatsapp:hover { background: #1fbd5a; border-color: #1fbd5a; }
.catalogo .btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* Horario detallado (dia por dia), va debajo de todo en Contacto */
.catalogo .horario-detallado { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
.catalogo .horario-detallado-titulo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.05rem;
}
.catalogo .horario-detallado-titulo .ic {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--accent);
}
.catalogo .horario-detallado-titulo .ic svg { width: 20px; height: 20px; }
.catalogo .horario-grid { display: grid; gap: 18px 48px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .catalogo .horario-grid { grid-template-columns: 1fr 1fr; } }
.catalogo .horario-item { display: flex; align-items: baseline; gap: 14px; }
.catalogo .horario-item .dia { font-weight: 600; color: var(--text); min-width: 92px; flex-shrink: 0; }
.catalogo .horario-item .horas { color: var(--text-dim); font-size: .92rem; }

.catalogo .redes-titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 10px; }
.catalogo .redes { display: flex; gap: 12px; flex-wrap: wrap; }
.catalogo .redes a {
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border); display: grid;
  place-items: center; color: var(--text-dim); text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.catalogo .redes a svg { width: 19px; height: 19px; }
/* Colores propios de cada red, suavizados (mezclados con el tono neutro) para que no compitan con la paleta del negocio */
.catalogo .redes a.red-instagram { color: color-mix(in srgb, #d6336c 65%, var(--text-dim)); }
.catalogo .redes a.red-facebook { color: color-mix(in srgb, #1877f2 65%, var(--text-dim)); }
.catalogo .redes a.red-tiktok { color: color-mix(in srgb, #2b2b2b 55%, var(--text-dim)); }
.catalogo .redes a.red-linkedin { color: color-mix(in srgb, #0a66c2 65%, var(--text-dim)); }
.catalogo .redes a.red-youtube { color: color-mix(in srgb, #ff0000 55%, var(--text-dim)); }
.catalogo .redes a:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 12%, transparent); }

/* ---------- Ubicacion (mapa + redes) ---------- */
/* Ubicacion: celular = titulo, mapa, "Siguenos", redes (una columna).
   PC = 2 columnas y 2 filas: encabezados arriba y contenido abajo, para que el primer recuadro de redes
   quede a la altura del mapa. "Siguenos" se pega al fondo de su fila, justo encima de las redes. */
.catalogo .ubicacion-grid {
  display: grid; grid-template-columns: 1fr; column-gap: 32px; row-gap: 0;
  grid-template-areas: "cabecera" "mapa" "redes-titulo" "redes";
}
.catalogo .ubi-cabecera { grid-area: cabecera; }
.catalogo .ubi-mapa { grid-area: mapa; min-width: 0; }
.catalogo .ubi-redes-titulo { grid-area: redes-titulo; margin-top: 32px; }
.catalogo .ubi-redes { grid-area: redes; }
@media (min-width: 760px) {
  .catalogo .ubicacion-grid {
    grid-template-columns: 1.2fr 1fr; align-items: start;
    grid-template-areas: "cabecera redes-titulo" "mapa redes";
  }
  .catalogo .ubi-redes-titulo { align-self: end; margin-top: 0; }
}
.catalogo .redes-vertical { display: flex; flex-direction: column; gap: 12px; }
.catalogo .redes-vertical .red-item {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); text-decoration: none; color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.catalogo .redes-vertical .red-item:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 8%, transparent); }
.catalogo .redes-vertical .ic-red {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--surface-2); color: inherit;
}
.catalogo .redes-vertical .ic-red svg { width: 20px; height: 20px; }
.catalogo .redes-vertical .texto-red { min-width: 0; }
.catalogo .redes-vertical .texto-red .et { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.catalogo .redes-vertical .texto-red .nombre { font-weight: 600; word-break: break-word; }
.catalogo .redes-vertical .red-item.red-instagram { color: color-mix(in srgb, #d6336c 65%, var(--text-dim)); }
.catalogo .redes-vertical .red-item.red-facebook { color: color-mix(in srgb, #1877f2 65%, var(--text-dim)); }
.catalogo .redes-vertical .red-item.red-tiktok { color: color-mix(in srgb, #2b2b2b 55%, var(--text-dim)); }
.catalogo .redes-vertical .red-item.red-linkedin { color: color-mix(in srgb, #0a66c2 65%, var(--text-dim)); }
.catalogo .redes-vertical .red-item.red-youtube { color: color-mix(in srgb, #ff0000 55%, var(--text-dim)); }
.catalogo .redes-vertical .red-item .nombre, .catalogo .redes-vertical .red-item .et { color: var(--text-dim); }
.catalogo .redes-vertical .red-item .nombre { color: var(--text); }

/* ---------- Footer ---------- */
.catalogo .footer { border-top: 1px solid var(--border); padding: 34px 0; color: var(--text-dim); font-size: .88rem; }
.catalogo .footer .contenedor { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
/* Pie de las invitaciones: fondo negro, todo centrado en dos lineas (marca + web, TikTok y WhatsApp) */
.catalogo .footer-inv { background: #000; border-top: 0; padding: 26px 0 28px; color: #fff; position: relative; z-index: 1; }
.catalogo .footer-inv .contenedor { flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.catalogo .footer-inv-marca { margin: 0; font-size: .95rem; color: #fff; }
.catalogo .footer-inv-marca a { color: #fff; text-decoration: none; border: 0; }
.catalogo .footer-inv-redes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; font-size: .92rem; }
.catalogo .footer-inv-redes > a, .catalogo .footer-inv-redes > span {
  display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; border: 0; transition: opacity .2s ease;
}
.catalogo .footer-inv-redes > a:hover { opacity: .75; }
.catalogo .footer-inv-redes svg { width: 22px; height: 22px; flex-shrink: 0; }
/* Pie de las paginas de negocio: colores invertidos de la paleta. Fondo = color del texto, letras = color de fondo:
   en paletas claras sale oscuro con letras claras y en paletas oscuras al reves, sin elegirlo a mano.
   Arriba el negocio (logo, nombre, frase y sus datos en una fila). Abajo, separado por una linea y en letra pequena:
   derechos del negocio a la izquierda y la firma de AdriCode a la derecha. */
.catalogo .footer-pagina { background: var(--text); color: var(--bg); border-top: 0; padding: 44px 0 22px; }
.catalogo .footer-pagina .contenedor { display: block; }
.catalogo .footer-pagina p { margin: 0; }
.catalogo .footer-negocio { display: flex; align-items: center; gap: 14px; }
.catalogo .footer-logo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--bg); flex-shrink: 0; }
.catalogo .footer-nombre { font-family: "Space Grotesk", "Inter", sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--bg); }
.catalogo .footer-frase {
  font-size: .88rem; color: var(--bg); opacity: .7; margin-top: 2px !important; max-width: 520px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Datos del negocio en una fila (bajan de linea si no caben) */
.catalogo .footer-lista { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
/* Con logo: la fila arranca donde arranca el nombre (logo 52px + 14px de espacio) */
.catalogo .footer-lista.con-logo { padding-left: 66px; }
.catalogo .footer-lista li { margin: 0; padding: 0; font-size: .92rem; color: var(--bg); }
.catalogo .footer-lista li, .catalogo .footer-lista a { display: inline-flex; align-items: center; gap: 9px; }
.catalogo .footer-lista a { color: var(--bg); text-decoration: none; border: 0; transition: opacity .2s ease; }
.catalogo .footer-lista a:hover { opacity: .7; }
.catalogo .footer-lista svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
/* Arriba: el negocio a la izquierda (se queda con todo el espacio que le sobra) y las columnas Enlaces / Siguenos a la derecha */
.catalogo .footer-arriba { display: grid; grid-template-columns: 1fr auto auto; gap: 32px 64px; align-items: start; }
.catalogo .footer-titulo-col {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bg); opacity: .6;
  margin-bottom: 14px !important;
}
.catalogo .footer-enlaces, .catalogo .footer-redes { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.catalogo .footer-enlaces a { color: var(--bg); text-decoration: none; border: 0; font-size: .92rem; transition: opacity .2s ease; }
.catalogo .footer-enlaces a:hover { opacity: .7; }
.catalogo .footer-redes li { margin: 0; padding: 0; font-size: .92rem; }
.catalogo .footer-redes a { display: inline-flex; align-items: center; gap: 9px; color: var(--bg); text-decoration: none; border: 0; transition: opacity .2s ease; }
.catalogo .footer-redes a:hover { opacity: .7; }
.catalogo .footer-redes svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
@media (max-width: 999px) { .catalogo .footer-arriba { gap: 32px 40px; } }
.catalogo .footer-solo-movil { display: none; }
.catalogo .footer-derechos {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px;
  margin-top: 30px; padding-top: 16px; font-size: .74rem; line-height: 1.5; color: var(--bg);
  border-top: 1px solid color-mix(in srgb, var(--bg) 18%, transparent);
}
.catalogo .footer-derechos span { opacity: .6; }
.catalogo .footer-derechos a { color: var(--bg); font-weight: 700; text-decoration: none; border: 0; }
.catalogo .footer-derechos span:last-child { opacity: .75; }
/* Firma: "Diseno web: AdriCode" + icono de WhatsApp (sin numero a la vista) */
.catalogo .footer-firma { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.catalogo .footer-firma-wa { display: inline-flex; transition: opacity .2s ease; }
.catalogo .footer-firma-wa:hover { opacity: .7; }
.catalogo .footer-firma-wa svg { width: 16px; height: 16px; }
/* Celular: todo centrado; espacio abajo para que el boton flotante de WhatsApp no tape nada */
@media (max-width: 700px) {
  .catalogo .footer-pagina { text-align: center; padding-bottom: 90px; }
  .catalogo .footer-negocio { flex-direction: column; gap: 10px; }
  .catalogo .footer-frase { margin-left: auto; margin-right: auto; }
  .catalogo .footer-derechos { flex-direction: column; align-items: center; }
  /* Celular: el negocio (logo, nombre, frase) arriba a lo ancho; debajo dos columnas: "Contacto" y "Siguenos".
     "Enlaces" se oculta porque ya esta el menu de arriba. display: contents deja que el encabezado del negocio
     y su lista de contacto se acomoden como piezas sueltas de la grilla. */
  /* Contacto un poco mas ancho: los correos son largos y las redes cortas */
  .catalogo .footer-arriba { grid-template-columns: 1.35fr 1fr; gap: 26px 14px; }
  .catalogo .footer-col-negocio { display: contents; }
  .catalogo .footer-negocio { grid-column: 1 / -1; }
  .catalogo .footer-col-enlaces { display: none; }
  .catalogo .footer-contacto, .catalogo .footer-arriba > .footer-col { justify-self: center; text-align: left; min-width: 0; }
  .catalogo .footer-arriba.sin-redes .footer-contacto { grid-column: 1 / -1; }
  .catalogo .footer-solo-movil { display: block; }
  .catalogo .footer-lista, .catalogo .footer-lista.con-logo { padding-left: 0; margin-top: 0; flex-direction: column; align-items: flex-start; gap: 10px; }
  .catalogo .footer-redes { align-items: flex-start; }
  .catalogo .footer-lista li, .catalogo .footer-redes li { font-size: .84rem; }
  .catalogo .footer-lista span { overflow-wrap: anywhere; }
}

/* ---------- Boton flotante WhatsApp ---------- */
.catalogo .wa-flotante {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; display: grid; place-items: center;
  box-shadow: var(--shadow); text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.catalogo .wa-flotante:hover { transform: scale(1.1) rotate(-4deg); box-shadow: 0 14px 32px -8px rgba(37,211,102,.6); }
.catalogo .wa-flotante:active { transform: scale(.95); }
.catalogo .wa-flotante img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- Fade-in al hacer scroll ---------- */
/* Aparicion al hacer scroll: corta y suave (el JS la dispara un poco ANTES de que el elemento entre en pantalla) */
.catalogo .reveal { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease; }
.catalogo .reveal.visible { opacity: 1; transform: none; }

/* ---------- Lightbox de la galeria (carrusel) ---------- */
.catalogo .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.9); display: none; place-items: center; padding: 24px; }
.catalogo .lightbox.abierto { display: grid; }
/* Foto a la izquierda, descripcion en un panel a la derecha (como el visor de fotos de Facebook) */
.catalogo .lightbox-contenido {
  display: flex; flex-direction: column; max-width: 100%; max-height: 90vh; touch-action: pan-y;
  background: #17181a; border-radius: 14px; overflow: hidden;
}
@media (min-width: 760px) { .catalogo .lightbox-contenido { flex-direction: row; max-width: 940px; } }
.catalogo .lightbox-imagen { flex: 1; min-width: 0; display: grid; place-items: center; background: #000; }
.catalogo .lightbox-imagen img { max-width: 100%; max-height: 60vh; display: block; user-select: none; }
@media (min-width: 760px) { .catalogo .lightbox-imagen img { max-height: 88vh; } }
.catalogo .lightbox-panel { display: flex; align-items: center; padding: 18px 22px; }
@media (min-width: 760px) {
  .catalogo .lightbox-panel { width: 260px; flex-shrink: 0; align-items: flex-start; padding: 24px; max-height: 88vh; overflow-y: auto; }
}
.catalogo .lightbox-caption { color: #f2f2f2; font-size: .95rem; line-height: 1.5; text-align: center; }
@media (min-width: 760px) { .catalogo .lightbox-caption { text-align: left; } }
.catalogo .lightbox-cerrar,
.catalogo .lightbox-flecha {
  /* el boton generico de Hyperspace (main.css) fuerza padding/borde con !important; los anulamos aqui */
  padding: 0; border: 0 !important; color: #fff !important; text-transform: none; letter-spacing: normal; font-weight: 400;
}
.catalogo .lightbox-cerrar {
  position: absolute; top: 16px; right: 20px; background: transparent;
  font-size: 2rem; line-height: 1; cursor: pointer; z-index: 2;
}
.catalogo .lightbox-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12);
  width: 46px; height: 46px; border-radius: 50%; font-size: 1.9rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center; z-index: 2; transition: background .15s ease;
}
.catalogo .lightbox-flecha:hover { background: rgba(255,255,255,.24); }
.catalogo .lightbox-anterior { left: 14px; }
.catalogo .lightbox-siguiente { right: 14px; }
@media (max-width: 600px) {
  .catalogo .lightbox-flecha { width: 40px; height: 40px; font-size: 1.6rem; }
  .catalogo .lightbox-anterior { left: 6px; }
  .catalogo .lightbox-siguiente { right: 6px; }
}

/* ---------- Pantalla "no encontrada" ---------- */
.catalogo .no-encontrado { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 40px 20px; }
.catalogo .no-encontrado p { color: var(--text-dim); margin-top: 10px; max-width: 420px; }

/* ---------- Invitacion web: seccion "Nuestra musica favorita" ---------- */
.catalogo .inv-seccion {
  position: relative; padding: clamp(80px, 12vw, 140px) 0; text-align: center; overflow: hidden;
  /* Transicion suave entre secciones: cada seccion sube un poco sobre la anterior */
  --fundido: clamp(60px, 10vw, 110px);
  margin-top: calc(var(--fundido) * -1);
  padding-top: calc(clamp(80px, 12vw, 140px) + var(--fundido) * .5);
}
/* Fondo de la seccion en una capa aparte (::before): velo + foto + color de respaldo.
   Solo ESTA capa lleva el difuminado del borde de arriba (antes lo llevaba la seccion entera con todo su
   contenido, y eso obligaba al navegador a dibujar cada seccion aparte: era lo que la ponia negra al hacer scroll).
   La foto (--fondo-img) la activa el JS recien cuando la seccion esta cerca de verse. */
.catalogo .inv-seccion::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(color-mix(in srgb, var(--bg) calc(var(--velo, .45) * 100%), transparent),
                    color-mix(in srgb, var(--bg) calc(var(--velo, .45) * 100%), transparent)),
    var(--fondo-img, none) center / cover no-repeat,
    var(--surface-2);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fundido));
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fundido));
}
.catalogo .inv-seccion > .contenedor { position: relative; z-index: 1; }
/* Video de fondo (opcional): capa encima de la foto, con su propio velo y el mismo difuminado de arriba.
   Esta oculta hasta que el video se reproduce (.lista): antes de eso se ve la foto de respaldo. */
.catalogo .inv-fondo-video {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fundido));
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fundido));
}
.catalogo .inv-fondo-video.lista { opacity: 1; }
/* Seccion o portada con video: toma el alto del video (ancho de pantalla / proporcion) para que se vea entero.
   Tope de una pantalla de alto, para que un video vertical en PC no haga una seccion gigante. Si el contenido
   es mas alto que el video, la seccion crece igual y el video se recorta lo justo. */
.catalogo .inv-seccion.alto-video, .catalogo .hero.alto-video {
  min-height: min(calc(100vw / var(--video-ratio)), 100vh);
  min-height: min(calc(100vw / var(--video-ratio)), 100svh);
}
.catalogo .inv-seccion.alto-video { display: flex; flex-direction: column; justify-content: center; }
.catalogo .inv-fondo-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.catalogo .inv-fondo-video::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: var(--velo, .45); }
/* ---------- Detalles del evento (itinerario) ----------
   Celular: 3 columnas (icono | punto | hora+texto) y una linea vertical hecha de tramos, uno por evento.
   PC: los eventos van en fila y cada tramo de linea se vuelve horizontal. */
.catalogo .itin-sub { margin: 0 auto; max-width: 560px; font-style: italic; opacity: .9; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.catalogo .itin-lista {
  list-style: none; margin: 38px auto 0; padding: 0; max-width: 380px;
  --it-ico: 72px;   /* tamano del icono en celular */
  --it-gap: 22px;   /* espacio entre icono, punto y texto */
}
.catalogo .itin-item {
  position: relative; display: grid; grid-template-columns: var(--it-ico) 14px minmax(0, 1fr);
  align-items: center; column-gap: var(--it-gap); padding: 22px 0; margin: 0;
}
/* Tramo de linea vertical: pasa por el centro del punto = icono + espacio + 7px (mitad del punto) */
.catalogo .itin-item::before {
  content: ""; position: absolute; left: calc(var(--it-ico) + var(--it-gap) + 7px); top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background: var(--it-linea); opacity: .7;
}
.catalogo .itin-item:first-child::before { top: 50%; }
.catalogo .itin-item:last-child::before { bottom: 50%; }
.catalogo .itin-item:only-child::before { display: none; }
.catalogo .itin-icono { justify-self: end; width: var(--it-ico); height: var(--it-ico); }
.catalogo .itin-icono img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* "Color de los iconos": pinta cualquier icono (PNG/SVG con fondo transparente) de blanco o negro */
.catalogo .itin-iconos-blanco .itin-icono img { filter: brightness(0) invert(1); }
.catalogo .itin-iconos-negro .itin-icono img { filter: brightness(0); }
.catalogo .itin-punto {
  position: relative; z-index: 1; justify-self: center; width: 14px; height: 14px; border-radius: 50%;
  background: var(--it-linea); box-shadow: 0 0 0 4px color-mix(in srgb, var(--it-linea) 25%, transparent);
}
.catalogo .itin-info { text-align: left; }
.catalogo .itin-hora {
  margin: 0; font-family: var(--it-hora-font); color: var(--it-hora-color); font-size: calc(var(--it-hora-size) * 1.15);
  font-weight: 600; line-height: 1.2; letter-spacing: .04em; text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.catalogo .itin-texto {
  margin: 5px 0 0; font-family: var(--it-txt-font); color: var(--it-txt-color); font-size: calc(var(--it-txt-size) * 1.1);
  text-transform: uppercase; letter-spacing: .12em; line-height: 1.35; opacity: .92; text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
/* Aparicion en orden: al entrar la lista en pantalla (clase .visible), cada evento aparece despues del anterior */
.catalogo .itin-lista.reveal { opacity: 1; transform: none; }
.catalogo .itin-item { opacity: 0; transform: translateY(22px); }
.catalogo .itin-lista.visible .itin-item { animation: itin-aparecer .9s ease forwards; animation-delay: calc(var(--i, 0) * .45s); }
@keyframes itin-aparecer { to { opacity: 1; transform: none; } }
/* Iconos (linea de tiempo y tarjetas): flotan suave, cada uno desfasado segun su orden (--i) */
.catalogo .itin-icono img { animation: itin-flotar 4.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); transform-origin: 50% 80%; }
@keyframes itin-flotar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-6px) rotate(-2.5deg); }
  65% { transform: translateY(-3px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .catalogo .itin-icono img { animation: none; }
  .catalogo .itin-item { opacity: 1; transform: none; }
  .catalogo .itin-lista.visible .itin-item { animation: none; }
}
@media (min-width: 900px) {
  /* PC: ocupa el ancho segun la cantidad de eventos; con menos eventos, iconos y textos mas grandes */
  .catalogo .itin-lista {
    display: grid; grid-template-columns: repeat(var(--it-n), minmax(0, 1fr));
    /* Tambien puede salir del ancho normal de la pagina, segun la cantidad de eventos */
    max-width: none; width: min(1320px, calc(100vw - 48px), calc(var(--it-n) * 300px)); margin-left: 50%; translate: -50% 0;
    --it-ico: clamp(84px, calc(560px / var(--it-n)), 150px);
  }
  .catalogo .itin-item {
    grid-template-columns: 1fr; grid-template-rows: var(--it-ico) 14px auto; justify-items: center; row-gap: 22px;
    align-items: start; align-content: start; padding: 0 14px; text-align: center; transform: translateY(30px);
  }
  /* El tramo de linea pasa por el centro del punto: icono + espacio (22px) + 7px (mitad del punto) */
  .catalogo .itin-item::before { left: 0; right: 0; top: calc(var(--it-ico) + 29px); bottom: auto; width: auto; height: 2px; transform: translateY(-50%); }
  .catalogo .itin-item:first-child::before { top: calc(var(--it-ico) + 29px); left: 50%; }
  .catalogo .itin-item:last-child::before { bottom: auto; right: 50%; }
  .catalogo .itin-icono { justify-self: center; }
  .catalogo .itin-info { text-align: center; }
  .catalogo .itin-hora { font-size: calc(var(--it-hora-size) * 1.45); }
  .catalogo .itin-texto { font-size: calc(var(--it-txt-size) * 1.25); }
}
/* Diseno "Tarjetas" del itinerario: tarjetas de vidrio con icono, titulo y descripcion.
   Se acomodan solas: en PC en fila (las que entren) y en celular una debajo de otra */
.catalogo .itin-tarjetas {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 38px 0 0;
  /* Sale del ancho normal de la pagina (1080px) para que entren mas tarjetas en una fila, sin pasarse de la pantalla */
  width: min(1320px, calc(100vw - 48px)); margin-left: 50%; translate: -50% 0;
}
.catalogo .itin-card {
  flex: 1 1 190px; max-width: 290px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  padding: 30px 22px 34px; border-radius: 18px;
  background: color-mix(in srgb, var(--it-card) var(--it-card-op), transparent);
  border: 1px solid color-mix(in srgb, var(--it-card) 35%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(26px);
}
.catalogo .itin-card .itin-hora, .catalogo .itin-card .itin-texto { text-shadow: none; }
.catalogo .itin-card .itin-icono { width: 76px; height: 76px; justify-self: auto; }
.catalogo .itin-card .itin-hora { margin: 0; font-size: calc(var(--it-hora-size) * 1.6); font-weight: 400; letter-spacing: 0; line-height: 1.15; text-transform: none; }
.catalogo .itin-card .itin-texto { margin: 0; font-size: calc(var(--it-txt-size) * 1.2); text-transform: none; letter-spacing: .02em; line-height: 1.5; }
.catalogo .itin-tarjetas.reveal { opacity: 1; transform: none; }
.catalogo .itin-tarjetas.visible .itin-card { animation: itin-aparecer .9s ease forwards; animation-delay: calc(var(--i, 0) * .45s); }
@media (max-width: 720px) {
  .catalogo .itin-tarjetas { gap: 22px; }
  .catalogo .itin-card { flex-basis: 100%; max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .catalogo .itin-card { opacity: 1; transform: none; }
  .catalogo .itin-tarjetas.visible .itin-card { animation: none; }
}
/* ---------- Codigo de vestimenta (usa las tarjetas del itinerario) ---------- */
.catalogo .vest-sub {
  margin: 6px auto 0; font-size: clamp(.95rem, 1.8vw, 1.15rem); text-transform: uppercase; letter-spacing: .28em;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
/* Mismo fondo que el recuadro de la cuenta regresiva (.cuenta-numeros): vidrio casi transparente con borde claro */
.catalogo .vest-card {
  flex-basis: 220px; max-width: 280px; padding-top: 26px; border-radius: 20px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 20px 50px -22px rgba(0,0,0,.6);
}
/* Sobre vidrio transparente, los textos vuelven a llevar sombra para leerse sobre cualquier foto */
.catalogo .vest-card .itin-hora, .catalogo .vest-card .itin-texto { text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.catalogo .vest-imagen { height: 210px; width: 100%; display: flex; align-items: center; justify-content: center; }
/* Acercar y alejar muy suave; cada imagen desfasada segun su orden */
.catalogo .vest-imagen img {
  max-height: 100%; max-width: 100%; object-fit: contain; display: block;
  animation: vest-respirar 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.6s);
}
@keyframes vest-respirar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (max-width: 720px) { .catalogo .vest-imagen { height: 230px; } }
@media (prefers-reduced-motion: reduce) { .catalogo .vest-imagen img { animation: none; } }
/* ---------- Dejanos un mensaje: formulario + tarjetas paginadas ----------
   Celular: 3 por pagina, una debajo de otra. PC: columnas de 3 filas (--cols lo calcula el JS segun el ancho) */
.catalogo .coment-form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin: 30px auto 0; }
.catalogo .coment-input {
  width: 100%; padding: 13px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.92); color: #333; font: inherit; font-size: .95rem; text-align: center; outline: none;
}
/* Texto de ayuda ("Tu nombre"...): la plantilla base lo pinta blanco y no se veia sobre el campo blanco */
.catalogo .coment-input::placeholder { color: #8a8185 !important; opacity: 1 !important; font-style: normal; }
.catalogo .coment-input:focus { border-color: var(--cm-boton); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cm-boton) 35%, transparent); }
.catalogo .coment-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.catalogo .coment-enviar {
  width: 100% !important; height: auto !important; line-height: 1.2 !important; padding: 13px 20px !important; border-radius: 999px;
  background: var(--cm-boton) !important; color: var(--cm-boton-on) !important; border: 0 !important; box-shadow: none !important;
  font-size: .95rem; font-weight: 600; letter-spacing: .02em; text-transform: none; cursor: pointer; transition: filter .2s ease, transform .2s ease;
}
.catalogo .coment-enviar:hover { filter: brightness(1.06); transform: translateY(-1px); }
.catalogo .coment-enviar:disabled { opacity: .6; cursor: default; transform: none; }
/* ---------- Invitacion web: encuesta (una opcion por linea: imagen, texto, barra y conteo) ---------- */
.catalogo .enc-lista { display: flex; flex-direction: column; gap: 12px; max-width: 520px; margin: 30px auto 14px; text-align: left; }
.catalogo .enc-opcion {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 18px; cursor: pointer;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color .25s ease, background .25s ease, transform .2s ease;
}
.catalogo .enc-lista:not(.votada) .enc-opcion:hover { background: rgba(255,255,255,.14); border-color: var(--enc-barra); transform: translateY(-1px); }
.catalogo .enc-opcion:focus-visible { outline: 2px solid var(--enc-barra); outline-offset: 2px; }
.catalogo .enc-lista.votada .enc-opcion { cursor: default; }
.catalogo .enc-opcion.elegida { border-color: var(--enc-barra); box-shadow: 0 0 0 2px color-mix(in srgb, var(--enc-barra) 45%, transparent); }
.catalogo .enc-img { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; object-fit: cover; display: block; }
.catalogo .enc-cuerpo { flex: 1; min-width: 0; }
.catalogo .enc-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.catalogo .enc-texto { font-family: var(--enc-font); color: var(--enc-color); font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.catalogo .enc-conteo { flex: 0 0 auto; font-size: .74rem; color: var(--enc-color); opacity: .8; white-space: nowrap; }
.catalogo .enc-barra { height: 8px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.catalogo .enc-relleno { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--enc-barra); transition: width .9s ease; }
/* Sorpresa al votar: la caja se despliega hacia abajo (0fr -> 1fr) y la imagen o video aparece desde arriba,
   pasando de borrosa a nitida, con un brillo que la cruza una vez */
.catalogo .enc-revelar { display: grid; grid-template-rows: 0fr; max-width: 520px; margin: 0 auto; transition: grid-template-rows 1.2s cubic-bezier(.22, 1, .36, 1), margin-top 1.2s ease; }
.catalogo .enc-revelar.abierta { grid-template-rows: 1fr; margin-top: 18px; }
.catalogo .enc-revelar-dentro { overflow: hidden; min-height: 0; }
.catalogo .enc-revelar-marco {
  position: relative; overflow: hidden; border-radius: 20px; border: 1px solid rgba(255,255,255,.28);
  opacity: 0; transform: translateY(-22px) scale(.96); filter: blur(10px);
  transition: opacity 1.1s ease .3s, transform 1.3s cubic-bezier(.22, 1, .36, 1) .3s, filter 1.1s ease .3s;
}
.catalogo .enc-revelar.abierta .enc-revelar-marco { opacity: 1; transform: none; filter: none; }
.catalogo .enc-revelar-marco img, .catalogo .enc-revelar-marco video { display: block; width: 100%; height: auto; }
.catalogo .enc-revelar-marco::after {
  content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
}
.catalogo .enc-revelar.abierta .enc-revelar-marco::after { animation: brillo-encuesta 1.6s ease 1.2s 1 both; }
@keyframes brillo-encuesta { from { left: -70%; } to { left: 140%; } }
@media (prefers-reduced-motion: reduce) {
  .catalogo .enc-opcion, .catalogo .enc-relleno, .catalogo .enc-revelar, .catalogo .enc-revelar-marco { transition: none; }
  .catalogo .enc-revelar.abierta .enc-revelar-marco::after { animation: none; }
}

.catalogo .coment-estado { margin: 0; min-height: 1.2em; font-size: .88rem; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.catalogo .coment-estado.ok { color: #86efac; }
.catalogo .coment-estado.error { color: #fca5a5; }
.catalogo .coment-lista {
  display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); grid-template-rows: repeat(3, auto);
  /* Se llena por filas: se lee de izquierda a derecha y de arriba abajo, del mas reciente al mas antiguo */
  grid-auto-flow: row; gap: 14px 18px; margin: 30px auto 0;
  width: min(1200px, calc(100vw - 48px)); max-width: calc(var(--cols, 1) * 400px); margin-left: 50%; translate: -50% 0;
}
.catalogo .coment-card {
  padding: 14px 18px; border-radius: 14px; text-align: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 14px 34px -20px rgba(0,0,0,.6);
  animation: itin-aparecer .6s ease both; animation-delay: calc(var(--i, 0) * .08s); opacity: 0; transform: translateY(12px);
}
.catalogo .coment-nombre {
  margin: 0; font-family: var(--cm-nombre-font); color: var(--cm-nombre-color); font-size: 1rem; font-weight: 600;
  text-transform: none; letter-spacing: .02em; text-shadow: 0 2px 10px rgba(0,0,0,.4); overflow-wrap: anywhere;
}
.catalogo .coment-texto {
  margin: 4px 0 0; font-family: var(--cm-msg-font); color: var(--cm-msg-color); font-size: 1.08rem; font-style: italic;
  line-height: 1.35; text-shadow: 0 2px 10px rgba(0,0,0,.4); overflow-wrap: anywhere;
}
.catalogo .coment-vacio { grid-column: 1 / -1; margin: 0; font-style: italic; opacity: .85; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.catalogo .coment-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; font-size: .95rem; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.catalogo .coment-nav[hidden] { display: none; }
.catalogo .coment-flecha {
  display: inline-flex !important; align-items: center; justify-content: center; width: 38px !important; height: 38px !important;
  padding: 0 !important; min-width: 0; border-radius: 50%; line-height: 1 !important; font-size: 1.4rem;
  background: rgba(255,255,255,.85) !important; color: #333 !important; border: 0 !important; box-shadow: none !important; cursor: pointer;
}
.catalogo .coment-flecha:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) { .catalogo .coment-card { animation: none; opacity: 1; transform: none; } }
/* Confirmar asistencia: usa los campos y el boton de "Dejanos un mensaje"; los desplegables centrados y con flecha */
.catalogo .conf-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; text-align-last: center; height: auto !important;
  padding-top: 10px; padding-bottom: 10px; padding-right: 40px; color: #333 !important; line-height: 1.3 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
}
.catalogo .conf-select option { color: #333; background: #fff; }
/* ---------- Regalos: cuentas (QR opcional, entidad, numero con copiar, descargar QR) ----------
   Vidrio como el recuadro de la cuenta regresiva. PC: en fila; celular: una debajo de otra */
.catalogo .regalos-inv .lugares-lista + .cuentas-titulo { margin-top: 46px; }
.catalogo .cuentas-lista {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 30px 0 0;
  width: min(1200px, calc(100vw - 48px)); margin-left: 50%; translate: -50% 0;
}
.catalogo .cuentas-lista.reveal { opacity: 1; transform: none; }
.catalogo .cuenta-card {
  flex: 1 1 220px; max-width: 270px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px 20px 26px; border-radius: 20px; text-align: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 20px 50px -22px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(26px);
}
.catalogo .cuentas-lista.visible .cuenta-card { animation: itin-aparecer .9s ease forwards; animation-delay: calc(var(--i, 0) * .45s); }
.catalogo .cuenta-qr { width: 170px; height: 170px; padding: 10px; background: #fff; border-radius: 14px; margin-bottom: 4px; }
.catalogo .cuenta-qr img { width: 100%; height: 100%; object-fit: contain; display: block; }
.catalogo .cuenta-entidad {
  margin: 0; font-family: var(--cta-entidad-font); color: var(--cta-entidad-color); font-size: 1.2rem; font-weight: 600;
  text-transform: none; letter-spacing: .02em; line-height: 1.2; text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
/* Numero y boton copiar siempre en la misma linea; si el numero es muy largo, se parte en dos lineas junto al boton */
.catalogo .cuenta-numero { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; }
.catalogo .cuenta-numero span {
  min-width: 0; color: var(--cta-numero-color); font-size: .95rem; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0,0,0,.4); overflow-wrap: anywhere;
}
.catalogo .cuenta-copiar { flex-shrink: 0; }
/* Boton copiar (Hyperspace fuerza estilos en <button>, por eso los !important) */
.catalogo .cuenta-copiar {
  display: inline-flex !important; align-items: center; justify-content: center; width: 34px !important; height: 34px !important;
  padding: 0 !important; margin: 0; min-width: 0; border-radius: 50%; line-height: 1 !important;
  background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.3) !important; box-shadow: none !important;
  color: #fff !important; cursor: pointer; transition: background .2s ease;
}
.catalogo .cuenta-copiar:hover { background: rgba(255,255,255,.26) !important; }
.catalogo .cuenta-copiar svg { width: 16px; height: 16px; }
.catalogo .cuenta-copiar .ic-copiado { display: none; }
.catalogo .cuenta-copiar.copiado .ic-copiar { display: none; }
.catalogo .cuenta-copiar.copiado .ic-copiado { display: block; color: #4ade80; }
.catalogo .cuenta-descargar {
  margin-top: 6px; display: inline-block; padding: 9px 22px; border-radius: 999px; text-decoration: none; font-size: .88rem;
  color: #fff !important; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.08); transition: background .2s ease;
}
.catalogo .cuenta-descargar:hover { background: rgba(255,255,255,.2); }
@media (max-width: 720px) { .catalogo .cuenta-card { flex-basis: 100%; max-width: 320px; } }
@media (prefers-reduced-motion: reduce) {
  .catalogo .cuenta-card { opacity: 1; transform: none; }
  .catalogo .cuentas-lista.visible .cuenta-card { animation: none; }
}
/* ---------- Lugar del evento: tarjetas con mapa de Google, nombre, direccion y boton ----------
   PC: en fila (1 a 4, segun cuantos lugares); celular: una debajo de otra */
.catalogo .lugares-lista {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; margin: 38px 0 0;
  width: min(1320px, calc(100vw - 48px)); margin-left: 50%; translate: -50% 0;
}
.catalogo .lugares-lista.reveal { opacity: 1; transform: none; }
.catalogo .lugar-card {
  flex: 1 1 260px; max-width: 420px; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px;
  background: color-mix(in srgb, var(--it-card) var(--it-card-op), transparent);
  border: 1px solid color-mix(in srgb, var(--it-card) 35%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 18px 40px -22px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(26px);
}
.catalogo .lugares-lista.visible .lugar-card { animation: itin-aparecer .9s ease forwards; animation-delay: calc(var(--i, 0) * .45s); }
.catalogo .lugar-mapa { aspect-ratio: 16 / 10; background: rgba(0,0,0,.08); }
.catalogo .lugar-mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.catalogo .lugar-cuerpo { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 20px 26px; text-align: center; }
.catalogo .lugar-nombre {
  margin: 0; font-family: var(--lg-nombre-font); color: var(--lg-nombre-color); font-size: var(--lg-nombre-size);
  font-weight: 600; line-height: 1.2; text-transform: none; letter-spacing: 0;
}
.catalogo .lugar-direccion { margin: 0; color: var(--lg-texto-color); font-size: .92rem; line-height: 1.45; }
.catalogo .lugar-boton {
  margin-top: auto; display: inline-block; padding: 11px 26px; border-radius: 999px; text-decoration: none; border: 0;
  background: var(--lg-boton); color: var(--lg-boton-on) !important; font-size: .92rem; font-weight: 500; letter-spacing: .02em;
  transition: transform .2s ease, filter .2s ease;
}
.catalogo .lugar-cuerpo .lugar-direccion + .lugar-boton, .catalogo .lugar-cuerpo .lugar-nombre + .lugar-boton { margin-top: 10px; }
.catalogo .lugar-boton:hover { transform: translateY(-2px); filter: brightness(1.1); }
/* Variante vidrio (Lugar del evento y Regalos): mismo fondo que el recuadro de la cuenta regresiva y textos con sombra */
.catalogo .lugares-lista.vidrio .lugar-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 20px 50px -22px rgba(0,0,0,.6);
}
.catalogo .lugares-lista.vidrio .lugar-nombre, .catalogo .lugares-lista.vidrio .lugar-direccion { text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.catalogo .lugares-lista.vidrio .lugar-mapa { background: rgba(255,255,255,.08); }
/* Vidrio con fondo de color (opcion "Fondo de las tarjetas"): tapa los dibujos o sombras del fondo de la seccion */
.catalogo .lugares-lista.vidrio.con-fondo .lugar-card {
  background: color-mix(in srgb, var(--it-card) var(--it-card-op), transparent);
  border-color: color-mix(in srgb, var(--it-card) 45%, transparent);
}
/* PC con 1 o 2 lugares: tarjetas horizontales y anchas (mapa a la izquierda, textos a la derecha), una debajo de otra */
@media (min-width: 900px) {
  .catalogo .lugares-lista.pocos { flex-direction: column; align-items: center; }
  .catalogo .lugares-lista.pocos .lugar-card { flex: none; width: 100%; max-width: 940px; flex-direction: row; }
  /* sin mapa: tarjeta mas angosta, solo texto y boton */
  .catalogo .lugares-lista.pocos.sin-mapa .lugar-card { max-width: 560px; }
  .catalogo .lugares-lista.pocos .lugar-mapa { flex: 0 0 56%; aspect-ratio: auto; min-height: 300px; }
  .catalogo .lugares-lista.pocos .lugar-cuerpo { justify-content: center; padding: 34px 36px; gap: 10px; }
  .catalogo .lugares-lista.pocos .lugar-nombre { font-size: calc(var(--lg-nombre-size) * 1.3); }
  .catalogo .lugares-lista.pocos .lugar-direccion { font-size: 1.02rem; }
  .catalogo .lugares-lista.pocos .lugar-boton { margin-top: 14px; }
}
@media (max-width: 720px) {
  .catalogo .lugares-lista { gap: 22px; }
  .catalogo .lugar-card { flex-basis: 100%; max-width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .catalogo .lugar-card { opacity: 1; transform: none; }
  .catalogo .lugares-lista.visible .lugar-card { animation: none; }
}
/* Interruptor "Difuminar los bordes" apagado: la seccion no se funde con la de arriba, y la de abajo
   tampoco se monta sobre ella (bordes rectos arriba y abajo) */
/* Rendimiento en celulares y tablets: el desenfoque de "vidrio" (backdrop-filter) se recalcula en cada
   movimiento del scroll y hacia la invitacion lenta. Ahi se quita y se compensa con un poco mas de tinte. */
@media (max-width: 900px), (hover: none) {
  .catalogo .cuenta-numeros, .catalogo .itin-card, .catalogo .lugar-card, .catalogo .cuenta-card,
  .catalogo .coment-card, .catalogo .vest-card, .catalogo .pre-boton {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .catalogo .cuenta-numeros, .catalogo .vest-card, .catalogo .cuenta-card, .catalogo .coment-card,
  .catalogo .lugares-lista.vidrio .lugar-card { background: rgba(255,255,255,.1); }
}
/* Imagen o video encima de la cuenta regresiva: ocupa todo el ancho, sin velo ni relleno;
   no tiene capa de fondo, asi que el fundido de arriba va en la seccion misma (solo contiene la imagen) */
.catalogo .inv-seccion.inv-media {
  padding: 0; background: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fundido));
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fundido));
}
.catalogo .inv-media::before { display: none; }
/* (el difuminado vive en la capa ::before de cada seccion, o en la seccion misma si es de imagen/video) */
.catalogo .inv-seccion.sin-fundido,
.catalogo .inv-seccion.sin-fundido + .inv-seccion { margin-top: 0; -webkit-mask-image: none; mask-image: none; }
.catalogo .inv-seccion.sin-fundido::before,
.catalogo .inv-seccion.sin-fundido + .inv-seccion::before,
.catalogo .inv-seccion.sin-fundido > .inv-fondo-video,
.catalogo .inv-seccion.sin-fundido + .inv-seccion > .inv-fondo-video { -webkit-mask-image: none; mask-image: none; }
.catalogo .inv-seccion.sin-fundido:not(.inv-media),
.catalogo .inv-seccion.sin-fundido + .inv-seccion:not(.inv-media) { padding-top: clamp(80px, 12vw, 140px); }
.catalogo .inv-media-el { display: block; width: 100%; height: auto; max-height: 100vh; object-fit: cover; }
@media (max-width: 720px) { .catalogo .inv-media-el.solo-pc { display: none; } }
@media (min-width: 721px) { .catalogo .inv-media-el.solo-movil { display: none; } }
/* Reproductor: portada pequena + info + progreso + onda + controles (el color del boton es --musica-color) */
.catalogo .musica-contenido { max-width: 980px; }
.catalogo .reproductor {
  display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); align-items: center;
  margin: 34px auto 0; text-align: left; padding: 0;
}
.catalogo .reproductor.sin-portada { grid-template-columns: 1fr; }
.catalogo .reproductor-portada { aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: var(--surface-2); box-shadow: 0 16px 36px -16px rgba(0,0,0,.65); }
.catalogo .reproductor-portada picture, .catalogo .reproductor-portada img { display: block; width: 100%; height: 100%; }
.catalogo .reproductor-portada img { object-fit: cover; }
.catalogo .rp-cancion { margin: 0; font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--text); line-height: 1.25; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.catalogo .rp-artista { margin: 4px 0 0; color: var(--text); opacity: .85; font-size: .95rem; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.catalogo .rp-tiempos { display: flex; justify-content: space-between; font-size: .82rem; color: var(--rp-color, var(--text)); opacity: .85; font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.catalogo .rp-onda { display: flex; align-items: center; gap: 3px; height: 64px; margin: 22px 0 8px; cursor: pointer; }
.catalogo .rp-onda span { flex: 1; min-width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--rp-color, var(--text)) 45%, transparent); transition: background .25s ease; pointer-events: none; }
.catalogo .rp-onda span.llena { background: var(--musica-color, var(--accent)); }
/* Controles: el Play queda exactamente al centro (columnas laterales iguales); -10 y +10 a sus lados
   y "repetir" en la columna de la derecha */
.catalogo .rp-controles {
  display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; justify-items: center;
  column-gap: clamp(14px, 3vw, 28px); margin-top: 8px;
}
.catalogo .rp-controles > :first-child { grid-column: 2; }
.catalogo .rp-controles #rp-repetir { justify-self: start; }

/* Botones (Hyperspace fuerza estilos en <button>, por eso los !important) */
.catalogo .rp-btn, .catalogo .musica-btn, .catalogo .musica-flotante {
  display: grid !important; place-items: center; padding: 0 !important; margin: 0; line-height: 1 !important; border: 0 !important;
  border-radius: 50%; cursor: pointer; text-transform: none; letter-spacing: normal; min-width: 0; box-shadow: none !important;
  transition: transform .2s ease, color .2s ease, background .2s ease, box-shadow .25s ease;
}
.catalogo .rp-btn { width: 44px; height: 44px !important; background: transparent !important; color: var(--rp-color, var(--text)) !important; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.catalogo .rp-btn svg { width: 26px; height: 26px; }
.catalogo .rp-btn:hover { transform: scale(1.1); color: var(--musica-color, var(--accent)) !important; }
.catalogo .rp-btn.activo { color: var(--musica-color, var(--accent)) !important; }
.catalogo .musica-btn, .catalogo .musica-flotante { background: var(--musica-color, var(--accent)) !important; color: var(--musica-on, #fff) !important; }
.catalogo .musica-btn { width: 68px; height: 68px !important; box-shadow: 0 12px 30px -8px color-mix(in srgb, var(--musica-color, var(--accent)) 75%, transparent) !important; }
.catalogo .musica-btn svg { width: 30px; height: 30px; }
.catalogo .musica-btn:hover { transform: scale(1.07); }
/* Play con efecto vidrio, teñido con el color elegido para el boton */
.catalogo .musica-btn {
  background: color-mix(in srgb, var(--musica-color, var(--accent)) var(--musica-vidrio, 32%), rgba(255,255,255,.08)) !important;
  border: 1.5px solid color-mix(in srgb, var(--musica-color, var(--accent)) 80%, #fff) !important;
  color: #fff !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.catalogo .musica-btn svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.catalogo .musica-btn .ic-play, .catalogo .musica-flotante .ic-play { margin-left: 3px; }
.catalogo .musica-btn .ic-pausa, .catalogo .musica-flotante .ic-pausa { display: none; }
.catalogo .musica-btn.sonando .ic-play, .catalogo .musica-flotante.sonando .ic-play { display: none; }
.catalogo .musica-btn.sonando .ic-pausa, .catalogo .musica-flotante.sonando .ic-pausa { display: block; }
.catalogo .musica-btn.sonando { animation: pulso-musica 2s ease-in-out infinite; }

/* Boton flotante de pausa: aparece abajo a la derecha al salir de la seccion de musica */
.catalogo .musica-flotante { position: fixed; right: 20px; bottom: 20px; width: 56px; height: 56px !important; z-index: 60; box-shadow: 0 10px 28px -6px rgba(0,0,0,.55) !important; }
.catalogo .musica-flotante[hidden] { display: none !important; }
.catalogo .musica-flotante:hover { transform: scale(1.08); }
.catalogo .musica-flotante svg { width: 24px; height: 24px; }

@keyframes pulso-musica { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--musica-color, var(--accent)) 45%, transparent); } 50% { box-shadow: 0 0 0 16px transparent; } }
@media (max-width: 720px) {
  .catalogo .reproductor { grid-template-columns: 1fr; text-align: center; gap: 22px; }
  .catalogo .reproductor-portada { max-width: 240px; margin: 0 auto; }
  .catalogo .rp-onda { height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .catalogo .musica-btn.sonando { animation: none; }
}

/* ---------- Invitacion web: pre-portada (pantalla de bienvenida) ---------- */
.pre-portada {
  position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 12vh 24px 12vh; text-align: center; color: var(--pre-color, #fff); overflow: hidden;
  background-color: #1a1218; background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: opacity 1s ease, transform 1.3s ease; cursor: pointer;
}
.pre-portada::before { content: ""; position: absolute; inset: 0; background: var(--bg, #000); opacity: var(--velo, .4); }
/* Video de fondo: encima de la foto de respaldo y debajo del velo (::before) y del texto */
.pre-video { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pre-portada.abierta { opacity: 0; transform: scale(1.05); pointer-events: none; }
.pre-portada-centro { position: relative; z-index: 1; margin: auto 0; display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
/* ".catalogo" delante para ganarle a ".catalogo h1 { font-weight: 700 }" (Great Vibes no tiene negrita real) */
.catalogo .pre-titulo, .pre-titulo { margin: 0; line-height: 1.05; font-weight: 400; color: inherit; text-shadow: 0 2px 26px rgba(0,0,0,.35); animation: pre-entrada 1.4s ease both; }
/* El "&" de los nombres apilados (pre-portada y portada) */
.pre-amp { display: inline-block; font-size: .65em; opacity: .9; margin: .05em 0; }
.pre-subtitulo { margin: 0; font-size: clamp(1.15rem, 2.8vw, 1.8rem); letter-spacing: .05em; color: inherit; opacity: .92; text-shadow: 0 2px 18px rgba(0,0,0,.35); animation: pre-entrada 1.4s ease .25s both; }
.catalogo .pre-boton {
  position: relative; z-index: 1; display: inline-flex !important; align-items: center; justify-content: center;
  height: auto !important; line-height: 1 !important; padding: 19px 54px !important; margin: 0;
  border: 1px solid color-mix(in srgb, var(--pre-color, #fff) 75%, transparent) !important; border-radius: 999px;
  background: color-mix(in srgb, var(--pre-color, #fff) 8%, transparent) !important; color: var(--pre-color, #fff) !important;
  text-transform: uppercase; letter-spacing: .32em; font-size: .82rem; font-weight: 500; cursor: pointer; overflow: hidden;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: none !important; min-width: 0;
  transition: letter-spacing .4s ease, background .4s ease, box-shadow .4s ease, transform .3s ease;
  animation: pre-entrada 1.4s ease .5s both;
}
.catalogo .pre-boton span { position: relative; z-index: 1; }
.catalogo .pre-boton::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); animation: brillo-pre 3.8s ease-in-out infinite;
}
.catalogo .pre-boton:hover {
  letter-spacing: .38em; background: color-mix(in srgb, var(--pre-color, #fff) 20%, transparent) !important;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--pre-color, #fff) 12%, transparent) !important;
}
.catalogo .pre-boton:active { transform: scale(.98); }
@keyframes pre-entrada { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes brillo-pre { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  .pre-portada, .pre-titulo, .pre-subtitulo, .catalogo .pre-boton, .catalogo .pre-boton::after { animation: none; transition: none; }
}

/* ---------- Invitacion web: galeria de fotos (una a la vez) ---------- */
.catalogo .galeria-inv .contenedor { max-width: 900px; }
.catalogo .gal-visor { position: relative; width: min(430px, 86vw, calc(64vh * .8)); margin: 34px auto 0; outline: none; }
.catalogo .gal-marco {
  position: relative; aspect-ratio: 4 / 5; border-radius: 26px; border: 5px solid #fff; overflow: hidden;
  background: rgba(255,255,255,.14); box-shadow: 0 28px 64px -22px rgba(0,0,0,.7);
}
.catalogo .gal-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity .9s ease, transform 1.3s ease; }
.catalogo .gal-slide.activa { opacity: 1; transform: none; }
.catalogo .gal-slide img, .catalogo .gal-slide video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* la foto aparece suave cuando termino de bajar (el JS le pone .cargada); mientras, se ve el marco de vidrio claro */
.catalogo .gal-slide img { opacity: 0; transition: opacity .6s ease; }
.catalogo .gal-slide img.cargada { opacity: 1; }
/* Modo "foto completa": la foto se ve entera (sin recortar) y el espacio que sobra se rellena con la misma foto
   difuminada y un poco oscurecida. Sirve para fotos horizontales dentro del marco vertical. */
/* Modo "el marco toma la forma de cada foto": ancho y alto del marco segun la proporcion de la foto que se ve
   (--gal-ratio, lo pone el JS). Tope: 86% del ancho de pantalla y 64% del alto. */
.catalogo .fotos-adaptadas .gal-visor {
  width: min(640px, 86vw, calc(64vh * var(--gal-ratio, .8))); transition: width .6s ease;
  /* reserva el alto de la foto mas alta de la galeria (--gal-ratio-min) y centra el marco: la pagina no salta al cambiar de foto */
  display: flex; align-items: center;
  min-height: calc(min(640px, 86vw, 64vh * var(--gal-ratio-min, var(--gal-ratio, .8))) / var(--gal-ratio-min, var(--gal-ratio, .8)));
}
.catalogo .fotos-adaptadas .gal-marco { flex: 1 1 auto; width: 100%; aspect-ratio: var(--gal-ratio, .8); transition: aspect-ratio .6s ease; }
@media (prefers-reduced-motion: reduce) { .catalogo .fotos-adaptadas .gal-visor, .catalogo .fotos-adaptadas .gal-marco { transition: none; } }
.catalogo .fotos-completas .gal-slide { overflow: hidden; }
.catalogo .fotos-completas .gal-slide::before {
  content: ""; position: absolute; inset: -24px; background: var(--gal-img, none) center / cover no-repeat;
  filter: blur(18px) brightness(.75);
}
.catalogo .fotos-completas .gal-slide img, .catalogo .fotos-completas .gal-slide video { position: relative; object-fit: contain; }
.catalogo .gal-flecha {
  position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px !important; margin: 0; padding: 0 0 4px !important;
  display: grid !important; place-items: center; border: 0 !important; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.94) !important; color: #2a2226 !important; font-size: 1.9rem; line-height: 1 !important;
  text-transform: none; letter-spacing: normal; min-width: 0; box-shadow: 0 8px 22px -6px rgba(0,0,0,.5) !important;
  transform: translateY(-50%); transition: transform .2s ease, background .2s ease;
}
.catalogo .gal-flecha:hover { transform: translateY(-50%) scale(1.1); }
/* Flechas de la galeria y de "Dejanos un mensaje": efecto vidrio */
.catalogo .gal-flecha, .catalogo .coment-flecha {
  background: rgba(255,255,255,.16) !important; border: 1px solid rgba(255,255,255,.45) !important; color: #fff !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.catalogo .gal-flecha:hover, .catalogo .coment-flecha:hover:not(:disabled) { background: rgba(255,255,255,.28) !important; }
.catalogo .gal-ant { left: -24px; }
.catalogo .gal-sig { right: -24px; }
.catalogo .gal-texto {
  margin: 28px auto 0; max-width: 640px; min-height: 3.4em; line-height: 1.6; text-align: center;
  text-shadow: 0 2px 16px rgba(0,0,0,.55); transition: opacity .2s ease;
}
.catalogo .gal-texto.cambiando { opacity: 0; }
.catalogo .gal-puntos { display: flex; justify-content: center; gap: 9px; margin-top: 14px; flex-wrap: wrap; }
.catalogo .gal-punto {
  width: 9px; height: 9px !important; padding: 0 !important; margin: 0; border-radius: 50%; border: 0 !important; min-width: 0; cursor: pointer;
  background: rgba(255,255,255,.45) !important; box-shadow: none !important; transition: background .25s ease, transform .25s ease;
}
.catalogo .gal-punto.activo { background: #fff !important; transform: scale(1.35); }
@media (max-width: 560px) {
  .catalogo .gal-ant { left: 8px; }
  .catalogo .gal-sig { right: 8px; }
  .catalogo .gal-flecha { width: 42px; height: 42px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .catalogo .gal-slide, .catalogo .gal-texto { transition: none; }
}

/* ---------- Invitacion web: cuenta regresiva (estilo elegante de gala) ---------- */
.catalogo .cuenta-contenido { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.catalogo .cuenta-imagen { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 10px 26px -8px rgba(0,0,0,.5); margin-bottom: 14px; }
.catalogo .cuenta-central { margin: 0 0 4px; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.catalogo .cuenta-faltan { margin: 0 0 26px; font-size: clamp(1.05rem, 1.8vw, 1.3rem); letter-spacing: .12em; text-transform: uppercase; opacity: .9; text-shadow: 0 2px 12px rgba(0,0,0,.4); }

.catalogo .cuenta-numeros {
  display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.4vw, 22px);
  padding: clamp(22px, 4vw, 34px) clamp(22px, 5vw, 48px); border-radius: 20px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 20px 50px -22px rgba(0,0,0,.6);
}
.catalogo .cuenta-bloque { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 2.6em; }
.catalogo .cuenta-num {
  font-family: var(--cnum-font); color: var(--cnum-color); font-weight: 600; line-height: 1;
  font-size: var(--cnum-size, clamp(2.1rem, 6vw, 3.4rem)); font-variant-numeric: tabular-nums; text-shadow: 0 2px 14px rgba(0,0,0,.4);
}
.catalogo .cuenta-lbl {
  font-family: var(--clbl-font); color: var(--clbl-color); font-style: italic; font-size: clamp(.78rem, 1.4vw, .95rem);
  letter-spacing: .06em; opacity: .95;
}
.catalogo .cuenta-sep { font-family: var(--cnum-font); color: var(--cnum-color); font-size: calc(var(--cnum-size, clamp(2.1rem, 6vw, 3.4rem)) * .7); opacity: .55; transform: translateY(-8px); }
.catalogo .cuenta-fin { margin: 26px 0 0; font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-style: italic; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
@media (max-width: 480px) {
  .catalogo .cuenta-numeros { gap: 8px; padding: 18px 14px; }
  .catalogo .cuenta-bloque { min-width: 2.1em; }
}