/* ==========================================================================
   Litigio & Asesores — hoja de estilo
   --------------------------------------------------------------------------
   Sin framework. La página anterior era una plantilla de Bootstrap a medio
   rellenar, y arrastrar 200 KB de CSS ajeno para usar el 5 % no se justifica
   en un sitio de nueve secciones.

   La paleta NO es la de LEXA a propósito: son dos marcas distintas y el
   despacho no debe parecer una pantalla del software que usa por dentro.
   ========================================================================== */

:root {
  /*
   * La paleta sale del LOGO, no de un gusto.
   *
   * El azul del logo, medido sobre el archivo original, es #00486C: un azul
   * petróleo con matiz cian, no un navy neutro. Todo lo demás se deriva de
   * ese tono —los fondos son el mismo color oscurecido, y el acento frío el
   * mismo aclarado— así que la página y el vinilo de la puerta de la oficina
   * son el mismo azul y no dos azules parecidos, que es peor que uno solo.
   *
   * La primera versión de esta hoja usaba jade y cobre. No tenían nada que
   * ver con la marca: los elegí antes de buscar el logo, que estaba en la
   * carpeta del sitio viejo todo el tiempo.
   */
  --marca: #00486c;          /* el azul del logo, exacto */
  --marca-viva: #0a6b9e;     /* el mismo, más luminoso */
  --cielo: #4fa8ce;          /* acento frío: rótulos, iconos, detalles */

  /* Fondos: el azul de la marca llevado a casi negro */
  --tinta: #061420;
  --tinta-2: #0a2130;
  --tinta-3: #0e2c3e;

  --papel: #f2f5f7;          /* el hueso del propio logo */
  --papel-2: #e3e9ee;

  /*
   * El ámbar es para lo que se pulsa, y va vivo a propósito.
   *
   * Antes era #c4703a y se veía apagado: sobre un fondo oscuro un naranja
   * terroso pierde toda la fuerza y el botón principal deja de pedir que lo
   * pulses. Subido en saturación y luz, y siendo el complementario del azul
   * petróleo, es lo único cálido de la página — que es justo lo que hace que
   * el ojo vaya ahí.
   */
  --ambar: #eda53f;
  --ambar-vivo: #f7b757;

  --gris: #7d8b96;
  --gris-claro: #a8b4bd;

  --linea: rgba(242, 245, 247, .11);
  --linea-fuerte: rgba(242, 245, 247, .21);

  /*
   * El ritmo vertical, en un solo sitio.
   *
   * Subido de 3,5–7rem a 5–9,5rem. Con el valor anterior las secciones se
   * leían pegadas: había espacio, pero no el suficiente para que el ojo
   * entienda que ha terminado un asunto y empieza otro. En una página que se
   * recorre bajando, el aire ES la puntuación.
   */
  --paso: clamp(5rem, 10vw, 9.5rem);
  --radio: 14px;
  --ancho: 1180px;

  --sombra: 0 18px 50px rgba(0, 0, 0, .35);
  --transicion: 320ms cubic-bezier(.2, .7, .3, 1);
}

/* ── Base ─────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  /* El ancla no queda debajo de la barra fija */
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--tinta);
  color: var(--papel);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 .6em;
  font-weight: 600;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); letter-spacing: -.02em; }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -.015em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin: 0 0 1.1em; max-width: 68ch; }

a { color: inherit; text-decoration: none; }

.contenido {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2.5rem);
}

.seccion { padding: var(--paso) 0; position: relative; }

/*
 * Secciones alternas, para que se vea dónde acaba una y empieza otra.
 *
 * El espacio solo no bastaba: con las seis secciones sobre el mismo fondo, la
 * página se leía como un bloque continuo aunque hubiera aire de sobra. Al
 * alternar el tono cada bloque tiene un suelo propio y la vista descansa.
 *
 * Son dos tonos del MISMO azul, no dos colores: la diferencia se nota lo justo
 * para separar y no tanto como para parecer que son dos páginas cosidas.
 */
.seccion--alterna { background: var(--tinta-2); }

/* Y un filo de luz arriba, que marca el corte incluso entre dos secciones del
   mismo tono —como la portada y las áreas—. */
.seccion--alterna::before,
.seccion--filo::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(79, 168, 206, .28) 22%,
    rgba(79, 168, 206, .28) 78%,
    transparent
  );
}

