/* =========================================================
   PÁGINA CLIENTES — rejilla de logos con animación de volteo 3D
   Cada logo entra girando sobre su eje horizontal, uno tras otro.
   ========================================================= */

/* ---------- Video de fondo de toda la página ---------- */
.pagina-video-fondo {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    background: var(--navy-900);
}
.pagina-video-velo {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6,16,33,.8), rgba(6,16,33,.88));
}
.section.con-video-fondo { background: transparent; }
.section.con-video-fondo .eyebrow { color: var(--sky-400); }
.section.con-video-fondo .section-head h2 { color: #fff; }
.section.con-video-fondo .section-head p { color: #d5e0f0; }

/* Intro más ancha y justificada (solo en esta página): el texto es
   largo y en el ancho estándar de .section-head hacía muchos saltos. */
.section-head.intro-ancha {
    max-width: 900px;
}
.section-head.intro-ancha p {
    text-align: justify;
    hyphens: auto;
}

.clientes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 22px;
    margin-top: 8px;
    /* la perspectiva hace que el volteo se vea en 3D y no plano */
    perspective: 1000px;
}

/* ---------- Celdas de CRISTAL BRILLANTE ---------- */
.cliente-celda {
    aspect-ratio: 3 / 2;
    background: rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
            backdrop-filter: blur(10px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28),
                inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.cliente-celda:hover {
    transform: translateY(-5px) scale(1.03);
    background: rgba(255, 255, 255, .7);
    border-color: #fff;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .34),
                inset 0 1px 0 rgba(255, 255, 255, 1);
    z-index: 2;
}
.cliente-celda img {
    max-width: 150%;
    max-height: 150%;
    object-fit: contain;
}

/* recuadro de respaldo cuando el logo aún no existe */
.cliente-celda .ph-texto {
    font-size: .8rem;
    font-weight: 600;
    color: #5f6b7d;
    text-align: center;
}

/* ---------- Animación de volteo 3D ---------- */
/* Estado inicial: volteado hacia atrás y transparente. La clase
   .voltear-lista (que pone el JS al entrar en pantalla) dispara el giro. */
.clientes-grid.animar .cliente-celda {
    opacity: 0;
    transform: rotateX(-90deg);
    transform-origin: center top;
}
.clientes-grid.animar.voltear-lista .cliente-celda {
    animation: cliente-voltear .7s cubic-bezier(.34, 1.4, .5, 1) forwards;
}

@keyframes cliente-voltear {
    0%   { opacity: 0; transform: rotateX(-90deg); }
    60%  { opacity: 1; transform: rotateX(12deg); }   /* se pasa un poco y regresa */
    100% { opacity: 1; transform: rotateX(0); }
}

/* si el usuario pidió menos movimiento, nada de volteos */
@media (prefers-reduced-motion: reduce) {
    .clientes-grid.animar .cliente-celda,
    .clientes-grid.animar.voltear-lista .cliente-celda {
        opacity: 1;
        transform: none;
        animation: none;
    }
}
/* =========================================================
   CLIENTES en forma de bloques tipo flecha (arrow block convex)
   Alternativa a los logos. Cada bloque tiene forma de flecha con
   el nombre del cliente dentro.
   ========================================================= */
.clientes-flechas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px 10px;
    margin-top: 20px;
}

.cliente-flecha {
    position: relative;
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 34px;
    /* forma de "flecha doble / hexágono horizontal": punta hacia afuera
       en ambos lados (◄ izquierda y derecha ►) */
    clip-path: polygon(
        20px 0,                 /* superior izquierda (después de la punta) */
        calc(100% - 20px) 0,    /* superior derecha (antes de la punta) */
        100% 50%,               /* punta derecha (apunta hacia afuera) */
        calc(100% - 20px) 100%, /* inferior derecha */
        20px 100%,              /* inferior izquierda */
        0 50%                   /* punta izquierda (apunta hacia afuera) */
    );
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    text-align: center;
    letter-spacing: .01em;
    transition: transform .2s ease, filter .2s ease;
    box-shadow: 0 6px 16px rgba(11, 36, 71, .18);
}
.cliente-flecha span {
    display: block;
    line-height: 1.25;
    /* deja espacio para que el texto no se meta en las puntas */
    padding: 0 6px;
}
.cliente-flecha:hover {
    transform: translateY(-4px) scale(1.02);
    filter: brightness(1.08);
}

/* 4 variantes de color de la marca, se alternan */
.cliente-flecha-1 { background: linear-gradient(135deg, #1f6fb2, #14395f); }
.cliente-flecha-2 { background: linear-gradient(135deg, #14395f, #0b2447); }
.cliente-flecha-3 { background: linear-gradient(135deg, #2a7cc0, #1f6fb2); }
.cliente-flecha-4 { background: linear-gradient(135deg, #3a4d7a, #0b2447); }

/* en móvil, una columna */
@media (max-width: 560px) {
    .clientes-flechas { grid-template-columns: 1fr; }
}

/* =========================================================
   3 TUBOS con LOGOS que GIRAN en 3D (caras de cilindro horizontal)
   Los 3 logos visibles de cada tubo se deslizan sobre el eje vertical,
   dando sensación de profundidad. Los 9 giran en bloque.
   ========================================================= */
.clientes-tubos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
    width: 100%;
    perspective: 1200px;      /* profundidad 3D para todo el conjunto */
}

.tubo-ventana {
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    overflow: hidden;
    transform-style: preserve-3d;
}

/* cada logo es una "cara" que se desliza lateralmente con profundidad */
.tubo-item {
    flex: 0 0 auto;
    height: 84px;
    min-height: 84px;
    margin: 0;
    font-size: .92rem;
    transition: transform .5s ease, opacity .5s ease, filter .5s ease;
}
/* sale deslizándose hacia la derecha, alejándose un poco (profundidad) */
.tubo-item.sale-der {
    transform: translateX(90%) translateZ(-120px) scale(.85);
    opacity: 0;
    filter: brightness(.7);
}
/* posicionado a la izquierda, listo para entrar (sin transición visible) */
.tubo-item.entra-izq {
    transform: translateX(-90%) translateZ(-120px) scale(.85);
    opacity: 0;
    filter: brightness(.7);
    transition: none;
}

/* ---------- Cara como LOGO ----------
   Las imágenes son un lienzo CUADRADO con la flecha centrada y mucho
   margen transparente arriba y abajo (la flecha ocupa ~33% del alto).
   Por eso NO usamos object-fit: contain (encajaría el cuadrado entero y
   la flecha se vería chica). En su lugar agrandamos la imagen para que
   la flecha llene el alto del cuadro y recortamos el sobrante
   transparente con overflow: hidden. La imagen ya trae su propio borde
   plateado, así que no le ponemos marco. */
.tubo-item.tubo-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.tubo-item.tubo-logo img {
    /* 300% ≈ 1 / 0.33 : la flecha (33% del PNG) pasa a llenar el alto.
       Súbelo (p. ej. 320%) para que la flecha se vea aún más grande,
       o bájalo (p. ej. 270%) para dejar un pequeño margen alrededor. */
    height: 300%;
    width: auto;
    max-width: none;
    display: block;
}

/* Respaldo: si el logo aún no existe, mostramos el nombre del cliente
   dentro de una tarjeta clara (lo pone el JS con data-nombre). */
.tubo-item.tubo-logo.sin-logo {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28),
                inset 0 1px 0 rgba(255, 255, 255, .9);
}
.tubo-item.tubo-logo.sin-logo img { display: none; }
.tubo-item.tubo-logo.sin-logo::after {
    content: attr(data-nombre);
    color: #14395f;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.2;
    text-align: center;
    padding: 0 8px;
}

.clientes-cta {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

/* en móvil, los 3 tubos se apilan en 1 columna */
@media (max-width: 720px) {
    .clientes-tubos { grid-template-columns: 1fr; gap: 12px; }
    .tubo-ventana { height: 300px; }
}