/* =============================================================================
   AUTOMATIZACIONES.CSS — /servicios/automatizacion-ia  (sesión 9, 22-sep-2026)
   -----------------------------------------------------------------------------
   Hoja propia de la landing de automatizaciones con n8n e IA. NO entra en el bundle de
   build-css.php (solo la usa esta página); includes/header.php la enlaza aparte vía
   $pageStyles, igual que servidor-archivos.css.

   Se escribe SOBRE el sistema del sitio (css/variables.css): mismos tokens, misma
   tipografía, mismo rojo en dos piezas. No redefine ningún token.

   Decisiones que conviene no deshacer sin motivo:
   - La cabecera NO usa la clase .hero de la portada. css/hero.css está escrita para la
     foto de Santiago y por debajo de 767 px oculta los puntos clave y mete 200-280 px de
     hueco (ver la nota de memoria y el bloque INTEGRACION de servidor-archivos.css). Aquí
     se usa .aut-hero, que no hereda nada de eso.
   - La cabecera es oscura desde el borde superior: el menú es una isla casi transparente
     con texto casi blanco y sobre cualquier franja clara cae a 1,07:1 de contraste.
   - El único color fuera de la paleta es el verde de estado del lienzo (#3FB67A), y solo
     para decir "este paso se ejecutó". Es un color funcional, no decorativo.
   - Radios y sombras: los del sitio (casi cero). Separación con reglas de 1 px.
   Ratios de contraste calculados con la fórmula de WCAG 2.x.
   ========================================================================== */

:root {
  --aut-ok: #3FB67A;          /* gráfico sobre --carbon-2: 6,33:1 (1.4.11 pide 3:1) */
  --aut-lienzo: #211C18;      /* fondo del lienzo, entre carbón y carbón-2 */
  --aut-punto: rgba(251, 250, 248, .09);
}

/* ---------------------------------------------------------------------------
   1. Cabecera
   --------------------------------------------------------------------------- */
.aut-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--carbon);
  color: var(--papel);
  /* Menos aire arriba: en un portátil de 1366 × 768 el primer botón quedaba bajo el pliegue. */
  padding-top: calc(var(--nav-h) + clamp(32px, 4vw, 56px));
  padding-bottom: clamp(48px, 6.5vw, 96px);
}

/* Halo de marca, como el de la portada (.hero__luz): estático y muy tenue. */
.aut-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 50% at 12% 30%, rgba(230, 57, 70, .10) 0%, transparent 64%);
}

/* Foco sobre las superficies oscuras de esta página. El rojo de marca del foco general da
   2,62-2,89:1 sobre carbón; --brand-lift da 7,97:1 sobre carbón y 7,23:1 sobre carbón-2
   (WCAG 1.4.11). .section--dark cubre "Dónde se instala" y el cierre; .footer, los enlaces
   del pie. Esta hoja va aparte del bundle, así que no depende del arreglo de build-css.php. */
.aut-hero :focus-visible,
.aut-calc :focus-visible,
.aut-barra-movil :focus-visible,
.section--dark :focus-visible,
.footer :focus-visible { outline-color: var(--brand-lift); }
.aut-hero .eyebrow { color: var(--tinta-2-dark); }

.aut-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

.aut-hero__texto { min-width: 0; }

.aut-hero__titulo {
  font-size: clamp(2.375rem, 2.6vw + 1rem, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tk-display);
  color: var(--papel);
  margin: var(--gap-md) 0 var(--gap-lg);
  text-wrap: balance;
}

.aut-hero__bajada {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--tinta-2-dark);                             /* 10,20:1 */
  max-width: 54ch;
  margin: 0 0 var(--gap-xl);
}

/* Precio: una línea técnica, no una tarjeta de oferta. */
.aut-hero__precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0 0 var(--gap-xl);
  padding: 14px 0;
  border-top: 1px solid var(--regla-dark);
  border-bottom: 1px solid var(--regla-dark);
  max-width: 54ch;
}
.aut-hero__precio-etq {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-2-dark);
  flex-basis: 100%;
}
.aut-hero__precio-monto {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tk-title);
  color: var(--papel);
  font-variant-numeric: tabular-nums;
}
/* "desde" pequeño y la cifra grande, igual que en la ficha de precio. */
.aut-hero__precio-desde {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--tinta-2-dark);                             /* 10,20:1 */
  margin-right: 4px;
}
.aut-hero__precio-nota { font-size: var(--fs-sm); color: var(--tinta-2-dark); }

