/* ==========================================================================
   styles.css — Ferrevolt Linktree
   Estilo: Industrial moderno, tema oscuro
   Paleta: Amarillo construcción + Negro + Gris acero + Blanco
   ========================================================================== */

/* ── VARIABLES DE COLORES Y CONFIGURACIÓN ─────────────────────────────────
   Edita estas variables para cambiar TODA la paleta de una vez.
   ───────────────────────────────────────────────────────────────────────── */
:root {
    /* Colores de fondo */
    --color-fondo:          #0d0d0f;   /* Negro casi absoluto */
    --color-fondo-card:     #16181f;   /* Gris muy oscuro (tarjetas) */
    --color-acero:          #1e2128;   /* Gris acero oscuro (botones secundarios) */
    --color-acero-hover:    #272b35;   /* Gris acero al hover */

    /* Color principal de marca */
    --color-acento:         #f5c518;   /* Amarillo construcción */
    --color-acento-hover:   #e0b215;   /* Amarillo más oscuro para hover */
    --color-acento-glow:    rgba(245, 197, 24, 0.25); /* Brillo amarillo */

    /* Bordes */
    --color-borde:          #252830;   /* Borde sutil oscuro */
    --color-borde-hover:    #3d4149;   /* Borde al hover */

    /* Textos */
    --color-texto:          #f0f2f5;   /* Blanco suave */
    --color-texto-muted:    #7e8694;   /* Gris para subtítulos */
    --color-texto-oscuro:   #0d0d0f;   /* Para texto sobre fondo amarillo */

    /* Colores especiales de botones */
    --color-whatsapp:       #25d366;
    --color-whatsapp-bg:    rgba(37, 211, 102, 0.1);
    --color-whatsapp-borde: rgba(37, 211, 102, 0.25);
    --color-meli:           #ffe600;
    --color-meli-bg:        rgba(255, 230, 0, 0.08);
    --color-meli-borde:     rgba(255, 230, 0, 0.2);
    --color-meli-texto:     #1a1600;

    /* Tipografías */
    --fuente-titulo:        'Oswald', sans-serif;        /* Impactante, industrial */
    --fuente-cuerpo:        'Nunito Sans', sans-serif;   /* Limpia, legible */

    /* Forma y sombras */
    --radio-boton:          14px;
    --radio-badge:          12px;
    --sombra-boton:         0 4px 16px rgba(0, 0, 0, 0.5);
    --sombra-acento:        0 4px 24px var(--color-acento-glow);

    /* Velocidad de transiciones */
    --transicion:           0.22s ease;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--fuente-cuerpo);
    background-color: var(--color-fondo);
    color: var(--color-texto);
    min-height: 100vh;
    line-height: 1.5;

    /* ── TEXTURA DE FONDO: efecto metal brushed / concreto (CSS puro) ── */
    background-image:
        /* Líneas horizontales muy finas → sensación de metal cepillado */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(255, 255, 255, 0.006) 3px,
            rgba(255, 255, 255, 0.006) 4px
        ),
        /* Vetas diagonales muy sutiles → profundidad */
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 40px,
            rgba(255, 255, 255, 0.012) 40px,
            rgba(255, 255, 255, 0.012) 41px
        ),
        /* Gradiente de fondo base */
        linear-gradient(
            160deg,
            #0a0a0c 0%,
            #0f1117 35%,
            #0d0e13 65%,
            #080809 100%
        );
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ── CONTENEDOR PRINCIPAL ──────────────────────────────────────────────── */
.container {
    max-width: 580px;
    margin: 0 auto;
    padding: 36px 16px 52px;
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECCIÓN 1: HEADER
   ══════════════════════════════════════════════════════════════════════════ */
.header {
    text-align: center;
    padding-bottom: 28px;
    animation: fadeInDown 0.6s ease both;
}

/* Contenedor del logo */
.logo-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
    position: relative;
}

/* Logo real (se oculta si no existe con onerror en HTML) */
.logo {
    width: 110px;
    height: 110px;
    object-fit: contain;
    border-radius: 20px;
    filter: drop-shadow(0 0 24px var(--color-acento-glow));
    position: relative;
    z-index: 2;
}

/* Placeholder SVG — se muestra cuando no hay logo PNG */
.logo-placeholder {
    width: 110px;
    height: 110px;
    border-radius: 20px;
    overflow: hidden;
    filter: drop-shadow(0 0 24px var(--color-acento-glow));
    border: 1px solid rgba(245, 197, 24, 0.2);
}

.logo-placeholder svg {
    width: 100%;
    height: 100%;
}

