/* ==========================================================================
   TresArcos — hoja de estilos única
   Reconstruida desde el prototipo de Claude Design «TresArcos Web.dc.html».
   Paleta y medidas del manual corporativo (BRANDING TRESARCOS JUL25).
   ========================================================================== */

:root{
  /* Paleta corporativa — NO usar colores de proyecto fuera del portfolio */
  --crema:#F2F0E9;
  --crema-2:#FBF9F3;
  --crema-3:#EAE7DB;
  --crema-4:#E4E0D3;
  --tinta:#2B2820;
  --arcilla:#A6674D;
  /* PRUEBA 27/08/2026 — sin verde: los fondos oscuros pasan al terracota de
     marca. Como ahora fondo y acento son el MISMO color, dos cosas dejarían
     de verse y se resuelven aparte: los estados «hover» usan --arcilla-honda,
     y el botón del pie pasa a fondo crema (si no, desaparecía sobre el pie).
     Para volver al verde, restaurar estos valores (o copiar encima el archivo
     _generador/styles-CON-VERDE.css.bak):
       --olivo:#4F4F2F · --olivo-claro:#9D9C80 · --crema-sobre-olivo:#C9C6B8 */
  --olivo:#A6674D;
  --olivo-claro:#F0DCD1;
  --arcilla-honda:#7E4C36;
  --texto:#4A463A;
  --gris:#6B665A;
  --gris-claro:#8A8577;
  --crema-sobre-olivo:#FBF3EE;

  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --lat:40px;              /* padding lateral de página */
  --hdr:59px;              /* alto del header fijo */
}

/* ---------- Reset mínimo ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--crema);
  color:var(--tinta);
  font-family:'Archivo','Archivo Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-synthesis-weight:none;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:var(--arcilla);text-decoration:none}
a:hover{color:var(--arcilla-honda)}
::selection{background:var(--arcilla);color:var(--crema)}
h1,h2,h3,h4{margin:0}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--arcilla);outline-offset:3px;border-radius:2px}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:8px;top:-60px;z-index:100;
  background:var(--tinta);color:var(--crema);padding:10px 18px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:top .2s;
}
.skip-link:focus{top:8px;color:var(--crema)}

/* ---------- Tipografía de marca ---------- */
.kicker{
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--arcilla);margin-bottom:18px;
}
.kicker--olivo{color:var(--olivo-claro)}
.display{
  font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:.01em;
  font-size:clamp(30px,3.6vw,52px);
  text-wrap:balance;
}
.display--xl{font-size:clamp(44px,5.4vw,84px);line-height:.96}
/* Red de seguridad: una palabra larga («INTERLOCUTOR.») no debe poder ensanchar
   el viewport en móvil. Si no cabe, que parta antes de romper la maqueta. */
.display,.hero__titulo,.caso__tit,.ref-hero h1{overflow-wrap:break-word}
.display--l{font-size:clamp(34px,4vw,60px)}
.display--m{font-size:clamp(28px,3.4vw,48px)}
.lead{
  font-size:17px;line-height:1.65;color:var(--texto);text-wrap:pretty;
}
.nota-mono{
  font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--gris);
  background:rgba(242,240,233,.85);padding:10px 14px;border-radius:6px;
  max-width:320px;text-align:center;
}

/* ---------- Contenedores ---------- */
.wrap{max-width:1100px;margin:0 auto}
.wrap--ancho{max-width:1200px;margin:0 auto}
.sec{padding:110px var(--lat)}
.sec--olivo{background:var(--olivo);color:var(--crema)}
.sec--olivo .display{color:var(--crema)}
.sec--crema3{background:var(--crema-3)}
.sec--cabecera{padding:150px var(--lat) 70px}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;border-radius:999px;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:12px;padding:14px 28px;cursor:pointer;
  border:1.5px solid transparent;transition:background .25s,color .25s,border-color .25s;
  text-align:center;
}
.btn--arcilla{background:var(--arcilla);color:var(--crema)}
.btn--arcilla:hover{background:var(--arcilla-honda);color:var(--crema)}
.btn--olivo{background:var(--olivo);color:var(--crema);padding:15px 34px;letter-spacing:.16em}
.btn--olivo:hover{background:var(--arcilla);color:var(--crema)}
.btn--linea{border-color:var(--tinta);color:var(--tinta);padding:12px 24px}
.btn--linea:hover{background:var(--arcilla-honda);color:var(--crema);border-color:var(--arcilla-honda)}
.btn--linea-crema{border-color:var(--crema);color:var(--crema)}
.btn--linea-crema:hover{background:var(--crema);color:var(--olivo)}
.btn--sm{font-size:11px;padding:10px 22px}
.enlace-sub{
  font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--arcilla);
  border-bottom:2px solid var(--arcilla);padding-bottom:3px;
}
.enlace-sub:hover{color:var(--arcilla-honda);border-bottom-color:var(--arcilla-honda)}

/* ==========================================================================
   Header
   ========================================================================== */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px var(--lat);
  background:rgba(242,240,233,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(43,40,32,.08);
}
.hdr__logo img{height:18px;width:auto}
.nav{display:flex;gap:28px;align-items:center}
.nav a{
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris-claro);border-bottom:2px solid transparent;padding-bottom:2px;
  transition:color .2s,border-color .2s;
}
.nav a:hover{color:var(--tinta)}
.nav a[aria-current="page"]{color:var(--tinta);border-bottom-color:var(--arcilla)}
/* Submenú de Servicios. Sin JavaScript: se abre con :hover y con :focus-within,
   así funciona igual con ratón que con teclado. */
.nav__grupo{position:relative;display:flex;align-items:center}
.nav__sub{
  position:absolute;top:100%;left:-18px;z-index:60;
  display:flex;flex-direction:column;min-width:230px;
  padding:10px 0;margin-top:14px;
  background:var(--crema);
  border:1px solid rgba(43,40,32,.12);
  border-radius:0 0 14px 14px;
  box-shadow:0 14px 30px rgba(43,40,32,.10);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;
}
/* Puente invisible para que el ratón pueda bajar sin que se cierre. */
.nav__sub::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.nav__grupo:hover .nav__sub,
.nav__grupo:focus-within .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{
  padding:9px 18px;border-bottom:none;letter-spacing:.1em;font-size:11.5px;
  color:var(--gris);white-space:nowrap;
}
.nav__sub a:hover{color:var(--tinta);background:rgba(43,40,32,.05)}
.nav__sub a[aria-current="page"]{color:var(--arcilla);border-bottom:none}

.hdr__acciones{display:flex;gap:16px;align-items:center}
.langsw{display:flex;flex:none;border:1.5px solid var(--tinta);border-radius:999px;overflow:hidden}
.langsw a{
  padding:5px 12px;font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--tinta);background:transparent;transition:background .2s,color .2s;
}
.langsw a[aria-current="true"]{background:var(--tinta);color:var(--crema)}
.langsw a:not([aria-current="true"]):hover{background:rgba(43,40,32,.08);color:var(--tinta)}

/* Botón hamburguesa (solo móvil) */
.nav-toggle{
  display:none;flex:none;width:36px;height:36px;padding:0;
  background:transparent;border:1.5px solid var(--tinta);border-radius:999px;
  cursor:pointer;position:relative;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  position:absolute;left:50%;width:15px;height:1.5px;background:var(--tinta);
  transition:transform .25s,opacity .2s;content:'';
}
.nav-toggle span{top:50%;transform:translate(-50%,-50%)}
.nav-toggle span::before{left:0;top:-5px;transform:none}
.nav-toggle span::after{left:0;top:5px;transform:none}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero{
  position:relative;min-height:100vh;
  padding:120px var(--lat) 36px;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
}
.hero__arco{
  position:absolute;left:50%;top:150px;bottom:0;transform:translateX(-50%);
  width:min(46vw,600px);border-radius:600px 600px 0 0;overflow:hidden;
  background:repeating-linear-gradient(45deg,#E7E3D7 0 14px,#EFEDE4 14px 28px);
  animation:crecer 1.1s var(--ease) both;
}
.hero__arco-nota{position:absolute;left:0;right:0;bottom:140px;display:flex;justify-content:center}
/* Con vídeo real el arco deja de necesitar la textura de rayas. */
.hero__arco--video{background:#E7E3D7}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
}
/* Velo en color crema sobre el vídeo: el titular va justo encima y sin él
   «DISEÑAR.» (que va en contorno) se pierde sobre la vegetación. Deja el
   cielo casi limpio arriba y protege el texto en la mitad inferior. */
.hero__arco--video::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(242,240,233,.20) 0%,
    rgba(242,240,233,.52) 38%,
    rgba(242,240,233,.66) 72%,
    rgba(242,240,233,.78) 100%);
}
.hero__kicker{
  position:relative;z-index:2;margin-bottom:auto;padding-bottom:24px;
  font-size:11.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--olivo);animation:subir .8s .5s var(--ease) both;
}
.hero__titulo{
  position:relative;z-index:2;margin:0 0 44px;display:flex;flex-direction:column;
  font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:.005em;
  font-size:clamp(60px,9.4vw,158px);
}
.hero__titulo span{display:block}
.hero__t1{align-self:flex-start;animation:subir .9s .15s var(--ease) both}
.hero__t2{
  align-self:flex-end;color:transparent;
  -webkit-text-stroke:2.5px var(--tinta);
  animation:subir .9s .32s var(--ease) both;
}
.hero__t3{align-self:center;color:var(--arcilla);animation:subir .9s .49s var(--ease) both}
.hero__pie{
  position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;
  gap:40px;border-top:1.5px solid rgba(43,40,32,.3);padding-top:26px;
  animation:subir .8s .6s var(--ease) both;
}
.hero__sub{margin:0;max-width:400px;font-size:15.5px;line-height:1.55;color:var(--texto);text-wrap:pretty}
.hero__acciones{display:flex;align-items:center;gap:26px}
.hero__scroll{
  flex:none;white-space:nowrap;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;color:var(--gris);
}

/* ==========================================================================
   Manifiesto / bloques centrados
   ========================================================================== */
.manifiesto{max-width:900px;margin:0 auto;text-align:center}
.manifiesto p{margin:26px auto 0;max-width:640px;font-size:17px;line-height:1.6;color:var(--crema-sobre-olivo);text-wrap:pretty}

/* ---------- Textura de fondo con el isotipo ---------- */
.textura{position:relative;padding:120px var(--lat)}
/* PRUEBA 27/08/2026: se retira el isotipo repetido de fondo. Para recuperarlo,
   borrar la linea display:none. */