.aut-hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-md);
}

/* Los hechos van bajo las dos columnas, a todo el ancho (hijo directo de .aut-hero__inner). */
.aut-hero__hechos {
  grid-column: 1 / -1;
  list-style: none;
  padding: var(--gap-lg) 0 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 24px;
  border-top: 1px solid var(--regla-dark);
}
.aut-hero__hechos li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: #E8E3DC;                                          /* 14,6:1 sobre carbón */
}
.aut-hero__hechos svg { flex: none; margin-top: 2px; color: var(--brand-lift); }

/* ---------------------------------------------------------------------------
   2. El lienzo del flujo (la pieza visual de la cabecera)
   ---------------------------------------------------------------------------
   Reproduce la idea del editor de n8n —nodos unidos por conexiones sobre una rejilla de
   puntos, con los subnodos del agente colgando por debajo— sin copiar su interfaz.
   Las coordenadas salen de un lienzo interno de 720 × 440: los nodos se colocan en
   porcentaje sobre esa caja y el SVG de las conexiones usa el mismo viewBox, así que las
   líneas caen siempre en los puertos, a cualquier ancho.
   Los textos de los nodos son TEXTO REAL (el lector de pantalla recorre la lista en
   orden); las conexiones son decorativas y van aria-hidden. */
.aut-flujo {
  margin: 0;
  min-width: 0;
  /* Arriba, a la altura del titular: centrado en la columna de texto (que es alta)
     quedaba un hueco grande sobre el esquema. */
  align-self: start;
  margin-top: clamp(0px, 3.2vw, 56px);
  background: var(--carbon-2);
  border: 1px solid var(--regla-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* El contenedor de las consultas es la figura y no el lienzo: una consulta de contenedor
     no puede dar estilo al propio contenedor, y el @container de abajo tiene que cambiarle
     el aspect-ratio y el padding al lienzo. La figura mide lo mismo que el lienzo (su borde
     no cuenta), así que las unidades cqw no cambian. */
  container-type: inline-size;
}

.aut-flujo__lienzo {
  position: relative;
  aspect-ratio: 720 / 440;
  background-color: var(--aut-lienzo);
  background-image: radial-gradient(var(--aut-punto) 1px, transparent 1.2px);
  background-size: 18px 18px;
}

.aut-flujo__cables {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.aut-cable {
  fill: none;
  stroke: #8F8781;                 /* --borde-campo-dark: 3,9:1 sobre el lienzo */
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.aut-cable--sub { stroke-dasharray: 5 5; }
.aut-cable__etq {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: #C9C2BA;
}

.aut-flujo__nodos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aut-nodo {
  position: absolute;
  /* x, y, w, h llegan como propiedades personalizadas en el style de cada nodo,
     en unidades del lienzo de 720 × 440 */
  left: calc(var(--x) / 720 * 100%);
  top: calc(var(--y) / 440 * 100%);
  width: calc(var(--w) / 720 * 100%);
  height: calc(var(--h) / 440 * 100%);
}

.aut-nodo__caja {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6cqw;
  background: #2E2823;
  border: 2px solid #8F8781;
  border-radius: 1.4cqw;
  color: var(--papel);
  transition: border-color .35s var(--ease-out);
}
.aut-nodo__caja img,
.aut-nodo__caja svg {
  width: 6.2cqw;
  height: 6.2cqw;
  flex: none;
}
.aut-nodo__caja svg { color: var(--papel); }

/* En el HTML el nombre y el tipo van DENTRO de la caja (en .aut-nodo__dentro), porque así
   los muestra el esquema apilado. En el esquema ancho cuelgan debajo del nodo: el envoltorio
   no genera caja y la caja no está posicionada, así que la referencia de posición sigue
   siendo el <li>, igual que antes. El agente es la excepción: su texto va dentro siempre. */
.aut-nodo:not(.aut-nodo--agente) .aut-nodo__caja { position: static; }
.aut-nodo:not(.aut-nodo--agente) .aut-nodo__dentro { display: contents; }
/* "Si no hace falta revisar:" / "Si hay que revisar:": solo en el apilado. En el ancho
   rotulan las ramas el "no" y el "sí" del SVG. */
.aut-nodo__rama { display: none; }

.aut-nodo__nombre,
.aut-nodo__tipo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 190%;
  text-align: center;
  line-height: 1.2;
}
.aut-nodo__nombre {
  top: calc(100% + 1.1cqw);
  font-size: clamp(12px, 2.05cqw, 15px);
  font-weight: var(--fw-semibold);
  color: var(--papel);
}
.aut-nodo__tipo {
  top: calc(100% + 1.1cqw + clamp(14px, 2.7cqw, 20px));
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.7cqw, 12.5px);
  color: #C9C2BA;                                          /* 10,2:1 sobre el lienzo */
}
/* Con el mínimo de 11 px, dos tipos quedan justos en una línea: el del primer nodo
   ("Gmail, Outlook o IMAP"), pegado al borde izquierdo del lienzo, y el de la decisión
   (5.º nodo), que tiene el cable gris del "sí" a la derecha. Pasan a dos líneas antes que
   cortarse o montarse sobre el cable. */
.aut-nodo:first-child .aut-nodo__tipo,
.aut-nodo:nth-child(5) .aut-nodo__tipo { max-width: 128%; }

/* El agente de IA es un nodo ancho con el texto dentro, como en n8n. */
.aut-nodo--agente .aut-nodo__caja {
  justify-content: flex-start;
  padding: 0 2cqw;
}
.aut-nodo--agente .aut-nodo__dentro { display: flex; flex-direction: column; gap: .4cqw; text-align: left; }
.aut-nodo--agente .aut-nodo__nombre,
.aut-nodo--agente .aut-nodo__tipo {
  position: static;
  transform: none;
  width: auto;
  max-width: none;
  text-align: left;
}

/* Subnodos redondos: el modelo de IA y la información del negocio. */
.aut-nodo--sub .aut-nodo__caja { border-radius: 50%; border-style: dashed; }
.aut-nodo--sub .aut-nodo__tipo { width: 150%; max-width: 150%; white-space: normal; }
.aut-nodo--sub .aut-nodo__caja img,
.aut-nodo--sub .aut-nodo__caja svg { width: 5.4cqw; height: 5.4cqw; }

/* Recorrido marcado: el camino que toma una consulta común (lo pinta js/automatizaciones.js). */
.aut-nodo.es-ok .aut-nodo__caja { border-color: var(--aut-ok); }
.aut-cable.es-ok { stroke: var(--aut-ok); }

.aut-flujo__pie {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--regla-dark);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--tinta-2-dark);
}
.aut-flujo__pie strong { color: var(--papel); font-weight: var(--fw-semibold); }

