/*
 * Portadas fotográficas de categoría.
 * Toman de Stands la foto envolvente y el contraste editorial, sin convertir
 * cada ruta en una copia literal ni alterar los cuerpos de sus páginas.
 */
:root {
  --rp-portada-tinta: #17231f;
  --rp-portada-papel: #fffdf8;
  --rp-portada-oro: var(--marca);
  --rp-velo-97: color-mix(in srgb, var(--rp-portada-tinta) 97%, transparent);
  --rp-velo-95: color-mix(in srgb, var(--rp-portada-tinta) 95%, transparent);
  --rp-velo-94: color-mix(in srgb, var(--rp-portada-tinta) 94%, transparent);
  --rp-velo-88: color-mix(in srgb, var(--rp-portada-tinta) 88%, transparent);
  --rp-velo-82: color-mix(in srgb, var(--rp-portada-tinta) 82%, transparent);
  --rp-velo-80: color-mix(in srgb, var(--rp-portada-tinta) 80%, transparent);
  --rp-velo-76: color-mix(in srgb, var(--rp-portada-tinta) 76%, transparent);
  --rp-velo-48: color-mix(in srgb, var(--rp-portada-tinta) 48%, transparent);
  --rp-velo-46: color-mix(in srgb, var(--rp-portada-tinta) 46%, transparent);
  --rp-velo-42: color-mix(in srgb, var(--rp-portada-tinta) 42%, transparent);
  --rp-velo-38: color-mix(in srgb, var(--rp-portada-tinta) 38%, transparent);
  --rp-velo-36: color-mix(in srgb, var(--rp-portada-tinta) 36%, transparent);
  --rp-velo-26: color-mix(in srgb, var(--rp-portada-tinta) 26%, transparent);
  --rp-velo-20: color-mix(in srgb, var(--rp-portada-tinta) 20%, transparent);
  --rp-velo-12: color-mix(in srgb, var(--rp-portada-tinta) 12%, transparent);
  --rp-velo-08: color-mix(in srgb, var(--rp-portada-tinta) 8%, transparent);
  --rp-papel-91: color-mix(in srgb, var(--rp-portada-papel) 91%, transparent);
  --rp-papel-90: color-mix(in srgb, var(--rp-portada-papel) 90%, transparent);
  --rp-papel-84: color-mix(in srgb, var(--rp-portada-papel) 84%, transparent);
  --rp-papel-82: color-mix(in srgb, var(--rp-portada-papel) 82%, transparent);
  --rp-papel-40: color-mix(in srgb, var(--rp-portada-papel) 40%, transparent);
  --rp-borde-papel: color-mix(in srgb, var(--rp-portada-papel) 23%, transparent);
}

body.portal :is(.hub-intro:not(.ficha-portada):not(.hub-intro--indice), .guia-hero, .ferias-pagina--indice .ferias-masthead,
  .recintos-pagina--indice .recintos-portada, .industria-ficha .industria-portada) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 1.125rem;
  color: var(--rp-portada-papel);
  background: var(--rp-portada-tinta);
}

/* Hubs editoriales: calendario, fundamentos, materiales y otras rutas. */
body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: clamp(34rem, 46vw, 42rem);
  margin: clamp(1rem, 2vw, 1.6rem) auto 0;
  padding: clamp(2.25rem, 3.2vw, 3rem);
}

body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice)::before,
body.portal .guia-hero::before,
body.portal .ferias-masthead::after,
body.portal .recintos-portada::before,
body.portal .industria-portada::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, var(--rp-velo-94) 0%, var(--rp-velo-82) 34%, var(--rp-velo-38) 69%, var(--rp-velo-08) 100%),
    linear-gradient(0deg, var(--rp-velo-46), transparent 32%);
  pointer-events: none;
}

body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) .hub-intro-copy,
body.portal .ferias-masthead-copy,
body.portal .recintos-portada-copy,
body.portal .industria-portada-copy,
body.portal .guia-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 54rem;
}

body.portal .hub-intro-visual:not(.ficha-portada-visual),
body.portal .guia-hero-imagen,
body.portal .ferias-masthead-visual,
body.portal .recintos-portada-visual,
body.portal .industria-portada-visual {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: var(--rp-portada-tinta);
  box-shadow: none;
  transform: none;
}

body.portal :is(.hub-intro-visual:not(.ficha-portada-visual), .guia-hero-imagen, .ferias-masthead-visual,
  .recintos-portada-visual, .industria-portada-visual) picture,
