/* Variante minimalista del sitio "taller_a_medida" (theme.estilo = "minimal").
   ------------------------------------------------------------------
   «Un taller que se recorre»: cada sección es una pieza distinta (tablones que
   se abren, fotos que despiertan con un haz, piedras que se cambian como
   muestras, una línea que se dibuja, un texto que se enciende sobre negro) y
   todas hablan el mismo idioma: blanco, líneas de 1 px, una familia de letra en
   tres pesos (300, 400, 500) y el cobre solo donde se toca. La página empieza
   oscura (la escena), se abre en blanco y termina en un bloque negro continuo
   (legado, contacto y el pie con el logo de metal).

   Se carga DESPUÉS de taller.css, y todos sus selectores empiezan con
   html[data-estilo="minimal"] (especificidad 0,1,1), que le gana al `:root`
   del bloque de colores del cliente. No redefine --cobre ni --negro: la marca
   sigue llegando del `theme` del cliente.

   No lleva ningún dato de un cliente. Los FX leen sus valores de acá
   (--tilt-max, --polvo-alfa, --polvo-max) desde taller.js.

   Reglas que este archivo cumple (segunda vuelta, 2026-10-27):
   - Lo que nace oculto, desplazado, recortado o velado existe SOLO bajo
     `html.js-reveal` (y taller.js tiene una guarda de 2,5 s: si un observador
     falla, nada queda puesto). Sin JavaScript, todo se ve.
   - Con `prefers-reduced-motion: reduce` el movimiento es SUAVE, no quieto
     (2026-10-28): sin desplazamientos, imanes ni marquesina, pero con fundidos y
     cambios de luz. El bloque del final de este archivo lo define.
   - Se anima solo `transform`, `opacity` y `clip-path` (y el `flex` de los
     tablones, medido aparte). Ningún `filter` sobre fotos. Nada se fija.
   - Sin sombras, degradados decorativos ni cristal; la luz del haz y de la onda
     es lo único con degradado.

   Las referencias de 21st.dev (React + Tailwind) están traducidas a CSS plano
   con las variables del sitio. Cada bloque lleva arriba su origen (nombre,
   autor, enlace y «sin licencia declarada»). Los originales, sin tocar, están
   en el banco de comparación (banco-21st/src/componentes).

   Estructura: 1 variables · 2 letra · 3 barra · 4 llamados · 5 ticker ·
   6 secciones y números · 7 lo que hacemos · 8 trabajos · 9 la piedra ·
   10 pasos · 11 imagina · 12 bloque negro y legado · 13 contacto · 14 pie ·
   15 detalles y FX · 16 movimiento reducido (siempre al final). */

/* El ángulo que gira el anillo de «Crear imagen» (Chrome, Safari y Firefox recientes;
   donde no existe, el anillo queda quieto y se ve igual). */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ======================================================================
   1. Variables
   ====================================================================== */
html[data-estilo="minimal"]{
  --fondo:#FFFFFF; --campo:#F5F5F4; --blanco:#FFFFFF;
  --tinta:#1C1917; --tinta-2:#57534E; --cobre-texto:#9C4414;   /* neutros piedra: tinte mínimo, contraste ≥ 7:1 */
  --borde:#E7E5E4;          /* líneas de 1 px, decorativas */
  --borde-campo:#8A8580;    /* borde de los campos y de los círculos (3,7:1, pide ≥ 3) */
  --granito:#F5F5F4; --hueso:#FAFAF9; --hueso-2:#A8A29E;
  --panel:rgba(255,255,255,.94);   /* el panel plano sobre fotos: etiquetas y pies */
  /* El trazo detrás de las palabras (la piedra): el cobre del cliente al 18 %. */
  --cobre-suave:rgba(120,113,108,.18);
  --cobre-suave:color-mix(in srgb,var(--cobre) 18%,transparent);
  /* El negro REAL de la marca, congelado acá: se usa de respaldo oscuro. */
  --negro-pie:var(--negro);
  --f-titulo:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-texto:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:4px; --radius-foto:2px; --radio-llamado:22px 22px 22px 4px;
  --margen:24px; --sep:112px;
  --curva:cubic-bezier(.2,.7,.2,1);
  --tilt-max:1; --polvo-alfa:.14; --polvo-max:18;
}
@media (min-width:900px){html[data-estilo="minimal"]{--margen:64px;--sep:160px}}

/* Modo oscuro (solo con modo "sistema"). */
@media (prefers-color-scheme:dark){
  html[data-estilo="minimal"][data-modo="sistema"]{
    --fondo:#0C0A09; --campo:#1C1917; --blanco:#1C1917; --tinta:#F5F5F4; --tinta-2:#A8A29E;
    --cobre-texto:#D98B5A; --borde:#292524; --borde-campo:#78716C;
    --granito:#1C1917; --panel:rgba(28,25,23,.94);
  }
  /* Flecha del desplegable, clara sobre fondo oscuro */
  html[data-estilo="minimal"][data-modo="sistema"] .campo-fila select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F5F5F4' stroke-width='1.25'/%3E%3C/svg%3E")}
}

/* ======================================================================
   2. Letra: una sola familia, tres pesos
   ====================================================================== */
html[data-estilo="minimal"] body{font-weight:400;line-height:1.6}
html[data-estilo="minimal"] h1,
html[data-estilo="minimal"] h2,
html[data-estilo="minimal"] h3{font-weight:600}
html[data-estilo="minimal"] .escena-intro h1{font-weight:300;letter-spacing:-.03em;line-height:.98}
html[data-estilo="minimal"] h2{font-weight:300;font-size:clamp(2rem,1.5rem + 2.2vw,3.25rem);
  line-height:1.05;letter-spacing:-.03em}
html[data-estilo="minimal"] h3,
html[data-estilo="minimal"] .servicio-nombre{font-weight:400;
  font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);line-height:1.2;letter-spacing:-.01em}
html[data-estilo="minimal"] .frase-grande,
html[data-estilo="minimal"] .frase{font-weight:300;
  font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.45;letter-spacing:0}
/* Bajadas legibles: 400, ~55 caracteres por línea (em y no ch: 1ch es el ancho del «0») */
html[data-estilo="minimal"] .frase-grande{font-weight:400;color:var(--tinta-2);
  font-size:clamp(1.125rem,1rem + .4vw,1.3125rem);line-height:1.5;max-width:28em}
html[data-estilo="minimal"] .nota,
html[data-estilo="minimal"] figcaption{font-size:.875rem;line-height:1.45;font-weight:400}

/* El rol «Etiqueta»: 14 px (.875rem), 500, mayúsculas, tracking .08em. Es el mínimo de
   todo lo que se lee: números de sección, filtros, datos, nombres de las pestañas,
   rótulos de los puntos y «Cerrar». */
html[data-estilo="minimal"] .seccion-num,
html[data-estilo="minimal"] .filtros button,
html[data-estilo="minimal"] .datos dt,
html[data-estilo="minimal"] .visor-cerrar{font:500 .875rem/1 var(--f-texto);letter-spacing:.08em;
  text-transform:uppercase;font-variant-numeric:tabular-nums}
/* Teléfono: los cinco filtros no caben en una fila; en una grilla de tres, las dos filas se ven a propósito */
@media (max-width:600px){
  html[data-estilo="minimal"] #trabajos .filtros{display:grid;grid-template-columns:repeat(3,max-content);justify-content:start;gap:0 24px}   /* con id: va antes que la regla general de .filtros */
}

/* ======================================================================
   3. Barra
   Base: «Centered Nav Header» de olewandowski1,
   https://21st.dev/@olewandowski1/components/centered-nav-header
   (la ficha no declara licencia). Se toma el reparto en tres zonas y la hoja
   móvil que cubre la pantalla; no su botón negro, «Sign in» ni su letra.

   Segunda vuelta:
   - «Underlined Navigation Menu» de shadcnui-blocks,
     https://21st.dev/@shadcnui-blocks/components/navigation-menu-05
     (la ficha no declara licencia). Se toma solo el subrayado que pertenece
     al enlace activo y se mueve con él (`.nav-raya`); no los íconos.
   - «Magnetic Button» de mohammadshehadeh,
     https://21st.dev/@mohammadshehadeh/components/magnetic-button
     (MIT, según el encabezado del código). Se toma la atracción hacia el
     puntero y el respeto del movimiento reducido (taller.js pone --mx/--my);
     no el botón negro.
   ====================================================================== */
html[data-estilo="minimal"] .barra.solida{box-shadow:0 1px 0 var(--borde)}   /* una línea, no una sombra */
html[data-estilo="minimal"] .barra-in{padding-inline:max(var(--margen),calc((100% - 1280px) / 2 + var(--margen)))}
html[data-estilo="minimal"] .marca{min-height:44px}
html[data-estilo="minimal"] .marca-logo{height:36px}
html[data-estilo="minimal"] .marca-nombre{font-weight:500;font-size:1rem}
@media (max-width:520px){html[data-estilo="minimal"] .marca-logo{height:32px}}
html[data-estilo="minimal"] .nav-escritorio{position:relative}
html[data-estilo="minimal"] .nav-escritorio a{display:inline-flex;align-items:center;min-height:44px;   /* área tocable ≥ 44 px (medían 40) */
  font-weight:400;font-size:.9375rem;color:var(--tinta-2);
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;
  text-underline-offset:6px;transition:color .2s ease,text-decoration-color .2s ease}
html[data-estilo="minimal"] .nav-escritorio a:hover{color:var(--tinta);text-decoration-color:var(--tinta)}
/* La sección en la que estás (taller.js pone aria-current con el mismo observador de los puntos) */
html[data-estilo="minimal"] .nav-escritorio a[aria-current="true"]{color:var(--tinta);
  text-decoration-color:var(--cobre)}
/* .js-escena está en el MISMO <html> que data-estilo (no adentro): van juntos. */
html[data-estilo="minimal"].js-escena .barra:not(.solida) .nav-escritorio a{color:var(--hueso)}
/* La raya cobre que viaja: un solo trazo de 1 px. Sin JavaScript no existe (display:none) y
   cada enlace subraya al pasar el cursor, como antes. Con ella, el enlace activo ya no subraya
   por su cuenta: lo hace la raya. */
html[data-estilo="minimal"] .nav-raya{display:none}
html[data-estilo="minimal"].js-raya .nav-raya{display:block;position:absolute;left:0;bottom:10px;
  height:1px;width:var(--w,0px);background:var(--cobre);pointer-events:none;
  transform:translateX(var(--x,0px));
  transition:transform .3s var(--curva),width .3s var(--curva)}
html[data-estilo="minimal"].js-raya .nav-escritorio a[aria-current="true"],
html[data-estilo="minimal"].js-raya .nav-escritorio a[aria-current="true"]:hover{text-decoration-color:transparent}
/* El menú de computador, recién desde 1100 px: la marca, los cinco enlaces y el llamado necesitan
   1087 px en tres zonas parejas (medido el 2026-10-28 con la barra de scroll), y entre 1024 y 1099 el
   nombre se montaba sobre «Lo que hacemos» (un notebook chico, un iPad antiguo de lado). Hasta ahí
   va el «Menú» del teléfono, igual que en el iPad vertical. taller.js usa el mismo corte. */
@media (min-width:1024px) and (max-width:1099px){
  html[data-estilo="minimal"] .nav-escritorio{display:none}
  html[data-estilo="minimal"] .nav-movil{display:block}
}
@media (min-width:1100px){
  /* Tres zonas: marca · enlaces centrados · llamado */
  html[data-estilo="minimal"] .barra-in{display:grid;grid-template-columns:1fr auto 1fr;gap:32px}
  html[data-estilo="minimal"] .marca{margin-right:0;justify-self:start}
  html[data-estilo="minimal"] .nav-escritorio{gap:32px;justify-self:center}
  html[data-estilo="minimal"] .llamado{justify-self:end}
}

/* El menú del teléfono: «Menú» con un ícono de dos líneas que se cruzan en X, y una hoja
   que cubre la pantalla con una fila de 64 px por enlace. */
html[data-estilo="minimal"] .nav-movil summary{gap:8px;font:500 .9375rem/1 var(--f-texto)}
html[data-estilo="minimal"] .menu-icono{position:relative;display:inline-block;width:16px;height:16px;flex:none}
html[data-estilo="minimal"] .menu-icono::before,
html[data-estilo="minimal"] .menu-icono::after{content:"";position:absolute;left:0;right:0;height:1.5px;
  background:currentColor;transition:top .2s ease,rotate .2s ease}
html[data-estilo="minimal"] .menu-icono::before{top:4px}
html[data-estilo="minimal"] .menu-icono::after{top:10px}
html[data-estilo="minimal"] .nav-movil[open] .menu-icono::before{top:7px;rotate:45deg}
html[data-estilo="minimal"] .nav-movil[open] .menu-icono::after{top:7px;rotate:-45deg}
html[data-estilo="minimal"] .nav-lista{background:var(--fondo);padding:32px var(--margen) 24px;gap:0}
html[data-estilo="minimal"] .nav-lista a{display:flex;align-items:center;min-height:64px;padding:0;
  font:300 2rem/1 var(--f-titulo);letter-spacing:-.02em;color:var(--tinta);
  border-bottom:1px solid var(--borde)}
html[data-estilo="minimal"] .nav-lista a:last-child{border-bottom:0;margin-bottom:24px}
/* Con la hoja abierta, la página de atrás no se desplaza (taller.js) */
html[data-estilo="minimal"].menu-abierto{overflow:hidden}

/* ======================================================================
   4. Llamados: la misma burbuja, más fina
   ====================================================================== */
