/* ===>>> style.css COMPLETO y UNIFICADO vFINAL <<<=== */

/* Variables Globales y Reset */
:root {
    --color-bg: #f8f9fa;
    --color-bg-alt: #eef1f5;
    --color-bg-light: #ffffff;
    --color-text: #333; /* Color negro/gris oscuro */
    --color-text-secondary: #6c757d; /* Color gris */
    --color-primary:purple; /* Original era #007bff, cambiado a purple */
    --color-primary-dark: #4B0082; /* Ajustado a un púrpura más oscuro */
    --color-light: #ffffff; /* Color blanco */
    --color-dark: #343a40;
    --color-darker: #212529;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-border: #dee2e6;
    --font-primary: 'Roboto', Arial, sans-serif;
    --shadow-sm: 0 2px 5px rgba(0,0,0,0.07);
    --shadow-md: 0 6px 10px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 15px rgba(0,0,0,0.15);
    --border-radius: 8px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
    background-color: #f5f5f5; /* Color de fondo general claro */
    color: var(--color-text); /* Color de texto por defecto: negro/gris oscuro */
    line-height: 1.6;
    font-family: var(--font-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }

/* Estilos Header Común */
header#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    background-color: var(--color-primary-dark); /* Oscuro (ahora púrpura oscuro) */
    color: var(--color-light); /* Letra clara */
    transition: background-color 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
    z-index: 1000;
    box-shadow: none;
}

header#header.scrolled {
    background-color: black;
    padding: 15px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.logo {
    font-weight: bold;
    font-size: 1.5rem;
    margin-left: 20px;
    color: white; /* Color del logo en el header */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    flex-shrink: 0;
}

header#header nav {
    flex-grow: 1;
    display: flex;
    justify-content: center; /* Centra los links */
    margin-right: 20px;
    margin-left: 20px;
}

header#header nav ul {
    display: flex;
    align-items: center;
    gap: 25px; /* Espacio entre los items del menú */
    list-style: none;
    margin: 0;
    padding: 0;
}

header#header nav ul li {
    position: relative;
}

header#header nav ul li a {
    color: white; /* Color de los links (incluyendo iconos de contacto por defecto) */
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    text-decoration: none;
    padding: 5px 0;
    position: relative;
    display: inline-flex; /* Alinea el icono y el posible texto verticalmente */
    align-items: center;
    transition: color 0.3s ease;
}

header#header nav ul li a:hover {
    color: #ddd; /* Color al pasar el ratón */
}

/* Estilos específicos para los iconos de contacto en el header */
header#header nav ul li a.contact-icon-link {
    font-weight: normal; /* Los iconos no necesitan negrita */
    text-shadow: none; /* Quitar sombra si no la quieres en iconos */
    padding: 0; /* Quitar padding vertical heredado si se prefiere */
}

header#header nav ul li a.contact-icon-link i {
     font-size: 1.3rem; /* Ajustar tamaño del icono (ej: 1.2em, 1.5em, 20px). Aumentado ligeramente. */
     /* Puedes añadir un pequeño margen si quieres separar el icono de los enlaces de texto */
     /* margin: 0 5px; */ /* No necesario si están en li separados */
}

header#header nav ul li a.contact-icon-link::after {
    content: none; /* Quitar la línea inferior de los iconos */
}


header#header nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: white;
    transition: width 0.3s ease;
}

header#header nav ul li a.active {
    font-weight: bold;
}

header#header nav ul li a.active::after {
    width: 100%;
    background-color: white;
}

/* Cart Icon Styles (ELIMINADO) */


/* Animación de pulso (ELIMINADO) */


/* Estilos Generales Botón */
.btn {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-light);
    border: none;
    padding: 0.8rem 1.6rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    width: auto; /* Botón por default no ocupa todo el ancho */
}

.btn:hover, .btn:focus {
    background-color: var(--color-primary-dark); /* Now uses darker purple */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    outline: none;
    transform: translateY(-3px);
}

.btn:active {
    transform: scale(0.98) translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}


/* Títulos de Sección y Padding Página */
.section-title {
    text-align: center;
    font-size: clamp(2rem, 4vw, 2.5rem);
    margin-bottom: 50px; /* Space after title */
    color: var(--color-text); /* Titles by default: dark gray/black */
    font-weight: bold;
}

.page-section {
    padding: 110px 20px 60px; /* Padding: top, right/left, bottom */
    /* min-height: calc(100vh - 150px); */ /* Minimum 100vh minus header approx - Adjust if you want shorter content */
    position: relative; /* So children with position absolute/fixed position relative to it if needed */
}


