/* ============================================================
   VARIABLES MTT
   ============================================================ */
:root {
    --mtt-orange: #F58E03;
    --mtt-blue: #0f2a40;
    --mtt-blue-soft: #1b3f5c;
    --mtt-bg-light: #f7f9fc;
    --mtt-border-soft: #e3e8ee;
    --mtt-text-dark: #1a1a1a;
    --mtt-text-soft: #4a4a4a;
    --mtt-radius-card: 14px;
	--mtt-white: #ffffff;
    --mtt-border: #d9e1e6;
	--mtt-primary: #F58E03;
	--mtt-ink: #24323d;
	--mtt-navy: #12395b;
	--mtt-shadow: 0 10px 30px rgba(18, 57, 91, .10);
}

/* padding base por sección */
.tour-intro,
.summary-duo-section,
.tour-highlights,
.tour-itinerary,
.ideal-for,
.why-mtt,
.included-section,
.optional-addons,
.faq-section,
.related-tours,
.final-cta {
    padding: 30px 0;
}

/* ============================================================
   BASE
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--mtt-text-soft);
    background: #ffffff;
    line-height: 1.6;
    margin: 0;
}

h1, h2, h3, h4 {
    color: var(--mtt-blue);
    margin: 0 0 0.5em;
}

a {
    color: var(--mtt-orange);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    width: min(1120px, 100% - 40px);
    margin: 0 auto;
}

@media (max-width: 500px) {
    .container {
        width: min(1120px, 100% - 24px); /* deja 12px por lado */
    }
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
/* Breadcrumb base */
.breadcrumb {
    padding: 16px 0;
    font-size: 0.9rem;
    color: var(--mtt-text-soft);
}

@media (min-width: 769px) {
    .breadcrumb {
        padding-left: 20px; /* margen izquierdo suave */
    }
}

/* Breadcrumb móvil mejorado */
@media (max-width: 768px) {

    .breadcrumb {
        text-align: center;
        font-size: 0.92rem;
        padding: 10px 0 12px;   /* antes 20px / 24px → mucho más compacto */
        line-height: 1.35;      /* reduce altura del bloque */
    }

    .breadcrumb a,
    .breadcrumb span {
        margin: 0 2px;          /* enlaces más juntos */
    }
}

/* ============================================================
   HERO — SISTEMA GENERAL CON VARIABLE CSS
   ============================================================ */

.tour-hero {
    position: relative;
    padding: 120px 0 80px;
    color: #fff;
    overflow: hidden;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tour-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    pointer-events: none;
}
/* cambio de idioma */
/* Tamaño general (móvil) */
.lang-switch {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 50;
}

.lang-switch a {
  display: inline-block;
  background: rgba(0,0,0,0.55);
  padding: 6px;
  border-radius: 6px;
  transition: background 0.25s ease, transform 0.25s ease;
}

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

.lang-switch img {
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 4px;
}

/* Vista desktop: bandera más grande */
@media (min-width: 992px) {
  .lang-switch img {
    width: 32px;
    height: 32px;
  }

  .lang-switch a {
    padding: 8px;
    border-radius: 8px;
  }
}


/* HERO MOBILE */
@media (max-width: 768px) {
    .tour-hero {
        padding: 40px 0 44px;
        text-align: center;
        background-position: center 20%;
    }
	
/* HERO EXTRA-SMALL (≤500px) — aún más compacto */
@media (max-width: 500px) {
    .tour-hero {
        padding: 48px 0 44px;   /* antes 80px → mucho más compacto */
    }
}

    .hero-grid {
        justify-items: center;
        gap: 32px;
    }

    .hero-title .eyebrow {
        font-size: 0.78rem;
        letter-spacing: 0.09em;
        opacity: 0.9;
        margin-bottom: 6px;
    }

    .hero-title h1 {
        font-size: 1.95rem;
        line-height: 1.22;
        margin-bottom: 10px;
        padding: 0 12px;
    }

    .hero-title .lead {
        font-size: 1.02rem;
        max-width: 92%;
        margin: 0 auto;
        line-height: 1.55;
        opacity: 0.95;
    }

    .hero-cta {
        justify-content: center;
        gap: 14px;
        margin-top: 4px;
    }

    .btn {
        padding: 10px 24px;
        font-size: 0.95rem;
        border-radius: 999px;
    }

    .btn-primary {
        background: var(--mtt-orange);
        box-shadow: 0 4px 14px rgba(245, 142, 3, 0.35);
    }

    .btn-secondary {
        background: rgba(255,255,255,0.18);
        backdrop-filter: blur(4px);
        border-color: rgba(255,255,255,0.35);
    }
}

