/* ==========================================================================
   Home page: per-section polish layered on top of site.css.
   Only the home links this file. Every colour comes from the site tokens.
   ========================================================================== */

:root {
  --ease-expo: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-strip: 820ms;
}

/* --------------------------------------------------------------------------
   Hero: the photo comes into focus while the copy enters, then the claim
   block drifts and fades as the user scrolls towards the practice areas.
   --scroll-p goes 0 -> 1 across the hero height (set by home.js).
   -------------------------------------------------------------------------- */
.hero { --scroll-p: 0; }
.hero__bg {
  animation:
    hero-focus 2.6s var(--ease-out) both,
    hero-drift 28s var(--ease-in-out) infinite alternate;
}
@keyframes hero-focus {
  from { opacity: 0; filter: blur(24px) saturate(0.4); }
  to   { opacity: 0.32; filter: blur(6px) saturate(0.7); }
}
.hero__inner {
  transform: translateY(calc(var(--scroll-p) * 18vh));
  opacity: calc(1 - var(--scroll-p) * 1.15);
}
.hero__scroll { opacity: calc(1 - var(--scroll-p) * 4); }
/* Small phones: keep the hero buttons clear of the WhatsApp float. */
@media (max-width: 600px) {
  .hero { padding-bottom: 7rem; }
  .hero__scroll { bottom: 2.25rem; }
}

/* --------------------------------------------------------------------------
   About: the photo shifts gently inside its frame with scroll.
   -------------------------------------------------------------------------- */
.about__figure { overflow: visible; }
.about__figure .about__frame { overflow: hidden; border-radius: 2px; }
.about__figure img {
  transform: translateY(calc(var(--fig-p, 0) * -1.6rem)) scale(1.1);
  transition: transform 120ms linear;
}
.about__figure::after {
  transition: transform var(--dur-slow) var(--ease-out) 200ms;
  transform: translate(-0.75rem, -0.75rem);
}
.about__figure.is-visible::after { transform: none; }

/* --------------------------------------------------------------------------
   CTA band: the photo drifts slowly.
   -------------------------------------------------------------------------- */
.cta-band::before {
  transform-origin: right center;
  animation: band-drift 34s var(--ease-in-out) infinite alternate;
}
@keyframes band-drift {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1.07) translateX(-1.5%); }
}
.cta-band .btn {
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.cta-band .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(30, 33, 48, 0.35); }
.cta-band .btn:active { transform: translateY(0); box-shadow: none; }
.cta-band .btn svg { transition: transform var(--dur) var(--ease-out); }
.cta-band .btn:hover svg { transform: translateY(-1px) rotate(-6deg); }

/* --------------------------------------------------------------------------
   Contact: rows of links. The row only reacts while one of its links is
   hovered or focused (a stretched link covers the whole row where there is
   a single destination), and the reaction is a quiet change of background
   and colour: nothing scales or shifts. The address row highlights the map.
   -------------------------------------------------------------------------- */
