/* ── 00 · Fuentes (alojadas en el propio dominio) ─────────────────────────
   Sin llamada a Google Fonts: una petición menos, cero terceros, mejor LCP.
   Subconjunto «latin», suficiente para el español. 68 KB en total. */
@font-face{
  font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================================
   RAMDERS · hoja de estilos única
   Arquitectura & Construcción · Chile
   ----------------------------------------------------------------------------
   Índice
     01  Temas y tokens
     02  Reinicio y base
     03  Tipografía
     04  Utilidades de rejilla y sección
     05  Cabecera y menú
     06  Pie
     07  Animación de aparición
     08  Portadas y capas
     09  Índice de obras
     10  Tarjetas de servicio
     11  Proceso
     12  Visores (carácter, programa)
     13  Barrido antes / después
     14  Alcance y volumen 3D
     15  Formulario
     16  Botones
     17  Página de sistema
     18  Movimiento reducido e impresión
   ========================================================================= */

/* ── 01 · Temas y tokens ─────────────────────────────────────────────────── */

:root[data-tema="arq"]{
  --fondo:#F7F5F0; --panel:#FFFFFF; --texto:#14161A;
  /* --tenue estaba en #6B6E76: 4,68:1, apenas sobre el mínimo de 4,5. Durante
     la transición de tema el navegador pasa por tonos intermedios y caía por
     debajo. Este da 5,27:1 y deja margen. */
  --medio:#4A4D54; --tenue:#63666E; --linea:#E2DED5; --acento:#B08D4F;
  /* El latón #B08D4F sobre marfil da 2,85:1 — no alcanza para texto (WCAG
     pide 4,5:1). Este tono más profundo da 5,67:1 y se usa en todo lo que
     sea letra, borde fino o anillo de foco. El latón queda para superficies. */
  --acento-texto:#7A5C2E; --error:#B4443A;
  --vidrio:rgba(247,245,240,.84); --velo:rgba(20,22,26,.07);
  --acento-claro:#D8B979;
}
:root[data-tema="grid"]{
  --fondo:#0D0E10; --panel:#17191D; --texto:#F4F2EE;
  --medio:#C8CACE; --tenue:#9EA1A7; --linea:#282B31; --acento:#C87D3A;
  /* Sobre carbón el cobre ya da 5,93:1: no necesita versión oscurecida.
     El rojo de error sí, porque #B4443A sobre negro cae a 3,52:1. */
  --acento-texto:#C87D3A; --error:#D9695C;
  --vidrio:rgba(13,14,16,.8); --velo:rgba(244,242,238,.06);
  --acento-claro:#E0995A;
}

:root{
  /* Escala */
  --h-cab:92px; --logo-h:56px; --px:clamp(22px,6vw,90px);
  --fs-cuerpo:17px;
  --fs-h1:clamp(38px,5vw,68px);
  --fs-h2:clamp(28px,3.4vw,46px);
  --fs-h3:19px;
  /* Rejillas */
  --cols2:1fr 1fr; --cols3:repeat(3,1fr); --cols4:repeat(4,1fr); --idx:1fr 1fr;
  /* Conmutadores responsivos */
  --nav-esc:flex; --nav-mov:none;
  --hero-h:88vh; --wordmark:block;
  /* Familias */
  --f-titular:'Barlow Condensed',Impact,sans-serif;
  --f-dato:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-cuerpo:'Source Sans 3',system-ui,-apple-system,Segoe UI,sans-serif;
  /* Curvas y tiempos */
  --curva:cubic-bezier(.4,0,.2,1);
  --t-tema:500ms;
  /* Ancho de página. Sin esto, entre 1280 y 2560 px las columnas se estiran
     al doble mientras el texto adentro se queda igual: una cinta de letras
     flotando en una caja vacía. El sistema tenía token para el margen y
     ninguno para el ancho de lectura. */
  --ancho:1520px;
  /* Espaciado. Cuatro valores, no nueve números sueltos. */
  --e-s:14px; --e-m:26px; --e-l:56px; --e-xl:12vh;
  /* Fondo de marcador de imagen */
  --hatch:repeating-linear-gradient(135deg,var(--velo) 0 7px,transparent 7px 14px);
}

@media (max-width:900px){
  :root{
    --h-cab:68px; --logo-h:40px; --px:22px;
    --fs-cuerpo:16px;
    --cols2:1fr; --cols3:1fr; --cols4:1fr; --idx:1fr;
    --nav-esc:none; --nav-mov:flex;
    --hero-h:74vh; --wordmark:none;
  }
}

/* ── 02 · Reinicio y base ────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
html,body{margin:0;padding:0;background:var(--fondo);}
body{
  min-height:100vh;display:flex;flex-direction:column;
  background:var(--fondo);color:var(--texto);
  font-family:var(--f-cuerpo);font-size:var(--fs-cuerpo);font-weight:400;line-height:1.75;
  overflow-x:hidden;
  transition:background-color var(--t-tema) var(--curva),color var(--t-tema) var(--curva);
}
img,svg,video,canvas{max-width:100%;display:block;}
a{color:var(--acento-texto);text-decoration:none;transition:color 300ms ease;}
a:hover{color:var(--texto);}
:focus-visible{outline:2px solid var(--acento-texto);outline-offset:3px;}
::selection{background:var(--acento);color:var(--fondo);}
input,textarea,button,select{font-family:inherit;font-size:inherit;}
button{color:inherit;}
main{flex:1;padding-top:var(--h-cab);}

.rd-salto{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:14px 22px;background:var(--acento);color:var(--fondo);
  font-family:var(--f-titular);letter-spacing:.12em;text-transform:uppercase;
}
.rd-salto:focus{left:0;}

.rd-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── 03 · Tipografía ─────────────────────────────────────────────────────── */

.t-titular,h1,h2,h3{
  font-family:var(--f-titular);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.1;margin:0;
  /* Reparte las líneas en vez de dejar una palabra sola abajo. */
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);line-height:1.06;}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}

.t-dato{
  font-family:var(--f-dato);font-size:11px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);
}
/* La medida de lectura crece un poco con la pantalla en vez de quedarse
   clavada en 46ch: entre 1440 y 2560 px eso era la diferencia entre un
   párrafo y una cinta de letras flotando en una columna vacía. */
