/* =====================================================
   TAILOR JOURNEY
   TIPOGRAFÍA GENERAL DE TODOS LOS ITINERARIOS

   JAPÓN · MÉXICO · TAILANDIA · CAMBOYA

   DISEÑO EDITORIAL
   VERSIÓN NOVIEMBRE 2026
   ===================================================== */


/* =====================================================
   1. CONFIGURACIÓN GENERAL
   ===================================================== */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-size: 21px !important;
    line-height: 1.8 !important;
}


/* =====================================================
   2. PÁRRAFOS Y TEXTOS GENERALES
   ===================================================== */

body p,
body li {
    font-size: 21px !important;
    line-height: 1.85 !important;
}


/* =====================================================
   3. TÍTULOS PRINCIPALES
   ===================================================== */

body h1 {
    font-size: clamp(48px, 5.5vw, 76px) !important;
    line-height: 1.15 !important;
}

body h2 {
    font-size: clamp(38px, 4vw, 54px) !important;
    line-height: 1.2 !important;
}

body h3 {
    font-size: clamp(30px, 3vw, 39px) !important;
    line-height: 1.25 !important;
}

body h4 {
    font-size: 26px !important;
    line-height: 1.35 !important;
}


/* =====================================================
   4. INTRODUCCIÓN DE CADA DESTINO
   ===================================================== */

.hero-description,
.introduction-text p,
.section-intro,
.intro-text p,
.intro-content p,
.destination-intro p,
.destino-intro p,
.destination-content p,
.route-intro p,
.route-description,
.intro-description {
    font-size: 22px !important;
    line-height: 1.85 !important;
}


/* =====================================================
   5. ITINERARIOS DÍA POR DÍA
   ===================================================== */

.day-content p,
.day-copy p,
.day-text p,
.day-card p,
.day-description,
.itinerary-day p,
.itinerary-content p,
.mexico-day-text p,
.mexico-day-content p {
    font-size: 21px !important;
    line-height: 1.85 !important;
}


/* =====================================================
   6. TÍTULOS DE CADA DÍA
   ===================================================== */

.day-content h3,
.day-copy h3,
.day-text h3,
.day-card h3,
.itinerary-day h3,
.mexico-day-text h3 {
    font-size: clamp(32px, 3vw, 40px) !important;
    line-height: 1.25 !important;
}


/* =====================================================
   7. NUMERACIÓN DE LOS DÍAS
   ===================================================== */

.day-number,
.day-label,
.mexico-day-number small {
    font-size: 15px !important;
    letter-spacing: 0.12em;
}

.mexico-day-number strong {
    font-size: 44px !important;
}


/* =====================================================
   8. SECCIÓN DE HOTELES
   ===================================================== */

.hotel p,
.hotel-info p,
.hotel-card p,
.hotel-description,
.hotels-list p,
.hotel-text p {
    font-size: 20px !important;
    line-height: 1.8 !important;
}

.hotel h3,
.hotel-info h3,
.hotel-card h3,
.hotel-text h3 {
    font-size: 34px !important;
    line-height: 1.3 !important;
}

.hotel a,
.hotel-info a,
.hotel-card a {
    font-size: 18px !important;
}


/* =====================================================
   9. SECCIÓN DE EXPERIENCIAS
   ===================================================== */

.experience p,
.experience-info p,
.experience-card p,
.experience-description,
.experience-text p {
    font-size: 20px !important;
    line-height: 1.8 !important;
}

.experience h3,
.experience-info h3,
.experience-card h3,
.experience-text h3 {
    font-size: 32px !important;
    line-height: 1.3 !important;
}


/* =====================================================
   10. INFORMACIÓN DE LA RUTA
   ===================================================== */

.route-city p,
.summary-item strong,
.hero-meta p,
.route-line,
.duration,
.route-details p,
.route-info p {
    font-size: 19px !important;
    line-height: 1.75 !important;
}


/* =====================================================
   11. ETIQUETAS Y SUBTÍTULOS PEQUEÑOS
   ===================================================== */

.eyebrow,
.day-label,
.section-label,
.intro-label,
.destination-label,
.mexico-kicker,
.mexico-day-number small,
.summary-item span,
.route-label,
.section-kicker {
    font-size: 15px !important;
    letter-spacing: 0.12em;
    line-height: 1.6 !important;
}


/* =====================================================
   12. MENÚ DE NAVEGACIÓN
   ===================================================== */

.top-links a,
.route-nav nav a,
nav a {
    font-size: 18px !important;
    line-height: 1.5 !important;
}


/* =====================================================
   13. BOTONES Y ENLACES
   ===================================================== */

.map-link,
.hotel a,
.cta-button,
.back,
.route-cta a,
.itinerary-link,
.button,
.btn {
    font-size: 17px !important;
    line-height: 1.5 !important;
}


/* =====================================================
   14. SELECTOR DE IDIOMAS
   ===================================================== */

