/* Sitio "taller_a_medida": estilos de toda la página menos la escena.
   ------------------------------------------------------------------
   Idéntico para todos los clientes: lo que cambia (la paleta, el radio de
   las esquinas) llega en un bloque <style> que pisa estas variables, y lo
   demás por el HTML. Los valores de acá son los de partida.

   Reglas que este archivo cumple:
   - Ningún `opacity:0` sin la guarda `html.js-reveal` (y su red de seguridad
     en taller.js). Si el JavaScript falla, todo está a la vista.
   - Sin líneas finas, sombras en reposo, degradados ni cristal con blur.
   - Texto sobre foto solo dentro de un panel plano rgba(11,11,11,.82).
   - `[hidden]` esconde de verdad (L17). */

[hidden]{display:none!important}

:root{
  --fondo:#F2EFE9; --campo:#E6E2DB; --blanco:#FFFFFF;
  --tinta:#141414; --tinta-2:#5C5752; --borde:#D5D0C8;
  --cobre:#B5561E; --cobre-texto:#9C4414;
  --negro:#0B0B0B; --granito:#1E1E1C;
  --hueso:#F2EFE9; --hueso-2:#B8B2AA; --cobre-claro:#D98B5A;
  --radius:10px; --radius-foto:6px;
  /* La burbuja del mensaje: la esquina de abajo a la izquierda casi recta. */
  --radio-llamado:14px 14px 14px 3px;
  --f-titulo:"Fraunces",Georgia,"Times New Roman",serif;
  --f-texto:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --margen:24px; --sep:96px; --alto-barra:64px;
}
@media (min-width:900px){
  :root{--margen:48px;--sep:160px}
}
@media (prefers-color-scheme:dark){
  /* Solo con `modo: "sistema"` (la plantilla lo escribe en <html data-modo>).
     Con "claro", que es lo normal, el sitio no cambia aunque el equipo sea oscuro.
     Mismas variables que el bloque del cliente, por si no declara las suyas. */
  html[data-modo="sistema"]{--fondo:#0B0B0B;--campo:#1E1E1C;--blanco:#1E1E1C;--tinta:#F2EFE9;
    --tinta-2:#B8B2AA;--borde:#3A3834;--cobre-texto:#D98B5A}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--alto-barra)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* `clip` y no `hidden`: la página nunca se mueve de lado y la escena pegada
   (position:sticky) sigue funcionando. */
body{overflow-x:clip;margin:0;background:var(--fondo);color:var(--tinta);
  font:400 clamp(1rem,.95rem + .3vw,1.125rem)/1.55 var(--f-texto)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--f-titulo);font-weight:600;margin:0}
h2{font-size:clamp(2rem,1.2rem + 3vw,3.5rem);line-height:1.02;letter-spacing:-.02em}
h3{font-size:clamp(1.35rem,1.1rem + 1.2vw,2rem);line-height:1.15;letter-spacing:-.01em}
p{margin:0 0 1em}
/* Títulos parejos y sin palabras sueltas al final. Llega también a la escena
   por cascada, sin editar su archivo. */
h1,h2,h3,.frase,.servicio-nombre{text-wrap:balance}
p,figcaption,dd,.nota,.linea{text-wrap:pretty}
a{color:var(--cobre-texto)}
ul,ol,dl,dd{margin:0;padding:0}
:focus-visible{outline:2px solid var(--cobre);outline-offset:3px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.salto{position:absolute;left:8px;top:-60px;z-index:100;background:var(--tinta);
  color:var(--fondo);padding:12px 16px}
.salto:focus{top:8px}
.nota{font-size:.875rem;line-height:1.45;color:var(--tinta-2);margin:6px 0 0}
.frase-grande{font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.3;
  margin:20px 0 0;max-width:42ch}

/* ---- Llamados: ningún botón genérico ----
   Hay UN solo llamado con relleno (.llamado, en la barra) y siempre se llama
   igual. Lo demás es tipografía con carácter. */

/* 1. El llamado: uno solo, en la barra. */
/* La forma es la cola de un mensaje: tres esquinas redondas y la de abajo a la
   izquierda casi recta, porque todo llamado abre una conversación de WhatsApp. */
.llamado{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 18px;
  background:var(--cobre);color:#fff;font:600 .9375rem/1 var(--f-texto);letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;border-radius:var(--radio-llamado);
  transition:background-color .15s ease,transform .1s ease}
.llamado::after{content:"→";content:"→" / "";transition:transform .15s ease}
.disco{display:none}   /* el disco del botón «píldora + disco» es de la minimalista y de «noche» */
.llamado:hover{background:var(--cobre-texto)}            /* #FFF sobre #9C4414 = 6,5:1 */
.llamado:hover::after{transform:translateX(3px)}
.llamado:active{background:var(--cobre-texto);transform:translateY(1px)}
.llamado:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
.js-escena .barra:not(.solida) .llamado:focus-visible{outline-color:var(--hueso)}
.llamado,.llamado:hover,.llamado:active{color:#fff}       /* #FFF sobre #B5561E = 4,9:1 */

/* 2. Enlace de llamado: tipografía con carácter. El texto va en un <span> para
   que el subrayado no pase por debajo del disco de la flecha. */
.enlace-llamado{display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:8px 6px 8px 0;
  font:600 clamp(1.25rem,1rem + 1vw,1.75rem)/1.2 var(--f-titulo);color:var(--tinta);
  text-decoration:none;white-space:nowrap;border-radius:var(--radio-llamado)}
.enlace-llamado-texto{text-decoration:underline;text-decoration-color:var(--cobre);
  text-decoration-thickness:2px;text-underline-offset:.28em;transition:text-underline-offset .15s ease}
/* La flecha va dentro de un disco cobre. */
.enlace-llamado::after{content:"→";content:"→" / "";display:inline-grid;place-items:center;flex:none;
  width:1.75em;height:1.75em;border-radius:50%;background:var(--cobre);color:#fff;
  font:600 .75em/1 var(--f-texto);transition:transform .15s ease,background-color .15s ease}
.enlace-llamado:hover .enlace-llamado-texto{text-underline-offset:.42em}
.enlace-llamado:hover::after{transform:translateX(4px);background:var(--cobre-texto)}
.enlace-llamado:active::after{transform:translateX(4px) scale(.92)}
.enlace-llamado:focus-visible{outline:2px solid var(--cobre);outline-offset:4px}
.campo-negro .enlace-llamado,.escena .enlace-llamado{color:var(--hueso)}
.campo-negro .enlace-llamado-texto,.escena .enlace-llamado-texto{text-decoration-color:var(--cobre-claro)}
.campo-negro .enlace-llamado:focus-visible,.escena .enlace-llamado:focus-visible{outline-color:var(--cobre-claro)}
/* El cierre de Contacto: el mismo llamado, a tamaño de h2 y en color. */
.enlace-llamado.cierre-llamado{font-size:clamp(2rem,1.2rem + 3vw,3.5rem);color:var(--cobre-claro);gap:.35em}  /* 7,3:1 sobre #0B0B0B */
.enlace-llamado.cierre-llamado::after{font-size:.45em}

/* 3. Enlace o acción secundaria (sirve también en <button>). No va a WhatsApp. */
.enlace{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;
  font:600 1rem/1.2 var(--f-texto);color:var(--tinta);cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--tinta-2);text-decoration-thickness:2px;
  text-underline-offset:.3em}
.enlace:hover{text-decoration-color:var(--cobre)}
.enlace.grande{font:600 clamp(1.25rem,1rem + 1vw,1.5rem)/1.2 var(--f-titulo)}

/* ---- Campos de color ---- */
.seccion{position:relative;padding:calc(var(--sep) / 2) 0}
.cuerpo{position:relative;z-index:1;max-width:1280px;margin:0 auto;
  padding:0 var(--margen)}
.campo{background:var(--campo)}
.campo-negro{background:var(--negro);color:var(--hueso)}
.campo-negro a{color:var(--cobre-claro)}
.campo-negro .nota,.campo-negro .linea{color:var(--hueso-2)}
/* FX 3, el polvo: una capa por sección, entre su fondo y su contenido (que va en z-index 1).
   Su lienzo se pega a la pantalla (sticky) mientras se recorre la sección: las partículas quedan
   quietas respecto de la pantalla y el contenido pasa por encima, así que solo se ven donde no hay
   nada. clip-path recorta lo que sobra cuando la sección es más baja que la pantalla SIN crear un
   contenedor de scroll (overflow:hidden lo crearía y el lienzo dejaría de pegarse). Cuántas
   partículas lo dice --polvo-max (0 = ninguna, y taller.js ni la mira); por omisión, solo en los
   campos negros. */
.polvo{position:absolute;inset:0;z-index:0;pointer-events:none;clip-path:inset(0);
  color:var(--hueso);--polvo-max:0}
.campo-negro .polvo{--polvo-max:36}
.polvo canvas{position:sticky;top:0;display:block;width:100%;height:100vh}
/* Texto que se lee pero no se ve (la etiqueta de un dato con ícono, para el lector de pantalla). */
.oculto-visual{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* «Pausar movimiento» (WCAG 2.2.2): taller.js lo muestra cuando hay algo que se mueve solo. Estilo
   base para cualquier variante (el pie es siempre un campo negro); la minimalista lo acomoda. */
.mov-boton{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;margin-bottom:12px;
  font:inherit;font-size:.875rem;color:var(--hueso-2);background:none;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--hueso) 24%,transparent);border-radius:999px}
.mov-boton:hover{color:var(--hueso)}
.mov-boton:focus-visible{outline:2px solid var(--hueso);outline-offset:3px}
html.mov-pausado .ticker.corre .ticker-pista{animation-play-state:paused}
/* El lema del cliente en el pie, en lugar del nombre grande (ui_copy.contacto.lema). */
.pie .lema{position:relative;z-index:1;margin:32px 0 0;text-align:left}
.pie .lema blockquote{margin:0}
.pie .lema p{margin:0;font:600 clamp(2rem,1rem + 4vw,4.5rem)/1.02 var(--f-titulo);color:var(--hueso)}
.pie .lema p span{display:block}
/* Con comillas (lema firmado), la de apertura cuelga a la izquierda: las letras de los dos renglones
   quedan alineadas, como en una buena cita impresa. */
.pie .lema.con-comillas p > span:first-child{text-indent:-.4em}
.pie .lema figcaption{margin-top:12px;font-size:.875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cobre-claro)}
/* clip y no hidden: hidden crea un contenedor de scroll y el polvo de adentro no se pegaría. */
.cierre{position:relative;overflow:hidden;overflow:clip}

