/* Landings por ciudad · sistema D. Lo genera sistema-d/herramientas/construir-tema.js desde plantilla/sistema.css y
   ciudades/<slug>.css: no se edita a mano. Solo lo carga custom-portada-ciudad.hbs. */
/* SISTEMA D · «Día» — hero de las landings por ciudad de Autopaquete (elegido por Juan, 9-nov-2026).
   Escenario claro a sangre en tres capas: cielo (H1 y botones), horizonte (línea roja) y suelo (subtítulo y confianza).
   El monumento se para sobre el horizonte; dos cajas de Autopaquete flotan: una al pie y otra junto al monumento.
   Rojo de marca: la ciudad del H1, la segunda línea, el horizonte, el botón principal y la cinta con el nombre del
   monumento. Nada detrás del monumento.
   Los valores de geometría de este archivo son los de Guadalajara (La Minerva). Cada ciudad ajusta solo su geometría
   en ciudades/<slug>.css, con el prefijo .vgd--<slug>. Especificación completa: ../README.md */

.vg-dia{
  --vgd-tinta:#1C1C1C;
  --vgd-rojo:#a10203;
  --vgd-rojo-vivo:#c8100e;
  position:relative;isolation:isolate;overflow:hidden;
  padding:0;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  color:var(--vgd-tinta);
  background:
    radial-gradient(46% 34% at 74% 80%,rgba(200,16,14,.06) 0%,rgba(161,2,3,.025) 45%,rgba(161,2,3,0) 74%),
    linear-gradient(180deg,#ffffff 0%,#fdfcfc 46%,#faf8f7 70%,#f6f3f2 100%);
}
/* Fuera el brillo y la ruta de la base: aquí el color lo pone el horizonte */
.vg-dia.hero::before,.vg-dia.hero::after{display:none}

.vg-dia.hero .container{position:static;z-index:auto;flex:1;display:flex;width:100%}
.vg-dia .vgd-escena{flex:1;display:grid;grid-template-rows:1fr auto;min-width:0;padding-top:112px}

/* ---------- Cielo: titular y botones ---------- */
.vg-dia .vgd-titulo{position:relative;z-index:3;align-self:center;max-width:720px;padding-bottom:clamp(40px,8vh,110px)}
.vg-dia.hero h1{
  margin:0;color:var(--vgd-tinta);font-weight:800;
  font-size:clamp(44px,5.3vw,80px);line-height:.98;letter-spacing:-.04em;
  text-wrap:balance;
}
.vg-dia.hero h1 .ciudad{color:var(--vgd-rojo)}
.vg-dia.hero h1 em{
  display:block;margin-top:.62em;
  font-size:.4em;font-weight:600;line-height:1.2;letter-spacing:-.01em;
  color:var(--vgd-rojo);
}

.vg-dia .hero-ctas{margin:38px 0 0;gap:14px}
.vg-dia .btn-primary{
  background:linear-gradient(180deg,#bf0608 0%,#a10203 55%,#8a0102 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,150,140,.4),0 14px 30px -12px rgba(161,2,3,.6);
}
.vg-dia .btn-primary:hover{background:linear-gradient(180deg,#d20a0c 0%,#b00304 60%,#960102 100%);box-shadow:inset 0 1px 0 rgba(255,170,160,.45),0 18px 36px -12px rgba(161,2,3,.75)}
.vg-dia .btn-secondary{color:var(--vgd-tinta);border-color:#E0E0E0;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vg-dia .btn-secondary:hover{border-color:var(--vgd-tinta);background:#fff}
.vg-dia .btn-primary:focus-visible,.vg-dia .btn-secondary:focus-visible{outline:2px solid var(--vgd-tinta);outline-offset:3px}

/* ---------- Horizonte y suelo ---------- */
.vg-dia .vgd-suelo{
  position:relative;
  display:grid;grid-template-columns:minmax(0,640px);gap:12px;align-content:start;
  padding:26px 0 34px;
}
.vg-dia .vgd-suelo>*{position:relative;z-index:3}
.vg-dia .vgd-suelo-texto{display:grid;gap:inherit;min-width:0}
/* la línea del horizonte: roja, de lado a lado, más intensa detrás del monumento */
.vg-dia .vgd-suelo::before{
  content:'';position:absolute;z-index:0;top:0;left:calc(50% - 50vw);width:100vw;height:2px;
  background:linear-gradient(90deg,rgba(161,2,3,0) 0%,rgba(161,2,3,.45) 22%,var(--vgd-rojo) 66%,var(--vgd-rojo-vivo) 76%,rgba(161,2,3,.5) 90%,rgba(161,2,3,0) 100%);
  box-shadow:0 0 12px 1px rgba(200,16,14,.28),0 0 60px 14px rgba(161,2,3,.08);
}
/* el suelo: apenas más cálido que el cielo, con un reflejo muy leve del horizonte */
.vg-dia .vgd-suelo::after{
  content:'';position:absolute;z-index:0;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  background:linear-gradient(180deg,rgba(161,2,3,.035) 0%,rgba(161,2,3,.01) 45%,rgba(161,2,3,0) 100%);
}
.vg-dia .hvx-sub{margin:0;max-width:none;font-size:16px;line-height:1.6;color:var(--gray-600)}
.vg-dia .hvx-trust{margin:0;font-size:14px;line-height:1.5;color:var(--gray-600)}
.vg-dia .hvx-trust strong{color:var(--vgd-tinta)}

/* ---------- Arte: el monumento sobre el horizonte ---------- */
.vg-dia .vgd-arte{position:absolute;z-index:1;inset:0;margin:0;pointer-events:none}
.vg-dia .vgd-pieza{
  position:absolute;top:96px;left:calc(50% + 40px);
  height:128%;aspect-ratio:773/1293;
}
/* la sombra va en la capa de afuera y el desvanecido en la de adentro: si van juntos, la sombra se corta
   en línea recta donde el monumento toca la orilla de su imagen (las alas del Ángel) */
.vg-dia .vgd-luz{position:absolute;inset:0;filter:drop-shadow(0 24px 30px rgba(60,16,16,.16))}
.vg-dia .vgd-monumento{
  position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.6) 60%,rgba(0,0,0,.2) 68%,transparent 76%);
  mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.6) 60%,rgba(0,0,0,.2) 68%,transparent 76%);
}
.vg-dia .vgd-monumento-img{display:block;width:100%;height:100%;max-width:none;margin:0;filter:contrast(1.06) saturate(.95)}

/* la caja flota delante del pedestal, cruzando el horizonte (misma geometría que «Noche») */
.vg-dia .vgd-suelo>.vgd-caja{
  position:absolute;z-index:2;
  left:calc(50% + 40px + 13.25svh);top:-8svh;width:15svh;
  transform:rotate(-11deg);
  filter:drop-shadow(0 22px 18px rgba(60,16,16,.24)) drop-shadow(0 2px 3px rgba(60,16,16,.18));
  animation:vgd-flota 6s ease-in-out infinite alternate;
  pointer-events:none;
}
.vg-dia .vgd-caja-luz{position:relative;clip-path:inset(1% 1.2% 1.4% 2.6%)}
.vg-dia .vgd-caja img{display:block;width:100%;height:auto;max-width:none;margin:0}

/* segunda caja: flota junto al monumento (en Guadalajara, junto al codo del escudo de La Minerva).
   Se mide sobre la pieza, así sigue al monumento en cualquier pantalla */
.vg-dia .vgd-caja2{
  position:absolute;z-index:2;left:66%;top:20.5%;width:16%;
  transform:rotate(12deg);
  filter:drop-shadow(0 18px 16px rgba(60,16,16,.2)) drop-shadow(0 2px 3px rgba(60,16,16,.16));
  animation:vgd-flota2 7s ease-in-out -2s infinite alternate;
}
.vg-dia .vgd-recorte{clip-path:inset(1% 1.2% 1.4% 2.6%)}
.vg-dia .vgd-caja2 img{display:block;width:100%;height:auto;max-width:none;margin:0}

/* nombre del monumento: una tira de cinta de embalaje roja de la marca, como la que cierra un paquete:
   inclinada, con rayado fino de cinta y las puntas cortadas en zigzag (muesca fija de 6 px, igual en todos los nombres).
   Juan la eligió el 10-nov entre placa de bronce, cinta y contorno; antes descartó el punto rojo y el visor de esquinas.
   En escritorio va abajo a la derecha; en tableta y celular, encima del monumento, como título de la imagen,
   para no competir con las cajas */
.vg-dia .vgd-nombre{
  --vgd-muesca:6px;
  position:absolute;z-index:3;right:max(104px,calc(50% - 568px));bottom:34px;margin:0;
  padding:11px 26px;white-space:nowrap;
  font:800 11px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 3px,transparent 3px 7px),
    linear-gradient(180deg,#bb0a0c 0%,var(--vgd-rojo) 55%,#8a0102 100%);
  transform:rotate(-3deg);
  clip-path:polygon(0 0,100% 0,calc(100% - var(--vgd-muesca)) 17%,100% 34%,calc(100% - var(--vgd-muesca)) 50%,
    100% 67%,calc(100% - var(--vgd-muesca)) 84%,100% 100%,0 100%,var(--vgd-muesca) 84%,0 67%,var(--vgd-muesca) 50%,
    0 34%,var(--vgd-muesca) 17%);
}

@keyframes vgd-flota2{from{transform:rotate(12deg) translateY(0)}to{transform:rotate(9deg) translateY(-7px)}}
@keyframes vgd-flota{from{transform:rotate(-11deg) translateY(0)}to{transform:rotate(-9deg) translateY(-8px)}}
@media (prefers-reduced-motion:reduce){
  .vg-dia .vgd-caja,.vg-dia .vgd-caja2{animation:none}
}

/* ---------- Pantallas medianas ---------- */
@media (max-width:1100px) and (min-width:901px){
  .vg-dia .vgd-titulo{max-width:560px}
  .vg-dia .vgd-pieza{left:calc(50% + 10px)}
  .vg-dia .vgd-suelo>.vgd-caja{left:calc(50% + 10px + 13.25svh)}
}

/* ---------- Tableta y celular: el escenario se apila ---------- */
@media (max-width:900px){
  .vg-dia{min-height:0}
  .vg-dia .vgd-escena{grid-template-rows:auto auto auto;padding-top:100px}
  .vg-dia .vgd-titulo{max-width:620px;padding-bottom:0;align-self:start}
  .vg-dia .vgd-arte{position:relative;inset:auto;height:440px;margin:76px 0 0 calc(50% - 50vw);width:100vw}
  .vg-dia .vgd-pieza{top:8px;left:calc(58% - 186px);height:620px}
  .vg-dia .vgd-suelo>.vgd-caja{width:100px;top:-50px;left:calc(50% + 8vw - 30px)}
  .vg-dia .vgd-nombre{right:auto;left:32px;bottom:auto;top:-50px}
  .vg-dia .vgd-suelo{grid-template-columns:1fr;gap:14px;padding:30px 0 44px}
}
@media (min-width:601px) and (max-width:900px){
  .vg-dia.hero h1{font-size:7.4vw}
  .vg-dia .vgd-arte{height:560px}
  .vg-dia .vgd-pieza{top:6px;height:800px;left:calc(60% - 254px)}
  .vg-dia .vgd-suelo>.vgd-caja{width:130px;top:-70px;left:calc(50% + 10vw - 176px)}
  .vg-dia .vgd-suelo{padding-top:80px}
}
@media (max-width:600px){
  .vg-dia.hero h1{font-size:clamp(33px,9.5vw,46px);line-height:1.02;letter-spacing:-.04em}
  .vg-dia.hero h1 em{font-size:.5em;margin-top:.7em}
  .vg-dia .hero-ctas{flex-direction:column;align-items:stretch;margin-top:28px;gap:12px}
  .vg-dia .hero-ctas a{justify-content:center;min-height:52px}
  .vg-dia .vgd-arte{height:420px}
  .vg-dia .vgd-pieza{left:calc(62% - 186px)}
  .vg-dia .vgd-suelo>.vgd-caja{width:110px;top:-62px;left:calc(50% + 12vw - 130px)}
  .vg-dia .vgd-caja2{width:19%}
  .vg-dia .vgd-suelo{padding-top:66px}
}

/* Guadalajara · La Minerva: usa la geometría base de plantilla/sistema.css, sin ajustes. */

/* CDMX · Ángel de la Independencia (forma alta, 550×1500).
   La Victoria y el capitel van arriba del horizonte; la columna baja y se desvanece en el suelo.
   La caja de la pieza flota a la derecha de la mano con la cadena rota. */
.vgd--cdmx .vgd-pieza{left:calc(50% + 170px);height:101%;aspect-ratio:550/1500}
.vgd--cdmx .vgd-monumento{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.18) 80%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.18) 80%,transparent 88%);
}
.vgd--cdmx .vgd-caja2{left:88%;top:26%;width:30%}
@media (min-width:901px){
  /* la caja del pie un poco más abajo que la base, para no chocar con el capitel, pero sin bajar hasta la cinta
     con el nombre del monumento, que pasa debajo de ella */
  .vgd--cdmx .vgd-suelo>.vgd-caja{left:calc(50% + 170px + 2svh);top:-6.5svh}
  /* en escritorio la columna se apaga antes, para que el nombre del monumento no quede encima de ella */
  .vgd--cdmx .vgd-monumento{
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.15) 75%,transparent 78%);
    mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.15) 75%,transparent 78%);
  }
}
/* «Ciudad de México» no se parte en dos renglones donde cabe entero */
@media (min-width:601px){
  .vgd--cdmx.vg-dia.hero h1 .ciudad{white-space:nowrap}
}
@media (min-width:1367px){
  .vgd--cdmx .vgd-titulo{max-width:760px}
}
/* en pantallas grandes la caja del pie se corre a la izquierda y sube un poco: la cinta con el nombre del monumento
   pasa debajo sin rozarla (a 1920 la caja crece con la altura de la pantalla y bajaba hasta la cinta) */
