@import url('./base.css');

/* Secciones Exclusivas de la Página Principal (unidad-garante) */

.intro-section {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto clamp(2rem, 5vw, 4rem) auto;
    background-color: var(--bg-light);
    padding: clamp(1rem, 4vw, 2rem);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.intro-section h3 {
    font-size: clamp(1.4rem, 4vw, 2rem);
    color: var(--color-azul);
    margin-bottom: clamp(0.5rem, 2vw, 1rem);
}

.intro-section p {
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    color: var(--color-gris-oscuro);
}

/* Services Grid */
.grid-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 80vw, 370px), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    margin-bottom: clamp(2rem, 5vw, 4rem);
}

.service-card {
    background: var(--bg-light);
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

a.service-card {
    text-decoration: none;
}

.service-card:hover {
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

.service-card:hover span {
    transform: translateX(4px);
}

.service-card h4 {
    font-size: clamp(1.05rem, 2.5vw, 1.25rem);
    color: var(--color-azul);
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
}

.service-card p {
    font-size: clamp(0.85rem, 1.8vw, 0.95rem);
    color: var(--color-gris-oscuro);
}

.service-card span {
    transition: transform 0.2s;
    position: absolute;
    right: clamp(15px, 3vw, 25px);
    bottom: clamp(5px, 3vw, 10px);
}

/* FAQ Container */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 2rem);
    margin-top: clamp(2rem, 5vw, 4rem);
    max-width: 1200px;
    padding: clamp(1.25rem, 3vw, 2rem);
    background-color: var(--bg-light);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    scroll-margin-top: calc(var(--scroll-navbar-height) + 2rem);
}

.faq-container .faq-list .faq-section:last-child {
    margin-bottom: 0;
}

.faq-intro {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.faq-intro h4 {
    font-size: clamp(1.4rem, 4vw, 2rem);
    color: var(--color-azul);
    margin-bottom: clamp(0.5rem, 2vw, 1rem);
}

.faq-intro p {
    font-size: clamp(0.9rem, 2vw, 1.05rem);
    color: var(--color-gris-oscuro);
}

.faq-section {
    display: flex;
    flex-direction: column;
    margin-bottom: clamp(1.3rem, 2vw, 1.5rem);
    border-top: 3px solid var(--border-color);
    padding-top: clamp(1.3rem, 2vw, 1.5rem);
}

.faq-section h3 {
    font-size: clamp(1.15rem, 2.5vw, 1.4rem);
    color: var(--color-azul);
    margin-bottom: clamp(0.5rem, 2vw, 1rem);
}

.faq-item {
    border-bottom: 1px solid var(--border-color);
    padding: clamp(0.75rem, 2vw, 1rem) 0;
}

.faq-item:last-of-type {
    border-bottom: none;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.faq-question h4 {
    padding-left: clamp(0.5rem, 2vw, 1rem);
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: var(--color-azul);
    margin-bottom: 0;
    transition: color 0.2s;
}

.faq-question:hover h4,
.faq-question:hover .faq-icon {
    color: var(--color-rojo-oscuro);
    cursor: pointer;
}

.faq-icon {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: bold;
    color: var(--color-azul);
    transition: transform 0.3s ease;
}

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

.faq-answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease,
        opacity 0.3s ease, padding 0.3s ease;
    padding: 0;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    opacity: 1;
    padding-top: clamp(0.5rem, 1.5vw, 0.75rem);
}

.faq-answer p {
    font-size: clamp(0.85rem, 1.8vw, 0.95rem);
    color: var(--color-gris-oscuro);
    padding-left: clamp(0.75rem, 2.5vw, 1.3rem);
}