/* ==========================================================================
   Venta cruzada: «Este producto va bien con»

   Dos piezas, porque los tres lugares no son igual de anchos:

   - `.sf-cruzados` es la banda completa. Reusa `.sf-productos` del catálogo,
     así que casi no necesita reglas propias: hereda la grilla, la tarjeta y
     todo el trabajo táctil. Va en la ficha y en la página del carro.
   - `.sf-cruzados-mini` es la fila compacta del panel lateral del carro, que
     mide poco más de 380px. Cuatro tarjetas no caben y empujarían los botones
     de pagar fuera de la pantalla.

   Ningún valor suelto: todo sale de `tokens.css`, que es regla del proyecto.
   ========================================================================== */

/* --- La banda completa ---------------------------------------------------- */

.sf-cruzados {
  padding-block: 0 var(--sf-esp-8);
}

.sf-cruzados h2 {
  margin-bottom: var(--sf-esp-6);
}

/*
 * En la página del carro va bajo la tabla, en la columna izquierda, colgada de
 * `woocommerce_before_cart_collaterals`. Necesita separarse de la tabla, que
 * termina en un borde.
 */
.woocommerce-cart .sf-cruzados {
  margin-top: var(--sf-esp-8);
  padding-top: var(--sf-esp-8);
  border-top: 1px solid var(--sf-borde-sutil);
}

/* --- La fila compacta del panel del carro --------------------------------- */

.sf-cruzados-mini {
  margin-top: var(--sf-esp-5);
  padding-top: var(--sf-esp-4);
  border-top: 1px solid var(--sf-borde-sutil);
}

.sf-cruzados-mini__titulo {
  margin: 0 0 var(--sf-esp-3);
  font-family: var(--sf-fuente-titulos);
  font-size: var(--sf-h6-tam);
  font-weight: var(--sf-titulos-peso);
  letter-spacing: var(--sf-titulos-tracking);
  color: var(--sf-texto-principal);
}

.sf-cruzados-mini__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-2);
}

/*
 * El enlace es el objetivo táctil, no el `li`: si el relleno va en el
 * contenedor, el área que se puede tocar no crece. Con la foto de 56px el alto
 * pasa del mínimo táctil sin necesitar `min-height`.
 */
.sf-cruzados-mini__enlace {
  display: flex;
  align-items: center;
  gap: var(--sf-esp-3);
  padding: var(--sf-esp-2);
  border-radius: var(--sf-radio);
  text-decoration: none;
  color: inherit;
}

.sf-cruzados-mini__enlace:hover,
.sf-cruzados-mini__enlace:focus-visible {
  background: var(--sf-superficie-hundida);
}

.sf-cruzados-mini__foto {
  flex: none;
  width: var(--sf-ficha-mini);
  height: var(--sf-ficha-mini);
  border-radius: var(--sf-radio);
  overflow: hidden;
  background: var(--sf-superficie-hundida);
}

.sf-cruzados-mini__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sf-cruzados-mini__texto {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-1);
  min-width: 0;
}

.sf-cruzados-mini__marca {
  font-size: var(--sf-etiqueta-tam);
  letter-spacing: var(--sf-etiqueta-tracking);
  text-transform: uppercase;
  color: var(--sf-texto-secundario);
}

/*
 * Dos líneas como máximo. El nombre de un señuelo puede llegar a cinco palabras
 * («DUO SpearHead Ryuki 50SP») y en un panel de 380px se comería la fila.
 */
.sf-cruzados-mini__nombre {
  font-size: var(--sf-cuerpo-s-tam);
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sf-cruzados-mini__precio {
  font-size: var(--sf-cuerpo-s-tam);
  color: var(--sf-texto-secundario);
}

.sf-cruzados-mini__precio .amount {
  font-weight: 600;
  color: var(--sf-texto-principal);
}

/* ==========================================================================
   Ventana de bienvenida con el cupón de primera compra

   Vive en esta hoja y no en una propia porque las dos piezas entraron el mismo
   día y suman menos de 200 líneas entre las dos. Si crece, se parte.

   El acento es el azul acero del logo, no el rojo: el rojo es de Tenryu y solo
   se usa en lo que es de Tenryu (decisión D6).
   ========================================================================== */

.sf-bienvenida {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--sf-esp-4);
}

/* Sin esta regla la ventana cerrada sigue tapando la pagina entera.
   `display: grid` de la linea de arriba le gana al `[hidden] { display: none }`
   del navegador, asi que el contenedor queda fijo sobre todo el viewport con
   el velo en opacidad 0: no se ve, y se come cada clic. Las otras nueve capas
   del tema ya traen su par `[hidden]`; a esta se le paso al entrar el 09-09. */
