/* Durán y Durán Abogados — hoja de estilos.
   Contrastes verificados para WCAG 2.2 AA (texto normal ≥ 4.5:1). */

:root {
  --tinta: #1c2433;        /* texto principal sobre --papel: 15.6:1 */
  --tinta-suave: #4a5262;  /* texto secundario sobre --papel: 7.9:1; sobre --crema: 7.1:1 */
  --marino: #0a1c34;       /* fondo del logo; texto blanco encima: 17.1:1 */
  --marino-claro: #2c4170; /* enlaces sobre --papel: 10.0:1 */
  --oro: #8a6a1c;          /* acentos sobre --papel: 5.1:1; sobre --crema: 4.6:1 */
  --oro-claro: #ebe6da;    /* marfil del logo; sobre --marino: 13.7:1 */
  --papel: #ffffff;
  --crema: #f6f3ec;        /* --tinta encima: 14.0:1 */
  --linea: #d9d3c4;
  --foco: #b3261e;         /* contorno de foco sobre fondos claros: 6.5:1 */
  --titulo: var(--marino); /* color de los títulos sobre fondos claros */
  --radio: 10px;
  color-scheme: light dark;
  --ancho: 72rem;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }
/* Tamaño de letra elegido en las herramientas de accesibilidad. Todo el sitio
   usa rem, así que escala completo. */
html[data-letra="1"] { font-size: 112.5%; }
html[data-letra="2"] { font-size: 125%; }
html[data-letra="3"] { font-size: 150%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
}

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

h1, h2, h3 {
  font-family: var(--serif);
  line-height: 1.2;
  color: var(--titulo);
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

a { color: var(--marino-claro); text-underline-offset: 0.18em; }
a:hover { color: var(--oro); }

/* Foco siempre visible, también para quien navega con teclado. */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Sobre fondos oscuros el rojo no alcanza 3:1; se usa el marfil (13.7:1). */
.encabezado :focus-visible,
.portada :focus-visible,
.pie :focus-visible,
.saltar:focus-visible { outline-color: var(--oro-claro); }

.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

/* Enlace para saltar al contenido: oculto hasta recibir foco. */
.saltar {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  background: var(--marino);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radio);
  font-weight: 600;
}
.saltar:focus { top: 1rem; color: #fff; }

.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Encabezado ---------- */
/* El encabezado usa el mismo azul que el fondo del logo, de modo que el
   logo se integra sin recuadro. */
.encabezado {
  background: var(--marino);
  border-bottom: 1px solid rgb(235 230 218 / 0.18);
}
.encabezado .contenedor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 0.5rem;
}
.marca { display: block; line-height: 0; }
/* El archivo del logo no se modifica: es un cuadrado con mucho fondo liso,
   así que solo se muestra la franja central donde está el diseño. */
.marca img {
  width: clamp(15rem, 34vw, 20rem);
  aspect-ratio: 2.6 / 1;
  object-fit: cover;
  object-position: 48% 50%;
}

.menu ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}
.menu a {
  display: inline-block;
  padding: 0.5rem 0.15rem;   /* objetivo táctil ≥ 24 px (WCAG 2.5.8) */
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--oro-claro); border-bottom-color: var(--oro-claro); }

