/* ─────────────────────────────────────────────
       VARIABLES DE DISEÑO (SISTEMA DE DISEÑO)
    ───────────────────────────────────────────── */
    :root {
      /* Paleta de Colores Corporativa */
      --color-fondo:      #F4F3EF; /* Hueso / Off-white */
      --color-blanco:     #FFFFFF;
      --color-primario:   #0A2240; /* Azul Marino Profundo */
      --color-secundario: #2C6B7E; /* Azul Océano / Teal */
      --color-acento:     #D49A6A; /* Cobre / Ocre */

      /* Variantes de Opacidad y Resplandor */
      --color-borde:      rgba(10,34,64,0.08);
      --color-sombra:     rgba(10,34,64,0.06);
      --color-acento-tenue: rgba(212,154,106,0.1);

      /* FIX: estas dos variables se usaban en varias reglas (textos secundarios,
         etiquetas de métricas, footer) pero nunca estaban definidas.
         Sin ellas, esos textos heredaban el color por defecto en vez del
         tono atenuado esperado. */
      --color-muted: rgba(10,34,64,0.65);
      --color-dim:   rgba(10,34,64,0.5);

      /* Tipografía y Espaciado */
      --fuente-principal: 'Inter', system-ui, -apple-system, sans-serif;
      --radio-borde:      8px;
      --transicion:       0.4s cubic-bezier(0.4, 0, 0.2, 1);
      --ancho-maximo:     1200px;
    }

    /* ─────────────────────────────────────────────
       ESTILOS BASE
    ───────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--fuente-principal);
      background-color: var(--color-fondo);
      color: var(--color-primario);
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* FIX: cuando el menú móvil está abierto, bloqueamos el scroll del body */
    body.menu-abierto { overflow: hidden; }

    /* Barra de desplazamiento */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--color-fondo); }
    ::-webkit-scrollbar-thumb { background: var(--color-secundario); border-radius: 4px; }

    /* Utilidades */
    .contenedor {
      max-width: var(--ancho-maximo);
      margin: 0 auto;
      padding: 0 24px;
    }

    .etiqueta-seccion {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--color-acento);
      margin-bottom: 16px;
    }
    .etiqueta-seccion::before {
      content: '';
      width: 24px;
      height: 2px;
      background-color: var(--color-acento);
    }

    .titulo-seccion {
      font-size: clamp(2rem, 5vw, 2.8rem);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -0.03em;
      margin-bottom: 20px;
    }

    .texto-destacado { color: var(--color-secundario); }
    .texto-acento { color: var(--color-acento); }

    /* Foco visible para accesibilidad de teclado (FIX) */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid var(--color-acento);
      outline-offset: 3px;
    }

    /* ─────────────────────────────────────────────
       COMPONENTES: BOTONES
    ───────────────────────────────────────────── */
    .boton {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 16px 32px;
      border-radius: var(--radio-borde);
      font-size: 0.95rem;
      font-weight: 700;
      text-decoration: none;
      transition: var(--transicion);
      cursor: pointer;
      border: none;
      outline: none;
    }

    .boton:disabled { opacity: 0.7; cursor: not-allowed; }

    .boton-primario {
      background-color: var(--color-primario);
      color: var(--color-blanco);
      box-shadow: 0 4px 12px rgba(10,34,64,0.15);
    }
    .boton-primario:hover {
      background-color: var(--color-secundario);
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(44,107,126,0.25);
    }

    .boton-acento {
      background-color: var(--color-acento);
      color: var(--color-blanco);
      box-shadow: 0 4px 12px rgba(212,154,106,0.2);
    }
    .boton-acento:hover {
      background-color: #c2895a;
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(212,154,106,0.3);
    }

    .boton-contorno {
      background-color: transparent;
      color: var(--color-primario);
      border: 2px solid var(--color-primario);
    }
    .boton-contorno:hover {
      background-color: var(--color-primario);
      color: var(--color-blanco);
      transform: translateY(-3px);
    }

    /* ─────────────────────────────────────────────
       NAVEGACIÓN
    ───────────────────────────────────────────── */
    .cabecera {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 14px 0;
      transition: var(--transicion);
      /* Fondo siempre presente (no solo al hacer scroll) para que el logo y
         los textos del menú mantengan contraste sobre la foto del hero. */
      background-color: rgba(244,243,239,0.9);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--color-borde);
    }

    .cabecera-activa {
      background-color: rgba(244,243,239,0.97);
      padding: 9px 0;
    }

    .nav-flexible {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logotipo {
      display: flex;
      align-items: center;
      text-decoration: none;
    }
    /* Logo real de GEOMAV (imagen). Se limita por altura para que encaje
       en el espacio del header/footer, sin alterar el resto del layout.
       Altura mayor que antes porque el logo actual es más cuadrado
       (ícono + texto apilados verticalmente) en vez de horizontal. */
    .logotipo-imagen {
      height: 59px;
      width: auto;
      display: block;
    }
    .pie-marca .logotipo-imagen { height: 65px; }

    .menu-lista {
      display: flex;
      align-items: center;
      gap: 36px;
      list-style: none;
    }
    .menu-enlace {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--color-primario);
      text-decoration: none;
      transition: var(--transicion);
      opacity: 0.8;
    }
    .menu-enlace:hover { opacity: 1; color: var(--color-secundario); }

    /* FIX: .nav-acciones se usaba en el HTML pero no tenía regla propia;
       el botón y el toggle móvil quedaban sin alineación ni espaciado consistentes. */
    .nav-acciones {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .menu-movil-toggle {
      display: none;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 5px;
    }
    .menu-movil-toggle span {
      width: 26px;
      height: 2px;
      background-color: var(--color-primario);
      border-radius: 2px;
      transition: var(--transicion);
    }

    .overlay-menu {
      position: fixed;
      inset: 0;
      background-color: var(--color-fondo);
      z-index: 1100;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 32px;
    }
    .overlay-menu.abierto { display: flex; }

    /* Logo dentro del menú móvil de pantalla completa, en la misma posición
       (esquina superior izquierda) y mismo tamaño que en el header. */
    .overlay-logo {
      position: absolute;
      top: 79px;
      left: 24px;
      display: flex;
      align-items: center;
      text-decoration: none;
    }

    /* FIX: antes este botón vivía en un `style` inline pegado al borde superior
       (top:30px), justo en la misma zona donde cae el botón de hamburguesa del
       header. Como la cabecera tenía z-index mayor que el overlay, el ícono de
       hamburguesa quedaba encima de la X y absorbía el clic. Ahora, además de
       subir el z-index del overlay por encima de la cabecera, bajamos esta X
       para que quede claramente separada del botón de hamburguesa y le damos
       una zona de clic más generosa. */
    .boton-cerrar-menu {
      position: absolute;
      top: 84px;
      right: 24px;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      font-size: 1.8rem;
      line-height: 1;
      color: var(--color-primario);
      cursor: pointer;
      border-radius: 50%;
      transition: var(--transicion);
    }
    .boton-cerrar-menu:hover { background-color: var(--color-borde); }
    .overlay-enlace {
      font-size: 1.8rem;
      font-weight: 800;
      color: var(--color-primario);
      text-decoration: none;
    }

    /* ─────────────────────────────────────────────
       SECCIÓN HERO (INICIO)
    ───────────────────────────────────────────── */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      padding: 140px 0 100px;
      overflow: hidden;
      /* Foto de fondo temporal (placeholder) — reemplazar por una foto real
         de un proyecto GEOMAV (terreno, vuelo de dron, obra) cuando esté
         disponible. Solo hay que cambiar la URL de abajo. */
      background-image:
        linear-gradient(100deg, rgba(10,34,64,0.88) 0%, rgba(10,34,64,0.72) 42%, rgba(10,34,64,0.35) 100%),
        url('../img/hero-foto.jpg');
      background-size: cover;
      background-position: center;
    }

    .hero .hero-fondo-patron { display: none; }

    .hero .texto-destacado { color: #7FD4E8; }

    .hero .boton-contorno {
      color: var(--color-blanco);
      border-color: rgba(255,255,255,0.6);
    }
    .hero .boton-contorno:hover {
      background-color: var(--color-blanco);
      color: var(--color-primario);
    }

    .hero-cuadricula {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 80px;
      align-items: center;
      position: relative;
      z-index: 2;
    }

    .hero-indicador {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background-color: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.25);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      color: var(--color-blanco);
      padding: 10px 18px;
      border-radius: 50px;
      font-size: 0.8rem;
      font-weight: 700;
      margin-bottom: 32px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .hero-indicador-punto {
      width: 8px;
      height: 8px;
      background-color: var(--color-acento);
      border-radius: 50%;
      animation: pulso 2s infinite;
    }
    @keyframes pulso {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.5); opacity: 0.5; }
      100% { transform: scale(1); opacity: 1; }
    }

    /* FIX: .hero-title se usaba en el <h1> pero no tenía ninguna regla propia,
       por lo que caía a la tipografía por defecto del navegador (tamaño y
       peso inconsistentes con el resto del sistema tipográfico del sitio). */
    .hero-title {
      font-size: clamp(2.4rem, 6vw, 3.6rem);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -0.03em;
      margin-bottom: 24px;
      color: var(--color-blanco);
    }

    .hero-descripcion {
      font-size: 1.2rem;
      color: rgba(255,255,255,0.82);
      max-width: 540px;
      margin-bottom: 40px;
    }

    /* FIX: .hero-botones envolvía los dos CTA del hero pero no tenía regla
       propia, por lo que no había espacio entre botones ni ajuste en móvil. */
    .hero-botones {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 40px;
    }

    /* Visual Hero */
    .hero-visual {
      position: relative;
      display: flex;
      justify-content: center;
    }
    .esfera-contenedor {
      width: 460px;
      height: 460px;
      background-color: var(--color-blanco);
      border-radius: 50%;
      box-shadow: 0 30px 80px var(--color-sombra);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .esfera-nucleo {
      width: 120px;
      height: 120px;
      background-color: var(--color-blanco);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      box-shadow: 0 10px 25px rgba(10,34,64,0.12);
    }
    .esfera-nucleo img { width: 78px; height: auto; display: block; }

    .orbita-icono {
      position: absolute;
      width: 60px;
      height: 60px;
      background-color: var(--color-blanco);
      border: 1px solid var(--color-borde);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      box-shadow: 0 10px 25px rgba(0,0,0,0.05);
      animation: flotar 6s ease-in-out infinite;
    }
    .orbita-1 { top: 10%; left: 15%; animation-delay: 0s; }
    .orbita-2 { top: 5%; right: 15%; animation-delay: 1s; }
    .orbita-3 { bottom: 15%; left: 5%; animation-delay: 2s; }
    .orbita-4 { bottom: 10%; right: 10%; animation-delay: 1.5s; }

    @keyframes flotar {
      0%, 100% { transform: translateY(0) rotate(0); }
      50% { transform: translateY(-20px) rotate(5deg); }
    }

    /* ─────────────────────────────────────────────
       SECCIÓN SERVICIOS
    ───────────────────────────────────────────── */
    .servicios { padding: 120px 0; }
    .servicios-cuadricula {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
    }

    .tarjetas-servicios {
      display: grid;
      gap: 24px;
    }
    .tarjeta-servicio {
      background-color: var(--color-blanco);
      border: 1px solid var(--color-borde);
      padding: 36px;
      border-radius: 4px;
      transition: var(--transicion);
      display: flex;
      gap: 24px;
    }
    .tarjeta-servicio:hover {
      border-color: var(--color-secundario);
      transform: translateY(-8px);
      box-shadow: 0 20px 40px var(--color-sombra);
    }
    .servicio-icono {
      width: 64px;
      height: 64px;
      background-color: var(--color-fondo);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      flex-shrink: 0;
    }
    .servicio-titulo { font-size: 1.25rem; font-weight: 800; margin-bottom: 10px; }
    .servicio-descripcion { font-size: 0.95rem; color: var(--color-muted); }

    .proceso-pasos { margin-top: 48px; display: grid; gap: 32px; }
    .proceso-paso { display: flex; gap: 24px; }
    .paso-numero {
      font-size: 1.8rem;
      font-weight: 900;
      color: var(--color-acento);
      opacity: 0.4;
      line-height: 1;
    }
    .paso-cuerpo strong { display: block; font-size: 1.15rem; font-weight: 800; margin-bottom: 6px; }
    .paso-cuerpo p { font-size: 0.95rem; color: var(--color-muted); }

    /* ─────────────────────────────────────────────
       SECCIÓN BENEFICIOS
    ───────────────────────────────────────────── */
    .beneficios { padding: 120px 0; background-color: var(--color-blanco); }
    .beneficios-cuadricula {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      margin-top: 70px;
    }
    .beneficio-item {
      padding: 40px 0;
      border-top: 2px solid var(--color-borde);
      transition: var(--transicion);
    }
    .beneficio-item:hover { border-top-color: var(--color-secundario); }
    .beneficio-metrica {
      font-size: 3rem;
      font-weight: 900;
      color: var(--color-primario);
      display: block;
      margin-bottom: 16px;
    }
    .beneficio-titulo { font-size: 1.1rem; font-weight: 800; margin-bottom: 12px; }
    .beneficio-texto { font-size: 0.9rem; color: var(--color-muted); }

    /* ─────────────────────────────────────────────
       SECCIÓN PORTAFOLIO (INTERACTIVO)
    ───────────────────────────────────────────── */
    .portafolio { padding: 120px 0; }
    .portafolio-cabecera {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 50px;
      flex-wrap: wrap;
      gap: 30px;
    }

    .pestanas-control {
      display: flex;
      gap: 40px;
      border-bottom: 1px solid var(--color-borde);
    }
    .pestana-boton {
      padding: 16px 0;
      background: none;
      border: none;
      border-bottom: 3px solid transparent;
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--color-dim);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      cursor: pointer;
      transition: var(--transicion);
    }
    .pestana-boton.activa {
      color: var(--color-primario);
      border-bottom-color: var(--color-acento);
    }

    .visor-contenedor {
      background-color: var(--color-blanco);
      border: 1px solid var(--color-borde);
      border-radius: 4px;
      box-shadow: 0 40px 100px var(--color-sombra);
      overflow: hidden;
      position: relative;
      aspect-ratio: 16/9;
    }
    .visor-iframe {
      width: 100%;
      height: 100%;
      border: none;
      background-color: #eee;
      display: block;
    }

    /* Envoltorio con scroll propio, necesario para poder desplazarse por el
       PDF cuando se aplica zoom (el iframe crece más allá del 100% y este
       contenedor permite hacer scroll para ver el resto). */
    .visor-scroll {
      width: 100%;
      height: 100%;
      overflow: auto;
      display: none;
    }
    .visor-scroll.activo { display: block; animation: aparecer 0.8s ease forwards; }

    model-viewer.visor-iframe {
      display: none;
      background-color: #1c1f26;
      --poster-color: transparent;
    }
    model-viewer.visor-iframe.activo { display: block; animation: aparecer 0.8s ease forwards; }

    /* Controles de zoom, solo visibles para documentos PDF (Google Drive) */
    .visor-zoom-controles {
      position: absolute;
      right: 16px;
      bottom: 16px;
      z-index: 6;
      display: none;
      align-items: center;
      gap: 4px;
      background-color: rgba(10,34,64,0.85);
      backdrop-filter: blur(6px);
      border-radius: 50px;
      padding: 6px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }
    .visor-zoom-controles.visible { display: flex; }
    .visor-zoom-boton {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: none;
      background-color: transparent;
      color: var(--color-blanco);
      font-size: 1.1rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transicion);
    }
    .visor-zoom-boton:hover { background-color: rgba(255,255,255,0.15); }
    .visor-zoom-etiqueta {
      min-width: 46px;
      text-align: center;
      color: var(--color-blanco);
      font-size: 0.8rem;
      font-weight: 700;
      cursor: pointer;
    }

    .visor-portada {
      position: absolute;
      inset: 0;
      background: linear-gradient(rgba(10,34,64,0.1), rgba(10,34,64,0.3)), url('https://images.unsplash.com/photo-1503387762-592dee58c160?auto=format&fit=crop&q=80&w=1600') center/cover;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 5;
      transition: var(--transicion);
    }
    .visor-portada.oculto { opacity: 0; pointer-events: none; }

    .play-icono {
      width: 100px;
      height: 100px;
      background-color: var(--color-primario);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 15px 35px rgba(0,0,0,0.3);
      transition: var(--transicion);
    }
    .play-icono:hover { transform: scale(1.1); background-color: var(--color-secundario); }
    .play-icono svg { width: 36px; height: 36px; fill: var(--color-blanco); margin-left: 8px; }

    @keyframes aparecer {
      from { opacity: 0; transform: scale(0.98); }
      to { opacity: 1; transform: scale(1); }
    }

    /* Cuadrícula de recorridos 360° seleccionables (solo visible en la
       pestaña "Recorridos 360°"). Cada tarjeta representa un tour distinto;
       al hacer clic, se carga en el visor de arriba. */
    .tours-grid {
      display: none;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 16px;
      margin-top: 24px;
    }
    .tours-grid.visible { display: grid; }

    .tour-card {
      display: flex;
      align-items: center;
      gap: 14px;
      background-color: var(--color-blanco);
      border: 2px solid var(--color-borde);
      border-radius: 4px;
      padding: 16px;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      transition: var(--transicion);
    }
    .tour-card:hover {
      border-color: var(--color-secundario);
      transform: translateY(-4px);
      box-shadow: 0 12px 24px var(--color-sombra);
    }
    .tour-card.activa {
      border-color: var(--color-acento);
      background-color: var(--color-acento-tenue);
    }
    .tour-card-icono {
      width: 48px;
      height: 48px;
      background-color: var(--color-fondo);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
    }
    .tour-card-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
      min-width: 0;
    }
    .tour-card-titulo {
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--color-primario);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tour-card-ubicacion {
      font-size: 0.8rem;
      color: var(--color-muted);
    }
    .tour-card-badge {
      font-size: 0.62rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 4px 9px;
      border-radius: 50px;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .badge-ejemplo { background-color: var(--color-borde); color: var(--color-dim); }

    /* ─────────────────────────────────────────────
       SECCIÓN CONTACTO
    ───────────────────────────────────────────── */
    .contacto { padding: 120px 0; background-color: var(--color-primario); color: var(--color-blanco); }
    .contacto-cuadricula {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 100px;
      align-items: center;
    }
    .contacto-info .titulo-seccion { color: var(--color-blanco); }
    .contacto-subtitulo { color: rgba(255,255,255,0.7); font-size: 1.1rem; margin-bottom: 40px; }

    /* Íconos circulares de contacto directo (WhatsApp, LinkedIn/CV) */
    .iconos-contacto {
      display: flex;
      gap: 16px;
      margin-top: -8px;
      margin-bottom: 40px;
    }
    .icono-contacto {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background-color: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--transicion);
    }
    .icono-contacto svg { width: 22px; height: 22px; fill: var(--color-blanco); }
    .icono-contacto:hover {
      background-color: var(--color-acento);
      border-color: var(--color-acento);
      transform: translateY(-3px);
    }



    /* Formulario */
    .formulario-grupo { margin-bottom: 28px; }
    .formulario-etiqueta {
      display: block;
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 12px;
      color: rgba(255,255,255,0.5);
    }
    .formulario-entrada, .formulario-seleccion, .formulario-area {
      width: 100%;
      background: transparent;
      border: none;
      border-bottom: 2px solid rgba(255,255,255,0.2);
      padding: 12px 0;
      color: var(--color-blanco);
      font-family: inherit;
      font-size: 1rem;
      outline: none;
      transition: var(--transicion);
    }
    .formulario-entrada:focus, .formulario-seleccion:focus, .formulario-area:focus {
      border-bottom-color: var(--color-acento);
    }
    .formulario-seleccion option { background-color: var(--color-primario); color: white; }
    .formulario-area { min-height: 110px; resize: none; }

    /* Estilo del selector de archivos para que combine con el resto del formulario */
    input[type="file"].formulario-entrada {
      padding: 10px 0;
      font-size: 0.9rem;
      color: rgba(255,255,255,0.7);
    }
    input[type="file"].formulario-entrada::file-selector-button {
      background-color: var(--color-acento);
      color: var(--color-blanco);
      border: none;
      border-radius: var(--radio-borde);
      padding: 8px 16px;
      font-weight: 700;
      font-size: 0.85rem;
      margin-right: 14px;
      cursor: pointer;
      transition: var(--transicion);
    }
    input[type="file"].formulario-entrada::file-selector-button:hover {
      background-color: #c2895a;
    }

    /* FIX: mensaje de estado del formulario (éxito / error) en vez de alert() */
    .formulario-estado {
      display: none;
      margin-top: 20px;
      padding: 14px 18px;
      border-radius: var(--radio-borde);
      font-size: 0.9rem;
      font-weight: 600;
    }
    .formulario-estado.visible { display: block; }
    .formulario-estado.exito { background-color: rgba(76, 175, 80, 0.15); color: #8fd99a; }
    .formulario-estado.error { background-color: rgba(220, 53, 69, 0.15); color: #f3a0a8; }

    /* ─────────────────────────────────────────────
       FOOTER
    ───────────────────────────────────────────── */
    .pie-pagina { padding: 80px 0 40px; background-color: var(--color-blanco); }
    .pie-cuadricula {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 60px;
      margin-bottom: 60px;
    }
    .pie-titulo-col { font-size: 0.9rem; font-weight: 800; text-transform: uppercase; margin-bottom: 24px; color: var(--color-primario); }
    .pie-enlaces { list-style: none; display: grid; gap: 12px; }
    .pie-enlace { text-decoration: none; color: var(--color-muted); font-size: 0.95rem; transition: var(--transicion); }
    .pie-enlace:hover { color: var(--color-secundario); }

    .pie-inferior {
      padding-top: 40px;
      border-top: 1px solid var(--color-borde);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.9rem;
      color: var(--color-dim);
    }

    /* ─────────────────────────────────────────────
       EFECTOS DE REVELACIÓN (SCROLL REVEAL)
    ───────────────────────────────────────────── */
    .revelar {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    .revelar-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Respetar preferencia de menos movimiento, pero sin eliminar el fundido
       de entrada del contenido (solo se desactivan las animaciones decorativas
       en loop: el punto pulsante y los íconos flotantes del hero). */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .hero-indicador-punto,
      .orbita-icono {
        animation: none;
      }
    }

    /* ─────────────────────────────────────────────
       RESPONSIVIDAD
    ───────────────────────────────────────────── */
    @media (max-width: 1024px) {
      /* minmax(0,1fr): la columna puede encogerse; con 1fr la esfera de 380px fija
         obligaba al contenedor a medir 428px y el texto del hero se cortaba en móviles. */
      .hero-cuadricula, .servicios-cuadricula, .contacto-cuadricula { grid-template-columns: minmax(0, 1fr); gap: 60px; }
      .beneficios-cuadricula { grid-template-columns: repeat(2, 1fr); }
      .pie-cuadricula { grid-template-columns: 1fr 1fr; }
      .esfera-contenedor { width: min(380px, 100%); height: auto; aspect-ratio: 1 / 1; margin: 0 auto; }
    }

    @media (max-width: 768px) {
      .menu-lista, .cabecera .boton { display: none; }
      .menu-movil-toggle { display: flex; }
      .beneficios-cuadricula { grid-template-columns: 1fr; }
      .pie-cuadricula { grid-template-columns: 1fr; gap: 40px; }
      .pestanas-control { gap: 20px; overflow-x: auto; padding-bottom: 10px; }
      .pestana-boton { font-size: 0.8rem; white-space: nowrap; }

      /* Proporción del visor en celular: por defecto sigue en 16:9 igual
         que en escritorio. Se cambia a 9:16 solo cuando el proyecto activo
         tiene `vertical: true` en portafolio-data.js (lo agrega el JS con
         la clase .visor-vertical). En escritorio esta regla no aplica —
         el visor siempre queda en 16:9 ahí. */
      .visor-contenedor.visor-vertical { aspect-ratio: 9/16; max-width: 420px; margin: 0 auto; }
    }

/* ─────────────────────────────────────────────
   SUBMENÚ DESPLEGABLE DE PORTAFOLIO (nav superior)
───────────────────────────────────────────── */
.menu-item-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.menu-item-dropdown > .menu-enlace {
  display: inline-flex;
  align-items: center;
}
.menu-enlace-flecha {
  width: 10px;
  height: 10px;
  margin-left: 6px;
  transition: var(--transicion);
}
.menu-item-dropdown:hover .menu-enlace-flecha,
.menu-item-dropdown:focus-within .menu-enlace-flecha {
  transform: rotate(180deg);
}

.submenu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 240px;
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  box-shadow: 0 20px 45px rgba(10,34,64,0.14);
  padding: 10px;
  display: grid;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transicion);
  z-index: 1200;
}

