@charset "utf-8";
/* ============================================================================
   SIMONELLI & ASOCIADOS — HOJA DE ESTILO DEL SITIO
   Dirección visual C — "Despacho contemporáneo" (elegida por el cliente).

   Criterio: navy dominante, no blanco. La transición entre bloques se hace por
   cambio de fondo, no por líneas divisorias. El bronce es quirúrgico: rótulos,
   filetes, botón Consultar y flechas; nunca como fondo de área.

   ÍNDICE
     01. Variables
     02. Base y tipografía
     03. Micro-tipografía (rótulos) y titulares
     04. Botones y enlaces de avance
     05. Cabecera y navegación
     06. Home · bloque 2 — perfil y retrato
     07. Home · bloque 3 — credenciales
     08. Home · bloque 4 — el eje del trabajo
     09. Home · bloque 5 — las dos áreas
     09 bis. Home · bloque 6 — la tira de clientes
     10. Artículos: rejilla de notas (clara, oscura y compacta)
     11. Primera consulta: vías y ficha
     12. Pie
     13. WhatsApp flotante
     14. Páginas internas: portada, departamento, franjas, rejillas, cita, cierre
     15. Página de artículo: cuerpo, firma, aviso
     16. Responsive

   Nota de especificidad, ya pagada una vez: `.nav a` (0-1-1) le gana a
   `.btn--oro` (0-1-0) y pintaría de gris el texto del botón sobre navy.
   Por eso TODA variante de botón se declara con doble clase: `.btn.btn--oro`.
   ========================================================================== */


/* ============================================================================
   01. VARIABLES
   ========================================================================== */
:root{
  /* paleta del canon — sin agregados */
  --navy:#0B1A2E; --navy2:#12233C; --navy3:#1B3352;
  --gold:#C8A24A; --gold-d:#9C7C2E; --gold-l:#E2C787;
  --slate:#45566B; --line:#E3E8ED; --bg:#F7F9FB;

  /* derivados de contraste (sólo oscurecen o aclaran los del canon) */
  --navy0:#071220;                 /* pie */
  --gold-ink:#7A5F1E;              /* bronce legible sobre fondo claro — 5.8:1 */
  --texto-osc:#A9BACD;             /* cuerpo sobre navy — 8.6:1 */
  --texto-osc2:#8698AE;            /* secundario sobre navy — 5.4:1 */
  --tinta:#2A3B50;                 /* cuerpo largo sobre fondo claro */
  --hair:rgba(200,162,74,.22);
  --hair2:rgba(169,186,205,.16);

  --display:"Archivo","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --texto:"IBM Plex Sans","Segoe UI",Arial,sans-serif;

  --pad:56px;
  --tope:1320px;
}


/* ============================================================================
   02. BASE Y TIPOGRAFÍA
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--navy); color:var(--texto-osc);
  font-family:var(--texto); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* height:auto es obligatorio: los <img> llevan los atributos width y height
   —para que el navegador reserve el espacio y la página no salte— y ese
   atributo de alto anula el aspect-ratio del CSS si no se lo neutraliza.
   Sin esto los retratos salen estirados al alto del original. */
img{max-width:100%; height:auto; display:block}
figure{margin:0}
a{color:inherit}

/* envoltorio de ancho máximo: todas las secciones alinean sobre él */
.env{max-width:var(--tope); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.env--angosto{max-width:900px}

/* foco visible en todo el sitio */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold); outline-offset:3px}


/* ============================================================================
   03. MICRO-TIPOGRAFÍA (RÓTULOS) Y TITULARES
   El rótulo en Archivo 700 a .24em es la firma del estudio. No se toca.
   ========================================================================== */
.rotulo{
  font-family:var(--display); font-weight:700; font-size:11.5px;
  letter-spacing:.24em; text-transform:uppercase; line-height:1.5;
  color:var(--gold); margin:0 0 22px;
}
.rotulo--claro{color:var(--gold-ink)}   /* variante para fondo claro */

