/* ===== VARIABLES Y RESET ===== */
*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}

:root{
 /* 60% - Color Dominante (Fondo/Base) */
 --primary:#0055A4; /* Azul oficial de CONTPAQi® */
 --primary-dark:#004483; /* Tono más oscuro derivado del principal */
 --bg-light:#F0F5FA;
 --white:#ffffff;
 
 /* 30% - Color Secundario (Elementos de Apoyo) */
 --secondary:#1e293b;
 --secondary-light:#475569;
 --text:#334155;
 --text-light:#64748b;
 
 /* 10% - Color de Acento (Puntos de Atención) */
 --accent:#e74c3c;
 --accent-light:#ff6b6b;
 --success:#10b981;
 --warning:#f59e0b;
 --error:#ef4444;
 
 /* Sombras y efectos */
 --shadow:0 10px 30px rgba(0,0,0,0.1);
 --shadow-hover:0 15px 40px rgba(0,0,0,0.15);
 --shadow-accent:0 4px 20px rgba(4, 107, 210, 0.3);
}

/* ===== ESTILOS GLOBALES ===== */
body{
 font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
 font-size:16px;
 line-height:1.65;
 color:var(--text);
 overflow-x:hidden;
}

/* ===== CLASES DE COLORES SEGÚN 60-30-10 ===== */
/* 60% - Colores Dominantes */
.bg-primary { background-color: var(--primary); }
.bg-primary-dark { background-color: var(--primary-dark); }
.bg-light { background-color: var(--bg-light); }
.text-primary { color: var(--primary); }

/* 30% - Colores Secundarios */
.bg-secondary { background-color: var(--secondary); }
.bg-secondary-light { background-color: var(--secondary-light); }
.text-secondary { color: var(--secondary); }
.text-secondary-light { color: var(--secondary-light); }

/* 10% - Colores de Acento */
.bg-accent { background-color: var(--accent); }
.bg-accent-light { background-color: var(--accent-light); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }

/* Botones con colores de acento */
.btn-accent {
 background: linear-gradient(135deg, var(--accent), var(--accent-light));
 color: white;
 border: none;
 padding: 12px 24px;
 border-radius: 8px;
 font-weight: 600;
 transition: all 0.3s ease;
 box-shadow: var(--shadow-accent);
 animation: pulse-accent 2.5s infinite;
}

.btn-accent:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
}

/* Estados de éxito, advertencia y error */
.alert-success {
 background: rgba(16, 185, 129, 0.1);
 border-left: 4px solid var(--success);
 color: var(--success);
 padding: 12px 16px;
 border-radius: 4px;
}

.alert-warning {
 background: rgba(245, 158, 11, 0.1);
 border-left: 4px solid var(--warning);
 color: var(--warning);
 padding: 12px 16px;
 border-radius: 4px;
}

.alert-error {
 background: rgba(239, 68, 68, 0.1);
 border-left: 4px solid var(--error);
 color: var(--error);
 padding: 12px 16px;
 border-radius: 4px;
}

.container{
 max-width:1200px;
 margin:0 auto;
 padding:0 20px;
}

/* ===== HEADER Y NAVEGACIÓN ===== */
header{
 background:rgba(255,255,255,0.98);
 -webkit-backdrop-filter:blur(10px);
 backdrop-filter:blur(10px);
 padding:20px 0;
 position:sticky;
 top:0;
 z-index:100;
 box-shadow:0 2px 20px rgba(0,0,0,0.08);
 transition:all 0.3s ease;
}

header.scrolled{
 padding:15px 0;
 box-shadow:0 4px 30px rgba(0,0,0,0.12);
}

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

.logo img{
 height:50px;
 transition:transform 0.3s ease;
}

.logo a{
 display:block;
}

.logo:hover img{
 transform:scale(1.05);
}

nav ul{
 display:flex;
 list-style:none;
 gap:35px;
}

nav li{
 position:relative;
}

nav a{
 color:var(--secondary);
 text-decoration:none;
 font-size:16px;
 font-weight:500;
 transition:all 0.3s;
 position:relative;
 padding:5px 0;
 display:flex;
 align-items:center;
 gap:5px;
}

nav a::after{
 content:'';
 position:absolute;
 bottom:0;
 left:0;
 width:0;
 height:2px;
 background:var(--primary);
 transition:width 0.3s ease;
}

nav a:hover::after{
 width:100%;
}

nav a:hover{
 color:var(--primary);
}

/* Dropdown */
.dropdown{
 position:relative;
}

.dropdown > a::before{
 content:'▼';
 font-size:10px;
 margin-left:5px;
 transition:transform 0.3s ease;
}

.dropdown:hover > a::before{
 transform:rotate(-180deg);
}

.dropdown-menu{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 background:rgba(255,255,255,0.98);
 -webkit-backdrop-filter:blur(10px);
 backdrop-filter:blur(10px);
 border-radius:8px;
 padding:10px 0;
 box-shadow:0 10px 30px rgba(0,0,0,0.15);
 min-width:200px;
 z-index:1000;
 margin-top:10px;
}

.dropdown:hover .dropdown-menu{
 display:block;
}

.dropdown-menu a{
 display:block;
 padding:12px 20px;
 color:var(--secondary);
 font-size:15px;
 transition:all 0.3s ease;
}