/* Hero Section (Common) */
.hero {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Centered text in hero */
    padding-top: 80px; /* Space for fixed header */
    padding-bottom: 50px;
    color: white; /* Text color inside hero (so it's visible over overlay) */
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55); /* Dark overlay so white text is readable */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2; /* Ensures content is above the overlay */
    max-width: 850px;
    padding: 0 20px;
}

.hero-content h1 {
    font-size: clamp(2.8rem, 6vw, 3.8rem);
    margin-bottom: 1.2rem;
    font-weight: bold;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
    line-height: 1.2;
}

.hero-content p {
    font-size: clamp(1.1rem, 2.8vw, 1.3rem);
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero button - can have slightly different styles if needed */
.hero-btn, .boton-hero-contacto {
    padding: 15px 40px;
    font-size: 1.2rem;
}

/* Index Specific Hero (Background) */
#inicio {
    /* ****************************************************** */
    /* --- PATH: Looking in the same folder as style.css --- */
    /* ****************************************************** */
    background-image: url('neopc.png'); /* Make sure the path is correct from style.css */
}

/* Products Specific Hero (Background) */
#productos-hero {
     /* ****************************************************** */
     /* --- PATH: Looking in the same folder as style.css --- */
     /* ****************************************************** */
     background-image: url('neopc.png'); /* Make sure the path is correct from style.css */
     /* No need to redefine other properties (size, position, attachment, overlay, text color)
        because it inherits from the .hero class */
}


/* Contact Specific Hero (Background) */
#inicio-contacto {
    /* ****************************************************** */
    /* --- PATH: Looking in the same folder as style.css --- */
    /* ****************************************************** */
    background-image: url('neopc.png'); /* Make sure the path is correct from style.css */
    /* No need to redefine other properties because it inherits from the .hero class */
}


/* ===>>> Styles for a SINGLE Offer Box on index.html <<<=== */

/* New container for the unique offer box */
.single-offer-box-container {
    max-width: 600px; /* Adjust this value to the desired max width for the box */
    margin: 0 auto; /* Center the box on the page */
    background-color: var(--color-bg-light); /* White background for the box */
    border-radius: var(--border-radius); /* Rounded corners */
    box-shadow: var(--shadow-md); /* Shadow */
    overflow: hidden; /* Ensure content respects rounded corners */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover animation */
    display: block; /* Ensure it takes its own space */
    text-decoration: none; /* Remove link underline (if link wraps everything) */
    color: inherit; /* Inherit default text color */
    /* Reset styles from the original offer-box if they weren't moved to the parent container */
    padding: 0; /* Remove padding if it had it before */
    border: none; /* Remove border if it had it before */
    background-color: transparent; /* Transparent background if it had it before */
    box-shadow: none; /* Remove shadow if it had it before */
}

/* Hover animation for the entire box */
.single-offer-box-container:hover {
     transform: translateY(-5px); /* Move slightly up on hover */
     box-shadow: var(--shadow-lg); /* Increase shadow */
}

/* The offer-box link should now be a block within the container */
.single-offer-box-container .offer-box {
    display: block;
    width: 100%;
    height: 100%; /* Take up full space of parent container */
    text-decoration: none; /* Ensure no underline */
    color: inherit; /* Inherit text color */
    /* Reset styles from the original offer-box if they weren't moved to the parent container */
    padding: 0; /* Remove padding if it had it before */
    border: none; /* Remove border if it had it before */
    background-color: transparent; /* Transparent background if it had it before */
    box-shadow: none; /* Remove shadow if it had it before */
}

/* Remove flex and padding styles from the old offers-container */
/* Since we removed the div.offers-container from the HTML, this rule is less critical,
   but it's good practice to clean it up if it existed. There should be no element with
   class="offers-container" inside #oferta-semana in the modified HTML. */
/*
#oferta-semana .offers-container {
   display: block;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
   padding: 0;
}
*/


/* Adjustments for the offer-box inside the new single container */
/* Ensure the image container within the single box works */
#oferta-semana .single-offer-box-container .offer-image-container {
    /* Ensure image, placeholder, and details styles
       within this container continue to work correctly.
       Little change should be needed here if they were already fine. */
    position: relative; /* Needed to position absolute details */
    width: 100%; /* Take full width of offer-box (which is now 100% of container) */
    overflow: hidden;
    border-radius: var(--border-radius); /* Ensure rounded corners on image/placeholder */
    /* Height can be adjusted here or let content determine it */
    min-height: 250px; /* Suggested minimum height for the offer box */
    display: flex; /* To center placeholder/image */
    justify-content: center;
    align-items: center;
}

/* Adjust placeholder and details for the single box */
#oferta-semana .single-offer-box-container .offer-placeholder,
#oferta-semana .single-offer-box-container .offer-details {
    position: absolute; /* Still absolute to overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px; /* Add padding for the overlaid content */
    box-sizing: border-box;
}

