/*
 * Las páginas de texto de la web (WO-422): las 7 secciones del menú (D-160)
 * que no tenía la 8080, Prensa (D-352), Preguntas frecuentes, la 404 y los
 * bloques que el plugin pone dentro de las páginas de Elementor (Contacto,
 * los cierres y el mensaje de reserva no disponible). Textos de WO-417 con
 * las correcciones de WO-420.
 *
 * Todo va bajo .mc-pagina y con los tokens de web.css (C-5, la fuente única):
 * aquí no se escribe ningún color. Se fija lo que el tema (Astra) pinta por
 * elemento (h1-h3, a, button, figure): una regla de elemento del tema gana a
 * la herencia (rules.md, «Web»).
 */

/* ---------- La página ---------- */

.mc-pagina {
  box-sizing: border-box;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--mc-espacio-4) var(--mc-espacio-2) var(--mc-espacio-6);
  color: var(--mc-color-tinta);
  font-family: var(--mc-letra-rotulo);
  font-size: 1rem;
  line-height: 1.5;
}

/* Dentro de una página de Elementor, el bloque va entre sus secciones */
.mc-pagina.mc-pagina--en-elementor {
  padding-top: var(--mc-espacio-5);
}

.mc-pagina h1,
.mc-pagina h2,
.mc-pagina h3 {
  color: inherit;
  font-family: var(--mc-letra-titular);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.mc-pagina p {
  margin: 0 0 var(--mc-espacio-2);
}

.mc-pagina a {
  color: var(--mc-color-tinta);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* El enlace en el texto, uno solo para toda la web (WO-436): la tinta,
   subrayado, y la tinta suave al pasar el ratón. Los mismos valores que el kit
   de Elementor (link_normal_color #36302B, link_hover_color #5D5752). */
.mc-pagina a:hover {
  color: var(--mc-color-tinta-suave);
}

.mc-pagina a:focus-visible,
.mc-pagina button:focus-visible,
.mc-pagina summary:focus-visible,
.mc-pagina [tabindex="-1"]:focus-visible {
  outline: var(--mc-ancho-foco) solid var(--mc-color-tinta);
  outline-offset: 2px;
}

.mc-pagina__cabecera {
  max-width: 48rem;
  margin: 0 0 var(--mc-espacio-5);
}

.mc-pagina .mc-pagina__titulo {
  margin: 0 0 var(--mc-espacio-2);
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.1;
}

.mc-pagina .mc-pagina__entradilla {
  max-width: 40rem;
  margin: 0 0 var(--mc-espacio-3);
  color: var(--mc-color-tinta-suave);
  font-size: 1.125rem;
  line-height: 1.5;
}

.mc-pagina .mc-pagina__subtitulo {
  margin: 0 0 var(--mc-espacio-2);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.2;
}

.mc-pagina__seccion {
  max-width: 48rem;
  margin: 0 0 var(--mc-espacio-5);
  padding-top: var(--mc-espacio-4);
  border-top: var(--mc-borde-topo-suave);
}

/* Una foto por página, a lo ancho del texto; la caja la pone la figura (3:2) */
.mc-pagina .mc-pagina__foto {
  max-width: 48rem;
  margin: 0 0 var(--mc-espacio-5);
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.mc-pagina .mc-pagina__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Botones (con el aspecto de las celdas de la barra) ---------- */

.mc-pagina .mc-pagina__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 3rem;
  margin: 0;
  padding: 0 1.25rem;
  border: var(--mc-borde);
  border-radius: 0;
  background: var(--mc-color-fondo);
  color: var(--mc-color-tinta);
  font: 700 var(--mc-letra-celda) / 1 var(--mc-letra-rotulo);
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: var(--mc-mayusculas);
  cursor: pointer;
}

.mc-pagina .mc-pagina__boton:hover,
.mc-pagina .mc-pagina__boton--principal {
  background: var(--mc-color-tinta);
  color: var(--mc-color-fondo);
}

.mc-pagina .mc-pagina__boton--principal:hover {
  background: var(--mc-color-fondo);
  color: var(--mc-color-tinta);
}

.mc-pagina__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mc-espacio-2);
  align-items: center;
}

/* ---------- Con reserva y sin ella (D-348) ----------
   Lo que lleva a reservar va marcado con data-mc-reservar y lo oculta web.css
   (la fuente única, WO-421) con el estado que menu.js pone en <html>. Su
   alternativa, cuando la reserva no está disponible, va con
   data-mc-sin-reserva: solo se ve con data-mc-reserva="no". Sin JS, la
   reserva se ve y la alternativa no. */
[data-mc-sin-reserva] {
  display: none;
}

html[data-mc-reserva="no"] [data-mc-sin-reserva] {
  display: block;
}

html[data-mc-reserva="no"] .mc-pagina__acciones[data-mc-sin-reserva] {
  display: flex;
}

/* Lo que el plugin añade dentro de un widget de Elementor (la reserva de la
   portada, la nota de Eventos y el enlace a los premios de Quiénes somos):
   toma el color y la letra del widget; solo se fijan los márgenes. */
.mc-elementor-reserva,
.mc-elementor-nota {
  margin: var(--mc-espacio-2) 0 0;
}

/* Las notas van sobre una franja con foto oscura (Eventos y Quiénes somos),
   como la reserva de la portada: en el color del fondo de la marca, igual que
   el texto blanco de su franja (WO-436). WO-481: y en Karla; colgadas del
   contenedor del widget y no de su texto, heredaban la letra del sistema de
   Astra (WO-479). */
.mc-elementor-nota {
  color: var(--mc-color-fondo);
  font-family: var(--mc-letra-rotulo);
}

.mc-elementor-reserva p {
  margin: 0 0 var(--mc-espacio-1);
}

/* La reserva de la portada va sobre la foto oscura de su franja: en el color
   del fondo de la marca, como su titular */
.mc-elementor-reserva {
  color: var(--mc-color-fondo);
}

/* .elementor delante: el enlace del kit (.elementor-kit-6 a) les ganaba, y
   sobre la foto oscura la tinta no se lee (WO-436) */
.elementor .mc-elementor-reserva a,
.elementor .mc-elementor-nota a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.mc-elementor-reserva h2 {
  margin: 0 0 var(--mc-espacio-2);
}

.mc-pagina__cierre {
  max-width: 48rem;
  margin: var(--mc-espacio-5) 0 0;
  padding-top: var(--mc-espacio-4);
  border-top: var(--mc-borde-topo-suave);
}

/* ---------- Por qué elegirnos: las cinco razones ---------- */

.mc-razones {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mc-espacio-3);
  margin: 0 0 var(--mc-espacio-5);
  padding: 0;
  list-style: none;
}