.dropdown-menu a::after{
 display:none;
}

.dropdown-menu a:hover{
 background:var(--bg-light);
 color:var(--primary);
 padding-left:25px;
}

.menu-toggle{
 display:none;
 background:none;
 border:none;
 font-size:28px;
 cursor:pointer;
 color:var(--primary);
}

/* ===== HERO SECTION ===== */
.hero{
 min-height:300px;
 display:flex;
 align-items:center;
 color:white;
 padding:80px 20px;
 position:relative;
 overflow:hidden;
}

/* LCP:Imagen de fondo optimizada con fetchpriority="high" */
.hero-bg-image{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 object-fit:cover;
 object-position:center;
 z-index:0;
}

/* Gradiente overlay sobre la imagen */
.hero::after{
 content:'';
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:linear-gradient(135deg,rgba(4,107,210,0.9),rgba(4,92,180,0.85));
 background:linear-gradient(135deg,rgba(4,107,210,0.8),rgba(4,92,180,0.75));
 z-index:1;
}

.hero::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:radial-gradient(circle at 20% 50%,rgba(255,255,255,0.1) 0%,transparent 50%);
 z-index:2;
}

.hero-content{
 max-width:900px;
 position:relative;
 z-index:3;
 text-align:center;
 margin:0 auto;
}

.hero h1{
 font-size:40px;
 margin-bottom:10px;
 font-weight:700;
 line-height:1.2;
 text-shadow:2px 2px 4px rgba(0,0,0,0.2);
}

.hero p{
 font-size:18px;
 margin-bottom:0;
 line-height:1.6;
 opacity:0.95;
}

/* --- Clases para Fondos de Hero Responsivos --- */
.hero-bg-comercial { background-image: url('../images/comercial.png'); }
.hero-bg-contabilidad { background-image: url('../images/contabilidad.png'); }
.hero-bg-nominas { background-image: url('../images/nominas.png'); }
.hero-bg-bancos { background-image: url('../images/servidores3.jpg'); }
.hero-bg-respaldos { background-image: url('../images/servidores2.jpg'); }
.hero-bg-xml { background-image: url('../images/servidores3.jpg'); }
.hero-bg-start-pro { background-image: url('../images/servidores1.jpg'); }
.hero-bg-factura { background-image: url('../images/comercial.png'); }
.hero-bg-evalua { background-image: url('../images/servidores1.jpg'); }
.hero-bg-escritorio-virtual { background-image: url('../images/servidores2.jpg'); }
.hero-bg-analiza { background-image: url('../images/x4-1024x730.png'); }
.hero-bg-colabora { background-image: url('../images/img1-1.png'); }
.hero-bg-personia { background-image: url('../images/nominas.png'); }
.hero-bg-cobra { background-image: url('../images/cobra-bg.jpg'); }
.hero-bg-vende { background-image: url('../images/comercial.png'); }
.hero-bg-contabiliza { background-image: url('../images/contabilidad.png'); }

@media (max-width: 768px) {
    /* Aquí podrías cargar imágenes más pequeñas para móvil si las creas */
    /* .hero-bg-bancos { background-image: url('../images/servidores3-mobile.jpg'); } */
}

/* ===== BOTONES (UNIFICADOS) ===== */
.btn{
 display:inline-block;
 background:var(--white);
 color:var(--primary);
 padding:16px 40px;
 text-decoration:none;
 border-radius:50px;
 font-weight:600;
 transition:all 0.3s ease;
 box-shadow:0 5px 20px rgba(255,255,255,0.3);
 border:none;
 cursor:pointer;
}

.btn:hover{
 transform:translateY(-3px);
 box-shadow:0 8px 30px rgba(255,255,255,0.4);
}

.btn-primary{
 background:var(--primary);
 color:var(--white);
}

.btn-primary:hover{
 background:var(--primary-dark);
 box-shadow:0 8px 30px rgba(4,107,210,0.4);
}

.btn-form{
 background:var(--primary);
 color:var(--white);
 padding:14px 30px;
 border:none;
 border-radius:6px;
 font-size:18px;
 font-weight:600;
 cursor:pointer;
 transition:background 0.3s,transform 0.3s;
 width:100%;
 box-shadow:0 5px 15px rgba(4,107,210,0.3);
}

.btn-form:hover{
 background:var(--primary-dark);
 transform:translateY(-2px);
}

.btn-cta{
 display:inline-block;
 background:var(--primary);
 color:var(--white);
 padding:16px 40px;
 text-decoration:none;
 border-radius:50px;
 font-weight:600;
 transition:all 0.3s ease;
 box-shadow:0 5px 20px rgba(4,107,210,0.4);
 animation: pulse-primary 2.5s infinite;
}

.btn-cta:hover{
 background:var(--primary-dark);
 transform:translateY(-2px);
 box-shadow:0 8px 30px rgba(4,107,210,0.5);
}

/* ===== SECCIÓN DE PRODUCTOS ===== */
.products{
 padding:100px 20px;
 text-align:center;
 background:linear-gradient(180deg,var(--white) 0%,var(--bg-light) 100%);
}

.products h2{
 font-size:38px;
 margin-bottom:20px;
 color:var(--secondary);
 font-weight:700;
}

