/* Base */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--tt-fuente);
  color: var(--tt-gris);
  background: var(--tt-blanco);
}

/* Contenedor central (confirma el ancho en Figma) */
.tt-contenedor {
  width: calc(1520 * var(--tt-px));
  margin-inline: auto;
}

/* Header */
.tt-header {
  background: var(--tt-blanco);
  padding-block: calc(12 * var(--tt-px));
}

.tt-header__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tt-logo {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--tt-px));
  text-decoration: none;
}

.tt-logo img {
  display: block;
  height: calc(56 * var(--tt-px));
  width: auto;
}

.tt-logo__texto {
  color: var(--tt-petroleo);
  font-size: calc(28 * var(--tt-px));
  font-weight: 700;
  line-height: 1;
}

.tt-menu {
  display: flex;
  gap: calc(40 * var(--tt-px));
}

.tt-menu a {
  color: var(--tt-petroleo);
  font-size: calc(16 * var(--tt-px));
  font-weight: 500;
  text-decoration: none;
}

.tt-menu a:hover {
  color: var(--tt-naranja);
}

.tt-boton-borde {
  color: var(--tt-petroleo);
  border: calc(1 * var(--tt-px)) solid var(--tt-petroleo);
  border-radius: calc(8 * var(--tt-px));
  padding: calc(10 * var(--tt-px)) calc(24 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  font-weight: 500;
  text-decoration: none;
}

/* Franja decorativa */
.tt-franja {
  line-height: 0; /* evita un hueco blanco debajo de la imagen */
}

.tt-franja img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hero */
.tt-hero {
  position: relative;
  height: calc(640 * var(--tt-px));
  display: flex;
  align-items: center;
  color: var(--tt-blanco);
  overflow: hidden;
}

/* Diapositivas apiladas: solo la activa es visible */
.tt-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.tt-hero__slide.is-activo {
  opacity: 1;
}

/* Colores temporales (después serán url('../img/banner-1.jpg'), etc.) */
.tt-gris-claro  { background-color: #d1d5db; }
.tt-gris-oscuro { background-color: #6b7280; }

/* Banner con foto: velo oscuro suave para que el texto blanco se lea bien */
.tt-hero__slide--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.45));
}

.tt-hero__contenido {
  position: relative; /* para quedar sobre las diapositivas */
  z-index: 1;
}

/* Puntos indicadores */
.tt-hero__dots {
  position: absolute;
  bottom: calc(32 * var(--tt-px));
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: calc(16 * var(--tt-px));
}

.tt-hero__dot {
  width: calc(14 * var(--tt-px));
  height: calc(14 * var(--tt-px));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tt-blanco);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}

.tt-hero__dot.is-activo {
  opacity: 1;
  transform: scale(1.3);
}

.tt-hero__titulo {
  margin: 0;
  line-height: 1;
}

.tt-hero__titulo-pequeno {
  display: block;
  font-size: calc(56 * var(--tt-px));
  font-weight: 600;
}

.tt-hero__titulo-grande {
  display: block;
  font-size: calc(112 * var(--tt-px));
  font-weight: 800;
}

.tt-hero__texto {
  margin: calc(24 * var(--tt-px)) 0;
  max-width: calc(700 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  line-height: 1.5;
}

.tt-buscador {
  display: flex;
  align-items: center;
  width: calc(620 * var(--tt-px));
  background: var(--tt-blanco);
  border-radius: calc(8 * var(--tt-px));
  padding: calc(4 * var(--tt-px));
}

.tt-buscador input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--tt-fuente);
  font-size: calc(16 * var(--tt-px));
  color: var(--tt-gris);
  padding: calc(14 * var(--tt-px)) calc(16 * var(--tt-px));
}

.tt-buscador button {
  border: 0;
  background: transparent;
  color: var(--tt-gris);
  width: calc(44 * var(--tt-px));
  height: calc(44 * var(--tt-px));
  padding: calc(10 * var(--tt-px));
  cursor: pointer;
}

/* Imagen temporal (placeholder gris) */
.tt-img-gris {
  background-color: #9ca3af;
  display: block;
  width: 100%;
}

/* Título de sección (reutilizable) */
.tt-titulo-seccion {
  margin: 0 0 calc(24 * var(--tt-px));
  line-height: 1.1;
}

.tt-titulo-seccion__pequeno {
  display: block;
  color: var(--tt-turquesa);
  font-size: calc(40 * var(--tt-px));
  font-weight: 600;
}

.tt-titulo-seccion__grande {
  display: block;
  color: var(--tt-petroleo);
  font-size: calc(72 * var(--tt-px));
  font-weight: 800;
}

/* Botón naranja (reutilizable) */
.tt-boton {
  display: inline-block;
  background: var(--tt-naranja);
  color: var(--tt-blanco);
  border-radius: calc(8 * var(--tt-px));
  padding: calc(14 * var(--tt-px)) calc(48 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  font-weight: 600;
  text-decoration: none;
}

/* Historia */
.tt-historia {
  padding-block: calc(100 * var(--tt-px));
}

.tt-historia__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(80 * var(--tt-px));
}

.tt-historia__texto {
  width: calc(720 * var(--tt-px));
}

.tt-historia__texto p {
  margin: 0 0 calc(20 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  line-height: 1.6;
}

.tt-historia__texto .tt-boton {
  margin-top: calc(10 * var(--tt-px));
}

.tt-historia__imagen {
  width: calc(720 * var(--tt-px));
  height: calc(560 * var(--tt-px));
  border-radius: calc(24 * var(--tt-px));
  display: block;
  object-fit: cover;
}


/* Categorías */
.tt-titulo-seccion--simple {
  color: var(--tt-turquesa);
  font-size: calc(48 * var(--tt-px));
  font-weight: 700;
  margin-bottom: calc(8 * var(--tt-px));
}

.tt-subtitulo {
  margin: 0 0 calc(32 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
}

.tt-centrado {
  text-align: center;
  margin-top: calc(40 * var(--tt-px));
}

/* Categorías */
.tt-categorias {
  padding-block: calc(80 * var(--tt-px));
}

.tt-categorias__rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(24 * var(--tt-px));
}

.tt-tarjeta-cat {
  background: var(--tt-blanco);
  border-radius: calc(12 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(16 * var(--tt-px)) rgb(0 0 0 / 12%);
  overflow: hidden;
}

.tt-tarjeta-cat__imagen {
  display: block;
  width: 100%;
  height: calc(200 * var(--tt-px));
  object-fit: cover;
}

.tt-tarjeta-cat__cuerpo {
  padding: calc(16 * var(--tt-px)) calc(20 * var(--tt-px)) calc(20 * var(--tt-px));
}

.tt-tarjeta-cat__cuerpo h3 {
  margin: 0 0 calc(6 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(16 * var(--tt-px));
  font-weight: 600;
}

.tt-tarjeta-cat__cuerpo p {
  margin: 0 0 calc(14 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
  line-height: 1.4;
}

.tt-tarjeta-cat__cuerpo a {
  color: var(--tt-naranja);
  font-size: calc(14 * var(--tt-px));
  font-weight: 600;
  text-decoration: none;
}

/* Íconos */
.tt-menu i,
.tt-boton-borde i,
.tt-boton i,
.tt-tarjeta-cat__cuerpo i {
  font-size: 0.9em; /* un poco más pequeño que el texto */
}

.tt-menu a,
.tt-boton-borde {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--tt-px));
}

.tt-boton {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--tt-px));
}

.tt-tarjeta-cat__cuerpo a {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--tt-px));
}

.tt-buscador button {
  font-size: calc(18 * var(--tt-px));
}

/* Revista */
.tt-revista {
  padding-block: calc(80 * var(--tt-px));
}

.tt-revista__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(80 * var(--tt-px));
}

.tt-revista__texto {
  width: calc(640 * var(--tt-px));
}

.tt-revista__texto p {
  margin: 0 0 calc(24 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  line-height: 1.6;
}

.tt-revista__imagen {
  width: calc(720 * var(--tt-px));
  height: calc(480 * var(--tt-px));
  border-radius: calc(12 * var(--tt-px));
  display: block;
  object-fit: contain;
}

/* Lugares populares */
.tt-lugares {
  padding-block: calc(80 * var(--tt-px));
}

.tt-carrusel {
  position: relative;
}

.tt-carrusel__pista {
  display: flex;
  gap: calc(24 * var(--tt-px));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: calc(8 * var(--tt-px)) calc(24 * var(--tt-px)); /* espacio para la sombra */
  scrollbar-width: none; /* oculta la barra en Firefox */
}

.tt-carrusel__pista::-webkit-scrollbar {
  display: none; /* oculta la barra en Chrome y Edge */
}

.tt-tarjeta-lugar {
  flex: 0 0 calc(285 * var(--tt-px));
  scroll-snap-align: start;
  background: var(--tt-blanco);
  border-radius: calc(12 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(16 * var(--tt-px)) rgb(0 0 0 / 12%);
  overflow: hidden;
}

.tt-tarjeta-lugar__imagen {
  position: relative;
  height: calc(290 * var(--tt-px));
}

.tt-tarjeta-lugar__corazon {
  position: absolute;
  top: calc(12 * var(--tt-px));
  right: calc(12 * var(--tt-px));
  width: calc(32 * var(--tt-px));
  height: calc(32 * var(--tt-px));
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 85%);
  color: var(--tt-petroleo);
  font-size: calc(16 * var(--tt-px));
  cursor: pointer;
}

.tt-tarjeta-lugar__cuerpo {
  padding: calc(16 * var(--tt-px)) calc(20 * var(--tt-px)) calc(20 * var(--tt-px));
}

.tt-tarjeta-lugar__cuerpo h3 {
  margin: 0;
  color: var(--tt-petroleo);
  font-size: calc(16 * var(--tt-px));
  font-weight: 600;
}

.tt-tarjeta-lugar__nota {
  margin: calc(4 * var(--tt-px)) 0 calc(12 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(14 * var(--tt-px));
  font-weight: 600;
}

.tt-tarjeta-lugar__nota i {
  color: var(--tt-naranja);
}

.tt-tarjeta-lugar__cuerpo ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tt-tarjeta-lugar__cuerpo li {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--tt-px));
  margin-bottom: calc(6 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
}

.tt-tarjeta-lugar__cuerpo li i {
  width: calc(16 * var(--tt-px));
  text-align: center;
  font-size: 0.9em;
}

/* Flecha del carrusel */
.tt-carrusel__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(48 * var(--tt-px));
  height: calc(48 * var(--tt-px));
  border: 0;
  border-radius: 50%;
  background: var(--tt-blanco);
  color: var(--tt-petroleo);
  font-size: calc(18 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(16 * var(--tt-px)) rgb(0 0 0 / 20%);
  cursor: pointer;
  transition: opacity 0.2s;
}

.tt-carrusel__flecha--izq {
  left: calc(-24 * var(--tt-px));
}

.tt-carrusel__flecha--der {
  right: calc(-24 * var(--tt-px));
}

/* Flecha oculta cuando no hay más contenido en esa dirección */
.tt-carrusel__flecha.is-oculta {
  opacity: 0;
  pointer-events: none;
}

/* Eventos */
.tt-eventos {
  padding-block: calc(80 * var(--tt-px));
}

.tt-eventos__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(24 * var(--tt-px));
}

.tt-eventos__lado {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--tt-px));
}

.tt-evento {
  display: flex;
  align-items: stretch;
  background: var(--tt-blanco);
  border-radius: calc(12 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(16 * var(--tt-px)) rgb(0 0 0 / 12%);
  overflow: hidden;
}

.tt-evento__cuerpo {
  flex: 1;
  padding: calc(24 * var(--tt-px));
}

.tt-evento__imagen {
  flex: 0 0 45%;
  width: auto;
}

/* Insignia de fecha */
.tt-evento__fecha {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin: calc(24 * var(--tt-px)) 0 0 calc(24 * var(--tt-px));
  padding: calc(6 * var(--tt-px)) calc(12 * var(--tt-px));
  border: calc(2 * var(--tt-px)) solid var(--tt-petroleo);
  border-radius: calc(8 * var(--tt-px));
  color: var(--tt-petroleo);
  line-height: 1.1;
}

.tt-evento__fecha strong {
  font-size: calc(24 * var(--tt-px));
  font-weight: 700;
}

.tt-evento__fecha span {
  font-size: calc(14 * var(--tt-px));
  font-weight: 600;
}

/* En el destacado la fecha va dentro del cuerpo: sin margen extra */
.tt-evento--destacado .tt-evento__fecha {
  margin: 0 0 calc(16 * var(--tt-px));
}

.tt-evento__cuerpo h3 {
  margin: 0 0 calc(8 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(18 * var(--tt-px));
  font-weight: 600;
}

.tt-evento__cuerpo p {
  margin: 0 0 calc(12 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
  line-height: 1.5;
}

.tt-evento__cuerpo ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tt-evento__cuerpo li {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--tt-px));
  margin-bottom: calc(6 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
}

.tt-evento__cuerpo li i {
  width: calc(16 * var(--tt-px));
  text-align: center;
  font-size: 0.9em;
}

/* Banner negocio */
.tt-negocio {
  padding-block: calc(80 * var(--tt-px));
}

.tt-negocio__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(40 * var(--tt-px));
  background: #06b4cd; /* mismo tono que la imagen */
  border-radius: calc(12 * var(--tt-px));
  padding: calc(40 * var(--tt-px)) calc(48 * var(--tt-px));
  color: var(--tt-blanco);
}

.tt-negocio__texto {
  width: calc(700 * var(--tt-px));
}

.tt-negocio__texto h2 {
  margin: 0 0 calc(16 * var(--tt-px));
  font-size: calc(40 * var(--tt-px));
  font-weight: 700;
  line-height: 1.15;
}

.tt-negocio__texto p {
  margin: 0 0 calc(24 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  line-height: 1.5;
}

.tt-negocio__imagen {
  width: calc(520 * var(--tt-px));
  height: calc(240 * var(--tt-px));
  display: block;
  object-fit: cover;
  border-radius: calc(12 * var(--tt-px));
}

/* Footer */
.tt-footer {
  padding-top: calc(60 * var(--tt-px));
}

.tt-footer__rejilla {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(60 * var(--tt-px));
  padding-bottom: calc(60 * var(--tt-px));
  border-bottom: calc(1 * var(--tt-px)) solid var(--tt-gris);
}

.tt-footer__logo img {
  display: block;
  width: calc(200 * var(--tt-px));
  height: auto;
}

.tt-footer__columna h4 {
  margin: 0 0 calc(20 * var(--tt-px));
  color: var(--tt-naranja);
  font-size: calc(16 * var(--tt-px));
  font-weight: 600;
}

.tt-footer__columna ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tt-footer__columna li {
  margin-bottom: calc(12 * var(--tt-px));
}

.tt-footer__columna a {
  color: var(--tt-gris);
  font-size: calc(14 * var(--tt-px));
  text-decoration: none;
}

.tt-footer__columna a:hover {
  color: var(--tt-naranja);
}

.tt-footer__doble {
  display: flex;
  gap: calc(60 * var(--tt-px));
}

.tt-footer__derechos {
  margin: 0;
  padding-block: calc(32 * var(--tt-px));
  text-align: center;
  font-size: calc(12 * var(--tt-px));
}

/* Menú: botón Categorías */
.tt-menu__boton {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--tt-px));
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--tt-fuente);
  font-size: calc(16 * var(--tt-px));
  font-weight: 500;
  color: var(--tt-petroleo);
}

.tt-menu__boton:hover {
  color: var(--tt-naranja);
}

.tt-menu__boton i {
  font-size: 0.9em;
}

.tt-menu__flecha {
  transition: transform 0.2s;
}

.tt-menu__boton[aria-expanded="true"] .tt-menu__flecha {
  transform: rotate(180deg);
}

/* Panel desplegable */
.tt-header {
  position: relative;
  z-index: 100; /* para que el panel quede sobre la franja y el hero */
}

.tt-mega {
  display: none;
  position: absolute;
  top: calc(100% - 11 * var(--tt-px));
  left: calc(416 * var(--tt-px));
  width: calc(1029 * var(--tt-px));
  padding: calc(40 * var(--tt-px)) calc(44 * var(--tt-px));
  background: var(--tt-blanco);
  border-radius: calc(24 * var(--tt-px));
  box-shadow: 0 calc(8 * var(--tt-px)) calc(32 * var(--tt-px)) rgb(0 0 0 / 18%);
}

.tt-mega.is-abierto {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, auto); /* 7 a la izquierda, el resto a la derecha */
  column-gap: calc(48 * var(--tt-px));
  row-gap: calc(24 * var(--tt-px));
}

.tt-mega__item {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--tt-px));
  text-decoration: none;
}

.tt-mega__icono {
  flex: 0 0 calc(52 * var(--tt-px));
  height: calc(52 * var(--tt-px));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tt-petroleo-15);
  border-radius: calc(12 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(22 * var(--tt-px));
}

.tt-mega__texto {
  color: var(--tt-gris);
  font-size: calc(16 * var(--tt-px));
  line-height: 1.5;
}

.tt-mega__texto strong {
  display: block;
  color: var(--tt-petroleo);
  font-weight: 600;
}

.tt-mega__item:hover strong {
  color: var(--tt-naranja);
}

/* Botón de perfil (es un <button>, no un enlace) */
button.tt-boton-borde {
  background: transparent;
  font-family: var(--tt-fuente);
  cursor: pointer;
}

