/* HM Motors Performance · demo v3 (solo imágenes, cero video; primero el auto, después el texto)
   Lectura: taller de autos europeos con el tono editorial de un restaurador (primeros planos, frases cortas)
   y la lógica de una vuelta a la pista (sectores, telemetría, pits). Dial ENERGY 3 / RHYTHM 3 / MOTION 3.
   Color: negro y grafito del logo y de las fotos nocturnas; rojo solo en acciones, barra de vuelta y telemetría.
   Tipografía: Archivo ancha (como las letras de un emblema de auto) + Instrument Serif itálica para la palabra clave. */
:root {
  --negro: #0B0B0D;
  --grafito: #15161A;
  --grafito-2: #1E2026;
  --linea: #2E3138;
  --plata: #C3C7CF;
  --plata-suave: #9DA2AC;
  --blanco: #F3F1EC;
  --papel: #EFEAE1;
  --tinta: #17171A;
  --tinta-suave: #55534F;
  --rojo: #D62F35;
  --rojo-texto: #EE5A5E;
  --rojo-papel: #B4232B;
  --gris-1: #24262C; --gris-2: #34373F; --gris-3: #3A3D45; --gris-4: #4A4E57; --gris-5: #8E939D; --cerrado: #1B1C20; --rojo-hover: #2A1B1E; --papel-linea: #A8A196;
  --radio: 4px;
  --ancha: "Archivo", "Arial", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --borde: clamp(1rem, 4vw, 3rem);
  --max: 1320px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  /* v3: degradés con propósito */
  --luz-estudio: radial-gradient(ellipse 60% 50% at 50% 38%, rgba(195, 199, 207, .16), transparent 70%); /* profundidad: el auto bajo luz de showroom */
  --degrade-foto: linear-gradient(to top, rgba(11, 11, 13, .86) 0%, rgba(11, 11, 13, .45) 45%, transparent 100%); /* legibilidad de leyendas sobre foto */
  --plata-grad: linear-gradient(100deg, #8B909A, #F3F1EC 45%, #C3C7CF);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--negro); color: var(--blanco);
  font: 400 1.05rem/1.6 var(--ancha); font-stretch: 100%;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--ancha); font-stretch: 125%; font-weight: 700; line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
h2 .nb, h3 .nb { white-space: nowrap; }
h1 em, h2 em, h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: 0; color: var(--plata); }

:focus-visible { outline: 3px solid var(--rojo-texto); outline-offset: 3px; border-radius: 2px; }
.orden :focus-visible { outline-color: var(--rojo-papel); }
.saltar { position: absolute; left: 1rem; top: -60px; z-index: 100; background: var(--blanco); color: var(--tinta); padding: .6rem 1rem; border-radius: var(--radio); font-weight: 700; }
.saltar:focus { top: 1rem; }

/* demo */
.marca-agua {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='270'%3E%3Ctext x='220' y='145' fill='%23D62F35' fill-opacity='0.09' font-family='Arial, sans-serif' font-weight='800' font-size='36' text-anchor='middle' transform='rotate(-24 220 135)'%3EDEMO GRATUITA%3C/text%3E%3C/svg%3E");
}
.aviso-demo { background: var(--rojo); color: #fff; text-align: center; font-size: .85rem; font-weight: 600; padding: .45rem 1rem; text-wrap: balance; }

/* barra */
.barra {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem max(var(--borde), calc((100% - var(--max)) / 2 + var(--borde)));
  background: rgba(11, 11, 13, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); /* único vidrio: la barra pasa sobre las fotos */
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.barra-logo { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; flex: 0 1 auto; min-width: 0; }
.barra-logo img { height: 26px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.barra-cta { min-height: 44px; padding: .5rem 1rem; font-size: .95rem; white-space: nowrap; }
.menu-boton {
  min-height: 44px; padding: 0 .9rem; border-radius: var(--radio);
  background: transparent; color: var(--blanco); border: 1px solid var(--linea); font: 600 .95rem var(--ancha); cursor: pointer;
}
.menu {
  position: absolute; left: 0; right: 0; top: 100%;
  display: none; flex-direction: column; padding: .5rem var(--borde) 1rem;
  background: var(--negro); border-bottom: 1px solid var(--linea);
}
.menu.abierto { display: flex; }
.menu a { min-height: 48px; display: flex; align-items: center; text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--grafito-2); }
.menu a:hover { color: var(--rojo-texto); }
.menu .menu-wsp { color: var(--rojo-texto); border: 0; }
@media (min-width: 980px) {
  .barra { gap: 1.4rem; }
  .barra-logo img { height: 30px; }
  .menu-boton { display: none; }
  .menu { position: static; display: flex; flex-direction: row; align-items: center; gap: 1.6rem; padding: 0; border: 0; background: none; margin-left: auto; }
  .menu a { min-height: 44px; border: 0; font-size: .95rem; position: relative; }
  .menu a:not(.menu-wsp)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 8px; height: 2px; background: var(--rojo); transition: right .35s var(--ease); }
  .menu a:not(.menu-wsp):hover::after { right: 0; }
  .menu .menu-wsp { color: var(--plata); padding-left: .4rem; }
  .menu .menu-wsp:hover { color: var(--blanco); }
  .barra-logo { margin-right: 0; }
}
@media (max-width: 430px) {
  .barra-logo img { height: 22px; }
}
@media (max-width: 379px) {
  .barra { gap: .3rem; padding-inline: .6rem; }
  .barra-logo img { height: 17px; }
  .barra-cta { padding: .5rem .4rem; font-size: .82rem; }
  .menu-boton { padding: 0 .4rem; font-size: .82rem; }
}
.vuelta { position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; pointer-events: none; }
.vuelta-barra { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--avance, 0)); background: linear-gradient(90deg, var(--rojo), var(--blanco)); }

/* botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .75rem 1.4rem;
  border-radius: var(--radio); font: 600 1rem/1.2 var(--ancha); text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .2s, border-color .2s, transform .2s var(--ease);
}
.boton:hover { transform: translateY(-1px); }
.boton-rojo { background: var(--rojo); color: #fff; }
.boton-rojo:hover { background: var(--rojo-papel); }
.boton-vidrio { color: var(--blanco); border-color: rgba(243, 241, 236, .5); background: transparent; }
.boton-vidrio:hover { border-color: var(--blanco); }
.boton[disabled] { opacity: .6; cursor: progress; transform: none; }

/* etiqueta de sector (con una franja de piano de pista) */
.sector { display: inline-flex; align-items: center; gap: .6rem; color: var(--plata-suave); font-size: .92rem; margin-bottom: 1.1rem; }
.sector::before { content: ""; width: 34px; height: 8px; background: repeating-linear-gradient(90deg, var(--rojo) 0 8.5px, var(--blanco) 8.5px 17px); }
.sector b { color: var(--blanco); font-weight: 700; }

/* 1. portada: fotos arriba (tríptico asimétrico), texto debajo sobre negro */
.portada { position: relative; min-height: calc(100svh - var(--cabeza, 101px)); display: grid; grid-template-rows: minmax(44svh, 1fr) auto; isolation: isolate; } /* aviso + barra + portada = 100svh: las fotos y los botones caben en la primera pantalla */
.triptico { position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; min-height: 0; }
.triptico::before { /* luz de estudio: el auto se ve bajo un foco de showroom */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--luz-estudio);
}
.triptico::after { /* degradé a negro abajo: las fotos se funden con el texto y este se lee limpio */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, var(--negro) 2%, transparent);
}
.panel { position: relative; overflow: hidden; min-height: 0; }
.panel img, .panel picture { position: absolute; inset: 0; width: 100%; height: 100%; } /* absolutas: la altura de las fotos la manda la portada, no la foto */
.panel img { object-fit: cover; }
.panel-l, .panel-r { display: none; }
.panel-c img { object-position: 50% 62%; }
@media (min-width: 900px) {
  .triptico { grid-template-columns: 1fr 2fr 1fr; gap: 6px; }
  .panel-l, .panel-r { display: block; }
  .panel-l { margin-top: 2%; }
  .panel-r { margin-bottom: 3%; }
  .panel-l img { object-position: 50% 70%; }
  .panel-r img { object-position: 50% 65%; }
}
.portada-texto { position: relative; width: 100%; max-width: var(--max); margin: 0 auto; padding: clamp(1.2rem, 2.4vw, 1.8rem) var(--borde) clamp(1.6rem, 3vw, 2.4rem); }
.portada-texto::before { /* único rojo decorativo: filete entre las fotos y el texto */
  content: ""; position: absolute; left: var(--borde); right: var(--borde); top: 0; height: 1px; background: linear-gradient(90deg, var(--rojo), transparent 70%);
}
.antetitulo {
  display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .9rem; margin-bottom: .8rem;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(21, 22, 26, .9);
  color: rgba(255, 255, 255, .85); font-size: .85rem; line-height: 1.3;
}
.antetitulo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rojo); flex: none; }
.portada h1 { font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: 1; text-transform: uppercase; }
.portada h1 .linea { display: block; overflow: hidden; padding: .1em 0 .14em; margin: -.1em 0 -.14em; }
.portada h1 .linea-i { display: block; }
.portada h1 em {
  text-transform: none; font-size: 1.18em; line-height: .8; color: var(--blanco); /* respaldo si no hay background-clip */
  background: var(--plata-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-right: .08em; /* la cursiva sobresale a la derecha: que el degradé no la corte */
}
.portada-fila { margin-top: 1.1rem; display: grid; gap: 1.3rem; }
.bajada { max-width: 36rem; color: var(--plata); font-size: 1.05rem; line-height: 1.5; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.acciones .boton { min-height: 48px; }
@media (min-width: 900px) {
  .portada-fila { grid-template-columns: minmax(0, 36rem) auto; justify-content: space-between; align-items: end; }
  .acciones { flex-wrap: nowrap; }
}
@media (max-width: 599px) {
  .portada { grid-template-rows: minmax(52svh, 1fr) auto; }
  .panel-c img { object-position: 62% 62%; }
  .portada h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); text-wrap: balance; overflow-wrap: normal; }
  .portada h1 em { display: block; margin-top: .05em; }
  .acciones { flex-direction: column; }
  .acciones .boton { width: 100%; }
  .bajada { font-size: 1rem; }
}

