/* ═══════════════════════════════════════════════════════════════
   INNOVACIÓN — CSS
   Página: innovacion.html
   ═══════════════════════════════════════════════════════════════ */

@import url("./fonts.css");

/* ─── VARIABLES DE COLOR ───
   Cambiar aquí afecta TODA la página.
   --orange:     Naranja terracota (fondo del hero y stats)
   --dark-green: Verde oscuro (footer)
   --beige:      Beige claro (fondo de corredores y michoacán)
*/
:root {
  --orange: #A34A26;
  --dark-green: #102923;
  --beige: #F7F2E8;
  --white: #FFFFFF;
  --yellow: #E8C444;
  --text-dark: #333333;
}

/* ─── RESET GLOBAL ─── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Geomanist', sans-serif; /* Todo a Geomanist */
  font-weight: 400;              /* P y cuerpo en Regular */
  background-color: var(--white);
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden; /* Evita scroll horizontal por elementos 100vw */
}

/* ─── OPTIMIZACIÓN DE CARGA DE IMÁGENES ─── */
img {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

img.loaded {
  opacity: 1;
}

/* Imágenes que no deben desvanecerse (si las hay) o para evitar saltos en el Hero */
.inno-brand-header__bg img,
.inno-hero__media img {
  transition-duration: 1.2s;
}

p {
  font-family: 'Lato', sans-serif;
  font-weight: 400; /* Lato Regular */
}

/* ─── MOBILE / DESKTOP TOGGLE ─── */
.mobile-only-container {
  display: block;
  position: relative;
  width: 100%;
  background-color: #AF4C25;
}

.inno-mobile {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.inno-m-section {
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

.inno-m-section--hero {
  background-color: #af4c25;
}

.inno-m-section--intro {
  transform: translateY(-13%);
}

.inno-m-section--intro::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%;
  background-color: #af4c25;
  z-index: 0;
}

.inno-m-section--intro .inno-m-img {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

.inno-m-section--intro .inno-m-overlay--hero-text {
  top: 36%;
}

.inno-m-img--hero {
  transform: translateY(55%);
}

.inno-m-img {
  display: block;
  width: 100%;
  height: auto;
}

.inno-m-section--medium,
.inno-m-section--grid,
.inno-m-section--cluster {
  background-color: #000000;
  padding: 16px 0;
}

.inno-m-section--grid {
  transform: translateY(-180px);
}

.inno-m-tile-grid--inside-13 {
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translateX(-50%);
  z-index: 11;
}

.inno-m-section--cluster {
  background-color: transparent;
  padding: 16px 0 24px;
  transform: translateY(-265%);
  z-index: 3;
}

.inno-m-section--modelo-extra {
  background-color: #000000;
  padding: 0;
  margin-top: -1080px;
}

.inno-m-section--marinabus-up {
  transform: translateY(-60px);
}

.inno-m-overlay--senderos-18 {
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: min(88%, 560px);
  z-index: 8;
  text-align: center;
  gap: 14px;
}

.inno-m-overlay--senderos-18 h3 {
  color: #ffffff;
  font-size: clamp(1.35rem, 5vw, 1.9rem);
  font-weight: 900;
  position: relative;
  left: -85px;
}

.inno-m-overlay--senderos-18 p {
  color: #ffffff;
  font-size: 0.75rem !important;
  line-height: 1.35;
  position: relative;
  left: -10px;
  max-width: 24ch;
}

.inno-m-list-columns--senderos-18 {
  margin-top: 20;
  color: #ffffff;
  position: relative;
  left: 4px;
  top: 20;
}

.inno-m-list-columns--senderos-18 li {
  font-size: 0.76rem !important;
  font-weight: 800;
}

.inno-m-section--pm-hero-up {
  transform: translateY(-240px);
}

.inno-m-overlay--nuevo-modelo-19 {
  top: 10%;
  left: 2%;
  transform: translateY(-50%);
  width: 260px;
  padding: 4vw 4vw 4vw 2vw;
  z-index: 8;
  text-align: left;
  align-items: flex-start;
}

.inno-m-overlay--nuevo-modelo-19 h3 {
  color: #ffffff;
  font-size: clamp(1.35rem, 5vw, 1.9rem);
  font-weight: 900;
  line-height: 1.15;
  text-align: left;
}

.inno-m-overlay--nuevo-modelo-19 p {
  color: #ffffff;
  font-size: clamp(0.9rem, 3.3vw, 1.08rem);
  line-height: 1.35;
  text-align: left;
}

.inno-m-section--pm-hero-extra {
  transform: translateY(-350px);
}

.inno-m-overlay--marinabus-extra {
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(88%, 560px);
  z-index: 8;
  text-align: center;
}

.inno-m-overlay--marinabus-extra h3 {
  font-size: clamp(1.8rem, 6.5vw, 2.6rem);
  font-weight: 900;
}

.inno-m-overlay--marinabus-extra h4 {
  font-size: clamp(1.05rem, 4vw, 1.45rem);
  font-weight: 800;
}

.inno-m-overlay--marinabus-extra p {
  font-size: clamp(0.9rem, 3.3vw, 1.08rem);
  line-height: 1.35;
}

.inno-m-section--pm-header-up {
  transform: translateY(-400px);
}

.inno-m-section--pm-text-band {
  background-color: #af4c25;
  color: #ffffff;
  padding: 34px 7% 40px;
  transform: translateY(-550px);
  text-align: center;
}

.inno-m-pm-text-band__content {
  max-width: 620px;
  margin: 0 auto;
  transform: translateY(-25px);
}

.inno-m-pm-text-band__content h2 {
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1.05;
  margin-bottom: 10px;
}

.inno-m-pm-text-band__content h3 {
  font-size: clamp(1.25rem, 5vw, 1.8rem);
  line-height: 1.1;
  margin-bottom: 18px;
}

.inno-m-pm-text-band__content p {
  color: #ffffff;
  font-size: clamp(0.95rem, 3.6vw, 1.18rem);
  line-height: 1.45;
}

.inno-m-section--pm-project-up {
  transform: translateY(-600px);
}

.inno-m-section--pm-janitzio-top {
  position: relative;
  transform: translateY(-720px);
  z-index: 2;
  text-align: center;
}

.inno-m-section--pm-janitzio-top .inno-m-overlay--top {
  top: 18vw;
  color: #235C4E;
  text-align: center;
  align-items: center;
}

.inno-m-section--pm-janitzio-bottom {
  position: relative;
  transform: translateY(-850px);
  z-index: 1;
  text-align: center;
}

.inno-m-section--pm-tail-up {
  transform: translateY(-1050px);
}

.inno-m-section--pm-patzcuaro-purple {
  position: relative;
  z-index: 2;
  text-align: center;
}

.inno-m-section--pm-patzcuaro-purple .inno-m-overlay--top {
  top: 12vw;
  text-align: center;
  align-items: center;
}

.inno-m-section--pm-patzcuaro-orange {
  position: relative;
  transform: translateY(-1140px);
  z-index: 3;
  text-align: center;
}

.inno-m-section--pm-patzcuaro-orange .inno-m-overlay--bottom {
  bottom: 15vw;
  text-align: center;
  align-items: center;
}

.inno-m-section--pm-patzcuaro-orange .inno-m-overlay--bottom h3 {
  font-size: clamp(1.35rem, 4.6vw, 1.7rem);
}

.inno-m-section--pm-tail-26 {
  transform: translateY(-1260px);
}

.inno-m-section--pm-tail-27 {
  transform: translateY(-1320px);
  margin-bottom: -1320px;
}

.inno-m-section--pm-janitzio-bottom .inno-m-overlay--bottom {
  bottom: 52vw;
  color: #AF4C25;
  text-align: center;
  align-items: center;
}

.inno-m-img--medium {
  width: 70%;
  margin: 0 auto;
}

.inno-m-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 32px;
  width: min(76%, 360px);
  margin: 0 auto;
}

.inno-m-tile {
  position: relative;
  width: 100%;
  overflow: visible;
  border-radius: 12px;
  text-align: center;
}

.inno-m-tile .inno-m-img {
  width: 90%;
  height: auto;
  margin: 0 auto;
}

.inno-m-tile .inno-m-img--overlay {
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
}

.inno-m-tile-stat {
  margin-top: 10px;
  color: #235c4e;
  text-align: center;
  line-height: 1.15;
}

.inno-m-tile-stat h4 {
  font-size: clamp(1.25rem, 4.8vw, 1.75rem);
  font-weight: 900;
  margin-bottom: 4px;
}

.inno-m-tile-stat p {
  font-size: clamp(0.88rem, 3.4vw, 1.08rem);
  font-weight: 700;
  line-height: 1.15;
}

.inno-m-cluster-grid {
  --cluster-gap: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cluster-gap);
  width: min(86%, 480px);
  margin: 0 auto;
}

.inno-m-cluster-item {
  position: relative;
  width: 100%;
  flex: 0 0 calc((100% - (2 * var(--cluster-gap))) / 3);
  overflow: hidden;
  border-radius: 12px;
}

.inno-m-cluster-item .inno-m-img {
  width: 100%;
  height: auto;
}

.inno-m-cluster-grid .inno-m-overlay--mini h3 {
  font-size: clamp(0.85rem, 3.2vw, 1rem);
}

.inno-m-cluster-grid .inno-m-overlay--mini p,
.inno-m-cluster-grid .inno-m-overlay--mini li {
  font-size: clamp(0.72rem, 2.6vw, 0.9rem);
}

.inno-m-cluster-grid .inno-m-cards {
  gap: 6px;
}

.inno-m-cluster-grid .inno-m-card h4 {
  font-size: clamp(0.8rem, 3vw, 1rem);
}

.inno-m-cluster-grid .inno-m-card p {
  font-size: clamp(0.68rem, 2.5vw, 0.85rem);
}

.inno-m-mante-cards {
  --mante-gap: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mante-gap);
  width: min(92%, 620px);
  margin: 0 auto;
}

