/* Rutagest · comercial.css · planes y precios, configurador de plan, pop-up de captación y
   la sección de software a medida. Se carga después de sistema.css y mejoras.css y usa sus tokens. */

:root {
  --pv-radio: 8px;
  --pv-sombra: 0 1px 2px rgb(16 26 31 / .06), 0 18px 40px -18px rgb(0 63 77 / .35);
  --pv-noche: #06272F;
}

.envoltura-ancha { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--margen); }

/* ============================================================== Planes */
.pv { container-type: inline-size; }

.pv-selector-caja { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 40px; text-align: center; }
.pv-selector { position: relative; display: inline-flex; padding: 5px; border: 1px solid var(--ceniza); border-radius: 999px; background: var(--blanco); box-shadow: 0 1px 2px rgb(16 26 31 / .06); }
.pv-selector-fondo { display: none; }
.pv-selector button { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: none; color: var(--grafito); font: 600 16px/1.2 var(--texto); cursor: pointer; transition: background-color var(--dur-2) var(--llegada), color var(--dur-2) var(--llegada); }
.pv-selector button:hover { color: var(--asfalto); }
.pv-selector button[aria-pressed="true"] { background: var(--petroleo); color: var(--blanco); }
.pv-regalo { padding: 3px 10px; border-radius: 999px; background: var(--senal); color: var(--asfalto); font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.pv-selector button[aria-pressed="false"] .pv-regalo { animation: pv-late 2.6s var(--llegada) infinite; }
.pv-selector-nota { font-size: var(--t-small); color: var(--grafito); min-height: 1.5em; }
.pv-selector-nota b { color: var(--petroleo); }
@keyframes pv-late { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgb(255 184 28 / .55); } 85% { box-shadow: 0 0 0 7px rgb(255 184 28 / 0); } }

.pv-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch; }

.pv-plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border: 1px solid var(--ceniza); border-radius: var(--pv-radio); background: var(--blanco); color: var(--asfalto); transition: border-color var(--dur-2) var(--llegada), box-shadow var(--dur-2) var(--llegada), translate var(--dur-2) var(--llegada); }
.pv-plan:hover { border-color: var(--petroleo); }
.pv-cabeza h3 { font-size: 30px; line-height: 1.05; }
.pv-para { margin-top: 4px; font-size: var(--t-small); color: var(--grafito); min-height: 2.9em; }
.pv-precio { margin-top: 16px; }
.pv-cifra { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pv-cifra strong { font-family: var(--display); font-weight: 700; font-size: 50px; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.pv-cifra span { font-size: 17px; font-weight: 600; color: var(--grafito); }
.pv-detalle { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--grafito); min-height: 4.35em; }
.pv-detalle b { color: var(--asfalto); }
.pv-ahorro { align-self: flex-start; display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: var(--petroleo-tinte); color: var(--petroleo); font-size: 13px; font-weight: 700; line-height: 1.3; }
.pv-ahorro[hidden] { display: none; }
.pv-boton { margin-top: 18px; width: 100%; white-space: normal; text-align: center; }
.pv-lema { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--humo); font-size: var(--t-small); font-weight: 600; line-height: 1.4; }
.pv-lista { margin-top: 12px; font-size: var(--t-small); flex: 1; }
.pv-lista li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; line-height: 1.4; }
.pv-lista li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--petroleo-tinte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003F4D' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.pv-clave { font-weight: 700; }
.pv-salto { margin-top: 14px; padding: 10px 12px; border-radius: 6px; background: var(--petroleo-tinte); color: var(--petroleo); font-size: 14px; font-weight: 600; line-height: 1.4; }
.pv-sello { position: absolute; top: 0; left: 24px; translate: 0 -50%; padding: 5px 12px; border-radius: 999px; background: var(--petroleo); color: var(--blanco); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; white-space: nowrap; }