/* ---- Barra superior ---- */
.barra{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--alto-barra);
  background:var(--fondo);color:var(--tinta)}
.barra-in{height:100%;display:flex;align-items:center;gap:20px;
  padding:0 var(--margen)}
.marca{display:flex;align-items:center;justify-content:center;gap:10px;color:inherit;
  text-decoration:none;margin-right:auto;min-width:44px}
.marca-logo{height:44px;width:auto}
.marca-logo-claro{display:none}
.marca-nombre{font:600 1.15rem/1 var(--f-titulo);white-space:nowrap}
.nav-escritorio{display:none;gap:22px}
.nav-escritorio a{color:inherit;text-decoration:none;font-weight:600;font-size:.95rem;
  padding:8px 0}
.nav-escritorio a:hover{text-decoration:underline;text-underline-offset:6px}

/* Sobre la escena: el panel plano de la dirección (único scrim permitido),
   con texto hueso. Al soltar la escena, vuelve a fondo + tinta. */
.js-escena .barra:not(.solida){background:rgba(11,11,11,.82);color:var(--hueso)}
.js-escena .barra:not(.solida) .marca-logo-oscuro{display:none}
.js-escena .barra:not(.solida) .marca-logo-claro{display:block}
@media (prefers-color-scheme:dark){
  html[data-modo="sistema"] .marca-logo-oscuro{display:none}
  html[data-modo="sistema"] .marca-logo-claro{display:block}
}

