/* =========================================================
   Defensa Legal Abogados Asociados — estilos del sitio
   Paleta: blanco, negro cálido y café.
   ========================================================= */

:root {
  --negro: #141210;
  --cafe: #6B4226;
  --cafe-oscuro: #4E3524;
  --blanco: #FFFFFF;
  --crema: #F6F2EC;
  --arena: #E9E1D6;
  --arena-2: #DDD2C3;
  --linea: #E4DDD3;
  --linea-crema: #CFC4B4;
  --borde-oscuro: #3A342E;
  --borde-boton-oscuro: #5A5048;
  --texto-suave: #4F4841;
  --texto-claro: #D9D2C8;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ancho: 1200px;
  --margen: 24px;
  --alto-encabezado: 76px;
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--alto-encabezado) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--negro);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--negro);
}

a:hover {
  color: var(--cafe);
}

:focus-visible {
  outline: 3px solid var(--cafe);
  outline-offset: 3px;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
}

p {
  margin: 0;
}

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

.saltar {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--negro);
  color: var(--blanco);
  font-weight: 600;
}

.saltar:focus {
  top: 16px;
  color: var(--blanco);
}

.etiqueta {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cafe);
}

.titulo-seccion {
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.12;
}

.texto-suave {
  color: var(--texto-suave);
}

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.boton--oscuro {
  background: var(--negro);
  color: var(--blanco);
}

.boton--oscuro:hover {
  background: var(--cafe);
  color: var(--blanco);
}

.boton--cafe {
  background: var(--cafe);
  color: var(--blanco);
}

.boton--cafe:hover {
  background: var(--cafe-oscuro);
  color: var(--blanco);
}

.boton--claro {
  background: var(--blanco);
  color: var(--negro);
}

.boton--claro:hover {
  background: var(--arena);
  color: var(--negro);
}

.boton--contorno-claro {
  border-color: var(--borde-boton-oscuro);
  color: var(--blanco);
}

.boton--contorno-claro:hover {
  border-color: var(--blanco);
  color: var(--blanco);
}

.boton--chico {
  min-height: 44px;
  padding: 0 22px;
  font-size: 16px;
}

.enlace-icono {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 4px;
  font-weight: 600;
  text-underline-offset: 6px;
}

/* ---------- Franja superior ---------- */

.franja {
  background: var(--negro);
  color: var(--blanco);
  font-size: 14px;
}

.franja__interior {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 32px;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}

.franja a {
  color: var(--blanco);
  text-decoration: none;
}

.franja a:hover {
  color: var(--arena);
  text-decoration: underline;
}

/* ---------- Encabezado ---------- */

.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}

.encabezado__interior {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  align-items: center;
  justify-content: space-between;
  min-height: var(--alto-encabezado);
  padding-top: 12px;
  padding-bottom: 12px;
}

.marca {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--negro);
}

.marca:hover {
  color: var(--negro);
}

.marca__nombre {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
}

.marca__nombre span {
  color: var(--cafe);
}

.marca__sub {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.menu-boton {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--linea-crema);
  color: var(--negro);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.nav-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
}

.nav-lista a:not(.boton) {
  display: inline-block;
  padding: 12px 0;
  text-decoration: none;
}

.nav-lista a:not(.boton):hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* En pantallas chicas el menú se pliega (solo si hay JavaScript) */
@media (max-width: 900px) {
  .js .menu-boton {
    display: inline-flex;
  }

  .js .nav-principal {
    width: 100%;
    display: none;
  }

  .js .nav-principal.abierto {
    display: block;
  }

  .nav-lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 12px;
  }

  .nav-lista li {
    border-top: 1px solid var(--linea);
  }

  .nav-lista a:not(.boton) {
    display: block;
    padding: 14px 0;
  }

  .nav-lista .boton {
    width: 100%;
    margin-top: 12px;
  }
}

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

.portada {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: stretch;
  padding-top: 72px;
  padding-bottom: 88px;
}

.portada__texto {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: center;
}

.portada h1 {
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.portada__intro {
  max-width: 520px;
  font-size: 19px;
  color: var(--texto-suave);
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* Panel que ocupa el lugar de la foto principal */
.panel-foto {
  flex: 1 1 420px;
  min-width: 0;
  min-height: 520px;
  margin: 0;
  background: var(--arena);
  border-bottom: 6px solid var(--cafe);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 32px;
  text-align: center;
  color: var(--cafe);
}

.panel-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Panel con foto real: la imagen llena el panel y se recorta sin deformarse */
.panel-foto--imagen {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.panel-foto--imagen img {
  position: absolute;
  inset: 0;
}

.panel-foto--portada img {
  object-position: center 28%;
}

.panel-foto--retrato img {
  object-position: center 30%;
}

.panel-foto figcaption {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ---------- Cifras ---------- */

.cifras {
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}

.cifras__interior {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  padding-top: 36px;
  padding-bottom: 36px;
  margin: 0 auto;
}

.cifra {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
}

.cifra dt {
  font-family: var(--serif);
  font-size: 34px;
  color: var(--cafe);
}

.cifra dd {
  margin: 0;
  color: var(--texto-suave);
}

/* ---------- Áreas de práctica ---------- */

.seccion {
  padding-top: 96px;
  padding-bottom: 96px;
}

.areas__cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
}

.areas__cabecera p {
  max-width: 440px;
}

.areas__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--negro);
}

.area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px 36px 0;
  border-bottom: 1px solid var(--linea);
}