/* Placeholder styles */
#oferta-semana .single-offer-box-container .offer-placeholder {
    background-color: var(--color-bg-alt); /* Light background for placeholder */
    color: var(--color-text-secondary); /* Gray text for placeholder */
    z-index: 2; /* Above image if it exists but is hidden */
    opacity: 1; /* Visible by default */
    transition: opacity 0.3s ease;
}

/* Details styles (hidden by default) */
#oferta-semana .single-offer-box-container .offer-details {
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent dark background for details */
    color: var(--color-light); /* White text for details */
    z-index: 3; /* Above placeholder and image */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
}

/* Show details and hide placeholder on hover over the single container */
.single-offer-box-container:hover .offer-placeholder {
    opacity: 0;
}
.single-offer-box-container:hover .offer-details {
    opacity: 1;
}

/* If you have an image (offer-image), ensure it shows when placeholder is not there */
#oferta-semana .single-offer-box-container .offer-image {
    display: block; /* Image should be a block */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover container without distortion */
    position: absolute; /* Position to be below placeholder/details */
    top: 0;
    left: 0;
    z-index: 1; /* Below placeholder and details */
}

/* ===>>> FIN Estilos para UN solo recuadro de Oferta <<<=== */


/* ===>>> ESTILOS: Slider Banner de Servicios en Index (Individual) <<<=== */
.service-slider-section {
    background-color: var(--color-bg-alt); /* Light background for the slider section */
}

.service-slider-container {
    max-width: 1200px; /* Max width of slider */
    margin: 0 auto; /* Center the container */
    overflow: hidden; /* Hides items outside view */
    position: relative; /* Needed to position dots/arrows if added */
    /* padding: 0 10px; */ /* Space on the sides - Adjusted in .slider-item padding */
}

.slider-wrapper {
    display: flex; /* Keeps items in a row */
    /* width handled by JS */
    transition: transform 0.5s ease-in-out; /* Sliding animation */
    will-change: transform; /* Hint to the browser for animation optimization */
}

.slider-item {
    width: 100%; /* Each item takes 100% of the visible container */
    flex-shrink: 0; /* Prevents items from shrinking */
    display: flex; /* Allows content inside to be placed side-by-side */
    align-items: center; /* Vertically center content */
    gap: 30px; /* Space between content and image */
    padding: 20px; /* Padding around the slide content */
    background-color: var(--color-bg-light); /* White background for each slide item */
    border-radius: var(--border-radius); /* Rounded corners for the slide item */
    box-shadow: var(--shadow-md); /* Shadow for the slide item */
    min-height: 400px; /* Minimum slide height (adjust as needed) */
}

.service-slide-card {
    display: flex; /* The card is a flex container for its content (text/image) */
    flex-direction: row; /* HORIZONTAL: text on the left, image on the right */
    width: 100%; /* Takes up full width of the slider-item */
    text-decoration: none; /* Remove link underline */
    color: inherit; /* Inherit text color */
    /* Background, border-radius, box-shadow, border, transition from .slider-item */
    /* These styles are now applied to the parent .slider-item, not service-slide-card */
}

.service-slide-card:hover {
     /* Hover animation can be moved to .slider-item if preferred,
        or applied here if it only affects internal content */
     /* transform: translateY(-3px); */ /* Example: Move card on hover */
     /* box-shadow: var(--shadow-lg); */ /* Example: Change shadow on hover */
}

.service-slide-image { /* Image container */
    flex: 1 1 40%; /* Image takes 40% width */
    max-width: 400px; /* Maximum width for the image (adjust) */
    display: flex; /* To center the image if it's smaller than its container */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Hide parts of the image if it overflows */
    border-radius: var(--border-radius); /* Rounded corners (if the image doesn't have them) */
}

.service-slide-image img {
    display: block;
    width: 100%; /* Image fills its container horizontally */
    height: 100%; /* Image fills its container vertically */
    object-fit: cover; /* Ensure image covers the area without distortion */
    border-radius: var(--border-radius); /* Ensure image has rounded corners */
}

.service-slide-content { /* Wrapper for icon and text */
    flex: 1 1 60%; /* Content takes the remaining 60% */
    padding: 0 1.5rem; /* Horizontal space between image and text */
    text-align: left; /* TEXT ALIGNMENT TO THE LEFT */
    display: flex; /* Flexbox to stack icon, h3, p */
    flex-direction: column;
    justify-content: center; /* Vertically center content */
    align-items: flex-start; /* ALIGN ITEMS (icon, h3, p) TO THE LEFT */
}

.service-slide-content .fas { /* Icon inside slider */
    font-size: 2.5rem; /* Icon size */
    color: var(--color-primary);
    margin-bottom: 1rem; /* Space below icon */
}