.t-cuerpo{max-width:clamp(46ch,34vw,56ch);color:var(--medio);text-wrap:pretty;}
/* Dentro de un párrafo el color no basta para saber que algo es un enlace. */
.t-cuerpo a,.t-pie a,p > a:not(.b){text-decoration:underline;text-underline-offset:2px;}
.t-pie{font-size:15px;line-height:1.7;color:var(--tenue);}
p{text-wrap:pretty;}

/* Rótulo numerado de sección: «02 · El estudio» */
.rd-rotulo{display:flex;align-items:baseline;gap:14px;margin-bottom:26px;}
.rd-rotulo b{font-family:var(--f-dato);font-size:11px;font-weight:400;color:var(--acento-texto);}
.rd-rotulo span{
  font-family:var(--f-dato);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tenue);
}

/* ── 04 · Utilidades de rejilla y sección ────────────────────────────────── */

.s{
  padding:var(--e-xl) var(--px);
  /* El techo incluye el margen lateral: así el contenido mide --ancho y el
     aire de los costados sigue siendo el mismo --px de siempre. */
  max-width:calc(var(--ancho) + 2 * var(--px));
  margin-inline:auto;
}
.s--linea{border-bottom:1px solid var(--linea);}
.s--linea-sup{border-top:1px solid var(--linea);}
.s--plena{padding:12vh 0 0;}
.rj2{display:grid;grid-template-columns:var(--cols2);gap:64px;align-items:start;}
.rj3{display:grid;grid-template-columns:var(--cols3);gap:40px;align-items:start;}
.rj4{display:grid;grid-template-columns:var(--cols4);gap:34px;}
.rj--fin{align-items:end;}

/* Lista de datos con línea divisoria (cifras, contacto) */
.rd-lista{display:flex;flex-direction:column;border-top:1px solid var(--linea);}
.rd-lista > *{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:22px 0;border-bottom:1px solid var(--linea);color:var(--texto);
}
.rd-lista a:hover{color:var(--acento);}

.rd-cifra{
  font-family:var(--f-titular);font-weight:600;
  font-size:clamp(40px,4.4vw,64px);letter-spacing:.04em;line-height:1;color:var(--texto);
}

/* Marcador de imagen mientras no existe el archivo */
.rd-ph{position:absolute;inset:0;background:var(--panel);background-image:var(--hatch);}

/* ── 05 · Cabecera y menú ────────────────────────────────────────────────── */

.rd-cab{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--h-cab);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 var(--px);
  background:var(--vidrio);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--linea);
  transition:background-color var(--t-tema) var(--curva),border-color var(--t-tema) var(--curva);
}
.rd-marca{display:flex;align-items:center;gap:14px;height:100%;min-height:48px;}
.rd-marca img{height:var(--logo-h);width:auto;object-fit:contain;}
:root[data-tema="arq"] .rd-mk-clara{display:none;}
:root[data-tema="grid"] .rd-mk-oscura{display:none;}
.rd-wordmark{display:var(--wordmark);padding-bottom:2px;}
.rd-wordmark b{
  display:block;font-family:var(--f-titular);font-weight:600;font-size:27px;
  letter-spacing:.12em;text-transform:uppercase;line-height:1;color:var(--texto);
  transition:color var(--t-tema) var(--curva);
}
.rd-wordmark span{
  display:block;font-family:var(--f-dato);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tenue);margin-top:6px;
}

.rd-nav{display:var(--nav-esc);align-items:center;gap:0;}
.rd-nav a{
  display:flex;align-items:center;height:48px;padding:0 18px;
  font-family:var(--f-titular);font-weight:600;font-size:15px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);
  border-bottom:2px solid transparent;
  transition:color 300ms ease,border-color 300ms ease;
}
.rd-nav a:hover{color:var(--texto);}
.rd-nav a[aria-current]{color:var(--texto);border-bottom-color:var(--acento);}
.rd-nav-sep{width:1px;height:18px;background:var(--linea);}
.rd-nav .rd-nav-cta{
  height:48px;margin-left:26px;padding:0 20px;font-size:13px;
  color:var(--medio);border:1px solid var(--linea);border-bottom-width:1px;
}
.rd-nav .rd-nav-cta:hover{border-color:var(--acento-texto);color:var(--acento-texto);}
.rd-nav .rd-nav-cta[aria-current]{border-color:var(--acento-texto);color:var(--acento-texto);}

.rd-hamb{
  display:var(--nav-mov);align-items:center;justify-content:center;
  flex-direction:column;gap:6px;
  width:48px;height:48px;margin-right:-12px;
  background:none;border:none;cursor:pointer;color:var(--texto);
}
.rd-hamb i{display:block;width:22px;height:1.5px;background:currentColor;transition:transform 300ms var(--curva);}
.rd-hamb[aria-expanded="true"] i:first-child{transform:translateY(3.75px) rotate(45deg);}
.rd-hamb[aria-expanded="true"] i:last-child{transform:translateY(-3.75px) rotate(-45deg);}

.rd-menu{
  position:fixed;inset:var(--h-cab) 0 0;z-index:55;background:var(--fondo);
  padding:8px var(--px) 40px;display:none;flex-direction:column;
}
.rd-menu[data-abierto]{display:flex;}
.rd-menu a{
  display:flex;align-items:baseline;min-height:64px;
  font-family:var(--f-titular);font-weight:600;font-size:26px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--texto);
  border-bottom:1px solid var(--linea);
}
.rd-menu a small{
  font-family:var(--f-dato);font-size:11px;letter-spacing:.08em;
  color:var(--tenue);margin-left:14px;text-transform:none;
}

/* ── 06 · Pie ────────────────────────────────────────────────────────────── */

.rd-pie{
  border-top:1px solid var(--linea);padding:8vh var(--px) 5vh;
  display:flex;flex-direction:column;gap:44px;background:var(--fondo);
  transition:background-color var(--t-tema) var(--curva);
}
.rd-pie-marca{display:flex;align-items:center;gap:12px;}
.rd-pie-marca img{height:40px;width:auto;object-fit:contain;}
.rd-pie-marca b{
  font-family:var(--f-titular);font-weight:600;font-size:19px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--texto);
}
.rd-pie nav{display:flex;flex-direction:column;gap:2px;}
.rd-pie nav a,.rd-pie .rd-pie-datos a{
  display:flex;align-items:center;min-height:48px;color:var(--medio);
}
.rd-pie nav a{
  font-family:var(--f-dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.rd-pie .rd-pie-datos{display:flex;flex-direction:column;gap:2px;}
.rd-pie .rd-pie-datos a{font-size:15px;}
.rd-pie a:hover{color:var(--acento);}
.rd-pie-legal{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--linea);padding-top:24px;
}
.rd-pie-legal span,.rd-pie-legal a{
  font-family:var(--f-dato);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue);
}

