/* Plantilla 'ebanista' (Woodworker) del sitio de un negocio
   (sitio/negocio_sitio_ebanista.html), para talleres de ebanisteria y
   mobiliario a medida.

   Rehecha el 2026-09-15 a peticion del dueno: la version anterior compartia el
   armazon de la portada comercial de DeMark (ceja con raya, titular, parrafo,
   boton + enlace, foto a la derecha, proceso en fichas numeradas, bandas de
   cierre). Esta hoja parte de los premiados mas recientes del sector en
   awwwards: Bla Station (mencion 02-07-2026: la pieza a toda la anchura con su
   nombre encima, codigos de modelo, ritmo editorial, blanco y negro, sans) y
   Floema (SOTD 13-05-2026: foto a sangre en la primera pantalla con UNA frase,
   colecciones numeradas en vertical con imagen a toda la anchura, proceso en
   tres columnas de texto). Composicion propia, no copia:

   - La fotografia manda: la portada ES la foto (a sangre, primera pantalla
     tambien en movil) y el titular monumental y fino va sobre ella o justo
     debajo; una sola accion, en texto.
   - Cabecera silenciosa: marca, menu y telefono en texto pequeno; ningun boton
     de color. En movil el menu es un panel que se abre con :target (sin JS)
     y la unica accion es la barra fija de abajo.
   - El sitio se lee como un catalogo: cada seccion lleva su indice ("01",
     "02"...) y un rotulo corto; los proyectos van primero, a toda la anchura,
     con su codigo (TA-01), nombre y ficha en una fila de pie de foto.
   - Nada de tarjetas, bandas de color, iconos ni botones grandes: filetes de
     una linea, mucho aire, tabulares para cifras. El acento solo en el indice
     y en los subrayados. El pie es claro, en columnas, con la direccion
     grande; sin banda oscura de cierre.

   Hoja independiente, todo con prefijo eb-. Colores solo desde las variables
   --d-* de la paleta; la unica excepcion son los tonos de las cuatro muestras
   de madera (tokens --eb-madera de .eb-madera-<clave>), que no llevan texto.
   Sobre --d-acento el texto es siempre var(--d-acento-sobre). Sin degradados
   ni sombras; familias desde sitio-fuentes.css (los titulares usan la familia
   de titulos elegida en el editor, en su peso mas fino). Movimiento solo con
   CSS y solo si se puede y se quiere.

   Regla de oro del ancho: nada ensancha el documento (sin 100vw; lo que va a
   sangre sale del contenedor, no de la ventana). */

:where(.eb), :where(.eb) *, :where(.eb) *::before, :where(.eb) *::after { box-sizing: border-box; }

html:has(body.eb) { scroll-padding-top: 72px; scroll-behavior: smooth; }