/* Más aire entre la cabecera de la sección y su contenido: el título tiene que
   respirar antes de lo que anuncia. */
.seccion > .contenido > .rotulo { margin-bottom: 1.1rem; }
.seccion > .contenido > h2 { margin-bottom: 1.2rem; }
.seccion > .contenido > .entradilla { margin-bottom: 0; }

/* Etiqueta pequeña sobre cada título: dice de qué va la sección */
.rotulo {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cielo);
  margin-bottom: 1rem;
}

.entradilla { color: var(--gris-claro); font-size: 1.08rem; }

/* Foco visible: obligatorio, se navega con teclado más de lo que se cree */
:focus-visible {
  outline: 2px solid var(--ambar-vivo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Botones ──────────────────────────────────────────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .96rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--transicion), background var(--transicion),
              border-color var(--transicion);
  font-family: inherit;
}

.boton:hover { transform: translateY(-2px); }

/*
 * El texto del botón ámbar va oscuro, no blanco.
 *
 * Blanco sobre #EDA53F da un contraste de 2,1:1 — por debajo de lo legible.
 * El azul de la marca sobre el ámbar pasa de 7:1 y además ata el botón a la
 * paleta en vez de meter un blanco que no está en ningún otro sitio.
 */
.boton--ambar { background: var(--ambar); color: #06202e; }
.boton--ambar:hover { background: var(--ambar-vivo); }

.boton--linea { border-color: var(--linea-fuerte); color: var(--papel); }
.boton--linea:hover { border-color: var(--papel); background: rgba(242, 245, 247, .07); }

.boton--wa { background: #25d366; color: #062512; }
.boton--wa:hover { background: #3ae37a; }

/* ── Barra superior ───────────────────────────────────────────────────── */

.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem clamp(1.2rem, 4vw, 2.5rem);
  /* Translúcida al empezar, sólida al bajar: lo hace barra.js */
  background: transparent;
  transition: background var(--transicion), border-color var(--transicion),
              backdrop-filter var(--transicion);
  border-bottom: 1px solid transparent;
}

.barra--pegada {
  background: rgba(6, 20, 32, .88);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linea);
}

/*
 * La marca: el símbolo del logo + el nombre en tipografía.
 *
 * El archivo que había en el sitio viejo es SOLO el monograma, sin el texto,
 * así que el nombre se compone con la fuente. Sale mejor que una imagen del
 * logo completo: se lee nítido en cualquier pantalla, escala sin pesar nada y
 * el buscador lo lee como texto. Se imita el remate del logo original —serif,
 * mayúsculas y con aire entre letras—.
 */
.barra__marca {
  display: flex;
  align-items: center;
  gap: .7rem;
  white-space: nowrap;
}

.barra__marca img {
  height: 30px;
  width: auto;
  flex-shrink: 0;
}

.barra__marca b {
  font-family: 'Fraunces', Georgia, serif;
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.15;
  /* En dos líneas, como el logo de la puerta */
  display: block;
}

.barra__marca b i {
  font-style: normal;
  display: block;
  color: var(--cielo);
}

@media (max-width: 480px) {
  .barra__marca img { height: 26px; }
  .barra__marca b { font-size: .8rem; }
}

.barra__nav { display: flex; align-items: center; gap: 1.9rem; }

/*
 * El `:not(.boton)` es el arreglo de un fallo que se veía a simple vista.
 *
 * Esta regla era `.barra__nav a`, que en especificidad (una clase + un
 * elemento) le gana a `.boton--ambar` (una clase sola). Resultado: el botón
 * «Consultar mi caso» heredaba el gris del menú y quedaba con texto gris
 * apagado sobre ámbar — ilegible, y encima parecía deshabilitado, que es lo
 * peor que le puede pasar al único botón que se quiere que pulsen.
 *
 * Se excluye el botón en vez de subir la especificidad del otro lado: pelear
 * a base de selectores más largos es cómo una hoja de estilo acaba llena de
 * reglas que se cancelan entre sí.
 */
.barra__nav a:not(.boton) {
  font-size: .94rem;
  color: var(--gris-claro);
  transition: color var(--transicion);
}

.barra__nav a:not(.boton):hover { color: var(--papel); }

/* Menú de móvil */
.barra__hamburguesa {
  display: none;
  background: none;
  border: 0;
  color: var(--papel);
  padding: .5rem;
  cursor: pointer;
}

@media (max-width: 900px) {
  .barra__nav {
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: rgba(6, 20, 32, .97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--linea);
    padding: 1rem 0 1.5rem;
    /* Cerrado por defecto; el botón le pone [data-abierto] */
    display: none;
  }
  .barra__nav[data-abierto] { display: flex; }
  .barra__nav a { padding: .85rem 2rem; width: 100%; font-size: 1.05rem; }
  .barra__nav .boton { margin: .6rem 2rem 0; justify-content: center; }
  .barra__hamburguesa { display: block; }
}

/* ── Portada ──────────────────────────────────────────────────────────── */

.portada {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 5rem;
  overflow: hidden;
}

/* El lienzo del 3D va detrás de todo y no captura el ratón.

   El `width/height: 100%` está a propósito además del `inset: 0`: un <canvas>
   sin dimensiones mide 300×150 por defecto, y hay motores donde el `inset`
   solo no lo estira. Cuando eso pasa el fallo es difícil de leer —la escena
   aparece dibujada en miniatura en una esquina, no desaparece— así que mejor
   decirle el tamaño de dos formas que depender de una. */
#lienzo-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Velo entre el 3D y el texto.

   Sin esto las líneas de la red cruzan por detrás de las palabras y, aunque
   se lee, se lee peor. El efecto está para que la portada tenga profundidad,
   no para competir con el titular: si hay que elegir, gana el texto. Va del
   lado del contenido y se abre hacia la derecha, donde no hay nada escrito y
   la red puede verse limpia. */
.portada::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    var(--tinta) 8%,
    rgba(6, 20, 32, .84) 38%,
    rgba(6, 20, 32, .38) 66%,
    transparent 100%
  );
}

