/* Estilos para la página "Protectores para zapatos" */

/* Variables para los colores especificados en el documento */
:root {
    --color-principal: #f5b7b1; /* RGB 245, 183, 177 HSL 6, 78%, 83% - Color rosa claro */
    --color-secundario: #fbfcfc; /* RGB 251, 252, 252 HSL 192, 15%, 99% - Color blanco */
    --color-terciario: #aeb6bf; /* RGB 174, 182, 191 HSL 210, 12%, 71% - Color gris azulado */
    --color-texto: #17202A; /* RGB 23, 32, 42 HSL 210, 29%, 13% - Color azul oscuro para texto */
}

/* Estilos generales para resetear los valores por defecto del navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Incluye padding y border en el cálculo del ancho/alto */
}

/* Estilos básicos para el cuerpo de la página */
body {
    font-family: "Times New Roman", serif; /* Fuente especificada en el documento */
    color: var(--color-texto); /* Color de texto especificado */
    background-color: var(--color-secundario); /* Fondo claro para toda la página */
    line-height: 1.6; /* Mejora la legibilidad del texto */
}

/* Contenedor principal para centrar el contenido y mantener márgenes consistentes */
.container {
    max-width: 1200px; /* Ancho máximo para evitar líneas muy largas en pantallas grandes */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
    padding: 20px; /* Espacio interno para que el contenido no toque los bordes */
}

/* Estilo para el encabezado de la página */
header {
    background-color: var(--color-principal); /* Fondo rosa claro para destacar el encabezado */
    padding: 20px 0; /* Espacio vertical para separar del borde */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra suave para dar profundidad */
}

/* Título principal del encabezado */
header h1 {
    text-align: center; /* Centrado horizontal */
    margin-bottom: 20px; /* Espacio antes del menú de navegación */
    color: var(--color-texto); /* Color de texto consistente */
}

/* Estilo para la lista de navegación */
nav ul {
    display: flex; /* Convierte la lista en un contenedor flexible */
    justify-content: center; /* Centra los elementos horizontalmente */
    list-style: none; /* Elimina los marcadores de lista */
}

/* Elementos individuales de la lista de navegación */
nav ul li {
    margin: 0 15px; /* Espacio horizontal entre elementos del menú */
}

/* Enlaces de navegación */
nav ul li a {
    text-decoration: none; /* Elimina el subrayado predeterminado */
    color: var(--color-texto); /* Color de texto consistente */
    font-weight: bold; /* Texto en negrita para destacar */
    transition: all 0.3s ease; /* Transición suave para efectos hover */
}

/* Efecto hover para los enlaces de navegación */
nav ul li a:hover {
    color: var(--color-secundario); /* Cambia a color blanco al pasar el cursor */
    text-decoration: underline; /* Agrega subrayado al pasar el cursor */
}

/* Sección de banner principal */
#banner {
    background-color: var(--color-terciario); /* Fondo gris azulado */
    padding: 60px 0; /* Espacio vertical amplio para destacar */
    text-align: center; /* Texto centrado */
    margin-bottom: 40px; /* Espacio antes de la siguiente sección */
}

/* Contenedor del contenido del banner */
.banner-content {
    max-width: 800px; /* Limita el ancho del texto para mejor legibilidad */
    margin: 0 auto; /* Centra horizontalmente */
}

/* Título del banner */
.banner-content h2 {
    font-size: 2.5rem; /* Tamaño grande para llamar la atención */
    margin-bottom: 20px; /* Espacio antes del párrafo */
}

/* Párrafo del banner */
.banner-content p {
    font-size: 1.2rem; /* Tamaño ligeramente más grande para mejor legibilidad */
}

/* Estilo general para todas las secciones */
section {
    margin: 40px 0; /* Espacio vertical entre secciones */
}

/* Títulos de sección */
section h2 {
    text-align: center; /* Centrado horizontal */
    margin-bottom: 30px; /* Espacio antes del contenido */
    position: relative; /* Para posicionar el pseudo-elemento decorativo */
}

/* Línea decorativa debajo de los títulos de sección */
section h2:after {
    content: ''; /* Necesario para que el pseudo-elemento aparezca */
    position: absolute; /* Posicionamiento absoluto respecto al título */
    bottom: -10px; /* 10px debajo del título */
    left: 50%; /* Centrado horizontal */
    transform: translateX(-50%); /* Ajuste para centrar perfectamente */
    width: 100px; /* Ancho de la línea */
    height: 3px; /* Altura/grosor de la línea */
    background-color: var(--color-principal); /* Color rosa para destacar */
}

/* Estilo para las tarjetas de objetivo general y específicos */
.objetivo-general, .objetivos-especificos {
    background-color: var(--color-secundario); /* Fondo blanco */
    border-radius: 10px; /* Esquinas redondeadas */
    padding: 20px; /* Espacio interno */
    margin-bottom: 30px; /* Espacio antes del siguiente elemento */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Sombra suave para dar profundidad */
}

/* Ajuste de la lista de objetivos específicos */
.objetivos-especificos ul {
    padding-left: 20px; /* Sangría para los marcadores de lista */
}

/* Elementos individuales de lista */
.objetivos-especificos li {
    margin-bottom: 10px; /* Espacio entre elementos de lista */
}

