/*
Theme Name: Lanzate Hijo (Estilo Revista)
Author: Lanzate Ahora
Version: 6.1.0 (Código Completo y Final)
*/

/* ===================================================================
 ÍNDICE
 1. VARIABLES GLOBALES
 2. ESTILOS GLOBALES
 3. HEADER Y NAVEGACIÓN (MOVIDO A HEADER.PHP)
 4. SECCIONES FRONT-PAGE (REMOVIDO Y MOVIDO A PHP)
 5. PLANTILLAS DE PÁGINA (PÁGINA DE SERVICIOS / PRECIOS)
 6. FOOTER
 7. MEDIA QUERIES
=================================================================== */

/* ===================================================================
 1. VARIABLES GLOBALES
=================================================================== */
:root {
 /* Paleta Azul Corporativo */
 --color-header-bg: #2C3E50;
 --color-header-hover-bg: #F58427;
 --color-header-text: #FFFFFF;
 --color-header-hover-text: #FFFFFF;
 --color-preheader-bg: #FFFFFF;
 --color-preheader-text: #566573;
 --color-preheader-hover: #F58427;
 --color-bg-light: #F4F6F7;
    --color-hero-bg: #fdfaf6; /* Color beige para el nuevo hero */
 --color-text-dark-body: #2C3E50;
 --color-text-green: #3498DB;
 --color-accent-orange: #E67E22;
 --color-white: #FFFFFF;
 --font-primary: 'Oswald', sans-serif;

 /* Colores para la página de servicios */
 --color-service-green: #27ae60;
 --color-service-yellow: #f1c40f;
 --color-service-pink: #e91e63;
 --color-service-orange: #e67e22;
    --color-hero-button: #e85d2f; /* Naranja específico para el botón del hero */
}

/* ===================================================================
 2. ESTILOS GLOBALES
=================================================================== */
*,
*::before,
*::after {
 box-sizing: border-box;
}

body {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 margin: 0;
 color: var(--color-text-dark-body);
 background-color: var(--color-white);
}

.container {
 max-width: 1140px;
 margin: 0 auto;
 padding: 0 1rem;
}

a {
 text-decoration: none;
 transition: color 0.3s ease, background-color 0.3s ease;
}

.section-header {
 text-align: center;
 margin-bottom: 4rem;
}

.section-title {
 font-family: var(--font-primary);
 font-size: 2.8rem;
 color: var(--color-text-dark-body);
 margin-bottom: 1rem;
}

.button-primary {
 display: inline-block;
 background-color: var(--color-text-green);
 color: var(--color-white);
 padding: 0.8rem 2rem;
 border-radius: 6px;
 font-weight: bold;
 text-decoration: none;
 transition: background-color 0.3s, transform 0.3s;
}

.button-primary:hover {
 background-color: #2874A6;
 transform: translateY(-2px);
}

.button-secondary {
 font-weight: bold;
 color: var(--color-text-dark-body);
 text-decoration: none;
}

.button-secondary:hover {
 color: var(--color-text-green);
}

.screen-reader-text {
 clip: rect(1px, 1px, 1px, 1px);
 position: absolute !important;
 height: 1px;
 width: 1px;
 overflow: hidden;
}

.text-center {
 text-align: center;
}

/* ===================================================================
 3. HEADER Y NAVEGACIÓN (MOVIDO A HEADER.PHP)
=================================================================== */
/* Los estilos del header han sido movidos al archivo header.php */


/* ===================================================================
 4. SECCIONES FRONT-PAGE (MOVIDO A PHP)
=================================================================== */
/* Los estilos para las secciones de la página de inicio se han movido
   al archivo front-page.php para una gestión más fácil y modular. */


/* ===================================================================
 5. PLANTILLAS DE PÁGINA (PÁGINA DE SERVICIOS / PRECIOS) - DISEÑO v6
=================================================================== */

