/*
 * ═══════════════════════════════════════════════════════════════════════════
 * EmprenZona — capa de unificación
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * El sitio tenía dos lenguajes visuales: `hg-` (groove) en las 104 páginas
 * públicas y el rediseño 2026 en la portada y el directorio. Este archivo los
 * hace uno solo.
 *
 * La dirección del arreglo importa: los COLORES y el logo se quedan como están
 * —el groove ya es la identidad de la marca— y lo que se trae del rediseño es
 * la TIPOGRAFÍA y las FORMAS: títulos grandes con tracking cerrado, cursiva
 * serif para el énfasis, botones píldora y bordes generosos.
 *
 * Es una capa encima, no un reemplazo: se carga después del CSS existente y
 * sólo ajusta. Si hay que revertir, se saca el <link> del layout y todo vuelve
 * a como estaba.
 */

/* ── Tokens compartidos ─────────────────────────────────────────────────── */

:root {
  --ez-tinta: #22152d;
  --ez-papel: #fff8ef;
  --ez-suave: #6b6276;
  --ez-linea: rgba(52, 22, 77, .12);
  --ez-violeta: #7d4dff;
  --ez-rosa: #ff4fa3;
  --ez-coral: #ff7a59;
  --ez-amarillo: #ffd84d;
  --ez-menta: #4dd9c2;
  --ez-cielo: #66b7ff;

  --ez-r-sm: 12px;
  --ez-r-md: 18px;
  --ez-r-lg: 24px;
  --ez-r-xl: 32px;
  --ez-sombra: 0 18px 46px rgba(67, 40, 91, .14);

  /* Tracking del rediseño: es lo que más cambia la sensación del conjunto. */
  --ez-track: -.015em;
  --ez-track-titulo: -.055em;
}

/* ── Tipografía ─────────────────────────────────────────────────────────── */

.hg-body { letter-spacing: var(--ez-track); }

.hg-body h1, .hg-body h2, .hg-body h3,
.hg-body .hg-section-head h2,
.hg-body .hg-hero-copy h1 {
  letter-spacing: var(--ez-track-titulo);
  line-height: 1.02;
}
.hg-body h1 { font-weight: 850; }
.hg-body h2 { font-weight: 820; }
.hg-body h3 { font-weight: 750; letter-spacing: -.035em; line-height: 1.2; }

/*
 * El énfasis en cursiva serif es la marca del rediseño. Se aplica a <em> dentro
 * de títulos, que es donde estaba pensado: no toca el <em> de un párrafo, que
 * sigue siendo una cursiva normal.
 */
.hg-body h1 em, .hg-body h2 em, .hg-body h3 em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.045em;
}

/* Antetítulos: versalitas espaciadas, igual que en la portada. */
.hg-body .hg-eyebrow,
.hg-body .hg-kicker,
.hg-body .hg-section-head > span:first-child {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .69rem;
  font-weight: 800;
}

/* ── Botones ────────────────────────────────────────────────────────────── */

