/* ============================================================
   Chillin Online · el catálogo (/collections)
   ------------------------------------------------------------
   DÓNDE SE PEGA: Ajustes del sitio → Código y analítica →
   código del pie del sitio, dentro de la misma etiqueta <style>
   que el estilo de la clase y el del portal.

   A QUÉ SE AGARRA: a los nombres del tema Empire, que en esta
   página son los más limpios de toda la academia y no llevan
   hash: `card`, `card__img`, `card__name`, `card__price`,
   `products__list`, `products__search`, `collections__heading`.

   DESDE EL 27-AGO-2026 CUELGA TAMBIÉN DE LA PORTADA
   (`home-landing-page`): la rejilla de productos de la portada es
   el MISMO marcado del tema (`products__list`, `products__list-item`,
   `card`), así que la tarjeta se viste una vez y sirve en las dos
   pantallas. Lo que la portada no tiene (el buscador, la lista de
   categorías, el titular de la zona) simplemente no encuentra a
   quién aplicarse.
   El único con hash es el logo de la barra (`header__logo___2909e`)
   y ese, como siempre, se nombra por su clase base con el
   selector de atributo.

   ACOTADO: todo cuelga de `body:is(.home-landing-page,.collections-landing-page)`, que es
   la clase que Thinkific pone SOLO en el catálogo. La clase, el
   portal y las páginas de venta no se enteran de este bloque.

   POR QUÉ EXISTE: el alumno ya ve papel hueso, planchas flotando
   y tarjetas con relieve en el portal y dentro de la clase. El
   catálogo se había quedado con el traje de fábrica (azul marino,
   titular en manuscrita de 75px, nombres de curso en blanco), así
   que al ir a buscar otro curso cambiaba de programa. Esto lo
   cose con las otras dos pantallas.

   EL MARCO YA NO ESTÁ AQUÍ (26-ago-2026). La paleta, el papel, el
   telón del fondo, la barra de arriba y el pie viven en
   `marco.css`, que los pinta a la vez en el catálogo y en las
   páginas de venta. Aquí solo queda lo que es del catálogo y de
   nadie más: la portada de la zona, el renglón que filtra, la
   plancha de las tarjetas y la tarjeta.
   ============================================================ */

/* Las cajas intermedias del tema a transparente: le pone fondo
   propio a más de una y basta con que una se quede en su color
   para que salga una banda por la junta. La de fuera (`main`) la
   apaga `marco.css`; estas tres son de esta pantalla. */
body:is(.home-landing-page,.collections-landing-page) .collections,
body:is(.home-landing-page,.collections-landing-page) [class*="collections__container"],
body:is(.home-landing-page,.collections-landing-page) [class*="collections__product-cards"]{
  background:transparent;
}

/* ------------------------------------------------------------
   3 · LA PORTADA DE LA ZONA

   El tema pinta aquí un rótulo de 75px en Yellowtail (la
   manuscrita) que dice "Products", en inglés, sobre el azul. Es
   la misma letra que se retiró del portal.

   Pasa a la portada de lectura del resto de la academia: el
   titular de la casa, la línea que dice de qué va el catálogo y,
   debajo, cuántos cursos hay a la vista. El texto lo escribe
   `catalogo.js`, que también parte el titular en renglones para
   que entre uno detrás de otro.
   ------------------------------------------------------------ */

body:is(.home-landing-page,.collections-landing-page) [class*="collections__container"]{
  max-width:var(--co-ancho);
  padding-top:34px;
  padding-bottom:40px;
  padding-left:24px;
  padding-right:24px;
}

body:is(.home-landing-page,.collections-landing-page) .collections__heading{
  font-family:var(--co-serif);
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  font-size:clamp(28px, 4.2vw, 42px);
  line-height:1.14;
  color:var(--co-tinta);
  margin:0;
  max-width:19ch;
}

/* La línea de debajo del titular: dice de qué va la pantalla sin
   repetir lo que ya dice el titular. */
