/* ── layout.css ──────────────────────────────────────────────────────────────
   Piezas de página: cabecera (con la app), portada, pestañas, eventos,
   el llamado para negocios y el pie.
   ───────────────────────────────────────────────────────────────────────── */

/* Cabecera ---------------------------------------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-block: 14px;
  background: rgba(250, 246, 239, .78);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), background-color var(--transicion);
}
.cabecera.esta-pegada {
  border-bottom-color: var(--linea);
  background: rgba(250, 246, 239, .92);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cabecera__fila .navegacion { margin-left: auto; }

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--terracota);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marca__glifo { width: 26px; height: 26px; flex: 0 0 auto; }
/* transform-box: fill-box es imprescindible: sin él el origen se mide contra
   el viewBox y, como el <circle> ya viene trasladado por su <g>, el giro lo
   manda fuera de cuadro. */
.marca__glifo circle:first-of-type {
  animation: rotar 30s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.marca__sufijo {
  font-family: var(--texto);
  font-weight: 500;
  font-size: 12px;
  color: var(--tinta-suave);
  margin-left: -3px;
}

.navegacion { display: flex; align-items: center; gap: 26px; }
.navegacion a {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--tinta-suave);
  transition: color var(--transicion);
}
.navegacion a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: var(--terracota);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}
.navegacion a:hover { color: var(--tinta); }
.navegacion a:hover::after { transform: scaleX(1); }
@media (max-width: 960px) { .navegacion { display: none; } }

/* La app oficial en la cabecera: insignias de tienda en web, un botón en
   teléfono (va a /app, que ya manda a cada quien a su tienda). */
.tiendas { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.tienda {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px 0 11px;
  border-radius: 11px;
  background: var(--tinta);
  color: var(--crema);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.tienda:hover { transform: translateY(-1px); box-shadow: var(--sombra-2); }
.tienda svg { width: 20px; height: 20px; flex: none; }
.tienda__texto { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; line-height: 1.05; }
.tienda__texto small { font-size: 9.5px; font-weight: 500; letter-spacing: .02em; opacity: .75; }
.tienda--pronto {
  background: transparent;
  color: var(--tinta-suave);
  border: 1.5px dashed var(--linea);
  cursor: default;
}
.tienda--pronto:hover { transform: none; box-shadow: none; }
.tiendas__movil { display: none; }
@media (max-width: 960px) { .tiendas { margin-left: auto; } }
@media (max-width: 620px) {
  .tienda { display: none; }
  .tiendas__movil { display: inline-flex; }
}

/* Portada compacta -------------------------------------------------------- */
.intro {
  position: relative;
  overflow: hidden;
  padding-block: clamp(28px, 4.5vw, 52px) clamp(22px, 3vw, 34px);
}
.hero__fondo { position: absolute; inset: -40% -10%; z-index: 0; pointer-events: none; }
.hero__mancha {
  position: absolute;
  border-radius: 50%;
  filter: blur(78px);
  opacity: .38;
  animation: derivar 26s ease-in-out infinite alternate;
}
.hero__mancha--a { width: 40vw; height: 40vw; left: -8%;  top: -30%; background: var(--ac-terracota-bg); }
.hero__mancha--b { width: 34vw; height: 34vw; right: -4%; top: -10%; background: var(--ac-salvia-bg); animation-delay: -9s; }
.intro__fila {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 40px;
  flex-wrap: wrap;
}
.intro h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin-top: 12px;
  max-width: 19ch;
}
.intro h1 em { font-style: italic; font-weight: 500; color: var(--terracota); }
.intro__entrada { max-width: 56ch; margin-top: 12px; font-size: clamp(15px, 1.5vw, 17px); color: var(--tinta-suave); }

.hero__cifras { display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; }
.intro__cifras { padding-bottom: 6px; }
.cifra { display: inline-flex; align-items: baseline; gap: 7px; }
.cifra__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  color: var(--terracota);
  font-variant-numeric: tabular-nums;
}
.cifra__eti { font-size: 13px; color: var(--tinta-suave); }
.hero__cifras .punto { width: 4px; height: 4px; border-radius: 50%; background: var(--linea); }

/* Secciones más juntas: en web la página se lee de un vistazo. */
.seccion--compacta { padding-block: clamp(30px, 4vw, 52px); }

