/* ==========================================================================
   INSECTA REPTILIA — sitio público
   sitio.css · portada, rack de ejemplares y ficha
   ========================================================================== */

/* ---------- Ritmo de secciones ---------- */
.seccion { padding-block: var(--bloque); }
.seccion.es-pegada { padding-top: 0; }

.seccion-cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.seccion-titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.seccion-nota { max-width: 46ch; color: var(--tinta-suave); }

/* ---------- Revelado ---------- */
[data-revelar] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-revelar].es-visible { opacity: 1; transform: none; }

/* ==========================================================================
   PORTADA — el héroe no promete, enseña: el último ejemplar publicado
   ========================================================================== */

.heroe {
  padding-top: clamp(40px, 7vw, 84px);
  padding-bottom: var(--bloque);
  border-bottom: var(--trazo);
}

.heroe-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.heroe-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.heroe-eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--brasa);
}

.heroe-titulo {
  font-size: clamp(2.75rem, 7.2vw, 5.25rem);
  margin-bottom: 24px;
}
.heroe-titulo em {
  font-style: normal;
  color: var(--cian-fuerte);
}

.heroe-lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--tinta-suave);
  max-width: 46ch;
  margin-bottom: 30px;
}

.heroe-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.heroe-conteo {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding-top: 24px;
  border-top: var(--trazo);
}
.heroe-conteo-dato { display: flex; align-items: baseline; gap: 8px; }
.heroe-conteo-num {
  font-family: var(--dato);
  font-weight: 600;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}

/* --- Ejemplar destacado del héroe --- */
.destacado {
  background: var(--papel);
  border: var(--trazo);
  border-radius: var(--r);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}
.destacado-tira {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--tinta);
  color: var(--papel);
}
.destacado-tira .rotulo { color: var(--limo); }
.destacado-tira-cod { font-family: var(--dato); font-size: 0.75rem; font-weight: 600; }

.destacado-lamina {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--tinta);
  overflow: hidden;
}
.destacado-lamina img { width: 100%; height: 100%; object-fit: cover; }

.destacado-cuerpo { padding: 20px 22px 22px; }
.destacado-nombre {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.destacado-morph { color: var(--brasa-fuerte); font-weight: 600; font-size: 0.9375rem; }
.destacado-cientifico { font-style: italic; color: var(--tinta-tenue); font-size: 0.9375rem; margin-bottom: 16px; }

.destacado-banda { padding-block: 16px; border-block: var(--trazo); margin-bottom: 18px; }

.destacado-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.destacado-precio {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}

/* ==========================================================================
   RACK — la retícula de ejemplares
   ========================================================================== */

.filtros {
  position: sticky;
  top: 80px;
  z-index: 40;
  background: color-mix(in srgb, var(--piedra) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: var(--trazo);
  padding-block: 14px;
  margin-bottom: 32px;
}
.filtros-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filtros-fila + .filtros-fila { margin-top: 10px; }
.filtros-grupo { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }

.filtros-etq {
  font-family: var(--dato);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  width: 68px;
  flex-shrink: 0;
}

.chip {
  padding: 7px 13px;
  font-family: var(--dato);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: 1px solid var(--limo);
  border-radius: 2px;
  background: transparent;
  color: var(--tinta-suave);
  transition: background var(--paso), color var(--paso), border-color var(--paso);
  white-space: nowrap;
}
.chip:hover { border-color: var(--tinta); color: var(--tinta); }
.chip[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

.buscador {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--limo);
  border-radius: 2px;
  padding: 7px 12px;
  background: var(--papel);
  min-width: 220px;
}
.buscador:focus-within { border-color: var(--tinta); }
.buscador input { border: none; outline: none; background: none; width: 100%; font-size: 0.9375rem; }
.buscador input::placeholder { color: var(--tinta-tenue); }

.rack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 22px;
}

.rack-conteo { font-family: var(--dato); font-size: 0.75rem; color: var(--tinta-tenue); margin-bottom: 20px; }

/* --- Tarjeta = placa de ejemplar --- */
.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--papel);
  border: var(--trazo);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform var(--paso), box-shadow var(--paso), border-color var(--paso);
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--tinta); }
.tarjeta.es-agotada { opacity: 0.62; }

.tarjeta-cara { display: flex; flex-direction: column; flex: 1; }

.tarjeta-lamina {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--tinta);
  overflow: hidden;
}
.tarjeta-lamina img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tarjeta:hover .tarjeta-lamina img { transform: scale(1.045); }

