/* =========================================================
   Casa Emes — styles.css
   Índice: 1 Base · 2 Header · 3 Hero (casa emes) · 4 Hero intro
   5 Botones · 6 Secciones · 7 Trabajos · 8 Servicios · 9 Proceso
   10 Nosotros · 11 FAQ · 12 Contacto y footer · 13 Galería · 13b Presupuesto
   14 Aparición · 15 Responsive · 16 Movimiento reducido
   ========================================================= */

/* ---------- 1. Base ---------- */
:root{
  --bg:#FFFFFF;--surface:#F6F6F4;--ink:#111111;--muted:#5C5C5C;--line:#E1E1DE;
  --accent:#4C7A62;--on-accent:#FFFFFF;
  --oak:#C79A6B;--white:#ECECE8;--graph:#1A1A1A;--sage:#8FB09B;--steel:#7A7F82;
  --header-h:0px;
  --f-head:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:light;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
/* Los links del menú dejan lugar para la barra fija */
html{scroll-padding-top:calc(var(--header-h,0px) + env(safe-area-inset-top,0px));scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;font-weight:300;line-height:1.6}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:var(--f-head);line-height:1.08;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:300;letter-spacing:-.035em}
h2{font-size:clamp(1.7rem,3.5vw,2.4rem);font-weight:300;margin-bottom:12px}
h3{font-size:1.15rem;font-weight:400;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:62ch}

/* ---------- 2. Header y menú ---------- */
/* Barra fija arriba al hacer scroll */
header{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  transition:border-color .4s ease,background .4s ease}
/* Sobre la portada: sin línea y fondo blanco pleno (solo se ve el logo grande y el menú) */
header.is-top{border-bottom-color:transparent;background:var(--bg)}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:18px;padding-bottom:18px;flex-wrap:wrap}
.logo{font-family:var(--f-head);font-weight:300;font-size:1.4rem;text-decoration:none;letter-spacing:0;transition:opacity .4s ease,visibility .4s}
/* Mientras se lee el "casa emes" grande del hero, el logo chico se oculta */
.logo.is-hidden{opacity:0;visibility:hidden}
nav{font-size:.95rem}
nav a{text-decoration:none;color:var(--muted)}
nav a:hover{color:var(--ink)}
/* Menú a pantalla completa (se abre debajo de la barra).
   Links grandes en Helvetica liviana; al pasar el mouse aparece debajo de la
   palabra una cota verde que la mide (en px). */
