/* ==================== VARIABLES Y RESET ==================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); /* Ejemplo con Google Fonts */

:root {
    /* Paleta de Colores Nokal Pets */
    --color-primary: #00B5E2;       /* Azul brillante (CTAs principales, acentos) */
    --color-dark: #1D2D50;          /* Azul oscuro (Texto principal, fondos oscuros, encabezados) */
    --color-accent: #F5C518;        /* Amarillo oro (Elementos llamativos, iconos destacados) */
    --color-light-blue: #7DD3FC;    /* Azul claro (Botones secundarios, detalles) */
    --color-white: #FFFFFF;         /* Blanco (Fondos principales, texto sobre oscuro) */
    --color-grey-light: #f4f4f4;    /* Gris claro (Fondos suaves, bordes) */
    --color-grey-dark: #555;        /* Gris oscuro (Texto secundario) */

    /* Asignaciones Semánticas */
    --color-text: var(--color-dark);
    --color-text-light: var(--color-white);
    --color-background: var(--color-white);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-dark);
    --color-header-bg: var(--color-white);
    --color-footer-bg: var(--color-dark);
    --color-footer-text: var(--color-grey-light);
    --color-footer-link: var(--color-light-blue);
    --color-footer-link-hover: var(--color-white);
    --color-cta-primary-bg: var(--color-primary);
    --color-cta-primary-text: var(--color-white);
    --color-cta-secondary-bg: var(--color-light-blue);
    --color-cta-secondary-text: var(--color-dark);

    /* Tipografía */
    --font-main: 'Poppins', sans-serif; /* Usamos Poppins como ejemplo */

    /* Otros */
    --container-width: 1140px;
    --header-height: 70px; /* Ajusta según necesidad */
}

/* Reset Básico */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* Desplazamiento suave para anclas */
}

body {
    font-family: var(--font-main);
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-background);
    font-size: 16px; /* Base font size */
}

/* ==================== ESTILOS GLOBALES ==================== */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px; /* Espaciado lateral */
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-dark);
    margin-bottom: 0.75em;
    line-height: 1.3;
}

h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; }   /* 32px */
h3 { font-size: 1.5rem; } /* 24px */

p {
    margin-bottom: 1em;
}

a {
    text-decoration: none;
    color: var(--color-link);
    transition: color 0.3s ease; /* Transición suave para hover */
}

a:hover {
    color: var(--color-link-hover);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Clases Utilitarias (Opcional, pero útil) */
.text-center { text-align: center; }
.margin-top-md { margin-top: 2rem; }


/* ==================== ENCABEZADO (HEADER) ==================== */
.main-header {
    background-color: var(--color-header-bg);
    height: var(--header-height);
    position: fixed; /* O 'sticky' si prefieres que se quede pegado al hacer scroll */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Asegura que esté sobre otros elementos */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra sutil */
    display: flex; /* Para centrar verticalmente el contenido */
    align-items: center;
}

.header-container { /* Renombrado para evitar conflicto con .container global si se necesita */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ocupa todo el ancho del container global */
}

.logo a {
    color: var(--color-dark);
    font-size: 1.8rem; /* 28.8px */
    font-weight: 700; /* Negrita */
}
.logo img {
    max-height: calc(var(--header-height) - 20px); /* Ajusta la altura del logo */
    width: auto;
}

.main-nav ul {
    display: flex;
}

.main-nav ul li {
    margin-left: 25px; /* Espacio entre elementos del menú */
}

.main-nav a {
    color: var(--color-text);
    padding: 5px 10px;
    font-weight: 600; /* Semi-negrita */
    position: relative; /* Para el indicador 'active' */
    transition: color 0.3s ease;
}

.main-nav a:hover,
.main-nav a.active { /* Estilo para enlace activo/hover */
    color: var(--color-primary); 
}

/* Indicador visual para el enlace activo (opcional) */
.main-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 3px;
    background-color: var(--color-primary);
}


