/*
 * Tarjeta web con forma de tarjeta de visita (vistas/parciales/tarjeta-web.php).
 * Independiente de la página que la usa: la página de alta y la vista previa del backoffice la enlazan tal cual.
 * Colores del negocio en --tw-fondo y --tw-tinta (los pone el parcial); --tw-anillo, el foco, lo puede fijar la página.
 */

.tw {
  --tw-radio: 14px;
  --tw-curva: cubic-bezier(0.3, 0.7, 0.15, 1);
  --tw-anillo: #1d1f21;
  position: relative;
  width: 100%;
  max-width: 26rem;
  perspective: 1400px;
  /* Contenedor de consulta: el padding de las caras (en cqi) se mide con el ancho de la tarjeta. Sin esto, cqi
     cae al ancho de la ventana y en pantallas anchas el padding se come la cara. */
  container-type: inline-size;
}

.tw-giro {
  display: grid;
  grid-template: 1fr / 1fr;
  aspect-ratio: 85 / 55; /* tarjeta de visita; si el dorso necesita más alto, crece */
  transform-style: preserve-3d;
  transition: transform 400ms var(--tw-curva), scale 160ms var(--tw-curva), translate 300ms var(--tw-curva);
}

.tw-girada .tw-giro {
  transform: rotateY(180deg);
}

.tw-cara {
  grid-area: 1 / 1;
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  border-radius: var(--tw-radio);
  background-color: var(--tw-fondo);
  color: var(--tw-tinta);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    0 1px 2px rgb(20 20 22 / 0.14),
    0 14px 28px -12px rgb(20 20 22 / 0.34),
    0 36px 64px -28px rgb(20 20 22 / 0.4);
}

/* Trama del negocio: se repite en mosaicos de media tarjeta de ancho, sea cual sea la resolución subida. */
.tw-con-trama .tw-cara {
  background-image: var(--tw-trama);
  background-size: 50% auto;
  background-repeat: repeat;
}

/* Brillo de la luz sobre el cartón: solo en la cara, muy suave. */
.tw-frente::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 42%);
  pointer-events: none;
}

.tw-frente {
  display: grid;
  place-items: center;
  padding: 10cqi 12cqi;
}

.tw-logo {
  display: block;
  max-width: 64%;
  max-height: 44cqi;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tw-nombre {
  font-size: max(1.25rem, 9cqi);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Medidas sacadas del diseño impreso, en % del ancho de la tarjeta: frase arriba al 58 %, círculos de 15,3 y las
   condiciones en dos líneas pequeñas abajo. Ojo: dentro de la cara, 1cqi es el 1 % del ancho SIN el padding
   (el 86 % de la tarjeta), así que cada medida del impreso se divide entre 0,86. */
.tw-dorso {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6cqi 7cqi;
  text-align: center;
}

/* Trama atenuada: un velo del color del negocio entre la trama y el texto. */
.tw-dorso::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tw-fondo);
  opacity: 0.72;
}

.tw-dorso > * {
  position: relative;
  margin: 0;
}

.tw-dorso > .tw-frase {
  margin-bottom: 5.9cqi;
}

.tw-dorso > .tw-condiciones {
  margin-top: 6.7cqi;
}

.tw-frase {
  display: block;
  width: 67.4cqi;
  max-height: 10.5cqi;
  height: auto;
  object-fit: contain;
}

/* Círculos del 15,3 % con 4 por fila, como en el impreso; con más columnas se encogen para caber en el 76 %. */
.tw-progreso {
  --d: min(17.8cqi, calc(88cqi / (var(--tw-columnas) * 1.26 - 0.26)));
}

.tw-circulos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--d) * 0.216) calc(var(--d) * 0.26);
  width: calc(var(--tw-columnas) * var(--d) + (var(--tw-columnas) - 1) * var(--d) * 0.26);
  max-width: 100%;
}

.tw-circulo {
  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  border: max(1.5px, 0.5cqi) solid currentColor;
  border-radius: 50%;
}

.tw-sellado img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.tw-sellado:empty::after {
  content: "";
  width: 54%;
  height: 54%;
  border-radius: 50%;
  background: currentColor;
}

/* Letra pequeña como en el impreso: dos líneas centradas que ocupan el 70 % del ancho. */
.tw-condiciones {
  max-width: 81cqi;
  font-size: 1.57cqi;
  font-weight: 400;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.tw-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Toda la tarjeta es el botón de girar (encima de las caras; su contenido sigue legible para lectores de pantalla). */
.tw-girar {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--tw-radio);
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.tw-girar:focus-visible {
  outline: 3px solid var(--tw-anillo);
  outline-offset: 4px;
}

/* Respuesta al dedo en cuanto se apoya, no al soltar. */
.tw:has(.tw-girar:active) .tw-giro {
  scale: 0.985;
}

@media (hover: hover) and (pointer: fine) {
  .tw:has(.tw-girar:hover) .tw-giro {
    translate: 0 -3px;
  }
}

.tw-pista {
  margin: 0.875rem 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: center;
}

/* Sin movimiento: nada de giro en 3D, las caras se funden. */
@media (prefers-reduced-motion: reduce) {
  .tw-giro,
  .tw-girada .tw-giro {
    transform: none;
    transition: none;
  }

  .tw-dorso {
    transform: none;
    opacity: 0;
  }

  .tw-cara {
    transition: opacity 200ms ease;
  }

  .tw-girada .tw-frente {
    opacity: 0;
  }

  .tw-girada .tw-dorso {
    opacity: 1;
  }

  .tw:has(.tw-girar:hover) .tw-giro,
  .tw:has(.tw-girar:active) .tw-giro {
    translate: none;
    scale: none;
  }
}