/* path: grupo-veterinario/landing-descargas/css/componentes.css
   Packs, fichas, botones y estados. Las piezas reutilizables.
   Parte de la landing de descargables. El índice de qué hay en cada
   fichero está en `landing-descargas/LEEME.md`. */

/* ─── PACKS ─────────────────────────────────────────────
   Los packs eran chips en scroll horizontal. Se cambiaron el 2026-08-21
   porque en móvil se cortan por la derecha y NADIE sabe que hay más: es
   el patrón con peor descubrimiento que existe, y aquí la mitad del
   catálogo vivía escondido detrás de un gesto que nadie hacía.
   Ahora son tarjetas en rejilla: se ven todas de un vistazo.          */
.packs{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.7rem;
  list-style:none;
  margin:0 0 2.4rem;
}
@media (min-width:34rem){ .packs{grid-template-columns:repeat(3, 1fr);gap:.85rem} }
@media (min-width:62rem){ .packs{grid-template-columns:repeat(4, 1fr)} }

.pk{
  --pk:var(--acento);
  display:flex;flex-direction:column;justify-content:space-between;gap:.9rem;
  min-height:5.6rem;padding:.85rem .9rem;
  border:1px solid var(--linea);border-radius:var(--r);
  background:var(--papel-alto);
  text-decoration:none;color:var(--tinta);
  position:relative;overflow:hidden;
  transition:border-color .2s var(--salida), transform .14s var(--salida),
             box-shadow .2s var(--salida);
}
.pk::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(150deg, color-mix(in oklab, var(--pk) 15%, transparent), transparent 62%);
  opacity:.85;
}
.pk > *{position:relative;z-index:1}
@media (hover:hover){ .pk:hover{border-color:var(--pk);box-shadow:var(--sombra)} }
.pk:active{transform:scale(.975)}
.pk .n{
  font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.12;
  letter-spacing:-.015em;
}
.pk .c{font-size:.74rem;color:var(--tinta-tenue)}
.pk .pt{
  width:26px;height:26px;border-radius:8px;
  background:color-mix(in oklab, var(--pk) 88%, black);
  display:grid;place-items:center;
}
.pk .pt svg{width:14px;height:14px;color:#fff}

/* Volver. Sustituye al chip «Todo» perdido en una fila: quien llega desde un
   reel a un pack tiene que ver claro que hay más detrás. */
.volver{
  display:inline-flex;align-items:center;gap:.4rem;
  font:600 .82rem/1 var(--sans);
  color:var(--tinta-media);text-decoration:none;
  padding:.6rem 0;min-height:44px;
  margin-bottom:.4rem;
}
.volver svg{width:14px;height:14px}
.volver:hover{color:var(--acento)}
/* Un `display` explícito gana al `display:none` que el navegador da a [hidden].
   Es el mismo tropiezo que ya hubo con la píldora del pack: si se añade otro
   elemento con `hidden` y display propio, hay que repetir esta línea. */
.volver[hidden]{display:none}

.titulo-seccion{
  font-family:var(--display);font-weight:600;
  font-size:1.15rem;letter-spacing:-.02em;
  margin:0 0 1rem;
}
.titulo-seccion[hidden]{display:none}

/* ─── REJILLA ───────────────────────────────────────────
   Asimétrica a propósito: la primera ficha ocupa dos columnas y enseña la
   portada grande. Lo demás va en rejilla fluida. Nada de tres columnas
   idénticas.                                                            */
main{flex:1}

.rejilla{
  display:grid;
  grid-template-columns:1fr;
  gap:1.1rem;
  list-style:none;
}
@media (min-width:34rem){
  .rejilla{grid-template-columns:repeat(2, 1fr);gap:1.3rem}
  .rejilla > li:first-child{grid-column:span 2}
}
@media (min-width:62rem){
  .rejilla{grid-template-columns:repeat(3, 1fr);gap:1.5rem}
  .rejilla > li:first-child{grid-column:span 2;grid-row:span 2}
}

/* ─── FICHA ─────────────────────────────────────────── */
.ficha{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--papel-alto);
  border:1px solid var(--linea);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--sombra);
  transition:box-shadow .3s var(--salida), border-color .3s var(--salida),
             transform .18s var(--salida);
}
@media (hover:hover){
  .ficha:hover{box-shadow:var(--sombra-alta);border-color:color-mix(in oklab, var(--acento) 45%, var(--linea))}
  .ficha:hover .portada img{transform:scale(1.035)}
}
/* En móvil no hay hover: el dedo necesita respuesta al tocar. */
.ficha:has(.bajar:active){transform:scale(.988)}

.portada{
  position:relative;
  aspect-ratio:4/3;
  background:var(--papel-hondo);
  overflow:hidden;
  border-bottom:1px solid var(--linea);
}
.rejilla > li:first-child .portada{aspect-ratio:16/10}
.portada img{
  width:100%;height:100%;object-fit:cover;object-position:top;
  display:block;
  transition:transform .5s var(--salida);
}
/* Sin miniatura no queda un hueco: queda el color del pack con la inicial. */
.portada.vacia{
  display:grid;place-items:center;
  background:
    linear-gradient(140deg, color-mix(in oklab, var(--acento) 88%, black), var(--acento));
}
.portada.vacia span{
  font-family:var(--display);font-weight:800;font-size:3.4rem;
  color:var(--papel-alto);opacity:.9;
}

