/* KUSAK · SŌ Studio: estilos de la página de inicio.
   Minimalista japonés sobrio: washi y sumi, mucho aire, Mincho grande y el
   sello 創 como acento, y el pixel art de matsuri como detalle: Capitán (el
   perro), faroles y sakura. Los controles son de sello y tinta. */

/* ---------- Fuentes (recortes de Google Fonts, licencia OFL) ---------- */

@font-face {
  font-family: 'Shippori Mincho';
  src: url('fonts/shippori-mincho-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  /* Solo 創 (ninguna fuente trae Ō: la barra se dibuja con .o-largo) */
  font-family: 'Shippori Mincho';
  src: url('fonts/shippori-mincho-700-extra.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+5275;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  src: url('fonts/zen-kaku-gothic-new-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  src: url('fonts/zen-kaku-gothic-new-700-latin.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  /* Cartel LED: solo para datos (dominios, rótulos de placa, el mensaje) */
  font-family: 'DotGothic16';
  src: url('fonts/dotgothic16-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F;
}
/* ---------- Tokens ---------- */

:root {
  --color-washi: #f1e9d8;
  --color-sumi: #151923;
  --color-edo-indigo: #263b59;
  --color-vermillion: #b94735;

  /* Derivados */
  --bermellon-hondo: #a8402f;   /* fondo de botón: 5:1 con washi */
  --bermellon-noche: #8f3627;
  --tinta-2: #4a5263;           /* texto secundario sobre washi */
  --papel-2: #cfc8b8;           /* texto secundario sobre sumi */
  --papel-campo: #fbf7ef;
  --borde-campo: #8d8574;
  /* Colores del chat, solo para que se reconozca WhatsApp */
  --wa-verde: #008069;
  --wa-envio: #00a884;
  --wa-burbuja: #d9fdd3;
  --wa-fondo: #efeae2;
  --wa-barra: #f0f2f5;
  --wa-gris: #54656f;
  --wa-tilde: #53bdeb;
  --filete: rgba(21, 25, 35, .14);
  /* Movimiento: salida rápida que asienta */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --wa-tilde-gris: #8696a0;

  --f-mincho: 'Shippori Mincho', 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --f-gothic: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  --f-led: 'DotGothic16', ui-monospace, monospace;

  --margen: clamp(16px, 4vw, 48px);
  --ancho: 1200px;
  --aire: clamp(64px, 12vw, 176px);
  --foco: var(--color-edo-indigo);

  color-scheme: light;
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--borde-campo) var(--color-washi);
}

body {
  margin: 0;
  background-color: var(--color-washi);
  /* Fibras del papel, casi invisibles */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  color: var(--color-sumi);
  font-family: var(--f-gothic);
  font-size: 1.0625rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--color-vermillion);
}

::selection { background: var(--color-sumi); color: var(--color-washi); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-mincho);
  font-weight: 700;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 2px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.2em; height: 1.2em; flex: none; }
.nowrap { white-space: nowrap; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.saltar {
  position: absolute;
  left: var(--margen); top: 8px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--color-sumi);
  color: var(--color-washi);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform .2s ease-out;
}
.saltar:focus { transform: none; }

/* Secciones: una sola columna de ancho, separadas por aire y un filete */
.inicio,
.trabajos,
.servicios,
.pasos,
.presupuesto {
  width: min(var(--ancho), 100% - 2 * var(--margen));
  margin: 0 auto;
}
.trabajos,
.servicios,
.pasos,
.presupuesto {
  padding: var(--aire) 0;
  border-top: 1px solid var(--filete);
}

.cabeza { margin-bottom: clamp(48px, 6vw, 88px); }
.cabeza h2 { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.5rem); line-height: 1.1; }
.cabeza p { max-width: 60ch; margin-top: 18px; color: var(--tinta-2); font-size: 1.125rem; }
@media (max-width: 760px) {
  .cabeza { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Sello 創 ---------- */

.sello {
  display: inline-block;
  flex: none;
  width: 38px;
  aspect-ratio: 1;
  /* El sello es el logo dibujado (assets/marca); el 創 de texto queda solo para quien lo copie */
  background: url("marca/sello.svg") center / contain no-repeat;
}
.sello > span { display: none; }
.sello--chico { width: 28px; }
/* La Ō de SŌ: ninguna de las fuentes la trae, así que la barra se dibuja sobre la O */
.o-largo { position: relative; }
.o-largo::before {
  /* La O arranca a .44em del borde de su caja en Zen Kaku y Shippori; la barra va justo encima */
  content: "";
  position: absolute;
  top: .25em;
  left: .12em;
  width: .5em;
  height: .08em;
  background: currentColor;
}

/* ---------- Botones y enlaces ---------- */

.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* Botones "sello y tinta": el principal es un sello bermellón con su doble marco
   (un filete claro a 3 px del borde); el de contorno es un filete sumi. Al pasar el
   mouse la tinta sube desde abajo (::before, solo transform) y al apretar se estampa. */
.boton {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  font-family: var(--f-gothic);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  /* El texto cambia de color de golpe, cuando la tinta ya tapó (o destapó) la mitad */
  transition: transform .18s var(--ease-out), color 0s linear .16s;
}
.boton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .32s var(--ease-out);
}
.boton--accion { background: var(--bermellon-hondo); color: var(--color-washi); }
.boton--accion::before { background: var(--bermellon-noche); }
.boton--accion::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border: 1px solid rgba(241, 233, 216, .55);
  pointer-events: none;
}
.boton--tinta { background: transparent; color: var(--color-sumi); box-shadow: inset 0 0 0 1.5px var(--color-sumi); }
.boton--tinta::before { background: var(--color-sumi); }
.boton--grande { min-height: 60px; padding: 0 32px; font-size: 1.2rem; }
@media (max-width: 560px) { .boton--grande { padding: 0 18px; font-size: 1.0625rem; } }
.boton--mini { min-height: 38px; padding: 0 16px; font-size: .875rem; }
.boton--mini::after { inset: 2px; }
.boton .ico { transition: transform .25s var(--ease-out); }
.boton:active { transform: translateY(1px) scale(.985); }
@media (hover: hover) {
  .boton:hover::before { transform: scaleY(1); }
  .boton--tinta:hover { color: var(--color-washi); transition: transform .18s var(--ease-out), color 0s linear .07s; }
  .boton:hover .ico { transform: translateY(-1px) rotate(-8deg); }
}

