/* Página de Kipu (ki-pu.com). Mismos colores y letras del sistema. */
:root {
  --papel: #F6F4EF;
  --papel-2: #EFEBE3;
  --tarjeta: #FFFFFF;
  --tinta: #1B1917;
  --tinta-suave: #4A4540;
  --gris: #7A736B;
  --linea: #E5E0D6;
  --verde: #1E7A57;
  --verde-oscuro: #165E43;
  --verde-suave: #E4F0EA;
  --radio: 16px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, .marca span { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(36px, 5.2vw, 60px); font-weight: 700; }
h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; margin-bottom: 14px; }
h3 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
p { margin: 0 0 12px; }
.verde { color: var(--verde); }
.contenedor { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.angosto { max-width: 820px; }
.centro { text-align: center; }
.centro img { margin: 0 auto 16px; }

/* Barra */
.barra { position: sticky; top: 0; z-index: 20; background: rgba(246, 244, 239, 0.88); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--linea); }
.barra-in { display: flex; align-items: center; gap: 24px; height: 66px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 22px; font-weight: 700; }
.marca img { border-radius: 9px; }
.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a { text-decoration: none; color: var(--tinta-suave); font-weight: 500; font-size: 15px; }
.menu a:hover { color: var(--verde); }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--verde); color: #fff; text-decoration: none; font-weight: 600; padding: 14px 22px; border-radius: 12px; border: 1px solid var(--verde); transition: background .15s, transform .15s; }
.boton:hover { background: var(--verde-oscuro); transform: translateY(-1px); }
.boton svg { width: 20px; height: 20px; fill: currentColor; }
.boton-sec { background: transparent; color: var(--tinta); border-color: var(--linea); background: var(--tarjeta); }
.boton-sec:hover { background: var(--papel-2); }
.boton-chico { padding: 9px 16px; font-size: 14px; border-radius: 10px; }
.boton-grande { padding: 17px 30px; font-size: 18px; }
.ancho { width: 100%; }

