@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   AJURIDIC · ajuridic.com — Hoja de estilo unica del sitio
   Identidad: «Cantonada» (despacho contemporaneo, base fria + chaflan)
   ---------------------------------------------------------------------------
   NO añadir estilos en las paginas. Todo el CSS del sitio vive aqui.
   Ningun token se comparte con noemiampurdanes.com (papel calido + lacre).

   INDICE
    01. Variables (:root)
    02. Reset y base
    03. Tipografia
    04. Utilidades y layout (contenedor, seccion, rejilla)
    05. Skip link y accesibilidad
    06. Cabecera, navegacion y menu movil
    07. Botones
    08. Tarjetas
    09. Hero y bandas de cierre (CTA)
    10. Bloques de contenido (migas, indice, FAQ, aviso, cita, tabla, datos)
    11. Prosa de articulo (blog)
    12. Formularios
    13. Pie
    14. Barra fija de contacto rapido (movil)
    15. Media queries generales, movimiento reducido e impresion
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══ 01. VARIABLES ═══════════════════════════════════════════════════════ */

:root {
  /* ── Neutros frios ── */
  --fondo:          #F6F6F1;
  --fondo-alt:      #ECEDE3;
  --superficie:     #FFFFFF;
  --tinta:          #1C2118;   /* 14.79:1 s/fondo · 16.04:1 s/blanco */
  --tinta-2:        #50583F;   /*  6.43:1 s/fondo ·  6.97:1 s/blanco */
  --tinta-3:        #666E55;   /*  4.76:1 s/fondo ·  5.16:1 s/blanco */
  --linea:          #DFE0D2;
  --linea-suave:    #ECEDE2;

  /* ── Acento oliva, derivado del verde del logo del gorila (#80883C) ── */
  --verd:           #5A6127;   /*  6.10:1 s/fondo ·  6.62:1 s/blanco */
  --verd-marca:     #80883C;   /* el verde EXACTO del logo; solo para el simbolo.
                                  Medido sobre logo-ajuridic.png: es el color del
                                  96,8 % de la tinta. Antes ponia #808838, que no
                                  es el del logo por 4 puntos de azul. */
  --verd-fosc:      #454A1B;   /*  9.34:1 s/blanco — hover */
  --verd-clar:      #B4C056;   /*  8.71:1 s/fosc — SOLO sobre oscuro */
  --verd-suau:      #EFF1E2;
  --verd-borde:     #D2D8B0;
  --focus:          #6B7330;

  /* ── Bandas oscuras ── */
  --fosc:           #1B1F14;
  --fosc-2:         #262C1B;
  --linea-fosc:     #3C4430;
  --tinta-inv:      #D5D9C6;   /* 11.9:1 s/fosc */
  --tinta-inv-2:    #ADB39B;   /*  7.4:1 s/fosc */

  /* ── Estado ── */
  --error:          #8C2C3E;   /*  8.25:1 s/blanco */
  --error-suau:     #FBEEF0;

  /* ── Tipografia ── */
  --font-titular:   'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-texto:     'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  /* Escala fluida. Los tres titulares alcanzan su tamaño maximo EXACTAMENTE en
     1280 px, asi que el escritorio aprobado no cambia ni un pixel, y quedan
     planos por debajo de ~700 px, asi que el movil pequeño se mueve poco.
     Lo que se corrige es el tramo intermedio (tablet y movil grande): con la
     pendiente anterior un h1 medido a 768 px daba 42,3 px y un h2 32,3 px,
     que es lo que dejaba los titulares y las tarjetas desmesurados. */
  --fs-h1:          clamp(2.00rem, 0.40rem + 3.75vw, 3.40rem);
  --fs-h2:          clamp(1.55rem, 0.65rem + 2.1875vw, 2.40rem);
  --fs-h3:          clamp(1.25rem, 0.925rem + 0.78vw, 1.55rem);
  --fs-h4:          1.05rem;
  --fs-entradilla:  clamp(1.10rem, 0.95rem + 0.33vw, 1.20rem);
  /* En movil bajaba de 17,6 px con interlineado 1,55 y las paginas largas se
     hacian interminables: extranjeria median 24.971 px de alto a 390 px, mas
     de treinta pantallas. Ahora el cuerpo es fluido -16 px en el movil mas
     estrecho, los 17 de siempre a partir de tablet- y el interlineado se
     aprieta un pelo solo en movil (--lh-base). Escritorio no se mueve. */
  --fs-base:        clamp(1rem, 0.86rem + 0.44vw, 1.0625rem);
  --fs-peque:       0.875rem;
  --fs-kicker:      0.75rem;

  --lh-titular:     1.12;
  /* 1,65 de siempre. En movil se aprieta a 1,52 con una media query, mas
     abajo: en lineas de 36-40 caracteres -lo que da un movil- 1,65 separa
     tanto que el parrafo se estira sin ganar legibilidad.

     OJO: NO se puede hacer con clamp() como el resto de los tokens. Un
     line-height sin unidad no admite calc con vw -«1.32 + 0.63vw» mezcla
     numero y longitud, es invalido-, y el navegador lo descarta entero y cae
     en `normal`. Lo hice asi y me lo encontre midiendo: line-height salia NaN
     en los seis anchos. Si algun dia se quiere fluido, hay que pasarlo a em. */
  --lh-base:        1.65;
  --track-titular:  -0.02em;
  --track-kicker:   0.14em;

  --peso-normal:    400;
  --peso-medio:     500;
  --peso-semi:      600;
  --peso-fuerte:    700;

  /* ── Espaciado · base 8, escala 4→128 ── */
  --esp-1:  4px;
  --esp-2:  8px;
  --esp-3:  12px;
  --esp-4:  16px;
  --esp-5:  24px;
  --esp-6:  32px;
  --esp-7:  48px;
  --esp-8:  64px;
  --esp-9:  96px;
  --esp-10: 128px;

  /* Espaciados FLUIDOS. Mismo valor que el escalon fijo equivalente a 1280 px
     y mas apretados en el tramo intermedio, que es donde sobraba aire. */
  --esp-6f: clamp(20px, 12px + 1.5625vw, 32px);   /* ≈ --esp-6 en escritorio */
  --esp-7f: clamp(24px, 3.9vw - 2px,    48px);    /* ≈ --esp-7 en escritorio */
  /* MEDIDO: el tope de 112 px solo se alcanzaba por encima de 1556 px, y era
     contraproducente — /contacto/ MEDIA MAS ALTO a 1600 (6427 px) que a 1024
     (5860 px): al ensanchar la ventana la pagina pedia mas scroll, no menos.
     El tope baja a 92 px, que es el valor que ya tenia a 1280 (89,6 px), asi
     que la referencia aprobada no se mueve y solo deja de crecer de ahi para
     arriba. MEDIDO revirtiendo solo esta linea: -200 px de alto en /contacto/
     a 1600 (-228 a 1920) y -480 px en / a 1920. Es, de largo, lo que mas
     scroll quita de todo el lote. */
  /* El suelo baja de 48 a 38 px: en movil, con secciones cortas una detras de
     otra, 48 arriba y 48 abajo son 96 px de nada entre bloque y bloque, y en
     una pagina de treinta secciones eso son tres pantallas de aire. Desde
     ~770 px de ventana el valor es el de antes, asi que tablet y escritorio no
     se enteran. */
  /* La recta pasa EXACTAMENTE por 38px a 390 de ventana y por 89,6px a 1280,
     que es lo que valia antes en escritorio. La primera version usaba
     9.4vw - 22.7px y daba 92 a 1280 en vez de 89,6: dos pixeles por seccion
     que en la portada eran +282 px de alto. Medido antes y despues. */
  --seccion-y:      clamp(38px, 5.8vw + 15.4px, 92px);

  /* Padding de tarjeta. Un solo mando para .tarjeta, --area y --destacada. */
  --tarjeta-pad:    var(--esp-6f);

  /* Compensacion de la cabecera pegajosa (72 px medidos) + un respiro. */
  --ancla-y:        calc(var(--nav-alto) + var(--esp-5));

  /* ── Layout ── */
  /* Ancho util FLUIDO. MEDIDO: con 1200 px fijos, a 1920 sobraban 360 px
     muertos a cada lado y a 2560 px, 680. La recta 72vw+192px vale exactamente
     1200 px a 1400 de ventana (o sea: de 1400 para abajo NADA cambia, 1280
     incluido, porque el minimo del clamp manda) y sube hasta el tope de
     1416 px a partir de 1700. El tope existe a proposito: por encima de
     ~1420 px las tarjetas de .rejilla--3 pasan de 430 px y la linea de texto
     se hace incomoda. Los bloques de prosa NO se enteran de esto: van con
     --ancho-texto (68ch) y con los max-width en ch de hero, cierre y
     .seccion__cabecera, que no se tocan. */
  --ancho-max:      clamp(1200px, 72vw + 192px, 1416px);
  --ancho-texto:    68ch;
  /* Igual de fluido, para el formulario de contacto y las herramientas: 840 px
     hasta 1400 (sin cambio en 1280) y hasta 1100 px a partir de 1700. */
  --ancho-estrecho: clamp(840px, 86.67vw - 373px, 1100px);
  --gutter:         clamp(20px, 4vw, 40px);
  --grid-gap:       var(--esp-5);
  --nav-alto:       72px;
  --barra-movil:    0px;   /* lo eleva la media query cuando la barra existe */

  /* ── Forma ── */
  --radio:          4px;
  --radio-lg:       6px;
  --radio-chip:     3px;
  --chafla:         12px;
  --borde:          1px solid var(--linea);
  --borde-fuerte:   1.5px solid var(--tinta);
  --filete:         3px;

  /* Chaflan barcelones: firma grafica. Solo tarjetas de area y logotipo. */
  --clip-chafla:    polygon(0 0, calc(100% - var(--chafla)) 0, 100% var(--chafla), 100% 100%, 0 100%);
  --clip-chafla-in: polygon(0 0, calc(100% - var(--chafla) + 1px) 0, 100% calc(var(--chafla) - 1px), 100% 100%, 0 100%);

  /* ── Elevacion — plana en reposo ── */
  --sombra-0:       none;
  --sombra-1:       0 2px 8px rgba(13, 29, 36, 0.06);
  --sombra-2:       0 6px 20px rgba(13, 29, 36, 0.09);
  --sombra-nav:     0 1px 0 var(--linea);
  --anillo-focus:   0 0 0 3px rgba(29, 143, 132, 0.42);

  /* ── Movimiento ── */
  --trans:          160ms cubic-bezier(0.2, 0, 0.2, 1);
  --trans-lenta:    260ms cubic-bezier(0.2, 0, 0.2, 1);
}


/* ═══ 02. RESET Y BASE ════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--ancla-y);
}

/* La cabecera es pegajosa (72 px medidos): cualquier destino de anclaje tiene
   que dejarle sitio o el titular se mete debajo y queda cortado. Va con
   :where() para que la especificidad sea 0 y no le gane a nada. */
:where([id]) { scroll-margin-top: var(--ancla-y); }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--font-texto);
  font-size: 1rem;              /* 16px en movil */
  font-weight: var(--peso-normal);
  line-height: var(--lh-base);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;           /* red de seguridad contra desbordes */
  padding-bottom: var(--barra-movil);
}

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

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

hr {
  border: 0;
  border-top: var(--borde);
  margin: var(--esp-7) 0;
}

::selection { background: var(--verd-suau); color: var(--tinta); }

/* Foco visible SIEMPRE. Nunca outline:none sin sustituto. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radio);
}

/* Bloqueo de scroll cuando el menu movil esta abierto */
body.menu-abierto { overflow: hidden; }


/* ═══ 03. TIPOGRAFIA ══════════════════════════════════════════════════════ */

h1, h2, h3, h4 {
  font-family: var(--font-titular);
  color: var(--tinta);
  text-wrap: balance;
  /* Norma: los titulares NUNCA en mayusculas. */
}

/* Todos los titulares son destino de anclaje potencial (indice flotante, FAQ,
   enlaces internos): la cabecera pegajosa no puede comerselos. */
h1, h2, h3, h4, h5, h6 { scroll-margin-top: var(--ancla-y); }

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--peso-fuerte);
  line-height: 1.10;
  letter-spacing: -0.022em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--peso-fuerte);
  line-height: 1.15;
  letter-spacing: -0.018em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--peso-semi);
  line-height: 1.25;
  letter-spacing: -0.012em;
}

h4 {
  font-size: var(--fs-h4);
  font-weight: var(--peso-semi);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

p { text-wrap: pretty; }

a {
  color: var(--verd);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--trans);
}
a:hover {
  color: var(--verd-fosc);
  text-decoration-thickness: 2px;
}

strong, b { font-weight: var(--peso-semi); }

/* Cursiva permitida solo en Plex 400 y para citas legales textuales */
em, i, cite { font-style: italic; font-weight: var(--peso-normal); }

code, kbd, samp {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}

/* Antetitulo (kicker): filete de 24×2 px + versalitas de acento */
.kicker {
  display: block;
  font-family: var(--font-titular);
  font-size: var(--fs-kicker);
  font-weight: var(--peso-semi);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--verd);
  margin: 0 0 var(--esp-3);
}
.kicker::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--verd);
  margin-bottom: var(--esp-3);
}
.kicker--centrado { text-align: center; }
.kicker--centrado::before { margin-inline: auto; }

/* Entradilla / lead */
.entradilla {
  font-size: var(--fs-entradilla);
  line-height: 1.55;
  color: var(--tinta-2);
  max-width: 62ch;
}

/* Texto pequeño / metadatos */
.peque { font-size: var(--fs-peque); line-height: 1.55; color: var(--tinta-3); }

.destacado-texto { color: var(--verd); font-weight: var(--peso-semi); }


/* ═══ 04. UTILIDADES Y LAYOUT ═════════════════════════════════════════════ */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.contenedor--texto    { max-width: calc(var(--ancho-texto) + var(--gutter) * 2); }
.contenedor--estrecho { max-width: calc(var(--ancho-estrecho) + var(--gutter) * 2); }

