/* =====================================================
PRODUCTIVIDAD - Estilos con prefijo prod-
===================================================== */

:root {
--prod-primary: #0066cc;
--prod-secondary: #00d4ff;
--prod-accent: #007BFF;
--prod-light-bg: #f0fdfc;
--prod-text-dark: #1a1a1a;
--prod-text-secondary: #555;
--prod-border: #e8e8e8;
--prod-shadow-sm: 0 2px 8px rgba(0, 76, 109, 0.1);
--prod-shadow-md: 0 8px 16px rgba(0, 76, 109, 0.15);
--prod-shadow-lg: 0 20px 40px rgba(0, 76, 109, 0.2);
--prod-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== CONTENEDOR ===== */
.prod-container {
max-width: 1300px;
margin: 0 auto;
padding: 0 1.5rem;
}

/* ===== TÍTULOS ===== */
.prod-section-title {
font-size: 2.5rem;
color: var(--prod-primary);
text-align: center;
margin-bottom: 1.5rem;
font-weight: 900;
letter-spacing: -0.5px;
position: relative;
padding-bottom: 1.5rem;
}

.prod-section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(90deg, var(--prod-primary), var(--prod-secondary));
border-radius: 2px;
}

.prod-section-subtitle {
text-align: center;
color: var(--prod-text-secondary);
font-size: 1.1rem;
margin-bottom: 3rem;
}

/* ===== SECCIONES ===== */
.prod-section-incluye,
.prod-section-beneficios,
.prod-section-casos,
.prod-section-faq {
background: linear-gradient(135deg, var(--prod-light-bg) 0%, #ffffff 100%);
border-bottom: 1px solid var(--prod-border);
padding: 80px 20px;
}

.prod-section-modulos {
background: #f9fafb;
border-bottom: 1px solid var(--prod-border);
padding: 80px 20px;
}

.prod-section-caracteristicas {
background: linear-gradient(135deg, var(--prod-light-bg) 0%, #e8f8f7 100%);
border-bottom: 1px solid var(--prod-border);
padding: 80px 20px;
}

.prod-section-testimonios {
background: white;
border-bottom: 1px solid var(--prod-border);
padding: 80px 20px;
}

.prod-section-cta {
background: linear-gradient(135deg, var(--prod-primary) 0%, #003d57 100%);
color: white;
text-align: center;
padding: 80px 20px;
position: relative;
overflow: hidden;
}

.prod-section-cta h2 {
color: white;
font-size: 2.5rem;
margin-bottom: 20px;
}

.prod-section-cta p {
font-size: 1.2rem;
margin-bottom: 40px;
opacity: 0.95;
}

/* ===== FEATURES GRID ===== */
.prod-features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}

.prod-feature-card {
background: white;
padding: 2.5rem;
border-radius: 16px;
border-left: 5px solid var(--prod-secondary);
transition: var(--prod-transition);
box-shadow: var(--prod-shadow-md);
text-align: left;
}

.prod-feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 48px rgba(0, 76, 109, 0.25);
border-left-color: var(--prod-primary);
}

.prod-feature-icon {
font-size: 2.5rem;
margin-bottom: 1.2rem;
color: var(--prod-secondary);
transition: transform 0.35s ease;
}

.prod-feature-card:hover .prod-feature-icon {
transform: scale(1.1);
}

.prod-feature-title {
color: var(--prod-primary);
font-weight: 800;
margin-bottom: 0.75rem;
font-size: 1.2rem;
}

.prod-feature-text {
color: var(--prod-text-secondary);
line-height: 1.6;
margin: 0;
}

/* ===== BENEFICIOS ===== */
.prod-beneficios-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: center;
margin-bottom: 60px;
}

.prod-beneficios-row:last-child {
margin-bottom: 0;
}

.prod-beneficio-content h3 {
color: var(--prod-primary);
font-size: 1.8rem;
font-weight: 900;
margin-bottom: 1.5rem;
letter-spacing: -0.3px;
}

.prod-beneficio-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
align-items: flex-start;
transition: all 0.35s ease;
}

.prod-beneficio-item:hover {
transform: translateX(8px);
}

.prod-beneficio-icon {
color: var(--prod-secondary);
font-size: 1.3rem;
flex-shrink: 0;
font-weight: 900;
}

.prod-beneficio-text {
color: var(--prod-text-secondary);
line-height: 1.6;
}

.prod-beneficio-image-box {
background: linear-gradient(135deg, #f0fdfc 0%, #ffffff 100%);
padding: 40px;
border-radius: 10px;
text-align: center;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.prod-beneficio-image-box:hover {
transform: scale(1.02);
box-shadow: 0 16px 40px rgba(0, 212, 255, 0.15);
}

.prod-beneficio-image-icon {
font-size: 4rem;
color: var(--prod-secondary);
}

/* ===== MÓDULOS GRID ===== */
.prod-modulos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

.prod-modulo-card {
background: white;
padding: 2rem;
border-radius: 16px;
text-align: center;
box-shadow: var(--prod-shadow-md);
transition: var(--prod-transition);
border-top: 5px solid var(--prod-secondary);
}

.prod-modulo-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 48px rgba(0, 76, 109, 0.25);
border-top-color: var(--prod-primary);
}

.prod-modulo-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: linear-gradient(135deg, var(--prod-secondary) 0%, #005f5d 100%);
color: white;
border-radius: 50%;
font-weight: 900;
font-size: 1.3rem;
margin-bottom: 1.2rem;
}

.prod-modulo-title {
color: var(--prod-primary);
font-size: 1.2rem;
font-weight: 900;
margin-bottom: 0.75rem;
}

.prod-modulo-text {
color: var(--prod-text-secondary);
line-height: 1.6;
margin: 0;
}

/* ===== CASOS GRID ===== */
.prod-casos-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

.prod-caso-card {
background: linear-gradient(135deg, var(--prod-light-bg) 0%, white 100%);
padding: 2rem;
border-radius: 16px;
border-left: 5px solid var(--prod-secondary);
transition: var(--prod-transition);
}

.prod-caso-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 48px rgba(0, 76, 109, 0.25);
border-left-color: var(--prod-primary);
}

