/* Agregados propios de la demo del Halcón, sobre estilos.css de la plantilla */

/* Aviso fijo que lleva a la skill */
.hecha-con {
  position: fixed; left: var(--borde); bottom: 24px; z-index: 20;
  padding: 10px 16px;
  font-size: 12px; letter-spacing: 0.04em; text-decoration: none;
  color: var(--texto-suave);
  background: rgba(9, 9, 10, 0.6); border: 1px solid var(--linea); border-radius: 999px;
  backdrop-filter: blur(6px);
  transition: color .3s, border-color .3s;
}
.hecha-con strong { color: var(--texto); font-weight: 700; }
.hecha-con:hover { color: var(--texto); border-color: var(--acento); }

/* La foto del origen, como de época */
.respiro-foto.sepia img { filter: sepia(0.75) contrast(1.05) brightness(0.8) grayscale(0.2); }

.nota { margin: 8vh 0 0; font-size: 12px; color: #5f5c57; letter-spacing: 0.08em; }
.aviso { margin: 0; font-size: 14px; color: #e7dfd3; }

/* Modelos */
.modelos {
  padding: 18vh var(--borde) 16vh calc(var(--borde) + 120px);
  background: linear-gradient(#09090a, #151517 55%, #09090a);
}
.modelos-vitrina { position: relative; margin: 6vh 0; aspect-ratio: 16 / 9; max-height: 70vh; width: 100%; }
.modelos-vitrina img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: translateX(4%) scale(.97);
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.modelos-vitrina img.activo { opacity: 1; transform: none; }
.modelos-selector { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linea); }
.modelos-selector button {
  position: relative;
  display: grid; gap: 6px; justify-items: start; text-align: left;
  padding: 26px 24px 8px 0;
  background: none; border: 0; color: var(--gris);
  font-size: 14px; cursor: pointer;
  transition: color .4s;
}
.modelos-selector button + button { padding-left: 24px; }
.modelos-selector button::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--acento); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.modelos-selector button.activo { color: var(--texto); }
.modelos-selector button.activo::before { transform: scaleX(1); }
.modelos-selector strong { font-family: var(--fuente-titulos); font-size: 30px; font-weight: 900; text-transform: uppercase; color: var(--texto); }
.modelos-selector em { margin-top: 6px; font-size: 13px; letter-spacing: 0.1em; }
.muestra { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--linea); }
[data-elegir="costa"] .muestra { --c: #9b1c12; }
[data-elegir="gt"] .muestra { --c: #123d2a; }
[data-elegir="noche"] .muestra { --c: #16234f; }

/* Cómo se hizo */
.como-se-hizo {
  padding: 18vh var(--borde) 20vh calc(var(--borde) + 120px);
  border-top: 1px solid var(--linea);
}
.como-se-hizo > p:not(.kicker) { max-width: 52ch; margin: 24px 0 0; color: var(--texto-suave); font-size: 17px; }
.como-se-hizo__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 34px; }

@media (max-width: 860px) {
  .modelos, .como-se-hizo { padding-left: var(--borde); padding-right: var(--borde); }
  .modelos-selector { grid-template-columns: 1fr; }
  .modelos-selector button, .modelos-selector button + button { padding: 18px 0; border-bottom: 1px solid var(--linea); }
  .modelos-selector button > span:not(.muestra) { display: none; }
  .modelos-selector button.activo > span:not(.muestra) { display: block; }
  .hecha-con { bottom: 16px; font-size: 11px; padding: 8px 12px; }
}