.seccion { padding-block: var(--seccion-y); }
.seccion--alt     { background: var(--fondo-alt); }
.seccion--blanca  { background: var(--superficie); }
.seccion--compacta { padding-block: var(--esp-7); }

/* Banda oscura: hero, cierre y pie. Invierte el color del texto. */
.seccion--oscura {
  background: var(--fosc);
  color: var(--tinta-inv);
}
.seccion--oscura h1,
.seccion--oscura h2,
.seccion--oscura h3,
.seccion--oscura h4 { color: #FFFFFF; }
.seccion--oscura p  { color: var(--tinta-inv); }
.seccion--oscura .kicker { color: var(--verd-clar); }
.seccion--oscura .kicker::before { background: var(--verd-clar); }
.seccion--oscura .entradilla { color: var(--tinta-inv); }
.seccion--oscura .peque { color: var(--tinta-inv-2); }
.seccion--oscura a { color: var(--verd-clar); }
.seccion--oscura a:hover { color: #FFFFFF; }
.seccion--oscura-2 { background: var(--fosc-2); }

/* Encabezado de seccion */
.seccion__cabecera { margin-bottom: var(--esp-7f); max-width: 62ch; }
.seccion__cabecera > h2 + p { margin-top: var(--esp-4); }
.seccion__cabecera--centrada { margin-inline: auto; text-align: center; }

/* Rejilla de tarjetas: 1 col · 2 en ≥640 · 3 o 4 en ≥1024 */
.rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}
.rejilla--2 > *, .rejilla--3 > *, .rejilla--4 > * { min-width: 0; }

/* Dos columnas de contenido (texto + aparte) */
.columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-7);
  align-items: start;
}

/* Pila vertical con ritmo de la escala */
.pila > * + * { margin-top: var(--esp-4); }
.pila-5 > * + * { margin-top: var(--esp-5); }
.pila-6 > * + * { margin-top: var(--esp-6); }

/* Fila de acciones (botones) */
.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-6);
}
.acciones--centrada { justify-content: center; }

.centrado { text-align: center; }
.sin-margen-sup { margin-top: 0 !important; }


/* ═══ 05. SKIP LINK Y ACCESIBILIDAD ═══════════════════════════════════════ */

.saltar {
  position: absolute;
  left: var(--esp-4);
  top: var(--esp-4);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--verd);
  color: #FFFFFF;
  font-family: var(--font-titular);
  font-weight: var(--peso-semi);
  font-size: 0.9375rem;
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--radio);
  text-decoration: none;
  transition: transform var(--trans);
}
.saltar:focus {
  transform: translateY(0);
  color: #FFFFFF;
}

/* Solo para lectores de pantalla */
.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ═══ 06. CABECERA, NAVEGACION Y MENU MOVIL ═══════════════════════════════ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--sombra-nav);
}
@supports (backdrop-filter: blur(8px)) {
  .cabecera { backdrop-filter: blur(8px); }
}

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: var(--nav-alto);
}

/* ── Logotipo (lleva el chaflan) ── */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  text-decoration: none;
  color: var(--tinta);
  flex: 0 0 auto;
}
.logo:hover { color: var(--tinta); }
.logo__marca {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--fosc);
  color: #FFFFFF;
  font-family: var(--font-titular);
  font-weight: var(--peso-fuerte);
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: -0.02em;
  clip-path: var(--clip-chafla);
  flex: 0 0 auto;
}
.logo__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo__nombre {
  font-family: var(--font-titular);
  font-weight: var(--peso-fuerte);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.logo__claim {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-3);
  font-weight: var(--peso-medio);
}

/* ── Navegacion de escritorio ── */
.nav { display: none; }

.nav__lista {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  list-style: none;
}
.nav__item { position: relative; }

.nav__enlace {
  display: inline-block;
  font-family: var(--font-titular);
  font-weight: var(--peso-medio);
  font-size: 0.9375rem;
  color: var(--tinta-2);
  text-decoration: none;
  padding: var(--esp-3) var(--esp-2);
  border-bottom: 2px solid transparent;
  transition: color var(--trans), border-color var(--trans);
  white-space: nowrap;
}
.nav__enlace:hover { color: var(--verd); }
.nav__enlace[aria-current="page"],
.nav__enlace--activo {
  color: var(--verd);
  border-bottom-color: var(--verd);
}

/* Submenu de Areas: se abre con hover Y con foco de teclado (sin JS) */
.nav__item--areas > .nav__enlace::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: var(--esp-2);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 110;
  min-width: 280px;
  padding: var(--esp-3) 0;
  margin: 0;
  list-style: none;
  background: var(--superficie);
  border: var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--trans), transform var(--trans), visibility var(--trans);
}
.nav__item--areas:hover > .submenu,
.nav__item--areas:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu__enlace {
  display: block;
  padding: var(--esp-3) var(--esp-5);
  font-family: var(--font-titular);
  font-weight: var(--peso-medio);
  font-size: 0.9375rem;
  color: var(--tinta-2);
  text-decoration: none;
  transition: background var(--trans), color var(--trans);
}
.submenu__enlace:hover,
.submenu__enlace:focus-visible {
  background: var(--verd-suau);
  color: var(--verd);
}

/* Telefono de cabecera */
.cabecera__cta { display: none; flex: 0 0 auto; }

/* ── Boton hamburguesa ── */
.hamburguesa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  color: var(--tinta);
  cursor: pointer;
  transition: border-color var(--trans), background var(--trans);
  flex: 0 0 auto;
}
.hamburguesa:hover { border-color: var(--verd); background: var(--verd-suau); }
.hamburguesa__icono {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: background var(--trans);
}
.hamburguesa__icono::before,
.hamburguesa__icono::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform var(--trans), top var(--trans);
}
.hamburguesa__icono::before { top: -6px; }
.hamburguesa__icono::after  { top: 6px; }
.hamburguesa[aria-expanded="true"] .hamburguesa__icono { background: transparent; }
.hamburguesa[aria-expanded="true"] .hamburguesa__icono::before { top: 0; transform: rotate(45deg); }
.hamburguesa[aria-expanded="true"] .hamburguesa__icono::after  { top: 0; transform: rotate(-45deg); }

/* ── Menu movil a pantalla completa ── */
.menu-movil {
  position: fixed;
  inset: var(--nav-alto) 0 0 0;
  z-index: 90;
  display: none;
  overflow-y: auto;
  background: var(--superficie);
  padding: var(--esp-6) 0 calc(var(--esp-9) + var(--barra-movil));
  border-top: var(--borde);
}
.menu-movil[data-abierto="true"] { display: block; }

.menu-movil__lista { list-style: none; }
.menu-movil__item + .menu-movil__item { border-top: 1px solid var(--linea-suave); }
.menu-movil__enlace {
  display: block;
  padding: var(--esp-4) 0;
  font-family: var(--font-titular);
  font-weight: var(--peso-semi);
  font-size: 1.125rem;
  color: var(--tinta);
  text-decoration: none;
  min-height: 48px;
}
.menu-movil__enlace:hover,
.menu-movil__enlace[aria-current="page"] { color: var(--verd); }

.menu-movil__grupo { padding: var(--esp-4) 0; }
.menu-movil__titulo {
  display: block;
  font-family: var(--font-titular);
  font-size: var(--fs-kicker);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--verd);
  margin-bottom: var(--esp-3);
}
.menu-movil__sublista { list-style: none; }
.menu-movil__subenlace {
  display: block;
  padding: var(--esp-3) 0;
  font-size: var(--fs-base);
  color: var(--tinta-2);
  text-decoration: none;
  min-height: 44px;
}
.menu-movil__subenlace:hover { color: var(--verd); }

.menu-movil__acciones {
  display: grid;
  gap: var(--esp-3);
  margin-top: var(--esp-6);
  padding-top: var(--esp-6);
  border-top: var(--borde);
}


/* ═══ 07. BOTONES ═════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 48px;
  padding: 14px 28px;
  font-family: var(--font-titular);
  font-size: 0.9375rem;
  font-weight: var(--peso-semi);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radio);
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans),
              color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.btn:focus-visible { outline: none; box-shadow: var(--anillo-focus); }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* Primario — la accion de contacto. Una sola vez por seccion. */
.btn--primario {
  background: var(--verd);
  color: #FFFFFF;          /* 8.42:1 */
  border-color: var(--verd);
}
.btn--primario:hover {
  background: var(--verd-fosc);   /* 11.80:1 */
  border-color: var(--verd-fosc);
  color: #FFFFFF;
  transform: translateY(-1px);
}
.btn--primario:active { transform: none; }

/* Secundario */
.btn--secundario {
  background: transparent;
  color: var(--tinta);
  border: var(--borde-fuerte);
}
.btn--secundario:hover {
  color: var(--verd);
  border-color: var(--verd);
  background: var(--verd-suau);
  transform: translateY(-1px);
}
.btn--secundario:active { transform: none; }

/* Terciario / enlace */
.btn--enlace {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--verd);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.btn--enlace:hover {
  color: var(--verd-fosc);
  text-decoration-thickness: 2px;
  transform: none;
}

/* Sobre banda oscura */
.btn--inv {
  background: #FFFFFF;
  color: var(--fosc);       /* 17.24:1 */
  border-color: #FFFFFF;
}
.btn--inv:hover {
  background: var(--verd-clar);
  border-color: var(--verd-clar);
  color: var(--fosc);
  transform: translateY(-1px);
}
.btn--sec-inv {
  background: transparent;
  color: var(--tinta-inv);
  border-color: var(--tinta-inv);
}
.btn--sec-inv:hover {
  color: #FFFFFF;
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.btn--ancho { width: 100%; }
.btn--peque { min-height: 44px; padding: 10px 20px; font-size: 0.875rem; }


/* ═══ 08. TARJETAS ════════════════════════════════════════════════════════ */

.tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: var(--borde);
  border-radius: var(--radio-lg);
  padding: var(--tarjeta-pad);
  box-shadow: var(--sombra-0);
  transition: box-shadow var(--trans), border-color var(--trans), transform var(--trans);
}
.tarjeta__icono {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--verd);
  margin-bottom: var(--esp-4);
}
.tarjeta__icono svg { width: 100%; height: 100%; stroke-width: 1.5; }
.tarjeta__titulo { margin-bottom: var(--esp-3); }
.tarjeta__texto  { color: var(--tinta-2); }
.tarjeta__meta   { font-size: var(--fs-peque); color: var(--tinta-3); margin-bottom: var(--esp-3); }
/* El enlace se ancla siempre abajo: todas las tarjetas de la fila igualan altura */
.tarjeta__enlace {
  margin-top: auto;
  padding-top: var(--esp-4);
  align-self: flex-start;
  /* objetivo tactil minimo de 44px sin alterar el ritmo vertical */
  display: inline-flex;
  align-items: flex-end;
  min-height: 44px;
  font-family: var(--font-titular);
  font-weight: var(--peso-semi);
  font-size: 0.9375rem;
  color: var(--verd);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.tarjeta__enlace:hover { color: var(--verd-fosc); text-decoration-thickness: 2px; }

/* Tarjeta que es enlace entera */
.tarjeta--enlace { text-decoration: none; color: inherit; }
.tarjeta--enlace:hover {
  box-shadow: var(--sombra-2);
  border-color: var(--verd-borde);
  transform: translateY(-2px);
  color: inherit;
}
.tarjeta--enlace:hover .tarjeta__enlace { color: var(--verd-fosc); }

/* Tarjeta de AREA DE PRACTICA — lleva el chaflan de 12 px.
   El borde se dibuja con el fondo + ::before para que el chaflan quede limpio. */
.tarjeta--area {
  position: relative;
  border: 0;
  border-radius: 0;
  background: var(--linea);
  padding: calc(var(--tarjeta-pad) + 1px);
  clip-path: var(--clip-chafla);
}
.tarjeta--area::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  background: var(--superficie);
  clip-path: var(--clip-chafla-in);
  transition: background var(--trans);
}
.tarjeta--area > * { position: relative; z-index: 1; }
.tarjeta--area:hover { background: var(--verd-borde); }
a.tarjeta--area:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }

/* Tarjeta destacada: filete superior de 3 px */
.tarjeta--destacada { border-top: var(--filete) solid var(--verd); padding-top: calc(var(--tarjeta-pad) - 2px); }

/* Tarjeta sobre banda oscura */
.tarjeta--oscura {
  background: var(--fosc-2);
  border-color: var(--linea-fosc);
  color: var(--tinta-inv);
}
.tarjeta--oscura .tarjeta__titulo { color: #FFFFFF; }
.tarjeta--oscura .tarjeta__texto  { color: var(--tinta-inv); }
.tarjeta--oscura .tarjeta__icono  { color: var(--verd-clar); }
.tarjeta--oscura .tarjeta__enlace { color: var(--verd-clar); }

/* Chip / etiqueta */
.chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--verd-suau);
  color: var(--verd);
  border-radius: var(--radio-chip);
  font-family: var(--font-titular);
  font-size: 0.75rem;
  font-weight: var(--peso-semi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}


/* ═══ 09. HERO Y BANDAS DE CIERRE ═════════════════════════════════════════ */

.hero {
  background: var(--fosc);
  color: var(--tinta-inv);
  /* Mismo alto de banda a 1280 px (115 px) y bastante menos entre 375 y 900,
     que es donde el hero se comia la pantalla entera. El tope baja de 128 a
     116 px: 128 solo salia de 1391 px en adelante y era crecer por crecer.
     A 1280 sigue dando 115,2 px, o sea que la referencia no se mueve. */
  padding-block: clamp(48px, 11.5vw - 32px, 116px);
}
.hero__contenido { max-width: 58ch; }
.hero h1 { color: #FFFFFF; max-width: 12em; }
.hero .kicker { color: var(--verd-clar); }
.hero .kicker::before { background: var(--verd-clar); }
.hero__entradilla {
  margin-top: var(--esp-5);
  font-size: var(--fs-entradilla);
  line-height: 1.55;
  color: var(--tinta-inv);
  max-width: 48ch;
}
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-7f);
}
.hero__pie {
  margin-top: var(--esp-6);
  font-size: var(--fs-peque);
  color: var(--tinta-inv-2);
}

