/* ============================================================
   SUPERBOLETOS · PORTADA
   Héroe a sangre sobre el fondo de anillos concéntricos, rejilla
   editorial de recomendados (una destacada alta y cuatro que
   alternan ancho) y pie azul marino.
   Depende de css/base.css para tokens y cabecera.
   ============================================================ */

.contenedor{
  width:100%; max-width:1272px;
  margin-inline:auto;
  padding-inline:22px;
}

/* ============================================================
   CABECERA PÚBLICA
   La del checkout tiene cinco columnas; ésta suma el idioma.
   ============================================================ */
.cabecera--publica .cabecera__interior{
  grid-template-columns:auto auto minmax(180px,1fr) auto auto auto;
  gap:22px;
}
.cabecera__idioma .selector-estado{ gap:14px; }

/* La caja de cuenta (entrar, saludo, avatar, salir) vive en
   css/sesion.css, porque la comparten la portada y el checkout. */

/* ============================================================
   HÉROE
   ============================================================ */
.heroe{
  position:relative;
  min-height:clamp(540px, 76vh, 790px);
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  background-color:#28315c;
  background-image:
    repeating-radial-gradient(circle at 50% 46%, rgba(255,255,255,.030) 0 1px, transparent 1px 58px),
    repeating-radial-gradient(circle at 50% 46%, rgba(214,84,50,.10)  0 2px, transparent 2px 152px),
    radial-gradient(ellipse 92% 74% at 50% 38%, #47588c 0%, #2b3563 46%, #1b2245 100%);
}

.heroe__marco{ overflow:hidden; width:100%; }
.heroe__pista{
  display:flex;
  transition:transform .55s cubic-bezier(.35,0,.2,1);
  will-change:transform;
}

.lamina{
  flex:0 0 100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  align-items:center;
  column-gap:clamp(30px,4vw,64px);
  padding:40px clamp(22px,7.5vw,152px);
}

.lamina__texto{ display:flex; flex-direction:column; align-items:flex-start; }

.lamina__lugar{
  font-family:var(--fuente-serif);
  font-style:italic; font-weight:600;
  font-size:clamp(17px,1.5vw,23px);
  color:rgba(255,255,255,.82);
}
.lamina__lugar span{
  display:block;
  font-size:clamp(13px,1.05vw,16px);
  color:rgba(255,255,255,.66);
}

.lamina__titulo{
  margin-top:14px;
  font-size:clamp(28px,3.5vw,47px);
  font-weight:800; line-height:1.06; letter-spacing:-.012em;
  text-transform:uppercase; color:#fff;
}
.lamina__titulo--promo{ margin-top:0; text-transform:none; letter-spacing:-.02em; }

.lamina__pronto{
  margin-top:10px;
  font-size:clamp(17px,1.6vw,24px); font-weight:800; color:#fff;
}

.lamina__fecha{
  margin-top:6px;
  font-family:var(--fuente-serif); font-style:italic; font-weight:700;
  font-size:clamp(15px,1.35vw,21px); color:#fff;
}

.lamina__bajada{
  margin-top:12px; max-width:33ch;
  font-size:clamp(15px,1.3vw,20px); font-weight:700; line-height:1.4;
  color:#fff;
}
.lamina__pie{
  margin-top:8px; max-width:36ch;
  font-family:var(--fuente-serif); font-style:italic;
  font-size:clamp(14px,1.15vw,18px); color:rgba(255,255,255,.86);
}

.pastilla{
  margin-top:26px;
  display:inline-flex; align-items:center;
  padding:15px 32px;
  border-radius:var(--radio-pastilla);
  background:var(--degradado-cta); color:#fff;
  font-size:12.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease;
}
.pastilla:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(224,36,94,.36); }

.lamina__arte{
  display:block; text-decoration:none;
  width:100%; max-width:710px; justify-self:end;
}