button.tt-boton-borde:hover {
  color: var(--tt-naranja);
  border-color: var(--tt-naranja);
}

/* Panel de perfil */
.tt-perfil {
  display: none;
  position: absolute;
  top: calc(100% - 11 * var(--tt-px));
  right: calc(204 * var(--tt-px)); /* alinea con el borde derecho del contenedor */
  width: calc(374 * var(--tt-px));
  padding: calc(32 * var(--tt-px)) calc(34 * var(--tt-px));
  background: var(--tt-blanco);
  border-radius: calc(24 * var(--tt-px));
  box-shadow: 0 calc(8 * var(--tt-px)) calc(32 * var(--tt-px)) rgb(0 0 0 / 18%);
}

.tt-perfil.is-abierto {
  display: block;
}

.tt-perfil__cabecera {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--tt-px));
  margin-bottom: calc(24 * var(--tt-px));
}

.tt-perfil__avatar {
  flex: 0 0 calc(48 * var(--tt-px));
  height: calc(48 * var(--tt-px));
  border-radius: 50%;
  background: var(--tt-petroleo); /* después será la foto del usuario */
}

.tt-perfil__datos {
  color: var(--tt-gris);
  font-size: calc(16 * var(--tt-px));
  line-height: 1.5;
}

.tt-perfil__datos strong {
  display: block;
  color: var(--tt-petroleo);
  font-weight: 600;
}

.tt-perfil__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tt-perfil__lista li + li {
  margin-top: calc(8 * var(--tt-px));
}

.tt-perfil__lista a {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--tt-px));
  padding-block: calc(10 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(16 * var(--tt-px));
  text-decoration: none;
}

.tt-perfil__lista a:hover {
  color: var(--tt-naranja);
}

.tt-perfil__lista a > i:first-child {
  width: calc(20 * var(--tt-px));
  text-align: center;
  font-size: calc(18 * var(--tt-px));
}

/* "Mi perfil" va en negrita */
.tt-perfil__lista li:first-child a {
  font-weight: 600;
}

.tt-perfil__contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(32 * var(--tt-px));
  height: calc(32 * var(--tt-px));
  padding-inline: calc(8 * var(--tt-px));
  background: var(--tt-petroleo-15);
  border-radius: 999px;
  font-size: calc(14 * var(--tt-px));
  font-style: normal;
  font-weight: 600;
}

.tt-perfil__flecha {
  margin-left: auto;
}

/* Banner de páginas internas */
.tt-banner-pagina {
  display: flex;
  align-items: center;
  height: calc(284 * var(--tt-px));
  background-color: #6b7280; /* gris temporal; después url('../img/...') */
  background-size: cover;
  background-position: center;
  color: var(--tt-blanco);
}

/* Con foto: velo oscuro para que el texto blanco se lea bien */
.tt-banner-pagina--foto {
  position: relative;
}

.tt-banner-pagina--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.5));
}

.tt-banner-pagina--foto .tt-contenedor {
  position: relative; /* sobre el velo */
}

.tt-migas {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--tt-px));
  margin-bottom: calc(20 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
}

.tt-migas a {
  color: inherit;
  text-decoration: none;
}

.tt-migas a:hover {
  color: var(--tt-naranja);
}

.tt-migas i {
  font-size: 0.7em;
}

.tt-banner-pagina h1 {
  margin: 0 0 calc(12 * var(--tt-px));
  font-size: calc(48 * var(--tt-px));
  font-weight: 700;
  line-height: 1.1;
}

.tt-banner-pagina p {
  margin: 0;
  font-size: calc(16 * var(--tt-px));
}

/* Historia: Los orígenes */
.tt-origenes {
  padding-block: calc(80 * var(--tt-px));
}

.tt-origenes__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(80 * var(--tt-px));
}

.tt-origenes__texto {
  width: calc(780 * var(--tt-px));
}

.tt-origenes__texto p {
  margin: 0 0 calc(20 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  line-height: 1.6;
}

.tt-origenes__imagen {
  width: calc(556 * var(--tt-px));
  height: calc(424 * var(--tt-px));
  border-radius: calc(24 * var(--tt-px));
  display: block;
  object-fit: cover;
}

/* Título mixto: parte turquesa y parte petróleo */
.tt-titulo-mixto {
  margin: 0 0 calc(8 * var(--tt-px));
  color: var(--tt-turquesa);
  font-size: calc(48 * var(--tt-px));
  font-weight: 600;
  line-height: 1.15;
}

.tt-titulo-mixto strong {
  color: var(--tt-petroleo);
  font-weight: 800;
}

/* Línea de tiempo */
.tt-linea {
  padding-block: calc(40 * var(--tt-px));
}

.tt-linea__rejilla {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(24 * var(--tt-px));
}

.tt-hito {
  grid-column: span 2; /* 3 por fila */
  background: var(--tt-blanco);
  border-radius: calc(12 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(16 * var(--tt-px)) rgb(0 0 0 / 12%);
  overflow: hidden;
}

.tt-hito--ancho {
  grid-column: span 3; /* 2 por fila */
}

.tt-hito__imagen {
  display: block;
  width: 100%;
  height: calc(268 * var(--tt-px));
  object-fit: cover;
}

.tt-hito__cuerpo {
  padding: calc(20 * var(--tt-px)) calc(28 * var(--tt-px)) calc(28 * var(--tt-px));
}

.tt-hito__numero {
  display: block;
  color: var(--tt-turquesa);
  font-size: calc(16 * var(--tt-px));
  font-weight: 700;
}

.tt-hito__cuerpo h3 {
  margin: calc(4 * var(--tt-px)) 0 calc(8 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(16 * var(--tt-px));
  font-weight: 700;
}

.tt-hito__cuerpo p {
  margin: 0;
  font-size: calc(14 * var(--tt-px));
  line-height: 1.5;
}

/* Cultura viva */
.tt-cultura {
  padding-block: calc(40 * var(--tt-px));
}

.tt-cultura__rejilla {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(24 * var(--tt-px));
}

.tt-elemento {
  background: var(--tt-blanco);
  border-radius: calc(12 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(16 * var(--tt-px)) rgb(0 0 0 / 12%);
  overflow: hidden;
}

.tt-elemento__imagen {
  display: block;
  width: 100%;
  height: calc(160 * var(--tt-px));
  object-fit: cover;
}

.tt-elemento__cuerpo {
  padding: calc(20 * var(--tt-px)) calc(24 * var(--tt-px)) calc(28 * var(--tt-px));
}

.tt-elemento__cuerpo h3 {
  margin: 0 0 calc(8 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(16 * var(--tt-px));
  font-weight: 700;
}

.tt-elemento__cuerpo p {
  margin: 0;
  font-size: calc(14 * var(--tt-px));
  line-height: 1.5;
}

/* Tradiciones */
.tt-tradiciones {
  padding-block: calc(40 * var(--tt-px));
}

.tt-tradiciones__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(48 * var(--tt-px));
}

.tt-tradiciones__texto {
  width: calc(740 * var(--tt-px));
}

.tt-tradiciones__texto p {
  margin: 0 0 calc(24 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  line-height: 1.6;
}

.tt-tradiciones__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(24 * var(--tt-px));
  width: calc(740 * var(--tt-px));
}

/* Mini tarjeta con ícono (reutilizable) */
.tt-mini {
  display: flex;
  align-items: flex-start;
  gap: calc(16 * var(--tt-px));
  padding: calc(20 * var(--tt-px));
  background: var(--tt-blanco);
  border-radius: calc(12 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(16 * var(--tt-px)) rgb(0 0 0 / 12%);
}

.tt-mini__icono {
  flex: 0 0 calc(32 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(26 * var(--tt-px));
  text-align: center;
  padding-top: calc(2 * var(--tt-px));
}

.tt-mini h3 {
  margin: 0 0 calc(4 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(16 * var(--tt-px));
  font-weight: 700;
}

.tt-mini p {
  margin: 0;
  font-size: calc(14 * var(--tt-px));
  line-height: 1.5;
}

/* Tuxpan hoy y mañana */
.tt-hoy {
  padding-block: calc(40 * var(--tt-px)) calc(100 * var(--tt-px));
}

.tt-hoy__interior {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(48 * var(--tt-px));
}

.tt-hoy__texto {
  width: calc(740 * var(--tt-px));
}

.tt-hoy__texto > p {
  margin: 0 0 calc(24 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  line-height: 1.6;
}

.tt-hoy__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(24 * var(--tt-px));
  margin-bottom: calc(32 * var(--tt-px));
}

.tt-hoy__imagen {
  width: calc(560 * var(--tt-px));
  height: calc(460 * var(--tt-px));
  border-radius: calc(24 * var(--tt-px));
  display: block;
  object-fit: cover;
}

/* Banner grande de páginas internas */
.tt-banner-grande {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(640 * var(--tt-px));
  background-size: cover;
  background-position: center;
  color: var(--tt-blanco);
}

/* Con foto: velo oscuro para que el texto blanco se lea bien */
.tt-banner-grande--foto {
  position: relative;
}

.tt-banner-grande--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.5));
}

.tt-banner-grande--foto .tt-contenedor {
  position: relative; /* sobre el velo */
}

.tt-banner-grande .tt-migas {
  margin-bottom: calc(80 * var(--tt-px));
}

.tt-banner-grande__titulo {
  margin: 0;
  line-height: 1;
}

.tt-banner-grande p {
  margin: calc(24 * var(--tt-px)) 0 0;
  max-width: calc(600 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  line-height: 1.5;
}

/* Título grande de la página de categorías */
.tt-titulo-mixto--grande {
  color: var(--tt-petroleo);
  font-size: calc(56 * var(--tt-px));
  font-weight: 800;
}

.tt-subtitulo--ancho {
  max-width: calc(1100 * var(--tt-px));
  line-height: 1.6;
}

/* Listado de categoría */
.tt-listado {
  padding-block: calc(80 * var(--tt-px));
}

.tt-listado__interior {
  display: flex;
  align-items: flex-start;
  gap: calc(70 * var(--tt-px));
}

.tt-filtros {
  flex: 0 0 calc(400 * var(--tt-px));
}

.tt-filtros form {
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--tt-px));
}

.tt-listado__principal {
  flex: 1;
  min-width: 0;
}

/* Cajas de la barra lateral */
.tt-caja {
  padding: calc(24 * var(--tt-px)) calc(28 * var(--tt-px));
  background: var(--tt-blanco);
  border-radius: calc(12 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(16 * var(--tt-px)) rgb(0 0 0 / 12%);
}

.tt-caja__titulo {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--tt-px));
  margin: 0 0 calc(20 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(16 * var(--tt-px));
  font-weight: 600;
}

.tt-caja input[type="search"],
.tt-rango input {
  width: 100%;
  padding: calc(14 * var(--tt-px)) calc(16 * var(--tt-px));
  border: calc(1 * var(--tt-px)) solid var(--tt-petroleo-15);
  border-radius: calc(6 * var(--tt-px));
  font-family: var(--tt-fuente);
  font-size: calc(14 * var(--tt-px));
  color: var(--tt-gris);
}

.tt-rango {
  display: flex;
  gap: calc(12 * var(--tt-px));
}

.tt-check {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--tt-px));
  margin-bottom: calc(14 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
  cursor: pointer;
}

.tt-check:last-child {
  margin-bottom: 0;
}

.tt-check input {
  width: calc(18 * var(--tt-px));
  height: calc(18 * var(--tt-px));
  accent-color: var(--tt-petroleo);
}

/* Símbolos de precio */
.tt-chips {
  display: flex;
  gap: calc(16 * var(--tt-px));
}

.tt-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tt-chip span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(52 * var(--tt-px));
  height: calc(52 * var(--tt-px));
  border: calc(1 * var(--tt-px)) solid var(--tt-petroleo-15);
  border-radius: 50%;
  color: var(--tt-petroleo);
  font-size: calc(14 * var(--tt-px));
  font-weight: 600;
  cursor: pointer;
}

.tt-chip input:checked + span {
  background: var(--tt-petroleo);
  color: var(--tt-blanco);
}

/* Mapa */
.tt-mapa__imagen {
  height: calc(200 * var(--tt-px));
  border-radius: calc(8 * var(--tt-px));
}

.tt-mapa__texto {
  margin: calc(16 * var(--tt-px)) 0;
  text-align: center;
  font-size: calc(14 * var(--tt-px));
}

.tt-boton--bloque {
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.tt-filtros__limpiar {
  width: 100%;
  justify-content: center;
}

/* Resultados y filtros rápidos */
.tt-resultados {
  margin: 0 0 calc(16 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
}

.tt-rapidos {
  display: flex;
  gap: calc(16 * var(--tt-px));
  margin-bottom: calc(28 * var(--tt-px));
}

.tt-pildora {
  padding: calc(8 * var(--tt-px)) calc(24 * var(--tt-px));
  background: transparent;
  border: calc(1 * var(--tt-px)) solid var(--tt-petroleo);
  border-radius: 999px;
  color: var(--tt-petroleo);
  font-family: var(--tt-fuente);
  font-size: calc(14 * var(--tt-px));
  cursor: pointer;
}

.tt-pildora.is-activo {
  background: var(--tt-petroleo);
  color: var(--tt-blanco);
}

/* Cuadrícula de tarjetas */
.tt-listado__rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(36 * var(--tt-px));
}

.tt-tarjeta-lugar__imagen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-tarjeta-lugar__enlace {
  display: block;
}

.tt-tarjeta-lugar__cuerpo h3 a {
  color: inherit;
  text-decoration: none;
}

.tt-tarjeta-lugar__corazon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Paginación */
.tt-paginacion ul {
  display: flex;
  justify-content: center;
  gap: calc(12 * var(--tt-px));
  margin: calc(48 * var(--tt-px)) 0 0;
  padding: 0;
  list-style: none;
}

.tt-paginacion li > .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(44 * var(--tt-px));
  height: calc(44 * var(--tt-px));
  background: var(--tt-blanco);
  border-radius: calc(8 * var(--tt-px));
  box-shadow: 0 calc(2 * var(--tt-px)) calc(8 * var(--tt-px)) rgb(0 0 0 / 15%);
  color: var(--tt-petroleo);
  font-size: calc(14 * var(--tt-px));
  text-decoration: none;
}

.tt-paginacion li > .page-numbers.current {
  background: var(--tt-naranja);
  color: var(--tt-blanco);
}

/* Banner del lugar */
.tt-banner-lugar {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(620 * var(--tt-px));
  background-size: cover;
  background-position: center;
  color: var(--tt-blanco);
}

.tt-banner-lugar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 55%), rgb(0 0 0 / 35%) 45%, rgb(0 0 0 / 65%));
}

.tt-banner-lugar__contenido {
  position: relative;
}

.tt-banner-lugar .tt-migas {
  margin-bottom: calc(40 * var(--tt-px));
}

.tt-etiqueta {
  display: inline-block;
  margin-bottom: calc(16 * var(--tt-px));
  padding: calc(6 * var(--tt-px)) calc(20 * var(--tt-px));
  background: var(--tt-naranja);
  border-radius: 999px;
  font-size: calc(14 * var(--tt-px));
  font-weight: 500;
}

.tt-banner-lugar__titulo {
  margin: 0 0 calc(16 * var(--tt-px));
  font-size: calc(64 * var(--tt-px));
  font-weight: 700;
  line-height: 1.1;
}

.tt-banner-lugar__texto {
  max-width: calc(800 * var(--tt-px));
  margin: 0 0 calc(24 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  line-height: 1.5;
}

.tt-banner-lugar__nota {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--tt-px));
  margin: 0 0 calc(32 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
}

.tt-banner-lugar__nota i {
  color: var(--tt-naranja);
  font-size: calc(28 * var(--tt-px));
}

.tt-banner-lugar__nota strong {
  font-size: calc(24 * var(--tt-px));
}

.tt-acciones {
  display: flex;
  gap: calc(40 * var(--tt-px));
}

.tt-accion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--tt-px));
  padding: 0;
  background: none;
  border: 0;
  color: var(--tt-blanco);
  font-family: var(--tt-fuente);
  font-size: calc(14 * var(--tt-px));
  text-decoration: none;
  cursor: pointer;
}

.tt-accion span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(52 * var(--tt-px));
  height: calc(52 * var(--tt-px));
  background: var(--tt-naranja);
  border-radius: 50%;
  font-size: calc(20 * var(--tt-px));
}

/* Cuerpo de la página del lugar */
.tt-lugar {
  padding-block: calc(80 * var(--tt-px));
}

.tt-lugar__interior {
  display: flex;
  align-items: flex-start;
  gap: calc(72 * var(--tt-px));
}

.tt-lugar__principal {
  flex: 1;
  min-width: 0;
}

.tt-lugar__lateral {
  flex: 0 0 calc(400 * var(--tt-px));
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--tt-px));
}