h1,h2,h3,h4{font-family:var(--display); font-weight:600; letter-spacing:-.02em; margin:0; color:#fff}
h2{font-size:clamp(1.65rem,2.9vw,2.5rem); line-height:1.16}
h3{font-size:1.3rem; line-height:1.28}
p{margin:0 0 20px}
p:last-child{margin-bottom:0}


/* ============================================================================
   04. BOTONES Y ENLACES DE AVANCE
   Las variantes van SIEMPRE con doble clase (ver nota de especificidad).
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:700; font-size:12px;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  padding:14px 24px; border:0; cursor:pointer; transition:background .18s,color .18s;
}
.btn svg{width:16px; height:16px; flex:0 0 auto}
.btn.btn--oro{background:var(--gold); color:var(--navy)}
.btn.btn--oro:hover{background:var(--gold-l); color:var(--navy)}
.btn.btn--linea{background:transparent; color:var(--gold-l); box-shadow:inset 0 0 0 1px rgba(200,162,74,.5)}
.btn.btn--linea:hover{background:var(--gold); color:var(--navy); box-shadow:none}

/* enlace de avance: texto con filete bajo y flecha */
/* inline-block y no inline-flex: en pantalla angosta el flex mandaba la flecha
   sola al extremo derecho de la segunda línea. Así queda pegada al texto. */
.enlace{
  display:inline-block; margin-top:34px;
  font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:-.005em;
  color:var(--gold-l); text-decoration:none; padding-bottom:7px;
  border-bottom:1px solid rgba(200,162,74,.42);
}
.enlace span{margin-left:10px}
.enlace:hover{color:#fff; border-bottom-color:var(--gold)}
.enlace--claro{color:var(--gold-ink); border-bottom-color:rgba(122,95,30,.35)}
.enlace--claro:hover{color:var(--navy); border-bottom-color:var(--navy)}


/* ============================================================================
   05. CABECERA Y NAVEGACIÓN (bloque 1)
   ========================================================================== */
.cab{
  position:sticky; top:0; z-index:60;
  background:rgba(11,26,46,.94);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(200,162,74,.18);
}
.cab__int{display:flex; align-items:center; gap:34px; height:76px}
.marca{
  font-family:var(--display); font-weight:700; font-size:15px;
  letter-spacing:.22em; text-transform:uppercase; color:#fff;
  text-decoration:none; white-space:nowrap; flex:0 0 auto;
}
.marca em{font-style:normal; font-weight:500; color:var(--gold); letter-spacing:.18em}

.nav{display:flex; gap:30px; margin-left:auto}
.nav a{
  font-family:var(--display); font-size:13.5px; font-weight:500; letter-spacing:.03em;
  color:#C2CFDD; text-decoration:none; padding:6px 0; position:relative; white-space:nowrap;
}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .18s}
.nav a:hover{color:#fff}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

.cab .btn{flex:0 0 auto; padding:12px 20px}

.hamb{display:none; margin-left:auto; background:none; border:0; padding:10px; cursor:pointer}
.hamb span{display:block; width:22px; height:2px; background:#fff; margin:4px 0}


/* ============================================================================
   06. HOME · BLOQUE 2 — EL PERFIL Y EL RETRATO
   ========================================================================== */
.perfil{
  position:relative; background:var(--navy); overflow:hidden;
  padding:clamp(56px,7vw,104px) 0 clamp(64px,7vw,110px);
}
/* motivo de marca: retícula de columnas al 7 %, enmascarada. Textura, no filete */
.perfil::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(200,162,74,.07) 0 1px,transparent 1px 12.5%);
  mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
}
.perfil__int{position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.75fr); gap:clamp(40px,5vw,86px); align-items:start}
.perfil h1{font-size:clamp(2.5rem,5.1vw,4.15rem); line-height:1.02; letter-spacing:-.03em; margin:0 0 26px}
.lead{
  font-family:var(--display); font-weight:500; font-size:clamp(1.12rem,1.5vw,1.35rem);
  line-height:1.5; color:#DCE5EE; letter-spacing:-.01em;
  max-width:38ch; margin:0 0 36px;
}
.perfil__cuerpo{max-width:57ch; padding-top:36px; border-top:1px solid var(--hair)}
.perfil__cuerpo p{color:var(--texto-osc)}

/* El retrato no se funde, se asienta: el fondo crema de la foto no admite
   blend directo sobre navy. Viñeta interior de cuatro sombras + filete en L. */
.retrato{position:relative; align-self:start; margin:8px 0 0}
.retrato__caja{position:relative; overflow:hidden; background:var(--navy2)}
.retrato__caja img{
  width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 24%;
  filter:saturate(.84) contrast(1.05) brightness(.95);
}
.retrato__caja::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:
    inset 0 0 100px 30px rgba(11,26,46,.60),
    inset 0 -130px 80px -60px rgba(11,26,46,.94),
    inset 0 110px 70px -60px rgba(11,26,46,.78),
    inset -110px 0 80px -70px rgba(11,26,46,.82);
}
/* filete bronce en dos lados: presencia sin marco de cuadro */
.retrato__caja::before{content:""; position:absolute; z-index:2; left:0; top:0; width:34%; height:2px; background:var(--gold)}
.retrato__borde{position:absolute; z-index:2; left:0; top:0; bottom:0; width:2px; background:linear-gradient(180deg,var(--gold) 0%,rgba(200,162,74,0) 62%)}
.retrato__pie{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--hair);
  font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--texto-osc2);
}
.retrato__pie span{display:block; padding:6px 0 6px 22px; position:relative}
.retrato__pie span::before{content:""; position:absolute; left:0; top:12px; width:12px; height:1px; background:var(--gold)}


