/* ============================================================
   Tipografías alojadas aquí mismo, no en Google Fonts.
   Motivo: quita dos conexiones a un tercero, elimina CSS que
   bloquea el pintado y evita mandar la IP de cada visitante a
   Google. Los ficheros están en fuentes/ y se descargan solo
   los rangos de caracteres que la página necesita.
   ============================================================ */

@font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fuentes/anton-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Anton';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fuentes/anton-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fuentes/archivo-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fuentes/archivo-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fuentes/archivo-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fuentes/archivo-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fuentes/oswald-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fuentes/oswald-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fuentes/oswald-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fuentes/oswald-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fuentes/oswald-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fuentes/oswald-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   BULLRIDER — Hoja de estilos
   Dirección de arte tomada del flyer: noche cerrada, carbón y
   brasa. El logotipo manda: "BULL" en cromo cepillado, rayo
   rojo al centro y "RIDER" en rojo lacado. Todo lo demás
   (títulos, filetes, marcos, botones) es metal, rojo y chispa.
   ============================================================ */

:root {
    /* Negros y grises de la noche del cartel */
    --negro:        #08080A;
    --carbon:       #0E0F12;
    --carbon-alto:  #15171B;
    --humo:         #1D2026;

    /* Metal: del acero de sombra al cromo del reflejo */
    --acero:        #8E97A1;
    --acero-claro:  #C8D0D8;
    --cromo:        #EEF3F8;

    /* Tinta de texto y rojos del capote eléctrico */
    --hueso:        #E9E6E1;
    --rojo:         #D81E24;
    --rojo-vivo:    #FF2A20;
    --rojo-hondo:   #7A0B10;
    --brasa:        #FF6A18;   /* naranja de las chispas del flyer */

    --linea:        rgba(255, 255, 255, 0.10);
    --linea-fuerte: rgba(255, 255, 255, 0.22);

    --fuente-display: 'Anton', 'Impact', 'Haettenschweiler', sans-serif;
    --fuente-tecnica: 'Oswald', 'Bahnschrift', 'Segoe UI', sans-serif;
    --fuente-texto:   'Archivo', 'Segoe UI', sans-serif;

    --alto-barra: 64px;

    /* Degradado de cromo: se reutiliza en títulos y filetes */
    --cromo-degradado: linear-gradient(180deg,
        #FFFFFF 0%, #D3DBE3 30%, #79828B 50%,
        #F1F6FA 56%, #A5AEB7 78%, #5D656E 100%);

    /* Degradado de rojo lacado del "RIDER" */
    --rojo-degradado: linear-gradient(180deg,
        #FF7A63 0%, #E11F22 22%, #860D11 50%,
        #D5161B 58%, #F03A2C 80%, #6E080C 100%);

    /* Rayo rojo suelto, para viñetas y etiquetas */
    --icono-rayo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 40'%3E%3Cpath fill='%23D81E24' d='M18 0 L2 24 h8 L6 40 L24 14 h-9 L21 0 Z'/%3E%3C/svg%3E");

    /* Grano de impresión, para que el negro no quede plano */
    --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ----------------------- Base ----------------------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* Reserva el hueco de la barra de desplazamiento: así el contenido
       no salta de sitio cuando una sección la hace aparecer */
    scrollbar-gutter: stable;
}

body {
    font-family: var(--fuente-texto);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--hueso);
    background: var(--negro);
    -webkit-font-smoothing: antialiased;
}

svg { max-width: 100%; }

/* height:auto es imprescindible: los atributos width/height de las
   imágenes cuentan como alto fijo y anularían los aspect-ratio del CSS */
img { max-width: 100%; height: auto; }

/* <picture> es inline por defecto y rompería los huecos de altura fija */
picture { display: block; }
.servicio__media picture { width: 100%; height: 100%; }

a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--brasa);
    outline-offset: 3px;
}

::selection { background: var(--rojo); color: #fff; }

/* Enlace para saltar el menú con el teclado: solo se ve al enfocarlo */
.salto {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 200;
    padding: 0.8em 1.4em;
    font-family: var(--fuente-tecnica);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--rojo);
    text-decoration: none;
    transition: transform 0.15s ease;
}
.salto:focus-visible { transform: translate(-50%, 0); }

/* Las secciones enlazadas quedan por debajo de la barra fija, con un
   respiro para que el título no se pegue al filete de la barra */
section, header { scroll-margin-top: calc(var(--alto-barra) + 12px); }

/* ----------------------- Logotipo ----------------------- */

/* El arte del logo son ficheros de img/. El envoltorio sólo monta la caja:
   el ancho lo pone quien lo coloca (la barra, el cartel o el pie), y las
   capas de luz se apilan encima en posición absoluta. */
.marca { position: relative; display: block; }

.marca__arte {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 454.5933 / 108.5162;   /* la caja del cartel original */
}

.marca__brillo,
.marca__rayo {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Barrido de luz. Sobre el banner cruza el cartel entero, como el reflejo
   que corre por un rótulo satinado: es el rojo el que lo enseña, porque
   sobre las letras, ya blancas, un destello blanco no se vería. Sobre la
   marca suelta no hay fondo que lo recoja, así que ahí se recorta con el
   propio trazado del logo. */
.marca__brillo { overflow: hidden; }

.marca--blanca .marca__brillo {
    -webkit-mask-image: url(img/logo-marca.svg);
            mask-image: url(img/logo-marca.svg);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}
.marca__brillo::before {
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: 0;
    width: 42%;
    background: linear-gradient(100deg,
        transparent 0%, rgba(255, 255, 255, 0.06) 22%, rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0.06) 78%, transparent 100%);
    transform: translateX(-150%);
    animation: barrido 5s cubic-bezier(0.3, 0, 0.7, 1) infinite;
}
/* Espera un poco, cruza despacio y descansa fuera de cuadro */
@keyframes barrido {
    0%, 26%   { transform: translateX(-150%); }
    88%, 100% { transform: translateX(340%); }
}

/* Chispazo eléctrico del rayo central, como el del flyer. Es una capa de
   luz recortada con el rayo del logo, así que se suma al blanco de debajo. */
