/* ADVOCO Abogados · capa de marca sobre la propuesta A (9-nov-2026)
   Fuente: «ADVOCO Abogados - Identidad y logos finales/04 Identidad y storytelling» (manual versión 2).
   Se carga al final en todas las páginas de advoco/. No modifica estilos.css ni comun/diseno/*.css,
   que siguen sirviendo a las propuestas A, B y C con la marca COBA.

   Reglas del manual que aplica:
   - Color: negro #000000, blanco #FFFFFF y oro ADVOCO #BD9439, plano y sin degradados.
   - Tipografía: Source Sans 3 para textos. Constantia vive solo en el logotipo (en curvas).
     Los acentos en serif usan Source Serif 4, de la misma familia que Source Sans 3.
   - Tamaños mínimos en pantalla: logotipo sin descriptor 140 px, con ABOGADOS 280 px,
     imagotipo horizontal 480 px. Por eso el encabezado lleva el logotipo y el pie el imagotipo. */

:root {
  --advoco-negro: #000000;
  --advoco-blanco: #ffffff;
  --advoco-oro: #BD9439;
  --advoco-oro-texto: #765a20; /* el oro para texto sobre fondo claro (5.9:1 sobre blanco) */

  --tinta: #000000;
  --marino: #000000;
  --marino-osc: #000000;
  --acero: var(--advoco-oro);
  --f-grotesca: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --f-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* ── Tipografía: Source Sans 3 es más angosta que la anterior; se afloja el espaciado negativo ── */
h1, h2, h3, h4 { letter-spacing: -0.015em; }
.titular { letter-spacing: -0.028em; line-height: 0.94; }
.seccion h2, .equipo-caja h2 { letter-spacing: -0.022em; line-height: 1.02; }
.gigante { letter-spacing: -0.035em !important; }
.bloque-marino h2, .llamado h2 { letter-spacing: -0.028em; line-height: 0.94; }
.dato-cifra b { letter-spacing: -0.03em; }
.caja-titulo, .lugar-texto h3 { letter-spacing: -0.015em; }
@media (max-width: 900px) { .menu > a { letter-spacing: -0.02em; } }

/* ── Encabezado: logotipo sin descriptor (mínimo 140 px visibles; el lienzo trae 12 % de margen) ── */
.logo-bloque, .cab.compacta .logo-bloque { padding: 0 12px; background: var(--advoco-negro); }
.logo-bloque img { height: 49px; width: auto; }
.cab.compacta .logo-bloque img { height: 43px; }
@media (max-width: 760px) {
  .logo-bloque, .cab.compacta .logo-bloque { padding: 0 4px; }
  .logo-bloque img, .cab.compacta .logo-bloque img { height: 42px; }
}

/* ── Pie: imagotipo horizontal a 520 px (485 visibles); en celular, logotipo con ABOGADOS a 320 px ── */
.pie-grid { grid-template-columns: repeat(3, 1fr); }
.pie-grid > div:first-child { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 44px; }
.logo-pie { padding: 0; background: none; margin-left: -17px; }
.logo-pie img { display: block; width: 520px; height: auto; }
.pie-lema { margin-top: 0; max-width: 440px; font-size: 16px; line-height: 1.55; }
.pie-firma { display: block; margin-top: 10px; font: 400 italic 19px/1.3 var(--f-serif); color: var(--advoco-oro); }
@media (max-width: 640px) {
  .pie-grid { grid-template-columns: 1fr; }
  .logo-pie { margin-left: -16px; }
  .logo-pie img { width: 320px; }
}

/* ── Oro plano en detalles que usaban el oro claro del degradado de COBA ── */
.arte-leyenda, .cobertura-diagrama > span { color: var(--advoco-oro); }
.compromiso em { background: linear-gradient(transparent 62%, rgba(189, 148, 57, 0.28) 62%); color: var(--advoco-negro); }

/* ── Firma de marca bajo «Cómo trabajamos» (antes era el espacio del eslogan por definir) ── */
.firma-marca { margin-top: 26px; display: flex; align-items: center; gap: 16px; font: 400 italic clamp(20px, 2.1vw, 27px)/1.25 var(--f-serif); color: var(--advoco-oro-texto); }
.firma-marca::before { content: ""; flex: none; width: 44px; height: 1.5px; background: var(--advoco-oro); }

/* ── «Nuestro nombre»: historia del nombre y manifiesto, dentro de la sección del despacho ── */
.nombre-advoco { background: var(--advoco-negro); color: #d9d4ca; padding: clamp(56px, 7vw, 96px) 0; }
.nombre-advoco .envoltura { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.nombre-advoco .ojo { color: var(--advoco-oro); }
.nombre-advoco h2 { color: #fff; font-size: clamp(34px, 4vw, 54px); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 20px; }
.nombre-advoco h2 em { font: 400 italic 1em/1.1 var(--f-serif); color: var(--advoco-oro); letter-spacing: -0.01em; }
.nombre-advoco p { font-size: 18px; line-height: 1.65; max-width: 620px; }
.nombre-advoco p + p { margin-top: 14px; }
.manifiesto { border-left: 1.5px solid var(--advoco-oro); padding-left: clamp(20px, 2.4vw, 34px); }
.manifiesto h3 { font-size: 12.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--advoco-oro); margin-bottom: 16px; }
.manifiesto ul { display: grid; gap: 9px; }
.manifiesto li { font: 400 clamp(19px, 1.7vw, 23px)/1.35 var(--f-serif); color: #fff; }
@media (max-width: 900px) { .nombre-advoco .envoltura { grid-template-columns: 1fr; } }

/* ── Páginas de materia, cobertura y aviso de privacidad ── */
[data-direccion="a"] { --d-ink: #000000; --d-gold: var(--advoco-oro-texto); }
.detail-header img { width: 180px; height: auto; }
.privacy-brand { background: var(--advoco-negro); }
.privacy-brand img { width: 180px; height: auto; }
[data-direccion="a"] h1, [data-direccion="a"] h2 { font-family: var(--f-grotesca); }
[data-direccion="a"] .detail-hero h1 { letter-spacing: -0.025em; }
[data-direccion="a"] .detail-section h2 { letter-spacing: -0.02em; }
@media (max-width: 760px) { .detail-header img, .privacy-brand img { width: 162px; } }

/* Botones y detalles de las páginas internas: oro plano en lugar del dorado claro de COBA */
.detail-button { background: var(--advoco-oro); color: #000; }
.detail-button:hover { background: var(--advoco-oro); filter: brightness(1.1); }
.skip-detail { background: var(--advoco-oro); color: #000; }
.detail-footer .detail-kicker { color: var(--advoco-oro); }
.detail-header :focus-visible, .detail-footer :focus-visible { outline-color: var(--advoco-oro); }
.detail-header, .detail-footer { background-color: var(--advoco-negro); }
body[data-direccion="a"] { font-family: var(--f-grotesca); }
