/* RADOS Detail — vitrina pública.
 *
 * Rediseño «1a Vitrina» (08/09). La marca no cambia: laca negra y dorado,
 * Bodoni Moda + Jost. Lo que cambia es la ejecución — jerarquía, legibilidad en
 * el celular, contraste, menos texto y una tarea por pantalla.
 *
 * Regla de contraste: el gris tenue #5d5b56 NO se usa más para texto (2,9:1
 * sobre carbón, ilegible al sol). El texto secundario va en #8e8b84 (5,8:1).
 * Mínimo 13px. Botones de 44 a 56px de alto.
 */

:root{
  --negro:#08080a;
  --portal:#0b0b0e;
  --carbon:#101013;
  --carbon-alto:#17171d;
  --oro:#c8a159;
  --oro-claro:#e8ce9a;
  --oro-profundo:#8a6d33;
  --marfil:#f3f0ea;
  --gris:#8e8b84;
  --linea:rgba(200,161,89,.16);
  --linea-fuerte:rgba(200,161,89,.34);
  --error:#e08c8c;

  --display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --ui:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:2px;
  --r-tarjeta:3px;
  --ancho:1280px;
  --lado:48px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--negro);color:var(--marfil);
  font:300 16px/1.6 var(--ui);
  -webkit-font-smoothing:antialiased;
  /* Espacio para la barra fija del celular. */
  padding-bottom:0;
}
img{max-width:100%;display:block}
a{color:inherit}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 var(--lado)}

/* ── Tipografía ───────────────────────────────────────────────────────── */
h1{font:400 88px/.98 var(--display);letter-spacing:-.01em}
h1 em,h2 em,.titulo-nosotros em{font-style:italic;color:var(--oro-claro)}
h2{font:400 46px/1.08 var(--display);margin-bottom:16px}
h3{font:500 24px/1.2 var(--display)}
.kicker{
  font:400 12px/1 var(--ui);letter-spacing:.3em;text-transform:uppercase;
  color:var(--oro-claro);margin-bottom:18px;
}
.bajada{font:300 16px/1.65 var(--ui);color:var(--gris);max-width:46ch}
.link-oro{
  font:500 13px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--oro-claro);text-decoration:none;white-space:nowrap;
}
.link-oro:hover{color:var(--marfil)}
/* Un link adentro de un párrafo gris: se distingue por el color, no por un
   subrayado que pese más que el texto. */
.link-texto{color:var(--oro-claro);text-decoration:none;border-bottom:1px solid rgba(232,206,154,.4)}
.link-texto:hover{color:var(--marfil)}
/* Un texto o un botón que existe solo en un ancho. Con nombre propio del
   sitio: el portal carga esta hoja y tiene su propia «solo-angosto». El
   `.btn` va aparte porque su display (inline-flex) le ganaría al none. */
.solo-celular,.btn.solo-celular{display:none}

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 22px;border:1px solid transparent;border-radius:var(--r);
  background:var(--oro);color:var(--negro);
  font:500 13px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;transition:background .18s ease,color .18s ease;
}
.btn:hover{background:var(--oro-claro)}
.btn.grande{height:54px;padding:0 30px;font-size:14px}
.btn.ancho{width:100%}
.btn.fantasma{
  background:transparent;border-color:var(--linea-fuerte);color:var(--oro-claro);
}
.btn.fantasma:hover{background:rgba(200,161,89,.1);color:var(--marfil)}
.btn.vidrio{
  background:rgba(8,8,10,.35);border-color:rgba(243,240,234,.4);color:var(--marfil);
  backdrop-filter:blur(6px);
}
.btn.vidrio:hover{background:rgba(8,8,10,.6)}

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.tope{
  position:sticky;top:0;z-index:40;height:76px;
  background:rgba(8,8,10,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);
}
.tope-fila{display:flex;align-items:center;gap:34px;height:76px}
.marca{text-decoration:none;display:block;flex:0 0 auto}
.marca-nombre{
  display:block;font:400 22px/1.14 var(--display);letter-spacing:.28em;color:var(--marfil);
}
.marca-sub{
  display:block;margin-top:5px;font:400 9px/1 var(--ui);letter-spacing:.34em;
  text-transform:uppercase;color:var(--oro);
}
.tope-nav{display:flex;gap:30px;margin-left:24px}
.tope-nav a{
  font:300 14px/1 var(--ui);color:var(--marfil);text-decoration:none;
  transition:color .18s ease;
}
.tope-nav a:hover{color:var(--oro-claro)}
.tope-acciones{display:flex;gap:10px;margin-left:auto}

/* El menú de celular: <details>, sin JavaScript. */
.menu-movil{display:none;margin-left:auto;position:relative}
.menu-movil > summary{
  list-style:none;width:44px;height:44px;display:flex;align-items:center;
  justify-content:center;border:1px solid rgba(200,161,89,.3);border-radius:var(--r);
  cursor:pointer;
}
.menu-movil > summary::-webkit-details-marker{display:none}
.hamburguesa,.hamburguesa::before,.hamburguesa::after{
  display:block;width:18px;height:1.5px;background:var(--oro-claro);content:"";
}
.hamburguesa{position:relative}
.hamburguesa::before{position:absolute;top:-6px}
.hamburguesa::after{position:absolute;top:6px}
.menu-movil[open] > summary{background:rgba(200,161,89,.12)}
.menu-movil-caja{
  position:absolute;top:calc(100% + 12px);right:0;z-index:50;min-width:220px;
  background:var(--carbon-alto);border:1px solid var(--linea);border-radius:var(--r-tarjeta);
  box-shadow:0 18px 40px rgba(0,0,0,.6);padding:8px;display:flex;flex-direction:column;
}
.menu-movil-caja a{
  padding:14px 16px;font:300 16px/1 var(--ui);color:var(--marfil);text-decoration:none;
  border-radius:var(--r);
}
.menu-movil-caja a:hover{background:rgba(200,161,89,.12)}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{position:relative;height:640px;display:flex;align-items:flex-end;overflow:hidden}
.hero-foto{
  position:absolute;inset:0;
  background:linear-gradient(150deg,#16161c,#0c0c10 60%,#101015);
}
.hero-velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.1) 30%,rgba(8,8,10,.92));
}
.hero-cuerpo{
  position:relative;z-index:2;width:100%;display:flex;align-items:flex-end;
  justify-content:space-between;gap:48px;padding-bottom:56px;
}
.hero-texto{max-width:640px}
.hero-bajada{font:300 19px/1.55 var(--ui);color:var(--marfil);max-width:52ch;margin:22px 0 30px}
.hero-botones{display:flex;gap:14px;flex-wrap:wrap}
.hero-datos{display:flex;gap:44px;padding-bottom:6px}
/* Cada dato del hero es una pila: el número arriba, la aclaración abajo. Estaba
   funcionando de rebote porque `.dato-n` es block; escrito, el día que alguien
   toque esa regla no se desarma la portada. No cambia cómo se ve hoy. */
.dato{display:flex;flex-direction:column}
.dato-n{display:block;font:400 30px/1.14 var(--display);color:var(--oro-claro)}
.dato-l{
  display:block;margin-top:9px;font:400 12px/1.3 var(--ui);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);max-width:20ch;
}
/* Las etiquetas de 3a («Uno exclusivo para motos», «Vehículos atendidos»)
   van en una línea: el tope de 20ch era para las cortas de 1a. */
.hero-datos .dato-l,.nos-datos .dato-l,.motos-datos .dato-l{max-width:none}
.hero-datos .dato-l{color:var(--marfil);opacity:.85}
/* Las anclas del menú caen debajo de la cabecera fija (76px): las secciones
   que arrancan sin aire propio (Motos, Nosotros, el mapa) necesitan el
   margen de scroll que a las demás les da su padding. */
.seccion-motos,#nosotros,.donde{scroll-margin-top:96px}

