@charset "utf-8";

/* ============================================================
   VARIABLES
============================================================ */
:root{
  --mtt-navy:#123b5d;
  --mtt-blue:#0b73a7;
  --mtt-turquoise:#0fa3a6;
  --mtt-gold:#d8a73c;
  --mtt-ink:#22313b;
  --mtt-soft:#f3f8fa;
  --mtt-white:#fff;
  --mtt-border:#dbe7ec;
}


/* ============================================================
   GLOBAL
============================================================ */
html { scroll-behavior:smooth; }

body {
  background:#f4f6f8;
  color:#333;
  font-family:'Inter','Segoe UI',sans-serif;
  line-height:1.55;
  margin:0;
}

main h2{
  margin:0 0 20px;
  color:var(--mtt-navy);
  font-size:clamp(1.65rem,3vw,2.3rem);
  line-height:1.2;
  text-align:center;
}

/* ============================================================
   GRID MAESTRO
============================================================ */
.tour-grid {
  max-width:1280px;
  margin:0 auto;
  padding:0 40px;
  display:grid;
  grid-template-areas:
    "breadcrumb"
    "hero"
    "intro"
    "summary-highlights"
	"bacalar-lagoon"
    "whychoose"
    "responsiblewildlife"
    "routeoptions"
    "cenotesculture"
    "itinerary"
    "accommodation"
    "inclusions"
    "extensions"
    "who"
    "travel-agencies"
    "whymtt"
    "cta"
    "related"
    "faq"
    "footer";
  row-gap:25px;
}

@media(min-width:1600px){
  .tour-grid{max-width:1400px;padding:0 60px;}
}
@media(max-width:768px){
  .tour-grid{padding:0 16px;row-gap:20px;}
}

/* ÁREAS */
.mtt-breadcrumb        { grid-area: breadcrumb; }
.tour-hero             { grid-area: hero; }
.tour-intro            { grid-area: intro; }
.responsible-wildlife  { grid-area: responsiblewildlife; }
.bacalar-lagoon        { grid-area: bacalar-lagoon;}
.route-options         { grid-area: routeoptions; }
.summary-highlights    { grid-area: summary-highlights; }
.bacalar-lagoon        { grid-area: bacalar-lagoon; }
.cenotes-culture       { grid-area: cenotesculture; }
.why-choose            { grid-area: whychoose; }
.itinerary             { grid-area: itinerary; }
.accommodation-approach { grid-area: accommodation; }
.included-notincluded-grid { grid-area: inclusions; }
.optional-extensions   { grid-area: extensions; }
.who-is-for            { grid-area: who; }
.travel-agencies       { grid-area: travel-agencies; }
.why-mexicotoptravel   { grid-area: whymtt; }
.final-cta             { grid-area: cta; }
.related-tours         { grid-area: related; }
.faq-section           { grid-area: faq; }
.site-footer           { grid-area: footer; }

.margen-superior{margin-top: 2em;}

/* ============================================================
   BREADCRUMB
============================================================ */
.mtt-breadcrumb {
  font-size:0.9rem;
  color:#536773;
  padding:10px 20px;
}
.mtt-breadcrumb a{ color:#0b73a7; text-decoration:none; }
.mtt-breadcrumb a:hover{ text-decoration:underline; }

/* ============================================================
   TOPBAR PREMIUM — LOGO + LANG SWITCH
============================================================ */
.mtt-topbar-wrapper {
  position:relative;
  height:0;
  width:100%;
  z-index:60;
}

.mtt-topbar {
  position:absolute;
  top:10px;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 40px;
  box-sizing:border-box;
}

@media(max-width:768px){
  .mtt-topbar {
    top:10px;
    padding:0 16px;
  }
}

/* LOGO PREMIUM */
.mtt-logo img {
  height:54px;
  width:auto;
  display:block;
  background:rgba(0,0,0,0.45);
  padding:6px 12px;
  border-radius:10px;
  border:1px solid rgba(216,167,60,0.45);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.25),
    0 3px 8px rgba(0,0,0,0.18);
  transition:transform .25s ease, box-shadow .25s ease;
}
.mtt-logo img:hover {
  transform:translateY(-6px);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.35),
    0 4px 12px rgba(0,0,0,0.22);
}

