/* ==========================================================================
   Portal Turístico de Xalapa — Maqueta de propuesta
   Sistema visual sobre la identidad "Xalapa, Identidad que inspira"
   ========================================================================== */

:root{
  /* Paleta institucional (5 pétalos). El morado es el color primario
     de la interfaz; los otros cuatro codifican categorías. */
  --morado:#6B2C91;
  --morado-2:#8B4FB0;
  --morado-3:#F1E9F7;
  --magenta:#D3217F;
  --teal:#1B9CB9;
  --verde:#8DC63F;
  --naranja:#F7941D;

  /* Neutros */
  --tinta:#17121B;
  --tinta-70:rgba(23,18,27,.70);
  --tinta-50:rgba(23,18,27,.50);
  --tinta-30:rgba(23,18,27,.28);
  --papel:#FFFFFF;
  --bruma:#F7F4FA;
  --bruma-2:#EDE4F3;
  --linea:#E6DEEC;

  /* Tipografía */
  --display:'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --texto:'Karla', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Formas */
  --r-s:10px;
  --r-m:18px;
  --r-l:24px;
  --r-xl:34px;
  --marco:5px;                 /* grosor del marco de color de cada imagen */
  --sombra:0 1px 2px rgba(23,18,27,.04), 0 8px 24px -12px rgba(23,18,27,.16);
  --sombra-alta:0 2px 4px rgba(23,18,27,.05), 0 22px 48px -18px rgba(23,18,27,.30);

  --ancho:1180px;
  --nav-h:68px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--texto);
  font-size:16.5px; line-height:1.6;
  color:var(--tinta); background:var(--papel);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.1; margin:0; letter-spacing:-.02em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--morado); outline-offset:3px; border-radius:4px}

/* ---------- Íconos ---------- */
.ico{width:1.05em; height:1.05em; flex:0 0 auto; vertical-align:-.16em}
.ico--g{width:1.35em; height:1.35em}