.pv-cambia .pv-cifra, .pv-cambia .pv-detalle { animation: pv-sube var(--dur-3) var(--llegada); }
@keyframes pv-sube { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* Gratis: la puerta de entrada, sin competir con los de pago. */
.pv-gratis { background: transparent; border-style: dashed; }
.pv-gratis .pv-lista li::before { background-color: var(--humo); }

/* Flota: el que elige casi todo el mundo. */
.pv-popular { border: 2px solid var(--petroleo); padding: 27px 23px 23px; box-shadow: var(--pv-sombra); }
.pv-popular .pv-boton { min-height: 52px; font-size: 17px; }

/* Élite: oscuro, con el amarillo de la casa solo donde se pulsa. */
.pv-premium { border-color: var(--pv-noche); background: radial-gradient(120% 80% at 100% 0%, #0b5566 0%, transparent 60%), linear-gradient(160deg, var(--petroleo) 0%, var(--pv-noche) 70%); color: var(--cal); box-shadow: var(--pv-sombra); }
.pv-premium:hover { border-color: var(--senal); }
.pv-premium .pv-para, .pv-premium .pv-cifra span, .pv-premium .pv-detalle { color: var(--sobre-oscuro); }
.pv-premium .pv-detalle b { color: var(--blanco); }
.pv-premium .pv-lema { border-top-color: rgb(255 255 255 / .16); }
.pv-premium .pv-lista li::before { background-color: rgb(255 255 255 / .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB81C' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E"); }
.pv-premium .pv-sello { background: var(--senal); color: var(--asfalto); }
.pv-premium .pv-ahorro { background: rgb(255 184 28 / .16); color: var(--senal); }
.pv-premium .pv-salto { background: rgb(255 255 255 / .09); color: var(--cal); }
.pv-premium .pv-boton { min-height: 52px; font-size: 17px; }
.pv-premium a:focus-visible, .pv-premium .btn-primario:focus-visible { outline-color: var(--senal); }

/* A medida: se habla. */
.pv-medida { background: var(--petroleo-tinte); border-color: var(--petroleo-linea); }
.pv-medida .pv-cifra strong { font-size: 38px; white-space: normal; }
.pv-medida .pv-lista li::before { background-color: var(--blanco); }

/* De tres en fila: los tres planes arriba; gratis y a medida, abajo y tumbados. */
@container (min-width: 760px) {
  .pv-rejilla { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .pv-autonomo, .pv-flota, .pv-elite { grid-column: span 2; }
  .pv-gratis, .pv-medida { grid-column: span 3; order: 2; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 28px; align-content: start; }
  .pv-gratis > *, .pv-medida > * { grid-column: 1; }
  .pv-gratis .pv-lista, .pv-medida .pv-lista { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; align-self: center; }
  .pv-gratis .pv-lema, .pv-medida .pv-lema { border-top: 0; padding-top: 0; }
  .pv-gratis .pv-para, .pv-medida .pv-para, .pv-gratis .pv-detalle, .pv-medida .pv-detalle { min-height: 0; }
  .pv-popular, .pv-premium { translate: 0 -10px; }
  .pv-popular:hover, .pv-premium:hover { translate: 0 -14px; }
}

/* Con sitio de sobra: los cinco en una fila, de menos a más. */
@container (min-width: 1240px) {
  .pv-rejilla { grid-template-columns: minmax(0, .86fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .94fr); gap: 18px; }
  .pv-rejilla > .pv-plan { grid-column: auto; order: 0; display: flex; padding-inline: 20px; }
  .pv-popular { padding-inline: 19px; }
  .pv-gratis .pv-lista, .pv-medida .pv-lista { margin-top: 12px; align-self: stretch; }
  .pv-gratis .pv-lema, .pv-medida .pv-lema { border-top: 1px solid var(--humo); padding-top: 18px; }
  .pv-medida .pv-lema { border-top-color: rgb(0 63 77 / .14); }
  .pv-rejilla .pv-para { min-height: 2.9em; }
  .pv-rejilla .pv-detalle { min-height: 4.35em; }
  .pv-cifra strong { font-size: 44px; }
  .pv-medida .pv-cifra strong { font-size: 36px; }
  .pv-cabeza h3 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-regalo, .pv-cambia .pv-cifra, .pv-cambia .pv-detalle { animation: none !important; }
  .pv-popular, .pv-premium, .pv-popular:hover, .pv-premium:hover { translate: none; }
}

/* ---------------------------------------------------------------- Comparativa */
.pv-tabla { min-width: 760px; border-radius: var(--pv-radio); overflow: hidden; }
.pv-tabla thead th { position: relative; padding-top: 20px; font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--asfalto); vertical-align: bottom; }
.pv-tabla thead th.tabla-nuestra { color: var(--petroleo); box-shadow: inset 0 3px 0 var(--petroleo); }
.pv-tabla-sello { display: block; margin-top: 4px; font: 700 11px/1.3 var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--petroleo); }
.pv-tabla td.tabla-nuestra { background: rgb(221 239 236 / .45); }
.pv-tabla tbody th { width: 28%; }
.pv-tabla .pv-grupo th { padding: 22px 18px 8px; border-bottom: 1px solid var(--ceniza); background: var(--cal); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grafito); }
.pv-tabla .pv-grupo:hover { background: none; }
.pv-fila-clave td { font-size: 17px; }
.pv-tabla-nota { font-size: 13px; color: var(--grafito); }
.pv-no { color: var(--grafito); }
.tabla-desliza:has(.pv-tabla) { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--pv-radio); }
@media (max-width: 860px) {
  .pv-tabla tbody th { position: sticky; left: 0; z-index: 1; background: var(--blanco); width: 150px; min-width: 150px; box-shadow: 1px 0 0 var(--humo); }
  .pv-tabla .pv-grupo th { position: sticky; left: 0; background: var(--cal); }
  .pv-tabla th, .pv-tabla td { padding: 12px 12px; }
}
.tabla-pista { display: none; margin-top: 10px; font-size: 13px; color: var(--grafito); }
@media (max-width: 860px) { .tabla-pista { display: block; } }

/* Lo que llevan todos */
.comun { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; margin-top: 8px; }
.comun li { display: flex; gap: 10px; align-items: flex-start; padding: 14px 0; border-top: 1px solid rgb(0 63 77 / .14); font-size: var(--t-small); font-weight: 500; line-height: 1.4; }
.comun .ico { flex: none; width: 14px; height: 14px; box-sizing: content-box; padding: 4px; margin-top: 1px; border-radius: 50%; background: var(--blanco); color: var(--petroleo); stroke-width: 2.5; }
@media (max-width: 1000px) { .comun { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .comun { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Los volúmenes del contacto, ahora cinco */
[data-volumenes], [data-volumenes-contacto] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) {
  [data-volumenes], [data-volumenes-contacto] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-volumenes] .opcion:last-child:nth-child(odd), [data-volumenes-contacto] .opcion:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ============================================================== Configurador */
.cfg { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0; border: 1px solid var(--ceniza); border-radius: var(--pv-radio); background: var(--blanco); box-shadow: var(--sombra-papel); overflow: hidden; }
.cfg-preguntas { padding: 32px; display: flex; flex-direction: column; gap: 28px; }
.cfg-pregunta label, .cfg-etiqueta { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 18px; line-height: 1.3; }
.cfg-num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--petroleo-tinte); color: var(--petroleo); font-size: 14px; font-weight: 700; }
.cfg-control { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding-left: 40px; }
.cfg-control output { flex: none; min-width: 7.2em; text-align: right; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; color: var(--petroleo); }
.cfg-pista { margin-top: 8px; padding-left: 40px; font-size: 14px; color: var(--grafito); }

.cfg input[type="range"] { flex: 1; min-width: 0; height: 44px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; --cfg-lleno: 10%; }
.cfg input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--petroleo) var(--cfg-lleno), var(--humo) var(--cfg-lleno)); }
.cfg input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--humo); }
.cfg input[type="range"]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--petroleo); }
.cfg input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border: 3px solid var(--blanco); border-radius: 50%; background: var(--senal); box-shadow: 0 0 0 1px var(--asfalto), 0 4px 10px rgb(16 26 31 / .25); transition: scale var(--dur-1) var(--llegada); }
.cfg input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid var(--blanco); border-radius: 50%; background: var(--senal); box-shadow: 0 0 0 1px var(--asfalto), 0 4px 10px rgb(16 26 31 / .25); }
.cfg input[type="range"]:active::-webkit-slider-thumb { scale: 1.12; }
.cfg input[type="range"]:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 4px; border-radius: 4px; }