.enlace {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--color-vermillion);
  transition: text-decoration-thickness .15s ease-out;
}
.enlace:hover { text-decoration-thickness: 2px; }
.enlace .ico { width: 1.1em; height: 1.1em; }
@media (pointer: coarse) { .enlace { min-height: 44px; } }

.led {
  font-family: var(--f-led);
  font-size: .8125rem;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--tinta-2);
}

/* ---------- Barra superior ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
  padding: 10px var(--margen);
  background: var(--color-washi);
  border-bottom: 1px solid var(--filete);
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  text-decoration: none;
}
.lockup__texto { display: grid; line-height: 1; }
.lockup__kusak { font-family: var(--f-mincho); font-weight: 700; font-size: 1.3rem; letter-spacing: .16em; }
.lockup__estudio {
  margin-top: 5px;
  color: var(--tinta-2);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
}

/* La navegación es un índice: enlaces quietos en tinta 2 y, junto a la sección en
   la que estás, el sellito bermellón de la opción elegida del formulario. Al pasar
   el mouse el sellito asoma en sumi, más chico, como un sello a punto de bajar. */
.barra__nav ul { display: flex; gap: clamp(24px, 2.6vw, 38px); margin: 0; padding: 0; list-style: none; }
.barra__nav ul a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinta-2);
  font-size: .95rem;
  text-decoration: none;
  transition: color .2s ease-out;
}
.barra__nav ul a::before {
  content: "";
  position: absolute;
  left: -15px;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  background: var(--color-vermillion);
  transform: rotate(-4deg) scale(0);
  transition: transform .24s var(--ease-out);
}
.barra__nav ul a[aria-current] { color: var(--color-sumi); }
.barra__nav ul a[aria-current]::before { transform: rotate(-4deg) scale(1); }
@media (hover: hover) {
  .barra__nav ul a:hover { color: var(--color-sumi); }
  .barra__nav ul a:not([aria-current]):hover::before { background: var(--color-sumi); transform: rotate(-4deg) scale(.6); }
}
/* El botón grande de WhatsApp vive solo en la hoja del celular */
.barra__nav .barra__hoja-wa { display: none; }

.barra__wa {
  order: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 0;
  background: var(--bermellon-hondo);
  color: var(--color-washi);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: background-color .2s ease-out;
}
.barra__wa:hover { background: var(--bermellon-noche); }

