:root{
  --pine:#1c5c49; --pine-lt:#7fc9ae;
  --night:#0d1110; --paper:#f7f7f5;
  --ink:#121514; --ink-2:#4a5250; --ink-3:#666e6b;
  --line:#d8d8d2; --line-dk:#2a3331;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s6:3rem; --s8:4rem; --s12:6rem;
  --gutter:clamp(1.25rem,4.5vw,4rem);
  --col-gap:clamp(1rem,2.5vw,2rem);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* --ink-3 es el gris de los rotulos chicos y de la columna "lo habitual".
     Vale 666e6b porque es el tono mas tenue que todavia da 4.5:1 sobre --paper
     Y sobre el eeeeea de la seccion Metodo. Los dos valores anteriores daban
     2.71:1 y 3.34:1 medidos en pantalla: se veian bien y no cumplian AA.
     Aclararlo vuelve a romperlo. */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── Transicion entre documentos (View Transitions API) ─────────────────────
   Ir de la portada a /terminos dejaba un parpadeo en blanco. Ahora el contenido
   cruza en fundido y la barra oscura con la marca NO se mueve: se queda
   anclada mientras el resto cambia.
   Eso es lo que hace view-transition-name. No es una animacion: es decirle al
   navegador que .brand de esta pagina y .brand de la otra son el MISMO
   elemento, asi que en vez de fundir uno sobre otro, lo transporta. El nombre
   tiene que ser unico por pagina, y .top y .brand aparecen una sola vez en cada
   una de las ocho.
   Sin soporte —hoy Firefox— no pasa absolutamente nada: navega como siempre.
   ⚠ Este bloque esta DUPLICADO en sitio.css y en legal.css. La portada y las
   paginas de producto cargan sitio.css; las legales, legal.css. Si se toca uno,
   hay que tocar el otro. */
@view-transition{navigation:auto}
.top{view-transition-name:barra}
.brand{view-transition-name:marca}
/* El que sale se va con un desenfoque corto; el que entra llega nitido. Es el
   unico blur que cubre toda la pantalla, y se banca: lo que se desenfoca es la
   CAPTURA de la pagina, una textura ya rasterizada, no el DOM vivo. Por eso 6px
   y 280 ms y no mas: a partir de ahi se nota el repintado en un telefono barato
   y el efecto deja de ser gratis. */
::view-transition-old(root){animation:vt-sale .28s var(--ease) both}
::view-transition-new(root){animation:vt-entra .32s var(--ease) both}
@keyframes vt-sale{to{opacity:0;filter:blur(6px)}}
@keyframes vt-entra{from{opacity:0;filter:blur(6px)}}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
}

/* ── Lupa sobre las maquetas de producto ────────────────────────────────────
   Las maquetas crecen un poco cuando el puntero se posa encima. Es scale y
   sombra: el navegador lo resuelve en el compositor, sin recalcular la pagina.
   Solo bajo (hover:hover). En un telefono el :hover se queda PEGADO despues de
   tocar —no hay evento que lo saque— y la maqueta quedaria agrandada para
   siempre. Ahi el efecto lo maneja movimiento.js contra el scroll. */
.lupa{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
@media (hover:hover){
  .lupa:hover{transform:scale(1.045);
    box-shadow:0 1.5rem 3rem -1rem rgb(13 17 16 / .22)}
}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 clamp(1rem,.96rem + .2vw,1.0625rem)/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Source Serif 4",Georgia,serif;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--pine);outline-offset:4px}
.night :focus-visible{outline-color:var(--pine-lt)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:var(--s1);z-index:50;background:#fff;color:var(--ink);padding:.6rem 1rem}

.grid{max-width:78rem;margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--col-gap)}
@media (min-width:48rem){ .grid{grid-template-columns:repeat(12,1fr)} }

/* Barra fija. Se queda SIEMPRE oscura, no traslucida: arranca fundida con el
   hero (que es oscuro) y se despega sola al entrar en las secciones claras,
   sin cambiar de color a mitad de scroll ni depender de un blur. */
/* padding-block bajo a proposito: la altura de la barra la fija ahora el
   min-height:44px de los enlaces (ver .menu a). Antes era al reves y los
   objetivos tactiles quedaban en 34px, bajo el minimo de 44 de Apple HIG. */
.top{position:sticky;top:0;z-index:30;background:var(--night);color:#eef1ef;
  padding-block:.4rem;border-bottom:1px solid transparent}
.top.pegada{border-bottom-color:var(--line-dk)}
/* Fila, no la reticula de 12: con 4 enlaces en 4 columnas el menu envolvia y
   la barra fija se comia 113px de pantalla. Hereda ancho y margenes de .grid. */
.top .grid{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  min-height:44px;
  font-family:"Source Serif 4",Georgia,serif;
  font-weight:700;font-size:1.05rem;letter-spacing:.06em;white-space:nowrap}
.brand .isotipo{flex:none;margin-bottom:.1em}
.brand em{font-style:normal;font-weight:400;opacity:.62}
.menu{display:flex;align-items:center;gap:.1rem}
/* min-height 44px = minimo tactil (Apple HIG 44pt / Material 48dp). El texto
   se mantiene del mismo tamano: lo que crece es el area de toque, no la letra. */
.menu a{position:relative;text-decoration:none;padding:.45rem .5rem;
  min-height:44px;display:inline-flex;align-items:center;
  font-size:.8125rem;color:#b9c4c0;white-space:nowrap;transition:color .18s var(--ease)}
.menu a:hover{color:#eef1ef}
/* La seccion en pantalla se marca con una linea, no con color: a este tamano
   el cambio de tono solo no se nota. */
.menu a[aria-current="true"]{color:#eef1ef}
.menu a[aria-current="true"]::after{content:"";position:absolute;left:.5rem;right:.5rem;bottom:.62rem;
  height:1px;background:var(--pine-lt)}
.menu a.cta{color:var(--pine-lt)}
.menu a.cta:hover{color:#eef1ef}
.menu .largo{display:none}
/* En movil sobra "Inicio": la marca ya lleva arriba, y sin ese enlace los tres
   que quedan entran en una sola linea hasta 360px. */
@media (min-width:48rem){
  .menu{gap:.6rem}
  .menu a{font-size:.875rem;padding:.45rem .6rem}
  .menu .largo{display:inline}
  .menu .corto{display:none}
}
@media (max-width:47.99rem){
  .menu a.ini{display:none}
  .brand{font-size:.95rem}
  .menu a{font-size:.75rem;padding:.45rem .35rem}
}

/* Con barra fija, un ancla dejaria el titulo debajo de ella. */
:target,[id]{scroll-margin-top:4.5rem}

.night{background:var(--night);color:#eef1ef}
.hero{position:relative;overflow:hidden;padding-block:clamp(var(--s8),12vw,9rem) clamp(var(--s6),8vw,6rem)}
/* inset vertical negativo: le da holgura para que el translate3d de --rejilla
   (ver js/movimiento.js) nunca descubra un borde arriba ni abajo. Sin JS la
   variable no existe, cae en 0px y la retícula queda donde siempre estuvo. */
.hero::before{content:"";position:absolute;inset:-14% 0;pointer-events:none;
  background-image:linear-gradient(var(--line-dk) 1px,transparent 1px),linear-gradient(90deg,var(--line-dk) 1px,transparent 1px);
  background-size:clamp(48px,7vw,88px) clamp(48px,7vw,88px);
  transform:translate3d(0,var(--rejilla,0px),0);
  -webkit-mask-image:radial-gradient(120% 90% at 78% 12%,#000 0%,transparent 68%);
  mask-image:radial-gradient(120% 90% at 78% 12%,#000 0%,transparent 68%)}
.hero .grid{position:relative}
.hero h1{grid-column:1/-1;font-weight:600;font-size:clamp(2.4rem,1.2rem + 5.4vw,5.5rem);letter-spacing:-.028em}
.hero h1 .l{display:block}
.hero .bajada{grid-column:1/-1;margin-top:var(--s4);max-width:52ch;font-size:clamp(1.05rem,1rem + .4vw,1.3rem);color:#b9c4c0}
@media (min-width:48rem){ .hero h1{grid-column:1/11} .hero .bajada{grid-column:1/8} }

/* ---------- El teléfono del hero ---------- */
/* No es una foto de stock ni un mockup comprado: es la pantalla REAL de la PWA
   de inventario —fila con descripción, SKU, el stock que dice el ERP y la
   cantidad recién contada— y el aviso de "sin conexión" existe de verdad en la
   app. Esa es la prueba del titular: un sistema que se usa en el patio tiene
   que funcionar sin señal.
   Va dibujado en HTML/CSS y no como <img> por dos razones: pesa cero bytes y el
   texto queda nítido en cualquier densidad de pantalla. Los datos son de
   ejemplo, porque /terminos promete que ninguna pantalla del sitio lleva datos
   de clientes reales. */
.aparato{grid-column:1/-1;margin-top:var(--s6);justify-self:center;width:min(16.5rem,76%)}
@media (min-width:64rem){
  .aparato{grid-column:8/13;grid-row:2;justify-self:end;align-self:end;
    margin-top:0;width:min(17.5rem,100%);
    /* Se mete en el respiro de abajo del hero y el overflow:hidden lo recorta.
       Así el aparato se ve grande sin estirar el alto de la sección. */
    margin-bottom:calc(-1 * clamp(2rem,5vw,4.5rem))}
}
.marco{border-radius:28px;padding:7px;background:#161d1c;border:1px solid #34413e;
  box-shadow:0 28px 55px -18px rgba(0,0,0,.8)}
.pantalla{border-radius:22px;overflow:hidden;background:#f4f6f8;
  font-size:.6875rem;line-height:1.35}
/* Verde de marca de la PWA (#28461E), no el pino del sitio: lo que se muestra
   es la app del cliente, no esta página. */
.app-top{background:#28461E;color:#fff;padding:.85rem .7rem .6rem;
  display:flex;flex-direction:column;gap:.15rem}
.app-top b{font-weight:600;font-size:.75rem;letter-spacing:.01em}
.app-top span{color:#cfe0d4;font-size:.625rem}
.app-off{background:#fbe7c2;color:#57401a;padding:.5rem .7rem;font-size:.625rem;
  display:flex;gap:.35rem;align-items:flex-start;border-bottom:1px solid #ead4ad}
.app-lista{padding:.35rem .5rem .8rem}
.art{display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid #e3e7ea;
  border-radius:9px;padding:.5rem .55rem;margin-top:.4rem}
.art > div{min-width:0;flex:1}
.art b{display:block;color:#121514;font-weight:600;font-size:.6875rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art span{display:block;margin-top:.15rem;color:#5a6360;font-size:.625rem}
.art i{flex:none;font-style:normal;font-weight:600;font-size:.75rem;
  min-width:2.1rem;text-align:center;padding:.25rem .3rem;border-radius:7px;
  background:#eef1ee;color:#616a68} /* 4.89:1; el #6d7674 de antes daba 4.11 */
/* Contado = verde sólido. Es el único estado que el del patio mira de reojo
   para saber qué le falta, así que tiene que leerse a un metro de distancia. */
.art.hecho i{background:#28461E;color:#fff}
.art.cero i{background:#f6e2d6;color:#8a4b3a}
.pie-aparato{margin-top:.9rem;text-align:center;font-size:.8125rem;color:#93a7a0}

/* ---------- La pieza: el registro que se hacía dos veces ---------- */
.tesis{padding-block:clamp(var(--s6),7vw,var(--s8)) clamp(var(--s8),10vw,7rem)}
.tesis .frase{grid-column:1/-1;font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(1.35rem,1.1rem + 1.3vw,2.1rem);line-height:1.25;letter-spacing:-.015em;max-width:24ch}
.tesis .frase b{font-weight:600;color:var(--pine-lt)}
.escena{grid-column:1/-1;margin-top:var(--s6)}
@media (min-width:48rem){ .tesis .frase{grid-column:1/6} .escena{grid-column:6/13;margin-top:0} }
.escena svg{width:100%;height:auto;overflow:visible}

/* Solo opacidad: un transform de CSS sobre un <g> PISA el transform del SVG
   y apila todas las filas en la misma coordenada. Costó encontrarlo. */
.pl{opacity:0}
.vis .pl{opacity:1;transition:opacity .55s var(--ease)}
.vis .pl:nth-child(1){transition-delay:.10s} .vis .pl:nth-child(2){transition-delay:.18s}
.vis .pl:nth-child(3){transition-delay:.26s} .vis .pl:nth-child(4){transition-delay:.34s}
.vis .pl:nth-child(5){transition-delay:.42s}
.fuga{opacity:.9}
.vis .fuga{opacity:.28;transition:opacity 1s var(--ease) .5s}

.seccion{padding-block:clamp(var(--s8),9vw,var(--s12))}
.rotulo{grid-column:1/-1;font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.night .rotulo{color:#93a7a0;border-color:var(--line-dk)}
h2{grid-column:1/-1;margin-top:var(--s4);font-weight:600;font-size:clamp(1.7rem,1.3rem + 1.7vw,2.9rem);letter-spacing:-.02em}
.intro{grid-column:1/-1;margin-top:var(--s2);max-width:54ch;color:var(--ink-2);font-size:1.0625rem}
@media (min-width:48rem){ h2{grid-column:1/9} .intro{grid-column:1/7} }

.caso{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--col-gap);padding-top:var(--s6)}
@media (min-width:48rem){ .caso{grid-template-columns:repeat(12,1fr)} }
.caso .rot{grid-column:1/-1;padding-top:var(--s3);border-top:1px solid var(--line)}
.caso .rot h3{font-weight:600;font-size:1.3rem;letter-spacing:-.012em}
.caso .rot span{display:block;margin-top:.45rem;font-size:.9375rem;color:var(--ink-2)}
.caso .rot img.marca{margin-top:var(--s3);width:min(11rem,60%)}
.caso .cuerpo{grid-column:1/-1;margin-top:var(--s3);max-width:58ch}
.caso .cuerpo p + p{margin-top:var(--s2)}
.caso .visual{grid-column:1/-1;margin-top:var(--s4)}
@media (min-width:48rem){
  .caso .rot{grid-column:1/4}
  .caso .cuerpo{grid-column:5/10;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
  .caso .visual{grid-column:10/13;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
}
.fono{border:1px solid var(--line);border-radius:18px;padding:6px;background:#fff;max-width:15rem}
.fono img{border-radius:12px}
.pie{margin-top:.75rem;font-size:.8125rem;color:var(--ink-2)}
/* Primer enlace saliente dentro del contenido: hasta hoy la pagina no tenia
   ninguno, asi que tampoco tenia estilo. Subrayado separado del texto y no
   borde inferior, para que no se confunda con las lineas de la reticula. */
.enlace{text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px;text-decoration-color:#9bb8ac;
  transition:color .18s var(--ease),text-decoration-color .18s var(--ease)}
.enlace:hover{color:var(--pine);text-decoration-color:var(--pine)}
.night .enlace:hover{color:var(--pine-lt);text-decoration-color:var(--pine-lt)}
/* Ganaderia muestra dos pantallas, no una: la segunda necesita aire. */
.caso .visual .fono ~ .fono{margin-top:var(--s4)}


/* Zoom a una pieza del sistema, en oscuro DENTRO de la sección clara. No es un
   tercer caso —la sección promete dos rubros—, así que no lleva .caso: el
   contraste hace de comilla sin abrir otra sección, que rompería el ritmo
   claro/oscuro de la página. */
.zoom{grid-column:1/-1;margin-top:clamp(var(--s8),9vw,5.5rem);background:var(--night);color:#eef1ef;
  padding:clamp(var(--s4),5vw,var(--s8));display:grid;gap:var(--s6) var(--col-gap)}
@media (min-width:60rem){ .zoom{grid-template-columns:1.05fr .95fr;align-items:start;gap:clamp(2rem,4vw,4rem)} }
.z-rot{font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;color:#93a7a0}
.zoom h3{margin-top:var(--s2);max-width:20ch;font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem)}
.z-intro{margin-top:var(--s3);max-width:56ch;color:#b9c4c0}
ol.pasos{list-style:none;margin:var(--s6) 0 0;padding:0;counter-reset:paso}
ol.pasos li{counter-increment:paso;display:grid;grid-template-columns:2.25rem 1fr;gap:var(--s2);
  max-width:58ch;padding-block:var(--s3);border-top:1px solid var(--line-dk);color:#b9c4c0}
/* Numerados porque esto SÍ es una secuencia: el orden es la garantía (nadie
   crea nada sin que otro apruebe), no una decoración de sección. */
ol.pasos li::before{content:counter(paso,decimal-leading-zero);color:var(--pine-lt);
  font-size:.8125rem;letter-spacing:.06em;font-variant-numeric:tabular-nums;padding-top:.3em}
ol.pasos b{display:block;margin-bottom:.35rem;color:#eef1ef;font-weight:600}
.z-cierre{margin-top:var(--s4);max-width:56ch;font-size:1.0625rem}
.z-nota{margin-top:var(--s3);max-width:54ch;color:#8b9793;font-size:.875rem}

.z-chat{border:1px solid var(--line-dk);background:#111716;padding:var(--s3);
  display:grid;gap:.5rem;font-size:.8125rem;line-height:1.55}
.z-chat .dia{justify-self:center;padding-block:.45rem;color:#788682;/* 4.78:1 sobre #111716; el 6f7d79 anterior daba 4.22 */
  font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}
.z-chat .b{max-width:90%;padding:.65rem .8rem;border-radius:12px}
.z-chat .b.bot{justify-self:start;border-top-left-radius:3px;background:#1b2422;color:#d7dedb}
.z-chat .b.yo{justify-self:end;border-top-right-radius:3px;background:var(--pine);color:#eaf6f1}
.z-chat .b b{display:block;margin-bottom:.3rem;color:#eef1ef;font-weight:600}
.z-chat .cod{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;
  letter-spacing:.01em;color:#eef1ef}
.z-chat .ks{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.z-chat .k{border:1px solid #33403d;border-radius:6px;padding:.28rem .5rem;
  font-size:.75rem;color:#9fada9}
.z-chat .k.on{border-color:var(--pine-lt);color:var(--pine-lt)}
.zoom .pie{color:#8b9793}

/* Los ocho sistemas de cada línea: filas con línea de corte, no tarjetas. En
   tarjetas iguales se leen como catálogo de stock y dejan de decir nada. */
ul.sistemas{grid-column:1/-1;list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:0 var(--col-gap)}
@media (min-width:48rem){ ul.sistemas{grid-template-columns:1fr 1fr} }
ul.sistemas li{padding-block:var(--s3);border-top:1px solid var(--line)}
ul.sistemas .n{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;font-weight:600}
ul.sistemas .d{display:block;margin-top:.4rem;max-width:46ch;color:var(--ink-2);font-size:.9375rem}
.sis-rot{grid-column:1/-1;margin:var(--s4) 0 0;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.sis-rot + ul.sistemas{margin-top:var(--s2)}
.est{font-style:normal;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--pine);border:1px solid #b3d0c4;padding:.15rem .45rem}

.apunte{grid-column:1/-1;margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line);
  max-width:62ch;font-family:"Source Serif 4",Georgia,serif;line-height:1.5;
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem)}
.apunte b{font-weight:600}

/* ---------- Método: forward deployed ---------- */
.metodo{background:#eeeeea;border-block:1px solid var(--line)}
.termino{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem;
  padding-bottom:var(--s2);border-bottom:1px solid #cfcfc8}
.termino b{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:clamp(1.1rem,1rem + .5vw,1.4rem);letter-spacing:-.01em}
.termino i{font-style:normal;font-size:.9rem;color:var(--ink-2)}
.termino s{color:var(--ink-3);text-decoration:none;font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;margin-left:auto}
.tesis-metodo{grid-column:1/-1;margin-top:var(--s6);font-family:"Source Serif 4",Georgia,serif;
  font-size:clamp(1.5rem,1.15rem + 1.6vw,2.4rem);line-height:1.22;letter-spacing:-.018em;max-width:22ch}
.tesis-metodo b{font-weight:600;color:var(--pine)}
.glosa{grid-column:1/-1;margin-top:var(--s3);max-width:50ch;color:var(--ink-2)}
@media (min-width:48rem){ .tesis-metodo{grid-column:1/7} .glosa{grid-column:8/13;margin-top:var(--s6)} }

/* La comparación: es donde se ve la diferencia, no en adjetivos */
.compara{grid-column:1/-1;margin-top:clamp(var(--s8),8vw,5rem);display:grid;gap:0}
.compara .cab{display:none}
.par{display:grid;gap:var(--s2) var(--col-gap);padding-block:var(--s3);border-top:1px solid #cfcfc8}
.par .a,.par .b{display:grid;gap:.4rem;align-content:start}
.par .et{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.par .a .et{color:var(--ink-3)}
.par .b .et{color:var(--pine)}
.par .a{color:var(--ink-3)}
.par .b{color:var(--ink);font-weight:500}
@media (min-width:48rem){
  .compara .cab{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap);padding-bottom:var(--s2)}
  .compara .cab span{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .compara .cab span:last-child{color:var(--pine)}
  .par{grid-template-columns:1fr 1fr}
  .par .et{display:none}
}

.ficha{grid-column:1/-1;margin-top:var(--s6);display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--s4) var(--col-gap)}
.ficha div{padding-top:var(--s2);border-top:1px solid var(--line-dk)}
.ficha dt{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:#93a7a0;margin-bottom:.5rem}
.ficha dd{margin:0;font-family:"Source Serif 4",Georgia,serif;font-size:1.2rem;font-variant-numeric:tabular-nums}

.correo{grid-column:1/-1;margin-top:var(--s4);justify-self:start;display:inline-block;
  font-family:"Source Serif 4",Georgia,serif;font-weight:600;
  font-size:clamp(1.6rem,1.1rem + 2.2vw,3rem);letter-spacing:-.02em;
  color:var(--pine);text-decoration:none;padding:.14em 0;
  background-image:linear-gradient(var(--pine),var(--pine));
  background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .35s var(--ease),color .2s var(--ease)}
.correo:hover,.correo:focus-visible{background-size:100% 7px;color:#15493a}
.nota{grid-column:1/-1;margin-top:var(--s3);max-width:52ch;color:var(--ink-2)}
@media (min-width:48rem){ .nota{grid-column:1/7} }

/* Cumplimiento: cierra la seccion de antecedentes. Va aqui y no en una seccion
   propia porque es la misma pregunta —con quien estan tratando— contestada con
   documentos en vez de con datos del RUT. Sobre fondo oscuro. */
.cumplimiento{grid-column:1/-1;margin-top:clamp(var(--s8),8vw,5rem);
  padding-top:var(--s4);border-top:1px solid var(--line-dk)}
.c-rot{font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;color:#93a7a0}
.c-txt{margin-top:var(--s3);max-width:60ch;color:#b9c4c0}
.c-links{margin-top:var(--s6);display:grid;gap:var(--s4) var(--col-gap)}
@media (min-width:48rem){ .c-links{grid-template-columns:repeat(3,1fr)} }
.c-links a{display:block;text-decoration:none;padding-top:var(--s3);
  border-top:1px solid var(--line-dk);transition:border-color .25s var(--ease)}
.c-links a:hover{border-top-color:var(--pine-lt)}
.c-links b{display:block;font-family:"Source Serif 4",Georgia,serif;font-weight:600;
  font-size:1.15rem;letter-spacing:-.01em}
.c-links span{display:block;margin-top:.45rem;color:#93a7a0;font-size:.9375rem;max-width:34ch}
.c-links a:hover b{color:var(--pine-lt)}

footer{padding-block:var(--s6) var(--s4);border-top:1px solid var(--line);
  font-size:.875rem;color:var(--ink-2)}
footer .grid{display:grid;gap:var(--s4) var(--col-gap)}
@media (min-width:48rem){ footer .grid{grid-template-columns:2fr 1fr 1fr} }
footer .sello{font-family:"Source Serif 4",Georgia,serif;font-size:1rem;color:var(--ink)}
footer .sello span{display:block;margin-top:.5rem;font-family:Inter,sans-serif;
  font-size:.8125rem;color:var(--ink-2);max-width:32ch;line-height:1.5}
footer .col p{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.75rem}
footer .col a{display:flex;align-items:center;min-height:44px;
  text-decoration:none;transition:color .18s var(--ease)}
footer .col a:hover{color:var(--pine)}
footer .legal{grid-column:1/-1;padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.25rem;
  font-size:.8125rem;color:var(--ink-3)}
footer .legal a{display:inline-flex;align-items:center;min-height:44px}
.ficha dd a{display:inline-flex;align-items:center;min-height:44px}

/* Estado inicial de lo que anima js/movimiento.js. Va detrás de .js por la misma
   razón que .rv: sin JavaScript nada se esconde. Y si el módulo NO carga, el
   script en línea del final revela estos elementos a los 2,5 s. Las dos redes
   tienen que existir: esconder algo cuya revelación depende de un archivo
   externo es la forma más fácil de publicar una página en blanco. */
.js .mov{opacity:0}
.js .hero h1 .l{opacity:0}

.js .rv{opacity:0;transform:translateY(14px)}
.js .rv.vis{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .js .mov,.js .hero h1 .l{opacity:1!important;transform:none!important}
  .hero::before{transform:none!important}
  .js .rv,.js .rv.vis{opacity:1!important;transform:none!important;transition:none!important}
  .pl,.vis .pl{opacity:1!important;transition:none!important}
  .fuga,.vis .fuga{opacity:.35!important;transition:none!important}
  .correo{transition:none}
  .lupa{transition:none!important;transform:none!important;box-shadow:none!important}
}

/* ---------- Portada: un renglón por producto (03-11-2026) ----------
   La portada medía 28 pantallas de celular; ahora es un índice y cada producto
   tiene su página. Filas con línea de corte, igual que .sistemas y .c-links, no
   tarjetas con caja. El producto de la casa va a lo ancho; el resto, de a dos. */
.prod{grid-column:1/-1;margin-top:var(--s6);display:grid;gap:0 var(--col-gap)}
@media (min-width:48rem){ .prod{grid-template-columns:1fr 1fr} .prod > a:first-child{grid-column:1/-1} }
.prod > a{display:grid;gap:.5rem;align-content:start;text-decoration:none;
  padding-block:var(--s3) var(--s4);border-top:1px solid var(--line);transition:border-color .25s var(--ease)}
.prod > a:hover{border-top-color:var(--pine)}
.prod h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;font-weight:600;font-size:1.3rem;letter-spacing:-.012em}
.prod .t{font-size:.9375rem;color:var(--ink-2)}
.prod p{max-width:56ch}
.prod .mas{margin-top:.25rem;color:var(--pine);font-weight:600;font-size:.9375rem}
.prod > a:hover .mas{text-decoration:underline;text-underline-offset:.22em}

/* ---------- Página de producto ---------- */
.rotulo a{text-decoration:none}
.rotulo a:hover{color:var(--pine)}
h1.titulo{grid-column:1/-1;margin-top:var(--s4);display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem;
  font-weight:600;font-size:clamp(2rem,1.4rem + 2.6vw,3.6rem);letter-spacing:-.024em}
h1.titulo .est{font-family:Inter,system-ui,sans-serif;font-weight:400}
/* En la página propia el encabezado del caso es un h2 chico, no el h2 de sección. */
.caso .rot h2{margin:0;font-weight:600;font-size:1.3rem;letter-spacing:-.012em}