.service-slide-content h3 { /* Title inside slider */
    font-size: 1.6rem; /* Title size (adjust) */
    color: var(--color-text);
    margin-bottom: 0.8rem;
    font-weight: bold;
}

.service-slide-content p { /* Paragraph inside slider */
    font-size: 1rem; /* Paragraph size (adjust) */
    color: var(--color-text);
    line-height: 1.6;
    margin-bottom: 0;
}


/* Navigation dots styles */
.slider-dots {
    text-align: center;
    margin-top: 30px; /* Space above dots */
}

.dot {
    display: inline-block;
    height: 12px; /* Dot size */
    width: 12px; /* Dot size */
    margin: 0 6px; /* Space between dots */
    background-color: #bbb; /* Inactive dot color */
    border-radius: 50%; /* Circular shape */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.dot:hover {
     background-color: #999;
     transform: scale(1.1);
}

.dot.active {
    background-color: var(--color-primary); /* Active dot color */
    transform: scale(1.2);
}

/* ===>>> FIN ESTILOS: Slider Banner <<<=== */


/* ===>>> Styles for Services Grid (servicios.html) <<<=== */

/* Container that wraps the service boxes on the services page */
/* Uses Grid layout for columns */
.services-grid {
    display: grid;
    /* Create 2 equal width columns (1fr) */
    grid-template-columns: repeat(2, 1fr);
    gap: 30px; /* Space between grid items */
    max-width: 900px; /* Max width to center the grid (adjust as needed) */
    margin: 0 auto; /* Centers the grid horizontally within its parent container */
    padding: 0 15px; /* Add a little horizontal padding to prevent touching edges on small screens */
}

/* Styles for each service box within the grid */
.services-grid .feature-box.service-card {
    /* Existing .feature-box styles already give them padding, border, shadow, etc. */
    /* No need for width/flex-basis here, grid handles it */
    width: auto; /* Reset possible fixed widths if they had them */
    display: flex; /* Allows content inside (icon, h3, ul, btn) to stack */
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Horizontally center content */
    text-align: center; /* Center text */
    padding: 30px 20px; /* Adjust padding if needed */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover animation for individual service cards */
.services-grid .feature-box.service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* Ensure content within the service card is centered */
.services-grid .feature-box.service-card .feature-icon {
    margin-bottom: 15px; /* Space below icon */
}

.services-grid .feature-box.service-card h3 {
     margin-bottom: 15px; /* Space below title */
}

.services-grid .feature-box.service-card p {
     margin-bottom: 20px; /* Space below paragraph */
     text-align: center; /* Ensure text is centered */
}

.services-grid .feature-box.service-card ul {
     list-style: none;
     margin-bottom: 20px;
     padding: 0;
     text-align: center; /* Center the list */
}

.services-grid .feature-box.service-card ul li {
     margin-bottom: 8px;
     /* Optional: Add a list style indicator if desired */
     /* list-style: disc inside; */
}


/* ===>>> FIN Estilos Rejilla de Servicios <<<=== */

/* ===>>> ESTILOS: Condensed Contact Form (index.html) <<<=== */
.contact-snippet-box-section {
    /* background-color: var(--color-bg-alt); */ /* Optional: different background for the section */
    padding: 60px 20px; /* Padding for the section */
}

.contact-snippet-box {
    max-width: 500px; /* Max width for the condensed form */
    margin: 0 auto; /* Center the form block */
    background-color: var(--color-bg-light); /* White background */
    padding: 30px; /* Inner space */
    border-radius: var(--border-radius); /* Rounded corners */
    box-shadow: var(--shadow-md); /* Shadow */
}

.contact-snippet-box h3 {
    text-align: center;
    margin-bottom: 25px;
    color: var(--color-text-darker);
    font-size: 1.5rem;
}

/* Form group, form control, btn styles should already apply
   If specific adjustments are needed for the snippet form:
   .contact-snippet-box .form-group { ... }
   .contact-snippet-box .form-control { ... }
*/
.contact-snippet-box .form-group:last-of-type { /* Space below the last group (checkbox or input) */
    margin-bottom: 20px;
}

.contact-snippet-box .btn {
    width: 100%; /* Make the snippet form button full-width */
    padding: 1rem;
}

/* ===>>> END STYLES: Condensed Contact Form <<<=== */


/* ===>>> STYLES: Contact Page (contacto.html) <<<=== */

.seccion-contacto {
    /* background-color: var(--color-bg); */ /* You can give the whole section a background */
    /* padding already defined by .page-section */
}

.contenido-seccion {
    max-width: 1200px; /* Max width for the general contact section content */
    margin: 0 auto; /* Centers the general content */
    padding: 0 15px; /* Side padding */
}

.info-contacto {
    text-align: center; /* Centers text and buttons */
    margin-bottom: 50px; /* Space below info and buttons before the columns */
}

.contacto-botones {
    display: flex;
    justify-content: center; /* Centers contact buttons */
    gap: 15px; /* Space between buttons */
    flex-wrap: wrap; /* Allows buttons to wrap on small screens */
    margin-top: 20px;
}

.boton-contacto {
    display: inline-flex; /* To align icon and text */
    align-items: center;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    color: var(--color-light); /* Default text color (white) */
    background-color: var(--color-primary); /* Default background */
}

.boton-contacto i {
    margin-right: 8px;
}

.boton-contacto:hover {
    background-color: var(--color-primary-dark);
}

.boton-contacto.whatsapp {
    background-color: #25D366; /* WhatsApp Color */
}
.boton-contacto.whatsapp:hover {
    background-color: #1DA851;
}

.boton-contacto.email {
    background-color: #d44638; /* Example color for email (Google) */
}
.boton-contacto.email:hover {
     background-color: #c1352d;
}


/* Styles for the columns container (Form + Map) */
.contacto-columnas {
    display: flex;
    gap: 40px; /* Space between the form and the map */
    /* ===>>> CENTERING THE ENTIRE COLUMN BLOCK <<<=== */
    max-width: 1000px; /* Max width for the 2-column section (adjust as needed) */
    margin: 0 auto; /* Centers the flex container on the page */
    /* ===>>> END CENTERING <<<=== */
    flex-wrap: wrap; /* Allows columns to stack on small screens */
    justify-content: center; /* Centers columns when stacked or if extra space */
    align-items: flex-start; /* Aligns the tops of the columns */
}

/* Styles for the form column */
.columna-formulario.secure-form { /* The secure-form class already had some styles */
    flex-basis: 0; /* Allows flex-grow to control size */
    flex-grow: 1; /* Grows to fill available space */
    max-width: 550px; /* Max width for the form */
    background-color: var(--color-bg-light); /* White background */
    padding: 30px; /* Inner space */
    border-radius: var(--border-radius); /* Rounded corners */
    box-shadow: var(--shadow-md); /* Shadow */
    width: 100%; /* Ensure it takes 100% width on mobile before max-width */
    box-sizing: border-box; /* Include padding in width */
}

.columna-formulario h3 {
    text-align: center;
    margin-bottom: 30px;
    color: var(--color-darker);
    font-size: 1.8rem;
}

/* General form group styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block; /* Label above input/textarea */
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--color-text);
}

