/* ============================================================
   Campos Abogados — sistema visual
   Tokens y reglas en MARCA.md. Nada de colores sueltos acá.
   ============================================================ */

:root{
  /* Paleta del manual */
  --niebla:      #F5F5F5;
  --navy:        #06213B;
  --arena:       #E9E4DF;
  --tinta:       #111111;

  /* Derivados declarados en MARCA.md */
  --navy-hondo:  #041D33;
  --navy-alto:   #0A2E4E;
  --tinta-2:     #4A4F57;
  --blanco:      #FFFFFF;

  --sobre-navy:      rgba(245,245,245,0.88);
  --sobre-navy-2:    rgba(233,228,223,0.72);
  --linea-clara:     rgba(233,228,223,0.16);

  /* Tipografia */
  --display: 'Yeseva One', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --texto:   'Quicksand', ui-rounded, 'Segoe UI', system-ui, sans-serif;

  /* Retícula */
  --ancho: 1120px;
  --canal: clamp(20px, 5vw, 72px);
  --pastilla: 999px;
  --radio: 18px;

  /* Movimiento */
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-alto: 52px;
}

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

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--niebla);
  color: var(--tinta);
  font-family: var(--texto);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; }

.contenedor{
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--canal);
}

/* ---------- Tipografía ---------- */

h1, h2, h3{
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0;
}

h1{ font-size: clamp(2rem, 1.35rem + 2.6vw, 2.875rem); line-height: 1.1; }
h2{ font-size: clamp(1.85rem, 1.3rem + 2.3vw, 2.8rem);  line-height: 1.12; }
h3{ font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.2rem);  line-height: 1.3; }

p{ margin: 0; }

.rotulo{
  font-family: var(--texto);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0;
}

.bajada{
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.7;
  max-width: 62ch;
}

.lead{ font-weight: 600; }

/* ---------- Logo ---------- */

/* El lockup es tipográfico: el nombre en la serif de los titulares y "ABOGADOS"
   en versalitas muy espaciadas, que es el rasgo del sistema. */
.marca{ display: inline-grid; gap: 0.16em; line-height: 1; }

.marca__nombre{
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.005em;
  color: var(--arena);
}

.marca__bajo{
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(233,228,223,0.6);
  /* el tracking empuja todo a la derecha: se compensa para que alinee con la serif */
  margin-right: -0.3em;
}

/* Firma del pie: la misma construcción, en grande */
.firma{ display: inline-grid; gap: 0.2em; line-height: 1; }
.firma__nombre{
  font-family: var(--display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  color: var(--arena);
}
.firma__bajo{
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(233,228,223,0.6);
  margin-right: -0.34em;
}

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

.boton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.55rem;
  padding: 0 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--pastilla);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color .35s var(--curva), color .35s var(--curva),
              transform .35s var(--curva), border-color .35s var(--curva);
}
.boton:hover{ transform: translateY(-2px); }

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

.boton--navy{ background: var(--navy); color: var(--niebla); }
.boton--navy:hover{ background: var(--navy-alto); }

.boton--linea{
  background: transparent;
  color: var(--niebla);
  border-color: var(--linea-clara);
}
.boton--linea:hover{ background: rgba(233,228,223,0.1); border-color: var(--arena); }

/* Botón circular de flecha, el de las tarjetas */
.flecha{
  width: 2.125rem;
  height: 2.125rem;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: var(--niebla);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .35s var(--curva), transform .35s var(--curva);
}
.flecha svg{ width: 1rem; height: 1rem; }
.flecha:hover{ background: var(--navy-alto); transform: translateX(3px); }

/* ============================================================
   Barra de navegación — pastilla flotante de vidrio
   ============================================================ */

.nav{
  position: fixed;
  inset: 1.5rem 0 auto;
  z-index: 60;
  padding-inline: var(--canal);
  pointer-events: none;
  transition: top .5s var(--curva);
}
/* Al bajar sube 3 px y se queda ahí, igual que en la referencia */
.nav.is-fija{ top: 1.35rem; }

.nav__pastilla{
  pointer-events: auto;
  max-width: calc(var(--ancho) - 2 * var(--canal));
  margin-inline: auto;
  min-height: var(--nav-alto);
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--pastilla);
  background: rgba(16,16,18,0.55);
}

.nav__menu{
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.9rem);
  list-style: none;
  padding: 0;
}