.area__numero {
  font-size: 14px;
  font-weight: 600;
  color: var(--cafe);
}

.area h3 {
  font-size: 24px;
}

/* ---------- El despacho ---------- */

.despacho {
  background: var(--crema);
}

.despacho__interior {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: center;
}

.despacho .panel-foto {
  flex: 1 1 380px;
  min-height: 480px;
  background: var(--arena-2);
  border-bottom: 0;
}

.monograma {
  font-family: var(--serif);
  font-size: 120px;
  line-height: 1;
  color: var(--cafe);
}

.despacho__texto {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.socios__titulo {
  margin-top: 8px;
  color: var(--texto-suave);
}

.socios {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea-crema);
}

.socio {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--linea-crema);
}

.socio__nombre {
  font-family: var(--serif);
  font-size: 22px;
}

/* ---------- Oficinas ---------- */

.galeria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.galeria figure {
  margin: 0;
}

.galeria img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--arena);
  border-bottom: 4px solid var(--cafe);
}

.galeria figcaption {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* En celular, las fotos se deslizan de lado en lugar de apilarse */
@media (max-width: 700px) {
  .galeria {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }

  .galeria li {
    scroll-snap-align: start;
  }
}

/* ---------- Cómo trabajamos ---------- */

.pasos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

/* 4 pasos: en 4, 2 o 1 columnas, para que ninguno quede solo en su fila */
@media (max-width: 960px) {
  .pasos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 540px) {
  .pasos {
    grid-template-columns: minmax(0, 1fr);
  }
}

.paso {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 2px solid var(--cafe);
}

.paso h3 {
  font-size: 22px;
}

/* ---------- Contacto ---------- */

.contacto {
  background: var(--negro);
  color: var(--blanco);
}

.contacto__interior {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
  align-items: center;
  justify-content: space-between;
  padding-top: 88px;
  padding-bottom: 88px;
}

.contacto__texto {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contacto h2 {
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.1;
}

.contacto__texto p {
  max-width: 520px;
  color: var(--texto-claro);
}

.contacto__acciones {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.contacto__acciones .boton {
  min-width: 280px;
}

.contacto__nota {
  color: var(--texto-claro);
}

.contacto__nota a {
  color: var(--texto-claro);
}

.contacto__nota a:hover {
  color: var(--blanco);
}

/* ---------- Pie de página ---------- */

.pie {
  background: var(--negro);
  color: var(--texto-claro);
  border-top: 1px solid var(--borde-oscuro);
  font-size: 15px;
}

.pie__interior {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
  justify-content: space-between;
  padding-top: 40px;
  padding-bottom: 32px;
}

.pie a {
  color: var(--texto-claro);
}

.pie a:hover {
  color: var(--blanco);
}

.pie address {
  font-style: normal;
}

.pie__enlaces {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.pie__red {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.pie .marca__nombre {
  font-size: 20px;
  color: var(--blanco);
}

.pie .marca__nombre span {
  color: var(--blanco);
}

.pie .marca__sub {
  color: var(--texto-claro);
}

.pie__legal {
  padding-top: 20px;
  padding-bottom: 40px;
  border-top: 1px solid var(--borde-oscuro);
  font-size: 14px;
}

/* ---------- Página de texto (aviso de privacidad) ---------- */

.pagina-texto {
  max-width: 760px;
  padding-top: 72px;
  padding-bottom: 96px;
}

.pagina-texto h1 {
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  margin-bottom: 16px;
}

.pagina-texto h2 {
  font-size: 26px;
  margin-top: 40px;
  margin-bottom: 12px;
}

.pagina-texto p {
  margin-bottom: 12px;
  color: var(--texto-suave);
}

.aviso-pendiente {
  margin: 24px 0 8px;
  padding: 16px 20px;
  background: var(--crema);
  border: 1px solid var(--linea-crema);
}

/* ---------- Ajustes para celular ---------- */

@media (max-width: 600px) {
  :root {
    --margen: 20px;
  }

  body {
    font-size: 16px;
  }

  .encabezado__interior {
    column-gap: 16px;
  }

  .marca__nombre {
    font-size: 23px;
  }

  .marca__sub {
    font-size: 11px;
    letter-spacing: 0.18em;
  }

  .portada {
    padding-top: 40px;
    padding-bottom: 56px;
    gap: 40px;
  }

  .panel-foto {
    min-height: 320px;
  }

  .despacho .panel-foto {
    min-height: 300px;
  }

  .monograma {
    font-size: 88px;
  }

  .seccion {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .area {
    padding-right: 0;
  }

  .contacto__interior {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .contacto__acciones,
  .contacto__acciones .boton {
    width: 100%;
    min-width: 0;
  }

  .portada__acciones .boton {
    width: 100%;
  }
}