.form-control {
    width: 100%; /* Input/textarea takes full width of container */
    padding: 12px 15px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    font-size: 1rem;
    font-family: var(--font-primary);
    box-sizing: border-box; /* Include padding and border in width */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 8px rgba(var(--color-primary), 0.2);
    outline: none;
}

textarea.form-control {
    resize: vertical; /* Only allow vertical resizing */
    min-height: 150px; /* Minimum height for text area */
}

/* Style for the privacy checkbox group */
.form-group-checkbox {
    margin-top: 25px;
    margin-bottom: 25px; /* Space adjustment */
    display: flex; /* To align checkbox and label */
    align-items: flex-start; /* Align top if label text is long */
    font-size: 0.95rem;
}

.form-group-checkbox input[type="checkbox"] {
    margin-right: 10px;
    flex-shrink: 0; /* Prevent checkbox from shrinking */
    margin-top: 3px; /* Vertical alignment with the first line of text */
}

.form-group-checkbox label {
    margin-bottom: 0; /* Remove bottom margin from label */
    font-weight: normal;
    display: inline; /* Allow label to wrap text and links */
    color: var(--color-text-secondary);
}

.form-group-checkbox label a:hover {
    text-decoration: underline;
}


/* Styles for the map column */
.columna-mapa {
    flex-basis: 0; /* Allows flex-grow to control size */
    flex-grow: 1; /* Grows to fill available space */
    max-width: 600px; /* Max width for the map */
    background-color: var(--color-bg-light); /* White background for the container */
    padding: 20px; /* Inner space around the map */
    border-radius: var(--border-radius); /* Rounded corners */
    box-shadow: var(--shadow-md); /* Shadow */
    width: 100%; /* Ensure it takes 100% width on mobile */
    box-sizing: border-box;
    display: flex; /* To center the iframe if it's smaller */
    justify-content: center;
    align-items: center;
}

.columna-mapa iframe {
    width: 100%; /* Ensure the iframe takes the width of its container */
    height: 450px; /* Map height (adjust as needed) */
    border: 0; /* Remove iframe border if the copied code includes it */
    border-radius: var(--border-radius); /* Ensure the iframe has rounded corners */
    display: block; /* Remove any extra space below */
}

/* Form status messages (errors, success) */
#form-status {
    text-align: center;
    margin-top: 15px;
    font-size: 0.95rem;
}

