/* ======================================================================
   Tiradado — Popup + grid/cartas + formulario + FAB
   ====================================================================== */

/* Ajustes base del modal */
#leadcards-modal .modal-content{
  padding: 13px 20px;
  min-height: auto !important;
  height: auto !important;
  max-height: calc(100vh - 8vh);
  border-radius:14px;
  overflow:hidden;
}
#leadcards-modal .modal-dialog{max-width:860px;}

/* Header con logo centrado */
#leadcards-modal .modal-header{
  padding: 28px 56px 14px; /* deja hueco para la X */
  border: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
#leadcards-modal .close{
  position:absolute;
  right:16px;
  top:16px;
  opacity:.6;
}
#leadcards-modal .close:hover{opacity:1;}
#leadcards-modal .modal-body{ padding: 20px 40px; }

/* Logo */
.leadcards-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
}
.leadcards-logo{
  height:40px;
  max-height:44px;
  width:auto;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.02));
}

/* Accesibilidad */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* ---------------- Tokens (scoped dentro del modal) ---------------- */
#leadcards-modal .leadcards-popup{
  --lc-font: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;

  /* Colores */
  --lc-text:#0f172a; --lc-muted:#64748b; --lc-soft:#94a3b8; --lc-line:#e2e8f0; --lc-bg:#fff;

  /* Espacios */
  --lc-1:6px; --lc-2:10px; --lc-3:14px; --lc-4:20px; --lc-5:28px; --lc-6:40px;

  /* Tipos */
  --lc-title:clamp(20px, 2vw, 24px);
  --lc-sub:clamp(13px, 1.1vw, 15px);
  --lc-body:14px;

  /* Card */
  --lc-radius:14px;
  --lc-card-bg:rgba(255,255,255,.74);
}

.leadcards-popup{ max-width:1100px; margin:0 auto; font-family:var(--lc-font); color:var(--lc-text); }

/* ---------------- Hints y títulos ---------------- */
.leadcards-hint{ margin:0 0 var(--lc-3); text-align:center; color:var(--lc-muted); font-size:13.5px; font-weight:600; }
.leadcards-headings{ text-align:center; margin: var(--lc-3) 0 var(--lc-3); }
.leadcards-title{
  margin:0 0 var(--lc-1); font-weight:700; font-size: var(--lc-title);
  line-height:1.2; letter-spacing:-.01em; color: var(--lc-text);
}
.leadcards-subtitle{ margin:0 auto; max-width:52ch; color:var(--lc-muted); font-size:var(--lc-sub); line-height:1.28; }

/* GDPR */
.psgdpr_consent_message span{color:var(--lc-text)}
#leadcards-step-form .psgdpr_consent_message a{ color:#475569; font-weight:700; text-decoration:underline; }

/* Cupón título pequeño */
.leadcards-coupon__title{color:#475569;font-size:12px;}

/* ======================================================================
   GRID
   ====================================================================== */
.leadcards-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap: var(--lc-4); margin: var(--lc-2) 0 var(--lc-4);
  justify-items:stretch; align-items:stretch; position: relative;
}
@media (min-width: 992px){ .leadcards-grid{grid-template-columns:1fr 1fr;} }

/* ======================================================================
   CARD
   ====================================================================== */
.leadcards-card{ position:relative; border-radius:var(--lc-radius); perspective:1200px; }
.leadcards-card::before{
  content:""; position:absolute; inset:0; border-radius:var(--lc-radius); z-index:0;
  box-shadow:0 10px 28px rgba(0,0,0,.10); pointer-events:none;
  background: url("../../img/t2p-card.jpg") center/cover no-repeat;
}
/* misma imagen para variantes */
.leadcards-card.variant-1::before,
.leadcards-card.variant-2::before,
.leadcards-card.variant-3::before,
.leadcards-card.variant-4::before{
  background: url("../../img/t2p-card.jpg") center/cover no-repeat !important;
}

