/* Sistema de ilustraciones vectoriales propio: trazo limpio, acentos cálidos
   y objetos reconocibles de la planificación de marketing. */
.ilustracion {
  display: inline-block;
  flex: none;
  overflow: visible;
  color: currentColor;
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1);
  stroke-width: 3.2;
}
.ilustracion .trazo-acento { stroke: var(--acento-2); }
.ilustracion .trazo-coral { stroke: var(--coral-oscuro); }
.ilustracion .trazo-verde { stroke: var(--marca-profundo); }
.ilustracion .masa-acento { fill: var(--acento); fill-opacity: .24; stroke: var(--acento-2); }
.ilustracion .masa-coral { fill: var(--coral); fill-opacity: .2; stroke: var(--coral-oscuro); }
.ilustracion .masa-verde { fill: var(--marca); fill-opacity: .18; stroke: var(--marca-profundo); }
.ilustracion .indicador-vertical { transform-origin: 12px 12px; transition: transform 180ms ease; }

/* El dibujo acompaña el rótulo: nunca lo reemplaza ni añade texto ornamental. */
body.portal .nav-explorar-icono { width: 1.75rem; height: 1.75rem; color: var(--coral-oscuro); stroke-width: 4.2; }
body.portal .nav-explorar-titulo a:hover .ilustracion,
body.portal .nav-explorar-titulo a:focus-visible .ilustracion { transform: translateY(-1px) rotate(-2deg); }
body.portal .nav-explorar-titulo a:hover .trazo-coral,
body.portal .nav-explorar-titulo a:focus-visible .trazo-coral { stroke: var(--marca-profundo); }

body.portal .indice-ruta-etiqueta { display: inline-flex; min-width: 0; align-items: center; gap: .65rem; }
body.portal .indice-ruta-icono { width: 1.65rem; height: 1.65rem; color: var(--acento-2); stroke-width: 4; }
body.portal .indice-ruta-detalle > summary:hover .ilustracion,
body.portal .indice-ruta-detalle > summary:focus-visible .ilustracion { transform: translateY(-1px) rotate(-2deg); }
body.portal .indice-ruta-detalle > summary .trazo-coral { stroke: var(--marca-profundo); }

/* Tres decisiones centrales de portada: iconos más grandes, no medallones. */
body.portal .decision-icon { top: 1rem; right: 1.15rem; width: 4.25rem; height: 4.25rem; stroke-width: 3; }
body.portal .decision-card:hover .decision-icon,
body.portal .decision-card:focus-visible .decision-icon { transform: translateY(-2px) rotate(-2deg); }
body.portal .decision-card--coral .trazo-acento { stroke: var(--papel-alto); }
body.portal .decision-card--coral .trazo-coral { stroke: var(--acento); }
body.portal .decision-card--blue .trazo-acento { stroke: var(--acento); }
body.portal .decision-card--blue .trazo-coral { stroke: var(--coral); }

/* Icono de categoría junto al título, manteniendo la foto como imagen principal. */
body.portal .ruta-editorial h2 { display: flex; align-items: flex-start; gap: .65rem; }
body.portal .ruta-editorial-icono { width: 2.2rem; height: 2.2rem; margin-top: -.1rem; color: var(--coral-oscuro); stroke-width: 3.8; }
body.portal .ruta-editorial h2 a { min-width: 0; }
body.portal .ruta-editorial:hover .ruta-editorial-icono,
body.portal .ruta-editorial:focus-within .ruta-editorial-icono { transform: translateY(-1px) rotate(-2deg); }

/* La misma marca editorial aparece en cada ficha enlazada desde un archivo. */
body.portal .tarjeta-seccion { gap: .42rem; }
body.portal .tarjeta-seccion-icono { width: 1.28rem; height: 1.28rem; color: var(--coral-oscuro); stroke-width: 4.8; }
body.portal .tarjeta:hover .tarjeta-seccion-icono,
body.portal .tarjeta:focus-within .tarjeta-seccion-icono { transform: translateY(-1px); }