.inno-m-overlay--mante-cards .inno-m-mante-card:nth-child(1) {
  transform: translateY(-156px);
}

.inno-m-overlay--mante-cards .inno-m-mante-card:nth-child(2) {
  transform: translateY(-156px);
}

.inno-m-overlay--mante-cards .inno-m-mante-card:nth-child(3) {
  transform: translateY(-155px);
}

.inno-m-mante-card {
  background: rgba(243, 248, 219, 0.85);
  color: #235c4e;
  border-radius: 20px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
}

.inno-m-mante-card h4 {
  font-size: clamp(1rem, 3.4vw, 1.35rem);
  font-weight: 800;
  margin-bottom: 6px;
}

.inno-m-mante-card p {
  font-size: clamp(0.82rem, 2.8vw, 0.98rem);
  line-height: 1.3;
}

.inno-m-mante-card p strong {
  display: block;
  font-size: clamp(1.05rem, 3.6vw, 1.4rem);
  font-weight: 900;
  margin-top: 4px;
}

.inno-m-overlay--mante-cards {
  left: 0;
  width: 100%;
  padding: 0;
  transform: none;
  z-index: 7;
}

.inno-m-mante-under-layer {
  position: absolute;
  top: -2%;
  left: 0;
  width: 100%;
  z-index: 5;
  pointer-events: none;
}

.inno-m-mante-cards--single {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mante-gap);
}

.inno-m-mante-card--under {
  grid-column: 1;
  width: 82%;
  max-width: 260px;
  justify-self: center;
  text-align: center;
  transform: translateY(-15px);
}

.inno-m-overlay--culture-text {
  top: 62%;
}

.inno-m-overlay--stack-13 {
  bottom: 6%;
  top: auto;
  display: grid;
  gap: 14px;
  text-align: left;
  align-items: flex-start;
  z-index: 9;
}

.inno-m-overlay--stack-13 .inno-m-list {
  text-align: left;
}

.inno-m-stack-item h3 {
  font-size: clamp(1rem, 3.6vw, 1.3rem);
}

.inno-m-stack-item--bahia {
  transform: translateY(-960px);
  color: #1E5B4F;
  text-align: center;
}

.inno-m-stack-item--bahia h3 {
  font-size: clamp(1.2rem, 4.4vw, 1.6rem);
}

.inno-m-stack-item--bahia .inno-m-list {
  text-align: center;
  justify-items: center;
  transform: translateY(18px);
}

.inno-m-stack-item--bahia .inno-m-list li {
  padding-left: 0;
  font-family: 'Geomanist', sans-serif !important;
  font-size: clamp(1.3rem, 5.4vw, 2.55rem);
  font-weight: 700;
  line-height: 1.1;
}

.inno-m-stack-item--bahia .inno-m-list li::before {
  display: none;
}

.inno-m-map--below-list {
  margin-top: 80px;
  position: relative;
  z-index: 10;
}

.inno-m-map--below-list h3 {
  color: #e35e0e;
  font-size: clamp(2.2rem, 8vw, 3.2rem);
  font-weight: 900;
}

.inno-m-map--below-list .btn-map-mobile {
  padding: 14px 34px;
  font-size: clamp(1.15rem, 4.4vw, 1.5rem);
}

.inno-m-stack-item--gobernanza {
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(86%, 560px);
  z-index: 10;
  text-align: center;
}

.inno-m-stack-item--gobernanza h3 {
  font-size: clamp(1.35rem, 5vw, 1.9rem);
  font-weight: 800;
}

.inno-m-stack-item--gobernanza p {
  font-size: clamp(0.95rem, 3.5vw, 1.15rem);
  line-height: 1.35;
}

.inno-m-stack-item--cultura {
  transform: translateY(-390px);
  color: #1E5B4F;
  text-align: center;
}

.inno-m-stack-item--cultura h3,
.inno-m-stack-item--cultura p {
  color: #1E5B4F;
}

.inno-m-stack-item--cultura h3 {
  font-size: clamp(1.25rem, 4.6vw, 1.7rem);
  font-weight: 800;
  margin-bottom: 18px;
}

.inno-m-stack-item--cultura p {
  font-size: clamp(0.95rem, 3.5vw, 1.15rem);
  line-height: 1.35;
}

.inno-m-stack-item p,
.inno-m-stack-item li {
  font-size: clamp(0.85rem, 3.2vw, 1rem);
}

.inno-m-img--overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.inno-m-overlay {
  position: absolute;
  left: 50%;
  width: min(92%, 680px);
  transform: translateX(-50%);
  padding: 5vw 6vw;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  line-height: 1.4;
}

.inno-m-overlay.inno-m-overlay--nuevo-modelo-19 {
  width: 260px;
  max-width: 260px;
  left: 4% !important;
  transform: translateY(-5%) !important;
}

.inno-m-overlay--top {
  top: 5vw;
}


.inno-m-overlay--top.inno-m-overlay--mante-cards {
  top: -70vw;
}

.inno-m-overlay--middle {
  top: 80%;
  transform: translate(-50%, -50%);
}

.inno-m-overlay--hero-text {
  top: 50%;
}

.inno-m-overlay--hero-text p {
  font-size: clamp(0.86rem, 3vw, 1rem);
}

.inno-m-section--stats-up {
  transform: translateY(-50%);
  z-index: 2;
}

.inno-m-section--actions-up {
  transform: translateY(-45%);
  z-index: 1;
}

.inno-m-overlay--actions-text {
  top: 10vw;
  width: min(96%, 720px);
}

.inno-m-overlay--actions-text p {
  font-size: clamp(0.88rem, 3.2vw, 1.02rem);
}

.inno-m-section--governance-up {
  transform: translateY(-70%);
  z-index: 3;
}

.inno-m-section--culture-up {
  transform: translateY(-250%);
  z-index: 6;
  overflow: visible;
}