/* 3D container */
.leadcards-card-inner,.leadcards-card__inner{
  position:relative; z-index:1; border-radius:var(--lc-radius); overflow:hidden;
  transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, filter .3s ease, opacity .3s ease;
  min-height:200px; background:transparent; isolation:isolate;
}

/* Caras */
.leadcards-card-face,.leadcards-card__face{
  position:absolute; inset:0; border-radius:var(--lc-radius);
  backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(0);
}

/* Frente */
.leadcards-card-front{
  display:flex; align-items:flex-end; justify-content:center; padding: var(--lc-3);
  z-index:2; -webkit-user-select:none; user-select:none; pointer-events:auto;
}
.leadcards-card-front-text{
  font-weight:600; text-align:center; color:white; font-size:14px; line-height:1.3; position:absolute; left:10px;
}

/* Badge */
.leadcards-card-badge{
  position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; color:#fff;
  z-index:3; border:1px solid white;
}

/* Reverso */
.leadcards-card-back{
  transform:rotateY(180deg) translateZ(1px) !important;
  background:rgba(255,255,255,.88);
  display:flex; align-items:center; justify-content:center;
  z-index:1; pointer-events:auto; -webkit-user-select:text; user-select:text;
}

/* Flip */
.leadcards-card-inner.is-flipped,.leadcards-card__inner.is-flipped{ transform:rotateY(180deg); }
.leadcards-card-inner.is-flipped .leadcards-card-front{ opacity:0!important; visibility:hidden!important; display:none!important; }
.leadcards-card-inner.is-flipped .leadcards-card-back{ z-index:4!important; }

/* Estados */
.leadcards-card.disabled .leadcards-card-inner{ cursor:not-allowed; filter:grayscale(.15); opacity:.92; }
.leadcards-card.is-dimmed .leadcards-card-inner{ filter:grayscale(.35) brightness(.9); opacity:.75; }
.leadcards-grid[data-state="unlocked"] .leadcards-card .leadcards-card-inner{ cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.12); }
.leadcards-grid[data-state="unlocked"] .leadcards-card .leadcards-card-inner:hover{
  transform:translateY(-2px) rotate3d(1,1,0,1.2deg); box-shadow:0 12px 28px rgba(0,0,0,.16);
}
.leadcards-grid[data-state="unlocked"] .leadcards-card .leadcards-card-inner::after{
  content:""; position:absolute; inset:-2px; border-radius:calc(var(--lc-radius) + 2px);
  box-shadow:0 0 0 2px rgba(255,255,255,.32),0 0 18px rgba(93,173,255,.28) inset;
}

/* ======================================================================
   REVERSO: cupón — estilo “remarcado”
   ====================================================================== */
.leadcards-copy-area{
  margin: var(--lc-4) 0 var(--lc-2);
  text-align:center;
}
.leadcards-copy-box{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:0;
  background:transparent;
  border:0;
}

/* Código remarcado: borde discontinuo dorado y letras espaciadas */
.leadcards-copy-code{
  font:800 20px/1.1 var(--lc-font);
  letter-spacing:.28em;
  padding:10px 16px;
  border-radius:14px;
  background:#fff;
  border:2px dashed #C4912B;          /* dorado */
  color:#0f172a;
  box-shadow:0 10px 24px rgba(2,6,23,.06);
  text-transform:uppercase;
}

/* Botón “Copiar” (verde) */
#leadcards_copy_btn{
  border:0;
  border-radius:14px;
  font-weight:800;
  padding:10px 18px;
  background:#2E7D32;                 /* verde */
  color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
#leadcards_copy_btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(0,0,0,.18);
  background:#256f2a;
}
#leadcards_copy_btn:active{ transform:translateY(0); }
#leadcards_copy_btn:disabled{ opacity:.7; cursor:default; box-shadow:none; }