body:is(.home-landing-page,.collections-landing-page) .co-bajada{
  margin:12px 0 0;
  max-width:56ch;
  font-size:16.5px;
  line-height:1.62;
  color:var(--co-tinta-2);
}

/* Cuántos cursos hay a la vista. Va en versal pequeña, pegada a la
   fila de arriba de las tarjetas, y la escribe el guion contando
   lo que la plataforma haya pintado: si un día se publica o se
   retira un curso, la cifra sigue siendo verdad sola. */
body:is(.home-landing-page,.collections-landing-page) .co-cuantos{
  margin:0;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--co-tinta-3);
}

/* ------------------------------------------------------------
   4 · LA FILA QUE FILTRA Y EL BUSCADOR

   El tema los pone uno a cada punta de una fila (`products__search`)
   y los deja sin traje: la lista de categorías con su filo cian
   debajo y el campo de buscar con el marco gris de sistema.

   Aquí la fila se convierte en el renglón de mandos de la
   pantalla: a la izquierda las categorías (si hay más de una) y a
   la derecha el campo, con el mismo verde que enciende los campos
   de la clase y del portal.
   ------------------------------------------------------------ */

body:is(.home-landing-page,.collections-landing-page) .products__search{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:0 0 18px;
}

body:is(.home-landing-page,.collections-landing-page) .products__collections-list{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin:0;
  padding:0;
  list-style:none;
}
body:is(.home-landing-page,.collections-landing-page) .products__collections-list-item{
  display:block;
  width:auto;
  margin:0;
  padding:0;
}
/* La categoría es una píldora, no un enlace con filo debajo: el
   filo del tema va en cian y sale de la paleta de la academia. */
body:is(.home-landing-page,.collections-landing-page) .products__collections-list-item a{
  display:flex;
  align-items:center;
  min-height:34px;
  padding:0 14px;
  border-radius:99px;
  border:1px solid var(--co-linea-2);
  background:#fff;
  font-size:13px;
  color:var(--co-tinta-2);
  text-decoration:none;
  transition:border-color .18s var(--co-curva),color .18s var(--co-curva),background .18s var(--co-curva);
}
body:is(.home-landing-page,.collections-landing-page) .products__collections-list-item a:hover{
  border-color:var(--co-tinta-3);
  color:var(--co-tinta);
}
/* La abierta se marca en verde lleno, que es como se marca lo
   elegido en el resto de la academia. */
body:is(.home-landing-page,.collections-landing-page) .products__collections-list-item a.active,
body:is(.home-landing-page,.collections-landing-page) .products__collections-list-item a[aria-current="page"]{
  background:var(--co-verde);
  border-color:var(--co-verde);
  color:#fff;
}
/* y fuera el filo cian del tema, que se dibuja con un pseudo */
body:is(.home-landing-page,.collections-landing-page) .products__collections-list-item a:after{content:none !important}

/* Con una sola categoría la fila no filtra nada: el guion le pone
   esta clase y desaparece, para que el renglón no prometa algo que
   no hace. */
body:is(.home-landing-page,.collections-landing-page) .products__search.co-sin-categorias .products__collections-list{display:none}

body:is(.home-landing-page,.collections-landing-page) .products__search-form{margin:0}
body:is(.home-landing-page,.collections-landing-page) .products__search-box{margin:0}
body:is(.home-landing-page,.collections-landing-page) .form__search{position:relative;margin:0}

body:is(.home-landing-page,.collections-landing-page) .form__control-search{
  width:min(320px, 100%);
  height:40px;
  padding:0 14px 0 38px;
  border:1px solid var(--co-linea-2);
  border-radius:99px;
  background:#fff;
  font-size:14px;
  color:var(--co-tinta);
  box-shadow:var(--co-sombra);
  transition:border-color .18s var(--co-curva),box-shadow .18s var(--co-curva);
  -webkit-appearance:none;
  appearance:none;
}
body:is(.home-landing-page,.collections-landing-page) .form__control-search::placeholder{color:var(--co-tinta-3)}
body:is(.home-landing-page,.collections-landing-page) .form__control-search:focus{
  outline:none;
  border-color:var(--co-verde);
  box-shadow:0 0 0 3px rgba(15,122,82,.12);
}

