@charset "utf-8";

: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}
*{box-sizing:border-box}html{scroll-behavior:smooth}

body{margin:0;color:var(--mtt-ink);font-family:Arial,Helvetica,sans-serif;line-height:1.65;background:#fff}
.mtt-page a{color:var(--mtt-blue)}
.mtt-container{width:min(1160px,calc(100% - 36px));margin:auto}

/* BREADCRUMB — estilo idéntico al Yucatán Hub */
.mtt-breadcrumb {
  padding: 4px 0;              
  font-size: 0.78rem;          
  line-height: 1.10;          
  color: #536773;              
}

.mtt-breadcrumb a:hover {
  text-decoration: underline;
}

/* Contenedor del breadcrumb */
.mtt-container nav.mtt-breadcrumb {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.mtt-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;

    width:100%;

    padding:0 16px;

    margin-bottom:8px;
	
	transform:translateY(-85px);
}

.mtt-logo img{
    height:54px;
    width:auto;
    display:block;

    background:rgba(0,0,0,.45);
    padding:6px 12px;

    border-radius:10px;
    border:1px solid rgba(216,167,60,.45);

    box-shadow:
        0 6px 16px rgba(0,0,0,.25),
        0 3px 8px rgba(0,0,0,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
	
}

@media(min-width:992px){

    .mtt-logo img{
        height:72px;
    }

    .lang-switch img{
        width:26px;
        height:26px;
    }

}

.mtt-logo img:hover{
    transform:translateY(-6px);

    box-shadow:
        0 10px 24px rgba(0,0,0,.35),
        0 4px 12px rgba(0,0,0,.22);
}

.lang-switch a{
    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.55);

    padding:8px;

    border-radius:8px;

    transition:
        background .25s ease,
        transform .25s ease;
}

.lang-switch a:hover{
    background:rgba(0,0,0,.75);
    transform:translateY(-2px);
}

/* ==========================================================
   MOBILE TOPBAR
========================================================== */

@media(max-width:768px){

    .mtt-topbar{
        padding:0 12px;
        margin-bottom:30px;
		transform:translateY(-45px);
    }

    .mtt-logo img{
        height:48px;
    }

    .lang-switch img{
        width:22px;
        height:22px;
    }

}
/* Ajuste del espacio superior del hero para que quede pegado */
.mtt-hero {
  padding-top: 42px;           /* igual al hub */
  padding-bottom: 54px;        /* mantiene tu estilo */
}

.mtt-hero {
  /*background-image: url('../images/hero-playa-del-carmen.jpg');*/ /* ← aquí pones tu imagen */
  /*background-image: url('../images/playadelcarmen-tours.webp');*/
  background-image: url('../images/mexican-caribbean-tours-mexicotoptravel.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #16242c; /* fallback */  
  position: relative;
}

.mtt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.20); /* oscurecimiento suave */
  z-index: 1;
}

.mtt-hero > * {
  position: relative;
  z-index: 2;
}

/* Ajuste opcional para que el breadcrumb se vea más fino */
.mtt-breadcrumb a {
  color: var(--mtt-blue);
  text-decoration: none;
}

.mtt-breadcrumb a:hover {
  text-decoration: underline;
}

/*.mtt-hero{padding:74px 0;background:linear-gradient(120deg,rgba(12,51,80,.96),rgba(15,163,166,.84));color:#fff}*/
.mtt-hero{padding:95px 0;}

.mtt-hero h1{
    max-width:950px;
    margin:50px auto 20px; /* auto centra el bloque */
    font-size:clamp(1.9rem, 4vw, 3.6rem)!important;
    line-height:1.1;
    color:#fff !important;
    text-align:center;
	transform: translateY(-110px)
	/* centra el texto dentro del bloque */
}