.inno-m-img--culture {
  position: relative;
  z-index: 6;
  filter: drop-shadow(-20px 20px 40px rgba(0, 0, 0, 0.3));
  transform: translateY(-2px);
  animation: floating-invert 7s ease-in-out infinite;
}

.inno-m-section--culture-stats-up {
    /* 1. Cambiamos el transform por margin-top negativo */
    margin-top: -65% !important; 
    transform: none !important;

    /* 2. Le subimos el z-index para que flote sobre lo de arriba */
    z-index: 99 !important;
}
.inno-m-section--culture-stats-up .inno-m-img {
  filter: none;
  animation: none;
}

.inno-m-overlay--culture-stats-text {
  top: 88%;
}

.inno-m-overlay--stats-text {
  top: 45%;
}

.inno-m-section--stats-up .inno-m-overlay--stats-text h2 {
  font-size: clamp(1.1rem, 4.2vw, 1.6rem);
}

.inno-m-section--stats-up .inno-m-stat {
  font-size: clamp(1.3rem, 4.8vw, 2rem);
}

.inno-m-section--stats-up .inno-m-overlay--stats-text p,
.inno-m-section--stats-up .inno-m-overlay--stats-text li {
  font-size: clamp(0.85rem, 3.2vw, 1rem);
}

.inno-m-section--stats-up .inno-m-img {
  transform: translateY(-5%);
  filter: none;
}

.inno-m-overlay--bottom {
  bottom: 5vw;
}

.inno-m-overlay--left {
  left: 6vw;
  transform: none;
  text-align: left;
  align-items: flex-start;
}

.inno-m-overlay--tile {
  width: 92%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px;
  text-align: left;
  align-items: flex-start;
}

.inno-m-overlay--mini h3 {
  font-size: clamp(0.95rem, 3.5vw, 1.1rem);
}

.inno-m-overlay--mini p,
.inno-m-overlay--mini li {
  font-size: clamp(0.8rem, 2.8vw, 0.95rem);
}

.inno-m-overlay--light {
  color: #fff7e9;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}


.pm-project-short {
  height: auto;
  background-color: transparent !important;
  color: #af4c25 !important;
  bottom: 52vw;
  width: 70%;
  max-width: 320px;
  left: 54% !important;
  transform: translateX(-50%) !important;
  text-align: center;
  align-items: center;
  padding: 0.3vw 1.5vw;
  gap: 4px;
}

.pm-project-short h3 {
  color: #af4c25 !important;
  font-size: clamp(1.35rem, 4.8vw, 1.7rem) !important;
  line-height: 1.05;
  font-weight: 900 !important;
  margin: 0 0 6px;
}

.pm-project-short p {
  display: block;
  font-size: clamp(0.78rem, 2.8vw, 0.95rem);
  line-height: 1.1;
  margin: 0;
}




.inno-m-overlay--panel-dark,
.inno-m-overlay--panel-light {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.inno-m-overlay h1 {
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  line-height: 1.1;
}

.inno-m-overlay h2 {
  font-size: clamp(1.4rem, 5vw, 2rem);
  line-height: 1.15;
}

.inno-m-overlay h3 {
  font-size: clamp(1.25rem, 4.8vw, 1.8rem);
  line-height: 1.2;
}

.inno-m-overlay h4 {
  font-size: clamp(1.05rem, 4.2vw, 1.4rem);
  line-height: 1.2;
}

.inno-m-overlay p,
.inno-m-overlay li {
  font-size: clamp(0.98rem, 3.6vw, 1.15rem);
}

.inno-m-stat {
  font-size: clamp(1.6rem, 6.2vw, 2.6rem);
  font-weight: 800;
}

.inno-m-list {
  list-style: none;
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 10px 0 0 0;
  text-align: left;
}

.inno-m-list li {
  position: relative;
  padding-left: 18px;
}

.inno-m-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e8c444;
}

.inno-m-list--columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

.inno-m-list--stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px;
  text-align: center;
}

.inno-m-list--stats li {
  padding-left: 0;
  padding-top: 14px;
}

.inno-m-list--stats li::before {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.inno-m-list--stats .inno-m-list-item--puerto::before {
  width: 18px;
  height: 18px;
  background-color: transparent;
  background-image: url('../assets/Innova/mobile/Inno_18_elipse_m.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.inno-m-list--stats li:last-child {
  grid-column: 1 / -1;
}

.inno-m-list-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  text-align: left;
  width: 100%;
}

.inno-m-list-columns ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.inno-m-list-columns li {
  position: relative;
  padding-left: 18px;
}

.inno-m-list-columns li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #d4ed6e;
}

.inno-m-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.inno-m-grid-item {
  text-align: center;
  padding: 4px 0;
  border-radius: 0;
  background: transparent;
  color: #235c4e;
  box-shadow: none;
}

.inno-m-grid-item h4 {
  font-size: clamp(1.4rem, 4.8vw, 2rem);
  font-weight: 800;
}

.inno-m-grid-item p {
  font-size: clamp(0.9rem, 3.2vw, 1.1rem);
}

.inno-m-cards {
  display: grid;
  gap: 12px;
  width: 100%;
}

.inno-m-card {
  background: transparent;
  color: #235c4e;
  border-radius: 0;
  padding: 0;
  text-align: left;
  box-shadow: none;
}

.inno-m-card h4 {
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  margin-bottom: 6px;
}

.inno-m-card p {
  font-size: clamp(0.95rem, 3.4vw, 1.1rem);
}

.inno-m-card p strong {
  font-size: clamp(1.4rem, 4.8vw, 2rem);
  font-weight: 900;
  display: inline-block;
  margin-top: 6px;
}

.inno-m-map {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.inno-m-overlay--map-cta {
  top: 58%;
  left: 50%;
  transform: translateX(-50%);
  width: min(92%, 680px);
  z-index: 9;
}

.btn-map-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px;
  border-radius: 999px;
  background: #e35e0e;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  animation: map-breathe 2.5s ease-in-out infinite;
  box-shadow: 0 10px 22px rgba(227, 94, 14, 0.35);
}

@keyframes map-breathe {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 5px rgba(227, 94, 14, 0.4));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 20px rgba(227, 94, 14, 0.8));
  }
}

.desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .mobile-only-container {
    display: none;
  }

  .desktop-only {
    display: block;
  }
}

@media (max-width: 420px) {
  .inno-m-list--columns,
  .inno-m-list-columns,
  .inno-m-grid {
    grid-template-columns: 1fr;
  }

  .inno-m-list--stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inno-m-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(58%, 220px);
  }

  .inno-m-cluster-grid {
    width: min(92%, 360px);
  }

  .inno-m-overlay {
    padding: 6vw;
  }

  .inno-m-mante-cards {
    grid-template-columns: 1fr;
    width: min(92%, 360px);
  }

  .inno-m-mante-card--under {
    grid-column: 1;
    width: 100%;
    max-width: 280px;
  }
}

h1 {
  font-family: 'Geomanist', sans-serif !important;
  font-weight: 700 !important; /* Geomanist Bold */
}

h2, h3 {
  font-family: 'Geomanist', sans-serif;
  font-weight: 500; /* Geomanist Medium */
}

h4, h5, h6 {
  font-family: 'Geomanist', sans-serif;
  font-weight: 500; /* Geomanist Medium */
}