/* En un lienzo estrecho (móvil, y la cabecera a una columna en anchos chicos) los nodos no
   caben en horizontal: se apilan en una columna, con el texto DENTRO de cada caja, y se
   esconde el SVG. Geometría: caja con borde de 2 px y padding de 12 px, icono de 28 px, así
   que el centro del icono cae en x = 28 px y la línea principal (2 px) va en left: 27px.
   - Los subnodos del agente se sangran 40 px y cuelgan con línea discontinua (su icono queda
     en x = 68); la línea principal sigue por su izquierda hasta la decisión.
   - Las dos ramas también se sangran 40 px y salen de la línea principal con un codo; la
     rotulan "Si no hace falta revisar:" / "Si hay que revisar:", porque sin el SVG no hay
     "no" ni "sí" y parecían dos pasos seguidos. */
@container (max-width: 540px) {
  .aut-flujo__lienzo { aspect-ratio: auto; padding: 18px 16px; }
  .aut-flujo__cables { display: none; }
  .aut-flujo__nodos { display: flex; flex-direction: column; gap: 14px; }
  .aut-nodo {
    position: relative;
    left: auto; top: auto; width: auto; height: auto;
  }
  .aut-nodo .aut-nodo__caja {
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
  }
  .aut-nodo__caja img, .aut-nodo__caja svg,
  .aut-nodo--sub .aut-nodo__caja img, .aut-nodo--sub .aut-nodo__caja svg { width: 28px; height: 28px; }
  .aut-nodo--sub .aut-nodo__caja,
  .aut-nodo--rama .aut-nodo__caja { margin-left: 40px; }
  .aut-nodo--sub .aut-nodo__caja { border-radius: 8px; }
  .aut-nodo:not(.aut-nodo--agente) .aut-nodo__dentro,
  .aut-nodo--agente .aut-nodo__dentro { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .aut-nodo .aut-nodo__nombre,
  .aut-nodo .aut-nodo__tipo {
    position: static; transform: none; width: auto; max-width: none; text-align: left;
  }
  .aut-nodo__nombre { font-size: 15px; }
  .aut-nodo__tipo { font-size: 12.5px; }
  .aut-nodo__rama {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.3;
    color: #C9C2BA;                                        /* 8,25:1 sobre la caja (#2E2823) */
  }

  /* Línea principal entre nodos seguidos */
  .aut-nodo + .aut-nodo::before {
    content: '';
    position: absolute;
    left: 27px;
    top: -14px;
    height: 14px;
    border-left: 2px solid #8F8781;
  }
  /* Subnodos: línea discontinua hasta su icono... */
  .aut-nodo + .aut-nodo--sub::before { left: 67px; border-left-style: dashed; }
  /* ...y la principal sigue por su izquierda, del agente a la decisión. */
  .aut-nodo--sub::after {
    content: '';
    position: absolute;
    left: 27px;
    top: -14px;
    height: calc(100% + 14px);
    border-left: 2px solid #8F8781;
  }
  /* Ramas: la principal baja hasta el final de la primera y hasta la mitad de la segunda,
     y un codo entra a cada caja. */
  .aut-nodo + .aut-nodo--rama::before { height: calc(100% + 14px); }
  .aut-nodo--rama + .aut-nodo--rama::before { height: calc(50% + 14px); }
  .aut-nodo--rama::after {
    content: '';
    position: absolute;
    left: 27px;
    top: 50%;
    width: 13px;
    border-top: 2px solid #8F8781;
  }

  /* Recorrido marcado */
  .aut-nodo.es-ok::before,
  .aut-nodo--sub.es-ok::after { border-left-color: var(--aut-ok); }
  .aut-nodo--rama.es-ok::after { border-top-color: var(--aut-ok); }
  /* En la primera rama la línea sigue hacia la segunda: solo va en verde hasta el codo
     (el codo está a 14 px + la mitad del nodo desde arriba = 50% + 7 px de esta línea). */
  .aut-nodo + .aut-nodo--rama.es-ok::before {
    border-left: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--aut-ok) calc(50% + 9px), #8F8781 calc(50% + 9px));
  }
}

