/* Colores: vienen de ../tokens.css (raíz de talleres, copiado de miweb; normativa en
   miweb/docs/colores.md). Aquí solo se usan los roles --color-*, nunca un
   hex suelto; las variantes se sacan con color-mix(). */
:root {
  color-scheme: dark;
  /* tira de logos, nombre y fecha: en ../portada/portada.css (común a todos los talleres) */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* barra de scroll sin fondo: solo se ven la barrita y las flechas */
html { scrollbar-color: color-mix(in srgb, var(--color-text-muted) 45%, transparent) transparent; }
body {
  background:
    radial-gradient(900px circle at 0% 0%, var(--color-glow), transparent 60%),
    var(--color-bg);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* evita que la primera pintura anime título/índice cuando se llega ya "soplado" */
.no-anim, .no-anim * { transition: none !important; }

/* nubes suaves arriba a la derecha, en la capa más al fondo (antes que el
   brillo y el canvas) para no tapar nunca el diente de león ni el texto */
.top-clouds {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.cloud-cluster {
  position: absolute;
  inset: 0;
  transform: translate(140px, 20px);
}
.top-clouds .cloud {
  position: absolute;
  border-radius: 50%;
}
.top-clouds .cloud-back { background: color-mix(in srgb, var(--color-border-strong) 22%, transparent); }
.top-clouds .cloud-front { background: color-mix(in srgb, var(--color-text-muted) 12%, transparent); }

/* cada capa es un racimo de círculos de distinto tamaño, no uno solo,
   para que la silueta lea como nube y no como un círculo suelto */
.cloud-back-a { top: -260px; right: -100px; width: 640px; height: 640px; }
.cloud-back-b { top: -340px; right: 260px; width: 420px; height: 420px; }
.cloud-back-c { top: -160px; right: 420px; width: 320px; height: 320px; }

.cloud-front-a { top: -210px; right: 160px; width: 460px; height: 460px; }
.cloud-front-b { top: -320px; right: 40px; width: 360px; height: 360px; }


canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: default;
}
canvas.over-head { cursor: pointer; }

/* pantallas verticales o cuadradas: la cabeza del diente de león cae en el
   centro, así que el título se centra en el hueco entre el logo y la cabeza
   (--head-y / --head-r los pone main.js) */
@media (max-aspect-ratio: 5/4) {
  .message {
    top: var(--below-logo);
    bottom: calc(100% - var(--head-y, 70%) + var(--head-r, 100px) + 0.5rem);
    padding-block: 0;
  }
}
.message h1 {
  margin: 0;
  max-width: 24ch; /* con 20ch el título pasaba a tres líneas */
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 0 24px var(--color-bg), 0 0 8px var(--color-bg);
  color: var(--color-heading);
  opacity: 1;
  transition: opacity .9s ease;
}
body.blown .message h1,
body.blown .message .subtitle,
body.blown .message .subtitle-date {
  opacity: 0;
  transition-delay: .6s;
}

/* ---------- Índice (aparece tras soplar el diente de león) ---------- */
.index {
  position: fixed;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
}
body.blown .index {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 1.6s;
}

/* La caja del índice ocupa todo el hueco libre (a la derecha del diente de
   león, entre el borde de arriba y el pie) y centra las tarjetas dentro.
   Las columnas (--index-cols) y la escala del texto (--index-scale) las
   ajusta main.js midiendo, para que siempre quepan sin scroll. */
.index-grid {
  position: absolute;
  left: var(--index-left);         /* común a todos los talleres (portada.css) */
  right: min(7rem, 5vw);
  top: var(--below-logo);         /* por debajo de la franja de logos */
  bottom: 3.5rem;
  display: grid;
  grid-template-columns: repeat(var(--index-cols, 1), 1fr);
  align-content: center;
  gap: 1.1em;
  font-size: calc(var(--index-scale, 1) * 1rem);
}
/* verticales o cuadradas: el diente de león ya no deja una columna libre a
   su derecha, así que el índice va centrado a lo ancho, por debajo del logo
   y por encima del pie (que en estrecho ocupa dos filas) */
@media (max-aspect-ratio: 5/4) {
  .index-grid {
    left: 0;
    right: 0;
    width: min(90%, 760px);
    margin-inline: auto;
    top: var(--below-logo);
    bottom: 4.25rem;
  }
}

/* Tarjetas de cristal (translúcidas, con desenfoque), esquinas rectas y sin
   borde. Título malva y descripción Paper. Al pasar por encima se alargan hacia
   la derecha (del 92 % al 100 %; el relleno derecho crece lo mismo para que el
   texto no salte), el fondo se aclara y el título pasa a naranja */
.index-card {
  display: block;
  width: 92%;
  background: var(--color-surface-glass);
  backdrop-filter: blur(8px);
  color: var(--color-text);
  padding: 1.5em 1.85em;
  text-decoration: none;
  transition: width .25s ease, padding-right .25s ease, background-color .25s ease;
}
a.index-card { cursor: pointer; }
a.index-card:hover,
a.index-card:focus-visible,
a.index-card:active {
  width: 100%;
  padding-right: calc(1.85em + 8%);
  background: var(--color-surface-glass-hover);
}
a.index-card:hover h3,
a.index-card:focus-visible h3,
a.index-card:active h3 {
  color: var(--color-accent);
}
a.index-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.index-card h3 {
  margin: 0 0 0.5em;
  font-size: 1.35em;
  font-weight: 700;
  color: var(--color-heading);
  transition: color .25s ease;
}
.index-card p {
  margin: 0;
  font-size: 0.9em;
  font-weight: 400;
  line-height: 1.5;
  color: inherit;
}

.byline {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-soft);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  text-align: center;
  transition: opacity .9s ease;
}
body.blown .byline {
  opacity: 0.65;
  transition-delay: 1.2s;
}

.credit {
  position: fixed;
  right: 1.25rem;
  bottom: 1rem;
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-soft);
  opacity: 0.65;
  z-index: 2;
  pointer-events: none;
}
/* en una sola fila, nombre (centrado) y crédito (derecha) se pisan por
   debajo de ~800px: se apilan a la derecha, con "Plantar otro" a la izquierda */