/* Puente invisible para que el mouse no "pierda" el submenú al bajar desde el enlace */
.menu-item-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
}

.menu-item-dropdown:hover .submenu,
.menu-item-dropdown:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.submenu-enlace {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primario);
  text-decoration: none;
  opacity: 1;
  transition: var(--transicion);
}
.submenu-enlace:hover {
  background-color: var(--color-fondo);
  color: var(--color-secundario);
}
.submenu-enlace-icono {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background-color: var(--color-fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Versión del submenú dentro del menú móvil (acordeón, sin hover) */
.submenu-movil {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.submenu-movil.abierto { display: flex; }
.submenu-movil-enlace {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-primario);
  opacity: 0.75;
  text-decoration: none;
}
.overlay-item-portafolio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.overlay-toggle-portafolio {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-primario);
}
.overlay-toggle-portafolio .menu-enlace-flecha { width: 14px; height: 14px; }
.overlay-toggle-portafolio[aria-expanded="true"] .menu-enlace-flecha { transform: rotate(180deg); }

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

/* ─────────────────────────────────────────────
   PÁGINAS DE CATEGORÍA (Topografía / Drones / Recorridos / Time-Lapse)
───────────────────────────────────────────── */
.pagina-hero {
  padding: 93px 0 60px;
}
.pagina-hero .titulo-seccion { margin-bottom: 12px; }
.pagina-hero-descripcion {
  color: var(--color-muted);
  font-size: 1.05rem;
  max-width: 640px;
}

.pagina-galeria { padding: 20px 0 120px; }

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.enlace-volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-secundario);
  text-decoration: none;
  margin-bottom: 24px;
}
.enlace-volver:hover { color: var(--color-acento); }