.eb {
  --eb-margen: clamp(20px, 4vw, 72px);
  --eb-ancho: 1600px;
  --eb-filete: color-mix(in srgb, var(--d-tinta) 18%, transparent);
  --eb-filete-suave: color-mix(in srgb, var(--d-tinta) 9%, transparent);
  --eb-velo: color-mix(in srgb, var(--d-fondo) 88%, transparent);
  --eb-cab-alto: 64px;
  margin: 0;
  font-family: var(--f-texto, Inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--d-tinta);
  background: var(--d-fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .eb { --eb-filete: var(--d-gris); --eb-filete-suave: var(--d-acento-claro); --eb-velo: var(--d-fondo); }
}

:where(.eb) img { max-width: 100%; height: auto; }
:where(.eb) a { color: inherit; text-decoration: none; }
/* Los titulares: la familia de titulos del editor en su peso mas fino, muy
   grandes, interlineado apretado. Nunca se parten dentro de una palabra. */
:where(.eb) :is(h1, h2, h3) {
  font-family: var(--f-titulos, Inter), Georgia, serif;
  font-weight: 300; line-height: 1; letter-spacing: -.03em; margin: 0 0 .5em;
  text-wrap: balance;
}
.eb :is(h1, h2, h3) { overflow-wrap: normal; word-break: normal; hyphens: manual; }
:where(.eb) h1 { font-size: clamp(48px, 9vw, 136px); line-height: .95; }
:where(.eb) h2 { font-size: clamp(36px, 5.2vw, 88px); line-height: .98; }
:where(.eb) h3 { font-size: clamp(22px, 2vw, 30px); line-height: 1.1; }
:where(.eb) p { margin: 0 0 1em; overflow-wrap: break-word; }
.eb :focus-visible { outline: 2px solid var(--d-acento); outline-offset: 3px; }
.eb-main { overflow-x: clip; }

.eb-contenedor { width: min(var(--eb-ancho), calc(100% - 2 * var(--eb-margen))); margin-inline: auto; }
.eb-seccion { padding: clamp(56px, 9vw, 144px) 0; }

/* El indice de cada seccion: numero tabular + rotulo corto, como el sumario de
   un catalogo. Es el unico sitio (con los subrayados) donde vive el acento. */
.eb-indice {
  display: flex; align-items: baseline; gap: 16px; margin: 0 0 clamp(28px, 4vw, 56px);
  padding-top: 14px; border-top: 1px solid var(--d-tinta);
  font-size: 16px; letter-spacing: .04em; color: var(--d-tinta);
}
.eb-indice-num { font-variant-numeric: tabular-nums; color: var(--d-acento); }
.eb-indice-rotulo { min-width: 0; }
.eb-indice-enlace { margin-left: auto; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--eb-filete); min-height: 44px; display: inline-flex; align-items: center; }
.eb-indice-enlace:hover { text-decoration-color: var(--d-acento); }
/* El titulo de una seccion: una frase fina bajo el indice, nunca un bloque de marketing. */
.eb .eb-seccion-titulo { font-size: clamp(30px, 3.6vw, 60px); line-height: 1.02; letter-spacing: -.03em; max-width: 18ch; margin: 0 0 clamp(32px, 4vw, 64px); }
.eb-intro { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.45; color: var(--d-tinta); max-width: 40ch; }
.eb-lectura { max-width: 60ch; line-height: 1.65; color: var(--d-gris); }
.eb-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 32px; margin: 32px 0 0; }
.eb-oculto, .eb-saltar, .eb-trampa {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.eb-saltar:focus {
  width: auto; height: auto; clip-path: none; z-index: 60; left: 12px; top: 12px;
  padding: 10px 16px; background: var(--d-fondo); color: var(--d-tinta); border: 1px solid var(--d-tinta);
}

/* Las acciones son texto: subrayado fino y una flecha. El unico boton lleno es
   el de enviar el formulario (y la barra fija de abajo en movil). */
.eb-enlace {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--d-tinta); font-weight: 500; letter-spacing: .01em;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em;
  text-decoration-color: var(--d-tinta); transition: text-decoration-color .25s;
}
.eb-enlace:hover { text-decoration-color: var(--d-acento); }
.eb-enlace::after { content: "\2192"; transition: translate .35s cubic-bezier(.2, .7, .2, 1); }
.eb-enlace:hover::after { translate: 4px 0; }
.eb-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 12px 28px;
  border: 1px solid var(--d-tinta); border-radius: 0;
  background: var(--d-tinta); color: var(--d-fondo);
  font: inherit; font-size: 17px; font-weight: 500; letter-spacing: .01em; line-height: 1.2; text-align: center;
  cursor: pointer; transition: background-color .25s, color .25s;
}
.eb-boton:hover { background: var(--d-fondo); color: var(--d-tinta); }
.eb-boton-linea { background: transparent; color: var(--d-tinta); }
.eb-boton-linea:hover { background: var(--d-tinta); color: var(--d-fondo); }

/* --- bandas de arriba ---------------------------------------------------- */
.eb-previa {
  background: var(--d-superficie); color: var(--d-tinta); border-bottom: 1px solid var(--eb-filete);
  font-size: 16px; padding: 9px 20px; display: flex; gap: 6px 16px; flex-wrap: wrap;
  align-items: center; justify-content: center; text-align: center;
}
.eb-previa a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
/* El aviso de temporada: una linea discreta, en texto pequeno, sin banda de color. */
.eb-anuncio {
  margin: 0; padding: 8px var(--eb-margen); border-bottom: 1px solid var(--eb-filete-suave);
  font-size: 16px; line-height: 1.4; color: var(--d-gris); text-align: center;
}

