/* ==========================================================================
   Web conceptual — Modernización de sistemas con agentes de IA
   Grupo Esfera. Hoja propia; los valores salen de los tokens del design system.
   Familia dominante: turquesa. Acento único: magenta, y solo en verificación.
   ========================================================================== */

/* --- Base de página: superficie web, no pieza social ---------------------- */
body{
  background:var(--web-fondo);
  color:var(--web-texto);
  font-family:var(--font-cuerpo-web);
  font-size:var(--web-body);
  line-height:var(--web-lh-body);
}
a{border-bottom-width:1px}

.contenido{
  max-width:var(--web-max);
  margin-inline:auto;
  padding-inline:var(--web-margen);
}
.medida{max-width:var(--web-medida)}

/* Red de seguridad: una palabra larga corta antes que empujar el ancho de la
   página. Los titulares nunca se parten con guión: quedan feos. */
body{overflow-wrap:break-word}
h1,h2,h3{
  font-family:var(--font-titular-web);
  font-weight:var(--weight-titular-web);
  line-height:var(--web-lh-titulo);
  margin:0;
  hyphens:manual;
}
h1{font-size:var(--web-display)}
h2{font-size:var(--web-h2)}
h3{font-size:var(--web-h3)}
p{margin:0 0 var(--space-3)}
p:last-child{margin-bottom:0}

/* --- Volanta: Anka Coder, mayúsculas, tracking abierto -------------------- */
.volanta{
  font-family:var(--font-tecnica);
  font-size:var(--web-label);
  font-weight:var(--weight-tecnica);
  text-transform:uppercase;
  letter-spacing:var(--track-etiqueta);
  line-height:var(--lh-etiqueta);
  margin:0;
}

/* --- Chrome: header ------------------------------------------------------- */
.header{
  height:var(--header-h);
  display:flex;
  align-items:center;
  position:relative;
  z-index:2;
}
.header .contenido{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
}
.header img{height:48px;width:auto}
/* Enlaces de chrome: el subrayado aparece recién al pasar el mouse, como en
   grupoesfera.com.ar. Los enlaces dentro de un párrafo sí van subrayados
   siempre: ahí la línea es lo único que los separa del texto. */
.header a{
  color:var(--text-on-color);
  border-bottom-color:transparent;
  font-size:var(--web-small);
}
.header a:hover,.header a:focus-visible{border-bottom-color:var(--text-on-color)}

/* --- Hero: banda saturada con onda de salida ------------------------------ */
.hero{
  background:var(--accent);
  color:var(--text-on-color);
  position:relative;
}
.hero__cuerpo{padding-block:var(--space-4) 200px}
.hero .volanta{color:color-mix(in srgb,var(--text-on-color) 80%,transparent)}
.hero h1{margin:var(--space-3) 0 var(--space-4);max-width:20ch}
.hero__bajada{
  font-size:var(--web-lead);
  line-height:var(--web-lh-lead);
  max-width:58ch;
  margin:0;
}
/* Onda: barrido largo, poca amplitud, tintes al 100 / 55 / 26 % */
.onda{position:absolute;left:0;right:0;bottom:-1px;height:190px;width:100%;display:block}

/* --- Ritmo de secciones --------------------------------------------------- */
/* Desviación deliberada del ritmo del sistema: --sec-y son 120px arriba y
   120 abajo, o sea 240px entre secciones, y a esta densidad de contenido se
   leen como hueco. Se usa el paso compacto, que también es del sistema. La
   alternancia de fondo ya separa una sección de la siguiente. */
.seccion{padding-block:var(--sec-y-compacta)}
.seccion--alt{background:var(--web-fondo-alt)}
.seccion__cabecera{margin-bottom:var(--sec-gap)}
.seccion__cabecera h2{margin-top:var(--space-2);max-width:26ch}
.seccion__intro{margin-top:var(--space-4)}
.seccion__intro p{color:var(--web-texto-2)}

/* Marcador `regla`: volanta sobre una regla de 1px en color de acento */
.marcador--regla{border-top:1px solid var(--accent);padding-top:var(--space-2)}
.marcador--regla .volanta{color:var(--accent)}

/* Marcador `chevron`: el chevron doble del inventario de marca */
.marcador--chevron .volanta{color:var(--accent)}
.marcador--chevron .volanta::before{
  content:"\00BB\00BB\00BB";
  letter-spacing:0;
  margin-right:.8em;
}