.tt-titulo-lugar {
  margin: 0 0 calc(24 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(32 * var(--tt-px));
  font-weight: 700;
}

.tt-lugar__texto {
  margin-bottom: calc(64 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  line-height: 1.6;
}

.tt-lugar__texto p {
  margin: 0 0 calc(20 * var(--tt-px));
}

/* Galería */
.tt-galeria__visor {
  position: relative;
}

.tt-galeria__visor .tt-carrusel__flecha--izq { left: calc(-24 * var(--tt-px)); z-index: 2; }
.tt-galeria__visor .tt-carrusel__flecha--der { right: calc(-24 * var(--tt-px)); z-index: 2; }

.tt-galeria__principal {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: calc(12 * var(--tt-px));
}

.tt-galeria__principal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tt-galeria__dots {
  position: absolute;
  bottom: calc(16 * var(--tt-px));
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: calc(10 * var(--tt-px));
}

.tt-galeria__dot {
  width: calc(10 * var(--tt-px));
  height: calc(10 * var(--tt-px));
  background: var(--tt-blanco);
  border-radius: 50%;
  opacity: 0.5;
}

.tt-galeria__dot.is-activo {
  opacity: 1;
}

.tt-galeria__minis {
  display: flex;
  gap: calc(24 * var(--tt-px));
  margin-top: calc(24 * var(--tt-px));
  overflow-x: auto;
  scrollbar-width: none;
}

.tt-galeria__minis::-webkit-scrollbar {
  display: none;
}

.tt-galeria__mini {
  flex: 0 0 calc((100% - 72 * var(--tt-px)) / 4);
  aspect-ratio: 4 / 3;
  padding: 0;
  border: calc(3 * var(--tt-px)) solid transparent;
  border-radius: calc(8 * var(--tt-px));
  overflow: hidden;
  background: none;
  cursor: pointer;
}

.tt-galeria__mini.is-activo {
  border-color: var(--tt-naranja);
}

.tt-galeria__mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Barra lateral */
.tt-caja__titulo--sep {
  margin-top: calc(32 * var(--tt-px));
  padding-top: calc(28 * var(--tt-px));
  border-top: calc(1 * var(--tt-px)) solid var(--tt-petroleo-15);
}

.tt-contacto,
.tt-horario {
  list-style: none;
  margin: 0 0 calc(28 * var(--tt-px));
  padding: 0;
}

.tt-contacto li {
  margin-bottom: calc(14 * var(--tt-px));
}

.tt-contacto__etiqueta {
  display: block;
  color: var(--tt-turquesa);
  font-size: calc(14 * var(--tt-px));
}

.tt-contacto a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(12 * var(--tt-px));
  color: var(--tt-gris);
  font-size: calc(14 * var(--tt-px));
  text-decoration: none;
  word-break: break-all;
}

.tt-contacto a:hover {
  color: var(--tt-naranja);
}

.tt-contacto a i {
  font-size: 0.85em;
}

.tt-horario li {
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--tt-px));
  margin-bottom: calc(10 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
}

.tt-horario li.is-hoy {
  color: var(--tt-petroleo);
  font-weight: 600;
}

.tt-lateral__botones {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--tt-px));
}

.tt-compartir {
  display: flex;
  justify-content: space-between;
  gap: calc(12 * var(--tt-px));
}

.tt-compartir__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--tt-px));
  padding: 0;
  background: none;
  border: 0;
  color: var(--tt-gris);
  font-family: var(--tt-fuente);
  font-size: calc(11 * var(--tt-px));
  text-decoration: none;
  cursor: pointer;
}

.tt-compartir__item span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(52 * var(--tt-px));
  height: calc(52 * var(--tt-px));
  background: var(--tt-naranja);
  border-radius: calc(10 * var(--tt-px));
  color: var(--tt-blanco);
  font-size: calc(22 * var(--tt-px));
}

.tt-ubicacion__mapa {
  display: block;
  width: 100%;
  height: calc(200 * var(--tt-px));
  border: 0;
  border-radius: calc(8 * var(--tt-px));
}

/* Sin mapa: recuadro gris con texto centrado */
.tt-ubicacion__mapa--vacio {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tt-blanco);
  font-weight: 600;
  font-size: calc(16 * var(--tt-px));
  text-align: center;
}

.tt-ubicacion__texto {
  margin: calc(16 * var(--tt-px)) 0 calc(20 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
  line-height: 1.5;
}

/* Reseñas */
.tt-resenas {
  padding-block: calc(40 * var(--tt-px));
}

/* Ventana de aviso */
.tt-aviso {
  width: calc(520 * var(--tt-px));
  max-width: 90vw;
  padding: calc(40 * var(--tt-px));
  border: 0;
  border-radius: calc(16 * var(--tt-px));
  box-shadow: 0 calc(8 * var(--tt-px)) calc(32 * var(--tt-px)) rgb(0 0 0 / 25%);
  text-align: center;
  font-family: var(--tt-fuente);
}

.tt-aviso::backdrop {
  background: rgb(0 0 0 / 55%);
}

.tt-aviso p {
  margin: 0 0 calc(24 * var(--tt-px));
  color: var(--tt-gris);
  font-size: calc(16 * var(--tt-px));
  line-height: 1.6;
}

.tt-aviso .tt-boton {
  border: 0;
  font-family: var(--tt-fuente);
  cursor: pointer;
}

.tt-horario li {
  align-items: flex-start;
}

.tt-horario li span:last-child {
  text-align: right;
}

/* Tarjetas clicables: el enlace principal se estira sobre toda la tarjeta */
.tt-tarjeta-cat,
.tt-tarjeta-lugar {
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}

.tt-tarjeta-cat__cuerpo a::after,
.tt-tarjeta-lugar__cuerpo h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.tt-tarjeta-cat:hover,
.tt-tarjeta-lugar:hover {
  transform: translateY(calc(-4 * var(--tt-px)));
  box-shadow: 0 calc(8 * var(--tt-px)) calc(24 * var(--tt-px)) rgb(0 0 0 / 18%);
}

.tt-tarjeta-cat:hover h3,
.tt-tarjeta-lugar:hover h3 a {
  color: var(--tt-naranja);
}

/* Anillo solo al navegar con teclado (no al hacer clic), dibujado hacia adentro para que no se recorte */
.tt-tarjeta-cat:has(:focus-visible),
.tt-tarjeta-lugar:has(:focus-visible) {
  outline: calc(2 * var(--tt-px)) solid var(--tt-turquesa);
  outline-offset: calc(-2 * var(--tt-px));
}

/* El corazón queda por encima del enlace estirado (para cuando funcione) */
.tt-tarjeta-lugar__corazon {
  z-index: 2;
}

/* Banner de la revista */
.tt-banner-revista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(80 * var(--tt-px));
}

.tt-banner-revista__texto {
  flex: 0 0 calc(760 * var(--tt-px));
}

.tt-banner-revista__imagen {
  flex: 0 0 calc(640 * var(--tt-px));
  height: calc(460 * var(--tt-px));
  border-radius: calc(16 * var(--tt-px));
  background-color: rgb(255 255 255 / 25%);
}

/* Con foto de fondo: la revista está a la derecha, el velo oscuro solo cubre el texto (izquierda) */
.tt-banner-revista--foto::before {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0) 60%);
}

/* Presentación */
.tt-presenta {
  padding-block: calc(100 * var(--tt-px));
}

.tt-presenta__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(80 * var(--tt-px));
}

.tt-presenta__texto {
  flex: 0 0 calc(780 * var(--tt-px));
}

.tt-presenta__texto p {
  margin: 0 0 calc(20 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  line-height: 1.6;
}

.tt-presenta__texto .tt-lema {
  margin: calc(-8 * var(--tt-px)) 0 calc(28 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(40 * var(--tt-px));
  font-style: italic;
  font-weight: 500;
}

.tt-presenta__botones {
  display: flex;
  gap: calc(24 * var(--tt-px));
  margin-top: calc(32 * var(--tt-px));
}

.tt-presenta__imagen {
  flex: 1;
  height: calc(480 * var(--tt-px));
  border-radius: calc(16 * var(--tt-px));
  display: block;
  object-fit: contain;
}

/* Ediciones */
.tt-ediciones {
  padding-block: calc(40 * var(--tt-px)) calc(100 * var(--tt-px));
}

.tt-ediciones__rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(48 * var(--tt-px));
}

.tt-edicion {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #9ca3af;
  box-shadow: 0 calc(4 * var(--tt-px)) calc(16 * var(--tt-px)) rgb(0 0 0 / 20%);
  transition: transform 0.2s, box-shadow 0.2s;
}

.tt-edicion:hover {
  transform: translateY(calc(-6 * var(--tt-px)));
  box-shadow: 0 calc(10 * var(--tt-px)) calc(28 * var(--tt-px)) rgb(0 0 0 / 28%);
}

.tt-edicion.is-activa {
  outline: calc(4 * var(--tt-px)) solid var(--tt-naranja);
  outline-offset: calc(4 * var(--tt-px));
}

.tt-edicion img,
.tt-edicion .tt-img-gris {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Visor */
.tt-visor {
  padding-block: calc(90 * var(--tt-px));
  background: var(--tt-turquesa);
  color: var(--tt-blanco);
}

.tt-visor__interior {
  display: flex;
  align-items: flex-start;
  gap: calc(100 * var(--tt-px));
}

.tt-visor__libro {
  flex: 1;
  min-width: 0;
}

.tt-visor__visor {
  position: relative;
}

.tt-visor__barra {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--tt-px));
  margin-top: calc(28 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
}

.tt-visor__contador {
  margin-right: auto;
  margin-left: calc(12 * var(--tt-px));
}

.tt-visor__icono {
  padding: calc(6 * var(--tt-px));
  background: none;
  border: 0;
  color: var(--tt-blanco);
  font-size: calc(20 * var(--tt-px));
  cursor: pointer;
}

/* Pantalla completa */
.tt-visor__libro:fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(40 * var(--tt-px));
  background: var(--tt-turquesa);
}

.tt-visor__libro:fullscreen .tt-visor__escenario {
  max-height: calc(100vh - 140px);
}

.tt-visor__libro:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  background: var(--tt-turquesa);
}

.tt-visor__libro:-webkit-full-screen .tt-visor__escenario {
  max-height: calc(100vh - 140px);
}

/* Columna de información */
.tt-visor__info {
  flex: 0 0 calc(300 * var(--tt-px));
}

.tt-visor__mes {
  margin: 0;
  font-size: calc(18 * var(--tt-px));
  font-weight: 600;
}

.tt-visor__estado {
  margin: calc(4 * var(--tt-px)) 0 calc(24 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
}

.tt-boton--blanco {
  margin-bottom: calc(16 * var(--tt-px));
  background: var(--tt-blanco);
  border: 0;
  color: var(--tt-petroleo);
  font-family: var(--tt-fuente);
  cursor: pointer;
}

.tt-visor__subtitulo {
  margin: calc(32 * var(--tt-px)) 0 calc(16 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  font-weight: 600;
}

.tt-visor__indice {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tt-visor__indice button {
  display: flex;
  gap: calc(20 * var(--tt-px));
  width: 100%;
  margin-bottom: calc(12 * var(--tt-px));
  padding: 0;
  background: none;
  border: 0;
  color: var(--tt-blanco);
  font-family: var(--tt-fuente);
  font-size: calc(16 * var(--tt-px));
  text-align: left;
  cursor: pointer;
}

.tt-visor__indice button:hover {
  text-decoration: underline;
}

.tt-visor__indice span {
  flex: 0 0 calc(28 * var(--tt-px));
}

/* ---- Visor: escenario sin barras de desplazamiento ---- */
.tt-visor__visor .tt-carrusel__flecha {
  z-index: 3;
}

.tt-visor__escenario {
  position: relative;
  aspect-ratio: var(--ratio, 1.6);
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tt-visor__escenario::-webkit-scrollbar {
  display: none;
}

.tt-visor__escenario.is-animando {
  overflow: visible; /* la hoja se levanta sin recortarse */
}

.tt-visor__escenario.is-zoom {
  cursor: grab;
}

.tt-visor__escenario.is-arrastrando {
  cursor: grabbing;
  user-select: none;
}

/* ---- Libro ---- */
.tt-visor__hoja {
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: var(--ratio, 1.6);
  perspective: calc(5000 * var(--tt-px));
  transition: transform 0.8s cubic-bezier(0.45, 0.05, 0.25, 1);
}

/* Portada sola: se centra; al abrir el libro se recorre a su lugar */
.tt-visor__hoja.is-portada {
  transform: translateX(-25%);
}

.tt-pag {
  flex: 0 0 50%;
  height: 100%;
  background: var(--tt-blanco);
  user-select: none;
}

.tt-pag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.tt-pag.is-vacia {
  background: transparent;
}

.tt-pag:not(.is-vacia) {
  box-shadow: 0 calc(8 * var(--tt-px)) calc(24 * var(--tt-px)) rgb(0 0 0 / 30%);
}

/* ---- Hoja que gira ---- */
.tt-flip {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 2;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.45, 0.05, 0.25, 1);
}

.tt-flip--adelante {
  left: 50%;
  transform-origin: left center;
}

.tt-flip--atras {
  left: 0;
  transform-origin: right center;
}

.tt-flip .tt-pag {
  position: absolute;
  inset: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.tt-flip__dorso {
  transform: rotateY(180deg);
}

.tt-flip--adelante.is-girando {
  transform: rotateY(-180deg);
}

.tt-flip--atras.is-girando {
  transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .tt-visor__hoja,
  .tt-flip {
    transition: none;
  }
}

/* ---- Barra de zoom ---- */
.tt-visor__zoom {
  --lleno: 0%;
  -webkit-appearance: none;
  appearance: none;
  width: calc(280 * var(--tt-px));
  height: calc(20 * var(--tt-px));
  background: transparent;
  cursor: pointer;
}

.tt-visor__zoom:focus {
  outline: none;
}

.tt-visor__zoom::-webkit-slider-runnable-track {
  height: calc(3 * var(--tt-px));
  border-radius: 999px;
  background: linear-gradient(to right, var(--tt-blanco) var(--lleno), rgb(255 255 255 / 40%) var(--lleno));
}

.tt-visor__zoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(18 * var(--tt-px));
  height: calc(18 * var(--tt-px));
  margin-top: calc(-7.5 * var(--tt-px));
  border: 0;
  border-radius: 50%;
  background: var(--tt-blanco);
  box-shadow: 0 calc(2 * var(--tt-px)) calc(6 * var(--tt-px)) rgb(0 0 0 / 25%);
}

.tt-visor__zoom::-moz-range-track {
  height: calc(3 * var(--tt-px));
  border-radius: 999px;
  background: rgb(255 255 255 / 40%);
}

.tt-visor__zoom::-moz-range-progress {
  height: calc(3 * var(--tt-px));
  border-radius: 999px;
  background: var(--tt-blanco);
}

.tt-visor__zoom::-moz-range-thumb {
  width: calc(18 * var(--tt-px));
  height: calc(18 * var(--tt-px));
  border: 0;
  border-radius: 50%;
  background: var(--tt-blanco);
}

/* ---- Pantalla completa: el libro se ajusta al alto de la pantalla ---- */
.tt-visor__libro:fullscreen .tt-visor__escenario {
  width: min(100%, calc((100vh - 170px) * var(--ratio, 1.6)));
  margin-inline: auto;
}

.tt-visor__libro:-webkit-full-screen .tt-visor__escenario {
  width: min(100%, calc((100vh - 170px) * var(--ratio, 1.6)));
  margin-inline: auto;
}

/* Explorar */
.tt-banner-explorar {
  min-height: calc(520 * var(--tt-px));
}

.tt-banner-explorar .tt-migas {
  margin-bottom: calc(40 * var(--tt-px));
}

.tt-buscador--explorar {
  width: calc(820 * var(--tt-px));
  max-width: 100%;
}

.tt-buscador--explorar select {
  border: 0;
  border-left: calc(1 * var(--tt-px)) solid var(--tt-petroleo-15);
  background: transparent;
  color: var(--tt-gris);
  font-family: var(--tt-fuente);
  font-size: calc(16 * var(--tt-px));
  padding: calc(10 * var(--tt-px)) calc(14 * var(--tt-px));
  cursor: pointer;
  outline: 0;
}

.tt-sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--tt-px));
  margin-top: calc(20 * var(--tt-px));
}

.tt-sugerencias a {
  padding: calc(6 * var(--tt-px)) calc(18 * var(--tt-px));
  border: calc(1 * var(--tt-px)) solid rgb(255 255 255 / 70%);
  border-radius: 999px;
  color: var(--tt-blanco);
  font-size: calc(14 * var(--tt-px));
  text-decoration: none;
}

.tt-sugerencias a:hover {
  background: var(--tt-blanco);
  color: var(--tt-petroleo);
}

.tt-afinar {
  width: 100%;
  justify-content: center;
  margin-top: calc(12 * var(--tt-px));
}

.tt-check__n {
  margin-left: auto;
  color: var(--tt-gris);
  font-size: calc(12 * var(--tt-px));
}

.tt-chips-cat {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--tt-px));
}

.tt-chips-cat a {
  padding: calc(10 * var(--tt-px)) calc(24 * var(--tt-px));
  border: calc(1 * var(--tt-px)) solid var(--tt-petroleo);
  border-radius: 999px;
  color: var(--tt-petroleo);
  font-size: calc(16 * var(--tt-px));
  text-decoration: none;
}

.tt-chips-cat a:hover {
  border-color: var(--tt-naranja);
  color: var(--tt-naranja);
}

.tt-vacio {
  padding-block: calc(64 * var(--tt-px));
  text-align: center;
}