.products > p{
 color:var(--text-light);
 font-size:18px;
 margin-bottom:60px;
}

.products-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
 gap:30px;
 margin-top:50px;
}

.product-card{
 padding:40px 30px;
 background:var(--white);
 border-radius:16px;
 box-shadow:var(--shadow);
 transition:all 0.4s ease;
 border:1px solid transparent;
}

.product-card:hover{
 transform:translateY(-10px);
 box-shadow:var(--shadow-hover);
 border-color:var(--primary);
}

.product-icon{
 width:70px;
 height:70px;
 background:linear-gradient(135deg,var(--primary),var(--primary-dark));
 border-radius:16px;
 margin:0 auto 25px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:32px;
 color:white;
}

.product-card h3{
 font-size:22px;
 margin:20px 0 15px;
 color:var(--secondary);
 font-weight:600;
}

.product-card p{
 color:var(--text-light);
 line-height:1.6;
}

.product-detail-card{
 display:flex;
 align-items:center;
 background:var(--white);
 border-radius:20px;
 box-shadow:var(--shadow);
 margin-bottom:50px;
 padding:40px;
 text-align:left;
 transition:transform 0.3s ease;
}

.product-detail-card:hover{
 transform:translateY(-5px);
}

.product-detail-card:nth-child(odd){
 flex-direction:row-reverse;
}

.product-detail-content{
 flex:1;
 padding:0 30px;
}

.product-detail-icon{
 width:90px;
 height:90px;
 background:var(--primary);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:40px;
 color:white;
 margin-bottom:20px;
}

.product-detail-content h3{
 font-size:28px;
 color:var(--primary);
 margin-bottom:15px;
}

.product-detail-content p{
 font-size:17px;
 margin-bottom:20px;
 color:var(--text);
}

.product-detail-image{
 flex:0 0 40%;
}

.product-detail-image img{
 width:100%;
 height:auto;
 border-radius:15px;
 box-shadow:0 5px 20px rgba(0,0,0,0.1);
}

/* ===== SECCIÓN ABOUT ===== */
.about{
 padding:100px 20px;
 background:var(--white);
}

.about-grid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:80px;
 align-items:center;
 margin-bottom:100px;
}

.about-grid img{
 width:100%;
 border-radius:20px;
 box-shadow:var(--shadow);
 transition:transform 0.4s ease;
}

.about-grid img:hover{
 transform:scale(1.05);
}

.about h2{
 font-size:36px;
 margin-bottom:25px;
 color:var(--secondary);
 line-height:1.3;
 font-weight:700;
}

.about h4{
 color:var(--primary);
 margin-bottom:15px;
 font-size:16px;
 text-transform:uppercase;
 letter-spacing:1px;
 font-weight:600;
}

.about p{
 color:var(--text);
 line-height:1.8;
 margin-bottom:25px;
 font-size:17px;
}

/* ===== SECCIÓN STATS ===== */
.stats{
 background:var(--primary);
 color:white;
 padding:60px 20px;
 text-align:center;
}

.stats h2{
 font-size:38px;
 margin-bottom:40px;
 font-weight:700;
}

.stats-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
 gap:40px;
 max-width:1000px;
 margin:0 auto;
}

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

.stat-item .stat-icon{
 font-size:40px;
 margin-bottom:15px;
 display:block;
}

.stat-item h3{
 font-size:22px;
 font-weight:600;
 margin-bottom:10px;
}

.stat-item p{
 font-size:16px;
 opacity:0.9;
}

/* ===== SECCIÓN SERVICIOS ===== */
.services{
 padding:100px 20px;
 background:linear-gradient(180deg,var(--bg-light) 0%,var(--white) 100%);
}

.services h3{
 text-align:center;
 font-size:38px;
 margin-bottom:20px;
 color:var(--secondary);
 font-weight:700;
}

.services > .container > p{
 text-align:center;
 color:var(--text-light);
 font-size:18px;
 margin-bottom:60px;
}

.services-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
 gap:35px;
}

.service-card{
 text-align:center;
 padding:45px 35px;
 background:var(--white);
 border-radius:16px;
 box-shadow:var(--shadow);
 transition:all 0.4s ease;
}

.service-card:hover{
 transform:translateY(-8px);
 box-shadow:var(--shadow-hover);
}

.service-icon{
 width:70px;
 height:70px;
 margin:0 auto 25px;
 background:linear-gradient(135deg,var(--primary),var(--primary-dark));
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:28px;
 color:white;
 transition:transform 0.3s ease;
}

.service-card:hover .service-icon{
 transform:rotate(360deg) scale(1.1);
}

.service-card h2{
 font-size:22px;
 margin-bottom:15px;
 color:var(--secondary);
 font-weight:600;
}

.service-card p{
 color:var(--text-light);
 line-height:1.6;
}

/* ===== SECCIÓN RESEÑAS ===== */
.reviews{
 padding:100px 20px;
 background:linear-gradient(135deg,#f8fafc 0%,#e7f0f7 100%);
}

.reviews h2{
 text-align:center;
 font-size:38px;
 margin-bottom:60px;
 color:var(--secondary);
 font-weight:700;
}

.reviews-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
 gap:35px;
}