/* ─── LAYOUT GENERAL ───
   .container centra el contenido con un ancho máximo de 1440px.
   Se usa dentro de cada section para contener el texto.
*/
.container {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 0 — BRAND HEADER (Fondo de playa + Logo de Innovación)
   ═══════════════════════════════════════════════════════════════
   → Fondo: assets/Innova/02. Fondo Header.png
   → Logo:  assets/Innova/01. Logo + Innovación.png
   
   AJUSTES RÁPIDOS:
   • ALTURA del section         → height: 120vh
   • TAMAÑO del logo            → .inno-brand-header__logo img { max-width }
   • POSICIÓN VERTICAL del logo → .inno-brand-header__logo { padding-bottom }
*/
.inno-brand-header {
  position: relative;
  width: 100%;
  height: 160vh;            /* ← ALTURA: más alto que la pantalla para dar impacto */
  overflow: visible;        /* Permite que la imagen del señor se sobreponga desde abajo */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contenedor de la IMAGEN DE FONDO (playa aérea) */
.inno-brand-header__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.inno-brand-header__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* Rellena todo el espacio sin deformar */
  display: block;
}

/* Contenedor del LOGO de Innovación (centrado) */
.inno-brand-header__logo {
  position: relative;
  z-index: 2;               /* Por encima del fondo */
  display: flex;
  justify-content: center;
  width: 100%;
  padding-bottom: 30vh;     /* ← Subido más a petición del usuario */
}

.inno-brand-header__logo img {
  max-width: min(85vw, 900px);  /* ← TAMAÑO DEL LOGO: cambiar aquí */
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.3));
  animation: acompFadeInUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes acompFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 1 — HERO ACAPULCO (Texto izq + Imagen del Señor)
   ═══════════════════════════════════════════════════════════════
   → Fondo: assets/Innova/03. Señor fondo.png (textura naranja)
   → Imagen flotante: assets/Innova/03. Señor.png
   
   AJUSTES RÁPIDOS:
   • SOBREPOSICIÓN con el header → margin-top: -220px (más negativo = más traslape)
   • ALTURA del section (abajo)  → .inno-hero__content { padding-bottom: 800px }
   • POSICIÓN del Señor (arriba) → .inno-hero__media { top: -100px }
   • ANCHO del Señor             → .inno-hero__media { width: 100vw }
   • ALINEACIÓN del texto        → .inno-hero__content { padding-left: 5% }
*/
.inno-hero {
  background: url('../assets/Innova/03. Señor fondo.png') no-repeat top center;
  background-size: cover;        /* Cubre todo el espacio aunque se alargue el contenedor */
  background-color: var(--orange); /* Color de relleno debajo de la imagen de fondo */
  min-height: 100vh;             /* ← ALTURA MÍNIMA del section */
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 5;                    /* Por encima del brand-header para superponerse */
  margin-top: -100px;            /* ← Revertido para no mover la imagen */
  padding-top: 0;                /* Se mantiene en 0 para ganar espacio arriba */
  overflow: visible;             /* ¡IMPORTANTE! Permite que el Señor salga del section */
}

/* BLOQUE DE TEXTO (título + descripción) — alineado al centro */
.inno-hero__content {
  position: relative;
  margin-top: -0.0vw;          /* Bajado: de -6.9vw a -4vw */
  padding: 0 5% 111vw 5%;  /* ← Proporcional: 1600px en 1440px */
  z-index: 20;                   /* Por encima de todas las imágenes (incluido el Señor) */
  max-width: 1330px;              /* ← ANCHO MÁXIMO del bloque de texto */
  margin-left: auto !important;    /* Fuerza alineación centro (sobreescribe .container) */
  margin-right: auto !important;
  text-align: center;
}

/* TÍTULO "Acapulco Se Transforma Contigo" */
.inno-hero__title {
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3rem);     /* Reducido más: hasta 3rem */
  line-height: 1.1;
  margin-top: -40px;    /* Subido */
  margin-bottom: 15px; /* Reducido para subir la descripción */
  text-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* DESCRIPCIÓN (párrafo debajo del título) */
.inno-hero__desc {
  color: var(--white);
  font-size: 1.4rem;              /* Reducido más: hasta 1.4rem */
  max-width: 750px;              /* ← Ampliado a la derecha */
  line-height: 1.4;
  opacity: 0.95;
  margin-left: auto;
  margin-right: auto;
}

/* IMAGEN DEL SEÑOR — posición absoluta, flota sobre todo */
.inno-hero__media {
  position: absolute;
  right: 0;
  top: -17vw;                    /* ← Proporcional: -245px en 1440px */
  width: 100vw;                  /* ← ANCHO: 100vw = toda la pantalla */
  height: auto;
  z-index: 15;                   /* ← CAPA: por delante del texto (10) y del fondo */
  pointer-events: none;          /* No bloquea clicks sobre el texto */
}

.inno-hero__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;           /* Muestra la imagen completa sin recortar */
  object-position: right bottom;
  filter: drop-shadow(-20px 20px 40px rgba(0,0,0,0.3)); /* Sombra para profundidad */
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 2 — STATS / POLÍGONO (Datos de hectáreas)
   ═══════════════════════════════════════════════════════════════
   AJUSTES RÁPIDOS:
   • COLOR DE FONDO → background-color: var(--orange)
   • PADDING        → padding: 120px 5%
*/
.inno-stats {
  position: relative;
  padding: 1px 5%;
  color: var(--white);
  overflow: visible;
  background-color: transparent;
  z-index: 25;                   /* Elevado para estar sobre la siguiente sección */
}

.inno-stats__grid {
  position: relative;
  display: block;
  text-align: center;            /* Centrar texto */
  max-width: 1800px;             /* Más ancho para la lista horizontal */
  margin-left: auto;
  margin-right: auto;
  margin-top: -90vw;             /* Bajado: de -97vw a -90vw */
  z-index: 20;                   /* Asegurar que esté sobre todas las imágenes */
}

.inno-stats__info h1 {
  font-size: 3rem;
  margin-bottom: 20px;           /* Espacio extra entre el título y el listado */
}

.inno-stats__number {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.2;
  margin-bottom: 80px;
  font-weight: 700 !important;
}

.inno-stats__list {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;             /* Todos en una sola línea horizontal */
  gap: 60px;
}

.inno-stats__list li {
  display: flex;
  align-items: center;
  gap: 10px;                     /* Reducido para que quepan todos */
  font-weight: 700;
  font-size: 2.1rem;             /* Aumentado a petición del usuario */
  text-align: center;            /* Centrado a petición del usuario */
  max-width: 200px;              /* Ancho limitado para forzar dos renglones por item */
  line-height: 1.05;              /* Espacio entre renglones menor */
}

.inno-stats__list li:last-child {
  max-width: 350px;              /* El último bullet es más amplio */
}

.inno-stats__list li::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('../assets/Innova/Ellipse 7.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* IMAGEN DE FLORES — posición absoluta, flota sobre todo */
.inno-stats__media {
  position: absolute;
  right: 0;
  top: -55vw;                   /* Bajado: de -57vw a -50vw */
  width: 100vw;                  /* ← ANCHO: 100vw = toda la pantalla */
  height: auto;
  z-index: 11;                   /* ← CAPA: por delante del texto (10) y del fondo */
  pointer-events: none;          /* No bloquea clicks sobre el texto */
}

@keyframes floating-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
@keyframes floating-invert {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(20px); }
}


/* IMAGEN DE NUEVO ROSTRO — posición absoluta, flota sobre todo */
.inno-actions__media {
  position: absolute;
  right: 0;
  top: -140px;                  /* ← POSICIÓN VERTICAL: Subido para solaparse bajo las flores */
  width: 100vw;                  /* ← ANCHO: 100vw = toda la pantalla */
  height: auto;
  z-index: 5;                   /* ← CAPA: por delante del texto (10) y del fondo */
  pointer-events: none;          /* No bloquea clicks sobre el texto */
  overflow: hidden;             /* Recorta un borde fino superior del asset inferior */
}

.inno-actions-img {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;           /* Muestra la imagen completa sin recortar */
  object-position: right bottom;
  filter: drop-shadow(-20px 20px 40px rgba(0,0,0,0.3)); /* Sombra para profundidad */
  transform: translateY(-2px);   /* Elimina la costura visual sin mover el contenedor */
}

/* ═══════════════════════════════════════════════════════════════
   IMAGEN DE RECOLECTOR DE BASURA — flota sobre todo
   CSS: .inno-actions__media (la segunda, para el recolector)
   ═══════════════════════════════════════════════════════════════ */