/* 2. marcas: texto real, sin logos */
.marcas-franja { border-block: 1px solid var(--linea); padding: clamp(1.4rem, 3.6vw, 2.6rem) var(--borde); }
.marcas { list-style: none; margin: 0 auto; padding: 0; max-width: var(--max); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .2rem 0; font: italic 400 clamp(1.6rem, 4vw, 3.4rem)/1.2 var(--serif); opacity: .85; text-align: center; }
.marcas li { display: inline-flex; align-items: center; }
.marcas li + li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--plata); margin: 0 clamp(.7rem, 2.2vw, 1.8rem); opacity: .8; }

@media (max-width: 599px) {
  .marcas { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: .3rem 1rem; }
  .marcas li + li::before { display: none; }
}

/* 3. el oficio */
.oficio { max-width: var(--max); margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) var(--borde) clamp(2.5rem, 6vw, 4.5rem); }
.oficio-intro { margin-bottom: clamp(1.2rem, 3vw, 2rem); }
.oficio-intro .sector { font-size: .85rem; margin-bottom: .9rem; }
.oficio-intro h2 { font-size: clamp(1.9rem, 4.2vw, 3.4rem); max-width: 26ch; font-stretch: 112%; font-weight: 600; line-height: 1.08; }
.iris { margin: 0; }
.iris-marco { overflow: hidden; border-radius: var(--radio); }
.iris-marco img { width: 100%; height: auto; aspect-ratio: 3 / 2; max-height: 78svh; object-fit: cover; border-radius: var(--radio); }
.iris figcaption, .oficio-par figcaption { margin-top: .8rem; font: italic 400 clamp(1.15rem, 2vw, 1.5rem)/1.25 var(--serif); color: var(--plata); }
.oficio-par { display: grid; grid-template-columns: 1fr; gap: 1.6rem; margin-top: clamp(1.6rem, 4vw, 3rem); }
.oficio-par figure { margin: 0; }
.par-marco { overflow: hidden; border-radius: var(--radio); }
.par-marco img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 560px) {
  .oficio-par { grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2.4rem); }
  .oficio-par figure:nth-child(2) { margin-top: clamp(1.5rem, 6vw, 5rem); }
}
.divisor { margin-top: clamp(2.5rem, 6vw, 4.5rem); height: 1px; background: var(--linea); position: relative; }
.divisor-traza { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--rojo) 25%, var(--blanco)); transform-origin: left; transform: scaleX(var(--traza, 1)); }

/* cabeceras de sección */
.cabeza { max-width: var(--max); margin: 0 auto 2.2rem; padding: 0 var(--borde); }
.cabeza h2 { font-size: clamp(2rem, 5vw, 4rem); max-width: 20ch; }
.cabeza-bajada { margin-top: 1rem; color: var(--plata); }