#form-status.success {
    color: var(--color-success);
}

#form-status.error {
    color: var(--color-danger);
}

.error-message { /* Style for specific field error messages (like reCAPTCHA if used) */
     color: var(--color-danger);
     font-size: 0.9rem;
     margin-top: 5px;
}


/* ===>>> FIN ESTILOS: Página de Contacto <<<=== */


/* ===>>> FOOTER CENTRADO <<<=== */
/* Footer Común */
footer {
    background-color: var(--color-darker);
    color: var(--color-light);
    padding: 30px 0; /* Adjust vertical padding */
    text-align: center; /* Centers text and inline/inline-block elements INSIDE */
}

.footer-content {
    /* ===>>> ESTILOS PARA CENTRAR EL CONTENIDO DEL FOOTER COMO BLOQUE <<<=== */
    max-width: 1200px; /* Define the maximum width of the footer content */
    margin: 0 auto; /* Centers the footer-content block on the page */
    padding: 0 20px; /* Add horizontal padding to prevent content touching edges on small screens */
    /* ===>>> FIN CENTRADO <<<=== */
    /* Other existing footer-content styles if any... */
}

.footer-links {
    margin-top: 15px; /* Space above links */
}

.footer-links a {
    color: var(--color-light);
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--color-primary); /* Or an appropriate hover color */
}

/* ===>>> FIN FOOTER CENTRADO <<<=== */

/* ===>>> ESTILOS: Sección Sobre Nosotros (sobre-nosotros.html) <<<=== */
/* These styles will be used for the new sobre-nosotros.html page */
#sobre-nosotros {
    /* Reuses .page-section styles */
    /* You can add a background if you want */
    /* background-color: var(--color-bg-alt); */
}

#sobre-nosotros .container { /* Optional: an inner container to limit text width */
    max-width: 800px;
    margin: 0 auto;
    text-align: center; /* Centers text within the container */
}

#sobre-nosotros p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: var(--color-text-secondary);
}
/* ===>>> FIN ESTILOS: Sección Sobre Nosotros <<<=== */

/* ===>>> NUEVOS ESTILOS: Sección Mini Sobre Nosotros (index.html) <<<=== */
.about-snippet-section {
    /* Reuse .page-section padding and alignment */
    /* You can add a background if you want, maybe different from contact snippet */
    /* background-color: var(--color-bg-alt); */
}

.about-snippet-box {
    max-width: 700px; /* Adjust width as needed */
    margin: 0 auto; /* Center the box */
    background-color: var(--color-bg-light); /* White background */
    padding: 30px; /* Inner space */
    border-radius: var(--border-radius); /* Rounded corners */
    box-shadow: var(--shadow-md); /* Shadow */
    text-align: center; /* Center text within the box */
}

.about-snippet-box h3 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--color-text-darker);
    font-size: 1.6rem;
}

.about-snippet-box p {
    margin-bottom: 15px;
    color: var(--color-text);
    line-height: 1.6;
    font-size: 1rem;
}

.about-snippet-box .btn {
    margin-top: 15px; /* Space above button */
    width: auto; /* Ensure button is not full-width like in contact snippet */
}
/* ===>>> FIN NUEVOS ESTILOS: Sección Mini Sobre Nosotros <<<=== */


/* --- Media Queries: Additional Responsiveness Adjustments --- */

@media (max-width: 992px) {
     /* On medium screens, columns can still be side-by-side, but adjust flex-basis */
     .slider-item {
         gap: 20px;
         min-height: 350px;
         padding: 15px;
     }
     .service-slide-card {
          flex-direction: row; /* Keep horizontal */
     }
     .service-slide-image {
         flex: 1 1 35%; /* Slightly smaller image */
         max-width: 300px;
     }
      .service-slide-content {
         flex: 1 1 65%; /* Content gets more space */
         padding: 0 1rem;
     }
     .service-slide-content .fas {
         font-size: 2.2rem;
         margin-bottom: 0.8rem;
      }
      .service-slide-content h3 {
         font-size: 1.4rem;
         margin-bottom: 0.6rem;
      }
      .service-slide-content p {
         font-size: 0.95rem;
      }

     /* Adjustments for the services grid on medium screens */
     .services-grid {
         gap: 20px; /* Reduce gap */
         max-width: 700px; /* Reduce max width */
     }

     /* Adjustments for the service box on medium screens */
     .services-grid .feature-box.service-card {
         padding: 25px 15px; /* Adjust padding */
     }

    /* Adjustments for the condensed contact form on medium screens */
    .contact-snippet-box {
        max-width: 450px; /* Adjust max width */
        padding: 25px;
    }
     .contact-snippet-box h3 { font-size: 1.4rem; margin-bottom: 20px; }

     /* Adjustments for contact columns (form/map) on medium screens */
     .contacto-columnas {
          gap: 30px; /* Reduce gap */
          max-width: 900px; /* Adjust max width */
     }
      .columna-formulario.secure-form,
      .columna-mapa {
           /* These columns will still try to take up available space
              within the centered max-width container */
           padding: 25px; /* Ensure consistent padding */
      }
       .columna-formulario.secure-form { max-width: 500px; } /* Keep max width */
       .columna-mapa { max-width: 550px; } /* Keep max width */


    /* Adjustments for About Us section */
    #sobre-nosotros .container {
        max-width: 700px;
    }

    /* Adjustments for mini About Us section */
    .about-snippet-box {
        max-width: 600px; /* Adjust width */
        padding: 25px;
    }
    .about-snippet-box h3 { font-size: 1.5rem; }


}


