@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
   ARRIAGA ANDRADE — hoja de estilo única
   Escrita primero para móvil (390 px). Las media queries solo AMPLÍAN.

   Índice
   01 · Tipografías autoalojadas
   02 · Reinicio
   03 · Color y superficies
   04 · Tipografía base
   05 · Composición: contenedor, sección, piezas comunes
   06 · Enlaces y foco
   07 · Cabecera y navegación
   08 · Portada
   09 · La firma
   09b· Riesgos frecuentes
   10 · Servicios
   11 · Fuero sindical
   11b· Fotografía (reglas comunes)
   12 · Instrumentos internos
   13 · Metodología
   13b· Casación
   13c· Cobertura
   14 · Socios
   15 · Contacto
   16 · Pie
   17 · Barra inferior de móvil (desactivada — ver README)
   18 · Movimiento
   19 · Impresión
   ═══════════════════════════════════════════════════════════════════════════ */


/* 01 · Tipografías ═════════════════════════════════════════════════════════
   Una sola familia en toda la página: Libre Caslon Display (Pablo Impallari /
   Rodrigo Fuenzalida), la misma de los títulos. Antes el cuerpo de texto iba
   en Archivo, una sans; el cliente pidió una sola letra en todo el sitio.
   Licencia SIL Open Font License 1.1. Ver fonts/LICENCIA.txt                */

@font-face {
  font-family: "Libre Caslon Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/caslon-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Caslon Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/caslon-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 02 · Reinicio ════════════════════════════════════════════════════════════ */

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

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

body, h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

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

a { color: inherit; }


/* 03 · Color y superficies ═════════════════════════════════════════════════
   Los seis colores salen del brochure, muestreados del archivo original.
   Cada superficie redefine las mismas variables, así el resto de la hoja
   nunca vuelve a nombrar un color.                                          */

:root {
  --tinta:       #1A1D22;   /* negro cálido de portada y cierre  */
  --hueso:       #F1EEE7;   /* fondo claro principal             */
  --papel:       #FFFFFF;   /* segundo fondo claro, para ritmo   */
  --vino:        #6E2A2E;   /* acento sobre fondo claro          */
  --vino-claro:  #B5666A;   /* acento sobre fondo oscuro         */
  --gris:        #4A4C50;   /* texto secundario sobre claro      */
  --gris-suave:  #C9C6BE;   /* filetes y texto secundario oscuro */

  /* Ancho de la columna de fotografía. Lo comparten las cuatro secciones
     con foto, así todas caen sobre la misma vertical. */
  --columna-foto: clamp(16rem, 28vw, 22rem);

  color-scheme: light;
}

/* Superficie clara por defecto */
body {
  --fondo:       var(--hueso);
  --texto:       var(--tinta);
  --texto-suave: var(--gris);
  --acento:      var(--vino);
  --linea:       var(--gris-suave);
  --foco:        var(--vino);

  background: var(--fondo);
  color: var(--texto);
}

.seccion--hueso { --fondo: var(--hueso); }

.seccion--papel {
  --fondo: var(--papel);
  --linea: #DFDCD5;
}

.seccion--tinta, .cabecera, .pie, .hero {
  --fondo:       var(--tinta);
  --texto:       var(--hueso);
  --texto-suave: var(--gris-suave);
  --acento:      var(--vino-claro);
  --linea:       rgba(241, 238, 231, 0.18);
  --foco:        var(--gris-suave);
}

.seccion, .hero, .cabecera, .pie {
  background: var(--fondo);
  color: var(--texto);
}


/* 04 · Tipografía base ═════════════════════════════════════════════════════ */

body {
  font-family: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  font-size: 1.0625rem;            /* 17 px — nunca por debajo de 16 */
  line-height: 1.65;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .cita p, .datos__principal, .lema, .metodologia__numero,
.mensaje {
  font-family: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.005em;
}

h1 {
  font-size: clamp(2.1rem, 1.35rem + 3.6vw, 4.5rem);
  line-height: 1.06;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.65rem, 1.25rem + 1.9vw, 2.75rem);
  text-wrap: balance;
}

/* h3 se sube por encima del cuerpo de texto para marcar jerarquía, aunque
   ahora compartan la misma familia: sin eso, un título y su descripción se
   confundirían al ser la misma letra. */
h3 {
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.55rem);
  line-height: 1.22;
}