.nav-movil summary{list-style:none;cursor:pointer;min-height:44px;display:flex;
  align-items:center;padding:0 4px;font-weight:600}
.nav-movil summary::-webkit-details-marker{display:none}
/* Solo la variante minimalista usa estos adornos del HTML compartido: acá no se ven. */
.menu-icono,.seccion-num,.piedra-franja,.piedra-signo,.servicio-rotulo{display:none}
.nav-lista{position:fixed;left:0;right:0;top:var(--alto-barra);bottom:0;
  background:var(--negro);padding:24px var(--margen);display:flex;flex-direction:column;
  gap:4px;overflow-y:auto}
/* Menú cerrado: la lista no existe para nadie (ni para el tacto ni para el lector).
   Sin esto, el navegador la deja medible como un enlace sin texto de 4 px. */
.nav-movil:not([open]) .nav-lista{display:none}
.nav-lista a{color:var(--hueso);text-decoration:none;font:600 1.75rem/1.2 var(--f-titulo);
  padding:14px 0}
@media (min-width:1024px){
  .nav-escritorio{display:flex}
  .nav-movil{display:none}
}
/* En el teléfono el llamado necesita su lugar: la marca queda en el logo. */
@media (max-width:520px){
  .marca-nombre{display:none}
}

/* ---- Ticker (FX 6) ---- */
.ticker{background:var(--fondo);color:var(--tinta);overflow-x:auto;max-width:100%;
  scrollbar-width:none}