/* Hero claro (paginas interiores y posts) */
.hero--claro {
  background: var(--superficie);
  color: var(--tinta);
  border-bottom: var(--borde);
  /* Igual que .hero: 72 px en escritorio, mas apretado por debajo de 900 px. */
  padding-block: clamp(32px, 6.25vw - 8px, 72px);
}
.hero--claro h1 { color: var(--tinta); }
.hero--claro .kicker { color: var(--verd); }
.hero--claro .kicker::before { background: var(--verd); }
.hero--claro .hero__contenido { max-width: 64ch; }
.hero--claro .hero__entradilla { color: var(--tinta-2); }
.hero--claro .hero__pie { color: var(--tinta-3); }

/* Banda de cierre (llamada a la accion). Una sola por pagina. */
.cierre {
  background: var(--fosc);
  color: var(--tinta-inv);
  padding-block: var(--seccion-y);
}
.cierre__interior { max-width: 60ch; }
.cierre h2 { color: #FFFFFF; }
.cierre p  { color: var(--tinta-inv); margin-top: var(--esp-4); }
.cierre .kicker { color: var(--verd-clar); }
.cierre .kicker::before { background: var(--verd-clar); }
.cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-6);
}


/* ═══ 10. BLOQUES DE CONTENIDO ════════════════════════════════════════════ */

/* ── Migas de pan ── */
.migas { padding-block: var(--esp-4); border-bottom: 1px solid var(--linea-suave); }
.migas__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  list-style: none;
  font-size: var(--fs-peque);
  color: var(--tinta-3);
}
.migas__item + .migas__item::before {
  content: "›";
  margin-right: var(--esp-2);
  color: var(--tinta-3);
}
.migas a { color: var(--tinta-2); text-decoration: none; }
.migas a:hover { color: var(--verd); text-decoration: underline; }

/* ── Indice de contenidos ── */
.indice {
  background: var(--superficie);
  border: var(--borde);
  border-left: var(--filete) solid var(--verd);
  border-radius: var(--radio);
  padding: var(--esp-5) var(--esp-6);
  margin-block: var(--esp-7);
}
.indice__titulo {
  font-family: var(--font-titular);
  font-size: var(--fs-kicker);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--verd);
  margin-bottom: var(--esp-4);
}
.indice__lista { list-style: none; }
.indice__lista li + li { margin-top: var(--esp-2); }
.indice__lista a { color: var(--tinta-2); text-decoration: none; }
.indice__lista a:hover { color: var(--verd); text-decoration: underline; }

/* ── FAQ (details/summary nativo) ── */
.faq { border-top: var(--borde); }
.faq__item {
  border-bottom: var(--borde);
  background: var(--superficie);
}
.faq__pregunta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-5) var(--esp-4);
  font-family: var(--font-titular);
  font-size: 1.05rem;
  font-weight: var(--peso-semi);
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
  min-height: 48px;
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  margin-top: 6px;
  border-right: 1.5px solid var(--verd);
  border-bottom: 1.5px solid var(--verd);
  transform: rotate(45deg);
  transition: transform var(--trans);
}
.faq__item[open] > .faq__pregunta::after { transform: rotate(-135deg); }
.faq__pregunta:hover { color: var(--verd); }
.faq__respuesta {
  padding: 0 var(--esp-4) var(--esp-5);
  color: var(--tinta-2);
  max-width: var(--ancho-texto);
}
.faq__respuesta > * + * { margin-top: var(--esp-3); }

/* ── Aviso / nota destacada ── */
.aviso {
  background: var(--verd-suau);
  border-left: var(--filete) solid var(--verd);
  border-radius: var(--radio);
  padding: var(--esp-5) var(--esp-6);
  color: var(--tinta-2);   /* 5.93:1 sobre verd-suau. NUNCA --tinta-3 aqui. */
}
.aviso__titulo {
  font-family: var(--font-titular);
  font-weight: var(--peso-semi);
  font-size: var(--fs-h4);
  color: var(--tinta);
  margin-bottom: var(--esp-2);
}
.aviso--neutro {
  background: var(--fondo-alt);
  border-left-color: var(--tinta-3);
}

/* ── Cita legal textual ── */
.cita {
  border-left: 2px solid var(--verd);
  padding-left: var(--esp-5);
  margin-block: var(--esp-6);
  font-style: italic;
  color: var(--tinta-2);
}
.cita__fuente {
  display: block;
  margin-top: var(--esp-3);
  font-style: normal;
  font-size: var(--fs-peque);
  color: var(--tinta-3);
}

/* ── Tablas (siempre dentro de .tabla-envoltorio) ── */
.tabla-envoltorio {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--esp-6);
  border: var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-peque);
  font-variant-numeric: tabular-nums;
}
.tabla th,
.tabla td {
  padding: var(--esp-3) var(--esp-4);
  text-align: left;
  border-bottom: 1px solid var(--linea-suave);
  vertical-align: top;
}
.tabla thead th {
  font-family: var(--font-titular);
  font-weight: var(--peso-semi);
  color: var(--tinta);
  background: var(--fondo-alt);
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}
.tabla tbody td { color: var(--tinta-2); }
.tabla tbody tr:last-child td { border-bottom: 0; }

/* ── Listas con marca de verificacion ── */
.lista-check { list-style: none; }
.lista-check li {
  position: relative;
  padding-left: var(--esp-6);
  color: var(--tinta-2);
}
.lista-check li + li { margin-top: var(--esp-3); }
.lista-check li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 12px;
  height: 6px;
  border-left: 1.5px solid var(--verd);
  border-bottom: 1.5px solid var(--verd);
  transform: rotate(-45deg);
}

/* ── Lista numerada de pasos ── */
.pasos { list-style: none; counter-reset: paso; }
.pasos > li {
  position: relative;
  counter-increment: paso;
  padding-left: var(--esp-8);
  min-height: 40px;
}
.pasos > li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--verd-suau);
  color: var(--verd);
  border-radius: var(--radio);
  font-family: var(--font-titular);
  font-weight: var(--peso-fuerte);
  font-size: 1rem;
}
.pasos__titulo { margin-bottom: var(--esp-2); }

/* Los pasos, en tantas columnas como QUEPAN de verdad.
   Antes eran tres fijas a partir de 1100 px de VENTANA, y eso mide la ventana
   en vez del hueco donde de verdad van los pasos. Dos consecuencias feas, las
   dos vistas en produccion:
     - En `.contenedor--texto`, que mide unos 700 px, tres columnas dejaban
       210 px por paso: una tira de dos o tres palabras por linea.
     - Toda lista cuyo numero de pasos no fuera multiplo de tres dejaba
       huerfanos. Con cuatro, el cuarto se quedaba solo en una fila entera con
       dos huecos al lado y parecia que la pagina se habia roto.
   Con `auto-fit` y un minimo de 21rem manda el ancho disponible: el navegador
   pone las columnas que caben con ancho de lectura decente, sean una o
   cuatro. El `min(100%, ...)` evita que en un movil el minimo desborde. Ya no
   hace falta media query ni anular el margen entre hermanos: el hueco lo pone
   siempre el `gap`. */
.pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: var(--esp-6);
  align-items: start;
}

/* `.contenedor--texto` mide unos 694 px y se queda a diez pixeles de admitir
   dos columnas de 21rem: por ese pelo, una guia de siete pasos se apilaba en
   una sola columna y montaba un scroll larguisimo, que es justo lo que se
   pidio evitar. Aqui el minimo baja a 19rem y salen dos columnas de ~331 px,
   que es ancho de tarjeta normal y sigue muy lejos de la tira de 210. */
.contenedor--texto .pasos {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

/* Cuatro pasos van SIEMPRE en 2x2. Es la unica cuenta que el ancho por si
   solo no acierta: en un contenedor ancho caben los cuatro en fila, pero
   entonces cada uno vuelve a ser una tira estrecha. El cuadrado se lee mejor
   y no deja huecos. El tope de ancho evita que en pantalla grande los dos
   pasos de cada fila se estiren hasta perder el renglon comodo. */
.pasos:has(> li:nth-child(4)):not(:has(> li:nth-child(5))) {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  max-width: 64rem;
}

/* ── Datos de contacto (NAP) ── */
.datos { list-style: none; }
.datos > li + li { margin-top: var(--esp-5); }
.dato__etiqueta {
  display: block;
  font-family: var(--font-titular);
  font-size: var(--fs-kicker);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--verd);
  margin-bottom: var(--esp-1);
}
.dato__valor { color: var(--tinta); font-size: var(--fs-base); }
.dato__valor a { color: var(--verd); }

/* ── Ficha de la titular ── */
.ficha {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-6);
  background: var(--superficie);
  border: var(--borde);
  border-radius: var(--radio-lg);
  padding: var(--esp-6);
  align-items: start;
}
.ficha__foto {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--borde);
  border-radius: var(--radio-lg);
}
.ficha__cuerpo > * + * { margin-top: var(--esp-3); }
.ficha__cargo { font-size: var(--fs-peque); color: var(--tinta-3); }
.ficha__texto { color: var(--tinta-2); }

/* ── Cifras / dato suelto (solo datos verificables) ── */
.dato-grande {
  font-family: var(--font-titular);
  /* Misma cifra en escritorio (2,75rem a partir de 1280 px) pero mucho menos
     inflada en tablet: a 768 px pasa de 37,8 px a 32 px. */
  font-size: clamp(1.75rem, 0.875rem + 2.34vw, 2.75rem);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--verd);
}
.seccion--oscura .dato-grande,
.hero .dato-grande { color: var(--verd-clar); }

/* ── Separador de seccion ── */
.filete { height: 1px; background: var(--linea); border: 0; margin: 0; }


/* ═══ 11. PROSA DE ARTICULO (BLOG) ════════════════════════════════════════ */

.prosa {
  max-width: var(--ancho-texto);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--tinta-2);
}
.prosa > * + * { margin-top: var(--esp-5); }

.prosa h2 {
  margin-top: var(--esp-8);
  padding-top: var(--esp-2);
  color: var(--tinta);
}
.prosa h3 {
  margin-top: var(--esp-7);
  color: var(--tinta);
}
.prosa h4 {
  margin-top: var(--esp-6);
  color: var(--tinta);
}
.prosa h2 + *, .prosa h3 + *, .prosa h4 + * { margin-top: var(--esp-4); }

.prosa p { color: var(--tinta-2); }
.prosa strong { color: var(--tinta); font-weight: var(--peso-semi); }

.prosa ul, .prosa ol { padding-left: var(--esp-5); }
.prosa li { margin-bottom: var(--esp-3); }
.prosa li::marker { color: var(--verd); }
.prosa ul ul, .prosa ol ol { margin-top: var(--esp-3); }

.prosa a { color: var(--verd); }
.prosa img { border-radius: var(--radio-lg); margin-block: var(--esp-6); }
.prosa figure { margin-block: var(--esp-6); }
.prosa figcaption {
  margin-top: var(--esp-3);
  font-size: var(--fs-peque);
  color: var(--tinta-3);
}
.prosa hr { margin-block: var(--esp-7); }

/* Cabecera de post */
.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  font-size: var(--fs-peque);
  color: var(--tinta-3);
  margin-top: var(--esp-5);
}
.post__meta time { font-variant-numeric: tabular-nums; }

/* Pie de post: autoria y descargo */
.post__pie {
  max-width: var(--ancho-texto);
  margin-top: var(--esp-8);
  padding-top: var(--esp-6);
  border-top: var(--borde);
}

/* Listado del blog */
.lista-posts { list-style: none; display: grid; gap: var(--grid-gap); }


/* ═══ 12. FORMULARIOS ═════════════════════════════════════════════════════ */

.formulario {
  max-width: var(--ancho-estrecho);
  background: var(--superficie);
  border: var(--borde);
  border-radius: var(--radio-lg);
  padding: var(--esp-6);
}
.formulario__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-5);
}

.campo { display: flex; flex-direction: column; }
.campo--ancho { grid-column: 1 / -1; }

.campo__etiqueta {
  font-family: var(--font-titular);
  font-size: var(--fs-peque);
  font-weight: var(--peso-medio);
  color: var(--tinta-2);
  margin-bottom: var(--esp-2);
}
.campo__obligatorio { color: var(--error); margin-left: 2px; }

.campo__control {
  width: 100%;
  min-height: 48px;
  padding: var(--esp-3) var(--esp-4);
  background: var(--superficie);
  color: var(--tinta);
  font-family: var(--font-texto);
  font-size: 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color var(--trans), box-shadow var(--trans);
}
.campo__control::placeholder { color: var(--tinta-3); }
.campo__control:hover { border-color: var(--tinta-3); }
.campo__control:focus {
  outline: none;
  border-color: var(--verd);
  box-shadow: var(--anillo-focus);
}
textarea.campo__control { min-height: 150px; resize: vertical; line-height: var(--lh-base); }
select.campo__control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%),
                    linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--esp-8);
}

.campo__ayuda { margin-top: var(--esp-2); font-size: var(--fs-peque); color: var(--tinta-3); }

/* Error: nunca solo color — siempre icono + texto */
.campo__error {
  display: none;
  align-items: flex-start;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
  font-size: var(--fs-peque);
  color: var(--error);
}
.campo__error::before {
  content: "!";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 16px; height: 16px;
  margin-top: 2px;
  background: var(--error);
  color: #FFFFFF;
  border-radius: 50%;
  font-family: var(--font-titular);
  font-size: 0.6875rem;
  font-weight: var(--peso-fuerte);
  line-height: 1;
}
.campo--error .campo__control { border-color: var(--error); background: var(--error-suau); }
.campo--error .campo__error { display: flex; }

/* Casilla de consentimiento */
.campo-check {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  grid-column: 1 / -1;
}
.campo-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--verd);
}
.campo-check label { font-size: var(--fs-peque); color: var(--tinta-2); line-height: 1.55; }

/* Trampa antispam: se oculta sin display:none para que los bots la rellenen */
.trampa {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formulario__acciones { margin-top: var(--esp-6); }


/* ═══ 13. PIE ═════════════════════════════════════════════════════════════ */

.pie {
  background: var(--fosc);
  color: var(--tinta-inv);
  padding-block: var(--esp-8) var(--esp-6);
}
.pie__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-7);
}
.pie__col > * + * { margin-top: var(--esp-3); }