.prod-caso-icon {
font-size: 2.2rem;
margin-bottom: 15px;
color: var(--prod-secondary);
}

.prod-caso-title {
color: var(--prod-primary);
font-weight: 900;
margin-bottom: 10px;
font-size: 1.1rem;
}

.prod-caso-text {
color: var(--prod-text-secondary);
margin: 0;
line-height: 1.6;
}

/* ===== CARACTERÍSTICAS LIST ===== */
.prod-caracteristicas-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}

.prod-caracteristica-item {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 0.75rem;
border-radius: 8px;
transition: all 0.35s ease;
}

.prod-caracteristica-item:hover {
background: rgba(0, 150, 143, 0.05);
transform: translateX(5px);
}

.prod-caracteristica-check {
color: var(--prod-secondary);
font-size: 1.2rem;
flex-shrink: 0;
}

.prod-caracteristica-text {
color: var(--prod-text-secondary);
margin: 0;
line-height: 1.5;
}

.prod-caracteristica-text strong {
color: var(--prod-primary);
}

/* ===== TESTIMONIOS GRID ===== */
.prod-testimonios-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

.prod-testimonio-card {
background: #f8f9fa;
padding: 2rem;
border-radius: 16px;
border-left: 5px solid var(--prod-secondary);
transition: var(--prod-transition);
}

.prod-testimonio-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 48px rgba(0, 76, 109, 0.25);
}

.prod-testimonio-quote {
color: var(--prod-secondary);
font-size: 2.5rem;
margin-bottom: 10px;
opacity: 0.3;
line-height: 1;
}

.prod-testimonio-text {
color: var(--prod-text-secondary);
font-style: italic;
margin-bottom: 20px;
line-height: 1.7;
}

.prod-testimonio-autor {
color: var(--prod-primary);
font-weight: 900;
}

.prod-testimonio-rol {
color: var(--prod-secondary);
font-size: 0.9rem;
}

/* ===== FAQ ===== */
.prod-faq-container {
max-width: 800px;
margin: 0 auto;
}

.prod-faq-item {
background: white;
margin-bottom: 1rem;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--prod-shadow-sm);
transition: var(--prod-transition);
border: 1px solid transparent;
}

.prod-faq-item:hover {
box-shadow: 0 8px 24px rgba(0, 76, 109, 0.15);
border-color: var(--prod-primary);
}

.prod-faq-question {
padding: 1.5rem;
background: white;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 700;
color: var(--prod-primary);
border-left: 5px solid var(--prod-secondary);
transition: all 0.35s ease;
}

.prod-faq-question:hover {
color: var(--prod-secondary);
background: rgba(0, 150, 143, 0.03);
}

.prod-faq-answer {
max-height: 0;
overflow: hidden;
padding: 0 1.5rem;
background: #fafafa;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
color: var(--prod-text-secondary);
line-height: 1.7;
}

.prod-faq-item.prod-active .prod-faq-answer {
max-height: 300px;
padding: 1.5rem;
}

.prod-faq-icon {
color: var(--prod-secondary);
font-size: 1.1rem;
transition: transform 0.35s ease;
}

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

/* ===== BOTONES ===== */
.prod-btn-primary {
background: white;
color: var(--prod-primary);
padding: 14px 32px;
border-radius: 10px;
text-decoration: none;
font-weight: 800;
font-size: 0.95rem;
display: inline-flex;
align-items: center;
gap: 10px;
transition: var(--prod-transition);
box-shadow: 0 8px 24px rgba(0, 76, 109, 0.3);
text-transform: uppercase;
border: none;
cursor: pointer;
}

.prod-btn-primary:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(0, 76, 109, 0.4);
color: var(--prod-primary);
}

.prod-btn-secondary {
border: 2px solid white;
color: white;
padding: 12px 28px;
border-radius: 10px;
text-decoration: none;
font-weight: 800;
font-size: 0.95rem;
display: inline-flex;
align-items: center;
gap: 10px;
transition: var(--prod-transition);
text-transform: uppercase;
background: transparent;
cursor: pointer;
}

.prod-btn-secondary:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-3px);
border-color: rgba(255, 255, 255, 0.8);
color: white;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
.prod-features-grid,
.prod-modulos-grid,
.prod-casos-grid,
.prod-testimonios-grid,
.prod-caracteristicas-list {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.prod-section-title {
font-size: 1.8rem;
}

.prod-features-grid,
.prod-modulos-grid,
.prod-casos-grid,
.prod-testimonios-grid,
.prod-caracteristicas-list {
grid-template-columns: 1fr;
}

.prod-beneficios-row {
grid-template-columns: 1fr;
gap: 30px;
}

.prod-section-cta h2 {
font-size: 2rem;
}

.prod-btn-primary,
.prod-btn-secondary {
width: 100%;
justify-content: center;
}
}

@media (max-width: 576px) {
.prod-container {
padding: 0 1rem;
}

.prod-section-title {
font-size: 1.5rem;
}

.prod-section-incluye,
.prod-section-beneficios,
.prod-section-modulos,
.prod-section-casos,
.prod-section-caracteristicas,
.prod-section-testimonios,
.prod-section-faq,
.prod-section-cta {
padding: 50px 15px;
}

.prod-feature-card,
.prod-modulo-card,
.prod-caso-card,
.prod-testimonio-card {
padding: 1.5rem;
}
}