/* ==========================================================================
STYLESHEET PARA SUBPÁGINAS DE NICHO - OSCARBORDETAS.COM
Versión: 4.3 (Ajuste de margen y corrección de botón)
========================================================================== */
/* -------------------------------------------------------------------------- / # VARIABLES Y ESTILOS GLOBALES
/* -------------------------------------------------------------------------- */
:root {
--color-brand: #2664eb;
--color-brand-light: #4c85f1;
--color-bg-dark: #101214;
--color-bg-light: #ffffff;
--color-bg-light-gray: #f8f9fa;
--color-text-dark-primary: #1a1d20;
--color-text-dark-secondary: #4a5568;
--color-star-rating: #ffc107;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 3rem;
--spacing-xl: 5rem;
--border-radius: 12px;
--transition-speed: 0.3s ease;
}

/* CAMBIO AÑADIDO: Contenedor principal ajustado para móviles y centrado. */
.subpage-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing-md);
}

@media (max-width: 767px) {
    .subpage-container {
        width: 90%;
        padding: 0;
    }
}

/* CAMBIO CLAVE: Espaciado entre secciones reducido y controlado */
main.main-content-subpage .subpage-section { padding-top: 50px; padding-bottom: 50px; }
main.main-content-subpage .niche-hero { padding-top: var(--spacing-xl); }
main.main-content-subpage .final-cta-section { padding-bottom: var(--spacing-xl); }
.subpage-section__header { text-align: center; max-width: 800px; margin: 0 auto var(--spacing-lg); }
.subpage-section__title { color: var(--color-text-dark-primary); font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: var(--spacing-sm); }
.subpage-section__subtitle { font-size: 1.15rem; color: var(--color-text-dark-secondary); text-align: center; }
/* -------------------------------------------------------------------------- / # 1. SECCIÓN HERO (Forzada)
/* -------------------------------------------------------------------------- */
.niche-hero .subpage-container { display: grid; grid-template-columns: 1fr; align-items: center; gap: var(--spacing-lg); }
.niche-hero__content { text-align: center; }
.niche-hero__tagline { display: inline-block; color: var(--color-brand); font-weight: 700; background-color: rgba(38, 100, 235, 0.1); padding: 0.5rem 1rem; border-radius: 99px; margin-bottom: var(--spacing-sm); }
/* CAMBIO CLAVE: H1 más pequeño y con !important para anular todo */
main.main-content-subpage .niche-hero__title {
color: var(--color-text-dark-primary);
margin-top: 0;
margin-bottom: var(--spacing-md);
font-size: clamp(1.8rem, 4.5vw, 2.4rem) !important;
}
.niche-hero__subtitle { color: var(--color-text-dark-secondary); font-size: 1.2rem; max-width: 70ch; margin: 0 auto var(--spacing-md); line-height: 1.7; }
.niche-hero__image { border-radius: var(--border-radius); box-shadow: 0 20px 40px rgba(0,0,0,0.1); margin-top: var(--spacing-md); }
.niche-hero__cta .button { display: inline-block; font-weight: 700; font-size: 1.1rem; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius); cursor: pointer; transition: all var(--transition-speed); text-align: center; text-decoration: none; }
.niche-hero__cta .button--primary { background-color: var(--color-brand); color: #fff !important; border: 2px solid var(--color-brand); box-shadow: 0 4px 15px rgba(38, 100, 235, 0.2); }
.niche-hero__cta .button--primary:hover { background-color: var(--color-brand-light); color: #fff !important; border-color: var(--color-brand-light); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(38, 100, 235, 0.35); }
@media (min-width: 992px) {
    /* CAMBIO CLAVE: Proporción 60/40 forzada con !important / 60% / 40% */
    .niche-hero .subpage-container {
        grid-template-columns: 60fr 40fr !important;
        gap: var(--spacing-xl);
    }
    .niche-hero__content { text-align: left; }
    .niche-hero__subtitle { margin-left: 0; }
    .niche-hero__image { margin-top: 0; }
}
/* -------------------------------------------------------------------------- / # 2. SECCIÓN PUNTOS DE DOLOR
/* -------------------------------------------------------------------------- */
.pain-points-section { background-color: var(--color-bg-light-gray); border-top: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef; }
.pain-points__grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); }
.pain-point__card { background-color: #fff; padding: var(--spacing-md); border-radius: var(--border-radius); border: 1px solid #e9ecef; text-align: center; transition: transform var(--transition-speed), box-shadow var(--transition-speed); }
.pain-point__card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.pain-point__icon { margin: 0 auto var(--spacing-sm); width: 56px; height: 56px; background-color: rgba(38, 100, 235, 0.1); border-radius: 16px; display: grid; place-items: center; color: var(--color-brand); }
.pain-point__icon svg { width: 28px; height: 28px; }
.pain-point__title { color: var(--color-text-dark-primary); font-size: 1.2rem; margin: 0 0 0.5rem 0; }
.pain-point__text { margin: 0; color: var(--color-text-dark-secondary); font-size: 0.95rem; text-align: justify; hyphens: auto; }
@media (min-width: 768px) { .pain-points__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pain-points__grid { grid-template-columns: repeat(3, 1fr); } }
/* -------------------------------------------------------------------------- / # 3. SECCIÓN SOLUCIÓN / BENEFICIOS
/* -------------------------------------------------------------------------- */
.solution-section .subpage-container { display: flex; flex-direction: column; }
.solution-feature { display: grid; grid-template-columns: 1fr; align-items: center; gap: var(--spacing-lg); }
.solution-feature__image img { border-radius: var(--border-radius); box-shadow: 0 15px 30px rgba(0,0,0,0.08); }
.solution-feature__tag { color: var(--color-brand); font-weight: 700; margin-bottom: 0.5rem; display: block; }
.solution-feature__title { color: var(--color-text-dark-primary); font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 0; margin-bottom: var(--spacing-sm); }
.solution-feature__text { color: var(--color-text-dark-secondary); line-height: 1.8; }
.solution-feature__list { list-style: none; padding-left: 0; margin-top: var(--spacing-md); display: grid; gap: 0.75rem; }
.solution-feature__list li { padding-left: 2rem; position: relative; }
.solution-feature__list li::before { content: '✔'; position: absolute; left: 0; color: #10B981; font-size: 1.2rem; font-weight: bold; }
@media (min-width: 992px) {
.solution-feature { grid-template-columns: 1fr 1fr; }
.solution-feature--reversed .solution-feature__image { grid-column: 2; grid-row: 1; }
.solution-feature--reversed .solution-feature__content { grid-column: 1; grid-row: 1; }
}
/* -------------------------------------------------------------------------- / # 4. SECCIÓN PRUEBA SOCIAL
/* -------------------------------------------------------------------------- */
.reviews-section {
    background-color: var(--color-bg-light);
    /* CAMBIO AÑADIDO: Margen superior negativo aumentado a -150px para subir más la sección */
    margin-top: -150px !important;
}
.review-grid { display: grid; gap: var(--spacing-md); }
.review-card { background-color: var(--color-bg-light-gray); padding: var(--spacing-md); border-radius: var(--border-radius); display: flex; flex-direction: column; border: 1px solid #e9ecef; }
.review-card__stars { color: var(--color-star-rating); font-size: 1.2rem; margin-bottom: var(--spacing-sm); letter-spacing: 2px; }
.review-card__text { margin: 0 0 var(--spacing-md) 0; color: var(--color-text-dark-secondary); flex-grow: 1; font-style: italic; }
.review-card__header { display: flex; align-items: center; gap: var(--spacing-sm); margin-top: auto; }
.review-card__avatar img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.review-card__author-info { line-height: 1.4; }
.review-card__author-name { font-weight: 700; color: var(--color-text-dark-primary); margin: 0; }
.review-card__author-title { font-size: 0.9rem; color: var(--color-text-dark-secondary); margin: 0; }
@media (min-width: 1024px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
/* -------------------------------------------------------------------------- / # 5. SECCIÓN PLAN DE ACCIÓN
/* -------------------------------------------------------------------------- */
.plan-section { background-color: var(--color-bg-light-gray); border-top: 1px solid #e9ecef; }
.plan__grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); }
.plan-step { background: #fff; padding: var(--spacing-md); border-radius: var(--border-radius); border: 1px solid #e9ecef; position: relative; transition: transform var(--transition-speed), box-shadow var(--transition-speed); border-left: 4px solid var(--color-brand); }
.plan-step:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.plan-step__header { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.plan-step__number { background-color: var(--color-brand); color: #fff; font-weight: 700; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-size: 1.2rem; }
.plan-step__title { color: var(--color-text-dark-primary); font-size: 1.25rem; margin: 0; }
.plan-step__text { margin: 0; color: var(--color-text-dark-secondary); }
@media (min-width: 1024px) { .plan__grid { grid-template-columns: repeat(3, 1fr); } }
/* -------------------------------------------------------------------------- / # 6. SECCIÓN FAQ
/* -------------------------------------------------------------------------- */
.faq-section { background-color: var(--color-bg-light); }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid #dee2e6; }
.faq-item:last-child { border-bottom: none; }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md) 0; cursor: pointer; font-size: 1.2rem; font-weight: 600; transition: color var(--transition-speed); color: var(--color-text-dark-primary); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-brand); }
.faq-item .chevron { width: 1em; height: 1em; border-style: solid; border-width: 0.15em 0.15em 0 0; display: inline-block; padding: 0.25em; transform: rotate(135deg); transition: transform var(--transition-speed); flex-shrink: 0; margin-left: var(--spacing-sm); border-color: var(--color-text-dark-secondary); }
.faq-item[open] > summary .chevron { transform: rotate(-45deg); }
.faq-content { padding-bottom: var(--spacing-md); }
/* -------------------------------------------------------------------------- / # 7. SECCIÓN CTA FINAL (Estilo profesional copiado)
/* -------------------------------------------------------------------------- */
.final-cta-section { background-color: var(--color-bg-dark); }
.final-cta-box {
    max-width: 800px;
    margin: 0 auto;
    border-radius: calc(var(--border-radius) + 2px);
    padding: 3px;
    background: linear-gradient(135deg, var(--color-brand), var(--color-bg-medium-light));
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.final-cta-box__content {
    background-color: var(--color-bg-dark);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}
.final-cta-box__title { color: #fff; font-size: clamp(1.8rem, 5vw, 2.5rem); margin: 0; }
.final-cta-box__text { color: #A0AEC0; max-width: 60ch; margin: 0 auto var(--spacing-md); text-align: center; }
.final-cta-box .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    font-size: 1.1rem;
    padding: 1rem 2rem;
    border-radius: var(--border-radius);
    transition: all var(--transition-speed);
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
    /* CAMBIO AÑADIDO: Permite que el texto del botón pase a una segunda línea si no cabe */
    white-space: normal;
    height: auto; /* Asegura que la altura se ajuste al contenido de varias líneas */
    line-height: 1.4; /* Mejora la legibilidad del texto en dos líneas */
}
.final-cta-box .button--primary { background: #128C7E; color: #fff !important; border-color: transparent; }
.final-cta-box .button--primary:hover { background: #0F7A6E; transform: translateY(-2px); }
.final-cta-box .button--primary::before { content: ''; display: inline-block; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23ffffff'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.8 0-66.2-9.2-93.7-26.2l-6.7-4-69.8 18.3L72 359.2l-4.5-7c-18.9-29.6-28.9-63.3-28.9-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; }