/* Contiene el reset, variables CSS, estilos base para html, body, tipografía general, clases de utilidad y estilos de layout como .container y .page-padding */
/* --- Text Color Utilities --- */
.text-color-light {
color: var(--color-primary-light);
}
.text-color-medium {
color: var(--color-primary);
}
.text-color-dark {
color: var(--color-primary-dark);
}
.text-color-darkest {
color: var(--color-primary-darkest);
}
.text-color-normal {
color: var(--color-gray-800);
}
/* --- Fin Text Color Utilities --- */
/* Variables CSS globales */
:root {
--color-primary: #3b82f6;
--color-secondary: #10B981;
--color-alert: #F59E0B;
--color-error: #EF4444;
--color-neutral: #6B7280;
--color-primary-light: #60a5fa;
--color-primary-dark: #1d4ed8;
--color-primary-darkest: #1e40af;
--color-sky-light: #e0f2fe;
--color-sky-lighter: #f0f9ff;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 10px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Reset y estilos base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
scroll-behavior: smooth;
}
body {
background-color: var(--color-gray-50);
color: var(--color-gray-800);
line-height: 1.6;
font-weight: 400;
font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Inter', sans-serif;
font-weight: 600;
}
h1 {
font-weight: 800;
font-size: 2.5rem;
line-height: 1.2;
margin-bottom: 1.5rem;
}
h2 {
font-weight: 700;
font-size: 2rem;
line-height: 1.3;
margin-bottom: 1.25rem;
}
h3 {
font-weight: 600;
font-size: 1.5rem;
line-height: 1.4;
margin-bottom: 1rem;
}
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
}
#header-placeholder {
min-height: 126px; /* Mantener altura mínima */
/* Opcional: un fondo muy sutil mientras carga */
/* background-color: var(--color-gray-50); */
opacity: 0; /* Ocultar inicialmente */
transition: opacity 0.2s ease-in-out; /* Transición suave */
}
#header-placeholder.loaded {
opacity: 1;
}
.header {
background-color: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 50;
box-shadow: var(--shadow-md);
border-bottom: 1px solid rgba(229, 231, 235, 0.5);
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.25rem 1rem;
}
.logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.5rem;
font-weight: bold;
color: var(--color-primary);
text-decoration: none;
}
.logo-image {
height: 120px;
width: auto;
vertical-align: middle;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}
.nav-links {
display: none;
}
.nav-links a {
color: var(--color-gray-700);
text-decoration: none;
padding: 0.5rem 1rem;
transition: color 0.2s, background-color 0.2s, transform 0.1s;
border-radius: 0.25rem;
position: relative;
overflow: hidden;
}
.nav-links a:hover {
color: var(--color-primary);
background-color: var(--color-sky-light);
}
.nav-links a:active {
transform: scale(0.95);
background-color: var(--color-sky-light);
}
.btn {
display: inline-block;
padding: 0.85rem 1.75rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
letter-spacing: 0.01em;
}
.btn-primary {
background-color: var(--color-primary);
color: white !important; /* Forzar color blanco */
background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}
.btn-primary:hover {
background-color: var(--color-primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
background-image: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-darkest));
}
/* Estado activo para botón primario */
.btn:active {
transform: translateY(1px) scale(0.98);
box-shadow: none;
filter: brightness(0.95);
}
.btn-outline {
border: 2px solid var(--color-primary);
color: var(--color-primary);
background-color: transparent;
position: relative;
z-index: 1;
overflow: hidden;
}
.btn-outline:hover {
color: white;
}
.btn-outline::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: var(--color-primary);
transition: all 0.3s ease;
z-index: -1;
}
.btn-outline:hover::before {
width: 100%;
}
.hero {
padding: 6rem 0 5rem;
background: linear-gradient(135deg, var(--color-sky-lighter), var(--color-sky-light));
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url('data:image/svg+xml;utf8,');
z-index: 1;
}
.hero .container {
position: relative;
z-index: 2;
}
.hero-content {
display: grid;
gap: 3rem;
text-align: center;
align-items: center;
}
.hero h1 {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-gray-900);
line-height: 1.2;
}
.hero p {
font-size: 1.125rem;
color: var(--color-gray-700);
margin: 1.5rem 0;
}
.hero-buttons {
display: flex;
gap: 1.25rem;
justify-content: center;
flex-wrap: wrap;
animation: fadeInUp 0.8s ease-out 0.4s both;
}
.features {
padding: 4rem 0;
background-color: white;
}
.features-grid {
display: grid;
gap: 2rem;
padding: 2rem 0;
}
.feature-card {
padding: 2rem;
border-radius: 0.5rem;
background-color: var(--color-gray-50);
box-shadow: var(--shadow-md);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary-light);
}
/* Estilos para la barra de navegación de producto */
/* Los estilos de navegación de producto se han movido a section-links.css */
/* Divider centrado con puntos */
.centered-divider {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
margin: 2rem auto;
}
.divider-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--color-primary);
opacity: 0.7;
}
.divider-dot:nth-child(2) {
width: 12px;
height: 12px;
opacity: 1;
}
/* Text center utility */
.text-center {
text-align: center;
}
/* Pricing Section */
.pricing {
padding: 4rem 0;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 2rem 0;
}
.pricing-card {
background-color: white;
border-radius: 0.75rem;
padding: 2.5rem;
box-shadow: var(--shadow-md);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
position: relative;
border: 1px solid var(--color-gray-200);
}
.pricing-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: var(--shadow-lg);
}
.pricing-card.popular {
border: 2px solid var(--color-primary);
position: relative;
transform: scale(1.05);
z-index: 10;
}
.pricing-card.popular:hover {
transform: translateY(-5px) scale(1.07);
}
.pricing-card h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-gray-800);
}
.price-description {
color: var(--color-gray-700);
font-size: 0.9rem;
margin-bottom: 1.5rem;
min-height: 40px; /* Altura mínima para alinear descripciones */
}
.price {
margin-bottom: 2rem;
text-align: center; /* Centrar precio */
}
.price-currency {
font-size: 1.5rem;
vertical-align: super;
color: var(--color-gray-700);
}
.price-number {
font-size: 3rem;
font-weight: 800;
color: var(--color-primary);
}
.price-period {
font-size: 1rem;
color: var(--color-gray-700);
}
.price.price-popular .price-number {
color: var(--color-primary-dark); /* Oscurecer número en popular */
}
/* Estilos para la lista de características */
.price-features {
list-style: none;
padding: 0;
margin-bottom: 2rem;
flex-grow: 1; /* Hacer que la lista ocupe el espacio sobrante */
}
.price-features li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: var(--color-gray-700);
}
.price-features ion-icon {
font-size: 1.25rem;
flex-shrink: 0;
}
.icon-success {
color: var(--color-primary); /* Usar color primario para éxito */
}
.icon-success-alt {
color: var(--color-primary-dark);
}
.icon-disabled, .icon-disabled-alt {
color: var(--color-gray-400);
}
.feature-disabled, .feature-disabled-alt {
color: var(--color-gray-500);
text-decoration: line-through; /* Tachar características deshabilitadas */
}
.price-button {
margin-top: auto; /* Empujar botón al final de la tarjeta */
width: 100%;
text-align: center;
}
/* Párrafo de contacto bajo la tabla */
.pricing-contact {
text-align: center;
margin-top: 2.5rem;
color: var(--color-gray-700);
}
.pricing-contact a {
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
}
.pricing-contact a:hover {
text-decoration: underline;
}
/* Sección Servicios Adicionales */
#servicios-adicionales {
padding: 3rem 0;
margin-top: 3rem;
background-color: var(--color-sky-lighter);
border-radius: 0.5rem;
}
#servicios-adicionales h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 2.5rem;
color: var(--color-gray-800);
}
.additional-services {
list-style: none;
padding: 0;
max-width: 800px;
margin: 0 auto;
display: grid;
gap: 1rem;
}
.additional-services li {
background-color: white;
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
gap: 1rem;
}
/* Opcional: añadir iconos a servicios adicionales (requiere editar HTML) */
/* .additional-services li::before { */
/* content: ''; */ /* O un icono ion-icon */
/* display: inline-block; */
/* font-size: 1.5rem; */
/* color: var(--color-primary-light); */
/* } */
/* Separador para FAQ en esta página */
#faq {
padding-top: 3rem;
margin-top: 3rem;
border-top: 1px solid var(--color-gray-200);
}
/* Animaciones */
.animate-fade-in {
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
/* Utilidades */
.text-gradient {
background: linear-gradient(to right, var(--color-primary-light), var(--color-primary), var(--color-primary-dark));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
position: relative;
}
.text-gradient::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, var(--color-primary-light), var(--color-primary), var(--color-primary-dark));
opacity: 0.3;
border-radius: 2px;
}
.section-title {
text-align: center;
margin-bottom: 3.5rem;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -1rem;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(to right, var(--color-primary-light), var(--color-primary));
border-radius: 3px;
}
.section-title h2 {
font-size: 2.25rem;
font-weight: bold;
color: var(--color-gray-900);
margin-bottom: 1rem;
}
.section-title p {
color: var(--color-gray-700);
font-size: 1.125rem;
max-width: 600px;
margin: 0 auto;
}
/* Estilos para las nuevas secciones */
.intro-section, .testimonials-snippet {
padding: 4rem 0;
}
.intro-section {
background-color: white;
padding: 5rem 0;
position: relative;
}
.intro-section::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, var(--color-gray-200), transparent);
}
.testimonials-snippet {
padding: 5rem 0;
background-color: var(--color-sky-lighter);
position: relative;
overflow: hidden;
}
.testimonial-card {
background-color: white;
max-width: 800px;
margin: 0 auto;
border-radius: 1rem;
box-shadow: var(--shadow-md);
transform: translateY(0);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.testimonial-card blockquote {
font-style: italic;
color: var(--color-gray-700);
margin-bottom: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--color-gray-200);
flex-grow: 1; /* Ocupar espacio para alinear citas */
position: relative;
padding-left: 1.5rem;
}
.testimonial-card blockquote::before {
content: '\201C'; /* Comillas de apertura */
font-size: 3rem;
color: var(--color-primary-light);
position: absolute;
left: -0.5rem;
top: 0.5rem;
line-height: 1;
opacity: 0.5;
}
.testimonial-card cite {
font-weight: bold;
color: var(--color-gray-800);
display: block;
text-align: right;
font-size: 1.1rem;
}
.intro-card ion-icon {
font-size: 2.5rem;
color: var(--color-primary);
margin-bottom: 1rem;
display: inline-block;
}
.intro-card h3 {
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.intro-card p {
color: var(--color-gray-700);
margin-bottom: 1rem;
}
.learn-more {
color: var(--color-primary);
text-decoration: none;
font-weight: bold;
}
.learn-more:hover {
text-decoration: underline;
}
/* --- FOOTER NUEVO DISEÑO --- */
.footer {
background: #f8f9f3;
color: #1a2a2a;
padding: 3rem 0 1.5rem 0;
font-family: 'Inter', Arial, sans-serif;
border-top: 1px solid #e0e0e0;
}
.footer .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.footer-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2.5rem;
}
.footer-brand {
flex: 1 1 220px;
min-width: 220px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 1.2rem;
}
.footer-brand .logo {
display: flex;
align-items: center;
font-weight: 700;
font-size: 1.2rem;
color: #1a2a2a;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer-brand .logo-image {
width: 38px;
height: 38px;
margin-right: 0.7rem;
}
.footer-links {
flex: 1 1 160px;
min-width: 160px;
}
.footer-links h4 {
text-transform: uppercase;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1.1rem;
letter-spacing: 0.04em;
color: #223344;
}
.footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links ul li {
margin-bottom: 0.7rem;
}
.footer-links ul li a {
color: #1a2a2a;
text-decoration: none;
font-size: 1rem;
transition: color 0.2s;
}
.footer-links ul li a:hover {
color: #3b82f6;
text-decoration: underline;
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-top: 2.5rem;
border-top: 1px solid #e0e0e0;
padding-top: 1.2rem;
font-size: 1rem;
color: #223344;
}
.footer-bottom p {
margin: 0;
flex: 1 1 300px;
text-align: center;
font-family: 'Inter', Arial, sans-serif;
font-size: 1rem;
letter-spacing: 0.01em;
}
.social-links {
display: flex;
gap: 1.1rem;
align-items: center;
flex: 1 1 200px;
justify-content: flex-start;
}
.social-links a {
color: #1a2a2a;
font-size: 1.5rem;
transition: color 0.2s;
}
.social-links a:hover {
color: #3b82f6;
}
/* Espacio para botones de app stores a la derecha */
.footer-apps {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-end;
flex: 1 1 180px;
}
.footer-apps img {
height: 48px;
width: auto;
display: block;
}
/* Fin footer nuevo diseño */
/* FAQ Section Styles */
.faq-list {
max-width: 800px; /* Limitar ancho para mejor lectura */
margin: 2rem auto; /* Centrar la lista */
}
.faq-item {
border-bottom: 1px solid var(--color-gray-200);
margin-bottom: 1rem;
padding-bottom: 1rem;
}
.faq-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.faq-item h3 {
cursor: pointer;
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0; /* El margen se controla en el párrafo */
position: relative;
padding-right: 2rem; /* Espacio para el icono */
transition: color 0.2s;
}
.faq-item h3:hover {
color: var(--color-primary);
}
/* Indicador +/- o flecha */
.faq-item h3::after {
content: '+'; /* Icono por defecto (cerrado) */
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
font-weight: 300;
color: var(--color-primary);
transition: transform 0.3s ease-out;
}
.faq-item h3.active::after {
content: '−'; /* Icono cuando está activo (abierto) */
transform: translateY(-50%); /* Opcional: Rotar si usas flecha transform: translateY(-50%) rotate(90deg); */
}
/* Estilo y animación para la respuesta */
.faq-item p {
color: var(--color-gray-700);
margin: 0; /* Asegurar que no haya margen por defecto */
padding: 0 0.5rem; /* Padding lateral base (cuando está oculto/colapsado) */
max-height: 0; /* Oculto por defecto */
overflow: hidden;
opacity: 0;
/* Transición: incluir padding y margin además de max-height y opacity */
transition: max-height 0.35s ease-in-out, opacity 0.3s ease-in-out 0.05s, padding-top 0.35s ease-in-out, padding-bottom 0.35s ease-in-out, margin-top 0.35s ease-in-out;
will-change: max-height, opacity, padding, margin; /* Optimización para animación */
}
/* Estilos aplicados directamente por JS al activar: */
.faq-item h3.active + p {
/* max-height: [scrollHeight]px; */ /* Aplicado por JS */
/* opacity: 1; */ /* Aplicado por JS */
/* Estos se pueden añadir aquí o dejarlos en JS si se calculan */
padding-top: 1rem; /* Padding superior cuando está visible */
padding-bottom: 1rem; /* Padding inferior cuando está visible */
margin-top: 0.5rem; /* Margen superior cuando está visible */
/* Ajustar la transición si es necesario */
}
/* Sobre Nosotros Page Styles */
#mision-vision .about-grid {
display: grid;
gap: 3rem;
align-items: center;
}
#mision-vision .about-text h2 {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.75rem;
color: var(--color-primary-dark);
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
#mision-vision .about-text h2:first-of-type {
margin-top: 0;
}
#mision-vision .about-text h2 ion-icon {
font-size: 2rem; /* Icono más grande */
color: var(--color-primary);
}
#mision-vision .about-image img {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
}
/* Sección Valores */
#valores {
padding: 4rem 0;
background-color: var(--color-sky-lighter); /* Fondo sutil */
margin-top: 3rem;
border-radius: 0.5rem;
}
#valores h2 {
display: flex;
align-items: center;
justify-content: center; /* Centrar título */
gap: 0.75rem;
font-size: 2rem;
color: var(--color-gray-900);
margin-bottom: 3rem;
}
#valores h2 ion-icon {
font-size: 2.25rem;
color: var(--color-primary);
}
.valores-grid {
display: grid;
gap: 1.5rem;
}
.valor-card {
background-color: white;
padding: 2rem 1.5rem;
border-radius: 0.75rem;
text-align: center;
box-shadow: var(--shadow-md);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-left: 5px solid transparent; /* Borde inicial transparente */
}
.valor-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-left-color: var(--color-primary-light); /* Borde al hacer hover */
}
.valor-card ion-icon {
font-size: 3rem; /* Iconos más grandes */
color: var(--color-primary);
margin-bottom: 1rem;
display: inline-block; /* Para que el margen funcione */
}
.valor-card h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-gray-800);
margin-bottom: 0.5rem;
}
.valor-card p {
color: var(--color-gray-700);
font-size: 0.95rem;
}
/* Sección Carreras */
#carreras {
margin-top: 4rem;
padding: 2rem;
background-color: var(--color-gray-100);
border-radius: 0.5rem;
text-align: center;
}
#carreras h2 {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
font-size: 1.75rem;
margin-bottom: 1rem;
}
#carreras ion-icon {
font-size: 2rem;
color: var(--color-primary);
}
/* Contact Page Styles */
.contact-grid {
display: grid;
gap: 3rem;
margin-top: 3rem;
}
/* Formulario de Contacto */
.contact-form {
background-color: white;
padding: 2.5rem;
border-radius: 0.75rem;
box-shadow: var(--shadow-lg);
}
.contact-form h2 {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.75rem;
margin-bottom: 2rem;
color: var(--color-gray-800);
}
.contact-form .form-group {
margin-bottom: 1.5rem;
}
.contact-form label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--color-gray-700);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--color-gray-300);
border-radius: 0.375rem; /* Tailwind default */
font-size: 1rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.3); /* Simulando focus ring */
}
.contact-form textarea {
min-height: 120px;
resize: vertical;
}
.contact-form button {
width: 100%;
padding: 0.8rem 1.5rem;
}
/* Información Directa */
.contact-info {
/* Podría tener un fondo ligero si no está en grid */
/* background-color: var(--color-gray-50); */
/* padding: 2rem; */
border-radius: 0.5rem;
}
.contact-info h2 {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.75rem;
margin-bottom: 2rem;
color: var(--color-gray-800);
}
.info-item {
display: flex;
align-items: start; /* Alinear icono arriba con texto */
gap: 1rem;
margin-bottom: 1.75rem;
padding: 1rem;
background-color: white;
border-radius: 0.5rem;
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--color-primary-light);
}
.info-item ion-icon {
font-size: 1.8rem;
color: var(--color-primary);
margin-top: 0.1rem; /* Ajuste fino vertical */
flex-shrink: 0; /* Evitar que el icono se encoja */
}
.info-item h3 {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.25rem;
color: var(--color-gray-800);
}
.info-item p,
.info-item a {
color: var(--color-gray-700);
text-decoration: none;
font-size: 0.95rem;
}
.info-item a:hover {
text-decoration: underline;
color: var(--color-primary);
}
/* Demo Request */
.demo-request {
background-color: var(--color-sky-lighter);
border: 1px solid var(--color-primary-light);
padding: 1.5rem;
border-radius: 0.5rem;
margin-top: 2rem;
text-align: center;
}
.demo-request h3 {
font-size: 1.25rem;
color: var(--color-primary-dark);
margin-bottom: 0.75rem;
}
.demo-request p {
color: var(--color-gray-700);
margin-bottom: 1rem;
}
.demo-request .btn-secondary {
background-color: white;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.2rem;
}
.demo-request .btn-secondary:hover {
background-color: var(--color-sky-light);
}
/* Clases generales que faltaban (opcional) */
.page-padding {
padding-top: 3rem;
padding-bottom: 4rem;
}
.page-title-section {
text-align: center;
margin-bottom: 3rem;
background-color: var(--color-sky-lighter);
padding: 3rem 0;
border-radius: 12px;
position: relative;
overflow: hidden;
}
.page-title-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0));
pointer-events: none;
}
.page-title-section h1 {
font-size: 2.75rem;
margin-bottom: 1rem;
color: var(--color-gray-900);
font-weight: 800;
position: relative;
}
.page-title-section p {
font-size: 1.25rem;
max-width: 800px;
margin: 0 auto;
color: var(--color-gray-700);
position: relative;
}
.page-title-section h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.page-title-section p {
font-size: 1.1rem;
color: var(--color-gray-700);
max-width: 600px;
margin: 0 auto;
}
/* Recursos Page Styles */
/* Estilos generales para secciones en la página de recursos */
#blog, #guias-ebooks, #webinars-videos, #faq {
padding-top: 3rem;
padding-bottom: 3rem;
margin-top: 2rem;
border-top: 1px solid var(--color-gray-200); /* Separador ligero */
}
#blog h2, #guias-ebooks h2, #webinars-videos h2, #faq h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 2.5rem;
color: var(--color-gray-800);
}
/* Blog Section */
.blog-grid {
display: grid;
gap: 2rem;
}
.blog-post-card {
background-color: white;
border-radius: 0.75rem;
box-shadow: var(--shadow-md);
overflow: hidden; /* Para que la imagen respete el borde redondeado */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-post-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.blog-post-image {
width: 100%;
height: 200px; /* Altura fija para la imagen */
object-fit: contain; /* Escalar sin cortar, puede dejar espacio */
/* object-fit: cover; */ /* Alternativa: Cortar para llenar */
background-color: var(--color-gray-100); /* Fondo si la imagen no llena */
}
.blog-post-card h3 {
font-size: 1.2rem;
font-weight: 600;
margin: 1rem 1.5rem 0.5rem;
color: var(--color-gray-800);
}
.blog-post-card p {
color: var(--color-gray-700);
margin: 0 1.5rem 1rem;
font-size: 0.95rem;
}
.blog-post-card .read-more {
display: inline-block;
margin: 0 1.5rem 1.5rem;
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
}
.blog-post-card .read-more:hover {
text-decoration: underline;
}
/* Guías/Ebooks & Webinars/Videos Sections */
#guias-ebooks, #webinars-videos {
background-color: var(--color-sky-lighter); /* Fondo alterno ligero */
padding-left: 1rem; /* Añadir padding lateral para compensar container */
padding-right: 1rem;
border-radius: 0.5rem;
}
.resource-list {
display: grid;
gap: 1.5rem;
}
.resource-item {
display: flex;
align-items: flex-start;
gap: 1.5rem;
background-color: white;
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: var(--shadow-sm);
transition: box-shadow 0.3s ease;
}
.resource-item:hover {
box-shadow: var(--shadow-md);
}
.resource-item ion-icon {
font-size: 2.5rem; /* Icono más grande */
color: var(--color-primary-light);
margin-top: 0.25rem;
flex-shrink: 0;
}
.resource-item h4 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.resource-item p {
font-size: 0.9rem;
color: var(--color-gray-700);
margin-bottom: 1rem;
}
.resource-item .btn-secondary { /* Asumiendo que existe esta clase o usar .btn */
background-color: var(--color-primary);
color: white;
padding: 0.5rem 1rem;
text-decoration: none;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
transition: background-color 0.2s;
border: 1px solid var(--color-primary);
}
.resource-item .btn-secondary:hover {
background-color: var(--color-primary-dark);
}
/* Asegurar que FAQ no tenga fondo si las otras lo tienen */
#faq {
background-color: transparent;
}
/* Casos de Éxito Page Styles */
.casos-exito-grid {
display: grid;
gap: 2.5rem; /* Más espacio entre casos */
margin-top: 3rem;
}
.caso-exito-card {
background-color: white;
border-radius: 0.75rem;
padding: 2rem;
box-shadow: var(--shadow-md);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-left: 5px solid var(--color-primary);
display: flex;
flex-direction: column; /* Organizar contenido verticalmente */
}
.caso-exito-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.caso-exito-logo {
max-width: 150px; /* Limitar ancho del logo */
height: 50px; /* Altura fija */
object-fit: contain;
margin-bottom: 1.5rem;
background-color: var(--color-gray-100); /* Fondo si el logo no llena */
padding: 0.5rem;
border-radius: 0.25rem;
align-self: flex-start; /* Alinear logo a la izquierda */
}
.caso-exito-card h3 {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-gray-800);
}
.caso-exito-card p {
color: var(--color-gray-700);
margin-bottom: 0.75rem;
font-size: 0.95rem;
line-height: 1.6;
}
.caso-exito-card p strong {
color: var(--color-gray-800);
margin-right: 0.25rem;
}
.caso-exito-card blockquote {
font-style: italic;
color: var(--color-gray-700);
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--color-gray-200);
flex-grow: 1; /* Ocupar espacio para alinear citas */
position: relative;
padding-left: 1.5rem;
}
/* Añadir comillas grandes */
.caso-exito-card blockquote::before {
content: '\201C'; /* Comillas de apertura */
font-size: 3rem;
color: var(--color-primary-light);
position: absolute;
left: -0.5rem;
top: 0.5rem;
line-height: 1;
opacity: 0.5;
}
/* Producto Page Styles */
/* Sección Hero/Descripción General Mejorada */
#descripcion-general {
display: grid;
grid-template-columns: 1fr; /* Una columna por defecto */
gap: 2.5rem;
align-items: center;
margin-bottom: 4rem; /* Más espacio después */
background-color: white; /* Fondo blanco para destacar */
padding: 3rem; /* Padding interno */
border-radius: 0.75rem;
box-shadow: var(--shadow-lg);
}
#descripcion-general h2 {
font-size: 2rem; /* Título más grande */
color: var(--color-primary-dark);
margin-bottom: 1rem;
}
#descripcion-general p {
font-size: 1.1rem;
line-height: 1.7;
color: var(--color-gray-700);
}
#descripcion-general .feature-image {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
/* box-shadow: var(--shadow-md); */ /* Ya tiene sombra la sección */
}
/* Sección Módulos */
#modulos {
margin-top: 4rem;
border-top: 1px solid var(--color-gray-200);
padding-top: 4rem;
}
#modulos > h2 {
text-align: center;
font-size: 2.25rem;
margin-bottom: 3rem;
color: var(--color-gray-900);
}
.modulo-detalle {
display: grid;
grid-template-columns: 1fr; /* Default a una columna */
gap: 2rem;
align-items: center;
margin-bottom: 4rem; /* Espacio entre módulos */
padding: 2.5rem;
background-color: white; /* Fondo blanco */
border-radius: 0.75rem;
box-shadow: var(--shadow-md);
overflow: hidden; /* Para controlar bordes de imagen */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Añadir transición */
}
/* Añadir efecto hover a los módulos */
.modulo-detalle:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
/* Separar el contenido de texto para darle flex-grow */
.modulo-detalle-contenido {
display: flex;
flex-direction: column;
height: 100%; /* Intentar que ocupe toda la altura de la celda del grid */
padding: 1rem; /* Añadir padding interno */
/* background-color: var(--color-gray-50); */ /* Opcional: Fondo sutil */
/* border-left: 3px solid var(--color-primary-light); */ /* Opcional: Borde */
border-radius: 0.25rem; /* Suavizar bordes si se usa fondo/borde */
}
.modulo-detalle h3 {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.75rem; /* Título del módulo más grande */
color: var(--color-primary);
margin-bottom: 0.75rem;
}
.modulo-detalle h3 ion-icon {
font-size: 2.2rem;
color: var(--color-primary-light);
}
.modulo-detalle > p { /* La descripción corta del módulo */
font-size: 1.05rem;
color: var(--color-gray-700);
margin-bottom: 1.5rem;
font-style: italic;
}
.modulo-detalle ul {
list-style: none; /* Quitar bullets por defecto */
padding-left: 0.5rem; /* Indentación ligera */
margin-bottom: 1.5rem;
}
.modulo-detalle ul li {
position: relative;
padding-left: 1.75rem; /* Espacio para el icono personalizado */
margin-bottom: 0.8rem;
color: var(--color-gray-800);
line-height: 1.6;
}
/* Icono check para cada item de la lista */
.modulo-detalle ul li::before {
content: '';
display: inline-block;
width: 1rem;
height: 1rem;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
position: absolute;
left: 0;
top: 0.3em; /* Ajuste vertical del icono */
}
.modulo-detalle ul li strong {
color: var(--color-primary-dark);
}
.modulo-detalle ul li em { /* Estilo para '(Próximamente)' */
color: var(--color-gray-500);
font-style: italic;
font-size: 0.9em;
}
.modulo-image {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
/* Las imágenes podrían tener un borde sutil */
/* border: 1px solid var(--color-gray-200); */
}
/* Añadir alineación vertical a la imagen */
.modulo-detalle .modulo-image {
align-self: center; /* O 'start' si prefieres arriba */
}
/* Secciones Integraciones y Tecnología */
#integraciones, #tecnologia {
padding: 3rem 1.5rem;
margin-top: 4rem;
border-top: 1px solid var(--color-gray-200);
background-color: var(--color-sky-lighter); /* Fondo ligero */
border-radius: 0.5rem;
}
#integraciones h2, #tecnologia h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 1.5rem;
color: var(--color-gray-900);
}
#integraciones p, #tecnologia p {
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
color: var(--color-gray-700);
line-height: 1.7;
}
/* (Opcional) Estilo para futuros logos de integración */
.integration-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
margin-top: 2.5rem;
}
.integration-logos img {
height: 40px; /* Ajustar según logos */
max-width: 120px;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.7;
transition: filter 0.3s ease, opacity 0.3s ease;
}
.integration-logos img:hover {
filter: grayscale(0%);
opacity: 1;
}
/* Activar y ajustar Mejoras sección Tecnología */
.tech-highlights {
display: grid;
/* grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */ /* Ajustar para 3 o 4 columnas fijas quizás? */
grid-template-columns: repeat(2, 1fr); /* 2 columnas en móvil/tablet */
gap: 1.5rem;
max-width: 800px;
margin: 2.5rem auto 0; /* Aumentar margen superior */
}
.tech-highlight-item {
text-align: center;
padding: 1.5rem 1rem; /* Más padding */
background-color: white; /* Fondo blanco para destacar */
border-radius: 0.5rem;
box-shadow: var(--shadow-sm);
}
.tech-highlight-item ion-icon {
font-size: 2.5rem;
color: var(--color-primary);
margin-bottom: 0.75rem; /* Más espacio */
}
.tech-highlight-item h4 {
font-weight: 600;
color: var(--color-gray-800);
font-size: 0.9rem; /* Ajustar tamaño si es necesario */
}
/* Estilos para la nueva sección CTA */
.cta-section {
padding: 4rem 1.5rem;
margin-top: 4rem;
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
color: white;
text-align: center;
border-radius: 0.75rem;
}
.cta-section h2 {
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 1rem;
}
.cta-section p {
font-size: 1.1rem;
margin-bottom: 2rem;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-section .btn {
background-color: white;
color: var(--color-primary);
padding: 0.8rem 2rem; /* Botón más grande */
font-size: 1.1rem;
}
.cta-section .btn:hover {
background-color: var(--color-gray-100);
transform: translateY(-2px);
}
/* Login & Sign Up Page Styles */
.auth-container-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: calc(100vh - 200px); /* Ajustar según altura de header/footer */
padding: 2rem 1rem;
}
.auth-container {
background-color: white;
padding: 2.5rem;
border-radius: 0.75rem;
box-shadow: var(--shadow-lg);
width: 100%;
max-width: 450px; /* Ancho del contenedor del formulario */
}
.auth-form .form-group {
margin-bottom: 1.25rem;
}
.auth-form label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--color-gray-800);
}
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--color-gray-200);
border-radius: 0.375rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-form input[type="email"]:focus,
.auth-form input[type="password"]:focus,
.auth-form input[type="text"]:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.3);
}
.auth-form .form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
font-size: 0.875rem;
}
.auth-form .form-options label {
font-weight: normal;
margin-bottom: 0;
display: flex;
align-items: center;
}
.auth-form .form-options input[type="checkbox"] {
margin-right: 0.5rem;
}
.auth-form .form-options a {
color: var(--color-primary);
text-decoration: none;
}
.auth-form .form-options a:hover {
text-decoration: underline;
}
.btn-block {
width: 100%;
padding: 0.875rem;
font-size: 1rem;
}
.auth-switch {
text-align: center;
margin-top: 1.5rem;
font-size: 0.875rem;
}
.auth-switch a {
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
}
.auth-switch a:hover {
text-decoration: underline;
}
/* --- GDPR Page Styles --- */
.last-updated {
font-size: 0.9rem;
color: var(--color-gray-600);
margin-top: -0.5rem; /* Acercar al título */
margin-bottom: 2rem;
}
.gdpr-section {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--color-gray-200); /* Separador entre secciones */
}
.gdpr-section:last-of-type {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.gdpr-section h2 {
font-size: 1.75rem;
font-weight: 600;
color: var(--color-gray-800);
margin-bottom: 1rem;
}
.gdpr-section p {
margin-bottom: 1rem;
line-height: 1.6;
color: var(--color-gray-700);
}
.gdpr-section .contact-details p {
margin-bottom: 0.5rem; /* Menos espacio entre detalles de contacto */
}
.rights-list {
list-style: none;
padding-left: 0.5rem; /* Indentación general de la lista */
margin-top: 1rem;
margin-bottom: 1.5rem;
}
.rights-list li {
position: relative;
padding-left: 1.75rem; /* Espacio para el icono */
margin-bottom: 0.75rem;
color: var(--color-gray-700);
}
.rights-list li ion-icon {
position: absolute;
left: 0;
top: 0.2em; /* Ajuste vertical del icono */
color: var(--color-primary);
font-size: 1.1rem;
}
/* Placeholder text styling (optional) */
/* Si quieres que los placeholders como [Fecha] se vean diferentes */
/* span.placeholder-text {
color: var(--color-gray-500);
font-style: italic;
} */
/* --- Sitemap Page Styles --- */
.sitemap-list {
list-style: none;
padding-left: 0;
margin-top: 2rem; /* Espacio después del título */
}
.sitemap-list > li {
margin-bottom: 1rem; /* Espacio entre elementos de nivel superior */
font-size: 1.1rem; /* Tamaño de fuente para nivel superior */
font-weight: 500; /* Ligeramente más grueso */
}
/* Estilo para los enlaces de nivel superior */
.sitemap-list > li > a {
color: var(--color-gray-800); /* Color de texto normal */
text-decoration: none;
}
.sitemap-list > li > a:hover {
color: var(--color-primary);
text-decoration: underline;
}
/* Estilo para el texto 'Legal' que no es un enlace */
.sitemap-list > li.no-link {
color: var(--color-gray-800);
}
/* Listas anidadas (segundo nivel) */
.sitemap-list ul {
list-style: none; /* Quitar bullets por defecto */
padding-left: 1.5rem; /* Indentación */
margin-top: 0.5rem;
border-left: 2px solid var(--color-gray-200); /* Línea vertical */
}
.sitemap-list ul li {
margin-bottom: 0.5rem; /* Espacio entre elementos anidados */
position: relative;
}
/* Icono o marcador para listas anidadas */
.sitemap-list ul li::before {
content: '\2014'; /* Em dash */
position: absolute;
left: -1.2rem; /* Posicionar antes de la indentación */
color: var(--color-primary);
font-weight: bold;
}
.sitemap-list ul li a {
color: var(--color-primary);
text-decoration: none;
font-size: 1rem; /* Tamaño normal para enlaces anidados */
font-weight: normal;
}
.sitemap-list ul li a:hover {
text-decoration: underline;
}
/* --- Generic Legal Page Styles --- */
.legal-page-content {
/* Contenedor principal del contenido legal después del título */
}
.legal-section {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--color-gray-200);
}
.legal-section:last-of-type {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.legal-section h2 {
font-size: 1.5rem; /* Ligeramente más pequeño que GDPR h2 */
font-weight: 600;
color: var(--color-gray-800);
margin-bottom: 1rem;
}
.legal-section h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-gray-700);
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.legal-section p,
.legal-section ul li,
.legal-section ol li {
margin-bottom: 0.75rem;
line-height: 1.6;
color: var(--color-gray-700);
}
/* Estilo para listas ordenadas (como en Términos) */
.legal-section ol {
list-style: none; /* Quitar números por defecto */
counter-reset: legal-counter;
padding-left: 0.5rem; /* Indentación general */
}
.legal-section ol > li {
counter-increment: legal-counter;
position: relative;
padding-left: 2.5rem; /* Espacio para el número */
margin-bottom: 1.5rem; /* Más espacio entre puntos principales */
}
/* Crear el número personalizado */
.legal-section ol > li::before {
content: counter(legal-counter) ".";
position: absolute;
left: 0;
top: 0;
font-weight: 600;
color: var(--color-primary);
font-size: 1.5rem; /* Tamaño del número */
}
/* Estilo para listas desordenadas (como en Privacidad) */
.legal-section ul {
list-style: none; /* Quitar bullets por defecto */
padding-left: 0.5rem; /* Indentación */
}
.legal-section ul li {
position: relative;
padding-left: 1.75rem; /* Espacio para el icono/bullet */
}
/* Bullet personalizado para listas ul */
.legal-section ul li::before {
content: '\2022'; /* Bullet */
position: absolute;
left: 0.5rem;
top: 0.1em; /* Ajustar verticalmente */
color: var(--color-primary);
font-size: 1.2rem;
}
/* Enlaces de email en secciones legales */
.legal-section a[href^="mailto:"] {
color: var(--color-primary);
font-weight: 500;
text-decoration: none;
}
.legal-section a[href^="mailto:"]:hover {
text-decoration: underline;
}
/* --- Fin Generic Legal Page Styles --- */
/* =====================================================
ESTILOS MODERNOS PARA PROMOCIÓN SAAS
===================================================== */
/* --- Sección de Testimonios --- */
.section-title.with-gradient {
position: relative;
padding-bottom: 1.5rem;
margin-bottom: 2.5rem;
text-align: center;
}
.section-title.with-gradient::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(to right, var(--color-primary-light), var(--color-primary));
border-radius: 4px;
}
.section-title .subtitle {
color: var(--color-gray-700);
font-size: 1.125rem;
max-width: 700px;
margin: 0.75rem auto 0;
}
.badge-highlight {
display: inline-block;
padding: 0.35rem 0.75rem;
background: linear-gradient(to right, #ecfdf5, #d1fae5);
color: #065f46;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 1rem;
letter-spacing: 0.01em;
}
/* Tarjetas de testimonios */
.testimonials-carousel {
margin: 2rem auto;
max-width: 900px;
}
.testimonial-card {
background-color: white;
padding: 2.5rem;
border-radius: 1rem;
text-align: left;
box-shadow: var(--shadow-md);
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid var(--color-gray-200);
max-width: 800px;
margin: 0 auto 2rem;
}
.testimonial-card.premium {
background: linear-gradient(to right bottom, #ffffff, #f9fafb);
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--color-gray-300);
}
.testimonial-rating {
color: #f59e0b;
font-size: 1.25rem;
margin-bottom: 1rem;
display: flex;
gap: 0.25rem;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1.5rem;
}
.testimonial-author img.avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--color-primary-light);
}
.testimonial-author cite {
display: flex;
flex-direction: column;
font-style: normal;
}
.testimonial-author cite strong {
color: var(--color-gray-800);
font-weight: 600;
}
.testimonial-author cite span {
color: var(--color-gray-700);
font-size: 0.875rem;
}
.testimonial-badges {
display: flex;
justify-content: center;
gap: 2rem;
margin: 1rem auto;
}
.testimonial-badges .badge {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background-color: white;
border-radius: 0.5rem;
box-shadow: var(--shadow-sm);
}
.testimonial-badges .badge span {
font-weight: 600;
color: var(--color-gray-800);
}
.cta-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1.5rem;
margin-top: 2rem;
}
.text-link {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.text-link:hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
.text-link ion-icon {
font-size: 1.25rem;
}
/* --- Sección de Producto Hero --- */
.product-hero {
background: linear-gradient(145deg, var(--color-sky-lighter), var(--color-sky-light));
padding: 6rem 0 5rem;
position: relative;
overflow: hidden;
}
.product-hero::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url('../images/pattern-dots.svg');
background-size: 30px;
opacity: 0.1;
}
.product-hero-content {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
position: relative;
z-index: 2;
}
.hero-subtitle {
font-size: 1.25rem;
color: var(--color-gray-700);
margin: 1.5rem 0 2rem;
max-width: 90%;
}
.feature-bullets {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 2rem;
}
.feature-bullet {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
font-weight: 500;
}
.feature-bullet ion-icon {
color: var(--color-secondary);
font-size: 1.25rem;
}
.product-hero-image {
position: relative;
margin: 0 auto;
max-width: 100%;
}
.product-hero-image img {
border-radius: 0.75rem;
box-shadow: var(--shadow-md);
width: 100%;
max-width: 600px;
margin: 0 auto;
display: block;
}
.platform-highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.platform-highlight-item {
background-color: white;
border-radius: 1rem;
padding: 2rem;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
border: 1px solid var(--color-gray-200);
}
.platform-highlight-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.highlight-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom right, var(--color-sky-lighter), var(--color-sky-light));
border-radius: 12px;
margin-bottom: 1.5rem;
}
.highlight-icon ion-icon {
font-size: 2rem;
color: var(--color-primary);
}
/* Pestañas de módulos */
.modules-tabs {
margin-top: 3rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.tabs-navigation {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin-bottom: 2.5rem;
width: 100%;
max-width: 900px;
padding: 0 1rem;
}
.tab-button {
background: white;
border: 1px solid var(--color-gray-200);
border-radius: 0.5rem;
padding: 0.85rem 1.5rem;
font-weight: 500;
font-size: 1rem;
color: var(--color-gray-700);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-width: 150px;
text-align: center;
outline: none;
}
.tab-button ion-icon {
font-size: 1.25rem;
}
.tab-button:hover {
color: var(--color-primary);
border-color: var(--color-primary-light);
box-shadow: var(--shadow-sm);
background-color: var(--color-sky-lighter);
}
.tab-button.active {
color: white;
background: var(--color-primary);
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 83, 221, 0.15);
}
.tab-content {
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.tab-content.active {
display: block;
opacity: 1;
}
.module-detail {
display: flex;
flex-direction: column;
gap: 3rem;
align-items: center;
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
}
.module-text h3 {
font-size: 1.75rem;
margin-bottom: 1.5rem;
font-weight: 600;
color: var(--color-gray-900);
}
.module-description {
font-size: 1.1rem;
color: var(--color-gray-700);
margin-bottom: 2rem;
}
.feature-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
width: 100%;
}
.feature-card {
background-color: white;
border-radius: 0.75rem;
padding: 1.5rem;
box-shadow: var(--shadow-sm);
border: 1px solid var(--color-gray-200);
transition: all 0.3s ease;
height: 100%;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.feature-card.coming-soon {
background: linear-gradient(to bottom right, #ffffff, var(--color-sky-lighter));
border: 1px dashed var(--color-primary-light);
}
.feature-icon {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom right, var(--color-sky-lighter), var(--color-sky-light));
border-radius: 10px;
margin-bottom: 1rem;
}
.feature-icon ion-icon {
font-size: 1.5rem;
color: var(--color-primary);
}
.feature-card h4 {
font-size: 1.1rem;
margin-bottom: 0.75rem;
font-weight: 600;
}
.module-image {
position: relative;
margin: 0 auto;
max-width: 100%;
}
.module-image img {
width: 100%;
max-width: 500px;
border-radius: 0.75rem;
box-shadow: var(--shadow-md);
margin: 0 auto;
display: block;
}
.image-shadow {
position: absolute;
width: 80%;
height: 20px;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 70%);
border-radius: 50%;
z-index: -1;
}
.coming-soon-badge {
display: flex;
align-items: center;
gap: 0.5rem;
background-color: var(--color-sky-lighter);
border: 1px dashed var(--color-primary-light);
border-radius: 0.5rem;
padding: 0.75rem 1rem;
font-weight: 500;
color: var(--color-primary-dark);
width: fit-content;
margin-top: 1.5rem;
}
.coming-soon-badge ion-icon {
font-size: 1.25rem;
}
.module-cta {
margin-top: 2.5rem;
}
/* Estilos para Casos de Éxito */
.casos-exito-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 2rem 0;
}
.caso-exito-card {
background-color: white;
border-radius: 0.75rem;
padding: 2.5rem;
box-shadow: var(--shadow-md);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
position: relative;
border: 1px solid var(--color-gray-200);
}
.caso-exito-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary-light);
}
.caso-exito-logo {
width: 100%;
max-width: 120px;
height: auto;
margin-bottom: 1.5rem;
border-radius: 8px;
background-color: var(--color-sky-lighter);
padding: 1rem;
}
.caso-exito-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--color-gray-900);
}
.caso-exito-card p {
margin-bottom: 0.75rem;
font-size: 1rem;
}
.caso-exito-card blockquote {
font-style: italic;
margin-top: 1.5rem;
padding: 1rem;
background-color: var(--color-sky-lighter);
border-radius: 0.5rem;
position: relative;
color: var(--color-primary-dark);
font-weight: 500;
}
.caso-exito-card blockquote::before {
content: '\201C';
font-size: 3rem;
position: absolute;
left: 0.5rem;
top: -0.75rem;
color: var(--color-primary-light);
opacity: 0.5;
}
/* Media queries para responsividad */
@media (min-width: 768px) {
.module-detail {
flex-direction: row;
}
.module-text {
flex: 1;
}
.module-image {
flex: 1;
}
.tab-button {
min-width: auto;
}
}
@media (max-width: 767px) {
.tabs-navigation {
gap: 0.5rem;
}
.tab-button {
padding: 0.75rem 1rem;
font-size: 0.9rem;
min-width: auto;
}
.feature-cards {
grid-template-columns: 1fr;
}
.platform-highlights {
grid-template-columns: 1fr;
}
.module-text h3 {
font-size: 1.5rem;
}
.module-description {
font-size: 1rem;
}
}
/* --- Sección CTA --- */
.cta-section {
background: #f5f9ff;
padding: 5rem 0;
position: relative;
overflow: hidden;
}
/* --- Sección CTA --- */
.cta {
background: #45b5ff31;
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.cta-content-centered {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.cta-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
background: linear-gradient(to right, var(--color-gray-900), var(--color-primary-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cta-subtitle {
font-size: 1.25rem;
color: var(--color-gray-700);
margin-bottom: 2rem;
line-height: 1.6;
}
.cta-buttons-center {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.cta-badges {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 2rem;
margin-top: 2rem;
}
.cta-badge {
display: flex;
align-items: center;
gap: 0.75rem;
background-color: rgba(255, 255, 255, 0.7);
padding: 0.75rem 1.25rem;
border-radius: 2rem;
box-shadow: var(--shadow-sm);
}
.cta-badge ion-icon {
font-size: 1.5rem;
color: var(--color-primary);
}
.cta-badge span {
font-weight: 500;
white-space: nowrap;
}
.cta-grid {
display: grid;
gap: 3rem;
align-items: center;
}
.cta-content h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
background: linear-gradient(to right, var(--color-gray-900), var(--color-primary-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cta-content p {
font-size: 1.125rem;
color: var(--color-gray-700);
margin-bottom: 1.5rem;
max-width: 540px;
}
.feature-list {
list-style: none;
padding: 0;
margin: 1.5rem 0 2rem;
}
.feature-list li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
font-weight: 500;
}
.feature-list li ion-icon {
color: var(--color-secondary);
font-size: 1.25rem;
flex-shrink: 0;
}
.cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.cta-image {
position: relative;
max-width: 600px;
margin: 0 auto;
}
.dashboard-preview {
width: 100%;
height: auto;
border-radius: 0.75rem;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.floating-card {
position: absolute;
display: flex;
align-items: center;
gap: 0.5rem;
background: white;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
box-shadow: var(--shadow-md);
font-weight: 500;
font-size: 0.875rem;
}
.floating-card ion-icon {
font-size: 1.25rem;
}
.card-1 {
top: 20px;
right: -20px;
}
.card-1 ion-icon {
color: #10B981;
}
.card-2 {
bottom: 30px;
left: -20px;
}
.card-2 ion-icon {
color: var(--color-primary);
}
@media (min-width: 992px) {
.cta-grid {
grid-template-columns: 1fr 1fr;
gap: 3rem;
}
}
/* Estilos específicos para la página de casos de éxito */
.testimonios-ejecutivos {
padding: 5rem 0;
background: linear-gradient(to bottom, #f8fcff, #eef7fd);
position: relative;
overflow: hidden;
}
.testimonios-ejecutivos::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 120, 215, 0.2), transparent);
}
.testimonios-grid {
display: grid;
gap: 3.5rem;
margin-top: 3rem;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.testimonio-ejecutivo {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 2.5rem;
align-items: center;
background-color: white;
border-radius: 1.25rem;
padding: 2.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
z-index: 1;
border: 1px solid rgba(0, 120, 215, 0.08);
}
.testimonio-ejecutivo:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
border-color: rgba(0, 120, 215, 0.15);
}
.testimonio-ejecutivo.reverse {
grid-template-columns: 2fr 1fr;
}
.testimonio-imagen {
display: flex;
justify-content: center;
align-items: center;
}
.ejecutivo-img {
width: 100%;
max-width: 250px;
border-radius: 1rem;
object-fit: cover;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
border: 4px solid white;
transition: transform 0.3s ease;
}
.testimonio-ejecutivo:hover .ejecutivo-img {
transform: scale(1.03);
}
.testimonio-contenido {
display: flex;
flex-direction: column;
justify-content: center;
}
.testimonio-contenido blockquote {
font-size: 1.15rem;
line-height: 1.7;
color: var(--color-gray-700);
margin-bottom: 1.75rem;
position: relative;
padding: 0.5rem 0.5rem 0.5rem 2rem;
font-style: italic;
border-left: 3px solid var(--color-primary-light);
background-color: rgba(240, 249, 255, 0.5);
border-radius: 0 0.75rem 0.75rem 0;
}
.testimonio-contenido blockquote::before {
content: '\201C';
font-size: 3.5rem;
position: absolute;
left: 0.25rem;
top: -0.75rem;
color: var(--color-primary);
opacity: 0.35;
font-style: normal;
font-family: Georgia, serif;
}
.testimonio-autor {
display: flex;
flex-direction: column;
}
.testimonio-autor h4 {
margin: 0 0 0.35rem 0;
color: var(--color-gray-900);
font-weight: 700;
font-size: 1.15rem;
position: relative;
display: inline-block;
}
.testimonio-autor h4::after {
content: '';
position: absolute;
bottom: -0.25rem;
left: 0;
width: 40%;
height: 2px;
background-color: var(--color-primary);
border-radius: 2px;
}
.testimonio-autor p {
margin: 0.25rem 0 0;
color: var(--color-gray-600);
font-size: 0.95rem;
font-weight: 500;
}
/* Estilos responsive */
@media (max-width: 992px) {
.testimonio-ejecutivo,
.testimonio-ejecutivo.reverse {
grid-template-columns: 1fr;
}
.testimonio-imagen {
margin-bottom: 1.5rem;
}
.testimonio-ejecutivo.reverse .testimonio-imagen {
order: -1;
}
}
@media (max-width: 768px) {
.testimonios-ejecutivos {
padding: 3rem 0;
}
.testimonios-grid {
gap: 2rem;
}
.testimonio-contenido blockquote {
font-size: 1rem;
}
}
/* Contiene los estilos para componentes reutilizables como header, footer, botones, tarjetas, formularios, secciones específicas (hero, features, pricing, auth-container, etc.) */
/* --- Text Color Utilities --- */
.text-color-light {
color: var(--color-primary-light);
}
.text-color-medium {
color: var(--color-primary);
}
.text-color-dark {
color: var(--color-primary-dark);
}
.text-color-darkest {
color: var(--color-primary-darkest);
}
.text-color-normal {
color: var(--color-gray-800); /* O el color de texto normal que prefieras */
}
/* --- Fin Text Color Utilities --- */
/* Variables CSS globales */
:root {
--color-primary: #2563EB;
--color-secondary: #10B981;
--color-alert: #F59E0B;
--color-error: #EF4444;
--color-neutral: #6B7280;
--color-primary-light: #0ea5e9;
--color-primary-dark: #1e40af;
--color-primary-darkest: #1e3a8a;
--color-sky-light: #e0f2fe;
--color-sky-lighter: #f0f9ff;
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
/* Reset y estilos base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
scroll-behavior: smooth;
}
body {
background-color: var(--color-gray-50);
color: var(--color-gray-800);
line-height: 1.5;
font-weight: 400;
}
/* Estilos para encabezados */
h1, h2, h3, h4, h5, h6 {
font-family: 'Inter', sans-serif;
font-weight: 600;
}
/* Ejemplo de ajuste de peso por nivel de encabezado */
h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }
/* Contenedor */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
/* Estilo para el placeholder del Header */
#header-placeholder {
min-height: 126px; /* Mantener altura mínima */
/* Opcional: un fondo muy sutil mientras carga */
/* background-color: var(--color-gray-50); */
opacity: 0; /* Ocultar inicialmente */
transition: opacity 0.2s ease-in-out; /* Transición suave */
}
/* Estilo para mostrar el placeholder cuando está cargado */
#header-placeholder.loaded {
opacity: 1;
}
/* Header y Navegación */
.header {
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
position: sticky;
top: 0;
z-index: 50;
box-shadow: var(--shadow-sm);
}
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.25rem 1rem;
}
.logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.5rem;
font-weight: bold;
color: var(--color-primary);
text-decoration: none;
}
.logo-image {
height: 120px; /* Aumentado más el tamaño */
width: auto; /* Mantener la proporción */
vertical-align: middle; /* Alinear con el texto si es necesario */
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)); /* Sombra sutil */
}
.nav-links {
display: none;
}
.nav-links a {
color: var(--color-gray-700);
text-decoration: none;
padding: 0.5rem 1rem;
transition: color 0.2s, background-color 0.2s, transform 0.1s;
border-radius: 0.25rem;
position: relative;
overflow: hidden;
}
.nav-links a:hover {
color: var(--color-primary);
background-color: var(--color-sky-light);
}
/* Estado activo para enlaces de navegación */
.nav-links a:active {
transform: scale(0.95);
background-color: var(--color-sky-light);
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem; /* Padding base */
border-radius: 0.375rem; /* Esquinas redondeadas estándar, como el botón de Google */
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; /* Transiciones suaves */
border: 1px solid transparent; /* Borde base transparente */
cursor: pointer;
text-align: center;
}
.btn-primary {
background-color: var(--color-primary);
color: white !important; /* Forzar color blanco */
border-color: var(--color-primary); /* Borde del mismo color que el fondo */
}
.btn-primary:hover {
background-color: var(--color-primary-dark);
border-color: var(--color-primary-dark);
opacity: 0.9; /* Ligera transparencia al hacer hover */
}
/* Estado activo y focus para mejorar accesibilidad y feedback */
.btn:active {
transform: scale(0.98); /* Pequeño encogimiento al hacer clic */
opacity: 0.85;
}
.btn:focus-visible { /* Estilo de focus visible para accesibilidad */
outline: 2px solid var(--color-primary-light);
outline-offset: 2px;
}
.btn-outline {
border: 1px solid var(--color-primary); /* Borde más delgado */
color: var(--color-primary);
background-color: transparent;
}
.btn-outline:hover {
background-color: var(--color-primary);
color: white;
}
/* Hero Section */
.hero {
padding: 4rem 0;
background: linear-gradient(135deg, var(--color-sky-lighter), var(--color-sky-light));
}
.hero-content {
display: grid;
gap: 2rem;
text-align: center;
}
.hero h1 {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-gray-900);
line-height: 1.2;
}
.hero p {
font-size: 1.125rem;
color: var(--color-gray-700);
margin: 1.5rem 0;
}
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Features Section */
.features {
padding: 4rem 0;
background-color: white;
}
.features-grid {
display: grid;
gap: 2rem;
padding: 2rem 0;
}
.feature-card {
padding: 2rem;
border-radius: 0.5rem;
background-color: var(--color-gray-50);
box-shadow: var(--shadow-md);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
/* Pricing Header Styles */
.pricing-header-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
margin-bottom: 3rem;
}
.pricing-header-text {
text-align: center;
}
.pricing-header-image {
max-width: 100%;
display: flex;
justify-content: center;
}
.pricing-illustration {
max-width: 100%;
height: auto;
border-radius: 1rem;
box-shadow: var(--shadow-md);
}
@media (min-width: 768px) {
.pricing-header-container {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
.pricing-header-text {
flex: 1;
text-align: left;
}
.pricing-header-image {
flex: 1;
}
}
/* Pricing Section */
.pricing {
padding: 4rem 0;
}
.pricing-grid {
display: grid;
gap: 2rem;
padding: 2rem 0;
}
.pricing-card {
background-color: white;
border-radius: 0.75rem;
padding: 2.5rem; /* Más padding */
box-shadow: var(--shadow-md);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex; /* Usar Flexbox */
flex-direction: column; /* Apilar elementos verticalmente */
height: 100%; /* Hacer que todas las tarjetas tengan la misma altura en la grid */
}
.pricing-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: var(--shadow-lg);
}
.pricing-card.popular {
border: 2px solid var(--color-primary);
position: relative;
transform: scale(1.05); /* Hacerla ligeramente más grande */
z-index: 10; /* Asegurar que esté por encima */
}
.pricing-card.popular:hover {
transform: translateY(-5px) scale(1.07); /* Efecto hover más pronunciado */
}
.pricing-card h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-gray-800);
}
.price-description {
color: var(--color-gray-700);
font-size: 0.9rem;
margin-bottom: 1.5rem;
min-height: 40px; /* Altura mínima para alinear descripciones */
}
.price {
margin-bottom: 2rem;
text-align: center; /* Centrar precio */
}
.price-currency {
font-size: 1.5rem;
vertical-align: super;
color: var(--color-gray-700);
}
.price-number {
font-size: 3rem;
font-weight: 800;
color: var(--color-primary);
}
.price-period {
font-size: 1rem;
color: var(--color-gray-700);
}
.price.price-popular .price-number {
color: var(--color-primary-dark); /* Oscurecer número en popular */
}
/* Estilos para la lista de características */
.price-features {
list-style: none;
padding: 0;
margin-bottom: 2rem;
flex-grow: 1; /* Hacer que la lista ocupe el espacio sobrante */
}
.price-features li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: var(--color-gray-700);
}
.price-features ion-icon {
font-size: 1.25rem;
flex-shrink: 0;
}
.icon-success {
color: var(--color-primary); /* Usar color primario para éxito */
}
.icon-success-alt {
color: var(--color-primary-dark);
}
.icon-disabled, .icon-disabled-alt {
color: var(--color-gray-400);
}
.feature-disabled, .feature-disabled-alt {
color: var(--color-gray-500);
text-decoration: line-through; /* Tachar características deshabilitadas */
}
.price-button {
margin-top: auto; /* Empujar botón al final de la tarjeta */
width: 100%;
text-align: center;
}
/* Párrafo de contacto bajo la tabla */
.pricing-contact {
text-align: center;
margin-top: 2.5rem;
color: var(--color-gray-700);
}
.pricing-contact a {
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
}
.pricing-contact a:hover {
text-decoration: underline;
}
/* Sección Servicios Adicionales */
#servicios-adicionales {
padding: 3rem 0;
margin-top: 3rem;
background-color: var(--color-sky-lighter);
border-radius: 0.5rem;
}
#servicios-adicionales h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 2.5rem;
color: var(--color-gray-800);
}
/* Estilos para la nueva cuadrícula de servicios adicionales */
.additional-services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
/* El margin-top es manejado por el párrafo introductorio de #servicios-adicionales */
}
.service-card {
background-color: #fff;
border-radius: 0.75rem;
padding: 2rem;
text-align: center;
box-shadow: var(--shadow-md);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.service-icon {
font-size: 2.5rem;
color: var(--color-primary);
margin-bottom: 1rem;
display: block; /* Asegurar que sea un elemento de bloque */
}
.service-image {
width: 100%;
height: 160px;
object-fit: cover;
border-radius: 0.5rem;
margin-bottom: 1rem;
display: block;
}
.service-card h3 {
font-size: 1.25rem;
color: var(--color-gray-900);
margin-bottom: 0.75rem;
font-weight: 600;
width: 100%; /* Asegurar que ocupe todo el ancho */
display: block; /* Hacerlo explícitamente un bloque */
}
.service-card p {
font-size: 0.95rem;
color: var(--color-gray-700);
line-height: 1.6;
flex-grow: 1;
width: 100%; /* Asegurar que ocupe todo el ancho */
display: block; /* Hacerlo explícitamente un bloque */
}
/* Separador para FAQ en esta página */
#faq {
padding-top: 3rem;
margin-top: 3rem;
border-top: 1px solid var(--color-gray-200);
}
/* Animaciones */
.animate-fade-in {
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile Menu */
.mobile-menu {
display: block; /* Cambiar de none a block para controlar con visibilidad/opacidad */
position: absolute;
top: 100%; /* Posicionar justo debajo del header */
left: 0;
right: 0;
background-color: white;
padding: 0.5rem 0; /* Ajustar padding vertical, quitar horizontal */
box-shadow: var(--shadow-lg); /* Sombra más pronunciada */
border-top: 1px solid var(--color-gray-200);
/* Animación */
opacity: 0;
visibility: hidden;
transform: translateY(-10px); /* Empezar ligeramente arriba */
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
z-index: 40; /* Asegurar que esté debajo del header (50) pero encima del contenido */
}
.mobile-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0); /* Posición final */
}
.mobile-menu a {
display: block;
padding: 0.8rem 1.5rem; /* Aumentar padding */
color: var(--color-gray-800); /* Texto más oscuro */
text-decoration: none;
transition: background-color 0.2s, color 0.2s;
border-bottom: 1px solid var(--color-gray-100); /* Separador */
font-weight: 500; /* Ligeramente más grueso */
}
/* Quitar borde inferior del último enlace */
.mobile-menu a:last-of-type {
border-bottom: none;
}
/* Estilo Hover */
.mobile-menu a:hover {
background-color: var(--color-gray-50);
color: var(--color-primary);
}
/* Estilo Activo */
.mobile-menu a.active {
background-color: var(--color-sky-lighter);
color: var(--color-primary);
font-weight: 600;
}
/* Estilo para el botón dentro del menú */
.mobile-menu .btn {
display: block; /* Que ocupe el ancho */
width: calc(100% - 3rem); /* Ancho menos padding lateral */
margin: 1.5rem auto 1rem; /* Margen superior/inferior y centrado horizontal */
text-align: center;
padding: 0.8rem 1rem; /* Ajustar padding del botón */
}
/* Utilidades */
.text-gradient {
background: linear-gradient(to right, var(--color-primary-light), var(--color-primary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.section-title {
text-align: center;
margin-bottom: 3rem;
}
.section-title h2 {
font-size: 2.25rem;
font-weight: bold;
color: var(--color-gray-900);
margin-bottom: 1rem;
}
.section-title p {
color: var(--color-gray-700);
font-size: 1.125rem;
max-width: 600px;
margin: 0 auto;
}
/* Estilos para las nuevas secciones */
.intro-section, .testimonials-snippet {
padding: 4rem 0;
}
.intro-section { background-color: white; }
.testimonials-snippet {
padding: 4rem 0;
/* background-color: var(--color-gray-100); Eliminado */
}
.intro-grid {
display: grid;
gap: 2rem;
margin-top: 2rem;
}
.intro-card, .testimonial-card {
background-color: var(--color-gray-50);
padding: 2rem;
border-radius: 0.5rem;
text-align: center;
box-shadow: var(--shadow-md);
}
.testimonial-card {
background-color: white;
max-width: 600px; /* Limitar ancho */
margin: 2rem auto 0; /* Centrar */
}
.testimonial-card blockquote {
font-style: italic;
color: var(--color-gray-700);
margin-bottom: 1rem;
font-size: 1.1rem;
}
.testimonial-card cite {
font-weight: bold;
color: var(--color-gray-800);
}
.intro-card ion-icon {
font-size: 2.5rem; /* Tamaño de icono */
color: var(--color-primary);
margin-bottom: 1rem;
display: inline-block; /* Para que el margen funcione */
}
.intro-card h3 {
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.intro-card p {
color: var(--color-gray-700);
margin-bottom: 1rem;
}
.learn-more {
color: var(--color-primary);
text-decoration: none;
font-weight: bold;
}
.learn-more:hover {
text-decoration: underline;
}
/* --- FOOTER NUEVO DISEÑO --- */
.footer {
background: #f8f9f3;
color: #1a2a2a;
padding: 3rem 0 1.5rem 0;
font-family: 'Inter', Arial, sans-serif;
border-top: 1px solid #e0e0e0;
}
.footer .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.footer-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2.5rem;
}
.footer-brand {
flex: 1 1 220px;
min-width: 220px;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 1.2rem;
}
.footer-brand .logo {
display: flex;
align-items: center;
font-weight: 700;
font-size: 1.2rem;
color: #1a2a2a;
text-decoration: none;
margin-bottom: 0.5rem;
}
.footer-brand .logo-image {
width: 38px;
height: 38px;
margin-right: 0.7rem;
}
.footer-links {
flex: 1 1 160px;
min-width: 160px;
}
.footer-links h4 {
text-transform: uppercase;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1.1rem;
letter-spacing: 0.04em;
color: #223344;
}
.footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links ul li {
margin-bottom: 0.7rem;
}
.footer-links ul li a {
color: #1a2a2a;
text-decoration: none;
font-size: 1rem;
transition: color 0.2s;
}
.footer-links ul li a:hover {
color: #3b82f6;
text-decoration: underline;
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-top: 2.5rem;
border-top: 1px solid #e0e0e0;
padding-top: 1.2rem;
font-size: 1rem;
color: #223344;
}
.footer-bottom p {
margin: 0;
flex: 1 1 300px;
text-align: center;
font-family: 'Inter', Arial, sans-serif;
font-size: 1rem;
letter-spacing: 0.01em;
}
.social-links {
display: flex;
gap: 1.1rem;
align-items: center;
flex: 1 1 200px;
justify-content: flex-start;
}
.social-links a {
color: #1a2a2a;
font-size: 1.5rem;
transition: color 0.2s;
}
.social-links a:hover {
color: #3b82f6;
}
/* Espacio para botones de app stores a la derecha */
.footer-apps {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-end;
flex: 1 1 180px;
}
.footer-apps img {
height: 48px;
width: auto;
display: block;
}
/* Fin footer nuevo diseño */
/* Sección Promocional Styles */
.section-promocion {
padding: 4rem 0;
background-color: var(--color-sky-lighter);
position: relative;
overflow: hidden;
}
.promocion-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.promocion-image {
flex: 1;
text-align: center;
}
.promo-image {
max-width: 100%;
height: auto;
border-radius: 1rem;
box-shadow: var(--shadow-lg);
transition: transform 0.3s ease;
}
.promo-image:hover {
transform: scale(1.02);
}
.promocion-text {
flex: 1;
padding: 1rem;
}
.promocion-text h2 {
font-size: 2.25rem;
margin: 1rem 0;
color: var(--color-gray-900);
}
.promocion-text p {
font-size: 1.1rem;
color: var(--color-gray-700);
margin-bottom: 1.5rem;
}
.promocion-cta {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
@media (min-width: 768px) {
.promocion-content {
flex-direction: row;
align-items: center;
}
.promocion-image, .promocion-text {
flex: 1;
}
}
/* FAQ Section Styles */
.faq-list {
max-width: 800px; /* Limitar ancho para mejor lectura */
margin: 2rem auto; /* Centrar la lista */
}
.faq-item {
border-bottom: 1px solid var(--color-gray-200);
margin-bottom: 1rem;
padding-bottom: 1rem;
}
.faq-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.faq-item h3 {
cursor: pointer;
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0; /* El margen se controla en el párrafo */
position: relative;
padding-right: 2rem; /* Espacio para el icono */
transition: color 0.2s;
}
.faq-item h3:hover {
color: var(--color-primary);
}
/* Indicador +/- o flecha */
.faq-item h3::after {
content: '+'; /* Icono por defecto (cerrado) */
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
font-weight: 300;
color: var(--color-primary);
transition: transform 0.3s ease-out;
}
.faq-item h3.active::after {
content: '−'; /* Icono cuando está activo (abierto) */
transform: translateY(-50%); /* Opcional: Rotar si usas flecha transform: translateY(-50%) rotate(90deg); */
}
/* Estilo y animación para la respuesta */
.faq-item p {
color: var(--color-gray-700);
margin: 0.5rem 0 0 0; /* Margen superior por defecto */
padding: 0.5rem 0.5rem 1rem 0.5rem; /* Padding por defecto */
max-height: none; /* Mostrar siempre */
overflow: visible;
opacity: 1;
/* Mantener transición para páginas que usan JS */
transition: max-height 0.35s ease-in-out, opacity 0.3s ease-in-out 0.05s, padding-top 0.35s ease-in-out, padding-bottom 0.35s ease-in-out, margin-top 0.35s ease-in-out;
will-change: max-height, opacity, padding, margin; /* Optimización para animación */
}
/* Estilos aplicados directamente por JS al activar: */
.faq-item h3.active + p {
/* max-height: [scrollHeight]px; */ /* Aplicado por JS */
/* opacity: 1; */ /* Aplicado por JS */
/* Estos se pueden añadir aquí o dejarlos en JS si se calculan */
padding-top: 1rem; /* Padding superior cuando está visible */
padding-bottom: 1rem; /* Padding inferior cuando está visible */
margin-top: 0.5rem; /* Margen superior cuando está visible */
/* Ajustar la transición si es necesario */
}
/* Sobre Nosotros Page Styles */
#mision-vision .about-grid {
display: grid;
gap: 3rem;
align-items: center;
}
#mision-vision .about-text h2 {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.75rem;
color: var(--color-primary-dark);
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
#mision-vision .about-text h2:first-of-type {
margin-top: 0;
}
#mision-vision .about-text h2 ion-icon {
font-size: 2rem; /* Icono más grande */
color: var(--color-primary);
}
#mision-vision .about-image img {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
}
/* Sección Valores */
#valores {
padding: 4rem 0;
background-color: var(--color-sky-lighter); /* Fondo sutil */
margin-top: 3rem;
border-radius: 0.5rem;
}
#valores h2 {
display: flex;
align-items: center;
justify-content: center; /* Centrar título */
gap: 0.75rem;
font-size: 2rem;
color: var(--color-gray-900);
margin-bottom: 3rem;
}
#valores h2 ion-icon {
font-size: 2.25rem;
color: var(--color-primary);
}
.valores-grid {
display: grid;
gap: 1.5rem;
}
.valor-card {
background-color: white;
padding: 2rem 1.5rem;
border-radius: 0.75rem;
text-align: center;
box-shadow: var(--shadow-md);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-left: 5px solid transparent; /* Borde inicial transparente */
}
.valor-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-left-color: var(--color-primary-light); /* Borde al hacer hover */
}
.valor-card ion-icon {
font-size: 3rem; /* Iconos más grandes */
color: var(--color-primary);
margin-bottom: 1rem;
display: inline-block; /* Para que el margen funcione */
}
.valor-card h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-gray-800);
margin-bottom: 0.5rem;
}
.valor-card p {
color: var(--color-gray-700);
font-size: 0.95rem;
}
/* Sección Carreras */
#carreras {
margin-top: 4rem;
padding: 2rem;
background-color: var(--color-gray-100);
border-radius: 0.5rem;
text-align: center;
}
#carreras h2 {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
font-size: 1.75rem;
margin-bottom: 1rem;
}
#carreras ion-icon {
font-size: 2rem;
color: var(--color-primary);
}
/* Contact Page Styles */
.contact-grid {
display: grid;
gap: 3rem;
margin-top: 3rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
/* Formulario de Contacto */
.contact-form {
background-color: white;
padding: 2.5rem;
border-radius: 0.75rem;
box-shadow: var(--shadow-lg);
}
/* Estilos para el mapa y ubicación */
.map-container {
margin-top: 4rem;
background-color: white;
padding: 2.5rem;
border-radius: 0.75rem;
box-shadow: var(--shadow-md);
}
.marker-highlight {
margin-top: 1rem;
background-color: var(--color-sky-lighter);
border-left: 4px solid var(--color-primary);
padding: 0.75rem 1rem;
border-radius: 0 0.5rem 0.5rem 0;
}
.marker-highlight p {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
color: var(--color-primary-dark);
margin: 0;
}
.marker-highlight ion-icon {
color: #e53e3e;
font-size: 1.25rem;
}
.map-container h2 {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
color: var(--color-primary-dark);
}
.map-container h2 ion-icon {
font-size: 1.75rem;
color: var(--color-primary);
}
.map-wrapper {
border-radius: 0.5rem;
overflow: hidden;
box-shadow: var(--shadow-md);
margin-bottom: 1.5rem;
}
.location-details {
display: grid;
gap: 1.5rem;
margin-top: 2rem;
}
@media (min-width: 768px) {
.location-details {
grid-template-columns: 1fr 1fr;
}
}
.location-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.location-item ion-icon {
font-size: 1.75rem;
color: var(--color-primary);
flex-shrink: 0;
}
.location-item h3 {
margin-bottom: 0.5rem;
color: var(--color-gray-800);
font-weight: 600;
}
.location-item p {
color: var(--color-gray-700);
line-height: 1.6;
}
.contact-form h2 {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.75rem;
margin-bottom: 2rem;
color: var(--color-gray-800);
}
.contact-form .form-group {
margin-bottom: 1.5rem;
}
.contact-form label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--color-gray-700);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--color-gray-300);
border-radius: 0.375rem; /* Tailwind default */
font-size: 1rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.3); /* Simulando focus ring */
}
.contact-form textarea {
min-height: 120px;
resize: vertical;
}
.contact-form button {
width: 100%;
padding: 0.8rem 1.5rem;
}
/* Información Directa */
.contact-info {
/* Podría tener un fondo ligero si no está en grid */
/* background-color: var(--color-gray-50); */
/* padding: 2rem; */
border-radius: 0.5rem;
}
.contact-info h2 {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.75rem;
margin-bottom: 2rem;
color: var(--color-gray-800);
}
.info-item {
display: flex;
align-items: start; /* Alinear icono arriba con texto */
gap: 1rem;
margin-bottom: 1.75rem;
padding: 1rem;
background-color: white;
border-radius: 0.5rem;
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--color-primary-light);
}
.info-item ion-icon {
font-size: 1.8rem;
color: var(--color-primary);
margin-top: 0.1rem; /* Ajuste fino vertical */
flex-shrink: 0; /* Evitar que el icono se encoja */
}
.info-item h3 {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.25rem;
color: var(--color-gray-800);
}
.info-item p,
.info-item a {
color: var(--color-gray-700);
text-decoration: none;
font-size: 0.95rem;
}
.info-item a:hover {
text-decoration: underline;
color: var(--color-primary);
}
/* Demo Request */
.demo-request {
background-color: var(--color-sky-lighter);
border: 1px solid var(--color-primary-light);
padding: 1.5rem;
border-radius: 0.5rem;
margin-top: 2rem;
text-align: center;
}
.demo-request h3 {
font-size: 1.25rem;
color: var(--color-primary-dark);
margin-bottom: 0.75rem;
}
.demo-request p {
color: var(--color-gray-700);
margin-bottom: 1rem;
}
.demo-request .btn-secondary {
background-color: white;
color: var(--color-primary);
border: 1px solid var(--color-primary);
padding: 0.6rem 1.2rem;
}
.demo-request .btn-secondary:hover {
background-color: var(--color-sky-light);
}
/* Clases generales que faltaban (opcional) */
.page-padding {
padding-top: 3rem;
padding-bottom: 4rem;
}
/* Recursos Page Styles */
/* Estilos generales para secciones en la página de recursos */
#blog, #guias-ebooks, #webinars-videos, #faq {
padding-top: 3rem;
padding-bottom: 3rem;
margin-top: 2rem;
border-top: 1px solid var(--color-gray-200); /* Separador ligero */
}
#blog h2, #guias-ebooks h2, #webinars-videos h2, #faq h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 2.5rem;
color: var(--color-gray-800);
}
/* Blog Section */
.blog-grid {
display: grid;
gap: 2rem;
}
.blog-post-card {
background-color: white;
border-radius: 0.75rem;
box-shadow: var(--shadow-md);
overflow: hidden; /* Para que la imagen respete el borde redondeado */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-post-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.blog-post-image {
width: 100%;
height: 200px; /* Altura fija para la imagen */
object-fit: contain; /* Escalar sin cortar, puede dejar espacio */
/* object-fit: cover; */ /* Alternativa: Cortar para llenar */
background-color: var(--color-gray-100); /* Fondo si la imagen no llena */
}
.blog-post-card h3 {
font-size: 1.2rem;
font-weight: 600;
margin: 1rem 1.5rem 0.5rem;
color: var(--color-gray-800);
}
.blog-post-card p {
color: var(--color-gray-700);
margin: 0 1.5rem 1rem;
font-size: 0.95rem;
}
.blog-post-card .read-more {
display: inline-block;
margin: 0 1.5rem 1.5rem;
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
}
.blog-post-card .read-more:hover {
text-decoration: underline;
}
/* Guías/Ebooks & Webinars/Videos Sections */
#guias-ebooks, #webinars-videos {
background-color: var(--color-sky-lighter); /* Fondo alterno ligero */
padding-left: 1rem; /* Añadir padding lateral para compensar container */
padding-right: 1rem;
border-radius: 0.5rem;
}
.resource-list {
display: grid;
gap: 1.5rem;
}
.resource-item {
display: flex;
align-items: flex-start;
gap: 1.5rem;
background-color: white;
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: var(--shadow-sm);
transition: box-shadow 0.3s ease;
}
.resource-item:hover {
box-shadow: var(--shadow-md);
}
.resource-item ion-icon {
font-size: 2.5rem; /* Icono más grande */
color: var(--color-primary-light);
margin-top: 0.25rem;
flex-shrink: 0;
}
.resource-item h4 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.resource-item p {
font-size: 0.9rem;
color: var(--color-gray-700);
margin-bottom: 1rem;
}
.resource-item .btn-secondary { /* Asumiendo que existe esta clase o usar .btn */
background-color: var(--color-primary);
color: white;
padding: 0.5rem 1rem;
text-decoration: none;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
transition: background-color 0.2s;
border: 1px solid var(--color-primary);
}
.resource-item .btn-secondary:hover {
background-color: var(--color-primary-dark);
}
/* Asegurar que FAQ no tenga fondo si las otras lo tienen */
#faq {
background-color: transparent;
}
/* Casos de Éxito Page Styles */
.casos-exito-grid {
display: grid;
gap: 2.5rem; /* Más espacio entre casos */
margin-top: 3rem;
}
.caso-exito-card {
background-color: white;
border-radius: 0.75rem;
padding: 2rem;
box-shadow: var(--shadow-md);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-left: 5px solid var(--color-primary);
display: flex;
flex-direction: column; /* Organizar contenido verticalmente */
}
.caso-exito-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.caso-exito-logo {
max-width: 150px; /* Limitar ancho del logo */
height: 50px; /* Altura fija */
object-fit: contain;
margin-bottom: 1.5rem;
background-color: var(--color-gray-100); /* Fondo si el logo no llena */
padding: 0.5rem;
border-radius: 0.25rem;
align-self: flex-start; /* Alinear logo a la izquierda */
}
.caso-exito-card h3 {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-gray-800);
}
.caso-exito-card p {
color: var(--color-gray-700);
margin-bottom: 0.75rem;
font-size: 0.95rem;
line-height: 1.6;
}
.caso-exito-card p strong {
color: var(--color-gray-800);
margin-right: 0.25rem;
}
.caso-exito-card blockquote {
font-style: italic;
color: var(--color-gray-700);
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--color-gray-200);
flex-grow: 1; /* Ocupar espacio para alinear citas */
position: relative;
padding-left: 1.5rem;
}
/* Añadir comillas grandes */
.caso-exito-card blockquote::before {
content: '\201C'; /* Comillas de apertura */
font-size: 3rem;
color: var(--color-primary-light);
position: absolute;
left: -0.5rem;
top: 0.5rem;
line-height: 1;
opacity: 0.5;
}
/* Producto Page Styles */
/* Sección Hero/Descripción General Mejorada */
#descripcion-general {
display: grid;
grid-template-columns: 1fr; /* Una columna por defecto */
gap: 2.5rem;
align-items: center;
margin-bottom: 4rem; /* Más espacio después */
background-color: white; /* Fondo blanco para destacar */
padding: 3rem; /* Padding interno */
border-radius: 0.75rem;
box-shadow: var(--shadow-lg);
}
#descripcion-general h2 {
font-size: 2rem; /* Título más grande */
color: var(--color-primary-dark);
margin-bottom: 1rem;
}
#descripcion-general p {
font-size: 1.1rem;
line-height: 1.7;
color: var(--color-gray-700);
}
#descripcion-general .feature-image {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
/* box-shadow: var(--shadow-md); */ /* Ya tiene sombra la sección */
}
/* Sección Módulos */
#modulos {
margin-top: 4rem;
border-top: 1px solid var(--color-gray-200);
padding-top: 4rem;
}
#modulos > h2 {
text-align: center;
font-size: 2.25rem;
margin-bottom: 3rem;
color: var(--color-gray-900);
}
.modulo-detalle {
display: grid;
grid-template-columns: 1fr; /* Default a una columna */
gap: 2rem;
align-items: center;
margin-bottom: 4rem; /* Espacio entre módulos */
padding: 2.5rem;
background-color: white; /* Fondo blanco */
border-radius: 0.75rem;
box-shadow: var(--shadow-md);
overflow: hidden; /* Para controlar bordes de imagen */
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Añadir transición */
}
/* Añadir efecto hover a los módulos */
.modulo-detalle:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
/* Separar el contenido de texto para darle flex-grow */
.modulo-detalle-contenido {
display: flex;
flex-direction: column;
height: 100%; /* Intentar que ocupe toda la altura de la celda del grid */
padding: 1rem; /* Añadir padding interno */
/* background-color: var(--color-gray-50); */ /* Opcional: Fondo sutil */
/* border-left: 3px solid var(--color-primary-light); */ /* Opcional: Borde */
border-radius: 0.25rem; /* Suavizar bordes si se usa fondo/borde */
}
.modulo-detalle h3 {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.75rem; /* Título del módulo más grande */
color: var(--color-primary);
margin-bottom: 0.75rem;
}
.modulo-detalle h3 ion-icon {
font-size: 2.2rem;
color: var(--color-primary-light);
}
.modulo-detalle > p { /* La descripción corta del módulo */
font-size: 1.05rem;
color: var(--color-gray-700);
margin-bottom: 1.5rem;
font-style: italic;
}
.modulo-detalle ul {
list-style: none; /* Quitar bullets por defecto */
padding-left: 0.5rem; /* Indentación ligera */
margin-bottom: 1.5rem;
}
.modulo-detalle ul li {
position: relative;
padding-left: 1.75rem; /* Espacio para el icono personalizado */
margin-bottom: 0.8rem;
color: var(--color-gray-800);
line-height: 1.6;
}
/* Icono check para cada item de la lista */
.modulo-detalle ul li::before {
content: '';
display: inline-block;
width: 1rem;
height: 1rem;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
position: absolute;
left: 0;
top: 0.3em; /* Ajustar verticalmente */
}
.modulo-detalle ul li strong {
color: var(--color-primary-dark);
}
.modulo-detalle ul li em { /* Estilo para '(Próximamente)' */
color: var(--color-gray-500);
font-style: italic;
font-size: 0.9em;
}
.modulo-image {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
/* Las imágenes podrían tener un borde sutil */
/* border: 1px solid var(--color-gray-200); */
}
/* Añadir alineación vertical a la imagen */
.modulo-detalle .modulo-image {
align-self: center; /* O 'start' si prefieres arriba */
}
/* Secciones Integraciones y Tecnología */
#integraciones, #tecnologia {
padding: 3rem 1.5rem;
margin-top: 4rem;
border-top: 1px solid var(--color-gray-200);
background-color: var(--color-sky-lighter); /* Fondo ligero */
border-radius: 0.5rem;
}
#integraciones h2, #tecnologia h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 1.5rem;
color: var(--color-gray-900);
}
#integraciones p, #tecnologia p {
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
color: var(--color-gray-700);
line-height: 1.7;
}
/* (Opcional) Estilo para futuros logos de integración */
.integration-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
margin-top: 2.5rem;
}
.integration-logos img {
height: 40px; /* Ajustar según logos */
max-width: 120px;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.7;
transition: filter 0.3s ease, opacity 0.3s ease;
}
.integration-logos img:hover {
filter: grayscale(0%);
opacity: 1;
}
/* Activar y ajustar Mejoras sección Tecnología */
.tech-highlights {
display: grid;
/* grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); */ /* Ajustar para 3 o 4 columnas fijas quizás? */
grid-template-columns: repeat(2, 1fr); /* 2 columnas en móvil/tablet */
gap: 1.5rem;
max-width: 800px;
margin: 2.5rem auto 0; /* Aumentar margen superior */
}
.tech-highlight-item {
text-align: center;
padding: 1.5rem 1rem; /* Más padding */
background-color: white; /* Fondo blanco para destacar */
border-radius: 0.5rem;
box-shadow: var(--shadow-sm);
}
.tech-highlight-item ion-icon {
font-size: 2.5rem;
color: var(--color-primary);
margin-bottom: 0.75rem; /* Más espacio */
}
.tech-highlight-item h4 {
font-weight: 600;
color: var(--color-gray-800);
font-size: 0.9rem; /* Ajustar tamaño si es necesario */
}
/* Estilos para la nueva sección CTA */
.cta-section {
padding: 4rem 1.5rem;
margin-top: 4rem;
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
color: white;
text-align: center;
border-radius: 0.75rem;
}
.cta-section h2 {
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 1rem;
}
.cta-section p {
font-size: 1.1rem;
margin-bottom: 2rem;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-section .btn {
background-color: white;
color: var(--color-primary);
padding: 0.8rem 2rem; /* Botón más grande */
font-size: 1.1rem;
}
.cta-section .btn:hover {
background-color: var(--color-gray-100);
transform: translateY(-2px);
}
/* Login & Sign Up Page Styles */
.auth-container-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: calc(100vh - 200px); /* Ajustar según altura de header/footer */
padding: 2rem 1rem;
}
.auth-container {
background-color: white;
padding: 2.5rem;
border-radius: 0.75rem;
box-shadow: var(--shadow-lg);
width: 100%;
max-width: 450px; /* Ancho del contenedor del formulario */
}
.auth-container .page-title-section {
text-align: center;
margin-bottom: 1.5rem;
}
.auth-container .page-title-section h1 {
font-size: 2rem; /* Ligeramente más pequeño para el contenedor */
}
.auth-container .page-title-section p {
font-size: 1rem;
}
.auth-form .form-group {
margin-bottom: 1.25rem;
}
.auth-form label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--color-gray-800);
}
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--color-gray-200);
border-radius: 0.375rem;
transition: border-color 0.2s, box-shadow 0.2s;
}
.auth-form input[type="email"]:focus,
.auth-form input[type="password"]:focus,
.auth-form input[type="text"]:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.3);
}
.auth-form .form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
font-size: 0.875rem;
}
.auth-form .form-options label {
font-weight: normal;
margin-bottom: 0;
display: flex;
align-items: center;
}
.auth-form .form-options input[type="checkbox"] {
margin-right: 0.5rem;
}
.auth-form .form-options a {
color: var(--color-primary);
text-decoration: none;
}
.auth-form .form-options a:hover {
text-decoration: underline;
}
.btn-block { /* Se aplica a los botones de Iniciar Sesión, Registrarse, y el de Google */
width: 100%;
padding-top: 0.875rem; /* Padding vertical */
padding-bottom: 0.875rem;
/* padding-left y padding-right se heredan de .btn o son específicos si es necesario */
font-size: 1rem;
margin-bottom: 1rem; /* Espacio entre botones de bloque */
}
/* Asegurar que el último btn-block no tenga margen inferior si no se desea */
.auth-form .btn-block:last-of-type {
/* margin-bottom: 0; */ /* Descomentar si es necesario */
}
.auth-switch {
text-align: center;
margin-top: 1.5rem;
font-size: 0.875rem;
}
.auth-switch a {
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
}
.auth-switch a:hover {
text-decoration: underline;
}
/* --- GDPR Page Styles --- */
.last-updated {
font-size: 0.9rem;
color: var(--color-gray-600);
margin-top: -0.5rem; /* Acercar al título */
margin-bottom: 2rem;
}
.gdpr-section {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--color-gray-200); /* Separador entre secciones */
}
.gdpr-section:last-of-type {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.gdpr-section h2 {
font-size: 1.75rem;
font-weight: 600;
color: var(--color-gray-800);
margin-bottom: 1rem;
}
.gdpr-section p {
margin-bottom: 1rem;
line-height: 1.6;
color: var(--color-gray-700);
}
.gdpr-section .contact-details p {
margin-bottom: 0.5rem; /* Menos espacio entre detalles de contacto */
}
.rights-list {
list-style: none;
padding-left: 0.5rem; /* Indentación general de la lista */
margin-top: 1rem;
margin-bottom: 1.5rem;
}
.rights-list li {
position: relative;
padding-left: 1.75rem; /* Espacio para el icono */
margin-bottom: 0.75rem;
color: var(--color-gray-700);
}
.rights-list li ion-icon {
position: absolute;
left: 0;
top: 0.2em; /* Ajuste vertical del icono */
color: var(--color-primary);
font-size: 1.1rem;
}
/* Placeholder text styling (optional) */
/* Si quieres que los placeholders como [Fecha] se vean diferentes */
/* span.placeholder-text {
color: var(--color-gray-500);
font-style: italic;
} */
/* --- Sitemap Page Styles --- */
.sitemap-list {
list-style: none;
padding-left: 0;
margin-top: 2rem; /* Espacio después del título */
}
.sitemap-list > li {
margin-bottom: 1rem; /* Espacio entre elementos de nivel superior */
font-size: 1.1rem; /* Tamaño de fuente para nivel superior */
font-weight: 500; /* Ligeramente más grueso */
}
/* Estilo para los enlaces de nivel superior */
.sitemap-list > li > a {
color: var(--color-gray-800); /* Color de texto normal */
text-decoration: none;
}
.sitemap-list > li > a:hover {
color: var(--color-primary);
text-decoration: underline;
}
/* Estilo para el texto 'Legal' que no es un enlace */
.sitemap-list > li.no-link {
color: var(--color-gray-800);
}
/* Listas anidadas (segundo nivel) */
.sitemap-list ul {
list-style: none; /* Quitar bullets por defecto */
padding-left: 1.5rem; /* Indentación */
margin-top: 0.5rem;
border-left: 2px solid var(--color-gray-200); /* Línea vertical */
}
.sitemap-list ul li {
margin-bottom: 0.5rem; /* Espacio entre elementos anidados */
position: relative;
}
/* Icono o marcador para listas anidadas */
.sitemap-list ul li::before {
content: '\2014'; /* Em dash */
position: absolute;
left: -1.2rem; /* Posicionar antes de la indentación */
color: var(--color-primary);
font-weight: bold;
}
.sitemap-list ul li a {
color: var(--color-primary);
text-decoration: none;
font-size: 1rem; /* Tamaño normal para enlaces anidados */
font-weight: normal;
}
.sitemap-list ul li a:hover {
color: var(--color-primary-dark);
}
/* --- Generic Legal Page Styles --- */
.legal-page-content {
/* Contenedor principal del contenido legal después del título */
display: block;
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.legal-section {
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--color-gray-200);
}
.legal-section:last-of-type {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.legal-section h2 {
font-size: 1.5rem; /* Ligeramente más pequeño que GDPR h2 */
font-weight: 600;
color: var(--color-gray-800);
margin-bottom: 1rem;
}
.legal-section h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-gray-700);
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.legal-section p,
.legal-section ul li,
.legal-section ol li {
margin-bottom: 0.75rem;
line-height: 1.6;
color: var(--color-gray-700);
}
/* Estilo para listas ordenadas (como en Términos) */
.legal-section ol {
list-style: none; /* Quitar números por defecto */
counter-reset: legal-counter;
padding-left: 0.5rem; /* Indentación general */
}
.legal-section ol > li {
counter-increment: legal-counter;
position: relative;
padding-left: 2.5rem; /* Espacio para el número */
margin-bottom: 1.5rem; /* Más espacio entre puntos principales */
}
/* Crear el número personalizado */
.legal-section ol > li::before {
content: counter(legal-counter) ".";
position: absolute;
left: 0;
top: 0;
font-weight: 600;
color: var(--color-primary);
font-size: 1.5rem; /* Tamaño del número */
}
/* Estilo para listas desordenadas (como en Privacidad) */
.legal-section ul {
list-style: none; /* Quitar bullets por defecto */
padding-left: 0.5rem; /* Indentación */
}
.legal-section ul li {
position: relative;
padding-left: 1.75rem; /* Espacio para el icono/bullet */
}
/* Bullet personalizado para listas ul */
.legal-section ul li::before {
content: '\2022'; /* Bullet */
position: absolute;
left: 0.5rem;
top: 0.1em; /* Ajustar verticalmente */
color: var(--color-primary);
font-size: 1.2rem;
}
/* Enlaces de email en secciones legales */
.legal-section a[href^="mailto:"] {
color: var(--color-primary);
font-weight: 500;
text-decoration: none;
}
.legal-section a[href^="mailto:"]:hover {
text-decoration: underline;
}
/* --- Fin Generic Legal Page Styles --- */
/* Estilos para la animación de scroll */
.animate-on-scroll {
opacity: 0;
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
transform: translateY(20px);
}
.animate-on-scroll.animate-fade-in {
opacity: 1;
transform: translateY(0);
}
/* Fin de estilos para animación de scroll */
/* Responsive Design Media Queries */
@media (min-width: 640px) {
.additional-services {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.valores-grid {
grid-template-columns: repeat(2, 1fr);
}
.tech-highlights {
grid-template-columns: repeat(2, 1fr); /* 2 columnas en móvil/tablet */
}
}
@media (min-width: 768px) {
.nav-links {
display: flex;
gap: 1.5rem;
}
.mobile-menu-button {
display: none;
}
.hero-content {
grid-template-columns: 1fr 1fr;
text-align: left;
align-items: center;
}
.hero h1 {
font-size: 3.5rem;
}
.features-grid {
grid-template-columns: repeat(3, 1fr);
}
.pricing-grid {
grid-template-columns: repeat(3, 1fr);
}
.intro-grid {
grid-template-columns: repeat(3, 1fr);
}
#mision-vision .about-grid {
grid-template-columns: 1fr 1fr; /* Dos columnas en escritorio */
}
#mision-vision .about-image {
order: 1; /* Poner imagen a la derecha en escritorio */
}
#mision-vision .about-text {
order: 0;
}
.blog-grid {
grid-template-columns: repeat(2, 1fr);
}
.resource-list {
grid-template-columns: repeat(2, 1fr);
}
.casos-exito-grid {
grid-template-columns: repeat(2, 1fr); /* Dos columnas en escritorio */
gap: 2rem;
}
.tech-highlights {
grid-template-columns: repeat(4, 1fr); /* 4 columnas en escritorio */
}
}
@media (max-width: 900px) { /* Este es para el footer específicamente */
.footer-grid {
flex-direction: column;
gap: 2rem;
}
.footer-bottom {
flex-direction: column;
gap: 1rem;
}
.footer-apps {
align-items: center;
margin-top: 1.5rem;
}
.footer-bottom p {
text-align: center;
}
}
@media (min-width: 992px) { /* Para contact-grid y descripción-general, modulos */
.contact-grid {
grid-template-columns: 1fr 1fr; /* Dos columnas */
align-items: start; /* Alinear arriba */
}
#descripcion-general {
grid-template-columns: 1fr 1fr; /* Dos columnas en escritorio */
}
.modulo-detalle {
grid-template-columns: 1fr 1fr; /* Dos columnas en escritorio */
gap: 3rem;
}
/* Alternar imagen izquierda/derecha */
.modulo-detalle:nth-child(even) .modulo-image {
order: -1; /* Mover imagen a la izquierda en pares */
}
}
@media (min-width: 1024px) {
.valores-grid {
grid-template-columns: repeat(3, 1fr); /* 3 columnas en pantallas grandes */
}
.blog-grid {
grid-template-columns: repeat(3, 1fr);
}
}