/* ═══════════════════════════════════════════════════════════
   Molde de ficha de feria — Hub EPI
   Fuente: 05-plan-2027/hub/mockup-single-feria-v1.html
   Estructura y bloques: hub/MOLDE-FICHA-FERIA.md (análisis IFEMA)
   Creado 2026-09-02.

   Los tokens (--color-*, --font-*) NO se declaran acá: viven en el
   CSS global de Bricks, ya importado. Este archivo solo trae el
   layout de los 12 bloques de la plantilla single-feria.

   La PIEL de cada feria la pisa inc/binding-ficha-css.php desde la
   ficha ACF: --feria-color, --feria-color-dark, --feria-tint.
   ═══════════════════════════════════════════════════════════ */

.feria{--feria-color:var(--color-primary);--feria-color-dark:var(--color-primary-dark);--feria-tint:var(--color-primary-tint-soft);
  /* --bar-color lo lee .hmk-hv-bar-top del glosario: así la barra que se
     dibuja en hover es la de la feria, no el rojo EPI por default. */
  --bar-color:var(--feria-color)}

/* ── Ancho del contenido ──────────────────────────────────────
   Decisión de Aldo (2026-09-02): el contenido va al 80% del viewport, no al
   100%. El tope de 1600px es solo para monitores muy anchos, donde el 80%
   daría una línea de texto imposible de leer.

   El selector lleva .brxe-block porque Bricks pone su propio ancho al bloque
   y le gana a un `.wrap` suelto. Sin esa clase, el max-width no aplica y el
   contenido se va de borde a borde.
   ───────────────────────────────────────────────────────────── */
:root{--maxw-hub:1600px}
.brxe-block.wrap,.wrap{width:80%;max-width:var(--maxw-hub);margin-inline:auto}
.brxe-section > .brxe-block.wrap{width:80%}

/* ── Ritmo vertical ──────────────────────────────────────────
   Medido sobre la home de miningtech.pe el 2026-09-03 y convertido en escala.
   Documento con las mediciones: hub/RITMO-VERTICAL.md
   Respaldo del CSS anterior: assets/molde-feria.css.pre-ritmo-2026-09-03

   Todos los pasos son múltiplos de 8 porque la página de referencia ya lo era
   —se hizo a ojo y aun así cayó en retícula—. clamp() interpola entre móvil y
   escritorio: no hace falta una sola media query para el ritmo.
   ───────────────────────────────────────────────────────────── */
:root{
  --ritmo-seccion: clamp(3.75rem, 8.4vw, 7.5rem);  /*  60 → 120px  respiro de sección  */
  /* CORREGIDO 2026-09-03. La primera medición dio 60→72px y estaba mal: el
     título de la referencia lleva `hmk-sr-up`, que lo arranca 40px más abajo
     hasta que el observer lo revela, y la cejilla NO lleva animación. Se midió
     el par sin revelar y esos 40px se colaron. El gap DISEÑADO es 20→32px
     (márgenes 8+12 en móvil, 12+20 en escritorio), verificado en tres
     secciones anulando el transform.
     Lección: en esta referencia, medir distancias SIN el scroll-reveal activo. */
  --ritmo-cejilla: clamp(1.25rem, 2.2vw, 1.78rem);  /*  20 →  32px  cejilla → título */
  --ritmo-bajada:  clamp(1.25rem, 2.3vw, 2rem);    /*  20 →  32px  título → bajada     */
  --ritmo-bloque:  clamp(2.5rem,  6.7vw, 6rem);    /*  40 →  96px  texto → componentes */
  --ritmo-fila:    clamp(1rem,    1.7vw, 1.5rem);  /*  16 →  24px  entre filas         */
}

/* ── Escala tipográfica ──────────────────────────────────────
   Portada del sistema de miningtech.pe a la tipografía de EPI (2026-09-03).
   Se toman la ESCALA y las INTERLÍNEAS; nunca las fuentes ni los pesos: la
   referencia usa Inter Tight en 800 y EPI usa IBM Plex en 700, que es una
   decisión de marca ya cerrada junto con el Pantone 485 C.

   Plex Condensed es más angosta que Inter Tight: al mismo cuerpo pesa menos
   ópticamente, y su peso máximo es Bold 700. Así que el contraste se gana con
   TAMAÑO e INTERLÍNEA, no con peso.

   La base tipográfica del hub es fluida (16px en móvil, 18px en escritorio),
   así que 1rem ya escala solo. Los titulares llevan clamp propio porque su
   recorrido es mucho mayor que ese 1,125.

   Interlínea por rol, que es lo que más se nota:
     1,05 display · 1,15 título de sección · 1,25 tarjeta · 1,60 cuerpo
   Respaldo del CSS anterior: molde-feria.css.pre-tipografia-2026-09-03
   ───────────────────────────────────────────────────────────── */

/* La cejilla tenía 12,96px con 0,16em de tracking: a ese cuerpo la letra
   espaciada se lee como textura, no como palabra. Sube de cuerpo, gana peso y
   pierde la mitad del tracking. Sigue en Mono, que es seña de identidad. */
.eyebrow{font-family:var(--font-mono);font-size:.85rem;font-weight:600;
  letter-spacing:.08em;line-height:1.3;text-transform:uppercase;color:var(--feria-color);
  margin:0 0 var(--ritmo-cejilla)}
/* `section.brxe-section` y no `section` a secas: Bricks define
   `.brxe-section{padding-top:var(--space-2xl)...}` y una clase le gana a un
   elemento. Con `section` solo, el padding quedaba en 56px en vez de 120.
   Es el mismo tropiezo que con `.dosco.lista` — en este proyecto, cuando una
   regla «no aplica», mirar especificidad antes que orden. */
section.brxe-section{padding:var(--ritmo-seccion) 0}

/* Por defecto el título abre el espacio grande, porque lo que sigue son los
   componentes. Si hay bajada, el título cede a la distancia corta y es la
   bajada la que abre el espacio grande. Un solo lugar donde se decide. */
.sec-title{font-size:clamp(2.2rem,3.35vw,2.65rem);font-weight:700;line-height:1.15;
  letter-spacing:-.02em;margin:0 0 var(--ritmo-bloque)}
.sec-title:has(+ .sec-lede),.sec-title:has(+ p),.sec-title:has(+ .brxe-shortcode > p){margin-bottom:var(--ritmo-bajada)}
/* Sin gris (Aldo, 2026-09-14): la bajada va en negro pleno, no en un tono
   atenuado. La jerarquía frente al título la da el tamaño (1,1rem contra el
   display), no un color intermedio — el mismo principio que ya rige la
   escala tipográfica de esta plantilla. */
.sec-lede{color:var(--color-text-primary);max-width:62ch;margin:0 0 var(--ritmo-bloque);
  font-size:1.1rem;line-height:1.55}

/* Cuerpo: baja de 20,25 a 18 en escritorio y abre la interlínea a 1,6.
   Es la mitad del contraste que se fue a buscar — el titular no crece solo
   subiéndolo, crece también bajando lo que tiene al lado. */
.feria p,.dosco p,.sector span,.t-texto{font-size:1rem;line-height:1.6}

/* Título de tarjeta: 1,25 de interlínea, el escalón entre display y texto. */
.t-titulo{font-size:1.22rem;line-height:1.25;letter-spacing:-.015em}

/* El H1 del hero: la interlínea 1,2 le daba tres renglones sueltos; con 1,05
   el nombre de la feria se lee como un bloque. */
.hero h1{line-height:1.05;letter-spacing:-.02em}

/* El hero tiene su propio ritmo: es pantalla completa, no una sección más.
   En la referencia (miningtech.pe) el hero tiene padding de sección CERO y
   resuelve su altura con min-height. Se copia eso: con 120px arriba y abajo
   el hero se estiraba a 729px sin ganar nada. */
.hero .eyebrow,.hero .sec-title{margin-bottom:.5rem}
section.brxe-section.hero{padding-top:0;padding-bottom:0}


/* 1 — header de feria */
/* Sin gris: lo que era --color-neutral-200/300 (gris claro sobre grafito)
   pasa a blanco a opacidad reducida. Es blanco, no un tono nuevo — la
   jerarquía la da la opacidad, no una variable de color aparte. */