/* Botón “Cerrar” oscuro (si lo añades junto al de copiar) */
.leadcards-close-btn,
.leadcards-copy-area [data-leadcards-close].btn{
  border:0;
  border-radius:14px;
  font-weight:800;
  padding:10px 18px;
  background:#111;
  color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.leadcards-close-btn:hover,
.leadcards-copy-area [data-leadcards-close].btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(0,0,0,.18);
}

/* Mensaje bajo el cupón */
.leadcards-copy-msg{ margin-top:8px; font-size:13px; color:#475569; }

/* ======================================================================
   FORMULARIO
   ====================================================================== */
#leadcards-step-form{ margin: var(--lc-4) 0 0; text-align:center; }
#leadcards-form{ max-width:720px; margin:0 auto; }
#leadcards-form .form-group{ margin-bottom: var(--lc-3); }
#leadcards-form label{ display:block; font-weight:600; color:var(--lc-text); margin-bottom:6px; font-size:13px; }

/* Input */
#leadcards-form .form-control{
  width:100%; padding: 12px 14px; border-radius:12px; background:#fff; border:2px solid #dbe3ef;
  font-size:var(--lc-body); line-height:1.45; color:var(--lc-text); box-shadow:0 6px 16px rgba(2,6,23,.06);
}
#leadcards-form .form-control::placeholder{ color:var(--lc-soft); }
#leadcards-form .form-control:focus{
  outline:0; border-color:#34d399;
  box-shadow:0 0 0 3px rgba(52,211,153,.28), 0 8px 20px rgba(16,185,129,.18);
}

/* Checkbox */
#leadcards-form .form-check{ display:flex; align-items:center; justify-content:center; gap:10px; margin:8px 0 2px; }
#leadcards-form .form-check-input{ width:18px; height:18px; margin:0; }
#leadcards-form .form-check-label{ margin:0; color:var(--lc-muted); font-weight:600; }

/* Botón enviar */
#leadcards_submit{
  display:inline-block; min-width:220px; height:48px; border-radius:12px; border:0;
  background:linear-gradient(135deg,#10b981,#34d399); color:#fff; font-weight:800; font-size:15px; letter-spacing:.2px;
  box-shadow:0 10px 22px rgba(16,185,129,.22);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease; margin-top:10px;
}
#leadcards_submit:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(16,185,129,.28); background:linear-gradient(135deg,#059669,#34d399); }
#leadcards_submit:active{ transform:translateY(0); }
#leadcards_error{ color:#b91c1c; text-align:center; margin-top:8px; }
#leadcards_success{ color:#15803d; text-align:center; margin-top:8px; }

/* ======================================================================
   Efectos base (pulse + barrido)
   ====================================================================== */
.leadcards-grid.just-unlocked .leadcards-card .leadcards-card-inner{ animation:lcPulse 650ms ease-in-out 0s 2 both; }
@keyframes lcPulse{
  0%{transform:translateZ(0) scale(1); box-shadow:0 6px 16px rgba(0,0,0,.08);}
  50%{transform:translateZ(0) scale(1.012); box-shadow:0 0 0 3px rgba(148,163,184,.20),0 12px 24px rgba(0,0,0,.12);}
  100%{transform:translateZ(0) scale(1); box-shadow:0 6px 16px rgba(0,0,0,.08);}
}
.leadcards-grid.just-unlocked .leadcards-card::after{
  content:""; position:absolute; inset:-3px; border-radius:calc(var(--lc-radius) + 2px);
  background:linear-gradient(120deg,transparent 45%,rgba(255,255,255,.5) 50%,transparent 55%);
  transform:translateX(-150%) skewX(-18deg); animation:lcSweep 1100ms ease-out 200ms 1 both; pointer-events:none;
}
@keyframes lcSweep{ to{ transform:translateX(150%) skewX(-18deg); } }