@media (max-width: 820px) {
  .byline {
    left: auto;
    right: 1rem;
    bottom: 2.35rem;
    transform: none;
    text-align: right;
  }
  .credit { right: 1rem; }
}
/* móviles muy estrechos: no caben el botón y el crédito lado a lado; el
   crédito es lo prescindible, y nombre y correo pasan a dos líneas */
@media (max-width: 440px) {
  .credit { display: none; }
  .byline { bottom: 0.9rem; line-height: 1.4; }
  .byline-sep { display: none; }
  .byline-part { display: block; }
}

.replant-btn {
  position: fixed;
  left: 1.5rem;
  bottom: 1.1rem;
  font: 500 0.8rem/1 inherit;
  font-family: inherit;
  letter-spacing: 2px; /* como las etiquetas de la portada de miweb */
  color: var(--color-text-on-button);
  background: var(--color-button);
  border: none;
  padding: 0.6rem 1rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity .6s ease, color .2s ease, background-color .2s ease;
}
/* se ilumina: naranja con texto Ink */
.replant-btn:hover,
.replant-btn:focus-visible,
.replant-btn:active { background: var(--color-accent); color: var(--color-text-on-accent); }
.replant-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
body.blown .replant-btn {
  opacity: 1;
  pointer-events: auto;
  /* el retraso es solo para aparecer tras soplar; si fuera un transition-delay
     general, también retrasaría el color del hover (tardaba >1 s en iluminarse) */
  transition: opacity .6s ease 1.2s, color .2s ease, background-color .2s ease;
}

/* ---------- Páginas de contenido (una por cada tema del índice) ---------- */
body.content-page {
  overflow: auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* el degradado radial de .message está pensado para una pantalla fija;
     en una página larga con scroll dejaba ver el borde del círculo, así
     que aquí el fondo es plano */
  background: var(--color-bg);
  background-color: var(--color-bg);
}
.content-header {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.5rem 1.5rem;
}
/* Navegación fija (Índice / Anterior / Siguiente): botones cuadrados de fondo
   liso --color-button (Powder Blue apagado) con texto Ink (5.9), como
   "Plantar otro"; opacos, para que se lean aunque el
   contenido pase por debajo al hacer scroll. Al pasar por encima se iluminan
   (naranja con texto Ink); no se alargan */