.textura::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url('../img/isotipo-arcilla.png') 0 0/110px auto repeat;opacity:.05;
  display:none;
}
.textura > *{position:relative}

/* ==========================================================================
   Proceso (3 arcos)
   ========================================================================== */
.proceso__cab{text-align:center;margin-bottom:70px}
.proceso{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;align-items:end}
.proceso__item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.proceso__arco{
  width:min(100%,240px);height:280px;border-radius:999px 999px 0 0;
  background:var(--crema-4);position:relative;overflow:hidden;
}
.proceso__relleno{position:absolute;inset:0;background:var(--arcilla)}
.proceso__n{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:60px;color:var(--crema);
}
.proceso__serv{
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--arcilla);margin-bottom:8px;
}
.proceso__tit{font-weight:900;text-transform:uppercase;font-size:20px;line-height:1.1;letter-spacing:.03em}
.proceso__txt{margin:12px auto 0;max-width:260px;font-size:14.5px;line-height:1.55;color:var(--texto)}
.proceso__cierre{text-align:center;margin-top:80px}
.proceso__cierre-tit{
  font-weight:900;text-transform:uppercase;font-size:clamp(22px,2.6vw,36px);
  line-height:1.15;letter-spacing:.02em;color:var(--olivo);
}
.proceso__cierre p{margin:18px auto 0;max-width:560px;font-size:15.5px;line-height:1.6;color:var(--gris);text-wrap:pretty}

/* ==========================================================================
   Marcadores de foto (se sustituyen por <img> cuando haya fotos reales)
   ========================================================================== */
