/* Escribanías CABA — hoja de estilos única.
   Portada del diseño de v0 (Sitio/referencia-v0) a CSS plano: sin Tailwind, sin build,
   sin Node en el servidor. Los tokens son los mismos oklch del diseño original. */

:root {
  color-scheme: light;
  --background: oklch(0.985 0.006 85);      /* pergamino cálido */
  --foreground: oklch(0.24 0.03 255);       /* tinta azul profunda */
  --card: oklch(1 0 0);
  --primary: oklch(0.29 0.045 258);
  --primary-foreground: oklch(0.98 0.008 85);
  --secondary: oklch(0.95 0.01 85);
  --muted: oklch(0.955 0.008 85);
  --muted-foreground: oklch(0.5 0.02 258);
  --accent: oklch(0.72 0.11 72);            /* bronce: íconos, fondos, texto sobre navy */
  /* Mismo tono de bronce, oscurecido, para texto sobre fondo claro. El bronce original da
     2,42:1 sobre pergamino y WCAG AA pide 4,5:1 para texto y 3:1 para gráficos: no llega a
     ninguno de los dos. Éste da 4,75:1 y conserva la identidad de color del diseño. */
  --accent-texto: oklch(0.55 0.11 72);
  --accent-foreground: oklch(0.26 0.04 258);
  --border: oklch(0.89 0.012 85);
  --radius: 0.5rem;
  --ancho: 72rem;
  --ancho-angosto: 64rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: oklch(0.19 0.025 258);
    --foreground: oklch(0.95 0.008 85);
    --card: oklch(0.23 0.03 258);
    --primary: oklch(0.72 0.11 72);
    --primary-foreground: oklch(0.2 0.03 258);
    --secondary: oklch(0.28 0.03 258);
    --muted: oklch(0.28 0.03 258);
    --muted-foreground: oklch(0.72 0.02 258);
    /* Sobre fondo oscuro el bronce original da 7,3:1, así que acá no hace falta oscurecerlo. */
    --accent-texto: oklch(0.72 0.11 72);
    --accent-foreground: oklch(0.2 0.03 258);
    --border: oklch(1 0 0 / 12%);
  }
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: Fraunces, ui-serif, Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* Los iconos son de lucide.dev y van incrustados en el HTML. `flex:none` para que no los
   aplaste el texto de al lado, y heredan el color de quien los contiene. */
.ico { flex: none; vertical-align: middle; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .contenedor { padding: 0 1.5rem; } }
.angosto { max-width: var(--ancho-angosto); }

/* ---------------------------------------------------------------- cabecera */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--background) 85%, transparent);
  backdrop-filter: blur(12px);
}
.cabecera .contenedor {
  height: 4rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}
.marca { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.marca .sello {
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  border-radius: calc(var(--radius) * 0.8);
  background: var(--primary); color: var(--primary-foreground);
  font-family: Fraunces, serif; font-size: 1.1rem;
}
.marca .texto { display: flex; flex-direction: column; line-height: 1; }
.marca .titulo { font-family: Fraunces, serif; font-size: 1.125rem; font-weight: 600; }
.marca .bajada {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--muted-foreground); margin-top: 3px;
}
.marca .sello svg { display: block; }
.nav { display: none; gap: 0.25rem; }
.nav a {
  padding: 0.5rem 0.75rem; border-radius: calc(var(--radius) * 0.8);
  font-size: 0.875rem; font-weight: 500; text-decoration: none;
  color: var(--muted-foreground);
}
.nav a:hover { background: var(--muted); color: var(--foreground); }

/* Menú de celular: un <details>, sin JavaScript. El panel se despliega debajo de la barra.
   Arriba de 768px se esconde y aparece la navegación horizontal. */
