/* ============================================================
   EAJ · subespacio.css — plantilla de páginas de sub-espacio
   ============================================================ */

.eaj-ico { width: 1.2em; height: 1.2em; display: inline-block; vertical-align: -0.18em; }

/* Hero de sub-espacio */
.subespacio-hero {
  position: relative;
  background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--acento) 25%, var(--negro-teatral)) 0%, var(--negro-teatral) 65%);
  color: var(--blanco-escenico);
  padding: calc(var(--sp-24) + 40px) 0 var(--sp-16);
  overflow: hidden;
}
.subespacio-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 40% at 50% 100%, color-mix(in srgb, var(--acento) 25%, transparent), transparent 70%);
}
.subespacio-hero-contenido { position: relative; z-index: 2; max-width: 56ch; }
.subespacio-hero .etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--acento); font-weight: 600;
}
.subespacio-hero .etiqueta .eaj-ico { width: 1.2rem; height: 1.2rem; }
.subespacio-hero h1 {
  font-size: var(--fs-display); margin: var(--sp-4) 0 var(--sp-6);
  line-height: 0.95;
}
.subespacio-hero h1 em { color: var(--acento); font-style: italic; }
.subespacio-hero .lead { color: rgba(245,240,232,0.82); }

.breadcrumb {
  display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 0.85rem;
  color: rgba(245,240,232,0.6); margin-bottom: var(--sp-3);
}
.breadcrumb a:hover { color: var(--acento); }
.breadcrumb .eaj-ico { width: 0.85rem; height: 0.85rem; }

/* Logo del sub-espacio en el hero */
.subespacio-hero-logo {
  display: block; width: min(190px, 46vw); height: auto;
  border-radius: 14px; margin: 0 0 var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--acento) 55%, transparent);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5), 0 0 44px color-mix(in srgb, var(--acento) 18%, transparent);
}
.subespacio-hero-logo--redondo {
  width: 132px; height: 132px; object-fit: cover; border-radius: 50%;
  border-width: 2px;
}

/* Sección descriptiva con imagen */
.subespacio-sector { padding-block: var(--sp-24); }
.subespacio-sector--oscuro { background: var(--negro-teatral); color: var(--blanco-escenico); }
.subespacio-doble { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; }
.subespacio-doble--invertido .subespacio-doble-texto { order: 2; }
.subespacio-doble-imagen {
  aspect-ratio: 4/3; border-radius: var(--radio-tarjeta);
  background: linear-gradient(135deg, var(--gris-carbon), var(--negro-teatral));
  position: relative; overflow: hidden; border-top: 4px solid var(--acento);
  display: grid; place-items: center; color: rgba(245,240,232,0.22);
}
.subespacio-doble-imagen img { width: 100%; height: 100%; object-fit: cover; }
.subespacio-doble-imagen:has(img) .placeholder-ico { display: none; }
.placeholder-ico { display: grid; place-items: center; gap: var(--sp-3); text-align: center; padding: var(--sp-8); }
.placeholder-ico .eaj-ico { width: 3rem; height: 3rem; }
.placeholder-ico small { font-size: 0.8rem; color: rgba(245,240,232,0.4); }

/* Servicios / productos (lista) */
.servicios-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-6);
  margin-top: var(--sp-12);
}
.servicio-card {
  padding: var(--sp-8); border-radius: var(--radio-tarjeta);
  background: rgba(255,255,255,0.03); border: 1px solid rgba(245,240,232,0.12);
  border-top: 3px solid var(--acento); position: relative;
  transition: transform var(--duracion-rapida) var(--ease-teatro);
}
.subespacio-sector:not(.subespacio-sector--oscuro) .servicio-card { background: var(--blanco-escenico); border-color: rgba(10,10,10,0.08); box-shadow: var(--sombra-suave); }
.servicio-card:hover { transform: translateY(-4px); }
.servicio-numero {
  font-family: var(--font-display); font-style: italic; font-weight: 800;
  color: var(--acento); font-size: 1.6rem; opacity: 0.5;
  position: absolute; top: var(--sp-4); right: var(--sp-6);
}
.servicio-card h3 { font-size: 1.2rem; margin-bottom: var(--sp-3); }
.servicio-card p { margin: 0; color: rgba(245,240,232,0.74); font-size: 0.95rem; }
.subespacio-sector:not(.subespacio-sector--oscuro) .servicio-card p { color: var(--gris-carbon); }
.servicio-lista { list-style: none; padding: 0; margin-top: var(--sp-4); display: grid; gap: 6px; }
.servicio-lista li { padding-left: var(--sp-4); position: relative; font-size: 0.9rem; color: rgba(245,240,232,0.74); }
.subespacio-sector:not(.subespacio-sector--oscuro) .servicio-lista li { color: var(--gris-carbon); }
.servicio-lista li::before { content: "—"; position: absolute; left: 0; color: var(--acento); }

/* Galería de imágenes */
.galeria-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-12); }
.galeria-item {
  aspect-ratio: 1/1; border-radius: var(--radio); overflow: hidden; position: relative;
  background: linear-gradient(135deg, var(--gris-carbon), var(--negro-teatral));
  display: grid; place-items: center; color: rgba(245,240,232,0.22);
  border: 1px solid rgba(245,240,232,0.08);
}
.galeria-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duracion-media) var(--ease-teatro); }
.galeria-item:hover img { transform: scale(1.05); }
.galeria-item:has(img) .placeholder-ico { display: none; }
.galeria-item .eaj-ico { width: 2rem; height: 2rem; }

