/* ==========================================================
   Comercializados León — sitio público (prototipo)

   Fondo de hollín cálido y un solo acento: el amarillo del logo.
   El naranja (--brasa) se usa unicamente en el gas caliente del dibujo
   de portada; si aparece en otro lado, deja de significar algo.

   Tipografia: Archivo (variable, para titulares anchos y apretados) e
   Inter para el texto corrido, la misma del panel.
   ========================================================== */

:root {
  color-scheme: dark;

  --noche:      #0B0A08;   /* fondo general */
  --carbon:     #131210;   /* superficies */
  --grafito:    #1C1A16;   /* superficie elevada */
  --linea:      #2B261E;
  --linea-viva: #3D362A;

  --hueso:      #F2EEE3;   /* texto principal */
  --acero:      #A79F8E;   /* texto secundario, gris con sesgo calido */
  --acero-hondo:#6E6759;   /* texto terciario */

  --amarillo:      #F3C328;
  --amarillo-hondo:#D9A916;
  --amarillo-humo: rgba(243, 195, 40, 0.12);
  --brasa:         #E2622B;

  --verde-wa:   #25D366;

  --fuente-titulo: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --fuente-texto:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --caja: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --radio: 14px;
  --barra-alto: 72px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--noche);
  color: var(--hueso);
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* El fondo no es negro plano: una veladura amarilla muy tenue arriba y
   un degradado hacia el hollin abajo, para que no parezca una diapositiva. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 78% -5%, rgba(243, 195, 40, 0.10), transparent 62%),
    radial-gradient(60% 50% at 8% 0%, rgba(226, 98, 43, 0.06), transparent 60%),
    var(--noche);
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.028em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--amarillo);
  outline-offset: 3px;
  border-radius: 4px;
}

.caja {
  width: 100%;
  max-width: var(--caja);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--amarillo);
  color: #14120E;
  padding: 12px 18px;
  font-weight: 600;
}
.salto-contenido:focus { left: 12px; top: 12px; }

/* ---------- Barra superior ---------- */

.barra {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
  border-bottom: 1px solid transparent;
}
.barra.pegada {
  background: rgba(11, 10, 8, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--linea);
}

.barra-caja {
  max-width: var(--caja);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--barra-alto);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.barra-logo img {
  height: 34px;
  width: auto;
  transition: height 220ms ease;
}
.barra.pegada .barra-logo img { height: 28px; }

.barra-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.barra-nav > a:not(.boton) {
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--acero);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 160ms ease, background 160ms ease;
}
.barra-nav > a:not(.boton):hover { color: var(--hueso); background: rgba(255, 255, 255, 0.05); }
.barra-nav > a.activo { color: var(--amarillo); }
.barra-nav > a.activo:hover { color: var(--amarillo); }

.boton-nav { margin-left: 10px; }

.barra-menu {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linea-viva);
  border-radius: 12px;
  background: var(--carbon);
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* si no, las barras se van contra el borde de arriba */
  gap: 5px;
  transition: border-color 200ms ease, background 200ms ease;
}
.barra-menu[aria-expanded="true"] { border-color: var(--amarillo); background: var(--grafito); }
.barra-menu[aria-expanded="true"] span { background: var(--amarillo); }
.barra-menu span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--hueso);
  border-radius: 2px;
  transition: transform 220ms ease, opacity 180ms ease;
}
.barra-menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.barra-menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  white-space: nowrap;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.boton:active { transform: translateY(1px); }

.boton-grande { padding: 16px 26px; font-size: 1rem; }

.boton-wa { background: var(--amarillo); color: #16130C; }
.boton-wa:hover { background: var(--amarillo-hondo); }

.boton-linea { border-color: var(--linea-viva); color: var(--hueso); background: rgba(255, 255, 255, 0.02); }
.boton-linea:hover { border-color: var(--amarillo); color: var(--amarillo); }

.boton-fantasma { color: var(--acero); padding-inline: 8px; }
.boton-fantasma:hover { color: var(--hueso); }

.ico-wa { width: 19px; height: 19px; flex-shrink: 0; }

/* ---------- Portada ---------- */

.portada {
  padding-top: calc(var(--barra-alto) + clamp(40px, 7vw, 84px));
  padding-bottom: clamp(48px, 7vw, 96px);
}

.portada-caja {
  width: 100%;
  max-width: var(--caja);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--linea-viva);
  border-radius: 999px;
  background: var(--carbon);
  color: var(--acero);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 22px;
}
.chip svg { width: 15px; height: 15px; color: var(--amarillo); flex-shrink: 0; }
/* Es un enlace al mapa: que se note al pasar por encima. */
.chip { transition: border-color 200ms ease, color 200ms ease, background 200ms ease; }
.chip:hover { border-color: var(--amarillo); color: var(--hueso); background: var(--grafito); }

