/* ==========================================================================
   Estudio Jurídico Dr. Damián Suárez & Asociados
   Hoja de estilos única. Sin framework ni build: el sitio se sirve tal cual
   desde nginx, así que cada kilobyte que se agrega acá lo paga el que entra
   desde el celular en la calle.
   ========================================================================== */

/* --- Tokens ---------------------------------------------------------------
   Dos temas sobre las mismas variables. El claro es el de "papel de estudio";
   el oscuro no es un invento de moda: mucha gente consulta un abogado de
   noche, desde la cama, con el problema encima.                             */

:root {
  --tinta:        #0e1a2b;
  --tinta-2:      #16273f;
  --tinta-3:      #24384f;
  --papel:        #f7f4ef;
  --papel-2:      #fffdfa;
  --papel-3:      #ece6dc;
  --laton:        #a8762c;
  --laton-vivo:   #c69644;
  --laton-tenue:  rgba(168, 118, 44, .16);

  --texto:        #16202c;
  --texto-suave:  #55606e;
  --texto-tenue:  #7b8595;
  --borde:        #ded6c9;
  --borde-suave:  #e9e2d7;

  --fondo:        var(--papel);
  --superficie:   var(--papel-2);
  --superficie-2: #f2ede5;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ancho: 1180px;
  --radio: 4px;
  --sombra: 0 1px 2px rgba(14, 26, 43, .04), 0 8px 28px -12px rgba(14, 26, 43, .16);
  --sombra-alta: 0 2px 4px rgba(14, 26, 43, .06), 0 24px 60px -24px rgba(14, 26, 43, .28);
  --transicion: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* Los dos selectores de abajo comparten EXACTAMENTE la misma lista de valores
   y hay que tocarlos juntos. Está duplicado a propósito y no resuelto con
   `light-dark()`: esa función no existe en los Android viejos que son media
   Berazategui, y ahí un token inválido no degrada — rompe todos los colores.
   El primero es el sistema operativo mandando cuando nadie eligió; el segundo
   es la persona eligiendo, y le gana al sistema.                            */

@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) {
    --tinta:        #f2ede5;
    --tinta-2:      #e4dbcd;
    --tinta-3:      #cdc2b1;
    --papel:        #0c1522;
    --papel-2:      #111d2e;
    --papel-3:      #1a2839;
    --laton:        #d3a659;
    --laton-vivo:   #e8c483;
    --laton-tenue:  rgba(211, 166, 89, .16);

    --texto:        #eee7dc;
    --texto-suave:  #a9b3c0;
    --texto-tenue:  #7d8794;
    --borde:        #24344a;
    --borde-suave:  #1c2a3c;

    --fondo:        var(--papel);
    --superficie:   var(--papel-2);
    --superficie-2: #162335;

    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px -12px rgba(0, 0, 0, .6);
    --sombra-alta: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 60px -24px rgba(0, 0, 0, .7);
  }
}

html[data-tema="oscuro"] {
  --tinta:        #f2ede5;
  --tinta-2:      #e4dbcd;
  --tinta-3:      #cdc2b1;
  --papel:        #0c1522;
  --papel-2:      #111d2e;
  --papel-3:      #1a2839;
  --laton:        #d3a659;
  --laton-vivo:   #e8c483;
  --laton-tenue:  rgba(211, 166, 89, .16);

  --texto:        #eee7dc;
  --texto-suave:  #a9b3c0;
  --texto-tenue:  #7d8794;
  --borde:        #24344a;
  --borde-suave:  #1c2a3c;

  --fondo:        var(--papel);
  --superficie:   var(--papel-2);
  --superficie-2: #162335;

  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px -12px rgba(0, 0, 0, .6);
  --sombra-alta: 0 2px 4px rgba(0, 0, 0, .4), 0 24px 60px -24px rgba(0, 0, 0, .7);
}

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

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--tinta);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--laton-tenue); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--laton); }

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