.marca__rayo {
    background: #FFF3E4;
    -webkit-mask-image: url(img/logo-rayo.svg);
            mask-image: url(img/logo-rayo.svg);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    opacity: 0;
    animation: chispa 7s infinite;
}
@keyframes chispa {
    0%, 85%, 100% { opacity: 0;    filter: none; }
    87%           { opacity: 0.35; filter: drop-shadow(0 0 14px rgba(255, 120, 60, 0.8)); }
    89%           { opacity: 1;    filter: drop-shadow(0 0 34px rgba(255, 170, 90, 1)); }
    92%           { opacity: 0.25; filter: drop-shadow(0 0 12px rgba(255, 120, 60, 0.6)); }
    95%           { opacity: 0.8;  filter: drop-shadow(0 0 24px rgba(255, 150, 70, 0.9)); }
    97%           { opacity: 0;    filter: none; }
}

/* ----------------------- Barra de navegación ----------------------- */

.barra {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: var(--alto-barra);
    padding: 0.5rem 1.5rem;
    background: rgba(8, 8, 10, 0.72);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Filete de brasa bajo la barra */
.barra::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%, var(--rojo-hondo) 12%, var(--rojo) 35%,
        var(--brasa) 50%, var(--rojo) 65%, var(--rojo-hondo) 88%, transparent 100%);
}

.barra--fija {
    background: rgba(8, 8, 10, 0.95);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
}

.barra__logo {
    display: block;
    flex: none;
    width: 168px;
    text-decoration: none;
    transition: filter 0.2s ease;
}
.barra__logo:hover { filter: brightness(1.12) drop-shadow(0 0 12px rgba(216, 30, 36, 0.5)); }

.barra__enlaces {
    display: flex;
    gap: 1.7rem;
    margin-left: auto;
}
.barra__enlaces a {
    position: relative;
    font-family: var(--fuente-tecnica);
    font-weight: 500;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    text-decoration: none;
    color: var(--acero-claro);
    padding: 0.3rem 0;
    transition: color 0.2s ease;
}
.barra__enlaces a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--rojo);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
}
.barra__enlaces a:hover { color: #fff; }
.barra__enlaces a:hover::after { transform: scaleX(1); }

.barra__tel {
    flex: none;
    font-family: var(--fuente-tecnica);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(180deg, var(--rojo-vivo), var(--rojo) 45%, var(--rojo-hondo));
    padding: 0.62em 1.15em;
    white-space: nowrap;
    clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
    transition: filter 0.2s ease;
}
.barra__tel:hover { filter: brightness(1.15) saturate(1.1); }

/* Botón de menú (solo móvil) */
.barra__menu {
    display: none;
    flex: none;
    width: 44px;
    height: 44px;   /* mínimo cómodo para el dedo */
    margin-left: auto;
    background: none;
    border: 1px solid var(--linea-fuerte);
    cursor: pointer;
    padding: 13px 10px;
}
.barra__menu span {
    display: block;
    height: 2px;
    background: var(--acero-claro);
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.barra__menu span + span { margin-top: 5px; }
.barra--abierta .barra__menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.barra--abierta .barra__menu span:nth-child(2) { opacity: 0; }
.barra--abierta .barra__menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------- Cartel de portada ----------------------- */

.cartel {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    min-height: calc(100svh - var(--alto-barra));
    background:
        radial-gradient(62% 55% at 20% 10%, rgba(216, 30, 36, 0.30), transparent 70%),
        radial-gradient(70% 62% at 82% 92%, rgba(255, 106, 24, 0.20), transparent 72%),
        linear-gradient(158deg, #16171C 0%, #0A0A0C 52%, #170B08 100%);
    overflow: hidden;
}

/* Grano sobre el negro, para que respire como papel impreso */
.cartel::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--grano);
    opacity: 0.07;
    pointer-events: none;
    z-index: 4;
}

/* Marco de cartel, ahora en hilo de acero */
.cartel__marco {
    position: absolute;
    inset: 16px;
    border: 1px solid var(--linea-fuerte);
    pointer-events: none;
    z-index: 5;
}
.cartel__marco::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.cartel__contenido {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.1rem;
    padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.5rem, 4.5vw, 4rem);
}

.cartel__plaza {
    font-family: var(--fuente-tecnica);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--acero);
}

/* El logo entra como un golpe: llega desenfocado, se pasa de frenada
   y se asienta con el metal aún caliente. */
@keyframes impacto {
    0% {
        opacity: 0;
        transform: scale(1.34);
        filter: blur(18px) brightness(2.6);
    }
    45% { opacity: 1; }
    68% {
        transform: scale(0.972);
        filter: blur(0) brightness(1.5);
    }
    84% {
        transform: scale(1.014);
        filter: blur(0) brightness(1.12);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) brightness(1);
    }
}

.cartel__titulo {
    width: min(100%, 620px);
    margin: 0.2rem 0;
    animation: impacto 1.2s cubic-bezier(0.2, 0.9, 0.25, 1) 0.28s both;
}
.cartel__titulo > .marca {
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.85))
            drop-shadow(0 0 34px rgba(216, 30, 36, 0.30));
}

/* Reflejo del logo sobre el suelo del cartel: copia volteada, difuminada
   y desvanecida. Lleva el mismo barrido de cromo, así que el destello
   recorre logo y reflejo a la vez. */
.cartel__espejo {
    display: block;
    /* El logo real es un banner a sangre: el plano del espejo cae en su
       borde inferior, así que la copia volteada arranca justo debajo. */
    margin-top: 0;
    transform: scaleY(-1);
    opacity: 0.3;
    filter: blur(1.4px);
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 24%, transparent 72%);
            mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 24%, transparent 72%);
    pointer-events: none;
}