/* Marcador `trama`: cuadrícula de puntos. Una sola por página. */
.marcador--trama .volanta{color:var(--accent);position:relative;padding-top:var(--space-5);display:block}
.marcador--trama .volanta::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:132px;height:38px;
  background-image:radial-gradient(var(--accent) 1.6px,transparent 1.6px);
  background-size:12px 12px;
  opacity:.5;
}

/* --- Tarjetas ------------------------------------------------------------- */
.grilla{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-4);
  align-items:start;
}
.tarjeta{
  background:var(--web-card);
  border:1px solid var(--web-borde-card);
  border-radius:var(--web-radio-card);
  padding:var(--space-5);
  box-shadow:var(--web-sombra-card);
  height:100%;
}
.tarjeta__paso{
  font-family:var(--font-tecnica);
  font-size:var(--web-label);
  letter-spacing:var(--track-etiqueta);
  color:var(--accent);
  display:block;
  margin-bottom:var(--space-2);
}
.tarjeta h3{margin-bottom:var(--space-2)}
.tarjeta p{color:var(--web-texto-2)}

/* --- Detalle técnico: se abre solo si el lector lo pide -------------------- */
/* El disparador es una pill: ocupa solo lo que mide su texto, así no deja una
   franja vacía cuando está cerrado. El chevron doble es del inventario de marca. */
.detalle{margin-top:var(--space-4);max-width:var(--web-medida)}
.detalle + .detalle{margin-top:var(--space-2)}
.detalle > summary{
  cursor:pointer;
  list-style:none;
  width:fit-content;
  max-width:100%;
  padding:.85em 1.3em;
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:var(--web-radio-pill);
  font-family:var(--font-tecnica);
  font-size:var(--web-label);
  letter-spacing:var(--track-etiqueta);
  text-transform:uppercase;
  color:var(--accent-oscuro);
  background:var(--web-card);
  display:flex;
  align-items:center;
  gap:1em;
  transition:border-color var(--dur-web) var(--ease-web),
             background var(--dur-web) var(--ease-web);
}
.detalle > summary::-webkit-details-marker{display:none}
.detalle > summary::after{
  content:"\00BB";
  font-family:var(--font-cuerpo-web);
  font-weight:800;
  font-size:16px;
  line-height:1;
  letter-spacing:0;
  margin-left:auto;
  flex:none;
  transition:transform var(--dur-web) var(--ease-web);
}
.detalle[open] > summary::after{transform:rotate(90deg)}
.detalle > summary:hover{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,var(--web-card));
}
.detalle__cuerpo{
  margin-top:var(--space-3);
  padding:0 0 0 var(--space-4);
  border-left:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  color:var(--web-texto-2);
}
.detalle__cuerpo dl{margin:0}
.detalle__cuerpo dt{
  font-weight:700;
  color:var(--web-texto);
  margin-top:var(--space-3);
}
.detalle__cuerpo dt:first-child{margin-top:0}
.detalle__cuerpo dd{margin:.35em 0 0}

/* --- Lenguajes de origen: pills, no una enumeración dentro de un párrafo -- */
.tecnologias{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin:var(--sec-gap) 0 0;
  padding:0;
  list-style:none;
}
/* Neutras a propósito: el trazo en acento queda reservado para lo clickeable. */
.tecnologias li{
  font-family:var(--font-tecnica);
  font-size:var(--web-small);
  padding:.55em 1.2em;
  border:1px solid var(--web-borde-card);
  border-radius:var(--web-radio-pill);
  color:var(--web-texto-2);
  background:var(--web-card);
}
/* Asterisco: llamada a la nota de abajo. Va en acento para que se lea como
   marca y no como parte del nombre del lenguaje. */
.asterisco{
  color:var(--accent-oscuro);
  font-weight:700;
  margin-left:.15em;
}
.tecnologias__pie{
  margin:var(--space-3) 0 0;
  font-size:var(--web-small);
  color:var(--web-texto-3);
}
.tecnologias__pie .asterisco{margin:0 .35em 0 0}

