/* ============================================================
   stylesflejes.css
   Hoja de estilos global del sitio web de Flejes Imperiales.
   Se aplica a todas las páginas del proyecto mediante <link>.
   ============================================================ */

/* ── Variables CSS globales (Design Tokens) ──────────────────
   Define los colores y sombras reutilizables en todo el sitio.
   Cambiar aquí un valor lo actualiza en todos los lugares
   donde se use la variable. */
:root {
    --color-primario: #070606;
    /* Negro casi puro: fondo del footer */
    --color-secundario: #a58f7b;
    /* Café beige: color del título principal */
    --color-acento: #22218a;
    /* Azul oscuro: botones, bordes destacados */
    --fondo-claro: #f4f1ec;
    /* Beige claro: separadores de imagen */
    --fondo-seccion: #e8e5e1;
    /* Gris cálido: fondos de secciones */
    --texto-oscuro: #ffffff;
    /* Blanco: texto por defecto sobre fondos oscuros */
    --sombra: rgba(0, 0, 0, 0.08);
    /* Sombra suave estándar */
}

/* ── Fondo del body con degradado ───────────────────────────
   Primer bloque: aplica un degradado horizontal como fondo.
   (Este bloque es reemplazado por el siguiente.) */
body {
    background: #2A3F5D;
    background: linear-gradient(90deg, #2A3F5D 0%, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%);
}

/* ── Estilos base del body ───────────────────────────────────
   Tipografía, márgenes, color de texto y altura de línea
   que se aplican a toda la página. */
body {
    font-family: 'system-ui', sans-serif;
    /* Fuente del sistema operativo */
    margin: 0;
    /* Elimina el margen predeterminado del navegador */
    background-color: #fafafa;
    /* Fondo blanco suave fallback */
    color: var(--texto-oscuro);
    /* Color de texto: blanco */
    line-height: 1.6;
    /* Espaciado entre líneas para mejor legibilidad */
}

/* ══════════════════════════════════════════════════════════
   HEADER — Encabezado de la página
   ══════════════════════════════════════════════════════════ */
header {
    background: #a8caf0;
    /* Fondo azul claro pastel */
    padding: 2rem 10%;
    /* Espaciado interno: vertical y horizontal */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Sombra sutil en la parte inferior */
}

/* Título principal (h1): contiene el logo de la empresa */
.titulo-principal {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: 500;
    -webkit-text-stroke: 0.5px #000;
    /* Borde sutil alrededor del texto */
    color: var(--color-secundario);
    /* Color café beige */
    margin-bottom: 1.5rem;
    text-align: center;
    letter-spacing: 1px;
    display: flex;
    /* Uso de flexbox para centrar logo e imagen */
    align-items: center;
    justify-content: center;
    gap: 1rem;
    /* Separación entre logo y texto */
}

/* Imagen del logo dentro del header */
.logo-header {
    height: 70px;
    /* Altura fija del logo */
    width: auto;
    /* Ancho proporcional automático */
    object-fit: contain;
    /* Mantiene proporciones de la imagen */
    vertical-align: middle;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    /* Sombra suave debajo del logo */
}

/* ══════════════════════════════════════════════════════════
   NAVEGACIÓN — Barra de botones de navegación
   ══════════════════════════════════════════════════════════ */
nav {
    position: relative;
    display: flex;
    /* Disposición horizontal de los botones */
    justify-content: center;
    /* Centra los botones */
    gap: 3rem;
    /* Separación entre botones */
}


/* ── Botón principal (estilo decorativo, usado en "Inicio") ─
   Utiliza múltiples gradientes y blend-modes para un efecto
   visual llamativo. Fuente: Uiverse.io by omriluz */
button {
    background: linear-gradient(245deg, #000000 0%, #fdff96 100%),
        linear-gradient(245deg, #0038ff 0%, #000000 100%),
        radial-gradient(100% 225% at 100% 0%, #4200ff 0%, #001169 100%),
        linear-gradient(245deg, #000000 0%, #ffb800 100%),
        radial-gradient(115% 107% at 40% 100%,
            #eaf5ff 0%,
            #eaf5ff 40%,
            #a9c6de calc(40% + 1px),
            #a9c6de 70%,
            #247e6c calc(70% + 2px),
            #247e6c 85%,
            #e4c666 calc(85% + 2px),
            #e4c666 100%),
        linear-gradient(65deg,
            #083836 0%,
            #083836 40%,
            #66d37e calc(40% + 1px),
            #66d37e 60%,
            #c6e872 calc(60% + 1px),
            #c6e872 100%);
    background-blend-mode: overlay, screen, overlay, hard-light, overlay, normal;
    font-family: inherit;
    padding: 0.6em 1.3em;
    font-weight: 900;
    font-size: 18px;
    border: 3px solid black;
    border-radius: 0.4em;
    /* Esquinas ligeramente redondeadas */
    box-shadow: 0.1em 0.1em;
    /* Sombra que simula elevación */
}

/* Texto dentro del botón principal: forzado a blanco */
button>span {
    color: white;
}

/* Efecto hover: el botón se eleva ligeramente */
button:hover {
    transform: translate(-0.05em, -0.05em);
    box-shadow: 0.15em 0.15em;
}

/* Efecto click: el botón "se hunde" */
button:active {
    transform: translate(0.05em, 0.05em);
    box-shadow: 0.05em 0.05em;
}


/* ── Botón secundario (.button2) ─────────────────────────────
   Estilo para los botones de navegación "Contáctanos" y
   "Sobre nosotros". Degradado horizontal azul.
   Fuente: Uiverse.io by mayurd8862 */
.button2 {
    background: linear-gradient(to right, rgb(169, 215, 241),
            rgb(73, 67, 241));
    /* Degradado celeste → azul eléctrico */
    font-family: inherit;
    padding: 0.6em 1.3em;
    font-weight: 900;
    font-size: 18px;
    border: 2px solid black;
    border-radius: 0.4em;
    box-shadow: 0.1em 0.1em;
}

/* Hover: se eleva */
.button2:hover {
    transform: translate(-0.05em, -0.05em);
    box-shadow: 0.15em 0.15em;
}

/* Click: se hunde */
.button2:active {
    transform: translate(0.05em, 0.05em);
    box-shadow: 0.05em 0.05em;
}

/* ══════════════════════════════════════════════════════════
   GRID PRINCIPAL — Contenedor de las tarjetas de categoría
   Usado en indexflejes.html para mostrar "Fleje Premium"
   y "Catálogo de Productos" como tarjetas con imagen.
   ══════════════════════════════════════════════════════════ */

/* Grid responsivo: 2 columnas en pantallas grandes,
   1 columna en pantallas pequeñas (auto-fit) */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    /* Centrado horizontal */
}

/* Cada tarjeta del grid: bordes redondeados y animación hover */
.grid-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    /* Oculta lo que desborde del border-radius */
    transition: transform 0.3s ease;
}

/* Contenedor de la imagen: altura fija de 400px */
.image-overlay {
    position: relative;
    height: 400px;
}

/* Imagen del grid: cubre todo el contenedor sin distorsionarse */
.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Recorta la imagen para llenar el espacio */
    transition: transform 0.4s ease;
}

/* Capa de texto sobre la imagen: overlay semitransparente negro */
.text-overlay {
    position: absolute;
    /* Se superpone sobre la imagen */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
    /* Degradado negro semitransparente */
    color: white;
    text-align: center;
}

/* Título dentro del overlay (ej: "Fleje Premium") */
.titulo-secundario {
    font-family: 'Sora Black', sans-serif;
    font-size: 2.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* Sombra para legibilidad */
    margin-bottom: 1rem;
    line-height: 1.2;
}

/* Subtítulo dentro del overlay (ej: "y productos Destacados") */
.subtitulo {
    font-family: 'Arial', sans-serif;
    font-size: 1.4rem;
    font-weight: 300;
    max-width: 80%;
}

/* Hover en tarjeta: se eleva con sombra */
.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Media query: en pantallas pequeñas reduce tamaño de textos */
@media (max-width: 768px) {
    .titulo-principal {
        font-size: 2rem;
    }

    .subtitulo {
        font-size: 1.2rem;
    }
}

/****************************************************/

/* ── Código comentado: Menú desplegable (no usado actualmente)
   Se conserva como referencia para futura implementación.

.dropdown {
    position: absolute;
    top: 100%;
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    min-width: 250px;
    z-index: 10;
}

.nav-item:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
*/

/* ══════════════════════════════════════════════════════════
   CTA COTIZACIÓN — Banner de llamada a la acción
   Aparece en las páginas de productos. Llama al usuario
   a solicitar una cotización.
   ══════════════════════════════════════════════════════════ */
.cta-cotizacion {
    margin: 2rem auto;
    max-width: 680px;
    padding: 1.1rem 2rem;
    background-color: #1e2d42;
    /* Azul marino oscuro */
    border-left: 4px solid var(--color-acento);
    /* Borde izquierdo azul acento */
    border-radius: 4px;
}

/* Enlace dentro del banner de cotización */
.cta-cotizacion-link {
    font-family: 'system-ui', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #f0f0f0 !important;
    /* Color blanco forzado */
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: color 0.2s ease;
}

/* Hover: cambia el color del texto al azul acento */
.cta-cotizacion-link:hover {
    color: var(--color-acento) !important;
    opacity: 1 !important;
}

/* Las flechitas (▶) a los lados del texto del CTA */
.cta-flecha {
    font-size: 0.85rem;
    color: var(--color-acento);
    transition: transform 0.2s ease;
}

/* Al pasar el mouse, las flechas se desplazan hacia la derecha */
.cta-cotizacion-link:hover .cta-flecha {
    transform: translateX(4px);
}

/* ══════════════════════════════════════════════════════════
   PRODUCTOS — Tarjetas de catálogo de productos
   Usado en productos.html y productosPremium.html.
   ══════════════════════════════════════════════════════════ */

/* Contenedor grid de tarjetas de productos */
.contenedor-productos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Responsivo automático */
    gap: 2rem;
    padding: 4rem 10%;
}

/* Tarjeta individual de producto */
.caja-producto {
    background: var(--color-acento);
    /* Fondo azul oscuro */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    /* Animación suave al hacer hover */
}

/* Hover: la tarjeta se eleva */
.caja-producto:hover {
    transform: translateY(-5px);
}

/* Imagen del producto: altura fija y recorte proporcional */
.imagen-producto {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 2px solid var(--fondo-claro);
    /* Separador entre imagen e info */
}

/* Contenedor del texto descriptivo del producto */
.info-producto {
    padding: 1.5rem;
}

/* Precio / Compra mínima del producto */
.precio {
    font-size: 1.25rem;
    color: var(--color-primario);
    /* Negro */
    margin-top: 1rem;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════
   SECCIÓN UBICACIÓN — Mapa e información de dirección
   Usado en indexflejes.html. Layout de 2 columnas.
   ══════════════════════════════════════════════════════════ */
.seccion-ubicacion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Texto a la izquierda, mapa a la derecha */
    gap: 3rem;
    padding: 4rem 10%;
    background: linear-gradient(90deg, #2A3F5D 0%, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 100%);
}

/* Iframe del mapa de Google Maps: ocupa todo el ancho disponible */
.mapa-iframe {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 12px;
    background: white;
}

/* ══════════════════════════════════════════════════════════
   FORMULARIO DE CONTACTO — Estilos genéricos del formulario
   (estilos específicos de contacto.html están en línea en
   ese archivo)
   ══════════════════════════════════════════════════════════ */

/* Contenedor principal del formulario */
.form {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    /* Campos apilados verticalmente */
    gap: 10px;
    width: 350px;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 30px 30px -30px rgba(27, 26, 26, 0.315);
    margin: 1.5rem auto;
    /* Centrado horizontal manteniendo diseño */
}

/* Título del formulario */
.form .title {
    color: royalblue;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Campos de texto del formulario */
.form input {
    outline: 0;
    border: 1px solid rgb(219, 213, 213);
    padding: 8px 14px;
    border-radius: 8px;
    width: 92%;
    height: 50px;
}

/* Área de texto (textarea) del formulario */
.form textarea {
    border-radius: 8px;
    height: 100px;
    width: 92%;
    resize: none;
    /* El usuario no puede redimensionarla */
    outline: 0;
    padding: 8px 14px;
    border: 1px solid rgb(219, 213, 213);
}

/* Botón de envío dentro del formulario genérico */
.form button {
    align-self: flex-end;
    /* Se alinea al lado derecho */
    padding: 8px;
    outline: 0;
    border: 0;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    background-color: royalblue;
    color: #fff;
    cursor: pointer;
}

/* En pantallas medianas/grandes, el formulario mantiene 350px */
@media (min-width: 768px) {
    .form {
        width: 350px;
    }
}

/* ══════════════════════════════════════════════════════════
   REDES SOCIALES — Iconos de redes en la página de contacto
   ══════════════════════════════════════════════════════════ */

/* Contenedor de los iconos de redes sociales */
.social-section {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Cada icono de red social: círculo con fondo azul */
.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* Forma circular */
    background: royalblue;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* Hover: el icono se eleva */
.social-icon:hover {
    transform: translateY(-3px);
}

/* ══════════════════════════════════════════════════════════
   FOOTER — Pie de página
   Aparece en todas las páginas con color oscuro.
   ══════════════════════════════════════════════════════════ */
footer {
    background: var(--color-primario);
    /* Negro */
    color: white;
    padding: 2rem 10%;
    text-align: center;
    font-size: 0.9rem;
}

/* Enlace del teléfono en el footer: hereda el color del texto */
.enlace-telefono {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s;
}

/* Hover: reduce la opacidad para dar efecto de feedback */
.enlace-telefono:hover {
    opacity: 0.8;
}


/* ══════════════════════════════════════════════════════════
   ENLACES GLOBALES — Elimina el subrayado y el color azul
   predeterminado del navegador en todos los estados del <a>.
   ══════════════════════════════════════════════════════════ */
a,
a:visited,
a:hover,
a:active,
a:focus {
    text-decoration: none;
    color: #ffffff !important;
    /* Color blanco forzado en todos los estados */
    outline: none;
    /* Quita el borde de foco del navegador */
}

/* Efecto hover personalizado: reduce opacidad */
a:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* Accesibilidad: borde visible al navegar con teclado (Tab) */
a:focus {
    box-shadow: 0 0 0 2px #ffffff;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — Ajustes para pantallas móviles (<768px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* La sección de ubicación pasa a una sola columna */
    .seccion-ubicacion {
        grid-template-columns: 1fr;
    }

    /* El título principal se reduce en tamaño */
    .titulo-principal {
        font-size: 2rem;
    }
}

/* ══════════════════════════════════════════════════════════
   BOTÓN FLOTANTE DE WHATSAPP — Siempre visible
   Fijo en la esquina inferior derecha de todas las páginas.
   Incluye animación de pulso para llamar la atención.
   ══════════════════════════════════════════════════════════ */

/* Contenedor del botón flotante: fijo en esquina inferior derecha */
.whatsapp-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    /* Siempre por encima de todo */
    display: flex;
    align-items: center;
    gap: 0;
    transition: gap 0.3s ease;
}

/* Hover: separa el tooltip del botón */
.whatsapp-float:hover {
    gap: 10px;
}

/* Tooltip: texto que aparece al lado del botón al hacer hover */
.whatsapp-float-tooltip {
    background: #ffffff;
    color: #1e2d42;
    font-family: 'system-ui', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* Hover: muestra el tooltip */
.whatsapp-float:hover .whatsapp-float-tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* Botón circular verde de WhatsApp */
.whatsapp-float-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    text-decoration: none !important;
    /* Animación de pulso que atrae la atención */
    animation: whatsapp-pulse 2s infinite;
}

/* Hover: el botón crece un poco y la sombra se intensifica */
.whatsapp-float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.55);
    background: #20bd5a;
    animation: none;
    /* Detiene el pulso al hacer hover */
}

/* Ícono SVG dentro del botón */
.whatsapp-float-btn svg {
    width: 32px;
    height: 32px;
    fill: #ffffff;
}

/* Animación de pulso: un anillo verde que se expande */
@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* En móvil: botón un poco más pequeño y tooltip oculto */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 16px;
        right: 16px;
    }

    .whatsapp-float-btn {
        width: 54px;
        height: 54px;
    }

    .whatsapp-float-btn svg {
        width: 28px;
        height: 28px;
    }

    /* En móvil el tooltip no se muestra (el toque ya abre WhatsApp) */
    .whatsapp-float-tooltip {
        display: none;
    }
}