/* ==========================================================================
   placas.css — RescueMe: exclusivo de placa-personalizada.html (widget de
   personalización + FAQ). Carga junto a base.css. Esta página no carga
   mascotas.css, así que el estilo de .faq-list se repite aquí (mismo
   criterio visual que en mascotas.css, para no acoplar páginas que no
   comparten el resto de ese archivo).
   ========================================================================== */

/* ============ LAYOUT DEL CONFIGURADOR ============ */
.placa-builder{
  display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:start;
  margin-top:44px;
}
@media (max-width:900px){
  .placa-builder{grid-template-columns:1fr;gap:36px;}
}

/* ---- Columna de vista previa (sticky en escritorio) ---- */
.placa-preview-col{position:sticky;top:112px;display:flex;flex-direction:column;align-items:center;gap:18px;}
@media (max-width:900px){.placa-preview-col{position:static;}}

/* ---- Escenario de la placa: forma (hueso o circular), aro de collar y giro frente/reverso ----
   Réplica visual del producto real. La forma "hueso" se logra con un
   border-radius muy pronunciado más un mask-image que recorta dos muescas
   circulares (arriba y abajo, al centro) — eso es lo que le da el "pellizco"
   de cintura que distingue un hueso de un simple óvalo. La forma "circular"
   reutiliza el mismo marco/cara (mismo marcado HTML) pero sin muescas y con
   border-radius:50%, ajustando el tamaño del escenario a un círculo. Se
   probó visualmente con Playwright antes de confiar en los valores (radios
   de muesca, inset del marco, tamaños por forma, etc.). */
.placa-tag-stage{display:flex;flex-direction:column;align-items:center;gap:18px;}

.placa-tag{
  position:relative;width:280px;height:168px;margin-top:26px;
  perspective:1200px;
  filter:drop-shadow(0 20px 40px rgba(18,41,59,.35));
  transition:width .3s ease,height .3s ease;
}
.placa-tag.shape-circular{width:224px;height:224px;}
.placa-tag-loop{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);z-index:2;
  width:50px;height:34px;background:#20242b;
  border-radius:50% 50% 42% 42% / 62% 62% 38% 38%;
}
.placa-tag-loop::after{
  content:'';position:absolute;left:50%;top:32%;transform:translate(-50%,-26%);
  width:21px;height:21px;border-radius:50%;background:var(--bg-tint);
}

.placa-tag-flip{
  position:relative;width:100%;height:100%;transition:transform .5s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;
}
.placa-tag.is-flipped .placa-tag-flip{transform:rotateY(180deg);}

