/* Inicio de fideluy.com: efectos 3D (2026-10-26, probados en fideluy-webs/sitios/fideluy-ejemplo-3d). Lo usan index.html y tarjetas.html.
   · Receta 1: el celular de la portada se inclina siguiendo el mouse (en el celular se mece solo).
   · Receta 3: carrusel de rubros en anillo, sobre fondo oscuro con un foco de luz.
   Las tarjetas siguen la estética de las referencias de Matias (2026-10-26): foto grande del local con los sellos
   encima (círculos con el ícono del rubro y borde punteado), fila de datos y QR en recuadro blanco. */

/* ---------- Tarjeta de fidelidad con foto (.wcard): la misma en el celular y en el carrusel ---------- */
/* Todo se mide en "em": achicando la letra de la tarjeta se achica entera */
.wcard {
  --c-fondo: #12324F; --c-texto: #fff; --c-sello: var(--c-fondo);
  display: flex; flex-direction: column; overflow: hidden; border-radius: 1.3em;
  background: var(--c-fondo); color: var(--c-texto); font-family: var(--font); text-align: left;
}
.wcard > span, .wcard span span { display: block; }
.wcard-top { display: flex !important; align-items: center; gap: .7em; padding: .85em 1em; min-height: 4.1em; }
.wcard-logo {
  width: 2.5em; height: 2.5em; border-radius: 50%; flex: none; display: grid !important; place-items: center;
  background: var(--c-texto); color: var(--c-fondo); font-size: .82em; font-weight: 800; letter-spacing: -.02em;
}
.wcard-nombre { font-size: 1.3em; font-weight: 700; letter-spacing: -.025em; line-height: 1.05; }
.wcard.serif .wcard-nombre { font: italic 400 1.75em/1 'Instrument Serif', Georgia, serif; letter-spacing: 0; }

