/* ======================== */
/* 1. ESTILOS BASE Y TIPOGRAFÍA */
/* ======================== */
body {
    font-family: 'Roboto', Arial, sans-serif;
    font-wieght: 400;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    background-color: #EFEFEF; /* Gris claro para fondo */
    color: #4B4A4A; /* Gris oscuro para texto principal */
}

/* Pesos de fuente para títulos y elementos destacados */
h1, h2, h3, .product-price, .call-to-action {
    font-weight: 700;
}

/* ======================== */
/* 2. MAQUETACIÓN GENERAL */
/* ======================== */
main {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 10px 0;
}
section {
    background-color: #fff;
    border-radius: 8px;
    padding: 10px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidad */
}

/* ======================== */
/* 3. ENCABEZADO Y NAVEGACIÓN */
/* ======================== */
header {
    background-color: #4B4A4A;
    padding: 2px;
}
.header-container {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.logo-link img {
    height: 90px;
    margin: 15px auto; /* margen superior e inferior 10px de logo */
}
.contact-info {
    text-align: right;
    font-size: 14px;
    color: #EEEEEE;
}
.contact-info p {
    margin: 0;
}
.contact-info a {
    color: #EEEEEE;
    text-decoration: none;
}

nav {
    background-color: #FF8C42;
    padding: 2px 0;
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 960px;
}
nav li a {
    display: block;
    color: #4B4A4A;
    text-decoration: none;
    padding: 3px 12px;
    font-weight: bold;
    transition: background-color 0.3s;
}
nav li a:hover {
    background-color: #FFA675;
}

/* ======================== */
/* 4. SECCIONES DE CONTENIDO */
/* ======================== */
/* Títulos: unificar color y alineación */
.section-title {
    color: #FF8C42;
    text-align: center;
}
/* Títulos: tamaños y margenes específicos */
section h1 {
    font-size: 1.7em; /* Más grande para el título principal */
    margin-top: 5px;
    margin-bottom: 5px;
}

section h2 {
    font-size: 1.5em; /* Más chico para subtítulos */
    margin-top: 4px;
    margin-bottom: 4px;
}

section h3 {
    font-size: 1.2em; /* Más chico para subtítulos */
    margin-top: 4px;
    margin-bottom: 4px;
}
section p {
    font-size: 1.0em;
}
/* Formato general para links (excepto header, footer u otro específico) */
a {
    color: #FF8C42; /* Color naranja */
    text-decoration: none; /* saco el subrayado clásico */
}
a:hover {
    text-decoration: underline; /* Subraya al pasar el mouse */
}

/* Estilo para LISTAS con viñetas naranja */
.puntos-color li::marker {
    color: #FF8C42; /* color naranja */
}
/* Estilo para la lista de servicios */
.lista-servicios li::marker {
    color: #FF8C42; /* color naranja */
}
.lista-servicios li {
    margin-bottom: 30px; /* Añade espacio debajo de cada servicio */
}
/* Espaciado para el texto dentro de la lista de servicios */
.lista-servicios li p {
    margin-top: 3px;
    margin-left: 20px; /* Margen izq para el texto de cada item de servicios */
    margin-right: 20px; /* Margen der para el texto de cada item de servicios */
}

/* Estilo para alinear la imagen a la izquierda en Quiénes Somos */
.quienes-somos-content img {
    float: left;
    margin: 0 20px 20px 0; /* Margen a la derecha y abajo para separar el texto */
    max-width: 300px; /* Evitar desborde en pantallas grandes */
    height: auto;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
}
/* Imágenes */
img {
    max-width: 100%;
    height: auto;
    display: block;
/*    margin: 20px auto; */
}
.welcome-section img {
    margin: 20px auto;
}
.product-card img {
    margin: 0 auto 10px auto;
    border-radius: 4px;
}

/* Sección de la galería de productos */
.product-gallery {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    padding: 20px 10px;
}
/* Estilo de Tarjetas de producto */
.product-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    padding: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
}

/* EFECTO HOVER */
.product-card:hover {
    transform: translateY(-5px); /* Mueve la tarjeta 5px hacia arriba */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Aumenta la sombra */
}

.product-card .product-name {
    font-weight: 300;
    font-size: 1em;
    margin: 10px 0 5px 0;
    color: #5A4F4F;
}
.product-card .product-price {
    font-weight: 700;
    color: #FF8C42;
    font-size: 1.2em;
}

/* Sección de avisos */
.notice-section {
    background-color: #f9f9f9;
    padding: 10px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.notice-section .call-to-action {
    font-size: 1.2em;
    font-weight: 700;
    color: #FFF; /* #333 o 4B4A4A */
    background-color: #FF8C42;
    padding: 5px 10px; /* Para darle espacio alrededor */
    text-transform: uppercase;
    margin-bottom: 10px;
    border-radius: 5px; /* Para esquinas redondeadas */
}
.notice-section p:not(.call-to-action) {
    font-size: 1em;
    line-height: 1.5;
    color: #4B4A4A;
    max-width: 600px;
    margin: 0 auto;
}

/* Ordenar menú navegacion de meses en pagina CALENDARIO */
.meses-calendario-nav {
    text-align: center;
}
/* Color de título H3 en pagina CALENDARIO */
.month-section h3 {
    color: #FF8C42;
}


/* ======================== */
/* 5. PIE DE PÁGINA */
/* ======================== */
footer {
    background-color: #333;
    color: #FF8C42;
    text-align: center;
    padding: 20px;
    font-size: 12px;
    position: relative; /* me deja posicionar elementos dentro del footer */
}
.footer-container {
    max-width: 960px;
    margin: 0 auto;
    position: relative;
    text-align: center; /* para alinear el texto a la izq en el contenedor */
}
footer a {
    color: #FF8C42;
}
.qr-afip {
    position: absolute; /* lo saca del flujo normal*/
    bottom: 0px; /* lo posiciona cerca del borde inferior */
    right: 0; /* lo posiciona pegado al borde derecho */
    width: 90px;
    height: auto;
/*    display: block; */
    margin: 0; /* quito margenes que lo puedan mover */
}


/* ======================== */
/* 6. ESTILOS PARA PAGINA DE PAGO */
/* ======================== */
.bank-details {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px;
    margin: 20px 0;
    line-height: 1.6;
}

.bank-details p {
    margin: 0;
    margin-left: 20px;
}

.bank-details p strong {
    color: #4B4A4A;
}


/* ======================== */
/* 7. RESPONSIVE DESIGN */
/* ======================== */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        text-align: center;
    }
    .contact-info {
        text-align: center;
    }
}