/* --- cabecera silenciosa ------------------------------------------------- */
.eb-cab { position: relative; z-index: 20; background: var(--d-fondo); }
.eb-cab-fila {
  display: flex; align-items: center; gap: 16px; min-height: var(--eb-cab-alto);
  font-size: 16px; letter-spacing: .02em;
}
.eb-marca {
  min-width: 0; display: flex; align-items: center; min-height: 44px; margin-right: auto;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 16px; line-height: 1.1;
}
.eb-marca span { display: block; overflow-wrap: normal; }
.eb-logo { display: block; height: 32px; width: auto; max-width: 140px; object-fit: contain; }
.eb-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--d-tinta); transition: color .25s;
}
.eb-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px;
  background: var(--d-tinta); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.eb-nav a:hover::after, .eb-nav a[aria-current="page"]::after { transform: scaleX(1); }
.eb-nav .eb-idioma { letter-spacing: .12em; }
.eb-cab-tel { display: inline-flex; align-items: center; min-height: 44px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eb-cab-encargo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; white-space: nowrap; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: var(--d-acento); }
.eb-cab-encargo::after { content: "\2192"; }
.eb-menu-abrir, .eb-menu-cerrar { display: none; }
@media (max-width: 899.98px) {
  /* Menu en panel, sin JS: "Menu" apunta a #menu y :target lo abre a pantalla completa;
     "Close" vuelve arriba. Todos los destinos, el idioma y el telefono en filas de 56 px. */
  .eb-cab-tel, .eb-cab-encargo { display: none; }
  .eb-menu-abrir {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: flex-end;
    letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  }
  .eb-nav {
    position: fixed; inset: 0; z-index: 40; display: none; flex-direction: column;
    padding: calc(var(--eb-cab-alto) + 16px) var(--eb-margen) calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--d-fondo); overflow-y: auto;
  }
  .eb-nav:target { display: flex; }
  .eb-nav a { min-height: 56px; border-bottom: 1px solid var(--eb-filete-suave); font-size: clamp(24px, 6vw, 32px); font-weight: 300; letter-spacing: -.01em; }
  .eb-nav a::after { display: none; }
  .eb-nav .eb-idioma { font-size: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-bottom: 0; margin-top: 8px; }
  .eb-nav .eb-menu-cerrar {
    display: inline-flex; position: absolute; top: 0; right: var(--eb-margen); min-height: var(--eb-cab-alto);
    font-size: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-bottom: 0;
  }
  .eb-nav .eb-menu-tel { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
}
@media (min-width: 900px) {
  .eb-cab { position: sticky; top: 0; border-bottom: 1px solid var(--eb-filete-suave); }
  .eb-nav { display: flex; align-items: center; gap: 0 clamp(18px, 2vw, 36px); min-width: 0; white-space: nowrap; }
  .eb-nav .eb-menu-tel, .eb-nav .eb-menu-cerrar { display: none; }
  .eb-cab-tel { margin-left: clamp(16px, 2vw, 40px); }
  .eb-cab-encargo { margin-left: clamp(16px, 2vw, 40px); }
}
@media (min-width: 900px) and (max-width: 1179.98px) {
  .eb-cab-tel { display: none; }
}

