/* 1. Reset universal */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



/* MOBILE FIRST (BASE) */

html {
    scroll-behavior: smooth;
}

body {
    /* IMPORTANTE: Si la dejas fija, el Hero se subirá. 
   Debes ponerle al body o al primer elemento un padding-top igual 
   al alto de tu header (ej. 80px) para que no se solapen. */
    padding-top: 80px;
    background-color: black;
    color: white;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    font-size: 18px;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

section {
    scroll-margin-top: 80px; /* Esto hace que el scroll se detenga 80px antes del título */
}

h1 {
    font-size: 48px;
}

p {
    font-size: 20px;
    line-height: 1.6;
}

/*HEADER*/


.header {
    /* 1. La dejamos fija */
    position: fixed;
    top: 0;
    width: 100%;
    
    /* 2. Truco PRO: Glassmorphism */
    /* Usamos negro muy transparente (0.8) */
    background-color: rgba(0, 0, 0, 0.8); 
    
    /* 3. El filtro de desenfoque (La clave visual) */
    /* Hace que lo que pasa por detrás se vea borroso */
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px); /* Para compatibilidad con Safari */
    
    /* 4. Otros ajustes necesarios */
    z-index: 2000; /* Asegura que esté por encima de todo */
    padding: 20px 0; /* Ajusta este valor según el alto de tu logo */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Línea sutilísima abajo */
}

/* 2. El contenedor que limita el ancho y alinea el contenido */
.header .container {
    width: 90%;             /* Para que en móvil no toque los bordes */
    max-width: 1200px;      /* Límite en desktop */
    margin: 0 auto;         /* Centra el bloque en la pantalla */
    display: flex;
    justify-content: space-between; /* Logo izquierda, Menú derecha */
    align-items: center;
}


/* 3. Estilo base del logo para que no pierda su tamaño */
.logo {
    height: auto;
    max-width: 150px; /* Ajusta según el tamaño de tu logo */
}

/* Quita los puntos de la lista y el margen que pone el navegador por defecto */
.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none; /* Se mantiene oculto en móvil, lo activaremos con JS después */
}

/* Estilo para los enlaces del menú */
.nav-links a {
    text-decoration: none; /* Quita el subrayado azul */
    color: white;          /* Color blanco para que resalte en el fondo negro */
    font-size: 18px;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Efecto al pasar el mouse (opcional) */
.nav-links a:hover {
    color: #ff00cc; /* El rosado de tu marca */
}

.menu-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 30px; /* Un poco más grande para que sea fácil de tocar */
    outline: none;
}

/* Esto controla cómo se ve el menú cuando se abre en móvil/tablet */
.nav-links.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    /* Esto lo pega justo debajo del header */
    top: 100%; 
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Un negro casi sólido para que no se trasluzca el texto de abajo */
    padding: 10px 0;
    text-align: center;
    z-index: 1000;
    border-top: 1px solid #333; /* Una línea sutil para separar el header del menú */
}

/* Espacio entre los enlaces del menú desplegado */
.nav-links.active li {
    margin: 10px 0;
}

/* Hacemos la fuente un poco más pequeña solo en el menú móvil para ahorrar espacio */
.nav-links.active li a {
    font-size: 16px; 
}


/*  ************************************************ */
/* Estilo para las tarjetas en la Landing */
.collections {
    padding: 60px 20px;
    background-color: #000; /* Fondo negro para mantener el estilo */
}

.collections .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Aseguramos que los enlaces no tengan colores extraños */
.collections .card {
    text-decoration: none;
    color: #fff; /* Blanco puro para todo el texto */
    display: block;
    border-bottom: 1px solid #333; /* Línea delgada neutra */
    padding-bottom: 20px;          /* Espacio entre la línea y la siguiente tarjeta */
    margin-bottom: 20px;           /* Espacio fuera de la tarjeta */
}

.collections .section-title {
    text-align: center;
    font-size: 2.0rem;
    letter-spacing: 5px;
    margin-bottom: 50px;
    color: #fff;
    text-transform: uppercase;
}

