:root {
  --me-page: #f6f7f9;
  --me-ink: #101828;
  --me-muted: #667085;
  --me-line: #dfe3e8;
  --me-surface: #ffffff;
  --me-navy: #101b32;
  --me-radius-sm: 12px;
  --me-radius: 20px;
  --me-shadow: 0 18px 48px rgba(16, 24, 40, .1);
  --me-shell: 1180px;
  --me-shell-gutter: 40px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--me-page);
  color: var(--me-ink);
  font: 16px/1.55 "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

.me-shell {
  width: min(calc(100% - var(--me-shell-gutter)), var(--me-shell));
  margin-inline: auto;
}

.me-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  padding: 10px max(20px, calc((100% - var(--me-shell)) / 2));
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid rgba(16, 24, 40, .08);
  position: relative;
  z-index: 5;
}

.me-brand {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--me-ink);
  text-decoration: none;
  font-weight: 760;
  letter-spacing: -.01em;
}

.me-brand__logo {
  width: auto;
  height: 54px;
  max-width: min(250px, 55vw);
  object-fit: contain;
}

.me-brand__label { max-width: 34rem; }

/* Las superficies con hero propio (landing, sede, slot y portal de
   colaborador) retiran el header: su marca vive dentro del hero -- sello en
   la landing, lockup de tres columnas en el resto -- y el unico control
   superior es el backlink de la esquina. (Decision del usuario, 2026-08-25;
   el portal se sumo cuando su hero gano el lockup completo.) */
.me-landing-page .me-header { display: none; }
.me-site-page .me-header { display: none; }
.me-gallery-page .me-header { display: none; }
.me-contributor-page .me-header { display: none; }

.me-site-page,
.me-gallery-page,
.me-contributor-page { position: relative; }

.me-kicker {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, .76);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.me-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 20px;
  background: var(--me-brand);
  color: var(--me-brand-contrast);
  cursor: pointer;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.me-button--light {
  background: #fff;
  color: var(--me-navy);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
}

.me-button:disabled { cursor: wait; opacity: .58; }

.me-landing-hero {
  min-height: 500px;
  padding-top: 28px;
  display: grid;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 0;
  color: #fff;
  background:
    radial-gradient(circle at 50% 25%, rgba(25, 50, 95, .16), transparent 50%),
    #08111F;
}

