/* /precios. Componentes y tokens en brand.css (tarjetas de plan incluidas).
   Moneda, periodo y salas de Studio: radios ocultos (#moneda-*, #periodo-*, #salas-*) hermanos de los controles y de las
   tarjetas; con ~ se muestra solo el precio elegido, sin JavaScript (la CSP de la página no lo necesita para esto).
   Fase V1 (15-10-2026): cuatro planes (Free, Pro, Plus y Studio), en cuatro columnas en pantallas anchas, dos en tabletas
   y una en el teléfono. */
.price-hero{text-align:center}
.price-hero .lead{margin-inline:auto}

/* ---------- Selectores (aspecto del Segmented de la app) ---------- */
.pricing-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;margin:0 0 28px}
.switch{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px}
.switch-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--st-text-3)}
.segmented{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:4px;border:1px solid var(--st-border-2);border-radius:12px;background:var(--st-field)}
.segmented label{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:8px;color:var(--st-text-2);font-size:14px;font-weight:600;cursor:pointer;
  transition:background var(--st-fast),color var(--st-fast),box-shadow var(--st-mid)}
.segmented label:hover{color:var(--st-text);background:var(--st-hover)}
.save{padding:2px 8px;border-radius:var(--st-r-pill);background:rgba(var(--st-success-rgb),.14);color:var(--st-success);font-size:11.5px;font-weight:700;white-space:nowrap}
/* En claro el verde de la marca sobre su tinte daba 3,6:1; este llega a 5,3:1 (AA para texto pequeño). */
@media (prefers-color-scheme:light){.save{color:#066b49}}
#moneda-usd:checked~.pricing-controls label[for=moneda-usd],#moneda-cop:checked~.pricing-controls label[for=moneda-cop],
#periodo-mes:checked~.pricing-controls label[for=periodo-mes],#periodo-anio:checked~.pricing-controls label[for=periodo-anio]{background:var(--st-grad);color:#fff;box-shadow:0 4px 14px rgba(var(--st-primary-rgb),.3)}
#periodo-anio:checked~.pricing-controls label[for=periodo-anio] .save{background:rgba(7,17,31,.3);color:#fff}
#moneda-usd:focus-visible~.pricing-controls label[for=moneda-usd],#moneda-cop:focus-visible~.pricing-controls label[for=moneda-cop],
#periodo-mes:focus-visible~.pricing-controls label[for=periodo-mes],#periodo-anio:focus-visible~.pricing-controls label[for=periodo-anio]{outline:2px solid var(--st-primary-hi);outline-offset:2px}

/* Cuatro planes: cuatro columnas con el precio algo más pequeño (COP 3.999.000 cabe), dos en tabletas, una en el teléfono. */
.pricing .plan-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
.pricing .plan-card{padding:24px}
.pricing .plan-price strong{font-size:clamp(26px,2.4vw,32px)}
@media (max-width:1180px){.pricing .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px}.pricing .plan-price strong{font-size:clamp(30px,4vw,38px)}}
.plan-plus{border-color:var(--st-border-2)}
.plan-soon{margin:0;color:var(--st-text-3);font-size:13.5px;line-height:1.5}
.pay-account{margin:18px 0 0}

/* Studio: el paquete de salas, con el mismo aspecto del selector de arriba, dentro de su tarjeta. */
.rooms-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.rooms-pick .segmented label{min-width:46px;min-height:34px;padding:0 10px;justify-content:center;font-size:14px;white-space:nowrap}
#salas-3:checked~.plan-grid label[for=salas-3],#salas-5:checked~.plan-grid label[for=salas-5],
#salas-10:checked~.plan-grid label[for=salas-10],#salas-20:checked~.plan-grid label[for=salas-20]{background:var(--st-grad);color:#fff;box-shadow:0 4px 14px rgba(var(--st-primary-rgb),.3)}
#salas-3:focus-visible~.plan-grid label[for=salas-3],#salas-5:focus-visible~.plan-grid label[for=salas-5],
#salas-10:focus-visible~.plan-grid label[for=salas-10],#salas-20:focus-visible~.plan-grid label[for=salas-20]{outline:2px solid var(--st-primary-hi);outline-offset:2px}

/* Solo el precio elegido (y, en Studio, el del paquete de salas elegido). */
#moneda-usd:checked~.plan-grid [data-cur=cop],#moneda-cop:checked~.plan-grid [data-cur=usd],
#periodo-mes:checked~.plan-grid [data-per=anio],#periodo-anio:checked~.plan-grid [data-per=mes]{display:none}
#salas-3:checked~.plan-grid [data-salas]:not([data-salas="3"]),#salas-5:checked~.plan-grid [data-salas]:not([data-salas="5"]),
#salas-10:checked~.plan-grid [data-salas]:not([data-salas="10"]),#salas-20:checked~.plan-grid [data-salas]:not([data-salas="20"]){display:none}

.plan-cta{display:grid;gap:12px;padding-top:18px;border-top:1px solid var(--st-border)}
.how-pay{margin:0;color:var(--st-text-2);font-size:14px;line-height:1.55}
.soon-note{margin:0;color:var(--st-text-3);font-size:13px;text-align:center}
/* Pagos apagados: el botón se ve inactivo con colores sólidos, no con transparencia (blanco sobre el degradado al 62 %
   quedaba en ≈2,4:1 en modo claro), así «Muy pronto podrás pagar aquí» se lee en los dos modos. Los tres botones de pago. */
.pay-btn:disabled{opacity:1;border:1px dashed var(--st-border-3);background:var(--st-surface-3);color:var(--st-text-2);box-shadow:none}
/* Pagos encendidos (precios-pago.js): lo que pasa al pulsar y por qué no se pudo. */
.pay-status{margin:0;padding:10px 14px;border:1px solid var(--st-border-2);border-radius:12px;background:var(--st-tint);color:var(--st-text);font-size:14px;line-height:1.5;text-align:center;overflow-wrap:anywhere}
.pay-status[data-tone=error]{border-color:rgba(var(--st-danger-rgb),.45);background:rgba(var(--st-danger-rgb),.10)}
/* Prueba gratis de Pro (Fase V3, precios-prueba.js): debajo del botón de pago, oculta mientras está apagada. */
.trial-box{display:grid;gap:8px;padding-top:12px;border-top:1px dashed var(--st-border)}
.trial-box[hidden]{display:none}

/* ---------- Unlimited Fundadora (Fase V2) ---------- */
/* Una tarjeta ancha debajo de los cuatro planes (pago único, no se compara mes a mes). Su precio sigue a la moneda elegida
   arriba con los mismos radios (~), sin JavaScript; las condiciones siempre a la vista, con el aviso de borrador. */
.founder{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px 36px;margin-top:var(--st-gap);padding:28px;border-color:rgba(var(--st-primary-rgb),.38)}
#moneda-usd:checked~.founder [data-cur=cop],#moneda-cop:checked~.founder [data-cur=usd]{display:none}
.founder-head{display:grid;align-content:start;gap:14px}
.founder .plan-sum{padding-bottom:0;border-bottom:0}
.founder-left{margin:0;color:var(--st-text);font-size:15px;font-weight:700}
.founder-left[data-tone=out]{color:var(--st-warning)}
.founder-list{align-self:start}
.founder-list li.not-included::before{left:4px;top:.62em;width:10px;height:0;border-left:0;border-bottom:2px solid var(--st-text-3);transform:none}
.founder-terms{grid-column:1/-1;display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--st-border)}
.founder-terms h4{margin:0;font-size:16px}
.founder-terms ol{display:grid;gap:8px;margin:0;padding-left:22px;color:var(--st-text-2);font-size:14px;line-height:1.55}
.draft-note{margin:0;padding:8px 12px;border:1px solid rgba(var(--st-warning-rgb),.42);border-radius:10px;background:rgba(var(--st-warning-rgb),.10);color:var(--st-text);font-size:13.5px;line-height:1.5}
.founder-cta{grid-column:1/-1}
.founder-accept{display:flex;align-items:flex-start;gap:10px;color:var(--st-text-2);font-size:14px;line-height:1.5;cursor:pointer}
.founder-accept input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--st-primary)}
.founder-accept:has(input:disabled){cursor:default;opacity:.75}

