/* LGA · Lihuel García Arquitectos — la hoja de estilo de toda la web.
   Papel, tinta y una sola nota de tierra. El plano y el croquis son el recurso gráfico; la tipografía
   hace el resto. Primero el celular: todo lo de pantallas grandes va en los @media del final. */

:root {
  --papel: #F4F1EA;
  --papel-2: #EAE5DA;
  --blanco: #FBFAF6;
  --tinta: #171715;
  --tinta-2: #44423D;
  --gris: #66645D;
  --linea: #D4CEC1;
  --tierra: #8A4A2E;
  --tierra-2: #B0704F;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ancho: 1240px;
  --margen: 20px;
  --aire: clamp(56px, 10vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 17px/1.6 var(--sans); font-feature-settings: 'kern', 'liga';
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--tierra); }
:focus-visible { outline: 2px solid var(--tierra); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h1, h2 { font-family: var(--serif); letter-spacing: -0.01em; line-height: 1.05; }
h3 { font: 600 1.05rem/1.3 var(--sans); }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
small { font-size: 0.86em; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 12px; top: -60px; background: var(--tinta); color: var(--papel); padding: 10px 14px; z-index: 10; }
.saltar:focus { top: 12px; color: var(--papel); }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen); }

/* ------------------------------------------------------------------ rótulos y textos */
.rotulo {
  font: 500 0.75rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gris); margin: 0 0 14px; display: flex; gap: 12px; align-items: baseline;
}
.numero { font-family: var(--sans); font-variant-numeric: tabular-nums; color: var(--tierra); letter-spacing: 0.06em; }
.mini { font-size: 0.86rem; color: var(--gris); }
.nota { font-size: 0.95rem; color: var(--tinta-2); max-width: 70ch; margin-top: 28px; }
.texto-ancho { max-width: 64ch; font-size: 1.06rem; }
.destacado { font-family: var(--serif); font-size: clamp(1.45rem, 3.6vw, 1.95rem); line-height: 1.25; }
.epigrafe, figcaption { font-size: 0.82rem; color: var(--gris); margin-top: 10px; letter-spacing: 0.02em; }
.a-confirmar { color: var(--gris); font-style: italic; }
.marca {
  display: inline-block; font: 500 0.7rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid currentColor; padding: 6px 8px 5px; color: var(--tinta-2);
}
.marca-aviso { color: var(--tierra); }
.lista { padding-left: 1.1em; margin: 0 0 1em; }
.lista li { margin: 0.3em 0; }
.aviso {
  border-left: 3px solid var(--tierra); background: var(--blanco); padding: 16px 18px; font-size: 0.97rem;
  max-width: 78ch; margin: 0 0 32px;
}

/* ------------------------------------------------------------------ botones */
.botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px;
  padding: 13px 22px; border: 1px solid var(--tinta); background: var(--tinta); color: var(--papel);
  font: 500 0.98rem/1.2 var(--sans); text-decoration: none; cursor: pointer; border-radius: 0;
  transition: background-color .15s, color .15s, border-color .15s;
}
.boton::after { content: '→'; font-size: 1.05em; }
.boton:hover { background: var(--tierra); border-color: var(--tierra); color: var(--blanco); }
.boton.claro { background: transparent; color: var(--tinta); }
.boton.claro:hover { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.boton.texto { background: none; border-color: transparent; color: var(--tinta-2); text-decoration: underline; padding-inline: 6px; }
.boton.texto::after, button.boton::after { content: none; }
.boton.texto:hover { color: var(--tierra); background: none; }
.boton:disabled { opacity: .4; cursor: not-allowed; }
.boton-ancho { width: 100%; }

/* ------------------------------------------------------------------ cabecera */
.cabecera { border-bottom: 1px solid var(--linea); background: var(--papel); position: relative; z-index: 5; }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 20px; }
.logotipo { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; margin: 0; }
.logo-lga {
  font: 600 1.32rem/1 var(--sans); letter-spacing: 0.16em; padding-bottom: 5px;
  border-bottom: 2px solid var(--tinta); padding-right: 6px;
}
.logo-nombre { font: 400 0.8rem/1 var(--sans); color: var(--tinta-2); letter-spacing: 0.02em; }
.logotipo:hover .logo-lga { border-color: var(--tierra); }
.nav-grande { display: none; }
.nav-chica { position: static; }
.nav-chica summary {
  list-style: none; cursor: pointer; font: 500 0.9rem/1 var(--sans); padding: 12px 14px; border: 1px solid var(--tinta);
  min-height: 44px; display: flex; align-items: center; gap: 8px;
}
.nav-chica summary::-webkit-details-marker { display: none; }
.nav-chica summary::before { content: ''; width: 16px; height: 9px; border-top: 1.5px solid; border-bottom: 1.5px solid; }
.nav-chica[open] summary { background: var(--tinta); color: var(--papel); }
.nav-chica nav {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--papel); border-bottom: 1px solid var(--linea);
  padding: 8px var(--margen) 20px; display: grid;
}
.nav-chica nav a { padding: 14px 0; border-bottom: 1px solid var(--linea); text-decoration: none; font-family: var(--serif); font-size: 1.5rem; }
.nav-chica nav a[aria-current="page"], .nav-grande a[aria-current="page"] { color: var(--tierra); }