.pie__titulo {
  font-family: var(--font-titular);
  font-size: var(--fs-kicker);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--verd-clar);
  margin-bottom: var(--esp-4);
}
.pie__texto { color: var(--tinta-inv-2); font-size: var(--fs-peque); }

.pie__lista { list-style: none; }
.pie__lista li + li { margin-top: var(--esp-3); }
.pie__lista a,
.pie a {
  color: var(--tinta-inv);
  font-size: var(--fs-peque);
  text-decoration: none;
}
.pie__lista a:hover,
.pie a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }

.pie__nap { font-style: normal; color: var(--tinta-inv); font-size: var(--fs-peque); line-height: 1.7; }
.pie__nap a { display: inline-block; }

.pie__logo { margin-bottom: var(--esp-4); }
.pie__logo .logo__nombre { color: #FFFFFF; }
.pie__logo .logo__claim  { color: var(--tinta-inv-2); }
.pie__logo .logo__marca  { background: var(--superficie); color: var(--fosc); }
.pie__logo:hover { color: #FFFFFF; }

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-4);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--esp-8);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--linea-fosc);
  font-size: var(--fs-peque);
  color: var(--tinta-inv-2);
}
.pie__legal-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-5);
  list-style: none;
}
.pie__firma { color: var(--tinta-inv-2); }
.pie__firma a { color: var(--tinta-inv); }


/* ═══ 14. BARRA FIJA DE CONTACTO RAPIDO (MOVIL) ═══════════════════════════ */

.barra-movil {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--linea-fosc);
  border-top: 1px solid var(--linea-fosc);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.barra-movil__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 56px;
  padding: var(--esp-3);
  background: var(--fosc);
  color: #FFFFFF;
  font-family: var(--font-titular);
  font-size: 0.9375rem;
  font-weight: var(--peso-semi);
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background var(--trans);
}
.barra-movil__btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.barra-movil__btn:hover { color: #FFFFFF; }
.barra-movil__btn--tel { background: var(--verd); }
.barra-movil__btn--tel:hover { background: var(--verd-fosc); }
.barra-movil__btn--wa:hover { background: var(--fosc-2); }


/* ═══ 15. MEDIA QUERIES ═══════════════════════════════════════════════════ */

/* ── ≥640 px: dos columnas de tarjetas ── */
@media (min-width: 640px) {
  .rejilla--2,
  .rejilla--3,
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .formulario__rejilla { grid-template-columns: repeat(2, 1fr); }
  .ficha { grid-template-columns: 240px 1fr; }
  .pie__rejilla { grid-template-columns: repeat(2, 1fr); }
}

/* ── ≥900 px: cuerpo a 17 px, prosa mas holgada ── */
@media (min-width: 900px) {
  body { font-size: var(--fs-base); }
  .columnas--2 { grid-template-columns: 1.4fr 1fr; }
  .columnas--mitades { grid-template-columns: 1fr 1fr; }
  .formulario { padding: var(--esp-7); }
}

/* ── ≥1024 px: navegacion completa, 3–4 columnas ── */
@media (min-width: 1024px) {
  .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
  .rejilla--4 { grid-template-columns: repeat(4, 1fr); }
  .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .nav { display: block; }
  .hamburguesa { display: none; }
  .menu-movil { display: none !important; }
}

/* ── ≥1140 px: telefono en la cabecera ──
   MEDIDO: con la navegacion completa desplegada, logo + nav + boton de
   telefono piden 1109 px. A 1024 px exactos el boton se salia (scrollWidth
   1109 vs innerWidth 1024) y provocaba desborde horizontal en TODAS las
   paginas; solo lo tapaba el overflow-x:hidden del body. Por debajo de
   1140 px el telefono sigue a un toque desde el enlace «Contacto» del menu. */
@media (min-width: 1140px) {
  .cabecera__cta { display: block; }
}

/* ── ≥1400 px: pantallas grandes de escritorio ──
   Todo lo de aqui empieza EXACTAMENTE donde acaban los minimos de --ancho-max
   y --ancho-estrecho, para que 1280 px (la referencia aprobada) no se entere
   de nada. Objetivo unico: aprovechar el ancho que sobra y recortar scroll. */
@media (min-width: 1400px) {
  /* MEDIDO: el <textarea rows="7"> daba 210,73 px de alto en TODOS los anchos,
     y con la caja del formulario ya ensanchada (1013 px a 1600, 1100 a 1700)
     cada linea cabe ~30 % mas de texto. 160 px son ~5 lineas anchas, o sea
     mas caracteres visibles que antes ocupando 50 px menos. No se toca el
     atributo rows del HTML y sigue con resize:vertical, asi que quien
     escriba mucho lo estira. */
  textarea.campo__control { height: 160px; min-height: 160px; }
}

/* ── ≥1600 px: cuatro columnas en los campos cortos del formulario ──
   MEDIDO: a partir de aqui la caja del formulario pasa de 1013 px, y nombre /
   apellidos / correo / telefono caben en una sola fila de 211 px de campo
   (232 px a 1920). Quita una fila entera. La ayuda del telefono SI pasa de
   una linea a dos con el campo mas estrecho — aun asi el saldo es claramente
   bueno: el formulario mide 854 px con dos columnas y 770 px con cuatro
   (-84 px) medido a 1600, que es el ancho peor de los dos.
   Por debajo de 1600 se queda en dos columnas, que es lo que hay hoy.
   Los .campo--ancho (area y mensaje) y .campo-check siguen a 1 / -1, asi que
   el select y el mensaje ocupan el ancho completo igual que ahora. */
@media (min-width: 1600px) {
  .formulario__rejilla { grid-template-columns: repeat(4, 1fr); }
}

/* ── <1024 px: barra fija de contacto rapido ── */
@media (max-width: 1023.98px) {
  :root { --barra-movil: 57px; }
  .barra-movil { display: grid; }
}
@media (min-width: 1024px) {
  .barra-movil { display: none; }
}

/* ── Movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .tarjeta--enlace:hover,
  a.tarjeta--area:hover { transform: none !important; }
}

/* ── Impresion ── */
@media print {
  .cabecera,
  .menu-movil,
  .barra-movil,
  .cierre,
  .saltar { display: none !important; }
  body { background: #FFFFFF; color: #000000; font-size: 11pt; }
  .pie { background: #FFFFFF; color: #000000; padding-block: var(--esp-4); }
  .pie a, .pie__nap, .pie__texto { color: #000000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .seccion { padding-block: var(--esp-5); }
}


/* ══ LOGO: gorila con balanza (identidad historica de Ajuridic) ══════════ */
.logo__marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  background: none; border: 0; border-radius: 0; color: inherit;
  font-size: 0; clip-path: none;
}
.logo__marca img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* El logo, cuando ya lleva dentro el gorila articulado (lo cambia gorila.js
   en el primer hover). El SVG trae margen alrededor de la figura, asi que se
   agranda un poco para que ocupe lo mismo que ocupaba el PNG y la cabecera no
   de ni un salto. */
.logo__marca--vivo { color: #FFFFFF; overflow: visible; }
.logo__marca--vivo svg {
  width: 128%;
  height: 128%;
  display: block;
  margin: -14% 0 0 -14%;
}
.pie__logo .logo__marca { width: 38px; height: 38px; }
@media (max-width: 640px) { .logo__marca { width: 36px; height: 36px; } }


/* ═══════════════════════════════════════════════════════════════════════════
   16. IMAGENES  (anadido 2026-08-06)
   Fotografia real del despacho y de las areas de practica.
   Regla unica: ninguna imagen se deforma. O se recorta con object-fit:cover
   dentro de un marco de proporcion fija, o se muestra entera con
   object-fit:contain sobre un fondo tenido de la marca (carteles con texto).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Marco de proporcion fija ── */
.marco {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--fondo-alt);
  border-radius: var(--radio-lg);
}
.marco > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.marco--16-9     { aspect-ratio: 16 / 9; }
.marco--cuadrado { aspect-ratio: 1 / 1; }

/* Carteles e infografias: llevan texto dentro, no se pueden recortar. */
.marco--contener { background: var(--verd-suau); }
.marco--contener > img { object-fit: contain; }

/* ── Figura suelta (prosa de articulo y secciones) ── */
.figura { margin: 0; }
.figura > img { border-radius: var(--radio-lg); }
.figura--destacada { margin-bottom: var(--esp-7); }
/* Carteles verticales o cuadrados: se limitan y se centran, sin recorte.
   Va con min(): un max-width fijo pisaba el max-width:100% del reset y la
   imagen desbordaba la pagina en pantallas mas estrechas que ese tope. */
.figura--retrato > img { max-width: min(380px, 100%); margin-inline: auto; }
.figura--cartel  > img { max-width: min(520px, 100%); margin-inline: auto; }
/* La prosa ya separa las figuras; la imagen interior no vuelve a separarse. */
.prosa .figura > img { margin-block: 0; }

/* ── Hero con imagen de apoyo: dos columnas en escritorio, apilado en movil ──
   El texto sigue sobre la banda solida (--fosc o blanco), asi que el contraste
   del hero no cambia: nunca hay texto encima de la fotografia. */
.hero--con-figura .contenedor {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-6);
  align-items: center;
}
.hero__figura { margin: 0; min-width: 0; }
.hero:not(.hero--claro) .hero__figura .marco {
  background: var(--fosc-2);
  box-shadow: 0 0 0 1px var(--linea-fosc);
}
.hero--claro .hero__figura .marco { box-shadow: 0 0 0 1px var(--linea); }

/* MEDIDO: en una sola columna la fotografia del hero se estira a todo el ancho
   del contenedor. A 768 px eso son 471 px de alto — mas de media pantalla util
   — y es lo que hacia que el hero de portada pidiese 1049 px. A partir de
   720 px ya cabe en dos columnas, asi que la foto baja a ~200 px de alto sin
   recortarla ni tocar el contenido. De 900 px en adelante nada cambia. */
@media (min-width: 720px) and (max-width: 899.98px) {
  .hero--con-figura .contenedor {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: var(--esp-6);
  }
}

@media (min-width: 900px) {
  .hero--con-figura .contenedor {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--esp-8);
  }
  .hero--con-figura .hero__contenido { max-width: 54ch; }
}

/* ── Miniatura a sangre en la cabecera de una tarjeta ── */
.tarjeta__figura {
  /* El sangrado tiene que seguir al padding de la tarjeta, que ahora es
     fluido: si no, la foto se descuadra en tablet. */
  margin: calc(var(--tarjeta-pad) * -1) calc(var(--tarjeta-pad) * -1) var(--esp-5);
  border-radius: calc(var(--radio-lg) - 1px) calc(var(--radio-lg) - 1px) 0 0;
}
/* En las tarjetas de area el chaflan lo recorta la propia tarjeta. */
.tarjeta--area > .tarjeta__figura { border-radius: 0; }

/* ══ EL GORILA QUE PASEA ══════════════════════════════════════════════════
   La mascota del despacho cobra un poco de vida. Cada mucho rato SALE DEL
   LOGO de la cabecera, baja al pie de la pagina y la cruza andando; por el
   camino se para, se yergue sobre las patas traseras, mece la balanza como
   si pesara, se golpea el pecho, mira alrededor y vuelve a cuatro patas.
   Tambien da un paso cuando pasas el raton por el logo.

   El dibujo es assets/gorila.svg: EL LOGO, no una version parecida. Todas
   las partes son recortes (<clipPath>) de una unica silueta calcada del PNG,
   asi que el contorno es el del logo punto por punto y lo unico que cambia
   es cuanto gira cada recorte sobre su articulacion. Quien lo pone en la
   pagina y encadena los gestos es assets/gorila.js.

   COMO ESTA MONTADO
   Cada parte tiene DOS fuentes de movimiento que nunca coinciden en el
   tiempo, porque dos cosas no pueden mandar a la vez sobre `transform`:
     - la POSE, que son variables --p-* con transicion. Se cambia el gesto
       y la figura se mueve sola de una postura a otra.
     - el CICLO, que son @keyframes. Todos empiezan y acaban EXACTAMENTE en
       el valor de la pose de su gesto, para que al entrar o salir del ciclo
       no haya ningun salto.
   El avance horizontal se pausa (`animation-play-state`) mientras el gorila
   esta parado haciendo algo: asi la velocidad sigue atada a la zancada y no
   patina por muchas paradas que haga.

   Todo el movimiento se cancela con prefers-reduced-motion: reduce.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Un paso al pasar el raton por el logo ── */
@keyframes gorila-paso {
  0%   { transform: translateY(0)    rotate(0deg);   }
  20%  { transform: translateY(-3px) rotate(-5deg);  }
  45%  { transform: translateY(0)    rotate(0deg);   }
  70%  { transform: translateY(-2px) rotate(4deg);   }
  100% { transform: translateY(0)    rotate(0deg);   }
}
.logo__marca img.gorila--paso {
  animation: gorila-paso 620ms cubic-bezier(.34, .8, .4, 1);
  transform-origin: 60% 90%;   /* pivota sobre las patas traseras */
}

/* ── EL PORTADOR: lo que comparten los dos gorilas ────────────────────────
   El mismo bicho sale en DOS sitios de la pagina, con las mismas
   articulaciones y el mismo repertorio de poses:

     .goria            el que espera en la esquina y abre el chat (GorIA).
                       Es un <button> de verdad: se pulsa y se enfoca.
     #gorila-paseante  el que cruza la pagina de vez en cuando. Decoracion
                       pura: pointer-events:none y aria-hidden.

   Todo lo que es "como esta hecho por dentro el bicho" -articulaciones,
   poses, ciclos- cuelga de .gorila-porta y lo comparten los dos. Lo que es
   "donde esta y como se desplaza por la pantalla" cuelga de cada uno.

   Cada copia del dibujo se monta con un prefijo propio en sus ids, asi que
   el CSS NO agarra las piezas por el id: las agarra por la clase gp-<pieza>,
   que les pone assets/gorila.js al montarlas.
   ------------------------------------------------------------------------ */
.gorila-porta {
  color: var(--verd-marca, #80883C);   /* el SVG se pinta con currentColor */

  --gorila-ciclo:  560ms;   /* una zancada completa: paso de animal pesado */
  --gorila-cambio: 900ms;   /* lo que tarda en pasar de una postura a otra */

  /* Pose en reposo: a cuatro patas, tal cual el logo. */
  --p-torso: 0;   --p-cabeza: 0;   --p-brazo: 0;    --p-antebrazo: 0;
  --p-brazo-l: 0; --p-pierna-c: 0; --p-tibia: 0;    --p-pierna-l: 0;
  --p-balanza: 0;
}
.gorila-porta svg {
  display: block;
  transform: scaleX(var(--gorila-flip, 1));
}

/* ── El paseante ──────────────────────────────────────────────────────────
   Capas encajadas, cada una con UN solo cometido, porque dos animaciones no
   pueden compartir la propiedad `transform` del mismo nodo:
     #gorila-paseante  baja desde el logo (translateY) y se funde
     .gorila__x        cruza la pagina    (translateX)   <- se pausa al parar
     .gorila__z        crece del tamano del logo al de paseo (scale)
     svg               mira hacia donde camina (scaleX)
   ------------------------------------------------------------------------ */
#gorila-paseante {
  position: fixed;
  left: 0;
  bottom: 11px;
  /* Por encima de la cabecera pegajosa (100) para que se le vea salir del
     logo, y por debajo del gorila de la esquina (2147483000): si se cruzan,
     el que manda es el pulsable. */
  z-index: 120;
  pointer-events: none;     /* jamas roba un clic */
  opacity: 0;
  will-change: transform, opacity;
}
#gorila-paseante .gorila__x {
  display: block;
  transform: translateX(var(--gorila-x0, -90px));
  will-change: transform;
}
#gorila-paseante .gorila__z { display: block; transform: scale(1); }
#gorila-paseante svg { width: 86px; height: 86px; }