/* LA LUPA DEL TEMA, APAGADA. El tema sí pone una: es el `:after` de
   `.form__search`, una lupa de FontAwesome pegada al borde derecho
   y pintada de #f5f5f5, o sea invisible sobre el blanco de siempre.
   Al vestir el campo con nuestro fondo se volvió visible, y el
   buscador salía con dos lupas, una a cada punta. Se apaga la suya
   y se queda la nuestra, que es la que está a la izquierda, donde
   se lee antes de escribir. */
body:is(.home-landing-page,.collections-landing-page) .form__search:after{content:none}
/* y sin su lupa, el hueco que el tema le reservaba a la derecha
   sobra: el texto vuelve a tener el campo entero */
body:is(.home-landing-page,.collections-landing-page) .form__control-search{padding-right:16px}

/* La lupa la dibuja el guion como un SVG dentro del campo, a la
   izquierda: un campo de buscar sin lupa se lee como un campo de
   escribir. */
body:is(.home-landing-page,.collections-landing-page) .form__search .co-lupa{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:15px;
  height:15px;
  color:var(--co-tinta-3);
  pointer-events:none;
}

/* ------------------------------------------------------------
   5 · LA PLANCHA DE LAS TARJETAS

   La rejilla deja de ser una banda de borde a borde sobre el papel
   y pasa a ser la misma plancha blanca flotando que sostiene las
   zonas del portal: mismo blanco al 92 %, misma esquina, misma
   sombra abierta y sin borde.
   ------------------------------------------------------------ */

body:is(.home-landing-page,.collections-landing-page) [class*="collections__product-cards"]{
  background:rgba(255,255,255,.92);
  border:0;
  border-radius:var(--co-plancha-radio);
  box-shadow:var(--co-plancha);
  padding:var(--co-plancha-aire);
  margin-top:var(--co-aire);
}

/* LA REJILLA. El tema la monta con flex y centrado, así que la
   última fila incompleta quedaba con las tarjetas en el medio y
   sin alinear con las de arriba. Con rejilla de verdad cada
   tarjeta cae en su columna y la fila coja se queda a la
   izquierda, que es donde el ojo la busca. */
body:is(.home-landing-page,.collections-landing-page) .products__list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:22px;
  margin:0;
  padding:0;
  list-style:none;
}
body:is(.home-landing-page,.collections-landing-page) .products__list:before,
body:is(.home-landing-page,.collections-landing-page) .products__list:after{content:none}
/* EL ÍTEM, Y AQUÍ ESTABA EL FALLO QUE ESTRANGULÓ LA PRIMERA VERSIÓN.
   El tema reparte las tarjetas con flex y le da a cada ítem
   `flex:0 0 33.33%` y **`max-width:33.33%`**. Dentro de una rejilla
   ese porcentaje NO se resuelve contra la fila, sino contra su
   propia columna: cada tarjeta se quedaba en un tercio de los 315
   de su celda, unos 100 píxeles. Con ese ancho el nombre se
   recortaba a la mitad, "opiniones" se partía por la mitad de la
   palabra, "Gratis" salía en columna letra a letra y la foto
   desbordaba la tarjeta.

   Por eso se anulan las TRES cosas que trae el ítem del tema: el
   reparto flex, el tope de ancho y el relleno lateral de 1rem (que
   viene compensado con el margen negativo de la lista, y ese ya se
   quitó arriba). Anular solo una de las tres no vale: sin
   `max-width:none` el tope sigue mandando aunque `flex` desaparezca. */
body:is(.home-landing-page,.collections-landing-page) .products__list-item{
  display:flex;
  flex:0 0 auto;
  width:auto;
  max-width:none;
  min-width:0;
  margin:0;
  padding:0;
  /* la perspectiva vive en el ítem y no en la tarjeta: si estuviera
     en la tarjeta, el giro se aplanaría y no se leería el volumen */
  perspective:900px;
}