/* ── Secciones ────────────────────────────────────────────────────────── */
.seccion{padding:96px 0}
/* El ritmo de 3a: Servicios 96/40, Cotizador 56/40, Motos 56/96 y de ahí
   en más 0/96, para que entre sección y sección haya siempre 96. */
#servicios.seccion{padding-bottom:40px}
#como.seccion,#reservar.seccion{padding-top:0}
.seccion-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px}

/* ── Las tres familias ────────────────────────────────────────────────── */
.familias{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.seccion-cab + .familias{margin-top:4px}
.familia{
  border:1px solid var(--linea);border-radius:var(--r-tarjeta);
  background:var(--carbon);overflow:hidden;display:flex;flex-direction:column;
}
.familias-seis{margin-top:4px}
.familia-foto{height:200px;position:relative;background:linear-gradient(160deg,#17171d,#0e0e12)}
.familia-foto > .foto{position:absolute;inset:0}
.familia-cuerpo{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
/* Primero la etiqueta de cómo se pide, debajo el título (rediseño 3a). */
.familia-cab{display:flex;flex-direction:column;gap:6px}
.familia-cab h3{font-size:23px;line-height:1.15}
.familia-modo{
  font:400 12px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--oro-claro);white-space:nowrap;
}
.familia-bajada{font:300 15px/1.55 var(--ui);color:var(--gris);margin:12px 0 16px}
.familia-lista{list-style:none;margin-bottom:20px}
.familia-lista li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid rgba(200,161,89,.12);
}
.familia-lista li:last-child{border-bottom:none}
.item-nombre{font:300 15px/1.3 var(--ui)}
.item-precio{font:400 15px/1 var(--ui);color:var(--oro-claro);white-space:nowrap}
/* Sin precio de lista, la celda es «Solicitar revisión»: un link que abre
   el WhatsApp con el mensaje armado. Nunca «presupuesto». */
.revision{
  font:500 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--oro);white-space:nowrap;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(200,161,89,.4);
}
.revision:hover{color:var(--oro-claro)}
.familia-cta{
  margin-top:auto;font:500 13px/1 var(--ui);letter-spacing:.14em;
  text-transform:uppercase;color:var(--oro-claro);text-decoration:none;
}
.familia-cta:hover{color:var(--marfil)}
.familia-cta-panel{cursor:pointer;display:inline-flex;align-items:center;min-height:44px;margin-bottom:-12px}
/* «Ver los N agregados»: un botón a lo ancho de la tarjeta, no un link chico
   (Thomas, 09/10: «no queda tan visible el ver todos»). */
.familia-cta-boton{justify-content:center;width:100%;margin-bottom:0;padding:0 16px;min-height:48px;
  border:1px solid var(--oro);border-radius:var(--r);background:rgba(200,161,89,.12)}
.familia-cta-boton:hover{background:var(--oro);color:var(--negro)}

/* ── El panel de agregados ─────────────────────────────────────────────
   Sin JavaScript: una casilla oculta; «Ver todos» y la × son sus labels. */
.tarjetas-y-panel{position:relative}
.panel-toggle{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.panel-toggle:focus-visible ~ .familias .familia-cta-panel{outline:2px solid var(--oro);outline-offset:4px}
.cta-cerrar,.panel-toggle:checked ~ .familias .cta-abrir{display:none}
.panel-toggle:checked ~ .familias .cta-cerrar{display:inline}
.panel-agregados{
  display:none;margin-top:20px;background:var(--carbon);border:1px solid rgba(200,161,89,.3);
  border-radius:var(--r-tarjeta);padding:32px 34px 34px;scroll-margin-top:96px;
}
.panel-toggle:checked ~ .panel-agregados{display:block;animation:desplegar .3s ease-out}
@keyframes desplegar{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.panel-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:26px}
.panel-cab .kicker{margin-bottom:12px}
.panel-cab .bajada{max-width:70ch;margin-top:12px}
.panel-titulo{font:400 34px/1.05 var(--display);letter-spacing:-.01em}
.panel-cerrar{
  flex:none;display:grid;place-items:center;width:44px;height:44px;cursor:pointer;
  border:1px solid var(--linea-fuerte);border-radius:var(--r);color:var(--oro-claro);
  font:300 22px/1 var(--ui);
}
.panel-cerrar:hover{background:rgba(200,161,89,.1)}
.agregados{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.agregado{
  display:flex;flex-direction:column;background:var(--negro);border:1px solid var(--linea);
  border-radius:var(--r-tarjeta);overflow:hidden;min-width:0;
}
.agregado-foto{height:170px;position:relative}
.agregado-foto > .foto{position:absolute;inset:0}
.agregado figcaption{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.agregado h4{font:500 18px/1.2 var(--display)}
.agregado-nombre{color:var(--marfil);text-decoration:none}
.agregado-nombre:hover{color:var(--oro-claro)}
.agregado-texto{font:300 13.5px/1.5 var(--ui);color:var(--gris)}
.chip-garantia{
  align-self:flex-start;display:inline-flex;align-items:center;min-height:24px;padding:0 8px;
  border:1px solid rgba(200,161,89,.4);border-radius:var(--r);margin-top:2px;
  font:500 10.5px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--oro-claro);
}
.agregado-condicion{font:300 12.5px/1.45 var(--ui);color:var(--gris);margin-top:2px}
.agregado-condicion span{font-weight:400;color:var(--oro-claro)}
.agregado-pie{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-top:auto;padding-top:10px;border-top:1px solid rgba(200,161,89,.12);
}
.agregado-dura{font:300 12.5px/1 var(--ui);color:var(--gris)}
.agregado-precio{font:400 18px/1 var(--display);color:var(--oro-claro);white-space:nowrap}
.panel-pie{display:flex;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap}
.panel-pie .btn.grande{height:50px;padding:0 24px;font-size:13px}
.panel-nota{font:300 13px/1.4 var(--ui);color:var(--gris)}

/* ── Antes y después: fundido ──────────────────────────────────────────
   Thomas, 08/10: «la transición del antes y el después no me gusta». En vez
   del barrido con la línea dorada (había que pasar el mouse y arrancaba en
   el «antes»), se alternan SOLOS con un fundido: el «después» (el
   resultado) 4 s, el «antes» 2 s. Sin JavaScript. El chip dice cuál se ve;
   tocarlo deja fijo el «antes» y es la forma de parar el movimiento. Las
   clases siguen llamándose «barrido» (las usan la vista previa y las
   pruebas). */
.barrido{position:absolute;inset:0}
/* El antes y después de la página de un servicio (08/10): un marco con la
   proporción de una foto apaisada, para que el par tenga dónde vivir. */
.servicio-par-seccion{padding-bottom:0}
.servicio-par{position:relative;aspect-ratio:16/10;max-width:820px;margin-top:14px;
  border-radius:var(--r);overflow:hidden;background:var(--carbon)}
.barrido-fijo{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.barrido-despues{
  position:absolute;inset:0;background:var(--carbon);
  animation:fundido 8s ease-in-out var(--desfase,0s) infinite;
}
.barrido-despues .medio-web{width:100%;height:100%;object-fit:cover}
.barrido-chip{
  position:absolute;top:10px;left:10px;z-index:3;display:inline-grid;align-items:center;
  min-height:30px;padding:0 10px;border-radius:var(--r);cursor:pointer;
  background:rgba(8,8,10,.8);color:var(--marfil);
  font:500 10px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
}
/* Las dos palabras en la misma celda: el chip no cambia de ancho. */
.barrido-chip > span{grid-area:1/1}
.barrido-t-despues{color:var(--oro-claro);animation:fundido 8s ease-in-out var(--desfase,0s) infinite}
.barrido-t-antes{opacity:0;animation:fundido-antes 8s ease-in-out var(--desfase,0s) infinite}
@keyframes fundido{0%,50%{opacity:1}60%,88%{opacity:0}98%,100%{opacity:1}}
@keyframes fundido-antes{0%,50%{opacity:0}60%,88%{opacity:1}98%,100%{opacity:0}}
/* Fijo en el «antes» (el chip tocado). */
.barrido-fijo:checked ~ .barrido-despues,.barrido-fijo:checked ~ .barrido-chip > span{animation:none}
.barrido-fijo:checked ~ .barrido-despues,.barrido-fijo:checked ~ .barrido-chip .barrido-t-despues{opacity:0}
.barrido-fijo:checked ~ .barrido-chip .barrido-t-antes{opacity:1}
.barrido-fijo:checked ~ .barrido-chip{background:var(--oro);color:var(--negro)}
.barrido-fijo:focus-visible ~ .barrido-chip{outline:2px solid var(--oro);outline-offset:2px}
/* Dos pares lado a lado no se alternan al mismo tiempo. */
.familia:nth-child(2n) .barrido,.agregado:nth-child(2n) .barrido{--desfase:-3s}

/* ── Cotizador ────────────────────────────────────────────────────────── */
.seccion-cotizador{padding-top:56px;padding-bottom:40px}
.cotizador{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;
  background:linear-gradient(168deg,#17171d,#101013);
  border:1px solid rgba(200,161,89,.2);border-radius:var(--r-tarjeta);padding:44px 48px;
}
.cotizador-izq{min-width:0}
.cotizador-der{min-width:0;border-left:1px solid rgba(200,161,89,.2);padding-left:56px}
.cotizador h2{font-size:40px}
.cotizador .bajada{margin:18px 0 28px}
.tamanos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.tamano{
  display:block;padding:16px 18px;border:1px solid rgba(200,161,89,.3);
  border-radius:var(--r);background:var(--negro);text-decoration:none;
  transition:background .18s ease,border-color .18s ease;
}
.tamano:hover{border-color:var(--oro)}
.tamano-nombre{display:block;font:500 16px/1 var(--ui);color:var(--marfil)}
.tamano-ej{display:block;margin-top:6px;font:300 13px/1 var(--ui);color:var(--gris)}
.tamano.elegido{background:var(--oro);border-color:var(--oro)}
.tamano.elegido .tamano-nombre,.tamano.elegido .tamano-ej{color:var(--negro)}
.cotizador-titulo{
  font:400 12px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris);margin-bottom:22px;
}
.tarifa-lista{list-style:none}
.tarifa-lista li{
  display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid rgba(200,161,89,.14);
}
.tarifa-lista .tarifa-nombre{font:400 17px/1.3 var(--ui)}
.tarifa-lista .tarifa-dura{font:300 13px/1 var(--ui);color:var(--gris)}
.tarifa-lista .tarifa-precio{font:400 22px/1 var(--display);color:var(--oro-claro);min-width:120px;text-align:right;white-space:nowrap}
.cotizador-pie{display:flex;gap:12px;align-items:center;margin-top:26px;flex-wrap:wrap}
.cotizador-pie .btn.grande{height:50px;padding:0 24px;font-size:13px}
.nota-sena{font:300 13px/1.4 var(--ui);color:var(--gris)}

/* Toda foto o video de Gestión (sitio/_medio_web.html) llena su marco. */
.medio-web{width:100%;height:100%;object-fit:cover;display:block}

/* ── Fotos ────────────────────────────────────────────────────────────────
   Toda foto del sitio es un <img> con object-fit:cover adentro de un marco
   con fondo neutro: hasta que lleguen las reales, el archivo es un JPG liso
   del color del marco, así nunca hay un recuadro vacío ni un ícono roto. */
.foto{position:relative;overflow:hidden;background:var(--carbon);min-width:0}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
/* El marco va encima de la imagen: así también se ve sobre una tarjeta del
   mismo color (los retratos, los famosos, la moto) mientras el archivo es
   un placeholder liso. */
.foto::after{
  content:"";position:absolute;inset:0;border:1px solid var(--linea);
  border-radius:inherit;pointer-events:none;
}

/* ── Motos (rediseño 3a) ────────────────────────────────────────────────── */
.seccion-motos{padding:56px 0 96px}
.motos{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--carbon);border:1px solid rgba(200,161,89,.2);
  border-radius:var(--r-tarjeta);overflow:hidden;
}
.motos-foto{min-height:560px}
.motos-cuerpo{padding:48px 48px 44px;display:flex;flex-direction:column;gap:18px}
.motos-cuerpo .kicker{margin-bottom:0}
.motos-cuerpo h2,.motos-cuerpo h1{font:400 46px/1.05 var(--display);letter-spacing:-.01em;margin:0}
.motos-texto{font:300 16px/1.6 var(--ui);color:var(--gris)}
.motos-datos{display:flex;gap:32px;padding:18px 0 6px;border-top:1px solid var(--linea)}
.motos-datos .dato-n{font-size:22px}
.motos-datos .dato-l{margin-top:7px;font-size:11px}
.motos-lista{list-style:none}
.motos-lista li{
  display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid rgba(200,161,89,.14);
}
/* El nombre es un link: la zona tocable se estira a 44px con padding que
   se compensa con margen negativo, sin agrandar la fila. */
.motos-nombre{
  display:inline-block;padding:12px 0;margin:-12px 0;
  font:400 17px/1.3 var(--ui);color:var(--marfil);text-decoration:none;
}
.motos-nombre:hover{color:var(--oro-claro)}
.motos-dura{font:300 13px/1 var(--ui);color:var(--gris)}
.motos-precio{font:400 22px/1 var(--display);color:var(--oro-claro);min-width:140px;text-align:right;white-space:nowrap}
.motos-revision{justify-self:end}
.motos-nota{font:300 13px/1.5 var(--ui);color:var(--gris)}
.motos-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.motos-cta .link-oro{display:inline-flex;align-items:center;min-height:44px}
.motos-cta .btn.grande{height:52px;padding:0 26px;font-size:13px}

/* ── Cómo trabajamos ──────────────────────────────────────────────────── */
.como{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:start}
/* La columna izquierda del «cómo trabajamos». `min-width:0` es lo que evita que
   una palabra larga estire la grilla y se lleve puesto el ancho de la derecha:
   es el defecto de los hijos de un grid. Tampoco cambia cómo se ve hoy. */
.como-izq{min-width:0}
.pasos{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pasos li{border-top:1px solid var(--linea-fuerte);padding-top:20px}
.paso-n{display:block;font:400 40px/1.14 var(--display);color:var(--oro)}
.paso-t{display:block;margin:14px 0 8px;font:500 19px/1.2 var(--display)}
.paso-d{display:block;font:300 14px/1.6 var(--ui);color:var(--gris)}

/* ── Nosotros (rediseño 3a) ─────────────────────────────────────────────
   Cuatro bloques: presentación con el mosaico, la línea de tiempo, el staff
   y quiénes pasaron por el taller, y el mapa con los datos. */
#nosotros.seccion{padding-top:0}
.nos-presenta{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.nos-presenta h2{margin-bottom:0}
.nos-texto{font:300 16px/1.6 var(--ui);color:var(--gris);margin-top:20px}
.nos-texto + .nos-texto{margin-top:14px}
.nos-datos{display:flex;gap:36px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(200,161,89,.2)}
.mosaico{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:150px;gap:10px}
.mosaico-foto{border-radius:var(--r-tarjeta)}
.mosaico-foto:first-child{grid-column:span 4;grid-row:span 2}
.mosaico-foto:not(:first-child){grid-column:span 2}

/* ── La historia (rediseño 3a): cuatro capítulos ─────────────────────── */
.historia{margin-top:80px}
.historia-cab{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  margin-bottom:40px;padding-bottom:22px;border-bottom:1px solid var(--linea-fuerte);
}
.historia-cab .kicker{margin-bottom:14px}
.historia-titulo{font:400 40px/1.05 var(--display);letter-spacing:-.01em}
.historia-cab-der{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.historia-bajada{font:300 15px/1.55 var(--ui);color:var(--gris);max-width:44ch}
.capitulo{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start;scroll-margin-top:96px}
.capitulo + .capitulo{margin-top:64px;padding-top:56px;border-top:1px solid var(--linea)}
.capitulo-texto{min-width:0}
.capitulo-numeral{display:block;font:400 64px/1 var(--display);color:var(--oro)}
.capitulo-era{font:400 12px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--oro-claro);margin-top:18px}
.capitulo-titulo{font:500 26px/1.15 var(--display);margin-top:10px}
.capitulo-cuerpo{font:300 15px/1.6 var(--ui);color:var(--gris);margin-top:14px}
.capitulo-link{display:inline-flex;align-items:center;min-height:44px;margin-top:18px}
.capitulo-medios{min-width:0}
.capitulo-medios figcaption{font:300 13px/1.5 var(--ui);color:var(--gris);margin-top:12px}
.capitulo-fotos{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:170px}
.capitulo-fotos-1{grid-template-columns:1fr;grid-auto-rows:350px}
.capitulo-fotos-2{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:260px}
.capitulo-fotos-4{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:190px}
.capitulo-fotos-8{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:170px}
.capitulo-foto{border-radius:var(--r-tarjeta)}
.capitulo-sin-foto{height:260px}
/* El capítulo con video (la nota de TN): un reel vertical 9:16 que nunca se
   recorta, centrado con su texto. */
.capitulo-video{grid-template-columns:minmax(0,1fr) 396px;align-items:center}
.marco-video{
  position:relative;width:396px;max-width:100%;aspect-ratio:9/16;overflow:hidden;
  background:var(--carbon);border:1px solid rgba(200,161,89,.2);border-radius:var(--r-tarjeta);
}
.video-capitulo{width:100%;height:100%;object-fit:contain;display:block;background:var(--carbon)}
.marco-etiqueta{
  position:absolute;top:14px;left:14px;padding:8px 10px;border-radius:var(--r);pointer-events:none;
  font:500 11px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;background:var(--oro);color:var(--negro);
}
.boton-sonido{
  position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 12px;border:1px solid rgba(200,161,89,.34);border-radius:var(--r);cursor:pointer;
  background:rgba(8,8,10,.78);color:var(--oro-claro);font:500 11px/1 var(--ui);letter-spacing:.06em;
}
.boton-sonido.con-sonido{background:var(--oro);border-color:var(--oro);color:var(--negro)}
/* El de la portada: arriba a la derecha, por encima del velo, para no tapar
   los textos ni los datos (08/10). */
.boton-pausa{
  position:absolute;right:16px;top:16px;z-index:3;height:32px;padding:0 12px;cursor:pointer;
  border:1px solid rgba(200,161,89,.34);border-radius:var(--r);
  background:rgba(8,8,10,.6);color:var(--oro-claro);font:500 11px/1 var(--ui);letter-spacing:.08em;
}
.boton-pausa:hover,.boton-pausa:focus-visible{background:rgba(8,8,10,.85);border-color:var(--oro)}
.boton-sonido svg{width:14px;height:14px;fill:currentColor}

.gente{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:64px}
.gente-tarjeta{
  background:var(--carbon);border:1px solid var(--linea);border-radius:var(--r-tarjeta);
  padding:32px 34px;display:flex;flex-direction:column;
}
.gente-tarjeta .kicker{margin-bottom:10px}
.gente-tarjeta h3{font:400 28px/1.1 var(--display);margin-bottom:22px}
.staff,.famosos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.retrato{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;text-align:center}
.retrato-foto{width:100%;aspect-ratio:1;border-radius:50%}
.retrato figcaption{font:400 15px/1.3 var(--ui)}
.famoso{min-width:0}
.famoso-foto{height:130px;border-radius:var(--r)}
.famoso figcaption{font:400 12px/1.4 var(--ui);color:var(--gris);margin-top:8px}
.gente-link{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;min-height:44px}

.donde{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px;margin-top:20px}
/* El mapa de Google embebido, oscurecido con un filtro para que no sea un
   rectángulo blanco en la página negra (el pin cambia de color; aceptable). */
.donde-mapa{position:relative;min-height:340px;border:1px solid var(--linea);border-radius:var(--r-tarjeta);background:#0d0d10;overflow:hidden}
.mapa-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.9) hue-rotate(180deg) grayscale(.3) brightness(.85)}
.donde-tarjeta{
  background:var(--carbon);border:1px solid var(--linea);border-radius:var(--r-tarjeta);
  padding:30px 32px;display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;align-content:start;
}
.donde-tarjeta .donde-titulo{margin:0 0 8px;color:var(--oro);letter-spacing:.2em}
.donde-tarjeta .donde-dato{display:block;font:400 20px/1.2 var(--display);color:var(--marfil);text-decoration:none}
.donde-tarjeta a.donde-dato:hover{color:var(--oro-claro)}
.donde-tarjeta .donde-sub{font:300 15px/1.4 var(--ui);color:var(--gris)}
/* El horario abierto en marfil; «Domingos · Cerrado» en gris. Misma
   especificidad que la regla de arriba, y después, para ganarle. */
.donde-tarjeta .donde-sub-fuerte{color:var(--marfil)}
.donde-botones{grid-column:1 / -1;display:flex;gap:8px}
.donde-botones .btn{height:48px}

/* ── Reservá ──────────────────────────────────────────────────────────── */
/* Una sola tarjeta (3a): el texto a la izquierda, el formulario a la derecha. */
.reserva{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start;
  background:var(--carbon);border:1px solid rgba(200,161,89,.2);
  border-radius:var(--r-tarjeta);padding:40px 44px;
}
.reserva-texto{min-width:0}
.reserva-texto .kicker{margin-bottom:14px}
.reserva-texto h2{font-size:40px;margin-bottom:0}
.reserva-bajada{font:300 15px/1.55 var(--ui);color:var(--gris);margin-top:14px}
.reserva-nota{
  font:300 13px/1.5 var(--ui);color:var(--gris);margin-top:22px;padding-top:18px;
  border-top:1px solid var(--linea);
}
.reserva-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;align-content:start}
/* El botón va al ancho de su texto en la PC (en el celular ocupa todo). */
.reserva-form .campo-ancho{margin-top:8px;align-items:flex-start}
.campo{display:flex;flex-direction:column}
.campo-ancho{grid-column:1 / -1}
.campo label,.etiqueta-campo{
  font:400 12px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);margin-bottom:10px;
}
/* El `:not([type=checkbox])` no es para esta pantalla: acá no hay ninguna
   casilla de tildar. Es porque el portal carga TAMBIÉN esta hoja, y esta regla
   —escrita para el formulario de reserva, donde todo campo es texto— le daba
   50px de alto y ancho completo a las casillas de las pantallas de gestión. En
   la de un servicio hay ocho, y salían como ocho cuadrados enormes en columna. */
.campo input:not([type=checkbox]),.campo select{
  height:50px;padding:0 14px;background:var(--negro);
  border:1px solid rgba(200,161,89,.24);border-radius:var(--r);
  color:var(--marfil);font:300 15px/1 var(--ui);width:100%;
}
.campo input:not([type=checkbox]):focus,.campo select:focus{
  outline:none;border-color:var(--oro);box-shadow:0 0 0 3px rgba(200,161,89,.12);
}
.segmentado{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.segmento{position:relative;display:block}
.segmento input{position:absolute;opacity:0;width:0;height:0}
.segmento span{
  display:flex;align-items:center;justify-content:center;height:50px;
  border:1px solid rgba(200,161,89,.24);border-radius:var(--r);
  font:300 15px/1 var(--ui);color:var(--marfil);cursor:pointer;
}
.segmento input:checked + span{background:var(--oro);border-color:var(--oro);color:var(--negro)}
.segmento input:focus-visible + span{box-shadow:0 0 0 3px rgba(200,161,89,.3)}

/* Base de los datos del mapa (la tarjeta de Nosotros los afina arriba). */
.donde-titulo{
  font:400 12px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris);margin:22px 0 10px;
}
.donde-dato{font:500 20px/1.2 var(--display)}
.donde-sub{font:300 14px/1.7 var(--ui);color:var(--gris)}

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--linea);padding:56px 0 40px}
.pie > .contenedor{display:flex;flex-direction:column;align-items:center;gap:28px}
/* #daleafondo: Bodoni itálica con el dorado en degradado recortado al texto.
   El degradado vive entero adentro del @supports: si el navegador no recorta
   fondos al texto, no pinta ningún fondo y queda dorado liso. */
