/* inicio.css — la página pública. Va aparte de style.css a propósito: esa es la
   hoja de la HERRAMIENTA (tablas densas, formularios, menú lateral) y esta es la
   de la VITRINA, que necesita aire, tipografía grande y foco en un solo mensaje.
   Mezclarlas obligaría a pelear con reglas pensadas para pantallas de trabajo. */

.pub {
    --azul:      #1f4e79;
    --azul-osc:  #16324f;
    --azul-cla:  #2f7fa5;
    --teal:      #0d9488;
    --tinta:     #12212e;
    --tinta2:    #46596b;
    --tenue:     #7b8b99;
    --papel:     #ffffff;
    --papel2:    #f3f6fa;
    --linea:     #e3e9ef;
    --ambar:     #a8631a;
    --ambar-sv:  #fdf6ec;

    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.pub * { box-sizing: border-box; }
.pub h1, .pub h2, .pub h3 { margin: 0; line-height: 1.15; letter-spacing: -.02em; }
.pub p { margin: 0 0 14px; }

/* ── BARRA SUPERIOR ─────────────────────────────────────────────────────────── */
.pub-barra {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    flex-wrap: wrap;
    padding: 16px 32px; border-bottom: 1px solid var(--linea);
    position: sticky; top: 0; background: rgba(255,255,255,.94);
    backdrop-filter: blur(8px); z-index: 50;
}
.pub-marca { display: flex; align-items: center; gap: 10px; text-decoration: none;
    color: var(--azul); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.pub-marca em { font-style: normal; font-weight: 500; color: var(--tinta2); }
.pub-nav { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

/* Los botones REDONDEADOS que pidió el usuario. Uno solo va sólido —el que
   queremos que se pulse— y los demás en contorno: si los tres gritan, ninguno guía. */
.pub-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: 999px;
    border: 1.5px solid var(--linea); background: var(--papel);
    color: var(--tinta2); font-size: .9rem; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s, transform .12s;
}
.pub-btn:hover { border-color: var(--azul-cla); color: var(--azul); text-decoration: none; }
.pub-btn svg { flex: none; }
.pub-btn-fuerte { background: var(--azul); border-color: var(--azul); color: #fff; }
.pub-btn-fuerte:hover { background: var(--azul-osc); border-color: var(--azul-osc);
    color: #fff; transform: translateY(-1px); }
.pub-btn-grande { padding: 14px 30px; font-size: 1rem; }

/* ── EL MENSAJE ─────────────────────────────────────────────────────────────── */
.pub-hero { max-width: 830px; margin: 0 auto; padding: 78px 24px 64px; text-align: center; }
.pub-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--teal); margin-bottom: 18px; }
.pub-hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.7rem); font-weight: 800; text-wrap: balance; }
.pub-hero h1 span { color: var(--azul); }
.pub-lead { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--tinta2);
    max-width: 62ch; margin: 22px auto 30px; }
.pub-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* LA PRUEBA GRATIS: en verde petróleo y del tamaño que merece — es el argumento
   que derriba la objeción de entrada. Es un enlace completo, no un texto con un
   botón al lado: quien lo lee ya está interesado y no hay que hacerlo buscar. */
.pub-prueba { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
    justify-content: center; margin-top: 22px; padding: 10px 18px; border-radius: 30px;
    font-size: 1.02rem; color: #0f3f4a; background: rgba(18,112,127,.08);
    border: 1px solid rgba(18,112,127,.22); text-decoration: none;
    transition: background .15s, border-color .15s; }
.pub-prueba:hover { background: rgba(18,112,127,.14); border-color: rgba(18,112,127,.42); }
.pub-prueba svg { flex: none; color: #12707f; }
.pub-prueba strong { color: #0f3f4a; }
.pr-ir { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #12707f; }
.pr-ir svg { transition: transform .15s; }
.pub-prueba:hover .pr-ir svg { transform: translateX(3px); }

.pub h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 700; text-wrap: balance; }
.pub-sub { color: var(--tinta2); max-width: 68ch; margin: 12px auto 0; }
.pub-mini { font-size: .87rem; color: var(--tenue); }

/* ── EL RECORRIDO ───────────────────────────────────────────────────────────── */
.pub-flujo-zona { background: var(--papel2); border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea); padding: 62px 24px; text-align: center; }
.pub-flujo { list-style: none; display: grid; gap: 12px; padding: 0;
    grid-template-columns: repeat(6, 1fr); max-width: 1120px; margin: 34px auto 0; }
.pub-flujo li { position: relative; background: var(--papel); border: 1px solid var(--linea);
    border-radius: 12px; padding: 20px 12px 16px; display: flex; flex-direction: column;
    align-items: center; gap: 7px; text-align: center; }
.pf-ico { color: var(--azul); line-height: 0; }
.pub-flujo strong { font-size: .95rem; }
.pf-que { font-size: .76rem; color: var(--tenue); line-height: 1.4; }
/* El primer paso se marca: es exactamente donde se acaban las demás herramientas. */
.pub-flujo li.pf-otros { border-color: #d8c19a; background: var(--ambar-sv); }
.pf-tag { position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%);
    white-space: nowrap; font-size: .64rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: #fff; background: var(--ambar);
    padding: 3px 10px; border-radius: 999px; }

/* ── VENTAJAS ───────────────────────────────────────────────────────────────── */
.pub-vent-zona { padding: 70px 24px; max-width: 1120px; margin: 0 auto; text-align: center; }
.pub-vent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 38px;
    text-align: left; }
.pv { padding: 26px 24px; border: 1px solid var(--linea); border-radius: 13px;
    background: var(--papel); transition: border-color .15s, box-shadow .15s; }
