/* --- Variables Globales --- */
:root {
    --bg-color: #0d0d0d;
    --text-color: #ffffff;
    --border-color: #333333;
    --grey-text: #aaaaaa;
    --font-family: "futura-pt";
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: "futura-pt", sans-serif;
    overflow-x: hidden;
}

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

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

/* --- NUEVA NAVEGACIÓN (Estilo Pastilla de la imagen) --- */
header {
    height: auto;
    background-color: transparent;
    position: fixed;
    top: 25px; /* Separación de la parte superior */
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center; /* Centra el menú horizontalmente */
}

.nav-pill {
    background: rgba(30, 30, 30, 0.7); /* Fondo oscuro translúcido */
    backdrop-filter: blur(15px); /* Efecto de desenfoque de fondo */
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px; /* Forma de cápsula */
    padding: 8px 10px 8px 24px;
    display: flex;
    align-items: center;
    gap: 35px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

.nav-logo img {
    height: 40px;
    width: auto;
    display: block;
}

.nav-links {
    display: flex;
    gap: 25px;
}

.nav-links a {
    color: var(--grey-text);
    font-size: 0.85rem;
    font-weight: 400;
}

.nav-links a:hover {
    color: #fff;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Botón Sign In */
.btn-signin {
    color: var(--grey-text);
    font-size: 0.85rem;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
}

.btn-signin:hover {
    border-color: #fff;
    color: #fff;
}

/* Botón Join Waitlist (Resaltado blanco con brillo) */
.btn-waitlist {
    background: #ffffff;
    color: #000;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 30px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 0 5px rgba(0, 255, 150, 0.2);
}

.btn-waitlist:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}



.hero{
position:relative;
height:100vh;
overflow:hidden;
}

/* SECCION SUPERIOR */

.hero-top{
height:65vh;
position:relative;
overflow:hidden;
}

/* SECCION INFERIOR */

.hero-bottom{
height:35vh;
position:relative;
padding:60px;
}

/* TITULO GIGANTE */

.title{
position:absolute;
right: -50px;
font-size:25vw;
font-weight:180;
letter-spacing:-10px;
line-height:0.8;
bottom:-90px;
font-family: "futura-pt", sans-serif;
background: linear-gradient(180deg, #ffffff 30%, #333333 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent; 
display: inline-block;
}

/* ASTERISCO */

.star{
position:absolute;
right:350px;
top:-40px;
font-size:160px;
color:#ff4a2f;
z-index:3;
}

/* IMAGEN */

.camera{
position:absolute;
right:650px;
top:215px;
width:230px;
z-index:4;
}

/* REDES */

.social{
position:absolute;
right:120px;
top:35px;
font-size:12px;
line-height:20px;
}

.social a{
display:block;
margin-top:10px;
color:#ff4a2f;
text-decoration:none;
}

/* CONTACT VERTICAL */

.contact{
position:absolute;
left:20px;
top:120px;
transform:rotate(-90deg);
color:#ff4a2f;
font-size:10px;
letter-spacing:3px;
}

/* BRAND */

.brand{
position:absolute;
left:60px;
top:35px;
color:#ff4a2f;
font-size:28px;
letter-spacing:1px;
}



@keyframes floatBlob {
    from { transform: translate(-50px, -30px) scale(1); }
    to { transform: translate(50px, 40px) scale(1.1); }
}

@keyframes floatBlob2 {
    from { transform: translate(30px, -40px) scale(1); }
    to { transform: translate(-40px, 50px) scale(1.05); }
}



.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border: 1px solid var(--text-color);
    border-radius: 5px;
    font-size: 0.9rem;
}

.btn-primary:hover {
    background-color: #fff;
    color: #000;
}

/* --- ACORDEÓN DE SERVICIOS --- */
.services {
    padding: 80px 0;
}

.acordion-title {
    padding-bottom: 50px;
}

.title_svs {
    position:absolute;
    left: 110px;
    font-size:80px;
    font-weight:15;
    line-height:0.8;
    font-family: "futura-pt", sans-serif;
    color: #ffffff;


}

.accordion-item {
    border-bottom: 1px solid var(--border-color);
}

.accordion-header {
    display: grid;
    grid-template-columns: 80px 1fr 50px;
    align-items: center;
    padding: 40px 0;
    cursor: pointer;
}

.number {
    font-size: 3.5rem;
    font-weight: 300;
    color: #2B2B2B;
}

.service-title {
    font-size: 1.8rem;
    text-transform: uppercase;
}

.accordion-content {
    height: 0;
    overflow: hidden;
    transition: height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
    padding: 0 0 0 80px;
}

.accordion-item.active .accordion-content {
    opacity: 1;
    padding: 20px 0 40px 80px;
}

.service-details p {
    color: var(--grey-text);
    max-width: 600px;
    line-height: 1.6;
}

/* --- SECCIÓN SOBRE NOSOTROS --- */
.about-us {
    padding: 100px 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-image {
    width: 80%;
    border-radius: 15px;
    filter: grayscale(0.1);
}


.about-title {
    left: 110px;
    font-size:80px;
    font-weight:15;
    line-height:0.8;
    font-family: "futura-pt", sans-serif;
    color: #ffffff;
    margin-bottom: 20px;
}

.about-small-text {
    margin-bottom: 20px;
}

.about-description {
    color: var(--grey-text);
    line-height: 1.8;
}

/* --- FOOTER --- */
footer {
    padding: 100px 0 50px;
    text-align: center;
    border-top: 1px solid var(--border-color);
}

.contact-title {
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 300;
}

.contact-arrow {
    color: var(--accent-red);
    margin-left: 20px;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .nav-pill {
        gap: 15px;
        padding: 6px 8px 6px 15px;
    }
    .nav-links { display: none; } /* Ocultar links en móvil para simplificar */
    
}

@media (max-width: 1200px){

.title{
font-size:32vw;
right:-20px;
bottom:-60px;
}

.camera{
right:55%;
top:220px;
width:200px;
}

}


@media (max-width: 900px){

.hero{
height:auto;
padding-top:180px;
}

.hero-top{
height:auto;
display:flex;
justify-content:center;
align-items:center;
}

.hero-bottom{
height:auto;
padding:40px 20px 80px;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

/* TITULO */

.title{
position:relative;
font-size:34vw;
right:auto;
bottom:auto;
text-align:center;
letter-spacing:-6px;
}

/* IMAGEN */

.camera{
position:absolute;
top:15px;
right:55%;
transform:translateX(50%);
width:120px;
opacity:0.9;
}

/* CONTACT */

.contact{
        display: none;
    }

/* BRAND */

.brand{
position:relative;
left:auto;
top:auto;
font-size:22px;
margin-bottom:20px;
}

/* SOCIAL */

.social{
position:relative;
right:auto;
top:auto;
font-size:13px;
line-height:24px;
}

.social a{
margin-top:15px;
}

}