html[data-estilo="minimal"] .llamado{font:500 .9375rem/1 var(--f-texto);padding:0 20px;gap:8px;
  /* Magnética (≥ 1000 px con puntero fino): taller.js pone --mx y --my; vuelve en 350 ms. */
  transform:translate(var(--mx,0px),var(--my,0px));
  transition:background-color .2s ease,transform .35s var(--curva)}
html[data-estilo="minimal"] .llamado:hover,
html[data-estilo="minimal"] .llamado:active{background:var(--tinta);transform:translate(var(--mx,0px),var(--my,0px))}
html[data-estilo="minimal"] .llamado:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
/* El texto se mueve 2 px más que el fondo (paralaje mínimo): un tercio del desplazamiento, que llega a 6 px. */
html[data-estilo="minimal"] .llamado-texto{display:inline-block;
  translate:calc(var(--mx,0px) / 3) calc(var(--my,0px) / 3);transition:translate .35s var(--curva)}
html[data-estilo="minimal"] .enlace-llamado{font-weight:500;
  font-size:clamp(1.125rem,1rem + .5vw,1.375rem)}
html[data-estilo="minimal"] .enlace-llamado-texto{text-decoration-thickness:1px;
  text-decoration-color:var(--tinta-2)}
html[data-estilo="minimal"] .enlace-llamado:hover .enlace-llamado-texto{text-decoration-color:var(--cobre)}
html[data-estilo="minimal"] .enlace-llamado::after{background:transparent;
  border:1px solid currentColor;color:inherit}
html[data-estilo="minimal"] .enlace-llamado:hover::after{background:var(--cobre);
  border-color:var(--cobre);color:#fff}
html[data-estilo="minimal"] .campo-negro .enlace-llamado{color:var(--tinta)}
/* Sobre la escena (oscura) el enlace sigue en hueso. */
html[data-estilo="minimal"] .escena .enlace-llamado{color:var(--hueso)}
html[data-estilo="minimal"] .escena .enlace-llamado-texto{text-decoration-color:var(--hueso-2)}

/* ---- El botón «píldora + disco» (Enrique, 2026-10-28: «quiero este botón nuevo para los botones,
   con los colores del sitio») ----
   Base: el botón «Start a Project» de 21st.dev (React + Base UI + Tailwind, sin licencia declarada):
   se tradujeron su forma y su movimiento, no su código. El texto va en una píldora cobre y la flecha
   en un disco cobre aparte. Al pasar el cursor las dos piezas se invierten (fondo de tinta, letra del
   color del fondo: oscuro sobre blanco, claro sobre «noche») en 500 ms, y la flecha sale por la
   derecha mientras otra entra por la izquierda. Sin JavaScript y con movimiento reducido es el mismo
   botón, quieto. Reemplaza la burbuja y el enlace subrayado en TODOS los «Pide tu visita». */
html[data-estilo="minimal"] .llamado,
html[data-estilo="minimal"] .enlace-llamado{display:inline-flex;align-items:center;gap:0;padding:0;min-height:44px;
  background:none;border:0;border-radius:999px;text-decoration:none;white-space:nowrap;color:#fff}
html[data-estilo="minimal"] .llamado:hover,
html[data-estilo="minimal"] .llamado:active{background:none}
html[data-estilo="minimal"] .llamado::after,
html[data-estilo="minimal"] .enlace-llamado::after{content:none}
html[data-estilo="minimal"] .llamado-texto,
html[data-estilo="minimal"] .enlace-llamado-texto{display:inline-flex;align-items:center;min-height:44px;
  padding:0 1.35em;border-radius:999px;background:var(--cobre);color:#fff;text-decoration:none;
  font:500 1rem/1 var(--f-texto);letter-spacing:0;
  transition:background-color .5s var(--curva),color .5s var(--curva)}
html[data-estilo="minimal"] .llamado-texto{font-size:.9375rem}
html[data-estilo="minimal"] .disco{position:relative;display:inline-grid;place-items:center;flex:none;
  width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--cobre);color:#fff;
  transition:background-color .5s var(--curva),color .5s var(--curva)}
html[data-estilo="minimal"] .disco svg{position:absolute;width:40%;height:40%;
  transition:transform .5s var(--curva)}
html[data-estilo="minimal"] .disco svg:last-child{transform:translateX(-200%)}
html[data-estilo="minimal"] .llamado:hover :is(.llamado-texto,.disco),
html[data-estilo="minimal"] .enlace-llamado:hover :is(.enlace-llamado-texto,.disco){background:var(--tinta);color:var(--fondo)}
html[data-estilo="minimal"] :is(.llamado,.enlace-llamado):hover .disco svg:first-child{transform:translateX(200%)}
html[data-estilo="minimal"] :is(.llamado,.enlace-llamado):hover .disco svg:last-child{transform:none}
html[data-estilo="minimal"] :is(.llamado,.enlace-llamado):focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
/* El cierre: el mismo botón, grande. El disco sigue siendo magnético (taller.js pone --mx/--my en el enlace). */
html[data-estilo="minimal"] .cierre-llamado .enlace-llamado-texto{font-size:clamp(1.25rem,1rem + 1.2vw,2rem);
  font-weight:400;min-height:2.6em;padding:0 1.1em}
html[data-estilo="minimal"] .cierre-llamado .disco{font-size:clamp(1.25rem,1rem + 1.2vw,2rem);width:2.6em;height:2.6em;
  transform:translate(var(--mx,0px),var(--my,0px));
  transition:transform .35s var(--curva),background-color .5s var(--curva),color .5s var(--curva)}

/* Acciones secundarias (.enlace): 400 en tinta, subrayado de 1 px y «→» */
html[data-estilo="minimal"] .enlace{font-weight:400;text-decoration-thickness:1px}
html[data-estilo="minimal"] .enlace:not(.grande)::after{content:"→";content:"→" / "";margin-left:8px;
  transition:transform .2s ease}
html[data-estilo="minimal"] .enlace:not(.grande):hover::after{transform:translateX(3px)}

/* Transiciones a 0,2 s; con movimiento reducido el bloque del final las deja en none */
html[data-estilo="minimal"] .enlace-llamado::after,
html[data-estilo="minimal"] .enlace-llamado-texto{transition-duration:.2s}

/* ---- Brillo (Enrique, 2026-10-28: «interfaces con brillo») ----
   1. Un reflejo cruza la píldora de cada «Pide tu visita» cada 7 s. Base: el brillo que recorre
      el titular de la web de AURA OS. Es una capa propia detrás del texto (z-index −1 dentro de
      la píldora aislada) y solo se mueve con transform: el compositor, sin repintar. Con el
      cursor encima se apaga: la píldora ya se invierte. */
html[data-estilo="minimal"] :is(.llamado-texto,.enlace-llamado-texto){position:relative;overflow:hidden;isolation:isolate}
html[data-estilo="minimal"] :is(.llamado-texto,.enlace-llamado-texto)::before{content:"";position:absolute;inset:0;
  z-index:-1;pointer-events:none;transform:translateX(-110%);
  background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.34) 47%,rgba(255,255,255,.1) 55%,transparent 70%);
  animation:brillo-boton 7s cubic-bezier(.4,0,.2,1) infinite}
html[data-estilo="minimal"] :is(.llamado,.enlace-llamado):hover :is(.llamado-texto,.enlace-llamado-texto)::before{opacity:0}
@keyframes brillo-boton{0%,70%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
/* 2. Una luz que sigue al cursor sobre los tablones, las fotos y la caja de la piedra (computador):
      taller.js pone `.con-luz` y `--luz-x`/`--luz-y` en la tarjeta bajo el puntero. Base: las
      tarjetas de la web de AURA OS. En el teléfono no hay cursor: no se dibuja.
      :where() no suma especificidad: así cualquier regla propia de la tarjeta le gana (la ventana de
      la piedra es absolute en el computador y no puede volverse relative), y .con-luz enciende.
      El marco de «Imagina tu mueble» queda fuera: su ::after ya es el filete de noche. */
html[data-estilo="minimal"] :where(.servicios>li,.trabajo,.tilt:not(.imaginar-marco),.piedra-cuerpo){position:relative}
html[data-estilo="minimal"] :where(.servicios>li,.trabajo,.tilt:not(.imaginar-marco),.piedra-cuerpo)::after{content:"";position:absolute;
  inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(340px circle at var(--luz-x,50%) var(--luz-y,50%),
    color-mix(in srgb,var(--etiqueta,var(--cobre)) 18%,transparent),transparent 65%)}
html[data-estilo="minimal"] .con-luz::after{opacity:1}
/* 3. «Pausar movimiento» (botón del pie, WCAG 2.2.2): todo lo que se mueve solo se queda donde
      está. !important: tiene que ganarle también al bloque de movimiento reducido del final. */
html[data-estilo="minimal"].mov-pausado .ticker.corre .ticker-pista,
html[data-estilo="minimal"].mov-pausado .ticker.corre::before,
html[data-estilo="minimal"].mov-pausado .ticker.corre::after,
html[data-estilo="minimal"].mov-pausado :is(.llamado-texto,.enlace-llamado-texto)::before{animation-play-state:paused!important}

/* ======================================================================
   5. Ticker (FX 6)
   ====================================================================== */
/* Las dos líneas de la cinta son sombras interiores (no bordes): así el destello de abajo pasa
   justo encima de ellas. */
html[data-estilo="minimal"] .ticker{position:relative;border-block:0;
  box-shadow:inset 0 1px var(--borde),inset 0 -1px var(--borde)}
/* El destello de las líneas (Enrique, 2026-10-28: «que se muevan unas líneas horizontales» bajo
   la escena): una luz del color de las etiquetas, blanca en el centro, recorre la línea de arriba
   hacia la derecha y la de abajo hacia la izquierda, cada 9 s. Solo transform: lo mueve el
   compositor. Base: la línea de horizonte de la web de AURA OS. */
html[data-estilo="minimal"] .ticker.corre::before,
html[data-estilo="minimal"] .ticker.corre::after{content:"";position:absolute;left:0;z-index:1;width:32%;height:1px;
  pointer-events:none;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--etiqueta,var(--cobre)) 38%,var(--hueso) 50%,
    var(--etiqueta,var(--cobre)) 62%,transparent);
  animation:destello-linea 9s cubic-bezier(.45,0,.25,1) infinite}
html[data-estilo="minimal"] .ticker.corre::before{top:0}
html[data-estilo="minimal"] .ticker.corre::after{bottom:0;animation-direction:reverse;animation-delay:-4.5s}
/* De afuera por la izquierda (−100 % de su ancho) a afuera por la derecha (100 / 32 = 312,5 %). */
@keyframes destello-linea{0%{transform:translateX(-100%)}55%,100%{transform:translateX(313%)}}
html[data-estilo="minimal"] .ticker-pista li{font-weight:300;color:var(--tinta-2);
  font-size:clamp(1.125rem,1rem + .5vw,1.375rem)}
html[data-estilo="minimal"] .ticker.corre .ticker-pista{animation-duration:60s}

/* ======================================================================
   6. Secciones: columna única, línea de 1 px y número arriba del título
   Cada sección abre igual: línea → 24 px → número → 16 px → h2.
   ====================================================================== */
html[data-estilo="minimal"] .seccion{scroll-margin-top:calc(var(--alto-barra) + 24px)}
html[data-estilo="minimal"] .seccion>.cuerpo::before{
  content:"";display:block;grid-column:1 / -1;height:1px;background:var(--borde);margin-bottom:24px}
html[data-estilo="minimal"] .seccion-num{display:block;color:var(--tinta-2);margin:0 0 16px}
/* Las grillas ya no separan filas con su gap: lo hace el margen de la línea */
html[data-estilo="minimal"] .contacto-grid{display:block}

/* ======================================================================
   7. Lo que hacemos: seis tablones
   Base: «Hover Expand Gallery» de kedhareswer,
   https://21st.dev/@kedhareswer/components/hover-expand-gallery
   (la ficha no declara licencia). Se toman los paneles en fila separados por
   líneas finas, el nombre en vertical, el que se abre crece y muestra su
   imagen, y el paso a acordeón vertical en pantallas angostas. No se toma
   abrir con el cursor (acá se abre al tocar), el verde, los radios, su letra
   ni sus textos.

   Teléfono y tablet: la lista de filas de siempre, pero más grande
   («Editorial service list» de ibrandify,
   https://21st.dev/@ibrandify/components/editorial-service-list, sin licencia
   declarada): fila de 72 px con número, título y «+» en círculo de 44 px.
   El número de cada fila es un contador de CSS.
   ====================================================================== */
html[data-estilo="minimal"] .servicios{border-top:1px solid var(--borde);counter-reset:servicio}
html[data-estilo="minimal"] .servicios>li{border-bottom:1px solid var(--borde);counter-increment:servicio}
html[data-estilo="minimal"] .servicio-cabeza{display:grid;grid-template-columns:2.5rem 1fr 44px;
  align-items:center;gap:0;min-height:72px;padding:12px 0}
/* El número de cada fila es un contador de CSS (el segundo `content` lo calla para el lector de pantalla) */
html[data-estilo="minimal"] .servicio-cabeza::before{content:counter(servicio,decimal-leading-zero);
  content:counter(servicio,decimal-leading-zero) / "";
  font:500 .875rem/1 var(--f-texto);letter-spacing:.08em;font-variant-numeric:tabular-nums;
  color:var(--tinta-2);transition:color .2s ease}
html[data-estilo="minimal"] .servicio-nombre{font-size:1.25rem;font-weight:400}
html[data-estilo="minimal"] .servicio-cabeza:hover .servicio-nombre{color:var(--tinta)}
html[data-estilo="minimal"] .servicio-cabeza:hover::before,
html[data-estilo="minimal"] .servicio[open] .servicio-cabeza::before{color:var(--cobre-texto)}
html[data-estilo="minimal"] .servicio-cabeza:focus-visible{outline:2px solid var(--tinta);
  outline-offset:4px;border-radius:0}