/* La píldora del pack. Sustituye a meter el nombre dentro del titular, que
   producía frases sin sentido («Para cuidarlo Yorkie»). */
.pack{
  display:inline-flex;align-items:center;
  margin-top:1.2rem;padding:.45rem .95rem;
  border-radius:99px;
  background:color-mix(in oklab, var(--acento) 12%, transparent);
  color:var(--acento-hondo);
  border:1px solid color-mix(in oklab, var(--acento) 28%, transparent);
  font:600 .82rem/1 var(--sans);
}
@media (prefers-color-scheme: dark){ .pack{color:var(--acento)} }
.pack[hidden]{display:none}

.cuerpo{padding:1.1rem 1.15rem 1.15rem;display:flex;flex-direction:column;flex:1;gap:.45rem}

.ficha h2{
  font-family:var(--display);
  font-weight:600;
  font-size:1.16rem;
  line-height:1.18;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.rejilla > li:first-child h2{font-size:1.55rem}
@media (min-width:62rem){ .rejilla > li:first-child h2{font-size:1.95rem} }

.ficha p{font-size:.9rem;color:var(--tinta-media);flex:1}

.pie{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.85rem}
.peso{font-size:.76rem;color:var(--tinta-tenue);font-variant-numeric:tabular-nums}

.bajar{
  font:600 .86rem/1 var(--sans);
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.72rem 1.05rem;min-height:44px;
  border-radius:99px;
  background:var(--acento);color:var(--papel-alto);
  text-decoration:none;
  transition:background .2s var(--salida), transform .12s var(--salida);
}
@media (prefers-color-scheme: dark){ .bajar{color:#0f1613} }
.bajar:hover{background:var(--acento-hondo)}
.bajar:active{transform:scale(.96)}
.bajar svg{width:15px;height:15px;flex:none}

/* Al tocar, el botón dice que va. NO es una barra de progreso: con una
   redirección el navegador no nos dice cuándo acaba, y medirlo de verdad
   exigiría bajar el fichero a memoria como `blob:`, que es justo lo que
   rompe dentro de Instagram, y son 60 MB en la RAM de un móvil. Un «voy»
   honesto vale más que una barra inventada. */
.bajar[data-yendo="1"]{pointer-events:none;opacity:.85}
.bajar[data-yendo="1"] svg{animation:girando .8s linear infinite}
@keyframes girando{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .bajar[data-yendo="1"] svg{animation:none} }

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

/* ─── MOVIMIENTO ────────────────────────────────────────
   Cada animación responde a una pregunta: la entrada dice «esto acaba de
   llegar», el scroll dice «hay más abajo». Nada gira porque sí.

   Todo con CSS. Las de scroll van dentro de @supports: sin soporte
   (~16 % hoy) la página se ve QUIETA Y ENTERA, que es lo importante:
   nunca invisible esperando un efecto que no va a llegar.               */
@media (prefers-reduced-motion: no-preference){
  .cab > .env > *{
    opacity:0;
    animation:entra .55s var(--salida) forwards;
  }
  .cab > .env > *:nth-child(1){animation-delay:.02s}
  .cab > .env > *:nth-child(2){animation-delay:.1s}
  .cab > .env > *:nth-child(3){animation-delay:.18s}
}
@keyframes entra{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    /* 🔴 SOLO de la cuarta ficha en adelante, y es deliberado.
       Con `both`, el fotograma inicial de una animación de scroll se aplica
       ANTES de que el elemento entre en su rango: si el timeline no se
       resuelve (un navegador raro, una captura sin scroll, un iframe), lo que
       queda es una ficha en `opacity: 0` para siempre. Las tres primeras son
       las que se ven al abrir, así que esas nunca dependen del scroll: entran
       con la animación de carga, que no puede dejarlas invisibles.
       De la cuarta en adelante hace falta scrollear para llegar, y si ahí
       fallara el efecto ya se habría visto que la página funciona. */
    .rejilla > li:nth-child(n+4) .ficha{
      animation:asoma linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 40%;
    }
    @keyframes asoma{ from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none} }
  }
}

/* ─── ESTADOS ───────────────────────────────────────────
   Tres, y distintos: «cargando», «este pack está vacío» y «no se pudo
   cargar» son cosas diferentes y quien mira merece saber cuál le tocó.  */
.hueso{
  border:1px solid var(--linea);border-radius:var(--r);
  background:var(--papel-alto);box-shadow:none;overflow:hidden;
}
.hueso .barra{background:var(--papel-hondo);border-radius:6px;height:.7rem}
.hueso .portada{background:var(--papel-hondo);border:0}
.hueso .cuerpo{gap:.6rem}
@media (prefers-reduced-motion: no-preference){
  .hueso{animation:latir 1.6s ease-in-out infinite}
}
@keyframes latir{0%,100%{opacity:.6}50%{opacity:1}}

.aviso{
  grid-column:1/-1;
  border:1px dashed var(--linea);border-radius:var(--r);
  padding:3rem 1.5rem;text-align:center;background:var(--papel-alto);
}
.aviso h2{font-family:var(--display);font-size:1.4rem;font-weight:600;margin-bottom:.5rem}
.aviso p{color:var(--tinta-media);font-size:.95rem;max-width:32ch;margin-inline:auto}
.aviso a{color:var(--acento);font-weight:600}