/* --- barra fija de abajo en movil: la unica accion ----------------------- */
.eb-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; gap: 10px; align-items: center;
  padding: 10px var(--eb-margen) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--d-fondo); border-top: 1px solid var(--eb-filete);
}
.eb-barra-tel {
  flex: 0 0 auto; min-height: 48px; padding: 0 20px; display: flex; align-items: center;
  border: 1px solid var(--d-tinta); color: var(--d-tinta); font-weight: 500;
}
.eb-barra-accion {
  flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: center;
  background: var(--d-tinta); color: var(--d-fondo); font-weight: 500; text-align: center; line-height: 1.2;
}
.eb { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
html:has(body.eb) { scroll-padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) {
  .eb-barra { display: none; }
  .eb { padding-bottom: 0; }
  html:has(body.eb) { scroll-padding-bottom: 0; }
}

/* --- portada: la foto ES la portada ------------------------------------- */
/* La foto a sangre ocupa la primera pantalla (tambien en movil); debajo, el
   titular monumental y fino, una frase y una accion en texto. */
.eb-portada { position: relative; display: flex; flex-direction: column; }
.eb-portada-foto { position: relative; min-width: 0; overflow: hidden; background: var(--d-superficie); }
.eb .eb-portada-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 78svh; object-fit: cover; }
.eb-portada-texto {
  position: relative; z-index: 1; min-width: 0;
  padding: clamp(24px, 4vw, 56px) var(--eb-margen) clamp(24px, 4vw, 48px);
}
.eb .eb-lema {
  font-size: clamp(52px, 10.5vw, 140px); line-height: .95; letter-spacing: -.04em; font-weight: 300;
  max-width: 12ch; margin: 0 0 clamp(20px, 3vw, 40px);
}
.eb .eb-lema-medio { font-size: clamp(48px, 8.2vw, 124px); max-width: 15ch; }
.eb .eb-lema-largo { font-size: clamp(44px, 6.4vw, 100px); max-width: 19ch; letter-spacing: -.03em; }
.eb-portada-pie { display: grid; gap: 20px 48px; grid-template-columns: minmax(0, 1fr); align-items: end; }
.eb-portada-pie .eb-intro { margin: 0; }
.eb-portada-pie .eb-acciones { margin: 0; }
.eb-portada-lugar { margin: 0; font-size: 16px; letter-spacing: .04em; color: var(--d-gris); font-variant-numeric: tabular-nums; }
/* Sin foto: el titular enorme sobre el fondo y el canto de un tablero en bandas de la paleta. */
.eb-tabla { display: flex; flex-direction: column; height: 40px; border-top: 1px solid var(--eb-filete); }
.eb-tabla span { flex: 3 1 0; background: var(--d-calido); }
.eb-tabla span:nth-child(2n) { flex-grow: 5; background: var(--d-superficie); }
.eb-tabla span:nth-child(3n) { flex-grow: 2; background: var(--d-acento-claro); }
.eb-tabla span:nth-child(4) { flex-grow: 1; background: var(--d-acento); color: var(--d-acento-sobre); }
.eb-portada:not(.eb-portada-con-foto) { flex-direction: column-reverse; }
@media (min-width: 900px) {
  .eb .eb-portada-img { aspect-ratio: 16 / 9; max-height: calc(100svh - var(--eb-cab-alto)); min-height: 520px; }
  .eb-portada-texto { padding: clamp(40px, 4vw, 64px) var(--eb-margen) clamp(48px, 5vw, 88px); }
  .eb-portada-pie { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .eb-portada-pie .eb-acciones { justify-content: flex-end; }
  /* Con foto, en escritorio la primera pantalla es la pieza entera y el titular entra
     SOBRE ella, abajo, en una placa translucida del fondo (AA garantizado): el nombre
     de la pieza sobre su foto, como en un catalogo. */
  .eb-portada-con-foto .eb-portada-img { max-height: none; height: calc(100svh - var(--eb-cab-alto)); aspect-ratio: auto; }
  .eb-portada-con-foto .eb-portada-texto {
    position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(28px, 3vw, 48px) var(--eb-margen);
    background: var(--eb-velo);
  }
  .eb-portada-con-foto .eb-lema { margin-bottom: clamp(16px, 2vw, 28px); }
  .eb .eb-portada-imagen_derecha .eb-lema { font-size: clamp(52px, 10.5vw, 140px); }
  .eb .eb-portada-imagen_derecha .eb-lema-medio { font-size: clamp(48px, 8.2vw, 124px); }
  .eb .eb-portada-imagen_derecha .eb-lema-largo { font-size: clamp(44px, 6.4vw, 100px); }
  .eb-portada:not(.eb-portada-con-foto) .eb-portada-texto { padding-top: clamp(64px, 9vw, 144px); }
  .eb-portada:not(.eb-portada-con-foto) .eb-tabla { height: 56px; }
}

/* --- 01 proyectos: fotos a toda la anchura con su codigo y su ficha ------ */
/* Cada caso es una foto grande y, debajo, una fila de pie de foto: codigo
   (TA-01), nombre y los datos de la ficha en tabulares. Los casos alternan
   anchura: entero, dos tercios a la derecha, entero, dos tercios a la
   izquierda, como las paginas de un catalogo. */
.eb-casos { display: grid; gap: clamp(48px, 7vw, 120px); }
.eb-caso { display: grid; gap: 16px; min-width: 0; }
.eb-caso-foto { display: block; min-width: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--d-superficie); }
.eb .eb-caso-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s ease; }
.eb-caso-foto:hover img { scale: 1.02; }
.eb-caso-ficha { min-width: 0; display: grid; gap: 6px 24px; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; }
.eb .eb-caso-num {
  margin: 0; font-size: 16px; font-weight: 500; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--d-acento);
}
.eb .eb-caso-titulo { font-size: clamp(22px, 2.2vw, 34px); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: -.01em; }
.eb-ficha { list-style: none; margin: 0; padding: 0; grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 24px; color: var(--d-gris); font-size: 16px; }
.eb-ficha li { display: inline-flex; gap: 8px; min-width: 0; }
.eb-ficha-etq { letter-spacing: .06em; text-transform: uppercase; }
.eb-ficha-etq::after { content: ":"; }
.eb-ficha-dato { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .eb-caso-foto { aspect-ratio: 16 / 9; }
  .eb-caso-par { width: 66%; }
  .eb-caso-par:nth-child(4n + 2) { margin-left: auto; }
  .eb-caso-par .eb-caso-foto { aspect-ratio: 4 / 3; }
}