.fhead{background:var(--color-neutral-900);color:#fff;position:sticky;top:0;z-index:20}
.fhead .wrap{display:flex;align-items:center;gap:1.2rem;height:64px}
.fhead .logo{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:.02em}
.fhead .fechas{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;color:rgba(255,255,255,.75)}
.fhead nav{margin-left:auto;display:flex;gap:1.4rem;font-size:.85rem}
.fhead nav a{text-decoration:none;color:rgba(255,255,255,.75)}
.fhead nav a:hover{color:#fff}
.sello{margin-left:1rem;background:var(--feria-color);padding:.5rem .7rem;border-radius:var(--radius-m);
  font-family:var(--font-display);font-weight:700;font-size:.68rem;line-height:1.05;text-align:center;letter-spacing:.04em}

/* 2 — hero */
.hero{background:var(--color-neutral-900);color:#fff;position:relative;overflow:hidden}
/* 550px de alto mínimo (Aldo, 2026-09-14; antes 460). Mínimo y no fijo: en
   pantallas anchas el H1 crece con el viewport y un alto fijo lo cortaría. */
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:2rem;align-items:center;min-height:550px;padding-top:2.5rem;padding-bottom:2.5rem}
.hero h1{font-size:clamp(2.6rem,6vw,4.2rem);font-weight:700;letter-spacing:-.02em;margin:.6rem 0 .5rem;
  position:relative;padding-bottom:1rem}
/* Regla 60/30/10 (aprobada 2026-09-14): el rojo deja de pintar cada
   elemento y queda solo como acento — el filo bajo el título. */
.hero h1::after{content:"";position:absolute;left:0;bottom:0;width:4rem;height:5px;
  background:var(--feria-color);border-radius:2px}
.hero .claim{font-size:clamp(1.05rem,1.6vw,1.3rem);color:rgba(255,255,255,.8);max-width:34ch}
.hero .acciones{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.6rem 0 1.4rem}
.btn{display:inline-block;padding:.85rem 1.5rem;border-radius:var(--radius-s);font-weight:600;font-size:.95rem;text-decoration:none;border:1.5px solid transparent}
.btn-primary{background:var(--feria-color);color:#fff}
.btn-primary:hover{background:var(--feria-color-dark)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.countdown{display:inline-flex;gap:1.6rem;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-m);padding:.8rem 1.3rem}
.countdown div{text-align:center}
.countdown b{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}
.countdown span{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
/* El degradado neutral-800→900 y el gris del placeholder salen: sin foto
   cargada, el hueco es negro sólido con el rótulo en rojo — no un gris de
   sistema que nadie diseñó a propósito. */
.hero .visual{aspect-ratio:4/3;background:var(--color-neutral-900);
  border-radius:var(--radius-l);display:grid;place-items:center;color:var(--feria-color);font-family:var(--font-mono);font-size:.75rem;text-align:center;padding:1rem;overflow:hidden}
/* El <img> del hero llena el contenedor recortado que hace el Ken Burns.
   Sin foto cargada, el contenedor queda con su degradado de placeholder. */
.hero .visual{padding:0}
.hero .visual-img{display:block;width:100%;height:100%;object-fit:cover}

/* 3 — cifras: racimo de círculos ────────────────────────────────
   Referencia: after-show report de hannovermesse.de (aprobado por Aldo
   2026-09-14). La sección es OSCURA y va pegada al hero: mismo negro, un
   solo lienzo de apertura. Las posiciones y el tamaño (--r, en px) los
   escribe assets/cifras-racimo.js; acá solo la piel.
   Un solo círculo rojo a la vez, y solo el activo — nunca un anillo o un
   texto rojo sobre un círculo en reposo. */
/* 700px de alto (Aldo, 2026-09-14): 45 + 610 del lienzo + 45. El lienzo
   lógico del script mide 1000 × 610 — si cambia uno, cambia el otro. */
section.brxe-section.cifras{padding-top:2.5rem;padding-bottom:2.5rem}

.racimo{position:relative;width:100%;max-width:1000px;margin:0 auto;aspect-ratio:1000/610;
  touch-action:manipulation}

.burbuja{
  --r:125;
  position:absolute;left:0;top:0;
  width:calc(var(--r) * 2px);height:calc(var(--r) * 2px);
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,.62);
  background:var(--color-neutral-900);
  color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;cursor:pointer;
  padding:0 calc(var(--r) * .16px);
  will-change:transform;
  transition:background-color .45s ease,border-color .45s ease,box-shadow .45s ease;
  outline:none;user-select:none;-webkit-user-select:none;
}
/* Sin JS (o antes de que corra) el racimo no tiene posiciones: se muestra
   como grilla simple, igual que en móvil. Nunca un montón encimado. */
.racimo:not(.racimo--listo),.racimo.racimo--simple{
  aspect-ratio:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.racimo:not(.racimo--listo) .burbuja,.racimo--simple .burbuja{
  position:relative;transform:none;--r:68}
/* En móvil: dos por fila (el wrap mide 80% del ancho) y el activo en su
   propia fila, más grande, con la bajada. */
.racimo--simple .burbuja.activo{--r:104;order:-1}

.burbuja b{
  font-family:var(--font-display);font-weight:700;line-height:1;letter-spacing:-.01em;
  font-size:calc(var(--r) * .29px);color:#fff}
.burbuja .label{
  display:block;margin-top:calc(var(--r) * .05px);font-weight:600;line-height:1.2;
  font-size:max(13px, calc(var(--r) * .105px))}
.burbuja .reveal{
  display:block;overflow:hidden;max-height:0;opacity:0;margin-top:0;
  max-width:calc(var(--r) * 1.4px);
  transition:opacity .35s ease,max-height .45s ease,margin .45s ease}
.burbuja .reveal-texto{display:block;font-size:max(12px, calc(var(--r) * .062px));line-height:1.45;color:rgba(255,255,255,.92)}
.burbuja .reveal em{display:block;margin-top:.5em;font-family:var(--font-mono);font-style:normal;
  font-size:max(10px, calc(var(--r) * .042px));letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.75)}

.burbuja.activo{
  background:linear-gradient(135deg,var(--feria-color) 0%,var(--feria-color-dark) 100%);
  border-color:transparent;
  box-shadow:0 30px 70px rgba(0,0,0,.35)}
.burbuja.activo .reveal{max-height:8em;opacity:1;margin-top:calc(var(--r) * .07px);transition-delay:.15s}
.burbuja:focus-visible{box-shadow:0 0 0 3px #fff}

/* 4 — tarjetas de acceso */
/* Los bloques 4 (accesos), 6 (programa), 8 (perfil), 9 (noticias) y 12 (otras
   ferias) ya no tienen CSS propio: se migraron al componente de tarjetas y su
   estilo vive en assets/componentes.css. Lo que queda acá es lo que el
   componente NO cubre — hero, cifras, sectores, paraguas y el muro de logos. */

/* 5 — qué es · 5b — sectores */
/* Eran un solo bloque de dos columnas: el texto de la feria a la izquierda y la
   lista de sectores a la derecha. Se partieron (2026-09-02) porque son dos
   cosas distintas: una CUENTA la feria, la otra la CLASIFICA. Ahora el texto va
   con foto o video, y los sectores tienen su propio titular.

   La retícula es la misma en las dos, con repartos distintos. */
.dosco{display:grid;gap:3rem;align-items:start}
.dosco p{color:var(--color-text-primary)}

/* Qué es: mitad y mitad. El texto y la imagen pesan igual. */
.dosco.media{grid-template-columns:1fr 1fr}

/* Sectores: la lista manda sobre el texto — con filas de dos líneas necesita
   el ancho. Antes era 1.15/.85, el reparto estaba al revés. */
.dosco.lista{grid-template-columns:.85fr 1.15fr}

/* Sin foto ni video (y sin destacada) el shortcode no devuelve nada. En vez de
   dejar media página vacía, el texto toma el ancho completo. */
.dosco.media:not(:has(.feria-media)){grid-template-columns:1fr}

/* La media: mismo radio que las tarjetas (16px) y proporción fija, para que las
   catorce ferias tengan el mismo rectángulo aunque suban fotos de distinto
   tamaño. NO lleva transition propia: hmk-img-hover ya declara la suya y dos
   declaraciones sobre el mismo elemento se pisan — ver el bloque de
   transiciones más abajo. */
/* Placeholder sin foto: negro, no el gris claro de --color-neutral-100 —
   se lee como "falta la imagen" y no como una superficie de diseño. */
.feria-media{margin:0;border-radius:var(--radius-m);overflow:hidden;
  aspect-ratio:4/3;background:var(--color-neutral-900)}
.feria-media img,.feria-media video{display:block;width:100%;height:100%;object-fit:cover}

/* ── Sectores — filas con divisorias ─────────────────────────────────
   El separador ES el espaciado: no hay gap entre filas, hay línea. Así una
   feria con 5 sectores y otra con 12 mantienen el mismo ritmo. */
/* Sin gris (2026-09-14): la retícula de sectores usaba --color-border y
   --color-text-muted para no competir con el eje. Ahora que no hay tono
   intermedio, ese trabajo lo hace la opacidad sobre negro — sigue sin
   competir, pero ya no es una variable de color aparte. */
.sectores{list-style:none;margin:0;padding:0;border-top:1px solid rgba(31,31,31,.12)}
.sector{display:grid;grid-template-columns:3.2rem minmax(0,1fr);align-items:start;
  border-bottom:1px solid rgba(31,31,31,.12);padding:1.1rem 0}
.sector .idx{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--color-text-primary);opacity:.55;padding-top:.2rem}
/* Filete vertical en negro a baja opacidad, separando índice de contenido.
   Atenuado y no del color de la feria: seis filetes de color compiten con el
   titular y, sobre todo, le quitan el destaque al sector eje, que es el único
   que debe llevar color. */
.sector .cuerpo{border-left:2px solid rgba(31,31,31,.15);padding-left:1rem}
.sector b{display:block;font-size:.98rem;font-weight:700;line-height:1.35}
.sector span{display:block;font-size:.88rem;color:var(--color-text-primary);
  margin-top:.25rem;line-height:1.5}

/* ── El color, en dos tiempos ────────────────────────────────────────
   Hover y eje NO son lo mismo y por eso no se resuelven igual:
   · hover = respuesta a la interacción, transitoria — "estás acá";
   · eje   = jerarquía editorial, permanente — "este sector define la feria".
   Si el color viviera solo en el hover, en touch la sección quedaría
   enteramente gris, y buena parte del tráfico de una web de feria es móvil.
   Por eso el eje conserva el filete en color, como un hover que se quedó. */

/* Hover: el filete y el índice toman el color de la feria. Sin fondo — el
   fondo lo reserva el eje, para que las dos señales no se confundan. */
/* Variante inventario — quiénes visitan. Las mismas filas en dos columnas y
   sin numerar. Los sectores llevan índice porque tienen orden editorial (uno
   es el eje); los perfiles de visitante no, y numerarlos inventaría una
   jerarquía. Sin el índice la fila es una sola columna, así que se pisa el
   grid heredado. */
.sectores.inventario{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:2.5rem;border-top:0}
.sectores.inventario .sector{grid-template-columns:minmax(0,1fr);padding:.85rem 0}
.sectores.inventario .sector b{font-weight:600}
@media(max-width:720px){ .sectores.inventario{grid-template-columns:1fr} }

.sector:hover .cuerpo{border-left-color:var(--feria-color)}
.sector:hover .idx{color:var(--feria-color)}

/* Eje: filete permanente más grueso, índice en color y un tinte apenas
   perceptible. color-mix rebaja el tinte de marca, que a plena carga tapaba
   la retícula y se comía la sección; si el navegador no lo soporta, el
   background se descarta y el filete sigue marcando la fila. */
.sector.eje{background:color-mix(in srgb, var(--feria-tint) 42%, transparent);
  padding-inline:1rem;margin-inline:-1rem}
.sector.eje .idx{color:var(--feria-color)}
/* El nombre queda en el texto base y no en rojo: sobre el tinte da 4.3:1,
   por debajo del 4.5:1 que pide AA para texto de este cuerpo. */
.sector.eje .cuerpo{border-left:3px solid var(--feria-color)}

/* ── Desbordamiento horizontal en móvil — corregido 2026-09-03 ─────────
   A 375px la página se iba 27px a la derecha. Dos causas sumadas:

   1. `grid-template-columns: 3.2rem 1fr`. Una pista `1fr` tiene min-width
      auto, así que NO baja del ancho mínimo de su contenido: un nombre largo
      («Máquina-herramienta y mecanizado») empujaba la columna y con ella la
      fila entera. Se corrige con minmax(0,1fr), que sí deja encoger.
   2. `.sector.eje` lleva margin-inline:-1rem para que el tinte sangre fuera
      de la retícula. En escritorio sobra espacio; en móvil se come el margen
      de la página. Bajo 640px el sangrado se anula.

   Se detectó midiendo scrollWidth contra clientWidth, no a ojo. */
.sector b,.sector span{overflow-wrap:break-word}
@media(max-width:640px){
  .sector.eje{margin-inline:0;padding-inline:.75rem;border-radius:var(--radius-s)}
  .sector{grid-template-columns:2.6rem minmax(0,1fr)}
}

/* ── Transición única de las tarjetas animadas ───────────────────────
   Regla del molde, aprendida a los golpes: los shorthands de `transition` NO
   se componen. Una tarjeta que lleva a la vez una clase de entrada
   (hmk-sr-cascade, que anima opacity y transform) y una de hover (hmk-hv-*,
   que anima transform y box-shadow) recibe DOS declaraciones y solo sobrevive
   la última — la del hover, que no incluye opacity. Resultado: la tarjeta
   aparece de golpe en vez de desvanecerse.

   Este archivo carga después del glosario, así que acá se declara la
   transición completa una sola vez, para todas. Si se agrega una tarjeta
   animada nueva, va en esta lista. */
.hermana,.logo-ph,.sector{
  transition:opacity var(--anim-duration-base) var(--anim-easing),
             transform var(--anim-duration-fast) var(--anim-easing),
             box-shadow var(--anim-duration-fast) var(--anim-easing),
             background var(--anim-duration-fast) var(--anim-easing),
             color var(--anim-duration-fast) var(--anim-easing),
             border-color var(--anim-duration-fast) var(--anim-easing)}

/* 6 — programa */
/* 7 — paraguas */
.paraguas{background:var(--color-neutral-900);color:#fff}
.paraguas .sec-lede{color:rgba(255,255,255,.8)}
.hermanas{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.6rem}
.hermana{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-m);padding:1.2rem;text-decoration:none}
.hermana .f{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;color:rgba(255,255,255,.75)}
.hermana b{display:block;font-family:var(--font-display);font-size:1.35rem;font-weight:700;margin:.2rem 0 .5rem}
.tag{display:inline-block;font-size:.68rem;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-full);padding:.12em .6em;margin-right:.3rem;color:rgba(255,255,255,.8)}
.hermana.actual{border-color:var(--feria-color);background:rgba(218,41,28,.14)}

/* 8 — perfil */
/* 9 — noticias */
/* 10 — respaldo: carrusel de logos
   El rótulo lo pone el shortcode porque cambia por feria («Ellos ya han sido
   parte de FIMM» / «Con el respaldo de»). Por eso este bloque NO lleva titular
   fijo en la plantilla de Bricks.

   Sin librería: es una animación CSS, igual que la franja del header. Un muro
   de logos que corre no necesita controles ni Splide. */
.logos{display:flex;flex-wrap:wrap;gap:1rem}
.logos.quietos{justify-content:center;align-items:center;gap:2rem}
.logo-ph{display:grid;place-items:center;min-width:150px;height:70px;
  color:var(--color-text-primary);opacity:.5;font-family:var(--font-mono);font-size:.7rem}
.logo-ph img{max-height:52px;width:auto;max-width:150px;object-fit:contain}

/* La máscara de los bordes evita el corte seco: los logos entran y salen
   desvaneciéndose en vez de aparecer de golpe contra el borde de la sección. */
.logos-carrusel{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6rem,#000 calc(100% - 6rem),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6rem,#000 calc(100% - 6rem),transparent)}
.logos-pista{display:flex;width:max-content;animation:epi-logos 60s linear infinite}
.logos-tira{display:flex;align-items:center;gap:3rem;padding-right:3rem}

/* -50% y no -100%: la pista lleva la tira duplicada, así que medio recorrido
   es exactamente un ciclo y el empalme queda invisible. */
@keyframes epi-logos{to{transform:translateX(-50%)}}

/* Se detiene al pasar el mouse: si alguien reconoce una marca, quiere mirarla. */
.logos-carrusel:hover .logos-pista{animation-play-state:paused}

/* Nada de barra de color ni sombra en hover: es la marca de un tercero.
   Los logos van en escala de grises y recuperan color al pasar por encima —
   el único efecto que no altera la identidad ajena. */
.logo-ph img{filter:grayscale(1);opacity:.75;transition:filter .3s ease,opacity .3s ease}
.logo-ph:hover img{filter:grayscale(0);opacity:1}

@media (prefers-reduced-motion:reduce){
  .logos-pista{animation:none;flex-wrap:wrap;width:100%;justify-content:center}
  .logos-tira[aria-hidden="true"]{display:none}
  .logo-ph img{filter:none;opacity:1}
}

@media (max-width:640px){
  .logos-tira{gap:2rem;padding-right:2rem}
  .logo-ph{min-width:110px;height:56px}
  .logo-ph img{max-height:40px;max-width:110px}
}

/* 11 — faqs + cómo llegar */
/* Sección en negro, no gris (Aldo, 2026-09-14) — mismo tratamiento que el
   hero y el paraguas. Fondo puesto por el generador (bg_dark en
   generar-single-feria.py, clase `faqs-como-llegar`). Acá solo el texto:
   blanco a full en las respuestas, blanco a baja opacidad en la línea
   divisoria — nunca un token gris aparte. */
.faq{border-bottom:1px solid rgba(255,255,255,.18)}
.faq summary{cursor:pointer;padding:1rem 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--feria-color);font-weight:700;font-size:1.3rem;line-height:1}
.faq[open] summary::after{content:"–"}
.faq p{margin:0 0 1rem;color:#fff;font-size:.93rem}

/* 8d — plano y stands (CTA a la página propia) */
/* Banda de una sola línea: el texto pesa a la izquierda, el botón cierra a la
   derecha. Sin imagen del plano a propósito — ver el porqué en el shortcode. */
.cta-plano{display:flex;align-items:center;justify-content:space-between;
  gap:2rem;flex-wrap:wrap}
.cta-plano-txt{max-width:46rem}
.cta-plano .sec-lede{margin-bottom:0;color:rgba(255,255,255,.8)}
.cta-plano .sec-title{color:#fff}
@media(max-width:720px){ .cta-plano{flex-direction:column;align-items:flex-start} }

/* 11b — cómo llegar (columna derecha de las FAQs)
   Va pegado a las preguntas frecuentes porque resuelve la misma duda: la
   logística de la visita. El mapa es alto y angosto para que acompañe a la
   columna de preguntas sin dominarla. */
.dosco.faq{grid-template-columns:1.25fr .75fr;gap:2.5rem}

/* Si la feria no cargó dirección, el shortcode devuelve vacío y las preguntas
   se quedan con el ancho completo. Misma red de seguridad que la foto del
   bloque 5, y por la misma razón: catorce ferias heredan esto y no todas van
   a tener la dirección cargada el primer día. */
.dosco.faq:not(:has(.como-llegar)){grid-template-columns:1fr}

/* Dos filas compartidas (encabezado / cuerpo): la primera pregunta y el mapa
   arrancan a la misma altura aunque los encabezados midan distinto. */
@media(min-width:941px){
  .dosco.faq:has(.como-llegar){grid-template-rows:auto 1fr}
  .dosco.faq:has(.como-llegar)>*{display:grid;grid-template-rows:subgrid;grid-row:span 2;align-content:start}
  .dosco.faq .faq-enc{align-self:start}
  /* Bricks envuelve el shortcode en su propio div: se vuelve transparente. */
  .dosco.faq .brxe-shortcode:has(.como-llegar),.dosco.faq .como-llegar{display:contents}
}
.como-llegar .sec-title{font-size:clamp(1.2rem,2vw,1.5rem)}
.como-llegar .sec-lede{font-size:.9rem;margin-bottom:1.2rem}

/* aspect-ratio y no altura fija: en una columna angosta un mapa de 400px de
   alto queda como una tira; así conserva proporción en cualquier ancho.
   Marco rojo y fondo negro (2026-09-14, sección ya oscura): el iframe de
   Google trae su propio gris de calles y no lo cede sin una Maps JS API con
   estilo custom — mientras tanto se lo encajona en rojo para que ese gris
   quede contenido, no compitiendo con la sección. */
.mapa{aspect-ratio:4/3;border-radius:var(--radius-m);overflow:hidden;
  background:var(--color-neutral-900);border:2px solid var(--feria-color)}
.mapa iframe{width:100%;height:100%;display:block}
/* Ghost blanco: sobre fondo negro, el `.btn-mapa` que pisaba el borde y el
   texto a gris quedaba casi invisible. Sin ese override gana `.btn-ghost`
   (blanco a full), que es lo que corresponde en una sección oscura. */
.btn-mapa{margin-top:1rem}
.btn-mapa:hover{background:var(--feria-color);border-color:var(--feria-color)}

@media(max-width:940px){
  .dosco.faq{grid-template-columns:minmax(0,1fr)}
  .dosco.faq>*,.como-llegar{min-width:0}
  .como-llegar .sec-lede{overflow-wrap:anywhere}
  .mapa{aspect-ratio:16/10}
}

/* ── 8b · Quiénes visitan, en pestañas ───────────────────────
   Molde de miningtech.pe/visitantes, con la piel de EPI: allá el acento es
   dorado, acá es el rojo de la feria (--feria-color), que además cambia por
   feria. Radio 6px en las pestañas y 8px en el panel, como la referencia.

   El mecanismo son radios ocultos: sin JS, con navegación de teclado nativa. */
.vt{position:relative}
.vt-radio{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

/* Tantas columnas como bloques haya: sirve para tres y para el cuarto
   opcional sin escribir una regla nueva. */
.vt-menu{display:grid;grid-template-columns:repeat(var(--vt-cols,3),1fr);gap:.5rem;margin-bottom:1.6rem}
.vt[data-n="4"]{--vt-cols:4}
.vt[data-n="2"]{--vt-cols:2}

.vt-tab{position:relative;display:grid;place-items:center;text-align:center;
  padding:1.15rem 1rem;border:1px solid rgba(31,31,31,.15);border-radius:var(--radius-s);
  font-family:var(--font-display);font-size:1rem;line-height:1.3;color:var(--color-text-primary);opacity:.6;
  cursor:pointer;transition:border-color .25s ease,background .25s ease,color .25s ease,opacity .25s ease}
.vt-tab:hover{border-color:var(--feria-color);opacity:1}

/* El rombo que cuelga de la pestaña activa: 14px girado 45°, como la
   referencia. Se dibuja solo en la activa. */
.vt-tab::after{content:"";position:absolute;bottom:-7px;left:50%;width:14px;height:14px;
  background:var(--feria-color);transform:translateX(-50%) rotate(45deg) scale(0);
  transition:transform .25s ease}

.vt-paneles{position:relative}
.vt-panel{display:none;border:1px solid rgba(31,31,31,.15);border-radius:var(--radius-m);
  padding:1.6rem;background:var(--color-neutral-0)}
.vt-panel p{margin:0 0 1.2rem;color:var(--color-text-primary)}

.vt-lista{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.vt-lista li{position:relative;padding-left:1.7rem;line-height:1.5}
/* El check en color de feria: es la marca de pertenencia de cada perfil. */
.vt-lista li::before{content:"\2713";position:absolute;left:0;top:0;
  color:var(--feria-color);font-weight:700}

/* El emparejado pestaña ↔ panel. Se escriben los cuatro casos porque CSS no
   tiene forma de decir «el enésimo»; con un máximo de 4 bloques alcanza. */
.vt-radio:nth-of-type(1):checked ~ .vt-menu .vt-tab:nth-child(1),
.vt-radio:nth-of-type(2):checked ~ .vt-menu .vt-tab:nth-child(2),
.vt-radio:nth-of-type(3):checked ~ .vt-menu .vt-tab:nth-child(3),
.vt-radio:nth-of-type(4):checked ~ .vt-menu .vt-tab:nth-child(4){
  background:var(--feria-tint);border-color:var(--feria-color);
  color:var(--color-text-primary);opacity:1;font-weight:700}
.vt-radio:nth-of-type(1):checked ~ .vt-menu .vt-tab:nth-child(1)::after,
.vt-radio:nth-of-type(2):checked ~ .vt-menu .vt-tab:nth-child(2)::after,
.vt-radio:nth-of-type(3):checked ~ .vt-menu .vt-tab:nth-child(3)::after,
.vt-radio:nth-of-type(4):checked ~ .vt-menu .vt-tab:nth-child(4)::after{
  transform:translateX(-50%) rotate(45deg) scale(1)}
.vt-radio:nth-of-type(1):checked ~ .vt-paneles .vt-panel:nth-child(1),
.vt-radio:nth-of-type(2):checked ~ .vt-paneles .vt-panel:nth-child(2),
.vt-radio:nth-of-type(3):checked ~ .vt-paneles .vt-panel:nth-child(3),
.vt-radio:nth-of-type(4):checked ~ .vt-paneles .vt-panel:nth-child(4){display:block}

/* Foco visible: sin esto, quien navega con teclado no sabe dónde está. */
.vt-radio:focus-visible ~ .vt-menu .vt-tab{outline:2px solid var(--feria-color);outline-offset:3px}

@media(max-width:720px){
  .vt-menu{grid-template-columns:1fr;gap:.4rem;margin-bottom:1.2rem}
  .vt-tab{padding:.9rem 1rem;text-align:left;place-items:center start}
  /* En una sola columna el rombo apuntaría al vacío: se apaga. */
  .vt-tab::after{display:none}
}

/* ── Tratamiento de imagen — sincronizado con el motor (2026-09-03) ──
   `.hmk-img-hover` es del design system HAIKU, no de Mining Tech. Al portarla
   al hub se trajo solo el acercamiento y se dejó fuera el velo oscuro (hay un
   comentario en bloques-feria.php que lo dice: «sin velo oscuro, porque acá el
   texto no va encima»). Acá se completa: misma receta que corre en
   miningtech.pe, verificada leyendo su CSS el 2026-09-03.

   Dos tiempos distintos a propósito: el velo entra en 0,4s y el zoom tarda
   0,7s. El oscurecido llega antes que el movimiento, y por eso se siente como
   una respuesta al puntero y no como una animación.

   Aplica a TODA imagen que lleve la clase — la foto de la feria, las del
   programa, las portadas de noticias y las que se sumen después. */
.hmk-img-hover{position:relative;overflow:hidden;isolation:isolate}

/* Variante para fondos: la foto va como background-image del contenedor y el
   ::before la hereda. Es la que usa la referencia; el hub venía usando solo
   <img>, así que quedan las dos soportadas. */
.hmk-img-hover::before{content:"";position:absolute;inset:0;background-image:inherit;
  background-size:cover;background-position:center;
  transition:transform .7s cubic-bezier(.22,1,.36,1)}

/* El velo. rgba del grafito de EPI, no negro puro: sobre foto se lee como
   sombra de la marca y no como un apagón. */
.hmk-img-hover::after{content:"";position:absolute;inset:0;
  background:rgba(10,10,10,.4);opacity:0;transition:opacity .4s ease;
  pointer-events:none}

.hmk-img-hover img{display:block;width:100%;height:auto;
  transition:transform .7s cubic-bezier(.22,1,.36,1)}

/* 1,08 y no 1,06: se igualó a la referencia.
   El disparo desde la tarjeta entera es propio del hub y se conserva — el
   visitante apunta a la tarjeta, no al recorte de la foto. */
.hmk-img-hover:hover::before,
.hmk-img-hover:hover img,
.tarjeta:hover .hmk-img-hover img{transform:scale(1.08)}
.hmk-img-hover:hover::after,
.tarjeta:hover .hmk-img-hover::after{opacity:1}

/* Sin movimiento para quien lo pidió: el velo sí se mantiene (es información
   de estado, no decoración), el zoom se anula. */
@media (prefers-reduced-motion:reduce){
  .hmk-img-hover:hover::before,.hmk-img-hover:hover img,
  .tarjeta:hover .hmk-img-hover img{transform:none}
}

/* 12 — otras ferias */
footer.pie{background:var(--color-neutral-900);color:rgba(255,255,255,.75);padding:2.5rem 0;font-size:.85rem}
footer.pie strong{color:#fff}

@media(max-width:940px){
  /* Van los TRES selectores y no solo `.dosco`. `.dosco.lista` y `.dosco.media`
     tienen dos clases: le ganan en especificidad a `.dosco` a secas, y da igual
     que esta regla esté después en el archivo — la especificidad manda sobre el
     orden. Con `.dosco` solo, las dos secciones de dos columnas seguían en dos
     columnas en celular y la página desbordaba. Corregido 2026-09-03. */
  .hero .wrap,.dosco,.dosco.lista,.dosco.media{grid-template-columns:1fr}
  .sector{grid-template-columns:2.4rem minmax(0,1fr)}
  .fhead nav{display:none}
}
@media(max-width:560px){
  .hermanas{grid-template-columns:1fr}
}

/* ── Correcciones sobre el Theme Style de Bricks ──────────────
   Bricks pinta los headings con el color de texto del sistema, que en las
   secciones oscuras los deja negro sobre negro. Se fuerza el blanco solo
   dentro de los bloques de fondo oscuro.

   Un solo bloque para TODAS las secciones oscuras (2026-09-14): la clase
   `bg-oscuro` la pone el generador (`section(..., bg_dark=True)`) en cada
   una — hero, paraguas, qué es, beneficios, plano, noticias,
   faqs-como-llegar — así que agregar una sección oscura nueva no exige
   volver a este archivo. El cuerpo va blanco a full (mismo principio que en
   claro: jerarquía por tamaño, no por tono); la cejilla se queda en rojo,
   que ya es el acento. */
.bg-oscuro :is(h1,h2,h3){color:#fff}
/* .t-texto queda AFUERA a propósito: la tarjeta es blanca siempre (ver
   componentes.css), así que su texto sigue en negro aunque la sección sea
   oscura — es la tarjeta la que contrasta con el fondo, no el texto. */
.bg-oscuro .sec-lede,
.bg-oscuro .dosco p{color:rgba(255,255,255,.85)}
.bg-oscuro .claim,
.bg-oscuro .countdown b,
.bg-oscuro .hermana b{color:#fff}


/* ═══════════════════════════════════════════════════════════
   Nivelación con la home — 2026-10-03
   La home (hub/mockup-home-v4) se aprobó después que esta plantilla y fijó
   decisiones que acá no estaban. Este bloque las trae a la ficha:
   · hero con video de fondo y filtro más oscuro a la izquierda
   · cifras en fila (el componente de la home), ya no en racimo
   · el rojo sale de los textos: queda en botones y filos
   · sin tintes de fondo
   Va al final a propósito, para ganarle a las reglas de arriba sin tocarlas.
   ═══════════════════════════════════════════════════════════ */

/* Hero */
section.brxe-section.hero{min-height:680px;display:flex;align-items:center;justify-content:center}
.hero .hero-fondo{position:absolute;inset:0;z-index:0}
.hero .hero-fondo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(31,31,31,.94) 0%,rgba(31,31,31,.80) 34%,rgba(31,31,31,.38) 68%,rgba(31,31,31,.22) 100%)}
.hero .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero .wrap{position:relative;z-index:1;display:block;min-height:0;padding-top:6rem;padding-bottom:6rem}
.hero .hero-col{max-width:40rem}
.hero h1{font-size:clamp(2.6rem,5.25vw,4.2rem);padding-bottom:0;margin-bottom:0}
.hero h1::after{position:static;display:block;width:4.5rem;height:4px;margin-top:1.5rem;border-radius:0}
.hero .claim{color:#fff;max-width:none;font-size:1rem;line-height:1.6;margin-top:var(--ritmo-bajada)}
.hero .acciones{gap:1rem;margin:2.5rem 0 0}
.hero .eyebrow{margin-bottom:var(--ritmo-cejilla)}
@media(max-width:900px){
  section.brxe-section.hero{min-height:560px}
  .hero .wrap{padding-top:4rem;padding-bottom:4rem}
  .hero .hero-fondo::after{background:rgba(31,31,31,.78)}
}

/* Botones: los de la home */
.feria .btn,.cta-plano .btn{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:700;
  font-size:1rem;line-height:1;padding:1rem 1.5rem;border-width:2px}
.btn-ghost{border-color:currentColor}

/* Cifras: la fila de la home dentro de la sección de Bricks */
section.brxe-section.cifras{padding-top:var(--ritmo-seccion);padding-bottom:var(--ritmo-seccion)}
.epi-parte--cifras{background:transparent}
.epi-home .h-cifras{padding:0}
@media(max-width:900px){.epi-parte--cifras .h-fila{grid-template-columns:1fr 1fr!important}}

/* El rojo sale de los textos */
.eyebrow{color:inherit}
.sector:hover .idx,.sector.eje .idx{color:inherit}
.faq summary::after{color:inherit}
.t-flecha,.t--icono .t-ico{color:inherit}

/* Sin tintes */
.sector.eje{background:transparent;padding-inline:0;margin-inline:0}
.tarjeta.destacada{background:var(--color-background)}

/* Hero: cejilla como la de la home y botones en fila */
.hero .acciones{align-items:center}
.hero .acciones > *{flex:0 0 auto;width:auto}
.hero .claim,.hero .hero-col > .brxe-shortcode.hmk-sr-up{margin-top:var(--ritmo-bajada)}

/* Más rojo y tintes que salen: checks, pestaña activa, feria actual del paraguas */
.vt-lista li::before{color:inherit}
.vt-tab:hover{border-color:var(--color-neutral-900)}
.vt-radio:nth-of-type(1):checked ~ .vt-menu .vt-tab:nth-child(1),
.vt-radio:nth-of-type(2):checked ~ .vt-menu .vt-tab:nth-child(2),
.vt-radio:nth-of-type(3):checked ~ .vt-menu .vt-tab:nth-child(3),
.vt-radio:nth-of-type(4):checked ~ .vt-menu .vt-tab:nth-child(4){
  background:var(--color-neutral-900);border-color:var(--color-neutral-900);color:#fff}
.vt-radio:nth-of-type(1):checked ~ .vt-menu .vt-tab:nth-child(1)::after,
.vt-radio:nth-of-type(2):checked ~ .vt-menu .vt-tab:nth-child(2)::after,
.vt-radio:nth-of-type(3):checked ~ .vt-menu .vt-tab:nth-child(3)::after,
.vt-radio:nth-of-type(4):checked ~ .vt-menu .vt-tab:nth-child(4)::after{background:var(--color-neutral-900);border-color:var(--color-neutral-900)}
.hermana.actual{border-color:#fff;background:rgba(255,255,255,.14)}

.hero .acciones{flex-direction:row;justify-content:flex-start;align-items:center;flex-wrap:wrap}


/* ═══════════════════════════════════════════════════════════
   Ficha v2 — 2026-10-03 (segunda vuelta, tras revisar fimmperu.com)
   Logo y color de la feria, logos arriba, perfil con dona, cierre comercial.
   ═══════════════════════════════════════════════════════════ */

/* El color de la feria sobre negro: su variante clara (inc/binding-ficha-css.php) */
.feria.bg-oscuro,.hero.feria{--feria-color:var(--color-primary-claro,var(--color-primary))}
.single-ferias .epi-home .h-oscuro,.single-ferias .epi-parte--participar{--rojo:var(--color-primary-claro,var(--color-primary))}
.single-ferias .epi-parte--participar .h-form,.single-ferias .epi-parte--descarga{--rojo:var(--color-primary)}

/* Hero: cejilla, logo de la feria y titular */
.hero .hero-cejilla{font-family:var(--font-display);font-weight:600;font-size:.85rem;line-height:1.3;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--ritmo-cejilla)}
.hero .hero-logo{display:block;height:clamp(3.4rem,6vw,5rem);width:auto;max-width:100%;margin:0 0 1.75rem}
.hero h1.hero-titular{font-size:clamp(2.1rem,3.9vw,3.1rem);line-height:1.08;max-width:18ch}
.hero .hero-col{max-width:44rem}

/* Respaldo: tira de logos pegada al hero */
section.brxe-section.respaldo{padding-top:2.75rem;padding-bottom:2.75rem}
.respaldo .sec-title{font-family:var(--font-display);font-weight:600;font-size:.85rem;line-height:1.3;
  letter-spacing:.08em;text-transform:uppercase;text-align:center;margin:0 0 1.5rem}

/* Video de la edición */
.feria-media.video{margin:0}
.feria-media.video video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-m);
  background:var(--color-neutral-900);box-shadow:0 30px 70px -18px rgba(31,31,31,.55),0 10px 24px -10px rgba(31,31,31,.35)}

/* Sectores: foto bajo la bajada */
.sectores-foto{margin-top:2rem}
.sectores-foto .feria-media{margin:0;border-radius:var(--radius-m);overflow:hidden;aspect-ratio:4/3}
.sectores-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* Perfil: dona de la home + grupos */
.epi-parte--perfil{background:transparent}
.perfil-grupos{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:var(--ritmo-bloque);
  padding-top:2.25rem;border-top:1px solid rgba(255,255,255,.18)}
.perfil-grupos b{display:block;font-family:var(--font-display);font-size:1.15rem;line-height:1.25;color:#fff;margin-bottom:.5rem}
.perfil-grupos span{display:block;font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.82)}
@media(max-width:900px){.perfil-grupos{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.perfil-grupos{grid-template-columns:1fr}}

/* Cierre comercial bajo los beneficios */
.cta-comercial{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.75rem}
.btn-contorno{border-color:currentColor;color:var(--color-neutral-900);background:transparent}
.btn-contorno:hover{background:var(--color-neutral-900);color:#fff;border-color:var(--color-neutral-900)}

/* Paraguas y plano en una sola sección */
.paraguas .cta-plano{margin-top:var(--ritmo-bloque);padding-top:2.5rem;border-top:1px solid rgba(255,255,255,.18)}

/* Botones: el color PURO de la feria, también sobre negro (la variante clara es solo para filos).
   `a.btn` y no `.btn`: Bricks le pone su propio fondo al botón y una clase sola no le gana. */
.feria a.btn.btn-primary,.feria .btn.btn-primary,.cta-plano a.btn-primary{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.feria a.btn.btn-primary:hover,.cta-plano a.btn-primary:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark)}
/* Hero más compacto: el titular en tres renglones y los botones a la vista */
.hero .wrap{padding-top:4.5rem;padding-bottom:4.5rem}
.hero .hero-logo{height:clamp(3.2rem,5.4vw,4.4rem);margin-bottom:1.5rem}
.hero h1.hero-titular{font-size:clamp(2rem,3.5vw,2.8rem);max-width:24ch}
.hero .acciones{margin-top:2rem}
/* El fondo del botón de Bricks viene con más peso que una clase: acá sí hace falta !important. */
.feria a.btn.btn-primary,.feria .btn.btn-primary{background-color:var(--color-primary)!important}
.feria a.btn.btn-primary:hover{background-color:var(--color-primary-dark)!important}


/* ═══════════════════════════════════════════════════════════
   El fondo de la feria — 2026-10-03 (tercera vuelta)
   Aldo: las secciones que en la home van en negro, en la ficha van en el color
   de la feria. Las variables las imprime inc/binding-ficha-css.php; sin color
   cargado todas caen a su respaldo y la ficha queda en grafito y rojo EPI.
   ═══════════════════════════════════════════════════════════ */
.hero.feria{background:var(--feria-fondo,var(--color-neutral-900))}
.single-ferias .epi-home .h-oscuro,.single-ferias .epi-parte--participar .h-oscuro{background:var(--feria-fondo,var(--grafito))}
/* El filtro del video se tiñe con el color de la feria */
.hero .hero-fondo::after{background:linear-gradient(90deg,
  rgba(var(--feria-fondo-rgb,31,31,31),.95) 0%,rgba(var(--feria-fondo-rgb,31,31,31),.84) 34%,
  rgba(var(--feria-fondo-rgb,31,31,31),.42) 68%,rgba(var(--feria-fondo-rgb,31,31,31),.24) 100%)}
@media(max-width:900px){.hero .hero-fondo::after{background:rgba(var(--feria-fondo-rgb,31,31,31),.82)}}
/* Acentos sobre el fondo de feria: blancos */
.feria.bg-oscuro,.hero.feria{--feria-color:var(--feria-acento-fondo,var(--color-primary))}
.single-ferias .epi-home .h-oscuro,.single-ferias .epi-parte--participar{--rojo:var(--feria-acento-fondo,var(--color-primary))}
.single-ferias .epi-parte--participar .h-form,.single-ferias .epi-parte--descarga{--rojo:var(--color-primary)}
/* Botón principal sobre el fondo de feria: invertido */
.feria.bg-oscuro a.btn.btn-primary,.hero.feria a.btn.btn-primary,.feria.bg-oscuro .cta-plano a.btn-primary{
  background-color:var(--feria-boton-fondo-bg,var(--color-primary))!important;
  border-color:var(--feria-boton-fondo-bg,var(--color-primary));color:var(--feria-boton-fondo-tx,#fff)}
.feria.bg-oscuro a.btn.btn-primary:hover,.hero.feria a.btn.btn-primary:hover{background-color:rgba(255,255,255,.86)!important}
/* Dona: activo en blanco pleno, el resto en blanco tenue */
.single-ferias .epi-home .h-rueda circle{stroke:rgba(255,255,255,.4)}
.single-ferias .epi-home .h-rueda circle.h-on{stroke:#fff}
.hermana.actual{border-color:#fff;background:rgba(255,255,255,.18)}
.hermana{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25)}

/* Video de la edición: bloque propio */
section.brxe-section.video-edicion{padding-top:0}
.feria-video{margin:0}
.feria-video video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-l);
  background:var(--color-neutral-900);box-shadow:0 30px 70px -18px rgba(31,31,31,.55),0 10px 24px -10px rgba(31,31,31,.35)}
.feria-video figcaption{margin-top:1.25rem}
.feria-video figcaption b{font-family:var(--font-display)}

/* Otras ferias: las tarjetas de la home */
.epi-parte--otras{background:transparent}
.feria-video figcaption{color:var(--color-neutral-900);font-size:1rem}

/* Paraguas en blanco, a dos columnas (2026-10-03) */
.paraguas-dos{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center}
.paraguas-dos .sec-lede{max-width:34rem}
.paraguas-hermanas{display:grid;gap:var(--ritmo-fila);max-width:26rem}
.paraguas .cta-plano,.plano .cta-plano{margin-top:0;padding-top:0;border-top:0}
@media(max-width:900px){.paraguas-dos{grid-template-columns:1fr}}
/* El hover de tarjeta toma el color de la feria, no el rojo de la casa */
.tarjeta:hover .t-titulo,.tarjeta:hover .t-flecha{color:var(--color-primary)}

/* Fondo gris claro para separar secciones blancas (Aldo, 2026-10-03).
   Es el «Fondo» oficial de la paleta EPI (#F2F2F2), no un gris nuevo. Enmienda
   la regla «sin gris» del 14-sep solo en esto: como fondo de sección entera,
   nunca en textos, bordes ni tarjetas (que siguen blancas). */
section.brxe-section.fondo-suave{background:var(--color-neutral-100,#F2F2F2)}
section.brxe-section.video-edicion{padding-top:var(--ritmo-seccion)}
/* El video, un 18% más chico y centrado: a todo el ancho resultaba invasivo */
.feria-video{max-width:82%;margin-inline:auto}
.feria-video figcaption{text-align:center}
@media(max-width:900px){.feria-video{max-width:100%}}

/* Logo del paraguas en lugar del nombre en texto */
.paraguas-logo{margin:0 0 var(--ritmo-bajada)}
.paraguas-logo img{display:block;height:clamp(4.5rem,8vw,6.5rem);width:auto;max-width:100%}
/* Cejillas sobre el fondo de feria: blancas. Al sacarles el rojo quedaron heredando
   el color del texto base, que es oscuro, y no se leían sobre azul. */
.bg-oscuro .eyebrow,.feria.bg-oscuro .eyebrow{color:#fff}
/* El contenedor de preguntas y mapa lleva las clases `dosco faq`, y `.faq` (pensada para cada pregunta)
   le dibujaba una línea a todo el ancho bajo el botón del mapa. */
.dosco.faq{border-bottom:0}


/* Cifras encapsuladas — 4-oct-2026 (lienzo: Expo Energética)
   La sección queda blanca y las cifras van en una caja del color de la feria,
   redondeada, con aire blanco a los cuatro lados. */
body.cifras-caja section.brxe-section.cifras{background:#fff!important}
body.cifras-caja .epi-parte--cifras .h-cifras{border-radius:1.25rem;
  padding:clamp(2rem,4.5vw,3.75rem)}
body.cifras-caja .epi-parte--cifras .h-cifras h2{margin-top:0}

/* Cifras en tarjetas — 4-oct-2026 (lienzo: Expo Energética)
   Cada cifra es una tarjeta blanca redondeada dentro de la caja del color de la feria. */
body.cifras-caja .epi-parte--cifras .h-cifra{background:#fff;border-radius:1rem;padding:1.5rem 1.5rem 1.6rem;
  box-shadow:none;color:var(--color-neutral-900,#1F1F1F)}
body.cifras-caja .epi-parte--cifras .h-cifra::before{display:none}
body.cifras-caja .epi-parte--cifras .h-cifra .h-ico{color:var(--feria-fondo,#1F1F1F);stroke:currentColor;margin-bottom:.9rem}
body.cifras-caja .epi-parte--cifras .h-cifra b{color:var(--feria-fondo,#1F1F1F)!important}
body.cifras-caja .epi-parte--cifras .h-cifra span{color:var(--color-neutral-900,#1F1F1F)!important}
body.cifras-caja .epi-parte--cifras .h-cifra{min-width:0}
body.cifras-caja .epi-parte--cifras .h-cifra b{font-size:clamp(1.7rem,2.4vw,2.2rem)}
@media(max-width:900px){
  body.cifras-caja .epi-parte--cifras .h-fila{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.75rem}
  body.cifras-caja .epi-parte--cifras .h-cifras{padding:1.5rem 1.25rem}
  body.cifras-caja .epi-parte--cifras .h-cifra{padding:1.1rem 1rem 1.2rem}
  body.cifras-caja .epi-parte--cifras .h-cifra b{font-size:1.6rem;overflow-wrap:anywhere}
}

/* Cifras en cascada y con sombra — 4-oct-2026 (lienzo: Expo Energética)
   `.h-visto` lo pone home.js cuando la fila entra en pantalla: las tarjetas suben
   y aparecen una tras otra. La sombra las separa del fondo de color. */
body.cifras-caja .epi-parte--cifras .h-cifra{
  box-shadow:0 .75rem 1.75rem rgba(0,0,0,.30),0 .15rem .4rem rgba(0,0,0,.22);
  opacity:0;transform:translateY(2rem);
  transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
body.cifras-caja .epi-parte--cifras .h-visto .h-cifra{opacity:1;transform:none}
body.cifras-caja .epi-parte--cifras .h-visto .h-cifra:nth-child(2){transition-delay:.18s}
body.cifras-caja .epi-parte--cifras .h-visto .h-cifra:nth-child(3){transition-delay:.36s}
body.cifras-caja .epi-parte--cifras .h-visto .h-cifra:nth-child(4){transition-delay:.54s}
body.cifras-caja .epi-parte--cifras .h-visto .h-cifra:nth-child(5){transition-delay:.72s}
@media(prefers-reduced-motion:reduce){
  body.cifras-caja .epi-parte--cifras .h-cifra{opacity:1;transform:none;transition:none}}

/* «Qué es»: logo a color y CTAs — 4-oct-2026 (todas las fichas) */
.logo-color{display:block;height:clamp(3.5rem,5vw,4.5rem);width:auto;max-width:min(100%,18rem);margin:0 0 var(--ritmo-bajada)}
.ctas-detalle{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:2rem}
.ctas-detalle .btn{flex:0 0 auto}

/* Video con botón de play propio — 4-oct-2026 (lienzo: Expo Energética) */
.feria-video.con-play{position:relative}
.feria-video.con-play video{position:relative}
.feria-video .feria-play{position:absolute;left:50%;top:calc(50% - 1.25rem);transform:translate(-50%,-50%);
  width:5.5rem;height:5.5rem;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:var(--feria-fondo,var(--color-primary));color:#fff;padding:0;
  box-shadow:0 .75rem 1.75rem rgba(0,0,0,.35);transition:transform .25s ease,box-shadow .25s ease}
.feria-video .feria-play svg{width:2.4rem;height:2.4rem;margin-left:.25rem}
.feria-video .feria-play:hover,.feria-video .feria-play:focus-visible{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 1rem 2.25rem rgba(0,0,0,.45)}
.feria-video.reproduciendo .feria-play{display:none}
.ctas-detalle .btn-ghost{background:transparent!important;color:var(--color-primary)!important;border:2px solid var(--color-primary)!important}
.ctas-detalle .btn-ghost:hover{background:var(--color-primary)!important;color:#fff!important}

/* Foto de «Qué es» con profundidad — 4-oct-2026 (todas las fichas): la misma sombra del video */
.dosco.media .feria-media{box-shadow:0 30px 70px -18px rgba(31,31,31,.5),0 10px 24px -10px rgba(31,31,31,.32)}

/* Perfil: grupos de visitantes en tarjetas con contorno — 4-oct-2026 (lienzo: Expo Energética)
   Separados de la dona por más aire. Cada grupo es una tarjeta redondeada, sin relleno y con un
   contorno blanco, que entra en cascada cuando el bloque aparece en pantalla (.grupos-visto). */
body.cifras-caja .perfil-grupos{margin-top:clamp(4.5rem,8vw,7rem);padding-top:0;border-top:0;gap:1.25rem}
body.cifras-caja .perfil-grupos > div{border:2px solid rgba(255,255,255,.85);border-radius:1rem;
  padding:1.6rem 1.5rem 1.75rem;background:transparent;
  opacity:0;transform:translateY(2rem);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
body.cifras-caja .perfil-grupos.grupos-visto > div{opacity:1;transform:none}
body.cifras-caja .perfil-grupos.grupos-visto > div:nth-child(2){transition-delay:.18s}
body.cifras-caja .perfil-grupos.grupos-visto > div:nth-child(3){transition-delay:.36s}
body.cifras-caja .perfil-grupos.grupos-visto > div:nth-child(4){transition-delay:.54s}
body.cifras-caja .perfil-grupos b{color:#fff;font-size:1.2rem;margin-bottom:.75rem}
body.cifras-caja .perfil-grupos span{color:rgba(255,255,255,.9)}
@media(prefers-reduced-motion:reduce){body.cifras-caja .perfil-grupos > div{opacity:1;transform:none;transition:none}}

/* Paraguas a todo el ancho — 4-oct-2026 (todas las fichas con paraguas)
   Logo a la izquierda y texto a la derecha; las ferias hermanas abajo, de a tres. */
.paraguas-dos{display:block}
.paraguas-cabeza{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(2rem,6vw,6rem);align-items:center;
  margin-bottom:clamp(3rem,5vw,4.5rem)}
.paraguas-cabeza .sec-lede{max-width:none;margin:0}
.paraguas-cabeza .paraguas-logo{margin:var(--ritmo-cejilla,1rem) 0 0}
.paraguas-cabeza .paraguas-logo img{height:clamp(5rem,9vw,7.5rem)}
.paraguas-hermanas{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:1.5rem;margin-top:1.5rem;align-items:stretch}
@media(max-width:900px){
  .paraguas-cabeza{grid-template-columns:1fr;gap:1.5rem}
  .paraguas-hermanas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.paraguas-hermanas{grid-template-columns:1fr}}

/* Paraguas: logo y texto equilibrados, y entrada lateral — 4-oct-2026 (todas las fichas) */
.paraguas-rotulo{display:block;margin-bottom:1.5rem}
.paraguas-cabeza{align-items:center}
.paraguas-cabeza .paraguas-logo{margin:0}
.paraguas-marca,.paraguas-cabeza .sec-lede{opacity:0;transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.paraguas-marca{transform:translateX(-4rem)}
.paraguas-cabeza .sec-lede{transform:translateX(4rem);transition-delay:.15s}
.paraguas-cabeza.paraguas-visto .paraguas-marca,.paraguas-cabeza.paraguas-visto .sec-lede{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.paraguas-marca,.paraguas-cabeza .sec-lede{opacity:1;transform:none;transition:none}}
/* Paraguas: la bajada pegada al logo, aire a la derecha — 4-oct-2026 */
.paraguas-cabeza{grid-template-columns:max-content minmax(0,42rem);justify-content:start;column-gap:clamp(2.5rem,5vw,4.5rem)}
@media(max-width:900px){.paraguas-cabeza{grid-template-columns:1fr}}

/* Botón de contorno sobre fondo de color: al pasar el cursor se mantiene legible — 4-oct-2026 (todas las fichas) */
.bg-oscuro .btn-ghost:hover,.bg-oscuro .btn-ghost:focus-visible,
.h-oscuro .btn-ghost:hover,.h-oscuro .btn-ghost:focus-visible{
  background:rgba(255,255,255,.2)!important;color:#fff!important;border-color:#fff!important}


/* Secciones que no pintan nada (solo en el lienzo) no dejan una banda en blanco */
section.brxe-section.como-participar:not(:has(.como-part)){display:none}

/* Cómo participar — 4-oct-2026 (lienzo: Expo Energética)
   Caja del color de la feria sobre sección blanca, tres pasos con contorno, en cascada. */
body.cifras-caja section.brxe-section.como-participar{background:#fff!important}
.como-part-caja{background:var(--feria-fondo,#1F1F1F);color:#fff;border-radius:1.25rem;padding:clamp(2rem,4.5vw,3.75rem)}
.como-part-cejilla{margin:0 0 var(--ritmo-cejilla,1rem);font-family:var(--font-display);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.como-part-caja h2{margin:0;color:#fff;font-size:clamp(1.8rem,3.2vw,2.6rem)}
.como-part-pasos{list-style:none;margin:clamp(2rem,4vw,3rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;counter-reset:none}
.como-part-pasos li{position:relative;border:2px solid rgba(255,255,255,.85);border-radius:1rem;padding:1.6rem 1.5rem 1.75rem;
  opacity:0;transform:translateY(2rem);
  transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1),background-color .3s ease,box-shadow .3s ease,border-color .3s ease}
.como-part-pasos .cp-num{position:absolute;top:1.1rem;right:1.4rem;font-family:var(--font-display);font-weight:700;font-size:2.4rem;line-height:1;color:rgba(255,255,255,.28)}
.como-part-pasos .cp-ico{display:block;width:2.4rem;height:2.4rem;margin-bottom:1rem;stroke:#fff;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.como-part-pasos b{display:block;font-family:var(--font-display);font-size:1.25rem;line-height:1.25;color:#fff;margin-bottom:.6rem}
.como-part-pasos .cp-txt{display:block;color:rgba(255,255,255,.9);font-size:.97rem;line-height:1.55}
.como-part-ctas{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:clamp(2rem,3.5vw,2.75rem)}
.como-part-ctas .btn{flex:0 0 auto}
section.como-participar .como-part-ctas a.btn.btn-primary{background-color:#fff!important;color:var(--feria-fondo,#1F1F1F)!important;border-color:#fff!important}
section.como-participar .como-part-ctas a.btn.btn-primary:hover{background-color:rgba(255,255,255,.86)!important}
@media(max-width:900px){.como-part-pasos{grid-template-columns:1fr}}

/* Preguntas frecuentes en tarjetas con contorno — 4-oct-2026 (lienzo: Expo Energética) */
body.cifras-caja .faqs{display:grid;gap:.9rem}
body.cifras-caja .faqs details.faq{border:2px solid rgba(255,255,255,.85);border-radius:1rem;padding:0 1.4rem;border-bottom-width:2px}
body.cifras-caja .faqs details.faq summary{padding:1.15rem 0}
body.cifras-caja .faqs details.faq summary::after{color:#fff}
body.cifras-caja .faqs details.faq p{padding-bottom:1.15rem;line-height:1.6;margin:0}
body.cifras-caja .faqs details.faq[open]{background:#fff}
body.cifras-caja .faqs details.faq[open] summary,body.cifras-caja .faqs details.faq[open] summary::after{color:var(--feria-fondo,#1F1F1F)}
body.cifras-caja .faqs details.faq[open] p{color:var(--color-neutral-900,#1F1F1F)}

/* Cómo participar — entrada y hover — 4-oct-2026
   1) entra la caja verde; 2) los pasos 1, 2 y 3 en cascada; 3) los botones. */
.como-part-caja{opacity:0;transform:translateY(3rem) scale(.98);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.como-part-ctas{opacity:0;transform:translateY(1rem);transition:opacity .6s ease .95s,transform .7s cubic-bezier(.2,.7,.2,1) .95s}
.como-part.visto .como-part-caja{opacity:1;transform:none}
.como-part.visto .como-part-pasos li{opacity:1;transform:none;transition-delay:.45s}
.como-part.visto .como-part-pasos li:nth-child(2){transition-delay:.65s}
.como-part.visto .como-part-pasos li:nth-child(3){transition-delay:.85s}
.como-part.visto .como-part-ctas{opacity:1;transform:none}
/* hover: la tarjeta sube, se aclara y su icono crece */
.como-part.visto .como-part-pasos li:hover{transform:translateY(-.5rem);background-color:rgba(255,255,255,.1);
  border-color:#fff;box-shadow:0 1rem 1.75rem rgba(0,0,0,.32);transition-delay:0s}
.como-part-pasos .cp-ico{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.como-part-pasos li:hover .cp-ico{transform:scale(1.14) rotate(-4deg)}
/* «Quiero exponer» sobre la caja: contorno blanco y, al pasar el cursor, relleno blanco translúcido con texto blanco */
section.como-participar .como-part-ctas a.btn.btn-ghost{background-color:transparent!important;color:#fff!important;border:2px solid #fff!important}
section.como-participar .como-part-ctas a.btn.btn-ghost:hover,section.como-participar .como-part-ctas a.btn.btn-ghost:focus-visible{
  background-color:rgba(255,255,255,.22)!important;color:#fff!important;border-color:#fff!important}
@media(prefers-reduced-motion:reduce){
  .como-part-caja,.como-part-ctas,.como-part-pasos li{opacity:1!important;transform:none!important;transition:none!important}}

/* ═══════════════════════════════════════════════════════════
   Feria de color claro → fondo grafito, color de acento — 4-oct-2026
   (Mining Tech Perú, dorado; modelo: miningtech.pe). binding-ficha-css.php
   pone `feria-grafito` en <body> cuando el color supera luminancia 0,30 y
   define --feria-fondo (grafito), --feria-acento-fondo (el color),
   --feria-boton-* y --feria-texto (el color oscurecido, para fondo claro).
   Las demás ferias no llevan la clase: nada de esto las toca.
   ═══════════════════════════════════════════════════════════ */
/* Sobre fondo claro, el acento es la versión oscurecida (≥4:1) */
body.feria-grafito section.feria:not(.bg-oscuro){--feria-color:var(--feria-texto)}
body.feria-grafito .eyebrow{color:var(--feria-texto)}
body.feria-grafito .bg-oscuro .eyebrow,body.feria-grafito .hero .eyebrow,body.feria-grafito .como-part-cejilla{color:var(--feria-acento-fondo)}
/* Cifras: números e iconos en dorado oscuro sobre la tarjeta blanca */
body.feria-grafito.cifras-caja .epi-parte--cifras .h-cifra b,
body.feria-grafito.cifras-caja .epi-parte--cifras .h-cifra .h-ico{color:var(--feria-texto)!important}
/* Contornos de tarjeta en el color de la feria, no en blanco */
body.feria-grafito .perfil-grupos > div,
body.feria-grafito .como-part-pasos li,
body.feria-grafito.cifras-caja .faqs details.faq{border-color:var(--feria-acento-fondo)}
body.feria-grafito .como-part-pasos .cp-ico{stroke:var(--feria-acento-fondo)}
body.feria-grafito .como-part-pasos .cp-num{color:rgba(221,161,15,.35)}
body.feria-grafito.cifras-caja .faqs details.faq summary::after{color:var(--feria-acento-fondo)}
body.feria-grafito.cifras-caja .faqs details.faq[open] summary::after{color:var(--feria-fondo)}
body.feria-grafito .perfil-grupos b{color:var(--feria-acento-fondo)}
/* Botón principal de «Cómo participar»: color de la feria, texto grafito */
body.feria-grafito section.como-participar .como-part-ctas a.btn.btn-primary{background-color:var(--feria-boton-fondo-bg)!important;color:var(--feria-boton-fondo-tx)!important;border-color:var(--feria-boton-fondo-bg)!important}
body.feria-grafito section.como-participar .como-part-ctas a.btn.btn-primary:hover{background-color:#F0BD2F!important}
body.feria-grafito .feria.bg-oscuro a.btn.btn-primary:hover,body.feria-grafito .hero.feria a.btn.btn-primary:hover{background-color:#F0BD2F!important}
/* Gris de las secciones claras: hueso */
body.feria-grafito section.brxe-section.fondo-suave{background:#F7F7F5}
/* Dona del perfil: tramo activo en el color de la feria */
body.feria-grafito.single-ferias .epi-home .h-rueda circle.h-on{stroke:var(--feria-acento-fondo)}
body.feria-grafito.single-ferias .epi-home .h-cifra-activa,body.feria-grafito .epi-home .h-perfil-lista .h-on{border-color:var(--feria-acento-fondo)}
body.feria-grafito .hero .hero-cejilla{color:var(--feria-acento-fondo)}
/* Feria sin paraguas (Mining Tech): la sección «Forma parte de» sale vacía; se oculta. */
section.brxe-section.forma-parte:not(:has(.paraguas-cabeza)){display:none}
/* «Otras ferias» sin ferias que mostrar (7-oct-2026: la web es solo agosto y las seis ya van en «Forma parte de»). */
section.brxe-section.otras-ferias:not(:has(.h-grid3)){display:none}
/* La franja de fecha y sede va solo en la home (Aldo, 7-oct-2026); el encabezado compartido la trae, acá se oculta. */
.epi-parte--cabecera .h-mm-marq{display:none}