.ticker::-webkit-scrollbar{display:none}
.ticker-pista{display:flex;width:max-content;list-style:none;padding:14px 0}
.ticker-pista li{font:400 clamp(1.25rem,1rem + 1vw,1.75rem)/1.2 var(--f-titulo);
  white-space:nowrap;padding-right:1ch}
.ticker-pista li::after{content:"·";padding-left:1ch}
.ticker-pista li:last-child::after{content:none}
.ticker.corre{overflow:hidden}
.ticker.corre .ticker-pista{animation:ticker 40s linear infinite}
.ticker.corre .ticker-pista li:last-child::after{content:"·"}
.ticker.corre:hover .ticker-pista,
.ticker.corre:focus-within .ticker-pista{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---- (b) Lo que hacemos ---- */
.servicios{list-style:none;margin:40px 0 0;padding:0;border-top:2px solid var(--borde)}
.servicios>li{border-bottom:2px solid var(--borde)}
.servicio-cabeza{display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:72px;padding:14px 0;cursor:pointer;list-style:none}
.servicio-cabeza::-webkit-details-marker{display:none}
.servicio-nombre{font-size:clamp(1.35rem,1.1rem + 1.2vw,2rem);line-height:1.15;transition:color .15s ease}
.servicio-cabeza:hover .servicio-nombre{color:var(--cobre-texto)}          /* 5,6:1 sobre #F2EFE9 */
.servicio-cabeza:focus-visible{outline:2px solid var(--cobre);outline-offset:4px;border-radius:var(--radius)}
/* El signo: un disco con «+» que pasa a «−» y se rellena de cobre al abrirse. */
.servicio-signo{position:relative;flex:none;width:44px;height:44px;border-radius:50%;
  background:var(--campo);transition:background-color .2s ease,transform .1s ease}
.servicio-signo::before,.servicio-signo::after{content:"";position:absolute;left:50%;top:50%;
  width:14px;height:2px;background:var(--tinta);translate:-50% -50%;transition:rotate .25s ease}
.servicio-signo::after{rotate:90deg}
.servicio[open] .servicio-signo{background:var(--cobre)}
.servicio[open] .servicio-signo::before,.servicio[open] .servicio-signo::after{background:#fff}
.servicio[open] .servicio-signo::after{rotate:0deg}
.servicio-cabeza:active .servicio-signo{transform:scale(.92)}
.servicio-cuerpo{display:grid;gap:20px;padding:4px 0 32px}
.servicio-foto{aspect-ratio:4/3;overflow:hidden;background:var(--campo);border-radius:var(--radius-foto)}
.servicio-foto img{width:100%;height:100%;object-fit:cover}
.servicio-texto p{max-width:42ch;margin:0 0 8px;color:var(--tinta-2)}
@media (min-width:800px){
  .servicio-cuerpo{grid-template-columns:240px 1fr;gap:32px;align-items:start}
  .servicio-foto{aspect-ratio:4/5}
}
/* Escritorio: la cabecera queda fija a la izquierda y la lista a la derecha. */
@media (min-width:1000px){
  .hacemos-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .hacemos-cabeza{position:sticky;top:calc(var(--alto-barra) + 40px)}
  .servicios{margin-top:0}
}
/* Apertura con altura animada, solo donde existe. Si no, se abre de golpe: nada se esconde. */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .servicio::details-content{block-size:0;overflow:clip;
    transition:block-size .32s cubic-bezier(.2,.7,.2,1),content-visibility .32s allow-discrete}
  .servicio[open]::details-content{block-size:auto}
}
@media print{.servicio::details-content{content-visibility:visible;block-size:auto}}

/* ---- (c) La piedra ---- */
.bandas{position:relative;z-index:1;margin-top:56px}
.banda{display:grid;grid-template-columns:1fr}
.banda-imagenes{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  aspect-ratio:16/9;background:var(--granito)}
.banda-imagenes figure{position:relative;margin:0;overflow:hidden}
.banda-imagenes img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banda-imagenes figcaption{position:absolute;left:0;bottom:0;max-width:100%;
  background:rgba(11,11,11,.82);color:var(--hueso);font-size:.875rem;line-height:1.4;
  padding:6px 12px}
.banda-texto{padding:32px var(--margen) 48px}
.banda-texto h3{margin-bottom:14px;font-size:clamp(1.75rem,1.2rem + 2vw,2.75rem)}
.banda-texto p{max-width:50ch;margin:0}
@media (min-width:900px){
  .banda{grid-template-columns:1fr 1fr;min-height:340px}
  .banda.foco{min-height:540px}
  .banda-imagenes{aspect-ratio:auto}
  /* Cada .banda vive dentro de su <details class="piedra-panel"> (los tres abiertos, sin franja) */
  .piedra-panel:nth-child(even) .banda-imagenes{order:2}
  .banda-texto{display:flex;flex-direction:column;justify-content:center;
    padding:48px var(--margen)}
}

/* ---- (d) Trabajos ---- */
.caso{display:grid;gap:24px;margin-top:56px}
.caso-texto p{max-width:42ch;margin:12px 0 0;color:var(--tinta-2)}
.caso-texto .enlace-llamado{margin-top:12px}
.caso-fotos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.caso-fotos figure,.caso-ad figure{margin:0}
.caso-fotos figure:first-child{grid-column:1 / -1}
.caso-fotos figure{position:relative;overflow:hidden;background:var(--campo);aspect-ratio:4/5;
  border-radius:var(--radius-foto)}
.caso-fotos figure:first-child{aspect-ratio:4/3}
.caso-fotos img,.caso-ad img{width:100%;height:100%;object-fit:cover}
.caso-ad{display:grid;grid-template-columns:1fr;gap:12px}
.caso-ad figure{background:var(--campo)}
.ad-antes{aspect-ratio:16/9;overflow:hidden}
.ad-despues{aspect-ratio:4/5;overflow:hidden}
.caso-ad figcaption{font-size:.875rem;line-height:1.4;padding:8px 10px;color:var(--tinta-2)}
.caso-ad .ad-antes,.caso-ad .ad-despues{display:flex;flex-direction:column}
.caso-ad figure img{flex:1;min-height:0}
@media (min-width:900px){
  .caso{grid-template-columns:5fr 7fr;gap:56px;align-items:center}
  .caso-ad{grid-template-columns:minmax(0,3.16fr) minmax(0,1fr);align-items:stretch}
  .ad-despues{aspect-ratio:auto}
}
.tilt{transition:transform .2s ease;will-change:transform}

.contador{font:400 clamp(1.25rem,1rem + 1vw,1.75rem)/1.2 var(--f-titulo);margin:64px 0 0}
.contador .cnt{font-weight:600;font-variant-numeric:tabular-nums}
/* Los filtros son texto: el activo lleva el subrayado cobre, no un bloque. */
.filtros{display:flex;gap:4px 24px;margin:24px 0 32px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.filtros button{flex:none;min-height:44px;padding:0;background:none;border:0;
  border-radius:0;color:var(--tinta-2);font:600 1rem/1 var(--f-texto);cursor:pointer;
  box-shadow:inset 0 -2px 0 transparent}
.filtros button:hover{color:var(--tinta)}
.filtros button[aria-pressed="true"]{color:var(--tinta);box-shadow:inset 0 -2px 0 var(--cobre)}

.galeria{list-style:none;display:grid;gap:12px;grid-template-columns:1fr;margin-top:24px}
.trabajo figure{margin:0;height:100%;display:flex;flex-direction:column}
.trabajo .marco{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--campo);
  border-radius:var(--radius-foto)}
.trabajo .marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.trabajo figcaption{font-size:.875rem;line-height:1.45;color:var(--tinta-2);padding:8px 0 0}
.trabajo figcaption a{color:var(--tinta-2);text-decoration:none}
.trabajo figcaption a:hover{text-decoration:underline;text-decoration-thickness:2px}
.mas-trabajos{display:flex;justify-content:center;margin-top:40px}
@media (min-width:700px){
  .galeria{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .galeria{grid-template-columns:repeat(3,1fr)}
  /* Una foto grande y dos chicas, y se repite: taller.js marca la grande
     entre las que se ven (nunca una de baja resolución). */
  .trabajo.grande{grid-column:span 2;grid-row:span 2}
  .trabajo.grande .marco{aspect-ratio:auto;flex:1 1 0;min-height:0}
}

/* ---- (e) Cómo trabajamos ---- */
.pasos{list-style:none;display:grid;gap:32px;margin:40px 0}
.paso p{margin:10px 0 0;max-width:30ch;color:var(--tinta-2)}
@media (min-width:700px){.pasos{grid-template-columns:repeat(2,1fr);gap:40px}}
@media (min-width:1000px){
  .pasos{grid-template-columns:repeat(4,1fr)}
}
/* Sin escalera: una línea cobre arriba de cada paso, que crece al aparecer.
   El texto del paso nunca depende de esto. */
.paso::before{content:"";display:block;height:2px;background:var(--cobre);margin-bottom:20px;
  transform-origin:0 50%}
.js-reveal .paso.rv::before{transition:transform .6s ease .1s}
.js-reveal .paso.rv:not(.visto)::before{transform:scaleX(0)}

/* ---- (f) Imagina tu mueble ---- */
.imaginar-grid{display:grid;gap:40px;margin-top:40px}
.campo-fila{display:grid;gap:6px;margin-bottom:20px}
.campo-fila label{font-weight:600}
.campo-fila select,.campo-fila textarea{width:100%;min-height:48px;padding:12px 14px;
  font:inherit;color:var(--tinta);background:var(--blanco);border:1px solid var(--borde);
  border-radius:var(--radius)}
.campo-fila textarea{resize:vertical}
.campo-fila [aria-invalid="true"]{border-color:var(--cobre-texto);outline:2px solid var(--cobre-texto)}
.trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.imaginar-error{margin:16px 0 0;color:var(--cobre-texto);font-weight:600}
.imaginar-marco{position:relative;aspect-ratio:1/1;background:var(--campo);overflow:hidden;
  border-radius:var(--radius-foto);
  display:grid;place-items:center;padding:24px;text-align:center}
.imaginar-marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.imaginar-estado{position:relative;margin:0;color:var(--tinta-2);max-width:32ch}
.imaginar-marco[data-estado="listo"] .imaginar-estado{display:none}
/* Con ejemplo: el marco nunca está vacío. El mensaje de «creando» o de error se
   pone encima en un panel plano, y en reposo no se pinta. */
.imaginar-marco[data-ejemplo]{aspect-ratio:4/3}
.imaginar-marco[data-ejemplo] .imaginar-estado{position:absolute;left:12px;right:12px;
  bottom:12px;z-index:1;max-width:none;padding:10px 14px;background:rgba(11,11,11,.82);
  color:var(--hueso)}
.imaginar-marco[data-ejemplo][data-estado="vacio"] .imaginar-estado{display:none}
.imaginar-wa{margin-top:16px}
@media (min-width:900px){
  .imaginar-grid{grid-template-columns:5fr 6fr;gap:64px;align-items:start}
  .imaginar-marco{aspect-ratio:4/3}
}

/* ---- (g) El legado ---- */
.legado-grid{display:grid;gap:40px;align-items:stretch}
.legado-campo{background:var(--granito);min-height:240px;display:flex;align-items:flex-end;
  padding:24px}
.legado-campo span{font:600 clamp(2.6rem,1.2rem + 5vw,5.5rem)/.98 var(--f-titulo);
  letter-spacing:-.02em;color:var(--hueso-2)}
.legado-foto img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-foto)}
/* Sin foto ni palabra no hay hueco: el texto ocupa el ancho, con su medida de lectura. */
.legado-solo,.legado-grid.legado-solo{grid-template-columns:1fr}
.legado-solo .frase-grande{max-width:42ch}
@media (min-width:900px){
  .legado-grid{grid-template-columns:1fr 1fr;gap:64px}
  .legado-campo{min-height:360px}
}