/* ── Articulaciones ───────────────────────────────────────────────────────
   Los pivotes van en unidades del viewBox del SVG (0 0 158 158) gracias a
   `transform-box: view-box`. Los valores los imprime, al generar el dibujo,
   _migracion/articula-gorila.py: no se inventan aqui. */
.gorila-porta svg g   { transform-box: view-box; }
.gorila-porta .gp-caderas            { transform-origin:  37px 148px; } /* pie plantado */
.gorila-porta .gp-torso-cabeza       { transform-origin:  49px 100px; } /* cadera       */
.gorila-porta .gp-cabeza             { transform-origin:  84px  68px; } /* cuello       */
.gorila-porta .gp-brazo-cercano      { transform-origin:  88px  84px; } /* hombro       */
.gorila-porta .gp-antebrazo-cercano  { transform-origin: 100px 120px; } /* codo         */
.gorila-porta .gp-brazo-lejano       { transform-origin: 118px  98px; }
.gorila-porta .gp-pierna-cercana     { transform-origin:  46px  96px; } /* cadera       */
.gorila-porta .gp-tibia-cercana      { transform-origin:  44px 119px; } /* rodilla      */
.gorila-porta .gp-pierna-lejana      { transform-origin:  60px  92px; }
.gorila-porta .gp-balanza            { transform-origin:  76px  42px; } /* apoyo del astil */

/* ── La pose: cada parte lee su variable y la transicion hace el resto ── */
.gorila-porta .gp-torso-cabeza      { transform: rotate(calc(var(--p-torso)     * 1deg)); }
.gorila-porta .gp-cabeza            { transform: rotate(calc(var(--p-cabeza)    * 1deg)); }
.gorila-porta .gp-brazo-cercano     { transform: rotate(calc(var(--p-brazo)     * 1deg)); }
.gorila-porta .gp-antebrazo-cercano { transform: rotate(calc(var(--p-antebrazo) * 1deg)); }
.gorila-porta .gp-brazo-lejano      { transform: rotate(calc(var(--p-brazo-l)   * 1deg)); }
.gorila-porta .gp-pierna-cercana    { transform: rotate(calc(var(--p-pierna-c)  * 1deg)); }
.gorila-porta .gp-tibia-cercana     { transform: rotate(calc(var(--p-tibia)     * 1deg)); }
.gorila-porta .gp-pierna-lejana     { transform: rotate(calc(var(--p-pierna-l)  * 1deg)); }
.gorila-porta .gp-balanza           { transform: rotate(calc(var(--p-balanza)   * 1deg)); }
.gorila-porta .gp-torso-cabeza,
.gorila-porta .gp-cabeza,
.gorila-porta .gp-brazo-cercano,
.gorila-porta .gp-antebrazo-cercano,
.gorila-porta .gp-brazo-lejano,
.gorila-porta .gp-pierna-cercana,
.gorila-porta .gp-tibia-cercana,
.gorila-porta .gp-pierna-lejana,
.gorila-porta .gp-balanza {
  transition: transform var(--gorila-cambio) cubic-bezier(.4, .05, .25, 1);
}

/* ── La pose de erguido ──────────────────────────────────────────────────
   Se incorpora sobre las patas traseras: el torso bascula sobre la cadera,
   las patas se enderezan un poco, el brazo queda colgando y la cabeza se
   endereza para que no acabe mirando al cielo. La balanza compensa el giro
   del torso y queda a nivel: es el momento en que se le ve bien. */
.gorila-porta[data-gesto="erguir"],
.gorila-porta[data-gesto="pesar"],
.gorila-porta[data-gesto="pecho"],
.gorila-porta[data-gesto="oteo"],
.gorila-porta[data-gesto="saludar"],
.gorila-porta[data-gesto="comer"] {
  --p-torso: -28; --p-cabeza: 16; --p-brazo: 30; --p-antebrazo: 11;
  --p-pierna-c: 9; --p-pierna-l: 12; --p-balanza: 28;
}
/* Erguido y girando la cabeza para mirar alrededor. */
.gorila-porta[data-gesto="oteo"]  { --p-cabeza: 34; }
/* A cuatro patas, girando la cabeza: hacia el visitante y hacia el frente. */
.gorila-porta[data-gesto="mirar"]  { --p-cabeza: -11; }
.gorila-porta[data-gesto="frente"] { --p-cabeza:  13; }
/* Bajar es volver a la pose de reposo: no hace falta declarar nada. */

/* ── EL PLATANO ───────────────────────────────────────────────────────────
   Lo unico del dibujo que no es el logo. Vive escondido en la mano y solo
   existe mientras el gorila come: fuera de ese gesto, opacidad cero y sin
   transicion de entrada, para que no se le vea asomar al cambiar de pose.

   VA EN OTRO COLOR, Y NO ES UN CAPRICHO: el gorila es una silueta plana de un
   solo color, asi que un platano verde en una mano verde no es un platano, es
   un bulto. En un boton de 66px la unica forma de que se lea es que tenga
   color propio y un filo del color del disco que lo despegue de la mano.
   El ocre es el mismo tono calido de las fotos del sitio; sobre el disco
   #F6F6F1 da 2.6:1, de sobra para una forma de 20px que ademas se mueve, y no
   transporta ninguna informacion: es decoracion pura. */
.gorila-porta .gp-platano {
  opacity: 0;
  /* Mengua HACIA LA BOCA: el origen es el extremo que esta dentro del morro,
     no el centro, o el platano se encogeria por los dos lados a la vez. */
  transform-origin: 118px 83px;
}
.gorila-porta .gp-platano path {
  fill: #C08A2A;
  stroke: #F6F6F1;
  stroke-width: 2.2;
  paint-order: stroke;   /* el filo por debajo del relleno: no lo adelgaza */
}

/* ── Salida del logo: BAJA TREPANDO, no se cae ───────────────────────────
   Antes era una caida: un translateY suave de arriba abajo, como una gota.
   Nico: "el efecto cascada del gorila q baja hasta la parte inferior de la
   pantalla es raro, los gorilas escalan". Y es verdad: un gorila no cae, baja
   agarrandose. Asi que ahora la bajada va a TIRONES —cuatro agarres, cada uno
   con su descenso y su frenada— y el cuerpo se descuelga a un lado y a otro,
   como quien busca el siguiente apoyo con la mano libre.

   El vaiven horizontal va DENTRO de este mismo `transform`, y no en otra
   capa, porque la de al lado (.gorila__x) lleva el recorrido por la pagina y
   dos animaciones no pueden compartir la misma propiedad.

   Los brazos y las patas los mueve .gorila--baja, mas abajo. */
@keyframes gorila-sale-del-logo {
  0%   { transform: translate(0,    var(--gorila-y0, -240px));            opacity: 0;   }
  12%  { opacity: .95; }
  20%  { transform: translate(-6px, calc(var(--gorila-y0, -240px) * .74)); }
  26%  { transform: translate(-6px, calc(var(--gorila-y0, -240px) * .72)); }  /* agarre */
  42%  { transform: translate(6px,  calc(var(--gorila-y0, -240px) * .50)); }
  48%  { transform: translate(6px,  calc(var(--gorila-y0, -240px) * .48)); }  /* agarre */
  64%  { transform: translate(-5px, calc(var(--gorila-y0, -240px) * .27)); }
  70%  { transform: translate(-5px, calc(var(--gorila-y0, -240px) * .25)); }  /* agarre */
  88%  { transform: translate(3px,  calc(var(--gorila-y0, -240px) * .05)); }
  100% { transform: translate(0,    0);                                    opacity: .95; }
}
@keyframes gorila-crece {
  from { transform: scale(var(--gorila-s0, .6)); }
  to   { transform: scale(1); }
}

/* ── Recorrido: de donde ha aterrizado hasta fuera de la pantalla ── */
@keyframes gorila-cruza {
  0%   { transform: translateX(var(--gorila-x0, -90px));  opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translateX(var(--gorila-x1, 120vw));  opacity: 0; }
}

/* ── EL CICLO DE MARCHA ───────────────────────────────────────────────────
   Andar de verdad, y no flotar, exige tres cosas a la vez:
     1. cada extremidad gira sobre su articulacion y lleva dentro un
        antebrazo o una tibia que gira sobre el codo o la rodilla con un
        poco de adelanto, para que la pata se doble en vez de ser un palo;
     2. las diagonales opuestas van juntas -mano cercana con pata trasera
        lejana- y media zancada por detras de la otra diagonal, que es como
        se mueve un cuadrupedo;
     3. el cuerpo sube y baja dos veces por ciclo, una por cada apoyo.
   Todos los fotogramas 0% y 100% valen 0, que es la pose de reposo: por eso
   se puede entrar y salir del ciclo sin ningun salto.
   Los angulos son cortos a proposito. Es un despacho de abogados. */
@keyframes gorila-brazo    { 0%,100% { transform: rotate(0deg);  } 25% { transform: rotate(13deg);  } 75% { transform: rotate(-13deg); } }
@keyframes gorila-brazo-x  { 0%,100% { transform: rotate(0deg);  } 25% { transform: rotate(-13deg); } 75% { transform: rotate(13deg);  } }
@keyframes gorila-antebr   { 0%,100% { transform: rotate(0deg);  } 15% { transform: rotate(-7deg);  } 50% { transform: rotate(0deg); } 65% { transform: rotate(7deg);  } }
@keyframes gorila-pierna   { 0%,100% { transform: rotate(0deg);  } 25% { transform: rotate(13deg);  } 75% { transform: rotate(-13deg); } }
@keyframes gorila-pierna-x { 0%,100% { transform: rotate(0deg);  } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg);  } }
@keyframes gorila-tibia    { 0%,100% { transform: rotate(0deg);  } 15% { transform: rotate(10deg);  } 50% { transform: rotate(0deg); } 65% { transform: rotate(-10deg); } }
@keyframes gorila-vaiven   { 0%,50%,100% { transform: translateY(0); } 25%,75% { transform: translateY(-1.6px); } }

/* ── CUATRO TIEMPOS, NO DOS ───────────────────────────────────────────────
   ESTO ESTABA MAL Y LO CAZO NICO: *"cuando anda, las dos patas delanteras las
   mueve a la vez, en vez de mover primero una y luego otra"*.

   La culpa era del reparto. Las dos diagonales iban en CONTRAFASE EXACTA -una
   a 0%, la otra a 50%-, y eso no es andar: es TROTAR. En un trote las patas
   caen de dos en dos, que es justo lo que se veia. Medido en pantalla, ocho
   fotogramas del ciclo: brazo cercano +13 y pata lejana +13 a la vez, brazo
   lejano -13 y pata cercana -10 a la vez. Dos tiempos.

   Un cuadrupedo andando hace CUATRO tiempos: cada pata apoya a un cuarto de
   ciclo de la anterior, en secuencia lateral (trasera, delantera del mismo
   lado, trasera del otro, delantera del otro). Nunca hay dos pisando a la vez.

   No hacen falta fotogramas nuevos: los mismos, desfasados un cuarto de ciclo
   cada uno con animation-delay negativo. Y el antebrazo y la tibia se
   desfasan con SU pata, no por su cuenta, o se descoyuntan.

   Efecto secundario asumido: con los desfases, las patas ya no valen 0 al
   empezar el ciclo, asi que al entrar en "andar" hay un salto de hasta 13
   grados. Es un grado y medio de pantalla y se entra en marcha, no desde
   parado, asi que no se ve. Trotar si se veia. */
.gorila-porta[data-gesto="andar"] .gp-figura            { animation: gorila-vaiven   var(--gorila-ciclo) ease-in-out infinite; }

/* SECUENCIA DIAGONAL, que es la de los primates: cada pata trasera va seguida
   de la mano del LADO CONTRARIO. Los cuadrupedos corrientes hacen secuencia
   lateral (trasera y mano del mismo lado); los gorilas, no. Ya que habia que
   repartir los cuatro tiempos, se reparten como los reparte el bicho.
     1o pata trasera cercana · 2o mano lejana · 3o pata trasera lejana ·
     4o mano cercana */