/* ============================================================================
   07. HOME · BLOQUE 3 — CREDENCIALES (primer cambio de fondo)
   Cinco columnas, sin adjetivos y sin verbos.
   ========================================================================== */
.cred{background:var(--bg); color:var(--navy); padding:44px 0}
.cred__int{display:grid; grid-template-columns:repeat(5,1fr); gap:0}
.cred__it{padding:6px 26px; border-left:1px solid var(--line)}
.cred__it:first-child{padding-left:0; border-left:0}
.cred__it:last-child{padding-right:0}
.cred__que{
  font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-ink); display:block; margin-bottom:9px;
}
.cred__dato{font-family:var(--display); font-weight:600; font-size:15.5px; line-height:1.35; color:var(--navy); letter-spacing:-.01em; display:block}
.cred__mas{font-family:var(--texto); font-weight:400; font-size:13.5px; color:var(--slate); display:block; margin-top:5px; letter-spacing:0}


/* ============================================================================
   08. HOME · BLOQUE 4 — EL EJE DEL TRABAJO
   No es tarjeta: es media pantalla ancha, asimétrica. La foto sangra al borde.
   ========================================================================== */
.eje{background:var(--navy2); display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.78fr)}
/* el texto arranca en la misma vertical que el .env de las demás secciones */
.eje__texto{
  padding:clamp(56px,6.5vw,104px) clamp(40px,4.4vw,72px) clamp(56px,6.5vw,104px)
          calc(var(--pad) + max(0px,(100vw - var(--tope))/2));
  justify-self:end; width:100%;
}
.eje__texto h2{max-width:19ch; margin-bottom:28px}
.eje__texto p{color:var(--texto-osc); max-width:60ch}
.eje__foto{position:relative; overflow:hidden; min-height:420px}
.eje__foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:38% 50%; filter:saturate(.78) contrast(1.04) brightness(.9)}
/* doble degradado: lateral para el empalme, superior para matar la pared clara */
.eje__foto::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(18,35,60,.72) 0%,rgba(18,35,60,.12) 26%,transparent 48%),
    linear-gradient(90deg,var(--navy2) 0%,rgba(18,35,60,.72) 30%,rgba(18,35,60,.2) 72%,rgba(18,35,60,.34) 100%);
}


/* ============================================================================
   09. HOME · BLOQUE 5 — LAS DOS ÁREAS
   Dos tarjetas idénticas en estructura: es lo que comunica que no hay un
   público principal y uno secundario.
   ========================================================================== */
.areas{background:var(--navy3); padding:clamp(60px,7vw,102px) 0}
.areas__enc{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,64px); align-items:end; margin-bottom:52px}
.areas__enc h2{max-width:14ch}
.areas__enc p{color:#B9C8D9; max-width:56ch; margin:0}
.areas__grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.tarjeta{
  background:var(--navy); padding:clamp(30px,3vw,44px);
  border-top:2px solid var(--gold); display:flex; flex-direction:column;
}
.tarjeta h3{margin-bottom:16px}
.tarjeta p{color:var(--texto-osc); font-size:16px; margin-bottom:30px}
.tarjeta__acc{margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px}
.tarjeta__acc .enlace{margin-top:0; font-size:14px}


/* ============================================================================
   09 bis. HOME · BLOQUE 6 — LA TIRA DE CLIENTES
   Va sobre navy pleno, entre las áreas (navy3) y la banda clara de artículos:
   el cambio de fondo es lo que separa, como en todo el sitio.

   Las razones sociales usan la tipografía de la marca y el MISMO filete
   vertical de la banda de credenciales (bloque 3) — porque es exactamente eso:
   una credencial. No son logos (no existen) ni tarjetas.

   El ancho está fijado a cinco columnas a propósito, que son los cinco
   clientes de la lista CLIENTES del generador. Si esa lista cambia de largo,
   se cambia acá.
   ========================================================================== */
.clientes{background:var(--navy); padding:clamp(56px,6.4vw,94px) 0}
.clientes__enc{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,64px); align-items:end; margin-bottom:44px}
.clientes__enc h2{max-width:15ch}
.clientes__enc p{color:var(--texto-osc); max-width:56ch; margin:0}

/* Las columnas NO son iguales: se reparten en proporción al largo de cada
   razón social. Con cinco tracks de 1fr, «Ruta 4 Carrocería y Pintura S.R.L.»
   —el doble de largo que el más corto— se parte en dos renglones y desalinea
   la tira entera. Estas proporciones están medidas sobre los cinco nombres de
   la lista CLIENTES: si la lista cambia, se vuelven a medir. */