p { text-wrap: pretty; }

/* Texto descriptivo que cuelga de un h3 */
.servicio p, .pasos p, .metodologia p, .casacion__nota,
.definiciones--dos dd {
  font-size: 1rem;
}


/* 05 · Composición ═════════════════════════════════════════════════════════ */

.contenedor {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.seccion {
  padding-block: clamp(3.25rem, 1.5rem + 7.5vw, 7.5rem);
}

/* Para secciones de dos líneas, que no piden el aire de una sección entera */
.seccion--angosta {
  padding-block: clamp(2.5rem, 1.25rem + 3.5vw, 4rem);
}

/* Deja aire bajo la cabecera fija al saltar a un ancla */
.seccion, .hero { scroll-margin-top: 4rem; }

/* Cintillo: solo se usa dos veces en toda la página, en la portada y en el
   énfasis diferencial. No lleva uno cada sección. */
.cintillo {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  text-wrap: balance;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.entrada {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--texto-suave);
  max-width: 62ch;
}

.entrada--suelta { margin-top: 1.25rem; }

h2 + .entrada--suelta { margin-top: 1rem; }

.filete {
  display: block;
  width: 5.5rem;
  height: 2px;
  background: var(--acento);
  margin-block: clamp(1.5rem, 4vw, 2.25rem);
}

/* Se repite al final de Servicios y de Fuero sindical: quien se convence a
   mitad de página no debería tener que seguir bajando para encontrar cómo
   escribir. */
.cierre { margin-top: clamp(2rem, 5vw, 3.25rem); }

.remate {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  color: var(--texto-suave);
  max-width: 62ch;
}


/* 06 · Enlaces y foco ══════════════════════════════════════════════════════ */

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover { text-decoration-color: var(--acento); }

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

/* Se esconde desplazándose hacia arriba, no con left:-9999px: así no queda
   nunca fuera del lienzo ni provoca saltos de scroll al recibir el foco. */
.saltar {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  transform: translateY(calc(-100% - 1rem));
  background: var(--hueso);
  color: var(--tinta);
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
}

.saltar:focus,
.saltar:focus-visible { transform: translateY(0); }

/* Enlace principal de la portada: sin flecha, sin botón, sin píldora. */
.enlace-fuerte {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: var(--acento);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

.enlace-fuerte:hover { text-decoration-color: var(--texto); }


/* 07 · Cabecera y navegación ═══════════════════════════════════════════════
   En móvil la cabecera muestra solo la marca y «Contacto»: con una sola
   página, un menú hamburguesa para seis anclas es un mueble que estorba.
   El menú completo aparece cuando hay ancho para mostrarlo entero.          */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--linea);
}

.cabecera__interior {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  text-decoration: none;
  margin-right: auto;
}

.marca__monograma {
  width: auto;
  height: 1.5rem;
}

.marca__nombre {
  font-size: 0.8125rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}

.nav { display: none; }

/* El vino claro sobre negro da 4.08:1 y no llega al mínimo AA para texto.
   El enlace va en hueso (14.6:1) y el acento queda en el filete inferior,
   que es decoración y solo necesita 3:1. */
.cabecera__contacto {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texto);
  box-shadow: inset 0 -1px 0 0 var(--acento);
}

.cabecera__contacto:hover { box-shadow: inset 0 -2px 0 0 var(--acento); }

/* El menú completo aparece a partir de 70rem (1120 px). Con seis entradas
   necesita 1106 px medidos para no apretarse contra la marca; por debajo de
   eso la cabecera se queda con la marca y «Contacto», que es lo que hace
   falta para llamar. */
@media (min-width: 70rem) {
  .cabecera__interior { min-height: 4.5rem; }
  .seccion, .hero { scroll-margin-top: 4.5rem; }

  .nav { display: block; }

  .nav__lista {
    display: flex;
    align-items: center;
    gap: clamp(0.875rem, 1.6vw, 1.5rem);
    margin-right: clamp(1.25rem, 2.5vw, 2.5rem);
  }

  .nav__lista a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;          /* un ítem del menú nunca se parte en dos */
    color: var(--texto-suave);
  }

  .nav__lista a:hover { color: var(--texto); }

  .nav__lista a[aria-current="true"] {
    color: var(--texto);
    box-shadow: inset 0 -1px 0 0 var(--acento);
  }
}


