:root {
       --azul: #0a7bb2;
       --azul-claro: #cceeff;
       --gris-osc: #2c2c2c;
       --bg: #f4f4f4;
       --card: #e6f2f8;
   }

   * {
       box-sizing: border-box
   }

   body {
       margin: 0;
       font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
       background-color: var(--bg);
       color: #333;
   }

  /* Barra inferior (sticky + menu) */

    #img1 {
        margin: 0px;
    }

   .main-header {
       position: sticky;
       top: 0;
       z-index: 1000;
       background-color: var(--azul);
       color: #fff;
       padding: 0px 40px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 16px;
   }

   .brand {
       display: flex;
       align-items: center;
       gap: 12px;
   }

   .brand h1 {
       margin: 0;
       font-size: 2vw;
       width: 100%;
   }

   nav.primary {
       display: flex;
       gap: 20px;
       align-items: center;
   }

   nav.primary a {
       color: #fff;
       text-decoration: none;
       font-weight: 500;
       transition: color .25s ease;
       padding: 6px 4px;
   }

   nav.primary a:hover {
       color: var(--azul-claro);
   }

   /* Boton hamburguesa movil */
   .hamburger {
       display: none;
       width: 40px;
       height: 40px;
       border: none;
       border-radius: 8px;
       background: rgba(255, 255, 255, .15);
       color: #fff;
       font-size: 20px;
       cursor: pointer;
   }

   .btn {
       display: inline-block;
       padding: 12px 22px;
       border-radius: 28px;
       border: none;
       cursor: pointer;
       font-weight: 700;
       background: #fff;
       color: var(--azul);
       transition: transform .25s ease, background .25s ease;
       text-decoration: none;
   }

   .btn:hover {
       transform: translateY(-1px);
       background: #eef6ff;
   }

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

   /* Carrusel a pantalla completa */
   .carrusel-portada {
       position: relative;
       width: 100%;
       overflow: hidden;
       background: #000;
   }

   .slides {
       display: flex;
       height: 100%;
       transition: transform 1s ease;
   }

   .slide {
       position: relative;
       width: 100%;
       height: 100%;
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
   }

   .slide img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: center;
       filter: brightness(.78);
   }

   .texto-slide {
       position: absolute;
       bottom: 60px;
       left: 60px;
       right: 60px;
       max-width: 680px;
       color: #fff;
       background: rgba(0, 0, 0, .45);
       padding: 20px 22px;
       border-radius: 12px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
   }

   .texto-slide h3 {
       margin: 0 0 8px;
       font-size: 1.8em;
   }

   .texto-slide p {
       margin: 0;
       font-size: 1.05em;
       opacity: .95;
   }

   .carrusel-arrow {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       z-index: 3;
       background: rgba(0, 0, 0, .45);
       color: #fff;
       border: none;
       width: 44px;
       height: 44px;
       border-radius: 50%;
       cursor: pointer;
       font-size: 24px;
       line-height: 44px;
   }

   .carrusel-prev {
       left: 16px;
   }

   .carrusel-next {
       right: 16px;
   }

   .carrusel-arrow:hover {
       background: rgba(0, 0, 0, .65);
   }

   .carrusel-dots {
       position: absolute;
       left: 50%;
       bottom: 18px;
       transform: translateX(-50%);
       display: flex;
       gap: 8px;
       z-index: 3;
   }

   .carrusel-dot {
       width: 10px;
       height: 15px;
       border: 2px solid #fff;
       background: transparent;
       border-radius: 50%;
       cursor: pointer;
       opacity: .75;
   }

   .carrusel-dot.activo,
   .carrusel-dot:hover {
       background: #fff;
       opacity: 1;
   }

   /* Seccion certificados */
   .certificados {
       padding: 64px 20px;
       background: #fff;
       text-align: center;
   }

   .certificados h2 {
       color: var(--azul);
       margin: 0 0 18px;
   }

   .cert-sub {
       color: #666;
       margin: 0 0 36px;
   }

   .fichas {
       max-width: 1100px;
       margin: 0 auto;
       display: grid;
       gap: 22px;
       grid-template-columns: repeat(2, 1fr);
   }

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

   .ficha {
       background: linear-gradient(180deg, #f7fbff 0%, #eaf5fb 100%);
       border: 1px solid #d9ecf7;
       border-radius: 14px;
       padding: 22px;
       text-align: left;
       box-shadow: 0 8px 20px rgba(10, 123, 178, .07);
       opacity: 0;
       transform: translateY(24px);
       transition: all .8s ease;
   }

   .ficha.visible {
       opacity: 1;
       transform: translateY(0);
   }

   .ficha h3 {
       margin: 0 0 10px;
       color: #0a5f82;
   }

   .ficha p {
       margin: 0 0 12px;
       color: #3b4a54;
   }

   .ficha .tag {
       display: inline-block;
       background: #fff;
       border: 1px solid #cfe8f4;
       color: #0a5f82;
       border-radius: 999px;
       padding: 6px 10px;
       font-size: .85em;
       margin-right: 8px;
   }

   /* Testimonios */
   .testimonios {
       background: #f9f9f9;
       padding: 64px 20px;
       text-align: center;
   }

   .testimonios h2 {
       color: var(--azul);
       margin: 0 0 24px;
   }

   .grid-test {
       max-width: 900px;
       margin: 0 auto;
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 20px;
   }

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

   .testimonio {
       background: #fff;
       border: 1px solid #eee;
       border-radius: 12px;
       padding: 20px;
       box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
       text-align: left;
   }

   .testimonio p {
       margin: 0 0 10px;
   }

   .testimonio h4 {
       margin: 0;
       color: #0a5f82;
   }

   /* Contacto */
   .contacto {
       background: #fff;
       padding: 64px 20px;
       text-align: center;
   }

   form {
       max-width: 520px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       gap: 14px;
   }

   input,
   textarea {
       padding: 12px;
       border: 1px solid #ccc;
       border-radius: 8px;
       font-size: 1rem;
       background: #fff;
   }

   input:focus,
   textarea:focus {
       outline: 2px solid #a6d8f5;
       border-color: #8ac8ed;
   }

   input.error,
   textarea.error {
       border-color: #d9534f;
       background: #fff7f7;
   }

   button.btn-primary {
       padding: 12px 20px;
       border: none;
       border-radius: 28px;
       background: var(--azul);
       color: #fff;
       font-weight: 700;
       cursor: pointer;
       transition: filter .2s ease, transform .2s ease;
   }

   button.btn-primary:hover {
       filter: brightness(1.05);
       transform: translateY(-1px);
   }

   /* Aviso snackbar */
   .aviso {
       position: fixed;
       left: 50%;
       bottom: 24px;
       transform: translateX(-50%) translateY(20px);
       background: var(--azul);
       color: #fff;
       padding: 12px 16px;
       border-radius: 8px;
       box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
       opacity: 0;
       transition: all .3s ease;
       z-index: 9999;
       max-width: 90vw;
       text-align: center;
   }

   .aviso-error {
       background: #d9534f;
   }

   .aviso.visible {
       opacity: 1;
       transform: translateX(-50%) translateY(0);
   }

   /* Responsive header */
   @media (max-width:900px) {
       .hamburger {
           display: inline-flex;
           align-items: center;
           justify-content: center;
       }

       nav.primary {
           position: fixed;
           top: calc(6px + 54px);
           right: 16px;
           left: 16px;
           background: var(--azul);
           padding: 14px;
           border-radius: 12px;
           display: none;
           flex-direction: column;
           gap: 10px;
           box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
       }

       nav.primary.open {
           display: flex;
       }
   }

   .separador {
       background: linear-gradient(to right, #cceeff, #e6f2f8);
       padding: 40px 20px;
       text-align: center;
   }

   .contenido-separador {
       display: inline-block;
       background: #fff;
       padding: 20px 30px;
       border-radius: 12px;
       box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
       animation: fadeUp 1s ease-out;
   }

   .icono-separador {
       font-size: 2em;
       display: block;
       margin-bottom: 10px;
       color: #0a7bb2;
   }

   .contenido-separador p {
       margin: 0;
       font-size: 1.3em;
       color: #0a7bb2;
       font-weight: 600;
   }

   .actividades,
   .estructura {
       padding: 20px;
       background: #fff;
       text-align: center;
   }

   .actividades h2,
   .estructura h2 {
       color: var(--azul);
       margin-bottom: 36px;
   }

   .grid-actividades {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
       gap: 24px;
       max-width: 1100px;
       margin: 0 auto;
       padding-bottom: 20px;
   }

   .actividad {
       background: linear-gradient(180deg, #f7fbff 0%, #eaf5fb 100%);
       border: 1px solid #d9ecf7;
       border-radius: 14px;
       padding: 24px;
       box-shadow: 0 8px 20px rgba(10, 123, 178, .07);
       transition: transform 0.3s ease;
   }

   .actividad:hover {
       transform: translateY(-4px);
   }

   .icono-act {
       font-size: 2.2em;
       display: block;
       margin-bottom: 12px;
       color: #0a7bb2;
   }

   .actividad h3 {
       margin: 0 0 10px;
       color: #0a5f82;
   }

   .actividad p {
       margin: 0;
       color: #3b4a54;
   }

   .bloques-modulos {
       max-width: 900px;
       margin: 0 auto;
       display: grid;
       gap: 24px;
   }

   .modulo {
       background: #e6f2f8;
       border-radius: 12px;
       padding: 24px;
       text-align: left;
       box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
   }

   .modulo h3 {
       margin: 0 0 10px;
       color: #0a5f82;
   }

   .modulo p {
       margin: 0;
       color: #3b4a54;
   }

   .actividades-certificados {
       background: linear-gradient(to right, #0a7bb2, #065a8c);
       color: white;
       padding: 20px;
       text-align: center;
   }

   .contenido-actividades h2 {
       font-size: 2em;
       margin-bottom: 10px;
   }

   .subtitulo {
       font-size: 1.1em;
       margin-bottom: 40px;
       opacity: 0.9;
   }

   .grid-actividades-cert {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
       gap: 30px;
       max-width: 1100px;
       margin: 0 auto;
   }

   .actividad-cert {
       background: white;
       color: #333;
       border-radius: 12px;
       overflow: hidden;
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
       transition: transform 0.3s ease;
   }

   .actividad-cert:hover {
       transform: translateY(-6px);
   }

   .actividad-cert img {
       width: 100%;
       height: 180px;
       object-fit: cover;
   }

   .actividad-cert h3 {
       margin: 16px;
       font-size: 1.2em;
       color: #0a7bb2;
   }

   .actividad-cert p {
       margin: 0 16px 20px;
       font-size: 0.95em;
       color: #444;
   }

   .instalaciones-formativas {
       background: #f4f4f4;
       padding: 20px;
       text-align: center;
   }

   .instalaciones-formativas h2 {
       font-size: 2em;
       color: #0a7bb2;
       margin-bottom: 10px;
   }

   .instalaciones-formativas .subtitulo {
       font-size: 1.1em;
       color: #444;
       margin-bottom: 40px;
   }

   .grid-instalaciones {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       /* ← Fuerza dos columnas */
       gap: 40px;
       max-width: 1100px;
       margin: 0 auto;
   }

   @media (max-width: 768px) {
       .grid-instalaciones {
           grid-template-columns: 1fr;
           /* ← En moviles, una sola columna */
       }
   }

   .bloque-cert {
       background: #ffffff;
       border-radius: 12px;
       box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
       padding: 20px;
       text-align: left;
   }

   .titulo-cert {
       background: #2c2c2c;
       color: white;
       font-weight: bold;
       font-size: 1.2em;
       padding: 10px 16px;
       border-radius: 8px 8px 0 0;
       margin-bottom: 16px;
   }

   .imagenes-cert {
       display: flex;
       gap: 12px;
       margin-bottom: 16px;
   }

   .imagenes-cert img {
       width: 49%;
       border-radius: 8px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   }

   .bloque-cert p {
       font-size: 0.95em;
       color: #333;
       margin: 0;
   }

   .modulos-lineales {
       background: #f4f4f4;
       padding: 20px;
       text-align: center;
   }

   .etiqueta-superior {
       display: inline-block;
       background: #2c2c2c;
       color: white;
       padding: 6px 16px;
       border-radius: 20px;
       font-size: 0.95em;
       margin-bottom: 12px;
   }

   .modulos-lineales h2, #mapaweb {
       font-size: 2em;
       color: #0a7bb2;
       margin-bottom: 2rem;
       text-align: center;
   }

   .modulo-linea {
       display: flex;
       align-items: center;
       gap: 40px;
       margin-bottom: 60px;
       max-width: 1100px;
       margin-left: auto;
       margin-right: auto;
       text-align: left;
   }

   .modulo-linea img {
       width: 45%;
       height: 240px;
       object-fit: cover;
       border-radius: 12px;
       box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
   }

   .contenido-modulo {
       flex: 1;
   }

   .contenido-modulo h3 {
       margin: 0 0 10px;
       color: #0a5f82;
       font-size: 1.4em;
   }

   .contenido-modulo p {
       margin: 0 0 16px;
       color: #3b4a54;
       font-size: 0.95em;
   }

   .btn-explorar {
       background: #0a7bb2;
       color: white;
       text-decoration: none;
       padding: 10px 18px;
       border-radius: 6px;
       font-weight: 600;
       transition: background 0.3s ease;
       display: inline-block;
   }

   .btn-explorar:hover {
       background: #065a8c;
   }

   /* Alternar orden en modulos pares */
   .modulo-linea.invertido {
       flex-direction: row-reverse;
   }

   @media (max-width: 768px) {

       .modulo-linea,
       .modulo-linea.invertido {
           flex-direction: column;
           text-align: center;
       }

       .modulo-linea img {
           width: 100%;
           height: 200px;
       }

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

   .footer-final {
       background-color: #0a7bb2;
       /* azul institucional */
       color: white;
       padding: 30px 20px;
       font-size: 0.95em;
       opacity: 0;
       transform: translateY(40px);
       transition: all 1s ease;
   }

   .footer-final.visible {
       opacity: 1;
       transform: translateY(0);
   }

   .footer-contenido {
       max-width: 1100px;
       margin: 0 auto;
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       align-items: center;
       gap: 20px;
   }

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

   .logos-footer img {
       width: 100%;
       max-width: 40rem;

   }

   .info-footer {
       text-align: right;
       flex: 1;
       min-width: 240px;
   }

   .info-footer p {
       margin: 6px 0;
       text-align: right;
   }

   .info-footer a {
       color: white;
       text-decoration: none;
       transition: color 0.3s ease;
   }

   .info-footer a:hover {
       color: #cceeff;
   }

   @media (max-width: 768px) {
       .footer-contenido {
           flex-direction: column;
           text-align: center;
       }

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

   /* 🌙 Modo oscuro automatico */
   @media (prefers-color-scheme: dark) {
       .footer-final {
           background-color: #1a1a1a;
           color: #e0e0e0;
       }

       .info-footer a {
           color: #e0e0e0;
       }

       .info-footer a:hover {
           color: #ffffff;
       }

       .logos-footer img {
           filter: none;
       }
   }

   .nota-legal {
       position: fixed;
       top: 60px;
       left: 50%;
       transform: translateX(-50%) translateY(20px);
       background-color: var(--nota-bg);
       color: var(--nota-text);
       border: 2px solid var(--nota-border);
       border-radius: 12px;
       padding: 20px 24px;
       max-width: 600px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       font-family: 'Segoe UI', 'Roboto', sans-serif;
       font-size: 1vw;
       line-height: 1.5;
       z-index: 9999;
       opacity: 0;
       pointer-events: none;
       transition: opacity 1s ease, transform 0.6s ease;
   }

   .nota-legal.visible {
       opacity: 1;
       transform: translateX(-50%) translateY(0);
       pointer-events: auto;
       width: 60%;
   }

   .cerrar-nota {
       position: absolute;
       top: 8px;
       right: 12px;
       background: none;
       border: none;
       font-size: 1.2em;
       color: var(--nota-text);
       cursor: pointer;
   }

   /* Modo claro */
   :root {
       --nota-bg: #fefefe;
       --nota-text: #0a7bb2;
       --nota-border: #0a7bb2;
   }

   /* Modo oscuro */
   @media (prefers-color-scheme: dark) {
       :root {
           --nota-bg: #1e1e1e;
           --nota-text: #ffffff;
           --nota-border: #ffffff;
       }
   }

   /* Subida de la letra */
   @media (max-width: 1000px) {
        .nota-legal {
            font-size: 3vw;
       }
          #img1 {
                 width: 70%;
          }
          #grande {
                 font-size: 2.5vw;
          }
   }