.gorila-porta[data-gesto="andar"] .gp-pierna-cercana    { animation: gorila-pierna   var(--gorila-ciclo) ease-in-out infinite; }
.gorila-porta[data-gesto="andar"] .gp-tibia-cercana     { animation: gorila-tibia    var(--gorila-ciclo) ease-in-out infinite; }
.gorila-porta[data-gesto="andar"] .gp-brazo-lejano      { animation: gorila-brazo    var(--gorila-ciclo) ease-in-out infinite;
                                                          animation-delay: calc(var(--gorila-ciclo) * -0.25); }
.gorila-porta[data-gesto="andar"] .gp-pierna-lejana     { animation: gorila-pierna   var(--gorila-ciclo) ease-in-out infinite;
                                                          animation-delay: calc(var(--gorila-ciclo) * -0.5); }
.gorila-porta[data-gesto="andar"] .gp-brazo-cercano     { animation: gorila-brazo    var(--gorila-ciclo) ease-in-out infinite; }
.gorila-porta[data-gesto="andar"] .gp-antebrazo-cercano { animation: gorila-antebr   var(--gorila-ciclo) ease-in-out infinite; }
/* El antebrazo se desfasa CON su brazo, no por su cuenta, o se descoyunta. */
.gorila-porta[data-gesto="andar"] .gp-brazo-cercano,
.gorila-porta[data-gesto="andar"] .gp-antebrazo-cercano { animation-delay: calc(var(--gorila-ciclo) * -0.75); }

/* ── MECER LA BALANZA ─────────────────────────────────────────────────────
   Erguido, la levanta y la deja caer despacio a un lado y a otro, como quien
   pesa. Empieza y acaba en 28deg, que es la balanza a nivel de la pose de
   erguido: entra y sale del gesto sin ningun tiron. El torso la acompana
   apenas un grado y medio, lo justo para que no parezca una pieza suelta. */
@keyframes gorila-pesa {
  0%, 100% { transform: rotate(28deg); }
  30%      { transform: rotate(42deg); }
  70%      { transform: rotate(15deg); }
}
@keyframes gorila-pesa-torso {
  0%, 100% { transform: rotate(-28deg);   }
  30%      { transform: rotate(-26.5deg); }
  70%      { transform: rotate(-29.5deg); }
}
.gorila-porta[data-gesto="pesar"] .gp-balanza      { animation: gorila-pesa       1500ms cubic-bezier(.45,.05,.4,1) infinite; }
.gorila-porta[data-gesto="pesar"] .gp-torso-cabeza { animation: gorila-pesa-torso 1500ms cubic-bezier(.45,.05,.4,1) infinite; }

/* ── GOLPEARSE EL PECHO ───────────────────────────────────────────────────
   Tres golpes cortos y secos del brazo cercano contra el pecho, con el
   cuerpo acusando cada uno. Sobrio: ni salta, ni se dobla, ni grita. Sale y
   entra en 30deg / 11deg / -28deg, la pose de erguido. */
@keyframes gorila-pecho-brazo {
  0%, 100%      { transform: rotate(30deg); }
  10%, 40%, 70% { transform: rotate(80deg); }
  25%, 55%, 85% { transform: rotate(44deg); }
}
@keyframes gorila-pecho-antebrazo {
  0%, 100%      { transform: rotate(11deg); }
  10%, 40%, 70% { transform: rotate(50deg); }
  25%, 55%, 85% { transform: rotate(22deg); }
}
@keyframes gorila-pecho-torso {
  0%, 100%      { transform: rotate(-28deg); }
  10%, 40%, 70% { transform: rotate(-31deg); }
  25%, 55%, 85% { transform: rotate(-27deg); }
}
.gorila-porta[data-gesto="pecho"] .gp-brazo-cercano     { animation: gorila-pecho-brazo     1500ms cubic-bezier(.3,.7,.3,1) both; }
.gorila-porta[data-gesto="pecho"] .gp-antebrazo-cercano { animation: gorila-pecho-antebrazo 1500ms cubic-bezier(.3,.7,.3,1) both; }
.gorila-porta[data-gesto="pecho"] .gp-torso-cabeza      { animation: gorila-pecho-torso     1500ms cubic-bezier(.3,.7,.3,1) both; }

/* ── SALUDAR ──────────────────────────────────────────────────────────────
   Se yergue y hace DOS INCLINACIONES cortas, con la cabeza acompanando. No
   levanta la mano, y no es por pudor: el recorte del brazo cercano arrastra
   todo el cuarto delantero, del hombro al suelo, y en cuanto se gira lo justo
   para levantar la mano esa masa barre la cara. Probado a -19deg y a -33deg:
   en los dos casos el gorila se queda sin cabeza. Una reverencia mueve el
   bloque entero y se lee de sobra a 66px, que es el tamano real del boton.
   La balanza baja con el torso para seguir a nivel: si se quedara quieta,
   parecerian dos dibujos pegados. */
@keyframes gorila-saluda-torso {
  0%, 100% { transform: rotate(-28deg); }
  24%, 64% { transform: rotate(-12deg); }
  44%, 84% { transform: rotate(-30deg); }
}
@keyframes gorila-saluda-cabeza {
  0%, 100% { transform: rotate(16deg); }
  24%, 64% { transform: rotate(28deg); }
  44%, 84% { transform: rotate(14deg); }
}
@keyframes gorila-saluda-balanza {
  0%, 100% { transform: rotate(28deg); }
  24%, 64% { transform: rotate(12deg); }
  44%, 84% { transform: rotate(30deg); }
}
.gorila-porta[data-gesto="saludar"] .gp-torso-cabeza { animation: gorila-saluda-torso   2600ms cubic-bezier(.35,.6,.35,1) both; }
.gorila-porta[data-gesto="saludar"] .gp-cabeza       { animation: gorila-saluda-cabeza  2600ms cubic-bezier(.35,.6,.35,1) both; }
.gorila-porta[data-gesto="saludar"] .gp-balanza      { animation: gorila-saluda-balanza 2600ms cubic-bezier(.35,.6,.35,1) both; }

/* ── COMER UN PLATANO ─────────────────────────────────────────────────────
   Asoma un platano por la boca, mengua en tres mordiscos y desaparece. La
   cabeza mastica a la vez. El brazo NO se mueve: ver el comentario de arriba.
   El platano se encoge hacia el morro (transform-origin en la boca), asi que
   los mordiscos se leen como mordiscos y no como un platano que se aleja. */
@keyframes gorila-platano {
  0%,  6%           { opacity: 0; transform: scale(1);    }
  12%, 30%          { opacity: 1; transform: scale(1);    }
  40%, 54%          { opacity: 1; transform: scale(.68);  }
  64%, 84%          { opacity: 1; transform: scale(.36);  }
  94%, 100%         { opacity: 0; transform: scale(.10);  }
}
/* Los bocados: la cabeza baja sobre el platano y vuelve, tres veces. */
@keyframes gorila-come-cabeza {
  0%, 8%, 96%, 100% { transform: rotate(16deg); }
  34%, 58%, 88%     { transform: rotate(23deg); }
  44%, 68%, 92%     { transform: rotate(16deg); }
}
.gorila-porta[data-gesto="comer"] .gp-platano { animation: gorila-platano    4200ms cubic-bezier(.4,.1,.3,1) both; }
.gorila-porta[data-gesto="comer"] .gp-cabeza  { animation: gorila-come-cabeza 4200ms cubic-bezier(.4,.1,.3,1) both; }

/* ── DARSE LA VUELTA ──────────────────────────────────────────────────────
   Gira sobre si mismo y vuelve a quedar mirando a donde estaba. El truco es
   el mismo que usa el paseante para cambiar de sentido -scaleX-, pero pasando
   por cero: al aplastarse y volver a abrirse hacia el otro lado se lee como
   un giro y no como un espejo instantaneo. Mientras gira, mueve las patas:
   son los mismos fotogramas de la marcha, asi que da pasos de verdad.
   Ojo: la regla va sobre el <svg>, que es quien lleva el scaleX del flip. */
@keyframes gorila-gira {
  0%   { transform: scaleX(calc(var(--gorila-flip, 1) *  1));   }
  24%  { transform: scaleX(calc(var(--gorila-flip, 1) *  .08)); }
  50%  { transform: scaleX(calc(var(--gorila-flip, 1) * -1));   }
  76%  { transform: scaleX(calc(var(--gorila-flip, 1) * -.08)); }
  100% { transform: scaleX(calc(var(--gorila-flip, 1) *  1));   }
}
/* MEDIA vuelta: se queda mirando al otro lado y ahi se queda, hasta que otro
   "voltear" lo devuelva. Es lo que faltaba: con solo la vuelta entera el bicho
   acababa SIEMPRE mirando a la derecha y parecia que no se movia nunca.
   El fotograma final vale exactamente lo que valdra el estado en reposo cuando
   gorila.js le de la vuelta a --gorila-flip: por eso no hay salto al acabar. */
@keyframes gorila-voltea {
  0%   { transform: scaleX(calc(var(--gorila-flip, 1) *  1));   }
  55%  { transform: scaleX(calc(var(--gorila-flip, 1) *  .07)); }
  100% { transform: scaleX(calc(var(--gorila-flip, 1) * -1));   }
}
.gorila-porta[data-gesto="girar"] svg                  { animation: gorila-gira     2800ms cubic-bezier(.45,.05,.55,.95) both; }
.gorila-porta[data-gesto="voltear"] svg                { animation: gorila-voltea   1500ms cubic-bezier(.45,.05,.55,.95) both; }
.gorila-porta[data-gesto="voltear"] .gp-figura         { animation: gorila-vaiven   var(--gorila-ciclo) ease-in-out infinite; }
.gorila-porta[data-gesto="voltear"] .gp-brazo-cercano  { animation: gorila-brazo    var(--gorila-ciclo) ease-in-out infinite; }
.gorila-porta[data-gesto="voltear"] .gp-pierna-lejana  { animation: gorila-pierna   var(--gorila-ciclo) ease-in-out infinite; }
.gorila-porta[data-gesto="voltear"] .gp-brazo-lejano   { animation: gorila-brazo-x  var(--gorila-ciclo) ease-in-out infinite; }
.gorila-porta[data-gesto="voltear"] .gp-pierna-cercana { animation: gorila-pierna-x var(--gorila-ciclo) ease-in-out infinite; }
.gorila-porta[data-gesto="voltear"] .gp-tibia-cercana  { animation: gorila-tibia    var(--gorila-ciclo) ease-in-out infinite; }
.gorila-porta[data-gesto="girar"] .gp-figura           { animation: gorila-vaiven   var(--gorila-ciclo) ease-in-out infinite; }
.gorila-porta[data-gesto="girar"] .gp-brazo-cercano    { animation: gorila-brazo    var(--gorila-ciclo) ease-in-out infinite; }
.gorila-porta[data-gesto="girar"] .gp-pierna-lejana    { animation: gorila-pierna   var(--gorila-ciclo) ease-in-out infinite; }
.gorila-porta[data-gesto="girar"] .gp-brazo-lejano     { animation: gorila-brazo-x  var(--gorila-ciclo) ease-in-out infinite; }
.gorila-porta[data-gesto="girar"] .gp-pierna-cercana   { animation: gorila-pierna-x var(--gorila-ciclo) ease-in-out infinite; }
.gorila-porta[data-gesto="girar"] .gp-tibia-cercana    { animation: gorila-tibia    var(--gorila-ciclo) ease-in-out infinite; }

/* ── El avance ────────────────────────────────────────────────────────────
   La bajada del logo y el crecimiento van siempre; el avance horizontal solo
   corre mientras el gesto es "andar". Al pararse a hacer de gorila, el
   translateX se congela donde este: por eso la zancada nunca patina. */
#gorila-paseante.gorila--anda        { animation: gorila-sale-del-logo 1150ms cubic-bezier(.5,.02,.35,1) forwards; }
#gorila-paseante.gorila--anda .gorila__z { animation: gorila-crece     1150ms cubic-bezier(.5,.02,.35,1) forwards; }
/* Arranca 100 ms antes de terminar la bajada, para que el aterrizaje y el
   primer paso se solapen y no se note la costura. */
#gorila-paseante.gorila--anda .gorila__x { animation: gorila-cruza var(--gorila-dur, 18000ms) linear 1050ms forwards; }
#gorila-paseante:not([data-gesto="andar"]) .gorila__x { animation-play-state: paused; }

/* ── Mientras baja, mueve las extremidades ───────────────────────────────
   Se reaprovechan los fotogramas de la marcha, pero MAS RAPIDOS: un gorila
   que se descuelga manotea mas que uno que pasea. No se inventan angulos
   nuevos porque no hace falta: lo que hace que se lea como trepar es el
   descenso a tirones de arriba, no la amplitud del brazo.
   La clase la pone y la quita gorila.js, que es quien sabe cuando acaba. */
/* ── SALIR DEL BOTON DEL CHAT: no baja de ningun sitio ───────────────────
   Nico: "te habia pedido q saliera andando". Y era verdad: salia con la
   animacion de descolgarse del logo, que ahi no pinta nada -el boton ya esta
   en el suelo- y ademas le comia el primer segundo largo antes de dar un
   paso. Saliendo del boton solo se destapa y anda: aparece en 420 ms, crece a
   la vez y el avance arranca casi enseguida en vez de al segundo. */
@keyframes gorila-asoma {
  0%   { transform: translate(0, var(--gorila-y0, 0px)); opacity: 0;   }
  100% { transform: translate(0, 0);                     opacity: .95; }
}
#gorila-paseante.gorila--anda.gorila--del-boton          { animation: gorila-asoma 420ms ease-out forwards; }
#gorila-paseante.gorila--anda.gorila--del-boton .gorila__z { animation: gorila-crece 420ms ease-out forwards; }
#gorila-paseante.gorila--anda.gorila--del-boton .gorila__x { animation-delay: 260ms; }

