/* --- VARIABLES GLOBALES --- */
:root {
    --main: #6a6682;              
    --main-dark: #555169;
    --main-dorado: #C8A165;
    --accent-light : #f8f9fa;       
    --white: #ffffff;
    --text-dark: #333333;
    --text-light: #666666;
    --shadow: 0 4px 15px rgba(0,0,0,0.1);
    --whatsapp-color: #25D366;
    --color-fondo: #6a668200;

    --ancho-celular-mockup: 375px; 
    --alto-celular-mockup: 667px;
}

/* --- RESET Y ESTILOS BASE --- */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; }
.section-header h2 {letter-spacing: 2; font-family: 'Syne', sans-serif !important; font-weight: 800 !important;}
ul { list-style: none; }
a { text-decoration: none; }
img { max-width: 100%; display: block; }
html { scroll-behavior: smooth; }

/* COLORES DE FONDO SECCIONES */
.sticky-nav, .hero-intro {
    background-color: var(--main) !important;
    background-image: 
        radial-gradient(circle at center, #6a668200 0%, var(--main) 90%);
    background-blend-mode: multiply;
    background-size: cover;
}
body, footer {
    background-color: var(--main-dark) !important; 
    background-image: url('elementos-grales/img/textura1.png') !important;
    background-blend-mode: overlay;
    color: var(--white);
}

/* --- SECCIÓN 2: HERO (PORTADA PRINCIPAL) --- */
.hero-intro {
    padding: 80px 10px 100px 10px;
    min-height: 85vh;
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: center;
}

.hero-content {
    display: flex;
    flex-direction: column; /* Apila uno arriba del otro */
    align-items: center;
    gap: 5px; 
    width: 100%;
}

.hero-logo { 
    width: 200px; /* 280px es muy grande para celular, 200px es más elegante */
    margin: 0; /* El espacio lo controla el 'gap' de arriba */
}

.hero-phrase { 
    font-family: 'Syne', sans-serif !important; 
    font-weight: 800 !important;
    font-size: 0.8rem; /* Un pelín más grande para leerse mejor */
    letter-spacing: 1px;
    line-height: 1.4; 
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    
    max-width: 100%; 
    margin: 0 auto 30px auto;
    color: var(--white);
    text-align: center;     
}

.hero-phrase em { 
    font-family: 'Syne', sans-serif !important; 
    font-weight: 800 !important; 
    font-size: 0.9rem;
}

.btn-hero { 
    margin-top: 2rem;
    font-family: 'Syne', sans-serif; font-weight: 800;
    background: var(--white); 
    color: var(--main-dark); 
    padding: 12px 30px; 
    border-radius: 50px; 
    font-weight: bold; 
    box-shadow: var(--shadow); 
    transition: 0.3s; 
}
.btn-hero:hover { background: var(--main); transform: scale(1.05); color: var(--white);}

/* --- SECCIÓN 3: NAVEGACIÓN (STICKY NAV) --- */
.sticky-nav {
    position: fixed; top: -80px; left: 0; width: 100%; box-shadow: var(--shadow);
    z-index: 1000; transition: top 0.4s ease; padding: 10px 0;
}
.sticky-nav.visible { top: 0; }
.nav-list { display: flex; justify-content: center; align-items: center; gap: 30px; }
.nav-list a { color: var(--white); font-weight: 600; }
.nav-logo { height: 35px; }

/* --- SECCIÓN 4: MODELOS Y GRID --- */
.titulo-oscuro {color: var(--main-dark); margin-bottom: 0.5rem;}
.section-padding { padding: 60px 20px; text-align: center; background: var(--white); } /* Padding reducido móvil */
#titulo-precios {color: var(--white); padding-top: 2rem;}

.section-header h2, #demo-title { text-align: center; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.section-header p { margin-bottom: 30px; color: var(--text-light); }

.category-tabs { margin-bottom: 40px; }
.category-tabs button {
    background: transparent; border: 1px solid var(--main); color: var(--main);
    padding: 8px 20px; border-radius: 20px; margin: 0 5px 10px 5px; /* Margen abajo para saltos de línea */
    cursor: pointer; transition: 0.3s;
}
.category-tabs button:hover, .category-tabs button.active { background: var(--main); color: var(--white); }

.models-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; max-width: 1000px; margin: 0 auto;
}
.model-card {
    border-radius: 15px; overflow: hidden; box-shadow: var(--shadow); 
    cursor: pointer; transition: 0.3s; position: relative; background: #fff;
}
.model-card:hover { transform: translateY(-5px); }
.model-card img { height: 220px; width: 100%; object-fit: cover; }