.barra__menu {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--color-sumi);
  color: var(--color-sumi);
  font: 700 .95rem var(--f-gothic);
  cursor: pointer;
}
.barra__menu:active { transform: translateY(1px) scale(.985); }
.barra__menu .ico--cerrar { display: none; }
.barra.menu-abierto .ico--menu { display: none; }
.barra.menu-abierto .ico--cerrar { display: block; }
/* Abierto, el botón queda entintado */
.barra.menu-abierto .barra__menu { background: var(--color-sumi); color: var(--color-washi); }

@media (max-width: 900px) {
  .barra { flex-wrap: wrap; gap: 10px; }
  .barra__menu { display: inline-flex; }
  .barra__wa { padding: 0 12px; }
  .barra__wa span:not(.sr-only) { display: none; }

  /* En el celular el índice es una hoja de washi que ocupa la pantalla debajo de la
     barra: las secciones grandes en mincho y, al pie, el botón de WhatsApp. Cuelga
     de la barra (top 100 %) y mide lo que queda de pantalla, así sigue el alto real
     de la barra aunque crezca. */
  .barra__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - 100%);
    display: none;
    flex-direction: column;
    padding: 8px var(--margen) calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-washi);
  }
  .barra.menu-abierto .barra__nav { display: flex; }
  .barra__nav ul { flex-direction: column; gap: 0; }
  .barra__nav li + li { border-top: 1px solid var(--filete); }
  .barra__nav ul a {
    display: flex;
    gap: 16px;
    min-height: 76px;
    color: var(--color-sumi);
    font: 700 2rem/1.15 var(--f-mincho);
  }
  .barra__nav ul a::before { position: static; order: 1; flex: none; width: 10px; height: 10px; }
  .barra__nav .barra__hoja-wa { display: inline-flex; margin-top: auto; }

  .sin-js .barra__nav { position: static; display: flex; order: 4; flex-basis: 100%; padding: 0 0 12px; overflow: visible; }
  .sin-js .barra__nav .barra__hoja-wa { margin-top: 12px; }
  .sin-js .barra__menu { display: none; }
}
@media (max-width: 380px) {
  .lockup__estudio { display: none; }
  /* La firma se achica para que "tu negocio." no se parta */
  .inicio .inicio__titular { grid-template-columns: minmax(0, 1fr) 60px; gap: 6px; }
}

/* ---------- Inicio ---------- */

.inicio {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: center;
  min-height: max(560px, min(100svh - 68px, 860px));
  padding-bottom: clamp(36px, 4vw, 56px);
}

/* Pixel art: se dibuja chico y se agranda sin suavizar */
.guirnalda,
.petalos { image-rendering: pixelated; image-rendering: crisp-edges; }

.guirnalda { display: block; width: 100%; height: 72px; }
.inicio .guirnalda { grid-column: 1 / -1; position: relative; z-index: 1; }
.petalos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.inicio__texto { position: relative; z-index: 1; }

.inicio h1 {
  max-width: 15ch;
  text-wrap: balance;
  font-size: clamp(2.8rem, 1.5rem + 4.6vw, 6rem);
  line-height: 1.04;
  letter-spacing: -.015em;
}
.inicio__bajada {
  max-width: 40ch;
  margin: clamp(24px, 3vw, 36px) 0 clamp(32px, 4vw, 44px);
  color: var(--tinta-2);
  font-size: 1.1875rem;
  line-height: 1.65;
}


@media (max-width: 760px) {
  .inicio { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; }
  .guirnalda { height: 56px; }
  .inicio .boton { width: 100%; }
}

/* ---------- Trabajos ---------- */

.obra {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding: clamp(40px, 5vw, 64px) 0;
  border-top: 1px solid var(--filete);
}
.obra:first-of-type { border-top: 0; padding-top: 0; }

.obra__ficha { display: grid; gap: 10px; justify-items: start; }
.obra__ficha h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.12; }
.obra__rubro {
  color: var(--tinta-2);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.obra__ficha > p:not(.obra__rubro):not(.led) { margin-top: 8px; color: var(--tinta-2); }
.obra__ficha .enlace { margin-top: 8px; }

.captura { margin: 0; }
.captura figcaption { margin-top: 10px; color: var(--tinta-2); font-size: .85rem; }
.captura__ventana {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--papel-campo);
  box-shadow: 0 0 0 1px var(--filete), 0 24px 48px -32px rgba(21, 25, 35, .45);
}
.captura--escritorio .captura__ventana { aspect-ratio: 16 / 10; }
.captura--celular .captura__ventana {
  aspect-ratio: 9 / 19.5;
  border: 5px solid var(--color-sumi);
  border-radius: 20px;
}
.captura__ventana img { display: block; width: 100%; height: auto; }
/* El sitio entero pasa por la ventana mientras bajás, animado por el propio scroll */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .captura__ventana { container-type: size; view-timeline: --ventana block; }
    .captura__ventana img {
      animation: recorrer ease-in-out both;
      animation-timeline: --ventana;
      animation-range: cover 12% cover 88%;
    }
  }
}
@keyframes recorrer { to { transform: translateY(calc(-100% + 100cqh)); } }

