/* Páginas por plan (/plan-<slug>/). Lo propio de estas páginas; tokens y
   componentes vienen de ds.css. Papel: ../negocio/ecosistema/pagina-plan-esencial.md
   Escenas del Estudio: demo-planes.mjs (prefijo .pl-esc). */

.pl-borrador { background: #EDE9FE; color: #5B21B6; text-align: center; font: 700 var(--ds-step--1)/1.4 var(--ds-font); padding: 6px 16px; }

/* ---- Portada ---- */
.pl-hero { padding: var(--ds-space-7) 0 var(--ds-space-8); background: linear-gradient(180deg, var(--ds-orange-50) 0%, var(--ds-bg) 100%); }
.pl-hero__grid { display: grid; gap: var(--ds-space-7); align-items: center; }
@media (min-width: 1000px) { .pl-hero__grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--ds-space-7); } }
/* Composición de la portada: fondo de color, el tablero y dos avisos encima (patrón UiCore) */
.pl-compo { position: relative; padding: var(--ds-space-8) var(--ds-space-5) var(--ds-space-8) var(--ds-space-6); }
.pl-compo__bg { position: absolute; inset: 0 0 0 var(--ds-space-7); border-radius: var(--ds-radius-lg); background: var(--ds-orange-100); }
.pl-compo .pl-esc { position: relative; }
.pl-compo .ds-float--tl { top: 0; left: 0; }
.pl-compo .ds-float--br { bottom: 0; right: 0; }
/* Tarjetas flotantes de la portada: más angostas y sin tapar el tablero (6/11/2026) */
.pl-compo .ds-float { max-width: 230px; }
.pl-compo .ds-float strong { font-size: var(--ds-step-0); line-height: 1.25; }
@media (max-width: 640px) { .pl-compo { padding: var(--ds-space-7) 0; } .pl-compo__bg { left: var(--ds-space-5); } }
.pl-hero h1 { font-size: var(--ds-step-4); max-width: 22ch; }
.pl-hero__copy > * + * { margin-top: var(--ds-space-5); }
.pl-hero__copy .ds-lead { font-size: var(--ds-step-0); }
.pl-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ds-space-2) var(--ds-space-4); color: var(--ds-muted); font-size: var(--ds-step--1); }
.pl-precio strong { color: var(--ds-heading); font-size: var(--ds-step-1); font-weight: 800; }
.pl-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--ds-step--1); color: var(--ds-muted); }
.pl-crumbs a { color: var(--ds-muted); text-decoration: none; }
.pl-crumbs a:hover { color: var(--ds-heading); text-decoration: underline; }

/* ---- Término con explicación al tocar ---- */
.pl-term { position: relative; display: inline; }
.pl-term__btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: help; text-decoration: underline dotted var(--ds-orange-500); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pl-term__btn:hover, .pl-term__btn[aria-expanded="true"] { text-decoration-style: solid; }
.pl-term__tip { position: absolute; z-index: 20; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); width: min(320px, 80vw); background: var(--ds-navy-900); color: var(--ds-navy-100); font-size: var(--ds-step--1); font-weight: 400; line-height: 1.5; letter-spacing: 0; text-align: left; padding: var(--ds-space-4); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-3); }
.pl-term__tip[hidden] { display: none; }
.pl-term__tip a { color: var(--ds-orange-200); font-weight: 700; display: inline-block; margin-top: var(--ds-space-2); }
@media (max-width: 640px) { .pl-term__tip { left: 0; transform: none; } }

/* ---- Bloques de "cómo se trabaja" ---- */
.pl-trabajo { display: grid; gap: var(--ds-space-8); }
.pl-trabajo__txt > * + * { margin-top: var(--ds-space-3); }
.pl-trabajo__txt h3 { font-size: var(--ds-step-2); }
@media (min-width: 900px) { .pl-trabajo .ds-split { grid-template-columns: 0.8fr 1.2fr; gap: var(--ds-space-7); } .pl-trabajo .ds-split--reverse { grid-template-columns: 1.2fr 0.8fr; } }
.pl-rev__body, .pl-equipo__body { padding: 20px; }
@media (min-width: 900px) { .pl-cambia { grid-template-columns: 0.85fr 1.15fr !important; } }
.pl-trabajo__solo { max-width: 680px; padding: var(--ds-space-6); background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); }
.pl-trabajo__solo > * + * { margin-top: var(--ds-space-3); }
.pl-trabajo__solo h3 { font-size: var(--ds-step-2); }

.pl-paraquien { max-width: 820px; margin: 0 auto; text-align: center; font-size: var(--ds-step-2); line-height: 1.4; font-weight: 600; color: var(--ds-heading); }

.pl-dudas__links { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); padding-bottom: var(--ds-space-5); }