:focus-visible {
  outline: 2px solid var(--laton);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--laton); color: #fff; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tinta);
  color: var(--papel);
  padding: 12px 20px;
  z-index: 200;
}
.saltar:focus { left: 12px; top: 12px; }

/* --- Tipitos de texto ---------------------------------------------------- */

.antetitulo {
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--laton);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.antetitulo::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--laton);
  flex: none;
}
.antetitulo.centrado { justify-content: center; }

.bajada {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--texto-suave);
  max-width: 62ch;
}

.chico { font-size: .87rem; color: var(--texto-tenue); }

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

.boton {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transicion);
  white-space: nowrap;
}

.boton svg { width: 18px; height: 18px; flex: none; }

.boton--primario {
  background: var(--tinta);
  color: var(--papel);
  border-color: var(--tinta);
}
.boton--primario:hover { background: var(--tinta-2); border-color: var(--tinta-2); transform: translateY(-1px); box-shadow: var(--sombra); }

.boton--laton {
  background: var(--laton);
  color: #fff;
  border-color: var(--laton);
}
.boton--laton:hover { background: var(--laton-vivo); border-color: var(--laton-vivo); transform: translateY(-1px); box-shadow: var(--sombra); }

.boton--linea {
  background: transparent;
  color: var(--tinta);
  border-color: var(--borde);
}
.boton--linea:hover { border-color: var(--laton); color: var(--laton); }

.boton--claro {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-color: rgba(255, 255, 255, .32);
  backdrop-filter: blur(6px);
}
.boton--claro:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .6); }

/* --- Cabecera ------------------------------------------------------------ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: var(--transicion);
}
.cabecera[data-fija="si"] {
  border-bottom-color: var(--borde-suave);
  box-shadow: 0 1px 20px -8px rgba(14, 26, 43, .2);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 78px;
  transition: min-height var(--transicion);
}
.cabecera[data-fija="si"] .cabecera__fila { min-height: 64px; }

.marca {
  display: flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  margin-right: auto;
}
.marca__sello { width: 42px; height: 42px; flex: none; transition: var(--transicion); }
.cabecera[data-fija="si"] .marca__sello { width: 36px; height: 36px; }

.marca__texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca__nombre {
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--tinta);
  letter-spacing: -.01em;
}
.marca__pie {
  font-size: .63rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  font-weight: 600;
}

.navegacion { display: flex; align-items: center; gap: .35rem; }

.navegacion a {
  position: relative;
  padding: .5rem .85rem;
  font-size: .93rem;
  font-weight: 500;
  color: var(--texto-suave);
  text-decoration: none;
  border-radius: var(--radio);
  transition: var(--transicion);
}
.navegacion a:hover { color: var(--tinta); background: var(--laton-tenue); }
.navegacion a[aria-current="page"] { color: var(--tinta); font-weight: 600; }
.navegacion a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .85rem; right: .85rem; bottom: .18rem;
  height: 2px;
  background: var(--laton);
}

.cabecera__acciones { display: flex; align-items: center; gap: .6rem; }

.tema {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  transition: var(--transicion);
}
.tema:hover { color: var(--laton); border-color: var(--laton); }
.tema svg { width: 18px; height: 18px; }
.tema .luna { display: none; }
html[data-tema="oscuro"] .tema .sol { display: none; }
html[data-tema="oscuro"] .tema .luna { display: block; }

.hamburguesa { display: none; }

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

.portada {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--tinta);
}

.portada__foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.portada__velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(8, 16, 28, .94) 0%, rgba(8, 16, 28, .82) 42%, rgba(8, 16, 28, .38) 100%),
    linear-gradient(to top, rgba(8, 16, 28, .7) 0%, transparent 45%);
}

.portada .contenedor { position: relative; z-index: 2; padding-block: clamp(64px, 11vh, 120px); }

.portada__caja { max-width: 40rem; }
.portada h1 { color: #fff; }
.portada h1 em {
  font-style: normal;
  color: var(--laton-vivo);
}
.portada .bajada { color: rgba(255, 255, 255, .82); margin-bottom: 2rem; }
.portada .antetitulo { color: var(--laton-vivo); }
.portada .antetitulo::before { background: var(--laton-vivo); }

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

.portada__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.6rem;
  margin-top: 2.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.portada__dato { color: rgba(255, 255, 255, .78); font-size: .88rem; }
.portada__dato strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.1;
  margin-bottom: .15rem;
}

/* --- Bloques ------------------------------------------------------------- */