html[data-estilo="minimal"] .servicio-signo{background:transparent;border:1px solid var(--borde-campo);
  transition:border-color .2s ease,background-color .2s ease}
html[data-estilo="minimal"] .servicio-cabeza:hover .servicio-signo{border-color:var(--tinta)}
html[data-estilo="minimal"] .servicio-signo::before,
html[data-estilo="minimal"] .servicio-signo::after{height:1px;transition:rotate .2s ease}
html[data-estilo="minimal"] .servicio[open] .servicio-signo{background:var(--tinta);border-color:var(--tinta)}
html[data-estilo="minimal"] .servicio[open] .servicio-signo::before,
html[data-estilo="minimal"] .servicio[open] .servicio-signo::after{background:var(--fondo)}
/* Abierto, el «+» se cruza en X (rotación de 45°) */
html[data-estilo="minimal"] .servicio[open] .servicio-signo::before{rotate:45deg}
html[data-estilo="minimal"] .servicio[open] .servicio-signo::after{rotate:-45deg}
/* El cuerpo entra sin animar la altura: los <details> no la animan bien, y el cambio seco es más sobrio */
html[data-estilo="minimal"] .servicio::details-content{transition:none}
/* Abierto en el teléfono: la foto 3:2 a todo el ancho, 16 px, el texto, 12 px y el enlace */
html[data-estilo="minimal"] .servicio-cuerpo{display:grid;grid-template-columns:1fr;gap:16px;padding:0 0 32px 2.5rem}
html[data-estilo="minimal"] .servicio-foto{aspect-ratio:3/2;max-width:720px;border-radius:var(--radius-foto)}
html[data-estilo="minimal"] .servicio-texto p{color:var(--tinta-2);margin:0 0 12px;max-width:34em}
@media (max-width:599px){
  html[data-estilo="minimal"] .servicio-cuerpo{padding-left:0}
}
@media (min-width:900px){
  /* Izquierda pegada (número, título y bajada); derecha, la lista */
  html[data-estilo="minimal"] .hacemos-grid{display:grid;grid-template-columns:5fr 7fr;
    column-gap:64px;row-gap:0;align-items:start}
  html[data-estilo="minimal"] .hacemos-cabeza{position:sticky;top:calc(var(--alto-barra) + 40px)}
  html[data-estilo="minimal"] .servicios{margin-top:0}
  html[data-estilo="minimal"] .servicio-cuerpo{padding-left:3rem}
  html[data-estilo="minimal"] .servicio-cabeza{grid-template-columns:3rem 1fr 44px}
}
@media (min-width:1000px){
  /* La cabeza ocupa todo el ancho de la columna y debajo corren los seis tablones. */
  html[data-estilo="minimal"] .hacemos-grid{display:block}
  html[data-estilo="minimal"] .hacemos-cabeza{position:static;margin-bottom:48px}

  html[data-estilo="minimal"] .servicios{--alto-tablones:clamp(440px,58vh,620px);
    display:flex;height:var(--alto-tablones);margin-top:0;
    border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);border-right:1px solid var(--borde)}
  /* Cerrados todos (estado inicial): seis tablones de igual ancho. */
  html[data-estilo="minimal"] .servicios>li{flex:1 1 0;min-width:0;position:relative;overflow:hidden;
    border-bottom:0;border-left:1px solid var(--borde);
    transition:flex-grow .45s var(--curva),flex-basis .45s var(--curva)}
  /* Uno abierto: los demás se achican a 80 px y el abierto toma el resto.
     (Sin :has() —navegadores de 2022 y anteriores— quedan todos iguales y el abierto
     no crece: se ve la franja y el cuerpo apretados, pero nada se rompe.) */
  html[data-estilo="minimal"] .servicios:has(details[open])>li:not(:has(details[open])){flex:0 0 80px}
  /* La aparición (.rv) también pone `transition`: sin repetirla acá, el flex no se animaría. */
  html[data-estilo="minimal"].js-reveal .servicios>li.rv{
    transition:opacity .5s var(--curva),transform .5s var(--curva),
      flex-grow .45s var(--curva),flex-basis .45s var(--curva)}

  html[data-estilo="minimal"] .servicio{position:relative;height:100%}
  /* El summary es el tablón entero cuando está cerrado, y una franja de 80 px cuando está abierto. */
  html[data-estilo="minimal"] .servicio-cabeza{position:absolute;top:0;bottom:0;left:0;width:100%;
    display:block;min-height:0;padding:0;background:var(--campo);transition:background-color .2s ease}
  html[data-estilo="minimal"] .servicio-cabeza:hover{background:var(--fondo)}
  html[data-estilo="minimal"] .servicio-cabeza:focus-visible{outline-offset:-2px}
  html[data-estilo="minimal"] .servicio[open]>.servicio-cabeza{width:80px;
    box-shadow:inset 2px 0 0 var(--cobre)}                 /* la línea de 2 px del borde izquierdo */
  html[data-estilo="minimal"] .servicio-cabeza::before{position:absolute;top:24px;left:24px}
  html[data-estilo="minimal"] .servicio-nombre{position:absolute;left:24px;bottom:24px;margin:0;
    max-height:calc(100% - 96px);writing-mode:vertical-rl;transform:rotate(180deg);
    font-size:1.5rem;font-weight:300;color:var(--tinta);line-height:1.15;
    white-space:normal;text-wrap:balance}   /* un nombre largo («Mesones de atención y muebles de oficina») se parte en dos líneas parejas en vez de salirse por arriba (lo vio Enrique en su iPad) */
  html[data-estilo="minimal"] .servicio-signo{display:none}

  /* El cuerpo del abierto: la foto a todo el panel y, abajo a la izquierda, el panel plano. */
  html[data-estilo="minimal"] .servicio::details-content{block-size:auto;overflow:visible}
  html[data-estilo="minimal"] .servicio-cuerpo{position:relative;display:block;height:var(--alto-tablones);
    margin-left:80px;padding:0;overflow:hidden;background:var(--campo)}
  html[data-estilo="minimal"] .servicio-foto{position:absolute;inset:0;max-width:none;aspect-ratio:auto;
    border-radius:0}
  html[data-estilo="minimal"] .servicio-texto{position:absolute;left:24px;bottom:24px;
    max-width:min(26em,calc(100% - 48px));max-height:calc(100% - 48px);overflow:auto;
    padding:20px 24px;background:var(--panel);border-radius:var(--radius-foto)}
  html[data-estilo="minimal"] .servicio-rotulo{display:block;margin:0 0 8px;
    font:400 1.5rem/1.2 var(--f-titulo);letter-spacing:-.01em;color:var(--tinta)}
  html[data-estilo="minimal"] .servicio-texto p{max-width:none}
  /* El panel entra con opacidad, 150 ms después, para que no se vea comprimido mientras el tablón crece. */
  html[data-estilo="minimal"].js-reveal .servicio[open] .servicio-texto{
    animation:servicio-entra .3s var(--curva) .15s backwards}
}
@keyframes servicio-entra{from{opacity:0}to{opacity:1}}

/* ======================================================================
   8. Trabajos: el caso, el contador con los filtros, la galería y el visor
   Base de los filtros (grupo de botones con uno activo) y del visor:
   «Gallery Grid with Lightbox» de moumensoliman,
   https://21st.dev/@moumensoliman/components/gallery-grid-block-shadcnui
   (la ficha no declara licencia). No se toma su fondo negro, los botones
   redondeados ni el tamaño uniforme.
   Base del caso (celdas separadas por líneas, no por sombras): «Bento Grid»
   (casestudy-5) de shadcnblockscom,
   https://21st.dev/@shadcnblockscom/components/casestudy-5
   (la ficha no declara licencia). Solo la idea; sin su puntillado ni tarjetas.

   Segunda vuelta:
   - Las fotos del caso se descubren con una máscara: «Mask Reveal» de balick,
     https://21st.dev/@balick/components/mask-reveal (la ficha no declara
     licencia). Se toma la máscara de recorte que se desliza y deja ver la
     imagen; no la placa negra, la monoespaciada ni los textos.
   - Las fotos de la galería despiertan con un haz de luz: «Lighthouse
     Spotlight Image Gallery» de dhxwhy,
     https://21st.dev/@dhxwhy/components/lighthouse-gallery (React y Tailwind,
     sin licencia declarada). Se toma el haz que recorre la cuadrícula y
     despierta cada foto según su posición; no el oscurecimiento permanente,
     el puntero como linterna, los radios grandes ni su letra.
   ====================================================================== */
