/* Colores y Tipografía (Ajustar según la web original) */
:root {
    --color-principal: #A0522D; /* Café rústico/tierra */
    --color-secundario: #6B8E23; /* Verde oliva/musgo */
    --color-fondo-claro: #F5F5DC; /* Beige claro */
    --color-texto-oscuro: #333; /*#4E342E;*/
    --color-footer-fondo: #F0EEEA; /* Fondo del footer */
}

/* Estilos Generales */
body {
    font-family: 'Times New Roman', serif;
    margin: 0;
    padding: 0;
    background-color: white;
    color: var(--color-texto-oscuro);
}

/* Header y Navegación */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background-color: white; /* Simulación del color del fondo de la barra */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.logo {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--color-principal);
}

nav a {
    margin-left: 20px;
    text-decoration: none;
    color: var(--color-texto-oscuro);
    font-weight: 800;
    font-size: 1.3em; /*tamaño letra header*/
}

nav a.active {
    color: var(--color-principal);
    font-weight: bold;
}

/* --------------------------------- */
/* ESTILOS ESPECÍFICOS DE LAS SECCIONES */
/* --------------------------------- */

/* Sección de Planes (Común en Inicio y Planes) */
.planes-resumen h2, .planes-incluyen h2 {
    text-align: center;
    color: var(--color-principal);
    margin: 40px 0 20px;
}

.planes-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}

.plan-card {
    width: 200px;
    padding: 30px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    color: white;
}

