/* HEADER HERO PARA LAPTOPS MOVILES Y TABLETS */
header.heroClaseA {
    background: url("../assets/fondo_headerClaseA.jpg") no-repeat center/cover;
    text-align: center;
    color: white;
    height: 90vh; /* 25% de la altura de la ventana */
    min-height: 120px; /* evita que se haga demasiado pequeño */
    max-height: 600px; /* evita que se haga demasiado grande */
    display: flex;
    flex-direction: column;
    justify-content: center; /* centra verticalmente el contenido */
    padding: 0 20px;
}

/* Espaciado y tamaño en escritorio */
header.heroClaseA h1 {
    margin-top: 0;
    margin-bottom: 0.3rem; /* espacio pequeño entre título y párrafo */
    font-size: 2rem;
}

header.heroClaseA p {
    margin-top: 0;
    font-size: 1.1rem;
}


/* ===== Ajustes para tablets ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    header.heroClaseA {
        height: 50vh;  /* más compacto que desktop, pero más alto que móviles */
        max-height: 450px; /* opcional para evitar que se agrande demasiado */
    }

    header.heroClaseA h1 {
        font-size: 2rem;  /* ajustar tamaño del título */
        margin-bottom: 0.25rem;
    }

    header.heroClaseA p {
        font-size: 1rem;
    }
}

/* ===== Ajustes para móviles ===== */
@media (max-width: 768px) {
    header.heroClaseA {
        height: 30vh;  /* más compacto para móviles */
        max-height: 300px;
    }

    header.heroClaseA h1 {
        font-size: 1.8rem;
        margin-bottom: 0.2rem;
    }

    header.heroClaseA p {
        font-size: 1rem;
    }
}

/* ===== Ajustes para móviles muy pequeños ===== */
@media (max-width: 480px) {
    header.heroClaseA {
        height: 25vh;
        max-height: 250px;
    }

    header.heroClaseA h1 {
        font-size: 1.5rem;
        margin-bottom: 0.15rem;
    }

    header.heroClaseA p {
        font-size: 0.95rem;
    }
}

/*  F I N   -    Espaciado y tamaño en escritorio */


/*  L I C E N C I A S  */

.contenedor {
    display:grid; 
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); 
    gap:25px;
}

.requicitos {
    font-size:18px; 
    margin:15px 0 10px;
}

.cardLicencias {
    background:#fff; 
    border-radius:12px; 
    box-shadow:0 4px 10px rgba(0,0,0,0.08); 
    padding:25px; 
    scroll-margin-top: 20px;
    text-align:left;
}

.incluye {
    font-size:18px; 
    margin:15px 0 10px;
}

.detalle1 {
    margin-left:20px; 
    margin-bottom:15px; 
    line-height:1.6;
}

.detalle2 {
    margin-left:20px; 
    line-height:1.6;
}

.columna {
    padding:15px; 
    border:1px solid #ddd;
}

.columna_1 {
    padding:15px; 
    border:1px solid #ddd; 
    font-weight:bold;
}

.encabezadoTabla {
    background:#434AFE; 
    color:#fff; 
    text-align:center;
}

.lineaPorMedio {
    background:#f9f9f9;
}

.contenedor-imgCamion {
    flex: 1 1 300px;
    text-align: center;
    padding-right: 10px;
    padding-top: 180px;
}

.contenedor-imgCamion img {
    max-width: 486px;
    height: auto;
}

.estiloImg {
    border-radius:16px; 
    overflow:hidden; 
    box-shadow:0 2px 6px rgba(0,0,0,0.8);
}

.contenedorLicencia {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* centra verticalmente la imagen */
  gap: 20px;
}

/* La tarjeta ocupa un poco más de ancho que la imagen */
.contenedorLicencia .cardLicencias {
  flex: 2 1 400px;
}

.contenedorLicencia .contenedor-imgCamion {
  flex: 1 1 300px;
  text-align: center;
  padding: 0; /* reseteamos padding extra */
}

.licencia {
  display: flex;
  justify-content: space-between;
  align-items: center;  /* centra verticalmente la imagen */
  gap: 40px;
  margin-bottom: 60px;
}

/* tarjeta un poco más angosta */
.licencia .cardLicencias {
  flex: 1 1 560px;  /* 40px menos ancho */
}

/* imagen más grande y desplazada hacia arriba */
.licencia .contenedor-imgCamion {
  flex: 0 1 500px;
  display: flex;
  justify-content: center;
  transform: translateY(-80px); /* sube la imagen */
}

.licencia .contenedor-imgCamion img {
  max-width: 100%;
  height: auto;
}

.whatsapp-label {
    width: 54px;
}