html[data-estilo="minimal"] .caso{border-top:1px solid var(--borde);padding-top:32px;margin-top:48px}
html[data-estilo="minimal"] .caso-fotos{--tilt-max:0;gap:12px}             /* sin inclinación en el caso */
html[data-estilo="minimal"] .caso-fotos figure:first-child{aspect-ratio:3/2}
@media (min-width:900px){
  /* El texto del caso acompaña a sus fotos al bajar */
  html[data-estilo="minimal"] .caso{grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  html[data-estilo="minimal"] .caso-texto{position:sticky;top:calc(var(--alto-barra) + 40px)}
  html[data-estilo="minimal"] .caso-fotos{gap:24px}
}

/* La máscara del caso: cada foto nace recortada del todo (solo con `.js-reveal`) y se
   descubre de izquierda a derecha al entrar al 30 % de la pantalla (taller.js pone `.entro`
   en el .caso). Una línea de 2 px en cobre acompaña el borde de la máscara y se apaga al final. */
html[data-estilo="minimal"] .caso-fotos figure{container-type:inline-size}
html[data-estilo="minimal"].js-reveal .caso-fotos figure{clip-path:inset(0);
  transition:clip-path .7s var(--curva) var(--d,0s)}
html[data-estilo="minimal"].js-reveal .caso:not(.entro) .caso-fotos figure{clip-path:inset(0 100% 0 0)}
html[data-estilo="minimal"] .caso-fotos figure:nth-child(2){--d:.12s}
html[data-estilo="minimal"] .caso-fotos figure:nth-child(3){--d:.24s}
html[data-estilo="minimal"].js-reveal .caso-fotos figure::after{content:"";position:absolute;top:0;bottom:0;
  left:0;width:2px;background:var(--cobre);pointer-events:none;
  transform:translateX(calc(100cqw - 2px));opacity:0;
  transition:transform .7s var(--curva) var(--d,0s),opacity .15s linear calc(var(--d,0s) + .55s)}
html[data-estilo="minimal"].js-reveal .caso:not(.entro) .caso-fotos figure::after{
  transform:translateX(0);opacity:1;transition:none}

/* Contador y filtros en una sola fila, entre dos líneas */
html[data-estilo="minimal"] .trabajos-barra{display:flex;flex-direction:column;gap:8px;
  margin-top:64px;padding:16px 0;border-block:1px solid var(--borde)}
html[data-estilo="minimal"] .contador{margin:0;font:400 1rem/1.45 var(--f-texto);color:var(--tinta-2)}
html[data-estilo="minimal"] .contador .cnt{font-weight:500;color:var(--tinta)}
html[data-estilo="minimal"] .filtros{margin:0;padding:0;overflow:visible;flex-wrap:wrap;gap:0 16px}
html[data-estilo="minimal"] .filtros button{min-width:44px;padding:0 4px;color:var(--tinta-2);
  transition:color .2s ease}
html[data-estilo="minimal"] .filtros button:hover{color:var(--tinta)}
html[data-estilo="minimal"] .filtros button[aria-pressed="true"]{color:var(--tinta);
  box-shadow:inset 0 -1px 0 var(--cobre)}
html[data-estilo="minimal"] .filtros button:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
@media (min-width:900px){
  html[data-estilo="minimal"] .trabajos-barra{flex-direction:row;justify-content:space-between;
    align-items:center;gap:24px}
}

/* La galería: una columna sin visor; con visor, dos columnas de 4:5 y los pies se leen en el visor */
html[data-estilo="minimal"] .galeria{position:relative;grid-template-columns:1fr;gap:12px;margin-top:32px}
html[data-estilo="minimal"] .trabajo .marco{aspect-ratio:4/5}
html[data-estilo="minimal"] .trabajo figcaption a:hover{text-decoration-thickness:1px}
@media (max-width:899px){
  html[data-estilo="minimal"].js-visor .galeria{grid-template-columns:repeat(2,1fr)}
  html[data-estilo="minimal"].js-visor .galeria figcaption{display:none}
}
/* Con ritmo (≥ 900 px): doce columnas. Por cada 5 fotos visibles: 7 · 5 · 4 · 4 · 4.
   El :nth-child sirve cuando no hay filtro; al filtrar, taller.js reasigna .pos-1/2/3
   a las visibles y esas clases mandan (van después, con la misma especificidad). */
@media (min-width:900px){
  html[data-estilo="minimal"] .galeria{grid-template-columns:repeat(12,1fr);gap:32px 24px;align-items:start}
  html[data-estilo="minimal"] .trabajo{grid-column:span 4}
  html[data-estilo="minimal"] .trabajo:nth-child(5n+1){grid-column:span 7}
  html[data-estilo="minimal"] .trabajo:nth-child(5n+1) .marco{aspect-ratio:3/2}
  html[data-estilo="minimal"] .trabajo:nth-child(5n+2){grid-column:span 5}
  html[data-estilo="minimal"] .trabajo.pos-1{grid-column:span 7}
  html[data-estilo="minimal"] .trabajo.pos-1 .marco{aspect-ratio:3/2}
  html[data-estilo="minimal"] .trabajo.pos-2{grid-column:span 5}
  html[data-estilo="minimal"] .trabajo.pos-2 .marco{aspect-ratio:4/5}
  html[data-estilo="minimal"] .trabajo.pos-3{grid-column:span 4}
  html[data-estilo="minimal"] .trabajo.pos-3 .marco{aspect-ratio:4/5}
}
/* El visor solo existe con JavaScript: la foto es clicable solo entonces */
html[data-estilo="minimal"].js-visor .trabajo .marco{cursor:pointer}
html[data-estilo="minimal"] .trabajo .marco:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
@media (hover:hover){
  html[data-estilo="minimal"] .trabajo .marco img{transition:opacity .2s ease}
  html[data-estilo="minimal"] .trabajo .marco:hover img{opacity:.92}
}

/* El velo de las fotos dormidas. Existe SOLO mientras la galería lleva `.velada` (taller.js la
   pone bajo `.js-reveal` y la quita al terminar el haz, o a los 2,5 s si algo falla): un velo
   del color del fondo al 45 % —un velo y no un `filter`, que cuesta nada en el compositor.
   Cuando el centro del haz pasa por el centro de una foto, ésta pierde el velo en 300 ms;
   el orden lo da la posición (`--retardo`, en segundos), no el índice. */
html[data-estilo="minimal"] .trabajo .marco::after{content:"";position:absolute;inset:0;
  background:var(--fondo);opacity:0;pointer-events:none;
  transition:opacity .3s var(--curva) var(--retardo,0s)}
html[data-estilo="minimal"].js-reveal .galeria.velada .trabajo .marco::after{opacity:.45}
html[data-estilo="minimal"].js-reveal .galeria.velada.despierta .trabajo .marco::after{opacity:0}
/* El haz de luz: un solo elemento que cruza la grilla (lo crea y lo quita taller.js). */
html[data-estilo="minimal"] .galeria .haz{position:absolute;top:0;bottom:0;left:0;width:28%;z-index:2;
  list-style:none;pointer-events:none;transform:translateX(-110%);will-change:transform;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  mix-blend-mode:soft-light}

/* El visor: la foto grande con su pie. Esc y clic afuera cierran (taller.js). */
html[data-estilo="minimal"] .visor{position:fixed;inset:0;width:100%;height:100%;max-width:none;
  max-height:none;margin:0;padding:24px;border:0;background:rgba(12,10,9,.92);color:var(--hueso);
  overflow:auto}
html[data-estilo="minimal"] .visor[open]{display:flex;flex-direction:column;align-items:center;
  justify-content:center}
html[data-estilo="minimal"] .visor::backdrop{background:transparent}
html[data-estilo="minimal"] .visor-figura{margin:0;display:flex;flex-direction:column;align-items:center;
  gap:12px;max-width:min(100%,1100px)}
html[data-estilo="minimal"] .visor-figura img{width:auto;height:auto;max-width:100%;
  max-height:min(86vh,calc(100vh - 160px));border-radius:var(--radius-foto)}
html[data-estilo="minimal"] .visor-figura figcaption{color:var(--hueso);text-align:center;max-width:60ch}
html[data-estilo="minimal"] .visor-figura figcaption a{color:var(--hueso);text-decoration:underline;
  text-decoration-thickness:1px}
html[data-estilo="minimal"] .visor-cerrar{position:absolute;top:16px;right:16px;min-width:44px;min-height:44px;
  padding:0 16px;background:transparent;color:var(--hueso);border:1px solid var(--hueso-2);
  border-radius:var(--radius);cursor:pointer;transition:background-color .2s ease,color .2s ease}
html[data-estilo="minimal"] .visor-cerrar:hover{background:var(--hueso);color:var(--tinta)}
html[data-estilo="minimal"] .visor :focus-visible{outline:2px solid var(--hueso);outline-offset:2px}
html[data-estilo="minimal"].visor-abierto{overflow:hidden}
/* Entra y sale con fundido (Enrique, 2026-10-28: «muy de golpe al apretar para ver un trabajo»): el
   fondo en 300 ms; la foto aparece cuando ya cargó (taller.js le quita `.cargando`), creciendo
   apenas desde el 97 %, en vez de saltar a medio cargar; al cerrar, todo se apaga en 220 ms. */
html[data-estilo="minimal"] .visor[open]{animation:visor-entra .3s ease}
html[data-estilo="minimal"] .visor-figura img{transition:opacity .4s ease,transform .5s var(--curva)}
html[data-estilo="minimal"] .visor-figura img.cargando{opacity:0;transform:scale(.97)}
html[data-estilo="minimal"] .visor.cerrando{opacity:0;transition:opacity .22s ease}
@keyframes visor-entra{from{opacity:0}to{opacity:1}}

/* ======================================================================
   9. La piedra: tres muestras, una ventana
   Bases (la ficha de ninguna declara licencia):
   - «Before after comparison» de ibrandify,
     https://21st.dev/@ibrandify/components/before-after-comparison — se toma
     SOLO la fila de pestañas que cambia el contenido de un mismo marco; no el
     deslizador.
   - «Scroll Reveal Image» de unlumen,
     https://21st.dev/@unlumen/components/scroll-reveal-image — se toma la foto
     que se ensancha y pierde el borde redondeado al entrar (acá, con
     `clip-path`: no se toca `width` ni `scale`); no los resortes.
   - «Text Highlight» de uiable,
     https://21st.dev/@uiable/components/text-highlight — se toma el trazo de
     color que crece detrás de una palabra (`background-size`); no el azul ni
     el pincel.
   Hasta la vuelta 1 esta sección usaba «Hover Expand Gallery» de kedhareswer;
   esa pieza se mudó a «Lo que hacemos».
   La sección va sobre blanco (en la editorial, sobre negro).
   ====================================================================== */
/* 9a. El trazo detrás de los nombres de las piedras (`.resalte`, lo parte el .py). Quieto o sin
   JavaScript: el trazo completo. Bajo `.js-reveal` nace en 0 y crece al entrar la sección. */
html[data-estilo="minimal"] .resalte{background:linear-gradient(var(--cobre-suave),var(--cobre-suave)) no-repeat 0 60% / 100% 45%}
html[data-estilo="minimal"].js-reveal .resalte{background-size:0% 45%;
  transition:background-size .5s var(--curva)}
html[data-estilo="minimal"].js-reveal .resalte.pinta{background-size:100% 45%}

/* 9b. La portada (opcional, dato `piedra.portada`): la veta a todo el ancho. Sin texto encima, salvo el pie. */
html[data-estilo="minimal"] .piedra-portada{position:relative;z-index:1;margin:0 0 calc(var(--sep) / 2);
  height:clamp(320px,56vh,640px);background:var(--negro-pie);overflow:hidden}
html[data-estilo="minimal"] .piedra-portada img{width:100%;height:100%;object-fit:cover}
html[data-estilo="minimal"] .piedra-portada figcaption{position:absolute;bottom:16px;
  right:max(var(--margen),calc((100% - 1280px) / 2 + var(--margen)));padding:4px 10px;
  background:var(--panel);color:var(--tinta);border-radius:var(--radius-foto)}

/* 9c. Las tres piedras. Base (teléfono): acordeón vertical; cada franja es una fila de 64 px. */
html[data-estilo="minimal"] .bandas{position:relative;z-index:1;counter-reset:piedra;
  margin:48px max(var(--margen),calc((100% - 1280px) / 2 + var(--margen))) 0;
  border-top:1px solid var(--borde)}
html[data-estilo="minimal"] .piedra-panel{position:relative;counter-increment:piedra;
  border-bottom:1px solid var(--borde);overflow:hidden}
html[data-estilo="minimal"] .piedra-franja{display:grid;grid-template-columns:2.25rem 1fr 44px;
  align-items:center;min-height:64px;padding:10px 0;list-style:none;cursor:pointer;color:var(--tinta)}
html[data-estilo="minimal"] .piedra-franja::-webkit-details-marker{display:none}
html[data-estilo="minimal"] .piedra-franja::before{content:counter(piedra,decimal-leading-zero);
  content:counter(piedra,decimal-leading-zero) / "";
  font:500 .875rem/1 var(--f-texto);letter-spacing:.08em;font-variant-numeric:tabular-nums;
  color:var(--tinta-2);transition:color .2s ease}
html[data-estilo="minimal"] .piedra-panel[open]>.piedra-franja::before{color:var(--cobre-texto)}
html[data-estilo="minimal"] .piedra-nombre{font:400 1.25rem/1.2 var(--f-titulo);letter-spacing:-.01em}
html[data-estilo="minimal"] .piedra-franja:focus-visible{outline:2px solid var(--tinta);outline-offset:-2px}
/* El «+» de 44 px, igual al de «Lo que hacemos» */
html[data-estilo="minimal"] .piedra-signo{position:relative;display:block;width:44px;height:44px;
  border:1px solid var(--borde-campo);border-radius:50%;
  transition:border-color .2s ease,background-color .2s ease}
html[data-estilo="minimal"] .piedra-signo::before,
html[data-estilo="minimal"] .piedra-signo::after{content:"";position:absolute;left:50%;top:50%;
  width:14px;height:1px;background:var(--tinta);translate:-50% -50%;transition:rotate .2s ease}
html[data-estilo="minimal"] .piedra-signo::after{rotate:90deg}
html[data-estilo="minimal"] .piedra-franja:hover .piedra-signo{border-color:var(--tinta)}
html[data-estilo="minimal"] .piedra-panel[open] .piedra-signo{background:var(--tinta);border-color:var(--tinta)}
html[data-estilo="minimal"] .piedra-panel[open] .piedra-signo::before,
html[data-estilo="minimal"] .piedra-panel[open] .piedra-signo::after{background:var(--fondo)}
html[data-estilo="minimal"] .piedra-panel[open] .piedra-signo::before{rotate:45deg}
html[data-estilo="minimal"] .piedra-panel[open] .piedra-signo::after{rotate:-45deg}
/* Abierto en el teléfono: la imagen 4:3 y el texto debajo, en blanco (sin panel sobrepuesto) */
html[data-estilo="minimal"] .piedra-cuerpo{display:block;min-height:0}
html[data-estilo="minimal"] .banda.foco{min-height:0}
html[data-estilo="minimal"] .banda-imagenes{aspect-ratio:4/3;border-radius:var(--radius-foto);
  overflow:hidden;background:var(--campo)}
html[data-estilo="minimal"] .banda-imagenes figcaption{left:auto;right:12px;top:12px;bottom:auto;
  max-width:calc(100% - 24px);padding:4px 10px;background:var(--panel);color:var(--tinta);
  border-radius:var(--radius-foto)}
html[data-estilo="minimal"] .banda-texto{display:block;padding:16px 0 32px}
html[data-estilo="minimal"] .banda-texto h3{margin:0 0 8px;font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);font-weight:400}
html[data-estilo="minimal"] .banda-texto p{max-width:none;color:var(--tinta-2);font-size:1rem}