.me-hero-corner {
  position: absolute;
  bottom: 0;
  z-index: 1;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.me-hero-corner--left {
  left: -70px;
  bottom: -25px;
  width: clamp(380px, 25vw, 480px);
  opacity: .26;
  -webkit-mask-image:
    linear-gradient(to right, #000 0%, #000 45%, rgba(0, 0, 0, .65) 68%, transparent 100%),
    linear-gradient(to top, #000 0%, #000 52%, transparent 90%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 0%, #000 45%, rgba(0, 0, 0, .65) 68%, transparent 100%),
    linear-gradient(to top, #000 0%, #000 52%, transparent 90%);
  mask-composite: intersect;
}

.me-hero-corner--right {
  right: -80px;
  bottom: -30px;
  width: clamp(460px, 30vw, 580px);
  opacity: .44;
  -webkit-mask-image:
    linear-gradient(to left, #000 0%, #000 50%, rgba(0, 0, 0, .7) 72%, transparent 100%),
    linear-gradient(to top, #000 0%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to left, #000 0%, #000 50%, rgba(0, 0, 0, .7) 72%, transparent 100%),
    linear-gradient(to top, #000 0%, #000 82%, transparent 100%);
  mask-composite: intersect;
}

.me-landing-hero__content {
  max-width: 900px;
  padding-block: 4px 56px;
  position: relative;
  z-index: 2;
  text-align: center;
}

.me-landing-hero h1 {
  max-width: 1100px;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(52px, 4.2vw, 74px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: .98;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .me-landing-hero h1 { white-space: normal; }
}

.me-hero-seal {
  width: clamp(106px, 11.2vw, 146px);
  height: auto;
  display: block;
  margin: 0 auto 24px;
  object-fit: contain;
}

.me-landing-hero__copy {
  max-width: 680px;
  margin: .9rem auto 0;
  color: rgba(255, 255, 255, .68);
  font-size: clamp(18px, 1.45vw, 23px);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.5;
}

.me-hero-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.7rem;
}

.me-hero-badge {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding-inline: 16px;
  border-radius: 999px;
  --me-badge-tone: color-mix(in srgb, var(--me-badge-color, #94a3b8) 52%, white 48%);
  --me-badge-tone: hsl(from var(--me-badge-color, #94a3b8) h 82% 66%);
  border: 1px solid color-mix(in srgb, var(--me-badge-tone) 66%, transparent);
  background: color-mix(in srgb, var(--me-badge-tone) 12%, rgba(8, 17, 31, .55));
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.me-hero-badge__pin {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--me-badge-tone);
}

.me-landing-hero__credit {
  margin: 2.1rem auto 0;
  color: rgba(255, 255, 255, .38);
  font-size: 13px;
  letter-spacing: .02em;
}

.me-landing-hero__credit strong {
  color: rgba(255, 255, 255, .58);
  font-weight: 600;
}

.me-section { padding-block: clamp(64px, 9vw, 108px); }

.me-landing-sites {
  margin-top: -50px;
  position: relative;
  z-index: 4;
  padding-block: 0 clamp(56px, 8vw, 84px);
}

.me-section-heading { max-width: 650px; margin-bottom: 38px; }

.me-section-heading--after {
  max-width: none;
  margin: 24px 0 0;
  text-align: center;
}

.me-section-heading h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: #181825;
}

.me-section-heading > p:last-child { color: var(--me-muted); }

.me-visually-hidden-text {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  position: absolute;
  white-space: nowrap;
}

.me-site-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.me-site-card {
  overflow: hidden;
  display: block;
  border: 1px solid rgba(24, 24, 37, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  color: #181825;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .05);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.me-site-card__media {
  height: 205px;
  display: grid;
  place-items: center;
  padding: 22px 26px 32px;
  background-color: var(--me-site-color, var(--me-brand));
  background-position: center;
  background-size: cover;
  position: relative;
}

.me-site-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .2));
}

.me-site-card__identity { position: relative; z-index: 1; }

.me-site-card__identity img {
  max-width: min(280px, 66vw);
  max-height: 140px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .24));
}

.me-site-card__identity strong {
  color: #fff;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* Correccion optica por asset: ambos lockups quedan limitados por altura, y el
   de Merida (1200x947) resulta ~9% mas ancho que el de Campeche (1200x1035).
   Se compensa solo la altura del segundo para igualar masa visual. */
[data-site-slug="campeche"] .me-site-card__identity img { max-height: 151px; }

.me-site-card__body {
  display: grid;
  gap: 3px;
  padding: .9rem 1rem 1rem;
}

.me-site-card__body > strong {
  font-size: 1.08rem;
  font-weight: 800;
  color: #181825;
  line-height: 1.15;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-site-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-top: .5rem;
  line-height: 1.2;
}

.me-site-card__date {
  color: #6b7280;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

.me-site-card__date svg { color: var(--me-site-color, var(--me-brand)); }

/* Card pendiente en la landing mixta: mismo esqueleto de cuerpo que la card
   viva (nombre y fecha a la izquierda), con el contador -- o la nota de
   disponibilidad -- ocupando la columna derecha a la altura de esas dos
   filas. Sin fila extra debajo: ambas cards cierran a la misma altura. El
   JS de landing alterna contador/nota; el servidor ya renderiza el estado
   correcto para evitar parpadeo. */
.me-site-card--pending .me-site-card__body {
  grid-template-columns: minmax(0, 1fr) auto;
  /* La fila 1fr fantasma absorbe la altura sobrante del contador: nombre y
     fecha quedan anclados arriba exactamente como en la card viva, en vez
     de centrarse en filas infladas por el span. */
  grid-template-rows: auto auto 1fr;
  column-gap: 18px;
  align-items: start;
}

.me-site-card--pending .me-site-card__body > strong { grid-column: 1; grid-row: 1; }
.me-site-card--pending .me-site-card__date { grid-column: 1; grid-row: 2; margin-top: .5rem; }

.me-site-card__wait {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
}

.me-cd {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 2.2vw, 22px);
}

.me-cd[hidden] { display: none; }

.me-cd-unit {
  display: grid;
  gap: 2px;
  justify-items: center;
  min-width: 34px;
}

.me-cd-unit strong {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--me-site-color, var(--me-brand));
}

.me-cd-unit small {
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9ca3af;
}

.me-cd-after {
  display: block;
  max-width: 240px;
  color: var(--me-muted);
  font-size: .84rem;
  line-height: 1.4;
  text-align: left;
}

.me-cd-after[hidden] { display: none; }

.me-site-card__action {
  margin-left: auto;
  color: var(--me-site-color, var(--me-brand));
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: gap .18s ease;
}

/* Theming por sede: un solo template, identidad via tokens derivados del
   branding de datos -- ninguna sede se nombra en la hoja. Los accents solidos
   deben sostener texto blanco encima y texto pequeno sobre fondo claro. */
.me-venue {
  /* Dos medidas, no tres. El container del hero comparte borde exacto con el
     dock y con la galeria (1400px, la misma medida que la grid comercial para
     que la densidad de miniaturas coincida): asi el backlink cae sobre el
     borde de todo lo que viene despues. Dentro de el, la composicion vive en
     su propia medida corta y centrada, para que las tres piezas formen un
     grupo y no una fila repartida por el viewport. */
  --me-shell: 1400px;
  --me-shell-gutter: 48px;
  --me-venue-hero-shell: 1400px;
  --me-venue-lockup: 1080px;
  /* El dock se mide por su contenido, no por la columna: la fila de filtros
     pide ~650px, asi que la tarjeta cierra en 760 y deja aire a los lados sin
     estirarse de borde a borde. */
  --me-venue-dock: 760px;
  --me-venue-accent: var(--me-brand);
  --me-venue-accent-soft: rgba(16, 24, 40, .07);
  --me-venue-accent-soft: color-mix(in srgb, var(--me-venue-accent) 12%, transparent);
  /* Version del accent legible sobre el navy del hero: se normaliza la
     luminosidad para que ninguna sede se vea apagada sobre fondo oscuro. */
  --me-venue-accent-on-dark: color-mix(in srgb, var(--me-venue-accent) 52%, #ffffff);
  --me-venue-accent-on-dark: hsl(from var(--me-venue-accent) h 82% 68%);
  /* Campo tonal mas profundo (32% de marca) para que el vino de Merida y el
     navy de Campeche se lean como color de sede, no como "oscuro generico". */
  --me-venue-hero-bg: #14203a;
  --me-venue-hero-bg: color-mix(in srgb, var(--me-brand) 32%, #070b13);
  --me-venue-hero-bg-deep: #070b13;
  /* La luz central se tine con el accent de la sede: calida en Merida, fria
     en Campeche. El fallback neutro cubre navegadores sin color-mix. */
  --me-venue-hero-glow: rgba(148, 163, 184, .14);
  --me-venue-hero-glow: color-mix(in srgb, var(--me-venue-accent-on-dark) 20%, transparent);
  /* Scrims del hero con textura: el gradiente oscuro que doma al tonal.
     Densos en los bordes verticales, algo mas abiertos al centro; toman un
     matiz leve de la marca para que el oscuro sea vino en Merida y navy en
     Campeche, nunca negro plano. */
  --me-venue-hero-scrim-strong: rgba(6, 3, 5, .82);
  --me-venue-hero-scrim-strong: color-mix(in srgb, var(--me-brand) 12%, rgb(3 2 4 / .84));
  --me-venue-hero-scrim-soft: rgba(18, 8, 12, .48);
  --me-venue-hero-scrim-soft: color-mix(in srgb, var(--me-brand) 20%, rgb(6 3 5 / .5));
}

.me-venue-hero {
  min-height: 300px;
  overflow: hidden;
  display: grid;
  align-items: center;
  position: relative;
  z-index: 0;
  color: #fff;
  text-align: center;
  /* El glow queda detras del grupo central y una vineta suave apaga los
     bordes: el fondo lleva la mirada al centro en vez de repartirla. El grano
     de la primera capa (ruido SVG con opacidad horneada) quita la sensacion
     de gradiente digital plano sin llegar a percibirse como textura. */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>") repeat,
    radial-gradient(ellipse 62% 78% at 50% 46%, var(--me-venue-hero-glow), transparent 66%),
    radial-gradient(ellipse 90% 100% at 50% 50%, transparent 42%, rgba(0, 0, 0, .30) 100%),
    linear-gradient(135deg, var(--me-venue-hero-bg), var(--me-venue-hero-bg-deep));
}

/* Filete superior de sede: enmarca el hero en el accent y rima con el filete
   del dock y la firma del kicker. */
.me-venue-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: min(560px, 72%);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--me-venue-accent-on-dark), transparent);
}

/* Textura de la sede: el asset hero del branding (dato, no hardcode; el
   mismo que la card de la landing usa como fondo) como atmosfera, no como
   fondo plano. Composicion de capas, de abajo hacia arriba: el campo base
   del hero (vino profundo + grano + glow, heredado sin override), el tonal
   en cover, y dentro del mismo pseudo dos scrims encima -- vineta radial y
   gradiente vertical oscuro -- que mandan sobre la imagen. La opacidad
   global del pseudo deja respirar al campo y al grano de abajo, y el
   saturate doma el rojo. Formula: el gradiente manda, el tonal acompana.
   Los lavados de corner se retiran para no duplicar textura. */
.me-venue-hero--textured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .85;
  filter: saturate(.88);
  background:
    radial-gradient(ellipse 82% 110% at 50% 44%, transparent 30%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(180deg, var(--me-venue-hero-scrim-strong) 0%, var(--me-venue-hero-scrim-soft) 46%, var(--me-venue-hero-scrim-strong) 100%),
    var(--me-venue-hero-image) center / cover no-repeat;
  pointer-events: none;
}

.me-venue-hero--textured .me-venue-hero__corner--right { display: none; }

.me-venue-hero__back {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-left: -4px;
  padding: 4px;
  color: rgba(255, 255, 255, .58);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .18s ease;
}

.me-venue-hero__back:hover { color: #fff; }

/* El hero usa la misma clase container que el resto y la misma medida que la
   galeria: el backlink se alinea exacto con el borde de la retícula de fotos.
   El padding es asimetrico a proposito -- el hero centra su contenido, asi que
   cargar el padding abajo consume ahi el sobrante y deja el backlink cerca del
   borde superior sin apretar la transicion hacia el dock. */
.me-venue-hero__content {
  --me-shell: var(--me-venue-hero-shell);
  position: relative;
  z-index: 2;
  padding-block: 28px 64px;
  text-align: left;
}

/* Retícula de tres columnas del hero: logo de la carrera, bloque central de
   texto/metadata y la marca del evento como respaldo, centradas dentro de la medida
   corta del lockup. Restaurada por decision del usuario (2026-08-25). */
.me-venue-lockup {
  max-width: var(--me-venue-lockup);
  margin: 10px auto 0;
  display: grid;
  /* Las tres piezas se agrupan como un solo bloque: columnas al contenido y
     el grupo entero centrado, con separacion leve entre logo de sede,
     metadata y logo del evento (nada de repartirlas por la medida). */
  grid-template-columns: auto minmax(0, auto) auto;
  justify-content: center;
  align-items: center;
  gap: clamp(36px, 5vw, 76px);
}

.me-venue-lockup__mark {
  width: clamp(112px, 12.5vw, 176px);
  max-height: 176px;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35));
}

/* Columna derecha del lockup: la marca del evento como respaldo oficial.
   Sustituye a la lupa "Buscar mis fotos" (redundante con el dock que vive
   inmediatamente debajo). Deliberadamente menor que el mark de la sede:
   patrocina, no compite. */
.me-venue-lockup__sponsor-mark {
  width: clamp(112px, 12.5vw, 168px);
  max-height: 168px;
  object-fit: contain;
  opacity: .94;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .3));
}

/* Acento de corner sobre el hero: el asset (resuelto por slug; si no existe,
   el <img> se retira solo) esta dibujado para la esquina inferior izquierda
   -- igual que en la landing. Pinta POR ENCIMA del scrim (los hijos del
   section se dibujan sobre el ::before a igual z), asi que sobre la textura
   domada se lee como capa nitida de primer plano: atmosfera difusa detras,
   acento crisp delante. Un solo corner: el espejo derecho se retira cuando
   hay textura para no recargar; la mascara lo funde hacia el centro y hacia
   arriba. Nunca compite con el texto (z 1 contra z 2 del contenido). */
.me-venue-hero__corner {
  position: absolute;
  left: -40px;
  bottom: -24px;
  z-index: 1;
  width: clamp(280px, 24vw, 440px);
  height: auto;
  object-fit: contain;
  opacity: .16;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image:
    linear-gradient(to right, #000 0%, #000 38%, transparent 95%),
    linear-gradient(to top, #000 0%, #000 55%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 0%, #000 38%, transparent 95%),
    linear-gradient(to top, #000 0%, #000 55%, transparent 96%);
  mask-composite: intersect;
}

/* El espejo hereda todo del base; el scaleX invierte tambien la mascara,
   asi que el desvanecido queda orientado correcto hacia el centro. Solo se
   muestra en sedes sin textura tonal, como equilibrio del marco. */
.me-venue-hero__corner--right {
  left: auto;
  right: -40px;
  transform: scaleX(-1);
  opacity: .1;
}

/* Excepcion optica de Campeche (misma via que la de su card): las olas de su
   asset estan dibujadas para la esquina derecha -- asi se usan en la landing
   -- de modo que su corner unico vive a la derecha, sin voltear, con la
   mascara espejada a mano porque aqui no hay scaleX que la invierta. */
.me-venue-hero[data-site-slug="campeche"] .me-venue-hero__corner {
  left: auto;
  right: -40px;
  -webkit-mask-image:
    linear-gradient(to left, #000 0%, #000 38%, transparent 95%),
    linear-gradient(to top, #000 0%, #000 55%, transparent 96%);
  mask-image:
    linear-gradient(to left, #000 0%, #000 38%, transparent 95%),
    linear-gradient(to top, #000 0%, #000 55%, transparent 96%);
}

/* Bloque central del hero: kicker, titulo y metadata. */
.me-venue-lockup__text {
  min-width: 0;
  max-width: 520px;
  position: relative;
  text-align: center;
}

/* Separadores del lockup: dos filetes verticales a media distancia del gap,
   con el mismo desvanecido en los extremos que la firma del kicker. Neutros
   a proposito -- el accent ya tiene sus tres apariciones medidas. */
.me-venue-lockup__text::before,
.me-venue-lockup__text::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 62px;
  transform: translateY(-50%);
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .16), transparent);
}

.me-venue-lockup__text::before { left: calc(-1 * clamp(18px, 2.5vw, 38px)); }
.me-venue-lockup__text::after { right: calc(-1 * clamp(18px, 2.5vw, 38px)); }

.me-venue-hero h1 {
  margin: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem, 3.9vw, 3.55rem);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.04;
}

.me-venue-hero .me-kicker {
  margin-bottom: 9px;
  font-size: .72rem;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .64);
}

/* Firma de marca del bloque central: un solo filete corto entre el eyebrow y
   el titulo, en el accent de la sede. Ningun otro adorno. */
.me-venue-hero .me-kicker::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--me-venue-accent-on-dark), transparent);
}

/* Metadata del hero: misma receta que la card de las galerias comerciales
   (icono + texto, separadores circulares, lugar con ellipsis). */
.me-venue-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  margin-top: 1rem;
  min-width: 0;
  color: rgba(255, 255, 255, .74);
  font-size: clamp(.8rem, 1.6vw, .9rem);
  line-height: 1.35;
}