/* --- 02 el taller: la ultima foto y el relato en grande ------------------ */
.eb-taller-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.eb-taller-foto { display: block; min-width: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--d-superficie); }
.eb .eb-taller-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s ease; }
.eb-taller-foto:hover img { scale: 1.02; }
.eb-taller-texto { min-width: 0; }
.eb-cita {
  font-family: var(--f-titulos, Inter), Georgia, serif; font-weight: 300;
  font-size: clamp(28px, 3.4vw, 56px); line-height: 1.05; letter-spacing: -.025em;
  max-width: 22ch; margin: 0 0 clamp(24px, 3vw, 40px); text-wrap: pretty;
}
.eb-taller-texto .eb-enlace { margin-top: 8px; }
@media (min-width: 900px) {
  .eb-taller-con-foto .eb-taller-rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 112px); align-items: end; }
  .eb-taller-con-foto .eb-taller-foto { aspect-ratio: 4 / 5; }
}

/* --- 03 what we build: lista tipografica con la foto grande al senalar --- */
.eb-obras { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--eb-filete); }
.eb-obra { border-bottom: 1px solid var(--eb-filete); padding: clamp(20px, 2.4vw, 32px) 0; min-width: 0; }
.eb-obra-texto {
  display: grid; gap: 4px 20px; align-items: baseline; min-width: 0;
  grid-template-columns: 3.2em minmax(0, 1fr); grid-template-areas: "num nombre" ". precio" ". desc" ". accion";
}
.eb-obra-num { grid-area: num; font-size: 16px; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--d-acento); }
.eb .eb-obra-nombre {
  grid-area: nombre; margin: 0; font-size: clamp(28px, 3.4vw, 56px); font-weight: 300; line-height: 1; letter-spacing: -.025em;
  transition: translate .45s cubic-bezier(.2, .7, .2, 1), color .3s;
}
.eb-obra-precio { grid-area: precio; margin: 6px 0 0; font-size: 16px; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--d-gris); }
.eb-obra-desc { grid-area: desc; margin: 8px 0 0; color: var(--d-gris); max-width: 52ch; }
.eb-obra-accion { grid-area: accion; margin: 6px 0 0; }
.eb-obra-foto { margin: 0 0 20px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--d-superficie); }
.eb .eb-obra-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eb-obra:hover .eb-obra-nombre, .eb-obra:focus-within .eb-obra-nombre { color: var(--d-acento); }
@media (min-width: 900px) {
  .eb-obras-con-foto { position: relative; padding-right: calc(40% + clamp(40px, 5vw, 96px)); min-height: 600px; }
  .eb-obras-con-foto .eb-obra-foto {
    position: absolute; top: 0; right: 0; bottom: 0; width: 40%; margin: 0; aspect-ratio: auto;
    overflow: clip; opacity: 0; pointer-events: none; background: transparent;
    transition: opacity .5s ease, clip-path .7s cubic-bezier(.2, .7, .2, 1);
    clip-path: inset(6% 0 6% 0);
  }
  .eb .eb-obras-con-foto .eb-obra-foto img { position: sticky; top: calc(var(--eb-cab-alto) + 24px); height: min(76svh, 100%); min-height: 520px; }
  .eb-obras-con-foto .eb-obra-con-foto:not(.eb-obra-con-foto ~ .eb-obra-con-foto) .eb-obra-foto { opacity: 1; clip-path: inset(0); }
  .eb-obras-con-foto:has(.eb-obra-con-foto:hover, .eb-obra-con-foto:focus-within) .eb-obra-foto { opacity: 0; clip-path: inset(6% 0 6% 0); }
  .eb-obras-con-foto .eb-obra-con-foto:is(:hover, :focus-within) .eb-obra-foto { opacity: 1; clip-path: inset(0); }
  .eb-obra:hover .eb-obra-nombre, .eb-obra:focus-within .eb-obra-nombre { translate: 12px 0; }
  .eb-obra-texto { grid-template-columns: 3.2em minmax(0, 1fr) auto; grid-template-areas: "num nombre precio" ". desc desc" ". accion accion"; }
  .eb-obra-precio { margin: 0; text-align: right; white-space: nowrap; }
  .eb-obras-con-foto .eb-obra-texto { grid-template-columns: 3.2em minmax(0, 1fr); grid-template-areas: "num nombre" ". precio" ". desc" ". accion"; }
  .eb-obras-con-foto .eb-obra-precio { margin: 6px 0 0; text-align: left; }
}
@media (min-width: 900px) and (max-width: 1279.98px) {
  .eb-obras-con-foto { padding-right: calc(36% + 40px); }
  .eb-obras-con-foto .eb-obra-foto { width: 36%; }
}