.libre {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--filete);
}
/* Una ventana vacía esperando el próximo sitio */
.libre__hueco {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border: 2px dashed var(--borde-campo);
  border-radius: 4px;
  background-image: radial-gradient(rgba(21, 25, 35, .07) 1px, transparent 1.4px);
  background-size: 12px 12px;
  transition: border-color .3s ease-out;
}
.libre__barra {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30px;
  border-bottom: 2px dashed var(--borde-campo);
  background:
    radial-gradient(circle, var(--borde-campo) 3px, transparent 3.5px) 14px 50% / 10px 10px no-repeat,
    radial-gradient(circle, var(--borde-campo) 3px, transparent 3.5px) 30px 50% / 10px 10px no-repeat,
    radial-gradient(circle, var(--borde-campo) 3px, transparent 3.5px) 46px 50% / 10px 10px no-repeat;
}
.libre__texto-hueco {
  color: var(--tinta-2);
  font-family: var(--f-mincho);
  font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
}
.libre:hover .libre__hueco { border-color: var(--color-vermillion); }
.libre__texto h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.15; }
.libre__texto p { margin: 14px 0 26px; color: var(--tinta-2); }

@media (max-width: 760px) {
  .libre { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .obra { grid-template-columns: minmax(0, 1fr) minmax(0, .5fr); }
  .obra__ficha { grid-column: 1 / -1; }
  .captura--escritorio { grid-column: 1; }
}
@media (max-width: 560px) {
  .obra { grid-template-columns: minmax(0, 1fr); }
  .captura--celular { justify-self: start; width: 56%; }
}

/* ---------- Servicios ---------- */

.servicios__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.servicio { padding: 0 clamp(16px, 2vw, 28px); border-left: 1px solid var(--filete); }
.servicio:first-child { padding-left: 0; border-left: 0; }
.servicio:last-child { padding-right: 0; }

.mon { width: 48px; height: 48px; margin-bottom: 22px; fill: var(--color-sumi); }
.mon__aro { fill: none; stroke: var(--color-sumi); stroke-width: 3.5; }
.mon__hueco { fill: var(--color-washi); }

.servicio h3 { font-size: 1.5rem; line-height: 1.15; }
.servicio p { margin-top: 12px; color: var(--tinta-2); font-size: 1rem; line-height: 1.65; }
.servicio strong { color: var(--color-sumi); }
.servicio__acciones { display: flex; flex-wrap: wrap; gap: 10px 18px; }

.servicios__nose {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: clamp(48px, 6vw, 80px);
  color: var(--tinta-2);
}

@media (max-width: 1000px) {
  .servicios__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .servicio:nth-child(odd) { padding-left: 0; border-left: 0; }
  .servicio:nth-child(even) { padding-right: 0; }
}
@media (max-width: 560px) {
  .servicios__lista { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .servicio,
  .servicio:nth-child(even) { padding: 32px 0; border-left: 0; border-top: 1px solid var(--filete); }
  .servicio:first-child { padding-top: 0; border-top: 0; }
}

/* ---------- Cómo trabajo ---------- */

.pasos__lista {
  /* Una escalera de cuatro escalones: cada paso sube un poco más, hasta publicar */
  --escalon: clamp(36px, 4.5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pasos__lista li {
  position: relative;
  padding: 22px clamp(16px, 2vw, 28px) 0;
  border-top: 3px solid var(--color-sumi);
}
.pasos__lista li:nth-child(1) { margin-top: calc(var(--escalon) * 3); padding-left: 0; }
.pasos__lista li:nth-child(2) { margin-top: calc(var(--escalon) * 2); }
.pasos__lista li:nth-child(3) { margin-top: var(--escalon); }
.pasos__lista li:nth-child(4) { padding-right: 0; }
/* La contrahuella: une cada escalón con el anterior */
.pasos__lista li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  height: calc(var(--escalon) + 3px);
  border-left: 3px solid var(--color-sumi);
}
.pasos__num {
  display: block;
  margin-bottom: 18px;
  color: var(--color-vermillion);
  font-family: var(--f-mincho);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
}
.pasos__lista h3 { font-size: 1.35rem; line-height: 1.2; }
.pasos__lista p { margin-top: 8px; color: var(--tinta-2); font-size: 1rem; }

/* En pantallas chicas la escalera se vuelve una línea que baja, con los numerales sobre ella */
@media (max-width: 900px) {
  .pasos__lista { position: relative; grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pasos__lista li,
  .pasos__lista li:nth-child(n) { margin: 0; padding: 0 0 0 72px; border: 0; }
  /* Cada paso baja su tramo de línea hasta el numeral siguiente; el último (publicar) no,
     así la línea termina en él. Los numerales tapan la línea con su fondo washi. */
  .pasos__lista li + li::before { display: none; }
  .pasos__lista li:not(:last-child)::before {
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    bottom: -50px;
    left: 21px;
    height: auto;
    border-left: 3px solid var(--color-sumi);
  }
  .pasos__num {
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    margin: 0;
    padding: 6px 0;
    background: var(--color-washi);
    font-size: 2.2rem;
    text-align: center;
  }
}

/* ---------- Presupuesto ---------- */

.presupuesto__mesa {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.hoja__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.campo { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.campo label,
.campo legend { display: block; margin-bottom: 8px; padding: 0; font-weight: 700; font-size: .95rem; }
.campo > label span { color: var(--tinta-2); font-weight: 400; }

/* La hoja: un papel apoyado sobre la mesa, al lado del teléfono. Se escribe en
   renglones, no en cajas; el renglón activo se marca con la tinta del sello. */
.hoja {
  padding: clamp(24px, 4vw, 44px);
  background: var(--papel-campo);
  box-shadow: 0 0 0 1px var(--filete), 0 24px 48px -32px rgba(21, 25, 35, .45);
}
.hoja .campo > label,
.hoja .campo > legend {
  margin-bottom: 4px;
  color: var(--tinta-2);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hoja .campo > legend { margin-bottom: 12px; }
.hoja .campo > label span { letter-spacing: .08em; text-transform: none; }
.hoja input[type="text"],
.hoja textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 8px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-sumi);
  font: 1.0625rem/28px var(--f-gothic);
  box-shadow: inset 0 -1.5px 0 var(--borde-campo);
  caret-color: var(--color-vermillion);
}
/* El área de texto es papel de carta: un renglón por línea, que acompaña al scroll */
.hoja textarea {
  /* Renglones de 28 px exactos (en píxeles enteros, sin astillas de redondeo) */
  min-height: calc(4 * 28px + 8px);
  padding: 0 2px 8px;
  resize: vertical;
  background: linear-gradient(transparent 27px, rgba(141, 133, 116, .4) 27px) 0 0 / 100% 28px local;
}
.hoja input::placeholder,
.hoja textarea::placeholder { color: #6f6a60; }
.hoja input[type="text"]:hover,
.hoja textarea:hover { box-shadow: inset 0 -1.5px 0 var(--color-sumi); }
.hoja input[type="text"]:focus,
.hoja textarea:focus { outline: none; box-shadow: inset 0 -3px 0 var(--color-vermillion); }

.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcion span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-size: .95rem;
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--borde-campo);
}
.opcion:hover span { box-shadow: inset 0 0 0 1.5px var(--color-sumi); }
.opcion input:checked + span { background: var(--color-sumi); color: var(--color-washi); box-shadow: none; }
/* La elegida lleva un sellito bermellón */
.opcion input:checked + span::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 10px;
  background: var(--color-vermillion);
  transform: rotate(-4deg);
}
.opcion input:focus-visible + span { outline: 3px solid var(--color-edo-indigo); outline-offset: 3px; }

.hoja .boton { width: 100%; margin-top: 12px; }
.hoja__nota { margin-top: 14px; color: var(--tinta-2); font-size: .9rem; }
.hoja__estado { margin-top: 8px; font-size: .95rem; }
.hoja__estado:empty { display: none; }


@media (max-width: 900px) {
  .presupuesto__mesa { grid-template-columns: minmax(0, 1fr); }
  .chat { position: static; }
}
@media (max-width: 560px) {
  .hoja__fila { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Cierre: noche de matsuri ---------- */

.cierre {
  --foco: #f4b6c2;
  position: relative;
  overflow: hidden;
  padding: 0 0 var(--aire);
  background: var(--color-sumi);
  color: var(--color-washi);
  text-align: center;
}
.cierre .guirnalda {
  position: relative;
  margin-bottom: clamp(56px, 7vw, 96px);
}
/* La luz de los faroles cae suave sobre el título */
.cierre::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 380px;
  background: radial-gradient(ellipse 65% 100% at 50% 0, rgba(240, 99, 74, .15), transparent 72%);
  pointer-events: none;
}
.cierre__texto { position: relative; width: min(820px, 100% - 2 * var(--margen)); margin: 0 auto; }
.cierre h2 { max-width: 14ch; margin: 0 auto 22px; font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5rem); line-height: 1.06; }
.cierre__texto > p { color: var(--papel-2); font-size: 1.15rem; }
.cierre .boton { margin-top: 34px; }
.cierre__numero { margin-top: 18px; }
.cierre__numero a { color: var(--color-washi); font-weight: 700; text-underline-offset: 5px; text-decoration-color: #f4b6c2; }

/* ---------- Pie ---------- */

.pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 32px;
  padding: 28px var(--margen) 36px;
  border-top: 1px solid rgba(241, 233, 216, .1);
  background: var(--color-sumi);
  color: var(--papel-2);
  font-size: .95rem;
}
.pie__marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-washi);
  font-family: var(--f-mincho);
  font-weight: 700;
  letter-spacing: .12em;
}

/* ---------- Detalles: sombra de pixel, pétalos y emblemas ---------- */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .servicio:hover .mon { transform: rotate(-14deg) scale(1.06); }
  .obra:hover .captura__ventana { box-shadow: 0 0 0 1px var(--filete), 6px 6px 0 rgba(21, 25, 35, .12); }
}

