/* RADOS Taller — landing pública.
   Mismos tokens que la academia: es la misma marca. Si se tocan acá, tocarlos allá.
   Concepto "acabado espejo": laca negra y un barrido dorado que recorre las
   superficies, como pasar la pulidora. */

:root{
  --negro:#08080a;
  --carbon:#101013;
  --carbon-alto:#17171d;
  --oro:#c8a159;
  --oro-claro:#e8ce9a;
  --oro-prof:#8a6d33;
  --marfil:#f3f0ea;
  --gris:#8e8b84;
  --gris-tenue:#5d5b56;
  --linea:rgba(200,161,89,.16);
  --linea-fuerte:rgba(200,161,89,.34);
  --display:"Bodoni Moda",serif;
  --ui:"Jost",sans-serif;
  --r:3px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--negro);color:var(--marfil);font-family:var(--ui);
  font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* grano: el negro plano se ve barato */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:900;opacity:.4;
  background-image: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='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--oro);color:var(--negro)}
img{max-width:100%;display:block}

.envoltorio{max-width:1120px;margin:0 auto;padding:0 26px}

/* ── cabecera ── */
.tope{
  position:sticky;top:0;z-index:100;
  background:rgba(8,8,10,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.tope-in{max-width:1120px;margin:0 auto;padding:16px 26px;display:flex;align-items:center;gap:26px}
.emblema{display:flex;align-items:center;gap:13px;text-decoration:none}
.disco{
  width:42px;height:42px;border-radius:50%;position:relative;flex:none;
  background:radial-gradient(circle at 32% 26%,#2a2a30,#0b0b0e 62%);
  border:1px solid var(--oro-prof);
  box-shadow:0 0 0 3px rgba(8,8,10,.9),0 0 0 4px rgba(200,161,89,.22);
  display:grid;place-items:center;
}
.disco::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(200,161,89,.3)}
.disco span{font:500 19px/1 var(--display);color:var(--oro-claro);transform:translateY(-1px)}
.marca-txt{display:flex;flex-direction:column;gap:3px}
.marca-nom{font:400 17px/1 var(--display);letter-spacing:.3em;color:var(--marfil)}
.marca-sub{font:400 7px/1 var(--ui);letter-spacing:.38em;color:var(--oro);text-transform:uppercase}
.nav{display:flex;gap:28px;margin-left:auto;align-items:center}
.nav a{font:400 12px/1 var(--ui);letter-spacing:.15em;text-transform:uppercase;color:var(--gris);text-decoration:none;transition:.3s}
.nav a:hover{color:var(--oro)}

/* ── botones ── */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none;
  font:500 11.5px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  padding:15px 28px;border-radius:2px;border:1px solid var(--oro);
  background:var(--oro);color:var(--negro);transition:.4s;
}
.btn:hover{background:var(--oro-claro);border-color:var(--oro-claro);transform:translateY(-2px)}
.btn.fantasma{background:none;color:var(--oro);border-color:var(--linea-fuerte)}
.btn.fantasma:hover{background:rgba(200,161,89,.08);border-color:var(--oro);color:var(--oro-claro)}

/* ── tipografía ── */
.kicker{font:400 10px/1 var(--ui);letter-spacing:.4em;text-transform:uppercase;color:var(--oro);margin-bottom:18px}
h1{font:400 clamp(44px,7vw,86px)/1 var(--display);letter-spacing:-.025em}
h2{font:400 clamp(28px,3.6vw,40px)/1.1 var(--display);letter-spacing:-.01em}
h3{font:500 18px/1.3 var(--display)}
.plomo{font:300 16.5px/1.7 var(--ui);color:var(--gris);max-width:50ch}
em{font-style:italic;color:var(--oro-claro)}

/* ── portada ── */
.portada{position:relative;padding:96px 0 104px;overflow:hidden}
.portada::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 70% at 20% 0%,rgba(255,255,255,.055),transparent 52%),
    radial-gradient(90% 60% at 82% 100%,rgba(200,161,89,.13),transparent 58%);
}
.acciones{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.marcas{display:flex;gap:34px;margin-top:56px;flex-wrap:wrap;padding-top:30px;border-top:1px solid var(--linea)}
.marcas div .n{font:400 30px/1 var(--display);color:var(--oro-claro)}
.marcas div .l{font:400 10px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--gris-tenue);margin-top:7px}

/* ── secciones ── */
/* scroll-margin-top: sin esto, al tocar un link del menú la barra fija (sticky)
   se come el título de la sección a la que saltás. */
.seccion{padding:82px 0;scroll-margin-top:96px}
.rubro{display:flex;align-items:baseline;gap:18px;margin-bottom:14px}
.rubro h2{font-size:28px}
.rubro .raya{flex:1;height:1px;background:var(--linea)}
.nota-grupo{font:300 13.5px/1.6 var(--ui);color:var(--oro);margin-bottom:26px}

