/* estilos.css */
:root {
    --color-principal: #6d1b2b; /* El color vino/guinda aproximado */
    --color-gris-claro: #f4f4f4;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #000000;
}

/* Textos y colores */
.text-custom { color: var(--color-principal); }
.bg-custom { background-color: var(--color-principal); }
.btn-custom {
    background-color: var(--color-principal);
    color: white;
    border: none;
}
.btn-custom:hover {
    background-color: #4a121d;
    color: white;
}

/* Bordes gruesos del diseño 1 */
.borde-grueso {
    border: 4px solid var(--color-principal);
    padding: 20px;
}

/* Badge circular de 60 años */
.badge-circular {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 5px solid silver;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 0 auto;
}

/* Cajas A, B, C */
.caja-feature {
    border: 4px solid var(--color-principal);
    padding: 20px;
    text-align: center;
    height: 100%;
    background: white;
}

/* Diseño Página 2 (About) */
.about-card {
    background: white;
    border-radius: 15px;
    overflow: hidden; /* Para que la barra roja no se salga */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.barra-lateral-roja {
    background-color: var(--color-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.caja-info {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
}

/* --- AGREGAR AL FINAL DE estilos.css --- */

/* Estilos Específicos para PROJECTS */
.font-serif {
    font-family: 'Times New Roman', Times, serif; /* Fuente elegante para el título */
}

.card-project {
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.card-project-header {
    background-color: var(--color-principal); /* Color vino */
    color: white;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
}

.btn-silver {
    background: linear-gradient(to bottom, #f0f0f0, #d9d9d9);
    border: 1px solid #999;
    color: #333;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.btn-silver:hover {
    background: #ccc;
}

/* Footer específico de Projects */
.footer-vino {
    background-color: var(--color-principal);
    color: white;
    padding: 15px;
    text-align: center;
    font-size: 0.9rem;
}

/* Estilos Específicos para el nuevo ABOUT */
.caja-borde-negro {
    border: 3px solid black;
    padding: 20px;
    text-align: center;
    background: white;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.barra-decorativa-aguila {
    background-color: var(--color-principal);
    width: 100%;
    height: 150px; /* Altura de la barra roja */
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-donar-bloque {
    background-color: var(--color-principal);
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 10px;
    width: 100%;
    border: none;
}

.social-circle {
    width: 60px;
    height: 60px;
    background: #ccc; /* Gris plateado */
    border: 2px solid black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: black;
    text-decoration: none;
}

/* --- AGREGAR A estilos.css --- */

/* Estilo para los inputs del formulario (más altos y limpios) */
.form-control {
    border-radius: 0; /* Bordes cuadrados como en la imagen */
    padding: 10px 15px;
    border: 1px solid #ccc;
    background-color: #fcfcfc;
}

/* El borde gris grande que envuelve el formulario y la info */
.caja-contacto {
    border: 3px solid #e0e0e0; /* Gris claro grueso */
    padding: 40px;
    height: 100%;
    background: white;
}

/* Iconos de contacto en gris */
.icon-contact {
    color: #999; /* Gris plateado */
    width: 25px;
    text-align: center;
    margin-right: 10px;
}

/* La línea roja debajo del link activo en el menú */
.navbar-nav .nav-link.active {
    border-bottom: 3px solid var(--color-principal);
    color: black !important;
    font-weight: bold;
}


/* --- AGREGAR A estilos.css --- */

/* Color dorado/marrón de la imagen "Courts of Honor" */
.bg-dorado {
    background-color: #8c7b50; 
    color: white;
}

/* Botón estilo dorado para "Learn More" */
.btn-dorado {
    background-color: #8c7b50;
    color: white;
    border: none;
    padding: 12px 30px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 30px; /* Bordes redondeados como en la imagen */
}

.btn-dorado:hover {
    background-color: #6b5d3a; /* Un poco más oscuro al pasar el mouse */
    color: white;
}