/* /automatizaciones/ (Claude, 2026-11-12). Plan en docs/plan-automatizaciones.md.
   Idea: un día cualquiera de un negocio; cada automatización aparece en el momento en que actúa.
   Rojo = cliente sin respuesta, verde = atendido, ámbar = en pruebas. Las horas, en grande, son el motivo. */

:root { --hora: clamp(2rem, 3.3vw, 3rem); --rojo-texto: #B42318; --linea-2: #D5DCE6; }

/* ---------- Atajos a las secciones (2026-11-12) ----------
   Van dentro de la cabecera fija, así bajan con ella sin taparla. En el móvil se deslizan en horizontal dentro de
   su propia fila (la página no se desborda). Sin JS: donde el navegador lo admite, el atajo de la sección que
   estás leyendo se marca en verde con una línea de tiempo de desplazamiento; si no, quedan como enlaces. */
/* La sección a la que saltas empieza justo bajo la cabecera (113 px en el ordenador, 123 en el móvil: ahí se
   esconden 10 px de su relleno, nunca el título). */
html:has(.atajos) { scroll-padding-top: 112px; }
.atajos { border-top: 1px solid var(--linea); }
.atajos ul {
  list-style: none; margin: 0 auto; max-width: var(--ancho);
  padding: 0 calc(var(--margen) + 24px) 0 calc(var(--margen) - 4px); scroll-padding-inline: var(--margen);
  display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.atajos ul::-webkit-scrollbar { display: none; }
.atajos li { flex: none; }
.atajos a {
  display: flex; align-items: center; min-height: 44px; padding: 0 4px;
  white-space: nowrap; text-decoration: none; font-size: .95rem; font-weight: 600; color: var(--texto-2);
}
.atajos a:hover { color: var(--tinta); }
/* Dentro de la fila deslizable el contorno exterior se cortaría: va por dentro. */
.atajos a:focus-visible { outline-offset: -3px; }

@supports (timeline-scope: none) and (animation-range: cover) {
  body { timeline-scope: --a-tendencias, --a-areas, --a-catalogo, --a-precios, --a-empezar; }
  #tendencias { view-timeline-name: --a-tendencias; }
  #areas { view-timeline-name: --a-areas; }
  #catalogo { view-timeline-name: --a-catalogo; }
  #precios { view-timeline-name: --a-precios; }
  #empezar { view-timeline-name: --a-empezar; }
  /* Una franja fina a un tercio de la pantalla: la sección que la cruza es la que estás leyendo. */
  #tendencias, #areas, #catalogo, #precios, #empezar { view-timeline-axis: block; view-timeline-inset: 34% 65%; }
  .atajos a { animation: atajo-aqui linear; animation-duration: auto; animation-range: cover; }
  .atajos a[href="#tendencias"] { animation-timeline: --a-tendencias; }
  .atajos a[href="#areas"] { animation-timeline: --a-areas; }
  .atajos a[href="#catalogo"] { animation-timeline: --a-catalogo; }
  .atajos a[href="#precios"] { animation-timeline: --a-precios; }
  .atajos a[href="#empezar"] { animation-timeline: --a-empezar; }
}
@keyframes atajo-aqui { from, to { color: var(--tinta); box-shadow: inset 0 -3px 0 var(--verde); } }

/* ---------- Cabeza: titular de cartel y el día ---------- */
.au-cabeza { max-width: var(--ancho); margin: 0 auto; padding: 36px var(--margen) 104px; }
.au-cabeza h1 {
  margin-top: 30px; max-width: 13.5em;
  font-size: clamp(2.35rem, 6.4vw, 5.9rem); font-weight: 800; line-height: .95; letter-spacing: -.05em;
  text-wrap: balance;
}
.au-cabeza-pie {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: end;
  margin-top: 40px;
}
.au-entrada { font-size: 1.25rem; line-height: 1.55; color: var(--texto-2); max-width: 54ch; }
.au-cabeza-acciones .portada-acciones { margin-top: 0; }
.reloj { margin-top: 18px; font-size: .98rem; color: var(--texto-2); max-width: 46ch; }
.reloj b { font-family: var(--display); font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; }

.jornada { margin-top: 72px; border-top: 2px solid var(--tinta); padding-top: 22px; }
.jornada-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.jornada-titulo { font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; }
.jornada-ej {
  margin-left: 8px; padding: 3px 10px; border-radius: 999px; vertical-align: 2px;
  font-family: var(--texto); font-size: .8rem; font-weight: 600; color: var(--texto-2); background: var(--niebla);
}
.interruptor { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--niebla); }
.interruptor[hidden] { display: none; }
.interruptor button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: .95rem; font-weight: 650; color: var(--texto-2);
  padding: 10px 16px; border-radius: 999px;
}
.interruptor button:hover { color: var(--tinta); }
.interruptor button:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.interruptor button[data-ver="sin"][aria-pressed="true"] {
  background: var(--papel); color: var(--rojo-texto); box-shadow: 0 1px 2px rgba(11, 22, 48, .12), inset 0 0 0 1.5px #FDA29B;
}
.interruptor button[data-ver="con"][aria-pressed="true"] {
  background: var(--papel); color: var(--verde-osc); box-shadow: 0 1px 2px rgba(11, 22, 48, .12), inset 0 0 0 1.5px #75E0A7;
}