.titular {
  font-size: clamp(2.6rem, 6.4vw, 5.1rem);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 0.96;
  letter-spacing: -0.035em;
}
/* Cada renglon sube desde su propia mascara: la unica animacion de entrada
   orquestada de la pagina. */
.titular .linea { display: block; overflow: hidden; }
.titular .linea > span { display: block; }

.entrada {
  margin-top: 22px;
  max-width: 52ch;
  color: var(--acero);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.65;
}

.portada-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.datos-duros {
  /* Tres columnas fijas: en celular se iban a dos renglones. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--linea);
}
.datos-duros dt {
  font-family: var(--fuente-titulo);
  font-size: 1.6rem;
  font-weight: 700;
  font-stretch: 112%;
  color: var(--amarillo);
  line-height: 1;
}
.datos-duros dd {
  margin-top: 5px;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--acero-hondo);
}

/* ---------- Dibujo de portada ----------

   Hay dos versiones de la misma idea (el ruido entra y sale silencio):

   1. El SVG plano (.corte), que es lo que se ve si no hay JavaScript
      o si el equipo pide menos movimiento.
   2. La escena 3D, que arma js/sitio.js con divs: el silenciador es un
      cilindro de verdad (caras giradas alrededor de su eje, cada una
      con su propio sombreado) y las ondas viajan por el espacio.

   Cuando el JS puede montar la escena, esconde el SVG.
   -------------------------------------------------------------------- */

.portada-dibujo { min-width: 0; position: relative; }
.corte { width: 100%; height: auto; display: block; }

/* Con las dos vistas montadas, la segunda se pone encima de la primera y
   se turnan cambiando cual lleva .vista-activa. El corte plano es el que
   manda la altura; la escena 3D se ajusta a ella. */
.dos-vistas .vista {
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms ease;
}
.dos-vistas .vista-activa { opacity: 1; pointer-events: auto; }
.dos-vistas .escena {
  position: absolute;
  inset: 0;
  height: auto;
}

.corte .calor {
  fill: var(--brasa);
  opacity: 0.07;
  filter: blur(26px);
}

.corte .trazo {
  stroke: var(--acero-hondo);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.corte .t2, .corte .t7 { stroke: var(--hueso); }
.corte .perforado { stroke: var(--amarillo); stroke-dasharray: 3 9; opacity: 0.85; }

.corte .onda-ruido {
  stroke: var(--brasa);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.corte .onda-calma {
  stroke: var(--amarillo);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.corte .humo { fill: var(--acero); opacity: 0; }

.corte .rotulo {
  font-family: var(--fuente-texto);
  font-size: 13px;
  letter-spacing: 0.06em;
  fill: var(--acero-hondo);
}
.corte .rotulo-calma { fill: var(--amarillo); }

/* ---------- La escena 3D ---------- */

/* El alto acompaña a la escala, y overflow recorta las ondas cuando se
   pasan de largo: nunca empujan el ancho de la página. js/sitio.js ajusta
   --escala al ancho que haya disponible. */
.escena {
  --escena-ancho: 720px;
  --escena-alto: 370px;
  --escala: 0.6;
  position: relative;
  width: 100%;
  height: calc(var(--escena-alto) * var(--escala));
  overflow: hidden;
}

/* El lienzo tiene tamaño fijo y se encoge entero con scale: asi la
   perspectiva se mantiene igual de correcta en cualquier pantalla. */
.escena-lienzo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--escena-ancho);
  height: var(--escena-alto);
  margin-left: calc(var(--escena-ancho) / -2);
  margin-top: calc(var(--escena-alto) / -2);
  transform: scale(var(--escala));
  perspective: 1500px;
  perspective-origin: 50% 44%;
}

.escena-orbita {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: orbitar 24s ease-in-out infinite alternate;
}

.exosto {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* El reposo. Con el puntero encima, js/sitio.js mueve --rx y --ry.
     El translateX compensa que las ondas de la entrada pesan mas a la
     izquierda: sin el, la pieza queda corrida en la caja. */
  transform: translateX(13px) rotateX(var(--rx, -13deg)) rotateY(var(--ry, -21deg));
  transition: transform 500ms cubic-bezier(.2, .7, .3, 1);
}

@keyframes orbitar {
  from { transform: rotateY(-8deg) rotateX(2deg); }
  to   { transform: rotateY(8deg) rotateX(-3deg); }
}

.pieza3d {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
}
.cara3d {
  position: absolute;
  left: 50%;
  top: 50%;
}
.tapa3d {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
}

/* Sombra en el piso: una mancha plana tumbada bajo la pieza. */
.piso3d {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 560px;
  height: 200px;
  margin-left: -280px;
  margin-top: -100px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.62), transparent 72%);
  transform: rotateX(90deg) translateZ(-104px);
}

