/*
 * La cara pública del taller.
 *
 * Hoja aparte de la del sistema y no una variante: adentro el color codifica
 * estado y el trabajo es leer rápido una grilla densa; acá el trabajo es que
 * alguien con el auto abollado levante el teléfono. Son dos oficios distintos
 * y compartir tokens los haría pelear.
 *
 * Negro, rojo y blanco los eligió el taller. La corrección que sí me tomé: el
 * negro lleva sesgo cálido y croma bajo —un negro plano con un rojo saturado
 * encima es el fondo de cualquier página oscura— y el rojo nunca es texto
 * chico, porque a ese tamaño no llega al contraste que necesita.
 */

@layer tokens, base, layout, componentes, utilidades;

@layer tokens {
    :root {
        /* Superficies. El taller es una nave con luz de tubo: el negro tira a
           cálido, no a azul. */
        --negro: oklch(0.145 0.010 30);
        --negro-1: oklch(0.192 0.011 30);
        --negro-2: oklch(0.243 0.012 30);
        --linea: oklch(0.315 0.013 30);
        /* 0,50 y no 0,44: es el borde del botón sin relleno, y el borde de un
           control es lo que lo hace reconocible como control. A 0,44 medía
           2,53 contra la página, por debajo del 3:1 que eso necesita. */
        --linea-viva: oklch(0.50 0.019 30);

        /* El rojo del taller, en dos valores: uno para pintar y uno para
           escribir. El de pintar no llega a 4,5 contra el fondo, y como texto
           chico se vuelve ilegible justo en la línea que más importa. */
        --rojo: oklch(0.575 0.208 27);
        --rojo-tinta: oklch(0.685 0.185 27);

        /* Blanco cálido para el texto; el secundario tira a acero para que se
           lea como metal contra el negro cálido y no como blanco sucio. */
        --tinta: oklch(0.955 0.005 60);
        --tinta-2: oklch(0.755 0.009 250);
        --tinta-3: oklch(0.615 0.011 250);

        --display: "Bahnschrift SemiCondensed", "Bahnschrift", "DIN Alternate",
            "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow",
            "Helvetica Neue", system-ui, sans-serif;
        --texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, sans-serif;
        --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono",
            "Roboto Mono", monospace;

        /* Escala fluida con techo: un clamp sin tope parte el título en dos
           renglones en el monitor grande de la oficina. */
        --t-titan: clamp(2.6rem, 6.6vw, 5rem);
        --t-grande: clamp(2rem, 5vw, 3.4rem);
        --t-cuerpo: clamp(1rem, 1.05vw, 1.125rem);
        --t-chico: 0.875rem;
        --t-micro: 0.75rem;

        --paso-1: 0.5rem;
        --paso-2: 1rem;
        --paso-3: 1.75rem;
        --paso-4: 3rem;
        --paso-5: clamp(3.5rem, 8vw, 7rem);

        --ancho: 78rem;
        --borde: 1px solid var(--linea);

        /* Cero radio en toda la página, y no es olvido: un paño de chapa no
           tiene esquinas redondeadas. Es la decisión que sostiene el resto. */
        --curva: cubic-bezier(0.2, 0, 0.3, 1);
    }
}

@layer base {
    *, *::before, *::after { box-sizing: border-box; }

    html {
        color-scheme: dark;
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        background: var(--negro);
        color: var(--tinta);
        font: var(--t-cuerpo)/1.6 var(--texto);
        font-synthesis-weight: none;
        overflow-x: hidden;
    }

    h1, h2, h3 {
        margin: 0;
        font-family: var(--display);
        font-weight: 700;
        line-height: 0.95;
        letter-spacing: -0.015em;
        text-transform: uppercase;
        text-wrap: balance;
    }

    p { margin: 0; max-width: 62ch; }

    a {
        color: var(--rojo-tinta);
        text-decoration-thickness: 1px;
        text-underline-offset: 0.2em;
    }

    img, svg { display: block; max-width: 100%; }

    /* El foco se ve sobre negro y sobre rojo. Sin esto la página no se puede
       recorrer con el teclado, que es como la recorre un lector de pantalla. */
    :focus-visible {
        outline: 2px solid var(--rojo-tinta);
        outline-offset: 3px;
    }

    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }
}

