/* PAGE: ANUNCIATE — pixel-ish según tu captura */
.tm-anunciate {
  background: #ff2b2b;
  min-height: 100vh;
}

/* ===== HERO 100vh ===== */
.tm-anunciate__hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  /* mismo gradiente del diseño */
  background: linear-gradient(180deg,
      #FD2C2A 0%,
      #ff2b2b 34%,
      #ff6b5f 66%,
      #ffd3cb 90%,
      #ffffff 100%);
}

/* contenedor general del hero */
.tm-anunciate__heroInner {
  /* width: min(1200px, calc(100% - 64px)); */
  margin: 0 auto;

  /* 100vh real en el hero */
  flex: 1;
  display: flex;
  flex-direction: column;

  /* aire similar a la captura */
  padding: 120px 2% 60px;
}

/* ===== fila 1: título (1 sola línea) ===== */
.tm-anunciate__h1 {
  font-family: "SerialB", system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1PX;
  color: #fff;

  margin: 0;
  font-size: 56px;

  /* clave: 1 línea */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== fila 2: 30/70 (texto+botón / mapa) ===== */
.tm-anunciate__heroGrid {
  /* ocupa todo lo que queda debajo del título */
  flex: 1;
  display: grid;
  grid-template-columns: 30% 70%;
  column-gap: 32px;
  align-items: stretch;

  /* separa del título */
  margin-top: 18px;
}

/* izquierda: texto + botón */
.tm-anunciate__heroCopy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 8px;
}

.tm-anunciate__p p {
  font-family: "MD-IO", system-ui, sans-serif;
  color: rgba(255, 255, 255, .92);
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 10px;
}

.tm-anunciate__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  width: max-content;
  border-radius: 32px;
  border: 3px solid #fff;
  color: #fff;
  text-decoration: none;
  font-family: "SerialB", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 30px;
  margin-top: 1rem;
  text-transform: uppercase;
  background-color: #FD2C2A;
}

.tm-anunciate__btn:hover {
  opacity: .92;
}

/* derecha: mapa ocupa 70% y se centra/estira */
.tm-anunciate__heroMap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tm-anunciate__map {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;

  display: block;
  image-rendering: crisp-edges;
}

/* ===== responsive ===== */
@media (max-width: 980px) {
  .tm-anunciate__heroInner {
    width: min(1200px, calc(100% - 36px));
    padding: 28px 0 18px;
  }

  .tm-anunciate__h1 {
    font-size: 26px;
    white-space: normal;
    /* en mobile permitimos 2 líneas */
  }

  .tm-anunciate__heroGrid {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .tm-anunciate__heroMap {
    min-height: 44vh;
  }

  .tm-anunciate__map {
    height: auto;
  }
}


/* ===== STATS (abajo rojo pleno) ===== */
.tm-anunciate__stats {
  background: #ff2b2b;
  padding: 22px 0 46px;
  min-height: 100vh;

}

.tm-anunciate__statsInner {
  /* width: min(1200px, calc(100% - 64px)); */
  margin: 0 auto;

  /* 100vh real en el hero */
  flex: 1;
  display: flex;
  flex-direction: column;

  /* aire similar a la captura */
  padding: 50px 3.5% 100px;
}

.tm-anunciate__grid {
  display: grid;
  grid-template-columns: 205px 1fr 1fr 1fr;
  /* social + 3 columnas */
  column-gap: 58px;
  align-items: start;
  padding-top: 10px;
}

/* Social: iconos a la izquierda + números grandes */
.tm-socialRow {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 30px;
  align-items: center;
  margin-bottom: 22px;
}

.tm-socialRow__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

.tm-socialRow__num {
  font-family: "MD-IO", system-ui, sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 56px;
  line-height: 1;
  margin: 0;
}

.tm-socialRow__label {
  font-family: "MD-IO", system-ui, sans-serif;
  color: rgba(255, 255, 255, .92);
  font-size: 16px;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* Titulitos arriba (NEWSLETTER / VISITAS... / ÚLTIMO MES) */
.tm-statBlock__title {
  font-family: "SerialB", system-ui, sans-serif;
  letter-spacing: .02em;
  color: #fff;
  font-size: 30px;
  text-transform: uppercase;
  margin: 0 0 16px;
}

/* newsletter (una cifra grande) */
.tm-statBlock__num {
  font-family: "MD-IO", system-ui, sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 56px;
  line-height: 1;
  margin: 0;
}

.tm-statBlock__label {
  font-family: "MD-IO", system-ui, sans-serif;
  color: rgba(255, 255, 255, .92);
  font-size: 16px;
  margin-top: 2px;
  letter-spacing: 0.5px;
}

/* listas (2025 / mes) */
.tm-statLine {
  margin-bottom: 16px;
}

.tm-statLine__num {
  font-family: "MD-IO", system-ui, sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 56px;
  line-height: 1;
  margin: 0;
}

.tm-statLine__label {
  font-family: "MD-IO", system-ui, sans-serif;
  color: rgba(255, 255, 255, .92);
  font-size: 16px;
  margin-top: 2px;
  letter-spacing: 0.5px;
}

/* copy de abajo */
.tm-anunciate__copy {
  margin-top: 30px;
  max-width: 880px;
}

.tm-anunciate__copyInner p,
.tm-anunciate__copy p {
  font-family: "MD-IO", system-ui, sans-serif;
  color: rgba(255, 255, 255, .92);
  font-size: 16px;
  line-height: 1.35;
  margin: 0 0 12px;
}

.tm-anunciate__btn--bottom {
  margin-top: 18px;
}


.tm-anunciate__col.tm-anunciate__col--social {
  margin-top: 60px;
}

/* ===== responsive ===== */
@media (max-width: 980px) {
  .tm-anunciate__heroInner {
    grid-template-columns: 1fr;
    width: min(1200px, calc(100% - 36px));
    row-gap: 16px;
    padding: 34px 0 16px;
  }

  .tm-anunciate__heroLeft {
    padding-top: 0;
  }

  .tm-anunciate__map {
    max-width: 100%;
  }

  .tm-anunciate__grid {
    grid-template-columns: 1fr;
    row-gap: 18px;
    column-gap: 0;
    width: min(1200px, calc(100% - 36px));
  }
}

.tm-socialRow__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}

.tm-socialRow__svg {
  width: 36px;
  height: 36px;
  display: block;
  object-fit: contain;
}

/* Fuera del media query — reemplazá el .tm-anunciate base */
.tm-anunciate {
  min-height: 100vh;
  /* en desktop el gradiente lo maneja .tm-anunciate__hero */
  background: #ff2b2b;
}

/* Hero desktop — sin cambios */
.tm-anunciate__hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg,
      #FD2C2A 0%,
      #ff2b2b 34%,
      #ff6b5f 66%,
      #ffd3cb 90%,
      #ffffff 100%);
}