.foto{
  position:relative;overflow:hidden;
  background:repeating-linear-gradient(45deg,#E7E3D7 0 13px,#EFEDE4 13px 26px);
}
.foto img{width:100%;height:100%;object-fit:cover}
.foto__nota{
  position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;padding:0 12px;
}
.foto__nota span{
  font-family:var(--mono);font-size:10.5px;line-height:1.5;color:var(--gris);
  background:rgba(242,240,233,.88);padding:6px 10px;border-radius:5px;
  max-width:340px;text-align:center;
}

/* ==========================================================================
   Proyectos destacados (home)
   ========================================================================== */
/* El fondo del bloque de destacados baja hasta el pie de las tarjetas (antes
   era un padding-bottom:130px inline, imposible de ajustar en móvil). */
.sec--dest{padding-bottom:130px}
/* Secciones «de flujo» de las páginas de servicio (antes padding inline). */
/* Con padding ARRIBA también: tras la reordenación FAQ⇄proyectos, estas
   secciones quedaban a 110px de la anterior mientras la página respira 220
   (medido a 1440). El móvil las re-ajusta en su bloque. */
.sec--flujo{padding:110px var(--lat) 100px}
.sec--contacto{padding-top:150px;padding-bottom:120px}
.sec--formulario{padding:110px var(--lat) 120px}
.cab-flujo{margin-bottom:48px}
.dest__cab{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  flex-wrap:wrap;margin-bottom:54px;
}
.dest{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.dest__card{display:block;color:inherit}
.dest__card:hover{color:inherit}
.dest__foto{
  /* 520 px ≈ la proporción vertical de las portadas (3:4): la foto se ve
     entera, sin el zoom del recorte casi cuadrado (cliente, 21 ago 2026). */
  height:520px;border-radius:180px 180px 0 0;
  background:repeating-linear-gradient(45deg,#E7E3D7 0 12px,#EFEDE4 12px 24px);
  border-bottom:6px solid var(--color-proyecto);
  transition:transform .35s var(--ease);
}
.dest__card:hover .dest__foto{transform:translateY(-8px)}
.dest__pie{display:flex;align-items:center;gap:10px;margin-top:18px}
.dest__punto{
  width:14px;height:18px;border-radius:99px 99px 0 0;flex:none;
  background:var(--color-proyecto);border:1px solid var(--acento-proyecto);
}
.dest__nombre{font-weight:900;text-transform:uppercase;font-size:17px;letter-spacing:.04em}
.dest__meta{font-size:13px;color:var(--gris);margin-left:auto}

/* SIN USO desde el 27/08/2026: la home volvio a las tarjetas de arco
   (.dest__card), como las paginas de Servicios. Se conserva por si se retoma
   el diseno de lomo; si no, se puede borrar todo el bloque .destl. */
/* Tarjeta «libro» de la home: lomo estrecho + foto siempre visible.
   Los colores llegan por variables desde el generador (--color-proyecto,
   --borde-libro, --tinta-libro). */
.destl{display:block;color:inherit}
.destl:hover{color:inherit}
/* 470 y no los 380 del diseño: las fotos de portada son verticales y a 380
   quedaban pequeñas («pon más grande la portada», cliente 25 ago). */
.destl__cuerpo{display:flex;height:470px}
.destl__lomo{
  flex:none;width:54px;background:var(--color-proyecto);
  border:1px solid var(--borde-libro);border-right:none;border-radius:3px 0 0 3px;
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  padding:12px 0 10px;box-shadow:inset -5px 0 10px rgba(79,79,47,.12);
  color:var(--tinta-libro);
}
.destl__lomo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.destl__glifo{display:flex;flex-direction:column;gap:1px}
.destl__glifo span{display:flex;gap:1px}
.destl__glifo span:nth-child(2){transform:translateX(3px)}
.destl__glifo i{display:block;width:5px;height:7px;border-radius:99px 99px 0 0;background:currentColor}
.destl__nombre{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.destl__nombre span{
  writing-mode:vertical-rl;text-transform:uppercase;white-space:nowrap;font-size:13px;
}
.destl__num{font-size:9px;font-weight:800;letter-spacing:.08em}
.destl__foto{flex:1;border-radius:0 3px 3px 0}
.destl__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   Estantería de proyectos (los «lomos» de arco)
   ========================================================================== */
.estanteria{
  max-width:1240px;margin:0 auto;
  display:flex;gap:30px;align-items:flex-end;justify-content:center;flex-wrap:wrap;
  border-bottom:3px solid var(--tinta);
}
.lomo{
  display:flex;flex-direction:column;align-items:center;
  transform:translateY(0);transition:transform .35s var(--ease);
}
.lomo:hover,.lomo:focus-visible{transform:translateY(-14px)}
.lomo__arco{
  width:186px;height:var(--alto);
  border-radius:120px 120px 0 0;
  background:var(--color-proyecto);
  border:2px solid var(--borde-proyecto);border-bottom:none;
  position:relative;overflow:hidden;
}
.lomo__foto{
  position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:repeating-linear-gradient(45deg,#E7E3D7 0 12px,#F5F3EA 12px 24px);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:16px;
}
.lomo__foto span{
  font-family:var(--mono);font-size:10px;line-height:1.5;color:var(--gris);
  background:rgba(242,240,233,.9);padding:6px 9px;border-radius:5px;text-align:center;
}
.lomo__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lomo:hover .lomo__foto,.lomo:focus-visible .lomo__foto{opacity:1}
.lomo__nombre{
  position:absolute;left:0;right:0;top:34px;display:flex;justify-content:center;
  opacity:1;transition:opacity .35s;
}
.lomo__nombre span{
  writing-mode:vertical-rl;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:15px;color:var(--lomo-color);
}
.lomo:hover .lomo__nombre,.lomo:focus-visible .lomo__nombre{opacity:0}
.estanteria__pie{
  max-width:1240px;margin:14px auto 0;text-align:center;
  font-size:13px;color:var(--gris-claro);
}

/* ---------- Renders de Casa entre pinos (página anexa a Obra nueva) ----------
   Los renders son todos 3:2: con aspect-ratio el marco adopta esa proporción
   y no se recorta nada, a cualquier ancho de columna. */
.on-gal{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
.on-gal__foto{aspect-ratio:3/2;border-radius:14px}
/* La imagen de la tarjeta con galería es un enlace: pequeña elevación al
   pasar, como las tarjetas de la home. El plano viene con fondo transparente,
   así que su marco no lleva el fondo de rayas del marcador. */
.on-des__enlace .foto{background:none}
.on-des__enlace{display:block;color:inherit}
.on-des__enlace .con-render{transition:transform .35s var(--ease)}
.on-des__enlace:hover .con-render,.on-des__enlace:focus-visible .con-render{transform:translateY(-8px)}

/* ==========================================================================
   Estantería de LIBROS (/proyectos, diseño ago 2026)
   --------------------------------------------------------------------------
   Cada proyecto es un lomo de 100×860 que apoya en el estante (la línea de
   3 px). Al pulsarlo, main.js le pone .is-abierto: el ancho anima hasta la
   portada y debajo aparece su caso de estudio. Los colores del proyecto
   llegan por variables (--color-libro, --borde-libro, --tinta-libro).
   ========================================================================== */
.libros{
  /* El diseño define los libros a 100×860 (lomo) y 660×860 (abierto). A ese
     tamaño no caben en pantalla («los lomos son enormes», cliente 25 ago):
     la estantería escala con la altura del viewport manteniendo exactamente
     esas proporciones, con 860 px como techo. */
  --alto-libro:clamp(480px,calc(100vh - 290px),860px);
  --ancho-lomo:calc(var(--alto-libro) * .11628);          /* 100/860 */
  --ancho-abierto:min(calc(var(--alto-libro) * .76744),82vw); /* 660/860 */
  max-width:1240px;margin:0 auto;
  display:flex;gap:16px;align-items:flex-end;justify-content:center;flex-wrap:wrap;
  border-bottom:3px solid var(--olivo);
}
.libro{
  position:relative;overflow:hidden;flex:none;display:block;
  width:var(--ancho-lomo);height:var(--alto-libro);border-radius:4px 4px 0 0;
  background:var(--color-libro);
  border:1.5px solid var(--borde-libro);border-bottom:none;
  box-shadow:inset -5px 0 12px rgba(79,79,47,.07);
  color:var(--tinta-libro);cursor:pointer;
  transform:translateY(0);
  transition:width .55s var(--ease),transform .35s var(--ease);
}
.libro:hover{color:var(--tinta-libro)}
.libro:not(.is-abierto):hover,.libro:not(.is-abierto):focus-visible{transform:translateY(-10px)}
.libro.is-abierto{width:var(--ancho-abierto)}

/* --- lomo (libro cerrado) --- */
.libro__lomo{
  position:absolute;left:0;top:0;bottom:0;width:calc(var(--ancho-lomo) - 3px);
  opacity:1;transition:opacity .25s;
}
.libro.is-abierto .libro__lomo{opacity:0}
.libro__lomo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.libro__lomo-texto{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  padding:18px 0 12px;
}
.libro__glifo{display:flex;flex-direction:column;gap:2px}
.libro__glifo span{display:flex;gap:2px}
.libro__glifo span:nth-child(2){transform:translateX(5px)}
.libro__glifo i{display:block;width:8px;height:11px;border-radius:99px 99px 0 0;background:currentColor}
.libro__nombre{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.libro__nombre span{writing-mode:vertical-rl;text-transform:uppercase;white-space:nowrap}
.libro__archivo{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:9.5px;font-weight:700;letter-spacing:.16em;opacity:.85;margin:12px 0 10px;
}
.libro__num{font-size:10px;font-weight:800;letter-spacing:.08em}

/* --- portada (libro abierto) ---
   Ancho fijo desde el principio: así el contenido no se recoloca mientras el
   libro anima su anchura; solo se funde la opacidad. */
.libro__portada{
  position:absolute;left:0;top:0;bottom:0;width:var(--ancho-abierto);
  opacity:0;pointer-events:none;transition:opacity .35s .18s;
  padding:26px 30px 24px;display:flex;flex-direction:column;
}
.libro.is-abierto .libro__portada{opacity:1;pointer-events:auto}
.libro__portada > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.libro__arco-g{position:absolute;bottom:0;border-radius:999px 999px 0 0;background:var(--arcos-portada)}
.libro__cab{position:relative;display:flex;justify-content:space-between;gap:20px;text-align:left}
.libro__cab-t{display:block;font-size:11px;font-weight:800;letter-spacing:.12em}
.libro__cab-s{display:block;font-size:11px;font-weight:600;opacity:.85;margin-top:3px}
.libro__cab-n{font-size:11px;font-weight:800;letter-spacing:.08em;flex:none}
.libro__tit{
  position:relative;flex:1;display:flex;align-items:center;min-height:0;
  text-transform:uppercase;line-height:.95;letter-spacing:.01em;
  font-size:clamp(40px,5.2vw,72px);text-align:left;overflow-wrap:anywhere;
}
.libro__cierre{
  position:relative;margin-top:auto;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.libro__lugar{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85}

/* --- caso de estudio bajo la estantería --- */
.caso--inline{margin-top:60px;padding:100px var(--lat) 110px}
.caso--inline[hidden]{display:none}
.caso__cerrar{background:transparent;cursor:pointer}

/* ==========================================================================
   Case study (página de proyecto)
   ========================================================================== */
.caso{
  background:var(--tinta-proyecto);
  border-top:5px solid var(--acento-proyecto);
  padding:150px var(--lat) 110px;
}
.caso__cab{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.caso__pre{
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--acento-proyecto);margin-bottom:16px;
}
.caso__tit{
  font-weight:900;text-transform:uppercase;line-height:.96;letter-spacing:.01em;
  font-size:clamp(40px,5vw,72px);color:var(--titulo-proyecto,var(--acento-proyecto));
}
.caso__volver{
  border:1.5px solid var(--tinta);border-radius:999px;padding:9px 18px;
  font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--tinta);
  transition:background .25s,color .25s;flex:none;
}
.caso__volver:hover{background:var(--arcilla-honda);color:var(--crema);border-color:var(--arcilla-honda)}
.ficha{
  display:grid;grid-template-columns:1fr 1fr 2fr;gap:32px;margin:46px 0 60px;padding:26px 0;
  border-top:1.5px solid rgba(43,40,32,.25);border-bottom:1.5px solid rgba(43,40,32,.25);
}
.ficha dt{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris);margin-bottom:8px;
}
.ficha dd{margin:0;font-size:17px;font-weight:700}
.ficha__servicios{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.serv-tag{
  padding:8px 16px 7px;border-radius:14px 14px 0 0;
  font-size:12.5px;font-weight:700;letter-spacing:.05em;
  border:1.5px solid rgba(43,40,32,.35);color:var(--gris);background:transparent;opacity:.55;
}
.serv-tag.is-on{
  background:var(--acento-proyecto);border-color:var(--acento-proyecto);
  color:var(--crema);opacity:1;
}
.caso__texto{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-bottom:70px}
.caso__texto h2{
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--acento-proyecto);margin-bottom:14px;
}
.caso__texto p{margin:0;font-size:15.5px;line-height:1.65;text-wrap:pretty}
.galeria{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.galeria .foto{border-radius:12px}
.galeria .foto:first-child{grid-column:span 2;border-radius:260px 260px 0 0}
/* Fotos sin redondeo: conservan el sitio (dos columnas) pero van a esquina
   viva, sin arco ni radio. Doble clase para ganar a la regla de :first-child
   de arriba. */
.galeria .foto.foto--sin-arco:first-child{border-radius:0}
/* Foto a sangre: ocupa las dos columnas y se ve entera, sin recorte
   (el alto lo da la propia imagen). */
.galeria .foto--completa{grid-column:1 / -1;height:auto}
.galeria .foto--completa img{display:block;width:100%;height:auto}
/* «Entera»: la foto se muestra completa, sin recorte, a la proporción que
   trae. A diferencia de --completa, respeta su columna en la rejilla. */
.galeria .foto--entera{height:auto}
/* Con un número par de fotos la última se queda sola en su fila (la primera
   ocupa las dos columnas). En vez de dejarla pegada a la izquierda con un
   hueco al lado, se centra a media columna. Se excluye --completa, que va a
   ancho total a propósito (Muralla foto 4). */
.galeria .foto:last-child:nth-child(even):not(.foto--completa){
  grid-column:1 / -1;width:calc(50% - 13px);justify-self:center;
}
.galeria .foto--entera img{display:block;width:100%;height:auto}

/* ---------- Carrusel de fotos (fichas con más de tres) ----------
   Tira horizontal con scroll y flechas: cada foto va a su proporción
   natural (alto fijo, ancho el suyo), así ninguna se recorta. */
.carrusel__pista{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.carrusel__pista::-webkit-scrollbar{display:none}
.carrusel .carrusel__item{flex:none;height:600px;scroll-snap-align:start;border-radius:12px}
.carrusel .carrusel__item img{display:block;width:auto;height:100%}
.carrusel__controles{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}
.carrusel__btn{
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:var(--arcilla);color:var(--crema);font-size:17px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s var(--ease);
}
.carrusel__btn:hover{transform:translateY(-3px)}

/* Navegación entre proyectos */
.otros{padding:90px var(--lat) 110px}
.otros__tit{
  font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--arcilla);margin-bottom:34px;text-align:center;
}

/* ==========================================================================
   Estudio / equipo / servicios
   ========================================================================== */
.dosCol{display:grid;grid-template-columns:1fr 1.3fr;gap:70px;align-items:center}
.dosCol--iguales{grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.dosCol__iso{display:flex;justify-content:center}
.dosCol__iso img{height:240px;width:auto}
.sec--olivo p{color:var(--crema-sobre-olivo)}
.chips{display:flex;gap:12px;flex-wrap:wrap}
.chip{
  padding:9px 18px 8px;border-radius:15px 15px 0 0;
  border:1.5px solid var(--arcilla);color:var(--crema);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;
}
/* La foto del equipo va entera, sin arco ni recorte (petición del cliente,
   21 ago 2026): el alto lo da la propia imagen. */
.equipo__foto{height:auto;border-radius:12px}
.equipo__foto img{display:block;width:100%;height:auto}
.equipo__txt{margin:26px auto 0;max-width:560px;text-align:center;font-size:16px;line-height:1.6;color:var(--texto);text-wrap:pretty}

.servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-bottom:80px}
.servicios__n{
  width:54px;height:64px;border-radius:27px 27px 0 0;background:var(--arcilla);
  display:flex;align-items:center;justify-content:center;
  color:var(--crema);font-weight:900;font-size:22px;margin-bottom:22px;
}
.servicios__tit{font-weight:900;text-transform:uppercase;font-size:19px;letter-spacing:.03em;margin-bottom:12px}
.servicios__txt{font-size:14.5px;line-height:1.65;color:var(--texto);text-wrap:pretty}
.argumentos{border-top:1.5px solid rgba(43,40,32,.25);padding-top:44px}
.argumentos__tit{
  font-weight:900;text-transform:uppercase;font-size:clamp(20px,2.2vw,28px);
  letter-spacing:.02em;color:var(--olivo);margin-bottom:30px;
}
.argumentos ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px 48px}
.argumentos li{display:flex;gap:14px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--tinta)}
.argumentos li::before{
  content:'';flex:none;width:13px;height:17px;border-radius:99px 99px 0 0;
  background:var(--arcilla);margin-top:3px;
}

/* ==========================================================================
   Diario
   ========================================================================== */
.diario__item{
  display:grid;grid-template-columns:190px 1fr 280px;gap:44px;align-items:center;
  padding:46px 0;border-top:1.5px solid rgba(43,40,32,.2);
}
.diario__fecha{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.diario__tag{margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--arcilla)}
.diario__tit{
  font-weight:900;text-transform:uppercase;font-size:clamp(19px,2vw,26px);
  line-height:1.15;letter-spacing:.01em;
}
a.diario__tit{color:var(--tinta);display:inline-block}
a.diario__tit:hover{color:var(--arcilla)}
.diario__txt{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--texto);max-width:520px;text-wrap:pretty}
.diario__foto{height:190px;border-radius:95px 95px 0 0}
.diario__nota{border-top:1.5px solid rgba(43,40,32,.2);padding-top:22px;font-size:13px;color:var(--gris-claro)}

/* Entrada individual del diario */
.entrada{padding:150px var(--lat) 40px;max-width:820px;margin:0 auto}
.entrada__meta{display:flex;gap:18px;flex-wrap:wrap;align-items:baseline;margin-bottom:18px}
.entrada__foto{height:440px;border-radius:220px 220px 0 0;max-width:820px;margin:50px auto 0}
.entrada__cuerpo{max-width:660px;margin:0 auto;padding:50px var(--lat) 30px}
.entrada__cuerpo p{font-size:16.5px;line-height:1.75;color:var(--texto);margin-bottom:22px;text-wrap:pretty}
.entrada__cuerpo h2{
  font-weight:900;text-transform:uppercase;font-size:22px;letter-spacing:.02em;
  margin:44px 0 16px;
}
.entrada__cuerpo h3{font-weight:800;font-size:17.5px;letter-spacing:.01em;margin:34px 0 12px}
.entrada__cuerpo ul{margin:0 0 22px;padding-left:22px}
.entrada__cuerpo li{font-size:16.5px;line-height:1.7;color:var(--texto);margin-bottom:10px;text-wrap:pretty}
.entrada__cuerpo p a:not(.btn):not(.enlace-sub),.entrada__cuerpo li a{color:var(--arcilla);text-decoration:underline;text-underline-offset:3px}
.entrada__cuerpo .faq summary span:first-child{font-size:15.5px}
.entrada__cta{margin-top:44px}
.entrada__cta-botones{display:flex;gap:14px;flex-wrap:wrap;margin:24px 0 20px}
.entrada__cta-enlaces{display:flex;gap:26px;flex-wrap:wrap}

/* ==========================================================================
   Reformas — la página comercial
   ========================================================================== */
.ref-hero{padding:130px var(--lat) 0;max-width:1200px;margin:0 auto}
.ref-hero h1{
  font-weight:900;text-transform:uppercase;line-height:.98;letter-spacing:.01em;
  font-size:clamp(36px,4.8vw,72px);max-width:1000px;text-wrap:balance;
}
.ref-hero__pie{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  flex-wrap:wrap;margin:28px 0 40px;
}
.ref-hero__pie p{margin:0;max-width:520px;font-size:17px;line-height:1.6;color:var(--texto);text-wrap:pretty}
.ref-hero__foto{height:min(58vh,540px);border-radius:280px 280px 0 0}
/* «Entera»: el marco del hero adopta el 4:3 de la foto (interiorismo-hero es
   1448×1086) y no recorta nada. Conserva el arco. */
.ref-hero__foto--entera{height:auto;aspect-ratio:4/3}
/* En Reformas el hero va recto, centrado y a un ancho contenido: así el
   marco se acerca a la proporción de la foto (vertical) y se ve casi entera,
   techo y suelo incluidos. Obra nueva e Interiorismo conservan su arco. */
.ref-hero__foto.ref-hero__foto--recta{
  max-width:880px;margin-left:auto;margin-right:auto;
  height:min(80vh,880px);border-radius:12px;
}
/* Obra nueva: el hero pierde el arco pero conserva su ancho y alto
   («quítale la forma redondeada», cliente 26 ago). */
.ref-hero__foto.ref-hero__foto--sin-arco{border-radius:14px}

/* ---------- Comparador antes / después ---------- */
.ad{
  position:relative;height:min(60vh,560px);border-radius:20px;overflow:hidden;
  touch-action:none;--pct:50%;
}
.ad__despues{
  position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,#DCD7C6 0 14px,#E5E1D2 14px 28px);
}
.ad__antes{
  position:absolute;top:0;bottom:0;left:0;width:var(--pct);overflow:hidden;
  background:repeating-linear-gradient(-45deg,#C9C2AD 0 14px,#D4CEBB 14px 28px);
  border-right:3px solid var(--arcilla);
}
.ad__etiqueta{
  position:absolute;top:20px;padding:7px 16px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;
}
.ad__etiqueta--antes{left:20px;background:var(--tinta);color:var(--crema)}
.ad__etiqueta--despues{right:20px;background:var(--olivo);color:var(--crema)}
.ad__tirador{
  position:absolute;top:50%;left:var(--pct);transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:var(--arcilla);color:var(--crema);
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;
  pointer-events:none;
}
.ad__nota{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:center;pointer-events:none;padding:0 12px}
.ad__nota span{
  font-family:var(--mono);font-size:10.5px;color:var(--gris);
  background:rgba(242,240,233,.92);padding:6px 10px;border-radius:5px;
  text-align:center;max-width:420px;
}
/* Con fotos reales (.ad--foto): las dos imágenes a tamaño completo del
   comparador y la capa de «antes» recortada con clip-path, para que queden
   alineadas píxel a píxel al mover el tirador. La raya divisoria pasa a ser
   un elemento propio (.ad__linea) porque el border-right ya no aplica.
   El marco se estrecha a la proporción de las fotos (verticales) para
   enseñarlas casi enteras, sin el zoom del recorte apaisado. */
/* La pareja actual (exterior con piscina) es apaisada: marco panorámico a
   todo el ancho. Si algún día vuelve una pareja en vertical, recuperar aquí
   max-width:560px y height:min(84vh,760px). */
.ad.ad--foto{aspect-ratio:16/10;height:auto;max-height:min(84vh,640px);width:100%}
.ad--foto .ad__antes{width:auto;right:0;border-right:none;background:none;clip-path:inset(0 calc(100% - var(--pct)) 0 0)}
.ad--foto .ad__despues{background:none}
.ad--foto .ad__antes img,.ad--foto .ad__despues img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Comparador de portada (Reformas): a sangre completa, de borde a borde del
   navegador, saliéndose del ancho contenido del hero. Las dos fotos están
   recortadas al MISMO encuadre (2000×1500, piscina al 78 %), así que el
   recorte de cover les afecta igual y la línea del agua no salta al arrastrar. */
.ad.ad--foto.ad--hero{
  /* El marco tiene la MISMA proporción que las fotos (4:3): se ven enteras,
     sin recorte vertical. El ancho es el mayor que quepa: pantalla completa,
     tope de 1400 px, o lo que permita el alto de la ventana (86vh × 4/3) —
     antes un marco panorámico se comía un 17 % de cada foto. */
  --ancho-hero:min(100vw,1400px,114.66vh);
  width:var(--ancho-hero);
  margin-left:calc(50% - var(--ancho-hero) / 2);
  border-radius:0;aspect-ratio:4/3;max-height:none;
}
/* Comparador de renders (Casa entre pinos): marco a la proporción exacta de
   los renders (3:2), así se ven enteros y el recorte de cover no les quita
   nada. Va dentro del ancho contenido de la página, no a sangre. */
.ad.ad--foto.ad--render{
  /* Proporcion exacta de la pareja dia/noche (1534x1003), recortada al mismo
     encuadre el 27/08/2026 para que el tirador no salte. Asi no se recorta nada. */
  aspect-ratio:1534/1003;max-height:none;border-radius:14px;
}
/* El rótulo «render» ya ocupa la esquina superior izquierda, así que las dos
   etiquetas del deslizador bajan al pie del marco (doble clase para ganar a
   `.ad__etiqueta`, que fija `top` también en la media query de móvil). */
.ad--render .ad__etiqueta{top:auto;bottom:20px}
.ad__linea{
  position:absolute;top:0;bottom:0;left:var(--pct);width:3px;background:var(--arcilla);
  transform:translateX(-50%);pointer-events:none;
}

/* El control real: invisible pero encima de todo, así funciona con ratón,
   dedo y teclado. */
.ad__rango{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:ew-resize;margin:0;-webkit-appearance:none;appearance:none;background:none;
}
.ad__rango:focus-visible{outline:none}
.ad:has(.ad__rango:focus-visible){outline:3px solid var(--arcilla);outline-offset:3px}

/* ---------- Qué incluye ---------- */
.ref-inc{display:grid;grid-template-columns:1fr 1.4fr;gap:70px;align-items:start}
.ref-inc__tit{position:sticky;top:110px;line-height:1.05}
.ref-inc__item{
  display:flex;gap:22px;align-items:flex-start;padding:24px 0;
  border-top:1.5px solid rgba(43,40,32,.2);
}
.ref-inc__n{
  flex:none;width:34px;height:42px;border-radius:17px 17px 0 0;background:var(--arcilla);
  display:flex;align-items:center;justify-content:center;
  color:var(--crema);font-weight:900;font-size:15px;
}
.ref-inc__item h3{font-weight:900;text-transform:uppercase;font-size:16px;letter-spacing:.03em}
.ref-inc__item p{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--texto);text-wrap:pretty}

/* ---------- Proceso en 5 pasos ---------- */
.ref-pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px}
/* OJO con la especificidad: el plazo es un <p> y «.ref-pasos p» (más abajo)
   le machacaba el margen inferior a 0 — la raya quedaba pegada al título y
   ningún margin-bottom puesto aquí surtía efecto. El selector doble gana.
   Medidas de referencia: las de Obra nueva (.on-paso__plazo), 10/12. */
.ref-pasos .ref-pasos__plazo{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#C99B84;border-bottom:1.5px solid rgba(242,240,233,.3);
  padding-bottom:10px;margin:0 0 12px;
}
.ref-pasos h3{font-weight:900;text-transform:uppercase;font-size:16px;letter-spacing:.03em;color:var(--crema)}
.ref-pasos p{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--crema-sobre-olivo);text-wrap:pretty}

/* ---------- Precio ---------- */
.ref-precio{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.ref-precio__cifra{font-weight:900;font-size:clamp(34px,4vw,56px);color:var(--arcilla);line-height:1}
.ref-precio p{margin:20px 0 0;font-size:15.5px;line-height:1.65;color:var(--texto);max-width:440px;text-wrap:pretty}
.ref-factor{
  display:flex;gap:14px;align-items:flex-start;padding:14px 0;
  border-top:1.5px solid rgba(43,40,32,.15);font-size:15px;line-height:1.55;
}
.ref-factor::before{
  content:'';flex:none;width:12px;height:15px;border-radius:99px 99px 0 0;
  background:var(--arcilla);margin-top:4px;
}

/* ---------- Licencias / vives fuera ---------- */
.ref-tarjetas{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.ref-tarjeta{border-radius:26px 26px 0 0;padding:46px 42px}
.ref-tarjeta h2{font-weight:900;text-transform:uppercase;font-size:clamp(20px,2.2vw,28px);letter-spacing:.02em;margin-bottom:16px}
.ref-tarjeta p{font-size:15px;line-height:1.65;text-wrap:pretty}
.ref-tarjeta--clara{background:var(--crema-3)}
.ref-tarjeta--clara p{color:var(--texto)}
.ref-tarjeta--oscura{background:var(--tinta);color:var(--crema)}
.ref-tarjeta--oscura h2{color:var(--crema)}
.ref-tarjeta--oscura p{color:var(--crema-sobre-olivo);margin-bottom:20px}
.ref-tarjeta__lista{display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
.ref-tarjeta__lista li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--crema)}
.ref-tarjeta__lista li::before{
  content:'';flex:none;width:11px;height:14px;border-radius:99px 99px 0 0;
  background:#C99B84;margin-top:4px;
}

/* ---------- FAQ (details/summary: funciona sin JavaScript) ---------- */
.faq{border-top:1.5px solid rgba(43,40,32,.2)}
.faq summary{
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;font-weight:700;font-size:16.5px;line-height:1.4;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq__sim{flex:none;font-size:22px;font-weight:300;color:var(--arcilla);line-height:1}
.faq__sim::after{content:'+'}
.faq[open] .faq__sim::after{content:'–'}
.faq p{margin:0;padding:0 40px 24px 0;font-size:15px;line-height:1.65;color:var(--texto);text-wrap:pretty}
.faq__cierre{border-top:1.5px solid rgba(43,40,32,.2)}

/* ---------- Barra fija de móvil (solo en Reformas) ---------- */

/* ==========================================================================
   Formulario de contacto
   ========================================================================== */
.form{
  background:var(--crema-2);border:1.5px solid rgba(43,40,32,.2);
  border-radius:32px 32px 0 0;padding:42px 40px 40px;
  display:flex;flex-direction:column;gap:26px;
}
.campo label,.campo__label{
  display:block;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);margin-bottom:6px;
}
.campo input,.campo select,.campo textarea{
  width:100%;padding:9px 2px;background:transparent;border:none;
  border-bottom:1.5px solid rgba(43,40,32,.4);
  font-size:15px;font-family:inherit;color:var(--tinta);outline:none;
  border-radius:0;transition:border-color .2s;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-bottom-color:var(--arcilla)}
.campo select{cursor:pointer;-webkit-appearance:none;appearance:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232B2820' stroke-width='1.6'/%3E%3C/svg%3E") right 2px center/12px 8px no-repeat;
  padding-right:20px}
.campo textarea{resize:vertical;min-height:88px}
/* Consentimiento RGPD: casilla explícita, nunca premarcada. */
/* El campo de «otra localidad» solo aparece al elegir «Otro» en el desplegable.
   Sin JavaScript no se oculta nunca: mejor un campo de mas que uno inalcanzable. */
.campo[data-otra-localidad][hidden]{display:none}
.consentimiento{display:flex;gap:12px;align-items:flex-start}
.consentimiento input{
  flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--arcilla);cursor:pointer;
}
.consentimiento label{font-size:13px;line-height:1.5;color:var(--gris);cursor:pointer}
.consentimiento a{border-bottom:1px solid currentColor}

.form__acciones{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.form__nota{font-size:12px;line-height:1.5;color:var(--gris-claro);text-align:center}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ==========================================================================
   Banner de cookies
   ========================================================================== */
.cookies{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:70;
  max-width:620px;margin:0 auto;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding:20px 24px;
  background:var(--crema-2);
  border:1.5px solid rgba(43,40,32,.22);
  border-radius:20px;
  box-shadow:0 18px 44px rgba(43,40,32,.16);
}
.cookies__txt{flex:1;min-width:240px;font-size:13.5px;line-height:1.55;color:var(--texto)}
.cookies__txt a{border-bottom:1px solid currentColor}
.cookies__botones{display:flex;gap:10px;flex:none}
.cookies__botones .btn{padding:11px 22px;font-size:11px}
/* En Reformas hay barra fija abajo: el banner sube para no taparla. */
.en-reformas .cookies{bottom:90px}

/* ==========================================================================
   Footer
   ========================================================================== */
.pie{background:var(--olivo);color:var(--crema);position:relative;padding:34px var(--lat) 22px}
/* PRUEBA 27/08/2026: se retira el isotipo repetido de fondo del pie. Para
   recuperarlo, borrar la linea display:none. */
.pie::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url('../img/isotipo-crema.png') 0 0/130px auto repeat;opacity:.08;
  display:none;
}
.pie__inner{max-width:1100px;margin:0 auto;position:relative}
.pie__top{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;margin-bottom:22px}
.pie__tit{
  font-weight:900;text-transform:uppercase;line-height:1;letter-spacing:.01em;
  font-size:clamp(24px,2.4vw,31px);color:var(--crema);margin-bottom:8px;
}
.pie__sub{font-size:14.5px;line-height:1.5;color:var(--crema-sobre-olivo);max-width:440px;margin-bottom:16px;text-wrap:pretty}
.pie__botones{display:flex;gap:16px;flex-wrap:wrap}
.pie__botones .btn{padding:11px 24px}
/* El pie tiene el mismo terracota que el botón, así que aquí se invierte:
   crema con letra terracota. Si no, el botón se fundía con el fondo. */
.pie__botones .btn--arcilla{background:var(--crema);color:var(--olivo)}
.pie__botones .btn--arcilla:hover{background:var(--arcilla-honda);color:var(--crema)}
.pie__iso{display:flex;justify-content:center}
/* Discreto: 150px se comía el pie (cliente, 31 ago). */
.pie__iso img{height:72px;width:auto;opacity:.85}
.pie__mapa{
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
  border-top:1px solid rgba(242,240,233,.25);padding-top:18px;margin-bottom:14px;
}
.pie__mapa h2{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--olivo-claro);margin-bottom:8px;
}
.pie__mapa ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.pie__mapa a{font-size:13px;color:var(--crema-sobre-olivo)}
.pie__mapa a:hover{color:var(--crema)}
.pie__legal{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:1px solid rgba(242,240,233,.25);padding-top:13px;
}
.pie__legal img{height:14px;width:auto}
.pie__legal-txt{font-size:12.5px;color:var(--crema-sobre-olivo)}
.pie__legal-txt a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   Páginas de texto (legales, gracias)
   ========================================================================== */
.texto{max-width:760px;margin:0 auto;padding:150px var(--lat) 110px}
.texto h2{
  font-weight:900;text-transform:uppercase;font-size:20px;letter-spacing:.02em;
  margin:46px 0 14px;
}
.texto p,.texto li{font-size:15.5px;line-height:1.7;color:var(--texto);text-wrap:pretty}
.texto p{margin-bottom:14px}
.texto ul{padding-left:20px;margin:0 0 14px}
.texto li{margin-bottom:8px}
.texto a{border-bottom:1px solid currentColor}
.texto button{margin-top:6px}
/* Tabla de cookies: se desplaza sola en móvil en vez de romper la página. */
.texto table{
  width:100%;border-collapse:collapse;margin:0 0 18px;
  font-size:14px;display:block;overflow-x:auto;
}
.texto th,.texto td{
  border:1px solid rgba(43,40,32,.18);padding:9px 12px;
  text-align:left;vertical-align:top;line-height:1.5;
}
.texto th{background:var(--crema-3);font-weight:700;white-space:nowrap}
.texto code{font-family:var(--mono);font-size:12.5px;background:var(--crema-3);padding:1px 5px;border-radius:3px}
.pendiente{
  display:inline-block;background:#F6E4C8;border:1px dashed #B0843B;color:#6B4E14;
  padding:1px 8px;border-radius:4px;font-family:var(--mono);font-size:12.5px;
}
.gracias{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:150px var(--lat) 110px;gap:26px;
}

/* ==========================================================================
   Animaciones
   ========================================================================== */
@keyframes reveal{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes subir{from{opacity:0;transform:translateY(52px)}to{opacity:1;transform:none}}
@keyframes crecer{from{transform:translateX(-50%) scaleY(.6);transform-origin:bottom}to{transform:translateX(-50%) scaleY(1);transform-origin:bottom}}

/* Aparición al entrar en pantalla.
   La clase .js la añade el propio documento; sin JavaScript —o si el script
   falla— todo se ve desde el primer momento y nunca queda contenido oculto.
   (Se probó con `animation-timeline: view()`, como en el prototipo, pero deja
   secciones invisibles en páginas que no llegan a tener scroll.) */
.js .aparece{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .proceso__relleno{opacity:0;transition:opacity .7s var(--ease)}
.js .aparece.visible,
.js .proceso__relleno.visible{opacity:1;transform:none}
.js .proceso__item:nth-child(2) .proceso__relleno{transition-delay:.14s}
.js .proceso__item:nth-child(3) .proceso__relleno{transition-delay:.28s}

/* ==========================================================================
   Hub de servicios — las tres tarjetas
   ========================================================================== */
.srv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.srv-card{
  display:flex;flex-direction:column;
  padding:34px 30px 28px;color:inherit;
  background:var(--crema-2);border:1.5px solid rgba(43,40,32,.2);
  border-radius:26px 26px 0 0;
  transition:border-color .25s,background .25s,transform .25s var(--ease);
}
.srv-card:hover{background:#fff;border-color:var(--arcilla);color:inherit;transform:translateY(-4px)}
.srv-card__tit{
  font-weight:900;text-transform:uppercase;letter-spacing:.02em;line-height:1.1;
  font-size:22px;margin-bottom:12px;text-wrap:balance;color:var(--tinta);
}
.srv-card__txt{font-size:14.5px;line-height:1.6;color:var(--texto);margin-bottom:22px;text-wrap:pretty}
.srv-card__ir{
  margin-top:auto;align-self:flex-start;
  font-size:13.5px;font-weight:700;letter-spacing:.06em;color:var(--arcilla);
  border-bottom:2px solid var(--arcilla);padding-bottom:3px;
}

/* ---------- Pestañas entre servicios ---------- */
.srv-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px}
.srv-tabs a{
  padding:9px 20px;border-radius:999px;
  border:1.5px solid rgba(43,40,32,.35);color:var(--tinta);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s,color .2s,border-color .2s;
}
.srv-tabs a:hover{border-color:var(--tinta);color:var(--tinta)}
.srv-tabs a[aria-current="page"]{background:var(--tinta);border-color:var(--tinta);color:var(--crema)}

/* ==========================================================================
   El taller (Estudio)
   ========================================================================== */
.taller{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:60px;align-items:center}
.taller__arcos{display:flex;margin-bottom:22px}
.taller__arco{
  width:26px;height:34px;border-radius:99px 99px 0 0;
  border:2px solid var(--olivo);box-sizing:border-box;
}
.taller__arco--lleno{background:var(--arcilla);border-color:var(--arcilla);margin:0 -7px}
.taller__txt{margin:22px 0 0;max-width:460px;font-size:16px;line-height:1.65;color:var(--texto);text-wrap:pretty}
.taller__futuro{margin:14px 0 0;max-width:460px;font-size:16px;line-height:1.6;color:var(--arcilla);font-weight:600;text-wrap:pretty}
.taller__fotos{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.taller__desliza,.desliza{display:none}
.nota-flujo{margin-top:40px}
.taller__foto{height:213px;border-radius:14px}
.taller__foto--alta{grid-row:span 2;height:440px;border-radius:220px 220px 0 0}

/* ==========================================================================
   Obra nueva
   ========================================================================== */
.parcela{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:26px 40px}
.parcela__item{display:flex;gap:18px;align-items:flex-start;padding-top:22px;border-top:1.5px solid rgba(43,40,32,.2)}
.parcela__n{
  flex:none;width:30px;height:38px;border-radius:15px 15px 0 0;background:var(--arcilla);
  display:flex;align-items:center;justify-content:center;
  color:var(--crema);font-weight:900;font-size:14px;
}
.parcela__item h3{font-weight:900;text-transform:uppercase;font-size:15px;letter-spacing:.03em}
.parcela__item p{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--texto);text-wrap:pretty}

.on-pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:18px}
.on-paso{padding:24px 22px;border-radius:14px;background:rgba(242,240,233,.1)}
.on-paso--espera{background:var(--tinta);border-radius:26px 26px 0 0;padding:30px 26px}
.on-paso__plazo{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#B9B69F;padding-bottom:10px;margin-bottom:12px;
  border-bottom:1.5px solid rgba(242,240,233,.25);
}
.on-paso--espera .on-paso__plazo{color:#C99B84;border-bottom-color:rgba(201,155,132,.4)}
.on-paso h3{font-weight:900;text-transform:uppercase;font-size:15px;letter-spacing:.03em;color:var(--crema)}
.on-paso__txt{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:var(--crema-sobre-olivo);text-wrap:pretty}

.on-espera{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:40px;margin-top:50px}
.on-espera__tit{
  font-weight:900;text-transform:uppercase;font-size:17px;letter-spacing:.03em;
  color:#C99B84;margin-bottom:12px;
}
.on-espera p{font-size:15px;line-height:1.65;color:var(--crema-sobre-olivo);text-wrap:pretty}

/* Etiqueta de render: un render nunca se presenta como obra terminada. */
.con-render{position:relative}
.render-tag{
  position:absolute;left:16px;top:16px;z-index:2;
  background:var(--tinta);color:var(--crema);
  padding:7px 14px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.on-des{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:36px}
.on-des__item{margin:0}
.on-des__foto{
  height:340px;border-radius:170px 170px 0 0;
  /* Cada proyecto lleva su color, como los «libros» del portafolio. Se usa el
     acento y no el relleno: en el libro blanco y negro el relleno es crema y
     sobre fondo crema no se vería. */
  border-bottom:6px solid var(--acento-proyecto,var(--arcilla));
}
.on-des__item figcaption{
  margin-top:18px;display:grid;grid-template-columns:auto 1fr;
  column-gap:10px;align-items:center;
}
.on-des__punto{
  width:14px;height:18px;border-radius:99px 99px 0 0;
  background:var(--color-proyecto,var(--arcilla));
  border:1px solid var(--acento-proyecto,var(--arcilla));
}
.on-des__item h3{font-weight:900;text-transform:uppercase;font-size:17px;letter-spacing:.04em}
.on-des__item figcaption p{grid-column:2;margin-top:6px;font-size:13px;color:var(--gris)}
/* Aviso de que la tarjeta se puede pulsar: sin el, la imagen parecia decorativa
   y los renders de dentro no se descubrian (cliente, 27 ago). */
.on-des__ver{
  grid-column:2;justify-self:end;align-self:center;
  font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--arcilla);
  border-bottom:1.5px solid var(--arcilla);padding-bottom:2px;
  transition:color .25s,border-color .25s;
}
.on-des__item figcaption h3{grid-column:2;grid-row:1}
.on-des__enlace:hover ~ figcaption .on-des__ver,
.on-des__item:hover .on-des__ver{color:var(--arcilla-honda);border-bottom-color:var(--arcilla-honda)}

/* ==========================================================================
   Interiorismo
   ========================================================================== */
.int-comp{display:flex;flex-direction:column;gap:18px;margin-bottom:36px}
.int-comp__fila{display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:20px;align-items:center}
.int-comp__quien{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--gris)}
.int-comp__quien--nos{color:var(--arcilla)}
.int-comp__barras{display:flex;gap:6px}
.int-comp__barras--juntas .int-comp__barra{flex:1}
.int-comp__barra{
  display:flex;align-items:center;justify-content:center;
  height:44px;border-radius:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.int-comp__barra--obra{background:var(--crema-4);color:var(--gris)}
.int-comp__barra--int{background:var(--arcilla);color:var(--crema)}
.chips--claros{margin-top:8px}
.chip--claro{border-color:var(--arcilla);color:var(--arcilla)}

.int-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.int-gal__item{margin:0;grid-column:span var(--ancho,1)}
.int-gal__item figcaption{
  margin-top:10px;font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--tinta);
}
.int-gal__item figcaption span{font-weight:400;color:var(--gris)}

.int-lista{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}

.int-modelos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:24px}
.int-modelo{
  padding:30px 26px;background:var(--crema-2);
  border:1.5px solid rgba(43,40,32,.18);border-radius:20px 20px 0 0;
}
.int-modelo h3{font-weight:900;text-transform:uppercase;font-size:16px;letter-spacing:.03em;margin-bottom:10px}
.int-modelo p{font-size:14.5px;line-height:1.6;color:var(--texto);text-wrap:pretty}

/* Proceso sobre fondo claro (Interiorismo) */
.ref-pasos--claro .ref-pasos__plazo{color:var(--arcilla);border-bottom-color:rgba(43,40,32,.2)}
.ref-pasos--claro h3{color:var(--tinta)}
.ref-pasos--claro p{color:var(--texto)}

/* Aviso de dato pendiente al pie de una sección */
.aviso-pendiente{margin-top:34px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  :root{--lat:28px}
  .dosCol,.dosCol--iguales{grid-template-columns:1fr;gap:44px}
  .dosCol__iso img{height:180px}
  .caso__texto{grid-template-columns:1fr;gap:30px}
  .ficha{grid-template-columns:1fr 1fr;gap:26px}
  .ficha__servicios-wrap{grid-column:span 2}
  .ref-inc,.ref-precio{grid-template-columns:1fr;gap:34px}
  .ref-inc__tit{position:static}
  .ref-pasos{grid-template-columns:repeat(2,1fr);gap:36px 28px}
  .ref-tarjetas{grid-template-columns:1fr;gap:24px}
  .srv-cards{grid-template-columns:1fr;gap:12px}
  .srv-card{padding:20px 20px 18px;border-radius:18px 18px 0 0}
  .srv-card__tit{font-size:17px;margin-bottom:8px}
  .srv-card__txt{font-size:12.5px;line-height:1.5;margin-bottom:12px}
  .srv-card__ir{font-size:12px}
  .int-lista{grid-template-columns:1fr;gap:36px}
  .int-gal{grid-template-columns:repeat(2,1fr)}
  .int-gal__item{grid-column:span 1}
  .pie__top{grid-template-columns:1fr;gap:26px;margin-bottom:38px}
  .pie__iso{order:-1;justify-content:flex-start}
  .pie__iso img{height:64px}

  /* Al plegarse a varias filas, la balda común deja de tener sentido:
     cada arco pasa a apoyarse en su propio tramo de línea. */
  .estanteria{border-bottom:none;align-items:flex-end}
  .lomo{border-bottom:3px solid var(--tinta)}
  .lomo:hover,.lomo:focus-visible{transform:none}
}

/* «Contacto» solo aparece en el menú móvil: en escritorio su sitio es el
   botón de llamada a la acción del header. */
.solo-movil{display:none}

@media (max-width:1024px){
  /* Menú móvil */
  .nav-toggle{display:block}
  .solo-movil{display:block}
  .hdr{flex-wrap:wrap;padding:14px var(--lat)}
  .nav{
    display:none;order:3;width:100%;flex-direction:column;align-items:flex-start;gap:0;
    padding:10px 0 4px;margin-top:12px;border-top:1px solid rgba(43,40,32,.12);
  }
  .nav.is-open{display:flex}
  /* display:block importa: los <a> hijos directos de .nav se «blockifican»
     solos por ser ítems flex, pero «Servicios» vive dentro de .nav__grupo
     (block) y seguía inline: su padding vertical pintaba sin ocupar sitio y
     la fila se solapaba con Proyectos y con Reformas. */
  .nav a{display:block;width:100%;padding:13px 0;border-bottom:1px solid rgba(43,40,32,.08);font-size:13px}

  /* En móvil no hay «pasar el cursor»: el submenú va siempre desplegado y
     sangrado bajo Servicios. */
  .nav__grupo{display:block;width:100%}
  .nav__sub{
    position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;margin:0;padding:0;border:none;border-radius:0;box-shadow:none;
    background:transparent;
  }
  .nav__sub::before{display:none}
  /* mismo respiro vertical que los ítems principales: si no, «Reformas»
     queda pegado a la raya de «Servicios» */
  .nav__sub a{padding:13px 0 13px 18px;font-size:12px}
  .nav a[aria-current="page"]{border-bottom-color:rgba(43,40,32,.08);color:var(--arcilla)}
  .hdr__acciones .btn{display:none}

  .sec{padding:36px var(--lat)}
  .sec--cabecera{padding:96px var(--lat) 44px}
  .textura{padding:36px var(--lat)}
  .caso{padding:96px var(--lat) 64px}
  .otros{padding:60px var(--lat) 78px}
  .texto,.entrada{padding-top:96px}

  .manifiesto p{font-size:14px;max-width:340px;margin-top:16px}

  /* El proceso en móvil (dirección A): filas de lista con el arco pequeño a
     la izquierda, no los tres arcos grandes apilados (se comían pantalla y
     media). */
  .proceso__cab{text-align:left;margin-bottom:26px}
  .proceso{grid-template-columns:1fr;gap:0;justify-items:stretch}
  .proceso__item{
    flex-direction:row;align-items:flex-start;text-align:left;gap:16px;
    padding:18px 0;border-bottom:1px solid rgba(43,40,32,.12);
  }
  .proceso__item:last-child{border-bottom:none}
  .proceso__arco{width:34px;height:42px;flex:none}
  .proceso__n{font-size:15px;align-items:flex-end;padding-bottom:4px}
  .proceso__tit{font-size:15px}
  .proceso__txt{margin:4px 0 0;max-width:none;font-size:13px}
  .dest,.servicios{grid-template-columns:1fr;gap:44px}
  .dest__foto{height:480px}
  .argumentos ul{grid-template-columns:1fr}
  .diario__item{grid-template-columns:1fr;gap:22px;padding:38px 0}
  .diario__foto{height:220px;border-radius:110px 110px 0 0}
  .galeria{grid-template-columns:1fr}
  .galeria .foto:last-child:nth-child(even):not(.foto--completa){width:auto}
  /* La galería de renders a una columna; aspect-ratio mantiene el 3:2. */
  .on-gal{grid-template-columns:1fr;gap:18px}
  .galeria .foto:first-child{grid-column:span 1;border-radius:180px 180px 0 0}
  .galeria .foto.foto--sin-arco:first-child{border-radius:0}
  /* En móvil, las fotos pequeñas de las fichas (verticales) van a proporción
     3:4 para verse enteras; la grande apaisada conserva sus 300 px. */
  .galeria .foto{height:480px!important}
  .galeria .foto:first-child{height:300px!important}
  .galeria .foto--completa{height:auto!important}
  .galeria .foto--entera{height:auto!important}
  .carrusel .carrusel__item{height:400px}
  .entrada__foto{height:320px;border-radius:160px 160px 0 0}
  .pie{padding:52px var(--lat) 34px}
  .pie__mapa{grid-template-columns:1fr 1fr;gap:30px}

  /* Hero en móvil (dirección B del lienzo, 31/08): sin vídeo. El arco pasa a
     ser un marco DIBUJADO a línea, centrado, con el titular viviendo dentro
     (el titular es hermano del arco, así que se monta encima con un margen
     negativo). El resto del texto, sobre crema limpia. */
  .hero{min-height:auto;padding:92px var(--lat) 6px;align-items:center}
  .hero__video{display:none}
  .hero__arco--video::after{background:none}
  /* Especificidad doble a propósito: el bloque de prefers-reduced-motion
     (final de la hoja) reimpone transform:translateX(-50%), y los keyframes
     de «crecer» lo llevan cocinado dentro (fill both): ni posición absoluta
     ni esa animación sirven aquí. */
  .hero .hero__arco{
    position:relative;left:auto;top:auto;bottom:auto;transform:none;order:2;
    width:min(76vw,300px);height:340px;margin:0;
    border:2px solid var(--tinta);border-bottom-width:2.5px;
    border-radius:999px 999px 0 0;
    background:linear-gradient(180deg,var(--crema-3) 0%,var(--crema) 62%);
    animation:subir .9s .15s var(--ease) both;
  }
  .hero__kicker{order:1;margin-bottom:0;padding-bottom:22px;text-align:center;font-size:10.5px;letter-spacing:.22em}
  .hero__titulo{
    order:3;z-index:2;margin:-140px 0 0;align-items:center;
    font-size:clamp(32px,10vw,40px);
  }
  .hero__t1,.hero__t2,.hero__t3{align-self:center}
  .hero__t2{-webkit-text-stroke-width:1.5px}
  /* Sin foto no hay nota de producción que colocar. */
  .hero__arco-nota{display:none}
  .hero__pie{
    order:4;flex-direction:column;align-items:center;text-align:center;
    gap:20px;border-top:none;padding-top:0;width:100%;
    /* el titular va montado sobre el arco con margen negativo: este margen
       devuelve el pie a debajo del borde del arco (medido: sin él, la
       primera línea del párrafo cruzaba la raya) */
    margin:66px 0 36px;
  }
  .hero__sub{max-width:310px;font-size:14px}
  .hero__acciones{width:100%;justify-content:center}

  /* Reformas */
  /* Heroes de servicio en móvil (plantilla del lienzo, 31/08): la IMAGEN es
     la protagonista. Orden: kicker, pestañas, un H1 contenido, la foto o el
     comparador A SANGRE, y debajo el párrafo con el botón. El H1 conserva su
     texto completo (SEO); solo baja de tamaño. */
  .ref-hero{padding-top:92px;display:flex;flex-direction:column;align-items:stretch}
  .ref-hero > .kicker{order:1}
  .ref-hero .srv-tabs{order:2}
  .ref-hero h1{order:3;font-size:clamp(21px,6.4vw,25px);line-height:1.05;margin-bottom:16px}
  .ref-hero > .ad--hero,.ref-hero > .con-render,.ref-hero > .foto{order:4}
  /* La foto de servicio va a sangre, como el comparador de Reformas. */
  .ref-hero > .con-render,.ref-hero > .foto.ref-hero__foto{
    width:100vw;margin-left:calc(50% - 50vw);border-radius:0;
  }
  .ref-hero__pie{order:5;gap:16px;margin-top:18px}
  .ref-hero__pie p{font-size:13.5px;line-height:1.5}
  .ref-hero__pie .btn{width:auto;align-self:flex-start}
  /* La portada del hero de servicio se ve ENTERA: alto natural de la foto,
     nada de recorte por altura fija (petición del cliente, Obra nueva). */
  .ref-hero__foto{height:auto;border-radius:0}
  .ref-hero > .foto.ref-hero__foto img{position:static;height:auto}
  .ref-hero__foto--entera{height:auto;border-radius:0}
  .ref-hero__foto.ref-hero__foto--recta{height:480px;border-radius:12px}
  .ref-hero__foto.ref-hero__foto--sin-arco{border-radius:12px}
  /* «Cuánto tarda» en móvil (plantilla del lienzo): línea de tiempo sobre
     tarjeta clara — raíl, punto y el plazo en chip — en vez del bloque
     terracota con columnas. sec--pasos marca las secciones oscuras de
     Reformas y Obra nueva para aclararlas SOLO aquí; la de Interiorismo
     (ref-pasos--claro) ya era clara. */
  .sec--pasos{background:var(--crema);color:var(--texto)}
  .sec--pasos .display{color:var(--tinta)}
  .sec--pasos .wrap--ancho > p{color:var(--texto)!important}
  .ref-pasos,.on-pasos{
    display:flex;flex-direction:column;gap:0;
    background:var(--crema-3);border-radius:16px;padding:20px 18px 14px;
  }
  .ref-pasos > div,.on-paso,.on-paso--espera{
    position:relative;padding:0 0 18px 26px;background:none;border-radius:0;
  }
  .ref-pasos > div::before,.on-paso::before{
    content:'';position:absolute;left:3.5px;top:9px;bottom:-3px;width:1.5px;
    background:rgba(43,40,32,.18);
  }
  .ref-pasos > div:last-child::before,.on-paso:last-child::before{display:none}
  .ref-pasos > div::after,.on-paso::after{
    content:'';position:absolute;left:0;top:5px;width:9px;height:9px;
    border-radius:99px;background:var(--arcilla);
  }
  /* Especificidad doble a propósito (la lección de la raya del 24/08): el
     plazo pasa de raya subrayada a chip. */
  .ref-pasos .ref-pasos__plazo,.on-pasos .on-paso__plazo{
    display:inline-block;margin:0;padding:3px 10px;
    border:1px solid var(--arcilla);border-radius:999px;
    font-size:9.5px;color:var(--arcilla);
  }
  .ref-pasos h3,.on-paso h3{color:var(--tinta);font-size:13px;margin:8px 0 0}
  .ref-pasos p:not(.ref-pasos__plazo),.on-paso .on-paso__txt{color:var(--texto);font-size:12.5px;margin:4px 0 0}
  .on-paso--espera .on-paso__plazo{color:var(--arcilla);border-color:var(--arcilla)}

  /* La pagina /servicios/: los bloques 1-2-3 de Arquitectura/Interiorismo/
     Construccion pasan a filas compactas, como el proceso de la home. */
  .servicios{gap:0;margin-bottom:36px}
  .servicios > section{
    display:grid;grid-template-columns:34px 1fr;column-gap:16px;
    padding:16px 0;border-bottom:1px solid rgba(43,40,32,.12);
  }
  .servicios > section:last-child{border-bottom:none}
  .servicios .servicios__n{
    grid-row:1 / 3;width:34px;height:42px;border-radius:99px 99px 0 0;
    font-size:15px;margin:0;align-items:flex-end;padding-bottom:4px;
  }
  .servicios__tit{grid-column:2;font-size:15px;margin-bottom:2px}
  .servicios__txt{grid-column:2;font-size:13px;line-height:1.5}
  .sec--dest{padding-bottom:40px}

  /* Ritmo de flujo también en las secciones que antes iban con padding inline. */
  .sec--flujo{padding:24px var(--lat) 40px}
  .sec--formulario{padding:16px var(--lat) 56px}
  .cab-flujo{margin-bottom:22px}
  .nota-flujo{margin-top:16px}
  /* Botones y textos, un punto más contenidos en teléfono. */
  .btn{padding:12px 22px;font-size:11px;letter-spacing:.12em}
  .lead{font-size:14.5px}
  /* Especificidad doble: el .sec del bloque 560 le pisaba el padding y el
     título quedaba mordido por el header fijo (medido: 36px vs 92 del resto). */
  .sec.sec--contacto{padding-top:96px;padding-bottom:44px}

  /* El cierre del proceso se ancla a la lista: raya arriba, alineado a la
     izquierda y tipografía de remate — antes flotaba a 108px y parecía otra
     sección. */
  .proceso__cierre{margin-top:26px;text-align:left;border-top:1.5px solid rgba(43,40,32,.25);padding-top:16px}
  .proceso__cierre-tit{font-size:13px;letter-spacing:.05em}
  .proceso__cierre p{margin:8px 0 0;max-width:none;font-size:13px;text-align:left}

  /* Ficha: respiros internos medidos y «otros proyectos» sin colchón doble. */
  .caso .ficha{margin-top:16px}
  .caso .carrusel,.caso .galeria{margin-top:20px}
  .caso__texto{margin-top:24px}
  .otros{padding:28px var(--lat) 44px}

  /* «Qué incluye» y «Antes de comprar la parcela» en móvil: tira horizontal
     de tarjetas (mismo gesto que proyectos y el taller), en vez de la lista
     vertical eterna. Todo el texto sigue ahí; se recorre con el pulgar. */
  .ref-inc > div{
    display:flex;overflow-x:auto;gap:12px;align-items:stretch;
    margin-right:calc(-1 * var(--lat));padding-right:var(--lat);
    padding-bottom:8px;scrollbar-width:none;
  }
  .ref-inc > div::-webkit-scrollbar{display:none}
  .ref-inc__item{
    flex:none;width:236px;flex-direction:column;gap:10px;
    margin:0;padding:16px;border:1px solid rgba(43,40,32,.15);border-top-width:1px;
    border-radius:14px;background:var(--crema-2);
  }
  /* La parcela va en filas verticales: dos tiras seguidas (parcela + incluye)
     redundaban el gesto. */
  .parcela{gap:0}
  .parcela__item{padding:14px 0;border-top:1px solid rgba(43,40,32,.15)}
  .ref-inc__item h3,.parcela__item h3{font-size:13.5px}
  .ref-inc__item p,.parcela__item p{font-size:12.5px;line-height:1.5;margin-top:6px}
  .ref-inc__n{width:28px;height:35px;font-size:13px}
  .parcela__n{width:26px;height:33px;font-size:12px}
  /* El enlace «ver los servicios» que cierra la lista viaja como última tarjeta. */
  .ref-inc > div > p:last-child{
    flex:none;width:auto;display:flex;align-items:center;margin:0;padding:0 8px;
    border:none;background:none;
  }

  /* Estudio: el isotipo a escala (se plantaba a 186px de ancho) y los tres
     oficios como píldoras legibles sobre el terracota. */
  /* El isotipo del «porqué del nombre» no se enseña en móvil: el motivo ya
     vive en el glifo del taller y en las píldoras de oficios. */
  .dosCol__iso{display:none}
  .sec--olivo .chips{gap:8px}
  .sec--olivo .chip{
    border-color:rgba(251,243,238,.55);font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;padding:8px 14px;border-radius:999px;
  }

  /* Interiorismo: las barras del decorador, apiladas y con sitio para la
     palabra «Interiorismo» (mínimo de ancho; la proporción apenas cambia). */
  .int-comp__fila{grid-template-columns:1fr;gap:8px}
  .int-comp__barra{height:38px;font-size:9.5px;letter-spacing:.06em}
  .int-comp__fila:first-child .int-comp__barra--int{min-width:96px}

  /* La ficha de proyecto en móvil: la foto sube (galería justo tras la
     cabecera, el relato después), la ficha técnica va en dos columnas y la
     galería rompe el muro de recortes iguales: la primera a lo ancho y el
     resto en parejas. Vale igual para el caso emergente de /proyectos/. */
  .caso .wrap{display:flex;flex-direction:column}
  .caso__cab{order:1}
  .caso .ficha{order:2;grid-template-columns:1fr 1fr;gap:14px 20px;margin-top:4px}
  .caso .ficha__servicios-wrap{grid-column:1 / -1}
  .caso .carrusel,.caso .galeria{order:3;margin-top:22px}
  .caso__texto{order:4;margin-top:26px}
  .caso__texto h2{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em}
  .caso__texto p{font-size:13.5px;line-height:1.55}
  /* minmax(0,1fr): sin él, el ancho mínimo de la imagen revienta la pista
     (la ficha desbordaba 31px — medido). */
  .galeria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .galeria .foto{height:auto!important;aspect-ratio:3/4;border-radius:12px}
  /* height:auto!important a propósito: la vieja regla de 300px!important sigue
     arriba y, con aspect-ratio, convertía la altura fija en 400px de ANCHO
     (la ficha desbordaba). */
  .galeria .foto:first-child{grid-column:1 / -1;aspect-ratio:4/3;height:auto!important}
  /* Las «entera»/«completa» conservan su proporción natural y toda la fila
     (después de :first-child a propósito: si la primera es entera, gana esto). */
  .galeria .foto.foto--entera,.galeria .foto.foto--completa{grid-column:1 / -1;aspect-ratio:auto;height:auto!important}
  .srv-tabs{gap:8px;margin-bottom:22px}
  .srv-tabs a{padding:8px 15px;font-size:11px;letter-spacing:.08em}
  .taller__fotos{grid-template-columns:1fr 1fr}
  /* El taller en teléfono: tira horizontal con las piezas ENTERAS — las tres
     fotos son 3:4 y el marco es 3:4, así que no se recorta nada (el cliente
     no quería verlas cortadas ni en el mosaico de antes). */
  .taller__fotos{
    display:flex;gap:12px;overflow-x:auto;
    margin-right:calc(-1 * var(--lat));padding-right:var(--lat);
    padding-bottom:6px;scrollbar-width:none;
  }
  .taller__fotos::-webkit-scrollbar{display:none}
  .taller__fotos .taller__foto{flex:none;width:224px;height:298px;border-radius:12px}
  .taller__fotos .taller__foto--alta{grid-row:auto;grid-column:auto;width:224px;height:298px;border-radius:12px}
  .taller__desliza,.desliza{display:block;margin:8px 0 0;text-align:right;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--gris-claro)}
  /* Los planos son dibujo técnico transparente: en tarjeta y ENTEROS
     (contain), nada de arco con recorte. El acento de color del proyecto
     pasa al filo inferior de la tarjeta. */
  .on-des{gap:30px}
  .on-des .con-render{
    background:var(--crema-2);border:1px solid rgba(43,40,32,.14);
    border-bottom:3px solid var(--acento-proyecto,var(--arcilla));
    border-radius:14px;padding:34px 14px 16px;
  }
  .on-des__foto{height:190px;border-radius:0;border-bottom:none;background:none}
  .on-des__foto img{object-fit:contain}
  .on-des__item figcaption{margin-top:12px}
  .on-des__item h3{font-size:15px}
  .on-des__item figcaption p{font-size:12px;margin-top:3px}
  .int-gal{grid-template-columns:1fr}
  /* A una columna, cada foto de la galería va entera, a su alto natural. */
  .int-gal .foto{height:auto!important}
  .int-gal .foto img{height:auto}
  .int-comp__fila{grid-template-columns:1fr;gap:10px}
  .render-tag{left:12px;top:12px;font-size:9.5px;padding:6px 11px}
  .ad{height:340px}
  .ad.ad--foto{aspect-ratio:4/5;max-height:none;height:auto}
  /* En móvil el comparador de renders conserva su 3:2 (son apaisados). */
  .ad.ad--foto.ad--render{aspect-ratio:1534/1003}
  .ad--render .ad__etiqueta{top:auto;bottom:14px}
  /* Tambien en movil manda la proporcion real de las fotos (4:3): se ven
     completas, sin recorte lateral. */
  .ad.ad--foto.ad--hero{aspect-ratio:4/3;width:100vw;margin-left:calc(50% - 50vw)}
  .ad__etiqueta{top:14px;font-size:10px;padding:6px 12px}
  .ad__etiqueta--antes{left:12px}
  .ad__etiqueta--despues{right:12px}
  .ad__tirador{width:42px;height:42px;font-size:14px}
  .ref-tarjeta{padding:34px 26px}
  .faq summary{font-size:15.5px;padding:18px 0}
  .faq p{padding-right:10px}
}