#gorila-paseante.gorila--baja { --gorila-ciclo: 340ms; }
#gorila-paseante.gorila--baja .gp-figura            { animation: gorila-vaiven   var(--gorila-ciclo) ease-in-out infinite; }
#gorila-paseante.gorila--baja .gp-brazo-cercano     { animation: gorila-brazo    var(--gorila-ciclo) ease-in-out infinite; }
#gorila-paseante.gorila--baja .gp-antebrazo-cercano { animation: gorila-antebr   var(--gorila-ciclo) ease-in-out infinite; }
#gorila-paseante.gorila--baja .gp-brazo-lejano      { animation: gorila-brazo-x  var(--gorila-ciclo) ease-in-out infinite; }
#gorila-paseante.gorila--baja .gp-pierna-cercana    { animation: gorila-pierna-x var(--gorila-ciclo) ease-in-out infinite; }
#gorila-paseante.gorila--baja .gp-pierna-lejana     { animation: gorila-pierna   var(--gorila-ciclo) ease-in-out infinite; }
#gorila-paseante.gorila--baja .gp-tibia-cercana     { animation: gorila-tibia    var(--gorila-ciclo) ease-in-out infinite; }

/* ── LO QUE DICE EL PASEANTE ──────────────────────────────────────────────
   Un globo sobrio encima del bicho, que sale solo cuando se para a hacer algo
   (lo gobierna gorila.js). Decoracion: aria-hidden y sin pointer-events, como
   el resto del paseante, para que no robe un clic ni salga en un lector.

   Va anclado al paseante y NO a la capa que cruza, asi que no hereda el
   translateX y viaja pegado a el sin necesidad de recalcular nada.

   El ancho maximo esta en ch a proposito: si crece mas, deja de leerse de un
   vistazo, que es lo unico que se puede pedir a un bocadillo que aparece dos
   segundos. Y se ancla por la izquierda para que no se salga por el borde
   derecho cuando el gorila va llegando al final de la pantalla. */
#gorila-paseante .gorila__globo {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 6px);
  transform: translateX(-30%) translateY(6px);
  /* En ch salia una columna de dos palabras por linea: con 13px, 26ch son
     unos 170px. Se fija en pixeles y con `width: max-content` para que las
     frases cortas no se estiren y las largas partan en dos o tres lineas
     legibles. Visto en captura antes de dejarlo. */
  width: max-content;
  max-width: 250px;
  white-space: normal;
  text-wrap: balance;
  font-family: var(--font-texto, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  padding: 9px 13px;
  border-radius: var(--radio, 6px);
  background: var(--verd, #5A6127);
  color: #F6F6F1;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
#gorila-paseante .gorila__globo--visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-30%) translateY(0);
}
@media (max-width: 640px) {
  #gorila-paseante .gorila__globo { font-size: 12px; max-width: 200px; padding: 8px 11px; }
}

/* En movil se hace mas pequeno y se aparta de la barra fija de contacto */
/* El interlineado del cuerpo, mas apretado en movil. Ver el comentario de
   --lh-base: aqui si vale, porque es un valor fijo por tramo. */
@media (max-width: 640px) {
  :root { --lh-base: 1.52; }
}

@media (max-width: 640px) {
  #gorila-paseante { bottom: 68px; }
  #gorila-paseante svg { width: 64px; height: 64px; }
}

/* ── Respeto absoluto a quien pide menos movimiento ───────────────────────
   Esto es lo primero, no lo ultimo: a esta web llega gente agobiada por una
   multa o un accidente, y hay a quien el movimiento le marea o le dispara
   una migrana. Con `reduce` NO HAY PASEO: gorila.js ni siquiera crea al
   paseante, y por si acaso aqui tampoco se mueve ni se ve.

   OJO CON LA LINEA QUE SEPARA UNA COSA DE LA OTRA: lo que desaparece es la
   ANIMACION, no el asistente. El gorila de la esquina sigue ahi, quieto,
   visible y pulsable, y sigue irguiendose al abrir el chat: eso es un cambio
   de estado instantaneo (sin transicion), no una animacion. La accesibilidad
   del chat no puede depender de que algo se mueva. */
@media (prefers-reduced-motion: reduce) {
  .logo__marca img.gorila--paso,
  .gorila-porta,
  .gorila-porta *,
  .goria,
  .goria * {
    animation: none !important;
    transition: none !important;
  }
  #gorila-paseante { display: none !important; }
}


/* ══ GorIA: EL GORILA ES EL ASISTENTE ═════════════════════════════════════
   Antes habia dos cosas peleandose por la esquina inferior derecha: el
   gorila, que solo paseaba, y un boton redondo con una carita generica que
   abria el chat. Se han fundido. El gorila de la esquina ES el disparador
   del chat, y el asistente se llama GorIA.

   COMO SE HA RESUELTO LO DELICADO
   - Es un <button> de verdad (kai/goria-widget.html), con aria-label,
     aria-expanded y aria-controls. Se llega con Tab, se abre con Enter o
     Espacio y se cierra con Escape. Nada de divs con onclick.
   - El paseante NO es pulsable: sigue con pointer-events:none y aria-hidden.
     Lo unico que responde al raton es esta esquina, que es donde el gorila
     esta parado y donde el visitante espera encontrar el chat. Asi jamas se
     roba un clic a un enlace mientras el gorila cruza la pagina.
   - El area pulsable es el disco, no una caja grande: 66px de lado con
     border-radius:50%, que ademas deja fuera las cuatro esquinas del cuadro.
     El dibujo puede desbordar el disco (se agranda al erguirse) sin que ese
     desbordamiento capture nada: el <svg> va con pointer-events:none.
   ═══════════════════════════════════════════════════════════════════════ */
.goria {
  --goria-lado: 66px;

  /* MIRANDO HACIA DENTRO DE LA PAGINA, no hacia el borde. El logo de la
     cabecera mira a la derecha porque esta a la izquierda del todo y tiene la
     pagina delante; este esta en la esquina de abajo a la derecha, asi que
     mirando a la derecha se queda de espaldas a todo. Lo dijo Nico: "su
     posicion normal tendria q ser mirando a la izquierda". El gesto
     "voltear" lo va cambiando, y al abrir el chat vuelve a este. */
  --gorila-flip: -1;

  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 2147483000;
  width: var(--goria-lado);
  height: var(--goria-lado);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* El dibujo sobresale del disco cuando se yergue. */
  overflow: visible;
  transition: transform .2s ease;
}
/* El disco: le da cuerpo de boton al bicho y le garantiza contraste sea cual
   sea el fondo de la pagina que quede debajo. */
.goria::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #F6F6F1;
  /* El aro tiene que verse tambien sobre el fondo papel del sitio, que es
     casi el mismo color que el disco: sin el, el boton se disolveria en las
     bandas claras. */
  box-shadow:
    inset 0 0 0 1px rgba(90, 97, 39, .36),
    0 10px 30px -8px rgba(0, 0, 0, .45);
}
.goria:hover { transform: translateY(-3px); }
.goria:focus-visible {
  outline: 3px solid var(--focus, #6B7330);
  outline-offset: 3px;
}
/* Reserva del foco para navegadores sin :focus-visible. */
.goria:focus:not(:focus-visible) { outline: none; }

/* ── EL BOTON MIENTRAS GorIA ESTA DE PASEO ───────────────────────────────
   Idea de Nico: que el gorila del chat se salga un rato y el boton quede
   vacio. Se va el dibujo; NO se va el boton.

   Esto ultimo es la linea que no se cruza: sigue siendo un <button> con su
   aria-label, se llega con Tab, se pulsa y abre el chat, y al abrirlo GorIA
   vuelve corriendo a su sitio. Nada de `display:none`, nada de `disabled`,
   nada de quitarlo del orden de tabulacion. Un disparador de chat que
   desaparece porque la mascota se ha ido de paseo seria un fallo bastante
   peor que no tener mascota.

   El disco se queda con un punteado suave, que es lo que dice "aqui hay algo
   y vuelve enseguida" sin necesidad de texto. */
.goria--vacio .goria__fig {
  opacity: 0;
  transition: opacity .28s ease;
}
.goria--vacio::before {
  border-style: dashed;
  box-shadow:
    inset 0 0 0 1.5px rgba(90, 97, 39, .30),
    0 6px 18px -8px rgba(0, 0, 0, .35);
}
/* Con el foco puesto vuelve a verse entero: quien navega con teclado tiene
   que ver donde esta, aunque el bicho ande fuera. */
.goria--vacio:focus-visible .goria__fig,
.goria--vacio:hover .goria__fig { opacity: .35; }

/* El gorila, encajado dentro del disco.
   El dibujo NO llena su propio viewBox: la figura ocupa 114 de 158 unidades
   de ancho y 128 de alto, y esta 8,8 unidades por debajo del centro de la
   caja (el margen de arriba es para que quepa erguido y con la balanza en
   alto). De ahi los dos ajustes: se pide el 88% del lado del boton para que
   el bicho no reviente el disco, y se sube un 6% para que quede centrado a
   ojo y no cayendose por abajo. Los numeros estan mirados en pantalla, no
   calculados: con 0.88 la cabeza se comia el borde del disco. */
.goria__fig {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--goria-lado) * 0.84);
  height: calc(var(--goria-lado) * 0.84);
  transform: translate(-50%, -55%);
  display: block;
  pointer-events: none;     /* el que recibe el clic es el boton, no el dibujo */
  color: var(--verd, #5A6127);   /* oliva de marca: 6.10:1 sobre el disco */
}
.goria__fig svg,
.goria__fig img { width: 100%; height: 100%; display: block; }
/* Mientras no ha llegado el SVG articulado se ve el PNG del logo, que ya
   esta en cache porque es la marca de la cabecera. Cero hueco en blanco y
   cero salto: ocupan lo mismo. Si fallara el JS o el SVG, se queda este. */
.goria__fig img { object-fit: contain; }

/* ── El aviso de que ahi hay alguien ──────────────────────────────────────
   Un globo pequeno, sobrio, sin cola ni monerias. Sale al pasar el raton o
   al enfocar con el teclado, y ademas UNA SOLA VEZ por sesion a los pocos
   segundos (lo gobierna el widget con sessionStorage). Es decoracion: lleva
   aria-hidden, porque lo que un lector de pantalla necesita saber ya se lo
   dice el aria-label del boton. */
.goria__globo {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-texto, system-ui, sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 9px 14px;
  border-radius: 999px;
  /* Oliva de marca con texto claro (6.62:1). En tinta se perdia: el globo
     aparece tanto sobre las bandas oscuras como sobre el fondo papel, y
     tenia que verse en las dos. */
  background: var(--verd, #5A6127);
  color: #F6F6F1;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s;
}
.goria:hover .goria__globo,
.goria:focus-visible .goria__globo,
.goria--saluda .goria__globo {
  opacity: 1;
  visibility: visible;
}
/* Con el chat abierto el globo sobra: ya esta hablando con el. */
.goria[aria-expanded="true"] .goria__globo {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* En movil se aparta de la barra fija de contacto, igual que hacia el boton
   redondo al que sustituye. */
@media (max-width: 1023.98px) {
  .goria {
    right: 14px;
    bottom: calc(var(--barra-movil, 57px) + 12px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 400px) {
  .goria { --goria-lado: 58px; }
  .goria__globo { font-size: 12px; padding: 8px 12px; }
}

/* Si alguien imprime la pagina, el gorila del chat no pinta nada. */
@media print { .goria { display: none !important; } }

/* ═══ 16. BLOQUES RECUPERADOS DE LA WEB ANTERIOR (2026-08-08) ══════════════
   Al migrar el WordPress se quedaron fuera tres bloques de la portada: las
   cifras del despacho, el compromiso en tres puntos y una llamada intermedia.
   Los dos primeros se han maquetado con clases que ya existian (.tarjeta y
   .dato-grande), asi que aqui solo hace falta lo minimo: la variante compacta
   de la banda de cierre y el ajuste de la cifra dentro de una tarjeta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Banda de llamada intermedia. Misma piel que .cierre pero mas baja, para que
   no compita con el cierre real del final de la pagina. */
.cierre--compacta { padding-block: var(--esp-7); }
.cierre--compacta .cierre__interior { max-width: 66ch; }
.cierre--compacta h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2rem); }
.cierre--compacta .cierre__acciones { margin-top: var(--esp-5); }

/* Cifra grande dentro de una tarjeta (bloque de datos comprobables y bloque
   de compromiso 01/02/03). Se separa del titular sin romper el ritmo vertical. */
.tarjeta > .dato-grande {
  display: block;
  margin-bottom: var(--esp-3);
  font-variant-numeric: tabular-nums;
}

/* ══ EL GORILA, MODO INTERACTIVO ══════════════════════════════════════════
   Al posar el raton sobre el logo de la cabecera, el gorila sale y se pone a
   andar. Al retirar el raton, da media vuelta y vuelve andando hasta el logo,
   se encoge y se mete dentro.

   Se monta SOBRE el paseo automatico en vez de duplicarlo: la salida, el
   ciclo de marcha y las capas son las mismas. Estas reglas solo sustituyen
   el recorrido horizontal y el final, y por eso llevan .gorila--anda en el
   selector: asi ganan en especificidad sin necesitar !important.
   ═══════════════════════════════════════════════════════════════════════ */

/* Vuelta hacia el logo: arranca donde estaba y termina en el logo. */
@keyframes gorila-vuelve {
  from { transform: translateX(var(--gorila-xv0, 0px)); }
  to   { transform: translateX(var(--gorila-xv1, 0px)); }
}
#gorila-paseante.gorila--anda.gorila--vuelve .gorila__x {
  animation: gorila-vuelve var(--gorila-durv, 6000ms) linear forwards;
}

/* Se mete en el logo: sube, se encoge y se apaga. Es el reverso exacto de
   la salida, para que el ida y vuelta se lea como el mismo movimiento. */
@keyframes gorila-entra-al-logo {
  from { transform: translateY(0);                        opacity: .95; }
  to   { transform: translateY(var(--gorila-y0, -240px)); opacity: 0;   }
}
@keyframes gorila-encoge {
  from { transform: scale(1); }
  to   { transform: scale(var(--gorila-s0, .6)); }
}
#gorila-paseante.gorila--anda.gorila--entra {
  animation: gorila-entra-al-logo 820ms cubic-bezier(.5,.02,.35,1) forwards;
}
#gorila-paseante.gorila--anda.gorila--entra .gorila__z {
  animation: gorila-encoge 820ms cubic-bezier(.5,.02,.35,1) forwards;
}
/* Mientras vuelve o entra, el avance no se pausa aunque no haya gesto. */
#gorila-paseante.gorila--vuelve .gorila__x,
#gorila-paseante.gorila--entra  .gorila__x { animation-play-state: running; }