/* -------------------- */
/*  Móviles             */
/* -------------------- */
@media (max-width: 600px) {
  .licencia {
    flex-direction: column;   /* card arriba, imagen abajo */
    align-items: stretch;     /* ocupa todo el ancho */
    gap: 10px;                /* separación entre card e imagen */
  }

  .licencia .cardLicencias {
    flex: 1 1 100%;
    width: 100%;              /* ancho completo */
  }

  .licencia .contenedor-imgCamion {
    flex: 1 1 100%;
    width: 100%;
    transform: none;          /* eliminamos el desplazamiento vertical */
    justify-content: center;
  }

  .licencia .contenedor-imgCamion img {
    width: 100%;              /* imagen del mismo ancho que la card */
    max-width: 100%;
    height: auto;
  }
}

/* -------------------- */
/*  Tablets             */
/* -------------------- */
@media (min-width: 601px) and (max-width: 991px) {
  .licencia {
    flex-direction: row;      /* card e imagen en fila */
    align-items: center;
    gap: 20px;                /* separación de 20px */
  }

  .licencia .cardLicencias {
    flex: 1 1 60%;            /* todas las cards del mismo ancho */
    max-width: 600px;         /* límite para no crecer demasiado */
  }

  .licencia .contenedor-imgCamion {
    flex: 1 1 40%;            /* la imagen ocupa la mitad de la card */
    transform: none;          /* no subimos la imagen */
    display: flex;
    justify-content: center;
  }

  .licencia .contenedor-imgCamion img {
    width: 100%;
    height: auto;
    max-width: 300px;         /* controla que no se pase de tamaño */
  }
}






/* asegúrate de aplicar box-sizing global para evitar overflow por padding */
*, *::before, *::after {
  box-sizing: border-box;
}

/* -------- MÓVILES: tarjetas y sus imágenes del mismo ancho -------- */
@media (max-width: 600px) {
  /* Cada licencia: card arriba, imagen abajo, separación 10px */
  .licencia {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* IMPORTANT: stretch para que los hijos ocupen todo el ancho */
    gap: 10px;              /* separación entre card e imagen = 10px */
    margin-bottom: 30px;
    width: 100%;
    padding: 0 16px;        /* padding horizontal del contenedor (ajústalo si quieres) */
  }

  /* Card y contenedor de imagen deben ocupar exactamente el 100% */
  .licencia .cardLicencias,
  .licencia .contenedor-imgCamion {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* Eliminar desplazamientos y paddings que causaban desbordes en móviles */
  .licencia .contenedor-imgCamion {
    transform: none;        /* quitamos el translateY(-80px) en móvil */
    padding-top: 0;         /* anulamos cualquier padding-top grande */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Imagen exactamente del ancho de la card */
  .licencia .contenedor-imgCamion img,
  .licencia .estiloImg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  /* Si tu .cardLicencias tiene padding (ej. padding:25px), con box-sizing:border-box no provocará overflow */
  .licencia .cardLicencias {
    /* opcional: ajustar padding si quieres menos espacio interno en móviles */
    /* padding: 18px; */
  }
}






/* T A B L A   C O M P A R A T I V A */
.seccionTablaComparativa {
    padding:60px 20px; 
    background:#fff; 
    font-family:Arial, 
    sans-serif; 
    border-radius: 10px;
}

.contenedorTabla {
    max-width:1200px; 
    margin:0 auto; 
    text-align:center;
}

.tituloComparativa {
    font-size:32px; 
    margin-bottom:40px; 
    color:#222;
}

.configuraTablaComparativa {
    width:100%; 
    border-collapse:collapse; 
    font-size:16px; 
    min-width:800px;
}

.indicador-scroll {
  display: none; /* oculto por defecto */
  text-align: center;
  margin: 10px 0 20px;
  font-size: 14px;
  color: #555;
}

.indicador-scroll .i {
  font-size: 18px;
  margin: 0 8px;
  color: #434AFE;
}


/* ---------- Tablets ---------- */
@media (min-width: 601px) and (max-width: 900px) {
  .contenedorTabla {
    max-width: 100%;
  }

  .configuraTablaComparativa {
    min-width: unset;        /* quitamos el ancho mínimo */
    table-layout: fixed;     /* fuerza a que las columnas se repartan */
    font-size: 15px;
  }

  .configuraTablaComparativa th,
  .configuraTablaComparativa td {
    word-wrap: break-word;   /* corta texto largo */
    padding: 10px;
  }
}

/* ---------- Móviles (scroll horizontal por defecto) ---------- */
@media (max-width: 600px) {
  .contenedorTabla {
    max-width: 100%;
  }

  .configuraTablaComparativa {
    width: 100%;
    min-width: unset; /* quitamos ancho mínimo fijo */
    font-size: 14px;
  }

  .contenedorTabla > div {
    overflow-x: auto; /* permite scroll horizontal */
    -webkit-overflow-scrolling: touch;
  }

  .indicador-scroll {
    display: block;
  }
}

----------------------------------------------------------------------