/* Los rubros tienen una señal ilustrada propia además de su foto editorial. */
body.portal .industria-tarjeta-titulo { display: flex; align-items: flex-start; gap: .6rem; }
body.portal .industria-tarjeta-icono { width: 1.4rem; height: 1.4rem; color: var(--coral-oscuro); stroke-width: 3.8; }
body.portal .industria-tarjeta-titulo a { min-width: 0; }
body.portal .industria-tarjeta:hover .industria-tarjeta-icono,
body.portal .industria-tarjeta:focus-within .industria-tarjeta-icono { transform: translateY(-1px) rotate(-2deg); }
body.portal .industria-rail-label { display: inline-flex; min-width: 0; align-items: center; gap: .6rem; }
body.portal .industria-rail-icono { width: 1.4rem; height: 1.4rem; color: var(--coral-oscuro); stroke-width: 3.4; }
body.portal .industria-rail a:hover .industria-rail-icono,
body.portal .industria-rail a:focus-visible .industria-rail-icono { transform: translateY(-1px) rotate(-2deg); }
body.portal .industria-rail-flecha { flex: none; }
body.portal .industria-rail-flecha .senal-icono { width: .82em; height: .82em; min-width: .82em; }

/* No hay iniciales de relleno: cada ausencia de foto recibe el dibujo de su tema. */
body.portal .tarjeta-imagen-respaldo,
body.portal .industria-tarjeta-respaldo {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  color: var(--coral-oscuro);
  background: linear-gradient(135deg, var(--papel-2), var(--papel-alto));
}
body.portal .tarjeta-imagen-respaldo { min-height: 12rem; border-bottom: 1px solid var(--linea); }
body.portal .tarjeta-imagen-respaldo-icono { width: clamp(4rem, 8vw, 6rem); height: auto; stroke-width: 2.8; }
body.portal .industria-tarjeta-respaldo { position: absolute; inset: 0; }
body.portal .industria-tarjeta-respaldo-icono { width: clamp(5rem, 12vw, 8rem); height: auto; color: var(--coral-oscuro); stroke-width: 2.8; }

/* Indicadores de interacción ilustrados; las superficies no se convierten en medallones. */
body.portal .nav-explorar-flecha,
body.portal .nav-subcategorias-flecha {
  display: grid;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  border: 0;
  transform: none;
}
body.portal .nav-explorar-flecha .ilustracion,
body.portal .nav-subcategorias-flecha .ilustracion { width: 100%; height: 100%; stroke-width: 3; transition: color 180ms ease; }
body.portal .nav-explorar-detalle[open] > .nav-explorar-resumen .indicador-vertical,
body.portal .nav-subcategorias[open] > summary .indicador-vertical,
body.portal .guia-faq[open] .indicador-vertical,
body.portal .recinto-nota-cifras[open] .indicador-vertical,
body.portal .recinto-faq details[open] .indicador-vertical { transform: scaleY(0); }

body.portal .hotel-recomendado-icono {
  display: block;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: .75rem;
  border: 0;
  border-radius: 0;
  color: var(--marca-profundo);
  background: transparent;
}
body.portal .hotel-recomendado-icono .ilustracion { width: 100%; height: 100%; stroke-width: 3.8; }
body.portal .guia-nota-sello { display: block; width: 2.7rem; height: 2.7rem; border-radius: 0; color: var(--marca-profundo); background: transparent; }
body.portal .guia-nota-sello .ilustracion { width: 100%; height: 100%; stroke-width: 3.7; }
body.portal .lanzamiento-hito-check { display: grid; width: 1.4rem; height: 1.4rem; place-items: center; }
body.portal .lanzamiento-hito-check .ilustracion { width: 100%; height: 100%; color: var(--guia-acento); stroke-width: 4.2; }

body.portal .ferias-metodo-icono,
body.portal .feria-realizada-sello { display: grid; place-items: center; border: 0; border-radius: 0; background: transparent; }
body.portal .ferias-metodo-icono { width: 2.25rem; height: 2.25rem; color: var(--ok); }
body.portal .ferias-metodo-icono .ilustracion { width: 100%; height: 100%; stroke-width: 3.6; }
body.portal .feria-realizada-sello { width: 1.8rem; height: 1.8rem; color: var(--ok); }
body.portal .feria-realizada-sello .ilustracion { width: 100%; height: 100%; stroke-width: 4.2; }
body.portal .feria-alerta-icono { display: block; width: 1.8rem; height: 1.8rem; border-radius: 0; color: var(--mat); background: transparent; }
body.portal .feria-alerta-icono .ilustracion { width: 100%; height: 100%; stroke-width: 3.8; }
body.portal .feria-audiencia-ilustracion { width: 5rem; height: 5rem; color: var(--coral-oscuro); }
body.portal .feria-audiencia-ilustracion .ilustracion { width: 100%; height: 100%; stroke-width: 3.4; }