body.portal :is(.hub-intro-visual:not(.ficha-portada-visual), .guia-hero-imagen, .ferias-masthead-visual,
  .recintos-portada-visual, .industria-portada-visual) img {
  display: block;
  width: 100%;
  height: 100%;
}

body.portal :is(.hub-intro-visual:not(.ficha-portada-visual), .guia-hero-imagen, .ferias-masthead-visual,
  .recintos-portada-visual, .industria-portada-visual) img {
  object-fit: cover;
  object-position: center 52%;
  transition: transform .8s cubic-bezier(.2,.7,.25,1);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.portal :is(.hub-intro:not(.ficha-portada):not(.hub-intro--indice), .guia-hero, .ferias-pagina--indice .ferias-masthead,
    .recintos-pagina--indice .recintos-portada, .industria-ficha .industria-portada):hover
    :is(.hub-intro-visual:not(.ficha-portada-visual), .guia-hero-imagen, .ferias-masthead-visual,
      .recintos-portada-visual, .industria-portada-visual) img {
    transform: scale(1.025);
  }
}

/* La foto de portada acompaña el scroll; la capa de lectura permanece fija. */
body.portal :is(.hub-intro-visual, .guia-hero-imagen, .ferias-masthead-visual,
  .recintos-portada-visual, .industria-portada-visual) img.portal-parallax-img {
  transform: translate3d(0, var(--portal-parallax-y, 0px), 0) scale(1.12);
  transition: none;
}

@media (max-width: 52rem) {
  body.portal :is(.hub-intro-visual, .guia-hero-imagen, .ferias-masthead-visual,
    .recintos-portada-visual, .industria-portada-visual) img.portal-parallax-img {
    transform: translate3d(0, var(--portal-parallax-y, 0px), 0) scale(1.075);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.portal :is(.hub-intro-visual, .guia-hero-imagen, .ferias-masthead-visual,
    .recintos-portada-visual, .industria-portada-visual) img.portal-parallax-img { transform: none; }
}

body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) .hub-titulo,
body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) .hub-bajada,
body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) .hub-resumen,
body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) .hub-resumen strong,
body.portal .guia-hero h1,
body.portal .ferias-masthead h1,
body.portal .recintos-portada h1,
body.portal .industria-portada-copy .pagina-titulo {
  color: var(--rp-portada-papel);
}

body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) .hub-titulo {
  max-width: 17ch;
  margin-bottom: .95rem;
  font-size: clamp(2rem, calc(1.5rem + 2.2vw), 3.25rem);
  line-height: 1.01;
}

body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) .hub-intro-copy { width: min(100%, 52rem); }
body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) .hub-bajada { max-width: 42rem; color: var(--rp-papel-90); font-size: 1.0625rem; line-height: 1.58; }
body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) .hub-resumen { color: var(--rp-papel-82); font-size: .8125rem; }
body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) .ruta-migas,
body.portal .guia-hero .guia-migas { color: var(--rp-papel-82); font-size: .8125rem; }
body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) .ruta-migas a,
body.portal .guia-hero .guia-migas a { color: inherit; }
body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) .ruta-migas a:hover,
body.portal .guia-hero .guia-migas a:hover { color: var(--rp-portada-papel); }
body.portal .industria-indice-intro .industria-indice-imagen img { object-position: center 46%; }

/* Guías prácticas: conservan bajada, navegación y meta; gana la imagen. */
body.portal .guia-hero {
  display: flex;
  min-height: clamp(34rem, 46vw, 42rem);
  align-items: center;
  padding: clamp(2.1rem, 3.2vw, 3rem);
}

body.portal .guia-hero::before {
  background: linear-gradient(90deg, var(--rp-velo-95) 0%, var(--rp-velo-82) 38%, var(--rp-velo-42) 72%, var(--rp-velo-12) 100%),
    linear-gradient(0deg, var(--rp-velo-42), transparent 34%);
}

body.portal .guia-hero-copy { width: min(100%, 52rem); padding: 0; }
body.portal .guia-hero h1 { max-width: 17ch; font-size: clamp(2rem, calc(1.5rem + 2.2vw), 3.25rem); line-height: 1.01; }
body.portal .guia-hero .guia-bajada { max-width: 43rem; color: var(--rp-papel-91); font-size: 1.0625rem; }
body.portal .guia-hero .guia-hero-meta { gap: .6rem 1rem; color: var(--rp-papel-84); font-size: .8125rem; }
body.portal .guia-hero .guia-hero-meta span + span { border-color: var(--rp-papel-40); }
body.portal .guia-hero-imagen::after { border: 0; border-radius: inherit; }
body.portal .guia-hero-imagen figcaption { right: 1rem; bottom: 1rem; max-width: min(32rem, 52%); padding: .5rem .7rem; border-radius: .5rem; font-size: .8125rem; }