/* ─────────────────────────────────────────────
   SECCIÓN APRENDE (artículos educativos)
───────────────────────────────────────────── */
.articulos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.articulo-card {
  display: block;
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: 4px;
  padding: 32px;
  text-decoration: none;
  color: inherit;
  transition: var(--transicion);
}
.articulo-card:hover {
  border-color: var(--color-secundario);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px var(--color-sombra);
}
.articulo-card-etiqueta {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-acento);
  margin-bottom: 14px;
}
.articulo-card-titulo {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-primario);
  margin-bottom: 10px;
}
.articulo-card-resumen {
  font-size: 0.92rem;
  color: var(--color-muted);
  margin-bottom: 18px;
}
.articulo-card-leer {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-secundario);
}

/* Tarjeta "próximamente" (deshabilitada, sin enlace) */
.articulo-card.proximamente {
  cursor: default;
  opacity: 0.6;
}
.articulo-card.proximamente:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-borde);
}

/* Página de artículo individual */
.articulo-contenido {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 0 100px;
}
.articulo-contenido h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-primario);
  margin: 40px 0 16px;
}
.articulo-contenido p {
  font-size: 1.02rem;
  color: var(--color-muted);
  margin-bottom: 18px;
  line-height: 1.75;
}
.articulo-contenido ul {
  margin: 0 0 18px 20px;
  color: var(--color-muted);
  font-size: 1.02rem;
  line-height: 1.75;
}
.articulo-contenido li { margin-bottom: 8px; }
.articulo-contenido strong { color: var(--color-primario); }

