/* Atalaya Abogados · concepto WEBO · despacho en el barrio de Salamanca, Madrid.
   Clásico y elegante, paleta fría: azul noche, tinta, blanco frío y plata para filetes. Sin dorados.
   Formas: todo en ángulo recto; el doble filete es el motivo que se repite.
   Movimiento (3/10, 20/10/2026): corto y exacto. Portada en CSS bajo html.mov (filete que se traza desde el centro,
   titular por líneas con máscara, biblioteca que se descubre de arriba abajo). Al bajar, atalaya.js traza los filetes
   de cada fila, sube los titulares por línea y pasa la luz del despacho de la mañana a la tarde. */

@font-face { font-family: "EB Garamond"; src: url("/assets/fonts/conceptos/ebgaramond-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/assets/fonts/conceptos/ebgaramond-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/assets/fonts/conceptos/ebgaramond-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/conceptos/instrumentsans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/conceptos/instrumentsans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --noche: #152238;
  --tinta: #0F1726;
  --blanco: #F5F6F7;
  --plata: #A9B4C6;
  --gris: #47536A;
  --banda: #EBEEF2;
  --plata-claro: #C9D1DD;
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-sale: cubic-bezier(.16, 1, .3, 1);
  --ease-cajon: cubic-bezier(.32, .72, 0, 1);
  --ancho: 1180px;
  --margen: clamp(16px, 4vw, 48px);
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .66  0 0 0 0 .71  0 0 0 0 .78  0 0 0 .38 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

body {
  background: var(--blanco);
  color: var(--tinta);
  font: 400 1.0625rem/1.65 var(--sans);
}
::selection { background: var(--noche); color: var(--blanco); }
:focus-visible { outline: 1.5px solid var(--noche); outline-offset: 4px; }
.at-consulta :focus-visible, .at-pie :focus-visible { outline-color: var(--plata-claro); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.at-saltar {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  padding: 10px 16px; background: var(--noche); color: var(--blanco); text-decoration: none;
}
.at-saltar:focus-visible { top: 12px; }

/* ---------- Cabecera con doble filete ---------- */
.at-cabecera-in {
  max-width: var(--ancho); margin: 0 auto;
  padding: 22px var(--margen) 18px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.at-nav ul { display: flex; gap: 30px; }
.at-nav a, .at-nav-cta {
  font-size: .9375rem; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 3px;
  transition: background-size 260ms var(--ease);
}
.at-marca { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--noche); }
.at-marca-nombre {
  font: 500 1.625rem/1 var(--serif); letter-spacing: .24em; text-transform: uppercase;
  margin-right: -.24em;
}
.at-marca-sub { margin-top: 5px; font: italic 400 1rem/1 var(--serif); color: var(--gris); }
.at-nav-cta {
  justify-self: end; font-weight: 500; color: var(--noche);
  background-size: 100% 1px;
}
.at-filete {
  position: relative;
  max-width: calc(var(--ancho) - 2 * var(--margen));
  margin: 0 auto; height: 5px;
}
.at-filete::before, .at-filete::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--noche);
}
.at-filete::before { top: 0; }
.at-filete::after { bottom: 0; }
@media (max-width: 1228px) { .at-filete { margin-inline: var(--margen); } }

/* ---------- Portada clásica centrada ---------- */
.at-hero {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(40px, 7vh, 72px) var(--margen) 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.at-titulo {
  max-width: 11em;
  font: 400 clamp(2.75rem, 6vw, 5.5rem)/1.02 var(--serif); letter-spacing: -.014em;
  color: var(--noche);
}
.at-ln { display: block; }
.at-ln > span { display: block; }
.at-ln:last-child > span { white-space: nowrap; }
.at-entrada {
  margin-top: 22px; max-width: 42ch;
  font-size: 1.1875rem; line-height: 1.55; color: var(--gris); text-wrap: pretty;
}
.at-boton {
  margin-top: 34px;
  display: inline-flex; align-items: center; min-height: 54px; padding: 0 30px;
  background: var(--noche); color: var(--blanco);
  font-weight: 500; letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 0 1px var(--noche), 0 0 0 5px var(--blanco), 0 0 0 6px var(--plata);
  transition: background-color 200ms ease, transform 140ms var(--ease);
}
.at-boton:active { transform: scale(.97); }

/* Marcador: biblioteca en duotono, lomos de libro con filetes verticales finos */
.at-biblioteca {
  position: relative; overflow: hidden;
  width: 100%; aspect-ratio: 1180 / 300; margin-top: clamp(44px, 7vh, 68px);
  outline: 1px solid var(--plata); outline-offset: 7px;
  background-color: var(--noche);
  background-image:
    var(--grano),
    radial-gradient(60% 150% at 10% 0%, rgb(201 209 221 / .3), transparent 62%),
    linear-gradient(to bottom, transparent 0 46%, #0B1424 46% 50%, rgb(169 180 198 / .32) 50% 50.5%, transparent 50.5% 94.5%, #0B1424 94.5% 98.5%, rgb(169 180 198 / .25) 98.5%),
    linear-gradient(to bottom, transparent 0 13%, rgb(169 180 198 / .16) 13% 13.6%, transparent 13.6% 15.2%, rgb(169 180 198 / .16) 15.2% 15.8%, transparent 15.8% 61%, rgb(169 180 198 / .16) 61% 61.6%, transparent 61.6% 63.2%, rgb(169 180 198 / .16) 63.2% 63.8%, transparent 63.8%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .035) 0 61px, transparent 61px 97px, rgb(6 11 22 / .16) 97px 131px, transparent 131px 173px),
    repeating-linear-gradient(90deg, transparent 0 22px, rgb(169 180 198 / .18) 22px 23px),
    repeating-linear-gradient(90deg, transparent 0 57px, rgb(6 11 22 / .5) 57px 59px),
    repeating-linear-gradient(90deg, #1A2A44 0 14px, #12203A 14px 33px, #22365A 33px 41px, #172640 41px 66px, #1E3050 66px 79px);
  background-size: 220px 220px, auto, auto, auto, auto, auto, auto, auto;
}
.at-biblioteca::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 40%, rgb(8 14 26 / .55));
}

/* Entrada de la portada (solo con html.mov, que pone concepto.js): una sola vez y en menos de dos segundos.
   El doble filete se traza desde el centro, el titular sube por líneas tras su máscara y la biblioteca
   se descubre de arriba abajo, como una persiana que se recoge. */
.mov .at-filete::before { animation: at-traza 1100ms var(--ease-cajon) both; }
.mov .at-filete::after { animation: at-traza 1100ms var(--ease-cajon) 110ms both; }
.mov .at-marca { animation: at-funde 900ms ease 120ms both; }
.mov .at-nav, .mov .at-nav-cta { animation: at-funde 700ms ease 380ms both; }
.mov .at-ln { clip-path: inset(-.2em -.4em -.3em -.4em); }
.mov .at-ln > span { animation: at-sube 1000ms var(--ease-sale) 200ms both; }
.mov .at-ln + .at-ln > span { animation-delay: 290ms; }
.mov .at-entrada { animation: at-aparece 800ms var(--ease-sale) 460ms both; }
.mov .at-hero .at-boton { animation: at-aparece 800ms var(--ease-sale) 540ms backwards; } /* backwards: al terminar suelta el transform y vuelve el :active */
.mov .at-biblioteca { animation: at-persiana 1300ms var(--ease-cajon) 620ms both; }
@keyframes at-traza { from { transform: scaleX(0); } }
@keyframes at-sube { from { transform: translateY(135%); } }
@keyframes at-aparece { from { opacity: 0; transform: translateY(10px); } }
@keyframes at-funde { from { opacity: 0; } }
@keyframes at-persiana { from { clip-path: inset(-9px -9px calc(100% + 9px) -9px); } to { clip-path: inset(-9px); } }

/* Máscara de los titulares que suben por línea (SplitText): recorta con margen para acentos y descendentes */
.at-l-mask { overflow: visible !important; clip-path: inset(-.2em -.4em -.3em -.4em); }

/* ---------- Títulos de sección ---------- */
.at-cabeza h2, .at-metodo h2, .at-despacho h2, .at-consulta h2 {
  font: 400 clamp(2.25rem, 4.2vw, 3.5rem)/1.06 var(--serif); letter-spacing: -.01em;
  color: var(--noche); text-wrap: balance;
}

/* ---------- Áreas de práctica a dos columnas ---------- */
.at-areas {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(104px, 13vw, 168px) var(--margen) clamp(88px, 11vw, 144px);
}
.at-cabeza { max-width: 600px; margin: 0 auto; text-align: center; }
.at-cabeza p { margin-top: 18px; color: var(--gris); text-wrap: pretty; }
.at-areas-rejilla {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 8vw, 120px);
}
.at-area { position: relative; padding: 30px 0 34px; }
.at-area::before, .at-pasos li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--plata);
  transform-origin: left; transform: scaleX(var(--trazo, 1));
}
.at-area:nth-last-child(-n + 2)::after, .at-pasos li:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--plata);
  transform-origin: left; transform: scaleX(var(--trazo, 1));
}
.at-area h3 { font: 500 1.625rem/1.2 var(--serif); color: var(--noche); }
.at-area p { margin-top: 8px; max-width: 44ch; color: var(--gris); }
.at-area-nota p { margin-top: 0; font: italic 400 1.3125rem/1.45 var(--serif); color: var(--noche); }