.back-link,
.prev-link,
.next-link {
  position: fixed;
  z-index: 3;
  padding: 0.55rem 1rem;
  background: var(--color-button);
  color: var(--color-text-on-button);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 2px; /* como las etiquetas de la portada de miweb */
  line-height: 1.2;
  transition: color .2s ease, background-color .2s ease;
}
.back-link { top: 1rem; left: 1rem; }
.prev-link { bottom: 1rem; left: 1rem; }
.next-link { bottom: 1rem; right: 1rem; }
.back-link:hover,
.prev-link:hover,
.next-link:hover,
.back-link:focus-visible,
.prev-link:focus-visible,
.next-link:focus-visible,
.back-link:active,
.prev-link:active,
.next-link:active { background: var(--color-accent); color: var(--color-text-on-accent); }
.back-link:focus-visible,
.prev-link:focus-visible,
.next-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* pantallas estrechas: el título ya ocupa todo el ancho, así que baja lo
   justo para quedar bajo "← Índice"; y abajo se reserva el hueco de
   Anterior/Siguiente para que el final del contenido no quede tapado */
@media (max-width: 720px) {
  .content-header { padding-top: 3.75rem; }
  body .content-body.no-scroll { padding-bottom: 4rem; }
  .content-body.no-scroll .hero-fold { min-height: calc(100dvh - 4rem); }
}
/* móvil: franjas del color del fondo, con borde recto, detrás de "← Índice"
   (arriba) y de Anterior / Siguiente (abajo), para que el texto pase por
   debajo sin verse. El fondo de estas páginas es liso, así que no se
   distinguen; los rellenos de .content-header (3.75rem) y .content-body
   (5rem, o 4rem en las no-scroll) dejan leer todo al final del scroll */
@media (max-width: 720px) {
  body.content-page::before,
  body.content-page::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    height: 3.75rem;
    background: var(--color-bg);
    z-index: 2; /* por debajo de los botones (3) */
    pointer-events: none;
  }
  body.content-page::before { top: 0; }
  body.content-page::after { bottom: 0; }
}
.content-header h1 {
  margin: 0 0 1rem;
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-heading);
}
.content-header h1.no-wrap {
  white-space: nowrap;
  font-size: clamp(1rem, 3vw, 2.75rem);
}
.content-header .lead {
  margin: 0.75rem 0 0;
  text-align: center;
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.6;
}

.content-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1.75;
}
.content-body.wide { max-width: 1000px; }
.content-body p { margin: 0 0 1.25rem; }
.content-body.no-scroll { padding-bottom: 0; }

/* ---------- Rueda de pasos (vibe coding) ---------- */
.wheel-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1.5rem 0 0rem;
}
/* los logos de las IAs van debajo de la rueda */
/* los logos de las IAs van bajo el subtítulo "Paso a paso" */
.guide-section > .ai-logos { margin: 0 0 3.5rem; }

/* Subtítulo de apartado: mismo estilo que los de Evolución y Antes de empezar */
/* Títulos y subtítulos en Plus Jakarta Sans 700; el texto sigue en Inter */
.message h1,
.content-header h1,
.section-title,
.ai-section h2,
.site-gallery h2,
.icon-cloud-title,
.ai-column h3,
.index-card h3 {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  letter-spacing: 0.01em; /* Plus Jakarta viene algo apretada en 700 */
}

/* Subtítulos de sección, todos iguales: mismo tamaño, negrita, color
   --color-subheading (el Slate de las fichas, aclarado para que se lea).
   (Tecnologías, Algunos ejemplos…, ¿Cómo encaja aquí la IA?, Proceso
   iterativo…). Cada uno conserva abajo su margen y alineación. */