.header-contact a {
    color: var(--color-dark);
    font-size: 1.3rem; /* Tamaño de iconos */
    margin-left: 15px; /* Espacio entre iconos */
    transition: color 0.3s ease;
}

.header-contact a:hover {
    color: var(--color-accent); /* Amarillo oro al pasar el ratón */
}


/* Ajuste para que el contenido principal no quede debajo del header fijo */
body {
    padding-top: var(--header-height);
}


/* ==================== PIE DE PÁGINA (FOOTER) ==================== */
.main-footer {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: 3rem 0 0 0; /* Espaciado interno superior, sin padding inferior inicial */
    margin-top: 4rem; /* Espacio antes del footer */
}

.footer-container {
    display: grid; /* Usamos Grid para el layout */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Columnas responsivas */
    gap: 2rem; /* Espacio entre columnas/filas */
    margin-bottom: 2rem; /* Espacio antes del copyright */
}

.footer-section h3 {
    color: var(--color-white); /* Títulos en blanco */
    margin-bottom: 1em;
    font-size: 1.2rem; /* 19.2px */
}

.footer-section p,
.footer-section ul li {
    margin-bottom: 0.6em;
}

.footer-section a {
    color: var(--color-footer-link); /* Azul claro para enlaces */
}

.footer-section a:hover {
    color: var(--color-footer-link-hover); /* Blanco al pasar el ratón */
    text-decoration: underline;
}

.icon-footer {
    color: var(--color-accent); /* Iconos en amarillo */
    margin-right: 8px;
    width: 20px; /* Ancho fijo para alinear */
    text-align: center;
}

.footer-social a {
    color: var(--color-footer-link);
    font-size: 1.6rem; /* Iconos sociales más grandes */
    margin-right: 15px; /* Espacio entre iconos sociales */
    display: inline-block; /* Para aplicar margen */
}
.footer-social a:hover {
    color: var(--color-accent); /* Amarillo al pasar */
}

/* Copyright */
.copyright {
    background-color: rgba(0, 0, 0, 0.2); /* Fondo ligeramente más oscuro */
    padding: 1rem 0;
    text-align: center;
    font-size: 0.9rem; /* Texto más pequeño */
    color: var(--color-grey-light);
}

.copyright p {
    margin-bottom: 0; /* Sin margen inferior para el párrafo del copyright */
}
/* ==================== ESTILOS GENERALES DE SECCIÓN ==================== */
section {
    padding: 4rem 0; /* Espaciado vertical para las secciones */
}

/* Alternar colores de fondo para mejor separación visual */
.why-us, .brands {
    background-color: var(--color-grey-light);
}

.section-title {
    margin-bottom: 2rem; /* Más espacio después del título de sección */
}

.subtitle {
    font-size: 1.1rem; /* 17.6px */
    color: var(--color-grey-dark);
    max-width: 700px; /* Limita el ancho de los subtítulos */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
}
.text-center .subtitle { /* Asegura que el subtítulo también se centre si la sección está centrada */
     margin-left: auto;
     margin-right: auto;
}


/* ==================== SECCIÓN HERO ==================== */
.hero {
    background-color: var(--color-dark); /* Fondo azul oscuro */
    /* Opcional: Imagen de fondo */
    /* background-image: linear-gradient(rgba(29, 45, 80, 0.8), rgba(29, 45, 80, 0.8)), url('images/hero-background.jpg'); */
    /* background-size: cover; */
    /* background-position: center; */
    
    color: var(--color-white); /* Texto blanco sobre fondo oscuro */
    padding: 6rem 0; /* Más padding vertical para el hero */
    text-align: center;
}

.hero h1 {
    color: var(--color-white); /* Título principal en blanco */
    margin-bottom: 0.5em;
    font-size: 3rem; /* 48px */
}