header nav{
  position:absolute;top:100%;left:0;right:0;
  height:calc(100vh - var(--header-h,64px));height:calc(100svh - var(--header-h,64px));
  display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;gap:0;
  padding:clamp(24px,5vh,56px) max(24px,calc((100% - 1072px)/2)) 28px;
  background:var(--bg);border-top:1px solid var(--line);
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .55s cubic-bezier(.7,0,.2,1),visibility 0s linear .55s;
}
header nav.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .6s cubic-bezier(.7,0,.2,1)}
html.nav-lock{overflow:hidden}
.nav-links{display:flex;flex-direction:column;justify-content:center}
header nav .nav-links a{
  display:flex;align-items:baseline;gap:18px;padding:clamp(4px,1.2vh,12px) 0 clamp(18px,2.6vh,28px);
  text-decoration:none;color:var(--ink);
  opacity:0;transform:translateY(24px);
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1),color .25s ease;
}
header nav.is-open .nav-links a{opacity:1;transform:none}
header nav.is-open .nav-links a:nth-child(1){transition-delay:.18s}
header nav.is-open .nav-links a:nth-child(2){transition-delay:.23s}
header nav.is-open .nav-links a:nth-child(3){transition-delay:.28s}
header nav.is-open .nav-links a:nth-child(4){transition-delay:.33s}
header nav.is-open .nav-links a:nth-child(5){transition-delay:.38s}
.nav-n{font-size:.85rem;color:var(--accent);font-weight:400;width:24px;flex:none}
.nav-t{position:relative;font-family:var(--f-head);font-weight:300;font-size:clamp(2rem,4.6vw,4rem);line-height:1;letter-spacing:-.035em;white-space:nowrap}
html.nav-lock .float-stack{opacity:0;pointer-events:none}
@media (max-width:760px){.nav-foot{flex-direction:column;gap:4px}}
/* Menú: "Instagram" pasa a "Seguinos en Instagram" al pasar el mouse (con los colores de Instagram) */
.ig-swap{display:inline-grid;overflow:hidden;vertical-align:bottom;justify-items:start}
.ig-swap > span{grid-area:1/1;white-space:nowrap;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s ease}
.ig-swap > span + span{transform:translateY(100%);opacity:0}
a:hover > .ig-swap > span:first-child,a:focus-visible > .ig-swap > span:first-child{transform:translateY(-100%);opacity:0}
a:hover > .ig-swap > span + span,a:focus-visible > .ig-swap > span + span{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.ig-swap > span{transition:none}}
header nav .nav-links a:hover .nav-t,header nav .nav-links a:focus-visible .nav-t{color:var(--accent)}
/* La cota: línea con remates, se dibuja de izquierda a derecha y lleva la medida */
.nav-cota{position:absolute;left:0;right:0;top:calc(100% + 10px);height:2px;color:var(--accent);pointer-events:none}
.nav-cota i{position:absolute;inset:0;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.nav-cota::before,.nav-cota::after{content:"";position:absolute;top:-6px;width:2px;height:14px;background:currentColor;opacity:0;transition:opacity .2s ease}
.nav-cota::before{left:0}.nav-cota::after{right:0;transition-delay:0s}
.nav-cota b{position:absolute;left:50%;top:8px;transform:translateX(-50%);font-family:var(--f-body);font-size:.75rem;font-weight:400;letter-spacing:0;white-space:nowrap;opacity:0;transition:opacity .3s ease}
header nav .nav-links a:hover .nav-cota i,header nav .nav-links a:focus-visible .nav-cota i{transform:scaleX(1)}
header nav .nav-links a:hover .nav-cota::before,header nav .nav-links a:focus-visible .nav-cota::before{opacity:1}
header nav .nav-links a:hover .nav-cota::after,header nav .nav-links a:focus-visible .nav-cota::after{opacity:1;transition-delay:.35s}
header nav .nav-links a:hover .nav-cota b,header nav .nav-links a:focus-visible .nav-cota b{opacity:1;transition-delay:.3s}
.nav-foot{grid-column:1/-1;margin:0;max-width:none;display:flex;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.nav-foot a{color:var(--ink);text-decoration:none}
.nav-foot a:hover{color:var(--accent)}
.nav-toggle:hover span,.nav-toggle.is-open span{background:var(--accent)}

.nav-toggle{
  display:flex;width:38px;height:38px;border:0;background:none;cursor:pointer;padding:0;
  -webkit-appearance:none;appearance:none;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .25s ease,opacity .25s ease}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 3. Hero "casa emes" ---------- */
.ce-hero{
  position:relative;
  min-height:calc(100vh - var(--header-h,0px));
  min-height:calc(100svh - var(--header-h,0px));
  display:flex;align-items:center;justify-content:center;
  padding:32px 24px 84px;text-align:center;
}
.ce-hero .ce-title{
  margin:0;font-family:var(--f-head);font-weight:300;color:var(--ink);
  font-size:clamp(3.2rem,min(19vw,42vh),19rem);
  line-height:.84;letter-spacing:-.04em;
}
.ce-hero .ce-row{display:block}
.ce-hero .ce-m{position:relative;display:inline-block}

.ce-hero .ce-cota{
  position:absolute;left:0;right:0;top:calc(100% + 1.05rem);height:0;
  color:var(--accent);font-family:var(--f-body);
  font-size:clamp(.85rem,1.9vw,1.3rem);font-weight:400;line-height:1;letter-spacing:0;
}
.ce-hero .ce-cota i{position:absolute;display:block;background:currentColor}
.ce-hero .ce-line{left:0;right:0;top:0;height:2px;transform:scaleX(0);transform-origin:center;
  transition:transform .5s cubic-bezier(.65,0,.25,1);transition-delay:.25s}
.ce-hero .ce-ext{top:-1rem;height:2rem;width:2px;transform:scaleY(0);transform-origin:center;transition:transform .35s ease-out}
.ce-hero .ce-ext.ce-l{left:0}
.ce-hero .ce-ext.ce-r{right:0}
.ce-hero .ce-tick{top:-1px;width:1rem;height:2px;opacity:0;transition:opacity .25s ease-out;transition-delay:.55s}
.ce-hero .ce-tick.ce-l{left:0;transform:translate(-50%,0) rotate(-45deg)}
.ce-hero .ce-tick.ce-r{right:0;transform:translate(50%,0) rotate(-45deg)}
.ce-hero .ce-cota.ce-visible .ce-ext{transform:scaleY(1)}
.ce-hero .ce-cota.ce-visible .ce-line{transform:scaleX(1)}
.ce-hero .ce-cota.ce-visible .ce-tick{opacity:1}

.ce-hero .ce-label{
  position:absolute;left:50%;top:.9rem;white-space:nowrap;
  transform:translate(-50%,.6em);opacity:0;transition:opacity .3s ease,transform .3s ease;
}
.ce-hero .ce-label.ce-in{opacity:1;transform:translate(-50%,0)}

.ce-hero .ce-scroll{
  position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  color:var(--accent);opacity:.85;pointer-events:none;transition:opacity .3s ease;
}
.ce-hero .ce-scroll.is-hidden{opacity:0}
.ce-hero .ce-scroll svg{width:1.3rem;height:1.3rem;display:block;animation:ce-cue-bounce 1.8s ease-in-out infinite}
@keyframes ce-cue-bounce{
  0%,100%{transform:translateY(0);opacity:.45}
  50%{transform:translateY(.4rem);opacity:.9}
}

/* ---------- 4. Hero intro: 30% texto / 70% foto ---------- */
.hero{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,7fr);
  gap:140px;align-items:center;
  padding:56px 24px 72px;
}
.hero h2{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.hero p{font-size:1.05rem;color:var(--muted);margin-top:20px}
.plan-photo{
  display:block;width:100%;max-width:100%;height:auto;
  aspect-ratio:4/3;object-fit:cover;border-radius:15px;
}

/* ---------- 5. Botones ---------- */
.btns{display:flex;gap:22px;flex-wrap:wrap;margin-top:48px}
.btn{
  display:inline-block;padding:13px 22px;border-radius:4px;text-decoration:none;font-weight:500;
  border:1.5px solid var(--ink);transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn.main{background:var(--ink);color:var(--bg)}
.btn.main:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.ghost{color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bg)}

/* Botones del hero: texto limpio. La cota aparece solo al pasar el mouse
   (o con el foco del teclado); en pantallas táctiles, mientras se toca el botón. */
.hero .btns{gap:4px 32px;margin-top:38px}
.btn-cota{position:relative;display:inline-block;padding:10px 4px 20px;border:0;border-radius:0;background:none;color:var(--ink);
  font:inherit;font-weight:500;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn-cota::before,.btn-cota::after{content:"";position:absolute;left:-6px;right:-6px;pointer-events:none}
.btn-cota::before{bottom:5px;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:center;
  transition:transform .4s cubic-bezier(.65,0,.25,1) .1s}
.btn-cota::after{bottom:0;height:11px;border-left:1.5px solid var(--accent);border-right:1.5px solid var(--accent);
  transform:scaleY(0);transform-origin:center;transition:transform .25s ease-out}
.btn-cota:hover::before,.btn-cota:focus-visible::before{transform:scaleX(1)}
.btn-cota:hover::after,.btn-cota:focus-visible::after{transform:scaleY(1)}
.btn-cota:active::before{transform:scaleX(1)}
.btn-cota:active::after{transform:scaleY(1)}
/* Acción principal del hero en color de acento */
.hero .btn-cota:not(.sec){color:var(--accent)}

/* Botones con ícono (contacto): misma cota, siempre dibujada */
.btn-cota.ico{display:inline-flex;align-items:center;gap:10px}
.btn-cota.ico svg{width:20px;height:20px;flex:none;color:var(--accent)}
/* Contacto: links limpios con ícono, sin cota */
.contact .btn-cota{padding:8px 0}
.contact .btn-cota::before,.contact .btn-cota::after{display:none}
.contact .btn-cota:hover{color:var(--accent)}

/* Colores de Instagram (degradado oficial) */
.ig-text:hover{background:linear-gradient(90deg,#F58529,#DD2A7B,#8134AF,#515BD4);-webkit-background-clip:text;background-clip:text;color:transparent!important}

/* Tarjeta de Instagram dentro de la grilla de Trabajos */
.work-ig .work-btn{text-decoration:none}
/* Contorno con el degradado de Instagram */
.work.work-ig .art{
  border:2px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
             linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5) border-box;
}
.ig-inner{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--accent)}
.ig-inner svg{width:56px;height:56px;transition:transform .3s ease}
.ig-handle{font-size:1.15rem;font-weight:400;color:var(--ink)}
.ig-go{font-size:.9rem;font-weight:500}
.work.work-ig .work-btn:hover .art,.work.work-ig .work-btn:focus-visible .art{
  border-color:transparent;
  background:linear-gradient(#FFF6F3,#FFF6F3) padding-box,
             linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5) border-box;
}
.work-ig .work-btn:hover .t{color:#D62976}
.ig-go{background:linear-gradient(90deg,#F58529,#DD2A7B,#8134AF);-webkit-background-clip:text;background-clip:text;color:transparent}
.work-ig .work-btn:hover .ig-inner svg{transform:scale(1.08)}

/* ---------- 5b. WhatsApp flotante ---------- */
/* Botones flotantes (Instagram arriba, WhatsApp abajo) con sombras suaves.
   En reposo son grises; al pasar el mouse el logo toma el color de su red
   y al tocarlos se hunden con el fondo de ese color. */
.float-stack{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:40;
  display:flex;flex-direction:column;gap:14px;
  transition:opacity .3s ease,transform .3s ease;
}
.float-stack.is-hidden{opacity:0;transform:translateY(16px);pointer-events:none}
.wa-float,.ig-float{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#F3F3F1;color:#6B6B6B;
  box-shadow:inset 3px 3px 5px rgba(255,255,255,.95),inset -4px -4px 8px rgba(17,17,17,.09),0 14px 28px -12px rgba(17,17,17,.4);
  transition:color .25s ease,background .25s ease,box-shadow .25s ease;
}
.wa-float svg,.ig-float svg{width:27px;height:27px}
.wa-float:hover,.wa-float:focus-visible{color:#25D366}
.wa-float:active{color:#fff;background:#25D366;box-shadow:inset 4px 4px 10px rgba(0,0,0,.22),inset -4px -4px 10px rgba(255,255,255,.25)}
.ig-float svg{stroke:currentColor}
.ig-float:hover svg,.ig-float:focus-visible svg{stroke:url(#ig-grad)}
.ig-float:hover svg .dot,.ig-float:focus-visible svg .dot{fill:url(#ig-grad)}
.ig-float:active{color:#fff;background:linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5);
  box-shadow:inset 4px 4px 10px rgba(0,0,0,.22),inset -4px -4px 10px rgba(255,255,255,.2)}
.ig-float:active svg{stroke:#fff}
.ig-float:active svg .dot{fill:#fff}
/* Al pasar el mouse el botón se estira hacia la izquierda y muestra el texto
   ("Seguinos" / "Escribinos") con el logo a la derecha, en el color de su red. */
.float-stack{align-items:flex-end}
.wa-float,.ig-float{
  width:auto;min-width:56px;padding:0 14.5px;border-radius:999px;
  display:flex;align-items:center;justify-content:flex-end;text-decoration:none;
}
.wa-float svg,.ig-float svg{flex:none}
.fl-label{
  max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  font-size:.95rem;font-weight:500;letter-spacing:-.01em;
  transition:max-width .4s cubic-bezier(.2,.7,.2,1),margin .4s cubic-bezier(.2,.7,.2,1),opacity .25s ease;
}
.wa-float:hover .fl-label,.wa-float:focus-visible .fl-label,
.ig-float:hover .fl-label,.ig-float:focus-visible .fl-label{max-width:140px;margin:0 10px 0 8px;opacity:1}
/* Colores de cada red en el texto */
.wa-float .fl-label{color:#128C7E}
.ig-float .fl-label{background:linear-gradient(90deg,#F58529,#DD2A7B,#8134AF);-webkit-background-clip:text;background-clip:text;color:transparent}
.wa-float:active .fl-label{color:#fff}
.ig-float:active .fl-label{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff}
@media (prefers-reduced-motion:reduce){.fl-label{transition:none}}

/* ---------- 6. Secciones comunes ---------- */
section{padding:72px 0;border-top:1px solid var(--line)}
.intro{color:var(--muted);margin-bottom:36px}
.sub{margin:48px 0 20px;font-size:1.3rem}
.sub:first-of-type{margin-top:0}
/* Divisor interno (70%, más corto que el de cambio de sección) */
.sub-divider{width:70%;margin:64px auto 48px;border:0;border-top:1px solid var(--line)}
.sub-divider + .sub{margin-top:0}

/* ---------- 7. Trabajos ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid.wide{grid-template-columns:repeat(2,1fr)}

/* Carrusel (más de 4 trabajos): páginas de 4 que se deslizan en horizontal */
.grid.is-scroller{position:relative;display:flex;gap:28px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 0;outline:none}
.grid.is-scroller::-webkit-scrollbar{display:none}
.grid.is-scroller.is-animating{scroll-snap-type:none}
.grid.is-scroller > .page{flex:0 0 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;align-content:start;scroll-snap-align:start}
.grid.wide.is-scroller > .page{grid-template-columns:repeat(2,minmax(0,1fr))}
.sub-row{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:0 0 20px}
.sub-row .sub{margin:0}
.sc-nav{display:flex;align-items:center;gap:10px}
.sc-count{margin-right:6px;color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
/* El contador no se muestra (solo flechas); queda disponible para lectores de pantalla */
.sc-count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sc-hint{display:none;color:var(--accent);font-size:.9rem;font-weight:500;transition:opacity .4s ease}
.sc-hint.is-gone{opacity:0}
.sc-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font:inherit;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px;
  transition:border-color .2s ease,color .2s ease,background .2s ease,opacity .2s ease}
.sc-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:rgba(76,122,98,.06)}
.sc-btn:disabled{opacity:.35;cursor:default}

.work-btn{display:block;width:100%;padding:0;margin:0;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.work .art{
  display:grid;place-items:center;aspect-ratio:4/5;overflow:hidden;
  background:var(--bg);border:1px solid var(--line);transition:border-color .2s ease;
}
.grid.wide .art{aspect-ratio:3/2}
.work .art img{width:100%;height:100%;object-fit:cover;display:block}
/* Las fotos de las tarjetas no se pueden seleccionar (ni el texto de una portada con Texto en vivo):
   el clic siempre va al botón de la tarjeta */
.work-btn,.wc-open{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.work .art img,.wc-track img{pointer-events:none;-webkit-user-select:none;user-select:none}
.gallery-image img{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Tarjeta sin fotos todavía: papel de plano (cuadrícula fina y gruesa) con la planta
   de una casa que se dibuja, queda unos segundos y se borra, en ciclo */
.ph,.gallery-ph{
  position:absolute;inset:0;margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--muted);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  background-color:#FBFBF9;
  background-image:linear-gradient(rgba(76,122,98,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(76,122,98,.10) 1px,transparent 1px),
                   linear-gradient(rgba(76,122,98,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(76,122,98,.05) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,8px 8px,8px 8px;
}
.ph-plan{width:min(56%,240px);height:auto;color:var(--accent)}
.ph-placard{width:auto;height:min(52%,150px)}
.ph-plan path{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:ph-draw 6s ease-in-out infinite}
@keyframes ph-draw{0%{stroke-dashoffset:var(--len)}35%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:var(--len)}}
@media (prefers-reduced-motion:reduce){.ph-plan path{animation:none;stroke-dashoffset:0}}
.gallery-ph{position:relative;min-height:320px;width:100%;border-radius:4px}
.work .art{position:relative}/* Flechas discretas sobre la foto de la tarjeta (interiorismo) */
.work{position:relative}
.art-ui{position:absolute;left:0;right:0;top:0;aspect-ratio:4/5;pointer-events:none;z-index:2}
.grid.wide .art-ui{aspect-ratio:3/2}
.art-nav{position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--ink);cursor:pointer;pointer-events:auto;
  opacity:0;transition:opacity .25s ease,background .2s ease,transform .2s ease}
.art-nav.prev{left:10px}.art-nav.next{right:10px}
.art-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.art-nav:hover{background:#fff}
.art-nav:active{transform:scale(.92)}
.art-count{position:absolute;right:10px;bottom:10px;padding:2px 8px;border-radius:999px;background:rgba(17,17,17,.38);color:#fff;font-size:.7rem;letter-spacing:.04em;opacity:0;transition:opacity .25s ease}
.work:hover .art-nav,.work:hover .art-count,.art-nav:focus-visible,.art-ui:focus-within .art-nav,.art-ui:focus-within .art-count{opacity:1}
/* En pantallas táctiles no hay hover: se ven siempre, suaves */
@media (hover:none){.art-nav{opacity:.8;width:30px;height:30px;margin-top:-15px}.art-count{opacity:1}}
.work .art img.is-fit{object-fit:contain;background:#F6F6F4}
.work .art img.is-plan{background:#fff}

.wc-track{position:relative}
.work .t{display:block;margin-top:14px;font-size:1.15rem;font-weight:400;letter-spacing:-.01em;transition:color .2s ease}
.work .s{display:block;color:var(--muted);font-size:.95rem}
/* Rol del trabajo (ej. Dirección técnica de obra), arriba del título */
.work .rol{display:block;margin-top:14px;font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.work .rol + .t{margin-top:4px}
/* Tarjeta "próximo proyecto": siempre al final, no se abre */
.work-next .work-btn{cursor:default}
.work-next:hover{transform:none}
.work-btn:hover .art,.work-btn:focus-visible .art{border-color:var(--accent)}
.work-btn:hover .t,.work-btn:focus-visible .t{color:var(--accent)}

/* ---------- 7b. Tarjetas de mobiliario ----------
   Tarjeta blanca con la foto de portada redondeada adentro (las demás se ven en la galería),
   etiquetas (a medida + plazo de entrega) y botón "Ver fotos" que abre la galería.
   La tarjeta de Instagram usa la misma forma para que la grilla se vea pareja. */
.work-card,.work.work-ig{
  background:var(--bg);border-radius:26px;padding:8px 8px 14px;
  box-shadow:0 1px 2px rgba(17,17,17,.05),0 18px 40px -24px rgba(17,17,17,.28);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
}
.work-card:hover,.work.work-ig:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(17,17,17,.05),0 26px 50px -24px rgba(17,17,17,.34)}
.wc-media{position:relative;border-radius:19px;overflow:hidden;background:var(--surface)}
.wc-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.wc-track{display:flex;aspect-ratio:1/1;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.wc-open:hover .wc-track img{transform:scale(1.04)}
.wc-track img{transition:transform .6s cubic-bezier(.2,.7,.2,1);flex:0 0 100%;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.wc-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:4px}
.wc-dots{width:max-content;margin:0 auto;padding:5px 7px;border-radius:999px;background:rgba(17,17,17,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wc-dots button{width:6px;height:6px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.55);
  cursor:pointer;transition:width .3s ease,background .3s ease}
.wc-dots button[aria-current="true"]{width:18px;background:#fff}
/* Área de toque más grande para los puntitos en el celular */
.wc-dots button{position:relative}
.wc-dots button::after{content:"";position:absolute;inset:-8px -3px}
.work-card{display:flex;flex-direction:column}
.wc-body{flex:1;display:flex;flex-direction:column;padding:14px 6px 0}
.wc-tags{margin-bottom:14px}
.wc-cta{margin-top:auto!important}
.work-card .t{margin:0;font-size:1.1rem;font-weight:500;letter-spacing:-.01em}
.work-card .s{margin:4px 0 0;color:var(--muted);font-size:.92rem;line-height:1.4}
.wc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.wc-tags span{padding:4px 10px;border-radius:999px;background:var(--surface);font-size:.75rem;font-weight:400;color:#4A4A4A}
.wc-tags span:first-child{background:rgba(76,122,98,.12);color:var(--accent)}
.wc-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:12px;
  border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink);cursor:pointer;
  font:inherit;font-size:.95rem;font-weight:400;
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.wc-count{min-width:22px;padding:1px 7px;border-radius:999px;background:var(--surface);font-size:.75rem;color:var(--muted);
  transition:background .2s ease,color .2s ease}
.wc-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.wc-cta:hover .wc-count{background:rgba(255,255,255,.2);color:var(--on-accent)}
.wc-cta:active{transform:scale(.97)}
/* Instagram con la misma forma: el recuadro con degradado queda redondeado */
.work.work-ig .art{border-radius:19px}
.work.work-ig .t,.work.work-ig .s{padding:0 6px}
.grid.is-scroller{padding:4px 4px 28px}
@media (prefers-reduced-motion:reduce){.work-card,.work.work-ig,.wc-track{transition:none}}

/* ---------- 8. Servicios ---------- */
.mats{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.mat{background:var(--surface);border:1px solid var(--line);padding:28px}
.mat p{color:var(--muted);margin:0}

.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:stretch}
/* La foto ocupa exactamente la altura del texto de la derecha */
.svc-media{position:relative;min-height:280px}
.svc-media{border-radius:15px;overflow:hidden}
.service-photo{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;border-radius:15px;
}
/* Carrusel: con 2+ fotos, se ve solo la activa (fundido) */
.svc-media.is-carousel .service-photo{opacity:0;transition:opacity 1.2s ease}
.svc-media.is-carousel .service-photo.is-active{opacity:1}
.svc-dots{position:absolute;left:0;right:0;bottom:14px;z-index:1;display:flex;justify-content:center;gap:8px}
.svc-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:background .2s ease,transform .2s ease}
.svc-dots button[aria-current="true"]{background:#fff;transform:scale(1.25)}
.svc-row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 16px;padding:26px 0;border-top:1px solid var(--accent)}
.svc-row:last-child{border-bottom:1px solid var(--accent)}
.svc-row + .svc-row{border-top:0;padding-top:8px}
.svc-row .n{color:var(--accent);font-weight:500;font-size:.95rem;padding-top:.45rem}
.svc-row h3{font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:300;letter-spacing:-.02em;margin-bottom:10px}
.svc-row p{color:var(--muted);margin:0 0 12px;max-width:52ch}
.svc-row .tg{color:var(--accent);font-size:.9rem;font-weight:400}
/* Arquitectura: mención secundaria, sin competir con los dos servicios principales */
.svc-extra{margin:22px 0 0;font-size:.95rem;color:var(--muted);max-width:none}
.svc-extra strong{display:block;font-weight:500;color:var(--ink);margin-bottom:2px}
.svc-extra a{color:var(--accent);font-weight:500;text-underline-offset:3px;white-space:nowrap}
.svc-extra a::after{content:" →"}

/* ---------- 9. Cómo trabajamos ---------- */
/* Recorrido con línea de cota: número arriba, línea con marcas, contenido abajo */
.process{list-style:none;margin:56px 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 40px}
.process::before{ /* línea de cota */
  content:"";position:absolute;left:0;right:0;top:52px;height:1.5px;background:var(--accent);
  transform-origin:left center;transition:transform 1.6s cubic-bezier(.65,0,.25,1) .2s}
.process::after{ /* extensión final de la cota */
  content:"";position:absolute;right:0;top:44px;width:1.5px;height:17px;background:var(--accent);
  transition:opacity .3s ease 1.7s}
.step{position:relative;display:flex;flex-direction:column}
.step p{margin-bottom:18px!important}
.step .step-get{margin-top:auto;flex:1 0 auto}
.step::before{ /* extensión de cada etapa */
  content:"";position:absolute;left:0;top:44px;width:1.5px;height:17px;background:var(--accent);transition:opacity .3s ease}
.step::after{ /* marca diagonal, como en el logo */
  content:"";position:absolute;left:0;top:52px;width:13px;height:1.5px;background:var(--accent);
  transform:translate(-50%,0) rotate(-45deg);transition:opacity .3s ease}
.step-n{display:block;height:40px;font-size:clamp(1.9rem,2.6vw,2.4rem);font-weight:300;line-height:1;letter-spacing:-.02em;color:var(--accent)}
/* Como en los planos: cada número centrado en su tramo de cota (de su marca a la siguiente) */
.step-n{width:calc(100% + 40px);text-align:center}
.step:last-child .step-n{width:100%}
.step h3{margin:36px 0 10px;font-size:1.35rem;font-weight:400}
.step p{color:var(--muted);margin:0;font-size:.98rem}
.step-free{font-weight:500;color:var(--accent)}
.step-get{margin-top:18px;padding:14px 16px;background:var(--surface);border-radius:10px;font-size:.92rem;line-height:1.5;color:var(--ink)}
.step-get small{display:block;margin-bottom:4px;font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

/* Animación: la cota se dibuja y las marcas aparecen en orden */
.js #forma:not(.is-in) .process::before{transform:scaleX(0)}
.js #forma:not(.is-in) .process::after,
.js #forma:not(.is-in) .step::before,
.js #forma:not(.is-in) .step::after{opacity:0}
.step:nth-child(1)::before,.step:nth-child(1)::after{transition-delay:.25s}
.step:nth-child(2)::before,.step:nth-child(2)::after{transition-delay:.6s}
.step:nth-child(3)::before,.step:nth-child(3)::after{transition-delay:1s}
.step:nth-child(4)::before,.step:nth-child(4)::after{transition-delay:1.35s}

/* Cierre con diferencial y acción */
.process-cta{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;
  margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.process-cta p{margin:0;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink);max-width:46ch}
.process-cta .btn-cota{color:var(--accent);flex:none}

/* ---------- 10. Nosotros ---------- */
.nosotros{background:#111111;color:#ECECE8}
.nosotros h2,.nosotros h3{color:#ECECE8}
.nosotros .intro,.nosotros .people p{color:#B8B8B3}
.nos-lead{font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.5;max-width:52ch;margin-bottom:clamp(64px,9vw,112px)}
.nos-lead strong{color:#ECECE8;font-weight:400}
.people{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.people h3{font-size:1.4rem}
.people .role{color:var(--sage);font-weight:500;margin-bottom:14px}
.people .tags{color:var(--sage);font-size:.9rem;padding-top:14px;border-top:1px solid #2E2E2C}
.people .lead{margin:0 0 14px;padding:12px 0;border-top:1px solid #2E2E2C;border-bottom:1px solid #2E2E2C}
.people .lead small{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#8F8F8A}
.people .lead strong{display:block;margin-top:2px;font-weight:400;font-size:1.1rem;color:#ECECE8}
.people-note{margin:36px 0 0;padding-top:20px;border-top:1px solid #2E2E2C;color:#B8B8B3;max-width:62ch}

/* ---------- 11. Preguntas frecuentes ---------- */
.faq{max-width:760px}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-size:1.1rem;font-weight:400;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:12px 0 0;color:var(--muted)}

/* ---------- 12. Contacto y footer ---------- */
.contact{background:var(--surface)}
.contact .btns{gap:12px 36px;margin-top:36px}
.contact .zone{display:flex;gap:8px;align-items:flex-start;color:var(--muted);font-size:.95rem;margin-top:-4px}
.contact .zone svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--accent)}
footer{padding:28px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
/* Crédito del diseño del sitio */
footer .credit a{color:var(--ink);text-decoration:none}
/* Al pasar el mouse, "design" sube y entra "sitioweb" desde abajo: mrv/design → mrv/sitioweb */
footer .credit-swap{display:inline-grid;overflow:hidden;vertical-align:bottom;justify-items:start}
footer .credit-swap > span{grid-area:1/1;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s ease}
footer .credit-swap > span + span{transform:translateY(100%);opacity:0}
footer .credit a:hover .credit-swap > span:first-child,footer .credit a:focus-visible .credit-swap > span:first-child{transform:translateY(-100%);opacity:0}
footer .credit a:hover .credit-swap > span + span,footer .credit a:focus-visible .credit-swap > span + span{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){footer .credit-swap > span{transition:none}}
footer .credit-slash{color:#D93A1E}   /* la barra roja del logo de mrvdesign */

/* ---------- 13. Galería (modal) ---------- */
.gallery{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}
.gallery[hidden]{display:none}
.gallery-backdrop{position:absolute;inset:0;background:rgba(17,17,17,.82)}
.gallery-panel{position:relative;width:100%;max-width:min(520px,92vw);background:var(--bg);border-radius:6px;overflow:hidden;z-index:1}
.gallery-close{
  position:absolute;top:10px;right:10px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;
  background:rgba(17,17,17,.55);color:#fff;font-size:1rem;line-height:1;cursor:pointer;
}
.gallery-close:hover{background:rgba(17,17,17,.8)}
.gallery-stage{
  position:relative;aspect-ratio:4/5;max-height:78vh;background:var(--bg);
  display:flex;align-items:center;justify-content:center;touch-action:pan-y;
}
.gallery-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.gallery-image img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-image img.is-fit{object-fit:contain;background:#F6F6F4}
.gallery-image img.is-plan{background:#fff}
.gallery-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
  border:0;background:rgba(255,255,255,.85);color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer;
}
.gallery-nav:hover{background:#fff}
.gallery-nav:disabled{opacity:0;pointer-events:none}
.gallery-nav.prev{left:12px}
.gallery-nav.next{right:12px}
.gallery-info{padding:20px 24px 24px}
.gallery-info h3{font-size:1.25rem}
.gallery-info p{color:var(--muted);margin:6px 0 0}
.gallery-count{display:block;margin-top:10px;font-size:.85rem;color:var(--muted)}

/* Galería de interiorismo: horizontal 3:2 (distinta a la de mobiliario, 4:5) */
.gallery.is-wide .gallery-panel{max-width:min(860px,92vw,calc(78vh * 1.5))}
.gallery.is-wide .gallery-stage{aspect-ratio:3/2}

/* ---------- 13b. Pedido de presupuesto (modal) ---------- */
.quote{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px}
.quote[hidden]{display:none}
.quote-backdrop{position:absolute;inset:0;background:rgba(17,17,17,.82)}
.quote-panel{position:relative;z-index:1;width:100%;max-width:460px;max-height:92vh;overflow:auto;background:var(--bg);border-radius:6px;padding:32px 28px 28px}
.quote-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:var(--surface);color:var(--ink);font-size:1rem;cursor:pointer}
.quote-close:hover{background:var(--line)}
.quote-panel h3{font-size:1.6rem;font-weight:300;padding-right:36px}
.quote-intro{color:var(--muted);margin:8px 0 0;font-size:.98rem}
.quote-step{margin-top:20px;animation:quote-in .35s ease both}
.quote-step[hidden]{display:none}
@keyframes quote-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.quote label{display:block;font-size:.9rem;font-weight:500;margin-bottom:6px}
.quote input,.quote select,.quote textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:4px;padding:11px 12px}
.quote textarea{resize:vertical}
.quote input:focus,.quote select:focus,.quote textarea:focus{outline:none;border-color:var(--accent)}
.quote-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.quote-actions .btn{cursor:pointer;font:inherit;font-weight:500}

/* ---------- 14. Aparición al hacer scroll ---------- */
.js .reveal{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- 15. Responsive ---------- */
@media (max-width:1100px){
  .hero{gap:48px}
}

@media (max-width:820px){
  section{padding:56px 0}
  /* Portada más baja en celular para que asome lo que sigue */
  /* Portada en celular: el logo ocupa ~80% de la primera pantalla y la foto asoma en el 20% restante
     (80% − barra fija − margen de 32px sobre la foto) */
  .ce-hero{padding:24px 20px 64px;min-height:calc(80vh - var(--header-h,0px) - 32px);min-height:calc(80svh - var(--header-h,0px) - 32px)}
  .float-stack{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  footer .wrap{padding-right:88px}

  /* Hero en celular (opción A): foto arriba, texto abajo */
  .hero{grid-template-columns:1fr;gap:28px;padding-top:32px}
  .hero h2{font-size:clamp(1.7rem,6vw,2.1rem)}
  .plan-photo{order:-1}
  .svc{grid-template-columns:1fr;gap:32px}
  .svc-media{min-height:0;aspect-ratio:4/3}
  .sub-divider{margin:48px auto 36px}

  .grid,.grid.wide,.mats,.people{grid-template-columns:1fr}

  /* Carrusel en celular: se desliza de a una tarjeta y asoma la siguiente */
  .grid.is-scroller{margin:0 -24px;padding:4px 24px;scroll-padding:0 24px;gap:16px}
  .grid.is-scroller > .page{display:contents}
  .grid.is-scroller .work{flex:0 0 80%;scroll-snap-align:start}
  .grid.wide.is-scroller .work{flex-basis:86%}
  .gallery-panel,.gallery.is-wide .gallery-panel{max-width:100%}

  /* Cómo trabajamos en celular: la cota pasa a vertical, a la izquierda */
  .process{grid-template-columns:1fr;gap:0;margin-top:40px;padding-left:44px}
  .process::before{left:8px;right:auto;top:10px;bottom:10px;width:1.5px;height:auto;transform-origin:center top}
  .js #forma:not(.is-in) .process::before{transform:scaleY(0)}
  .process::after{right:auto;top:auto;bottom:10px;left:0;width:17px;height:1.5px}
  .step{padding-bottom:36px}
  .step:last-child{padding-bottom:20px}
  .step::before{left:-44px;top:16px;width:17px;height:1.5px}
  .step::after{left:-36px;top:16px}
  .step-n,.step:last-child .step-n{height:auto;font-size:1.9rem;width:auto;text-align:left}
  .step h3{margin-top:10px}
  .process-cta{flex-direction:column;align-items:flex-start;margin-top:24px}
}
@media (min-width:560px) and (max-width:820px){.grid{grid-template-columns:1fr 1fr}.grid.is-scroller:not(.wide) .work{flex-basis:44%}}
/* En pantallas táctiles: sin flechas, con aviso de "deslizá" */
@media (hover:none){.sc-btn{display:none}.sc-hint{display:inline}}

/* ---------- 16. Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ce-hero .ce-ext,.ce-hero .ce-line,.ce-hero .ce-tick{transition-duration:.01s;transition-delay:0s}
  .ce-hero .ce-label{transition:none}
  .ce-hero .ce-scroll svg{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .nav-toggle span,header nav{transition:none}
  .btn-cota::before,.btn-cota::after{transition:none}
  .process::before,.process::after,.step::before,.step::after{transition:none}
  .quote-step{animation:none}
}