/* Variables CSS (se mantienen) */
:root {
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --accent-color: #e74c3c;
    --light-bg: #f8f9fa;
    --dark-bg: #2c3e50;
    --text-color: #333;
    --light-text: #ecf0f1;
    --border-color: #dde1e5;
    --flip-duration: 0.8s; /* Duración de la animación de volteo */
    --flip-color-overlay: rgba(0, 0, 0, 0.75); /* Color de la superposición en la cara trasera */
}

/* Estilos Generales (se mantienen) */
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.7;
    color: var(--text-color);
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    color: var(--secondary-color);
    line-height: 1.2;
}

.container {
    width: 90%;
    max-width: 80vw;
    margin: 0 auto;
    padding: 40px 0;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.2s ease;
}

a:hover {
    color: var(--accent-color);
    transform: translateY(-2px);
}

/* Header (se mantiene) */
header {
    background: #fff;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

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

.logo img {
    height: 60px;
    vertical-align: middle;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-left: 30px;
}

nav ul li a {
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 1.05em;
}

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

/* Hero Section (se mantiene) */

.hero {
    background: linear-gradient(135deg, rgba(80, 178, 244, 0.53) 0%, rgba(1, 31, 38, 0.53) 100%),
        url('/img/pexels-tara-winstead-8386440.jpg') no-repeat center center/cover;
    /* <--- AQUÍ VA LA IMAGEN */
    /* Gradiente sutil */
    color: var(--light-text);
    text-align: center;
    padding: 120px 0 20px 0;
    /* Mayor padding */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    /* Altura mínima para que siempre se vea bien */
}

.hero h1 {
    font-size: 3.5em;
    /* Título más grande y moderno */
    margin-bottom: 25px;
    color: #fff;
    font-weight: 700;
}

.hero p {
    font-size: 1.3em;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}

.btn {
    display: inline-block;
    background: var(--accent-color);
    color: #fff;
    padding: 15px 35px;
    /* Botón más grande */
    text-decoration: none;
    border-radius: 50px;
    /* Bordes redondeados para un look moderno */
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn:hover {
    background: #c0392b;
    transform: translateY(-3px);
}

/* Estilos para el texto de transición entre Hero y Servicios */
.transition-text {
    text-align: center;
    padding: 30px 0; /* Espacio alrededor del texto */
    font-size: 1.3em; /* Tamaño de fuente un poco más grande */
    color: var(--secondary-color); /* Color de texto que contraste bien */
    max-width: 1200px; /* Limita el ancho para que no se extienda demasiado */
    margin: 0 auto; /* Centra el contenedor */
    line-height: 1.6;
}

.transition-text p {
    margin-bottom: 0; /* Elimina el margen inferior por defecto del párrafo */
}


/* --- ESTILOS PRINCIPALES DEL LAYOUT DE DOS COLUMNAS (se mantienen) --- */

.main-content-split {
    background-color: #fff;
    padding: 60px 0;
}

.main-container-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    padding: 0;
}

/* Columna de Servicios (Izquierda - 65%) - (se mantienen los tamaños) */
.services-column {
    flex-basis: 65%;
    max-width: 65%;
    padding-right: 20px;
}

.services-column h2 {
    font-size: 2.8em;
    margin-bottom: 60px;
    color: var(--secondary-color);
    font-weight: 700;
    text-align: center;
}

/* --- NUEVOS ESTILOS PARA LAS TARJETAS VOLTEABLES DE SERVICIO --- */

.services-column .service-grid {
    grid-template-columns: 1fr; /* Mantiene una columna para las "filas" */
    gap: 40px;
    perspective: 1000px; /* Perspectiva para el efecto 3D en el contenedor del grid */
}

.service-item-wrapper {
    position: relative;
    height: 300px; /* Altura fija para la tarjeta */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* Sombra externa */
    overflow: hidden; /* Asegura que no se desborde el contenido */
    cursor: pointer; /* Indica que es interactuable */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto hover en el wrapper */

    /* Animación inicial oculta (se mantiene) */
    opacity: 0;
    transform: translateY(20px);
    margin: 40px 0;
}

.service-item-wrapper.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.service-item-wrapper:hover {
    transform: translateY(-10px); /* Ligeramente elevado al pasar el mouse */
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* Contenedor interno que rota */
.service-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform var(--flip-duration); /* Duración de la animación de volteo */
    transform-style: preserve-3d; /* Crucial para el efecto 3D */
    border-radius: 12px; /* Hereda border-radius */
}

/* Efecto de volteo al pasar el mouse */
.service-item-wrapper:hover .service-card-inner {
    transform: rotateY(180deg);
}

/* CARA FRONTAL */
.service-front, .service-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Oculta la cara cuando está volteada */
    backface-visibility: hidden; /* Oculta la cara cuando está volteada */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 35px;
    border-radius: 12px;
    color: #fff; /* Color del texto para ambas caras */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6); /* Sombra para el texto */
    box-sizing: border-box; /* Asegura que padding no aumente el tamaño */
}

.service-front {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 2; /* Siempre en la parte delantera */
    /* La imagen de fondo se aplica aquí */
}

/* Superposición oscura para la cara frontal (para mejor legibilidad del título) */
.service-front::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Superposición oscura sutil */
    border-radius: 12px;
    z-index: 1;
}

.service-front h3 {
    position: relative; /* Para que el h3 esté sobre el overlay */
    z-index: 2;
    font-size: 2.2em; /* Título más grande para la cara frontal */
    margin: 0; /* Quita márgenes por defecto */
    color: #fff;
}