.cfg-pasos { display: inline-flex; align-items: center; gap: 4px; margin: 14px 0 0 40px; border: 1px solid var(--ceniza); border-radius: 999px; padding: 4px; }
.cfg-paso { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--petroleo-tinte); color: var(--petroleo); font: 700 22px/1 var(--texto); cursor: pointer; transition: background-color var(--dur-1) var(--llegada), color var(--dur-1) var(--llegada); }
.cfg-paso:hover { background: var(--petroleo); color: var(--blanco); }
.cfg-personas { min-width: 7.5em; text-align: center; font-family: var(--display); font-weight: 700; font-size: 24px; line-height: 1; color: var(--petroleo); }
.cfg-pago { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0 40px; }

.cfg-resultado { display: flex; flex-direction: column; padding: 32px; background: radial-gradient(110% 70% at 100% 0%, #0b5566 0%, transparent 62%), linear-gradient(165deg, var(--petroleo) 0%, var(--pv-noche) 75%); color: var(--cal); }
.cfg-eco { font-size: var(--t-small); color: var(--sobre-oscuro); }
.cfg-eco b { color: var(--blanco); }
.cfg-sello { margin-top: 22px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--senal); }
.cfg-plan { margin-top: 2px; font-size: clamp(40px, 4vw, 56px); line-height: 1; color: var(--blanco); }
.cfg-precio { margin-top: 12px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cfg-precio strong { font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1; color: var(--blanco); }
.cfg-precio span { font-size: 15px; color: var(--sobre-oscuro); }
.cfg-ahorro { align-self: flex-start; margin-top: 10px; padding: 5px 10px; border-radius: 6px; background: rgb(255 184 28 / .16); color: var(--senal); font-size: 14px; font-weight: 600; line-height: 1.4; }
.cfg-ahorro-suave { background: rgb(255 255 255 / .08); color: var(--sobre-oscuro); font-weight: 500; }
.cfg-porque { margin-top: 16px; font-size: var(--t-small); line-height: 1.5; color: var(--cal); }
.cfg-porque b { color: var(--senal); }
.cfg-barra { margin-top: 16px; }
.cfg-barra-texto { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--sobre-oscuro); }
.cfg-barra-texto b { color: var(--blanco); font-weight: 600; }
.cfg-barra-pista { margin-top: 6px; height: 8px; border-radius: 999px; background: rgb(255 255 255 / .14); overflow: hidden; }
.cfg-barra-pista span { display: block; height: 100%; border-radius: 999px; background: var(--petroleo-linea); transition: width var(--dur-3) var(--llegada), background-color var(--dur-2) var(--llegada); }
.cfg-barra-pista .cfg-justo { background: var(--senal); }
.cfg-aviso { margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--sobre-oscuro); }
.cfg-acciones { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 6px; }
.cfg-acciones .btn { min-height: 52px; font-size: 17px; white-space: normal; text-align: center; }
.cfg-enlace { min-height: 44px; border: 0; background: none; color: var(--cal); font: 500 15px/1.3 var(--texto); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cfg-enlace:hover { color: var(--senal); }
.cfg-form { margin-top: 18px; padding: 20px; border-radius: 6px; background: var(--blanco); color: var(--asfalto); display: flex; flex-direction: column; gap: 14px; }
.cfg-form[hidden] { display: none; }
.cfg-form-titulo { font-weight: 600; font-size: 17px; line-height: 1.35; }
.cfg-form-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cfg-form .mensaje-error { margin-top: 0; }
.cfg-micro { font-size: 13px; line-height: 1.45; color: var(--grafito); }
.cfg-gracias { margin-top: 18px; padding: 16px 18px; border-radius: 6px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .2); font-size: var(--t-small); line-height: 1.5; }
.cfg-gracias b { color: var(--senal); }
.cfg-resultado a:focus-visible, .cfg-resultado button:focus-visible { outline-color: var(--senal); }