.nav__enlace{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.15rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sobre-navy);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .3s var(--curva);
}
.nav__enlace::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.15rem;
  height: 1px;
  background: var(--arena);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--curva);
}
.nav__enlace:hover{ color: var(--blanco); }
.nav__enlace:hover::after{ transform: scaleX(1); }

.nav__caret{
  width: 0.6rem; height: 0.6rem;
  transition: transform .35s var(--curva);
}
 /* El caret no gira al abrir: así está en la referencia. */

/* Desplegable de áreas de práctica */
.nav__item{ position: relative; }

.nav__panel{
  position: absolute;
  top: 100%;   /* pegado al borde de la pastilla, como en la referencia */
  left: -1.3rem;
  min-width: 12rem;
  padding: 0;
  list-style: none;
  margin: 0;
  background: var(--blanco);
  border-radius: 0;
  box-shadow: 0 18px 40px -26px rgba(4,29,51,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--curva), visibility .22s;
}
.nav__item.is-abierto .nav__panel{ opacity: 1; visibility: visible; }

.nav__panel a{
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.45rem 1rem;
  font-size: 0.8125rem;
  color: #3A3A3A;
  transition: background-color .2s var(--curva), color .2s var(--curva);
}
.nav__panel a:hover{ background: var(--navy-hondo); color: var(--niebla); }

.nav__cta{ flex: none; }

/* Botón hamburguesa */
.nav__hamburguesa{
  display: none;
  flex: none;
  width: 2.6rem; height: 2.6rem;
  border: 0; border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.nav__hamburguesa span{
  position: absolute;
  left: 50%; translate: -50% 0;
  width: 1.1rem; height: 1.5px;
  background: var(--arena);
  transition: transform .35s var(--curva), opacity .25s var(--curva);
}
.nav__hamburguesa span:nth-child(1){ top: 1rem; }
.nav__hamburguesa span:nth-child(2){ top: 1.3rem; }
.nav__hamburguesa span:nth-child(3){ top: 1.6rem; }
.nav.is-desplegada .nav__hamburguesa span:nth-child(1){ transform: translateY(0.3rem) rotate(45deg); }
.nav.is-desplegada .nav__hamburguesa span:nth-child(2){ opacity: 0; }
.nav.is-desplegada .nav__hamburguesa span:nth-child(3){ transform: translateY(-0.3rem) rotate(-45deg); }

/* ============================================================
   Fondos: la fachada de vidrio
   El hero de la referencia es un edificio de cristal. Acá se
   compone con CSS en vez de una foto que todavía no existe.
   ============================================================ */

.vidrio{
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 8%,  rgba(28,78,124,0.85) 0%, rgba(6,33,59,0) 58%),
    radial-gradient(90% 70% at 12% 92%,  rgba(16,52,86,0.7)  0%, rgba(6,33,59,0) 62%),
    linear-gradient(168deg, var(--navy-alto) 0%, var(--navy) 42%, var(--navy-hondo) 100%);
}
/* Montantes verticales, como los de una fachada */
.vidrio::before{
  content: '';
  position: absolute;
  inset: -12% -6%;
  background:
    repeating-linear-gradient(to right,
      rgba(233,228,223,0.10) 0 1px,
      rgba(233,228,223,0.028) 1px 2px,
      rgba(233,228,223,0) 2px 88px),
    repeating-linear-gradient(to bottom,
      rgba(233,228,223,0.055) 0 1px,
      rgba(233,228,223,0) 1px 132px);
  transform: perspective(900px) rotateY(-13deg) scale(1.22);
  transform-origin: 78% 50%;
  animation: deriva 46s ease-in-out infinite alternate;
}
/* Grano, para que el degradado no se banda */
.vidrio::after{
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

@keyframes deriva{
  from{ transform: perspective(900px) rotateY(-13deg) scale(1.22) translateX(0); }
  to  { transform: perspective(900px) rotateY(-9deg)  scale(1.28) translateX(-2.5%); }
}

/* Marca de agua: la inicial en la serif de los titulares, enorme y apenas visible */
.filigrana{
  position: absolute;
  pointer-events: none;
  display: block;
  font-family: var(--display);
  line-height: 0.78;
  color: var(--arena);
  opacity: 0.075;
  user-select: none;
}

/* Fondo de sección: video en la portada, fotografía en la franja.
   Van detrás del velo, que es quien garantiza el contraste del texto. */
.fondo{
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78);
  /* El video entra por opacidad para que no salte el póster al primer fotograma */
  animation: entraFondo 1.2s var(--curva) both;
}
@keyframes entraFondo{ from{ opacity: 0 } to{ opacity: 1 } }