.tt-vacio h3 {
  margin: 0 0 calc(8 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(24 * var(--tt-px));
}

.tt-vacio p {
  margin: 0 0 calc(24 * var(--tt-px));
}

.tt-vacio .tt-chips-cat {
  justify-content: center;
}

/* Tarjeta de evento */
.tt-fecha-badge {
  position: absolute;
  top: calc(12 * var(--tt-px));
  left: calc(12 * var(--tt-px));
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: calc(48 * var(--tt-px));
  padding: calc(6 * var(--tt-px)) calc(10 * var(--tt-px));
  background: var(--tt-petroleo);
  border-radius: calc(8 * var(--tt-px));
  color: var(--tt-blanco);
  line-height: 1.05;
}

.tt-fecha-badge strong {
  font-size: calc(20 * var(--tt-px));
  font-weight: 700;
}

.tt-fecha-badge span {
  font-size: calc(12 * var(--tt-px));
  font-weight: 600;
}

.tt-tarjeta-evento__desc {
  margin: calc(6 * var(--tt-px)) 0 calc(10 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
  line-height: 1.45;
}

/* Ficha del evento */
.tt-etiqueta--gris {
  background: #6b7280;
}

.tt-contacto__valor {
  display: block;
  color: var(--tt-gris);
  font-size: calc(14 * var(--tt-px));
}

.tt-precios {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tt-precios li {
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--tt-px));
  margin: 0 0 calc(6 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
}

.tt-taquilla {
  margin: calc(12 * var(--tt-px)) 0 0;
  text-align: center;
  font-size: calc(14 * var(--tt-px));
}

.tt-organizador {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--tt-px));
  margin-bottom: calc(16 * var(--tt-px));
}

.tt-organizador__logo {
  flex: 0 0 calc(72 * var(--tt-px));
  width: calc(72 * var(--tt-px));
  height: calc(72 * var(--tt-px));
  border-radius: 50%;
  background: var(--tt-petroleo);
  object-fit: cover;
}

.tt-organizador__nombre {
  color: var(--tt-petroleo);
  font-size: calc(16 * var(--tt-px));
}

/* Próximos eventos del inicio: tarjeta clicable y con foto */
.tt-evento {
  position: relative;
}

.tt-evento__cuerpo h3 a {
  color: inherit;
  text-decoration: none;
}

.tt-evento__cuerpo h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.tt-evento:hover h3 a {
  color: var(--tt-naranja);
}

.tt-evento__imagen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Información adicional */
.tt-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--tt-px));
  list-style: none;
  margin: calc(6 * var(--tt-px)) 0 0;
  padding: 0;
}

.tt-contacto .tt-etiquetas li {
  margin: 0;
  padding: calc(4 * var(--tt-px)) calc(12 * var(--tt-px));
  background: var(--tt-petroleo-15);
  border-radius: 999px;
  color: var(--tt-petroleo);
  font-size: calc(12 * var(--tt-px));
}

.tt-precio {
  color: var(--tt-petroleo);
  font-size: calc(16 * var(--tt-px));
}

button.tt-boton {
  border: 0;
  font-family: var(--tt-fuente);
  cursor: pointer;
}

/* Habitaciones */
.tt-habitaciones {
  margin-top: calc(64 * var(--tt-px));
}

.tt-habitacion {
  flex: 0 0 calc((100% - 48 * var(--tt-px)) / 3);
}

.tt-habitacion__imagen {
  height: calc(180 * var(--tt-px));
  overflow: hidden;
}

.tt-habitacion__imagen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-habitacion__servicios {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 calc(12 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
  line-height: 1.45;
}

.tt-habitacion__precio {
  margin: 0 0 calc(14 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(22 * var(--tt-px));
  font-weight: 700;
}

.tt-habitacion__precio small {
  font-size: calc(12 * var(--tt-px));
  font-weight: 400;
}

/* Ventana emergente (reutilizable) */
.tt-modal {
  max-width: 92vw;
  max-height: 90vh;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: calc(16 * var(--tt-px));
  box-shadow: 0 calc(8 * var(--tt-px)) calc(32 * var(--tt-px)) rgb(0 0 0 / 25%);
  font-family: var(--tt-fuente);
}

.tt-modal::backdrop {
  background: rgb(0 0 0 / 55%);
}

.tt-modal__cerrar {
  position: absolute;
  top: calc(14 * var(--tt-px));
  right: calc(14 * var(--tt-px));
  z-index: 5;
  width: calc(40 * var(--tt-px));
  height: calc(40 * var(--tt-px));
  border: 0;
  border-radius: 50%;
  background: var(--tt-blanco);
  box-shadow: 0 calc(2 * var(--tt-px)) calc(8 * var(--tt-px)) rgb(0 0 0 / 20%);
  color: var(--tt-petroleo);
  font-size: calc(18 * var(--tt-px));
  cursor: pointer;
}

.tt-modal--hab {
  width: calc(1100 * var(--tt-px));
}

.tt-hab-modal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(48 * var(--tt-px));
  padding: calc(44 * var(--tt-px));
}

.tt-hab-modal__visor {
  position: relative;
}

.tt-hab-modal__foto {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: calc(12 * var(--tt-px));
  background: #9ca3af;
}

.tt-hab-modal__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-hab-modal__foto.is-vacia img {
  display: none;
}

.tt-hab-modal__minis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(12 * var(--tt-px));
  margin-top: calc(12 * var(--tt-px));
}

.tt-hab-modal__minis button {
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: calc(3 * var(--tt-px)) solid transparent;
  border-radius: calc(8 * var(--tt-px));
  background: none;
  cursor: pointer;
}

.tt-hab-modal__minis button.is-activo {
  border-color: var(--tt-naranja);
}

.tt-hab-modal__minis img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-hab-modal__precio {
  margin-top: calc(24 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
}

.tt-hab-modal__precio p {
  margin: calc(4 * var(--tt-px)) 0;
  color: var(--tt-petroleo);
}

.tt-hab-modal__precio strong {
  font-size: calc(32 * var(--tt-px));
}

.tt-hab-modal__precio em {
  font-style: normal;
}

.tt-hab-modal__info h2 {
  margin: 0 0 calc(12 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(32 * var(--tt-px));
  font-weight: 700;
}

.tt-hab-modal__datos {
  display: flex;
  gap: calc(28 * var(--tt-px));
  margin: 0 0 calc(20 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
}

.tt-hab-modal__datos i,
.tt-hab-modal__servicios i {
  color: var(--tt-petroleo);
}

.tt-hab-modal__texto {
  margin: 0;
  font-size: calc(14 * var(--tt-px));
  line-height: 1.6;
}

.tt-hab-modal__servicios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(14 * var(--tt-px)) calc(24 * var(--tt-px));
  list-style: none;
  margin: calc(24 * var(--tt-px)) 0 calc(28 * var(--tt-px));
  padding: 0;
  font-size: calc(14 * var(--tt-px));
}

/* Rango de precio con dos controles */
.tt-doble {
  position: relative;
  height: calc(76 * var(--tt-px));
}

.tt-doble__burbuja {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  padding: calc(3 * var(--tt-px)) calc(10 * var(--tt-px));
  background: var(--tt-petroleo);
  border-radius: calc(4 * var(--tt-px));
  color: var(--tt-blanco);
  font-size: calc(12 * var(--tt-px));
  white-space: nowrap;
}

.tt-doble__burbuja[data-burbuja-min] { left: var(--a, 0%); }
.tt-doble__burbuja[data-burbuja-max] { left: var(--b, 100%); }

.tt-doble__pista {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(48 * var(--tt-px));
  height: calc(5 * var(--tt-px));
  background: var(--tt-petroleo-15);
  border-radius: 999px;
}

.tt-doble__relleno {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--a, 0%);
  right: calc(100% - var(--b, 100%));
  background: var(--tt-petroleo);
  border-radius: 999px;
}

.tt-doble input[type="range"] {
  position: absolute;
  left: 0;
  top: calc(38 * var(--tt-px));
  width: 100%;
  height: calc(26 * var(--tt-px));
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.tt-doble input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
}

.tt-doble input[type="range"]::-moz-range-track {
  background: transparent;
}

.tt-doble input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(22 * var(--tt-px));
  height: calc(22 * var(--tt-px));
  border: calc(3 * var(--tt-px)) solid var(--tt-petroleo);
  border-radius: 50%;
  background: var(--tt-blanco);
  pointer-events: auto;
  cursor: pointer;
}

.tt-doble input[type="range"]::-moz-range-thumb {
  width: calc(16 * var(--tt-px));
  height: calc(16 * var(--tt-px));
  border: calc(3 * var(--tt-px)) solid var(--tt-petroleo);
  border-radius: 50%;
  background: var(--tt-blanco);
  pointer-events: auto;
  cursor: pointer;
}

/* Texto de las ventanas emergentes: el gris del sitio */
.tt-modal {
  color: var(--tt-gris);
}

.tt-hab-modal__servicios li {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--tt-px));
}

.tt-hab-modal__servicios i,
.tt-hab-modal__datos i {
  flex: 0 0 calc(20 * var(--tt-px));
  color: var(--tt-petroleo);
  text-align: center;
  font-size: calc(16 * var(--tt-px));
}

/* Sobre nosotros: introducción con collage */
.tt-sobre-intro {
  padding-block: calc(90 * var(--tt-px)) calc(60 * var(--tt-px));
}

.tt-sobre-intro__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(60 * var(--tt-px));
}

.tt-sobre-intro__texto {
  flex: 0 0 calc(640 * var(--tt-px));
}

.tt-sobre-intro__texto p {
  margin: 0 0 calc(24 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  line-height: 1.6;
}

.tt-collage {
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: calc(16 * var(--tt-px));
  height: calc(415 * var(--tt-px));
}

.tt-collage__img {
  min-height: 0;
  overflow: hidden;
  border-radius: calc(12 * var(--tt-px));
}

.tt-collage__img--grande {
  grid-row: span 2;
}

.tt-collage__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tarjetas con ícono (misión, visión, propósito y "qué encontrarás") */
.tt-sobre-pilares {
  padding-block: calc(40 * var(--tt-px)) calc(60 * var(--tt-px));
}

.tt-sobre-encontraras {
  padding-block: calc(40 * var(--tt-px)) calc(60 * var(--tt-px));
}

.tt-pilares__rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(40 * var(--tt-px));
}

.tt-sobre-encontraras .tt-pilares__rejilla {
  gap: calc(36 * var(--tt-px)) calc(40 * var(--tt-px));
}

.tt-pilar {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(24 * var(--tt-px));
  padding: calc(30 * var(--tt-px));
  background: var(--tt-blanco);
  border-radius: calc(12 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(16 * var(--tt-px)) rgb(0 0 0 / 12%);
  transition: transform 0.2s, box-shadow 0.2s;
}

.tt-pilar__icono {
  flex: 0 0 calc(64 * var(--tt-px));
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(64 * var(--tt-px));
  background: var(--tt-petroleo);
  border-radius: calc(10 * var(--tt-px));
  color: var(--tt-blanco);
  font-size: calc(26 * var(--tt-px));
}

.tt-pilar h3 {
  margin: 0 0 calc(6 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(18 * var(--tt-px));
  font-weight: 700;
}

.tt-pilar h3 a {
  color: inherit;
  text-decoration: none;
}

.tt-pilar h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.tt-pilar p {
  margin: 0;
  font-size: calc(14 * var(--tt-px));
  line-height: 1.5;
}

.tt-pilar:has(a):hover {
  transform: translateY(calc(-4 * var(--tt-px)));
  box-shadow: 0 calc(8 * var(--tt-px)) calc(24 * var(--tt-px)) rgb(0 0 0 / 18%);
}

.tt-pilar:has(a):hover h3 a {
  color: var(--tt-naranja);
}

.tt-pilar:has(:focus-visible) {
  outline: calc(2 * var(--tt-px)) solid var(--tt-turquesa);
  outline-offset: calc(-2 * var(--tt-px));
}

/* Valores */
.tt-sobre-valores {
  padding-block: calc(40 * var(--tt-px)) calc(60 * var(--tt-px));
}

.tt-valores__rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(28 * var(--tt-px));
}

.tt-valor {
  padding: calc(38 * var(--tt-px)) calc(40 * var(--tt-px));
  background: var(--tt-blanco);
  border-radius: calc(12 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(16 * var(--tt-px)) rgb(0 0 0 / 12%);
}

.tt-valor h3 {
  margin: 0 0 calc(8 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(18 * var(--tt-px));
  font-weight: 700;
}

.tt-valor p {
  margin: 0;
  font-size: calc(14 * var(--tt-px));
  line-height: 1.5;
}

/* Foto del usuario en el header y en el menú de perfil */
.tt-perfil__icono {
  display: inline-flex;
  align-items: center;
}

.tt-perfil__icono img {
  display: block;
  width: calc(28 * var(--tt-px));
  height: calc(28 * var(--tt-px));
  border-radius: 50%;
  object-fit: cover;
}

.tt-perfil__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--tt-blanco);
  font-size: calc(20 * var(--tt-px));
  font-weight: 600;
}

.tt-perfil__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ventana de inicio de sesión */
.tt-modal--login {
  width: calc(480 * var(--tt-px));
}

.tt-login {
  padding: calc(48 * var(--tt-px)) calc(44 * var(--tt-px)) calc(40 * var(--tt-px));
  text-align: center;
}

.tt-login h2 {
  margin: 0 0 calc(12 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(32 * var(--tt-px));
  font-weight: 700;
}

.tt-login p {
  margin: 0 0 calc(28 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  line-height: 1.5;
}

.tt-login__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--tt-px));
  width: 100%;
  padding: calc(14 * var(--tt-px)) calc(24 * var(--tt-px));
  background: var(--tt-blanco);
  border: calc(1 * var(--tt-px)) solid var(--tt-petroleo);
  border-radius: calc(8 * var(--tt-px));
  color: var(--tt-petroleo);
  font-family: var(--tt-fuente);
  font-size: calc(16 * var(--tt-px));
  font-weight: 600;
  cursor: pointer;
}

.tt-login__google:hover {
  border-color: var(--tt-naranja);
  color: var(--tt-naranja);
}

.tt-login p.tt-login__error {
  min-height: calc(20 * var(--tt-px));
  margin: calc(16 * var(--tt-px)) 0 0;
  color: #b91c1c;
  font-size: calc(14 * var(--tt-px));
}

/* Perfil: estructura y control de sesión */
.tt-perfil-pagina {
  padding-block: calc(80 * var(--tt-px));
}

.tt-gate {
  display: none;
  padding-block: calc(60 * var(--tt-px));
  text-align: center;
}

html:not(.tt-con-sesion) .tt-gate {
  display: block;
}

.tt-gate h2 {
  margin: 0 0 calc(12 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(32 * var(--tt-px));
}

.tt-gate p {
  margin: 0 0 calc(28 * var(--tt-px));
}

.tt-perfil-pagina__contenido {
  display: none;
}

html.tt-con-sesion .tt-perfil-pagina__contenido {
  display: flex;
}

.tt-perfil-pagina__interior {
  align-items: flex-start;
  gap: calc(70 * var(--tt-px));
}

.tt-perfil-pagina__principal {
  flex: 1;
  min-width: 0;
}

.tt-perfil-bloque {
  margin-top: calc(56 * var(--tt-px));
}

/* Barra lateral */
.tt-perfil-lateral {
  flex: 0 0 calc(400 * var(--tt-px));
  display: flex;
  flex-direction: column;
  gap: calc(32 * var(--tt-px));
}

.tt-perfil-lateral__cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(20 * var(--tt-px));
  text-align: center;
}

.tt-perfil-lateral__cabecera strong {
  color: var(--tt-petroleo);
  font-size: calc(18 * var(--tt-px));
}

.tt-perfil-lateral__cabecera span {
  font-size: calc(14 * var(--tt-px));
}