/* Pestañas «Explora Tepeji» ------------------------------------------------ */
.pestanas {
  display: flex;
  gap: clamp(18px, 3vw, 36px);
  margin: 10px 0 24px;
  border-bottom: 1px solid var(--linea);
  overflow-x: auto;
  scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas [role="tab"] {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 44px;
  padding: 4px 2px 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--tinta-tenue);
  transition: color var(--transicion);
}
.pestanas [role="tab"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--terracota);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}
.pestanas [role="tab"]:hover { color: var(--tinta-suave); }
.pestanas [role="tab"][aria-selected="true"] { color: var(--tinta); }
.pestanas [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
.pestanas__cuenta {
  font-family: var(--texto);
  font-size: 13px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--radio-full);
  background: var(--crema-honda);
  color: var(--tinta-suave);
  transform: translateY(-4px);
}
.pestanas__cuenta:empty { display: none; }
[aria-selected="true"] > .pestanas__cuenta { background: var(--terracota-velo); color: var(--terracota); }
.panel__pista { font-size: 14px; color: var(--tinta-suave); margin: -8px 0 18px; }

/* Eventos ----------------------------------------------------------------- */
.eventos { display: flex; flex-direction: column; }
.evento {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 20px 4px;
  border-top: 1px solid var(--linea);
  transition: background-color var(--transicion), padding-inline var(--transicion);
}
.evento:last-child { border-bottom: 1px solid var(--linea); }
.evento:hover { background: var(--crema-honda); padding-inline: 14px; border-radius: var(--radio); }
.evento__fecha {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.15;
  color: var(--terracota);
  letter-spacing: -0.01em;
}
.evento__titulo { font-size: 16px; font-weight: 600; margin-bottom: 3px; }
.evento__nota { font-size: 13.5px; color: var(--tinta-suave); }
.evento__marca {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--radio-full);
  background: var(--ac-salvia-bg);
  color: var(--ac-salvia);
  white-space: nowrap;
}
.evento__marca--proximo { background: var(--ac-ambar-bg); color: var(--ac-ambar); }
.evento__marca--patrocinado { background: var(--tinta); color: var(--crema); }
.evento__marca--pasado { background: var(--crema-honda); color: var(--tinta-suave); }
.evento__fuente { color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.evento__fuente:hover { color: var(--terracota); }
@media (max-width: 620px) {
  .evento { grid-template-columns: 74px 1fr; gap: 8px 14px; }
  .evento__marca { grid-column: 2; justify-self: start; }
}

/* Para negocios: registrarse o anunciarse --------------------------------- */
.sumarse {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr);
  gap: 18px;
  align-items: stretch;
  padding: clamp(24px, 3.5vw, 40px);
  border-radius: clamp(22px, 3vw, 32px);
  background: var(--crema-honda);
  margin-bottom: clamp(24px, 4vw, 48px);
}
.sumarse__cabeza { align-self: center; padding-right: 8px; }
.sumarse__cabeza h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 8px 0 10px;
}
.sumarse__cabeza p:not(.antetitulo) { font-size: 14.5px; color: var(--tinta-suave); }
.oferta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 20px;
  border-radius: var(--radio-lg);
  background: var(--crema-alta);
  border: 1px solid var(--linea-tenue);
  box-shadow: var(--sombra-1);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.oferta:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--terracota-velo); }
.oferta__sello {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radio-full);
  background: var(--crema-honda);
  color: var(--tinta-suave);
}
.oferta--gratis .oferta__sello { background: var(--ac-salvia-bg); color: var(--ac-salvia); }
.oferta__icono {
  position: absolute;
  top: 18px; right: 18px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--terracota-velo);
  color: var(--terracota);
}
.oferta__icono svg { width: 21px; height: 21px; }
.oferta h3 { font: 600 21px/1.2 var(--display); letter-spacing: -0.015em; margin-top: 6px; }
.oferta p { font-size: 14px; color: var(--tinta-suave); }
.oferta__cta {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--terracota);
}
.oferta__cta svg { width: 16px; height: 16px; transition: transform var(--transicion); }
.oferta:hover .oferta__cta svg { transform: translateX(3px); }
@media (max-width: 960px) {
  .sumarse { grid-template-columns: 1fr 1fr; }
  .sumarse__cabeza { grid-column: 1 / -1; }
}
@media (max-width: 620px) { .sumarse { grid-template-columns: 1fr; } }

/* Pie --------------------------------------------------------------------- */
.pie {
  border-top: 1px solid var(--linea);
  padding-block: 28px 44px;
}
.pie__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--tinta-suave);
}
.pie__enlaces { display: flex; gap: 18px; }
.pie__enlaces a { transition: color var(--transicion); }
.pie__enlaces a:hover { color: var(--terracota); }

/* Animaciones compartidas -------------------------------------------------- */
@keyframes rotar   { to { transform: rotate(360deg); } }
@keyframes derivar {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 5%, 0) scale(1.12); }
}
@keyframes flotar  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes latir   { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }
@keyframes titilar { from { opacity: var(--o-min, .15); } to { opacity: var(--o-max, .5); } }

.pie__nota { margin-top: 4px; font-size: 12px; color: var(--tinta-tenue); max-width: 60ch; }