/* Filete doble: hilo de cromo con brasa debajo, y un destello que lo recorre */
.cartel__filete {
    position: relative;
    overflow: hidden;
    width: min(440px, 78%);
    height: 5px;
    background:
        linear-gradient(90deg, transparent, var(--acero) 22%, var(--cromo) 50%, var(--acero) 78%, transparent) top / 100% 2px no-repeat,
        linear-gradient(90deg, transparent, var(--rojo) 30%, var(--brasa) 50%, var(--rojo) 70%, transparent) bottom / 100% 2px no-repeat;
}
.cartel__filete::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 42%, rgba(255, 255, 255, 0.95) 50%, transparent 58%);
    transform: translateX(-110%);
    animation: destello 7s ease-in-out infinite;
}
@keyframes destello {
    0%, 62%   { transform: translateX(-110%); }
    92%, 100% { transform: translateX(110%); }
}

.cartel__lema {
    font-family: var(--fuente-tecnica);
    font-weight: 400;
    font-size: clamp(0.74rem, 1.5vw, 0.95rem);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--acero-claro);
}

.cartel__sub {
    font-size: clamp(1rem, 2vw, 1.15rem);
    font-weight: 400;
    max-width: 44ch;
    text-wrap: balance;
    color: rgba(233, 230, 225, 0.82);
}

.cartel__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.cartel__resena {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-family: var(--fuente-tecnica);
    font-weight: 400;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--acero-claro);
    text-decoration: none;
    padding: 0.5em 1em;
    border: 1px solid var(--linea);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.2s ease, color 0.2s ease;
}
.cartel__resena:hover { border-color: var(--brasa); color: #fff; }
.estrellas { color: var(--brasa); letter-spacing: 0.12em; }

.cartel__pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.7rem 1.1rem;
    margin-top: 0.4rem;
}

/* Abierto / cerrado, calculado con el horario real */
.estado {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-family: var(--fuente-tecnica);
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.estado__punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}
.estado--abierto { color: #6BE38A; }
.estado--abierto .estado__punto {
    background: #4ADE80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
    animation: latido 2.4s ease-in-out infinite;
}
.estado--cerrado { color: var(--acero); }
.estado--cerrado .estado__punto {
    background: var(--acero);
    box-shadow: 0 0 0 3px rgba(142, 151, 161, 0.18);
}
@keyframes latido {
    0%, 100% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2); }
    50%      { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.05); }
}

/* La escena de la marca (toro.jpg), a sangre en la mitad derecha */
.cartel__foto {
    position: relative;
    min-height: 320px;
    overflow: hidden;
}
.cartel__foto picture {
    position: absolute;
    inset: 0;
}
.cartel__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* La escena es cuadrada y la columna casi también: entra entera */
    object-position: center;
    filter: saturate(1.05) contrast(1.05) brightness(0.92);
    animation: deriva 26s ease-in-out infinite alternate;
}
/* Deriva lenta de cámara. Muy contenida: la escena se quiere ver
   entera, así que solo se amplía lo justo para poder moverla. */
@keyframes deriva {
    from { transform: translate3d(0, 0, 0) scale(1.02); }
    to   { transform: translate3d(-9px, -6px, 0) scale(1.07); }
}
.cartel__foto::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        /* Solo funde la escena con la columna del texto y con la barra */
        linear-gradient(180deg, rgba(8, 8, 10, 0.75) 0%, transparent 14%),
        linear-gradient(90deg, var(--negro) 0%, rgba(8, 8, 10, 0.35) 9%, transparent 30%),
        linear-gradient(0deg, rgba(122, 11, 16, 0.28), transparent 50%);
    box-shadow: inset 0 0 130px rgba(8, 8, 10, 0.8);
    pointer-events: none;
}
/* Faro que cruza la foto, como el patinete pasando de largo */
.cartel__foto::before {
    content: "";
    position: absolute;
    inset: -10% -30%;
    z-index: 2;
    background: linear-gradient(102deg,
        transparent 42%,
        rgba(255, 140, 60, 0.16) 47%,
        rgba(255, 255, 255, 0.13) 50%,
        rgba(255, 140, 60, 0.16) 53%,
        transparent 58%);
    transform: translateX(-110%);
    animation: faro 9.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes faro {
    0%, 55%   { transform: translateX(-110%); }
    88%, 100% { transform: translateX(110%); }
}


/* Golpe de calor sobre todo el cartel, a la vez que chispea el rayo */
.cartel__destello {
    position: absolute;
    inset: 0;
    z-index: 3;
    mix-blend-mode: screen;
    pointer-events: none;
    background: radial-gradient(75% 65% at 50% 8%,
        rgba(255, 190, 110, 0.9) 0%, rgba(216, 30, 36, 0.45) 42%, transparent 75%);
    opacity: 0;
    animation: destello-calor 7s linear infinite;
}
@keyframes destello-calor {
    0%, 86%, 100% { opacity: 0; }
    88%           { opacity: 0.20; }
    90%           { opacity: 0.05; }
    92%           { opacity: 0.14; }
    96%           { opacity: 0; }
}

/* Aparición escalonada al cargar */
@keyframes aparecer {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
.revela-carga {
    opacity: 0;
    animation: aparecer 0.7s ease-out forwards;
    animation-delay: calc(var(--orden, 0) * 130ms);
}

/* ----------------------- Botones ----------------------- */

.boton {
    display: inline-block;
    font-family: var(--fuente-tecnica);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    text-decoration: none;
    padding: 1em 1.9em;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    transition: filter 0.18s ease, transform 0.18s ease,
                background-color 0.18s ease, color 0.18s ease;
}

/* El recorte de esquina también recortaría el aro de foco, que se
   pinta por fuera de la caja. Con el teclado devolvemos la caja entera. */
.boton:focus-visible,
.barra__tel:focus-visible { clip-path: none; }

.boton--rojo {
    color: #fff;
    background: linear-gradient(180deg, #F0342B 0%, var(--rojo) 45%, var(--rojo-hondo) 100%);
    filter: drop-shadow(0 6px 20px rgba(216, 30, 36, 0.35));
}
.boton--rojo:hover {
    transform: translateY(-2px);
    filter: brightness(1.12) drop-shadow(0 10px 26px rgba(216, 30, 36, 0.55));
}
.boton--rojo:active { transform: translateY(1px); }

.boton--acero {
    color: var(--cromo);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px var(--linea-fuerte);
}
.boton--acero:hover {
    color: var(--negro);
    background: var(--acero-claro);
    transform: translateY(-2px);
}

.boton--grande {
    font-size: clamp(1.05rem, 2.6vw, 1.35rem);
    padding: 1.05em 2.1em;
}

/* ----------------------- Tira de servicios (como en el flyer) ----------------------- */

.tira {
    background: linear-gradient(180deg, var(--carbon-alto), var(--carbon));
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    padding: 1.6rem 1.5rem;
}

.tira__lista {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}

.tira__item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-left: 1.2rem;
    border-left: 1px solid var(--linea);
}
.tira__item:first-child { border-left: 0; padding-left: 0; }

.tira__icono {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--rojo-vivo);
    background: rgba(216, 30, 36, 0.10);
    box-shadow: inset 0 0 0 1px rgba(216, 30, 36, 0.35);
}
.tira__icono svg { width: 22px; height: 22px; }

.tira__texto {
    display: block;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--acero);
}
.tira__texto b {
    display: block;
    font-family: var(--fuente-tecnica);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cromo);
}