.menu { position: relative; }
.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.5rem; width: 2.5rem; border-radius: calc(var(--radius) * 0.8);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--muted); }
.menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.menu > summary .ico:last-child,
.menu[open] > summary .ico:first-child { display: none; }
.menu[open] > summary .ico:last-child { display: block; }
.menu .panel {
  position: absolute; right: 0; top: calc(100% + 0.75rem);
  min-width: 15rem; padding: 0.5rem;
  border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.2);
  background: var(--card); box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.25);
}
.menu .panel .contenedor { padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.menu .panel a:not(.boton) {
  padding: 0.6rem 0.75rem; border-radius: calc(var(--radius) * 0.8);
  font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  color: var(--muted-foreground);
}
.menu .panel a:not(.boton):hover { background: var(--muted); color: var(--foreground); }
.menu .panel .boton { margin: 0.4rem 0 0; justify-content: center; }

.escritorio { display: none; }
@media (min-width: 768px) {
  .nav { display: flex; }
  .menu { display: none; }
  .escritorio { display: inline-flex; }
}

/* ------------------------------------------------------------------ migas */
.migas {
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--secondary) 40%, transparent);
  font-size: 0.875rem; color: var(--muted-foreground);
}
.migas .contenedor { display: flex; align-items: center; gap: 0.4rem; padding-block: 0.75rem; flex-wrap: wrap; }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--foreground); }
.migas .actual { font-weight: 500; color: var(--foreground); }
.migas .ico { opacity: 0.55; }

/* ------------------------------------------------------------------ tarjeta */
.tarjeta {
  border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.4);
  background: var(--card); overflow: hidden;
}
.tarjeta .cuerpo { padding: 1.5rem; }
.grilla { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .grilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grilla { grid-template-columns: repeat(3, 1fr); } }

.tarjeta {
  display: flex; flex-direction: column; height: 100%;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.tarjeta:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--accent) 60%, transparent);
  box-shadow: 0 10px 24px -12px color-mix(in oklch, var(--primary) 25%, transparent);
}
.tarjeta .figura { position: relative; aspect-ratio: 5 / 3; background: var(--secondary); overflow: hidden; }
.tarjeta .figura img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.tarjeta:hover .figura img { transform: scale(1.03); }

/* Sin foto no va un hueco: va un estado deliberado. 8 oficinas no tienen cobertura. */
.sinfoto {
  height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.4rem; color: var(--muted-foreground); font-size: 0.75rem;
}
.puntaje {
  position: absolute; right: 0.5rem; top: 0.5rem;
  display: flex; align-items: center; gap: 0.25rem;
  border-radius: calc(var(--radius) * 0.7); padding: 0.25rem 0.5rem;
  font-size: 0.75rem; font-weight: 600;
  background: color-mix(in oklch, var(--background) 90%, transparent);
  backdrop-filter: blur(6px); box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}
.puntaje .cuantas { font-weight: 400; color: var(--muted-foreground); }
/* La estrella va en bronce pleno: es un ícono, no texto, y el número de al lado ya lleva
   el contraste. Es como la pinta el diseño. */
.puntaje .ico { color: var(--accent); }

.tarjeta .cuerpo { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta h3 { font-size: 1.125rem; line-height: 1.35; }
.tarjeta h3 a { text-decoration: none; }
.tarjeta h3 a:hover { color: var(--accent-texto); }
.tarjeta .direccion { font-size: 0.875rem; color: var(--muted-foreground); margin: 0.25rem 0 0; }
.meta {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.75rem;
  font-size: 0.875rem; color: var(--muted-foreground);
}
.meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.meta svg { color: var(--accent); flex: none; }
.pie-tarjeta {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: 0.875rem;
}
.pie-tarjeta a { text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.pie-tarjeta .tel { font-weight: 500; }
.pie-tarjeta .tel:hover { color: var(--accent-texto); }
.pie-tarjeta .ver { font-weight: 600; color: var(--accent-texto); flex: none; }

/* Banner apaisado del frente, en la ficha de escribano */
.banner {
  position: relative; aspect-ratio: 16 / 6; background: var(--secondary);
  border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.4);
  overflow: hidden; margin-top: 2rem;
}
.banner img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ etiquetas */
.etiqueta {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border-radius: 999px; padding: 0.2rem 0.65rem;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--accent-texto);
  border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
  background: color-mix(in oklch, var(--accent) 10%, transparent);
}
.etiqueta.sobria {
  border-color: var(--border); background: var(--muted); color: var(--muted-foreground);
}

/* ------------------------------------------------------------------ ficha */
.ficha { display: grid; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 1024px) { .ficha { grid-template-columns: 1fr 20rem; align-items: start; } }
.ficha h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); }
.ficha .lugar {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.875rem; font-weight: 500; color: var(--accent-texto);
}

/* Volver al listado del que se vino. Google lo lee como enlace interno y el visitante
   que cae desde una búsqueda no queda sin salida. */
