/* =========================================================
   ENCO 2027 · Componentes de la línea gráfica
   Requiere enco-tokens.css y enco-base.css.
   Los recursos de la marca son cuatro: etiqueta con flecha, chevrones,
   panel con chaflán y bloque de fecha. No se inventan otros.
   La guía con ejemplos vivos está en kit-enco/guia/index.html.
   ========================================================= */

/* ---------- Secciones y contenedor ----------
   Fondos permitidos: negro, naranja y blanco, alternados.
   Cada sección define sus colores con variables; los componentes las heredan. */
.enco-seccion {
  --enco-fondo: var(--enco-blanco);
  --enco-tinta: var(--enco-negro);
  --enco-tinta-suave: var(--enco-gris-oscuro);
  --enco-acento: var(--enco-naranja);
  padding-block: var(--enco-seccion-y);
  background: var(--enco-fondo);
  color: var(--enco-tinta);
}
.enco-seccion--negro {
  --enco-fondo: var(--enco-negro);
  --enco-tinta: var(--enco-blanco);
  --enco-tinta-suave: var(--enco-gris-claro);
}
.enco-seccion--grafito {
  --enco-fondo: var(--enco-grafito);
  --enco-tinta: var(--enco-blanco);
  --enco-tinta-suave: var(--enco-gris-claro);
}
/* Sobre naranja todo va en negro, también los acentos */
.enco-seccion--naranja {
  --enco-fondo: var(--enco-naranja);
  --enco-tinta: var(--enco-negro);
  --enco-tinta-suave: var(--enco-negro);
  --enco-acento: var(--enco-negro);
}
.enco-seccion--gris {
  --enco-fondo: var(--enco-gris-fondo);
}

.enco-contenedor {
  width: min(100% - 2 * var(--enco-margen), var(--enco-ancho-max));
  margin-inline: auto;
}

/* Fondo con foto real del evento, oscurecida y leve */
.enco-seccion--foto {
  position: relative;
  isolation: isolate;
}
.enco-seccion--foto > .enco-fondo-foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  filter: grayscale(1);
}

/* ---------- Etiqueta: recuadro con flecha + rótulo ----------
   Abre cada sección.  <p class="enco-etiqueta"><span>Valor para tu marca</span></p> */
.enco-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 var(--enco-esp-5);
  font-family: var(--enco-fuente-titulo);
  font-size: var(--enco-t-etiqueta);
  letter-spacing: var(--enco-tracking-etiqueta);
  text-transform: uppercase;
  line-height: 1;
}
.enco-etiqueta::before {
  content: "";
  flex: none;
  inline-size: 2.1em;
  block-size: 2.1em;
  background: url("../marca/recursos/enco-flecha-naranja.svg") center / contain no-repeat;
}
.enco-etiqueta > span {
  padding: 0.6em 0.95em 0.5em;
  background: var(--enco-naranja);
  color: var(--enco-negro);
}
.enco-etiqueta--negra::before,
.enco-seccion--naranja .enco-etiqueta::before { background-image: url("../marca/recursos/enco-flecha-negro.svg"); }
.enco-etiqueta--negra > span,
.enco-seccion--naranja .enco-etiqueta > span { background: var(--enco-negro); color: var(--enco-naranja); }

/* ---------- Titulares a dos tonos ----------
   La idea clave va en <em>:  <h2 class="enco-titulo">¿Por qué estar en <em>ENCO?</em></h2> */
.enco-titulo {
  margin: 0 0 var(--enco-esp-5);
  font-family: var(--enco-fuente-titulo);
  font-weight: 400;
  font-synthesis: none;
  font-size: var(--enco-t-h2);
  line-height: var(--enco-interlineado-titulo);
  letter-spacing: var(--enco-tracking-titulo);
  text-transform: uppercase;
  text-wrap: balance;
}
.enco-titulo em { font-style: normal; color: var(--enco-acento); }
.enco-titulo--hero { font-size: var(--enco-t-hero); }
.enco-titulo--h1 { font-size: var(--enco-t-h1); }
.enco-titulo--h3 { font-size: var(--enco-t-h3); }

.enco-entradilla {
  max-width: var(--enco-ancho-texto);
  font-size: var(--enco-t-grande);
  font-weight: 700;
  line-height: 1.4;
}
.enco-texto-suave { color: var(--enco-tinta-suave, var(--enco-gris-oscuro)); }

/* Rótulo corto en Bebas (subtítulos, nombres de datos) */
.enco-rotulo {
  font-family: var(--enco-fuente-titulo);
  font-size: var(--enco-t-h3);
  letter-spacing: var(--enco-tracking-rotulo);
  text-transform: uppercase;
  line-height: 1;
}

/* ---------- Chevrones ----------
   Llevan la vista a un dato: fecha, sede, contacto. Toman el color del acento.
   <span class="enco-chevrones" aria-hidden="true"></span>  (5 por defecto) */