/* ---- Cierre ---- */
.pl-cierre { text-align: center; }
.pl-cierre .ds-wrap > * + * { margin-top: var(--ds-space-4); }
.pl-cierre__precio { font-size: var(--ds-step-5); font-weight: 800; color: var(--ds-gray-0); letter-spacing: -0.02em; line-height: 1; }
.pl-cierre__precio small { font-size: var(--ds-step-1); font-weight: 600; color: var(--ds-navy-100); margin-left: 6px; }
.pl-cierre__cond { color: var(--ds-gray-0); font-weight: 700; }
.pl-cierre__ajuste { color: var(--ds-navy-100); font-size: var(--ds-step--1); }
.pl-cierre__asis { color: var(--ds-navy-100); font-size: var(--ds-step--1); max-width: 46ch; margin-left: auto; margin-right: auto; }
.pl-cierre .ds-actions { justify-content: center; margin-top: var(--ds-space-6); }
.pl-comparar { padding: var(--ds-space-5) 0; text-align: center; font-size: var(--ds-step--1); }
.pl-comparar a { color: var(--ds-muted); }

/* ============================================================
   Escenas del Estudio (interfaz simplificada)
   ============================================================ */
.pl-esc { --bosque: #2F3E2E; --cobre: #A8673A; --arena: #D9CBB4; --lino: #F2EBDF; --serif: "Fraunces", Georgia, serif;
  background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-3); overflow: hidden; font-size: 14px; line-height: 1.35; color: var(--ds-text); }
.pl-esc__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--ds-border); background: var(--ds-gray-25); }
.pl-esc__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--ds-gray-100); }
.pl-esc__bar b { margin-left: 8px; color: var(--ds-heading); font-size: 13px; }
.pl-esc__bar small { margin-left: auto; color: var(--ds-muted); font-size: 12px; }
.pl-mono { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cobre, #A8673A); color: var(--lino, #F2EBDF); font: italic 400 15px/1 var(--serif, Georgia, serif); }
.pl-tarjeta { display: flex; align-items: center; gap: 10px; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: 10px 12px; box-shadow: var(--ds-shadow-1); }
.pl-tarjeta b { display: block; color: var(--ds-heading); font-size: 13px; }
.pl-tarjeta small { color: var(--ds-muted); font-size: 12px; }

/* Aparición en secuencia (se repite). Sin movimiento si la persona lo pidió. */
/* Todo visible de entrada; cuando la escena entra en pantalla, se arma una
   vez en orden (clase .is-play que pone el script de la página). */
@media (prefers-reduced-motion: no-preference) {
  .pl-esc.is-play .pl-anim { animation: pl-aparece .45s var(--d, 0s) both; }
}
@keyframes pl-aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Tablero: la tarjeta cruza las seis columnas */
.pl-tablero__cols { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); min-height: 240px; }
.pl-tablero__col { border-right: 1px solid var(--ds-border); padding: 12px 6px; display: flex; flex-direction: column; gap: 8px; background: var(--ds-gray-25); }
.pl-tablero__carril { height: 72px; flex: none; }
.pl-tarjeta--mini { padding: 8px; border-radius: 8px; }
.pl-tarjeta--mini b { font-size: 11px; line-height: 1.25; font-weight: 600; }
.pl-tablero__col:last-of-type { border-right: 0; }
.pl-tablero__col p { display: flex; gap: 5px; align-items: flex-start; font-size: 12px; font-weight: 700; color: var(--ds-heading); line-height: 1.2; min-height: 2.4em; }
.pl-tablero__col i { flex: none; width: 8px; height: 8px; margin-top: 2px; border-radius: 50%; }
.pl-tablero__mov { position: absolute; left: 0; right: 0; top: 62px; height: 72px; pointer-events: none; }
.pl-tarjeta--mov { position: absolute; left: 0; width: calc(100% / 6 - 10px); margin-left: 5px; padding: 8px; border-color: var(--ds-orange-200); box-shadow: var(--ds-shadow-2); }
.pl-tarjeta--mov .pl-mono { display: none; }
.pl-tarjeta--mov b { font-size: 11px; line-height: 1.2; }
.pl-tarjeta--mov small { font-size: 10px; }
@media (prefers-reduced-motion: no-preference) { .pl-tarjeta--mov { animation: pl-cruza 12s infinite; } }
@keyframes pl-cruza {
  0%, 10%  { left: 0; }
  16%, 26% { left: calc(100% / 6); }
  32%, 48% { left: calc(100% / 6 * 2); }
  54%, 62% { left: calc(100% / 6 * 3); }
  68%, 76% { left: calc(100% / 6 * 4); }
  82%, 100% { left: calc(100% / 6 * 5); }
}
@media (max-width: 640px) {
  .pl-tablero__cols { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; }
  .pl-tablero__col { border-bottom: 1px solid var(--ds-border); }
  .pl-tablero__mov, .pl-tablero__carril { display: none; }
}