body.portal .stands-selector-ilustracion { display: block; flex: 0 0 4.6rem; width: 4.6rem; color: var(--stand-ink); }
body.portal .stands-selector-ilustracion .ilustracion { width: 100%; height: auto; stroke-width: 3.2; }
body.portal .stands-recorrido { position: relative; }
body.portal .stands-recorrido-ilustracion { z-index: 1; display: grid; width: 2.75rem; aspect-ratio: 1; place-items: center; color: var(--stand-ink); background: var(--stand-paper); }
body.portal .stands-recorrido-ilustracion .ilustracion { width: 2.2rem; height: 2.2rem; stroke-width: 3.8; }

body.portal .recintos-portada-nota-icono { display: block; width: 3.2rem; height: 3.2rem; color: var(--marca-profundo); stroke-width: 3.3; }
body.portal .recintos-criterio-icono { width: 2.2rem; height: 2.2rem; color: var(--marca-profundo); stroke-width: 3.7; }
body.portal .recinto-ubicacion-icono { width: 1.25rem; height: 1.25rem; flex: none; color: var(--marca-profundo); stroke-width: 4; }
body.portal .recinto-stands-icono .ilustracion { display: block; width: clamp(2.5rem, 5vw, 4rem); color: var(--acento); stroke-width: 3.2; }
body.portal .guia-faq-indicador { display: grid; width: 1.2rem; height: 1.2rem; place-items: center; color: var(--guia-acento); }
body.portal .guia-faq-indicador .ilustracion { width: 100%; height: 100%; stroke-width: 3.8; }
body.portal .recinto-detalle-signo { display: grid; width: 1.35rem; height: 1.35rem; flex: none; place-items: center; border: 0; border-radius: 0; }
body.portal .recinto-detalle-signo::before,
body.portal .recinto-detalle-signo::after { content: none; }
body.portal .recinto-detalle-signo .ilustracion { width: 100%; height: 100%; stroke-width: 3.2; }

/* Flechas de acción: un mismo dibujo, con rotación semántica para atrás y abajo. */
body.portal .senal-icono { display: inline-block; width: 1em; height: 1em; min-width: 1em; margin-left: .12em; overflow: visible; vertical-align: -.14em; color: currentColor; stroke-width: 3; transition: transform 180ms ease; }
body.portal .senal-flecha--izquierda { transform: rotate(180deg); }
body.portal .senal-flecha--abajo { transform: rotate(90deg); }
body.portal a:hover .senal-icono,
body.portal a:focus-visible .senal-icono { transform: translateX(.1em); }
body.portal a:hover .senal-flecha--izquierda,
body.portal a:focus-visible .senal-flecha--izquierda { transform: rotate(180deg) translateX(.1em); }
body.portal a:hover .senal-flecha--abajo,
body.portal a:focus-visible .senal-flecha--abajo { transform: rotate(90deg) translateX(.1em); }
body.portal .ferias-busqueda-icono { width: 1.15rem; height: 1.15rem; stroke-width: 2.6; }
body.portal .feria-meta-estado-icono { display: inline-grid; width: 1.15rem; height: 1.15rem; flex: none; place-items: center; }
body.portal .feria-meta-estado-icono .ilustracion { width: 100%; height: 100%; stroke-width: 3.8; }
body.portal .feria-pendiente-estado::before { content: none; }
body.portal .feria-pendiente-estado-icono { display: inline-grid; width: 1rem; height: 1rem; flex: none; place-items: center; }
body.portal .feria-pendiente-estado-icono .ilustracion { width: 100%; height: 100%; stroke-width: 3.8; }
body.portal .recinto-evento-estado::before { content: none; }
body.portal .recinto-evento-estado-icono { display: inline-grid; width: 1rem; height: 1rem; flex: none; place-items: center; }
body.portal .recinto-evento-estado-icono .ilustracion { width: 100%; height: 100%; stroke-width: 3.8; }
body.portal .recinto-discrepancia-marca { display: block; width: 1.5rem; height: 1.5rem; border: 0; border-radius: 0; }
body.portal .recinto-discrepancia-marca::before,
body.portal .recinto-discrepancia-marca::after { content: none; }
body.portal .recinto-discrepancia-marca .ilustracion { width: 100%; height: 100%; color: var(--coral-oscuro); stroke-width: 3.8; }