.inno-actions__media.inno-actions__media--recolector {
  position: absolute;
  right: 0;
  top: 54vw;                  /* Restaurado a original para monitores grandes */
  bottom: auto;
  width: 100vw;
  height: auto;
  z-index: 7;
  pointer-events: none;
  transform: translateY(-2px);
  animation: floating-invert 7s ease-in-out infinite; /* Animación de respiración invertida */
}

/* Contenedor de las tarjetas flotantes */
.mante-cards-container {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  pointer-events: auto;          /* Para permitir interacción con las tarjetas si es necesario */
}

/* Estilo base de cada tarjeta */
.mante-card {
  position: absolute;
  background: rgba(243, 248, 219, 0.8); /* Glassmorphism: Fondo más traslúcido */
  backdrop-filter: blur(10px);   /* Desenfoque del fondo */
  -webkit-backdrop-filter: blur(10px);
  padding: 25px;
  border-radius: 20px;
  text-align: center;
  max-width: 320px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border: 1px solid rgba(255, 255, 255, 0.3); /* Borde sutil de cristal */
  z-index: 25;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave */
}

.mante-card:hover {
  transform: translateY(-15px) scale(1.03);
  background: rgba(243, 248, 219, 0.95);
  box-shadow: 0 25px 50px rgba(0,0,0,0.2);
}

.mante-card h4 {
  color: #235c4e;
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.mante-card p {
  color: #235c4e;
  font-size: 1.05rem;
  line-height: 1.4;
  margin: 0;
}

.mante-card p strong {
  font-size: 2rem;
  font-weight: 900;
  display: block;
  margin-top: 5px;
}

/* Posiciones específicas para emular la imagen */
.mante-card--1 {
  top: 10%;
  left: 5%;
}

.mante-card--2 {
  top: 15%;
  right: 5%;
}

.mante-card--3 {
  top: 60%;
  left: 15%;
}

.mante-card--4 {
  top: 45%;
  right: 15%;
}

/* ═══════════════════════════════════════════════════════════════
   IMAGEN DE MONTAJE — posición absoluta, flota sobre todo
   CSS: .inno-actions__media (la tercera, para el montaje)
   ═══════════════════════════════════════════════════════════════ */
.inno-actions__media--montaje {
  position: absolute;
  right: 0;
  top: 139vw;                  /* ← Proporcional: 2000px en 1440px */
  bottom: auto;
  width: 100vw;
  height: auto;
  z-index: 10;                  /* ← Asegura que esté sobre otras capas si es necesario */
  pointer-events: none;
}

.inno-actions__media--montaje img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(-20px 20px 40px rgba(0,0,0,0.3));
}
/* (Apartados antiguos inno-michoacan e inno-footer eliminados por redundancia con V3) */


/* ═══════════════════════════════════════════════════════════════
   BOTÓN DE REGRESAR (Flecha verde lima — esquina superior izq)
   ═══════════════════════════════════════════════════════════════
   AJUSTES RÁPIDOS:
   • POSICIÓN   → top: 40px, left: 40px
   • COLOR      → color: #D4E23C
   • TAMAÑO     → width/height: 80px
*/
.nav-back {
  position: fixed;
  top: 40px;                     /* ← Distancia desde arriba */
  left: 40px;                    /* ← Distancia desde la izquierda */
  z-index: 100;                  /* Siempre por encima de todo */
}

.back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;                   /* ← TAMAÑO del botón */
  height: 80px;
  background: transparent;
  color: #D4E23C;                /* ← COLOR de la flecha (lime) */
  text-decoration: none;
  transition: transform 0.3s ease;
}

.back-link svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
}

.back-link span {
  display: none;                 /* Texto "Regresar" oculto */
}