@media (max-width: 960px) {
  .cfg { grid-template-columns: minmax(0, 1fr); }
  .cfg-preguntas { padding: 24px 20px; gap: 24px; }
  .cfg-resultado { padding: 24px 20px; }
}
@media (max-width: 560px) {
  .cfg-control { padding-left: 0; flex-wrap: wrap; gap: 4px 12px; }
  .cfg-control output { order: -1; width: 100%; text-align: left; }
  .cfg-pista { padding-left: 0; }
  .cfg-pasos, .cfg-pago { margin-left: 0; }
  .cfg-pasos { display: flex; justify-content: space-between; }
  .cfg-form-dos { grid-template-columns: minmax(0, 1fr); }
  .cfg-pregunta label, .cfg-etiqueta { font-size: 17px; align-items: flex-start; }
}

/* Banda que lleva al configurador o al software a medida */
.banda-medida { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: center; padding: 28px 32px; border-radius: var(--pv-radio); background: linear-gradient(120deg, var(--asfalto) 0%, var(--pv-noche) 100%); color: var(--cal); }
.banda-medida h3 { font-size: clamp(26px, 2vw + 12px, 34px); color: var(--blanco); }
.banda-medida p { margin-top: 8px; color: var(--sobre-oscuro); max-width: 56ch; }
.banda-medida .btn-secundario { border-color: var(--cal); color: var(--cal); }
.banda-medida .btn-secundario:hover { background: var(--cal); color: var(--asfalto); }
@media (max-width: 760px) { .banda-medida { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; } .banda-medida .btn { width: 100%; } }