.portada__contenido { position: relative; z-index: 1; }

.portada h1 { margin-bottom: 1.2rem; }

.portada h1 em {
  font-style: normal;
  color: var(--cielo);
  /* El degradado solo decora: si no se soporta, queda el color de arriba */
  background: linear-gradient(100deg, var(--cielo), var(--ambar-vivo));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.portada__entradilla {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--gris-claro);
  max-width: 56ch;
  margin-bottom: 2rem;
}

.portada__botones { display: flex; flex-wrap: wrap; gap: .9rem; }

.portada__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linea);
}

.portada__dato strong {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.7rem;
  color: var(--papel);
}

.portada__dato span { font-size: .88rem; color: var(--gris); }

/* ── Áreas ────────────────────────────────────────────────────────────── */

.areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.2rem;
  margin-top: 3rem;
}

.area {
  position: relative;
  padding: 2rem 1.8rem;
  background: linear-gradient(160deg, var(--tinta-2), var(--tinta));
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  /* La inclinación al pasar el ratón la calcula tarjetas.js */
  transform-style: preserve-3d;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.area:hover {
  border-color: var(--linea-fuerte);
  box-shadow: var(--sombra);
}

/* Un halo que sigue al cursor: da el volumen sin cargar una imagen */
.area::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: radial-gradient(
    380px circle at var(--raton-x, 50%) var(--raton-y, 0%),
    rgba(79, 168, 206, .16), transparent 65%
  );
  opacity: 0;
  transition: opacity var(--transicion);
  pointer-events: none;
}

.area:hover::before { opacity: 1; }

.area__icono {
  width: 46px;
  height: 46px;
  margin-bottom: 1.2rem;
  color: var(--cielo);
}

.area__icono svg { width: 100%; height: 100%; }

.area h3 { margin-bottom: .5rem; }

.area p {
  font-size: .95rem;
  color: var(--gris-claro);
  margin: 0 0 1.1rem;
  max-width: none;
}

.area ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .89rem;
  color: var(--gris);
}

.area li { padding-left: 1.1rem; position: relative; margin-bottom: .3rem; }

.area li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--marca-viva);
}

/* ── Bloque a dos columnas ────────────────────────────────────────────── */

.doble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

@media (max-width: 880px) {
  .doble { grid-template-columns: 1fr; }
}

.tarjetas-valor { display: grid; gap: 1rem; }

.valor {
  display: flex;
  gap: 1.1rem;
  padding: 1.4rem;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.valor__num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem;
  color: var(--ambar-vivo);
  line-height: 1;
  flex-shrink: 0;
}

.valor h3 { font-size: 1.05rem; margin-bottom: .25rem; }
.valor p { font-size: .92rem; color: var(--gris-claro); margin: 0; }

