/* Escena "Diseño web", parte 2: EL ESTUDIO — cuatro secciones seguidas tras la ventana 2:
   01 Cómo trabajamos · 02 Diseños · 03 Precios · 04 Hablemos.

   Última dirección del usuario (tras muchas rondas con referencias distintas en cada sección):
   "hay una completa desconexión entre la portada y los dos puntos con la misma temática y el
   resto de la web… no quiero que sea como diapositivas… quiero que sea como en la de
   automatizaciones… debe ser una web creada por un desarrollador que demuestra en ella sus
   capacidades". De ahí:
   - UN lenguaje, el de la portada y la ventana 2: papel crema (#f4f1e8) y el azul de la portada
     (#231aab) alternándose, rojo para la palabra clave (como "VAS TARDE."), el amarillo del marco
     como acento puntual, títulos en Anybody negra estrecha y en mayúsculas (la letra de "DISEÑO
     WEB" y de la frase de la ventana 2), etiquetas en mono con las líneas de celda de la barra.
   - Una web, no diapositivas: cada sección mide lo que su contenido (sin min-height de pantalla)
     y la escena se recorre con un scroll libre y suave (webdesign.js); entre secciones el fondo
     se funde (abajo).
   - Una cabecera común (`.wd__sh`) en las cuatro: una línea que se dibuja, la etiqueta
     "0N · Nombre" en celdas y el título.

   Aquí: la base de las secciones, el fundido, la cabecera y "01 Cómo trabajamos". Diseños en
   webdesign-lib.css, Precios en webdesign-price.css, Hablemos en webdesign-stage.css. */

:root {
  --wd-font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --wd-cream: #f4f1e8;
  --wd-indigo: #231aab;
  --wd-yellow: #dfc94d;
  --wd-coral: #e0392b;
  --wd-coral-hi: #ff4b3e;
  --wd-night: #0b0b0d;
  --wd-deep: #0f0b4a; /* el azul de la portada, casi de noche (Hablemos) */
  --wd-azure: #4d5bff;
  --wd-mist: #8d8f9c;
}

/* Las tildes/ascendentes necesitan algo más de ventana al subir (títulos). */
.wd__mask--serif {
  padding-left: 0.1em;
  margin-left: -0.1em;
  padding-top: 0.14em;
  margin-top: -0.14em;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

/* ---------- Una sección ---------- */

.wd__sec {
  --fade: 12vh;
  --pad-x: calc(var(--wd-frame-w) + var(--wd-hub-pad-x));
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: auto;
  padding: clamp(6.5rem, 17vh, 11rem) var(--pad-x) clamp(5rem, 13vh, 9rem);
  border: 0;
  overflow: hidden;
  isolation: isolate;
  color: var(--c-ink);
  /* EL FUNDIDO: arriba el fondo empieza a medio camino entre el de la sección anterior y el suyo;
     abajo termina a medio camino entre el suyo y el de la siguiente — los dos lados de cada
     costura pintan el mismo color, así que se pasa de una a otra sin corte. Encima, en la costura,
     una línea fina que se desvanece a los lados. */
  background: linear-gradient(90deg, transparent 8%, rgba(141, 143, 156, 0.5) 50%, transparent 92%) 50% 0 / 100% 1px no-repeat,
    linear-gradient(
      180deg,
      var(--seam-t, color-mix(in srgb, var(--prev-bg, var(--c-bg)) 50%, var(--c-bg))) 0,
      var(--c-bg) var(--fade-t, var(--fade)),
      var(--c-bg) calc(100% - var(--fade-b, var(--fade))),
      var(--seam-b, color-mix(in srgb, var(--next-bg, var(--c-bg)) 50%, var(--c-bg))) 100%
    );
}

/* (--seam-t / --seam-b: el color exacto de una costura, cuando la mezcla a partes iguales queda
   sucia — la de Precios → Hablemos, crema con azul noche, daba un gris apagado; va en lavanda, del
   azul de la portada. Las dos secciones de la costura deben llevar el mismo.) */

/* (--fade-t / --fade-b: una costura puede fundirse más despacio que las demás; la de Precios →
   Hablemos, de papel crema al azul de noche, es la de más contraste — el usuario pidió suavizarla —
   y lleva 34vh a cada lado, en línea en el HTML.) */

/* papel: el de la ventana 2 */
.wd__sec--paper {
  --c-bg: var(--wd-cream);
  --c-ink: var(--wd-indigo);
  --wd-ink: #231aab;
  --wd-blue: #f4f1e8;
  --wd-line: rgba(35, 26, 171, 0.2);
  --sh-line: rgba(35, 26, 171, 0.28);
}

/* azul: el de la portada, con su misma luz (un brillo arriba a la derecha, una sombra abajo a la
   izquierda) — puesto por debajo del fundido de los bordes para no romper la costura */
.wd__sec--blue,
.wd__sec--deep {
  --c-ink: var(--wd-cream);
  --wd-ink: #f4f1e8;
  --wd-blue: #231aab;
  --wd-line: rgba(244, 241, 232, 0.2);
  --sh-line: rgba(244, 241, 232, 0.3);
}

.wd__sec--blue {
  --c-bg: var(--wd-indigo);
}

.wd__sec--deep {
  --c-bg: var(--wd-deep);
}

.wd__sec--blue::before {
  content: "";
  position: absolute;
  inset: var(--fade) 0;
  z-index: -1;
  background: radial-gradient(60% 55% at 88% 20%, rgba(58, 46, 212, 0.85), transparent 65%),
    radial-gradient(55% 50% at 0% 100%, rgba(10, 6, 90, 0.45), transparent 70%);
  pointer-events: none;
}

/* la primera viene del mismo crema de la ventana 2: sin línea de costura */
#wd-sec-trabajo {
  background: linear-gradient(
    180deg,
    var(--c-bg) 0,
    var(--c-bg) calc(100% - var(--fade)),
    color-mix(in srgb, var(--next-bg, var(--c-bg)) 50%, var(--c-bg)) 100%
  );
}