@media (min-width:900px){
  /* Tres pestañas arriba (fila de 64 px) y una sola ventana debajo, a todo el ancho. */
  html[data-estilo="minimal"] .bandas{display:grid;grid-template-columns:repeat(3,1fr);
    grid-template-rows:64px 1fr;height:calc(64px + clamp(360px,52vh,560px));
    border-bottom:1px solid var(--borde)}
  /* El <details> queda estático: así el cuerpo del abierto se ancla al .bandas, no a su casilla. */
  html[data-estilo="minimal"] .piedra-panel{position:static;grid-row:1;border-bottom:0;overflow:visible}
  html[data-estilo="minimal"] .piedra-franja{display:flex;align-items:center;gap:16px;
    height:64px;min-height:0;padding:0 16px;border-bottom:1px solid var(--borde);
    transition:background-color .2s ease}
  html[data-estilo="minimal"] .piedra-franja:hover{background:var(--campo)}
  html[data-estilo="minimal"] .piedra-signo{display:none}
  /* Sin JavaScript (o con movimiento reducido) la pestaña abierta se marca con una raya propia. */
  html[data-estilo="minimal"] .piedra-panel[open]>.piedra-franja{box-shadow:inset 0 -2px 0 var(--cobre)}
  /* Con JavaScript: una sola raya cobre bajo las pestañas, que viaja a la abierta (`--tab`: 0, 1 o 2). */
  html[data-estilo="minimal"].js-tabs .piedra-panel[open]>.piedra-franja{box-shadow:none}
  html[data-estilo="minimal"].js-tabs .bandas::after{content:"";position:absolute;left:0;top:62px;
    height:2px;width:calc(100% / 3);background:var(--cobre);z-index:3;pointer-events:none;
    transform:translateX(calc(var(--tab,0) * 100%));transition:transform .3s var(--curva)}
  /* La ventana: la foto llena el marco y el texto va en un panel plano abajo a la izquierda. */
  html[data-estilo="minimal"] .piedra-cuerpo{position:absolute;left:0;right:0;top:64px;bottom:0;
    background:var(--campo);clip-path:inset(0 round 2px)}
  html[data-estilo="minimal"] .banda-imagenes{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
  html[data-estilo="minimal"] .banda-imagenes figcaption{top:16px;right:16px}
  html[data-estilo="minimal"] .banda-texto{position:absolute;left:24px;bottom:24px;max-width:26em;
    max-height:60%;overflow:auto;padding:20px 24px;background:var(--panel);color:var(--tinta);
    border-radius:var(--radius-foto)}
  html[data-estilo="minimal"] .banda-texto h3{font-size:1.5rem}
  /* Entrada de la ventana (24466): nace un poco más angosta y con esquinas redondeadas, y se abre. */
  html[data-estilo="minimal"].js-reveal .bandas .piedra-cuerpo{transition:clip-path .7s var(--curva)}
  html[data-estilo="minimal"].js-reveal .bandas:not(.entro) .piedra-cuerpo{clip-path:inset(0 4% round 12px)}
  /* Cambio de pestaña: fundido cruzado. taller.js deja encima una copia de la ventana que sale
     (`.piedra-saliente`) y la apaga en 650 ms; la nueva ya está debajo, entera: su foto se acerca
     apenas (del 105 %) y su texto entra después. Solo después del primer toque. */
  html[data-estilo="minimal"].js-reveal .bandas.cambio .piedra-panel[open] .piedra-cuerpo{animation:none;transition:none}
  html[data-estilo="minimal"].js-reveal .bandas.cambio .piedra-panel[open] .banda-imagenes img{
    animation:piedra-acerca 1.2s var(--curva)}
  html[data-estilo="minimal"].js-reveal .bandas.cambio .piedra-panel[open] .banda-texto{
    animation:aparecer .55s var(--curva) .25s backwards}
}
/* La copia de la ventana que sale (fundido cruzado; ver taller.js). Lleva también la clase
   .piedra-cuerpo, así que estos selectores repiten el camino de las reglas de la ventana (con y sin
   .js-reveal) para ganarles: si no, su opacity:1 de «aparecer» la dejaba encima, opaca. */
html[data-estilo="minimal"] .bandas .piedra-cuerpo.piedra-saliente,
html[data-estilo="minimal"].js-reveal .bandas .piedra-cuerpo.piedra-saliente{pointer-events:none;opacity:1;
  transition:opacity .65s ease;animation:none}
html[data-estilo="minimal"] .bandas .piedra-cuerpo.piedra-saliente.se-va,
html[data-estilo="minimal"].js-reveal .bandas .piedra-cuerpo.piedra-saliente.se-va{opacity:0}
/* En el teléfono (acordeón) el cuerpo que se abre entra con un fundido. */
html[data-estilo="minimal"].js-reveal .bandas.cambio .piedra-panel[open] .piedra-cuerpo{animation:aparecer-suave .45s ease}
@keyframes piedra-acerca{from{transform:scale(1.05)}to{transform:none}}
@media (min-width:900px){
  /* Escritorio: la nueva queda entera debajo desde el primer cuadro (sin la transición de opacidad de
     «aparecer»), para que el fundido de la copia no deje traslucir el fondo a mitad de camino. */
  html[data-estilo="minimal"].js-reveal .bandas.cambio .piedra-panel[open] .piedra-cuerpo{animation:none;transition:none}
}
@keyframes aparecer{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 9d. Los pasos como franja dentro de La piedra (theme.pasos_en = "piedra"): cuatro columnas en
   el computador, dos en la tableta y una lista corta en el teléfono. Sin la línea vertical ni los
   nodos de la sección propia: cada paso lleva su número arriba y una línea fina encima. */
html[data-estilo="minimal"] .pasos-franja{margin-top:56px}
html[data-estilo="minimal"] .pasos-franja-titulo{margin:0 0 24px;font:400 clamp(1.375rem,1.1rem + .9vw,1.875rem)/1.2 var(--f-titulo);
  letter-spacing:-.01em;color:var(--tinta)}
html[data-estilo="minimal"] .pasos.pasos-compactos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;
  max-width:none;margin:0;padding:0}
html[data-estilo="minimal"] .pasos.pasos-compactos::before,
html[data-estilo="minimal"] .pasos.pasos-compactos::after{content:none}
html[data-estilo="minimal"] .pasos-compactos .paso{display:block;padding:16px 0 20px;border-top:1px solid var(--borde)}
html[data-estilo="minimal"] .pasos-compactos .paso::before{display:block;margin-bottom:8px;font-size:1.125rem;
  line-height:1;color:var(--cobre-texto)}
html[data-estilo="minimal"] .pasos-compactos .paso::after{content:none}
/* Los números en cobre fijo: la regla de la sección propia los apaga hasta que la línea los alcanza
   (`.paso:not(.pasado)`), y la franja no tiene línea. */
html[data-estilo="minimal"].js-reveal .pasos-compactos .paso:not(.pasado)::before{color:var(--cobre-texto)}
html[data-estilo="minimal"] .pasos-compactos .paso h4{margin:0;font:500 1rem/1.35 var(--f-texto);color:var(--tinta)}
html[data-estilo="minimal"] .pasos-compactos .paso p{margin:6px 0 0;max-width:none;font-size:.9375rem;color:var(--tinta-2)}
/* De dos en dos también en el teléfono (apilados, los cuatro ocupaban casi una pantalla); cuatro en el computador. */
@media (min-width:1000px){
  html[data-estilo="minimal"] .pasos.pasos-compactos{grid-template-columns:repeat(4,1fr);column-gap:32px}
}

/* ======================================================================
   10. Cuatro pasos: la línea que se dibuja
   Base: «Scroll animated timeline» de ibrandify,
   https://21st.dev/@ibrandify/components/scroll-timeline
   (la ficha no declara licencia). Se toma la línea de progreso vertical que
   se dibuja al bajar y los nodos que se encienden; no los rótulos en
   píldora, la monoespaciada, «Scroll down to explore», el centrado ni sus
   textos. (La vuelta 1 usaba «How It Works Steps» de ln-dev7.)
   El número es un contador de CSS (no está en el HTML).

   El estado final es el de partida: `--avance:1` y todos los pasos en cobre.
   Solo bajo `.js-reveal` taller.js parte de 0 y marca `.pasado` a medida que
   la línea llega a cada nodo.
   ====================================================================== */
html[data-estilo="minimal"] #pasos.campo{background:var(--fondo)}     /* en blanco: la piedra ya no es negra, pero el cierre sí */
html[data-estilo="minimal"] .pasos{--num:clamp(2rem,1.5rem + 2vw,3rem);--avance:1;counter-reset:paso;
  position:relative;display:block;max-width:760px;margin:48px 0;padding:0}
/* La línea de fondo (1 px) y encima la cobre (2 px) que se escala con el avance. Terminan en el último nodo
   (`--fin`, que calcula taller.js; sin él, llegan al borde de abajo). */
html[data-estilo="minimal"] .pasos::before{content:"";position:absolute;left:23.5px;top:0;
  bottom:var(--fin,0px);width:1px;background:var(--borde)}
html[data-estilo="minimal"] .pasos::after{content:"";position:absolute;left:23px;top:0;
  bottom:var(--fin,0px);width:2px;background:var(--cobre);transform-origin:top;
  transform:scaleY(var(--avance))}
html[data-estilo="minimal"] .paso{counter-increment:paso;position:relative;display:grid;
  grid-template-columns:48px 1fr;column-gap:24px;align-items:start;padding:0 0 48px}
html[data-estilo="minimal"] .paso:last-child{padding-bottom:0}
/* El número grande, a la derecha del nodo y encima del título */
html[data-estilo="minimal"] .paso::before{content:counter(paso,decimal-leading-zero);
  content:counter(paso,decimal-leading-zero) / "";
  grid-column:2;grid-row:1;display:block;height:auto;margin:0;background:none;
  font:300 var(--num)/1 var(--f-titulo);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  color:var(--cobre-texto);transition:color .2s ease}
/* El nodo: un círculo de 12 px centrado sobre la línea, a la altura del número */
html[data-estilo="minimal"] .paso::after{content:"";grid-column:1;grid-row:1;justify-self:center;
  align-self:start;position:relative;z-index:1;width:12px;height:12px;border-radius:50%;
  margin-top:calc(var(--num) / 2 - 6px);border:1px solid var(--cobre);background:var(--cobre);
  transition:background-color .2s ease,border-color .2s ease}
html[data-estilo="minimal"].js-reveal .paso:not(.pasado)::before{color:var(--tinta-2)}
html[data-estilo="minimal"].js-reveal .paso:not(.pasado)::after{background:var(--fondo);
  border-color:var(--borde-campo)}
html[data-estilo="minimal"] .paso h3{grid-column:2;grid-row:2;margin:12px 0 0;padding:0}
html[data-estilo="minimal"] .paso p{grid-column:2;grid-row:3;margin:8px 0 0;max-width:28em;color:var(--tinta-2)}   /* ≈ 70 caracteres (con 34em eran 95) */
/* El número no se anima con la aparición de la fila (la línea que crecía era de la editorial) */
html[data-estilo="minimal"].js-reveal .paso.rv::before,
html[data-estilo="minimal"].js-reveal .paso.rv:not(.visto)::before{transform:none;
  transition:color .2s ease}
@media (max-width:699px){
  html[data-estilo="minimal"] .pasos{--num:1.75rem}
  html[data-estilo="minimal"] .pasos::before{left:15.5px}
  html[data-estilo="minimal"] .pasos::after{left:15px}
  html[data-estilo="minimal"] .paso{grid-template-columns:32px 1fr;column-gap:16px;padding-bottom:40px}
}

/* ======================================================================
   11. Imagina tu mueble: la caja de pedido
   Bases (la ficha de ninguna declara licencia):
   - «Metal Prompt Bar» de arihantcodes_1f7b8c4d,
     https://21st.dev/@arihantcodes_1f7b8c4d/components/metal-prompt-bar —
     la caja con la fila de fichas y el botón de envío con anillo; no los
     clips, los chips cromáticos ni el modo oscuro.
   - «AI Input» de edwinvakayil,
     https://21st.dev/@edwinvakayil/components/ai-input — solo la onda de luz
     del estado «generando» (`.onda`, la crea taller.js).
   - «Prompt Input dynamic grow» de zochory,
     https://21st.dev/@zochory/components/prompt-input-dynamic-grow — solo el
     campo que crece al escribir (taller.js); no el resplandor.
   ====================================================================== */
html[data-estilo="minimal"] .imaginar-grid{display:block;margin-top:48px;max-width:760px}
html[data-estilo="minimal"] .campo-fila{gap:8px;margin-bottom:24px}
html[data-estilo="minimal"] .campo-fila label{font:500 .875rem/1.2 var(--f-texto);color:var(--tinta)}
/* Controles con diseño propio: siguen el modo y llevan flecha propia */
html[data-estilo="minimal"] .campo-fila select,
html[data-estilo="minimal"] .campo-fila textarea{border:1px solid var(--borde-campo);
  border-radius:var(--radius);background-color:var(--blanco);color:var(--tinta)}
html[data-estilo="minimal"] .campo-fila select{appearance:none;-webkit-appearance:none;min-height:44px;
  border-radius:22px;padding:0 40px 0 16px;font-size:1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231C1917' stroke-width='1.25'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
html[data-estilo="minimal"] .campo-fila textarea{resize:none;padding:12px 16px}
html[data-estilo="minimal"] .campo-fila select:focus-visible,
html[data-estilo="minimal"] .campo-fila textarea:focus-visible{outline:2px solid var(--tinta);outline-offset:2px;border-color:var(--tinta)}
html[data-estilo="minimal"] #imaginar-cuenta{font-variant-numeric:tabular-nums}

/* La caja: el texto de la idea arriba, una línea, y la fila de fichas con «Crear imagen». Sin sombra. */
html[data-estilo="minimal"] .imaginar-caja{border:1px solid var(--borde-campo);border-radius:var(--radius);
  background:var(--blanco);padding:20px 20px 16px;transition:border-color .2s ease}
html[data-estilo="minimal"] .imaginar-caja:focus-within{border-color:var(--tinta)}
html[data-estilo="minimal"] .imaginar-caja:has(.campo-idea textarea:focus-visible){outline:2px solid var(--tinta);outline-offset:2px}
html[data-estilo="minimal"] .campo-idea{margin:0;gap:4px}
html[data-estilo="minimal"] .campo-idea textarea{border:0;border-radius:0;background:transparent;
  padding:4px 0;min-height:0;font-size:1.125rem;line-height:1.5;overflow-y:auto}
html[data-estilo="minimal"] .campo-idea textarea:focus-visible{outline:none}
html[data-estilo="minimal"] .campo-idea .nota{margin:0;text-align:right}
html[data-estilo="minimal"] .imaginar-fichas{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--borde)}
html[data-estilo="minimal"] .imaginar-fichas .campo-fila{margin:0;gap:6px;flex:0 1 auto}

/* «Crear imagen →»: píldora de contorno de 48 px. No es la burbuja cobre ni compite con ella. */
html[data-estilo="minimal"] .enlace.grande{position:relative;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;min-height:48px;padding:0 20px;margin-left:auto;
  border:1px solid var(--tinta);border-radius:24px;background:transparent;
  font:500 1rem/1 var(--f-texto);color:var(--tinta);text-decoration:none;
  transition:background-color .2s ease,color .2s ease}
html[data-estilo="minimal"] .enlace.grande .enlace-texto{text-decoration:none}
html[data-estilo="minimal"] .enlace.grande::after{content:"→";content:"→" / "";display:inline;
  width:auto;height:auto;border:0;border-radius:0;background:none;font:inherit;
  transition:transform .2s ease}
html[data-estilo="minimal"] .enlace.grande:not(:disabled):hover{background:var(--tinta);color:var(--fondo)}
html[data-estilo="minimal"] .enlace.grande:not(:disabled):hover::after{background:none;color:inherit;
  transform:translateX(3px)}
html[data-estilo="minimal"] .enlace.grande:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
/* Creando (`aria-busy`): el borde se vuelve un anillo cobre que gira, el texto baja a .6. */
html[data-estilo="minimal"] .enlace.grande[aria-busy="true"]{border-color:transparent;cursor:default;
  background:transparent;color:var(--tinta)}
html[data-estilo="minimal"] .enlace.grande[aria-busy="true"] .enlace-texto{opacity:.6}
html[data-estilo="minimal"] .enlace.grande[aria-busy="true"]::before{content:"";position:absolute;inset:-1px;
  border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),var(--cobre) 0 25%,transparent 25% 100%);
  -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
  -webkit-mask-clip:content-box,border-box;-webkit-mask-composite:xor;
  mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
  mask-clip:content-box,border-box;mask-composite:exclude;
  animation:anillo 1.2s linear infinite}