.section-title,
.ai-section h2,
.site-gallery h2,
.icon-cloud-title {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 700;
  color: var(--color-subheading);
}
.section-title {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

/* ---------- Apartados de texto (Desarrollar con IA) ---------- */
/* mismo aire entre apartados que en Evolución (10rem) */
.guide-section {
  max-width: 720px;
  margin: 6rem auto 10rem;
}
.guide-section a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
  text-underline-offset: 0.2em;
}
.guide-section a:hover { text-decoration-color: currentColor; }

/* pasos numerados: el número en un círculo, como los de la rueda */
.steps-list {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* el número va posicionado a la izquierda (no con grid/flex), para que la
   negrita, los enlaces o la cursiva del texto no se partan en columnas */
.steps-list > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.25rem;
  color: var(--color-text);
  line-height: 1.7;
}
.steps-list > li::before {
  /* solo el número en azul claro, sin círculo; en la misma línea que el texto */
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent-soft);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.7rem;
}
/* subpuntos (2.1, 2.2…): sin círculo, número en azul claro alineado con el texto */
.substeps {
  list-style: none;
  counter-reset: substep;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.substeps > li {
  counter-increment: substep;
  position: relative;
  padding-left: 2.5rem;
}
.substeps > li::before {
  content: counter(step) "." counter(substep);
  position: absolute;
  left: 0;
  color: var(--color-accent-soft);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.7rem; /* misma línea que el texto (1rem × 1.7), para que cuadre la base */
}

/* consejos: la lista de rayitas de siempre, pero con texto de lectura */
.guide-tips { gap: 1.25rem; }
.guide-tips li { line-height: 1.7; }

/* teclas de los atajos */
.guide-section kbd {
  display: inline-block;
  padding: 0 0.45em;
  background: var(--color-surface-raised); /* tecla plana y cuadrada */
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.85em;
  line-height: 1.5;
}
.step-wheel {
  position: relative;
  width: min(560px, 92vw);
  aspect-ratio: 1;
}
.step-wheel-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.step-wheel-center {
  position: absolute;
  inset: 21%;
  border-radius: 50%;
  background: var(--color-surface-glass);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  gap: 0.5rem;
}
.step-wheel-index {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}
.step-wheel-title {
  margin: 0;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-weight: 700;
  color: var(--color-heading);
}
.step-wheel-desc {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text);
}

.step-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0.25rem;
  font: inherit;
  cursor: pointer;
}
.step-node-num {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-button);
  color: var(--color-text-on-button);
  font-weight: 700;
  font-size: 1.05rem;
  transition: background-color .2s ease, color .2s ease;
}
.step-node-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-soft);
  white-space: nowrap;
  transition: color .2s ease;
}
.step-node:hover .step-node-num,
.step-node.active .step-node-num {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}
.step-node:hover .step-node-label,
.step-node.active .step-node-label {
  color: var(--color-text);
}
.step-node:focus-visible .step-node-num {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
@media (max-width: 560px) {
  .step-node-label { display: none; }
}

.feature-intro {
  max-width: 380px;
  margin: 0 auto 3.5rem;
}
.feature-heading {
  margin: 0 0 1.25rem;
  text-align: left;
  color: var(--color-text);
  font-size: 1.15rem;
  font-weight: 400; /* es texto, no subtítulo */
}
.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.feature-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-text-soft);
  font-size: 0.95rem;
  font-weight: 400;
  transition: color .25s ease;
}
.feature-list li::before {
  content: '';
  width: 28px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--color-border-strong);
  transition: width .25s ease, background-color .25s ease;
}
.feature-list li:hover {
  color: var(--color-text);
}
.feature-list li:hover::before {
  width: 44px;
  background: var(--color-accent);
}

/* variante para textos largos (varias líneas): la rayita se alinea con la
   primera línea en vez de quedar centrada contra todo el párrafo */
.feature-list.stacked li { align-items: flex-start; }
.feature-list.stacked li::before { margin-top: 0.6em; }

