/* ============================================================
   DRONE STORE — Landing y catálogo
   Componentes que solo usan index.html y productos.html.
   ============================================================ */

/* ============================================================
   Hero

   La foto de origen es un cielo azul brillante con el dron al
   centro. Texto blanco centrado encima resulta ilegible y además
   choca con el dron. Se usa la composición de la foto: velo
   oscuro por la izquierda para el texto, dron despejado a la
   derecha. La imagen no se toca.
   ============================================================ */
.banda--hero{--banda-h:min(100dvh,860px);place-items:stretch}
.banda--hero .banda__fondo img{
  /* sin máscara radial: aquí el degradado lo hace el velo */
  -webkit-mask-image:none;mask-image:none;
  /* Un porcentaje BAJO desplaza el encuadre a la izquierda, con lo que el
     dron (centrado en la foto) se mueve a la derecha y deja libre el texto. */
  object-position:14% center;
}
.banda__velo{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg,var(--void) 0%,rgba(10,10,10,.92) 22%,rgba(10,10,10,.55) 48%,rgba(10,10,10,.12) 72%,transparent 100%),
    linear-gradient(to bottom,rgba(10,10,10,.55) 0%,transparent 22%,transparent 72%,var(--void) 100%);
}
.banda--hero .banda__contenido{
  max-width:var(--maxw);width:100%;margin-inline:auto;
  text-align:left;align-self:center;
}
.banda--hero .h-display{margin-block:1.4rem 1.6rem;max-width:13ch}
.banda--hero .lead{margin-inline:0;max-width:44ch}
.banda__acciones{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.4rem}
.banda__num{
  position:absolute;bottom:2.4rem;left:var(--gutter);
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;color:var(--steel-dim);
}