@media (max-width: 768px) {
    .slider-item {
        flex-direction: column; /* Stack image and content */
        gap: 20px;
        padding: 20px 10px; /* Add padding around the stacked items */
        min-height: auto;
    }
    .service-slide-card {
        flex-direction: column; /* Change to stacked on mobile */
        width: 100%; /* Take full available width */
        max-width: 350px; /* Limit max width even when stacked */
        margin: 0 auto; /* Center the card */
    }
    .service-slide-image {
        flex: none; /* Deactivate flex sizing for image */
        width: 100%; /* Image takes full width */
        height: 180px; /* Fixed height for stacked image (adjust) */
        max-width: none; /* Remove max-width that could restrict */
        order: 0; /* Image first in stack */
    }
     .service-slide-image img {
         height: 100%; /* Make image fill container height */
     }

    .service-slide-content {
        flex: none; /* Deactivate flex sizing */
        width: 100%; /* Full width */
        padding: 0 1rem; /* Adjust padding */
        text-align: center; /* Center text on mobile */
        align-items: center; /* Center flex items */
        order: 1; /* Content second in stack */
    }
     .service-slide-content .fas {
         font-size: 2.2rem;
         margin-bottom: 0.8rem;
      }
      .service-slide-content h3 {
         font-size: 1.3rem;
         margin-bottom: 0.6rem;
      }
       .service-slide-content p {
          font-size: 0.95rem;
       }


    /* --- Media Query: Adjustments for Single Offer Box on index.html --- */
    .single-offer-box-container {
         max-width: 350px; /* Adjust max width of offer box on mobile */
         /* margin: 0 auto; */ /* Already defined above, no need to repeat */
    }

     /* Adjustments for content inside the offer box on mobile if needed */
     #oferta-semana .single-offer-box-container .offer-image-container {
          min-height: 200px; /* Adjust min height on mobile */
     }
      #oferta-semana .single-offer-box-container .offer-placeholder,
      #oferta-semana .single-offer-box-container .offer-details {
         padding: 15px; /* Reduce inner padding */
         font-size: 0.95rem; /* Reduce font size if necessary */
      }
    /* --- END Media Query Offer --- */


    /* --- Media Query: Services Grid (servicios.html) --- */
    /* Stack the services grid on small screens */
    .services-grid {
        grid-template-columns: repeat(1, 1fr); /* Change to 1 column */
        gap: 25px; /* Adjust gap if necessary */
        padding: 0 10px; /* Adjust horizontal padding */
        max-width: 400px; /* Limit max width on mobile to not be too wide */
    }
    /* Ensure the service box takes full width on mobile */
    .services-grid .feature-box.service-card {
         width: 100%; /* Take 100% of the column */
         max-width: none; /* Do not restrict width if already in 1 column */
         padding: 20px 15px; /* Adjust padding on mobile */
    }
    /* --- END Media Query Services Grid --- */

    /* --- Media Query: Contact Page (contacto.html) --- */
    /* Contact columns - stack */
    .contacto-columnas {
        flex-direction: column; /* Force columns to stack */
        gap: 25px; /* Space between them */
        justify-content: center; /* Center stacked block (items) */
        /* max-width: 100%; */ /* They are already by default with flex-direction: column */
        /* margin: 0 auto; */ /* Items are already centered within */
        padding: 0 10px; /* Add side padding to the section */
    }
    /* Ambas columnas ocupan el ancho completo en móvil, limitado por max-width si se desea */
    .contacto-columnas .columna-formulario.secure-form,
    .contacto-columnas .columna-mapa {
        flex-basis: 100%; /* Ocupar el 100% del contenedor padre */
        max-width: 450px; /* Limitar el ancho máximo en móvil */
        margin-left: auto; /* Centrar el bloque si el contenedor padre es más ancho */
        margin-right: auto; /* Centrar el bloque si el contenedor padre es más ancho */
        padding: 25px 20px; /* Ajustar padding en móvil */
    }

    .columna-mapa iframe {
         height: 350px; /* Ajustar altura del mapa en móvil */
    }

    .info-contacto {
         margin-bottom: 40px; /* Ajustar espacio */
         padding: 0 10px; /* Añadir padding para el texto/botones */
    }
     .contacto-botones {
         gap: 10px; /* Reducir space between buttons */
     }
     .boton-contacto {
         padding: 8px 15px; /* Reduce button padding */
         font-size: 0.95rem;
     }

    /* Adjustments for the condensed contact form on small screens */
    .contact-snippet-box {
        max-width: 350px; /* Adjust max width */
        padding: 20px;
    }
     .contact-snippet-box h3 { font-size: 1.3rem; margin-bottom: 15px; }

    /* Ensure form fields look good on mobile */
    .form-control {
         padding: 10px 12px;
         font-size: 0.95rem;
    }
    .form-group label {
         font-size: 0.95rem;
         margin-bottom: 5px;
    }
    .form-group-checkbox {
         font-size: 0.9rem;
         margin-bottom: 20px;
    }

    /* Adjustments for About Us section */
    #sobre-nosotros .container {
         max-width: 350px;
    }
     #sobre-nosotros p {
         font-size: 1rem;
     }

    /* Adjustments for mini About Us section */
    .about-snippet-box {
        max-width: 350px; /* Adjust width */
        padding: 20px;
    }
     .about-snippet-box h3 { font-size: 1.4rem; }


    /* --- END Media Query Contact Page --- */

}