.mon { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.captura__ventana { transition: box-shadow .2s steps(2); }

/* Un pétalo junto a cada título de sección */
.cabeza h2::after {
  content: "";
  display: inline-block;
  width: .36em;
  height: .36em;
  margin-left: .22em;
  vertical-align: .6em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath fill='%23f4b6c2' d='M1 0h2v1h1v2h-1v1h-2v-1h-1v-2h1z'/%3E%3Cpath fill='%23e48aa0' d='M3 1h1v2h-1zM1 3h2v1h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  image-rendering: pixelated;
}

/* ---------- Capitán, rama, sol y el chat de WhatsApp ---------- */

.rama,
.guia canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

/* Inicio */
.rama { position: absolute; top: 92px; right: 0; width: 288px; height: auto; pointer-events: none; }
.subrayado { position: relative; white-space: nowrap; }
.subrayado::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .02em;
  height: .08em;
  background: repeating-linear-gradient(90deg, var(--color-vermillion) 0 .16em, transparent .16em .24em);
}
/* El sello grande: la marca estampada en el papel, con la tinta gastada (una máscara de
   grano deja huecos donde el sello no cargó tinta) y apoyada sobre el papel (multiply).
   Entra una vez, como un sello que baja y se asienta. Su rotación de -2° viene en el SVG. */