/* Nombre de la empresa */
.nombre-empresa {
    font-family: var(--fuente-titulo);
    font-size: clamp(2.8rem, 10vw, 4rem);
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 10px;

    /* Texto con degradado: blanco → amarillo → blanco */
    background: linear-gradient(
        135deg,
        #ffffff 0%,
        var(--color-acento) 50%,
        #e8e8e8 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Subtítulo */
.subtitulo {
    font-family: var(--fuente-cuerpo);
    font-size: 0.8rem;
    color: var(--color-texto-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Línea decorativa dorada bajo el header */
.header::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-acento), transparent);
    margin: 22px auto 0;
    border-radius: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECCIÓN 2: BOTONES PRINCIPALES
   ══════════════════════════════════════════════════════════════════════════ */
.botones-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

/* ── Estilo base de todos los botones ── */
.boton {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border-radius: var(--radio-boton);
    text-decoration: none;
    font-family: var(--fuente-cuerpo);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    border: 1px solid var(--color-borde);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        transform var(--transicion),
        box-shadow var(--transicion),
        background-color var(--transicion),
        border-color var(--transicion),
        color var(--transicion);
    /* Asegurar que el texto nunca se corte */
    min-height: 56px;
}

/* Efecto de brillo que cruza el botón al hacer hover */
.boton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.07) 50%,
        transparent 100%
    );
    transition: left 0.55s ease;
    pointer-events: none;
}

.boton:hover::before {
    left: 150%;
}

/* Hover común */
.boton:hover {
    transform: translateY(-2px) scale(1.008);
    box-shadow: var(--sombra-boton);
}

/* Al pulsar */
.boton:active {
    transform: translateY(0) scale(0.995);
    box-shadow: none;
}

/* Ícono SVG del botón */
.boton-icono {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boton-icono svg {
    width: 100%;
    height: 100%;
}

/* Texto del botón */
.boton-texto {
    flex: 1;
    text-align: left;
}

/* Flecha decorativa al final */
.boton-flecha {
    font-size: 1rem;
    opacity: 0.4;
    flex-shrink: 0;
    transition: opacity var(--transicion), transform var(--transicion);
}

.boton:hover .boton-flecha {
    opacity: 0.9;
    transform: translateX(4px);
}

/* ── Variante PRIMARIO: botón de tienda web (amarillo destacado) ── */
.boton-primario {
    background: linear-gradient(135deg, #f5c518 0%, #e8a800 100%);
    color: var(--color-texto-oscuro);
    border-color: transparent;
    box-shadow: var(--sombra-acento);
}

.boton-primario:hover {
    background: linear-gradient(135deg, #ffd234 0%, #f5c518 100%);
    box-shadow: 0 6px 28px rgba(245, 197, 24, 0.4);
    color: var(--color-texto-oscuro);
}

.boton-primario .boton-flecha {
    opacity: 0.5;
}

/* ── Variante WHATSAPP ── */
.boton-whatsapp {
    background-color: var(--color-whatsapp-bg);
    color: var(--color-texto);
    border-color: var(--color-whatsapp-borde);
}

.boton-whatsapp:hover {
    background-color: var(--color-whatsapp);
    color: #ffffff;
    border-color: var(--color-whatsapp);
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
}

/* ── Variante SECUNDARIO: llamada, correo, maps ── */
.boton-secundario {
    background-color: var(--color-acero);
    color: var(--color-texto);
    border-color: var(--color-borde);
}

.boton-secundario:hover {
    background-color: var(--color-acero-hover);
    border-color: rgba(245, 197, 24, 0.35);
    box-shadow: 0 4px 20px rgba(245, 197, 24, 0.12);
}

/* ── Variante MERCADO LIBRE ── */
.boton-meli {
    background-color: var(--color-meli-bg);
    color: var(--color-texto);
    border-color: var(--color-meli-borde);
}

.boton-meli:hover {
    background-color: var(--color-meli);
    color: var(--color-meli-texto);
    border-color: var(--color-meli);
    box-shadow: 0 4px 20px rgba(255, 230, 0, 0.28);
}

/* ── Animaciones escalonadas de entrada para cada botón ── */
.boton:nth-child(1) { animation: fadeInUp 0.5s ease 0.1s both; }
.boton:nth-child(2) { animation: fadeInUp 0.5s ease 0.18s both; }
.boton:nth-child(3) { animation: fadeInUp 0.5s ease 0.26s both; }
.boton:nth-child(4) { animation: fadeInUp 0.5s ease 0.34s both; }
.boton:nth-child(5) { animation: fadeInUp 0.5s ease 0.42s both; }
.boton:nth-child(6) { animation: fadeInUp 0.5s ease 0.50s both; }

/* ══════════════════════════════════════════════════════════════════════════
   SECCIÓN 3: BADGES DE BENEFICIOS
   ══════════════════════════════════════════════════════════════════════════ */
.badges-section {
    margin-bottom: 32px;
    animation: fadeIn 0.6s ease 0.55s both;
}

/* Grilla 2×2 en móvil */
.badges-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 10px;
    background-color: rgba(30, 33, 40, 0.7);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-badge);
    text-align: center;
    /* Brillo sutil en el borde superior */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.badge-icono {
    width: 26px;
    height: 26px;
    color: var(--color-acento);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.badge-icono svg {
    width: 100%;
    height: 100%;
}

.badge-texto {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-texto-muted);
    line-height: 1.3;
    letter-spacing: 0.3px;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECCIÓN 4: REDES SOCIALES
   ══════════════════════════════════════════════════════════════════════════ */
.redes-section {
    margin-bottom: 40px;
    text-align: center;
    animation: fadeIn 0.6s ease 0.62s both;
}

.redes-titulo {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-texto-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.redes-grid {
    display: flex;
    justify-content: center;
    gap: 14px;
}

/* Ícono de red social — círculo */
.red-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-acero);
    border: 1px solid var(--color-borde);
    color: var(--color-texto-muted);
    transition:
        transform var(--transicion),
        background-color var(--transicion),
        border-color var(--transicion),
        color var(--transicion),
        box-shadow var(--transicion);
}

.red-icono {
    width: 22px;
    height: 22px;
}

/* El texto del nombre está oculto visualmente, existe para accesibilidad */
.red-nombre {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Hover con color de cada red social */
.red-social:hover {
    transform: translateY(-4px) scale(1.1);
}

.red-instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(220, 39, 67, 0.35);
}

.red-facebook:hover {
    background-color: #1877f2;
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(24, 119, 242, 0.35);
}

.red-tiktok:hover {
    background-color: #010101;
    border-color: #69c9d0;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(105, 201, 208, 0.3);
}

/* ══════════════════════════════════════════════════════════════════════════
   SECCIÓN 5: MARCAS / CARRUSEL AUTOMÁTICO
   ══════════════════════════════════════════════════════════════════════════ */
.marcas-section {
    margin-bottom: 40px;
    animation: fadeIn 0.6s ease 0.7s both;
}

.marcas-titulo {
    font-family: var(--fuente-titulo);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-texto-muted);
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 20px;
}

/* Contenedor con overflow oculto y bordes desvanecidos */
.carrusel-wrapper {
    overflow: hidden;
    /* Desvanecimiento en los bordes laterales para efecto profesional */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );
}