@media (min-width:1600px){
  .vgd--cdmx .vgd-suelo>.vgd-caja{left:calc(50% + 130px + 2svh);top:-8svh}
}

@media (max-width:1100px) and (min-width:901px){
  .vgd--cdmx .vgd-pieza{left:calc(50% + 110px)}
  .vgd--cdmx .vgd-suelo>.vgd-caja{left:calc(50% + 110px + 2svh)}
}
@media (max-width:900px){
  .vgd--cdmx .vgd-pieza{height:560px;left:calc(62% - 102px)}
}
@media (min-width:601px) and (max-width:900px){
  .vgd--cdmx .vgd-pieza{height:720px;left:calc(60% - 132px)}
}
@media (max-width:600px){
  .vgd--cdmx .vgd-pieza{left:calc(62% - 102px)}
  .vgd--cdmx .vgd-caja2{width:24%;left:84%}
}
@media (max-width:374px){
  .vgd--cdmx .vgd-pieza{left:calc(62% - 110px)}
  .vgd--cdmx .vgd-caja2{width:22%}
}

/* Monterrey · Cerro de la Silla v2 (forma ancha, 1536×375), generado con las fotos que mandó Juan.
   Cumbre redonda a la izquierda; la silla, aguja alta y cumbre redonda más baja con una muesca entre ambas,
   a la derecha del centro (58 % del ancho); cresta que baja a la derecha.
   La montaña se ancla al horizonte y se sale por la derecha. Su base viene desvanecida con transparencia
   (herramientas/rampa-base.js, filas 290 a 375) y la línea roja cruza esa franja al 88 % del alto de la imagen:
   bottom = alto del suelo (≈143px) − 12 % del alto de la imagen. La orilla izquierda se funde con el cielo.
   La caja de la pieza flota arriba de la silla. */