.tt-perfil-lateral__texto {
  margin: 0 0 calc(20 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  line-height: 1.5;
}

.tt-menu-perfil {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tt-menu-perfil a,
.tt-menu-perfil button {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--tt-px));
  width: 100%;
  padding: calc(12 * var(--tt-px)) calc(16 * var(--tt-px));
  background: none;
  border: 0;
  border-radius: calc(8 * var(--tt-px));
  color: var(--tt-gris);
  font-family: var(--tt-fuente);
  font-size: calc(16 * var(--tt-px));
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.tt-menu-perfil i {
  width: calc(20 * var(--tt-px));
  text-align: center;
  color: var(--tt-petroleo);
}

.tt-menu-perfil a:hover,
.tt-menu-perfil button:hover {
  color: var(--tt-naranja);
}

.tt-menu-perfil a.is-activo {
  background: var(--tt-petroleo-15);
  color: var(--tt-petroleo);
  font-weight: 600;
}

/* Tarjeta de perfil */
.tt-perfil-tarjeta {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(40 * var(--tt-px));
}

.tt-perfil-tarjeta__foto {
  flex: 0 0 calc(188 * var(--tt-px));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(188 * var(--tt-px));
  height: calc(188 * var(--tt-px));
  overflow: hidden;
  background: var(--tt-petroleo);
  border-radius: 50%;
  color: var(--tt-blanco);
  font-size: calc(64 * var(--tt-px));
  font-weight: 600;
}

.tt-perfil-tarjeta__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-perfil-tarjeta__datos h2 {
  margin: 0 0 calc(12 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(22 * var(--tt-px));
  font-weight: 700;
}

.tt-perfil-tarjeta__fila {
  margin: 0 0 calc(8 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
}

.tt-perfil-tarjeta__fila i {
  width: calc(22 * var(--tt-px));
  color: var(--tt-petroleo);
}

.tt-perfil-tarjeta__bio {
  max-width: calc(620 * var(--tt-px));
  margin: calc(14 * var(--tt-px)) 0 0;
  font-size: calc(16 * var(--tt-px));
  line-height: 1.5;
}

.tt-perfil-tarjeta__bio.is-vacia {
  font-style: italic;
  opacity: 0.8;
}

.tt-perfil-tarjeta__opciones {
  position: absolute;
  top: calc(18 * var(--tt-px));
  right: calc(18 * var(--tt-px));
}

.tt-perfil-tarjeta__puntos {
  width: calc(36 * var(--tt-px));
  height: calc(36 * var(--tt-px));
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--tt-gris);
  font-size: calc(18 * var(--tt-px));
  cursor: pointer;
}

.tt-perfil-tarjeta__puntos:hover {
  background: var(--tt-petroleo-15);
}

.tt-perfil-tarjeta__menu {
  position: absolute;
  top: calc(40 * var(--tt-px));
  right: 0;
  z-index: 5;
  min-width: calc(200 * var(--tt-px));
  margin: 0;
  padding: calc(8 * var(--tt-px));
  list-style: none;
  background: var(--tt-blanco);
  border-radius: calc(8 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(20 * var(--tt-px)) rgb(0 0 0 / 20%);
}

.tt-perfil-tarjeta__menu button {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--tt-px));
  width: 100%;
  padding: calc(10 * var(--tt-px)) calc(12 * var(--tt-px));
  background: none;
  border: 0;
  border-radius: calc(6 * var(--tt-px));
  color: var(--tt-petroleo);
  font-family: var(--tt-fuente);
  font-size: calc(14 * var(--tt-px));
  cursor: pointer;
}

.tt-perfil-tarjeta__menu button:hover {
  background: var(--tt-petroleo-15);
}

/* Favoritos */
.tt-fav__corazon {
  position: absolute;
  top: calc(12 * var(--tt-px));
  right: calc(12 * var(--tt-px));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(40 * var(--tt-px));
  height: calc(40 * var(--tt-px));
  background: var(--tt-naranja);
  border: 0;
  border-radius: 50%;
  color: var(--tt-blanco);
  font-size: calc(18 * var(--tt-px));
  cursor: pointer;
}

.tt-fav__corazon:hover {
  background: var(--tt-petroleo);
}

.tt-perfil-vacio {
  padding: calc(28 * var(--tt-px));
  background: var(--tt-petroleo-15);
  border-radius: calc(12 * var(--tt-px));
  text-align: center;
}

.tt-perfil-bloque .tt-centrado {
  margin-top: calc(32 * var(--tt-px));
}

/* Otros municipios */
.tt-otros {
  margin-top: calc(28 * var(--tt-px));
  padding-top: calc(24 * var(--tt-px));
  border-top: calc(1 * var(--tt-px)) solid var(--tt-petroleo-15);
}

.tt-otros__titulo {
  margin: 0 0 calc(12 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
}

.tt-otros__lista {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--tt-px));
}

.tt-otros__chip {
  padding: calc(8 * var(--tt-px)) calc(20 * var(--tt-px));
  border: calc(1 * var(--tt-px)) solid var(--tt-petroleo);
  border-radius: 999px;
  color: var(--tt-petroleo);
  font-size: calc(14 * var(--tt-px));
  text-decoration: none;
}

a.tt-otros__chip:hover {
  border-color: var(--tt-naranja);
  color: var(--tt-naranja);
}

/* Reseñas */
.tt-resenas-rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(28 * var(--tt-px));
}

.tt-resena-tarjeta {
  display: flex;
  align-items: flex-start;
  gap: calc(20 * var(--tt-px));
  padding: calc(22 * var(--tt-px)) calc(24 * var(--tt-px));
  background: var(--tt-blanco);
  border-radius: calc(12 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(16 * var(--tt-px)) rgb(0 0 0 / 12%);
}

.tt-resena-tarjeta__avatar {
  flex: 0 0 calc(70 * var(--tt-px));
  width: calc(70 * var(--tt-px));
  height: calc(70 * var(--tt-px));
  overflow: hidden;
  background: #d9d9d9;
  border-radius: 50%;
}

.tt-resena-tarjeta__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-resena-tarjeta__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(10 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
}

.tt-resena-tarjeta__cab strong {
  color: var(--tt-petroleo);
  font-size: calc(16 * var(--tt-px));
}

.tt-estrellas {
  color: #ffd400; /* amarillo aproximado del diseño */
  font-size: calc(16 * var(--tt-px));
  letter-spacing: calc(2 * var(--tt-px));
}

.tt-resena-tarjeta__lugar {
  margin: calc(6 * var(--tt-px)) 0 0;
  font-size: calc(13 * var(--tt-px));
}

.tt-resena-tarjeta__lugar a {
  color: var(--tt-turquesa);
  text-decoration: none;
}

.tt-resena-tarjeta__texto {
  margin: calc(8 * var(--tt-px)) 0 0;
  font-size: calc(14 * var(--tt-px));
  line-height: 1.5;
}

/* Editar perfil */
.tt-modal--editar {
  width: calc(560 * var(--tt-px));
}

.tt-editar {
  padding: calc(44 * var(--tt-px));
}

.tt-editar h2 {
  margin: 0 0 calc(24 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(28 * var(--tt-px));
}

.tt-editar label {
  display: block;
  margin-bottom: calc(6 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(14 * var(--tt-px));
  font-weight: 600;
}

.tt-editar input,
.tt-editar textarea {
  width: 100%;
  margin-bottom: calc(18 * var(--tt-px));
  padding: calc(12 * var(--tt-px)) calc(14 * var(--tt-px));
  border: calc(1 * var(--tt-px)) solid var(--tt-petroleo-15);
  border-radius: calc(6 * var(--tt-px));
  color: var(--tt-gris);
  font-family: var(--tt-fuente);
  font-size: calc(14 * var(--tt-px));
  box-sizing: border-box;
  resize: vertical;
}

.tt-editar__contador {
  display: block;
  margin-top: calc(-12 * var(--tt-px));
  text-align: right;
  font-size: calc(12 * var(--tt-px));
}

.tt-editar__botones {
  display: flex;
  gap: calc(16 * var(--tt-px));
  justify-content: flex-end;
  margin-top: calc(8 * var(--tt-px));
}

.tt-editar .tt-login__error {
  margin: 0;
  text-align: left;
}

/* Cuadro de ejemplos (solo localhost) */
.tt-demo {
  margin-top: calc(56 * var(--tt-px));
  padding: calc(24 * var(--tt-px));
  border: calc(2 * var(--tt-px)) dashed var(--tt-petroleo);
  border-radius: calc(12 * var(--tt-px));
}

.tt-demo p {
  margin: calc(6 * var(--tt-px)) 0 calc(16 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
}

.tt-demo .tt-boton-borde {
  margin-right: calc(12 * var(--tt-px));
  background: transparent;
  font-family: var(--tt-fuente);
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* Corazón de favoritos */
.tt-corazon {
  position: absolute;
  top: calc(12 * var(--tt-px));
  right: calc(12 * var(--tt-px));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(40 * var(--tt-px));
  height: calc(40 * var(--tt-px));
  background: rgb(255 255 255 / 90%);
  border: 0;
  border-radius: 50%;
  color: var(--tt-petroleo);
  font-size: calc(18 * var(--tt-px));
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.tt-corazon:hover {
  background: var(--tt-blanco);
  color: var(--tt-naranja);
}

.tt-corazon.is-activo {
  background: var(--tt-naranja);
  color: var(--tt-blanco);
}

.tt-accion__texto {
  font-style: normal;
}

/* Estado de una reseña */
.tt-resena-tarjeta__estado {
  display: inline-block;
  padding: calc(2 * var(--tt-px)) calc(10 * var(--tt-px));
  background: var(--tt-petroleo-15);
  border-radius: 999px;
  color: var(--tt-petroleo);
  font-size: calc(12 * var(--tt-px));
  font-weight: 600;
}

.tt-resena-tarjeta__estado--rechazada {
  background: #fee2e2;
  color: #b91c1c;
}

/* Ventana de reseña */
.tt-modal--resena {
  width: calc(680 * var(--tt-px));
}

.tt-resena-form,
.tt-resena-gracias {
  padding: calc(48 * var(--tt-px)) calc(48 * var(--tt-px)) calc(40 * var(--tt-px));
}

.tt-resena-form h2,
.tt-resena-gracias h2 {
  margin: 0 0 calc(12 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(32 * var(--tt-px));
  font-weight: 700;
}

.tt-resena-form > p {
  margin: 0 0 calc(24 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  line-height: 1.5;
}

.tt-resena-form__etiqueta {
  display: block;
  margin-bottom: calc(10 * var(--tt-px));
  color: var(--tt-gris);
  font-size: calc(16 * var(--tt-px));
  font-weight: 600;
}

.tt-estrellas-input {
  display: flex;
  gap: calc(8 * var(--tt-px));
  margin-bottom: calc(24 * var(--tt-px));
}

.tt-estrellas-input button {
  padding: 0;
  background: none;
  border: 0;
  color: #ffd400;
  font-size: calc(36 * var(--tt-px));
  cursor: pointer;
}

.tt-resena-campo {
  position: relative;
}

.tt-resena-campo textarea {
  width: 100%;
  padding: calc(16 * var(--tt-px)) calc(18 * var(--tt-px)) calc(36 * var(--tt-px));
  border: calc(1 * var(--tt-px)) solid var(--tt-gris);
  border-radius: calc(8 * var(--tt-px));
  color: var(--tt-gris);
  font-family: var(--tt-fuente);
  font-size: calc(16 * var(--tt-px));
  line-height: 1.5;
  box-sizing: border-box;
  resize: vertical;
}

.tt-resena-campo__contador {
  position: absolute;
  right: calc(18 * var(--tt-px));
  bottom: calc(12 * var(--tt-px));
  font-size: calc(14 * var(--tt-px));
}

.tt-resena-form__botones {
  display: flex;
  gap: calc(20 * var(--tt-px));
  margin-top: calc(8 * var(--tt-px));
}

.tt-resena-form__botones > * {
  flex: 1;
  justify-content: center;
}

.tt-resena-form .tt-login__error {
  margin: calc(12 * var(--tt-px)) 0 calc(4 * var(--tt-px));
  text-align: left;
}

.tt-resena-gracias {
  text-align: center;
}

.tt-resena-gracias h2 {
  text-align: left;
}

.tt-resena-gracias .tt-resena-tarjeta {
  margin-bottom: calc(32 * var(--tt-px));
  text-align: left;
}

.tt-resena-gracias h3 {
  margin: 0 0 calc(8 * var(--tt-px));
  font-size: calc(18 * var(--tt-px));
}

.tt-resena-gracias p {
  margin: 0 0 calc(24 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  line-height: 1.5;
}

/* Menú de la tarjeta del perfil: ahora también acepta enlaces */
.tt-perfil-tarjeta__menu a {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--tt-px));
  padding: calc(10 * var(--tt-px)) calc(12 * var(--tt-px));
  border-radius: calc(6 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(14 * var(--tt-px));
  text-decoration: none;
}

.tt-perfil-tarjeta__menu a:hover {
  background: var(--tt-petroleo-15);
}

/* Aviso de sincronización */
.tt-sync {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--tt-px));
  margin-bottom: calc(36 * var(--tt-px));
  padding: calc(20 * var(--tt-px)) calc(26 * var(--tt-px));
  background: var(--tt-blanco);
  border-radius: calc(12 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(16 * var(--tt-px)) rgb(0 0 0 / 12%);
}

.tt-sync > i {
  color: var(--tt-petroleo);
  font-size: calc(22 * var(--tt-px));
}

.tt-sync strong {
  display: block;
  color: var(--tt-petroleo);
  font-size: calc(14 * var(--tt-px));
}

.tt-sync span {
  font-size: calc(14 * var(--tt-px));
}

/* Barra de búsqueda y orden */
.tt-barra-listado {
  display: flex;
  gap: calc(20 * var(--tt-px));
  margin-bottom: calc(20 * var(--tt-px));
}

.tt-barra-listado__buscar {
  position: relative;
  flex: 1;
}

.tt-barra-listado__buscar i {
  position: absolute;
  top: 50%;
  left: calc(20 * var(--tt-px));
  transform: translateY(-50%);
  color: var(--tt-gris);
}

.tt-barra-listado input,
.tt-barra-listado select {
  width: 100%;
  padding: calc(14 * var(--tt-px)) calc(18 * var(--tt-px));
  background: var(--tt-blanco);
  border: calc(1 * var(--tt-px)) solid var(--tt-gris);
  border-radius: calc(8 * var(--tt-px));
  color: var(--tt-gris);
  font-family: var(--tt-fuente);
  font-size: calc(14 * var(--tt-px));
  box-sizing: border-box;
}

.tt-barra-listado input {
  padding-left: calc(56 * var(--tt-px));
}

.tt-barra-listado select {
  width: calc(220 * var(--tt-px));
  cursor: pointer;
}

.tt-pildoras {
  display: flex;
  flex-wrap: wrap;
  gap: calc(14 * var(--tt-px));
  margin-bottom: calc(28 * var(--tt-px));
}

/* Lista de reseñas */
.tt-resenas-lista {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--tt-px));
}

.tt-resena-tarjeta {
  position: relative;
}

.tt-resena-tarjeta__cuerpo {
  flex: 1;
  min-width: 0;
  padding-right: calc(36 * var(--tt-px));
}

.tt-resena-tarjeta__opciones {
  position: absolute;
  top: calc(14 * var(--tt-px));
  right: calc(14 * var(--tt-px));
}

.tt-resena-tarjeta__puntos {
  width: calc(36 * var(--tt-px));
  height: calc(36 * var(--tt-px));
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--tt-gris);
  font-size: calc(16 * var(--tt-px));
  cursor: pointer;
}

.tt-resena-tarjeta__puntos:hover {
  background: var(--tt-petroleo-15);
}

.tt-menu-tarjeta {
  position: absolute;
  top: calc(38 * var(--tt-px));
  right: 0;
  z-index: 5;
  min-width: calc(170 * var(--tt-px));
  margin: 0;
  padding: calc(8 * var(--tt-px));
  list-style: none;
  background: var(--tt-blanco);
  border-radius: calc(8 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(20 * var(--tt-px)) rgb(0 0 0 / 20%);
}

.tt-menu-tarjeta button {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--tt-px));
  width: 100%;
  padding: calc(10 * var(--tt-px)) calc(12 * var(--tt-px));
  background: none;
  border: 0;
  border-radius: calc(6 * var(--tt-px));
  color: var(--tt-petroleo);
  font-family: var(--tt-fuente);
  font-size: calc(14 * var(--tt-px));
  cursor: pointer;
}

.tt-menu-tarjeta button:hover {
  background: var(--tt-petroleo-15);
}

/* Municipios secundarios */
.tt-otros-bloque {
  margin-top: calc(56 * var(--tt-px));
}

.tt-otros-grupo {
  margin-top: calc(40 * var(--tt-px));
  padding-top: calc(32 * var(--tt-px));
  border-top: calc(1 * var(--tt-px)) solid var(--tt-petroleo-15);
}

.tt-otros-grupo__titulo {
  margin: 0 0 calc(24 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(24 * var(--tt-px));
  font-weight: 700;
}

.tt-otros-grupo .tt-centrado {
  margin-top: calc(24 * var(--tt-px));
}

/* Paginación con botones */
.tt-paginacion button.page-numbers {
  border: 0;
  font-family: var(--tt-fuente);
  cursor: pointer;
}

.tt-paginacion button.page-numbers:disabled {
  opacity: 0.4;
  cursor: default;
}

.tt-paginacion .page-numbers.dots {
  box-shadow: none;
  background: none;
}

/* Confirmar eliminación */
.tt-modal--confirmar {
  width: calc(480 * var(--tt-px));
}

.tt-confirmar {
  padding: calc(40 * var(--tt-px));
  text-align: center;
}

.tt-confirmar h2 {
  margin: 0 0 calc(12 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(24 * var(--tt-px));
}

.tt-confirmar p {
  margin: 0 0 calc(28 * var(--tt-px));
  line-height: 1.5;
}

.tt-confirmar__botones {
  display: flex;
  gap: calc(16 * var(--tt-px));
}

.tt-confirmar__botones > * {
  flex: 1;
  justify-content: center;
}

/* Editar perfil */
.tt-form-perfil {
  padding: calc(40 * var(--tt-px)) calc(44 * var(--tt-px));
}

.tt-form-perfil__titulo {
  margin: 0 0 calc(24 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(18 * var(--tt-px));
  font-weight: 700;
}

.tt-foto-editar {
  display: flex;
  align-items: center;
  gap: calc(36 * var(--tt-px));
  margin-bottom: calc(36 * var(--tt-px));
}

.tt-foto-editar__foto {
  flex: 0 0 calc(152 * var(--tt-px));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(152 * var(--tt-px));
  height: calc(152 * var(--tt-px));
  overflow: hidden;
  background: var(--tt-petroleo);
  border-radius: 50%;
  color: var(--tt-blanco);
  font-size: calc(56 * var(--tt-px));
  font-weight: 600;
}

.tt-foto-editar__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-foto-editar__botones {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--tt-px));
}

.tt-boton-borde--gris {
  border-color: var(--tt-gris);
  color: var(--tt-gris);
}

.tt-ayuda {
  margin: calc(12 * var(--tt-px)) 0 0;
  font-size: calc(14 * var(--tt-px));
  opacity: 0.75;
}

.tt-campos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(22 * var(--tt-px)) calc(24 * var(--tt-px));
}

.tt-campo--2 { grid-column: span 2; }
.tt-campo--3 { grid-column: span 3; }
.tt-campo--6 { grid-column: span 6; }

.tt-campo label {
  display: block;
  margin-bottom: calc(8 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(16 * var(--tt-px));
  font-weight: 600;
}

.tt-campo input,
.tt-campo textarea {
  width: 100%;
  padding: calc(15 * var(--tt-px)) calc(18 * var(--tt-px));
  background: var(--tt-blanco);
  border: calc(1 * var(--tt-px)) solid var(--tt-gris);
  border-radius: calc(8 * var(--tt-px));
  color: var(--tt-gris);
  font-family: var(--tt-fuente);
  font-size: calc(16 * var(--tt-px));
  box-sizing: border-box;
}

.tt-campo input:disabled {
  background: #f3f4f6;
  border-color: var(--tt-petroleo-15);
  opacity: 0.8;
}

.tt-campo input:focus,
.tt-campo textarea:focus {
  outline: calc(2 * var(--tt-px)) solid var(--tt-turquesa);
  outline-offset: 0;
}

.tt-form-perfil .tt-login__error {
  margin: calc(16 * var(--tt-px)) 0 0;
  text-align: left;
}

.tt-form-perfil__ok {
  margin: calc(16 * var(--tt-px)) 0 0;
  color: var(--tt-petroleo);
  font-weight: 600;
}

.tt-form-perfil__botones {
  display: flex;
  justify-content: center;
  gap: calc(24 * var(--tt-px));
  margin-top: calc(32 * var(--tt-px));
}

.tt-form-perfil__botones > * {
  min-width: calc(260 * var(--tt-px));
  justify-content: center;
  text-align: center;
}

.tt-barra-listado__buscar {
  position: relative;
  display: block;
  flex: 1;
}
.tt-barra-listado__buscar i,
.tt-barra-listado__buscar svg {
  position: absolute;
  left: calc(24 * var(--tt-px));
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--tt-gris);
}
.tt-barra-listado__buscar input {
  width: 100%;
  box-sizing: border-box;
  padding-left: calc(64 * var(--tt-px));
}
ul.tt-contacto--lateral{
  padding:0px;
}

/* ===== Formularios (Contacto, Publicar negocio, Publicar evento) — agregar al final de base.css ===== */

/* ---------- Contacto: disposición ---------- */
.tt-contacto { padding: calc(64 * var(--tt-px)) 0 calc(96 * var(--tt-px)); }
.tt-contacto__interior {
  display: grid;
  grid-template-columns: calc(400 * var(--tt-px)) 1fr;
  gap: calc(72 * var(--tt-px));
  align-items: start;
}
.tt-contacto__principal { min-width: 0; }

/* ---------- Tarjeta de información ---------- */
.tt-info-card {
  background: var(--tt-blanco);
  border-radius: calc(16 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(20 * var(--tt-px)) rgba(0, 0, 0, .10);
  padding: calc(28 * var(--tt-px));
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--tt-px));
}
.tt-info-card__titulo {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--tt-px));
  margin: 0;
  font-size: calc(22 * var(--tt-px));
  font-weight: 600;
  color: var(--tt-petroleo);
}
.tt-info-card__intro { margin: calc(-14 * var(--tt-px)) 0 0; font-size: calc(18 * var(--tt-px)); color: var(--tt-gris); line-height: 1.4; }
.tt-info-card__bloque { display: flex; flex-direction: column; gap: calc(4 * var(--tt-px)); font-size: calc(18 * var(--tt-px)); color: var(--tt-gris); }
.tt-info-card__bloque strong { color: var(--tt-petroleo); font-weight: 600; }
.tt-info-card__bloque a { color: inherit; text-decoration: none; }
.tt-info-card__bloque a:hover { text-decoration: underline; }