/* ---------- Utilidades ---------- */
.contenedor{width:100%; max-width:var(--ancho); margin:0 auto; padding:0 24px; position:relative; z-index:2}
.solo-lectores{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.rotulo{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-size:.7rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  padding:.28rem .72rem .28rem .55rem; border-radius:999px;
  background:color-mix(in srgb, currentColor 13%, transparent);
}
.titulo-seccion{font-size:clamp(1.7rem,3.6vw,2.5rem); margin:.6rem 0 .4rem}
.bajada{color:var(--tinta-70); max-width:56ch; font-size:1.02rem}
.encabezado-seccion{margin-bottom:1.8rem}

.seccion{padding:64px 0; position:relative}
.seccion--bruma{background:var(--bruma)}
.seccion--apretada{padding:48px 0}

/* Cinta de 5 colores */
.cinta{display:flex; height:9px; width:100%}
.cinta span{flex:1}
.cinta span:nth-child(1){background:var(--magenta)}
.cinta span:nth-child(2){background:var(--morado)}
.cinta span:nth-child(3){background:var(--teal)}
.cinta span:nth-child(4){background:var(--verde)}
.cinta span:nth-child(5){background:var(--naranja)}

/* ---------- Figuras flotantes del fondo ---------- */
.flotantes{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.figura{
  position:absolute; opacity:.13;
  transform:rotate(var(--giro));
  animation-name:deriva; animation-timing-function:ease-in-out;
  animation-iteration-count:infinite; animation-direction:alternate;
}
@keyframes deriva{
  from{transform:rotate(var(--giro)) translate3d(0,0,0)}
  to{transform:rotate(calc(var(--giro) + 22deg)) translate3d(14px,-26px,0)}
}
.seccion--bruma .figura{opacity:.16}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.78rem 1.5rem; border-radius:999px;
  font-family:var(--display); font-weight:600; font-size:.97rem;
  border:1.5px solid transparent;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s;
}
.btn:hover{transform:translateY(-2px)}
.btn .ico{transition:transform .18s ease}
.btn:hover .ico{transform:translateX(3px)}
.btn--primario{background:var(--morado); color:#fff; box-shadow:0 10px 24px -12px var(--morado)}
.btn--primario:hover{background:#572276; box-shadow:0 16px 30px -14px var(--morado)}
.btn--claro{background:#fff; color:var(--tinta); border-color:var(--linea)}
.btn--claro:hover{border-color:var(--tinta-30)}
.btn--fantasma{border-color:rgba(255,255,255,.55); color:#fff}
.btn--fantasma:hover{background:rgba(255,255,255,.14)}
.btn--bloque{width:100%; justify-content:center}

/* ---------- Barra ---------- */
.barra{
  position:sticky; top:0; z-index:60;
  background:rgba(255,252,250,.9);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--linea);
}
.barra__fila{height:var(--nav-h); display:flex; align-items:center; gap:1.5rem}
.marca{display:flex; align-items:center; gap:.6rem; margin-right:auto}
.marca__texto{font-family:var(--display); font-weight:800; font-size:1.3rem; letter-spacing:-.03em; color:var(--morado); line-height:1}
.marca__lema{display:block; font-family:var(--texto); font-size:.6rem; letter-spacing:.06em; color:var(--tinta-50); font-weight:600}

.menu{display:flex; align-items:center; gap:.2rem}
.menu a{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .8rem; border-radius:999px;
  font-family:var(--display); font-weight:500; font-size:.94rem; color:var(--tinta-70);
  transition:background .15s, color .15s;
}
.menu a .ico{opacity:.55}
.menu a:hover{background:var(--bruma); color:var(--tinta)}
.menu a[aria-current="page"]{color:var(--morado); font-weight:600; background:var(--morado-3)}
.menu a[aria-current="page"] .ico{opacity:1}

.barra__extras{display:flex; align-items:center; gap:.6rem}
.idioma{display:flex; border:1px solid var(--linea); border-radius:999px; overflow:hidden; background:#fff}
.idioma button{padding:.34rem .68rem; font-family:var(--display); font-size:.78rem; font-weight:700; color:var(--tinta-50); letter-spacing:.04em}
.idioma button[aria-pressed="true"]{background:var(--tinta); color:#fff}

.hamburguesa{display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--linea); background:#fff; align-items:center; justify-content:center}
.hamburguesa span{display:block; width:18px; height:2px; background:var(--tinta); position:relative}
.hamburguesa span::before,.hamburguesa span::after{content:''; position:absolute; left:0; width:18px; height:2px; background:var(--tinta)}
.hamburguesa span::before{top:-6px}
.hamburguesa span::after{top:6px}

/* ---------- Héroe ---------- */
.heroe{
  position:relative; overflow:hidden;
  background:linear-gradient(168deg,#2B1533 0%,#59276F 46%,#7B4FA5 100%);
  color:#fff; padding:66px 0 0; isolation:isolate;
}
.heroe__paisaje{position:absolute; inset:auto 0 0 0; width:100%; height:56%; z-index:0}
.heroe__paisaje svg{width:100%; height:100%; display:block}
.heroe__bruma{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(56% 32% at 22% 82%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(46% 26% at 78% 88%, rgba(255,255,255,.12), transparent 70%);
  animation:derivar 26s ease-in-out infinite alternate;
}
@keyframes derivar{from{transform:translate3d(-3%,0,0)} to{transform:translate3d(4%,-2%,0) scale(1.08)}}

.heroe__rejilla{
  position:relative; z-index:3;
  display:grid; grid-template-columns:1fr auto; gap:2.5rem; align-items:center;
  padding-bottom:92px;
}
.heroe__texto{max-width:600px}
.heroe .rotulo{color:var(--verde)}
.heroe h1{font-size:clamp(2.05rem,4.2vw,3.2rem); font-weight:800; letter-spacing:-.035em; line-height:1.04; margin:1rem 0}
.heroe h1 em{font-style:normal; color:var(--verde)}
.heroe__texto p{font-size:clamp(1rem,1.7vw,1.14rem); color:rgba(255,255,255,.84); max-width:50ch; margin-bottom:1.7rem}
.heroe__acciones{display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:2rem}

.heroe__pregunta{font-family:var(--display); font-weight:600; font-size:.9rem; color:rgba(255,255,255,.72); margin-bottom:.7rem}
.fichas-rapidas{display:flex; flex-wrap:wrap; gap:.5rem}
.ficha-rapida{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem 1rem .5rem .78rem; border-radius:999px;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.24);
  font-size:.9rem; font-weight:500; color:#fff;
  transition:background .15s, transform .15s;
}
.ficha-rapida:hover{background:rgba(255,255,255,.26); transform:translateY(-2px)}
.ficha-rapida .ico{color:var(--ic)}

/* Chito saludando en el héroe */
.heroe__chito{
  position:relative; width:250px; flex:0 0 250px;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.36));
  animation:flotar 5.5s ease-in-out infinite alternate;
}
@keyframes flotar{from{transform:translateY(0)} to{transform:translateY(-13px)}}
.heroe__globo{
  position:absolute; z-index:4; top:2px; left:-58px;
  background:#fff; color:var(--tinta); border-radius:16px 16px 16px 4px;
  padding:.6rem .9rem; font-size:.86rem; font-weight:600; font-family:var(--display);
  box-shadow:var(--sombra-alta); white-space:nowrap;
}

/* ---------- Tira de datos ---------- */
.tira-datos{position:relative; background:var(--tinta); color:#fff; z-index:3}
.tira-datos__fila{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.12)}
.tira-datos__celda{background:var(--tinta); padding:1.35rem 1.2rem; display:flex; gap:.85rem; align-items:flex-start}
.tira-datos__icono{
  width:36px; height:36px; flex:0 0 36px; border-radius:11px;
  display:grid; place-items:center; color:#fff; background:var(--ic);
}
.tira-datos__icono .ico{width:19px; height:19px}
.tira-datos__cifra{font-family:var(--display); font-size:1.5rem; font-weight:800; letter-spacing:-.03em; line-height:1.1}
.tira-datos__pie{font-size:.8rem; color:rgba(255,255,255,.6); margin-top:.15rem}

/* ---------- Vocaciones ---------- */
.vocaciones{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.vocacion{
  position:relative; display:block; padding:1.4rem 1.15rem 1.25rem;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-m);
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;
}
.vocacion::before{content:''; position:absolute; inset:0 0 auto 0; height:5px; background:var(--c)}
.vocacion:hover{transform:translateY(-4px); box-shadow:var(--sombra-alta)}
.vocacion__icono{
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--c) 16%, #fff); color:var(--c); margin-bottom:.75rem;
}
.vocacion__icono .ico{width:23px; height:23px}
.vocacion h3{font-size:1.1rem; margin-bottom:.35rem}
.vocacion p{font-size:.87rem; color:var(--tinta-70); line-height:1.5}
.vocacion__cuenta{
  margin-top:.85rem; font-size:.8rem; font-weight:700; font-family:var(--display);
  color:var(--c); display:inline-flex; align-items:center; gap:.35rem;
}

/* ==========================================================================
   TARJETAS DE LUGAR
   Todas las imágenes miden lo mismo: proporción 4/3 fija, recortadas al
   centro sin deformar, dentro de un marco de color de 5 px.
   ========================================================================== */
.rejilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:20px}
.rejilla--compacta{grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:18px}

.tarjeta{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-m);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.tarjeta:hover{transform:translateY(-4px); box-shadow:var(--sombra-alta); border-color:transparent}

/* El marco: el color solo se ve como un borde parejo de 5 px */
.tarjeta__medio{
  position:relative;
  padding:var(--marco);
  background:var(--c,var(--morado));
  border-radius:var(--r-m) var(--r-m) 0 0;
  flex:0 0 auto;
}
.lienzo{
  position:relative; width:100%; aspect-ratio:4/3;
  border-radius:calc(var(--r-m) - var(--marco));
  overflow:hidden; background:var(--c,var(--morado));
  display:block;
}
.lienzo img,
.lienzo__escena{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.tarjeta:hover .lienzo img{transform:scale(1.05)}
.lienzo::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(202deg, rgba(0,0,0,.03) 0%, transparent 46%, rgba(0,0,0,.34) 100%);
}
.etiqueta{
  position:absolute; left:10px; bottom:10px; z-index:2;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .7rem; border-radius:999px;
  background:rgba(255,255,255,.95); color:var(--tinta);
  font-family:var(--display); font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.etiqueta .ico{width:13px; height:13px; color:var(--c)}
.sello-sin-foto{
  position:absolute; right:10px; top:10px; z-index:2;
  padding:.24rem .58rem; border-radius:999px;
  background:rgba(255,255,255,.9); color:var(--tinta-70);
  font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}

.tarjeta__cuerpo{padding:1.05rem 1.15rem 1.2rem; display:flex; flex-direction:column; flex:1}
.tarjeta__cuerpo h3{font-size:1.12rem; margin-bottom:.35rem}
.tarjeta__resumen{font-size:.89rem; color:var(--tinta-70); line-height:1.5; flex:1}
.tarjeta__pie{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem;
  padding-top:.85rem; border-top:1px solid var(--linea);
}
.gema{
  display:inline-flex; align-items:center; gap:.32rem;
  padding:.24rem .6rem; border-radius:999px; background:var(--bruma);
  font-size:.76rem; color:var(--tinta-70); font-family:var(--display); font-weight:600;
}
.gema .ico{width:13px; height:13px; color:var(--c,var(--tinta-50))}

/* ---------- Filtros ---------- */
.panel-filtros{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  padding:1.3rem 1.35rem; box-shadow:var(--sombra);
  position:sticky; top:calc(var(--nav-h) + 18px);
}
.filtro-grupo{margin-bottom:1.35rem}
.filtro-grupo:last-child{margin-bottom:0}
.filtro-grupo__titulo{
  display:flex; align-items:center; gap:.4rem;
  font-family:var(--display); font-size:.74rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinta-50); margin-bottom:.7rem;
}
.chips{display:flex; flex-wrap:wrap; gap:.42rem}
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .8rem; border-radius:999px;
  border:1.5px solid var(--linea); background:#fff;
  font-size:.85rem; font-weight:500; color:var(--tinta-70);
  transition:all .15s ease;
}
.chip .ico{width:14px; height:14px; color:var(--c,var(--tinta-50))}
.chip:hover{border-color:var(--tinta-30); color:var(--tinta)}
.chip[aria-pressed="true"]{background:var(--tinta); border-color:var(--tinta); color:#fff}
.chip[aria-pressed="true"] .ico{color:#fff}

.buscador{position:relative}
.buscador input{
  width:100%; padding:.72rem 1rem .72rem 2.5rem;
  border:1.5px solid var(--linea); border-radius:999px; background:var(--bruma); font-size:.94rem;
}
.buscador input:focus{background:#fff; border-color:var(--morado); outline:none; box-shadow:0 0 0 3px var(--morado-3)}
.buscador .ico{position:absolute; left:.9rem; top:50%; transform:translateY(-50%); opacity:.42; width:17px; height:17px}

.selector{
  width:100%; padding:.72rem 1rem; border:1.5px solid var(--linea); border-radius:var(--r-s);
  background:#fff; font-size:.94rem; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2317121B' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
}

.dos-columnas{display:grid; grid-template-columns:288px 1fr; gap:30px; align-items:start}

.barra-resultados{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:1.3rem; flex-wrap:wrap;
}
.barra-resultados__cuenta{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--display); font-weight:600; color:var(--tinta-70); font-size:.95rem;
}
.cambio-vista{display:flex; border:1px solid var(--linea); border-radius:999px; overflow:hidden; background:#fff}
.cambio-vista button{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.44rem .95rem; font-family:var(--display); font-size:.85rem; font-weight:600; color:var(--tinta-50);
}
.cambio-vista button[aria-pressed="true"]{background:var(--tinta); color:#fff}

#mapa{height:560px; border-radius:var(--r-l); overflow:hidden; border:1px solid var(--linea); background:var(--bruma-2)}
.leaflet-container{font-family:var(--texto)}

.vacio{
  text-align:center; padding:3.2rem 1rem; border:1.5px dashed var(--linea);
  border-radius:var(--r-l); color:var(--tinta-50); background:#fff;
}
.vacio .ico{width:40px; height:40px; color:var(--tinta-30); margin:0 auto .8rem}
.vacio h3{font-size:1.15rem; color:var(--tinta); margin-bottom:.4rem}

/* ---------- Cabecera de página interna ---------- */
.cabecera-pagina{
  background:var(--bruma); border-bottom:1px solid var(--linea);
  padding:46px 0 40px; position:relative; overflow:hidden;
}
.cabecera-pagina .rotulo{color:var(--morado)}
.cabecera-pagina h1{font-size:clamp(1.9rem,4.2vw,2.8rem); margin:.6rem 0 .55rem}
.miga{display:flex; align-items:center; gap:.4rem; font-size:.84rem; color:var(--tinta-50); margin-bottom:.9rem}
.miga a:hover{color:var(--morado)}
.miga .ico{width:13px; height:13px}

/* ==========================================================================
   FICHA DE DETALLE
   ========================================================================== */
.ficha-heroe{
  position:relative; overflow:hidden;
  background:var(--c,var(--morado));
  padding:var(--marco);
}
.ficha-heroe__lienzo{
  position:relative; width:100%; height:clamp(280px,38vw,430px);
  border-radius:0 0 var(--r-l) var(--r-l); overflow:hidden;
  display:flex; align-items:flex-end;
}
.ficha-heroe__lienzo > img,
.ficha-heroe__lienzo > .lienzo__escena{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
}
.ficha-heroe__lienzo::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(96deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.34) 42%, transparent 76%),
    linear-gradient(0deg, rgba(0,0,0,.62) 0%, transparent 52%);
}
.ficha-heroe__contenido{
  position:relative; z-index:2; width:100%;
  padding:2.4rem 0;                     /* respiro entre la foto y el texto */
  color:#fff;
}
.ficha-heroe__contenido .miga{color:rgba(255,255,255,.75); margin-bottom:.85rem}
.ficha-heroe__contenido .miga a:hover{color:#fff}
.ficha-heroe .etiqueta{position:static; box-shadow:none}
.ficha-heroe h1{
  font-size:clamp(1.8rem,4.2vw,2.9rem); color:#fff;
  margin:.7rem 0 .55rem; max-width:19ch;
  text-shadow:0 2px 24px rgba(0,0,0,.4);
}
.ficha-heroe p{color:rgba(255,255,255,.92); max-width:52ch; text-shadow:0 1px 16px rgba(0,0,0,.5)}

.ficha-cuerpo{
  display:grid; grid-template-columns:1fr 336px; gap:44px;
  align-items:start; padding:56px 0 72px;   /* separación real con el héroe */
}
.prosa p{margin-bottom:1.05rem; color:var(--tinta-70)}
.prosa h2{
  display:flex; align-items:center; gap:.6rem;
  font-size:1.4rem; margin:2.1rem 0 .9rem;
}
.prosa h2:first-child{margin-top:0}
.prosa h2 .ico{width:22px; height:22px; color:var(--c,var(--magenta))}

.lista-marcada li{
  position:relative; display:flex; gap:.7rem; align-items:flex-start;
  margin-bottom:.65rem; color:var(--tinta-70); font-size:.95rem;
}
.lista-marcada .ico{width:17px; height:17px; color:var(--c,var(--magenta)); margin-top:.22em}

.datos-clave{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  padding:1.35rem; box-shadow:var(--sombra);
  position:sticky; top:calc(var(--nav-h) + 18px);
}
.dato{display:flex; gap:.85rem; padding:.82rem 0; border-bottom:1px solid var(--linea)}
.dato:last-of-type{border-bottom:0}
.dato__icono{
  flex:0 0 36px; height:36px; border-radius:11px;
  background:color-mix(in srgb, var(--c,var(--morado)) 14%, #fff);
  color:var(--c,var(--morado));
  display:grid; place-items:center;
}
.dato__icono .ico{width:18px; height:18px}
.dato__etiqueta{font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--tinta-50); font-family:var(--display); font-weight:700}
.dato__valor{font-size:.94rem; font-weight:500; display:block; margin-top:.1rem}

/* ---------- Planeador ---------- */
.planeador{display:grid; grid-template-columns:330px 1fr; gap:32px; align-items:start}
.control{margin-bottom:1.4rem}
.control__titulo{display:flex; align-items:center; gap:.5rem; font-family:var(--display); font-weight:700; font-size:.95rem; margin-bottom:.2rem}
.control__titulo b{
  width:23px; height:23px; border-radius:50%; background:var(--tinta); color:#fff;
  display:grid; place-items:center; font-size:.72rem; font-weight:700; flex:0 0 23px;
}
.control__pista{font-size:.83rem; color:var(--tinta-50); margin:0 0 .7rem 2rem}
.control__campo{margin-left:2rem}

.resumen-ruta{
  display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center;
  background:var(--tinta); color:#fff; border-radius:var(--r-l);
  padding:1.3rem 1.5rem; margin-bottom:1.7rem;
}
.resumen-ruta div{min-width:92px}
.resumen-ruta b{display:flex; align-items:center; gap:.4rem; font-family:var(--display); font-size:1.4rem; font-weight:800; letter-spacing:-.02em}
.resumen-ruta b .ico{width:17px; height:17px; color:var(--verde)}
.resumen-ruta small{color:rgba(255,255,255,.6); font-size:.77rem}
.resumen-ruta__acciones{margin-left:auto}

.itinerario{position:relative}
.parada{display:grid; grid-template-columns:86px 1fr; gap:18px}
.parada__hora{font-family:var(--display); font-weight:700; font-size:1rem; text-align:right; padding-top:1.1rem; color:var(--tinta)}
.parada__hora small{display:block; font-weight:500; font-size:.73rem; color:var(--tinta-50)}
.parada__cuerpo{position:relative; padding-left:30px; padding-bottom:20px}
.parada__cuerpo::before{content:''; position:absolute; left:12px; top:1.9rem; bottom:-2px; width:2px; background:var(--linea)}
.parada:last-child .parada__cuerpo::before{display:none}
.parada__punto{
  position:absolute; left:0; top:1.05rem; width:26px; height:26px; border-radius:50%;
  background:var(--c,var(--magenta)); color:#fff; display:grid; place-items:center;
  border:3px solid var(--papel); box-shadow:0 0 0 1px var(--c,var(--magenta));
}
.parada__punto .ico{width:13px; height:13px}
.parada__tarjeta{
  display:block; background:#fff; border:1px solid var(--linea);
  border-radius:var(--r-m); padding:1rem 1.15rem;
  transition:box-shadow .18s, transform .18s;
}
.parada__tarjeta:hover{box-shadow:var(--sombra-alta); transform:translateX(3px)}
.parada__tarjeta h3{font-size:1.05rem; margin-bottom:.25rem}
.parada__tarjeta p{font-size:.88rem; color:var(--tinta-70)}
.parada__meta{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.7rem}
.traslado{
  display:inline-flex; align-items:center; gap:.45rem; margin:0 0 18px 30px;
  padding:.3rem .75rem; border-radius:999px; background:var(--bruma);
  font-size:.8rem; color:var(--tinta-50);
}
.traslado .ico{width:14px; height:14px}

/* ---------- Agenda ---------- */
.evento{
  display:grid; grid-template-columns:78px 1fr auto; gap:20px; align-items:center;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-m);
  padding:1.05rem 1.35rem; margin-bottom:11px;
  transition:transform .16s, box-shadow .16s;
}
.evento:hover{transform:translateX(4px); box-shadow:var(--sombra)}
.evento__fecha{
  text-align:center; border-radius:14px; padding:.5rem .2rem;
  background:color-mix(in srgb, var(--c) 12%, #fff);
}
.evento__dia{font-family:var(--display); font-size:1.7rem; font-weight:800; line-height:1; color:var(--c,var(--magenta))}
.evento__mes{font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; color:var(--tinta-50); font-weight:700}
.evento__info h3{font-size:1.08rem; margin-bottom:.25rem}
.evento__info p{font-size:.88rem; color:var(--tinta-70)}
.evento__meta{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.5rem}

/* ---------- Mesa xalapeña ---------- */
.mesa{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.mesa__pieza{
  margin:0; padding:var(--marco); background:var(--c);
  border-radius:var(--r-m); position:relative;
}
.mesa__lienzo{
  position:relative; width:100%; aspect-ratio:4/3;
  border-radius:calc(var(--r-m) - var(--marco)); overflow:hidden;
}
.mesa__lienzo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.mesa__pieza:hover img{transform:scale(1.05)}
.mesa__lienzo::after{content:''; position:absolute; inset:0; background:linear-gradient(transparent 46%, rgba(0,0,0,.68))}
.mesa__pieza figcaption{
  position:absolute; left:1rem; right:1rem; bottom:.85rem; z-index:2;
  color:#fff; font-family:var(--display); font-weight:700; font-size:.92rem;
  display:flex; align-items:center; gap:.4rem;
}

/* ---------- Bloque Chito ---------- */
.bloque-cta{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#3A1550 0%,#6B2C91 56%,#9B4FC0 130%);
  color:#fff; border-radius:var(--r-xl); padding:2.8rem 3rem;
  display:grid; grid-template-columns:1.15fr 210px .95fr; gap:2.2rem; align-items:center;
}
.bloque-cta > *:not(.flotantes){position:relative; z-index:2}
.bloque-cta h2{font-size:clamp(1.5rem,3vw,2.1rem); margin:.7rem 0 .7rem}
.bloque-cta p{color:rgba(255,255,255,.84); margin-bottom:1.4rem; max-width:42ch}
.bloque-cta .rotulo{color:var(--verde)}
.cta__chito{width:210px; animation:flotar 5s ease-in-out infinite alternate; filter:drop-shadow(0 20px 30px rgba(0,0,0,.35))}
.burbujas{display:flex; flex-direction:column; gap:.6rem}
.burbuja{padding:.8rem 1.05rem; border-radius:16px; font-size:.9rem; max-width:92%}
.burbuja--persona{background:rgba(255,255,255,.16); align-self:flex-end; border-bottom-right-radius:5px}
.burbuja--chito{background:#fff; color:var(--tinta); border-bottom-left-radius:5px; box-shadow:var(--sombra)}

/* ---------- Widget de Chito ---------- */
.chito-boton{
  position:fixed; right:22px; bottom:22px; z-index:80;
  display:flex; align-items:center; gap:.55rem;
  padding:.55rem 1.2rem .55rem .55rem; border-radius:999px;
  background:var(--tinta); color:#fff; box-shadow:var(--sombra-alta);
  font-family:var(--display); font-weight:600; font-size:.94rem;
  transition:transform .18s ease;
}
.chito-boton:hover{transform:translateY(-3px) scale(1.02)}
.chito-boton::after{
  content:''; position:absolute; right:14px; top:10px;
  width:9px; height:9px; border-radius:50%; background:var(--verde);
  border:2px solid var(--tinta);
}
.chito-ficha{
  width:42px; height:42px; flex:0 0 42px; border-radius:50%;
  background:linear-gradient(150deg,#F3ECF6,#DFD2E8); overflow:hidden;
  display:grid; place-items:center;
}
.chito-ficha svg{width:100%; height:100%}
.chito-ficha--chica{width:36px; height:36px; flex-basis:36px}

.chito-panel{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:min(392px,calc(100vw - 32px)); height:min(620px,calc(100vh - 44px));
  background:var(--papel); border-radius:var(--r-l);
  box-shadow:0 30px 70px -20px rgba(23,18,27,.5);
  display:none; flex-direction:column; overflow:hidden; border:1px solid var(--linea);
}
.chito-panel[data-abierto="true"]{display:flex; animation:subir .26s cubic-bezier(.2,.8,.3,1) both}
@keyframes subir{from{opacity:0; transform:translateY(18px) scale(.98)} to{opacity:1; transform:none}}

.chito-cabecera{
  display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem;
  background:linear-gradient(120deg,#43195C,#6B2C91); color:#fff;
}
.chito-cabecera h2{font-size:1rem; margin:0}
.chito-cabecera small{font-size:.74rem; color:rgba(255,255,255,.66); display:flex; align-items:center; gap:.35rem}
.chito-cabecera small::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--verde)}
.chito-cerrar{margin-left:auto; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; color:rgba(255,255,255,.75)}
.chito-cerrar:hover{background:rgba(255,255,255,.14); color:#fff}

.chito-hilo{flex:1; overflow-y:auto; padding:1.05rem; display:flex; flex-direction:column; gap:.7rem; background:var(--bruma)}
.msj{max-width:87%; padding:.78rem 1rem; border-radius:16px; font-size:.92rem; line-height:1.55; animation:aparecer .3s ease both}
@keyframes aparecer{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.msj--persona{align-self:flex-end; background:var(--tinta); color:#fff; border-bottom-right-radius:5px}
.msj--chito{align-self:flex-start; background:#fff; border:1px solid var(--linea); border-bottom-left-radius:5px}
.msj--chito strong{color:var(--morado)}
.msj a{color:var(--morado); font-weight:600; text-decoration:underline; text-underline-offset:2px}

.msj-tarjetas{display:flex; flex-direction:column; gap:.42rem; margin-top:.7rem}
.msj-tarjeta{
  display:flex; gap:.6rem; align-items:center; padding:.5rem .6rem;
  border:1px solid var(--linea); border-radius:12px; background:var(--papel);
  transition:border-color .15s, transform .15s;
}
.msj-tarjeta:hover{border-color:var(--c,var(--magenta)); transform:translateX(3px)}
.msj-tarjeta__ico{
  width:30px; height:30px; flex:0 0 30px; border-radius:9px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--c) 15%, #fff); color:var(--c);
}
.msj-tarjeta__ico .ico{width:16px; height:16px}
.msj-tarjeta b{display:block; font-size:.87rem; font-family:var(--display)}
.msj-tarjeta small{font-size:.75rem; color:var(--tinta-50)}

.escribiendo{display:flex; gap:4px; align-items:center; padding:.9rem 1rem}
.escribiendo i{width:7px; height:7px; border-radius:50%; background:var(--tinta-30); animation:latir 1.2s infinite}
.escribiendo i:nth-child(2){animation-delay:.18s}
.escribiendo i:nth-child(3){animation-delay:.36s}
@keyframes latir{0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-4px)}}

.chito-sugerencias{display:flex; gap:.38rem; padding:.7rem 1rem 0; flex-wrap:wrap; background:var(--papel)}
.chito-sugerencias button{
  padding:.4rem .78rem; border-radius:999px; border:1.5px solid var(--linea);
  font-size:.81rem; color:var(--tinta-70); background:var(--papel); transition:all .15s;
}
.chito-sugerencias button:hover{border-color:var(--morado); color:var(--morado)}

.chito-entrada{display:flex; gap:.5rem; padding:.85rem 1rem 1rem; background:var(--papel); align-items:center}
.chito-entrada input{flex:1; padding:.7rem 1rem; border:1.5px solid var(--linea); border-radius:999px; background:var(--bruma); font-size:.92rem}
.chito-entrada input:focus{outline:none; border-color:var(--morado); background:#fff}
.chito-entrada button{width:42px; height:42px; flex:0 0 42px; border-radius:50%; background:var(--morado); color:#fff; display:grid; place-items:center; transition:transform .15s}
.chito-entrada button:hover{transform:scale(1.06)}
.chito-aviso{font-size:.69rem; color:var(--tinta-50); text-align:center; padding:0 1rem .8rem; background:var(--papel)}

/* ---------- Pie ---------- */
.pie{background:var(--tinta); color:rgba(255,255,255,.72); padding:56px 0 0; position:relative; overflow:hidden}
.pie__rejilla{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:40px}
.pie h4{color:#fff; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.9rem; font-family:var(--display)}
.pie li{margin-bottom:.5rem; font-size:.9rem}
.pie li a{display:inline-flex; align-items:center; gap:.4rem}
.pie a:hover{color:#fff}
.pie__marca{font-family:var(--display); font-weight:800; font-size:1.6rem; color:#fff; letter-spacing:-.03em}
.pie__nota{font-size:.89rem; max-width:36ch; margin-top:.6rem}
.pie__legal{
  border-top:1px solid rgba(255,255,255,.12); padding:18px 0;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.81rem; color:rgba(255,255,255,.5);
}

.aviso-maqueta{
  background:repeating-linear-gradient(135deg,#17121B,#17121B 12px,#211A27 12px,#211A27 24px);
  color:#fff; font-size:.81rem; text-align:center; padding:.55rem 1rem;
}
.aviso-maqueta b{color:var(--verde)}

/* ---------- Responsivo ---------- */
@media (max-width:1040px){
  .vocaciones{grid-template-columns:repeat(3,1fr)}
  .ficha-cuerpo{grid-template-columns:1fr; gap:30px}
  .datos-clave{position:static}
  .heroe__chito{width:200px; flex-basis:200px}
  .bloque-cta{grid-template-columns:1fr 190px; gap:1.6rem}
  .bloque-cta .burbujas{grid-column:1/-1}
}
@media (max-width:900px){
  .menu{
    position:fixed; inset:var(--nav-h) 0 auto 0; background:var(--papel);
    flex-direction:column; align-items:stretch; padding:1rem 1.2rem 1.4rem;
    border-bottom:1px solid var(--linea); display:none; box-shadow:var(--sombra-alta);
  }
  .menu[data-abierto="true"]{display:flex}
  .menu a{padding:.8rem .6rem; font-size:1.05rem}
  .hamburguesa{display:flex}
  .dos-columnas,.planeador{grid-template-columns:1fr}
  .panel-filtros{position:static}
  .heroe__rejilla{grid-template-columns:1fr; padding-bottom:70px}
  .heroe__chito{display:none}
  .bloque-cta{grid-template-columns:1fr; padding:2.2rem 1.6rem; text-align:left}
  .cta__chito{display:none}
  .tira-datos__fila{grid-template-columns:repeat(2,1fr)}
  .pie__rejilla{grid-template-columns:1fr 1fr}
  .mesa{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .seccion{padding:46px 0}
  .contenedor{padding:0 18px}
  .vocaciones{grid-template-columns:1fr 1fr}
  .rejilla{grid-template-columns:1fr}
  .evento{grid-template-columns:62px 1fr; gap:14px}
  .parada{grid-template-columns:60px 1fr; gap:10px}
  .parada__hora{font-size:.9rem}
  .resumen-ruta{gap:1rem; padding:1.1rem}
  .resumen-ruta__acciones{margin-left:0; width:100%}
  .pie__rejilla{grid-template-columns:1fr}
  .chito-boton > span:not(.chito-ficha){display:none}
  .chito-boton{padding:.45rem; border-radius:50%}
}

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


/* ==========================================================================
   AJUSTES DE LA VERSIÓN 4
   Alineación con la dirección visual aprobada: morado primario,
   interfaz más densa y de producto, tarjetas con valoración y favorito.
   ========================================================================== */

/* Barra superior con más entradas */
.barra__fila{gap:1rem}
.menu a{padding:.46rem .62rem; font-size:.9rem; gap:.28rem}
.menu a .ico{width:.85em; height:.85em}
.menu a .caret{opacity:.45; width:.8em; height:.8em}
.barra__buscar{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  color:var(--tinta-70); transition:background .15s;
}
.barra__buscar:hover{background:var(--bruma)}
.btn-chito-barra{
  display:inline-flex; align-items:center; gap:.42rem;
  background:var(--morado); color:#fff; border-radius:999px;
  padding:.44rem 1rem .44rem .44rem;
  font-family:var(--display); font-weight:600; font-size:.83rem;
  transition:background .15s, transform .15s;
}
.btn-chito-barra:hover{background:#572276; transform:translateY(-1px)}
.btn-chito-barra .chito-ficha{width:26px; height:26px; flex-basis:26px}

/* ---------- Héroe con fotografía ---------- */
.heroe--foto{padding:0; background:var(--morado)}
.heroe__marco{
  position:relative; overflow:hidden; border-radius:0 0 var(--r-xl) var(--r-xl);
  min-height:clamp(360px,42vw,470px); display:flex; align-items:center;
}
.heroe__fondo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.heroe__marco::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(96deg, rgba(48,17,68,.94) 0%, rgba(58,21,80,.78) 46%, rgba(70,28,96,.36) 78%),
    linear-gradient(0deg, rgba(38,12,54,.6), transparent 60%);
}
.heroe__marco > .contenedor{position:relative; z-index:2; width:100%}
.heroe__rejilla{
  display:grid; grid-template-columns:1fr 300px; gap:2rem; align-items:center;
  padding:52px 0 76px;
}
.heroe--foto h1{
  font-size:clamp(2rem,4vw,3.1rem); font-weight:800; letter-spacing:-.035em;
  line-height:1.06; margin:0 0 .9rem; color:#fff;
}
.heroe--foto h1 span{display:block; font-weight:500; color:rgba(255,255,255,.9)}
.heroe--foto .heroe__entrada{
  color:rgba(255,255,255,.82); font-size:1.02rem; max-width:46ch; margin-bottom:1.7rem;
}

/* Buscador del héroe */
.busca-heroe{
  display:flex; align-items:center; gap:.4rem;
  background:#fff; border-radius:999px; padding:.42rem .42rem .42rem 1.1rem;
  box-shadow:0 16px 40px -16px rgba(30,8,44,.6); max-width:560px;
}
.busca-heroe .ico{color:var(--tinta-50); flex:0 0 auto}
.busca-heroe input{flex:1; border:0; background:none; padding:.6rem .3rem; font-size:.95rem; min-width:0}
.busca-heroe input:focus{outline:none}
.busca-heroe__sep{width:1px; height:26px; background:var(--linea); flex:0 0 1px}
.busca-heroe__fecha{
  display:inline-flex; align-items:center; gap:.35rem; padding:.5rem .7rem;
  font-size:.88rem; color:var(--tinta-70); white-space:nowrap;
}
.busca-heroe .btn{padding:.62rem 1.3rem; font-size:.9rem}

.heroe__chito{width:300px; flex:0 0 300px}

/* ---------- Accesos rápidos ---------- */
.accesos-marco{margin-top:-46px; position:relative; z-index:20}
.accesos{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  box-shadow:0 14px 40px -22px rgba(30,8,44,.42);
  display:grid; grid-template-columns:repeat(8,1fr); gap:.4rem; padding:1.1rem .9rem;
}
.acceso{
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding:.6rem .3rem; border-radius:var(--r-m); text-align:center;
  transition:background .15s, transform .15s;
}
.acceso:hover{background:var(--bruma); transform:translateY(-2px)}
.acceso__circulo{
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  background:var(--c); color:#fff; box-shadow:0 6px 14px -6px var(--c);
}
.acceso__circulo .ico{width:23px; height:23px}
.acceso span{font-size:.76rem; font-weight:600; color:var(--tinta-70); line-height:1.25}

/* ---------- Clima ---------- */
.clima{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  padding:1.3rem 1.35rem; box-shadow:var(--sombra);
}
.clima__hoy{font-size:.78rem; color:var(--tinta-50); font-weight:600}
.clima__grado{
  font-family:var(--display); font-size:3.1rem; font-weight:800;
  letter-spacing:-.04em; line-height:1; margin:.35rem 0 .2rem; color:var(--morado);
}
.clima__estado{display:flex; align-items:center; gap:.4rem; font-size:.92rem; color:var(--tinta-70)}
.clima__rango{font-size:.82rem; color:var(--tinta-50); margin-top:.5rem}
.clima__enlace{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:1rem;
  font-size:.83rem; font-weight:700; color:var(--morado); font-family:var(--display);
}
.clima__nota{font-size:.68rem; color:var(--tinta-30); margin-top:.7rem}

/* ---------- Pestañas ---------- */
.pestanas{display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.3rem}
.pestana{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.44rem 1rem; border-radius:999px; border:1.5px solid var(--linea);
  background:#fff; font-family:var(--display); font-weight:600; font-size:.86rem;
  color:var(--tinta-70); transition:all .15s;
}
.pestana:hover{border-color:var(--morado-2); color:var(--morado)}
.pestana[aria-selected="true"]{background:var(--morado); border-color:var(--morado); color:#fff}
.pestana[aria-selected="true"] .ico{color:#fff}

/* ---------- Tarjetas compactas ---------- */
.rejilla--densa{grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:18px}
.tarjeta{border-radius:var(--r-m)}
.tarjeta__cuerpo{padding:.85rem .95rem 1rem}
.tarjeta__cuerpo h3{font-size:1rem; line-height:1.25}
.tarjeta__resumen{font-size:.83rem; line-height:1.45}
.rejilla--densa .tarjeta__resumen{display:none}
.tarjeta__pie{margin-top:.7rem; padding-top:.65rem; gap:.4rem}
.gema{font-size:.72rem; padding:.2rem .52rem}

.favorito{
  position:absolute; right:9px; top:9px; z-index:3;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.94); color:var(--tinta-50);
  display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.16);
  transition:transform .15s, color .15s;
}
.favorito:hover{transform:scale(1.1); color:var(--magenta)}
.favorito[aria-pressed="true"]{color:var(--magenta)}
.favorito[aria-pressed="true"] .ico{fill:var(--magenta)}
.favorito .ico{width:15px; height:15px}

.valoracion{display:inline-flex; align-items:center; gap:.12rem; font-size:.78rem; color:var(--tinta-70)}
.valoracion .estrella{display:inline-grid; place-items:center; color:var(--tinta-30)}
.valoracion .estrella .ico{width:12px; height:12px}
.valoracion .estrella--activa{color:#F5A623}
.valoracion .estrella--activa .ico{fill:#F5A623}
.valoracion b{margin-left:.3rem; font-weight:700; font-family:var(--display)}
.valoracion small{color:var(--tinta-50)}

.precio-desde{
  margin-left:auto; text-align:right; font-family:var(--display); line-height:1.1;
}
.precio-desde small{display:block; font-size:.66rem; color:var(--tinta-50); font-weight:600}
.precio-desde b{font-size:1.02rem; color:var(--morado)}

.tarjeta__datos{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  margin-top:.5rem; font-size:.78rem; color:var(--tinta-50);
}

/* ---------- Filtros tipo panel de producto ---------- */
.panel-filtros{border-radius:var(--r-m); padding:1.15rem 1.2rem}
.casillas{display:flex; flex-direction:column; gap:.1rem}
.casilla{
  display:flex; align-items:center; gap:.6rem; padding:.4rem .3rem;
  border-radius:8px; font-size:.88rem; color:var(--tinta-70); cursor:pointer;
  transition:background .13s;
}
.casilla:hover{background:var(--bruma)}
.casilla input{
  appearance:none; width:17px; height:17px; flex:0 0 17px;
  border:1.6px solid var(--tinta-30); border-radius:5px; background:#fff;
  display:grid; place-items:center; transition:all .15s;
}
.casilla input:checked{background:var(--morado); border-color:var(--morado)}
.casilla input:checked::after{
  content:''; width:9px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px);
}
.casilla .punto{width:9px; height:9px; border-radius:50%; background:var(--c); flex:0 0 9px}
.casilla__cuenta{margin-left:auto; font-size:.75rem; color:var(--tinta-30)}

.precios{display:flex; gap:.4rem}
.precios button{
  flex:1; padding:.44rem 0; border:1.5px solid var(--linea); border-radius:8px;
  font-family:var(--display); font-weight:700; font-size:.82rem; color:var(--tinta-50);
  transition:all .15s;
}
.precios button:hover{border-color:var(--morado-2)}
.precios button[aria-pressed="true"]{background:var(--morado); border-color:var(--morado); color:#fff}

/* ---------- Aviso de alcance ---------- */
.nota-alcance{
  display:flex; gap:.7rem; align-items:flex-start;
  background:var(--morado-3); border:1px solid #DDCDE9; border-radius:var(--r-m);
  padding:.9rem 1.1rem; font-size:.85rem; color:var(--tinta-70); margin-top:1.4rem;
}
.nota-alcance .ico{color:var(--morado); flex:0 0 auto; margin-top:.15em}

@media (max-width:1040px){
  .accesos{grid-template-columns:repeat(4,1fr)}
  .heroe__rejilla{grid-template-columns:1fr 220px}
  .heroe__chito{width:220px; flex-basis:220px}
}
@media (max-width:900px){
  .heroe__rejilla{grid-template-columns:1fr; padding:44px 0 60px}
  .heroe--foto .heroe__chito{display:none}
  .accesos-marco{margin-top:-30px}
}
@media (max-width:620px){
  .accesos{grid-template-columns:repeat(3,1fr); padding:.9rem .5rem}
  .acceso__circulo{width:42px; height:42px}
  .acceso span{font-size:.7rem}
  .busca-heroe{flex-wrap:wrap; border-radius:var(--r-m); padding:.7rem}
  .busca-heroe__sep,.busca-heroe__fecha{display:none}
  .busca-heroe .btn{width:100%; justify-content:center}
  .rejilla--densa{grid-template-columns:1fr 1fr}
  .rejilla--densa .tarjeta__cuerpo h3{font-size:.9rem}
}

.tarjeta__categoria{
  display:block; font-size:.75rem; color:var(--tinta-50);
  font-weight:600; margin-bottom:.4rem;
}
.rejilla--densa .tarjeta__pie{align-items:center}

.col-clima{display:grid; grid-template-columns:250px 1fr; gap:32px; align-items:start}
.cabeza-fila{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap}
@media (max-width:900px){ .col-clima{grid-template-columns:1fr} }

/* Barra: caben siete entradas más los controles sin apretarse */
.barra__fila{gap:.7rem}
.menu{gap:.05rem}
.menu a{padding:.42rem .5rem; font-size:.845rem; white-space:nowrap}
.btn-chito-barra{white-space:nowrap; font-size:.8rem; padding:.4rem .85rem .4rem .4rem}
.btn-chito-barra .chito-ficha{width:24px; height:24px; flex-basis:24px}
.idioma button{padding:.3rem .55rem; font-size:.72rem}
.barra__buscar{width:34px; height:34px}
@media (max-width:1240px){
  .barra__buscar,.idioma{display:none}
}

/* Cuatro tarjetas por fila, como en la dirección aprobada */
.rejilla--densa{grid-template-columns:repeat(4,1fr)}
.rejilla--densa .tarjeta__cuerpo h3{font-size:.95rem}
.rejilla--densa .tarjeta__pie{flex-wrap:nowrap; align-items:flex-end}
.rejilla--densa .precio-desde b{font-size:.95rem}
@media (max-width:1040px){ .rejilla--densa{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .rejilla--densa{grid-template-columns:repeat(2,1fr)} }

/* El sello no debe chocar con el botón de favorito */
.sello-sin-foto{right:auto; left:10px; top:10px}

/* ==========================================================================
   ILUSTRACIONES OFICIALES (v5)
   El personaje y el logotipo dejan de ser SVG dibujados y pasan a ser
   los archivos entregados por el cliente.
   ========================================================================== */

/* Logotipo */
.marca{margin-right:auto}
.marca__logo{width:auto; height:52px; display:block}
.pie__logo{width:190px; height:auto; filter:brightness(0) invert(1); opacity:.95}

/* Ilustraciones del personaje */
.chito-arte{width:100%; height:auto; display:block}
.chito-ficha{
  background:none; border-radius:0; overflow:visible;
  display:grid; place-items:center;
}
.chito-ficha .chito-arte{width:100%; height:100%; object-fit:contain}
.btn-chito-barra .chito-ficha{width:30px; height:30px; flex-basis:30px}
.chito-boton .chito-ficha{width:46px; height:46px; flex-basis:46px}
.chito-cabecera .chito-ficha{width:42px; height:42px; flex-basis:42px}

.heroe__chito .chito-arte{
  filter:drop-shadow(0 22px 30px rgba(20,4,32,.5));
  animation:flotar 5.5s ease-in-out infinite alternate;
}
.cta__chito .chito-arte{
  filter:drop-shadow(0 18px 26px rgba(20,4,32,.42));
  animation:flotar 5s ease-in-out infinite alternate;
}

/* Estado de espera: Chito pensando */
.escribiendo{gap:.6rem; padding:.6rem .9rem; align-items:center}
.escribiendo__chito{width:42px; height:auto; flex:0 0 42px}
.escribiendo__puntos{display:flex; gap:4px; align-items:center}

/* Juanote, el segundo personaje */
.juanote{width:100%; height:auto; display:block}
.bloque-juanote{
  display:grid; grid-template-columns:150px 1fr; gap:1.6rem; align-items:center;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r-l);
  padding:1.5rem 1.8rem; box-shadow:var(--sombra);
}
.bloque-juanote h3{font-size:1.25rem; margin-bottom:.45rem}
.bloque-juanote p{font-size:.94rem; color:var(--tinta-70); margin-bottom:1rem}
@media (max-width:620px){
  .bloque-juanote{grid-template-columns:1fr; text-align:center}
  .bloque-juanote img{max-width:130px; margin:0 auto}
  .marca__logo{height:36px}
}