/* 4. servicios: lista numerada + una foto grande a la vez */
.servicios { padding: clamp(3rem, 8vw, 6rem) 0; background: radial-gradient(80% 60% at 85% 0%, var(--grafito-2), transparent 70%); }
.servicios-cuerpo { max-width: var(--max); margin: 0 auto; padding: 0 var(--borde); display: grid; gap: 0; }
.lista-servicios { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.servicio {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .2rem 1rem; align-items: start;
  padding: 1.5rem 0; border-bottom: 1px solid var(--linea); position: relative;
}
.servicio .num { font: 600 .95rem var(--ancha); font-variant-numeric: tabular-nums; color: var(--rojo-texto); padding-top: .2rem; grid-column: 1; grid-row: 2; }
.servicio-foto { grid-column: 1 / -1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: var(--pos, center); border-radius: var(--radio); margin-bottom: .9rem; }
.servicio-cuerpo { grid-column: 2; grid-row: 2; min-width: 0; }
.servicio h3 { font-size: clamp(1.4rem, 2.4vw, 2.2rem); font-weight: 600; font-stretch: 118%; position: relative; padding-bottom: .55rem; overflow-wrap: anywhere; }
.servicio h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.2rem; height: 2px; background: var(--rojo); transform-origin: left; transform: scaleX(1); }
.servicio p { margin-top: .6rem; color: var(--plata); max-width: 44rem; }
.enlace { display: inline-flex; align-items: center; min-height: 44px; margin-top: .3rem; color: var(--rojo-texto); font-weight: 600; text-underline-offset: 5px; }
.servicios-visor { display: none; }
@media (min-width: 900px) {
  .servicios-cuerpo { grid-template-columns: minmax(0, 1fr) clamp(340px, 40%, 520px); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .servicio { grid-template-columns: 3.4rem minmax(0, 1fr); padding: 2rem 0; }
  .servicio .num { grid-row: 1; padding-top: .55rem; }
  .servicio-cuerpo { grid-row: 1; }
  .servicio-foto { display: none; }
  .servicio h3::after { transform: scaleX(0); }
  .servicio.activo h3::after, .servicio:hover h3::after, .servicio:focus-within h3::after { transform: scaleX(1); }
  .servicios-visor { display: block; position: sticky; top: 96px; }
  .visor-marco { position: relative; aspect-ratio: 4 / 5; max-height: calc(100svh - 130px); width: 100%; margin-left: auto; border-radius: var(--radio); overflow: hidden; background: var(--grafito); }
  .visor-marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(1) brightness(.8); }
  .visor-marco img.activa { opacity: 1; filter: none; }
}