.sf-bienvenida[hidden] { display: none; }

.sf-bienvenida__velo {
  position: absolute;
  inset: 0;
  background: var(--sf-velo);
  opacity: 0;
  transition: opacity .25s ease;
}

.sf-bienvenida__panel {
  position: relative;
  width: 100%;
  max-width: 26rem;
  background: var(--sf-superficie-base);
  border: 1px solid var(--sf-borde-sutil);
  border-radius: var(--sf-radio);
  box-shadow: var(--sf-sombra-3);
  opacity: 0;
  transform: translateY(var(--sf-esp-4));
  transition: opacity .25s ease, transform .25s ease;
  max-height: 100%;
  overflow-y: auto;
}

.sf-bienvenida--abierta .sf-bienvenida__velo { opacity: 1; }

.sf-bienvenida--abierta .sf-bienvenida__panel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .sf-bienvenida__velo,
  .sf-bienvenida__panel { transition: none; }
}

/* El aspa nace en el mínimo táctil: una ventana que sale sola y cuesta cerrar
   es peor que no tenerla. */
.sf-bienvenida__cerrar {
  position: absolute;
  top: var(--sf-esp-1);
  right: var(--sf-esp-1);
  width: var(--sf-alto-tactil);
  height: var(--sf-alto-tactil);
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: var(--sf-radio);
  color: var(--sf-texto-secundario);
  cursor: pointer;
}

.sf-bienvenida__cerrar:hover { background: var(--sf-superficie-hundida); }

.sf-bienvenida__cuerpo {
  padding: var(--sf-esp-8) var(--sf-esp-6) var(--sf-esp-6);
  text-align: center;
}

.sf-bienvenida__ante {
  margin: 0 0 var(--sf-esp-2);
  font-size: var(--sf-etiqueta-tam);
  letter-spacing: var(--sf-etiqueta-tracking);
  text-transform: uppercase;
  color: var(--sf-acento-texto);
}

.sf-bienvenida__titulo {
  margin: 0 0 var(--sf-esp-3);
  font-family: var(--sf-fuente-titulos);
  font-size: var(--sf-h2-tam);
  font-weight: var(--sf-titulos-peso);
  letter-spacing: var(--sf-titulos-tracking);
  line-height: 1.1;
}

.sf-bienvenida__bajada {
  margin: 0 0 var(--sf-esp-5);
  color: var(--sf-texto-secundario);
  font-size: var(--sf-cuerpo-s-tam);
}

/* El código va grande y entero, con su botón al lado: es la diferencia entre
   que lo usen y que lo pierdan al cerrar la ventana. */
.sf-bienvenida__cupon {
  display: flex;
  align-items: stretch;
  margin-bottom: var(--sf-esp-4);
  border: 1px dashed var(--sf-accion-acento);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-hundida);
  overflow: hidden;
}

.sf-bienvenida__codigo {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: var(--sf-alto-tactil);
  padding: var(--sf-esp-2);
  font-family: var(--sf-fuente-titulos);
  font-size: var(--sf-h5-tam);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--sf-acento-texto);
  word-break: break-all;
}

.sf-bienvenida__copiar {
  flex: none;
  min-width: 5.5rem;
  min-height: var(--sf-alto-tactil);
  padding-inline: var(--sf-esp-4);
  border: 0;
  border-left: 1px dashed var(--sf-accion-acento);
  background: var(--sf-accion-acento);
  color: var(--sf-texto-inverso);
  font-family: inherit;
  font-size: var(--sf-cuerpo-s-tam);
  font-weight: 600;
  cursor: pointer;
}

.sf-bienvenida__copiar:hover { background: var(--sf-accion-acento-hover); }
.sf-bienvenida__copiar--hecho { background: var(--sf-exito); }

.sf-bienvenida__ir {
  width: 100%;
  justify-content: center;
}

.sf-bienvenida__ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sf-esp-2);
  margin-top: var(--sf-esp-3);
  min-height: var(--sf-alto-tactil);
  color: var(--sf-acento-texto);
  font-size: var(--sf-cuerpo-s-tam);
  font-weight: 600;
  text-decoration: none;
}

.sf-bienvenida__ig:hover { text-decoration: underline; }

.sf-bienvenida__pie {
  margin: var(--sf-esp-4) 0 0;
  font-size: var(--sf-texto-min);
  line-height: 1.45;
  color: var(--sf-texto-secundario);
}

/* El panel recibe el foco al abrir (ver `bienvenida.js`), y no necesita anillo:
   ya se anuncia solo por ser un diálogo y ocupa la pantalla entera. */
.sf-bienvenida__panel:focus { outline: none; }