/* Concierge Patrimonial — Planos Flip 3D
 * Cards Prime/Rise/Legacy com flip 3D no hover. Paleta marrom escuro.
 * Carregado APENAS em /planos. Classes prefixadas .pf-* pra evitar conflito com site.css.
 */

:root{
  --pf-marrom-md:#2a1f12;
  --pf-marrom-dp:#1a1410;
  --pf-marfim-sub:rgba(232,230,223,0.62);
  --pf-ease:cubic-bezier(0.32,0.72,0,1);
}

/* Fix: body em /planos com bg escuro pra não aparecer linha clara
   entre nav (fixed) e #planos (96px de padding-top do body.subroute) */
html,body.subroute{background:var(--marrom-dk)!important}

/* Wrapper do grid */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1280px;margin:0 auto}
@media(max-width:980px){.pf-grid{grid-template-columns:1fr;gap:32px}}

/* Card wrap: badge "Mais escolhido" vive aqui (fora do flip) */
.pf-wrap{position:relative;perspective:2000px}

/* Card flip — height fixo, transição otimizada */
.pf-card{position:relative;width:100%;height:760px;transform-style:preserve-3d;transition:transform .55s var(--pf-ease);cursor:pointer;will-change:transform}
.pf-wrap:hover .pf-card,.pf-wrap:focus-within .pf-card{transform:rotateY(180deg);transition:transform .8s cubic-bezier(0.34,1.35,0.5,1)}
.pf-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid rgba(206,157,98,.22);background:var(--pf-marrom-md);padding:44px 32px;display:flex;flex-direction:column;overflow:hidden}
.pf-face--back{transform:rotateY(180deg);padding:38px 28px}
.pf-wrap--destaque .pf-face{border-color:rgba(206,157,98,.55);background:linear-gradient(180deg,#3a2916,#221708);box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}

/* Badge "Mais escolhido" — fora do .pf-card, não gira */
.pf-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--dourado);color:var(--marrom-dk);font-family:var(--sans);font-size:9px;letter-spacing:.32em;text-transform:uppercase;font-weight:700;padding:7px 18px;z-index:20;border:1px solid rgba(206,157,98,.5);pointer-events:none}

/* FRONT face */
.pf-nivel{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.pf-num{font-family:var(--sans);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--pf-marfim-sub)}
.pf-tag{display:inline-block;font-family:var(--sans);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--dourado);border:1px solid var(--dourado);padding:5px 11px}
.pf-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--dourado);font-size:18px;color:var(--dourado);margin-bottom:32px}
.pf-nome{font-family:var(--sans);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--dourado);font-weight:600;margin-bottom:18px}
.pf-titulo{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,2vw,26px);line-height:1.2;color:var(--marfim);margin-bottom:24px;letter-spacing:-.01em}
.pf-sub{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--pf-marfim-sub);line-height:1.55;margin-bottom:auto}
.pf-hint{margin-top:36px;display:flex;align-items:center;justify-content:space-between;padding-top:24px;border-top:1px solid rgba(206,157,98,.14);font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--dourado)}
.pf-hint span:last-child{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:.02em;font-size:13px;color:var(--pf-marfim-sub)}

/* BACK face */
.pf-b-head{margin-bottom:18px}
.pf-b-num{font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--pf-marfim-sub);margin-bottom:6px}
.pf-b-nome{font-family:var(--sans);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--dourado);font-weight:600;margin-bottom:14px}
.pf-b-sub{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--pf-marfim-sub);line-height:1.5;margin-bottom:20px}
.pf-b-section-title{font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--dourado);margin:14px 0 10px;font-weight:600}
.pf-b-list{list-style:none;padding:0;margin:0 0 16px}
.pf-b-list li{font-family:var(--serif);font-size:13px;line-height:1.5;color:var(--marfim);padding:7px 0 7px 18px;position:relative}
.pf-b-list li::before{content:'→';position:absolute;left:0;color:var(--dourado);font-style:normal}
.pf-b-entrega-title{font-family:var(--sans);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--pf-marfim-sub);margin:12px 0 8px;font-weight:600}
.pf-b-entrega-list{list-style:none;padding:0;margin:0 0 18px;border-top:1px solid rgba(206,157,98,.12)}
.pf-b-entrega-list li{font-family:var(--serif);font-size:12px;color:var(--marfim);padding:7px 0;border-bottom:1px solid rgba(206,157,98,.08)}
.pf-b-cta{display:block;text-align:center;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--marrom-dk);background:var(--dourado);padding:14px;text-decoration:none;margin-top:auto;transition:background .25s var(--pf-ease)}
.pf-b-cta:hover{background:var(--dourado-lt)}

/* Mobile: desliga flip (tap não funciona bem em flip 3D em iOS) */
@media(max-width:980px){
  .pf-wrap{perspective:none}
  .pf-card{height:auto;transform-style:flat}
  .pf-wrap:hover .pf-card{transform:none}
  .pf-face{position:relative;inset:auto;backface-visibility:visible}
  .pf-face--front{display:none}
  .pf-face--back{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .pf-card{transition:none}
  .pf-wrap:hover .pf-card{transform:none}
  .pf-face--front{display:none}
  .pf-face--back{transform:none;position:relative;inset:auto;backface-visibility:visible}
}

/* botão do verso fixado no rodapé — os 3 cards alinham igual (08/07) */
.pf-face--back{padding-bottom:88px}
.pf-face--back .pf-b-cta{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);margin:0;white-space:nowrap}
@media (prefers-reduced-motion: reduce){
  .pf-wrap:hover .pf-card,.pf-wrap:focus-within .pf-card{transition:transform .55s ease}
}