.bloque { padding-block: clamp(64px, 9vw, 116px); }
.bloque--ajustado { padding-block: clamp(48px, 6vw, 80px); }
.bloque--superficie { background: var(--superficie); border-block: 1px solid var(--borde-suave); }
.bloque--tinta { background: var(--tinta); color: rgba(255, 255, 255, .8); }
.bloque--tinta h2, .bloque--tinta h3 { color: #fff; }
.bloque--tinta .antetitulo { color: var(--laton-vivo); }
.bloque--tinta .antetitulo::before { background: var(--laton-vivo); }
.bloque--tinta .bajada { color: rgba(255, 255, 255, .72); }

.bloque__encabezado { max-width: 60rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.bloque__encabezado.centrado { margin-inline: auto; text-align: center; }
.bloque__encabezado.centrado .bajada { margin-inline: auto; }

/* --- Rejillas ------------------------------------------------------------ */

.rejilla { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.dos-columnas--texto-derecha > :first-child { order: 2; }

/* --- Tarjetas ------------------------------------------------------------ */

.tarjeta {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  transition: var(--transicion);
  overflow: hidden;
}
.tarjeta::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--laton);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transicion);
}
.tarjeta:hover { border-color: var(--borde); box-shadow: var(--sombra); transform: translateY(-3px); }
.tarjeta:hover::before { transform: scaleY(1); }

a.tarjeta { text-decoration: none; display: block; }

.tarjeta__icono {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radio);
  background: var(--laton-tenue);
  color: var(--laton);
  margin-bottom: 1.1rem;
}
.tarjeta__icono svg { width: 22px; height: 22px; }

.tarjeta h3 { margin-bottom: .5rem; }
.tarjeta p { color: var(--texto-suave); font-size: .95rem; margin-bottom: 0; }