/* Placeholders */
.placeholder-img { height: 220px; background: #eee; display: flex; align-items: center; justify-content: center; color: #999; }
.model-card.inactive { cursor: default; opacity: 0.7; }

.model-info { padding: 15px; background: rgba(0,0,0,0.85); position: absolute; bottom: 0; width: 100%; color: white; display: flex; justify-content: space-between; align-items: center; }
.btn-text { background: none; border: none; color: var(--white); font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 5px; }

/* --- SECCIÓN 5: DEMO EN VIVO --- */
#demo-title {color: var(--main-dark); margin-bottom: 0.3rem; font-family: 'Syne', sans-serif !important; font-weight: 800 !important;}
.demo-header-info p {color: var(--text-light); margin-bottom: 0.5rem;}
.demo-section { padding: 60px 20px; text-align: center;
background-color: var(--white) !important;}

.phone-mockup {
    width: 90%; 
    max-width: var(--ancho-celular-mockup);
    height: 90vh;
    margin: 20px auto; 
    
    background: #111;
    border-radius: 30px;
    border: 8px solid #333;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}


iframe { width: 100%; height: 100%; border: none; background: #fff; }
.demo-warning {
    max-width: 400px; /* Que no sea más ancho que el celular */
    margin: 0 auto 0 auto; /* Centrado y separado del celular */
    background-color: #fff3cd; /* Fondo amarillito suave */
    border: 1px solid #ffeeba;
    color: #856404; /* Texto marrón dorado oscuro */
    padding: 15px;
    border-radius: 10px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.demo-warning i {
    font-size: 1.2rem;
}
.plan-controls { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.btn-plan { border: 1px solid var(--main); background: transparent; color: var(--main); padding: 8px 20px; border-radius: 20px; cursor: pointer; transition: 0.3s; }
.btn-plan.active, .btn-plan:hover { background: var(--main); color: var(--white); }

/* --- SECCIÓN 6: LISTA DE PRECIOS --- */
.precio-box {
    margin: 15px 0;
    line-height: 1.1; 
}
.precio-tachado {
    display: block; text-decoration: line-through;
    color: #999; font-size: 1rem; font-weight: 500; margin-bottom: 2px;
}
.precio-final {
    font-size: 2rem; font-weight: 800; display: block; margin: 15px 0; color: var(--main);
}
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; max-width: 1100px; margin: 40px auto; justify-content: center; }
.price-card { border: 1px solid #eee; border-radius: 15px; padding: 25px; margin: 1rem 2rem; background: var(--white); transition: 0.3s; position: relative; }
.price-card h3 {color: var(--text-dark)}
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--main-dark); }
.price-card.popular { border: 5px solid var(--main-dorado); background: var(--white); }
.etiqueta-pop { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--main-dorado); color: var(--white); padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; }
.precio-popular { color: var(--main-dorado) !important;}

/* Tarjeta Personalizada */
.price-card.personalized { background: var(--main); color: var(--white); border: 2px solid var(--white)}
.price-card.personalized h3, .price-card.personalized .precio-final { color: var(--white); }
.price-card.personalized li { color: rgba(255,255,255,0.9); }
.price-card.personalized li::before { content: "💎"; margin-right: 5px; color: var(--white); }
.btn-consultar { display: inline-block; margin-top: 15px; background: var(--white); color: var(--main); padding: 10px 20px; border-radius: 20px; font-weight: bold; transition: 0.3s; }
.btn-consultar:hover { background: var(--main-dark); color: var(--white); }

.price-card.personalized .precio-final.custom-price { font-size: 1.6rem; margin-top: 20px; }
.price-card ul li { margin-bottom: 10px; color: var(--text-light); text-align: left; }
.price-card ul li::before { content: "✓"; color: var(--main-dark); margin-right: 5px; font-weight: bold; }

/* --- SECCIÓN 7: ENTREGAS Y FOOTER --- */
.delivery-section { padding: 40px 20px; background: var(--accent-light); text-align: center; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; color: var(--text-light);}
.delivery-box { background: var(--white); padding: 20px; border-radius: 10px; width: 300px; box-shadow: var(--shadow); }
.delivery-box.flash { border: 2px solid var(--main-dorado); }
.delivery-box.flash h4 { color: var(--main-dorado); }

footer { 
    color: var(--white); 
    padding: 40px 20px; 
}
.footer-content { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.footer-brand p {font-family: 'Syne', sans-serif; font-weight: 500; font-size: 1rem;}
.footer-social { display: flex; gap: 15px; }
.btn-social { color: var(--main); background-color: var(--accent-light); border: 1px solid rgba(0,0,0,0.3); padding: 8px 15px; border-radius: 20px; display: flex; align-items: center; gap: 8px; transition: 0.3s; }
.btn-social:hover { background: var(--main); color: var(--white); }

/* --- ELEMENTOS FLOTANTES --- */
@keyframes oleaje-wp {
    0% {
        /* Estado inicial: */
        /* Mantenemos la sombra negra original (0 4px 10px...) */
        /* Y agregamos una segunda sombra VERDE que está pegada al botón (spread 0) */
        box-shadow: 0 4px 10px rgba(0,0,0,0.3), 0 0 0 0 rgba(37, 211, 102, 0.8);
    }
    70% {
        /* Estado de expansión máxima: */
        /* La sombra verde se expandió 20px hacia afuera... */
        /* ... y su opacidad bajó a 0 (transparente) */
        box-shadow: 0 4px 10px rgba(0,0,0,0.3), 0 0 0 20px rgba(37, 211, 102, 0);
    }
    100% {
        /* Pausa final: vuelve al estado invisible para reiniciar */
        box-shadow: 0 4px 10px rgba(0,0,0,0.3), 0 0 0 0 rgba(37, 211, 102, 0);
    }
}
.whatsapp-float {
    position: fixed; bottom: 20px; right: 20px;
    background: var(--whatsapp-color); color: var(--white);
    width: 55px; height: 55px; font-size: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    z-index: 2000; transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
    animation: oleaje-wp 2s infinite ease-out;
}
.whatsapp-float:hover {
    animation: none; 
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.6);
}

/* ==========================================================================
   MEDIA QUERY: AJUSTES PARA PC / ESCRITORIO (min-width: 768px)
   Aquí van los aumentos de tamaño que solo se aplican en pantallas grandes
   ========================================================================== 
*/
@media (min-width: 768px) {

    /* Hero: Aumenta padding para el efecto de transición largo */
    .hero-intro { padding-bottom: 150px; }
    
    /* Logo: Más grande en PC */
    .hero-logo { width: 400px; }
    
    /* Frase: Mucho más grande en PC */
    .hero-phrase { font-size: 2.5rem; margin-bottom: 3rem ; max-width: 1100px; margin-left: auto; margin-right: auto;}

    .hero-phrase em { font-family: 'Syne', sans-serif !important; font-weight: 700 !important; font-size: 3rem;}

    .pricing-grid { max-width: 1200px; gap: 5px;     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}

    /* --- SECCIÓN 7: ENTREGAS Y FOOTER --- */
    .delivery-section { padding: 100px 20px; gap: 25px;}
    .delivery-box { padding: 30px 10px; width: 400px; font-size: 1.3rem !important;}

    /* Footer: Distribución horizontal */
    .footer-content { flex-direction: row; justify-content: space-between; max-width: 1000px; margin: 0 auto; }
    
    /* Mockup: Tamaño completo */
    .phone-mockup { width: var(--ancho-celular-mockup) !important; height: var(--alto-celular-mockup) !important; max-width: none !important; transform: scale(0.8); transform-origin: top center; }
    
    /* Padding general */
    .section-padding { padding: 80px 20px; }
}