.collections .section-title span {
    color: #ff00ff; /* Ese toque magenta de tu marca */
    font-weight: 300;
}

.collections .card-img-container {
    height: 500px;
    margin-bottom: 15px;
    overflow: hidden; /* Necesario para que la imagen no se escape al escalar */
}

.collections .card img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 10px; /* Añadimos redondeo para que coincida con el estilo */
}

.collections .card-text {
    min-height: 100px; /* Ajusta este valor según lo que necesites para que quepan 2 líneas */
    margin-bottom: 10px;
}

.collections .card-text h3 {
    color: #ff00ff; 
    margin: 0;
    font-size: 1.2rem;
}

.collections .card-text p {
    color: #888; /* Gris minimalista para la descripción */
    margin-top: 5px;
}





/* HERO Landing Page*/

/* Base común */
.hero-base {
    /* min-height: 70vh;  */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 15px;
}

.hero-base h1 {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: 2px;
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero-base h1 span {
    color: #ff00cc;
}

.hero-base p {
    font-size: 20px;
    margin-bottom: 30px;
    color: #ccc;
}

/* Modificadores (específicos) */
.hero-landing {
    min-height: 70vh; 
}

.hero-collection {
    min-height: 40vh; 
}




/*BOTON WHATSAPP*/

.btn {
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    gap: 12px; /*separar el icono del texto: */
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 20px 30px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    background-color: #ff00cc;
    color: white;
    text-decoration: none;
    border-radius: 8px;
}



/*PORTAFOLIO*/

.portfolio {
    padding: 80px 15px;
    text-align: center;
}

.portfolio h2 {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: 1px; /*significa que cada letra del título se separa un poquito de la siguiente*/
    margin-bottom: 60px; /*margen entre bloques*/
    text-transform: uppercase; /* pasar a MAYUSCULAS + urbano/marca */
}

.portfolio-grid {
    display: grid; /*activar sistema de columnas*/
    grid-template-columns: 1fr;
    gap: 30px; /*espacio entre imagenes*/
    
}

.portfolio-grid .item {
    position: relative; /*base para overlay*/
    overflow: hidden;
    border-radius: 10px; /* Asegura que el recorte tenga esquinas redondeadas */
}



.portfolio-grid .item img {
    width: 100%;
    height: 500px; /* Reducido para móvil, luego lo subimos en PC */
    object-fit: cover; /* ¡Esta es la clave, rellena todo el espacio asignado! */
    border-radius: 10px;
    transition: all 0.3s ease; /*usamos 'all' para animar brillo y transform a la vez */
    transform-origin: top; /* La imagen crecerá hacia abajo, manteniendo la cabeza en su sitio */
    position: relative; /* Base para el z-index */
    z-index: 1; /* Capa inferior */
    display: block; /* Quita espacios fantasma abajo */
}


.item-info {
    padding: 15px 0;
    text-align: center;
    position: relative; /* Base para el z-index */
    z-index: 2; /* Un número mayor que el de la imagen */
    background-color: #000; /* Fondo negro para que el texto resalte */
    border-bottom-left-radius: 10px; /* Para que coincida con el redondeado de la imagen */
    border-bottom-right-radius: 10px;
}

/* Título del diseño (el nombre principal) */
.item-info p.design-name {
    color: #ff00ff; /* Color neón para resaltar el nombre */
    font-size: 20px !important;
    font-weight: 800 !important;
    
    
    /* display: inline-block; */
    display: block;          /* Ocupa todo el ancho */
    width: 80%;              /* O la medida que prefieras */
    margin-left: auto;       /* Estos dos centran el bloque */
    margin-right: auto;
    
}

 .item-info .specs{
    margin-bottom: 12px !important;
    border-bottom: 1px solid #1C1E21; /* Línea sutil urbana */
    padding-bottom: 5px;
 }

.item-info p {
    font-size: 18px;
    font-weight: 600;
    color: #ccc; /* Gris claro para los valores */
    letter-spacing: 1px;
    text-transform: uppercase; /* Le da un toque más "branding" */

    /* Lo nuevo (Control de espacio) */
    line-height: 1.4;   /* Evita que las líneas se peguen si hay mucho texto */
    
}


/* Creamos la sección de especificaciones que añadimos al HTML */
/* Ajuste de la fila completa */
.item-info .specs p {
    text-align: left !important;
    display: flex !important; /* Cambiamos a flex para alinear columnas */
    align-items: flex-start;  /* Alinea el texto si el valor es muy largo */
    margin: 8px auto !important;
    color: #eee !important;
    width: 280px !important;  /* Un poco más ancho para dar aire */
    font-size: 18px !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    line-height: 1.4;
}


/* Estilo para las etiquetas (Tallas, Material, Precio, etc.) */
/* Ajuste de la etiqueta (Material, Color, etc.) */
.item-info .specs p span {
    color: #888 !important;
    font-weight: 400 !important;
    text-transform: capitalize !important;
    
    /* Flex mantiene el ancho fijo y empuja el contenido */
    flex: 0 0 90px !important; /* Ancho fijo para la etiqueta */
    text-align: right !important;
    margin-right: 15px; /* Separación entre etiqueta y valor */
}



/* Estilo Pro para la línea del Precio */
.item-info .specs p:last-child {
    color: #00ffd5 !important; /* Color destacado (Verde Neón) */
    font-weight: 600 !important;
    /* Línea divisoria muy sutil arriba */
    /* border-bottom: 1px solid #222;  */
    padding-top: 8px;
    margin-top: 10px !important;
}

/* El detalle del COP al final */
.item-info .specs p:last-child::after {
    content: " COP"; /* Espacio + COP */
    font-size: 12px; /* Bien pequeño */
    color: #555;    /* Gris oscuro sutil */
    font-weight: 400; /* No negrita */
    letter-spacing: 1px;
}

/* PROCESO DE COMPRA - STEPS */

.process {
    padding: 80px 15px;
    text-align: center;
}

.process h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 60px;
}

.steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.step {
    background-color: #111;
    padding: 30px 20px;
    border-radius: 10px;
}

.step h3 {
    margin-bottom: 10px;
    color: #ff00cc;
}

.step p {
    font-size: 16px;
    color: #ccc;
}


/* CTA FINAL - Call To Action */

.cta {
    padding: 80px 15px;
    text-align: center;
    background: linear-gradient(180deg, #000000, #111111);
}

.cta h2 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 20px;
}

.cta p {
    font-size: 20px;
    color: #ccc;
    margin-bottom: 30px;
}


/* FOOTER */

.footer {
    background-color: #000;
    color: #fff;
    padding: 40px 0 20px 0;  /* es lo mismo que: 40px 0 20px */
    border-top: 1px solid #222; /* Una línea muy sutil para separar */
    margin-top: 50px; /* Para que no esté pegado al contenido de arriba */
}

.footer-content {
    display: flex;
    flex-direction: column; /* Apilado vertical */
    align-items: center;    /* Centra los bloques */
    text-align: center;     /* Centra el texto */
    gap: 30px;
    padding-bottom: 30px;
}

.footer-info h3 {
    color: #ff00cc; /* Tu rosado de marca */
    margin-bottom: 10px;
}

.footer-social h4 {
    margin-bottom: 15px;
}

.social-links {
    display: flex;
    justify-content: center; /* Centra los iconos */
    gap: 20px;
    
}

.social-links a {
    color: #fff;
    font-size: 24px;
    transition: color 0.3s;
}

.social-links a:hover {
    color: #ff00cc;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #222;
    padding-top: 20px;
    font-size: 14px;
    color: #888;
}

/* Boton flotante de WhatsApp */
.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    color: white;
    padding: 12px 20px;
    border-radius: 50px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 3000;
    transition: transform 0.3s ease;
}

.whatsapp-btn:hover {
    transform: scale(1.1);
}


/* --- LÓGICA DE APARICIÓN (SCROLL REVEAL) --- */