/* HERO GRID */
.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-areas:
        "title"
        "cta";
    gap: 24px;
}

.hero-title {
    grid-area: title;
    max-width: 720px;
}

.hero-title .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    margin-bottom: 8px;
    color: #f0f4ff;
}

.hero-title h1 {
    font-size: 2.4rem;
    margin-bottom: 12px;
    color: #fff;
}

.hero-title .lead {
    font-size: 1.05rem;
    max-width: 640px;
}

.hero-cta {
    grid-area: cta;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

/* Botones hero */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid #fff; /* borde blanco */
    cursor: pointer;
    transition: all 0.25s ease;
}

/* BOTÓN PRINCIPAL (NARANJA) */
.btn-primary {
    background: var(--mtt-orange);
    color: #fff;
    box-shadow: 0 6px 18px rgba(245, 142, 3, 0.45); /* sombra premium */
}

/* BOTÓN SECUNDARIO (WHATSAPP VERDE) */
.btn-secondary {
    background: #25D366; /* verde WhatsApp */
    color: #fff;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45); /* sombra premium */
}

/* HOVER */
.btn-primary:hover {
    background: #d97702;
    box-shadow: 0 8px 22px rgba(245, 142, 3, 0.55);
}

.btn-secondary:hover {
    background: #1ebe5d;
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.55);
}



/* ============================================================
   SEPARADORES
   ============================================================ */

.mtt-divider {
    height: 4px;
    background: var(--mtt-orange);
    border-radius: 4px;
    margin: 40px auto;
    box-shadow: 0 2px 6px rgba(245,142,3,0.35);
}

.mtt-divider-maya {
    display: block;
    width: 100%;
    max-width: 1120px;
    height: 12px;
    background-image: repeating-linear-gradient(
        90deg,
        var(--mtt-orange),
        var(--mtt-orange) 10px,
        transparent 10px,
        transparent 20px
    );
    background-repeat: repeat;
    margin: 40px auto;
    border-radius: 4px;
}