/* ---- Cifras (ui_copy.cifras) ----
   Solo existen si el cliente las declaró. Una fila simple dentro del bloque negro; la
   minimalista y la noche las visten aparte. El valor final ya está en el HTML. */
.cifras{list-style:none;display:flex;flex-wrap:wrap;gap:24px 56px;margin:48px 0 0;padding:24px 0 0;
  border-top:1px solid var(--hueso-2);grid-column:1 / -1}
.cifra{display:grid;gap:6px}
.cifra-valor{font:600 clamp(2rem,1.5rem + 2vw,3rem)/1 var(--f-titulo);font-variant-numeric:tabular-nums}
.cifra-valor .cnt{display:inline-block}
.cifra-etiqueta{font-size:.875rem;line-height:1.3;color:var(--hueso-2)}

/* ---- (h) Contacto y pie ---- */
.contacto-grid{display:grid;gap:48px}
.datos{display:grid;gap:14px;margin:28px 0}
.datos div{display:grid;gap:2px}
.datos dt{font-size:.875rem;color:var(--hueso-2)}
.datos dd{font-size:1.125rem}
.datos dd a{display:inline-block;min-height:44px;padding:10px 0}
/* La firma: el nombre grande y, si el cliente lo pidió, su logo en 3D al lado
   (theme.escenas_3d.contacto). El nombre se sigue midiendo con su columna
   (`100cqi`), así que con el logo se achica lo justo para dejarle espacio. */