.language-switcher button,
.tj-language button,
.languages button {
    font-size: 16px !important;
}


/* =====================================================
   15. NOTAS Y RECOMENDACIONES
   ===================================================== */

.map-note,
.hotel-note,
.route-note,
.important-note,
.travel-note {
    font-size: 18px !important;
    line-height: 1.8 !important;
}


/* =====================================================
   16. MAPAS Y UBICACIONES
   ===================================================== */

.map-section p,
.map-description,
.map-info p {
    font-size: 20px !important;
    line-height: 1.8 !important;
}


/* =====================================================
   17. CIERRE DEL ITINERARIO
   ===================================================== */

.route-cta p,
.final-cta p,
.itinerary-cta p {
    font-size: 21px !important;
    line-height: 1.8 !important;
}

.route-cta h2,
.final-cta h2,
.itinerary-cta h2 {
    font-size: clamp(36px, 4vw, 52px) !important;
    line-height: 1.25 !important;
}


/* =====================================================
   18. FOOTER
   ===================================================== */

footer,
.footer {
    font-size: 17px !important;
}

footer p,
footer a,
.footer p,
.footer a {
    font-size: 17px !important;
    line-height: 1.7 !important;
}


/* =====================================================
   19. ADAPTACIÓN PARA TABLET
   ===================================================== */

@media (max-width: 900px) {

    body {
        font-size: 19px !important;
    }

    body p,
    body li {
        font-size: 19px !important;
        line-height: 1.8 !important;
    }

    body h1 {
        font-size: clamp(42px, 6vw, 60px) !important;
    }

    body h2 {
        font-size: clamp(34px, 4.5vw, 46px) !important;
    }

    body h3 {
        font-size: 32px !important;
    }

    .day-content p,
    .day-copy p,
    .day-text p,
    .day-card p,
    .mexico-day-text p {
        font-size: 19px !important;
    }

    .hotel p,
    .hotel-info p,
    .hotel-card p,
    .experience p,
    .experience-info p,
    .experience-card p {
        font-size: 19px !important;
    }

    .day-content h3,
    .day-copy h3,
    .day-card h3,
    .mexico-day-text h3 {
        font-size: 32px !important;
    }

    .route-nav nav a,
    nav a {
        font-size: 16px !important;
    }
}


/* =====================================================
   20. ADAPTACIÓN PARA CELULARES
   ===================================================== */

@media (max-width: 600px) {

    body {
        font-size: 18px !important;
        line-height: 1.75 !important;
    }

    body p,
    body li {
        font-size: 18px !important;
        line-height: 1.75 !important;
    }

    /* TÍTULOS */

    body h1 {
        font-size: clamp(38px, 9vw, 52px) !important;
        line-height: 1.15 !important;
    }

    body h2 {
        font-size: clamp(32px, 7vw, 42px) !important;
    }

    body h3 {
        font-size: 29px !important;
    }

    body h4 {
        font-size: 23px !important;
    }

    /* INTRODUCCIONES */

    .hero-description,
    .introduction-text p,
    .section-intro,
    .intro-text p,
    .intro-content p,
    .destination-intro p,
    .destino-intro p,
    .route-intro p {
        font-size: 19px !important;
        line-height: 1.75 !important;
    }

    /* DÍAS DEL ITINERARIO */

    .day-content p,
    .day-copy p,
    .day-text p,
    .day-card p,
    .mexico-day-text p,
    .mexico-day-content p {
        font-size: 18px !important;
        line-height: 1.8 !important;
    }

    .day-content h3,
    .day-copy h3,
    .day-text h3,
    .day-card h3,
    .mexico-day-text h3 {
        font-size: 30px !important;
    }

    /* HOTELES */

    .hotel p,
    .hotel-info p,
    .hotel-card p,
    .hotel-description {
        font-size: 18px !important;
    }

    .hotel h3,
    .hotel-info h3,
    .hotel-card h3 {
        font-size: 28px !important;
    }

    /* EXPERIENCIAS */

    .experience p,
    .experience-info p,
    .experience-card p,
    .experience-description {
        font-size: 18px !important;
    }

    .experience h3,
    .experience-info h3,
    .experience-card h3 {
        font-size: 28px !important;
    }

    /* ETIQUETAS */

    .eyebrow,
    .day-label,
    .section-label,
    .mexico-kicker,
    .route-label {
        font-size: 13px !important;
    }

    /* MENÚ */

    .top-links a,
    .route-nav nav a,
    nav a {
        font-size: 16px !important;
    }

    /* INFORMACIÓN DE RUTA */

    .route-city p,
    .summary-item strong,
    .route-line,
    .duration {
        font-size: 17px !important;
    }

    /* BOTONES */

    .map-link,
    .cta-button,
    .back,
    .route-cta a {
        font-size: 16px !important;
    }

    /* FOOTER */

    footer p,
    footer a,
    .footer p,
    .footer a {
        font-size: 16px !important;
    }
}