.start { background-color: #B0E0E6; /* Azul claro */ }
.standard { background-color: var(--color-secundario); }
.plus { background-color: #ADD8E6; /* Azul claro alternativo */ }
.premium { background-color: #8FBC8F; /* Verde militar */ }

/* Horario de Atención (Contacto) */
.horario-atencion {
    text-align: center;
    background-color: #f8f8f8;
    padding: 30px;
}

/* --------------------------------- */
/* ESTILOS DEL FOOTER */
/* --------------------------------- */
footer {
    background-color: var(--color-footer-fondo);
    padding: 40px 5%;
    color: var(--color-texto-oscuro);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-section h4 {
    color: var(--color-principal);
    border-bottom: 2px solid var(--color-principal);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li a {
    color: var(--color-texto-oscuro);
    text-decoration: none;
    line-height: 1.8;
    display: block;
}

.copyright {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
    font-size: 0.8em;
}
/* Estilo para la sección de Inicio (Banner) */
.hero-inicio {
    /* Esto simularía el banner de fondo de la zona rural */
    min-height: 400px;
    background-color: #A9D1C2; 
    background-image: url('images/banner_rural.jpg'); /* Reemplazar por tu imagen real */
    background-size: cover; /* Asegura que la imagen cubra toda el área */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Necesario para posicionar el texto o capas */
}

.hero-inicio h1 {
    color: white; /* El texto es blanco en la imagen */
    font-size: 3em;
    z-index: 10;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Estilo para las características de servicio (Radio Enlace, etc.) */
/* Estilo para los iconos dentro de las características */
.caracteristica-icono {
    width: 80px; /* Tamaño del icono */
    height: auto;
    margin-bottom: 0px;
}
.caracteristicas-servicio {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 50px 5%;
    background-color: #F8F7F2;
    max-width: 1200px;
    margin: 0 auto;
}

.caracteristica {
    border: none;
    background-color: #FAF9F6;
    border-radius: 10px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15),
                0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;
    padding: 20px 30px;
    width: 45%;
    max-width: 400px;
    text-align: center;
    /* Puedes añadir aquí estilos para las imágenes o iconos si los usas */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 150px;
}
.caracteristica:hover {
    /* Mueve la caja 2px hacia abajo */
    transform: translateY(10px); 
    
    /* Reduce la sombra para simular que se "presiona" o "hunde" */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
                0 1px 2px rgba(0, 0, 0, 0.05); 
}

.caracteristica p {
    color: var(--color-texto-oscuro);
    font-size: 1.1em;
    font-weight: 500;
}
.caracteristica-texto {
    flex-grow: 1;
    text-align: left;
    margin-right: 15px;
}
.whatsapp-flotante {
    position: fixed; /* Mantiene la burbuja visible al hacer scroll */
    bottom: 30px;    /* Margen desde abajo */
    right: 30px;     /* Margen desde la derecha */
    z-index: 1000;   /* Asegura que esté por encima de otros elementos */
    text-decoration: none; /* Quita el subrayado del enlace */
}

/* Estilo de la caja principal (el color marrón de 'Contáctanos') */
.whatsapp-contenido {
    background-color: var(--color-principal); /* Usamos el color principal (Café rústico) */
    color: white;
    padding: 10px 15px;
    border-radius: 5px; /* Bordes suaves */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra para efecto flotante */
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease; /* Transición suave al pasar el ratón */
}

/* Efecto al pasar el ratón (opcional) */
.whatsapp-flotante:hover .whatsapp-contenido {
    background-color: #8B4513; /* Un tono más oscuro de café al pasar el ratón */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    text-decoration: none;
}

/* Estilo del texto */
.whatsapp-texto {
    font-size: 1.1em;
    font-weight: bold;
   /* margin-right: 10px;*/
}

/* Estilo del icono (si lo usamos) */
.whatsapp-icono {
    width: 25px; /* Tamaño del icono */
    height: 25px;
    /* Puedes usar un icono de WhatsApp o simplemente la palabra 'Contáctanos' */
    margin-left: 5px;
}
/* Opcional: Si solo quieres el icono y no el texto, puedes ocultar el texto en móviles */
 @media (max-width: 768px) {
    .whatsapp-texto {
        display: none;
    }
    .whatsapp-contenido {
        padding: 12px;
        border-radius: 50%;
    }
}
.plan-card-start, .plan-card-plus { 
    background-color: #B0E0E6; /* Azul claro */ 
    color: var(--color-texto-oscuro); /* Texto oscuro para contraste */
}
.plan-card-standard, .plan-card-premium { 
    background-color: #8FBC8F; /* Verde oliva oscuro */ 
    color: white; 
}

/* Estilo general de las tarjetas de planes */
.planes-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 50px 0;
    flex-wrap: wrap;
    font-family: 'Times New Roman', serif; /* Mantener la tipografía */
}

.plan-card {
    width: 220px;
    min-height: 320px;
    padding: 40px 30px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*background-color: var(--color-secundario);*/
    color: black;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.plan-card h3 {
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: bold;
    color: inherit;
    text-shadow: 2px 2px 7px rgba(0, 0, 0, 0.8); /* Sombra suave para el título */
}

.plan-card .price {
    font-size: 3.5em;
    font-weight: 800; /*bold;*/
    display: block;
    line-height: 0.9;
}

.plan-card .speed {
    font-size: 1.4em;
    font-weight: bold;
    list-style: none;
    padding-left: 0;
    margin-top: 30px;
}
.plan-card:hover {
   transform: translateY(-5px) scale(1.02);
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3),
               0 1px 2px rgba(0, 0, 0, 0.05);
}

/* --- ESTILOS DE LA SECCIÓN 'INCLUYEN' --- */

/* Rejilla 2x2 de Inclusiones (Soporte, Wifi, etc.) */
.inclusiones-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    grid-template-rows: repeat(2, 1fr); 
    gap: 0px; /* Para simular la delgada línea divisoria entre los cuadros */
    border: none; /* Borde exterior */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    /*margin: 30px auto;*/
    max-width: 500px;
    min-height: 300px;
    margin: 30px auto;
    overflow: visible;
}

.inclusion-item {
    background-color: #F8F7F2; /* Fondo de los cuadros de inclusión */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 25px 15px;
    font-family: 'Times New Roman', serif;
    color: var(--color-texto-oscuro);
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1; /* Para que el shadow aparezca encima */
}
.inclusion-item:nth-child(2) { /* Segundo elemento (Equipos Wifi) */
    border-right: none;
}
.inclusion-item:nth-child(3), .inclusion-item:nth-child(4) { /* Tercer y Cuarto elemento (Gigas Ilimitados, Calidad de Servicio) */
    border-bottom: none;
}
.inclusion-item:hover {
    /* Mueve la caja hacia arriba 5px */
    transform: translateY(-5px); 
    
    /* Aplicar una sombra más intensa para el efecto "flotante" */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); 
    
    /* Aumentar el z-index para que la sombra no quede detrás de otros elementos */
    z-index: 10;
}

.inclusion-item img {
    width: 90px; 
    height: 90px;
    margin-bottom: 10px;
}
.contenido-inclusiones-flex {
    display: flex;
    justify-content: center; /* Centrar el bloque completo */
    align-items: center; /* Alineación vertical */
    gap: 20px; /* Espacio entre la imagen y el grid */
    flex-wrap: wrap; /* Para que se apile en móviles */
    max-width: 1000px;
    margin: 0 auto;
}

.imagen-agricultor {
    /* Mantenemos las dimensiones para asegurar el óvalo */
    width: 650px;
    height: 300px; 
    
    /* CRÍTICO: Elipse forzada para el marco y la máscara */
    border-radius: 50%; 
    
    /* Sombra y máscara */
    box-shadow: 0 0 0 10px white, 0 0 0 12px #987d6e; 
    overflow: hidden; 
    
    flex-shrink: 0;
}
.imagen-agricultor img {
    width: 100%;
    height: 100%;
    
    /* CRÍTICO: CAMBIAR a 'fill' para forzar a la imagen a rellenar el óvalo, aunque se distorsione */
    object-fit: fill; 
    
    /* CRÍTICO: Aseguramos que no tenga border-radius circular */
    border-radius: 0; 
}
.connect-world-cta {
    /* Fondo que resalte, usando el color principal o una variación */
    background-image: url('images/fondo_connect.png'); 
    background-size: cover; /* Asegura que la imagen cubra todo el fondo */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat;
    position: relative; /* Necesario para la capa oscura de texto */
    
    padding: 140px 5%;
    text-align: center;
    margin-top: 40px;
}
/* Creamos una capa superpuesta semi-oscura para mejorar la legibilidad del texto blanco */
.connect-world-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1); /* Capa negra con 40% de opacidad */
    z-index: 1; /* Debe estar encima de la imagen pero debajo del texto */
}