/* Onda del grid (via JS .grid-wave) */
.leadcards-grid.grid-wave::after{
  content:""; position:absolute; inset:-4px; border-radius:16px;
  background: radial-gradient(100% 100% at 50% 50%, rgba(255,215,0,0.35), rgba(255,215,0,0) 70%);
  animation:lcWave 0.8s ease-out forwards; pointer-events:none;
}
@keyframes lcWave{ 0%{opacity:0; transform:scale(0.9);} 30%{opacity:1; transform:scale(1.02);} 100%{opacity:0; transform:scale(1.05);} }

/* Bounce de bienvenida */
.leadcards-card.card-bounce-once{ animation:lcBounce 450ms cubic-bezier(.2,.8,.3,1.3); will-change: transform; }
@keyframes lcBounce{ 0%{transform: translateY(0) scale(1);} 40%{transform: translateY(-6px) scale(1.02);} 70%{transform: translateY(2px) scale(0.995);} 100%{transform: translateY(0) scale(1);} }

/* Hover “shine” */
.leadcards-card.is-unlocked{
  cursor:pointer; position:relative;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 0 0 rgba(251,191,36,0);
}
.leadcards-card.is-unlocked:hover, .leadcards-card.is-unlocked:focus-within{
  transform: translateY(-3px) scale(1.01); box-shadow: 0 10px 24px rgba(17,136,178,0.22); filter: saturate(1.08);
}
.leadcards-card.is-unlocked:hover::after{ animation: lcShine 700ms ease; }
.leadcards-card.is-unlocked::after{
  content:""; position:absolute; top:-20%; left:-120%; width:60%; height:140%; transform: rotate(20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  opacity:0; pointer-events:none;
}
@keyframes lcShine{ 0%{ left:-120%; opacity:0; } 10%{ opacity:.7; } 100%{ left:160%; opacity:0; } }

/* ======================================================================
   FAB (botón flotante “regalo”)
   ====================================================================== */
.giftpopup-fab{
  position:fixed; left:calc(env(safe-area-inset-left, 0px) + 16px);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 16px);
  width:56px; height:56px; border-radius:50%; border:0; display:none; align-items:center; justify-content:center;
  background:#111; color:#fff; cursor:pointer; z-index:1045;
  box-shadow:0 10px 24px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color:transparent; outline:none;
}
.giftpopup-fab.is-visible{display:inline-flex !important;}
#leadcards-fab:not([hidden]){display:inline-flex;}
.giftpopup-fab[hidden]{display:none !important;}
.giftpopup-fab::before{content:"🎁";font-size:26px;line-height:1;}
.giftpopup-fab:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,0,0,.28);}
.giftpopup-fab:active{transform:translateY(0);box-shadow:0 8px 18px rgba(0,0,0,.22);}
.giftpopup-fab:focus-visible{box-shadow:0 0 0 4px rgba(59,130,246,.35), 0 10px 24px rgba(0,0,0,.25);}
#leadcards-modal.show + #leadcards-fab{display:none !important;}
@media (max-width:480px){
  .giftpopup-fab{width:52px;height:52px;left:calc(env(safe-area-inset-left, 0px) + 12px);bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);}
}

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width:480px){
  #leadcards-modal .modal-body{padding: 28px;}
  #leadcards-modal .modal-header{padding: 22px 48px 10px;}
  .leadcards-grid{grid-template-columns:1fr 1fr;gap:14px;}
  .leadcards-card-inner{min-height:170px;}
  .leadcards-logo{height:34px; max-height:36px;}
  .leadcards-copy-code{font-size:18px; letter-spacing:.22em;}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .giftpopup-fab{transition:none;}
  .leadcards-grid.just-unlocked .leadcards-card .leadcards-card-inner{animation:none;}
  .leadcards-grid.just-unlocked .leadcards-card::after{animation:none;}
  .leadcards-grid.grid-wave::after{animation:none;}
  .leadcards-card.card-bounce-once{animation:none;}
  .leadcards-card.is-unlocked:hover::after{animation:none;}
}

/* ======================================================================
   DADO 3D (refactor)
   ====================================================================== */