.tarjeta-codigo {
  position: absolute;
  top: 0; left: 0;
  padding: 5px 9px;
  background: var(--tinta);
  color: var(--papel);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.tarjeta-estado { position: absolute; top: 8px; right: 8px; background: var(--papel); }

.lamina-vacia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  background: var(--tinta);
  color: var(--limo);
}
.lamina-vacia-esp {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-align: center;
  max-width: 80%;
  color: var(--papel);
}
.lamina-vacia .rotulo { color: var(--tinta-tenue); }

.tarjeta-cuerpo { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.tarjeta-clase { margin-bottom: 5px; }
.tarjeta-nombre {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.tarjeta-morph { color: var(--brasa-fuerte); font-weight: 600; font-size: 0.875rem; }
.tarjeta-cientifico { font-style: italic; color: var(--tinta-tenue); font-size: 0.875rem; }
.tarjeta-meta {
  font-size: 0.6875rem;
  color: var(--tinta-suave);
  margin-block: 10px 12px;
  padding-top: 10px;
  border-top: var(--trazo);
}
.tarjeta-cuerpo .banda { margin-top: auto; }

.tarjeta-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: var(--trazo);
  background: var(--piedra);
}
.tarjeta-pie-izq { display: flex; flex-direction: column; gap: 4px; }
.tarjeta-precio {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}
.tarjeta-agotado { color: var(--tinta-tenue); }
.tarjeta-wa { flex-shrink: 0; }

/* --- Sin resultados --- */
.vacio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 24px;
  border: 1px dashed var(--limo);
  border-radius: var(--r);
}
.vacio-titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.vacio p { color: var(--tinta-suave); max-width: 44ch; margin: 0 auto 18px; }

/* ==========================================================================
   CÓMO SE COMPRA — franja oscura, tres pasos reales
   ========================================================================== */

.pasos { background: var(--tinta); color: var(--papel); }
.pasos .seccion-titulo { color: var(--papel); }
.pasos .rotulo { color: var(--limo); }

.pasos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: rgba(185, 190, 178, 0.28);
  border: 1px solid rgba(185, 190, 178, 0.28);
  border-radius: var(--r);
  overflow: hidden;
}
.paso { background: var(--tinta); padding: 28px 26px 30px; }
.paso-num {
  font-family: var(--dato);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brasa);
  display: block;
  margin-bottom: 16px;
}
.paso-titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.paso p { color: var(--limo); font-size: 0.9375rem; }

/* ==========================================================================
   ANTES DE COMPRAR
   ========================================================================== */

.aviso-previo { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 40px; }
.aviso-previo-item { padding-block: 22px; border-top: var(--trazo); }
.aviso-previo-item h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.aviso-previo-item p { color: var(--tinta-suave); font-size: 0.9375rem; }

/* ==========================================================================
   FICHA
   ========================================================================== */

.migas { padding-block: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.migas a { font-family: var(--dato); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.migas a:hover { color: var(--cian-fuerte); }
.migas-cod { font-family: var(--dato); font-size: 0.6875rem; font-weight: 600; color: var(--tinta-tenue); }

.ficha { padding-block: 28px var(--bloque); }
.ficha-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 56px);
  align-items: start;
}

/* --- Galería --- */
.galeria-principal {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--tinta);
  border-radius: var(--r);
  overflow: hidden;
  border: var(--trazo);
}
.galeria-principal img { width: 100%; height: 100%; object-fit: cover; }
.galeria-codigo {
  position: absolute;
  top: 0; left: 0;
  padding: 8px 12px;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--dato);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.galeria-tiras { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.galeria-tira {
  width: 70px; height: 70px;
  border: 2px solid transparent;
  border-radius: 2px;
  overflow: hidden;
  background: var(--tinta);
  padding: 0;
  transition: border-color var(--paso);
}
.galeria-tira img { width: 100%; height: 100%; object-fit: cover; }
.galeria-tira[aria-current="true"] { border-color: var(--tinta); }

/* --- Columna de compra --- */
.ficha-clase { margin-bottom: 12px; }
.ficha-nombre { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: 6px; }
.ficha-morph {
  font-family: var(--dato);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brasa-fuerte);
  margin-bottom: 4px;
}
.ficha-cientifico { font-style: italic; color: var(--tinta-tenue); margin-bottom: 22px; }