/* --- Lista de entregables ------------------------------------------------- */
.lista{list-style:none;margin:0;padding:0;max-width:var(--web-medida)}
.lista li{
  padding:var(--space-3) 0;
  border-top:1px solid var(--web-borde-card);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--space-3);
  color:var(--web-texto-2);
}
.lista li::before{content:"\2192";color:var(--accent);font-weight:700}
.lista strong{color:var(--web-texto);font-weight:700}

/* ==========================================================================
   Gráfico 1 — Convivencia: tres carriles
   Muestra que el sistema actual sigue atendiendo lo que todavía no se migró.
   Vertical por naturaleza: no exige desplazamiento horizontal en ningún ancho.
   ========================================================================== */
.carriles{
  /* margin en shorthand: anula el margen que el navegador le da a <figure>
     sin necesidad de un style inline, que además pisaba este margin-top. */
  margin:var(--sec-gap) 0 0;
  border:1px solid var(--web-borde-card);
  border-radius:var(--web-radio-caja);
  background:var(--web-card);
  padding:var(--space-5);
}
.carril{
  display:grid;
  grid-template-columns:minmax(150px,190px) 1fr;
  gap:var(--space-4);
  align-items:center;
  padding-block:var(--space-4);
}
.carril + .carril{border-top:1px solid var(--web-borde-card)}
/* El nombre del carril va en Anka Coder mayúsculas; la aclaración, en Inter
   caja normal, que es mucho más fácil de leer en tres renglones. */