/* ----------------------- Cinta corrida ----------------------- */

.cinta {
    background: linear-gradient(90deg, var(--rojo-hondo) 0%, var(--rojo) 30%, #E8412B 50%, var(--rojo) 70%, var(--rojo-hondo) 100%);
    color: #fff;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
                inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}
.cinta__pista {
    display: flex;
    width: max-content;
    animation: rodar 28s linear infinite;
}
.cinta__grupo {
    display: inline-block;
    white-space: nowrap;
    font-family: var(--fuente-tecnica);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: clamp(0.85rem, 1.8vw, 1.05rem);
    padding: 0.75em 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.cinta__grupo i {
    font-style: normal;
    color: #FFD9A0;
    margin: 0 0.95em;
}
@keyframes rodar {
    to { transform: translateX(-50%); }
}

/* ----------------------- Secciones ----------------------- */

.seccion {
    position: relative;
    padding: clamp(4rem, 9vw, 7rem) 1.5rem;
}

.seccion--carbon {
    background: var(--carbon);
    color: var(--hueso);
}
/* Brasa muy tenue en el borde superior de las secciones oscuras */
.seccion--carbon::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 340px;
    background: radial-gradient(60% 100% at 50% 0%, rgba(216, 30, 36, 0.10), transparent 70%);
    pointer-events: none;
}

/* Panel de metal cepillado: más claro que el carbón, sin salirse de la noche */
.seccion--acero {
    background:
        repeating-linear-gradient(102deg, rgba(255, 255, 255, 0.045) 0 1px, rgba(0, 0, 0, 0.05) 1px 5px),
        linear-gradient(160deg, #2B3138 0%, #171A1F 58%, #262C33 100%);
    color: var(--hueso);
    border-top: 2px solid var(--rojo);
    border-bottom: 2px solid var(--rojo);
}

.seccion--rojo {
    color: #fff;
    overflow: hidden;
}

.contenido {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
}

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-family: var(--fuente-tecnica);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--acero);
    margin-bottom: 0.9rem;
}
.etiqueta::before {
    content: "";
    width: 0.62em;
    height: 1em;
    background: var(--icono-rayo) center / contain no-repeat;
}
.seccion--acero .etiqueta { color: var(--acero-claro); }

.titulo {
    font-family: var(--fuente-display);
    font-weight: 400;
    font-size: clamp(2rem, 5.6vw, 3.6rem);
    line-height: 1;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    margin-bottom: clamp(2rem, 5vw, 3.2rem);
    max-width: 20ch;
    text-wrap: balance;
    background: var(--cromo-degradado);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55));
}

/* ----------------------- Servicios ----------------------- */

.servicios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.servicio {
    position: relative;
    background: linear-gradient(180deg, var(--carbon-alto), #0B0C0F);
    box-shadow: inset 0 0 0 1px var(--linea);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.servicio::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--rojo-hondo), var(--rojo), var(--brasa));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 2;
}
.servicio:hover {
    transform: translateY(-6px);
    box-shadow: inset 0 0 0 1px rgba(216, 30, 36, 0.45),
                0 18px 40px rgba(0, 0, 0, 0.55);
}
.servicio:hover::before { transform: scaleX(1); }

.servicio__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: 1px solid var(--linea);
}
/* Las fotos son verticales (3:4) y la tarjeta apaisada, así que el
   recorte se lleva más de la mitad del alto. --enfoque decide qué
   franja se conserva en cada una. */
.servicio__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center var(--enfoque, 45%);
    filter: saturate(0.92) contrast(1.1) brightness(0.88);
    transition: transform 0.4s ease, filter 0.4s ease;
}
.servicio:hover .servicio__media img {
    transform: scale(1.06);
    filter: saturate(1.05) contrast(1.08) brightness(1);
}

.servicio__cuerpo { padding: 1.5rem 1.6rem 1.8rem; }

.servicio h3 {
    font-family: var(--fuente-display);
    font-weight: 400;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.6rem;
    background: var(--cromo-degradado);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.servicio p {
    font-size: 0.97rem;
    color: rgba(233, 230, 225, 0.72);
}

/* Toda la tarjeta es enlace, no solo el título */
.servicio__enlace {
    display: block;
    color: inherit;
    text-decoration: none;
}

.servicio__mas {
    display: inline-block;
    margin-top: 1rem;
    font-family: var(--fuente-tecnica);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--rojo-vivo);
}
.servicio__mas span {
    display: inline-block;
    transition: transform 0.2s ease;
}
.servicio:hover .servicio__mas span { transform: translateX(5px); }

/* ----------------------- Parte de taller ----------------------- */

.parte {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 3rem;
}

.parte li {
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    padding: 1.15rem 0 1.35rem;
}

.parte b {
    position: relative;
    display: block;
    font-family: var(--fuente-tecnica);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 1.02rem;
    padding-left: 1.6rem;
    margin-bottom: 0.2rem;
}
.parte b::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.16em;
    width: 0.66em;
    height: 1.05em;
    background: var(--icono-rayo) center / contain no-repeat;
}