.ficha-compra {
  background: var(--papel);
  border: var(--trazo);
  border-radius: var(--r);
  padding: 20px 22px 22px;
  margin-bottom: 26px;
}
.ficha-precio-fila { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.ficha-precio {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  letter-spacing: -0.035em;
  line-height: 1;
}
.ficha-compra-acciones { display: grid; gap: 10px; }
.ficha-compra-nota { font-size: 0.8125rem; color: var(--tinta-tenue); margin-top: 12px; }

.ficha-descripcion { font-size: 1.0625rem; color: var(--tinta-suave); margin-bottom: 26px; }

/* --- Tabla de datos del ejemplar --- */
.hoja { margin-bottom: 26px; }
.hoja-titulo {
  font-family: var(--dato);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--tinta);
  margin-bottom: 4px;
}
.hoja-fila {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
  padding-block: 11px;
  border-bottom: var(--trazo);
  font-size: 0.9375rem;
}
.hoja-etq { color: var(--tinta-tenue); }
.hoja-val { font-weight: 500; }
.hoja-val.es-dato { font-family: var(--dato); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

.hoja-banda { padding: 20px 22px; background: var(--papel); border: var(--trazo); border-radius: var(--r); }
.hoja-banda-nota { font-size: 0.8125rem; color: var(--tinta-tenue); margin-top: 14px; padding-top: 14px; border-top: var(--trazo); }

/* --- Relacionados --- */
.relacionados { border-top: var(--trazo); padding-top: var(--bloque); }

/* ==========================================================================
   PIE
   ========================================================================== */

.pie { background: var(--tinta); color: var(--limo); padding-block: 56px 32px; }
.pie .marca { --logo: 78px; }
.pie a:hover { color: var(--papel); }
.pie-rejilla { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); gap: 40px; }
.pie-lema { max-width: 34ch; margin-top: 18px; font-size: 0.9375rem; }
.pie h4 {
  font-family: var(--dato);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel);
  margin-bottom: 14px;
}
.pie li { margin-bottom: 9px; font-size: 0.9375rem; }
.pie-legal {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(185, 190, 178, 0.22);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
}

/* ---------- Botón flotante de WhatsApp ---------- */
.flotante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 17px;
  background: var(--tinta);
  color: var(--papel);
  border-radius: 999px;
  box-shadow: var(--sombra-alta);
  font-family: var(--dato);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform var(--paso);
}
.flotante:hover { transform: translateY(-2px); }

/* ---------- Aviso flotante ---------- */
.aviso {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 130%);
  z-index: 90;
  background: var(--tinta);
  color: var(--papel);
  padding: 13px 20px;
  border-radius: var(--r);
  font-size: 0.9375rem;
  box-shadow: var(--sombra-alta);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  max-width: min(92vw, 460px);
}
.aviso.es-visible { transform: translate(-50%, 0); }
.aviso.es-error { background: var(--brasa-fuerte); }

/* ---------- Franja de modo demostración ---------- */
.demo-franja {
  background: var(--brasa);
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  font-family: var(--dato);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.demo-franja a { text-decoration: underline; }

/* ---------- Carga ---------- */
.cargando { grid-column: 1 / -1; padding: 64px 0; text-align: center; color: var(--tinta-tenue); font-family: var(--dato); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ==========================================================================
   ADAPTACIÓN
   ========================================================================== */

@media (max-width: 980px) {
  .heroe-rejilla { grid-template-columns: 1fr; gap: 40px; }
  .ficha-rejilla { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* Fija ocuparía casi la mitad de la pantalla: en móvil se queda arriba del rack
     y cada grupo de chips se desplaza en horizontal. */
  .filtros { position: static; padding-block: 12px 16px; }
  .filtros-fila { flex-wrap: nowrap; align-items: center; }
  .filtros-etq { width: auto; }
  .filtros-grupo {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .filtros-grupo::-webkit-scrollbar { display: none; }
  .filtros-fila.es-busqueda { flex-wrap: wrap; }
  .filtros-fila.es-busqueda .filtros-grupo { flex: 1 1 auto; }
  .buscador { margin-left: 0; flex: 1 0 100%; margin-top: 4px; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 560px) {
  .rack { grid-template-columns: 1fr; gap: 18px; }
  .tarjeta-pie { flex-direction: column; align-items: stretch; }
  .tarjeta-wa { width: 100%; }
  .heroe-conteo { gap: 8px 18px; }
  .pie-rejilla { grid-template-columns: 1fr; }
  .flotante span { display: none; }
  .flotante { padding: 15px; }
}