.pv:hover { border-color: #c9dced; box-shadow: 0 6px 20px rgba(18,33,46,.06); }
.pv-ico { display: inline-flex; align-items: center; justify-content: center;
    width: 50px; height: 50px; border-radius: 13px; margin-bottom: 15px;
    background: #eaf2f8; color: var(--azul); }
.pv h3 { font-size: 1.06rem; margin-bottom: 8px; }
.pv p { font-size: .91rem; color: var(--tinta2); margin: 0; }

/* ── EL DIFERENCIADOR ───────────────────────────────────────────────────────── */
.pub-dif { padding: 8px 24px 70px; }
.pd-caja { max-width: 1000px; margin: 0 auto; display: flex; gap: 26px; align-items: flex-start;
    background: var(--azul-osc); color: #e9f0f6; border-radius: 16px; padding: 40px 42px; }
.pd-ico { flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 68px; height: 68px; border-radius: 16px;
    background: rgba(255,255,255,.09); color: #7fd4c5; }
.pd-caja h2 { color: #fff; margin-bottom: 14px; }
.pd-caja p { color: #c3d2df; font-size: .96rem; }
.pd-caja p:last-child { margin: 0; }
.pd-caja strong { color: #fff; }

/* ── PLANES ─────────────────────────────────────────────────────────────────── */
.pub-planes { background: var(--papel2); border-top: 1px solid var(--linea);
    padding: 70px 24px; text-align: center; }
.pub-plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    max-width: 1120px; margin: 38px auto 0; text-align: left; }
.pp { background: var(--papel); border: 1px solid var(--linea); border-radius: 13px;
    padding: 26px 22px; display: flex; flex-direction: column; }
.pp h3 { font-size: 1.12rem; margin-bottom: 10px; }
.pp-uf { font-size: 1.5rem; font-weight: 800; color: var(--azul); line-height: 1.2; }
.pp-uf span { display: block; font-size: .72rem; font-weight: 500; color: var(--tenue);
    letter-spacing: 0; margin-top: 3px; }
.pp-res { font-size: .85rem; color: var(--tinta2); margin: 14px 0 16px; }
/* El pie de la tarjeta se pega abajo para que las cuatro queden parejas aunque los
   resúmenes tengan distinto largo — la misma regla de las tarjetas del sistema. */
.pp-lista { list-style: none; padding: 0; margin: auto 0 0; }
.pp-lista li { display: flex; align-items: flex-start; gap: 7px; padding: 5px 0;
    font-size: .83rem; color: var(--tinta2); line-height: 1.4; }
.pp-lista svg { flex: none; margin-top: 3px; color: var(--teal); }
.pub-planes .pub-cta { margin-top: 34px; }

/* ── PIE ────────────────────────────────────────────────────────────────────── */
.pub-pie { padding: 44px 24px 54px; text-align: center; border-top: 1px solid var(--linea); }
.pp-marca { display: inline-flex; align-items: center; gap: 9px; color: var(--azul);
    font-weight: 700; margin-bottom: 12px; }
.pub-pie p { color: var(--tenue); font-size: .88rem; margin: 0 0 6px; }
.pp-mini { font-size: .78rem !important; max-width: 60ch; margin: 10px auto 0 !important; }

/* ── PANTALLAS ANGOSTAS ─────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .pub-vent, .pub-plan-grid { grid-template-columns: repeat(2, 1fr); }
    .pub-flujo { grid-template-columns: repeat(3, 1fr); }
    .pd-caja { flex-direction: column; gap: 18px; padding: 32px 26px; }
}
@media (max-width: 620px) {
    .pub-barra { padding: 13px 16px; }
    .pub-nav { width: 100%; }
    /* En el teléfono la barra es fija: cada fila que ocupe se la quita al contenido.
       Con cinco botones se parte en dos líneas, así que se esconden los dos
       INFORMATIVOS — se llega igual bajando — y quedan los que son acción. */
    .pub-nav a[href="#quienes"], .pub-nav-ia { display: none; }
    .pub-btn { padding: 8px 14px; font-size: .84rem; }
    .pub-hero { padding: 50px 18px 44px; }
    .pub-vent, .pub-plan-grid, .pub-flujo { grid-template-columns: 1fr; }
    .pf-tag { position: static; transform: none; margin-top: 6px; }
}

/* ══ LAS DOS PREGUNTAS ═════════════════════════════════════════════════════════
   Es el argumento central de la página: la pyme no pregunta «¿hay licitaciones?»,
   pregunta «¿me conviene?» y «¿cuánto me deja?». Por eso va apenas debajo del
   titular y con el número a la vista — un ejemplo concreto convence más que
   cualquier adjetivo. */
.pub-preg { padding: 66px 24px 72px; max-width: 1120px; margin: 0 auto; }
.pq-cab { text-align: center; }
.pq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 36px 0 30px; }
.pq { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px;
      padding: 28px 26px; }
.pq-q { display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
        font-size: 1.14rem; font-weight: 700; color: var(--azul); line-height: 1.3;
        text-wrap: balance; }
.pq-q svg { flex: none; color: var(--teal); }
.pq p { font-size: .93rem; color: var(--tinta2); }
.pq p:last-child { margin: 0; }
.pq em { font-style: italic; }

/* EL CASO. Se dibuja como la ficha de costos real del sistema: la misma cascada
   que el vendedor ve al cotizar, para que la promesa y el producto se parezcan. */
.pq-caso { max-width: 620px; margin: 0 auto; background: var(--papel);
    border: 1px solid var(--linea); border-radius: 14px; overflow: hidden;
    box-shadow: 0 8px 26px rgba(18,33,46,.07); }
.pqc-cab { display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; padding: 16px 24px; background: var(--papel2);
    border-bottom: 1px solid var(--linea); }
.pqc-tit { display: inline-flex; align-items: center; gap: 8px; font-weight: 700;
    font-size: .95rem; color: var(--tinta); }
.pqc-tit svg { color: var(--azul); }
.pqc-nota { font-size: .76rem; color: var(--tenue); }

.pqc-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pqc-tabla td { padding: 9px 24px; color: var(--tinta2); }
.pqc-tabla td.n { text-align: right; font-variant-numeric: tabular-nums;
    color: var(--tinta); white-space: nowrap; }
.pqc-tabla td.n.neg { color: #a4565c; }
.pqc-tabla tr.sub td { border-top: 1px solid var(--linea); font-weight: 600;
    color: var(--tinta); padding-top: 11px; }
.pqc-tabla tr.sub em, .pqc-tabla tr.fin em { font-style: normal; font-size: .8rem;
    color: var(--tenue); margin-left: 7px; }
/* El resultado: el único número grande, porque es el que responde la pregunta. */
.pqc-tabla tr.fin td { border-top: 2px solid var(--tinta); padding: 14px 24px;
    font-size: 1.1rem; color: var(--tinta); }
.pqc-tabla tr.fin em.sem { display: inline-block; margin-left: 9px; padding: 2px 10px;
    border-radius: 999px; font-size: .8rem; font-weight: 700;
    background: #fdf1dc; color: #8a6714; border: 1px solid #e8c99a; }

.pqc-pie { display: flex; align-items: flex-start; gap: 8px; margin: 0;
    padding: 15px 24px 18px; background: var(--ambar-sv);
    border-top: 1px solid #f0e2cc; font-size: .87rem; color: #6b5427; line-height: 1.5; }
.pqc-pie svg { flex: none; margin-top: 3px; color: var(--ambar); }
.pqc-pie strong { color: #4a3a15; }

@media (max-width: 860px) {
    .pq-grid { grid-template-columns: 1fr; }
    /* La fila del total tiene su propio padding (más alto), así que hay que nombrarla:
       si no, en pantalla angosta las demás bajan a 18 px y ella se queda en 24 — seis
       píxeles que desalinean justo la cifra que más importa. */
    .pqc-tabla td,
    .pqc-tabla tr.fin td { padding-left: 18px; padding-right: 18px; }
    .pqc-cab, .pqc-pie { padding-left: 18px; padding-right: 18px; }
}

/* ══ ¿QUIÉNES SOMOS? ═══════════════════════════════════════════════════════════
   Va apenas debajo del titular: es la duda con que llega todo visitante. Fondo
   blanco y bloques amplios — acá se lee, no se escanea. */
.pub-quienes { padding: 64px 24px 40px; max-width: 1120px; margin: 0 auto; }
.pqn-cab { text-align: center; max-width: 820px; margin: 0 auto; }
.pqn-cab .pub-eyebrow { margin-bottom: 14px; }
.pqn-cab h2 { margin-bottom: 6px; }
.pqn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 38px; }
.pqn { padding: 26px 24px; border: 1px solid var(--linea); border-radius: 13px;
    background: var(--papel); }
.pqn-ico { display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 12px; margin-bottom: 14px;
    background: #e6f4f1; color: var(--teal); }
.pqn h3 { font-size: 1.05rem; margin-bottom: 9px; }
.pqn p { font-size: .91rem; color: var(--tinta2); margin: 0; }

@media (max-width: 860px) { .pqn-grid { grid-template-columns: 1fr; } }

/* ══ CALCULADORA DE PRECIO ═════════════════════════════════════════════════════
   Un empresario no compara «0,70 UF»: compara cuánto le sale al mes. El selector
   va ARRIBA de las tarjetas porque es lo primero que va a cambiar. */
.pub-calc { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
    margin: 30px auto 0; padding: 18px 22px; max-width: 620px;
    background: var(--papel); border: 1px solid var(--linea); border-radius: 13px; }
.pc-campo { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.pc-campo > span { font-size: .78rem; font-weight: 600; color: var(--tinta2); }
.pc-campo select { padding: 9px 12px; border: 1.5px solid var(--linea); border-radius: 8px;
    background: var(--papel); color: var(--tinta); font: inherit; font-size: .92rem;
    min-width: 190px; cursor: pointer; }
.pc-campo select:focus { outline: none; border-color: var(--azul-cla); }

/* EL PRECIO EN PESOS es el número grande; la UF queda de referencia, no al revés. */
.pp-pesos { margin-bottom: 4px; }
.pp-monto { display: block; font-size: 1.75rem; font-weight: 800; color: var(--azul);
    line-height: 1.15; font-variant-numeric: tabular-nums; }
.pp-cada { display: block; font-size: .8rem; color: var(--tinta2); margin-top: 2px; }
.pp-cada em { font-style: normal; color: var(--tenue); }
/* La UF, remarcada. El contrato está en UF y el peso es el de hoy — si eso queda
   como letra gris al pie, el cliente lo descubre recién cuando le llega la primera
   boleta distinta, y ahí ya es un reclamo. Va en recuadro azul para que se lea
   como parte del precio y no como una aclaración. */
.pp-uf-caja { display: block; margin-top: 9px; padding: 8px 10px; border-radius: 8px;
    background: rgba(31,78,121,.06); border: 1px solid rgba(31,78,121,.16);
    font-size: .8rem; color: var(--tinta2); line-height: 1.35; }
/* El «+ IVA» va JUNTO a la cifra en UF, no solo en la línea de arriba: el precio
   del contrato es este, y la usuaria pidió que quedara dicho aquí también.
   Va como <i> y no como <em> porque el <em> de esta caja ya es el párrafo
   explicativo de abajo, en bloque. */
.pp-uf-iva { font-style: normal; font-size: .82rem; color: var(--tinta2); }
.pp-uf-caja b { font-size: 1.02rem; font-weight: 800; color: var(--azul);
    font-variant-numeric: tabular-nums; }
.pp-uf-caja em { display: block; margin-top: 3px; font-style: normal;
    font-size: .72rem; color: var(--tenue); }
.pp-total { display: block; font-size: .76rem; color: var(--teal); margin-top: 5px;
    min-height: 1.1em; }
.pp-total b { font-weight: 700; }

/* El botón de cada tarjeta va al fondo, después de la lista. */
.pp-btn { justify-content: center; margin-top: 16px; width: 100%; }

@media (max-width: 620px) {
    .pub-calc { flex-direction: column; }
    .pc-campo select { min-width: 0; width: 100%; }
}

/* Los tres dolores. Con su ícono y en lista: se leen de un vistazo y el visitante
   se reconoce en ellos — que es lo que de verdad convence en esta sección. */
.pqn-dolores { list-style: none; padding: 0; margin: 22px auto 0; max-width: 640px;
    display: flex; flex-direction: column; gap: 10px; text-align: left; }
.pqn-dolores li { display: flex; align-items: flex-start; gap: 10px;
    background: var(--papel2); border: 1px solid var(--linea); border-radius: 10px;
    padding: 12px 16px; font-size: .9rem; color: var(--tinta2); line-height: 1.5; }
.pqn-dolores svg { flex: none; margin-top: 3px; color: var(--ambar); }
.pqn-dolores strong { color: var(--tinta); }

/* La pregunta pasó de <span> a <h3> por indexación: hay que devolverle el tamaño,
   porque .pub h3 es más chico y con otro interlineado. */
h3.pq-q { font-size: 1.14rem; font-weight: 700; color: var(--azul); line-height: 1.3; }

/* La glosa de la línea consolidada: dice de qué se trata sin abrir el detalle. */
.pqc-det { display: block; font-style: normal; font-size: .76rem; color: var(--tenue);
    margin-top: 1px; }

/* ══ TEXTO JUSTIFICADO ═════════════════════════════════════════════════════════
   Regla fija del usuario: los textos van justificados. Se aplica a los PÁRRAFOS
   de bloque —los de las tarjetas y los recuadros—, que son los que se leen como
   texto corrido y donde el borde derecho irregular se nota.

   Los títulos y las líneas centradas bajo ellos NO se justifican: text-align solo
   admite un valor, así que justificarlas les quitaría el centrado y rompería la
   composición del titular y de cada cabecera de sección.

   Y va con `hyphens: auto` (la página declara lang="es"): en español, justificar
   sin partir palabras abre espacios enormes entre palabras — los famosos «ríos»
   blancos que hacen el párrafo más difícil de leer, no más prolijo. */
.pq p,
.pv p,
.pqn p,
.pd-caja p,
.pp-res,
.pqn-dolores li span,
.pqc-pie span {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* La barra del ERP: cubre el ancho de los tres últimos pasos (comprar, entregar,
   cobrar), que son los que producen los documentos que un ERP necesita. Va en la
   misma rejilla, así queda calzada con ellos sin medidas a mano. */
.pub-flujo li.pf-erp {
    /* ABARCA LOS SEIS PASOS. Al principio cubría solo los tres últimos, pero el ERP
       no recibe únicamente la compra y la factura: recibe TODO lo que el sistema
       genera, desde la oportunidad hasta el cobro. Cubriendo el ancho completo se
       lee como el cierre del recorrido y no como el destino de un tramo. */
    grid-column: 1 / -1;
    flex-direction: row; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap; text-align: left;
    background: var(--azul-osc); border-color: var(--azul-osc);
    padding: 16px 26px;
}
.pf-erp .pf-ico { color: #7fd4c5; }
.pf-erp strong { color: #fff; font-size: 1rem; letter-spacing: .07em; white-space: nowrap; }
/* La bajada estaba en letra de nota al pie y se perdía contra el fondo oscuro: es lo
   que EXPLICA la barra, así que sube de tamaño y de contraste. */
.pf-erp .pf-que { color: #d6e2ec; font-size: .86rem; line-height: 1.5; flex: 0 1 auto; }
@media (max-width: 620px) {
    .pub-flujo li.pf-erp { flex-direction: column; text-align: center; }
    .pf-erp .pf-que { flex: none; }
}

/* ══ CENTRADO DE LAS SECCIONES ═════════════════════════════════════════════════
   Los títulos del sistema son contenedores FLEX (así el ícono queda alineado con
   la letra), y un contenedor flex IGNORA text-align: por eso los h2 salían pegados
   a la izquierda dentro de secciones que sí estaban centradas. Se centran por su
   propio eje, que es lo que un flex entiende. */
.pub-hero h1,
.pub-preg h2, .pq-cab h2,
.pub-quienes h2, .pqn-cab h2,
.pub-flujo-zona h2,
.pub-vent-zona h2,
.pub-planes h2 {
    justify-content: center;
    text-align: center;
}
/* Y la bajada de cada sección, centrada como bloque y como texto. */
.pub-flujo-zona .pub-sub,
.pub-vent-zona .pub-sub,
.pub-planes .pub-sub,
.pq-cab .pub-sub,
.pqn-cab .pub-sub {
    margin-left: auto; margin-right: auto; text-align: center;
}

/* ══ TITULARES EN UNA SOLA LÍNEA ═══════════════════════════════════════════════
   Pedido del usuario: el titular y el de «¿Quiénes somos?» van en UNA línea. Una
   frase partida en dos pierde fuerza — se lee como dos ideas y no como una.

   El tamaño va atado al ancho de la ventana (vw) junto con `nowrap`, así la frase
   se achica sola hasta caber en vez de quebrarse. Fijar un tamaño en píxeles
   funcionaría en la pantalla de uno y se partiría en la del de al lado.

   En pantallas angostas SÍ se deja quebrar: ahí una sola línea obligaría a una
   letra tan chica que el titular dejaría de serlo. */
.pub-hero { max-width: 1180px; }
.pub-hero h1 {
    white-space: nowrap;
    font-size: clamp(1.3rem, 4vw, 3.15rem);
}
.pub-quienes .pqn-cab { max-width: 1120px; }
.pub-quienes h2 {
    white-space: nowrap;
    font-size: clamp(1.05rem, 2.85vw, 2.05rem);
}
@media (max-width: 780px) {
    .pub-hero h1 { white-space: normal; font-size: clamp(1.9rem, 7.2vw, 2.5rem); }
    .pub-quienes h2 { white-space: normal; font-size: clamp(1.35rem, 5.4vw, 1.8rem); }
}

/* El mensaje: DOS líneas y letra más grande. Se le da ancho para que quepa en dos
   sin achicar la letra — al revés (angosto y grande) se parte en cuatro. */
.pub-lead {
    max-width: 1060px;
    font-size: clamp(1.05rem, 1.62vw, 1.36rem);
    line-height: 1.55;
    margin: 26px auto 30px;
}

/* Las tres ideas del mensaje: control, gestión y plata. Van juntas y del mismo
   tamaño — son tres pilares, no una jerarquía. */
.hero-marcas { list-style: none; display: flex; justify-content: center; flex-wrap: wrap;
    gap: 46px; padding: 0; margin: 0 0 32px; }
.hero-marcas li { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.hm-ico { display: inline-flex; align-items: center; justify-content: center;
    width: 76px; height: 76px; border-radius: 20px;
    background: #eaf2f8; color: var(--azul); }
.hero-marcas strong { font-size: .84rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--tinta2); }
@media (max-width: 620px) {
    .hero-marcas { gap: 26px; }
    .hm-ico { width: 62px; height: 62px; border-radius: 16px; }
    .hm-ico svg { width: 34px; height: 34px; }
}

/* ══ DOS ARREGLOS DE ESPECIFICIDAD ═════════════════════════════════════════════
   El mensaje del titular NUNCA estuvo centrado: `.pub p { margin: 0 0 14px }` le
   ganaba a `.pub-lead { margin: auto }` —dos clases contra una— así que el bloque
   quedaba pegado a la izquierda. Se sube la especificidad en vez de mover el
   ancho a mano, que es lo que habría tapado el síntoma sin arreglar la causa. */
.pub p.pub-lead { margin: 26px auto 30px; }

/* Y la bajada de «Las dos preguntas» topaba contra un max-width de 68 caracteres,
   por eso se partía en dos aunque el texto cupiera de sobra en el ancho real. */
.pq-cab p.pq-sub1 { max-width: none; white-space: nowrap; }
@media (max-width: 900px) { .pq-cab p.pq-sub1 { white-space: normal; } }

/* ══ CARRUSEL ══════════════════════════════════════════════════════════════════
   La ventana recorta y la pista se desliza: sin librerías, un transform basta.
   Cada tanda ocupa el 100% del ancho, así el salto es siempre de una pantalla. */
.carrusel { margin-top: 38px; }
.car-pista { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.car-tanda { flex: 0 0 100%; display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px; text-align: left; }
.carrusel { overflow: hidden; }
/* El overflow va en un envoltorio con aire abajo, para que la sombra de las
   tarjetas al pasar el mouse no quede cortada por el borde. */
.carrusel { padding-bottom: 6px; }

.car-puntos { display: flex; justify-content: center; gap: 9px; margin-top: 24px; }
.car-punto { width: 34px; height: 5px; padding: 0; margin: 0; border: 0; border-radius: 99px;
    background: #d3dde6; cursor: pointer; transition: background .2s, width .2s; min-height: 0; }
.car-punto:hover { background: #a9c2d6; }
.car-punto.on { background: var(--azul); width: 52px; }

@media (max-width: 980px) { .car-tanda { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .car-tanda { grid-template-columns: 1fr; } }
/* Quien pidió menos movimiento en su sistema no ve nada moverse solo. */
@media (prefers-reduced-motion: reduce) { .car-pista { transition: none; } }

/* Los dolores van del MISMO ANCHO que las tres tarjetas de abajo: la sección se lee
   como una sola columna y no como dos bloques de anchos distintos. Antes tenían un
   max-width propio de 640 px y quedaban flotando angostos sobre las tarjetas. */
.pqn-dolores { max-width: none; }

/* La alerta va DELANTE de la cifra, no detrás: como todos los montos están
   alineados a la derecha, lo que se agrega adelante crece hacia la izquierda y el
   borde derecho de la columna no se mueve. Detrás —como estaba el porcentaje—
   empujaba el número y cada fila terminaba en un lugar distinto. */
.pqc-alerta { display: inline-flex; vertical-align: -3px; margin-right: 7px; color: #c0392b; }

/* La caída va DELANTE de la cifra: la flecha quebrada de las acciones más el
   porcentaje real. Adelante y no detrás porque los montos se alinean a la derecha
   — lo que se agrega antes crece hacia la izquierda y la columna no se mueve. */
.pqc-baja { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px;
    color: #c0392b; font-size: .84rem; font-weight: 700; vertical-align: 1px; }
.pqc-baja svg { flex: none; }

/* ══ LOS DOLORES, MÁS PRESENTES ════════════════════════════════════════════════
   Es el mensaje que hace que el visitante se reconozca, así que tiene que pesar
   más que una nota al pie. Crece hacia ARRIBA y hacia ABAJO —letra, aire, ícono—
   pero NO a los lados: el ancho sigue amarrado al de las tarjetas de abajo, que
   es lo que mantiene la sección leyéndose como una sola columna. */
.pqn-dolores { gap: 12px; margin-top: 26px; }
.pqn-dolores li {
    align-items: center;
    gap: 14px;
    padding: 19px 24px;
    font-size: 1.03rem;
    line-height: 1.5;
    /* Fondo cálido: son dolores, y el tono los separa de las tarjetas blancas de
       abajo sin necesidad de agrandarlos ni de meterles una franja de color. */
    background: #fdf6ec;
    border-color: #ecd9b8;
    color: #5c4a2e;
}
.pqn-dolores li svg { margin-top: 0; }
.pqn-dolores strong { color: #3f3016; }
@media (max-width: 620px) {
    .pqn-dolores li { padding: 15px 17px; font-size: .95rem; align-items: flex-start; }
    .pqn-dolores li svg { margin-top: 3px; }
}

/* La barra de los agentes: misma forma que la del ERP —son del mismo orden— pero
   con su propio acento, porque no es lo mismo sacar datos hacia afuera que acelerar
   el trabajo por dentro. El destello va en el verde del sistema, que es el color
   con que ya se marca lo que el sistema hace por ti. */
.pub-flujo li.pf-ia { background: #0f3f4a; border-color: #0f3f4a; }
.pf-ia .pf-ico { color: #5fe3c8; }

/* La SEGUNDA etiqueta va más suave que la primera. Si las dos gritaran igual,
   ninguna diría nada: la historia es que la mayoría se queda en el paso 1, y que
   las que llegan al 2 lo hacen a ciegas. El peso visual sigue ese orden. */
.pub-flujo li.pf-otros2 { border-color: #dfe6ec; }
.pf-tag2 { background: #fff; color: #8a6714; border: 1px solid #e0cba4; }

/* La franja verde: de Adjudicar a Cobrar, el tramo donde ya no hay con quién
   compararse. Verde suave y no sólido — es una afirmación, no una capa del sistema
   como las dos barras oscuras de abajo, y si gritara igual que ellas competiría
   con el mensaje en vez de rematarlo. */
.pub-flujo li.pf-solo {
    grid-column: 3 / -1;
    flex-direction: row; align-items: center; justify-content: center;
    gap: 11px; flex-wrap: wrap; text-align: center;
    background: #eaf5ee; border: 1px solid #b6dcc6;
    padding: 13px 22px; margin-top: 6px;
}
.pf-solo .pf-ico { color: #2a6b4a; }
.pf-solo strong { color: #23603f; font-size: .93rem; line-height: 1.4; }

@media (max-width: 980px) { .pub-flujo li.pf-solo { grid-column: 1 / -1; } }

/* El pie de los planes se ajusta al ancho de las tarjetas de arriba, no a 68
   caracteres: una nota que mide la mitad que el bloque al que se refiere se ve
   como si perteneciera a otra cosa. */
.pub-planes .pub-mini { max-width: 1120px; }

/* El margen OBJETIVO: la diana, en el azul de la marca. Va delante del monto igual
   que la caída, así las dos cifras quedan en la misma columna y la comparación
   objetivo↔real se lee de un vistazo, sin tener que buscarla. */
.pqc-meta { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px;
    color: var(--azul); font-size: .84rem; font-weight: 700; vertical-align: 1px; }
.pqc-meta svg { flex: none; }
/* La glosa de las dos filas comparadas, un poco más presente que el resto. */
.pqc-tabla tr.sub .pqc-det, .pqc-tabla tr.fin .pqc-det { color: #5a6b7d; font-weight: 600; }

/* El pie de los planes va en UNA línea: puede pasarse del ancho de las tarjetas
   —el usuario lo prefiere así— pero nunca partirse dejando una palabra suelta
   abajo, que se ve como un error de armado. En pantalla angosta sí puede quebrar. */
.pub-planes .pub-mini { max-width: 1240px; font-size: .84rem; }
@media (min-width: 1100px) { .pub-planes .pub-mini { white-space: nowrap; } }

/* ── CORPORATIVO ──────────────────────────────────────────────────────
   Banda aparte y en el azul de la marca, no una quinta tarjeta. Dos razones:
   una quinta columna apretaría a las otras cuatro, y sobre todo el corporativo
   NO se elige de una lista — se cotiza. El color distinto dice eso sin texto. */
.pp-corp { display: flex; flex-wrap: wrap; gap: 32px; align-items: center;
    margin: 26px auto 0; max-width: 1120px; padding: 26px 30px; border-radius: 16px;
    background: var(--azul-panel, #16324f); color: #fff; }
.ppc-izq { flex: 1 1 420px; }
.ppc-der { flex: 0 1 400px; }
.pp-corp h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px;
    font-size: 1.28rem; color: #fff; }
.ppc-desde { margin: 0 0 12px; font-size: 1.06rem; color: #cfe0f0; }
.ppc-desde strong { font-size: 1.5rem; color: #fff; font-variant-numeric: tabular-nums; }
.ppc-desde em { font-style: normal; font-size: .84rem; color: #9fbdd8; }
.pp-corp .ppc-por { margin: 0; font-size: .88rem; line-height: 1.6; color: #cfe0f0; text-align: left; }
.ppc-por strong { color: #fff; }
.ppc-lista { list-style: none; padding: 0; margin: 0 0 16px; }
.ppc-lista li { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0;
    font-size: .85rem; color: #cfe0f0; }
.ppc-lista strong { color: #fff; }
.ppc-lista svg { flex: none; margin-top: 3px; color: #7fc4b8; }
/* Botón claro sobre el fondo oscuro: acá el contraste se invierte. */
.ppc-btn { justify-content: center; width: 100%; background: #fff; border-color: #fff;
    color: var(--azul-panel, #16324f); font-weight: 700; }
.ppc-btn:hover { background: #e8f0f7; border-color: #e8f0f7; color: var(--azul-panel, #16324f); }
@media (max-width: 860px) { .pp-corp { padding: 22px; gap: 20px; } }
/* La sección de planes centra su texto; dentro de la banda todo va a la izquierda,
   si no el precio queda centrado y el párrafo de al lado alineado, que se lee como
   un error de armado. */
.pp-corp, .pp-corp * { text-align: left; }
.ppc-btn { justify-content: center; text-align: center; }
/* Tarjeta con el precio apagado: el espacio del monto no puede quedar vacío ni
   desalinear las cuatro. Se ocupa con el aviso, en el mismo alto. */
.pp-sinprecio .pp-monto { font-size: 1.15rem; color: var(--tinta2); }
.pp-sinprecio .pp-cada { color: var(--tenue); }

/* ═══════════════════════════════════════════════════════════════════════
   AGENTES IA — la sección de venta.
   El argumento es que el costo de contratar nunca es el sueldo, así que el
   desglose tiene que VERSE como una cuenta que suma, no como un párrafo.
   ═══════════════════════════════════════════════════════════════════════ */
.pub-ia { padding: 64px 24px; background: #fff; }
.pub-ia h2 { justify-content: center; }

/* La caja del cálculo y el texto arrancan arriba a la misma altura: con la caja
   reducida a las dos líneas que sí suman, centrarla la dejaría flotando. */
.ia-costo { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start;
    max-width: 1000px; margin: 8px auto 44px; }
.iac-txt { flex: 1 1 440px; }
.iac-txt h3 { display: block; text-align: left; font-size: 1.28rem; margin: 0 0 12px; color: var(--azul); }
/* JUSTIFICADO (pedido de la usuaria): es un párrafo de lectura corrida al lado de
   una caja de bordes rectos, y alineado solo a la izquierda el bloque se ve
   deshilachado contra ella. `hyphens` evita los ríos de blanco que deja justificar
   sin partir palabras. */
.pub-ia .iac-txt p { text-align: justify; hyphens: auto; margin: 0 0 10px;
    color: var(--tinta2); line-height: 1.65; }
.iac-remate { font-size: .95rem; }
.iac-remate em { font-style: italic; color: var(--tinta); }

/* La cuenta. Las dos primeras líneas suman al total; las otras son «y encima». */
.iac-lista { flex: 0 1 320px; list-style: none; margin: 0; padding: 18px 22px;
    border-radius: 14px; background: var(--fondo, #f4f7fa); border: 1px solid var(--linea); }
.iac-lista li { display: flex; align-items: center; gap: 9px; padding: 6px 0;
    font-size: .88rem; color: var(--tinta2); }
.iac-lista li svg { flex: none; color: var(--teal); }
.iac-lista li:nth-child(n+3) svg { color: var(--tenue); }
.iac-total { display: block !important; margin-top: 12px; padding-top: 14px;
    border-top: 2px solid var(--azul); }
.iac-total strong { display: block; font-size: 1.9rem; color: var(--azul);
    font-variant-numeric: tabular-nums; line-height: 1.1; }
.iac-total em { font-style: normal; font-size: .78rem; color: var(--tenue); }
/* La nota del asterisco: bajo «y de ahí para arriba», más chica todavía. */
.iac-nota { display: block; margin-top: 6px; font-size: .7rem; line-height: 1.4; color: var(--tenue); }

/* LA PREGUNTA. Es el corazón del argumento, así que ocupa su propio bloque. */
/* El recuadro azul alinea con las tres tarjetas de plan: los tres bloques de la
   sección comparten el mismo ancho y los mismos bordes. */
.ia-pregunta { max-width: 1000px; margin: 0 auto 48px; padding: 30px 28px;
    border-radius: 16px; background: var(--azul-panel, #16324f); color: #fff; }
.pub-ia .iap-lead { font-size: 1.18rem; color: #cfe0f0; margin: 0 0 20px; }
.iap-lead strong { color: #fff; }
.iap-dos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; }
.iap-a, .iap-b { flex: 1 1 300px; display: flex; align-items: flex-start; gap: 10px;
    padding: 16px 18px; border-radius: 12px; font-size: 1rem; line-height: 1.45; text-align: left; }
.iap-a { background: rgba(255,255,255,.07); color: #cfe0f0; }
.iap-a svg { flex: none; margin-top: 2px; color: #9fbdd8; }
.iap-b { background: rgba(127,196,184,.14); color: #fff; font-weight: 600; }
.iap-b svg { flex: none; margin-top: 2px; color: #7fc4b8; }
.iap-o { flex: none; font-size: .84rem; color: #9fbdd8; text-transform: uppercase; letter-spacing: 1px; }
.pub-ia .iap-cierre { margin: 20px 0 0; font-size: .9rem; color: #cfe0f0; line-height: 1.65; }
.iap-cierre strong { color: #fff; }

/* Los tres planes. */
.ia-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px; max-width: 1000px; margin: 0 auto 14px; align-items: stretch; }
.iap-card { position: relative; display: flex; flex-direction: column; padding: 24px 22px;
    border: 1px solid var(--linea); border-radius: 16px; background: #fff; text-align: left; }
.iap-card.iap-destaca { border-color: var(--azul); box-shadow: 0 6px 24px rgba(31,78,121,.10); }
.iap-tag { position: absolute; top: -11px; left: 22px; padding: 3px 10px; border-radius: 999px;
    background: var(--azul); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .3px; }
.iap-card h3 { display: block; text-align: left; font-size: 1.1rem; margin: 0 0 10px; }
.iap-precio strong { display: block; font-size: 1.85rem; color: var(--azul); line-height: 1.15; }
.iap-precio span { display: block; font-size: .8rem; color: var(--tinta2); }
.iap-precio .iap-uf { color: var(--tenue); font-size: .74rem; margin-top: 2px; }
.iap-conf { font-size: 1.15rem !important; color: var(--tinta2) !important; }
.pub-ia .iap-res { text-align: left; font-size: .85rem; color: var(--tinta2); margin: 12px 0 14px; }
/* La lista de cupos: agente a la izquierda, número tabulado en su columna y la
   unidad después. Los tres planes traen los mismos agentes en el mismo orden, así
   que las tres tarjetas quedan alineadas fila por fila. */
.iap-cupos { list-style: none; margin: 0 0 4px; padding: 0; }
.iap-cupos li { display: flex; align-items: baseline; gap: 6px; padding: 5px 0;
    font-size: .78rem; border-bottom: 1px solid rgba(0,0,0,.05); }
.iac-ag { flex: 1 1 auto; color: var(--tinta2); min-width: 0; }
.iac-n { flex: none; min-width: 42px; text-align: right; font-weight: 700;
    color: var(--tinta); font-variant-numeric: tabular-nums; }
.iac-u { flex: none; min-width: 74px; color: var(--tenue); font-size: .72rem; }

.iap-btn { justify-content: center; width: 100%; margin-top: auto; }
@media (max-width: 720px) { .iap-o { display: none; } }
/* «Desde», arriba del monto: $743.000 es un piso, no una cifra cerrada. */
.iac-desde { display: block; font-size: .78rem; color: var(--tinta2);
    text-transform: uppercase; letter-spacing: .6px; margin-bottom: 1px; }
/* Las tres tarjetas alinean sus bloques: el resumen reserva dos líneas para que
   la lista de cupos empiece a la misma altura en las tres, y el «sujeto a cupo»
   se pega abajo junto al botón. Si no, cada tarjeta corta en un lugar distinto. */
.pub-ia .iap-res { min-height: 3.2em; }
.iap-card .ia-sujeto { margin-top: auto; padding-top: 10px; }
.iap-card .iap-btn { margin-top: 10px; }
.pub-ia .pp-uf-caja { margin-top: 10px; }
/* Las dos preguntas: centradas dentro de su recuadro y en una línea si caben.
   El ícono no debe empujarlas fuera del centro, por eso el bloque se centra
   entero en vez de alinear el texto a la izquierda. */
.iap-a, .iap-b { justify-content: center; text-align: center; align-items: center; }
.iap-a svg, .iap-b svg { margin-top: 0; }
/* El pie: una frase por línea, centrado bajo las tres tarjetas — al MISMO ancho
   que `.ia-planes` (1000px) para que arranque y termine donde arrancan y terminan
   las tarjetas.
   ⚠️ Va como `.pub p.ia-pie`: `.pub p { margin: 0 0 14px }` (una clase + un
   elemento) le gana a `.ia-pie` (una clase) y le anula el `auto` que centra, así
   que el bloque quedaba pegado al borde izquierdo. Es la misma trampa que ya
   estaba anotada más arriba para `.pub-lead`. */
.pub p.ia-pie { max-width: 1000px; margin: 4px auto 0; text-align: center; }
.ia-pie span { display: block; }
/* Los dos recuadros de la pregunta, del mismo alto: uno entra en una línea y el
   otro baja a dos, y con alturas distintas se lee como un descuido. `stretch`
   los iguala al más alto y el texto se centra dentro. */
.iap-dos { align-items: stretch; }
.iap-a, .iap-b { display: flex; align-items: center; }

/* ── ARMA TU PLAN ─────────────────────────────────────────────────────
   El escalón del medio: ni tarjeta de plan ni banda oscura de corporativo.
   Recuadro claro con filete, para que se lea como un puente entre los dos. */
.pp-arma { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start;
    max-width: 1120px; margin: 26px auto 0; padding: 24px 28px; border-radius: 16px;
    background: var(--fondo, #f4f7fa); border: 1px solid var(--linea); }
.pp-arma, .pp-arma * { text-align: left; }
/* La ilustración del rompecabezas: columna propia, ancho fijo y sin encoger.
   `flex: none` para que no se deforme cuando el texto pide espacio. */
.pa-ilu { flex: none; width: 150px; line-height: 0; }
.pa-izq { flex: 1 1 380px; }
.pa-der { flex: 0 1 380px; }
.pp-arma h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 4px;
    font-size: 1.2rem; color: var(--azul); }
.pa-para { margin: 0 0 12px !important; font-size: .82rem; color: var(--tenue);
    text-transform: uppercase; letter-spacing: .4px; }
.pub .pa-txt { margin: 0 0 12px; font-size: .92rem; line-height: 1.6; color: var(--tinta2); }
.pa-ej { display: flex; align-items: flex-start; gap: 8px; margin: 0 !important;
    font-size: .85rem; color: var(--tinta2); font-style: italic; }
.pa-ej svg { flex: none; margin-top: 3px; color: var(--teal); }
/* La regla es la letra chica que más importa: va destacada, no al pie. */
.pa-regla { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 10px !important;
    padding: 13px 15px; border-radius: 10px; background: #fff;
    border: 1px solid rgba(31,78,121,.18); font-size: .87rem; line-height: 1.55; color: var(--tinta2); }
.pa-regla svg { flex: none; margin-top: 2px; color: var(--azul); }
.pa-regla strong { color: var(--tinta); }
.pub .pa-nota { margin: 0 0 14px; font-size: .8rem; color: var(--tenue); line-height: 1.5; }
.pa-btn { justify-content: center; width: 100%; }
@media (max-width: 860px) { .pp-arma { padding: 20px; gap: 18px; }
    /* En angosto la ilustración se encoge en vez de comerse la fila del texto. */
    .pa-ilu { width: 96px; }
    .pa-ilu svg { width: 96px; height: 96px; } }
/* ⚠️ Los párrafos de esta banda van en BLOQUE explícito. Es la trampa que ya está
   anotada en el proyecto: un <p> que queda en flex convierte cada <strong> suelto
   en una columna y el texto se lee partido en trozos. Acá el ícono de la regla se
   pone en línea en vez de con flex, por lo mismo. */
.pub .pa-txt, .pub .pa-regla, .pub .pa-nota, .pub .pa-ej { display: block; }
.pa-regla svg, .pa-ej svg { vertical-align: -2px; margin-right: 6px; }

/* ── LA BANDA DE AGENTES ES UN ENLACE ──────────────────────────────────
   Quien la lee ya está interesado; hacerlo bajar a buscar los planes pierde
   a la mitad. El <li> mantiene su forma y el <a> ocupa todo su interior. */
.pf-ia > a { display: flex; align-items: center; justify-content: center;
    gap: 14px; flex-wrap: wrap; width: 100%; text-decoration: none; }
.pf-ia > a:hover { text-decoration: none; }
.pub-flujo li.pf-ia { padding: 0; transition: background .15s ease; }
.pub-flujo li.pf-ia > a { padding: 16px 26px; }
.pub-flujo li.pf-ia:hover { background: #14515f; border-color: #14515f; }
.pf-ir { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
    border-radius: 999px; background: rgba(95,227,200,.14); color: #5fe3c8;
    font-size: .78rem; font-weight: 700; white-space: nowrap; }
.pub-flujo li.pf-ia:hover .pf-ir { background: rgba(95,227,200,.24); }

/* ── LA SECCIÓN DE IA, EN LOS TONOS DE ESA BANDA ───────────────────────
   El azul del panel era el del corporativo, y los agentes son otra cosa.
   Con el mismo verde-petróleo de la banda, quien llega desde ella reconoce
   que está en el lugar correcto. */
.ia-pregunta { background: #0f3f4a; }
.pub-ia .iap-lead { color: #cfe7e6; }
.pub-ia .iap-cierre { color: #cfe7e6; }
.iap-a { background: rgba(255,255,255,.06); color: #cfe7e6; }
.iap-a svg { color: #8fb6b8; }
.iap-b { background: rgba(95,227,200,.13); }
.iap-b svg { color: #5fe3c8; }
.iap-o { color: #8fb6b8; }
.pub-ia h2 svg { color: #12707f; }
.iac-lista li svg { color: #12707f; }
.iac-total { border-top-color: #12707f; }
.iac-total strong { color: #0f3f4a; }
.pub-ia .iac-txt h3 { color: #0f3f4a; }
.iap-card.iap-destaca { border-color: #12707f; box-shadow: 0 6px 24px rgba(15,63,74,.12); }
.iap-tag { background: #0f3f4a; }
.pub-ia .iap-precio strong { color: #0f3f4a; }
.pub-ia .pp-uf-caja { background: rgba(18,112,127,.07); border-color: rgba(18,112,127,.20); }
.pub-ia .pp-uf-caja b { color: #0f3f4a; }
.iap-btn { border-color: #12707f; color: #0f3f4a; }
.iap-btn:hover { background: #0f3f4a; border-color: #0f3f4a; color: #fff; }

/* ── ARMA TU PLAN: tarjeta blanca, no fondo gris ───────────────────────
   Sobre el gris de la página el recuadro anterior casi no se veía. En blanco
   con filete se lee como una opción más —que es lo que es— sin competir con
   las dos bandas oscuras que tiene al lado. */
.pp-arma { background: #fff; border-color: var(--linea);
    box-shadow: 0 2px 14px rgba(31,78,121,.06); }
.pa-regla { background: var(--fondo, #f4f7fa); }

/* ── AGENTES SUELTOS: los seis × los tres niveles de cupo ────────────────
   Va en TABLA y no en tarjetas: son 18 precios y lo que el cliente hace acá es
   COMPARAR —su agente contra los tres niveles, y el suelto contra el plan—, que
   es justo lo que una tabla hace y un muro de tarjetas no. */
.ia-sueltos { max-width: 1000px; margin: 30px auto 0; padding: 22px 24px;
    border: 1px solid var(--linea); border-radius: 16px; background: #fbfdfd;
    /* El bloque entero va centrado: el botón es `inline-block`, así que sin esto
       se pega a la izquierda mientras el título y el texto quedan al medio, y se
       lee como un error de armado. */
    text-align: center; }
.ia-sueltos h3 { display: flex; align-items: center; gap: 9px; justify-content: center;
    margin: 0 0 6px; font-size: 1.06rem; color: #0f3f4a; }
.pub .ias-txt { max-width: 640px; margin: 0 auto 16px; text-align: center;
    font-size: .88rem; color: var(--tinta2); line-height: 1.6; }
.ias-tabla { width: 100%; border-collapse: collapse; }
.ias-tabla th { padding: 8px 10px; font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; color: var(--tenue);
    border-bottom: 1px solid var(--linea); text-align: left; }
.ias-tabla th.n, .ias-tabla td.n { text-align: right; white-space: nowrap; }
.ias-tabla td { padding: 9px 10px; font-size: .86rem; color: var(--tinta2);
    border-bottom: 1px solid #eef2f4; }
.ias-tabla tr.ias-par td { background: #f4f9f9; }
.ias-tabla td b { display: block; font-size: .94rem; color: #0f3f4a;
    font-variant-numeric: tabular-nums; }
.ias-tabla td span { font-size: .74rem; color: var(--tenue); }
.pub .ias-pie { margin: 12px 0 0; text-align: center; font-size: .78rem; color: var(--tenue); }

/* ── PROMOCIÓN: la banda y el precio tachado ────────────────────────────
   El tachado es la mitad de para qué sirve una promo: sin él el cliente no
   tiene contra qué comparar y el descuento no se percibe. */
.pub-promo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    max-width: 1000px; margin: 0 auto 18px; padding: 11px 16px; border-radius: 12px;
    background: #fdecef; border: 1px solid #e3b6bc; text-align: left; }
.pub-promo-chip { flex: none; padding: 4px 12px; border-radius: 20px; background: #c0392b;
    color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .03em; }
.pub .pub-promo-txt { display: block; margin: 0; flex: 1 1 300px;
    font-size: .82rem; color: #8d2731; line-height: 1.5; }
.pp-antes { display: block; font-size: .95rem; color: var(--tenue);
    text-decoration: line-through; }
.pp-monto-promo { color: #c0392b; }
.pp-uf-caja s { color: var(--tenue); font-weight: 400; }
.ias-btn { display: inline-block; margin-top: 4px; }

/* El lema del corporativo: cierra el bloque, así que va con peso pero sin gritar
   — compite con el precio «desde 14 UF», que es lo primero que se mira. */
.pub .ppc-lema { display: block; margin: 14px 0 0; padding-top: 13px;
    border-top: 1px solid rgba(255,255,255,.22);
    font-size: 1rem; line-height: 1.5; color: #dbe7f2; }
.ppc-lema strong { color: #fff; }
/* El acento de los agentes también en la barra, para que se reconozca la sección. */
.pub-nav-ia svg { color: #12707f; }

/* En pantalla de teléfono la barra es FIJA: cada fila que ocupa se la quita al
   contenido para siempre. Medido en 390 px: con los tres botones a tamaño normal
   se partía en dos filas y la barra crecía a 127 px, el 16% de la pantalla. Con
   este ajuste los tres caben en una y la barra baja a la mitad. */
@media (max-width: 520px) {
    .pub-nav { gap: 6px; }
    .pub-nav .pub-btn { padding: 7px 10px; font-size: .78rem; gap: 5px; }
    .pub-marca span { font-size: .92rem; }
}

/* LA BARRA FIJA, POR ESCALONES. Es fija, así que cada fila extra se la quita al
   contenido de forma permanente: medido, con los cinco botones a 768 px la barra
   crecía a 190 px. Se van soltando los enlaces INFORMATIVOS —a los que igual se
   llega bajando— y nunca los de acción (crear cuenta, iniciar sesión).
   El orden de renuncia es el comercial: «¿Quiénes somos?» es lo primero que sobra;
   «Agentes IA» aguanta más porque es el diferenciador. */
@media (max-width: 1010px) { .pub-nav a[href="#quienes"] { display: none; } }
@media (max-width: 840px)  { .pub-nav-ia { display: none; } }