/* ======== ESTILOS GLOBALES ======== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Un reseteo básico para que las cajas se midan bien */
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}

.contenedor {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto; /* Centra el contenido */
}

/* ======== CABECERA ======== */
.cabecera {
    background-color: #ffffff;
    padding: 1.5rem 0;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.cabecera .contenedor {
    display: flex;
    justify-content: space-between; /* El logo a la izquierda, la nav a la derecha */
    align-items: center;
}

/* Estilos para el nuevo logo en imagen */
.logo-link {
    text-decoration: none; /* Saca el subrayado del enlace */
}

.logo-imagen {
    height: 100px;  /* Ajusta esta altura como más te guste (ej: 50px, 60px) */
    width: auto;   /* Mantiene la proporción de la imagen */
    display: block;/* Asegura que la imagen se comporte bien */
}

.navegacion a {
    margin-left: 1.5rem; /* 24px */
    text-decoration: none;
    color: #555;
    font-weight: 600;
}

.navegacion a:hover {
    color: #0056b3;
}

/* ======== SECCIÓN HERO ======== */
.hero {
    background-color: #0056b3; /* Fondo azul */
    color: #ffffff;
    padding: 5rem 0; /* 80px arriba y abajo */
    text-align: center;
}

.hero h2 {
    font-size: 2.5rem; /* 40px */
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.125rem; /* 18px */
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.btn-principal {
    background-color: #ffffff;
    color: #0056b3;
    padding: 0.8rem 2rem; /* 12px 32px */
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    transition: all 0.3s ease;
}

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

/* ======== SECCIONES GENERALES ======== */
.seccion-servicios,
.seccion-portafolio {
    padding: 4rem 0; /* 64px arriba y abajo */
    text-align: center;
}

.seccion-portafolio {
    background-color: #ffffff; /* Fondo blanco para alternar */
}

.seccion-servicios {
                background-color: #ffffff; /* Fondo blanco para alternar */
}

h3 {
    font-size: 2rem; /* 32px */
    margin-bottom: 2.5rem; /* 40px */
}

/* ======== GRILLA DE SERVICIOS ======== */
.grilla-servicios {
    display: flex;
    justify-content: space-between;
    gap: 2rem; /* Espacio entre las tarjetas */
}

.tarjeta-servicio {
    background-color: #ffffff;
    padding: 2rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    flex-basis: 31%; /* Cada tarjeta ocupa aprox un tercio */
    text-align: left;
}

.tarjeta-servicio h4 {
    font-size: 1.25rem; /* 20px */
    color: #0056b3;
    margin-bottom: 0.5rem;
}

/* ======== GRILLA DE PORTAFOLIO ======== */
.grilla-portafolio {
    display: flex;
    justify-content: space-around;
    gap: 2rem;
}

.tarjeta-proyecto {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    flex-basis: 45%; /* Cada tarjeta ocupa casi la mitad */
    text-align: left;
    overflow: hidden; /* Para que la imagen no se salga */
}

.tarjeta-proyecto .imagen-proyecto {
    width: 100%;
    /* La altura se la dimos en el HTML temporalmente */
}

.tarjeta-proyecto h4,
.tarjeta-proyecto p {
    padding: 0 1.5rem;
}

.tarjeta-proyecto h4 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
}

.tarjeta-proyecto p {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.btn-secundario {
    display: block;
    width: fit-content; /* Se ajusta al texto */
    margin: 0 auto 1.5rem 1.5rem;
    background-color: #333;
    color: #ffffff;
    padding: 0.6rem 1.2rem;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
}

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

/* ======== PIE DE PÁGINA ======== */
.pie-pagina {
    background-color: #333;
    color: #f0f0f0;
    text-align: center;
    padding: 2rem 0;
    margin-top: 2rem;
}

/* ======== RESPONSIVE (Para Celulares) ======== */
@media (max-width: 768px) {
    .cabecera .contenedor {
        flex-direction: column; /* El logo arriba y la nav abajo */
        gap: 1rem;
    }

    .navegacion a {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    .hero h2 {
        font-size: 2rem; /* Más chico en celulares */
    }

    .grilla-servicios,
    .grilla-portafolio {
        flex-direction: column; /* Las tarjetas una abajo de la otra */
    }
}

/* ======== ESTILOS PÁGINA DE CONTACTO ======== */

.seccion-contacto {
    padding: 4rem 0;
    text-align: center;
    background-color: #ffffff;
}

.formulario-contacto {
    max-width: 600px;
    margin: 2rem auto 0 auto; /* 32px arriba, centrado, 0 abajo */
    text-align: left;
}

.campo-form {
    margin-bottom: 1.5rem; /* 24px */
}

.campo-form label {
    display: block;
    margin-bottom: 0.5rem; /* 8px */
    font-weight: 600;
}

.campo-form input[type="text"],
.campo-form input[type="email"],
.campo-form input[type="tel"],
.campo-form textarea {
    width: 100%;
    padding: 0.8rem; /* 12px */
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem; /* 16px */
    font-family: Arial, sans-serif;
}

.campo-form textarea {
    resize: vertical; /* Permite al usuario ajustar la altura */
}

/* El botón ya tiene estilo .btn-principal, pero podemos ajustarlo */
.formulario-contacto .btn-principal {
    background-color: #0056b3;
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    width: 100%; /* El botón ocupa todo el ancho */
}

.formulario-contacto .btn-principal:hover {
    background-color: #004a99; /* Un azul un poco más oscuro */
}

/* ======== ESTILOS PÁGINA PORTAFOLIO ======== */

.seccion-portafolio-pagina {
    padding: 4rem 0;
    text-align: center;
    background-color: #ffffff; /* Fondo blanco */
}

.subtitulo-portafolio {
    font-size: 1.125rem; /* 18px */
    margin-bottom: 2.5rem; /* 40px, igual que el h3 */
    color: #555;
}

/* La .grilla-portafolio y .tarjeta-proyecto ya están definidas, 
   así que se reutilizarán automáticamente. ¡Eficiencia! */
   
   /* ======== ESTILOS PÁGINA SOBRE MÍ ======== */

.seccion-sobre-mi {
    padding: 4rem 0;
    background-color: #f9f9f9; /* Un fondo suave */
}

.contenedor-sobre-mi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
}

.imagen-sobre-mi {
    flex-shrink: 0; /* Evita que la imagen se encoja */
}

.texto-sobre-mi {
    text-align: left;
}

.texto-sobre-mi h3 {
    text-align: left;
    margin-bottom: 1.5rem; /* 24px */
}

.texto-sobre-mi p {
    margin-bottom: 1rem; /* 16px */
    font-size: 1.1rem; /* 17-18px */
    color: #555;
}

.texto-sobre-mi .btn-principal {
    margin-top: 1rem;
}

/* Responsive para "Sobre Mí" */
@media (max-width: 768px) {
    .contenedor-sobre-mi {
        flex-direction: column;
        text-align: center;
    }

    .texto-sobre-mi h3 {
        text-align: center;
    }

    .imagen-sobre-mi {
        height: 200px;
        width: 200px;
    }
}

/* ======== ESTILOS IMAGEN PORTAFOLIO ======== */

.tarjeta-proyecto .imagen-proyecto {
    width: 100%;       /* Ocupa el 100% del ancho de la tarjeta */
    height: 220px;     /* Le damos una altura fija a todas las imágenes */
    object-fit: cover; /* Esta es la magia: la imagen rellena el espacio sin deformarse */
    object-position: top center; /* Prioriza mostrar la parte de ARRIBA de la imagen */
}

/* ======== ESTILOS SECCIÓN PRECIOS ======== */

.seccion-precios {
    padding: 4rem 0;
    text-align: center;
    background-color: #f9f9f9; /* Mismo fondo que "Servicios" */
}

.subtitulo-precios {
    font-size: 1.125rem; /* 18px */
    margin-bottom: 2.5rem; /* 40px */
    color: #555;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.grilla-precios {
    display: flex;
    justify-content: center; /* Centra las tarjetas si no son 3 exactas */
    gap: 2rem; /* Espacio entre las tarjetas */
    flex-wrap: wrap; /* Para que se apilen en celulares */
}

.tarjeta-precio {
    background-color: #ffffff;
    padding: 2rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    flex-basis: 320px; /* Un ancho base para cada tarjeta */
    flex-grow: 1; /* Permite que crezcan si hay espacio */
    max-width: 380px; /* Un ancho máximo */
    text-align: left;
    
    /* Flexbox para alinear el botón al final */
    display: flex;
    flex-direction: column;
    
    position: relative; /* Necesario para la etiqueta "Recomendado" */
    overflow: hidden; /* Para contener la etiqueta */
}

.tarjeta-precio h4 {
    font-size: 1.5rem; /* 24px */
    color: #0056b3; /* Color azul principal */
    margin-bottom: 0.5rem;
}

.ideal-para {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 1.5rem;
    min-height: 50px; /* Ayuda a alinear las tarjetas */
}

.lista-caracteristicas {
    list-style: none; /* Saca los puntos de la lista */
    padding-left: 0;
    margin-bottom: 2rem;
}

.lista-caracteristicas li {
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.95rem;
}

/* Agrega un "tick" verde a cada característica */
.lista-caracteristicas li::before {
    content: '✔';
    color: #28a745; /* Un color verde */
    position: absolute;
    left: 0;
    top: 0;
}

/* Estilo para el botón dentro de la tarjeta */
.tarjeta-precio .btn-secundario {
    margin-top: auto; /* ¡Este es el truco! Empuja el botón al fondo */
    text-align: center;
    width: 100%; /* Opcional: hace que el botón ocupe todo el ancho */
}

/* --- Estilo para el paquete Recomendado --- */
.tarjeta-precio.recomendado {
    border: 2px solid #0056b3; /* Borde azul más grueso */
    box-shadow: 0 8px 20px rgba(0, 86, 179, 0.15);
}

.etiqueta-recomendado {
    position: absolute;
    top: -1px; /* Alineado arriba */
    right: -1px; /* Alineado a la derecha */
    background-color: #0056b3; /* Color azul principal */
    color: #ffffff;
    padding: 0.4rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 0 0 0 8px; /* Redondea solo la esquina inferior izquierda */
}

/* --- Responsive para Precios --- */
@media (max-width: 768px) {
    .grilla-precios {
        flex-direction: column;
        align-items: center; /* Centra las tarjetas en la columna */
    }
    
    .tarjeta-precio {
        width: 100%; /* Ocupa todo el ancho en celulares */
        max-width: 400px; /* Pero con un máximo */
    }
}

/* ======== ESTILOS ADICIONALES SECCIÓN PRECIOS (NUEVA ESTRUCTURA) ======== */

/* Ajustes a la tarjeta de precio */
.tarjeta-precio .ideal-para {
    font-size: 0.95rem;
    color: #555;
    min-height: 80px; /* Más espacio para alinear */
}

.tarjeta-precio .lista-caracteristicas li {
    font-size: 0.9rem; /* Un poco más chico para que entre bien */
    line-height: 1.5;
}

.tarjeta-precio .lista-caracteristicas li::before {
    content: ''; /* Sacamos el '✔' para usar el emoji de HTML */
}

.precio-paquete {
    font-size: 1.8rem;
    font-weight: 700;
    color: #0056b3;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
}

.precio-paquete span {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    color: #777;
}

/* 4. Estilos para "Consideraciones Importantes" */
.contenedor-adicional {
    max-width: 800px;
    margin: 3rem auto 0 auto;
    padding: 2rem;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: left;
}

.contenedor-adicional h4 {
    font-size: 1.25rem;
    color: #333;
    margin-bottom: 1rem;
}

.contenedor-adicional p {
    color: #555;
    line-height: 1.7;
}

/* 5. Estilos para "Upsell Mantenimiento" */
.upsell-mantenimiento {
    background-color: #f0f5fa; /* Un azul muy claro */
    border-color: #cce0f5;
    text-align: center;
}

.upsell-mantenimiento h4 {
    color: #0056b3;
}

.upsell-mantenimiento .btn-secundario {
    margin-top: 1rem;
    display: inline-block;
    width: auto; /* Que no ocupe el 100% */
}

/* 6. Estilos para "Cierre Precios" */
.cierre-precios {
    background-color: #ffffff;
    text-align: center;
    border: none; /* Sin borde */
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
}

.cierre-precios .btn-principal {
    margin-top: 1.5rem;
    background-color: #0056b3;
    color: #ffffff;
    display: inline-block; /* Para que no ocupe todo el ancho */
    width: auto;
    padding: 0.8rem 2rem;
}

.cierre-precios .btn-principal:hover {
    background-color: #004a99;
}