.tt-redes-contacto { list-style: none; margin: calc(8 * var(--tt-px)) 0 0; padding: 0; display: flex; gap: calc(22 * var(--tt-px)); }
.tt-redes-contacto li { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--tt-px)); }
.tt-redes-contacto a {
  width: calc(54 * var(--tt-px));
  height: calc(54 * var(--tt-px));
  border-radius: calc(12 * var(--tt-px));
  background: var(--tt-naranja);
  color: var(--tt-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(26 * var(--tt-px));
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.tt-redes-contacto a:hover { transform: translateY(-2px); filter: brightness(.95); }
.tt-redes-contacto span { font-size: calc(13 * var(--tt-px)); color: var(--tt-gris); }

/* ---------- Formulario ---------- */
.tt-form--tarjeta {
  position: relative;
  background: var(--tt-blanco);
  border-radius: calc(16 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(20 * var(--tt-px)) rgba(0, 0, 0, .10);
  padding: calc(32 * var(--tt-px));
  margin-top: calc(28 * var(--tt-px));
}
.tt-form__seccion {
  margin: 0 0 calc(18 * var(--tt-px));
  font-size: calc(24 * var(--tt-px));
  font-weight: 600;
  color: var(--tt-petroleo);
}
.tt-form__rejilla + .tt-form__seccion { margin-top: calc(34 * var(--tt-px)); }
.tt-form__rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(18 * var(--tt-px)) calc(24 * var(--tt-px));
}
.tt-campo { display: flex; flex-direction: column; gap: calc(8 * var(--tt-px)); min-width: 0; }
.tt-campo--ancho { grid-column: 1 / -1; }
.tt-campo label { font-size: calc(18 * var(--tt-px)); font-weight: 600; color: var(--tt-petroleo); }

.tt-form input[type="text"],
.tt-form input[type="email"],
.tt-form input[type="tel"],
.tt-form input[type="date"],
.tt-form select,
.tt-form textarea {
  width: 100%;
  box-sizing: border-box;
  height: calc(56 * var(--tt-px));
  padding: 0 calc(16 * var(--tt-px));
  border: 1px solid var(--tt-gris);
  border-radius: calc(10 * var(--tt-px));
  background: var(--tt-blanco);
  font: inherit;
  font-size: calc(17 * var(--tt-px));
  color: var(--tt-gris);
}
.tt-form textarea { height: calc(170 * var(--tt-px)); padding: calc(16 * var(--tt-px)); resize: none; line-height: 1.4; }
.tt-form ::placeholder { color: #9a9a9a; opacity: 1; }
.tt-form input:focus,
.tt-form select:focus,
.tt-form textarea:focus { outline: 2px solid var(--tt-turquesa); outline-offset: 1px; }

.tt-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(48 * var(--tt-px));
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right calc(18 * var(--tt-px)) center;
  background-size: calc(14 * var(--tt-px));
}

.tt-campo__caja { position: relative; }
.tt-campo__contador {
  position: absolute;
  right: calc(16 * var(--tt-px));
  bottom: calc(12 * var(--tt-px));
  font-size: calc(16 * var(--tt-px));
  color: #9a9a9a;
  pointer-events: none;
}

/* Aviso "¿Qué pasa después?" */
.tt-form__aviso {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--tt-px));
  margin-top: calc(28 * var(--tt-px));
  padding: calc(18 * var(--tt-px)) calc(22 * var(--tt-px));
  border-radius: calc(12 * var(--tt-px));
  background: var(--tt-petroleo-15);
}
.tt-form__aviso-icono {
  flex: 0 0 auto;
  width: calc(64 * var(--tt-px));
  height: calc(64 * var(--tt-px));
  border-radius: 50%;
  background: var(--tt-petroleo);
  color: var(--tt-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(28 * var(--tt-px));
}
.tt-form__aviso strong { display: block; font-size: calc(17 * var(--tt-px)); color: var(--tt-petroleo); }
.tt-form__aviso p { margin: calc(4 * var(--tt-px)) 0 0; font-size: calc(16 * var(--tt-px)); color: var(--tt-gris); line-height: 1.4; }

.tt-form__error { min-height: 0; margin: calc(14 * var(--tt-px)) 0 0; font-size: calc(16 * var(--tt-px)); color: #c0392b; text-align: center; }
.tt-form__error:empty { display: none; }

.tt-form__acciones { display: flex; justify-content: center; margin-top: calc(26 * var(--tt-px)); }
.tt-form__boton {
  min-width: calc(290 * var(--tt-px));
  height: calc(56 * var(--tt-px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--tt-px));
  border: 0;
  cursor: pointer;
}
.tt-form__boton:disabled { opacity: .6; cursor: default; }

.tt-form__ok { text-align: center; padding: calc(32 * var(--tt-px)) calc(16 * var(--tt-px)); }
.tt-form__ok[hidden] { display: none; }
.tt-form__ok i { font-size: calc(56 * var(--tt-px)); color: var(--tt-turquesa); }
.tt-form__ok h3 { margin: calc(14 * var(--tt-px)) 0 calc(6 * var(--tt-px)); font-size: calc(26 * var(--tt-px)); color: var(--tt-petroleo); }
.tt-form__ok p { margin: 0; font-size: calc(18 * var(--tt-px)); color: var(--tt-gris); }

/* Campo trampa (invisible para personas) */
.tt-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Preguntas frecuentes ---------- */
.tt-faq__titulo { margin-top: calc(80 * var(--tt-px)); }
.tt-faq { display: flex; flex-direction: column; gap: calc(18 * var(--tt-px)); margin-top: calc(26 * var(--tt-px)); }
.tt-faq__item {
  background: var(--tt-blanco);
  border-radius: calc(14 * var(--tt-px));
  box-shadow: 0 calc(3 * var(--tt-px)) calc(14 * var(--tt-px)) rgba(0, 0, 0, .10);
}
.tt-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--tt-px));
  padding: calc(26 * var(--tt-px)) calc(32 * var(--tt-px));
  font-size: calc(20 * var(--tt-px));
  font-weight: 600;
  color: var(--tt-petroleo);
}
.tt-faq__item summary::-webkit-details-marker { display: none; }
.tt-faq__item summary i,
.tt-faq__item summary svg { flex: 0 0 auto; transition: transform .2s ease; }
.tt-faq__item[open] summary i,
.tt-faq__item[open] summary svg { transform: rotate(180deg); }
.tt-faq__respuesta { padding: 0 calc(32 * var(--tt-px)) calc(28 * var(--tt-px)); }
.tt-faq__respuesta p { margin: 0 0 calc(18 * var(--tt-px)); font-size: calc(17 * var(--tt-px)); line-height: 1.5; color: var(--tt-gris); }
.tt-faq__respuesta p:last-child { margin-bottom: 0; }

/* Para que "hidden" funcione aunque el elemento tenga display propio */
.tt-form [hidden] { display: none !important; }

/* Flecha de "Mi perfil": solo al pasar el mouse */
.tt-perfil__lista a .tt-perfil__flecha {
  opacity: 0;
  transform: translateX(calc(-6 * var(--tt-px)));
  transition: opacity .15s ease, transform .15s ease;
}
.tt-perfil__lista a:hover .tt-perfil__flecha,
.tt-perfil__lista a:focus-visible .tt-perfil__flecha {
  opacity: 1;
  transform: none;
}

/* Número de favoritos y reseñas */
.tt-perfil__conteo {
  margin-left: auto;
  min-width: calc(28 * var(--tt-px));
  height: calc(28 * var(--tt-px));
  padding: 0 calc(8 * var(--tt-px));
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--tt-petroleo-15);
  color: var(--tt-petroleo);
  font-size: calc(14 * var(--tt-px));
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tt-perfil__conteo[hidden] { display: none; }

.tt-perfil__lista a .tt-perfil__flecha { margin-left: auto; }
.tt-perfil__lista a .tt-perfil__conteo ~ .tt-perfil__flecha { margin-left: calc(12 * var(--tt-px)); }

/* ===== Avisos y botón "Volver arriba" — agregar al final de base.css ===== */

/* ---------- Avisos ---------- */
.tt-avisos {
  position: fixed;
  left: 50%;
  bottom: calc(32 * var(--tt-px));
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--tt-px));
  width: min(calc(560 * var(--tt-px)), calc(100vw - 32px));
  pointer-events: none;
}
.tt-aviso {
  --aviso-color: var(--tt-naranja);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: calc(16 * var(--tt-px));
  padding: calc(14 * var(--tt-px)) calc(16 * var(--tt-px)) calc(14 * var(--tt-px)) calc(18 * var(--tt-px));
  background: var(--tt-blanco);
  border-radius: calc(14 * var(--tt-px));
  border-left: calc(6 * var(--tt-px)) solid var(--aviso-color);
  box-shadow: 0 calc(8 * var(--tt-px)) calc(28 * var(--tt-px)) rgba(0, 0, 0, .18);
  opacity: 0;
  transform: translateY(calc(16 * var(--tt-px)));
  transition: opacity .25s ease, transform .25s ease;
}
.tt-aviso.is-visible { opacity: 1; transform: none; }
.tt-aviso--favorito { --aviso-color: var(--tt-naranja); }
.tt-aviso--neutro   { --aviso-color: var(--tt-petroleo); }
.tt-aviso--ok       { --aviso-color: var(--tt-turquesa); }
.tt-aviso--error    { --aviso-color: #c0392b; }

.tt-aviso__icono {
  flex: 0 0 auto;
  width: calc(44 * var(--tt-px));
  height: calc(44 * var(--tt-px));
  border-radius: 50%;
  background: var(--aviso-color);
  color: var(--tt-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(20 * var(--tt-px));
}
.tt-aviso__cuerpo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: calc(2 * var(--tt-px)); }
.tt-aviso__cuerpo strong { font-size: calc(18 * var(--tt-px)); font-weight: 600; color: var(--tt-petroleo); }
.tt-aviso__texto {
  font-size: calc(16 * var(--tt-px));
  color: var(--tt-gris);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tt-aviso__cuerpo a { font-size: calc(16 * var(--tt-px)); font-weight: 600; color: var(--tt-naranja); text-decoration: none; }
.tt-aviso__cuerpo a:hover { text-decoration: underline; }
.tt-aviso__cerrar {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--tt-gris);
  font-size: calc(18 * var(--tt-px));
  padding: calc(8 * var(--tt-px));
  cursor: pointer;
}
.tt-aviso__cerrar:hover { color: var(--tt-petroleo); }

/* ---------- Volver arriba ---------- */
.tt-subir {
  position: fixed;
  right: calc(32 * var(--tt-px));
  bottom: calc(32 * var(--tt-px));
  z-index: 900;
  width: calc(56 * var(--tt-px));
  height: calc(56 * var(--tt-px));
  border: 0;
  border-radius: 50%;
  background: var(--tt-petroleo);
  color: var(--tt-blanco);
  font-size: calc(22 * var(--tt-px));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 calc(6 * var(--tt-px)) calc(20 * var(--tt-px)) rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(12 * var(--tt-px)));
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .15s ease;
}
.tt-subir.is-visible { opacity: 1; visibility: visible; transform: none; }
.tt-subir:hover { background: var(--tt-naranja); }

@media (prefers-reduced-motion: reduce) {
  .tt-aviso, .tt-subir { transition: none; }
}

/* ===== Banner de negocio / evento con dos botones — agregar al final de base.css ===== */
.tt-negocio__botones {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--tt-px));
}
.tt-negocio .tt-boton--blanco {
  background: var(--tt-blanco);
  color: var(--tt-petroleo);
}
.tt-negocio .tt-boton--blanco:hover {
  background: var(--tt-petroleo-15);
  color: var(--tt-petroleo);
}

/* ===== Páginas de Publicidad y Política de privacidad — agregar al final de base.css ===== */
/* (usa también los estilos de formularios.css: .tt-form, .tt-faq, .tt-info-card) */

/* ---------- Secciones ---------- */
.tt-seccion { padding: calc(80 * var(--tt-px)) 0; }
.tt-seccion--suave { background: var(--tt-petroleo-15); }
.tt-seccion .tt-subtitulo { margin-bottom: 0; }

/* ---------- Publicidad: presentación ---------- */
.tt-pub-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(72 * var(--tt-px));
  align-items: center;
}
.tt-pub-intro__texto p { margin: calc(18 * var(--tt-px)) 0 0; font-size: calc(19 * var(--tt-px)); line-height: 1.6; color: var(--tt-gris); }
.tt-pub-intro__botones { display: flex; flex-wrap: wrap; gap: calc(16 * var(--tt-px)); margin-top: calc(32 * var(--tt-px)); }
.tt-pub-intro__imagen { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(16 * var(--tt-px)); }