/* ============================================================
   Hero
   ============================================================ */

.hero{
  position: relative;
  min-height: 100svh;
  display: grid;
  padding-block: calc(var(--nav-alto) + 4.5rem) 2.5rem;
  color: var(--niebla);
  isolation: isolate;
}
/* Velo para que el texto siempre gane */
.hero::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(4,29,51,0) 0%,
      rgba(4,29,51,0) 68%,
      rgba(4,29,51,0.75) 88%,
      var(--navy-hondo) 100%),
    linear-gradient(100deg,
      rgba(4,29,51,0.88) 0%,
      rgba(4,29,51,0.66) 46%,
      rgba(4,29,51,0.42) 100%);
}
.hero > .vidrio{ z-index: -3; }

.hero__rejilla{
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 3rem;
}
.hero__cuerpo{ align-self: center; max-width: 42rem; }
.hero h1{ margin-bottom: 1.5rem; max-width: 15ch; }
.hero .bajada{
  color: var(--sobre-navy);
  margin-bottom: 2.25rem;
  max-width: 41.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.hero__pie{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  color: var(--sobre-navy-2);
}
.hero__pie .rotulo{ font-size: 0.7rem; }

.baja{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.baja i{
  display: block;
  width: 1px; height: 2.6rem;
  background: linear-gradient(to bottom, var(--arena), transparent);
  animation: cae 2.4s var(--curva) infinite;
  transform-origin: top;
}
@keyframes cae{
  0%,100%{ transform: scaleY(0.35); opacity: .35; }
  50%    { transform: scaleY(1);    opacity: 1;   }
}

/* ============================================================
   Secciones
   ============================================================ */

.seccion{ position: relative; padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.seccion--navy{ background: var(--navy-hondo); color: var(--niebla); isolation: isolate; }
.seccion--clara{ background: var(--niebla); color: var(--tinta); }
.seccion--arena{ background: var(--arena); color: var(--tinta); }

.encabezado{ text-align: center; max-width: 46rem; margin: 0 auto clamp(2.75rem, 5vw, 4rem); }
.encabezado .rotulo{ color: var(--sobre-navy-2); margin-bottom: 1rem; }
.encabezado .bajada{ margin-inline: auto; }
.seccion--navy .encabezado .bajada{ color: var(--sobre-navy); }
.seccion--clara .encabezado .rotulo{ color: var(--tinta-2); }
.seccion--clara .encabezado .bajada{ color: var(--tinta-2); }

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

.areas{ overflow: hidden; }
.areas .filigrana{
  inset: 2% auto auto -1.5%;
  font-size: min(46vw, 560px);
}

.tarjetas{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.625rem;
}

.tarjeta{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 18.5rem;
  padding: 2rem 2rem 1.75rem;
  background: var(--blanco);
  border-radius: 16px;
  color: var(--tinta);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,0.6);
  transition: transform .5s var(--curva), box-shadow .5s var(--curva);
}
.tarjeta:hover{
  transform: translateY(-6px);
  box-shadow: 0 40px 70px -40px rgba(0,0,0,0.7);
}
.tarjeta__icono{ color: var(--navy); }
.tarjeta__icono svg{ width: 2.25rem; height: 2.25rem; }
.tarjeta h3{ color: var(--navy); }
.tarjeta__texto{ font-size: 0.875rem; line-height: 1.45; color: var(--tinta-2); }
.tarjeta__texto .lead{ display: block; color: var(--tinta); margin-bottom: 0.35rem; }
.tarjeta__pie{ margin-top: auto; display: flex; justify-content: flex-end; }

/* --- Bloque a dos columnas --- */

.duo{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.duo__texto{ display: grid; gap: 1.35rem; justify-items: start; }
.duo__texto .bajada{ color: var(--sobre-navy); }
.seccion--clara .duo__texto .bajada{ color: var(--tinta-2); }

.cifra{
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-top: 0.75rem;
}
.cifra b{
  font-family: var(--texto);
  font-weight: 300;
  font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.cifra span{ font-size: 0.875rem; color: var(--sobre-navy-2); max-width: 17ch; line-height: 1.35; }

/* Panel de imagen. Mientras no haya fotografía, va la composición de vidrio. */
.lienzo{
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio);
  overflow: hidden;
  isolation: isolate;
}
.lienzo .filigrana{
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 44%;
  aspect-ratio: 562 / 613;
  opacity: 0.12;
}
.lienzo img{ width: 100%; height: 100%; object-fit: cover; }
.lienzo::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(155deg, rgba(6,33,59,0.26) 0%, rgba(6,33,59,0.06) 55%, rgba(6,33,59,0.22) 100%);
}

/* --- Franja de fotografía a sangre --- */

.franja{
  position: relative;
  padding-block: clamp(6rem, 12vw, 9.5rem);
  color: var(--niebla);
  isolation: isolate;
  overflow: hidden;
}
.franja::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg, rgba(4,29,51,0.95) 0%, rgba(4,29,51,0.82) 42%, rgba(4,29,51,0.5) 100%);
}
.franja .filigrana{
  inset: -8% -2% auto auto;
  font-size: min(34vw, 400px);
  opacity: 0.09;
}
.franja__cuerpo{ position: relative; max-width: 40rem; display: grid; gap: 1.4rem; justify-items: start; }
.franja__cuerpo .rotulo{ color: var(--sobre-navy-2); }
.franja__cuerpo .bajada{ color: var(--sobre-navy); }