/* Pista del carrusel — se desplaza con CSS animation */
.carrusel-track {
    display: flex;
    gap: 12px;
    /* max-content = el ancho natural de todos los items juntos */
    width: max-content;
    /* Desplazarse -50% = exactamente el ancho de las 9 marcas originales */
    animation: desplazar 22s linear infinite;
}

/* Pausa al pasar el mouse por encima */
.carrusel-wrapper:hover .carrusel-track {
    animation-play-state: paused;
}

/* Cada item del carrusel */
.marca-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 64px;
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 10px 12px;
    transition:
        background-color var(--transicion),
        border-color var(--transicion);
}

.marca-item:hover {
    background-color: rgba(255, 255, 255, 0.07);
    border-color: rgba(245, 197, 24, 0.25);
}

/* Logos: colores originales siempre visibles */
.marca-item img {
    max-width: 96px;
    max-height: 40px;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity var(--transicion);
}

.marca-item:hover img {
    opacity: 1;
}

/* Texto de marca (fallback cuando no hay imagen cargada) */
.marca-nombre {
    font-family: var(--fuente-titulo);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-texto-muted);
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    /* Oculto por defecto; el onerror en HTML lo activa si falla la imagen */
    display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECCIÓN 6: FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.footer {
    text-align: center;
    padding-top: 8px;
    animation: fadeIn 0.6s ease 0.8s both;
}

.footer-linea {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-borde), transparent);
    margin-bottom: 20px;
}

.footer-copyright {
    font-size: 0.75rem;
    color: var(--color-texto-muted);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.footer-amor {
    font-size: 0.7rem;
    color: rgba(126, 134, 148, 0.55);
}

/* ══════════════════════════════════════════════════════════════════════════
   KEYFRAMES — ANIMACIONES
   ══════════════════════════════════════════════════════════════════════════ */

/* Entrada desde abajo (botones) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Entrada desde arriba (header) */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in simple */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Desplazamiento infinito del carrusel
   -50% = exactamente el ancho de las 9 marcas originales (la mitad de los 18 items) */
@keyframes desplazar {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════════════════
   MEDIA QUERIES — RESPONSIVE (Mobile-First)
   El CSS base ya está optimizado para móvil.
   Aquí solo ampliamos para pantallas más grandes.
   ══════════════════════════════════════════════════════════════════════════ */

/* Pantallas medianas (tablets, teléfonos grandes) */
@media (min-width: 440px) {
    .container {
        padding: 44px 28px 60px;
    }

    .boton {
        padding: 16px 22px;
        font-size: 1rem;
    }

    /* 4 badges en fila en pantallas más amplias */
    .badges-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .badge-texto {
        font-size: 0.75rem;
    }

    .redes-grid {
        gap: 18px;
    }

    .red-social {
        width: 54px;
        height: 54px;
    }
}

/* Pantallas grandes (desktop) */
@media (min-width: 600px) {
    .nombre-empresa {
        letter-spacing: 8px;
    }

    .marcas-titulo {
        letter-spacing: 5px;
    }
}

/* Respeta la preferencia del usuario de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .carrusel-track {
        animation: none;
    }
}