.review-card{
 background:var(--white);
 padding:35px;
 border-radius:16px;
 text-align:left;
 box-shadow:var(--shadow);
 transition:all 0.4s ease;
 position:relative;
 display:flex;
 flex-direction:column;
}

.review-card::before{
 content:'"';
 position:absolute;
 top:20px;
 left:25px;
 font-size:80px;
 color:var(--primary);
 opacity:0.1;
 font-family:Georgia,serif;
}

.review-card:hover{
 transform:translateY(-8px);
 box-shadow:var(--shadow-hover);
}

.review-card > p:first-child{
 font-style:italic;
 color:var(--text);
 line-height:1.7;
 margin-bottom:auto;
 position:relative;
 z-index:1;
 padding-bottom:25px;
}

.review-avatar{
 width:60px;
 height:60px;
 border-radius:50%;
 object-fit:cover;
 border:3px solid var(--white);
 box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.review-rating {
    color: #f59e0b; /* var(--warning) */
    margin-bottom: 15px;
    font-size: 16px;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--bg-light);
}

.review-author strong {
    color: var(--secondary);
}

.review-author span {
    font-size: 14px;
    color: var(--text-light);
}

/* ===== SERVIDORES CLOUD ===== */
.server-cards-section{
 padding:60px 20px;
 background:var(--bg-light);
}

.server-cards-section h2{
 text-align:center;
 font-size:32px;
 color:var(--primary-dark);
 margin-bottom:50px;
 font-weight:700;
}

.server-cards-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
 gap:30px;
 margin-bottom:40px;
}

.server-card{
 background:var(--white);
 border-radius:12px;
 padding:40px 30px;
 text-align:center;
 box-shadow:var(--shadow);
 transition:all 0.3s ease;
 position:relative;
 overflow:hidden;
 border-top:4px solid var(--primary);
}

.server-card::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:linear-gradient(135deg,rgba(4,107,210,0.05),transparent);
 opacity:0;
 transition:opacity 0.3s ease;
}

.server-card:hover{
 transform:translateY(-10px);
 box-shadow:var(--shadow-hover);
}

.server-card:hover::before{
 opacity:1;
}

.server-card h3{
 font-size:28px;
 color:var(--primary-dark);
 margin-bottom:10px;
 font-weight:700;
}

.server-card .plan-type{
 font-size:14px;
 color:var(--text-light);
 text-transform:uppercase;
 letter-spacing:1px;
 margin-bottom:20px;
 font-weight:600;
}

.server-card .price{
 font-size:36px;
 color:var(--primary);
 font-weight:700;
 margin-bottom:5px;
}

.server-card .price-period{
 font-size:14px;
 color:var(--text-light);
 margin-bottom:30px;
}

.server-card .specs{
 text-align:left;
 margin-bottom:30px;
 list-style:none;
}

.server-card .specs li{
 padding:12px 0;
 border-bottom:1px solid var(--bg-light);
 color:var(--text);
 font-size:15px;
}

.server-card .specs li:last-child{
 border-bottom:none;
}

.server-card .specs strong{
 color:var(--primary-dark);
}

.server-card .cta-btn{
 display:inline-block;
 margin-top:20px;
 position:relative;
 z-index:1;
}

.popular-badge{
 position:absolute;
 top:-5px;
 right:20px;
 background:linear-gradient(135deg,#ff6b6b,#ff8787);
 color:white;
 padding:8px 16px;
 border-radius:50px;
 font-size:12px;
 font-weight:700;
 text-transform:uppercase;
 letter-spacing:1px;
 box-shadow:0 4px 15px rgba(255,107,107,0.4);
 transform:rotate(-5deg);
 z-index:10;
}

.server-card.popular-card{
 border-top:4px solid #ff6b6b;
 transform:scale(1.02);
}

.server-card.popular-card:hover{
 transform:translateY(-10px) scale(1.02);
}

/* ===== CARRUSEL DE IMÁGENES ===== */
.carousel-section{
 margin-top:60px;
 margin-bottom:60px;
}

.carousel-section h3{
 text-align:center;
 font-size:24px;
 color:var(--primary-dark);
 margin-bottom:40px;
 font-weight:700;
}

.carousel-wrapper{
 position:relative;
 max-width:1200px;
 margin:0 auto;
 overflow:hidden;
 border-radius:12px;
}

.carousel-container{
 display:flex;
 gap:20px;
 overflow-x:auto;
 scroll-behavior:smooth;
 padding-bottom:15px;
 scroll-snap-type:x mandatory;
}

.carousel-container::-webkit-scrollbar{
 height:8px;
}

.carousel-container::-webkit-scrollbar-track{
 background:var(--bg-light);
 border-radius:10px;
}

.carousel-container::-webkit-scrollbar-thumb{
 background:var(--primary);
 border-radius:10px;
 transition:background 0.3s ease;
}

.carousel-container::-webkit-scrollbar-thumb:hover{
 background:var(--primary-dark);
}

.carousel-item{
 min-width:280px;
 height:400px;
 border-radius:12px;
 overflow:hidden;
 box-shadow:var(--shadow);
 transition:all 0.3s ease;
 scroll-snap-align:center;
 position:relative;
 cursor:pointer;
}

.carousel-item:hover{
 transform:translateY(-15px);
 box-shadow:var(--shadow-hover);
}

.carousel-item img{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:transform 0.4s ease;
}

.carousel-item:hover img{
 transform:scale(1.08);
}

.carousel-item::after{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:linear-gradient(135deg,rgba(4,107,210,0) 0%,rgba(4,107,210,0.2) 100%);
 opacity:0;
 transition:opacity 0.3s ease;
}

.carousel-item:hover::after{
 opacity:1;
}

.carousel-nav{
 display:flex;
 justify-content:center;
 gap:10px;
 margin-top:20px;
}

.carousel-btn{
 background:var(--primary);
 color:white;
 border:none;
 padding:12px 20px;
 border-radius:50px;
 cursor:pointer;
 font-size:16px;
 font-weight:600;
 transition:all 0.3s ease;
 box-shadow:0 4px 15px rgba(4,107,210,0.3);
}

.carousel-btn:hover{
 background:var(--primary-dark);
 transform:translateY(-2px);
 box-shadow:0 6px 20px rgba(4,107,210,0.4);
}

/* ===== CENTRO DE DATOS ===== */
.data-center-section{
 padding:80px 20px;
 background:var(--white);
}

.data-center-section h2{
 font-size:32px;
 color:var(--primary-dark);
 border-bottom:2px solid var(--bg-light);
 padding-bottom:10px;
 margin-bottom:30px;
}

.data-center-section h3{
 font-size:24px;
 color:var(--secondary);
 margin-top:40px;
 margin-bottom:15px;
}

.data-center-content p{
 margin-bottom:20px;
 color:var(--text);
 line-height:1.7;
}

.data-center-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 gap:20px;
 margin-bottom:40px;
}

