/* A3 · Modal de planes y precios. Todo con prefijo pricing-; variables propias (colores del manual de marca). */
.pricing-modal{
  --pr-navy:#0B2733; --pr-navy-deep:#071A22; --pr-teal:#2FD5B8; --pr-teal-deep:#0FA48B;
  --pr-cream:#F5F2EA; --pr-paper:#FAFAF7; --pr-line:#D8D4C9;
  --pr-ink-muted:#46545A; --pr-ink-faint:#6E7A80; --pr-on-navy-muted:#9DB4BA;
  --pr-ease:cubic-bezier(0.23,1,0.32,1);
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:flex-start; justify-content:center;
  background:rgba(11,39,51,0.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  padding:64px 20px; overflow:hidden;
  opacity:0; visibility:hidden; transition:opacity 220ms ease, visibility 0s linear 220ms;
  font-family:'Instrument Sans',Arial,sans-serif; color:var(--pr-navy);
}
.pricing-modal[hidden]{ display:none; }
.pricing-modal.is-open{ opacity:1; visibility:visible; transition:opacity 220ms ease, visibility 0s; }
.pricing-panel{
  position:relative; background:var(--pr-paper); border-radius:24px;
  max-width:1080px; width:100%; max-height:calc(100vh - 128px); max-height:calc(100dvh - 128px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:56px 44px 48px; box-shadow:0 50px 100px -30px rgba(0,0,0,0.45);
  transform:translateY(24px) scale(0.97); transition:transform 320ms var(--pr-ease);
}
.pricing-panel:focus{ outline:none; }
.pricing-modal.is-open .pricing-panel{ transform:none; }

/* Botón cerrar (vf-web-cerrar-precios) */
.pricing-close{
  position:absolute; top:20px; left:20px; z-index:2; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--pr-line); background:#fff; color:var(--pr-navy); padding:0;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background 160ms ease, border-color 160ms ease;
}
.pricing-close:hover{ background:var(--pr-cream); border-color:var(--pr-navy); }
.pricing-close svg{ width:16px; height:16px; }
.pricing-close:focus-visible, .pricing-btn:focus-visible{ outline:2px solid var(--pr-teal-deep); outline-offset:3px; }

.pricing-body{ padding-left:6px; }
.pricing-eyebrow{ margin:0; text-align:center; font:600 11px 'Space Grotesk',Arial,sans-serif; letter-spacing:0.12em; text-transform:uppercase; color:var(--pr-teal-deep); }
.pricing-body h2{ margin:8px 0 0; text-align:center; font:700 clamp(1.7rem,3vw,2.2rem)/1.15 'Space Grotesk',Arial,sans-serif; color:var(--pr-navy); }
.pricing-lead{ margin:14px auto 0; max-width:660px; text-align:center; color:var(--pr-ink-muted); font-size:14.5px; line-height:1.6; }

.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px; align-items:stretch; }
.pricing-card{
  background:#fff; border:1px solid var(--pr-line); border-radius:18px; padding:28px 24px;
  display:flex; flex-direction:column;
  transition:transform 200ms var(--pr-ease), box-shadow 200ms var(--pr-ease);
}
.pricing-card:hover{ transform:translateY(-3px); box-shadow:0 20px 40px -20px rgba(11,39,51,0.35); }
.pricing-card-featured{ border-color:var(--pr-teal-deep); box-shadow:0 0 0 2px var(--pr-teal-deep) inset; }
.pricing-card-featured:hover{ box-shadow:0 0 0 2px var(--pr-teal-deep) inset, 0 20px 40px -20px rgba(11,39,51,0.4); }
.pricing-card h3{ margin:0; font:700 1.25rem 'Space Grotesk',Arial,sans-serif; color:var(--pr-navy); }
.pricing-price{ margin:6px 0 0; font:700 2rem 'Space Grotesk',Arial,sans-serif; color:var(--pr-navy); }
.pricing-price span{ font-size:0.85rem; font-weight:500; color:var(--pr-ink-faint); }
.pricing-tax{ margin:2px 0 0; font-size:12.5px; color:var(--pr-ink-faint); }
.pricing-blurb{ margin:10px 0 0; color:var(--pr-ink-muted); font-size:13.5px; line-height:1.55; min-height:84px; }
.pricing-sub{ margin:16px 0 0; font:600 11px 'Space Grotesk',Arial,sans-serif; letter-spacing:0.1em; text-transform:uppercase; color:var(--pr-teal-deep); }
.pricing-card ul{ list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:10px; }
.pricing-card li{ font-size:13px; color:var(--pr-ink-muted); line-height:1.5; padding-left:16px; position:relative; }
.pricing-card li::before{ content:''; position:absolute; left:0; top:6px; width:6px; height:6px; border-radius:50%; background:var(--pr-teal-deep); }
.pricing-card li em{ font-style:normal; color:var(--pr-ink-faint); }
.pricing-faros li::before{ background:var(--pr-navy); }

