/* ctxd-movil-v2.css (v1 + 9 paquetes v2 detrás) · antes: ctxd-movil-v1.css (4-nov-2026) · QA móvil/tablet de ctxplorer: 14 paquetes fusionados (~/clients/ctxplorer-movil-qa/parches/). Va después de ctxd-nav-v5.css. Nombre nuevo en cada cambio: los chunks van con caché immutable. */

/* ===== paquete: menu-movil ===== */
/* menu-movil (3-nov-2026) · cajón #ctxd-menu-movil (el de Next del chunk 0rymworbwg2_2 y el propio de ctxd .hx-cj).
   !important solo contra estilos en línea del bundle (style={{...}}) o contra reglas ctxd que ya lo llevan
   (ctxd-nav-v5.css #ctxd-menu-movil{padding-bottom…!important}, html:has(#ctxf){overflow:clip visible!important}). */

/* 4) Bloqueo del fondo. :has(#ctxd-menu-movil) sube la especificidad a (1,1,1)/(1,1,2) para ganar a html:has(#ctxf) (1,0,1)/(1,0,2) */
html.ctxd-cajon,html.ctxd-cajon body,
html.ctxd-cajon:has(#ctxd-menu-movil),html.ctxd-cajon:has(#ctxd-menu-movil) body,
:root:has(#ctxd-menu-movil),:root:has(#ctxd-menu-movil) body{overflow:hidden!important;overscroll-behavior:none}

/* 2) + 10) contenedor: sin scroll lateral y sin los 72 px vacíos de la barra (que se oculta con html.ctxd-cajon) */
html #ctxd-menu-movil{overflow-x:hidden!important;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))!important}
#ctxd-menu-movil:focus{outline:none}

/* 6) safe-area superior y lateral (viewport-fit=cover ya está en el meta viewport) */
#ctxd-menu-movil>div.sticky.top-0{padding-top:env(safe-area-inset-top,0px);height:calc(56px + env(safe-area-inset-top,0px))}
#ctxd-menu-movil>div.sticky.top-0,#ctxd-menu-movil>div.px-4{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* 9) botón Cerrar 44x44, alineado con la hamburguesa */
#ctxd-menu-movil>div.sticky.top-0>button.w-10.h-10{width:44px;height:44px;margin-right:var(--mm-xr,-10px)} /* --mm-xr lo mide el JS contra la hamburguesa */

/* 8) buscador: placeholder legible (5,3:1 claro · 7:1 oscuro) y sin la lupa/cruz nativa duplicada */
#ctxd-menu-movil input.input-theme::placeholder{color:#6b6b74;opacity:1}
html.dark #ctxd-menu-movil input.input-theme::placeholder{color:#a1a1aa}
#ctxd-menu-movil input.input-theme{-webkit-appearance:none;appearance:none;font-size:16px}

/* 2) tarjeta Perfect Day: el texto se adapta (letra al 150 %, 320 px) */
#ctxd-menu-movil a[href$="/perfect-day"].rounded-2xl{min-width:0;background:#d62839!important} /* 3) blanco sobre #d62839 = 4,97:1 (sobre #e63946 era 4,17:1) */
#ctxd-menu-movil a[href$="/perfect-day"].rounded-2xl>div:last-child{flex:1 1 auto;min-width:0;width:auto;max-width:none;white-space:normal!important}
#ctxd-menu-movil a[href$="/perfect-day"].rounded-2xl p{white-space:normal!important;overflow-wrap:anywhere}
/* 3) subtítulo */
#ctxd-menu-movil a[href$="/perfect-day"].rounded-2xl p.text-xs{color:#fff;opacity:.95;font-size:13px;line-height:1.35}
#ctxd-menu-movil a[href$="/perfect-day"].rounded-2xl:active{filter:brightness(.92)}
/* 11) ⭐ → SVG (mismo trazo en Samsung, Pixel e iPhone) */
#ctxd-menu-movil a[href$="/perfect-day"].rounded-2xl>div:first-child>span{font-size:0;line-height:0;width:22px;height:22px;display:block;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E") center/contain no-repeat}

/* 11) rótulos (Categorías, Descubrir, Idioma, Ciudad): crecen con la letra del sistema */
#ctxd-menu-movil p.text-xs.uppercase{font-size:.8125rem}

/* categorías: 2 columnas sin desbordar a 320 px con letra grande */
#ctxd-menu-movil .grid.grid-cols-2>a{min-width:0;min-height:48px}
#ctxd-menu-movil .grid.grid-cols-2>a>span:last-child{min-width:0;overflow-wrap:anywhere}

/* 7) Descubrir: filas de lista con flecha, no texto gris */
#ctxd-menu-movil a.hover\:opacity-80{margin:0;padding:12px 2px;min-height:48px;border-bottom:1px solid var(--border);border-radius:0;-webkit-tap-highlight-color:transparent}
#ctxd-menu-movil a.hover\:opacity-80:last-child{border-bottom:0}
#ctxd-menu-movil a.hover\:opacity-80>span.text-sm{flex:1 1 auto;min-width:0;color:var(--fg)!important;font-weight:500;font-size:15px;line-height:1.3}
#ctxd-menu-movil a.hover\:opacity-80::after{content:"\203A";flex:none;margin-left:auto;padding-left:8px;font-size:22px;line-height:1;color:var(--text-tertiary)}
#ctxd-menu-movil a.hover\:opacity-80:active{opacity:1;background:var(--card-hover,var(--card))}
#ctxd-menu-movil a.hover\:opacity-80:active>span.text-sm{color:#e63946!important}

/* 9) + 11) idioma: 44 px y banderas en SVG (el JS quita el emoji del texto y pone data-mm-ico) */
#ctxd-menu-movil a.flex-1.text-center{min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0}
#ctxd-menu-movil [data-mm-ico]::before{content:"";flex:none;display:inline-block;vertical-align:-3px;width:20px;height:14px;border-radius:2px;background:center/cover no-repeat;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
#ctxd-menu-movil [data-mm-ico="mx"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23006847' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23ce1126' d='M2 0h1v2H2z'/%3E%3Ccircle cx='1.5' cy='1' r='.27' fill='%238c5a2b'/%3E%3C/svg%3E")}
#ctxd-menu-movil [data-mm-ico="gb"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E")}
/* 11) 🌙/☀️ del botón de tema → SVG en currentColor */
#ctxd-menu-movil [data-mm-ico="luna"]::before,#ctxd-menu-movil [data-mm-ico="sol"]::before{width:18px;height:18px;border-radius:0;box-shadow:none;background:currentColor;-webkit-mask:var(--mm-m) center/contain no-repeat;mask:var(--mm-m) center/contain no-repeat}
#ctxd-menu-movil [data-mm-ico="luna"]{--mm-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E")}
#ctxd-menu-movil [data-mm-ico="sol"]{--mm-m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}
#ctxd-menu-movil button[data-mm-ico]{min-height:44px;gap:10px}


/* ===== paquete: cabecera ===== */
/* ctxd · paquete «cabecera» (QA móvil 3-nov-2026). Cabecera sticky global nav.sticky.
   Vale para las dos cabeceras: la de Next (html[data-hx=next] o sin data-hx) y la estática de ctxd (html[data-hx=ctxd]).
   No toca el contenido de #ctxd-menu-movil ni #ctxd-tab. */

/* 1) Fila: logo + país pegados a la izquierda, acciones a la derecha; nada se sale del ancho */
nav.sticky>div.max-w-7xl{gap:8px;min-width:0}
nav.sticky>div.max-w-7xl>a[href="/"]{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
nav.sticky>div.max-w-7xl>div:last-child{flex-shrink:0;margin-left:auto}
@media(max-width:767.98px){
  /* «Entrar» y el avatar ya están en la barra inferior (#ctxd-tab): fuera de la cabecera */
  nav.sticky .hx-mv{display:none!important}
}
@media(max-width:419.98px){
  /* el logo no pasa de 6vw (19,2 px a 320): con letra al 150 % deja sitio a la bandera y a la hamburguesa */
  nav.sticky>div.max-w-7xl>a[href="/"]{font-size:min(1.125rem,6vw)}
  /* país: solo la bandera. El texto (nodo de React) queda a font-size 0 y la bandera la pinta ::before
     desde --hx-flag, que pone movil.js. Sin JS (sin html.hx-flag) se queda el texto completo. */
  nav.sticky .A-pais-sel>details>summary{min-width:44px;justify-content:center}
  html.hx-flag nav.sticky .A-pais-sel>details>summary{font-size:0;gap:2px}
  html.hx-flag nav.sticky .A-pais-sel>details>summary::before{content:var(--hx-flag);font-size:1.25rem;line-height:1}
}

/* 2) Desplegable de país (.hx-pp en la cabecera ctxd; div.absolute en la de Next) */
.A-pais-sel>details:not([open])>:not(summary){display:none}
.A-pais-sel>details>:not(summary) a{min-height:44px;display:flex;align-items:center}
@media(max-width:420px){
  .A-pais-sel>details[open]>:not(summary){position:fixed;left:16px;right:16px;top:calc(56px + env(safe-area-inset-top,0px));margin-top:0;min-width:0;max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);overflow-y:auto;overscroll-behavior:contain}
}

/* 3) Selector de ciudad: texto de la ciudad de la página (data-hx-cp lo pone movil.js; manda sobre data-hx-c de ctxd-nav) */
nav.sticky .hx-cfix[data-hx-cp]:after{content:attr(data-hx-cp)}

/* 4) Tablet 768-1023 con barra inferior: fuera la lupa y el login duplicados; vuelve la hamburguesa */
@media(min-width:768px) and (max-width:1023.98px){
  html[data-hx] nav.sticky button[aria-label="Buscar"],
  html[data-hx] nav.sticky a[href^="/auth/login"],
  html[data-hx] nav.sticky a.hx-in[href^="/auth/"]{display:none!important}
  html[data-hx] nav.sticky button[aria-label="Abrir menú"]{display:inline-flex!important;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  /* el menú de Next lleva md:hidden: sin esto la hamburguesa no abre nada en tablet (coordinar con menu-movil, ver NOTAS) */
  html[data-hx] #ctxd-menu-movil{display:block}
  nav.sticky button[title="Cambiar ciudad"]{min-height:44px}
  nav.sticky>div.max-w-7xl>div:has(>button[title="Cambiar ciudad"]){flex-shrink:0}
  nav.sticky .hx-tb,nav.sticky button[aria-label="Modo oscuro"],nav.sticky button[aria-label="Modo claro"]{min-width:44px;min-height:44px}
  nav.sticky a.hx-in{display:inline-flex;align-items:center;min-height:44px}
}

/* 6) Anclas: que el título no quede bajo la cabecera ni bajo la barra inferior. --hdr-h lo mide movil.js */
html{scroll-padding-top:calc(var(--hdr-h,57px) + 12px)}
@media(max-width:1023.98px){html[data-hx]{scroll-padding-bottom:calc(72px + env(safe-area-inset-bottom,0px) + 8px)}}

/* 8) «Entrar» escala con la letra del sistema */
.hx-entrar{font-size:.875rem}


/* ===== paquete: barra-inferior ===== */
/* barra-inferior · móvil (3-nov-2026) — #ctxd-tab / .ctxd-tab
   Va DESPUÉS de ctxd-explora-v1.css y ctxd-nav-v5.css. Los !important de este fichero solo pisan
   !important ya existentes en ctxd-nav-v5.css (html[data-hx] .ctxd-tab{display:block!important},
   html[data-hx]{--ctxd-nav-h:72px!important}, html[data-hx] body{padding-bottom:…!important}). */

@media (max-width:1023.98px){

  /* 1) Fichas /events/* y html.ctxd-tab-off: sin barra de pestañas (la acción la lleva .t3a-barra).
        La reserva del body (72 px) se mantiene: cubre .t3a-barra (65 px) — la decide el paquete ficha-evento. */
  html.ctxd-tab-off[data-hx] .ctxd-tab,
  html[data-hx]:has(link[rel="canonical"][href*="ctxplorer.com/events/"]) .ctxd-tab{display:none!important}
  html.ctxd-tab-off[data-hx],
  html[data-hx]:has(link[rel="canonical"][href*="ctxplorer.com/events/"]){--ctxd-nav-h:0px!important}
  html.ctxd-tab-off[data-hx] .sticky-cta-bar,
  html[data-hx]:has(link[rel="canonical"][href*="ctxplorer.com/events/"]) .sticky-cta-bar{bottom:env(safe-area-inset-bottom,0px)!important}

  /* 3) Zona segura inferior y lateral: alto = fila de 72 px + barra de gestos. */
  #ctxd-tab.ctxd-tab{
    box-sizing:border-box;
    height:auto;
    min-height:calc(var(--ctxd-nav-h,72px) + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  #ctxd-tab .ctxd-tab__l{
    height:var(--ctxd-nav-h,72px);
    padding-left:max(4px,env(safe-area-inset-left,0px));
    padding-right:max(4px,env(safe-area-inset-right,0px));
  }

  /* 2) Etiquetas en una línea (Perfect Day se partía a 320/360 px y con letra grande). */
  #ctxd-tab .ctxd-nv__a{padding-left:2px;padding-right:2px;min-width:0}
  #ctxd-tab .ctxd-nv__a>span:last-child:not(.ctxd-nv__n):not(.ctxd-tab__pdi){
    display:block;max-width:100%;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    line-height:1.15;
  }

  /* 6) Pestaña activa distinta del destacado de Perfect Day:
        Perfect Day conserva la píldora roja pero su texto va en gris como las demás;
        la activa lleva texto en acento, negrita y una raya superior. data-mv-act lo pone movil.js
        donde ctxd-nav-v4 no marca aria-current (/auth, /en/{ciudad}, /perfect-day). */
  #ctxd-tab .ctxd-tab__pd:not([aria-current="page"]):not([data-mv-act]){color:var(--ctxd-text-3,#63636c)!important}
  #ctxd-tab .ctxd-nv__a[aria-current="page"],
  #ctxd-tab .ctxd-nv__a[data-mv-act]{color:var(--ctxd-accent-text,#bf2533)!important}
  #ctxd-tab .ctxd-nv__a[data-mv-act]>span:not(.ctxd-nv__n):not(.ctxd-tab__pdi){font-weight:var(--ctxd-fw-b,700)}
  #ctxd-tab .ctxd-nv__a[aria-current="page"]::before,
  #ctxd-tab .ctxd-nv__a[data-mv-act]::before{
    content:"";position:absolute;top:0;left:50%;width:28px;height:3px;margin-left:-14px;
    border-radius:0 0 3px 3px;background:var(--ctxd-accent,#e63946);
  }

  /* 7) Páginas de cine sin barra: quitar el hueco de 72 px que reserva ctxd-nav-v5.
        Si la barra se inyecta en /cine (diff en NOTAS.md), :has(#ctxd-tab) devuelve la reserva sola. */
  html[data-hx]:has(link[rel="canonical"][href*="/cine"]) body:not(:has(#ctxd-tab)){
    padding-bottom:calc(var(--hx-ck,0px) + env(safe-area-inset-bottom,0px))!important;
  }
}

/* 2) Pantallas estrechas: 11 px solo en la barra (5 columnas de 62-70 px no caben «Perfect Day» a 12 px). */
@media (max-width:374.98px){
  #ctxd-tab .ctxd-nv__a>span:last-child:not(.ctxd-nv__n):not(.ctxd-tab__pdi){font-size:11px;letter-spacing:-.01em}
}

/* 4) Tablet 600-1023: pestañas centradas a 560 px (el fondo de la barra sigue a todo el ancho). */
@media (min-width:600px) and (max-width:1023.98px){
  #ctxd-tab .ctxd-tab__l{max-width:560px;margin-left:auto;margin-right:auto}
}

@media (forced-colors:active){
  #ctxd-tab .ctxd-nv__a[aria-current="page"]::before,
  #ctxd-tab .ctxd-nv__a[data-mv-act]::before{background:Highlight}
}


/* ===== paquete: capas-fijas ===== */
/* capas-fijas · ctxplorer móvil (3-nov-2026)
   CK = aviso de cookies del bundle (body>div.fixed.animate-slide-up con enlace a /legal/cookies). Se usa el MISMO selector que
   ctxd-t4c-v4 precedido de «html body» para ganarle en especificidad: t4c pone sus reglas con !important (font-size:0 en el p),
   así que aquí también hace falta !important en esas propiedades concretas. Lo demás va sin !important. */

/* ---------- 2) Aviso de cookies: texto visible, encima de la barra inferior, sin cortes a 320 px / letra 150 % ---------- */
@media (max-width:1023.98px) {
  html body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) {
    bottom: calc(var(--ctxd-nav-h, 72px) + env(safe-area-inset-bottom, 0px) + 8px) !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
  }
  /* ficha con barra de compra #t3a-barra (misma regla que t4c, con el alto de barra variable) */
  html body:has(#t3a-barra:not(.t3a-off)) div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) {
    bottom: calc(var(--ctxd-nav-h, 72px) + env(safe-area-inset-bottom, 0px) + 80px) !important;
  }
  /* quita el font-size:0 de t4c: se lee la frase completa */
  html body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) p {
    font-size: 13px !important;
    line-height: 1.4 !important;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  html body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) p > span,
  html body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) p > a {
    font-size: inherit !important;
  }
  /* «Más info»: zona de toque de 44 px sin inflar la línea (t4c le daba inline-flex + min-height 44) */
  html body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) p > a {
    display: inline-block !important;
    min-height: 0 !important;
    margin-left: 2px !important;
    padding: 12px 2px;
    margin-block: -12px;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  html body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) button {
    min-height: 44px !important;
    font-size: 14px !important;
    white-space: nowrap;
  }
}

/* <480 px: dos filas (texto arriba a todo el ancho, botones abajo repartidos) */
@media (max-width:479.98px) {
  html body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) > div {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
    padding: 10px 12px !important;
  }
  html body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) p {
    flex: 1 1 100% !important;
  }
  html body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) .shrink-0 {
    flex: 1 1 100% !important;
    justify-content: flex-end;
  }
  html body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) button {
    flex: 1 1 0;
    padding-inline: 8px !important;
  }
}

/* tablet: tarjeta centrada de 560 px como máximo en vez de franja de lado a lado */
@media (min-width:600px) and (max-width:1023.98px) {
  html body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) {
    max-width: 560px;
    margin-inline: auto;
  }
}

/* ---------- 3) «Solo esenciales» con aspecto de botón (el color va inline en el bundle → !important) ---------- */
html body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) .shrink-0 > button:first-child,
button[aria-label="Solo cookies esenciales"],
button[aria-label="Essential cookies only"] {
  border: 1px solid var(--border) !important;
  color: var(--fg) !important;
  background: transparent;
}

/* ---------- 4) /en/*: el aviso no se ve mientras siga en español (movil.js pone data-ck-espera, máx. 3 s) ---------- */
html body div.fixed.animate-slide-up[data-ck-espera] {
  visibility: hidden !important;
}

/* ---------- 1e/6) Respaldo One Tap (GIS pone estilos inline → !important) ----------
   Móvil: abajo, encima de la barra inferior, sin tapar el hero ni el H1. Tablet/escritorio: bajo la cabecera.
   Mientras haya aviso de cookies, cajón abierto o un campo con foco, se oculta sin desmontarlo y vuelve a verse al cerrarlo. */
@media (max-width:767.98px) {
  #credential_picker_container,
  body > iframe#credential_picker_iframe {
    top: auto !important;
    bottom: calc(var(--ctxd-nav-h, 72px) + env(safe-area-inset-bottom, 0px) + 8px) !important;
    max-height: calc(100dvh - var(--ctxd-nav-h, 72px) - 96px) !important;
  }
}
@media (min-width:768px) {
  #credential_picker_container {
    top: 76px !important;
    bottom: auto !important;
  }
}
html.ctxd-cajon #credential_picker_container,
html.ctxd-cajon body > iframe#credential_picker_iframe,
body:has(> div.fixed.animate-slide-up a[href="/legal/cookies"]) #credential_picker_container,
body:has(> div.fixed.animate-slide-up a[href="/legal/cookies"]) > iframe#credential_picker_iframe,
body:has(input:focus, textarea:focus, select:focus) #credential_picker_container,
body:has(input:focus, textarea:focus, select:focus) > iframe#credential_picker_iframe {
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ===== paquete: ficha-evento ===== */
/* ficha-evento · ctxplorer móvil (3-nov-2026)
   Fichas /events/* (t3a + G + ctxd-plan + #ctxd-reg) y hub de festival .t14.
   Cargar DESPUÉS de los CSS de ctxd y de barra-inferior / capas-fijas.
   !important solo donde la regla del bundle o de ctxd ya lo lleva (countdown, cookies de capas-fijas). */