/* ---------------------------------------------------------------------------
   3. Secciones de contenido
   --------------------------------------------------------------------------- */
.aut-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.aut-intro h2 { font-size: var(--fs-4xl); margin: 0; }
.aut-intro p { font-size: var(--fs-lg); color: var(--tinta-2); max-width: 62ch; }
.aut-intro p + p { margin-top: var(--gap-md); }

.aut-cabeza {                       /* encabezado de sección alineado a la izquierda */
  max-width: 50rem;
  margin: 0 0 clamp(28px, 4vw, 48px);
}
.aut-cabeza h2 { margin: 0 0 var(--gap-md); }
.aut-cabeza p { font-size: var(--fs-lg); color: var(--tinta-2); max-width: 62ch; margin: 0; }
.section--dark .aut-cabeza p { color: var(--tinta-2-dark); }

/* 3.1 Qué automatizamos: lista-ficha con reglas, no tarjetas iguales */
/* Sin regla superior: la primera fila es la destacada, que sobresale 24 px por lado, y la
   regla se cortaba antes de sus bordes. La fila ya se separa por su fondo. */
.aut-casos {
  list-style: none;
  padding: 0;
  margin: 0;
}
.aut-caso {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: 12px clamp(20px, 4vw, 56px);
  padding: clamp(22px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--regla);
}
.aut-caso__cabeza { display: flex; flex-direction: column; gap: 10px; }
.aut-caso h3 { font-size: var(--fs-2xl); margin: 0; letter-spacing: var(--tk-title); }
.aut-caso__cuerpo p { color: var(--tinta-2); margin: 0 0 12px; max-width: 64ch; }
.aut-caso__cuerpo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.aut-caso__cuerpo li {
  max-width: 64ch;
  position: relative;
  padding-left: 20px;
  color: var(--tinta-2);
  font-size: var(--fs-base);
}
.aut-caso__cuerpo li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .72em;
  width: 9px;
  height: 1.5px;
  background: var(--brand);
}
.aut-caso__precio {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--tinta);
  border-bottom: 1.5px solid var(--brand);
}
/* La fila con precio de lista va sobre papel (la sección es papel-2): se distingue por
   superficie, sin franja de color ni degradado. */
.aut-caso--destacado {
  background: var(--papel);
  margin: 0 calc(-1 * clamp(14px, 2vw, 24px));
  padding-left: clamp(14px, 2vw, 24px);
  padding-right: clamp(14px, 2vw, 24px);
}