.enco-chevrones {
  --n: 5;
  display: inline-block;
  inline-size: calc(var(--n) * 0.375em);
  block-size: 1em;
  vertical-align: -0.12em;
  background: var(--enco-acento, var(--enco-naranja));
  -webkit-mask: url("../marca/recursos/enco-chevron-mascara.svg") left center / 0.375em 1em repeat-x;
          mask: url("../marca/recursos/enco-chevron-mascara.svg") left center / 0.375em 1em repeat-x;
}
.enco-chevrones--2 { --n: 2; }
.enco-chevrones--12 { --n: 12; }

/* ---------- Panel con chaflán ----------
   Rectángulo con la esquina inferior derecha cortada a 45°. Contiene tarjetas, cifras y fotos. */
.enco-panel {
  --chaflan: var(--enco-chaflan-m);
  --enco-acento: var(--enco-naranja);
  --enco-tinta-suave: var(--enco-gris-claro);
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  background: var(--enco-negro);
  color: var(--enco-blanco);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chaflan)), calc(100% - var(--chaflan)) 100%, 0 100%);
}
.enco-panel--grafito { background: var(--enco-grafito); }
.enco-panel--naranja {
  --enco-acento: var(--enco-negro);
  --enco-tinta-suave: var(--enco-negro);
  background: var(--enco-naranja);
  color: var(--enco-negro);
}
.enco-panel--blanco {
  --enco-tinta-suave: var(--enco-gris-oscuro);
  background: var(--enco-blanco);
  color: var(--enco-negro);
}
.enco-panel--chaflan-s { --chaflan: var(--enco-chaflan-s); }
.enco-panel--chaflan-l { --chaflan: var(--enco-chaflan-l); }
/* Variante con la esquina superior izquierda cortada (como la cinta naranja del membrete) */
.enco-panel--sup-izq {
  clip-path: polygon(var(--chaflan) 0, 100% 0, 100% 100%, 0 100%, 0 var(--chaflan));
}

/* ---------- Tarjeta numerada (dentro de un panel) ---------- */
.enco-tarjeta { display: flex; flex-direction: column; gap: var(--enco-esp-3); min-height: 100%; }
.enco-tarjeta__num {
  font-family: var(--enco-fuente-titulo);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--enco-acento);
}
.enco-tarjeta__titulo {
  margin: 0;
  font-family: var(--enco-fuente-titulo);
  font-size: 1.6rem;
  line-height: 0.95;
  text-transform: uppercase;
}
.enco-tarjeta__texto { margin-top: auto; font-size: var(--enco-t-chico); line-height: 1.45; color: var(--enco-tinta-suave); }

/* ---------- Cifra ----------
   <div class="enco-cifra"><strong class="enco-cifra__numero">5,176</strong>
   <span class="enco-cifra__rotulo">Visitantes</span><span class="enco-cifra__detalle">Edición 2026</span></div> */
.enco-cifra { display: flex; flex-direction: column; gap: var(--enco-esp-2); }
.enco-cifra__numero {
  font-family: var(--enco-fuente-titulo);
  font-weight: 400;
  font-size: var(--enco-t-cifra);
  line-height: 0.85;
  color: var(--enco-acento);
}
.enco-cifra__rotulo {
  font-family: var(--enco-fuente-titulo);
  font-size: 1.5rem;
  letter-spacing: var(--enco-tracking-rotulo);
  text-transform: uppercase;
  line-height: 1;
}
.enco-cifra__detalle { font-size: var(--enco-t-chico); color: var(--enco-tinta-suave); line-height: 1.4; }

/* ---------- Bloque de fecha ----------
   ABRIL / 21/22 / >>>>> 2027 >> POLIFORUM LEÓN */
.enco-fecha { display: inline-flex; flex-direction: column; font-family: var(--enco-fuente-titulo); text-transform: uppercase; line-height: 0.9; }
.enco-fecha__mes { font-size: clamp(1.75rem, 1.2rem + 2vw, 3.5rem); }
.enco-fecha__dias { margin-top: 0.06em; font-size: clamp(5rem, 2.5rem + 10vw, 11rem); line-height: 0.8; color: var(--enco-acento); }
.enco-seccion--naranja .enco-fecha__dias, .enco-panel--naranja .enco-fecha__dias { color: var(--enco-negro); }
.enco-fecha__linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.35em;
  font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
  letter-spacing: var(--enco-tracking-rotulo);
}

/* ---------- Botones ----------
   Naranja con texto negro (contraste 7.8:1). Nunca texto blanco sobre naranja. */
.enco-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.5em 0.75em;
  border: 0;
  background: var(--enco-naranja);
  color: var(--enco-negro);
  font-family: var(--enco-fuente-titulo);
  font-size: 1.25rem;
  letter-spacing: var(--enco-tracking-rotulo);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--enco-chaflan-s)), calc(100% - var(--enco-chaflan-s)) 100%, 0 100%);
  transition: background-color var(--enco-transicion);
}
.enco-boton:hover { background: var(--enco-naranja-hover); }
.enco-boton::after {
  content: "";
  inline-size: 0.75em;
  block-size: 0.75em;
  background: currentColor;
  -webkit-mask: url("../marca/recursos/enco-flecha-mascara.svg") center / contain no-repeat;
          mask: url("../marca/recursos/enco-flecha-mascara.svg") center / contain no-repeat;
}
.enco-boton--negro { background: var(--enco-negro); color: var(--enco-naranja); }
.enco-boton--negro:hover { background: var(--enco-grafito); }
.enco-boton--contorno { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; clip-path: none; }
.enco-boton--contorno:hover { background: var(--enco-naranja); color: var(--enco-negro); box-shadow: none; }