/* LANG SWITCH */
.lang-switch a {
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  background:rgba(0,0,0,0.55);
  border-radius:10px;
  border:1px solid rgba(216,167,60,0.45);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.25),
    0 3px 8px rgba(0,0,0,0.18);
  transition:background .25s ease,
              transform .25s ease,
              box-shadow .25s ease,
              border-color .25s ease;
}
.lang-switch a:hover {
  background:rgba(0,0,0,0.75);
  transform:translateY(-6px);
  border-color:rgba(216,167,60,0.65);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.35),
    0 4px 12px rgba(0,0,0,0.22);
}
.lang-switch img {
  width:28px;
  height:28px;
  border-radius:4px;
}

@media(max-width:768px){
  .mtt-logo img {
    height:42px;
    padding:4px 10px;
  }
  .lang-switch a {
    width:42px;
    height:42px;
  }
  .lang-switch img {
    width:24px;
    height:24px;
  }
}

/* ============================================================
   HERO GENERAL
============================================================ */
.tour-hero {
  position:relative;
  width:100%;
  text-align:center;
}
.tour-hero::before {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.18);
  z-index:1;
}
.tour-hero > * { position:relative; z-index:2; }

.tour-hero h1 {
  max-width:950px;
  margin:50px auto 20px;
  font-size:clamp(1.9rem,4vw,3.6rem);
  line-height:1.3;
  color:#fff;
  text-shadow:
    0 4px 12px rgba(0,0,0,0.65),
    0 8px 28px rgba(0,0,0,0.55),
    0 0 18px rgba(0,0,0,0.40);
}

.tour-hero h2 {
  max-width:870px;
  margin:20px auto;
  font-size:clamp(1rem,1.8vw,1.6rem);
  color:#fff;
  text-shadow:
    0 4px 12px rgba(0,0,0,0.65),
    0 8px 28px rgba(0,0,0,0.55),
    0 0 18px rgba(0,0,0,0.40);
}

.hero-buttons {
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:40px;
}

.hero-buttons {
  margin-top:60px;
  transform:translateY(60px);
}

@media(max-width:768px){
  .hero-buttons {
    margin-top:180px;
    transform:none;
  }
}

/* Mobile hero */
@media(max-width:768px){
  .tour-hero{
    width:100%;
    padding:140px 20px 120px;
  }
  .tour-hero h1{ transform:translateY(-120px); }
  .tour-hero h2{ transform:translateY(110px); }
  .hero-buttons .btn{
    width:60%;
    max-width:320px;
  }
}

/* ============================================================
   HERO SEGÚN TOUR
============================================================ */
/* 01 HERO CANCUN + PLAYA DEL CARMEN */

.hero-cancun-playa-del-carmen{
  padding:150px 0 100px;
  background:url('../images/cancun-playa-del-carmen.jpg') center/cover no-repeat;
}
.hero-cancun-playa-del-carmen h1{ transform:translateY(-200px); }
.hero-cancun-playa-del-carmen h2{ transform:translateY(-200px); }

@media(max-width:768px){
  .hero-cancun-playa-del-carmen {background-image:url('../images/hero-movil-cancun-playa-del-carmen.jpg');}
  .hero-cancun-playa-del-carmen h1{
	  transform:translateY(-140px);
	  padding-left: 0.5em;
	  padding-right: 0.5em
	}
  .hero-cancun-playa-del-carmen h2{
	  transform:translateY(-130px);
	  padding-left: 0.5em;
	  padding-right: 0.5em
	}
	
  .hero-cancun-playa-del-carmen .hero-buttons{
   transform:translateY(80px) !important;
}
}

/* 02 HERO PLAYA DEL CARMEN COZUMEL */
.hero-playa-cozumel{
  padding:140px 0 100px;
  background:url('../images/what-to-do-playa-del-carmen-cozumel.jpg') center/cover no-repeat;
}
.hero-playa-cozumel h1{transform:translateY(-190px); }
.hero-playa-cozumel h2{
  transform:translateY(90px);
  text-shadow:
    0 4px 12px rgba(0,0,0,0.65),
    0 8px 28px rgba(0,0,0,0.55),
    0 0 18px rgba(0,0,0,0.45);
}

.hero-playa-cozumel .hero-buttons{padding:13px 20px !important}

