/* KONDOR · la landing nueva y las guías. La piel es la de KONDOR-Landing.html (lo publicado, e018923):
   Archivo con su eje de ancho en todo, IBM Plex Mono sólo para datos chicos, blanco y gris, verde #34d399. */
:root{
  --tinta:#1c1c24; --gris:#f8f8f8; --texto2:#565660; --texto3:#6f6f78;
  --linea:#e4e4e0; --linea2:#d7d7d2; --verde:#34d399; --verde-h:#2fc08b; --verde-o:#2e7d5b; --verde-o2:#3c906c;
  --verde-cl:#e9f4ee; --sobre-verde:#12241c; --error:#a3401f;
  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --w:1248px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--gris);color:var(--tinta);font-family:var(--sans);font-variation-settings:'wdth' 100;font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
/* las pinturas van en <picture> (AVIF con JPG de respaldo); la imagen es la que arma el CSS. El <source> sólo elige el
   archivo: fuera de la grilla, para que no ocupe un lugar de la tarjeta */
picture{display:contents}
picture>source{display:none}
a{color:var(--verde-o);text-decoration:none}
a:hover{color:#245f47}
:focus-visible{outline:2px solid var(--verde-o);outline-offset:2px}
.hero :focus-visible{outline-color:#ffffff}
::selection{background:rgba(52,211,153,0.32)}
/* los títulos van anchos, como «El sistema.» y «Precio.» */
h1,h2,h3{font-family:var(--sans);font-variation-settings:'wdth' 125;font-weight:600;letter-spacing:-0.02em;line-height:1.06;margin:0;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit}
.w{max-width:var(--w);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ceja{font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--texto3)}
.rotulo{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--texto3)}

/* Las marcas, exactamente como en KONDOR-Landing.html (COMUNICACION §1 y §2): KONDOR en tinta y el apellido en
   su degradé, que va y viene despacio. Enterprise va quieto. Con menos movimiento pedido, todos quietos. */
.mk{font-weight:600;white-space:nowrap}
.g-pro,.g-max,.g-ovino,.g-ent{background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.g-pro{background-image:linear-gradient(96deg,#c2410c 0%,#d97706 50%,#c2410c 100%);animation:kgradmax 7s ease-in-out infinite}
.g-max{background-image:linear-gradient(96deg,#7c3aed 0%,#4c1d95 50%,#7c3aed 100%);animation:kgradmax 7s ease-in-out infinite}
.g-ovino{background-image:linear-gradient(96deg,#3768cc 0%,#1b3a7a 50%,#3768cc 100%);animation:kgradmax 7s ease-in-out infinite}
.g-ent{background-image:linear-gradient(96deg,#6f6f78 0%,#1c1c24 50%,#6f6f78 100%);background-position:0% 50%}
@keyframes kgradmax{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion: reduce){.g-pro,.g-max,.g-ovino{animation:none;background-position:0% 50%}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .g-pro,.g-max,.g-ovino,.g-ent{background:none;color:inherit;-webkit-text-fill-color:currentColor}}

/* Botones: el verde de la acción de la landing de hoy */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid transparent;
  background:var(--verde);color:var(--sobre-verde);font-family:var(--sans);font-size:15.5px;font-weight:600;text-decoration:none;
  border-radius:11px;cursor:pointer;white-space:nowrap;transition:background 180ms ease}
.btn:hover{background:var(--verde-h);color:var(--sobre-verde)}
.btn--borde{background:#ffffff;color:var(--tinta);border-color:var(--linea2)}
.btn--borde:hover{background:var(--gris);color:var(--tinta)}
.enlace{color:var(--verde-o);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ===== LA BARRA, la de KONDOR-Landing.html: transparente sobre la portada con el logo en blanco,
   sólida al bajar, con la línea de avance al pie ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:calc(env(safe-area-inset-top,0px) + 14px);
  background:rgba(248,248,248,0.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--linea);
  transition:background 220ms ease,border-color 220ms ease}
.nav-in{max-width:1240px;margin:0 auto;height:50px;display:flex;align-items:center;gap:18px;padding:0 20px}
.nav-logo{display:inline-flex;align-items:center;min-height:44px;gap:10px;color:var(--tinta);text-decoration:none;flex:none;transition:color 220ms ease}
.nav-logo svg{width:65px;height:22px}
.nav-logo span{font-variation-settings:'wdth' 125;font-weight:600;font-size:17px;letter-spacing:.16em;line-height:1}
.nav-links,.nav-acc{display:flex;align-items:center;gap:18px}
.nav-links{margin-left:auto}
.nav-links a,.nav-ing{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;color:var(--texto2);font-size:13px;font-weight:500;transition:color 160ms ease}
.nav-links a:hover,.nav-ing:hover{color:var(--tinta)}
/* Planes, un poco menos alto que la barra para que no quede pegado a su borde; el área para tocar sigue de 44 px */
.nav-cta{position:relative;display:inline-flex;align-items:center;min-height:36px;padding:0 17px;border-radius:10px;background:var(--verde);color:var(--sobre-verde);
  font-size:13px;font-weight:600;white-space:nowrap;transition:background 220ms ease}
.nav-cta:hover{background:var(--verde-h);color:var(--sobre-verde)}
.nav-cta::after{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}
.nav-prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--verde);transform:scaleX(0);transform-origin:left;transition:transform 120ms linear}
.nav--sobre{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav--sobre .nav-logo,.nav--sobre .nav-links a,.nav--sobre .nav-ing{color:#ffffff}
/* sobre el cielo del video, un degradé oscuro suave detrás de la barra, que baja 180 px y se apaga de a poco, sin franja.
   Medido cuadro por cuadro con el velo de la portada: el logo y los enlaces quedan arriba de 4,5:1 en todo el video (en el
   teléfono, donde el cielo ocupa más, el degradé es un poco más fuerte). Se va cuando la barra deja la portada. */
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:180px;z-index:-1;pointer-events:none;opacity:0;transition:opacity 220ms ease;
  background:linear-gradient(180deg,rgba(8,10,14,0.74) 0%,rgba(8,10,14,0.64) 30%,rgba(8,10,14,0.38) 55%,rgba(8,10,14,0.13) 80%,rgba(8,10,14,0) 100%)}
.nav--sobre::before{opacity:1}
@media (max-width:759px){.nav::before{background:linear-gradient(180deg,rgba(8,10,14,0.8) 0%,rgba(8,10,14,0.7) 30%,rgba(8,10,14,0.42) 55%,rgba(8,10,14,0.15) 80%,rgba(8,10,14,0) 100%)}}
/* y la misma sombra que el título de la portada */
.nav--sobre .nav-logo,.nav--sobre .nav-links a,.nav--sobre .nav-ing{text-shadow:0 1px 3px rgba(0,0,0,0.62),0 2px 12px rgba(0,0,0,0.5)}
.nav--sobre .nav-logo svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,0.55))}
.nav--sobre .nav-links a:hover,.nav--sobre .nav-ing:hover{color:rgba(255,255,255,0.8)}
.nav--sobre .nav-cta{box-shadow:0 2px 12px rgba(0,0,0,0.34)}
.nav--sobre .nav-prog{background:rgba(255,255,255,0.7)}
@media (max-width:759px){.nav-links{display:none}.nav-acc{margin-left:auto}}
@media (max-width:420px){.nav-in{padding:0 14px;gap:10px}.nav-logo{gap:7px}.nav-logo svg{width:52px;height:18px}.nav-logo span{font-size:15px;letter-spacing:.1em}
  .nav-acc{gap:12px}.nav-cta{padding:0 13px}}
@media (max-width:379px){.nav-logo svg{width:42px;height:15px}.nav-logo span{font-size:14px;letter-spacing:.08em}.nav-acc{gap:10px}}

/* ===== CLAUDE STARTUPS arriba del pie de /ovinos/ y /prensa/, con el estilo de la franja de la portada (.startups) ===== */
.startups-pie{padding:26px 0 28px;background:#ffffff;text-align:center;font-size:13.5px;line-height:1.5;color:var(--texto2)}
.startups-pie p{text-wrap:pretty}
.startups-pie b,.startups-pie .mk{font-weight:600;color:var(--tinta)}
@media (min-width:900px){.startups-pie p{white-space:nowrap}}

/* ===== EL PIE, el de KONDOR-Landing.html: blanco, el cóndor a la izquierda y los enlaces en gris ===== */
.pie{background:#ffffff;border-top:1px solid var(--linea);padding:36px 0 32px;font-size:14px;color:var(--texto2)}
.pie-arriba{display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between}
.pie-marca{min-width:220px}
.pie-marca a{display:inline-flex;align-items:center;gap:14px;color:var(--tinta)}
.pie-marca svg{width:72px;height:24px}
.pie-marca span{font-variation-settings:'wdth' 125;font-weight:600;font-size:18px;letter-spacing:.16em;line-height:1}
.pie-marca p{margin-top:8px;line-height:1.7}
/* la frase de la marca (MARCA §14.5), chica, debajo del cóndor */
.pie-marca .pie-frase{margin-top:10px;font-variation-settings:'wdth' 125;font-weight:600;font-size:14px;letter-spacing:-0.01em;color:var(--tinta)}
.pie-marca .pie-frase+p{margin-top:2px}
.pie nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px}
.pie nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--texto2)}
.pie nav a:hover{color:var(--tinta)}
.pie-fin{margin-top:26px;padding-top:18px;border-top:1px solid var(--linea);font-size:13px;color:var(--texto3);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
/* las redes, de línea como los íconos de la página, en el gris del pie; el área de cada una es de 44 px */
.pie-redes{display:flex;gap:4px;margin-right:-10px}
.pie-redes a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;color:var(--texto2);transition:color 160ms ease,background 160ms ease}
.pie-redes a:hover{color:var(--tinta);background:var(--gris)}
.pie-redes svg{width:22px;height:22px}

/* ===== LAS GUÍAS, con la misma piel: Archivo, blanco y gris, títulos anchos ===== */
.pag{padding-top:calc(env(safe-area-inset-top,0px) + 64px)}
.pag main{min-height:calc(100svh - 260px)}
.pag h1{font-size:clamp(28px,4vw,42px);line-height:1.08}
.guia{max-width:740px;margin:0 auto;padding:32px 24px 72px}
.volver{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600}
.portada{position:relative;margin:14px 0 26px}
.portada img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#f1f1ef;border-radius:14px}
.provisoria{position:absolute;left:10px;bottom:10px;background:#ffffff;color:var(--texto2);font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:6px}
.guia-baj{margin-top:14px;font-size:clamp(18px,2vw,20px);line-height:1.5;color:var(--texto2);text-wrap:pretty}
.guia-meta{margin-top:12px;font-size:15px;color:var(--texto2)}
.texto{margin-top:30px;font-size:18px;line-height:1.7}
.texto h2{font-size:clamp(20px,2.4vw,26px);margin:40px 0 12px}
.texto p+p{margin-top:16px}
.texto ul,.texto ol{margin:16px 0;padding-left:1.3em;display:grid;gap:8px}
.texto strong{font-weight:600}
/* los artículos de producto: el rótulo de la novedad, como en los posteos; el video vertical del posteo, angosto en la
   computadora y a todo el ancho en el teléfono; las tablas, que se deslizan de costado si no entran */
.guia-nov{display:inline-block;margin-bottom:12px;padding:5px 10px 4px;border-radius:99px;background:var(--verde-o);color:#ffffff;font-size:11px;font-weight:700;line-height:1;letter-spacing:.14em;text-transform:uppercase}
.texto .video{margin:30px auto;max-width:400px}
.texto .video video,.texto .video img{display:block;width:100%;height:auto;aspect-ratio:1080/1350;background:#f1f1ef;border:1px solid var(--linea);border-radius:14px}
.texto .video figcaption{margin-top:10px;font-size:15px;line-height:1.45;color:var(--texto2);text-wrap:pretty}
.tabla{margin:22px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4}
.tabla th,.tabla td{padding:10px 16px 10px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--linea)}
.tabla thead th{font-size:13px;font-weight:600;color:var(--texto2);border-bottom-color:var(--tinta)}
.tabla tbody th{font-weight:400}
.tabla .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tabla tr>:last-child{padding-right:0}
/* la comparación por tipo de la guía del software ovino (§C del pedido): más ancha que el texto, KONDOR resaltado, las
   respuestas como pastillas; en el teléfono, cada criterio es una tarjeta con sus respuestas debajo */
.tabla--ancha{overflow:visible}
.tabla--ancha th,.tabla--ancha td{padding:7px 12px}
.tabla--ancha tr>:first-child{padding-left:0;width:24%}
.tabla--ancha tr>:last-child{padding-right:12px}
.tabla--ancha tbody th{font-weight:600}
.tabla--ancha .k{background:var(--verde-cl);font-weight:600}
.tabla--ancha thead .k{color:var(--tinta)}
.p{display:inline-block;padding:1px 10px;border-radius:99px;font-size:14px;line-height:1.5;white-space:nowrap}
.p-si{background:var(--verde-cl);color:var(--verde-o)}
.p-no{background:#f7e6e0;color:#8f3519}  /* rojo suave, de --error (#a3401f) (§D) */
.p-medio{background:#fbf0d8;color:#80560a}
@media (min-width:760px){.texto .tabla--ancha{width:min(1080px,calc(100vw - 48px));margin-left:calc(50% - min(540px,50vw - 24px))}}
@media (max-width:759px){
  .tabla--ancha table,.tabla--ancha tbody,.tabla--ancha tr,.tabla--ancha th,.tabla--ancha td{display:block;width:auto}
  .tabla--ancha thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .tabla--ancha tr{margin-bottom:12px;padding:14px 16px 0;background:#ffffff;border:1px solid var(--linea);border-radius:14px;overflow:hidden}
  .tabla--ancha tbody tr>th:first-child{width:auto;padding:0 0 8px;border:0;font-size:17px;line-height:1.35}
  .tabla--ancha td{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:7px 0;border-bottom:0;border-top:1px solid var(--linea)}
  .tabla--ancha td::before{content:attr(data-col);font-size:14px;line-height:1.35;color:var(--texto2)}
  .tabla--ancha td.k{display:block;margin:0 -16px;padding:9px 16px 10px;border-top-color:transparent;line-height:1.45}
  .tabla--ancha td.k::before{display:block;margin-bottom:2px;font-weight:400}
}
/* «KONDOR en pocas palabras» de un artículo, en un recuadro aparte del texto */
.recuadro{margin:36px 0;padding:6px 22px 8px;background:#ffffff;border:1px solid var(--linea);border-radius:14px}
.texto .recuadro h2{margin-top:18px}
/* /ovinos/: la lista con aire entre renglones, quién lo dice debajo de la cita y el botón a Planes */
.texto ul.ovinos{gap:12px}
.texto .cita-quien{margin-top:-18px;font-size:15px;color:var(--texto2)}
.texto .ovinos-btn{margin-top:28px}
.destacado{margin:32px 0;padding:18px 0;border-top:1px solid var(--tinta);border-bottom:1px solid var(--linea);font-size:clamp(20px,2.4vw,24px);font-weight:500;line-height:1.34;font-variation-settings:'wdth' 125;letter-spacing:-0.01em}
.guia-fin{margin-top:44px;padding-top:20px;border-top:1px solid var(--linea);font-size:17px}
.tarjetas{display:grid;gap:16px;margin-top:26px}
@media (min-width:760px){.tarjetas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tarjeta{display:grid;gap:10px;color:var(--tinta);background:#ffffff;border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.tarjeta:hover{border-color:var(--linea2);color:var(--tinta)}
.tarjeta img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#f1f1ef}
.tarjeta div{padding:4px 18px 18px;display:grid;gap:6px}
.tarjeta b{font-size:17px;font-weight:600;line-height:1.3}
.tarjeta span{font-size:13px;color:var(--texto3)}
.tarjeta p{font-size:15px;line-height:1.45;color:var(--texto2)}
/* El pasto del mes, la tarjeta fija de Publicaciones: sin foto y a todo el ancho */
.tarjeta--pasto{grid-column:1/-1}
.tarjeta--pasto div{padding:20px 22px;gap:4px}
.tarjeta--pasto b{font-size:20px}
.tarjeta--pasto p{margin:4px 0 0;max-width:62ch}

.nav-links a[aria-current="page"]{color:var(--tinta)}
.no-hay{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
/* KONDOR en pocas palabras: Nosotros y /prensa/ */
.datos{max-width:var(--w);margin:0 auto;padding:40px 24px 48px;border-top:1px solid var(--linea)}
.datos h2{font-size:clamp(24px,3.2vw,32px)}
.datos dl{margin-top:22px;max-width:880px}
.datos dl>div{display:grid;gap:4px;padding:14px 0;border-top:1px solid var(--linea)}
.datos dl>div:last-child{border-bottom:1px solid var(--linea)}
@media (min-width:720px){.datos dl>div{grid-template-columns:200px minmax(0,1fr);gap:24px}}
.datos dt{font-size:15px;font-weight:600;line-height:1.6;color:var(--tinta)}
.datos dd{margin:0;font-size:17px;line-height:1.6;color:var(--texto2);text-wrap:pretty}
.datos [data-escrito]{white-space:nowrap}
.datos dd a{font-weight:600}
/* Prensa */
.prensa{padding-top:48px;padding-bottom:40px}
.prensa>*{max-width:760px}
.prensa h2{margin-top:36px;font-size:clamp(20px,2.4vw,24px)}
.prensa>p:not(.guia-baj){margin-top:12px;font-size:18px;line-height:1.65;color:var(--texto2);text-wrap:pretty}
.prensa p a{font-weight:600}
.prensa .prensa-frase{font-size:clamp(20px,2.3vw,24px);font-weight:500;line-height:1.38;color:var(--tinta);font-variation-settings:'wdth' 125;letter-spacing:-0.01em}
.prensa+.datos{padding-top:8px;border-top:0}
.logos{margin-top:16px;display:grid;gap:16px}
@media (min-width:640px){.logos{grid-template-columns:1fr 1fr}}
.logos figure{margin:0;border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.logos img{display:block;width:100%;height:auto;padding:48px 15%;box-sizing:border-box}
.logo-claro img{background:#ffffff}
.logo-oscuro img{background:var(--tinta)}
.logos figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding:10px 16px;border-top:1px solid var(--linea);font-size:14px;color:var(--texto2)}
.logos figcaption a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.datos+.prensa{padding-top:0}
/* En corto, la respuesta primero en cada guía */
.corto{margin-top:26px;padding:16px 0 18px;border-top:1px solid var(--tinta);border-bottom:1px solid var(--linea)}
.corto p+p{margin-top:8px;font-size:18px;line-height:1.6;color:var(--tinta);text-wrap:pretty}