.parte span {
    display: block;
    padding-left: 1.6rem;
    font-size: 0.94rem;
    color: rgba(233, 230, 225, 0.7);
}

/* Cada avería lleva a su ficha */
.parte a {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease;
}
.parte a:hover { transform: translateX(4px); }
.parte a:hover b { color: var(--rojo-vivo); }
.parte a b::after {
    content: " \2192";
    color: var(--rojo-vivo);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.parte a:hover b::after { opacity: 1; }

/* Variante sin descripción, para los listados de síntomas */
.parte--simple b { margin-bottom: 0; }

.parte__nota {
    margin-top: 2.4rem;
    font-weight: 600;
    font-size: 1.05rem;
    border-left: 4px solid var(--rojo);
    padding-left: 1rem;
}

/* ----------------------- Galería de la tienda ----------------------- */

.galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.galeria figure { margin: 0; }

/* Marco de metal alrededor de cada foto */
.galeria__marco {
    padding: 5px;
    background: linear-gradient(150deg, #A9B2BB 0%, #3A4048 38%, #7C858E 60%, #23272C 100%);
    transition: background 0.3s ease, transform 0.3s ease;
}
.galeria figure:hover .galeria__marco {
    background: linear-gradient(150deg, var(--brasa) 0%, var(--rojo) 45%, var(--rojo-hondo) 100%);
    transform: translateY(-4px);
}

.galeria img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    filter: saturate(0.92) contrast(1.1) brightness(0.9);
    transition: filter 0.3s ease;
}
.galeria figure:hover img { filter: saturate(1.04) contrast(1.06) brightness(1); }

.galeria figcaption {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--fuente-tecnica);
    font-weight: 400;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 0.8rem;
    color: var(--acero);
}
.galeria figcaption::before {
    content: "";
    flex: none;
    width: 0.55em;
    height: 0.95em;
    background: var(--icono-rayo) center / contain no-repeat;
}

.galeria__nota {
    margin-top: 2.5rem;
    font-weight: 600;
    border-left: 4px solid var(--brasa);
    padding-left: 1rem;
}

/* ----------------------- Dónde estamos ----------------------- */

.donde {
    display: grid;
    grid-template-columns: minmax(290px, 2fr) 3fr;
    gap: 2.5rem;
    align-items: stretch;
}

.donde__datos h3 {
    font-family: var(--fuente-tecnica);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--rojo-vivo);
    margin: 1.9rem 0 0.5rem;
}
.donde__datos h3:first-child { margin-top: 0; }

.donde__datos .boton { margin-top: 2rem; }

.horario {
    border-collapse: collapse;
    width: 100%;
}
.horario td {
    padding: 0.4rem 0;
    vertical-align: top;
    border-bottom: 1px solid var(--linea);
}
.horario tr:last-child td { border-bottom: 0; }
.horario--cerrado td { color: var(--acero); }

.donde__datos .estado { margin-bottom: 0.9rem; }
.horario td:first-child {
    font-weight: 600;
    padding-right: 1.5rem;
    white-space: nowrap;
}
.horario td:last-child {
    text-align: right;
    font-family: var(--fuente-tecnica);
    letter-spacing: 0.05em;
    color: var(--acero-claro);
}

.enlace {
    color: var(--hueso);
    text-decoration-color: var(--rojo);
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}
.enlace:hover { color: var(--brasa); }

.donde__mapa {
    position: relative;
    padding: 5px;
    background: linear-gradient(150deg, #A9B2BB 0%, #33383E 40%, #6E767F 62%, #1E2126 100%);
    min-height: 430px;
}

/* Chincheta propia, en rojo de marca. El recuadro del mapa está centrado
   en las coordenadas, así que el centro del iframe es el punto exacto.
   Va fuera del iframe para que no le afecte el filtro de inversión. */
.donde__mapa::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 40px;
    transform: translate(-50%, -100%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath fill='%23D81E24' stroke='%23F2F6FA' stroke-width='1.6' d='M12 1.2C6.6 1.2 2.2 5.6 2.2 11c0 7.4 9.8 19.6 9.8 19.6S21.8 18.4 21.8 11c0-5.4-4.4-9.8-9.8-9.8z'/%3E%3Ccircle cx='12' cy='11' r='3.5' fill='%23F2F6FA'/%3E%3C/svg%3E") center / contain no-repeat;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
    pointer-events: none;
}
.donde__mapa iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
    /* OpenStreetMap sirve el mapa en claro. Lo pasamos a oscuro con
       invert + hue-rotate: el giro de tono devuelve los colores a su
       sitio (si no, el verde de los parques saldría morado). */
    filter: invert(0.92) hue-rotate(180deg) saturate(0.7) contrast(0.9) brightness(1.05);
}

.donde__zonas {
    font-size: 0.92rem;
    color: var(--acero);
    line-height: 1.7;
}

/* ----------------------- Fichas de servicio y avería ----------------------- */

/* El fondo va a todo lo ancho; el contenido, encajado como el resto */
.ficha {
    position: relative;
    padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem clamp(3rem, 6vw, 4.5rem);
    background:
        radial-gradient(55% 60% at 12% 0%, rgba(216, 30, 36, 0.22), transparent 70%),
        radial-gradient(60% 60% at 90% 100%, rgba(255, 106, 24, 0.14), transparent 72%),
        linear-gradient(160deg, #16171C 0%, #0A0A0C 60%, #140B09 100%);
    border-bottom: 1px solid var(--linea);
}

.ficha__interior {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
    max-width: 1180px;
    margin: 0 auto;
}

/* Miga de pan */
.miga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    font-family: var(--fuente-tecnica);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acero);
    margin-bottom: 1.4rem;
}
.miga a {
    color: var(--acero-claro);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.miga a:hover { color: #fff; border-bottom-color: var(--rojo); }
.miga span[aria-hidden] { color: var(--rojo); }
.miga [aria-current] { color: var(--hueso); }

.ficha__titulo {
    font-family: var(--fuente-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 4.6vw, 3.1rem);
    line-height: 1.03;
    text-transform: uppercase;
    text-wrap: balance;
    margin-bottom: 1.1rem;
    background: var(--cromo-degradado);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.6));
}