@media(max-width:768px){
  .hero-playa-cozumel{
    background-image:url('../images/hero-playa-del-carmen-cozumel-movil.jpg');
    background-position:top center;
  }
  .hero-playa-cozumel h1{ transform:translateY(-130px); padding-left: 0.2em;
	  padding-right: 0.5em }
  .hero-playa-cozumel h2{ transform:translateY(-125px); padding-left: 0.2em;
	  padding-right: 0.5em}
  .hero-playa-cozumel .hero-buttons{transform:translateY(100px) !important;}
  } 


/* 03 HERO COZUMEL DIVING */
.hero-cozumel-diving{
  padding:160px 0 120px;
  background:url('../images/cozumel-scuba-diving.webp') center/cover no-repeat;
}
.hero-cozumel-diving h1{ transform:translateY(-210px); margin-top: 1.1em}
.hero-cozumel-diving h2{ transform:translateY(80px); }
.hero-cozumel-diving .btn-whatsapp{padding:15px 25px !important}

@media(max-width:768px){
  .hero-cozumel-diving h1{ transform:translateY(-140px); padding-left: 0.2em;
	  padding-right: 0.2em}
  .hero-cozumel-diving h2{ transform:translateY(150px); padding-left: 0.2em;
	  padding-right: 0.2em}
  .hero-cozumel-diving .hero-buttons{transform:translateY(100px) !important;} 
}

/* 04 RIVIERA MAYA AKUMAL */
.hero-akumal-tulum-escape{
  padding:100px 0 80px;
  background:url('../images/akumal-tour-hero.jpg') center/cover no-repeat;
}
.hero-akumal-tulum-escape h1{ transform:translateY(-100px); }
.hero-akumal-tulum-escape h2{ transform:translateY(80px); }

@media(max-width:768px){  
    .hero-akumal-tulum-escape{
      padding:50px 0 50px;
      background-image: url('../images/akumal-tour-hero-movil.jpg');           
        }
    .hero-akumal-tulum-escape h1{ transform:translateY(-40px); padding-left: 0.2em;
	  padding-right: 0.2em  }
    .hero-akumal-tulum-escape h2{
        transform:translateY(195px);
        padding-left: 0.5em;
        padding-right: 0.5em;
    } 
    .hero-akumal-tulum-escape .hero-buttons{		
		transform:translateY(30px) !important;}    
    } 


/* 05 HERO CANCUN - ISLA MUJERES */

.hero-cancun-isla-mujeres-escape{
    padding:100px 0 80px;
  background:url('../images/cancun-isla-mujeres-hero.jpg') center/cover no-repeat;
}
.hero-cancun-isla-mujeres-escape h1{ transform:translateY(-140px); }
.hero-cancun-isla-mujeres-escape h2{ transform:translateY(115px); }
.hero-cancun-isla-mujeres-escape .btn-whatsapp{padding:15px 25px !important}

@media(max-width:768px){  
    .hero-cancun-isla-mujeres-escape{     
      background-image: url('../images/cancun-isla-mujeres-hero-movil.jpg');           
        }
    .hero-cancun-isla-mujeres-escape h1{ transform:translateY(-90px);
    padding-left: 0.2em; padding-right: 0.2em}
    .hero-cancun-isla-mujeres-escape h2{
        transform:translateY(200px);
        padding-left: 20px;
        padding-right: 20px;
    } 
     .hero-cancun-isla-mujeres-escape .hero-buttons{transform:translateY(65px) !important;}     
    }

/* 06 HERO CANCUN VALLADOLID HOLBOLX */

.hero-cancun-valladolid-holbox{
  padding:150px 0 100px;
  background:url('../images/hero-cancun-valladolid-holbox.jpg') center/cover no-repeat;
}
.hero-cancun-valladolid-holbox h1{ 
    font-size: 2.7em;
    transform:translateY(-185px); }
.hero-cancun-valladolid-holbox h2{ transform:translateY(70px); }


@media(max-width:768px){ 
		
    .hero-cancun-valladolid-holbox h1{	
        font-size: 1.2em;
	    padding-left: 0.4em;
		padding-right: 0.4em;
		transform:translateY(-140px)
			;}
        
    .hero-cancun-valladolid-holbox h2{
        transform:translateY(-145px);
        font-size: 1em;
        padding-left: 20px;
        padding-right: 20px;
    } 
    .hero-cancun-valladolid-holbox .hero-buttons{transform:translateY(90px) !important;}   
    }

/* 07 HERO BACALAR - MAHAUAL*/

.hero-bacalar-mahahual{
  padding:200px 0 200px;
	background:url('../images/hero-bacalar-mahahual.jpg');}