/* Botones de página pública: radio 999px, 14,5 px / 600, 160 ms */
.pricing-actions{ margin-top:auto; padding-top:24px; display:flex; flex-direction:column; gap:10px; }
.pricing-btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center; text-decoration:none; cursor:pointer;
  border-radius:999px; padding:14px 26px; min-height:46px; font:600 14.5px 'Space Grotesk',Arial,sans-serif;
  transition:transform 160ms var(--pr-ease), background 160ms var(--pr-ease), border-color 160ms var(--pr-ease);
}
.pricing-btn:active{ transform:scale(0.97); }
.pricing-btn-primary{ background:var(--pr-teal); color:var(--pr-navy-deep); border:1px solid transparent; }
.pricing-btn-primary:hover{ background:#4EE2C8; transform:translateY(-1px); }
.pricing-btn-line{ background:transparent; color:var(--pr-navy); border:1px solid var(--pr-line); }
.pricing-btn-line:hover{ border-color:var(--pr-navy); background:rgba(11,39,51,0.04); transform:translateY(-1px); }
.pricing-small{ margin:0; text-align:center; font-size:12px; color:var(--pr-ink-faint); }

.pricing-modules{ margin-top:34px; }
.pricing-modules h4{ margin:0; font:700 1.05rem 'Space Grotesk',Arial,sans-serif; color:var(--pr-navy); }
.pricing-modules-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:14px; }
.pricing-module{ border:1px solid var(--pr-line); border-radius:14px; padding:18px 20px; background:#fff; }
.pricing-module strong{ font-family:'Space Grotesk',Arial,sans-serif; color:var(--pr-navy); }
.pricing-module p{ margin:6px 0 0; font-size:13px; color:var(--pr-ink-muted); line-height:1.5; }
.pricing-module .pricing-module-price{ font-weight:600; color:var(--pr-navy); }
.pricing-soon{ display:inline-block; margin-left:6px; padding:2px 9px; border-radius:999px; border:1.5px solid var(--pr-navy); background:var(--pr-cream); font:600 11px 'Space Grotesk',Arial,sans-serif; }
.pricing-note{ margin:18px 0 0; font-size:12.5px; color:var(--pr-ink-faint); text-align:center; line-height:1.6; }

.pricing-addon{ margin-top:34px; padding:26px 28px; border-radius:16px; background:var(--pr-navy); color:var(--pr-cream); }
.pricing-addon-tag{ margin:0; font:600 11px 'Space Grotesk',Arial,sans-serif; letter-spacing:0.12em; text-transform:uppercase; color:var(--pr-teal); }
.pricing-addon h4{ margin:8px 0 0; font:700 1.15rem 'Space Grotesk',Arial,sans-serif; color:var(--pr-cream); }
.pricing-addon p:not(.pricing-addon-tag){ margin:8px 0 0; color:var(--pr-on-navy-muted); font-size:13.5px; line-height:1.6; }

@media (max-width:900px){
  .pricing-grid, .pricing-modules-grid{ grid-template-columns:1fr; }
  .pricing-blurb{ min-height:0; }
}
@media (max-width:600px){
  .pricing-modal{ padding:16px; }
  .pricing-panel{ padding:64px 18px 28px; border-radius:20px; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); }
  .pricing-body{ padding-left:0; }
  .pricing-close{ top:14px; left:14px; }
  .pricing-addon{ padding:22px 20px; }
}
@media (prefers-reduced-motion:reduce){
  .pricing-modal, .pricing-panel, .pricing-card, .pricing-btn{ transition:none; }
  .pricing-card:hover, .pricing-btn:hover{ transform:none; }
}