.volver {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.875rem; font-weight: 500; text-decoration: none;
  color: var(--muted-foreground);
}
.volver:hover { color: var(--foreground); }

/* Título con el distintivo al lado; si no hay distintivo se comporta igual. */
.encabezado {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 0.75rem; margin-top: 0.5rem;
}
.titulares {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-top: 0.75rem;
  font-size: 0.9375rem; color: var(--muted-foreground);
}
.titulares > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.titulares .ico { color: var(--accent); }
.titulares b { color: var(--foreground); font-weight: 600; }
.titulares .cuantas, .titulares .cp { color: var(--muted-foreground); }
.titulares a { color: var(--accent-texto); font-weight: 500; }

.bloque { margin-top: 1.5rem; }
.bloque h2 { font-size: 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.bloque h2 .ico { color: var(--accent); }

/* Encabezado partido de la tarjeta del mapa: el título a la izquierda, "Cómo llegar"
   a la derecha, con una línea que lo separa del mapa. */
.titular {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--border);
}
.enlace-ico {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.875rem; font-weight: 500; text-decoration: none;
  color: var(--accent-texto);
}
.enlace-ico:hover { opacity: 0.8; }

/* El mapa es un embebido de OpenStreetMap. `aspect-ratio` en el contenedor reserva el
   espacio antes de que cargue: sin eso la página salta y eso es CLS. */
.mapa { aspect-ratio: 16 / 9; background: var(--secondary); }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

.datos { margin: 1rem 0 0; padding: 0; }
.datos.con-linea { margin-top: 1.25rem; border-top: 1px solid var(--border); padding-top: 0.25rem; }
.datos > div {
  display: flex; gap: 0.75rem; padding: 0.75rem 0;
  border-top: 1px solid var(--border);
}
.datos > div:first-child { border-top: 0; }
.datos dt {
  font-size: 0.6875rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted-foreground);
}
.datos dd { margin: 0; font-size: 0.9375rem; }
.lateral { position: sticky; top: 5rem; }

/* Altura del diseño: 2rem, con el radio grande. */
.boton {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  width: 100%; height: 2rem; padding: 0 0.75rem;
  border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  background: var(--primary); color: var(--primary-foreground);
  border: 1px solid var(--primary); margin-bottom: 0.5rem;
}
.boton.secundario {
  background: transparent; color: var(--foreground); border-color: var(--border);
}
.boton.secundario:hover { background: var(--muted); }
.boton:hover { opacity: 0.92; }
/* Botón de barra: ancho al contenido, sin el margen de los apilados del lateral. */
.boton.compacto { width: auto; display: inline-flex; margin: 0; flex: none; }

/* Los del panel de contacto quedan más altos y alineados a la izquierda, a propósito: en
   celular son la acción principal de la ficha —llamar, WhatsApp, cómo llegar— y a 32px un
   dedo los erra. 2,5rem sigue por encima del mínimo de WCAG 2.5.8 con margen. */
.lateral .boton { height: 2.5rem; justify-content: flex-start; padding: 0 0.85rem; }

/* ------------------------------------------------------------------ listas */
.personas { list-style: none; margin: 1rem 0 0; padding: 0; }
.personas li { padding: 0.85rem 0; border-top: 1px solid var(--border); }
.personas li:first-child { border-top: 0; }
.personas .nombre { font-weight: 500; text-decoration: none; }
.personas .nombre:hover { color: var(--accent-texto); }
.personas .meta { font-size: 0.8125rem; color: var(--muted-foreground); margin-top: 0.25rem; }

/* Con vías de contacto: el nombre a la izquierda, teléfono y correo a la derecha.
   En pantalla angosta se apilan, que es donde más se usa el enlace de llamar. */
.personas.con-vias li {
  display: flex; flex-direction: column; gap: 0.5rem;
}
@media (min-width: 640px) {
  .personas.con-vias li { flex-direction: row; align-items: flex-start; justify-content: space-between; }
}
.personas .vias {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.875rem; flex: none;
}
.personas .vias a {
  display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none;
}
.personas .vias a:hover { color: var(--accent-texto); }
.personas .vias .ico { color: var(--muted-foreground); }
/* min-width:0 para que un nombre largo se corte en vez de empujar las vías de contacto
   fuera de la tarjeta. */
.personas .quien { min-width: 0; }