/* ============================================================== Pop-up */
html.con-pop { overflow: hidden; }
.pop { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 20px; }
.pop-velo { position: absolute; inset: 0; background: rgb(16 26 31 / .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: pop-velo var(--dur-2) ease-out; }
.pop-caja { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); grid-template-rows: minmax(0, 1fr); width: min(100%, 900px); max-height: min(92dvh, 680px); border-radius: 14px; background: var(--blanco); color: var(--asfalto); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .55); overflow: hidden; animation: pop-entra var(--dur-3) var(--llegada); }
.pop-sale .pop-caja { animation: pop-sale .18s ease-in forwards; }
.pop-sale .pop-velo { animation: pop-velo .18s ease-in reverse forwards; }
@keyframes pop-velo { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-entra { from { opacity: 0; translate: 0 18px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes pop-sale { to { opacity: 0; translate: 0 10px; scale: .98; } }

.pop-lado { position: relative; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 36px 30px 30px; background: radial-gradient(90% 55% at 85% 0%, #1b7d86 0%, transparent 65%), radial-gradient(60% 40% at 0% 100%, #0a5a52 0%, transparent 70%), linear-gradient(170deg, var(--petroleo) 0%, var(--pv-noche) 80%); color: var(--cal); }
.pop-sello { padding: 6px 12px; border: 1px solid rgb(255 255 255 / .35); border-radius: 999px; background: rgb(255 255 255 / .1); font-size: 13px; font-weight: 600; line-height: 1.3; }
.pop-lema { margin-top: 20px; font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1.05; color: var(--blanco); text-wrap: balance; }
.pop-sub { margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--sobre-oscuro); }
.pop-hechos { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 500; }
.pop-hechos li { display: flex; align-items: center; gap: 10px; }
.pop-hechos li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--senal); }
.pop-logo { margin-top: auto; padding-top: 28px; height: auto; width: 132px; opacity: .95; box-sizing: content-box; }

.pop-cuerpo { position: relative; padding: 36px 36px 32px; overflow-y: auto; overscroll-behavior: contain; }
.pop-cerrar { position: absolute; z-index: 2; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--cal); color: var(--asfalto); font: 400 26px/1 var(--texto); cursor: pointer; transition: background-color var(--dur-1) var(--llegada); }
.pop-cerrar:hover { background: var(--humo); }
.pop-pasos { display: flex; align-items: center; gap: 0; margin-right: 56px; }
.pop-pasos[hidden] { display: none; }
.pop-pasos li { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--humo); color: var(--grafito); font-size: 15px; font-weight: 700; transition: background-color var(--dur-2) var(--llegada), color var(--dur-2) var(--llegada); }
.pop-pasos li + li { margin-left: 44px; }
.pop-pasos li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 32px; height: 2px; margin-right: 6px; background: var(--humo); }
.pop-pasos .pop-hecho, .pop-pasos .pop-actual { background: var(--petroleo); color: var(--blanco); }
.pop-pasos .pop-hecho + li::before, .pop-pasos .pop-actual::before { background: var(--petroleo); }
.pop-atras { margin-top: 14px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--grafito); font: 600 15px/1.2 var(--texto); cursor: pointer; }
.pop-atras:hover { color: var(--petroleo); }
.pop-atras[hidden] { display: none; }
.pop-cuerpo h2 { margin-top: 18px; font-size: clamp(28px, 2vw + 14px, 36px); line-height: 1.08; text-wrap: balance; }
.pop-texto { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--grafito); }
.pop-texto b { color: var(--asfalto); }
.pop-opciones { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pop-opciones .opcion { min-height: 60px; font-size: 17px; }
.pop-opciones .opcion:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pop-form { margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.pop-form .mensaje-error { margin-top: 0; }
.pop-form .btn { align-self: flex-start; min-height: 52px; padding-inline: 26px; font-size: 17px; }
.pop-micro { font-size: 13px; line-height: 1.45; color: var(--grafito); }
.pop-gracias { padding-top: 8px; }
.pop-ok { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--petroleo-tinte); color: var(--petroleo); }
.pop-ok .ico { width: 26px; height: 26px; stroke-width: 2.5; }
.pop-finales { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.pop-plan-nombre { color: var(--petroleo); }
.pop-plan { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--petroleo-linea); border-radius: 10px; background: var(--blanco); }
.pop-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 16px; color: var(--grafito); }
.pop-precio b { font-family: var(--display); font-size: 32px; line-height: 1; color: var(--asfalto); }
.pop-precio span { font-size: 13px; }
.pop-incluye { margin-top: 10px; font-size: 15px; }
.pop-incluye li { padding: 4px 0; }
.pop-contratar { min-height: 52px; padding-inline: 26px; font-size: 17px; }
.pop-regalo { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--senal); color: var(--asfalto); font-size: 12px; font-weight: 700; white-space: nowrap; }
.pop-otros { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--grafito); }
.pop-otros a, .pop-enlace { color: var(--petroleo); font-weight: 600; }
.pop-enlace { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

@media (max-width: 760px) {
  .pop { padding: 0; place-items: end center; }
  .pop-caja { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); width: 100%; max-height: 94dvh; border-radius: 16px 16px 0 0; animation-name: pop-sube; }
  @keyframes pop-sube { from { translate: 0 100%; } to { translate: 0 0; } }
  .pop-lado { padding: 18px 64px 16px 20px; }
  .pop-lema { margin-top: 10px; font-size: 24px; }
  .pop-sub, .pop-hechos, .pop-logo { display: none; }
  .pop-sello { font-size: 12px; padding: 4px 10px; }
  .pop-cuerpo { padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
  .pop-cerrar { top: 10px; right: 10px; background: rgb(255 255 255 / .16); color: var(--blanco); }
  .pop-cerrar:hover { background: rgb(255 255 255 / .28); }
  .pop-cuerpo h2 { margin-top: 14px; }
  .pop-pasos { margin-right: 0; }
  .pop-pasos li { width: 30px; height: 30px; font-size: 14px; }
  .pop-form .btn, .pop-finales .btn { width: 100%; }
  .pop-form .campo input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .pop-caja, .pop-velo { animation: none !important; } }

/* ============================================================== Software a medida */
.sw { position: relative; padding-block: clamp(72px, 8vw, 120px); background: radial-gradient(60% 45% at 85% 8%, rgb(11 85 102 / .9) 0%, transparent 70%), radial-gradient(45% 40% at 5% 95%, rgb(0 63 77 / .8) 0%, transparent 70%), var(--asfalto); color: var(--cal); overflow: hidden; }
.sw::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .04) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 100%); -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 0%, transparent 100%); pointer-events: none; }
.sw > * { position: relative; }
.sw-cabeza { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: 48px 56px; align-items: center; }
.sw-antetitulo { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border: 1px solid rgb(255 255 255 / .22); border-radius: 999px; background: rgb(255 255 255 / .06); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--senal); }
.sw h2 { margin-top: 20px; font-size: clamp(40px, 4vw + 10px, 68px); line-height: 1; color: var(--blanco); text-wrap: balance; }
.sw h2 em { font-style: normal; color: var(--senal); }
.sw-sub { margin-top: 22px; font-size: var(--t-lead); line-height: 1.5; color: var(--sobre-oscuro); max-width: 34em; }
.sw-impacto { margin-top: 22px; padding-left: 18px; border-left: 3px solid var(--senal); font-family: var(--display); font-weight: 700; font-size: clamp(22px, 1.2vw + 14px, 30px); line-height: 1.15; color: var(--blanco); }
.sw-acciones { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.sw-acciones .btn { min-height: 54px; padding-inline: 24px; font-size: 17px; }
.sw .btn-secundario { border-color: rgb(255 255 255 / .6); color: var(--cal); }
.sw .btn-secundario:hover { background: var(--cal); border-color: var(--cal); color: var(--asfalto); }
.sw a:focus-visible, .sw button:focus-visible { outline-color: var(--senal); }

/* El panel de ejemplo: dibujado, no una captura */
.panel-demo { border: 1px solid rgb(255 255 255 / .16); border-radius: 12px; background: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03)); box-shadow: 0 40px 90px -30px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .12); overflow: hidden; rotate: 0deg; }
.panel-demo-barra { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgb(255 255 255 / .1); font-size: 12px; color: var(--sobre-oscuro); }
.panel-demo-barra i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / .22); }
.panel-demo-barra span { margin-left: 10px; }
.panel-demo-cuerpo { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
.panel-demo-menu { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0; border-right: 1px solid rgb(255 255 255 / .1); }
.panel-demo-menu span { width: 22px; height: 22px; border-radius: 6px; background: rgb(255 255 255 / .12); }
.panel-demo-menu span:first-child { background: var(--senal); }
.panel-demo-dentro { padding: 18px; display: grid; gap: 14px; }
.panel-demo-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.panel-demo-cifra { padding: 12px; border: 1px solid rgb(255 255 255 / .1); border-radius: 8px; background: rgb(6 39 47 / .55); }
.panel-demo-cifra span { display: block; font-size: 11px; letter-spacing: .04em; color: var(--sobre-oscuro); }
.panel-demo-cifra b { display: block; margin-top: 4px; font-family: var(--display); font-size: 26px; line-height: 1; color: var(--blanco); }
.panel-demo-cifra small { font-size: 11px; font-weight: 600; color: #7fe0b0; }
.panel-demo-fila { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 10px; }
.panel-demo-caja { padding: 12px; border: 1px solid rgb(255 255 255 / .1); border-radius: 8px; background: rgb(6 39 47 / .55); }
.panel-demo-caja > span { font-size: 11px; letter-spacing: .04em; color: var(--sobre-oscuro); }
.panel-demo-barras { display: flex; align-items: flex-end; gap: 6px; height: 92px; margin-top: 10px; }
.panel-demo-barras i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--petroleo-linea), rgb(149 197 196 / .25)); height: var(--h); transform-origin: bottom; }
.panel-demo-barras i:last-child { background: linear-gradient(180deg, var(--senal), rgb(255 184 28 / .35)); }
.panel-demo-lista { margin-top: 8px; display: grid; gap: 7px; }
.panel-demo-lista li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--cal); }
.panel-demo-lista em { font-style: normal; padding: 2px 8px; border-radius: 999px; background: rgb(127 224 176 / .16); color: #7fe0b0; font-size: 10px; font-weight: 700; white-space: nowrap; }
.panel-demo-lista em.espera { background: rgb(255 184 28 / .16); color: var(--senal); }
.panel-demo-pie { margin-top: 10px; text-align: right; font-size: 12px; color: rgb(197 208 211 / .7); }
.js .panel-demo.entra .panel-demo-barras i { scale: 1 0; transition: scale .7s var(--llegada); }
.js .panel-demo.entra.visto .panel-demo-barras i { scale: 1 1; }
.panel-demo-barras i:nth-child(2) { transition-delay: .05s; } .panel-demo-barras i:nth-child(3) { transition-delay: .1s; }
.panel-demo-barras i:nth-child(4) { transition-delay: .15s; } .panel-demo-barras i:nth-child(5) { transition-delay: .2s; }
.panel-demo-barras i:nth-child(6) { transition-delay: .25s; } .panel-demo-barras i:nth-child(7) { transition-delay: .3s; }

.sw-rejilla { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sw-tarjeta { padding: 22px 20px; border: 1px solid rgb(255 255 255 / .12); border-radius: 10px; background: rgb(255 255 255 / .04); transition: border-color var(--dur-2) var(--llegada), background-color var(--dur-2) var(--llegada), translate var(--dur-2) var(--llegada); }
.sw-tarjeta:hover { border-color: rgb(255 184 28 / .6); background: rgb(255 255 255 / .07); translate: 0 -3px; }
.sw-tarjeta .ico { width: 22px; height: 22px; box-sizing: content-box; padding: 10px; border-radius: 10px; background: rgb(255 184 28 / .14); color: var(--senal); }
.sw-tarjeta h3 { margin-top: 16px; font-size: 22px; line-height: 1.1; color: var(--blanco); }
.sw-tarjeta p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--sobre-oscuro); }
.sw-nota { margin-top: 20px; font-size: 14px; color: rgb(197 208 211 / .8); max-width: 80ch; }
.sw-mensaje { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 24px 48px; align-items: center; padding: 32px; border: 1px solid rgb(255 255 255 / .14); border-radius: 12px; background: linear-gradient(120deg, rgb(0 63 77 / .7), rgb(6 39 47 / .5)); }
.sw-mensaje p { font-size: var(--t-lead); line-height: 1.5; color: var(--cal); }
.sw-mensaje p + p { margin-top: 12px; color: var(--sobre-oscuro); font-size: var(--t-body); }
.sw-mensaje .sw-acciones { margin-top: 0; flex-direction: column; }
.sw-mensaje .btn { width: 100%; white-space: normal; text-align: center; }

