/* ========================
    MJYJ - Estilos Generales
  ======================== */

  /* === Variables === */
  :root {
    --azul: #005e92;
    --azuldifuminado: #076192ab;
    --rojo-vino: #8a1726;
    --rojo-encendido: #e4032e;
    --blanco: #ffffff;
    --negro: #000000;
    --gris-claro: #f5f5f5;
    --fuente-principal: 'Roboto', sans-serif;

    --vino: var(--rojo-vino, #800020);
    --azul: #005E92;
    --bg: #f5f7fa;
    --ink: #1a1a1a;
    --muted: #6b7280;
    --panel: #ffffff;
    --borda: #e7e7e7;


    --vino: var(--rojo-vino, #800020);
    --panel: #ffffff;
    --borde: #e6e7eb;
    --ring: rgba(0, 94, 146, .15);
  }

  /* === Reset === */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: var(--fuente-principal);
    line-height: 1.6;
    background-color: var(--azul);
    color: var(--negro);
  }

  /* ========================
    Contenedor General
  ======================== */
  .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }

  .espaciador {
    height: 30px;
    /* o 50px, 100px, según necesites */
    background-color: white;
  }

  .espaciador2 {
    height: 30px;
    /* o 50px, 100px, según necesites */
    background-color: var(--azul);
  }

  /* ========================
    Header
  ======================== */
  .header {
    background-color: var(--blanco);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    position: relative;
    z-index: 10;
  }

  .logo {
    width: 75px;
  }

  .header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav ul {
    display: flex;
    gap: 25px;
    list-style: none;
  }

  .nav a {
    font-size:14px;
    font-family: var(--fuente-principal);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .nav a:hover {
    color: var(--verde);
  }

  .menu-toggle {
    display: none;
    font-size: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--negro);
    z-index: 1001;
  }


  /* Submenú oculto por defecto */
  /* Estructura base */
  .nav .has-submenu {
    position: relative;
  }

  /* Submenús */
  .nav .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    /* Submenú aparece a la izquierda por defecto */
    background-color: white;
    list-style: none;
    padding: 10px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 220px;
    white-space: nowrap;
    border-radius: 8px;
  }

  /* Submenús a la derecha */
  .nav .submenu.right {
    left: auto;
    right: 0;
    /* Aparece alineado a la derecha */
  }

  /* Items del submenú */
  .nav .submenu li {
    padding: 5px 20px;
    text-align: center;
  }

  .nav .submenu li a {
    color: #2c3e50;
    text-decoration: none;
    display: block;
    transition: 0.3s;
    white-space: nowrap;
    /* Evita cortes de texto */
  }

  .nav .submenu li a:hover {
    color: var(--verde);
  }

  /* Mostrar submenú en hover (modo escritorio) */
  .nav .has-submenu:hover .submenu {
    display: block;
  }

  /* Estilo para menú móvil */
  @media screen and (max-width: 768px) {
    .nav ul {
      flex-direction: column;
      gap: 10px;
    }

    .nav .submenu {
      position: static;
      display: none;
      box-shadow: none;
      padding: 0;
    }

    .nav .has-submenu:hover .submenu {
      display: block;
    }
  }


  /* Responsive: mostrar submenú dentro del menú hamburguesa */
  @media screen and (max-width: 768px) {
    .nav .has-submenu {
      width: 100%;
    }

    .nav .submenu {
      position: static;
      background-color: transparent;
      box-shadow: none;
      padding-left: 20px;
    }

    .nav .submenu li {
      border-top: 1px solid #eee;
    }

    .nav .submenu li a {
      color: #2c3e50;
    }
  }




  /*FOOTER*/

  .footer {
    background-color: var(--rojo-vino);
    /* fondo dorado */
    color: var(--blanco);
    padding: 60px 0 30px;
    font-family: 'Montserrat', sans-serif;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* ahora 4 columnas */
    gap: 40px;
  }

  .footer-logo img {
    width: 160px;
    margin-bottom: 15px;
  }

  .footer-logo p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 15px;
    color: var(--blanco);
  }

  .redes-sociales {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 20px;
  }

  .redes-sociales a {
    color: white;
    transition: color 0.3s;
  }

  .redes-sociales a:hover {
    color: var(--azul);
    /* O el color que quieras en hover */
  }


  .footer-links h4,
  .footer-contacto h4 {
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--blanco);
    /* ✅ títulos en verde */
  }

  .footer-links ul,
  .footer-contacto ul {
    list-style: none;
    padding: 0;
  }

  .footer-links li,
  .footer-contacto li {
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--blanco);
  }

  .footer-links a {
    color: var(--blanco);
    text-decoration: none;
    transition: color 0.3s;
  }

  .footer-links a:hover {
    color: var(--dorado);
  }

  .footer-contacto i {
    margin-right: 8px;
    color: var(--blanco);
  }

  .footer-derechos {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 13px;
    color: var(--blanco);
  }

  
.footer-certificaciones-row {
  margin-top: 2px;
  display: flex;
  justify-content: flex-start; /* alineado con contacto */
  align-items: center;
  gap: 20px; /* espacio entre logos */
}

.cert-logo {
  max-width: 120px; 
  height: auto;
  transition: transform 0.3s ease;
}

.cert-logo:hover {
  transform: scale(1.1);
}