/* --- 04 el proceso: columnas de texto, sin fichas ni circulos ------------ */
.eb-linea { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.eb-linea::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--d-acento); color: var(--d-acento-sobre); transform-origin: left; }
.eb-paso { position: relative; min-width: 0; padding-top: 20px; }
.eb-paso-num { display: block; margin-bottom: 10px; font-size: 16px; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--d-acento); }
.eb-paso h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 400; margin: 0 0 .4em; max-width: 14ch; }
.eb-paso p { color: var(--d-gris); max-width: 32ch; margin: 0; }
.eb-visita {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px;
  margin-top: clamp(40px, 5vw, 72px); padding-top: 24px; border-top: 1px solid var(--eb-filete);
}
.eb-visita-lista { list-style: none; margin: 0; padding: 0; min-width: 0; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; }
.eb-visita-accion { margin: 0; }
@media (min-width: 900px) {
  .eb-linea { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); }
  .eb-paso { padding-top: 28px; border-top: 1px solid var(--eb-filete-suave); }
  .eb-paso:first-child { border-top-color: transparent; }
}

/* --- maderas: la foto de cada una o su muestra ------------------------- */
.eb-maderas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px clamp(24px, 3vw, 48px); grid-template-columns: minmax(0, 1fr); }
.eb-madera { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 20px; align-items: start; min-width: 0; }
.eb-madera-foto, .eb-madera-muestra { grid-row: span 2; display: block; aspect-ratio: 1; overflow: hidden; }
.eb .eb-madera-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eb-madera h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 400; margin: 0 0 .3em; }
.eb-madera p { margin: 0; color: var(--d-gris); max-width: 34ch; }
/* La muestra: el tono de la madera y sus anillos en la testa. Son colores de
   material (como una foto de la pieza), no de la paleta: unico hex fijo permitido. */
.eb-madera-maple { --eb-madera: #e8d2ab; }
.eb-madera-oak { --eb-madera: #c49a62; }
.eb-madera-birch { --eb-madera: #efdfbf; }
.eb-madera-pine { --eb-madera: #ddb277; }
.eb-madera-muestra { position: relative; background: var(--eb-madera); }
.eb-madera-muestra::before, .eb-madera-muestra::after, .eb-madera-muestra span {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--d-tinta) 16%, transparent);
}
.eb-madera-muestra::before { width: 150%; height: 120%; left: -58%; top: 34%; }
.eb-madera-muestra::after { width: 104%; height: 82%; left: -36%; top: 52%; }
.eb-madera-muestra span { display: block; width: 60%; height: 46%; left: -14%; top: 70%; }
@media (min-width: 560px) { .eb-maderas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .eb-maderas-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .eb-madera { grid-template-columns: minmax(0, 1fr); }
  .eb-madera-foto, .eb-madera-muestra { grid-row: auto; aspect-ratio: 3 / 4; margin-bottom: 20px; }
}

/* --- lo que el negocio promete: una lista con filetes, sin banda -------- */
.eb-garantia-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.eb-garantia h2 { max-width: 12ch; margin: 0; }
.eb-destacados { list-style: none; margin: 0; padding: 0; min-width: 0; counter-reset: eb-destacado; border-top: 1px solid var(--eb-filete); }
.eb-destacados li {
  counter-increment: eb-destacado; display: grid; grid-template-columns: 3.2em minmax(0, 1fr); align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--eb-filete); color: var(--d-tinta);
  font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3;
}
.eb-destacados li::before { content: counter(eb-destacado, decimal-leading-zero); font-size: 16px; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--d-acento); }
@media (min-width: 900px) {
  .eb-garantia-rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 112px); align-items: start; }
}

