/* Atentia: sitio público. Una sola hoja para las cuatro páginas.
   Paleta corta: papel, tinta y un solo acento (terracota). */

:root {
  color-scheme: light;
  --papel: #F5F2EA;
  --papel-2: #ECE7DB;
  --blanco: #FFFDF8;
  --tinta: #1C1F1C;
  --tinta-2: #4A4F49;
  --linea: #D8D2C3;
  --acento: #A93B1B;
  --acento-oscuro: #8A2F14;
  --titulos: "Fraunces", Georgia, "Times New Roman", serif;
  --lectura: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ancho: 1120px;
  --margen: clamp(20px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--lectura);
  font-size: 17px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--titulos);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: 0.4em; }

a { color: var(--acento); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--acento-oscuro); }

:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: 12px; top: -60px;
  background: var(--tinta);
  color: var(--blanco);
  padding: 10px 16px;
  border-radius: 6px;
  z-index: 10;
}
.saltar:focus { top: 12px; color: var(--blanco); }

/* ---------- Cabecera ---------- */

.cabecera {
  border-bottom: 1px solid var(--linea);
}
.cabecera .caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.logo {
  font-family: var(--titulos);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--tinta);
  text-decoration: none;
  line-height: 1;
}
.logo:hover { color: var(--tinta); }

.menu {
  display: none;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
}
.menu li { margin: 0; }
.menu a { color: var(--tinta); text-decoration: none; }
.menu a:hover { text-decoration: underline; }
@media (min-width: 860px) { .menu { display: flex; } }

.boton {
  display: inline-block;
  background: var(--acento);
  color: #fff;
  font-family: var(--lectura);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid var(--acento);
  transition: background-color .15s;
}
.boton:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); color: #fff; }
.boton.chico { padding: 10px 14px; font-size: 15px; white-space: nowrap; }
.junto { white-space: nowrap; }
.boton.claro { background: var(--blanco); color: var(--tinta); border-color: var(--blanco); }
.boton.claro:hover { background: var(--papel-2); border-color: var(--papel-2); color: var(--tinta); }

/* ---------- Portada ---------- */

.inicio { padding: clamp(48px, 9vw, 104px) 0 clamp(56px, 9vw, 112px); }
.inicio .caja {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}
@media (min-width: 900px) {
  .inicio .caja { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.volanta {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 18px;
}

.inicio h1 { font-size: clamp(38px, 6.2vw, 68px); }
.inicio .bajada {
  font-size: clamp(18px, 2vw, 21px);
  color: var(--tinta-2);
  max-width: 34em;
  margin: 24px 0 32px;
}
.inicio .aclaracion { font-size: 15px; color: var(--tinta-2); margin: 16px 0 0; }

/* La charla de ejemplo */

.charla {
  margin: 0;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 20px;
  max-width: 440px;
  width: 100%;
  justify-self: center;
}
.charla figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--tinta-2);
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--linea);
}
.charla figcaption strong { color: var(--tinta); font-weight: 600; }
.charla ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.charla li { margin: 0; display: flex; flex-direction: column; }
.charla .quien { font-size: 15px; color: var(--tinta-2); margin-bottom: 3px; }
.charla .globo {
  font-size: 16px;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 16px;
  max-width: 86%;
}
.charla .cliente { align-items: flex-start; }
.charla .cliente .globo { background: var(--papel-2); border-bottom-left-radius: 4px; }
.charla .asistente { align-items: flex-end; }
.charla .asistente .globo { background: var(--tinta); color: var(--blanco); border-bottom-right-radius: 4px; }
.charla .aviso {
  align-items: center;
  margin-top: 6px;
}
.charla .aviso span {
  font-size: 15px;
  color: var(--acento);
  font-weight: 600;
  border: 1px solid var(--acento);
  border-radius: 999px;
  padding: 5px 14px;
  text-align: center;
}

/* ---------- Secciones ---------- */

.seccion { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--linea); }
.seccion h2 { font-size: clamp(30px, 4.2vw, 46px); max-width: 18em; }
.seccion .entrada {
  font-size: clamp(18px, 1.9vw, 20px);
  color: var(--tinta-2);
  max-width: 38em;
  margin: 20px 0 0;
}