.columnas { columns: 2; column-gap: 1.5rem; list-style: none; padding: 0; margin: 1rem 0 0; }
@media (min-width: 768px) { .columnas { columns: 4; } }
.columnas li { break-inside: avoid; padding: 0.3rem 0; }
.columnas a { text-decoration: none; font-size: 0.9375rem; }
.columnas a:hover { color: var(--accent-texto); }
.columnas .cuenta { color: var(--muted-foreground); font-size: 0.8125rem; }

/* ------------------------------------------------------------------ portada */
/* Banda navy con la foto de fondo al 25% y un degradado que la funde hacia abajo, para que
   el texto blanco tenga contraste parejo sin depender de cómo quede el recorte. */
.hero {
  position: relative; overflow: hidden;
  background: var(--primary); color: var(--primary-foreground);
  padding: 4rem 0 3.5rem;
}
@media (min-width: 768px) { .hero { padding: 6rem 0 5rem; } }
.hero .fondo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.25;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--primary) 78%, transparent) 0%, var(--primary) 94%);
}
.hero > .contenedor { position: relative; z-index: 1; }
.hero .centro { max-width: 48rem; margin: 0 auto; text-align: center; }
.hero .pastilla {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: 999px; padding: 0.4rem 0.9rem;
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em;
  border: 1px solid color-mix(in oklch, var(--primary-foreground) 20%, transparent);
  background: color-mix(in oklch, var(--primary-foreground) 10%, transparent);
}
.hero .pastilla .ico { color: var(--accent); }
.hero h1 {
  font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 1.1; margin-top: 1.5rem;
  text-wrap: balance;
}
.hero p {
  font-size: 1.0625rem; line-height: 1.7; max-width: 42rem; margin: 1.25rem auto 0;
  color: color-mix(in oklch, var(--primary-foreground) 78%, transparent);
}
@media (min-width: 640px) { .hero p { font-size: 1.125rem; } }

/* Los números, centrados y en bronce sobre el navy. */
.numeros {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  max-width: 48rem; margin: 3rem auto 0; text-align: center;
}
.numeros > div { display: flex; flex-direction: column-reverse; }
.numeros dd {
  margin: 0; font-family: Fraunces, serif; font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.25rem); color: var(--accent);
}
.numeros dt {
  font-size: 0.8125rem;
  color: color-mix(in oklch, var(--primary-foreground) 72%, transparent);
}
@media (min-width: 640px) { .numeros dt { font-size: 0.875rem; } }

.seccion { padding: 4rem 0; border-top: 1px solid var(--border); }
@media (min-width: 768px) { .seccion { padding: 6rem 0; } }
/* Fondo apenas distinto y borde abajo: despega el bloque del resto y deja leer la portada
   por secciones en vez de como una tira continua. */
.seccion.tenue {
  background: color-mix(in oklch, var(--secondary) 40%, transparent);
  border-bottom: 1px solid var(--border);
}
.seccion > .contenedor > h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); margin-top: 0.5rem; }
.seccion .intro { color: var(--muted-foreground); margin-top: 0.75rem; max-width: 46rem; }

/* Buscador: caja blanca elevada, flotando sobre el navy del hero. */
.buscador {
  display: flex; flex-direction: column; gap: 0.5rem;
  max-width: 48rem; margin: 2.5rem auto 0; padding: 0.5rem;
  border-radius: calc(var(--radius) * 1.4);
  border: 1px solid color-mix(in oklch, var(--primary-foreground) 15%, transparent);
  background: var(--background);
  box-shadow: 0 24px 48px -20px rgb(0 0 0 / 0.45);
}
@media (min-width: 768px) { .buscador { flex-direction: row; } }
.buscador .campo { position: relative; flex: 1; display: flex; }
@media (min-width: 768px) { .buscador .campo.angosto { flex: 0 0 14rem; } }
.buscador .campo .ico {
  position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
  color: var(--muted-foreground); pointer-events: none;
}
.buscador input, .buscador select {
  width: 100%; height: 3rem; padding: 0 0.75rem 0 2.75rem;
  font: inherit; font-size: 0.9375rem;
  border: 0; border-radius: calc(var(--radius) * 0.8);
  background: transparent; color: var(--foreground); appearance: none;
}
.buscador input:focus-visible, .buscador select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -1px;
}
.buscador .boton {
  width: auto; height: 3rem; margin: 0; justify-content: center;
  padding-inline: 2rem; font: inherit; font-size: 0.9375rem; font-weight: 500;
  cursor: pointer; flex: none;
}