.firma{align-self:end;display:grid;gap:16px;align-items:center}
.firma.con-logo{grid-template-columns:minmax(0,1fr) clamp(88px,26%,220px)}
.nombre-grande{container-type:inline-size;font-family:var(--f-titulo);font-weight:600;
  letter-spacing:-.02em;color:var(--hueso)}
.nombre-grande span{display:block;font-size:clamp(2.6rem,1.2rem + 7vw,6rem);line-height:.95}
@supports (width:1cqi){
  .nombre-grande span{font-size:calc(100cqi / (var(--letras,8) * .62))}
}
/* El nombre grande se fue al pie: el contacto queda en una sola columna. */
/* El logo en 3D. El logo plano de abajo es el respaldo: se va cuando el 3D ya
   dibujó su primer cuadro (el motor marca .con-escena-3d), nunca antes.
   Los colores del metal se toman en :root, donde --negro todavía es el negro
   de la marca: la variante minimal lo redefine como blanco dentro del cierre,
   y ahí el logo saldría blanco sobre blanco. */
:root{--logo-1:var(--negro);--logo-2:var(--cobre)}
.logo-3d{position:relative;aspect-ratio:4/5;display:grid;place-items:center;
  --escena-1:var(--logo-1);--escena-2:var(--logo-2);--escena-fondo:var(--negro)}
