/* Variables CSS para colores */
    /* Variables CSS para colores - ACTUALIZADAS A PALETA CELESTE */
:root {
  --color-base: #e0f4ff;
  --color-acento: #005f87;
  --color-texto: #111;
  --color-destacado: #b3e5fc;
  --onda-color1: rgba(179, 229, 252, 0.2); /* Celeste más claro, ligeramente más opaco */
  --onda-color2: rgba(179, 229, 252, 0.1); /* Mismo celeste claro, más sutil */
}
/* Aquí seguirán los estilos existentes sin modificar, se mantienen intactos y armonizarán con los nuevos colores */
  section h1, article h1, nav h1, aside h1 {
    font-size: 2rem;
  }

    /* Reset básico y scroll suave */
    * {
      scroll-behavior: smooth;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

html {
  overflow-x: hidden;
  width: 100%;
}
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: var(--color-base);
  color: var(--color-texto);
  line-height: 1.6;
}

    /* Tipografías para títulos y texto */
    h1, h2, h3 {
      font-family: 'Cormorant Garamond', serif;
      margin-bottom: 0.5rem;
    }

    /* Estilos del encabezado fijo */
 header {
  position: sticky;
  top: 0;
  z-index: 2000; /* subido para que quede sobre cualquier elemento flotante */
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

    .logo {
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--color-acento);
      line-height: 1;
    }

    /* Estilos de navegación y efecto hover animado */
    nav {
      display: flex;
      gap: 1.5rem;
    }

    nav a {
      text-decoration: none;
      color: #333;
      font-weight: 500;
      position: relative;
      white-space: nowrap;
    }

    nav a::after {
      content: "";
      position: absolute;
      width: 0;
      height: 2px;
      background-color: var(--color-acento);
      left: 0;
      bottom: -4px;
      transition: width 0.3s;
    }

    nav a:hover::after {
      width: 100%;
    }

    /* Botón hamburguesa (oculto por defecto en desktop) */
    .menu-toggle {
      display: none;
      font-size: 1.8rem;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--color-acento);
      padding: 0.5rem;
    }

    /* Sección Hero principal */
    .hero {
      padding: 0 2rem 3rem;
      text-align: center;
      background: linear-gradient(to right, #2daeff, #2bd1ff);
      position: relative;
      z-index: 1;
      overflow: hidden; /* Asegura que las ondas no se salgan del hero */
    }

    /* Contenedor para las ondas SVG */
    .hero-ondas {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Las ondas ocupan todo el hero */
        overflow: hidden;
        z-index: 0; /* Asegura que las ondas estén detrás del contenido */
    }

    .hero-ondas svg {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-width: 1000px; /* Asegura que las ondas sean lo suficientemente grandes */
    }

    .hero-ondas .onda1 {
        fill: var(--onda-color1);
        animation: onda-movimiento 15s linear infinite alternate;
        transform-origin: bottom center; /* Para que la animación sea más natural */
    }

    .hero-ondas .onda2 {
        fill: var(--onda-color2);
        animation: onda-movimiento 20s linear infinite reverse; /* Movimiento inverso para la segunda onda */
        transform-origin: bottom center;
        opacity: 0.9; /* Ligeramente más tenue */
    }

    @keyframes onda-movimiento {
        0% { transform: translateX(-20%); }
        100% { transform: translateX(20%); }
    }


    .hero h1, .hero p, .hero button {
      position: relative; /* Asegura que el contenido esté por encima de las ondas */
      z-index: 1;
    }

    .hero h1 {
      font-size: 2.8rem;
      color: #3e3e3e;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .hero p {
      font-size: 1.2rem;
      color: #666;
      max-width: 600px;
      margin: 0 auto 2rem;
    }

    .hero button {
      background-color: var(--color-acento);
      color: white;
      border: none;
      padding: 1rem 2.2rem;
      border-radius: 6px;
      font-size: 1.05rem;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      transition: all 0.3s ease;
    }

    .hero button:hover {
      background-color: #005f87;
      transform: scale(1.04);
    }

    /* Estilos generales de sección */
    section {
      padding: 4rem 2rem;
      max-width: 100%;
      margin: auto;
      position: relative;
      z-index: 1;
    }

    .section-title {
      text-align: center;
      font-size: 2rem;
      color: #444;
      margin-bottom: 2rem;
    }
    
    /* Estilo específico para el título de cursos, heredando de section-title */
    .cursos-title {
        text-align: center;
        font-family: 'Cormorant Garamond', serif;
        font-size: 2.2rem;
        color: #5c4337;
        margin-bottom: 1rem;
    }
    
    .about img {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 1rem;
    }

    .about ul {
      list-style: none;
      padding: 0;
      font-size: 1.1rem;
      color: #444;
      margin-top: 1.5rem;
    }

    .about li::before {
      content: "✔ ";
      color: var(--color-acento);
    }

    /* Grid de servicios */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      margin-top: 2rem;
    }

    .service-card {
      background: white;
      border-radius: 12px;
      padding: 2rem;
      text-align: center;
      box-shadow: 0 3px 10px rgba(0,0,0,0.06);
      transition: transform 0.3s ease;
    }

    .service-card:hover {
      transform: scale(1.03);
    }

    .service-card i {
      font-size: 2rem;
      color: var(--color-acento);
      margin-bottom: 0.8rem;
    }

    /* Estilos de testimonios con animación */
    blockquote {
      font-style: italic;
      border-left: 4px solid #d4c1b8;
      padding-left: 1rem;
      margin: 1.5rem auto;
      max-width: 700px;
      color: #555;
    }

    /* Keyframes para la animación fadeIn */
    @keyframes fadeIn {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* Estilos de formulario de contacto */
    form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      max-width: 600px;
      margin: auto;
    }

    form label {
      font-weight: 500;
      color: #444;
    }

    input, textarea {
      padding: 0.9rem;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 1rem;
      width: 100%;
    }

    /* Estilo para el focus de inputs y textareas */
    input:focus, textarea:focus {
      outline: none;
      border-color: var(--color-acento);
      box-shadow: 0 0 0 3px rgba(141, 102, 88, 0.2);
    }

    /* Estilos del footer */
    footer {
      background-color: var(--color-destacado);
      text-align: center;
      padding: 2rem 1rem;
      font-size: 0.9rem;
      color: #666;
      position: relative;
      z-index: 1;
    }

    .redes a {
      color: var(--color-acento);
      margin: 0 0.6rem;
      font-size: 1.3rem;
      transition: color 0.3s;
    }

    .redes a:hover {
      color: #222;
    }

    /* Estilos para los modales (generalizados para ambos tipos) */
    .modal {
      display: none;
      position: fixed;
      z-index: 9999;
      padding-top: 60px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.6);
      animation: fadeInModal 0.3s ease-out;
    }

    @keyframes fadeInModal {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .modal-contenido {
      background-color: #fff;
      margin: auto;
      padding: 2rem;
      border-radius: 10px;
      max-width: 600px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      animation: slideInModal 0.4s ease-out;
      font-size: 1.05rem;
      color: #333;
      position: relative;
    }

    @keyframes slideInModal {
        from { transform: translateY(-50px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .modal-cerrar {
      color: #888;
      float: right;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
      position: absolute;
      top: 15px;
      right: 25px;
    }

    .modal-cerrar:hover,
    .modal-cerrar:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    .btn-inscripcion, .btn-modal-contacto, .btn-encuesta-nav {
      display: inline-block;
      margin-top: 1.5rem;
      background-color: var(--color-acento);
      color: white;
      padding: 0.8rem 1.5rem;
      border-radius: 6px;
      text-decoration: none;
      font-weight: 600;
      transition: background-color 0.3s ease, transform 0.2s ease;
      text-align: center;
    }

    .btn-inscripcion:hover, .btn-modal-contacto:hover, .btn-encuesta-nav:hover {
      background-color: #005f87;
      transform: translateY(-2px);
    }

    /* --- ESTILOS ESPECÍFICOS PARA EL DEMO DE AGENDAMIENTO --- */
    .agenda-pasos {
        margin-top: 1.5rem;
    }

    .agenda-pasos h3 {
        color: var(--color-acento);
        font-size: 1.4rem;
        margin-bottom: 1rem;
        text-align: center;
    }

    .agenda-input-group {
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .agenda-input-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: #555;
    }

    .agenda-input-group input[type="date"] {
        width: auto;
        padding: 0.8rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 1rem;
        cursor: pointer;
        display: inline-block;
    }

    .horarios-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.8rem;
        margin-top: 1rem;
        justify-content: center;
    }

    .horario-btn {
        background-color: #f0f0f0;
        border: 1px solid #ddd;
        padding: 0.8rem 0.5rem;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.95rem;
        color: #555;
        transition: background-color 0.3s, border-color 0.3s, color 0.3s;
        text-align: center;
    }

    .horario-btn:hover {
        background-color: #e5e5e5;
        border-color: #bbb;
    }

    .horario-btn.selected {
        background-color: var(--color-acento);
        color: white;
        border-color: var(--color-acento);
        font-weight: 600;
    }

    .agenda-final-message {
        margin-top: 2rem;
        padding: 1.5rem;
        background-color: #e8f5e8;
        border: 1px solid #c8e6c9;
        border-radius: 8px;
        text-align: center;
        color: #388e3c;
        font-weight: 500;
        display: none;
        animation: fadeIn 0.5s ease-out;
    }

    /* --- ESTILOS ESPECÍFICOS PARA EL DEMO DE ENCUESTA --- */
    .encuesta-step {
      display: none;
      animation: fadeIn 0.4s ease-out;
      padding-top: 1rem;
    }
    .encuesta-step.active {
      display: block;
    }
    .encuesta-step h3 {
      font-size: 1.3rem;
      color: var(--color-acento);
      margin-bottom: 1.2rem;
      text-align: center;
    }
    .encuesta-options label {
        display: flex;
        align-items: flex-start; /* MUY IMPORTANTE: Mantener en flex-start */
        margin-bottom: 1.2rem;
        font-size: 1.05rem;
        color: var(--color-texto);
        cursor: pointer;
        padding: 0.8rem;
        border: 1px solid #eee;
        border-radius: 8px;
        background-color: #fcfcfc;
        transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .encuesta-options input[type="radio"],
    .encuesta-options input[type="checkbox"] {
    margin-right: 1rem; /* Espacio a la derecha del radio/checkbox */
    transform: scale(1.2); /* Tamaño del radio/checkbox */
    accent-color: var(--color-acento); /* Color del radio/checkbox */

    /* NUEVOS CAMBIOS PARA LA ALINEACIÓN VERTICAL */
    /* Reajuste vertical usando flexbox directo en el input */
    display: inline-flex; /* Usamos inline-flex para mejor control */
    align-items: center; /* Centrar verticalmente el contenido del input (si tuviera) */
    justify-content: center; /* Centrar horizontalmente el contenido (si tuviera) */
    height: 1.25em; /* Aseguramos una altura fija para el input basada en el font-size del label */
    width: 1.25em; /* Aseguramos un ancho fijo */
    vertical-align: middle; /* CAMBIO IMPORTANTE: Alineación vertical estándar */
    /* Reiniciamos el margin-top para que vertical-align tome control */
    margin-top: 0;
    flex-shrink: 0; /* Evita que el radio button se encoja */
    }
    .encuesta-options input[type="text"] {
      width: calc(100% - 10px);
      padding: 0.6rem;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    .encuesta-nav-buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 2rem;
      gap: 1rem;
    }
    .encuesta-nav-buttons .btn-encuesta-nav {
      flex-grow: 1;
      margin-top: 0;
    }
    .encuesta-final-message {
      text-align: center;
      padding: 2rem;
      background-color: #e6f7ff;
      border: 1px solid #91d5ff;
      border-radius: 8px;
      color: #096dd9;
      font-weight: 500;
      margin-top: 2rem;
      display: none;
      animation: fadeIn 0.5s ease-out;
    }

    /* Animaciones al hacer scroll */
    .hidden-left {
      opacity: 0;
      transform: translateX(-100px);
      transition: opacity 1s ease-out, transform 1s ease-out;
    }

    .hidden-right {
      opacity: 0;
      transform: translateX(100px);
      transition: opacity 1s ease-out, transform 1s ease-out;
    }

    .hidden-up {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 1s ease-out, transform 1s ease-out;
    }

    .hidden-fade {
      opacity: 0;
      transition: opacity 1s ease-out;
    }

    .show {
      opacity: 1;
      transform: translateX(0) translateY(0);
    }

    /* Retrasos para elementos específicos, si quieres que aparezcan escalonadamente */
    .section-title.show, .cursos-title.show { transition-delay: 0.2s; }
    .about p.show, .about ul.show { transition-delay: 0.4s; }
    .service-card:nth-child(1).show { transition-delay: 0.2s; }
    .service-card:nth-child(2).show { transition-delay: 0.4s; }
    .service-card:nth-child(3).show { transition-delay: 0.6s; }
    .cursos-grid > div:nth-child(1).show { transition-delay: 0.2s; }
    .cursos-grid > div:nth-child(2).show { transition-delay: 0.4s; }
    .cursos-grid > div:nth-child(3).show { transition-delay: 0.6s; }
    blockquote.show { transition-delay: 0.2s; }
    blockquote:nth-child(2).show { transition-delay: 0.4s; }

    /* // Media Queries para Responsividad */
   @media (max-width: 768px) {
  header {
    padding: 1rem;
    flex-wrap: nowrap;
  }

  .logo {
    font-size: 1.4rem;
  }

  nav {
    display: none;
    flex-direction: column;
    background-color: white;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 1rem 0;
    border-top: 1px solid #eee;
    z-index: 1000;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  }

  nav.active {
    display: flex;
    max-height: 300px;
    opacity: 1;
    pointer-events: auto;
  }

  nav a {
    padding: 0.8rem 2rem;
    text-align: center;
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  .menu-toggle {
    display: block;
  }

  .hero {
    padding: 3rem 1.5rem;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  section {
    padding: 3rem 1.5rem;
  }

  .section-title,
  .cursos-title {
    font-size: 1.8rem;
  }

  .services-grid,
  .cursos-grid {
    grid-template-columns: 1fr;
  }

  .modal-contenido {
    padding: 1.5rem;
    width: 90%;
  }

  .floating-contact-btn {
    width: 55px;
    height: 55px;
    font-size: 1.3rem;
  }

  .contact-links-container {
    min-width: 180px;
    max-width: 90vw;
    padding: 10px 0;
    word-wrap: break-word;
    box-sizing: border-box;
  }

  .contact-link {
    padding: 6px 15px;
    font-size: 0.95rem;
  }
}

    @media (max-width: 480px) {
      .hero h1 {
        font-size: 1.8rem;
      }
      .hero button {
        padding: 0.8rem 1.5rem;
        font-size: 0.95rem;
      }
      .about::before {
        font-size: 1rem;
      }
      .modal-contenido {
        padding: 1rem;
      }
      .btn-inscripcion, .btn-modal-contacto, .btn-encuesta-nav {
        font-size: 0.9rem;
        padding: 0.7rem 1.2rem;
      }
    }

    /* ==== ESTILO UNIFICADO PARA SECCIONES NUEVAS ==== */

#formacion,
#clientes,
#filosofia,
#contacto-ampliado {
  background-color: #f0fbff; /* mismo tono que cursos y formatos */
  color: #333;
  padding: 4rem 2rem;
}

#formacion ul,
#formacion li,
#filosofia p,
#clientes p,
#contacto-ampliado p,
#contacto-ampliado a {
  color: #444;
}

#formacion ul {
  list-style-type: '✔ ';
  padding-left: 1.5rem;
  line-height: 1.8;
}

#clientes img {
  max-width: 100%;
  border-radius: 12px;
  display: block;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

#contacto-ampliado a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.5rem 0;
  color: inherit;
  transition: opacity 0.2s ease-in-out;
}

#contacto-ampliado a:hover {
  opacity: 0.85;
  text-decoration: underline;
}

.hidden-fade,
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


  /* Botón flotante */
.floating-contact {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1500; /* Para que nunca lo tape nada */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: auto;
}

/* Estilo del botón principal flotante */
.floating-contact-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-acento);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease;
  padding: 0;
}