/* 3.2 El correo, paso a paso: bandeja de entrada → respuesta */
.aut-correo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;                /* las dos tarjetas con el mismo alto */
}
.aut-mensaje {
  background: var(--papel);
  border: 1px solid var(--regla);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.aut-mensaje__cab {
  display: grid;
  gap: 2px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--regla);
  background: var(--papel-2);
  font-size: var(--fs-sm);
  color: var(--tinta-2);
}
.aut-mensaje__cab b { color: var(--tinta); font-weight: var(--fw-semibold); }
.aut-mensaje__etq {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 6px;
}
.aut-mensaje__cuerpo { padding: 16px 18px 18px; }
.aut-mensaje__cuerpo p { font-size: var(--fs-base); color: var(--tinta); margin: 0 0 10px; max-width: none; }
.aut-mensaje__cuerpo p:last-child { margin-bottom: 0; }
.aut-mensaje--respuesta { border-color: var(--tinta); }

.aut-pasos-flujo {
  list-style: none;
  counter-reset: pf;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 6 pasos: 3 + 3, sin huérfanos */
  column-gap: 24px;
  border-top: 1px solid var(--regla);
}
.aut-pasos-flujo li {
  counter-increment: pf;
  padding: 18px 20px 20px 0;
  border-bottom: 1px solid var(--regla);
}
.aut-pasos-flujo li::before {
  content: counter(pf, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--brand-cta);                                 /* 5,97:1 */
  margin-bottom: 8px;
}
.aut-pasos-flujo b { display: block; color: var(--tinta); margin-bottom: 4px; }
.aut-pasos-flujo span { font-size: var(--fs-sm); color: var(--tinta-2); line-height: 1.5; display: block; }
.aut-pasos-flujo code {
  font-family: var(--font-mono);
  font-size: .86em;
  background: var(--papel-2);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  color: var(--tinta);
}

/* 3.3 Dónde se instala: dos columnas enfrentadas */
.aut-donde {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--regla-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.aut-donde__col { padding: clamp(22px, 3vw, 36px); }
.aut-donde__col + .aut-donde__col { border-left: 1px solid var(--regla-dark); }
.aut-donde__col h3 { font-size: var(--fs-2xl); margin: 0 0 10px; }
.aut-donde__col p { margin: 0 0 14px; }
.aut-donde__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.aut-donde__col li { position: relative; padding-left: 20px; color: var(--tinta-2-dark); }
.aut-donde__col li::before {
  content: '';
  position: absolute; left: 2px; top: .72em; width: 9px; height: 1.5px; background: var(--brand-lift);
}
/* Enlaces sobre carbón: subrayados, no solo por color (WCAG 1.4.1; Lighthouse daba 97 por
   el de "servidor de archivos"). Misma regla que .aut-licencia a, para que no se desincronicen. */
.aut-donde__col a,
.aut-licencia a {
  color: var(--papel);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.aut-donde__col a:hover,
.aut-licencia a:hover { color: var(--brand-lift); text-decoration-thickness: 2px; }
.aut-base {
  margin-top: clamp(24px, 3vw, 36px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  padding-top: 20px;
  border-top: 1px solid var(--regla-dark);
}
.aut-base__etq {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-2-dark);
}
.aut-base__item { display: inline-flex; align-items: center; gap: 8px; color: var(--papel); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.aut-base__item img { height: auto; }
/* n8n: nunca por debajo de 100 px de ancho (n8n.io/brandguidelines). El ancho lo fija el
   atributo width que calcula la página a partir del viewBox (30 px de alto = 108 px). */
.aut-base__n8n { min-width: 100px; }
/* Espacio libre alrededor del logo ("4X" en las directrices de n8n). */
.aut-base__item--n8n { gap: 16px; padding-left: 8px; }

/* 3.4 Tablas (modelos de IA y comparación) */
.aut-tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--regla);
  border-radius: var(--radius-lg);
  background: var(--papel);
}
.aut-tabla-scroll:focus-visible { outline: 3px solid var(--brand-cta); outline-offset: 3px; }
.aut-tabla {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
/* La comparación tiene 3 columnas: cabe entera en el móvil y así no se esconde la columna
   propia fuera de la pantalla. (Los caption de las dos tablas son .sr-only; la nota con
   fecha de la tabla de modelos va fuera, en .aut-nota-fecha.) */
.aut-tabla.aut-tabla--comparacion { min-width: 0; }
.aut-tabla th,
.aut-tabla td {
  text-align: left;
  vertical-align: top;
  padding: 14px 16px;
  border-bottom: 1px solid var(--regla);
  line-height: 1.5;
}
/* Sin mayúsculas por CSS: pintaban "N8N INSTALADO POR PAGINASWEB1" y n8n va siempre en
   minúscula. Mismo estilo que las demás tablas del sitio (.service-content, .prosa). */
.aut-tabla thead th {
  font-weight: var(--fw-semibold);
  color: var(--tinta);
  background: var(--papel-2);
}
.aut-tabla tbody th { font-weight: var(--fw-semibold); color: var(--tinta); width: 22%; }
.aut-tabla td { color: var(--tinta-2); }
.aut-tabla tbody tr:last-child th,
.aut-tabla tbody tr:last-child td { border-bottom: 0; }
.aut-tabla .aut-col-nuestra { background: rgba(252, 239, 239, .55); color: var(--tinta); }

/* 3.5 Precio */
.aut-precio {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.aut-ficha {
  background: var(--papel);
  border: 1.5px solid var(--tinta);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px);
}
.aut-ficha__etq {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin: 0 0 10px;
}
.aut-ficha__nombre { font-size: var(--fs-2xl); margin: 0 0 14px; }
.aut-ficha__monto {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 6px;
}
.aut-ficha__desde { font-size: var(--fs-base); color: var(--tinta-2); }
.aut-ficha__cifra {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tk-display);
  line-height: 1;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.aut-ficha__periodo { font-size: var(--fs-lg); color: var(--tinta-2); }
.aut-ficha__iva { font-size: var(--fs-sm); color: var(--tinta-3); margin: 0 0 20px; }
.aut-ficha ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; border-top: 1px solid var(--regla); padding-top: 18px; }
.aut-ficha li { position: relative; padding-left: 24px; color: var(--tinta-2); }
.aut-ficha li svg { position: absolute; left: 0; top: 4px; color: var(--exito); }

.aut-medida h3 { font-size: var(--fs-xl); margin: 0 0 8px; }
.aut-medida p { color: var(--tinta-2); margin: 0 0 16px; }
.aut-medida dl { margin: 0; border-top: 1px solid var(--regla); }
.aut-medida dl div {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--regla);
}
.aut-medida dt { font-weight: var(--fw-semibold); color: var(--tinta); }
.aut-medida dd { margin: 0; color: var(--tinta-2); font-size: var(--fs-sm); line-height: 1.5; }