/* Mobile — gradiente en el padre que lo contiene todo */
@media (max-width: 780px) {
  .tm-anunciate {
    background-image: linear-gradient(180deg,
        #FD2C2A 0%,
        #ff2b2b 28%,
        #ff6b5f 56%,
        #ffd3cb 90%,
        #ffffff 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* ancho 100%, alto = el del elemento */
    /* ✅ clave: el elemento tiene que tener height real, no solo min-height */
    height: auto;
  }

  .tm-anunciate__hero {
    background: transparent !important;
    min-height: auto;
  }

  .tm-anunciate__stats {
    background: transparent !important;
  }

  .tm-anunciate__heroInner {
    width: auto;
    padding: 100px 16px 18px;
  }

  .tm-anunciate__btn.tm-anunciate__btn--bottom {
    display: none;
  }
}

@media (max-width: 780px) {
  .tm-anunciate {}

  .tm-anunciate__heroInner {
    width: auto;
    padding: 100px 16px 18px;
  }

  .tm-anunciate__btn.tm-anunciate__btn--bottom {
    display: none;
  }



  /* El heroInner pasa a flex column para poder reordenar */
  .tm-anunciate__heroInner {
    display: flex;
    flex-direction: column;
  }

  /* El título va al slot 3 */
  .tm-anunciate__h1 {
    order: 3;
    margin-top: 16px;
  }

  /* ✅ display: contents en ambos para que todos los hijos
     sean directos del flex del heroInner */
  .tm-anunciate__heroGrid {
    display: contents;
  }

  .tm-anunciate__heroCopy {
    display: contents;
  }

  /* Orden final: btn → mapa → título → texto */
  .tm-anunciate__btn {
    order: 1;
  }

  .tm-anunciate__heroMap {
    order: 2;
    min-height: auto;
  }

  .tm-anunciate__h1 {
    order: 3;
    margin-top: 16px;
  }

  .tm-anunciate__p {
    order: 4;
  }

  .tm-anunciate__btn.tm-anunciate__btn--bottom {
    display: none;
  }

  .tm-anunciate__btn {
    font-size: 22px;
    margin: auto;
    border-radius: 14px;
    margin-bottom: 1rem;
  }


  .tm-anunciate__statsInner {
    margin-top: 0;
  }

}


@media (max-width: 780px) {

  /* ✅ Stats: mantener 4 columnas, achicadas */
  .tm-anunciate__grid {
    grid-template-columns: repeat(4, 1fr) !important;
    column-gap: 12px;
    row-gap: 0;
    width: 100%;
    overflow-x: auto;
    /* por si en pantallas muy chicas no entra */
  }

  .tm-anunciate__col.tm-anunciate__col--social {
    margin-top: 35px;
  }

  /* Achica los números para que entren */
  .tm-socialRow__num,
  .tm-statBlock__num,
  .tm-statLine__num {
    font-size: 24px;
  }

  .tm-anunciate__statsInner, .tm-anunciate__stats {
    margin-top: 0;
    padding-top: 0;
  }


  .tm-statBlock__title {
    font-size: 12px;
  }

  .tm-socialRow__label,
  .tm-statBlock__label,
  .tm-statLine__label {
    font-size: 11px;
  }

  /* El icono de rrss también más chico */
  .tm-socialRow__svg {
    width: 16px;
    height: 16px;
  }

  .tm-socialRow {
    grid-template-columns: 22px 1fr;
    column-gap: 4px;
    margin-bottom: 14px;
  }

  .tm-anunciate__statsInner {
    padding: 30px 16px 60px;
  }

  .tm-socialRow__icon {
    width: 20px;
    place-items: baseline;
  }

  .tm-anunciate__copyInner p{
    color: black;
  }
}