/* ---------- Cómo trabajamos: tres pasos como cláusulas ---------- */
.at-metodo-banda { background: var(--banda); }
.at-metodo {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(88px, 11vw, 144px) var(--margen);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px);
}
.at-metodo h2 { align-self: start; position: sticky; top: 56px; }
.at-pasos li {
  position: relative;
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 24px;
  padding: 30px 0 34px;
}
.at-ordinal { grid-row: span 2; font: italic 400 1.5rem/1.2 var(--serif); color: var(--noche); }
.at-pasos h3 { font: 500 1.625rem/1.2 var(--serif); color: var(--noche); }
.at-pasos li p:last-child { margin-top: 8px; max-width: 52ch; color: var(--gris); }

/* ---------- El despacho ---------- */
.at-despacho {
  max-width: var(--ancho); margin: 0 auto;
  padding: clamp(104px, 13vw, 168px) var(--margen);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 8vw, 120px); align-items: center;
}
.at-despacho-texto > p { margin-top: 18px; max-width: 46ch; color: var(--gris); }
.at-horario { margin-top: 36px; max-width: 460px; }
.at-horario div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 13px 0; border-top: 1px solid var(--plata);
}
.at-horario div:last-child { border-bottom: 1px solid var(--plata); }
.at-horario dt { color: var(--gris); }
.at-horario dd { margin: 0; font: 400 1.3125rem/1.2 var(--serif); color: var(--noche); font-variant-numeric: lining-nums tabular-nums; }

