/* Fachada de kits (ola 5b-O1). Solo transform y opacity en lo continuo. Sin JS: se ve la tabla abierta. */
.fachada { display: grid; gap: var(--s-4) var(--canal); margin-top: var(--s-3); }
.fachada [hidden] { display: none; }
@media (min-width: 1024px) {
  .fachada { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .fachada__izq { grid-column: 1 / 6; }
  .fachada__escenario { grid-column: 6 / 13; }
}
@media (max-width: 1023px) {
  .fachada__izq { display: contents; }
  .fachada__selector { order: 1; } .modo { order: 2; } .fachada__escenario { order: 3; } .fachada__quien { order: 4; } .fachada__accion { order: 5; }
}
/* el ritmo vertical de esta sección lo marca su propio grid, no los márgenes de cada bloque */
.kits-cap .ret { row-gap: var(--s-3); }

/* selector: radiogroup de 3 tarjetas */
.fachada__selector { display: grid; gap: var(--s-3); }
.fk { position: relative; isolation: isolate; display: grid; gap: 2px; justify-items: start; text-align: left; width: 100%; min-height: 44px; padding: var(--s-4) var(--s-5); border-radius: var(--r-tarjeta); border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px var(--linea); transition: transform var(--d-1) var(--ease-out); touch-action: manipulation; }
.fk::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--dia-100); box-shadow: inset 0 0 0 2px var(--luz-tinta), var(--sombra-corta); opacity: 0; transition: opacity var(--d-2) var(--ease-out); }
.fk[aria-checked="true"]::before { opacity: 1; }
.fk:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .fk:hover:not([aria-checked="true"]) { box-shadow: inset 0 0 0 1px var(--ink-3); } }
.fk__rec { min-height: 1.25em; font-size: var(--t-label); font-weight: 600; line-height: 1.25; color: var(--acento-texto); }
.fk__nombre { font-family: var(--f-display); font-stretch: 112%; font-weight: 650; font-size: var(--t-4); letter-spacing: var(--ls-3); line-height: 1.15; }
.fk__precio { font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: .3em; white-space: nowrap; font-family: var(--f-display); font-stretch: 112%; font-weight: 650; font-size: var(--t-3); line-height: 1.1; letter-spacing: var(--ls-2); }
.fk__precio .desde { font-size: var(--t-6); }
.fk__promesa { font-size: var(--t-6); color: var(--ink-2); line-height: 1.35; margin-top: 2px; }

/* escenario y edificio */
.fachada__escenario { perspective: 1200px; }
.fachada__edificio { display: flex; flex-direction: column; padding: var(--s-2) var(--s-5); border-radius: var(--r-escena); background: var(--dia-100); box-shadow: var(--borde-luz), var(--sombra-larga); }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .fachada__edificio { transform: rotateY(calc(-12deg + var(--ix, 0deg))) rotateX(var(--iy, 0deg)); transition: transform 300ms var(--ease-out); }
}
/* un bloque por servicio: título con frase, contador "N de M incluidas" y sus ventanas (en escritorio, texto a la izquierda y ventanas a la derecha) */
.planta { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1) var(--s-4); padding-block: var(--s-2); }
.planta + .planta { border-top: 1px solid var(--linea); }
.planta__tit { font-family: var(--f-text); font-stretch: 100%; font-size: var(--t-6); font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--ink-2); text-wrap: balance; }
.planta__nom { white-space: nowrap; }
.planta__nombre, .planta__enlace { font-weight: 650; color: var(--ink); }
.planta__enlace { display: inline-block; padding: 11px 8px; margin: -11px -8px; color: var(--acento-texto); text-decoration: underline; text-underline-offset: 3px; touch-action: manipulation; }
.planta__enlace:focus-visible { outline: 3px solid var(--foco, var(--luz-tinta)); outline-offset: 0; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .planta__enlace:hover { text-decoration-thickness: 2px; } }
.planta__cuenta { font-size: var(--t-label); font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.planta__vent { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 var(--s-1); margin-top: var(--s-1); }
@media (min-width: 768px) {
  .planta { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; align-items: start; }
  .planta__tit, .planta__cuenta { grid-column: 1; }
  .planta__vent { grid-column: 2; grid-row: 1 / span 2; column-gap: var(--s-3); margin-top: 0; }
}

/* ventana: dos capas (apagada, encendida), el estado solo cambia su opacidad */
.vent-w { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; align-content: start; gap: var(--s-2); padding: 4px 2px; border-radius: var(--r-control); }
.vent-w::before { content: ""; position: absolute; left: 50%; margin-left: -48px; top: -18px; width: 96px; height: 96px; z-index: -1; background: var(--luz-halo); opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease-out) var(--retardo, 0ms); }
.vent-w[data-e="d"]::before { opacity: .85; }
.vent { width: 34px; height: auto; display: block; overflow: visible; }
.vent g { opacity: 0; transition: opacity 240ms var(--ease-out) var(--retardo, 0ms); }
.vent path { fill: none; }
.vent .vent__off { opacity: 1; }
.vent__off rect { fill: #E6E9EF; stroke: var(--linea); stroke-width: 1.5; }
.vent__off path { stroke: var(--linea); stroke-width: 1.5; }
.vent__on rect { fill: var(--luz-ambar); stroke: var(--luz-tinta); stroke-opacity: .55; stroke-width: 2; }
.vent__on path { stroke: var(--luz-tinta); stroke-opacity: .45; stroke-width: 2; }
.vent-w[data-e="d"] .vent__on { opacity: 1; }
.vent-w__etq { min-width: 0; font-size: var(--t-label); line-height: 1.25; font-weight: 500; color: var(--ink); }
@media (min-width: 768px) { .vent { width: 46px; } .vent-w { padding: 6px 4px; } .planta { padding-block: var(--s-3); } }
@media (prefers-reduced-motion: reduce) { .vent g, .vent-w::before, .fk::before, .fk, .modo__op, .modo__op::before { transition: none; } }

.fachada__quien { min-height: 2.9em; margin-top: var(--s-3); font-size: var(--t-6); color: var(--ink-2); max-width: 52ch; }
.fachada__accion { margin-top: var(--s-4); }
.fachada__accion .boton { white-space: normal; }
@media (max-width: 1023px) { .fachada__accion { margin-top: 0; } }
@media (max-width: 767px) { .fachada__accion .boton { width: 100%; } .fachada__quien { min-height: 4.3em; } }

/* selector en móvil: 3 pestañas */
@media (max-width: 1023px) { .fachada__selector { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); } }
@media (max-width: 767px) {
  .fk { padding: var(--s-3) var(--s-2); }
  .fk__promesa { display: none; }
  .fk__nombre { font-size: var(--t-6); }
  .fk__precio { font-size: var(--t-4); }
  .fk__precio .desde { display: none; }
}

