/*
 * inicio.css — Portada del conservatorio (plantilla inicio/inicio.php) — CPM
 * Depende de: /style.css (tokens globales: --color-dorado, --font-titulo, --space-*…)
 *
 * Una landing: hero a sangre, accesos, agenda, cartelera, noticias y, al
 * final, «Quiénes somos». Ritmo vertical amplio (--space-xxl entre secciones)
 * y una sola familia de acentos: el dorado del tema sobre blanco y negro.
 */

/* --inicio-solape: cuánto suben las tarjetas de accesos sobre el hero. Las
   tarjetas miden unos 5,5 rem de alto: a mitad, quedan media sobre la foto y
   media sobre la sección siguiente. */
.inicio { width: 100%; max-width: 100%; --inicio-solape: 2.75rem; }
.inicio .texto-muted { color: var(--color-texto-suave); }

/* ── Hero ─────────────────────────────────────────────────── */
.inicio-hero {
  position           : relative;
  min-height         : min(72vh, 640px);
  display            : flex;
  flex-direction     : column;
  justify-content    : flex-end;
  color              : var(--color-blanco);
  background-color   : var(--color-negro);
  background-size    : cover;
  background-position: center 40%;
}
/* Con el slider de fondo: él marca la altura, y el texto va encima en
   absoluto. El velo y el bloque de texto dejan pasar los clics al slider
   (flechas, puntos); solo los botones los recogen. */
/* Fondo negro también con slider: en móvil el texto se coloca debajo de las
   fotos y sin ese fondo salía blanco sobre blanco. */
.inicio-hero--slider { display: block; min-height: 0; background-image: none; background-color: var(--color-negro); }
.inicio-hero__slider { position: relative; z-index: 0; }
/* Smart Slider trae su propio tope (#n2-ss-N-align { max-width: 1200px })
   desde su panel; aquí el hero va a sangre. */
.inicio-hero__slider .n2-ss-align { max-width: none !important; }
.inicio-hero--slider .inicio-hero__velo { z-index: 1; pointer-events: none; }
.inicio-hero--slider .inicio-hero__contenido {
  position      : absolute;
  left: 0; right: 0; bottom: 0;
  z-index       : 2;
  pointer-events: none;
}
.inicio-hero--slider .inicio-btn { pointer-events: auto; }
@media (max-width: 600px) {
  /* En móvil el slider es bajo y el texto no cabe encima: se pone debajo,
     sobre fondo oscuro, sin tapar la foto. */
  .inicio-hero--slider .inicio-hero__contenido { position: relative; padding-top: var(--space-lg); }
  .inicio-hero--slider .inicio-hero__velo { display: none; }
}

/* Velo en dos tiempos: oscuro abajo para el texto, casi nada arriba para que
   la foto respire. */
.inicio-hero__velo {
  position  : absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,26,26,.15) 0%, rgba(26,26,26,.55) 55%, rgba(26,26,26,.92) 100%);
}
.inicio-hero__contenido {
  position : relative;
  max-width: 1100px;
  width    : 100%;
  margin   : 0 auto;
  /* Abajo queda el hueco donde se montan las tarjetas de accesos (ver
     .inicio-accesos), para que el texto no quede debajo de ellas. */
  padding  : var(--space-xxl) var(--space-lg) calc(var(--inicio-solape) + var(--space-lg));
  box-sizing: border-box;
}
.inicio-hero__pretitulo {
  margin        : 0 0 var(--space-sm);
  font-size     : var(--text-sm);
  font-weight   : 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color         : var(--color-dorado-claro);
}
.inicio-hero__titulo {
  margin     : 0 0 var(--space-md);
  font-family: var(--font-titulo);
  font-size  : clamp(1.9rem, 4.5vw, 3.4rem);
  line-height: 1.1;
  color      : var(--color-blanco);
  text-wrap  : balance;
}
.inicio-hero__y { color: var(--color-dorado); }
.inicio-hero__lema {
  margin    : 0 0 var(--space-lg);
  max-width : 38rem;
  font-size : clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color     : rgba(255,255,255,.88);
}
.inicio-hero__botones { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }

.inicio-btn {
  display        : inline-flex;
  align-items    : center;
  padding        : 12px 22px;
  border-radius  : 999px;
  font-weight    : 700;
  text-decoration: none;
  transition     : transform .15s, background .15s, color .15s;
}
.inicio-btn:hover { transform: translateY(-1px); }
.inicio-btn--primario  { background: var(--color-dorado); color: var(--color-negro); }
.inicio-btn--primario:hover { background: var(--color-dorado-claro); color: var(--color-negro); }
.inicio-btn--perfilado { border: 2px solid rgba(255,255,255,.75); color: var(--color-blanco); }
.inicio-btn--perfilado:hover { border-color: var(--color-blanco); background: rgba(255,255,255,.1); color: var(--color-blanco); }

/* ── Cuerpo ───────────────────────────────────────────────── */
.inicio-cuerpo {
  max-width : 1100px;
  margin    : 0 auto;
  padding   : 0 var(--space-lg) var(--space-xxl);
  box-sizing: border-box;
}

/* Accesos rápidos: montados SOBRE el hero, como una bandeja que sale de la
   foto. El hero reserva ese mismo alto (--inicio-solape) bajo su texto. */
.inicio-accesos {
  display              : grid;
  grid-template-columns: repeat(4, 1fr);
  gap                  : var(--space-md);
  margin               : calc(-1 * var(--inicio-solape)) 0 var(--space-xxl);
  position             : relative;
  z-index              : 3;
}
.inicio-acceso {
  display        : flex;
  gap            : var(--space-sm);
  align-items    : flex-start;
  padding        : var(--space-md);
  background     : var(--card-bg);
  border         : 1px solid var(--color-gris-claro);
  border-radius  : var(--radius-lg);
  box-shadow     : var(--shadow-card);
  text-decoration: none;
  color          : var(--text);
  transition     : transform .15s, box-shadow .15s, border-color .15s;
}
.inicio-acceso:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--color-dorado); color: var(--text); }
.inicio-acceso__icono  { font-size: 1.5rem; line-height: 1; }
.inicio-acceso__texto  { display: flex; flex-direction: column; gap: 2px; }
.inicio-acceso__titulo { font-weight: 700; }
.inicio-acceso__desc   { font-size: var(--text-sm); color: var(--color-texto-suave); }

/* Secciones */
.inicio-seccion { margin: 0 0 var(--space-xxl); }
.inicio-seccion__cabecera {
  display        : flex;
  align-items    : flex-end;
  justify-content: space-between;
  gap            : var(--space-md);
  margin-bottom  : var(--space-lg);
  padding-bottom : var(--space-sm);
  border-bottom  : 2px solid var(--color-dorado);
}
.inicio-pretitulo {
  margin        : 0 0 2px;
  font-size     : var(--text-sm);
  font-weight   : 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color         : var(--color-dorado-hover);
}
.inicio-titulo {
  margin     : 0;
  font-family: var(--font-titulo);
  font-size  : clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
}
.inicio-vertodo {
  white-space    : nowrap;
  font-weight    : 700;
  font-size      : var(--text-sm);
  text-decoration: none;
  color          : var(--color-dorado-hover);
}
.inicio-vertodo:hover { text-decoration: underline; }

.inicio-panel {
  background   : var(--card-bg);
  border       : 1px solid var(--color-gris-claro);
  border-radius: var(--radius-lg);
  box-shadow   : var(--shadow-card);
  padding      : var(--space-md) var(--space-lg);
}

/* Cartelera: tres carteles en horizontal (16:9), que es como se hacen aquí. */
.inicio-carteles {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : var(--space-lg);
}
.inicio-cartel {
  display        : block;
  text-decoration: none;
  color          : var(--text);
  border-radius  : var(--radius-lg);
  overflow       : hidden;
  background     : var(--card-bg);
  border         : 1px solid var(--color-gris-claro);
  box-shadow     : var(--shadow-card);
  transition     : transform .15s, box-shadow .15s;
}
.inicio-cartel:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); color: var(--text); }
.inicio-cartel__img {
  display     : block;
  width       : 100%;
  aspect-ratio: 16 / 9;
  object-fit  : cover;
}
.inicio-cartel__titulo { display: block; padding: var(--space-sm) var(--space-md) var(--space-md); font-weight: 700; }