/* Diseño de dos columnas para misión y visión */
.split-section {
    display: flex; /* Contenedor flexible */
    flex-wrap: wrap; /* Permite que las columnas se apilen en pantallas pequeñas */
    gap: 30px; /* Espacio entre columnas */
}

/* Estilo para cada columna (misión y visión) */
.column {
    flex: 1; /* Distribución equitativa del espacio disponible */
    min-width: 300px; /* Ancho mínimo para evitar columnas demasiado estrechas */
    background-color: var(--color-terciario); /* Fondo gris azulado */
    padding: 30px; /* Espacio interno */
    border-radius: 10px; /* Esquinas redondeadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
}

/* Títulos dentro de las columnas */
.column h2 {
    text-align: center; /* Centrado horizontal */
    margin-bottom: 20px; /* Espacio antes del párrafo */
}

/* Ajuste de la línea decorativa para títulos de columna */
.column h2:after {
    width: 60px; /* Ancho menor para la línea decorativa */
}

/* Cuadrícula para la galería de imágenes */
.galeria-grid {
    display: grid; /* Diseño de cuadrícula */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Columnas responsivas */
    gap: 20px; /* Espacio entre elementos de la cuadrícula */
}

/* Estilo para cada contenedor de imagen */
.imagen-producto {
    background-color: var(--color-principal); /* Fondo rosa claro */
    border-radius: 10px; /* Esquinas redondeadas */
    padding: 15px; /* Espacio interno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
    transition: transform 0.3s ease; /* Transición suave para efecto hover */
}

/* Efecto hover para las imágenes de producto */
.imagen-producto:hover {
    transform: translateY(-5px); /* Eleva ligeramente la imagen al pasar el cursor */
}

/* Estilo para las imágenes dentro de los contenedores */
.imagen-producto img {
    width: 100%; /* Ancho completo del contenedor */
    height: auto; /* Altura automática para mantener proporciones */
    border-radius: 5px; /* Esquinas redondeadas */
    display: block; /* Elimina espacio extra debajo de la imagen */
}

/* Estilo para el pie de página */
footer {
    background-color: var(--color-terciario); /* Fondo gris azulado */
    padding: 20px 0; /* Espacio vertical */
    text-align: center; /* Texto centrado */
    margin-top: 60px; /* Espacio considerable respecto a la última sección */
}

/* Estilos responsivos para adaptar la página a dispositivos móviles */
@media (max-width: 768px) {
    /* Reducción del tamaño del título en pantallas pequeñas */
    header h1 {
        font-size: 1.8rem;
    }
    
    /* Cambio de dirección del menú de navegación para pantallas pequeñas */
    nav ul {
        flex-direction: column; /* Elementos apilados verticalmente */
        align-items: center; /* Centrado horizontal */
    }
    
    /* Ajuste del espacio entre elementos de navegación */
    nav ul li {
        margin: 5px 0; /* Espacio vertical entre elementos */
    }
    
    /* Reducción del tamaño del título del banner */
    .banner-content h2 {
        font-size: 2rem;
    }
    
    /* Cambio de dirección para las columnas en pantallas pequeñas */
    .split-section {
        flex-direction: column; /* Elementos apilados verticalmente */
    }
    
    /* Ajuste del espacio entre columnas */
    .column {
        margin-bottom: 20px; /* Espacio vertical entre columnas */
    }
}

/* === Estilos mejorados === */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');

/* Nueva fuente moderna para todo el cuerpo */
body {
    font-family: 'Poppins', sans-serif;
}

/* Botón de llamada a la acción (CTA) */
.boton-cta {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 25px;
    background-color: var(--color-principal);
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.boton-cta:hover {
    background-color: #e74c3c;
}

/* Mejora visual en imágenes al hacer hover */
.imagen-producto {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.imagen-producto:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Sombra ligera para los títulos de sección */
section h2 {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* Estilo más fuerte para el pie de página */
footer {
    background-color: var(--color-texto);
    color: white;
    font-size: 0.9rem;
}


/* === Estilos para objetivos mejorados === */

/* Estilo para el ícono del objetivo general */
.icono-objetivo {
    width: 40px;
    display: block;
    margin: 0 auto 15px;
}

/* Estilo mejorado para objetivo general */
.objetivo-general {
    border-left: 6px solid var(--color-principal);
    background-color: #fffdfd;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}
.objetivo-general:hover {
    transform: translateY(-3px);
}

/* Estilo para los objetivos específicos como tarjetas numeradas */
.objetivos-especificos .objetivo-item {
    display: flex;
    align-items: flex-start;
    background-color: white;
    padding: 15px;
    border-left: 5px solid var(--color-principal);
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.objetivos-especificos .numero {
    font-weight: bold;
    font-size: 1.4rem;
    margin-right: 15px;
    color: var(--color-principal);
}

/* Botón de contacto en el menú de navegación */
.btn-contacto {
    background-color: var(--color-texto);
    color: var(--color-secundario) !important;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn-contacto:hover {
    background-color: #2c3e50;
    text-decoration: none !important;
}

/* Estilos para el formulario de contacto */
.formulario-contacto {
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--color-secundario);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

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

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

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-terciario);
    border-radius: 5px;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-principal);
    box-shadow: 0 0 0 2px rgba(245, 183, 177, 0.3);
}

button.boton-cta {
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.mensaje-confirmacion {
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    display: none;
}

.mensaje-confirmacion.exito {
    display: block;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.mensaje-confirmacion.error {
    display: block;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}