/* 08 · Portada ═════════════════════════════════════════════════════════════
   Altura por contenido más relleno. Nada de 100vh: en iOS la barra del
   navegador se come el final de la pantalla.                                */

.hero {
  padding-block: clamp(3.5rem, 2rem + 9vw, 8rem);
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.hero__texto {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
}

.hero__entrada {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  color: var(--texto-suave);
  max-width: 46ch;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

/* La única credencial verificable que la firma no comparte con nadie más.
   Va en la primera pantalla, a color pleno, no en gris. */
.hero__credencial {
  max-width: 38ch;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
  font-size: 0.9375rem;
  color: var(--texto);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

/* La fotografía de portada solo existe en pantallas anchas: en móvil no se
   descarga siquiera, porque vive en una media query. */
.hero__imagen { display: none; }

@media (min-width: 62rem) {
  /* El negro va a sangre; la foto muere contra el borde derecho de la
     pantalla. El relleno izquierdo replica el del .contenedor para que el
     titular arranque en la misma vertical que el resto de la página. */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(18rem, 28vw, 26rem);
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    min-height: 82svh;
    padding-block: 0;
    padding-right: 0;
    padding-left: max(clamp(1.25rem, 5vw, 3rem),
                      calc((100% - 72rem) / 2 + clamp(1.25rem, 5vw, 3rem)));
  }

  .hero__texto {
    max-width: none;
    margin-inline: 0;
    padding-block: clamp(4rem, 8vw, 7rem);
  }

  h1 { max-width: 15ch; }

  .hero__imagen {
    display: block;
    align-self: stretch;
    min-height: 26rem;
    background-color: #14171b;
    background-image: url("img/hero-620.jpg");
    background-image: image-set(url("img/hero-620.webp") type("image/webp"),
                                url("img/hero-620.jpg")  type("image/jpeg"));
    background-size: cover;
    background-position: 50% 50%;
  }
}


/* 09 · La firma ════════════════════════════════════════════════════════════
   Los cuatro verbos van sin filetes ni numeración: no son una secuencia.    */

.reja-foto__texto .entrada { margin-top: 1.25rem; }

.firma__parrafo {
  margin-top: 1.25rem;
  color: var(--texto-suave);
  max-width: 62ch;
}

.definiciones {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem);
}

.definiciones dt {
  font-family: "Libre Caslon Display", Georgia, serif;
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  color: var(--acento);
  margin-bottom: 0.375rem;
}

.definiciones dd {
  color: var(--texto-suave);
  max-width: 40ch;
}

@media (min-width: 40rem) {
  .definiciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Los cuatro verbos van bajo la rejilla de foto, a todo el ancho */
.definiciones--cuatro { margin-top: clamp(2.5rem, 6vw, 4rem); }

@media (min-width: 62rem) {
  .definiciones--cuatro {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}


/* 09b · Riesgos frecuentes ════════════════════════════════════════════════
   La única sección que le habla al lector de su propia situación en vez de
   hablar de la firma. Por eso es la única que es solo una lista, sin
   descripciones colgando de cada punto.                                     */

.riesgos {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid;
  gap: 0;
}

.riesgos li {
  border-top: 1px solid var(--linea);
  padding-block: clamp(0.875rem, 2vw, 1.125rem);
  padding-left: 1.75rem;
  position: relative;
  max-width: 48ch;
}

.riesgos li:last-child { border-bottom: 1px solid var(--linea); }

.riesgos li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--acento);
}

@media (min-width: 46rem) {
  .riesgos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  /* En dos columnas, el filete inferior lo llevan los dos últimos */
  .riesgos li:nth-last-child(-n+2) { border-bottom: 1px solid var(--linea); }
}


/* 10 · Servicios ═══════════════════════════════════════════════════════════
   Filas anchas separadas por un filete. Ni tarjetas, ni iconos, ni números. */

.servicios { margin-top: clamp(2.5rem, 6vw, 4rem); }

.servicio {
  border-top: 1px solid var(--linea);
  padding-block: clamp(1.5rem, 3.5vw, 2.25rem);
}

.servicio:last-child { border-bottom: 1px solid var(--linea); }

.servicio h3 { max-width: 26ch; }

.servicio p {
  margin-top: 0.5rem;
  color: var(--texto-suave);
  max-width: 62ch;
}

@media (min-width: 52rem) {
  .servicio {
    display: grid;
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: baseline;
  }
  .servicio p { margin-top: 0; }
}


/* 11 · Fuero sindical ══════════════════════════════════════════════════════
   Único bloque negro a media página. Los cuatro pasos son una secuencia
   real, así que van en <ol>; el orden se lee en la disposición y en el
   filete, no en dígitos decorativos.                                        */



.cita {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-left: clamp(1rem, 3vw, 1.75rem);
  border-left: 2px solid var(--acento);
}

.cita p {
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
  line-height: 1.28;
  max-width: 30ch;
}

.fuero__respaldo {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--texto-suave);
  max-width: 58ch;
}