.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px;margin-bottom:56px}
.servicio{
  border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
  background:var(--carbon);transition:.5s cubic-bezier(.2,.7,.3,1);position:relative;
}
.servicio:hover{transform:translateY(-4px);border-color:var(--linea-fuerte)}
.chapa{aspect-ratio:16/9;position:relative;overflow:hidden}
.chapa::after{ /* el barrido de pulido */
  content:"";position:absolute;top:-60%;left:-70%;width:45%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
  transform:rotate(19deg);transition:left 1.05s cubic-bezier(.3,.7,.3,1);
}
.servicio:hover .chapa::after{left:130%}
.laca-a{position:absolute;inset:0;background:radial-gradient(100% 70% at 24% 10%,rgba(255,255,255,.08),transparent 44%),linear-gradient(155deg,#1d1d24,#0a0a0d 58%,#15151b)}
.laca-b{position:absolute;inset:0;background:radial-gradient(100% 70% at 74% 12%,rgba(200,161,89,.16),transparent 48%),linear-gradient(200deg,#191921,#0b0b0e 60%,#101016)}
.laca-c{position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 100%,rgba(200,161,89,.13),transparent 52%),linear-gradient(120deg,#16161c,#0a0a0c 55%,#1b1b22)}
.dur{
  position:absolute;bottom:12px;right:12px;z-index:2;
  font:400 10.5px/1 var(--ui);letter-spacing:.1em;color:var(--marfil);
  background:rgba(8,8,10,.72);padding:6px 10px;border-radius:2px;backdrop-filter:blur(4px);
}
.cuerpo{padding:19px 20px 22px}
.cuerpo h3{margin-bottom:7px;transition:.35s}
.servicio:hover .cuerpo h3{color:var(--oro-claro)}
.cuerpo p{font:300 13px/1.6 var(--ui);color:var(--gris-tenue)}

/* ── cómo trabajamos ── */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:22px;margin-top:36px}
.paso{border-top:1px solid var(--linea-fuerte);padding-top:20px}
.paso .n{font:400 34px/1 var(--display);color:var(--oro-prof);margin-bottom:12px}
.paso h3{margin-bottom:8px}
.paso p{font:300 13.5px/1.6 var(--ui);color:var(--gris-tenue)}

/* ── franja de turnos ── */
.franja{
  border:1px solid var(--linea);border-radius:var(--r);padding:52px 46px;text-align:center;
  background:radial-gradient(90% 70% at 50% 0%,rgba(200,161,89,.09),transparent 62%),linear-gradient(168deg,var(--carbon-alto),var(--carbon));
}
.franja h2{margin-bottom:14px}
.franja .plomo{margin:0 auto 30px}

/* ── pie ── */
.pie{border-top:1px solid var(--linea);margin-top:40px;padding:44px 0 58px}
.pie-in{max-width:1120px;margin:0 auto;padding:0 26px;display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
.pie p,.pie a{font:300 12.5px/1.9 var(--ui);color:var(--gris-tenue);text-decoration:none}
.pie a:hover{color:var(--oro)}
.pie .tit{font:400 10px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--oro);margin-bottom:12px}

@media (max-width:760px){
  .nav{display:none}
  .portada{padding:64px 0 74px}
  .seccion{padding:60px 0}
  .franja{padding:38px 24px}
}

/* ── antes y después ─────────────────────────────────────────────────────────
   El argumento de venta del rubro. Comparador arrastrable: el "antes" se revela
   corriendo el separador. Sin JS igual se ve el después completo, que es el
   estado que vende — la degradación es hacia lo bueno, no hacia lo roto. */
.trabajos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:34px}
.trabajo{
  border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
  background:var(--carbon);transition:.5s cubic-bezier(.2,.7,.3,1);
}
.trabajo:hover{border-color:var(--linea-fuerte)}

.comparador{position:relative;aspect-ratio:4/3;overflow:hidden;isolation:isolate}
/* capa DESPUÉS: queda abajo y siempre visible */
.capa-despues{position:absolute;inset:0}
/* capa ANTES: se recorta desde la izquierda según --corte */
.capa-antes{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--corte,50%)) 0 0)}