/* La barra fija de llamada a la acción, solo en Reformas y solo en móvil
   (el prototipo la activa por debajo de 760 px). El <body> reserva su altura
   para que no tape el final del pie. */
@media (max-width:760px){
  /* Estantería: al abrirse, el libro ocupa una fila para él solo y, según su
     posición en el DOM, dejaba lomos sueltos repartidos arriba y abajo. Con
     order pasa siempre el primero y los lomos cerrados se reagrupan juntos
     en la fila de debajo (4 lomos = 304 px, caben hasta a 360). */
  .libro.is-abierto{order:-1}

  /* Proyectos destacados en móvil (dirección A): tira horizontal deslizable
     en vez de tres tarjetas de 280 px apiladas. Se sangra hasta el borde
     derecho para que se vea que hay más. */
  .dest__cab{margin-bottom:22px}
  .dest{
    display:flex;gap:14px;overflow-x:auto;
    margin-right:calc(-1 * var(--lat));padding-right:var(--lat);
    padding-bottom:8px;scrollbar-width:none;
  }
  .dest::-webkit-scrollbar{display:none}
  .dest__card{flex:none;width:168px}
  .dest__foto{height:216px;border-radius:84px 84px 0 0}
  .dest__pie{margin-top:10px;gap:7px}
  .dest__nombre{font-size:11.5px}
  .dest__meta{font-size:10px}
  /* En movil se retira el isotipo del pie: quedaba suelto sobre el titular y
     el fondo ya lleva el patron de arcos. Ahorra unos 130 px de scroll. */
  .pie__iso{display:none}
}