/* ---------- Comparación ---------- */
/* La fila Precio sigue a la moneda elegida arriba (:has; sin él se ven las dos, como antes). */
main:has(#moneda-usd:checked) .compare [data-cur=cop],main:has(#moneda-cop:checked) .compare [data-cur=usd]{display:none}
.price-line{display:block}
.compare{max-width:1080px;margin-inline:auto;padding:6px 22px}
.compare table{width:100%;border-collapse:collapse;font-size:14.5px}
.compare th,.compare td{padding:14px 10px;border-bottom:1px solid var(--st-border);text-align:left;vertical-align:top;line-height:1.5}
.compare tbody tr:last-child :is(th,td){border-bottom:0}
.compare thead th{font-family:var(--st-font-display);font-size:16px;color:var(--st-text)}
.compare thead th+th{width:19%}
.compare tbody th{font-weight:600;color:var(--st-text)}
.compare td{color:var(--st-text-2)}
.compare td.yes,.compare td.soon{white-space:nowrap}
@media (min-width:761px){
  .compare td.yes::before{content:"";display:inline-block;width:10px;height:5px;margin:0 10px 3px 2px;border-left:2px solid var(--st-success);border-bottom:2px solid var(--st-success);transform:rotate(-45deg)}
}
.compare td.soon{color:var(--st-warning)}

/* ---------- Cómo pagar ---------- */
.pay-section{border-block:1px solid var(--st-border);background:linear-gradient(180deg,var(--st-tint),transparent)}
.pay-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--st-gap);max-width:920px;margin-inline:auto}
.pay-card{display:grid;align-content:start;gap:12px}
.pay-card h3{margin:6px 0 0;font-size:18px}
.pay-card p{margin:0;color:var(--st-text-2);line-height:1.6}

