/* --- Reseteo básico y Estilos Generales --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html {
    scroll-behavior: smooth;
}
body {
    background-color: #f4f7f6;
}

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

/* --- Estilos del Header --- */
.header {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

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

/* --- Logotipo --- */
.logo a {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    text-decoration: none;
    letter-spacing: 1px;
}

.logo a span {
    color: #298d46;
}

/* --- Menú de Navegación (Escritorio - General) --- */
.nav-menu ul {
    display: flex;
    list-style: none;
    align-items: center;
}

.nav-menu ul li {
    margin-left: 20px;
    position: relative; /* Esencial para posicionar el submenú en PC */
}

.nav-menu ul li a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.3s ease;
    padding: 8px 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px; /* Espacio para la flechita */
}

.nav-menu ul li a .arrow {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.nav-menu ul li a:hover,
.nav-menu ul li a.active {
    color: #298d46;
}

/* Botón destacado */
.nav-menu ul li a.btn-contacto {
    background-color: #298d46;
    color: #fff;
    padding: 9px 20px;
}

.nav-menu ul li a.btn-contacto:hover {
    background-color: #222831;
    color: #fff;
}

/* --- ESTILOS SUBMENÚ (Escritorio por defecto) --- */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    min-width: 200px;
    flex-direction: column;
    padding: 10px 0;
    z-index: 1100;

    /* Forzamos el estado oculto inicial de forma estricta */
    display: none !important; 
}

/* Se muestra en bloque únicamente cuando JS añade la clase .open */
.submenu.open {
    display: flex !important;
}

/* Rotación de flecha mediante la clase que añade JS al padre */
.has-submenu.active-arrow > a .arrow {
    transform: rotate(180deg);
}

/* --- RESPONSIVE (Diseño Móvil) --- */
@media (max-width: 768px) {
    .submenu {
        position: static; /* En cascada debajo del texto en móviles */
        width: 100%;
        box-shadow: none;
        background-color: #f9f9f9;
        padding: 0;
        display: none !important; 
    }

    .submenu.open {
        display: block !important;
        padding: 10px 0;
    }
}

/* --- Botón Hamburguesa (Oculto de forma estricta en PC) --- */
.menu-toggle {
    display: none !important;
    background: none;
    border: none;
    font-size: 24px;
    color: #333;
    cursor: pointer;
    outline: none;
}