.connect-world-cta h2,
.connect-world-cta p,
.cta-content {
    position: relative; /* Colocamos el contenido encima del overlay */
    z-index: 2;
}
.connect-world-cta p {
    color: #f0f0f0; 
    
    /* CRÍTICO: Aumentamos el tamaño de la fuente (de 1.2em a 1.4em) */
    font-size: 1.4em; 
    
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.connect-world-cta h2 {
    color: white;
    font-size: 2.8em;
    font-weight: bold;
    margin-bottom: 15px;
    font-family: Arial, Helvetica, sans-serif;
}
.cta-button {
    display: inline-block;
    padding: 15px 30px;
    
    /* Botón contrastante (Ejemplo: Blanco/Claro) */
    background-color: #00BFFF; 
    color: white; /* Texto de botón con el color principal */
    
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.cta-button:hover {
    background-color: #00A3CCC;
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.sobre-nosotros {
    background-image: none; 
    padding: 0; 
    margin: 0;
    min-height: 0;
}

/* 2. Contenedor Flexible (las dos mitades) */
.sobre-nosotros-flex-container {
    display: flex;
    max-width: 1200px; 
    margin: 50px auto; 
    min-height: 550px; /* Altura fija para que los fondos se muestren */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 
    overflow: hidden;
}

/* 3. Columna Izquierda (Fondo Video/GIF y la Caja de Texto) */
.columna-izquierda {
    flex: 1; /* Ocupa la mitad (50%) */
    background-image: url('images/fondo-izq.png');
    /*background-color: #f0f0f0; /* Color temporal si no hay video/GIF */
    /* Si tienes un GIF de fondo, podrías usar: background-image: url('images/fondo-animado.gif'); */
    
    display: flex; /* Para centrar la caja de texto */
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
}

/* 4. Columna Derecha (Fondo de la Imagen Estática) */
.columna-derecha {
    flex: 1; /* Ocupa la otra mitad (50%) */
    /* CRÍTICO: Aplicamos la imagen de fondo estática aquí */
    background-image: url('images/fondo_acerca_de.jpg'); 
    background-size: cover; 
    background-position: center;
}

/* 5. La Caja de Texto Flotante (Ajustamos su posición dentro de la Columna Izquierda) */
.sobre-nosotros .info-box-wrapper {
    /* Contenedor que permite centrar la caja dentro de la columna */
    width: 100%; 
    display: flex;
    justify-content: center;
}

.sobre-nosotros .info-box {
    /* Mantenemos el estilo de la caja oscura, pero ajustamos su ancho */
    background-color: #4B382F; 
    padding: 50px 40px;
    max-width: 90%; 
    margin: 0; /* Aseguramos que no tenga márgenes externos */
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5); 
    color: white; 
    position: relative;
    z-index: 10;
    text-align: center;
}

/* 3. Estilo del Título H2 dentro de la caja */
.sobre-nosotros .info-box h2 {
    color: white; 
    font-size: 2.2em;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 0;
    margin-bottom: 20px;
    
    /* Línea decorativa como en la imagen de referencia */
    border-bottom: 2px solid white; 
    padding-bottom: 5px;
    display: inline-block; /* Para que el borde solo cubra el ancho del texto */
}

/* 4. Estilo del Párrafo */
.sobre-nosotros .info-box p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 0;
}

/* 5. Responsive para móviles: centrar la caja y darle margen completo */
@media (max-width: 768px) {
    .sobre-nosotros-flex-container {
        flex-direction: column;
        min-height: auto;
        box-shadow: none;
        margin: 0;
    }
    
    .columna-izquierda, .columna-derecha {
        flex: none;
        width: 100%;
        min-height: 300px; /* Asegura que ambos fondos se vean en móvil */
    }
    
    .columna-izquierda {
        padding: 20px 0;
    }
    
    .columna-derecha {
        /* Para que la imagen estática se vea bien en la parte inferior */
        background-position: center bottom;
    }
    
    .sobre-nosotros .info-box {
        max-width: 90%;
        margin: 0 auto;
    }
}
/* --- Contenedor de las dos mitades --- */
.header-split {
    display: flex;
    width: 100%;
    height: 450px; /* Aumentamos un poco la altura para que el mapa luzca mejor */
    overflow: hidden;
}

/* --- Estilo para la imagen de la izquierda --- */
.split-img {
    flex: 1;
}

.split-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Estilo para el mapa de la derecha --- */
.split-map {
    flex: 1;
    position: relative;
    background-color: #eee; /* Color de carga */
}

.split-map iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* Estilo para el enlace de "Ver mapa más grande" que aparece abajo */
.split-map small {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 10px;
}

/* Ajuste para móviles: que el mapa aparezca debajo de la imagen */
@media (max-width: 768px) {
    .header-split {
        flex-direction: column;
        height: auto;
    }
    .split-img, .split-map {
        width: 100%;
        height: 300px;
    }
}
/* Título Principal Naranja/Café */
.main-title {
    text-align: center;
    color: #9C5231; /* Tono de la captura */
    font-size: 3em;
    font-weight: 800;
    margin: 40px 0;
    font-family: 'Arial Black', sans-serif;
}

/* Detalles de contacto */
.contacto-detalles {
    text-align: center;
    font-family: Arial, sans-serif;
    color: #555;
    margin-bottom: 40px;
}

.whatsapp-centrado {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: bold;
    font-size: 1.2em;
    color: #333;
    margin-top: 10px;
}

.whatsapp-centrado img {
    width: 24px;
}

/* Sección Formulario */
.formulario-seccion {
    max-width: 600px;
    margin: 0 auto 60px;
    padding: 0 20px;
}

.form-instruccion {
    text-align: center;
    color: #2D68C4;
    font-size: 0.95em;
    margin-bottom: 25px;
    line-height: 1.4;
}

.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 0.8em;
    color: #2D68C4;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Campos con fondo azul claro como la captura */
.form-group input, .form-group textarea {
    background-color: #E8F0FE; 
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.9em;
}

.form-group textarea {
    height: 100px;
    resize: none;
}

.btn-enviar {
    align-self: center;
    background-color: #2D68C4;
    color: white;
    padding: 10px 40px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

/* Horario de Atención Elegante */
.horario-seccion {
    text-align: center;
    margin-bottom: 80px;
    font-family: 'Times New Roman', serif;
}

.horario-seccion h2 {
    font-size: 3em;
    margin-bottom: 5px;
    color: #333;
}

.visitanos {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.horas, .domingo {
    color: #888;
    font-size: 0.9em;
}
/* --- Contenedor Principal --- */
.container-calidad {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: Arial, sans-serif;
    color: #333;
}

.container-calidad h1 {
    color: #9C5231; /* Tono café de los títulos */
    font-size: 1.8em;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.container-calidad p {
    line-height: 1.6;
    margin-bottom: 20px;
    color: #666;
}

/* --- Lista de Ventajas --- */
.lista-ventajas {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.lista-ventajas li {
    margin-bottom: 20px;
    padding-left: 20px;
    position: relative;
}

.lista-ventajas li::before {
    content: "•";
    color: #333;
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
}

.lista-ventajas strong {
    display: block;
    font-size: 1.1em;
    margin-bottom: 5px;
    color: #333;
}

/* --- Estilos de la Tabla (Basado en la Captura) --- */
.tabla-calidad {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.85em;
}

.tabla-calidad thead th {
    background-color: #E8F0FE; /* Azul claro de la cabecera */
    color: #2D68C4;
    padding: 12px;
    border: 1px solid #ccc;
    text-align: center;
    font-weight: bold;
}

/* Color amarillo para la fila de título superior si la incluyes */
.tabla-titulo-amarillo {
    background-color: #FFFF00 !important;
    color: #000 !important;
    text-align: center;
    font-weight: bold;
}

.tabla-calidad td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
}

/* Alinear a la izquierda la columna de Observación y Parámetro */
.tabla-calidad td:first-child,
.tabla-calidad td:last-child {
    text-align: left;
    padding-left: 15px;
}

/* Filas alternas para mejor lectura */
.tabla-calidad tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}