/* ---------- Preguntas ---------- */
.faq-wrap .faq{max-width:820px;margin-inline:auto}

@media (max-width:760px){
  /* Los cuatro planes, uno debajo de otro (brand.css lo hace para .plan-grid, pero la regla de cuatro columnas pesa más). */
  .pricing .plan-grid{grid-template-columns:minmax(0,1fr)}
  .pricing .plan-card{padding:22px}
  .founder{grid-template-columns:minmax(0,1fr);padding:22px}
  .pricing-controls{flex-direction:column;align-items:stretch;gap:14px}
  .switch{flex-direction:column;align-items:stretch;gap:6px;text-align:center}
  .segmented{width:100%;flex-wrap:nowrap}
  .segmented label{flex:1 1 0;justify-content:center;padding:0 8px;font-size:13.5px;text-align:center;line-height:1.2}
  .pay-grid{grid-template-columns:minmax(0,1fr)}
  /* Comparación apilada: cada función ocupa todo el ancho y debajo van los cuatro planes de dos en dos, cada uno con su nombre (data-label;
     los roles ARIA del HTML conservan la tabla para los lectores de pantalla aunque cambie el display). */
  .compare{padding:2px 16px}
  .compare :is(table,tbody){display:block;font-size:14px}
  .compare thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .compare tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;padding:14px 0;border-bottom:1px solid var(--st-border)}
  .compare tbody tr:last-child{border-bottom:0}
  .compare tbody th{grid-column:1/-1}
  .compare tbody :is(th,td){padding:0;border:0}
  .compare td{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:center}
  .compare td::before{content:attr(data-label);content:attr(data-label) / "";flex:0 0 100%;order:-2;margin-bottom:3px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--st-text-3)}
  .compare td.yes::after{content:"";order:-1;width:10px;height:5px;margin:0 9px 3px 2px;border-left:2px solid var(--st-success);border-bottom:2px solid var(--st-success);transform:rotate(-45deg)}
  .compare td>.price-line{flex:0 0 100%}
}
@media (max-width:350px){
  .segmented label .save{display:none}
}