/* tabla completa: contenido sin JavaScript */
.kits-tabla { border-top: 1px solid var(--linea); }
.kits-tabla summary { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding-block: var(--s-2); cursor: pointer; list-style: none; color: var(--acento-texto); font-weight: 600; text-decoration: underline; }
.kits-tabla summary::-webkit-details-marker { display: none; }
.kits-tabla summary::after { content: "+"; text-decoration: none; }
.kits-tabla[open] summary::after { content: "\2212"; }
.tkc { width: 100%; border-collapse: collapse; font-size: var(--t-6); }
.tkc thead th { padding: var(--s-3); font-weight: 600; text-align: center; border-bottom: 1px solid var(--ink-3); }
.tkc th[scope="row"] { padding: var(--s-3); text-align: left; font-weight: 500; border-top: 1px solid var(--linea); }
.tkc td { padding: var(--s-3); text-align: center; vertical-align: middle; border-top: 1px solid var(--linea); min-width: 0; }
.tkc tbody + tbody tr:first-child > * { border-top-color: var(--ink-3); }
.tkc tfoot th[scope="row"], .tkc tfoot td { border-top: 1px solid var(--ink-3); font-weight: 650; }
.tkc__precio { display: block; font-family: var(--f-display); font-stretch: 112%; font-size: var(--t-4); letter-spacing: var(--ls-3); font-variant-numeric: tabular-nums; }
.tkc__nota { display: block; margin-top: 2px; font-size: var(--t-label); font-weight: 600; line-height: 1.25; color: var(--acento-texto); }
.tkc td .ico--ventana { width: 24px; height: 24px; vertical-align: middle; }
.tkc__e { margin-left: var(--s-2); vertical-align: middle; font-size: var(--t-label); line-height: 1.25; color: var(--ink-2); }
.tkc td[data-e="d"] .tkc__e { color: var(--ink); font-weight: 600; }
@media (max-width: 767px) {
  .tkc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .tkc, .tkc tbody, .tkc tfoot { display: block; }
  .tkc tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); padding-block: var(--s-3); border-top: 1px solid var(--linea); }
  .tkc th[scope="row"], .tkc td, .tkc tfoot th[scope="row"], .tkc tfoot td { border-top: 0; padding: 0; }
  .tkc th[scope="row"] { grid-column: 1 / -1; }
  .tkc td { text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .tkc td::before { content: attr(data-etq); font-size: 13px; font-weight: 600; color: var(--ink-3); }
  .tkc__e { margin-left: 0; }
}

/* grupo de servicio dentro de la tabla */
.tkc th[scope="rowgroup"] { padding: var(--s-4) var(--s-3) var(--s-2); text-align: left; font-size: var(--t-6); font-weight: 650; color: var(--ink); }
@media (max-width: 767px) {
  .tkc tr.tkc__grupo { padding-block: var(--s-3) 0; border-top: 1px solid var(--ink-3); }
  .tkc tr.tkc__grupo + tr { border-top: 0; }
  .tkc th[scope="rowgroup"] { grid-column: 1 / -1; padding: 0; }
}