/* Portada */
.portada { padding: 64px 0 40px; overflow: hidden; }
.portada-in { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; }
.etiqueta { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); margin-bottom: 14px; }
.etiqueta-clara { color: #8FD3B4; }
.bajada { font-size: 19px; color: var(--tinta-suave); margin: 20px 0 28px; max-width: 34em; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.sellos { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--tinta-suave); font-size: 15px; }
.sellos li::before { content: "✓"; color: var(--verde); font-weight: 700; margin-right: 7px; }
.portada-imagen { position: relative; }
.pantalla { border-radius: 14px; border: 1px solid var(--linea); box-shadow: 0 30px 60px -20px rgba(27, 25, 23, .35), 0 8px 20px -10px rgba(27, 25, 23, .2); background: #fff; }
.celular { position: absolute; width: 27%; right: -2%; bottom: -12%; border-radius: 26px; border: 7px solid var(--tinta); box-shadow: 0 24px 50px -16px rgba(27, 25, 23, .5); }

/* Secciones */
.seccion { padding: 88px 0; }
.seccion-papel { background: var(--papel-2); }
.seccion-oscura { background: var(--tinta); color: #F3F0EA; }
.seccion-oscura .intro, .seccion-oscura .lista-check li { color: #C9C3BA; }
.intro { font-size: 18px; color: var(--tinta-suave); max-width: 40em; }
.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.rejilla-4 { grid-template-columns: repeat(4, 1fr); }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.tarjeta, .negocio, .plan { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px; }
.tarjeta p, .negocio p { color: var(--tinta-suave); font-size: 15px; margin: 0; }
.icono { width: 46px; height: 46px; border-radius: 12px; background: var(--verde-suave); display: grid; place-items: center; margin-bottom: 16px; }
.icono svg { width: 24px; height: 24px; fill: none; stroke: var(--verde); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.negocio { border-top: 4px solid var(--verde); }
.dos-columnas { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }
.lista-check { list-style: none; padding: 0; margin: 18px 0 0; }
.lista-check li { padding-left: 30px; position: relative; margin-bottom: 10px; color: var(--tinta-suave); }
.lista-check li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Planes */
.plan { display: flex; flex-direction: column; position: relative; padding: 30px 26px; }
.plan .lista-check { flex: 1; margin-bottom: 24px; }
.plan-sub { color: var(--gris); font-size: 15px; }
.destacado { border: 2px solid var(--verde); box-shadow: 0 20px 40px -24px rgba(30, 122, 87, .55); }
.cinta { position: absolute; top: -13px; left: 26px; background: var(--verde); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.nota-centro { text-align: center; color: var(--tinta-suave); margin-top: 28px; }

/* Nombre */
.nombre { grid-template-columns: 0.8fr 1.2fr; }
.quipu { width: 100%; max-width: 360px; margin: 0 auto; }

/* Preguntas */
.preguntas { margin-top: 30px; }
details { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; margin-bottom: 10px; }
summary { cursor: pointer; padding: 18px 22px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--verde); font-size: 22px; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { padding: 0 22px 18px; margin: 0; color: var(--tinta-suave); }

/* Final y pie */
.final h2 { margin-top: 4px; }
.final .intro { margin: 0 auto 26px; }
.telefono { color: var(--gris); margin-top: 16px; }
.pie { border-top: 1px solid var(--linea); padding: 28px 0 40px; color: var(--gris); font-size: 14px; }
.pie-in { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pie-in p { margin: 0; flex: 1; }
.pie .marca { font-size: 18px; color: var(--tinta); }
.pie a { text-decoration: none; }

.wa-flotante { position: fixed; right: 18px; bottom: 18px; z-index: 30; width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .35); }
.wa-flotante svg { width: 30px; height: 30px; fill: #fff; }

/* Celular y tablet */
@media (max-width: 980px) {
  .portada-in, .dos-columnas, .nombre { grid-template-columns: 1fr; }
  .portada { padding-top: 40px; }
  .portada-imagen { margin: 10px 0 40px; }
  .rejilla, .rejilla-3 { grid-template-columns: 1fr 1fr; }
  .rejilla-4 { grid-template-columns: 1fr 1fr; }
  .quipu { max-width: 260px; }
}
@media (max-width: 720px) {
  .menu { display: none; }
  .barra-in { justify-content: space-between; }
  .rejilla, .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; }
  .seccion { padding: 64px 0; }
  .bajada { font-size: 17px; }
  .acciones .boton { flex: 1 1 100%; }
  .celular { width: 32%; right: 0; bottom: -14%; border-width: 5px; border-radius: 18px; }
  .pie-in { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---- Diseño 2026 (propuesta del editor) ---- */
:root {
  --noche: #0D1F18;
  --dorado: #D9A43A;
}
body { background: #fff; }
h1, h2, h3 { letter-spacing: -0.025em; }
.barra { background: rgba(255, 255, 255, .9); }
.k-oscura .intro { color: #B9CABF; }
.k-seccion .rejilla { margin-top: 0; }
.k-seccion-gris .tarjeta, .k-seccion-gris .negocio { box-shadow: 0 18px 40px -32px rgba(27, 25, 23, .4); }
.tarjeta, .negocio { border-radius: 20px; }
.pantalla { border-radius: 18px; }
details { border-radius: 16px; }
.nombre .intro { max-width: none; }

/* ---- Piezas del editor de Kipu (clases k-…) ---- */
/* ---------------------------------------------------------------------------
   Piezas "estilo moderno" del editor de Kipu (clases k-…). Toman los colores
   de la página (--verde, --tinta, --noche, --dorado…) y tienen un color de
   respaldo, así sirven en cualquier diseño.
   --------------------------------------------------------------------------- */
:root {
  --k-acento: var(--verde, #1E7A57);
  --k-acento-osc: var(--verde-oscuro, #165E43);
  --k-suave: var(--verde-suave, #E4F0EA);
  --k-tinta: var(--tinta, #1B1917);
  --k-texto2: var(--tinta-suave, #4A4540);
  --k-linea: var(--linea, #E5E0D6);
  --k-papel: var(--papel-2, #EFEBE3);
  --k-noche: var(--noche, #0D1F18);
  --k-dorado: var(--dorado, #D9A43A);
}

/* Píldoras (etiquetas redondas) */
.k-pildora { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: var(--k-suave); color: var(--k-acento-osc); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; margin-bottom: 16px; }
.k-pildora svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.k-pildora-clara { background: rgba(255, 255, 255, .08); color: #BDE8D3; border: 1px solid rgba(255, 255, 255, .14); }

/* Botones redondos */
.k-boton { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 999px; background: var(--k-acento); color: #fff; font-weight: 600; font-size: 16px; text-decoration: none; border: 2px solid transparent; line-height: 1.2; transition: transform .18s, box-shadow .18s, background .18s; cursor: pointer; }
.k-boton:hover { transform: translateY(-2px); background: var(--k-acento-osc); box-shadow: 0 14px 28px -12px rgba(30, 122, 87, .7); }
.k-boton svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.k-boton-dorado { background: var(--k-dorado); color: #1B1917; }
.k-boton-dorado:hover { background: #C8932B; box-shadow: 0 14px 28px -12px rgba(217, 164, 58, .8); }
.k-boton-borde { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.k-boton-borde:hover { background: rgba(255, 255, 255, .08); box-shadow: none; }
.k-boton-claro { background: #fff; color: var(--k-tinta); border-color: var(--k-linea); }
.k-boton-claro:hover { background: var(--k-papel); box-shadow: none; }
.k-boton-chico { padding: 9px 18px; font-size: 14px; }
.k-boton-ancho { width: 100%; }

/* Encabezado de sección centrado */
.k-cabecera { text-align: center; max-width: 760px; margin: 0 auto 46px; }
.k-cabecera h2 { margin-bottom: 14px; }
.k-cabecera .intro, .k-cabecera p { margin-left: auto; margin-right: auto; }
.k-resalte { color: var(--k-acento); }
.k-dorado { color: var(--k-dorado); }
.k-seccion { padding: 96px 0; }
.k-seccion-gris { background: var(--k-papel); }

/* Portada oscura */
.k-hero { position: relative; overflow: hidden; color: #fff; padding: 104px 0 96px;
  background: radial-gradient(900px 520px at 12% -5%, rgba(30, 122, 87, .6), transparent 62%),
              radial-gradient(700px 480px at 100% 25%, rgba(217, 164, 58, .22), transparent 60%),
              linear-gradient(160deg, var(--k-noche) 0%, #12291F 55%, #0A1510 100%); }
.k-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 52px 52px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%); }
.k-hero > * { position: relative; }
.k-hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.k-hero h1 { color: #fff; font-size: clamp(38px, 5.2vw, 62px); line-height: 1.08; margin: 0 0 22px; }
.k-hero h1 span { display: inline; }
.k-escribe { color: var(--k-dorado); white-space: nowrap; }
.k-problema { color: #E9E2CF; font-weight: 600; font-size: 17px; margin: 0 0 14px; }
.k-bajada { color: #C6D5CD; font-size: 18.5px; line-height: 1.6; max-width: 34em; margin: 0 0 30px; }
.k-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.k-insignias { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.k-insignias li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: #D8E6DE; }
.k-insignias li::before { content: "✓"; width: 18px; height: 18px; border-radius: 50%; background: var(--k-acento); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.k-insignias-claras li { background: #fff; border-color: var(--k-linea); color: var(--k-texto2); }
.k-hero-visual { position: relative; }
.k-pantalla { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); background: #fff; }
.k-celular { position: absolute; width: 28%; right: -3%; bottom: -12%; height: auto; border-radius: 24px; border: 6px solid #0A1510; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .7); }
.k-flotante { position: absolute; left: -6%; top: 12%; display: flex; align-items: center; gap: 12px; background: #fff; color: var(--k-tinta); border-radius: 18px; padding: 12px 18px 12px 12px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .55); border: 2px solid var(--k-dorado); max-width: 270px; }
.k-flotante .k-icono { width: 42px; height: 42px; border-radius: 50%; background: var(--k-dorado); display: grid; place-items: center; flex: none; }
.k-flotante .k-icono svg { width: 22px; height: 22px; fill: none; stroke: #1B1917; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.k-flotante b { display: block; font-size: 15px; line-height: 1.2; }
.k-flotante small { display: block; color: var(--k-texto2); font-size: 12.5px; }

/* Pasos numerados */
.k-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px; }
.k-paso { position: relative; }
.k-paso-num { width: 46px; height: 46px; border-radius: 50%; background: var(--k-acento); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; box-shadow: 0 0 0 7px var(--k-suave); margin: 0 0 22px 7px; position: relative; z-index: 1; }
.k-paso:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 66px; right: -20px; height: 2px; background: linear-gradient(90deg, var(--k-acento), var(--k-linea)); }
.k-paso h3 { font-size: 18px; margin: 0 0 8px; }
.k-paso p { color: var(--k-texto2); font-size: 15px; margin: 0; }
.k-franja { margin-top: 44px; background: var(--k-noche); color: #fff; border-radius: 20px; padding: 22px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; }
.k-franja div small { display: block; text-transform: uppercase; letter-spacing: .07em; font-size: 11.5px; color: #9FB6AA; margin-bottom: 4px; }
.k-franja div b { font-size: 19px; display: inline-block; padding-bottom: 6px; border-bottom: 3px solid var(--k-dorado); }
.k-franja .k-boton { margin-left: auto; }

/* Planes */
.k-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; align-items: stretch; }
.k-plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--k-linea); border-radius: 22px; padding: 30px 26px 26px; box-shadow: 0 18px 40px -30px rgba(27, 25, 23, .35); }
.k-plan-destacado { border: 2px solid var(--k-acento); box-shadow: 0 24px 50px -26px rgba(30, 122, 87, .55); }
.k-plan-etiqueta { position: absolute; top: -14px; right: 22px; background: var(--k-dorado); color: #1B1917; font-size: 12px; font-weight: 700; padding: 5px 13px; border-radius: 999px; }
.k-plan-icono { width: 46px; height: 46px; border-radius: 14px; background: var(--k-suave); display: grid; place-items: center; margin-bottom: 16px; }
.k-plan-icono svg { width: 24px; height: 24px; fill: none; stroke: var(--k-acento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.k-plan h3 { font-size: 22px; margin: 0 0 6px; }
.k-plan > p { color: var(--k-texto2); font-size: 15px; }
.k-plan-caja { background: var(--k-papel); border-radius: 14px; padding: 12px 14px; margin: 10px 0 6px; font-size: 14px; }
.k-plan-caja small { display: block; text-transform: uppercase; letter-spacing: .07em; font-size: 11px; color: var(--gris, #7A736B); font-weight: 600; }
.k-plan .lista-check { flex: 1; margin-bottom: 22px; }

/* Cifras sobre fondo oscuro */
.k-oscura { position: relative; overflow: hidden; color: #fff; background: radial-gradient(800px 400px at 10% 0%, rgba(30, 122, 87, .45), transparent 60%), var(--k-noche); }
.k-oscura h2 { color: #fff; }
.k-oscura .intro { color: #B9CABF; }
.k-cifras { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px; background: rgba(255, 255, 255, .04); overflow: hidden; }
.k-cifra { padding: 26px 26px 24px; border-right: 1px solid rgba(255, 255, 255, .1); }
.k-cifra:last-child { border-right: 0; }
.k-cifra b { display: block; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.1; color: var(--k-dorado); font-weight: 700; margin-bottom: 6px; }
.k-cifra span { color: #C2D1C8; font-size: 14.5px; }

/* Testimonios (se deslizan a los lados) */
.k-testimonios { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 18px; scrollbar-width: thin; }
.k-testimonio { scroll-snap-align: start; background: #fff; border: 1px solid var(--k-linea); border-radius: 22px; padding: 28px 26px 22px; display: flex; flex-direction: column; box-shadow: 0 18px 40px -30px rgba(27, 25, 23, .35); }
.k-testimonio::before { content: "“"; font-size: 60px; line-height: .6; color: var(--k-acento); opacity: .35; font-family: Georgia, serif; margin-bottom: 10px; }
.k-testimonio > p { color: var(--k-texto2); flex: 1; }
.k-autor { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--k-linea); padding-top: 16px; margin-top: 10px; }
.k-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--k-acento); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.k-autor b { display: block; font-size: 15px; }
.k-autor small { color: var(--gris, #7A736B); font-size: 13px; }

/* Tabla comparativa */
.k-tabla-caja { overflow-x: auto; border-radius: 20px; border: 1px solid var(--k-linea); background: #fff; }
.k-tabla { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.k-tabla th, .k-tabla td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--k-linea); }
.k-tabla thead th { background: var(--k-papel); font-size: 15px; }
.k-tabla tbody th { font-weight: 600; color: var(--k-tinta); }
.k-tabla td { color: var(--k-texto2); }
.k-tabla tr:last-child th, .k-tabla tr:last-child td { border-bottom: 0; }
.k-si { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--k-acento); color: #fff; font-size: 12px; font-weight: 700; }

/* Contactos flotantes de WhatsApp */
.k-contactos { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: grid; gap: 10px; }
.k-contacto { display: flex; align-items: center; gap: 12px; background: #fff; color: var(--k-tinta); text-decoration: none; border-radius: 999px; padding: 9px 20px 9px 10px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .35); border: 1px solid var(--k-linea); }
.k-contacto .k-wa { width: 40px; height: 40px; border-radius: 50%; background: #25D366; display: grid; place-items: center; flex: none; }
.k-contacto .k-wa svg { width: 22px; height: 22px; fill: #fff; }
.k-contacto b { display: block; font-size: 15px; line-height: 1.2; }
.k-contacto small { color: var(--gris, #7A736B); font-size: 12.5px; }

/* Pie oscuro */
.k-pie { background: var(--k-noche); color: #B9CABF; padding: 64px 0 28px; font-size: 15px; }
.k-pie-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.k-pie h4 { color: #fff; font-size: 15px; margin: 0 0 14px; }
.k-pie a { color: #DDE8E1; text-decoration: none; display: block; margin-bottom: 8px; }
.k-pie a:hover { color: #fff; }
.k-pie .marca { color: #fff; }
.k-pie-fin { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 40px; padding-top: 22px; font-size: 13.5px; color: #8EA69A; }

/* Preguntas en dos columnas (título a la izquierda, respuestas a la derecha) */
.k-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 56px; align-items: start; }
.k-faq-lado { position: sticky; top: 100px; }
.k-faq-lado h2 { margin-bottom: 14px; }
.k-faq-lado .intro { margin-bottom: 22px; }
.k-faq .preguntas { margin: 0; max-width: none; }

/* Barra que se llena arriba al bajar por la página */
.k-progreso { position: fixed; top: 0; left: 0; z-index: 60; height: 3px; width: 0; background: var(--k-acento); pointer-events: none; }

@media (max-width: 980px) {
  .k-hero { padding: 72px 0 70px; }
  .k-hero-in { grid-template-columns: 1fr; gap: 44px; }
  .k-flotante { left: 0; top: auto; bottom: -26px; }
  .k-celular { right: 0; }
  .k-cifras { grid-template-columns: 1fr 1fr; }
  .k-cifra:nth-child(2) { border-right: 0; }
  .k-cifra:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .k-pie-in { grid-template-columns: 1fr 1fr; }
  .k-faq { grid-template-columns: 1fr; gap: 28px; }
  .k-faq-lado { position: static; }
}
@media (max-width: 720px) {
  .k-seccion { padding: 68px 0; }
  .k-paso::after { display: none; }
  .k-acciones .k-boton { flex: 1 1 100%; }
  .k-franja .k-boton { margin-left: 0; width: 100%; }
  .k-cifras { grid-template-columns: 1fr; }
  .k-cifra { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .k-cifra:last-child { border-bottom: 0; }
  .k-pie-in { grid-template-columns: 1fr; }
  .k-contactos { right: 14px; bottom: 14px; }
  .k-contacto { padding: 8px; }
  .k-contacto div { display: none; }
  .k-escribe { white-space: normal; }
  .k-tabla { min-width: 0; font-size: 13.5px; }
  .k-tabla th, .k-tabla td { padding: 11px 10px; }
  .k-tabla thead th { font-size: 13.5px; }
}

/* ---- Animaciones (editor de Kipu) ---- */
/* ---------------------------------------------------------------------------
   Animaciones de la página de Kipu (las pone el editor con atributos data-*).
   - data-anim="subir|bajar|izquierda|derecha|aparecer|acercar|alejar|girar|voltear|desenfocar|rebotar"
       aparece al llegar a la pantalla. data-anim-retraso / data-anim-duracion en ms.
   - data-anim-bucle="flotar|latido|balanceo|girar|pulso|brillo|degradado"  se repite siempre.
   - data-escribir="frase 1|frase 2"                                el texto se escribe y se borra solo.
   - data-hover="elevar|agrandar|inclinar|brillo|sombra"            al pasar el mouse.
   - data-contar                                                     el número cuenta desde 0.
   Sin JavaScript (o con "reducir movimiento" en el equipo) todo se ve quieto.
   --------------------------------------------------------------------------- */
:is(.kipu-anim [data-anim], [data-anim].kipu-probando) {
  transition: opacity var(--kipu-dur, 700ms) cubic-bezier(.2, .65, .25, 1),
              transform var(--kipu-dur, 700ms) cubic-bezier(.2, .65, .25, 1),
              filter var(--kipu-dur, 700ms) ease;
  transition-delay: var(--kipu-retraso, 0ms);
}
:is(.kipu-anim [data-anim], [data-anim].kipu-probando):not(.kipu-visto) { opacity: 0; }
:is(.kipu-anim [data-anim="subir"], [data-anim="subir"].kipu-probando):not(.kipu-visto) { transform: translateY(48px); }
:is(.kipu-anim [data-anim="bajar"], [data-anim="bajar"].kipu-probando):not(.kipu-visto) { transform: translateY(-48px); }
:is(.kipu-anim [data-anim="izquierda"], [data-anim="izquierda"].kipu-probando):not(.kipu-visto) { transform: translateX(-70px); }
:is(.kipu-anim [data-anim="derecha"], [data-anim="derecha"].kipu-probando):not(.kipu-visto) { transform: translateX(70px); }
:is(.kipu-anim [data-anim="acercar"], [data-anim="acercar"].kipu-probando):not(.kipu-visto) { transform: scale(.82); }
:is(.kipu-anim [data-anim="alejar"], [data-anim="alejar"].kipu-probando):not(.kipu-visto) { transform: scale(1.15); }
:is(.kipu-anim [data-anim="girar"], [data-anim="girar"].kipu-probando):not(.kipu-visto) { transform: rotate(-10deg) scale(.9); }
:is(.kipu-anim [data-anim="voltear"], [data-anim="voltear"].kipu-probando):not(.kipu-visto) { transform: perspective(900px) rotateX(65deg); }
:is(.kipu-anim [data-anim="desenfocar"], [data-anim="desenfocar"].kipu-probando):not(.kipu-visto) { filter: blur(14px); }
:is(.kipu-anim [data-anim="rebotar"], [data-anim="rebotar"].kipu-probando).kipu-visto {
  animation: kipu-rebotar var(--kipu-dur, 700ms) cubic-bezier(.3, 1.6, .5, 1) var(--kipu-retraso, 0ms) both;
}
@keyframes kipu-rebotar { from { transform: scale(.6); } to { transform: none; } }

/* Mientras entra, no se mezcla con la animación que se repite. */
:is(.kipu-anim [data-anim], [data-anim].kipu-probando):not(.kipu-visto)[data-anim-bucle] { animation: none; }
[data-anim-bucle="flotar"] { animation: kipu-flotar 3.6s ease-in-out infinite; }
[data-anim-bucle="latido"] { animation: kipu-latido 1.6s ease-in-out infinite; }
[data-anim-bucle="balanceo"] { animation: kipu-balanceo 3s ease-in-out infinite; transform-origin: 50% 0; }
[data-anim-bucle="girar"] { animation: kipu-girar 9s linear infinite; }
[data-anim-bucle="pulso"] { animation: kipu-pulso 2.2s ease-out infinite; }
[data-anim-bucle="brillo"] { position: relative; overflow: hidden; }
[data-anim-bucle="brillo"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); animation: kipu-brillo 3.2s ease-in-out infinite;
}
[data-anim-bucle="degradado"] { background-size: 220% 220% !important; animation: kipu-degradado 16s ease-in-out infinite; }
@keyframes kipu-degradado { 0%, 100% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } }
@keyframes kipu-flotar { 50% { transform: translateY(-12px); } }
@keyframes kipu-latido { 50% { transform: scale(1.06); } }
@keyframes kipu-balanceo { 25% { transform: rotate(3deg); } 75% { transform: rotate(-3deg); } }
@keyframes kipu-girar { to { transform: rotate(360deg); } }
@keyframes kipu-pulso { 0% { box-shadow: 0 0 0 0 rgba(30, 122, 87, .45); } 100% { box-shadow: 0 0 0 18px rgba(30, 122, 87, 0); } }
@keyframes kipu-brillo { 60%, 100% { transform: translateX(120%); } }

/* Texto que se escribe solo: data-escribir="frase 1|frase 2|frase 3" */
[data-escribir]::after { content: ""; display: inline-block; width: .07em; height: .95em; margin-left: .08em; background: currentColor; vertical-align: -.1em; animation: kipu-cursor 1s steps(1) infinite; }
@keyframes kipu-cursor { 50% { opacity: 0; } }

/* Al pasar el mouse */
[data-hover] { transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; }
[data-hover="elevar"]:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -18px rgba(27, 25, 23, .35); }
[data-hover="agrandar"]:hover { transform: scale(1.05); }
[data-hover="inclinar"]:hover { transform: perspective(700px) rotateX(4deg) rotateY(-6deg); }
[data-hover="brillo"]:hover { filter: brightness(1.1) saturate(1.15); }
[data-hover="sombra"]:hover { box-shadow: 0 0 0 4px rgba(30, 122, 87, .25), 0 18px 40px -20px rgba(27, 25, 23, .4); }

@media (prefers-reduced-motion: reduce) {
  .kipu-anim [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; animation: none !important; }
  [data-anim-bucle], [data-anim-bucle]::after { animation: none !important; }
}

/* ---- Ajustes del sitio ---- */
body { font-family: 'Poppins', system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6, .marca span { font-family: 'Poppins', system-ui, sans-serif; }
/* ---- Cambios hechos en el editor ---- */