/* ── 07 · Animación de aparición ─────────────────────────────────────────── */

.rd-rev{
  opacity:0;transform:translateY(16px);
  transition:opacity .75s var(--curva),transform .75s var(--curva);
}
.rd-rev.rd-in{opacity:1;transform:none;}
.rd-inv{transition:background-color var(--t-tema) var(--curva),color var(--t-tema) var(--curva);}
.rd-inv.rd-in{background:var(--inv-bg)!important;color:var(--inv-fg)!important;}
.d1{transition-delay:.08s}.d2{transition-delay:.12s}.d3{transition-delay:.16s}.d4{transition-delay:.2s}

/* ── 08 · Portadas y capas ───────────────────────────────────────────────── */

.rd-portada{
  position:relative;height:var(--hero-h);min-height:520px;overflow:hidden;
  border-bottom:1px solid var(--linea);
}
.rd-portada--alta{height:calc(100vh - var(--h-cab));height:calc(100svh - var(--h-cab));min-height:560px;}
.rd-portada > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.rd-velo{position:absolute;inset:0;pointer-events:none;}
.rd-velo--grid{background:linear-gradient(24deg,rgba(13,14,16,.94) 0%,rgba(13,14,16,.66) 30%,rgba(13,14,16,.12) 62%,transparent 84%);}
.rd-velo--pie{background:linear-gradient(180deg,rgba(13,14,16,.5) 0%,rgba(13,14,16,.2) 40%,rgba(13,14,16,.94) 100%);}
.rd-velo--suave{background:linear-gradient(180deg,rgba(13,14,16,.4) 0%,transparent 34%,rgba(13,14,16,.85) 100%);}
.rd-ancla{position:absolute;left:0;bottom:0;padding:0 var(--px) 8vh;max-width:min(46ch,86%);}
.rd-ancla--centro{
  left:0;right:0;padding:0 var(--px) 10vh;
  display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;max-width:none;
}
.rd-portada .rd-ancla h1,.rd-portada .rd-ancla p{color:#FFF;}
.rd-portada .rd-ancla p{color:rgba(255,255,255,.9);max-width:46ch;margin:26px 0 0;}
.rd-folio{
  position:absolute;right:var(--px);bottom:8vh;
  font-family:var(--f-dato);font-size:10px;letter-spacing:.16em;
  color:rgba(255,255,255,.55);writing-mode:vertical-rl;
}
.rd-declaracion{
  position:absolute;left:0;bottom:0;margin:0;padding:0 var(--px) 9vh;
  max-width:min(24ch,86%);font-family:var(--f-titular);font-weight:600;
  font-size:clamp(26px,3.4vw,46px);letter-spacing:.12em;text-transform:uppercase;
  line-height:1.14;color:#F4F2EE;
}

/* ── 09 · Índice de obras ────────────────────────────────────────────────── */

.rd-indice{display:grid;grid-template-columns:var(--idx);gap:0;border-top:1px solid var(--linea);}
.rd-indice-col{display:flex;flex-direction:column;}
.rd-obra{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  min-height:96px;padding:26px var(--px);
  border-bottom:1px solid var(--linea);color:inherit;
}
.rd-obra-n{
  font-family:var(--f-titular);font-weight:600;font-size:clamp(21px,2.3vw,32px);
  letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);
  transition:transform 400ms var(--curva),color 400ms ease;
}
.rd-obra-m{font-family:var(--f-dato);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);white-space:nowrap;}
.rd-obra:hover .rd-obra-n,.rd-obra:focus-visible .rd-obra-n,.rd-obra[data-activa] .rd-obra-n{
  transform:translateX(12px);color:var(--texto);
}
.rd-visor-obra{
  display:var(--nav-esc);position:relative;
  border-left:1px solid var(--linea);background:var(--panel);background-image:var(--hatch);
  min-height:520px;overflow:hidden;
}
.rd-visor-obra img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 400ms ease;
}
.rd-visor-obra img[data-activa]{opacity:1;}
.rd-visor-obra figcaption{
  position:absolute;left:20px;bottom:18px;z-index:2;
  font-family:var(--f-dato);font-size:10px;letter-spacing:.12em;color:var(--tenue);
}
.rd-obra-movil{display:var(--nav-mov);flex-direction:column;order:-1;}
.rd-obra-movil figure{
  position:relative;aspect-ratio:4/3;margin:0;
  background:var(--panel);background-image:var(--hatch);border-bottom:1px solid var(--linea);
}
.rd-obra-movil img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.rd-obra-movil figcaption{
  position:absolute;left:14px;bottom:12px;
  font-family:var(--f-dato);font-size:10px;letter-spacing:.1em;color:var(--tenue);
}

/* ── 10 · Tarjetas de servicio ───────────────────────────────────────────── */

.rd-serv{display:flex;flex-direction:column;}
.rd-serv figure{position:relative;aspect-ratio:3/4;overflow:hidden;margin:0;background:var(--panel);border:1px solid var(--linea);}
.rd-serv figure img,.rd-serv figure .rd-ph{transition:transform 500ms var(--curva);}
.rd-serv figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.rd-serv:hover figure img,.rd-serv:hover figure .rd-ph{transform:scale(1.03);}
.rd-serv h3{margin:22px 0 0;}
.rd-sub{display:block;width:0;height:2px;background:var(--acento);margin:10px 0 12px;transition:width 500ms var(--curva);}
.rd-serv:hover .rd-sub{width:44px;}
.rd-serv p{margin:0;font-size:15px;line-height:1.7;color:var(--medio);}

/* ── 11 · Proceso ────────────────────────────────────────────────────────── */

.rd-pasos{display:grid;grid-template-columns:var(--cols4);gap:0;border-top:1px solid var(--linea);}
.rd-paso{position:relative;padding:30px 30px 40px 0;border-right:1px solid var(--linea);}
.rd-paso::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--acento);}
.rd-paso b{font-family:var(--f-dato);font-size:11px;letter-spacing:.14em;color:var(--acento);font-weight:400;}
.rd-paso h3{margin:14px 0 12px;font-size:20px;}
.rd-paso p{margin:0;font-size:15px;line-height:1.7;color:var(--medio);}
@media (max-width:900px){.rd-paso{border-right:none;border-bottom:1px solid var(--linea);padding-right:0;}}

/* ── 12 · Visores (carácter, programa) ───────────────────────────────────── */