.mc-razones__razon {
  padding: var(--mc-espacio-3);
  border: var(--mc-borde-topo);
}

.mc-pagina .mc-razones__titulo {
  margin: 0 0 var(--mc-espacio-1);
  font-size: 1.5rem;
  line-height: 1.2;
}

@media (min-width: 48em) {
  .mc-razones {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Reconocimientos: las placas ---------- */

.mc-placas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mc-espacio-2);
  margin: 0 0 var(--mc-espacio-3);
  padding: 0;
  list-style: none;
}

.mc-placas__placa {
  margin: 0;
}

.mc-placas__placa img {
  display: block;
  width: 100%;
  height: auto;
}

.mc-premios {
  margin: 0 0 var(--mc-espacio-3);
  padding-left: 1.25rem;
}

@media (min-width: 48em) {
  .mc-placas {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ---------- Preguntas frecuentes: acordeón con <details> ----------
   Un <details> por pregunta: el navegador da el botón, su estado abierto o
   cerrado al lector de pantalla y el teclado, sin JS. */

.mc-faq__grupo {
  max-width: 48rem;
  margin: 0 0 var(--mc-espacio-4);
}

.mc-faq__pregunta {
  border-bottom: var(--mc-borde-topo-suave);
}

.mc-faq__pregunta:first-of-type {
  border-top: var(--mc-borde-topo-suave);
}

.mc-faq__pregunta summary {
  display: flex;
  gap: var(--mc-espacio-2);
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  padding: var(--mc-espacio-1) 0;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.mc-faq__pregunta summary::-webkit-details-marker {
  display: none;
}

.mc-faq__pregunta summary::after {
  flex: none;
  content: "+";
  font: 400 1.5rem / 1 var(--mc-letra-rotulo);
}

.mc-faq__pregunta[open] summary::after {
  content: "−";
}

.mc-faq__respuesta {
  padding: 0 0 var(--mc-espacio-2);
}

/* ---------- Prensa (D-352) ---------- */

/* WO-471: «Destacadas», las dos primeras tarjetas, con el estilo de las noticias y dos por fila desde 37,5em
   (las noticias siguen de tres en escritorio). Sustituye a los dos avisos con borde (.mc-prensa__sellos). */
.mc-prensa__destacadas {
  margin: 0 0 var(--mc-espacio-5);
  /* WO-490 (el usuario): un filete entre las destacadas y el resto, con la línea del marco (no la de las
     tarjetas) y el mismo aire arriba y abajo; sin tocar el HTML, que «Ver más» (prensa.js) no ve */
  padding-bottom: var(--mc-espacio-5);
  border-bottom: var(--mc-borde);
}

.mc-prensa__destacadas .mc-prensa__lista {
  margin-bottom: 0;
}

/* El logotipo del Solete, centrado y a su tamaño (140 × 168) sobre el fondo neutro de las fotos, sin recortar */
.mc-prensa__foto--sello {
  display: grid;
  place-items: center;
}

.mc-prensa__foto.mc-prensa__foto--sello img {
  width: 140px;
  height: 168px;
  object-fit: contain;
}

.mc-prensa__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mc-espacio-4) var(--mc-espacio-3);
  margin: 0 0 var(--mc-espacio-4);
  padding: 0;
  list-style: none;
}

.mc-prensa__noticia {
  display: flex;
  flex-direction: column;
  border: var(--mc-borde-topo);
  /* WO-537 (el usuario): la zona de texto (y el pie de foto) en blanco; la foto la tapa arriba */
  background: #ffffff;
}

.mc-prensa__figura {
  margin: 0;
}

.mc-prensa__foto {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--mc-color-topo-suave);
}