/* La tinta gastada vale para los dos: el sello grande de escritorio y la firma del celular */
.sello-grande,
.sello-firma {
  height: auto;
  pointer-events: none;
  mix-blend-mode: multiply;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -5 3.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -5 3.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px;
  animation: sello-estampa .7s var(--ease-out) .3s both;
}
.sello-grande {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 0;
  width: min(26vw, 372px);
  translate: 0 -38%;
}
/* En escritorio el titular va solo; la firma es del celular */
.sello-firma { display: none; }
@keyframes sello-estampa { from { opacity: 0; transform: scale(1.12); } 55% { opacity: 1; } }
.rama { z-index: 1; }
/* Lo que sobresale se recorta en el borde de la pantalla, sin crear scroll lateral */
main { overflow-x: clip; }
@media (max-width: 760px) {
  .rama { display: none; }
  /* En celular el sello firma el titular: va en su propia columna, abajo a la derecha,
     junto a la última línea. El titular se acomoda en el ancho que le queda. */
  .sello-grande { display: none; }
  .inicio__titular {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(72px, 13vw, 100px);
    align-items: end;
    gap: 10px;
  }
  .sello-firma { display: block; width: 100%; margin-bottom: .08em; }
  .inicio .boton { width: 100%; }
}

/* Capitán acompañante: la única aparición del perro en la página. Se queda sentado
   en la esquina de abajo a la derecha (los textos van alineados a la izquierda, así no
   tapa enlaces) mirando hacia la página; la primera vez llega caminando desde el borde.
   Su globo solo se abre cuando lo tocás. */