.data-center-grid ul{
 list-style:none;
 padding-left:0;
}

.data-center-grid li{
 background:var(--bg-light);
 padding:10px 15px;
 margin-bottom:10px;
 border-radius:8px;
 font-size:15px;
 color:var(--secondary);
 font-weight:500;
 border-left:4px solid var(--primary);
}

.feature-item{
 display:flex;
 align-items:flex-start;
 margin-bottom:30px;
}

.feature-icon{
 font-size:40px;
 margin-right:20px;
 color:var(--primary);
 flex-shrink:0;
}

.feature-text h3{
 margin-top:0;
 color:var(--primary-dark);
}

/* ===== CONTACTO ===== */
.page-hero{
 background:linear-gradient(135deg,rgba(4,107,210,0.9),rgba(4,92,180,0.85)),
 url('../images/contac.jpg');
 background-size:cover;
 background-position:center;
 min-height:250px;
 display:flex;
 align-items:center;
 color:white;
 padding:50px 20px;
}

.page-hero h1{
 font-size:42px;
 font-weight:700;
}

.contact-section{
 padding:80px 20px;
 background:var(--bg-light);
}

.contact-grid{
 display:grid;
 grid-template-columns:1fr 1.5fr;
 gap:50px;
 align-items:flex-start;
}

.info-card{
 background:var(--white);
 padding:30px;
 border-radius:12px;
 box-shadow:var(--shadow);
}

.info-card h2{
 color:var(--primary);
 font-size:28px;
 margin-bottom:30px;
}

.info-item{
 display:flex;
 align-items:center;
 margin-bottom:25px;
 padding-bottom:25px;
 border-bottom:1px solid #e2e8f0;
}

.info-item:last-child{
 border-bottom:none;
 margin-bottom:0;
 padding-bottom:0;
}

.info-icon{
 font-size:24px;
 color:var(--primary);
 width:40px;
 text-align:center;
 margin-right:15px;
}

.info-content p{
 line-height:1.4;
 color:var(--text);
}

.info-content a{
 color:var(--primary);
 text-decoration:none;
 font-weight:500;
}

.contact-form{
 background:var(--white);
 padding:40px;
 border-radius:12px;
 box-shadow:var(--shadow);
}

.contact-form h3{
 color:var(--secondary);
 font-size:26px;
 margin-bottom:30px;
 font-weight:600;
}

.form-group{
 margin-bottom:20px;
}

.form-group label{
 display:block;
 margin-bottom:8px;
 font-weight:500;
 color:var(--secondary);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea{
 width:100%;
 padding:12px;
 border:1px solid #cbd5e1;
 border-radius:6px;
 font-size:16px;
 transition:border-color 0.3s;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
 border-color:var(--primary);
 outline:none;
 box-shadow:0 0 0 3px rgba(4,107,210,0.2);
}

.contact-form textarea{
 resize:vertical;
 min-height:120px;
}

.form-message{
 padding:15px;
 border-radius:6px;
 margin-bottom:20px;
 font-weight:600;
 text-align:center;
 display:none;
}

.form-message.success{
 background:#d1fae5;
 color:#065f46;
 display:block;
}

.form-message.error{
 background:#fee2e2;
 color:#991b1b;
 display:block;
}

.cta-section{
 padding:60px 20px;
 text-align:center;
 background:var(--bg-light);
}

.cta-section h2{
 font-size:32px;
 color:var(--secondary);
 margin-bottom:20px;
}

.cta-section p{
 font-size:18px;
 color:#50698d (--text-light);
 margin-bottom:40px;
}

.partners {
    padding: 60px 20px;
    background: var(--white);
    text-align: center;
}

.logo-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

.logo-carousel:hover .logo-carousel-track {
    animation-play-state: paused;
}

.logo-carousel-track {
    display: flex;
    width: calc(250px * 12); /* 250px por logo * 6 logos * 2 para duplicar */
    animation: scroll 30s linear infinite;
}

.logo-item {
    width: 250px;
    padding: 0 40px;
    flex-shrink: 0;
}

.logo-item img {
    width: 100%;
    height: 60px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.logo-item:hover img {
    filter: none;
    opacity: 1;
    transform: scale(1.1);
}

@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-250px * 6)); } /* Mover la longitud de los 6 logos originales */
}