/* ------------------------------------------------------------
   6 · LA TARJETA

   Es la pieza que más se aleja del tema. Venía pensada para
   fondo oscuro: nombre y precio en blanco (`.card h3{color:#fff}`),
   sin fondo propio, sin relieve y con el cuerpo centrado.

   Aquí es la ficha del portal: papel blanco, foto arriba con la
   proporción fija, el nombre en tinta a la izquierda, y el precio
   abajo del todo pegado al pie de la tarjeta, midan lo que midan
   las de al lado.
   ------------------------------------------------------------ */

body:is(.home-landing-page,.collections-landing-page) .card{
  display:flex;
  flex-direction:column;
  width:100%;
  background:#fff;
  border:0;
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--co-relieve);
  text-decoration:none;
  transform:translateZ(0);
  transition:box-shadow .28s var(--co-curva),transform .28s var(--co-curva);
}
body:is(.home-landing-page,.collections-landing-page) .card:hover{
  box-shadow:var(--co-relieve-alto);
}

/* LA TAPA. La foto va con la proporción fija para que todas las
   tarjetas midan igual aunque las imágenes subidas no lo hagan:
   hoy conviven fotos de banco de 960 de ancho con la portada de un
   paquete, y sin esto la rejilla salía a diente de sierra. */
body:is(.home-landing-page,.collections-landing-page) .card__img-container{
  position:relative;
  /* NO SE ENCOGE, y esto es lo que aplastaba la foto. La tarjeta es
     una columna flex y todas las de una fila miden lo mismo (las
     estira la rejilla); cuando el cuerpo pedía sitio, el único que
     cedía era la tapa, porque un hijo flex se encoge por defecto.
     Medido: la foto salía a 122 de alto sobre 322 de ancho, o sea
     16/6, cuando su proporción es 16/9 y le tocaban 181. */
  flex:0 0 auto;
  margin:0;
  overflow:hidden;
  background:var(--co-gris);
}
body:is(.home-landing-page,.collections-landing-page) .card__img{
  display:block;
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  transition:transform .5s var(--co-curva);
}
body:is(.home-landing-page,.collections-landing-page) .card:hover .card__img{transform:scale(1.035)}

/* La insignia del idioma, arriba a la izquierda de la foto. La
   escribe el guion sacándola del propio nombre del curso, que hoy
   lo lleva entre paréntesis. Si un nombre no lo dice, no hay
   insignia: nunca se inventa. */
body:is(.home-landing-page,.collections-landing-page) .co-idioma{
  position:absolute;
  top:10px;
  left:10px;
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 10px;
  border-radius:99px;
  background:rgba(20,17,15,.72);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:#fff;
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body:is(.home-landing-page,.collections-landing-page) .card__body-container{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  /* `min-width:0` es la red de todas las filas de dentro: sin él, un
     hijo flex no baja de su ancho de contenido y el texto se parte
     por la mitad de la palabra en vez de recortarse. */
  min-width:0;
  min-height:0;
  padding:18px;
  gap:0;
}
body:is(.home-landing-page,.collections-landing-page) .card__body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  margin:0;
  padding:0;
  text-align:left;
}

/* EL TIPO DE PRODUCTO, en versal pequeña y por encima del nombre:
   así se lee antes "curso" o "paquete" que el título, que es lo
   que el alumno está comparando. El icono del tema se queda, a su
   tamaño. */
body:is(.home-landing-page,.collections-landing-page) .card__product-info{
  display:flex;
  align-items:center;
  gap:6px;
  order:-1;
  margin:0 0 8px;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--co-tinta-3);
}
body:is(.home-landing-page,.collections-landing-page) .card__product-info .toga-icon{font-size:12px}

/* EL NOMBRE. El tema lo pinta en blanco con la letra Abel y lo
   recorta a tres líneas. Aquí va en tinta, con la letra y el peso
   de los titulares de la academia, y se recorta a dos: con tres,
   una tarjeta de nombre largo empujaba el precio y la fila se
   descuadraba. */
