/* mazarredoauditores.com
   Concepto: el informe de auditoría. Carril lateral de pizarra, texto ancho
   y la doble raya con la que se cierra una suma. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --pizarra: #353c40;      /* carril, pie de marca */
  --pizarra-2: #454d52;    /* líneas sobre pizarra */
  --tinta: #1d2224;        /* texto */
  --gris: #5a6468;         /* texto secundario */
  --niebla: #eef1f2;       /* paneles */
  --raya: #cfd5d8;         /* filetes */
  --papel: #fff;
  --naranja: #f39200;      /* marca: acciones y doble raya */
  --naranja-claro: #fdebcf;
  --ancho-carril: 300px;
  --lectura: 42rem;
  --u: 8px;
  --radio: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-stretch: 125%; font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
p, ul, ol { margin: 0 0 calc(var(--u) * 2); }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { background: var(--naranja-claro); }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; }
address { font-style: normal; }
a[href^="tel:"] { white-space: nowrap; }

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salto { position: absolute; left: var(--u); top: -100px; z-index: 10; background: var(--naranja); color: var(--tinta); padding: var(--u) calc(var(--u) * 2); font-weight: 600; text-decoration: none; }
.salto:focus { top: var(--u); }

/* ---- La doble raya de cierre: el único gesto ---- */
.cierre { height: 8px; border-top: 2px solid var(--naranja); border-bottom: 2px solid var(--naranja); }

/* ---- Botones ---- */
.boton {
  display: inline-block; font: inherit; font-weight: 600; font-stretch: 112%; line-height: 1.2;
  padding: 14px 22px; border: 2px solid var(--naranja); border-radius: 6px;
  background: var(--naranja); color: var(--tinta); text-decoration: none; cursor: pointer;
}
.boton:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.boton--linea { background: transparent; border-color: var(--tinta); }
.boton--linea:hover { background: var(--tinta); }
.acciones { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2) calc(var(--u) * 3); align-items: center; margin: calc(var(--u) * 4) 0 0; }

