/* =======================================================
   ESTILOS CSS GLOBAL Y PÁGINA DE GRUPOS (VOITURES)
   ======================================================= */

/* --- Encabezados página de Grupos --- */

.h1-title {
    color: rgb(53, 152, 219);
    font-size: 36px;
    text-align: justify;
}

.h2-orange-title {
    font-size: 26px;
    color: rgb(204, 109, 25);
    margin-top: 25px;
}

.h3-group-title {
    text-align: justify;
    color: rgb(53, 152, 219);
}

/* --- FAQ Página Grupos --- */

.faq-section {
    margin-top: 40px;
}

.faq-item {
    margin-bottom: 15px;
}

.faq-question {
    cursor: pointer;
    font-weight: bold;
}

.faq-answer {
    margin-top: 10px;
}

/* =======================================================
   ESTILOS HOME PAGE (ALTA ESPECIFICIDAD HELIX)
   ======================================================= */

.h1-homepage-title {
    text-align: left !important;
    color: rgb(10, 38, 132) !important;
    font-size: 30px !important;
}

.h2-blue-title {
    text-align: left !important;
    color: rgb(53, 152, 219) !important;
    font-size: 24px !important;
}

.h2-inclusion-list-title {
    color: rgb(9, 60, 111) !important;
    font-size: 26px !important;
    margin-bottom: 15px !important;
    text-align: left !important;
}

.h3-blue-title {
    text-align: left !important;
    color: rgb(53, 152, 219) !important;
    font-size: 20px !important;
}

/* --- Texto y colores Home --- */

.text-justify {
    text-align: justify !important;
}

p.text-large {
    font-size: 18px !important;
}

p.text-blue-dark {
    color: rgb(9, 60, 111) !important;
}

.text-orange {
    color: rgb(204, 109, 25) !important;
}

.text-green-bold {
    color: rgb(45, 194, 107) !important;
    font-weight: bold !important;
}

/* --- Marca --- */

.brand-blue {
    color: rgb(10, 15, 196) !important;
}

.brand-gray {
    color: rgb(149, 165, 166) !important;
}

.brand-red {
    color: rgb(224, 62, 45) !important;
}

.brand-highlight,
.brand-highlight-small,
.brand-highlight-medium {
    background-color: rgb(236, 240, 241) !important;
}

.brand-highlight-small {
    font-size: 18px !important;
}

/* =======================================================
   LISTAS CON ICONO – FIX DEFINITIVO HELIX
   ======================================================= */

.list-bullet-blue {
    list-style: none !important;
    padding-left: 0 !important;
}

.list-bullet-blue li {
    position: relative;
    padding-left: 32px !important;
    margin-bottom: 10px;
}

.list-bullet-blue li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 18px;
    height: 18px;
    background-image: url("https://www.malagacarfrance.fr/images/blue3.png");
    background-size: contain;
    background-repeat: no-repeat;
}

/* --- Negrita listas principales --- */

.list-bold li {
    font-weight: bold !important;
    font-size: 18px !important;
}

/* --- Lista inclusiones --- */

.list-inclusions {
    padding-left: 0 !important;
}

.inclusion-item {
    margin-bottom: 15px !important;
}