/* Variables del dado */
:root{
  --td-size: 96px;
  --td-radius: 14px;
  --td-bg: #fff;
  --td-border:#e2e8f0;
  --td-shadow: 0 8px 20px rgba(2,6,23,.08);
  --td-spin: 3200ms; /* duración total del giro */
}
@media (max-width:480px){ :root { --td-size: 84px; } }

/* Contenedor con perspectiva (no recorta) */
.tdice-wrap{
  display:flex; justify-content:center; margin:10px 0 30px;
  perspective: 1100px; -webkit-perspective: 1100px;
  perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%;
  overflow: visible;
}

/* ===== Vista previa en perspectiva (idle) ===== */
.tdice3d .cube.is-idle{ animation: tdIdle 5200ms ease-in-out infinite alternate; }
@keyframes tdIdle{
  0%   { transform: rotateX(-18deg) rotateY(24deg) rotateZ(0deg); }
  100% { transform: rotateX(-8deg)  rotateY(54deg) rotateZ(3deg); }
}

/* Fallback plano también “respira” un poco */
.tdice-fallback.is-idle{ animation: tdIdleFlat 5200ms ease-in-out infinite alternate; }
@keyframes tdIdleFlat{
  0%   { transform: rotate3d(1,1,0,12deg); }
  100% { transform: rotate3d(1,1,0,36deg); }
}

/* Cubo + caras */
.tdice3d{
  width: var(--td-size); height: var(--td-size);
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.18));
  will-change: transform;
}
.tdice3d[aria-hidden="true"]{ display:block; } /* por si algún reset oculta [aria-hidden] */

.tdice3d .cube{
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%;
}