/* Noticias del sub-espacio */
.noticias-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-6); margin-top: var(--sp-12); }
.noticia {
  background: var(--blanco-escenico); color: var(--negro-teatral);
  border-radius: var(--radio-tarjeta); overflow: hidden;
  border-top: 4px solid var(--acento); box-shadow: var(--sombra-suave);
  display: grid; grid-template-rows: auto 1fr;
}
.noticia-img { aspect-ratio: 16/10; position: relative; background: linear-gradient(135deg, var(--gris-carbon), var(--negro-teatral)); display: grid; place-items: center; color: rgba(245,240,232,0.18); }
.noticia-img img { width: 100%; height: 100%; object-fit: cover; }
.noticia-img:has(img) .ticket-img-vacio { display: none; }
.noticia-img .ticket-img-vacio { display: grid; place-items: center; }
.noticia-img .ticket-img-vacio .eaj-ico { width: 2.5rem; height: 2.5rem; }
.noticia-cuerpo { padding: var(--sp-6); }
.noticia-fecha { font-family: var(--font-display); color: var(--acento); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.noticia-cuerpo h3 { font-size: 1.1rem; margin: var(--sp-2) 0 var(--sp-3); }
.noticia-cuerpo p { color: var(--gris-carbon); font-size: 0.92rem; margin-bottom: var(--sp-4); }

/* Menú estilo carta de café (--acento = cobre vintage por contexto) */
.menu-carta {
  background: var(--blanco-escenico); color: var(--negro-teatral);
  padding: var(--sp-16); border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-calida); border: 1px solid var(--cobre-vintage);
  position: relative; max-width: 720px; margin: var(--sp-12) auto 0;
}
.menu-carta::before {
  content: "Café Charlot";
  position: absolute; top: var(--sp-6); left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-style: italic; color: var(--cobre-vintage);
  letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.85rem;
}
.menu-categoria { margin-top: var(--sp-12); }
.menu-categoria:first-of-type { margin-top: var(--sp-16); }
.menu-cat-titulo {
  font-family: var(--font-display); text-align: center; font-weight: 700;
  border-bottom: 1px dashed var(--cobre-vintage); padding-bottom: var(--sp-2); margin-bottom: var(--sp-6);
}
.menu-categoria ul { list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
.menu-item-head { display: flex; align-items: baseline; gap: 6px; }
.menu-item-nombre { font-weight: 600; font-family: var(--font-body); }
.menu-item-puntos { flex-grow: 1; border-bottom: 1px dotted rgba(10,10,10,0.25); margin: 0 4px; transform: translateY(-4px); }
.menu-item-precio { font-family: var(--font-display); font-weight: 700; color: var(--cobre-vintage); }
.menu-item-desc { color: var(--gris-carbon); font-size: 0.88rem; margin: 2px 0 0; font-style: italic; }

/* Bloque de alquiler */
.bloque-alquiler {
  background: linear-gradient(135deg, var(--cobre-vintage), #8a5a20);
  color: var(--blanco-escenico); padding: var(--sp-12); border-radius: var(--radio-tarjeta);
  display: grid; gap: var(--sp-4); text-align: center; margin-top: var(--sp-12); position: relative; overflow: hidden;
}
.bloque-alquiler::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 16px, transparent 16px 32px);
}
.bloque-alquiler h2, .bloque-alquiler p { position: relative; z-index: 1; margin: 0; }
.bloque-alquiler h2 { font-size: var(--fs-h2); }
.bloque-alquiler .btn { justify-self: center; margin-top: var(--sp-4); background: var(--negro-teatral); color: var(--blanco-escenico); }

/* Bloque inscripción */
.bloque-inscripcion {
  background: var(--negro-teatral); color: var(--blanco-escenico);
  padding: var(--sp-12); border-radius: var(--radio-tarjeta);
  border-top: 4px solid var(--acento); margin-top: var(--sp-12);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-6);
}
.bloque-inscripcion h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-h2); }
.bloque-inscripcion p { margin: 0; color: rgba(245,240,232,0.7); }

/* Contacto de sub-espacio */
.contacto-subespacio {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.contacto-subespacio a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: var(--sp-4); border: 1px solid rgba(245,240,232,0.2); border-radius: var(--radio);
  color: rgba(245,240,232,0.85); font-size: 0.92rem;
}
.subespacio-sector:not(.subespacio-sector--oscuro) .contacto-subespacio a {
  background: var(--blanco-escenico); color: var(--gris-carbon); border-color: rgba(10,10,10,0.1);
  box-shadow: var(--sombra-suave);
}
.contacto-subespacio a:hover { color: var(--acento); border-color: var(--acento); }
.contacto-subespacio .eaj-ico { color: var(--acento); }

/* Tabla de horarios / precios */
.tabla-info {
  width: 100%; margin-top: var(--sp-8); border-collapse: collapse;
  font-size: 0.95rem;
}
.tabla-info th, .tabla-info td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid rgba(245,240,232,0.08); }
.subespacio-sector:not(.subespacio-sector--oscuro) .tabla-info th,
.subespacio-sector:not(.subespacio-sector--oscuro) .tabla-info td { border-color: rgba(10,10,10,0.08); }
.tabla-info th { font-family: var(--font-display); color: var(--acento); font-weight: 700; }
.tabla-info td:last-child { text-align: right; font-family: var(--font-display); color: var(--acento); font-weight: 700; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .subespacio-doble { grid-template-columns: 1fr; gap: var(--sp-8); }
  .subespacio-doble--invertido .subespacio-doble-texto { order: 0; }
  .galeria-grid { grid-template-columns: repeat(2, 1fr); }
  .bloque-inscripcion { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .galeria-grid { grid-template-columns: 1fr; }
  .menu-carta { padding: var(--sp-8); }
}