/* ---------------- flechas y puntos ---------------- */
.heroe__flecha{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.55);
  transition:color .15s ease, transform .15s ease;
}
.heroe__flecha svg{ width:30px; height:30px; }
.heroe__flecha:hover{ color:#fff; }
.heroe__flecha--previo{ left:clamp(4px,1.4vw,22px); }
.heroe__flecha--proximo{ right:clamp(4px,1.4vw,22px); }

.heroe__puntos{
  position:absolute; z-index:3;
  right:clamp(22px,7.5vw,152px); bottom:88px;
  display:flex; gap:12px;
}
.punto{
  width:13px; height:13px; padding:0;
  border:1.5px solid rgba(255,255,255,.8); border-radius:50%;
  background:none; cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}
.punto:hover{ transform:scale(1.15); }
.punto--activo{ background:var(--carmin); border-color:var(--carmin); }

.heroe__baja{
  position:absolute; left:50%; bottom:26px; z-index:3;
  transform:translateX(-50%);
  width:38px; height:38px;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  color:var(--carmin);
  animation:rebote 1.9s ease-in-out infinite;
}
.heroe__baja svg{ width:22px; height:22px; }
@keyframes rebote{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,7px); } }

/* ============================================================
   ARTE DE RESPALDO
   Si no existe el archivo de img/ la lámina no queda hueca: el
   nombre del evento se compone en tipografía sobre el degradado
   de la ficha. Cuando la imagen carga, la tapa.
   ============================================================ */