.wcard-foto { position: relative; aspect-ratio: 720 / 340; background: #333 center / cover; display: grid !important; place-items: center; }
.wcard-sellos { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: .45em .8em; width: 11.2em; }
.wcard-sellos i {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  background: rgba(255, 255, 255, .3); border: 1.5px dashed rgba(255, 255, 255, .95); color: #fff;
}
.wcard-sellos i::before {
  content: ''; width: 46%; aspect-ratio: 1; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
/* Sello lleno: disco claro con el anillo punteado del color del local */
.wcard-sellos i.on {
  background: rgba(255, 255, 255, .93); border: 2px dashed var(--c-sello); color: var(--c-sello);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .93), 0 4px 10px rgba(0, 0, 0, .25);
}
.wcard-sellos i.new { animation: stamp .45s cubic-bezier(.3, 1.4, .5, 1); }

.wcard-datos { display: grid !important; grid-template-columns: 1.7fr .7fr 1fr; gap: .6em; padding: .8em 1em .2em; }
.wcard-datos small { display: block; font-size: .68em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .85; }
.wcard-datos b { display: block; font-size: .8em; font-weight: 500; line-height: 1.3; }
.wcard-qr { display: flex !important; justify-content: center; padding: .7em 0 1.1em; }
.wcard-qr > span { display: flex !important; flex-direction: column; align-items: center; gap: .3em; padding: .6em .7em .45em; border-radius: .5em; background: #fff; }
.wcard-qr svg { width: 6.6em; height: 6.6em; }
.wcard-qr small { font-size: .66em; font-weight: 600; color: #1F1F1F; white-space: nowrap; }

/* Íconos de los sellos (uno por rubro), como máscara: toman el color del sello */
.ico-taza   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M5 6h14l-1.6 15H6.6z'/%3E%3Cpath d='M4 3h16v3H4z'/%3E%3Cpath d='M6 11h12'/%3E%3C/svg%3E"); }
.ico-pan    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 12c0-4 4-7 9-7s9 3 9 7v7H3z'/%3E%3Cpath d='M8 9l1 4M12 8v5M16 9l-1 4'/%3E%3C/svg%3E"); }
.ico-helado { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M7 10a5 5 0 0 1 10 0z'/%3E%3Cpath d='M7 10l5 12 5-12'/%3E%3C/svg%3E"); }
.ico-tijera { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Cpath d='M8 16L19 3M16 16L5 3'/%3E%3C/svg%3E"); }
.ico-burger { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 10a9 6 0 0 1 18 0z'/%3E%3Cpath d='M3 14h18'/%3E%3Cpath d='M4 17h16v1a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.ico-brillo { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.2 7.8L22 12l-7.8 2.2L12 22l-2.2-7.8L2 12l7.8-2.2z'/%3E%3C/svg%3E"); }
.ico-pizza  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 22L2.5 6a16 16 0 0 1 19 0z'/%3E%3Ccircle cx='10' cy='10' r='1.3'/%3E%3Ccircle cx='14.5' cy='12.5' r='1.3'/%3E%3C/svg%3E"); }
.ico-hoja   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 20C4 10 10 4 21 3c-1 11-7 17-17 17z'/%3E%3Cpath d='M4 20l9-9'/%3E%3C/svg%3E"); }

/* Versión mini (dibujo del paso 2 en /tarjetas): solo nombre, foto y sellos */
.mini-wcard { width: 190px; font-size: 10.5px; box-shadow: 0 12px 26px -12px rgba(14, 26, 43, .55); }

/* ---------- Receta 1: el celular (pantalla oscura, como Wallet de noche) se inclina ---------- */
.phone.oscuro { background: #0B0E13; color: #fff; }
.phone.oscuro .sig { background: linear-gradient(to top right, #fff 50%, transparent 50%); }
.phone.oscuro .bat { border-color: #fff; background: linear-gradient(90deg, #fff 70%, transparent 70%) content-box; }
.phone.oscuro .notif { color: #1F1F1F; }
.pass.wcard { padding: 0; font-size: 14px; border-radius: 18px; background: var(--c-fondo); color: var(--c-texto); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .8); }
/* Otras tarjetas de la Wallet asomando abajo, como en la referencia */
.wallet-otras { margin-top: auto; padding: 0 12px; height: 46px; position: relative; }
.wallet-otras i { position: absolute; left: 12px; right: 12px; height: 60px; border-radius: 16px 16px 0 0; }
.wallet-otras i:first-child { top: 0; background: #2B4C8C; }
.wallet-otras i:last-child { top: 16px; background: #C4602D; }

.inclinar { perspective: 1100px; }
.inclinar .phone {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 30%;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.inclinar.activa .phone { transition: transform .08s linear; }
/* Reflejo sobre la pantalla que se mueve con el mouse, como vidrio */
.phone-brillo {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .6), transparent 50%);
}
.inclinar.vaiven .phone { animation: vaiven 8s ease-in-out infinite; }
@keyframes vaiven {
  0%, 100% { transform: rotateX(4deg) rotateY(-8deg); }
  50% { transform: rotateX(-3deg) rotateY(8deg); }
}

/* ---------- Receta 3: carrusel de rubros ---------- */
.rubros-3d {
  overflow: hidden; color: var(--white); text-align: center; padding: 96px 0 72px;
  background: radial-gradient(ellipse 55% 48% at 50% 62%, #1A2B40 0%, #0B121C 55%, #05080C 100%);
}
.rubros-3d h2 { max-width: none; font-size: clamp(38px, 5.4vw, 64px); }
.rubros-3d h2 em { font: italic 400 1.12em 'Instrument Serif', Georgia, serif; color: var(--sky); letter-spacing: 0; }
.rubros-3d .lead { color: var(--muted-light); margin: 0 auto 36px; }
/* El título entra desenfocado y se enfoca al bajar (solo CSS; donde no anda, se ve normal) */
@supports (animation-timeline: view()) {
  .rubros-3d h2 { animation: enfocar linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  @keyframes enfocar { from { filter: blur(16px); opacity: .25; transform: scale(1.05); } }
}

.anillo-escena {
  --n: 8; --ancho: 260px; --giro: 0deg;
  --radio: calc(var(--ancho) / 2 / tan(180deg / var(--n)) + 40px);
  position: relative; height: 500px; perspective: 1600px; touch-action: pan-y; cursor: grab; user-select: none;
}
.anillo-escena.arrastrando { cursor: grabbing; }
.anillo {
  position: absolute; left: 50%; top: 10px; width: var(--ancho); margin-left: calc(var(--ancho) / -2);
  transform-style: preserve-3d; transform: translateZ(calc(var(--radio) * -1)) rotateY(var(--giro));
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.arrastrando .anillo { transition: none; }
.anillo .wcard {
  position: absolute; top: 0; left: 0; width: 100%; margin: 0;
  font-size: calc(var(--ancho) / 19); /* la tarjeta entera escala con su ancho */
  backface-visibility: hidden; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8);
  transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--radio));
  filter: brightness(var(--luz, 1)); transition: filter .8s;
}
.anillo-flechas { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 12px; }
.anillo-flechas button {
  width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 26px; line-height: 1;
  border: 1.5px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); color: var(--white);
}
.anillo-flechas button:hover { border-color: var(--sky); }

@media (max-width: 900px) {
  .rubros-3d { padding: 72px 0 56px; }
  .anillo-escena { --ancho: 220px; height: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .inclinar .phone { transform: none !important; }
}