.migas { font-size: 0.8rem; color: var(--gris); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.migas a { text-decoration: none; }
.migas-sep { color: var(--linea); }

/* ------------------------------------------------------------------ secciones */
.seccion { padding: var(--aire) 0; border-top: 1px solid var(--linea); }
.seccion-pegada { border-top: 0; padding-top: 12px; }
.seccion-cabeza { margin-bottom: clamp(28px, 5vw, 56px); }
.seccion-cabeza h2 { font-size: clamp(2rem, 6vw, 3.3rem); max-width: 22ch; }
.seccion-intro { margin-top: 16px; color: var(--tinta-2); max-width: 60ch; }

.cabeza-pagina { padding: clamp(36px, 8vw, 96px) 0 clamp(32px, 6vw, 64px); }
.cabeza-pagina .contenedor { position: relative; }
.cabeza-pagina h1 { font-size: clamp(2.35rem, 7.4vw, 4.6rem); max-width: 19ch; }
.bajada { font-size: clamp(1.06rem, 2.4vw, 1.28rem); line-height: 1.5; color: var(--tinta-2); max-width: 58ch; margin-top: 22px; }
.cabeza-dibujo { display: none; }

/* ------------------------------------------------------------------ portada */
.hero { padding: clamp(28px, 6vw, 72px) 0 var(--aire); }
.hero-grilla { display: grid; gap: 44px; }
.lema { font-family: var(--serif); font-size: clamp(2.7rem, 11.5vw, 5.9rem); line-height: 0.98; letter-spacing: -0.02em; margin: 0 0 26px; }
.lema em { color: var(--tierra); }
.h1-chico { font: 500 1rem/1.4 var(--sans); letter-spacing: 0.01em; margin-bottom: 18px; }
.hero-firma { font-size: 0.95rem; color: var(--tinta-2); border-left: 2px solid var(--tinta); padding-left: 14px; }
.hero-firma strong { color: var(--tinta); font-weight: 600; }
.hero-servicios { list-style: none; display: grid; gap: 8px; margin: 22px 0 16px; font-size: 0.98rem; }
.hero-servicios a { text-decoration: none; border-bottom: 1px solid var(--linea); }
.hero-servicios a:hover { border-color: var(--tierra); }
.hero-zona { font-size: 0.9rem; color: var(--gris); display: flex; align-items: center; gap: 10px; }
.hero-zona::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tierra); flex: none; }
.hero-plano { margin: 0; }

/* el plano-mapa del estudio */
.plano-estudio { width: 100%; height: auto; overflow: visible; }
.plano-estudio .muros path { fill: none; stroke: var(--tinta); stroke-width: 7; stroke-linejoin: miter; }
.plano-estudio .tabiques path { fill: none; stroke: var(--tinta); stroke-width: 2.6; }
.plano-estudio .puertas path { fill: none; stroke: var(--tinta); stroke-width: 0.9; stroke-dasharray: 3 3; }
.plano-estudio .ambiente { text-decoration: none; }
.plano-estudio .ambiente-fondo { fill: transparent; transition: fill .2s; }
.plano-estudio .mueble { fill: none; stroke: var(--tinta-2); stroke-width: 1; }
.plano-estudio .mueble .fino { stroke-width: 0.7; }
.plano-estudio .ambiente-nombre { font: 400 21px var(--serif); fill: var(--tinta); }
.plano-estudio .ambiente-sub { font: 500 9.5px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; fill: var(--gris); }
.plano-estudio .ambiente:hover .ambiente-fondo, .plano-estudio .ambiente:focus .ambiente-fondo { fill: var(--papel-2); }
.plano-estudio .ambiente:hover .ambiente-nombre, .plano-estudio .ambiente:focus .ambiente-nombre { fill: var(--tierra); }
.plano-estudio .ambiente:focus { outline: none; }
.plano-estudio .ambiente:focus-visible .ambiente-fondo { stroke: var(--tierra); stroke-width: 2; }
.plano-estudio .plano-rotulo, .plano-estudio .norte text { font: 500 10px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; fill: var(--gris); }
.plano-estudio .norte path { fill: var(--tinta); }