/* 1. ESTADO BASE (Mobile First) */
.reveal {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(20px); /* Siempre sube, no importa el dispositivo */
    /* transition: [propiedad] [duración] [curva de tiempo]; */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, filter 0.5s ease-out;
}


/* 2. CLASE ACTIVA - El punto de llegada (La que pone JS) */
.reveal.active {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}


.lowercase {
    text-transform: lowercase;
}


/*RESPONSIVE*/

/* TABLET // @media → detecta tamaño de pantalla // (2, 1fr) → dos columnas */
@media (min-width: 600px) {
    .header .container {
        padding: 0 40px; /* Más espacio a los lados en tablets */
    }
    
    .logo {
        max-width: 180px; /* El logo puede crecer un poquito más */
    }

    /* Hacemos que el menú desplegable sea un cuadro pequeño a la derecha */
    .nav-links.active {
        width: 200px; /* Ya no ocupa el 100% */
        left: auto;   /* Quitamos el pegado a la izquierda */
        right: 5%;    /* Lo pegamos a la derecha con un poco de margen */
        border-radius: 8px; /* Le damos un toque moderno */
        top: 80%;     /* Lo bajamos un poco más sutilmente */
    }

    .collections .card {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    }


    .portfolio-grid{
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en Tablet/PC */
    }

    .portfolio {
        padding: 100px 20px;
    }

    .portfolio h2 {
        letter-spacing: 2px; /*significa que cada letra del título se separa un poquito de la siguiente*/
        margin-bottom: 70px; /*margen entre bloques*/
    }

    .item img {
        height: 600px; /* Un poco más altas en pantallas grandes */
    }


    .item-info .specs{
    margin-bottom: 12px !important;
    border-bottom: 1px solid #1C1E21; /* Línea sutil urbana */
    padding-bottom: 5px;
}


    .process {
        padding: 100px 20px;
    }

    .btn {
        padding: 22px 40px;
        font-size: 18px;
    }

    .steps{
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-base h1 {
        font-size: 48px;
    }

    .hero-base p {
        font-size: 18px;
    }

    .hero-collection h1 {
        font-size: 36px; /* Bájalo aquí a tu gusto */
    }

    .cta {
        padding: 100px 20px;
    }

    .cta h2 {
        font-size: 32px;
    }

    .footer {
        padding:60px 0 30px 0;
    }

    .item-info .specs p {
    
        font-size: 16px !important;}

}

/* DESKTOP // (3,1fr) → tres columnas , (4. 1fr) -> 4 columnas */
@media (min-width: 992px) {
    /* Ocultamos el botón de hamburguesa en PC */
    .menu-toggle {
        display: none;
    }

    /* Mostramos la lista y la ponemos en horizontal */
    .nav-links {
        display: flex; /* Cambia de 'none' a 'flex' para que se vea */
        gap: 25px;     /* Espacio entre cada palabra del menú */
    }

    .logo {
        max-width: 200px; /* El logo puede crecer un poquito más */
        transition: transform 0.4s ease, filter 0.4s ease;
    }

    .logo:hover {
        transform: scale(1.05);
        filter: brightness(1.1);
    }


    /* BTN Whatsapp */
    .btn {
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    /*detecta el mouse*/
    .btn:hover {
    background-color: #cc00a3;
    transform: scale(1.05); /*suaviza animación*/
    }



    /*CARD */

    .collections .card {
    transition: transform 0.3s ease; /* Movimiento suave */
    border: 1px solid transparent; /* Evita saltos */
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    }

    /* Efecto de elevación al pasar el mouse */
    .collections .card:hover {
    transform: translateY(-10px);
    /* Un resplandor verde neón sutil (el color de tu precio) */
    box-shadow: 0 0 20px rgba(0, 255, 213, 0.2); 
    /* Un borde físico muy delgado para definir la tarjeta */
    border: 1px solid rgba(0, 255, 213, 0.4);
    filter: brightness(1.1); /* Brilla un poco en lugar de oscurecerse */
    }


    .collections .card img {
    transition: transform 0.5s ease; /* Zoom suave de la imagen */
    }

    .card:hover img {
    transform: scale(1.05); /* Zoom sutil */
    }

    .collections .card-text h3,
    .collections .card-text p{
     transition: color 0.3s ease;
    }

    .collections .card:hover .card-text h3 {
    color: #fff; /* Un toque de color (magenta) al pasar el mouse */
    text-shadow: 0 0 10px #ff00ff; /* Crea un brillo neón detrás del texto */
    }

    .collections .card:hover .card-text p {
    color: #ff00ff; /* color blanco al pasar el mouse */
    }


    .portfolio h2 {
        letter-spacing: 2px; /*significa que cada letra del título se separa un poquito de la siguiente*/
        margin-bottom: 80px; /*margen entre bloques*/
    }

    .portfolio-grid{
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en Desktop */
    }

    /* Preparamos el contenedor 'item' para que la transición sea suave */
    .portfolio-grid .item {
        transition: transform 0.5s ease, filter 0.5s ease;
        border: 1px solid transparent; /* Evita saltos */
}

    /* Cuando pasamos el mouse sobre la tarjeta completa */
    .portfolio-grid .item:hover {
        /* Un resplandor verde neón sutil (el color de tu precio) */
        box-shadow: 0 0 20px rgba(0, 255, 213, 0.2); 
        /* Un borde físico muy delgado para definir la tarjeta */
        border: 1px solid rgba(0, 255, 213, 0.4);
        cursor:zoom-in; /* Cambia el curso por una ccruz */
}

    /* Efecto sutil al pasar mouse - solo en Desktop para no entorpecer el touch en móvil */
    .portfolio-grid .item:hover img {
        transform: scale(1.1);
        filter: brightness(1.1); /* Brilla un poco en lugar de oscurecerse */
    }

    .item:hover .design-name {
    color: #fff !important; /* Cambia de fucsia a blanco */
    text-shadow: 0 0 10px #ff00ff; /* Crea un brillo neón detrás del texto */
    transition: all 0.3s ease;
}

    .portfolio, .process, .cta {
        padding: 120px 20px;
    }

    .btn {
        padding: 22px 45px;
        font-size: 19px;
    }

    .steps{
        grid-template-columns: repeat(4, 1fr);
    }

    .hero-base h1 {
        font-size: 64px;
    }

    .hero-base p {
        font-size: 20px;
    }

    .hero-collection h1 {
        font-size: 48px; /* Un poco más grande, pero menos que el index */
    }
    
    .cta h2 {
        font-size: 36px;
    }

    .item-info .specs{
    
    border: none; /* borra Línea sutil urbana */
    padding-bottom: 5px;
}


    .item-info p {
        max-width: 90%;   
    }
    
    .footer-content {
        flex-direction: row;        /* Se ponen de lado a lado */
        justify-content: space-between; 
        align-items: flex-start;    /* Alinea arriba */
        text-align: left;           /* Texto a la izquierda */
    }

    .social-links {
        justify-content: flex-start; /* Iconos a la izquierda en su bloque */
    }

    /* Boton Flotante de Whatsapp - En PC ocultar el texto y dejar solo el icono para que sea más minimalista */
    .whatsapp-btn span {
        display: none;
    }
    .whatsapp-btn {
        padding: 15px;
    }

    .item-info .specs p {
    
        font-size: 16px !important;
    }

    /* --- LÓGICA DE APARICIÓN (SCROLL REVEAL) --- */

    .reveal {
        transform: translateY(30px);
        transition: opacity 0.7s ease-out, transform 0.7s ease-out, filter 0.7s ease-out;
    }

    /* 3. AJUSTE PARA TARJETAS - Para que el hover no rompa la aparición */
    .collections .card.reveal,
    .portfolio .item.reveal {
        /* Mantenemos la transición de aparición, pero permitimos que el hover funcione después */
        transition: opacity 0.7s ease-out, 
                    transform 0.7s ease-out, 
                    filter 0.7s ease-out, 
                    box-shadow 0.3s ease;
    }

    .break-grid {
        /* Fuerza al elemento a empezar en la columna 1 de la siguiente fila */
        grid-column: 1;
    }

}