.articulo-aviso-legal {
  background-color: var(--color-fondo);
  border-left: 3px solid var(--color-acento);
  padding: 18px 22px;
  font-size: 0.9rem;
  color: var(--color-dim);
  margin: 30px 0;
  border-radius: 0 4px 4px 0;
}

.articulo-cta {
  margin-top: 50px;
  padding: 40px;
  background-color: var(--color-primario);
  border-radius: 4px;
  text-align: center;
}
.articulo-cta p {
  color: rgba(255,255,255,0.85);
  margin-bottom: 20px;
}

/* ─────────────────────────────────────────────
   SECCIÓN ALIANZAS (colaboradores externos)
───────────────────────────────────────────── */
.colaborador-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 18px;
}

.perfil-colaborador-cabecera {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 8px;
}
.perfil-colaborador-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--color-fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  flex-shrink: 0;
}

.perfil-contacto-directo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 8px;
}
.perfil-contacto-boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--radio-borde);
  border: 1px solid var(--color-borde);
  background-color: var(--color-blanco);
  color: var(--color-primario);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  transition: var(--transicion);
}
.perfil-contacto-boton:hover {
  border-color: var(--color-secundario);
  color: var(--color-secundario);
  transform: translateY(-2px);
}
.perfil-contacto-boton svg { width: 18px; height: 18px; fill: currentColor; }