/* Halo de calor alrededor del cuerpo. */
.calor3d {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 420px;
  height: 300px;
  margin-left: -210px;
  margin-top: -150px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226, 98, 43, 0.20), transparent 70%);
  filter: blur(18px);
  transform: translateZ(-140px);
}

/* ---------- Las ondas ----------
   Anillos perpendiculares al eje del tubo. El ruido entra deformado y
   naranja; el silencio sale redondo, amarillo y abriendose. */

.onda3d {
  position: absolute;
  left: 50%;
  top: 50%;
  border-style: solid;
  will-change: transform, opacity;
}

.onda-entra {
  border-color: var(--brasa);
  animation:
    viajar-entra var(--dur) linear var(--retraso) infinite,
    deformar 460ms ease-in-out infinite alternate;
}
.onda-sale {
  border-color: var(--amarillo);
  border-radius: 50%;
  animation: viajar-sale var(--dur) cubic-bezier(.3, .1, .6, 1) var(--retraso) infinite;
}

@keyframes viajar-entra {
  0%   { transform: translateX(var(--desde)) rotateY(90deg) scale(0.6); opacity: 0; }
  16%  { opacity: 0.9; }
  88%  { opacity: 0.45; }
  100% { transform: translateX(var(--hasta)) rotateY(90deg) scale(1.05); opacity: 0; }
}
@keyframes viajar-sale {
  0%   { transform: translateX(var(--desde)) rotateY(90deg) scale(0.45); opacity: 0; }
  20%  { opacity: 0.8; }
  100% { transform: translateX(var(--hasta)) rotateY(90deg) scale(2.6); opacity: 0; }
}
/* Solo toca el borde: si tocara transform, pisaria el viaje del anillo. */
@keyframes deformar {
  from { border-radius: 46% 54% 58% 42% / 52% 46% 54% 48%; }
  to   { border-radius: 58% 42% 43% 57% / 44% 58% 42% 56%; }
}

/* ---------- Rótulos ---------- */

.escena-rotulo {
  position: absolute;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--acero-hondo);
  pointer-events: none;
}
.rotulo-entra { left: 4%; top: 15%; }
.rotulo-sale { right: 3%; bottom: 17%; color: var(--amarillo); }

/* ---------- Cinta de líneas ---------- */

.cinta {
  border-block: 1px solid var(--linea);
  background: var(--carbon);
  padding-block: 22px;
  overflow: hidden;
  /* Se desvanece en los bordes para que no se vea el corte de la cinta. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cinta-pista {
  display: flex;
  width: max-content;
  gap: 56px;
  animation: desfilar 38s linear infinite;
}
.cinta:hover .cinta-pista { animation-play-state: paused; }
.cinta-lista { display: flex; gap: 56px; }
.cinta-lista li {
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.01em;
  color: var(--acero-hondo);
  white-space: nowrap;
}
/* Al pasar el cursor la cinta se detiene y el nombre de abajo crece y se
   pone amarillo. Crece con scale y no con font-size a proposito: asi no
   corre a los nombres vecinos. */
.cinta-lista a {
  display: block;
  transition: color 200ms ease, transform 260ms cubic-bezier(.2, .7, .3, 1);
}
.cinta-lista a:hover,
.cinta-lista a:focus-visible {
  color: var(--amarillo);
  transform: scale(1.18);
}
/* La cinta pasa por la primera copia y vuelve a empezar sin salto:
   se corre el ancho de una lista mas el hueco que la separa de la otra. */
@keyframes desfilar {
  to { transform: translateX(calc(-50% - 28px)); }
}

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

.seccion { padding-block: clamp(68px, 9vw, 128px); }
.seccion-alterna {
  background: var(--carbon);
  border-block: 1px solid var(--linea);
}

.seccion-cabeza { margin-bottom: clamp(32px, 4vw, 52px); max-width: 24ch; }
.seccion-cabeza h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
.seccion-bajada {
  margin-top: 16px;
  max-width: 56ch;
  color: var(--acero);
}
.seccion-cabeza:has(.seccion-bajada) { max-width: 62ch; }

.nota-prototipo {
  margin-top: 26px;
  font-size: 0.8125rem;
  color: var(--acero-hondo);
  max-width: 60ch;
}

/* ---------- Catálogo de la portada ----------
   Cada tarjeta es un enlace entero a catalogo.html filtrado por esa linea.
   El dibujo lo inyecta js/sitio.js al final de la tarjeta; por eso va
   colocado por area y no por orden en el HTML.
   -------------------------------------------------------------------- */

.rejilla-catalogo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}
.pieza-tarjeta {
  background: var(--grafito);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color 200ms ease, background 200ms ease, transform 240ms cubic-bezier(.2,.7,.3,1);
}
.pieza-tarjeta:hover {
  border-color: var(--linea-viva);
  background: #201D18;
  transform: translateY(-3px);
}