/* Resultados del buscador, debajo de la caja. */
#resultados {
  max-width: 48rem; margin: 0.75rem auto 0; padding: 0.5rem;
  border-radius: calc(var(--radius) * 1.4);
  background: var(--card); color: var(--foreground);
  box-shadow: 0 24px 48px -20px rgb(0 0 0 / 0.45); text-align: left;
}
#resultados ul { list-style: none; margin: 0; padding: 0; }
#resultados li + li { border-top: 1px solid var(--border); }
#resultados a {
  display: block; padding: 0.7rem 0.85rem; text-decoration: none;
  border-radius: calc(var(--radius) * 0.7);
}
#resultados a:hover { background: var(--muted); }
#resultados .que { font-weight: 500; }
#resultados .donde { font-size: 0.8125rem; color: var(--muted-foreground); }
#resultados .vacio, #resultados .mas {
  padding: 0.85rem; font-size: 0.875rem; color: var(--muted-foreground);
}

/* Barrios en tarjetas, no lista de texto. */
.rejilla-barrios {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem;
}
@media (min-width: 640px) { .rejilla-barrios { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .rejilla-barrios { grid-template-columns: repeat(4, 1fr); } }
.rejilla-barrios a {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 0.9rem; text-decoration: none;
  font-size: 0.9375rem; font-weight: 500;
  border: 1px solid var(--border); border-radius: calc(var(--radius) * 0.8);
  background: var(--card); transition: border-color .15s, background .15s;
}
.rejilla-barrios a:hover {
  border-color: color-mix(in oklch, var(--accent) 60%, transparent);
  background: color-mix(in oklch, var(--accent) 10%, transparent);
}
.rejilla-barrios a > span:first-child { flex: 1; }
.rejilla-barrios .cuenta { font-weight: 400; color: var(--muted-foreground); font-size: 0.8125rem; }
.rejilla-barrios .ico { color: var(--muted-foreground); transition: transform .15s; }
.rejilla-barrios a:hover .ico { transform: translateX(2px); color: var(--accent-texto); }

/* Convite a completar la ficha: tarjeta navy, mitad texto y mitad foto. */
.convite {
  display: grid; overflow: hidden; align-items: center;
  border-radius: calc(var(--radius) * 2.2);
  background: var(--primary); color: var(--primary-foreground);
}
@media (min-width: 768px) { .convite { grid-template-columns: 1fr 1fr; } }
.convite .texto { padding: 2.5rem; }
@media (min-width: 768px) { .convite .texto { padding: 3.5rem; } }
.convite h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); }
.convite p {
  margin-top: 1rem; line-height: 1.7;
  color: color-mix(in oklch, var(--primary-foreground) 78%, transparent);
}
.convite ul { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.convite li {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.4rem 0;
  font-size: 0.9375rem;
  color: color-mix(in oklch, var(--primary-foreground) 90%, transparent);
}
.convite .tilde {
  flex: none; margin-top: 0.15rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 999px;
  background: var(--accent); color: var(--accent-foreground);
}
.convite .acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.convite .ilustracion { display: none; align-self: stretch; }
@media (min-width: 768px) { .convite .ilustracion { display: block; position: relative; } }
.convite .ilustracion img { width: 100%; height: 100%; object-fit: cover; }
.convite .ilustracion::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--primary) 0%, transparent 55%);
}
.boton.claro { background: var(--background); color: var(--foreground); border-color: var(--background); }
.boton.contorno {
  background: transparent; color: var(--primary-foreground);
  border-color: color-mix(in oklch, var(--primary-foreground) 35%, transparent);
}

/* ------------------------------------------------------------------ pie */
/* Navy a todo el ancho, como el diseño. Sobre este fondo el bronce original ya da 7,3:1,
   así que acá no va el bronce oscurecido de los textos claros. */