.hashtag{display:inline-flex;align-items:center;gap:20px;text-decoration:none}
.hashtag-texto{
  display:inline-block;font:italic 400 72px/1 var(--display);letter-spacing:-.01em;
  color:var(--oro);
}
/* El cohete va en su propio span, fuera del degradado, para conservar su color. */
.hashtag-cohete{font-size:52px;line-height:1}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hashtag-texto{
    background:linear-gradient(100deg,#8a6d33 0%,#c8a159 35%,#f3e3b5 52%,#c8a159 68%,#8a6d33 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
  }
}
.pie-fila{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--linea);
}
.pie .marca-nombre{font-size:18px}
.pie-detail{font:400 10px/1 var(--ui);letter-spacing:.3em;color:var(--oro);margin-left:6px;vertical-align:middle}
.pie-datos{font:300 14px/1.6 var(--ui);color:var(--gris)}
.pie-datos a{color:var(--marfil);text-decoration:none}
.pie-datos a:hover{color:var(--oro-claro)}

/* ── Barra fija del celular ───────────────────────────────────────────── */
.barra-fija{display:none}

/* ── Tablet angosta (768 a 1024): la portada de escritorio, más apretada ── */
@media (max-width:1024px){
  :root{--lado:32px}
  .familias{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agregados{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cotizador{grid-template-columns:1fr;gap:28px;padding:32px 28px}
  .cotizador-der{border-left:none;padding-left:0;border-top:1px solid rgba(200,161,89,.2);padding-top:28px}
  .motos{grid-template-columns:1fr}
  .motos-foto{min-height:0;height:320px}
  .pasos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nos-presenta{grid-template-columns:1fr;gap:32px}
  .capitulo,.capitulo-video{grid-template-columns:1fr;gap:24px}
  .marco-video{margin:0 auto}
  .gente{grid-template-columns:1fr}
  .donde{grid-template-columns:1fr}
  .reserva{grid-template-columns:1fr;gap:28px}
  .tope-nav{gap:20px}
}

/* ── Celular (menos de 768: el corte del cliente) ─────────────────────── */
@media (max-width:767px){
  :root{--lado:18px}
  h1{font-size:50px}
  h2{font-size:32px}
  .seccion{padding:56px 0}

  .tope-nav,.tope-acciones{display:none}
  .menu-movil{display:block}
  /* La cabecera de 5a: 60px, wordmark 19/8. */
  .tope,.tope-fila{height:60px}
  .marca-nombre{font-size:19px}
  .marca-sub{font-size:8px;margin-top:3px}

  .hero{height:520px}
  .hero-cuerpo{flex-direction:column;align-items:flex-start;gap:26px;padding-bottom:34px}
  .hero-bajada{font-size:16px;margin:18px 0 24px}
  .hero-botones{width:100%}
  .hero-botones .btn{flex:1}
  .hero-datos{gap:28px}
  .dato-n{font-size:22px}
  .dato-l{font-size:11px}

  .familias{grid-template-columns:1fr;gap:16px}
  .familia-foto{height:150px}
  .panel-agregados{padding:18px 16px;scroll-margin-top:84px}
  .panel-titulo{font-size:24px}
  .agregados{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .agregado-foto{height:120px}
  .agregado figcaption{padding:10px 10px 12px;gap:5px}
  .agregado h4{font-size:15px}
  .agregado-texto{font-size:12px}
  .agregado-precio{font-size:16px}
  .panel-pie .btn.grande{width:100%;height:52px}

  .seccion-motos{padding:0 0 56px}
  .motos{grid-template-columns:1fr}
  .motos-foto{min-height:0;height:190px}
  .motos-cuerpo{padding:20px 18px 22px;gap:10px}
  .motos-cuerpo h2,.motos-cuerpo h1{font-size:30px}
  .motos-texto{font-size:14px}
  .motos-datos{display:none}
  .motos-lista li{grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0}
  .motos-nombre{font-size:15px}
  .motos-dura{grid-column:1;grid-row:2;font-size:12px}
  .motos-precio{grid-row:1 / span 2;align-self:center;font-size:19px;min-width:0}
  .motos-nota{text-align:center;font-size:12.5px;order:3}
  .motos-cta{flex-direction:column;align-items:stretch;order:2;padding-top:10px}
  .motos-cta .btn.grande{width:100%}
  /* En el celular la banda termina en el botón y la nota (diseño 3a). */
  .motos-cta .link-oro{display:none}

  .cotizador{grid-template-columns:1fr;gap:24px;padding:28px 22px}
  .cotizador-der{border-left:none;padding-left:0;border-top:1px solid rgba(200,161,89,.2);padding-top:24px}
  .cotizador h2{font-size:28px}
  .tarifa-lista li{grid-template-columns:1fr auto;gap:2px 12px}
  .tarifa-lista .tarifa-dura{grid-column:1;grid-row:2}
  .tarifa-lista .tarifa-precio{grid-row:1 / span 2;align-self:center;min-width:0;font-size:19px}
  .cotizador-pie .btn.grande{width:100%}
  .tamanos{grid-template-columns:repeat(4,1fr);gap:8px}
  .tamano{height:56px;padding:8px 6px;text-align:center;display:flex;
          flex-direction:column;justify-content:center}
  .tamano-nombre{font-size:14px}
  .tamano-ej{font-size:11px;margin-top:3px}
  .solo-escritorio{display:none}
  .solo-celular{display:inline}
  .btn.solo-celular{display:inline-flex}
  /* Con 56px de padding la cabecera de 76px tapa el kicker: se compensa. */
  .seccion{scroll-margin-top:28px}
  .seccion-motos,#nosotros,.donde{scroll-margin-top:84px}

  .seccion-cab{flex-direction:column;align-items:flex-start;gap:14px}

  .como{grid-template-columns:1fr;gap:30px}
  .pasos{grid-template-columns:1fr;gap:0}
  .pasos li{
    border-top:none;border-bottom:1px solid var(--linea);
    display:grid;grid-template-columns:52px 1fr;gap:0 16px;padding:18px 0;
  }
  .paso-n{grid-row:1 / span 2;font-size:30px}
  .paso-t{margin:0 0 6px}

  /* Nosotros apilado (3a celular): mosaico de 2 columnas con tres fotos,
     historia como línea vertical, staff en grilla de 4, famosos en una fila
     con scroll, mapa con dos botones. */
  /* El bloque de texto se aplana (display:contents) para que el mosaico
     entre antes de los datos; la grilla queda sin gap y mandan los márgenes
     de cada pieza, si no se sumarían los dos. */
  .nos-presenta{grid-template-columns:1fr;gap:0}
  .nos-presenta .kicker{margin-bottom:12px}
  .nos-presenta h2{font-size:32px}
  .nos-texto{font-size:15px;margin-top:14px}
  .nos-datos{gap:28px;margin-top:20px;padding-top:16px}
  .nos-datos .dato-n{font-size:24px}
  .nos-datos .dato-l{font-size:11px;margin-top:6px}
  .nos-presenta > div:first-child{display:contents}
  .mosaico{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;order:1;margin-top:20px}
  .mosaico-foto:first-child{grid-column:span 2;grid-row:span 1}
  .mosaico-foto:not(:first-child){grid-column:span 1}
  /* Tres fotos: el staff a todo el ancho, el box de motos y el frente (la
     última del mosaico). */
  .mosaico-foto:nth-child(n+3):not(:last-child){display:none}
  .nos-datos{order:2}

  /* minmax(0,1fr): la fila de famosos (4 × 150px) no puede ensanchar la
     tarjeta ni la página; scrollea adentro. */
  .historia{margin-top:36px}
  .historia-cab{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:28px;padding-bottom:16px}
  .historia-titulo{font-size:28px}
  .historia-cab-der{align-items:flex-start;text-align:left}
  .capitulo,.capitulo-video{grid-template-columns:1fr;gap:18px}
  .capitulo + .capitulo{margin-top:32px;padding-top:28px}
  .capitulo-numeral{font-size:40px}
  .capitulo-titulo{font-size:21px}
  .capitulo-cuerpo{font-size:14px}
  .capitulo-fotos,.capitulo-fotos-8{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:110px}
  .capitulo-fotos-1{grid-template-columns:1fr;grid-auto-rows:220px}
  .capitulo-fotos-2,.capitulo-fotos-4{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:130px}
  .capitulo-sin-foto{height:180px}
  .marco-video{width:min(100%,300px);margin:0 auto}
  .gente{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:36px}
  .gente-tarjeta{padding:20px 18px;min-width:0}
  .gente-tarjeta h3{font-size:24px;margin-bottom:16px}
  .staff{gap:8px}
  .retrato{gap:8px}
  .retrato figcaption{font-size:13px}
  /* «Pasaron por el taller» va suelto en el celular (diseño 3a): sin
     tarjeta, sin el link a Instagram, y la fila sangra hasta el borde de la
     pantalla para que la tercera foto asome. */
  .gente-tarjeta:last-child{background:none;border:none;border-radius:0;padding:0}
  .gente-tarjeta:last-child .gente-link{display:none}
  .famosos{
    display:flex;gap:8px;overflow-x:auto;padding:0 var(--lado) 4px;
    margin:0 calc(-1 * var(--lado));min-width:0;scrollbar-width:none;
  }
  .famosos::-webkit-scrollbar{display:none}
  .famoso{flex:none;width:150px}
  .famoso-foto{height:150px}
  .famoso figcaption{margin-top:6px}

  .donde{grid-template-columns:1fr;gap:0;margin-top:32px;
         background:var(--carbon);border:1px solid var(--linea);border-radius:var(--r-tarjeta);overflow:hidden}
  .donde-mapa{min-height:0;height:260px;border:none;border-radius:0}
  .donde-tarjeta{border:none;border-radius:0;grid-template-columns:1fr;gap:14px;padding:20px 18px 22px}
  .donde-tarjeta .donde-dato{font-size:19px}
  .donde-tarjeta .donde-sub{font-size:14px}
  .donde-dato-bloque:nth-child(n+3){display:none}
  .donde-botones .btn{font-size:12px;padding:0 10px}

  .reserva{grid-template-columns:1fr;gap:20px;padding:24px 18px}
  .reserva-texto h2{font-size:28px}
  .reserva-form{grid-template-columns:1fr;gap:12px}
  .reserva-form .campo-ancho .btn{width:100%;height:56px}

  .pie{padding:36px 0 96px}
  .pie > .contenedor{gap:22px}
  .hashtag{gap:12px}
  .hashtag-texto{font-size:44px}
  .hashtag-cohete{font-size:32px}
  .pie-fila{flex-direction:column;align-items:flex-start;gap:12px;padding-top:20px}

  .barra-fija{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;height:64px;
    align-items:center;gap:10px;padding:0 14px;
    background:rgba(8,8,10,.94);backdrop-filter:blur(10px);
    border-top:1px solid rgba(200,161,89,.24);
  }
  .barra-fija .btn{height:44px}
  .barra-principal{flex:1.4}
  .barra-fija .fantasma{flex:1}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
  /* El fundido del antes y después corre igual: es solo opacidad, nada se
     desplaza (Thomas, 08/10: su PC tiene «reducir movimiento»). */
  .barrido-despues,.barrido-t-despues{animation:fundido 8s ease-in-out var(--desfase,0s) infinite !important}
  .barrido-t-antes{animation:fundido-antes 8s ease-in-out var(--desfase,0s) infinite !important}
  .barrido-fijo:checked ~ .barrido-despues,.barrido-fijo:checked ~ .barrido-chip > span{animation:none !important}
}

/* Para quien usa lector de pantalla: la tabla necesita titulo, la pantalla no. */
.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}


/* ── La página de un servicio (/servicios/<slug>/) ───────────────────────
   Misma familia visual que la portada: la frase grande en Bodoni, los datos
   en Jost, el dorado solo donde hay que mirar. El h1 es el nombre del
   servicio, que es la palabra clave. */
.titular{font:400 88px/.98 var(--display);letter-spacing:-.01em;color:var(--marfil);margin:0 0 22px}
.titular em{font-style:italic;color:var(--oro-claro)}
h1.hero-bajada{font:300 19px/1.55 var(--ui);color:var(--marfil);letter-spacing:0;max-width:52ch;margin:0 0 34px}
.servicio-hero{padding:120px 0 56px;border-bottom:1px solid var(--linea);background:linear-gradient(180deg,var(--carbon) 0%,var(--negro) 100%)}
/* Con foto del servicio cargada, el hero la lleva de fondo, con el velo de la portada. */
.servicio-hero-con-foto{position:relative;overflow:hidden}
.servicio-hero-foto{position:absolute;inset:0}
.servicio-hero-cuerpo{position:relative;z-index:2}
.servicio-chip{margin:-24px 0 24px}
.servicio-condicion{max-width:60ch;margin:-24px 0 32px}
.migas{display:flex;gap:10px;align-items:center;font:300 13px/1 var(--ui);color:var(--gris);margin-bottom:34px}
.migas a{color:var(--gris);text-decoration:none}
.migas a:hover{color:var(--oro-claro)}
.servicio-hero h1{font:400 64px/1.02 var(--display);color:var(--marfil);letter-spacing:-.01em;max-width:18ch;margin:0 0 20px}
.servicio-modo{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline;font:300 16px/1.55 var(--ui);color:var(--gris);max-width:60ch;margin:0 0 30px}
.servicio-desde{margin:0 0 34px}
.servicio-desde .dato-n{font-size:40px}
.servicio-columnas{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.servicio-texto{font:300 16px/1.7 var(--ui);color:var(--marfil);max-width:60ch;margin:0 0 44px;white-space:pre-line}
.pasos-servicio{grid-template-columns:repeat(2,minmax(0,1fr))}
.tarifa{border:1px solid var(--linea-fuerte);border-radius:var(--r-tarjeta);background:var(--carbon);padding:32px 34px;position:sticky;top:96px}
.tarifa-tabla{width:100%;border-collapse:collapse;margin:6px 0 18px}
.tarifa-tabla th,.tarifa-tabla td{padding:14px 0;border-bottom:1px solid var(--linea);text-align:left;vertical-align:baseline}
.tarifa-tabla tr:last-child th,.tarifa-tabla tr:last-child td{border-bottom:none}
.tarifa-tabla th{font:400 17px/1.2 var(--ui);color:var(--marfil)}
.tarifa-ej{display:block;font:300 13px/1.4 var(--ui);color:var(--gris)}
.tarifa-dur{font:300 13px/1.4 var(--ui);color:var(--gris);white-space:nowrap;padding-right:16px}
.tarifa-precio{font:400 22px/1.14 var(--display);color:var(--oro-claro);text-align:right;white-space:nowrap}
.tarifa-nota{font:300 13.5px/1.6 var(--ui);color:var(--gris);margin:0 0 16px}
.tarifa .btn.ancho{margin-top:10px}
.hermanos{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.hermanos li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--linea)}
.hermanos a{font:400 17px/1.3 var(--ui);color:var(--marfil);text-decoration:none}
.hermanos a:hover{color:var(--oro-claro)}
.donde-fila{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.familia-lista .item-nombre{color:var(--marfil);text-decoration:none}
.familia-lista .item-nombre:hover{color:var(--oro-claro)}
@media (max-width:767px){
  .servicio-columnas{grid-template-columns:1fr;gap:40px}
  .tarifa{position:static}
  .hermanos{grid-template-columns:1fr}
  .donde-fila{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .titular{font-size:50px}
  .servicio-hero{padding:96px 0 40px}
  .servicio-hero h1{font-size:40px}
  .servicio-desde .dato-n{font-size:30px}
  .pasos-servicio{grid-template-columns:1fr}
  .tarifa{padding:24px 20px}
}

/* ── La portada del celular (rediseño 5a) ─────────────────────────────────
   Es otra plantilla (home_celular.html): hero con chips, cinta, la tira de
   trabajos recientes, los servicios como lista con miniatura, Motos, el
   proceso en 2×2 y Nosotros corto. Estas reglas viven fuera de la media
   query porque esa plantilla solo baja al teléfono; igual, todo es de una
   columna. */
.hero-cel{height:560px}
.hero-velo-cel{background:linear-gradient(180deg,rgba(8,8,10,.05) 20%,rgba(8,8,10,.55) 55%,rgba(8,8,10,.96))}
.hero-cuerpo-cel{flex-direction:column;align-items:flex-start;padding-bottom:22px}
.hero-cel .kicker{font-size:11px;margin-bottom:12px}
.hero-cel .titular{font-size:52px;letter-spacing:-.02em}
.hero-cel .hero-bajada{font-size:15px;margin:14px 0 0}
.hero-chips{display:flex;gap:8px;margin-top:18px;width:100%}
.chip-hero{
  flex:1;padding:10px 12px;border:1px solid rgba(200,161,89,.3);border-radius:var(--r);
  background:rgba(8,8,10,.45);backdrop-filter:blur(6px);display:flex;flex-direction:column;
}
.chip-hero:last-child{flex:1.3}
.chip-hero .dato-n{font-size:20px}
.chip-hero .dato-l{font-size:10px;margin-top:6px;color:var(--marfil);opacity:.85;max-width:none}

.cinta{
  height:40px;display:flex;align-items:center;overflow:hidden;background:var(--portal);
  border-top:1px solid rgba(200,161,89,.2);border-bottom:1px solid rgba(200,161,89,.2);
}
.cinta-fila{display:flex;width:max-content;animation:marquesina 28s linear infinite;will-change:transform}
.cinta-texto{
  font:500 10.5px/1 var(--ui);letter-spacing:.28em;text-transform:uppercase;
  color:var(--oro-claro);white-space:nowrap;padding-right:28px;
}
@keyframes marquesina{to{transform:translateX(-50%)}}

.seccion-cel{padding-top:30px;padding-bottom:6px;scroll-margin-top:70px}
.seccion-cel > .kicker{font-size:11px;margin-bottom:10px;color:var(--oro)}
.seccion-cel h2{font-size:28px;line-height:1.05;margin-bottom:6px}
#como.seccion-cel h2{font-size:26px;line-height:1.1;margin-bottom:14px}
#nosotros.seccion-cel{padding-top:30px}
#nosotros.seccion-cel .nos-texto{font-size:14px;margin-top:12px}
.seccion-cab-cel{margin-bottom:14px;flex-direction:row;align-items:flex-end}
.seccion-cab-cel h2{margin-bottom:0}
.seccion-cab-cel .kicker{font-size:11px;margin-bottom:10px;color:var(--oro)}
.seccion-cab-cel .link-oro{font-size:11px;letter-spacing:.1em;padding-bottom:6px}

/* La tira de trabajos: tarjetas verticales de 210×330 con scroll-snap. */
.tira-trabajos{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:0 var(--lado) 8px;
}
.tira-trabajos::-webkit-scrollbar{display:none}
.trabajo-cel{
  flex:none;width:210px;height:330px;position:relative;overflow:hidden;border-radius:var(--r-tarjeta);
  background:var(--carbon);border:1px solid var(--linea);scroll-snap-align:start;
  text-decoration:none;color:var(--marfil);display:block;
}
.trabajo-cel-foto{position:absolute;inset:0}
.trabajo-cel-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,10,0) 55%,rgba(8,8,10,.92));pointer-events:none}
.trabajo-cel-pie{position:absolute;left:14px;right:14px;bottom:14px;pointer-events:none}
.trabajo-cel-kicker{display:block;font:500 10px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:var(--oro-claro);margin-bottom:6px}
.trabajo-cel-titulo{display:block;font:500 18px/1.15 var(--display)}
.trabajo-cel-mas{
  width:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border-color:rgba(200,161,89,.3);text-align:center;padding:0 14px;
}
.trabajo-cel-arroba{font:400 22px/1.1 var(--display);color:var(--oro-claro)}
.trabajo-cel-mas-t{font:500 10.5px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}

/* La lista de servicios: miniatura, nombre y modo, «desde», chevrón. */
.lista-servicios{display:flex;flex-direction:column}
.fila-servicio{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto 18px;gap:12px;align-items:center;
  min-height:72px;padding:8px 0;border-bottom:1px solid rgba(200,161,89,.14);
  text-decoration:none;color:var(--marfil);cursor:pointer;
}
.fila-agregados{user-select:none}
.fila-ver{color:var(--oro-claro)}
.fila-mini{width:56px;height:56px;border-radius:var(--r-tarjeta);display:block}
.fila-texto{display:flex;flex-direction:column;gap:3px;min-width:0}
.fila-nombre{font:400 16px/1.2 var(--ui)}
.fila-modo{font:300 12px/1.3 var(--ui);color:var(--gris)}
.fila-desde{font:400 17px/1 var(--display);color:var(--oro-claro);white-space:nowrap;text-align:right}
.fila-revision{font:500 11px/1.2 var(--ui);letter-spacing:.1em;text-transform:uppercase;white-space:normal;max-width:9ch}
.fila-chevron{color:var(--oro);font:400 18px/1 var(--ui);text-align:right;display:inline-block;transition:transform .25s}
.panel-toggle:checked ~ .lista-servicios .fila-agregados .fila-nombre{color:var(--oro-claro)}
.panel-toggle:checked ~ .lista-servicios .fila-agregados .fila-chevron{transform:rotate(90deg)}
.modulo-agregados{
  display:none;margin-top:12px;background:var(--carbon);border:1px solid rgba(200,161,89,.3);
  border-radius:var(--r-tarjeta);padding:18px 16px;scroll-margin-top:70px;
}
.panel-toggle:checked ~ .modulo-agregados{display:block;animation:desplegar .3s ease-out}
.modulo-agregados .panel-cab{margin-bottom:14px;gap:12px}
.modulo-agregados .panel-cab .kicker{font-size:11px;margin-bottom:8px}
.modulo-agregados .panel-titulo{font-size:24px}
.modulo-agregados .panel-cab .bajada{font-size:13px;margin-top:6px}
.agregados-cel{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.agregados-cel .agregado-foto{height:110px}
/* El chip del antes y después en una tarjeta de 110 px: más chico. */
.agregados-cel .barrido-chip{top:6px;left:6px;min-height:22px;padding:0 7px;font-size:9px;letter-spacing:.16em}
.agregados-cel .agregado figcaption{padding:10px 10px 12px;gap:5px}
.agregados-cel .agregado h4{font-size:15px}
.agregados-cel .agregado-texto{font-size:12px}
.agregados-cel .agregado-dura{margin-top:auto;padding-top:8px;border-top:1px solid rgba(200,161,89,.12);font-size:11.5px;line-height:1.3}
.agregados-cel .agregado-precio{font-size:16px;line-height:1.15}
.agregados-cel .chip-garantia{min-height:22px;font-size:10px}
.modulo-agregados .btn.ancho{margin-top:12px;height:52px}
.modulo-agregados .panel-nota{display:block;text-align:center;margin-top:10px;font-size:12px}
.nota-lista{font:300 12.5px/1.5 var(--ui);color:var(--gris);margin-top:12px}

.motos-cel{background:var(--carbon);border:1px solid rgba(200,161,89,.2);border-radius:var(--r-tarjeta);overflow:hidden}
.motos-cel-foto{height:200px}
.motos-cel-cuerpo{padding:18px 18px 20px}
.motos-cel-cuerpo .kicker{font-size:11px;margin-bottom:10px;color:var(--oro)}
.motos-cel-cuerpo h2{font-size:26px;margin-bottom:10px}
.motos-lista-cel{margin-top:10px}
.motos-lista-cel li{grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0}
.motos-lista-cel .motos-nombre{font-size:14px;padding:8px 0;margin:-8px 0}
.motos-lista-cel .motos-dura{grid-column:1;grid-row:2;font-size:12px}
.motos-lista-cel .motos-precio,.motos-lista-cel .motos-revision{grid-row:1 / span 2;align-self:center;font-size:17px;min-width:0}
.motos-cel .btn.ancho{margin-top:16px;height:48px}
.motos-cel .motos-nota{text-align:center;font-size:12.5px;margin-top:10px}

.pasos-cel{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
.pasos-cel li{
  background:var(--carbon);border:1px solid var(--linea);border-radius:var(--r-tarjeta);
  padding:14px 14px 16px;display:flex;flex-direction:column;gap:6px;
}
.pasos-cel .paso-n{font-size:26px;line-height:1}
.pasos-cel .paso-t{margin:0;font:500 14px/1.25 var(--ui)}
.pasos-cel .paso-d{font-size:12.5px;line-height:1.45}

.mosaico-cel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:140px;gap:8px;margin-top:18px}
.mosaico-cel .mosaico-foto:first-child{grid-column:span 2}
.historia-cel-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:34px 0 12px}
.historia-cel-cab .kicker{margin:0;font-size:11px;color:var(--oro)}
.historia-cel-cab .link-oro{font-size:12px;letter-spacing:.08em}
.tira-historia{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--lado));padding:0 var(--lado) 6px}
.tira-historia::-webkit-scrollbar{display:none}
.capitulo-cel{
  flex:none;width:262px;background:var(--carbon);border:1px solid var(--linea);border-radius:var(--r-tarjeta);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--marfil);
}
.capitulo-cel-foto{height:150px}
.capitulo-cel-cuerpo{padding:14px 14px 16px;display:flex;flex-direction:column;gap:6px}
.capitulo-cel-cab{display:flex;align-items:baseline;gap:10px}
.capitulo-cel .capitulo-numeral{font-size:26px}
.capitulo-cel .capitulo-era{margin-top:0;font-size:10.5px;letter-spacing:.18em}
.capitulo-cel .capitulo-titulo{font-size:17px;margin-top:0}
.capitulo-cel .capitulo-cuerpo{font-size:13px;margin-top:0}
.gente-tarjeta-cel{margin-top:28px;padding:18px 18px 20px}
.gente-tarjeta-cel .kicker{font-size:11px;margin-bottom:14px;color:var(--oro)}
.kicker-famosos{margin:30px 0 8px;font-size:11px;color:var(--oro)}
.famosos-titulo{font:400 22px/1.1 var(--display);margin-bottom:12px}
.famosos-cel{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--lado));padding:0 var(--lado) 4px}
.famosos-cel::-webkit-scrollbar{display:none}
.famosos-cel .famoso{flex:none;width:140px}
.famosos-cel .famoso-foto{height:140px}
.seccion-cel .donde{margin-top:28px}
.seccion-cel .donde-mapa{height:240px}