.guia {
  position: fixed;
  right: 16px;
  bottom: 12px;
  z-index: 40;
  --perro: 96px; /* la tira de cuadros es de 48 px: se agranda al doble, en escala entera */
  pointer-events: none;
  animation: guia-entra .3s steps(4);
}
.guia[hidden] { display: none; }
@keyframes guia-entra { from { opacity: 0; transform: translateY(24px); } }
.guia__andar { position: relative; width: var(--perro); }
.guia--llega { animation: none; }
.guia--llega .guia__andar { animation: guia-llega 800ms linear both; }
@keyframes guia-llega { from { transform: translateX(calc(var(--perro) + 16px)); } }
.guia__perro {
  display: block;
  width: var(--perro);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .15s steps(2);
}
.guia__perro canvas { display: block; width: 100%; height: auto; transform: scaleX(-1); }
/* Al hablar da dos saltitos */
.guia--habla .guia__perro { animation: guia-salta 360ms steps(2) 2; }
@keyframes guia-salta { 50% { translate: 0 -6px; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .guia__perro:hover { transform: translateY(-4px); }
}
.guia__globo {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: max-content;
  max-width: min(300px, calc(100vw - 38px));
  margin: 3px;
  padding: 12px 14px;
  background: var(--papel-campo);
  box-shadow: 0 -3px 0 0 var(--color-sumi), 0 3px 0 0 var(--color-sumi), -3px 0 0 0 var(--color-sumi), 3px 0 0 0 var(--color-sumi), 7px 7px 0 0 rgba(21, 25, 35, .16);
  pointer-events: auto;
  /* Crece desde la cola del globo, que apunta al perro */
  transform-origin: calc(100% - var(--perro) / 2) 100%;
  transition: opacity 180ms var(--ease-out), transform 180ms steps(3), display 180ms allow-discrete;
}
.guia__globo[hidden] {
  display: none;
  opacity: 0;
  transform: scale(.94) translateY(6px);
  transition-duration: 140ms;
}
@starting-style {
  .guia__globo:not([hidden]) { opacity: 0; transform: scale(.94) translateY(6px); }
}
.guia__globo::after {
  content: "";
  position: absolute;
  right: calc(var(--perro) / 2 - 6px);
  bottom: -9px;
  width: 12px;
  height: 9px;
  background: var(--papel-campo);
  box-shadow: -3px 0 0 var(--color-sumi), 3px 0 0 var(--color-sumi), 0 3px 0 var(--color-sumi);
}
.guia__texto { margin: 0 0 12px; font-size: .9375rem; line-height: 1.45; }
.guia__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.guia__chau {
  min-height: 36px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--tinta-2);
  font: inherit;
  font-size: .8125rem;
  text-decoration: underline;
  cursor: pointer;
}
/* En celular, a su tamaño real (48 px): tapa lo mínimo */
@media (max-width: 560px) { .guia { right: 10px; bottom: 10px; --perro: 48px; } }
/* Mientras escribís en la hoja, se corre */
body:has(.hoja :is(input, textarea):focus) .guia { display: none; }

/* ---------- Pequeños movimientos con propósito ---------- */


/* Al enviar el presupuesto: la burbuja sube, los tildes se ponen celestes y Capitán salta */
.chat__ticks { color: var(--wa-tilde-gris); transition: color 200ms var(--ease-out); }
.chat--enviado .chat__ticks { color: var(--wa-tilde); }
.chat--enviado .chat__burbuja { animation: burbuja-envia 240ms var(--ease-out); }
@keyframes burbuja-envia { from { opacity: .6; transform: translateY(6px); } }
.hoja__estado:not(:empty) { animation: aparece 160ms var(--ease-out); }
@keyframes aparece { from { opacity: 0; } }

/* La escalera de Cómo trabajo se arma escalón por escalón al entrar en pantalla */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pasos__lista { view-timeline: --escalera block; }
    .pasos__lista li {
      animation: escalon var(--ease-out) both;
      animation-timeline: --escalera;
      animation-range: cover 4% cover 18%;
    }
    .pasos__lista li:nth-child(2) { animation-range: cover 8% cover 22%; }
    .pasos__lista li:nth-child(3) { animation-range: cover 12% cover 26%; }
    .pasos__lista li:nth-child(4) { animation-range: cover 16% cover 30%; }
  }
}
@keyframes escalon { from { opacity: 0; transform: translateY(12px); } }

