/* Páez · refinamiento de diseño · copia independiente, septiembre 2026.
   Conserva carbón, latón, serif editorial y las cápsulas de vidrio. */
:root { color-scheme: dark; --bone-38: rgba(237,234,226,.62); }

/* Portada: una jerarquía completa, con contexto antes del titular y una
   salida visible hacia el contenido. Altura natural en pantallas bajas. */
.hero { min-height: 100svh; padding-block: 9rem 9rem; }
.hero__title { font-size: clamp(2.25rem, min(8.6vw, 15vh), 8rem); }
.hero__eyebrow {
  display: flex; justify-content: center; align-items: center; gap: .85rem;
  margin: 0 auto 1.6rem; font-size: .8rem; letter-spacing: .045em;
  color: var(--bone-80);
}
.hero__eyebrow::before { content: ''; width: 1.8rem; height: 1px; background: var(--brass-hi); }
.hero__sub { max-width: 51ch; font-size: clamp(1rem, 1.3vw, 1.1rem); margin-top: 1.6rem; }
.hero__cta { margin-top: 2rem; gap: 1rem 1.5rem; }
.hero__inner { transform: none; opacity: 1; }
.hero__inner.is-ida { pointer-events: auto; }
.hero__title .ln > span { transform: none; animation: none; }
.hero__sub, .hero__cta { opacity: 1; animation: none; }
.hero__veil {
  background: linear-gradient(to top, var(--ink-900), rgba(14,17,14,.38) 45%, rgba(14,17,14,.35)),
    radial-gradient(ellipse at center, rgba(14,17,14,.70), rgba(14,17,14,.18));
}
.hero__footer {
  position: absolute; z-index: 10; bottom: 1.5rem; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding-top: 1rem; padding-right: 4rem; border-top: 1px solid var(--line); text-align: left;
  font-size: .78rem; color: var(--bone-80);
}
.hero__location { margin: 0; }
.hero__explore { display: inline-flex; align-items: center; gap: 1rem; min-height: 44px; }
.hero__explore span { color: var(--brass-hi); }
.hero__play {
  position: absolute; bottom: calc(100% + 1rem); right: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 44px; padding: .5rem .8rem; border: 1px solid var(--line);
  border-radius: var(--r-pill); font-size: .76rem; color: var(--bone-80);
}
.hero__play[hidden] { display: none; }
.hero__play:hover { background: var(--bone-18); }
.hero__video { animation: none; transform: scale(1.03); }
.hero__fallback { animation: none; }

/* Ritmo editorial: cada bloque conserva su composición, con una pausa
   tonal en La firma, un retrato contenido y las materias más compactas. */
.home #firma { background: #181e18; }
.home #firma .firma__title { max-width: 15ch; }
.home #firma .firma__lead { line-height: 1.5; }
.band-id { color: var(--bone-58); }
.home .pliego { margin-top: 2.75rem; }
.home .mat { min-height: 0; }
.home .mat__head { padding-top: 2rem; }
.home .mat__name { line-height: 1.16; }
.home .mat__go { padding-top: 1.75rem; }
.home .mat__list { margin-top: 1.5rem; }
.home .partner__shot { max-width: 26rem; }
.home .partner__name { font-size: clamp(2.4rem, 4.8vw, 4rem); max-width: 15ch; }
.home .partner__role { color: var(--brass-hi); }
.home #blog .notas__title { max-width: 100%; }
.home .nota { display: flex; flex-direction: column; }
.home .nota h3 { font-size: clamp(1.55rem, 2.6vw, 2.1rem); line-height: 1.35; }
.home .nota p { margin-bottom: 1.5rem; }
.home .nota__meta { margin-top: auto; color: var(--bone-58); }
.home .nota::after { display: none; }
.nota__read { display: block; margin-top: 1.25rem; font-size: .85rem; color: var(--brass-hi); }
/* ── Escala general ───────────────────────────────────────────────────────
   Ángel, 5 sept 2026: «reduce los espacios grandes entre textos y las letras
   muy muy grandes». Baja el hueco entre secciones de 112 a 84 px y los dos
   tamaños de titular que usa todo el sitio. El titular de la portada NO se
   toca: ese le gusta como está. */