/* --- INICIO ESTILOS HERO ACTUALIZADO --- */
.page-hero-section {
 padding: 5rem 0;
 background-color: var(--color-hero-bg);
 text-align: center;
}
.page-hero-pretitle {
    display: block;
    color: var(--color-service-green);
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
.page-hero-title {
 font-family: var(--font-primary);
 font-size: 3.2rem;
 margin-bottom: 1.5rem;
    color: var(--color-text-dark-body);
}
.page-hero-subtitle {
 font-size: 1.1rem;
 color: #566573;
 max-width: 620px;
 margin: 0 auto 2rem auto;
    line-height: 1.6;
}
.page-hero-features {
    color: #566573;
    margin-bottom: 2.5rem;
    font-size: 1rem;
}
.page-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
.button-primary-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-hero-button);
    color: var(--color-white);
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1rem;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
}
.button-primary-hero:hover {
    background-color: #d3542a; /* Darker orange */
    transform: translateY(-2px);
}
.button-primary-hero i {
    margin-left: 0.75rem;
}
.button-secondary-hero {
    display: inline-flex;
    align-items: center;
    font-weight: bold;
    color: var(--color-text-dark-body);
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s;
}
.button-secondary-hero:hover {
    color: var(--color-hero-button);
}
.button-secondary-hero i {
    margin-left: 0.5rem;
}
/* --- FIN ESTILOS HERO ACTUALIZADO --- */


.pricing-section {
 padding: 5rem 0;
 background-color: var(--color-bg-light);
}

/* Contenedor principal de los planes */
.pricing-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 2rem;
 align-items: stretch;
}

/* --- NUEVO DISEÑO DE TARJETA --- */
.pricing-card {
 background-color: var(--color-white);
 border: 1px solid #e9ecef;
 border-radius: 0.75rem;
 box-shadow: 0 4px 25px rgba(0,0,0,0.05);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 display: grid;
 grid-template-rows: auto 1fr auto;
 height: 100%;
}

.pricing-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.pricing-card.recommended {
 border-color: var(--color-service-pink);
 border-width: 2px;
 transform: scale(1.05);
 z-index: 10;
}
.pricing-card.recommended:hover {
 transform: scale(1.07);
}


/* -- HEADER DE LA TARJETA -- */
.pricing-card__header {
 padding: 2rem;
 text-align: center;
 position: relative;
}
.badge {
 position: absolute;
 top: 1rem;
 left: -1px;
 writing-mode: vertical-rl;
 text-orientation: mixed;
 padding: 0.75rem 0.3rem;
 font-size: 0.8rem;
 font-weight: bold;
 color: var(--color-text-dark-body);
 border-top-right-radius: 8px;
 border-bottom-right-radius: 8px;
 z-index: 1;
}
.badge.yellow { background-color: var(--color-service-yellow); }
.badge.pink { background-color: var(--color-service-pink); color: var(--color-white); }
.pricing-card.recommended .badge.pink { left: -2px; }