/* pictogramas y croquis */
.pictograma { width: 96px; height: 72px; fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pictograma .fino { stroke-width: 1; stroke: var(--tinta-2); }

.tarjetas { display: grid; gap: 0; border-top: 1px solid var(--tinta); }
.tarjeta {
  display: flex; flex-direction: column; gap: 12px; padding: 28px 0 30px; border-bottom: 1px solid var(--linea);
  text-decoration: none; color: var(--tinta);
}
.tarjeta p { color: var(--tinta-2); margin: 0; }
.tarjeta-ir { margin-top: auto; font-size: 0.88rem; font-weight: 500; }
.tarjeta-ir::after { content: ' →'; }
a.tarjeta:hover h3, a.tarjeta:hover .tarjeta-ir { color: var(--tierra); }
.tarjetas-texto .tarjeta h3 { font: 400 1.5rem/1.15 var(--serif); }

.destacada { display: grid; gap: 28px; }
.destacada-texto p { font-size: 1.06rem; max-width: 48ch; }

.ideacion { display: grid; gap: 28px; margin-bottom: 40px; }
.ideacion-paso { margin: 0; }
.ideacion-paso svg { width: 100%; height: auto; background: var(--blanco); border: 1px solid var(--linea); padding: 14px;
  fill: none; stroke: var(--tinta); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ideacion-paso svg .fino { stroke-width: 0.8; stroke: var(--tinta-2); }
.ideacion-paso figcaption { font-size: 0.95rem; color: var(--tinta); margin-top: 12px; }

.herramientas { display: grid; gap: 14px; }
.herramienta {
  display: block; text-decoration: none; padding: 26px 24px 24px; background: var(--blanco); border: 1px solid var(--linea);
  transition: border-color .15s;
}
.herramienta .numero { font: 400 2.6rem/1 var(--serif); display: block; margin-bottom: 18px; }
.herramienta h3 { font: 400 1.6rem/1.1 var(--serif); margin-bottom: 8px; }
.herramienta p { margin: 0; color: var(--tinta-2); }
.herramienta:hover { border-color: var(--tinta); color: var(--tinta); }

.seccion-firma h2 { font-size: clamp(2rem, 7vw, 4rem); max-width: none; }

.zonas { list-style: none; border-top: 1px solid var(--tinta); }
.zonas a {
  display: grid; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--linea); text-decoration: none;
}
.zona-n { font: 400 1.7rem/1.1 var(--serif); }
.zona-l { color: var(--tinta-2); font-size: 0.95rem; }
.zonas a:hover .zona-n { color: var(--tierra); }

.lista-preguntas { list-style: none; border-top: 1px solid var(--tinta); margin-bottom: 24px; }
.lista-preguntas a { display: block; padding: 16px 0; border-bottom: 1px solid var(--linea); text-decoration: none; font-family: var(--serif); font-size: 1.3rem; line-height: 1.25; }

/* ------------------------------------------------------------------ fotos */
.foto { margin: 0; }
.foto img { width: 100%; background: var(--papel-2); }
.foto-vacia .foto-espacio {
  position: relative; width: 100%; aspect-ratio: var(--ar, 4 / 3); background: var(--papel-2);
  border: 1px solid var(--linea); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; overflow: hidden; text-align: center; padding: 16px;
}
.foto-espacio svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.foto-espacio svg line { stroke: var(--linea); stroke-width: 1; }
.foto-etiqueta, .foto-medida { position: relative; background: var(--papel-2); padding: 2px 8px; }
.foto-etiqueta { font: 500 0.74rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-2); }
.foto-medida { font-size: 0.74rem; color: var(--gris); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ datos, pasos, tablas */
.datos { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--linea); }
.datos > div { padding: 14px 0; border-bottom: 1px solid var(--linea); display: grid; gap: 4px; }
.datos dt { font: 500 0.72rem/1.4 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--gris); }
.datos dd { margin: 0; }
.datos-columnas { margin-top: 28px; }
.datos-grandes dd { font: 400 clamp(1.7rem, 5vw, 2.6rem)/1.1 var(--serif); }
.datos-grandes { margin-bottom: 28px; }

.pasos { list-style: none; border-top: 1px solid var(--tinta); counter-reset: paso; }
.paso { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 24px 0; border-bottom: 1px solid var(--linea); }
.paso-n { font: 400 1.9rem/1 var(--serif); color: var(--tierra); font-variant-numeric: tabular-nums; }
.paso-texto h3 { font: 400 1.5rem/1.15 var(--serif); margin-bottom: 10px; }
.paso-texto p { color: var(--tinta-2); max-width: 62ch; }
.paso-texto p:last-child { margin-bottom: 0; }
.paso-donde { margin-top: 12px; }

