/* =====================================================================
 * OmnIA · estilos del sitio
 *
 * Regla que manda: TODO color, tamaño, espacio y radio sale de tokens.css.
 * Acá no hay ni un solo valor suelto que no se derive de una variable.
 *
 * Dos cosas del manual que condicionan todo este archivo:
 *   · Nada arranca en opacity:0 esperando un observer. Lo que se lee, se ve
 *     apenas carga. Por eso no hay animaciones de aparición en scroll.
 *   · Un solo easing (--ease) y solo en transiciones de interacción.
 * ===================================================================== */

/* ---------- tintes translúcidos ----------
   No son colores nuevos: son --gold, --ok y --navy con alfa. Viven acá y no
   en tokens.css porque son decisiones de este sitio, no de la marca. Están
   nombrados para que no aparezca un rgba() suelto en mitad de la hoja. */

:root{
  --vidrio:rgba(5,8,15,.82);          /* la cabecera translúcida sobre el navy */
  --oro-tinte:rgba(230,207,139,.10);  /* fondo de la burbuja del agente */
  --oro-borde:rgba(230,207,139,.35);
  --oro-borde-2:rgba(230,207,139,.28);
  --ok-borde:rgba(52,211,153,.35);

  /* Cuanto sube cada bloque al entrar. Fue 32px, despues 56px y hoy 80px: las
     dos primeras veces Braian lo miro publicado y seguia siendo poco.

     ⚠ Es una DISTANCIA, no un tiempo: el presupuesto de 120-220ms que declara
     tokens.css no se toca. En la version buena de la cascada no hay duracion
     que tocar —la maneja el scroll, no un reloj—, asi que lo que la hace mas
     o menos visible es cuanto viaja y en que tramo de la entrada termina.

     De referencia: mathienzo.com usa `translate(0, 40%)`, o sea 40% del alto
     del PROPIO bloque, con .5s y .3s de demora. Se tomo la idea (mas viaje) y
     no los numeros: un 40% sobre una demo de 600px son 240px de deslizamiento,
     y ahi el sitio entero se siente flotando. */
  --cascada-y:80px;
}

/* ---------- layout base ---------- */

.contenedor{
  width:100%;
  max-width:calc(var(--sp-8) * 18);        /* 1152px */
  margin-inline:auto;
  padding-inline:var(--sp-5);
}

.seccion{ padding-block:calc(var(--sp-8) + var(--sp-6)) }   /* 96px */

/* La cabecera es pegajosa: sin esto, un enlace interno deja el título
   tapado abajo del logo. 72px de cabecera + aire. */
:target,
section[id]{ scroll-margin-block-start:calc(var(--sp-8) + var(--sp-5)) }

.saltar{
  position:absolute; left:var(--sp-4); top:calc(var(--sp-8) * -2);
  z-index:10; background:var(--panel-2); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4); text-decoration:none; font-weight:700;
  transition:top var(--ease);
}
.saltar:focus{ top:var(--sp-4) }