:root { --gap-top: 2rem; --gap-bottom: 3.25rem; }
.d-lg { font-size: clamp(2rem, 4vw, 3.2rem); }
/* Ángel, 5 sept 2026: «cuando la conducta puede ir en el renglón de abajo con
   toda la frase, evitemos ese tipo de cortes». `pretty` le pide al navegador
   que no deje huérfanas ni palabras sueltas al final; donde el corte importa
   de verdad va un `<br>` o un espacio duro en el HTML. */
.display, .art-title, h1, h2, h3 { text-wrap: pretty; }
.art-title { max-width: 26ch; }

.d-md { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.page-head { padding-block: clamp(7rem, 14vh, 9.5rem) var(--gap-bottom); }
.lede { font-size: clamp(1rem, 1.25vw, 1.1rem); }

/* Cierre de contacto. El correo (25 caracteres) no cabía en la caja al tamaño
   anterior y se partía a mitad de palabra: «contacto@paezabogado / s.xyz».
   Escala más contenida y caja algo más ancha para que entre en un solo renglón.
   Si se vuelve a subir el tamaño, comprobar el correo entre 1100 y 1440 px. */
.close__line { max-width: 14ch; }
.close__ways { max-width: 26rem; gap: clamp(.6rem, 1.6vw, 1.1rem); }
.close__way {
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  padding-bottom: .5rem;
  overflow-wrap: anywhere;
  transition: color 160ms ease, border-color 160ms ease;
}
.close__way small { font-size: .76rem; margin-bottom: .2rem; }
.close__way:hover, .close__way:focus-visible { padding-left: 0; }
.close__where { max-width: 26rem; }
/* ── proceso.html ──────────────────────────────────────────────────────────
   Ángel, 5 sept 2026: «esa lista de números del uno al 6 no me gusta».
   Los seis numerales grandes salieron del HTML. El orden lo cuenta ahora un
   hilo de latón con un punto por etapa, y el texto ocupa el ancho que antes
   se quedaba vacío a la derecha. No devolver los números. */
.ruta { position: relative; margin-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--line); }
/* El hilo recorre la ruta entera. Antes se apagaba a la altura de la quinta
   etapa y la última quedaba con su punto suelto, como si faltara algo. */
.ruta::before {
  content: '';
  position: absolute;
  left: 4px; top: 0; bottom: 0;
  width: 1px;
  background: var(--brass-28);
}
.etapa {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 7fr);
  gap: clamp(.4rem, 3.5vw, 4rem);
  padding: clamp(1.35rem, 2.5vw, 2rem) 0 clamp(1.35rem, 2.5vw, 2rem) 2.1rem;
  border-bottom: 1px solid var(--line);
}
/* El punto va relleno: tapa el hilo sin necesitar el color del fondo. */
.etapa::before {
  content: '';
  position: absolute;
  left: 1px; top: calc(clamp(1.35rem, 2.5vw, 2rem) + .82em);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brass);
}
.etapa h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 0; }
.etapa p { max-width: 62ch; }

/* Rótulo a la izquierda y lista a la derecha. Sin el modificador la columna
   del titular se lleva 7 de 12 para dos renglones de texto y deja un socavón
   en la mitad de la página. Aquí manda la lista, que es el contenido. */
.trabajo--aviso { grid-template-columns: minmax(0, 4.2fr) minmax(0, 7fr); }
.trabajo__pie {
  margin: clamp(1.1rem, 2vw, 1.5rem) 0 0;
  max-width: 30ch;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--bone-58);
}

/* Las condiciones de la consulta en contacto.html: rótulo a la izquierda y el
   dato al lado, sin numerales ni pasos. Sustituyen a «qué pasa después de
   enviar», que Ángel quitó por preferir decir de frente el plazo y el costo. */
.condiciones { display: grid; gap: clamp(.9rem, 2vw, 1.25rem); }
.condiciones p {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: .4rem 1.25rem;
  margin: 0;
  padding-top: clamp(.9rem, 2vw, 1.25rem);
  border-top: 1px solid var(--line-soft);
  font-size: .93rem;
  line-height: 1.65;
  color: var(--bone-80);
}
.condiciones p:first-child { padding-top: 0; border-top: 0; }
.condiciones span { font-size: .78rem; letter-spacing: .02em; color: var(--brass-hi); }
@media (max-width: 520px) {
  .condiciones p { grid-template-columns: 1fr; }
}

/* El filete de la columna de contacto ya está separado por el hueco del flex;
   sus márgenes propios lo dejaban flotando en medio de un vacío. */
.close__col > .corte { margin-block: 0; }