/* Marca en tres lugares */
.pl-marca { position: relative; aspect-ratio: 16 / 11; background: radial-gradient(120% 90% at 30% 20%, #F3ECE0 0%, #E6DCCB 60%, #D8CBB5 100%); border: 0; container-type: inline-size; }
.pl-marca__web { position: absolute; left: 4%; top: 7%; width: 66%; background: var(--lino); border-radius: 1.6cqw; overflow: hidden; box-shadow: 0 2cqw 4cqw rgba(47,62,46,.22); }
.pl-marca__webbar { display: flex; align-items: center; gap: .8cqw; padding: 1.2cqw 1.6cqw; background: #E9E1D2; }
.pl-marca__webbar span { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #CFC3AE; }
.pl-marca__webbar em { margin-left: 1cqw; font-style: normal; font-size: 1.6cqw; color: #7B735F; }
.pl-marca__webhero { position: relative; padding: 2.6cqw 3cqw 4cqw; min-height: 30cqw; }
.pl-marca__logo { display: flex; align-items: center; gap: 1cqw; font: 500 2cqw/1 var(--serif); color: var(--bosque); }
.pl-marca__logo .pl-mono { width: 3.4cqw; height: 3.4cqw; font-size: 2cqw; }
.pl-marca__logo em { font-style: italic; color: var(--cobre); }
.pl-marca__tit, .pl-marca__img p, .pl-rev__pieza p { font: 500 5.4cqw/0.95 var(--serif); color: var(--bosque); letter-spacing: -.02em; margin: 3cqw 0 2.4cqw; }
.pl-marca__tit em, .pl-marca__img p em, .pl-rev__pieza p em { font-style: italic; color: var(--cobre); }
.pl-marca__btn { display: inline-block; background: var(--bosque); color: var(--lino); font-size: 1.5cqw; font-weight: 700; padding: 1cqw 2cqw; border-radius: 99px; }
.pl-marca__mueble { position: absolute; right: 8%; bottom: 14%; width: 22%; aspect-ratio: 1.6; border-radius: 1cqw 1cqw .4cqw .4cqw; background: linear-gradient(180deg, var(--cobre) 0 62%, var(--bosque) 62% 100%); box-shadow: 0 1.4cqw 0 -.6cqw rgba(47,62,46,.35); }
.pl-marca__mueble::before, .pl-marca__mueble::after { content: ""; position: absolute; bottom: -22%; width: 6%; height: 24%; background: var(--bosque); }
.pl-marca__mueble::before { left: 10%; } .pl-marca__mueble::after { right: 10%; }
.pl-marca__post { position: absolute; right: 4%; top: 30%; width: 34%; background: #fff; border-radius: 1.6cqw; overflow: hidden; box-shadow: 0 2cqw 4cqw rgba(47,62,46,.25); }
.pl-marca__ig { display: flex; align-items: center; gap: 1cqw; padding: 1.4cqw; font-size: 1.6cqw; color: var(--ds-heading); }
.pl-marca__ig .pl-mono { width: 3cqw; height: 3cqw; font-size: 1.7cqw; }
.pl-marca__img { position: relative; aspect-ratio: 1; background: var(--arena); padding: 2.4cqw; }
.pl-marca__img p { font-size: 4.2cqw; margin: 0; }
.pl-marca__img .pl-marca__mueble { width: 46%; right: 10%; bottom: 16%; }
.pl-marca__story { position: absolute; left: 30%; bottom: 5%; width: 20%; aspect-ratio: 9 / 16; background: var(--bosque); border-radius: 1.8cqw; padding: 2cqw; box-shadow: 0 2cqw 4cqw rgba(47,62,46,.3); color: var(--lino); display: flex; flex-direction: column; }
.pl-marca__story p { font: 500 2.8cqw/1 var(--serif); margin: 0; }
.pl-marca__story b { font-style: italic; font-weight: 500; color: var(--arena); }
.pl-marca__story .pl-marca__mueble { position: relative; right: auto; bottom: auto; width: 80%; margin: auto auto 3cqw; background: linear-gradient(180deg, var(--cobre) 0 62%, var(--arena) 62% 100%); }
.pl-marca__story .pl-marca__btn { background: var(--cobre); font-size: 1.3cqw; text-align: center; padding: .9cqw 1cqw; }

/* Pedido por chat */
.pl-chat__body { display: grid; gap: 12px; padding: 20px; align-content: start; background: var(--ds-gray-25); }
.pl-msg { max-width: 82%; padding: 10px 12px; border-radius: 14px; background: var(--ds-card); border: 1px solid var(--ds-border); }
.pl-msg--yo { justify-self: end; background: var(--ds-navy-900); color: var(--ds-gray-0); border-color: var(--ds-navy-900); display: flex; align-items: center; gap: 10px; border-bottom-right-radius: 4px; }
.pl-msg--yo small { color: var(--ds-navy-100); font-size: 12px; }
.pl-msg--asis, .pl-msg--eq { justify-self: start; border-bottom-left-radius: 4px; }
.pl-msg__quien { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-orange-700); margin-bottom: 3px; }
.pl-audio { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.pl-audio i { width: 3px; border-radius: 2px; background: currentColor; opacity: .85; height: 40%; }
.pl-audio i:nth-child(2n) { height: 90%; } .pl-audio i:nth-child(3n) { height: 65%; } .pl-audio i:nth-child(5n) { height: 30%; }
.pl-listo { display: flex; align-items: center; gap: 10px; justify-self: center; margin-top: 6px; padding: 10px 14px; border-radius: var(--ds-radius-md); background: var(--ds-card); border: 1px solid var(--ds-ok-border); box-shadow: var(--ds-shadow-2); }
.pl-listo i { width: 10px; height: 10px; border-radius: 50%; }
.pl-listo b { display: block; color: var(--ds-heading); font-size: 13px; }
.pl-listo small { color: var(--ds-ok-text); font-size: 12px; font-weight: 700; }

/* Revisión con punto sobre la pieza */
.pl-rev__body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; padding: 16px; background: var(--ds-gray-25); }
@media (max-width: 520px) { .pl-rev__body { grid-template-columns: 1fr; } }
.pl-rev__pieza { position: relative; aspect-ratio: 1; border-radius: 10px; background: var(--arena); padding: 8%; container-type: inline-size; overflow: visible; }
.pl-rev__pieza p { font-size: 14cqw; margin: 0; }
.pl-rev__pieza .pl-marca__mueble { width: 52%; right: 10%; bottom: 14%; }
.pl-pin { position: absolute; left: 62%; top: 12%; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ds-orange-500); color: var(--ds-navy-900); font-weight: 800; font-size: 13px; box-shadow: 0 0 0 4px rgba(232,119,34,.25); }
.pl-pin__nota { position: absolute; left: 34%; top: 30%; background: var(--ds-card); color: var(--ds-heading); font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px; box-shadow: var(--ds-shadow-2); white-space: nowrap; }
.pl-rev__lado { display: grid; gap: 10px; align-content: start; }
.pl-rev__lado .pl-msg { max-width: 100%; }
.pl-boton { justify-self: start; background: var(--ds-orange-500); color: var(--ds-navy-900); font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: var(--ds-radius-sm); }

/* Equipo */
.pl-equipo__body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; background: var(--ds-gray-25); }
@media (max-width: 520px) { .pl-equipo__body { grid-template-columns: 1fr; } }
.pl-equipo__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.pl-equipo__lista li { display: flex; align-items: center; gap: 10px; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: 8px 10px; }
.pl-equipo__lista b { display: block; color: var(--ds-heading); font-size: 13px; }
.pl-equipo__lista small { color: var(--ds-muted); font-size: 12px; }
.pl-equipo__lista em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: var(--ds-ok-text); background: var(--ds-ok-bg); padding: 3px 8px; border-radius: 99px; }
.pl-av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; font-size: 11px; font-weight: 800; }
.pl-equipo__pedidos { display: grid; gap: 8px; align-content: start; }

/* ---- "Cómo es trabajar": lista numerada + escena que cambia (patrón CustomerUp) ---- */
.pl-tabs { display: grid; gap: var(--ds-space-7); align-items: start; }
@media (min-width: 900px) { .pl-tabs { grid-template-columns: 0.85fr 1.15fr; gap: var(--ds-space-8); } }
.pl-tabs__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); }
.pl-tabs__item { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); transition: box-shadow var(--ds-base), border-color var(--ds-base); }
.pl-tabs__item.is-on { border-color: var(--ds-orange-200); box-shadow: var(--ds-shadow-2); }
.pl-tabs__btn { display: flex; gap: var(--ds-space-4); align-items: center; width: 100%; padding: var(--ds-space-4) var(--ds-space-5); background: none; border: 0; text-align: left; font: inherit; cursor: pointer; }
.pl-tabs__n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ds-gray-50); color: var(--ds-heading); font-weight: 800; font-size: var(--ds-step--1); transition: background var(--ds-base), color var(--ds-base); }
.is-on .pl-tabs__n { background: var(--ds-orange-500); color: var(--ds-navy-900); }
.pl-tabs__tit { font-weight: 700; color: var(--ds-heading); font-size: var(--ds-step-1); line-height: 1.3; }
.pl-tabs__txt { padding: 0 var(--ds-space-5) var(--ds-space-5) calc(var(--ds-space-5) + 32px + var(--ds-space-4)); }
.js .pl-tabs__item:not(.is-on) .pl-tabs__txt { display: none; }
.pl-tabs__esc-m { margin-top: var(--ds-space-5); }
.pl-tabs__panel { display: none; position: relative; }
@media (min-width: 900px) {
  .pl-tabs__esc-m { display: none; }
  .pl-tabs__panel { display: grid; position: sticky; top: 110px; }
  .pl-tabs__esc { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--ds-base), transform var(--ds-base), visibility var(--ds-base); }
  .pl-tabs__esc.is-on { opacity: 1; visibility: visible; transform: none; }
}
@media (max-width: 899px) { .pl-tabs__txt { padding-left: var(--ds-space-5); } }