/* ── Preguntas frecuentes ─────────────────────────────────────────────── */

.faq { max-width: 820px; margin: 3rem auto 0; }

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

.faq__pregunta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  background: none;
  border: 0;
  color: var(--papel);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.08rem;
  text-align: left;
  cursor: pointer;
  transition: color var(--transicion);
}

.faq__pregunta:hover { color: var(--cielo); }

.faq__cruz {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}

.faq__cruz::before, .faq__cruz::after {
  content: '';
  position: absolute;
  background: var(--cielo);
  transition: transform var(--transicion);
}

.faq__cruz::before { inset: 9px 0 9px 0; height: 2px; }
.faq__cruz::after { inset: 0 9px 0 9px; width: 2px; }

.faq__item[data-abierto] .faq__cruz::after { transform: scaleY(0); }

/* Se anima la altura con grid, que sí es animable y no necesita medir en JS */
.faq__respuesta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transicion);
}

.faq__item[data-abierto] .faq__respuesta { grid-template-rows: 1fr; }

.faq__respuesta > div { overflow: hidden; }

.faq__respuesta p {
  color: var(--gris-claro);
  font-size: .97rem;
  padding-bottom: 1.4rem;
  margin: 0;
}

/* ── Contacto ─────────────────────────────────────────────────────────── */

/* El contacto cierra la página, así que no repite un tono: baja al azul de la
   marca oscurecido. Es el único bloque con color propio y eso ayuda a que se
   entienda como el final y la salida. */
.contacto {
  background: linear-gradient(170deg, #072536, var(--tinta) 78%);
}

.formulario { display: grid; gap: 1rem; }

.campo { display: grid; gap: .4rem; }

.campo label { font-size: .87rem; color: var(--gris-claro); font-weight: 500; }

.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .8rem 1rem;
  background: var(--tinta);
  border: 1px solid var(--linea-fuerte);
  border-radius: 9px;
  color: var(--papel);
  font-family: inherit;
  font-size: .97rem;
  transition: border-color var(--transicion);
}

.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--cielo);
}

.campo textarea { resize: vertical; min-height: 130px; }

.campo--dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

@media (max-width: 620px) { .campo--dos { grid-template-columns: 1fr; } }

.aviso {
  font-size: .82rem;
  color: var(--gris);
  margin: 0;
}

.recado {
  padding: .9rem 1.1rem;
  border-radius: 9px;
  font-size: .93rem;
  display: none;
}

.recado[data-visible] { display: block; }
.recado--bien { background: rgba(10, 107, 158, .20); border: 1px solid var(--marca-viva); }
.recado--mal { background: rgba(237, 165, 63, .16); border: 1px solid var(--ambar); }

.datos-contacto { display: grid; gap: 1.6rem; align-content: start; }

.dato {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.dato__icono {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(10, 107, 158, .16);
  color: var(--cielo);
}

.dato__icono svg { width: 20px; height: 20px; }

.dato strong { display: block; font-size: .95rem; margin-bottom: .1rem; }
.dato a, .dato span { color: var(--gris-claro); font-size: .94rem; }
.dato a:hover { color: var(--cielo); }

/* ── Botón flotante de WhatsApp ───────────────────────────────────────── */

.wa-flotante {
  position: fixed;
  right: 1.3rem;
  bottom: 1.3rem;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #062512;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(37, 211, 102, .35);
  transition: transform var(--transicion);
}

.wa-flotante:hover { transform: scale(1.08); }
.wa-flotante svg { width: 28px; height: 28px; }

/* ── Pie ──────────────────────────────────────────────────────────────── */

.pie {
  border-top: 1px solid var(--linea);
  padding: 3rem 0 2rem;
  font-size: .9rem;
  color: var(--gris);
}

.pie__filas {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}

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

.pie__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  font-size: .84rem;
}

/* ── Aparecer al bajar ────────────────────────────────────────────────── */

/* Estado inicial de lo que se anima. Lo pone JS con [data-animar] para que,
   si el JS falla, el contenido siga visible en vez de quedarse invisible
   para siempre — que es el error clásico de las animaciones de scroll. */
[data-animar] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(.2, .7, .3, 1);
}

[data-animar][data-visible] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-animar] { opacity: 1; transform: none; transition: none; }
  .boton:hover, .wa-flotante:hover { transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}