.field input, .field select, .field textarea { font-size: 1rem; min-height: 48px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(237,234,226,.52); }
.form__note, .close__where, .field__opt { color: var(--bone-58); }

/* Leemos desde el primer render, incluso sin JavaScript. Las únicas
   transiciones son respuestas breves a acciones, sin cascadas de espera. */
[data-reveal] { opacity: 1; transform: none; transition: none; }
.cta { transition: transform 160ms var(--ease-out), box-shadow 180ms ease; }
.cta__chip { transition: transform 180ms var(--ease-out), background-color 160ms ease, color 160ms ease; }
/* Barrido y aro automáticos, también en táctil. Hover no reinicia el
   ciclo; la pausa fuera de pantalla sigue a cargo de .is-idle en styles.css. */
.cta::before, .cta:hover::before, .cta:focus-visible::before {
  animation: sweep 6.5s var(--ease) infinite;
}
.cta__ring::before { animation: beam 4s linear infinite; }
.cta.is-idle::before, .cta.is-idle .cta__ring::before { animation-play-state: paused; }
.cta:active { transform: scale(.97); }
.menu, .menu-scrim { transition-duration: 220ms; }
.menu__row { transition: opacity 180ms ease, transform 220ms var(--ease-out); transform: translateX(8px); }
.menu.is-open .menu__row { transition-delay: 0ms; }
.nav-drop__panel { transform-origin: top center; transition-duration: 180ms; }
.partner__shot img { transition-duration: 200ms; }
.foot__nav a, .foot__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.hero__play:focus-visible, :focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 5px; }
:focus-visible, :focus-visible::before, :focus-visible::after,
:focus-visible .cta__chip { transition: none; animation: none; }
.cta:focus-visible, .cta:focus-visible .cta__chip { transform: none; }
html:focus-within { scroll-behavior: auto; }

@media (hover: hover) and (pointer: fine) {
  .hero__explore:hover, .hero__play:hover { color: var(--bone); }
}
@media (hover: none), (pointer: coarse) {
  .cta:hover, .cta:hover .cta__chip { transform: none; }
  .partner__shot:hover img { transform: scale(1.02); }
}
@media (min-width: 900px) {
  .home #firma .shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .home #firma .firma__title { font-size: clamp(2.5rem, 4.8vw, 4.6rem); }
  .home #firma .firma__title { grid-row: 2; }
  .home #firma .firma__more { grid-column: 1; grid-row: 3; margin-top: 2rem; }
  /* El lead y el cuerpo van juntos en una sola caja que ocupa las dos filas
     de la derecha: asi el titular, mas alto, no abre hueco entre ellos y el
     boton sigue debajo del titular. */
  .home #firma .firma__col { display: block; grid-column: 2; grid-row: 2 / span 2; }
  .home #firma .firma__body { margin-top: 1.25rem; }
  .home .partner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 8vw, 8rem); }
}
@media (min-width: 701px) {
  .home .nota + .nota { padding-left: clamp(2rem, 5vw, 4.5rem); }
  .home .nota:first-child { padding-right: clamp(2rem, 5vw, 4.5rem); }
}
@media (max-width: 620px) {
  .hero { min-height: 100svh; padding-block: 8rem 10rem; }
  .hero__title { font-size: clamp(2rem, 10.8vw, 4rem); }
  .hero__eyebrow { max-width: 28ch; font-size: .75rem; line-height: 1.6; }
  .hero__eyebrow::before { display: none; }
  .hero__sub { max-width: 34ch; margin-top: 1.75rem; }
  .hero__cta { flex-direction: column; gap: 1rem; }
  .hero__cta .cta { min-width: 13rem; justify-content: space-between; }
  .hero__footer { flex-wrap: wrap; gap: .25rem 1rem; bottom: 1.15rem; padding-top: .75rem; }
  .hero__location { flex-basis: 100%; font-size: .73rem; }
  .hero__play { padding-inline: .65rem; }
  .home .mat__head { padding-top: 1.25rem; }
  .home .mat__list { margin-top: 1.25rem; }
  .home .partner__shot { max-width: 100%; }
  .home .partner__name { max-width: 13ch; }
  .home .nota { padding-block: 1.5rem; }
  .home .nota + .nota { margin-top: 0; }
  .band { padding-block: 2.25rem 3.5rem; }
  .wa { bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-delay: 0ms !important; }
  .cta:hover, .cta:active, .cta__chip { transform: none; }
}