.tarjeta__lista {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.tarjeta__lista li {
  font-size: .78rem;
  color: var(--texto-tenue);
  border: 1px solid var(--borde-suave);
  border-radius: 999px;
  padding: .18rem .65rem;
}

.tarjeta__mas {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1.1rem;
  font-size: .87rem;
  font-weight: 600;
  color: var(--laton);
}
.tarjeta__mas svg { width: 15px; height: 15px; transition: var(--transicion); }
a.tarjeta:hover .tarjeta__mas svg { transform: translateX(4px); }

/* --- Pasos --------------------------------------------------------------- */

.pasos { counter-reset: paso; display: grid; gap: 0; }
.paso {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 1.6rem;
  padding: 1.8rem 0;
  border-top: 1px solid var(--borde-suave);
}
.paso:last-child { border-bottom: 1px solid var(--borde-suave); }
.paso::before {
  content: counter(paso, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--laton);
  opacity: .55;
}
.paso h3 { margin-bottom: .35rem; }
.paso p { color: var(--texto-suave); font-size: .96rem; margin: 0; }
.bloque--tinta .paso { border-color: rgba(255, 255, 255, .12); }
.bloque--tinta .paso p { color: rgba(255, 255, 255, .68); }

/* --- Retrato / figura ---------------------------------------------------- */

.figura { position: relative; }
.figura img {
  width: 100%;
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.figura::after {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid var(--laton);
  border-radius: var(--radio);
  z-index: -1;
  opacity: .5;
}

.credencial {
  display: inline-flex;
  flex-direction: column;
  gap: .1rem;
  padding: 1rem 1.3rem;
  border-left: 2px solid var(--laton);
  background: var(--superficie-2);
  margin-top: 1.4rem;
}
.credencial dt {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  font-weight: 600;
}
.credencial dd { margin: 0 0 .5rem; font-family: var(--serif); font-size: 1.05rem; color: var(--tinta); }
.credencial dd:last-child { margin-bottom: 0; }

/* --- Listas de chequeo --------------------------------------------------- */

.chequeo { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.chequeo li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .8rem;
  align-items: start;
  font-size: .97rem;
  color: var(--texto-suave);
}
.chequeo li::before {
  content: "";
  width: 18px; height: 18px;
  margin-top: .28rem;
  border-radius: 999px;
  background: var(--laton-tenue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8762c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.bloque--tinta .chequeo li { color: rgba(255, 255, 255, .76); }

/* --- Acordeón (preguntas) ------------------------------------------------ */

.pregunta {
  border-bottom: 1px solid var(--borde-suave);
}
.pregunta summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--tinta);
  transition: var(--transicion);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:hover { color: var(--laton); }
.pregunta summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transicion);
}
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta__cuerpo { padding: 0 0 1.4rem; color: var(--texto-suave); max-width: 68ch; }

/* --- Formulario ---------------------------------------------------------- */

.formulario { display: grid; gap: 1.1rem; }
.campo { display: grid; gap: .4rem; }
.campo label { font-size: .82rem; font-weight: 600; color: var(--texto-suave); }
.campo label .obligatorio { color: var(--laton); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .8rem .95rem;
  font-family: inherit;
  font-size: .97rem;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: var(--transicion);
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--laton);
  box-shadow: 0 0 0 3px var(--laton-tenue);
}
.campo__ayuda { font-size: .8rem; color: var(--texto-tenue); }

.formulario__aviso {
  font-size: .84rem;
  color: var(--texto-tenue);
  border-left: 2px solid var(--borde);
  padding-left: .9rem;
}

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

.contacto-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.contacto-lista > div { display: grid; grid-template-columns: 42px 1fr; gap: 1rem; align-items: start; }
.contacto-lista__icono {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--laton);
}
.contacto-lista__icono svg { width: 19px; height: 19px; }
.contacto-lista dt {
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  font-weight: 600;
  margin-bottom: .1rem;
}
.contacto-lista dd { margin: 0; font-size: 1.02rem; color: var(--tinta); }
.contacto-lista dd a { text-decoration: none; }
.contacto-lista dd a:hover { color: var(--laton); }

.mapa {
  width: 100%;
  min-height: 340px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  filter: grayscale(.4) contrast(1.05);
}
html[data-tema="oscuro"] .mapa { filter: grayscale(.5) invert(.9) hue-rotate(180deg) contrast(.9); }

/* --- Cierre / llamada ---------------------------------------------------- */

.cierre {
  position: relative;
  overflow: hidden;
  background: var(--tinta);
  color: #fff;
  text-align: center;
}
.cierre__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.cierre .contenedor { position: relative; z-index: 2; }
.cierre h2 { color: #fff; }
.cierre p { color: rgba(255, 255, 255, .76); margin-inline: auto; }
.cierre__botones { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2rem; }

/* --- Pie ----------------------------------------------------------------- */

.pie {
  background: var(--superficie);
  border-top: 1px solid var(--borde-suave);
  padding-block: clamp(48px, 6vw, 72px) 0;
  font-size: .92rem;
}
.pie__rejilla {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 2.4rem;
}
.pie h4 {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 1rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pie a { color: var(--texto-suave); text-decoration: none; }
.pie a:hover { color: var(--laton); }
.pie p { color: var(--texto-suave); }

.pie__legal {
  margin-top: 3rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--borde-suave);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--texto-tenue);
}

/* --- Burbuja de WhatsApp ------------------------------------------------- */