.hero .subtitle {
    color: var(--color-light-blue); /* Subtítulo en azul claro */
    margin-bottom: 2rem;
}

/* ==================== BOTONES CTA (Call to Action) ==================== */
.cta-button {
    display: inline-block;
    padding: 0.8rem 1.8rem; /* 12.8px 28.8px */
    border-radius: 50px; /* Botones redondeados */
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    font-size: 1rem; /* 16px */
    margin: 0.5rem; /* Margen para separación si hay varios */
}

.cta-button i { /* Iconos dentro de botones */
    margin-right: 8px;
}

/* Estilo Primario (fondo brillante) */
.primary-cta {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.primary-cta:hover {
    background-color: var(--color-accent); /* Cambia a amarillo al pasar */
    color: var(--color-dark);
    transform: translateY(-2px); /* Efecto ligero al pasar */
}

/* Estilo Secundario (fondo claro) */
.secondary-cta {
    background-color: var(--color-light-blue);
    color: var(--color-dark);
    /* Opcional: Borde en lugar de fondo */
    /* background-color: transparent; */
    /* border: 2px solid var(--color-light-blue); */
    /* color: var(--color-dark); */
}
.secondary-cta:hover {
    background-color: var(--color-primary); /* Cambia a azul primario */
    color: var(--color-white);
    /* Opcional (si usas borde): */
    /* background-color: var(--color-light-blue); */
    /* color: var(--color-dark); */
    transform: translateY(-2px);
}


/* ==================== SECCIÓN POR QUÉ ELEGIRNOS ==================== */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Layout responsivo */
    gap: 2rem; /* Espacio entre ítems */
    margin-top: 3rem;
}

.feature-item {
    text-align: center;
    padding: 1.5rem;
    /* Opcional: añadir un borde o fondo sutil */
    /* border: 1px solid #ddd; */
    /* border-radius: 8px; */
    /* background-color: var(--color-white); */
}

.icon-feature {
    font-size: 3rem; /* Iconos grandes */
    color: var(--color-accent); /* Color amarillo */
    margin-bottom: 1rem;
    display: inline-block; /* Para aplicar margen */
}

.feature-item h3 {
    margin-bottom: 0.5em;
    font-size: 1.3rem; /* 20.8px */
}


/* ==================== SECCIÓN MARCAS ==================== */
.brands {
    padding: 3rem 0; /* Menos padding vertical para esta sección */
}

.brand-logos {
    display: flex;
    flex-wrap: wrap; /* Permite que los logos pasen a la siguiente línea */
    justify-content: center; /* Centra los logos */
    align-items: center;
    gap: 3rem; /* Espacio entre logos */
    margin-top: 2rem;
}

.brand-logos img {
    max-height: 60px; /* Ajusta la altura máxima de los logos */
    width: auto; /* Mantiene la proporción */
    filter: grayscale(100%); /* Logos en blanco y negro por defecto */
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.brand-logos img:hover {
    filter: grayscale(0%); /* Color al pasar el ratón */
    opacity: 1;
}


/* ==================== SECCIÓN CONTACTO RÁPIDO ==================== */
.quick-contact {
    background-color: var(--color-primary); /* Fondo azul brillante */
    color: var(--color-white);
}

.quick-contact h2 {
    color: var(--color-white);
}

.quick-contact .subtitle {
    color: rgba(255, 255, 255, 0.9); /* Blanco semi-transparente */
}

.contact-options {
    margin-top: 2rem;
    display: flex; /* O 'block' si prefieres que estén uno debajo del otro en todas las pantallas */
    flex-wrap: wrap; /* Para que se ajusten en pantallas pequeñas */
    justify-content: center;
    gap: 1rem;
}

/* Sobrescribimos el estilo del botón secundario para esta sección */
.quick-contact .secondary-cta {
    background-color: var(--color-white); /* Fondo blanco */
    color: var(--color-primary); /* Texto azul primario */
    border: 2px solid var(--color-white); /* Borde blanco */
}

.quick-contact .secondary-cta:hover {
    background-color: transparent; /* Fondo transparente */
    color: var(--color-white); /* Texto blanco */
    border-color: var(--color-white); /* Mantiene borde blanco */
}
/* ==================== PÁGINA DE CATÁLOGO ==================== */
.catalog-page .page-title {
    text-align: center;
    margin-bottom: 1rem;
}

.catalog-page .page-description {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--color-grey-dark);
}