.mtt-hero .mtt-container h2{
    max-width:870px;
    margin:20px auto; /* centra el bloque */
    font-size:clamp(1rem,1.8vw,1.6rem)!important;
    font-weight:500;
    color:#fff !important;
    text-align:center; /* centra el texto */
	transform: translateY(-100px)
}


.mtt-hero h1,
.mtt-hero h2 {
  text-shadow:
    0 4px 12px rgba(0,0,0,0.55),
    0 8px 28px rgba(0,0,0,0.45),
    0 0 18px rgba(0,0,0,0.35);
}

.mtt-hero p{max-width:900px;font-size:1.08rem}

.mtt-actions{
	display:flex;
	gap:12px;
	flex-wrap:wrap;
	margin:20px 0 4px;
	justify-content:center !important; /* centra el grupo */
}

@media (max-width: 768px){
    .mtt-hero{
       background-image: url('../images/mexican-caribbean-tours-mexicotoptravel-movil.jpg'); 
    }
    
    .mtt-hero h1{
        transform: translateY(-95px) !important; 		
    }
    
    .mtt-hero h2{
        transform: translateY(-110px) !important; 
    }
      
}

/* Desktop: bajar botones sin aumentar el hero */
@media (min-width: 768px){
    .mtt-hero .mtt-actions{
        transform: translateY(70px) !important;
    }  
}

/* Animación base para todos los botones */
.mtt-btn {
  margin-top: 1rem;
  display: inline-block;
  padding: 12px 19px;
  border-radius: 6px;
  text-decoration: none !important;
  font-weight: 700;
  transition: all 0.28s ease; /* ← Animación suave */
  cursor: pointer;
}

/* Hover general */
.mtt-btn:hover {
  transform: translateY(-3px); /* Elevación */
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); /* Glow suave */
}

/* PRIMARY (oro) */
.mtt-btn-primary {
  background: var(--mtt-gold);
  color: #16242c !important;
}

.mtt-btn-primary:hover {
  background: #e6b200; /* tono más intenso del oro */
  box-shadow: 0 8px 22px rgba(230, 178, 0, 0.35);
}

/* SECONDARY (borde blanco) */
.mtt-btn-secondary {
  border: 2px solid #fff;
  color: #fff !important;
  background: transparent;
}

.mtt-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 22px rgba(255, 255, 255, 0.25);
}

/* BLUE */
.mtt-btn-blue {
  background: var(--mtt-blue);
  color: #fff !important;  
}

@media (min-width: 992px) {
  .mtt-actions {
    justify-content: space-between;
  }
  .mtt-actions .mtt-btn-blue {
    margin-left: auto;
  }
}

.mtt-btn-blue:hover {
  background: #0d3a5a; /* azul más profundo */
  box-shadow: 0 8px 22px rgba(13, 58, 90, 0.35);
}

.mtt-content>section{padding:30px 0}
.mtt-content>section:nth-child(even){background:var(--mtt-soft)}
.mtt-page h2{margin:0 0 18px;color:var(--mtt-navy);font-size:clamp(1.65rem,3vw,2.3rem);line-height:1.2}
.mtt-page h3{color:var(--mtt-blue);line-height:1.3;margin:28px 0 8px}
/*.mtt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:26px}*/
.mtt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Tablet */
@media (max-width: 900px) {
  .mtt-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .mtt-grid {
    grid-template-columns: 1fr;
  }
	
	.mtt-page h2{text-align: center}
}

.mtt-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ghost-card {
  visibility: hidden;
}

/*animacion para cuando va a otra sección*/
.mtt-card:target .bloque{
  animation: highlight 3s ease-out;
}