.contact-list--rows { gap: 0; margin-top: 1.5rem; border-top: 1px solid var(--line); }
.contact-list--rows li {
  position: relative;
  grid-template-columns: 2.4rem 1fr auto; gap: 1rem; align-items: center;
  padding: 0.9rem 0.75rem 0.9rem 0.25rem;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-fast) var(--ease-out);
}
.contact-list--rows .contact-row__icon {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--blue-tint); color: var(--blue);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.contact-list--rows svg { width: 1.2rem; height: 1.2rem; margin: 0; }
/* site.css paints every contact icon blue; inside the circle it must follow the circle's colour */
.contact-list--rows .contact-row__icon svg { color: inherit; }
.contact-list--rows .contact-row__arrow {
  width: 1rem; height: 1rem; color: var(--blue);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.contact-list--rows a { font-weight: 500; }
.contact-list--rows .contact-row__stretch::after { content: ""; position: absolute; inset: 0; }
.contact-list--rows a:hover { text-decoration: none; }
.contact-list--rows li.is-link:has(a:hover), .contact-list--rows li.is-link:focus-within {
  background: color-mix(in srgb, var(--blue-tint) 55%, transparent);
}
.contact-list--rows li.is-link:has(a:hover) .contact-row__icon, .contact-list--rows li.is-link:focus-within .contact-row__icon {
  background: var(--blue); color: var(--cream);
}
.contact-list--rows li.is-link:has(a:hover) .contact-row__arrow, .contact-list--rows li.is-link:focus-within .contact-row__arrow { opacity: 1; }
.contact-list--rows li.is-link a:hover, .contact-list--rows li.is-link:focus-within a { color: var(--blue); }
.contact-list--rows .contact-row__stretch:focus-visible { outline: 0; }
.contact-list--rows li:has(.contact-row__stretch:focus-visible) { outline: 2px solid var(--blue-soft); outline-offset: 2px; }
.contact-list--rows li.is-muted .contact-row__icon { background: var(--cream-2); color: var(--ink-soft); }

.map {
  /* site.css sets min-height together with an aspect-ratio, which transfers
     to a 427px min-width and overflows phones; the ratio alone is enough. */
  min-height: 0;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.map iframe { transition: filter var(--dur-slow) var(--ease-out); }
.map:hover iframe, .map.is-focused iframe { filter: saturate(1) contrast(1); }
.map.is-focused { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }

@media (max-width: 480px) {
  .contact-list--rows li { grid-template-columns: 2.1rem 1fr auto; gap: 0.8rem; }
  .contact-list--rows .contact-row__icon { width: 2.1rem; height: 2.1rem; }
}

/* --------------------------------------------------------------------------
   Reduced motion: everything lands in its final state, no drift.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__bg { animation: none; opacity: 0.32; filter: blur(6px) saturate(0.7); }
  .hero__inner, .hero__scroll { transform: none; opacity: 1; }
  .strip__body p, .strip__link { transform: none; opacity: 1; }
  .about__figure img { transform: scale(1.02); }
  .about__figure::after { transform: none; }
  .cta-band::before { animation: none; }
  .cta-band::after { display: none; }
}


/* --------------------------------------------------------------------------
   Shelf of books. The three practice areas are three leather-bound volumes
   standing on a shelf, leaning at --skew. At rest only the spine shows; the
   spine is a pre-rendered image (scripts/build-spines.py) with the grain, the
   blind-stamped logo and title, the raised bands and the lighting baked in.
   The desktop image is pre-sheared by +16deg so that inside the row's
   skewX(-16deg) it reads undistorted: --skew here and SKEW_DEG in the script
   must stay equal. On hover / focus / tap the book opens: the cover slides
   out with the photo tinted in the area colour and the description.
   --skew: 0deg on phones turns every transform into the identity and the
   flat spine image is used instead.
   -------------------------------------------------------------------------- */
.shelf {
  --skew: 16deg;
  /* The spine narrows with the viewport, and the shelf height follows it so the
     1:3 spine images are never cropped by `cover` (a crop would push the stamp
     against the edge). The open cover gets whatever width is left, between
     --cover-min (room for the text) and --cover-max; the skew eats
     0.3 x height of horizontal room, hence that last term. */
  --spine-w: clamp(9.5rem, 14vw, 12.5rem);
  --shelf-h: calc(var(--spine-w) * 3.06);
  --cover-min: 25rem;
  --cover-max: 42rem;
  --cover-w: clamp(var(--cover-min), calc(100vw - 3 * var(--spine-w) - 2 * var(--book-gap) - 2 * var(--gutter) - var(--shelf-h) * 0.3), var(--cover-max));
  --book-gap: 0.9rem;
  --dur-book: 900ms;
  --shelf-photo-opacity: 0.22;
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(3.5rem, 7vw, 6rem);
  background: var(--cream);
  color: var(--ink);
}
/* A law library behind the shelf, washed into the cream so the section stays
   light and the three volumes remain the subject. Cream fades keep the
   heading and the foot of the section clean. */
.shelf::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../../images/photos/law-library-comp.webp") center 40% / cover no-repeat;
  opacity: var(--shelf-photo-opacity);
  filter: saturate(0.55);
  pointer-events: none;
}
.shelf::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--cream) 0%, rgba(255, 249, 243, 0.55) 22%, rgba(255, 249, 243, 0.25) 55%, rgba(255, 249, 243, 0.7) 100%);
}
.shelf__head {
  width: min(100% - 2 * var(--gutter), var(--container)); margin: 0 auto clamp(2rem, 4vw, 3rem);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
}
.shelf__hint { color: var(--ink-soft); font-size: var(--step--1); }
.shelf__row {
  position: relative;
  display: flex; justify-content: center; gap: var(--book-gap);
  height: var(--shelf-h);
  transform: skewX(calc(-1 * var(--skew)));
}

/* Each volume casts its own shadow on the cream: a tight contact shadow at the
   foot plus a soft one that falls to the right, away from the light. */