/* 3.6 Calculadora de horas */
.aut-calc {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  background: var(--carbon-2);
  border: 1px solid var(--regla-dark);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 36px);
}
/* js/automatizaciones.js le quita `hidden`. Sin esta regla, el display:grid de arriba gana al
   [hidden]{display:none} del navegador y la calculadora queda a la vista sin JavaScript. */
.aut-calc[hidden] { display: none; }
.aut-calc h3 { color: var(--papel); font-size: var(--fs-2xl); letter-spacing: var(--tk-title); margin: 0 0 8px; }
.aut-calc > div > p { color: var(--tinta-2-dark); margin: 0 0 18px; }
.aut-calc__campo { margin-bottom: 18px; }
/* Etiqueta y valor en una fila; el <output> va fuera del <label>. */
.aut-calc__fila {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--papel);
  margin-bottom: 8px;
}
.aut-calc__campo output { font-family: var(--font-mono); color: var(--papel); }
.aut-calc input[type="range"] {
  width: 100%;
  accent-color: var(--brand-lift);
  height: 28px;
}
.aut-calc input[type="range"]:focus-visible { outline: 3px solid var(--brand-lift); outline-offset: 4px; }
.aut-calc__resultado {
  border-left: 1px solid var(--regla-dark);
  padding-left: clamp(18px, 3vw, 40px);
}
.aut-calc__cifra {
  display: block;
  font-size: var(--fs-6xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tk-display);
  line-height: 1;
  color: var(--papel);
  font-variant-numeric: tabular-nums;
}
.aut-calc__unidad { display: block; margin: 8px 0 16px; color: var(--tinta-2-dark); font-size: var(--fs-base); }
.aut-calc__nota { font-size: var(--fs-sm); color: var(--tinta-2-dark); margin: 0 0 18px; line-height: 1.5; }

