/* ===============================================
   HANKEL INSTRUMENTS - ESTILOS GLOBALES
   Este archivo se usa en TODAS las páginas
   ===============================================
   TIPOGRAFÍA ESTILO TESLA:
   Tesla usa una sans-serif geométrica minimalista, con
   títulos en mayúsculas de peso alto y tracking amplio,
   y texto de cuerpo delgado con mucho espacio en blanco.
   Usamos 'Inter' (Google Fonts, gratuita y muy similar en
   espíritu a la tipografía corporativa de Tesla) en vez de
   una fuente sci-fi como Azonix. Se carga desde <link> en
   el <head> de cada HTML.
   =============================================== */

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

body {
    font-family: 'Inter', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 300;
    background-color: #0a0c10;
    color: #e0e0e0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.brand-font, .logo-text {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.nav-links a {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    letter-spacing: 0.08em;
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== HEADER / NAV (igual en todas las páginas) ===== */
header {
    background: rgba(10, 12, 16, 0.95);
    backdrop-filter: blur(10px);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(0, 188, 212, 0.3);
    padding: 16px 0;
}

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

.logo {
    max-height: 48px;
    width: auto;
    border-radius: 6px;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 28px;
    align-items: center;
}

.nav-links a {
    color: #fff;
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
}

.nav-links a:hover, .nav-links a.active {
    color: #00bcd4;
    border-bottom-color: #00bcd4;
}

/*
 * Área táctil de 44 px sin cambiar nada de lo que se ve.
 *
 * Los enlaces de la barra miden 35-41 px de alto. Cumplen WCAG 2.5.8 (AA, 24 px) pero
 * no el nivel AAA de 44, y en una tableta apaisada —que recibe esta barra, no la de
 * móvil— son objetivos pequeños para un dedo.
 *
 * Se amplía con un pseudo-elemento y no con padding a propósito: subir el padding
 * estiraría la cabecera y, sobre todo, despegaría del texto el subrayado de hover, que
 * es `border-bottom` del propio enlace. El pseudo-elemento no pinta nada y solo el
 * anfitrión recibe el clic, así que la zona crece y el diseño queda intacto.
 *
 * Solo de 901 px en adelante: por debajo la barra se vuelve una lista vertical con
 * enlaces de 55-73 px, que ya sobran, y ahí este recuadro taparía el botón de
 * desplegar submenú, que está posicionado sobre el propio enlace.
 */
@media (min-width: 901px) {
    .nav-links > li > a {
        position: relative;
    }

    .nav-links > li > a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 44px;
        transform: translateY(-50%);
    }
}

/* ===== MEGA-MENÚ (Servicios / Productos / Industrias) ===== */
.nav-mega {
    display: flex;
    align-items: center;
    position: relative;
    /* "Puente" invisible: extiende el área de hover del li hasta tocar
       el mega-panel (que empieza en top:81px). Sin esto, al mover el
       mouse desde el enlace hacia el panel se cruza una franja del
       header que no pertenece a .nav-mega y el hover se corta a medio
       camino, haciendo que el panel parpadee y se cierre solo. */
    padding-bottom: 40px;
    margin-bottom: -40px;
}

.mega-toggle {
    display: none;
    background: none;
    border: none;
    color: #9aa3b5;
    padding: 4px;
    margin-left: 2px;
    cursor: pointer;
    line-height: 0;
}

.mega-chevron { transition: transform 0.25s ease; }

.nav-mega:hover .mega-chevron,
.nav-mega.mega-open .mega-chevron {
    transform: rotate(180deg);
    color: #00bcd4;
}

.mega-panel {
    position: fixed;
    left: 0;
    right: 0;
    top: 81px;
    background: #0d1117;
    border-bottom: 1px solid rgba(0, 188, 212, 0.25);
    box-shadow: 0 24px 40px rgba(0,0,0,0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 999;
}

.nav-mega:hover .mega-panel,
.nav-mega.mega-open .mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-panel-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 6px;
}

.mega-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 10px;
    color: #f3ede1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-bottom: none !important;
}

.mega-item:hover {
    background: rgba(0, 188, 212, 0.08);
    color: #f3ede1 !important;
}