.mtt-divider-svg {
    width: 100%;
    max-width: 1120px;
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.mtt-divider-svg::before,
.mtt-divider-svg::after {
    content: "";
    height: 4px;
    background: var(--mtt-orange);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(245,142,3,0.35);
    flex: 1;
}

.divider-icon {
    width: 32px;
    height: 32px;
    color: var(--mtt-orange);
    margin: 0 16px;
    flex-shrink: 0;
    display: inline-block;
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

/* ============================================================
   INTRO
   ============================================================ */
.tour-intro {
    padding: 30px 0;
    background: #ffffff;
}

.intro-grid {
    display: grid;
    grid-template-areas:
        "title"
        "content";
    gap: 10px;
}

.intro-title {
    grid-area: title;
}

.intro-title h2 {
    font-size: 1.8rem;
}

.intro-content {
    grid-area: content;
}

/* ============================================================
   SUMMARY + WHY VISIT
   ============================================================ */
.summary-duo-section {
    padding: 40px 0;
    background: #ffffff;
}

/* DESKTOP: 2 columnas */
.summary-duo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.summary-left { grid-column: 1; }
.summary-right { grid-column: 2; }

/* MOBILE: 1 columna */
@media (max-width: 768px) {
    .summary-duo-grid {
        grid-template-columns: 1fr;
        gap: 32px; /* mejora separación */
    }

    .summary-left,
    .summary-right {
        grid-column: auto; /* evita conflictos */
    }

    .summary-duo-section {
        padding: 28px 0 36px; /* mejor respiración */
    }
}

/* SUMMARY */
.tour-summary .summary-title h2 {
    font-size: 1.8rem;
}

.tour-summary .summary-content ul {
    list-style: disc;
    padding-left: 0;
    margin: 0;
}

.tour-summary .summary-content li {
    margin-bottom: 8px;
    color: var(--mtt-text-soft);
}

/* FIX: Mayor margen izquierdo en Tour Summary (solo móvil) */
@media (max-width: 768px) {
  .tour-summary .summary-content ul {
    padding-left: 22px !important;   /* margen elegante */
  }

  .tour-summary .summary-content li {
    margin-left: 4px;                /* leve sangría adicional */
  }
}


/* WHY VISIT — DESKTOP */
.summary-right .why-visit {
    border-left: 4px solid var(--mtt-orange);
    padding-left: 22px;
}

/* WHY VISIT — MOBILE */
@media (max-width: 768px) {
    .summary-right .why-visit {
        border-left: none;
        border-top: 3px solid var(--mtt-orange);
        padding-left: 0;
        padding-top: 18px;
        margin-top: 8px; /* evita que quede pegado al summary */
    }
}

/* WHY TITLE */
.why-title h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

/* WHY LIST */
.why-list {
    list-style: disc;
    padding-left: 22px;
    line-height: 1.65;
    color: var(--mtt-blue);
}

.why-list li {
    margin-bottom: 12px;
}


/* ============================================================
   TOUR HIGHLIGHTS
   ============================================================ */
.highlights-section {
  padding: 20px 0;
}

.highlights-title {
  text-align: center;
  font-size: 2rem;
  color: var(--mtt-navy);
  margin-bottom: 20px;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.ghost-card {
    visibility: hidden;
}

/*.highlight-card {
  background: var(--mtt-white);
  border: 1px solid var(--mtt-border);
  border-radius: 12px;
  box-shadow: var(--mtt-shadow);
  overflow: hidden;
  padding-bottom: 20px;
}*/

.highlight-card {
  border-top: 4px solid var(--mtt-orange);
  box-shadow: var(--mtt-shadow);
  padding-bottom: 1em;
}


.highlight-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.highlight-title {
  font-size: 1.2rem;
  margin: 16px 20px 10px;
  color: var(--mtt-blue);
}

.highlight-card p {
  margin: 0 20px;
  color: var(--mtt-text-soft);
  line-height: 1.6;
}


/* ============================================================
   ITINERARY VERTICAL
   ============================================================ */
.itinerary-vertical-cards {
    padding: 40px 0;
    background: #ffffff;
}

.itinerary-vheader {
    font-size: 2rem;
    color: var(--mtt-blue);
    font-weight: 700;
    margin-bottom: 32px;
    text-align: center;
}

.itinerary-vcard {
    background: #ffffff;
    border: 2px solid #d1d9e0;
    border-radius: var(--mtt-radius-card);
    padding: 24px 28px;
    margin-bottom: 28px;
    box-shadow:
        0 6px 18px rgba(0,0,0,0.12),
        0 3px 8px rgba(0,0,0,0.08);
}

.itinerary-vtitle {
    font-size: 1.4rem;
    color: var(--mtt-blue);
    margin-bottom: 12px;
}

.itinerary-vcard p {
    font-size: 1rem;
    color: var(--mtt-text-soft);
    line-height: 1.6;
    margin-bottom: 12px;
}

.itinerary-vcard ul {
    list-style: disc;
    padding-left: 22px;
    margin-bottom: 12px;
}

@media(max-width: 900px){
    .itinerary-vcard {
        padding: 20px;
    }
}

/* ============================================================
   WHO + WHY — PREMIUM CARDS
   ============================================================ */
.who-why-section {
    padding: 40px 0;
    background: #ffffff;
}

.who-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.premium-card {
    background: #ffffff;
    border: 2px solid #d1d9e0;
    border-radius: var(--mtt-radius-card);
    padding: 24px;
    box-shadow:
        0 6px 18px rgba(0,0,0,0.12),
        0 3px 8px rgba(0,0,0,0.08);
}

.card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.6rem;
    margin-bottom: 14px;
    color: var(--mtt-blue);
}

.card-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-block;
    object-fit: contain;
    aspect-ratio: 1 / 1;
    color: var(--mtt-orange);
}

.card-list {
    list-style: disc;
    padding-left: 22px;
    margin: 0;
}

.card-list li {
    margin-bottom: 8px;
    font-size: 1rem;
    color: var(--mtt-blue);
    line-height: 1.6;
}

@media(max-width: 900px){
    .who-why-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   INCLUDED / NOT INCLUDED / OPTIONAL ADD-ONS — 3 PREMIUM CARDS
   ============================================================ */
.included-section {
    padding: 40px 0;
    background: #ffffff;
}

.included-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start;
    justify-items: center;
}

.included-box,
.optional-box {
    background: #ffffff;
    border: 2px solid #d1d9e0;
    border-radius: var(--mtt-radius-card);
    padding: 24px 28px;
    width: 100%;
    max-width: 420px;
    box-shadow:
        0 6px 18px rgba(0,0,0,0.12),
        0 3px 8px rgba(0,0,0,0.08);
}

.included-box h3,
.optional-box h3 {
    margin-bottom: 16px;
    font-size: 1.4rem;
    color: var(--mtt-blue);
    font-weight: 600;
    text-align: center;
}

.included-list,
.notincluded-list,
.optional-list {
    list-style: disc;
    padding-left: 22px;
    margin: 0;
}

.included-list li,
.notincluded-list li,
.optional-list li {
    margin-bottom: 12px;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--mtt-blue);
}