.visualmente-oculto{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

a{ color:var(--cyan) }

/* ---------- cabecera ---------- */

.cabecera{
  position:sticky; top:0; z-index:9;
  background:var(--vidrio);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.cabecera-fila{
  display:flex; align-items:center; gap:var(--sp-5);
  min-height:calc(var(--sp-8) + var(--sp-2));               /* 72px */
}

.logo{
  display:flex; align-items:center; gap:var(--sp-3);
  text-decoration:none; margin-inline-end:auto;
  min-height:var(--sp-7);                                    /* 48px */
}
.logo-iso{ flex:none }
.logo-texto{ display:flex; flex-direction:column; line-height:1.1 }
.logo .marca{ font-size:var(--fs-xl) }
.logo-bajada{
  font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cyan);
  /* Partida en dos lineas la cabecera pasa de 72 a 90px de alto y el logo
     deja de leerse como una unidad. Abajo de 420px directamente se oculta. */
  white-space:nowrap;
}

.nav{ display:flex; gap:var(--sp-5) }
.nav a{
  color:var(--muted); text-decoration:none; font-size:var(--fs-md); font-weight:600;
  display:inline-flex; align-items:center; min-height:var(--sp-7);
  transition:color var(--ease);
  /* Sin esto, apenas el nav se aprieta los items se parten en dos lineas y la
     cabecera dobla de alto: medido a 1010px con «Software a medida» adentro.
     En nowrap el nav pide 556px y tiene 652 hasta que se oculta a los 1000. */
  white-space:nowrap;
}
.nav a:hover{ color:var(--ink) }

.cta-chico{ font-size:var(--fs-md); padding:var(--sp-2) var(--sp-4); min-height:var(--sp-7) }

/* ---------- hero ----------
   Sin 100vh a propósito: mide lo que necesita y deja ver que hay más abajo. */

.hero{ padding-block:calc(var(--sp-8) + var(--sp-5)) calc(var(--sp-8) + var(--sp-6)) }

/* Una sola columna, centrada. Al costado vivia el diagrama del flujo
   «pedidos-por-whatsapp»: se saco porque prometia un ejemplo inventado antes
   de mostrar las tres demos de verdad, que estan doscientos pixeles mas abajo
   y SI se tocan. Sin esa columna, el texto pegado a la izquierda de un
   contenedor de 1200px se lee como si faltara algo; centrado se lee como una
   decision. Las secciones de abajo siguen alineadas a la izquierda: el hero
   es el unico bloque centrado de la pagina, y por eso funciona. */
.hero-grid{ display:grid; justify-items:center; text-align:center }
.hero-texto{ max-width:64ch }

.hero h1{ margin-block:var(--sp-4) var(--sp-5) }
.hero-bajada{
  color:var(--muted); font-size:var(--fs-xl); line-height:1.5;
  max-width:52ch; margin-inline:auto;
}
.hero-acciones{ margin-block-start:var(--sp-6) }
.hero-nota{
  color:var(--subtle); font-size:var(--fs-sm);
  margin-block-start:var(--sp-3); max-width:46ch; margin-inline:auto;
}

/* El punto que late. Nacio en el chip «andando» del diagrama del hero (ya no
   esta); hoy lo usa el estado «en linea, siempre» del agente de WhatsApp. */
.latido{
  width:var(--sp-2); height:var(--sp-2); border-radius:var(--r-pill);
  background:currentColor; flex:none;
  animation:latir 2s ease-in-out infinite;
}
@keyframes latir{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* ---------- encabezado de las paginas internas ----------
   Nacio en las tres de automatizaciones y hoy lo usan cinco paginas, asi que
   subio de `automatizaciones.css` a aca: cuando un patron lo comparten mas de
   dos paginas deja de ser «lo propio de una» y pasa a ser parte del sistema.
   Más chico que el hero de la home a propósito: acá el visitante ya sabe a qué
   vino —hizo clic en una tarjeta que decía exactamente esto—, así que la página
   no tiene que volver a venderle la idea antes de mostrarle la demo. */

.pag-hero{ padding-block:var(--sp-8) var(--sp-6) }

/* Las migas no son decoración: son la única forma de volver a las otras dos sin
   pasar por el inicio, y dicen de dónde viene el que llegó por un link suelto. */
.pag-migas{
  font-family:var(--baj); font-size:var(--fs-sm); font-weight:700;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--subtle); margin-block-end:var(--sp-5);
}
.pag-migas a{ color:var(--cyan); text-decoration:none }
.pag-migas a:hover{ text-decoration:underline }
.pag-migas span{ margin-inline:var(--sp-2); color:var(--line-2) }

.pag-bajada{
  color:var(--muted); font-size:var(--fs-xl); line-height:1.5;
  max-width:58ch; margin-block-start:var(--sp-5);
}

/* ---------- cabecera de sección ---------- */

.seccion-cab{ margin-block-end:var(--sp-8); max-width:62ch }
.seccion-cab h2{ margin-block:var(--sp-3) var(--sp-4) }
.seccion-bajada{ color:var(--muted); font-size:var(--fs-lg) }

/* ---------- demos ---------- */

/* Cada demo vive en su propia pagina (/automatizaciones, /agentes, /dashboard),
   asi que ya no hay pestanas que las alternen: se fueron .tabs, .tab y
   .panel-demo. Lo que queda es la grilla demo + notas, que las tres usan. */
.demo-grid{
  display:grid; gap:var(--sp-6);
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:start;
}

.demo-notas h3{ font-size:var(--fs-xl); margin-block-end:var(--sp-4) }
.lista{ list-style:none; display:grid; gap:var(--sp-4) }
.lista li{
  position:relative; padding-inline-start:var(--sp-5);
  color:var(--muted); font-size:var(--fs-md); line-height:1.55;
}
.lista li::before{
  content:""; position:absolute; left:0; top:calc(var(--sp-2) - 1px);
  width:var(--sp-2); height:var(--sp-2); border-radius:var(--r-pill);
  background:var(--gold);
}
.lista b{ color:var(--ink) }
.nota-chica{
  color:var(--subtle); font-size:var(--fs-sm);
  margin-block-start:var(--sp-5);
  border-inline-start:2px solid var(--line-2); padding-inline-start:var(--sp-4);
}

/* ---------- demo 1 · chat ---------- */

.chat{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden;
  display:flex; flex-direction:column;
}
.chat-cab{
  display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--panel-2); border-bottom:1px solid var(--line);
}
.chat-avatar{
  display:grid; place-items:center; flex:none;
  width:var(--sp-7); height:var(--sp-7);
  border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--panel);
}
.chat-nombre{ font-weight:700; font-size:var(--fs-md) }
.chat-estado{
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-sm); color:var(--ok);
}

.chat-hilo{
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-4);
  min-height:calc(var(--sp-8) * 5);            /* 320px, para que no salte al responder */
  max-height:calc(var(--sp-8) * 6);
  overflow-y:auto;
}
.burbuja{
  max-width:80%; padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md); font-size:var(--fs-md); line-height:1.5;
}
.burbuja-cliente{
  align-self:flex-end; background:var(--panel-2);
  border:1px solid var(--line-2); color:var(--ink);
  border-end-end-radius:var(--r-sm);
}
.burbuja-agente{
  align-self:flex-start;
  background:var(--oro-tinte); border:1px solid var(--oro-borde-2);
  color:var(--ink); border-end-start-radius:var(--r-sm);
}
.burbuja-hora{
  display:block; font-size:var(--fs-xs); color:var(--subtle);
  margin-block-start:var(--sp-1);
}
.burbuja-aviso{
  align-self:flex-start; background:transparent;
  border:1px dashed var(--line-2); color:var(--muted); font-size:var(--fs-sm);
}
.escribiendo{ display:inline-flex; gap:var(--sp-1); align-items:center }
.escribiendo i{
  width:var(--sp-2); height:var(--sp-2); border-radius:var(--r-pill);
  background:var(--gold); animation:latir 1.2s ease-in-out infinite;
}
.escribiendo i:nth-child(2){ animation-delay:.2s }
.escribiendo i:nth-child(3){ animation-delay:.4s }

.chat-sugerencias{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  padding:var(--sp-4); border-top:1px solid var(--line); background:var(--panel-2);
}
.sug{
  font-family:var(--cuerpo); font-size:var(--fs-sm); font-weight:600;
  color:var(--cyan); background:transparent;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:var(--sp-2) var(--sp-4); min-height:calc(var(--sp-7) - var(--sp-1));  /* 44px */
  cursor:pointer; text-align:start;
  transition:border-color var(--ease), background var(--ease), transform var(--ease);
}
.sug:hover{ border-color:var(--cyan); background:var(--panel) }
.sug:active{ transform:scale(.98) }
.sug[disabled]{ opacity:.45; cursor:default }

/* ---------- demo 2 · tablero ---------- */

.tablero{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-5);
}
.tablero-cab{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap; margin-block-end:var(--sp-5);
}
.tablero-tit{ font-size:var(--fs-xl) }

.segmentado{
  display:flex; gap:var(--sp-1); padding:var(--sp-1);
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-pill);
}
.seg{
  font-family:var(--cuerpo); font-size:var(--fs-sm); font-weight:700;
  color:var(--muted); background:transparent; border:0;
  border-radius:var(--r-pill); padding:var(--sp-2) var(--sp-4);
  min-height:var(--sp-6); cursor:pointer;
  transition:color var(--ease), background var(--ease);
}
.seg:hover{ color:var(--ink) }
.seg[aria-pressed="true"]{ color:var(--navy); background:var(--gold) }

.kpis{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-block-end:var(--sp-5);
}
.kpi{
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:var(--sp-4);
}
.kpi-et{
  font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--subtle);
}
.kpi-val{
  font-family:var(--tit); font-weight:800; font-size:var(--fs-2xl);
  letter-spacing:-.02em; margin-block:var(--sp-1);
  white-space:nowrap;          /* el signo $ no se separa del número */
}
.kpi-var{ font-size:var(--fs-sm); font-weight:600 }
.arriba{ color:var(--ok) }
.abajo{ color:var(--bad) }

.grafico{ margin-block-end:var(--sp-5) }
.grafico-tit{
  font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--subtle);
  margin-block-end:var(--sp-3);
}
.barras{
  display:flex; align-items:flex-end; gap:var(--sp-2);
  height:calc(var(--sp-8) * 2);                  /* 128px */
  padding-block-end:var(--sp-5);
  border-bottom:1px solid var(--line);
  position:relative;
}
.barra{ flex:1; position:relative; border-radius:var(--r-sm) var(--r-sm) 0 0;
        background:linear-gradient(var(--gold-1), var(--gold-2));
        transition:height var(--ease) }
.barra-alta{ background:linear-gradient(var(--cyan), var(--cyan-2)) }
.barra-et{
  position:absolute; top:100%; left:0; right:0; text-align:center;
  font-size:var(--fs-xs); color:var(--subtle); padding-block-start:var(--sp-2);
}

.tabla{ width:100%; border-collapse:collapse; font-size:var(--fs-md); min-width:26rem }
.tabla th{
  text-align:start; font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--subtle);
  padding-block:var(--sp-2); border-bottom:1px solid var(--line);
}
.tabla td{ padding-block:var(--sp-3); border-bottom:1px solid var(--line); color:var(--muted) }
.tabla td:first-child{ color:var(--ink); font-weight:600 }
.tabla td:not(:first-child){ text-align:end; font-variant-numeric:tabular-nums }
.tabla tr:last-child td{ border-bottom:0 }

/* ---------- demo 3 · corrida ---------- */

.corrida{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-5);
}
.corrida-cab{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap; margin-block-end:var(--sp-5);
}
.comparativa{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(2,minmax(0,1fr)) }
.via{ border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--sp-4) }
.via-mano{ background:var(--panel-2) }
.via-auto{ background:var(--panel-2); border-color:var(--oro-borde-2) }
.via-mano .eyebrow{ color:var(--subtle) }
.via-auto .eyebrow{ color:var(--gold) }
.via-tiempo{
  font-family:var(--tit); font-weight:800; font-size:var(--fs-2xl);
  letter-spacing:-.02em; margin-block:var(--sp-2) var(--sp-4);
}
.via-mano .via-tiempo{ color:var(--muted) }
.via-auto .via-tiempo{ color:var(--gold) }

.pasos-mano, .pasos-auto{ list-style:none; display:grid; gap:var(--sp-3) }
.pasos-mano li, .pasos-auto li{
  font-size:var(--fs-sm); color:var(--muted); line-height:1.45;
  display:flex; gap:var(--sp-3); align-items:flex-start;
}
.pasos-mano li::before{
  content:""; flex:none; width:var(--sp-4); height:var(--sp-4);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
}
.pasos-auto li .tilde{
  flex:none; display:grid; place-items:center;
  width:var(--sp-4); height:var(--sp-4); border-radius:var(--r-sm);
  border:1px solid var(--line-2); color:var(--navy);
}
.pasos-auto li.hecho .tilde{ background:var(--ok); border-color:var(--ok) }
.pasos-auto li.hecho{ color:var(--ink) }
.pasos-auto li.corriendo .tilde{ border-color:var(--gold) }

.corrida-pie{
  margin-block-start:var(--sp-5); padding-block-start:var(--sp-4);
  border-top:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--subtle);
}

/* ---------- el cartel de «qué hacemos» ----------
   Acá vivían .servicios / .servicio: una rejilla de tarjetas que linkeaba a las
   dos secciones de abajo. Se fue entera —era un índice de un índice— y quedó
   solo el encabezado, que es lo que dice que son DOS cosas y no cinco.

   Como no tiene cuerpo, tampoco necesita el aire de una sección completa: sin
   este ajuste queda un h2 solo flotando en 128px de nada. */

.seccion-cartel{ padding-block:var(--sp-8) 0 }
.seccion-cartel .seccion-cab{ margin-block-end:0 }
.seccion-cartel .seccion-bajada b{ color:var(--ink) }

/* ---------- la cuenta ---------- */

.seccion-cuenta{ border-block:1px solid var(--line) }
.cuenta-grid{
  display:grid; gap:var(--sp-8);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:center;
}
.cuenta-grid h2{ margin-block:var(--sp-3) var(--sp-4) }

.control{ margin-block-start:var(--sp-6) }
.control label{
  display:block; font-size:var(--fs-md); font-weight:600; color:var(--ink);
  margin-block-end:var(--sp-3);
}
.control-fila{ display:flex; align-items:center; gap:var(--sp-4) }
.control-valor{
  flex:none; min-width:calc(var(--sp-8) + var(--sp-4));       /* 80px */
  font-family:var(--tit); font-weight:800; font-size:var(--fs-xl);
  color:var(--gold); text-align:end;
}

/* 48 px de alto: medido, no estimado. A 32 px el control no llega al piso
   de los 44 px que pide el manual para todo lo que se toca. */
input[type=range]{
  -webkit-appearance:none; appearance:none;
  flex:1; height:var(--sp-7); background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:var(--sp-2); border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--gold-2), var(--cyan-2));
}
input[type=range]::-moz-range-track{
  height:var(--sp-2); border-radius:var(--r-pill);
  background:linear-gradient(90deg, var(--gold-2), var(--cyan-2));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:var(--sp-5); height:var(--sp-5); margin-block-start:calc(var(--sp-2) * -1);
  border-radius:var(--r-pill); background:var(--gold);
  border:2px solid var(--navy); box-shadow:0 0 0 1px var(--gold-2);
}
input[type=range]::-moz-range-thumb{
  width:var(--sp-5); height:var(--sp-5);
  border-radius:var(--r-pill); background:var(--gold);
  border:2px solid var(--navy); box-shadow:0 0 0 1px var(--gold-2);
}

.resultado{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-6); text-align:center;
}
.resultado .eyebrow{ display:block }
.resultado-nro{
  font-family:var(--tit); font-weight:800; font-size:var(--fs-4xl);
  letter-spacing:-.03em; line-height:1.1; color:var(--gold);
  margin-block-start:var(--sp-3);
}
.resultado-unidad{
  font-family:var(--baj); font-size:var(--fs-xl); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.resultado-equiv{
  color:var(--muted); font-size:var(--fs-md);
  margin-block:var(--sp-4) var(--sp-5);
  margin-inline:auto;
}
.resultado-equiv b{ color:var(--ink) }
.resultado .nota-chica{ border:0; padding:0; margin-block-start:var(--sp-4) }

/* ---------- cómo trabajo ---------- */

.pasos{
  list-style:none; display:grid; gap:var(--sp-5);
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.paso{
  padding-block-start:var(--sp-5);
  border-block-start:2px solid var(--line-2);
}
.paso:first-child{ border-block-start-color:var(--gold) }
.paso-nro{
  font-family:var(--tit); font-weight:800; font-size:var(--fs-xl);
  color:var(--gold); line-height:1;
}
.paso h3{ font-size:var(--fs-xl); margin-block:var(--sp-3) var(--sp-3) }
.paso p{ color:var(--muted); font-size:var(--fs-md) }

/* ---------- preguntas ---------- */

.faq{ border-block-start:1px solid var(--line); max-width:78ch }
.qa{ border-block-end:1px solid var(--line) }
.qa summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding-block:var(--sp-5); cursor:pointer; list-style:none;
  font-family:var(--tit); font-weight:700; font-size:var(--fs-xl);
  letter-spacing:-.01em; color:var(--ink);
  min-height:var(--sp-7);
  transition:color var(--ease);
}
.qa summary::-webkit-details-marker{ display:none }
.qa summary:hover{ color:var(--gold) }
.qa summary::after{
  content:""; flex:none;
  width:var(--sp-4); height:var(--sp-4);
  border-inline-end:2px solid var(--gold); border-block-end:2px solid var(--gold);
  transform:rotate(45deg) translate(calc(var(--sp-1) * -1), calc(var(--sp-1) * -1));
  transition:transform var(--ease);
}
.qa[open] summary::after{ transform:rotate(225deg) }
.qa-cuerpo{ padding-block-end:var(--sp-5) }
.qa-cuerpo p{ color:var(--muted); font-size:var(--fs-md) }

/* ---------- cierre ---------- */

.cierre{ padding-block:calc(var(--sp-8) + var(--sp-6)) }
.cierre-caja{ text-align:center }
.cierre-txt{
  color:var(--muted); font-size:var(--fs-xl);
  margin-block:var(--sp-4) var(--sp-6); margin-inline:auto;
}
/* La linea del costo va MAS CHICA que la bajada y pegada al boton: contesta la
   ultima duda («¿me cobran por preguntar?») en el momento exacto en que
   aparece, sin pelearle el tamaño al argumento principal. Si fuera del mismo
   cuerpo, se leeria como una segunda promesa y diluiria la primera. */
.cierre-gratis{
  font-size:var(--fs-md); color:var(--subtle);
  margin-block:calc(var(--sp-6) * -1 + var(--sp-2)) var(--sp-5);
}
/* ---------- el formulario ----------
   Va plegado y en chico: es la segunda opción, no compite con el CTA. */

.caja-form{ margin-block-start:var(--sp-6); text-align:start }
.caja-form summary{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  list-style:none; cursor:pointer;
  color:var(--cyan); font-size:var(--fs-sm); font-weight:600;
  min-height:calc(var(--sp-7) - var(--sp-1));            /* 44px */
  justify-content:center; width:100%;
  transition:color var(--ease);
}
.caja-form summary::-webkit-details-marker{ display:none }
.caja-form summary:hover{ color:var(--gold) }
.caja-form summary::after{
  content:""; width:var(--sp-2); height:var(--sp-2);
  border-inline-end:2px solid currentColor; border-block-end:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--ease);
}
.caja-form[open] summary::after{ transform:rotate(225deg) }

.form{
  max-width:52ch; margin-inline:auto; margin-block-start:var(--sp-5);
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-5);
  display:grid; gap:var(--sp-5);
}
.campo{ display:grid; gap:var(--sp-2) }
.campo label{ font-size:var(--fs-md); font-weight:600; color:var(--ink) }
.campo input,
.campo textarea{
  font-family:var(--cuerpo); font-size:var(--fs-lg); color:var(--ink);
  background:var(--panel-2); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-4);
  min-height:calc(var(--sp-7) - var(--sp-1));            /* 44px */
  width:100%; resize:vertical;
  transition:border-color var(--ease);
}
.campo input:hover,
.campo textarea:hover{ border-color:var(--muted) }
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"]{ border-color:var(--bad) }
.campo-ayuda{ font-size:var(--fs-sm); color:var(--subtle) }

/* La trampa: fuera de la vista sin usar display:none, que algunos robots
   detectan, y sin que el lector de pantalla la anuncie. */
.trampa{
  position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;
}

.btn-enviar{ width:100%; font-size:var(--fs-lg); min-height:var(--sp-7) }
.btn-enviar[disabled]{ opacity:.6; cursor:default }

.form-estado{ font-size:var(--fs-sm); color:var(--muted); text-align:center }
.form-estado:empty{ display:none }
.form-estado.bien{ color:var(--ok) }
.form-estado.mal{ color:var(--bad) }
.form-estado a{ color:inherit; text-decoration:underline }

/* La puerta a /nosotros desde el bloque de la home: lo unico que la home NO
   tiene de esa pagina son los cuatro pasos de como se trabaja. Link de texto
   con la flechita, como el resto de las puertas del sitio: el unico CTA sigue
   siendo el de WhatsApp. */
.nosotros-ir{ margin-block-start:var(--sp-4) }
.nosotros-ir a{
  font-family:var(--baj); font-weight:700; font-size:var(--fs-md);
  color:var(--gold); text-decoration:none;
}
.nosotros-ir a span{ display:inline-block; transition:margin var(--ease) }
.nosotros-ir a:hover span{ margin-inline-start:var(--sp-1) }

/* =====================================================================
 * La cascada
 *
 * Los bloques entran de abajo hacia arriba, escalonados, a medida que el
 * scroll los alcanza. Lo escalonado lo pone cascada.js con
 * `transitionDelay`; lo de aca abajo es solo el punto de partida y el de
 * llegada.
 *
 * ⚠ TODO CUELGA DE `.cascada-lista`, que es una clase que pone cascada.js
 * en el <html>. Sin JS —o con el visitante pidiendo menos movimiento— la
 * clase no existe, ninguna de estas reglas aplica y la pagina se ve entera.
 * **Nunca saques ese prefijo.** Si estas reglas escondieran por su cuenta,
 * un .js que no baja dejaria la pagina en blanco, sin ningun error que lo
 * explique.
 *
 * ⚠ ESTA LISTA ESTA DUPLICADA en cascada.js (la constante SELECTOR). Si
 * tocas una, toca la otra: lo que sobre aca queda invisible para siempre,
 * porque nadie lo va a observar para revelarlo.
 *
 * El hero no esta en la lista a proposito: es la promesa de la pagina y
 * tiene que estar desde el primer pintado, sin esperar a nadie.
 *
 * Solo `translateY`: es de las dos unicas propiedades que el navegador anima
 * sin recalcular el layout (la otra es `opacity`, que aca NO se usa y el
 * motivo esta abajo). Animar `height` o `top` en veinte bloques a la vez hace
 * tironear el scroll en un celular.
 * ===================================================================== */

.cascada-lista :is(
  .seccion-cab, .sistema, .ejemplo, .caso, .paso, .qa,
  .persona, .hermana, .demo-grid, .cierre-caja,
  .dep-modulo, .dep-paso-caja,
  .tms-modulo, .tms-paso-caja,
  .pt-mal, .pt-modulo, .pt-paso, .pt-pregunta,
  /* ⚠ Estos TRES van acotados bajo .caso-pg y no sueltos: `.cab`, `.antes` y
     `.demo` son nombres genericos y sin el prefijo se le pegarian a medio
     sitio. Es la trampa de GOTCHAS §4, que ya nos mordio dos veces.
     Antes acá estaba `.ficha`, que es la seccion entera de cada caso: un
     solo bloque para todo el caso. Se cambio por sus tres partes —el
     encabezado, la columna del «antes» y la demo— asi el caso entra por
     partes en vez de aparecer de golpe. `.ficha` se SACO: si quedaran las
     dos, el padre y los hijos se desvanecerian uno adentro del otro y se
     ve turbio. */
  .caso-pg .cab, .caso-pg .antes, .caso-pg .demo
){
  /* ⚠ SOLO `transform`. NUNCA `opacity`.

     La primera version desvanecia (opacity 0 -> 1) y rompio la pagina en
     produccion DOS veces. El problema no era el bug de turno sino el modo de
     falla: esconder y confiar en que algo lo revele no se degrada, desaparece.
     Aparecieron cinco agujeros distintos del mismo tipo, uno atras del otro.

     Moviendo sin desvanecer eso se corta de raiz: si el JS no carga, si el
     observador no dispara, si el respaldo falla, si aparece un sexto agujero
     que todavia no vimos —lo peor que puede pasar es que un bloque quede 32px
     mas abajo de donde va (--cascada-y). Se lee igual. Nadie se entera.

     Es un efecto mas sutil que el desvanecido, y esa es exactamente la parte
     del trato: el techo mas bajo viene con un piso que no se hunde.

     Si alguien vuelve a poner `opacity` aca, esta reabriendo el mismo pozo.
     Esta contado en docs/GOTCHAS.md §11. */
  transform:translateY(var(--cascada-y));
  transition:transform var(--entrada);
}

.cascada-lista .a-la-vista{ transform:none }

/* =====================================================================
 * El desvanecido, pero manejado por el NAVEGADOR
 *
 * Braian queria el efecto de mathienzo.com: que las cosas aparezcan al
 * scrollear, desvaneciendose. Eso es lo que la version con JS hacia y lo que
 * rompio la pagina dos veces —porque el JS podia no correr y el contenido
 * quedaba invisible—.
 *
 * Esto es otra cosa. `animation-timeline: view()` ata la animacion a la
 * POSICION del bloque en la pantalla, y quien la calcula es el navegador. No
 * hay observador que pueda no disparar, no hay respaldo que pueda fallar, no
 * hay callback: mientras el bloque este en pantalla, su opacidad sale de donde
 * esta, siempre.
 *
 * ⚠ Y el modo de falla es el correcto: todo esto vive adentro de un
 * `@supports`. El navegador que no lo soporta no lee ni una de estas reglas
 * —ni el `opacity:0`, que solo existe como fotograma de la animacion— y se
 * queda con la cascada de arriba, que solo mueve. La diferencia con el pozo
 * anterior es exactamente esa: el `opacity:0` ya no es un estado del que hay
 * que salir, es un punto de una animacion que el navegador recorre solo.
 *
 * El rango termina en `entry 80%`: el bloque esta entero antes de haber
 * entrado del todo. Con el rango completo (0% a 100%) lo que asoma abajo de la
 * pantalla queda medio transparente y se lee como un bug, no como un efecto.
 *
 * Estuvo en 55%, paso a 70% y hoy va en 80%, siempre junto con --cascada-y:
 * son las dos perillas, cuanto viaja y en que tramo termina. De 80% no conviene
 * pasar: el bloque tiene que terminar de aparecer ANTES de haber entrado del
 * todo, si no lo que asoma abajo de la pantalla queda medio transparente.
 * ===================================================================== */

@supports (animation-timeline: view()) {

  /* Con esto andando el JS se corre solo (ver cascada.js): la cascada de
     arriba no se aplica, asi que no hay dos animaciones peleando. */
  .cascada-css :is(
    .seccion-cab, .sistema, .ejemplo, .caso, .paso, .qa,
    .persona, .hermana, .demo-grid, .cierre-caja,
    .dep-modulo, .dep-paso-caja,
    .tms-modulo, .tms-paso-caja,
    .pt-mal, .pt-modulo, .pt-paso, .pt-pregunta,
    .caso-pg .cab, .caso-pg .antes, .caso-pg .demo
  ){
    animation:aparecer linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 80%;
  }

  @keyframes aparecer{
    from{ opacity:0; transform:translateY(var(--cascada-y)) }
    to  { opacity:1; transform:none }
  }

  /* Menos movimiento: se apaga. tokens.css ya corta las transiciones, pero
     esto es una animacion y hay que nombrarla aparte. */
  @media (prefers-reduced-motion: reduce){
    .cascada-css :is(
      .seccion-cab, .sistema, .ejemplo, .caso, .paso, .qa,
      .persona, .hermana, .demo-grid, .cierre-caja,
      .dep-modulo, .dep-paso-caja,
      .tms-modulo, .tms-paso-caja,
      .pt-mal, .pt-modulo, .pt-paso, .pt-pregunta,
      .caso-pg .cab, .caso-pg .antes, .caso-pg .demo
    ){ animation:none }
  }

  /* Al imprimir tampoco: no hay scroll que recorra la animacion. */
  @media print{
    .cascada-css :is(
      .seccion-cab, .sistema, .ejemplo, .caso, .paso, .qa,
      .persona, .hermana, .demo-grid, .cierre-caja,
      .dep-modulo, .dep-paso-caja,
      .tms-modulo, .tms-paso-caja,
      .pt-mal, .pt-modulo, .pt-paso, .pt-pregunta,
      .caso-pg .cab, .caso-pg .antes, .caso-pg .demo
    ){ animation:none }
  }
}

/* Al imprimir no hay scroll que dispare nada. Ahora que la cascada solo mueve,
   esto ya no evita una hoja en blanco —eso no puede pasar mas— sino que los
   bloques salgan corridos. Cosmetico, pero sale gratis. */
@media print{
  .cascada-lista :is(
    .seccion-cab, .sistema, .ejemplo, .caso, .paso, .qa,
    .persona, .hermana, .demo-grid, .cierre-caja,
    .dep-modulo, .dep-paso-caja,
    .tms-modulo, .tms-paso-caja,
    .pt-mal, .pt-modulo, .pt-paso, .pt-pregunta,
    .caso-pg .cab, .caso-pg .antes, .caso-pg .demo
  ){ transform:none !important }
}

/* La cascada se apaga sola con `prefers-reduced-motion` por dos caminos, y
   conviene que sean dos: cascada.js ni siquiera pone la clase, y ademas
   tokens.css corta toda transicion del sitio. */

/* ---------- pie ---------- */

.pie{ border-block-start:1px solid var(--line); padding-block:var(--sp-7) var(--sp-6) }
.pie-fila{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp-6); flex-wrap:wrap;
}
.pie-marca{ display:flex; align-items:center; gap:var(--sp-4) }
.pie-nombre{ font-size:var(--fs-xl) }
.pie-bajada{ color:var(--subtle); font-size:var(--fs-sm) }
.pie-links{ display:grid; gap:var(--sp-2) }
.pie-links a{
  color:var(--muted); text-decoration:none; font-size:var(--fs-md); font-weight:600;
  display:inline-flex; align-items:center; gap:var(--sp-2); min-height:var(--sp-6);
  transition:color var(--ease);
}
.pie-links a:hover{ color:var(--gold) }
.pie-links .num{ color:var(--subtle); font-weight:500 }
.pie-legal{
  margin-block-start:var(--sp-6); padding-block-start:var(--sp-5);
  border-block-start:1px solid var(--line);
}
.pie-legal p{ color:var(--subtle); font-size:var(--fs-sm); max-width:none }

/* =====================================================================
 * Adaptación a pantallas chicas.
 * El manual pide probar en 360, 390 y 430 px. Los cortes están puestos
 * donde el contenido se rompe, no en anchos "de catálogo".
 * ===================================================================== */

@media (max-width:1000px){
  .casos-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .demo-grid,
  .cuenta-grid{ grid-template-columns:minmax(0,1fr) }
  .nav{ display:none }
  .pasos{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

@media (max-width:760px){
  .seccion{ padding-block:var(--sp-8) }
  .hero{ padding-block:var(--sp-7) var(--sp-8) }
  .pag-hero{ padding-block:var(--sp-7) var(--sp-5) }
  .pag-bajada{ font-size:var(--fs-lg) }
  .cierre{ padding-block:var(--sp-8) }
  .seccion-cab{ margin-block-end:var(--sp-6) }

  .seccion-cartel{ padding-block:var(--sp-7) 0 }

  .pasos{ grid-template-columns:minmax(0,1fr); gap:var(--sp-4) }
  .kpis{ grid-template-columns:minmax(0,1fr) }
  .comparativa{ grid-template-columns:minmax(0,1fr) }

  .cta-chico{ display:none }        /* en el celular manda el CTA del hero */
  /* La bajada del hero baja un escalón: a 20px se come la pantalla entera
     y no se ve que abajo hay algo. */
  .hero-bajada,
  .cierre-txt{ font-size:var(--fs-lg) }
  .burbuja{ max-width:90% }
  .qa summary{ font-size:var(--fs-lg) }
  .tablero, .corrida{ padding:var(--sp-4) }
  .resultado{ padding:var(--sp-5) }
}

@media (max-width:420px){
  .logo-bajada{ display:none }
  .chat-hilo{ min-height:calc(var(--sp-8) * 4) }
}

/* Lo que se toca, 44 px. Se mide, no se estima. */
@media (max-width:600px){
  .sug, .seg, .btn, .pie-links a, .nav a{ min-height:calc(var(--sp-7) - var(--sp-1)) }
}

/* =====================================================================
 * Los sistemas propios (WMS · TMS · lo que falte)
 *
 * Viven en su propia seccion #software porque son una entrada del nav, y van
 * como tarjetas cuando el resto de la pagina no las usa: aca el borde y el
 * relleno SI dicen «objeto separado, entrás a este», que es lo unico para lo
 * que el manual (§4) deja gastar una caja.
 *
 * Tres columnas, no dos: la tercera no es un sistema mas sino la puerta a los
 * que todavia no existen. Se distingue por el borde punteado y la sigla en
 * cian; las dos reales llevan la sigla en oro.
 * ===================================================================== */

.sistemas-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-5) }

.sistema{
  display:flex; flex-direction:column; gap:var(--sp-3);
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-6);
  text-decoration:none; color:inherit;
  transition:border-color var(--ease), background var(--ease);
}
a.sistema:hover{ border-color:var(--gold); background:var(--panel-2) }

.sistema-sigla{
  font-family:var(--baj); font-weight:700; font-size:var(--fs-xl);
  letter-spacing:.18em; color:var(--gold);
}
/* Las tarjetas de #software se identifican con una sigla de tres letras (WMS,
   TMS). Las de #automatizaciones no tienen sigla que valga la pena, asi que
   ocupan ese mismo lugar con un icono. Mismo tamano que la sigla para que las
   dos grillas se lean como hermanas y no como dos componentes distintos. */
.sistema-icono{
  display:grid; place-items:center;
  width:var(--sp-7); height:var(--sp-7); border-radius:var(--r-sm);
  border:1px solid var(--oro-borde); color:var(--gold); background:var(--panel-2);
}

.sistema-nombre{ font-family:var(--tit); font-weight:800; font-size:var(--fs-xl); letter-spacing:-.02em }
.sistema-frase{ color:var(--cyan); font-family:var(--baj); font-weight:700; font-size:var(--fs-lg) }

.sistema-lista{ list-style:none; display:grid; gap:var(--sp-3); margin-block-start:var(--sp-1) }
.sistema-lista li{
  position:relative; padding-inline-start:var(--sp-5);
  color:var(--muted); font-size:var(--fs-md); line-height:1.5;
}
.sistema-lista li::before{
  content:""; position:absolute; left:0; top:calc(var(--sp-2) - 1px);
  width:var(--sp-2); height:var(--sp-2); border-radius:var(--r-pill); background:var(--gold);
}

.sistema-ir{
  margin-block-start:auto; padding-block-start:var(--sp-4);
  font-weight:700; font-size:var(--fs-md); color:var(--gold);
}
/* Lo punteado marca «esto todavia no se toca»: el TMS no tiene demo y la
   tercera tarjeta no es un producto. Mejor que se vea a que un link mienta. */
.sistema-pronto,
.sistema-abierto{ border-style:dashed }
.sistema-ir-off{ color:var(--subtle); font-weight:600 }

/* El «+» no es una sigla de tres letras: sin el interletrado queda centrado
   con su propio texto y no colgando a la izquierda. */
.sistema-abierto .sistema-sigla{ color:var(--cyan); letter-spacing:0; font-size:var(--fs-3xl); line-height:.8 }

/* Cuatro tarjetas en una grilla de tres dejan a la cuarta sola y descolgada.
   La «puerta abierta» no compite con los sistemas de verdad, asi que pasa a
   ocupar la fila entera: tres arriba, la invitacion abajo. Sus viñetas ya van
   en cian, y a lo ancho la lista entra comoda en tres columnas. */
.sistema-abierto{ grid-column:1/-1 }
.sistema-abierto .sistema-lista{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4) }
.sistema-abierto .sistema-lista li::before{ background:var(--cyan) }

/* A dos columnas la tercera quedaria sola y desbalanceada: de 3 se pasa a 1. */
@media (max-width:1000px){
  .sistemas-grid{ grid-template-columns:minmax(0,1fr) }
  .sistema-abierto .sistema-lista{ grid-template-columns:minmax(0,1fr) }
  .sistema{ padding:var(--sp-5) }
}