/* ========== 1) Barra fija .t3a-barra: pegada abajo, sin apilarse con #ctxd-tab ni con el aviso de cookies ========== */
@media (max-width:1023.98px){
  /* barra-inferior oculta #ctxd-tab en /events/* y pone --ctxd-nav-h:0; aquí la barra baja a 0 con su safe-area */
  body .t3a-barra{bottom:0;padding:8px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
  /* oculta mientras se ve otro CTA de Perfect Day (clase puesta por movil.js; t3a-off la sigue gestionando ctxd-t3a-v1) */
  body .t3a-barra.mv-oc,
  body:has([data-hx-cookie]) .t3a-barra{transform:translateY(calc(100% + 24px));visibility:hidden}
  /* con la barra oculta por las cookies, el aviso baja a su sitio (gana a la regla +80px de capas-fijas) */
  html body:has(#t3a-barra):has([data-hx-cookie]) div.fixed.animate-slide-up[data-hx-cookie]:has(a[href="/legal/cookies"]){
    bottom:calc(var(--ctxd-nav-h,0px) + env(safe-area-inset-bottom,0px) + 8px) !important}
  /* CTA duplicados: el aside repite «Armar mi Perfect Day» y «Comprar boletos →» que ya están arriba y en la barra */
  html body #g-precio a.t3a-lat-pd,html body .lg\:col-span-1 a.t3a-lat-pd{display:none}
  /* ctxd-t3a pone data-t3a=tk y display:flex!important al botón del aside: hace falta !important para ganarle */
  html body:has(#t3a-acc) #g-precio a[data-t3a="tk"],html body:has(#t3a-acc) .lg\:col-span-1 a.block.w-full.text-center.rounded-xl{display:none !important}
}

/* ========== 2) #ctxd-reg: sin recorte a 320-600 px ========== */
@media (max-width:600px){
  html #ctxd-reg .rg{grid-template-columns:minmax(0,1fr);overflow:visible}
  html #ctxd-reg .ac{padding:16px 20px}
  html #ctxd-reg .tx{padding-right:56px}
}
html #ctxd-reg .rg .gb{overflow:hidden;min-height:44px;max-width:100%}

/* ========== 3) CTA del plan: botón ancho centrado, dos líneas caben ========== */
html body .ctxd-plan a.ctxd-cta{display:flex;width:100%;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:10px 16px;line-height:1.25;box-sizing:border-box}

/* ========== 4) Cuenta atrás legible ========== */
html body #section-facts .countdown-unit{font-size:.75rem !important;color:#fff !important}
@media (min-width:600px){html body #section-facts>div.rounded-xl{max-width:420px}}

/* ========== 5) Miga de pan: dos líneas en vez de cortar a media palabra ========== */
@media (max-width:420px){
  body:has(#t3a-acc) ol.overflow-x-auto.scrollbar-hide.text-xs{flex-wrap:wrap;overflow:visible;row-gap:0}
  body:has(#t3a-acc) ol.overflow-x-auto.scrollbar-hide.text-xs>li:last-child{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
body:has(#t3a-acc) ol.overflow-x-auto.scrollbar-hide.text-xs a{display:inline-flex;align-items:center;min-height:32px}

/* ========== 6) FAQ duplicada: ver movil.js (se oculta la copia editorial, la que no va en el JSON-LD) ========== */
.t3a-rich [data-mv-dup]{display:none}

/* ========== 7) Tipos en rem (con letra al 150 % la jerarquía se mantiene); mínimo 12 px ========== */
html body a.g-btn1,html body a.g-btn2{font-size:.875rem}
html body p.g-cuando-f{font-size:1rem}
html body p.g-precio-l{font-size:1.375rem}
html body .ctxd-plan .ctxd-st-rol{font-size:.75rem}
html body .ctxd-plan .ctxd-cr{font-size:.75rem}

/* ========== 8) Formulario de opinión: estrellas 44x44, inputs a 16 px, botón de archivo con estilo ========== */
html body .t3a-rev-form input[type=text],html body .t3a-rev-form textarea{font-size:16px}
.t3a-rev-form input#t3a-rev-rating.mv-h{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;opacity:0;pointer-events:none;overflow:hidden;clip:rect(0 0 0 0)}
.t3a-rev-form div:has(>#t3a-rev-rating){position:relative}
.mv-stars{display:flex;gap:2px;margin:0;padding:0;border:0;min-width:0}
.mv-stars label{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0;border-radius:10px;cursor:pointer;font-size:28px;line-height:1;color:var(--ctxd-border-strong,#c4c4cc);-webkit-tap-highlight-color:transparent}
.mv-stars input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.mv-stars label.mv-on{color:#e63946}
.mv-stars input:focus-visible+label{outline:2px solid #e63946;outline-offset:2px}
@media (hover:hover){.mv-stars:hover label{color:#e63946}.mv-stars label:hover~label{color:var(--ctxd-border-strong,#c4c4cc)}}
html body .t3a-rev-form input[type=file]{font-size:.9375rem}
.t3a-rev-form input[type=file]::file-selector-button{min-height:36px;margin-right:12px;padding:0 14px;border:1px solid var(--ctxd-border-strong,#d4d4d8);border-radius:8px;background:var(--ctxd-surface,var(--surface,#f5f5f6));color:var(--ctxd-fg,var(--fg,#18181b));font:600 .875rem/1 inherit;cursor:pointer}
.t3a-rev-form input[type=file]::-webkit-file-upload-button{min-height:36px;margin-right:12px;padding:0 14px;border:1px solid var(--ctxd-border-strong,#d4d4d8);border-radius:8px;background:var(--ctxd-surface,var(--surface,#f5f5f6));color:var(--ctxd-fg,var(--fg,#18181b));font:600 .875rem/1 inherit;cursor:pointer}

/* ========== 9) Detalles ========== */
/* tarjetas informativas que parecían botones */
body:has(#t3a-acc) div.rounded-xl.text-center.transition.hover\:opacity-80{transition:none;cursor:default}
body:has(#t3a-acc) div.rounded-xl.text-center.transition.hover\:opacity-80:hover{opacity:1}
body:has(#t3a-acc) div.grid.grid-cols-2:has(>div.rounded-xl.text-center.transition:only-child){display:flex}
body:has(#t3a-acc) div.rounded-xl.text-center.transition.hover\:opacity-80:only-child{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px}
body:has(#t3a-acc) div.rounded-xl.text-center.transition.hover\:opacity-80:only-child>span{display:inline;margin:0;font-size:.875rem}
/* botones de calendario / cómo llegar del mismo ancho */
@media (max-width:479.98px){html body .g-acc>a.g-btn1,html body .g-acc>a.g-btn2{flex:1 1 100%}}
/* «Todas las fechas»: carrusel horizontal en móvil */
@media (max-width:639.98px){
  html body .g-fns{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  html body .g-fns::-webkit-scrollbar{display:none}
  html body .g-fns>.g-fn{flex:0 0 auto;min-width:min(78%,240px);scroll-snap-align:start}
}
/* texto largo a 68ch en tablet */
@media (min-width:600px) and (max-width:1023.98px){html body .t3a-rich p,html body .t3a-rich li,html body #t3a-about p,html body #section-about p{max-width:68ch}}
/* imagen principal 16:9 en móvil (el contenedor era 40vh y la imagen 16:9) */
@media (max-width:639.98px){article.min-h-screen>div.relative.w-full.overflow-hidden.mb-8{height:auto;aspect-ratio:16/9}}
/* relacionados repetidos, noticias viejas e ids repetidos del plan (marcados por movil.js) */
[data-mv-dup]{display:none}

/* ========== 10) Festival html body .t14 ========== */
@media (min-width:640px) and (max-width:1023.98px){
  html body .t14 .t14-lst{grid-template-columns:1fr 1fr}
  html body .t14 .t14-lst>li:last-child:nth-child(odd){grid-column:1/-1}
  html body .t14 p{max-width:68ch}
}
html body .t14 ul.t14-fu,html body .t14 .t14-dia ul,html body .t14 ul.t14-tips{padding:0;list-style:none}
html body .t14 .t14-dia li,html body .t14 ul.t14-tips li{position:relative;padding-left:16px}
html body .t14 .t14-dia li::before,html body .t14 ul.t14-tips li::before{content:"";position:absolute;left:2px;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--ctxd-accent,#dc2f3e)}
html body .t14 ul.t14-fu li{margin:0;padding:6px 0;border-bottom:1px solid var(--ctxd-border,var(--border,#e4e4e7));font-size:.9375rem}
html body .t14 ul.t14-fu li:last-child{border-bottom:0}
html body .t14 ul.t14-fu a{display:inline-block;padding:6px 0}
html body .t14 .t14-bol+p{margin-top:14px}
@media (max-width:639.98px){html body .t14 .t14-hero{aspect-ratio:16/9}}
html body .t14 nav.t14-mig a{display:inline-block;padding:12px 6px;margin:-12px -6px}


/* ===== paquete: pie ===== */
/* ctxd pie móvil/tablet — paquete «pie» (QA móvil 3-nov-2026)
   Ámbito: footer.border-t[role=contentinfo] global. Sin !important salvo contra
   estilos inline del bundle (style="…") o reglas ctxd que ya llevan !important. */

/* ---------- 1) Boletín: el botón no se sale de la tarjeta (todas las anchuras) ---------- */
footer.border-t form.space-y-2>div.flex.gap-2{flex-wrap:wrap}
footer.border-t form.space-y-2>div.flex.gap-2>input[type=email]{min-width:0;flex:1 1 160px;min-height:44px;font-size:16px}
footer.border-t form.space-y-2>div.flex.gap-2>button{flex:1 0 auto;min-height:44px}

/* ---------- 2) Sin franja blanca bajo el pie (<1024: barra inferior fija) ----------
   La reserva de la barra (72) + Mi día (--hx-ck) + safe-area pasa del body al propio pie,
   así el gris del pie llega hasta el borde. Solo cuando el body tiene el pie como hijo.
   html:not(#_) sube la especificidad por encima de html[data-hx] body{…!important} (ctxd-nav-v5). */
@media (max-width:1023.98px){
  footer.border-t[role=contentinfo]{
    margin-top:32px;
    margin-bottom:0;
    padding-bottom:calc(var(--ctxd-nav-h,72px) + var(--hx-ck,0px) + env(safe-area-inset-bottom,0px) + 16px);
  }
  html:not(#_) body:has(>footer.border-t[role=contentinfo]){padding-bottom:0!important}
  #main.pb-16{padding-bottom:0}
}

/* ---------- 3) Rejilla de tablet: 4 columnas + bloque de marca a lo ancho ---------- */
@media (min-width:768px) and (max-width:1023.98px){
  footer.border-t .grid.grid-cols-2.gap-8{grid-template-columns:repeat(4,minmax(0,1fr))}
  footer.border-t .grid.grid-cols-2.gap-8>:first-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-items:start}
  footer.border-t .grid.grid-cols-2.gap-8>:first-child>:not(.rounded-xl){grid-column:1/-1}
  footer.border-t .grid.grid-cols-2.gap-8>:first-child>.rounded-xl{margin-top:16px}
  /* 8) agenda mensual: 4 ciudades por fila en vez de 5 columnas estrechas */
  footer.border-t .grid.grid-cols-2.gap-x-4.gap-y-3{grid-template-columns:repeat(4,minmax(0,1fr))}
}
footer.border-t a.footer-link{line-height:1.3}

/* ---------- 4) Objetivos táctiles ≥44 px ---------- */
footer.border-t a.footer-link,
footer.border-t a.footer-legal-link{min-height:44px;min-width:44px;display:inline-flex;align-items:center}
footer.border-t a[href^="mailto:"]{min-height:44px}
footer.border-t .ctx-install-link{min-height:44px}
footer.border-t a[href="/"][aria-label]{display:inline-flex;align-items:center;min-height:44px}
footer.border-t a.w-8.h-8[aria-label]{width:44px;height:44px}
/* listas en columna: el alto ya lo da el enlace, fuera el space-y-2 (8 px) */
footer.border-t ul.space-y-2>li:not([hidden]){margin-top:0}
/* filas en línea: 20 px entre enlaces, sin hueco vertical extra */
footer.border-t .flex.flex-wrap.gap-x-4.gap-y-1{column-gap:20px;row-gap:0}
footer.border-t .flex.flex-wrap.gap-x-3.gap-y-1{column-gap:12px;row-gap:0}
/* legales: 13 px y que bajen de línea a 320 px en vez de desbordar */
footer.border-t a.footer-legal-link{font-size:13px}
footer.border-t div.flex.items-center.gap-4.text-xs:has(>a.footer-legal-link){flex-wrap:wrap;justify-content:center;column-gap:16px;row-gap:0}

/* ---------- 5) Insignias de tiendas: aspecto de «aún no disponible» ---------- */
footer.border-t div.flex.gap-2:has(>span.inline-flex.rounded-lg){flex-wrap:wrap}
footer.border-t span.inline-flex.rounded-lg.text-\[10px\]{
  font-size:12px;white-space:nowrap;cursor:default;
  background:transparent!important;
  border:1px dashed var(--border);
  min-height:32px;
}
footer.border-t span.inline-flex.rounded-lg.text-\[10px\]::after{
  content:"Pronto";margin-left:4px;padding:1px 6px;border-radius:6px;
  font-size:11px;font-weight:600;color:var(--fg);background:var(--surface,transparent);
  border:1px solid var(--border);
}
html[lang^=en] footer.border-t span.inline-flex.rounded-lg.text-\[10px\]::after{content:"Soon"}

/* ---------- 6) Textos pequeños: mínimo 12-13 px y escalables (rem) ---------- */
footer.border-t .text-\[11px\]{font-size:.8125rem;line-height:1.4}
footer.border-t .text-\[10px\]{font-size:.75rem;line-height:1.4}
footer.border-t span.block.text-\[11px\].font-semibold{color:var(--fg)!important}

/* ---------- 8) Agenda: meses retargeteados por movil.js van al final ---------- */
footer.border-t a[data-pie-mes]{order:9}

/* ---------- 9) Bloque «Descubre en…»: sin rojo de marca; enlaces ocultados por país ---------- */
footer.border-t a.footer-link.font-medium[style*="e63946"]{color:inherit!important}
footer.border-t [data-pie-oculto]{display:none!important}

/* ---------- 10) Plegado de bloques largos del pie (<768). Solo actúa si movil.js
   marcó el bloque (data-pie-plegable): sin JS todo queda abierto. ---------- */
@media (max-width:767.98px){
  footer.border-t [data-pie-plegable]{padding-top:0}
  footer.border-t [data-pie-plegable]>h2{
    display:flex;align-items:center;justify-content:space-between;
    min-height:48px;margin:0;cursor:pointer;font-size:14px;
    -webkit-tap-highlight-color:transparent;
  }
  footer.border-t [data-pie-plegable]>h2::after{
    content:"";width:8px;height:8px;margin-right:6px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);transition:transform .2s;
  }
  footer.border-t [data-pie-plegable][data-pie-abierto]>h2::after{transform:rotate(-135deg)}
  footer.border-t [data-pie-plegable]:not([data-pie-abierto])>:not(h2){display:none}
  footer.border-t [data-pie-plegable][data-pie-abierto]>:not(h2){padding-bottom:12px}
  footer.border-t [data-pie-plegable]>h2:focus-visible{outline:2px solid #e63946;outline-offset:2px;border-radius:6px}
  footer.border-t [data-pie-plegable]+[data-pie-plegable]{margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  footer.border-t [data-pie-plegable]>h2::after{transition:none}
}


/* ===== paquete: blog ===== */
/* ctxplorer · paquete «blog» · QA móvil 3-nov-2026
   Listado /blog  → main:has(nav[aria-label="Páginas del blog"]) / main:has(nav[aria-label="Filtrar por categoría"])
   Post /blog/*   → main:has(.blog-content)
   Las reglas de .blog-content llevan «main » delante: el <style> inline del post va DESPUÉS en el documento
   y a igual especificidad ganaría. !important solo contra style="" del bundle. */

/* =========================================================
   POST · 1) Newsletter interna (Suscribirme dentro de la tarjeta)
   ========================================================= */
main:has(.blog-content) .mt-12.rounded-2xl.p-6 form.space-y-2 > div.flex.gap-2{flex-wrap:wrap}
main:has(.blog-content) .mt-12.rounded-2xl.p-6 form.space-y-2 > div.flex.gap-2 > input[type=email]{
  flex:1 1 180px;min-width:0;width:auto;font-size:16px;min-height:48px}
main:has(.blog-content) .mt-12.rounded-2xl.p-6 form.space-y-2 > div.flex.gap-2 > button[type=submit]{
  flex:0 0 auto;min-height:48px;padding-inline:20px}
main:has(.blog-content) .mt-12.rounded-2xl.p-6 p.text-\[11px\]{font-size:12px}
@media (max-width:639.98px){
  main:has(.blog-content) .mt-12.rounded-2xl.p-6{padding:20px}
  main:has(.blog-content) .mt-12.rounded-2xl.p-6 form.space-y-2 > div.flex.gap-2 > button[type=submit]{flex:1 1 100%;width:100%}
}

/* =========================================================
   POST · 2) Tablas con scroll propio
   ========================================================= */
main .blog-content table{
  display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
main .blog-content th,
main .blog-content td{padding:10px 12px;vertical-align:top}
main .blog-content td:last-child{white-space:nowrap}
main .blog-content th{font-size:12.5px;letter-spacing:.04em;white-space:nowrap;line-height:1.3}
main .blog-content td{font-size:15px;line-height:1.5}

/* =========================================================
   POST · 3) Listas, pies de foto, vídeo, hero, ancho en tablet
   ========================================================= */
main .blog-content ul{list-style:disc outside;padding-left:1.375em}
main .blog-content ol{list-style:decimal outside;padding-left:1.5em}
main .blog-content ul ul{list-style-type:circle}
main .blog-content li::marker{color:#e63946}
main .blog-content figure{margin:2em 0}
main .blog-content figure img{margin:0;display:block;width:100%}
main .blog-content figcaption{margin-top:8px;font-size:14px;line-height:1.45;color:var(--text-tertiary,#63636c)}
main .blog-content figure.video iframe,
main .blog-content iframe[src*="youtube"]{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:16px}
main .blog-content img{max-width:100%;height:auto}
/* hero repetido como primera figura (lo marca movil.js) */
main .blog-content figure[data-blog-dup]{display:none}
@media (max-width:767.98px){
  main:has(.blog-content) .relative.aspect-\[21\/9\]{aspect-ratio:16/9}
}
@media (min-width:768px) and (max-width:1023.98px){
  main .blog-content{max-width:42rem;margin-inline:auto}
}

/* =========================================================
   POST · 6) Cabecera del post
   ========================================================= */
/* «Volver al blog» y migas: 44 px de toque, 13 px legibles */
main:has(.blog-content) nav.pt-8.pb-2 > a{min-height:44px}
main:has(.blog-content) nav[aria-label="Breadcrumb"]{padding-bottom:12px}
main:has(.blog-content) nav[aria-label="Breadcrumb"] ol{flex-wrap:wrap;column-gap:4px;row-gap:0;font-size:13px;color:var(--text-secondary,#4f4f58)!important}
main:has(.blog-content) nav[aria-label="Breadcrumb"] ol a{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px}
main:has(.blog-content) nav[aria-label="Breadcrumb"] ol > li:last-child{display:inline-flex;align-items:center;min-height:44px}
/* chip de categoría: 36 px */
main:has(.blog-content) header.mb-10 > div.flex.items-center.gap-3 > a.rounded-full{display:inline-flex;align-items:center;min-height:36px;padding-inline:16px}
/* autor · fecha · lectura */
main:has(.blog-content) header.mb-10 div.flex.items-center.gap-2.text-xs{flex-wrap:wrap;row-gap:2px;font-size:13px;color:var(--text-secondary,#4f4f58)!important}
main:has(.blog-content) header.mb-10 div.flex.items-center.gap-2.text-xs > *{white-space:nowrap}
main:has(.blog-content) header.mb-10 p.text-xs.mt-1{font-size:13px;line-height:1.45;color:var(--text-secondary,#4f4f58)!important}
main:has(.blog-content) header.mb-10 p.text-xs.mt-1 a{display:inline-flex;align-items:center;min-height:32px}
main:has(.blog-content) header.mb-10 > div.flex.flex-wrap > div.flex.items-center.gap-4{min-width:0}
/* Compartir (cabecera y tarjeta «¿Te gustó…?»): 44 px */
main:has(.blog-content) button.rounded-xl.px-4.py-2{min-height:44px;padding-inline:16px}
main:has(.blog-content) div.mt-10.pt-8.border-t > div.flex.items-center.justify-between.rounded-2xl.p-6{flex-wrap:wrap;gap:12px}
@media (max-width:639.98px){
  main:has(.blog-content) div.mt-10.pt-8.border-t > div.flex.items-center.justify-between.rounded-2xl.p-6{padding:20px}
}
main:has(.blog-content) div.mt-10.pt-8.border-t > div.rounded-2xl.p-6 p.text-xs{font-size:13px}
/* etiquetas sin enlace: sin aspecto de botón */
main:has(.blog-content) div.mt-12.pt-8.border-t > div.flex.flex-wrap > span.rounded-full{cursor:default;transition:none;font-size:12px}
main:has(.blog-content) div.mt-12.pt-8.border-t > div.flex.flex-wrap > span.rounded-full:hover{opacity:1}
main:has(.blog-content) div.mt-12.pt-8.border-t > div.flex.flex-wrap > span.rounded-full::before{content:"#";opacity:.6}
/* Anterior / Siguiente */
main:has(.blog-content) div.mt-10.pt-8.border-t.grid > a > span.text-\[11px\]{font-size:12px}
main:has(.blog-content) div.mt-10.pt-8.border-t.grid > a > span.line-clamp-2{-webkit-line-clamp:3;line-clamp:3}

/* =========================================================
   POST · 7) Registro, relacionados, pie, titulares
   ========================================================= */
/* hueco del botón de Google mientras carga GIS: placeholder con el logo */
.blog-content #ctxd-reg .gb:empty{
  justify-content:center;gap:10px;border-radius:4px;background:#fff;border:1px solid #dadce0;color:#3c4043;
  font-size:14px;font-weight:500;min-height:44px}
.blog-content #ctxd-reg .gb:empty::before{
  content:"";width:18px;height:18px;flex:0 0 18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.8 2.4 30.3 0 24 0 14.6 0 6.6 5.4 2.6 13.3l7.9 6.1C12.4 13.7 17.7 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.1 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.4c-.5 2.9-2.2 5.3-4.6 6.9l7.4 5.7c4.3-4 6.9-9.9 6.9-17.1z'/%3E%3Cpath fill='%23FBBC05' d='M10.5 28.6c-.5-1.4-.8-2.9-.8-4.6s.3-3.2.8-4.6l-7.9-6.1C.9 16.6 0 20.2 0 24s.9 7.4 2.6 10.7l7.9-6.1z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.4-5.7c-2.1 1.4-4.8 2.3-8.5 2.3-6.3 0-11.6-4.2-13.5-9.9l-7.9 6.1C6.6 42.6 14.6 48 24 48z'/%3E%3C/svg%3E") center/contain no-repeat}
.blog-content #ctxd-reg .gb:empty::after{content:"Continuar con Google"}
/* relacionados */
main:has(.blog-content) section.border-t.py-20 h2.text-2xl{word-spacing:.06em}
@media (max-width:767.98px){
  main:has(.blog-content) section.border-t.py-20{padding-block:48px}
}
@media (min-width:768px) and (max-width:1023.98px){
  main:has(.blog-content) section.border-t.py-20 > div.max-w-7xl.px-4{padding-inline:32px}
}
/* sin banda blanca entre relacionados y pie (gana a footer.border-t[role=contentinfo]{margin:32px 0 0} del paquete pie) */
body:has(main .blog-content) > footer.border-t[role=contentinfo]{margin-top:0}
main:has(.blog-content) > div > div.max-w-3xl > div.mt-10.mb-16.text-center{margin-bottom:48px}
/* titulares del cuerpo */
main .blog-content h2,
main .blog-content h3,
main .blog-content h4{letter-spacing:-.01em;word-spacing:.06em}
@media (max-width:639.98px){
  main .blog-content h2{font-size:1.4375rem;margin-top:1.8em}
  main .blog-content h3{font-size:1.1875rem}
}

/* =========================================================
   LISTADO /blog · 5)
   ========================================================= */
/* hero */
@media (max-width:767.98px){
  main:has(nav[aria-label="Filtrar por categoría"]) section.relative.overflow-hidden > div.relative.max-w-7xl.py-20{padding-block:28px}
  main:has(nav[aria-label="Filtrar por categoría"]) section.relative.overflow-hidden > div.relative.max-w-7xl.py-20 > h1{font-size:clamp(2.25rem,10vw,3rem);margin-bottom:12px}
  main:has(nav[aria-label="Filtrar por categoría"]) section.relative.overflow-hidden > div.relative.max-w-7xl.py-20 > div.inline-flex{margin-bottom:16px}
  main:has(nav[aria-label="Filtrar por categoría"]) section.relative.overflow-hidden > div.relative.max-w-7xl.py-20 > p{font-size:1rem}
}
/* chips de categoría */
nav[aria-label="Filtrar por categoría"] > a{text-transform:capitalize}
@media (max-width:639.98px){
  nav.overflow-x-auto.scrollbar-hide[aria-label="Filtrar por categoría"]{
    margin:0 -16px 32px;padding:0 16px 8px;scroll-snap-type:x proximity;scroll-padding-inline:16px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  nav.overflow-x-auto.scrollbar-hide[aria-label="Filtrar por categoría"][data-blog-fin]{-webkit-mask-image:none;mask-image:none}
  nav.overflow-x-auto.scrollbar-hide[aria-label="Filtrar por categoría"] > a{scroll-snap-align:start;padding-inline:16px}
  nav.overflow-x-auto.scrollbar-hide[aria-label="Filtrar por categoría"]::after{content:"";flex:0 0 1px}
}
/* destacado */
@media (max-width:767.98px){
  main:has(nav[aria-label="Filtrar por categoría"]) article.mb-16 > a.rounded-3xl .p-8{padding:20px}
  main:has(nav[aria-label="Filtrar por categoría"]) article.mb-16 > a.rounded-3xl h2{font-size:1.375rem;line-height:1.25;margin-bottom:10px}
  main:has(nav[aria-label="Filtrar por categoría"]) article.mb-16 > a.rounded-3xl p.mb-8{margin-bottom:16px;font-size:1rem}
  main:has(nav[aria-label="Filtrar por categoría"]) article.mb-16 > a.rounded-3xl .mb-5{margin-bottom:12px}
  main:has(nav[aria-label="Filtrar por categoría"]) article.mb-16{margin-bottom:40px}
}
@media (min-width:768px) and (max-width:1023.98px){
  main:has(nav[aria-label="Filtrar por categoría"]) article.mb-16 > a.rounded-3xl > div.grid{grid-template-columns:minmax(0,1fr)}
  main:has(nav[aria-label="Filtrar por categoría"]) article.mb-16 > a.rounded-3xl > div.grid > div.relative{aspect-ratio:16/9;min-height:0}
  main:has(nav[aria-label="Filtrar por categoría"]) article.mb-16 > a.rounded-3xl .p-8{padding:28px 32px}
  main:has(nav[aria-label="Filtrar por categoría"]) article.mb-16 > a.rounded-3xl h2{font-size:1.75rem}
}
/* cabecera «Últimos artículos · 528 artículos» */
main:has(nav[aria-label="Filtrar por categoría"]) div.flex.items-center.gap-4.mb-8:has(> h2 + div.flex-1.h-px){flex-wrap:wrap;row-gap:4px}
main:has(nav[aria-label="Filtrar por categoría"]) div.flex.items-center.gap-4.mb-8:has(> h2 + div.flex-1.h-px) > h2,
main:has(nav[aria-label="Filtrar por categoría"]) div.flex.items-center.gap-4.mb-8:has(> h2 + div.flex-1.h-px) > span{white-space:nowrap}
main:has(nav[aria-label="Filtrar por categoría"]) div.flex.items-center.gap-4.mb-8:has(> h2 + div.flex-1.h-px) > div.flex-1{min-width:24px}
/* tarjetas de la rejilla */
main:is(:has(nav[aria-label="Filtrar por categoría"]),:has(.blog-content)) article > a.group.rounded-2xl h3.line-clamp-2{-webkit-line-clamp:3;line-clamp:3}
main:is(:has(nav[aria-label="Filtrar por categoría"]),:has(.blog-content)) article > a.group.rounded-2xl p.text-\[11px\],
main:is(:has(nav[aria-label="Filtrar por categoría"]),:has(.blog-content)) article > a.group.rounded-2xl time.text-\[11px\]{font-size:12px}
@media (max-width:639.98px){
  main:is(:has(nav[aria-label="Filtrar por categoría"]),:has(.blog-content)) article > a.group.rounded-2xl > div.p-6{padding:18px}
  main:is(:has(nav[aria-label="Filtrar por categoría"]),:has(.blog-content)) article > a.group.rounded-2xl > div.p-5{padding:16px}
  main:has(nav[aria-label="Filtrar por categoría"]) div.grid.grid-cols-1.md\:grid-cols-2.gap-8{gap:20px}
}
@media (max-width:359.98px){
  main:is(:has(nav[aria-label="Filtrar por categoría"]),:has(.blog-content)) article > a.group.rounded-2xl > div.p-6{padding:16px}
}
/* logos / notas de prensa: sin recorte (movil.js pone data-blog-fit por proporción) */
main img[data-blog-fit=contain]{object-fit:contain;background:var(--surface-2,#ececee)}
/* paginación: 1 · actual · última + «Más artículos» a lo ancho (movil.js marca data-blog-pag) */
@media (max-width:767.98px){
  nav[aria-label="Páginas del blog"][data-blog-pag-on] > a[aria-label^="Página"]:not([data-blog-pag=keep]){display:none}
  nav[aria-label="Páginas del blog"] > a[rel=next],
  nav[aria-label="Páginas del blog"] > a[rel=prev]{flex:1 1 100%;min-height:48px}
  nav[aria-label="Páginas del blog"] > a[rel=prev]{order:-1}
  nav[aria-label="Páginas del blog"] > a[rel=next]{order:9}
}


/* ===== paquete: tarjetas ===== */
/* ctxd · paquete «tarjetas» (QA móvil 3-nov-2026)
   Componentes de tarjeta compartidos: botón Mi día (.ctxd-cadd), corazón de favoritos, event-card-premium,
   imágenes de tarjeta, .ctxd-dir/.ctxd-add, estrellas. Ver NOTAS.md. */

/* ---------- 1 · Mi día vuelve a ser absoluto en táctil ----------
   c-ux §15 @media(pointer:coarse) le pone position:relative con especificidad 0,5,4 y el botón pasa al flujo.
   Respaldo hasta aplicar el diff de c-ux: 5 clases + atributo = 0,7,1. */
a[data-ctxd="1"]{position:relative}
a[data-ctxd]>.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd{position:absolute;top:8px;left:8px;z-index:11;min-height:44px}
/* GRATIS / -% estaban en la misma esquina que Mi día: bajan a la esquina inferior izquierda de la foto
   (la etiqueta de categoría ya va debajo de la foto por c-ux §7) */
a[data-ctxd="1"]>article.event-card-premium>div.relative:first-child>div.absolute.top-3.left-3{top:auto;bottom:8px}
/* botón heredado «Agregar a mi Perfect Day» (0x0 bajo la foto): duplicado de Mi día */
a[data-ctxd="1"]>article.event-card-premium>div.relative:first-child>div.absolute.top-3.right-12{display:none}

/* ---------- 2 · Mi día al pie en .t8c, .rxc y .lxc ---------- */
a.t8c[data-ctxd]>.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd,
a.rxc[data-ctxd]>.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd,
a.lxc[data-ctxd]>.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd{position:relative;top:auto;left:auto;align-self:flex-start;flex:0 0 auto;min-height:44px;box-shadow:none}
a.rxc[data-ctxd]>.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd{margin:auto 16px 16px}
a.lxc[data-ctxd]>.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd{margin:auto 14px 14px}
a.t8c[data-ctxd]>.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd{margin:auto 0 0}
a.t8c[data-ctxd]>:nth-last-child(2):not(.t8c-img){margin-bottom:6px}
a.rxc[data-ctxd]>.rxc-b{flex:1 0 auto;padding-bottom:12px}
a.lxc[data-ctxd]>.lxc-b{padding-bottom:12px}

/* t4a (/cdmx-hoy, /finde): hoy el botón vive dentro de la foto a.t4a-cimg → esquina inferior derecha,
   para no tapar el texto del póster ni GRATIS. Con el diff de ctxd-v1.js pasa al cuerpo (.t4a-cb), abajo. */
a.t4a-cimg[data-ctxd]>.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd{top:auto;left:auto;right:8px;bottom:8px}
.t4a-lc a.t4a-cimg[data-ctxd]>.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd{width:44px;height:44px;padding:0;gap:0;justify-content:center;font-size:0;right:6px;bottom:6px}
.t4a-cb>.ctxd-cadd.ctxd-cadd{position:relative;top:auto;left:auto;margin-top:10px;min-height:44px;box-shadow:none}
.t4a-lc .t4a-cb>.ctxd-cadd.ctxd-cadd{width:44px;height:44px;padding:0;gap:0;justify-content:center;font-size:0}
.ctxd-cadd .ctxd-ico{flex:0 0 auto}

/* ---------- 3 · Corazón de favoritos visible sobre la foto ----------
   c-ux §7 le quita el fondo y lo pinta de --fg con !important (casi negro sobre fotos oscuras); ctxd-t7a ya lo deja arriba
   a la derecha (top/right 8px). !important solo para ganar a los !important de c-ux. */
article.event-card-premium>div.relative:first-child>button.rounded-full[aria-label$="favoritos"]{background:rgba(17,17,19,.55)!important;color:#fff!important;border-radius:999px;-webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important}
article.event-card-premium>div.relative:first-child>button.rounded-full[aria-label$="favoritos"] svg{color:#fff!important;stroke:#fff}
article.event-card-premium>div.relative:first-child>button.rounded-full[aria-label$="favoritos"]:hover{background:rgba(17,17,19,.72)!important}

/* ---------- 5 · Imágenes de tarjeta ----------
   movil.js marca con data-ctxd-wide las fotos cuya proporción se aleja >25 % de su caja (carteles 16:9 / 2,4:1 en 4:3) */
article.event-card-premium>div.relative:first-child{background-color:var(--card-hover,var(--border))}
article.event-card-premium img[data-ctxd-wide],
.t4a-cimg img[data-ctxd-wide],.lxc-img img[data-ctxd-wide],.rxc-img img[data-ctxd-wide],
#t8a .t8c-img img[data-ctxd-wide],a.group img[data-ctxd-wide]{object-fit:contain}

/* ---------- 6 · Hueco fecha → precio y «Ver precios» con cara de acción ---------- */
@media (max-width:639px){
  .grid-cols-1>a.group.block.h-full,.grid-cols-1>a.group.block.h-full>article.event-card-premium{height:auto}
  .grid-cols-1>a.group.block.h-full>article.event-card-premium>div.p-3>.mt-auto{margin-top:8px}
}
/* el span lleva color inline (--text-secondary): !important contra ese inline */
.event-card-premium .cx-sinp{color:var(--ctxd-accent-text,#c1121f)!important;font-weight:700}
.event-card-premium .cx-sinp::after{content:" \203A";font-weight:700}

/* ---------- 7 · Etiquetas sobre/bajo la foto ---------- */
/* c-ux reservaba 88 px a la derecha para los botones que ahora van sobre la foto */
article.event-card-premium>div.relative:first-child>div.absolute.bottom-3.left-3{max-width:calc(100% - 24px)}
/* /en/us/new-york: bg-black/50 no existe en el CSS purgado → texto blanco sin fondo */
a.group span.absolute.top-2.left-2.bg-black\/50{background:rgba(0,0,0,.6)}

/* ---------- 8 · Tamaños táctiles ---------- */
button.ctxd-cadd{min-height:44px}
button.ctxd-add{min-height:44px}
.ctxd-plan .ctxd-ca a.ctxd-dir{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin-left:-8px;margin-right:0}

/* ---------- 9 · Detalles ---------- */
/* estrellas: movil.js pone role=img + aria-label en el grupo; los botones no deben recibir toques */
[data-ctxd-estrellas]>button{pointer-events:none}
/* el zoom de group-hover se queda pegado tras un toque */
@media (hover:none){.group:hover img{transform:none;scale:none}}
/* placeholder sin foto: el nombre ya está al lado, queda solo el icono */
.ctxd-plan .ctxd-ph.ctxd-ph>span{display:none}
/* títulos de tarjeta: el tracking negativo pega palabras a 15 px */
.event-card-premium h3,a.group h3,.t8c-t,.rxc-n,.lxc-n{letter-spacing:0;word-spacing:.05em}

/* FAQ: c-ux §15 ::after (táctil) borra el «+/–» de .t14-fq y .t9a-faq. Respaldo hasta aplicar el diff de c-ux (0,3,x > 0,2,5). */
@media (pointer:coarse){
  .t14-fq.t14-fq.t14-fq>summary::after{content:"+";position:static;height:auto;min-width:0;transform:none;left:auto;right:auto;top:auto}
  .t14-fq.t14-fq.t14-fq[open]>summary::after{content:"\2013"}
  .t9a-faq.t9a-faq.t9a-faq summary::after{content:"+";position:static;height:auto;min-width:0;transform:none;left:auto;right:auto;top:auto}
  .t9a-faq.t9a-faq.t9a-faq details[open] summary::after{content:"\2013"}
}


/* ===== paquete: home-hub-ciudad ===== */
/* ctxd movil · paquete home-hub-ciudad (Home /, hubs /mx/cdmx, /cl/santiago) · 3-nov-2026
   --hdr-h lo mide el paquete «cabecera» (movil.js); aquí solo se usa con respaldo 57/65 px. */

/* 1) Barra de filtros sticky bajo la cabecera (antes top:0 cuando la medición de t8a daba 0) */
section#t8a nav.t8a-bar{top:var(--hdr-h,57px)}
@media (min-width:768px){section#t8a nav.t8a-bar{top:var(--hdr-h,65px)}}
section#t8a .t8a-a{scroll-margin-top:calc(var(--hdr-h,57px) + 64px)}

/* 2) AdSense automático: que no rompa la rejilla ni se salga; fuera del pie.
   !important solo contra los estilos inline que mete AdSense (width/height/margin). */
.grid>.google-auto-placed{grid-column:1/-1;width:100%!important;max-width:100%;overflow:hidden;margin-inline:0!important}
ins.adsbygoogle{display:block;max-width:100%!important}
.google-auto-placed{max-width:100%;overflow:hidden;margin-block:16px}
footer .google-auto-placed,.ctxd-xp .google-auto-placed{display:none!important}

/* 3) Menú de ciudad dentro de la pantalla a 320-480 px */
@media (max-width:480px){
  section#t8a .t8a-top{position:relative}
  section#t8a details.t8a-city{position:static}
  section#t8a .t8a-menu{left:16px;right:16px;min-width:0;max-height:60vh;overflow:auto;overscroll-behavior:contain}
}

/* 4) Héroes: con letra al 150 % el contenido crece en vez de salirse por arriba */
section.relative[class*="h-[62vh]"][class*="max-h-[560px]"]{height:auto;min-height:max(430px,62vh);max-height:none;padding-top:calc(var(--hdr-h,57px) + 24px)}
@supports (min-height:1svh){section.relative[class*="h-[62vh]"][class*="max-h-[560px]"]{min-height:max(430px,62svh)}}
@media (min-width:768px){
  section.relative[class*="h-[62vh]"][class*="max-h-[560px]"]{min-height:max(460px,64vh);padding-top:calc(var(--hdr-h,65px) + 24px)}
  @supports (min-height:1svh){section.relative[class*="h-[62vh]"][class*="max-h-[560px]"]{min-height:max(460px,64svh)}}
}
@supports (min-height:1svh){
  section[data-ctxd-hueco="heroe"][class*="min-h-[88vh]"]{min-height:88svh}
  @media (min-width:640px){section[data-ctxd-hueco="heroe"][class*="min-h-[88vh]"]{min-height:85svh}}
}

/* 5) Invitación a registrarse: «Ya tengo cuenta» no se corta */
#ctxd-inv .in .bt{flex-wrap:wrap;row-gap:8px}
@media (max-width:389px){#ctxd-inv .in .bt>*{flex:1 1 100%;justify-content:center;text-align:center}}

/* 6) Planes armados: tarjetas a la misma altura, el pie (precio + botón) abajo */
section#t8a .t8a-b .t8a-pg{align-items:stretch}
section#t8a .t8a-pg>.t8p{display:flex;flex-direction:column}
section#t8a .t8a-pg>.t8p>:last-child{margin-top:auto}
section#t8a .t8a-b--planes{padding-bottom:0}

/* 7) Carruseles: el primer elemento alineado con el margen de 16 px (no pegado al borde) */
div.overflow-x-auto.snap-x.-mx-4,.rx-row,section#t8a .t8a-g,section#t8a .t8a-pg{scroll-padding-inline:16px}
section#t8a .t8a-g>.ctxd-puente{order:99}

/* 8) Franja con una sola tarjeta: ancho normal en móvil; horizontal en tableta */
section#t8a .t8a-g:has(>.t8c:only-child){grid-auto-columns:220px}
@media (min-width:600px) and (max-width:1023px){
  section#t8a .t8a-g:has(>.t8c:only-child){grid-auto-columns:min(100%,560px)}
  section#t8a .t8a-g>.t8c:only-child{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:16px;align-content:start}
  section#t8a .t8a-g>.t8c:only-child>.t8c-img{grid-row:1/span 6;margin:0}
  section#t8a .t8a-g>.t8c:only-child>:not(.t8c-img){grid-column:2}
}

/* 9) Cabeceras de sección: «Ver todo» en la misma línea que el título */
section#t8a .t8a-h{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px}
section#t8a .t8a-h>h2{min-width:0;grid-column:1;grid-row:1}
section#t8a .t8a-h>.t8a-v{grid-column:2;grid-row:1;margin-left:0;white-space:nowrap}
section#t8a .t8a-h>.t8a-s{grid-column:1/-1;grid-row:2}
@media (max-width:1023px){section#t8a .t8a-h>h2{font-size:clamp(1.15rem,5.4vw,1.4rem)}}
section#t8a .t8a-v:hover{text-decoration:none;opacity:.8}
/* «Ver todo →» del bundle (rojo subrayado / pintado de --fg por ctxd) = mismo estilo que a.t8a-v */
main section div.justify-between>a.text-sm[class*="hover:underline"][href]{color:#bf2533;text-decoration:none;font-weight:700;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
:root.dark main section div.justify-between>a.text-sm[class*="hover:underline"][href]{color:#ff6b75}

/* 10) Secciones vacías fuera (menos «Hoy») y sus chips del filtro */
section#t8a .t8a-b:not(.t8a-b--hoy):has(>.t8a-vacio){display:none}
section#t8a:not([data-t8a-portada]):has(.t8a-b--finde>.t8a-vacio) .t8a-tab[href="#ver-finde"],
section#t8a:not([data-t8a-portada]):has(.t8a-b--destacados>.t8a-vacio) .t8a-tab[href="#ver-destacados"],
section#t8a:not([data-t8a-portada]):has(.t8a-b--comer>.t8a-vacio) .t8a-tab[href="#ver-comer"],
section#t8a:not([data-t8a-portada]):has(.t8a-b--bares>.t8a-vacio) .t8a-tab[href="#ver-bares"],
section#t8a:not([data-t8a-portada]):has(.t8a-b--museos>.t8a-vacio) .t8a-tab[href="#ver-museos"],
section#t8a:not([data-t8a-portada]):has(.t8a-b--gratis>.t8a-vacio) .t8a-tab[href="#ver-gratis"],
:root[data-ctxd-pais="mx"] section#t8a[data-t8a-portada]:has([data-ctxd-p="mx"] .t8a-b--finde>.t8a-vacio) .t8a-tab[href="#ver-finde"],
:root[data-ctxd-pais="mx"] section#t8a[data-t8a-portada]:has([data-ctxd-p="mx"] .t8a-b--destacados>.t8a-vacio) .t8a-tab[href="#ver-destacados"],
:root[data-ctxd-pais="mx"] section#t8a[data-t8a-portada]:has([data-ctxd-p="mx"] .t8a-b--comer>.t8a-vacio) .t8a-tab[href="#ver-comer"],
:root[data-ctxd-pais="mx"] section#t8a[data-t8a-portada]:has([data-ctxd-p="mx"] .t8a-b--bares>.t8a-vacio) .t8a-tab[href="#ver-bares"],
:root[data-ctxd-pais="mx"] section#t8a[data-t8a-portada]:has([data-ctxd-p="mx"] .t8a-b--museos>.t8a-vacio) .t8a-tab[href="#ver-museos"],
:root[data-ctxd-pais="mx"] section#t8a[data-t8a-portada]:has([data-ctxd-p="mx"] .t8a-b--gratis>.t8a-vacio) .t8a-tab[href="#ver-gratis"],
:root[data-ctxd-pais="pe"] section#t8a[data-t8a-portada]:has([data-ctxd-p="pe"] .t8a-b--finde>.t8a-vacio) .t8a-tab[href="#ver-finde"],
:root[data-ctxd-pais="pe"] section#t8a[data-t8a-portada]:has([data-ctxd-p="pe"] .t8a-b--destacados>.t8a-vacio) .t8a-tab[href="#ver-destacados"],
:root[data-ctxd-pais="pe"] section#t8a[data-t8a-portada]:has([data-ctxd-p="pe"] .t8a-b--comer>.t8a-vacio) .t8a-tab[href="#ver-comer"],
:root[data-ctxd-pais="pe"] section#t8a[data-t8a-portada]:has([data-ctxd-p="pe"] .t8a-b--bares>.t8a-vacio) .t8a-tab[href="#ver-bares"],
:root[data-ctxd-pais="pe"] section#t8a[data-t8a-portada]:has([data-ctxd-p="pe"] .t8a-b--museos>.t8a-vacio) .t8a-tab[href="#ver-museos"],
:root[data-ctxd-pais="pe"] section#t8a[data-t8a-portada]:has([data-ctxd-p="pe"] .t8a-b--gratis>.t8a-vacio) .t8a-tab[href="#ver-gratis"],
:root[data-ctxd-pais="co"] section#t8a[data-t8a-portada]:has([data-ctxd-p="co"] .t8a-b--finde>.t8a-vacio) .t8a-tab[href="#ver-finde"],
:root[data-ctxd-pais="co"] section#t8a[data-t8a-portada]:has([data-ctxd-p="co"] .t8a-b--destacados>.t8a-vacio) .t8a-tab[href="#ver-destacados"],
:root[data-ctxd-pais="co"] section#t8a[data-t8a-portada]:has([data-ctxd-p="co"] .t8a-b--comer>.t8a-vacio) .t8a-tab[href="#ver-comer"],
:root[data-ctxd-pais="co"] section#t8a[data-t8a-portada]:has([data-ctxd-p="co"] .t8a-b--bares>.t8a-vacio) .t8a-tab[href="#ver-bares"],
:root[data-ctxd-pais="co"] section#t8a[data-t8a-portada]:has([data-ctxd-p="co"] .t8a-b--museos>.t8a-vacio) .t8a-tab[href="#ver-museos"],
:root[data-ctxd-pais="co"] section#t8a[data-t8a-portada]:has([data-ctxd-p="co"] .t8a-b--gratis>.t8a-vacio) .t8a-tab[href="#ver-gratis"],
:root[data-ctxd-pais="es"] section#t8a[data-t8a-portada]:has([data-ctxd-p="es"] .t8a-b--finde>.t8a-vacio) .t8a-tab[href="#ver-finde"],
:root[data-ctxd-pais="es"] section#t8a[data-t8a-portada]:has([data-ctxd-p="es"] .t8a-b--destacados>.t8a-vacio) .t8a-tab[href="#ver-destacados"],
:root[data-ctxd-pais="es"] section#t8a[data-t8a-portada]:has([data-ctxd-p="es"] .t8a-b--comer>.t8a-vacio) .t8a-tab[href="#ver-comer"],
:root[data-ctxd-pais="es"] section#t8a[data-t8a-portada]:has([data-ctxd-p="es"] .t8a-b--bares>.t8a-vacio) .t8a-tab[href="#ver-bares"],
:root[data-ctxd-pais="es"] section#t8a[data-t8a-portada]:has([data-ctxd-p="es"] .t8a-b--museos>.t8a-vacio) .t8a-tab[href="#ver-museos"],
:root[data-ctxd-pais="es"] section#t8a[data-t8a-portada]:has([data-ctxd-p="es"] .t8a-b--gratis>.t8a-vacio) .t8a-tab[href="#ver-gratis"],
:root[data-ctxd-pais="ar"] section#t8a[data-t8a-portada]:has([data-ctxd-p="ar"] .t8a-b--finde>.t8a-vacio) .t8a-tab[href="#ver-finde"],
:root[data-ctxd-pais="ar"] section#t8a[data-t8a-portada]:has([data-ctxd-p="ar"] .t8a-b--destacados>.t8a-vacio) .t8a-tab[href="#ver-destacados"],
:root[data-ctxd-pais="ar"] section#t8a[data-t8a-portada]:has([data-ctxd-p="ar"] .t8a-b--comer>.t8a-vacio) .t8a-tab[href="#ver-comer"],
:root[data-ctxd-pais="ar"] section#t8a[data-t8a-portada]:has([data-ctxd-p="ar"] .t8a-b--bares>.t8a-vacio) .t8a-tab[href="#ver-bares"],
:root[data-ctxd-pais="ar"] section#t8a[data-t8a-portada]:has([data-ctxd-p="ar"] .t8a-b--museos>.t8a-vacio) .t8a-tab[href="#ver-museos"],
:root[data-ctxd-pais="ar"] section#t8a[data-t8a-portada]:has([data-ctxd-p="ar"] .t8a-b--gratis>.t8a-vacio) .t8a-tab[href="#ver-gratis"],
:root[data-ctxd-pais="cl"] section#t8a[data-t8a-portada]:has([data-ctxd-p="cl"] .t8a-b--finde>.t8a-vacio) .t8a-tab[href="#ver-finde"],
:root[data-ctxd-pais="cl"] section#t8a[data-t8a-portada]:has([data-ctxd-p="cl"] .t8a-b--destacados>.t8a-vacio) .t8a-tab[href="#ver-destacados"],
:root[data-ctxd-pais="cl"] section#t8a[data-t8a-portada]:has([data-ctxd-p="cl"] .t8a-b--comer>.t8a-vacio) .t8a-tab[href="#ver-comer"],
:root[data-ctxd-pais="cl"] section#t8a[data-t8a-portada]:has([data-ctxd-p="cl"] .t8a-b--bares>.t8a-vacio) .t8a-tab[href="#ver-bares"],
:root[data-ctxd-pais="cl"] section#t8a[data-t8a-portada]:has([data-ctxd-p="cl"] .t8a-b--museos>.t8a-vacio) .t8a-tab[href="#ver-museos"],
:root[data-ctxd-pais="cl"] section#t8a[data-t8a-portada]:has([data-ctxd-p="cl"] .t8a-b--gratis>.t8a-vacio) .t8a-tab[href="#ver-gratis"]{display:none}

/* 11) Secciones antiguas duplicadas (las marca movil.js tras comprobar que la nueva tiene contenido) */
[data-hhc-dup]{display:none}

/* 12) Filtros: pista de que hay más chips a la derecha */
section#t8a .t8a-tabs{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);scroll-padding-inline:16px}
section#t8a .t8a-tabs[data-hhc-fin]{-webkit-mask-image:none;mask-image:none}

/* 13) Bloque amigos (variante compacta): 3 avatares de 40 px, el texto respira a 320 px */
main a[href="/amigos"].rounded-2xl .flex.shrink-0>span:nth-child(n+4){display:none}
main a[href="/amigos"].rounded-2xl img.rounded-full{width:40px;height:40px;object-fit:cover}
main a[href="/amigos"].rounded-2xl>div.min-w-0>div:not(.shrink-0){min-width:0}
@media (max-width:400px){main a[href="/amigos"].rounded-2xl{flex-wrap:wrap;row-gap:12px}main a[href="/amigos"].rounded-2xl>div.min-w-0{flex:1 1 100%}}

/* 14) Buscador sin zoom de iOS; tarjetas de los carruseles por categoría en tableta */
@media (max-width:767px){input[placeholder^="Buscar experiencias"]{font-size:16px}}
@media (min-width:600px) and (max-width:1023px){
  div.flex-shrink-0.snap-start:has(>a>article.event-card-premium){width:min(70vw,240px)}
}


/* ===== paquete: home-orden ===== */
/* home-orden · ctxplorer.com portada (/) · pedido literal de Jose 3-nov-2026.
   Solo CSS (flex order): no se mueve ningún nodo, React no se entera y no hay CLS si esta hoja
   va en el «head» o inline antes de <main>. Todo acotado al contenedor de la portada (H), que
   ya es flex column por ordenPortada() de app/ctxd/t8a.js. El prefijo "html" sube la
   especificidad un punto sobre esas reglas, así gana sea cual sea el orden de carga.

   Orden final (order):
   0 héroe · 1 #t8a «Qué hacer en…» · 2 «Explora por categoría» (sin cambios)
   3 amigos · restaurantes · explora por país · próximos (sin cambios)
   4 CTA «Empieza ahora»
   5 carruseles antes de Inmersivas (Arte y Museos, Conciertos, Deportes…)
   6 «Cine en México» (.cnh-fin)
   7 «Experiencias Inmersivas» y los carruseles que le siguen (Festivales, Teatro, Tours…)
   8 blog «Guías y notas»
   10 chips «Qué hacer hoy y este fin de semana» · 11 «Locales y espacios» · 12 texto «Descubre…»
   13 tarjetas «Experiencias inolvidables / Escríbenos / Perfect Day gratis»  → y luego el footer */

/* el envoltorio de carruseles se disuelve para que cada carrusel sea hijo flex y el cine
   pueda entrar entre Deportes e Inmersivas; cada carrusel recupera el ancho y gutter del envoltorio */
html #main>div:has(>.t8a-w>#t8a[data-t8a-portada])>[data-ctxd-hueco="carruseles-categoria"]{display:contents}
html #main>div:has(>.t8a-w>#t8a[data-t8a-portada])>[data-ctxd-hueco="carruseles-categoria"]>*{order:5;width:100%;max-width:80rem;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;box-sizing:border-box;min-width:0}
html #main>div:has(>.t8a-w>#t8a[data-t8a-portada])>[data-ctxd-hueco="carruseles-categoria"]>:has(a[href="/search?category=inmersivo"],a[href$="/inmersivo"]),html #main>div:has(>.t8a-w>#t8a[data-t8a-portada])>[data-ctxd-hueco="carruseles-categoria"]>:has(a[href="/search?category=inmersivo"],a[href$="/inmersivo"])~*{order:7}
/* el envoltorio daba py-8: el CTA de encima ya trae py-10; abajo se devuelve al último carrusel */
html #main>div:has(>.t8a-w>#t8a[data-t8a-portada])>[data-ctxd-hueco="carruseles-categoria"]>:last-child{margin-bottom:2rem}

html #main>div:has(>.t8a-w>#t8a[data-t8a-portada])>.t8a-w>.cnh-fin{order:6}
html #main>div:has(>.t8a-w>#t8a[data-t8a-portada])>section.py-10:not([data-ctxd-hueco]):has(>.max-w-5xl){order:4}
html #main>div:has(>.t8a-w>#t8a[data-t8a-portada])>[data-ctxd-hueco="guias-blog"]{order:8}
html #main>div:has(>.t8a-w>#t8a[data-t8a-portada])>div:has(>[data-ctxd-hueco="t4a-guias"]){order:10}
html #main>div:has(>.t8a-w>#t8a[data-t8a-portada])>section.py-9{order:11}
html #main>div:has(>.t8a-w>#t8a[data-t8a-portada])>section:has(>.rounded-xl.border.p-6){order:12}
html #main>div:has(>.t8a-w>#t8a[data-t8a-portada])>section.py-10:not([data-ctxd-hueco]):has(>.max-w-7xl){order:13}
/* el blog no trae padding superior: separación del último carrusel ya la da el margin-bottom de arriba */

/* CTA «Empieza ahora»: título equilibrado; en móvil sin <br> fijo y «Perfect Day» sin partir */
html #main>div>section.py-10:has(>.max-w-5xl) h2.text-3xl{text-wrap:balance}
@media (max-width:639px){
  html #main>div>section.py-10:has(>.max-w-5xl) h2.text-3xl br{display:none}
  html #main>div>section.py-10:has(>.max-w-5xl) h2.text-3xl .gradient-text{white-space:nowrap}
}

/* Chips «Qué hacer hoy y este fin de semana en …»: en móvil lista uniforme a ancho completo.
   !important solo contra los estilos inline del bundle (display, min-height, padding, gap). */
@media (max-width:639px){
  html #main>div:has(>.t8a-w>#t8a[data-t8a-portada]) section[data-ctxd-hueco="t4a-guias"] ul{flex-direction:column;gap:8px!important}
  html #main>div:has(>.t8a-w>#t8a[data-t8a-portada]) section[data-ctxd-hueco="t4a-guias"] li{width:100%}
  html #main>div:has(>.t8a-w>#t8a[data-t8a-portada]) section[data-ctxd-hueco="t4a-guias"] a{display:flex!important;width:100%;box-sizing:border-box;justify-content:space-between;gap:12px;min-height:48px!important;padding:10px 16px!important;line-height:1.3}
  html #main>div:has(>.t8a-w>#t8a[data-t8a-portada]) section[data-ctxd-hueco="t4a-guias"] a::after{content:"\2192";content:"\2192"/"";flex:none;color:#e63946;font-weight:800}
}


/* ===== paquete: cine ===== */
/* ctxd · paquete «cine» (QA móvil 3-nov-2026) — /cine, /<cc>/cine, /cine/<slug>, modal de tráiler, bloque cine del home y blog de cine (.cx).
   El CSS de cine.js va inline en «head» (<style id="cn-css">) y el del home/blog también: este fichero puede cargarse ANTES o DESPUÉS,
   así que cada regla sube especificidad con prefijo (main.cn / body>.cn-m / section.cnh / div.cx) en lugar de !important.
   !important solo contra: style="" inline (.cn-lead del país) y los !important del CSS embebido en las notas del blog (.cx).
   Ver NOTAS.md. */

/* ======================================================================
   1-3 · MODAL DE TRÁILER / IMAGEN (.cn-m se monta al final de <body>)
   ====================================================================== */
body>.cn-m{
  height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  padding-top:max(68px,calc(env(safe-area-inset-top,0px) + 60px)); /* hueco para la X (top:-52px) */
  background:rgba(5,6,9,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)
}
body>.cn-m>.cn-mb{width:min(1100px,100%);width:min(1100px,100%,calc((100dvh - 140px)*16/9));margin:auto}
/* 2 · la X: c-ux §15 (pointer:coarse) la pone position:relative con 0,5,4 y cae a la izquierda, en el flujo. 0,6,1 gana. */
body>.cn-m>.cn-mb>button.cn-mx.cn-mx.cn-mx.cn-mx{position:absolute;right:0;left:auto;top:-52px;z-index:2;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45)}
body>.cn-m .cn-mx:focus-visible{outline:3px solid #fff;outline-offset:2px}
body>.cn-m .cn-mv{border-radius:12px}
body>.cn-m .cn-mi{max-height:calc(100dvh - 100px);max-width:100%;object-fit:contain}
/* pie del modal: título + «Abrir en YouTube» (lo añade movil.js) */
body>.cn-m .cn-mt{font-size:.9375rem;line-height:1.35;margin:10px 2px 0}
body>.cn-m .cn-myt{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:2px 2px 0;color:#fff;font-weight:700;font-size:.9375rem;text-decoration:underline;text-underline-offset:3px}
body>.cn-m .cn-myt svg{flex:0 0 16px}
body>.cn-m .cn-myt:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:6px}
/* 1 · horizontal (alto ≤500 px: 667x375, 839x412, 932x430): vídeo a todo el alto, X dentro del vídeo arriba a la derecha, sin pie */
@media (max-height:500px){
  body>.cn-m{padding-top:max(8px,env(safe-area-inset-top,0px));padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
  body>.cn-m>.cn-mb{width:min(1100px,100%,calc((100dvh - 16px)*16/9))}
  body>.cn-m>.cn-mb>button.cn-mx.cn-mx.cn-mx.cn-mx{top:8px;right:8px;background:rgba(0,0,0,.6)}
  body>.cn-m .cn-mt,body>.cn-m .cn-myt{display:none}
  body>.cn-m .cn-mi{max-height:calc(100dvh - 16px)}
}

/* ======================================================================
   4 · PLAN (section.cn-plan): grid sin columnas desbordaba a 320 px por el botón nowrap de 280 px
   ====================================================================== */
main.cn .cn-plan{grid-template-columns:minmax(0,1fr)}
main.cn .cn-plan .cn-b{white-space:normal;max-width:100%;text-align:center;line-height:1.25;padding-block:10px}
main.cn .cn-plan ol{padding:0;list-style:none}                      /* 11 · sangría sin marca */
@media (max-width:480px){main.cn .cn-plan{padding:18px 16px}main.cn .cn-plan .cn-acc .cn-b{flex:1 1 100%}}

/* ======================================================================
   5 · PÓSTERES APAISADOS (1200x675) en marco 2:3 → contain sobre fondo oscuro (clase la pone movil.js)
   ====================================================================== */
main.cn .cn-po.cn-po--h img,main.cn .cn-fp.cn-po--h img,section.cnh .cnh-p.cn-po--h img{object-fit:contain;object-position:center;background:#0a0c10}
main.cn .cn-po.cn-po--h,main.cn .cn-fp.cn-po--h,section.cnh .cnh-p.cn-po--h{background:#0a0c10}
main.cn .cn-card:hover .cn-po.cn-po--h img{transform:none}
div.cx .cx-i.cx-i--h{background:#0a0c10}
div.cx .cx-i.cx-i--h img{object-fit:contain!important;background:#0a0c10}  /* el CSS de la nota pone object-fit:cover con prefijo .cx */
/* hero del hub del blog (cine-hub.webp es 1200x675) en marco 21:9 (móvil) / 2.4:1: en móvil se muestra entero */
@media (max-width:767.98px){div.relative.overflow-hidden:has(>img[src*="/media/cine/cine/cine-hub."]){aspect-ratio:16/9}}

/* ======================================================================
   6 · REJILLA .cn-g: carrusel en móvil, auto-fill en tablet, tarjeta sola en horizontal
   ====================================================================== */
@media (max-width:699.98px){
  main.cn .cn-g{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(168px,62%,240px);gap:12px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;
    margin-inline:-16px;padding:2px 16px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  main.cn .cn-g::-webkit-scrollbar{display:none}
  main.cn .cn-g>.cn-card{scroll-snap-align:start}
}
@media (min-width:700px) and (max-width:979.98px){
  main.cn .cn-g{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
}
/* tarjeta sola: horizontal (póster a la izquierda) */
main.cn .cn-g:has(>.cn-card:only-child){display:block;margin-inline:0;padding:0;overflow:visible}
main.cn .cn-g>.cn-card:only-child{flex-direction:row;max-width:640px}
main.cn .cn-g>.cn-card:only-child>.cn-po{flex:0 0 clamp(120px,38%,200px);aspect-ratio:2/3;align-self:flex-start}
main.cn .cn-g>.cn-card:only-child>.cn-cb{padding:14px;justify-content:flex-start}
main.cn .cn-g>.cn-card:only-child .cn-ca{flex-direction:column;align-items:stretch}

/* ======================================================================
   7 · TARJETA: etiqueta, iconos, toques, tarjeta entera pulsable
   ====================================================================== */
main.cn .cn-po .cn-st{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:399.98px){main.cn .cn-po .cn-st .cn-st-a{display:none}}   /* «Próximamente · » → solo «En 9 días» (span de movil.js) */
main.cn .cn-b svg,section.cnh .cnh-b svg{flex-shrink:0}
main.cn .cn-b--sm{min-height:44px;font-size:.875rem;white-space:normal;line-height:1.2;text-align:center;padding-block:6px}
main.cn .cn-card{position:relative}
main.cn .cn-cb h3 a::after{content:"";position:absolute;inset:0;z-index:0}
main.cn .cn-ca{position:relative;z-index:1}
main.cn .cn-po .cn-st{z-index:1}

/* ======================================================================
   8 · «Agregar a mi día»: estado pulsado visible, sin :hover pegado en táctil; toast encima de la barra Mi día
   ====================================================================== */
main.cn .cn-b[aria-pressed="true"],main.cn .cn-fh .cn-b[aria-pressed="true"]{border-color:var(--cn-a);color:var(--cn-a);background:var(--cn-tint)}
main.cn .cn-fh .cn-b--s[aria-pressed="true"]{color:#fff;background:rgba(230,57,70,.28);border-color:#ffb4ba}
@media (hover:none){
  main.cn .cn-b--p:hover{background:var(--cn-a)}
  main.cn .cn-b--s:hover{border-color:var(--cn-b);color:var(--cn-tx)}
  main.cn .cn-fh .cn-b--s:hover{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
  main.cn .cn-b--s[aria-pressed="true"]:hover{border-color:var(--cn-a);color:var(--cn-a);background:var(--cn-tint)}
  main.cn .cn-fh .cn-b--s[aria-pressed="true"]:hover{color:#fff;background:rgba(230,57,70,.28);border-color:#ffb4ba}
  main.cn .cn-card:hover .cn-po img,section.cnh .cnh-c:hover .cnh-p img{transform:none}
  main.cn .cn-cb h3 a:hover{color:inherit}
  section.cnh .cnh-b:hover{background:rgba(0,0,0,.72)}
}
main.cn .cn-b:active{transform:scale(.98)}
/* /cine sin barra inferior: sin reserva de 72 px (el paquete barra-inferior hace lo mismo con body; aquí la variable) */
html:has(main.cn):not(:has(#ctxd-tab)){--ctxd-nav-h:0px}
/* el toast se calcula con la barra «Mi día» aún oculta (primer añadido) y acaba encima de ella → se reserva su alto */
@media (max-width:1023.98px){
  html:has(main.cn) .ctxd-root:has(>.ctxd-bar:not([hidden]))>.ctxd-toast{bottom:calc(max(var(--ctxd-bajo,0px),env(safe-area-inset-bottom,0px)) + 72px)}
}

/* ======================================================================
   9 · TIPOGRAFÍA en rem/clamp (con letra al 150 % se invertía la jerarquía frente al cuerpo en rem)
   ====================================================================== */
main.cn h1{font-size:clamp(1.75rem,1.2rem + 2.6vw,2.75rem)}
main.cn h2{font-size:clamp(1.3125rem,1.1rem + 1vw,1.6875rem)}
main.cn .cn-cb h3{font-size:1rem}
main.cn .cn-cm,main.cn .cn-cf{font-size:.8125rem}
main.cn .cn-st{font-size:.75rem}
main.cn .cn-fh .cn-st{font-size:.8125rem}
main.cn .cn-lead{font-size:1.03125rem}
main.cn .cn-lead[style]{font-size:.9375rem!important}           /* style="font-size:15px" inline en /<cc>/cine */
main.cn .cn-b{font-size:.9375rem}
main.cn .cn-bc{font-size:.8125rem}
main.cn .cn-alt,main.cn .cn-cd{font-size:.9375rem}
main.cn .cn-chips li{font-size:.8125rem}
main.cn .cn-fx{font-size:1rem}
main.cn .cn-dl{font-size:.9375rem}
main.cn .cn-txt{font-size:1.03125rem}
main.cn .cn-faq summary{font-size:1rem}
main.cn .cn-nota,main.cn .cn-fu{font-size:.8125rem}

/* ======================================================================
   10 · FICHA /cine/<slug>
   ====================================================================== */
@media (max-width:480px){
  main.cn .cn-dl{grid-template-columns:minmax(0,1fr);gap:2px}
  main.cn .cn-dl dt{margin-top:10px;font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em;color:var(--cn-mut)}
  main.cn .cn-dl dt:first-child{margin-top:0}
}
main.cn .cn-ver{flex-wrap:nowrap}
main.cn .cn-ver>svg{flex:0 0 16px}
main.cn .cn-txt .cn-ver{display:inline-flex;align-items:center;min-height:44px}
/* FAQ: el padding pasa del <details> al <summary> → zona de toque ≥48 px */
main.cn .cn-faq details{padding:0}
main.cn .cn-faq summary{min-height:48px;padding:12px 0;align-items:center}
main.cn .cn-faq p{margin:0 0 16px}
/* c-ux §15 (pointer:coarse) borra el «+/−» de summary::after (0,5,5): respaldo 0,5,7 */
@media (pointer:coarse){
  html body main.cn.cn .cn-faq.cn-faq.cn-faq details>summary::after{content:"+";position:static;height:auto;min-width:0;transform:none;left:auto;right:auto;top:auto}
  html body main.cn.cn .cn-faq.cn-faq.cn-faq details[open]>summary::after{content:"\2212"}
}
main.cn .cn-gal:has(>button:only-child){grid-template-columns:minmax(0,1fr)}
main.cn .cn-gal:has(>button:only-child)>button{aspect-ratio:16/9}
main.cn .cn-txt{max-width:68ch}
main.cn .cn-bc a{display:inline-block;padding:12px 2px;margin:-12px 0}   /* 15 px → 39+ px de toque sin mover la línea */
main.cn .cn-fh .cn-bc{margin-bottom:10px}
@media (max-width:759.98px){main.cn .cn-fp{margin-inline:auto}}

/* ======================================================================
   11 · BLOQUE CINE DEL HOME (.cnh) y espaciados
   ====================================================================== */
section.cnh .cnh-b{min-height:44px;padding:0 12px 0 10px}
section.cnh .cnh-t{padding-block:11px;margin-block:-11px 0}
main.cn .cn-w{padding-bottom:24px}

/* ======================================================================
   12 · BLOG DE CINE (.cx, contenido de la nota con CSS embebido)
   ====================================================================== */
div.cx .cx-k{color:#c1121f;font-size:.8125rem;line-height:1.3}
html.dark div.cx .cx-k{color:#ff8a92}
div.cx .cx-g{grid-template-columns:repeat(auto-fill,minmax(min(100%,8.5rem),1fr))}
div.cx .cx-x strong{font-size:1rem}
div.cx .cx-m{font-size:.875rem}
/* botones de acción: columna a ancho completo y centrados en móvil */
@media (max-width:639.98px){
  div.cx .cx-d{flex-direction:column;align-items:stretch}
  div.cx .cx-d>.cx-bt{justify-content:center;text-align:center;width:100%;padding-block:10px;line-height:1.3}
  div.cx .cx-f>img{margin:0 auto!important}       /* la nota pone margin:0!important con 0,2,1 */
  div.cx .cx-f dl{grid-template-columns:minmax(0,1fr);gap:2px}
  div.cx .cx-f dt{margin-top:8px}
  div.cx .cx-f dt:first-child{margin-top:0}
}
div.cx p.cx-fu{font-size:.875rem;line-height:1.9}
div.cx p.cx-fu a{padding-block:6px}
/* fachada del tráiler (la crea movil.js si el publicador aún no la trae) */
div.cx .cx-v .cx-vf{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#000 center/cover no-repeat;display:flex;align-items:center;justify-content:center}
div.cx .cx-v .cx-vf::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.1))}
div.cx .cx-v .cx-vf span{position:relative;display:flex;align-items:center;justify-content:center;width:68px;height:48px;border-radius:14px;background:#e63946;color:#fff;font-size:22px;line-height:1;box-shadow:0 8px 24px rgba(0,0,0,.4)}
div.cx .cx-v .cx-vf:focus-visible{outline:3px solid #e63946;outline-offset:-3px}

@media (prefers-reduced-motion:reduce){main.cn .cn-b:active{transform:none}main.cn .cn-g{scroll-behavior:auto}}


/* ===== paquete: recintos-lugares ===== */
/* ctxd · paquete «recintos-lugares» (QA móvil 3-nov-2026)
   Ficha de recinto (/venues/<slug>, bundle Next), ficha .lxf (museo Santiago), restaurantes .rx*,
   colonia (/mx/<c>/colonia/<x>), planes #pi (/planes, /planes/<c>) y plan-gratis .pdt.
   movil.js pone html.ctxq-col en colonias y data- en nodos existentes. Ver NOTAS.md. */

/* =====================================================================
   1 · VENUE: barra de pestañas fija + pestañas sin recorte
   ===================================================================== */
/* overflow-x:hidden en el ancestro convierte el div en contenedor de scroll y anula el sticky */
div.min-h-screen.overflow-x-hidden:has(>div.sticky.top-16){overflow-x:clip}
@supports not (overflow:clip){div.min-h-screen.overflow-x-hidden:has(>div.sticky.top-16){overflow-x:visible}}
div.min-h-screen:has(>div.sticky.top-16)>div.sticky.top-16{top:57px}
@media (min-width:768px){div.min-h-screen:has(>div.sticky.top-16)>div.sticky.top-16{top:65px}}
@media (max-width:639px){
  div.min-h-screen>div.sticky.top-16 .overflow-x-auto>button{padding-left:11px;padding-right:11px}
  div.min-h-screen>div.sticky.top-16>div{padding-left:8px;padding-right:8px}
}
/* fundido solo cuando queda contenido a la derecha (movil.js pone data-ctxq-fade) */
div.sticky.top-16 .overflow-x-auto[data-ctxq-fade="r"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
div.sticky.top-16 .overflow-x-auto[data-ctxq-fade="l"]{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 28px),transparent)}
div.sticky.top-16 .overflow-x-auto[data-ctxq-fade="lr"]{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}

/* =====================================================================
   2 · VENUE: lista de eventos paginada y agrupada (estado lo pone movil.js)
   ===================================================================== */
div.min-h-screen:has(>div.sticky.top-16) div.grid>[data-ctxq-off]{display:none}
/* «3 fechas» al final de la línea ciudad · fecha */
div.min-h-screen:has(>div.sticky.top-16) article p[data-ctxq-n]::after{content:"\00B7\00A0" attr(data-ctxq-n);font-weight:700;color:var(--ctxd-accent-text,#bf2533);white-space:nowrap}
html.dark div.min-h-screen:has(>div.sticky.top-16) article p[data-ctxq-n]::after{color:#ff6b75}
.ctxq-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:420px;min-height:48px;margin:20px auto 0;padding:12px 20px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--fg);font:inherit;font-size:15px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ctxq-more:hover{border-color:#e63946}
.ctxq-more:active{transform:scale(.98)}
.ctxq-more:focus-visible{outline:2px solid #e63946;outline-offset:2px}
.ctxq-more small{font-size:13px;font-weight:600;color:var(--text-secondary)}
/* subtítulo de la portada sin recorte */
div.min-h-screen:has(>div.sticky.top-16) p.line-clamp-2.max-w-lg{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
/* tarjeta horizontal compacta en móvil */
@media (max-width:639px){
  div.min-h-screen:has(>div.sticky.top-16) div.grid.grid-cols-1{gap:10px}
  div.min-h-screen:has(>div.sticky.top-16) div.grid.grid-cols-1>div>a.group>article.event-card-premium{flex-direction:row;height:auto;min-height:112px}
  div.min-h-screen:has(>div.sticky.top-16) div.grid.grid-cols-1>div>a.group>article.event-card-premium>div.relative:first-child{flex:0 0 112px;width:112px;aspect-ratio:auto;min-height:112px}
  div.min-h-screen:has(>div.sticky.top-16) div.grid.grid-cols-1>div>a.group>article.event-card-premium>div.p-3{min-width:0;padding:10px 12px;justify-content:center}
  div.min-h-screen:has(>div.sticky.top-16) div.grid.grid-cols-1>div>a.group>article.event-card-premium h3{font-size:15px}
  div.min-h-screen:has(>div.sticky.top-16) div.grid.grid-cols-1>div>a.group>article.event-card-premium p.text-xs{font-size:13px;flex-wrap:wrap}
  /* la etiqueta de categoría y el corazón no caben en una foto de 112 px */
  div.min-h-screen:has(>div.sticky.top-16) div.grid.grid-cols-1>div>a.group>article.event-card-premium>div.relative:first-child>div.absolute.bottom-3.left-3{display:none}
  /* Mi día (paquete tarjetas: 0,7,1) solo icono 44×44 en la foto de 112 px, como en .t4a-lc */
  div.min-h-screen:has(>div.sticky.top-16) div.grid.grid-cols-1 a[data-ctxd]>.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd{width:44px;height:44px;padding:0;gap:0;justify-content:center;font-size:0;top:4px;left:4px}
}

/* =====================================================================
   8 · VENUE: portada, avatar de relleno, botones
   ===================================================================== */
div.min-h-screen div.relative.w-20.h-20.rounded-2xl:not(:has(img)){display:none}
div.absolute.top-0:has(>a[aria-label="Volver"])>a[aria-label="Volver"],
div.absolute.top-0:has(>a[aria-label="Back"])>a[aria-label="Back"]{width:44px;height:44px}
div.absolute.top-0:has(>a[aria-label="Volver"]) button,
div.absolute.top-0:has(>a[aria-label="Back"]) button{min-height:44px}
/* Mi día (ctxr-add, ctxd) y Seguir (bundle): misma altura, forma y letra.
   !important solo en ctxr-add, que ya trae !important de ctxd-recinto-v1. */
button[aria-label^="Seguir a"],button[aria-label^="Follow "]{min-height:44px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;box-sizing:border-box;line-height:1}
.ctxr-add{min-height:44px;padding:0 18px!important;font-size:14px;font-weight:600;box-sizing:border-box;line-height:1;border:2px solid #e63946!important}

/* =====================================================================
   5 · FICHA .lxf (museo Santiago y fichas t9c)
   ===================================================================== */
/* cerca: duplicado cuando la capa ctxd ya pinta «Completa tu día cerca» */
body:has(#ctxd-plan) .lxw .lxf-near{display:none}
.lxw .lxf-hero .lxf-cap{background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.35) 70%,transparent);text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 12px rgba(0,0,0,.35)}
.lxw ul.lxf-ul{list-style:none;padding-left:0}
.lxw ul.lxf-ul>li{position:relative;padding-left:22px}
.lxw ul.lxf-ul>li::before{content:"";position:absolute;left:4px;top:.62em;width:7px;height:7px;border-radius:50%;background:#e63946}
.lxw .lxf-yt>button{position:absolute;inset:0;width:100%;height:100%;display:block}
.lxw .lxf-yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
/* fuentes: texto legible (movil.js) y toque de 44 px */
.lxw .lxf-fu li{margin:0}
.lxw .lxf-fu li>a{display:flex;align-items:center;min-height:44px;font-size:15px;line-height:1.35;padding:4px 0;overflow-wrap:anywhere}
/* mapa: no atrapa el scroll hasta que lo tocas (movil.js pone .ctxq-lock y la capa) */
.lxw .lxf-map.ctxq-lock{pointer-events:none}
.lxw .ctxq-mapov{position:relative;display:flex;align-items:center;justify-content:center;width:100%;margin:-226px 0 6px;height:220px;border:0;background:transparent;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
.lxw .ctxq-mapov span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:rgba(17,17,19,.78);color:#fff;font-size:14px;font-weight:700}
.lxw .ctxq-mapov[hidden]{display:none}
@media (min-width:641px){.lxw .ctxq-mapov{margin-top:-306px;height:300px}}
.lxw .ctxq-galcap{font-size:13px;color:var(--text-tertiary);margin:8px 0 0}
.lxw .lxf-gal.ctxq-cap1 figcaption{display:none}
@media (max-width:640px){
  .lxw .lx-row{scroll-padding-inline:16px;padding:0 16px 8px}
  .lxw .lx-row>.lxc{flex:0 0 76%}
  .lxw .lxf-map{height:220px}
  .lxw .lxf-gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;gap:12px;margin:0 -16px;padding:0 16px 8px;scroll-padding-inline:16px;scrollbar-width:none}
  .lxw .lxf-gal::-webkit-scrollbar{display:none}
  .lxw .lxf-gal>figure{flex:0 0 84%;scroll-snap-align:start;min-width:0}
}
/* tablet: la tarjeta lateral pasa arriba a todo el ancho → botones en fila */
@media (min-width:641px) and (max-width:1024px){
  .lxw .lxf-card{flex-direction:row;flex-wrap:wrap;align-items:stretch}
  .lxw .lxf-card>.lxf-btn{flex:1 1 200px}
  .lxw .lxf-card>.lxf-mini{flex:1 0 100%;order:9}
}

/* =====================================================================
   6 · RESTAURANTES .rx*
   ===================================================================== */
.rxw .rxc-k{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.rxw .rxc{height:100%}
.rxw .rxc-b{flex:1 1 auto}
.rxw .rxc-p{margin-top:auto;padding-top:4px}
.rxw .rx-chips a{min-height:44px}
/* «Ver la guía» sale del h2 (movil.js) */
.rxw .rx-zona>a.ctxq-guia{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0 8px;font-size:15px;font-weight:700;color:var(--rx-a);text-decoration:underline;text-underline-offset:3px}
.rxw .rx-zona>h2:has(+a.ctxq-guia){margin-bottom:8px}
@media (max-width:1024px) and (min-width:641px){.rxw .rx-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =====================================================================
   7 · COLONIA (html.ctxq-col lo pone movil.js según la ruta)
   ===================================================================== */
html.ctxq-col main>div.animate-fade-in>section:first-child>div.max-w-5xl{padding-top:24px;padding-bottom:24px}
html.ctxq-col main>div.animate-fade-in>section:first-child h1{margin-bottom:12px}
html.ctxq-col main>div.animate-fade-in>section:first-child p.text-lg{font-size:16px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden;cursor:pointer}
html.ctxq-col main>div.animate-fade-in>section:first-child p.text-lg.ctxq-open{display:block;-webkit-line-clamp:unset;line-clamp:unset}
/* chips duplicados con «Otras colonias»: solo queda «← Toda CDMX» */
html.ctxq-col main>div.animate-fade-in>section:first-child div.flex-wrap.mt-8{margin-top:16px}
html.ctxq-col main>div.animate-fade-in>section:first-child div.flex-wrap.mt-8>a:not(:first-child){display:none}
html.ctxq-col main>div.animate-fade-in>section:first-child div.flex-wrap.mt-8>a{min-height:44px;display:inline-flex;align-items:center}
/* FAQ: el padding pasa al summary; chevron propio en ::before (c-ux usa ::after como zona táctil) */
html.ctxq-col main div.divide-y>*{border-color:var(--border)}
html.ctxq-col main div.divide-y>details.p-5{padding:0}
html.ctxq-col main div.divide-y>details.p-5>summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:14px 20px;list-style:none}
html.ctxq-col main div.divide-y>details.p-5>summary::-webkit-details-marker{display:none}
html.ctxq-col main div.divide-y>details.p-5>summary::before{content:"";order:2;flex:0 0 auto;margin-left:auto;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
html.ctxq-col main div.divide-y>details.p-5[open]>summary::before{transform:rotate(-135deg) translate(-2px,-2px)}
html.ctxq-col main div.divide-y>details.p-5>p{margin:0;padding:0 20px 16px;font-size:15px;line-height:1.55}
html.ctxq-col main div.grid:has(>a:nth-child(3):last-child){gap:16px}
@media (min-width:600px){html.ctxq-col main div.grid:has(>a:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){html.ctxq-col main div.divide-y>details.p-5>summary::before{transition:none}}

/* =====================================================================
   3 + 4 · PLANES #pi (HTML propio de planes-indice.js, sin React)
   html #pi sube la especificidad sobre el <style> de la página (#pi .x)
   ===================================================================== */
html #pi{font-family:inherit}
html #pi .pi-wrap{padding-bottom:24px}
html #pi .pi-bc{font-size:.875rem;margin:0 0 8px}
html #pi .pi-bc a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:0 -4px}
html #pi .pi-hd p{font-size:1rem}
html #pi .pi-pd{min-height:48px;font-size:.9375rem}
html #pi .pi-k{font-size:.75rem}
html #pi .pi-t{font-size:1.1875rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;text-overflow:ellipsis}
html #pi .pi-tx{font-size:.9375rem}
html #pi .pi-chip{font-size:.75rem;padding:4px 10px}
html #pi .pi-ruta{font-size:.9375rem}
html #pi .pi-ruta li{grid-template-columns:max-content minmax(0,1fr);gap:10px}
html #pi .pi-ruta b{min-width:3.2em}
html #pi .pi-ruta i,html #pi p.pi-fu{color:var(--mut)}
html #pi .pi-pr{font-size:1rem}
html #pi .pi-pr small,html #pi .pi-pr--n{font-size:.8125rem}
html #pi .pi-btn{min-height:48px;font-size:.9375rem}
html #pi .pi-fu{font-size:.75rem}
html #pi .pi-hub{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html #pi .pi-hub a{position:relative;padding:16px 32px 16px 16px;min-height:72px;justify-content:center;-webkit-tap-highlight-color:transparent;transition:transform .12s,border-color .12s}
html #pi .pi-hub a::after{content:"\203A";position:absolute;right:14px;top:50%;transform:translateY(-52%);font-size:1.5rem;line-height:1;color:var(--brand)}
html #pi .pi-hub a:active{transform:scale(.97);border-color:var(--brand)}
html #pi .pi-hub b{font-size:1.0625rem;overflow-wrap:anywhere}
html #pi .pi-hub span{font-size:.8125rem}
@media (min-width:640px){html #pi .pi-hub{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:768px){html #pi .pi-hub{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
@media (prefers-reduced-motion:reduce){html #pi .pi-hub a{transition:none}html #pi .pi-hub a:active{transform:none}}

/* =====================================================================
   9 · PLAN-GRATIS .pdt
   ===================================================================== */
.pdtw .pdt-ed{margin-top:32px}
.pdtw .pdt-fu a,.pdtw .pdt-cred a,.pdtw .pdt-crumb a{padding:12px 2px;margin:0 -2px}
.pdtw .pdt-ev li{position:relative}
/* c-ux (pointer:coarse) pone li>a[href]{position:relative} y un ::after de 44 px centrado: se neutraliza para estirar el enlace a toda la tarjeta */
.pdtw .pdt-ev li>a.t{position:static}
.pdtw .pdt-ev li>a.t::after{content:"";position:absolute;inset:0;top:0;left:0;right:0;bottom:0;height:auto;min-width:0;transform:none;border-radius:12px}
.pdtw .pdt-ev .pdt-acc{position:relative;z-index:1}
@media (max-width:399px){
  .pdtw .pdt-cta{flex-direction:column}
  .pdtw .pdt-cta>.pdt-btn{width:100%}
}
@media (min-width:640px) and (max-width:999px){
  .pdtw .pdt-intro,.pdtw .pdt-dato,.pdtw .pdt-grid>div:first-child{max-width:68ch}
}


/* ===== paquete: listados ===== */
/* ctxd · paquete «listados» (QA móvil 3-nov-2026)
   /search, categoría (#ctxf), agenda, eventos-hoy, /<cc>/<ciudad>/hoy y /finde (t4a), fin de semana, género, artista,
   /en/us/new-york, /co/bogota/agenda y el desplegable de sugerencias #ctxdq.
   Casi todo va acotado con html[data-ctxl=…] (lo pone movil.js según la ruta). Sin JS no se aplica nada de eso (fail-open).
   !important solo contra estilos en línea del bundle o de ctxd. Ver NOTAS.md. */

/* ============ 1 · #ctxf (barra de filtros de categoría) bajo la cabecera ============
   ctxf-v2.js escribe --ctxf-top:0px en línea cuando mide la cabecera mal; top no va en línea, así que basta con ganar
   especificidad, pero se deja !important por si ctxf-v3 pasa a escribir top en línea. */
#ctxf.ctxf{top:var(--hdr-h,57px)!important}
@media (min-width:768px) and (max-width:1023px){#ctxf.ctxf{top:var(--hdr-h,65px)!important}}

/* ============ 3 · Sugerencias #ctxdq ============ */
#ctxdq{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding:6px 0}
/* el toque fuera lo absorbe este fondo (lo pone movil.js), no el enlace que hay debajo */
#ctxl-dqfondo{position:fixed;inset:0;z-index:399;background:transparent;-webkit-tap-highlight-color:transparent;touch-action:none}
#ctxl-dqfondo[hidden]{display:none}
#ctxdq .o{min-height:48px}
#ctxdq .o.ctxl-o0{flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 10px;min-height:48px;padding:6px 14px}
#ctxdq .o.ctxl-o0::before{content:"";flex:0 0 20px;width:20px;height:20px;background:currentColor;opacity:.7;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/20px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/20px no-repeat}
#ctxdq .o.ctxl-o0>.t{flex:0 0 auto}
#ctxdq .o.ctxl-o0>.ctxdq-ch{flex:0 1 auto;min-width:0}
#ctxdq .o.ctxl-o0>.s{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ctxdq mark{background:transparent;color:inherit;font-weight:800;text-decoration:underline;text-decoration-color:#e63946;text-underline-offset:2px}
#ctxdq .s{font-size:13px;color:var(--text-secondary,#52525b)}
/* /search: con el teclado abierto el H1 y el subtítulo se compactan para que la lista se vea */
@media (max-width:639px){
  html.ctxd-busq-foco[data-ctxl=search] main h1+p{display:none}
  html.ctxd-busq-foco[data-ctxl=search] main h1{font-size:18px;margin-bottom:6px}
  html.ctxd-busq-foco[data-ctxl=search] main div.relative.py-8{padding-top:8px;padding-bottom:8px}
}
/* buscador de cabecera abierto (tablet/escritorio): «Iniciar sesión» se oculta mientras está abierto y el input es flexible */
nav.sticky:has(button[aria-label="Cerrar búsqueda"]) a[href^="/auth/login"]:not(.hx-mv){display:none}
nav.sticky form:has(> button[aria-label="Cerrar búsqueda"]){flex:1 1 auto;min-width:0;max-width:360px}
nav.sticky form:has(> button[aria-label="Cerrar búsqueda"])>input{flex:1 1 auto;min-width:0;width:auto;min-height:40px;font-size:16px}
nav.sticky button[aria-label="Cerrar búsqueda"]{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-left:2px;border-radius:10px}
/* type=search: sin la lupa/cruz nativas de WebKit (el diseño ya trae las suyas) */
input[data-ctxl-q]::-webkit-search-decoration,input[data-ctxl-q]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
input[data-ctxl-q]{-webkit-appearance:none;appearance:none}

/* ============ 4 · /search: ordenar, paginación, rejilla ============ */
html[data-ctxl=search] main select.flex-1.input-theme{-webkit-appearance:none;appearance:none;min-height:44px;min-width:0;max-width:100%;font-size:16px;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px;text-overflow:ellipsis}
html[data-ctxl=search] main div.lg\:hidden.flex.items-center.gap-2{min-width:0}
html[data-ctxl=search] main div.flex.items-center.justify-center.gap-2.mt-8{flex-wrap:wrap;row-gap:10px;max-width:100%}
@media (max-width:639px){
  html[data-ctxl=search] main div.flex.items-center.justify-center.gap-2.mt-8::before{content:"";order:2;flex:0 0 100%;height:0}
  html[data-ctxl=search] main div.flex.items-center.justify-center.gap-2.mt-8>button:first-child{order:3;flex:1 1 0;min-height:44px}
  html[data-ctxl=search] main div.flex.items-center.justify-center.gap-2.mt-8>button:last-child{order:4;flex:1 1 0;min-height:44px}
  html[data-ctxl=search] main div.flex.items-center.justify-center.gap-2.mt-8>button.w-10{width:44px;height:44px}
}
@media (max-width:359px){
  html[data-ctxl=search] main .grid.grid-cols-2{grid-template-columns:minmax(0,1fr)}
}
/* resultados de otro país al final, no mezclados (movil.js marca data-ctxl-geo) */
html[data-ctxl=search] main .grid>a[data-ctxl-geo=fuera]{order:1}

/* ============ 5 · Listados largos: tarjeta compacta horizontal (<640) y 3 columnas en tablet ============ */
@media (max-width:639px){
  html[data-ctxl-lista] main .grid.grid-cols-1:has(>a.group>article.event-card-premium){gap:10px}
  html[data-ctxl-lista] main .grid.grid-cols-1>a.group.block.h-full>article.event-card-premium{flex-direction:row;min-height:116px;height:auto}
  html[data-ctxl-lista] main .grid.grid-cols-1>a.group.block.h-full>article.event-card-premium>div.relative:first-child{flex:0 0 112px;width:112px;aspect-ratio:auto;min-height:116px}
  html[data-ctxl-lista] main .grid.grid-cols-1>a.group.block.h-full>article.event-card-premium>div.relative:first-child>div.absolute.bottom-3.left-3:not(.top-3){display:none}
  html[data-ctxl-lista] main .grid.grid-cols-1>a.group.block.h-full>article.event-card-premium>div.relative:first-child>div.absolute.top-3.left-3{font-size:11px;padding:2px 6px;left:6px;bottom:6px}
  html[data-ctxl-lista] main .grid.grid-cols-1>a.group.block.h-full>article.event-card-premium>div.p-3{padding:10px 12px;min-width:0;justify-content:flex-start}
  html[data-ctxl-lista] main .grid.grid-cols-1>a.group.block.h-full>article.event-card-premium>div.p-3>h3{font-size:15px;line-height:1.3;margin-bottom:2px}
  html[data-ctxl-lista] main .grid.grid-cols-1>a.group.block.h-full>article.event-card-premium>div.p-3>p{font-size:13px;flex-wrap:wrap;row-gap:0;margin-bottom:4px}
  html[data-ctxl-lista] main .grid.grid-cols-1>a.group.block.h-full>article.event-card-premium>div.p-3>.mt-auto{padding-right:84px;padding-top:0;margin-top:auto}
  /* Mi día: de la esquina de la foto (taparía la miniatura) a la esquina inferior derecha de la tarjeta.
     Gana al selector de 5 clases del paquete «tarjetas» por especificidad. */
  html[data-ctxl-lista] main .grid.grid-cols-1>a.group[data-ctxd]{position:relative}
  html[data-ctxl-lista] main .grid.grid-cols-1>a.group[data-ctxd]>.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd.ctxd-cadd{position:absolute;top:auto;left:auto;right:8px;bottom:8px;min-height:44px;margin:0;z-index:11}
}
@media (min-width:768px) and (max-width:1023px){
  html[data-ctxl-lista] main .grid.grid-cols-1.sm\:grid-cols-2:has(>a.group>article.event-card-premium){grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  /* una sola tarjeta (estado vacío de eventos-hoy) no se estira a todo el ancho */
  html[data-ctxl-lista] main .grid[data-ctxl-n="1"]{grid-template-columns:minmax(0,360px)}
}
/* datos: duplicados ocultos, «+N fechas», «Todo el mes» al final */
html[data-ctxl-lista] main .grid>a[data-ctxl-dup]{display:none}
html[data-ctxl-lista] main .grid>a[data-ctxl-mas]>article.event-card-premium>div.p-3>p::after{content:attr(data-ctxl-mas-t);margin-left:4px;font-weight:700;color:var(--ctxd-accent-text,#c1121f)}
html[data-ctxl-lista] main .grid>a[data-ctxl-todo]{order:1}
html[data-ctxl-lista] main .grid>a[data-ctxl-todo] span[data-ctxl-f]{font-size:0}
html[data-ctxl-lista] main .grid>a[data-ctxl-todo] span[data-ctxl-f]::after{content:"Todo el mes";font-size:13px}
html[data-ctxl-lista] main .grid>a[data-ctxl-oculta]{display:none}
html[data-ctxl-geo-on] main .grid>a[data-ctxl-geo=fuera]{display:none}
/* chips de fecha/categoría encima de la rejilla (los crea movil.js) */
.ctxl-chips{position:-webkit-sticky;position:sticky;top:var(--hdr-h,57px);z-index:30;display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  margin:0 -16px 14px;padding:8px 16px;background:var(--bg);border-bottom:1px solid var(--border)}
.ctxl-chips::-webkit-scrollbar{display:none}
.ctxl-chips button{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--border);border-radius:10px;
  background:var(--card);color:var(--fg);font:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
.ctxl-chips button[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.ctxl-chips button:focus-visible{outline:2px solid #e63946;outline-offset:2px}
.ctxl-chips .ctxl-sep{flex:0 0 1px;align-self:stretch;margin:6px 2px;background:var(--border)}
/* bloque «Mañana» / respaldo y «Destacados» (los crea movil.js) */
.ctxl-bloque{margin-top:28px}
.ctxl-bloque>h2{font-size:22px;font-weight:900;margin:0 0 6px;color:var(--fg)}
.ctxl-bloque>p{margin:0 0 14px;font-size:15px;color:var(--fg)}
.ctxl-bloque .ctxl-enl{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ctxl-bloque .ctxl-enl a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--fg);font-weight:600;text-decoration:none}
.ctxl-bloque .ctxl-enl a.pri{background:#e63946;border-color:#e63946;color:#fff}
.ctxl-h2{font-size:20px;font-weight:900;margin:0 0 12px;color:var(--fg)}

/* intro larga antes del primer evento: 3 líneas + «Leer más» (el texto sigue en el DOM) */
@media (max-width:1023px){
  html[data-ctxl-lista] main p.ctxl-clamp:not(.ctxl-abierto){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
}
.ctxl-leer{display:inline-flex;align-items:center;min-height:44px;padding:0;margin:2px 0 0;border:0;background:none;color:var(--ctxd-accent-text,#c1121f);font:inherit;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (min-width:1024px){.ctxl-leer{display:none}}
:root.dark .ctxl-leer{color:#ff6b75}

/* ============ 7 · Hero de listados ============ */
@media (max-width:639px){
  html[data-ctxl-lista] main section:first-of-type>div.max-w-5xl.py-16{padding-top:24px;padding-bottom:20px}
  html[data-ctxl-lista] main section:first-of-type>div.max-w-5xl.py-16>h1.text-4xl{font-size:30px;line-height:1.1;margin-bottom:12px}
  html[data-ctxl-lista] main section:first-of-type>div.max-w-5xl.py-16>p.text-lg{font-size:16px}
  html[data-ctxl-lista] main section:first-of-type>div.max-w-5xl.py-16>div.inline-flex.rounded-full{margin-bottom:12px}
  html[data-ctxl-lista] main section:first-of-type>div.max-w-5xl>div.flex.flex-wrap.gap-3.mt-8{margin-top:16px;gap:8px}
  /* género: los enlaces a otros géneros del hero repiten la sección «Otros géneros» */
  html[data-ctxl=genero] main section:first-of-type>div.max-w-5xl>div.flex.flex-wrap.gap-3.mt-8:not(:has(.ctxd-btn)){display:none}
  /* 3 botones: principal al 100 %, secundarios al 50 % */
  html[data-ctxl-lista] main section:first-of-type>div.max-w-5xl>div.flex.flex-wrap.gap-3.mt-8:has(.ctxd-btn--pri)>a{flex:1 1 calc(50% - 4px);justify-content:center;text-align:center}
  html[data-ctxl-lista] main section:first-of-type>div.max-w-5xl>div.flex.flex-wrap.gap-3.mt-8:has(.ctxd-btn--pri)>a.ctxd-btn--pri{flex-basis:100%}
  html[data-ctxl-lista] main section.max-w-7xl.py-12{padding-top:20px}
}
html[data-ctxl-lista] main section:first-of-type>div.max-w-5xl>div.flex.flex-wrap.gap-3.mt-8>a{display:inline-flex;align-items:center;min-height:44px}
/* subtítulo del H1 en span con opacity-70 → bloque con color sólido */
html[data-ctxl-lista] main h1>span.opacity-70{display:block;opacity:1;color:var(--fg);margin-top:4px}

/* ============ 8 · Artista: fecha como titular ============ */
html[data-ctxl=artista] main .grid>a.group>article.event-card-premium>div.p-3{display:flex;flex-direction:column}
html[data-ctxl=artista] main .grid>a.group>article.event-card-premium>div.p-3>p{order:-1;font-size:16px;font-weight:800;color:var(--fg)!important;margin-bottom:2px}
html[data-ctxl=artista] main .grid>a.group>article.event-card-premium>div.p-3>h3{font-size:13px;font-weight:600;color:var(--text-secondary)!important}

/* ============ 9 · Píldoras, FAQ, New York ============ */
html[data-ctxl-lista] main a.px-3.py-1\.5.rounded-xl.border{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
html[data-ctxl-lista] main details>summary.font-bold{display:flex;align-items:center;min-height:44px;padding:10px 0}
html[data-ctxl=ny] main a[href^="#cat-"] .truncate{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-overflow:clip}
html[data-ctxl=ny] main a[href^="#cat-"]{min-height:56px}
html[data-ctxl=ny] main .grid>a[data-ctxl-dup]{display:none}
@media (min-width:640px) and (max-width:1023px){html[data-ctxl=ny] main .grid>a[data-ctxl-resto]{display:none}}

/* ============ 6 · t4a (/<cc>/<ciudad>/hoy y /finde) ============ */
/* filtros: carrusel de una fila */
.t4a .t4a-f{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:2px 16px 6px}
.t4a .t4a-f::-webkit-scrollbar{display:none}
.t4a .t4a-f label{flex:0 0 auto;min-height:44px;white-space:nowrap}
/* lista: toda la fila es el enlace del título */
.t4a ul.t4a-ev li{position:relative}
.t4a ul.t4a-ev li a.t4a-t::after{content:"";position:absolute;inset:0;border-radius:12px}
.t4a ul.t4a-ev li a:not(.t4a-t),.t4a ul.t4a-ev li button{position:relative;z-index:1}
@media (min-width:640px) and (max-width:899px){.t4a ul.t4a-ev{grid-template-columns:1fr 1fr}}
/* enlaces pequeños: más superficie de toque sin mover el texto */
.t4a .t4a-m a,.t4a nav.t4a-crumb a{padding:13px 3px;margin:-13px -3px}
.t4a nav.t4a-crumb a{display:inline-block;padding:12px 4px;margin:-12px -4px}
/* «Agenda completa…»: .t4a a{color:inherit} lo dejaba negro → rojo y con aspecto de botón */
.t4a a.t4a-mas{color:#c1121f;text-decoration:none;border:1px solid currentColor;border-radius:10px;padding:0 16px;margin:4px 8px 4px 0;max-width:100%}
:root.dark .t4a a.t4a-mas{color:#ff6b75}
.t4a .t4a-ccat{font-size:13px;color:#3f3f46}
:root.dark .t4a .t4a-ccat{color:#d4d4d8}
.t4a h2>.t4a-m{display:block;font-size:14px;font-weight:600;margin-top:2px}
/* índice «En esta página» clonado arriba como carrusel fijo (movil.js) */
.ctxl-t4aind{position:-webkit-sticky;position:sticky;top:var(--hdr-h,57px);z-index:30;margin:0 -16px 14px;padding:6px 16px;background:var(--bg);border-bottom:1px solid var(--border)}
.ctxl-t4aind>ul.t4a-ind{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0}
.ctxl-t4aind>ul.t4a-ind::-webkit-scrollbar{display:none}
.ctxl-t4aind>ul.t4a-ind li{flex:0 0 auto}
.ctxl-t4aind>ul.t4a-ind a{white-space:nowrap}
.ctxl-t4aind>ul.t4a-ind a[aria-current=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}


/* ===== paquete: paginas-sueltas ===== */
/* ctxd · paginas-sueltas · móvil y tablet (3-nov-2026)
 * /especial/bts, /mundial-2026, /perfect-day, /contact, /en/about (y /about), /help, /profile, /auth/login, 404.
 * Cada bloque va acotado por una marca estable de su página (:has); no toca cabecera, pie, barra ni capas
 * salvo donde el encargo lo pide (perfect-day móvil y foco del formulario de contacto/login).
 * !important solo contra estilos inline del bundle o del Worker. */

/* ===================== 1) /especial/bts (Worker ctx-especial-bts) ===================== */
/* rejillas: sin desborde a 320 px (los minmax inline del Worker no llevan min()) */
#main:has(.bts-miga) .bts-dl{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
#main:has(.bts-miga) #fechas>div[style*="grid"],
#main:has(.bts-miga) .bts-rel{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))!important}
#main:has(.bts-miga) #guias>div[style*="grid"]{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))!important}
/* iPad: 3 fechas y 9 guías en 3 columnas, sin huérfanas */
@media (min-width:768px) and (max-width:1023px){
  #main:has(.bts-miga) #fechas>div[style*="grid"],
  #main:has(.bts-miga) #guias>div[style*="grid"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
/* hero: letra fluida (con letra al 150 % pasaba de 1.100 px) */
#main .relative.z-10:has(>.bts-miga){padding-top:40px;padding-bottom:40px}
#main .relative.z-10:has(>.bts-miga)>h1{font-size:clamp(1.75rem,1.1rem + 3.6vw,3.75rem);line-height:1.1;overflow-wrap:break-word}
#main .relative.z-10:has(>.bts-miga)>p{font-size:clamp(1rem,.9rem + .5vw,1.125rem)}
#main .relative.z-10:has(>.bts-miga)>div.flex>a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:768px){#main .relative.z-10:has(>.bts-miga){padding-top:72px;padding-bottom:72px}}
/* migas: zona de toque de 44 px */
#main .bts-miga{font-size:.875rem;margin-bottom:6px;color:rgba(255,255,255,.8)}
#main .bts-miga a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:#fff}
#main .bts-miga a:first-child{padding-left:0}
/* tarjetas c-ux en rem (c-ux-v1.css las fija en px) */
#main:has(.bts-miga) .event-card-premium h3{font-size:.9375rem}
#main:has(.bts-miga) .event-card-premium p.text-sm{font-size:.875rem}
#main:has(.bts-miga) .event-card-premium>div.p-3>p.flex{font-size:.8125rem}
#main:has(.bts-miga) .event-card-premium>div.relative:first-child>div.absolute.bottom-3.left-3{font-size:.75rem;color:var(--fg)!important;font-weight:700}
/* móvil: la foto de las fechas es la misma del hero (6 veces) → fuera; queda la etiqueta como chip legible */
@media (max-width:767px){
  #main:has(.bts-miga) #fechas .event-card-premium>div.relative:first-child>img{display:none!important}
  #main:has(.bts-miga) #fechas .event-card-premium>div.relative:first-child{aspect-ratio:auto;overflow:visible;padding:12px 12px 0}
  #main:has(.bts-miga) #fechas .event-card-premium>div.relative:first-child>div.absolute.bottom-3.left-3{position:static!important;display:inline-block;max-width:100%;padding:3px 8px!important;border-radius:6px!important;background:var(--surface,rgba(127,127,127,.12))!important;border:1px solid var(--border);line-height:1.4}
  #main:has(.bts-miga) #fechas .event-card-premium>div.p-3{padding-top:8px}
}

/* ===================== 2) /mundial-2026 ===================== */
/* vídeo del hero: sin el ▶ nativo encima del texto (iOS/Android) */
#main video[src*="hero-mundial"]::-webkit-media-controls,
#main video[src*="hero-mundial"]::-webkit-media-controls-panel,
#main video[src*="hero-mundial"]::-webkit-media-controls-overlay-play-button,
#main video[src*="hero-mundial"]::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none;opacity:0}
#main video[src*="hero-mundial"]{pointer-events:none}
@media (max-width:767px){
  #main section:has(>video[src*="hero-mundial"])>div.relative.z-10{padding-top:36px;padding-bottom:40px}
  #main section:has(>video[src*="hero-mundial"]) h1{font-size:clamp(1.75rem,1.2rem + 3vw,2.5rem);line-height:1.1}
  #main section:has(>video[src*="hero-mundial"]) p.text-lg{font-size:1rem}
  /* 5 CTA: el principal a lo ancho y los otros 4 en 2 columnas */
  #main section:has(>video[src*="hero-mundial"]) div.flex.flex-wrap.gap-3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
  #main section:has(>video[src*="hero-mundial"]) div.flex.flex-wrap.gap-3>a:first-child{grid-column:1/-1}
}
#main section:has(>video[src*="hero-mundial"]) div.flex.flex-wrap.gap-3>a{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:48px;line-height:1.2}
/* FAQ: toda la fila es el toque, chevron propio */
#main:has(video[src*="hero-mundial"]) details.rounded-2xl.border.p-5{padding:0}
#main:has(video[src*="hero-mundial"]) details.rounded-2xl.border.p-5>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:14px 18px;list-style:none;line-height:1.35}
#main:has(video[src*="hero-mundial"]) details.rounded-2xl.border.p-5>summary::-webkit-details-marker{display:none}
#main:has(video[src*="hero-mundial"]) details.rounded-2xl.border.p-5>summary::before{content:"";order:2;position:static;flex:none;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);opacity:.6;transition:transform .2s}
#main:has(video[src*="hero-mundial"]) details.rounded-2xl.border.p-5[open]>summary::before{transform:rotate(225deg) translate(-2px,-2px)}
#main:has(video[src*="hero-mundial"]) details.rounded-2xl.border.p-5>summary:focus-visible{outline:2px solid #e63946;outline-offset:2px;border-radius:16px}
#main:has(video[src*="hero-mundial"]) details.rounded-2xl.border.p-5>p{margin:0;padding:0 18px 18px}
/* enlaces relacionados → chips de 44 px (radio 12, no píldora) */
#main:has(video[src*="hero-mundial"]) a.footer-link.underline{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--fg);text-decoration:none}
#main:has(video[src*="hero-mundial"]) a.footer-link.underline:active{border-color:#e63946;color:#e63946}
/* secciones ancla que crea movil.js para los CTA */
#main .ps-ancla{scroll-margin-top:calc(72px + env(safe-area-inset-top))}
#main .ps-ancla:target,#main details.ps-ancla[open]{border-color:#e63946!important}

/* ===================== 3) /perfect-day (ctxd perfect-day-page.js) ===================== */
/* mapas Leaflet por debajo de la cabecera y de .prog */
#stage .pmap{position:relative;z-index:0;isolation:isolate}
#stage .pmap .leaflet-container{touch-action:pan-y pinch-zoom}
#stage .leaflet-bar a,#stage .leaflet-touch .leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:22px}
#stage .pmap-badge{font-size:.75rem}
/* letra mínima y en rem */
#stage .chip{font-size:.75rem;padding:4px 9px}
#stage .badge-top{font-size:.75rem}
#stage .rmeta,#stage .rtime,#stage .rleg .rl-t{font-size:.8125rem}
#stage .opt .d{font-size:.8125rem}
#stage .head p{font-size:.9375rem}
html:has(#stage) .prog .stepno{font-size:.8125rem}
/* inputs a 16 px (iOS no hace zoom) y número sin flechas */
#stage .in,#stage #fecha{font-size:16px;min-height:48px}
#stage #custom{-moz-appearance:textfield;appearance:textfield}
#stage #custom::-webkit-outer-spin-button,#stage #custom::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* toques de 44 px */
html:has(#stage) .prog .lnk{min-height:44px;padding:0 10px;margin:0 -10px}
#stage .rleg a{min-height:44px;padding:0 4px}
#stage .rleg{margin:2px 0 4px}
#stage .tabs button{min-height:44px}
#stage .opt:focus-visible,#stage .tabs button:focus-visible,#ctabar #cont:focus-visible{outline:2px solid var(--brand,#e63946);outline-offset:2px}
/* :hover pegado en táctil */
@media (hover:none){
  #stage .opt:hover,#stage .plan:hover{transform:none}
  #stage .opt:not(.on):hover{border-color:var(--border);box-shadow:0 1px 2px rgba(15,23,42,.04)}
  #stage .plan:not(.plan--top):not(.sel):hover{box-shadow:0 1px 3px rgba(15,23,42,.05)}
}
/* «¿Cuánto caminar?»: 3 opciones en 3 columnas (no 2+1) */
#stage .lbl+.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Continuar deshabilitado: legible y con pista en lugar de un rojo al 25 % */
#ctabar #cont:disabled{opacity:1;background:var(--surface2,#f1f5f9);color:var(--mut,#475569);box-shadow:none;transform:none;font-size:0}
#ctabar #cont:disabled::after{content:"Elige una opción para continuar";font-size:.9375rem;font-weight:600}
/* móvil y horizontal: fuera cabecera y pie globales; .prog y #ctabar compactos */
@media (max-width:767px),(max-height:500px){
  html:has(#stage) nav.sticky.top-0{display:none}
  html:has(#stage) footer{display:none}
  html:has(#stage) .prog{top:env(safe-area-inset-top,0px)}
  html:has(#stage) .prog .pgin{padding:2px 16px 8px}
  html:has(#stage) .prog .prow{margin-bottom:4px}
  html:has(#stage) main.wrap{padding-top:18px}
  html:has(#stage) .head{margin-bottom:18px}
  #ctabar.cta{padding:8px max(16px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left))}
  html.pd-tab #ctabar.cta{padding-bottom:8px}
  #ctabar .btn{padding:13px 16px}
}
@media (max-height:500px) and (orientation:landscape){
  html:has(#stage) .prog{position:static}
}
/* resultados en 2 columnas en tablet */
@media (min-width:768px) and (max-width:1099px){
  html:has(#res .plan) main.wrap{max-width:1040px}
  #res:has(.plan){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
  #res>:not(.plan){grid-column:1/-1}
  #res .plan{margin-bottom:0}
  #res .planwrap{grid-template-columns:1fr}
  #res .pmap{min-height:220px;border-left:0;border-top:1px solid var(--border)}
  #res .pmap-el{position:absolute;inset:0;height:100%;min-height:0}
}

/* ===================== 4) /profile y /auth/login ===================== */
html.ctxd-redir #main{visibility:hidden}
/* html.ps-auth lo pone movil.js en /auth/login y /auth/register: el spinner y el formulario ocupan lo mismo (CLS) */
html.ps-auth #main>div.min-h-\[80vh\]{align-items:flex-start;min-height:560px;padding-top:32px}
html.ps-auth #main>div.min-h-\[80vh\]>.animate-spin{margin-top:120px}
#main:has(form input[type=password]) #google-btn{min-height:44px}
#main:has(form input[type=password]) form input{font-size:16px}
#main:has(form input[type=password]) a[href="/auth/forgot-password"],
#main:has(form input[type=password]) a[href="/auth/register"]{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:.875rem}
#main:has(form input[type=password]) .mt-1\.5.text-right{margin-top:0}
#main:has(form input[type=password]) .text-center.mt-8{margin-top:20px}
/* isotipo en lugar de la «C» de relleno */
#main:has(form input[type=password]) .text-center.mb-8>div.w-14>span{font-size:0;width:34px;height:36px;background:url(/icon.svg) center/contain no-repeat}
#main:has(form input[type=password]) .text-center.mb-8>div.w-14{background:transparent}

/* ===================== 5) /contact ===================== */
#main select#topic{-webkit-appearance:none;appearance:none;min-height:48px;font-size:16px;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
#main:has(select#topic) form input,#main:has(select#topic) form textarea{font-size:16px}
#main:has(select#topic) form input:not([type=hidden]):not(.hidden){min-height:48px}
#main:has(select#topic) form a[href="/legal/privacy"]{display:inline-block;padding:12px 2px;margin:-12px 0}
#main:has(select#topic) form p.text-xs{font-size:.8125rem;line-height:1.6}
/* tarjeta del correo: toda la tarjeta es el enlace */
#main:has(select#topic) .p-5.rounded-2xl:has(>a[href^="mailto:"]){position:relative}
#main:has(select#topic) .p-5.rounded-2xl>a[href^="mailto:"]::after{content:"";position:absolute;inset:0;border-radius:16px}
#main:has(select#topic) .p-5.rounded-2xl:has(>a[href^="mailto:"]):active{border-color:#e63946!important}
@media (max-width:767px){
  #main:has(select#topic) section:first-child>div.py-16{padding-top:28px;padding-bottom:28px}
  #main:has(select#topic) section:first-child h1{font-size:clamp(2rem,1.4rem + 3vw,2.5rem)}
  #main:has(select#topic) section:first-child p.text-lg{font-size:1rem}
  #main:has(select#topic) section.py-12{padding-top:28px}
}
@media (min-width:768px) and (max-width:1023px){
  #main:has(select#topic) .grid.md\:grid-cols-2{grid-template-columns:1fr;max-width:600px;margin-left:auto;margin-right:auto;gap:40px}
}
/* con el teclado abierto no estorban la barra ni el aviso de cookies */
html:has(#main select#topic):has(#main form :focus) #ctxd-tab,
html:has(#main select#topic):has(#main form :focus) [data-hx-cookie],
html:has(#main form input[type=password]):has(#main form :focus) #ctxd-tab,
html:has(#main form input[type=password]):has(#main form :focus) [data-hx-cookie]{display:none!important}

/* ===================== 6) /en/about (y /about) ===================== */
@media (max-width:767px){
  #main:has(.grid.grid-cols-2.md\:grid-cols-3 p.text-3xl)>div>section:first-child>div.py-20{padding-top:48px;padding-bottom:48px}
  #main:has(.grid.grid-cols-2.md\:grid-cols-3 p.text-3xl)>div>section:first-child h1{font-size:clamp(1.875rem,1.3rem + 3vw,2.5rem);line-height:1.1}
  #main:has(.grid.grid-cols-2.md\:grid-cols-3 p.text-3xl)>div>section:first-child p.text-lg{font-size:1rem}
  #main .grid.grid-cols-2.md\:grid-cols-3:has(p.text-3xl)>:nth-child(3):last-child{grid-column:1/-1}
  #main .grid.grid-cols-2.md\:grid-cols-3:has(p.text-3xl)>div{padding:16px 8px}
}
/* cifras: no desbordan con letra al 150 % */
#main .grid.grid-cols-2.md\:grid-cols-3>div>p.text-3xl{font-size:min(2.25rem,9vw);line-height:1.1;overflow-wrap:anywhere}
/* valores: 3 tarjetas en 3 columnas desde iPad */
@media (min-width:768px){
  #main:has(.grid.grid-cols-2.md\:grid-cols-3 p.text-3xl) .grid.md\:grid-cols-2:has(>div.p-8:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  #main:has(.grid.grid-cols-2.md\:grid-cols-3 p.text-3xl) .grid.md\:grid-cols-2>div.p-8{padding:24px}
}
#main .ps-about-cta h2{font-size:1.5rem;font-weight:900;color:var(--fg);margin:0 0 8px;letter-spacing:-.01em}
#main .ps-about-cta p{color:var(--text-secondary);margin:0 0 20px}
#main:has(.ps-about-cta) section:has(>.ps-about-cta)>a{min-height:48px}

/* ===================== 7) /help ===================== */
#main:has(details.group>summary.list-none) details.group>summary::-webkit-details-marker{display:none}
#main:has(details.group>summary.list-none) details.group>summary:focus-visible{outline:2px solid #e63946;outline-offset:-2px;border-radius:16px}
@media (max-width:767px){
  #main:has(details.group>summary.list-none)>div>section:first-child>div.py-16{padding-top:32px;padding-bottom:32px}
  #main:has(details.group>summary.list-none)>div>section:first-child h1{font-size:clamp(1.875rem,1.3rem + 3vw,2.25rem)}
  #main:has(details.group>summary.list-none)>div>section.py-12{padding-top:28px;padding-bottom:16px}
  #main:has(details.group>summary.list-none) section .mb-12{margin-bottom:32px}
  #main:has(details.group>summary.list-none) section .mt-16{margin-top:32px;padding:24px 20px}
}

/* ===================== 8) 404 ===================== */
#main>div.min-h-\[70vh\]:has(p.text-8xl){min-height:0;padding-top:48px;padding-bottom:40px;align-items:flex-start}
#main div.min-h-\[70vh\] p.text-8xl{font-size:clamp(4rem,18vw,6rem);line-height:1}
#main div.min-h-\[70vh\]:has(p.text-8xl) .flex.items-center.justify-center.gap-3>a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;box-sizing:border-box;border:1px solid transparent;border-radius:12px;padding-top:0;padding-bottom:0}
#main div.min-h-\[70vh\]:has(p.text-8xl) .flex.items-center.justify-center.gap-3>a:not(.btn-primary){border-color:var(--border)}
@media (max-width:374px){
  #main div.min-h-\[70vh\]:has(p.text-8xl) .flex.items-center.justify-center.gap-3{flex-direction:column;align-items:stretch}
}
#main .ps-404-busca{display:flex;gap:8px;margin-top:28px}
#main .ps-404-busca input{flex:1;min-width:0;min-height:48px;font-size:16px;padding:0 14px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--fg)}
#main .ps-404-busca input:focus{outline:none;border-color:#e63946;box-shadow:0 0 0 3px rgba(230,57,70,.18)}
#main .ps-404-busca button{flex:none;min-height:48px;padding:0 18px;border:0;border-radius:12px;background:#e63946;color:#fff;font:inherit;font-weight:700;cursor:pointer}
#main .ps-404-ciu{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
#main .ps-404-ciu a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--fg);font-size:.875rem;font-weight:600;text-decoration:none}
#main .ps-404-ciu a:active{border-color:#e63946;color:#e63946}
#main .ps-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}



/* ===== paquete: restos-layout (4-nov-2026) =====
   Restos de maquetación medidos tras v1 (despues/metricas.json): scroll lateral de 2-4 px, toques <44 px y letra <12 px.
   Todo con selectores comprobados en el sitio en vivo; sin tocar nodos de React. Ver NOTAS.md. */

/* (a1) Hamburguesa: 44x44 con cualquier idioma. La regla de v1 iba por aria-label="Abrir menú" y solo en tablet;
   en /en/* el botón dice «Open menu», medía 24 px y la zona ampliada de c-ux-v1 §15 (::after left:0; min-width:44px)
   se salía 20 px por la derecha → body.scrollWidth 324 en /en/us/new-york y /en/about. */
@media (max-width:1023.98px){
  nav.sticky button[aria-controls="ctxd-menu-movil"]{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* (a2) 404: en WebKit el input[type=search] aporta su ancho intrínseco (size=20 ≈ 225 px) al min-content del formulario
   y el bloque centrado medía 323 px a 320. width:0 + flex:1 → el campo ocupa lo que queda sin empujar. */
#main .ps-404-busca{width:100%}
#main .ps-404-busca input{width:0}
#main div.max-w-md:has(>.ps-404-busca){width:100%;min-width:0}

/* (b) Subir foto/vídeo de la valoración (type=file): no abre teclado, pero 16 px por coherencia con el resto de campos */
#t3a-rev-media{font-size:16px}

/* (d) Letra ≥12 px */
/* barra inferior: la arregla el paquete nav-barra (rejilla con Perfect Day 1,3x y 12 px), más abajo */
@media (max-width:1023.98px){
  /* insignia «Gratis» de las tarjetas (11 px) */
  article.event-card-premium div.absolute.top-3.left-3{font-size:12px}
  html[data-ctxl-lista] main .grid.grid-cols-1>a.group.block.h-full>article.event-card-premium>div.relative:first-child>div.absolute.top-3.left-3{font-size:12px}
  /* crédito de la foto del hero de ciudad (/cl/santiago…): lo pinta t11a con style="font-size:11px" en línea */
  p[data-ctxd-t11a="credito"]{font-size:12px!important}
  /* textos de 10-11 px de Tailwind (buscador: «CDMX», «Sin spam…», «App Store», «Próximamente…») y cabecera del buscador ctxd */
  .text-\[10px\],.text-\[11px\]{font-size:12px!important}
  #ctxdq>div.h{font-size:12px}
}

/* (c) Toques ≥44 px: los selectores con más conteo que siguen visibles e interactivos */
@media (max-width:1023.98px){
  /* listados /finde y /hoy (t4a): «Ver evento» 42 → 44; título 22 px → caja de 44 sin mover nada (li es flex) */
  /* (.t4a-ca a{min-height:42px} y .t4a .t4a-m a{padding:13px 3px} vienen del propio t4a: hace falta 0,2,x) */
  .t4a-ca>a.t4a-b1{min-height:44px}
  ul.t4a-ev>li>a.t4a-t{padding-block:12px;margin-block:-12px}
  .t4a p.t4a-m>a{padding-top:14px;padding-bottom:14px}
  nav.t4a-crumb>a,nav.cn-bc>a,nav.bts-miga>a{min-width:44px;min-height:44px;text-align:center;justify-content:center}
  /* «+ Mi día» de fichas/recintos y del buscador (40 px) */
  button.ctxd-add,button.ctxd-cadd,.ctxd-plan .ctxd-card button.ctxd-add{min-height:44px}
  /* aviso de cookies: «Más info». v1 (paquete capas-fijas) le dio padding 12px + margin -12px para no inflar la línea:
     18,19 + 24 = 42,19 px. 13 px → 44,19 sin mover nada (mismo selector, va después) */
  html body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) p > a{padding-top:13px;padding-bottom:13px;margin-block:-13px}
  /* pestañas de ciudad del bloque «para ti» (40 px) */
  .rx-tabs>label[for]{min-height:44px}
  /* × «Ocultar» de los avisos de registro e invitación (40x40) */
  #ctxd-reg button.x,#ctxd-inv button.x{min-width:44px;min-height:44px}
  /* migas de pan de Next (hero de ciudad 30x15, ficha 30x32, blog 40x44): sin cambiar el alto de la línea */
  nav>ol.flex.items-center>li>a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-block:-14px}
  /* la de la ficha la dejó v1 en 32 px (body:has(#t3a-acc) ol.overflow-x-auto…): 44 con el mismo truco de margen */
  body:has(#t3a-acc) nav>ol.overflow-x-auto.scrollbar-hide.text-xs>li>a{min-height:44px;margin-block:-14px}
  /* chips de ciudad del home, enlaces del resumen de ciudad, enlaces-botón con borde (38-41 px) */
  ul.ctxd-xp__c>li>a,ul.t9a-links>li>a{min-height:44px}
  main a.px-4.rounded-xl.border:not(.w-full),main a.px-4.rounded-xl.text-sm:not(.w-full){display:inline-flex;align-items:center;min-height:44px}
  /* hub de ciudad «Zonas» (li flex: nombre + tipo, 24 px) y fuentes de la ficha (enlaces en línea de 17 px): caja de 44 sin mover filas */
  #zonas .t9a-z li>a{padding-block:12px;margin-block:-12px}
  .t12-fu li>a{padding-top:14px;padding-bottom:14px}
  /* cine del home (43 px), botón Perfect Day de la barra (42 px de ancho), «Ver toda la cartelera» (24 px) */
  a.cnh-t{min-height:44px}
  a.t8-btn{min-width:44px}
  a.cn-ver{min-height:44px}
  /* ficha de evento: recinto (24 px), «Leer más» (20 px), «Todas las fechas de…» (20 px) */
  a.g-venue{display:flex;align-items:center;min-height:44px}
  #section-about>button.mt-3,#section-facts>a.mt-4{display:inline-flex;align-items:center;min-height:44px}
  /* blog: chip de categoría (36 px) y autor «CTXplorer» (32 px) */
  a.px-4.rounded-full.text-xs[href^="/blog?category="]{display:inline-flex;align-items:center;min-height:44px}
  p.text-xs>a.font-medium[href="/about"]{display:inline-flex;align-items:center;min-height:44px;margin-block:-6px}
}


/* ===== nav-barra (v2, 4-nov-2026) · #ctxd-tab en pantallas estrechas =====
   v1 bajaba las etiquetas a 11 px (≤374) y aun así «Perfect Day» salía cortado («Perfect D…»), y «Mi día» quedaba
   a 12 px porque su <span> no es :last-child (lleva detrás el contador .ctxd-nv__n).
   Arreglo: la columna de Perfect Day es 1,3 veces las demás (ctxd-explora-v1.css: repeat(5,minmax(0,1fr)))
   y todas las etiquetas a 12 px, en una línea, con elipsis solo como último recurso (letra del sistema al 150 %). */
@media (max-width:399.98px){
  #ctxd-tab.ctxd-tab .ctxd-tab__l{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)}
  #ctxd-tab.ctxd-tab .ctxd-nv__a>span:not(.ctxd-nv__n):not(.ctxd-tab__pdi):not(.hx-av){
    display:block;max-width:100%;font-size:12px;letter-spacing:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;
  }
}


/* ctxd-movil-v2 · paquete «contenido-datos» (4-nov-2026) */

/* 1 · avatares de demo con cara: invisibles hasta que movil.js los cambia por la inicial (sin destello de rostros) */
img[src*="randomuser.me/api/portraits/"]{opacity:0!important}

/* 2 · /auth/* en móvil y tablet: sin pie, formulario limpio. El paquete pie quita la reserva del body cuando hay pie
   (html:not(#_) body:has(>footer…){padding-bottom:0!important}); aquí se devuelve con más especificidad (2 ids). */
@media (max-width:1023.98px){
  html.cd-auth footer.border-t[role=contentinfo]{display:none!important}
  html.cd-auth:not(#_):not(#_) body{padding-bottom:calc(var(--ctxd-nav-h,72px) + var(--hx-ck,0px) + env(safe-area-inset-bottom,0px))!important}
}

/* 3 · recintos: una tarjeta por evento; «N fechas: 5, 6 y 7 nov» en su propia línea bajo «Ciudad · fecha» (sin scroll lateral a 320) */
html body div.min-h-screen:has(>div.sticky.top-16) article p[data-ctxq-n]{flex-wrap:wrap;row-gap:2px}
html body div.min-h-screen:has(>div.sticky.top-16) article p[data-ctxq-n]::after{content:attr(data-ctxq-n);flex-basis:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:1.35;font-weight:700;color:var(--ctxd-accent-text,#bf2533)}
html.dark body div.min-h-screen:has(>div.sticky.top-16) article p[data-ctxq-n]::after{color:#ff6b75}


/* ctxd · paquete «cine» v2: botón «Agregar a mi día» pulsado → «✓ En tu día» sin el «+» delante (el ✓ va en el texto) */
main.cn .cn-b[data-ctxd-add][aria-pressed="true"]>svg{display:none}


/* ===== especial-bts (v2, 4-nov-2026) · /especial/bts (HTML del Worker ctx-especial-bts) =====
   El resto de BTS ya va en ctxd-movil-v1.css (paquete paginas-sueltas). Aquí solo lo que faltaba. */
/* «Ticketmaster Perú» en «Datos clave»: enlace en línea de 19 px de alto → zona de toque de 45 px sin mover la línea
   (el padding vertical se compensa con margen negativo, el alto de la línea no cambia) */
html:has(.bts-miga) .bts-dl dd a{display:inline-block;padding:13px 0;margin:-13px 0;-webkit-tap-highlight-color:rgba(230,57,70,.15)}
html:has(.bts-miga) .bts-dl dd a:focus-visible{outline:2px solid #e63946;outline-offset:2px;border-radius:4px}

/* ===== v3 · recinto-tarjetas ===== */
/* ctxd-movil-v3 · paquete «recinto-tarjetas» (4-nov-2026)
   1) Tarjeta horizontal de evento en recintos (/venues/*) y listados largos (html[data-ctxl-lista]) a <640 px:
      el corazón de favoritos (44×44, esquina superior derecha de la tarjeta) tapaba el final del título.
      → hueco a la derecha del <h3> (y de la línea de fecha, que a 320 px queda a la altura del corazón si el título es de 1 línea) del ancho del corazón (44 px + 6 px de margen − 12 px de padding de .p-3 ≈ 40 px).
   2) La línea «ciudad · fecha» (c-ux-v1 la ordena: fecha order:-2, «·» order:-1) partía en dos con flex-wrap:wrap
      → quedaba «7 nov ·» y la ciudad debajo. Ahora una sola línea: fecha y «·» fijos, la ciudad se recorta con «…».
   3) Tarjetas t8c (Destacados del home, t8a): si la foto falla, movil.js pone data-rt-ph (título) y --t8h en .t8c-roto
      → mismo relleno que .t8c-sin de t8a.js (color de la paleta + título en blanco). */

@media (max-width:639px){
  div.min-h-screen:has(>div.sticky.top-16) div.grid.grid-cols-1>div>a.group>article.event-card-premium>div.p-3>h3,
  html[data-ctxl-lista] main .grid.grid-cols-1>a.group.block.h-full>article.event-card-premium>div.p-3>h3{padding-right:40px}

  div.min-h-screen:has(>div.sticky.top-16) div.grid.grid-cols-1>div>a.group>article.event-card-premium>div.p-3>p.flex,
  html[data-ctxl-lista] main .grid.grid-cols-1>a.group.block.h-full>article.event-card-premium>div.p-3>p.flex{flex-wrap:nowrap;min-width:0;padding-right:40px}
  div.min-h-screen:has(>div.sticky.top-16) div.grid.grid-cols-1>div>a.group>article.event-card-premium>div.p-3>p.flex>span:nth-last-child(-n+2),
  html[data-ctxl-lista] main .grid.grid-cols-1>a.group.block.h-full>article.event-card-premium>div.p-3>p.flex>span:nth-last-child(-n+2){flex:none;white-space:nowrap}
  div.min-h-screen:has(>div.sticky.top-16) div.grid.grid-cols-1>div>a.group>article.event-card-premium>div.p-3>p.flex>span:first-of-type:nth-last-child(3),
  html[data-ctxl-lista] main .grid.grid-cols-1>a.group.block.h-full>article.event-card-premium>div.p-3>p.flex>span:first-of-type:nth-last-child(3){flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* 3 · relleno de foto t8c rota (mismo aspecto que .t8c-sin de t8a.js) */
.t8c-img.t8c-roto[data-rt-ph]{position:relative;background:var(--t8h,#3f3f46)!important}
.t8c-img.t8c-roto[data-rt-ph]::after{content:attr(data-rt-ph);position:absolute;left:12px;right:12px;bottom:12px;color:#fff;font-weight:800;font-size:1.0625rem;line-height:1.15;opacity:.92;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;overflow-wrap:anywhere;pointer-events:none}

/* ===== v3 · capas-home ===== */
/* ===== paquete: capas-home (parches-v3, 4-nov-2026) =====
   1) Avisos fijos de abajo en móvil: uno cada vez y apilados sin hueco sobre la barra de pestañas.
   2) Miga de pan de la ficha de evento con flechas (como recintos y /hoy), no con barras.
   3) Perfect Day: «Elige una opción para continuar» centrado en su botón en Chromium y WebKit.
   Selectores comprobados en el vivo el 4-nov. --ctxd-pila / data-ctxd-pila / data-ctxd-tabv los pone movil.js;
   sin JS no aplica nada de 1) salvo ocultar el aviso de instalar mientras está el de cookies. Ver NOTAS.md. */

/* ---------- 1a) Aviso de cookies acoplado a la barra de pestañas (<768) ----------
   v2 lo dejaba flotando a 8 px de la barra: por el hueco asomaba el contenido (la tarjeta oscura #ctxd-inv del home
   parecía un tercer aviso fijo) y la tarjeta medía 92 px. Ahora va pegado a la barra, de lado a lado, sin borde de abajo,
   con 8 px de relleno: 68-70 px de 375 a 767 (una fila) y 83 px a 320-374 (texto en una línea + botones, ver abajo). La safe-area de abajo ya va dentro
   de la barra (la mide movil.js); la de los lados va en el relleno. Los estilos del bundle van inline → !important. */
@media (max-width:767.98px){
  html[data-ctxd-tabv] body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]){
    bottom:var(--ctxd-pila,72px)!important;
    left:0!important;right:0!important;
    max-width:none!important;margin:0!important;
  }
  html[data-ctxd-tabv] body div.fixed.animate-slide-up:has(a[href="/legal/cookies"])>div{
    max-width:none!important;
    border-radius:16px 16px 0 0!important;
    border-bottom:0!important;
    box-shadow:0 -6px 20px rgba(0,0,0,.12)!important;
    padding:8px max(12px,env(safe-area-inset-right,0px)) 8px max(12px,env(safe-area-inset-left,0px))!important;
    row-gap:6px!important;column-gap:10px!important;
  }
  html[data-ctxd-tabv] body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) p{line-height:1.35!important}
}
/* <375 (320-374): el texto (301 px a 12 px) en UNA línea encima de los botones: 101 → ~83 px de alto a 320.
   Relleno lateral 10 (caben 298 px) + ajuste de letra -0,01em + «Más info» sin los 2+2 px de relleno ni los 2 de margen
   laterales que le da v2 (sigue con ~46 px de ancho y 42 de alto de toque) → ~290 px; si una fuente de reserva lo ensancha,
   pasa a 2 líneas sin romper nada. */
@media (max-width:374.98px){
  html[data-ctxd-tabv] body div.fixed.animate-slide-up:has(a[href="/legal/cookies"])>div{
    padding-left:max(10px,env(safe-area-inset-left,0px))!important;padding-right:max(10px,env(safe-area-inset-right,0px))!important;
  }
  html[data-ctxd-tabv] body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) p{font-size:12px!important;letter-spacing:-.01em}
  html[data-ctxd-tabv] body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) p>a{padding-left:0!important;padding-right:0!important;margin-left:0!important}
}
/* 375-767: texto y botones en una sola fila (columna de texto ≥140 px, 3 líneas como mucho a 375) */
@media (min-width:375px) and (max-width:767.98px){
  html[data-ctxd-tabv] body div.fixed.animate-slide-up:has(a[href="/legal/cookies"])>div{flex-wrap:nowrap!important}
  html[data-ctxd-tabv] body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) p{flex:1 1 0!important;min-width:0}
  html[data-ctxd-tabv] body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) .shrink-0{flex:0 0 auto!important;gap:6px!important}
  html[data-ctxd-tabv] body div.fixed.animate-slide-up:has(a[href="/legal/cookies"]) button{flex:0 0 auto!important;padding-inline:10px!important}
}

/* ---------- 1b) «Instala CTXplorer» (PWA, Android/Chrome): solo cuando ya no está el de cookies ----------
   Es un div.fixed bottom-4 z-[60] del bundle: salía a 16 px del borde, ENCIMA de la barra de pestañas (z-50) y junto al de
   cookies. Se oculta (sin desmontarlo) mientras haya aviso de cookies o el cajón abierto; al aceptar/rechazar cookies React
   desmonta ese aviso, el :has deja de cumplirse y aparece este. Va encima de la pila de barras, compacto y con toques de 44. */
body:has(div.fixed.animate-slide-up a[href="/legal/cookies"]) div.fixed[role="dialog"][aria-label="Instalar CTXplorer como app"],
html.ctxd-cajon div.fixed[role="dialog"][aria-label="Instalar CTXplorer como app"]{display:none!important}
@media (max-width:767.98px){
  div.fixed[role="dialog"][aria-label="Instalar CTXplorer como app"]{
    left:max(8px,env(safe-area-inset-left,0px))!important;
    right:max(8px,env(safe-area-inset-right,0px))!important;
    bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;
    padding:10px 12px!important;gap:10px!important;
  }
  html[data-ctxd-pila] div.fixed[role="dialog"][aria-label="Instalar CTXplorer como app"]{bottom:calc(var(--ctxd-pila) + 8px)!important}
  div.fixed[role="dialog"][aria-label="Instalar CTXplorer como app"]>div.shrink-0{width:40px!important;height:40px!important;font-size:20px!important}
  div.fixed[role="dialog"][aria-label="Instalar CTXplorer como app"] p.mb-3{margin-bottom:8px!important;font-size:13px!important}
  div.fixed[role="dialog"][aria-label="Instalar CTXplorer como app"] button{min-height:44px;font-size:14px!important;padding-inline:14px!important}
}

/* ---------- 1d) Barra «Mi día» (.ctxd-bar de ctxd-v5, sale cuando hay planes guardados) ----------
   colocar() de ctxd-v5 la apila ENCIMA del aviso de cookies: cookies + Mi día + pestañas = tres pisos (el «otro aviso fijo»).
   Mientras esté el de cookies no se pinta; al aceptar/rechazar React desmonta el aviso, el :has deja de cumplirse y
   colocar() (observa <body> y corre cada 1,5 s) la deja a 8 px de la barra de pestañas. El de instalar espera a que no esté. */
@media (max-width:1023.98px){
  body:has(div.fixed.animate-slide-up a[href="/legal/cookies"]) .ctxd-root>.ctxd-bar{display:none!important}
  body:has(.ctxd-root>.ctxd-bar:not([hidden])) div.fixed[role="dialog"][aria-label="Instalar CTXplorer como app"]{display:none!important}
}

/* ---------- 1c) Avisos breves (ToastProvider: div.fixed.bottom-6.right-6.z-[100]) ----------
   A 24 px del borde caían encima de la barra de pestañas. Encima de la pila y, si está, del aviso de cookies (--hx-ck). */
@media (max-width:767.98px){
  html[data-ctxd-pila] body div.fixed.bottom-6.right-6.pointer-events-none{
    bottom:calc(var(--ctxd-pila) + var(--hx-ck,0px) + 8px)!important;
    left:16px;right:16px!important;
  }
}

/* ---------- 2) Miga de pan de la ficha de evento: flechas, no barras ----------
   La de Next (/events/*) separa con <li>/</li>; recintos usan un chevron SVG (M9 5l7 7-7 7) y /hoy, /finde y cine «›».
   Los separadores son los <li> sin hijos que no son el último (el último es la página actual, también sin hijos).
   El «/» se queda en el DOM (font-size:0) y se pinta el mismo chevron con mask, en el color del texto. */
nav>ol.flex.items-center.text-xs.overflow-x-auto.scrollbar-hide>li:not(:has(*)):not(:last-child){
  font-size:0!important;
  flex:none;
  width:14px;height:14px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/14px 14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/14px 14px no-repeat;
}

/* La caja de toque de 44 px que v2 da a cada enlace de la miga (min-width:44px) centra el texto: «Inicio» (≈36 px) quedaba
   metido 4 px y con hueco raro a los lados. Texto a la izquierda, como en recintos; la caja de toque no cambia. */
body:has(#t3a-acc) nav>ol.overflow-x-auto.scrollbar-hide.text-xs>li>a{justify-content:flex-start}
/* «Inicio»/«Home» (34-38 px de texto) en caja de 44: -6 px a la derecha para que el hueco hasta la flecha sea como los demás;
   la flecha no recoge toques, así esos 6 px siguen abriendo «Inicio». */
body:has(#t3a-acc) nav>ol.overflow-x-auto.scrollbar-hide.text-xs>li:first-child>a{margin-right:-6px}
nav>ol.flex.items-center.text-xs.overflow-x-auto.scrollbar-hide>li:not(:has(*)):not(:last-child){pointer-events:none}
/* Miga en dos filas (≤~360 px): v2 da a cada enlace caja de toque de 44 px con margin-block:-14px y v1 deja row-gap:0, así que
   la caja de «Conciertos» (2.ª fila) tapaba ENTERO el texto de «Inicio»: tocar «Inicio» abría Conciertos (0/4 puntos a 320 en
   Chromium y WebKit, ya en v2). Con 12 px entre filas la caja de abajo ya no alcanza el texto de arriba (4/4). */
body:has(#t3a-acc) nav>ol.overflow-x-auto.scrollbar-hide.text-xs{row-gap:12px}

/* ---------- 3) Perfect Day: «Elige una opción para continuar» centrado ----------
   v2 pone font-size:0 al botón deshabilitado y el texto en su ::after (15 px). En pantallas táctiles c-ux-v1.css
   (@media (pointer:coarse)) convierte el ::after de todo botón en área de toque absoluta (top:50%; height:max(100%,44px);
   translateY(-50%)): el texto queda fuera del flujo, el botón se encoge a 26 px (solo relleno) y el texto sale ~9 px por
   encima del centro (medido en Chromium y WebKit a 320/393/768). Se devuelve el ::after al flujo y se centra con flex:
   el botón vuelve a ~45 px (toque ≥44) y el texto queda centrado (±1 px). Sin pantalla táctil ya estaba bien y sigue igual. */
#ctabar #cont:disabled{display:flex!important;align-items:center;justify-content:center;text-align:center}
#ctabar #cont:disabled::after{display:block;position:static!important;transform:none!important;height:auto!important;min-width:0!important;line-height:1.25}

/* ===== v3 · toques-datos ===== */
/* ===== toques-datos (v3): zonas de toque >= 44 px sin mover el diseño =====
   Técnica: padding vertical + margin negativo igual. La caja que se toca crece y el flujo
   queda en el mismo sitio. El padding de arriba es siempre menor que el hueco con el control
   anterior, así que no roba toques al campo de encima; el de abajo cae sobre el propio campo
   (que pinta encima y hace lo mismo que la etiqueta: enfocar el campo). */

/* 1 · Formulario de reseñas (fichas de evento/recinto, t3a): label 18 px, hueco arriba 12 px, abajo 4 px */
form.t3a-rev-form label[for] {
  padding-top: 11px;
  padding-bottom: 15px;
  margin-top: -11px;
  margin-bottom: -11px; /* 4px originales - 15px */
}

/* 2 · Formulario de contacto (/contact): label 16 px, .space-y-4 = 16 px arriba, mb-1.5 = 6 px abajo */
form.space-y-4 > div > label.block.text-xs[for] {
  padding-top: 15px;
  padding-bottom: 13px;
  margin-top: -15px;
  margin-bottom: -7px; /* 6px originales - 13px */
}

/* 3 · /cine y /mx/cine: título de la película (enlace en línea de 19 px dentro del h3) */
.cn-cb h3 > a {
  display: block;
  padding: 12px 0;
  margin: -12px 0;
}

/* 4 · Atribución de OpenStreetMap en el plan de la ficha (15 px). Arriba hay un CTA a 12 px:
       el padding superior no pasa de 12 para no tapar su borde inferior. */
p.ctxd-osm a {
  display: inline-block;
  padding: 12px 0 18px;
  margin: -12px 0 -18px;
}

/* 5 · /contact: correo hola@ (19 px) */
a.text-base.font-semibold[href^="mailto:"] {
  display: inline-block;
  padding: 13px 0;
  margin: -13px 0;
}