.placa-tag-side{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.placa-tag-side--back{transform:rotateY(180deg);}

.placa-tag-shape{
  position:absolute;inset:0;border-radius:40% / 60%;
  -webkit-mask-image:radial-gradient(circle 34px at 50% 0%, transparent 33px, #000 34px),radial-gradient(circle 34px at 50% 100%, transparent 33px, #000 34px);
  -webkit-mask-composite:source-in,source-in;
  mask-image:radial-gradient(circle 34px at 50% 0%, transparent 33px, #000 34px),radial-gradient(circle 34px at 50% 100%, transparent 33px, #000 34px);
  mask-composite:intersect;
}
/* Forma circular: mismo marco/cara, sin muescas y con radio total */
.placa-tag.shape-circular .placa-tag-shape{
  border-radius:50%;
  -webkit-mask-image:none;
  mask-image:none;
}
.placa-tag-frame{background:#20242b;}
.placa-tag-face{
  inset:12px;background:var(--placa-color, #AEE0D8);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:0 30px;
}
.placa-tag.shape-circular .placa-tag-face{padding:0 32px;}
.placa-tag.shape-circular .placa-tag-face--back{padding:0 18px;gap:10px;}
.placa-tag.shape-circular .placa-tag-brand{width:58px;}
.placa-tag.shape-circular .placa-tag-brand-icon{width:24px;height:24px;}
.placa-tag.shape-circular .placa-tag-brand span{font-size:.62rem;}
.placa-tag.shape-circular .placa-tag-qr{width:50px;height:50px;}
.placa-tag.shape-circular .placa-preview-name{font-size:1.2rem;}
.placa-tag.shape-circular .placa-preview-phones{font-size:.8rem;}
.placa-preview-name{
  font-family:var(--font-display);font-weight:800;font-size:1.4rem;letter-spacing:.02em;
  color:#20242b;text-align:center;text-transform:uppercase;max-width:100%;overflow-wrap:break-word;line-height:1.1;
}
.placa-preview-phones{
  font-family:var(--font-body);font-weight:700;font-size:.86rem;color:#20242b;
  text-align:center;line-height:1.45;
}

/* ---- Reverso: logo + "ESCANÉAME" + QR decorativo (solo si el pedido incluye código) ---- */
.placa-tag-face--back{flex-direction:row;gap:16px;padding:0 22px;}
.placa-tag-brand{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;width:78px;}
.placa-tag-brand-icon{width:30px;height:30px;color:#20242b;}
.placa-tag-brand span{font-family:var(--font-display);font-weight:800;font-size:.68rem;letter-spacing:.03em;color:#20242b;text-align:center;line-height:1.15;}
.placa-tag-qr{width:64px;height:64px;color:#20242b;flex:none;}
.placa-tag-qr svg{width:100%;height:100%;display:block;}

.placa-flip-btn{
  display:inline-flex;align-items:center;gap:8px;background:none;border:1.5px solid var(--border);
  border-radius:100px;padding:9px 18px;font:inherit;font-weight:700;font-size:.84rem;color:var(--ink);
  cursor:pointer;transition:border-color .15s ease,color .15s ease;
}
.placa-flip-btn svg{width:16px;height:16px;flex:none;}
.placa-flip-btn:hover{border-color:var(--sky);color:var(--sky);}
.placa-flip-btn[hidden]{display:none;}

.placa-preview-caption{font-size:.82rem;color:var(--muted);text-align:center;max-width:32ch;}

/* ---- Columna de controles ---- */
.placa-controls{display:flex;flex-direction:column;gap:28px;}
.placa-field label{display:block;font-weight:700;font-size:.88rem;color:var(--ink);margin-bottom:8px;}
.placa-field input[type="text"],
.placa-field input[type="tel"]{
  width:100%;padding:13px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--border);
  background:var(--surface);color:var(--ink);font:inherit;font-size:.94rem;
}
.placa-field input:focus{border-color:var(--sky);}
.placa-field .hint{font-size:.78rem;color:var(--muted);margin-top:6px;}
.placa-phones-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:480px){.placa-phones-row{grid-template-columns:1fr;}}

/* ---- Selector de forma ---- */
.placa-shapes{display:flex;gap:12px;flex-wrap:wrap;}
.placa-shape-btn{
  display:flex;align-items:center;gap:9px;padding:11px 18px;border-radius:100px;
  border:1.5px solid var(--border);background:var(--surface);font:inherit;font-weight:700;
  font-size:.88rem;color:var(--ink);cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.placa-shape-btn svg{width:20px;height:20px;flex:none;}
.placa-shape-btn:hover{border-color:var(--sky);}
.placa-shape-btn.is-active{border-color:var(--sky);color:var(--sky);background:var(--bg-tint);}

/* ---- Selector de color ---- */
.placa-colors{display:flex;gap:14px;flex-wrap:wrap;}
.placa-swatch{
  width:44px;height:44px;border-radius:50%;border:3px solid transparent;
  padding:0;box-shadow:0 4px 10px rgba(0,0,0,.18);position:relative;
}
.placa-swatch.is-active{border-color:var(--ink);}
.placa-swatch.is-active::after{
  content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:1.05rem;text-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* ---- Toggle del código QR ---- */
.placa-qr-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--bg-tint);border-radius:var(--radius-md);padding:18px 20px;
}
.placa-qr-toggle-text strong{display:block;font-size:.94rem;color:var(--ink);}
.placa-qr-toggle-text span{display:block;font-size:.82rem;color:var(--muted);margin-top:2px;}
.placa-switch{position:relative;flex:none;width:50px;height:28px;}
.placa-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1;}
.placa-switch-track{
  position:absolute;inset:0;background:var(--border);border-radius:100px;transition:background .18s ease;
}
.placa-switch-track::after{
  content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:transform .18s ease;
}
.placa-switch input:checked + .placa-switch-track{background:var(--sky);}
.placa-switch input:checked + .placa-switch-track::after{transform:translateX(22px);}

/* ---- Precio y CTA ---- */
.placa-price-box{
  display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;
  border-top:1px solid var(--border);padding-top:22px;
}
.placa-price{font-family:var(--font-display);font-size:2rem;color:var(--deep);}
.placa-price small{display:block;font-family:var(--font-body);font-weight:600;font-size:.76rem;color:var(--muted);}
.placa-order-btn{width:100%;}
.placa-error{font-size:.82rem;color:var(--heart);min-height:1.2em;}

/* ============ FAQ (autocontenido, mismo criterio visual que mascotas.css) ============ */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-list details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 22px;}
.faq-list summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:1rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:'+';font-size:1.4rem;color:var(--sky);flex:none;line-height:1;}
.faq-list details[open] summary::after{content:'–';}
.faq-list details p{margin-top:12px;color:var(--muted);font-size:.94rem;line-height:1.6;}

/* ============ COMPARATIVA (placa clásica vs personalizada) ============ */
.placa-compare{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:44px;}
@media (max-width:760px){.placa-compare{grid-template-columns:1fr;}}
.placa-compare-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:24px;}
.placa-compare-card h4{font-size:1rem;margin-bottom:12px;}
.placa-compare-card ul{display:flex;flex-direction:column;gap:8px;}
.placa-compare-card ul li{position:relative;padding-left:22px;font-size:.9rem;color:var(--muted);}
.placa-compare-card ul li::before{content:'';position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:2px;background:var(--sky);transform:rotate(45deg);}