.rubros {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rubros li {
  margin: 0;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 16px;
}

/* Las piezas: filas de dos columnas separadas por una línea */

.piezas { margin-top: clamp(32px, 5vw, 56px); }
.pieza {
  display: grid;
  gap: 12px 48px;
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--linea);
}
.pieza:last-child { border-bottom: 1px solid var(--linea); }
@media (min-width: 820px) {
  .pieza { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.pieza h3 { font-size: clamp(24px, 2.8vw, 32px); }
.pieza .numero {
  display: block;
  font-family: var(--lectura);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--acento);
  margin-bottom: 10px;
}
.pieza p { color: var(--tinta-2); max-width: 36em; }
.pieza ul { color: var(--tinta-2); max-width: 36em; margin-bottom: 0; }
.pieza li::marker { color: var(--acento); }
.pieza .cierre { margin: 1em 0 0; }
.pieza div > p:last-child { margin-bottom: 0; }

/* Los pasos */

.pasos {
  list-style: none;
  padding: 0;
  margin: clamp(32px, 5vw, 56px) 0 0;
  display: grid;
  gap: 32px;
  counter-reset: paso;
}
@media (min-width: 820px) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } }
.pasos li { margin: 0; counter-increment: paso; border-top: 2px solid var(--tinta); padding-top: 18px; }
.pasos li::before {
  content: counter(paso);
  display: block;
  font-family: var(--titulos);
  font-size: 44px;
  line-height: 1;
  color: var(--acento);
  margin-bottom: 14px;
}
.pasos h3 { font-size: 24px; margin-bottom: 10px; }
.pasos p { color: var(--tinta-2); margin: 0; }

/* Lo que conviene saber */

.claro-fondo { background: var(--papel-2); }
.notas {
  display: grid;
  gap: 32px 56px;
  margin-top: clamp(32px, 5vw, 48px);
}
@media (min-width: 820px) { .notas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.notas h3 { font-size: 22px; margin-bottom: 8px; }
.notas p { color: var(--tinta-2); margin: 0; max-width: 34em; }

/* Contacto */

.contacto { background: var(--tinta); color: var(--blanco); border-top: 0; }
.contacto h2 { color: var(--blanco); }
.contacto .entrada { color: #D9D5C9; margin-bottom: 32px; }
.contacto a:not(.boton) { color: var(--blanco); }
.contacto :focus-visible { outline-color: var(--blanco); }
.contacto .o-escribi { font-size: 16px; color: #D9D5C9; margin: 20px 0 0; }

/* ---------- Pie ---------- */

.pie { padding: 48px 0 56px; font-size: 15px; color: var(--tinta-2); border-top: 1px solid var(--linea); }
.pie .caja { display: grid; gap: 28px; }
@media (min-width: 820px) { .pie .caja { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.pie .logo { font-size: 22px; display: inline-block; margin-bottom: 12px; }
.pie p { margin: 0 0 4px; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 8px; }
.pie a { color: var(--tinta); }

/* ---------- Páginas legales ---------- */

.documento { padding: clamp(40px, 7vw, 80px) 0 clamp(56px, 8vw, 96px); }
.documento .caja { max-width: 780px; }
.documento h1 { font-size: clamp(34px, 5vw, 52px); }
.documento .fecha { display: block; font-size: 15px; color: var(--tinta-2); margin: 16px 0 0; }
.documento .resumen {
  font-size: 19px;
  color: var(--tinta-2);
  margin: 28px 0 0;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--linea);
}
.documento h2 { font-size: clamp(24px, 3vw, 30px); margin: 48px 0 16px; }
.documento h3 { font-family: var(--lectura); font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1.35; margin: 28px 0 10px; }
.documento li::marker { color: var(--acento); }

.borrador {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--acento);
  border-radius: 6px;
  padding: 16px 20px;
  margin: 28px 0 0;
  font-size: 16px;
}
.borrador p { margin: 0; }

.proveedores { list-style: none; padding: 0; margin: 20px 0; border-top: 1px solid var(--linea); }
.proveedores li { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.proveedores strong { display: block; }
.proveedores .donde { display: block; font-size: 15px; color: var(--tinta-2); margin-top: 4px; }

.plazos { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 16px; }
.plazos th, .plazos td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--linea); }
.plazos th { font-weight: 600; }
.plazos thead th { font-size: 15px; color: var(--tinta-2); border-bottom: 2px solid var(--tinta); }
.plazos td:last-child, .plazos th:last-child { padding-right: 0; }

.pasos-doc { padding-left: 1.4em; }
.pasos-doc li { margin-bottom: 0.7em; }