/* --- Cierre --- */

.cierre{ text-align: center; }
.cierre h2{ margin-bottom: 1.1rem; color: var(--navy); }
.cierre .bajada{ margin: 0 auto 2.25rem; color: var(--tinta-2); }
.cierre__canales{
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 2.5rem;
  font-size: 0.925rem;
  color: var(--tinta-2);
}
.cierre__canales a{ color: var(--navy); font-weight: 600; }
.cierre__canales a:hover{ text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   Pie
   ============================================================ */

.pie{ background: var(--navy); color: var(--sobre-navy); padding-block: clamp(3.5rem, 7vw, 5rem) 2rem; }
.pie__grilla{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.75rem;
  border-bottom: 1px solid var(--linea-clara);
}
.pie .firma{ color: var(--arena); margin-bottom: 1.1rem; }
.pie h4{
  font-family: var(--texto);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sobre-navy-2);
  margin: 0 0 1.1rem;
}
.pie ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; font-size: 0.925rem; }
.pie a:hover{ color: var(--blanco); }
.pie__legal{
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  font-size: 0.8rem;
  color: var(--sobre-navy-2);
}

/* ============================================================
   Entrada por scroll
   ============================================================ */

@media (prefers-reduced-motion: no-preference){
  .revela{
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s var(--curva), transform .7s var(--curva);
  }
  .revela.is-visible{ opacity: 1; transform: none; }
}

/* ============================================================
   Adaptaciones
   ============================================================ */

@media (max-width: 62rem){
  .tarjetas{ grid-template-columns: 1fr; }
  .duo{ grid-template-columns: 1fr; }
  .duo__texto{ order: 1; }
  .pie__grilla{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 56rem){
  .nav__hamburguesa{ display: block; }
  .nav__pastilla{ padding-right: 0.5rem; }
  .nav__cta{ display: none; }

  .nav__menu{
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem;
    background: rgba(4,29,51,0.96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid var(--linea-clara);
    border-radius: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .35s var(--curva), transform .35s var(--curva), visibility .35s;
  }
  .nav.is-desplegada .nav__menu{ opacity: 1; visibility: visible; transform: none; }
  .nav__enlace{ width: 100%; justify-content: space-between; padding: 0.85rem 0.75rem; font-size: 0.95rem; }
  .nav__enlace::after{ display: none; }

  .nav__panel{
    position: static;
    translate: none;
    min-width: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 0 0.5rem 0.75rem;
    display: none;
  }
  .nav__item.is-abierto .nav__panel{ display: block; transform: none; }
  .nav__panel a{ color: var(--sobre-navy-2); padding: 0.55rem 0.75rem; }
  .nav__panel a:hover{ background: rgba(233,228,223,0.1); color: var(--blanco); }
}

@media (max-width: 36rem){
  .pie__grilla{ grid-template-columns: 1fr; }
  .hero__pie{ flex-direction: column; align-items: flex-start; }
}