/* Escena: lista de pedidos */
.pl-fila__body { display: grid; gap: 8px; padding: 18px; background: var(--ds-gray-25); }
.pl-fila__item { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: 10px 12px; }
.pl-fila__item b { color: var(--ds-heading); font-size: 13px; }
.pl-fila__item span { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-muted); font-size: 12px; white-space: nowrap; }
.pl-fila__item i { width: 8px; height: 8px; border-radius: 50%; }
.pl-fila .pl-boton { justify-self: start; margin-top: 4px; }

/* Escena: reunión de planificación */
.pl-coord__body { display: grid; gap: 10px; padding: 18px; background: var(--ds-gray-25); }
.pl-coord__bloque { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: 12px 14px; }
.pl-coord__bloque b { display: block; color: var(--ds-heading); font-size: 13px; margin-bottom: 4px; }
.pl-coord__bloque p, .pl-coord__bloque li { font-size: 13px; color: var(--ds-text); }
.pl-coord__bloque ul { margin: 0; padding-left: 18px; }
.pl-coord .pl-listo { justify-self: start; }

/* ---- "Qué podés pedir": tarjetas de color suave (patrón CustomerUp) ---- */
.pl-pedir { display: grid; gap: var(--ds-space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: var(--ds-space-8); }
.pl-pedir__card { border-radius: var(--ds-radius-lg); padding: var(--ds-space-5); min-height: 190px; display: flex; flex-direction: column; }
.pl-pedir__card--0 { background: var(--ds-orange-50); }
.pl-pedir__card--1 { background: var(--ds-navy-50); }
.pl-pedir__card--2 { background: var(--ds-gray-50); }
.pl-pedir__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ds-card); color: var(--ds-orange-700); box-shadow: var(--ds-shadow-1); margin-bottom: auto; }
.pl-pedir__ic svg { width: 22px; height: 22px; }
.pl-pedir__card h3 { margin-top: var(--ds-space-5); }
.pl-pedir__card p { margin-top: var(--ds-space-2); font-size: var(--ds-step--1); color: var(--ds-text); }