.wd__sec :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.wd__sec ::selection {
  color: var(--wd-cream);
  background: var(--wd-coral);
}

/* ---------- La cabecera común ---------- */

.wd__sh {
  position: relative;
  z-index: 2;
}

/* la etiqueta, en celdas separadas por filetes — el mismo dibujo que la barra de la portada
   (Volver | Arriba | Baja) — sobre una línea que se dibuja de izquierda a derecha al entrar */
.wd__sh-meta {
  position: relative;
  display: flex;
  align-items: stretch;
  margin: 0;
  font: 500 0.72rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wd__sh-meta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--sh-line);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1400ms var(--ease-out-expo) 100ms;
}

.wd__sh-meta > span {
  display: flex;
  align-items: center;
  padding: 0.95rem 1.2rem;
  border-right: 1px solid var(--sh-line);
}

.wd__sh-meta > span:first-child {
  padding-left: 0;
  color: var(--wd-coral-hi);
}

.wd__sh-end {
  margin-left: auto;
  border-right: 0 !important;
  border-left: 1px solid var(--sh-line);
  padding-right: 0 !important;
  opacity: 0.75;
}

/* el título: la letra maciza de la portada, estrecha y en mayúsculas; la palabra clave en rojo */
.wd__sh-t {
  margin: clamp(1.4rem, 4vh, 2.6rem) 0 0;
  font-family: var(--wd-font-chunk);
  font-size: clamp(3.2rem, 1rem + 8.2vw, 11rem);
  font-synthesis: none;
  font-variation-settings: "wdth" 66;
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: uppercase;
}

.wd__sh-t em,
.wd__sec .wd__w--hot {
  color: var(--wd-coral-hi);
  font-style: normal;
}