.hero-bacalar-mahahual h1{ 
    font-size: 2.7em;
    transform:translateY(-220px); }
.hero-bacalar-mahahual h2{ transform:translateY(-225px); }
.hero-bacalar-mahahual .hero-buttons{transform:translateY(170px) !important;}

@media(max-width:768px){  
    .hero-bacalar-mahahual{
		background-image: url('../images/hero-bacalar-mahahual-movil.jpg');  
        background-size: cover;
		/*background-size: contain;*/
		background-repeat: no-repeat;
		background-position:center top;
		padding-top:40px;
        padding-bottom:40px;
      }

    .hero-bacalar-mahahual h1{ 
        font-size: 1.5em;
        transform:translateY(-30px); }
    .hero-bacalar-mahahual h2{
        transform:translateY(-55px);
        font-size: 1em;
        padding-left: 20px;
        padding-right: 20px;
    } 
    .hero-bacalar-mahahual .hero-buttons{transform:translateY(25px) !important;}   
    }


/* 08 HERO TULUM - BACALAR*/

.hero-tulum-bacalar{
    padding:100px 0 80px;
  background:url('../images/hero-cancun-bacalar.jpg') center/cover no-repeat;
}
.hero-tulum-bacalar h1{ 
    font-size: 3em;
    transform:translateY(-150px); }
.hero-tulum-bacalar h2{ transform:translateY(-140px); }

@media(max-width:768px){  
    .hero-tulum-bacalar{
      padding:50px 0 50px;
      background-image: url('../images/hero-cancun-bacalar-movil.jfif');           
        }
    .hero-tulum-bacalar h1{ 
        font-size: 1.5em;
        transform:translateY(-35px);
		padding-left: 0.5em;
		padding-right: 0.5em;
	}
    .hero-tulum-bacalar h2{
        transform:translateY(-50px);
        font-size: 1em;
        padding-left: 20px;
        padding-right: 20px;
    } 
    .hero-tulum-bacalar .hero-buttons{transform:translateY(45px) !important;}   
    }

/* HERO GRAND PRIVATE TOUR MEXICAN CARIBBEAN */

.hero-grand-mexican-caribbean{
    padding:100px 0 80px;
  background:url('../images/grand-mexican-caribbean-tour.jpg') center/cover no-repeat;
}
.hero-grand-mexican-caribbean h1{ 
    font-size: 3em;
    transform:translateY(-150px); }
.hero-grand-mexican-caribbean h2{ transform:translateY(-50px); }

@media(max-width:768px){  
    .hero-grand-mexican-caribbean{
      padding:50px 0 50px;
      background-image: url('../images/grand-mexican-caribbean-tour-movil.jpg');           
        }
    .hero-grand-mexican-caribbean h1{ 
        font-size: 1.5em;
        transform:translateY(-40px); }
    .hero-grand-mexican-caribbean h2{
        transform:translateY(-55px);
        font-size: 1em;
        padding-left: 20px;
        padding-right: 20px;
    } 
    .hero-grand-mexican-caribbean .hero-buttons{transform:translateY(45px) !important;}    
    }


/* HERO MEXICAN CARIBBEAN + YUCATÁN */
.hero-cancun-yucatan{
  padding:150px 0 100px;
  background:url('../images/mexican-caribbean-yucatan.jpg') center/cover no-repeat;
}
.hero-cancun-yucatan h1{ transform:translateY(-200px); }
.hero-cancun-yucatan h2{ transform:translateY(80px); }

@media(max-width:768px){
  .hero-cancun-yucatan{ background-image:url('../images/hero-mexican-caribbean-yucatan.jpg');}
  .hero-cancun-yucatan h1{
      transform:translateY(30px);
      padding-left: 10px;
      padding-right: 10px;
    }
  .hero-cancun-yucatan h2{ transform:translateY(35px); }
    
 .hero-cancun-yucatan .hero-buttons { transform:translateY(-130px); }
}

@media (max-width:768px){

    .hero-buttons .btn,
    .hero-buttons .btn-whatsapp{
        width:280px;
        justify-content:center;
        padding:13px 35px;
        box-sizing:border-box;
    }

}


/* ============================================================
   BOTONES
============================================================ */
.btn {
  padding:12px 22px;
  border-radius:6px;
  font-weight:700;
  text-decoration:none;
  transition:all .28s ease;
}