.pasos { margin-top: clamp(2.5rem, 6vw, 4rem); display: grid; gap: 0; }

.pasos li {
  border-top: 1px solid var(--linea);
  padding-block: clamp(1.125rem, 3vw, 1.5rem);
}

.pasos li:last-child { border-bottom: 1px solid var(--linea); }

.pasos p {
  margin-top: 0.5rem;
  color: var(--texto-suave);
  max-width: 52ch;
}

@media (min-width: 62rem) {
  /* Los cuatro pasos van bajo la rejilla de foto, en dos columnas */
  .pasos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .pasos li:nth-last-child(-n+2) { border-bottom: 1px solid var(--linea); }
}


/* 11b · Fotografía ═════════════════════════════════════════════════════════
   Las seis fotografías del brochure comparten tratamiento: blanco y negro,
   niveles igualados y viradas al negro cálido de la marca. Aquí solo se
   define cómo se comportan en la página; el tono viene ya en el archivo.   */

/* La rejilla que comparten las cuatro secciones con fotografía: texto a la
   izquierda, foto a la derecha, siempre del mismo ancho y con el mismo
   borde. Al bajar por la página las cuatro caen sobre la misma vertical. */
.reja-foto { display: grid; gap: clamp(2rem, 5vw, 2.75rem); }

@media (min-width: 62rem) {
  .reja-foto {
    grid-template-columns: minmax(0, 1fr) var(--columna-foto);
    column-gap: clamp(2.5rem, 6vw, 4.5rem);
    align-items: start;
  }
}

/* Las cuatro comparten proporción: 4:5. Ya viene recortada en el archivo;
   aquí solo se garantiza que ningún ancho la deforme. */
.figura { margin: 0; }

.figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Banda a sangre entre Socios y Contacto: repite el gesto de cierre del
   brochure. Es decorativa, por eso va con alt vacío. */
.banda { margin: 0; }

.banda img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 5;   /* la del archivo: no recorta a nadie en ningún ancho */
}


/* 12 · Instrumentos internos ═══════════════════════════════════════════════
   Rejilla de dos por dos, para que no repita el ritmo de «Servicios».       */

.definiciones--dos {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  gap: 0;
}

.definiciones--dos .definiciones__par {
  border-top: 1px solid var(--linea);
  padding-block: clamp(1.375rem, 3vw, 1.75rem);
}

.definiciones--dos dt {
  font-size: clamp(1.25rem, 1.15rem + 0.55vw, 1.45rem);
  color: var(--texto);
  max-width: 24ch;
}

.definiciones--dos dd { max-width: 44ch; }

@media (min-width: 46rem) {
  .definiciones--dos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 5vw, 4rem);
  }
}


/* Mensaje clave del brochure. Abre Metodología porque es exactamente lo que
   la metodología ejecuta. */
/* Mensaje clave del brochure. Cierra «La firma»: es la frase que resume la
   postura de la práctica, así que va al final, no al principio. */
.mensaje {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 2rem);
  line-height: 1.25;
  max-width: 34ch;
  margin-inline: 0;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--linea);
}

