/* --- ESTILOS GENERALES --- */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { font-family: sans-serif; background: #fdfaf6; padding: 20px; color: #333; }
h1 { text-align: center; color: #5d4037; margin-bottom: 25px; }

/* Bloqueo de scroll para el modal en mobile */
.modal-abierto { overflow: hidden; height: 100vh; width: 100vw; position: fixed; }

/* --- CONTROLES --- */
.controles { max-width: 1156px; margin: 0 auto 40px auto; display: flex; flex-direction: column; gap: 20px; }

#buscador { 
    padding: 16px 24px; width: 100%; border: 1px solid #ddd; 
    border-radius: 32px; font-size: 16px; outline: none; 
}

.controles-secundarios {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 15px; width: 100%;
}

#filtros { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-filtro { padding: 8px 18px; cursor: pointer; border: 1px solid #d7ccc8; background: white; border-radius: 20px; font-size: 14px; }
.btn-filtro.activo { background: #5d4037; color: white; border-color: #5d4037; }

.btn-especial { 
    padding: 10px 22px; cursor: pointer; border: none; background: #ff9800; 
    color: white; font-weight: bold; border-radius: 32px; 
    box-shadow: 0 4px 10px rgba(255, 152, 0, 0.3); 
}

/* --- GRID DE RECETAS (4 columnas y redondeo sutil de 6px) --- */
.grid-recetas { display: flex; flex-wrap: wrap; gap: 24px; max-width: 1156px; margin: 0 auto; }

.receta-card { 
    position: relative; width: calc((100% - 72px) / 4); aspect-ratio: 2 / 3;
    border-radius: 6px; overflow: hidden; cursor: pointer; background: #000; transition: transform 0.3s;
}
.receta-card:hover { transform: translateY(-5px); }

.grid-foto-plato { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 1; }

.card-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 15px; z-index: 2;
}

/* Antetítulo blanco y pequeño */
.antetitulo { font-size: 0.65rem; text-transform: uppercase; color: #fff; letter-spacing: 1.5px; margin-bottom: 5px; opacity: 0.9; }
.receta-card h3 { color: white; font-size: 1.1rem; line-height: 1.2; margin: 0; }

/* --- MODAL / OVERLAY COMPATIBLE CON MOBILE --- */
.modal-backdrop { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.7); opacity: 0; visibility: hidden; transition: 0.3s; z-index: 2000; 
}
.modal-backdrop.visible { opacity: 1; visibility: visible; }

.modal { 
    position: fixed; bottom: 0; left: 0; width: 100%; height: 85vh; 
    background: white; z-index: 2001; border-radius: 16px 16px 0 0; 
    overflow-y: auto; transform: translateY(100%); transition: transform 0.4s ease-out; 
}
.modal.visible { transform: translateY(0); }

.btn-cerrar { 
    position: sticky; top: 15px; right: 15px; float: right; 
    width: 44px; height: 44px; border-radius: 50%; border: none; 
    background: #eee; cursor: pointer; font-size: 24px; z-index: 2010;
}

.modal-content { padding: 25px; max-width: 800px; margin: 0 auto; }
.modal-top { display: flex; gap: 30px; margin-bottom: 30px; }
.modal-col-izq, .modal-col-der { flex: 1; }
#modal-img-plato { width: 100%; border-radius: 6px; object-fit: cover; }
.antetitulo-modal { text-transform: uppercase; font-size: 0.8rem; color: #795548; letter-spacing: 2px; }
#modal-titulo { font-size: 2rem; margin: 10px 0; color: #3e2723; }
#modal-lista-ingredientes { padding-left: 20px; line-height: 1.8; color: #555; }
#modal-img-manuscrita { width: 100%; border-radius: 6px; margin-top: 20px; border: 1px solid #eee; }

/* --- RESPONSIVE --- */
@media (max-width: 1024px) { .receta-card { width: calc((100% - 48px) / 3); } }
@media (max-width: 768px) { 
    .receta-card { width: calc((100% - 24px) / 2); } 
    .modal-top { flex-direction: column; }
    .controles-secundarios { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .receta-card { width: 100%; aspect-ratio: 1/1; }
    .modal-content { padding: 20px; }
}