.clientes__tira{
  list-style:none; margin:0; display:grid;
  grid-template-columns:.88fr 1.06fr 1fr 1.06fr 1.5fr;
  border-top:1px solid var(--hair); padding:30px 0 0;
}
.clientes__tira li{
  padding:2px 22px; border-left:1px solid var(--hair2);
  font-family:var(--display); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(.98rem,1.12vw,1.14rem); line-height:1.34; color:#fff;
}
.clientes__tira li:first-child{padding-left:0; border-left:0}
.clientes__tira li:last-child{padding-right:0}


/* ============================================================================
   10. ARTÍCULOS: REJILLA DE NOTAS
   Versión clara (home, índice, pie de las áreas) y versión oscura
   ("seguir leyendo" al pie de cada nota, para no encadenar dos bandas claras).
   ========================================================================== */
.notas{background:var(--bg); color:var(--navy); padding:clamp(60px,7vw,100px) 0}
.notas__enc{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,64px); align-items:end; margin-bottom:48px}
/* sin bajada no hay segunda columna: el título usa todo el ancho que necesita */
.notas__enc--solo{display:block}
.notas__enc--solo h2{max-width:30ch}
.notas h2{color:var(--navy); max-width:16ch}
.notas__enc p{color:var(--slate); max-width:58ch; margin:0}

.notas__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line)}
/* con una sola nota no hay filete entre tarjetas que dibujar: el fondo de la
   rejilla dejaría un rectángulo gris vacío al costado. La tarjeta se sostiene
   sola con su borde. */
.notas__grid--1{grid-template-columns:minmax(0,620px); background:none; max-width:620px}
.notas__grid--1 .nota{border:1px solid var(--line); border-top:2px solid var(--gold)}
.notas--osc .notas__grid--1 .nota{border-color:var(--hair2); border-top-color:var(--gold)}
.notas__grid--2{grid-template-columns:repeat(2,1fr)}
.notas__grid--4{grid-template-columns:repeat(2,1fr)}