.book {
  position: relative; overflow: hidden; isolation: isolate;
  flex: 0 0 var(--spine-w); min-width: 0;
  border-radius: 2px;
  box-shadow:
    0 2px 3px -1px rgba(43, 47, 60, 0.4),
    6px 14px 24px -12px rgba(43, 47, 60, 0.45),
    14px 40px 60px -30px rgba(43, 47, 60, 0.35);
  transition: flex-basis var(--dur-book) var(--ease-expo), transform var(--dur-book) var(--ease-expo),
              box-shadow var(--dur-book) var(--ease-expo);
}
.book--sucesiones { --book-color: var(--green); --book-color-soft: var(--green-soft); --spine-image: url("../../images/spines/sucesiones.webp"); --spine-image-flat: url("../../images/spines/sucesiones-flat.webp"); }
.book--familia { --book-color: var(--bordeaux); --book-color-soft: var(--bordeaux-soft); --spine-image: url("../../images/spines/familia.webp"); --spine-image-flat: url("../../images/spines/familia-flat.webp"); }
.book--previsional { --book-color: var(--blue); --book-color-soft: var(--blue-soft); --spine-image: url("../../images/spines/previsional.webp"); --spine-image-flat: url("../../images/spines/previsional-flat.webp"); }
.book__inner { position: absolute; inset: 0; display: flex; }
.book__hit { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.book__hit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* The book clips its overflow, so the focus ring has to sit inside the spine */
.book__hit:focus-visible { outline: 2px solid var(--cream); outline-offset: -6px; }

/* Spine: the pre-rendered leather. `cover` keeps the image's own aspect so the
   baked-in shear matches the row's skew whatever the shelf height is. */
.book__spine { position: relative; flex: 0 0 var(--spine-w); overflow: hidden; z-index: 2; background: var(--book-color); }
.book__leather {
  position: absolute; inset: 0;
  background: var(--spine-image) center / cover no-repeat, var(--book-color);
  transition: filter var(--dur-book) var(--ease-expo);
}

/* Cover: revealed when the book opens */
.book__cover {
  position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden;
  background: var(--book-color);
}
.book__cover::after {
  /* the hinge: a soft shadow the spine casts on the opened cover */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3rem; z-index: 2; pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.45), transparent);
}
.book__photo {
  position: absolute; inset: -12% -34%;
  background-size: cover; background-position: center;
  transform: skewX(var(--skew)) scale(1.06);
  filter: grayscale(0.35) contrast(1.05);
  opacity: 0.75;
  transition: transform 1.6s var(--ease-expo), filter var(--dur-book) var(--ease-expo), opacity var(--dur-book) var(--ease-expo);
}
.book__cover::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, var(--book-color) 0, color-mix(in srgb, var(--book-color) 55%, transparent) 30%, color-mix(in srgb, var(--book-color) 25%, transparent) 100%),
    linear-gradient(to top, var(--book-color) 10%, color-mix(in srgb, var(--book-color) 70%, transparent) 48%, transparent 85%);
}
/* The text block has a fixed width, independent of the cover's animated width:
   the cover clips it while it opens, so the lines never re-wrap and the block
   never jumps. It fades in riding the cover's own motion (a few pixels from
   the spine side), staggered on the way in and gone at once on the way out. */