@media (max-width: 576px) {
    header#header nav ul { gap: 10px;}
    header#header nav ul li a { font-size: 0.85rem; }

    /* More consistent buttons on small mobiles */
    .btn,
    .boton-contacto,
    .columna-formulario .btn {
        width: 100%; /* Make buttons full-width on small mobiles */
        font-size: 0.95rem;
        padding: 0.8rem 1rem;
    }
     /* Reset for generic buttons that should NOT be full-width if needed */
    .btn:not(.boton-contacto):not(.columna-formulario .btn):not(.service-contact-btn):not(.about-snippet-box .btn) { /* Added about-snippet-box .btn */
        width: auto;
    }
     /* Ensure service buttons stay centered and full-width */
     .services-grid .feature-box.service-card .btn.service-contact-btn {
         width: 80%; /* Slightly less than 100% if you want them not to touch box edges */
         max-width: 250px; /* Limit max width of service button */
         margin-left: auto;
    }
    /* Ensure mini About Us button is centered and not full width on small mobiles */
    .about-snippet-box .btn {
        width: 80%; /* Adjust width as needed */
        max-width: 200px; /* Limit max width */
        margin-left: auto;
        margin-right: auto;
    }


    /* Adjustments for the services grid on even smaller screens */
    .services-grid {
         max-width: 320px; /* You might limit it even further if you want */
         gap: 20px; /* Adjust gap */
    }
     /* Adjust padding of service boxes on very small screens */
     .services-grid .feature-box.service-card {
         padding: 15px 10px;
     }

    /* Adjustments for the condensed contact form on very small screens */
    .contact-snippet-box {
        max-width: 300px; /* Adjust max width */
        padding: 15px;
    }
    .contact-snippet-box h3 { font-size: 1.2rem; margin-bottom: 10px; }
    .contact-snippet-box .form-group { margin-bottom: 15px;}
    .contact-snippet-box .form-control { padding: 8px 10px; font-size: 0.9rem; }
    .contact-snippet-box .form-group label { font-size: 0.9rem; margin-bottom: 3px; }
    .contact-snippet-box .form-group-checkbox { font-size: 0.85rem; margin-bottom: 15px; }
    .contact-snippet-box .form-group-checkbox input[type="checkbox"] { margin-right: 5px;}


     /* Adjustments for contact columns (form/map) on very small screens */
    .contacto-columnas .columna-formulario.secure-form,
    .contacto-columnas .columna-mapa {
         max-width: 300px; /* Limit max width */
         padding: 20px 15px; /* Adjust padding */
    }
    .columna-mapa iframe {
        height: 250px; /* Reduce height */
    }
     .columna-formulario h3 { font-size: 1.5rem; margin-bottom: 20px;}

     /* Adjustments for About Us section */
     #sobre-nosotros .container {
          max-width: 300px;
     }

    /* Adjustments for mini About Us section */
    .about-snippet-box {
        max-width: 300px; /* Adjust width */
        padding: 15px;
    }
    .about-snippet-box h3 { font-size: 1.3rem; }

}


/* ESTILOS MODAL AÑADIR PRODUCTO (ELIMINADO) */
/* Estilos Admin Product List (ELIMINADO) */
/* Login/Registro Admin (ELIMINADO) */