/* =========================================================================
   Panel «Quiero mis 3 meses gratis» (plan Pro del lanzamiento): partials/panel-pro.php + assets/js/pro.js.
   Estilo nuevo: colores y piezas de base.css (variables --morado, --lila-*, --turquesa…, .pastilla--pro,
   .boton, .boton-icono, .barra-progreso). Las variables --n-* de antes ya no existen: pasaron a base.css.
   Lo cargan la página que lo use (analizador, Mi espacio, planes, calculadoras).
   ========================================================================= */

/* <dialog> nativo (Esc cierra, el foco se queda dentro). En el móvil sube desde abajo. */
.panel-pro { width: min(100% - 2rem, 34rem); max-height: calc(100% - 2rem); padding: 0; border: 0; border-radius: var(--r-4); background: #fff; color: var(--tinta); box-shadow: var(--s-3); overflow: auto; }
.panel-pro::backdrop { background: rgb(13 5 38 / .55); backdrop-filter: blur(3px); }
.panel-pro__cabeza { position: relative; padding: 1.4rem 1.5rem 1rem; background: radial-gradient(20rem 10rem at 100% 0%, rgb(26 255 224 / .18), transparent 70%), linear-gradient(170deg, var(--lila-50), #fff); }
.panel-pro__cerrar { position: absolute; top: .8rem; right: .8rem; border-radius: 50%; border-color: transparent; background: rgb(255 255 255 / .92); box-shadow: var(--s-1); }
.panel-pro h2 { margin: .6rem 0 0; padding-right: 3rem; font-size: 1.5rem; color: var(--tinta); }
.panel-pro__texto { margin: .5rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--tinta-2); }
.panel-pro__lista { margin: 1rem 1.5rem 0; padding: 0; list-style: none; display: grid; gap: .5rem; font-size: 1rem; }
.panel-pro__lista li { display: grid; grid-template-columns: 20px 1fr; gap: .55rem; align-items: start; }
.panel-pro__lista li::before { content: ""; width: 18px; height: 18px; margin-top: .15rem; border-radius: 50%; background: var(--turquesa-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.3l3 3 7-7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.panel-pro__pie { padding: 1.2rem 1.5rem 1.2rem; display: grid; gap: .55rem; }
.panel-pro__nota, .panel-pro__resultado { margin: 0; text-align: center; font-size: 1rem; color: var(--tinta-2); }
.panel-pro__resultado { font-size: 1rem; color: var(--verde-texto); font-weight: 700; }
.panel-pro__arriba { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.panel-pro__oferta { padding: .2rem .6rem; border-radius: var(--r-redondo); background: var(--verde-fondo); color: var(--verde-texto); font-size: 1rem; font-weight: 800; }
.panel-pro__plazas { padding: .75rem .9rem; border-radius: var(--r-2); background: var(--lila-50); border: 1px solid var(--borde); font-size: 1rem; color: var(--tinta-2); }
.panel-pro__plazas p { margin: 0; }
.panel-pro__plazas b { color: var(--tinta); white-space: nowrap; }
.panel-pro__plazas-barra { margin-top: .45rem; height: 7px; background: var(--lila-200); }
.panel-pro__plazas-barra > span { width: 0; background: linear-gradient(90deg, var(--morado), var(--turquesa-2)); }
.panel-pro__ahora-no { justify-self: center; min-height: 44px; padding: .3rem .9rem; border: 0; border-radius: var(--r-2); background: none; font: 700 1rem var(--f); color: var(--tinta-2); cursor: pointer; }
.panel-pro__ahora-no:hover { color: var(--morado); background: var(--lila-50); }
@media (max-width: 40rem) {
  .panel-pro { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--r-4) var(--r-4) 0 0; max-height: 92%; }
  .panel-pro[open] { animation: subir 220ms ease-out; }
}
@media print { .panel-pro { display: none !important; } }

/* Compatibilidad TEMPORAL con los nombres viejos (.ac-boton, .pro): el área 4 ya no los usa; se dejan por si
   alguna plantilla de otra área de la fase 2 todavía los lleva. Usar .boton y .pastilla--pro.con-candado. */
.ac-boton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .7rem 1.4rem; border: 1.5px solid transparent; border-radius: var(--r-2); font: 700 1rem/1.2 var(--f); text-decoration: none; cursor: pointer; }
.ac-boton--morado { background: var(--morado); color: #fff; }
.ac-boton--morado:hover { background: var(--morado-hover); color: #fff; }
.ac-boton--borde { background: #fff; color: var(--morado); border-color: var(--morado); }
.ac-boton--pequeno { min-height: 44px; padding: .45rem .85rem; font-size: 1rem; }
.pro { display: inline-flex; align-items: center; gap: .22rem; padding: .12rem .45rem; border-radius: var(--r-redondo); background: linear-gradient(135deg, var(--cab-2), var(--morado)); color: #fff; font: 800 1rem/1.2 var(--f); letter-spacing: .06em; vertical-align: 2px; white-space: nowrap; }
.pro .icono { width: 10px; height: 10px; color: var(--turquesa); }