.carril__nombre{
  font-size:var(--web-small);
  line-height:1.45;
  color:var(--web-texto-3);
  margin:0;
}
.carril__nombre b{
  display:block;
  font-family:var(--font-tecnica);
  font-size:var(--web-label);
  font-weight:400;
  letter-spacing:var(--track-etiqueta);
  text-transform:uppercase;
  color:var(--web-texto);
  margin-bottom:.45em;
}
.porciones{display:flex;gap:var(--space-2);flex-wrap:wrap}
.porcion{
  flex:1 1 84px;
  min-height:56px;
  border-radius:var(--web-radio-caja);
  display:grid;
  place-items:center;
  text-align:center;
  font-size:var(--web-small);
  line-height:1.3;
  padding:var(--space-2);
  border:1px solid var(--web-borde-card);
  background:var(--web-fondo-alt);
  color:var(--web-texto-3);
}
/* Estado por relleno Y por trazo, no solo por color */
.porcion--pendiente{border-style:dashed;border-color:var(--web-texto-3)}
.porcion--actual{background:var(--web-texto);color:#fff;border-color:var(--web-texto)}
.porcion--curso{border:2px solid var(--accent);color:var(--accent-oscuro);background:var(--web-card)}
.porcion--lista{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.porcion--vacia{background:transparent;border:1px dashed var(--web-borde-card);color:transparent}
.carriles__pie{
  margin-top:var(--space-4);
  padding-top:var(--space-3);
  border-top:1px solid var(--web-borde-card);
  font-size:var(--web-small);
  color:var(--web-texto-3);
}

/* ==========================================================================
   Gráfico 2 — Las tres capas de verificación
   Cada capa dice qué tipo de problema detecta. Cada actor se distingue por
   forma además de por color: agente redondeado, script cuadrado, persona círculo.
   ========================================================================== */
.capas{margin-top:var(--sec-gap);display:grid;gap:var(--space-3)}
.capa{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--space-4);
  align-items:start;
  background:var(--web-card);
  border:1px solid var(--web-borde-card);
  border-radius:var(--web-radio-card);
  padding:var(--space-5);
  box-shadow:var(--web-sombra-card);
}
.capa__num{
  display:block;
  font-family:var(--font-tecnica);
  font-size:var(--web-label);
  letter-spacing:var(--track-etiqueta);
  text-transform:uppercase;
  color:var(--accent-oscuro);
  margin-bottom:.4em;
}
.capa h3{margin-bottom:var(--space-2)}
.capa p{color:var(--web-texto-2);margin-bottom:var(--space-2)}
.capa__detecta{
  font-family:var(--font-tecnica);
  font-size:var(--web-label);
  letter-spacing:var(--track-etiqueta);
  text-transform:uppercase;
  color:var(--web-texto-3);
  margin:0;
}
.capa__detecta b{color:var(--ge-magenta);font-weight:400}

/* Actor: la forma es la que informa */
.actor{
  width:44px;height:44px;
  flex:none;
  display:grid;place-items:center;
  font-family:var(--font-tecnica);
  font-size:15px;
  color:var(--on-accent);
  background:var(--accent);
}
.actor--agente{border-radius:var(--web-radio-caja);--icono-actor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.2v3.6'/%3E%3Crect x='3.2' y='6' width='17.6' height='13.6' rx='4.2'/%3E%3Cpath d='M9 12.4v1.8M15 12.4v1.8'/%3E%3C/svg%3E")}
.actor--script{border-radius:0;background:var(--web-texto);--icono-actor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 6.4 10 12l-5.8 5.6'/%3E%3Cpath d='M12.4 17.8h7.4'/%3E%3C/svg%3E")}
.actor--persona{border-radius:var(--web-radio-pill);background:var(--web-card);color:var(--accent-oscuro);border:2px solid var(--accent);--icono-actor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.6' r='3.9'/%3E%3Cpath d='M4.6 20.2a7.4 7.4 0 0 1 14.8 0'/%3E%3C/svg%3E")}

/* Cuando el actor no lleva número adentro, lleva su ícono: robot para el
   agente, prompt de consola para el script, silueta para la persona. Van
   dibujados a mano —el sistema no usa librería de íconos— y entran como
   máscara para que tomen el color de texto del actor, no un color propio.
   La forma del recuadro sigue informando: no es la única señal, es una más. */
.actor:empty::after{
  content:"";
  width:26px;height:26px;
  background:currentColor;
  -webkit-mask:var(--icono-actor) center/contain no-repeat;
  mask:var(--icono-actor) center/contain no-repeat;
}

.leyenda{
  margin-top:var(--space-5);
  padding-top:var(--space-4);
  border-top:1px solid var(--web-borde-card);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3) var(--space-5);
  font-size:var(--web-small);
  line-height:1.25;
  color:var(--web-texto-3);
}
/* Hijos directos: si el selector es .leyenda span también agarra al .actor
   de adentro y le pisa el display:grid con el que centra su ícono. */
.leyenda > span{
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.leyenda .actor{width:30px;height:30px;font-size:11px}
.leyenda .actor:empty::after{width:18px;height:18px}
/* Muestra de la caja de trazo discontinuo que marca los puntos de control */
.leyenda__porton{
  width:30px;height:30px;flex:none;
  border:2px dashed var(--accent);
  border-radius:8px;
  background:color-mix(in srgb,var(--accent) 6%,var(--web-card));
}

/* ==========================================================================
   Gráfico 3 — El proceso, en forma de infografía
   Tres carriles: lo que hacen los agentes, la etapa, y dónde decide tu equipo.
   Los actores se distinguen por forma; los puntos de aprobación, por trazo
   discontinuo. No se agrega una tercera familia de color.
   ========================================================================== */
.proceso{margin-top:var(--sec-gap)}

/* Las tres cabeceras son pastillas, no rótulos sueltos: son la clave de
   lectura de todo el gráfico y tienen que pesar más que una nota lateral.
   Los íconos miran hacia la columna del medio, que es la columna espina. */
.carriles-titulo{
  display:grid;
  grid-template-columns:1fr minmax(0,2.1fr) 1fr;
  gap:var(--space-4);
  align-items:end;
  margin-bottom:var(--space-4);
  padding-bottom:var(--space-3);
  border-bottom:1px solid var(--web-borde-card);
}
.carril-tit{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-family:var(--font-tecnica);
  font-size:var(--web-label);
  font-weight:var(--weight-tecnica);
  letter-spacing:var(--track-etiqueta);
  text-transform:uppercase;
  line-height:1.15;
  padding:.55em 1.1em;
  border-radius:var(--web-radio-pill);
  border:1px solid transparent;
}
.carril-tit .actor{width:26px;height:26px}
.carril-tit .actor:empty::after{width:16px;height:16px}

.carril-tit--ia{
  justify-self:end;
  flex-direction:row-reverse;
  text-align:right;
  color:var(--accent-oscuro);
  background:color-mix(in srgb,var(--accent) 10%,var(--web-card));
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
}
.carril-tit--etapa{
  justify-self:center;
  color:var(--on-accent);
  background:var(--web-texto);
}
.carril-tit--humano{
  justify-self:start;
  color:var(--web-texto);
  background:var(--web-card);
  border-color:var(--web-texto);
}

.etapa-fila{
  display:grid;
  grid-template-columns:1fr minmax(0,2.1fr) 1fr;
  gap:var(--space-4);
  align-items:center;
}
.nota-lateral{font-size:var(--web-small);line-height:1.45;color:var(--web-texto-3)}
.nota-lateral b{
  display:block;
  font-family:var(--font-tecnica);
  font-size:11px;
  font-weight:400;
  letter-spacing:var(--track-etiqueta);
  text-transform:uppercase;
  margin-bottom:.3em;
}
.nota-lateral--ia{text-align:right}
.nota-lateral--ia b{color:var(--accent-oscuro)}
.nota-lateral--humano b{color:var(--web-texto)}

.etapa{
  background:var(--web-card);
  border:1px solid var(--web-borde-card);
  border-radius:var(--web-radio-card);
  box-shadow:var(--web-sombra-card);
  padding:var(--space-4) var(--space-5);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--space-4);
  align-items:start;
}
/* Una etapa casi nunca tiene un solo actor: se apilan todos los que
   participan, siempre en el mismo orden que los carriles —agente, script,
   persona— para que la pila se lea igual en toda la página. */
.etapa__actores{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
/* Más chicos que el actor suelto: acá van de a dos o tres y en pila, y a 44px
   le ganaban peso al título de la etapa. */
.etapa__actores .actor{width:34px;height:34px}
.etapa__actores .actor:empty::after{width:20px;height:20px}
.etapa h3{font-size:var(--web-h3);margin-bottom:.25em}
.etapa p{font-size:var(--web-small);color:var(--web-texto-2);margin:0}
.etapa__tipo{
  display:block;
  font-family:var(--font-tecnica);
  font-size:11px;
  letter-spacing:var(--track-etiqueta);
  text-transform:uppercase;
  color:var(--accent-oscuro);
  margin-bottom:.4em;
}
/* Punto de aprobación: trazo discontinuo, no un color nuevo */
.etapa--porton{
  border:2px dashed var(--accent);
  background:color-mix(in srgb,var(--accent) 6%,var(--web-card));
  box-shadow:none;
}
.etapa--porton .etapa__tipo{color:var(--web-texto)}

/* Nota chica dentro de una etapa, tipo pill */
.nota-pill{
  display:inline-block;
  margin-top:var(--space-2);
  padding:.35em 1em;
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  border-radius:var(--web-radio-pill);
  font-size:13px;
  line-height:1.4;
  color:var(--accent-oscuro);
  background:var(--web-fondo);
}

/* Conector entre etapas */
.conector{
  display:flex;
  flex-direction:column;
  align-items:center;
  color:var(--web-texto-3);
}
.conector::before{
  content:"";
  width:2px;height:28px;
  background:linear-gradient(var(--accent),var(--web-borde-card));
}
.conector::after{content:"\25BC";font-size:11px;line-height:.8;margin-top:-2px}

/* Caja del ciclo que se repite por cada parte */
.ciclo{
  border:2px solid var(--accent);
  border-radius:var(--web-radio-card);
  background:color-mix(in srgb,var(--accent) 5%,transparent);
  padding:var(--space-6) var(--space-4) var(--space-4);
  position:relative;
}
.ciclo__tag{
  position:absolute;
  top:-15px;left:50%;
  transform:translateX(-50%);
  background:var(--accent);
  color:var(--on-accent);
  font-family:var(--font-tecnica);
  font-size:var(--web-label);
  letter-spacing:var(--track-etiqueta);
  text-transform:uppercase;
  padding:.5em 1.4em;
  border-radius:var(--web-radio-pill);
  white-space:nowrap;
  max-width:calc(100% - var(--space-4));
  overflow:hidden;
  text-overflow:ellipsis;
}
.ciclo__vuelta{
  margin-top:var(--space-4);
  text-align:center;
  font-family:var(--font-tecnica);
  font-size:var(--web-label);
  letter-spacing:var(--track-etiqueta);
  text-transform:uppercase;
  color:var(--accent-oscuro);
}
/* Dentro del ciclo el fondo ya está teñido: los puntos de control van en
   blanco para que el trazo discontinuo sea la única señal, como en la leyenda. */
.ciclo .etapa{box-shadow:none}
.ciclo .etapa--porton{background:var(--web-card)}

/* --- Cierre: única sección de color pleno, cerca del final ---------------- */
.cierre{
  background:var(--accent);
  color:var(--text-on-color);
  padding-block:var(--sec-y-compacta);
}
.cierre h2{margin-bottom:var(--space-4);max-width:22ch}
.cierre p{font-size:var(--web-lead);line-height:var(--web-lh-lead);max-width:56ch}
.cierre p + p{margin-top:var(--space-3)}
.cierre a{
  color:var(--text-on-color);
  border-bottom-color:color-mix(in srgb,var(--text-on-color) 50%,transparent);
}
.cierre a:hover{color:var(--text-on-color);border-bottom-color:var(--text-on-color)}

/* --- Footer --------------------------------------------------------------- */
.footer{
  background:var(--footer-fondo);
  color:rgba(255,255,255,.72);
  padding-block:var(--space-6);
  font-size:var(--web-small);
}
.footer .contenido{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  flex-wrap:wrap;
}
.footer img{height:38px;width:auto}
.footer p{margin:0}
.footer a{color:#fff;border-bottom-color:transparent}
.footer a:hover,.footer a:focus-visible{border-bottom-color:#fff}

/* Texto que solo leen los lectores de pantalla: describe un gráfico */
.solo-lectores{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --- Foco visible --------------------------------------------------------- */
:focus-visible{
  outline:var(--foco-web) solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* --- Entrada al scroll: 420 ms, una vez, nunca en bucle ------------------- */
.aparece{opacity:0;transform:translateY(14px)}
.aparece.visible{
  opacity:1;transform:none;
  transition:opacity 420ms var(--ease-web),transform 420ms var(--ease-web);
}
@media (prefers-reduced-motion:reduce){
  .aparece,.aparece.visible{opacity:1;transform:none;transition:none}
}

/* --- Breakpoints: los tres del sistema, sin intermedios ------------------- */
@media (max-width:1000px){
  .contenido{padding-inline:var(--web-margen-tablet)}
  .seccion{padding-block:56px}   /* recorte proporcional al de desktop */
  .grilla{grid-template-columns:1fr;gap:var(--space-3)}
  h1{font-size:var(--web-h1)}
}
@media (max-width:750px){
  .contenido{padding-inline:var(--web-margen-mobile)}
  .seccion{padding-block:var(--sec-y-mobile)}
  .seccion__cabecera{margin-bottom:var(--sec-gap-mobile)}
  body{font-size:var(--web-body-mobile)}
  h1{font-size:var(--web-display-mobile)}
  h2{font-size:var(--web-h2-mobile)}
  h3{font-size:var(--web-h3-mobile)}
  .header a{font-size:14px}
  .hero__bajada,.cierre p{font-size:var(--web-lead-mobile)}
  .hero__cuerpo{padding-block:var(--space-3) 125px}
  .onda{height:105px}
  .header{height:var(--header-h-mobile)}
  .footer .contenido{flex-direction:column;align-items:flex-start}
  /* Los gráficos se apilan: ninguno pide desplazamiento horizontal */
  .carriles{padding:var(--space-4)}
  .carril{grid-template-columns:1fr;gap:var(--space-3)}
  .porcion{flex:1 1 64px;min-height:48px}
  .capa{grid-template-columns:1fr;gap:var(--space-3);padding:var(--space-4)}
  .leyenda{gap:var(--space-3);flex-direction:column}
  /* La infografía del proceso pasa a una sola columna: las notas laterales
     bajan debajo de su etapa y se leen en orden. */
  .carriles-titulo{display:none}
  .etapa-fila{grid-template-columns:1fr;gap:var(--space-3)}
  .etapa-fila > .etapa{order:-1}          /* la etapa primero, después sus notas */
  .etapa-fila > div:empty{display:none}
  .nota-lateral--ia{text-align:left}
  .etapa{padding:var(--space-4);gap:var(--space-3)}
  /* La etiqueta del ciclo no entra en una línea a este ancho: deja de flotar
     sobre el borde y pasa a ser un bloque centrado que puede envolver. */
  .ciclo{padding:var(--space-4) var(--space-3) var(--space-3)}
  .ciclo__tag{
    position:static;
    transform:none;
    display:block;
    width:fit-content;
    max-width:100%;
    margin:0 auto var(--space-4);
    white-space:normal;
    overflow:visible;
    text-align:center;
    font-size:11px;
    padding:.6em 1.1em;
  }
}