.back-link:hover {
  transform: scale(1.1) translateX(-5px);
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 3 — ACTIONS (Costera Miguel Alemán)
   ═══════════════════════════════════════════════════════════════
   → Fondo blanco, tarjetas beige con bordes suaves
*/
.inno-actions {
  position: relative;
  padding: 0 5% 125vw 5%;     /* ← Proporcional: 1800px en 1440px */
  background-color: var(--white);
  min-height: 100vh;
  overflow: visible;
  z-index: 20;
  margin-top: -55vw;           /* ← Proporcional: -800px en 1440px */
}

.inno-actions__text {
  position: relative;
  max-width: 1000px;             /* Aumentado para coincidir con el estilo del Hero */
  margin: -100px auto 60px auto; /* Subido con margen negativo */
  text-align: center;            /* Centrar texto */
  z-index: 30;
}

.inno-actions__text h3 {
  font-size: clamp(2.5rem, 5vw, 4rem); /* Tamaño similar a otras secciones */
  line-height: 1.1;
  margin-bottom: 25px;
  color: white;
  font-weight: 400;              /* Peso normal para el inicio */
}

.inno-actions__text h3 strong {
  font-weight: 900;              /* Extra Bold para "Costera Miguel Alemán" */
  display: block;                /* Salto de línea para énfasis */
}

.inno-actions__text p {
  font-size: 1.25rem;
  max-width: 700px;
  margin: 0 auto;
  color: white;
}

.inno-actions__grid {
  position: relative;
  display: flex;
  gap: 30px;
  z-index: 30;
}

.inno-action-card {
  position: relative;
  flex: 1;
  background: transparent;       /* Quitar fondo */
  padding: 0;                    /* Quitar padding */
  border-radius: 0;              /* Quitar bordes */
  border: none;                  /* Quitar borde */
  z-index: 20;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inno-action-card img {
  width: 100%;                   /* Tamaño completo del contenedor de la tarjeta */
  max-width: 320px;              /* Límite para que no se pixelen */
  height: auto;
  margin-bottom: 30px;
  transition: transform 0.3s ease;
}

.inno-action-card:hover img {
  transform: scale(1.05);        /* Efecto sutil al pasar el mouse */
}

.inno-action-card h4 {
  font-size: 1.1rem;
  color: #235c4e;
  font-weight: 700;
}



/* ═══════════════════════════════════════════════════════════════
   SECTION 4 — CORREDORES Y CLAVADISTA
   ═══════════════════════════════════════════════════════════════ */
.inno-corredores-diver {
  position: relative;
  background-color: #FDF9EC; /* matching beige */
  padding: 80px 5% 0 5%;       /* Quitar padding inferior para que el clavadista mande */
  overflow: visible;
  margin-top: -10.4vw;         /* Proporcional: -150px en 1440px */
  z-index: 30;
}

/* Título — posicionado de forma independiente */
.corredores-title {
  position: relative;
  z-index: 10;
  text-align: center;
  color: #235c4e;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem); /* Un poco más chico */
  max-width: 1500px;
  margin: -52vw auto 31vw auto; /* Proporcional: -750px y 450px en 1440px */
  top: 3.5vw;                     /* Proporcional: 50px */
  padding: 0 5%;
}

.inno-corredores-diver .container {
  z-index: 10;
  /* Sin top — el diver-container se posiciona solo */
}

.inno-corredores-diver .inno-stats__list li {
  font-size: clamp(1.4rem, 3vw, 2.2rem);  /* Reducido todavía más a petición del usuario */
  max-width: none;               /* Que entren en una sola línea si es posible */
}

.diver-container {
  position: relative;
  width: 100vw;                  /* Toda la pantalla */
  max-width: none;               /* Quitamos el límite para que los textos floten libres */
  margin-left: calc(50% - 50vw); /* Truco para salir del .container padre */
  min-height: 55vw;              /* Proporcional: 800px */
  top: -34.7vw;                   /* Proporcional: -500px */
}

.diver-img {
  position: absolute;
  right: 0;
  bottom: 17.3vw;                 /* Proporcional: 250px */
  width: 100vw;
  height: auto;
  z-index: 5;
  display: block;
  animation: floating-subtle 10s ease-in-out infinite; /* Flotación más lenta para el clavadista */
}

.diver-text {
  font-weight: 800;
  color: #235c4e;
  font-size: clamp(1.1rem, 2.3vw, 1.9rem); /* Reducido 1 punto */
  text-align: center;
  z-index: 10;
}

.diver-texts-row {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 1300px;             /* Juntados un poco más */
  display: flex;
  justify-content: center;       /* Centrados */
  align-items: center;
  flex-wrap: wrap; 
  gap: 80px;                     /* Reducido el espacio entre ellos */
  z-index: 10;
}

.map-callout {
  position: absolute;
  top: 35%; /* Lowered */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  display: flex;
  flex-direction: row; /* Inline: title + button on same line */
  align-items: center;
  gap: 20px;
  width: auto;
  .map-callout {
 z-index: 999999;
 pointer-events: none;
}
}

.map-callout h1 {
  color: #E35E0E;
  font-size: clamp(2rem, 4vw, 3.6rem); /* Reduced 2 pts */
  margin: 0;
  white-space: nowrap;
  
}

.map-callout .btn-map {
  background-color: #E35E0E;
  color: #FFFFFF;
  padding: 12px 35px;
  border-radius: 40px;
  font-size: 1.65rem; /* Increased 1 pt approx */
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 15px rgba(227, 94, 14, 0.4);
  pointer-events: auto !important;
position: relative;
z-index: 999999;
touch-action: manipulation;
}

.map-callout .btn-map:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(227, 94, 14, 0.6);
}

.diver-text--5 {
  position: absolute;
  bottom: 5%;                 /* Subido un poco más */
  left: 5%;
  max-width: 650px;             /* Ajustado para forzar ~3 líneas */
  text-align: left;            /* Justificado a la izquierda */
}
.diver-text--5 h4 { font-size: 1.7rem; margin-bottom: 10px; }
.diver-text--5 p { font-size: 1.5rem; font-weight: 400; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════════
   SECTION 5 — INTEGRACIÓN CULTURAL (Versión V3 en uso)
   ═══════════════════════════════════════════════════════════════ */

.cultura-header {
  max-width: 800px;
  margin: 0 auto 60px auto;
}

.cultura-header h3 {
  color: #235c4e;
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.cultura-header p {
  color: #235c4e;
  font-size: 1.2rem;
  line-height: 1.5;
}

.cultura-grid {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-bottom: 80px;
  flex-wrap: wrap;
}

.cultura-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px;              /* Aumentado a petición del usuario */
  transition: all 0.3s ease;     /* Transición para el efecto hover */
  cursor: pointer;
}

.cultura-item img {
  width: 180px;                  /* Aumentado a petición del usuario */
  height: 180px;
  object-fit: contain;
  margin-bottom: 25px;
  transition: transform 0.3s ease;
}

.cultura-item h4 {
  color: #235c4e;
  font-size: 2.2rem;             /* Aumentado 2 puntos */
  font-weight: 900;
  margin-bottom: 5px;
  text-align: center;
}

.cultura-item p {
  color: #235c4e;
  font-size: 1.3rem;             /* Aumentado 2 puntos */
  line-height: 1.2;
  text-align: center;
}

/* Efecto Hover para toda la Card (Imagen + Texto) */
.cultura-item:hover {
  transform: scale(1.08);        /* Se agranda toda la card */
}

.cultura-item:hover h4,
.cultura-item:hover p {
  color: #E35E0E;                /* Cambia de color el texto al pasar el mouse */
}

/* ═══════════════════════════════════════════════════════════════
   CULTURA V3
   ═══════════════════════════════════════════════════════════════ */
.inno-cultura-v3 {
  background-color: #FDF9EC;
  padding-top: 80px;
  margin-top: -50px;             /* Bajado: de -250px a -50px */
  position: relative;
  z-index: auto;                  /* Cambiado a auto para no crear contexto de apilamiento cerrado */
}

.cultura-header-v3 {
  text-align: center;
  margin: 0 auto 60px auto;     /* Centrado del bloque contenedor */
  max-width: 1000px;             /* Ancho similar al Hero para consistencia */
  position: relative;
  z-index: 50;                   /* Asegura que el texto quede por encima del clavadista */
}

.cultura-header-v3 h3 {
  color: #235c4e;
  font-size: clamp(2.5rem, 5vw, 4rem);  /* Aumentado a petición del usuario */
  margin-bottom: 20px;
  font-family: 'Geomanist', sans-serif !important;
  font-weight: 700 !important;
}

.cultura-header-v3 p {
  color: #235c4e;
  font-size: 1.6rem;
  font-family: 'Lato', sans-serif;
  font-weight: 400;              /* Regular */
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   SENDEROS Y NUEVO MODELO V3
   ═══════════════════════════════════════════════════════════════ */
.inno-senderos-v3 {
  background-color: var(--white);
}

.inno-full-img-absolute {
  width: 100vw;
  display: block;
}

.inno-full-img {
  width: 100vw;
  margin-left: 0;
  display: block;
  line-height: 0;
}

.inno-full-img img {
  width: 100%;
  height: auto;
  display: block;
}

.senderos-v3-block1,
.senderos-v3-block2,
.nuevo-modelo-v3,
.pm-header-block,
.pm-patzcuaro-block {
  position: relative;
  width: 100vw;
  margin: 0;
  padding: 0;
  line-height: 0;                /* Quitar espacios de línea */
}

.senderos-v3-block1 img,
.senderos-v3-block2 img,
.nuevo-modelo-v3 img,
.pm-header-block img,
.pm-patzcuaro-block img {
  width: 100%;
  height: auto;
  display: block;
}

.senderos-v3-title {
  position: absolute;            /* Volver a absolute para flotar sobre la imagen */
  top: 32%;                      /* Subido un poco más a petición del usuario */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  color: var(--white);
  width: 100%;
}

.senderos-v3-title h3 {
  font-size: 3.5rem;
  margin-bottom: 60px;           /* Aumentado para mejor distribución visual */
}

.senderos-v3-title p {
  font-size: 1.3rem;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.5;
}

.senderos-v3-block2 {
  position: relative;
  width: 100vw;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: visible;              /* Visible para permitir traslape */
  margin-top: -200px;
  z-index: 1;                    /* Por encima de la playa aérea */
}

.senderos-v3-lists {
  position: absolute;
  top: 50%;
  left: 47%;                      /* Movido un poco a la izquierda */
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1350px;             /* Ajustado para no estar tan separados */
  padding: 0 5%;
}

.senderos-v3-col ul {
  list-style: none;
  padding: 0;
}

.senderos-v3-col li {
  color: var(--white);
  font-size: 1.8rem;              /* Un poco más grande como en la imagen */
  font-weight: 700;
  margin-bottom: 50px;           /* Aumentado más el espacio entre líneas */
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}

/* Ocultar punto para Avenida Universidad */
.senderos-v3-col li.no-dot::before {
  display: none;
}

.senderos-v3-col li::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: #D4ED6E;     /* Color lima/amarillo de la imagen */
  border-radius: 50%;
  margin-right: 20px;
  flex-shrink: 0;
}

/* Distribución Escalonada (Left Col) */
.senderos-v3-col:not(.right-list) li:nth-child(1) { margin-left: 100px; }
.senderos-v3-col:not(.right-list) li:nth-child(2) { margin-left: 40px; }
.senderos-v3-col:not(.right-list) li:nth-child(3) { margin-left: 130px; }
.senderos-v3-col:not(.right-list) li:nth-child(4) { margin-left: 80px; }
.senderos-v3-col:not(.right-list) li:nth-child(5) { margin-left: 150px; }

/* Distribución Escalonada (Right Col) */
.senderos-v3-col.right-list li:nth-child(1) { margin-left: 140px; }
.senderos-v3-col.right-list li:nth-child(2) { margin-left: 60px; }
.senderos-v3-col.right-list li:nth-child(3) { margin-left: 110px; }
.senderos-v3-col.right-list li:nth-child(4) { margin-left: 40px; }

/* Nuevo Modelo V3 (Sin fondo negro) */
.nuevo-modelo-v3 {
  position: relative;
  width: 100vw;
  min-height: 800px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: -200px;             /* Bajado un poco */
  z-index: 16;                     /* Por debajo de Senderos 2 (z-index: 15) */
}

.nuevo-modelo-v3-content {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  z-index: 10;
  color: var(--white);
  max-width: 700px;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

.nuevo-modelo-v3-content h3 {
  font-size: 3rem;
  line-height: 1.1;
  margin-bottom: 20px;
}

.nuevo-modelo-v3-content p {
  font-size: 1.8rem;
  line-height: 1.6;
}

/* Marinabús V3 */
.marinabus-v3 {
  position: relative;
  width: 100vw;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: -200px;             /* Overlap máximo */
  z-index: 28;                    /* Entre Nuevo Modelo (10) y PM 1 (12) */
}

.marinabus-v3-content {
  position: absolute;
  top: 70%;                      /* Subido más a petición del usuario */
  left: 50%;
  transform: translate(-50%, -50%); /* Centrado total */
  z-index: 10;
  color: #000000;                /* Texto en negro */
  width: 90%;
  max-width: 1000px;
  text-align: center;            /* Centrado de texto */
}

.marinabus-v3-content h1 {
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1.1;
  margin-bottom: 5px;
  text-transform: none;           /* Removidas las mayúsculas a petición del usuario */
}

.marinabus-v3-content h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem); /* Aumentado */
  line-height: 1.2;
  margin-bottom: 60px;
  color: #000000;                /* También en negro */
}

.marinabus-v3-content p {
  font-size: 1.5rem;             /* Aumentado */
  line-height: 1.6;
  max-width: 680px;              /* Ajustado para forzar ~4 líneas */
  margin: 0 0 0 0px;           /* Desplazado a la izquierda */
  text-align: left;              /* Alineado a la izquierda */
}

/* ═══════════════════════════════════════════════════════════════
   PLAN MICHOACAN V3
   ═══════════════════════════════════════════════════════════════ */
.inno-michoacan-v3 {
  background-color: var(--white);
}

.inno-michoacan-v3 > .inno-full-img:first-child {
  margin-top: -250px;             /* Overlap extra para PM 1 */
  position: relative;
  z-index: 29;                    /* Por encima de Nuevo Modelo (z-index 10) */
}

.pm-header-block {
  position: relative;
  width: 100vw;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: -100px;             /* Overlap máximo */
  z-index: 30;
}

.pm-header-text {
  position: absolute;
  top: 19.5%;                      /* Subido un poco más a petición del usuario */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: var(--white);
  text-align: center;
  width: 90%;
  max-width: 800px;
}

.pm-header-text h2:first-of-type {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: 20px;
  line-height: 1.2;              /* Más espacio entre líneas */
}

.pm-header-text h2:nth-of-type(2) {
  font-size: clamp(1.5rem, 3.5vw, 2.8rem);
  margin-top: 5px;
  margin-bottom: 40px;
  text-transform: none;          /* Mixed case as seen in image */
}

.pm-header-text p {
  font-size: 1.3rem;             /* Un poco más grande */
  line-height: 1.8;              /* Más espacio entre líneas */
  max-width: 650px;              /* Un poco más ancho */
  margin: 0 auto;
  opacity: 1;
}

.pm-project-block-v3 {
  position: relative;
  width: 100vw;
  line-height: 0;
  margin-top: -350px;             /* Subido un poco más a petición del usuario */
  z-index: 31;
}

.pm-project-block-v3 img {
  width: 100%;
  height: auto;
  display: block;
}

.pm-project-overlay-v3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;       /* Alineado al top */
  padding-top: 320px;            /* Bajado: de 250px a 320px */
  z-index: 10;
}