@media(max-width: 900px){
    .included-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   OPTIONAL ADD-ONS (sección independiente)
   ============================================================ */
.optional-addons {
    padding: 60px 0;
    background: var(--mtt-bg-light);
}

.addons-grid {
    display: grid;
    grid-template-areas:
        "title"
        "content";
    gap: 20px;
}

.addons-title {
    grid-area: title;
}

.addons-content {
    grid-area: content;
}

.addons-content ul {
    list-style: disc;
    padding-left: 22px;
}

/* FAQ container */
.faq-section h2{
    text-align: center;
    font-size: 2em;
    color: var(--mtt-navy);
}

/* Contenedor como bloque normal */
.faq-section {
    margin-top: 0;
    display: block;      /* ← quitamos grid */
}

/* FAQ item (tarjeta estilo details) */
.faq-item {
    background: var(--mtt-white);
    border: 1px solid var(--mtt-border);
    border-radius: 9px;
    box-shadow: var(--mtt-shadow);
    padding: 0;          /* el padding va en summary */
    overflow: hidden;
    margin-bottom: 14px; /* ← separación clara entre tarjetas */
}

/* FAQ question (similar a summary) */
.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 18px 52px 18px 20px;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: 14px;
    font-size: clamp(0.95rem, 3vw, 1.05rem);
    text-align: left;
    color: var(--mtt-navy);
    position: relative;
}

/* FAQ text */
.faq-text {
    flex: 1;
    text-align: left;  
}

/* FAQ icon */
.faq-icon {
    flex-shrink: 0;
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--mtt-primary);
    transition: transform .3s ease;
    padding: 0 10px;
}