/* --- RESPONSIVE (Diseño Móvil) --- */
@media (max-width: 768px) {
    /* Mostramos el botón de menú únicamente en pantallas de móvil */
    .menu-toggle {
        display: block !important;
    }

    .nav-menu {
        position: absolute;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: #ffffff;
        transition: left 0.4s ease;
        overflow-y: auto; /* Permite hacer scroll si hay muchos menús desplegados */
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-menu ul {
        flex-direction: column;
        padding-top: 20px;
    }

    .nav-menu ul li {
        margin: 5px 0;
        width: 100%;
        text-align: center;
    }

    .nav-menu ul li a {
        font-size: 18px;
        display: flex;
        width: 100%;
        padding: 12px 20px;
        justify-content: space-between; /* Alinea texto a la izquierda y flecha a la derecha */
    }

    /* Adaptación del submenú para móvil (Comportamiento en cascada) */
    .submenu {
        position: static; /* Pierde el comportamiento flotante absoluto de PC */
        width: 100%;
        box-shadow: none;
        background-color: #f9f9f9; /* Un tono gris claro para diferenciarse */
        padding: 0;
        display: none !important; /* Se mantiene oculto hasta que se pulse */
    }

    /* Cuando se abre en móvil se muestra en cascada vertical */
    .submenu.open {
        display: block !important;
        padding: 10px 0;
    }

    /* Modificación de la flecha para el clic en móvil */
    .nav-menu ul li a .arrow {
        display: inline-block;
        padding: 10px 15px; /* Hace la zona del botón más grande para el dedo */
        margin-left: 15px;
        transition: transform 0.3s ease;
    }
}
/* ==========================================
   1. HERO SECTION
   ========================================== */
.hero-section {
    /* Compensamos los 70px que mide el menú fijo + espacio de separación */
    padding: 110px 20px 40px 20px; 
    text-align: center; 
    background-color: #f9f9f9; 
}

.hero-title {
    font-size: 2rem;
    color: #298d46; 
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
}

.hero-text {
    font-size: 1.1rem;
    color: #555555;
    line-height: 1.6;
    max-width: 100%; 
    margin: 0 auto; 
}

/* ==========================================
   2. SECCIÓN CONTACTO CON FONDO
   ========================================== */
.contacto-section-bg {
    position: relative;
    padding: 60px 20px;
    background-image: url('img/ceped-artificial.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

.contacto-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65); 
    z-index: 1;
}

.contacto-section-bg .container {
    position: relative;
    z-index: 2;
}

.container-flex {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.contacto-info h2 {
    font-size: 1.8rem;
    color: #ffffff;
    margin-bottom: 20px;
    font-weight: 700;
}

.contacto-info p {
    font-size: 1.1rem;
    color: #e5e5e5;
    line-height: 1.6;
    margin-bottom: 15px;
}

.contacto-form-container {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border-top: 5px solid #298d46;
}

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

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333333;
    font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
    background-color: #ffffff;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #298d46;
    outline: none;
}

.btn-enviar {
    background-color: #298d46;
    color: #ffffff;
    border: none;
    padding: 14px 20px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 6px;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-enviar:hover {
    background-color: #1f6b34;
}

/* ==========================================
   3. ADAPTACIÓN PARA ESCRITORIO (Media Query)
   ========================================== */
@media (min-width: 768px) {
    /* Ajuste Hero Escritorio */
    .hero-section {
        padding: 150px 40px 80px 40px; 
        text-align: left; 
    }

    .hero-title {
        font-size: 3.5rem;
        margin-bottom: 25px;
    }

    .hero-text {
        font-size: 1.4rem;
        margin: 0;
    }

    /* Contacto en dos columnas */
    .contacto-section-bg {
        padding: 100px 40px;
        background-attachment: fixed;
    }

    .container-flex {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .contacto-info {
        flex: 1;
        padding-right: 60px;
    }

    .contacto-info h2 {
        font-size: 2.8rem;
    }

    .contacto-form-container {
        flex: 1;
        max-width: 480px;
    }
}


/* ==========================================
   4. SECCIÓN REALIDAD (Post-Contacto)
   ========================================== */
.realidad-section {
    padding: 60px 20px;
    background-color: #f4f7f6; /* Fondo gris claro idéntico al body */
    text-align: center; /* Centrado en móviles */
}

.realidad-title {
    font-size: 2rem;
    color: #298d46; /* Tu verde corporativo */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.realidad-text {
    font-size: 1.1rem;
    color: #555555;
    line-height: 1.7;
    max-width: 100%;
    margin: 0 auto;
}

/* Adaptación para Escritorio (Pantallas de PC) */
@media (min-width: 768px) {
    .realidad-section {
        padding: 80px 40px;
        text-align: left; /* Alineado a la izquierda en PC como el resto de textos */
    }

    .realidad-title {
        font-size: 2.8rem;
        margin-bottom: 25px;
    }

    .realidad-text {
        font-size: 1.2rem;
        max-width: 90%; /* Ajuste sutil de anchura para mejorar la lectura horizontal */
        margin: 0;
    }
}

/* ==========================================
   5. SECCIÓN TARIFAS (Pricing Cards)
   ========================================== */
.tarifas-section {
    padding: 60px 20px;
    background-color: #ffffff; /* Fondo blanco para contrastar con el gris */
    text-align: center;
}

.tarifas-title {
    font-size: 2rem;
    color: #298d46;
    font-weight: 700;
    margin-bottom: 10px;
}

.tarifas-subtitle {
    font-size: 1.1rem;
    color: #666666;
    margin-bottom: 40px;
}

/* Rejilla adaptativa */
.tarifas-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna en móvil */
    gap: 30px;
    align-items: stretch;
}

/* Estilo de las Tarjetas */
.tarjeta-precio {
    background-color: #f4f7f6;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 35px 25px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta-precio:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* Tarjeta destacada (Modelo 18€) */
.tarjeta-precio.destacado {
    border: 2px solid #298d46;
    background-color: #ffffff;
    box-shadow: 0 5px 15px rgba(41, 141, 70, 0.1);
}

/* Etiquetas superiores (Oferta / Calidad-Precio) */
.tarjeta-tag {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #222831;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}
.tarjeta-precio.destacado .tarjeta-tag {
    background-color: #298d46;
}

/* Cabecera del precio */
.precio-header {
    margin-bottom: 15px;
}

.precio-header .numero {
    font-size: 3.5rem;
    font-weight: 800;
    color: #222831;
}

.precio-header .unidad {
    font-size: 1.2rem;
    color: #666666;
    font-weight: 500;
}

.tarjeta-precio h3 {
    font-size: 1.3rem;
    color: #333333;
    margin-bottom: 15px;
}

.tarjeta-desc {
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.5;
    margin-bottom: 20px;
    min-height: 60px; /* Alinea los textos */
}

/* Lista de características */
.tarjeta-caracteristicas {
    list-style: none;
    text-align: left;
    margin-bottom: 30px;
    padding: 0;
}

.tarjeta-caracteristicas li {
    font-size: 0.95rem;
    color: #444444;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.no-instalacion {
    color: #c0392b !important; /* Rojo descriptivo */
    font-weight: 600;
}

.instalacion-si {
    color: #298d46 !important;
    font-weight: 600;
}

/* Botón Saber Más */
.btn-tarifa {
    display: block;
    text-decoration: none;
    background-color: #222831;
    color: #ffffff;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 6px;
    text-align: center;
    transition: background-color 0.3s ease;
    margin-top: auto; /* Empuja el botón siempre al fondo */
}

.tarjeta-precio.destacado .btn-tarifa,
.btn-tarifa:hover {
    background-color: #298d46;
}

.tarjeta-precio.destacado .btn-tarifa:hover {
    background-color: #1f6b34;
}

/* --- Cambios para Escritorio (Media Query) --- */
@media (min-width: 600px) {
    .tarifas-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas medianas o tablets */
    }
}

@media (min-width: 992px) {
    .tarifas-section {
        padding: 80px 40px;
    }
    
    .tarifas-title {
        font-size: 2.8rem;
    }
    
    .tarifas-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columnas perfectas en PC */
    }
}


/* ==========================================
   6. ESTILOS DEL FOOTER
   ========================================== */
.main-footer {
    background-color: #222831; /* Fondo oscuro premium */
    color: #b0b5bc; /* Texto claro pero suave para la lectura */
    padding: 60px 0 0 0;
    font-size: 0.95rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 columna en móviles */
    gap: 40px;
    padding-bottom: 40px;
}

.footer-col h4 {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
}

/* Línea verde decorativa debajo de los títulos del footer */
.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 35px;
    height: 2px;
    background-color: #298d46;
}

/* Estilos específicos de la columna de marca */
.footer-logo {
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.footer-logo span {
    color: #298d46;
}

.footer-about {
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Redes sociales */
.footer-socials {
    display: flex;
    gap: 12px;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border-radius: 50%;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.footer-socials a:hover {
    background-color: #298d46;
    color: #ffffff;
}

/* Listas de enlaces */
.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links li a {
    color: #b0b5bc;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
    display: inline-block;
}

.footer-links li a:hover {
    color: #298d46;
    padding-left: 5px; /* Efecto sutil de desplazamiento al pasar el ratón */
}

/* Lista de contacto */
.footer-contact {
    list-style: none;
    padding: 0;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.footer-contact li i {
    color: #298d46;
    margin-top: 3px;
    font-size: 1.1rem;
}

.footer-contact li a {
    color: #b0b5bc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact li a:hover {
    color: #298d46;
}

/* --- BARRA INFERIOR DE CRÉDITOS --- */
.footer-bottom {
    background-color: #1a1e24; /* Un tono aún más oscuro para separar los créditos */
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.85rem;
}

.footer-bottom-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
}

.legal-links {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.legal-links li a {
    color: #7e848c;
    text-decoration: none;
    transition: color 0.3s ease;
}

.legal-links li a:hover {
    color: #ffffff;
}

/* --- Cambios para Escritorio (Media Query) --- */
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1.5fr; /* Distribución perfecta en 4 columnas en PC */
        gap: 30px;
    }
    
    .footer-bottom-content {
        flex-direction: row; /* En PC se alinea horizontalmente */
        justify-content: space-between;
        text-align: left;
    }
}

/* ==========================================
   7. SECCIÓN MAPA Y DATOS DE CONTACTO
   ========================================== */
.mapa-contacto-section {
    padding: 60px 20px;
    background-color: #ffffff;
}

.container-flex-mapa {
    display: flex;
    flex-direction: column; /* Apilado en móviles */
    gap: 40px;
}

/* Ajustes de la columna del Mapa */
.mapa-col {
    width: 100%;
}

.mapa-col iframe {
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    display: block;
}

/* Ajustes de la columna de Datos */
.datos-col {
    width: 100%;
    text-align: left;
}

.datos-col h2 {
    font-size: 2rem;
    color: #222831;
    font-weight: 700;
    margin-bottom: 15px;
}

.datos-intro {
    font-size: 1.05rem;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 20px;
}

.separador-datos {
    border: 0;
    height: 1px;
    background-color: #e0e0e0;
    margin-bottom: 25px;
}

/* Bloques de información con iconos */
.lista-datos {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-datos li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 22px;
}

.lista-datos li i {
    font-size: 1.2rem;
    color: #298d46; /* Tu verde corporativo */
    background-color: rgba(41, 141, 70, 0.1);
    padding: 12px;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lista-datos strong {
    display: block;
    font-size: 1.1rem;
    color: #222831;
    margin-bottom: 2px;
}

.lista-datos p {
    font-size: 1rem;
    color: #666666;
    margin: 0;
}

.lista-datos a {
    color: #666666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.lista-datos a:hover {
    color: #298d46;
}

/* --- Adaptación para Escritorio (Pantallas de PC) --- */
@media (min-width: 992px) {
    .mapa-contacto-section {
        padding: 80px 40px;
    }

    .container-flex-mapa {
        flex-direction: row; /* Dos columnas una al lado de la otra */
        align-items: center;
        gap: 60px;
    }

    .mapa-col {
        width: 50%; /* Mitad izquierda */
    }

    .datos-col {
        width: 50%; /* Mitad derecha */
    }

    .datos-col h2 {
        font-size: 2.5rem;
    }
}

/* ==========================================
   8. SECCIÓN SERVICIOS Y APLICACIONES (IMÁGENES)
   ========================================== */
.servicios-cesped {
    padding: 60px 20px;
    background-color: #f4f7f6;
    text-align: center;
}

.servicios-main-title {
    font-size: 2rem;
    color: #222831;
    font-weight: 700;
    margin-bottom: 10px;
}

.servicios-main-subtitle {
    font-size: 1.1rem;
    color: #666666;
    margin-bottom: 45px;
}

/* Rejilla responsiva */
.servicios-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

/* Tarjetas individuales */
.servicio-card {
    background-color: #ffffff;
    border: 1px solid #eef2f1;
    border-radius: 12px;
    padding: 0 0 30px 0; /* Sin padding arriba para que la imagen toque los bordes */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden; /* Evita que las esquinas de la imagen sobresalgan de las tarjetas redondeadas */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.servicio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

/* Contenedor e Imagen */
.servicio-img-container {
    width: 100%;
    height: 200px; /* Altura fija para que todas las tarjetas sean iguales */
    overflow: hidden;
    margin-bottom: 25px;
}

.servicio-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Centra y ajusta la foto automáticamente sin deformarla */
    transition: transform 0.3s ease;
}

/* Efecto de zoom en la imagen al pasar el ratón por la tarjeta */
.servicio-card:hover .servicio-img {
    transform: scale(1.05);
}

.servicio-card h3 {
    font-size: 1.25rem;
    color: #222831;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.4;
    padding: 0 20px; /* Separación lateral para el texto */
}

.servicio-card p {
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 25px;
    padding: 0 20px;
    flex-grow: 1; /* Mantiene alineadas las etiquetas del fondo */
}

/* Etiquetas inferiores */
.servicio-tag {
    font-size: 0.8rem;
    font-weight: 700;
    color: #298d46;
    text-transform: uppercase;
    letter-spacing: 1px;
    background-color: #f4f7f6;
    padding: 6px 14px;
    border-radius: 6px;
    display: inline-block;
}

/* --- Adaptaciones de Pantalla (Media Queries) --- */

@media (min-width: 768px) {
    .servicios-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablets */
    }
}

@media (min-width: 1024px) {
    .servicios-cesped {
        padding: 80px 40px;
    }
    
    .servicios-main-title {
        font-size: 2.8rem;
    }

    .servicios-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en PC */
        gap: 35px;
    }
}

/* ==========================================
   LANDING PAGE: JARDINES ALICANTE
   ========================================== */
html {
    scroll-behavior: smooth;
}

/* Estilos de la Hero Section */
.hero-landing {
    min-height: 80vh; /* Ocupa el 80% de la altura de la pantalla */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    text-align: center;
    color: #ffffff;
    /* El background inline del HTML se encargará de estirar la foto gracias al /cover */
}

@media (min-width: 1024px) {
    .hero-landing {
        min-height: 90vh; /* Un poco más alto en pantallas de ordenador */
        padding: 140px 0;
    }
}

.hero-landing-content {
    max-width: 800px;
}

.hero-tag {
    display: inline-block;
    background-color: #298d46;
    color: #ffffff;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 30px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.hero-landing .hero-title {
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-landing .hero-text {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 35px;
    color: #e2e8f0;
}

/* Botones de acción */
.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    justify-content: center;
}

.btn-principal {
    display: inline-block;
    background-color: #298d46;
    color: #ffffff;
    padding: 15px 30px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 15px rgba(41, 141, 70, 0.3);
}

.btn-principal:hover {
    background-color: #1f6b34;
}

.btn-secundario {
    display: inline-block;
    background-color: transparent;
    color: #ffffff;
    padding: 15px 30px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    border-radius: 6px;
    border: 2px solid #ffffff;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-secundario:hover {
    background-color: #ffffff;
    color: #222831;
}

/* Sección de Beneficios */
.beneficios-section {
    padding: 60px 20px;
    background-color: #ffffff;
    text-align: center;
}

.section-header h2 {
    font-size: 2rem;
    color: #222831;
    margin-bottom: 10px;
}

.section-header p {
    font-size: 1.1rem;
    color: #666666;
    margin-bottom: 40px;
}

.beneficios-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.beneficio-item {
    background-color: #f4f7f6;
    padding: 30px 20px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.beneficio-item:hover {
    transform: translateY(-5px);
}

.beneficio-item i {
    font-size: 2.2rem;
    color: #298d46;
    margin-bottom: 15px;
}

.beneficio-item h3 {
    font-size: 1.25rem;
    color: #222831;
    margin-bottom: 10px;
}

.beneficio-item p {
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.6;
}

.ventajas-directas {
    margin-top: 25px;
    text-align: left;
}

.ventajas-directas p {
    margin-bottom: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ventajas-directas i {
    color: #298d46;
}

/* ==========================================
   MEDIA QUERIES PARA ESCRITORIO
   ========================================== */
@media (min-width: 768px) {
    .beneficios-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-buttons {
        flex-direction: row;
    }
}

@media (min-width: 1024px) {
    .hero-landing {
        padding: 140px 0;
    }
    .hero-landing .hero-title {
        font-size: 3.8rem;
    }
    .hero-landing .hero-text {
        font-size: 1.3rem;
    }
    .beneficios-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .beneficios-section {
        padding: 80px 0;
    }
}

/* ==========================================
   LANDING PAGE: SUELOS DE CAUCHO
   ========================================== */

/* Ajuste específico para la rejilla de aplicaciones */
.aplicaciones-section {
    padding: 60px 20px;
    background-color: #f4f7f6;
    text-align: center;
}

.aplicaciones-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 30px;
}

.app-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    border-left: 5px solid #298d46; /* Tu verde corporativo marcando la tarjeta */
    text-align: left;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.app-card h3 {
    font-size: 1.3rem;
    color: #222831;
    margin-bottom: 12px;
}

.app-card p {
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.6;
}

/* Responsivo para las Aplicaciones */
@media (min-width: 768px) {
    .aplicaciones-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .aplicaciones-section {
        padding: 80px 0;
    }
}

/* ==========================================
   LANDING PAGE: TERRAZAS Y BALCONES
   ========================================== */

.recomendacion-section {
    padding: 40px 20px 80px 20px;
    background-color: #ffffff;
}

.recomendacion-box {
    max-width: 900px;
    margin: 0 auto;
    background: #f4f7f6;
    border-radius: 12px;
    padding: 40px 30px;
    border-top: 6px solid #298d46;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.badge-recomendacion {
    display: inline-block;
    background-color: #298d46;
    color: #ffffff;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    margin-bottom: 15px;
}

.recomendacion-box h2 {
    font-size: 1.6rem;
    color: #222831;
    margin-bottom: 15px;
    text-align: left;
}

.recomendacion-box p {
    font-size: 1rem;
    color: #555555;
    line-height: 1.7;
    text-align: left;
}

@media (min-width: 1024px) {
    .recomendacion-section {
        padding: 50px 0 100px 0;
    }
    .recomendacion-box {
        padding: 50px;
    }
}