.rd-visor{
  position:relative;height:min(78vh,780px);min-height:420px;overflow:hidden;
  border-top:1px solid var(--linea);background:#0D0E10;user-select:none;
}
.rd-visor--programa{height:min(76vh,760px);}
.rd-visor-fondo{position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,rgba(244,242,238,.05) 0 7px,transparent 7px 14px);}
.rd-lamina{position:absolute;inset:0;opacity:0;transition:opacity 600ms var(--curva);}
.rd-lamina[data-activa]{opacity:1;}
.rd-lamina img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.rd-lamina figcaption{
  position:absolute;left:var(--px);top:26px;
  font-family:var(--f-dato);font-size:10px;letter-spacing:.14em;color:var(--tenue);
}
.rd-visor-velo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(13,14,16,.35) 0%,transparent 26%,transparent 44%,rgba(13,14,16,.92) 100%);}
.rd-visor-velo--programa{background:linear-gradient(180deg,transparent 40%,rgba(13,14,16,.92) 100%);}

.rd-zona{position:absolute;top:0;width:16%;background:none;border:none;cursor:pointer;z-index:3;}
.rd-zona:focus-visible{outline-offset:-6px;}
.rd-zona--izq{left:0;cursor:w-resize;}
.rd-zona--der{right:0;cursor:e-resize;}
.rd-flecha{
  position:absolute;width:48px;height:48px;z-index:4;
  display:flex;align-items:center;justify-content:center;
  background:rgba(13,14,16,.55);border:1px solid rgba(244,242,238,.22);
  color:#F4F2EE;font-size:20px;line-height:1;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color 250ms ease,color 250ms ease;
}
.rd-flecha:hover{border-color:#C87D3A;color:#C87D3A;}

.rd-ficha{
  position:absolute;left:var(--px);z-index:4;max-width:min(46ch,84%);pointer-events:none;
  background:rgba(13,14,16,.52);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(244,242,238,.12);padding:26px 30px;
}
.rd-ficha-cab{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:14px;}
.rd-ficha-cab h3,.rd-ficha-cab b{
  font-family:var(--f-titular);font-weight:600;font-size:clamp(20px,2.3vw,30px);
  letter-spacing:.12em;text-transform:uppercase;color:#F4F2EE;margin:0;
}
.rd-ficha-cab i{font-family:var(--f-dato);font-size:11px;font-style:normal;letter-spacing:.16em;color:var(--acento);white-space:nowrap;}
.rd-ficha p{margin:0 0 18px;color:#F4F2EE;}
.rd-ficha ul{
  display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0;padding:14px 0 0;
  border-top:1px solid rgba(244,242,238,.18);
}
.rd-ficha li{font-family:var(--f-dato);font-size:11px;letter-spacing:.08em;color:var(--medio);}

.rd-barra{
  position:absolute;left:0;right:0;bottom:0;z-index:5;
  display:flex;flex-wrap:wrap;align-items:stretch;
  background:rgba(13,14,16,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(244,242,238,.14);
}
.rd-barra-grupo{display:flex;flex:1 1 60%;min-width:0;overflow-x:auto;scrollbar-width:none;}
.rd-barra-grupo::-webkit-scrollbar{height:0;}
.rd-barra-grupo--fijo{flex:0 1 auto;overflow:visible;}
.rd-pestana{
  flex:1;min-width:132px;min-height:56px;padding:0 16px;cursor:pointer;
  font-family:var(--f-titular);font-weight:600;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  border:none;border-right:1px solid rgba(244,242,238,.12);border-bottom:2px solid transparent;
  background:rgba(244,242,238,.06);color:#9EA1A7;
  transition:background-color 300ms ease,color 300ms ease,border-color 300ms ease;
}
.rd-pestana:hover{color:#F4F2EE;}
.rd-pestana[aria-selected="true"],.rd-pestana[aria-pressed="true"]{
  background:rgba(200,125,58,.16);color:#F4F2EE;border-bottom-color:#C87D3A;
}
.rd-barra-grupo--fijo .rd-pestana{min-width:124px;border-right:none;border-left:1px solid rgba(244,242,238,.12);}

/* ── 13 · Barrido antes / después ────────────────────────────────────────── */

.rd-barrido{
  position:relative;width:100%;aspect-ratio:2560/1429;min-height:340px;max-height:78vh;overflow:hidden;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  background:#0D0E10;touch-action:pan-y;cursor:ew-resize;
  -webkit-user-select:none;user-select:none;
}
.rd-barrido img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;user-drag:none;pointer-events:none;
}
.rd-barrido-capa{position:absolute;inset:0;clip-path:inset(0 100% 0 0);}
.rd-barrido-linea{
  position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--acento);opacity:0;
}
/* Manija: la línea sola no invita a tomarla. */
.rd-barrido-linea::after{
  content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);border:1px solid var(--acento);border-radius:50%;
  background:rgba(13,14,16,.35);backdrop-filter:blur(4px);
}
/* Los rótulos van sobre dos imágenes de brillo opuesto (arcilla clara y
   fotografía oscura): sin fondo propio uno de los dos siempre se pierde. */
.rd-barrido-rotulo{
  position:absolute;top:22px;font-family:var(--f-dato);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:#F4F2EE;
  padding:7px 12px;background:rgba(13,14,16,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.rd-barrido-rotulo--izq{left:var(--px);}
.rd-barrido-rotulo--der{right:var(--px);}

/* ── 14 · Alcance y volumen 3D ───────────────────────────────────────────── */

.rd-lienzo-env{position:relative;aspect-ratio:16/11;border:1px solid var(--linea);background:#0D0E10;overflow:hidden;}
.rd-lienzo-env canvas{display:none;width:100%;height:100%;}
.rd-lienzo-env figcaption{
  position:absolute;left:16px;bottom:12px;
  font-family:var(--f-dato);font-size:10px;letter-spacing:.14em;color:var(--tenue);
}
.rd-respaldo{
  display:grid;position:absolute;inset:0;grid-template-columns:repeat(3,1fr);
  align-items:center;gap:8px;padding:20px;
}
.rd-respaldo svg{width:100%;height:auto;opacity:.28;transition:opacity 400ms ease;}
.rd-respaldo svg[data-activo]{opacity:1;}

.rd-nivel{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  min-height:96px;padding:24px 20px 24px 0;text-align:left;cursor:pointer;width:100%;
  background:none;border:none;border-bottom:1px solid var(--linea);border-left:2px solid transparent;
  transition:border-color 400ms ease,padding-left 400ms ease;
}
.rd-nivel b{font-family:var(--f-dato);font-size:11px;font-weight:400;letter-spacing:.14em;color:var(--tenue);}
.rd-nivel strong{
  font-family:var(--f-titular);font-weight:600;font-size:clamp(19px,2.1vw,27px);
  letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);transition:color 400ms ease;
}
.rd-nivel span{font-size:15px;line-height:1.7;color:var(--medio);}
.rd-nivel[aria-pressed="true"]{border-left-color:var(--acento);padding-left:22px;}
.rd-nivel[aria-pressed="true"] b{color:var(--acento);}
.rd-nivel[aria-pressed="true"] strong{color:var(--texto);}
.rd-nivel-items{list-style:none;margin:26px 0 0;padding:0;}
.rd-nivel-items li{font-size:15px;line-height:1.65;color:var(--medio);padding:13px 0;border-top:1px solid var(--linea);}
.rd-complementos{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--linea);margin-top:7vh;}
.rd-complementos div{flex:1;min-width:220px;padding:22px 30px 0 0;font-size:15px;color:var(--tenue);}

.rd-hechos{display:flex;flex-wrap:wrap;gap:34px;border-top:1px solid var(--linea);padding-top:24px;margin-top:44px;}
.rd-hechos div{flex:1 1 200px;min-width:180px;}
.rd-hechos b{
  display:block;font-family:var(--f-titular);font-weight:600;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--texto);margin-bottom:8px;
}
.rd-hechos span{font-size:14px;line-height:1.65;color:var(--tenue);}

/* ── 15 · Formulario ─────────────────────────────────────────────────────── */

.rd-form{display:flex;flex-direction:column;gap:26px;}
.rd-campo{display:flex;flex-direction:column;gap:9px;}
.rd-campo label,.rd-form legend{
  font-family:var(--f-dato);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue);padding:0;
}
.rd-campo input,.rd-campo textarea,.rd-campo select{
  min-height:48px;padding:12px 14px;font-size:16px;color:var(--texto);
  background:var(--panel);border:1px solid var(--tenue);border-radius:0;
  transition:border-color 250ms ease;
}
.rd-campo textarea{resize:vertical;line-height:1.6;min-height:130px;}
.rd-campo input:focus,.rd-campo textarea:focus,.rd-campo select:focus{border-color:var(--acento-texto);outline:none;}
.rd-campo input[aria-invalid="true"],.rd-campo textarea[aria-invalid="true"]{border-color:var(--error);}
.rd-error{font-size:13px;color:var(--error);min-height:0;}
.rd-form fieldset{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}
.rd-chips{display:flex;flex-wrap:wrap;gap:10px;}
.rd-chip{
  display:inline-flex;align-items:center;
  min-height:48px;padding:0 20px;cursor:pointer;user-select:none;
  font-family:var(--f-titular);font-weight:600;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;border-radius:0;
  background:transparent;color:var(--tenue);border:1px solid var(--linea);
  transition:background-color 250ms ease,color 250ms ease,border-color 250ms ease;
}
.rd-chip:hover{border-color:var(--acento-texto);color:var(--acento-texto);}
/* El checkbox va oculto: el anillo de foco lo dibuja la etiqueta. */
.rd-chip:has(input:focus-visible){outline:2px solid var(--acento-texto);outline-offset:3px;}
.rd-chip[aria-pressed="true"],.rd-chip:has(input:checked){background:var(--acento-texto);color:var(--fondo);border-color:var(--acento-texto);}
.rd-trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.rd-aviso{padding:16px 18px;border:1px solid var(--linea);font-size:15px;color:var(--medio);}
.rd-aviso[data-estado="error"]{border-color:var(--error);color:var(--error);}
.rd-aviso[data-estado="ok"]{border-color:var(--acento-texto);color:var(--acento-texto);}
.rd-mapa{
  margin-top:32px;aspect-ratio:4/3;background:var(--panel);border:1px solid var(--linea);
  background-image:var(--hatch);display:flex;align-items:flex-end;padding:16px;
}
.rd-mapa span{font-family:var(--f-dato);font-size:10px;letter-spacing:.12em;color:var(--tenue);}