/* La primera ocupa dos columnas cuando hay espacio: los silenciadores son
   la linea principal del negocio (lo dice el logo). */
@media (min-width: 900px) {
  .destacada { grid-column: span 2; }
  .destacada .pieza-texto { max-width: 46ch; }
}

.pieza-cabeza {
  height: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'letra  titulo'
    'dibujo dibujo'
    'ir     ir';
  gap: 14px;
  padding: 20px;
}
.pieza-letra {
  grid-area: letra;
  min-width: 38px;
  height: 38px;
  padding-inline: 8px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--amarillo-humo);
  border: 1px solid rgba(243, 195, 40, 0.25);
  color: var(--amarillo);
  font-family: var(--fuente-titulo);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
}
.pieza-titulo { grid-area: titulo; display: block; }
.pieza-nombre {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  font-weight: 700;
  font-stretch: 110%;
  letter-spacing: -0.02em;
}
.pieza-texto {
  display: block;
  margin-top: 6px;
  color: var(--acero);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.pieza-dibujo {
  grid-area: dibujo;
  align-self: center;
  justify-self: start;
  width: 118px;
  height: auto;
  stroke: var(--acero-hondo);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 240ms ease, transform 240ms ease;
}
.pieza-cabeza:hover .pieza-dibujo { stroke: var(--amarillo); transform: translateX(6px); }

.pieza-ir {
  grid-area: ir;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--amarillo);
  font-size: 0.9375rem;
  font-weight: 600;
}
.pieza-ir svg {
  width: 15px;
  height: 15px;
  transition: transform 240ms cubic-bezier(.2,.7,.3,1);
}
.pieza-cabeza:hover .pieza-ir svg { transform: translateX(4px); }

.catalogo-pie { margin-top: 30px; display: flex; justify-content: center; }

/* ---------- Cómo pedir ---------- */

.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  counter-reset: paso;
}
.paso {
  padding-top: 24px;
  border-top: 2px solid var(--amarillo);
  transform-origin: left center;
  /* Lento y con entrada y salida suaves: el cambio de un paso al otro se
     nota como un relevo, no como un golpe. */
  transition: scale 620ms cubic-bezier(.33, 0, .2, 1);
}
/* El paso que se esta mirando crece un poco y pone su titulo en amarillo.
   En computador lo decide el cursor; en celular, js/sitio.js le pone
   .activo al que va quedando en la mitad de la pantalla.

   Crece con la propiedad "scale" y no con "transform" a proposito: el
   transform de esta tarjeta ya lo usa la animacion de aparecer, y una
   cosa pisaria a la otra. */
.paso h3 { transition: color 520ms cubic-bezier(.33, 0, .2, 1); }
.paso:hover,
.paso.activo { scale: 1.022; }
.paso:hover h3,
.paso.activo h3 { color: var(--amarillo); }
.paso-num {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--amarillo);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.paso h3 { font-size: 1.3rem; }
.paso p { margin-top: 10px; color: var(--acero); font-size: 0.9375rem; }

/* ---------- Nosotros ---------- */

.nosotros {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.nosotros-texto h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); max-width: 16ch; }
.nosotros-texto p { margin-top: 18px; color: var(--acero); max-width: 56ch; }
.nosotros-texto .boton { margin-top: 28px; }