/* ── La página Nosotros (/nosotros/) ───────────────────────────────────── */
.pagina-nosotros{padding-top:56px}
.pagina-nosotros .migas{margin-bottom:34px}
.titulo-nosotros{font:400 64px/1.02 var(--display);letter-spacing:-.01em;max-width:18ch;margin:0 0 20px}
.nos-texto-pagina{max-width:60ch;margin-top:0}
.pagina-nosotros .donde{margin-top:64px}
@media (max-width:767px){
  .titulo-nosotros{font-size:36px}
  .pagina-nosotros .donde{margin-top:36px}
}


/* ── Vista previa de Gestión (06/10) ──────────────────────────────────────
   Solo existe adentro del iframe de Gestión → Contenido de la web: el tag
   `{% lugar %}` dibuja estos marcos únicamente con `vista_previa`, así que
   en la página pública ninguna de estas clases aparece. Marcan cada lugar de
   foto o video con un borde punteado y el botón «Cambiar». En la PC el
   iframe se ve a la mitad: los botones van al doble para leerse a 13-15px. */
.vp{overflow-x:hidden}
.vp a{pointer-events:none}
.vp .servicio-hero{position:relative}
.vp-seccion{padding:64px 0 56px}
/* En la página, Nosotros viene pegado a la sección de arriba (sin aire
   arriba); en la vista previa va sola y necesita el suyo. */
.vp #nosotros.vp-seccion{padding-top:48px}
.vp-vacio{font:400 16px/1.5 var(--ui);color:var(--gris);text-align:center;padding:40px 16px}
.vp-lugar{
  position:absolute;inset:8px;z-index:6;pointer-events:none;border-radius:6px;
  border:2px dashed rgba(232,206,154,.6);display:flex;flex-direction:column;justify-content:space-between;
}
.vp-con-nuevo{border-color:#7fc29b;border-style:solid}
.vp-tag{
  align-self:flex-start;margin:10px;padding:5px 10px;border-radius:999px;
  background:#7fc29b;color:var(--negro);font:600 12px/1 var(--ui);
}
.vp-acciones{
  margin-top:auto;align-self:flex-end;display:flex;flex-wrap:wrap;justify-content:flex-end;
  align-items:center;gap:8px;padding:10px;
}
.vp-info{
  padding:7px 11px;border-radius:5px;border:1px solid var(--linea-fuerte);
  background:rgba(8,8,10,.82);color:var(--marfil);font:400 13px/1.2 var(--ui);
}
.vp-cambiar{
  pointer-events:auto;display:inline-block;padding:9px 14px;border-radius:5px;background:var(--oro);
  color:#16130c;font:500 14px/1 var(--ui);text-decoration:none;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.vp a.vp-cambiar{pointer-events:auto}
.vp-cambiar:hover{background:var(--oro-claro)}
.vp-compacto{inset:3px;border-width:1px}
.vp-compacto .vp-acciones{padding:4px;gap:4px}
.vp-compacto .vp-cambiar{padding:5px 8px;font-size:11px}
.vp-compacto .vp-tag{margin:4px;padding:3px 6px;font-size:10px}
/* En la PC el iframe se dibuja a la mitad: todo el marco va al doble. */
.vp-pc .vp-lugar{inset:14px;border-width:3px}
.vp-pc .vp-info{font-size:24px;padding:12px 18px}
.vp-pc .vp-cambiar{font-size:26px;padding:16px 24px}
.vp-pc .vp-tag{font-size:22px;padding:9px 16px;margin:16px}
.vp-pc .vp-compacto .vp-cambiar{font-size:20px;padding:9px 13px}
.vp-pc .vp-compacto{inset:6px;border-width:2px}
/* La portada y la cabecera de un servicio tienen los textos y los datos
   abajo: ahí el botón va arriba a la derecha, sobre la foto, sin tapar nada. */
.vp .hero > .vp-lugar,.vp .servicio-hero > .vp-lugar{flex-direction:row;align-items:flex-start}
.vp .hero > .vp-lugar .vp-acciones,.vp .servicio-hero > .vp-lugar .vp-acciones{margin:0 0 0 auto;align-self:flex-start}