/* FAQ answer */
.faq-answer {
    padding: 0 20px 20px;
    line-height: 1.65;
    color: var(--mtt-ink);
    display: none;
    margin-top: 0;
}

/* Cuando está abierto */
.faq-item.open .faq-answer {
    display: block;
    margin-bottom: 0; /* ya no empuja hacia la siguiente tarjeta */
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
}

@media (max-width: 768px) {
    .faq-question {
        padding-right: 64px; /* espacio extra para el icono */
    }

    .faq-icon {
        position: absolute;
        right: 20px; /* alineado al borde derecho */
    }
}

/* ============================================================
   RELATED TOURS
   ============================================================ */
.related-tours {
    padding: 40px 0;
    background: var(--mtt-bg-light);
}

.related-grid {
    display: grid;
    grid-template-areas:
        "title"
        "cards";
    gap: 24px;
}

.related-title {
    grid-area: title;
}

.related-cards {
    grid-area: cards;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.related-card {
    background: #ffffff;
    border: 1px solid var(--mtt-border-soft);
    border-radius: 10px;
    padding: 18px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
    .related-title h2 {
        text-align: center;
        margin-top: 0;
        margin-bottom: 14px;
    }

    .related-tours {
        padding: 24px 0; /* más compacto en móvil */
    }
}


/* ============================================================
   CTA FINAL
   ============================================================ */
.final-cta {
    padding: 40px 0;
    background: #ffffff;
}

.cta-card {
    background: #ffffff;
    border: 2px solid #d1d9e0;
    border-radius: var(--mtt-radius-card);
    padding: 36px;
    margin-top: 10px;
    box-shadow:
        0 6px 18px rgba(0,0,0,0.12),
        0 3px 8px rgba(0,0,0,0.08);
}

.cta-grid {
    display: grid;
    grid-template-areas:
        "title"
        "content";
    gap: 28px;
}

.cta-title {
    grid-area: title;
}

.cta-title h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.8rem;
    color: var(--mtt-blue);
}

.cta-title-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-block;
    object-fit: contain;
    aspect-ratio: 1 / 1;
    color: var(--mtt-orange);
}

.cta-content {
    grid-area: content;
}

.cta-button-wrapper {
    text-align: center;
    margin-top: 32px;
}

.cta-main-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--mtt-orange);
    color: #fff;
    padding: 16px 36px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.15rem;
    transition: background .25s ease, transform .2s ease, box-shadow .2s ease;
}

.cta-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-block;
    object-fit: contain;
    aspect-ratio: 1 / 1;
}

.cta-main-button:hover {
    background: #d97702;
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}


.final-cta a,
.final-cta p a {
    color: #1a1a1a !important; /* gris oscuro premium */
    font-weight: 800;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}


.final-cta a:hover {
    color: #F58E03 !important;
    text-decoration-color: #F58E03;
}

@media (max-width: 500px) {
  .cta-card {
    padding: 20px 18px;   /* antes 36px → mucho más compacto */
  }
}

@media (max-width: 500px) {
  .cta-content p {
    max-width: 100%;
    overflow-wrap: break-word;   /* evita desbordes */
    word-break: break-word;      /* fuerza ajuste */
  }
}


@media (max-width: 500px) {
  .cta-content {
    max-width: 100%;
    margin: 0 auto;
  }
}


@media (max-width: 378px) {
  .cta-main-button {
    padding: 12px 20px;
    font-size: 0.95rem;
    border-radius: 6px;
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
  }
}



@media (max-width: 768px) {
	.cta-grid{
		gap: 0px
	}
}


/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: var(--mtt-blue);
    color: #fff;
    padding: 40px 0 24px;
    margin-top: 40px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 20px;
}

.footer-col h3 {
    margin-bottom: 8px;
    color: #F58E03;
}

.footer-col a {
    color: var(--mtt-orange);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 10px;
}

.footer-bottom span a{
	font-size: 1.25em;
	font-weight: 700;
}