/* ---------- Lista con flechas ---------- */
.enco-lista-flechas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--enco-esp-3); }
.enco-lista-flechas li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--enco-fuente-titulo);
  font-size: 1.6rem;
  text-transform: uppercase;
  line-height: 1;
}
.enco-lista-flechas li::before {
  content: "";
  flex: none;
  inline-size: 1.1em;
  block-size: 1.1em;
  background: url("../marca/recursos/enco-flecha-naranja.svg") center / contain no-repeat;
}
.enco-seccion--naranja .enco-lista-flechas li::before,
.enco-panel--naranja .enco-lista-flechas li::before { background-image: url("../marca/recursos/enco-flecha-negro.svg"); }

/* ---------- Foto con chaflán ---------- */
.enco-foto {
  --chaflan: var(--enco-chaflan-l);
  position: relative;
  margin: 0;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chaflan)), calc(100% - var(--chaflan)) 100%, 0 100%);
}
.enco-foto--inf-izq { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--chaflan) 100%, 0 calc(100% - var(--chaflan))); }
.enco-foto--sup-der { clip-path: polygon(0 0, calc(100% - var(--chaflan)) 0, 100% var(--chaflan), 100% 100%, 0 100%); }
.enco-foto img { width: 100%; height: 100%; object-fit: cover; }
.enco-foto--bn img { filter: grayscale(1); }
/* Obligatoria cuando la foto muestra algo que se vende y fue hecha con IA */
.enco-foto__leyenda {
  position: absolute;
  right: 0.75rem;
  bottom: 0.6rem;
  font-size: 0.75rem;
  color: rgb(255 255 255 / 0.85);
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.8);
}

/* ---------- Precio (venta de espacios) ---------- */
.enco-precio { display: flex; flex-direction: column; gap: var(--enco-esp-2); }
.enco-precio__rotulo { display: flex; align-items: center; gap: 0.5em; font-family: var(--enco-fuente-titulo); font-size: 1.5rem; text-transform: uppercase; letter-spacing: var(--enco-tracking-rotulo); line-height: 1; }
.enco-precio__monto { font-family: var(--enco-fuente-titulo); font-size: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); line-height: 0.85; color: var(--enco-acento); }
.enco-precio__nota { font-family: var(--enco-fuente-titulo); font-size: 1.5rem; letter-spacing: var(--enco-tracking-rotulo); }

/* ---------- Encabezado del sitio ---------- */
.enco-encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--enco-negro);
  color: var(--enco-blanco);
}
.enco-encabezado__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--enco-esp-5);
  min-height: 4.5rem;
}
.enco-encabezado__logo img { height: 2.4rem; width: auto; }
.enco-nav { display: flex; flex-wrap: wrap; gap: var(--enco-esp-5); }
.enco-nav a {
  font-family: var(--enco-fuente-titulo);
  font-size: 1.15rem;
  letter-spacing: var(--enco-tracking-rotulo);
  text-transform: uppercase;
  text-decoration: none;
}
.enco-nav a:hover, .enco-nav a[aria-current="page"] { color: var(--enco-naranja); }
/* En celular el menú se oculta: el sitio debe poner aquí su botón de menú.
   La barra se queda con el logo y el botón principal. */
@media (max-width: 56rem) {
  .enco-nav { display: none; }
  .enco-encabezado__barra { min-height: 4rem; }
  .enco-encabezado__logo img { height: 2rem; }
  .enco-encabezado .enco-boton { font-size: 1rem; padding: 0.75em 1.1em 0.65em; }
}

/* ---------- Barra de aliados (logos en blanco sobre negro) ---------- */
.enco-aliados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--enco-esp-6) var(--enco-esp-7);
  align-items: center;
  justify-items: center;
}
.enco-aliados img { max-height: 3.25rem; width: auto; max-width: 100%; object-fit: contain; }

/* ---------- Pie del sitio: cinta naranja con chaflán ---------- */
.enco-pie {
  --enco-acento: var(--enco-negro);
  background: var(--enco-naranja);
  color: var(--enco-negro);
  padding-block: var(--enco-esp-8) var(--enco-esp-7);
  clip-path: polygon(var(--enco-chaflan-l) 0, 100% 0, 100% 100%, 0 100%, 0 var(--enco-chaflan-l));
}
.enco-pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--enco-esp-7); }
.enco-pie__contacto { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--enco-esp-2); font-weight: 700; }
.enco-pie__contacto a { text-decoration: none; }
.enco-pie__contacto a:hover { text-decoration: underline; }

/* ---------- Utilidades ---------- */
.enco-rejilla { display: grid; gap: var(--enco-hueco); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.enco-rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.enco-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }