/* ============================================================
   Haricode — portada. Se apoya en tokens.css y site.css.
   Sin colores literales, sin efectos decorativos.
   ============================================================ */

/* ── PORTADA ────────────────────────────────────────────── */
.hero{padding:clamp(72px,11vw,140px) 0 var(--section-y);position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
/* El isotipo pasó a segundo plano: la derecha ya la ocupa el producto. */
.hero .brand-mark{
  top:50%;right:-6%;transform:translateY(-50%);
  width:min(50vw,560px);height:min(50vw,560px);opacity:.04;
  -webkit-mask-image:linear-gradient(260deg,#000 34%,transparent 88%);
  mask-image:linear-gradient(260deg,#000 34%,transparent 88%);
}
@media(max-width:900px){
  .hero .brand-mark{width:82vw;height:82vw;right:-30%;top:auto;bottom:-12%;transform:none;opacity:.05}
}
/* Texto a la izquierda, producto real a la derecha: la portada deja de ser
   solo una declaración y pasa a enseñar lo que ya está funcionando. */
.hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--sp-9);align-items:center}
.hero h1{max-width:17ch;margin-bottom:var(--sp-5)}
.hero .lead{
  max-width:52ch;color:var(--text-2);
  font-size:clamp(var(--fs-md),2vw,var(--fs-lg));line-height:1.55;
}
.hero-actions{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center;margin-top:var(--sp-7)}

/* Tres capturas apiladas como una baraja: se solapan para no estirar la
   portada, y cada una asoma lo justo para reconocer el producto. Cada
   pantalla lleva su propia marca dentro, así que no necesitan pie. */
.hero-shots{display:grid;justify-items:stretch}
.hero-shots .shots-lbl{
  font-size:var(--fs-xs);color:var(--text-3);
  margin-bottom:var(--sp-4);padding-left:var(--sp-2);
}
.hero-shots img{
  width:100%;height:auto;display:block;
  border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:var(--shadow);background:var(--surface-2);
}
.hero-shots img:nth-of-type(1){margin-right:var(--sp-9)}
.hero-shots img:nth-of-type(2){margin:calc(var(--sp-6) * -1) 0 0 var(--sp-9)}
.hero-shots img:nth-of-type(3){margin:calc(var(--sp-6) * -1) var(--sp-8) 0 0}

/* Datos verificables, no adjetivos. */
.proof{
  margin-top:var(--sp-9);padding-top:var(--sp-6);border-top:1px solid var(--border);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);
}
.proof dt{
  font-size:var(--fs-xl);font-weight:var(--fw-medium);letter-spacing:-.03em;
  line-height:1.1;font-variant-numeric:tabular-nums;
}
.proof dd{color:var(--text-3);font-size:var(--fs-sm);line-height:1.45;margin-top:var(--sp-2);max-width:26ch}

@media(max-width:960px){
  .hero-in{grid-template-columns:1fr;gap:var(--sp-8)}
  .hero-shots img:nth-of-type(n){margin:0 0 var(--sp-4) 0}
  .hero-shots img:nth-of-type(3){display:none}
  .proof{grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
}
@media(max-width:560px){
  .proof{grid-template-columns:1fr;gap:var(--sp-4)}
  .proof dt{font-size:var(--fs-lg)}
}

/* ── ESTRUCTURA DE SECCIÓN ──────────────────────────────── */
.band{padding:var(--section-y) 0;border-top:1px solid var(--border)}
.band.alt{background:var(--surface-1)}
.band-head{max-width:60ch;margin-bottom:var(--sp-8)}
.band-head p{color:var(--text-2);margin-top:var(--sp-4);line-height:1.65}

/* ── ECOSISTEMA ─────────────────────────────────────────
   El mapa no es un adorno: dice de un vistazo lo que el texto tarda un
   párrafo en explicar —quién habla con quién y en qué orden—. Se dibuja
   con las mismas líneas de 1 px que separan el resto del sitio, así que
   no introduce lenguaje visual nuevo. */
.band-head.wide{max-width:74ch}

.eco{
  margin-bottom:var(--sp-7);
  /* Distancia desde el borde del bloque hasta donde empiezan los nodos:
     la columna de la etiqueta más los dos huecos. La horquilla la usa para
     caer justo encima de las tarjetas y no del rótulo de la capa. */
  --eco-inset:calc(148px + var(--sp-4) * 2);
}
.anchor-alias{display:block;height:0;scroll-margin-top:96px}
.eco-layer{
  background:var(--surface-1);border:1px solid var(--border);border-radius:var(--r-card);
  padding:var(--sp-4);display:grid;grid-template-columns:148px minmax(0,1fr);
  gap:var(--sp-4);align-items:center;
}
.eco-tag{
  font-size:var(--fs-xs);color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;
  display:flex;align-items:baseline;gap:var(--sp-2);
}
.eco-num{
  font-size:var(--fs-sm);color:var(--text);font-weight:var(--fw-medium);
  font-variant-numeric:tabular-nums;letter-spacing:0;
}
.eco-row{display:grid;gap:var(--sp-3)}
.eco-row.three{grid-template-columns:repeat(3,1fr)}

.eco-node{
  display:block;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-control);padding:var(--sp-3) var(--sp-4);
  transition:border-color var(--dur),background var(--dur);
}
.eco-node:hover{border-color:var(--border-strong);background:var(--surface-3)}
.eco-name{
  display:block;color:var(--text);font-weight:var(--fw-semibold);
  font-size:var(--fs-sm);letter-spacing:-.02em;margin-bottom:var(--sp-1);
}
.eco-role{display:block;color:var(--text-2);font-size:var(--fs-xs);line-height:1.5}
/* Las capas de un solo producto ocupan todo el ancho: si el nombre y el rol
   se apilaran, la tarjeta quedaría alta y medio vacía. Van en dos columnas. */
.eco-row.one .eco-node{
  display:grid;grid-template-columns:140px minmax(0,1fr);
  gap:var(--sp-4);align-items:baseline;
}
.eco-row.one .eco-name{font-size:var(--fs-base);margin-bottom:0}
/* Dilo es el único que atraviesa las demás capas. Se marca con un guion de
   acento sobre el nombre —no con un color propio ni con un filete a todo lo
   ancho, que se leería como un borde mal puesto. */
.eco-node.lead{position:relative}
.eco-node.lead::before{
  content:"";position:absolute;top:0;left:var(--sp-4);width:28px;height:2px;
  background:var(--accent);
}

/* Asomo del sitio real al pasar por encima. La imagen es la misma que usa
   la ficha de más abajo, así que el navegador ya la tiene y el asomo no
   cuesta una descarga extra. Solo donde hay puntero de verdad: en táctil
   no hay «pasar por encima» y el bloque estorbaría al tocar el enlace. */
.eco-peek{display:none}
.eco-peek-in{display:block}
@media(hover:hover) and (pointer:fine){
  .eco-node{position:relative}
  .eco-peek{
    display:block;position:absolute;left:50%;bottom:calc(100% + 10px);
    width:320px;padding:6px;background:var(--surface-2);
    border:1px solid var(--border-strong);border-radius:var(--r-card);
    box-shadow:var(--shadow);z-index:3;
    opacity:0;visibility:hidden;transform:translate(-50%,6px);
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),
               visibility var(--dur);
  }
  .eco-peek img{display:block;width:100%;height:auto;border-radius:6px}
  .eco-peek-cap{
    display:block;color:var(--text-3);font-size:var(--fs-xs);
    padding:var(--sp-2) var(--sp-1) var(--sp-1);
  }
  .eco-node:hover .eco-peek,
  .eco-node:focus-visible .eco-peek{opacity:1;visibility:visible;transform:translate(-50%,0)}
}
@media(prefers-reduced-motion:reduce){
  .eco-peek{transition:none}
}

/* La horquilla que une una capa con la siguiente. Tres brazos abajo, un
   tronco arriba; la clase `up` la invierte para la capa de protección. */
.eco-branch{
  position:relative;height:var(--sp-5);
  margin-left:var(--eco-inset);margin-right:var(--sp-4);
}
.eco-branch.up{transform:scaleY(-1)}
.eco-branch::before{
  content:"";position:absolute;left:50%;top:0;width:1px;height:50%;background:var(--border-strong);
}
.eco-branch::after{
  content:"";position:absolute;top:50%;left:16.667%;right:16.667%;height:1px;background:var(--border-strong);
}
.eco-branch i{position:absolute;top:50%;height:50%;width:1px;background:var(--border-strong)}
.eco-branch i:nth-child(1){left:16.667%}
.eco-branch i:nth-child(2){left:50%}
.eco-branch i:nth-child(3){left:83.333%}

/* Las tres pruebas de que el conjunto está cableado de verdad. */
.eco-bridges{
  list-style:none;margin-top:var(--sp-5);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);
}
.eco-bridges li{
  color:var(--text-2);font-size:var(--fs-xs);line-height:1.6;
  padding-top:var(--sp-3);border-top:1px solid var(--border);
}
.eco-bridges b{color:var(--text);font-weight:var(--fw-medium)}

/* ── LAS CINCO FICHAS ───────────────────────────────────
   Ninguna manda sobre las otras: mismo bloque, mismas zonas y el mismo
   orden de lectura —captura, capa, nombre, qué hace, tres hechos, con qué
   se empieza—. Lo único que cambia es el ancho, y solo para que la rejilla
   cierre: seis columnas dejan tres fichas de dos y dos de tres. */
.prod-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-5)}
.prod{
  grid-column:span 2;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-card);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--dur);
}
.prod:nth-last-child(-n+2){grid-column:span 3}
.prod:hover{border-color:var(--border-strong)}
.prod[id]{scroll-margin-top:96px}
.prod .shot{display:block;width:100%;height:auto;border-bottom:1px solid var(--border)}
.prod .meta{padding:var(--sp-5);display:flex;flex-direction:column;flex:1}
.prod .cat{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:var(--sp-3)}
.prod h3{margin-bottom:var(--sp-3)}
.prod p{color:var(--text-2);font-size:var(--fs-sm);line-height:1.6;margin-bottom:var(--sp-5)}

/* Tres hechos por ficha, ni uno más: en cuanto una lista crece, la ficha
   que la lleva pesa más que las demás y se acabó la igualdad. */
.prod .hi{list-style:none;margin-bottom:var(--sp-5)}
.prod .hi li{
  color:var(--text-2);font-size:var(--fs-xs);line-height:1.5;
  padding:var(--sp-3) 0;border-top:1px solid var(--border);
}
.prod .hi li:first-child{border-top:0;padding-top:0}

/* El pie queda abajo aunque el texto de arriba no llene lo mismo. */
.prod .foot{
  margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--sp-3);
}
.prod .terms{font-size:var(--fs-xs);color:var(--text-3)}
.prod .terms b{color:var(--text);font-weight:var(--fw-medium)}

/* ── SERVICIOS ──────────────────────────────────────────── */
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-5)}
.service-card{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-card);
  padding:var(--sp-6);display:flex;flex-direction:column;
  transition:border-color var(--dur),background var(--dur);
}
.service-card:hover{border-color:var(--border-strong);background:var(--surface-3)}
.service-card .cat{font-size:var(--fs-xs);color:var(--text-3);margin-bottom:var(--sp-3)}
.service-card h3{margin-bottom:var(--sp-3)}
.service-card p{color:var(--text-2);font-size:var(--fs-sm);line-height:1.6;margin-bottom:var(--sp-5)}
.service-card a.go{margin-top:auto;align-self:flex-start}

/* ── TRABAJO / PROYECTOS ──────────────────────────────────
   Logos en marquesina: todos en blanco a la misma altura, para que
   seis identidades distintas se lean como una sola fila y no compitan
   con el acento. Se desplaza despacio, se detiene al pasar el cursor
   y queda fija si el sistema pide menos movimiento. */
.clients{
  margin:calc(var(--sp-6) * -1) 0 var(--sp-8);
  padding:var(--sp-5) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.clients-track{display:flex;width:max-content;animation:clients-scroll 44s linear infinite}
.clients:hover .clients-track{animation-play-state:paused}
.clients-set{list-style:none;display:flex;align-items:center;gap:var(--sp-9);padding-right:var(--sp-9);margin:0}
.clients-set img{
  display:block;height:30px;width:auto;
  opacity:.6;transition:opacity var(--dur);
}
.clients-set img.tall{height:44px}
.clients-set li:hover img{opacity:1}
@keyframes clients-scroll{to{transform:translateX(-50%)}}
@media(max-width:680px){
  .clients-set{gap:var(--sp-7);padding-right:var(--sp-7)}
  .clients-set img{height:24px}
  .clients-set img.tall{height:36px}
}
@media(prefers-reduced-motion:reduce){
  .clients{-webkit-mask-image:none;mask-image:none}
  .clients-track{animation:none;width:auto;justify-content:center}
  .clients-set{flex-wrap:wrap;justify-content:center;padding-right:0}
  .clients-set[aria-hidden="true"]{display:none}
}

/* Cada caso es un enlace a lo que está en producción: la captura arriba,
   la explicación abajo. El primero ocupa dos columnas porque es el caso
   que mejor se puede verificar de punta a punta. */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.work-grid .work:first-child{grid-column:span 2}
@media(min-width:901px){
  /* Destacado en horizontal: así mide lo mismo que la tarjeta vecina */
  .work-grid .work:first-child{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .work-grid .work:first-child .shot{border-bottom:0;border-right:1px solid var(--border)}
  .work-grid .work:first-child .shot img{height:100%;aspect-ratio:auto;object-position:30% center}
  .work-grid .work:first-child .result{font-size:var(--fs-xl)}
}
@media(max-width:900px){
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .work-grid .work:first-child{grid-column:1/-1}
}
.work{
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-card);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--dur);
}
.work:hover{border-color:var(--border-strong)}
.work .shot{display:block;overflow:hidden;border-bottom:1px solid var(--border);background:var(--surface-3)}
.work .shot img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  transition:transform var(--dur-reveal) var(--ease-reveal);
}
.work:hover .shot img{transform:scale(1.02)}
.work .body{padding:var(--sp-5) var(--sp-6) var(--sp-6);display:flex;flex-direction:column;flex:1}
.work .cat{font-size:var(--fs-xs);color:var(--text-3)}
/* Cifra medida. Cuando exista el dato, sustituye a .result */
.work .metric{
  font-size:var(--fs-3xl);font-weight:var(--fw-medium);letter-spacing:-.04em;line-height:1;
  margin:var(--sp-4) 0 var(--sp-3);font-variant-numeric:tabular-nums;
}
.work .metric small{font-size:.5em;font-weight:var(--fw-medium);letter-spacing:-.02em}
/* Resultado en palabras, mientras la cifra no esté medida */
.work .result{
  font-size:var(--fs-md);font-weight:var(--fw-medium);letter-spacing:-.02em;line-height:1.35;
  margin:var(--sp-4) 0 var(--sp-3);
}
.work .what{color:var(--text-2);font-size:var(--fs-sm);line-height:1.55;margin-bottom:var(--sp-5)}
.work .who{
  margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--border);
  font-size:var(--fs-sm);font-weight:var(--fw-medium);
}
.work .where{color:var(--text-3);font-size:var(--fs-xs);margin-top:var(--sp-1)}
.work .where a{color:var(--text-2);border-bottom:1px solid var(--border-strong);transition:color var(--dur)}
.work .where a:hover{color:var(--text)}

/* ── AI-NATIVE ──────────────────────────────────────────── */
.ai-panel{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--sp-8);
  align-items:start;
}
.ai-panel h2{margin-bottom:var(--sp-5)}
.ai-panel .lead{color:var(--text-2);line-height:1.7;margin-bottom:var(--sp-4)}
.ai-panel .lead strong{color:var(--text);font-weight:var(--fw-medium)}
.ai-panel .origin{font-weight:var(--fw-medium);margin-bottom:var(--sp-6)}
.ai-steps{list-style:none;border-top:1px solid var(--border)}
.ai-steps li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-5);
  padding:var(--sp-5) 0;border-bottom:1px solid var(--border);
}
.ai-steps .n{font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums;padding-top:3px}
.ai-steps strong{display:block;font-weight:var(--fw-medium);margin-bottom:var(--sp-1)}
.ai-steps small{color:var(--text-2);font-size:var(--fs-sm);line-height:1.5}

/* ── PROCESO ────────────────────────────────────────────── */
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
.proc{border-top:1px solid var(--border-strong);padding-top:var(--sp-4)}
.proc .n{font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.proc h3{margin:var(--sp-4) 0 var(--sp-3);font-size:var(--fs-md)}
.proc p{color:var(--text-2);font-size:var(--fs-sm);line-height:1.6}

/* ── CONTEXTO LOCAL ─────────────────────────────────────── */
.local-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--sp-8);align-items:start}
.local-grid .copy p{color:var(--text-2);line-height:1.7;margin-bottom:var(--sp-4);max-width:62ch}
.local-points{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--sp-6)}
.local-points h3{margin-bottom:var(--sp-4);font-size:var(--fs-md)}
.local-points ul{list-style:none}
.local-points li{
  color:var(--text-2);font-size:var(--fs-sm);padding:var(--sp-3) 0;
  border-top:1px solid var(--border);line-height:1.5;
}
.local-points li:first-child{border-top:0;padding-top:0}

/* ── PREGUNTAS FRECUENTES ───────────────────────────────── */
.faq-list{max-width:860px}
.faq-list details{border-top:1px solid var(--border);padding:var(--sp-5) 0}
.faq-list details:last-child{border-bottom:1px solid var(--border)}
.faq-list summary{
  cursor:pointer;font-size:var(--fs-md);font-weight:var(--fw-medium);
  letter-spacing:-.015em;list-style:none;position:relative;padding-right:var(--sp-6);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";position:absolute;right:0;top:-2px;color:var(--text-3);
  font-size:var(--fs-lg);font-weight:var(--fw-regular);line-height:1;
}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{color:var(--text-2);font-size:var(--fs-sm);line-height:1.65;margin-top:var(--sp-3);max-width:66ch}

/* ── QUIÉN RESPONDE ─────────────────────────────────────────
   Plano medio corto, no cuerpo entero: a este tamaño una figura
   completa deja la cara en 25 px y la sección se llama «quién
   responde». El retrato va tratado en un solo tono para que el
   fondo de estudio no meta dos colores ajenos a la paleta ni un
   rectángulo claro en una página oscura. */
.founder{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-8);align-items:center}
.founder-photo{
  width:clamp(240px,28vw,340px);
  border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;
  background:var(--surface-2);
}
.founder-photo img{width:100%;height:auto;display:block}
.founder h2{margin-bottom:var(--sp-5)}
.founder blockquote{
  max-width:54ch;
  font-size:clamp(var(--fs-md),1.8vw,var(--fs-lg));
  color:var(--text-2);
  font-weight:var(--fw-medium);letter-spacing:-.02em;line-height:1.35;
  margin-bottom:var(--sp-6);text-wrap:balance;
}
.founder blockquote .dot{color:var(--accent)}
.founder .who{font-weight:var(--fw-medium);font-size:var(--fs-base)}
.founder .role{color:var(--text-3);font-size:var(--fs-sm);margin-top:var(--sp-1)}
.founder .links{
  margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:var(--sp-5);
}
@media(max-width:820px){
  .founder{grid-template-columns:1fr;gap:var(--sp-6)}
  .founder-photo{width:min(240px,58vw)}
}

/* ── CIERRE ─────────────────────────────────────────────────
   Dos botones no capturan nada: quien llega hasta aquí ya está
   interesado y merece un sitio donde contar su caso. El formulario
   redacta el mensaje y lo entrega por WhatsApp, sin backend. */
.final{padding:var(--section-y) 0;border-top:1px solid var(--border);position:relative;overflow:hidden}
.final .wrap{position:relative;z-index:1}
.final .brand-mark{
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(52vw,540px);height:130%;opacity:.045;
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 78%);
  mask-image:radial-gradient(closest-side,#000 30%,transparent 78%);
}
.final-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--sp-9);align-items:start}
.final h2{max-width:18ch;margin-bottom:var(--sp-5)}
.final .final-copy p{color:var(--text-2);max-width:48ch;line-height:1.6}
.final-points{list-style:none;margin-top:var(--sp-6)}
.final-points li{
  color:var(--text-2);font-size:var(--fs-sm);padding:var(--sp-3) 0;
  border-top:1px solid var(--border);
}
.final .alt-contact{margin-top:var(--sp-6);color:var(--text-3);font-size:var(--fs-sm)}
.final .alt-contact a{color:var(--text-2);border-bottom:1px solid var(--border-strong);padding-bottom:2px;transition:color var(--dur)}
.final .alt-contact a:hover{color:var(--text)}

@media(max-width:900px){
  .final-grid{grid-template-columns:1fr;gap:var(--sp-7)}
}

/* ── RESPONSIVO ─────────────────────────────────────────── */
@media(max-width:1000px){
  .eco{--eco-inset:var(--sp-4)}
  .eco-layer{grid-template-columns:1fr;gap:var(--sp-4);align-items:start}
  .eco-bridges{grid-template-columns:1fr;gap:var(--sp-4)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .prod,.prod:nth-last-child(-n+2){grid-column:span 1}
  .prod:last-child{grid-column:span 2}
  .proc-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
  .ai-panel,.local-grid{grid-template-columns:1fr;gap:var(--sp-7)}
}
@media(max-width:680px){
  /* En una columna la horquilla sobra: basta el tronco que baja. */
  .eco-row.three{grid-template-columns:1fr}
  .eco-row.one .eco-node{grid-template-columns:1fr;gap:var(--sp-2)}
  .eco-branch{height:var(--sp-6)}
  .eco-branch::after,.eco-branch i{display:none}
  .eco-branch::before{height:100%}
  .prod-grid,.service-grid,.work-grid{grid-template-columns:1fr}
  .prod,.prod:nth-last-child(-n+2),.prod:last-child{grid-column:span 1}
  .proc-grid{grid-template-columns:1fr;gap:var(--sp-5)}
  .hero-actions{gap:var(--sp-3)}
  .hero-actions .btn-primary,.hero-actions .btn-secondary{width:100%}
  .final .hero-actions .btn-primary,.final .hero-actions .btn-secondary{width:auto}
}

/* Marca del producto dentro de la tarjeta: el isotipo acompaña al nombre a la
   altura de la mayúscula, sin robarle jerarquía al titular. */
.prod-brand{display:flex;align-items:center;gap:.5rem}
.prod-brand .rumbo-mark,
.prod-brand .argos-mark{width:1.05em;height:1.05em;flex:none}

/* ── EL MAPA EN PANTALLAS TÁCTILES ──────────────────────
   En un móvil no existe «pasar por encima», así que el asomo del sitio real
   —el mismo que en escritorio sale al posar el cursor— lo gobierna aquí el
   desplazamiento: la tarjeta que cruza la franja central de la pantalla es
   la que se abre, y las demás se retiran un paso hasta que les toca. No es
   un adorno: en una columna el mapa se lee tarjeta a tarjeta, y esto marca
   cuál se está leyendo.

   Todo cuelga de .eco-live, clase que solo pone el guion. Sin JS —o con el
   movimiento reducido— la sección se queda exactamente como estaba. */
@media(hover:none),(pointer:coarse){
  .eco-live .eco-layer{transition:border-color var(--dur-reveal) var(--ease-reveal)}
  .eco-live .eco-layer.on{border-color:var(--border-strong)}
  .eco-live .eco-layer.on .eco-tag{color:var(--text-2)}
  .eco-live .eco-tag{transition:color var(--dur-reveal) var(--ease-reveal)}

  /* Tres estados y ni uno más: la que aún no ha entrado, la que ya pasó por
     pantalla y la que se está leyendo. */
  .eco-live .eco-node{
    position:relative;overflow:hidden;
    opacity:.55;transform:translateY(var(--rise)) scale(.985);
    transition:opacity var(--dur-reveal) var(--ease-reveal),
               transform var(--dur-reveal) var(--ease-reveal),
               border-color var(--dur),background var(--dur),box-shadow var(--dur);
  }
  /* La que espera turno se atenúa, pero no tanto como para dejar de leerse:
     por debajo de este punto el texto secundario se cae del contraste AA. */
  .eco-live .eco-node.seen{opacity:.85;transform:none}
  .eco-live .eco-node.on{
    opacity:1;transform:none;
    border-color:var(--border-strong);background:var(--surface-3);
    box-shadow:var(--shadow);
  }
  /* El nombre pesa un punto más mientras la tarjeta manda. */
  .eco-live .eco-name{transition:color var(--dur)}
  .eco-live .eco-node .eco-role{transition:color var(--dur)}
  .eco-live .eco-node.on .eco-role{color:var(--text-2)}

  /* El asomo se abre en el hueco de la propia tarjeta, no flotando encima:
     en una pantalla estrecha un panel superpuesto taparía justo lo que se
     acaba de leer. La altura se anima con la pista del grid, así que el
     bloque crece desde su alto real y no desde un máximo inventado. */
  .eco-live .eco-peek{
    display:grid;grid-template-rows:0fr;opacity:0;
    transition:grid-template-rows .55s var(--ease-reveal),opacity .35s var(--ease);
  }
  .eco-live .eco-row.one .eco-peek{grid-column:1/-1}
  .eco-live .eco-peek-in{display:block;min-height:0;overflow:hidden;padding-top:var(--sp-3)}
  .eco-live .eco-node.on .eco-peek{grid-template-rows:1fr;opacity:1}
  .eco-live .eco-peek img{
    display:block;width:100%;height:auto;max-height:34vh;
    object-fit:cover;object-position:top center;
    border:1px solid var(--border);border-radius:var(--r-control);
    transform:scale(.985);
    transition:transform .55s var(--ease-reveal);
  }
  .eco-live .eco-node.on .eco-peek img{transform:none}
  .eco-live .eco-peek-cap{
    display:block;color:var(--text-3);font-size:var(--fs-xs);padding-top:var(--sp-2);
  }
}

/* El tronco que baja de una capa a la siguiente se dibuja al llegar, y una
   chispa lo recorre una sola vez: es la única pieza del mapa que dice que
   el recorrido tiene sentido de arriba abajo. Solo donde el mapa va en una
   columna —en tablet sigue habiendo horquilla de tres brazos y ahí el
   pseudoelemento es la barra horizontal, no el tronco. */
@media (max-width:680px) and (hover:none),(max-width:680px) and (pointer:coarse){
  .eco-live .eco-branch::before{
    transform-origin:top;transform:scaleY(0);
    transition:transform .6s var(--ease-reveal);
  }
  .eco-live .eco-branch.drawn::before{transform:scaleY(1)}
  .eco-live .eco-branch.drawn::after{
    display:block;content:"";
    top:0;left:50%;right:auto;
    width:5px;height:5px;margin-left:-2px;
    border-radius:var(--r-pill);background:var(--accent);
    animation:eco-spark .9s var(--ease-reveal) .2s both;
  }
}
@keyframes eco-spark{
  from{transform:translateY(0);opacity:0}
  25%{opacity:1}
  to{transform:translateY(var(--sp-6));opacity:0}
}