.ficha__entradilla {
    font-size: clamp(1.02rem, 1.9vw, 1.18rem);
    color: rgba(233, 230, 225, 0.85);
    max-width: 52ch;
    text-wrap: pretty;
}

.ficha__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.8rem;
}

.ficha__aviso {
    display: flex;
    align-items: center;
    gap: 0.6em;
    margin-top: 1.5rem;
    font-family: var(--fuente-tecnica);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--acero);
}
.ficha__aviso svg { width: 15px; height: 15px; flex: none; color: var(--rojo-vivo); }

.ficha__foto {
    align-self: stretch;
    min-height: 300px;
    padding: 5px;
    background: linear-gradient(150deg, #A9B2BB 0%, #33383E 40%, #6E767F 62%, #1E2126 100%);
}
.ficha__foto picture { width: 100%; height: 100%; }
.ficha__foto img {
    width: 100%;
    height: 100%;
    min-height: 290px;
    object-fit: cover;
    object-position: center var(--enfoque, 45%);
    filter: saturate(0.92) contrast(1.1) brightness(0.85);
}

.ficha__perdido p { max-width: 58ch; margin-bottom: 2rem; }

/* Pasos numerados */
.pasos {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem 2.5rem;
    counter-reset: paso;
}

.paso {
    display: flex;
    gap: 1.1rem;
    padding: 1.4rem 1.5rem;
    background: linear-gradient(180deg, var(--carbon-alto), #0B0C0F);
    box-shadow: inset 0 0 0 1px var(--linea);
}

.paso__numero {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    font-family: var(--fuente-display);
    font-size: 1.15rem;
    color: #fff;
    background: linear-gradient(180deg, var(--rojo-vivo), var(--rojo-hondo));
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.paso h3 {
    font-family: var(--fuente-tecnica);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cromo);
    margin-bottom: 0.35rem;
}
.paso p {
    font-size: 0.96rem;
    color: rgba(233, 230, 225, 0.72);
}

/* Texto largo */
.seccion--pegada { padding-top: 0; }

/* Ojo: .texto va en el mismo elemento que .contenido, que ya está
   centrado a 1180px. La medida de lectura se limita en los bloques,
   no aquí, o el texto quedaría centrado y desalineado del resto. */
.texto__bloque { max-width: 62ch; }
.texto__bloque + .texto__bloque { margin-top: 2.4rem; }
.texto__bloque h2 {
    font-family: var(--fuente-tecnica);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    color: var(--cromo);
    margin-bottom: 0.6rem;
}
.texto__bloque p {
    color: rgba(233, 230, 225, 0.78);
    text-wrap: pretty;
}
.texto__bloque b { color: var(--hueso); }

/* Preguntas frecuentes */
.faq { max-width: 68ch; }

.faq__item {
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.faq__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.13); }

.faq__item summary {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.1rem 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--fuente-tecnica);
    font-weight: 500;
    font-size: 1.04rem;
    color: var(--hueso);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before {
    content: "+";
    flex: none;
    width: 1.2em;
    font-size: 1.3em;
    line-height: 1;
    color: var(--rojo-vivo);
    transition: transform 0.2s ease;
}
.faq__item[open] summary::before { content: "\2212"; }
.faq__item summary:hover { color: #fff; }

.faq__item p {
    padding: 0 0 1.3rem 2.1rem;
    color: rgba(233, 230, 225, 0.75);
    max-width: 60ch;
}

/* Enlaces a otras fichas */
.relacionados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.relacionado {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(180deg, var(--carbon-alto), #0B0C0F);
    box-shadow: inset 0 0 0 1px var(--linea);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.relacionado:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px rgba(216, 30, 36, 0.5);
}

.relacionado__icono {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--rojo-vivo);
    background: rgba(216, 30, 36, 0.10);
    box-shadow: inset 0 0 0 1px rgba(216, 30, 36, 0.35);
}
.relacionado__icono svg { width: 21px; height: 21px; }

.relacionado__texto {
    font-family: var(--fuente-tecnica);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--acero);
}
.relacionado__texto b {
    display: block;
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--cromo);
}

/* ----------------------- Páginas legales ----------------------- */

.legal__cuerpo {
    max-width: 68ch;
    color: rgba(233, 230, 225, 0.82);
}
.legal__cuerpo h2 {
    font-family: var(--fuente-tecnica);
    font-weight: 600;
    font-size: 1.08rem;
    letter-spacing: 0.04em;
    color: var(--cromo);
    margin: 2.2rem 0 0.6rem;
}
.legal__cuerpo h2:first-child { margin-top: 0; }
.legal__cuerpo p { margin-bottom: 0.9rem; text-wrap: pretty; }
.legal__cuerpo ul {
    list-style: none;
    margin-bottom: 1.1rem;
}
.legal__cuerpo li {
    position: relative;
    padding-left: 1.3rem;
    margin-bottom: 0.4rem;
}
.legal__cuerpo li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 6px;
    height: 6px;
    background: var(--rojo);
}
.legal__cuerpo b { color: var(--hueso); }
.legal__cuerpo code {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.9em;
    color: var(--brasa);
}

.legal__aviso {
    max-width: 68ch;
    margin-bottom: 2rem;
    padding: 1rem 1.2rem;
    background: rgba(216, 30, 36, 0.12);
    border-left: 4px solid var(--rojo);
    color: var(--hueso);
}

.legal__nota {
    margin-top: 2.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--linea);
    font-size: 0.92rem;
    color: var(--acero);
}

/* ----------------------- Formulario de presupuesto ----------------------- */

.formulario__entrada {
    max-width: 58ch;
    margin-bottom: 2.2rem;
    color: rgba(233, 230, 225, 0.8);
    text-wrap: pretty;
}