@media (max-width: 1100px) { .sw-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) {
  .sw-cabeza { grid-template-columns: minmax(0, 1fr); }
  .sw-mensaje { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
}
@media (max-width: 560px) {
  .sw-rejilla { grid-template-columns: minmax(0, 1fr); }
  .sw-acciones .btn { width: 100%; }
  .panel-demo-fila { grid-template-columns: minmax(0, 1fr); }
  .panel-demo-cifra b { font-size: 21px; }
  .panel-demo-cifras { gap: 6px; }
  .panel-demo-cifra { padding: 10px 8px; }
}

/* El formulario de software a medida y el de presupuesto */
.sw-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-chips label { position: relative; cursor: pointer; }
.sw-chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sw-chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--ceniza); border-radius: 999px; background: var(--blanco); font-size: 15px; font-weight: 500; transition: border-color var(--dur-1) var(--llegada), background-color var(--dur-1) var(--llegada), color var(--dur-1) var(--llegada); }
.sw-chips label:hover span { border-color: var(--petroleo); }
.sw-chips input:checked + span { border-color: var(--petroleo); background: var(--petroleo); color: var(--blanco); }
.sw-chips input:focus-visible + span { outline: 2px solid var(--petroleo); outline-offset: 2px; }
.campos-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; }
@media (max-width: 720px) { .campos-tres { grid-template-columns: minmax(0, 1fr); } }
.formulario-papel { padding: 32px; border: 1px solid var(--ceniza); border-radius: var(--pv-radio); background: var(--blanco); box-shadow: var(--sombra-papel); }
.formulario-papel .contacto-form { margin-top: 0; }
@media (max-width: 720px) { .formulario-papel { padding: 22px 18px; } }
.lista-pasos-medida { margin-top: 20px; display: grid; gap: 14px; counter-reset: paso; }
.lista-pasos-medida li { counter-increment: paso; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; font-size: var(--t-small); line-height: 1.5; color: var(--grafito); }
.lista-pasos-medida li::before { content: counter(paso); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--petroleo); color: var(--blanco); font-weight: 700; font-size: 15px; }
.lista-pasos-medida b { display: block; color: var(--asfalto); }

/* Cabeceras centradas de la página de precios */
.cabeza-centro { max-width: 46em; margin: 0 auto 36px; text-align: center; }
.cabeza-centro .lead { margin: 14px auto 0; max-width: 40em; }
.portada-precios { text-align: center; padding-bottom: 8px; }
.portada-precios h1 { max-width: 16ch; margin-inline: auto; }
.portada-precios .lead { margin: 20px auto 0; max-width: 38em; }
.portada-precios .confianza { justify-content: center; margin-top: 24px; }
@media (max-width: 720px) { .portada-precios .confianza { align-items: flex-start; text-align: left; } }
.planes-nota-centro { margin: 28px auto 0; max-width: 62em; text-align: center; font-size: var(--t-small); color: var(--grafito); }
.pasos-contratar-centro { justify-content: center; }