/* Cada cara: grilla 3×3, borde y luz */
.tdice3d .face{
  position:absolute; inset:0;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
  gap:6px; padding:10px; background: var(--td-bg);
  border: 2px solid var(--td-border); border-radius: var(--td-radius);
  box-shadow: var(--td-shadow), inset 0 0 0 2px var(--td-border);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.tdice3d .face::after{
  content:""; position:absolute; inset:0; border-radius: var(--td-radius);
  background: linear-gradient(145deg, rgba(0,0,0,.06), rgba(255,255,255,0) 60%); pointer-events:none;
}

.tdice3d .pip{ width:14px; height:14px; border-radius:50%; background:#0f172a; justify-self:center; align-self:center; }
.tdice3d .pip.big{ width:18px; height:18px; }

/* Posición espacial de las 6 caras (profundidad = mitad) */
.tdice3d .face{ --half: calc(var(--td-size) / 2); }
.tdice3d .face-1{ transform: rotateY(   0deg) translateZ(var(--half)); } /* Front  */
.tdice3d .face-2{ transform: rotateY(  90deg) translateZ(var(--half)); } /* Right  */
.tdice3d .face-3{ transform: rotateY( 180deg) translateZ(var(--half)); } /* Back   */
.tdice3d .face-4{ transform: rotateY( -90deg) translateZ(var(--half)); } /* Left   */
.tdice3d .face-5{ transform: rotateX(  90deg) translateZ(var(--half)); } /* Top    */
.tdice3d .face-6{ transform: rotateX( -90deg) translateZ(var(--half)); } /* Bottom */

/* Orientación del cubo para mostrar una cara al frente */
.tdice3d .cube[data-show="1"]{ transform: rotateX(0deg)   rotateY(   0deg); }
.tdice3d .cube[data-show="2"]{ transform: rotateX(0deg)   rotateY(-90deg); }
.tdice3d .cube[data-show="3"]{ transform: rotateX(0deg)   rotateY(180deg); }
.tdice3d .cube[data-show="4"]{ transform: rotateX(0deg)   rotateY(90deg); }
.tdice3d .cube[data-show="5"]{ transform: rotateX(-90deg) rotateY(0deg); }
.tdice3d .cube[data-show="6"]{ transform: rotateX(90deg)  rotateY(0deg); }

/* Giro largo con acelerón final */
.tdice3d.is-spinning .cube{ animation: tdSpinAccel var(--td-spin) linear both; }
@keyframes tdSpinAccel{
  0%   { transform: rotateX(0)      rotateY(0)      rotateZ(0)    scale(1);   }
  30%  { transform: rotateX(120deg) rotateY(120deg) rotateZ(20deg) scale(1.015); }
  60%  { transform: rotateX(300deg) rotateY(300deg) rotateZ(40deg) scale(1.02);  }
  85%  { transform: rotateX(540deg) rotateY(540deg) rotateZ(60deg) scale(1.03);  }
  100% { transform: rotateX(1080deg) rotateY(1080deg) rotateZ(0deg) scale(1);    }
}

/* Fallback plano (si JS lo activa) */
.tdice-fallback{
  width: var(--td-size); height: var(--td-size);
  background:#fff; border-radius: var(--td-radius);
  border:2px solid var(--td-border);
  box-shadow: var(--td-shadow);
  position:relative; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:6px; padding:10px;
}
.tdice-fallback .pip{ width:16px; height:16px; border-radius:50%; background:#0f172a; align-self:center; justify-self:center; }
.tdice-fallback.is-spinning{ animation: tdiceSpinAccel var(--td-spin) linear both; }
@keyframes tdiceSpinAccel{
  0%   { transform: rotate3d(1,1,0,0deg)   scale(1);    }
  30%  { transform: rotate3d(1,1,0,120deg) scale(1.01); }
  60%  { transform: rotate3d(1,1,0,300deg) scale(1.02); }
  85%  { transform: rotate3d(1,1,0,540deg) scale(1.03); }
  100% { transform: rotate3d(1,1,0,1080deg) scale(1);   }
}

/* Colocación real de pips (rejilla 3×3) */
/* 1 */
.tdice3d .face-1 .pip:nth-child(1){ grid-column:2; grid-row:2; }
/* 2 */
.tdice3d .face-2 .pip:nth-child(1){ grid-column:1; grid-row:1; }
.tdice3d .face-2 .pip:nth-child(2){ grid-column:3; grid-row:3; }
/* 3 */
.tdice3d .face-3 .pip:nth-child(1){ grid-column:1; grid-row:1; }
.tdice3d .face-3 .pip:nth-child(2){ grid-column:2; grid-row:2; }
.tdice3d .face-3 .pip:nth-child(3){ grid-column:3; grid-row:3; }
/* 4 */
.tdice3d .face-4 .pip:nth-child(1){ grid-column:1; grid-row:1; }
.tdice3d .face-4 .pip:nth-child(2){ grid-column:3; grid-row:1; }
.tdice3d .face-4 .pip:nth-child(3){ grid-column:1; grid-row:3; }
.tdice3d .face-4 .pip:nth-child(4){ grid-column:3; grid-row:3; }
/* 5 */
.tdice3d .face-5 .pip:nth-child(1){ grid-column:1; grid-row:1; }
.tdice3d .face-5 .pip:nth-child(2){ grid-column:3; grid-row:1; }
.tdice3d .face-5 .pip:nth-child(3){ grid-column:2; grid-row:2; } /* centro */
.tdice3d .face-5 .pip:nth-child(4){ grid-column:1; grid-row:3; }
.tdice3d .face-5 .pip:nth-child(5){ grid-column:3; grid-row:3; }
/* 6 */
.tdice3d .face-6 .pip:nth-child(1){ grid-column:1; grid-row:1; }
.tdice3d .face-6 .pip:nth-child(2){ grid-column:1; grid-row:2; }
.tdice3d .face-6 .pip:nth-child(3){ grid-column:1; grid-row:3; }
.tdice3d .face-6 .pip:nth-child(4){ grid-column:3; grid-row:1; }
.tdice3d .face-6 .pip:nth-child(5){ grid-column:3; grid-row:2; }
.tdice3d .face-6 .pip:nth-child(6){ grid-column:3; grid-row:3; }