.me-venue-meta__item {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}

.me-venue-meta__ico {
  flex: 0 0 auto;
  font-size: .95rem;
  opacity: .78;
}

.me-venue-meta__ico--count {
  color: var(--me-venue-accent-on-dark);
  opacity: 1;
}

.me-venue-meta__sep {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .32);
}

.me-site-content { padding-bottom: 96px; }

.me-filter-section {
  margin-top: clamp(30px, 5vw, 46px);
  position: relative;
  z-index: 3;
  text-align: center;
}

/* Search dock: tarjeta blanca superpuesta entre hero y galeria. Sigue siendo
   una herramienta funcional y neutral; la unica senal de sede es el filete
   superior corto en el accent (::before). */
.me-venue .me-filter-section {
  max-width: var(--me-venue-dock);
  margin: -34px auto 0;
  z-index: 5;
  padding: 18px 28px 20px;
  background: var(--me-surface);
  border: 1px solid rgba(20, 27, 45, .08);
  border-radius: 18px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .08);
}

.me-venue .me-filter-section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(180px, 42%);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--me-venue-accent), transparent);
}

/* Credito bajo el dock de filtros: una sola linea de proveniencia, muted y
   centrada -- informa sin competir con la tarjeta ni con la galeria. */
.me-filter-credit {
  margin: 10px auto 0;
  max-width: var(--me-venue-dock);
  text-align: center;
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--me-muted);
}