/* ═══════════════════════════════════════════════════════════════════════════
   16. INTERACCION SOBRIA (aparicion, cabecera, indice flotante, progreso)
   ---------------------------------------------------------------------------
   Reglas de la casa para esta seccion:
   · Nada se oculta con CSS «a pelo». Todo lo que aparece al hacer scroll parte
     de opacidad 1 y solo se atenua cuando el JS marca <html class="js-anim">.
     Si el JS no llega a ejecutarse, o falla, el contenido se ve igual.
   · prefers-reduced-motion: reduce lo apaga TODO al final del fichero.
   · Ninguna regla de aqui usa position:fixed a anchos de movil salvo la barra
     de progreso, que mide 3 px y no tapa nada.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 16.1 Aparicion al hacer scroll ─────────────────────────────────────────
   Desplazamiento de 14 px. Es un despacho: se nota que algo entra, no se ve
   volar nada de un lado a otro de la pantalla. */
.js-anim .aparece {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms cubic-bezier(0.2, 0, 0.2, 1),
              transform 520ms cubic-bezier(0.2, 0, 0.2, 1);
  will-change: opacity, transform;
}
.js-anim .aparece.es-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* Escalonado corto dentro de una rejilla: 70 ms entre tarjetas, cuatro pasos
   como maximo. Mas alla de eso se percibe como espera, no como ritmo. */
.js-anim .aparece[data-retardo="1"] { transition-delay:  70ms; }
.js-anim .aparece[data-retardo="2"] { transition-delay: 140ms; }
.js-anim .aparece[data-retardo="3"] { transition-delay: 210ms; }

/* ── 16.2 Cabecera que reacciona al scroll ──────────────────────────────── */
.cabecera {
  transition: box-shadow var(--trans), background-color var(--trans);
}
.cabecera.cabecera--desplazada {
  box-shadow: 0 1px 0 var(--linea), 0 6px 18px rgba(13, 29, 36, 0.07);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
}
@supports not (backdrop-filter: blur(8px)) {
  .cabecera.cabecera--desplazada { background: var(--superficie); }
}

/* ── 16.3 Barra de progreso de lectura ──────────────────────────────────────
   Solo en articulos. Se pinta con transform: scaleX, nunca con width, para no
   forzar reflow en cada scroll. */
.progreso-lectura {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.progreso-lectura__barra {
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--verd);
}

/* ── 16.4 Contadores ────────────────────────────────────────────────────────
   El numero se sustituye por JS. font-variant-numeric evita que la cifra baile
   de ancho mientras cuenta. */
.dato-grande[data-contador] { font-variant-numeric: tabular-nums; }

/* ── 16.5 Micro-interacciones ───────────────────────────────────────────────
   Contenidas a proposito: 2 px de elevacion y el filete del enlace. */
.tarjeta { transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans); }
.tarjeta:hover { border-color: var(--verd-borde); }
.tarjeta--enlace:focus-visible { box-shadow: var(--anillo-focus); }

.enlace-animado {
  background-image: linear-gradient(var(--verd), var(--verd));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size var(--trans-lenta);
  text-decoration: none;
}
.enlace-animado:hover,
.enlace-animado:focus-visible { background-size: 100% 1px; }

/* ── 16.6 Indice flotante de las guias largas ───────────────────────────────
   Lo construye el JS clonando el <nav class="indice"> que ya existe en cada
   guia. En pantallas de menos de 1280 px no se monta siquiera: el indice
   original sigue estando dentro del texto y es el que se usa. */
.indice-flotante {
  position: fixed;
  inset-block-start: calc(var(--nav-alto) + var(--esp-5));
  inset-inline-start: var(--esp-5);
  z-index: 30;
  width: 232px;
  max-height: calc(100vh - var(--nav-alto) - var(--esp-8));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--esp-5);
  background: var(--superficie);
  border: var(--borde);
  border-left: var(--filete) solid var(--verd);
  border-radius: var(--radio);
  font-size: var(--fs-peque);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: opacity var(--trans-lenta), transform var(--trans-lenta), visibility var(--trans-lenta);
}
.indice-flotante[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.indice-flotante__titulo {
  font-family: var(--font-titular);
  font-size: var(--fs-kicker);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--verd);
  margin-bottom: var(--esp-4);
}
.indice-flotante__lista { list-style: none; }
.indice-flotante__lista li + li { margin-top: var(--esp-1); }
.indice-flotante__lista a {
  display: block;
  padding: var(--esp-2) var(--esp-3);
  margin-inline-start: -3px;
  border-inline-start: 2px solid transparent;
  color: var(--tinta-2);          /* 6.97:1 sobre blanco */
  text-decoration: none;
  line-height: 1.4;
  transition: color var(--trans), border-color var(--trans), background-color var(--trans);
}
.indice-flotante__lista a:hover { color: var(--verd); background: var(--verd-suau); }
/* Seccion activa: color + filete + peso. Nunca solo color. */
.indice-flotante__lista a[aria-current="true"] {
  color: var(--verd-fosc);        /* 9.34:1 sobre blanco */
  border-inline-start-color: var(--verd);
  font-weight: var(--peso-semi);
}
@media (max-width: 1279.98px) {
  .indice-flotante { display: none; }
}

/* ── 16.7 Boton de compartir ────────────────────────────────────────────── */
.compartir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  margin-block-start: var(--esp-5);
}
.compartir__etiqueta {
  font-family: var(--font-titular);
  font-size: var(--fs-kicker);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--tinta-3);
}
.compartir__aviso {
  font-size: var(--fs-peque);
  color: var(--verd-fosc);
}
.compartir__aviso[hidden] { display: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   17. HERRAMIENTAS (calculadoras y comprobadores de /herramientas/)
   ---------------------------------------------------------------------------
   Todas se apoyan en .formulario y .campo de la seccion 12. Aqui solo va lo
   que no existia: la caja de resultado, el desglose, el aviso permanente y
   las listas marcables de la checklist.
   ═══════════════════════════════════════════════════════════════════════════ */

.herramienta {
  max-width: var(--ancho-estrecho);
  margin-inline: auto;
}

/* ── 17.1 Resultado ─────────────────────────────────────────────────────────
   Nace vacio y oculto; el JS lo rellena y le quita el hidden. Es un
   aria-live="polite" para que el lector de pantalla lo anuncie sin robar el
   foco a quien esta rellenando el formulario. */
.resultado {
  margin-block-start: var(--esp-6);
  background: var(--superficie);
  border: var(--borde);
  border-top: var(--filete) solid var(--verd);
  border-radius: var(--radio-lg);
  padding: var(--esp-6);
}
.resultado[hidden] { display: none; }
.resultado__kicker {
  font-family: var(--font-titular);
  font-size: var(--fs-kicker);
  font-weight: var(--peso-semi);
  text-transform: uppercase;
  letter-spacing: var(--track-kicker);
  color: var(--verd);
  margin-bottom: var(--esp-2);
}
.resultado__cifra {
  font-family: var(--font-titular);
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  font-weight: var(--peso-fuerte);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.resultado__pie { margin-block-start: var(--esp-2); color: var(--tinta-2); }
.resultado__pie strong { color: var(--tinta); }

/* Variante para el comprobador de plazos: la cifra es una fecha. */
.resultado__cifra--fecha { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }

/* Estado del plazo. Cada estado lleva ademas su propio texto: el color no es
   nunca el unico portador de la informacion. */
.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin-block-start: var(--esp-4);
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--radio-chip);
  font-size: var(--fs-peque);
  font-weight: var(--peso-semi);
}
.estado::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.estado--vivo    { background: var(--verd-suau);  color: var(--verd-fosc); }
.estado--urgente { background: #FFF4E0;           color: #7A4A00; }  /* 8.4:1 */
.estado--vencido { background: var(--error-suau); color: var(--error); }

/* ── 17.2 Desglose del calculo ──────────────────────────────────────────────
   Se enseña siempre. Una cifra sin el camino que lleva hasta ella no sirve
   para discutir nada con nadie. */
.desglose {
  margin-block-start: var(--esp-5);
  border-top: 1px solid var(--linea-suave);
}
.desglose__fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--esp-3);
  padding-block: var(--esp-3);
  border-bottom: 1px solid var(--linea-suave);
  font-size: var(--fs-peque);
}
.desglose__concepto { color: var(--tinta-2); flex: 1 1 12rem; }
.desglose__valor {
  color: var(--tinta);
  font-weight: var(--peso-semi);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.desglose__fila--total .desglose__concepto,
.desglose__fila--total .desglose__valor { color: var(--tinta); font-weight: var(--peso-fuerte); }
.desglose__fila--tope .desglose__valor { color: var(--error); }

/* ── 17.3 Descargo permanente ───────────────────────────────────────────────
   Va SIEMPRE pegado al resultado, dentro de la misma caja, y no se puede
   plegar ni cerrar. Una estimacion de un despacho que se lea como una promesa
   es un problema, no una funcionalidad. */
.descargo {
  margin-block-start: var(--esp-5);
  padding: var(--esp-4) var(--esp-5);
  background: var(--fondo-alt);
  border-left: var(--filete) solid var(--tinta-3);
  border-radius: var(--radio);
  font-size: var(--fs-peque);
  color: var(--tinta-2);   /* 6.43:1 sobre fondo-alt */
}
.descargo strong { color: var(--tinta); }
.descargo > * + * { margin-top: var(--esp-2); }

/* ── 17.4 De donde sale cada cifra ──────────────────────────────────────── */
.fuente {
  margin-block-start: var(--esp-5);
  font-size: var(--fs-peque);
  color: var(--tinta-3);
}
.fuente a { color: var(--verd); }

/* ── 17.5 Tarjetas de la portada de herramientas ────────────────────────── */
.tarjeta--herramienta .tarjeta__titulo { margin-block-start: var(--esp-3); }
.herramienta__icono {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  background: var(--verd-suau);
  border-radius: var(--radio);
  color: var(--verd);
}
.herramienta__icono svg { width: 22px; height: 22px; }

/* ── 17.6 Checklist marcable e imprimible ──────────────────────────────── */
.checklist { list-style: none; }
.checklist > li + li { margin-top: var(--esp-1); }
.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3);
  border-radius: var(--radio);
  cursor: pointer;
  transition: background-color var(--trans);
  min-height: 44px;
}
.checklist__item:hover { background: var(--verd-suau); }
.checklist__item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--verd);
}
.checklist__item input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.checklist__texto { color: var(--tinta-2); line-height: 1.55; }
/* Marcado: se atenua y se tacha. Dos señales, no solo una. */
.checklist__item input:checked ~ .checklist__texto {
  color: var(--tinta-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.checklist__grupo + .checklist__grupo { margin-top: var(--esp-6); }
.checklist__grupo-titulo {
  font-family: var(--font-titular);
  font-size: var(--fs-h4);
  font-weight: var(--peso-semi);
  color: var(--tinta);
  padding-bottom: var(--esp-2);
  margin-bottom: var(--esp-3);
  border-bottom: 1px solid var(--linea);
}

/* Contador de avance */
.avance {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  margin-block: var(--esp-5);
  font-size: var(--fs-peque);
  color: var(--tinta-2);
}
.avance__pista {
  flex: 1 1 auto;
  height: 6px;
  background: var(--linea);
  border-radius: 3px;
  overflow: hidden;
}
.avance__relleno {
  height: 100%;
  width: 0%;
  background: var(--verd);
  transition: width var(--trans-lenta);
}
.avance__texto { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* ── 17.7 Impresion de la checklist ─────────────────────────────────────────
   Se imprime la lista y el descargo, y nada mas. Las casillas se sustituyen
   por un cuadro dibujado para poder marcarlas a boligrafo. */
@media print {
  .herramienta__acciones,
  .avance,
  .campo,
  .formulario__acciones,
  .fuente,
  .indice-flotante,
  .progreso-lectura { display: none !important; }

  .checklist__item { break-inside: avoid; padding: 2pt 0; min-height: 0; }
  .checklist__item input[type="checkbox"] { display: none; }
  .checklist__item .checklist__texto::before {
    content: "";
    display: inline-block;
    width: 10pt; height: 10pt;
    margin-right: 8pt;
    border: 0.75pt solid #000000;
    vertical-align: -1pt;
  }
  .checklist__item input:checked ~ .checklist__texto {
    color: #000000;
    text-decoration: none;
  }
  .checklist__grupo { break-inside: avoid-page; }
  .descargo { border-left: 2pt solid #000000; background: none; }
  .resultado { border: 1pt solid #000000; break-inside: avoid; }
}

/* ── 17.8 Sin JavaScript ────────────────────────────────────────────────────
   Las calculadoras no pueden funcionar sin JS. En vez de dejar un formulario
   muerto, se avisa y se da el telefono. */
.sin-js { display: none; }
html:not(.js) .sin-js { display: block; }
html:not(.js) .herramienta__formulario { display: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   18. MOVIMIENTO REDUCIDO — apagado total
   ---------------------------------------------------------------------------
   Va al FINAL del fichero a proposito: tiene que ganar a todo lo anterior.
   A esta web llega gente agobiada por una multa o por un accidente. Con
   prefers-reduced-motion todo sigue funcionando; simplemente no se mueve.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Lo que aparecia al hacer scroll: visible desde el primer momento. */
  .js-anim .aparece,
  .js-anim .aparece.es-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
    will-change: auto !important;
  }
  /* El indice flotante sigue ahi y sigue resaltando la seccion activa: eso es
     informacion, no decoracion. Lo que se quita es la entrada deslizada. */
  .indice-flotante {
    transition: none !important;
    transform: none !important;
  }
  .indice-flotante[data-visible="false"] { opacity: 0; visibility: hidden; }
  .indice-flotante[data-visible="true"]  { opacity: 1; visibility: visible; }

  .progreso-lectura__barra,
  .avance__relleno,
  .cabecera { transition: none !important; }

  .enlace-animado {
    background-size: 100% 1px;
    transition: none !important;
  }
}