/* Botón dorado */
.btn-primary {
  background:var(--mtt-gold);
  color:#16242c;
}
.btn-primary:hover {
  background:#e6b200;
  transform:translateY(-3px);
}

/* Botón blanco */
.btn-secondary {
  background:#fff;
  color:#16242c;
}
.btn-secondary:hover {
  background:rgba(255,255,255,.85);
  transform:translateY(-3px);
}

/* WhatsApp */
.btn-whatsapp {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#25D366;
  color:#fff;
  padding:12px 22px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-whatsapp:hover {
  transform:translateY(-3px);
  box-shadow:0 6px 14px rgba(0,0,0,0.2);
}
.wa-svg { width:18px; height:18px; }

@media(max-width:768px){ 

.final-cta .cta-buttons .btn-whatsapp{
    transform:translateY(0px) !important;
}
}

/* ============================================================
   SUMMARY + HIGHLIGHTS
============================================================ */
.summary-highlights {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  max-width:1100px;
  margin:0 auto;
}
.summary-highlights section .container {
  background:#fff;
  border-radius:14px;
  border:1px solid #e1e5ea;
  padding:40px;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
}
@media(max-width:900px){
  .summary-highlights{ grid-template-columns:1fr; gap:20px; }
}

@media(max-width:768px){

  .summary-highlights .tour-summary .container ul {
    padding-left:20px;
    margin-left:0;
    width:100%;
  }
  .summary-highlights .tour-summary .container li {
    margin-bottom:14px;
    line-height:1.5;
  }

  .summary-highlights .tour-highlights .container ul {
    padding-left:28px;
    margin-left:0;
    width:100%;
  }
  .summary-highlights .tour-highlights .container li {
    margin-bottom:14px;
    line-height:1.5;
  }

  .summary-highlights .tour-highlights .two-columns-list {
    column-count:1;
  }
}

/* ============================================================
   WHY CHOOSE
============================================================ */
.why-choose {
  padding:0 0;
  overflow:hidden;
}
.why-choose h2 {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:1rem;
}
.svg-icon {
  float:none !important;
  width:32px;
  height:32px;
  flex-shrink:0;
  vertical-align:-4px;
}
.why-choose-img-left {
  float:left;
  width:350px;
  height:auto;
  border-radius:12px;
  margin:0 1.5rem 1rem 0;
  shape-outside:inset(0);
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
}
.why-choose p {
  line-height:1.6;
  margin-bottom:1rem;
}
@media(max-width:768px){
  .why-choose-img-left {
    float:none;
    display:block;
    margin:0 auto 1.5rem;
    shape-outside:none;
    width:100%;
    max-width:320px;
  }
}

/* ============================================================
   ITINERARY
============================================================ */
.itinerary .container {
  display:grid;
  gap:35px;
  margin-bottom:2em;
}
.itinerary .container h2{
  text-align:center;
  margin-bottom:-0.5em;
}
.day-block {
  background:linear-gradient(135deg,#fff,#f7fbfd);
  border:1px solid var(--mtt-border);
  border-radius:16px;
  padding:32px 24px;
  box-shadow:0 10px 25px rgba(0,0,0,0.12);
}
.day-block h3 {
  color:var(--mtt-blue);
  font-size:1.45rem;
  margin-bottom:18px;
  padding-bottom:10px;
  border-bottom:2px solid var(--mtt-turquoise);
}

/* ============================================================
   INCLUDED / NOT INCLUDED GRID
============================================================ */
.included-notincluded-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  margin:40px 0;
}
@media(min-width:768px){
  .included-notincluded-grid {
    grid-template-columns:1fr 1fr;
    gap:60px;
  }
}
.included,
.not-included {
  background:#fff;
  border:2px solid #d1d9e0;
  border-radius:16px;
  padding:35px 28px;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
}
.included h2,
.not-included h2 {
  text-align:center;
  color:var(--mtt-blue);
}

/* ============================================================
   OPTIONAL EXTENSIONS
============================================================ */
.optional-extensions .container ul {
  list-style:none;
  padding:0;
  margin-top:2em;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:15px;
}
.optional-extensions li {
  border-radius:14px;
  padding:15px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
}
.optional-extensions li:nth-child(odd){ background:#0077c8; color:#fff; }
.optional-extensions li:nth-child(even){ background:#f7e9d7; color:#333; }

/* ============================================================
   WHO IS FOR
============================================================ */
.who-is-for .container ul {
  columns:2;
  column-gap:40px;
}
@media(max-width:768px){
  .who-is-for .container ul { columns:1; }
}

/* ============================================================
   FAQ
============================================================ */
.faq-section details {
  margin-bottom:0.8em;
  border:2px solid var(--mtt-border);
  border-radius:14px;
  background:#fff;
  padding:22px;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
}
.faq-section summary {
  font-weight:700;
  padding:12px 0;
  cursor:pointer;
  color:var(--mtt-navy);
}
.faq-section summary::-webkit-details-marker{
  display:none;
}

/* ============================================================
   FINAL CTA — VERSIÓN ESTABLE
============================================================ */
.final-cta {
  box-sizing:border-box;
  text-align:center;
  max-width:900px;
  margin:0 auto;
  background:linear-gradient(135deg,#fff,#f7fbfd);
  border:1px solid var(--mtt-border);
  border-radius:16px;
  padding:40px 24px;
  box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

.final-cta h2{
  margin-top:0;
}

.final-cta .cta-buttons {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:14px;
  margin:28px 0 0;
}

.final-cta .cta-buttons a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
  box-sizing:border-box;
}

/* MOBILE FIX — columna centrada y sin desbordes */
@media(max-width:768px){
  .final-cta {
    padding:32px 18px;
    margin:0 16px;
  }

  .final-cta .cta-buttons {
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
  }

  .final-cta .cta-buttons a {
    width:100%;
    max-width:320px;
    text-align:center;
  }
}

/* ============================================================
   RELATED TOURS — FIX DEFINITIVO
============================================================ */

/* ============================================================
   RELATED TOURS — FIX DEFINITIVO PARA DESKTOP Y MÓVIL
============================================================ */

.related-flex {
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap:22px;
  width:100%;
  box-sizing:border-box;
}

/* CARD */
.related-item {
  background:#fff;
  border-radius:14px;
  padding:22px 20px;
  text-decoration:none;
  color:#22313b;
  border:1px solid #dbe7ec;
  box-shadow:0 10px 25px rgba(0,0,0,0.12);
  transition:transform .25s ease, box-shadow .25s ease;
  width:100%;
  box-sizing:border-box;
}

.related-item:hover {
  transform:translateY(-6px);
  box-shadow:0 16px 32px rgba(0,0,0,0.18);
}

.related-svg {
  width:60px;
  height:60px;
  margin-bottom:12px;
  margin:0 auto 12px;         /* centra el SVG */
  display:block;
  color:var(--mtt-blue);  
}

  .related-item h3,
  .related-item p {
    text-align:center;          /* asegura centrado total */
  }

/* MOBILE — UNA COLUMNA CENTRADA */
@media(max-width:768px){
  .related-flex {
    grid-template-columns:1fr !important;
    gap:18px;
  }

  .related-item {
    max-width:420px;
    margin:0 auto;
  }
}

/* CENTRAR CONTENIDO INTERNO EN MOVIL */
@media(max-width:768px){
  .related-item {
    text-align:center;          /* centra título y texto */
  }

  .related-item .related-svg {   
    display:block;
  }
  
}


/* ============================================================
   FOOTER
============================================================ */
.mtt-final{
  background:linear-gradient(120deg,var(--mtt-navy),var(--mtt-turquoise))!important;
  color:#fff;
}
.mtt-final h2{
  margin:0 0 18px;
  font-size:clamp(1.65rem,3vw,2.3rem);
}
footer{
  padding:30px 120px;
}
footer a{
  font-style:italic;
  color:white;
}
@media(max-width:768px){
  footer{ padding:30px 16px; }
}
.copyright {
  display:flex;
  justify-content:space-between;
  margin-top:-1.5em;
}
@media(max-width:768px){
  .copyright {
    flex-direction:column;
    gap:10px;
  }
}

/*MENOS MARGEN IZQUIERDO LOS ELEMENTOS DE LISTA*/
@media (max-width: 768px) {
  main.tour-grid ul,
  main.tour-grid li {
    padding-left: 5px !important;
    margin-left: 5px !important;
  }
}

/*CENTRAR TEXTOS DEL FOOTER*/

@media (max-width: 768px) {
  footer.mtt-final,
  footer.mtt-final .mtt-container,
  footer.mtt-final p,
  footer.mtt-final a,
  footer.mtt-final h2,
  footer.mtt-final h3 {
    text-align: center !important;
  }
}