.nosotros-cifras { display: grid; gap: 2px; }
.cifra {
  background: var(--carbon);
  border: 1px solid var(--linea);
  padding: 22px 24px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.cifra:first-child { border-radius: var(--radio) var(--radio) 0 0; }
.cifra:last-child { border-radius: 0 0 var(--radio) var(--radio); }
.cifra-num {
  font-family: var(--fuente-titulo);
  font-size: 2.6rem;
  font-weight: 800;
  font-stretch: 116%;
  line-height: 1;
  color: var(--amarillo);
  font-variant-numeric: tabular-nums;
  min-width: 1.6ch;
}
.cifra-pie { color: var(--acero); font-size: 0.875rem; line-height: 1.45; }

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

.local {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.local-datos h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
.local-ciudad { margin-top: 8px; color: var(--acero); }

/* Abierto o cerrado en este momento, segun el reloj de Bogotá. */
.estado-local {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 8px 15px 8px 13px;
  border: 1px solid var(--linea-viva);
  border-radius: 999px;
  background: var(--grafito);
  font-size: 0.875rem;
  font-weight: 600;
}
.estado-local::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acero-hondo);
  flex-shrink: 0;
}
.estado-local.abierto {
  border-color: rgba(63, 143, 92, 0.45);
  color: #7FD7A0;
}
.estado-local.abierto::before {
  background: #4FBF7B;
  box-shadow: 0 0 0 4px rgba(79, 191, 123, 0.16);
}
.estado-detalle { color: var(--acero); font-weight: 400; }

.horario {
  margin-top: 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 24px;
  max-width: 420px;
  font-size: 0.9375rem;
}
.horario dt { color: var(--acero-hondo); }
.horario dd { color: var(--hueso); text-align: right; font-variant-numeric: tabular-nums; }
.horario .cerrado { color: var(--acero-hondo); }
/* El renglon de hoy, resaltado para no tener que buscarlo. */
.horario .hoy { color: var(--amarillo); font-weight: 600; }
.horario dd.hoy.cerrado { color: var(--amarillo); }

.local-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }

.local-mapa { position: relative; }
.local-mapa svg { width: 100%; height: auto; border-radius: var(--radio); background: var(--noche); border: 1px solid var(--linea); }

/* El mapa incrustado de Google. */
.mapa-real {
  /* Va SIEMPRE encima del dibujo, nunca en su lugar: si Google no carga,
     debajo sigue estando el mapa dibujado. Aparece al confirmarse. */
  position: absolute;
  inset: 0;
  border: 1px solid var(--linea-viva);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--carbon);
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms ease;
}
.mapa-real.listo { opacity: 1; pointer-events: auto; }
.mapa-real iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* Sin filtros: Google ya entrega el mapa en oscuro cuando el equipo esta
     en modo oscuro. Invertirlo lo volvia claro, que era justo lo contrario
     de lo que se buscaba. */
}
.local-mapa .via { stroke: var(--linea-viva); stroke-width: 14; }
.local-mapa .via-fina { stroke: var(--linea); stroke-width: 8; }
.local-mapa .manzana { fill: rgba(255, 255, 255, 0.022); stroke: var(--linea); stroke-width: 1; }
.local-mapa .pin { fill: var(--amarillo); }
.local-mapa .pin-punto { fill: #16130C; }
.local-mapa .pulso { fill: var(--amarillo); opacity: 0.25; }
.local-mapa .via-rotulo {
  font-family: var(--fuente-texto);
  font-size: 11px;
  fill: var(--acero-hondo);
  letter-spacing: 0.08em;
}

/* ---------- Cierre ---------- */

.cierre { padding-block: clamp(72px, 9vw, 120px); }
.cierre-caja {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 16px;
}
.cierre h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.cierre p { color: var(--acero); max-width: 44ch; }
.cierre .boton { margin-top: 12px; }

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

.pie {
  border-top: 1px solid var(--linea);
  background: var(--carbon);
  padding-block: 44px;
}
.pie-caja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.pie-logo { height: 40px; width: auto; opacity: 0.9; }
.pie-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pie-nav a { color: var(--acero); font-size: 0.9375rem; }
.pie-nav a:hover { color: var(--amarillo); }
.pie-legal { color: var(--acero-hondo); font-size: 0.8125rem; line-height: 1.7; }

/* ---------- Botón flotante ---------- */

.wa-flotante {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--verde-wa);
  color: #06301A;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(.2,.7,.3,1), visibility 240ms;
}
.wa-flotante.visible { opacity: 1; visibility: visible; transform: none; }
.wa-flotante svg { width: 29px; height: 29px; }