/* Noticias: la primera grande a la izquierda, las otras dos apiladas. */
.inicio-noticias {
  display              : grid;
  grid-template-columns: 1.4fr 1fr;
  grid-auto-rows       : 1fr;
  gap                  : var(--space-lg);
}
.inicio-noticia {
  display        : flex;
  gap            : var(--space-md);
  text-decoration: none;
  color          : var(--text);
  background     : var(--card-bg);
  border         : 1px solid var(--color-gris-claro);
  border-radius  : var(--radius-lg);
  box-shadow     : var(--shadow-card);
  overflow       : hidden;
  transition     : transform .15s, box-shadow .15s;
}
.inicio-noticia:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); color: var(--text); }
.inicio-noticia--destacada { grid-row: span 2; flex-direction: column; gap: 0; }
.inicio-noticia__img {
  flex      : 0 0 7rem;
  width     : 7rem;
  object-fit: cover;
  align-self: stretch;
}
.inicio-noticia--destacada .inicio-noticia__img { width: 100%; flex: 0 0 auto; aspect-ratio: 16 / 9; }
.inicio-noticia__img--vacia {
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-family    : var(--font-titulo);
  font-size      : 2.5rem;
  color          : var(--color-dorado);
  background     : var(--color-fondo);
  min-height     : 6rem;
}
.inicio-noticia__cuerpo { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); }
.inicio-noticia__meta   { font-size: var(--text-sm); color: var(--color-dorado-hover); font-weight: 700; }
.inicio-noticia__titulo { font-weight: 700; font-size: var(--text-lg); line-height: 1.25; }
.inicio-noticia--destacada .inicio-noticia__titulo { font-family: var(--font-titulo); font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.inicio-noticia__desc   { font-size: var(--text-sm); color: var(--color-texto-suave); }

.inicio-departamentos { margin: var(--space-lg) 0 0; font-size: var(--text-sm); line-height: 2; }
.inicio-departamentos a {
  display        : inline-block;
  margin         : 0 var(--space-xs) 0 0;
  padding        : 2px 10px;
  border         : 1px solid var(--color-gris-medio);
  border-radius  : 999px;
  text-decoration: none;
  color          : var(--text);
}
.inicio-departamentos a:hover { border-color: var(--color-dorado); color: var(--color-dorado-hover); }

/* Quiénes somos: el texto de Gutenberg, a todo el ancho y justificado. */
.inicio-quienes__texto { max-width: none; }
.inicio-quienes__texto p { text-align: justify; hyphens: auto; }
.inicio-quienes__texto p:empty { display: none; }
/* Red de seguridad: si el plugin colara igualmente el slider tras el
   contenido, que no se vea. */
.inicio-quienes__texto .n2-section-smartslider { display: none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .inicio-accesos  { grid-template-columns: repeat(2, 1fr); }
  .inicio { --inicio-solape: 2.75rem; }
  .inicio-noticias { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .inicio-noticia--destacada { grid-row: auto; }
}
@media (max-width: 600px) {
  .inicio-hero { min-height: 60vh; }
  /* En móvil las tarjetas van apiladas y no caben sobre la foto: debajo. */
  .inicio { --inicio-solape: 0px; }
  .inicio-accesos  { grid-template-columns: 1fr; margin-top: var(--space-lg); }
  .inicio-carteles { grid-template-columns: 1fr; }
  .inicio-seccion__cabecera { flex-direction: column; align-items: flex-start; }
  .inicio-noticia { flex-direction: column; gap: 0; }
  .inicio-noticia__img { width: 100%; flex: 0 0 auto; aspect-ratio: 16 / 9; }
}