/* Agenda ferial: la fecha próxima queda como tarjeta útil sobre la foto. */
body.portal .ferias-pagina--indice .ferias-masthead {
  min-height: clamp(35rem, 48vw, 43rem);
  padding: clamp(2rem, 5.2vw, 4.6rem);
  background: var(--rp-portada-tinta);
}

body.portal .ferias-pagina--indice .ferias-masthead::before { display: none; }
body.portal .ferias-pagina--indice .ferias-masthead::after { z-index: -1; }
body.portal .ferias-masthead-visual figcaption { position: absolute; right: 1rem; bottom: 1rem; max-width: min(31rem, 48%); padding: .5rem .7rem; border: 1px solid var(--rp-borde-papel); border-radius: .5rem; color: var(--rp-portada-papel); background: var(--rp-velo-76); }
body.portal .ferias-masthead-copy { max-width: 54rem; }
body.portal .ferias-masthead h1 { max-width: 16ch; font-size: clamp(2rem, calc(1.5rem + 2.2vw), 3.25rem); }
body.portal .ferias-intro { max-width: 45rem; color: var(--rp-papel-90); font-size: 1.0625rem; }
body.portal .ferias-atajos { color: var(--rp-papel-82); font-size: .8125rem; }
body.portal .ferias-atajo { font-size: .875rem; }
body.portal .ferias-siguiente { z-index: 1; }

/* Recintos: el aviso de criterio permanece visible, sin sugerir una sede. */
body.portal .recintos-pagina--indice .recintos-portada {
  min-height: clamp(35rem, 48vw, 43rem);
  padding: clamp(2rem, 5.2vw, 4.6rem);
  background: var(--rp-portada-tinta);
}

body.portal .recintos-pagina--indice .recintos-portada::after { display: none; }
body.portal .recintos-portada::before { background: linear-gradient(90deg, var(--rp-velo-94) 0%, var(--rp-velo-80) 38%, var(--rp-velo-36) 76%, var(--rp-velo-12) 100%), linear-gradient(0deg, var(--rp-velo-48), transparent 34%); }
body.portal .recintos-portada-copy { max-width: 54rem; }
body.portal .recintos-portada h1 { max-width: 15ch; font-size: clamp(2rem, calc(1.5rem + 2.2vw), 3.25rem); }
body.portal .recintos-portada-copy > p { max-width: 43rem; color: var(--rp-papel-90); font-size: 1.0625rem; }
body.portal .recintos-portada-nota { z-index: 1; }
body.portal .recintos-portada-visual figcaption { position: absolute; right: 1rem; bottom: 1rem; max-width: min(31rem, 48%); padding: .5rem .7rem; border: 1px solid var(--rp-borde-papel); border-radius: .5rem; color: var(--rp-portada-papel); background: var(--rp-velo-76); }

/* Las páginas de industria heredan la misma escala fotográfica del índice. */
body.portal .industria-ficha .industria-portada {
  display: flex;
  width: 100%;
  min-height: clamp(34rem, 46vw, 42rem);
  align-items: center;
  margin: clamp(1rem, 2vw, 1.6rem) auto 0;
  padding: 3rem;
}

body.portal .industria-portada-copy { width: min(100%, 52rem); }
body.portal .industria-portada-copy .pagina-titulo { max-width: 17ch; margin: 0 0 1rem; font-size: clamp(2rem, calc(1.5rem + 2.2vw), 3.25rem); line-height: 1.01; }
body.portal .industria-portada-copy .pagina-lectura,
body.portal .industria-portada-copy .pagina-bajada { max-width: 43rem; color: var(--rp-papel-91); font-size: 1.0625rem; }
body.portal .industria-portada-copy .lectura-etiqueta { color: var(--rp-portada-oro); font-size: .8125rem; }
body.portal .industria-portada-copy .industria-volver { color: var(--rp-portada-papel); font-size: .875rem; }
body.portal .industria-portada-copy .ruta-migas { color: var(--rp-papel-82); font-size: .8125rem; }
body.portal .industria-portada-copy .ruta-migas a { color: inherit; }
body.portal .industria-portada-foto { aspect-ratio: auto; }
body.portal .industria-portada-foto img { object-position: center 48%; }