.plan-name { font-family: var(--font-primary); font-size: 1.6rem; margin-bottom: 1rem; }
.plan-price { font-size: 3rem; font-weight: 700; color: var(--color-text-dark-body); line-height: 1; }
.price-suffix { font-size: 1rem; font-weight: 500; color: #6c757d; }
.plan-discount { color: #6c757d; font-size: 0.9rem; margin-top: 0.5rem; height: 1.2rem; }


/* -- CONTENIDO (FEATURES) DE LA TARJETA -- */
.pricing-card__features {
 padding: 1.5rem 2rem;
 background-color: #f8f9fa;
 border-top: 1px solid #e9ecef;
 border-bottom: 1px solid #e9ecef;
}
.features-title {
 font-size: 1.1rem;
 font-weight: bold;
 margin: 0 0 1.5rem 0;
 text-align: left;
}
.pricing-card__features ul {
 list-style: none;
 padding: 0;
 margin: 0;
 min-height: 240px;
}
.pricing-card__features ul li {
 display: flex;
 gap: 0.75rem;
 margin-bottom: 1.25rem;
 font-size: 0.95rem;
 color: #343a40;
 text-align: left;
}
.pricing-card__features ul li i {
 color: var(--color-service-green);
 margin-top: 3px;
}
.valor {
 color: var(--color-service-orange);
 font-weight: bold;
}

/* -- FOOTER (BOTONES) DE LA TARJETA -- */
.pricing-card__actions {
 padding: 2rem;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}
.plan-offer {
 color: var(--color-service-pink);
 font-weight: bold;
 font-size: 0.9rem;
 margin-bottom: 1.5rem;
}
.button-primary.full-width {
 width: 100%;
 justify-content: center;
 font-size: 1rem;
 padding: 1rem;
}
.button-primary.full-width i {
 margin-left: 0.5rem;
}

/* --- SECCIÓN PREGUNTAS FRECUENTES (FAQ) --- */
.faq-section {
 padding: 5rem 0;
 background-color: var(--color-white);
}

.faq-accordion {
 max-width: 800px;
 margin: 0 auto;
 border-top: 1px solid #e9ecef;
}

.faq-item {
 border-bottom: 1px solid #e9ecef;
}

.faq-question {
 width: 100%;
 background-color: transparent;
 border: none;
 padding: 1.5rem 1rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
 cursor: pointer;
 font-size: 1.1rem;
 font-weight: 600;
 color: var(--color-text-dark-body);
 text-align: left;
}

.faq-question:hover {
 background-color: #f8f9fa;
}

.faq-question i {
 transition: transform 0.3s ease;
}

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

.faq-answer {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.4s ease-out;
}

.faq-answer p {
 padding: 0 1.5rem 1.5rem 1.5rem;
 margin: 0;
 line-height: 1.7;
 color: #566573;
}

.faq-item.active .faq-answer {
 max-height: 200px; /* Altura suficiente para la mayoría de respuestas */
}


/* ===================================================================
 6. FOOTER
=================================================================== */
.site-footer {
 background-color: var(--color-header-bg);
 color: rgba(255, 255, 255, 0.7);
 font-size: 0.9rem;
}

.footer-main {
 padding: 4rem 0;
}

.footer-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 2.5rem;
}

.footer-column .widget {
 margin-bottom: 1.5rem;
}

.footer-column .widget-title {
 font-family: var(--font-primary);
 color: var(--color-white);
 font-size: 1.2rem;
 margin-bottom: 1.5rem;
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.footer-column ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

.footer-column ul li {
 margin-bottom: 0.75rem;
}

.footer-column ul li a {
 color: rgba(255, 255, 255, 0.7);
 text-decoration: none;
 transition: color 0.3s;
}

.footer-column ul li a:hover {
 color: var(--color-white);
}

.footer-column .custom-logo-link {
 display: block;
 margin-bottom: 1rem;
 background-color: var(--color-white);
 padding: 1rem;
 border-radius: 8px;
 max-width: 200px;
}

.footer-bottom {
 background-color: rgba(0, 0, 0, 0.2);
 padding: 1.5rem 0;
}

.footer-bottom-content {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.copyright {
 font-size: 0.85rem;
}

.footer-social a {
 color: rgba(255, 255, 255, 0.7);
 font-size: 1.1rem;
 margin-left: 1rem;
}

.footer-social a:hover {
 color: var(--color-white);
}

/* ===================================================================
 7. MEDIA QUERIES (ESTILOS RESPONSIVE)
=================================================================== */

/* --- Para Tablets y pantallas medianas (hasta 992px) --- */
@media (max-width: 992px) {
 /* Plantilla de Precios */
 .pricing-grid {
   grid-template-columns: 1fr;
   gap: 2.5rem;
 }
 .pricing-card.recommended {
   transform: scale(1);
 }
 .pricing-card.recommended:hover {
   transform: translateY(-5px);
 }
 .pricing-card__features ul {
   min-height: auto;
 }

 /* Footer */
 .footer-grid {
   grid-template-columns: repeat(2, 1fr);
 }
}

/* --- Para Móviles y pantallas pequeñas (hasta 767px) --- */
@media (max-width: 767px) {
 /* Footer */
 .footer-grid { grid-template-columns: 1fr; }
 .footer-bottom-content { flex-direction: column; gap: 1rem; }
}