/* Actualización del archivo css/recetas.css con la paleta de colores de marca */

/* Variables de colores de marca */
:root {
    --plt-base: #F5F5F3;           /* Blanco Cálido - Base 60% */
    --plt-principal: #2C2C2C;      /* Carbón Profundo - Contraste Principal 20% */
    --plt-enfasis: #FFB81C;        /* Amarillo Caterpillar - Énfasis Principal */
    --plt-premium: #4A234A;        /* Púrpura Profundo - Énfasis Secundario */
    --plt-neutro: #9A8D80;         /* Gris Cálido - Neutro Principal */
}

/* Estilos para iconos ASCII */
.ascii-icon {
    font-family: monospace;
    display: inline-block;
    font-size: 1.2em;
    margin-right: 5px;
    white-space: nowrap;
    color: var(--plt-enfasis); /* Amarillo para iconos ASCII */
}

/* Estilos para datos técnicos */
.recipe-specs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 30px 0;
    gap: 10px;
    background-color: var(--plt-base);
}

.spec-item {
    flex: 1;
    min-width: 120px;
    text-align: left;
    padding: 15px;
    background-color: var(--plt-principal);
    color: white;
    border-radius: 0;
}

.spec-item h3 {
    color: white;
    margin-top: 5px;
    margin-bottom: 5px;
}

.spec-icon {
    font-family: monospace;
    font-size: 1.5em;
    display: block;
    margin-bottom: 8px;
    color: var(--plt-enfasis); /* Amarillo para iconos */
}

/* Estilos para las herramientas */
.recipe-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 30px 0;
}

.tool-item {
    flex: 1;
    min-width: 120px;
    text-align: center;
    padding: 15px;
    margin: 10px;
    background-color: #3C3C3C; /* Un tono más claro que el principal */
    border-radius: 0px;
    color: white;
}

.tool-ascii {
    margin-bottom: 10px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-ascii pre {
    font-family: monospace;
    font-size: 10px;
    line-height: 1;
    color: var(--plt-enfasis); /* Amarillo para ASCII art */
}

.tool-item h4 {
    margin: 0;
    font-size: 1.2em;
    color: white;
}

.grind-info {
    display: flex;
    align-items: center;
    background-color: var(--plt-principal);
    padding: 15px;
    border-radius: 0px;
    color: white;
    justify-content: space-between;
    margin-top: 20px;
}

.grind-ascii {
    font-family: monospace;
    font-size: 1.5em;
    margin-right: 15px;
    color: var(--plt-neutro); /* Gris cálido para los círculos de molido */
}

.grind-level {
    background-color: var(--plt-enfasis); /* Amarillo para el nivel */
    padding: 5px 15px;
    border-radius: 0px;
    font-weight: bold;
    color: var(--plt-principal); /* Texto en carbón profundo */
}

/* Estilos para pasos */
.recipe-steps {
    margin: 30px 0;
    background-color: var(--plt-base);
}

.step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--plt-neutro);
}

.step-number {
    background-color: var(--plt-principal);
    color: var(--plt-enfasis); /* Número en amarillo */
    width: 30px;
    height: 30px;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
    padding-top: 5px;
    color: var(--plt-principal);
}

/* Este es el único bloque que debes sustituir en tu archivo recetas.css */
.step-time {
    background-color: var(--plt-premium); /* Púrpura para tiempos */
    color: white;
    padding: 5px 12px;
    border-radius: 0px;
    font-weight: bold;
    margin-left: 10px;
    align-self: flex-start;
    white-space: nowrap;
    min-width: 140px; /* Aumentado para acomodar los dos tiempos */
    text-align: center;
}
.step-time:hover {
    background-color: var(--plt-enfasis);
    color: var(--plt-principal);
    transition: all 0.3s ease;
}


/* Estilo para los relojes en la línea de tiempo */
.step-time .time-clock {
    display: inline-block;
    font-weight: normal;
}

/* Estilo para la flecha que conecta los relojes */
.step-time .time-arrow {
    color: var(--plt-enfasis);
    margin: 0 3px;
    font-weight: normal;
}

/* Hacer que la sección Quiénes Somos use ancho completo */
.quienes-somos-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
}

/* Contenedor para mantener el contenido alineado con el resto de la página */
.quienes-somos-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: row;
}

/* Columna izquierda con logo ASCII */
.quienes-logo-column {
    flex: 0 0 40%;
    background-color: #2C2C2C;
    padding: 3rem 2rem;
}

/* Columna derecha con texto */
.quienes-content-column {
    flex: 0 0 60%;
    padding: 3rem 2rem;
    background-color: #FFFFFF;
}

/* Separador y copyright */
.quienes-footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    text-align: center;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .quienes-somos-container {
        flex-direction: column;
    }
    
    .quienes-logo-column,
    .quienes-content-column {
        flex: 0 0 100%;
    }
}

/* Ajustes y consejos */
.recipe-tips {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 1.5rem 0;
    background-color: var(--plt-base);
}

.tip-item {
    padding: 1rem;
    border-radius: 0;
    border-left: 3px solid var(--plt-enfasis);
    transition: transform 0.2s ease;
}

.tip-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

.tip-title {
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: var(--plt-principal);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tip-content {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--plt-principal);
}

/* Cafés recomendados */
.recommended-coffees {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 0;
}

.coffee-item {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    border-left: 3px solid var(--plt-enfasis);
    transition: all 0.3s ease;
}

.coffee-item:hover {
    background-color: var(--plt-base);
    transform: translateX(3px);
}

.coffee-name {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--plt-principal);
}

.coffee-description {
    font-size: 0.95rem;
    margin-top: 0.25rem;
    margin-left: 1rem;
    color: var(--plt-neutro);
}

.coffee-art {
    font-family: monospace;
    font-size: 0.7rem;
    line-height: 1;
    text-align: center;
    color: var(--plt-principal);
    overflow-x: auto;
    margin: 2rem 0;
}

.closing-question {
    border-top: 1px dashed var(--plt-neutro);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    font-style: italic;
    color: var(--plt-principal);
}

/* Añade la clase plt a todos los encabezados y párrafos relevantes */
.plt {
    /* Esto puede estar vacío, es solo para que se pueda encontrar con la búsqueda */
}

/* Estilos para ingredientes */
.recipe-ingredients {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
    margin: 30px 0;
    background-color: var(--plt-base);
}

.ingredient-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    border-left: 3px solid var(--plt-enfasis);
    transition: all 0.3s ease;
}

.ingredient-item:hover {
    background-color: #ffffff;
    transform: translateX(3px);
}

.ingredient-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: monospace;
    font-size: 1.25rem;
    min-width: 2rem;
    color: var(--plt-enfasis);
}

.ingredient-content {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--plt-principal);
}