.pm-project-overlay-v3 .container {
  margin-left: 0 !important;     /* Forzamos que no se centre */
  max-width: none !important;
}

.pm-project-content-v3 {
  max-width: 900px;             /* Ampliado para que el título entre en dos renglones */
  color: #af4c25;
  margin-left: 18%;               /* Movido: de 15% a 18% a la derecha */
  text-shadow: none;
}

.pm-project-content-v3 h3 {
  font-size: 2.8rem;
  line-height: 1.1;
  margin-bottom: 25px;
}

.pm-project-content-v3 p {
  font-size: 1.6rem;             /* Aumentado a petición del usuario */
  line-height: 1.6;
}

.pm-janitzio-block {
  position: relative;
  width: 100vw;
  line-height: 0;
  margin-top: -450px;             /* Subido: de -350px a -450px */
  z-index: 34;
  overflow: hidden;
}

.pm-janitzio-overlay {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 30;
  text-align: center;
  color: #235c4e;                /* Nuevo color solicitado */
  padding: 40px 5%;
  line-height: 1.6;
}

.pm-janitzio-overlay--top {
  top: 8%;                       /* Subido un poco más a petición del usuario */
}

.pm-janitzio-overlay--bottom {
  bottom: 17%;                  /* Subido un poco más a petición del usuario */
  color: #af4c25;                /* Nuevo color solicitado */
}

.pm-janitzio-overlay h1,
.pm-janitzio-overlay h3 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem); /* Aumentado 2 puntos aprox */
  margin: 0 auto 20px auto;      /* Centrado y con margen inferior */
  max-width: 900px;              /* Contenedor más chico a petición del usuario */
  text-shadow: none;             /* Quitamos sombra para mayor nitidez con el nuevo color */
}

.pm-janitzio-overlay--bottom h3 {
  font-size: clamp(1.5rem, 3vw, 2.4rem);   /* Reducido más a petición del usuario */
}

.pm-janitzio-overlay p {
  font-size: 1.80rem;             /* Aumentado a petición del usuario */
  max-width: 1000px;              /* Un poco más ancho para compensar el tamaño */
  margin: 0 auto;
  text-shadow: none;             /* Quitamos sombra */
}

.pm-patzcuaro-block {
  position: relative;
  width: 100vw;
  line-height: 0;
  margin-top: -350px;             /* Subido a petición del usuario */
  z-index: 35;
}

.pm-patzcuaro-overlay {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10;
  text-align: center;
  color: #000000;                /* Nuevo color solicitado */
  padding: 20px 5%;
}

.pm-patzcuaro-overlay--purple {
  top: 19%;
  transform: translateY(-50%);
}

.pm-patzcuaro-overlay--orange {
  top: 50%;
  transform: translateY(-50%);
  color: #fff7e9;                /* Nuevo color solicitado para esta parte */
}

.pm-patzcuaro-overlay h1,
.pm-patzcuaro-overlay h3 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);   /* Reducido a petición del usuario */
  margin: 0 auto 35px auto;      /* Centrado y con margen inferior */
  max-width: 1100px;             /* Ampliado para que el título entre mejor */
  line-height: 1.2;
}

.pm-patzcuaro-overlay p {
  font-size: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  line-height: 1.5;
  opacity: 1;
}