/* ── 16 · Botones ────────────────────────────────────────────────────────── */

.b{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 28px;cursor:pointer;border-radius:0;
  font-family:var(--f-titular);font-weight:600;font-size:14px;
  letter-spacing:.12em;text-transform:uppercase;
  transition:background-color 300ms ease,color 300ms ease,border-color 300ms ease,opacity 250ms ease;
}
.b--primario{color:var(--fondo);background:var(--acento-texto);border:1px solid var(--acento-texto);}
.b--primario:hover{opacity:.85;color:var(--fondo);}
.b--contorno{color:var(--acento-texto);background:none;border:1px solid var(--acento-texto);}
.b--contorno:hover{background:var(--acento-texto);color:var(--fondo);}
.b--terciario{color:var(--medio);background:none;border:1px solid var(--linea);}
.b--terciario:hover{border-color:var(--texto);color:var(--texto);}
.b[disabled]{opacity:.45;cursor:not-allowed;}

/* Botón sobre fondo oscuro dentro del tema claro (sección puente) */
.b--ambar{color:#C87D3A;border:1px solid #C87D3A;background:none;}
.b--ambar:hover{background:#C87D3A;color:#0D0E10;}
.b--dorado{color:#7A5C2E;border:1px solid #7A5C2E;background:none;}
.b--dorado:hover{background:#7A5C2E;color:#F7F5F0;}

/* ── 17 · Página de sistema ──────────────────────────────────────────────── */

.rd-tarjetas{display:grid;grid-template-columns:var(--cols3);gap:1px;background:var(--linea);border:1px solid var(--linea);}
.rd-tarjeta{background:var(--panel);display:flex;flex-direction:column;padding-bottom:26px;}
.rd-tarjeta figure{
  margin:0;aspect-ratio:4/3;background:var(--fondo);background-image:var(--hatch);
  display:flex;align-items:flex-end;padding:14px;border-bottom:1px solid var(--linea);
}
.rd-tarjeta figure span{font-family:var(--f-dato);font-size:10px;letter-spacing:.12em;color:var(--tenue);}
.rd-tarjeta > div{padding:22px 22px 0;}
.rd-tarjeta b{font-family:var(--f-dato);font-size:11px;font-weight:400;letter-spacing:.14em;color:var(--acento-texto);}
.rd-tarjeta h3{margin:10px 0 12px;font-size:20px;}
.rd-tarjeta p{margin:0;font-size:15px;line-height:1.7;color:var(--medio);}
.rd-cita{margin:0;padding:0 0 0 26px;border-left:2px solid var(--acento);max-width:46ch;}
.rd-cita p{
  font-family:var(--f-titular);font-weight:600;font-size:clamp(21px,2.3vw,30px);
  letter-spacing:.06em;line-height:1.3;margin:0;text-transform:none;
}
.rd-cita footer{font-family:var(--f-dato);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);margin-top:16px;}
.rd-paleta{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);}
.rd-paleta > div{background:var(--panel);}
.rd-muestra{height:88px;border-bottom:1px solid var(--linea);}
.rd-paleta dl{margin:0;padding:14px;}
.rd-paleta dt{font-family:var(--f-dato);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);}
.rd-paleta dd{font-family:var(--f-dato);font-size:11px;color:var(--texto);margin:5px 0 0;}

/* ── 18 · Movimiento reducido e impresión ────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;}
  .rd-rev{opacity:1;transform:none;}
  .rd-lienzo-env canvas{display:none!important;}
}

@media print{
  .rd-cab,.rd-menu,.rd-barra,.rd-flecha,.rd-zona{display:none!important;}
  body{color:#000;background:#fff;}
  main{padding-top:0;}
}

/* ── 19 · Añadidos de la reauditoría ─────────────────────────────────────── */

/* El nombre del archivo sólo aparece cuando la imagen todavía no existe. */
.rd-lamina figcaption{opacity:0;transition:opacity 300ms ease;}
.rd-lamina img[data-ausente] ~ figcaption{opacity:1;}

/* Preguntas frecuentes: mismo lenguaje de línea fina del resto del sitio. */
.rd-faq{border-top:1px solid var(--linea);max-width:82ch;}
.rd-faq details{border-bottom:1px solid var(--linea);}
.rd-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:72px;padding:20px 0;cursor:pointer;list-style:none;
  font-family:var(--f-titular);font-weight:600;font-size:clamp(17px,1.6vw,21px);
  letter-spacing:.08em;text-transform:uppercase;color:var(--texto);
}
.rd-faq summary::-webkit-details-marker{display:none;}
.rd-faq summary::after{content:"+";font-family:var(--f-dato);font-size:20px;color:var(--acento);}
.rd-faq details[open] summary::after{content:"−";}
.rd-faq details > p{margin:0 0 var(--e-m);max-width:72ch;color:var(--medio);}