.nota{background:#fff; padding:32px 28px 30px; display:flex; flex-direction:column; text-decoration:none; transition:background .18s}
.nota:hover{background:#FCFDFE}
.nota__cat{font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:18px}
.nota h3{color:var(--navy); font-size:1.16rem; line-height:1.3; margin-bottom:14px}
.nota p{color:var(--slate); font-size:14.5px; line-height:1.6; margin:0}
/* margin-top:auto para que el "Leer la nota" quede al pie de la tarjeta y las
   tres de la home alineen aunque las bajadas midan distinto */
.nota__ir{margin-top:auto; padding-top:22px; font-family:var(--display); font-weight:600; font-size:13px; color:var(--gold-ink)}
.notas__pie{margin-top:40px}

/* — versión compacta, sólo la home —
   Los artículos bajaron de jerarquía: salieron del menú y el bloque pasó a ser
   el último antes de la primera consulta. Achicar la banda es lo que evita que
   compita con las áreas y con la tira de clientes, que están arriba. */
.notas--min{padding:clamp(46px,4.8vw,68px) 0}
.notas--min .notas__enc{margin-bottom:30px}
.notas--min h2{font-size:clamp(1.22rem,1.75vw,1.52rem); line-height:1.24; max-width:36ch}
.notas--min .rotulo{margin-bottom:16px}
.notas--min .nota{padding:24px 22px 22px}
.notas--min .nota__cat{margin-bottom:13px}
.notas--min .nota h3{font-size:1.02rem; line-height:1.32; margin-bottom:10px}
.notas--min .nota p{font-size:13.5px; line-height:1.58}
.notas--min .nota__ir{padding-top:18px; font-size:12px}
.notas--min .notas__pie{margin-top:30px}

/* — versión oscura, para el pie de una nota — */
.notas--osc{background:var(--navy2); color:var(--texto-osc)}
.notas--osc h2{color:#fff}
.notas--osc .rotulo{color:var(--gold)}
.notas--osc .notas__enc p{color:var(--texto-osc)}
.notas--osc .notas__grid{background:var(--hair2)}
.notas--osc .nota{background:var(--navy)}
.notas--osc .nota:hover{background:var(--navy3)}
.notas--osc .nota__cat{color:var(--gold)}
.notas--osc .nota h3{color:#fff}
.notas--osc .nota p{color:var(--texto-osc)}
.notas--osc .nota__ir{color:var(--gold-l)}


/* ============================================================================
   11. PRIMERA CONSULTA: VÍAS Y FICHA (bloque 7)
   ========================================================================== */
.consulta{background:var(--navy); padding:clamp(60px,7vw,102px) 0; position:relative}
.consulta__int{display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(36px,5vw,80px); align-items:start}
.consulta h2{margin-bottom:24px}
.consulta__txt p{color:var(--texto-osc); max-width:52ch; margin-bottom:38px}

.vias{border-top:1px solid var(--hair2)}
.via{
  display:flex; align-items:center; gap:16px; padding:18px 0;
  border-bottom:1px solid var(--hair2); text-decoration:none; transition:padding-left .18s;
}
.via:hover{padding-left:8px}
.via__ic{width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; color:var(--gold); box-shadow:inset 0 0 0 1px rgba(200,162,74,.32)}
.via__ic svg{width:17px; height:17px}
.via__que{font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--texto-osc2); display:block; margin-bottom:3px}
.via__dato{font-family:var(--display); font-weight:600; font-size:16px; color:#fff; letter-spacing:-.005em; display:block; overflow-wrap:anywhere}

.ficha{background:var(--navy2); padding:clamp(28px,3vw,40px); border-top:2px solid var(--gold)}
.ficha dl{margin:0}
.ficha dt{font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:26px 0 12px}
.ficha dt:first-child{margin-top:0}
.ficha dd{margin:0 0 10px; font-size:15px; line-height:1.6; color:var(--texto-osc)}
.ficha dd:last-child{margin-bottom:0}
.ficha strong{color:#fff; font-weight:600}


/* ============================================================================
   12. PIE (bloque 8)
   El cargo de Delegado no se repite acá: va una sola vez, en credenciales.
   ========================================================================== */
.pie{background:var(--navy0); padding:clamp(52px,6vw,80px) 0 34px; position:relative; overflow:hidden}
.pie::before{content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,rgba(200,162,74,.06) 0 1px,transparent 1px 12.5%)}
.pie__int{position:relative}
.pie__grid{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,56px); padding-bottom:44px; border-bottom:1px solid rgba(169,186,205,.14)}
.pie__marca{font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:#fff; margin-bottom:16px}
.pie__marca em{font-style:normal; font-weight:500; color:var(--gold); letter-spacing:.18em}
.pie__grid p{font-size:14.5px; color:var(--texto-osc2); max-width:38ch; margin-bottom:22px}
.pie h4{font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 16px}
.pie__grid a{display:block; font-size:14.5px; color:var(--texto-osc); text-decoration:none; padding:5px 0; overflow-wrap:anywhere}
.pie__grid a:hover{color:#fff}
/* Las redes del estudio: rótulo propio y cajas de bronce. Sin el rótulo son
   tres íconos sueltos abajo de un párrafo; con él son un bloque.
   La doble clase es obligatoria: `.pie__grid p` (0-1-1) le ganaría en
   especificidad a `.redes__que` a secas y lo pintaría como texto de columna. */
.pie__grid .redes__que{
  font-family:var(--display); font-weight:700; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin:0 0 13px; max-width:none;
}
.redes{display:flex; gap:10px}
.redes a{width:38px; height:38px; display:grid; place-items:center; color:var(--gold-l); box-shadow:inset 0 0 0 1px rgba(200,162,74,.34); padding:0}
.redes a:hover{color:var(--navy); background:var(--gold); box-shadow:none}
.redes svg{width:17px; height:17px}
.pie__legal{display:flex; flex-wrap:wrap; gap:6px 34px; padding-top:26px; font-size:12.5px; line-height:1.6; color:#75879C}


/* ============================================================================
   13. WHATSAPP FLOTANTE — va en todas las páginas, sin excepción
   ========================================================================== */
.wa{
  position:fixed; right:22px; bottom:22px; z-index:70;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--gold); color:var(--navy); text-decoration:none;
  padding:13px 20px; font-family:var(--display); font-weight:700;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  box-shadow:0 12px 30px rgba(0,0,0,.42);
}
.wa svg{width:18px; height:18px}
.wa:hover{background:var(--gold-l); color:var(--navy)}


/* ============================================================================
   14. PÁGINAS INTERNAS
   Mismo sistema, otro ritmo: portada navy · franjas navy2/navy3 · una banda
   clara de cita · cierre con el WhatsApp de la materia · artículos.
   ========================================================================== */

/* --- portada de página interna --- */
.port{position:relative; background:var(--navy); overflow:hidden; padding:clamp(52px,6.5vw,96px) 0 clamp(48px,6vw,84px)}
.port::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(200,162,74,.07) 0 1px,transparent 1px 12.5%);
  mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,transparent 100%);
}
.port__int{position:relative}
.port h1{font-size:clamp(2rem,4vw,3.3rem); line-height:1.06; letter-spacing:-.03em; margin:0 0 26px; max-width:22ch}
.port__bajada{
  font-family:var(--display); font-weight:500; font-size:clamp(1.05rem,1.35vw,1.24rem);
  line-height:1.55; color:#DCE5EE; letter-spacing:-.01em; max-width:58ch; margin:0 0 34px;
}
.port__acc{display:flex; flex-wrap:wrap; gap:16px; margin-top:6px}
.port__meta{
  display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:34px; padding-top:22px;
  border-top:1px solid var(--hair);
  font-family:var(--display); font-weight:700; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--texto-osc2);
}
/* portada a dos columnas: sólo compliance.html lleva la vertical del Dr. */
.port--foto .port__int{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.6fr); gap:clamp(36px,5vw,72px); align-items:center}
.port__foto{position:relative}
.port__foto img{width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 30%; filter:saturate(.82) contrast(1.04) brightness(.9)}
.port__foto::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:
    inset 0 0 90px 26px rgba(11,26,46,.52),
    inset 0 -120px 80px -60px rgba(11,26,46,.92),
    inset 0 110px 70px -60px rgba(11,26,46,.72),
    inset 110px 0 80px -70px rgba(11,26,46,.8);
}
.port__foto::before{content:""; position:absolute; z-index:2; right:0; top:0; width:34%; height:2px; background:var(--gold)}