/* ---- Estructura: carril + hoja ---- */
.carril { background: var(--pizarra); color: #fff; }
.carril a { text-decoration: none; }
.carril a:hover { background: none; }
.carril__cab { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2) 20px; }
.carril__indice { font-weight: 600; padding: 10px 16px; border: 2px solid #fff; border-radius: 6px; }
.carril__nav, .carril__fin { display: none; }

.marca { display: inline-flex; align-items: flex-end; gap: 12px; color: #fff; }
.marca__cantos { fill: var(--naranja); flex: none; margin-bottom: 4px; }
.marca__texto { display: grid; font-stretch: 125%; font-weight: 300; letter-spacing: 0.14em; line-height: 1.15; font-size: 1.125rem; }
.marca__grupo { font-size: 0.6875rem; letter-spacing: 0.3em; color: #c5cdd1; }
.marca__a { border-bottom: 1px solid var(--naranja); padding-bottom: 2px; margin-bottom: 2px; }

.hoja { min-width: 0; }
main { padding: calc(var(--u) * 5) 20px 0; }

@media (min-width: 1000px) {
  body { display: grid; grid-template-columns: var(--ancho-carril) minmax(0, 1fr); }
  .carril { position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; padding: calc(var(--u) * 4) 28px calc(var(--u) * 3); }
  .carril__cab { padding: 0 0 calc(var(--u) * 4); }
  .carril__indice { display: none; }
  .carril__nav { display: block; flex: 1; }
  .carril__fin { display: block; padding-top: calc(var(--u) * 3); }
  main { padding: calc(var(--u) * 9) clamp(40px, 5vw, 88px) 0; max-width: 1240px; }
}

/* ---- Menú (carril y pie) ---- */
.menu, .menu ul { list-style: none; margin: 0; padding: 0; }
.menu__cab { display: block; font-stretch: 125%; font-weight: 600; font-size: 0.9375rem; }
.menu__grupo, .menu__suelto { padding: calc(var(--u) * 1.5) 0; border-top: 1px solid var(--pizarra-2); }
.menu__grupo ul { margin-top: 4px; }
.menu__grupo li a { display: block; padding: 3px 0 3px 14px; font-size: 0.9375rem; color: #dfe4e6; border-left: 2px solid transparent; }
.menu a:hover { color: var(--naranja); }
.menu a[aria-current="page"] { color: #fff; font-weight: 600; }
.menu__grupo li a[aria-current="page"] { border-left-color: var(--naranja); }
.menu a.menu__cab[aria-current="page"] { color: var(--naranja); }

/* Ventanas bajas: el carril se aprieta para caber sin desplazamiento */
@media (min-width: 1000px) and (max-height: 780px) {
  .carril { padding-top: calc(var(--u) * 2.5); padding-bottom: calc(var(--u) * 2); }
  .carril__cab { padding-bottom: calc(var(--u) * 2); }
  .carril .menu__grupo, .carril .menu__suelto { padding: var(--u) 0; }
  .carril .menu__grupo li a { padding-top: 2px; padding-bottom: 2px; }
  .carril__fin { padding-top: calc(var(--u) * 1.5); }
  .carril__fin .boton { padding-top: 10px; padding-bottom: 10px; }
  .carril__tel { margin-top: var(--u); }
}

/* Carril: grupos plegables, uno abierto a la vez */
.menu--plegable summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.menu--plegable summary::-webkit-details-marker { display: none; }
.menu--plegable summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--naranja); border-bottom: 2px solid var(--naranja); transform: rotate(45deg) translate(-2px, -2px); flex: none; }
.menu--plegable details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.menu--plegable summary:hover { color: var(--naranja); }

.carril__fin .boton { display: block; text-align: center; }
.carril__fin .boton:hover { background: #fff; border-color: #fff; color: var(--tinta); }
.carril__tel { margin: calc(var(--u) * 2) 0 0; font-stretch: 125%; font-weight: 600; font-size: 1.25rem; }
.idioma { margin: var(--u) 0 0; font-size: 0.875rem; display: flex; gap: 14px; }
.idioma__yo { color: #c5cdd1; }
.idioma a { text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* ---- Portada: hero a sangre ---- */
.hero {
  margin: calc(var(--u) * -5) -20px 0; padding: calc(var(--u) * 7) 20px calc(var(--u) * 7);
  display: grid; gap: calc(var(--u) * 6); align-items: center;
}
.hero h1 { font-size: clamp(2.25rem, 1.1rem + 4.2vw, 4.25rem); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: calc(var(--u) * 3); max-width: 11em; }
.hero .cierre { max-width: 12rem; }
.entrada { font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.375rem); line-height: 1.45; max-width: 38rem; margin: calc(var(--u) * 3) 0 0; }
@media (min-width: 1000px) {
  .hero { margin: calc(var(--u) * -9) calc(clamp(40px, 5vw, 88px) * -1) 0; padding: calc(var(--u) * 11) clamp(40px, 5vw, 88px); min-height: min(86vh, 760px); width: calc(100vw - var(--ancho-carril)); max-width: none; }
}

/* Foto de Bilbao a sangre, texto sobre pizarra */
.hero--foto { background: var(--pizarra) url("/assets/img/ciudades/bilbao-1100.jpg") right bottom / auto 46% no-repeat; color: #fff; padding-bottom: calc(46vw + var(--u) * 5); align-items: start; }
.hero--foto .boton--linea { border-color: #fff; color: #fff; }
.hero--foto .boton:hover { background: #fff; border-color: #fff; color: var(--tinta); }
@media (max-width: 999px) { .hero--foto { background-size: 100% auto; } }
@media (min-width: 1000px) {
  .hero--foto {
    padding-bottom: calc(var(--u) * 11); align-items: center; grid-template-columns: minmax(0, 36rem);
    background-image: linear-gradient(90deg, var(--pizarra) 0%, var(--pizarra) 30%, rgb(53 60 64 / 0.82) 48%, rgb(53 60 64 / 0) 78%), url("/assets/img/ciudades/bilbao-1920.jpg");
    background-size: auto, auto 100%; background-position: 0 0, right center; background-repeat: no-repeat;
  }
}
.oficina__foto { margin: calc(var(--u) * -3) calc(var(--u) * -3) calc(var(--u) * 3); width: calc(100% + var(--u) * 6); max-width: none; border-radius: var(--radio) var(--radio) 0 0; aspect-ratio: 16 / 9; object-fit: cover; }

.bloque--sumario { margin-top: calc(var(--u) * 7); }
.sumario { background: var(--niebla); border-radius: var(--radio); padding: calc(var(--u) * 3) calc(var(--u) * 3) var(--u); }
.bloque .sumario h2, .sumario h2 { font-size: 1rem; font-stretch: 100%; font-weight: 600; color: var(--gris); letter-spacing: 0; margin-bottom: var(--u); }
.sumario ul { list-style: none; margin: 0; padding: 0; }
.sumario li + li { border-top: 1px solid var(--raya); }
.sumario a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 14px 0; text-decoration: none; }
.sumario a:hover { background: none; }
.sumario a:hover .sumario__n { text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.sumario__n { font-stretch: 125%; font-weight: 600; }
.sumario__p { flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted #9aa5aa; transform: translateY(-4px); }
.sumario__o { color: var(--gris); font-size: 0.9375rem; text-align: right; }
@media (max-width: 560px) { .sumario__p { display: none; } .sumario__o { flex-basis: 100%; text-align: left; } }

/* ---- Bloques de portada ---- */
.bloque { margin-top: calc(var(--u) * 12); }
.bloque h2, .llamada h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: calc(var(--u) * 4); }

.razones { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 3) calc(var(--u) * 5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.razones li { padding-left: 26px; position: relative; }
.razones li::before, .columnas li::before, .prosa ul > li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 11px; height: 10px; background: var(--naranja);
  border-radius: 58% 42% 55% 45% / 50% 55% 45% 50%;
}
.razones strong { display: block; font-stretch: 125%; font-weight: 600; }
.razones span { color: var(--gris); font-size: 0.9688rem; }

.partidas { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.partidas li { background: var(--niebla); border-radius: var(--radio); padding: calc(var(--u) * 3); position: relative; }
.partidas h3 { font-size: 1.1875rem; margin-bottom: var(--u); }
.partidas h3 a { text-decoration: none; }
.partidas h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio); }
.partidas li:hover { background: var(--naranja-claro); }
.partidas h3 a:hover { background: none; }
.partidas p { margin: 0; color: #3d4649; font-size: 0.9688rem; }

.firma { display: grid; gap: calc(var(--u) * 5); }
.firma__texto { max-width: var(--lectura); }
.firma__socios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 2); align-self: start; }
.firma__socios img { border-radius: var(--radio); margin-bottom: var(--u); }
.firma__socios strong { display: block; font-size: 0.9375rem; font-stretch: 112%; line-height: 1.25; }
.firma__socios span { font-size: 0.8125rem; color: var(--gris); }
@media (min-width: 1320px) { .firma { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--u) * 8); } }

.columnas { list-style: none; margin: 0; padding: 0; columns: 3 220px; column-gap: calc(var(--u) * 5); }
.columnas li { position: relative; padding: 6px 0 6px 26px; break-inside: avoid; }
.columnas li::before { top: 0.85em; }

.panel { background: var(--pizarra); color: #fff; border-radius: var(--radio); padding: calc(var(--u) * 5) clamp(24px, 4vw, 56px); }
.panel p { max-width: var(--lectura); }
.panel a:hover { background: none; color: var(--naranja); }
.panel p:last-child { margin-bottom: 0; }

.pertenece ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--u) calc(var(--u) * 4); font-size: 0.9688rem; }

/* ---- Oficinas ---- */
.oficinas { display: grid; gap: calc(var(--u) * 2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.oficina { background: var(--niebla); border-radius: var(--radio); padding: calc(var(--u) * 3); display: flex; flex-direction: column; }
.oficina h3 { font-size: 1.25rem; margin-bottom: calc(var(--u) * 1.5); }
.oficina address span { display: block; }
.oficina__firma { font-weight: 600; }
.oficina__datos { list-style: none; margin: calc(var(--u) * 2) 0 0; padding: 0; overflow-wrap: anywhere; font-size: 0.9375rem; }
.oficina__datos li { padding: 2px 0; }
.mapa { margin-top: auto; padding-top: calc(var(--u) * 3); }
.mapa__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0; font-size: 0.9375rem; }
.mapa .boton { padding: 10px 16px; }
.mapa iframe { width: 100%; height: 280px; border: 0; border-radius: 8px; display: block; }
.nota { font-size: 0.875rem; color: var(--gris); margin-top: calc(var(--u) * 2); }
.nota--aviso { background: var(--naranja-claro); color: var(--tinta); border-radius: var(--radio); padding: calc(var(--u) * 2) calc(var(--u) * 3); font-size: 1rem; max-width: var(--lectura); margin: 0 0 calc(var(--u) * 4); }

/* ---- Llamada final ---- */
.llamada { margin-top: calc(var(--u) * 12); background: var(--niebla); border-radius: var(--radio); padding: calc(var(--u) * 5) clamp(24px, 4vw, 56px); display: grid; gap: calc(var(--u) * 3); align-items: center; }
.llamada h2 { margin-bottom: calc(var(--u) * 1.5); max-width: 24em; }
.llamada p { margin: 0; }
@media (min-width: 760px) { .llamada { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---- Páginas interiores ---- */
.migas ol { list-style: none; margin: 0 0 calc(var(--u) * 3); padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.875rem; color: var(--gris); }
.migas li + li::before { content: "/"; margin-right: 10px; color: var(--raya); }
.encabezado h1 { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); letter-spacing: -0.02em; max-width: 18em; margin-bottom: calc(var(--u) * 3); }
.encabezado .cierre { max-width: 12rem; }
.cuerpo { margin-top: calc(var(--u) * 6); }
.prosa { max-width: var(--lectura); }
.prosa h2, .cuerpo > h2 { font-size: 1.5rem; margin: calc(var(--u) * 6) 0 calc(var(--u) * 2); }
.prosa h3 { font-size: 1.125rem; margin: calc(var(--u) * 4) 0 var(--u); }
.prosa ul { list-style: none; padding: 0; }
.prosa ul > li { position: relative; padding: 3px 0 3px 26px; }
.prosa ul > li::before { top: 0.7em; }
.prosa > :last-child { margin-bottom: 0; }
.estrecho { max-width: var(--lectura); }

.servicio { display: grid; gap: calc(var(--u) * 6); }
.servicio .cuerpo { margin-top: calc(var(--u) * 6); }
.servicio__lado { background: var(--niebla); border-radius: var(--radio); padding: calc(var(--u) * 3); align-self: start; }
.servicio__lado h2 { font-size: 1rem; margin: calc(var(--u) * 3) 0 var(--u); }
.servicio__lado ul { list-style: none; margin: 0; padding: 0; font-size: 0.9688rem; }
.servicio__lado li { padding: 5px 0; }
.servicio__pedir { margin: 0; }
.servicio__pedir .boton { display: block; text-align: center; }
@media (min-width: 1240px) {
  .servicio { grid-template-columns: minmax(0, var(--lectura)) minmax(240px, 300px); justify-content: space-between; }
  .servicio__lado { margin-top: calc(var(--u) * 6); position: sticky; top: calc(var(--u) * 3); }
}

/* ---- Tablas ---- */
.tabla { overflow-x: auto; margin: calc(var(--u) * 3) 0; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.9375rem; }
th, td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--raya); }
thead th { font-stretch: 112%; color: var(--gris); font-weight: 600; border-bottom: 2px solid var(--tinta); }
tbody th { font-weight: 600; }

/* ---- Equipo ---- */
.equipo { list-style: none; margin: calc(var(--u) * 6) 0 0; padding: 0; display: grid; gap: calc(var(--u) * 2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.ficha { background: var(--niebla); border-radius: var(--radio); padding: calc(var(--u) * 3); display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: calc(var(--u) * 3); align-items: start; scroll-margin-top: calc(var(--u) * 3); }
.ficha img { width: 112px; height: 112px; border-radius: var(--radio); object-fit: cover; }
.ficha--sinfoto { grid-template-columns: 1fr; }
.ficha h2 { font-size: 1.1875rem; margin: 0 0 4px; }
.ficha__cargo { font-weight: 600; color: var(--gris); margin-bottom: var(--u); }
.ficha p { font-size: 0.9375rem; margin-bottom: var(--u); }
.ficha__datos { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: calc(var(--u) * 1.5) 0 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .ficha { grid-template-columns: 1fr; } }

/* ---- Descargas y enlaces ---- */
.descargas, .enlaces { list-style: none; margin: 0; padding: 0; max-width: 56rem; }
.descargas li, .enlaces li { border-bottom: 1px solid var(--raya); }
.descargas a, .enlaces a { display: grid; gap: 2px 24px; padding: 16px 0; text-decoration: none; }
.descargas a:hover, .enlaces a:hover { background: var(--naranja-claro); }
.descargas__n { font-stretch: 125%; font-weight: 600; }
.descargas__d, .descargas__m, .enlaces__h { color: var(--gris); font-size: 0.9375rem; }
@media (min-width: 700px) {
  .descargas a { grid-template-columns: minmax(0, 1fr) auto; }
  .descargas__d { grid-column: 1; }
  .descargas__m { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .enlaces a { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
}

/* ---- Formulario ---- */
.formulario { display: grid; gap: calc(var(--u) * 2.5); }
.formulario label { display: block; font-weight: 600; font-size: 0.9375rem; }
.formulario label > input, .formulario label > select, .formulario label > textarea { display: block; margin-top: 6px; }
.formulario .req { font-weight: 400; color: var(--gris); }
.formulario input[type="text"], .formulario input[type="email"], .formulario input[type="tel"], .formulario select, .formulario textarea {
  font: inherit; font-weight: 400; font-size: 1.0625rem; color: var(--tinta); width: 100%; padding: 12px 14px;
  background: var(--niebla); border: 2px solid transparent; border-bottom-color: #8b979c; border-radius: 6px 6px 0 0;
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--naranja); background: #fff; border-radius: 6px; }
.formulario__par { display: grid; gap: calc(var(--u) * 2.5); }
@media (min-width: 640px) { .formulario__par { grid-template-columns: 1fr 1fr; } }
.formulario label.formulario__casilla { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px; font-weight: 400; }
.formulario__casilla input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--tinta); }
.formulario .boton { justify-self: start; }
.formulario__estado { margin: 0; min-height: 1.6em; }
.formulario__estado.es-error { background: var(--naranja-claro); padding: 12px 16px; border-radius: 6px; font-weight: 600; }
.aviso-datos { font-size: 0.875rem; color: #3d4649; background: var(--niebla); border-radius: var(--radio); padding: calc(var(--u) * 2) calc(var(--u) * 2.5); }
.aviso-datos p { margin: 0; }
.trampa { position: absolute; left: -9999px; }

/* ---- Pie ---- */
.pie { margin-top: calc(var(--u) * 12); padding: 0 20px calc(var(--u) * 4); }
.pie__indice { background: var(--pizarra); color: #fff; border-radius: var(--radio); padding: calc(var(--u) * 3) 20px; margin-bottom: calc(var(--u) * 6); scroll-margin-top: var(--u); }
.pie__indice h2 { font-size: 1.25rem; margin-bottom: calc(var(--u) * 2); }
.pie__indice a { text-decoration: none; }
.pie__indice a:hover { background: none; }
.pie__indice .menu__grupo li a { padding: 8px 0 8px 14px; }
.pie__indice .menu__cab { padding: 6px 0; }
.pie__accion { margin: calc(var(--u) * 2) 0; }
.pie__indice .idioma a { text-decoration: underline; }
.pie__linea { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--u) calc(var(--u) * 4); padding-top: calc(var(--u) * 2); font-size: 0.875rem; color: var(--gris); }
.pie__linea p { margin: 0; }
.pie__linea ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
@media (min-width: 1000px) {
  .pie { padding: 0 clamp(40px, 5vw, 88px) calc(var(--u) * 5); max-width: 1240px; }
  .pie__indice { display: none; }
}

@media print {
  .carril, .pie__indice, .llamada, .mapa { display: none; }
  body { display: block; }
}