/* --- available now: piezas de la tienda en una fila que mueve quien mira */
.eb-piezas {
  list-style: none; margin: 0; padding: 0 var(--eb-margen) 12px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: clamp(16px, 2vw, 32px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--eb-margen);
  scrollbar-color: var(--d-gris) transparent;
}
.eb-pieza { min-width: 0; scroll-snap-align: start; }
.eb-pieza-enlace { display: grid; gap: 4px; }
.eb-pieza-foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--d-superficie); margin-bottom: 10px; }
.eb .eb-pieza-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s ease; }
.eb-pieza-enlace:hover img { scale: 1.02; }
.eb-pieza-vacia { display: block; height: 100%; }
.eb-pieza-nombre { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; }
.eb-pieza-precio { font-size: 16px; color: var(--d-gris); font-variant-numeric: tabular-nums; }
@media (min-width: 700px) { .eb-piezas { grid-auto-columns: clamp(260px, 26vw, 380px); } }

/* --- cabecera de las paginas interiores -------------------------------- */
.eb-cabecera { padding: clamp(40px, 7vw, 112px) 0 0; }
.eb .eb-cabecera h1 { font-size: clamp(48px, 9vw, 136px); line-height: .95; letter-spacing: -.04em; margin: 0; max-width: 15ch; }
.eb-cabecera .eb-intro { margin: 1.2em 0 0; }
.eb-cabecera-indice { margin: 0 0 clamp(20px, 3vw, 40px); font-size: 16px; letter-spacing: .04em; color: var(--d-gris); }
.eb-pag-servicios .eb-que, .eb-pag-trabajos .eb-proyectos, .eb-pag-sobre .eb-taller, .eb-pag-contacto .eb-contacto-seccion { padding-top: clamp(40px, 6vw, 96px); }
.eb-pag-trabajos .eb-proyectos .eb-acciones { margin-top: clamp(48px, 7vw, 112px); }
.eb-tienda { padding: clamp(40px, 6vw, 88px) 0; }