/* Aviso normativo. Hoy está sin publicar en index.html, a la espera del
   visto bueno de un socio. */
.aviso {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-left: clamp(1rem, 2.5vw, 1.5rem);
  border-left: 2px solid var(--acento);
  font-size: 1rem;
  color: var(--texto-suave);
  max-width: 58ch;
}


/* 13 · Metodología ═════════════════════════════════════════════════════════
   La única secuencia numerada del sitio, porque es la única que de verdad
   ocurre en ese orden.                                                      */

.metodologia {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  gap: 0;
}

.metodologia li {
  border-top: 1px solid var(--linea);
  padding-block: clamp(1.125rem, 3vw, 1.5rem);
}

.metodologia li:last-child { border-bottom: 1px solid var(--linea); }

.metodologia h3 {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
}

.metodologia__numero {
  font-size: 1.5rem;
  color: var(--acento);
  min-width: 1.1ch;
}

.metodologia p {
  margin-top: 0.5rem;
  padding-left: 2.375rem;
  color: var(--texto-suave);
  max-width: 52ch;
}

@media (min-width: 58rem) {
  .metodologia {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.5vw, 2rem);
  }
  .metodologia li { border-bottom: none; padding-bottom: 0; }
  .metodologia li:last-child { border-bottom: none; }
  .metodologia h3 { display: block; }
  .metodologia__numero { display: block; margin-bottom: 0.5rem; }
  .metodologia p { padding-left: 0; }
}


/* 13b · Casación ═══════════════════════════════════════════════════════════
   Era un apéndice pegado al final de Socios. Es, con el fuero sindical, el
   verdadero diferencial de la firma, así que tiene sección propia y va
   inmediatamente después del otro diferencial.                              */

.casacion__lista {
  margin-block: clamp(1.5rem, 4vw, 2rem);
  display: grid;
  gap: 0.75rem;
}

.casacion__lista li {
  padding-left: 1.75rem;
  position: relative;
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.35rem);
}

.casacion__lista li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--acento);
}

.casacion__nota {
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--linea);
  color: var(--texto-suave);
  max-width: 58ch;
}




/* 13c · Cobertura ══════════════════════════════════════════════════════════ */

#cobertura .entrada { max-width: 46ch; }


/* 14 · Socios ══════════════════════════════════════════════════════════════ */

.socios {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
}

/* Retratos reales de personas reales: se dejan en color, a diferencia de
   la fotografía ilustrativa del resto del sitio (manos, documentos), que
   es la que va en blanco y negro. Cuadrados, esquina redondeada, nunca un
   círculo — la firma pidió sobriedad, no un avatar de red social. */
.socio__foto {
  width: clamp(8.25rem, 21vw, 10.5rem);  /* +25% sobre el +20% anterior: 150% del tamaño original */
  margin: 0 0 1.25rem;
  border-radius: 0.75rem;
  overflow: hidden;
}

.socio__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.socio h3 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

/* Las credenciales van en una línea propia bajo el nombre, no en una
   versalita suelta: la sección ya se titula «Socios». Mismo color y tamaño
   que el resto de los párrafos, para que toda la sección lea con un solo
   tratamiento. */
.socio__credenciales {
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
  color: var(--texto-suave);
  max-width: 42ch;
}

.socio p {
  margin-top: 0.875rem;
  color: var(--texto-suave);
  max-width: 52ch;
}

.socio .socio__credenciales + p { margin-top: 0; }

@media (min-width: 46rem) {
  .socios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* 15 · Contacto ════════════════════════════════════════════════════════════
   El teléfono es la conversión principal. Va grande y es tocable.           */

.datos {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}

.datos__rotulo {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--linea);
}

.datos__linea {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.5rem;
}

.datos__nombre {
  flex-basis: 100%;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.datos__linea + .datos__linea { margin-top: 0.5rem; }

.datos__principal {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  text-decoration: none;
  white-space: nowrap;
}

.datos__principal:hover { text-decoration: underline; }

.datos__secundario {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.datos__correo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  overflow-wrap: anywhere;
}

.lema {
  margin-top: clamp(3rem, 7vw, 4.5rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--linea);
  font-size: clamp(1.375rem, 1.15rem + 1vw, 2rem);
  color: var(--texto);
}

@media (min-width: 46rem) {
  .datos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
  }
}