.inclusion-title,
.inclusion-title-simple {
    display: block !important;
    color: rgb(9, 60, 111) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.inclusion-title {
    font-size: 20px !important;
}

.inclusion-title-simple {
    font-size: 18px !important;
    font-weight: bold !important;
}

.inclusion-item p.inclusion-description {
    font-size: 16px !important;
    color: rgb(9, 60, 111) !important;
    margin: 0 !important;
}

/* --- Lista advertencias --- */

.list-red-bold li {
    font-size: 18px !important;
    color: rgb(224, 62, 45) !important;
    font-weight: bold !important;
}

/* --- Imagen centrada --- */

.img-centered {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- FAQ SEO oculta --- */

.hidden-faq-seo {
    display: none !important;
}

/* --- Texto GRATUIT / GRATUITS --- */

.highlight-gratuit {
    color: #e26b0a !important;
    font-weight: bold !important;
}

/* =======================================================
   TABLA TARIFAS 2026 / 2027
   ======================================================= */

.table-rates {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    font-family: "Carlito", Arial, Helvetica, sans-serif !important;
}

.table-rates th,
.table-rates td {
    border: 1px solid #ffffff;
    padding: 8px 10px;
    font-weight: bold;
}

.table-rates th {
    text-align: center;
}

.table-rates td.price {
    text-align: right !important;
    white-space: nowrap;
}

/* ===== AUMENTOS DE TAMAÑO ===== */

/* 1ª fila */
.table-rates .row-year {
    background-color: #366092 !important;
    color: #ffffff !important;
    font-size: 47px !important;
}

/* 2ª fila */
.table-rates .row-info {
    background-color: #b8cce4 !important;
    color: #333399 !important;
    font-size: 29px !important;
}

/* GRATUITS en cursiva */
.table-rates .row-info .highlight-gratuit {
    color: #e26b0a !important;
    font-weight: bold !important;
    font-style: italic !important;
}

/* 3ª fila */
.table-rates .row-seasons th {
    background-color: #ffffff !important;
    font-size: 21px !important;
}

/* ===== COLUMNAS ===== */

/* Columnas A y B */
.table-rates .col-orange {
    background-color: #e26b0a !important;
    color: #ffffff !important;
    font-size: 19px !important;
}

/* Temporadas */
.table-rates .col-basse {
    background-color: #808080 !important;
    color: #ffffff !important;
}

.table-rates .col-mi {
    background-color: #366092 !important;
    color: #ffffff !important;
}

.table-rates .col-haute {
    background-color: #244062 !important;
    color: #ffffff !important;
}

/* Texto temporadas (fila blanca) */
.table-rates .row-seasons .col-basse {
    color: #808080 !important;
}

.table-rates .row-seasons .col-mi {
    color: #366092 !important;
}

.table-rates .row-seasons .col-haute {
    color: #244062 !important;
}

/* Días grandes */
.table-rates .day-big {
    font-size: 18px !important;
    font-weight: bold !important;
}
/* Centrar contenido de la columna A (primera columna) */
.table-rates td.col-orange:first-child,
.table-rates th.col-orange:first-child {
    text-align: center !important;
}
/* =======================================================
   BLOQUE TARIFS & SAISONS – SEPARADO DEL HTML
   ======================================================= */

/* Contenedor principal */
.seasons-wrapper {
    max-width: 1050px;
    margin: 20px auto;
    font-size: 14px;
    line-height: 1.4;
}

/* Imagen responsiva */
.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 20px auto;
}

/* Caja temporadas */
.seasons-box {
    background-color: #C5D9F0;
    padding: 20px;
    border-radius: 8px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

/* Caja información superior */
.info-box {
    border: 2px solid #C5D9F0;
    padding: 20px;
    border-radius: 8px;
    box-sizing: border-box;
    color: #08266F;
}

/* Texto líneas temporadas */
.seasons-line {
    color: #08266F;
    font-weight: bold;
    margin: 12px 0;
    padding-left: 20px;
}

/* Contenido centrado */
.info-content {
    text-align: center;
    font-weight: bold;
}

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

.text-small {
    font-size: 13px;
    margin-top: 15px;
    color: #333;
}

/* Responsive */
@media (max-width: 768px) {
    .seasons-line,
    .info-content {
        padding-left: 0;
        text-align: center;
    }
}

/* --- AJUSTE TABLA TARIFAS HELIX ULTIMATE --- */

/* 1. Evita que la tabla se colapse en móvil y mantenga la cuadrícula */
.table-rates {
    width: 100% !important;
    min-width: 900px; /* Al tener 17 columnas, este ancho asegura que cada celda sea cuadrada */
    border-collapse: collapse !important;
    background-color: #fff;
}

/* 2. Fuerza los bordes visibles (el "cuadriculado") */
.table-rates th, 
.table-rates td {
    border: 1px solid #e1e1e1 !important; /* Color gris suave para la rejilla */
    padding: 10px 5px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* 3. Estilo para los encabezados de temporada */
.row-seasons th {
    font-weight: bold;
    text-transform: uppercase;
}

/* 4. Contenedor con scroll táctil suave para móviles */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Scroll suave en iPhone */
    border: 1px solid #ddd; /* Marco exterior */
    margin-bottom: 20px;
}

/* 5. Ajuste de los H1 y H2 dentro de la tabla */
.table-rates h1, 
.table-rates h2 {
    margin: 0 !important;
    padding: 5px 0 !important;
}
/* =======================================================
   ESTILOS PARA LA NUEVA PÁGINA DE FAQ
   ======================================================= */

/* Aplica solo en la página con la clase .faq-page */
.faq-page .faq-section {
    margin-top: 40px;
}

.faq-page .faq-item {
    margin-bottom: 20px;  /* Mayor separación entre cada FAQ */
}

.faq-page .faq-question {
    font-weight: bold;
    font-size: 1.3em; /* Aumentar tamaño de las preguntas */
    color: #2a2a2a; /* Color oscuro */
    cursor: pointer;
    transition: color 0.3s ease;
}

.faq-page .faq-question:hover {
    color: rgb(53, 152, 219); /* Color azul al pasar el ratón */
}

.faq-page .faq-answer {
    margin-top: 10px;
    font-size: 1.2em; /* Aumentar tamaño de las respuestas */
    color: #666;
    line-height: 1.6;
}

.faq-page .faq-item:nth-child(even) {
    background-color: #f9f9f9; /* Fondo claro para las preguntas pares */
    padding: 15px;
    border-radius: 5px;
}

.faq-page .faq-item:nth-child(odd) {
    background-color: #f1f1f1; /* Fondo más oscuro para preguntas impares */
    padding: 15px;
    border-radius: 5px;
}

/* Estilo específico para las respuestas en la nueva página */
.faq-page .faq-answer {
    font-size: 1.2em;
    color: #555;
    padding: 10px;
}

/* Títulos de FAQ más grandes */
.faq-page .h2-orange-title {
    font-size: 28px !important;
    color: rgb(204, 109, 25) !important;
    margin-top: 35px !important;
}

/* Ajustes para mayor legibilidad */
.faq-page .faq-item {
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Ajustes adicionales para la nueva página FAQ */
.faq-page .faq-item .faq-question {
    font-size: 1.3em;
    font-weight: bold;
    color: #2a2a2a;
}

.faq-page .faq-answer {
    font-size: 1.2em;
    color: #666;
    margin-top: 10px;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .faq-page .faq-question {
        font-size: 1.2em;
    }

    .faq-page .faq-answer {
        font-size: 1.1em;
    }

    .faq-page .faq-item {
        padding: 15px;
    }
}
/* =========================
   COLORES CORPORATIVOS
   ========================= */
:root {
  --mcf-bleu: #1e90ff;   /* Celeste */
  --mcf-jaune: #f4c430; /* Amarillo */
  --mcf-rouge: #d32f2f; /* Rojo */
}

/* =========================
   TÍTULOS SEO
   ========================= */
.contact-form-mcf h1,
.contact-form-mcf h2,
.contact-form-mcf h3 {
  color: var(--mcf-bleu);
  font-weight: 700;
  margin-bottom: 15px;
}

.contact-form-mcf h1 {
  font-size: 2.2rem;
}

.contact-form-mcf h2 {
  font-size: 1.6rem;
  margin-top: 30px;
}

/* =========================
   MARCA MALAGACARFRANCE
   ========================= */
.mcf-brand span.blue {
  color: var(--mcf-bleu);
  font-weight: 700;
}

.mcf-brand span.yellow {
  color: var(--mcf-jaune);
  font-weight: 700;
}

.mcf-brand span.red {
  color: var(--mcf-rouge);
  font-weight: 700;
}

/* =========================
   FORMULARIO
   ========================= */
.contact-form-mcf input,
.contact-form-mcf textarea {
  width: 100%;
  margin-bottom: 15px;
}

.required-star {
  color: red;
}

/* =========================
   WHATSAPP FLOTANTE
   ========================= */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 30px;
  right: 30px;
  z-index: 99999;
  transition: all 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}

.whatsapp-float img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  border-radius: 50%;
}

.whatsapp-float::after {
  content: "Besoin d'aide ?";
  position: absolute;
  right: 75px;
  top: 15px;
  background-color: #333;
  color: #fff;
  padding: 5px 12px;
  border-radius: 5px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.whatsapp-float:hover::after {
  opacity: 1;
}

@media (max-width: 768px) {
  .whatsapp-float {
    width: 55px;
    height: 55px;
    bottom: 20px;
    right: 20px;
  }

  .whatsapp-float::after {
    display: none;
  }
}
/* =======================================================
   VARIABLES COLORES – SOLO APOYO (NO AFECTA OTRAS PÁGINAS)
   ======================================================= */
:root {
    --seo-celeste: #3598db; /* Celeste para H SOLO en contacto */
}

/* =======================================================
   ESTILOS CSS GLOBAL Y PÁGINA DE GRUPOS (VOITURES)
   ======================================================= */

/* --- Encabezados página de Grupos --- */
.h1-title {
    color: rgb(53, 152, 219);
    font-size: 36px;
    text-align: justify;
}

.h2-orange-title {
    font-size: 26px;
    color: rgb(204, 109, 25);
    margin-top: 25px;
}

.h3-group-title {
    text-align: justify;
    color: rgb(53, 152, 219);
}

/* =======================================================
   SOLO CONTACTO – H EN CELESTE
   ======================================================= */
.contact-form-mcf h1,
.contact-form-mcf h2,
.contact-form-mcf h3 {
    color: var(--seo-celeste) !important;
    font-weight: 700;
}

.contact-form-mcf h1 {
    font-size: 2.2rem;
}

.contact-form-mcf h2 {
    font-size: 1.6rem;
    margin-top: 30px;
}

/* =======================================================
   FAQ Página Grupos
   ======================================================= */
.faq-section {
    margin-top: 40px;
}

.faq-item {
    margin-bottom: 15px;
}

.faq-question {
    cursor: pointer;
    font-weight: bold;
}

.faq-answer {
    margin-top: 10px;
}

/* =======================================================
   ESTILOS HOME PAGE (ALTA ESPECIFICIDAD HELIX)
   ======================================================= */
.h1-homepage-title {
    text-align: left !important;
    color: rgb(10, 38, 132) !important;
    font-size: 30px !important;
}

.h2-blue-title {
    text-align: left !important;
    color: rgb(53, 152, 219) !important;
    font-size: 24px !important;
}

.h2-inclusion-list-title {
    color: rgb(9, 60, 111) !important;
    font-size: 26px !important;
    margin-bottom: 15px !important;
    text-align: left !important;
}

.h3-blue-title {
    text-align: left !important;
    color: rgb(53, 152, 219) !important;
    font-size: 20px !important;
}

/* =======================================================
   TEXTO Y COLORES HOME
   ======================================================= */
.text-justify {
    text-align: justify !important;
}

p.text-large {
    font-size: 18px !important;
}

p.text-blue-dark {
    color: rgb(9, 60, 111) !important;
}

.text-orange {
    color: rgb(204, 109, 25) !important;
}

.text-green-bold {
    color: rgb(45, 194, 107) !important;
    font-weight: bold !important;
}

/* =======================================================
   MARCA
   ======================================================= */
.brand-blue {
    color: rgb(10, 15, 196) !important;
}

.brand-gray {
    color: rgb(149, 165, 166) !important;
}

.brand-red {
    color: rgb(224, 62, 45) !important;
}

.brand-highlight,
.brand-highlight-small,
.brand-highlight-medium {
    background-color: rgb(236, 240, 241) !important;
}

.brand-highlight-small {
    font-size: 18px !important;
}

/* =======================================================
   LISTAS CON ICONO – FIX HELIX
   ======================================================= */
.list-bullet-blue {
    list-style: none !important;
    padding-left: 0 !important;
}

.list-bullet-blue li {
    position: relative;
    padding-left: 32px !important;
    margin-bottom: 10px;
}

.list-bullet-blue li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 18px;
    height: 18px;
    background-image: url("https://www.malagacarfrance.fr/images/blue3.png");
    background-size: contain;
    background-repeat: no-repeat;
}

/* =======================================================
   FORMULARIOS
   ======================================================= */
.contact-form-mcf input,
.contact-form-mcf textarea {
    width: 100%;
    margin-bottom: 15px;
}

.required-star {
    color: red;
}

/* =======================================================
   WHATSAPP FLOTANTE
   ======================================================= */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    z-index: 99999;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

.whatsapp-float img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border-radius: 50%;
}

.whatsapp-float::after {
    content: "Besoin d'aide ?";
    position: absolute;
    right: 75px;
    top: 15px;
    background-color: #333;
    color: #fff;
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.whatsapp-float:hover::after {
    opacity: 1;
}

@media (max-width: 768px) {
    .whatsapp-float {
        width: 55px;
        height: 55px;
        bottom: 20px;
        right: 20px;
    }

    .whatsapp-float::after {
        display: none;
    }
}

/* =======================================================
   RESTO DE ESTILOS (TABLAS, TARIFAS, FAQ, ETC.)
   ======================================================= */
/* 🔒 Se mantienen exactamente igual que antes */