/* ==========================================================
   Página de catálogo (catalogo.html)
   ========================================================== */

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cat-pagina {
  padding-top: calc(var(--barra-alto) + 30px);
  padding-bottom: clamp(56px, 7vw, 90px);
}

.migas {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--acero-hondo);
  margin-bottom: 18px;
}
.migas a { color: var(--acero); }
.migas a:hover { color: var(--amarillo); }

.cat-cabeza { max-width: 62ch; }
.cat-cabeza h1 {
  font-family: var(--fuente-titulo);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 800;
  font-stretch: 116%;
  letter-spacing: -0.032em;
  line-height: 1;
  margin: 0;
}
.cat-bajada { margin-top: 14px; color: var(--acero); }

.cat-herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 34px;
}

.buscador {
  position: relative;
  flex: 1 1 320px;
  max-width: 460px;
  display: flex;
  align-items: center;
}
.buscador svg {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  color: var(--acero-hondo);
  pointer-events: none;
}
.buscador-campo {
  width: 100%;
  padding: 14px 16px 14px 46px;
  border-radius: 999px;
  border: 1px solid var(--linea-viva);
  background: var(--carbon);
  color: var(--hueso);
  font-family: inherit;
  font-size: 0.9375rem;
  -webkit-appearance: none;
  appearance: none;
}
.buscador-campo::placeholder { color: var(--acero-hondo); }
.buscador-campo:focus {
  outline: none;
  border-color: var(--amarillo);
  background: var(--grafito);
}
.buscador:focus-within svg { color: var(--amarillo); }

.cuenta {
  color: var(--acero-hondo);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Filtros por línea ---------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--linea);
}
.filtro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--linea-viva);
  background: transparent;
  color: var(--acero);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.filtro:hover { color: var(--hueso); border-color: var(--acero-hondo); }
.filtro.activo {
  background: var(--amarillo);
  border-color: var(--amarillo);
  color: #16130C;
}
.filtro-total {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--acero-hondo);
}
.filtro.activo .filtro-total { color: rgba(22, 19, 12, 0.6); }

/* ---------- Fichas de producto ---------- */

.rejilla-fichas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.ficha {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--grafito);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color 200ms ease, transform 240ms cubic-bezier(.2,.7,.3,1);
}
.ficha:hover { border-color: var(--linea-viva); transform: translateY(-3px); }

/* El sitio de la foto del producto. Va claro porque las fotos de repuesto
   vienen sobre fondo blanco; el filo amarillo hace de puente entre ese
   blanco y el negro de la pagina, para que el salto no sea a pique. */
.ficha-foto {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 14px;
  border-radius: 10px;
  border: 2px solid var(--amarillo-hondo);
  background: linear-gradient(180deg, #FFFFFF, #ECE7DA);
  overflow: hidden;
  transition: border-color 240ms ease;
}
.ficha-foto img { width: 100%; height: 100%; object-fit: contain; }
.ficha:hover .ficha-foto { border-color: var(--amarillo); }

.ficha-dibujo {
  width: 78%;
  max-width: 150px;
  height: auto;
  stroke: #464034;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 240ms ease;
}
.ficha:hover .ficha-dibujo { stroke: #16130C; }

.ficha-nombre {
  font-size: 1.0625rem;
  font-weight: 700;
  font-stretch: 108%;
  line-height: 1.2;
}

.ficha-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ficha-datos li {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--acero);
  font-size: 0.75rem;
}

/* Cada producto lleva su propio boton: es la accion que se espera de la
   ficha, y el mensaje de WhatsApp ya sale con ese producto escrito. */
.ficha-wa {
  margin-top: auto;
  display: block;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--amarillo);
  color: #16130C;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 160ms ease;
}
.ficha-wa:hover { background: var(--amarillo-hondo); }

.ficha-linea {
  padding-top: 10px;
  border-top: 1px solid var(--linea);
  color: var(--acero-hondo);
  font-size: 0.75rem;
}

/* ---------- Nada encontrado ---------- */

.sin-resultados {
  margin-top: 40px;
  padding: 36px 28px;
  border: 1px dashed var(--linea-viva);
  border-radius: var(--radio);
  text-align: center;
  color: var(--acero);
}
.sin-titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--hueso);
  margin-bottom: 8px;
}
.sin-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.nota-prototipo code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  color: var(--acero);
}