@media (max-width:560px){
  :root{--lat:20px}
  /* Mismo ritmo que el bloque de 1024: este bloque pisaba los paddings
     nuevos y descuadraba los huecos en teléfonos reales. */
  .sec{padding:36px var(--lat)}
  .sec--cabecera{padding:92px var(--lat) 34px}
  .textura{padding:36px var(--lat)}
  .caso{padding:92px var(--lat) 56px}
  .texto,.entrada{padding-top:92px}
  .ficha{grid-template-columns:1fr;gap:20px}
  .ficha__servicios-wrap{grid-column:span 1}
  .form{padding:32px 24px 30px;border-radius:24px 24px 0 0}
  /* A 390 px, 44 px de mínimo dejaban «INTERLOCUTOR.» sin sitio. */
  .display--xl{font-size:clamp(30px,8.5vw,44px)}
  .hero__titulo{font-size:clamp(30px,9vw,46px)}
  .hero__t2{-webkit-text-stroke-width:1.8px}
  .hero__acciones{flex-direction:column;align-items:stretch;gap:16px}
  .hero__scroll{display:none}
  .hero__acciones .btn{width:100%}
  .estanteria{gap:18px}
  .lomo__arco{width:132px;height:calc(var(--alto) * .74)}
  /* Dos columnas, no una: a una sola el pie se convierte en un churro
     larguísimo que obliga a hacer scroll sin necesidad. */
  .pie__mapa{grid-template-columns:1fr 1fr;gap:24px 20px}
  .pie__mapa a{font-size:13px}
  .pie__legal{flex-direction:column;align-items:flex-start;gap:14px}
  .caso__cab{flex-direction:column}
}

/* ---------- Accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .hero__arco,.hero__kicker,.hero__titulo span,.hero__pie{animation:none;opacity:1;transform:none}
  .hero__arco{transform:translateX(-50%)}
  .js .aparece{opacity:1;transform:none}
}

/* ---------- Impresión ---------- */
@media print{
  .hdr,.nav-toggle,.pie__botones,.form,.skip-link{display:none}
  body{background:#fff}
  .sec,.textura,.caso{padding:20px 0}
}