/* Bloque de reseñas de clientes */
.rd-resenas{display:grid;grid-template-columns:var(--cols3);gap:1px;background:var(--linea);border:1px solid var(--linea);}
.rd-resena{background:var(--panel);padding:30px 28px;display:flex;flex-direction:column;gap:16px;}
.rd-estrellas{color:var(--acento);letter-spacing:.24em;font-size:14px;}
.rd-resena blockquote{margin:0;color:var(--medio);font-size:16px;line-height:1.7;}
.rd-resena figcaption{
  font-family:var(--f-dato);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue);margin-top:auto;
}

/* Columna de niveles del alcance (no hereda la lista horizontal). */
.rd-niveles{display:flex;flex-direction:column;border-top:1px solid var(--linea);}

/* En pantallas angostas el barrido 16/9 con alto mínimo forzaba 604 px de
   ancho y desbordaba la página. Se recorta a 4/3 y sin alto mínimo. */
@media (max-width:900px){
  .rd-barrido{aspect-ratio:4/3;min-height:0;}
  .rd-visor{height:min(70vh,620px);}
  .rd-ficha{padding:20px 22px;}
  .rd-lienzo-env{aspect-ratio:4/3;}
}

/* La axonometría se gira arrastrando. */
/* En el teléfono, touch-action:none hacía que un dedo apoyado sobre la
   axonometría NO desplazara la página: el visitante quedaba atrapado en el
   recuadro. Con pan-y el deslizamiento vertical sigue siendo scroll y el
   horizontal gira la vista. */
.rd-lienzo-env canvas{cursor:grab;touch-action:pan-y;}
.rd-lienzo-env[data-girando] canvas{cursor:grabbing;}
.rd-lienzo-env canvas:focus-visible{outline:2px solid var(--acento);outline-offset:-2px;}
.rd-pista{
  position:absolute;right:16px;top:14px;pointer-events:none;
  font-family:var(--f-dato);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue);opacity:.75;
}

/* La bajada de la marca cambia con el mundo: el estudio es «Arquitectura &
   Construcción», la vertical de vehículos es «Driving Architecture». */
.rd-wordmark .rd-bajada{display:none;}
:root[data-tema="arq"] .rd-wordmark .rd-bajada--arq{display:block;}
:root[data-tema="grid"] .rd-wordmark .rd-bajada--grid{display:block;}

/* ── 20 · Visor modular ───────────────────────────────────────────────────
   Cada opción del visor es un bloque <article class="rd-opcion"> que trae su
   imagen y su ficha. La barra de pestañas se genera desde esos bloques, así
   que borrar un bloque quita la opción del sitio sin tocar nada más.        */

.rd-opcion{position:absolute;inset:0;pointer-events:none;}

.rd-opcion .rd-lamina{
  position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity .6s var(--curva);
}
.rd-opcion[data-activa] .rd-lamina[data-activa]{opacity:1;}
.rd-opcion .rd-lamina img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.rd-opcion .rd-ficha{
  position:absolute;left:var(--px);right:auto;
  bottom:calc(var(--barra-alto, 60px) + 26px);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .4s var(--curva),transform .4s var(--curva),visibility .4s;
}
.rd-opcion[data-activa] .rd-ficha{opacity:1;visibility:visible;transform:none;}

/* Zonas y flechas se detienen justo encima de la barra de pestañas. */
.rd-visor .rd-zona{height:calc(100% - var(--barra-alto, 60px));}
.rd-flecha--izq{left:16px;}
.rd-flecha--der{right:16px;}
.rd-flecha--izq,.rd-flecha--der{top:calc((100% - var(--barra-alto, 60px)) / 2 - 24px);}