.vgd--mty .vgd-pieza{top:auto;left:auto;right:-10vw;bottom:calc(143px - 2.23vw);width:76vw;height:auto;aspect-ratio:1536/375}
.vgd--mty .vgd-monumento{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 12%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 12%);
}
.vgd--mty .vgd-caja2{left:53.8%;top:-38%;width:9%}
@media (min-width:901px){
  .vgd--mty .vgd-suelo>.vgd-caja{left:calc(50% + 80px)}
}
/* pantallas grandes: la montaña crece para no dejar vacío el cuadrante de arriba */
@media (min-width:1600px){
  .vgd--mty .vgd-pieza{width:84vw;right:-14vw;bottom:calc(143px - 2.46vw)}
}

@media (max-width:900px){
  .vgd--mty .vgd-arte{height:290px}
  .vgd--mty .vgd-pieza{top:auto;left:auto;right:-40vw;bottom:-5.9vw;width:200vw;height:auto}
  .vgd--mty .vgd-caja2{width:10%;top:-38%}
}
@media (min-width:601px) and (max-width:900px){
  .vgd--mty .vgd-arte{height:380px}
  .vgd--mty .vgd-pieza{right:-20vw;width:130vw;bottom:-3.8vw}
}
@media (max-width:600px){
  .vgd--mty .vgd-suelo>.vgd-caja{width:88px;top:-52px}
}