/* --- contacto: el encargo, el formulario primero ----------------------- */
.eb-contacto { display: grid; gap: clamp(48px, 6vw, 96px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .eb-contacto { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.eb-form { display: grid; gap: 24px; min-width: 0; }
.eb-form h2 { font-size: clamp(30px, 3.4vw, 52px); margin: 0 0 .2em; }
.eb-campo { display: grid; gap: 4px; min-width: 0; align-content: start; }
.eb-campo label { font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--d-gris); }
.eb-form input, .eb-form textarea {
  font: inherit; font-size: 18px; width: 100%; min-width: 0; min-height: 48px; padding: 10px 0; border-radius: 0;
  border: 0; border-bottom: 1px solid var(--d-gris); background: transparent; color: var(--d-tinta);
}
.eb-form textarea { resize: vertical; }
.eb-form input:focus, .eb-form textarea:focus { outline: 0; border-bottom: 2px solid var(--d-acento); padding-bottom: 9px; }
.eb-ayuda { font-size: 16px; color: var(--d-gris); }
.eb-fila-2 { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .eb-fila-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.eb-form .eb-acciones { margin: .4em 0 0; }
.eb-enviado { align-content: start; }
.eb-enviado p { color: var(--d-gris); max-width: 46ch; }
.eb-contacto-lado { min-width: 0; display: grid; gap: 0; align-content: start; }
.eb-cita-caja { padding: 20px 0; margin-bottom: 32px; border-top: 1px solid var(--d-tinta); border-bottom: 1px solid var(--eb-filete); }
.eb-cita-caja p:last-child { margin: 0; }
.eb-pasos-cortos { list-style: none; margin: 0 0 32px; padding: 0; counter-reset: eb-corto; }
.eb-pasos-cortos li {
  counter-increment: eb-corto; display: grid; grid-template-columns: 3.2em minmax(0, 1fr); padding: 10px 0;
  border-bottom: 1px solid var(--eb-filete-suave); font-size: 18px; line-height: 1.3;
}
.eb-pasos-cortos li::before { content: counter(eb-corto, decimal-leading-zero); font-size: 16px; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--d-acento); }
.eb-datos { display: grid; gap: 18px; margin: 0; align-content: start; min-width: 0; }
.eb-datos div { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--eb-filete); }
.eb-datos dt { font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--d-gris); }
.eb-datos dd { margin: 0; overflow-wrap: anywhere; }
.eb-datos a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- pie claro, en columnas, con la direccion y el encargo en grande ---- */
.eb-pie { border-top: 1px solid var(--d-tinta); }
.eb-pie-caja { display: flex; flex-direction: column; padding: clamp(40px, 5vw, 72px) 0 clamp(24px, 3vw, 40px); }
.eb-pie a { text-decoration: underline; text-decoration-color: var(--eb-filete); text-underline-offset: .3em; }
.eb-pie a:hover { text-decoration-color: var(--d-acento); }
.eb .eb-pie-ceja { font-size: 16px; letter-spacing: .04em; color: var(--d-gris); margin: 0 0 16px; }
.eb .eb-pie-titulo { font-size: clamp(36px, 6vw, 96px); font-weight: 300; line-height: .98; letter-spacing: -.035em; margin: 0 0 clamp(40px, 6vw, 88px); max-width: 14ch; }
.eb .eb-pie-titulo a { display: inline; text-decoration: none; }
.eb-pie-flecha { position: relative; left: 0; margin-left: .12em; color: var(--d-acento); transition: left .45s cubic-bezier(.2, .7, .2, 1); }
.eb-pie-titulo a:hover .eb-pie-flecha, .eb-pie-titulo a:focus-visible .eb-pie-flecha { left: .14em; }
.eb-pie-rejilla {
  display: grid; gap: 28px 40px; padding: clamp(28px, 4vw, 48px) 0;
  border-top: 1px solid var(--eb-filete);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.eb-pie-bloque { min-width: 0; }
.eb-pie-bloque p { margin: 0 0 .4em; overflow-wrap: anywhere; }
.eb .eb-pie-etiqueta { font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--d-gris); margin: 0 0 10px; }
.eb-pie-bloque .eb-pie-hoy { font-weight: 500; }
.eb-pie-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.eb-pie-lista a, .eb-pie .eb-mapa, .eb-pie-bloque a[href^="tel:"], .eb-pie-bloque a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.eb .eb-pie-nota {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin: 0; padding-top: 20px; border-top: 1px solid var(--eb-filete); font-size: 16px; color: var(--d-gris);
}

/* --- movimiento: solo CSS, solo si se puede y se quiere ---------------- */
/* Nada se esconde del todo: una captura o la impresion lo ven entero. */
@keyframes eb-destapa { from { clip-path: inset(6% 0 0 0); scale: 1.06; } to { clip-path: inset(0); scale: 1; } }
@keyframes eb-sube { from { translate: 0 32px; } to { translate: 0 0; } }
@keyframes eb-traza-x { from { scale: .08 1; } to { scale: 1 1; } }
@keyframes eb-aleja { from { scale: 1; } to { scale: 1.06; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .eb-revela { animation: eb-destapa linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .eb-entra { animation: eb-sube linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .eb-linea::before { animation: eb-traza-x linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
    .eb-portada-img { animation: eb-aleja linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .eb *, .eb *::before, .eb *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .eb { padding-bottom: 0; }
  .eb-barra, .eb-menu-abrir, .eb-menu-cerrar { display: none; }
  .eb-nav { position: static; display: flex; }
  .eb-revela, .eb-entra, .eb-portada-img { animation: none; translate: none; scale: none; clip-path: none; }
  .eb-cab { position: static; }
}

/* K: colores por seccion */
/* El boton de la barra fija y el de enviar: solo actuan si la seccion (--s-boton*)
   o <body> (--d-boton*) traen la variable; sin ella nada cambia. */
[data-seccion][style*="--s-boton:"] .eb-barra-accion[class]:not([data-sin-color]),
body[style*="--d-boton:"] .eb-barra-accion[class]:not([data-sin-color]) {
  background-color: var(--s-boton, var(--d-boton, var(--d-tinta)));
}
[data-seccion][style*="--s-boton-texto:"] .eb-barra-accion[class]:not([data-sin-color]),
body[style*="--d-boton-texto:"] .eb-barra-accion[class]:not([data-sin-color]) {
  color: var(--s-boton-texto, var(--d-boton-texto, var(--d-fondo)));
}