.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 520px; }
.tabla th { font: 500 0.72rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); text-align: left; }
.tabla th, .tabla td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla thead th { border-bottom-color: var(--tinta); }
.tabla .num { text-align: right; white-space: nowrap; padding-right: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 0.8rem; padding: 5px 10px; border: 1px solid var(--linea); border-radius: 999px; color: var(--tinta-2); background: var(--blanco); }

.lista-columnas { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--linea); }
.lista-columnas li { padding: 12px 0 12px 22px; border-bottom: 1px solid var(--linea); position: relative; }
.lista-columnas li::before { content: ''; position: absolute; left: 0; top: 1.3em; width: 10px; border-top: 1px solid var(--tierra); }

.dos-columnas { display: grid; gap: 36px; }

/* ------------------------------------------------------------------ servicios */
.servicios-lista { border-top: 1px solid var(--tinta); }
.servicio-fila {
  display: grid; grid-template-columns: 1fr; gap: 14px; padding: 28px 0; border-bottom: 1px solid var(--linea); text-decoration: none;
}
.servicio-fila .numero { font-size: 0.85rem; }
.servicio-texto { display: grid; gap: 10px; }
.servicio-nombre { font: 400 clamp(1.7rem, 5vw, 2.4rem)/1.08 var(--serif); }
.servicio-linea { color: var(--tinta-2); max-width: 62ch; }
.servicio-fila:hover .servicio-nombre { color: var(--tierra); }

/* ------------------------------------------------------------------ obras */
.obras-controles { display: grid; gap: 12px; margin-bottom: 28px; }
.control-grupo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.control-t { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--gris); width: 100%; margin-bottom: 2px; }
.control-grupo label {
  cursor: pointer; font-size: 0.88rem; padding: 9px 12px; border: 1px solid var(--linea); background: var(--blanco);
  display: inline-flex; gap: 8px; align-items: center; min-height: 40px;
}
.control-grupo label:hover { border-color: var(--tinta); }
.cuenta { font-size: 0.75rem; color: var(--gris); font-variant-numeric: tabular-nums; }
#v-fichas:checked ~ .obras-controles label[for="v-fichas"], #v-lista:checked ~ .obras-controles label[for="v-lista"],
#g-todas:checked ~ .obras-controles label[for="g-todas"], #g-construida:checked ~ .obras-controles label[for="g-construida"],
#g-en-obra:checked ~ .obras-controles label[for="g-en-obra"], #g-proyecto:checked ~ .obras-controles label[for="g-proyecto"],
#m-todos:checked ~ .obras-controles label[for="m-todos"], #m-zona:checked ~ .obras-controles label[for="m-zona"],
#m-distancia:checked ~ .obras-controles label[for="m-distancia"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
#v-fichas:checked ~ .obras-controles label[for="v-fichas"] .cuenta { color: var(--linea); }
.obras-app input:focus-visible + * { outline: none; }
#v-fichas:focus-visible ~ .obras-controles label[for="v-fichas"], #v-lista:focus-visible ~ .obras-controles label[for="v-lista"],
#g-todas:focus-visible ~ .obras-controles label[for="g-todas"], #g-construida:focus-visible ~ .obras-controles label[for="g-construida"],
#g-en-obra:focus-visible ~ .obras-controles label[for="g-en-obra"], #g-proyecto:focus-visible ~ .obras-controles label[for="g-proyecto"],
#m-todos:focus-visible ~ .obras-controles label[for="m-todos"], #m-zona:focus-visible ~ .obras-controles label[for="m-zona"],
#m-distancia:focus-visible ~ .obras-controles label[for="m-distancia"] { outline: 2px solid var(--tierra); outline-offset: 2px; }
.obras-controles label .cuenta { color: inherit; opacity: .7; }

.obras-vacio { display: none; }
#g-construida:checked ~ .obras-vacio[data-para="g-construida"], #g-en-obra:checked ~ .obras-vacio[data-para="g-en-obra"],
#g-proyecto:checked ~ .obras-vacio[data-para="g-proyecto"], #m-zona:checked ~ .obras-vacio[data-para="m-zona"],
#m-distancia:checked ~ .obras-vacio[data-para="m-distancia"] { display: block; }
#g-construida:checked ~ .obras-fichas [data-grupo]:not([data-grupo="construida"]),
#g-en-obra:checked ~ .obras-fichas [data-grupo]:not([data-grupo="en-obra"]),
#g-proyecto:checked ~ .obras-fichas [data-grupo]:not([data-grupo="proyecto"]),
#m-zona:checked ~ .obras-fichas [data-modo]:not([data-modo="zona"]),
#m-distancia:checked ~ .obras-fichas [data-modo]:not([data-modo="distancia"]),
#g-construida:checked ~ .obras-indice tr[data-grupo]:not([data-grupo="construida"]),
#g-en-obra:checked ~ .obras-indice tr[data-grupo]:not([data-grupo="en-obra"]),
#g-proyecto:checked ~ .obras-indice tr[data-grupo]:not([data-grupo="proyecto"]),
#m-zona:checked ~ .obras-indice tr[data-modo]:not([data-modo="zona"]),
#m-distancia:checked ~ .obras-indice tr[data-modo]:not([data-modo="distancia"]) { display: none; }
#v-fichas:checked ~ .obras-indice, #v-lista:checked ~ .obras-fichas { display: none; }
.obras-vacio { font-size: 0.95rem; color: var(--tinta-2); padding: 18px 0; border-top: 1px solid var(--linea); }