.wd__sec-lead {
  position: relative;
  z-index: 2;
  max-width: 34ch;
  margin: clamp(1.5rem, 4vh, 2.6rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.85rem + 0.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.02em;
  opacity: 0.88;
}

/* entradas (webdesign.js pone .is-shown al verse la sección): la línea se dibuja, las palabras
   del título suben por su ventana (.wd__w, ver webdesign-data.css) y la entradilla aparece */
.wd__sec.is-shown .wd__sh-meta::before {
  transform: scaleX(1);
}

.wd__sec.is-shown .wd__w {
  transform: none;
}

.wd__sh-meta > span,
.wd__sec-lead {
  opacity: 0;
  translate: 0 0.6rem;
  transition: opacity 700ms ease 350ms, translate 900ms var(--ease-out-expo) 350ms;
}

.wd__sec-lead {
  transition-delay: 550ms;
}

.wd__sec.is-shown .wd__sh-meta > span {
  opacity: 1;
  translate: none;
}

.wd__sec.is-shown .wd__sh-end {
  opacity: 0.75;
}

.wd__sec.is-shown .wd__sec-lead {
  opacity: 0.88;
  translate: none;
}

/* EL AMARILLO DE LA PORTADA, rescatado con mesura (el usuario: "la portada usaba también amarillo,
   rescátalo levemente"): un trazo de rotulador bajo las palabras clave de cada entradilla, que se
   pinta de izquierda a derecha al llegar a la sección. Sobre azul, igual (el texto sigue crema). */
/* Un trazo de rotulador "de verdad" (petición: "mejora los subrayados como si fuesen reales"): un
   SVG con los bordes irregulares, los extremos gastados y una segunda pasada más clara encima (la
   tinta que se acumula donde el rotulador vuelve), un pelín inclinado y por la mitad baja de la
   letra. Se "pinta" de izquierda a derecha al llegar a la sección (background-size 0 → 100 %; con
   preserveAspectRatio="none" el trazo se estira según avanza, como el rotulador al arrastrarse).
   box-decoration-break: clone — si la frase se parte en dos líneas, cada una lleva su trazo. */
.wd__hl {
  --hl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath fill='%23dfc94d' fill-opacity='.72' d='M4 17c9-3 23-4 39-4 31-1 60 2 91 0 34-2 66-3 99-2 22 1 40 1 58 3 4 1 6 4 5 8-1 5 1 9-2 12-19 3-38 2-58 3-35 1-70 3-104 3-32 0-61-2-93 0-13 0-26 1-35-1-4-4-3-9-3-13 0-4 0-7 3-9z'/%3E%3Cpath fill='%23e8d25a' fill-opacity='.45' d='M12 20c30-2 64-1 98-2 43-1 86 0 128-2 17 0 36 1 51 3-1 4-2 7-4 9-24 1-49 0-73 1-44 1-88 2-132 2-24 0-46-1-66 0-3-3-3-8-2-11z'/%3E%3C/svg%3E");
  padding: 0 0.12em;
  margin: 0 -0.06em;
  color: inherit;
  background: var(--hl) 0 72% / 0% 62% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1300ms cubic-bezier(0.55, 0, 0.25, 1) 900ms;
}

/* sobre azul, un trazo translúcido se veía gris verdoso: aquí va casi opaco, más alto (tapa casi
   toda la letra, como un rotulador de verdad sobre papel oscuro) y las palabras marcadas pasan a
   tinta azul noche a la vez que se pintan */
.wd__sec--blue .wd__hl,
.wd__sec--deep .wd__hl {
  --hl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath fill='%23dfc94d' fill-opacity='.95' d='M4 17c9-3 23-4 39-4 31-1 60 2 91 0 34-2 66-3 99-2 22 1 40 1 58 3 4 1 6 4 5 8-1 5 1 9-2 12-19 3-38 2-58 3-35 1-70 3-104 3-32 0-61-2-93 0-13 0-26 1-35-1-4-4-3-9-3-13 0-4 0-7 3-9z'/%3E%3Cpath fill='%23f0dc6a' fill-opacity='.6' d='M12 20c30-2 64-1 98-2 43-1 86 0 128-2 17 0 36 1 51 3-1 4-2 7-4 9-24 1-49 0-73 1-44 1-88 2-132 2-24 0-46-1-66 0-3-3-3-8-2-11z'/%3E%3C/svg%3E");
  background-position: 0 60%;
  transition: background-size 1300ms cubic-bezier(0.55, 0, 0.25, 1) 900ms, color 500ms ease 1300ms;
}

.wd__sec.is-shown .wd__hl {
  background-size: 100% 62%;
}

.wd__sec--blue.is-shown .wd__hl,
.wd__sec--deep.is-shown .wd__hl {
  background-size: 100% 100%;
  color: var(--wd-deep);
}

/* Las letras de los títulos se ensanchan y estrechan con el puntero y "respiran" solas, como la
   palabra "DISEÑO WEB" de la portada (webdesign-work.js parte cada título en letras y anima su eje
   `wdth`). */
.wd__lt {
  font-variation-settings: "wdth" 66;
}

/* ---------- 01 · Cómo trabajamos: los pasos, unidos por una línea que se dibuja con el scroll ---------- */
/* La línea (roja) avanza según se baja por la sección (--p, lo escribe webdesign.js) y va
   encendiendo cada paso al pasar por él (.is-on): su marca cuadrada se rellena y su número, en
   contorno, se llena de rojo. */

.wd__flow {
  --p: 0;
  position: relative;
  z-index: 2;
  margin-top: clamp(3.5rem, 9vh, 6.5rem);
}

.wd__flow-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--sh-line);
}

.wd__flow-line i {
  position: absolute;
  inset: 0;
  background: var(--wd-coral-hi);
  transform: scaleX(var(--p));
  transform-origin: 0 50%;
}

.wd__flow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wd__flow-steps > li {
  position: relative;
  padding-top: 2.2rem;
  opacity: 0.4;
  transform-origin: top center;
  transition: opacity 600ms ease, transform 450ms var(--ease-out-expo);
}

/* la marca de cada paso sobre la línea: un cuadrado (el lenguaje del logo) */
.wd__flow-steps > li::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 14px;
  height: 14px;
  border: 2px solid var(--c-ink);
  background: var(--c-bg);
  transition: background-color 400ms ease, border-color 400ms ease, transform 600ms var(--ease-out-expo);
}

.wd__flow-steps > li.is-on {
  opacity: 1;
}

.wd__flow-steps > li.is-on::before {
  border-color: var(--wd-coral-hi);
  background: var(--wd-coral-hi);
  transform: rotate(45deg);
}