.mega-item-title {
    font-weight: 600;
    font-size: 0.92rem;
}

.mega-item-desc {
    font-size: 0.78rem;
    color: #9aa3b5;
    line-height: 1.4;
}

.cart-icon {
    position: relative;
    background: #151a24;
    border: 1px solid #2a2f3a;
    border-radius: 8px;
    color: #fff !important;
    font-size: 1.1rem !important;
}

/* El padding va aquí y no en .cart-icon porque `.nav-links a` declara
   `padding: 8px 0` y le gana en especificidad: el `padding: 8px 14px` que tenía
   .cart-icon nunca llegó a aplicarse, y el texto quedaba pegado a los bordes.
   Los !important de arriba delatan que el mismo choque ya se había sufrido antes. */
.nav-links a.cart-icon {
    padding: 8px 8px;
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #00bcd4;
    color: #0a0c10;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 50%;
    min-width: 18px;
    text-align: center;
}

/* ===== HERO genérico para páginas internas ===== */
.page-hero {
    padding: 140px 20px 60px;
    text-align: left;
    background: linear-gradient(135deg, rgba(10,12,16,0.9), rgba(15,17,23,0.95));
}

.page-hero h1 {
    font-size: 2.6rem;
    margin-bottom: 12px;
    color: #f3ede1;
}

.page-hero p {
    color: #9aa3b5;
    max-width: 650px;
}

.btn {
    display: inline-block;
    background: #00bcd4;
    color: #0a0c10;
    padding: 14px 36px;
    border-radius: 40px;
    font-weight: bold;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,188,212,0.3);
}

.btn-outline {
    background: transparent;
    border: 1px solid #00bcd4;
    color: #00bcd4;
}

.btn-outline:hover {
    background: #00bcd4;
    color: #0a0c10;
}

.btn:disabled, .sin-stock {
    background: #3a1e1e !important;
    color: #f87171 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ===== SECCIONES GENERALES ===== */
section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    font-size: 2.4rem;
    margin-bottom: 16px;
    color: #fff;
}

.section-subtitle {
    text-align: center;
    color: #9aa3b5;
    margin-bottom: 44px;
    font-size: 1.05rem;
}