.obras-fichas { display: grid; gap: 44px; }
.ficha { display: grid; gap: 18px; align-content: start; scroll-margin-top: 20px; }
.ficha:target .ficha-tipo { color: var(--tierra); }
.ficha-numero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 6px; }
.numero-obra { font: 600 0.82rem/1 var(--sans); letter-spacing: 0.16em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ficha-tipo { font: 400 1.9rem/1.1 var(--serif); margin-bottom: 14px; }
.ficha-datos > div { grid-template-columns: 116px 1fr; gap: 12px; padding: 9px 0; font-size: 0.93rem; }
.ficha-datos dt { padding-top: 3px; }
.ficha-mas { margin-top: 14px; border-bottom: 1px solid var(--linea); }
.ficha-mas summary { cursor: pointer; font-size: 0.9rem; font-weight: 500; padding: 10px 0; list-style: none; }
.ficha-mas summary::-webkit-details-marker { display: none; }
.ficha-mas summary::after { content: ' +'; color: var(--tierra); }
.ficha-mas[open] summary::after { content: ' −'; }
.ficha-mas .datos { border-top: 0; margin-bottom: 10px; font-size: 0.93rem; }

/* ------------------------------------------------------------------ enlaces relacionados y cierre */
.relacionados { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--margen) var(--aire); }
.relacionados ul { list-style: none; display: grid; border-top: 1px solid var(--tinta); }
.relacionados a { display: grid; gap: 4px; padding: 18px 28px 18px 0; border-bottom: 1px solid var(--linea); text-decoration: none; position: relative; }
.relacionados a::after { content: '→'; position: absolute; right: 2px; top: 20px; }
.rel-t { font: 400 1.45rem/1.15 var(--serif); }
.rel-l { font-size: 0.9rem; color: var(--tinta-2); }
.relacionados a:hover .rel-t { color: var(--tierra); }

