/* ARCHIVO GENERADO por scripts/blindar-css.mjs desde preview/home/assets/css/catalogo.css.
   No editar aquí: editar el preview y volver a generar. La primera clase de cada
   selector va duplicada a propósito para ganar al kit de Elementor. */

/* =========================================================================
   Catálogo — piezas compartidas por la portada y la tienda
   =========================================================================
   - .gd-equipo: tarjeta de producto, ESTÁNDAR del sitio (portada, tienda y,
     después, categorías). Se movió aquí desde home.css el 2026-10-02.
   - .gd-cierre: CTA de cierre de página.
   ========================================================================= */

/* ---- Tarjeta de producto (.gd-equipo) --------------------------------------
   Equipos de mayor valor. La tarjeta `.gd-equipo` es el ESTÁNDAR de producto
   del sitio: la misma se usará en la tienda, en las categorías y en cualquier
   cuadrícula de productos. Al pasar al tema, este bloque se mueve a base.css.

   Anatomía (corta a propósito, como la tienda actual): foto 1:1 real (ley 4),
   categoría, nombre tal como está en WooCommerce y CTA marino que se vuelve
   amarillo al pasar. Sin características: las fichas no están redactadas igual
   y obligarían a reescribir todo el catálogo.
   Toda la tarjeta es clicable con un solo enlace (el del nombre), así el lector
   de pantalla no repite cuatro enlaces por producto. */

.gd-equipos.gd-equipos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gd-e-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gd-equipo.gd-equipo {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--gd-blanco);
  border: 1px solid var(--gd-acero-200);
  border-radius: var(--gd-radio-md);
  overflow: hidden;
  transition: border-color var(--gd-transicion), box-shadow 220ms ease,
              transform 220ms ease;
}
.gd-equipo.gd-equipo:hover,
.gd-equipo.gd-equipo:focus-within {
  border-color: var(--gd-acero-300);
  box-shadow: 0 18px 40px rgba(33, 45, 69, 0.16);
  transform: translateY(-4px);
}

/* Foto */
.gd-equipo__foto.gd-equipo__foto {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--gd-acero-100);
  overflow: hidden;
}
.gd-equipo__foto.gd-equipo__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.gd-equipo.gd-equipo:hover .gd-equipo__foto img { transform: scale(1.05); }

/* Filete amarillo que crece bajo la foto: el único adorno del sistema. */
.gd-equipo__foto.gd-equipo__foto::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--gd-amarillo);
  transform: scaleX(0.12);
  transform-origin: left;
  transition: transform 320ms ease;
}
.gd-equipo.gd-equipo:hover .gd-equipo__foto::after { transform: scaleX(1); }


/* Cuerpo */
.gd-equipo__cuerpo.gd-equipo__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--gd-e-5);
}

.gd-equipo__categoria.gd-equipo__categoria {
  margin: 0 0 6px;
  font-family: var(--gd-fuente-titular);
  font-size: var(--gd-t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gd-texto-suave);
}

.gd-equipo__nombre.gd-equipo__nombre {
  margin: 0;
  font-size: var(--gd-t-h4);
  line-height: 1.3;
}
.gd-equipo__nombre.gd-equipo__nombre a { color: inherit; text-decoration: none; }
.gd-equipo__nombre.gd-equipo__nombre a::after {          /* enlace estirado: toda la tarjeta */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.gd-equipo__nombre.gd-equipo__nombre a:focus-visible { outline: none; }
.gd-equipo.gd-equipo:focus-within { outline: 3px solid var(--gd-enlace); outline-offset: 2px; }



/* CTA de línea (pedido del director, 2026-10-02): borde marino y fondo
   transparente, más bajo que un botón lleno, para que la tarjeta se vea liviana
   en una cuadrícula de muchos productos. Al pasar el mouse se rellena de
   amarillo, el acento del sistema. */
.gd-equipo__cta.gd-equipo__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gd-e-3);
  margin-top: var(--gd-e-4);
  padding: 7px var(--gd-e-4);
  border: 1px solid var(--gd-marino);
  border-radius: var(--gd-radio-sm);
  background: transparent;
  color: var(--gd-marino);
  font-family: var(--gd-fuente-titular);
  font-size: var(--gd-t-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background var(--gd-transicion), color var(--gd-transicion), border-color var(--gd-transicion);
}
.gd-equipo__cta.gd-equipo__cta svg { width: 16px; height: 16px; transition: transform var(--gd-transicion); }
.gd-equipo.gd-equipo:hover .gd-equipo__cta { background: var(--gd-amarillo); border-color: var(--gd-amarillo); color: var(--gd-marino); }
.gd-equipo.gd-equipo:hover .gd-equipo__cta svg { transform: translateX(4px); }
.gd-equipo__pie.gd-equipo__pie { margin-top: auto; padding-top: var(--gd-e-4); }
.gd-equipo__pie.gd-equipo__pie .gd-equipo__cta { margin-top: 0; }

