/* Reset y configuración base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-bg: #0f1419;
--secondary-bg: #1a1f2e;
--accent-red: #ff0000;
--accent-red-hover: #cc0000;
--accent-blue: #3b82f6;
--accent-blue-hover: #1d4ed8;
--accent-gold: #ffffff;
--accent-gold-hover: #f0f0f0;
--text-white: #f8f9fa;
--text-gray: #dee2e6;
--text-light-gray: #adb5bd;
--border-dark: #2d3748;
--hover-bg: #2d3748;
--card-bg: #1a1f2e;
--card-hover: #2d3748;
--shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.3);
--shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.4);
--shadow-blue: 0 8px 25px rgba(59, 130, 246, 0.25);
--shadow-blue-hover: 0 12px 35px rgba(59, 130, 246, 0.35);
--shadow-red: 0 8px 25px rgba(255, 0, 0, 0.4);
--shadow-red-hover: 0 12px 35px rgba(255, 0, 0, 0.5);
--border-radius: 12px;
--transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--gradient-primary: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
--gradient-accent: linear-gradient(135deg, #ff0000 0%, #cc0000 50%, #b30000 100%);
--gradient-blue: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #1e40af 100%);
--gradient-gold: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
line-height: 1.7;
color: var(--text-white);
background: var(--gradient-primary);
margin: 0;
padding: 0;
min-height: 100vh;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-top: 32px !important; /* Ajusta este valor si tu header es más alto o más bajo */
font-size: 18px;
font-weight: 400;
letter-spacing: -0.01em;
}
@media (max-width: 768px) {
body, .main-content, main {
padding-top: 28px !important;
}
}
@media (max-width: 480px) {
body, .main-content, main {
padding-top: 20px !important;
}
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header y Navegación */
.header {
background: rgba(15, 20, 25, 0.95);
border-bottom: 1px solid var(--border-dark);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: var(--shadow-dark);
backdrop-filter: blur(20px);
padding: 0.5rem 1rem;
}
.navbar {
padding: 1.25rem 0;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 2.25rem;
font-weight: 800;
color: var(--text-white);
text-decoration: none;
letter-spacing: -2px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.logo a {
display: flex;
align-items: center;
gap: 10px;
color: var(--text-white);
text-decoration: none;
transition: var(--transition);
white-space: nowrap;
}
.logo a:hover {
color: var(--accent-red);
transform: scale(1.05);
}
.logo a:hover .logo-img {
filter: drop-shadow(0 0 8px rgba(255, 26, 26, 0.6));
}
.logo i {
color: var(--accent-red);
font-size: 2.25rem;
filter: drop-shadow(0 2px 4px rgba(255, 26, 26, 0.4));
}
.logo span {
font-size: 2rem;
font-weight: 800;
letter-spacing: 0.5px;
margin-left: 6px;
white-space: nowrap;
display: inline-block;
line-height: 1.1;
}
.nav-menu {
display: flex;
list-style: none;
gap: 1.5rem;
margin: 0;
padding: 0;
font-size: 1rem;
}
.nav-menu a {
text-decoration: none;
color: var(--text-gray);
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 0.875rem 1.25rem;
border-radius: var(--border-radius);
transition: var(--transition);
position: relative;
border: 1px solid transparent;
}
.nav-menu a:hover {
color: var(--text-white);
background: var(--gradient-accent);
border-color: var(--accent-red);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 26, 26, 0.4);
}
.nav-menu a.active {
color: var(--text-white);
background: var(--gradient-accent);
border-color: var(--accent-red);
box-shadow: 0 4px 12px rgba(255, 26, 26, 0.5);
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
gap: 6px;
padding: 16px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
min-width: 56px;
min-height: 56px;
justify-content: center;
align-items: center;
position: relative;
transition: var(--transition);
}
.hamburger span {
width: 32px;
height: 3px;
background: var(--text-white);
transition: var(--transition);
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.hamburger:hover {
background: rgba(255, 26, 26, 0.15);
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(255, 26, 26, 0.3);
border-color: rgba(255, 26, 26, 0.4);
}
.hamburger:hover span {
background: var(--accent-red);
transform: scale(1.05);
box-shadow: 0 2px 6px rgba(255, 26, 26, 0.4);
}
.hamburger:active {
transform: scale(0.95);
background: rgba(255, 26, 26, 0.25);
}
/* Hero Section */
.hero {
background: var(--gradient-primary);
color: var(--text-white);
padding: 120px 0 80px;
border-bottom: 1px solid var(--border-dark);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(255, 26, 26, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(69, 123, 157, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.hero-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
text-align: center;
position: relative;
z-index: 2;
}
.hero h1 {
font-size: 4rem;
margin-bottom: 1.25rem;
font-weight: 700;
line-height: 1.1;
color: var(--text-white);
letter-spacing: -0.02em;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
background: linear-gradient(135deg, var(--text-white) 0%, var(--accent-gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.hero p {
font-size: 1.35rem;
margin-bottom: 2rem;
color: var(--text-gray);
max-width: 700px;
margin-left: auto;
margin-right: auto;
font-weight: 300;
line-height: 1.6;
}
.cta-button {
background: var(--gradient-accent);
color: var(--text-white);
border: none;
padding: 18px 36px;
font-size: 1.1rem;
font-weight: 700;
border-radius: var(--border-radius);
cursor: pointer;
transition: var(--transition);
text-transform: uppercase;
letter-spacing: 1.5px;
box-shadow: var(--shadow-red);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 0, 0, 0.2);
}
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.cta-button:hover::before {
left: 100%;
}
.cta-button:hover,
.hero .cta-button:hover {
background: var(--gradient-accent);
transform: translateY(-2px);
box-shadow: var(--shadow-red-hover) !important;
border-color: rgba(255, 0, 0, 0.4);
}
.hero-image {
display: none;
}
/* Animaciones suaves */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Animaciones para canal de autos */
@keyframes engineRev {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes speedLines {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(100%);
opacity: 0;
}
}
@keyframes glowPulse {
0%, 100% {
box-shadow: 0 0 20px rgba(255, 26, 26, 0.4);
}
50% {
box-shadow: 0 0 30px rgba(255, 26, 26, 0.7);
}
}
/* Efectos de velocidad en hover */
.post-card:hover,
.analysis-card:hover {
animation: engineRev 0.3s ease-in-out;
}
/* Efecto de líneas de velocidad en botones */
.cta-button::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: speedLines 2s infinite;
}
/* Efecto de brillo en elementos destacados */
.post-card.featured,
.analysis-card.featured {
animation: glowPulse 3s ease-in-out infinite;
}
/* Sección de Posts */
.featured-posts {
padding: 80px 0;
background: var(--gradient-primary);
position: relative;
}
.featured-posts::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 10% 20%, rgba(69, 123, 157, 0.05) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(255, 0, 0, 0.15) 0%, transparent 50%);
pointer-events: none;
}
.featured-posts h2 {
font-size: 3rem;
margin-bottom: 3rem;
color: var(--text-white);
font-weight: 900;
text-align: center;
letter-spacing: -0.03em;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
position: relative;
background: linear-gradient(135deg, #ffffff 0%, #fbbf24 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transform: translateZ(0);
}
.featured-posts h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--gradient-accent);
border-radius: 2px;
}
.posts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
position: relative;
z-index: 2;
}
.post-card {
background: var(--card-bg);
border: 1px solid var(--border-dark);
border-radius: var(--border-radius);
overflow: hidden;
transition: var(--transition);
position: relative;
box-shadow: var(--shadow-dark);
}
.post-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-accent);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.post-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-red-hover);
border-color: var(--accent-red);
background: var(--card-hover);
}
.post-card:hover::before {
transform: scaleX(1);
}
.post-image {
height: 220px;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.post-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 26, 26, 0.15), rgba(69, 123, 157, 0.1));
opacity: 0;
transition: opacity 0.3s ease;
}
.post-card:hover .post-image::before {
opacity: 1;
}
.post-image img {
width: 100%;
height: 100%;
object-fit: contain;
transition: var(--transition);
}
.post-card:hover .post-image img {
transform: scale(1.05);
}
.post-image i {
font-size: 4rem;
color: var(--text-light-gray);
opacity: 0.8;
transition: var(--transition);
}
.post-card:hover .post-image i {
color: var(--accent-red);
transform: scale(1.1);
}
.post-category {
display: none;
}
.post-content {
padding: 2rem;
}
.post-content h3 {
margin-bottom: 1.25rem;
color: var(--text-white);
font-size: 1.35rem;
line-height: 1.4;
font-weight: 700;
letter-spacing: -0.5px;
}
.post-content p {
color: var(--text-gray);
margin-bottom: 1.75rem;
line-height: 1.7;
font-size: 1rem;
}
.post-meta {
display: flex;
gap: 2rem;
margin-bottom: 1.75rem;
font-size: 0.9rem;
color: var(--text-light-gray);
padding-top: 1.25rem;
border-top: 1px solid var(--border-dark);
}
.post-meta i {
margin-right: 8px;
color: var(--accent-red);
font-size: 0.85rem;
}
.read-more {
color: var(--accent-red);
text-decoration: none;
font-weight: 700;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 1.5px;
display: inline-flex;
align-items: center;
gap: 8px;
transition: var(--transition);
padding: 8px 0;
text-shadow: 0 0 4px rgba(255, 0, 0, 0.3);
}
.read-more:hover {
color: var(--text-white);
gap: 12px;
text-shadow: 0 0 12px rgba(255, 0, 0, 0.8);
transform: translateX(4px);
}
/* Newsletter */
.newsletter {
background: var(--gradient-primary);
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.newsletter::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 30%, rgba(69, 123, 157, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(255, 26, 26, 0.15) 0%, transparent 50%);
opacity: 0.3;
}
.newsletter-content {
text-align: center;
position: relative;
z-index: 2;
}
.newsletter-content h2 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--text-white) 0%, var(--accent-gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.newsletter-content p {
font-size: 1.25rem;
color: var(--text-light-gray);
margin-bottom: 2.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.newsletter-form {
display: flex;
gap: 1rem;
max-width: 500px;
margin: 0 auto;
background: var(--card-bg);
padding: 0.5rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-dark);
transition: var(--transition);
border: 1px solid var(--border-dark);
}
.newsletter-form:focus-within {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
border-color: var(--accent-blue);
}
.newsletter-form input {
flex: 1;
padding: 1rem 1.5rem;
border: none;
background: transparent;
color: var(--text-white);
font-size: 1rem;
outline: none;
}
.newsletter-form input::placeholder {
color: var(--text-light-gray);
}
.newsletter-form button {
padding: 1rem 2rem;
background: var(--gradient-blue);
color: var(--text-white);
border: none;
border-radius: calc(var(--border-radius) - 4px);
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: var(--transition);
text-transform: uppercase;
letter-spacing: 1px;
backdrop-filter: blur(10px);
border: 1px solid rgba(59, 130, 246, 0.2);
}
.newsletter-form button:hover {
background: var(--gradient-blue);
transform: translateY(-2px);
box-shadow: var(--shadow-blue-hover);
}
/* Análisis Section */
.analysis-section {
background: var(--gradient-primary);
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.analysis-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(69, 123, 157, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 26, 26, 0.12) 0%, transparent 50%);
opacity: 0.3;
}
.analysis-section h2 {
text-align: center;
font-size: 3rem;
font-weight: 900;
margin-bottom: 2.5rem;
background: linear-gradient(135deg, #ffffff 0%, #22c55e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 2;
letter-spacing: -0.03em;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
transform: translateZ(0);
}
.analysis-section h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--gradient-accent);
border-radius: 2px;
}
.analysis-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
position: relative;
z-index: 2;
}
.analysis-card {
background: var(--card-bg);
padding: 2.5rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-dark);
transition: var(--transition);
border: 1px solid var(--border-dark);
position: relative;
overflow: hidden;
}
.analysis-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-accent);
transform: scaleX(0);
transition: var(--transition);
}
.analysis-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
border-color: var(--accent-blue);
}
.analysis-card:hover::before {
transform: scaleX(1);
}
.analysis-image {
height: 280px;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
margin-bottom: 1.5rem;
position: relative;
overflow: hidden;
}
.analysis-image img {
width: 100%;
height: 100%;
object-fit: cover;
background: #181c24;
display: block;
margin: 0 auto;
border-radius: var(--border-radius);
transition: var(--transition);
filter: brightness(0.8) contrast(1.2) saturate(1.1);
}
.analysis-card:hover .analysis-image img {
transform: scale(1.05);
filter: brightness(0.9) contrast(1.3) saturate(1.2);
}
.analysis-card-link {
text-decoration: none;
color: inherit;
display: block;
height: 100%;
transition: var(--transition);
}
.analysis-card-link:hover {
text-decoration: none;
color: inherit;
}
.post-card-link {
text-decoration: none;
color: inherit;
display: block;
height: 100%;
transition: var(--transition);
}
.post-card-link:hover {
text-decoration: none;
color: inherit;
}
.analysis-icon {
width: 80px;
height: 80px;
background: var(--gradient-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
box-shadow: var(--shadow-blue);
transition: var(--transition);
backdrop-filter: blur(10px);
border: 1px solid rgba(59, 130, 246, 0.2);
}
.analysis-icon i {
font-size: 2rem;
color: var(--text-white);
}
.analysis-card:hover .analysis-icon {
box-shadow: var(--shadow-blue-hover);
transform: scale(1.05);
}
.analysis-card h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-white);
}
.analysis-card p {
color: var(--text-light-gray);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.analysis-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--accent-red);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
padding: 0.5rem 1rem;
border-radius: calc(var(--border-radius) - 4px);
backdrop-filter: blur(10px);
border: 1px solid rgba(239, 68, 68, 0.2);
box-shadow: var(--shadow-red);
}
.analysis-link:hover {
color: var(--accent-red-hover);
transform: translateX(5px);
box-shadow: var(--shadow-red-hover);
border-color: rgba(239, 68, 68, 0.4);
}
/* Contacto Section */
.contact-section {
background: var(--gradient-primary);
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.contact-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 25% 25%, rgba(255, 26, 26, 0.12) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(69, 123, 157, 0.08) 0%, transparent 50%);
opacity: 0.3;
}
.contact-section h2 {
text-align: center;
font-size: 3rem;
font-weight: 800;
margin-bottom: 3rem;
background: linear-gradient(135deg, var(--text-white) 0%, var(--accent-gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 2;
}
.contact-section h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--gradient-accent);
border-radius: 2px;
}
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
position: relative;
z-index: 2;
}
.contact-content-centered {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1.5rem;
background: var(--card-bg);
border-radius: var(--border-radius);
border: 1px solid var(--border-dark);
transition: var(--transition);
}
.contact-item:hover {
border-color: var(--accent-red);
transform: translateX(10px);
background: var(--card-hover);
}
.contact-item i {
width: 60px;
height: 60px;
background: var(--gradient-accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--text-white);
box-shadow: 0 8px 25px rgba(255, 26, 26, 0.4);
}
.contact-item h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-white);
}
.contact-item p {
color: var(--text-light-gray);
font-size: 1rem;
}
.contact-form {
background: rgba(26, 31, 46, 0.8);
padding: 2.5rem;
border-radius: var(--border-radius);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: var(--shadow-dark);
width: 100%;
backdrop-filter: blur(15px);
max-width: 600px;
margin: 0 auto;
}
.contact-form h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--text-white);
text-align: center;
position: relative;
}
.contact-form h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--gradient-accent);
border-radius: 2px;
}
.form-group {
margin-bottom: 1.5rem;
position: relative;
}
.form-group:has(.field-error) {
margin-bottom: 2rem;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 1rem 1.5rem;
background: var(--card-bg);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: calc(var(--border-radius) - 4px);
color: var(--text-white);
font-size: 1rem;
transition: var(--transition);
backdrop-filter: blur(10px);
box-sizing: border-box;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--accent-red);
background: var(--card-bg);
box-shadow: 0 0 0 3px rgba(255, 26, 26, 0.3);
}
.form-group input.error:focus,
.form-group textarea.error:focus,
.form-group select.error:focus {
border-color: var(--accent-red) !important;
background: var(--card-bg) !important;
box-shadow: 0 0 0 3px rgba(255, 26, 26, 0.4) !important;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--text-light-gray);
}
/* Prevenir estilos de autocompletado del navegador */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px var(--card-bg) inset !important;
-webkit-text-fill-color: var(--text-white) !important;
background: var(--card-bg) !important;
transition: background-color 5000s ease-in-out 0s;
border-color: rgba(255, 255, 255, 0.1) !important;
}
/* Asegurar que el texto tenga el color correcto cuando se escribe */
.form-group input:not(:placeholder-shown),
.form-group textarea:not(:placeholder-shown) {
color: var(--text-white);
background: var(--card-bg);
border-color: rgba(255, 255, 255, 0.1);
}
/* Estilos específicos para campos de email - REMOVIDOS para evitar conflictos */
/* Los estilos ahora se manejan directamente en contacto.html */
.form-group textarea {
resize: vertical;
min-height: 120px;
font-family: inherit;
}
.form-group select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}
.form-group select option {
background: var(--card-bg);
color: var(--text-white);
padding: 0.5rem;
}
.contact-submit {
width: 100%;
padding: 1rem 2rem;
background: var(--gradient-accent);
color: var(--text-white);
border: none;
border-radius: calc(var(--border-radius) - 4px);
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: var(--transition);
text-transform: uppercase;
letter-spacing: 1px;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.contact-submit:hover {
background: var(--gradient-accent);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 26, 26, 0.5);
}
.contact-submit:active {
transform: translateY(0);
}
/* Footer */
.footer {
background: var(--gradient-primary);
color: var(--text-white);
padding: 80px 0 40px;
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--gradient-accent);
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 4rem;
margin-bottom: 3rem;
}
.footer-section h3 {
margin-bottom: 2rem;
color: var(--text-white);
font-size: 1.2rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
position: relative;
}
.footer-section h3::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 30px;
height: 2px;
background: var(--gradient-accent);
border-radius: 1px;
}
.footer-section ul {
list-style: none;
margin: 0;
padding: 0;
}
.footer-section ul li {
margin-bottom: 1rem;
}
.footer-section a {
color: var(--text-gray);
text-decoration: none;
transition: var(--transition);
font-size: 1rem;
font-weight: 400;
padding: 4px 0;
display: inline-block;
}
.footer-section a:hover {
color: var(--accent-red);
transform: translateX(5px);
}
.social-links {
display: flex;
gap: 1.25rem;
margin-top: 2rem;
}
.social-links a:not(.youtube-icon) {
width: 45px;
height: 45px;
background: var(--gradient-accent);
border: 1px solid var(--border-dark);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
transition: var(--transition);
font-size: 1.1rem;
position: relative;
overflow: hidden;
}
.social-links a:not(.youtube-icon)::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-accent);
transform: scale(0);
transition: transform 0.3s ease;
border-radius: var(--border-radius);
}
.social-links a:not(.youtube-icon):hover {
color: var(--text-white);
border-color: var(--accent-red);
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(255, 26, 26, 0.5);
}
.social-links a:not(.youtube-icon):hover::before {
transform: scale(1);
}
.social-links a i {
position: relative;
z-index: 2;
color: var(--text-white);
}
.contact-info p {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 1rem;
font-size: 1rem;
color: var(--text-gray);
font-weight: 400;
}
.contact-info i {
color: var(--accent-red);
width: 20px;
font-size: 1.1rem;
}
.footer-bottom {
border-top: 1px solid var(--border-dark);
padding-top: 40px;
text-align: center;
color: var(--text-light-gray);
font-size: 0.95rem;
font-weight: 300;
}
/* Sección de Artículos Recientes */
.recent-articles-section {
margin-top: 40px;
padding: 40px 0;
border-top: 1px solid var(--border-dark);
}
.recent-articles-title {
color: var(--text-white);
font-size: 2rem;
font-weight: 700;
text-align: center;
margin-bottom: 30px;
position: relative;
}
.recent-articles-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--gradient-accent);
border-radius: 2px;
}
.recent-articles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.recent-article-card {
background: var(--card-bg);
border-radius: var(--border-radius);
overflow: hidden;
transition: var(--transition);
border: 1px solid var(--border-dark);
position: relative;
cursor: pointer;
}
.recent-article-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
border-color: var(--accent-red);
}
.recent-article-image {
position: relative;
width: 100%;
height: 180px;
overflow: hidden;
}
.recent-article-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.recent-article-card:hover .recent-article-image img {
transform: scale(1.05);
}
.recent-article-content {
padding: 20px;
}
.recent-article-category {
display: inline-block;
background: var(--gradient-accent);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.recent-article-title-link {
color: var(--text-white);
text-decoration: none;
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
display: block;
margin-bottom: 8px;
transition: var(--transition);
}
.recent-article-title-link:hover {
color: var(--accent-red);
}
.recent-article-excerpt {
color: var(--text-light-gray);
font-size: 0.9rem;
line-height: 1.5;
margin: 0;
}
/* Responsive para artículos recientes */
@media (max-width: 768px) {
.recent-articles-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
padding: 0 15px;
}
.recent-articles-title {
font-size: 1.6rem;
margin-bottom: 20px;
}
.recent-article-image {
height: 160px;
}
.recent-article-content {
padding: 15px;
}
.recent-article-title-link {
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.recent-articles-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.recent-article-image {
height: 140px;
}
}
/* Responsive Design */
@media (max-width: 768px) {
/* Ajustes generales de legibilidad */
body {
font-size: 17px;
line-height: 1.8;
letter-spacing: 0.01em;
}
.nav-menu {
position: fixed;
left: -100%;
top: 100%;
flex-direction: column;
background-color: var(--primary-bg);
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: var(--shadow-dark);
padding: 2rem 0;
border-top: 1px solid var(--border-dark);
}
.nav-menu.active {
left: 0;
}
.nav-menu a {
font-size: 1.1rem;
padding: 1rem 1.5rem;
line-height: 1.4;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.hamburger {
display: flex;
z-index: 1001;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(8px, 8px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
transform: scale(0);
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(8px, -8px);
}
.hero {
padding: 6rem 0 3rem;
}
.hero h1 {
font-size: 2.75rem;
line-height: 1.2;
letter-spacing: -0.01em;
margin-bottom: 1.5rem;
}
.hero p {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 2rem;
}
.cta-button {
font-size: 1.1rem;
padding: 1rem 2rem;
line-height: 1.4;
min-height: 44px;
min-width: 44px;
}
.featured-posts {
padding: 3rem 0;
}
.featured-posts h2 {
font-size: 2rem;
margin-bottom: 2rem;
line-height: 1.3;
}
.posts-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.post-card {
padding: 1.5rem;
}
.post-content h3 {
font-size: 1.3rem;
line-height: 1.4;
margin-bottom: 1rem;
}
.post-content p {
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 1.25rem;
}
.read-more {
font-size: 1rem;
padding: 0.75rem 1.5rem;
min-height: 44px;
min-width: 44px;
}
.newsletter-form {
flex-direction: column;
gap: 1rem;
}
.newsletter-form input {
font-size: 1rem;
padding: 1rem 1.25rem;
width: 100%;
}
.newsletter-form button {
font-size: 1rem;
padding: 1rem 1.5rem;
width: 100%;
min-height: 44px;
min-width: 44px;
}
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: left;
}
.footer-section:first-child {
text-align: center;
}
/* Análisis Section Responsive */
.analysis-section {
padding: 3rem 0;
}
.analysis-section h2 {
font-size: 2rem;
margin-bottom: 2rem;
line-height: 1.3;
}
.analysis-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.analysis-card {
padding: 1.5rem;
}
.analysis-card h3 {
font-size: 1.25rem;
line-height: 1.4;
margin-bottom: 0.75rem;
}
.analysis-card p {
font-size: 1rem;
line-height: 1.7;
margin-bottom: 1rem;
}
/* Contacto Section Responsive */
.contact-section {
padding: 3rem 0;
}
.contact-section h2 {
font-size: 2rem;
margin-bottom: 2rem;
line-height: 1.3;
}
.contact-content {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.contact-content-centered {
max-width: 100%;
padding: 0 1rem;
}
.contact-item {
padding: 0.875rem;
}
.contact-form {
padding: 1.5rem;
max-width: 100%;
}
.contact-form h3 {
font-size: 1.25rem;
margin-bottom: 1.25rem;
}
.form-group {
margin-bottom: 1.25rem;
position: relative;
}
.form-group:has(.field-error) {
margin-bottom: 1.75rem;
}
.form-group input,
.form-group textarea,
.form-group select {
padding: 0.875rem 1.25rem;
font-size: 0.95rem;
}
.contact-submit {
padding: 0.875rem 1.5rem;
font-size: 0.95rem;
min-height: 44px;
}
/* Mejoras en espaciado general */
.container {
padding: 0 1.5rem;
}
}
@media (max-width: 480px) {
/* Ajustes adicionales para pantallas muy pequeñas */
body {
font-size: 16px;
line-height: 1.7;
}
.container {
padding: 0 1rem;
}
.hero h1 {
font-size: 2.25rem;
line-height: 1.2;
margin-bottom: 1.25rem;
}
.hero p {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.cta-button {
font-size: 1rem;
padding: 0.875rem 1.75rem;
min-height: 44px;
min-width: 44px;
}
.featured-posts h2 {
font-size: 1.75rem;
line-height: 1.3;
margin-bottom: 1.5rem;
}
.featured-posts {
padding: 2.5rem 0;
}
.post-content {
padding: 1.25rem;
}
.post-content h3 {
font-size: 1.25rem;
line-height: 1.4;
margin-bottom: 1rem;
}
.post-content p {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1.25rem;
}
.read-more {
font-size: 0.95rem;
padding: 0.625rem 1.25rem;
min-height: 44px;
min-width: 44px;
}
.newsletter {
padding: 2.5rem 0;
}
.newsletter-content h2 {
font-size: 1.75rem;
line-height: 1.3;
margin-bottom: 1rem;
}
.newsletter-content p {
font-size: 1rem;
line-height: 1.6;
}
.newsletter-form input {
font-size: 0.95rem;
padding: 0.875rem 1rem;
}
.newsletter-form button {
font-size: 0.95rem;
padding: 0.875rem 1.25rem;
min-height: 44px;
min-width: 44px;
}
/* Análisis Section Mobile */
.analysis-section h2 {
font-size: 1.75rem;
line-height: 1.3;
margin-bottom: 1.5rem;
}
.analysis-section {
padding: 2.5rem 0;
}
.analysis-card {
padding: 1.25rem;
}
.analysis-card h3 {
font-size: 1.2rem;
line-height: 1.4;
margin-bottom: 0.75rem;
}
.analysis-card p {
font-size: 1.05rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.analysis-icon {
width: 60px;
height: 60px;
}
.analysis-icon i {
font-size: 1.5rem;
}
/* Contacto Section Mobile */
.contact-section h2 {
font-size: 1.75rem;
line-height: 1.3;
margin-bottom: 1.5rem;
}
.contact-section {
padding: 2.5rem 0;
}
.contact-content-centered {
padding: 0 0.75rem;
}
.contact-item {
flex-direction: column;
text-align: center;
gap: 0.875rem;
}
.contact-item i {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.contact-form {
padding: 1.25rem;
max-width: 100%;
}
.contact-form h3 {
font-size: 1.125rem;
margin-bottom: 1rem;
}
.form-group {
margin-bottom: 1rem;
position: relative;
}
.form-group:has(.field-error) {
margin-bottom: 1.5rem;
}
.form-group input,
.form-group textarea,
.form-group select {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.contact-submit {
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
min-height: 44px;
}
/* Page Header Mobile */
.page-header {
padding: 5rem 0 2.5rem;
}
.page-header h1 {
font-size: 2rem;
line-height: 1.3;
margin-bottom: 1rem;
}
.page-header p {
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1rem;
}
/* Featured Analysis Mobile */
.featured-analysis h2 {
font-size: 1.75rem;
line-height: 1.3;
}
/* Team Section Mobile */
.team-section h2 {
font-size: 1.75rem;
line-height: 1.3;
}
.team-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.team-member {
padding: 1.25rem;
}
.member-avatar {
width: 80px;
height: 80px;
}
.member-avatar i {
font-size: 2rem;
}
/* Mejoras en espaciado general */
.posts-grid,
.analysis-grid {
gap: 1.25rem;
}
.post-card,
.analysis-card {
padding: 1.25rem;
}
/* Mejoras en navegación */
.nav-menu a {
font-size: 1rem;
padding: 0.875rem 1.25rem;
min-height: 44px;
}
/* Mejoras en metadatos */
.post-meta,
.article-meta {
font-size: 0.9rem;
line-height: 1.5;
}
/* Mejoras en categorías */
.post-category,
.article-category {
font-size: 0.85rem;
padding: 0.375rem 0.75rem;
}
}
/* Smooth scroll */
html {
scroll-behavior: smooth;
}
/* Utilidades */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Page Header */
.page-header {
background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--primary-bg) 100%);
padding: 10rem 0 5rem;
text-align: center;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.page-header::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 20%, rgba(220, 38, 127, 0.08) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(34, 197, 94, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.page-header h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--text-white) 0%, var(--text-gray) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 2;
}
.page-header p {
font-size: 1.25rem;
color: var(--text-light-gray);
max-width: 600px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* Featured Analysis */
.featured-analysis {
background: var(--primary-bg);
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.featured-analysis::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.featured-analysis h2 {
text-align: center;
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 3rem;
background: linear-gradient(135deg, var(--text-white) 0%, var(--text-gray) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 2;
}
.featured-analysis h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--accent-red);
border-radius: 2px;
}
/* Team Section */
.team-section {
background: var(--secondary-bg);
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.team-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.team-section h2 {
text-align: center;
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 3rem;
background: linear-gradient(135deg, var(--text-white) 0%, var(--text-gray) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 2;
}
.team-section h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--accent-red);
border-radius: 2px;
}
.team-grid {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
position: relative;
z-index: 2;
}
.team-member {
background: var(--card-bg);
padding: 2rem;
border-radius: var(--border-radius);
text-align: center;
box-shadow: var(--shadow-dark);
border: 1px solid var(--border-dark);
transition: var(--transition);
max-width: 400px;
width: 100%;
}
.team-member:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
border-color: var(--accent-red);
}
.member-avatar {
width: 100px;
height: 100px;
background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-hover) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: 0 8px 25px rgba(255, 0, 0, 0.3);
}
.member-avatar i {
font-size: 2.5rem;
color: var(--text-white);
}
.team-member h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-white);
}
.member-role {
color: var(--accent-red);
font-weight: 600;
margin-bottom: 1rem;
font-size: 1rem;
}
.member-bio {
color: var(--text-light-gray);
line-height: 1.6;
font-size: 0.95rem;
}
/* Form Select Styles - Eliminado duplicado */
/* Media Queries Responsivas Profesionales */
/* Extra Large Devices (Desktop grande - 1400px y superior) */
@media (min-width: 1400px) {
.container {
max-width: 1320px;
}
.hero h1 {
font-size: 4.5rem;
}
.hero p {
font-size: 1.5rem;
}
.page-header h1 {
font-size: 4rem;
}
.posts-grid {
grid-template-columns: repeat(4, 1fr);
}
.analysis-grid {
grid-template-columns: repeat(3, 1fr);
}
.team-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* Large Devices (Desktop - 1200px a 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
.container {
max-width: 1140px;
}
.hero h1 {
font-size: 4rem;
}
.posts-grid {
grid-template-columns: repeat(3, 1fr);
}
.analysis-grid {
grid-template-columns: repeat(3, 1fr);
}
.team-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Medium Devices (Tablets - 992px a 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
.container {
max-width: 960px;
}
.hero h1 {
font-size: 3.5rem;
}
.hero p {
font-size: 1.3rem;
}
.page-header h1 {
font-size: 3rem;
}
.posts-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.analysis-grid {
grid-template-columns: repeat(2, 1fr);
}
.team-grid {
grid-template-columns: repeat(2, 1fr);
}
.contact-content {
grid-template-columns: 1fr;
gap: 3rem;
}
.nav-menu {
gap: 1rem;
}
.nav-menu a {
padding: 0.75rem 1rem;
font-size: 0.85rem;
}
}
/* Small Devices (Tablets pequeñas - 768px a 991px) */
@media (min-width: 768px) and (max-width: 991px) {
.container {
max-width: 720px;
padding: 0 15px;
}
.hero {
padding: 7rem 0 3rem;
}
.hero h1 {
font-size: 3rem;
}
.hero p {
font-size: 1.2rem;
}
.page-header {
padding: 7rem 0 3rem;
}
.page-header h1 {
font-size: 2.8rem;
}
.page-header p {
font-size: 1.1rem;
}
.posts-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.analysis-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.team-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.contact-content {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.nav-menu {
gap: 0.75rem;
}
.nav-menu a {
padding: 0.625rem 0.875rem;
font-size: 0.8rem;
letter-spacing: 1px;
}
.logo {
font-size: 1.75rem;
}
.logo i {
font-size: 1.75rem;
}
.featured-posts h2,
.analysis-section h2,
.contact-section h2,
.featured-analysis h2,
.team-section h2 {
font-size: 2.2rem;
}
.newsletter-content h2 {
font-size: 2.5rem;
}
.newsletter-form {
max-width: 450px;
}
}
/* Extra Small Devices (Móviles grandes - 576px a 767px) */
@media (min-width: 576px) and (max-width: 767px) {
.container {
max-width: 540px;
padding: 0 15px;
}
.hero {
padding: 6rem 0 2.5rem;
}
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.1rem;
}
.page-header {
padding: 6rem 0 2.5rem;
}
.page-header h1 {
font-size: 2.3rem;
}
.page-header p {
font-size: 1rem;
}
.posts-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.analysis-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.team-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.contact-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.nav-menu {
position: fixed;
left: -100%;
top: 100%;
flex-direction: column;
background-color: var(--primary-bg);
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: var(--shadow-dark);
padding: 2rem 0;
border-top: 1px solid var(--border-dark);
}
.nav-menu.active {
left: 0;
}
.hamburger {
display: flex;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.logo {
font-size: 1.5rem;
}
.logo i {
font-size: 1.5rem;
}
.featured-posts h2,
.analysis-section h2,
.contact-section h2,
.featured-analysis h2,
.team-section h2 {
font-size: 2rem;
}
.newsletter-content h2 {
font-size: 2.2rem;
}
.newsletter-form {
flex-direction: column;
gap: 1rem;
max-width: 400px;
}
.newsletter-form input,
.newsletter-form button {
width: 100%;
}
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: left;
}
.footer-section:first-child {
text-align: center;
}
.analysis-card,
.team-member {
padding: 1.5rem;
}
.contact-item {
flex-direction: column;
text-align: center;
gap: 1rem;
padding: 1.25rem;
}
.contact-item i {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
.contact-form {
padding: 1.5rem;
}
.analysis-icon {
width: 60px;
height: 60px;
}
.analysis-icon i {
font-size: 1.5rem;
}
.member-avatar {
width: 80px;
height: 80px;
}
.member-avatar i {
font-size: 2rem;
}
}
/* Móviles pequeños (hasta 575px) */
@media (max-width: 575px) {
.container {
padding: 0 12px;
}
.hero {
padding: 5rem 0 2rem;
}
.hero h1 {
font-size: 2rem;
letter-spacing: -1px;
}
.hero p {
font-size: 1rem;
}
.page-header {
padding: 5rem 0 2rem;
}
.page-header h1 {
font-size: 1.8rem;
}
.page-header p {
font-size: 0.9rem;
}
.posts-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.analysis-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.team-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.contact-content {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.nav-menu {
position: fixed;
left: -100%;
top: 100%;
flex-direction: column;
background-color: var(--primary-bg);
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: var(--shadow-dark);
padding: 1.5rem 0;
border-top: 1px solid var(--border-dark);
}
.nav-menu.active {
left: 0;
}
.hamburger {
display: flex;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.logo {
font-size: 1.25rem;
gap: 8px;
}
.logo i {
font-size: 1.25rem;
}
.featured-posts h2,
.analysis-section h2,
.contact-section h2,
.featured-analysis h2,
.team-section h2 {
font-size: 1.75rem;
}
.newsletter-content h2 {
font-size: 1.8rem;
}
.newsletter {
padding: 2.5rem 0;
}
.newsletter-form {
flex-direction: column;
gap: 0.75rem;
max-width: 100%;
}
.newsletter-form input,
.newsletter-form button {
width: 100%;
padding: 0.875rem 1rem;
}
.footer-content {
grid-template-columns: 1fr;
gap: 1.5rem;
text-align: left;
}
.footer-section:first-child {
text-align: center;
}
.analysis-card,
.team-member {
padding: 1.25rem;
}
.contact-item {
flex-direction: column;
text-align: center;
gap: 0.75rem;
padding: 1rem;
}
.contact-item i {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.contact-form {
padding: 1.25rem;
}
.analysis-icon {
width: 50px;
height: 50px;
}
.analysis-icon i {
font-size: 1.25rem;
}
.member-avatar {
width: 70px;
height: 70px;
}
.member-avatar i {
font-size: 1.75rem;
}
.post-content {
padding: 1.25rem;
}
.post-content h3 {
font-size: 1.1rem;
}
.post-meta {
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
}
.social-links {
justify-content: flex-start;
gap: 1rem;
}
.social-links a {
width: 40px;
height: 40px;
}
.social-links a i {
font-size: 1.1rem;
}
}
/* Orientación Landscape en móviles */
@media (max-width: 767px) and (orientation: landscape) {
.hero {
padding: 4rem 0 2rem;
}
.page-header {
padding: 4rem 0 2rem;
}
.hero h1 {
font-size: 2.2rem;
}
.page-header h1 {
font-size: 2rem;
}
.nav-menu {
max-height: 60vh;
overflow-y: auto;
}
}
/* Dispositivos con pantalla de alta densidad (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.hero::before,
.page-header::before,
.featured-posts::before,
.analysis-section::before,
.contact-section::before,
.newsletter::before,
.featured-analysis::before,
.team-section::before {
background-size: 50px 50px;
}
}
/* Dispositivos con preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.hero-content,
.post-card,
.analysis-card,
.team-member,
.contact-item {
animation: none !important;
}
}
/* Forzar modo oscuro - eliminadas las media queries de preferencias del sistema */
/* Impresión */
@media print {
.header,
.footer,
.hamburger,
.newsletter,
.social-links {
display: none !important;
}
.hero,
.page-header {
padding: 1rem 0;
}
.hero h1,
.page-header h1 {
color: #000 !important;
font-size: 2rem;
}
.post-card,
.analysis-card,
.team-member {
break-inside: avoid;
margin-bottom: 1rem;
border: 1px solid #ccc;
}
body {
background: var(--primary-bg) !important;
color: var(--text-white) !important;
}
}
/* Estilos para formularios mejorados */
.form-group input.error,
.form-group textarea.error,
.form-group select.error {
border-color: var(--accent-red) !important;
background: rgba(255, 26, 26, 0.05) !important;
box-shadow: 0 0 0 2px rgba(255, 26, 26, 0.2) !important;
animation: shake 0.3s ease-in-out;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
@keyframes fadeInError {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.field-error {
color: var(--accent-red);
font-size: 0.875rem;
margin-top: 0.5rem;
display: flex;
align-items: center;
font-weight: 500;
opacity: 0;
animation: fadeInError 0.3s ease-in-out forwards;
gap: 0.5rem;
}
.field-error::before {
content: '⚠';
font-size: 1rem;
}
/* Animaciones de entrada para elementos */
.post-card,
.analysis-card,
.team-member,
.contact-item {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.post-card.visible,
.analysis-card.visible,
.team-member.visible,
.contact-item.visible {
opacity: 1;
transform: translateY(0);
}
/* Mejoras para notificaciones */
.notification-content {
display: flex;
align-items: center;
gap: 10px;
}
.notification-close {
background: none;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
margin-left: auto;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.2s ease;
}
.notification-close:hover {
background-color: rgba(255, 255, 255, 0.2);
}
/* Mejoras para accesibilidad */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Focus visible para mejor accesibilidad */
.nav-menu a:focus,
.cta-button:focus,
.newsletter-form input:focus,
.newsletter-form button:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.contact-submit:focus,
.analysis-link:focus,
.read-more:focus {
outline: 2px solid var(--accent-red);
outline-offset: 2px;
}
/* Mejoras para dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
.nav-menu a,
.cta-button,
.newsletter-form button,
.contact-submit,
.analysis-link,
.read-more {
min-height: 44px;
min-width: 44px;
}
.hamburger {
min-height: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.social-links a {
min-height: 44px;
min-width: 44px;
}
/* Deshabilitar animaciones de hover en dispositivos táctiles */
.news-card:hover,
.analysis-card:hover,
.post-card:hover,
.brand-card:hover,
.team-member:hover,
.contact-item:hover,
.terms-section-item:hover,
.related-article:hover,
.pricing-item:hover,
.index-item:hover,
.spec-card:hover,
.highlight:hover {
transform: none !important;
box-shadow: var(--shadow-dark) !important;
border-color: var(--border-dark) !important;
}
.news-card:hover .news-image img,
.analysis-card:hover .analysis-image img,
.post-card:hover .post-image img,
.related-article:hover .related-image img,
.brand-card:hover .brand-icon .brand-logo {
transform: none !important;
}
.news-card h3 a:hover,
.analysis-card h3 a:hover,
.post-card h3 a:hover,
.related-content h4 a:hover,
.nav-menu a:hover,
.logo a:hover,
.view-all:hover,
.footer-block ul li a:hover,
.footer-block .social-links a:hover,
.footer-block .logo a:hover,
.article-section a:hover,
.featured-article .article-content h1 a:hover,
.featured-article .tag:hover,
.news-card .tag:hover,
.comment-action:hover,
.comment-submit:hover,
.price-btn:hover,
.notification-close:hover {
color: inherit !important;
background: none !important;
transform: none !important;
}
.news-card:hover::before,
.analysis-card:hover::before,
.post-card:hover::before,
.pricing-item:hover::before,
.index-item:hover::before,
.pricing-item:hover::after {
opacity: 0 !important;
}
.featured-article .article-image:hover,
.related-image:hover {
transform: none !important;
}
.cta-button:hover,
.cta-button:hover::before,
.newsletter-form button:hover,
.contact-submit:hover {
transform: none !important;
background: var(--accent-red) !important;
}
.read-more:hover,
.analysis-link:hover {
background: var(--accent-red) !important;
transform: none !important;
}
}
/* Mejoras para dispositivos con pantalla de alta densidad */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo i,
.analysis-icon i,
.contact-item i,
.member-avatar i {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
/* Mejoras para dispositivos con preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
.post-card,
.analysis-card,
.team-member,
.contact-item {
transition: none;
}
.notification {
transition: none;
}
.nav-menu {
transition: none;
}
}
/* Estilos de error forzados para modo oscuro */
.field-error {
color: #ff6b6b;
font-size: 0.8rem;
margin-top: 0.375rem;
}
.form-group input.error,
.form-group textarea.error,
.form-group select.error {
border-color: var(--accent-red) !important;
background: rgba(255, 26, 26, 0.08) !important;
box-shadow: 0 0 0 2px rgba(255, 26, 26, 0.25) !important;
}
/* Estilos para Artículos Completos */
.article-container {
background: var(--primary-bg);
min-height: 100vh;
}
.article-header {
background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--primary-bg) 100%);
padding: 8rem 0 0.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.article-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.article-meta {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
margin-bottom: 0.5rem;
position: relative;
z-index: 2;
}
.article-category {
display: none;
}
.article-date,
.article-author {
color: var(--text-light-gray);
font-size: 0.9rem;
display: none;
align-items: center;
gap: 0.5rem;
}
.article-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #ffffff 0%, #e5e7eb 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
z-index: 2;
line-height: 1.1;
letter-spacing: -0.03em;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
transform: translateZ(0);
}
.article-subtitle {
font-size: 1.25rem;
color: var(--text-light-gray);
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 2;
line-height: 1.6;
}
.article-hero {
background: var(--secondary-bg);
padding: 0;
}
.article-hero-image {
width: 100%;
max-width: 1200px;
height: auto;
border-radius: var(--border-radius);
box-shadow: var(--shadow-dark);
}
.article-content {
padding: 4rem 0;
}
.content-wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
align-items: start;
min-height: 100vh;
}
.main-content {
background: var(--card-bg);
padding: 3rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-dark);
border: 1px solid var(--border-dark);
line-height: 1.8;
}
.article-section {
margin-bottom: 3rem;
}
.article-section:last-child {
margin-bottom: 0;
}
.article-section h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--text-white);
border-bottom: 3px solid var(--accent-red);
padding-bottom: 0.5rem;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
letter-spacing: -0.02em;
}
.article-section p {
font-size: 1.25rem;
line-height: 1.7;
color: var(--text-white);
margin-bottom: 1.75rem;
text-align: left;
hyphens: auto;
max-width: 75ch;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-weight: 400;
letter-spacing: -0.01em;
}
.article-section p:last-child {
margin-bottom: 0;
}
.article-section strong {
color: var(--text-white);
font-weight: 600;
}
.article-section a {
color: var(--accent-blue);
text-decoration: underline;
text-decoration-color: var(--accent-blue);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
transition: all 0.3s ease;
}
.article-section a:hover {
color: var(--accent-blue-hover);
text-decoration-color: var(--accent-blue-hover);
}
.article-image {
margin: 2rem 0;
text-align: center;
}
.content-image {
width: 100%;
max-width: 800px;
height: auto;
border-radius: var(--border-radius);
box-shadow: var(--shadow-dark);
}
.image-caption {
font-size: 0.9rem;
color: var(--text-light-gray);
margin-top: 1rem;
font-style: italic;
}
/* Tabla de precios - Diseño Moderno y Elegante */
.pricing-table {
background: linear-gradient(135deg, var(--card-bg) 0%, var(--secondary-bg) 100%);
padding: 3rem 2rem;
border-radius: 20px;
margin: 3rem 0;
border: 2px solid var(--border-dark);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 26, 26, 0.1);
position: relative;
overflow: hidden;
}
.pricing-table::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg,
rgba(255, 26, 26, 0.03) 0%,
rgba(0, 170, 255, 0.03) 50%,
rgba(255, 26, 26, 0.03) 100%);
pointer-events: none;
}
.pricing-table h3 {
text-align: center;
font-size: 2.2rem;
margin-bottom: 3rem;
color: var(--text-white);
font-weight: 800;
letter-spacing: -1px;
position: relative;
z-index: 2;
}
.pricing-table h3::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--accent-red), var(--accent-blue));
border-radius: 2px;
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.pricing-item {
background: linear-gradient(145deg, var(--card-bg) 0%, var(--secondary-bg) 100%);
border-radius: 20px;
border: 2px solid var(--border-dark);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.pricing-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-red), var(--accent-blue));
opacity: 0;
transition: opacity 0.3s ease;
}
.pricing-item:hover {
transform: translateY(-12px) scale(1.02);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 26, 26, 0.2);
border-color: var(--accent-red);
}
.pricing-item:hover::before {
opacity: 1;
}
.pricing-item.recommended {
transform: scale(1.05);
border-color: var(--accent-blue);
box-shadow:
0 15px 35px rgba(0, 170, 255, 0.3),
0 0 0 2px rgba(0, 170, 255, 0.2);
position: relative;
}
.pricing-item.recommended::after {
content: 'RECOMENDADO';
position: absolute;
top: -8px;
right: -8px;
background: linear-gradient(135deg, var(--accent-blue), #00aaff);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.5px;
box-shadow: 0 4px 12px rgba(0, 170, 255, 0.4);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.pricing-title {
background: var(--gradient-accent);
color: white;
padding: 1.5rem 1rem;
text-align: center;
font-weight: 800;
font-size: 1.2rem;
letter-spacing: 1px;
border-radius: 18px 18px 0 0;
position: relative;
overflow: hidden;
border-bottom: 3px solid var(--accent-red);
box-shadow: var(--shadow-red);
backdrop-filter: blur(10px);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.pricing-item.recommended .pricing-title {
background: linear-gradient(135deg, var(--accent-blue) 0%, #00aaff 100%);
border-bottom: 3px solid var(--accent-blue);
}
.pricing-title::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.pricing-item:hover .pricing-title::before {
left: 100%;
}
.pricing-price {
background: linear-gradient(135deg, var(--primary-bg) 0%, var(--secondary-bg) 100%);
color: var(--text-white);
padding: 2rem 1rem;
text-align: center;
font-size: 2.5rem;
font-weight: 900;
border-radius: 0 0 18px 18px;
position: relative;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
border-top: 1px solid var(--border-dark);
}
.pricing-price::before {
content: '$';
position: absolute;
top: 0.5rem;
left: 50%;
transform: translateX(-50%);
font-size: 1rem;
opacity: 0.8;
font-weight: 600;
color: var(--accent-red);
}
.pricing-item.recommended .pricing-price::before {
color: var(--accent-blue);
}
.pricing-features {
padding: 1.5rem;
color: var(--text-light);
font-size: 0.95rem;
line-height: 1.6;
background: var(--secondary-bg);
}
/* Mejoras en el contenido principal */
.main-content {
background: var(--card-bg);
padding: 3rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-dark);
border: 1px solid var(--border-dark);
line-height: 1.8;
}
.article-section h2 {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 2rem;
color: var(--text-white);
border-bottom: 3px solid var(--accent-red);
padding-bottom: 0.75rem;
position: relative;
}
.article-section h2::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-blue) 100%);
}
.article-section p {
font-size: 1.15rem;
line-height: 1.9;
color: var(--text-gray);
margin-bottom: 1.75rem;
text-align: left;
}
/* Índice de navegación de artículos */
.article-index {
background: linear-gradient(135deg, var(--card-bg) 0%, var(--primary-bg) 100%);
border-bottom: 1px solid var(--border-dark);
border-top: 3px solid var(--accent-red);
padding: 2.5rem 0;
margin-bottom: 0;
position: relative;
overflow: hidden;
}
.article-index::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 49%, rgba(255, 26, 26, 0.03) 50%, transparent 51%);
pointer-events: none;
}
.index-wrapper {
max-width: 800px;
margin: 0 auto;
}
.index-wrapper h3 {
color: var(--text-white);
font-size: 1.4rem;
margin-bottom: 2rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
position: relative;
z-index: 1;
font-weight: 600;
}
.index-wrapper h3::after {
content: '';
width: 50px;
height: 3px;
background: var(--accent-red);
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;
}
.index-wrapper h3 i {
color: var(--accent-red);
}
.index-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.index-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem 1.5rem;
background: linear-gradient(135deg, var(--primary-bg) 0%, rgba(37, 37, 37, 0.8) 100%);
border: 1px solid var(--border-dark);
border-radius: 10px;
color: var(--text-white);
text-decoration: none;
transition: all 0.3s ease;
font-size: 1rem;
font-weight: 500;
position: relative;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.index-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 26, 26, 0.1), transparent);
transition: left 0.3s ease;
}
.index-item:hover {
background: linear-gradient(135deg, var(--hover-bg) 0%, rgba(45, 45, 45, 0.9) 100%);
border-color: var(--accent-red);
color: var(--text-white);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(255, 26, 26, 0.2);
}
.index-item:hover::before {
left: 100%;
}
.index-item i {
color: var(--accent-red);
font-size: 1rem;
width: 20px;
text-align: center;
flex-shrink: 0;
}
.index-item span {
line-height: 1.3;
}
/* Características técnicas destacadas */
.tech-specs-highlight {
background: var(--card-bg);
border-bottom: 1px solid var(--border-dark);
padding: 2.5rem 0;
margin-bottom: 0;
}
.tech-specs-highlight h3 {
color: var(--text-white);
font-size: 1.5rem;
text-align: center;
margin-bottom: 2rem;
font-weight: 600;
}
.specs-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.spec-card {
background: var(--primary-bg);
border: 1px solid var(--border-dark);
border-radius: 12px;
padding: 1.5rem;
text-align: center;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.spec-card:hover {
border-color: var(--accent-red);
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(255, 26, 26, 0.15);
}
.spec-card.price-card {
background: var(--gradient-accent);
border-color: var(--accent-red);
box-shadow: var(--shadow-red);
backdrop-filter: blur(10px);
border: 1px solid rgba(239, 68, 68, 0.2);
}
.spec-icon {
font-size: 2rem;
color: var(--accent-red);
margin-bottom: 1rem;
}
.price-card .spec-icon {
color: var(--text-white);
}
.spec-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.spec-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--text-light-gray);
text-transform: uppercase;
letter-spacing: 1px;
}
.price-card .spec-label {
color: rgba(255, 255, 255, 0.9);
}
.spec-value {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-white);
line-height: 1.2;
}
.spec-value.price {
font-size: 1.5rem;
color: var(--text-white);
}
.spec-item-no-box {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.5rem 0;
background: none;
border: none;
text-align: left;
width: 220px;
}
.spec-item-no-box .spec-icon {
font-size: 1.5rem;
color: var(--accent-red);
margin-bottom: 0;
}
.spec-item-no-box .spec-content {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.spec-item-no-box .spec-label {
font-size: 0.7rem;
}
.spec-item-no-box .spec-value {
font-size: 1rem;
}
.rating {
display: flex;
justify-content: center;
gap: 2px;
}
.rating i {
font-size: 1rem;
color: #ffd700;
}
.price-btn {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: var(--text-white);
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
margin-top: 0.5rem;
}
.price-btn:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
}
/* Mejoras en el sidebar */
.sidebar-widget {
background: var(--card-bg);
padding: 2.5rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-dark);
border: 1px solid var(--border-dark);
margin-bottom: 2rem;
}
.sidebar-widget h3 {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 2rem;
color: var(--text-white);
border-bottom: 2px solid var(--accent-red);
padding-bottom: 0.75rem;
position: relative;
}
.sidebar-widget h3::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 40px;
height: 2px;
background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-red) 100%);
}
.specs-list li {
padding: 1rem 0;
border-bottom: 1px solid var(--border-dark);
color: var(--text-gray);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1rem;
}
.specs-list strong {
color: var(--text-white);
font-weight: 600;
font-size: 1.05rem;
}
/* Mejoras en pros y contras */
.pros h4,
.cons h4 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border-dark);
}
.pros h4 {
color: #00aaff;
text-shadow: 0 0 10px rgba(0, 170, 255, 0.3);
}
.cons h4 {
color: #ff0000;
text-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
position: relative;
transition: all 0.3s ease;
}
.cons h4::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, #ff0000, #cc0000);
transition: width 0.3s ease;
box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}
.cons:hover h4::after {
width: 100%;
}
.pros li,
.cons li {
padding: 0.75rem 0;
color: var(--text-white);
position: relative;
padding-left: 2rem;
font-size: 1rem;
line-height: 1.6;
}
.pros li::before {
content: '✓';
position: absolute;
left: 0;
color: #00aaff;
font-weight: bold;
font-size: 1.2rem;
background: rgba(0, 170, 255, 0.2);
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 8px rgba(0, 170, 255, 0.4);
}
.cons li::before {
content: '✗';
position: absolute;
left: 0;
color: #ff0000;
font-weight: bold;
font-size: 1.2rem;
background: rgba(255, 0, 0, 0.2);
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 8px rgba(255, 0, 0, 0.4);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 0, 0, 0.3);
transition: all 0.3s ease;
}
.cons li:hover::before {
background: rgba(255, 0, 0, 0.3);
box-shadow: 0 0 12px rgba(255, 0, 0, 0.6);
border-color: rgba(255, 0, 0, 0.5);
transform: scale(1.1);
}
.cons li:hover {
text-shadow: 0 0 4px rgba(255, 0, 0, 0.3);
transform: translateX(4px);
transition: all 0.3s ease;
}
/* Responsive mejorado */
@media (max-width: 992px) {
.pricing-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.pricing-item.recommended {
grid-column: 1 / -1;
transform: none;
}
.main-content {
padding: 2rem;
}
.sidebar-widget {
padding: 2rem;
}
}
@media (max-width: 768px) {
.pricing-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.pricing-table {
padding: 1.5rem;
}
.pricing-table h3 {
font-size: 1.5rem;
line-height: 1.3;
}
.pricing-title {
padding: 1rem;
font-size: 1.1rem;
line-height: 1.4;
}
.pricing-price {
padding: 1.5rem 1rem;
font-size: 1.5rem;
line-height: 1.2;
}
.main-content {
padding: 1.5rem;
}
.article-title {
font-size: 2.5rem;
line-height: 1.3;
margin-bottom: 1rem;
}
.article-section h2 {
font-size: 1.8rem;
line-height: 1.4;
margin-bottom: 1.5rem;
margin-top: 2.5rem;
}
.article-section p {
font-size: 1.15rem;
line-height: 1.8;
text-align: left;
hyphens: none;
margin-bottom: 1.5rem;
}
.article-section a {
font-size: 1.05rem;
line-height: 1.6;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.article-section ul,
.article-section ol {
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 1.5rem;
padding-left: 1.5rem;
}
.article-section li {
margin-bottom: 0.5rem;
}
.article-section strong {
font-weight: 600;
color: var(--text-white);
}
.sidebar-widget {
padding: 1.5rem;
}
.article-hero {
padding: 2rem 0;
}
.article-content {
padding: 2rem 0;
}
}
@media (max-width: 480px) {
.pricing-table {
padding: 1rem;
}
.main-content {
padding: 1rem;
}
.article-title {
font-size: 2rem;
line-height: 1.3;
margin-bottom: 1rem;
}
.article-section h2 {
font-size: 1.5rem;
line-height: 1.4;
margin-bottom: 1.25rem;
margin-top: 2rem;
}
.article-section p {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 1.25rem;
}
.article-section a {
font-size: 1rem;
line-height: 1.6;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.article-section ul,
.article-section ol {
font-size: 1rem;
line-height: 1.7;
margin-bottom: 1.25rem;
padding-left: 1.5rem;
}
.article-section li {
margin-bottom: 0.5rem;
}
.article-section strong {
font-weight: 600;
color: var(--text-white);
}
.article-section blockquote {
font-size: 1rem;
line-height: 1.6;
padding: 1rem 1.25rem;
margin: 1.5rem 0;
border-left: 4px solid var(--accent-red);
background: rgba(255, 26, 26, 0.1);
}
.article-section code {
font-size: 0.9rem;
padding: 0.25rem 0.5rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
}
.article-section pre {
font-size: 0.9rem;
line-height: 1.5;
padding: 1rem;
margin: 1.25rem 0;
overflow-x: auto;
}
.sidebar-widget {
padding: 1rem;
}
.specs-list li {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.article-hero {
padding: 1.5rem 0;
}
.article-content {
padding: 1.5rem 0;
}
}
/* Artículo destacado */
.post-card.featured {
grid-column: 1 / -1;
background: linear-gradient(135deg, var(--card-bg) 0%, var(--secondary-bg) 100%);
border: 2px solid var(--accent-red);
position: relative;
overflow: hidden;
}
.post-card.featured::before {
content: 'DESTACADO';
position: absolute;
top: 1rem;
right: 1rem;
background: var(--accent-red);
color: var(--text-white);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
z-index: 2;
}
.post-card.featured .post-content {
padding: 2rem;
}
.post-card.featured h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.post-card.featured p {
font-size: 1.1rem;
line-height: 1.7;
}
.post-card.featured .read-more {
font-size: 1rem;
font-weight: 600;
}
@media (max-width: 768px) {
.post-card.featured h3 {
font-size: 1.5rem;
}
.post-card.featured p {
font-size: 1rem;
}
.post-card.featured::before {
top: 0.5rem;
right: 0.5rem;
padding: 0.25rem 0.75rem;
font-size: 0.7rem;
}
}
/* Sidebar */
.article-sidebar {
position: sticky;
top: 100px;
max-height: calc(100vh - 120px);
overflow-y: auto;
padding-right: 10px;
}
.article-sidebar::-webkit-scrollbar {
width: 6px;
}
.article-sidebar::-webkit-scrollbar-track {
background: var(--secondary-bg);
border-radius: 3px;
}
.article-sidebar::-webkit-scrollbar-thumb {
background: var(--accent-red);
border-radius: 3px;
}
.article-sidebar::-webkit-scrollbar-thumb:hover {
background: var(--accent-red-hover);
}
.sidebar-widget:last-child {
margin-bottom: 0;
}
.specs-list {
list-style: none;
padding: 0;
}
.specs-list li:last-child {
border-bottom: none;
}
/* Pros y Contras */
.pros-cons {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.pros ul,
.cons ul {
list-style: none;
padding: 0;
}
/* Artículos relacionados mejorados */
.related-articles {
display: flex;
flex-direction: column;
gap: 1rem;
}
.related-article {
display: flex;
gap: 1rem;
padding: 1rem;
background: var(--card-bg);
border-radius: calc(var(--border-radius) - 4px);
border: 1px solid var(--border-dark);
transition: var(--transition);
text-decoration: none;
color: inherit;
}
.related-article:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 0, 0, 0.15);
border-color: var(--accent-red);
}
.related-image {
flex-shrink: 0;
border-radius: calc(var(--border-radius) - 6px);
overflow: hidden;
transition: var(--transition);
width: 80px !important;
height: 60px !important;
display: flex !important;
align-items: center;
justify-content: center;
background: var(--secondary-bg);
position: relative;
min-width: 80px;
min-height: 60px;
}
.related-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: calc(var(--border-radius) - 6px);
transition: var(--transition);
display: block;
max-width: 100%;
max-height: 100%;
}
.related-image:hover {
transform: scale(1.05);
}
.related-image:hover img {
transform: scale(1.1);
}
/* Asegurar que las imágenes se muestren correctamente */
.related-image img {
min-width: 100%;
min-height: 100%;
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Fallback para imágenes que no cargan */
.related-image img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
position: relative;
z-index: 10;
}
/* Debug: Forzar visibilidad de imágenes relacionadas */
.related-image img {
opacity: 1 !important;
visibility: visible !important;
z-index: 1;
}
/* Asegurar que las imágenes se carguen correctamente */
.related-image {
background-image: none !important;
}
/* Forzar recarga y visualización de imágenes */
.related-image img {
animation: forceLoad 0.1s ease-in-out;
}
@keyframes forceLoad {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Asegurar que las imágenes tengan prioridad */
.related-image img {
position: relative;
z-index: 10;
}
.related-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.related-content h4 {
font-size: 1rem;
font-weight: 600;
color: var(--text-white);
margin: 0 0 0.5rem 0;
line-height: 1.3;
}
.related-content h4 a {
color: var(--text-white);
text-decoration: none;
transition: var(--transition);
}
.related-content h4 a:hover {
color: var(--accent-red);
}
.related-content p {
font-size: 0.875rem;
color: var(--text-light-gray);
margin: 0;
line-height: 1.4;
}
/* SVG de artículos relacionados */
.related-image svg {
display: block;
border-radius: calc(var(--border-radius) - 6px);
}
/* Estado vacío para cuando no hay artículos relacionados */
.no-related-articles {
text-align: center;
padding: 2rem 1rem;
color: var(--text-light-gray);
}
.no-related-articles i {
font-size: 2rem;
margin-bottom: 1rem;
opacity: 0.5;
}
.no-related-articles p {
font-size: 0.9rem;
margin: 0;
}
/* Estilos para recomendaciones de sidebar */
.recommended-articles-sidebar {
display: block;
}
.recommended-articles-list {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
/* Usar el mismo diseño que las tarjetas del footer */
.recommended-sidebar-card {
background: var(--card-bg);
border-radius: var(--border-radius);
overflow: hidden;
transition: var(--transition);
border: 1px solid var(--border-dark);
position: relative;
cursor: pointer;
text-decoration: none;
color: inherit;
}
.recommended-sidebar-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
border-color: var(--accent-red);
text-decoration: none;
color: inherit;
}
.recommended-sidebar-image {
position: relative;
width: 100%;
height: 140px;
overflow: hidden;
}
.recommended-sidebar-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.recommended-sidebar-card:hover .recommended-sidebar-image img {
transform: scale(1.05);
}
.recommended-sidebar-content {
padding: 15px;
}
.recommended-sidebar-category {
display: inline-block;
background: var(--gradient-accent);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.recommended-sidebar-content h4 {
color: var(--text-white);
text-decoration: none;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.4;
display: block;
margin-bottom: 8px;
transition: var(--transition);
}
.recommended-sidebar-card:hover .recommended-sidebar-content h4 {
color: var(--accent-red);
}
.recommended-sidebar-content p {
color: var(--text-light-gray);
font-size: 0.85rem;
line-height: 1.5;
margin: 0;
}
/* Ocultar sidebar en móviles */
@media (max-width: 992px) {
.recommended-articles-sidebar {
display: none;
}
}
/* Responsive para artículos relacionados */
@media (max-width: 480px) {
.related-article {
padding: 0.75rem;
gap: 0.75rem;
}
.related-content h4 {
font-size: 0.9rem;
}
.related-content p {
font-size: 0.8rem;
}
}
/* CTA del artículo */
.article-cta {
background: linear-gradient(135deg, #457b9d 0%, #1d3557 100%);
padding: 2rem;
border-radius: var(--border-radius);
text-align: center;
margin-top: 3rem;
}
.article-cta h3 {
color: var(--text-white);
font-size: 1.5rem;
margin-bottom: 1rem;
}
.article-cta p {
color: var(--text-white);
font-size: 1.1rem;
margin: 0;
opacity: 0.9;
}
/* Responsive para artículos */
@media (max-width: 992px) {
.content-wrapper {
grid-template-columns: 1fr;
gap: 2rem;
min-height: auto;
}
.article-sidebar {
position: static;
max-height: none;
overflow-y: visible;
padding-right: 0;
}
.article-title {
font-size: 2.5rem;
}
}
@media (max-width: 768px) {
.article-header {
padding: 5rem 0 0.25rem;
}
.article-title {
font-size: 2rem;
}
.article-subtitle {
font-size: 1.1rem;
}
.article-meta {
flex-direction: column;
gap: 1rem;
}
}
@media (max-width: 480px) {
.article-header {
padding: 4rem 0 0.1rem;
}
.article-title {
font-size: 1.75rem;
}
.related-article {
flex-direction: column;
text-align: center;
}
.related-image {
align-self: center;
width: 70px;
height: 50px;
}
.related-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
/* Análisis destacado */
.analysis-card.featured {
grid-column: 1 / -1;
background: linear-gradient(135deg, var(--card-bg) 0%, var(--secondary-bg) 100%);
border: 2px solid var(--accent-red);
position: relative;
overflow: hidden;
transform: scale(1.02);
flex-direction: column;
align-items: stretch;
}
.analysis-card.featured::before {
display: none;
}
.analysis-card.featured .analysis-icon {
background: var(--accent-red);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.analysis-card.featured h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
color: var(--text-white);
}
.analysis-card.featured p {
font-size: 1.1rem;
line-height: 1.7;
}
.analysis-card.featured .analysis-link {
font-size: 1rem;
font-weight: 600;
}
.analysis-meta {
display: flex;
gap: 1rem;
margin: 1rem 0;
font-size: 0.875rem;
color: var(--text-light-gray);
}
.analysis-meta span {
display: flex;
align-items: center;
gap: 0.5rem;
}
@media (max-width: 768px) {
.analysis-card.featured h3 {
font-size: 1.5rem;
}
.analysis-card.featured p {
font-size: 1rem;
}
.analysis-card.featured::before {
top: 0.5rem;
right: 0.5rem;
padding: 0.25rem 0.75rem;
font-size: 0.7rem;
}
.analysis-meta {
flex-direction: column;
gap: 0.5rem;
}
}
/* Sección de Comentarios */
.comments-section {
margin-top: 4rem;
padding-top: 3rem;
border-top: 2px solid var(--border-dark);
}
.comments-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.comments-header h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-white);
display: flex;
align-items: center;
gap: 0.75rem;
}
.comments-header h3 i {
color: var(--accent-red);
}
.comments-count {
background: var(--secondary-bg);
color: var(--text-light-gray);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
}
/* Formulario de comentario */
.comment-form-container {
background: var(--secondary-bg);
padding: 2rem;
border-radius: var(--border-radius);
margin-bottom: 2rem;
border: 1px solid var(--border-dark);
}
.comment-form {
display: grid;
gap: 1.5rem;
}
.comment-form .form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.comment-form label {
font-weight: 600;
color: var(--text-white);
font-size: 0.9rem;
}
.comment-form input,
.comment-form textarea {
padding: 0.875rem 1rem;
border: 2px solid var(--border-dark);
border-radius: calc(var(--border-radius) - 4px);
background: var(--card-bg);
color: var(--text-white);
font-size: 1rem;
transition: var(--transition);
}
.comment-form input:focus,
.comment-form textarea:focus {
outline: none;
border-color: var(--accent-red);
box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);
}
.comment-form textarea {
resize: vertical;
min-height: 120px;
font-family: inherit;
}
/* Checkbox personalizado */
.checkbox-label {
display: flex;
align-items: center;
gap: 0.75rem;
cursor: pointer;
font-size: 0.9rem;
color: var(--text-gray);
}
.checkbox-label input[type="checkbox"] {
display: none;
}
.checkmark {
width: 20px;
height: 20px;
border: 2px solid var(--border-dark);
border-radius: 4px;
background: var(--card-bg);
position: relative;
transition: var(--transition);
}
.checkbox-label input[type="checkbox"]:checked + .checkmark {
background: var(--accent-red);
border-color: var(--accent-red);
}
.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--text-white);
font-size: 0.75rem;
font-weight: bold;
}
/* Botón de envío */
.comment-submit {
background: var(--gradient-blue);
color: var(--text-white);
border: none;
padding: 1rem 2rem;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
width: fit-content;
box-shadow: var(--shadow-blue);
backdrop-filter: blur(10px);
border: 1px solid rgba(59, 130, 246, 0.2);
}
.comment-submit:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-blue-hover);
background: var(--gradient-blue);
border-color: rgba(59, 130, 246, 0.4);
}
.comment-submit:active {
transform: translateY(0);
}
/* Lista de comentarios */
.comments-list {
margin-bottom: 2rem;
}
.no-comments {
text-align: center;
padding: 3rem 2rem;
color: var(--text-light-gray);
}
.no-comments i {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.5;
}
.no-comments p {
font-size: 1.1rem;
margin: 0;
}
/* Ordenar comentarios */
.comments-sort {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 0;
border-top: 1px solid var(--border-dark);
}
.comments-sort label {
font-weight: 600;
color: var(--text-white);
font-size: 0.9rem;
}
.comments-sort select {
background: var(--card-bg);
border: 2px solid var(--border-dark);
border-radius: calc(var(--border-radius) - 4px);
color: var(--text-white);
padding: 0.5rem 1rem;
font-size: 0.9rem;
cursor: pointer;
transition: var(--transition);
}
.comments-sort select:focus {
outline: none;
border-color: var(--accent-red);
}
/* Comentarios individuales (para cuando se agreguen) */
.comment {
background: var(--card-bg);
padding: 1.5rem;
border-radius: var(--border-radius);
margin-bottom: 1.5rem;
border: 1px solid var(--border-dark);
}
.comment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.comment-author {
font-weight: 600;
color: var(--text-white);
font-size: 1rem;
}
.comment-date {
color: var(--text-light-gray);
font-size: 0.875rem;
}
.comment-content {
color: var(--text-gray);
line-height: 1.6;
margin-bottom: 1rem;
}
.comment-actions {
display: flex;
gap: 1rem;
}
.comment-action {
background: none;
border: none;
color: var(--text-light-gray);
font-size: 0.875rem;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 0.5rem;
}
.comment-action:hover {
color: var(--accent-red);
}
/* Responsive para comentarios */
@media (max-width: 768px) {
.comments-header {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.comment-form-container {
padding: 1.5rem;
}
.comment-form {
gap: 1rem;
}
.comment-submit {
width: 100%;
}
.comments-sort {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.comments-sort select {
width: 100%;
}
}
@media (max-width: 480px) {
.comment-form-container {
padding: 1rem;
}
.comment-form input,
.comment-form textarea {
padding: 0.75rem;
}
.comment-submit {
padding: 0.875rem 1.5rem;
font-size: 0.9rem;
}
}
/* Logo Image */
.logo-img {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
transition: var(--transition);
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
width: 36px !important;
height: 36px !important;
display: block;
}
.logo:hover .logo-img {
transform: scale(1.05);
filter: drop-shadow(0 4px 8px rgba(230, 57, 70, 0.5));
animation: engineRev 0.3s ease-in-out;
}
/* Elementos decorativos de canal de autos */
.speed-indicator {
position: absolute;
top: 20px;
right: 20px;
width: 60px;
height: 60px;
border: 3px solid var(--accent-red);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 700;
color: var(--accent-red);
background: rgba(255, 26, 26, 0.15);
animation: glowPulse 2s ease-in-out infinite;
}
.speed-indicator::before {
content: 'KM/H';
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
font-size: 0.6rem;
color: var(--text-light-gray);
}
/* Efecto de neón en elementos importantes */
.neon-glow {
box-shadow:
0 0 5px var(--accent-red),
0 0 10px var(--accent-red),
0 0 15px var(--accent-red),
0 0 20px rgba(255, 26, 26, 0.3);
}
/* Efecto de partículas de motor */
.engine-particles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.engine-particle {
position: absolute;
width: 2px;
height: 2px;
background: var(--accent-gold);
border-radius: 50%;
animation: float 3s ease-in-out infinite;
box-shadow: 0 0 6px var(--accent-gold), 0 0 12px rgba(255, 255, 255, 0.3);
}
@keyframes float {
0%, 100% {
transform: translateY(0) scale(1);
opacity: 0;
}
50% {
transform: translateY(-20px) scale(1.5);
opacity: 1;
}
}
/* Alternar colores en algunos elementos */
.analysis-icon {
background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-hover) 100%);
}
.analysis-card:nth-child(even) .analysis-icon {
background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-hover) 100%);
}
/* Botones alternados */
.cta-button {
background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-hover) 100%);
}
.newsletter-form button {
background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-hover) 100%);
}
/* Enlaces sociales alternados */
.social-links a:nth-child(odd) {
background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-hover) 100%);
}
.social-links a:nth-child(even) {
background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-hover) 100%);
}
/* Alternar colores en elementos de contacto */
.contact-item:nth-child(odd) i {
background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-hover) 100%);
}
.contact-item:nth-child(even) i {
background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-hover) 100%);
}
/* Alternar colores en elementos del equipo */
.team-member:nth-child(odd) .member-avatar {
background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-hover) 100%);
}
.team-member:nth-child(even) .member-avatar {
background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-hover) 100%);
}
/* Alternar colores en elementos de artículos */
.article-section h2::after {
background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-blue) 100%);
}
.sidebar-widget h3::after {
background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-red) 100%);
}
/* Alternar colores en elementos de comentarios */
.comments-header h3 i {
color: var(--accent-red);
}
.comment-submit {
background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-hover) 100%);
}
.comment-submit:hover {
box-shadow: 0 8px 25px rgba(0, 136, 204, 0.3);
}
/* Agregar sutil gradiente de fondo */
.pricing-table::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 0, 0, 0.02) 0%,
rgba(0, 170, 255, 0.02) 50%,
rgba(255, 0, 0, 0.02) 100%);
border-radius: var(--border-radius);
pointer-events: none;
}
/* Efectos modernos adicionales */
.pricing-item::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.02) 0%,
transparent 50%,
rgba(255, 255, 255, 0.02) 100%);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.pricing-item:hover::after {
opacity: 1;
}
/* Efecto de partículas sutiles */
.pricing-table::after {
content: '';
position: absolute;
top: 20px;
right: 20px;
width: 60px;
height: 60px;
background: radial-gradient(circle, rgba(0, 170, 255, 0.1) 0%, transparent 70%);
border-radius: 50%;
animation: particleFloat 8s ease-in-out infinite;
}
@keyframes particleFloat {
0%, 100% {
transform: translateY(0) scale(1);
opacity: 0.3;
}
50% {
transform: translateY(-20px) scale(1.2);
opacity: 0.6;
}
}
/* Mejorar hover de elementos individuales */
.pricing-item:hover {
transform: translateY(-12px) scale(1.02);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Efecto de brillo en los bordes */
.pricing-item.recommended::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg,
transparent 30%,
rgba(0, 170, 255, 0.3) 50%,
transparent 70%);
border-radius: 22px;
z-index: -1;
animation: borderGlow 3s ease-in-out infinite;
}
@keyframes borderGlow {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.8;
}
}
/* ===== ESTILOS PARA LA PÁGINA PRINCIPAL MEJORADA ===== */
/* Artículo Destacado Principal */
.hero-article {
background: linear-gradient(135deg, var(--primary-bg) 0%, var(--secondary-bg) 100%);
padding: 120px 0 80px;
border-bottom: 1px solid var(--border-dark);
position: relative;
overflow: hidden;
margin-top: 0 !important;
}
.hero-article::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(255, 0, 0, 0.08) 0%,
rgba(0, 170, 255, 0.08) 50%,
rgba(255, 0, 0, 0.08) 100%);
pointer-events: none;
}
.featured-article {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
position: relative;
z-index: 2;
}
.featured-article .article-image {
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-dark);
transition: var(--transition);
}
.featured-article .article-image:hover {
transform: scale(1.02);
box-shadow: var(--shadow-hover);
}
.featured-article .article-image img {
width: 100%;
height: auto;
display: block;
}
.featured-article .article-category {
display: none;
}
.featured-article .article-content h1 {
font-size: 2.8rem;
margin-bottom: 1.5rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: -1px;
}
.featured-article .article-content h1 a {
color: var(--text-white);
text-decoration: none;
transition: var(--transition);
}
.featured-article .article-content h1 a:hover {
color: var(--accent-red);
}
.featured-article .article-excerpt {
font-size: 1.1rem;
color: var(--text-gray);
margin-bottom: 2rem;
line-height: 1.7;
}
.featured-article .article-meta {
display: flex;
gap: 2rem;
margin-bottom: 1.5rem;
color: var(--text-light-gray);
font-size: 0.9rem;
}
.featured-article .article-tags {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.featured-article .tag {
background: var(--hover-bg);
color: var(--text-gray);
padding: 6px 12px;
border-radius: 16px;
font-size: 0.8rem;
font-weight: 500;
border: 1px solid var(--border-dark);
transition: var(--transition);
}
.featured-article .tag:hover {
background: var(--gradient-accent);
color: var(--text-white);
border-color: var(--accent-red);
box-shadow: var(--shadow-red);
backdrop-filter: blur(10px);
border: 1px solid rgba(239, 68, 68, 0.2);
transform: translateY(-2px);
}
/* Encabezados de Sección */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-dark);
}
.section-header h2 {
font-size: 2.2rem;
font-weight: 800;
color: var(--text-white);
display: flex;
align-items: center;
gap: 0.75rem;
letter-spacing: -0.01em;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
position: relative;
}
.section-header h2 i {
color: var(--accent-red);
font-size: 1.8rem;
}
.view-all {
color: var(--accent-blue);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 0.5rem;
transition: var(--transition);
padding: 8px 16px;
border-radius: var(--border-radius);
border: 1px solid transparent;
}
.view-all:hover {
color: var(--text-white);
background: var(--accent-blue);
border-color: var(--accent-blue);
transform: translateX(4px);
}
/* Sección de Últimas Noticias */
.latest-news {
padding: 100px 0;
background: linear-gradient(135deg, var(--primary-bg) 0%, var(--secondary-bg) 100%);
position: relative;
overflow: hidden;
}
.latest-news::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 25% 25%, rgba(220, 38, 127, 0.05) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(34, 197, 94, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2.5rem;
margin-top: 3rem;
}
.news-card {
background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 255, 255, 0.02) 100%);
border-radius: 16px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
display: grid;
grid-template-columns: 1fr 2fr;
min-height: 280px;
position: relative;
backdrop-filter: blur(10px);
}
.news-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
border-color: var(--accent-red);
}
.news-card.featured {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 300px;
border: 2px solid var(--accent-red);
transform: scale(1.02);
box-shadow: 0 8px 32px rgba(255, 26, 26, 0.2);
position: relative;
overflow: hidden;
}
.news-card.featured::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-red) 0%, var(--accent-gold) 50%, var(--accent-blue) 100%);
z-index: 1;
}
/* Regla eliminada: .featured-badge */
.featured-score {
background: linear-gradient(135deg, var(--accent-gold) 0%, #ffd700 100%);
color: var(--text-dark);
padding: 4px 8px;
border-radius: 12px;
font-weight: 700;
box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
}
.analysis-highlights {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.highlight {
background: rgba(255, 255, 255, 0.1);
color: var(--text-light-gray);
padding: 4px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: var(--transition);
}
.highlight:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
.highlight i {
margin-right: 4px;
color: var(--accent-gold);
font-size: 0.7rem;
}
.news-card.featured .highlight i {
color: var(--accent-red);
}
.news-card .news-image {
position: relative;
height: 100%;
overflow: hidden;
}
.news-card .news-image img {
width: 100%;
height: 100%;
object-fit: contain;
transition: var(--transition);
}
.news-card:hover .news-image img {
transform: scale(1.1);
}
.news-card .news-placeholder {
width: 100%;
height: 100%;
background: var(--secondary-bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--text-light-gray);
}
.news-card .news-placeholder i {
font-size: 3rem;
margin-bottom: 0.5rem;
}
.news-card .news-category {
display: none;
}
.news-card .news-content {
padding: 1.5rem;
}
.news-card .news-meta {
margin-bottom: 1rem;
color: var(--text-light);
font-size: 0.85rem;
}
.news-card h3 {
margin-bottom: 0.75rem;
font-size: 1.25rem;
font-weight: 800;
line-height: 1.3;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
letter-spacing: -0.02em;
transition: all 0.3s ease;
position: relative;
}
.news-card h3 a {
color: white !important;
text-decoration: none;
transition: var(--transition);
}
.news-card h3 a:hover {
color: var(--accent-red);
text-shadow: 0 2px 8px rgba(220, 38, 127, 0.3);
transform: translateY(-1px);
}
.news-card p {
color: var(--text-gray);
line-height: 1.7;
font-size: 0.95rem;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-weight: 400;
letter-spacing: -0.01em;
}
/* Sección de Análisis Recientes */
.latest-analysis {
padding: 100px 0;
background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--primary-bg) 100%);
position: relative;
overflow: hidden;
}
.latest-analysis::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 75% 25%, rgba(34, 197, 94, 0.05) 0%, transparent 50%),
radial-gradient(circle at 25% 75%, rgba(220, 38, 127, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.analysis-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 2rem;
}
.analysis-card {
background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 255, 255, 0.02) 100%);
border-radius: 16px;
padding: 2rem;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
display: flex;
gap: 1.5rem;
align-items: flex-start;
position: relative;
backdrop-filter: blur(10px);
}
.analysis-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
border-color: var(--accent-blue);
}
.analysis-card.featured {
border-color: var(--accent-blue);
background: linear-gradient(135deg, var(--card-bg) 0%, rgba(0, 170, 255, 0.05) 100%);
}
.analysis-card .analysis-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
background: var(--accent-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-white);
font-size: 1.5rem;
}
.analysis-card.featured .analysis-icon {
background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-hover) 100%);
box-shadow: 0 8px 20px rgba(0, 170, 255, 0.3);
}
.analysis-card h3 {
margin-bottom: 0.75rem;
font-size: 1.3rem;
font-weight: 800;
line-height: 1.3;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
letter-spacing: -0.02em;
transition: all 0.3s ease;
position: relative;
}
.analysis-card h3 a {
color: var(--text-white);
text-decoration: none;
transition: var(--transition);
}
.analysis-card h3 a:hover {
color: var(--accent-blue);
text-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
transform: translateY(-1px);
}
.analysis-card p {
color: var(--text-gray);
line-height: 1.7;
margin-bottom: 1rem;
font-size: 0.95rem;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-weight: 400;
letter-spacing: -0.01em;
}
.analysis-card .analysis-meta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
color: var(--text-light-gray);
font-size: 0.85rem;
}
.analysis-card .analysis-score {
background: var(--accent-red);
color: var(--text-white);
padding: 4px 8px;
border-radius: 8px;
font-weight: 600;
}
/* Sección de Marcas Populares */
.popular-brands {
padding: 80px 0;
background: var(--primary-bg);
}
.popular-brands h2 {
text-align: center;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
color: var(--text-white);
}
.brands-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.brand-card {
background: var(--card-bg);
border-radius: var(--border-radius);
padding: 2rem 1.5rem;
text-align: center;
transition: var(--transition);
border: 1px solid var(--border-dark);
box-shadow: var(--shadow-dark);
}
.brand-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-hover);
border-color: var(--accent-red);
}
.brand-card .brand-icon {
width: 80px;
height: 80px;
background: transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: var(--text-white);
font-size: 2rem;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.brand-card .brand-icon .brand-logo {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
transition: transform 0.3s ease;
}
.brand-card:hover .brand-icon .brand-logo {
transform: scale(1.1);
}
.brand-card h3 {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-white);
}
.brand-card p {
color: var(--text-light-gray);
font-size: 0.9rem;
}
/* Responsive Design para las nuevas secciones */
@media (max-width: 768px) {
.featured-article {
grid-template-columns: 1fr;
gap: 2rem;
}
.featured-article .article-content h1 {
font-size: 2.2rem;
line-height: 1.3;
margin-bottom: 1rem;
}
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.section-header h2 {
font-size: 2rem;
line-height: 1.3;
margin-bottom: 1rem;
}
.news-grid,
.analysis-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.news-card {
padding: 1.5rem;
}
.news-card h3 {
font-size: 1.25rem;
line-height: 1.4;
margin-bottom: 0.75rem;
}
.news-card p {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 1rem;
}
.analysis-card {
flex-direction: column;
text-align: center;
padding: 1.5rem;
}
.analysis-card h3 {
font-size: 1.25rem;
line-height: 1.4;
margin-bottom: 0.75rem;
}
.analysis-card p {
font-size: 1rem;
line-height: 1.7;
margin-bottom: 1rem;
}
.brands-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.hero-article {
padding: 100px 0 60px;
}
.latest-news,
.latest-analysis,
.popular-brands {
padding: 60px 0;
}
}
@media (max-width: 480px) {
.featured-article .article-content h1 {
font-size: 1.8rem;
line-height: 1.3;
margin-bottom: 1rem;
}
.section-header h2 {
font-size: 1.8rem;
line-height: 1.3;
margin-bottom: 1rem;
}
.popular-brands h2 {
font-size: 2rem;
line-height: 1.3;
margin-bottom: 1.5rem;
}
.news-card {
padding: 1.25rem;
}
.news-card h3 {
font-size: 1.2rem;
line-height: 1.4;
margin-bottom: 0.75rem;
}
.news-card p {
font-size: 1.05rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.analysis-card {
padding: 1.25rem;
}
.analysis-card h3 {
font-size: 1.2rem;
line-height: 1.4;
margin-bottom: 0.75rem;
}
.analysis-card p {
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.news-card .news-content {
padding: 1.25rem;
}
}
/* Estilos para la página de Términos y Condiciones */
.terms-section {
padding: 4rem 0;
background: var(--primary-bg);
position: relative;
}
.terms-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 100%);
pointer-events: none;
}
.terms-content {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.terms-intro {
background: var(--card-bg);
padding: 2rem;
border-radius: var(--border-radius);
margin-bottom: 2rem;
border: 1px solid var(--border-dark);
box-shadow: var(--shadow-dark);
}
.terms-intro h2 {
color: var(--accent-red);
font-size: 1.8rem;
margin-bottom: 1rem;
font-weight: 700;
}
.terms-intro p {
color: var(--text-gray);
line-height: 1.6;
font-size: 1rem;
}
.terms-section-item {
background: var(--card-bg);
padding: 2rem;
border-radius: var(--border-radius);
margin-bottom: 1.5rem;
border: 1px solid var(--border-dark);
box-shadow: var(--shadow-dark);
transition: var(--transition);
}
.terms-section-item:hover {
border-color: var(--accent-red);
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.terms-section-item h3 {
color: var(--text-white);
font-size: 1.4rem;
margin-bottom: 1rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
}
.terms-section-item h3 i {
color: var(--accent-red);
font-size: 1.2rem;
}
.terms-section-item p {
color: var(--text-gray);
line-height: 1.6;
margin-bottom: 1rem;
font-size: 0.95rem;
}
.terms-section-item ul {
margin: 1rem 0;
padding-left: 1.5rem;
}
.terms-section-item li {
color: var(--text-light-gray);
line-height: 1.6;
margin-bottom: 0.5rem;
font-size: 0.95rem;
}
.terms-section-item strong {
color: var(--text-white);
font-weight: 600;
}
.contact-info-terms {
background: var(--secondary-bg);
padding: 1.5rem;
border-radius: calc(var(--border-radius) - 4px);
margin-top: 1rem;
}
.contact-info-terms p {
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.contact-info-terms i {
color: var(--accent-red);
width: 20px;
}
.terms-footer {
margin-top: 3rem;
}
.terms-notice {
background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-hover) 100%);
padding: 1.5rem;
border-radius: var(--border-radius);
display: flex;
align-items: center;
gap: 1rem;
box-shadow: var(--shadow-dark);
}
.terms-notice i {
color: var(--text-white);
font-size: 1.5rem;
flex-shrink: 0;
}
.terms-notice p {
color: var(--text-white);
margin: 0;
font-weight: 500;
line-height: 1.5;
}
/* Responsive para términos y condiciones */
@media (max-width: 768px) {
.terms-content {
max-width: 100%;
}
.terms-section-item {
padding: 1.5rem;
}
.terms-section-item h3 {
font-size: 1.2rem;
}
.terms-notice {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
}
@media (max-width: 480px) {
.terms-section {
padding: 2rem 0;
}
.terms-section-item {
padding: 1rem;
}
.terms-section-item h3 {
font-size: 1.1rem;
}
.contact-info-terms {
padding: 1rem;
}
}
/* Responsive para noticias */
@media (max-width: 768px) {
.news-card {
grid-template-columns: 1fr;
min-height: auto;
}
.news-card.featured {
grid-template-columns: 1fr;
min-height: auto;
transform: none;
}
.news-card.featured .news-content {
padding: 1.5rem;
}
/* Regla eliminada: .featured-badge */
.analysis-highlights {
gap: 6px;
margin-top: 10px;
}
.highlight {
font-size: 0.7rem;
padding: 3px 6px;
}
.news-card .news-image {
height: 200px;
}
.news-card h2 {
font-size: 1.3rem;
}
.news-card h3 {
font-size: 1.2rem;
}
}
.latest-analysis .analysis-card:not(.featured) .analysis-image {
flex: 0 0 120px;
height: 120px;
margin-bottom: 0;
}
/* Estilos adicionales para las páginas de análisis y noticias */
.news-card .news-category {
display: block !important;
position: absolute;
top: 1rem;
left: 1rem;
background: var(--accent-red);
color: var(--text-white);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: bold;
text-transform: uppercase;
z-index: 2;
}
.news-card .news-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.news-card .tag {
background: var(--secondary-bg);
color: var(--text-gray);
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.8rem;
transition: var(--transition);
border: 1px solid var(--border-dark);
}
.news-card .tag:hover {
background: var(--gradient-accent);
color: var(--text-white);
border-color: var(--accent-red);
box-shadow: var(--shadow-red);
backdrop-filter: blur(10px);
border: 1px solid rgba(239, 68, 68, 0.2);
transform: translateY(-2px);
}
.news-card .analysis-score {
background: var(--accent-blue);
color: var(--text-white);
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.3rem;
}
.news-card .analysis-score i {
color: var(--accent-gold);
}
/* Ajustes para el grid de noticias en páginas específicas */
.latest-news .news-grid,
.latest-analysis .news-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin: 2rem 0;
}
/* Responsive para las páginas de análisis y noticias */
@media (max-width: 768px) {
.latest-news .news-grid,
.latest-analysis .news-grid {
gap: 1.5rem;
}
.news-card .news-category {
font-size: 0.7rem;
padding: 0.4rem 0.8rem;
}
.news-card .tag {
font-size: 0.7rem;
padding: 0.25rem 0.6rem;
}
.news-card .analysis-score {
font-size: 0.7rem;
padding: 0.25rem 0.6rem;
}
}
/* Responsive para el índice de navegación */
@media (max-width: 768px) {
.index-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.index-item {
padding: 1rem;
font-size: 0.9rem;
}
.index-wrapper h3 {
font-size: 1.4rem;
margin-bottom: 1.5rem;
}
.article-index {
padding: 2rem 0;
}
.specs-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.spec-item-no-box {
width: auto;
min-width: 160px;
padding: 0.75rem 0.5rem;
}
.spec-item-no-box .spec-icon {
font-size: 1.4rem;
}
.spec-item-no-box .spec-label {
font-size: 0.7rem;
}
.spec-item-no-box .spec-value {
font-size: 1rem;
}
.spec-card {
padding: 1.25rem;
}
.spec-icon {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
.spec-value {
font-size: 1.1rem;
}
.spec-value.price {
font-size: 1.3rem;
}
.tech-specs-highlight {
padding: 2rem 0;
}
.tech-specs-highlight h3 {
font-size: 1.3rem;
margin-bottom: 1.5rem;
}
}
@media (max-width: 480px) {
.index-grid {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.index-item {
padding: 0.875rem 1rem;
font-size: 0.85rem;
}
.index-item i {
font-size: 0.9rem;
width: 18px;
}
.specs-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.spec-item-no-box {
width: auto;
min-width: 140px;
padding: 0.5rem 0.25rem;
}
.spec-item-no-box .spec-icon {
font-size: 1.2rem;
}
.spec-item-no-box .spec-label {
font-size: 0.65rem;
}
.spec-item-no-box .spec-value {
font-size: 0.9rem;
}
.spec-card {
padding: 1rem;
}
.spec-icon {
font-size: 1.3rem;
margin-bottom: 0.5rem;
}
.spec-label {
font-size: 0.7rem;
}
.spec-value {
font-size: 1rem;
}
.spec-value.price {
font-size: 1.2rem;
}
.tech-specs-highlight {
padding: 1.5rem 0;
}
.tech-specs-highlight h3 {
font-size: 1.2rem;
margin-bottom: 1.25rem;
}
.latest-news .news-grid,
.latest-analysis .news-grid {
gap: 1rem;
}
.news-card .news-tags {
gap: 0.3rem;
}
.news-card .tag {
font-size: 0.65rem;
padding: 0.2rem 0.5rem;
}
.contact-content-centered {
max-width: 100%;
padding: 0 0.5rem;
}
.contact-form {
padding: 1rem;
max-width: 100%;
}
.contact-form h3 {
font-size: 1rem;
margin-bottom: 0.875rem;
}
.form-group {
margin-bottom: 0.875rem;
position: relative;
}
.form-group:has(.field-error) {
margin-bottom: 1.25rem;
}
.form-group input,
.form-group textarea,
.form-group select {
padding: 0.625rem 0.875rem;
font-size: 0.875rem;
}
.contact-submit {
padding: 0.625rem 1rem;
font-size: 0.875rem;
min-height: 40px;
}
}
/* === BLOQUES FOOTER PARA MÓVIL === */
@media (max-width: 768px) {
.footer-content {
display: flex;
flex-direction: column;
gap: 2.5rem;
align-items: stretch;
text-align: initial;
}
.footer-block {
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
padding: 1.5rem;
margin-bottom: 0.5rem;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.footer-block::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent-red) 0%, var(--accent-blue) 100%);
}
.footer-block-title {
text-align: center;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1.2rem;
letter-spacing: 1.5px;
color: var(--text-white);
text-transform: uppercase;
position: relative;
padding-bottom: 0.5rem;
}
.footer-block-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: var(--accent-red);
border-radius: 1px;
}
.footer-block ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-block ul li {
margin-bottom: 0.8rem;
text-align: left;
transition: all 0.3s ease;
}
.footer-block ul li:last-child {
margin-bottom: 0;
}
.footer-block ul li a {
color: var(--text-gray);
text-decoration: none;
font-size: 1rem;
font-weight: 500;
padding: 0.5rem 0;
display: block;
transition: all 0.3s ease;
border-radius: 8px;
padding-left: 0.5rem;
}
.footer-block ul li a:hover {
color: var(--accent-red);
background: rgba(255,26,26,0.1);
transform: translateX(5px);
}
.footer-block .contact-info {
text-align: left;
margin-top: 0.5rem;
}
.footer-block .contact-info p {
display: flex;
align-items: center;
gap: 12px;
font-size: 1rem;
margin: 0;
padding: 0.5rem;
border-radius: 8px;
transition: all 0.3s ease;
}
.footer-block .contact-info p:hover {
background: rgba(255,26,26,0.1);
transform: translateX(5px);
}
.footer-block .contact-info i {
color: var(--accent-red);
font-size: 1.2rem;
width: 20px;
text-align: center;
}
.footer-block .social-links {
justify-content: center;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
gap: 1rem;
}
.footer-block .social-links a:not(.youtube-icon) {
background: linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-hover) 100%);
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 4px 15px rgba(255,26,26,0.3);
transition: all 0.3s ease;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
color: var(--text-white);
text-decoration: none;
position: relative;
overflow: hidden;
}
.footer-block .social-links a.youtube-icon {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
background: none !important;
border: none !important;
box-shadow: none !important;
transition: transform 0.3s ease;
overflow: hidden;
}
.footer-block .social-links a::before {
display: none;
}
.footer-block .social-links a:not(.youtube-icon):hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255,26,26,0.5);
}
.footer-block .social-links a.youtube-icon:hover {
transform: translateY(-2px) scale(1.05);
}
.footer-block .social-links a.youtube-icon img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: var(--border-radius) !important;
}
.footer-block .social-links a i {
font-size: 1.2rem;
color: var(--text-white);
position: relative;
z-index: 2;
}
.footer-block .logo {
text-align: center;
margin-bottom: 1rem;
}
.footer-block .logo a {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--text-white);
text-decoration: none;
font-size: 1.8rem;
font-weight: 800;
letter-spacing: -1px;
transition: all 0.3s ease;
}
.footer-block .logo a:hover {
color: var(--accent-red);
transform: scale(1.05);
}
.footer-block p {
text-align: center;
color: var(--text-gray);
font-size: 0.95rem;
margin: 0;
line-height: 1.6;
}
}
/* Desktop: mantener el diseño original */
@media (min-width: 769px) {
.footer-block {
background: none;
box-shadow: none;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
}
.footer-block::before {
display: none;
}
.footer-block-title {
text-align: left;
margin-bottom: 1.2rem;
font-size: 1.2rem;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.footer-block-title::after {
display: none;
}
.footer-block ul li a {
color: var(--text-gray);
text-decoration: none;
transition: var(--transition);
font-size: 1rem;
font-weight: 400;
padding: 4px 0;
display: inline-block;
}
.footer-block ul li a:hover {
color: var(--accent-red);
transform: translateX(5px);
}
.footer-block .contact-info p {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 1rem;
font-size: 1rem;
color: var(--text-gray);
font-weight: 400;
}
.footer-block .contact-info i {
color: var(--accent-red);
width: 20px;
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
.featured-article .article-image {
margin-bottom: 0rem !important;
}
.featured-article .article-content {
margin-top: 0 !important;
padding-top: 0 !important;
}
.featured-article .article-content h1 {
margin-top: 0 !important;
}
}
.hero-article > .container {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* === OPTIMIZACIÓN DE ESPACIOS EN BLANCO MOBILE === */
.hero-article {
margin-bottom: 0.7rem !important;
}
.featured-article {
margin-bottom: 0.7rem !important;
padding-bottom: 0.5rem !important;
}
.featured-article .article-content {
padding: 0.7rem 0.5rem 0.5rem 0.5rem !important;
}
.latest-news {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
.section-header {
margin-bottom: 0.3rem !important;
}
.news-grid {
gap: 0.7rem !important;
}
.news-card {
margin-bottom: 0.7rem !important;
padding: 0.7rem 0.5rem !important;
}
@media (max-width: 480px) {
.container {
padding-left: 0.2rem !important;
padding-right: 0.2rem !important;
}
.featured-article .article-content {
padding: 0.5rem 0.2rem 0.3rem 0.2rem !important;
}
.news-card {
padding: 0.5rem 0.2rem !important;
}
}
/* === FIN OPTIMIZACIÓN DE ESPACIOS EN BLANCO === */
/* Reglas eliminadas para evitar interferencia con el logo de YouTube */
/* Estilos específicos para el logo de YouTube en el footer */
.footer-block .social-links a img {
transition: transform 0.3s ease, filter 0.3s ease;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.footer-block .social-links a:hover img {
transform: translateY(-3px) scale(1.05);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
/* Reglas específicas para PC - asegurar que el logo de YouTube se vea correctamente */
@media (min-width: 769px) {
.footer-block .social-links a:not(.youtube-icon) {
background: none !important;
border: none !important;
box-shadow: none !important;
color: transparent !important;
}
.footer-block .social-links a:not(.youtube-icon)::before {
display: none !important;
}
.footer-block .social-links a:not(.youtube-icon):hover {
background: none !important;
border: none !important;
box-shadow: none !important;
color: transparent !important;
transform: none !important;
}
.footer-block .social-links a img {
width: 36px !important;
height: 36px !important;
display: block !important;
filter: none !important;
transition: transform 0.3s ease !important;
}
.footer-block .social-links a:hover img {
transform: translateY(-3px) scale(1.05) !important;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) !important;
}
}
/* Estilos específicos para el ícono de YouTube */
.social-links a.youtube-icon {
background: none !important;
border: none !important;
border-radius: 6px !important;
width: 45px !important;
height: 45px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: transform 0.3s ease !important;
overflow: hidden !important;
}
.social-links a.youtube-icon::before {
display: none !important;
}
.social-links a.youtube-icon:hover {
transform: translateY(-2px) scale(1.05) !important;
}
.social-links a.youtube-icon img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 6px !important;
transition: transform 0.3s ease !important;
}
/* Estilos profesionales para Pros y Contras */
.pros-cons-section {
margin: 3rem 0;
padding: 2rem 0;
background: linear-gradient(135deg, rgba(26, 31, 46, 0.8) 0%, rgba(15, 20, 25, 0.9) 100%);
border-radius: var(--border-radius);
border: 1px solid var(--border-dark);
position: relative;
overflow: hidden;
}
.pros-cons-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255, 0, 0, 0.05) 50%, transparent 70%);
pointer-events: none;
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
.pros-cons-header {
text-align: center;
margin-bottom: 2.5rem;
position: relative;
z-index: 2;
}
.pros-cons-header h3 {
font-size: 2.2rem;
font-weight: 700;
color: var(--text-white);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.pros-cons-header h3 i {
color: var(--accent-red);
font-size: 1.8rem;
}
.pros-cons-subtitle {
font-size: 1.1rem;
color: var(--text-light-gray);
font-weight: 400;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.pros-cons-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
position: relative;
z-index: 2;
}
.pros-card, .cons-card {
background: var(--card-bg);
border-radius: var(--border-radius);
padding: 2rem;
border: 1px solid var(--border-dark);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.pros-card::before, .cons-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-blue-hover) 100%);
transform: scaleX(0);
transition: var(--transition);
}
.cons-card::before {
background: linear-gradient(90deg, var(--accent-red) 0%, var(--accent-red-hover) 100%);
}
.pros-card:hover::before, .cons-card:hover::before {
transform: scaleX(1);
}
.pros-card:hover, .cons-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
border-color: var(--accent-blue);
}
.cons-card:hover {
border-color: var(--accent-red);
}
.pros-header, .cons-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-dark);
}
.pros-header i {
color: var(--accent-blue);
font-size: 1.5rem;
background: rgba(59, 130, 246, 0.1);
padding: 0.75rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.cons-header i {
color: var(--accent-red);
font-size: 1.5rem;
background: rgba(255, 0, 0, 0.1);
padding: 0.75rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.pros-header h4, .cons-header h4 {
font-size: 1.4rem;
font-weight: 600;
color: var(--text-white);
margin: 0;
}
.pros-list, .cons-list {
list-style: none;
padding: 0;
margin: 0;
}
.pros-list li, .cons-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: var(--transition);
}
.pros-list li:last-child, .cons-list li:last-child {
border-bottom: none;
}
.pros-list li:hover, .cons-list li:hover {
background: rgba(255, 255, 255, 0.02);
border-radius: 8px;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.pros-icon, .cons-icon {
flex-shrink: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: var(--transition);
}
.pros-icon {
background: rgba(59, 130, 246, 0.15);
color: var(--accent-blue);
}
.cons-icon {
background: rgba(255, 0, 0, 0.15);
color: var(--accent-red);
}
.pros-list li:hover .pros-icon {
background: rgba(59, 130, 246, 0.25);
transform: scale(1.1);
}
.cons-list li:hover .cons-icon {
background: rgba(255, 0, 0, 0.25);
transform: scale(1.1);
}
.pros-text, .cons-text {
flex: 1;
font-size: 1rem;
line-height: 1.6;
color: var(--text-gray);
font-weight: 400;
}
.pros-list li:hover .pros-text {
color: var(--text-white);
}
.cons-list li:hover .cons-text {
color: var(--text-white);
}
.pros-cons-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
position: relative;
z-index: 2;
}
/* Responsive para Pros y Contras */
@media (max-width: 768px) {
.pros-cons-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.pros-cons-header h3 {
font-size: 1.8rem;
flex-direction: column;
gap: 0.5rem;
}
.pros-card, .cons-card {
padding: 1.5rem;
}
.pros-header, .cons-header {
flex-direction: column;
text-align: center;
gap: 0.75rem;
}
.pros-header h4, .cons-header h4 {
font-size: 1.2rem;
}
.pros-list li, .cons-list li {
flex-direction: column;
gap: 0.75rem;
text-align: center;
}
.pros-icon, .cons-icon {
align-self: center;
}
}
@media (max-width: 480px) {
.pros-cons-section {
margin: 2rem 0;
padding: 1.5rem 0;
}
.pros-cons-header h3 {
font-size: 1.5rem;
}
.pros-cons-subtitle {
font-size: 1rem;
}
.pros-card, .cons-card {
padding: 1rem;
}
.pros-list li, .cons-list li {
padding: 0.75rem 0;
}
.pros-text, .cons-text {
font-size: 0.95rem;
}
}