.logo-3d-plano{grid-area:1/1;width:auto;max-width:72%;max-height:72%;
  transition:opacity .5s cubic-bezier(.22,1,.36,1)}
/* Sobre el negro del cierre va el logo claro, igual que en la barra. */
.logo-3d-oscuro{display:none}
.logo-3d.con-escena-3d .logo-3d-plano{opacity:0}
/* Un halo tenue detrás del 3D: sobre el negro del cierre, la casa negra se
   recorta contra él en vez de perderse. Aparece con el lienzo, no antes. */
.logo-3d::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(closest-side,var(--halo-logo,rgba(242,239,233,.1)),transparent 75%);
  opacity:0;transition:opacity .7s cubic-bezier(.22,1,.36,1)}
.logo-3d.con-escena-3d::before{opacity:1}
@media (prefers-reduced-motion:reduce){.logo-3d-plano,.logo-3d::before{transition:none}}
.pie{position:relative;overflow:hidden;overflow:clip;text-align:center;color:var(--hueso-2);
  font-size:.875rem;line-height:1.45;padding:0 var(--margen) 40px}
.pie p{position:relative;z-index:1;margin:0 0 4px}
.pie .nombre-grande{position:relative;z-index:1;margin-top:32px;text-align:left}
.pie .polvo{color:var(--hueso)}