@media (max-width:900px){
  .rd-opcion .rd-ficha{right:var(--px);max-width:none;}
  .rd-flecha{width:42px;height:42px;font-size:18px;}
  /* En el teléfono la ficha ocupa casi la mitad del visor: unas flechas
     centradas verticalmente se sientan encima del texto. Van juntas arriba a
     la derecha, la única franja que queda limpia (el rótulo de la lámina
     ocupa la izquierda). */
  .rd-flecha--izq,.rd-flecha--der{top:14px;}
  .rd-flecha--izq{left:auto;right:68px;}
  .rd-flecha--der{right:16px;}
}
/* El visor se pasa con el dedo. Vertical = scroll de la página. */
.rd-visor{touch-action:pan-y;}

/* Con la fotografía real puesta, el ancla de portada necesita más aire:
   con 46ch el titular condensado se partía en cuatro líneas. */
@media (min-width:901px){
  .rd-portada .rd-ancla{max-width:min(58ch,64%);}
  .rd-portada .rd-ancla p{max-width:46ch;}
}

/* La foto real de portada es más clara que el marcador: el velo lateral
   necesita algo de peso abajo para que el rótulo dorado se lea. */
.rd-velo--lateral{
  background:
    linear-gradient(0deg,rgba(20,22,26,.72) 0%,rgba(20,22,26,.28) 26%,transparent 46%),
    linear-gradient(20deg,rgba(20,22,26,.72) 0%,rgba(20,22,26,.4) 34%,rgba(20,22,26,.06) 64%,transparent 84%);
}

/* La marca del pie lleva al inicio, igual que la de la cabecera. */
a.rd-pie-marca{text-decoration:none;align-self:flex-start;transition:opacity 250ms ease;}
a.rd-pie-marca b{transition:color 250ms ease;}
a.rd-pie-marca:hover{opacity:.75;}
a.rd-pie-marca:hover b{color:var(--acento);}
a.rd-pie-marca:focus-visible{outline:2px solid var(--acento);outline-offset:6px;}

/* ── 19 · Materia: grano de fondo ────────────────────────────────────────────
   Los dos mundos eran color plano. Un muro de hormigón no es un rectángulo
   #0D0E10 y una pared de yeso no es #F7F5F0: lo que los hace material es la
   imperfección. Esta capa la devuelve, con dos reglas que no se negocian:

     1. vive DETRÁS de todo el contenido (z-index 0), nunca encima —
        así no ensucia ni una fotografía de obra ni un campo de formulario;
     2. la amplitud es tan baja que no se ve conscientemente. Si en una
        reunión alguien dice «se nota el grano», está demasiado fuerte.

   Coste: 0 peticiones y ~700 bytes de SVG dentro del propio documento.
   ------------------------------------------------------------------------ */

body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  filter:url(#grano-arq);opacity:.045;mix-blend-mode:soft-light;
}
:root[data-tema="grid"] body::before{
  /* El carbón aguanta —y necesita— algo más de grano: además de materia,
     rompe el bandeo entre --fondo (#0D0E10) y --panel (#17191D), que están
     a diez unidades de distancia y se escalonan en pantallas de 8 bits. */
  filter:url(#grano-grid);opacity:.07;
}
main,.rd-pie{position:relative;z-index:1;}

/* Salidas de emergencia: si alguien pidió más contraste o el sistema fuerza
   colores, la textura estorba más de lo que aporta. */
@media (prefers-contrast:more),(forced-colors:active){
  body::before{display:none;}
}

/* ── 20 · Junta rayada (poché) ───────────────────────────────────────────────
   En planta de arquitectura el «poché» es el relleno que representa masa
   construida. Acá marca el zócalo legal del pie: la franja más «maciza» de
   la página. CSS puro, cero peso. */
.rd-pie-legal{position:relative;}
/* Objetivo táctil: un dedo necesita ~44 px, no 18. */
.rd-pie-legal a{display:inline-flex;align-items:center;min-height:44px;}
.rd-pie-legal::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:repeating-linear-gradient(90deg,var(--linea) 0 6px,transparent 6px 12px);
}

/* ── 21 · Barra de pestañas deslizable en pantalla chica ─────────────────────
   Con seis programas la barra no cabe en un teléfono y se desliza, pero nada
   lo insinuaba: parecía que sólo había tres. El degradado del borde derecho
   dice «sigue». */
.rd-barra-grupo{scrollbar-width:none;scroll-snap-type:x proximity;}
.rd-barra-grupo::-webkit-scrollbar{display:none;}
.rd-barra-grupo > *{scroll-snap-align:start;}

/* ── 22 · Campo de archivos ──────────────────────────────────────────────────
   El selector de archivos nativo se ve distinto en cada navegador. Se le da
   el mismo borde y la misma altura que al resto de los campos, y al botón
   interno el tratamiento de un botón secundario del sistema. */
.rd-archivo{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  min-height:48px;padding:6px 12px;
  background:var(--panel);border:1px solid var(--tenue);
}
.rd-archivo input[type="file"]{
  position:absolute;width:1px;height:1px;margin:-1px;
  clip:rect(0 0 0 0);overflow:hidden;opacity:0;
}
.rd-archivo-boton{
  display:inline-flex;align-items:center;min-height:36px;padding:0 16px;cursor:pointer;
  font-family:var(--f-titular);font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--acento-texto);background:none;border:1px solid var(--acento-texto);
  transition:background-color 250ms ease,color 250ms ease;
}
.rd-archivo-boton:hover{background:var(--acento-texto);color:var(--fondo);}
.rd-archivo:has(input:focus-visible){outline:2px solid var(--acento-texto);outline-offset:3px;}
.rd-archivo-estado{font-size:14px;color:var(--tenue);}
.rd-campo label em{font-style:normal;color:var(--tenue);text-transform:none;letter-spacing:0;}
.rd-ayuda{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--tenue);}
.rd-adjuntos{
  margin:10px 0 0;padding:0;list-style:none;
  font-family:var(--f-dato);font-size:12px;color:var(--medio);
}
.rd-adjuntos li{padding:4px 0;border-bottom:1px solid var(--linea);}
.rd-adjuntos li:last-child{border-bottom:none;}
.rd-adjuntos b{font-weight:400;color:var(--tenue);}

/* ── 23 · Consentimiento ─────────────────────────────────────────────────────
   Una casilla más es un obstáculo más entre el visitante y la consulta. Se
   compensa con texto corto y humano, y con un objetivo táctil generoso: la
   etiqueta completa activa la casilla, no sólo el cuadradito. */