/* ===== ANIMACIONES DE BOTÓN ===== */
@keyframes pulse-primary {
    0% {
        box-shadow: 0 5px 20px rgba(4, 107, 210, 0.4);
    }
    50% {
        box-shadow: 0 8px 30px rgba(4, 107, 210, 0.6);
    }
    100% {
        box-shadow: 0 5px 20px rgba(4, 107, 210, 0.4);
    }
}

@keyframes pulse-accent {
    0% { box-shadow: 0 4px 20px rgba(231, 76, 60, 0.3); }
    50% { box-shadow: 0 8px 30px rgba(231, 76, 60, 0.5); }
    100% { box-shadow: 0 4px 20px rgba(231, 76, 60, 0.3); }
}


/* ===== FOOTER ===== */
.footer-main {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: white;
    padding: 60px 0 20px;
    margin-top: 80px;
}

.footer-main h3 {
    color: #046bd2;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
}
.footer-section h3 i {
    margin-right: 8px;
}
.footer-section ul i {
    margin-right: 8px;
}

.footer-section h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 3px;
    background: #046bd2;
    border-radius: 2px;
}

.footer-section p,
.footer-section li {
    color: #cbd5e1;
    line-height: 1.6;
    margin-bottom: 8px;
}

.footer-section a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: #046bd2;
}

.footer-contact {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.footer-contact .icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #046bd2;
    border-radius: 50%;
    font-size: 12px;
}

.footer-social {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    background: rgba(4, 107, 210, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: white;
    font-size: 18px;
}

.footer-social a:hover {
    background: #046bd2;
    transform: translateY(-2px);
}

.footer-bottom {
    border-top: 1px solid #475569;
    padding-top: 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
}

.footer-bottom p {
    margin-bottom: 8px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.footer-links a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #046bd2;
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .footer-social {
        justify-content: center;
    }
    .footer-links {
        flex-direction: column;
        gap: 10px;
    }
}

/* ===== SECCIÓN DE INTEGRACIÓN ===== */
.integration-section {
    padding: 100px 20px;
    background: var(--bg-light);
    text-align: center;
}

.integration-section h2 {
    font-size: 38px;
    margin-bottom: 20px;
    color: var(--secondary);
    font-weight: 700;
}

.integration-section > .container > p {
    color: var(--text-light);
    font-size: 18px;
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.integration-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.integration-center, .integration-node {
    padding: 30px;
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow);
    width: 280px;
    min-height: 220px;
}

.integration-center {
    border: 2px solid var(--primary);
    transform: scale(1.1);
}

.integration-icon, .integration-icon-main {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
}

.integration-icon-main {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.integration-node h4, .integration-center h3 {
    font-size: 20px;
    color: var(--secondary);
    margin-bottom: 10px;
}

.integration-center h3 {
    color: var(--primary);
}

.integration-node p {
    font-size: 14px;
    color: var(--text-light);
}

.integration-connector {
    font-size: 40px;
    color: var(--primary);
    opacity: 0.5;
}

@media (max-width: 992px) {
    .integration-diagram {
        flex-direction: column;
        gap: 30px;
    }
    .integration-connector {
        transform: rotate(90deg);
    }
    .integration-center {
        transform: scale(1);
    }
}

/* ===== PARTNERS CARRUSEL (RESPONSIVE) ===== */
@media (max-width: 768px) {
    .logo-carousel-track {
        width: calc(180px * 12); /* Ancho reducido para móviles */
        animation-duration: 25s;
    }
    .logo-item {
        width: 180px;
        padding: 0 20px;
    }
    .logo-item img {
        height: 45px;
    }
}




/* ===== NUEVOS ESTILOS PARA PÁGINA DE SOFTWARE ===== */
.featured-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.featured-products-grid .product-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.featured-products-grid .product-card .btn-primary {
    margin-top: 20px;
}

.category-title {
    font-size: 28px;
    color: var(--secondary);
    margin-top: 80px;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--bg-light);
    text-align: left;
}

.product-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.product-card-compact {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    transition: all 0.3s ease;
    text-align: left;
    border: 1px solid transparent;
}

.product-card-compact:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary);
}

.product-icon-compact {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 15px;
}

.product-card-compact h4 {
    font-size: 20px;
    color: var(--secondary);
    margin-bottom: 10px;
}

.product-card-compact p {
    color: var(--text-light);
    font-size: 15px;
    margin-bottom: 20px;
    flex-grow: 1;
}