.cierre { background: var(--tinta); color: var(--papel); padding: var(--aire) 0; }
.cierre .rotulo { color: #A9A59B; }
.cierre h2 { font-size: clamp(2.3rem, 8vw, 4.4rem); margin-bottom: 20px; }
.cierre p { color: #D9D4C8; max-width: 56ch; font-size: 1.05rem; }
.cierre-grilla { display: grid; gap: 28px; }
.cierre .boton { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.cierre .boton:hover { background: var(--tierra-2); border-color: var(--tierra-2); color: var(--blanco); }
.cierre .boton.claro { background: transparent; color: var(--papel); border-color: #77746C; }
.cierre .boton.claro:hover { border-color: var(--papel); }
.cierre .mini { color: #A9A59B; margin-top: 18px; }
.cierre a:not(.boton):hover { color: var(--papel); }

/* ------------------------------------------------------------------ pie */
.pie { background: var(--papel-2); padding: 56px 0 36px; font-size: 0.92rem; }
.pie-arriba { display: grid; gap: 32px; padding-bottom: 36px; border-bottom: 1px solid var(--linea); }
.pie-col ul { list-style: none; display: grid; gap: 8px; }
.pie-col a { text-decoration: none; }
.pie-col a:hover { text-decoration: underline; }
.pie-titulo { font: 500 0.72rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); margin-bottom: 12px; }
.pie-estudio p { color: var(--tinta-2); }
.logotipo-pie { margin-bottom: 18px; }
.pie-canales, .pie-legal { font-size: 0.82rem; color: var(--gris); margin: 18px 0 0; max-width: 90ch; }

/* ------------------------------------------------------------------ quién soy, sistemas, prensa, preguntas */
.texto-persona p { max-width: 60ch; }
.prensa { list-style: none; border-top: 1px solid var(--tinta); }
.prensa a { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--linea); text-decoration: none; }
.prensa-medio { font: 500 0.72rem/1.4 var(--sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--gris); }
.prensa-t { font: 400 1.25rem/1.25 var(--serif); }
.prensa a:hover .prensa-t { color: var(--tierra); }

.sistemas { display: grid; gap: 14px; }
.sistema { background: var(--blanco); border: 1px solid var(--linea); padding: 24px 22px; }
.sistema-nombre { font-size: 1.9rem; margin: 14px 0 12px; }
.sistema p { color: var(--tinta-2); }
.sistema-link { margin: 0; font-weight: 500; }
.linea-tiempo { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--tinta); margin-bottom: 28px; }
.linea-tiempo li { display: grid; grid-template-columns: 80px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.lt-anio { font: 400 1.6rem/1 var(--serif); color: var(--tierra); }

.faq { border-top: 1px solid var(--tinta); max-width: 880px; }
.faq-item { border-bottom: 1px solid var(--linea); scroll-margin-top: 16px; }
.faq-item summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h2 { font-size: clamp(1.3rem, 3.6vw, 1.6rem); line-height: 1.2; display: inline; }
.faq-item summary::after { content: '+'; position: absolute; right: 4px; top: 18px; font: 300 1.6rem/1 var(--sans); color: var(--tierra); }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { max-width: 64ch; color: var(--tinta-2); padding-bottom: 8px; }
.faq-item:target summary h2 { color: var(--tierra); }

/* ------------------------------------------------------------------ armá tu casa */
.armador { display: grid; gap: 28px; }
.armador .rotulo { color: var(--tinta); }
.campos-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campo { display: grid; gap: 6px; font-size: 0.85rem; color: var(--tinta-2); }
.campo input, .reserva select, .reserva textarea, .calc-numero input, .calc-caja input[type="text"], .calc-caja textarea {
  font: 400 1.05rem var(--sans); color: var(--tinta); background: var(--blanco); border: 1px solid var(--linea);
  padding: 12px 14px; min-height: 50px; width: 100%; border-radius: 0;
}
.campo input:focus, .reserva select:focus, .reserva textarea:focus, .calc-caja input:focus, .calc-caja textarea:focus { border-color: var(--tinta); outline: none; }
.botonera { display: flex; flex-wrap: wrap; gap: 8px; }
.botonera button, .amb-botones button, .lista-ambientes .amb-nombre {
  font: 500 0.92rem/1.2 var(--sans); color: var(--tinta); background: var(--blanco); border: 1px solid var(--linea);
  padding: 11px 14px; min-height: 46px; cursor: pointer; border-radius: 0;
}
.botonera button::before { content: '+ '; color: var(--tierra); }
.botonera button:hover, .amb-botones button:hover { border-color: var(--tinta); }
.plano-caja { background: var(--blanco); border: 1px solid var(--linea); padding: 10px; }
.plano-caja svg { width: 100%; height: auto; max-height: 64vh; touch-action: none; user-select: none; -webkit-user-select: none; }
.plano-caja .bloque { cursor: grab; }
.plano-caja .bloque:active { cursor: grabbing; }
.plano-caja .bloque:focus { outline: none; }
.armador-plano .mini { margin-top: 10px; }
.armador-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea); border: 1px solid var(--linea); }
.armador-numeros > div { background: var(--papel); padding: 14px 16px; display: grid; gap: 4px; }
.num-t { font: 500 0.7rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.num-v { font: 400 clamp(1.6rem, 6vw, 2.3rem)/1 var(--serif); font-variant-numeric: tabular-nums; }
.aviso-encimados { font-size: 0.9rem; color: var(--tierra); margin: -12px 0 0; }
.lista-ambientes { list-style: none; border-top: 1px solid var(--tinta); }
.lista-ambientes li { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.lista-ambientes li.vacio { color: var(--gris); font-size: 0.95rem; }
.lista-ambientes li.elegido .amb-nombre { border-color: var(--tierra); color: var(--tierra); }
.lista-ambientes .amb-nombre { justify-self: start; font-weight: 600; }
.amb-medida { font-size: 0.9rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.amb-botones { display: flex; flex-wrap: wrap; gap: 6px; }
.amb-botones button { font-size: 0.8rem; padding: 7px 10px; min-height: 38px; }
.leyenda { font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; border-left: 2px solid var(--tierra); padding-left: 16px; max-width: 60ch; margin: 0; }
.armador-acciones { margin-top: 0; }

/* ------------------------------------------------------------------ calculadora */
.calc { max-width: 860px; display: grid; gap: 16px; }
.calc-caja { background: var(--blanco); border: 1px solid var(--linea); padding: clamp(20px, 4vw, 36px); }
.calc-caja h2 { font-size: clamp(1.7rem, 5vw, 2.4rem); margin-bottom: 16px; }
.calc-caja > p:last-child { margin-bottom: 0; }
.calc-ayuda { color: var(--tinta-2); }
.calc-nota { font-size: 0.93rem; border-left: 3px solid var(--tierra); padding: 6px 0 6px 12px; color: var(--tinta-2); }
.calc-avance { display: flex; align-items: center; gap: 14px; }
.calc-barra { flex: 1; height: 2px; background: var(--linea); position: relative; }
.calc-barra i { position: absolute; left: 0; top: -1px; height: 4px; background: var(--tinta); }
.calc-opciones { display: grid; gap: 8px; margin: 18px 0 6px; }
.calc-op {
  text-align: left; font: 500 1rem/1.35 var(--sans); color: var(--tinta); background: var(--papel); border: 1px solid var(--linea);
  padding: 14px 16px; min-height: 52px; cursor: pointer; display: grid; gap: 3px; border-radius: 0;
}
.calc-op small { font-weight: 400; color: var(--tinta-2); }
.calc-op:hover { border-color: var(--tinta); }
.calc-op.elegida { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }
.calc-op.elegida small { color: #D9D4C8; }
.calc-numero { display: flex; align-items: center; gap: 12px; margin: 18px 0 6px; max-width: 320px; }
.calc-numero span { color: var(--tinta-2); }
.calc-ojo { margin-top: 14px; padding: 14px 16px; background: var(--papel); border-left: 3px solid var(--tierra); font-size: 0.95rem; color: var(--tinta-2); }
.calc-ojo b { display: block; color: var(--tinta); margin-bottom: 4px; }
.calc-nav { justify-content: space-between; }
.calc-tabla { min-width: 0; }
.calc-tabla td small { display: block; color: var(--tinta-2); font-size: 0.84rem; margin-top: 3px; }
.calc-tabla .motivo { color: var(--tierra); }
.calc-tabla .total td { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--tinta); padding-top: 16px; font-size: 1.05rem; }
.calc-primero { display: grid; gap: 4px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--linea); }
.calc-primero span { font-size: 0.85rem; color: var(--gris); }
.calc-primero b { font: 400 2rem/1.1 var(--serif); }
.calc-papel { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--linea); cursor: pointer; }
.calc-papel input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--tinta); flex: none; }
.calc-contestado { list-style: none; display: grid; gap: 8px; font-size: 0.92rem; margin-bottom: 16px; }
.calc-contestado b { font-weight: 500; color: var(--tinta-2); display: block; font-size: 0.82rem; }