body:is(.home-landing-page,.collections-landing-page) .card__name,
body:is(.home-landing-page,.collections-landing-page) .card h3.card__name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0 0 8px;
  font-family:var(--co-serif);
  font-size:17.5px;
  font-weight:var(--co-titulo-peso);
  letter-spacing:var(--co-titulo-espaciado);
  line-height:1.3;
  color:var(--co-tinta);
  text-align:left;
}

/* LA VALORACIÓN. El tema la saca con una estrella de Font Awesome
   y el texto "(5 reviews)" en inglés. La estrella se queda (es la
   que carga la página) y el renglón pasa a leerse de un golpe: la
   nota en negrita y las opiniones entre paréntesis en gris. */
body:is(.home-landing-page,.collections-landing-page) .card__reviews{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  margin:0 0 8px;
  font-size:13px;
  line-height:1.4;
  color:var(--co-tinta-3);
  /* de una línea y sin cortes: "(5 opiniones)" es un dato, no un
     párrafo, y partido en dos renglones se lee como un error */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body:is(.home-landing-page,.collections-landing-page) .card__reviews > span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
body:is(.home-landing-page,.collections-landing-page) .card__reviews .review__star{flex:0 0 auto}
body:is(.home-landing-page,.collections-landing-page) .card__reviews .review__star{
  color:#e0a92a;
  font-size:12px;
}
body:is(.home-landing-page,.collections-landing-page) .card__reviews-average{
  font-weight:600;
  color:var(--co-tinta-2);
}

/* EL RESUMEN. Dos tarjetas no lo traen (el producto se publicó sin
   descripción), así que nunca se le da altura fija: lo que sostiene
   la fila es la rejilla, no este párrafo. */
body:is(.home-landing-page,.collections-landing-page) .card__description{
  margin:0;
  font-size:14.5px;
  line-height:1.58;
  color:var(--co-tinta-2);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* EL PIE DE LA TARJETA. `margin-top:auto` es lo que pega el precio
   al fondo: da igual que un curso tenga resumen y el de al lado
   no, los dos precios caen a la misma altura. */
body:is(.home-landing-page,.collections-landing-page) .card__price-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 12px;
  min-width:0;
  margin-top:auto;
  /* el relleno va ENTERO y no solo por arriba: el tema le pone
     `padding:0 16px 16px`, y esos 16 laterales metían el precio
     dieciséis píxeles por dentro del nombre que tiene justo encima */
  padding:14px 0 0;
}
body:is(.home-landing-page,.collections-landing-page) .card__price{
  display:flex;
  align-items:center;
  /* NO se encoge. Es la cifra por la que se compara, y comprimida
     salía en vertical, una letra por renglón. */
  flex:0 0 auto;
  margin:0;
  color:var(--co-tinta);
  font-size:19px;
  line-height:1.2;
  white-space:nowrap;
}
/* EL PRECIO VIVE EN EL `strong`, y el tema le da SU PROPIO color
   ahí: `.card__price-container strong{color:#f5f5f5}`, pensado para
   fondo oscuro. Dar color solo al `.card__price` no llegaba: sobre
   papel blanco la cifra salía en gris casi blanco, ilegible. Se le
   escribe entero (color, letra y tamaño), porque el tema también le
   pone la Abel y 20px, que no son los de la casa. */
body:is(.home-landing-page,.collections-landing-page) .card__price strong,
body:is(.home-landing-page,.collections-landing-page) .card__price-container strong{
  color:var(--co-tinta);
  font-family:var(--co-serif);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.02em;
  margin-right:0;
}

/* "Gratis" deja de ser una etiqueta gris del tema y pasa al verde
   de la casa: es el argumento de esa tarjeta, no un detalle. */
body:is(.home-landing-page,.collections-landing-page) .card__badge--free{
  display:inline-flex;
  flex:0 0 auto;
  white-space:nowrap;
  align-items:center;
  height:26px;
  padding:0 12px;
  border-radius:99px;
  background:rgba(15,122,82,.1);
  color:var(--co-verde-oscuro);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:none;
}

/* "Ver el curso →", que lo pone el guion. No es un botón: es el
   renglón que dice a dónde lleva la tarjeta, y la flecha se
   adelanta al pasar el ratón. */
body:is(.home-landing-page,.collections-landing-page) .co-ir{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:var(--co-verde);
  white-space:nowrap;
}
body:is(.home-landing-page,.collections-landing-page) .co-ir .co-flecha{
  transition:transform .22s var(--co-curva);
}
body:is(.home-landing-page,.collections-landing-page) .card:hover .co-ir .co-flecha{transform:translateX(4px)}

/* LA TARJETA SE INCLINA HACIA EL RATÓN, traído del portal y del
   recorrido de venta. El guion escribe los dos ángulos; aquí solo
   se dice cómo se aplican.

   SIN `transform-style:preserve-3d`, y esto costó una vuelta: con
   él puesto, la tarjeta DEJA DE RECORTAR lo que se sale, así que la
   foto asomaba por las cuatro esquinas cuadradas fuera del radio de
   16. No hace ninguna falta: `preserve-3d` sirve para que los HIJOS
   vivan en el espacio 3D del padre, y aquí la que gira es la
   tarjeta entera. La perspectiva la pone el ítem de la rejilla. */
body:is(.home-landing-page,.collections-landing-page) .card.co-inclinando{
  transform:rotateX(var(--co-rx,0deg)) rotateY(var(--co-ry,0deg)) translateZ(0);
  /* mientras el ratón está encima el giro NO se interpola: con la
     transición puesta la tarjeta persigue al ratón con retraso y se
     siente elástica en vez de firme */
  transition:box-shadow .28s var(--co-curva);
  box-shadow:var(--co-relieve-alto);
}

/* ------------------------------------------------------------
   8 · EL MÓVIL

   Se mide a 390 de ancho y a 667 de alto, que es donde salen los
   cortes. Tres cosas cambian:

   1. La plancha pierde su aire de 30, que a 390 se come el ancho
      de la tarjeta, y baja a 16.
   2. Las tarjetas pasan a una columna. Con dos, la foto queda de
      130 de ancho y no se ve lo que hay dentro.
   3. La barra NO se queda arriba: en una pantalla de 667, clavar
      56 píxeles arriba es quitarle a la lista la altura que le
      falta. Es la misma decisión del portal. (La barra deja de ser
      pegajosa sola: `marco.css` solo la clava de 769 para arriba.)
   ------------------------------------------------------------ */

@media (max-width:768px){
  body:is(.home-landing-page,.collections-landing-page) [class*="collections__container"]{
    padding-left:16px;
    padding-right:16px;
    padding-top:24px;
  }
  body:is(.home-landing-page,.collections-landing-page) .collections__heading{font-size:27px}
  body:is(.home-landing-page,.collections-landing-page) .co-bajada{font-size:15.5px}

  body:is(.home-landing-page,.collections-landing-page) [class*="collections__product-cards"]{
    padding:16px;
    border-radius:20px;
  }
  body:is(.home-landing-page,.collections-landing-page) .products__list{
    grid-template-columns:1fr;
    gap:16px;
  }

  /* el renglón de mandos se parte: las categorías arriba y el
     campo de buscar debajo, a todo el ancho, que es donde el
     pulgar lo alcanza */
  body:is(.home-landing-page,.collections-landing-page) .products__search{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  body:is(.home-landing-page,.collections-landing-page) .form__control-search{width:100%}
}

/* Quien pide menos movimiento no recibe ninguno: ni la foto que
   crece ni la tarjeta que se inclina. Lo que se ve sigue siendo
   exactamente lo mismo. */
@media (prefers-reduced-motion:reduce){
  body:is(.home-landing-page,.collections-landing-page) .card,
  body:is(.home-landing-page,.collections-landing-page) .card__img,
  body:is(.home-landing-page,.collections-landing-page) .co-ir .co-flecha{transition:none}
  body:is(.home-landing-page,.collections-landing-page) .card.co-inclinando{transform:none}
  body:is(.home-landing-page,.collections-landing-page) .card:hover .card__img{transform:none}
}