/* ---------- ¿Qué aporta la IA? (antes de empezar) ---------- */
.ai-section {
  margin: 14rem 0 10rem;
}
.ai-section h2 {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.ai-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin: 0 0 3.5rem;
}
.ai-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
/* en Desarrollar con IA los logos enlazan a cada herramienta */
a.ai-logo {
  text-decoration: none;
  transition: transform .2s ease;
}
a.ai-logo:hover { transform: translateY(-3px); }
a.ai-logo:hover .ai-logo-name { color: var(--color-accent); }
a.ai-logo:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 8px; }
.ai-logo-badge {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}
/* icono real, servido por Simple Icons (cdn.simpleicons.org); si el slug no
   existiera, onerror lo oculta y deja ver la insignia de texto de debajo */
.ai-logo-badge img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  /* los SVG de Simple Icons vienen en negro; esto los fuerza a blanco sea
     cual sea su color original, para que contrasten sobre la insignia */
  filter: brightness(0) invert(1);
}
.ai-logo-fallback { visibility: hidden; }
.ai-logo-name {
  font-size: 0.8rem;
  color: var(--color-text-soft);
}
.ai-logo-badge.claude { background: #d97757; }
.ai-logo-badge.chatgpt { background: #10a37f; }
.ai-logo-badge.gemini { background: linear-gradient(135deg, #4285f4, #a142f4); }
.ai-logo-badge.deepseek { background: #4d6bfe; }
.ai-logo-badge.grok { background: #111; }
.ai-logo-badge.copilot { background: #8957e5; }

.ai-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 3rem;
  max-width: 900px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .ai-columns { grid-template-columns: 1fr; gap: 2.5rem; }
}
.ai-column h3 {
  margin: 0 0 1.4rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-accent-soft);
}

/* ---------- Nube de iconos (evolución de las páginas web) ---------- */
/* Ocupa exactamente una pantalla (dvh tiene en cuenta las barras del
   navegador), así que el resto de la página queda oculto hasta hacer scroll */
.hero-fold {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.hero-fold .icon-cloud {
  margin-top: auto;
  margin-bottom: auto;
}

/* ---------- ¿Y ahora qué? (solo título + imagen, cabe en una pantalla) ---------- */
.next-steps-fold { padding-bottom: 1.5rem; }
.next-steps-fold .content-header { padding-bottom: 0; }
/* el hueco libre se reparte a partes iguales: título · enlace · foto · borde
   de abajo, así el enlace queda centrado entre el título y la foto */
.next-steps-block {
  flex: 1;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.next-steps-link {
  margin: auto 0;
  padding-block: 0.75rem; /* separación mínima si la pantalla va justa */
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  transition: color .2s ease;
}
.next-steps-link:hover { color: var(--color-accent); }
.next-steps-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 4px; }
.next-steps-photo {
  display: block;
  margin: 0 0 auto;
  max-width: 100%;
  border-radius: 16px;
  transition: transform .2s ease;
}
.next-steps-photo:hover { transform: translateY(-3px); }
.next-steps-photo:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.next-steps-image {
  display: block;
  max-width: 100%;
  /* deja sitio al título y al enlace de encima para que todo quepa en una pantalla */
  max-height: calc(100dvh - 12rem);
  width: auto;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.icon-cloud {
  position: relative;
  width: 100%;
  max-width: 1040px;
  height: min(66dvh, 660px);
  margin: 1rem 0 0.75rem;
  cursor: pointer;
}
.icon-cloud.done { cursor: default; }
.icon-cloud-title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity .5s ease;
}
.icon-cloud.started .icon-cloud-title { opacity: 0; }
.icon-cloud:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 6px; }

.icon-chip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 1s ease;
}
.icon-chip.visible {
  opacity: 1;
}
.icon-chip-glyph {
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  font-size: 52px;
  line-height: 1;
}
.icon-chip-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-soft);
  white-space: nowrap;
  text-shadow: 0 0 10px var(--color-bg);
}
.icon-chip.flash svg,
.icon-chip.aws svg,
.icon-chip.joomla svg { display: block; }
/* iconos de tecnologias: SVG locales (img/tech), sin CDN de por medio */
.icon-chip-glyph .tech-icon {
  display: block;
  width: 52px;
  height: 52px;
}

/* ---------- Galería de webs de ejemplo ---------- */
.site-gallery {
  margin: 5.5rem 0 0rem;
}
.site-gallery.tight { margin-top: 2.5rem; }
.site-gallery h2 {
  max-width: 640px;
  margin: 0 auto 1.75rem;
  text-align: center;
}
.site-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .site-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .site-grid { grid-template-columns: 1fr; }
}
/* Tarjetas de webs de ejemplo: esquinas rectas, sin borde; la franja del
   nombre en Blue Slate (como las tarjetas de los índices) y en hover naranja */
.site-card {
  /* columna que llena la celda: si un nombre ocupa dos líneas, las franjas de
     toda la fila se igualan en altura */
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.site-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.site-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-surface-raised);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ilustraciones propias en vez de capturas reales: nada que cargar ni que
   pueda fallar, evocan el estilo de cada web sin depender de un servicio externo. */
.thumb-cern {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.35rem;
  padding: 1.25rem 1.5rem;
  background: #ece7da;
  font-family: "Courier New", Courier, monospace;
}
.thumb-cern-kicker { margin: 0; font-size: 0.75rem; color: #6b6b5f; }
.thumb-cern-line { margin: 0; font-size: 1.15rem; color: #1a1a1a; }
.thumb-cern-link { color: #1c3fa8; text-decoration: underline; }

.thumb-spacejam {
  background: #000;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 28% 65%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 45% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 62% 78%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 75% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 88% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 18% 85%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 95% 88%, #fff, transparent);
}
.thumb-spacejam-title {
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: #ffd400;
  text-shadow: 2px 2px 0 #e0245e, -1px -1px 0 #1da1f2;
}

.thumb-museum {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3px;
  padding: 3px;
}
.thumb-museum span { display: block; }
.thumb-museum span:nth-child(1) { background: #e4c3ad; }
.thumb-museum span:nth-child(2) { background: #9ea3b0; }
.thumb-museum span:nth-child(3) { background: #546a7b; }
.thumb-museum span:nth-child(4) { background: #fae1df; }
.thumb-museum span:nth-child(5) { background: #546a7b; }
.thumb-museum span:nth-child(6) { background: #fae1df; }
.thumb-museum span:nth-child(7) { background: #e4c3ad; }
.thumb-museum span:nth-child(8) { background: #9ea3b0; }

.thumb-miranda { background: #111; }
.thumb-miranda-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  color: var(--color-text);
}

.thumb-codepen {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  background: #1e1e1e;
}
.thumb-codepen-icon {
  font-family: "Courier New", monospace;
  font-weight: 700;
  color: #47cf73;
  font-size: 1.1rem;
}
.thumb-codepen-line { display: block; height: 6px; border-radius: 3px; }
.thumb-codepen-line-a { width: 70%; background: #569cd6; }
.thumb-codepen-line-b { width: 50%; background: #ce9178; }
.thumb-codepen-line-c { width: 60%; background: #9cdcfe; }

.thumb-brunosimon {
  background: radial-gradient(circle at 50% 40%, #2a2440, #0d0b1a);
}

.thumb-brittany {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 1.25rem 1.5rem;
  background: #0a192f;
}
.thumb-brittany-prompt {
  font-family: "Courier New", monospace;
  color: #64ffda;
  font-size: 1.1rem;
}
.thumb-brittany-line { height: 6px; width: 65%; border-radius: 3px; background: rgba(100, 255, 218, 0.35); }

.thumb-cutler {
  background: #f4f1ea;
}
.thumb-cutler-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  letter-spacing: 0.18em;
  color: #1a1a1a;
}

.thumb-joshwcomeau {
  background: linear-gradient(135deg, #f7d0e0, #c9b6f2 55%, #a0d8ef);
}
.thumb-joshwcomeau-mark {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.thumb-mire {
  background: #16161a;
}
.thumb-mire-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3rem;
  letter-spacing: 0.4em;
  color: var(--color-text);
  padding-left: 0.4em;
}

.thumb-ange {
  background: linear-gradient(160deg, #efe6de, #d9c9bb);
}
.thumb-ange-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.5rem;
  color: #3a2e26;
}

.thumb-bao {
  background: #c8102e;
}
.thumb-bao-mark {
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: 0.06em;
  color: #f6ead9;
}

.site-name {
  display: block;
  flex: 1;
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--color-card);
  color: var(--color-text-on-card);
  transition: background-color .2s ease, color .2s ease;
}
.site-card:hover .site-name,
.site-card:focus-visible .site-name,
.site-card:active .site-name {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

/* ---------- Scroll por secciones (páginas con <html class="snap">) ---------- */
/* Solo en ordenador (ratón y pantalla con altura suficiente): cada
   .snap-slide ocupa una pantalla con su contenido centrado y el scroll salta
   de una a otra. En móvil y tablet el scroll es normal y valen los márgenes
   de siempre. js/secciones.js marca la sección activa para el fundido. */
/* la flechita de js/secciones.js solo existe en ordenador con encaje */
.scroll-hint { display: none; }
@media (min-width: 900px) and (min-height: 640px) and (hover: hover) and (pointer: fine) {
  html.snap {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;    /* teclado y flechas: desplazamiento animado, no a saltos */
  }
  html.snap .content-body { padding-bottom: 0; }

  html.snap .snap-slide {
    min-height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;   /* una sección por gesto, sin saltarse ninguna */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 3.75rem;     /* hueco para Índice (arriba) y Anterior/Siguiente (abajo) */
  }

  /* dentro de una pantalla sobran los márgenes grandes entre apartados */
  /* la pantalla con el título no se centra: el título va a la misma altura
     que en el resto de páginas (mismo padding de .content-header) y lo que
     viene debajo se centra en el hueco que queda */
  html.snap .snap-slide:has(> .content-header) {
    padding-top: 0;
    justify-content: flex-start;
  }
  html.snap .snap-slide .wheel-section { margin: 0; }
  html.snap .snap-slide > .content-header ~ .wheel-section { margin-block: auto; }
  html.snap .guide-section > .ai-logos { margin: 0 0 2.5rem; }
  html.snap .snap-slide .guide-section { max-width: 860px; margin: 0 auto; }
  html.snap .steps-list { gap: 1.1rem; }
  html.snap .guide-tips { gap: 1rem; }

  /* la rueda se ajusta al alto de la pantalla para que quepa con el título */
  html.snap .step-wheel { width: min(560px, 92vw, calc(100dvh - 18.5rem)); }

  /* Evolución: los bloques son pantallas, sin sus márgenes grandes */
  html.snap .snap-slide.site-gallery,
  html.snap .snap-slide.ai-section { margin: 0; }
  /* la nube de iconos deja sitio al título dentro de la pantalla */
  html.snap .hero-fold .icon-cloud { height: min(66dvh, 660px, calc(100dvh - 15.5rem)); }
  /* la galería (2 filas de 3) se estrecha en pantallas bajas para caber */
  html.snap .site-gallery .site-grid {
    max-width: calc((100dvh - 19.5rem) * 2.4);
    margin-inline: auto;
  }

  /* fundido: la sección activa entera, las demás atenuadas mientras pasan */
  html.snap.snap-fade .snap-slide {
    opacity: 0.25;
    transition: opacity .9s cubic-bezier(.4, 0, .2, 1);
  }
  html.snap.snap-fade .snap-slide.is-active { opacity: 1; }

  /* mientras queden secciones por debajo (html.snap-pending, lo pone
     js/secciones.js) no se ven Anterior/Siguiente, sino una flechita centrada
     que baja a la siguiente; en la última sección vuelven los botones */
  .prev-link,
  .next-link { transition: color .2s ease, background-color .2s ease, opacity .25s ease, visibility .25s; }
  html.snap-pending .prev-link,
  html.snap-pending .next-link { opacity: 0; visibility: hidden; }
  .scroll-hint {
    position: fixed;
    z-index: 3;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    padding: 0.3rem;
    border: 0;
    background: none;
    color: var(--color-text-soft);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: color .2s ease, opacity .25s ease, visibility .25s;
  }
  .scroll-hint svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  html.snap-pending .scroll-hint { opacity: 1; visibility: visible; }
  .scroll-hint:hover,
  .scroll-hint:focus-visible { color: var(--color-accent); }
  .scroll-hint:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  html.snap.snap-fade .snap-slide { transition: none; }
  html.snap { scroll-behavior: auto; }
}