/* ===== FILTROS / BÚSQUEDA (productos y academia) ===== */
.filters-container {
    background: #151a24;
    padding: 25px;
    border-radius: 16px;
    margin-bottom: 40px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.search-section { flex: 1; min-width: 200px; }

.search-section input, .filters select {
    padding: 12px 20px;
    background: #1a1f2e;
    border: 1px solid #2a2f3a;
    color: #fff;
    border-radius: 8px;
    font-size: 1rem;
    width: 100%;
}

.filters { display: flex; gap: 15px; flex-wrap: wrap; }

/* ===== GRID DE TARJETAS (productos y cursos comparten estilo) ===== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.product-card {
    background: #12161e;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
    border: 1px solid #1f2533;
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: #00bcd4;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: linear-gradient(135deg, #1a1f2e, #0f1117);
}

/* Producto sin imagen: se dice, en vez de dejar el hueco y pedir un archivo que no existe. */
.product-image-empty::after {
    content: "Sin imagen";
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border: 1px dashed #4b5563;
    border-radius: 6px;
    color: #6b7280;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.producto-info { padding: 20px; }

.producto-codigo {
    font-family: 'Azonix', sans-serif;
    color: #00bcd4;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.product-name {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 12px;
    color: #fff;
}

.producto-descripcion {
    font-size: 0.85rem;
    color: #9aa3b5;
    margin-bottom: 15px;
}

.product-price {
    font-size: 1.8rem;
    font-weight: bold;
    color: #00bcd4;
    margin: 12px 0;
}

/* Etiqueta de disponibilidad de la tarjeta de producto.
   Fondos oscuros teñidos y texto brillante: se lee sin competir con el precio. */
.product-stock {
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 12px;
    /* El cuerpo de la tarjeta es flex en columna y estiraría la etiqueta a todo
       el ancho; con esto se ajusta a su texto. */
    align-self: flex-start;
}

/* El ámbar señala escasez, que invita a comprar; el rojo se reserva para el cero real. */
.stock-high { background: #1e3a2f; color: #4ade80; }
.stock-low { background: #3a2e1e; color: #fbbf24; }
.stock-out { background: #3a1e1e; color: #f87171; }

/* Botón de agregar al carrito de la tarjeta de producto. */
/* Mismo tratamiento que el botón de consulta: contorno, radio, altura y
   animación idénticos. Cambia solo el color, que distingue las dos acciones.
   Cian sobre la tarjeta da 7,15:1 de contraste; el verde de consulta, 9,42:1. */
.btn-add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: #00bcd4;
    border: 1px solid #00bcd4;
    padding: 10px 20px;
    border-radius: 10px;
    /* 44 px es el mínimo recomendado para un objetivo táctil. */
    min-height: 44px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.btn-add-cart:hover {
    background: rgba(0, 188, 212, 0.12);
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 188, 212, 0.15);
}

/* Confirmación breve tras agregar: el contador de la cabecera sube, pero conviene
   una señal en el propio botón para que el clic no parezca perdido.
   Aquí sí se rellena, para que el cambio de estado se note frente al contorno. */
.btn-add-cart.is-added {
    background: #1e3a2f;
    color: #4ade80;
    border-color: #4ade80;
}

.btn-add-cart.is-added:hover {
    background: #1e3a2f;
    transform: none;
    box-shadow: none;
}

.btn-add-cart:disabled {
    background: transparent;
    color: #f87171;
    border-color: #f87171;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-add-cart:disabled:hover {
    background: transparent;
    transform: none;
    box-shadow: none;
}

/* Datos opcionales del cliente en la página del carrito. */
.cart-customer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #2a2f3a;
}

.cart-customer label {
    display: block;
    font-size: 0.8rem;
    color: #9aa3b5;
    margin-bottom: 6px;
}

.cart-customer input,
.cart-customer textarea {
    width: 100%;
    background: #1a1f2e;
    border: 1px solid #2a2f3a;
    color: #fff;
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.9rem;
    margin-bottom: 14px;
}

.cart-customer input:focus,
.cart-customer textarea:focus {
    outline: none;
    border-color: #00bcd4;
}

.cart-customer textarea { resize: vertical; min-height: 64px; }

/* ===== CARRITO ===== */
.cart-item {
    display: flex;
    gap: 16px;
    align-items: center;
    background: #12161e;
    border: 1px solid #1f2533;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

.cart-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

.cart-item-info { flex: 1; }

.cart-item-price { color: #00bcd4; font-weight: bold; }

.cart-quantity {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-quantity button {
    background: #1a1f2e;
    border: 1px solid #2a2f3a;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
}

.cart-remove {
    background: none;
    border: none;
    color: #f87171;
    cursor: pointer;
    font-size: 1.2rem;
}

.cart-summary {
    background: #151a24;
    border-radius: 16px;
    padding: 28px;
    position: sticky;
    top: 110px;
}

.cart-total-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    color: #9aa3b5;
}

.carrito-total-final {
    display: flex;
    justify-content: space-between;
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
    border-top: 1px solid #2a2f3a;
    padding-top: 16px;
    margin-top: 16px;
}

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

.cart-empty {
    text-align: center;
    padding: 60px 20px;
    color: #9aa3b5;
}

/* ===== ADMIN ===== */
.admin-login {
    max-width: 400px;
    margin: 140px auto;
    background: #151a24;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
}

.admin-login input {
    width: 100%;
    padding: 12px 16px;
    margin: 16px 0;
    background: #1a1f2e;
    border: 1px solid #2a2f3a;
    color: #fff;
    border-radius: 8px;
}

.admin-panel { padding: 140px 20px 60px; max-width: 1000px; margin: 0 auto; }

.admin-box {
    background: #151a24;
    border: 1px solid #2a2f3a;
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 24px;
}

.admin-box h3 { color: #00bcd4; margin-bottom: 12px; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
    font-size: 0.85rem;
}

.admin-table th, .admin-table td {
    border: 1px solid #2a2f3a;
    padding: 8px 10px;
    text-align: left;
}

.admin-table th { background: #1a1f2e; color: #00bcd4; }

/* ===== FOOTER ===== */
footer {
    background: #05070a;
    padding: 48px 0 32px;
    border-top: 1px solid #1a1f2a;
    text-align: center;
}

footer a { color: #00bcd4; }
footer a:hover { color: #fff; }

.footer-links {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

/* ===== MENÚ MÓVIL (HAMBURGUESA) ===== */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    /* 44 y no 40: es un botón de icono en móvil, donde se pulsa con el dedo. Las tres
       barras se dibujan con los hijos, así que agrandar la caja no cambia el icono. */
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .cart-layout { grid-template-columns: 1fr; }
    .cart-summary { position: static; }

    .nav-toggle { display: flex; }

    .nav-links {
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        margin-top: 0;
        transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;
    }

    .nav-links.nav-open {
        max-height: 70vh;
        overflow-y: auto;
        opacity: 1;
        margin-top: 16px;
    }

    .nav-links li { width: 100%; }

    .nav-links a {
        display: block;
        padding: 14px 4px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        font-size: 1rem;
    }

    .nav-links a.cart-icon {
        display: inline-flex;
        width: auto;
        /* Sin esto hereda el "padding: 14px 4px" de .nav-links a, que gana en
           especificidad a .cart-icon y deja el texto pegado al borde. */
        padding: 10px;
    }

    .nav-mega {
        flex-direction: column;
        align-items: stretch;
        position: relative;
    }

    .nav-mega .nav-mega-trigger {
        padding-right: 40px;
    }

    .mega-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 4px;
        /* 44 por lo mismo que .nav-toggle: se pulsa con el dedo. El chevron va dentro
           y no cambia de tamaño; solo crece la caja que recibe el toque. */
        width: 44px;
        height: 44px;
    }

    .mega-panel {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        box-shadow: none;
        border-bottom: none;
        background: rgba(255,255,255,0.03);
        border-radius: 8px;
        transition: max-height 0.3s ease;
    }

    .nav-mega.mega-open .mega-panel {
        max-height: 600px;
    }

    .mega-panel-inner {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 4px 0 12px 8px;
    }

    .mega-item {
        padding: 10px 8px;
    }
}

@media (max-width: 768px) {
    .page-hero h1 { font-size: 2rem; }
    .section-title { font-size: 1.8rem; }
    .filters-container { flex-direction: column; }
    .filters { width: 100%; }
    .filters select { flex: 1; }
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .section-title { font-size: 1.5rem; }
    .btn { padding: 12px 24px; font-size: 0.85rem; }
}

/* ===== ANIMACIÓN DE ENTRADA PARA TARJETAS (todas las páginas) ===== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

:is(.service-card, .family-card, .line-banner, .project-card, .course-card, .product-card, .scope-card) {
    animation: fadeInUp 1s ease-out backwards;
}

:is(.service-card, .family-card, .line-banner, .project-card, .course-card, .product-card, .scope-card):nth-child(1) { animation-delay: 0.1s; }
:is(.service-card, .family-card, .line-banner, .project-card, .course-card, .product-card, .scope-card):nth-child(2) { animation-delay: 0.24s; }
:is(.service-card, .family-card, .line-banner, .project-card, .course-card, .product-card, .scope-card):nth-child(3) { animation-delay: 0.38s; }
:is(.service-card, .family-card, .line-banner, .project-card, .course-card, .product-card, .scope-card):nth-child(4) { animation-delay: 0.52s; }
:is(.service-card, .family-card, .line-banner, .project-card, .course-card, .product-card, .scope-card):nth-child(5) { animation-delay: 0.66s; }
:is(.service-card, .family-card, .line-banner, .project-card, .course-card, .product-card, .scope-card):nth-child(6) { animation-delay: 0.8s; }
:is(.service-card, .family-card, .line-banner, .project-card, .course-card, .product-card, .scope-card):nth-child(7) { animation-delay: 0.94s; }
:is(.service-card, .family-card, .line-banner, .project-card, .course-card, .product-card, .scope-card):nth-child(n+8) { animation-delay: 1.08s; }

@media (prefers-reduced-motion: reduce) {
    :is(.service-card, .family-card, .line-banner, .project-card, .course-card, .product-card, .scope-card) {
        animation: none;
    }
}