/* --- el departamento: quién lleva el área ---
   Va inmediatamente después de la portada de siniestros y de riesgos del
   trabajo. Es el bloque que corrige la lectura de «abogado suelto que atiende
   caso por caso»: el trabajo lo lleva un departamento del estudio.
   Se lo distingue por el escalón de fondo —es la banda más oscura de la
   página, navy0, la del pie— y por el filete de bronce, no por una caja. */
.depto{background:var(--navy0); padding:clamp(46px,5.2vw,78px) 0; position:relative; overflow:hidden}
.depto::before{content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,rgba(200,162,74,.06) 0 1px,transparent 1px 12.5%)}
.depto__int{
  position:relative; display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(24px,4vw,64px);
  align-items:start; border-top:2px solid var(--gold); padding-top:clamp(28px,2.9vw,40px);
}
.depto h2{max-width:15ch; font-size:clamp(1.5rem,2.4vw,2.1rem)}
.depto p{color:var(--texto-osc); max-width:62ch}
.depto strong{color:#fff; font-weight:600}

/* --- franjas de contenido --- */
.franja{background:var(--navy2); padding:clamp(56px,6.5vw,96px) 0}
.franja--navy3{background:var(--navy3)}
.franja--navy{background:var(--navy)}
.cabeza{margin-bottom:44px}
.cabeza h2{margin-bottom:22px; max-width:26ch}
.cabeza p{color:var(--texto-osc); max-width:72ch}
.cabeza--pegada{margin-bottom:32px}
/* variante a dos columnas —título a la izquierda, texto a la derecha—: es el
   mismo reparto de los bloques 5 y 6 de la home. Sin ella el texto queda todo
   en la mitad izquierda y la derecha de la franja se ve vacía. */
.cabeza--dos{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(24px,4vw,64px); align-items:start}
.cabeza--dos h2{margin-bottom:0; max-width:18ch}
.cabeza--dos p{max-width:62ch}

/* --- rejillas de fichas de materia --- */
.rejilla{display:grid; gap:24px}
.rejilla--2{grid-template-columns:repeat(2,1fr)}
.rejilla--3{grid-template-columns:repeat(3,1fr)}
.ficha-m{background:var(--navy); padding:clamp(26px,2.6vw,36px); border-top:2px solid var(--gold)}
.ficha-m h3{margin-bottom:14px; font-size:1.18rem}
.ficha-m p{color:var(--texto-osc); font-size:15.5px}
.ficha-m ul{list-style:none; margin:0; padding:0}
.ficha-m p + ul{margin-top:12px}
.ficha-m li{position:relative; padding:7px 0 7px 22px; font-size:15.5px; line-height:1.55; color:var(--texto-osc); border-bottom:1px solid var(--hair2)}
.ficha-m li:last-child{border-bottom:0}
.ficha-m li::before{content:""; position:absolute; left:0; top:16px; width:11px; height:1px; background:var(--gold)}

/* --- caja de advertencia sobre fondo oscuro --- */
.caja-osc{margin-top:32px; background:var(--navy); border-left:2px solid var(--gold); padding:clamp(24px,2.4vw,32px)}
.caja-osc p{color:var(--texto-osc); margin:0}
.caja-osc strong{color:#fff; font-weight:600}

/* --- banda clara de cita: el respiro entre dos franjas navy --- */
.cita{background:var(--bg); color:var(--navy); padding:clamp(56px,6.5vw,92px) 0}
.cita__frase{
  font-family:var(--display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1.2; color:var(--navy);
  max-width:26ch; margin:0 0 26px;
}
.cita__texto{color:var(--tinta); max-width:66ch; margin:0}

/* --- cierre de página: el WhatsApp de la materia --- */
.cierre{background:var(--navy2); padding:clamp(52px,6vw,86px) 0}
.cierre h2{margin-bottom:22px; max-width:24ch}
.cierre p{color:var(--texto-osc); max-width:66ch; margin-bottom:34px}


/* ============================================================================
   15. PÁGINA DE ARTÍCULO
   El cuerpo largo va sobre fondo claro: es el único lugar del sitio donde se
   leen mil palabras seguidas.
   ========================================================================== */
.articulo{background:var(--bg); color:var(--tinta); padding:clamp(56px,6.5vw,92px) 0}
.articulo__cuerpo{font-size:17.5px; line-height:1.75}
.articulo__cuerpo h2{
  color:var(--navy); font-size:clamp(1.4rem,2.2vw,1.85rem); line-height:1.2;
  margin:52px 0 20px; padding-top:26px; border-top:1px solid var(--line);
}
.articulo__cuerpo > h2:first-child{margin-top:0; padding-top:0; border-top:0}
.articulo__cuerpo h3{color:var(--navy); font-size:1.18rem; margin:34px 0 14px}
.articulo__cuerpo p{color:var(--tinta); margin:0 0 22px}
.articulo__cuerpo strong{color:var(--navy); font-weight:600}
.articulo__cuerpo ul{list-style:none; margin:0 0 24px; padding:0}
.articulo__cuerpo li{position:relative; padding:6px 0 6px 24px; color:var(--tinta)}
.articulo__cuerpo li::before{content:""; position:absolute; left:0; top:17px; width:12px; height:1px; background:var(--gold-ink)}
.articulo__cuerpo blockquote{margin:34px 0; padding:4px 0 4px 26px; border-left:2px solid var(--gold)}
.articulo__cuerpo blockquote p{
  font-family:var(--display); font-weight:500; font-size:clamp(1.15rem,1.7vw,1.35rem);
  line-height:1.4; letter-spacing:-.015em; color:var(--navy); margin:0;
}
.articulo__cuerpo .caja{background:#fff; border-top:2px solid var(--gold); padding:clamp(24px,2.4vw,32px); margin:34px 0}
.articulo__cuerpo .caja p:last-child{margin-bottom:0}

/* firma del autor al pie de la nota */
.firma{
  display:flex; gap:20px; align-items:flex-start; margin-top:52px;
  background:#fff; border-top:2px solid var(--gold); padding:28px;
}
.firma__sello{
  flex:0 0 auto; width:52px; height:52px; display:grid; place-items:center;
  background:var(--navy); color:var(--gold);
  font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.1em;
}
.firma__texto{font-size:14.5px; line-height:1.65; color:var(--slate)}
.firma__texto strong{color:var(--navy); font-weight:600}
.firma__texto a{color:var(--gold-ink); text-decoration:none; border-bottom:1px solid rgba(122,95,30,.35)}
.firma__texto a:hover{color:var(--navy); border-bottom-color:var(--navy)}

.aviso{margin-top:28px; font-size:13px; line-height:1.65; color:var(--slate)}


/* ============================================================================
   16. RESPONSIVE
   Verificado con sonda de scrollWidth a 1440, 1280, 1100, 1024, 980, 900, 860,
   820, 760, 700, 600, 480, 390, 360 y 320 px, en las siete plantillas: sin
   desbordes y sin scroll horizontal. El menú entra en una línea en todo el
   tramo en que se muestra desplegado.
   ========================================================================== */
@media (max-width:1080px){
  :root{--pad:36px}
  .nav{gap:20px}
  .nav a{font-size:12.5px}
  .cred__int{grid-template-columns:repeat(3,1fr); row-gap:26px}
  .cred__it{border-left:1px solid var(--line)}
  .cred__it:nth-child(3n+1){padding-left:0; border-left:0}
  .notas__grid{grid-template-columns:1fr 1fr}
  .rejilla--3{grid-template-columns:1fr 1fr}
}
/* La tira de clientes rompe antes que el resto: cinco razones sociales en una
   línea dejan de entrar bastante por encima de los 1080 px del resto del
   sitio. Por eso tiene su propio corte. */
@media (max-width:1200px){
  .clientes__tira{grid-template-columns:repeat(3,1fr); row-gap:26px}
  .clientes__tira li{padding:2px 22px}
  .clientes__tira li:nth-child(3n+1){padding-left:0; border-left:0}
  .clientes__tira li:last-child{padding-right:22px}
}
@media (max-width:920px){
  .perfil__int{grid-template-columns:1fr}
  .retrato{order:-1; max-width:440px; margin:0 0 12px}
  /* el pie del retrato quedaría entre la foto y el nombre: se cae en angosto */
  .retrato__pie{display:none}
  .lead{max-width:none}
  .eje{grid-template-columns:1fr}
  .eje__foto{min-height:300px; order:-1}
  .eje__foto::after{background:linear-gradient(180deg,rgba(18,35,60,.28) 0%,rgba(18,35,60,.35) 55%,var(--navy2) 100%)}
  .eje__texto{padding:clamp(44px,6vw,72px) var(--pad); justify-self:stretch}
  .areas__enc,.notas__enc,.consulta__int,.cabeza--dos,.clientes__enc,.depto__int{grid-template-columns:1fr; align-items:start}
  .cabeza--dos h2{margin-bottom:22px; max-width:26ch}
  .clientes__enc h2,.depto h2{margin-bottom:22px; max-width:26ch}
  .areas__grid{grid-template-columns:1fr}
  .pie__grid{grid-template-columns:1fr 1fr; gap:34px}
  .port--foto .port__int{grid-template-columns:1fr}
  .port__foto{order:-1; max-width:360px; margin-bottom:8px}
  .rejilla--2,.rejilla--3{grid-template-columns:1fr}
  .notas__grid--4{grid-template-columns:1fr 1fr}
}
/* El menú plegado arranca a los 980 px, no a los 720.
   Medido: marca + los cuatro ítems + el botón Consultar necesitan ~950 px de
   fila. Con el corte en 720, entre esos 720 y los 950 la fila no entraba y el
   botón Consultar se salía del viewport — invisible por el overflow-x:hidden
   del body, pero cortado igual. Es la franja de la tablet en vertical.
   Sólo se pliega la navegación: la marca y el botón conservan su tamaño hasta
   los 720, que es donde de verdad falta ancho. */
@media (max-width:980px){
  .hamb{display:block}
  .nav{
    display:none; position:absolute; left:0; right:0; top:76px;
    flex-direction:column; gap:0; background:var(--navy);
    border-bottom:1px solid rgba(200,162,74,.2); padding:8px var(--pad) 18px;
  }
  .nav.abierta{display:flex}
  .nav a{padding:13px 0; font-size:15px; border-bottom:1px solid rgba(169,186,205,.1)}
  .cab__int{gap:18px}
}
@media (max-width:720px){
  :root{--pad:24px}
  body{font-size:16px}
  .cab .btn{margin-left:10px; padding:11px 14px; font-size:10.5px; letter-spacing:.14em}
  .cab .btn span{display:none}
  .cab__int{gap:0}
  .marca{font-size:12.5px; letter-spacing:.18em}
  .cred__int{grid-template-columns:1fr; row-gap:0}
  .cred__it{padding:16px 0; border-left:0; border-top:1px solid var(--line)}
  .cred__it:first-child{border-top:0; padding-top:0}
  /* en celular la tira se lee como registro: un nombre por renglón, con el
     filete horizontal. Las razones sociales largas no se parten al medio. */
  .clientes__tira{grid-template-columns:1fr; row-gap:0}
  .clientes__tira li{padding:14px 0; border-left:0; border-top:1px solid var(--hair2)}
  .clientes__tira li:first-child{border-top:0; padding-top:0}
  .clientes__tira li:last-child{padding-right:0}
  .notas__grid,.notas__grid--1,.notas__grid--2,.notas__grid--4{grid-template-columns:1fr}
  .pie__grid{grid-template-columns:1fr; gap:30px}
  .pie__legal{flex-direction:column; gap:8px}
  .wa{right:14px; bottom:14px; padding:12px 16px}
  .pie{padding-bottom:96px}   /* el botón flotante no tapa la línea legal */
  .retrato{max-width:none}
  .port__foto{max-width:none}
  .port h1,.port__bajada{max-width:none}
  .tarjeta__acc{flex-direction:column; align-items:flex-start; gap:16px}
  .tarjeta__acc .btn{width:100%; justify-content:center}
  .port__acc .btn,.cierre .btn{width:100%; justify-content:center}
  .firma{flex-direction:column; gap:16px}
}
/* Los teléfonos chicos de verdad (320 px). Sin este corte la fila de la
   cabecera —marca + hamburguesa + Consultar— se pasa seis píxeles del
   viewport: no se ve el scroll por el overflow-x:hidden del body, pero el
   botón queda cortado contra el borde. */
@media (max-width:360px){
  :root{--pad:16px}
  .marca{font-size:11px; letter-spacing:.14em}
  .hamb{padding:10px 6px}
  .cab .btn{margin-left:6px; padding:11px 12px}
}