.formulario__error {
    max-width: 58ch;
    margin-bottom: 1.6rem;
    padding: 0.9rem 1.1rem;
    background: rgba(216, 30, 36, 0.14);
    border-left: 4px solid var(--rojo);
    font-weight: 600;
}

.formulario__campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem 1.6rem;
    max-width: 720px;
}
.campo--ancho { grid-column: 1 / -1; }

.campo { display: flex; flex-direction: column; gap: 0.4rem; }

.campo label {
    font-family: var(--fuente-tecnica);
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acero-claro);
}
.campo label span[aria-hidden] { color: var(--rojo-vivo); }
.campo__opcional {
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--acero);
}

.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo textarea {
    font-family: var(--fuente-texto);
    font-size: 1rem;
    color: var(--hueso);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--linea-fuerte);
    padding: 0.75em 0.9em;
    width: 100%;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}
.campo textarea { resize: vertical; min-height: 8em; line-height: 1.6; }

.campo input::placeholder,
.campo textarea::placeholder { color: rgba(142, 151, 161, 0.7); }

.campo input:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--rojo);
    background: rgba(255, 255, 255, 0.07);
}
.campo input:focus-visible,
.campo textarea:focus-visible { outline: 3px solid var(--brasa); outline-offset: 2px; }

.campo [aria-invalid="true"] { border-color: var(--rojo-vivo); }

.campo__error {
    font-size: 0.88rem;
    color: #FF8A80;
}

.campo--casilla {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.campo--casilla input { flex: none; width: 20px; height: 20px; margin-top: 0.15rem; accent-color: var(--rojo); }
.campo--casilla label {
    flex: 1;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--fuente-texto);
    font-size: 0.95rem;
    font-weight: 400;
    color: rgba(233, 230, 225, 0.8);
}
.campo--casilla .campo__error { flex-basis: 100%; }

/* Campo trampa para robots: invisible pero no display:none, que algunos
   lo detectan. Fuera de pantalla y sin ocupar sitio. */
.trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.formulario__alternativa {
    margin-top: 2rem;
    color: var(--acero);
}

.formulario__hecho { max-width: 58ch; }
.formulario__hecho p { margin-bottom: 1rem; color: rgba(233, 230, 225, 0.85); }
.formulario__hecho .ficha__acciones { margin-top: 1.6rem; }

/* ----------------------- Portal del cliente ----------------------- */

.portal__saludo {
    font-family: var(--fuente-display);
    font-weight: 400;
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 1.6rem;
    background: var(--cromo-degradado);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.portal__destacado {
    padding: 1.4rem 1.5rem;
    margin-bottom: 1.6rem;
    background: linear-gradient(180deg, var(--carbon-alto), #0B0C0F);
    box-shadow: inset 0 0 0 1px var(--linea);
    border-left: 4px solid var(--acero);
}
.portal__destacado--ok      { border-left-color: #4ADE80; }
.portal__destacado--pronto  { border-left-color: var(--brasa); }
.portal__destacado--vencido { border-left-color: var(--rojo-vivo); }

.portal__etiqueta {
    font-family: var(--fuente-tecnica);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--acero);
}
.portal__fecha {
    font-family: var(--fuente-display);
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.1;
    color: var(--cromo);
}
.portal__plazo { color: rgba(233, 230, 225, 0.8); }

.portal__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 0.6rem;
}

.portal__titulo {
    font-family: var(--fuente-tecnica);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--acero);
    margin: 2.6rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--linea);
}

.portal__vehiculos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}
.portal__vehiculo {
    padding: 1.1rem 1.2rem;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px var(--linea);
}
.portal__vehiculo h3 {
    font-family: var(--fuente-tecnica);
    font-weight: 600;
    font-size: 1rem;
    color: var(--cromo);
}
.portal__modelo { color: var(--acero); font-size: 0.9rem; }
.portal__estado { margin-top: 0.6rem; font-size: 0.92rem; }

.portal .estado-ok      { color: #6BE38A; }
.portal .estado-pronto  { color: var(--brasa); }
.portal .estado-vencido { color: #FF8A80; }
.portal .estado-neutro  { color: var(--acero); }

.portal__historial { list-style: none; }
.portal__historial li {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--linea);
}
.portal__historial li:last-child { border-bottom: 0; }
.portal__fecha-h {
    display: inline-block;
    min-width: 6.5em;
    font-family: var(--fuente-tecnica);
    color: var(--acero);
    font-size: 0.88rem;
}
.portal__detalle {
    display: block;
    margin-top: 0.2rem;
    padding-left: 6.5em;
    color: rgba(233, 230, 225, 0.7);
    font-size: 0.93rem;
}

.portal__pie {
    margin-top: 3rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--linea);
    font-size: 0.88rem;
    color: var(--acero);
    max-width: 52ch;
}

@media (max-width: 560px) {
    .portal__fecha-h { min-width: 0; display: block; }
    .portal__detalle { padding-left: 0; }
}

/* ----------------------- Remate (llamada final) ----------------------- */

/* El flyer del negocio, desenfocado y apagado, hace de telón de fondo */
.remate {
    text-align: center;
    background: #0A0A0C;
}
.remate::before {
    content: "";
    position: absolute;
    inset: -24px;
    /* Va desenfocado y al 42% de brillo: con 1100px sobra.
       La primera regla es el respaldo para quien no entienda image-set(). */
    background: url("flyer.jpg") center 62% / cover no-repeat;
    background-image: image-set(
        url("img/webp/flyer-1100.webp") type("image/webp"),
        url("flyer.jpg") type("image/jpeg"));
    filter: blur(4px) saturate(0.95) brightness(0.42);
    pointer-events: none;
    z-index: 0;
}
/* Velo de brasa y grano por encima, para que el texto se lea */
.remate::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(72% 82% at 50% 48%, rgba(122, 11, 16, 0.40) 0%, rgba(8, 8, 10, 0.82) 72%),
        linear-gradient(180deg, rgba(8, 8, 10, 0.95) 0%, rgba(8, 8, 10, 0.30) 35%, rgba(8, 8, 10, 0.30) 65%, rgba(8, 8, 10, 0.95) 100%);
    pointer-events: none;
    z-index: 0;
}