/* 3.7 Proceso */
.aut-proceso {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: pr;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 2px solid var(--tinta);
}
.aut-proceso li {
  counter-increment: pr;
  padding: 20px 22px 8px 0;
}
.aut-proceso li + li { padding-left: 22px; border-left: 1px solid var(--regla); }
.aut-proceso li::before {
  content: counter(pr, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--brand-cta);
  margin-bottom: 10px;
}
.aut-proceso h3 { font-size: var(--fs-xl); margin: 0 0 8px; }
.aut-proceso p { font-size: var(--fs-sm); color: var(--tinta-2); line-height: 1.55; margin: 0; }

/* 3.8 Con qué trabajamos */
.aut-marcas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  border-top: 1px solid var(--regla);
  border-left: 1px solid var(--regla);
}
.aut-marcas li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-height: 112px;
  padding: 18px;
  border-right: 1px solid var(--regla);
  border-bottom: 1px solid var(--regla);
  background: var(--papel);
}
.aut-marcas img { max-width: 100%; height: auto; }
.aut-marcas span { font-size: var(--fs-sm); color: var(--tinta-2); line-height: 1.35; }
.aut-marcas span b { display: block; color: var(--tinta); font-weight: var(--fw-semibold); }
.aut-aviso-marcas {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--tinta-3);
  max-width: 80ch;
}

/* 3.9 Formulario: una columna de apoyo y el formulario */
.aut-contacto {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.aut-contacto__lado h2 { margin: 0 0 14px; }
.aut-contacto__lado p { color: var(--tinta-2); font-size: var(--fs-lg); }
.aut-contacto__lado ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.aut-contacto__lado li { position: relative; padding-left: 24px; color: var(--tinta-2); }
.aut-contacto__lado li svg { position: absolute; left: 0; top: 4px; color: var(--exito); }
.aut-contacto .leadform__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aut-contacto .leadform__campos .aut-ancho { grid-column: 1 / -1; }

/* 3.10 Cierre */
.aut-cierre { text-align: left; }
.aut-cierre__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: 24px 48px;
  align-items: end;
}
.aut-cierre h2 { margin: 0 0 12px; max-width: 22ch; }
.aut-cierre p { margin: 0; max-width: 56ch; }
.aut-cierre__acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* Enlaces dentro del texto: subrayados, no solo por color (WCAG 1.4.1) */
.aut-caso__cuerpo a,
.aut-intro a,
.aut-medida a,
.aut-cabeza a,
.aut-contacto__lado a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: var(--fw-semibold);
}
.aut-caso__cuerpo a:hover, .aut-intro a:hover,
.aut-medida a:hover, .aut-cabeza a:hover, .aut-contacto__lado a:hover {
  color: var(--brand-cta);
  text-decoration-thickness: 2px;
}
/* El precio de la fila del correo ya lleva su borde rojo: sin esto salía doble subrayado. */
.aut-caso__cuerpo a.aut-caso__precio { text-decoration: none; font-weight: inherit; }

/* Preguntas frecuentes: la respuesta puede traer varios párrafos */
.aut-faq .faq__answer p + p { margin-top: 10px; }

/* 3.11 Piezas sueltas */
.aut-no-hacemos {
  margin: clamp(22px, 3vw, 32px) 0 0;
  max-width: 76ch;
  color: var(--tinta-2);
}
.aut-no-hacemos strong { color: var(--tinta); }

.aut-licencia {
  margin: 18px 0 0;
  max-width: 88ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--tinta-2-dark);
}
/* (los enlaces de .aut-licencia comparten regla con .aut-donde__col a, en 3.3) */

.aut-nota-fecha {
  margin: 16px 0 0;
  max-width: 88ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--tinta-2);
}
.aut-nota-fecha a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.aut-nota-fecha a:hover { color: var(--brand-cta); }

.aut-ficha__aparte {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--tinta-2);
  margin: 0 0 20px;
  padding: 12px 14px;
  background: var(--papel-2);
  border-radius: var(--radius-md);
}
.aut-ficha__aparte strong { color: var(--tinta); }

.aut-calc__salida { margin: 0; }

/* El logotipo de n8n no puede ir por debajo de 100 px de ancho (directrices de marca de n8n,
   n8n.io/brandguidelines). */
.aut-marcas img.aut-marcas__n8n { min-width: 100px; }

.aut-tambien {
  margin: 20px 0 0;
  max-width: 80ch;
  color: var(--tinta-2);
}
.aut-tambien strong { color: var(--tinta); }

/* Enlaces dentro de las respuestas de la FAQ */
.aut-faq .faq__answer a,
.aut-caso__cuerpo li a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: var(--fw-semibold);
}
.aut-faq .faq__answer a:hover { color: var(--brand-cta); }