.pie {
  margin-top: 4rem; padding: 3.5rem 0 0;
  background: var(--primary); color: var(--primary-foreground);
  font-size: 0.875rem;
}
.pie a { text-decoration: none; color: color-mix(in oklch, var(--primary-foreground) 72%, transparent); }
.pie a:hover { color: var(--primary-foreground); }
.pie .rejilla { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .pie .rejilla { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie .marca { gap: 0.625rem; }
.pie .marca .sello { background: var(--accent); color: var(--accent-foreground); }
.pie .marca .titulo { font-family: Fraunces, serif; font-size: 1.125rem; font-weight: 600; }
.pie p {
  margin: 1rem 0 0; max-width: 34rem; line-height: 1.7;
  color: color-mix(in oklch, var(--primary-foreground) 70%, transparent);
}
.pie h3 {
  font-family: inherit; font-size: 0.875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent);
}
.pie ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.pie li { padding: 0.3rem 0; }
.pie .dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.pie .linea-final {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between;
  margin-top: 3rem; padding: 1.5rem 0 2rem;
  border-top: 1px solid color-mix(in oklch, var(--primary-foreground) 15%, transparent);
  font-size: 0.8125rem;
}
.pie .linea-final p { margin: 0; max-width: 46rem; }

.aviso {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: calc(var(--radius) * 0.8); background: var(--muted);
  padding: 0.9rem 1.1rem; font-size: 0.875rem; color: var(--muted-foreground);
  margin-top: 1.5rem;
}

/* ------------------------------------------------------------------ acordeón */
.rotulo {
  font-size: 0.875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--accent-texto); margin: 0;
}
.faq { background: color-mix(in oklch, var(--secondary) 40%, transparent); }
.acordeon {
  margin-top: 2.5rem; border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 1.4); background: var(--card); overflow: hidden;
}
.acordeon details { border-top: 1px solid var(--border); }
.acordeon details:first-child { border-top: 0; }
.acordeon summary {
  cursor: pointer; list-style: none; padding: 1.15rem 1.35rem;
  font-weight: 500; display: flex; justify-content: space-between; gap: 1rem;
}
.acordeon summary::-webkit-details-marker { display: none; }
/* El +/− va en un círculo, como en el diseño: da un blanco de clic claro y marca que la
   fila se despliega. */
.acordeon summary::after {
  content: "+"; flex: none;
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: 999px;
  background: var(--secondary); color: var(--foreground);
  font-size: 1.125rem; line-height: 1;
}
.acordeon details[open] summary::after { content: "−"; }
.acordeon summary:hover { background: var(--muted); }
.acordeon summary:hover::after { background: var(--border); }
.acordeon summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.acordeon .respuesta {
  padding: 0 1.35rem 1.35rem; color: var(--muted-foreground); line-height: 1.7;
}

/* Banda de encabezado, con un fondo apenas distinto para separar la introducción del
   formulario que sigue. */
.banda {
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--secondary) 40%, transparent);
  padding: 2.5rem 0;
}
@media (min-width: 768px) { .banda { padding: 3.5rem 0; } }
.banda h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); }
.banda .intro { color: var(--muted-foreground); margin-top: 1rem; max-width: 40rem; }

/* ------------------------------------------------------------------ formulario */
.formulario .campo { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 1.15rem; }
.formulario label { font-size: 0.875rem; font-weight: 500; }
.formulario input, .formulario select, .formulario textarea {
  font: inherit; font-size: 0.9375rem; padding: 0.6rem 0.8rem;
  border: 1px solid var(--border); border-radius: calc(var(--radius) * 0.8);
  background: var(--background); color: var(--foreground); width: 100%;
}
.formulario textarea { resize: vertical; }
.formulario :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.formulario button { cursor: pointer; font: inherit; font-weight: 500; }
.obligatorio { color: var(--accent-texto); }
.pista { font-size: 0.8125rem; color: var(--muted-foreground); margin: 0.1rem 0 0; }

/* Texto para lectores de pantalla y buscadores, invisible en pantalla. Deja que el
   enlace diga "Ver Escribanía Comas" en vez de sólo "Ver", que no dice nada. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ horarios */
.horarios { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.9375rem; }
.horarios th, .horarios td { padding: 0.5rem 0; text-align: left; font-weight: 400; }
.horarios th { color: var(--muted-foreground); width: 8rem; }
.horarios tr { border-top: 1px solid var(--border); }
.horarios tr:first-child { border-top: 0; }
.horarios tr.hoy th, .horarios tr.hoy td { font-weight: 600; color: var(--foreground); }
.horarios tr.hoy th::after { content: " · hoy"; color: var(--accent-texto); font-weight: 500; }