@media (max-width: 768px) {

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 18px; /* antes 32px → separación más compacta */
        justify-items: center;
    }

    .footer-col {
        text-align: center;
        margin: 0; /* elimina cualquier margen heredado */
        padding: 0; /* asegura compacidad */
    }

    .footer-col h3 {
        margin-bottom: 6px; /* reduce espacio entre título y contenido */
    }

    .footer-col p {
        margin: 0; /* elimina saltos innecesarios */
        line-height: 1.45; /* más compacto pero legible */
    }

    .footer-bottom {
        margin-top: 20px; /* antes 24px → más compacto */
        gap: 4px;         /* reduce separación entre elementos */
    }
}

@media (max-width: 500px) {

  section {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .container {
    width: min(1120px, 100% - 24px); /* 12px por lado */
  }
	
	.highlights-section{
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.highlight-title{
		margin-bottom: 5px;
	}
	
	.tour-summary{padding-top: 0}
	
  .intro-grid,
  .summary-duo-grid 
  {
    gap: 0;
  }
	
  .itinerary-vcard {
    padding: 16px 18px;
  }
	
   .final-cta {
    padding: 40px 0;
  }

  .cta-card {
    padding: 24px;
  }
	
  .faq-item {
    margin-bottom: 16px;
  }

  .faq-question {
    padding: 14px 16px;
  }

  .faq-answer {
    padding: 0 16px 16px;
  }
	
  .ghost-card {
    display: none;
  } 
  
}

/* ============================================
   FIX: Divisores en vista móvil
   ============================================ */
@media (max-width: 500px) {

  /* Reduce márgenes */
  .mtt-divider-maya,
  .mtt-divider-svg {
    margin: 16px auto !important;
  }

  /* Ajusta altura del divisor maya */
  .mtt-divider-maya {
    height: 8px !important;
    background-size: 14px 8px !important; /* patrón más compacto */
  }

  /* Ajusta el divisor SVG */
  .mtt-divider-svg {
    max-width: 100% !important;
    padding: 0 12px; /* evita que toque los bordes */
  }

  /* Barras laterales del divisor SVG */
  .mtt-divider-svg::before,
  .mtt-divider-svg::after {
    height: 3px !important;
    margin: 0 6px !important;
  }

  /* Ícono central */
  .divider-icon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 10px !important;
  }
}


/* ============================================
   FIX UNIVERSAL: Justificar textos en móvil
   excepto los <li> (que quedan alineados a la izquierda)
   ============================================ */
@media (max-width: 500px) {

  /* Justificar TODOS los textos largos excepto listas */
  p,
  .faq-answer p,
  .intro-content p,
  .summary-content p,
  .highlight-card p,
  .itinerary-vcard p,
  .premium-card p,
  .cta-content p,
  .related-card p {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    text-align-last: left;
  }

  /* Listas alineadas a la izquierda */
  li,
  .summary-content li,
  .why-list li,
  .itinerary-vcard li,
  .premium-card li,
  .included-list li,
  .notincluded-list li,
  .optional-list li {
    text-align: left !important;
    hyphens: auto;
  }

  /* Contenedores más estrechos para evitar líneas largas */
  .intro-content,
  .itinerary-vcard,
  .faq-answer,
  .cta-content,
  .premium-card,
  .highlight-card,
  .related-card {
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
}



/* ============================================
   FIX: FAQ — evitar que el texto se monte sobre el icono
   ============================================ */
@media (max-width: 768px) {

  .faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    /* Elimina el position absolute conflictivo */
    position: relative;
    padding: 16px 20px;
  }

  .faq-text {
    flex: 1;
    min-width: 0; /* permite que el texto haga wrap correctamente */
    line-height: 1.45;
  }

  .faq-icon {
    position: static !important; /* deja de flotar encima del texto */
    flex-shrink: 0;
    font-size: 1.6rem;
    margin-left: 12px;
  }
}