/* CARA TRASERA */
.service-back {
    background: var(--flip-color-overlay); /* Color de superposición de la cara trasera */
    transform: rotateY(180deg); /* Inicialmente volteada */
    color: #fff;
    padding: 30px; /* Ajusta padding para el texto */
}

.service-back h4 {
    font-size: 1.8em; /* Título de la cara trasera */
    margin-bottom: 15px;
    color: #fff;
    text-shadow: none; /* Quitamos sombra si el fondo es sólido */
}

.service-back p {
    font-size: 1.1em; /* Texto de la cara trasera */
    line-height: 1.5;
    max-width: 90%; /* Limita el ancho del párrafo */
    margin: 0 auto; /* Centra el párrafo */
    color: #fff;
}

/* IMÁGENES DE FONDO ESPECÍFICAS PARA CADA SERVICIO EN LA CARA FRONTAL */
.service-1 .service-front {
    background-image: url('/img/soporteweb.jpg'); /* Reemplaza con la ruta de tu primera imagen */
}

.service-2 .service-front {
    background-image: url('/img/diseñoweb.jpg'); /* Reemplaza con la ruta de tu segunda imagen */
}

.service-3 .service-front {
    background-image: url('/img/redessociales.jpg'); /* Reemplaza con la ruta de tu tercera imagen */
}

.service-4 .service-front {
    background-image: url('/img/recuperaciondatos.jpg');
}


/* Columna de Contacto (Derecha - 35%) - STICKY (se mantiene) */
.contact-column {
    flex-basis: 35%;
    max-width: 35%;
    position: sticky;
    top: 80px;
    align-self: flex-start;
    padding-left: 20px;
}

.contact-card {
    background: var(--light-bg);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    text-align: center;
    border: 1px solid var(--border-color);
}

.contact-card h2 {
    font-size: 2em;
    margin-bottom: 30px;
    color: var(--secondary-color);
    font-weight: 600;
}

.contact-card p {
    font-size: 1.1em;
    margin-bottom: 15px;
    color: #555;
}

.contact-card .contact-info {
    margin-top: 20px;
    margin-bottom: 30px;
}

.contact-card .contact-info p {
    font-size: 1.1em;
    margin-bottom: 10px;
}

.contact-card .contact-info a {
    color: blue;
    font-weight: 600;
}

.contact-card .cta-text {
    font-style: italic;
    color: #666;
    font-size: 1em !important;
    margin-bottom: 25px;
}

/* Contenedor de botones de chat */
.chat-buttons {
    display: flex;
    flex-direction: row;
    gap: 15px;
    margin-top: 25px;
}

/* Estilos base para todos los botones de chat */
.chat-btn {
    display: inline-flex; /* Para alinear el icono y el texto */
    align-items: center;
    justify-content: center; /* Centra el contenido horizontalmente */
    color: white;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%; /* Asegura que el botón ocupe todo el ancho disponible */
    box-sizing: border-box; /* Incluye padding y borde en el ancho */
}

.chat-btn:hover {
    transform: translateY(-3px);
}

.chat-btn img {
    width: 35px; /* Tamaño del icono */
    height: 35px;
    margin-right: 10px; /* Espacio entre icono y texto */
    vertical-align: middle;
}


.whatsapp-btn-inline {
    /* display: inline-flex;
    align-items: center;
    justify-content: center; */
    background-color: #25d366;
    /* color: white;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease, transform 0.2s ease; */
}

.whatsapp-btn-inline:hover {
    background-color: #128c7e;
    /* transform: translateY(-3px); */
}

/* .whatsapp-btn-inline img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    vertical-align: middle;
}

.whatsapp-btn {
    display: none;
} */

/* Nuevo estilo específico para el botón de Tawk.to */
.tawk-btn-inline {
    background-color: #4557A7; /* Un color distintivo para Tawk.to (ej. un verde/azul teal) */
}

.tawk-btn-inline:hover {
    background-color: #036F97; /* Tono más oscuro al pasar el ratón */
    color:white
}

/* Footer (se mantiene) */
footer {
    background: var(--dark-bg);
    color: var(--light-text);
    text-align: center;
    padding: 30px 0;
    font-size: 0.95em;
}

/* Media Queries para Responsividad - ¡CRUCIALES PARA EL LAYOUT! (se mantienen y se ajustan) */
@media (max-width: 992px) {
    .main-container-flex {
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }

    .services-column,
    .contact-column {
        flex-basis: 100%;
        max-width: 100%;
        padding: 0;
        position: static; /* Desactiva el sticky en móviles */
    }

    .services-column h2,
    .contact-column h2 {
        text-align: center;
    }

    .contact-card {
        padding: 30px;
        margin-top: 0;
    }

    .whatsapp-btn-inline {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
    /* Ajustes específicos para las tarjetas de volteo en móviles */
    .service-item-wrapper {
        height: 250px; /* Ajusta la altura en móviles */
    }

    .service-front h3 {
        font-size: 1.8em;
    }

    .service-back h4 {
        font-size: 1.6em;
    }

    .service-back p {
        font-size: 1em;
    }

    /* Resto de ajustes generales para móviles (se mantienen) */
    header .container {
        flex-direction: column;
        align-items: center;
    }

    nav ul {
        margin-top: 20px;
        text-align: center;
    }

    nav ul li {
        margin: 0 15px;
    }

    .hero {
        padding: 80px 0;
    }

    .hero h1 {
        font-size: 2.5em;
    }

    .hero p {
        font-size: 1.1em;
    }

    .btn {
        padding: 12px 30px;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 2em;
    }
    .hero p {
        font-size: 1em;
    }
    .container {
        padding: 20px 0;
    }
}