/* 7. trabajos recientes: mosaico asimétrico de 5 fotos */
.trabajos { padding: clamp(3rem, 8vw, 6rem) 0; border-block: 1px solid var(--linea); background: linear-gradient(180deg, var(--negro), var(--grafito) 60%, var(--negro)); }
.mosaico-marco { position: relative; max-width: var(--max); margin: 0 auto; }
.mosaico { display: grid; grid-auto-flow: column; grid-auto-columns: 76vw; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 var(--borde) 1rem; scroll-padding-inline: var(--borde); scrollbar-color: var(--linea) transparent; }
.mosaico-marco::after { /* degradé lateral: indica que se desliza */
  content: ""; position: absolute; top: 0; right: 0; bottom: 1rem; width: 12%; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--grafito) 90%);
}
.trab { margin: 0; position: relative; overflow: hidden; border-radius: var(--radio); aspect-ratio: 4 / 5; scroll-snap-align: start; background: var(--grafito-2); }
.trab img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); transition: transform .7s var(--ease); }
.trab::after { /* degradé inferior: la leyenda siempre se lee; al pasar el mouse se intensifica */
  content: ""; position: absolute; inset: 40% 0 0; background: var(--degrade-foto); opacity: .75; transition: opacity .5s var(--ease); pointer-events: none;
}
.trab figcaption { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; z-index: 1; display: grid; gap: .1rem; transition: transform .5s var(--ease); }
.trab figcaption b { font: 700 1.05rem/1.2 var(--ancha); font-stretch: 112%; color: var(--blanco); }
.trab figcaption span { font-size: .9rem; color: #D5D8DE; }
.t2, .t4 { --n: 1; } .t5 { --n: 2; }
.trab:hover img, .trab:focus-within img { transform: scale(1.04); }
.trab:hover::after, .trab:focus-within::after { opacity: 1; }
.trab:hover figcaption, .trab:focus-within figcaption { transform: translateY(-8px); }
.trabajos-pie { max-width: var(--max); margin: .4rem auto 0; padding: 0 var(--borde); font-size: .85rem; color: var(--plata-suave); }
@media (min-width: 900px) {
  .mosaico-marco::after { display: none; }
  .mosaico { display: grid; grid-auto-flow: row; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-columns: auto; gap: clamp(.6rem, 1.4vw, 1.1rem); overflow: visible; scroll-snap-type: none; padding: 0 var(--borde); }
  .trab { aspect-ratio: auto; }
  .t1 { grid-column: span 7; height: clamp(300px, 34vw, 500px); }
  .t2 { grid-column: span 5; height: clamp(300px, 34vw, 500px); }
  .t3, .t4, .t5 { grid-column: span 4; height: clamp(320px, 33vw, 500px); }
}

/* 5. agenda */
.agenda { padding: clamp(3rem, 8vw, 6rem) 0; background: radial-gradient(60% 45% at 0% 0%, rgba(195, 199, 207, .13), transparent 70%), linear-gradient(180deg, var(--grafito), var(--grafito-2)); /* luz plata en una esquina sobre grafito */ }
.agenda-aviso { margin-top: 1rem; display: inline-block; padding: .55rem .9rem; border: 1px solid var(--linea); border-left: 3px solid var(--rojo); border-radius: var(--radio); background: rgba(11, 11, 13, .45); color: var(--plata); font-size: .92rem; }
.agenda-aviso b { color: var(--blanco); }
.agenda-cuerpo { max-width: var(--max); margin: 0 auto; padding: 0 var(--borde); display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.agenda-cuerpo > *, .calendario { min-width: 0; }
@media (min-width: 1100px) { .agenda-cuerpo { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
.calendario-cabeza { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .9rem; }
.calendario-cabeza p { font: 600 1.35rem var(--ancha); font-stretch: 112%; text-align: center; }
.cal-nav { min-height: 44px; padding: 0 .9rem; border-radius: var(--radio); border: 1px solid var(--linea); background: transparent; color: var(--blanco); font: 600 .92rem var(--ancha); cursor: pointer; }
.cal-nav:hover:not(:disabled) { border-color: var(--plata); }
.cal-nav:disabled { opacity: .35; cursor: not-allowed; }
.leyenda { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .85rem; color: var(--plata-suave); margin-bottom: 1rem; }
.leyenda span { display: inline-flex; align-items: center; gap: .4rem; }
.leyenda i { width: 14px; height: 14px; border-radius: 2px; display: inline-block; }
.leyenda .libre { border: 1px solid var(--rojo); background: var(--grafito); }
.leyenda .ocupado { background: repeating-linear-gradient(135deg, var(--gris-3) 0 3px, var(--gris-1) 3px 7px); }
.leyenda .tuyo { background: var(--rojo); }
.leyenda .cerrado { background: var(--cerrado); border: 1px solid var(--linea); }

.dias { display: flex; gap: .3rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: .8rem; scroll-snap-type: x proximity; scrollbar-width: none; } /* sin máscara: la última pestaña (sáb) se ve entera */
.dias::-webkit-scrollbar { display: none; }
.dia-tab { flex: 1 0 auto; min-height: 54px; min-width: 48px; padding: .35rem .5rem; border-radius: var(--radio); border: 1px solid var(--linea); background: transparent; color: var(--plata); cursor: pointer; font: 500 .82rem/1.15 var(--ancha); scroll-snap-align: start; }
.dia-tab b { display: block; font: 700 1.15rem var(--ancha); color: var(--blanco); }
.dia-tab[aria-selected="true"] { background: var(--blanco); border-color: var(--blanco); color: var(--tinta); }
.dia-tab[aria-selected="true"] b { color: var(--tinta); }
.dia-tab:disabled { opacity: .35; }

.grilla { display: grid; gap: .5rem; }
.grilla[data-estado="cargando"] { opacity: .5; }
.columna { display: none; }
.columna.activa { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.columna h3 { display: none; }
.bloque { min-height: 48px; border-radius: var(--radio); border: 1px solid var(--rojo); background: var(--grafito); color: var(--blanco); font: 600 1rem var(--ancha); font-variant-numeric: tabular-nums; cursor: pointer; padding: .3rem; transition: background-color .2s, color .2s; }
.bloque:hover:not(:disabled) { background: var(--rojo-hover); }
.bloque small { display: block; font-size: .8125rem; font-weight: 500; }
.bloque.ocupado { background: repeating-linear-gradient(135deg, var(--gris-2) 0 3px, var(--gris-1) 3px 7px); border-color: transparent; color: #C9CCD3; cursor: not-allowed; }
.bloque.ocupado.cerrado { background: var(--cerrado); border-color: var(--linea); color: var(--plata-suave); }
.bloque.elegido { background: var(--rojo); color: #fff; border-color: var(--rojo); box-shadow: 0 0 0 2px var(--negro), 0 0 0 4px var(--blanco); }
.bloque.tuyo { background: var(--rojo); color: #fff; border-color: var(--rojo); cursor: default; }
.columna.pasada { opacity: .6; }
.estado-vacio { padding: 1.2rem; border: 1px dashed var(--linea); border-radius: var(--radio); color: var(--plata-suave); text-align: center; }
@media (min-width: 900px) {
  .dias { display: none; }
  .grilla { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .columna, .columna.activa { display: flex; flex-direction: column; gap: .4rem; }
  .columna h3 { display: block; font: 600 1rem/1.15 var(--ancha); font-stretch: 112%; text-transform: capitalize; padding-bottom: .5rem; border-bottom: 1px solid var(--plata-suave); margin-bottom: .25rem; }
  .columna h3 span { display: block; font: 400 .8rem var(--ancha); color: var(--plata-suave); }
  .columna .estado-vacio { padding: .6rem; font-size: .82rem; }
}
.nota { margin-top: 1rem; font-size: .88rem; color: var(--plata-suave); }

.ficha-hora { background: linear-gradient(160deg, var(--grafito-2), var(--grafito)); border: 1px solid var(--linea); transition: border-color .4s; border-radius: var(--radio); padding: 1.4rem; display: grid; gap: .9rem; }
.ficha-hora h3 { font-size: 1.8rem; }
.hora-elegida { font-weight: 600; color: var(--rojo-texto); }
.ficha-hora.encendida { border-color: var(--rojo); box-shadow: 0 0 0 1px var(--rojo); }
@media (min-width: 1100px) { .ficha-hora { position: sticky; top: 96px; } }

/* campos */
label { display: grid; gap: .3rem; font-weight: 600; font-size: .92rem; }
input, select, textarea { width: 100%; min-height: 48px; padding: .6rem .75rem; border-radius: var(--radio); font: 400 1rem var(--ancha); }
.ficha-hora input, .ficha-hora select, .ficha-hora textarea { background: var(--negro); color: var(--blanco); border: 1px solid var(--gris-4); }
.ficha-hora ::placeholder { color: var(--gris-5); }
textarea { resize: vertical; }
.error-campo { display: block; font-size: .85rem; font-weight: 600; color: var(--rojo-texto); }
.orden .error-campo { color: var(--rojo-papel); }
[aria-invalid="true"] { border-color: var(--rojo-texto) !important; border-width: 2px !important; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.estado { min-height: 1.4em; font-weight: 600; }
.ficha-hora .estado.ok { color: #7FD39C; }
.ficha-hora .estado.error { color: var(--rojo-texto); }

/* 6. diagnóstico: la orden de trabajo en papel */
.diagnostico { padding: clamp(3rem, 8vw, 6rem) 0; background: linear-gradient(180deg, var(--negro), var(--grafito)); }
.orden { position: relative; width: calc(100% - 2 * var(--borde)); max-width: calc(var(--max) - 2 * var(--borde)); margin: 0 auto; background: var(--papel); color: var(--tinta); border-radius: var(--radio); padding: clamp(1.4rem, 4vw, 3rem); overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); /* la orden es la única pieza que se levanta: es un papel sobre el mesón */ }
.orden::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: radial-gradient(circle at 8px -2px, var(--grafito) 6px, transparent 6.5px) 0 0 / 16px 10px repeat-x; }
.orden .sector { color: var(--tinta-suave); }
.orden .sector b { color: var(--tinta); }
.orden .sector::before { background: repeating-linear-gradient(90deg, var(--rojo-papel) 0 8.5px, var(--tinta) 8.5px 17px); }
.orden h2 { font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.08; font-stretch: 118%; }
.orden h2 em { color: var(--rojo-papel); }
.orden-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-bottom: 1.3rem; border-bottom: 2px solid var(--tinta); margin-bottom: 1.5rem; }
.orden-bajada { color: var(--tinta-suave); margin-top: .7rem; }
.orden-cabeza .folio { font: 700 1.05rem var(--ancha); font-variant-numeric: tabular-nums; color: var(--rojo-papel); white-space: nowrap; align-self: flex-start; }
.orden input, .orden select, .orden textarea { background: #fff; color: var(--tinta); border: 1px solid var(--papel-linea); }
.orden input:focus-visible, .orden select:focus-visible, .orden textarea:focus-visible { outline: 3px solid var(--rojo-papel); outline-offset: 1px; }
.sintomas { border: 0; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.sintomas legend { font-weight: 700; margin-bottom: .7rem; padding: 0; }
.sintomas label { display: block; }
.sintomas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sintomas span { display: inline-flex; align-items: center; min-height: 46px; padding: .45rem .95rem; border-radius: var(--radio); border: 1px solid var(--papel-linea); background: #fff; cursor: pointer; transition: background-color .2s, color .2s; }
.sintomas input:checked + span { background: #fff; color: var(--tinta); border-color: var(--rojo-papel); box-shadow: inset 0 0 0 1px var(--rojo-papel); font-weight: 700; }
.sintomas input:checked + span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo-papel); margin-right: .55rem; }
.sintomas input:focus-visible + span { outline: 3px solid var(--rojo-papel); outline-offset: 2px; }
.orden { --foto-h: 180px; padding-top: calc(var(--foto-h) + 1.6rem); }
.orden-foto { position: absolute; left: 0; right: 0; top: 0; height: var(--foto-h); z-index: 0; }
.orden-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; }
.orden-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, var(--papel)); } /* la foto se funde con el papel */
.orden > *:not(.orden-foto):not(.timbre):not(.trampa) { position: relative; z-index: 1; }
@media (min-width: 900px) {
  .orden { padding-top: clamp(1.4rem, 4vw, 3rem); padding-left: calc(300px + clamp(1.4rem, 3vw, 2.4rem)); }
  .orden-foto { right: auto; bottom: 0; height: auto; width: 300px; }
  .orden-foto img { object-position: 50% 60%; }
  .orden-foto::after { background: linear-gradient(to right, transparent 45%, var(--papel)); }
}
.orden-campos { display: grid; gap: 1rem; }
@media (min-width: 720px) {
  .orden-campos { grid-template-columns: repeat(4, 1fr); }
  .orden-campos .ancho { grid-column: 1 / -1; }
  .orden-campos label:nth-child(6), .orden-campos label:nth-child(7) { grid-column: span 2; }
}
@media (min-width: 900px) and (max-width: 1099px) { /* la foto lateral deja ~465 px: 2 columnas para que Mercedes-Benz no se corte */
  .orden-campos { grid-template-columns: repeat(2, 1fr); }
  .orden-campos label:nth-child(6), .orden-campos label:nth-child(7) { grid-column: auto; }
}
.orden-pie { margin-top: 1.5rem; display: grid; gap: .6rem; justify-items: start; }
.orden-pie .boton[type="submit"] { min-height: 48px; min-width: 18rem; }
.orden-pie .estado:empty { min-height: 0; margin-block: -.3rem; }
@media (max-width: 719px) { .orden-pie .boton[type="submit"] { width: 100%; min-width: 0; } }
.orden-pie a { color: var(--rojo-papel); font-weight: 700; }
.orden .nota { color: var(--tinta-suave); margin-top: 0; }
.nota a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }
.orden .estado.ok { color: #1E6B3A; }
.orden .estado.error { color: var(--rojo-papel); }
.timbre { position: absolute; right: 8%; bottom: 16%; transform: rotate(-14deg) scale(1.4); border: 5px solid var(--rojo-papel); color: var(--rojo-papel); border-radius: 8px; padding: .2rem 1.1rem; font: 800 2.4rem/1 var(--ancha); font-stretch: 125%; text-transform: uppercase; opacity: 0; pointer-events: none; }
@media (max-width: 719px) { .timbre { right: 4%; bottom: 3%; font-size: 1.7rem; } }
.orden.enviada .timbre { opacity: .9; transform: rotate(-14deg) scale(1); transition: transform .25s cubic-bezier(.2, 1.6, .4, 1), opacity .1s; }

/* 8. ubicación: la entrada del taller a todo el ancho */
.ubicacion { padding: 0; }
.entrada { position: relative; min-height: 70vh; min-height: 70svh; display: grid; align-items: end; isolation: isolate; overflow: hidden; }
.entrada-foto, .entrada-foto img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.entrada-foto img { object-fit: cover; object-position: 50% 62%; }
.entrada::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(11, 11, 13, .95) 10%, rgba(11, 11, 13, .8) 55%, rgba(11, 11, 13, .6)); }
.entrada-texto { width: 100%; max-width: var(--max); margin: 0 auto; padding: clamp(5rem, 12vw, 9rem) var(--borde) clamp(2rem, 5vw, 3.5rem); }
.entrada h2 { font-size: clamp(2rem, 5.2vw, 4.2rem); }
.entrada-sub { margin: .8rem 0 1.6rem; color: var(--plata); font-size: 1.1rem; }
.contactos { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.contactos a { display: inline-flex; align-items: center; min-height: 46px; font-weight: 500; text-decoration-color: var(--rojo-texto); text-underline-offset: 5px; }
.contactos a:hover { color: var(--rojo-texto); }
.mapa { display: block; width: calc(100% - 2 * var(--borde)); max-width: calc(var(--max) - 2 * var(--borde)); margin: clamp(1.5rem, 4vw, 3rem) auto clamp(3rem, 8vw, 6rem); min-height: 300px; background: #fff; border: 1px solid #E3E3E3; border-radius: var(--radio); filter: grayscale(1) invert(.9) contrast(.9); }
@media (min-width: 760px) {
  .entrada { min-height: 70vh; }
  .entrada::before { background: linear-gradient(90deg, rgba(11, 11, 13, .92) 0%, rgba(11, 11, 13, .7) 38%, rgba(11, 11, 13, .15) 75%), linear-gradient(to top, rgba(11, 11, 13, .6), transparent 40%); }
  .entrada-texto { padding-top: 6rem; }
  .entrada-foto img { object-position: 50% 55%; }
}

/* pie */
.pie { border-top: 1px solid var(--linea); padding: 2.4rem var(--borde) 6rem; display: grid; gap: .6rem; justify-items: center; text-align: center; color: var(--plata-suave); }
.pie img { height: 26px; width: auto; }
.pie p, .pie address { text-wrap: balance; font-style: normal; }
.pie-tel { white-space: nowrap; }
.pie a { display: inline-block; padding: .65rem 0; }
.pie-demo { font-size: .85rem; }

.wsp-flotante { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; min-height: 50px; display: inline-flex; align-items: center; padding: 0 1.1rem; border-radius: var(--radio); background: #1E7E43; color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); }
@media (min-width: 980px) { .wsp-flotante { display: none; } }
.js .wsp-flotante { visibility: hidden; opacity: 0; }
.js .wsp-flotante.visible { visibility: visible; opacity: 1; }

@media (max-width: 359px) {
  .calendario-cabeza p { font-size: 1rem; line-height: 1.15; min-width: 0; flex: 1; }
  .cal-nav { padding: 0 .5rem; font-size: .875rem; }
}

@media (forced-colors: active) {
  .portada h1 em { background: none; -webkit-text-fill-color: currentColor; }
}

/* movimiento: solo si el sistema lo permite; sin JS o con "reducir movimiento" todo queda visible y quieto */
@media (prefers-reduced-motion: no-preference) {
  /* portada: foco en el auto y h1 legible en 1 s */
  .js .panel { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease); }
  .js .panel-c { transition-delay: 0s; }
  .js .panel-l { transition-delay: .12s; }
  .js .panel-r { transition-delay: .24s; }
  .js .listo .panel { clip-path: inset(0 0 0 0); }
  .js .panel img { transform: scale(1.12); transition: transform 2.4s var(--ease); }
  .js .listo .panel img { transform: scale(1); }
  .js .portada h1 .linea-i { transform: translateY(105%); transition: transform .9s var(--ease); }
  .js .listo h1 .linea-i { transform: none; }
  .js .listo h1 .linea:nth-child(1) .linea-i { transition-delay: .35s; }
  .js .listo h1 .linea:nth-child(2) .linea-i { transition-delay: .47s; }
  .js .portada .antetitulo, .js .portada .bajada, .js .portada .acciones { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .listo .antetitulo, .js .listo .bajada, .js .listo .acciones { opacity: 1; transform: none; }
  .js .listo .antetitulo { transition-delay: .2s; }
  .js .listo .bajada { transition-delay: .7s; }
  .js .listo .acciones { transition-delay: .82s; }
  /* revelados */
  .js .revelar { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .js .revelar.visto { opacity: 1; transform: none; }
  .js .marcas.revelar { transform: translateY(16px); }
  .js .trab.revelar { transition-delay: calc(var(--n, 0) * 120ms); }
  .js .oficio-par .revelar .par-marco { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); }
  .js .oficio-par .revelar.visto .par-marco { clip-path: inset(0); }
  /* servicios: un auto a la vez, con crossfade; gris que pasa a color */
  .visor-marco img { transition: opacity .5s var(--ease), filter .9s var(--ease); }
  .servicio h3::after { transition: transform .4s var(--ease); }
  .servicio h3 { transition: transform .5s var(--ease); }
  .servicio:hover h3 { transform: translateX(8px); }
  .js .servicio-foto { filter: grayscale(1) brightness(.8); transition: filter 1s var(--ease); }
  .js .servicio.visto .servicio-foto { filter: none; }
  /* entrada del taller */
  .js .entrada-foto img { transform: scale(1.06); transition: transform 2s var(--ease); }
  .js .entrada.visto .entrada-foto img { transform: scale(1); }
  /* agenda */
  .bloque { transition: background-color .2s, color .2s, box-shadow .2s; }
  .ficha-hora.encendida { animation: encender 1s var(--ease); }
  @keyframes encender { 0% { box-shadow: 0 0 0 0 rgba(214, 47, 53, .7); } 100% { box-shadow: 0 0 0 1px var(--rojo), 0 0 0 14px rgba(214, 47, 53, 0); } }
  .wsp-flotante { transition: opacity .4s, visibility .4s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orden.enviada .timbre { transition: none; }
  .boton:hover { transform: none; }
  .trab img, .trab figcaption, .servicio h3 { transition: none; }
  .trab:hover img, .trab:focus-within img { transform: none; }
  .trab:hover figcaption, .trab:focus-within figcaption { transform: none; }
}

/* tercera vía en la portada: texto, no botón, para no competir con WhatsApp y agenda */
.enlace-falla { display: inline-flex; align-items: center; min-height: 44px; margin-top: .6rem; color: var(--plata); text-decoration: underline; text-decoration-color: var(--rojo-texto); text-underline-offset: 5px; font-weight: 500; }
.enlace-falla:hover { color: var(--blanco); }