/* ============================================================
   Sitioideal — Diseño «Taller» (talleres, autolavados, llanteras, oficios) · paso 7.i
   Va encima de sitio.css. Rudo y claro: gris concreto, acero oscuro, franjas de
   precaución con el acento del negocio, letra técnica (Oxanium) y los servicios
   como orden de trabajo (tabla con Servicio · Tiempo · Precio).
   HTML propio: app/vistas/sitio/disenos/taller/
   ============================================================ */

.diseno-taller {
    --ta-letra: "Oxanium", "Archivo", system-ui, sans-serif;
    --ta-concreto: color-mix(in srgb, var(--c-primario) 4%, #E8E7E3);
    --ta-concreto-2: color-mix(in srgb, var(--c-primario) 4%, #DEDCD6);
    --ta-acero: #1E2226;
    --ta-acero-2: #2A2F34;
    --ta-titulo: color-mix(in srgb, var(--c-primario) 55%, #111);
    --ta-texto: color-mix(in srgb, var(--c-texto) 80%, #111);
    --ta-rayas: repeating-linear-gradient(-45deg, var(--c-acento) 0 18px, var(--ta-acero) 18px 36px);
    --ta-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    /* Superficies (sitio.css) */
    --s-fondo: var(--ta-concreto);
    --s-alterna: var(--ta-concreto-2);
    --s-tarjeta: #F7F7F5;
    --s-tarjeta-alterna: #F7F7F5;
    --s-encabezado: var(--ta-acero);
    --s-texto: var(--ta-texto);
    --s-titulo: var(--ta-titulo);
    --s-linea: rgba(30, 34, 38, .12);
    --s-linea-fuerte: rgba(30, 34, 38, .22);

    background: var(--ta-concreto) var(--ta-grano);
}

@supports (color: oklch(from red l c h)) {
    .diseno-taller {
        --ta-titulo: oklch(from var(--c-primario) min(l, .38) c h);
        --ta-texto: oklch(from var(--c-texto) min(l, .3) c h);
    }
}

.diseno-taller h1,
.diseno-taller h2,
.diseno-taller h3,
.diseno-taller .logo__nombre,
.diseno-taller .boton,
.diseno-taller .menu a,
.diseno-taller .promocion__titulo,
.diseno-taller .sucursal__nombre,
.diseno-taller .especial__titulo,
.diseno-taller .equipo__titulo,
.diseno-taller .ta-orden th {
    font-family: var(--ta-letra);
    font-stretch: normal;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* ---------- Encabezado de acero ---------- */
.diseno-taller .encabezado { border-bottom: 6px solid transparent; border-image: var(--ta-rayas) 6; }
.diseno-taller .logo:has(.logo__imagen),
.diseno-taller .logo:has(svg) { padding: 6px 12px; border-radius: 4px; background: #F4F4F2; }
.diseno-taller .logo__imagen { height: 42px; }
.diseno-taller .logo__nombre { color: #F4F4F2; font-weight: 800; }
.diseno-taller .menu a { color: rgba(244, 244, 242, .8); font-size: .92rem; font-weight: 700; }
.diseno-taller .menu a:hover { color: var(--c-acento); }

/* ---------- Botones ---------- */
.diseno-taller .boton { padding: 14px 22px; border-radius: 4px; font-size: 1rem; font-weight: 800; }
.diseno-taller .boton--principal { background: var(--ta-acero); color: #F4F4F2; box-shadow: 4px 4px 0 var(--c-acento); }
.diseno-taller .boton--principal:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--c-acento); }
.diseno-taller .boton--secundario { border: 2px solid var(--ta-acero); background: transparent; color: var(--ta-acero); }
.diseno-taller .boton--secundario:hover { background: rgba(30, 34, 38, .06); }

/* ---------- Portada ---------- */
.ta-portada {
    position: relative;
    padding-top: clamp(40px, 6vw, 80px);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(30, 34, 38, .05) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(rgba(30, 34, 38, .05) 1px, transparent 1px) 0 0 / 48px 48px,
        var(--ta-concreto);
}

.ta-portada__rejilla {
    display: grid;
    gap: 44px;
    align-items: center;
    padding-bottom: clamp(44px, 6vw, 76px);
}

@media (min-width: 900px) {
    .ta-portada__rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; }
}

.ta-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 5px 12px;
    background: var(--ta-acero);
    color: #F4F4F2;
    font-family: var(--ta-letra);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.ta-etiqueta .icono { width: 18px; height: 18px; color: var(--c-acento); }

.ta-portada__nombre {
    margin: 0 0 16px;
    color: var(--ta-acero);
    font-size: clamp(2.4rem, 1.3rem + 4.6vw, 4.8rem);
    font-weight: 800;
    line-height: 1;
    overflow-wrap: break-word;
}

.ta-portada__eslogan { max-width: 38ch; margin: 0 0 26px; font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); }

/* "Abierto ahora" como letrero de la puerta */
.ta-letrero {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 24px;
    padding: 9px 16px;
    border: 2px solid var(--ta-acero);
    background: #F7F7F5;
    color: var(--ta-acero);
    text-decoration: none;
}
.ta-letrero strong { font-family: var(--ta-letra); letter-spacing: .06em; text-transform: uppercase; }
.ta-letrero span:last-child:not(.ta-letrero__foco) { opacity: .8; }
.ta-letrero__foco { width: 10px; height: 10px; border-radius: 50%; background: #C0392B; }
.ta-letrero--abierto .ta-letrero__foco { background: #1E9E4A; box-shadow: 0 0 0 4px rgba(30, 158, 74, .2); }
.ta-letrero--pronto .ta-letrero__foco { background: #D98200; }

/* La foto en el marco de acero */
.ta-portada__visual { position: relative; justify-self: center; width: min(100%, 520px); }

.ta-marco {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 12px solid var(--ta-acero);
    border-bottom-width: 26px;
    background: var(--ta-acero-2);
    box-shadow: 10px 10px 0 rgba(30, 34, 38, .18);
}

/* La franja de precaución en la parte de abajo del marco */
.ta-marco::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 14px;
    background: var(--ta-rayas);
}

.ta-marco picture,
.ta-marco picture img { width: 100%; height: 100%; }
.ta-marco picture img { object-fit: cover; }

.ta-marco--logo { display: grid; place-items: center; background: #F4F4F2; }
.ta-marco__logo { width: 58%; height: auto; }
.ta-marco__inicial { color: var(--ta-acero); font-family: var(--ta-letra); font-size: 8rem; font-weight: 800; line-height: 1; }

/* El sello */
.ta-sello {
    position: absolute;
    top: -18px;
    right: -14px;
    display: grid;
    place-content: center;
    width: 104px;
    height: 104px;
    border: 3px dashed var(--ta-acero);
    border-radius: 50%;
    background: var(--c-acento);
    color: var(--c-sobre-acento);
    font-family: var(--ta-letra);
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    box-shadow: 0 0 0 5px var(--c-acento);
    transform: rotate(-12deg);
}
.ta-sello small { font-size: .78rem; font-weight: 700; letter-spacing: .1em; }
.ta-sello strong { font-size: 1.6rem; font-weight: 800; }
.ta-sello .icono { width: 44px; height: 44px; }

.ta-precaucion { height: 16px; background: var(--ta-rayas); }

@media (max-width: 599.98px) {
    .ta-portada__visual { width: min(100%, 340px); }
    .ta-sello { width: 84px; height: 84px; right: -6px; }
    .ta-sello strong { font-size: 1.3rem; }
}

/* ---------- Secciones ---------- */
.diseno-taller .seccion { background-image: var(--ta-grano); }

.diseno-taller .seccion h2 {
    color: var(--ta-acero);
    font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
}

.diseno-taller .seccion h2::after {
    content: "";
    display: block;
    width: 90px;
    height: 8px;
    margin-top: 12px;
    background: var(--ta-rayas);
}

.ta-cabeza { margin-bottom: 28px; }
.ta-cabeza h2 { margin: 0; }

.ta-antetitulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: var(--ta-titulo);
    font-family: var(--ta-letra);
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.ta-antetitulo .icono { width: 18px; height: 18px; }

/* ---------- La orden de trabajo ---------- */
.diseno-taller .catalogo__indice a { border: 2px solid var(--ta-acero); border-radius: 4px; color: var(--ta-acero); font-family: var(--ta-letra); text-transform: uppercase; }
.diseno-taller .catalogo__indice a:hover { background: var(--ta-acero); color: #F4F4F2; }

.ta-grupo + .ta-grupo { margin-top: 40px; }
.ta-grupo__nombre { margin: 0 0 4px; color: var(--ta-acero); font-size: 1.45rem; font-weight: 800; }
.ta-grupo__descripcion { margin: 0 0 6px; opacity: .8; }

.ta-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ta-orden {
    width: 100%;
    margin-top: 12px;
    border-collapse: collapse;
    border: 2px solid var(--ta-acero);
    background: #F7F7F5;
    box-shadow: 8px 8px 0 rgba(30, 34, 38, .14);
}

.ta-orden thead th {
    padding: 10px 16px;
    background: var(--ta-acero);
    color: #F4F4F2;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-align: left;
}

.ta-orden td {
    padding: 14px 16px;
    border-top: 1px dashed var(--s-linea-fuerte);
    vertical-align: middle;
}

.ta-renglon__servicio { display: flex; align-items: center; gap: 14px; }

.ta-renglon__folio {
    flex: none;
    color: var(--ta-titulo);
    font-family: var(--ta-letra);
    font-size: .85rem;
    font-weight: 700;
    opacity: .7;
}

.ta-renglon__foto { flex: none; width: 56px; height: 56px; border: 2px solid var(--ta-acero); object-fit: cover; }

.ta-renglon__nombre { display: block; color: var(--ta-acero); font-size: 1.06rem; line-height: 1.3; }
.ta-renglon__estrella .icono { width: 15px; height: 15px; color: #B7791F; fill: currentColor; vertical-align: -2px; }
.ta-renglon__descripcion { display: block; margin-top: 2px; font-size: .94rem; opacity: .8; }

.ta-renglon__tiempo { white-space: nowrap; font-family: var(--ta-letra); font-weight: 600; }
.ta-renglon__tiempo .icono { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--ta-titulo); }

.ta-renglon__precio { white-space: nowrap; }
.ta-renglon__precio strong { display: block; color: var(--ta-acero); font-family: var(--ta-letra); font-size: 1.2rem; font-weight: 800; }
.ta-renglon__precio small { display: block; font-size: .85rem; opacity: .75; white-space: normal; }

.ta-renglon__accion { width: 1%; text-align: right; }

.ta-cotizar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 4px;
    background: var(--c-acento);
    color: var(--c-sobre-acento);
    font-family: var(--ta-letra);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
.ta-cotizar .icono { width: 16px; height: 16px; }
.ta-cotizar:hover { filter: brightness(1.06); }

/* En el celular, cada renglón como tarjeta */
@media (max-width: 719.98px) {
    .ta-orden thead { display: none; }
    .ta-orden,
    .ta-orden tbody,
    .ta-orden tr,
    .ta-orden td { display: block; width: auto; }
    .ta-orden tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 14px; border-top: 1px dashed var(--s-linea-fuerte); }
    .ta-orden tr:first-child { border-top: 0; }
    .ta-orden td { padding: 0; border: 0; }
    .ta-orden td.ta-renglon__servicio { display: flex; grid-column: 1 / -1; }
    .ta-renglon__tiempo { grid-column: 1 / -1; }
    .ta-orden td.ta-renglon__tiempo--vacio { display: none; }
    .ta-renglon__precio { align-self: center; }
    .ta-renglon__accion { width: auto; align-self: center; }
}

/* ---------- Lo demás: acero y concreto ---------- */
.diseno-taller .promocion,
.diseno-taller .testimonio,
.diseno-taller .pregunta,
.diseno-taller .contacto__item,
.diseno-taller .sucursal,
.diseno-taller .especial__punto,
.diseno-taller .persona,
.diseno-taller .destacado-tarjeta { border: 2px solid var(--ta-acero); border-radius: 4px; box-shadow: 6px 6px 0 rgba(30, 34, 38, .12); }
.diseno-taller .promocion__titulo { color: var(--ta-acero); font-weight: 800; }
.diseno-taller .testimonio__iniciales,
.diseno-taller .contacto__icono,
.diseno-taller .especial__marca,
.diseno-taller .persona__foto--iniciales { border-radius: 4px; background: var(--ta-acero); color: #F4F4F2; }
.diseno-taller .pregunta__signo { border-radius: 4px; background: var(--c-acento); }
.diseno-taller .pregunta__signo::before,
.diseno-taller .pregunta__signo::after { background: var(--c-sobre-acento); }
.diseno-taller .galeria__foto { border: 3px solid var(--ta-acero); border-radius: 0; }
.diseno-taller .galeria__ver-mas,
.diseno-taller .boton-chico { border: 2px solid var(--ta-acero); border-radius: 4px; color: var(--ta-acero); }
.diseno-taller .boton-chico--principal { background: var(--ta-acero); color: #F4F4F2; }
.diseno-taller .mapa { border: 3px solid var(--ta-acero); border-radius: 0; }
.diseno-taller .nosotros__foto img { border: 3px solid var(--ta-acero); border-radius: 0; }
.diseno-taller .horario__hoy th,
.diseno-taller .horario__hoy td { background: color-mix(in srgb, var(--c-acento) 22%, #fff); }
.diseno-taller .horario__hoy th { box-shadow: inset 5px 0 0 var(--ta-acero); }
.diseno-taller .horario__etiqueta { background: var(--ta-acero); color: #F4F4F2; }

/* ---------- Pie y barra del celular ---------- */
.diseno-taller .pie { border-top: 8px solid transparent; border-image: var(--ta-rayas) 8; background: var(--ta-acero); color: rgba(244, 244, 242, .8); }
.diseno-taller .barra-acciones { background: var(--ta-acero); }
.diseno-taller .barra-acciones__boton:not(.barra-acciones__boton--principal) { color: #F4F4F2; font-size: .76rem; }
.diseno-taller .barra-acciones__boton--principal { border-radius: 4px; font-family: var(--ta-letra); font-size: .95rem; text-transform: uppercase; }