/* 16 · Pie ═════════════════════════════════════════════════════════════════
   El pie de un sitio de firma es zona de confianza: repite los datos de
   contacto en vez de limitarse al monograma y al año.                       */

.pie {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--linea);
}

.pie__reja {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}

.pie__monograma {
  width: auto;
  height: 2.25rem;
  margin-bottom: 0.875rem;
}

.pie__firma {
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pie__descriptor {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--texto-suave);
}

.pie__rotulo {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-suave);
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--linea);
}

.pie__bloque p { font-size: 0.9375rem; }

.pie__bloque a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow-wrap: anywhere;
}

.pie__legal {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  font-size: 0.875rem;
  color: var(--texto-suave);
}

@media (min-width: 46rem) {
  .pie__reja {
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
}


/* 17 · Barra inferior de móvil ═════════════════════════════════════════════
   DESACTIVADA. Para encenderla basta añadir la clase «con-barra» al <body>
   en index.html: <body class="con-barra">. Ver README.md.                   */

.barra { display: none; }

body.con-barra .barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--tinta);
  border-top: 1px solid rgba(241, 238, 231, 0.18);
  padding-bottom: env(safe-area-inset-bottom);
}

body.con-barra .barra a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  color: var(--hueso);
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}

body.con-barra .barra a + a { border-left: 1px solid rgba(241, 238, 231, 0.18); }

body.con-barra .pie {
  padding-bottom: calc(clamp(2.5rem, 5vw, 3.5rem) + 52px + env(safe-area-inset-bottom));
}

@media (min-width: 62rem) {
  body.con-barra .barra { display: none; }
  body.con-barra .pie { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
}


/* 18 · Movimiento ══════════════════════════════════════════════════════════
   Un solo gesto en toda la página: el filete de la portada se traza una vez
   al cargar. No hay nada más animado, ni al hacer scroll ni al pasar el
   cursor por encima de nada.                                                */

@keyframes trazo {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero .filete {
  transform-origin: left center;
  animation: trazo 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .filete { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* 19 · Impresión ═══════════════════════════════════════════════════════════
   Los navegadores no imprimen fondos salvo que el usuario marque la casilla.
   Sin esto, las tres secciones oscuras se imprimen con su texto hueso sobre
   papel blanco: 1.06:1, es decir, invisible. Aquí se invierten esas
   superficies para que la versión impresa y el PDF sean legibles siempre.  */

@media print {
  .cabecera,
  .barra,
  .saltar,
  .hero__imagen,
  .cierre,
  .enlace-fuerte,
  .pie__monograma { display: none; }
  /* El monograma es hueso y vino sobre fondo transparente: sobre papel
     blanco la «A» clara desaparecería. En papel manda el nombre escrito. */

  html { scroll-behavior: auto; }

  body {
    /* Los filetes claros se pierden en papel */
    --linea: #8A8880;
    font-size: 11pt;
    line-height: 1.5;
    background: #fff;
    color: #000;
  }

  /* Las superficies oscuras pasan a negro sobre blanco conservando el acento */
  .seccion--tinta, .hero, .pie {
    --fondo:       #fff;
    --texto:       #000;
    --texto-suave: #3A3A3A;
    --acento:      #6E2A2E;
    --linea:       #9A988F;
    background: #fff;
    color: #000;
  }

  .seccion, .hero {
    padding-block: 1.5rem;
    min-height: 0;
  }

  .hero { display: block; }

  /* Nada debe partirse a la mitad entre dos hojas */
  .servicio,
  .pasos li,
  .metodologia li,
  .socio,
  .definiciones__par,
  .cita,
  .datos__grupo { break-inside: avoid; }

  h1, h2, h3 { break-after: avoid; }

  /* En papel el enlace no se puede tocar: se escribe la dirección */
  .pie__bloque a[href^="tel:"],
  .pie__bloque a[href^="mailto:"] { min-height: 0; }

  .figura { max-width: 11rem; }

  .banda img { max-width: 22rem; }

  .filete { animation: none; }
}