/* Estilos para Filtros (Opcional) */
.filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
}

.filter-button {
    padding: 0.6rem 1.2rem;
    background-color: var(--color-grey-light);
    color: var(--color-dark);
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.filter-button:hover {
    background-color: var(--color-light-blue);
    color: var(--color-dark);
}

.filter-button.active {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* Cuadrícula de Productos */
.product-grid {
    display: grid;
    /* Crea columnas responsivas: Mínimo 250px de ancho, máximo 1fr (fracción del espacio) */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 2rem; /* Espacio entre tarjetas */
}

/* Tarjeta de Producto Individual */
.product-card {
    background-color: var(--color-white);
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden; /* Asegura que la imagen no se salga del borde redondeado */
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column; /* Apila imagen e info verticalmente */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el ratón */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.product-image {
    position: relative; /* Para posibles overlays o badges */
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 200px; /* Altura fija para las imágenes de tarjeta */
    object-fit: contain; /* Escala la imagen para cubrir el espacio sin distorsión object-fit: cover;*/
    display: block;
    transition: transform 0.3s ease;
}
.product-card:hover .product-image img {
    transform: scale(1.05); /* Ligero zoom a la imagen al pasar sobre la tarjeta */
}


.product-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que esta sección crezca para llenar el espacio */
    text-align: center; /* Centra el texto dentro de la info */
}

.product-brand {
    font-size: 0.8rem; /* 12.8px */
    color: var(--color-grey-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
    display: block;
}

.product-name {
    font-size: 1.1rem; /* 17.6px */
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.4;
    /* Limitar número de líneas (opcional, requiere más CSS) */
    min-height: 48px; /* Aproximadamente 2 líneas, ajusta según tu fuente */
}

.product-name a {
    color: var(--color-dark); /* Hereda color oscuro */
}
.product-name a:hover {
    color: var(--color-primary); /* Azul primario al pasar el ratón */
}

.product-price {
    font-size: 1.3rem; /* 20.8px */
    font-weight: 700; /* Negrita */
    color: var(--color-primary); /* Precio en color primario */
    margin-top: auto; /* Empuja el precio y botón hacia abajo si hay espacio */
    margin-bottom: 1rem;
}

/* Botón dentro de la tarjeta */
.product-cta {
    padding: 0.6rem 1.2rem; /* Botón ligeramente más pequeño */
    font-size: 0.9rem;
    background-color: var(--color-dark); /* Fondo oscuro para contraste */
    color: var(--color-white);
    border-radius: 20px;
    align-self: center; /* Centra el botón horizontalmente */
    margin-top: 0.5rem; /* Espacio sobre el botón */
}
.product-cta:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}
/* ==================== PÁGINA DETALLE DE PRODUCTO ==================== */
.product-detail-page {
    padding: 2rem 0 4rem 0; /* Ajusta padding si es necesario */
}

.product-detail-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales por defecto */
    gap: 3rem; /* Espacio entre columnas */
    align-items: start; /* Alinea los items al inicio de su celda */
}

/* Columna Izquierda: Galería */
.product-gallery {
    position: sticky; /* Hace que la galería se quede fija al hacer scroll (opcional) */
    top: calc(var(--header-height) + 2rem); /* Posición sticky relativa al header */
}

.main-image-container {
    border: 1px solid var(--color-grey-light);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}

#main-product-image {
    width: 100%;
    height: auto;
    display: block;
}

