:root {
    /* Paleta de Colores Nueva (Cálida y Hogareña) */
    --color-primary: #A0522D;       /* Sienna (Marrón Oscuro Cálido para Títulos/Fondo) */
    --color-accent: #FFC0CB;        /* Rosa Pálido/Pastel (Acento suave) */
    --color-fondo: #FAF0E6;         /* Lino (Crema muy claro, fondo de página) */
    --color-fondo-claro: #FFFFFF;   /* Blanco puro (Fondo de cards/formulario) */
    --color-texto: #4B4B4B;         /* Gris Oscuro (Texto) */
    
    /* Tipografía */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Roboto', sans-serif;

    /* Diseño */
    --padding-section: 60px 20px;
    --max-width: 1200px;
}

.button-link2{
    display: inline-block;
    padding: 10px 40px 10px 15px;
    background-color: #b67e87;
    color: White;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.button-link2:hover {
    background-color: #1b2397;
}

.button-link3{
    display: inline-block;
    padding: 10px 40px 10px 15px;
    background-color: #b67e87;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.button-link3:hover {
    background-color: #aa671a;
}

.content-customer-support {
	display: flex;
	flex-direction: column;
}


/* 2. ESTILOS BASE Y TIPOGRAFÍA */


body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    background-color: var(--color-fondo); 
    color: var(--color-texto);
    line-height: 1.6;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin-top: 0;
}

main {
    padding: 0;
}


/* 3. HEADER Y NAVEGACIÓN */

header {
    background-color: var(--color-primary); 
    color: var(--color-fondo);
    padding: 15px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

header h1 {
    color: var(--color-fondo);
    font-size: 2.2em;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav a {
    color: var(--color-fondo);
    text-decoration: none;
    padding: 10px 15px;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--color-accent);
}

/* ======================================= */
/* 4. BOTONES GENÉRICOS (Reutilizables) */
/* ======================================= */

.btn-principal {
    display: inline-block;
    background-color: var(--color-accent); 
    color: var(--color-primary);
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s, transform 0.2s;
    border: none;
    cursor: pointer;
}

.btn-principal:hover {
    background-color: #ff99aa;
    transform: scale(1.05);
}

/* Botón de Pedir Ahora */
.btn-comprar {
    background-color: var(--color-primary);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s;
    font-weight: bold;
    width: 100%;
    border: none;
    cursor: pointer;
    display: block; 
    text-align: center;
    text-decoration: none;
}

.btn-comprar:hover {
    background-color: #8B4513;
}


/* ======================================= */
/* 5. SECCIÓN HERO */
/* ======================================= */

.hero {
    background: url('https://via.placeholder.com/1600x400/A0522D/FAF0E6?text=Fondo+Postres+Artesanales') no-repeat center center/cover; 
    text-align: center;
    padding: 120px 20px;
    color: white; 
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

.hero h2 {
    color: white; 
    font-size: 3.5em;
}

/* ======================================= */
/* 6. PRODUCTOS (USANDO GRID ROBUSTO Y EXTENSIBLE) */
/* ======================================= */

.productos-grid {
    text-align: center;
    padding: var(--padding-section);
    max-width: var(--max-width);
    margin: 0 auto;
    
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 30px;
}

.productos-grid h2 {
    grid-column: 1 / -1;
    font-size: 2.5em;
    margin-bottom: 40px;
}

.postre-card {
    background-color: var(--color-fondo-claro);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s, transform 0.3s;
}

.postre-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.postre-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 15px;
}

.descripcion {
    font-size: 0.9em;
    color: var(--color-texto);
    min-height: 40px; 
}

.precio {
    font-size: 1.5em;
    color: var(--color-primary);
    font-weight: 700;
    margin: 10px 0;
}

/* ======================================= */
/* 7. SECCIONES SECUNDARIAS */
/* ======================================= */

.contacto {
    max-width: 600px;
    margin: 0;
    padding: 40px;
    background-color: var(--color-fondo-claro);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.contacto h2 {
    /* CAMBIO CLAVE: Usamos el color primario para que coincida con "¿Cómo Funciona?" */
    text-align: center;
    color: var(--color-primary); 
    margin-bottom: 30px;
}

.contacto h3 {
    /* Subtítulos dentro del formulario (Ej: Detalle de Artículos) */
    color: var(--color-primary); 
    margin-top: 25px;
    margin-bottom: 10px;
}

.contacto label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
    color: var(--color-texto);
}

.contacto input, .contacto select, .contacto textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.galeria {
    text-align: center;
    padding: var(--padding-section);
}

.galeria-fotos {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.galeria-fotos img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ======================================= */
/* 8. FOOTER */
/* ======================================= */

footer {
    background-color: var(--color-primary);
    color: var(--color-fondo);
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
    margin-top: 40px;
}

footer a {
    color: var(--color-accent);
    text-decoration: none;
}

/* ======================================= */
/* ESTILOS ADICIONALES PARA PEDIDOS.HTML */
/* ======================================= */

.pedidos-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--padding-section);
    /* Usamos Grid para dividir el formulario y la información */
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 40px;
    
    /* IGUALAR ALTURAS */
    align-items: stretch; 
}

.historial-pedidos {
    /* Fondo blanco para que coincida con el formulario */
    background-color: var(--color-fondo-claro); 
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.historial-pedidos h2 {
    /* Encabezado de la sección de información (Ej: ¿Cómo Funciona?) */
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 10px;
    margin-top: 0;
}

/* Ajuste de la lista ordenada para que se vea bien sobre el fondo blanco */
.historial-pedidos .pasos ol {
    padding-left: 20px;
    margin-bottom: 20px;
}

.historial-pedidos .pasos p {
    margin-bottom: 15px;
}

.historial-pedidos a {
    color: var(--color-primary); 
    font-weight: bold;
}

.historial-pedidos strong {
    color: var(--color-primary);
}


/* ... (otros estilos de pedidos no relevantes) ... */

hr {
    border: none;
    height: 1px;
    background-color: #eee;
    margin: 10px 0;
}