/* ---------------------------------------------------------------------------
   4. Barra fija en el móvil y los flotantes del sitio
   ---------------------------------------------------------------------------
   Mismo reparto que en /servicios/servidor-archivos: la barra fija lleva su botón de
   WhatsApp, así que se oculta el flotante (dos botones del mismo canal a 15 px es fallo
   de WCAG 2.5.8), el chatbot sube por encima y se reserva el alto de la barra al final. */
.aut-barra-movil { display: none; }

@media (max-width: 767px) {
  .aut-barra-movil {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--carbon);
    border-top: 1px solid var(--regla-dark);
  }
  .aut-barra-movil .btn { flex: 1; min-height: 44px; padding: 8px 12px; font-size: var(--fs-sm); }
  .whatsapp-float { display: none; }
  .chatbot { bottom: 86px; }
  /* Mientras se ven los botones de la cabecera, el chatbot se oculta: tapaba el extremo
     derecho de "Pedir un diagnóstico sin costo". La clase la pone js/automatizaciones.js;
     visibility (no opacity) para que tampoco reciba el foco sin verse. */
  .chatbot.aut-chatbot-pausa:not(.chatbot--open) { visibility: hidden; }
  body { padding-bottom: 66px; }
  /* WCAG 2.4.11: al tabular, el navegador deja el foco por encima de la barra fija
     (65 px de barra + 21 de aire), igual que scroll-padding-top reserva el menú.
     Longhand: el shorthand scroll-padding pisaría el scroll-padding-top de reset.css. */
  html { scroll-padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------------------
   5. Anchos intermedios y móvil
   --------------------------------------------------------------------------- */
/* La cabecera pasa a una columna antes que el resto: entre ~1081 y ~1140 px, a dos
   columnas, el lienzo bajaba de 540 px y mostraba el esquema apilado en la columna derecha. */
@media (max-width: 1140px) {
  .aut-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .aut-hero__texto { max-width: 720px; }
  .aut-hero__hechos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .aut-proceso { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aut-proceso li:nth-child(3) { padding-left: 0; border-left: 0; }
  .aut-proceso li:nth-child(n+3) { border-top: 1px solid var(--regla); }
}

@media (max-width: 900px) {
  .aut-pasos-flujo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aut-intro,
  .aut-correo,
  .aut-precio,
  .aut-contacto,
  .aut-calc { grid-template-columns: minmax(0, 1fr); }
  .aut-calc__resultado { border-left: 0; padding-left: 0; border-top: 1px solid var(--regla-dark); padding-top: 20px; }
  .aut-donde { grid-template-columns: minmax(0, 1fr); }
  .aut-donde__col + .aut-donde__col { border-left: 0; border-top: 1px solid var(--regla-dark); }
  .aut-cierre__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .aut-hero { padding-top: calc(var(--nav-h) + 28px); }
  .aut-hero__titulo { font-size: clamp(1.95rem, 8.4vw, 2.7rem); margin: 12px 0 16px; }
  .aut-hero__bajada { font-size: var(--fs-base); }
  .aut-hero__hechos { grid-template-columns: minmax(0, 1fr); }
  .aut-hero .eyebrow { white-space: normal; }
  .aut-caso { grid-template-columns: minmax(0, 1fr); }
  .aut-contacto .leadform__campos { grid-template-columns: minmax(0, 1fr); }
  .aut-medida dl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

@media (max-width: 560px) {
  .aut-pasos-flujo { grid-template-columns: minmax(0, 1fr); }
  .aut-proceso { grid-template-columns: minmax(0, 1fr); }
  .aut-proceso li,
  .aut-proceso li + li { padding: 18px 0 14px; border-left: 0; }
  .aut-proceso li + li { border-top: 1px solid var(--regla); }
  .aut-hero__acciones .btn { width: 100%; }
  .aut-tabla--comparacion th,
  .aut-tabla--comparacion td { padding: 12px 10px; }
  .aut-tabla--comparacion tbody th { width: 26%; }
}

/* ---------------------------------------------------------------------------
   6. Movimiento
   ---------------------------------------------------------------------------
   Un solo momento animado en toda la página: el lienzo "se ejecuta" una vez al cargar
   (js/automatizaciones.js va marcando .es-ok nodo a nodo). Con "reducir movimiento" el
   script pinta el estado final de golpe y aquí se quitan las transiciones. */
@media (prefers-reduced-motion: reduce) {
  .aut-nodo__caja { transition: none; }
}