.product-thumbnails {
    display: flex;
    gap: 0.8rem;
}

.product-thumbnails .thumbnail {
    width: 80px; /* Ancho fijo para miniaturas */
    height: 80px;
    object-fit: cover;
    border: 2px solid var(--color-grey-light);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.product-thumbnails .thumbnail:hover,
.product-thumbnails .thumbnail.active-thumb { /* Estilo para miniatura activa/hover */
    border-color: var(--color-primary);
}


/* Columna Derecha: Detalles */
.product-details {
    /* No necesita estilos especiales de layout si usa Grid */
}

.detail-brand {
    font-size: 0.9rem;
    color: var(--color-grey-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
    display: block;
}

.detail-title { /* Es un H1 */
    font-size: 2.2rem; /* 35.2px */
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.detail-price {
    font-size: 2rem; /* 32px */
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.price-per-unit {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-grey-dark);
    margin-left: 0.5rem;
}

.detail-short-desc {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.detail-availability {
    font-weight: 600;
    margin-bottom: 2rem;
    color: #28a745; /* Verde para disponibilidad */
}
.detail-availability i {
    margin-right: 8px;
}

/* Sección CTA Contacto */
.detail-cta-contact {
    background-color: var(--color-grey-light);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2.5rem;
    border: 1px solid #ddd;
}

.detail-cta-contact h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.4rem; /* 22.4px */
}
.detail-cta-contact p {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.contact-button {
    display: block; /* Hace que cada botón ocupe una línea */
    width: 100%; /* Ocupa todo el ancho disponible */
    margin-bottom: 0.8rem; /* Espacio entre botones */
    text-align: center; /* Centra el texto del botón */
}
.contact-button:last-child {
    margin-bottom: 0; /* Quita margen al último botón */
}


/* Secciones de Información Detallada */
.detailed-info-sections {
    margin-top: 2rem; /* Espacio antes de las secciones detalladas */
}

.detail-section {
    margin-bottom: 2rem;
}

.detail-section h2 {
    font-size: 1.6rem; /* 25.6px */
    border-bottom: 2px solid var(--color-grey-light);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.detail-section ul {
    list-style: none; /* Quitamos viñetas por defecto */
    padding-left: 0;
}

.detail-section ul li {
    position: relative;
    padding-left: 25px; /* Espacio para el icono */
    margin-bottom: 0.5em;
}

.detail-section ul li i.fa-check { /* Icono de check en listas */
    position: absolute;
    left: 0;
    top: 5px; /* Ajusta verticalmente */
    color: var(--color-primary); /* Icono en azul */
    font-size: 0.9rem;
}

.detail-section strong { /* Resaltar texto como Composición, etc. */
    font-weight: 600;
    color: var(--color-dark);
}
/* ==================== ESTILOS PARA PÁGINAS ESTÁTICAS (Cómo Ordenar, Nosotros) ==================== */

.static-page {
    padding: 3rem 0 4rem 0; /* Padding vertical */
}

/* Contenedor más estrecho para mejor legibilidad del texto */
.static-page-container {
    max-width: 800px; 
}

.static-page .page-title {
    text-align: center;
    margin-bottom: 1.5rem;
}

.static-page .page-description {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 1.1rem;
    color: var(--color-grey-dark);
}

/* Estilos para la lista de pasos en "Cómo Ordenar" */
.order-steps {
    list-style: none;
    padding-left: 0;
    margin-top: 3rem;
    counter-reset: step-counter; /* Inicia contador */
}

.order-steps li {
    display: flex;
    align-items: flex-start; /* Alinea icono y texto arriba */
    margin-bottom: 2.5rem; /* Espacio entre pasos */
    position: relative; /* Para la línea conectora (opcional) */
}

.order-steps .step-icon {
    flex-shrink: 0; /* Evita que el icono se encoja */
    width: 50px;
    height: 50px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    margin-right: 1.5rem;
    /* Contador numérico */
    /* content: counter(step-counter); 
    counter-increment: step-counter; */
}

.order-steps .step-content h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}
.order-steps .step-content p {
    margin-bottom: 1rem;
}

.contact-methods-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}
.contact-button-step { /* Ajuste para botones dentro de los pasos */
     padding: 0.5rem 1rem;
     font-size: 0.9rem;
}

/* Estilos para la sección de Información de Entrega */
.delivery-info {
    margin-top: 4rem;
    padding: 2rem;
    background-color: var(--color-grey-light);
    border-radius: 8px;
    border: 1px solid #ddd;
}

.delivery-info h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.delivery-info h3 {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
}
.delivery-info .icon-section {
    color: var(--color-primary);
    margin-right: 10px;
    font-size: 1.3rem;
}

.delivery-info p {
    margin-bottom: 1.5rem;
    padding-left: 30px; /* Indenta el texto respecto al icono */
}


/* Estilos para la página "Sobre Nosotros" */
.about-us-image {
    width: 100%;
    max-height: 350px; /* Altura máxima para la imagen */
    object-fit: cover; /* Recorta si es necesario */
    border-radius: 8px;
    margin-bottom: 3rem;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.about-us-content h2 {
    font-size: 1.8rem; /* 28.8px */
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.about-us-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8; /* Mayor interlineado para textos largos */
}

/* Estilos para Misión/Visión opcional */
.mission-vision {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-grey-light);
}
.mission-vision h3 {
     font-size: 1.4rem;
     color: var(--color-dark);
     margin-bottom: 0.8rem;
}
.mission-vision ul {
     list-style: disc;
     padding-left: 20px;
}
.mission-vision li {
    margin-bottom: 0.5em;
}
/* ==================== RESPONSIVIDAD BÁSICA ==================== */

/* === Estilos para Tablets (Ej: pantallas hasta 992px) === */
@media (max-width: 992px) {
    :root {
        /* Opcional: Reducir ligeramente tamaños base si es necesario */
        /* font-size: 15px; */
    }

    .container {
        max-width: 90%; /* Usa más ancho de pantalla */
    }

    h1 { font-size: 2.2rem; } 
    h2 { font-size: 1.8rem; } 
    h3 { font-size: 1.4rem; } 

    /* Ajustar layout del header si es necesario */
    .main-nav ul li {
        margin-left: 15px; /* Menos espacio entre links */
    }
    .header-contact a {
        margin-left: 10px;
        font-size: 1.2rem;
    }

    /* Ajustar columnas de detalle de producto */
    .product-detail-container {
        gap: 2rem; /* Menos espacio entre columnas */
    }
    .detail-title {
        font-size: 2rem;
    }
    .detail-price {
        font-size: 1.8rem;
    }

    /* Ajustar columnas del footer */
    .footer-container {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.5rem;
    }
    
    /* Ajustar grid de productos */
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
        gap: 1.5rem;
    }
}


/* === Estilos para Móviles (Ej: pantallas hasta 768px) === */
@media (max-width: 768px) {
    :root {
        /* font-size: 14px; */ /* Opcional: Reducir más la base */
        --header-height: 60px; /* Header más pequeño */
    }

    body {
        padding-top: var(--header-height); /* Ajustar padding para nuevo header */
    }

    h1 { font-size: 1.9rem; } /* Reducir más los títulos */
    h2 { font-size: 1.6rem; } 
    h3 { font-size: 1.3rem; } 
    .detail-title { font-size: 1.8rem; } /* Título de producto */


    /* --- Ajustes de Header para Móvil --- */
    .header-container {
        flex-wrap: wrap; /* Permite que los elementos bajen si no caben */
        justify-content: center; /* Centra logo y nav (si baja) */
        padding: 0 15px; /* Menos padding lateral */
    }
    .logo {
        flex-basis: 80%; /* Asegura que el logo tenga espacio */
        text-align: center;
        margin-bottom: 5px; /* Espacio si la nav baja */
    }
    .logo a { font-size: 1.5rem; }
    .logo img { max-height: 35px; margin: 0 auto; }
    
    /* Simplificación del menú: Ocultamos nav de escritorio y contactos */
    /* NOTA: Un menú hamburguesa funcional requiere JavaScript */
    .main-nav {
         /* Ocultar menú principal por ahora (sin JS no hay toggle) */
         /* display: none; */ 
         /* Alternativa: Mostrarlo pero estilizado para móvil */
         order: 3; /* Poner la nav debajo del logo */
         flex-basis: 100%;
         margin-top: 10px;
    }
    .main-nav ul {
        justify-content: center; /* Centrar links */
        flex-wrap: wrap;
        gap: 5px 15px; /* Espacio vertical y horizontal */
    }
     .main-nav ul li {
        margin-left: 0; /* Quitar margen izquierdo */
    }
    .main-nav a {
        font-size: 0.9rem;
        padding: 5px;
    }
     .main-nav a.active::after {
         display: none; /* Ocultar subrayado activo */
     }


    .header-contact {
        /* Ocultar iconos de contacto en header móvil para simplicidad */
        /* display: none; */ 
        /* Alternativa: Moverlos */
        position: absolute; /* O ponerlos en otro lugar */
        top: 15px; 
        right: 15px;
    }
     .header-contact a {
         font-size: 1.1rem;
         margin-left: 8px;
     }


    /* --- Ajustes Generales de Layout --- */
    section {
        padding: 2.5rem 0; /* Menos padding vertical */
    }
    .container {
        max-width: 100%; /* Ocupa todo el ancho */
        padding: 0 15px; /* Padding lateral móvil */
    }
     .static-page-container { /* Contenedor estrecho para texto */
        max-width: 100%; 
        padding: 0 15px;
    }

    /* --- Secciones Específicas --- */
    .hero {
        padding: 4rem 0;
    }
    .hero h1 { font-size: 2.1rem; }

    .features {
        grid-template-columns: 1fr; /* Apila los features */
        gap: 1.5rem;
    }
    .feature-item { padding: 1rem; }

    .brand-logos { gap: 2rem; }
    .brand-logos img { max-height: 45px; }

    .contact-options {
        flex-direction: column; /* Apila los botones de contacto */
        align-items: center;
    }
    .cta-button { width: 90%; max-width: 300px; } /* Botones más anchos */


    /* --- Página de Catálogo --- */
     .catalog-page .page-description { margin-bottom: 2rem; }
     .filters { margin-bottom: 2rem; gap: 0.5rem; }
     .filter-button { padding: 0.5rem 1rem; font-size: 0.8rem;}
     .product-grid {
         grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 2 columnas en móvil */
         /* O si prefieres 1 columna: */
         /* grid-template-columns: 1fr; */
         gap: 1rem;
     }
     .product-card { box-shadow: 0 2px 5px rgba(0,0,0,0.08); }
     .product-image img { height: 150px; }
     .product-info { padding: 0.8rem; }
     .product-name { font-size: 1rem; min-height: auto; margin-bottom: 0.3rem; }
     .product-price { font-size: 1.1rem; margin-bottom: 0.8rem;}
     .product-cta { font-size: 0.8rem; padding: 0.5rem 1rem; }


    /* --- Página Detalle de Producto --- */
    .product-detail-container {
        grid-template-columns: 1fr; /* Apila las columnas */
        gap: 1.5rem;
    }
    .product-gallery {
        position: static; /* Quita el sticky en móvil */
        width: 100%;
        max-width: 400px; /* Limita ancho de galería */
        margin: 0 auto; /* Centra galería */
    }
    .product-thumbnails .thumbnail { width: 60px; height: 60px; }
    
    .detail-price { font-size: 1.6rem; }
    .detail-short-desc { font-size: 1rem; }
    .detail-cta-contact { padding: 1rem; }
    .contact-button { width: 100%; max-width: none; } /* Botones de contacto ocupan ancho */


    /* --- Página Cómo Ordenar --- */
    .order-steps li { flex-direction: column; align-items: center; text-align: center; }
    .order-steps .step-icon { margin-right: 0; margin-bottom: 1rem; }
    .contact-methods-steps { justify-content: center; }
    .delivery-info { padding: 1.5rem; }
    .delivery-info h3 { font-size: 1.1rem;}
    .delivery-info p { padding-left: 0; text-align: center;}
    .delivery-info h3 i { display: block; margin: 0 auto 0.5rem auto; } /* Icono sobre el texto */


    /* --- Página Sobre Nosotros --- */
     .about-us-image { max-height: 250px; margin-bottom: 2rem;}
     .about-us-content h2 { font-size: 1.5rem; }
     .about-us-content p { line-height: 1.7; }


    /* --- Footer --- */
    .footer-container {
        grid-template-columns: 1fr; /* Apila secciones del footer */
        text-align: center;
    }
    .footer-section { margin-bottom: 1.5rem; }
    .footer-section:last-child { margin-bottom: 0; }
    .footer-social a { font-size: 1.5rem; margin: 0 10px;}
    .icon-footer { margin: 0 auto 5px auto; display: block; } /* Iconos sobre el texto en footer */
    .footer-section p, .footer-section ul li { text-align: center; }
    .footer-section ul { padding-left: 0; }
    .copyright { font-size: 0.8rem; padding: 0.8rem 0;}
}


/* Opcional: Ajustes finos para pantallas muy pequeñas (menos de 480px) */
@media (max-width: 480px) {
    .product-grid {
         grid-template-columns: 1fr; /* Asegura 1 columna en pantallas muy pequeñas */
         gap: 1.5rem;
     }
    .hero h1 { font-size: 1.8rem; } 
    
    /* Otros ajustes muy específicos si son necesarios */
}
/* ==================================================================== */
/* --- CORRECCIÓN INDENTACIÓN EN SECCIÓN INFO ENTREGA / CÓMO ORDENAR --- */
/* ==================================================================== */

/* 1. DEVOLVER INDENTACIÓN A LA LISTA (UL) EN ESTA SECCIÓN */
/* Asegúrate de usar la clase correcta del contenedor donde está la lista: 
   Puede ser .delivery-info ul O .order-steps ul dependiendo de dónde esté esa lista */
   
.delivery-info ul { /* <-- O cambia a .order-steps ul si aplica */
    
    /* Añadimos la sangría de vuelta. Ajusta 40px si quieres más o menos */
    padding-left: 40px !important; 
    
    /* Nos aseguramos que no haya margen izquierdo extra */
    margin-left: 0 !important; 
    
    /* Aseguramos que el margen y padding generales (arriba/abajo/derecha) 
       no interfieran, anulando el 'margin:0; padding:0;' del reset */
    margin-top: 1em;    /* Espacio antes de la lista */
    margin-bottom: 1em; /* Espacio después de la lista */
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;

    /* OPCIONAL: Si quieres las viñetas (bullets) de vuelta */
    /* list-style: disc !important; */
}

/* 2. QUITAR INDENTACIÓN AÑADIDA A LOS PÁRRAFOS (P) EN ESTA SECCIÓN */
/* Usamos el mismo selector de la sección para ser específicos */

.delivery-info p { /* <-- O cambia a .order-steps p si aplica */

    /* Anulamos el padding izquierdo que encontraste */
    padding-left: 0 !important; 

    /* Por si acaso, anulamos también margen izquierdo */
    margin-left: 0 !important; 

    /* El margin-bottom: 1.5rem que encontraste SÍ lo queremos, 
       así que no lo tocamos aquí, ya debería estar aplicado por otra regla */
}