@keyframes anillo{to{--ang:360deg}}
html[data-estilo="minimal"] .imaginar-creando{margin:12px 0 0;color:var(--tinta-2)}
/* El error: texto en tinta con una línea de 2 px en cobre a la izquierda, sin rojo */
html[data-estilo="minimal"] .imaginar-error{margin:16px 0 0;padding-left:12px;border-left:2px solid var(--cobre);
  color:var(--tinta);font-weight:400;font-size:1rem}

/* El resultado, debajo de la caja y del mismo ancho: 16:9, con línea de 1 px (no sombra) */
html[data-estilo="minimal"] .imaginar-resultado{margin-top:32px}
html[data-estilo="minimal"] .imaginar-marco,
html[data-estilo="minimal"] .imaginar-marco[data-ejemplo]{--tilt-max:1;aspect-ratio:16/9;
  border:1px solid var(--borde);border-radius:var(--radius-foto)}
html[data-estilo="minimal"] .imaginar-marco[data-estado="creando"] #imaginar-ejemplo{opacity:.6}
/* La onda de luz mientras se crea (28303): un haz que cruza el marco en bucle. La crea taller.js. */
html[data-estilo="minimal"] .imaginar-marco .onda{position:absolute;top:0;bottom:0;left:0;width:35%;
  pointer-events:none;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:onda 1.2s linear infinite}
@keyframes onda{to{transform:translateX(286%)}}
@media (max-width:600px){
  /* Las tres fichas en dos filas y «Crear imagen» en su propia fila, a todo el ancho */
  html[data-estilo="minimal"] .imaginar-fichas .campo-fila{flex:1 1 45%}
  html[data-estilo="minimal"] .imaginar-fichas .enlace.grande{flex:1 1 100%;margin-left:0}
}
/* Bajo 430 px, una ficha por fila: de a dos, «Granito negro» se cortaba y las etiquetas largas
   («Piedra de la cubierta») pasaban a dos líneas y desalineaban la fila. */
@media (max-width:430px){
  html[data-estilo="minimal"] .imaginar-fichas .campo-fila{flex-basis:100%}
}

/* ======================================================================
   12. El bloque negro (legado, contacto y pie) y el legado
   Un solo final: empieza en el legado y no se interrumpe hasta el borde de la página.
   `--fondo` pasa a ser el negro REAL de la marca y los neutros se invierten, así todo lo
   de adentro queda legible sin reescribir cada regla.
   Grano: «Dark Gradient Background» de jatin-yadav05,
   https://21st.dev/@jatin-yadav05/components/dark-gradient-background (la
   ficha no declara licencia). Se toma solo el negro con grano fino y estático,
   acá un SVG `feTurbulence` en `data:` (sin red) al 5 %; no las líneas
   geométricas ni el degradado azul.
   Legado: «Editorial Testimonial» de jatin-yadav05,
   https://21st.dev/@jatin-yadav05/components/editorial-testimonial
   (la ficha no declara licencia): la frase como pieza tipográfica grande y
   liviana, con un elemento secundario a su izquierda; no el carrusel, las
   flechas ni la foto redonda.
   Encendido por palabras: «Reading Text Reveal» de waleedkibhen,
   https://21st.dev/@waleedkibhen/components/reading-text-reveal (la ficha no
   declara licencia; se reescribe, el original es React y Tailwind). Se toma
   el umbral por palabra ligado al scroll; no la negrita ni los textos.
   ====================================================================== */
html[data-estilo="minimal"] .cierre,
html[data-estilo="minimal"] .pie{
  --fondo:var(--negro); --tinta:var(--hueso); --tinta-2:var(--hueso-2);
  --borde:#2A2724; --borde-campo:#78716C; --cobre-texto:var(--cobre-claro);
  --panel:rgba(11,11,11,.9);
  background:var(--negro);color:var(--hueso)}
html[data-estilo="minimal"] .cierre{border-top:1px solid var(--borde)}
html[data-estilo="minimal"] .cierre::before,
html[data-estilo="minimal"] .pie::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px}
/* Partículas: solo en el bloque negro. Las secciones blancas no llevan (el haz y las máscaras ya son su movimiento). */
html[data-estilo="minimal"] .polvo{--polvo-max:0}
html[data-estilo="minimal"] .cierre .polvo,
html[data-estilo="minimal"] .pie .polvo{color:var(--hueso);--polvo-alfa:.18;--polvo-max:32}

html[data-estilo="minimal"] .legado-grid{row-gap:0}
html[data-estilo="minimal"] #legado .frase-grande{color:var(--tinta);font-weight:300;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);line-height:1.3;letter-spacing:-.02em;max-width:20em}
html[data-estilo="minimal"] .legado-grid>.legado-foto,
html[data-estilo="minimal"] .legado-grid>.legado-campo{margin-top:40px}
html[data-estilo="minimal"] .legado-foto img{aspect-ratio:4/5}
/* Sin foto: el oficio se lee, no se titula. Título chico a la izquierda, frase grande a la derecha. */
html[data-estilo="minimal"] #legado .legado-solo>div{display:block}
html[data-estilo="minimal"] #legado .legado-solo h2{font:400 1.25rem/1.2 var(--f-titulo);letter-spacing:-.01em}
html[data-estilo="minimal"] #legado .legado-solo .frase-grande{margin:20px 0 0}
@media (min-width:900px){
  html[data-estilo="minimal"] .legado-grid{column-gap:64px}
  html[data-estilo="minimal"] .legado-grid>.legado-foto,
  html[data-estilo="minimal"] .legado-grid>.legado-campo{margin-top:0}
  html[data-estilo="minimal"] #legado .legado-solo>div{display:grid;grid-template-columns:5fr 7fr;
    column-gap:64px;align-items:start}
  html[data-estilo="minimal"] #legado .legado-solo .seccion-num{grid-column:1;grid-row:1}
  html[data-estilo="minimal"] #legado .legado-solo h2{grid-column:1;grid-row:2;
    font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);padding-top:.35em}
  html[data-estilo="minimal"] #legado .legado-solo .frase-grande{grid-column:2;grid-row:2;margin:0;
    font-size:clamp(1.75rem,1.25rem + 1.8vw,2.75rem);line-height:1.25}
}
/* Las palabras de la frase (las crea taller.js solo con JavaScript, también con movimiento reducido: es un cambio de color):
   apagadas hasta que su borde superior cruza el 72 % de la altura de la ventana (80 % en el teléfono);
   si se sube, se apagan de nuevo. Sin JavaScript la frase entera está en --hueso. */
html[data-estilo="minimal"].js-reveal .pal{color:var(--hueso-2);
  color:color-mix(in srgb,var(--hueso) 45%,transparent);transition:color .25s ease}   /* apagada pero legible (≈ 4,5:1 sobre negro) */
html[data-estilo="minimal"].js-reveal .pal.on{color:var(--hueso)}

/* ======================================================================
   13. Contacto: la última pantalla es título, llamado y datos
   Base del bloque de datos: «Minimal Two-Column Footer» de ln-dev7,
   https://21st.dev/@ln-dev7/components/footer-17
   (la ficha no declara licencia). Se toma el bloque de datos en columnas con
   una línea de 1 px; no la monoespaciada ni las mayúsculas. El llamado
   gigante es diseño propio.
   Segunda vuelta:
   - Entrada tras máscara: «Text Reveal (Mask)» de soralabs,
     https://21st.dev/@soralabs/components/text-reveal-mask (la ficha no
     declara licencia). La línea sube desde abajo tras el recorte del
     contenedor; no la negrita ni el centrado.
   - Disco magnético: «Magnetic Button» de mohammadshehadeh,
     https://21st.dev/@mohammadshehadeh/components/magnetic-button (MIT).
   ====================================================================== */
html[data-estilo="minimal"] .contacto-llamado{--tam:clamp(2.5rem,1.5rem + 4vw,5rem);
  margin:48px 0 0;font-size:var(--tam);line-height:1}
/* La máscara de la entrada: el <p> recorta, el texto sube desde abajo. Solo existe bajo `.js-reveal`.
   El foco del enlace se dibuja hacia adentro para que el recorte no se lo coma. */
html[data-estilo="minimal"].js-reveal .contacto-llamado{clip-path:inset(0 0 -.12em 0)}
html[data-estilo="minimal"] .contacto-llamado .cierre-llamado:focus-visible{outline-offset:-4px}
/* El llamado de cierre: la pieza más grande de la página después del nombre */
html[data-estilo="minimal"] .enlace-llamado.cierre-llamado{font-weight:300;color:var(--cobre-texto);   /* cobre claro sobre negro: 7,3:1 */
  font-size:var(--tam,clamp(2.5rem,1.5rem + 4vw,5rem));line-height:1;letter-spacing:-.03em;gap:0;   /* píldora y disco juntos (botón de 21st) */
  white-space:normal}
html[data-estilo="minimal"] .enlace-llamado.cierre-llamado .enlace-llamado-texto{
  text-decoration-color:currentColor;text-underline-offset:.18em}
/* El disco mide .42em (nunca menos de 28 px) y es magnético: taller.js le pone --mx/--my al enlace. */
html[data-estilo="minimal"] .enlace-llamado.cierre-llamado::after{font-size:max(.21em,14px);width:2em;height:2em;
  border-color:var(--cobre-claro);
  transform:translate(var(--mx,0px),var(--my,0px));
  transition:transform .35s var(--curva),background-color .2s ease,border-color .2s ease,color .2s ease}
html[data-estilo="minimal"] .enlace-llamado.cierre-llamado:hover::after{background:var(--cobre);
  border-color:var(--cobre);color:#fff;transform:translate(var(--mx,0px),var(--my,0px))}
html[data-estilo="minimal"] .campo-negro .enlace-llamado.cierre-llamado{color:var(--cobre-texto)}
/* La línea sube tras la máscara del <p>, 150 ms después del título (solo bajo `.js-reveal`). */
html[data-estilo="minimal"].js-reveal .contacto-llamado .cierre-llamado{
  transition:transform .6s var(--curva) .15s}
html[data-estilo="minimal"].js-reveal .contacto-llamado:not(.entro) .cierre-llamado{transform:translateY(110%)}
/* Los datos: una fila de tres columnas con una línea de 1 px arriba */
html[data-estilo="minimal"] .datos{gap:24px;margin:64px 0 0;padding-top:24px;border-top:1px solid var(--borde)}
/* Cada par es una grilla, y en la fila de tres columnas todas se estiran al alto de la más larga
   («Dónde», tres líneas): sin align-content:start el sobrante se reparte entre la etiqueta y el dato,
   y el teléfono y el Instagram quedaban 24 px más abajo que «Osorno». */
html[data-estilo="minimal"] .datos div{align-content:start}
html[data-estilo="minimal"] .datos dt{color:var(--tinta-2);margin-bottom:8px}
html[data-estilo="minimal"] .datos dd{font-size:1.125rem}
html[data-estilo="minimal"] .datos dd a{color:var(--cobre-texto);text-decoration:underline;
  text-decoration-thickness:1px;font-variant-numeric:tabular-nums;
  vertical-align:top;margin-top:-10px}   /* el área de 44 px sube su relleno: el texto queda a la altura del de al lado */
@media (min-width:900px){
  html[data-estilo="minimal"] .datos{grid-template-columns:repeat(3,1fr)}
  html[data-estilo="minimal"] #contacto{min-height:60vh;display:flex;flex-direction:column;justify-content:center}
  html[data-estilo="minimal"] #contacto>.cuerpo{width:100%}
}

/* ======================================================================
   14. Pie: el final del mismo bloque negro, con el nombre como firma
   Base: «Large Name Footer» de arihantcodes_1f7b8c4d,
   https://21st.dev/@arihantcodes_1f7b8c4d/components/large-name-footer
   (la ficha no declara licencia). Se toma el nombre gigante que cierra la
   página; no sus columnas, el botón ni el fondo.
   Segunda vuelta: «Halftone Wordmark Footer» de kedhareswer,
   https://21st.dev/@kedhareswer/components/halftone-wordmark-footer (React
   solamente; la ficha no declara licencia). Se toma SOLO la composición: el
   nombre enorme recortado por el borde inferior de la página. No se toman
   los puntos que se apartan del puntero (es un lienzo con cursor; ya hay un
   WebGL en esta pantalla), la monoespaciada, las columnas ni «Back to top».
   ====================================================================== */
html[data-estilo="minimal"] .pie{display:block;text-align:left;overflow:hidden;overflow:clip;
  padding:40px max(var(--margen),calc((100% - 1280px) / 2 + var(--margen))) 0}
/* La línea legal (con «Impulsado por AURA OS») cierra la página, debajo de la firma (Enrique, 2026-10-28). */
html[data-estilo="minimal"] .pie-legal{position:relative;z-index:1;margin-top:40px;padding:20px 0 28px;
  border-top:1px solid color-mix(in srgb,var(--hueso) 14%,transparent)}
html[data-estilo="minimal"] .pie p{margin:0 0 4px;text-wrap:balance;color:var(--hueso-2)}
/* El botón «Pausar movimiento»: va primero en el HTML (así «Impulsado por AURA OS» sigue siendo lo
   último de la página) y en el computador se ubica a la derecha de la línea legal. El punto de
   color dice que hay movimiento; en pausa queda hueco. */
html[data-estilo="minimal"] .pie-legal{display:grid;gap:12px;justify-items:start}
html[data-estilo="minimal"] .mov-boton{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;margin:0;
  font:400 .875rem/1 var(--f-texto);color:var(--hueso-2);background:none;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--hueso) 22%,transparent);border-radius:999px;
  transition:color .2s ease,border-color .2s ease}