.product-card-compact a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.product-card-compact a:hover {
    padding-left: 5px;
}

.product-card-compact a::after {
    content: ' →';
}

/* ===== NUEVOS ESTILOS PARA PÁGINA DE SERVICIOS ===== */
.service-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.service-card-compact {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    transition: all 0.3s ease;
    text-align: left;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
}

.service-card-compact:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    border-color: var(--primary);
}

.service-icon-compact {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 15px;
    width: 50px;
    height: 50px;
    background: var(--bg-light);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card-compact h4 {
    font-size: 20px;
    color: var(--secondary);
    margin-bottom: 10px;
}

.service-card-compact p {
    color: var(--text-light);
    font-size: 15px;
    margin-bottom: 20px;
    flex-grow: 1;
}

.service-card-compact a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.service-card-compact a:hover {
    padding-left: 5px;
}

.service-card-compact a::after {
    content: ' →';
}

.services #nuestros-servicios .services-grid {
    display: none; /* Oculta el grid de tarjetas grandes anterior */
}

/* ===== PÁGINA DE FAQ ===== */
.faq-section {
    padding: 60px 20px;
    background: #fff;
}

.faq-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.faq-intro p {
    font-size: 1.1rem;
    color: var(--text-light);
}

.faq-categories {
    max-width: 900px;
    margin: 0 auto;
}

.faq-category {
    margin-bottom: 40px;
}

.faq-category h2 {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--primary);
}

.faq-item {
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.faq-question {
    width: 100%;
    padding: 20px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--secondary);
    transition: all 0.3s ease;
}

.faq-question:hover {
    color: var(--primary);
}

.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary);
    transition: transform 0.3s ease;
}

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

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

.faq-answer.active {
    max-height: 1000px; /* Suficientemente grande para cualquier contenido */
    padding: 0 20px 20px;
}

.faq-answer p, .faq-answer ul {
    color: var(--text);
    line-height: 1.7;
    margin: 0;
}

.faq-cta {
    background: var(--bg-light);
    padding: 40px 20px;
    text-align: center;
    margin-top: 50px;
    border-radius: 12px;
}

.faq-cta h2 {
    color: var(--secondary);
    margin-bottom: 15px;
}

.faq-cta p {
    color: var(--text-light);
    margin-bottom: 25px;
}

.faq-answer ul {
    margin: 10px 0 0 20px;
    line-height: 1.8;
    padding-left: 20px;
}

.faq-answer p {
    margin-top: 10px;
}

.faq-answer p.highlight {
    margin-top: 10px;
    font-style: italic;
}

/* ===== TABLA COMPARATIVA ===== */
.comparison-table-section {
    padding: 100px 20px;
    background: var(--white);
}

.comparison-table-section h2 {
    text-align: center;
    font-size: 38px;
    margin-bottom: 20px;
    color: var(--secondary);
    font-weight: 700;
}

