/* Lu-Cars, demo no oficial de Estudio González. Colores de su fachada: gris cemento, negro carbón, amarillo del cartel; rojo y verde solo en el semáforo. */
:root{
  color-scheme: light dark;
  --cemento:#dfe1df; --cemento2:#cfd2cf; --papel:#eceeec; --blanco:#f8f9f8;
  --carbon:#15171a; --carbon2:#24272b; --gris:#5b6064; --linea:#c3c7c4;
  --amarillo:#f4c300; --rojo:#d6382b; --verde:#2e9d5b;
  --titulo:"Antonio", "Arial Narrow", sans-serif; --texto:"Archivo", system-ui, sans-serif;
  --radio:18px;
}
@media (prefers-color-scheme: dark){
  :root{ --cemento:#dfe1df; --cemento2:#cfd2cf; --papel:#eceeec; --blanco:#f8f9f8; --carbon:#15171a; --carbon2:#24272b; --gris:#5b6064; --linea:#c3c7c4; }
  html,body{ background:#dfe1df; color:#15171a; }
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:auto; overflow-x:clip; -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--texto); font-size:17px; line-height:1.55; color:var(--carbon); background:var(--cemento); overflow-x:clip; }
img{ max-width:100%; height:auto; display:block; }
h1,h2,h3,p,figure,dl,dd,ol,ul{ margin:0; padding:0; }
ol,ul{ list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3{ font-family:var(--titulo); font-weight:700; text-transform:uppercase; line-height:.98; letter-spacing:.005em; }
h2{ font-size:clamp(40px, 5.6vw, 84px); max-width:16ch; }
.punt{ margin-left:-.06em; }
.linea-caja{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
:focus-visible{ outline:3px solid var(--amarillo); outline-offset:3px; }
.flecha{ display:inline-block; transition:transform .3s; }

/* Botones: se llenan de costado */
.boton{ position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border:2px solid var(--carbon); border-radius:999px; background:var(--carbon); color:#fff; font-weight:600; font-size:16.5px; text-decoration:none; overflow:hidden; transition:color .35s; }
.boton::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--amarillo); transform:translateX(-101%); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.boton:hover{ color:var(--carbon); } .boton:hover::before{ transform:none; } .boton:hover .flecha{ transform:translateX(4px); }
.boton--claro{ background:transparent; color:var(--carbon); }
.boton--claro-osc{ background:transparent; color:#fff; border-color:#fff; }
.boton--chico{ min-height:42px; padding:0 20px; font-size:15px; }
.boton--ancho{ width:100%; }
.enlace{ display:inline-flex; gap:8px; font-weight:600; text-decoration:none; border-bottom:2px solid var(--amarillo); padding-bottom:2px; }
.enlace:hover .flecha{ transform:translateX(4px); }

/* Carga: el semáforo de la fachada */
#carga{ position:fixed; inset:0; z-index:200; background:var(--carbon); color:#fff; display:grid; place-items:center; align-content:center; gap:22px; animation:fueraCarga 0s 5s forwards; }
.sin-carga #carga{ display:none; }
html:not(.js-listo) #carga{ display:none; }
@keyframes fueraCarga{ to{ visibility:hidden; opacity:0; pointer-events:none; } }
.carga__sem{ width:min(110px, 26vw); overflow:visible; }
.carga__caja{ fill:var(--carbon2); stroke:#3a3e43; stroke-width:2; }
.carga__luz{ fill:#34383d; }
.carga__nombre{ font-family:var(--titulo); font-weight:700; font-size:clamp(44px, 8vw, 84px); text-transform:uppercase; line-height:1; overflow:hidden; letter-spacing:.02em; }
.carga__nombre span{ display:inline-block; }

/* Barra */
.barra{ position:fixed; z-index:50; top:14px; left:50%; transform:translateX(-50%); width:min(1280px, 100% - 28px); display:flex; align-items:center; gap:28px; padding:8px 8px 8px 18px; border-radius:999px; background:rgba(236,238,236,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:background .3s, box-shadow .3s; }
.barra--baja{ background:rgba(236,238,236,.96); box-shadow:0 0 0 1px var(--linea), 0 12px 30px -18px rgba(0,0,0,.4); }
.marca{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; }
.marca__sem{ display:grid; gap:3px; padding:5px 6px; border-radius:7px; background:var(--carbon); }
.marca__sem i{ width:8px; height:8px; border-radius:50%; background:#444; }
.marca__sem i:nth-child(1){ background:var(--rojo); } .marca__sem i:nth-child(2){ background:var(--amarillo); } .marca__sem i:nth-child(3){ background:var(--verde); }
.marca__t{ font-family:var(--titulo); font-weight:700; font-size:25px; line-height:.9; text-transform:uppercase; letter-spacing:.03em; }
.marca__t small{ display:block; font-family:var(--texto); font-weight:500; font-size:11.5px; letter-spacing:.2em; color:var(--gris); margin-top:3px; }
.barra__nav{ display:flex; gap:24px; font-size:15px; font-weight:500; }
.barra__nav a{ text-decoration:none; position:relative; }
.barra__nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--carbon); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.barra__nav a:hover::after{ transform:scaleX(1); }
.barra__menu{ display:none; width:44px; height:44px; border:0; border-radius:50%; background:var(--carbon); position:relative; }
.barra__menu i{ position:absolute; left:13px; right:13px; height:2px; background:#fff; transition:transform .3s; } .barra__menu i:nth-child(1){ top:17px; } .barra__menu i:nth-child(2){ top:25px; }
.menu-abierto .barra__menu i:nth-child(1){ transform:translateY(4px) rotate(45deg); } .menu-abierto .barra__menu i:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }
.menu-cel{ position:fixed; inset:0; z-index:45; padding:96px 28px 28px; background:var(--cemento); display:flex; flex-direction:column; gap:6px; }
.menu-cel[hidden]{ display:none; }
.menu-cel a:not(.boton){ font-family:var(--titulo); font-weight:700; font-size:40px; text-transform:uppercase; text-decoration:none; padding:8px 0; border-bottom:1px solid var(--linea); }
.menu-cel .boton{ margin-top:20px; }

section{ position:relative; }
.portada,.datos,.semaforo,.servicios,.km,.lubri,.trabajos,.gente,.turno,.preguntas,.donde{ padding-left:clamp(20px, 5vw, 72px); padding-right:clamp(20px, 5vw, 72px); }
.portada,.servicios,.km,.lubri,.trabajos,.gente,.turno,.preguntas,.donde,.semaforo{ padding-top:clamp(70px, 9vw, 140px); padding-bottom:clamp(30px, 4vw, 60px); }

/* Portada */
.portada{ min-height:100svh; display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(24px, 5vw, 80px); align-items:center; padding-top:120px; padding-bottom:50px; max-width:1500px; margin:0 auto; }
.portada h1{ font-size:clamp(52px, 8.2vw, 132px); max-width:11ch; }
.portada__baja{ margin-top:26px; max-width:46ch; font-size:19px; color:#33373b; }
.portada__botones{ margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; }
.portada__nota{ margin-top:18px; font-size:15px; color:var(--gris); }
.portada__foto{ position:relative; justify-self:end; width:min(100%, 420px); }
.portada__marco{ border-radius:var(--radio); overflow:hidden; aspect-ratio:9/16; background:var(--cemento2); box-shadow:0 40px 70px -40px rgba(0,0,0,.55); }
.portada__marco img{ width:100%; height:112%; object-fit:cover; will-change:transform; }
.abierto{ position:absolute; left:-26px; bottom:34px; display:flex; align-items:center; gap:14px; padding:12px 20px 12px 12px; border-radius:16px; background:var(--carbon); color:#fff; box-shadow:0 18px 40px -16px rgba(0,0,0,.6); }
.abierto__sem{ display:grid; gap:4px; padding:7px; border-radius:9px; background:#0c0d0f; }
.abierto__sem i{ width:14px; height:14px; border-radius:50%; background:#3a3d42; transition:background .4s, box-shadow .4s; }
.abierto[data-estado="verde"] .v{ background:var(--verde); box-shadow:0 0 14px var(--verde); }
.abierto[data-estado="amarillo"] .a{ background:var(--amarillo); box-shadow:0 0 14px var(--amarillo); }
.abierto[data-estado="rojo"] .r{ background:var(--rojo); box-shadow:0 0 14px var(--rojo); }
.abierto__t{ display:grid; line-height:1.2; }
.abierto__t b{ font-size:17px; }
.abierto__t small{ font-size:13px; color:#b9bdc1; }

/* Datos */
.datos{ padding-top:20px; padding-bottom:20px; }
.datos__fila{ max-width:1500px; margin:0 auto; display:grid; grid-template-columns:repeat(4, 1fr); border-top:2px solid var(--carbon); }
.dato{ padding:26px 24px 26px 0; display:grid; gap:4px; }
.dato + .dato{ padding-left:24px; border-left:1px solid var(--linea); }
.dato__n{ font-family:var(--titulo); font-weight:700; font-size:clamp(46px, 5.4vw, 80px); line-height:.9; }
.dato__t{ font-size:15.5px; color:var(--gris); }

/* Semáforo */
.semaforo{ background:var(--carbon); color:#fff; margin-top:clamp(40px, 6vw, 90px); border-radius:34px 34px 0 0; }
.semaforo > *{ max-width:1400px; margin-left:auto; margin-right:auto; }
.semaforo__tit{ display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:end; }
.semaforo__tit p{ max-width:44ch; color:#c5c9cd; font-size:18px; }
.semaforo__cuerpo{ margin-top:clamp(34px, 5vw, 70px); display:grid; grid-template-columns:170px 1fr; gap:clamp(24px, 5vw, 80px); align-items:start; }
.sem{ position:sticky; top:110px; display:grid; justify-items:center; }
.sem__poste{ order:2; width:12px; height:70px; background:#2c2f33; }
.sem__caja{ width:130px; padding:20px 0; display:grid; gap:14px; justify-items:center; border-radius:34px; background:#0c0d0f; border:3px solid #34383d; }
.sem__luz{ width:78px; height:78px; border-radius:50%; background:#26292d; transition:background .45s, box-shadow .45s; }
.sem[data-luz="r"] #luzR{ background:var(--rojo); box-shadow:0 0 50px 6px rgba(214,56,43,.7); }
.sem[data-luz="a"] #luzA{ background:var(--amarillo); box-shadow:0 0 50px 6px rgba(244,195,0,.6); }
.sem[data-luz="v"] #luzV{ background:var(--verde); box-shadow:0 0 50px 6px rgba(46,157,91,.65); }
.sintomas{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.sintoma{ display:flex; align-items:center; gap:14px; min-height:62px; padding:12px 18px; text-align:left; border:1.5px solid #3a3e43; border-radius:14px; background:#1d2024; color:#fff; font-size:16.5px; font-weight:500; line-height:1.25; transition:border-color .25s, background .25s, transform .25s; }
.sintoma i{ flex:none; width:14px; height:14px; border-radius:50%; background:var(--c); }
.sintoma:hover{ border-color:#8a8f94; transform:translateY(-2px); }
.sintoma.elegido{ background:#fff; color:var(--carbon); border-color:#fff; }
.veredicto{ margin-top:22px; padding:clamp(22px, 3vw, 34px); border-radius:var(--radio); background:#1d2024; border:1.5px solid #3a3e43; }
.veredicto__t{ font-family:var(--titulo); font-weight:700; text-transform:uppercase; font-size:clamp(32px, 3.6vw, 52px); line-height:1; }
.veredicto__p{ margin-top:10px; max-width:58ch; color:#c5c9cd; }
.veredicto__botones{ margin-top:20px; display:flex; gap:12px; flex-wrap:wrap; }
.veredicto__botones[hidden]{ display:none; }
.veredicto[data-luz="r"]{ border-color:var(--rojo); } .veredicto[data-luz="a"]{ border-color:var(--amarillo); } .veredicto[data-luz="v"]{ border-color:var(--verde); }
.semaforo .boton{ background:#fff; color:var(--carbon); border-color:#fff; } .semaforo .boton:hover{ color:var(--carbon); }
.semaforo .boton--claro-osc{ background:transparent; color:#fff; border-color:#fff; } .semaforo .boton--claro-osc:hover{ color:var(--carbon); }

/* Servicios */
.servicios{ max-width:1500px; margin:0 auto; }
.serv{ margin-top:clamp(30px, 4vw, 56px); border-top:2px solid var(--carbon); counter-reset:s; }
.serv li{ display:grid; grid-template-columns:70px 1.1fr 1.4fr auto; gap:24px; align-items:center; padding:26px 0; border-bottom:1px solid var(--linea); transition:padding .35s, background .35s; }
.serv li:hover{ padding-left:18px; background:var(--papel); }
.serv__n{ font-family:var(--titulo); font-size:30px; color:var(--gris); }
.serv h3{ font-size:clamp(30px, 3.4vw, 50px); }
.serv p{ color:#3e4246; max-width:48ch; }
.serv .enlace{ white-space:nowrap; background:none; border-top:0; border-left:0; border-right:0; }
.serv__nota{ margin-top:22px; color:var(--gris); max-width:60ch; }

/* Qué le toca */
.km{ max-width:1500px; margin:0 auto; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(24px, 5vw, 80px); align-items:start; }
.km__cab p{ margin-top:22px; max-width:44ch; font-size:18px; color:#33373b; }
.km__caja{ padding:clamp(24px, 3vw, 40px); border-radius:var(--radio); background:var(--papel); box-shadow:0 0 0 1px var(--linea); display:grid; gap:14px; }
.km__cuentak{ display:flex; align-items:baseline; gap:12px; }
.km__num{ font-family:var(--titulo); font-weight:700; font-size:clamp(64px, 8vw, 116px); line-height:.9; font-variant-numeric:tabular-nums; }
.km__u{ font-family:var(--titulo); font-size:34px; color:var(--gris); }
.km__rango{ -webkit-appearance:none; appearance:none; width:100%; height:12px; border-radius:99px; background:linear-gradient(90deg, var(--carbon) var(--p,33%), var(--cemento2) var(--p,33%)); outline-offset:8px; }
.km__rango::-webkit-slider-thumb{ -webkit-appearance:none; width:34px; height:34px; border-radius:50%; background:var(--amarillo); border:3px solid var(--carbon); cursor:grab; }
.km__rango::-moz-range-thumb{ width:30px; height:30px; border-radius:50%; background:var(--amarillo); border:3px solid var(--carbon); cursor:grab; }
.km__marcas{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--gris); }
.km__lista{ display:grid; gap:0; margin:8px 0 12px; }
.km__lista li{ display:flex; gap:14px; align-items:center; padding:13px 0; border-top:1px solid var(--linea); font-weight:500; animation:entraLi .4s both; }
.km__lista li::before{ content:""; flex:none; width:10px; height:10px; border-radius:50%; background:var(--carbon); }
.km__lista li small{ margin-left:auto; color:var(--gris); font-weight:400; font-size:14px; text-align:right; }
@keyframes entraLi{ from{ opacity:0; transform:translateY(8px); } }

/* Lubricentro */
.lubri{ max-width:1500px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 5vw, 80px); align-items:center; }
.lubri__fotos{ position:relative; padding-bottom:20%; }
.lubri__a{ width:80%; border-radius:var(--radio); box-shadow:0 30px 60px -36px rgba(0,0,0,.5); }
.lubri__b{ position:absolute; right:0; bottom:0; width:48%; border-radius:var(--radio); border:6px solid var(--cemento); box-shadow:0 30px 60px -30px rgba(0,0,0,.55); }
.lubri__texto{ display:grid; gap:18px; justify-items:start; }
.lubri__texto p{ max-width:50ch; font-size:18px; color:#33373b; }
.marcas{ display:flex; flex-wrap:wrap; gap:8px; }
.marcas li{ padding:9px 18px; border-radius:999px; border:1.5px solid var(--carbon); font-weight:600; font-size:15px; }
.lubri__texto .boton{ margin-top:8px; }

/* Trabajos */
.trabajos{ max-width:1500px; margin:0 auto; }
.casos{ margin-top:clamp(30px, 4vw, 56px); display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.caso{ padding:clamp(22px, 2.6vw, 34px); border-radius:var(--radio); background:var(--papel); box-shadow:0 0 0 1px var(--linea); display:grid; gap:12px; align-content:start; transition:transform .35s, box-shadow .35s; }
.caso:hover{ transform:translateY(-5px); box-shadow:0 0 0 1px var(--carbon), 0 24px 40px -26px rgba(0,0,0,.4); }
.caso__auto{ font-weight:600; color:var(--gris); }
.caso h3{ font-size:clamp(30px, 3vw, 44px); }
.caso__f{ font-size:13.5px; color:var(--gris); margin-top:6px; }
.caso--foto{ padding:0; overflow:hidden; grid-template-rows:auto 1fr; }
.caso--foto img{ width:100%; height:260px; object-fit:cover; object-position:50% 35%; }
.caso--foto > div{ padding:clamp(22px, 2.6vw, 34px); display:grid; gap:12px; }

/* Gente */
.gente{ max-width:1500px; margin:0 auto; }
.gente__lucas{ display:grid; grid-template-columns:minmax(220px, 340px) 1fr; gap:clamp(24px, 4vw, 60px); align-items:center; }
.gente__lucas img{ border-radius:var(--radio); width:100%; }
.gente__lucas p{ margin-top:20px; max-width:48ch; font-size:18px; color:#33373b; }
.dichos{ margin-top:clamp(28px, 4vw, 50px); display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
.dicho{ padding:clamp(22px, 2.6vw, 34px); border-radius:var(--radio); background:var(--carbon); color:#fff; display:grid; gap:16px; align-content:space-between; }
.dicho blockquote{ margin:0; font-family:var(--titulo); font-weight:700; text-transform:uppercase; font-size:clamp(28px, 3vw, 44px); line-height:1.02; }
.dicho figcaption{ font-size:14px; color:#b9bdc1; }
.google{ padding:clamp(22px, 2.6vw, 34px); border-radius:var(--radio); background:var(--amarillo); display:flex; align-items:center; gap:22px; }
.google__n{ font-family:var(--titulo); font-weight:700; font-size:clamp(70px, 8vw, 120px); line-height:.85; }
.google__e{ font-size:26px; letter-spacing:3px; }
.google__t{ font-weight:600; margin-bottom:10px; }
.google .enlace{ border-bottom-color:var(--carbon); }

/* Turno */
.turno{ max-width:1500px; margin:0 auto; display:grid; grid-template-columns:1fr minmax(0, 560px); gap:clamp(24px, 6vw, 100px); align-items:start; }
.turno__texto p{ margin-top:22px; max-width:44ch; font-size:18px; color:#33373b; }
.turno__horario{ font-weight:600; }
.pasos{ padding:clamp(22px, 3vw, 38px); border-radius:calc(var(--radio) + 6px); background:var(--carbon); color:#fff; box-shadow:0 40px 70px -40px rgba(0,0,0,.6); }
.pasos__arriba{ display:flex; align-items:center; gap:14px; font-size:14px; color:#b9bdc1; margin-bottom:22px; }
.pasos__barra{ flex:1; height:4px; border-radius:4px; background:#3a3e43; overflow:hidden; }
.pasos__barra i{ display:block; height:100%; background:var(--amarillo); transform-origin:left; transform:scaleX(.25); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.paso[hidden]{ display:none; }
.paso--activo{ animation:entraPaso .45s cubic-bezier(.2,.8,.2,1); }
@keyframes entraPaso{ from{ opacity:0; transform:translateX(18px); } }
.paso__preg{ font-family:var(--titulo); font-weight:700; text-transform:uppercase; font-size:clamp(32px, 3.2vw, 44px); line-height:1; margin-bottom:8px; }
.paso__ayuda{ font-size:14.5px; color:#b9bdc1; margin-bottom:12px; }
.paso__preg + .ops{ margin-top:18px; }
.ops{ display:grid; gap:8px; }
.ops--dos{ grid-template-columns:1fr 1fr; }
.ops button{ min-height:56px; padding:12px 16px; text-align:left; border:1.5px solid #3a3e43; border-radius:12px; background:#1d2024; color:#fff; font-size:16px; font-weight:500; line-height:1.25; transition:border-color .25s, background .25s, color .25s; }
.ops button:hover{ border-color:#fff; }
.ops button.elegido{ background:var(--amarillo); color:var(--carbon); border-color:var(--amarillo); }
[data-multi] .boton--ancho{ margin-top:16px; }
.pasos .boton{ background:#fff; color:var(--carbon); border-color:#fff; }
.paso__atras{ margin-top:14px; border:0; background:none; padding:6px 0; color:#b9bdc1; font-size:15px; }
.campo{ display:grid; gap:6px; font-size:14px; color:#b9bdc1; margin-bottom:14px; }
.campo input{ min-height:54px; padding:0 16px; border:1.5px solid #3a3e43; border-radius:12px; font:inherit; font-size:17px; color:#fff; background:#1d2024; color-scheme:dark; }
.campo input:focus{ outline:none; border-color:var(--amarillo); }
.pasos__mensaje{ padding:16px 18px; border-radius:12px; background:#1d2024; margin-bottom:16px; }
.pasos__mensaje span{ font-size:13px; color:#b9bdc1; }
.pasos__mensaje p{ margin-top:6px; font-size:15.5px; }

/* Preguntas */
.preguntas{ max-width:1500px; margin:0 auto; display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(24px, 5vw, 80px); align-items:start; }
.faq details{ border-top:1px solid var(--linea); }
.faq details:last-child{ border-bottom:1px solid var(--linea); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 40px 22px 0; font-weight:600; font-size:19px; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:30px; font-weight:400; transition:transform .3s; }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq details p{ padding:0 40px 24px 0; max-width:60ch; color:#3e4246; }

/* Dónde */
.donde{ max-width:1500px; margin:0 auto; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px, 5vw, 80px); align-items:center; }
.donde__mapa{ position:relative; border-radius:var(--radio); overflow:hidden; box-shadow:0 0 0 1px var(--linea); filter:grayscale(.85); }
.donde__mapa img{ width:100%; aspect-ratio:2/1.15; object-fit:cover; pointer-events:none; }
.donde__pin{ position:absolute; left:50%; top:46%; transform:translate(-50%, -100%); padding:10px 18px; border-radius:999px; background:var(--carbon); color:#fff; text-decoration:none; font-weight:600; font-size:15px; box-shadow:0 10px 24px -8px rgba(0,0,0,.6); }
.donde__pin::after{ content:""; position:absolute; left:50%; bottom:-7px; width:14px; height:14px; background:var(--carbon); transform:translateX(-50%) rotate(45deg); }
.donde__texto{ display:grid; gap:20px; justify-items:start; }
.donde__texto > p{ max-width:40ch; font-size:18px; color:#33373b; }
.horas{ width:100%; border-top:2px solid var(--carbon); }
.horas div{ display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--linea); }
.horas dt{ color:var(--gris); } .horas dd{ font-weight:600; text-align:right; }
.donde__botones{ display:flex; gap:12px; flex-wrap:wrap; }

/* Pie */
.pie{ margin:clamp(50px, 7vw, 100px) 14px 14px; padding:clamp(28px, 5vw, 70px) clamp(20px, 5vw, 70px) 24px; border-radius:30px; background:var(--carbon); color:#fff; }
.pie__arriba{ max-width:1400px; margin:0 auto; }
.pie__nombre{ font-family:var(--titulo); font-weight:700; text-transform:uppercase; font-size:clamp(90px, 21vw, 340px); line-height:.82; letter-spacing:-.01em; }
.pie__cols{ margin-top:clamp(40px, 5vw, 70px); display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; }
.pie__cols div{ display:grid; gap:6px; align-content:start; color:#c5c9cd; }
.pie__cols b{ color:#fff; font-size:18px; }
.pie__cols a{ text-decoration:none; } .pie__cols a:hover{ color:var(--amarillo); }
.pie__abajo{ max-width:1400px; margin:44px auto 0; padding-top:20px; border-top:1px solid #3a3e43; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px; color:#9da2a7; }
.pie__abajo nav a, .pie__abajo nav button{ color:#c5c9cd; }

/* Barra fija en el celu */
.barra-cel{ display:none; }

/* Modo demo */
.demo{ position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:20px; background:rgba(21,23,26,.65); backdrop-filter:blur(4px); }
.demo[hidden]{ display:none; }
.demo__caja{ width:min(460px, 100%); padding:30px; border-radius:20px; background:#fff; color:var(--carbon); display:grid; gap:14px; }
.demo__t{ font-family:var(--titulo); font-weight:700; text-transform:uppercase; font-size:38px; line-height:1; }
.demo__msg{ padding:16px 18px; border-radius:16px 16px 16px 4px; background:#dcf8c6; color:#111; font-size:15.5px; }

/* Aparecer */
[data-revela]{ opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
[data-revela].visto{ opacity:1; transform:none; }
html:not(.js-listo) [data-revela]{ opacity:1; transform:none; }

@media (max-width:1100px){
  .barra__nav{ display:none; } .barra__menu{ display:block; } .barra .boton--chico{ display:none; }
  .serv li{ grid-template-columns:50px 1fr auto; } .serv li p{ grid-column:2 / 4; grid-row:2; }
  .casos{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .portada{ grid-template-columns:1fr; padding-top:100px; min-height:0; }
  .portada__foto{ justify-self:center; width:min(78%, 340px); }
  .abierto{ left:-8px; }
  .datos__fila{ grid-template-columns:1fr 1fr; } .dato:nth-child(3){ padding-left:0; border-left:0; } .dato:nth-child(n+3){ border-top:1px solid var(--linea); }
  .semaforo__tit,.km,.lubri,.turno,.preguntas,.donde,.gente__lucas{ grid-template-columns:1fr; }
  .semaforo__cuerpo{ grid-template-columns:1fr; } .sem{ position:static; justify-items:start; }
  .sem__caja{ width:auto; padding:12px 16px; display:flex; gap:10px; border-radius:99px; } .sem__luz{ width:44px; height:44px; } .sem__poste{ display:none; }
  .sintomas{ grid-template-columns:1fr; }
  .gente__lucas img{ max-width:300px; }
  .dichos{ grid-template-columns:1fr; }
  .pie__cols{ grid-template-columns:1fr; }
  .barra-cel{ display:grid; grid-template-columns:1.4fr 1fr; gap:8px; position:fixed; z-index:40; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); padding:8px; border-radius:999px; background:rgba(236,238,236,.94); backdrop-filter:blur(12px); box-shadow:0 0 0 1px var(--linea), 0 14px 30px -14px rgba(0,0,0,.5); }
  .barra-cel .boton{ min-height:46px; padding:0 14px; }
  body{ padding-bottom:84px; }
}
@media (max-width:640px){
  body{ font-size:16.5px; }
  .portada__botones .boton{ flex:1 1 100%; }
  .serv li{ grid-template-columns:38px 1fr; gap:6px 12px; } .serv li .enlace{ grid-column:2; justify-self:start; } .serv li p{ grid-column:2; }
  .casos{ grid-template-columns:1fr; }
  .ops--dos{ grid-template-columns:1fr; }
  .km__lista li small{ display:none; }
  .google{ flex-direction:column; align-items:flex-start; }
  .donde__mapa img{ aspect-ratio:4/5; }
  .donde__pin{ font-size:13px; padding:8px 14px; }
}
@media (prefers-reduced-motion:reduce){ .boton::before{ transition:none; } }

/* Mejora 1 */
.portada__sem{ margin-top:30px; display:grid; gap:10px; }
.portada__sem > p{ font-weight:600; font-size:15.5px; }
.portada__chips{ display:flex; flex-wrap:wrap; gap:10px; }
.portada__chips button{ display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:0 18px 0 14px; border-radius:999px; background:var(--papel); box-shadow:0 0 0 1px var(--linea); font:inherit; font-weight:600; font-size:15px; color:var(--carbon); cursor:pointer; transition:transform .3s, box-shadow .3s, background .3s; }
.portada__chips button:hover{ transform:translateY(-3px); box-shadow:0 0 0 1px var(--carbon), 0 14px 24px -14px rgba(0,0,0,.45); background:#fff; }
.portada__chips i{ width:16px; height:16px; border-radius:50%; background:#34383d; box-shadow:0 0 0 3px rgba(0,0,0,.08); }
.portada__chips i.r{ background:var(--rojo); } .portada__chips i.a{ background:var(--amarillo); } .portada__chips i.v{ background:var(--verde); }
.portada__nota{ margin-top:16px; }
.abierto{ padding:16px 26px 16px 16px; gap:16px; }
.abierto__sem{ padding:9px; gap:5px; } .abierto__sem i{ width:18px; height:18px; }
.abierto__t b{ font-size:20px; } .abierto__t small{ font-size:14px; }
.casos{ grid-template-columns:2fr 1fr; align-items:stretch; }
.casos__texto{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-content:start; }
.caso--foto{ grid-template-rows:1fr auto; }
.caso--foto img{ height:100%; min-height:340px; max-height:520px; }
.serv .serv__ir{ width:54px; height:54px; border-radius:50%; background:var(--carbon); color:#fff; border:0; font-size:20px; cursor:pointer; display:grid; place-items:center; transition:transform .3s, background .3s; }
.serv li{ cursor:pointer; }
.serv li:hover .serv__ir{ background:var(--amarillo); color:var(--carbon); transform:scale(1.08); }
.turno__foto{ margin-top:34px; max-width:440px; border-radius:var(--radio); overflow:hidden; box-shadow:0 30px 50px -34px rgba(0,0,0,.55); }
.turno__foto img{ width:100%; aspect-ratio:5/4; object-fit:cover; object-position:50% 40%; }
.donde__foto{ width:min(100%, 420px); border-radius:var(--radio); overflow:hidden; box-shadow:0 0 0 1px var(--linea); }
.donde__foto img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:50% 70%; }
@media (max-width:1100px){ .casos{ grid-template-columns:1fr; } .caso--foto img{ min-height:260px; } }
@media (max-width:860px){ .turno__foto{ max-width:none; } .turno__foto img{ aspect-ratio:16/10; } .gente__lucas img{ max-width:210px; } .abierto{ padding:12px 20px 12px 12px; } .abierto__t b{ font-size:18px; } }
@media (max-width:640px){ .casos__texto{ grid-template-columns:1fr; } .serv .serv__ir{ width:46px; height:46px; } .serv li .serv__ir{ grid-column:2; justify-self:start; } .portada__chips button{ flex:1 1 100%; } .donde__foto{ width:100%; } }
.portada h1{ font-size:clamp(52px, 7vw, 112px); max-width:12ch; }
@media (max-width:860px){ .portada h1{ font-size:clamp(48px, 13vw, 84px); } }
.donde__foto img{ aspect-ratio:4/3; object-position:50% 100%; }
.caso--foto img{ min-height:240px; max-height:340px; }

/* Mejora 2 */
.solo-pc{ display:inline; }
.portada,.servicios,.km,.lubri,.trabajos,.gente,.turno,.preguntas,.donde,.semaforo{ padding-top:clamp(56px, 7vw, 104px); }
.portada{ padding-top:120px; }
.sem:not([data-luz]) #luzA{ animation:parpadeoA 1.8s steps(1) infinite; }
@keyframes parpadeoA{ 0%,55%{ background:var(--amarillo); box-shadow:0 0 44px 4px rgba(244,195,0,.5); } 56%,100%{ background:#26292d; box-shadow:none; } }
.dicho{ gap:20px; }
.dicho blockquote{ text-transform:none; font-weight:600; font-size:clamp(24px, 2.3vw, 33px); line-height:1.14; letter-spacing:0; }
.gente__lucas{ grid-template-columns:minmax(200px, 290px) 1fr; }
.gente__lucas img{ aspect-ratio:1/1; height:auto; object-fit:cover; object-position:78% 40%; }
@media (max-width:640px){
  .portada{ padding-top:92px; gap:22px; }
  .portada h1{ font-size:clamp(40px, 11.4vw, 56px); max-width:none; }
  .portada__baja{ margin-top:16px; font-size:17px; }
  .portada__botones{ margin-top:20px; flex-wrap:nowrap; }
  .portada__botones .boton{ flex:1 1 50%; padding:0 12px; min-height:50px; }
  .solo-pc{ display:none; }
  .portada__sem{ margin-top:22px; }
  .portada__chips button{ flex:1 1 100%; min-height:44px; }
  .gente__lucas img{ max-width:170px; }
}
.portada h1{ font-size:clamp(52px, 6.8vw, 106px); max-width:13ch; }
@media (max-width:860px){ .gente__lucas{ grid-template-columns:1fr; } .gente__lucas img{ max-width:200px; } }
@media (max-width:640px){ .portada h1{ font-size:clamp(40px, 11.4vw, 56px); max-width:none; } .gente__lucas img{ max-width:170px; } }