.burbuja {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .8rem 1.25rem;
  border-radius: 999px;
  background: #1fa855;
  color: #fff;
  font-size: .93rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 30px -8px rgba(31, 168, 85, .6);
  transition: var(--transicion);
}
.burbuja:hover { background: #17924a; transform: translateY(-2px); }
.burbuja svg { width: 21px; height: 21px; flex: none; }

/* --- Aparición al hacer scroll -------------------------------------------
   EL CONTENIDO NUNCA SE ESCONDE SI NO HAY QUIEN LO MUESTRE.
   La primera versión ponía `opacity: 0` a secas y lo revelaba por JavaScript.
   Se vio en la captura de `areas.html`: la página entera en blanco, con el
   texto ahí pero invisible. Basta con que el archivo JS no cargue —una red
   mala, un bloqueador, un error— para que un estudio jurídico publique una
   página vacía y no se entere.
   Por eso el ocultamiento vive adentro de `scripting: enabled`: si no hay
   JavaScript, no hay animación y se ve todo. Y en `sitio.js` hay además una
   red de seguridad por si el observador existe pero nunca dispara.          */

@media (scripting: enabled) {
  [data-aparece] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
  }
  [data-aparece].visible { opacity: 1; transform: none; }
}

/* --- Adaptación a pantallas chicas --------------------------------------- */

@media (max-width: 900px) {
  .pie__rejilla { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .dos-columnas { grid-template-columns: 1fr; }
  .dos-columnas--texto-derecha > :first-child { order: 0; }
  .figura::after { display: none; }
}

@media (max-width: 780px) {
  .hamburguesa {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: transparent;
    color: var(--tinta);
    cursor: pointer;
  }
  .hamburguesa svg { width: 22px; height: 22px; }
  .hamburguesa .cerrar { display: none; }
  .hamburguesa[aria-expanded="true"] .abrir { display: none; }
  .hamburguesa[aria-expanded="true"] .cerrar { display: block; }

  .navegacion {
    position: fixed;
    inset: 78px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem clamp(20px, 5vw, 40px) 1.6rem;
    background: var(--fondo);
    border-bottom: 1px solid var(--borde);
    box-shadow: var(--sombra-alta);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: var(--transicion);
  }
  .navegacion[data-abierta="si"] { transform: none; opacity: 1; pointer-events: auto; }
  .navegacion a { padding: .9rem .2rem; border-bottom: 1px solid var(--borde-suave); border-radius: 0; font-size: 1.05rem; }
  .navegacion a[aria-current="page"]::after { display: none; }

  .cabecera__acciones .boton { display: none; }

  .portada { min-height: auto; }
  .portada__datos { gap: 1rem 1.8rem; }
  /* En celular el degradado horizontal tapaba la foto entera: la columna de
     texto ocupa todo el ancho. Se pasa a vertical para que la biblioteca se
     siga viendo arriba sin comerse el contraste del texto. */
  .portada__velo {
    background:
      linear-gradient(to bottom, rgba(8, 16, 28, .58) 0%, rgba(8, 16, 28, .88) 45%, rgba(8, 16, 28, .96) 100%);
  }
  .portada__foto { object-position: center 30%; }
  .paso { grid-template-columns: 54px 1fr; gap: 1rem; }
  .paso::before { font-size: 1.8rem; }
  .burbuja span { display: none; }
  .burbuja { padding: .95rem; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .pie__rejilla { grid-template-columns: 1fr; }
  .portada__botones .boton { width: 100%; justify-content: center; }
}

/* --- Respeto por quien pidió menos movimiento ---------------------------- */

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

/* --- Impresión: que una consulta se pueda imprimir y sirva --------------- */

@media print {
  .cabecera, .burbuja, .cierre__botones, .tema, .hamburguesa { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .portada__velo, .portada__foto { display: none; }
  .portada { background: #fff; min-height: auto; }
  .portada h1, .portada .bajada, .portada__dato, .portada__dato strong { color: #000; }
}