/* ─────────────────────────────────────────────
   BOTÓN FLOTANTE DE WHATSAPP (inyectado por site.js)
   Por debajo de la cabecera (1000) y del menú móvil (1100).
   ───────────────────────────────────────────── */
.wa-flotante {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #25D366;
  color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(10,34,64,0.30);
  transition: transform .2s ease, box-shadow .2s ease, opacity .25s ease, visibility .25s ease;
}
.wa-flotante svg { width: 32px; height: 32px; fill: currentColor; }
.wa-flotante:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 30px rgba(10,34,64,0.38); }
.wa-flotante:focus-visible { outline: 3px solid var(--color-acento); outline-offset: 3px; }
.wa-flotante.wa-oculto { opacity: 0; visibility: hidden; pointer-events: none; }
body.menu-abierto .wa-flotante { display: none; }
@media print { .wa-flotante { display: none; } }

/* Credencial de perito en el hero (fondo oscuro: texto claro) */
.hero-credencial {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 540px;
  margin: -16px 0 36px;
  color: var(--color-blanco);
  font-size: 0.95rem;
  line-height: 1.5;
}
.hero-credencial svg { width: 26px; height: 26px; flex-shrink: 0; fill: var(--color-acento); margin-top: 1px; }
.hero-credencial strong { font-weight: 800; }
.hero-credencial span { color: rgba(255,255,255,0.85); }

/* Aviso de privacidad bajo el formulario de contacto */
.formulario-privacidad { margin: 0 0 16px; font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.formulario-privacidad a { color: var(--color-acento); text-decoration: underline; }