.rd-consiento{display:flex;align-items:flex-start;gap:14px;padding:4px 0;}
.rd-consiento input[type="checkbox"]{
  flex:0 0 auto;width:22px;height:22px;margin:2px 0 0;cursor:pointer;
  accent-color:var(--acento-texto);
}
.rd-consiento label{
  font-size:15px;line-height:1.6;color:var(--medio);cursor:pointer;
  text-transform:none;letter-spacing:0;font-family:var(--f-cuerpo);
}
.rd-consiento label a{text-decoration:underline;text-underline-offset:2px;}
.rd-consiento input[aria-invalid="true"]{outline:2px solid var(--error);outline-offset:2px;}

/* ── 30 · Ajustes de teléfono (24-oct-2026) ────────────────────────────────
   Revisión en 390 px de ancho. Cuatro arreglos:
   1. Índice de obras: «order:-1» mandaba las cinco fotos arriba y los nombres
      quedaban sueltos abajo. Ahora cada foto va con su nombre debajo.
   2. Aire entre secciones: 12vh por lado dejaba huecos de ~200 px vacíos.
   3. Servicios: la foto vertical 3/4 ocupaba una pantalla entera cada una.
   4. Rótulos de 11 px gris tenue: subidos a 12 px y un tono más oscuro.   */
@media (max-width:900px){
  :root{ --e-xl:64px; }

  .rd-indice-col > :nth-child(1){order:2;}  .rd-indice-col > :nth-child(2){order:1;}
  .rd-indice-col > :nth-child(3){order:4;}  .rd-indice-col > :nth-child(4){order:3;}
  .rd-indice-col > :nth-child(5){order:6;}  .rd-indice-col > :nth-child(6){order:5;}
  .rd-indice-col > :nth-child(7){order:8;}  .rd-indice-col > :nth-child(8){order:7;}
  .rd-indice-col > :nth-child(9){order:10;} .rd-indice-col > :nth-child(10){order:9;}
  .rd-obra-movil{order:0;}
  .rd-obra-movil figure{border-bottom:none;}
  .rd-obra-movil figcaption{display:none;}
  .rd-obra{min-height:0;padding:16px var(--px) 30px;align-items:center;}
  .rd-obra-n{color:var(--texto);font-size:20px;}

  .rd-serv figure{aspect-ratio:4/3;}

  .t-dato,.rd-rotulo span,.rd-rotulo b,.rd-obra-m{font-size:12px;}
  .t-dato,.rd-rotulo span,.rd-obra-m{color:var(--medio);}
}

/* ── 31 · Llamados a la acción (24-oct-2026) ───────────────────────────────
   Antes el primer botón aparecía recién en la sección 07. Ahora hay botones
   en la portada, un llamado después de las obras y otro después de los
   trámites, y en el teléfono una barra fija con WhatsApp · Llamar · Cotizar. */
.rd-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
/* Dentro de la portada la caja de texto es angosta: los botones pueden salir
   de ella para quedar en una sola fila en el escritorio. */
@media (min-width:901px){.rd-portada .rd-cta{width:max-content;max-width:calc(100vw - 2 * var(--px));}}
.b--oro{color:#14161A;background:var(--acento);border:1px solid var(--acento);}
.b--oro:hover{opacity:.88;color:#14161A;}
.b--claro{color:#F4F2EE;background:rgba(13,14,16,.18);border:1px solid rgba(244,242,238,.75);}
.b--claro:hover{background:#F4F2EE;color:#14161A;}

.rd-cta-linea{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  padding:34px var(--px);border-bottom:1px solid var(--linea);
}
.s .rd-cta-linea{padding:34px 0 0;border-bottom:none;}
.rd-cta-linea p{margin:0;font-family:var(--f-titular);font-weight:600;font-size:20px;letter-spacing:.06em;color:var(--texto);}

.rd-barra-cta{display:none;}
@media (max-width:900px){
  .rd-cta .b{flex:1 1 auto;}
  .rd-cta-linea .b{width:100%;}
  .rd-barra-cta{
    display:grid;grid-template-columns:1fr 1fr 1.2fr;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px;
    background:var(--vidrio);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--linea);
    transform:translateY(110%);transition:transform 350ms var(--curva);
  }
  .rd-barra-cta[data-visible]{transform:none;}
  .rd-barra-cta a{
    display:flex;align-items:center;justify-content:center;min-height:46px;
    font-family:var(--f-titular);font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--texto);border:1px solid var(--linea);background:var(--panel);
  }
  .rd-barra-cta a.rd-barra-cta--fuerte{background:var(--acento);border-color:var(--acento);color:#14161A;}
}
@media print{.rd-barra-cta{display:none !important;}}

/* ── 32 · Botones de llamado a la acción: más grandes y legibles (24-oct) ──
   Antes: letra de 14px, WhatsApp sólo con contorno fino, y el botón de
   mitad de página en marrón sobre crema. Ahora todos son sólidos, con letra
   grande y contraste alto. */
.rd-cta .b,.rd-cta-linea .b{
  min-height:58px;padding:0 34px;font-size:17px;font-weight:700;letter-spacing:.1em;
  white-space:nowrap;text-align:center;
}
/* Sobre la foto: dorado vivo + blanco sólido (nada translúcido) */
.b--oro{background:#D9AE5C;border-color:#D9AE5C;color:#14161A;box-shadow:0 6px 22px rgba(0,0,0,.35);}
.b--oro:hover{background:#E8C078;border-color:#E8C078;opacity:1;}
.b--claro{background:#F7F5F0;border-color:#F7F5F0;color:#14161A;box-shadow:0 6px 22px rgba(0,0,0,.35);}
.b--claro:hover{background:#fff;color:#000;}
/* Mitad de página: botón oscuro sólido con letra clara */
.rd-cta-linea .b{background:#14161A;border:1px solid #14161A;color:#F7F5F0;}
.rd-cta-linea .b:hover{background:var(--acento-texto);border-color:var(--acento-texto);color:#fff;opacity:1;}
.rd-cta-linea p{font-size:24px;line-height:1.3;}
@media (max-width:900px){
  .rd-cta{gap:12px;}
  .rd-cta .b{flex:1 1 100%;width:100%;padding:0 16px;}
  .rd-cta-linea{gap:16px;}
  .rd-cta-linea p{font-size:22px;}
  .rd-barra-cta a{font-size:15px;font-weight:700;min-height:52px;letter-spacing:.06em;}
  .rd-barra-cta a:not(.rd-barra-cta--fuerte){background:#14161A;border-color:#14161A;color:#F7F5F0;}
  .rd-barra-cta a.rd-barra-cta--fuerte{background:#D9AE5C;border-color:#D9AE5C;}
}