@media (max-width: 58rem) {
  body.portal .ferias-pagina--indice .ferias-masthead,
  body.portal .recintos-pagina--indice .recintos-portada { min-height: 38rem; }
  body.portal .ferias-pagina--indice .ferias-masthead { grid-template-columns: minmax(0, 1fr) minmax(14rem, .6fr); padding: 2rem; }
  body.portal .recintos-pagina--indice .recintos-portada { grid-template-columns: 1fr minmax(13rem, .43fr); padding: 2rem; }
}

@media (max-width: 48rem) {
  body.portal :is(.hub-intro:not(.ficha-portada):not(.hub-intro--indice), .guia-hero, .industria-ficha .industria-portada) {
    min-height: 42rem;
    align-items: end;
    padding: 2rem 1.2rem 4.8rem;
    border-radius: 1.125rem;
  }

  body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) .hub-intro-copy,
  body.portal .guia-hero-copy,
  body.portal .industria-portada-copy { width: 100%; }

  body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) .hub-titulo,
  body.portal .guia-hero h1,
  body.portal .industria-portada-copy .pagina-titulo { max-width: 17ch; font-size: clamp(2rem, calc(1.5rem + 2.2vw), 3.25rem); }

  body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) .ruta-migas,
  body.portal .guia-hero .guia-migas,
  body.portal .industria-portada-copy .ruta-migas { margin-bottom: .8rem; }

  body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) .hub-bajada,
  body.portal .guia-hero .guia-bajada,
  body.portal .industria-portada-copy .pagina-lectura,
  body.portal .industria-portada-copy .pagina-bajada { font-size: 1rem; }

  body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice)::before,
  body.portal .guia-hero::before,
  body.portal .industria-portada::before { background: linear-gradient(0deg, var(--rp-velo-97) 0%, var(--rp-velo-88) 43%, var(--rp-velo-26) 100%); }

  body.portal .hub-intro-visual:not(.ficha-portada-visual) img,
  body.portal .guia-hero-imagen img,
  body.portal .industria-portada-visual img { object-position: 58% center; }

  body.portal .guia-hero-imagen figcaption { right: .65rem; bottom: .65rem; max-width: 76%; }
  body.portal .guia-hero .guia-hero-meta { gap: .5rem .75rem; }
  body.portal .guia-hero .guia-hero-meta span + span { padding-left: .75rem; }

  body.portal .ferias-pagina--indice .ferias-masthead,
  body.portal .recintos-pagina--indice .recintos-portada { min-height: 43rem; align-content: end; gap: 1.2rem; padding: 2rem 1.35rem 4.8rem; border-radius: 1.125rem; }
  body.portal .ferias-pagina--indice .ferias-masthead { grid-template-columns: 1fr; }
  body.portal .recintos-pagina--indice .recintos-portada { grid-template-columns: 1fr; }
  body.portal .ferias-masthead h1,
  body.portal .recintos-portada h1 { max-width: 17ch; font-size: clamp(2rem, calc(1.5rem + 2.2vw), 3.25rem); }
  body.portal .ferias-intro,
  body.portal .recintos-portada-copy > p { font-size: 1rem; }
  body.portal .ferias-pagina--indice .ferias-masthead::after,
  body.portal .recintos-portada::before { background: linear-gradient(0deg, var(--rp-velo-97) 0%, var(--rp-velo-88) 46%, var(--rp-velo-20) 100%); }
  body.portal .ferias-siguiente { width: min(100%, 25rem); min-height: 13rem; justify-self: start; transform: none; }
  body.portal .recintos-portada-nota { width: min(100%, 25rem); justify-self: start; }
  body.portal .ferias-masthead-visual img,
  body.portal .recintos-portada-visual img { object-position: 58% center; }
  body.portal .ferias-masthead-visual figcaption,
  body.portal .recintos-portada-visual figcaption { right: .65rem; bottom: .65rem; max-width: 78%; }
}

@media (prefers-reduced-motion: reduce) {
  body.portal :is(.hub-intro-visual:not(.ficha-portada-visual), .guia-hero-imagen, .ferias-masthead-visual,
    .recintos-portada-visual, .industria-portada-visual) img { transition: none; }
}

@media (max-width: 52rem) {
  body.portal .hub-intro:not(.ficha-portada):not(.hub-intro--indice) {
    width: calc(100% - 2rem);
  }

  /* La ficha ya reserva el margen exterior; evita descontarlo por segunda vez
     en la portada fotográfica de una industria. */
  body.portal .industria-ficha .industria-portada {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}