/* Desplegables, índice contextual y preguntas frecuentes. */
body.portal .indice-resumen-icono { display: grid; position: relative; width: 1.55rem; height: 1.55rem; flex: none; place-items: center; border: 0; border-radius: 0; color: var(--marca-profundo); }
body.portal .indice-resumen-icono::before,
body.portal .indice-resumen-icono::after,
body.portal .indice-ruta-detalle > summary::after,
body.portal .indice-tecnica > summary::after { content: none; }
body.portal .indice-resumen-icono .ilustracion { width: 100%; height: 100%; stroke-width: 3; }
body.portal .indice-ruta-indicador { display: grid; width: 1.05rem; height: 1.05rem; flex: none; place-items: center; color: var(--marca-profundo); }
body.portal .indice-ruta-indicador .ilustracion { width: 100%; height: 100%; stroke-width: 3; }
body.portal .indice-desplegable[open] .indice-resumen-icono .indicador-vertical,
body.portal .indice-ruta-detalle[open] .indice-ruta-indicador .indicador-vertical,
body.portal .indice-tecnica[open] .indice-ruta-indicador .indicador-vertical,
body.portal .stands-faq-lista details[open] .indicador-vertical,
body.portal .actualidad-card-lectura[open] .indicador-vertical { transform: scaleY(0); }
body.portal .stands-faq-lista summary > .stands-faq-indicador { position: static; display: grid; width: 1.3rem; height: 1.3rem; flex: 0 0 1.3rem; place-items: center; border: 0; border-radius: 0; color: var(--stand-ink); background: transparent; }
body.portal .stands-faq-lista summary > .stands-faq-indicador::before,
body.portal .stands-faq-lista summary > .stands-faq-indicador::after { content: none; }
body.portal .stands-faq-indicador .ilustracion { width: 100%; height: 100%; stroke-width: 3.4; }
body.portal .stands-brief-check .ilustracion { width: 100%; height: 100%; opacity: 0; color: var(--stand-white); stroke-width: 4; transition: opacity 160ms ease; }
body.portal .stands-brief-item input:checked + .stands-brief-check .ilustracion { opacity: 1; }
body.portal .actualidad-card-lectura summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; }
body.portal .actualidad-card-lectura summary::-webkit-details-marker { display: none; }
body.portal .actualidad-card-lectura-indicador { display: grid; width: 1.2rem; height: 1.2rem; flex: none; place-items: center; color: var(--coral-oscuro); }
body.portal .actualidad-card-lectura-indicador .ilustracion { width: 100%; height: 100%; stroke-width: 3.4; }

@media (max-width: 58rem) {
  body.portal .feria-audiencia-ilustracion { width: 3.5rem; height: 3.5rem; }
  body.portal .stands-selector-ilustracion { flex-basis: 3.4rem; width: 3.4rem; }
  body.portal .indice-resumen-icono { width: 1.45rem; height: 1.45rem; }
}

/* Listas de acciones verificables: el mismo check vectorial, no viñetas vagas. */
.lista-check { padding-left: 0 !important; list-style: none; }
.lista-check li { position: relative; padding-left: 1.8rem; }
.lista-check li::before {
  position: absolute;
  top: .23em;
  left: .05rem;
  width: 1.05rem;
  height: 1.05rem;
  border: 0;
  border-radius: 0;
  background: url('../svg/editorial/check.svg') center / contain no-repeat;
  content: '';
}

@media (prefers-reduced-motion: reduce) {
  .ilustracion { transition: none; }
  .ilustracion .indicador-vertical,
  body.portal .senal-icono { transition: none; }
  body.portal .nav-explorar-titulo a:hover .ilustracion,
  body.portal .nav-explorar-titulo a:focus-visible .ilustracion,
  body.portal .indice-ruta-detalle > summary:hover .ilustracion,
  body.portal .indice-ruta-detalle > summary:focus-visible .ilustracion,
  body.portal .decision-card:hover .decision-icon,
  body.portal .decision-card:focus-visible .decision-icon,
  body.portal .ruta-editorial:hover .ruta-editorial-icono,
  body.portal .ruta-editorial:focus-within .ruta-editorial-icono,
  body.portal .tarjeta:hover .tarjeta-seccion-icono,
  body.portal .tarjeta:focus-within .tarjeta-seccion-icono,
  body.portal .industria-tarjeta:hover .industria-tarjeta-icono,
  body.portal .industria-tarjeta:focus-within .industria-tarjeta-icono,
  body.portal .industria-rail a:hover .industria-rail-icono,
  body.portal .industria-rail a:focus-visible .industria-rail-icono { transform: none; }
}