/* pintura descuidada: opaca, gris y con marcas circulares de lavado */
.sucio-a,.sucio-b,.sucio-c{position:absolute;inset:0}
.sucio-a{background:linear-gradient(155deg,#2b2b2e,#181819 58%,#232326)}
.sucio-b{background:linear-gradient(200deg,#2e2e30,#1b1b1c 60%,#252527)}
.sucio-c{background:linear-gradient(120deg,#2a2a2c,#171718 55%,#28282b)}
.capa-antes::after{ /* swirl marks */
  content:"";position:absolute;inset:0;opacity:.5;
  background:
    repeating-radial-gradient(circle at 30% 40%,rgba(255,255,255,.055) 0 1px,transparent 1px 9px),
    repeating-radial-gradient(circle at 72% 66%,rgba(255,255,255,.045) 0 1px,transparent 1px 12px);
}

.etiqueta{
  position:absolute;top:12px;z-index:3;
  font:500 9px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;
  padding:6px 11px;border-radius:2px;pointer-events:none;
}
.eti-antes{left:12px;background:rgba(8,8,10,.78);color:var(--gris);border:1px solid rgba(255,255,255,.1)}
.eti-despues{right:12px;background:var(--oro);color:var(--negro)}

.separador{
  position:absolute;top:0;bottom:0;left:var(--corte,50%);width:2px;z-index:4;
  background:var(--oro);pointer-events:none;transform:translateX(-1px);
  box-shadow:0 0 18px rgba(200,161,89,.55);
}
.separador::after{
  content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;
  transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid var(--oro);background:rgba(8,8,10,.72);backdrop-filter:blur(4px);
}
/* el input es el control real: invisible, encima de todo, y con teclado funciona */
.tirador{
  position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none;
}
.tirador:focus-visible + .separador{box-shadow:0 0 0 3px rgba(200,161,89,.45)}

.trabajo .cuerpo p.serv{font:400 11px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--oro);margin-bottom:9px}
.trabajo .cuerpo h3{margin-bottom:7px}

/* ── contacto y ubicación ────────────────────────────────────────────────────
   Sin iframe de Google Maps a propósito: eso obligaría a abrir `frame-src` en la
   CSP y a cargar scripts de un tercero en la home. El bloque del mapa es CSS y
   el botón abre Maps en una pestaña nueva, que es lo que la gente hace igual. */
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.ficha-contacto,.mapa{
  border:1px solid var(--linea);border-radius:var(--r);
  background:linear-gradient(168deg,var(--carbon-alto),var(--carbon));
}
.ficha-contacto{padding:34px 32px}
.dato-c{padding:20px 0;border-bottom:1px solid rgba(200,161,89,.1)}
.dato-c:first-child{padding-top:0}
.dato-c:last-child{border-bottom:none;padding-bottom:0}
.dato-c .et{font:400 9.5px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--oro);margin-bottom:11px}
.dato-c p,.dato-c a{font:300 15px/1.6 var(--ui);color:var(--marfil);text-decoration:none}
.dato-c a:hover{color:var(--oro-claro)}
.dato-c .chico{font:300 13px/1.6 var(--ui);color:var(--gris-tenue)}
.horario{display:flex;justify-content:space-between;gap:16px;font:300 14px/1.9 var(--ui)}
.horario span:first-child{color:var(--gris)}
.horario span:last-child{color:var(--marfil)}

/* el "mapa": laca con una grilla de calles insinuada y el pin */
.mapa{position:relative;overflow:hidden;min-height:330px;display:grid;place-items:center}
.mapa::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(200,161,89,.07) 0 1px,transparent 1px 58px),
    repeating-linear-gradient(0deg,rgba(200,161,89,.07) 0 1px,transparent 1px 58px),
    radial-gradient(70% 55% at 50% 45%,rgba(200,161,89,.12),transparent 62%),
    linear-gradient(160deg,#15151b,#0a0a0d);
}
.mapa::after{ /* una avenida en diagonal, para que no parezca papel cuadriculado */
  content:"";position:absolute;top:-20%;left:8%;width:150%;height:26px;
  transform:rotate(28deg);background:rgba(200,161,89,.06);
}
.pin{position:relative;z-index:2;text-align:center;padding:26px}
.pin .punto{
  width:16px;height:16px;border-radius:50%;margin:0 auto 18px;position:relative;
  background:var(--oro);box-shadow:0 0 0 6px rgba(200,161,89,.14);
}
.pin .punto::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--oro);
  animation:latido 3s ease-out infinite;
}
@keyframes latido{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.6);opacity:0}}
.pin h3{font-size:20px;margin-bottom:6px}
.pin p{font:300 13.5px/1.6 var(--ui);color:var(--gris);margin-bottom:22px}

@media (max-width:760px){
  .contacto{grid-template-columns:1fr}
  .ficha-contacto{padding:26px 22px}
  .mapa{min-height:250px}
}


/* ── Precio y seña en las tarjetas de servicio ───────────────────────────── */
.servicio .precio{
  font:400 17px/1 var(--display);color:var(--oro-claro);margin-top:12px;letter-spacing:.02em;
}
.servicio .sena{
  font:300 12px/1.4 var(--ui);color:var(--gris-tenue);margin-top:7px;
}