:root {
    --bg-color: #050505;
    --text-main: #f2f2f2;
    --text-dim: #999;
    --accent: #E6C200;
    --card-bg: rgba(10, 10, 10, 0.98);
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
}

h1, h2, h3 { font-family: 'Playfair Display', serif; }

/* EMBUDO HERO - ESPACIOS OPTIMIZADOS AL MÁXIMO */
.hero-funnel {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('https://customer-assets.emergentagent.com/wingman/66b5f8d8-1f60-47e0-abc1-e05d9681999a/attachments/b8d80f5509a2434dbf7b02f0ba07a829_image.png') no-repeat center center/cover;
    position: relative;
    padding: 1rem 1rem; /* Reducido espacio global */
}

.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 0%, rgba(0,0,0,0.95) 100%);
}

.hero-content { position: relative; z-index: 2; text-align: center; max-width: 800px; width: 100%; }

.brand { 
    font-size: 0.8rem; 
    letter-spacing: 5px; 
    color: var(--accent); 
    margin-bottom: 0.2rem; /* Espacio mínimo bajo nombre */
    text-transform: uppercase;
}

h1 { 
    font-size: 3rem; /* Ligeramente más pequeño para optimizar espacio */
    line-height: 1; 
    margin-bottom: 1rem; /* Reducido espacio bajo Thrillers psicológicos */
    text-shadow: 0 5px 20px rgba(0,0,0,1); 
}

/* CAJA DE CONVERSIÓN - AJUSTE QUIRÚRGICO */
.conversion-card {
    background: var(--card-bg);
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 50px 100px rgba(0,0,0,1);
    max-width: 460px;
    margin: 0 auto;
}

.card-image {
    height: 240px; /* Reducido para que todo suba */
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #222;
}

.card-body { padding: 1.5rem 2rem 1rem; } /* Padding muy compacto */

.card-body h2 { 
    font-size: 1.8rem; 
    margin-bottom: 0.3rem; /* Espacio mínimo bajo El Asesino del Tarot */
}

.card-body .description { 
    color: var(--text-dim); 
    margin-bottom: 1rem; /* Reducido espacio bajo ¿Quién será la próxima víctima? */
    font-size: 0.9rem; 
    line-height: 1.4;
}

.form-wrapper { margin-bottom: 0.3rem; }

.cta-text {
    color: var(--accent);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.7rem;
    margin-bottom: 0.6rem; /* Reducido espacio bajo el CTA del club */
    letter-spacing: 1px;
}

#lead-form { display: flex; flex-direction: column; gap: 0.6rem; }
#lead-form input {
    padding: 0.8rem;
    background: #111;
    border: 1px solid #444;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    font-size: 0.9rem;
}

.btn-submit {
    background: var(--accent);
    color: #000;
    padding: 0.9rem;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s;
    font-size: 0.85rem;
}

.card-footer {
    padding: 1.2rem;
    background: rgba(230, 194, 0, 0.03);
    border-top: 1px solid #222;
}

.btn-amazon-main {
    display: block;
    padding: 0.9rem;
    background: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.8rem;
    letter-spacing: 1px;
    transition: all 0.3s;
    text-align: center;
}
.btn-amazon-main:hover { background: var(--accent); color: #000; }

/* SECCIÓN LIBROS - PORTADAS COMPLETAS Y AIREADAS */
.books-section { padding: 60px 5%; background: #000; }
.books-section h3 { text-align: center; font-size: 2rem; margin-bottom: 3rem; letter-spacing: 2px; }

.book-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 3rem; 
    max-width: 1200px; 
    margin: 0 auto; 
}

.book-card { text-align: center; transition: transform 0.4s; }
.book-card:hover { transform: translateY(-10px); }
.book-card img { 
    width: 100%; 
    height: auto; /* Portadas completas aseguradas */
    display: block;
    box-shadow: 0 15px 35px rgba(0,0,0,0.8); 
    margin-bottom: 1.2rem; 
}

.btn-amazon-small {
    display: block;
    padding: 0.7rem;
    border: 1px solid #444;
    color: #fff;
    text-decoration: none;
    font-size: 0.75rem;
    text-transform: uppercase;
}
.btn-amazon-small:hover { border-color: var(--accent); color: var(--accent); }

footer { padding: 40px; text-align: center; color: #333; font-size: 0.8rem; border-top: 1px solid #111; }

@media (max-width: 600px) {
    h1 { font-size: 2rem; }
    .card-image { height: 160px; }
    .conversion-card { max-width: 100%; }
}