/* ---------- Publicidad: beneficios ---------- */
.tt-beneficios {
  list-style: none;
  margin: calc(40 * var(--tt-px)) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(32 * var(--tt-px));
}
.tt-beneficio {
  background: var(--tt-blanco);
  border-radius: calc(16 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(20 * var(--tt-px)) rgba(0, 0, 0, .08);
  padding: calc(32 * var(--tt-px));
}
.tt-beneficio__icono {
  width: calc(64 * var(--tt-px));
  height: calc(64 * var(--tt-px));
  border-radius: 50%;
  background: var(--tt-petroleo-15);
  color: var(--tt-petroleo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(26 * var(--tt-px));
}
.tt-beneficio h3 { margin: calc(20 * var(--tt-px)) 0 calc(8 * var(--tt-px)); font-size: calc(22 * var(--tt-px)); font-weight: 600; color: var(--tt-petroleo); }
.tt-beneficio p { margin: 0; font-size: calc(17 * var(--tt-px)); line-height: 1.5; color: var(--tt-gris); }

/* ---------- Publicidad: espacios ---------- */
.tt-espacios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(32 * var(--tt-px));
  margin-top: calc(40 * var(--tt-px));
}
.tt-espacio {
  display: flex;
  flex-direction: column;
  background: var(--tt-blanco);
  border-radius: calc(16 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(20 * var(--tt-px)) rgba(0, 0, 0, .10);
  border-top: calc(6 * var(--tt-px)) solid var(--tt-naranja);
  padding: calc(32 * var(--tt-px));
}
.tt-espacio__icono {
  width: calc(64 * var(--tt-px));
  height: calc(64 * var(--tt-px));
  border-radius: calc(16 * var(--tt-px));
  background: var(--tt-naranja);
  color: var(--tt-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(28 * var(--tt-px));
}
.tt-espacio h3 { margin: calc(20 * var(--tt-px)) 0 calc(8 * var(--tt-px)); font-size: calc(24 * var(--tt-px)); font-weight: 600; color: var(--tt-petroleo); }
.tt-espacio > p { margin: 0; font-size: calc(17 * var(--tt-px)); line-height: 1.5; color: var(--tt-gris); }
.tt-espacio ul { list-style: none; margin: calc(20 * var(--tt-px)) 0 0; padding: 0; display: flex; flex-direction: column; gap: calc(10 * var(--tt-px)); }
.tt-espacio li { font-size: calc(17 * var(--tt-px)); color: var(--tt-gris); }
.tt-espacio li i, .tt-espacio li svg { color: var(--tt-turquesa); margin-right: calc(6 * var(--tt-px)); }
.tt-espacio .tt-espacio__precio { margin: calc(24 * var(--tt-px)) 0 calc(16 * var(--tt-px)); font-size: calc(18 * var(--tt-px)); font-weight: 600; color: var(--tt-petroleo); }
.tt-espacio .tt-boton { margin-top: auto; text-align: center; }

/* ---------- Publicidad: pasos ---------- */
.tt-pasos {
  list-style: none;
  margin: calc(40 * var(--tt-px)) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(32 * var(--tt-px));
}
.tt-paso { text-align: center; }
.tt-paso__numero {
  width: calc(64 * var(--tt-px));
  height: calc(64 * var(--tt-px));
  margin: 0 auto;
  border-radius: 50%;
  background: var(--tt-petroleo);
  color: var(--tt-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(28 * var(--tt-px));
  font-weight: 700;
}
.tt-paso h3 { margin: calc(20 * var(--tt-px)) 0 calc(8 * var(--tt-px)); font-size: calc(21 * var(--tt-px)); font-weight: 600; color: var(--tt-petroleo); }
.tt-paso p { margin: 0; font-size: calc(17 * var(--tt-px)); line-height: 1.5; color: var(--tt-gris); }

/* ---------- Publicidad: formulario y preguntas (columna centrada) ---------- */
.tt-pub-formulario { max-width: calc(1100 * var(--tt-px));
  margin-left: auto;
  margin-right: auto; }
.tt-pub-formulario .tt-form--tarjeta { margin-top: calc(32 * var(--tt-px)); }
.tt-seccion .tt-faq { margin-top: calc(32 * var(--tt-px)); }

/* ---------- Política de privacidad ---------- */
.tt-legal { padding: calc(64 * var(--tt-px)) 0 calc(96 * var(--tt-px)); }
.tt-legal__interior {
  display: grid;
  grid-template-columns: calc(400 * var(--tt-px)) 1fr;
  gap: calc(72 * var(--tt-px));
  align-items: start;
}
.tt-legal__indice { position: sticky; top: calc(32 * var(--tt-px)); }
.tt-legal__indice ol { margin: 0; padding-left: calc(24 * var(--tt-px)); display: flex; flex-direction: column; gap: calc(10 * var(--tt-px)); }
.tt-legal__indice li { font-size: calc(17 * var(--tt-px)); color: var(--tt-gris); }
.tt-legal__indice a { color: var(--tt-gris); text-decoration: none; }
.tt-legal__indice a:hover { color: var(--tt-petroleo); text-decoration: underline; }

.tt-legal__contenido { min-width: 0; }
.tt-legal__fecha { margin: calc(8 * var(--tt-px)) 0 0; font-size: calc(16 * var(--tt-px)); color: var(--tt-turquesa); font-weight: 600; }
.tt-legal__intro { margin: calc(20 * var(--tt-px)) 0 0; font-size: calc(19 * var(--tt-px)); line-height: 1.6; color: var(--tt-gris); }
.tt-legal__seccion { margin-top: calc(44 * var(--tt-px)); scroll-margin-top: calc(32 * var(--tt-px)); }
.tt-legal__seccion h3 { margin: 0 0 calc(14 * var(--tt-px)); font-size: calc(26 * var(--tt-px)); font-weight: 600; color: var(--tt-petroleo); }
.tt-legal__seccion h3 span { color: var(--tt-naranja); margin-right: calc(4 * var(--tt-px)); }
.tt-legal__seccion p,
.tt-legal__seccion li { font-size: calc(18 * var(--tt-px)); line-height: 1.7; color: var(--tt-gris); }
.tt-legal__seccion p { margin: 0 0 calc(14 * var(--tt-px)); }
.tt-legal__seccion ul { margin: 0 0 calc(14 * var(--tt-px)); padding-left: calc(26 * var(--tt-px)); display: flex; flex-direction: column; gap: calc(8 * var(--tt-px)); }
.tt-legal__seccion strong { color: var(--tt-petroleo); font-weight: 600; }
.tt-legal__seccion a { color: var(--tt-turquesa); }

/* ===== Página del mapa — agregar al final de base.css ===== */
/* (reutiliza .tt-caja, .tt-check y .tt-boton de las categorías) */

.tt-mapa { padding: calc(48 * var(--tt-px)) 0 calc(80 * var(--tt-px)); }
.tt-mapa__interior {
  display: grid;
  grid-template-columns: calc(400 * var(--tt-px)) 1fr;
  gap: calc(40 * var(--tt-px));
  align-items: start;
}
.tt-mapa__panel { display: flex; flex-direction: column; gap: calc(28 * var(--tt-px)); min-width: 0; }
.tt-mapa__texto { margin: 0; font-size: calc(16 * var(--tt-px)); color: var(--tt-gris); text-align: center; }
.tt-mapa__total { margin-left: calc(4 * var(--tt-px)); font-weight: 400; color: var(--tt-gris); }

/* Categorías con número */
.tt-check--conteo { display: flex; align-items: center; gap: calc(10 * var(--tt-px)); }
.tt-check--conteo .tt-check__texto { flex: 1 1 auto; }
.tt-check__numero {
  flex: 0 0 auto;
  min-width: calc(28 * var(--tt-px));
  padding: calc(2 * var(--tt-px)) calc(8 * var(--tt-px));
  border-radius: calc(20 * var(--tt-px));
  background: var(--tt-petroleo-15);
  color: var(--tt-petroleo);
  font-size: calc(14 * var(--tt-px));
  font-weight: 600;
  text-align: center;
}
.tt-mapa__atajos { display: flex; gap: calc(12 * var(--tt-px)); margin-bottom: calc(14 * var(--tt-px)); }
.tt-mapa__atajos button {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--tt-px));
  height: calc(44 * var(--tt-px));
  border: 1px solid var(--tt-turquesa); border-radius: calc(10 * var(--tt-px));
  background: var(--tt-blanco); color: var(--tt-petroleo);
  font: inherit; font-size: calc(16 * var(--tt-px)); font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tt-mapa__atajos button:hover,
.tt-mapa__atajos button:focus-visible { background: var(--tt-turquesa); color: var(--tt-blanco); }

/* Lista de lugares */
.tt-mapa__lista { list-style: none; margin: 0; padding: 0; max-height: calc(360 * var(--tt-px)); overflow-y: auto; }
.tt-mapa__item {
  width: 100%; display: flex; flex-direction: column; gap: calc(2 * var(--tt-px));
  padding: calc(12 * var(--tt-px)) calc(8 * var(--tt-px));
  background: none; border: 0; border-bottom: 1px solid var(--tt-petroleo-15);
  text-align: left; cursor: pointer; font: inherit;
}
.tt-mapa__item:hover, .tt-mapa__item:focus-visible { background: var(--tt-petroleo-15); }
.tt-mapa__item-nombre { font-size: calc(17 * var(--tt-px)); font-weight: 600; color: var(--tt-petroleo); }
.tt-mapa__item-sub { font-size: calc(14 * var(--tt-px)); color: var(--tt-gris); }

/* Mapa grande */
.tt-mapa__lienzo {
  position: relative;
  z-index: 0;              /* encierra las capas internas de Leaflet para que no tapen el menú del header */
  isolation: isolate;
  border-radius: calc(16 * var(--tt-px));
  overflow: hidden;
  box-shadow: 0 calc(4 * var(--tt-px)) calc(20 * var(--tt-px)) rgba(0, 0, 0, .10);
}
.tt-mapa__mapa { width: 100%; height: calc(700 * var(--tt-px)); min-height: 420px; background: #f2f3f5; }
.tt-mapa__lienzo .leaflet-container { font-family: inherit; }

/* Botón "Mi ubicación" */
.tt-mapa__ubicacion {
  position: absolute; z-index: 500;
  left: calc(20 * var(--tt-px)); bottom: calc(28 * var(--tt-px));
  display: inline-flex; align-items: center; gap: calc(10 * var(--tt-px));
  height: calc(52 * var(--tt-px)); padding: 0 calc(22 * var(--tt-px));
  border: 0; border-radius: calc(26 * var(--tt-px));
  background: var(--tt-blanco); color: var(--tt-petroleo);
  font: inherit; font-size: calc(17 * var(--tt-px)); font-weight: 600;
  box-shadow: 0 calc(3 * var(--tt-px)) calc(14 * var(--tt-px)) rgba(0, 0, 0, .25);
  cursor: pointer;
}
.tt-mapa__ubicacion:hover { filter: brightness(.97); }
.tt-mapa__ubicacion.is-activo { background: var(--tt-turquesa); color: var(--tt-blanco); }
.tt-mapa__ubicacion.is-buscando { opacity: .7; cursor: progress; }

/* Pin de lugar (gota naranja) */
.tt-pin-caja { background: none; border: 0; }
.tt-pin {
  display: block; width: 30px; height: 30px;
  background: var(--tt-naranja);
  border: 3px solid var(--tt-blanco);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  box-sizing: border-box;
  position: relative;
}
.tt-pin::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: var(--tt-blanco);
}

/* Posición del turista (punto azul que pulsa) */
.tt-yo-caja { background: none; border: 0; }
.tt-yo {
  display: block; width: 22px; height: 22px; box-sizing: border-box;
  border-radius: 50%; background: var(--tt-turquesa);
  border: 3px solid var(--tt-blanco);
  box-shadow: 0 0 0 0 rgba(0, 150, 160, .5), 0 2px 6px rgba(0, 0, 0, .35);
  animation: tt-yo-pulso 2s infinite;
}
@keyframes tt-yo-pulso { 70% { box-shadow: 0 0 0 16px rgba(0, 150, 160, 0), 0 2px 6px rgba(0, 0, 0, .35); } 100% { box-shadow: 0 0 0 0 rgba(0, 150, 160, 0), 0 2px 6px rgba(0, 0, 0, .35); } }
.tt-yo-radio { fill: var(--tt-turquesa); fill-opacity: .12; stroke: var(--tt-turquesa); stroke-opacity: .4; stroke-width: 1; }

/* Ventanita del pin */
.leaflet-popup-content-wrapper { border-radius: 16px; padding: 0; overflow: hidden; }
.leaflet-popup-content { margin: 0; width: 380px !important; max-width: calc(100vw - 80px); }
.tt-popup__img { display: block; width: 100%; height: 190px; object-fit: cover; background: var(--tt-petroleo-15); }
.tt-popup__cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 14px 22px 22px; }
.tt-popup__titulo { font-size: 21px; color: var(--tt-petroleo); line-height: 1.25; }
.tt-popup__meta, .tt-popup__nota, .tt-popup__estado { font-size: 16px; color: var(--tt-gris); }
.tt-popup__nota { color: var(--tt-naranja); font-weight: 600; }
.tt-popup__estado.es-abierto { color: var(--tt-turquesa); font-weight: 600; }
.tt-popup__acciones { display: flex; gap: 12px; margin-top: 14px; }
.tt-popup__boton {
  flex: 1; text-align: center; padding: 12px 10px; border-radius: 10px; white-space: nowrap;
  background: var(--tt-naranja); color: var(--tt-blanco) !important;
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.tt-popup__boton--borde { background: var(--tt-blanco); color: var(--tt-petroleo) !important; border: 1px solid var(--tt-petroleo); }

/* Botón de cerrar */
.leaflet-container a.leaflet-popup-close-button {
  top: 12px; right: 12px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 50%;
  background: var(--tt-blanco); color: var(--tt-petroleo);
  font: 400 24px/1 inherit; text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
  transition: background .15s ease, color .15s ease;
}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus-visible { background: var(--tt-naranja); color: var(--tt-blanco); }

/* Mapa base en tonos claros (le quita color al mapa de OpenStreetMap) */
.tt-mapa__lienzo .leaflet-tile-pane { filter: grayscale(1) brightness(1.12) contrast(.85); }

/* Mapita de la barra lateral de categorías */
.tt-mapa-mini {
  position: relative; z-index: 0; isolation: isolate;
  aspect-ratio: 16 / 10; width: 100%;
  border-radius: calc(12 * var(--tt-px)); overflow: hidden;
  background: #f2f3f5;
}
.tt-mapa-mini__mapa { position: absolute; inset: 0; }
.tt-mapa-mini__enlace { position: absolute; inset: 0; z-index: 800; cursor: pointer; }
.tt-mapa-mini__enlace:hover { background: rgba(0, 0, 0, .04); }
.tt-mapa-mini .leaflet-tile-pane { filter: grayscale(1) brightness(1.12) contrast(.85); }
.tt-mapa-mini .leaflet-control-attribution { font-size: 9px; }
.tt-pin-mini {
  display: block; width: 18px; height: 18px; box-sizing: border-box;
  background: var(--tt-naranja); border: 2px solid var(--tt-blanco);
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.tt-mapa__texto--filtros { margin: calc(18 * var(--tt-px)) 0 calc(20 * var(--tt-px)); line-height: 1.4; }

/* ===== Página de Configuración del perfil — agregar al final de base.css ===== */

.tt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tt-conf { margin-top: calc(32 * var(--tt-px)); padding: calc(32 * var(--tt-px)) calc(36 * var(--tt-px)); }
.tt-perfil-pagina__principal .tt-subtitulo + .tt-conf { margin-top: calc(28 * var(--tt-px)); }
.tt-conf__titulo {
  display: flex; align-items: center; gap: calc(10 * var(--tt-px));
  margin: 0 0 calc(18 * var(--tt-px));
  color: var(--tt-petroleo); font-size: calc(22 * var(--tt-px)); font-weight: 600;
}
.tt-conf__texto { margin: 0 0 calc(18 * var(--tt-px)); font-size: calc(17 * var(--tt-px)); line-height: 1.5; }
.tt-conf .tt-ayuda { margin-top: calc(16 * var(--tt-px)); line-height: 1.5; opacity: 1; color: var(--tt-gris); }
.tt-conf .tt-ayuda a { color: var(--tt-turquesa); }

/* Cuenta */
.tt-conf__cuenta { display: flex; align-items: center; gap: calc(32 * var(--tt-px)); }
.tt-conf__foto {
  flex: 0 0 calc(96 * var(--tt-px)); width: calc(96 * var(--tt-px)); height: calc(96 * var(--tt-px));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 50%; background: var(--tt-petroleo); color: var(--tt-blanco);
  font-size: calc(36 * var(--tt-px)); font-weight: 600;
}
.tt-conf__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tt-conf__datos { margin: 0; flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(18 * var(--tt-px)) calc(32 * var(--tt-px)); }
.tt-conf__datos dt { margin: 0 0 calc(2 * var(--tt-px)); font-size: calc(14 * var(--tt-px)); color: var(--tt-gris); opacity: .8; }
.tt-conf__datos dd { margin: 0; font-size: calc(17 * var(--tt-px)); font-weight: 600; color: var(--tt-petroleo); overflow-wrap: anywhere; }
.tt-conf__datos dd i, .tt-conf__datos dd svg { margin-right: calc(6 * var(--tt-px)); }

/* Acciones */
.tt-conf__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: calc(20 * var(--tt-px)); margin-top: calc(22 * var(--tt-px)); }
.tt-conf .tt-boton-borde { background: none; cursor: pointer; font-family: inherit; }
.tt-conf .tt-boton-borde:hover { background: var(--tt-petroleo-15); }
.tt-conf .tt-boton-borde:disabled { opacity: .6; cursor: progress; }
.tt-conf__enlace { color: var(--tt-turquesa); font-size: calc(16 * var(--tt-px)); }
.tt-conf .tt-login__error { margin-top: 0; text-align: left; }
.tt-conf .tt-login__error:empty { display: none; }

/* Eliminar cuenta */
.tt-conf--peligro { border: 1px solid #e7b9b3; }
.tt-conf--peligro .tt-conf__titulo { color: #c0392b; }
.tt-conf__lista { margin: 0 0 calc(4 * var(--tt-px)); padding-left: calc(24 * var(--tt-px)); display: flex; flex-direction: column; gap: calc(8 * var(--tt-px)); font-size: calc(17 * var(--tt-px)); }
.tt-boton-peligro {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--tt-px));
  padding: calc(12 * var(--tt-px)) calc(28 * var(--tt-px));
  border: 0; border-radius: calc(8 * var(--tt-px));
  background: #c0392b; color: var(--tt-blanco);
  font-family: inherit; font-size: calc(16 * var(--tt-px)); font-weight: 600; cursor: pointer;
}
.tt-boton-peligro:hover { background: #a93226; }
.tt-boton-peligro:disabled { opacity: .45; cursor: not-allowed; }

/* Ventana de confirmación */
.tt-modal--confirmar { width: calc(520 * var(--tt-px)); }
.tt-modal--confirmar .tt-login { text-align: left; }
.tt-modal--confirmar .tt-login h2 { color: #c0392b; font-size: calc(28 * var(--tt-px)); }
.tt-modal--confirmar .tt-campo input { text-align: center; letter-spacing: .08em; font-weight: 600; }
.tt-conf__progreso { margin: calc(16 * var(--tt-px)) 0 0; font-size: calc(16 * var(--tt-px)); font-weight: 600; color: var(--tt-petroleo); text-align: center; }
.tt-conf__progreso[hidden] { display: none; }
.tt-conf__dialogo-botones { display: flex; justify-content: flex-end; gap: calc(16 * var(--tt-px)); margin-top: calc(24 * var(--tt-px)); }
.tt-modal--confirmar .tt-boton-borde { background: none; cursor: pointer; font-family: inherit; }

/* Cuenta eliminada */
.tt-conf-final { display: none; flex-direction: column; align-items: center; text-align: center; padding-block: calc(60 * var(--tt-px)); }
.tt-conf-final:not([hidden]) { display: flex; }
.tt-conf-final > i, .tt-conf-final > svg { font-size: calc(64 * var(--tt-px)); color: var(--tt-turquesa); }
.tt-conf-final h2 { margin: calc(16 * var(--tt-px)) 0 calc(10 * var(--tt-px)); color: var(--tt-petroleo); font-size: calc(32 * var(--tt-px)); }
.tt-conf-final p { margin: 0 0 calc(28 * var(--tt-px)); max-width: calc(560 * var(--tt-px)); line-height: 1.5; }
.tt-perfil-pagina.is-eliminada .tt-gate,
.tt-perfil-pagina.is-eliminada .tt-perfil-pagina__contenido { display: none !important; }

/* ===== Notificaciones ===== */
.tt-header__acciones {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--tt-px));
}

/* Campana: solo con sesión */
.tt-notif__boton {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  width: calc(46 * var(--tt-px));
  height: calc(46 * var(--tt-px));
  padding: 0;
  background: none;
  border: calc(1 * var(--tt-px)) solid var(--tt-petroleo);
  border-radius: 50%;
  color: var(--tt-petroleo);
  font-size: calc(20 * var(--tt-px));
  cursor: pointer;
}
html.tt-con-sesion .tt-notif__boton { display: inline-flex; }
.tt-notif__boton:hover,
.tt-notif__boton[aria-expanded="true"] { background: var(--tt-petroleo-15); }

.tt-notif__conteo {
  position: absolute;
  top: calc(-6 * var(--tt-px));
  right: calc(-6 * var(--tt-px));
  min-width: calc(22 * var(--tt-px));
  height: calc(22 * var(--tt-px));
  padding: 0 calc(6 * var(--tt-px));
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--tt-naranja);
  color: var(--tt-blanco);
  font-family: var(--tt-fuente);
  font-size: calc(12 * var(--tt-px));
  font-weight: 700;
  line-height: calc(22 * var(--tt-px));
  text-align: center;
}
.tt-notif__conteo[hidden] { display: none; }

/* Panel desplegable */
.tt-notif {
  display: none;
  position: absolute;
  top: calc(100% - 11 * var(--tt-px));
  right: calc(204 * var(--tt-px));
  width: calc(460 * var(--tt-px));
  padding: calc(24 * var(--tt-px)) calc(20 * var(--tt-px)) calc(20 * var(--tt-px));
  box-sizing: border-box;
  background: var(--tt-blanco);
  border-radius: calc(24 * var(--tt-px));
  box-shadow: 0 calc(8 * var(--tt-px)) calc(32 * var(--tt-px)) rgb(0 0 0 / 18%);
  z-index: 5;
}
html.tt-con-sesion .tt-notif.is-abierto { display: block; }

.tt-notif__cabecera {
  padding: 0 calc(12 * var(--tt-px)) calc(12 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(20 * var(--tt-px));
}
.tt-notif__lista { max-height: calc(460 * var(--tt-px)); overflow-y: auto; }
.tt-notif__vacio {
  margin: 0;
  padding: calc(24 * var(--tt-px)) calc(12 * var(--tt-px));
  color: var(--tt-gris);
  text-align: center;
}
.tt-notif__vacio[hidden] { display: none; }
.tt-notif__todas {
  display: block;
  margin-top: calc(12 * var(--tt-px));
  padding: calc(12 * var(--tt-px));
  border-top: calc(1 * var(--tt-px)) solid var(--tt-petroleo-15);
  color: var(--tt-petroleo);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.tt-notif__todas:hover { color: var(--tt-naranja); }

/* Cada notificación */
.tt-notif-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(16 * var(--tt-px));
  padding: calc(14 * var(--tt-px)) calc(12 * var(--tt-px));
  border-radius: calc(12 * var(--tt-px));
  color: var(--tt-gris);
  text-decoration: none;
}
a.tt-notif-item:hover { background: var(--tt-petroleo-15); }
.tt-notif-item.is-nueva { background: rgb(255 122 0 / 7%); }
a.tt-notif-item.is-nueva:hover { background: var(--tt-petroleo-15); }

.tt-notif-ico {
  flex: 0 0 calc(44 * var(--tt-px));
  height: calc(44 * var(--tt-px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tt-petroleo-15);
  color: var(--tt-petroleo);
  font-size: calc(18 * var(--tt-px));
}
.tt-notif-ico--nuevo_lugar   { background: rgb(0 128 128 / 14%); color: #0b6e6e; }
.tt-notif-ico--nuevo_evento  { background: rgb(124 77 255 / 14%); color: #6a3fe0; }
.tt-notif-ico--promocion     { background: rgb(230 57 70 / 13%);  color: #d62839; }
.tt-notif-ico--actualizacion { background: rgb(33 150 243 / 14%); color: #1570c2; }
.tt-notif-ico--aviso         { background: rgb(255 122 0 / 14%);  color: var(--tt-naranja); }
.tt-notif-ico--logro         { background: rgb(255 193 7 / 22%);  color: #b78103; }

.tt-notif-item__cuerpo {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--tt-px));
  min-width: 0;
  flex: 1;
  font-size: calc(15 * var(--tt-px));
  line-height: 1.4;
}
.tt-notif-item__titulo { color: var(--tt-petroleo); font-size: calc(16 * var(--tt-px)); }
.tt-notif-item__texto {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-notif-item__meta { color: var(--tt-gris); font-size: calc(13 * var(--tt-px)); opacity: .8; }
.tt-notif-item__punto {
  flex: 0 0 calc(10 * var(--tt-px));
  height: calc(10 * var(--tt-px));
  margin-top: calc(6 * var(--tt-px));
  border-radius: 50%;
  background: var(--tt-naranja);
}

/* Página de notificaciones */
.tt-notif-filtros {
  display: flex;
  gap: calc(12 * var(--tt-px));
  margin: calc(28 * var(--tt-px)) 0 calc(20 * var(--tt-px));
}
.tt-notif-filtro {
  padding: calc(8 * var(--tt-px)) calc(22 * var(--tt-px));
  background: var(--tt-blanco);
  border: calc(1 * var(--tt-px)) solid var(--tt-petroleo);
  border-radius: 999px;
  color: var(--tt-petroleo);
  font-family: var(--tt-fuente);
  font-size: calc(15 * var(--tt-px));
  cursor: pointer;
}
.tt-notif-filtro:hover { background: var(--tt-petroleo-15); }
.tt-notif-filtro.is-activo { background: var(--tt-petroleo); color: var(--tt-blanco); }

.tt-notif-pagina {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--tt-px));
}
.tt-notif-pagina .tt-notif-item {
  padding: calc(22 * var(--tt-px)) calc(24 * var(--tt-px));
  background: var(--tt-blanco);
  border: calc(1 * var(--tt-px)) solid var(--tt-petroleo-15);
  box-shadow: 0 calc(4 * var(--tt-px)) calc(16 * var(--tt-px)) rgb(0 0 0 / 6%);
}
.tt-notif-pagina .tt-notif-item.is-nueva { border-color: var(--tt-naranja); }
.tt-notif-pagina .tt-notif-ico { flex-basis: calc(52 * var(--tt-px)); height: calc(52 * var(--tt-px)); font-size: calc(22 * var(--tt-px)); }
.tt-notif-item__boton { margin-top: calc(6 * var(--tt-px)); color: var(--tt-naranja); font-weight: 600; }
.tt-notif-pagina .tt-notif-item__texto { display: block; -webkit-line-clamp: unset; }

/* ===== Banners de publicidad ===== */
/* Sección: da el aire arriba y abajo; la caja es el banner */
.tt-publi {
  padding-block: calc(40 * var(--tt-px));
}

.tt-publi__caja {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(1502 * var(--tt-px));
  height: 25vh;
  min-height: calc(260 * var(--tt-px));
  margin-inline: auto;
  overflow: hidden;
  border-radius: calc(12 * var(--tt-px)); /* igual que la caja "Publica tu negocio" */
  background: var(--tt-petroleo);
  color: var(--tt-blanco);
}

.tt-publi__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}

.tt-publi__slide.is-activo {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.tt-publi__imagen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Degradado para que el texto siempre se lea sobre la foto */
.tt-publi__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 65%) 0%, rgb(0 0 0 / 35%) 55%, rgb(0 0 0 / 5%) 100%);
}

.tt-publi__marca {
  position: absolute;
  top: calc(16 * var(--tt-px));
  right: calc(20 * var(--tt-px));
  z-index: 2;
  padding: calc(4 * var(--tt-px)) calc(12 * var(--tt-px));
  background: rgb(0 0 0 / 45%);
  border-radius: 999px;
  color: var(--tt-blanco);
  font-size: calc(12 * var(--tt-px));
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tt-publi__contenido {
  position: relative;
  z-index: 1;
  padding-inline: calc(64 * var(--tt-px));
}

.tt-publi__titulo {
  margin: 0 0 calc(10 * var(--tt-px));
  color: var(--tt-blanco);
  font-size: calc(40 * var(--tt-px));
  line-height: 1.15;
}

.tt-publi__texto {
  max-width: calc(760 * var(--tt-px));
  margin: 0 0 calc(20 * var(--tt-px));
  color: var(--tt-blanco);
  font-size: calc(18 * var(--tt-px));
  line-height: 1.5;
}

/* Puntos del slider */
.tt-publi__dots {
  position: absolute;
  bottom: calc(16 * var(--tt-px));
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: calc(12 * var(--tt-px));
}

.tt-publi__dot {
  width: calc(12 * var(--tt-px));
  height: calc(12 * var(--tt-px));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tt-blanco);
  opacity: .5;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}

.tt-publi__dot.is-activo {
  opacity: 1;
  transform: scale(1.3);
}

/* ===== Insignia "Destacado" ===== */
.tt-destacado {
  position: absolute;
  bottom: calc(12 * var(--tt-px));
  left: calc(12 * var(--tt-px));
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--tt-px));
  padding: calc(5 * var(--tt-px)) calc(12 * var(--tt-px));
  background: var(--tt-naranja);
  border-radius: 999px;
  color: var(--tt-blanco);
  font-size: calc(13 * var(--tt-px));
  font-weight: 600;
  line-height: 1;
}

/* ===== Colaboradores y patrocinadores ===== */
.tt-colab {
  padding-block: calc(80 * var(--tt-px));
  overflow: hidden;
}

.tt-colab .tt-contenedor { text-align: center; }

.tt-colab__subtitulo {
  margin: calc(48 * var(--tt-px)) 0 calc(24 * var(--tt-px));
  color: var(--tt-petroleo);
  font-size: calc(22 * var(--tt-px));
  font-weight: 600;
}

/* Patrocinadores: tarjetas grandes con nombre */
.tt-colab__patrocinadores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(28 * var(--tt-px));
  margin-top: calc(40 * var(--tt-px));
}
.tt-colab__subtitulo + .tt-colab__patrocinadores { margin-top: 0; }