/* ---- Cierre: condiciones en pastilla + tarjeta de precio (CustomerUp + Sastrue) ---- */
.pl-cierre { text-align: left; }
.pl-cierre__grid { display: grid; gap: var(--ds-space-7); align-items: center; }
@media (min-width: 900px) { .pl-cierre__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--ds-space-8); } }
.pl-cierre__copy > * + * { margin-top: var(--ds-space-5); }
.pl-cierre__copy h2 { max-width: 16ch; }
.pl-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.pl-chips li { border: 1px solid rgba(255,255,255,.25); color: var(--ds-gray-0); border-radius: var(--ds-radius-pill); padding: 8px 16px; font-weight: 700; font-size: var(--ds-step--1); }
.pl-cierre__asis { max-width: 46ch; margin-left: 0 !important; }
.pl-precio-card { background: var(--ds-card); color: var(--ds-text); border-radius: var(--ds-radius-lg); padding: var(--ds-space-6); box-shadow: var(--ds-shadow-3); }
.pl-precio-card > * + * { margin-top: var(--ds-space-4); }
.pl-precio-card__n { font-size: var(--ds-step-5); font-weight: 800; color: var(--ds-heading); letter-spacing: -0.02em; line-height: 1; }
.pl-precio-card__n small { font-size: var(--ds-step-0); font-weight: 600; color: var(--ds-muted); margin-left: 4px; }
.pl-precio-card .pl-cierre__ajuste { color: var(--ds-muted); }
.pl-incluye { list-style: none; margin: var(--ds-space-5) 0 0; padding: var(--ds-space-5) 0 0; border-top: 1px solid var(--ds-border); display: grid; gap: var(--ds-space-3); }
.pl-incluye li { position: relative; padding-left: 30px; font-size: var(--ds-step--1); color: var(--ds-text); }
.pl-incluye li::before { content: ""; position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 50%; background: var(--ds-orange-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2540' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/12px no-repeat; }
/* Piezas a la vista dentro de cada tarjeta de "Qué podés pedir" */
.pl-pedir { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pl-pedir__card { min-height: 0; }
.pl-pedir__card h3 { margin-top: var(--ds-space-4); }
.pl-pedir__piezas { list-style: none; margin: var(--ds-space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pl-pedir__piezas li { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-pill); padding: 5px 12px; font-size: var(--ds-step--1); color: var(--ds-heading); font-weight: 600; }
.pl-pedir__ic { margin-bottom: 0; }
@media (min-width: 900px) { .pl-pedir { grid-template-columns: repeat(3, 1fr); } }

/* Para quién es, con foto de personas (Flor, 5/11/2026: "falta humanidad") */
.pl-quien { align-items: center; }
.pl-paraquien--lado { text-align: left; margin: 0; font-size: var(--ds-step-1); }

/* Nombre del plan resaltado en títulos (Flor, 5/11/2026) */
.pl-acento { color: var(--ds-orange-700); }

/* Escenas de WhatsApp (Estratégico, Escala, Equipo) */
.pl-wa__bar { background: #E7F6EC; }
.pl-wa__bar .pl-mono { width: 22px; height: 22px; font-size: 11px; }
.pl-wa .pl-chat__body { background: #F3F7F2; }
.pl-wa .pl-msg--yo { background: #D9F5D3; color: var(--ds-heading); border-color: #C3EBBB; }
.pl-wa .pl-msg--yo small { color: var(--ds-muted); }
.pl-wa__prev { display: flex; align-items: flex-end; justify-content: space-between; height: 84px; margin: 4px 0 8px; padding: 10px; border-radius: 10px; background: #EFE4D6; position: relative; overflow: hidden; }
.pl-wa__prev em { font-family: Fraunces, serif; font-size: 15px; color: #3B2A1E; }
.pl-fila__marca { display: block; font-weight: 500; color: var(--ds-muted); font-size: 11px; }
/* Categoría que se suma en un plan */
.pl-pedir__suma { align-self: flex-start; display: inline-block; margin-top: var(--ds-space-2); padding: 2px 10px; border-radius: 999px; background: var(--ds-navy-900); color: var(--ds-gray-0); font-size: 12px; font-weight: 700; }
.pl-pedir__nota, .pl-cierre__nota { font-size: var(--ds-step--1); color: var(--ds-muted); text-align: center; margin-top: var(--ds-space-4); }
.pl-cierre__charla { font-size: var(--ds-step--1); text-align: center; }
.pl-cierre__charla a { color: inherit; text-decoration: underline; }

/* Escalera de categorías en la tarjeta del cierre (Flor, 6/11/2026) */
.pl-escalera { border-top: 1px solid var(--ds-border); padding-top: var(--ds-space-4); }
.pl-escalera__tit { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); margin-bottom: var(--ds-space-2); }
.pl-escalera ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pl-escalera li { font-size: 12px; padding: 3px 10px; border-radius: 999px; line-height: 1.4; }
.pl-escalera .is-si { background: var(--ds-orange-50); color: var(--ds-orange-700); font-weight: 700; }
.pl-escalera .is-no { display: inline-flex; align-items: center; gap: 4px; background: var(--ds-gray-50); color: var(--ds-gray-400, #9AA3AF); }
.pl-escalera .is-no svg { width: 11px; height: 11px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tooltip del candado: "Se desbloquea en el plan X" (Flor, 6/11/2026) */
.pl-escalera .is-no { position: relative; cursor: help; }
.pl-escalera .is-no::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--ds-navy-900); color: var(--ds-gray-0); font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 6px; box-shadow: var(--ds-shadow-2); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 5; }
.pl-escalera .is-no:hover::after, .pl-escalera .is-no:focus::after { opacity: 1; }
.pl-escalera .is-no:focus { outline: 2px solid var(--ds-orange-500); outline-offset: 2px; }

/* Fila propia para lo que se suma en el plan (Flor, 6/11/2026) */
.pl-pedir__mas { text-align: center; font-weight: 700; color: var(--ds-heading); font-size: var(--ds-step-1); margin: var(--ds-space-6) 0 var(--ds-space-4); }
.pl-pedir--mas { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pl-pedir--mas .pl-pedir__card { background: var(--ds-navy-50); border: 1px solid var(--ds-navy-100); }

/* ─── /precios/ ─── */
.pr-hero h1 { max-width: 24ch; }
.pr-hero .ds-wrap > * + * { margin-top: var(--ds-space-5); }
.pr-cards { display: grid; gap: var(--ds-space-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: start; }
.pr-card { position: relative; display: flex; flex-direction: column; gap: var(--ds-space-3); background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: var(--ds-space-5); box-shadow: var(--ds-shadow-1); }
.pr-card--dest { border: 2px solid var(--ds-orange-500); box-shadow: var(--ds-shadow-3); }
.pr-card__badge { align-self: flex-start; background: var(--ds-orange-500); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.pr-card h3 { font-size: var(--ds-step-2); }
.pr-card__res { color: var(--ds-text); font-size: var(--ds-step--1); min-height: 3.6em; }
.pr-card__precio { font-size: var(--ds-step-2); font-weight: 800; color: var(--ds-heading); letter-spacing: -.01em; }
.pr-card__precio small { font-size: var(--ds-step--1); font-weight: 600; color: var(--ds-muted); }
.pr-card .pl-incluye { font-size: var(--ds-step--1); }
.pr-card__ver { text-align: center; font-size: var(--ds-step--1); color: var(--ds-heading); text-decoration: underline; }
.pr-nota { text-align: center; color: var(--ds-muted); font-size: var(--ds-step--1); margin-top: var(--ds-space-5); }
.pr-nota a { color: inherit; text-decoration: underline; }
.pr-tabla-wrap { overflow-x: auto; border-radius: var(--ds-radius-lg); background: var(--ds-card); box-shadow: var(--ds-shadow-1); }
.pr-tabla { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--ds-step--1); }
.pr-tabla th, .pr-tabla td { padding: 12px 14px; border-bottom: 1px solid var(--ds-border); text-align: center; }
.pr-tabla th[scope=row] { text-align: left; font-weight: 600; color: var(--ds-heading); position: sticky; left: 0; background: var(--ds-card); }
.pr-tabla thead th { font-size: var(--ds-step-0); color: var(--ds-heading); vertical-align: bottom; }
.pr-tabla thead th small { display: block; font-size: 12px; font-weight: 600; color: var(--ds-muted); margin-top: 2px; }
.pr-tabla thead th small small { display: inline; }
.pr-tabla .is-dest { color: var(--ds-orange-700); }
.pr-tabla__sep th { text-align: left; background: var(--ds-gray-25); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); }
.pr-si, .pr-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.pr-si { background: var(--ds-orange-50); color: var(--ds-orange-700); }
.pr-no { color: #9AA3AF; }
.pr-si svg, .pr-no svg { width: 15px; height: 15px; }
.pr-ayuda { text-align: center; }
.pr-ayuda > * + * { margin-top: var(--ds-space-4); }
.pr-ayuda .ds-lead, .pr-ayuda .ds-actions { margin-left: auto; margin-right: auto; justify-content: center; }

/* /precios/ en celular: un plan por vez, con pestañas (Flor, 6/11/2026: la tabla no se desliza) */
.pr-movil { display: none; }
@media (max-width: 760px) {
  .pr-tabla-wrap { display: none; }
  .pr-movil { display: block; }
  .pr-movil__tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: var(--ds-space-4); }
  .pr-movil__tab { flex: none; border: 1px solid var(--ds-border); background: var(--ds-card); color: var(--ds-heading); font: inherit; font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
  .pr-movil__tab.is-on { background: var(--ds-navy-900); color: #fff; border-color: var(--ds-navy-900); }
  .pr-movil__plan { background: var(--ds-card); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-1); padding: var(--ds-space-5); }
  .js .pr-movil__plan { display: none; }
  .js .pr-movil__plan.is-on { display: block; }
  .pr-movil__plan + .pr-movil__plan { margin-top: var(--ds-space-4); }
  .js .pr-movil__plan + .pr-movil__plan { margin-top: 0; }
  .pr-movil__tit { font-size: var(--ds-step-1); font-weight: 800; color: var(--ds-heading); }
  .pr-movil__tit span { display: block; font-size: var(--ds-step-0); font-weight: 700; color: var(--ds-muted); }
  .pr-movil__datos { margin: var(--ds-space-4) 0; }
  .pr-movil__datos div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ds-border); font-size: 14px; }
  .pr-movil__datos dt { color: var(--ds-text); }
  .pr-movil__datos dd { margin: 0; font-weight: 700; color: var(--ds-heading); text-align: right; }
  .pr-movil__sub { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); margin-bottom: var(--ds-space-2); }
  .pr-movil__cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .pr-movil__cats li { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; padding: 4px 10px; border-radius: 999px; }
  .pr-movil__cats svg { width: 12px; height: 12px; }
  .pr-movil__cats .is-si { background: var(--ds-orange-50); color: var(--ds-orange-700); font-weight: 700; }
  .pr-movil__cats .is-no { background: var(--ds-gray-50); color: #9AA3AF; }
}

/* "Todo lo del X, más:" en las tarjetas de /precios/ */
.pl-incluye .pr-card__mas { font-weight: 700; color: var(--ds-heading); }
.pl-incluye .pr-card__mas::before { display: none; }
.pl-incluye .pr-card__mas { padding-left: 0; }

/* Categorías activas en la portada de cada plan (Flor, 6/11/2026) */
.pl-escalera--hero { border-top: 0; padding-top: 0; }
.pl-escalera--hero .is-si { background: var(--ds-card); border: 1px solid var(--ds-orange-100, #FFD9BF); }

/* Etiqueta de la home (.folio) en planes y precios (Flor, 6/11/2026: un solo componente) */
.ds .folio { margin-bottom: 0; }
.pl-cierre .folio { background: transparent; border-color: rgba(255,255,255,.25); }
.pl-cierre .folio__label { color: var(--ds-navy-100); }

/* Globito de explicación claro (Flor, 6/11/2026: "fondo blanco, letras negras") */
.pl-term__tip { background: var(--ds-card); color: var(--ds-text); border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-3); }
.pl-term__tip a { color: var(--ds-orange-700); }
.pl-escalera .is-no::after { background: var(--ds-card); color: var(--ds-heading); border: 1px solid var(--ds-border); }
/* En compu la tabla no recorta los globitos */
@media (min-width: 761px) { .pr-tabla-wrap { overflow: visible; } .pr-tabla th[scope=row] { position: static; } }
.pr-tabla th[scope=row] .pl-term__tip { font-weight: 400; }
.pr-tabla .pl-term__tip { left: 0; transform: none; }

/* Mi negocio (la marca cargada en el Estudio) */
.pl-neg__body { display: grid; gap: 10px; padding: 16px; background: var(--ds-gray-25); }
.pl-neg__logo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--bosque); color: var(--lino); font: 500 18px/1 var(--serif); }
.pl-neg__logo em { font-style: italic; color: var(--arena); }
.pl-neg__bloque { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: 10px 12px; }
.pl-neg__tit { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-muted); margin-bottom: 6px; }
.pl-neg__paleta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pl-neg__paleta span { display: grid; gap: 4px; }
.pl-neg__paleta i { height: 28px; border-radius: 6px; border: 1px solid var(--ds-border); }
.pl-neg__paleta small { font-size: 10px; line-height: 1.3; color: var(--ds-muted); }
.pl-neg__tipo, .pl-neg__voz { font-size: 13px; color: var(--ds-heading); }
.pl-neg__tipo em { font: italic 500 15px var(--serif); }
.pl-neg__archivos { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-neg__archivos span { font-size: 12px; padding: 4px 9px; border-radius: 999px; background: var(--ds-gray-50); color: var(--ds-heading); }

/* Entregado con los archivos para bajar */
.pl-desc__ok { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; margin-right: 6px; vertical-align: 1px; }
.pl-desc__body { display: grid; gap: 10px; padding: 16px; background: var(--ds-gray-25); }
.pl-desc__res { font-size: 13px; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: 10px 12px; }
.pl-desc__res b { color: var(--ds-heading); }
.pl-desc__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pl-desc__lista li { display: flex; align-items: center; gap: 10px; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); padding: 8px 12px; }
.pl-desc__lista b { display: block; font-size: 13px; color: var(--ds-heading); }
.pl-desc__lista small { font-size: 11px; color: var(--ds-muted); }
.pl-desc__ico { flex: none; width: 22px; height: 26px; border-radius: 4px; background: var(--ds-orange-50); border: 1px solid var(--ds-orange-200); }
.pl-desc__bajar { margin-left: auto; color: var(--ds-orange-700); font-weight: 800; }
.pl-desc__mail { font-size: 12px; color: var(--ds-muted); }

/* Sección del Estudio en la home (6/11/2026) */
.estudio__sub { max-width: 62ch; margin: -40px 0 48px; font-size: 18px; color: var(--body, #4B5563); line-height: 1.6; }
.estudio__tabs.ds { background: transparent; }

/* Tarjetas de planes en la home (las mismas de /precios/, 6/11/2026) */
.planes__ds.ds { background: transparent; margin-top: 8px; }

/* Tarjetas de planes: pulido (6/11/2026). Mismo alto, botones alineados abajo,
   el sello "Recomendado" sobre el borde para que los títulos queden a la misma
   altura, y "por mes" siempre en su renglón. Vale para la home y /precios/. */
.pr-cards { align-items: stretch; }
.pr-card { padding-top: var(--ds-space-6, 28px); }
.pr-card__badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.pr-card__res { min-height: 5.4em; }
.pr-card__precio { line-height: 1.1; }
.pr-card__precio small { display: block; margin-top: 4px; }
.pr-card .pl-incluye { flex: 1; }
.pr-card .ds-btn { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
@media (max-width: 760px) { .pr-card__res { min-height: 0; } }
.pr-card__ver--vacio { display: block; height: 1.5em; }
.pr-card .pl-incluye { align-content: start; justify-content: flex-start; }
/* Cinco en fila en compu; a ancho intermedio, filas de tres (sin una tarjeta sola abajo). */
@media (min-width: 1101px) { .pr-cards { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 761px) and (max-width: 1100px) { .pr-cards { grid-template-columns: repeat(3, 1fr); } }