@keyframes highlight {
  0%   { background-color: #0fa3a6; }
  100% { background-color: transparent; }
}


.mtt-card{padding:23px;border:1px solid var(--mtt-border);border-radius:10px;background:#fff;box-shadow:0 3px 14px rgba(18,59,93,.06)}
.mtt-card h3{margin-top:0}
.mtt-card p:last-child{margin-bottom:0}
.mtt-card-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin-bottom: 1rem;
}

.float-img {
  float: left;
  width: 260px;
  height: auto;
  margin: 0 1.5rem 1rem 0;
  border-radius: 8px;
}

/* Vista móvil */
@media (max-width: 768px) {
  .float-img {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 1.5rem 0;
  }
}


.mtt-tours{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.mtt-tours .mtt-card{border-top:4px solid var(--mtt-turquoise)}
.mtt-callout{padding:26px;border-left:5px solid var(--mtt-gold);background:#fff;border-radius:8px}
.mtt-faq details{margin:0 0 12px;border:1px solid var(--mtt-border);border-radius:8px;background:#fff;padding:0 18px}
.mtt-faq summary{cursor:pointer;font-weight:700;color:var(--mtt-navy);padding:16px 0}
.mtt-faq details p{padding:0 0 16px;margin:0}
.mtt-final{
	background:linear-gradient(120deg,var(--mtt-navy),var(--mtt-turquoise))!important;color:#fff
}
.mtt-final h2,.mtt-final h3{
	color:#fff
}
.mtt-contact{
	margin-top:28px;
	padding-top:20px;
	border-top:1px solid rgba(255,255,255,.35)
}

.mtt-card{
    text-align:center;
}

.mtt-card svg{
    display:block;
    width:100px;
    height:100px;
    margin:0 auto 15px;
}

.mtt-card p,
.mtt-card .mtt-actions{
    text-align:left;
}

ul{
	padding-left:23px
}
.mtt-note{
	font-size:.91rem;
	color:#5a6d78
}

footer{
	padding: 55px;
}

footer h2{
    margin: 0 0 18px;
    color: var(--mtt-navy);
    font-size: clamp(1.65rem,3vw,2.3rem);
    line-height: 1.2;
}

footer h3{
	margin-bottom: 0em;
}

footer a{
	 font-style: italic;
	 color: white; 
}

.copyright {
    display: flex;
	flex-direction: row !important;
    justify-content: space-between;    
}
/* Vista móvil */
@media (max-width: 768px) {
    .copyright {
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
		gap: 20px;
    }

   .copyright p {
        width: 100% !important;
        display: block !important;
    }
}

@media(max-width:760px)
{
footer {padding:42px 0}
}

.mtt-skip{position:absolute;left:-9999px}
.mtt-skip:focus{left:10px;top:10px;background:#fff;padding:10px;z-index:10}
@media(max-width:760px){.mtt-grid,.mtt-tours{grid-template-columns:1fr}.mtt-hero{padding:54px 0}.mtt-content>section{padding:42px 0}}
@media (max-width: 600px) {  
  .mtt-hero h1,
  .mtt-hero h2,
  .mtt-hero p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
	}
	.mtt-actions{
		  display: flex;
    	  justify-content: center;
	  }
  
}
@media (max-width: 600px) {  

  /* Centrar contenedor */
  .mtt-hero .mtt-container {
    text-align: center;
  }

  /* Centrar botones */
  .mtt-hero .mtt-btn {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
  }

  /* Centrar acciones */
  .mtt-actions {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 600px) {

  /* CARDS */
  .mtt-card p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    text-align-last: left;
	line-height: 1.45;
    font-size: 1rem;
  }

  /* SECCIONES */
  .mtt-content p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    text-align-last: left;
	line-height: 1.48;
    font-size: 1.02rem
  }

  /* FAQ */
  .mtt-faq details p,
  .faq-answer {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    text-align-last: left;
	line-height: 1.5;
    font-size: 1rem;
  }
	
/* Espaciado premium entre párrafos */
  .mtt-content p + p,
  .mtt-card p + p,
  .mtt-faq details p + p {
    margin-top: 0.75rem;
  }

  /* Margen lateral suave para lectura */
  .mtt-content p,
  .mtt-card p,
  .mtt-faq details p {
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
  }
}

/*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;
  }
}