.me-filter-title {
  margin: 0 0 10px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--me-muted);
}

.me-filter-options {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
}

.me-filter-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid rgba(34, 25, 20, .18);
  border-radius: 10px;
  background: #ffffff;
  color: var(--me-ink);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.me-filter-ico { font-size: 1rem; line-height: 1; flex: 0 0 auto; }

.me-filter-btn--selfie .me-filter-ico { color: #7c3aed; }
.me-filter-btn--bib .me-filter-ico { color: #1d4ed8; }
.me-filter-btn--hour .me-filter-ico { color: #0f766e; }
.me-filter-btn--pets .me-filter-ico { color: #b45309; }

.me-filter-caret {
  font-size: .78rem;
  line-height: 1;
  color: #a49c92;
  flex: 0 0 auto;
  transition: transform .2s ease;
}

.me-filter-btn.active {
  background: var(--me-brand);
  border-color: var(--me-brand);
  color: var(--me-brand-contrast);
}

.me-filter-btn.active .me-filter-ico,
.me-filter-btn.active .me-filter-caret { color: var(--me-brand-contrast); }

.me-filter-btn.active .me-filter-caret { transform: rotate(180deg); }

.me-filter-label-short { display: none; }

/* Paneles desplegables: expansion suave via grid-template-rows 0fr -> 1fr
   (el hijo con overflow hidden hace de mascara), igual que la galeria
   comercial. Cerrado usa visibility para sacar el contenido del foco. */
.me-filter-drop {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows .28s ease,
    opacity .2s ease,
    margin-top .28s ease,
    visibility 0s linear .28s;
}

.me-filter-drop.is-open {
  grid-template-rows: 1fr;
  margin-top: .85rem;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows .28s ease,
    opacity .22s ease .05s,
    margin-top .28s ease,
    visibility 0s;
}

.me-filter-drop__clip {
  overflow: hidden;
  min-height: 0;
}

.me-filter-drop__content {
  max-width: 440px;
  margin: 2px auto 4px;
  padding: 1rem 1rem 1.1rem;
  border: 1px solid rgba(34, 25, 20, .1);
  border-radius: 12px;
  background: #fbfaf8;
}

.me-drop-form { display: flex; flex-direction: column; }

.me-drop-controls { display: grid; gap: .7rem; }

.me-drop-title {
  margin: 0 0 .15rem;
  font-size: .86rem;
  font-weight: 700;
  text-align: center;
}

.me-drop-hint {
  margin: 0 0 .85rem;
  color: var(--me-muted);
  font-size: .78rem;
  text-align: center;
}

.me-bib-input,
.me-time-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(34, 25, 20, .16);
  border-radius: 10px;
  padding: .68rem .9rem;
  background: #fff;
  color: var(--me-ink);
  font-weight: 700;
  letter-spacing: -.01em;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.me-bib-input {
  font-size: .92rem;
  letter-spacing: .08em;
  text-align: center;
}

.me-time-input { font-size: .88rem; }

.me-bib-input:focus,
.me-time-input:focus {
  outline: none;
  border-color: var(--me-venue-accent, var(--me-brand));
  box-shadow: 0 0 0 3px var(--me-venue-accent-soft, rgba(29, 78, 216, .12));
}

.me-time-fields { display: grid; gap: .5rem; }

.me-time-fields label { display: grid; gap: .25rem; }

.me-time-label {
  color: var(--me-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.me-filter-cta {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 0;
  border-radius: 10px;
  padding: .72rem .9rem;
  background: var(--me-venue-accent, var(--me-brand));
  color: #fff;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 700;
  transition: filter .15s ease, opacity .15s ease;
}

.me-filter-cta:disabled { opacity: .45; cursor: not-allowed; }

@media (min-width: 577px) {
  .me-filter-drop__content { max-width: 700px; padding: .8rem 1rem; }
  .me-drop-form { flex-direction: row; align-items: center; gap: 1.1rem; text-align: left; }
  .me-drop-text { flex: 1 1 auto; min-width: 0; }
  .me-drop-title { margin-bottom: .1rem; text-align: left; }
  .me-drop-hint { margin-bottom: 0; text-align: left; }
  .me-drop-controls { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
  .me-drop-controls .me-filter-cta { width: auto; padding: .58rem 1rem; white-space: nowrap; }
  .me-drop-controls .me-bib-input { width: 160px; padding: .55rem .7rem; }
  .me-time-fields { grid-auto-flow: column; gap: .45rem; }
  .me-drop-controls .me-time-input { width: 190px; padding: .55rem .6rem; }
}

.me-text-button {
  min-height: 44px;
  margin-top: 16px;
  border: 0;
  padding: 8px 0;
  background: transparent;
  color: var(--me-brand);
  cursor: pointer;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.me-text-button[hidden] { display: none; }

input.me-visually-hidden {
  width: 1px;
  height: 1px;
  min-height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  position: absolute;
  white-space: nowrap;
}

/* Modal de selfie: misma pieza que la galeria comercial (card blanca, caja de
   carga crema con vista previa local, nota de privacidad y CTA). */
.me-selfie-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(22, 18, 15, .45);
}

.me-selfie-overlay[hidden] { display: none; }

body.me-modal-open { overflow: hidden; }

.me-selfie-card {
  width: 100%;
  max-width: 420px;
  border: 1px solid rgba(34, 25, 20, .1);
  border-radius: 16px;
  background: var(--me-surface);
  box-shadow: 0 24px 60px rgba(22, 18, 15, .18);
  animation: meModalIn .25s ease;
}

@keyframes meModalIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.me-selfie-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .95rem 1.15rem;
  border-bottom: 1px solid rgba(34, 25, 20, .1);
}

.me-selfie-card__header h3 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.me-selfie-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--me-muted);
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.me-selfie-close:hover { background: rgba(34, 25, 20, .06); color: var(--me-ink); }

.me-selfie-card__body {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.1rem 1.15rem 1.2rem;
}

.me-selfie-hint {
  margin: 0;
  color: var(--me-muted);
  font-size: .82rem;
  text-align: center;
}

.me-selfie-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  padding: 1.1rem;
  border: 2px dashed rgba(34, 25, 20, .22);
  border-radius: 12px;
  background: #fbfaf8;
  cursor: pointer;
  text-align: center;
  transition: background .15s ease, border-color .15s ease;
}

.me-selfie-drop:hover { background: #f6f3ee; border-color: rgba(34, 25, 20, .34); }

.me-selfie-visual {
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #f0ede7;
}

.me-selfie-visual__ico { font-size: 2.1rem; color: #7c3aed; }

.me-selfie-visual__ico[hidden] { display: none; }

.me-selfie-visual__preview {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.me-selfie-visual__preview[hidden] { display: none; }

.me-selfie-filename {
  font-size: .8rem;
  font-weight: 600;
  word-break: break-word;
}

.me-selfie-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin: 0;
  color: var(--me-muted);
  font-size: .74rem;
}

.me-selfie-privacy svg { color: #15803d; flex: 0 0 auto; }

.me-gallery { padding-top: clamp(44px, 6vw, 64px); }

.me-venue .me-gallery { padding-top: 16px; }

/* Microcabecera de cobertura: explica que representan las tabs y cierra con
   el total real de la sede. Deliberadamente discreta: el branding fuerte
   termina en el hero. */
.me-gallery__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
}

.me-gallery__label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  color: var(--me-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.me-gallery__label::before {
  content: "";
  width: 3px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 2px;
  background: var(--me-venue-accent, var(--me-brand));
}


.me-venue .me-tab.active {
  border-color: var(--me-venue-accent);
  background: var(--me-venue-accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .12);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--me-venue-accent) 30%, transparent);
}

.me-venue .me-tab:not(.active):focus-visible {
  border-color: var(--me-venue-accent);
  background: var(--me-venue-accent-soft);
  color: var(--me-ink);
}

.me-venue .me-button {
  background: var(--me-venue-accent);
  color: #fff;
}

.me-venue .me-text-button { color: var(--me-venue-accent); }

.me-gallery--standalone { padding-bottom: 90px; }

/* Estado de busqueda: pill flotante centrada en lugar de texto plano. Vacia
   no ocupa lugar; el tono (neutro / bloqueo / error) cambia solo el punto y
   el filete, nunca el formato del mensaje. */
.me-search-status {
  display: none;
  margin: 0 auto 12px;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: .5rem;
  padding: 8px 16px;
  border: 1px solid rgba(16, 24, 40, .1);
  border-radius: 999px;
  background: var(--me-surface, #fff);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .09);
  color: var(--me-ink);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.3;
}

.me-search-status:not(:empty) { display: flex; }

.me-search-status:not(:empty)::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--me-venue-accent, var(--me-brand));
}

.me-search-status--block { border-color: rgba(217, 119, 6, .35); }
.me-search-status--block:not(:empty)::before { background: #d97706; }

.me-search-status--error { border-color: rgba(220, 38, 38, .3); }
.me-search-status--error:not(:empty)::before { background: #dc2626; }

/* Mientras hay una peticion en vuelo la reticula se atenua: la senal de
   progreso vive en el control que inicio la busqueda, no sobre las fotos. */
.me-photo-grid { transition: opacity .25s ease; }

.me-photo-grid.is-busy {
  opacity: .45;
  pointer-events: none;
}

.me-filter-btn.is-searching .me-filter-ico { display: none; }

.me-filter-btn.is-searching::before,
.me-filter-cta.is-searching::before {
  content: "";
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  border: 2px solid rgba(16, 24, 40, .18);
  border-top-color: var(--me-venue-accent, var(--me-brand));
  border-radius: 50%;
  animation: me-search-spin .7s linear infinite;
}

.me-filter-cta.is-searching::before {
  border-color: rgba(255, 255, 255, .35);
  border-top-color: #fff;
}

.me-filter-cta.is-searching:disabled { opacity: .78; }

@keyframes me-search-spin {
  to { transform: rotate(360deg); }
}

.me-tabs {
  display: flex;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  margin: 0 0 16px;
  padding-bottom: 4px;
  white-space: nowrap;
  scrollbar-width: thin;
}

/* Chips de galeria: filete de un pixel sobre el fondo de pagina en vez de una
   caja blanca, texto de cuerpo pequeno y peso medio. El alto baja a 38px en
   puntero; el minimo tactil de 44px se restituye en el breakpoint movil. */
.me-tab {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(16, 24, 40, .11);
  border-radius: 999px;
  padding: 7px 15px;
  background: transparent;
  color: var(--me-muted);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .002em;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.me-tab.active {
  border-color: var(--me-brand);
  background: var(--me-brand);
  color: var(--me-brand-contrast);
  font-weight: 700;
}

.me-photo-grid {
  --me-row-h: 160px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.me-photo-card {
  --me-ar: 3 / 2;
  position: relative;
  aspect-ratio: var(--me-ar);
  flex-grow: calc(var(--me-ar) * 100);
  flex-basis: calc(var(--me-row-h) * var(--me-ar));
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: #dfe3e8;
  cursor: zoom-in;
}

.me-photo-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 35%;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.me-photo-grid::after { content: ""; flex-grow: 1000000; flex-basis: 0; }

.me-empty { width: 100%; padding: 40px 0; color: var(--me-muted); }

.me-load-more { margin: 30px auto 0; display: flex; }

.load-more[hidden] { display: none; }

/* Scroll infinito: centinela con spinner y marcador de fin, como el comercial. */
.me-gallery-sentinel {
  display: flex;
  justify-content: center;
  padding: 1.75rem 0 .5rem;
}

.me-gallery-sentinel[hidden] { display: none; }

.me-gallery-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid var(--me-line);
  border-top-color: var(--me-venue-accent, var(--me-brand));
  border-radius: 50%;
  animation: meSpin .7s linear infinite;
}

@keyframes meSpin { to { transform: rotate(360deg); } }

.me-gallery-end {
  margin: 0;
  padding: 1.75rem 0 .5rem;
  color: #a3a3a3;
  font-size: .85rem;
  letter-spacing: .02em;
  text-align: center;
}

.me-gallery-end[hidden] { display: none; }

.me-photo-dialog {
  width: min(96vw, 1120px);
  max-height: 94vh;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 24px;
  padding: 0;
  background: linear-gradient(180deg, rgba(28, 31, 37, .98) 0%, rgba(22, 24, 29, .98) 100%);
  color: #fff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .38);
}

.me-photo-dialog::backdrop { background: rgba(0, 0, 0, .86); }

.me-dialog-media {
  position: relative;
  padding: .75rem;
  border-radius: 24px 24px 0 0;
  background: #1a1d22;
}

.me-dialog-stage {
  min-height: 40vh;
  display: grid;
  place-items: center;
}

.me-dialog-stage img {
  max-width: 100%;
  max-height: min(74vh, 720px);
  display: block;
  object-fit: contain;
  border-radius: 14px;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
  transition: filter .22s ease;
}

.me-dialog-stage img.is-loading { filter: blur(14px); }

.me-dialog-nav {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 0;
  background: rgba(22, 24, 29, .72);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}

.me-dialog-nav:hover:not(:disabled) { background: rgba(48, 56, 68, .88); }

.me-dialog-nav:disabled { opacity: .3; cursor: default; }

.me-dialog-nav[hidden] { display: none; }

.me-dialog-nav--prev { left: .8rem; }

.me-dialog-nav--next { right: .8rem; }

.me-dialog-counter {
  position: absolute;
  left: .95rem;
  bottom: .85rem;
  z-index: 6;
  padding: .32rem .72rem;
  border-radius: 999px;
  background: rgba(15, 17, 20, .62);
  color: rgba(255, 255, 255, .92);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .03em;
  pointer-events: none;
}

.me-dialog-counter[hidden] { display: none; }

.me-dialog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.me-dialog-info {
  min-width: 0;
  display: grid;
  gap: .3rem;
}

.me-dialog-meta {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  min-width: 0;
  color: rgba(255, 255, 255, .9);
  font-size: .86rem;
  font-weight: 600;
}

.me-dialog-meta[hidden] { display: none; }

.me-dialog-meta__filename {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.me-dialog-meta__size {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, .55);
  font-size: .78rem;
  font-weight: 500;
}

.me-dialog-meta__size[hidden] { display: none; }

/* CTA primario del modal: misma receta que el boton principal comercial
   (gradiente del accent + sombra profunda) para que la descarga del
   original sea el elemento mas visible de la barra. */
.me-dialog-download {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  flex: 0 0 auto;
  border-radius: 14px;
  padding: .8rem 1.6rem;
  background: linear-gradient(
    135deg,
    var(--me-venue-accent, var(--me-brand)),
    color-mix(in srgb, var(--me-venue-accent, var(--me-brand)) 76%, #000)
  );
  color: #fff;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .32);
  transition: transform .16s ease, box-shadow .2s ease, filter .18s ease;
}

.me-dialog-download[hidden] { display: none; }

.me-dialog-close {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 0;
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 7;
  background: rgba(22, 24, 29, .78);
  color: #fff;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}

.section { max-width: var(--me-shell); margin: auto; padding: 40px 20px; }
.panel, .status-row { margin: 16px 0; border: 1px solid var(--me-line); border-radius: 14px; padding: 18px; background: #fff; }
.status-grid { display: grid; gap: 12px; }
.warning { color: #b42318; font-weight: 700; }

:focus-visible { outline: 3px solid #f2b705; outline-offset: 3px; }

@media (hover: hover) {
  .me-button:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(16, 24, 40, .18); }
  .me-site-card:hover { transform: translateY(-3px); box-shadow: 0 18px 32px rgba(0, 0, 0, .08); border-color: rgba(15, 23, 42, .12); }
  .me-site-card:hover .me-site-card__action { gap: .55rem; }
  .me-filter-btn:not(.active):hover { border-color: rgba(34, 25, 20, .42); box-shadow: 0 3px 8px rgba(15, 23, 42, .09); transform: translateY(-1px); }
  .me-venue .me-tab:not(.active):hover {
    border-color: color-mix(in srgb, var(--me-venue-accent) 34%, transparent);
    background: var(--me-venue-accent-soft);
    color: var(--me-ink);
  }
  .me-filter-cta:not(:disabled):hover { filter: brightness(1.08); }
  .me-dialog-download:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(0, 0, 0, .34); }
  .me-photo-card:hover img { transform: scale(1.04); }
  .me-photo-card img { transition: transform .25s ease; }
}

@media (max-width: 1023px) {
  .me-photo-grid { --me-row-h: 130px; }
}

@media (max-width: 576px) {
  .me-filter-label-long { display: none; }
  .me-filter-label-short { display: inline; }
  .me-venue .me-filter-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .me-filter-btn--selfie { order: 1; }
  .me-filter-btn--pets { order: 2; }
  .me-filter-btn--bib { order: 3; }
  .me-filter-btn--hour { order: 4; }
  /* Grid movil denso de 6 unidades, como la comercial: tres verticales por
     renglon; las horizontales van aisladas (span 4), emparejadas de 2 en 2
     (span 3) o cierran el renglon a ancho completo. Las clases --wide-paired
     y --wide-full las asigna refreshMobilePattern() en gallery.js. */
  .me-photo-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: calc((100vw - var(--me-shell-gutter) - 40px) / 6);
    grid-auto-flow: dense;
    gap: 8px;
  }
  .me-photo-card {
    aspect-ratio: auto;
    grid-column: span 2;
    grid-row: span 3;
  }
  .me-photo-card.me-photo-card--wide {
    grid-column: span 4;
    grid-row: span 3;
  }
  .me-photo-card.me-photo-card--wide-paired {
    grid-column: span 3;
    grid-row: span 2;
  }
  .me-photo-card.me-photo-card--wide-full {
    grid-column: 1 / -1;
    grid-row: span 4;
  }
  /* El relleno del layout justificado seria una celda fantasma en grid. */
  .me-photo-grid::after { content: none; }
}

@media (max-width: 760px) {
  :root { --me-shell-gutter: 28px; }
  .me-header { min-height: 68px; padding-inline: 14px; }
  .me-brand { min-height: 48px; gap: 10px; }
  .me-brand__logo { height: 48px; max-width: 52vw; }
  .me-brand__label { font-size: .9rem; }
  .me-landing-hero { min-height: 445px; padding-top: 16px; }
  .me-landing-hero h1 {
    max-width: 330px;
    margin-inline: auto;
    font-size: clamp(34px, 9.6vw, 42px);
    line-height: 1;
    letter-spacing: -.015em;
    overflow-wrap: normal;
    hyphens: none;
  }
  .me-landing-hero__content { padding-block: 4px 60px; }
  .me-hero-seal { width: clamp(92px, 24vw, 118px); margin-bottom: 22px; }
  .me-hero-corner--left { width: 250px; left: -115px; bottom: -20px; opacity: .18; }
  .me-hero-corner--right { width: 270px; right: -125px; bottom: -15px; opacity: .27; }
  .me-hero-badges { flex-wrap: nowrap; gap: 6px; margin-top: 1.35rem; }
  .me-hero-badge {
    flex: 0 1 auto;
    min-height: 34px;
    min-width: 0;
    justify-content: center;
    gap: .28rem;
    padding-inline: 11px;
    font-size: 10.5px;
    letter-spacing: .015em;
  }
  .me-hero-badge__pin { width: 11px; height: 11px; }
  .me-landing-hero__copy {
    max-width: 340px;
    margin-top: .75rem;
    font-size: 17px;
    line-height: 1.4;
  }
  .me-landing-hero__credit { margin-top: 1.7rem; font-size: 12px; }
  .me-site-cards { grid-template-columns: 1fr; }
  .me-site-card__media { height: 158px; padding: 14px 18px 22px; }
  .me-site-card__identity img { max-height: 110px; }
  [data-site-slug="campeche"] .me-site-card__identity img { max-height: 118px; }
  .me-site-card__body > strong { white-space: normal; }
  .me-venue { --me-shell-gutter: 28px; }
  .me-venue-hero { min-height: 0; }
  .me-venue-hero__content { padding-block: 26px 48px; text-align: center; }
  /* El backlink no participa del centrado del hero: anclado arriba a la
     izquierda como en desktop, fuera del eje de los logos. */
  .me-venue-hero__back { display: flex; width: fit-content; margin-left: 0; font-size: .76rem; }
  /* Movil: reticula de tres columnas redisenada. Los logos flanquean solo
     el bloque de identidad (kicker + titulo); la metadata cruza debajo a
     todo el ancho en una sola linea, como base del lockup. El contenedor
     de texto se disuelve en la reticula (display: contents) para que
     kicker, titulo y metadata sean piezas propias: la columna central cede
     (minmax 0) y el titulo hace wrap antes de empujar las marcas fuera
     del shell. Desktop no se toca. */
  .me-venue-lockup {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "identity kicker sponsor"
      "identity title sponsor"
      "meta meta meta";
    align-items: center;
    column-gap: clamp(14px, 4vw, 26px);
    row-gap: 0;
    margin-top: 14px;
  }
  .me-venue-lockup__identity { grid-area: identity; }
  .me-venue-lockup__sponsor { grid-area: sponsor; }
  .me-venue-lockup__text { display: contents; }
  .me-venue-hero .me-kicker { grid-area: kicker; align-self: end; }
  .me-venue-hero h1 { grid-area: title; align-self: start; }
  .me-venue-meta { grid-area: meta; }
  .me-venue-lockup__mark { width: clamp(74px, 21vw, 114px); max-height: 114px; }
  .me-venue-lockup__sponsor-mark { width: clamp(74px, 21vw, 114px); max-height: 114px; }
  .me-venue-hero__corner { left: -60px; bottom: -14px; width: 240px; opacity: .12; }
  .me-venue-hero[data-site-slug="campeche"] .me-venue-hero__corner { left: auto; right: -60px; }
  .me-venue-hero__corner--right { display: none; }
  .me-venue-hero::after { width: min(320px, 78%); }
  /* Con el contenedor disuelto, sus pseudos se volverian items sueltos de
     la reticula: fuera. A este gap ademas serian ruido pegado a los logos. */
  .me-venue-lockup__text::before,
  .me-venue-lockup__text::after { content: none; }
  .me-venue-hero h1 { margin: 0; font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .me-venue-hero .me-kicker { margin-bottom: 6px; font-size: .62rem; letter-spacing: .12em; }
  .me-venue-hero .me-kicker::after { width: 26px; margin-top: 8px; }
  .me-venue-meta { gap: .3rem .55rem; margin-top: .95rem; font-size: .76rem; }
  .me-venue-meta__sep { width: 3px; height: 3px; }
  .me-venue .me-filter-section {
    margin-top: -28px;
    padding: 18px 16px 20px;
    border-radius: 16px;
  }
  .me-venue .me-gallery { padding-top: 14px; }
  .me-gallery__bar { gap: 12px; }
  .me-gallery__label { font-size: .68rem; letter-spacing: .1em; }
  .me-tabs { margin-bottom: 12px; }
  .me-tab { min-height: 44px; }
  .me-photo-dialog {
    width: calc(100vw - 12px);
    max-height: calc(100vh - 12px);
    overflow-y: auto;
    border-radius: 18px;
  }
  .me-dialog-media { padding: .5rem; border-radius: 18px 18px 0 0; }
  .me-dialog-stage img { max-height: 62vh; }
  .me-dialog-nav { width: 38px; height: 38px; }
  .me-dialog-nav--prev { left: .5rem; }
  .me-dialog-nav--next { right: .5rem; }
  .me-dialog-counter { left: .6rem; top: .6rem; bottom: auto; font-size: .7rem; }
  .me-dialog-close { top: .6rem; right: .6rem; width: 38px; height: 38px; }
  .me-dialog-bar {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
    padding: .9rem 1rem calc(.95rem + env(safe-area-inset-bottom, 0px));
  }
  .me-dialog-info { order: 2; justify-items: center; }
  .me-dialog-meta { max-width: 100%; font-size: .8rem; }
  .me-dialog-download { order: 1; width: 100%; }
}

/* ---- Pie publico y aviso de privacidad ----
   Franja minima al cierre de toda pagina publica: la identidad del evento a
   un lado y el acceso al aviso al otro. El aviso vive en un dialog nativo,
   sobrio y tipografico -- informa con calma, no interrumpe. */
.me-footer {
  margin-top: 28px;
  padding: 24px 0 30px;
  background: var(--me-surface);
  border-top: 1px solid var(--me-line);
}

.me-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 18px;
}

.me-footer__note {
  margin: 0;
  color: var(--me-muted);
  font-size: .78rem;
}

.me-footer__link {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--me-muted);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .18s ease;
}

.me-footer__link:hover { color: var(--me-ink); }

.me-privacy-dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: min(86vh, 720px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--me-surface);
  color: var(--me-ink);
  box-shadow: var(--me-shadow);
}

.me-privacy-dialog::backdrop { background: rgba(10, 14, 24, .55); }

.me-privacy-dialog__card {
  max-height: inherit;
  padding: 24px 26px 28px;
  overflow-y: auto;
}

.me-privacy-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}

.me-privacy-dialog__kicker {
  margin: 0 0 4px;
  color: var(--me-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.me-privacy-dialog h2 {
  margin: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.me-privacy-dialog__close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--me-line);
  border-radius: 50%;
  background: var(--me-surface);
  color: var(--me-muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}

.me-privacy-dialog__close:hover { color: var(--me-ink); border-color: var(--me-muted); }

.me-privacy-dialog__body h3 {
  margin: 18px 0 4px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--me-muted);
}

.me-privacy-dialog__body p {
  margin: 8px 0 0;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--me-ink);
}

.me-privacy-dialog__body a { color: inherit; text-underline-offset: 3px; }

@media (max-width: 576px) {
  .me-footer__inner { justify-content: center; text-align: center; }
  .me-privacy-dialog__card { padding: 20px 18px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}