/* ==========================================================
   Documento legal (politica.html)
   Texto largo para leer: columna angosta y renglones sueltos.
   ========================================================== */

.legal {
  padding-top: calc(var(--barra-alto) + 30px);
  padding-bottom: clamp(56px, 7vw, 90px);
}

.legal-alerta {
  margin-bottom: 26px;
  padding: 14px 18px;
  border: 1px dashed var(--amarillo-hondo);
  border-radius: var(--radio);
  background: var(--amarillo-humo);
  color: var(--amarillo);
  font-size: 0.875rem;
  max-width: 68ch;
}

.legal-cabeza { max-width: 26ch; }
.legal-cabeza h1 {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 800;
  font-stretch: 114%;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
}
.legal-fecha { margin-top: 12px; color: var(--acero-hondo); font-size: 0.875rem; }

.legal-texto {
  max-width: 68ch;
  margin-top: 40px;
  color: var(--acero);
  font-size: 1rem;
  line-height: 1.75;
}
.legal-texto h2 {
  margin-top: 40px;
  margin-bottom: 12px;
  font-size: 1.25rem;
  font-weight: 700;
  font-stretch: 108%;
  color: var(--hueso);
  letter-spacing: -0.015em;
}
.legal-texto p + p { margin-top: 14px; }
.legal-texto strong { color: var(--hueso); font-weight: 600; }

.legal-texto ul {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.legal-texto li {
  position: relative;
  padding-left: 20px;
}
.legal-texto li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 6px;
  height: 2px;
  background: var(--amarillo);
}

.legal-resumen {
  padding: 22px 24px;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--amarillo);
  border-radius: var(--radio);
  background: var(--carbon);
}
.legal-resumen h2 { margin-top: 0; font-size: 1.0625rem; }

.legal-enlace {
  color: var(--amarillo);
  border-bottom: 1px solid rgba(243, 195, 40, 0.35);
}
.legal-enlace:hover { border-bottom-color: var(--amarillo); }

.legal-cierre {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--linea);
  color: var(--acero-hondo);
  font-size: 0.875rem;
}

/* ==========================================================
   Movimiento
   Todo lo de aqui abajo se apaga con prefers-reduced-motion.
   ========================================================== */

/* Entrada de portada: solo corre cuando el JS marca el documento.
   Los renglones del titular suben desde debajo de su mascara; el resto
   sube unos pocos pixeles. */
.js .titular .linea > span {
  animation: subir 760ms cubic-bezier(.16,.84,.33,1) backwards;
}
.js .chip,
.js .entrada,
.js .portada-botones,
.js .datos-duros {
  animation: subir-corto 700ms cubic-bezier(.16,.84,.33,1) backwards;
}

.js .chip             { animation-delay: 60ms; }
.js .titular .linea:nth-child(1) > span { animation-delay: 140ms; }
.js .titular .linea:nth-child(2) > span { animation-delay: 250ms; }
.js .entrada          { animation-delay: 380ms; }
.js .portada-botones  { animation-delay: 470ms; }
.js .datos-duros      { animation-delay: 560ms; }