/* más opciones y garantías */
.kits-mas { display: grid; gap: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--linea); }
@media (min-width: 768px) { .kits-mas { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--canal); } }
.kits-mas h3 { font-family: var(--f-text); font-stretch: 100%; font-size: var(--t-5); font-weight: 600; letter-spacing: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.kits-mas__precio { margin-top: var(--s-1); font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: var(--t-6); }
.kits-mas__precio .num { font-weight: 650; color: var(--ink); }
.kits-mas .enlace { padding-block: 8px; min-height: 44px; font-size: var(--t-6); }
.kits-gar { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .kits-gar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--canal); } }
.kits-gar li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-6); font-weight: 500; line-height: 1.4; }
.kits-gar .ico { flex: none; width: 24px; height: 24px; color: var(--luz-tinta); }


/* divulgación única: una línea bajo la fachada */




/* modalidad de pago: transiciones de opacity y transform */
.fachada { --ww-bg: color-mix(in oklab, var(--luz-ambar) 14%, var(--dia-100)); }
.modo { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.modo__grupo { display: inline-grid; grid-auto-flow: column; gap: 2px; justify-self: start; padding: 3px; border-radius: 13px; background: var(--dia-200); }
.modo__op { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-control); background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-6); font-weight: 600; cursor: pointer; touch-action: manipulation; transition: transform var(--d-1) var(--ease-out); }
.modo__op::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--dia-100); box-shadow: inset 0 0 0 2px var(--luz-tinta), var(--sombra-corta); opacity: 0; transition: opacity var(--d-2) var(--ease-out); }
.modo__op[aria-checked="true"] { color: var(--ink); }
.modo__op[aria-checked="true"]::before { opacity: 1; }
.modo__op[data-modo="winwin"][aria-checked="true"]::before { background: var(--ww-bg); box-shadow: inset 0 0 0 2px var(--luz-tinta), 0 0 0 3px rgba(244, 183, 64, .3); }
.modo__op:active:not([aria-disabled="true"]) { transform: scale(.97); }
.modo__op[aria-disabled="true"], .modo__op[aria-disabled="true"] .ico { color: var(--ink-3); cursor: not-allowed; }
.modo__op .ico { width: 20px; height: 20px; color: var(--luz-tinta); }

.modo__fija { font-size: var(--t-6); color: var(--ink-2); }
.modo__ww { display: none; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-4); border-radius: var(--r-tarjeta); background: var(--ww-bg); box-shadow: inset 0 0 0 1.5px var(--luz-tinta), 0 0 0 4px rgba(244, 183, 64, .22); }
.modo__ww .ico { width: 28px; height: 28px; color: var(--luz-tinta); }
.modo__ww p { font-size: var(--t-6); line-height: var(--lh-4); }
.modo__lema { margin-top: var(--s-1); font-weight: 650; color: var(--acento-texto); }
.modo__precio[data-modo="winwin"] .modo__fija { display: none; }
.modo__precio[data-modo="winwin"] .modo__ww { display: grid; }
.modo__precio > * { transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out); }
@starting-style { .modo__precio > * { opacity: 0; transform: translateY(4px); } }

.fk[data-mod="winwin"]::before { background: var(--ww-bg); box-shadow: inset 0 0 0 2px var(--luz-tinta), 0 0 0 4px rgba(244, 183, 64, .3); }
.fk__ww { display: none; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--f-display); font-stretch: 112%; font-weight: 650; font-size: var(--t-3); line-height: 1.1; letter-spacing: var(--ls-2); color: var(--acento-texto); }
.fk__ww .ico { width: 22px; height: 22px; }
.fk[data-mod="winwin"] .fk__precio { display: none; }
.fk[data-mod="winwin"] .fk__ww { display: inline-flex; }

.kits-ww { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--linea); }
.kits-ww h3 { font-family: var(--f-text); font-stretch: 100%; font-size: var(--t-5); letter-spacing: 0; }
.kits-ww p { margin-top: var(--s-1); font-size: var(--t-6); }
.kits-ww__lema { font-weight: 650; color: var(--acento-texto); }
.kits-ww .peq { color: var(--ink-2); }
@media (max-width: 1023px) { .modo { margin-top: 0; } }
@media (max-width: 767px) { .fk__ww { font-size: var(--t-label); } .fk__ww .ico { display: none; } }
@media (prefers-reduced-motion: reduce) { .modo__precio > * { transition: none; } }

/* 9b: "Otras formas de empezar" plegado (modulo suelto, servicios sueltos, a medida) */
.kits-otras { border-top: 1px solid var(--linea); }
.kits-otras > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding-block: var(--s-2); cursor: pointer; list-style: none; color: var(--acento-texto); font-weight: 600; text-decoration: underline; }
.kits-otras > summary::-webkit-details-marker { display: none; }
.kits-otras > summary .ico { display: none; }
.kits-otras > summary::after { content: "+"; text-decoration: none; }
.kits-otras[open] > summary::after { content: "\2212"; }
.kits-otras .kits-mas { border-top: 0; }
.fachada__accion .kits-cap__plazos { margin-top: var(--s-3); font-size: var(--t-label); font-weight: 400; color: var(--ink-2); }   /* 9b: nota secundaria bajo el boton */