.momentos {
  position: relative; list-style: none; padding: 0; margin: 34px 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 52px;
}
.momento { position: relative; min-width: 0; padding-right: 26px; }
/* El raíl del día, a la altura de los puntos (un tramo por momento, para que valga en dos filas) */
.momento::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--hora) + 25px); height: 2px; background: var(--linea);
}
.au-hora {
  display: block; font-family: var(--display); font-weight: 800; font-size: var(--hora); line-height: 1;
  letter-spacing: -.045em; font-variant-numeric: tabular-nums;
}
.au-hora::after {
  content: ""; position: relative; z-index: 1; display: block; width: 16px; height: 16px; margin-top: 18px;
  border-radius: 50%; background: var(--tinta); box-shadow: 0 0 0 5px var(--papel), 0 0 0 7px var(--linea);
  transition: background-color .4s ease, box-shadow .4s ease;
}
.jornada[data-modo="sin"] .au-hora::after { background: var(--rojo); box-shadow: 0 0 0 5px var(--rojo-suave); }
.jornada[data-modo="con"] .au-hora::after { background: var(--verde); box-shadow: 0 0 0 5px var(--verde-suave); }
.jornada[data-modo="con"] .momento--pruebas .au-hora::after { background: #F79009; box-shadow: 0 0 0 5px var(--ambar-suave); }

.momento-que { margin-top: 22px; font-weight: 600; line-height: 1.45; }
.canal { display: block; margin-bottom: 4px; font-size: .82rem; font-weight: 700; color: var(--texto-2); }
.momento .momento-sin, .momento .momento-con {
  margin-top: 14px; padding-left: 12px; border-left: 3px solid; font-size: .98rem; line-height: 1.5;
}
.momento .momento-sin { color: var(--rojo-texto); border-color: var(--rojo); }
.momento .momento-con { color: var(--verde-osc); border-color: var(--verde); }
.momento .momento-pruebas { color: var(--ambar-osc); border-color: #F79009; }
.momento-con a {
  display: inline-block; margin-top: 6px; font-weight: 700; color: var(--tinta);
  text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--verde);
}
.momento-pruebas a { text-decoration-color: #F79009; }
.etq { font-weight: 700; }
.jornada[data-modo="ambos"] .etq { display: block; }

.jornada-resumen {
  margin-top: 36px; padding: 18px 22px; border-radius: 16px; background: var(--niebla);
  font-weight: 600; font-size: 1.05rem; line-height: 1.5;
}
.jornada-resumen > span { display: block; }
.jornada-resumen > span + span { margin-top: 8px; }
.jornada[data-modo="sin"] .jornada-resumen { background: var(--rojo-suave); color: #912018; }
.jornada[data-modo="con"] .jornada-resumen { background: var(--verde-suave); color: #05603A; }

/* Sin JS se ven los dos estados; con JS, uno */
.jornada[data-modo="sin"] .momento-con, .jornada[data-modo="con"] .momento-sin { display: none; }
.jornada:not([data-modo="ambos"]) .etq {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.jornada-resumen > span + span { margin-top: 0; }
.jornada[data-modo="ambos"] .jornada-resumen > span + span { margin-top: 8px; }

/* El único movimiento de la página: el día pasa de rojo a verde una vez */
@keyframes au-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.jornada-anima .momento-con, .jornada-anima .jornada-resumen { animation: au-entra .55s cubic-bezier(.2, .7, .2, 1) both; }
.jornada-anima .momento:nth-child(2) .momento-con, .jornada-anima .momento:nth-child(2) .au-hora::after { animation-delay: .22s; transition-delay: .22s; }
.jornada-anima .momento:nth-child(3) .momento-con, .jornada-anima .momento:nth-child(3) .au-hora::after { animation-delay: .44s; transition-delay: .44s; }
.jornada-anima .momento:nth-child(4) .momento-con, .jornada-anima .momento:nth-child(4) .au-hora::after { animation-delay: .66s; transition-delay: .66s; }
.jornada-anima .momento:nth-child(5) .momento-con, .jornada-anima .momento:nth-child(5) .au-hora::after { animation-delay: .88s; transition-delay: .88s; }
.jornada-anima .momento:nth-child(6) .momento-con, .jornada-anima .momento:nth-child(6) .au-hora::after { animation-delay: 1.1s; transition-delay: 1.1s; }
.jornada-anima .momento:nth-child(7) .momento-con, .jornada-anima .momento:nth-child(7) .au-hora::after { animation-delay: 1.32s; transition-delay: 1.32s; }
.jornada-anima .momento:nth-child(8) .momento-con, .jornada-anima .momento:nth-child(8) .au-hora::after { animation-delay: 1.54s; transition-delay: 1.54s; }
.jornada-anima .jornada-resumen { animation-delay: 1.8s; }

/* ---------- Titulares de sección ---------- */
.tendencias h2, .areas h2, .catalogo h2, .metodo h2, .en-casa h2, .limites h2, .precios h2, .empezar h2 {
  font-size: clamp(2.1rem, 3.8vw, 3.3rem); font-weight: 800; line-height: 1.02; letter-spacing: -.035em;
  text-wrap: balance; max-width: 22ch;
}

/* ---------- En tendencia: ranking medido, con barra de crecimiento ---------- */
.tendencias { background: var(--niebla); padding: 112px 0; }
.tend-medida { margin-top: 16px; font-size: 1.1rem; color: var(--texto-2); max-width: 72ch; }
.tend-lista { list-style: none; counter-reset: tend; padding: 0; margin: 44px 0 0; border-top: 2px solid var(--tinta); }
.tend {
  counter-increment: tend; display: grid; grid-template-columns: 52px minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 28px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--linea-2);
}
.tend::before {
  align-self: start; padding-top: 2px; content: counter(tend); font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1;
  color: var(--texto-2); font-variant-numeric: tabular-nums;
}
.tend h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.tend-texto p { margin-top: 4px; font-size: .98rem; color: var(--texto-2); max-width: 58ch; }
.tend-dato { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; }
.tend-barra {
  display: block; height: 14px; border-radius: 999px;
  background:
    linear-gradient(90deg, transparent calc(var(--media) * 100% - 1px), var(--tinta) calc(var(--media) * 100% - 1px),
      var(--tinta) calc(var(--media) * 100% + 1px), transparent calc(var(--media) * 100% + 1px)),
    linear-gradient(90deg, var(--verde) calc(var(--ancho) * 100%), #DCE3EC 0);
}
.tend-dato b {
  font-family: var(--display); font-weight: 800; font-size: 1.7rem; letter-spacing: -.03em; line-height: 1;
  color: var(--verde-osc); font-variant-numeric: tabular-nums; min-width: 4.4ch; text-align: right;
}
.tend-n { grid-column: 1 / -1; font-size: .85rem; color: var(--texto-2); }
.tend-pie { margin-top: 18px; font-size: .92rem; color: var(--texto-2); }

/* Estado de cada automatización: el color dice si ya funciona aquí */
.auto-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.auto-estado { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.auto-producto { font-size: .92rem; font-weight: 700; color: var(--tinta); text-decoration-color: var(--verde); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.auto-estado--nuestro, .auto-estado--fundador { background: var(--verde-suave); color: var(--verde-osc); }
.auto-estado--demo { background: var(--azul-suave); color: var(--azul-osc); }
.auto-estado--pruebas { background: var(--ambar-suave); color: var(--ambar-osc); }
.auto-estado--medida { color: var(--texto-2); box-shadow: inset 0 0 0 1.5px var(--linea-2); }

/* ---------- Por áreas: cuatro columnas de lista ---------- */
.areas { padding: 112px 0; }
.areas-rejilla { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.area { min-width: 0; }
.area h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; padding-bottom: 12px; border-bottom: 2px solid var(--tinta); scroll-margin-top: 96px; }
.area ul { list-style: none; padding: 0; margin: 0; }
.auto { padding: 16px 0 18px; border-bottom: 1px solid var(--linea); }
.auto b { display: block; font-weight: 700; line-height: 1.35; }
.auto-texto { display: block; margin-top: 4px; font-size: .95rem; line-height: 1.5; color: var(--texto-2); }
.areas-pie { margin-top: 36px; font-size: 1.1rem; }
.areas-pie a { color: var(--tinta); font-weight: 700; text-decoration-color: var(--verde); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- Catálogo: filas de ficha, no tarjetas ---------- */
.catalogo { background: var(--niebla); padding: 104px 0; }
.filas { margin-top: 56px; border-top: 2px solid var(--tinta); }
.fila {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .95fr);
  gap: 36px; align-items: start; padding: 38px 0; border-bottom: 1px solid var(--linea-2);
  scroll-margin-top: 92px;
}
.fila h3 { font-size: clamp(1.5rem, 2.1vw, 1.95rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.fila .estado { margin-top: 12px; }
.fila-hace { line-height: 1.55; }
.fila-datos { margin: 0; display: grid; gap: 14px; }
.fila-datos dt { font-size: .85rem; font-weight: 700; color: var(--texto-2); }
.fila-datos dd { margin: 2px 0 0; font-weight: 600; }
.fila-enlaces { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fila-enlaces .enlace { margin-top: 0; }
.enlace-suave { font-weight: 600; text-decoration-color: #9AA7B8; }
.fila:target { background: linear-gradient(90deg, var(--verde-suave), rgba(231, 248, 239, 0) 70%); }

.otra-cosa {
  margin-top: 52px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr); gap: 36px; align-items: baseline;
}
.otra-cosa h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.otra-cosa ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.otra-cosa a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--verde); }
.otra-cosa span { display: block; margin-top: 4px; font-size: .95rem; color: var(--texto-2); }

/* ---------- Método: cinco pasos en una pista ---------- */
.metodo { padding: 112px 0; }
.pasos-pista {
  list-style: none; counter-reset: paso; padding: 0; margin: 56px 0 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px;
}
.pasos-pista li { counter-increment: paso; position: relative; padding-top: 66px; min-width: 0; }
.pasos-pista li::before {
  content: counter(paso); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-content: center; background: var(--papel); box-shadow: inset 0 0 0 2px var(--tinta);
  font-family: var(--display); font-weight: 800; font-size: 1.15rem;
}
.pasos-pista li:not(:last-child)::after {
  content: ""; position: absolute; top: 21px; left: 56px; right: -14px; height: 2px; background: var(--linea);
}
.pasos-pista h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.pasos-pista p { margin-top: 8px; color: var(--texto-2); font-size: .98rem; }
.paso-sombra::before { background: var(--tinta) !important; color: var(--papel); }
.sombra { margin-top: 16px; display: grid; gap: 6px; }
.sombra-paso {
  display: block; padding: 7px 12px; border-radius: 10px; background: var(--niebla);
  font-size: .88rem; font-weight: 600; color: var(--tinta);
}
.sombra-tu { background: var(--verde-suave); color: var(--verde-osc); }
.sombra-no { background: transparent; border: 1.5px dashed #FDA29B; color: var(--rojo-texto); }
.sombra-no::before { content: "×"; margin-right: 6px; font-weight: 800; }

/* ---------- Lo usamos nosotros primero: la única banda tinta ---------- */
.en-casa { background: var(--tinta); color: var(--papel); padding: 112px 0; }
.en-casa-dentro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
.en-casa h2 { max-width: 15ch; }
.en-casa-texto { margin-top: 22px; font-size: 1.15rem; line-height: 1.6; color: rgba(255, 255, 255, .82); max-width: 46ch; }
.en-casa-regla {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16);
  font-weight: 600; color: rgba(255, 255, 255, .86); max-width: 46ch;
}
.registro { border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; padding: 28px 30px; background: rgba(255, 255, 255, .03); }
.registro h3 { font-size: 1.1rem; font-weight: 700; }
.registro ul { list-style: none; padding: 0; margin: 16px 0 0; }
.registro li { position: relative; padding: 14px 0 14px 28px; border-top: 1px solid rgba(255, 255, 255, .1); }
.registro li::before {
  content: ""; position: absolute; left: 0; top: 21px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--verde); box-shadow: 0 0 0 4px rgba(18, 183, 106, .2);
}
.registro b { display: block; font-weight: 650; }
.registro span { display: block; margin-top: 2px; font-size: .95rem; color: rgba(255, 255, 255, .74); overflow-wrap: anywhere; }

/* ---------- Siempre / nunca ---------- */
.limites { padding: 112px 0; }
.limites-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin-top: 48px; }
.limites-col h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; padding-bottom: 14px; border-bottom: 2px solid; }
.limites-si h3 { color: var(--verde-osc); border-color: var(--verde); }
.limites-no h3 { color: var(--rojo-texto); border-color: var(--rojo); }
.limites-col ul { list-style: none; padding: 0; margin: 0; }
.limites-col li { position: relative; padding: 16px 0 16px 36px; border-bottom: 1px solid var(--linea); }
.limites-col li::before {
  content: ""; position: absolute; left: 0; top: 18px; width: 22px; height: 22px; border-radius: 50%;
}
.limites-si li::before { background: var(--verde-suave); }
.limites-si li::after {
  content: ""; position: absolute; left: 8px; top: 23px; width: 5px; height: 9px;
  border: solid var(--verde-osc); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.limites-no li::before {
  content: "×"; background: var(--rojo-suave); color: var(--rojo-texto);
  font-weight: 700; font-size: 16px; line-height: 21px; text-align: center;
}
.limites-pie { margin-top: 28px; color: var(--texto-2); }
.limites-pie a { color: var(--tinta); }

/* ---------- Cuánto cuesta: lista de tienda ---------- */
.precios { background: var(--niebla); padding: 112px 0; }
.precios-dentro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 64px; align-items: start; }
.carta { margin: 0; border-top: 2px solid var(--tinta); }
.carta > div { display: flex; align-items: baseline; gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--linea-2); }
.carta > div::after {
  content: ""; order: 1; flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted #A9B4C4; transform: translateY(-6px);
}
.carta dt { order: 0; flex: none; font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.015em; }
.carta dd { order: 2; flex: 0 1 auto; margin: 0; max-width: 32ch; text-align: right; color: var(--texto-2); }
.carta dd strong { font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: var(--tinta); }
.carta dd a { color: var(--tinta); font-weight: 700; }
.carta-nota { margin-top: 18px; font-size: .95rem; color: var(--texto-2); max-width: 64ch; }
.carta-nota a { color: var(--tinta); }

/* ---------- Preguntas (pieza común) ---------- */
.preguntas { padding: 112px 0; }

/* ---------- Empezar: el formulario que es una automatización ---------- */
.empezar { background: var(--verde-suave); padding: 112px 0; }
.empezar-dentro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.empezar-texto > p { margin-top: 18px; font-size: 1.2rem; color: #1D3B2C; max-width: 44ch; }
.empezar-pasos { list-style: none; counter-reset: emp; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; }
.empezar-pasos li { counter-increment: emp; position: relative; padding-left: 40px; color: #1D3B2C; max-width: 46ch; }
.empezar-pasos li::before {
  content: counter(emp); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-content: center; background: var(--papel); color: var(--verde-osc); font-weight: 800; font-size: .85rem;
}
.empezar .estado-form a { color: var(--tinta); }

/* ---------- Pantallas medianas y pequeñas ---------- */
@media (max-width: 1020px) {
  .au-cabeza-pie { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
  .fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 20px 32px; }
  .pasos-pista { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 640px; }
  .pasos-pista li { padding: 4px 0 30px 66px; }
  .pasos-pista li:not(:last-child)::after { top: 52px; bottom: 6px; left: 21px; right: auto; width: 2px; height: auto; }
  .en-casa-dentro, .precios-dentro, .empezar-dentro { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .otra-cosa { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .momentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tend { grid-template-columns: 44px minmax(0, 1fr); gap: 14px 20px; }
  .tend-dato { grid-column: 2; }
}
@media (max-width: 860px) {
  /* El día, en vertical */
  .momentos { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .momento::before { display: none; }
  .momentos::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 7px; width: 2px; background: var(--linea); }
  .momento { padding: 0 0 34px 42px; }
  .momento:last-child { padding-bottom: 0; }
  .au-hora { font-size: 2.1rem; }
  .au-hora::after { position: absolute; left: 0; top: 10px; margin: 0; }
  .momento-que { margin-top: 10px; }
  .otra-cosa ul { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 600px) {
  .au-cabeza { padding-top: 24px; padding-bottom: 80px; }
  .au-cabeza h1 { margin-top: 22px; font-size: clamp(1.9rem, 9.6vw, 2.6rem); line-height: 1; letter-spacing: -.045em; }
  .au-entrada { font-size: 1.1rem; }
  .au-cabeza-acciones .boton { flex: 1 1 100%; }
  .jornada { margin-top: 52px; }
  .interruptor { display: flex; width: 100%; }
  .interruptor button { flex: 1 1 0; padding: 10px 8px; font-size: .9rem; }
  .fila { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 30px 0; }
  .areas-rejilla { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .tendencias, .areas { padding: 80px 0; }
  .tend { grid-template-columns: 32px minmax(0, 1fr); }
  .tend::before { font-size: 1.3rem; }
  .limites-rejilla { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .catalogo, .metodo, .en-casa, .limites, .precios, .preguntas, .empezar { padding: 80px 0; }
  .registro { padding: 22px 20px; }
  .carta > div { flex-wrap: wrap; gap: 4px 14px; }
  .carta > div::after { display: none; }
  .carta dd { flex: 1 1 100%; max-width: none; text-align: left; }
}

/* ---------- Página no encontrada (404 real) ---------- */
.no-existe { max-width: var(--ancho); margin: 0 auto; padding: 64px var(--margen) 112px; }
.no-existe-codigo {
  font-family: var(--display); font-weight: 800; font-size: clamp(5rem, 15vw, 10rem); line-height: .85;
  letter-spacing: -.06em; color: var(--rojo); font-variant-numeric: tabular-nums;
}
.no-existe h1 { margin-top: 22px; font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.no-existe-texto { margin-top: 18px; font-size: 1.2rem; color: var(--texto-2); max-width: 52ch; }
.no-existe-lista {
  list-style: none; padding: 0; margin: 40px 0 44px; border-top: 2px solid var(--tinta);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 36px;
}
.no-existe-lista li { padding: 18px 0; border-bottom: 1px solid var(--linea); }
.no-existe-lista a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--verde); }
.no-existe-lista span { display: block; margin-top: 4px; font-size: .95rem; color: var(--texto-2); }
.no-existe + .pie { padding-top: 32px; }
.no-existe + .pie .pie-legal { margin-top: 0; border-top: 0; padding-top: 0; }
.no-existe + .pie a { color: var(--papel); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .no-existe-lista { grid-template-columns: minmax(0, 1fr); } }