@keyframes subir {
  from { opacity: 0; transform: translateY(105%); }
  to   { opacity: 1; transform: none; }
}
@keyframes subir-corto {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* La escena 3D entra con un acercamiento corto. El scale del lienzo es
   el mismo de --escala, asi que la animacion tiene que repetirlo. */
.js .escena-lienzo { animation: aparecer-escena 950ms cubic-bezier(.2, .7, .3, 1) 180ms backwards; }

@keyframes aparecer-escena {
  from { opacity: 0; transform: scale(calc(var(--escala) * 0.9)); }
  to   { opacity: 1; transform: scale(var(--escala)); }
}

/* El corte aparece de izquierda a derecha, como si lo estuvieran armando:
   primero la entrada, al final la puntera. Terminado el barrido, arrancan
   las ondas. Un solo recorte sobre el <svg> entero — funciona igual en
   todos los navegadores, a diferencia de dibujar trazo por trazo. */
.js .corte { animation: armar 1100ms cubic-bezier(.4, 0, .2, 1) 260ms backwards; }

@keyframes armar {
  from { clip-path: inset(0 100% 0 0); opacity: 0.4; }
  to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}

.js .corte .onda-ruido {
  stroke-dasharray: 26 12;
  animation: entrada-onda 400ms ease 1350ms backwards, correr 700ms linear 1350ms infinite;
}
.js .corte .onda-calma {
  stroke-dasharray: 40 10;
  animation: entrada-onda 500ms ease 1600ms backwards, correr-lento 2600ms linear 1600ms infinite;
}
@keyframes entrada-onda { from { opacity: 0; } to { opacity: 1; } }
@keyframes correr { to { stroke-dashoffset: -38; } }
@keyframes correr-lento { to { stroke-dashoffset: -50; } }

.js .corte .humo { animation: soplar 3.4s ease-out infinite; }
.js .corte .h1 { animation-delay: 1.8s; }
.js .corte .h2 { animation-delay: 2.9s; }
.js .corte .h3 { animation-delay: 3.9s; }
@keyframes soplar {
  0%   { opacity: 0;    transform: translate(0, 0) scale(0.6); }
  22%  { opacity: 0.22; }
  100% { opacity: 0;    transform: translate(46px, -34px) scale(1.9); }
}

.js .local-mapa .pulso {
  animation: latir 2.8s ease-out infinite;
  transform-box: view-box;
  transform-origin: 164px 158px;
}
@keyframes latir {
  0%   { opacity: 0.30; transform: scale(0.5); }
  70%  { opacity: 0;    transform: scale(2.6); }
  100% { opacity: 0; }
}

/* Aparecer al bajar. Sin JS nada se oculta. */
.js .revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(.16,.84,.33,1);
}
.js .revelar.dentro { opacity: 1; transform: none; }
.js .pieza-tarjeta.revelar { transition-delay: calc(var(--orden, 0) * 55ms); }
.js .paso.revelar { transition-delay: calc(var(--orden, 0) * 90ms); }

/* ---------- Pantallas angostas ---------- */

@media (max-width: 900px) {
  .portada-caja { grid-template-columns: 1fr; }
  /* En celular el dibujo va DESPUES del titular y los botones: primero la
     razon para escribir, despues el adorno. */
  .portada-dibujo { max-width: 440px; }
  .nosotros, .local { grid-template-columns: 1fr; }
  .local-mapa { max-width: 380px; }
}

@media (max-width: 760px) {
  .cinta-lista li { font-size: 1.25rem; }
  .cinta-pista, .cinta-lista { gap: 40px; }

  .barra-menu { display: flex; }

  .barra-nav {
    position: absolute;
    top: calc(100% - 6px);
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px;
    border: 1px solid var(--linea-viva);
    border-radius: var(--radio);
    background: rgba(19, 18, 16, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 200ms ease, transform 240ms cubic-bezier(.2,.7,.3,1), visibility 240ms;
  }
  .barra-nav.abierto { opacity: 1; visibility: visible; transform: none; }
  .barra-nav > a:not(.boton) { padding: 13px 14px; font-size: 1rem; }
  .barra-nav > a.activo { background: var(--amarillo-humo); color: var(--amarillo); }
  .boton-nav { margin-left: 0; margin-top: 8px; }

  .portada { padding-top: calc(var(--barra-alto) + 28px); }
  .titular { font-size: clamp(2.3rem, 10vw, 3.2rem); }
  .datos-duros { gap: 14px; }
  .datos-duros dt { font-size: 1.35rem; }
  .pieza-cabeza { padding: 18px; }
  .cifra { padding: 18px 20px; }
  .cat-pagina,
  .legal { padding-top: calc(var(--barra-alto) + 20px); }
  .cat-herramientas { align-items: stretch; }
  .buscador { max-width: none; }
  .cifra-num { font-size: 2.1rem; }
  .pie-caja { flex-direction: column; align-items: flex-start; }
}

/* ---------- Menos movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .revelar { opacity: 1; transform: none; transition: none; }
  .js .titular .linea > span,
  .js .chip, .js .entrada, .js .portada-botones, .js .datos-duros,
  .js .corte, .js .corte .onda-ruido, .js .corte .onda-calma,
  .js .corte .humo, .js .local-mapa .pulso,
  .js .escena-lienzo, .escena-orbita, .onda3d,
  .cinta-pista {
    animation: none;
  }
  .js .corte .humo { opacity: 0.15; }
  .boton, .pieza-dibujo, .pieza-ir svg, .ficha, .pieza-tarjeta,
  .cinta-lista a, .wa-flotante, .dos-vistas .vista { transition: none; }
  .paso { transition: none; scale: 1; }
}