/* =====================================================================
 * Quiénes somos
 *
 * El bloque es de dos columnas y NO lleva borde arriba: el de abajo de
 * «La cuenta» ya hace esa línea. Dos bordes pegados dan 2px y se ve como
 * un error, no como una separación.
 *
 * Los discos con las iniciales usan --panel-2 y --line-2, no un dorado
 * con alfa: un rgba() nuevo sería un hex suelto más en la hoja, que es
 * justo lo que los tokens están para evitar. El color lo pone la letra.
 * ===================================================================== */

.seccion-nosotros{ border-block-end:1px solid var(--line) }
.nosotros-grid{
  display:grid; gap:var(--sp-8);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:center;
}
.nosotros-grid h2{ margin-block:var(--sp-3) var(--sp-4) }
.nosotros-nota{
  margin-block-start:var(--sp-5);
  color:var(--subtle); font-size:var(--fs-md);
}

.nosotros-personas{
  list-style:none; display:grid; gap:var(--sp-4);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.persona{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-5);
  text-align:center;
}
/* El disco mide 96px y no 64: una cara en 64px es una miniatura de perfil de
   chat. Acá convivio un rato con `.persona-inicial`, un disco con las iniciales
   que cubria a la persona que todavia no habia mandado foto; los dos median lo
   mismo para que las tarjetas arrancaran parejas. Ya estan las dos fotos, asi
   que ese fallback se fue —con su variante en cian—. Si algun dia entra una
   tercera persona sin foto, se repone: `display:grid; place-items:center` y la
   misma medida de aca abajo.

   La foto ya viene recortada en circulo y con el afuera transparente, asi que
   este border-radius no la recorta a ella: recorta el fondo del disco que queda
   atras. Por eso el archivo es .webp con alfa y no un .jpg. */
.persona-foto{
  display:block; object-fit:cover;
  inline-size:calc(var(--sp-8) + var(--sp-6));
  block-size:calc(var(--sp-8) + var(--sp-6));
  margin-inline:auto; margin-block-end:var(--sp-4);
  border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--panel-2);
}

.persona-nombre{
  font-family:var(--tit); font-weight:700; font-size:var(--fs-lg);
  letter-spacing:-.01em; color:var(--ink);
}
/* Espera la línea de cada uno. Todavía no existe: se escribe, no se inventa. */
.persona-rol{
  margin-block-start:var(--sp-2);
  color:var(--muted); font-size:var(--fs-md); line-height:1.5;
}

@media (max-width:1000px){
  .nosotros-grid{ grid-template-columns:minmax(0,1fr); gap:var(--sp-6) }
}
/* A 375px dos tarjetas dejan 109px útiles y «Braian Chevasco» se parte en
   dos líneas contra el disco. Apiladas entran enteras. */
@media (max-width:420px){
  .nosotros-personas{ grid-template-columns:minmax(0,1fr) }
}


/* =====================================================================
 * Casos
 *
 * La estructura sale de duotach/casos-exito, pero podada. Ellos ponen
 * badges de stack (Next.js, Supabase) y hasta cuatro métricas por caso:
 * eso le habla a un CTO. Acá el que lee es el dueño de un negocio, así
 * que el stack no va y las métricas son DOS. Con cuatro no se lee
 * ninguna: el ojo las cuenta y sigue de largo.
 *
 * El link «Ver la demo» va SOLO en los casos que tengan una página de
 * verdad adonde ir. Un link que no lleva a ningún lado es peor que no
 * tener link.
 *
 * ⚠ No hay CTA al final de la sección, y es a propósito: un solo CTA en
 * toda la página y es el de WhatsApp (§7.4 del manual de marca).
 * ===================================================================== */

/* Tres columnas para tres casos: cierra justo en una fila.
   ⚠ Este numero sigue a la cantidad de casos y hay que mirarlo cada vez que
   entra o sale uno. Con cuatro estuvo un rato en 2x2 (el cuarto quedaba solo
   en una segunda fila); volvio a tres cuando se saco el del coach. Con cinco
   hay que volver a pensarlo. */
.casos-grid{
  display:grid; gap:var(--sp-5);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.caso{
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--sp-6);
}
.caso-rubro{
  font-family:var(--baj); font-size:var(--fs-xs); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cyan);
}
.caso-tit{ font-size:var(--fs-xl); margin-block:var(--sp-3) var(--sp-3) }
.caso-txt{ color:var(--muted); font-size:var(--fs-md) }

/* Las dos métricas se separan del texto con una línea, no con aire: sin la
   línea se leen como un párrafo más y el numero pierde el golpe. */
.caso-datos{
  list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-4);
  margin-block-start:var(--sp-5); padding-block-start:var(--sp-5);
  border-block-start:1px solid var(--line);
}
.caso-nro{
  font-family:var(--tit); font-weight:800; font-size:var(--fs-2xl);
  line-height:1.1; color:var(--gold); letter-spacing:-.02em;
}
.caso-lbl{ color:var(--subtle); font-size:var(--fs-sm); line-height:1.4; margin-block-start:var(--sp-1) }

/* `auto` arriba: empuja el link al piso de la tarjeta, así todas las flechas
   quedan alineadas aunque un caso tenga tres renglones más que otro. */
.caso-ir{
  margin-block-start:auto; padding-block-start:var(--sp-4);
  font-weight:700; font-size:var(--fs-md); color:var(--gold);
}
.caso-link{ text-decoration:none; color:inherit; transition:border-color var(--ease) }
.caso-link:hover{ border-color:var(--line-2) }
.caso-link:hover .caso-ir span{ margin-inline-start:var(--sp-1) }
.caso-ir span{ display:inline-block; transition:margin var(--ease) }

@media (max-width:1000px){
  .caso{ padding:var(--sp-5) }
}
@media (max-width:760px){
  .casos-grid{ grid-template-columns:minmax(0,1fr) }
}