html[data-estilo="minimal"] .mov-boton::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--etiqueta,var(--cobre))}
html[data-estilo="minimal"].mov-pausado .mov-boton::before{background:none;box-shadow:inset 0 0 0 1px currentColor}
html[data-estilo="minimal"] .mov-boton:hover{color:var(--hueso);border-color:color-mix(in srgb,var(--hueso) 45%,transparent)}
html[data-estilo="minimal"] .mov-boton:focus-visible{outline:2px solid var(--hueso);outline-offset:3px}
@media (min-width:700px){
  html[data-estilo="minimal"] .pie-legal{grid-template-columns:1fr auto;column-gap:24px;align-items:center}
  html[data-estilo="minimal"] .pie-legal p{grid-column:1}
  html[data-estilo="minimal"] .mov-boton{grid-column:2;grid-row:1 / span 2}
}
/* La firma: el nombre gigante y el logo de metal en 3D (capa 3D, escena «logo») flotando a su
   lado. El nombre mide --tam y se mete un 22 % de su tamaño por debajo del borde de la página
   (margen negativo; el `overflow:hidden` del pie lo recorta). Sobre el negro del pie vale lo de
   taller.css: el logo plano claro de respaldo y el halo tenue para que la casa negra se recorte. */
html[data-estilo="minimal"] .pie .firma{position:relative;z-index:1;margin-top:0;display:grid;
  gap:24px;align-items:end}
html[data-estilo="minimal"] .pie .firma.con-logo{grid-template-columns:minmax(0,1fr)}   /* teléfono: una columna */
html[data-estilo="minimal"] .pie .nombre-grande{--tam:clamp(3rem,16vw,4.5rem);display:flex;flex-wrap:wrap;
  column-gap:.25em;margin:0;padding:0;overflow:visible;   /* ya no se recorta: debajo va la línea legal */
  font-weight:300;color:var(--hueso);letter-spacing:-.04em}
html[data-estilo="minimal"] .pie .nombre-grande span{font-size:var(--tam);line-height:.92}
html[data-estilo="minimal"] .pie .firma .logo-3d{width:160px;order:-1;aspect-ratio:1/1;justify-self:center}
@media (min-width:700px){
  html[data-estilo="minimal"] .pie{padding-top:48px}
  html[data-estilo="minimal"] .pie .nombre-grande{--tam:clamp(3rem,11vw,10rem)}
  html[data-estilo="minimal"] .pie .firma.con-logo{grid-template-columns:1fr clamp(160px,28vw,320px);gap:48px}
  html[data-estilo="minimal"] .pie .firma .logo-3d{width:100%;order:0;margin-bottom:32px}
}
@media (min-width:900px){
  html[data-estilo="minimal"] .pie .firma.con-logo{grid-template-columns:1fr 320px}
}
/* La firma centrada, más cerca de los datos y con el logo en metal claro (Enrique, 2026-10-28,
   sobre una captura de su iPad: «más centrado, un poco más arriba, blanco en vez de negro»).
   El nombre va en dos líneas, una palabra por línea, y el logo a su lado: el par se centra en la
   columna. En el teléfono, uno sobre otro y centrados. Sobre el negro del pie el metal negro casi
   no se veía: --escena-1, el color principal que lee la escena 3D, pasa al hueso de la marca (el
   logo plano de respaldo ya es el claro). Va después de las reglas de arriba y les gana por orden. */
html[data-estilo="minimal"] .pie .logo-3d{--escena-1:var(--hueso)}
html[data-estilo="minimal"] .pie .firma{justify-items:center}
/* container-type:normal: taller.css lo vuelve contenedor para medir la letra en cqi, y un contenedor
   no toma el ancho de su texto; en una columna «auto» medía 0 y el nombre se encimaba al logo. Acá el
   tamaño ya lo da --tam. */
html[data-estilo="minimal"] .pie .nombre-grande{container-type:normal;flex-direction:column;align-items:center;text-align:center}
html[data-estilo="minimal"] .pie{padding-top:24px}
/* Más arriba: el contacto ya no deja aire debajo de sus datos (el sobrante de su alto mínimo va
   arriba del título) y la firma parte enseguida. */
html[data-estilo="minimal"] #contacto{padding-bottom:32px}
@media (min-width:700px){
  html[data-estilo="minimal"] .pie{padding-top:16px}
  html[data-estilo="minimal"] .pie .firma.con-logo{grid-template-columns:auto auto;justify-content:center;
    align-items:center;gap:clamp(32px,6vw,112px)}
  html[data-estilo="minimal"] .pie .firma .logo-3d{width:clamp(180px,22vw,300px);margin-bottom:0}
  html[data-estilo="minimal"] .pie .nombre-grande{align-items:flex-start;text-align:left}
}
@media (min-width:900px){
  html[data-estilo="minimal"] #contacto{justify-content:flex-end}
  /* Con los datos en el pie, el contacto es solo el título y el botón: sin el alto mínimo, que
     dejaba un hueco de media pantalla sobre el título. */
  html[data-estilo="minimal"] #contacto:not(:has(.datos)){min-height:0}
}
/* El lema del cliente en vez del nombre (ui_copy.contacto.lema; Enrique, 2026-10-28: una frase de
   la familia, más profesional que el nombre que el logo ya dice). Grande, en sus renglones (el
   servidor lo corta después de la primera coma), y la firma chica
   debajo, en el color de las etiquetas. Centrado en el teléfono; al lado del logo desde 700 px. */
html[data-estilo="minimal"] .pie .lema{margin:0;text-align:center;max-width:100%;
  font-size:clamp(2.25rem,1.2rem + 5vw,3.25rem)}
html[data-estilo="minimal"] .pie .lema p span{display:block}   /* un renglón por parte (ver _lineas_del_lema) */
html[data-estilo="minimal"] .pie .lema blockquote{margin:0}
html[data-estilo="minimal"] .pie .lema p{margin:0;font-size:1em;font-weight:300;line-height:1.02;
  letter-spacing:-.03em;color:var(--hueso);text-wrap:balance}
html[data-estilo="minimal"] .pie .lema figcaption{margin-top:.9rem;font:500 .875rem/1.4 var(--f-texto);
  letter-spacing:.12em;text-transform:uppercase;color:var(--etiqueta,var(--cobre-claro))}
/* Centrado (teléfono), la comilla no cuelga: el renglón se centra con ella. */
html[data-estilo="minimal"] .pie .lema.con-comillas p > span:first-child{text-indent:0}
@media (min-width:700px){
  html[data-estilo="minimal"] .pie .lema{text-align:left;font-size:clamp(2.75rem,1rem + 4.6vw,5.5rem)}
  html[data-estilo="minimal"] .pie .lema.con-comillas p > span:first-child{text-indent:-.4em}
}
/* Los datos en el pie (ui_copy.contacto.datos_en = "pie"): una fila limpia, centrada bajo la firma,
   con un ícono del color de las etiquetas en vez de la etiqueta. En el teléfono, uno bajo otro. */
html[data-estilo="minimal"] .pie-datos{position:relative;z-index:1;list-style:none;margin:40px 0 0;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:4px}
html[data-estilo="minimal"] .pie-dato{display:flex;align-items:center;gap:10px;min-height:44px;
  font-size:1rem;line-height:1.45;color:var(--hueso);text-align:left}
html[data-estilo="minimal"] .pie-icono{width:20px;height:20px;flex:none;color:var(--etiqueta,var(--cobre-claro))}
html[data-estilo="minimal"] .pie-dato a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px}
html[data-estilo="minimal"] .pie-dato a:hover{text-decoration-color:var(--etiqueta,var(--cobre-claro))}
/* Con el contacto en el pie (theme.contacto_en = "pie") el «Pide tu visita» encabeza la fila: chico como
   los otros, pero en el color de las etiquetas y más firme, porque es lo único de la fila que pide algo.
   El menú «Contacto» trae al pie, que deja libre el alto de la barra. */
html[data-estilo="minimal"] .pie-dato-visita a{color:var(--etiqueta,var(--cobre-claro));font-weight:600}
html[data-estilo="minimal"] footer.pie[id]{scroll-margin-top:var(--alto-barra,64px)}
@media (min-width:700px){
  html[data-estilo="minimal"] .pie-datos{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px 48px}
}
/* El pie claro (theme.pie_tono = "claro"; Enrique, 2026-10-31: el logo real lleva la casa NEGRA y
   sobre el negro del pie no se veía; «un crema, elegante, en vez del verde bosque»). Se redefinen
   los neutros DENTRO del pie: --hueso, que ahí es el color del texto, pasa a tinta oscura, y así
   cada regla del pie (lema, firma, línea legal, botón de pausa, borde) se da vuelta sola. El cobre
   de texto baja a uno profundo (6,2:1 sobre el crema; el de siempre daba menos de 4,5:1).
   `footer.pie` suma un elemento a la especificidad: le gana a la paleta de «noche», que va en otra
   hoja cargada después y pinta el pie con sus variables. */