.tt-colab__patro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--tt-px));
  width: calc(360 * var(--tt-px));
  height: calc(210 * var(--tt-px));
  padding: calc(24 * var(--tt-px));
  box-sizing: border-box;
  background: var(--tt-blanco);
  border: calc(1 * var(--tt-px)) solid var(--tt-petroleo-15);
  border-radius: calc(16 * var(--tt-px));
  box-shadow: 0 calc(4 * var(--tt-px)) calc(16 * var(--tt-px)) rgb(0 0 0 / 6%);
  color: var(--tt-gris);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.tt-colab__patro img {
  max-width: 70%;
  height: calc(90 * var(--tt-px));
  margin-bottom: calc(8 * var(--tt-px));
  object-fit: contain;
}
.tt-colab__patro strong { color: var(--tt-petroleo); font-size: calc(18 * var(--tt-px)); }
.tt-colab__patro span { font-size: calc(14 * var(--tt-px)); }
a.tt-colab__patro:hover,
a.tt-colab__patro:focus-visible {
  transform: translateY(calc(-4 * var(--tt-px)));
  box-shadow: 0 calc(10 * var(--tt-px)) calc(28 * var(--tt-px)) rgb(0 0 0 / 12%);
}

/* Colaboradores: tarjetas chicas, grises hasta pasar el mouse */
.tt-colab__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(220 * var(--tt-px));
  height: calc(120 * var(--tt-px));
  box-sizing: border-box;
  padding: calc(20 * var(--tt-px));
  background: var(--tt-blanco);
  border: calc(1 * var(--tt-px)) solid var(--tt-petroleo-15);
  border-radius: calc(16 * var(--tt-px));
  transition: transform .2s, box-shadow .2s;
}
.tt-colab__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .75;
  transition: filter .25s, opacity .25s;
}
a.tt-colab__logo:hover,
a.tt-colab__logo:focus-visible {
  transform: translateY(calc(-3 * var(--tt-px)));
  box-shadow: 0 calc(8 * var(--tt-px)) calc(22 * var(--tt-px)) rgb(0 0 0 / 10%);
}
a.tt-colab__logo:hover img,
a.tt-colab__logo:focus-visible img { filter: none; opacity: 1; }

/* Pocos logos: quietos y centrados */
.tt-colab__quietos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(24 * var(--tt-px));
}

/* Muchos logos: marquesina de lado a lado con bordes que se difuminan */
.tt-colab__marquesina {
  overflow: hidden;
  padding-block: calc(10 * var(--tt-px));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tt-colab__pista {
  display: flex;
  width: max-content;
  animation: tt-colab-mover calc(var(--tt-n) * 4s) linear infinite;
}
.tt-colab__item { padding-right: calc(24 * var(--tt-px)); }
.tt-colab__marquesina:hover .tt-colab__pista,
.tt-colab__marquesina:focus-within .tt-colab__pista { animation-play-state: paused; }

@keyframes tt-colab-mover {
  to { transform: translateX(-50%); }
}

/* Quien prefiere menos movimiento: sin animación, en filas */
@media (prefers-reduced-motion: reduce) {
  .tt-colab__pista { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .tt-colab__item[aria-hidden="true"] { display: none; }
  .tt-colab__marquesina { -webkit-mask-image: none; mask-image: none; }
}

/* Página de error 404 */
.tt-404 {
  padding-block: calc(100 * var(--tt-px)) calc(140 * var(--tt-px));
  text-align: center;
}

.tt-404__interior {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tt-404__codigo {
  margin: 0;
  color: var(--tt-turquesa);
  font-size: calc(180 * var(--tt-px));
  font-weight: 800;
  line-height: 1;
  opacity: 0.25;
}

.tt-404 .tt-titulo-mixto {
  margin: calc(-30 * var(--tt-px)) 0 calc(16 * var(--tt-px));
}

.tt-404__texto {
  max-width: calc(620 * var(--tt-px));
  margin: 0 0 calc(32 * var(--tt-px));
  color: var(--tt-gris);
  font-size: calc(18 * var(--tt-px));
  line-height: 1.6;
}

.tt-404__buscador {
  width: 100%;
  max-width: calc(620 * var(--tt-px));
  border: calc(1 * var(--tt-px)) solid var(--tt-petroleo-15);
  box-shadow: 0 calc(4 * var(--tt-px)) calc(16 * var(--tt-px)) var(--tt-petroleo-15);
  margin-bottom: calc(36 * var(--tt-px));
}

.tt-404__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(16 * var(--tt-px));
}

.tt-404__botones .tt-boton-borde {
  display: inline-block;
}

/* Próximos eventos (inicio): el cartel se ve completo, sin estirar la tarjeta */
.tt-evento__imagen {
  position: relative;
  overflow: hidden;
  background: #d1d5db;
}

.tt-evento__imagen::before {
  content: '';
  position: absolute;
  inset: calc(-12 * var(--tt-px));
  background: var(--tt-img) center / cover no-repeat;
  filter: blur(calc(14 * var(--tt-px))) brightness(.85);
}

.tt-evento__imagen img {
  position: absolute;
  inset: 0;
  z-index: 1;
  object-fit: contain;
}

@media (min-width: 768px) {
  .tt-eventos__lado .tt-evento {
    flex: 1;
    min-height: calc(280 * var(--tt-px));
  }
}