.book__content {
  --content-inset-l: clamp(3.5rem, 5.5vw, 6.5rem);
  --content-inset-r: clamp(2rem, 3.5vw, 4rem);
  position: absolute; z-index: 3; left: var(--content-inset-l); bottom: clamp(1.75rem, 3vw, 2.75rem);
  transform: skewX(var(--skew)); transform-origin: bottom left;
  width: calc(var(--cover-w) - var(--content-inset-l) - var(--content-inset-r));
  color: var(--cream);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.book__content > * {
  transform: translateX(-14px); opacity: 0;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.book__icon { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; color: var(--cream); }
.book__icon svg { width: 100%; height: 100%; }
.book__title { font-family: var(--font-serif); font-size: var(--step-3); line-height: 1.05; color: var(--cream); }
.book__content p { max-width: 36ch; margin-top: 1rem; color: var(--on-dark-soft); line-height: 1.5; }
.book__link { margin-top: 1.5rem; color: var(--cream); }

/* Open state (hover, keyboard focus, tap on touch tablets) */
.book.is-open, .book:focus-within { flex-basis: calc(var(--spine-w) + var(--cover-w)); }
.book.is-open .book__content, .book:focus-within .book__content { opacity: 1; transition-duration: var(--dur); }
.book.is-open .book__content > *, .book:focus-within .book__content > * {
  transform: none; opacity: 1;
  transition-duration: var(--dur-book); transition-timing-function: var(--ease-expo);
}
.book.is-open .book__photo, .book:focus-within .book__photo { transform: skewX(var(--skew)) scale(1); filter: grayscale(0) contrast(1); opacity: 0.95; }
.book.is-open .book__content > :nth-child(1), .book:focus-within .book__content > :nth-child(1) { transition-delay: 180ms; }
.book.is-open .book__content > :nth-child(2), .book:focus-within .book__content > :nth-child(2) { transition-delay: 240ms; }
.book.is-open .book__content > :nth-child(3), .book:focus-within .book__content > :nth-child(3) { transition-delay: 300ms; }
.book.is-open .book__content > :nth-child(4), .book:focus-within .book__content > :nth-child(4) { transition-delay: 360ms; }

@media (hover: hover) and (min-width: 961px) {
  .book:hover { flex-basis: calc(var(--spine-w) + var(--cover-w)); }
  .book:hover .book__content { opacity: 1; transition-duration: var(--dur); }
  .book:hover .book__content > * { transform: none; opacity: 1; transition-duration: var(--dur-book); transition-timing-function: var(--ease-expo); }
  .book:hover .book__content > :nth-child(1) { transition-delay: 180ms; }
  .book:hover .book__content > :nth-child(2) { transition-delay: 240ms; }
  .book:hover .book__content > :nth-child(3) { transition-delay: 300ms; }
  .book:hover .book__content > :nth-child(4) { transition-delay: 360ms; }
  .book:hover .book__photo { transform: skewX(var(--skew)) scale(1); filter: grayscale(0) contrast(1); opacity: 0.95; }
  .book:hover .book__link svg { transform: translateX(3px); }
  /* The other volumes fall back a little into the shade */
  .shelf__row:hover .book:not(:hover):not(:focus-within) .book__leather { filter: brightness(0.88); }
}

/* Narrow desktops and landscape tablets: thinner spines, the open cover takes the rest */
@media (min-width: 961px) and (max-width: 1100px) {
  .shelf { --spine-w: 8rem; --cover-min: 22rem; --cover-max: 34rem; }
  .book__title { font-size: var(--step-2); }
}

/* Phones and portrait tablets: the books lie flat, one under the other, always
   open. Below 960px an open book no longer fits beside two closed ones. */
@media (max-width: 960px) {
  .shelf { --skew: 0deg; --spine-w: clamp(4.25rem, 9vw, 6rem); --shelf-photo-opacity: 0.14; padding-inline: var(--gutter); }
  .shelf__head { margin-bottom: 1.5rem; }
  .shelf__row { flex-direction: column; height: auto; gap: 1rem; transform: none; }
  .book { flex: 0 0 auto; min-height: 17rem; box-shadow: 0 1px 2px rgba(43, 47, 60, 0.3), 0 14px 28px -14px rgba(43, 47, 60, 0.4); }
  .book__inner { position: relative; inset: auto; min-height: 17rem; }
  /* Cards are shorter than the 1:4.5 flat image on tablets: crop at the foot, never the logo */
  .book__leather { background-image: var(--spine-image-flat); background-position: center top; }
  .book__cover { min-height: 17rem; }
  .book__cover::after { width: 1.5rem; }
  .book__photo { inset: 0; transform: none; filter: grayscale(0.2); opacity: 0.85; }
  .book__content { position: relative; inset: auto; width: auto; padding: 1.5rem 1.25rem 1.5rem 1.25rem; opacity: 1; transform: none; }
  .book__content > * { transform: none; opacity: 1; }
  .book__title { font-size: var(--step-2); }
  .book__content p { max-width: 52ch; }
  .book.is-active .book__leather { filter: brightness(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .book, .book__photo, .book__leather, .book__content, .book__content > * { transition: none; }
}

/* --------------------------------------------------------------------------
   Variant `shelf--paper`: the open cover shows the first page of the volume
   instead of a photograph. Cream paper with a faint grain, the title and the
   description set in ink, the icon and the rule in the area colour so the
   page still belongs to its spine. The photo markup stays in the HTML and is
   simply not displayed here; remove the modifier from the section to go back
   to the photographic covers.
   -------------------------------------------------------------------------- */
.shelf--paper .book__photo { display: none; }
.shelf--paper .book__cover {
  background:
    /* fore-edge: the stack of pages darkens towards the right edge */
    linear-gradient(to left, rgba(43, 47, 60, 0.10), rgba(43, 47, 60, 0.03) 1.25rem, transparent 3.5rem),
    /* paper grain */
    var(--paper-grain) repeat,
    /* the sheet yellows a touch towards the edges, like old stock */
    radial-gradient(ellipse at 45% 40%, var(--paper) 0%, var(--paper) 55%, var(--paper-edge) 100%);
}
.shelf--paper .book__cover::before {
  /* the gutter: the page curves down into the binding */
  background: linear-gradient(to right, rgba(43, 47, 60, 0.16), rgba(43, 47, 60, 0.05) 2.5rem, transparent 7rem);
}
.shelf--paper .book__cover::after {
  background: linear-gradient(to right, rgba(43, 47, 60, 0.32), transparent);
}
.shelf--paper .book__content { color: var(--ink); }
/* On a blank page the text reads better set like a title page, vertically
   centred, than pinned to the foot as it was over the photograph. The block
   keeps its bottom-left origin so the skew still follows the volume. */
@media (min-width: 961px) {
  .shelf--paper .book__content {
    /* The block is upright inside a leaning page, so the higher it reaches
       the further right it has to start to clear the spine: tan(16deg) of
       the shelf height covers the worst case. On the right there is no such
       problem (the page leans away), so that inset can be small. */
    --content-inset-l: calc(var(--shelf-h) * 0.29 + 0.75rem);
    --content-inset-r: 1rem;
    top: 50%; bottom: auto;
    transform: translateY(-50%) skewX(var(--skew));
  }
  .shelf--paper .book__list { max-width: 40ch; }
}
/* Narrower desktops: the shelf is lower and the page narrower, so the block
   is set more compactly to keep the whole index on the page. */
@media (min-width: 961px) and (max-width: 1280px) {
  .shelf--paper .book__icon { width: 2rem; height: 2rem; margin-bottom: 0.6rem; }
  .shelf--paper .book__title { font-size: var(--step-2); }
  .shelf--paper .book__title::after { margin-top: 0.7rem; }
  .shelf--paper .book__content p { margin-top: 0.75rem; font-size: var(--step--1); line-height: 1.45; }
  .shelf--paper .book__list { margin-top: 0.8rem; font-size: 0.82rem; line-height: 1.35; }
  .shelf--paper .book__list li + li { margin-top: 0.25rem; }
  .shelf--paper .book__link { margin-top: 0.9rem; }
}
/* Lowest shelf of all (the 8rem spines): the icon gives way to the text */
@media (min-width: 961px) and (max-width: 1100px) {
  .shelf--paper .book__icon { display: none; }
}
/* Just above the phone layout the page is at its narrowest (22rem) and the
   shelf at its lowest: smaller type and three entries instead of four. */
@media (min-width: 961px) and (max-width: 1000px) {
  .shelf--paper .book__title { font-size: var(--step-1); }
  .shelf--paper .book__content p { font-size: 0.85rem; line-height: 1.4; }
  .shelf--paper .book__list { font-size: 0.78rem; line-height: 1.3; }
  .shelf--paper .book__list li:nth-child(n + 4) { display: none; }
}
.shelf--paper .book__icon { color: var(--book-color); }
.shelf--paper .book__title { color: var(--ink); }
.shelf--paper .book__title::after {
  /* a short rule in the area colour under the title, like a chapter opener */
  content: ""; display: block; width: 2.75rem; height: 2px; margin-top: 1rem;
  background: var(--book-color);
}
.shelf--paper .book__content p { color: var(--ink-soft); }
.shelf--paper .book__link { color: var(--book-color); }
/* What the volume covers: a short index in small type, each entry marked
   with a dash in the area colour. */
.shelf--paper .book__list {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  font-size: var(--step--1); line-height: 1.45; color: var(--ink-soft);
}
.shelf--paper .book__list li { position: relative; padding-left: 1.1rem; }
.shelf--paper .book__list li + li { margin-top: 0.35rem; }
.shelf--paper .book__list li::before {
  content: ""; position: absolute; left: 0; top: 0.72em; width: 0.55rem; height: 1px;
  background: var(--book-color);
}
.shelf--paper .book__content p { margin-top: 1rem; max-width: 40ch; }
.shelf--paper .book__link { margin-top: 1.25rem; }
/* The list is a fifth child: it joins the stagger of the reveal */
.shelf--paper .book.is-open .book__content > :nth-child(5),
.shelf--paper .book:focus-within .book__content > :nth-child(5) { transition-delay: 360ms; }
.shelf--paper .book.is-open .book__content > :nth-child(6),
.shelf--paper .book:focus-within .book__content > :nth-child(6) { transition-delay: 420ms; }
@media (hover: hover) and (min-width: 961px) {
  .shelf--paper .book:hover .book__content > :nth-child(5) { transition-delay: 360ms; }
  .shelf--paper .book:hover .book__content > :nth-child(6) { transition-delay: 420ms; }
}
.shelf--paper .book__hit:focus-visible { outline-color: var(--book-color); }
@media (max-width: 960px) {
  .shelf--paper .book__cover::after { background: linear-gradient(to right, rgba(43, 47, 60, 0.22), transparent); }
}