/* G2c · /planes: Pro y Teams con el mismo peso, franja de Personal y calculadora mensual de Teams.
   Prefijo pl- para no chocar con paginas.css (que se sigue cargando para cabecera, canales, comparativa y preguntas). */

/* ---------- Accesos rápidos (también en escritorio: Personal ya no está en el primer pliegue) ---------- */
.pl-saltos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.pl-saltos a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 1rem; border-radius: 999px; border: 1px solid rgba(15, 23, 42, .18); text-decoration: none; font-weight: 600; font-size: .9375rem; color: var(--tinta); transition: border-color .15s; }
.pl-saltos a:hover { border-color: var(--tinta); }

/* ---------- Pro y Teams ---------- */
.pl-oferta { padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem) 0 var(--e-6); }
.pl-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--blanco); border: 1px solid rgba(15, 23, 42, .12); border-radius: 22px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 28px 60px -32px rgba(30, 58, 138, .35); overflow: hidden; }
.pl-plan { grid-row: span 6; display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-width: 0; padding: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); scroll-margin-top: 6rem; }
.pl-plan + .pl-plan { border-left: 1px solid rgba(15, 23, 42, .1); }
.pl-plan__nombre { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 600; }
.pl-plan__quien { margin-top: .35rem; color: var(--gris-oscuro); font-size: 1rem; }
.pl-plan__valor { margin-top: 1rem; text-wrap: balance; font-size: 1.0625rem; line-height: 1.45; font-weight: 500; color: var(--tinta); max-width: 28em; }

.pl-precio { margin-top: 1.35rem; display: grid; align-content: start; gap: .2rem; }
.pl-precio__monto { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .45rem; font-variant-numeric: tabular-nums; }
.pl-precio__monto [data-monto] { font-size: clamp(2.3rem, 1.7rem + 1.5vw, 3rem); line-height: 1; font-weight: 600; letter-spacing: -.04em; }
.pl-precio__desde, .pl-precio__unidad { font-size: 1rem; color: var(--gris-oscuro); font-weight: 500; }
.pl-precio__detalle { font-size: .9375rem; color: var(--gris-oscuro); font-variant-numeric: tabular-nums; }
.pl-precio__detalle--fuerte { color: var(--tinta); font-weight: 500; }
.pl-precio__uso { margin-top: .35rem; font-size: .875rem; color: var(--gris-oscuro); }
.pl-precio [hidden] { display: none; }
.pl-plan__accion { margin-top: 1.35rem; justify-self: start; }
.pl-incluye { align-self: start; }