.pm-patzcuaro-overlay--orange p {
  font-size: 1.6rem;             /* Reducido un poco para mejor balance */
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER V3
   ═══════════════════════════════════════════════════════════════ */
.inno-footer-v3 {
  width: 100vw;
  background-color: transparent;  /* Quitar fondo para que la transparencia de la imagen funcione */
  margin-top: -400px;             /* Overlap masivo para que monte sobre Pátzcuaro */
  position: relative;
  z-index: 35;
}

.footer-content-v3 {
  position: absolute;
  top: 60%;                      /* Ajustado para que caiga bien sobre la imagen */
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff7e9;                /* Nuevo color solicitado */
  width: 90%;
  max-width: 1200px;
  z-index: 10;
}

.footer-content-v3 p {
  font-size: 1.5rem;             /* Incrementado 2 puntos aprox respecto al estándar */
  line-height: 1.6;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL (Efecto de aparecer al hacer scroll)
   ═══════════════════════════════════════════════════════════════ */
.section-observe {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.section-observe.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — NAV BACK
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .nav-back {
    left: 10px;
    top: 20px;
    position: fixed;
    z-index: 100;
  }

  .back-link {
    width: 50px;
    height: 50px;
    animation: nav-breathe 2.5s ease-in-out infinite;
  }

  @keyframes nav-breathe {
    0%, 100% {
      transform: scale(1);
      filter: drop-shadow(0 0 5px rgba(212, 226, 60, 0.4));
    }
    50% {
      transform: scale(1.1);
      filter: drop-shadow(0 0 15px rgba(212, 226, 60, 0.8));
    }
  }
}

/* ═══════════════════════════════════════════════════════════════
   OPTIMIZACIÓN PARA MONITORES GRANDES (Min 1900px)
   A pedido del usuario: Bajar ciertos bloques de contenido.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1900px) {
  /* 1. Acapulco Se Transforma... (Hero) */
  .inno-hero__content {
    margin-top: 4vw;          /* Bajado considerablemente */
  }

  /* 2. El polígono mide... (Stats) */
  .inno-stats__grid {
    margin-top: -90vw;        /* Bajado considerablemente */
  }

  .inno-stats__media {
    top: -56vw;                /* Bajamos la imagen de las flores */
  }

  /* 3. Contenedor del clavadista (textos y elementos) */
  .diver-container {
    top: -19vw;               /* Bajado considerablemente */
  }

  /* 4. Imagen del clavadista */
  .diver-img {
    bottom: 5vw;              /* Bajada para acompañar el bloque */
  }

  /* 5. Título de Corredores */
  .corredores-title {
    top: 18vw;                /* Bajado considerablemente */
  }
}

/* ═══════════════════════════════════════════════════════════════
   OPTIMIZACIÓN PARA LAPTOPS PEQUEÑAS (Max 1360px)
   A pedido del usuario: Ajustes para resolución 1366 x 768.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1360px) and (min-width: 760px) {
  /* Aquí irán los ajustes para laptops de 1366x768 */
  .inno-hero__content {
    margin-top: -2vw;         /* Bajamos un poco (estaba en -8vw) */
  }
  
  .inno-actions__media.inno-actions__media--recolector {
    top: 60vw;                /* Subido un poco: de 65vw a 60vw */
  }

  .inno-actions {
    margin-top: -50vw;         /* Subido a petición del usuario: de -50vw a -58vw */
  }

  .inno-corredores-diver {
    margin-top: -15vw;         /* Subido: de -10.4vw a -15vw */
  }

  .diver-img {
    bottom: 22vw;              /* Subida a petición del usuario: de 17.3vw a 22vw */
  }

  .map-callout h1 {
    font-size: clamp(1.8rem, 3.5vw, 3rem); /* Reducido para laptops */
  }

  .map-callout .btn-map {
    padding: 10px 25px;         /* Botón más chico */
    font-size: 1.4rem;
  }

  .inno-cultura-v3 {
    padding-top: 10px;          /* Contenedor más corto de arriba */
    margin-top: -18vw;           /* Subido a petición del usuario */
  }

  .marinabus-v3-content h2 {
    margin-bottom: 30px;        /* Reduce espacio debajo del h2 para subir el p */
  }

  .marinabus-v3-content p {
    font-size: 1.25rem;         /* Texto más chico para laptops */
  }

  .pm-header-text h2:first-of-type {
    font-size: clamp(2rem, 5vw, 3.5rem); /* Título más chico para laptops */
  }

  .pm-header-text h2:nth-of-type(2) {
    font-size: clamp(1.2rem, 2.5vw, 2.2rem); /* Subtítulo más chico para laptops */
  }

  .pm-header-text p {
    font-size: 1.1rem; /* Párrafo más chico para laptops */
  }

  .pm-janitzio-block {
    margin-top: -22vw;          /* Bajado un poco para laptops */
  }

  .pm-project-content-v3 {
    max-width: 700px;           /* Contenedor más estrecho y texto más largo */
    margin-top: -60px;          /* Subido a petición del usuario */
  }

  .pm-project-content-v3 p {
    font-size: 1.25rem;         /* Reducido para laptops */
  }
}

/* ═══════════════════════════════════════════════════════════════
   OPTIMIZACIÓN PARA LAPTOPS ESTÁNDAR (1361px - 1899px)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1361px) and (max-width: 1899px) {
  .inno-hero__content {
    margin-top: 2vw;          /* Bajamos un poco en laptops estándar */
  }

  .inno-actions__media.inno-actions__media--recolector {
    top: 50vw;                /* Subido un poco: de 55vw a 50vw */
  }

  .inno-actions {
    margin-top: -50vw;         /* Subido a petición del usuario: de -50vw a -58vw */
  }

  .inno-corredores-diver {
    margin-top: -15vw;         /* Subido: de -10.4vw a -15vw */
  }

  .diver-img {
    bottom: 22vw;              /* Subida a petición del usuario: de 17.3vw a 22vw */
  }

  .map-callout h1 {
    font-size: clamp(1.8rem, 3.5vw, 3rem); /* Reducido para laptops */
  }

  .map-callout .btn-map {
    padding: 10px 25px;         /* Botón más chico */
    font-size: 1.4rem;
  }

  .inno-cultura-v3 {
    padding-top: 10px;          /* Contenedor más corto de arriba */
    margin-top: -18vw;           /* Subido a petición del usuario */
  }

  .marinabus-v3-content h2 {
    margin-bottom: 30px;        /* Reduce espacio debajo del h2 para subir el p */
  }

  .marinabus-v3-content p {
    font-size: 1.25rem;         /* Texto más chico para laptops */
  }

  .pm-header-text h2:first-of-type {
    font-size: clamp(2rem, 5vw, 3.5rem); /* Título más chico para laptops */
  }

  .pm-header-text h2:nth-of-type(2) {
    font-size: clamp(1.2rem, 2.5vw, 2.2rem); /* Subtítulo más chico para laptops */
  }

  .pm-header-text p {
    font-size: 1.1rem; /* Párrafo más chico para laptops */
  }

  .pm-janitzio-block {
    margin-top: -22vw;          /* Bajado un poco para laptops */
  }

  .pm-project-content-v3 {
    max-width: 700px;           /* Contenedor más estrecho y texto más largo */
    margin-top: -60px;          /* Subido a petición del usuario */
  }

  .pm-project-content-v3 p {
    font-size: 1.25rem;         /* Reducido para laptops */
  }
}
/* ========================================================
   SOPORTE PARA MODO OSCURO EN MÓVILES
   ======================================================== */
@media (prefers-color-scheme: dark) {
  
  /* Si el celular del usuario está en Modo Oscuro, aplicamos esto: */
  .inno-m-overlay--hero-text {
    background-color: #1a1a1a !important; /* Creamos un fondo oscuro para la caja */
    padding: 20px !important;              /* Espacio para que el texto respire */
    border-radius: 8px !important;         /* Bordes redondeados estéticos */
  }
  
  /* Forzamos a que las letras cambien a blanco brillante dentro de esa caja */
  .inno-m-overlay--hero-text h1,
  .inno-m-overlay--hero-text p {
    color: #ffffff !important; 
  }
  /* =========================================
   FIX DEFINITIVO MOBILE CLICK
========================================= */

/* Las imágenes NO capturan toques */
img {
    pointer-events: none !important;
}

/* Los overlays tampoco */
div[class*="overlay"],
div[class*="absolute"],
div[class*="media"],
div[class*="img"] {
    pointer-events: none !important;
}

/* SOLO los botones y links sí */
a,
button,
.btn-map,
.back-link {
    pointer-events: auto !important;
    position: relative;
    z-index: 999999 !important;
    touch-action: manipulation;
}