.floating-contact-btn:hover {
  transform: scale(1.08);
  background-color: #004d73;
}

/* Contenedor de los enlaces de contacto (oculto por defecto) */
.contact-links-container {
  position: absolute;
  bottom: 70px;
  right: 0;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  padding: 15px 0;
  display: none;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
  max-width: 90vw;
  word-wrap: break-word;
  box-sizing: border-box;
  z-index: 9999;
}

.contact-links-container.show {
  display: block !important;
  position: absolute !important;
  bottom: 70px;
  right: 0;
  z-index: 9999;
}

/* Estilo de cada enlace dentro del contenedor */
.contact-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  text-decoration: none;
  color: var(--color-texto);
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}


.contact-link:hover {
  background-color: var(--color-base);
  color: var(--color-acento);
}

.contact-link i {
  font-size: 1.2rem;
  color: var(--color-acento);
}

/* Colores específicos para los iconos si lo deseas */
.whatsapp-link i { color: #25D366; }
.email-link i { color: #D44638; }
.phone-link i { color: #34B7F1; }
.instagram-link i { color: #E1306C; }
.linkedin-link i { color: #0A66C2; }

/* Media Queries para ajustar en pantallas pequeñas */
@media (max-width: 768px) {

  .floating-contact-btn {
    width: 55px;
    height: 55px;
    font-size: 1.3rem;
  }

  .contact-links-container {
    min-width: 180px;
    max-width: 90vw;
    padding: 10px;
    word-wrap: break-word;
    box-sizing: border-box;
    position: absolute;
    bottom: 70px;
    right: 0;
    display: none;
    background: white;
    z-index: 9999;
  }

  .contact-link {
    padding: 6px 15px;
    font-size: 0.95rem;
  }

}

/* Estilos Generales para el Carrusel de Videos */
    .video-carousel-section {
        background-color: var(--color-destacado); /* Usa una variable de color existente para coherencia */
        padding: 4rem 2rem;
        text-align: center;
        border-radius: 10px;
        margin: 2rem auto;
        max-width: 1200px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }

    .video-carousel-section .section-title {
        color: var(--color-acento); /* Usa una variable de color existente */
        margin-bottom: 3rem;
        font-size: 2.5rem;
    }

    .video-carousel-container {
        position: relative;
        overflow: hidden;
        margin: 0 auto;
        /* El ancho del contenedor ahora se ajusta para mostrar un solo video grande */
        max-width: 700px; /* Ancho máximo para el video en desktop */
    }

    .video-carousel {
        display: flex;
        overflow-x: scroll;
        scroll-snap-type: x mandatory; /* Para un desplazamiento suave entre los elementos */
        -webkit-overflow-scrolling: touch; /* Para un desplazamiento suave en iOS */
        scrollbar-width: none; /* Oculta la barra de desplazamiento en Firefox */
        gap: 20px; /* Espacio entre los videos */
        padding-bottom: 20px; /* Espacio para la sombra de los videos o si aparece la barra de scroll */
        /* Ajuste de padding para centrar el video visible */
        padding-left: calc(50% - 350px); /* 50% del contenedor - la mitad del ancho del video-item (700px/2) */
        padding-right: calc(50% - 350px);
    }

    .video-carousel::-webkit-scrollbar {
        display: none; /* Oculta la barra de desplazamiento en navegadores WebKit */
    }

    .video-item {
        flex: 0 0 700px; /* Ancho fijo y más grande para cada video */
        scroll-snap-align: center; /* Esto es clave para centrar el video visible */
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 6px 15px rgba(0,0,0,0.15);
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Para empujar la info abajo si es necesario */
        position: relative; /* Necesario para posicionar el botón de play */
    }

    .video-item:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    /* Nuevo wrapper para el video y el overlay */
    .video-wrapper {
        position: relative;
        width: 100%;
        height: 394px; /* Misma altura que el video para que el overlay lo cubra */
        overflow: hidden;
    }

    .video-item video {
        width: 100%;
        height: 100%; /* Llenar el wrapper */
        display: block;
        background-color: #000; /* Fondo negro para videos */
        object-fit: cover; /* Asegura que el video cubra el área */
    }

    .video-info {
        padding: 15px;
        text-align: left;
        flex-grow: 1; /* Permite que la información crezca */
    }

    .video-info h3 {
        font-size: 1.3rem;
        color: var(--color-acento);
        margin-top: 0;
        margin-bottom: 10px;
    }

    .video-info p {
        font-size: 0.95rem;
        color: var(--color-texto);
        line-height: 1.5;
    }

    /* Estilos para el botón de Play grande */
    .play-button-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Ahora cubre todo el video-wrapper */
        background-color: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 1;
        transition: opacity 0.3s ease;
        z-index: 5; /* Asegura que esté sobre el video */
    }

    .play-button-overlay.hidden {
        opacity: 0;
        pointer-events: none; /* Deshabilita clics cuando está oculto */
    }

    .play-button-overlay i {
        font-size: 4rem; /* Tamaño grande del icono */
        color: white;
        border: 3px solid white;
        border-radius: 50%;
        padding: 1rem 1.2rem 1rem 1.4rem; /* Ajuste para centrar el triángulo */
        background-color: rgba(0, 0, 0, 0.3);
        transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .play-button-overlay:hover i {
        transform: scale(1.1);
        background-color: rgba(0, 0, 0, 0.5);
    }

    /* Botones de Navegación del Carrusel */
    .carousel-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 95, 135, 0.7); /* color-acento con transparencia */
        color: white;
        border: none;
        border-radius: 50%;
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 1.4rem;
        z-index: 10;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .carousel-button:hover {
        background-color: var(--color-acento);
        transform: translateY(-50%) scale(1.05);
    }

    .carousel-button.prev {
        left: 0;
    }

    .carousel-button.next {
        right: 0;
    }

    /* Responsividad del Carrusel */
    @media (max-width: 768px) {
        .video-carousel-container {
            max-width: 90vw; /* En tablets, ocupa el 90% del ancho de la vista */
        }
        .video-item {
            flex: 0 0 90vw; /* El video ocupa el 90% del ancho de la vista */
        }
        .video-wrapper {
            height: calc(90vw * 9 / 16); /* Mantener relación de aspecto 16:9 */
        }
        .video-carousel-section {
            padding: 2rem 1rem;
        }
        .video-carousel-section .section-title {
            font-size: 2rem;
        }
        .carousel-button {
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
        }
        .video-carousel {
            padding-left: calc(50% - 45vw); /* Centrar 90vw item */
            padding-right: calc(50% - 45vw);
        }
        .play-button-overlay i {
            font-size: 3rem; /* Ajuste para móviles */
            padding: 0.8rem 1rem 0.8rem 1.1rem;
        }
    }

    @media (max-width: 480px) {
        .video-carousel-container {
            max-width: 95vw; /* En móviles, ocupa casi todo el ancho */
        }
        .video-item {
            flex: 0 0 95vw; /* El video ocupa el 95% del ancho de la vista */
        }
        .video-wrapper {
            height: calc(95vw * 9 / 16); /* Mantener relación de aspecto 16:9 */
        }
        .carousel-button {
            top: auto;
            bottom: -55px; /* Mover botones debajo en móviles */
            transform: none;
            width: 50px;
            height: 50px;
            font-size: 1.5rem;
        }
        .carousel-button.prev {
            left: 50%;
            margin-left: -60px; /* Centrar y separar */
        }
        .carousel-button.next {
            right: 50%;
            margin-right: -60px; /* Centrar y separar */
        }
        .video-carousel {
            padding-bottom: 70px; /* Más espacio si los botones se mueven abajo */
            padding-left: calc(50% - 47.5vw); /* Centrar 95vw item */
            padding-right: calc(50% - 47.5vw);
        }
        .play-button-overlay i {
            font-size: 2.5rem; /* Ajuste para móviles muy pequeños */
            padding: 0.7rem 0.9rem 0.7rem 1rem;
        }
    }

  .service-card {
    flex: 0 0 100%;
    background: #fff;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    text-align: center;
    color: #333;
  }

  .service-card i {
    font-size: 2rem;
    color: #0077b6;
    margin-bottom: 0.5rem;
  }

/* --- MARQUESINA DE LOGOS PROFESIONAL (SOLUCIÓN FINAL) --- */
.marquesina-container {
  display: flex; /* La clave para que las dos pistas se alineen */
  position: relative;
  overflow: hidden;
  width: 100%;
}

.marquesina-track {
  display: flex;
  flex-shrink: 0;
  white-space: nowrap;
  animation: marquesina-movimiento 80s linear infinite; /* Velocidad para PC */
}

.marquesina-track img {
  height: 60px;
  object-fit: contain;
  opacity: 0.6;
  transition: all 0.3s ease;
  margin: 0 2rem;
  flex-shrink: 0;
}

.marquesina-track img:hover {
  opacity: 1;
}

@keyframes marquesina-movimiento {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* --- Efecto de desvanecimiento en los bordes --- */
.marquesina-fade {
  position: absolute;
  top: 0;
  height: 100%;
  width: 15%;
  pointer-events: none;
  z-index: 10;
}

.fade-left {
  left: 0;
  background: linear-gradient(to right, #f0fbff 0%, transparent 100%);
}

.fade-right {
  right: 0;
  background: linear-gradient(to left, #f0fbff 0%, transparent 100%);
}

/* Media Query para dispositivos móviles y tablets */
@media (max-width: 768px) {
  .marquesina-track {
    animation-duration: 50s;
  }
  
  .marquesina-track img {
    height: 60px;
    margin: 0 1rem;
  }
  .marquesina-fade {
    width: 20%;
  }
}