/* El menú del celular se despliega desde la barra */
@media (max-width: 900px) {
  .con-js .barra__nav { transition: opacity 200ms var(--ease-out), clip-path 200ms var(--ease-out), display 200ms allow-discrete; }
  .con-js .barra:not(.menu-abierto) .barra__nav { opacity: 0; clip-path: inset(0 0 100% 0); transition-duration: 150ms; }
  @starting-style {
    .con-js .barra.menu-abierto .barra__nav { opacity: 0; clip-path: inset(0 0 100% 0); }
  }
}

/* Las opciones del formulario responden al toque */
.opcion:active span { transform: scale(.97); transition: transform 120ms var(--ease-out); }


/* El chat de WhatsApp del presupuesto, con marco de pixel */
.chat { position: sticky; top: 100px; }
.chat h3 { margin-bottom: 18px; font-size: 1.3rem; }
.chat__marco { position: relative; margin: 0 6px; }
.chat__tel {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--wa-fondo);
  border-radius: 4px;
  box-shadow: 0 0 0 1.5px var(--color-sumi), 0 24px 48px -32px rgba(21, 25, 35, .45);
}
.chat__cab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--wa-verde);
  color: #fff;
}
.chat__cab .sello { width: 34px; background-image: url("marca/sello-claro.svg"); }
.chat__nombre { display: flex; flex-direction: column; margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.25; }
.chat__estado { font-size: .75rem; font-weight: 400; }
.chat__cuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  min-height: 200px;
  padding: 16px 16px 24px;
  /* Fondo de pétalos de pixel, en lugar de los garabatos de WhatsApp */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges' fill='%23e3d8c4'%3E%3Cpath d='M3 1h2v1h1v2H5v1H3V4H2V2h1zM11 9h2v1h1v2h-1v1h-2v-1h-1v-2h1z'/%3E%3C/svg%3E");
  background-size: 72px 72px;
}
.chat__dia {
  align-self: center;
  margin: 0;
  padding: 3px 10px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(11, 20, 26, .13);
  color: var(--wa-gris);
  font-size: .75rem;
}
.chat__burbuja {
  position: relative;
  display: flow-root;
  max-width: 90%;
  margin: 0 8px 0 0;
  padding: 7px 9px 6px 11px;
  border-radius: 8px 0 8px 8px;
  background: var(--wa-burbuja);
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
  color: #111b21;
  font-size: .9375rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat__burbuja::after {
  content: "";
  position: absolute;
  top: 0;
  right: -8px;
  border-left: 8px solid var(--wa-burbuja);
  border-bottom: 8px solid transparent;
}
.chat__hora {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 8px 0 -2px 12px;
  color: var(--wa-gris);
  font-size: .6875rem;
  line-height: 1;
  white-space: nowrap;
}
.chat__ticks { width: 16px; height: 8px; }
.chat__barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--wa-barra);
  color: var(--wa-gris);
  font-size: .875rem;
}
.chat__barra span:first-child { flex: 1; padding: 8px 14px; border-radius: 20px; background: #fff; }
.chat__enviar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--wa-envio); }
.chat__enviar::after {
  content: "";
  display: block;
  margin: 10px 0 0 13px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff;
}
.chat__para { margin-top: 22px; color: var(--tinta-2); font-size: .9rem; }

/* ---------- Página 404 ---------- */

.perdido {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100svh;
  padding: 0 var(--margen) 48px;
}
.perdido .guirnalda { margin: 0 calc(-1 * var(--margen)); width: calc(100% + 2 * var(--margen)); }
.perdido__texto { align-self: center; max-width: 34rem; }
.perdido h1 { margin: 40px 0 18px; font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 1.05; }
.perdido__texto > p { margin: 0 0 32px; color: var(--tinta-2); font-size: 1.125rem; }
.perdido__perro { justify-self: end; align-self: end; width: 80px; height: auto; image-rendering: pixelated; }
@media (min-width: 900px) {
  .perdido { grid-template-columns: minmax(0, 1fr) auto; }
  .perdido .guirnalda { grid-column: 1 / -1; }
  .perdido__perro { width: 120px; }
}

/* ---------- Página de privacidad ---------- */

.legal { max-width: 42rem; margin: 0 auto; padding: 40px var(--margen) var(--aire); }
.legal h1 { margin: 48px 0 8px; font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 1.05; }
.legal h2 { margin: 40px 0 10px; font-size: 1.35rem; }
.legal p { margin: 0 0 14px; }
.legal__fecha { color: var(--tinta-2); font-size: .95rem; }
.legal__volver { margin-top: 48px; }

/* ---------- Movimiento reducido: todo quieto y encendido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Sin recorrido automático, las capturas se desplazan a mano */
  .captura__ventana { overflow-y: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}