/* ---------- Portada ---------- */
.portada {
  background: var(--marino);
  color: #fff;
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}
.portada h1 { color: #fff; max-width: 20ch; }
.portada .antetitulo {
  color: var(--oro-claro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}
.portada p.entrada {
  font-size: 1.2rem;
  max-width: 60ch;
  color: #eef1f7;               /* sobre --marino: 12.0:1 */
}

/* ---------- Botones ---------- */
.botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radio);
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  line-height: 1.2;
}
.boton svg { width: 1.25rem; height: 1.25rem; flex: none; }
.boton-primario { background: var(--oro-claro); color: var(--marino); }
.boton-primario:hover { background: #fff; color: var(--marino); }
.boton-claro { border-color: #fff; color: #fff; }
.boton-claro:hover { background: #fff; color: var(--marino); }
.boton-oscuro { background: var(--marino); color: #fff; }
.boton-oscuro:hover { background: var(--marino-claro); color: #fff; }
.boton-borde { border-color: var(--marino); color: var(--marino); }
.boton-borde:hover { background: var(--marino); color: #fff; }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(3rem, 7vw, 5rem); }
.seccion-crema { background: var(--crema); }
.seccion .intro { max-width: 65ch; color: var(--tinta-suave); font-size: 1.1rem; }

.rejilla {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: 2rem;
  list-style: none;
  padding: 0;
}

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.6rem;
}
.tarjeta p:last-child { margin-bottom: 0; }
.icono {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--crema);
  color: var(--oro);
  margin-bottom: 1rem;
}
.icono svg { width: 1.6rem; height: 1.6rem; }

/* ---------- Equipo ---------- */
.equipo {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}
.persona {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
.persona img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  background: var(--crema);
}
.persona-texto { padding: 1.5rem 1.6rem 1.75rem; }
.persona-cargo {
  color: var(--oro);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

/* ---------- Horario y contacto ---------- */
.dos-columnas {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
}
table.horario {
  width: 100%;
  border-collapse: collapse;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.horario caption {
  text-align: left;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--titulo);
  padding-bottom: 0.75rem;
}
.horario th,
.horario td {
  text-align: left;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--linea);
}
.horario tr:last-child th,
.horario tr:last-child td { border-bottom: 0; }
.horario th { font-weight: 600; }
.horario td.cerrado { color: var(--tinta-suave); }

.datos {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 1.1rem;
}
.datos li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.75rem; align-items: start; }
.datos .icono { width: 2.5rem; height: 2.5rem; margin: 0; }
.datos .icono svg { width: 1.25rem; height: 1.25rem; }
.datos strong { display: block; color: var(--titulo); }
.datos address { font-style: normal; }
/* Con letra grande en celular, el correo y la dirección deben poder partirse
   para no salirse de la pantalla (WCAG 1.4.10, reacomodo). */
.datos li > span { min-width: 0; overflow-wrap: anywhere; }
.documento a { overflow-wrap: anywhere; }
/* Enlaces sueltos con área táctil ≥ 24 px (WCAG 2.5.8). */
.datos a,
.pie a { display: inline-block; padding-block: 0.3rem; }

/* ---------- Pie ---------- */
.pie {
  background: var(--marino);
  color: #eef1f7;
  padding-block: 2.5rem;
  font-size: 0.95rem;
}
.pie a { color: var(--oro-claro); }
.pie a:hover { color: #fff; }
.pie .contenedor {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.pie p { margin: 0; }

/* ---------- Página de texto (aviso de privacidad) ---------- */
.documento { max-width: 46rem; }
.documento h2 { font-size: 1.45rem; margin-top: 2rem; }
.documento ul { padding-left: 1.25rem; }
.documento li { margin-bottom: 0.4rem; }
.nota-fecha { color: var(--tinta-suave); }

/* ---------- Herramientas de accesibilidad ---------- */
/* Oculta en el HTML; el script la muestra, porque sin JavaScript no funciona. */
.herramientas {
  background: var(--crema);
  border-bottom: 1px solid var(--linea);
  font-size: 0.95rem;
}
.herramientas .contenedor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding-block: 0.45rem;
}
.herramientas-grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.herramientas-etiqueta { font-weight: 700; margin-right: 0.2rem; }
.herramientas button {
  font: inherit;
  font-weight: 600;
  min-height: 2.5rem;
  padding: 0.3rem 0.85rem;
  border: 2px solid var(--tinta);
  border-radius: 8px;
  background: var(--papel);
  color: var(--tinta);
  cursor: pointer;
}
.herramientas button:hover { background: var(--tinta); color: var(--papel); }
.herramientas button[aria-pressed="true"] { background: var(--tinta); color: var(--papel); }
.herramientas button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.herramientas button[aria-disabled="true"]:hover { background: var(--papel); color: var(--tinta); }
.herramientas a { font-weight: 600; }

/* ---------- Modo oscuro (según la configuración del dispositivo) ----------
   Contrastes: texto 15.1:1, secundario 9.9:1, enlaces 10.2:1, acentos 9.7:1. */
@media (prefers-color-scheme: dark) {
  :root:not([data-contraste="alto"]) {
    --papel: #0f1726;
    --crema: #16223a;
    --tinta: #e8ecf3;
    --tinta-suave: #b9c1cf;
    --linea: #56658a;
    --oro: #d9bb73;
    --marino-claro: #a9c4f5;
    --titulo: #ebe6da;
    --foco: #ff9e8f;
  }
  :root:not([data-contraste="alto"]) .encabezado,
  :root:not([data-contraste="alto"]) .pie { border-color: var(--linea); }
  :root:not([data-contraste="alto"]) .boton-oscuro { background: var(--oro-claro); color: var(--marino); }
  :root:not([data-contraste="alto"]) .boton-oscuro:hover { background: #fff; color: var(--marino); }
  :root:not([data-contraste="alto"]) .boton-borde { border-color: var(--tinta); color: var(--tinta); }
  :root:not([data-contraste="alto"]) .boton-borde:hover { background: var(--tinta); color: var(--papel); }
}

/* ---------- Alto contraste (elegido por el visitante) ----------
   Blanco y amarillo sobre negro: 21:1 y 15.2:1 (nivel AAA). */
:root[data-contraste="alto"] {
  --papel: #000;
  --crema: #000;
  --tinta: #fff;
  --tinta-suave: #fff;
  --linea: #fff;
  --oro: #ffd84d;
  --oro-claro: #ffd84d;
  --marino: #000;
  --marino-claro: #ffd84d;
  --titulo: #fff;
  --foco: #ffd84d;
  color-scheme: dark;
}
[data-contraste="alto"] a { text-decoration: underline; text-decoration-thickness: 2px; }
[data-contraste="alto"] a:hover { color: #fff; }
[data-contraste="alto"] .menu a:hover { color: #ffd84d; }
[data-contraste="alto"] .portada,
[data-contraste="alto"] .pie,
[data-contraste="alto"] .encabezado { border-bottom: 2px solid #fff; }
[data-contraste="alto"] .portada p.entrada,
[data-contraste="alto"] .pie { color: #fff; }
[data-contraste="alto"] .boton { border: 2px solid currentColor; text-decoration: none; }
[data-contraste="alto"] .boton-primario,
[data-contraste="alto"] .boton-oscuro { background: #ffd84d; color: #000; border-color: #ffd84d; }
[data-contraste="alto"] .boton-claro,
[data-contraste="alto"] .boton-borde { background: #000; color: #fff; border-color: #fff; }
[data-contraste="alto"] .boton:hover { background: #fff; color: #000; border-color: #fff; }
[data-contraste="alto"] .tarjeta,
[data-contraste="alto"] .persona,
[data-contraste="alto"] table.horario,
[data-contraste="alto"] .horario th,
[data-contraste="alto"] .horario td { border-color: #fff; }
[data-contraste="alto"] .icono { background: #000; border: 1px solid #ffd84d; }

@media (forced-colors: active) {
  .boton, .tarjeta, .persona, table.horario { border: 1px solid CanvasText; }
}

@media print {
  .encabezado .menu, .saltar, .botones { display: none; }
  .portada { background: none; color: var(--tinta); }
  .portada h1 { color: var(--marino); }
}