html[data-estilo="minimal"] footer.pie[data-pie="claro"]{
  --crema:#F3EEE6;
  --hueso:#1F1B17; --hueso-2:#5B534B; --etiqueta:#8F3F12; --cobre-texto:#8F3F12; --cobre-claro:#8F3F12;
  --fondo:var(--crema); --tinta:#1F1B17; --tinta-2:#5B534B; --borde:#DCD3C7;
  background:var(--crema);color:#1F1B17;color-scheme:light}
html[data-estilo="minimal"] footer.pie[data-pie="claro"]{padding-top:40px}
@media (min-width:700px){
  html[data-estilo="minimal"] footer.pie[data-pie="claro"]{padding-top:56px}
}
/* El logo como es: la casa en el negro de la marca (--logo-1, tomado en :root) y las letras en
   cobre; la escena se funde con el crema y sin el halo claro, que era para recortarla sobre negro.
   Sin 3D, el logo plano original (el oscuro), no el claro. */
html[data-estilo="minimal"] footer.pie[data-pie="claro"] .logo-3d{--escena-1:var(--logo-1);
  --escena-fondo:var(--crema);--halo-logo:transparent}
html[data-estilo="minimal"] footer.pie[data-pie="claro"] .logo-3d-claro{display:none}
html[data-estilo="minimal"] footer.pie[data-pie="claro"] .logo-3d-oscuro{display:block}
/* Las partículas sobre crema: cobre y dorado, más tenues (los puntos claros no se verían). */
html[data-estilo="minimal"] footer.pie[data-pie="claro"] .polvo{color:#B5561E;--polvo-brillo:#C9A55E;
  --polvo-alfa:.55}

/* ======================================================================
   15. Detalles de todo el sitio y los 6 FX, más sutiles
   Títulos por palabras tras una máscara: «Text Reveal (Mask)» de soralabs,
   https://21st.dev/@soralabs/components/text-reveal-mask (la ficha no declara
   licencia). Se toma el titular que sube tras una máscara; no la negrita, el
   centrado ni los textos. taller.js envuelve cada palabra de los h2 en
   `<span class="m"><span class="mi">palabra</span></span>` solo con JavaScript (con movimiento
   reducido, cada palabra entra solo con opacidad); el h2 sigue leyéndose igual (los espacios no cambian).
   ====================================================================== */
html[data-estilo="minimal"] ::selection{background:var(--cobre);color:#fff}
html[data-estilo="minimal"]{caret-color:var(--cobre);accent-color:var(--cobre)}
/* Foco visible en TODO lo interactivo: tinta sobre claro, hueso sobre oscuro */
html[data-estilo="minimal"] :focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
html[data-estilo="minimal"] .escena :focus-visible,
html[data-estilo="minimal"] .barra:not(.solida) :focus-visible{outline-color:var(--hueso)}

/* Las palabras de los títulos tras su máscara. Padding y margen negativo: no cortan los descendentes. */
html[data-estilo="minimal"] .m{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.12em;margin-bottom:-.12em}
html[data-estilo="minimal"] .mi{display:inline-block}
html[data-estilo="minimal"].js-reveal .mi{transition:transform .6s var(--curva);
  transition-delay:calc(var(--i,0) * 35ms)}
html[data-estilo="minimal"].js-reveal h2:not(.entro) .mi{transform:translateY(110%)}

/* FX 2 · Cursor: punto de 6 px y aro de 28 px; sobre un enlace el aro crece a 44 px (taller.js lo centra en él) */
html[data-estilo="minimal"] .cursor-punto{background:var(--tinta)}
html[data-estilo="minimal"] .cursor-aro{border:1px solid var(--tinta);opacity:.35;transition:scale .2s var(--curva)}
/* Sobre el bloque negro el cursor pasa a hueso (taller.js pone `.cursor-claro`) */
html[data-estilo="minimal"].cursor-claro .cursor-punto{background:var(--hueso)}
html[data-estilo="minimal"].cursor-claro .cursor-aro{border-color:var(--hueso)}

/* FX 5 · Barra de 1 px y puntos de 8 px (área tocable de 24) con su rótulo */
html[data-estilo="minimal"] #progress{height:1px}
html[data-estilo="minimal"] .puntos{gap:0}
@media (min-width:900px){html[data-estilo="minimal"] .puntos{display:flex}}
/* El <a> mide 24×24 y el punto de 8 px se dibuja adentro: no se ve más grande */
html[data-estilo="minimal"] .punto{position:relative;width:24px;height:24px;border:0;background:transparent}
html[data-estilo="minimal"] .punto::before{content:"";position:absolute;inset:8px;border-radius:50%;
  border:1px solid var(--tinta-2);box-sizing:border-box}
html[data-estilo="minimal"] .punto[aria-current="true"]{background:transparent}
html[data-estilo="minimal"] .punto[aria-current="true"]::before{background:var(--cobre);border-color:var(--cobre)}
html[data-estilo="minimal"] .puntos.sobre-oscuro .punto:not([aria-current="true"])::before{border-color:var(--hueso-2)}
html[data-estilo="minimal"] .punto:focus-visible{outline:2px solid var(--cobre);outline-offset:0;border-radius:50%}
/* El rótulo (sale de data-texto): a la izquierda del punto, 12 px aparte. Se ve al pasar el cursor o
   enfocar; no en el activo, porque a 1440 px no hay margen y se montaba sobre el contenido. El nombre accesible del enlace ya existe (aria-label). */
html[data-estilo="minimal"] .punto::after{content:attr(data-texto);position:absolute;right:calc(100% + 4px);
  top:50%;translate:0 -50%;white-space:nowrap;padding:4px 8px;border-radius:var(--radius-foto);
  background:var(--panel);color:var(--tinta);font:500 .875rem/1 var(--f-texto);letter-spacing:.08em;
  text-transform:uppercase;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,visibility .2s}
html[data-estilo="minimal"] .punto:hover::after,
html[data-estilo="minimal"] .punto:focus-visible::after{opacity:1;visibility:visible}
html[data-estilo="minimal"] .puntos.sobre-oscuro .punto::after{background:rgba(11,11,11,.82);color:var(--hueso)}

/* FX 6 · Aparición: más corta y suave. La guarda `.js-reveal` y la red de 1,2 s no cambian. */
html[data-estilo="minimal"].js-reveal .rv{transition:opacity .5s var(--curva),transform .5s var(--curva)}
html[data-estilo="minimal"].js-reveal .rv:not(.visto){transform:translateY(8px)}

/* 15b. Cifras (ui_copy.cifras): solo existen si el cliente las declaró. Una fila de tres con una
   línea de 1 px arriba y el valor en Archivo 300. Viven dentro del bloque negro, donde --tinta ya es el hueso.
   El contador es el de taller.js (FX 1); «noche» las vuelve tarjetas en taller-noche.css. */
html[data-estilo="minimal"] .cifras{display:grid;grid-template-columns:1fr;gap:24px;margin:48px 0 0;
  padding:24px 0 0;border-top:1px solid var(--borde)}
@media (min-width:700px){
  html[data-estilo="minimal"] .cifras{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
}
html[data-estilo="minimal"] .cifra{display:block}
html[data-estilo="minimal"] .cifra-valor{font:300 clamp(2.25rem,1.75rem + 2vw,3.25rem)/1 var(--f-texto);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--tinta)}
html[data-estilo="minimal"] .cifra-sufijo{color:var(--tinta-2)}
html[data-estilo="minimal"] .cifra-etiqueta{display:block;margin-top:8px;font:500 .875rem/1.3 var(--f-texto);
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}

/* ======================================================================
   16. Movimiento reducido: SUAVE, no quieto.
   El dueño tiene apagados los «efectos de animación» de Windows, así que su navegador
   informa `reduce`, y un sitio del todo quieto se sentía frío. Lo que marea (desplazarse,
   recortes que se abren, imanes, rayas que viajan) se sigue evitando, salvo la marquesina, el
   destello de sus líneas y el polvo, que el dueño pidió en movimiento (2026-10-28): van lentos y
   el botón «Pausar movimiento» del pie los detiene (WCAG 2.2.2); lo demás
   se ve con fundidos de opacidad y cambios de luz o de color, y los contadores y la línea de
   los pasos corren igual. Todo lo que parte invisible sigue existiendo solo bajo
   `.js-reveal` y con la guarda de 2,5 s de taller.js: si algo falla, el contenido se ve.
   (Este bloque va siempre al final del archivo.)
   ====================================================================== */
@keyframes aparecer-suave{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  /* Marquesina: corre, pero lenta y pareja (140 s por vuelta, sin acelerón al bajar): el dueño la
     quiso en movimiento (2026-10-28). Se detiene con el cursor encima, al tocarla o enfocarla, y
     con «Pausar movimiento». El destello de sus líneas, más lento. */
  html[data-estilo="minimal"] .ticker.corre .ticker-pista{transition:none;animation:ticker 140s linear infinite}
  html[data-estilo="minimal"] .ticker.corre:is(:hover,:focus-within) .ticker-pista{animation-play-state:paused}
  html[data-estilo="minimal"] .ticker.corre::before,
  html[data-estilo="minimal"] .ticker.corre::after{animation-duration:14s}

  /* Aparición al bajar: solo opacidad en 400 ms, sin subir 8 px. (La opacidad de partida
     0 viene de taller.css bajo `.js-reveal .rv:not(.visto)`.) */
  html[data-estilo="minimal"].js-reveal .rv{transition:opacity .4s ease}
  html[data-estilo="minimal"].js-reveal .rv:not(.visto){transform:none}

  /* Títulos por palabras: se crean igual; cada palabra entra solo con opacidad, con el mismo
     escalonado (el `transition-delay` lo deja la regla base: acá solo van los longhands). */
  html[data-estilo="minimal"].js-reveal .mi{transform:none;opacity:1;
    transition-property:opacity;transition-duration:.4s;transition-timing-function:ease}
  html[data-estilo="minimal"].js-reveal h2:not(.entro) .mi{transform:none;opacity:0}

  /* Fotos del caso: fundido de 500 ms en vez de la máscara que se descubre (sin clip-path ni línea). */
  html[data-estilo="minimal"].js-reveal .caso-fotos figure{clip-path:none;opacity:1;
    transition:opacity .5s ease var(--d,0s)}
  html[data-estilo="minimal"].js-reveal .caso:not(.entro) .caso-fotos figure{clip-path:none;opacity:0}
  html[data-estilo="minimal"].js-reveal .caso-fotos figure::after,
  html[data-estilo="minimal"].js-reveal .caso:not(.entro) .caso-fotos figure::after{display:none}

  /* Galería: sin haz que cruce; el velo se va con un fundido escalonado por posición
     (taller.js calcula `--retardo` igual que con movimiento). El velo de partida es el de la regla base. */
  html[data-estilo="minimal"] .galeria .haz{display:none}
  html[data-estilo="minimal"].js-reveal .galeria.velada .trabajo .marco::after{
    transition:opacity .5s ease var(--retardo,0s)}

  /* El trazo detrás de los nombres de las piedras: es un cambio de fondo, no un desplazamiento
     de la página; se mantiene su transición de siempre (sin ella quedaría en seco). */

  /* Ventana de la piedra: fundido de 500 ms en vez de abrirse con clip-path. */
  html[data-estilo="minimal"].js-reveal .bandas .piedra-cuerpo{clip-path:inset(0 round 2px);
    opacity:1;transition:opacity .5s ease}
  html[data-estilo="minimal"].js-reveal .bandas:not(.entro) .piedra-cuerpo{clip-path:inset(0 round 2px);opacity:0}
  /* Cambio de pestaña: el mismo fundido cruzado (es opacidad), sin el acercamiento de la foto; el
     texto entra con fundido, sin subir. Tablón que se abre: su texto entra con un fundido más lento
     (antes 250 ms: se sentía de golpe). */
  html[data-estilo="minimal"].js-reveal .bandas.cambio .piedra-panel[open] .banda-imagenes img{animation:none}
  html[data-estilo="minimal"].js-reveal .bandas.cambio .piedra-panel[open] .banda-texto{
    animation:aparecer-suave .5s ease .2s backwards}
  html[data-estilo="minimal"].js-reveal .servicio[open] .servicio-texto{
    animation:servicio-entra .5s ease .2s backwards}
  /* Tablones: el ancho NO se anima (solo la aparición, por opacidad). */
  html[data-estilo="minimal"].js-reveal .servicios>li.rv{transition:opacity .4s ease}

  /* Pasos y legado: corren igual (la línea crece ligada al scroll; las palabras y los números
     solo cambian de color). Se dejan las reglas base y sus transiciones de color. */

  /* Llamado de cierre: la línea entra con fundido en vez de subir tras su máscara. */
  html[data-estilo="minimal"].js-reveal .contacto-llamado{clip-path:none}
  html[data-estilo="minimal"].js-reveal .contacto-llamado .cierre-llamado{transform:none;opacity:1;
    transition:opacity .5s ease .15s}
  html[data-estilo="minimal"].js-reveal .contacto-llamado:not(.entro) .cierre-llamado{transform:none;opacity:0}
  html[data-estilo="minimal"] .imaginar-marco .onda{display:none}
  /* «Crear imagen» creando: sin anillo que gira, el borde pasa a 2 px cobre quieto */
  html[data-estilo="minimal"] .enlace.grande[aria-busy="true"]{border:2px solid var(--cobre)}
  html[data-estilo="minimal"] .enlace.grande[aria-busy="true"]::before{display:none}
  /* Sin imanes: las piezas magnéticas se quedan en su lugar */
  html[data-estilo="minimal"] .llamado{transform:none;transition:background-color .2s ease}
  html[data-estilo="minimal"] .llamado:hover,
  html[data-estilo="minimal"] .llamado:active{transform:none}
  /* Botón píldora + disco: se invierte igual (cambio de color, sin movimiento: se dejan las
     transiciones de color de la regla base). Solo la flecha cambia: en vez de deslizarse
     (translateX) se funde, una sale y la otra entra por opacidad. */
  html[data-estilo="minimal"] .llamado-texto{translate:none}
  html[data-estilo="minimal"] .disco svg,
  html[data-estilo="minimal"] .disco svg:last-child,
  html[data-estilo="minimal"] :is(.llamado,.enlace-llamado):hover .disco svg:first-child,
  html[data-estilo="minimal"] :is(.llamado,.enlace-llamado):hover .disco svg:last-child{
    transform:none;transition:opacity .3s ease}
  html[data-estilo="minimal"] .disco svg:first-child{opacity:1}
  /* Excepción a «lo que nace en opacidad 0 va bajo js-reveal»: no es una aparición sino la
     flecha de relevo del botón; la primera flecha sigue visible sin JavaScript y sin hover. */
  html[data-estilo="minimal"] .disco svg:last-child{opacity:0}
  html[data-estilo="minimal"] :is(.llamado,.enlace-llamado):hover .disco svg:first-child{opacity:0}
  html[data-estilo="minimal"] :is(.llamado,.enlace-llamado):hover .disco svg:last-child{opacity:1}
  html[data-estilo="minimal"] .cierre-llamado .disco{transform:none;
    transition:background-color .5s var(--curva),color .5s var(--curva)}
  html[data-estilo="minimal"] .enlace-llamado.cierre-llamado::after,
  html[data-estilo="minimal"] .enlace-llamado.cierre-llamado:hover::after{transform:none;
    transition:background-color .2s ease,border-color .2s ease,color .2s ease}
  /* Sin raya que viaje: la pestaña abierta se marca con su propia raya */
  html[data-estilo="minimal"] .nav-raya{display:none}
  /* El visor: solo fundidos, sin que la foto crezca. */
  html[data-estilo="minimal"] .visor-figura img.cargando{transform:none}
  html[data-estilo="minimal"] .bandas::after{transition:none}

  html[data-estilo="minimal"] .servicios>li,
  html[data-estilo="minimal"] .servicio-cabeza,
  html[data-estilo="minimal"] .piedra-panel,
  html[data-estilo="minimal"] .piedra-franja,
  html[data-estilo="minimal"] .piedra-signo,
  html[data-estilo="minimal"] .piedra-signo::before,
  html[data-estilo="minimal"] .piedra-signo::after,
  html[data-estilo="minimal"] .piedra-franja::before,
  html[data-estilo="minimal"] .servicio-cabeza::before,
  html[data-estilo="minimal"] .servicio-signo,
  html[data-estilo="minimal"] .servicio-signo::before,
  html[data-estilo="minimal"] .servicio-signo::after,
  html[data-estilo="minimal"] .menu-icono::before,
  html[data-estilo="minimal"] .menu-icono::after,
  html[data-estilo="minimal"] .nav-escritorio a,
  html[data-estilo="minimal"] .filtros button,
  html[data-estilo="minimal"] .trabajo .marco img,
  html[data-estilo="minimal"] .enlace:not(.grande)::after,
  html[data-estilo="minimal"] .enlace.grande,
  html[data-estilo="minimal"] .enlace.grande::after,
  html[data-estilo="minimal"] .imaginar-caja,
  html[data-estilo="minimal"] .visor-cerrar,
  html[data-estilo="minimal"] .punto::after,
  html[data-estilo="minimal"] .cursor-aro{transition:none}
  /* Aparte: un selector que el navegador no entiende descartaría toda la lista de arriba */
  html[data-estilo="minimal"] .piedra-panel::details-content{transition:none}
  /* Los tablones SÍ cambian de ancho al abrirse, lento (600 ms): sin transición era un salto
     (Enrique, 2026-10-28: «muy de golpe»). Es un cambio que pide la persona al tocar, no algo que
     se mueve solo. Va después de la lista de arriba para ganarle. */
  html[data-estilo="minimal"] .servicios>li{transition:flex-grow .6s ease,flex-basis .6s ease}
  html[data-estilo="minimal"].js-reveal .servicios>li.rv{transition:opacity .4s ease,flex-grow .6s ease,flex-basis .6s ease}
}