:root {
    --color-dark: #111111;
    --color-secondary-dark: #1C1C1C;
    --color-light: #F0F0F0;
    --color-gray: #999999;
    --color-accent: #90EE90;
    --color-accent-rgb: 144, 238, 144;
    --font-sans: 'Inter', sans-serif;
    --font-serif: 'EB Garamond', serif;

    /* Major Third Type Scale (Base: 16px) */
    --font-size-p: 1rem; /* 16px */
    --font-size-h6: 1.25rem; /* 20px */
    --font-size-h5: 1.563rem; /* 25px */
    --font-size-h4: 1.953rem; /* 31px */
    --font-size-h3: 2.441rem; /* 39px */
    --font-size-h2: 3.052rem; /* 49px */
    --font-size-h1: 3.815rem; /* 61px */
}

body {
    background-color: var(--color-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, .text-h1 { font-size: var(--font-size-h1); line-height: 1.2; }
h2, .text-h2 { font-size: var(--font-size-h2); line-height: 1.2; }
h3, .text-h3 { font-size: var(--font-size-h3); line-height: 1.2; }
h4, .text-h4 { font-size: var(--font-size-h4); line-height: 1.2; }
h5, .text-h5 { font-size: var(--font-size-h5); line-height: 1.2; }
h6, .text-h6 { font-size: var(--font-size-h6); line-height: 1.5; }
p { font-size: var(--font-size-p); line-height: 1.5; }

@media (max-width: 768px) {
    h1, .text-h1 { font-size: calc(var(--font-size-h1) * 0.7); }
    h2, .text-h2 { font-size: calc(var(--font-size-h2) * 0.75); }
    h3, .text-h3 { font-size: calc(var(--font-size-h3) * 0.8); }
}

/* Button */
.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-dark);
    padding: 16px 40px;
    border-radius: 999px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 24px rgba(var(--color-accent-rgb), 0.3);
    border: 2px solid var(--color-accent);
}

.btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(var(--color-accent-rgb), 0.5);
}

/* Glassmorphism Effect */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Testimonial Card */
.testimonial-card {
    background-color: var(--color-secondary-dark);
    padding: 32px;
    border-radius: 24px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}

/* Benefit Card */
.benefit-card {
    padding: 32px;
    border-radius: 16px;
    border: 1px solid rgba(var(--color-accent-rgb), 0.3);
    background: linear-gradient(145deg, var(--color-secondary-dark), #222222);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.benefit-card:hover {
    border-color: rgba(var(--color-accent-rgb), 0.7);
    transform: translateY(-4px);
}

/* Value Stack Item */
.value-item {
    background-color: var(--color-secondary-dark);
    padding: 16px;
    border-radius: 16px;
    text-align: center;
}

/* Guarantee Box */
.guarantee-box {
    position: relative;
    overflow: hidden;
}

.guarantee-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at center, rgba(var(--color-accent-rgb), 0.1), transparent 70%);
    opacity: 0.5;
    z-index: -1;
}

/* FAQ Accordion */
.faq-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background-color: var(--color-secondary-dark);
    overflow: hidden;
}

/* Botón de la pregunta se queda igual */
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    text-align: left;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--color-light);
    background: transparent;
    border: none;
    cursor: pointer;
}

.faq-icon {
    transition: transform 0.3s ease;
    color: var(--color-accent);
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

/* ESTO es lo importante */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 24px;
    transition: max-height 0.5s ease-out, padding 0.5s ease-out;
}

.faq-answer p {
    color: var(--color-gray);
    padding-bottom: 0;
}

/* Cuando está activo, se despliega */
.faq-item.active .faq-answer {
    max-height: 500px; /* o más si lo necesitas */
    padding: 0 24px 24px 24px;
}
/* SplitType styles */
.line { overflow: hidden; }
.char { transform: translateY(100%); display: inline-block; }