/* Marcador: sala con ventana alta, duotono */
.at-sala {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5;
  outline: 1px solid var(--plata); outline-offset: 7px;
  background-color: var(--noche);
  background-image:
    var(--grano),
    radial-gradient(70% 55% at 50% 34%, rgb(201 209 221 / .3), transparent 70%),
    linear-gradient(to bottom, transparent 0 74%, #0C1526 74% 77%, #1A2944 77%),
    linear-gradient(#1C2B46, #111C30);
  background-size: 220px 220px, auto, auto, auto;
}
.at-sala::before {
  content: ""; position: absolute; left: 33%; top: 9%; width: 34%; height: 54%;
  background:
    linear-gradient(90deg, transparent calc(50% - 2px), #2A3A57 calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(transparent 31%, #2A3A57 31% calc(31% + 3px), transparent calc(31% + 3px) 64%, #2A3A57 64% calc(64% + 3px), transparent calc(64% + 3px)),
    linear-gradient(#DCE2EB, #A9B4C6 70%, #8E9AB0);
  box-shadow: 0 0 0 10px #22324F, 0 0 0 11px rgb(169 180 198 / .25);
}
/* Luz del despacho, encima del marcador (y de la foto cuando llegue): el haz que entra por la ventana,
   con la sombra de la cruz del marco, y un velo de tarde. Quietos: luz de mañana. Al bajar (atalaya.js),
   el haz gira y se alarga y el velo cae, de la mañana a la tarde. */
.at-sala > span { position: absolute; display: block; pointer-events: none; }
.at-sala-haz {
  left: 22%; top: 77%; width: 62%; height: 18%;
  background:
    linear-gradient(90deg, transparent calc(50% - 3px), rgb(12 21 38 / .55) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)),
    linear-gradient(transparent 38%, rgb(12 21 38 / .45) 38% calc(38% + 3px), transparent calc(38% + 3px)),
    linear-gradient(rgb(201 209 221 / .36), rgb(201 209 221 / .07));
  clip-path: polygon(22% 0, 74% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
}
.at-sala-tarde {
  inset: 0; opacity: 0;
  background:
    radial-gradient(60% 45% at 50% 30%, transparent, rgb(8 14 26 / .28)),
    linear-gradient(185deg, rgb(8 14 26 / .12), rgb(8 14 26 / .46));
}

/* Marcador: detalle de expedientes atados con cinta sobre la mesa */
.at-detalle {
  position: relative; overflow: hidden; margin-top: 44px; width: min(62%, 340px);
  aspect-ratio: 3 / 2; outline: 1px solid var(--plata); outline-offset: 6px;
  background-color: #1A2944;
  background-image:
    var(--grano),
    radial-gradient(80% 90% at 20% 10%, rgb(201 209 221 / .22), transparent 70%);
  background-size: 220px 220px, auto;
}
.at-detalle::before {
  content: ""; position: absolute; left: 17%; top: 20%; width: 66%; height: 58%;
  background:
    linear-gradient(90deg, transparent 68%, #24365A 68% 71%, transparent 71%),
    linear-gradient(160deg, #D5DCE6, #B3BECE);
  box-shadow: 3px 3px 0 -1px #9EAABD, 6px 6px 0 -2px #8D9AB0, 12px 18px 26px -8px rgb(6 11 22 / .6);
  rotate: -4deg;
}

/* ---------- Primera consulta: llamada final ---------- */
.at-consulta { background: var(--noche); color: var(--blanco); }
.at-consulta-in {
  max-width: 900px; margin: 0 auto;
  padding: clamp(96px, 12vw, 152px) var(--margen);
  text-align: center;
}
.at-consulta-in::before {
  content: ""; display: block; width: 72px; height: 5px; margin: 0 auto 40px;
  border-top: 1px solid var(--plata); border-bottom: 1px solid var(--plata);
  transform: scaleX(var(--orn, 1));
}
.at-consulta h2 { color: var(--blanco); font-size: clamp(2.5rem, 5vw, 4.25rem); }
.at-consulta-in > p { margin: 22px auto 0; max-width: 50ch; font-size: 1.1875rem; line-height: 1.55; color: var(--plata-claro); text-wrap: pretty; }
.at-condiciones {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgb(169 180 198 / .45); border-bottom: 1px solid rgb(169 180 198 / .45);
}
.at-condiciones div { padding: 26px 20px; }
.at-condiciones div + div { border-left: 1px solid rgb(169 180 198 / .45); }
.at-condiciones dt { font-size: .9375rem; color: var(--plata); }
.at-condiciones dd { margin: 6px 0 0; font: 400 1.3125rem/1.3 var(--serif); color: var(--blanco); }
.at-contacto {
  margin-top: 52px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 36px;
}
.at-boton--claro {
  margin-top: 0; background: var(--blanco); color: var(--noche);
  box-shadow: 0 0 0 1px var(--blanco), 0 0 0 5px var(--noche), 0 0 0 6px rgb(169 180 198 / .7);
}
.at-correo {
  color: var(--blanco); font-size: 1.0625rem;
  text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: rgb(169 180 198 / .6);
  transition: text-decoration-color 200ms ease;
}

/* ---------- Pie ---------- */
.at-pie { background: var(--noche); color: var(--plata-claro); }
.at-pie-in {
  max-width: calc(var(--ancho) - 2 * var(--margen)); margin: 0 auto;
  padding: 28px 0 92px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 32px;
  border-top: 1px solid rgb(169 180 198 / .35);
}
.at-pie-marca { font: 500 1.125rem/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--blanco); }
.at-pie a { margin-left: auto; text-underline-offset: 5px; text-decoration-thickness: 1px; }
@media (max-width: 1228px) { .at-pie-in { margin-inline: var(--margen); } }

/* ---------- Hover solo con ratón ---------- */
@media (hover: hover) and (pointer: fine) {
  .at-nav a:hover { background-size: 100% 1px; }
  .at-nav-cta:hover { color: var(--gris); }
  .at-boton:hover { background: #22365A; }
  .at-boton--claro:hover { background: #DCE2EB; }
  .at-correo:hover { text-decoration-color: var(--blanco); }
  .at-pie a:hover { color: var(--blanco); }
}

/* ---------- Tableta ---------- */
@media (max-width: 960px) {
  .at-metodo { grid-template-columns: minmax(0, 1fr); }
  .at-metodo h2 { position: static; }
  .at-despacho { grid-template-columns: minmax(0, 1fr); }
  .at-sala { aspect-ratio: 16 / 10; }
}

/* ---------- Móvil ---------- */
@media (max-width: 720px) {
  .at-nav { display: none; }
  .at-cabecera-in { grid-template-columns: auto 1fr; padding-block: 16px 14px; }
  .at-marca { align-items: flex-start; }
  .at-marca-nombre { font-size: 1.375rem; }
  .at-marca-sub { font-size: .9375rem; }
  .at-nav-cta { font-size: .875rem; }
  .at-hero { padding-top: 40px; }
  .at-titulo { font-size: clamp(2.5rem, 11.4vw, 3.25rem); line-height: 1.04; }
  .at-entrada { font-size: 1.0625rem; }
  .at-boton { padding: 0 24px; }
  .at-biblioteca { aspect-ratio: 16 / 10; margin-top: 44px; outline-offset: 5px; }
  .at-areas-rejilla { grid-template-columns: minmax(0, 1fr); }
  .at-area:nth-last-child(2)::after { display: none; }
  .at-pasos li { grid-template-columns: minmax(0, 1fr); }
  .at-ordinal { grid-row: auto; margin-bottom: 6px; font-size: 1.25rem; }
  .at-detalle { width: 72%; }
  .at-condiciones { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .at-condiciones div { padding: 18px 0; }
  .at-condiciones div + div { border-left: 0; border-top: 1px solid rgb(169 180 198 / .45); }
  .at-pie a { margin-left: 0; }
  .at-contacto { flex-direction: column; margin-top: 40px; }
}