@layer layout {
    .ancho {
        width: 100%;
        max-width: var(--ancho);
        margin-inline: auto;
        padding-inline: clamp(1rem, 4vw, 3rem);
    }

    .seccion { padding-block: var(--paso-5); }

    /* El rótulo de sección: una línea de 1px, el nombre en versalitas
       espaciadas y nada más. Reemplaza al título metido en una caja. */
    .rotulo {
        display: flex;
        align-items: center;
        gap: var(--paso-2);
        margin-bottom: var(--paso-3);
        font: 600 var(--t-micro)/1 var(--mono);
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--tinta-3);
    }
    .rotulo::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--linea);
    }
}

@layer componentes {

    /* ---------- La faja ----------
       El único adorno de la página, y aparece dos veces. Es la cinta pegada en
       el piso de cualquier taller alrededor de la zona de trabajo: codifica
       «acá se trabaja», que es de lo que habla la página. */
    .faja {
        height: 10px;
        background: repeating-linear-gradient(
            115deg,
            var(--rojo) 0 16px,
            var(--negro) 16px 32px
        );
    }

    /* ---------- Barra ---------- */
    .barra {
        position: sticky;
        top: 0;
        z-index: 10;
        background: oklch(0.145 0.010 30 / 0.93);
        backdrop-filter: blur(6px);
        border-bottom: var(--borde);
    }
    .barra__fila {
        display: flex;
        align-items: center;
        gap: var(--paso-3);
        min-height: 4.25rem;
    }
    .barra__nav {
        display: none;
        margin-left: auto;
        gap: var(--paso-3);
    }
    .barra__nav a {
        font: 600 var(--t-chico)/1 var(--display);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--tinta-2);
        text-decoration: none;
        padding-block: 0.75rem;
        transition: color 140ms var(--curva);
    }
    .barra__nav a:hover { color: var(--tinta); }
    .barra__llamar { margin-left: auto; }

    @media (min-width: 56rem) {
        .barra__nav { display: flex; }
        .barra__llamar { margin-left: 0; }
    }

    /* ---------- Marca ---------- */
    .marca {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        text-decoration: none;
        color: inherit;
    }
    .marca__mark { flex: none; }
    .marca__texto { display: grid; gap: 0.12rem; }
    .marca__nombre {
        font: 700 1.3rem/0.9 var(--display);
        letter-spacing: 0.005em;
        text-transform: uppercase;
        color: var(--tinta);
    }
    .marca__rubro {
        font: 500 0.6rem/1 var(--mono);
        letter-spacing: 0.185em;
        text-transform: uppercase;
        color: var(--tinta-3);
    }

    /* ---------- Portón (el encabezado) ----------
       No mide 100vh y no está centrado. Mide lo que pide el contenido, y todo
       lo que importa —qué es, dónde queda, el teléfono— entra en el primer
       cuadro sin scrollear. */
    .porton {
        position: relative;
        padding-block: clamp(3rem, 7vw, 6rem) var(--paso-5);
        background:
            radial-gradient(120% 90% at 78% 0%, oklch(0.28 0.030 27 / 0.55), transparent 62%),
            linear-gradient(176deg, oklch(0.225 0.013 30) 0%, var(--negro) 68%),
            repeating-linear-gradient(97deg, transparent 0 3px, oklch(1 0 0 / 0.013) 3px 4px);
    }

    .porton__grilla { display: grid; gap: var(--paso-4); }
    @media (min-width: 62rem) {
        .porton__grilla {
            grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
            align-items: end;
            gap: var(--paso-5);
        }
    }

    .porton__lugar {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: var(--paso-2);
        font: 600 var(--t-micro)/1 var(--mono);
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--rojo-tinta);
    }
    .porton__lugar::before {
        content: "";
        width: 1.75rem;
        height: 3px;
        background: var(--rojo);
    }

    .porton h1 {
        font-size: var(--t-titan);
        letter-spacing: -0.028em;
        /* Sin `balance`: el corte lo elijo yo abajo. Balanceado partía la
           frase roja en dos renglones y la promesa se leía a la mitad. */
        text-wrap: pretty;
    }
    /* El rojo pinta la promesa, no el título entero con un degradado. Y va en
       su propio renglón: es la frase que tiene que quedar. */
    .porton h1 em {
        display: block;
        font-style: normal;
        color: var(--rojo-tinta);
    }

    .porton__bajada {
        margin-top: var(--paso-3);
        font-size: clamp(1.05rem, 1.5vw, 1.3rem);
        color: var(--tinta-2);
        max-width: 46ch;
    }

    .porton__acciones {
        display: flex;
        flex-wrap: wrap;
        gap: var(--paso-2);
        margin-top: var(--paso-3);
    }

    /* ---------- Botones ---------- */
    .boton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        /* 46px de alto real: esto se toca con el pulgar en la calle. */
        min-height: 2.875rem;
        padding: 0.7rem 1.4rem;
        border: 1px solid transparent;
        font: 700 0.95rem/1 var(--display);
        letter-spacing: 0.055em;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 140ms var(--curva),
            border-color 140ms var(--curva), color 140ms var(--curva),
            transform 100ms var(--curva);
    }
    .boton:active { transform: translateY(1px); }

    .boton--rojo {
        background: var(--rojo);
        color: oklch(0.99 0 0);
    }
    .boton--rojo:hover { background: oklch(0.63 0.21 27); }

    .boton--linea {
        background: transparent;
        border-color: var(--linea-viva);
        color: var(--tinta);
    }
    .boton--linea:hover {
        border-color: var(--tinta-2);
        background: oklch(1 0 0 / 0.04);
    }

    /* ---------- El teléfono, tratado como lo que es ----------
       En un taller el teléfono es la conversión. Va grande, con cifras de ancho
       fijo para que se puedan cantar, y es un tel: de verdad. */
    .telefono {
        display: block;
        text-decoration: none;
        color: inherit;
        border-top: 3px solid var(--rojo);
        padding-top: var(--paso-2);
    }
    .telefono__que {
        display: block;
        font: 600 var(--t-micro)/1 var(--mono);
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--tinta-3);
    }
    .telefono__numero {
        display: block;
        margin-top: 0.4rem;
        font: 700 clamp(1.9rem, 3.6vw, 2.9rem)/1 var(--display);
        letter-spacing: -0.01em;
        font-variant-numeric: tabular-nums;
        color: var(--tinta);
        transition: color 140ms var(--curva);
    }
    .telefono:hover .telefono__numero { color: var(--rojo-tinta); }
    .telefono__horario {
        display: block;
        margin-top: 0.55rem;
        font-size: var(--t-chico);
        color: var(--tinta-2);
    }

    /* ---------- Franja de datos ----------
       Dirección y horario, que es lo que más se busca. Cifras monoespaciadas y
       filetes de 1px, sin una caja alrededor. */
    .franja {
        border-block: var(--borde);
        background: var(--negro-1);
    }
    .franja__lista {
        display: grid;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    @media (min-width: 48rem) {
        .franja__lista { grid-auto-flow: column; grid-auto-columns: 1fr; }
    }
    .franja__lista li {
        padding: var(--paso-2) 0;
        border-top: var(--borde);
    }
    .franja__lista li:first-child { border-top: 0; }
    @media (min-width: 48rem) {
        .franja__lista li {
            border-top: 0;
            border-left: var(--borde);
            padding-inline: var(--paso-3);
        }
        .franja__lista li:first-child { border-left: 0; padding-left: 0; }
    }
    .franja__que {
        display: block;
        font: 600 var(--t-micro)/1 var(--mono);
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--tinta-3);
    }
    .franja__dato {
        display: block;
        margin-top: 0.35rem;
        font: 600 0.98rem/1.35 var(--display);
        letter-spacing: 0.01em;
        text-transform: uppercase;
        color: var(--tinta);
    }

    /* ---------- Oficios ----------
       Dos mandan y el resto acompaña. No son cinco tarjetas iguales: chapa y
       pintura son el negocio, lo demás es una lista con filetes. */
    .oficios { display: grid; gap: var(--paso-4); }
    @media (min-width: 60rem) {
        .oficios { grid-template-columns: 1fr 1fr; gap: var(--paso-5); }
    }

    .oficio h3 {
        font-size: var(--t-grande);
        color: var(--tinta);
    }
    .oficio h3 + p { margin-top: var(--paso-2); color: var(--tinta-2); }
    .oficio__linea {
        width: 3.5rem;
        height: 3px;
        margin-bottom: var(--paso-2);
        background: var(--rojo);
    }

    .extras {
        margin: var(--paso-4) 0 0;
        padding: 0;
        list-style: none;
        border-top: var(--borde);
    }
    @media (min-width: 48rem) {
        .extras { columns: 2; column-gap: var(--paso-4); }
    }
    @media (min-width: 72rem) {
        .extras { columns: 3; }
    }
    .extras li {
        padding: 0.85rem 0;
        border-bottom: var(--borde);
        break-inside: avoid;
        font-size: var(--t-chico);
        color: var(--tinta-2);
    }
    .extras li::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-right: 0.7rem;
        vertical-align: 0.1em;
        background: var(--rojo);
    }

    /* ---------- El recorrido ----------
       Acá sí van números: es una secuencia y el orden le importa al que lee,
       porque quiere saber en qué punto está su auto. */
    .recorrido {
        display: grid;
        gap: 1px;
        background: var(--linea);
        border: var(--borde);
    }
    @media (min-width: 40rem) { .recorrido { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 60rem) { .recorrido { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 78rem) { .recorrido { grid-template-columns: repeat(6, 1fr); } }

    .etapa {
        display: grid;
        align-content: start;
        gap: 0.55rem;
        padding: var(--paso-3) var(--paso-2);
        background: var(--negro-1);
        transition: background-color 160ms var(--curva);
    }
    .etapa:hover { background: var(--negro-2); }
    .etapa__n {
        font: 700 0.8rem/1 var(--mono);
        letter-spacing: 0.1em;
        color: var(--rojo-tinta);
    }
    .etapa__nombre {
        font: 600 1.05rem/1.15 var(--display);
        letter-spacing: 0.005em;
        text-transform: uppercase;
        color: var(--tinta);
    }
    .etapa__que {
        font-size: var(--t-chico);
        line-height: 1.45;
        color: var(--tinta-3);
    }

    /* ---------- Obras ----------
       Los huecos de foto. Mientras no haya fotos del taller cada uno se dibuja
       como un paño pintado bajo la luz de la nave: superficie oscura con un
       barrido de brillo cruzado. No es una imagen rota ni un cartel de
       «placeholder», y el día que entren las fotos se cambia una variable. */
    .obras {
        display: grid;
        gap: 1px;
        background: var(--linea);
        border: var(--borde);
    }
    @media (min-width: 44rem) {
        .obras { grid-template-columns: repeat(6, 1fr); }
        .obra:nth-child(1) { grid-column: span 4; }
        .obra:nth-child(2) { grid-column: span 2; }
        .obra:nth-child(3) { grid-column: span 2; }
        .obra:nth-child(4) { grid-column: span 2; }
        .obra:nth-child(5) { grid-column: span 2; }
    }

    .obra {
        position: relative;
        display: flex;
        align-items: flex-end;
        min-height: 13rem;
        padding: var(--paso-2);
        background-color: var(--negro-1);
        background-image: var(--foto, var(--pano));
        background-size: cover;
        background-position: center;
        overflow: hidden;
        --pano:
            linear-gradient(101deg,
                oklch(0.62 0.010 250 / 0) 0 34%,
                oklch(0.70 0.012 250 / 0.115) 46%,
                oklch(0.62 0.010 250 / 0) 58%),
            linear-gradient(168deg, oklch(0.275 0.013 250), oklch(0.175 0.010 250));
    }
    .obra:nth-child(1) { min-height: 20rem; }

    /* Con foto de verdad hace falta un velo, o el texto se pierde contra el
       cielo del fondo. Sin foto no va: taparía el brillo del paño. */
    .obra[style*="--foto"]::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, oklch(0.145 0.010 30 / 0.85), transparent 55%);
    }

    .obra__pie {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 0.2rem;
    }
    .obra__auto {
        font: 600 1rem/1.15 var(--display);
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--tinta);
        text-shadow: 0 1px 6px oklch(0.145 0.010 30 / 0.85);
    }
    .obra__trabajo {
        font: 500 var(--t-micro)/1.3 var(--mono);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--tinta-2);
        text-shadow: 0 1px 6px oklch(0.145 0.010 30 / 0.85);
    }

    /* ---------- Seguro ---------- */
    .seguro {
        padding-block: var(--paso-4);
        border-block: var(--borde);
        background: var(--negro-1);
    }
    .seguro__grilla {
        display: grid;
        gap: var(--paso-4);
    }
    @media (min-width: 60rem) {
        .seguro__grilla {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
            align-items: start;
            gap: var(--paso-5);
        }
    }
    .seguro h2 { font-size: var(--t-grande); }
    .seguro h2 + p { margin-top: var(--paso-2); color: var(--tinta-2); }

    .pasos {
        counter-reset: paso;
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: var(--paso-2);
    }
    .pasos li {
        display: grid;
        grid-template-columns: 2rem 1fr;
        gap: var(--paso-2);
        align-items: baseline;
        padding-bottom: var(--paso-2);
        border-bottom: var(--borde);
        color: var(--tinta-2);
        font-size: var(--t-chico);
    }
    .pasos li:last-child { border-bottom: 0; padding-bottom: 0; }
    .pasos li::before {
        counter-increment: paso;
        content: counter(paso, decimal-leading-zero);
        font: 700 0.8rem/1.6 var(--mono);
        color: var(--rojo-tinta);
    }
    .pasos strong { color: var(--tinta); font-weight: 600; }

    /* ---------- Cierre ---------- */
    .cierre {
        display: grid;
        gap: var(--paso-4);
        padding-block: var(--paso-5);
    }
    @media (min-width: 60rem) {
        .cierre {
            grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
            gap: var(--paso-5);
        }
    }
    .cierre h2 { font-size: var(--t-grande); }
    .cierre__bajada { margin-top: var(--paso-2); color: var(--tinta-2); }
    .cierre__acciones {
        display: flex;
        flex-wrap: wrap;
        gap: var(--paso-2);
        margin-top: var(--paso-3);
    }

    .datos { margin: 0; display: grid; }
    .datos > div {
        display: grid;
        grid-template-columns: 7.5rem 1fr;
        gap: var(--paso-2);
        padding: 0.85rem 0;
        border-bottom: var(--borde);
    }
    .datos > div:first-child { border-top: var(--borde); }
    .datos dt {
        font: 600 var(--t-micro)/1.6 var(--mono);
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: var(--tinta-3);
    }
    .datos dd { margin: 0; color: var(--tinta); font-size: var(--t-chico); }
    .datos dd a { color: var(--tinta); text-decoration-color: var(--linea-viva); }
    .datos dd a:hover { color: var(--rojo-tinta); }

    /* ---------- Pie ----------
       El acceso al sistema vive acá. No está escondido para que no lo
       encuentren: está abajo para que el cliente no lo confunda con algo para
       él, y dice «personal del taller» y no «login», que es la palabra que
       invita a probar suerte. */
    .pie {
        border-top: var(--borde);
        background: var(--negro-1);
        padding-block: var(--paso-3);
    }
    .pie__fila {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--paso-2) var(--paso-3);
        font-size: var(--t-micro);
        color: var(--tinta-3);
    }
    .pie__interno {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--paso-3);
    }
    @media (min-width: 48rem) {
        .pie__interno { margin-left: auto; }
    }
    .pie__interno a {
        font: 500 var(--t-micro)/1 var(--mono);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--tinta-3);
        text-decoration: none;
        padding: 0.5rem 0;
        transition: color 140ms var(--curva);
    }
    .pie__interno a:hover { color: var(--rojo-tinta); }
    .pie__interno a::before {
        content: "";
        display: inline-block;
        width: 5px;
        height: 5px;
        margin-right: 0.5rem;
        vertical-align: 0.12em;
        background: var(--linea-viva);
        transition: background-color 140ms var(--curva);
    }
    .pie__interno a:hover::before { background: var(--rojo); }
}

@layer utilidades {
    .salto {
        position: absolute;
        left: -9999px;
        top: 0;
        z-index: 20;
        padding: 0.75rem 1rem;
        background: var(--rojo);
        color: oklch(0.99 0 0);
        font: 600 var(--t-chico)/1 var(--display);
        text-transform: uppercase;
        text-decoration: none;
    }
    .salto:focus { left: 0; }

    .solo-lectores {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}