.mc-prensa__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mc-pagina .mc-prensa__credito {
  margin: 0;
  padding: var(--mc-espacio-1) var(--mc-espacio-2) 0;
  color: var(--mc-color-tinta-suave);
  font-size: 0.75rem;
  line-height: 1.4;
}

.mc-prensa__cuerpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--mc-espacio-1);
  padding: var(--mc-espacio-2);
}

.mc-pagina .mc-prensa__medio {
  margin: 0;
  font: var(--mc-letra-categoria);
  letter-spacing: var(--mc-tracking-categoria);
  text-transform: var(--mc-mayusculas);
}

.mc-pagina .mc-prensa__titular {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.25;
}

.mc-pagina .mc-prensa__titular a {
  text-decoration: none;
}

.mc-pagina .mc-prensa__titular a:hover {
  text-decoration: underline;
}

.mc-pagina .mc-prensa__resumen {
  margin: 0;
  color: var(--mc-color-tinta-suave);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.mc-pagina .mc-prensa__leer {
  margin: auto 0 0;
  padding-top: var(--mc-espacio-1);
  font-size: 0.875rem;
}

/* Carga progresiva (D-352): con JS, las que pasan de 6 no se pintan (ni
   descargan su foto) mientras prensa.js no ha arrancado; después las oculta
   él con hidden. Sin JS se ven todas. */
@media (scripting: enabled) {
  [data-mc-prensa-lista]:not([data-mc-prensa-iniciada]) > [data-mc-prensa-noticia]:nth-child(n + 7) {
    display: none;
  }
}

.mc-prensa__mas {
  margin: 0 0 var(--mc-espacio-5);
  text-align: center;
}

@media (min-width: 37.5em) {
  .mc-prensa__lista {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .mc-prensa__lista {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 37.5em) {
  .mc-prensa__lista.mc-prensa__lista--destacadas {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- 404 ---------- */

.mc-pagina--404 {
  min-height: 50vh;
}

/* hidden gana a cualquier display de una clase del bloque (rules.md, «Web») */
.mc-pagina [hidden],
.mc-pagina[hidden] {
  display: none;
}

/* WO-422b (ortografía de la RAE): los subtítulos de las tarjetas de la
   portada se escriben en minúscula de frase y Elementor los pintaba con
   mayúscula en cada palabra (text-transform: capitalize en post-10.css). Se
   pintan como están escritos. */
body.mc-con-fragmentos .elementor-element.elementor-element-7cb9dcb9 .elementor-heading-title,
body.mc-con-fragmentos .elementor-element.elementor-element-0cd5980 .elementor-heading-title,
body.mc-con-fragmentos .elementor-element.elementor-element-988456c .elementor-heading-title,
body.mc-con-fragmentos .elementor-element.elementor-element-837607c .elementor-heading-title,
body.mc-con-fragmentos .elementor-element.elementor-element-1e46a8f .elementor-heading-title {
  text-transform: none;
}

/* WO-537 (WO-524d): la foto de media sección es un <img> con su alt (los fondos CSS no se indexan) que llena su
   columna, al 50 % y a la altura del texto, recortada con object-fit; en el móvil, apilada, de al menos 240 px. */
.elementor .mc-foto-media > .elementor-widget-wrap {
  position: relative;
  min-height: 240px;
}
.elementor .mc-foto-media .elementor-widget-image {
  position: absolute;
  inset: 0;
  margin: 0;
}
.elementor .mc-foto-media .elementor-widget-image .elementor-widget-container {
  height: 100%;
}
.elementor .mc-foto-media .elementor-widget-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}