/* ------------------------------------------------------------------ reserva */
.reserva-grilla { display: grid; gap: 40px; }
.reserva { display: grid; gap: 26px; }
.reserva fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.reserva legend { font: 400 1.45rem/1.2 var(--serif); margin-bottom: 10px; padding: 0; }
.reserva legend small { font: 400 0.8rem var(--sans); color: var(--gris); }
.opcion { display: grid; grid-template-columns: 22px 1fr; gap: 2px 12px; align-items: start; padding: 14px 16px; background: var(--blanco); border: 1px solid var(--linea); cursor: pointer; }
.opcion input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--tinta); grid-row: span 2; }
.opcion span { font-weight: 500; }
.opcion small { grid-column: 2; color: var(--tinta-2); }
.opcion:has(input:checked) { border-color: var(--tinta); }
.opcion-aviso { background: transparent; border-style: dashed; }
.opcion-resumen small { font-size: 0.85rem; }
.dias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.dia { flex: none; scroll-snap-align: start; cursor: pointer; }
.dia input, .hora input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dia span { display: grid; justify-items: center; gap: 2px; width: 66px; padding: 10px 4px; background: var(--blanco); border: 1px solid var(--linea); }
.dia small { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gris); }
.dia b { font: 500 1.35rem/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.dia-otro span { width: 92px; }
.dia-otro b { font-size: 1.2rem; }
.dia input:checked + span, .hora input:checked + span { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.dia input:checked + span small { color: #D9D4C8; }
.dia input:focus-visible + span, .hora input:focus-visible + span { outline: 2px solid var(--tierra); outline-offset: 2px; }
.horas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hora { cursor: pointer; position: relative; }
.hora span { display: block; text-align: center; padding: 13px 4px; background: var(--blanco); border: 1px solid var(--linea); font-variant-numeric: tabular-nums; font-weight: 500; }
.reserva textarea { min-height: 120px; resize: vertical; }
.vista-mensaje { background: var(--papel-2); padding: 16px 18px; margin-top: 10px; }
.vista-texto { white-space: pre-line; font-size: 0.9rem; color: var(--tinta-2); margin: 0; }
.aviso-sena { margin: 0; }
.reserva-lado .datos { margin-bottom: 20px; }

/* ------------------------------------------------------------------ tablet y compu */
@media (min-width: 640px) {
  :root { --margen: 32px; }
  .hero-servicios { display: flex; flex-wrap: wrap; gap: 6px 0; }
  .hero-servicios li:not(:last-child)::after { content: '·'; margin: 0 10px; color: var(--gris); }
  .tarjetas { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .ideacion { grid-template-columns: repeat(3, 1fr); }
  .herramientas { grid-template-columns: repeat(3, 1fr); }
  .datos-columnas { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .lista-columnas { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .obras-fichas { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .relacionados ul { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
  .sistemas { grid-template-columns: 1fr 1fr; }
  .zonas a { grid-template-columns: minmax(200px, 1fr) 2fr; align-items: baseline; gap: 24px; }
  .pie-arriba { grid-template-columns: repeat(3, 1fr); }
  .armador-numeros { grid-template-columns: repeat(4, 1fr); }
  .horas { grid-template-columns: repeat(6, 1fr); }
  .lista-ambientes li { grid-template-columns: 150px 1fr; align-items: center; }
  .amb-botones { grid-column: 1 / -1; }
  .control-t { width: auto; margin: 0 8px 0 0; min-width: 64px; }
  .obras-controles { grid-template-columns: auto 1fr; }
  .obras-controles .control-grupo:last-child { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
  :root { --margen: 48px; }
  body { font-size: 18px; }
  .nav-grande { display: flex; gap: 26px; }
  .nav-grande a { text-decoration: none; font-size: 0.92rem; padding: 6px 0; border-bottom: 1px solid transparent; }
  .nav-grande a:hover { border-color: var(--tierra); }
  .nav-grande a[aria-current="page"] { border-color: var(--tierra); }
  .nav-chica { display: none; }
  .cabecera-fila { min-height: 84px; }

  .hero-grilla { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: center; }
  .seccion .contenedor { display: grid; grid-template-columns: 3fr 9fr; column-gap: 48px; }
  .seccion .contenedor > * { grid-column: 2; }
  .seccion .contenedor > .seccion-cabeza { grid-column: 1 / -1; display: grid; grid-template-columns: 3fr 9fr; column-gap: 48px; }
  .seccion-cabeza .rotulo { grid-column: 1; grid-row: 1 / span 2; padding-top: 0.9em; }
  .seccion-cabeza h2, .seccion-cabeza .seccion-intro { grid-column: 2; }
  .seccion-pegada .contenedor { display: block; }
  .seccion-pegada .contenedor > * { grid-column: auto; }
  .seccion-pegada .contenedor.dos-columnas { display: grid; grid-template-columns: 5fr 7fr; column-gap: 64px; }
  .seccion-pegada .contenedor.reserva-grilla { display: grid; grid-template-columns: 7fr 4fr; column-gap: 64px; }

  .tarjetas { column-gap: 48px; }
  .seccion .tarjetas-texto { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
  .destacada { grid-template-columns: 7fr 5fr; align-items: end; gap: 40px; }
  .cabeza-dibujo { display: block; position: absolute; right: var(--margen); bottom: 0; }
  .cabeza-dibujo .pictograma { width: 168px; height: 126px; stroke-width: 1.1; }
  .cabeza-pagina h1 { max-width: 16ch; }
  .dos-columnas { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .servicio-fila { grid-template-columns: 70px 120px 1fr; align-items: start; gap: 28px; }
  .servicio-fila .numero { padding-top: 0.8em; }
  .obras-fichas { grid-template-columns: repeat(3, 1fr); }
  .cierre-grilla { grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; }
  .pie-arriba { grid-template-columns: 2fr 1.6fr 1.4fr 1.2fr 1.2fr 1.2fr; gap: 28px; }
  .sistemas { grid-template-columns: repeat(3, 1fr); }
  .armador {
    grid-template-columns: minmax(280px, 4fr) minmax(0, 7fr); column-gap: 48px; align-items: start;
    grid-template-areas: 'terreno plano' 'ambientes plano' 'lista plano' 'lista numeros' 'lista encimados' 'lista leyenda' 'lista acciones';
  }
  .armador-terreno { grid-area: terreno; } .armador-ambientes { grid-area: ambientes; } .armador-plano { grid-area: plano; }
  .armador-numeros { grid-area: numeros; } .aviso-encimados { grid-area: encimados; margin: 0; } .armador-lista { grid-area: lista; }
  .leyenda { grid-area: leyenda; } .armador-acciones { grid-area: acciones; }
  .reserva-grilla { grid-template-columns: 7fr 4fr; gap: 64px; align-items: start; }
  .reserva-lado { position: sticky; top: 24px; }
}

@media (min-width: 1280px) {
  .lema { font-size: 6.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ al imprimir (el informe de la calculadora) */
@media print {
  body { background: #fff; font-size: 11pt; }
  .cabecera, .migas, .pie, .cierre, .relacionados, .no-imprimir, .cabeza-pagina .bajada, .calc-nav, .seccion:not(.seccion-pegada) { display: none !important; }
  .calc-caja { border: 0; border-top: 1px solid #999; padding: 12px 0; break-inside: avoid; }
  .cabeza-pagina { padding: 0 0 12px; }
  .cabeza-pagina h1 { font-size: 22pt; }
  a { text-decoration: none; }
}