.hg-body .hg-btn,
.hg-body .hg-pill-btn,
.hg-body .btn,
.hg-body button.btn,
.hg-body a.btn {
  border-radius: 999px;
  font-weight: 750;
  letter-spacing: var(--ez-track);
  transition: transform .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.hg-body .hg-btn:hover,
.hg-body .hg-pill-btn:hover,
.hg-body .btn:hover { transform: translateY(-1px); }

.hg-body .btn-primary,
.hg-body .hg-btn--primary {
  background: linear-gradient(120deg, var(--ez-violeta), var(--ez-rosa));
  border-color: transparent;
  color: #fff;
}
.hg-body .btn-primary:hover,
.hg-body .hg-btn--primary:hover { box-shadow: 0 12px 28px rgba(125, 77, 255, .32); }

.hg-body .btn-outline,
.hg-body .hg-btn--ghost {
  border: 1px solid var(--ez-linea);
  background: transparent;
  color: inherit;
}
.hg-body .btn-outline:hover,
.hg-body .hg-btn--ghost:hover {
  background: var(--ez-violeta); border-color: var(--ez-violeta); color: #fff;
}

/* ── Formularios ────────────────────────────────────────────────────────── */
/*
 * Los formularios eran lo más disparejo del sitio: cada pantalla tenía su
 * alto, su radio y su borde. Acá quedan todos iguales, con un foco visible
 * que antes en varias pantallas no existía.
 */

.hg-body input[type="text"], .hg-body input[type="email"], .hg-body input[type="tel"],
.hg-body input[type="url"], .hg-body input[type="password"], .hg-body input[type="search"],
.hg-body input[type="number"], .hg-body input[type="date"], .hg-body input[type="time"],
.hg-body input[type="datetime-local"], .hg-body select, .hg-body textarea,
.hg-body .hg-field input, .hg-body .hg-field select, .hg-body .hg-field textarea,
.hg-body .input {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  font: inherit;
  font-size: 15px;
  color: var(--ez-tinta);
  background: #fff;
  border: 1px solid var(--ez-linea);
  border-radius: var(--ez-r-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hg-body textarea { min-height: 120px; line-height: 1.55; resize: vertical; }

.hg-body input:focus, .hg-body select:focus, .hg-body textarea:focus {
  outline: none;
  border-color: var(--ez-violeta);
  box-shadow: 0 0 0 3px rgba(125, 77, 255, .16);
}
.hg-body input::placeholder, .hg-body textarea::placeholder { color: #a79fb0; }

/* Los checkbox y radio quedan fuera: el reset de arriba los deformaba. */
.hg-body input[type="checkbox"], .hg-body input[type="radio"] {
  width: auto; min-height: 0; padding: 0; border-radius: 0;
  accent-color: var(--ez-violeta);
}
.hg-body input[type="file"] { padding: 10px 12px; }

.hg-body label,
.hg-body .hg-field > span:first-child {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ez-suave);
}

/* Errores: rojo de verdad y con espacio, no un texto pegado al campo. */
.hg-body .error-message, .hg-body .help-block.error,
.hg-body .input.error input, .hg-body .form-error {
  color: #c62368;
  font-size: .82rem;
  margin-top: 6px;
}
.hg-body .input.error input, .hg-body input.form-error, .hg-body .error input {
  border-color: #ff6fa8;
}

/* ── Tarjetas y superficies ─────────────────────────────────────────────── */

.hg-body .hg-public-card,
.hg-body .hg-listing-card,
.hg-body .hg-event-card,
.hg-body .hg-vertical-card,
.hg-body .hg-banner-card,
.hg-body .hg-zone-card,
.hg-body .card {
  border-radius: var(--ez-r-lg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hg-body .hg-public-card:hover,
.hg-body .hg-listing-card:hover,
.hg-body .hg-event-card:hover,
.hg-body .hg-vertical-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ez-sombra);
}

/* Las fotos mandan: en el rediseño la imagen ocupa más y no se recorta rara. */
.hg-body .hg-event-card img,
.hg-body .hg-listing-card img,
.hg-body .hg-public-card img,
.hg-body .hg-vertical-card img { object-fit: cover; }

/* ── Chips ──────────────────────────────────────────────────────────────── */

.hg-body .hg-chip {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: var(--ez-track);
}
.hg-body .hg-chip.is-active,
.hg-body .hg-chip[aria-pressed="true"] {
  background: var(--ez-violeta);
  border-color: var(--ez-violeta);
  color: #fff;
}

/* ── Textura ────────────────────────────────────────────────────────────── */
/*
 * El grano del rediseño, que es lo que hace que el crema se vea papel y no
 * pantalla. Va detrás de todo y no intercepta clics.
 */
.hg-body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .hg-body .hg-btn, .hg-body .btn, .hg-body .hg-public-card,
  .hg-body .hg-listing-card, .hg-body .hg-event-card { transition: none; }
  .hg-body .hg-btn:hover, .hg-body .btn:hover,
  .hg-body .hg-public-card:hover, .hg-body .hg-event-card:hover { transform: none; }
}

/* ── Que las fotos se vean ──────────────────────────────────────────────── */
/*
 * Las tarjetas de feria llevaban dos velos encima de la foto: un degradado
 * violeta al 74% en el estilo en línea y este overlay oscuro al 35–55%. Entre
 * los dos, una grilla entera de fotos reales se veía como bloques morados
 * iguales. Donde hay foto, el overlay se achica y se corre abajo, que es donde
 * apoyan las etiquetas y la fecha.
 */
.hg-event-cover.has-foto .hg-event-cover-overlay {
  background: linear-gradient(to bottom,
    rgba(10, 5, 30, .26) 0%,
    rgba(10, 5, 30, 0) 34%,
    rgba(10, 5, 30, 0) 58%,
    rgba(10, 5, 30, .52) 100%);
}
/* Un poco más de alto: la foto es lo que hace entrar a la ficha. */
.hg-body .hg-event-cover { min-height: 200px; }

/* Feria sin foto: el degradado de la marca con el día en grande de marca de
   agua. Antes caía en un SVG gris con rayas que se leía como "todavía cargando". */
.hg-event-cover.sin-foto { position: relative; }
.hg-event-cover.sin-foto::before {
  content: attr(data-dia);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(64px, 9vw, 108px);
  font-weight: 900;
  letter-spacing: -.06em;
  color: rgba(255, 255, 255, .26);
  pointer-events: none;
  z-index: 0;
}
.hg-event-cover.sin-foto .hg-event-cover-overlay { background: none; }

/* Mismo cuidado en el layout groove, por si algún día se cambia el logo por
   una imagen sin atributos de tamaño. */
.hg-body .hg-brand img, .hg-body .hg-footer-brand img { max-height: 44px; width: auto; }

/* ── Foco y alto de campos ──────────────────────────────────────────────── */
/*
 * Había reglas de `groove-source` más específicas que ganaban el :focus y
 * dejaban un halo blanco casi invisible. Un foco que no se ve rompe la
 * navegación con teclado, así que acá se fuerza con la misma especificidad que
 * usa el sistema viejo.
 */
.hg-body input:focus-visible, .hg-body select:focus-visible, .hg-body textarea:focus-visible,
.hg-body input:focus, .hg-body select:focus, .hg-body textarea:focus,
.hg-body .hg-field input:focus, .hg-body .hg-field select:focus, .hg-body .hg-field textarea:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: #7d4dff !important;
  box-shadow: 0 0 0 3px rgba(125, 77, 255, .22) !important;
}

/* Un solo alto para todos los campos de una línea. */
.hg-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.hg-body select,
.hg-body .hg-field input, .hg-body .hg-field select {
  min-height: 50px;
  height: auto;
}

/* Y foco visible también en botones y enlaces, que no lo tenían. */
.hg-body a:focus-visible, .hg-body button:focus-visible, .hg-body .btn:focus-visible {
  outline: 3px solid rgba(125, 77, 255, .55);
  outline-offset: 3px;
  border-radius: 999px;
}