/* Detalle secundario de Teams */
.pl-plan__extra { margin-top: 1rem; display: grid; gap: 1.25rem; align-content: start; }
.pl-mas > summary { list-style: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; font-weight: 600; font-size: .9375rem; color: var(--azul); }
.pl-mas > summary::-webkit-details-marker { display: none; }
.pl-mas > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.pl-mas[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.pl-mas ul { display: grid; gap: .35rem; padding: .25rem 0 .25rem 1rem; border-left: 2px solid rgba(15, 23, 42, .1); font-size: .9375rem; color: var(--gris-oscuro); }

/* ---------- Calculadora mensual de Teams: fila propia de la caja; el control queda bajo la columna de Teams ---------- */
.pl-calc { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--lienzo); border-top: 1px solid rgba(15, 23, 42, .1); }
.pl-calc__intro, .pl-calc__cuerpo { padding: clamp(1.25rem, .9rem + 1vw, 1.75rem) clamp(1.5rem, 1rem + 1.2vw, 2.25rem); display: grid; gap: .5rem; align-content: start; justify-items: start; min-width: 0; }
.pl-calc__titulo { font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
.pl-calc__ciclo { display: inline-flex; align-items: center; min-height: 26px; padding: 0 .65rem; border-radius: 999px; background: #E8EEFF; color: var(--azul); font-size: .8125rem; font-weight: 600; }
.pl-calc__fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1.75rem; }
.pl-calc__campo { display: grid; gap: .3rem; }
.pl-calc__etiqueta { font-size: .875rem; font-weight: 600; color: var(--tinta); }
.pl-calc__control { display: inline-flex; align-items: stretch; border: 1.5px solid #CBD5E1; border-radius: 12px; background: var(--blanco); }
.pl-calc__control:has(.pl-calc__entrada[aria-invalid="true"]) { border-color: var(--error-texto); }
.pl-calc__paso { width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.35rem; line-height: 1; font-weight: 500; color: var(--azul); border-radius: 10px; transition: background-color .15s; }
.pl-calc__paso:hover:not(:disabled) { background: #EEF2F7; }
.pl-calc__paso:disabled { color: #94A3B8; cursor: not-allowed; }
.pl-calc__entrada { width: 5.5rem; min-height: 44px; border: 0; border-inline: 1px solid #E2E8F0; background: transparent; text-align: center; font: inherit; font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); padding: 0 .4rem; }
.pl-calc__entrada:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
.pl-calc__total { font-size: 1.0625rem; color: var(--gris-oscuro); font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; padding-bottom: .2rem; }
.pl-calc__total strong { font-size: clamp(1.5rem, 1.2rem + .8vw, 1.85rem); font-weight: 600; letter-spacing: -.03em; color: var(--tinta); }
.pl-calc__desglose { font-size: .9375rem; color: var(--tinta); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; max-width: 100%; }
.pl-calc__error { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .6rem; color: var(--error-texto); font-weight: 600; font-size: .9375rem; }
.pl-calc__error::before { content: '!'; display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--error-texto); color: var(--blanco); font-size: .7rem; font-weight: 700; flex-shrink: 0; }
.pl-calc__volver { min-height: 44px; display: inline-flex; align-items: center; font-size: .9375rem; }
.pl-calc__grande { font-size: .9375rem; color: var(--tinta); font-weight: 500; }
.pl-calc__nota, .pl-calc__anual { font-size: .875rem; color: var(--gris-oscuro); max-width: 30em; }
.pl-calc__accion { display: inline-block; min-height: 44px; padding-block: .7rem; line-height: 1.4; font-size: .9375rem; }
.pl-calc [hidden] { display: none; }
.sin-js .pl-calc__control, .sin-js .pl-calc__accion { display: none; }

/* Carga del catálogo: la calculadora también espera */
[data-catalogo][aria-busy="true"] .pl-calc__total strong, [data-catalogo][aria-busy="true"] .pl-calc__desglose { color: transparent; border-radius: 8px; background: linear-gradient(90deg, #EEF2F7 0%, #F6F8FB 50%, #EEF2F7 100%); background-size: 200% 100%; animation: pg-brillo 1.4s linear infinite; }
[data-catalogo][aria-busy="true"] .pl-precio__desde, [data-catalogo][aria-busy="true"] .pl-precio__detalle { color: transparent; }
@media (prefers-reduced-motion: reduce) { [data-catalogo][aria-busy="true"] * { animation: none !important; } }

/* ---------- Nora Personal: franja secundaria ---------- */
.pl-personal { margin-top: 1.25rem; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.05fr) minmax(0, 1.55fr) auto; gap: 1rem 2.25rem; align-items: center; padding: 1.25rem clamp(1.25rem, .9rem + 1vw, 1.75rem); background: var(--lienzo); border: 1px solid rgba(15, 23, 42, .1); border-radius: 18px; scroll-margin-top: 6rem; }
.pl-personal__nombre { font-size: clamp(1.25rem, 1.1rem + .4vw, 1.45rem); line-height: 1.1; letter-spacing: -.02em; font-weight: 600; }
.pl-personal .pl-plan__quien { margin-top: .2rem; font-size: .9375rem; }
.pl-precio--personal { margin-top: 0; }
.pl-precio--personal .pl-precio__monto [data-monto] { font-size: clamp(1.5rem, 1.25rem + .6vw, 1.8rem); letter-spacing: -.03em; }
.pl-precio--personal .pl-precio__uso { margin-top: .15rem; }
.pl-personal__incluye { display: grid; gap: .3rem; font-size: .9375rem; line-height: 1.35; }
.pl-personal__incluye li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .5rem; align-items: start; }
.pl-personal__incluye .icono { width: 1rem; height: 1rem; margin-top: .12rem; color: var(--cian-profundo); stroke-width: 2.4; }
.pl-personal__incluye .pg-incluye__guion { margin-top: .55rem; }
.pl-personal__accion { justify-self: end; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .pl-personal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .pl-personal__accion { justify-self: start; }
}
@media (max-width: 900px) {
  .pl-par { grid-template-columns: 1fr; }
  .pl-plan { grid-row: auto; display: flex; flex-direction: column; }
  .pl-plan + .pl-plan { border-left: 0; border-top: 1px solid rgba(15, 23, 42, .1); }
  .pl-plan__accion { align-self: flex-start; }
  .pl-calc { grid-template-columns: 1fr; }
  .pl-calc__cuerpo { padding-top: 0; }
}
@media (max-width: 600px) {
  .pl-personal { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem; }
  .pl-calc__fila { flex-direction: column; align-items: flex-start; }
}

/* Lista de Teams: «Todo Nora Pro…» encabeza la lista */
.pl-incluye--bloque { display: grid; gap: .7rem; }
.pl-incluye__base { font-weight: 600; color: var(--tinta); }
.pl-incluye__lista { display: grid; gap: .7rem; }
/* Comparativa agrupada */
.pg-tabla .pl-tabla__grupo th { padding-top: 1.4rem; font-size: .875rem; font-weight: 600; color: var(--cian-profundo); border-bottom-color: rgba(15, 23, 42, .2); width: auto; }

/* Coordinación G2c · tarjeta Teams: lo que suma, jerarquizado */
.pl-suma { margin-top: .25rem; padding: 1rem 1.1rem; border-radius: 14px; background: #EEF3FF; border: 1px solid rgba(30, 58, 138, .14); }
.pl-suma .pl-incluye__base { font-size: .95rem; }
.pl-suma__lista { display: grid; gap: .8rem; margin-top: .6rem; }
.pl-suma__lista li { display: grid; gap: .1rem; padding-left: .9rem; border-left: 3px solid var(--cian); }
.pl-suma__lista strong { font-weight: 600; color: var(--tinta); letter-spacing: -.005em; }
.pl-suma__lista span { font-size: .925rem; color: var(--gris-oscuro); line-height: 1.45; }
.pl-calc__anual-estado p { max-width: 34em; color: var(--gris-oscuro); }

.pl-suma__lista li { grid-template-columns: minmax(0, 1fr); }