/* ---- FX Core ---- */
/* FX 5: barra de progreso y puntos laterales. */
#progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--cobre);
  transform:scaleX(0);transform-origin:0 50%;z-index:60;pointer-events:none}
/* Con la escena armada (data-una-vez), la barra que medía el armado se va. */
#progress.fuera{opacity:0;transition:opacity .6s ease}
.puntos{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:40;
  display:none;flex-direction:column;gap:14px}
.punto{display:block;width:12px;height:12px;border-radius:50%;border:2px solid var(--tinta-2);
  background:transparent;box-sizing:border-box}
.punto[aria-current="true"]{background:var(--cobre);border-color:var(--cobre)}
/* Sobre lo oscuro (la escena, la piedra, el cierre) el borde claro se lee. */
.puntos.sobre-oscuro .punto:not([aria-current="true"]){border-color:var(--hueso-2)}
@media (min-width:1024px){.puntos{display:flex}}

/* FX 2: cursor. Solo con puntero fino; taller.js pone `js-cursor`. */
.cursor-punto,.cursor-aro{display:none;position:fixed;left:0;top:0;pointer-events:none;
  z-index:9999;border-radius:50%;transform:translate(-100px,-100px)}
.js-cursor .cursor-punto,.js-cursor .cursor-aro{display:block}
.cursor-punto{width:6px;height:6px;background:var(--cobre)}
.cursor-aro{width:28px;height:28px;border:1.5px solid var(--cobre);opacity:.6;
  transition:scale .18s ease}
.cursor-aro.grande{scale:1.57}

/* FX 6: aparición. El estado oculto SOLO existe con `html.js-reveal`, que
   taller.js pone cuando el observador ya está armado y la red de seguridad
   corriendo. Sin JavaScript, todo está visible. */
.js-reveal .rv{transition:opacity .4s ease,transform .4s ease}
.js-reveal .rv:not(.visto){opacity:0;transform:translateY(16px)}

/* ---- Movimiento reducido: todo legible y quieto ---- */
@media (prefers-reduced-motion:reduce){
  .llamado,.llamado::after,.enlace-llamado,.enlace-llamado::after,.enlace-llamado-texto,.tilt,
  .servicio::details-content,.servicio-signo,.servicio-signo::before,.servicio-signo::after{transition:none}
  .ticker.corre .ticker-pista{animation:none}
}