.comparison-table-section p {
    text-align: center;
    color: var(--text-light);
    font-size: 18px;
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.comparison-table-wrapper {
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.comparison-table th, .comparison-table td {
    padding: 20px;
    text-align: left;
    border-bottom: 1px solid var(--bg-light);
}

.comparison-table th {
    background-color: var(--bg-light);
    color: var(--secondary);
    font-size: 18px;
    font-weight: 600;
}

.comparison-table th i {
    margin-right: 10px;
    color: var(--primary);
}

.comparison-table tbody tr:hover {
    background-color: #f8fafc;
}

.comparison-table td {
    color: var(--text-light);
    vertical-align: top;
}

/* Language Switcher */
.lang-switch-container { display: flex; justify-content: center; align-items: center; padding: 10px; background: #f0f0f0; }
.lang-switch { position: relative; display: inline-block; width: 60px; height: 34px; }
.lang-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(26px); }
.slider:after { content: 'ES'; color: white; display: block; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 75%; font-size: 10px; }
input:checked + .slider:after { content: 'EN'; left: 25%; }

.comparison-table td:first-child {
    color: var(--secondary);
    font-weight: 600;
    width: 25%;
}

.comparison-table thead th:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.comparison-table thead th:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

@media (max-width: 768px) {
    .comparison-table {
        min-width: 100%;
        border: none;
    }

    .comparison-table thead {
        display: none; /* Ocultar encabezados en móvil */
    }

    .comparison-table tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid var(--bg-light);
        border-radius: 8px;
        box-shadow: var(--shadow);
        overflow: hidden;
    }

    .comparison-table td {
        display: block;
        text-align: right; /* Alinear contenido a la derecha */
        padding-left: 50%; /* Dejar espacio para la etiqueta */
        position: relative;
        border-bottom: 1px solid var(--bg-light);
    }

    .comparison-table td:last-child {
        border-bottom: none;
    }

    .comparison-table td::before {
        content: attr(data-label); /* Usar el atributo data-label */
        position: absolute;
        left: 20px;
        width: calc(50% - 40px);
        text-align: left;
        font-weight: 600;
        color: var(--secondary);
    }
}

/* ===== SCROLL TOP ===== */
.scroll-top{
 position:fixed;
 bottom:30px;
 right:30px;
 background:linear-gradient(135deg,var(--primary),var(--primary-dark));
 color:white;
 width:55px;
 height:55px;
 border-radius:50%;
 display:none;
 align-items:center;
 justify-content:center;
 cursor:pointer;
 transition:all 0.3s ease;
 box-shadow:0 5px 20px rgba(4,107,210,0.4);
 font-size:24px;
}

.scroll-top:hover{
 transform:translateY(-5px);
 box-shadow:0 8px 30px rgba(4,107,210,0.5);
}

/* ===== BOTÓN LLAMAR FLOTANTE (SOLO MÓVIL) ===== */
.call-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 100px; /* Posicionado arriba del de WhatsApp */
    left: 30px;
    background-color: var(--primary);
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 28px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    z-index: 9998;
    transition: all 0.3s ease;
    display: none; /* Oculto por defecto */
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.call-float:hover {
    transform: scale(1.1);
}

/* ===== WHATSAPP FLOTANTE ===== */
.whatsapp-float{
 position:fixed;
 width:60px;
 height:60px;
 bottom:30px;
 left:30px;
 background-color:#25d366;
 color:#FFF;
 border-radius:50px;
 text-align:center;
 font-size:32px;
 box-shadow:0 5px 20px rgba(0,0,0,0.2);
 z-index:9999;
 transition:all 0.3s ease;
 display:flex;
 align-items:center;
 justify-content:center;
 text-decoration:none;
}

.whatsapp-float:hover{
 transform:scale(1.1) rotate(5deg);
 box-shadow:0 8px 30px rgba(37,211,102,0.6);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width:544px){
 .whatsapp-float{
 width:50px;
 height:50px;
 bottom:20px;
 left:20px;
 font-size:28px;
}
}

@media (max-width:992px){
 .product-detail-card{
 flex-direction:column !important;
 padding:30px;
}

 .product-detail-image{
 flex:0 0 100%;
 margin-top:20px;
}

 .product-detail-content{
 padding:0;
}

 .product-detail-card:nth-child(odd) .product-detail-content{
 order:-1;
}
}

@media (max-width:900px){
 .contact-grid{
 grid-template-columns:1fr;
}

 .info-card,
 .contact-form{
 padding:30px;
}
}

@media (max-width:768px){
 nav ul{
 display:none;
 flex-direction:column;
 position:absolute;
 top:70px;

 nav a {
    padding: 15px 20px; /* Aumenta el área táctil */
 }
 left:0;
 right:0;
 background:rgba(255,255,255,0.98);
 -webkit-backdrop-filter:blur(10px);
 backdrop-filter:blur(10px);
 padding:30px 20px;
 box-shadow:0 10px 30px rgba(0,0,0,0.1);
 gap:20px;
 }

 .call-float {
    display: flex; /* Visible en móvil */
}

 nav ul.active{
 display:flex;
}

 .menu-toggle{
 display:block;
}

 .hero{
 min-height:250px;
 padding:50px 20px;
}

 .hero h1{
 font-size:30px;
}

 .hero p{
 font-size:16px;
}

 .page-hero h1{
 font-size:32px;
}

 .products,
 .services,
 .reviews,
 .about,
 .contact-section,
 .data-center-section{
 padding:60px 20px;
}

 .products h2,
 .services h3,
 .reviews h2,
 .about h2{
 font-size:28px;
}

 .about-grid{
 grid-template-columns:1fr;
 gap:40px;
 margin-bottom:60px;
}

 .server-cards-grid{
 grid-template-columns:1fr;
}

 .server-card h3{
 font-size:24px;
}

 .server-card .price{
 font-size:32px;
}

 .data-center-section h2{
 font-size:26px;
}

 .stats h2{
 font-size:28px;
}

 .stats-grid{
 gap:30px;
}

 .stat-item h3{
 font-size:22px;
}

 .product-detail-content h3{
 font-size:24px;
}

 .logo-item{
 width:calc(100% / 6);
 padding:0 20px;
}

 .logo-item img{
 width:auto;
 height:45px;
 object-fit:contain;
}
}

/* ===== ANIMACIÓN DE APARICIÓN DE SECCIONES (FADE IN) ===== */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== BLOG STYLES ===== */
.blog-listing-section, .blog-post-section {
    padding: 80px 20px;
    background: var(--white);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
}

.blog-post-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
}

.blog-post-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-post-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.post-meta {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 15px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.post-meta span i {
    margin-right: 5px;
    color: var(--primary);
}

.blog-post-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: var(--secondary);
}

.blog-post-card h3 a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.blog-post-card h3 a:hover {
    color: var(--primary);
}

.blog-post-card p {
    color: var(--text);
    flex-grow: 1;
    margin-bottom: 20px;
}

.read-more {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    align-self: flex-start;
}

.blog-post-container {
    max-width: 800px;
    margin: 0 auto;
}

.blog-post-content h2 {
    font-size: 1.8rem;
    color: var(--secondary);
    margin: 30px 0 15px;
}

.blog-post-content h3 {
    font-size: 1.5rem;
    color: var(--secondary);
    margin: 25px 0 10px;
}

.blog-post-content p, .blog-post-content li {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text);
}

.blog-post-content ul {
    margin: 15px 0 25px 20px;
}

/* --- FIN DE ESTILOS --- */