.arte{
  position:relative; display:grid; place-items:center;
  width:100%; aspect-ratio:710/350;   /* medida base de las láminas */
  overflow:hidden; border-radius:5px;
  background:linear-gradient(145deg, var(--arte-a,#3a3f5c), var(--arte-b,#141828));
  box-shadow:0 18px 44px rgba(8,10,28,.42);
}
/* Halo de escenario. Va detrás de la foto: cuando el cartel real
   existe no debe quedar lavado por encima. */
.arte::after{
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 70% 55% at 50% 22%, rgba(255,255,255,.16), transparent 70%);
  pointer-events:none;
}
.arte__foto{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover;
}
.arte__rotulo{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:9%; text-align:center; line-height:1.05;
}
.arte__l1{
  font-size:clamp(19px,3.6vw,56px); font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:#fff;
}
.arte__l2{
  font-family:var(--fuente-serif); font-style:italic; font-weight:600;
  font-size:clamp(14px,2.1vw,32px); color:rgba(255,255,255,.92);
}
.arte__l3{
  margin-top:4px;
  font-size:clamp(8px,.95vw,13px); font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:rgba(255,255,255,.7);
}

/* ---------------- lámina del 2x1 ---------------- */
.arte--dosx1{ background:#f7e01e; }
.arte--dosx1::after{ display:none; }
.promo2x1{
  position:relative; z-index:2;
  width:100%; height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
  padding:6% 6% 0;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 42px, rgba(0,0,0,.06) 42px 46px);
}
.promo2x1__mini{
  align-self:flex-start;
  font-size:clamp(8px,.85vw,12px); font-weight:600; color:#20200a;
}
.promo2x1__grande{
  font-size:clamp(34px,5.6vw,84px); font-weight:800; letter-spacing:-.03em;
  color:#f26a1b; -webkit-text-stroke:2px #16160a;
  text-shadow:5px 5px 0 #16160a;
}
.promo2x1__grande em{ font-style:normal; color:#22d3ee; }
.promo2x1__cinta{
  width:calc(100% + 12%); margin-top:auto;
  transform:translateY(0);
  display:flex; gap:clamp(8px,1.6vw,26px); justify-content:center; align-items:center;
  padding:11px 4%;
  background:#111119; color:#fff;
}
.promo2x1__cinta span{
  font-size:clamp(7px,.75vw,11px); line-height:1.25; text-align:left; max-width:15ch;
}
.promo2x1__cinta b{ color:#f7e01e; }

/* ---------------- lámina de SuperFan ---------------- */
.arte--superfan{ background:linear-gradient(120deg,#4a1f8f,#7a2ab0 55%,#2d1e83); }
.promofan{
  position:relative; z-index:2;
  width:100%; height:100%;
  display:grid; align-content:start;
  grid-template-columns:repeat(3,1fr);
  gap:8px 10px; padding:6%;
}
.promofan__paso{
  display:flex; align-items:center; gap:7px;
  font-size:clamp(8px,.85vw,13px); font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:#fff;
}
.promofan__paso b{
  display:grid; place-items:center;
  width:clamp(18px,2vw,30px); aspect-ratio:1;
  border-radius:7px; background:var(--degradado-cta);
  font-size:clamp(10px,1.2vw,17px);
}
.promofan__telefonos{
  grid-column:1 / -1;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(8px,1.4vw,22px);
  padding-top:4px;
}
.promofan__telefonos i{
  display:block; aspect-ratio:9/16; max-height:clamp(90px,17vw,240px);
  margin-inline:auto; width:100%;
  border-radius:12px; background:#f4f4fb;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.35), 0 8px 18px rgba(0,0,0,.3);
  background-image:linear-gradient(#e6e7f4 0 18%, transparent 18%),
                   repeating-linear-gradient(#fff 0 9px, #dcdeee 9px 10px);
  background-size:100% 100%, 70% 46%;
  background-position:center top, center 32%;
  background-repeat:no-repeat;
}
.promofan__marca{
  position:absolute; right:6%; bottom:8%;
  padding:10px 14px; border-radius:8px;
  background:linear-gradient(150deg,#f0a6d8,#e0245e);
  font-size:clamp(10px,1.1vw,17px); font-weight:800; line-height:1.05;
  letter-spacing:.06em; color:#fff; text-align:center;
}
.promofan__marca b{ display:block; }

/* ============================================================
   FRANJA DE FORMAS DE PAGO
   ============================================================ */
.franja-pago{
  background:var(--papel);
  border-bottom:1px solid var(--linea);
  padding:14px 22px;
}
.franja-pago__interior{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px;
}
.franja-pago__rotulo{
  font-size:10.5px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--carmin);
}

.logo-pago{
  display:inline-flex; align-items:center; gap:3px;
  height:26px; padding:0 9px;
  border-radius:4px;
  font-size:12px; font-weight:800; letter-spacing:.02em;
  line-height:1; white-space:nowrap;
}
.logo-pago--visa{ background:#1a1f71; color:#fff; font-style:italic; letter-spacing:.06em; }
.logo-pago--mc{ background:#f4f4f8; padding-inline:7px; gap:0; }
.logo-pago--mc i{ width:17px; height:17px; border-radius:50%; }
.logo-pago--mc i:first-child{ background:#eb001b; }
.logo-pago--mc i:last-child{ background:#f79e1b; margin-left:-7px; mix-blend-mode:multiply; }
.logo-pago--amex{ background:#2e77bc; color:#fff; font-size:10px; letter-spacing:.04em; }
.logo-pago--aplazo{ background:#7ff0e0; color:#0b2b2b; border-radius:var(--radio-pastilla); padding-inline:13px; font-weight:700; }
.logo-pago--todito{ background:#f4f4f8; color:#0f9b8e; }
.logo-pago--oxxo{ background:#f4f4f8; color:#e21b1b; }
.logo-pago--oxxo b{ color:#1a1a2a; font-style:italic; }
.logo-pago--monedero{ background:#f4f4f8; color:#2f3a8f; font-size:8.5px; flex-direction:column; gap:0; padding-block:3px; }
.logo-pago--monedero b{ font-size:8.5px; }

/* ============================================================
   EVENTOS RECOMENDADOS
   ============================================================ */
.recomendados{ padding:44px 0 52px; }

.recomendados__titulo{
  font-size:clamp(24px,2.4vw,31px); font-weight:700;
  color:var(--indigo); letter-spacing:-.02em;
}

.pestanas{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:8px;
  margin:20px 0 22px;
}
.pestana{
  padding:11px 22px;
  background:none; border:0; border-radius:2px;
  color:var(--tinta-suave);
  font-size:13.5px; font-weight:500; line-height:1.15;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.pestana:hover{ color:var(--indigo); background:var(--papel); }
.pestana--activa{
  background:var(--indigo); color:#fff; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; font-size:12.5px;
}

.recomendados__cuerpo{
  display:grid; grid-template-columns:minmax(0,1fr) 40px;
  align-items:center; gap:12px;
}

/* Anchos de la captura: destacada 350, y a la derecha una
   parrilla de 8 columnas donde 5 valen ~450 px y 3 valen ~270.
   El alto sí es exacto (370 y 130); el ancho respeta la
   proporción y se encoge con la ventana, que es lo que hace el
   sitio real. */
.rejilla-eventos{
  display:grid;
  grid-template-columns:350px repeat(8, minmax(0,1fr));
  grid-template-rows:auto auto;
  gap:16px;
  max-width:1102px;
}
.rejilla-eventos--entra .tarjeta{ animation:tarjeta-entra .34s ease-out backwards; }
.rejilla-eventos--entra .tarjeta:nth-child(2){ animation-delay:.04s; }
.rejilla-eventos--entra .tarjeta:nth-child(3){ animation-delay:.08s; }
.rejilla-eventos--entra .tarjeta:nth-child(4){ animation-delay:.12s; }
.rejilla-eventos--entra .tarjeta:nth-child(5){ animation-delay:.16s; }
@keyframes tarjeta-entra{ from{ opacity:0; transform:translateY(10px); } }

.rejilla-eventos__vacia{
  grid-column:1 / -1; grid-row:1;
  padding:48px 20px; text-align:center;
  color:var(--tinta-suave);
}

/* La destacada ocupa las dos filas; las otras cuatro alternan
   ancho, que es lo que le da ritmo a la parrilla del sitio real. */
.tarjeta--destacada{ grid-column:1; grid-row:1 / span 2; }        /* 350 × 370 */
.rejilla-eventos .tarjeta:nth-child(2){ grid-column:2 / span 5; }  /* 450 × 130 */
.rejilla-eventos .tarjeta:nth-child(3){ grid-column:7 / span 3; }  /* 270 × 130 */
.rejilla-eventos .tarjeta:nth-child(4){ grid-column:2 / span 3; }  /* 270 × 130 */
.rejilla-eventos .tarjeta:nth-child(5){ grid-column:5 / span 5; }  /* 450 × 130 */

.tarjeta{
  display:flex; flex-direction:column;
  min-width:0;
  background:var(--papel); border-radius:2px; overflow:hidden;
  color:inherit; text-decoration:none;
  box-shadow:var(--sombra-baja);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tarjeta:hover{ transform:translateY(-3px); box-shadow:var(--sombra-alta); }

.tarjeta__arte{
  position:relative; display:block;
  height:130px; overflow:hidden;
}
.tarjeta__arte .arte{
  position:absolute; inset:0;
  width:100%; height:100%; aspect-ratio:auto;
  border-radius:0; box-shadow:none;
}
.tarjeta--destacada .tarjeta__arte{ height:370px; }
.tarjeta:hover .arte__foto{ transform:scale(1.03); }
.arte__foto{ transition:transform .35s ease; }

.tarjeta__pie{ display:block; padding:12px 15px 16px; }
.tarjeta__lugar{
  display:block;
  font-family:var(--fuente-serif); font-style:italic; font-size:13.5px;
  color:var(--tinta-suave); line-height:1.25;
}
.tarjeta__lugar span{ display:block; }
.tarjeta__titulo{
  display:block; margin-top:7px;
  font-size:16.5px; font-weight:700; letter-spacing:-.01em;
  text-transform:uppercase; color:var(--carmin);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tarjeta__fecha{
  display:block; margin-top:5px;
  font-family:var(--fuente-serif); font-style:italic; font-weight:600;
  font-size:13.5px; color:var(--tinta);
}

/* ---------------- insignias ---------------- */
.insignias{
  position:absolute; z-index:3; top:8px; right:8px;
  display:flex; gap:5px;
}
.insignia{
  padding:3px 7px; border-radius:3px;
  font-size:10px; font-weight:800; letter-spacing:.03em; line-height:1.2;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
}
.insignia--ga{    background:#5ce0b4; color:#08302a; }
.insignia--msi{   background:#3ab54a; color:#fff; }
.insignia--2x1{   background:#f0f; background:#e11ad0; color:#fff; }
.insignia--sm{    background:#f7e01e; color:#20200a; }
.insignia--cupon{ background:#e11ad0; color:#fff; }

/* ---------------- paginador vertical ---------------- */
.paginador{
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.paginador__flecha{
  width:34px; height:34px;
  display:grid; place-items:center;
  background:none; border:0; border-radius:50%;
  color:var(--tinta-tenue); cursor:pointer;
  transition:color .15s ease, background .15s ease;
}
.paginador__flecha svg{ width:22px; height:22px; }
.paginador__flecha:hover:not(:disabled){ color:var(--indigo); background:var(--papel); }
.paginador__flecha:disabled{ opacity:.3; cursor:default; }

.paginador__puntos{ display:flex; flex-direction:column; gap:10px; }
.punto--chico{
  width:11px; height:11px;
  border-color:var(--tinta-tenue);
}
.punto--chico.punto--activo{ background:var(--carmin); border-color:var(--carmin); }

.recomendados__cierre{ display:flex; justify-content:center; margin-top:34px; }
.pastilla--indigo{
  margin-top:0;
  background:linear-gradient(96deg,#4b3fd4,#6a3fd4);
  gap:12px;
}
.pastilla--indigo svg{ width:22px; height:22px; }

/* ============================================================
   NO TE LOS PIERDAS
   ============================================================ */
.categorias{ padding:34px 0 40px; }
.categorias__titulo{
  font-size:clamp(22px,2.1vw,28px); font-weight:700;
  color:var(--indigo); letter-spacing:-.02em; margin-bottom:18px;
}
.categorias__lista{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.categoria{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; height:84px; padding:0 20px;
  border-radius:2px; text-decoration:none;
  color:#fff; font-size:clamp(17px,1.7vw,23px); font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease;
}
.categoria:hover{ transform:translateY(-2px); box-shadow:var(--sombra-alta); }
.categoria svg{ width:52px; height:52px; opacity:.9; flex:none; }
.categoria span{ position:relative; z-index:2; }

.categoria--deportes{
  background:
    repeating-radial-gradient(circle at 78% 50%, rgba(255,255,255,.10) 0 2px, transparent 2px 26px),
    linear-gradient(100deg,#0f7a2f,#39b54a);
}
.categoria--festivales{
  background:
    repeating-radial-gradient(circle at 78% 50%, rgba(255,255,255,.10) 0 2px, transparent 2px 26px),
    linear-gradient(100deg,#0f52a8,#2f8fe0);
}
.categoria--taurina{
  background:
    repeating-radial-gradient(circle at 78% 50%, rgba(255,255,255,.10) 0 2px, transparent 2px 26px),
    linear-gradient(100deg,#8a6a05,#d9a412);
}

/* ============================================================
   BANDA DE REGISTRO
   ============================================================ */
.banda-registro{
  position:relative; overflow:hidden;
  background:
    linear-gradient(92deg, #3b2a8f 0%, #3b2a8f 52%, rgba(59,42,143,.72) 72%, rgba(59,42,143,.55) 100%),
    repeating-linear-gradient(72deg, #6d2a94 0 22px, #55258f 22px 44px);
  color:#fff;
}
.banda-registro__interior{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:30px;
  padding:52px 22px;
}
.banda-registro h2{
  font-size:clamp(26px,3vw,40px); font-weight:700; line-height:1.15;
  letter-spacing:-.02em; max-width:16ch;
}
.banda-registro .pastilla{
  margin-top:0;
  background:var(--carmin);
  box-shadow:0 0 0 6px rgba(224,31,74,.18);
}

/* ============================================================
   PATROCINADORES
   ============================================================ */
.patrocinadores{ background:var(--papel); padding:34px 0 28px; }
.patrocinadores__rotulo{
  text-align:center;
  font-size:10.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--carmin);
}
.patrocinadores__caja{
  position:relative;
  display:grid; grid-template-columns:42px minmax(0,1fr) 42px;
  align-items:center; gap:10px;
  margin-top:18px;
}
.patrocinadores__marco{ overflow:hidden; }
.patrocinadores__pista{
  display:flex;
  transition:transform .45s cubic-bezier(.35,0,.2,1);
}
.patrocinadores__grupo{
  flex:0 0 100%;
  display:grid; grid-template-columns:repeat(3,1fr);
  align-items:center; gap:20px;
}
.patrocinio{
  display:grid; place-items:center;
  height:56px;
  font-size:clamp(15px,1.6vw,22px); font-weight:800; letter-spacing:-.01em;
  filter:grayscale(.15);
}
.patrocinio--elektra{ color:#e2261c; }
.patrocinio--coca{ color:#e01f2d; font-family:var(--fuente-serif); font-style:italic; font-weight:700; }
.patrocinio--totalplay{ color:#3b2a8f; }
.patrocinio--banorte{ color:#c8102e; }
.patrocinio--santander{ color:#ea0000; }
.patrocinio--megacable{ color:#0f9b8e; }

.redondo{
  width:40px; height:40px;
  display:grid; place-items:center;
  background:var(--papel); border:1px solid var(--linea); border-radius:50%;
  color:var(--morado-btn); cursor:pointer;
  transition:box-shadow .15s ease, transform .15s ease;
}
.redondo svg{ width:20px; height:20px; }
.redondo:hover{ transform:translateY(-1px); box-shadow:var(--sombra-baja); }

/* ============================================================
   PIE
   ============================================================ */
.pie{
  background:var(--papel);
  border-top:1px solid var(--linea);
  padding:26px 22px 40px;
  text-align:center;
}
.pie__redes{ display:flex; justify-content:center; gap:26px; }
.pie__redes a{
  display:grid; place-items:center;
  width:32px; height:32px;
  color:var(--carmin);
  transition:transform .15s ease;
}
.pie__redes svg{ width:21px; height:21px; }
.pie__redes a:hover{ transform:translateY(-2px); }

.pie__enlaces{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px;
  margin-top:22px;
}
.pie__enlaces a{
  color:var(--morado-btn); text-decoration:none; font-size:14px;
}
.pie__enlaces a:hover{ text-decoration:underline; }

.pie__sello{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:22px; padding:5px 11px;
  border:1px solid var(--linea); border-radius:3px;
  font-size:9px; font-weight:700; line-height:1.1;
  letter-spacing:.03em; text-transform:uppercase; color:var(--tinta-suave);
}
.pie__sello svg{ width:17px; height:17px; color:#3ab54a; }

.pie__version{
  margin-top:26px; text-align:left;
  font-family:var(--fuente-dato); font-size:11px; color:var(--tinta-tenue);
}

/* ============================================================
   PANTALLAS CHICAS
   ============================================================ */
@media (max-width:1180px){
  .cabecera--publica .cabecera__interior{
    grid-template-columns:auto minmax(140px,1fr) auto;
    gap:14px;
  }
  .cabecera__idioma{ display:none; }
}

@media (max-width:1024px){
  .rejilla-eventos{ grid-template-columns:repeat(2,1fr); grid-template-rows:none; max-width:none; }
  .tarjeta--destacada,
  .rejilla-eventos .tarjeta:nth-child(2),
  .rejilla-eventos .tarjeta:nth-child(3),
  .rejilla-eventos .tarjeta:nth-child(4),
  .rejilla-eventos .tarjeta:nth-child(5){ grid-column:auto; grid-row:auto; }
  .tarjeta--destacada{ grid-column:1 / -1; }
  .tarjeta--destacada .tarjeta__arte{ height:210px; }
}

@media (max-width:860px){
  .lamina{
    grid-template-columns:minmax(0,1fr);
    row-gap:26px;
    padding:64px 24px 118px;
    align-content:center;
  }
  .lamina__arte{ order:-1; }
  .heroe{ min-height:0; }
  .heroe__puntos{ right:auto; left:50%; transform:translateX(-50%); bottom:64px; }
  .heroe__flecha{ top:auto; bottom:56px; transform:none; }
  .heroe__flecha--previo{ left:14px; }
  .heroe__flecha--proximo{ right:14px; }
  .heroe__baja{ display:none; }

  .categorias__lista{ grid-template-columns:1fr; }
  .banda-registro__interior{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .rejilla-eventos{ grid-template-columns:1fr; }
  .tarjeta__arte{ height:150px; }
  .recomendados__cuerpo{ grid-template-columns:1fr; }
  .paginador{ flex-direction:row; justify-content:center; }
  .paginador__puntos{ flex-direction:row; }
  .paginador__flecha svg{ transform:rotate(-90deg); }
  .pie__enlaces{ gap:8px 18px; }
}

/* ============================================================
   MÓVIL · ≤768px
   Sólo teléfono. La portada de escritorio no se toca.
   ============================================================ */
@media (max-width: 768px){

  .contenedor{ padding-inline:16px; }

  /* ------------------------------------------------------------
     CABECERA PÚBLICA EN DOS FILAS
       fila 1 · logo  +  caja de cuenta
       fila 2 · buscador a todo el ancho
     Antes las tres cosas peleaban por 360 px y el campo de
     búsqueda empujaba la página hacia la derecha.
     ------------------------------------------------------------ */
  .cabecera--publica .cabecera__interior{
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:
      "logo   cuenta"
      "buscar buscar";
    gap:9px 12px;
    align-content:center;
    padding-block:10px;
  }
  .cabecera--publica .logo{   grid-area:logo; }
  .cabecera--publica .cuenta{ grid-area:cuenta; justify-self:end; }

  .cabecera--publica .buscador{
    grid-area:buscar;
    min-width:0; min-height:42px;
    gap:9px; padding:0 14px;
    background:rgba(255,255,255,.15);
    border-radius:var(--radio-pastilla);
  }
  .cabecera--publica .buscador input{ padding:8px 0; }
  .cabecera--publica .buscador input:focus{ border-bottom:0; }

  /* ------------------------------------------------------------
     HÉROE · reserva de espacio (CLS)
     js/inicio.js arma las láminas después de pintar. Mientras la
     pista está vacía se le reserva su alto aproximado; en cuanto
     entra el contenido la regla deja de aplicar. Éste era el
     salto más grande de la portada en teléfono.
     ------------------------------------------------------------ */
  #pistaHeroe:empty{ display:block; min-height:calc(49vw + 400px); }

  .lamina{ padding:26px 18px 96px; row-gap:20px; }
  .lamina__bajada, .lamina__pie{ max-width:none; }

  .pastilla{
    margin-top:20px;
    width:100%; justify-content:center;
    min-height:50px; padding:15px 24px;
    font-size:13px;
  }

  /* Flechas sobre el cartel para que no choquen con los puntos */
  .heroe__flecha{
    top:calc(24vw + 22px); bottom:auto;
    transform:translateY(-50%);
    width:46px; height:46px;
  }
  .heroe__flecha--previo{  left:2px; }
  .heroe__flecha--proximo{ right:2px; }

  /* El punto sigue midiendo 13 px, pero su zona tocable crece a
     34: el relleno es transparente y el círculo se dibuja en el
     pseudo-elemento. */
  .heroe__puntos{ bottom:44px; gap:2px; }
  .heroe__puntos .punto{
    width:34px; height:34px; padding:10px;
    border:0; border-radius:0; background:none;
  }
  .heroe__puntos .punto::before{
    content:''; display:block; width:100%; height:100%;
    border:1.5px solid rgba(255,255,255,.8); border-radius:50%;
  }
  .heroe__puntos .punto--activo::before{
    background:var(--carmin); border-color:var(--carmin);
  }
  .heroe__puntos .punto:hover{ transform:none; }

  /* ------------------------------------------------------------
     FRANJA DE PAGO
     ------------------------------------------------------------ */
  .franja-pago{ padding:12px 14px; }
  .franja-pago__interior{ gap:9px; }
  .franja-pago__rotulo{ width:100%; text-align:center; font-size:11px; }
  .logo-pago{ height:28px; font-size:12px; }
  .logo-pago--amex{ font-size:11px; }
  .logo-pago--monedero, .logo-pago--monedero b{ font-size:10px; }

  /* ------------------------------------------------------------
     RECOMENDADOS
     ------------------------------------------------------------ */
  .recomendados{ padding:30px 0 36px; }

  /* Las pestañas se deslizan en lugar de partirse en tres filas */
  .pestanas{
    flex-wrap:nowrap; overflow-x:auto;
    gap:6px; margin:16px 0 18px; padding-bottom:2px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .pestanas::-webkit-scrollbar{ display:none; }
  .pestana{
    flex:none; white-space:nowrap;
    min-height:44px; padding:11px 16px; font-size:13.5px;
  }
  .pestana br{ display:none; }

  /* Reserva parcial mientras js/inicio.js arma las tarjetas */
  #rejillaEventos:empty{ display:block; min-height:420px; }

  .rejilla-eventos{ gap:14px; }
  .tarjeta__pie{ padding:12px 14px 15px; }
  .tarjeta__titulo{ font-size:16px; }
  .tarjeta__lugar, .tarjeta__fecha{ font-size:14px; }
  .insignia{ font-size:11px; padding:3px 8px; }

  .paginador{ gap:14px; margin-top:14px; }
  .paginador__flecha{ width:44px; height:44px; }
  .paginador__flecha svg{ width:24px; height:24px; }
  .paginador__puntos{ gap:2px; }
  .paginador__puntos .punto{
    width:30px; height:30px; padding:9px;
    border:0; background:none;
  }
  .paginador__puntos .punto::before{
    content:''; display:block; width:100%; height:100%;
    border:1.5px solid var(--tinta-tenue); border-radius:50%;
  }
  .paginador__puntos .punto--activo::before{
    background:var(--carmin); border-color:var(--carmin);
  }

  /* ------------------------------------------------------------
     CATEGORÍAS Y BANDA
     ------------------------------------------------------------ */
  .categorias{ padding:26px 0 30px; }
  .categoria{ height:76px; padding:0 16px; font-size:19px; }
  .categoria svg{ width:44px; height:44px; }

  .banda-registro__interior{ padding:34px 16px; gap:20px; }
  .banda-registro h2{ max-width:none; }

  /* ------------------------------------------------------------
     PATROCINADORES
     ------------------------------------------------------------ */
  .patrocinadores{ padding:26px 0 22px; }
  .patrocinadores__caja{ grid-template-columns:44px minmax(0,1fr) 44px; gap:6px; }
  .patrocinadores__grupo{ gap:12px; }
  .patrocinio{ height:48px; }
  .redondo{ width:44px; height:44px; }

  /* ------------------------------------------------------------
     PIE
     Los enlaces pasan a una columna: en línea quedaban a menos de
     10 px de separación y era imposible acertarles con el dedo.
     ------------------------------------------------------------ */
  .pie{ padding:22px 16px 34px; }
  .pie__redes{ gap:10px; }
  .pie__redes a{ width:44px; height:44px; }
  .pie__enlaces{ flex-direction:column; gap:0; margin-top:14px; }
  .pie__enlaces a{ display:block; padding:12px 4px; font-size:15px; }
  .pie__sello{ font-size:10px; padding:7px 12px; }
  .pie__version{ text-align:center; font-size:12px; }
}

/* ============================================================
   TELÉFONO ANGOSTO · ≤400px
   ============================================================ */
@media (max-width: 400px){
  .contenedor{ padding-inline:14px; }
  .lamina{ padding:22px 14px 92px; }
  .categoria{ font-size:17px; }
  .categoria svg{ width:38px; height:38px; }
}