/* ---------- Rejilla de productos ---------- */
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.products-grid.grid-4{grid-template-columns:repeat(4,1fr)}
.products-grid.grid-2{grid-template-columns:1fr 1fr}
.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.catalog-grid.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  position:relative;background:var(--carbon);border:1px solid var(--hairline);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
  will-change:transform;
}
.card:hover{border-color:#4a4a4a;transform:translateY(-4px)}
.card__media{position:relative;overflow:hidden;aspect-ratio:16/11;background:#000}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .6s var(--ease);filter:brightness(.92)}
.card:hover .card__media img{transform:scale(1.05);filter:brightness(1.08)}
.card__tag{
  position:absolute;top:1rem;left:1rem;z-index:2;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel);background:rgba(10,10,10,.6);backdrop-filter:blur(6px);
  padding:.35rem .7rem;border:1px solid var(--hairline);border-radius:2px;
}
.card__body{padding:1.6rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card__code{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;color:var(--steel-dim)}
.card__title{font-family:var(--f-display);font-size:1.5rem;font-weight:700}
.card__desc{color:var(--steel);font-size:.92rem;flex:1}
.card__link{margin-top:.8rem;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ghost)}
.card__link .ico{transition:transform .3s var(--ease)}
.card:hover .card__link .ico{transform:translateX(5px)}

/* Destacada en formato banner: la foto del hero es 2000x794 (ratio 2.52).
   Estirarla en una columna vertical deja un recorte de puro cielo — es el
   defecto de V1. Con un contenedor casi de la misma proporción no se
   recorta prácticamente nada (R4). */
.card--featured{grid-column:span 2;grid-row:span 1;flex-direction:column}
.card--featured .card__media{aspect-ratio:21/9}
.card--featured .card__media img{object-position:center 42%}
.card--featured .card__body{padding:clamp(1.6rem,3vw,2.4rem)}
.card--featured .card__title{font-size:clamp(1.8rem,3vw,2.4rem)}
.card--featured .card__desc{max-width:52ch}

/* Catálogo: TILES CINEMATOGRÁFICOS. Cada tarjeta usa la foto hero del producto
   (o el póster de su hero-video / una foto de escena), recortada a 16:11 y a
   sangre — como las tarjetas destacadas. Sustituye a las miniaturas 300x300
   sobre blanco, que se veían borrosas al ampliarse (el cliente lo pidió).
   Hereda el .card__media por defecto (cover, oscurecido, hover) y el .card__tag
   sobre foto; sin overrides. La foto de escena de EAVision (fumigación/vuelo)
   reemplaza al render sobre blanco, que en un tile a sangre quedaría casi todo
   blanco. */

.sect-more{display:flex;justify-content:center;margin-top:clamp(2rem,4vw,3rem)}

/* ---------- Barra de filtros ---------- */
.filterbar{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2.5rem}
.filter-btn{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
  padding:.7rem 1.3rem;border:1px solid var(--hairline);border-radius:var(--radius);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.filter-btn:hover{color:var(--ghost);border-color:#444}
.filter-btn.active{background:var(--white);color:var(--void);border-color:var(--white);font-weight:700}
.catalog-grid .card{transition:opacity .35s var(--ease),transform .35s var(--ease),border-color .4s var(--ease)}
.catalog-grid .card.hide{opacity:0;transform:scale(.92);pointer-events:none}

/* ---------- Soluciones ---------- */
.solutions{display:grid;grid-template-columns:1fr 1fr;position:relative}
.solutions::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--hairline)}
.track{padding:clamp(1rem,3vw,2.5rem) clamp(1.5rem,4vw,4rem)}
.track:first-child{padding-left:0}
.track:last-child{padding-right:0}
.track > h3{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:2rem}
.track__item{display:flex;gap:1.2rem;padding-block:1.4rem;border-top:1px solid var(--hairline)}
.track__item .ico{flex:none;width:26px;height:26px;color:var(--ghost);margin-top:.2rem}
.track__item h4{font-family:var(--f-display);font-size:1.1rem;font-weight:600;margin-bottom:.3rem}
.track__item p{color:var(--steel);font-size:.9rem}

/* ---------- Filas de especificaciones ---------- */
.spec-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-block:1.35rem;position:relative}
.spec-row::before{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:var(--hairline);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.in-view .spec-row::before{transform:scaleX(1)}
.placa .spec-row::before{background:var(--placa-linea)}
.spec-row .label{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.placa .spec-row .label{color:#6a6a6a}
.spec-row .value{font-family:var(--f-mono);font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--ghost);font-weight:700}
.placa .spec-row .value{color:var(--void)}
.spec-row .value .unit{font-size:.85rem;color:var(--steel);margin-left:.3rem}

/* ---------- Por qué ---------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.why-item{padding:2.2rem 1.8rem;border-left:1px solid var(--hairline)}
.why-item:first-child{border-left:none;padding-left:0}
.why-item .num{font-family:var(--f-mono);font-size:.72rem;color:var(--steel-dim);letter-spacing:.14em;margin-bottom:1.4rem}
.why-item h3{font-size:1.35rem;font-weight:600;margin-bottom:.8rem}
.why-item p{color:var(--steel);font-size:.9rem}

/* ---------- CTA ---------- */
.cta{max-width:640px}
.cta h2{margin-bottom:1.4rem}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .card--featured{grid-column:span 3;grid-row:span 1;flex-direction:column}
  .card--featured .card__media{aspect-ratio:16/9}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .why-item:nth-child(3){border-left:none;padding-left:0}
}
@media (max-width:860px){
  /* En vertical, un recorte de una foto 2.52:1 deja fuera al dron. Se apila:
     texto arriba, foto completa debajo a su proporción real (R4). */
  .banda--hero{--banda-h:auto;display:flex;flex-direction:column;padding-block:7.5rem 0}
  .banda--hero .banda__contenido{order:1;align-self:auto}
  .banda--hero .banda__fondo{order:2;position:relative;inset:auto;z-index:0;margin-top:2.6rem}
  .banda--hero .banda__fondo img{height:auto;aspect-ratio:2000/794;object-position:center;transform:none}
  .banda--hero .banda__velo{display:none}
  .banda__num{display:none}
  .products-grid,.products-grid.grid-4{grid-template-columns:1fr 1fr}
  .catalog-grid,.catalog-grid.grid-4{grid-template-columns:1fr 1fr}
  .solutions{grid-template-columns:1fr}
  .solutions::before{display:none}
  .track{padding:0}
  .track:last-child{margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--hairline)}
}
@media (max-width:560px){
  .products-grid,.products-grid.grid-4,.products-grid.grid-2{grid-template-columns:1fr}
  .catalog-grid,.catalog-grid.grid-4{grid-template-columns:1fr}
  .card--featured{grid-column:span 1}
  .why-grid{grid-template-columns:1fr}
  .why-item{border-left:none;padding-left:0}
  .banda__acciones{flex-direction:column;align-items:stretch}
  .banda__acciones .btn{justify-content:center}
}