/* ✅ Responsivo */
@media (max-width: 600px) {
  .footer-certificaciones-row {
    justify-content: center; /* en móvil se centran */
    gap: 15px;
  }

  .cert-logo {
    max-width: 80px; /* un poco más pequeños en cel */
  }
}

  /* Responsive */
  @media (max-width: 992px) {
    .footer-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
    }
  }

  @media (max-width: 600px) {
    .footer-grid {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .footer-logo img {
      margin: 0 auto 15px;
    }

    .redes-sociales {
      justify-content: center;
      /* 🔹 centra horizontalmente */
      margin-top: 20px;
    }

    .redes-sociales a {

      margin: 0 10px;
    }
  }



  .hero-lts {
    position: relative;
    width: 100%;
    height: 48rem;
    overflow: hidden;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .galeria {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000;
  }

  .galeria .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
  }

  .galeria .slide.active {
    opacity: 1;
  }

  .galeria img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajuste consistente */
    object-position: center;
  }

  /* Overlay para legibilidad */
  .overlay-contenido {
    position: relative;
    text-align: center;
    z-index: 2;
    padding: 20px;
    max-width: 800px;
    background: rgba(0, 0, 0, 0.4); /* capa semitransparente */
    border-radius: 10px;
  }

  .overlay-contenido h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 15px;
  }

  .overlay-contenido p {
    font-size: 1.5rem;
    margin-bottom: 30px;
  }

  .botones {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  .btn {
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    background-color: white;
    color: #005e92;
    transition: background 0.3s ease;
  }

  .btn:hover {
    background-color: #e0e0e0;
  }

  #titulo-slide, #texto-slide {
    transition: opacity 0.5s ease-in-out;
  }

  /* --- Versión Móvil --- */
  @media (max-width: 768px) {
    .hero-lts {
      height: 65vh; /* Sección más compacta */
      padding: 10px;
    }

    .overlay-contenido {
      background: rgba(0, 0, 0, 0.5); /* Más oscuro en móvil */
      padding: 15px;
    }

    .overlay-contenido {
      margin-top: 15vh; /* Ajuste proporcional en móvil */
      max-width: 90%;
      padding: 12px;
    }

    .overlay-contenido h1 {
      font-size: 1.6rem;
    }

    .overlay-contenido p {
      font-size: 1rem;
      margin-bottom: 15px;
    }

    .botones {
      flex-direction: column;
      gap: 10px;
    }

    .btn {
      font-size: 0.9rem;
      padding: 10px 20px;
    }

      .galeria .slide:nth-child(1) img {
      content: url('../img/inicio/trailer_movil.png');
    }
    .galeria .slide:nth-child(2) img {
      content: url('../img/inicio/operadores_movil.png');
    }
    .galeria .slide:nth-child(3) img {
      content: url('../img/inicio/coordinador_movil.png');
    }
  }

  @media (min-width: 1400px) {
    .hero-lts {
    position: relative;
    width: 100%;
    height: 68rem;
    overflow: hidden;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  }



  /* ========================
    Sección Cotización
  ======================== */
  .seccion-cotizacion {
    padding: 60px 0;
    background-color: var(--blanco);
    color: var(--rojo-vino);
    text-align: center;
  }

  .seccion-cotizacion h2 {
    font-size: 42px;
    margin-bottom: 40px;
    font-weight: 800;
  }

  .form-cotizacion {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: var(--blanco);
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    text-align: left;
  }

  .form-column {
    flex: 1;
    min-width: 280px;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--negro);
  }

  .form-group input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    font-family: var(--fuente-principal);
    color: var(--negro);
    background-color: var(--blanco);
    transition: border-color 0.3s ease;
  }

  .form-group input:focus {
    border-color: var(--verde);
    outline: none;
  }

  .form-submit {
    width: 100%;
    margin-top: 20px;
    text-align: center;
  }

  .form-submit .btn-principal {
    background-color: var(--rojo-vino);
    color: var(--blanco);
    padding: 14px 30px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .form-submit .btn-principal:hover {
    background-color: var(--azul);
  }

  /* ========================
    Responsive - Móviles
  ======================== */
  @media (max-width: 768px) {

    .form-cotizacion {
      flex-direction: column;
    }

    .form-column {
      min-width: 100%;
    }

    .menu-toggle {
      display: block;
    }

    .nav {
      position: absolute;
      top: 70px;
      right: 0;
      background-color: var(--blanco);
      width: 100%;
      max-height: 0;
      overflow-y: hidden;
      /* inicialmente oculto */
      transition: max-height 0.3s ease;
      z-index: 1000;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .nav ul {
      flex-direction: column;
      padding: 10px 0;
      margin: 0;
      list-style: none;
    }

    .nav ul li {
      padding: 12px 0;
      text-align: center;
      border-top: 1px solid #ddd;
    }

    .nav.open {
      max-height: 500px;
      /* suficiente para mostrar todos los enlaces */
      overflow-y: auto;
      /* scroll si pasa de max-height */
    }

  }

  /* ========================
    Responsive - Laptops ≥1200px
  ======================== */
  @media (min-width: 1200px) {
    .img-figuras {
      width: 400px;
      top: -210px;
      left: -155px;
    }

    .img-cajas {
      width: 700px;
      left: 100px;
      transform: scale(1.2);
    }

    .img-camion {
      width: 850px;
      left: -300px;
      bottom: -40px;
      transform: scale(1.5);
    }

    .hero-texto {
      padding: 40px;
    }

    .hero-texto h1 {
      font-size: 48px;
    }

    .hero-texto p {
      font-size: 22px;
    }
  }

  /* ========================
    Responsive - Monitores ≥1600px
  ======================== */
  @media (min-width: 1600px) {
    .container {
      max-width: 1400px;
    }

    .img-figuras {
      width: 500px;
    }

    .img-camion {
      width: 1000px;
      left: -300px;
      transform: scale(1.2);
    }

    .hero-texto h1 {
      font-size: 56px;
    }

    .hero-texto p {
      font-size: 24px;
    }


  }

  /* Sección beneficios como grid */
  .seccion-beneficios {
    padding: 80px 20px;
    background-color: var(--blanco);
    /* fondo neutro */
  }

  .beneficios-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    /* espacio entre imagen y texto */
    flex-wrap: wrap;
  }

  /* Imagen */
  .beneficios-imagen {
    flex: 1 1 400px;
  }

  .beneficios-imagen img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }

  /* Contenido */
  .beneficios-contenido {
    flex: 1 1 400px;
    background-color: var(--azul);
    /* puedes usar un degradado si quieres */
    color: var(--blanco);
    padding: 40px 30px;
    border-radius: 10px;
  }

  .beneficios-contenido h2 {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 20px;
  }

  .beneficios-contenido p {
    font-size: 22px;
    line-height: 1.5;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .beneficios-grid {
      flex-direction: column;
      gap: 10px;
    }

    /* Reordenar */
    .beneficios-contenido {
      order: 1;
      /* primero */
    }

    .beneficios-imagen {
      order: 2;
      /* después */
    }


    .beneficios-contenido h2 {
      font-size: 32px;
    }

    .beneficios-contenido p {
      font-size: 16px;
    }

  }




  /**¿POR QUE ELEGIRNOS*/

  .seccion-iconos {
    background: #005e92 url('../img/inicio/fondo.png') no-repeat center center/cover;
    color: white;
    padding: 80px 20px;
    text-align: center;
    position: relative;
  }

  .seccion-iconos .titulo-seccion {
    font-size: 3.5rem;
    margin-bottom: 50px;
    font-weight: 600;
  }

  .contenedor-iconos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
  }

  .icono-box {
    background: white;
    border-radius: 10px;
    padding: 20px;
    width: 180px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s;
  }

  .icono-box:hover {
    transform: translateY(-5px);
  }

  .icono-box img {
    width: 80px;
    height: auto;
    margin-bottom: 15px;
  }

  .icono-box p {
    color: var(--azul);
    font-size: 0.95rem;
    font-weight: 700;
  }

  .seccion-iconos {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .seccion-iconos.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .icono-box {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .icono-box.visible {
    opacity: 1;
    transform: translateY(0);
  }


  @media (max-width: 768px) {
    .contenedor-iconos {
      flex-direction: column;
      align-items: center;
    }

    .icono-box {
      width: 90%;
      max-width: 300px;
    }
  }

  /* SECCIÓN MAPA MODERNA */
  .seccion-mapa {
    position: relative;
    width: 100%;
    padding: 60px 20px;
    background: #f4f6f8;
  }

  /* Contenedor del mapa */
  .mapa-container {
    position: relative;
    width: 100%;
    height: 450px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
  }

  /* Mapa */
  .mapa-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: brightness(0.95);
    transition: transform 0.3s ease;
  }

  .mapa-container iframe:hover {
    transform: scale(1.02);
  }

  /* Cuadro de dirección */
  .cuadro-direccion {
    position: absolute;
    top: 30px;
    left: 40px;
    background-color: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    width: 280px;
    overflow: hidden;
    z-index: 10;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .cuadro-direccion:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
  }

  .cuadro-titulo {
    background-color: var(--azul);
    color: var(--blanco);
    font-weight: bold;
    font-size: 16px;
    padding: 14px 16px;
    text-align: center;
  }

  .cuadro-texto {
    padding: 16px;
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    text-align: left;
  }

  /* RESPONSIVO */
  @media (max-width: 768px) {
    .mapa-container {
      height: 350px;
    }

    .cuadro-direccion {
      width: 90%;
      left: 5%;
      top: 20px;
    }

    .cuadro-titulo {
      font-size: 14px;
      padding: 12px;
    }

    .cuadro-texto {
      font-size: 13px;
      padding: 12px;
    }
  }

  /* ===== Sección base (mantiene tu estilo) ===== */
  .clientes-section {
    position: relative;
    background: #f9f9f9;
    overflow: hidden;
    padding: 80px 20px;
  }

  .clientes-section .slice {
    position: absolute;
    top: -80px;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(135deg, #8a1726, #8a17266e);
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
    z-index: 0;
  }

  .clientes-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }

  .titulo-clientes {
    font-size: clamp(1.6rem, 2.5vw, 3rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 36px;
    display: inline-block;
    background: linear-gradient(135deg, #005e92, #00c6ff);
    padding: 12px 26px;
    border-radius: 50px;
  }

  /* ===== Carrusel ===== */
  .clientes-carousel {
    position: relative;
    padding: 8px 42px;
    /* espacio para botones */
  }

  .cc-track {
    display: flex;
    align-items: stretch;
    gap: 20px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 20px;
    padding: 8px 4px;
    scrollbar-width: none;
    /* Firefox */
  }

  .cc-track::-webkit-scrollbar {
    display: none;
  }

  /* Chrome/Safari */
  /* ===== Carrusel 3-por-vista ===== */
  .clientes-carousel {
    position: relative;
    padding: 8px 42px;
    --gap: 20px;
  }

  .cc-track {
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 1px;
    padding: 4px;
    scrollbar-width: none;
  }

  .cc-track::-webkit-scrollbar {
    display: none;
  }

  /* 3 por vista (desktop), 2 (tablet), 1 (móvil) */
  .cliente {
    flex: 0 0 calc((100% - var(--gap)*2) / 3);
    scroll-snap-align: start;
    background: #fff;
    padding: 18px;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    transition: transform .3s ease, box-shadow .3s ease;
  }

  .cliente img {
    display: block;
    width: 100%;
    height: 100px;
    object-fit: contain;
    object-position: center;
  }

  .cliente:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
  }

  @media (max-width: 900px) {
    .cliente {
      flex-basis: calc((100% - var(--gap)) / 2);
    }
  }

  @media (max-width: 600px) {
    .clientes-carousel {
      padding: 6px 34px;
    }

    .cliente {
      flex-basis: 100%;
    }

    .cliente img {
      height: 80px;
    }
  }

  /* Botones */
  .cc-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e6e7eb;
    background: #fff;
    color: #333;
    display: grid;
    place-items: center;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
    z-index: 2;
  }

  .cc-btn.prev {
    left: 6px;
  }

  .cc-btn.next {
    right: 6px;
  }

  .cc-btn:hover {
    transform: translateY(-50%) scale(1.06);
  }

  .cc-btn:active {
    transform: translateY(-50%) scale(0.98);
  }


  /* Sección estadísticas renovada */
  .stats-section {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    padding: 50px 20px;
    background: #f4f6f8;
    /* fondo suave */
  }

  /* Tarjeta estadística */
  .stat-card {
    background: linear-gradient(15deg, #005e92, #8a1726);
    /* degradado azul */
    color: #fff;
    border-radius: 15px;
    padding: 30px 20px;
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
  }

  /* Número principal */
  .stat-info h3 {
    font-size: 3rem;
    margin: 0;
    font-weight: 700;
  }

  .stat-info p {
    font-size: 1.1rem;
    margin-top: 5px;
    font-weight: 500;
  }

  /* Círculo */
  .stat-circle {
    position: relative;
    width: 100px;
    height: 100px;
    margin-top: 20px;
  }

  .stat-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }

  .stat-circle circle {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
  }

  .stat-circle .bg {
    stroke: rgba(255, 255, 255, 0.2);
  }

  .stat-circle .progress {
    stroke: #fff;
    stroke-dasharray: 251;
    stroke-dashoffset: 251;
    transition: stroke-dashoffset 1.5s ease;
  }

  .stat-circle .counter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 1.2rem;
  }

  /* Responsivo */
  @media (max-width: 768px) {
    .stats-section {
      gap: 20px;
    }

    .stat-card {
      width: 180px;
      padding: 25px 15px;
    }

    .stat-info h3 {
      font-size: 2.2rem;
    }

    .stat-info p {
      font-size: 1rem;
    }

    .stat-circle {
      width: 90px;
      height: 90px;
    }

    .stat-circle .percentage {
      font-size: 1rem;
    }
  }


  /* ===== Sección About Card ===== */
  .about-card {
    font-family: var(--fuente-principal, system-ui, sans-serif);
    background: var(--gris-claro);
    padding: clamp(2rem, 4vw, 4rem) 1rem;
  }

  .about-card__wrap {
    max-width: 900px;
    /* 🔹 puedes alargar la card de imagen a lo ancho */
    margin-inline: auto;
  }

  .about-card__media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
    aspect-ratio: 4/3;
    /* 🔹 imagen más panorámica */
    background: var(--panel);
  }

  .about-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* fill sin deformar */
    object-position: center;
    transition: transform .4s ease;
    scale: 1.0;
  }

  .about-card__media:hover img {
    transform: scale(1.02);
  }

  /* Overlay sutil para legibilidad */
  .about-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--negro) 10%, transparent) 0%,
        color-mix(in srgb, var(--negro) 22%, transparent) 100%);
  }

  /* ===== Card de texto flotante ===== */
  .about-card__content {
    position: absolute;
    bottom: 1.25rem;
    left: 1.25rem;
    max-width: 620px;
    /* 🔹 card de texto más pequeño */
    background: color-mix(in srgb, var(--panel) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--borde) 70%, transparent);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
  }

  .about-card__title {
    margin: 0 0 .4rem;
    font-size: clamp(1.2rem, 1vw + 1rem, 1.6rem);
    color: var(--azul);
  }

  .about-card__title::after {
    content: "";
    display: block;
    height: 3px;
    width: 50px;
    margin-top: .3rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--azul), color-mix(in srgb, var(--vino) 30%, transparent));
  }

  .about-card__content p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--ink);
  }

  @media (max-width: 640px) {
    .about-card__content {
      position: absolute;
      /* sigue sobrepuesto */
      inset: auto 0 0 0;
      /* franja inferior a lo ancho */
      max-width: none;
      /* ocupa el ancho del contenedor */
      border-radius: 0;
      /* franja limpia */
      border: 0;
      /* quita el borde para mobile */
      padding: clamp(.85rem, 4vw, 1.1rem);
      background: color-mix(in srgb, var(--panel) 48%, transparent);
      /* un poco más denso que 55% */
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);

    }

    .about-card__title::after {
      width: 44px;
    }

    /* detalle sutil en móvil */
  }



  /*SECCION CONTACTO*/

  .contacto-lts {
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    padding: 60px 20px;
    text-align: center;
  }

  .logo-contacto img {
    max-width: 180px;
    margin-bottom: 25px;
  }

  .contacto-titulo {
    font-size: 2.2rem;
    color: #1a1a1a;
    margin-bottom: 10px;
  }

  .contacto-subtitulo {
    color: #555;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 50px auto;
  }

  /* Grid de contacto */
  .contacto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  /* Cada ítem */
  .contacto-item {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .contacto-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  }

  .contacto-item .icono {
    font-size: 2rem;
    color: var(--rojo-vino);
    margin-bottom: 10px;
  }

  .contacto-item h3 {
    color: #1a1a1a;
    font-size: 1.3rem;
    margin-bottom: 8px;
  }

  .contacto-item p {
    margin: 4px 0;
  }

  .contacto-item a {
    color: #555;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .contacto-item a:hover {
    color: #ff6b00;
  }

  /* Responsivo */
  @media (max-width: 992px) {
    .contacto-grid {
      grid-template-columns: 1fr;
    }
  }


  /*MISION VISION VALORES*/

  .filosofia-empresa {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 60px 20px;
  }

  .filosofia-titulo {
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--rojo-vino);
  }

  .filosofia-subtitulo {
    text-align: center;
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 50px;
    font-weight: 800;
  }

  /* Contenedor principal en dos columnas */
  .filosofia-contenido {
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    align-items: center;
    gap: 40px;
  }

  /* Tarjetas */
  .filosofia-textos {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .filosofia-card {
    background: white;
    border-radius: 15px;
    padding: 20px;
    text-align: justify;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .filosofia-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }

  .filosofia-card .icono {
    font-size: 2.5rem;
    color: var(--azul);
    margin-bottom: 10px;
  }

  .filosofia-card h3 {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: var(--rojo-vino);
  }

  .filosofia-card p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
  }

  /* Imagen */
  .filosofia-imagen img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    object-fit: cover;
  }

  .valores-parrafo{
    font-weight: 600;
  }

  /* ==== VALORES PREMIUM ==== */
  .valores-premium {
    background: #fff;
    border-left: 6px solid var(--rojo-vino); /* franja corporativa */
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .valores-premium:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  }

  .valores-premium .icono {
    font-size: 3rem;
    color: var(--rojo-vino);
    margin-bottom: 10px;
  }

  .valores-premium h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--azul);
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .valores-premium .intro-texto {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 25px;
    font-style: italic;
  }

  /* Grid elegante para los valores */
  .valores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
  }

  .valor-item {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
  }

  .valor-item i {
    font-size: 1.6rem;
    color: var(--rojo-vino);
    margin-bottom: 8px;
  }

  .valor-item span {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    color: #333;
  }

  .valor-item:hover {
    background: var(--azul);
    color: #fff;
  }

  .valor-item:hover i,
  .valor-item:hover span {
    color: #fff;
  }

  .valor-item p {
    font-size: 0.9rem;
    color: #666;
    margin-top: 8px;
    line-height: 1.4;
  }

  .valor-item:hover p {
    color: #f1f1f1;
  }

  .valores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 20px;
    justify-items: center; /* centra los items */
  }

  .valor-item {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 260px; /* controla ancho máximo de cada tarjeta */
  }

  /* Responsivo: en pantallas medianas */
  @media (max-width: 992px) {
    .valores-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    }
  }

  /* Responsivo: en móviles */
  @media (max-width: 576px) {
    .valores-grid {
      grid-template-columns: 1fr; /* 1 columna */
    }
  }



  /* Responsivo */
  @media (max-width: 992px) {
    .filosofia-contenido {
      grid-template-columns: 1fr;
      text-align: center;
    }

    .filosofia-textos {
      align-items: center;
    }

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


  /*SECCION SERVICIOS*/

  /* Encabezado Servicios */
  .servicios-encabezado {
    background-color: white;
    padding: 30px 2px;
    text-align: center;
  }

  .servicios-encabezado h2 {
    font-size: 48px;
    color: var(--azul);
    /* Dorado */
    margin: 0;
    font-weight: bold;
    letter-spacing: 1px;
  }

  /* Lista de servicios */
  .servicios-lista {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    padding: 40px 20px;
    background-color: var(--verde);
    flex-wrap: wrap;
  }

  .servicio {
    text-align: center;
    max-width: 400px;
  }

  .servicio img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    height: 400px;
    /* altura uniforme */
    object-fit: cover;
  }

  .servicio h3 {
    margin-top: 15px;
    font-size: 40px;
    color: white;
    font-weight: 600;
    text-decoration: underline;
  }

  /* Título UNIDADES */


  .flota-hero {
    background: var(--bg);
    padding: 72px 20px;
  }

  .container-xxl {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* Header */
  .flota-titulo {
    text-align: center;
    font-size: clamp(2rem, 3.2vw, 3rem);
    color: var(--vino);
    font-weight: 800;
    margin: 0 0 6px;
  }

  .flota-subtitulo {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 40px;
    color: #444;
    font-size: 1.08rem;
    line-height: 1.7;
  }

  /* Fila de unidad - layout editorial */
  .unidad-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    /* imagen más grande */
    gap: 28px;
    align-items: stretch;
    margin-bottom: 32px;
  }

  .unidad-row.invert {
    grid-template-columns: 1fr 1.2fr;
  }

  .unidad-row.invert .unidad-media {
    order: 2;
  }

  .unidad-row.invert .unidad-panel {
    order: 1;
  }

  /* Imagen grande */
  .unidad-media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
    background: #eef2f7;
    min-height: 340px;
    /* altura generosa */
  }

  .unidad-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    transition: transform .7s ease;
  }

  .unidad-media:hover img {
    transform: scale(1.06);
  }

  /* Cinta/leyenda en imagen */
  .unidad-leyenda {
    position: absolute;
    left: 16px;
    bottom: 16px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: .2px;
    backdrop-filter: blur(2px);
  }

  /* Panel de contenido */
  .unidad-panel {
    background: var(--panel);
    border: 1px solid var(--borda);
    border-radius: 16px;
    padding: 22px 22px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .06);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .unidad-titulo {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    font-weight: 800;
  }

  .unidad-desc {
    margin: 0 0 12px;
    color: var(--muted);
    line-height: 1.7;
  }

  .unidad-bullets {
    margin: 0 0 14px;
    padding-left: 18px;
    color: #384150;
  }

  .unidad-bullets li {
    margin: 6px 0;
  }

  /* Chips/tags */
  .unidad-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .unidad-tags span {
    font-size: .82rem;
    font-weight: 700;
    border: 1px dashed var(--vino);
    color: var(--vino);
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff7f9;
  }

  /* CTA */
  .flota-cta {
    margin-top: 8px;
    background: linear-gradient(90deg, rgba(0, 94, 146, .06), rgba(128, 0, 32, .06));
    border: 1px solid #ececec;
    border-radius: 18px;
    padding: 22px;
    text-align: center;
  }

  .flota-cta h4 {
    margin: 0 0 6px;
    color: #1a1a1a;
  }

  .flota-cta p {
    margin: 0 0 12px;
    color: #6b7280;
  }

  .btn-flota {
    display: inline-block;
    padding: 12px 18px;
    background: var(--vino);
    color: #fff;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: background .25s ease, transform .1s ease;
  }

  .btn-flota:hover {
    background: #a00030;
  }

  .btn-flota:active {
    transform: translateY(1px);
  }


  .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
  }
  .modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    max-width: 400px;
    margin: auto;
  }
  .cerrar {
    float: right;
    font-size: 20px;
    cursor: pointer;
  }
  .modal-btn {
    display: block;
    margin: 10px 0;
    padding: 10px;
    background: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 6px;
  }
  .modal-btn:hover {
    background: #0056b3;
  }




  /* Responsivo */
  @media (max-width: 1100px) {
    .unidad-media {
      min-height: 300px;
    }
  }

  @media (max-width: 900px) {

    .unidad-row,
    .unidad-row.invert {
      grid-template-columns: 1fr;
      /* apilar */
    }

    .unidad-row.invert .unidad-media,
    .unidad-row.invert .unidad-panel {
      order: initial;
    }

    .unidad-media {
      min-height: 260px;
    }
  }

  @media (max-width: 560px) {
    .flota-hero {
      padding: 56px 16px;
    }

    .unidad-panel {
      padding: 18px;
    }

    .unidad-media {
      min-height: 220px;
    }
  }


  /*ALMACENAJE*/

  .almacenaje-lts {
    background: #f8f9fa;
    padding: 60px 20px;
    text-align: center;
  }

  .almacenaje-titulo {
    font-size: 2.5rem;
    color: #1a1a1a;
    margin-bottom: 10px;
  }

  .almacenaje-subtitulo {
    color: #555;
    font-size: 1.1rem;
    margin-bottom: 40px;
  }

  /* Grid */
  .almacenaje-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }

  /* Contenedor */
  .almacenaje-item {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(30px);
  }

  .almacenaje-item.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .almacenaje-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  }

  /* Imagen */
  .almacenaje-img {
    height: 300px;
    overflow: hidden;
  }

  .almacenaje-img img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.4s ease;
  }

  .almacenaje-item:hover .almacenaje-img img {
    transform: scale(1.05);
  }

  .almacenaje-item h3 {
    font-size: 1.3rem;
    color: var(--azul);
    margin: 15px 0 10px;
  }

  .almacenaje-item p {
    font-size: 0.95rem;
    color: #555;
    padding: 0 15px 20px;
  }

  /* Responsivo */
  @media (max-width: 992px) {
    .almacenaje-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

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

  /* LOGROS */

  .logros-lts {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #fff;
  }

  /* Contenedor principal */
  .container-logros {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-height: 400px;
    box-sizing: border-box;
  }

  /* Columna de imagen con difuminado interno */
  .logros-img {
    position: relative;
    background:
      linear-gradient(to right, rgba(0, 67, 108, 0.2) 0%, rgba(0, 94, 146, 0.1) 300%),
      url('../img/logros/certificacion.png') center/cover no-repeat;
    border-radius: 10px 0 0 10px;
    min-height: 300px;
    /* altura mínima flexible */
  }

  .logros-img2 {
    position: relative;
    background:
      linear-gradient(to right, rgba(0, 67, 108, 0.2) 0%, rgba(0, 94, 146, 0.1) 300%),
      url('../img/logros/LOM.png') center/cover no-repeat;
    border-radius: 10px 0 0 10px;
    min-height: 300px;
    /* altura mínima flexible */
  }

  .logros-img2::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 67, 108, 0) 0%, #005e92 80%);
  }

  /* Difuminado hacia la columna de texto */
  .logros-img::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 67, 108, 0) 0%, #005e92 80%);
  }

  /* Columna de texto */
  .logros-texto {
    background-color: #005e92;
    color: #fff;
    padding: 40px 30px;
    /* padding lateral ajustado */
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Tipografía */
  .logros-texto h3 {
    font-size: 3rem;
    margin-bottom: 15px;
    color: white;
     justify-content: justify;
  }

  .ver-certificado {
    color: white;
  }

  .logros-texto p {
    font-size: 1.3rem;
    margin-bottom: 20px;
    line-height: 1.5;
  }



  /* Encabezado de la sección */
  .logros-encabezado {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    color: white;
  }


  /* Responsivo */
  @media (max-width: 1024px) {
    .logros-texto {
      padding: 30px 20px;
    }

    .logros-texto h3 {
      font-size: 1.8rem;
    }
  }

  @media (max-width: 768px) {
    .container-logros {
      grid-template-columns: 1fr;
      padding: 0 15px;
      gap: 15px;
    }

    .logros-img {
      height: 250px;
      background-position: center;
    }

    .logros-texto {
      padding: 20px 15px;
    }

    .logros-texto h3 {
      font-size: 1.5rem;
    }

    .logros-texto p {
      font-size: 0.9rem;
    }
  }

  /* Columna de imagen derecha con difuminado hacia la izquierda */
  .logros-img.derecha {
    position: relative;
    background:
      linear-gradient(to left, rgba(0, 67, 108, 0.2) 0%, rgba(0, 94, 146, 0.1) 300%),
      /* difuminado sobre la imagen */
      url('../img/logros/REPSE.png') center/cover no-repeat;
    border-radius: 0 10px 10px 0;
    min-height: 500px;
  }



  /* Difuminado hacia la columna de texto izquierda */
  .logros-img.derecha::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 67, 108, 0) 0%, #005e92 80%);
  }

  /* Columna de texto izquierda con borde redondeado al inicio */
  .logros-texto.izquierda {}


  /* ====== MÓVIL: sin difuminados y apilado correcto ====== */
  @media (max-width: 768px) {

    /* 1) Apilar en una columna: imagen primero, texto después */
    .container-logros {
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 12px;
      padding: 0 12px;
    }

    .container-logros>.logros-img,
    .container-logros>.logros-img2,
    .container-logros>.logros-img.derecha {
      order: 0;
    }

    .container-logros>.logros-texto {
      order: 1;
    }

    /* 2) Quitar TODOS los difuminados (::after) */
    .logros-img::after,
    .logros-img2::after,
    .logros-img.derecha::after {
      content: none !important;
      display: none !important;
    }

    /* 3) Quitar la capa de gradiente del background y dejar SOLO la imagen */
    .logros-img {
      background: url('../img/logros/certificacion.png') center/cover no-repeat !important;
    }

    .logros-img2 {
      background: url('../img/logros/LOM.png') center/cover no-repeat !important;
    }

    .logros-img.derecha {
      background: url('../img/logros/REPSE.png') center/cover no-repeat !important;
    }

    /* 4) Radios coherentes (imagen arriba, texto abajo) */
    .logros-img,
    .logros-img2,
    .logros-img.derecha {
      height: 230px;
      /* ajusta si la necesitas más alta/baja */
      min-height: 230px;
      border-radius: 12px 12px 0 0 !important;
    }

    .logros-texto {
      border-radius: 0 0 12px 12px;
      padding: 20px 16px;
    }

    /* 5) Tipografía móvil */
    .logros-texto h3 {
      font-size: 1.35rem;
      margin-bottom: 10px;
    }

    .logros-texto p {
      font-size: 1rem;
      margin-bottom: 12px;
    }
  }

  @media (max-width: 768px) {
    .espaciador2 {
      display: none !important;
    }
  }


  /*ATRACCIÓN DE TALENTO**/
  .talento {
    font-family: var(--fuente-principal);
    padding: 40px 20px;
    background-color: var(--gris-claro);
    text-align: center;
  }

  .talento-titulo {
    font-size: 2.5rem;
    color: var(--rojo-vino);
    font-weight: bold;
    margin-bottom: 30px;
  }

  /* Banner con fondo de imagen */
  .talento-banner {
    background: linear-gradient(var(--azuldifuminado), var(--azuldifuminado)),
      url('../img/vacantes/Vacantes.png') center/cover no-repeat;
    padding: 50px 20px;
    border-radius: 10px;
    margin-bottom: 40px;
  }

  .talento-banner h3 {
    color: var(--blanco);
    font-size: 3rem;
    font-weight: bold;
  }

  .sub {
    font-size: 4rem;

  }

  /* Cards de vacantes */
  .talento-vacantes {
    margin-top: 10%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 50px;
  }

  .talento-card {
    background: var(--blanco);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }

  .talento-card:hover {
    transform: translateY(-5px);
  }

  .talento-card img {
    width: 100%;
    height: 260px;
    object-fit: fill;
  }

  .talento-card h4 {
    font-size: 1.3rem;
    color: var(--azul);
    margin: 15px;
  }

  .btn-ver-mas {
    display: inline-block;
    margin: 0 15px 20px;
    padding: 10px 20px;
    background-color: var(--rojo-encendido);
    color: var(--blanco);
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease;
  }

  .btn-ver-mas:hover {
    background-color: var(--rojo-vino);
  }
  /* Contenedor principal */
  .talento-slider {
    position: relative;
    overflow: hidden;
    max-width: 100%;
  }

  /* Contenedor de cards (slider en fila) */
  .talento-vacantes {
    display: flex;
    transition: transform 0.4s ease;
    gap: 20px;
    padding: 0 10px;
  }

  /* Card base */
  .talento-card {
    background: var(--blanco);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
    min-width: calc(100% / 3 - 20px);
    flex: 0 0 calc(100% / 3 - 20px);
  }

  .talento-card:hover {
    transform: translateY(-5px);
  }

  .talento-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
  }

  .talento-card h4 {
    font-size: 1.3rem;
    color: var(--azul);
    margin: 15px;
  }

  .btn-ver-mas {
    display: inline-block;
    margin: 0 15px 20px;
    padding: 10px 20px;
    background-color: var(--rojo-encendido);
    color: var(--blanco);
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease;
  }

  .btn-ver-mas:hover {
    background-color: var(--rojo-vino);
  }

  /* Botones de navegación */
  .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
  }

  .slider-btn.prev {
    left: 10px;
  }

  .slider-btn.next {
    right: 10px;
  }

  /* Responsivo */
  @media (max-width: 1024px) {
    .talento-card {
      min-width: calc(100% / 2 - 15px);
      flex: 0 0 calc(100% / 2 - 15px);
    }
  }

  @media (max-width: 768px) {
    .talento-card {
      min-width: 90%;
      flex: 0 0 90%;
    }
  }






  @media (min-width: 1400px) {
    .talento-card img {
    width: 100%;
    height: 300px;
    object-fit: fill;
  }

  }


  /* SECCIÓN SOCIOS COMERCIALES */
  .seccion-socios_comerciales {
    padding: 80px 20px;
    background: #f4f6f8;
    text-align: center;
  }

  /* Título */
  .socios-titulo {
    font-size: 3rem;
    color: #800020;
    font-weight: 700;
    margin-bottom: 30px;
  }

  /* Imagen arriba */
  .socios-imagen {
    margin-bottom: 40px;
  }

  .socios-imagen img {
    max-width: 350px;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  /* Grid */
  .socios-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    background: rgba(0, 94, 146, 0.85);
    padding: 35px 20px;
    border-radius: 15px;
    color: #fff;
    align-items: flex-start;
  }

  /* Columna izquierda */
  .socios-info {
    flex: 1 1 350px;
    text-align: justify;
  }

  .socios-grid p {
    text-align: justify;
    font-size: 1.3rem;
    line-height: 1.6;
    font-weight: 500;
  }

  /* Columna de requisitos persona fisica */
  .socios-fisica {
    flex: 1 1 350px;
    text-align: justify;
  }

  .socios-fisica h3{
    color: #fff;
    text-align: center;
    background: #800020;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  .socios-fisica{
    margin-bottom: 20px;
    font-size: 1.3rem;
    line-height: 1.6;
    font-weight: 500;
  }

  .socios-moral{
    flex: 1 1 175px;
    text-align: justify;
    border-radius: 12px;
  }

  .socios-moral h3{
    color: #fff;
    text-align: center;
    background: #800020;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  /* Lista de requisitos*/
  .lista-requi{
    list-style: none;
    
    padding: 0;
  }

  .lista-requi li{
    background: #f9f9f9;
    color: #000;
    margin-bottom: 8px;
    padding: 10px 15px;
    border-left: 4px solid var(--rojo-vino);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  }

  /* Columna derecha */
  .socios-formulario {
    flex: 1 1 350px;
    background: #fff;
    border-radius: 12px;
    padding: 30px 20px;
    color: #000;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    /*margin-top: 176px;*/
  }

  .socios-formulario form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .socios-formulario input,
  .socios-formulario textarea {
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
  }

  .socios-formulario button {
    padding: 15px;
    background-color: #800020;
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .socios-formulario button:hover {
    background-color: #a00030;
  }

  .socios-centro{
    flex: 1 1 700px;
    text-align: justify;
    background: #fff;
    border-radius: 10px;
  }

  /* Responsivo */
  @media (max-width: 992px) {
    .socios-grid {
      flex-direction: column;
      text-align: center;
    }

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

  /*DESCRIPCION VACANTE*/



  /* ===== Vacante: layout + theme ===== */
  #vacante {
    font-family: var(--fuente-principal, system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
    color: var(--ink, #1a1a1a);
    background: var(--bg, #f5f7fa);
    padding: clamp(1.5rem, 2vw + 1rem, 3rem) 1rem;
  }

  .vacante-wrap {
    max-width: 1100px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 1.5vw, 2rem);
  }

  /* Desktop: aside + main */
  @media (min-width: 960px) {
    .vacante-wrap {
      grid-template-columns: 320px 1fr;
      align-items: start;
    }
  }

  /* ===== Aside (sticky en desktop) ===== */
  .vacante-aside {
    position: relative;
    background: var(--panel, #ffffff);
    border: 1px solid var(--borde, #e6e7eb);
    border-radius: 16px;
    padding: 1.25rem 1.25rem 1.5rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .02), 0 8px 24px rgba(0, 0, 0, .05);
  }

  @media (min-width: 960px) {
    .vacante-aside {
      position: sticky;
      top: 24px;
    }
  }

  .vacante-title {
    font-size: clamp(1.4rem, 1.2vw + 1.1rem, 2rem);
    line-height: 1.2;
    margin: 0 0 .5rem;
    color: var(--azul, #005e92);
  }

  .vacante-intro {
    margin: 0 0 .75rem;
    color: var(--muted, #6b7280);
  }

  .vacante-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    margin: .25rem 0 0;
    list-style: none;
  }

  .vacante-meta li {
    font-size: .9rem;
    color: var(--azul, #005e92);
    background: color-mix(in srgb, var(--azul, #005e92) 8%, #fff);
    border: 1px solid var(--borde, #e6e7eb);
    border-radius: 999px;
    padding: .35rem .65rem;
  }

  /* ===== Main ===== */
  .vacante-main {
    display: grid;
    gap: clamp(1rem, 1.2vw, 1.5rem);
  }

  /* ===== Band (no-cards; secciones con head + línea) ===== */
  .vacante-band {
    background: var(--panel, #ffffff);
    border: 1px solid var(--borde, #e6e7eb);
    border-radius: 16px;
    padding: 1.25rem;
  }

  .band-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
  }

  .band-head h3 {
    margin: 0;
    font-size: clamp(1.05rem, .4vw + 1rem, 1.25rem);
    color: var(--vino, #8a1726);
    letter-spacing: .2px;
  }

  .band-line {
    height: 1px;
    width: 100%;
    background:
      linear-gradient(90deg,
        var(--vino, #8a1726),
        color-mix(in srgb, var(--vino, #8a1726) 30%, transparent) 40%,
        transparent);
    opacity: .6;
  }

  /* ===== Listas ===== */
  .list-check,
  .list-bullet {
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
  }

  .list-check li,
  .list-bullet li {
    list-style: none;
    position: relative;
    padding-left: 1.75rem;
    line-height: 1.45;
  }

  /* Check icon */
  .list-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .2rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 8px;
    border: 1px solid var(--borde, #e6e7eb);
    background:
      radial-gradient(circle at 50% 50%, var(--azul, #005e92) 55%, transparent 56%) center/.7rem .7rem no-repeat,
      conic-gradient(from 0deg, var(--ring, rgba(0, 94, 146, .15)) 0 360deg);
    box-shadow: inset 0 0 0 2px #fff;
  }

  /* Bullet */
  .list-bullet li::before {
    content: "";
    position: absolute;
    left: .2rem;
    top: .6rem;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--vino, #8a1726);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vino, #8a1726) 20%, #fff);
  }

  /* ===== Dropzone CV ===== */
  .cv-form {
    display: grid;
    gap: 1rem;
  }

  .dropzone {
    border: 2px dashed color-mix(in srgb, var(--azul, #005e92) 40%, var(--borde, #e6e7eb));
    border-radius: 16px;
    background:
      linear-gradient(180deg, #fff, color-mix(in srgb, var(--azul, #005e92) 2%, #fff));
    padding: clamp(1rem, 3vw, 1.5rem);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  }

  .dropzone:focus-visible {
    box-shadow: 0 0 0 6px var(--ring, rgba(0, 94, 146, .15));
    border-color: var(--azul, #005e92);
  }

  .dropzone[aria-dropeffect="copy"],
  .dropzone.is-dragover {
    border-color: var(--azul, #005e92);
    transform: translateY(-1px);
    box-shadow: 0 0 0 6px var(--ring, rgba(0, 94, 146, .15));
  }

  .dropzone-input {
    position: absolute;
    inset: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .dropzone-ui {
    display: grid;
    justify-items: center;
    gap: .35rem;
    text-align: center;
    color: var(--muted, #6b7280);
  }

  .dropzone-ui svg {
    color: var(--azul, #005e92);
  }

  .dz-title {
    font-weight: 600;
    color: var(--ink, #1a1a1a);
    margin: .1rem 0;
  }

  .dz-accent {
    color: var(--azul, #005e92);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .dz-file {
    font-size: .9rem;
    color: var(--muted, #6b7280);
    margin-top: .2rem;
  }

  /* ===== Botón ===== */
  .btn-send {
    justify-self: start;
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--vino, #8a1726) 65%, var(--borde, #e6e7eb));
    background: linear-gradient(180deg, var(--rojo-encendido, #e4032e), color-mix(in srgb, var(--rojo-encendido, #e4032e) 90%, #000 6%));
    color: var(--blanco, #ffffff);
    padding: .7rem 1rem;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
    transition: transform .06s ease, box-shadow .12s ease, filter .12s ease;
    box-shadow: 0 8px 20px rgba(228, 3, 46, .2);
  }

  .btn-send:hover {
    filter: saturate(1.05);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(228, 3, 46, .28);
  }

  .btn-send:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(228, 3, 46, .22);
  }

  .btn-send:focus-visible {
    outline: none;
    box-shadow: 0 0 0 6px var(--ring, rgba(0, 94, 146, .15)), 0 8px 20px rgba(228, 3, 46, .22);
  }

  /* ===== Textos secundarios ===== */
  .cv-privacy {
    font-size: .9rem;
    color: var(--muted, #6b7280);
    margin: 0;
  }

  .cv-error {
    color: var(--rojo-encendido, #e4032e);
    font-weight: 600;
    margin: 0;
  }

  /* ===== Animaciones "sr" ===== */
  @media (prefers-reduced-motion: no-preference) {
    .sr[data-anim="slide-up"] {
      opacity: 0;
      transform: translateY(12px);
      animation: slideUp .6s ease forwards;
      animation-delay: calc((var(--sr-delay, 0)) * 1ms);
    }

    .sr[data-anim="fade"] {
      opacity: 0;
      animation: fadeIn .6s ease forwards;
      animation-delay: calc((var(--sr-delay, 0)) * 1ms);
    }

    @keyframes slideUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeIn {
      to {
        opacity: 1;
      }
    }
  }

  /* Mapea data-delay -> variable CSS para poder animar por secciones */
  .vacante-band[data-delay] {
    --sr-delay: attr(data-delay integer, 0);
  }

  /* ===== Dark-ish mode opcional (si tu sitio lo usa) ===== */
  @media (prefers-color-scheme: dark) {
    #vacante {
      background: #0b0e12;
      color: #e6e8eb;
    }

    .vacante-aside,
    .vacante-band {
      background: #0f1318;
      border-color: #1c232d;
    }

    .vacante-meta li {
      background: rgba(0, 94, 146, .16);
      border-color: #223042;
      color: #c8e6ff;
    }

    .dropzone {
      background: linear-gradient(180deg, #0f1318, #0f1318);
      border-color: #223042;
    }

    .dz-title {
      color: #e6e8eb;
    }

    .dz-file,
    .vacante-intro,
    .cv-privacy {
      color: #9aa3ad;
    }
  }

  /* ===== Vacante: layout + theme ===== */
  #vacante {
    font-family: var(--fuente-principal, system-ui, sans-serif);
    color: var(--ink);
    background: var(--gris-claro);
    padding: clamp(1.5rem, 2vw + 1rem, 3rem) 1rem;
  }

  .vacante-aside {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 16px;
    padding: 1.25rem 1.25rem 1.5rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .02), 0 8px 24px rgba(0, 0, 0, .05);
  }

  .vacante-title {
    color: var(--azul);
  }

  .vacante-intro {
    color: var(--muted);
  }

  .vacante-meta li {
    color: var(--azul);
    background: color-mix(in srgb, var(--azul) 8%, var(--blanco));
    border: 1px solid var(--borde);
  }

  .vacante-band {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 16px;
    padding: 1.25rem;
  }

  .band-head h3 {
    color: var(--vino);
  }

  .band-line {
    background: linear-gradient(90deg,
        var(--vino),
        color-mix(in srgb, var(--vino) 30%, transparent) 40%,
        transparent);
  }

  .list-check li::before {
    border: 1px solid var(--borde);
    background:
      radial-gradient(circle at 50% 50%, var(--azul) 55%, transparent 56%) center/.7rem .7rem no-repeat,
      conic-gradient(from 0deg, var(--ring) 0 360deg);
  }

  .list-bullet li::before {
    background: var(--vino);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vino) 20%, var(--blanco));
  }

  .dropzone {
    border: 2px dashed color-mix(in srgb, var(--azul) 40%, var(--borde));
    background: linear-gradient(180deg, var(--blanco), color-mix(in srgb, var(--azul) 2%, var(--blanco)));
  }

  .dropzone:focus-visible {
    box-shadow: 0 0 0 6px var(--ring);
    border-color: var(--azul);
  }

  .dropzone[aria-dropeffect="copy"],
  .dropzone.is-dragover {
    border-color: var(--azul);
    box-shadow: 0 0 0 6px var(--ring);
  }

  .dropzone-ui {
    color: var(--muted);
  }

  .dropzone-ui svg {
    color: var(--azul);
  }

  .dz-title {
    color: var(--ink);
  }

  .dz-accent {
    color: var(--azul);
  }

  .dz-file {
    color: var(--muted);
  }

  .btn-send {
    border: 1px solid color-mix(in srgb, var(--vino) 65%, var(--borde));
    background: linear-gradient(180deg, var(--rojo-encendido), color-mix(in srgb, var(--rojo-encendido) 90%, var(--negro) 6%));
    color: var(--blanco);
    box-shadow: 0 8px 20px rgba(228, 3, 46, .2);
  }

  .btn-send:hover {
    box-shadow: 0 10px 24px rgba(228, 3, 46, .28);
  }

  .btn-send:active {
    box-shadow: 0 4px 12px rgba(228, 3, 46, .22);
  }

  .btn-send:focus-visible {
    box-shadow: 0 0 0 6px var(--ring), 0 8px 20px rgba(228, 3, 46, .22);
  }

  .cv-privacy {
    color: var(--muted);
  }

  .cv-error {
    color: var(--rojo-encendido);
  }



  /*DEJA TU INFORMACION*/
  /* ===== Lead: layout ===== */
  #lead-candidato {
    font-family: var(--fuente-principal, system-ui, sans-serif);
    color: var(--ink);
    background: var(--gris-claro);
    padding: clamp(1.5rem, 2vw + 1rem, 3rem) 1rem;
  }

  .lead-wrap {
    max-width: 1100px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 1.5vw, 2rem);
  }

  @media (min-width: 960px) {
    .lead-wrap {
      grid-template-columns: 320px 1fr;
      align-items: start;
    }
  }

  /* ===== Aside ===== */
  .lead-aside {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
  }

  .lead-title {
    margin: 0 0 .5rem;
    font-size: clamp(1.3rem, 1vw + 1rem, 1.8rem);
    color: var(--azul);
  }

  .lead-intro {
    margin: 0 0 .75rem;
    color: var(--muted);
  }

  .lead-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .5rem;
  }

  .lead-benefits li {
    position: relative;
    padding-left: 1.25rem;
  }

  .lead-benefits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55rem;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--vino);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vino) 20%, var(--panel));
  }

  /* ===== Form ===== */
  .lead-form {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: 16px;
    padding: clamp(1rem, 1.2vw, 1.5rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  @media (min-width: 720px) {
    .lead-form {
      grid-template-columns: 1fr 1fr;
    }

    .lead-form .field:nth-child(1),
    .lead-form .field:nth-child(2),
    .lead-form .field:last-of-type {
      grid-column: 1 / -1;
    }
  }

  .field {
    display: grid;
    gap: .4rem;
  }

  .field label {
    font-size: .95rem;
    font-weight: 600;
    color: var(--ink);
  }

  .field input {
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: .7rem .85rem;
    background: var(--panel);
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  .field input:focus-visible {
    border-color: var(--azul);
    box-shadow: 0 0 0 4px var(--ring);
  }

  /* ===== Dropzone ===== */
  .dropzone {
    border: 2px dashed color-mix(in srgb, var(--azul) 40%, var(--borde));
    border-radius: 12px;
    background: var(--panel);
    padding: clamp(1rem, 3vw, 1.5rem);
    text-align: center;
  }

  .dropzone-ui {
    display: grid;
    gap: .35rem;
    color: var(--muted);
  }

  .dropzone-ui svg {
    color: var(--azul);
  }

  .dz-title {
    font-weight: 600;
    color: var(--ink);
  }

  .dz-accent {
    color: var(--azul);
    text-decoration: underline;
  }

  /* ===== Botón ===== */
  .btn-send {
    border: 1px solid color-mix(in srgb, var(--vino) 65%, var(--borde));
    background: linear-gradient(180deg, var(--rojo-encendido), color-mix(in srgb, var(--rojo-encendido) 90%, var(--negro) 6%));
    color: var(--blanco);
    padding: .7rem 1rem;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .06s ease, box-shadow .12s ease, filter .12s ease;
    box-shadow: 0 6px 16px rgba(228, 3, 46, .2);
  }

  .btn-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(228, 3, 46, .28);
  }

  .btn-send:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(228, 3, 46, .22);
  }

  .lead-privacy {
    font-size: .85rem;
    color: var(--muted);
    margin: 0;
  }



  /* ==== BLOG BASE ==== */
  .blog-home {
    padding: 60px 20px;
    background: #f9f9f9;
    text-align: center;
  }

  .blog-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #005e92; /* azul corporativo */
  }

  .blog-subtitle {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 40px;
  }

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

  .blog-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    text-align: left;
    transition: transform 0.3s ease;
  }

  .blog-card:hover {
    transform: translateY(-6px);
  }

  .blog-card img {
    width: 100%;
    height: 340px;
    object-fit: cover;
  }

  .blog-content {
    padding: 20px;
  }

  .blog-content .category {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: bold;
    color: #a00030; /* vino */
    margin-bottom: 8px;
  }

  .blog-content h3 {
    font-size: 1.4rem;
    margin: 8px 0;
    color: #333;
  }

  .blog-content p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 16px;
  }

  .btn-read {
    display: inline-block;
    padding: 10px 16px;
    background: #005e92;
    color: #fff;
    font-size: 0.9rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease;
  }

  .btn-read:hover {
    background: #003d60;
  }

  .btn-read1 {
    display: inline-block;
    padding: 10px 16px;
    background: #19aeff;
    color: #fff;
    font-size: 0.9rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.3s ease;
  }

  .btn-read1:hover {
    background: #003d60;
  }

  /* ==== MODAL ==== */
  .modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(0,0,0,0.7);
    padding: 40px 20px;
  }

  .modal-content {
    background: #fff;
    margin: auto;
    padding: 30px;
    border-radius: 16px;
    max-width: 800px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    animation: fadeIn 0.4s ease;
  }

  .modal-content p{
    text-align: justify;
    line-break: auto;
  
  }

  .modal-content {
    text-align: center;
    line-break: auto;
  
  }

  .parrafo-blog-centrado{
      text-align: center !important;

  }

  .modal-content li  {
    text-align: justify;
    line-break: auto;
  }

  .modal-content img.article-img {
    width: 50%;
    margin: 20px 0;
    border-radius: 10px;
  }

  .close {
    float: right;
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    transition: color 0.3s ease;
  }

  .close:hover {
    color: #a00030;
  }

  /* Animación */
  @keyframes fadeIn {
    from {opacity: 0; transform: translateY(-20px);}
    to {opacity: 1; transform: translateY(0);}
  }

  @media (max-width: 768px) {
    .blog-card img {
    width: 100%;
    height: 300px;
    object-fit: fill;

    
  }
  .modal-content img.article-img {
    width: 80%;
    margin: 20px 0;
    border-radius: 10px;
  }
  }

  .modal-video-container {
      margin: 20px 0;
      width: 100%;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
  }

  .modal-video-container video {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  }


  .modal-lom {
      display: none;
      position: fixed;
      z-index: 2000; /* más alto por si tienes otros modales */
      left: 0; top: 0;
      width: 100%; height: 100%;
      background-color: rgba(0,0,0,0.6);
    }

    .modal-lom-content {
      position: relative;
      background: #fff;
      margin: 10% auto;
      padding: 20px;
      border-radius: 12px;
      width: 400px;
      max-width: 90%;
      text-align: center;
    }

    .modal-lom-content img {
      max-width: 100%;
      height: auto;
    }

    .cerrar-lom {
      position: absolute;
      top: 10px; right: 15px;
      font-size: 28px;
      font-weight: bold;
      color: #333;
      cursor: pointer;
    }


    /* ===========================
   HERO LOM SYSTEM LTS
=========================== */
.hero-lts-lom {
  position: relative;
  height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.hero-lts-lom .hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #005e92, #0079b8);
  background-size: cover;
  z-index: 0;
}

.hero-lts-lom .hero-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 20px;
}

.hero-lts-lom h1 {
  font-size: 60px;
  font-weight: 800;
  color: #fff;
}

.hero-lts-lom p {
  font-size: 20px;
  margin: 20px auto 35px;
  max-width: 650px;
  color: #e3e3e3;
}

.btn-hero-lts {
  display: inline-block;
  background: #fff;
  color: #005e92;
  padding: 12px 35px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-hero-lts:hover {
  background: #004a70;
  color: #fff;
}

/* ===========================
   INTRO SECCIÓN
=========================== */
.intro-lts {
  background: #ffffff;
  padding: 100px 0;
}

.intro-lts .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  flex-wrap: wrap;
}

.intro-text {
  flex: 1 1 50%;
}

.intro-text h2 {
  color: #005e92;
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 15px;
}

.intro-text p {
  color: #444;
  font-size: 18px;
  line-height: 1.8;
}

.intro-image {
  flex: 1 1 45%;
  text-align: center;
}

.intro-image img {
  max-width: 520px;
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
/* ===========================
   MÓDULOS DESTACADOS (5 módulos centrados)
=========================== */
.modules-lts {
  background: #f5f7fa;
  text-align: center;
  padding: 90px 0;
}

.modules-lts h2 {
  color: #005e92;
  font-weight: 800;
  font-size: 36px;
  margin-bottom: 10px;
}

.modules-lts .modules-subtext {
  color: #555;
  max-width: 700px;
  margin: 0 auto 60px;
  font-size: 17px;
  line-height: 1.6;
}

/* ✅ Cuadrícula con centrado de la última fila */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* tres columnas fijas */
  gap: 30px;
  justify-content: center;
  justify-items: center !important;
  max-width: 1100px;
  margin: 0 auto;
}

/* Cards */
.module-card {
  background: #fff;
  border-radius: 16px;
  padding: 35px 25px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 280px;
}

.module-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}

.module-card i {
  font-size: 42px;
  color: #0079b8;
  margin-bottom: 15px;
}

.module-card h3 {
  color: #005e92;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 19px;
}

.module-card p {
  color: #555;
  font-size: 15.5px;
  line-height: 1.6;
}

/* ===== Responsivo ===== */
@media (max-width: 991px) {
  .modules-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
  }
}

@media (max-width: 600px) {
  .modules-grid {
    grid-template-columns: 1fr;
  }
  .module-card {
    max-width: 100%;
  }
}




/* ===========================
   CTA FINAL
=========================== */
.cta-lts {
  background: linear-gradient(135deg, #005e92, #0079b8);
  color: #fff;
  padding: 100px 20px;
  text-align: center;
}

.cta-inner {
  max-width: 800px;
  margin: 0 auto;
}

.cta-inner h2 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 20px;
}

.cta-inner p {
  font-size: 18px;
  color: #e9e9e9;
  margin-bottom: 30px;
}

.btn-cta-lts {
  background: #fff;
  color: #005e92;
  padding: 12px 35px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-cta-lts:hover {
  background: #004a70;
  color: #fff;
}

/* ===========================
   RESPONSIVIDAD
=========================== */
@media (max-width: 991px) {
  .hero-lts-lom h1 {
    font-size: 42px;
  }
  .intro-lts .container {
    flex-direction: column;
    text-align: center;
  }
  .intro-text, .intro-image {
    flex: 1 1 100%;
  }
  .modules-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Responsivo ===== */
@media (max-width: 768px) {
  .modules-grid {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  .module-card {
    width: 90%;
    max-width: 320px;
  }
}


/* =====================================
   PANTALLA DE PRESENTACIÓN LTS
===================================== */
.intro-lts2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #001f3f, #0074d9);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  z-index: 9999;
  overflow: hidden;
  transition: opacity 1s ease, visibility 1s ease;
}

.intro-lts2.fade-out {
  opacity: 0;
  visibility: hidden;
}

.intro-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
}

.intro-content {
  position: relative;
  z-index: 2;
  color: #fff;
}

.intro-logo {
  width: 330px;
  height: auto;
  margin-bottom: 15px;
  animation: float 3s ease-in-out infinite;
}

.intro-nombre {
  font-size: 5.5rem;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.intro-tagline {
  font-size: 1.1rem;
  opacity: 0.9;
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* Responsivo */
@media (max-width: 768px) {
  .intro-nombre {
    font-size: 1.5rem;
  }
  .intro-logo {
    width: 100px;
  }
  .intro-tagline {
    font-size: 0.95rem;
  }
}



.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  width: 60px;
  height: 60px;
  background-color: #2dd14a;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s infinite;
  transition: background-color 0.3s ease;
}

.whatsapp-float:hover {
  background-color: #1ebe5d;
}

.whatsapp-float img {
  width: 35px;
  height: 35px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}