.remate__titulo {
    font-family: var(--fuente-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 7vw, 5rem);
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    background: var(--cromo-degradado);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.6));
}

.remate__texto {
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2.2rem;
}

.remate__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
}

/* ----------------------- Pie ----------------------- */

.pie {
    background: var(--negro);
    color: var(--acero-claro);
    text-align: center;
    padding: 3.2rem 1.5rem 3.5rem;
    font-size: 0.95rem;
    border-top: 1px solid var(--linea);
}

.pie__marca {
    width: min(230px, 62vw);
    margin: 0 auto 1.4rem;
}

/* Mapa de fichas en el pie: enlaza todo con todo */
.pie__mapa {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.4rem;
    max-width: 900px;
    margin: 0 auto 1.8rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--linea);
}
.pie__mapa a {
    font-family: var(--fuente-tecnica);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--acero);
    text-decoration: none;
    transition: color 0.2s ease;
}
.pie__mapa a:hover { color: var(--brasa); }

.pie__legal {
    margin-top: 1.2rem;
    font-size: 0.88rem;
    color: var(--acero);
}

.pie p { margin-bottom: 0.4rem; }

.pie__anyo {
    margin-top: 1rem;
    color: var(--acero);   /* sin opacidad: a 0.84rem hay que mantener el contraste */
    font-size: 0.84rem;
}

/* ----------------------- Botón flotante de WhatsApp ----------------------- */

.flotante {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 50;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #25D366;
    background: linear-gradient(180deg, #1B1E23, #0B0C0E);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--linea-fuerte), 0 6px 20px rgba(0, 0, 0, 0.6);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.flotante:hover {
    transform: scale(1.08);
    box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.6), 0 8px 26px rgba(0, 0, 0, 0.7);
}
.flotante svg { width: 30px; height: 30px; }

/* ----------------------- Aparición al hacer scroll ----------------------- */

.js .revela {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.js .revela.visible {
    opacity: 1;
    transform: none;
}

/* ----------------------- Movimiento reducido ----------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .revela-carga { animation: none; opacity: 1; }
    .marca__rayo { animation: none; filter: none; opacity: 0; }
    .cinta__pista { animation: none; }

    /* El cartel se queda quieto: sin barridos, sin destellos, sin deriva */
    .estado--abierto .estado__punto { animation: none; }
    .cartel__destello,
    .marca__brillo,
    .cartel__filete::after,
    .cartel__foto::before { display: none; }
    .cartel__titulo { animation: none; opacity: 1; transform: none; filter: none; }
    .cartel__foto img { animation: none; transform: scale(1.02); }
    .js .revela { opacity: 1; transform: none; transition: none; }
    .boton, .servicio, .servicio__media img, .flotante,
    .galeria__marco, .galeria img { transition: none; }
}

/* ----------------------- Tableta y móvil ----------------------- */

@media (max-width: 1040px) {
    .tira__lista { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1.2rem; }
    .tira__item:nth-child(odd) { border-left: 0; padding-left: 0; }
}

@media (max-width: 980px) {
    .cartel { grid-template-columns: 1fr; }
    .cartel__foto { min-height: 46vh; order: 2; }
    /* En apaisado se recorta por arriba y por abajo: subimos el encuadre
       para no perder la cabeza del toro ni el casco del rider */
    .cartel__foto img { object-position: 50% 38%; }
    .cartel__foto::after {
        background:
            linear-gradient(180deg, var(--negro) 0%, rgba(8, 8, 10, 0.4) 25%, transparent 60%),
            linear-gradient(0deg, rgba(122, 11, 16, 0.35), transparent 60%);
    }
}

@media (max-width: 900px) {
    .barra { gap: 0.7rem; padding: 0.5rem 1rem; }
    .barra__logo { width: 132px; }

    /* El teléfono se queda a mano; el menú pasa al extremo */
    .barra__menu { display: block; margin-left: 0; order: 3; }
    .barra__tel {
        margin-left: auto;
        order: 2;
        font-size: 0.8rem;
        padding: 0.6em 0.9em;
    }

    /* El menú se despliega bajo la barra */
    .barra__enlaces {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        margin: 0;
        flex-direction: column;
        gap: 0;
        background: #0A0B0E;
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.6);
        border-bottom: 2px solid var(--rojo);
        display: none;
    }
    .barra--abierta .barra__enlaces { display: flex; }
    .barra__enlaces a {
        padding: 1rem 1.5rem;
        border-top: 1px solid var(--linea);
        font-size: 0.95rem;
    }
    .barra__enlaces a::after { display: none; }

    .servicios { grid-template-columns: 1fr; }
    .pasos { grid-template-columns: 1fr; }
    .ficha { padding-top: 2rem; }
    .ficha__interior { grid-template-columns: 1fr; }
    .ficha__foto { order: -1; min-height: 240px; }
    .ficha__foto img { min-height: 230px; max-height: 46vh; }
    .galeria { grid-template-columns: 1fr; }
    /* Las fotos son verticales: 4:5 recorta poco y no deja fotos enormes */
    .galeria img { aspect-ratio: 4 / 5; }
    .donde { grid-template-columns: 1fr; }
    .donde__mapa { min-height: 330px; }
    .donde__mapa iframe { min-height: 320px; }
}

@media (max-width: 640px) {
    .cartel__contenido { padding: 3rem 1.2rem; gap: 0.9rem; }
    .cartel__marco { inset: 10px; }
    .cartel__plaza { letter-spacing: 0.26em; font-size: 0.7rem; }
    .cartel__lema { letter-spacing: 0.16em; }
    .tira__lista { grid-template-columns: 1fr; }
    .tira__item { border-left: 0; padding-left: 0; }
    .parte { grid-template-columns: 1fr; }
    .formulario__campos { grid-template-columns: 1fr; }
    .boton { width: 100%; text-align: center; }
    .cartel__acciones, .remate__acciones { width: 100%; }
    .remate__acciones .boton { width: 100%; }
}