@media (max-width: 1080px) {
  .gd-equipos.gd-equipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .gd-equipos.gd-equipos { grid-template-columns: minmax(0, 1fr); gap: var(--gd-e-4); }

  /* En el home, carrusel deslizable: cuatro tarjetas en columna serían
     cuatro pantallas de scroll. En la tienda la cuadrícula sigue normal. */
  .gd-equipos--carrusel.gd-equipos--carrusel {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gd-e-5);
    margin-inline: calc(var(--gd-e-5) * -1);
    padding: 6px var(--gd-e-5) var(--gd-e-4);
    scrollbar-width: none;
  }
  .gd-equipos--carrusel.gd-equipos--carrusel::-webkit-scrollbar { display: none; }
  .gd-equipos--carrusel.gd-equipos--carrusel > li { scroll-snap-align: start; }
  .gd-equipos--carrusel.gd-equipos--carrusel .gd-equipo:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gd-equipo.gd-equipo, .gd-equipo__foto.gd-equipo__foto img, .gd-equipo__foto.gd-equipo__foto::after,
  .gd-equipo__cta.gd-equipo__cta, .gd-equipo__cta.gd-equipo__cta svg { transition: none; }
  .gd-equipo.gd-equipo:hover { transform: none; }
}


/* En la tienda el CTA es un enlace propio (WhatsApp con el producto escrito):
   va por encima del enlace estirado que hace clicable toda la tarjeta. */
a.gd-equipo__cta { position: relative; z-index: 2; text-decoration: none; }
a.gd-equipo__cta:hover { background: var(--gd-amarillo); border-color: var(--gd-amarillo); color: var(--gd-marino); }
a.gd-equipo__cta:focus-visible { outline: 3px solid var(--gd-enlace); outline-offset: 2px; }

/* ---- Cierre de página (.gd-cierre) ------------------------------------------
   El cierre: recoge a quien llegó hasta abajo. Sin formulario a propósito: el
   formulario vive en /contacto/ (Drunel Forms Lite, medido en GA4); dos
   formularios repartirían los contactos. Fondo: la misma imagen de ambiente del
   hero (ya en caché) bajo un velo marino más denso. */

.gd-cierre.gd-cierre {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--gd-e-9);
  background: var(--gd-marino);
  color: var(--gd-acero-200);
  text-align: center;
}
.gd-cierre__fondo.gd-cierre__fondo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.gd-cierre.gd-cierre::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(33, 45, 69, 0.9);
}
.gd-cierre.gd-cierre::after {                     /* canto amarillo arriba */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--gd-amarillo);
}

.gd-cierre__contenido.gd-cierre__contenido { max-width: 760px; margin-inline: auto; }
.gd-cierre.gd-cierre .gd-antetitulo { justify-content: center; color: var(--gd-acero-200); }
.gd-cierre__titulo.gd-cierre__titulo {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gd-blanco);
}
.gd-cierre__titulo.gd-cierre__titulo em { font-style: normal; color: var(--gd-amarillo); }
.gd-cierre__entrada.gd-cierre__entrada {
  margin: var(--gd-e-5) auto 0;
  max-width: 54ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  color: var(--gd-acero-200);
}
.gd-cierre.gd-cierre .gd-boton {
  margin-top: var(--gd-e-7);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  padding: var(--gd-e-5) var(--gd-e-8);
}
.gd-cierre.gd-cierre .gd-boton svg { width: 20px; height: 20px; }

.gd-cierre__contacto.gd-cierre__contacto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gd-e-2) var(--gd-e-6);
  margin-top: var(--gd-e-5);
  font-size: var(--gd-t-menor);
}
.gd-cierre__contacto.gd-cierre__contacto a { color: var(--gd-blanco); font-weight: 600; text-decoration: none; }
.gd-cierre__contacto.gd-cierre__contacto a:hover { text-decoration: underline; }

.gd-cierre__pruebas.gd-cierre__pruebas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gd-e-3) var(--gd-e-6);
  margin: var(--gd-e-7) 0 0;
  padding: var(--gd-e-5) 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--gd-t-menor);
  color: var(--gd-acero-300);
}
.gd-cierre__pruebas.gd-cierre__pruebas li { display: inline-flex; align-items: center; gap: 8px; }
.gd-cierre__pruebas.gd-cierre__pruebas svg { width: 18px; height: 18px; color: var(--gd-amarillo); }

@media (max-width: 560px) {
  .gd-cierre.gd-cierre { padding-block: var(--gd-e-8); }
  .gd-cierre.gd-cierre .gd-boton { width: 100%; padding-inline: var(--gd-e-5); }
  .gd-cierre__pruebas.gd-cierre__pruebas { flex-direction: column; align-items: center; }
}