.wd__flow-n {
  display: block;
  color: transparent;
  font-family: var(--wd-font-chunk);
  font-size: clamp(3.2rem, 1.6rem + 3.4vw, 6rem);
  font-synthesis: none;
  font-variation-settings: "wdth" 66;
  font-weight: 900;
  line-height: 0.8;
  -webkit-text-stroke: 1.5px var(--c-ink);
  transition: color 500ms ease, -webkit-text-stroke-color 500ms ease;
}

.wd__flow-steps > li.is-on .wd__flow-n {
  color: var(--wd-coral-hi);
  -webkit-text-stroke-color: var(--wd-coral-hi);
}

.wd__flow-steps h3 {
  margin: 1.1rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 0.9rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}

.wd__flow-steps > li > p {
  max-width: 26ch;
  margin: 0.6rem 0 0;
  font-family: var(--font-display);
  font-size: 0.98rem;
  line-height: 1.45;
  opacity: 0.72;
}

/* MÁS INFORMACIÓN, siempre a la vista debajo de cada paso (antes se desplegaba solo al pasar por
   encima; el usuario pidió verla directamente: "que se vean directamente las explicaciones abajo,
   no que al pasar por encima de un número salgan"). Para compensar a nivel visual la falta de esa
   revelación, al pasar por encima del número o del texto de un paso, ESE paso se eleva por encima
   de los demás (escala + z-index + su número y su marca pasan al rojo de "encendido", como si el
   scroll ya lo hubiera activado) y los otros se atenúan un poco — ver más abajo. */
.wd__flow-steps > li {
  cursor: default;
  outline: none;
}

.wd__flow-more {
  display: grid;
  grid-template-rows: 1fr 1fr;
  margin-top: 1rem;
  opacity: 1;
}

.wd__flow-more > * {
  min-height: 0;
  overflow: hidden;
}

.wd__flow-more ul {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0.9rem 0 0;
  border-top: 1px dashed var(--sh-line);
  list-style: none;
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.35;
}

.wd__flow-more li {
  position: relative;
  padding-left: 1.1rem;
}

.wd__flow-more li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--wd-coral-hi);
}

.wd__flow-get {
  grid-row: 2;
  margin: 0;
  padding-top: 0.8rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.35;
}

.wd__flow-get b {
  padding: 0 0.25em;
  background: var(--wd-yellow);
  color: var(--wd-indigo);
  font: 500 0.66rem/1.6 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Al pasar por el número o el texto de un paso, ese paso se eleva por encima de los demás. */
.wd__flow-steps > li:hover,
.wd__flow-steps > li:focus-visible {
  z-index: 2;
  transform: scale(1.045);
}

.wd__flow-steps > li:hover::before,
.wd__flow-steps > li:focus-visible::before {
  border-color: var(--wd-coral-hi);
  background: var(--wd-coral-hi);
  transform: rotate(45deg);
}

.wd__flow-steps > li:hover .wd__flow-n,
.wd__flow-steps > li:focus-visible .wd__flow-n {
  color: var(--wd-coral-hi);
  -webkit-text-stroke-color: var(--wd-coral-hi);
}

.wd__flow-steps:has(> li:hover, > li:focus-visible) > li:not(:hover, :focus-visible) {
  opacity: 0.35;
}

/* ---------- Móvil ---------- */

@media (max-width: 42rem) {
  /* en móvil los fundidos largos (34vh entre Precios y Hablemos) eran media pantalla de lila
     sin contenido: costuras cortas (el !important gana a los valores en línea del HTML) */
  .wd__sec {
    --fade: 4vh;
    --fade-t: 4vh !important;
    --fade-b: 4vh !important;
    padding-top: 6rem;
  }

  .wd__sh-end {
    display: none !important;
  }

  /* los pasos en columna, con la línea en vertical a la izquierda */
  .wd__flow-line {
    top: 0;
    bottom: 0;
    left: 6px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .wd__flow-line i {
    transform: scaleY(var(--p));
    transform-origin: 50% 0;
  }

  .wd__flow-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
  }

  .wd__flow-steps > li {
    padding: 0 0 0 2.2rem;
  }

  .wd__flow-steps > li::before {
    top: 0.3rem;
    left: 0;
  }

  /* en móvil no hay hover: el "sobresalir" no aplica */
  .wd__flow-steps > li:hover,
  .wd__flow-steps > li:focus-visible {
    transform: none;
  }

  .wd__flow-more li::before {
    top: 0.45em;
    left: 0;
  }
}

@media (prefers-reduced-motion: reduce) and (width < 0px) {
  .wd__sec *,
  .wd__sec *::before {
    transition: none !important;
  }

  .wd__sh-meta::before {
    transform: none;
  }

  .wd__sh-meta > span,
  .wd__sec-lead,
  .wd__flow-steps > li {
    opacity: 1;
    translate: none;
  }
}