/* Tema y componentes propios de la demo "AutoCaribe Express" (taller mecánico) */

body.demo {
    --d-primary: #1f2933;
    --d-accent:  #f26b1d;
    --d-soft:    #f4f5f7;
}

/* Portada */
.taller-hero {
    color: #fff;
    padding: 110px 0 100px;
    background:
        linear-gradient(115deg, rgba(17,24,39,0.96) 0%, rgba(31,41,51,0.88) 55%, rgba(242,107,29,0.55) 100%),
        repeating-linear-gradient(45deg, #1f2933 0 14px, #243039 14px 28px);
}
.taller-hero__kicker { color: var(--d-accent); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 14px; }
.taller-hero h1 { font-size: 2.8rem; line-height: 1.15; max-width: 640px; margin-bottom: 16px; }
.taller-hero p  { max-width: 540px; color: #d7dde5; font-size: 1.1rem; margin-bottom: 28px; }
.taller-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Por qué elegirnos */
.taller-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.taller-why__item { text-align: center; padding: 10px; }
.taller-why__num {
    width: 54px; height: 54px; margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--d-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 800;
}
.taller-why__item h3 { color: var(--d-primary); margin-bottom: 4px; }
.taller-why__item p  { color: var(--d-muted); font-size: 0.95rem; }

/* Galería (bloques de color; en una página real van las fotos del taller) */
.taller-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.taller-tile {
    aspect-ratio: 4 / 3;
    border-radius: var(--d-radius);
    display: flex; align-items: flex-end;
    padding: 14px;
    color: #fff; font-weight: 700;
}
.taller-tile:nth-child(1) { background: linear-gradient(135deg, #1f2933, #3b4856); }
.taller-tile:nth-child(2) { background: linear-gradient(135deg, #f26b1d, #f59a5c); }
.taller-tile:nth-child(3) { background: linear-gradient(135deg, #3b4856, #1f2933); }
.taller-tile:nth-child(4) { background: linear-gradient(135deg, #f59a5c, #f26b1d); }
.taller-tile:nth-child(5) { background: linear-gradient(135deg, #2f3b47, #526273); }
.taller-tile:nth-child(6) { background: linear-gradient(135deg, #f26b1d, #1f2933); }

/* Ubicación */
.taller-info { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: stretch; }
.taller-map { width: 100%; min-height: 320px; border: 0; border-radius: var(--d-radius); background: #dfe3e8; }
.taller-hours li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--d-line); }
.taller-hours li span:last-child { font-weight: 600; }

/* Pie del taller */
.taller-footer { background: var(--d-primary); color: #cbd5e1; text-align: center; padding: 26px 20px; font-size: 0.9rem; }

@media (max-width: 768px) {
    .taller-hero { padding: 70px 0 64px; }
    .taller-hero h1 { font-size: 2.1rem; }
    .taller-gallery { grid-template-columns: repeat(2, 1fr); }
    .taller-info { grid-template-columns: 1fr; }
}