/* =========================================================================
   Grupo GBC — sistema visual "Galope"
   Los estilos de la maqueta venían en línea; aquí quedan como fichas
   reutilizables. Valores de color y tipografía: CLAUDE.md §4.
   ========================================================================= */

:root {
  /* Fondos */
  --oscuro: #0d0d0c;
  --oscuro-2: #141414;
  --claro: #ededea;
  --claro-2: #f4f4f3;
  --claro-3: #f6f6f5;
  --blanco: #ffffff;

  /* Texto */
  --tinta: #141414;
  --tinta-2: #2e2e2c;
  --tinta-3: #3a3a37;
  --tinta-4: #5c5c58;
  --tinta-5: #8a8a85;
  --papel: #f2f2ee;
  --papel-2: #e4e4e0;
  --papel-3: #c9c9c4;
  --papel-4: #a3a39e;

  /* Líneas */
  --linea-clara: #dcdcd7;
  --linea-clara-2: #cfcfc9;
  --linea-oscura: #2e2e2c;
  --linea-oscura-2: #3a3a37;

  /* Acento: solo puntos y detalles pequeños. Nunca texto blanco encima. */
  --acento: #ff6a2b;

  /* Tipografía */
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Geist", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Medidas */
  --ancho: 1360px;
  --margen: clamp(16px, 4vw, 56px);
  --aire: clamp(72px, 9vw, 128px);
  --alto-header: 84px;

  /* Tiempos: Roberto pidió transiciones lentas, que se noten. */
  --t-foto: 1.4s;
  --t-color: 0.6s;
  --t-boton: 0.8s;
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--oscuro);
  color: var(--papel);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* El atributo `hidden` tiene que ganar siempre: varias fichas de abajo fijan
   `display: flex` o `grid`, y eso pisaba el `hidden` del navegador. */
[hidden] {
  display: none !important;
}

/* <picture> no debe romper el posicionamiento de la <img> que envuelve. */
picture {
  display: contents;
}

/* Hueco visible para las 7 fotos que todavía no tienen original en alta
   resolución (CLAUDE.md §6.2). Se quita en cuanto llegue cada archivo. */
.falta-foto {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* Arriba a la derecha: los textos de estas secciones van abajo a la
     izquierda, así el aviso no se encima con el titular. */
  justify-content: flex-start;
  align-items: flex-end;
  text-align: right;
  gap: 12px;
  padding: clamp(24px, 4vw, 56px);
  background-color: #1a1a18;
  background-image: url("../assets/grain.png");
  background-size: 240px 240px;
  color: var(--papel-4);
}
.falta-foto::before {
  content: "FOTO PENDIENTE";
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.6px;
  color: var(--acento);
}
.falta-foto span {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.2;
  color: var(--papel-3);
  max-width: 24ch;
}
.falta-foto--marco {
  position: relative;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

button {
  font: inherit;
  color: inherit;
}

/* Los enlaces heredan el color del texto que los rodea: así funcionan igual
   en las secciones claras y en las oscuras, sin el azul del navegador.
   El naranja queda para el hover, que es el único lugar donde el acento
   alcanza contraste. */
a {
  color: inherit;
}
a:hover {
  color: var(--acento);
}

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

/* Salto al contenido, para teclado y lectores de pantalla. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--blanco);
  color: var(--tinta);
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 13px;
}
.saltar:focus {
  left: 12px;
  top: 12px;
}

/* ---------- Piezas de texto ---------- */

.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-inline: var(--margen);
}

.rotulo {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.6px;
  color: var(--tinta-4);
  margin: 0;
}
.rotulo--oscuro {
  color: var(--papel-4);
}

.titular {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 5vw, 76px);
  line-height: 1;
  letter-spacing: -1.2px;
}

/* El contrapunto en cursiva gris que recorre todo el sitio. */
.eco {
  font-style: italic;
  color: var(--tinta-4);
}
.eco--oscuro {
  font-style: italic;
  color: #8e8e89;
}

.entrada {
  margin: 22px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--tinta-3);
}

/* ---------- Secciones ---------- */

.seccion {
  padding-block: var(--aire);
}
.seccion--clara {
  background: var(--claro);
  color: var(--tinta);
}
.seccion--blanca {
  background: var(--blanco);
  color: var(--tinta);
  border-top: 1px solid var(--linea-clara);
}
.seccion--oscura {
  background-color: var(--oscuro);
  color: var(--papel);
}

.grano {
  background-image: url("../assets/grain.png");
  background-size: 240px 240px;
}

/* ---------- Botón "Discover" (ObsidianUI, MIT) ----------
   El recuadro de la flecha se expande por todo el botón al pasar el mouse. */

.disc {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  height: 58px;
  padding: 0 76px 0 26px;
  text-decoration: none;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.8px;
  font-weight: 500;
  background: var(--papel);
  color: var(--tinta);
  border: none;
  cursor: pointer;
}
.disc__txt {
  position: relative;
  z-index: 1;
  transition: color 0.7s ease;
}
.disc__orbe {
  position: absolute;
  z-index: 0;
  inset: 6px 6px 6px auto;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 16px;
  font-size: 17px;
  background: var(--oscuro-2);
  color: var(--blanco);
  transition: width var(--t-boton) var(--curva);
}
.disc:hover .disc__orbe,
.disc:focus-visible .disc__orbe {
  width: calc(100% - 12px);
}
.disc:hover .disc__txt,
.disc:focus-visible .disc__txt {
  color: var(--blanco);
}

/* Variante oscura: fondo negro, orbe claro. */
.disc--oscuro {
  background: var(--oscuro-2);
  color: var(--blanco);
}
.disc--oscuro .disc__orbe {
  background: var(--papel);
  color: var(--tinta);
}
.disc--oscuro:hover .disc__txt,
.disc--oscuro:focus-visible .disc__txt {
  color: var(--tinta);
}

.boton-linea {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 28px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--blanco);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.8px;
}
.boton-linea:hover {
  background: rgba(255, 255, 255, 0.08);
}

.punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acento);
  flex: none;
}

/* ---------- Cabecera ---------- */

.cabecera {
  position: relative;
  z-index: 2;
}

/* Base propia de la cabecera cuando va encima de una foto. El velo del hero
   no alcanza a cubrirla del lado derecho, y ahí vive el botón: medido sobre
   la cabalgata daba 1.72:1. Esto lo hace independiente de qué foto se ponga
   después, que es lo importante. */
.portada .cabecera::before,
.portada-int .cabecera::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--alto-header) + 44px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 8, 7, 0.86) 0%,
    rgba(8, 8, 7, 0.62) 55%,
    rgba(8, 8, 7, 0) 100%
  );
}
.cabecera__barra {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-inline: var(--margen);
  height: var(--alto-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.cabecera__marca {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  color: var(--blanco);
}
.marca__nombre {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
}
.marca__razon {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--papel-3);
}
.icono-boton {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-escritorio {
  display: flex;
  gap: 36px;
  font-size: 15px;
}
.nav-escritorio a {
  color: var(--papel);
  text-decoration: none;
}
.nav-escritorio a:hover {
  color: var(--blanco);
}
.cabecera__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--blanco);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

/* ---------- Menú lateral (Bird & Bird) ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  visibility: hidden;
}
.menu[data-abierto="true"] {
  visibility: visible;
}
.menu__panel {
  width: min(560px, 100%);
  height: 100dvh;
  overflow-y: auto;
  background: var(--claro-2);
  color: var(--tinta);
  padding: 22px var(--margen) 40px;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.5s var(--curva);
}
.menu[data-abierto="true"] .menu__panel {
  transform: translateX(0);
}
.menu__velo {
  flex: 1;
  border: none;
  background: rgba(13, 13, 12, 0.5);
  backdrop-filter: blur(4px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.menu[data-abierto="true"] .menu__velo {
  opacity: 1;
}
.menu__cabeza {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 62px;
}
.menu__cabeza .marca__nombre {
  color: var(--tinta);
}
.menu__nav {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu__link {
  text-decoration: none;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: clamp(36px, 4vw, 50px);
  line-height: 1.18;
  transition: color var(--t-color) ease;
}
.menu__link:hover {
  color: #6b6b66;
}
.menu__pie {
  margin-top: auto;
  padding-top: 48px;
}
.menu__frase {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.25;
  color: #4a4a46;
  max-width: 380px;
}
.menu__boletin {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--tinta);
  color: var(--tinta);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 1.6px;
}
.redes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-family: var(--mono);
  font-size: 13px;
}
.menu__pie .redes {
  margin-top: 26px;
}
.redes a {
  color: var(--tinta);
}

/* ---------- Portada ---------- */

.portada {
  position: relative;
  height: clamp(640px, 92vh, 880px);
  overflow: hidden;
  background: var(--oscuro);
}
.portada__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
/* Deriva lenta, para que la portada no se sienta congelada. */
.deriva {
  animation: deriva 22s ease-in-out infinite alternate;
}
@keyframes deriva {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.09) translateX(-1.5%);
  }
}
.velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Más firme que en la maqueta. Con la foto de la cabalgata, que es casi
   blanca en la franja de la niebla, la etiqueta mono de 12 px se quedaba en
   2.99:1. Se oscurece el lado del texto, donde los caballos ya son siluetas,
   y se deja limpio el lado derecho, que es donde está la luz. */
.velo--lateral {
  background: linear-gradient(
    90deg,
    rgba(8, 8, 7, 0.94) 0%,
    rgba(8, 8, 7, 0.86) 25%,
    rgba(8, 8, 7, 0.52) 50%,
    rgba(8, 8, 7, 0.18) 75%,
    rgba(8, 8, 7, 0) 100%
  );
}
.velo--vertical {
  background: linear-gradient(
    180deg,
    rgba(8, 8, 7, 0.55) 0%,
    rgba(8, 8, 7, 0) 18%,
    rgba(8, 8, 7, 0) 70%,
    rgba(8, 8, 7, 0.75) 100%
  );
}
.portada__cuerpo {
  position: relative;
  z-index: 1;
  max-width: var(--ancho);
  height: calc(100% - var(--alto-header));
  margin: 0 auto;
  padding: 0 var(--margen) clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.portada__texto {
  max-width: 720px;
}
.portada__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.6px;
  color: #d4d4d0;
}
.portada__titular {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 7.4vw, 120px);
  line-height: 0.92;
  letter-spacing: -2.5px;
  color: var(--blanco);
}
.portada__titular .eco {
  color: #bdbdb8;
}
.portada__entrada {
  margin: 28px 0 0;
  max-width: 500px;
  font-size: 18px;
  line-height: 1.55;
  color: #dcdcd8;
}
.portada__botones {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Tarjeta "Próximo vencimiento" */
.aviso {
  position: absolute;
  z-index: 2;
  right: var(--margen);
  bottom: clamp(40px, 5vw, 64px);
  width: 260px;
  /* Más opaca que en la maqueta: la tarjeta cae sobre la zona iluminada
     de la portada y su texto mono se quedaba en 3.7:1 contando ya este
     fondo. Sigue siendo traslúcida, pero ahora se lee. */
  background: rgba(12, 12, 11, 0.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 22px 22px 20px;
}
.aviso__cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--papel-3);
}
.aviso__dia {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 10px;
}
.aviso__num {
  font-weight: 300;
  font-size: 72px;
  line-height: 0.9;
  letter-spacing: -4px;
  color: var(--blanco);
}
.aviso__mes {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--blanco);
}
.aviso__detalle {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: #d4d4d0;
}

/* ---------- Barra de vencimientos ---------- */

.cinta {
  background-color: var(--oscuro);
  border-bottom: 1px solid var(--linea-oscura);
  overflow: hidden;
}
.cinta__via {
  display: flex;
  width: max-content;
  animation: correr 34s linear infinite;
}
@keyframes correr {
  to {
    transform: translateX(-50%);
  }
}
.cinta:hover .cinta__via {
  animation-play-state: paused;
}
.cinta__item {
  flex: none;
  width: 260px;
  padding-bottom: 18px;
  border-left: 1px solid var(--linea-oscura-2);
}
.cinta__regla {
  height: 20px;
  background-image: repeating-linear-gradient(
    90deg,
    #4a4a47 0,
    #4a4a47 1px,
    transparent 1px,
    transparent 13px
  );
  background-size: 100% 9px;
  background-repeat: no-repeat;
}
.cinta__texto {
  padding: 6px 16px 0;
  font-family: var(--mono);
}
.cinta__fecha {
  font-size: 19px;
  color: var(--blanco);
  letter-spacing: 0.5px;
}
.cinta__label {
  margin-top: 6px;
  font-size: 12px;
  color: var(--papel-4);
  letter-spacing: 0.4px;
}

/* ---------- Manifiesto (dos columnas) ---------- */

.manifiesto {
  background: var(--claro-2);
  color: var(--tinta);
  display: flex;
  flex-wrap: wrap;
}
.manifiesto__foto {
  flex: 1.2 1 560px;
  min-width: 0;
  position: relative;
  min-height: clamp(420px, 50vw, 780px);
  overflow: hidden;
}
.manifiesto__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.manifiesto__fundido {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(244, 244, 243, 0) 72%, var(--claro-2) 100%);
}
.manifiesto__texto {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: clamp(48px, 6vw, 96px) var(--margen);
}
.manifiesto__caja {
  max-width: 560px;
}
.manifiesto__titular {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 4.6vw, 72px);
  line-height: 1;
  letter-spacing: -1.2px;
}
.manifiesto__titular .eco {
  color: #4a4a46;
}
.pilares-enlace {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(20, 20, 20, 0.25);
}
.pilares-enlace a {
  padding: 16px 12px 0 0;
  text-decoration: none;
  color: var(--tinta);
}
.pilares-enlace span {
  display: block;
}
.pilares-enlace .n {
  font-family: var(--mono);
  font-size: 11px;
  color: #4a4a46;
}
.pilares-enlace .nombre {
  margin-top: 6px;
  font-size: 17px;
  font-weight: 500;
}

/* ---------- Pestañas grandes: pilares (Bird & Bird) ---------- */

.dos-columnas {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px 72px;
  align-items: flex-start;
}
.pilares__lista {
  flex: 0 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.pilar {
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 5px solid transparent;
  padding: 0 0 6px;
  font-family: var(--serif);
  font-size: clamp(44px, 5vw, 76px);
  line-height: 1.05;
  color: var(--tinta-5);
  transition: color var(--t-color) ease, border-color var(--t-color) ease;
}
.pilar:hover {
  color: var(--tinta-3);
}
.pilar[aria-selected="true"] {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}
.pilares__panel {
  flex: 1 1 520px;
  min-width: 0;
}
.pilares__marco {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--linea-clara-2);
}
.pilares__marco img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.pilares__frase {
  margin-top: 26px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.15;
}
.pilares__desc {
  margin: 14px 0 0;
  max-width: 640px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--tinta-3);
}

/* Entrada de foto: 1.4 s con un leve acercamiento. */
.aparece {
  animation: aparece var(--t-foto) var(--curva);
}
@keyframes aparece {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- Los 4 tiempos ---------- */

.tiempos {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
}
.tiempos__lista {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--linea-clara);
  border: 1px solid var(--linea-clara);
}
.tiempo {
  flex: 1;
  border: none;
  background: var(--blanco);
  color: var(--tinta);
  padding: 28px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  transition: background-color var(--t-color) ease, color var(--t-color) ease;
}
.tiempo__izq {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tiempo__n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  color: var(--tinta-4);
  transition: color var(--t-color) ease;
}
.tiempo__verbo {
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1;
}
.tiempo__titulo {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--tinta-4);
  text-align: right;
  transition: color var(--t-color) ease;
}
.tiempo[aria-selected="true"] {
  background: var(--oscuro-2);
  color: var(--blanco);
}
.tiempo[aria-selected="true"] .tiempo__n {
  color: var(--acento);
}
.tiempo[aria-selected="true"] .tiempo__titulo {
  color: var(--papel-3);
}

.tiempos__panel {
  flex: 1.5 1 560px;
  min-width: 0;
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background: var(--oscuro-2);
  color: var(--blanco);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tiempos__panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
/* Dos capas, cada una con su trabajo:
   — el velo da el ambiente y deja ver la foto;
   — la base del bloque de texto garantiza el contraste.
   Separarlas evita tener que oscurecer la foto entera para que se lea una
   línea de 12 px. Medido sobre las fotos claras (la neblina del tiempo 01),
   que son el peor caso. */
.tiempos__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 9, 0) 30%,
    rgba(10, 10, 9, 0.25) 60%,
    rgba(10, 10, 9, 0.55) 100%
  );
}
.tiempos__texto {
  position: relative;
  isolation: isolate;
  padding: clamp(24px, 3vw, 40px);
}
/* La rampa va en píxeles, no en porcentaje: así el degradado ya está a plena
   fuerza cuando empieza la primera línea (la etiqueta mono de 12 px, que es
   la que menos contraste tenía), sin importar cuánto mida el bloque. */
.tiempos__texto::before {
  content: "";
  position: absolute;
  inset: -120px 0 0 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 9, 0) 0px,
    rgba(10, 10, 9, 0.55) 70px,
    rgba(10, 10, 9, 0.86) 125px,
    rgba(10, 10, 9, 0.9) 100%
  );
  pointer-events: none;
}
.tiempos__meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  color: #d4d4d0;
}
.tiempos__titulo {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(36px, 3.4vw, 52px);
  line-height: 1.02;
}
.tiempos__desc {
  margin: 12px 0 0;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--papel-2);
}
.enlace-sub {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.8px;
  color: var(--blanco);
  border-bottom: 1px solid var(--blanco);
  padding-bottom: 4px;
  text-decoration: none;
}

/* ---------- El compás (consultoría) ---------- */

.compas {
  margin-top: 56px;
  padding: 36px 0 0;
  border-top: 1px solid var(--linea-clara);
}
.compas__via {
  position: relative;
  height: 2px;
  background: var(--linea-clara);
  margin: 28px 0 18px;
}
.compas__punto {
  position: absolute;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--acento);
  animation: compas 5.6s ease-in-out infinite alternate;
}
@keyframes compas {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 10px);
  }
}
.compas__marcas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--tinta-4);
}
.compas__texto {
  margin: 22px 0 0;
  max-width: 760px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--tinta-3);
}

/* ---------- Calendario ---------- */

.calendario__cabeza {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.calendario__nota {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--papel-4);
}
.calendario__titular {
  margin: 22px 0 0;
  max-width: 820px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 5vw, 76px);
  line-height: 1;
  letter-spacing: -1.2px;
  color: var(--blanco);
}
.calendario__entrada {
  margin: 20px 0 0;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--papel-3);
}
.calendario__lista {
  margin-top: 48px;
  border-top: 1px solid var(--linea-oscura);
}
.vencimiento {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 32px;
  padding: 22px 0;
  border-bottom: 1px solid var(--linea-oscura);
}
.vencimiento__fecha {
  flex: 0 0 170px;
  font-family: var(--mono);
  font-size: 22px;
  color: var(--blanco);
}
.vencimiento__label {
  flex: 1 1 360px;
  font-size: 19px;
  color: var(--papel-2);
}
.vencimiento__area {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--papel-4);
}

/* ---------- La firma ---------- */

.firma {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
}
.firma__texto {
  flex: 1 1 520px;
  min-width: 0;
}
.firma__cita {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-size: clamp(32px, 3.4vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.5px;
}
.firma__valores {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--tinta-3);
}
.cifras {
  flex: 1 1 440px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--linea-clara-2);
  border: 1px solid var(--linea-clara-2);
  align-self: start;
}
.cifra {
  background: var(--claro);
  padding: 30px 26px;
}
.cifra__num {
  font-weight: 300;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -3px;
}
.cifra__label {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--tinta-3);
}

/* ---------- Pie de página ---------- */

.pie {
  position: relative;
  overflow: hidden;
  color: var(--tinta);
  background: var(--claro-3);
}
.pie__cuerpo {
  position: relative;
  z-index: 1;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(72px, 8vw, 112px) var(--margen) 0;
}
.pie__llamada {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(20, 20, 20, 0.16);
}
.pie__llamada h2 {
  margin: 0;
  max-width: 760px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -1px;
}
.pie__columnas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px;
  padding-top: 56px;
}
.pie__marca {
  flex: 1 1 340px;
  max-width: 460px;
}
.pie__marca .marca__nombre {
  font-size: 44px;
  color: var(--tinta);
}
.pie__marca p {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--tinta-2);
}
.pie__marca .redes {
  margin-top: 22px;
}
.pie__enlaces {
  flex: 2 1 560px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
}
.pie__titulo {
  font-weight: 500;
  font-size: 16px;
}
.pie__col {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  color: var(--tinta-2);
  line-height: 1.45;
}
.pie__col a {
  text-decoration: none;
  color: var(--tinta-2);
}
.pie__col a:hover {
  color: var(--tinta);
}
.pie__foto {
  position: relative;
  margin-top: -40px;
  aspect-ratio: 1862 / 1000;
  max-height: 900px;
  overflow: hidden;
}
.pie__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.pie__fundido {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--claro-3) 0%,
    rgba(246, 246, 245, 0.6) 14%,
    rgba(246, 246, 245, 0) 32%,
    rgba(10, 10, 9, 0) 70%,
    rgba(10, 10, 9, 0.8) 100%
  );
}
.pie__legal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.pie__legal-fila {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding: 22px 0 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  color: var(--papel);
}
.pie__legal-fila a {
  color: var(--papel);
}

/* ---------- Celular ---------- */

@media (max-width: 1024px) {
  .nav-escritorio {
    display: none;
  }
}

@media (max-width: 860px) {
  .aviso {
    position: static;
    width: auto;
    margin-top: 28px;
    backdrop-filter: none;
  }
  .portada {
    height: auto;
    min-height: 0;
  }
  .portada__cuerpo {
    height: auto;
    padding-top: clamp(48px, 14vh, 120px);
  }
  .cabecera__cta {
    display: none;
  }
  .pilares__lista {
    flex-basis: 100%;
  }
  .pilar {
    font-size: clamp(34px, 9vw, 48px);
  }
  /* Panel más alto en celular: deja que se vea la foto por encima del texto
     y baja la franja de lectura a la zona oscura del degradado. */
  .tiempos__panel {
    min-height: 520px;
  }
  .compas__marcas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .vencimiento__fecha {
    flex-basis: 100%;
  }
  .pie__foto {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 560px) {
  .marca__razon {
    display: none;
  }
  .cifras {
    grid-template-columns: 1fr;
  }
  .disc,
  .boton-linea {
    width: 100%;
  }
  .boton-linea {
    justify-content: center;
  }
}

/* El aviso de foto pendiente no debe caer sobre la cabecera, en ningún ancho. */
.portada .falta-foto,
.portada-int .falta-foto {
  padding-top: calc(var(--alto-header) + 20px);
}

/* ---------- Sin animación, si así lo pide el sistema ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .cinta__via,
  .deriva,
  .aparece,
  .compas__punto {
    animation: none;
  }
  .compas__punto {
    left: calc(50% - 5px);
  }
  .disc__orbe,
  .disc__txt,
  .menu__panel,
  .menu__velo,
  .tiempo,
  .pilar {
    transition: none;
  }
}

/* =========================================================================
   PÁGINAS INTERIORES — Servicios, Nosotros y Contacto
   ========================================================================= */

/* ---------- Cabecera de página interior ----------
   La maqueta quitaba el menú de 3 rayas en las interiores. Aquí se conserva:
   sin él, en celular (donde el menú de escritorio se oculta) esas páginas se
   quedaban sin ninguna navegación. */

.cabecera--solida {
  background: var(--oscuro);
  border-bottom: 1px solid #262624;
}
.cabecera--solida .cabecera__barra {
  border-bottom: none;
}
.nav-escritorio a[aria-current="page"] {
  color: var(--blanco);
  border-bottom: 1px solid var(--blanco);
  padding-bottom: 3px;
}
.cabecera__tel {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border: 1px solid var(--linea-oscura-2);
  color: var(--blanco);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

/* ---------- Portada de página interior ---------- */

.portada-int {
  position: relative;
  height: clamp(560px, 72vh, 720px);
  overflow: hidden;
  background: var(--oscuro);
  color: var(--blanco);
}
.portada-int--alta {
  height: clamp(600px, 80vh, 800px);
}
.velo--interior {
  background: linear-gradient(
    180deg,
    rgba(8, 8, 7, 0.6) 0%,
    rgba(8, 8, 7, 0.1) 26%,
    rgba(8, 8, 7, 0.3) 55%,
    rgba(8, 8, 7, 0.92) 100%
  );
}

/* Para portadas con foto clara. La de Servicios es agua a contraluz: casi
   todo el cuadro está por encima del 90 % de luminancia y el rótulo mono se
   quedaba en 1.61:1. Se deja limpio el tercio de arriba, donde están los
   caballos, y se cierra abajo, donde va el texto. */
.velo--interior-claro {
  background: linear-gradient(
    180deg,
    rgba(8, 8, 7, 0.62) 0%,
    rgba(8, 8, 7, 0.12) 16%,
    rgba(8, 8, 7, 0.42) 30%,
    rgba(8, 8, 7, 0.88) 46%,
    rgba(8, 8, 7, 0.95) 100%
  );
}
.portada-int__cuerpo {
  position: relative;
  z-index: 1;
  max-width: var(--ancho);
  height: calc(100% - var(--alto-header));
  margin: 0 auto;
  padding: 0 var(--margen) clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.portada-int__titular {
  margin: 20px 0 0;
  max-width: 980px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(52px, 6.6vw, 104px);
  line-height: 0.94;
  letter-spacing: -2px;
  color: var(--blanco);
}
.portada-int__titular .eco {
  color: var(--papel-3);
}
.portada-int__entrada {
  margin: 22px 0 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.55;
  color: #dcdcd8;
}

/* Caja de título oscura sobre la foto (Nosotros). Bird & Bird. */
.portada-int__fila {
  position: relative;
  z-index: 1;
  max-width: var(--ancho);
  height: calc(100% - var(--alto-header));
  margin: 0 auto;
  padding: 0 var(--margen) clamp(40px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
}
.caja-titulo {
  flex: 1 1 640px;
  min-width: 0;
  max-width: 860px;
  background: rgba(30, 30, 29, 0.9);
  backdrop-filter: blur(3px);
  padding: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 48px);
}
.caja-titulo .portada-int__titular {
  font-size: clamp(52px, 6.4vw, 100px);
}
.portada-int__nota {
  flex: 0 1 380px;
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: #dcdcd8;
}

/* ---------- Explorador de servicios (Bird & Bird, Capabilities) ---------- */

.explorador {
  border-bottom: 1px solid var(--linea-clara);
  background: var(--blanco);
  color: var(--tinta);
}
.explorador__caja {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--margen);
  display: flex;
  flex-wrap: wrap;
  gap: 40px 72px;
  align-items: flex-start;
}
.explorador__lista {
  flex: 0 1 400px;
  min-width: 0;
}
.explorador__tabs {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.tab {
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 5px solid transparent;
  padding: 0 0 6px;
  font-family: var(--serif);
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1.05;
  color: var(--tinta-5);
  transition: color var(--t-color) ease, border-color var(--t-color) ease;
}
.tab:hover {
  color: var(--tinta-3);
}
.tab[aria-selected="true"] {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}
.explorador__panel {
  flex: 1 1 560px;
  min-width: 0;
}
.explorador__cabeza {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.explorador__titulo {
  font-family: var(--serif);
  font-size: clamp(30px, 2.8vw, 42px);
  line-height: 1.05;
}
.explorador__linea {
  margin: 10px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--tinta-4);
}
.rejilla-cap {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
/* Tarjeta con flecha que se invierte a negro al pasar el mouse. */
.cap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  padding: 18px 22px;
  border: 1px solid var(--tinta);
  text-decoration: none;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.15;
  transition: background-color var(--t-color) ease, color var(--t-color) ease;
}
.cap:hover,
.cap:focus-visible {
  background: var(--oscuro-2);
  color: var(--blanco);
}
.cap span {
  font-family: var(--sans);
  font-size: 22px;
}
.enlace-sub--claro {
  color: var(--tinta);
  border-bottom-color: var(--tinta);
}

/* ---------- El compás, versión grande (Servicios) ---------- */

.compas-g__cabeza {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 72px;
  align-items: flex-end;
}
.compas-g__titular {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 4.6vw, 70px);
  line-height: 1;
  letter-spacing: -1px;
}
.compas-g__via {
  position: relative;
  margin-top: 64px;
  padding-top: 4px;
}
.compas-g__riel {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 1px;
  background: #4a4a47;
}
.compas-g__punto {
  position: absolute;
  top: 3px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 6px rgba(255, 106, 43, 0.18);
  animation: compas-g 5.6s ease-in-out infinite alternate;
}
@keyframes compas-g {
  from {
    left: 0;
  }
  to {
    left: calc(100% - 14px);
  }
}
.compas-g__hitos {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.hito {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.hito__marca {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--blanco);
  background: var(--oscuro);
}
.hito__verbo {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1;
}
.hito__area {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--papel-4);
}

/* ---------- Fichas de servicio ---------- */

.ficha {
  border-bottom: 1px solid var(--linea-clara);
  color: var(--tinta);
}
.ficha--blanca {
  background: var(--blanco);
}
.ficha--clara {
  background: var(--claro);
}
.ficha__caja {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(64px, 8vw, 112px) var(--margen);
  display: flex;
  flex-wrap: wrap;
  gap: 48px 64px;
  align-items: center;
}
.ficha--invertida .ficha__caja {
  flex-direction: row-reverse;
}
/* Panel oscuro con el número gigante. Tipográfico, sin foto. */
.ficha__placa {
  flex: 1.1 1 520px;
  min-width: 0;
  aspect-ratio: 5 / 4;
  background-color: var(--oscuro-2);
  color: var(--blanco);
  padding: clamp(24px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.ficha__placa-cabeza {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.6px;
  color: var(--papel-4);
}
.ficha__num {
  font-family: var(--serif);
  font-size: clamp(180px, 22vw, 320px);
  line-height: 0.8;
  letter-spacing: -10px;
}
.ficha__verbo {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 1;
}
.ficha__texto {
  flex: 1 1 440px;
  min-width: 0;
}
.ficha__rotulo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.6px;
  color: var(--tinta-4);
}
.ficha__titulo {
  margin: 20px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 4.4vw, 66px);
  line-height: 1;
  letter-spacing: -1px;
}
.ficha__linea {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--tinta-4);
}
.ficha__desc {
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta-3);
}
.incluye {
  margin-top: 12px;
  border-top: 1px solid var(--linea-clara-2);
}
.incluye__fila {
  display: flex;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linea-clara-2);
  font-size: 16px;
}
.incluye__n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tinta-4);
  width: 24px;
  flex: none;
  padding-top: 2px;
}
.ficha__pie {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* ---------- Cómo empezamos ---------- */

.pasos {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}
.paso {
  border-top: 1px solid var(--blanco);
  padding-top: 22px;
}
.paso__n {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--acento);
}
.paso__titulo {
  margin-top: 22px;
  font-size: 22px;
  font-weight: 500;
}
.paso__desc {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--papel-3);
}
.cierre {
  margin-top: 64px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 40px;
  border-top: 1px solid var(--linea-oscura);
}
.cierre__frase {
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.1;
}

/* ---------- Misión y visión ---------- */

.mv {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 120px) var(--margen);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
}
.mv__texto {
  margin: 22px 0 0;
  font-family: var(--serif);
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.16;
}

/* ---------- Valores ---------- */

.valores {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--linea-oscura);
  border: 1px solid var(--linea-oscura);
}
.valor {
  background: #0f0f0e;
  padding: 32px 28px 36px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
}
.valor__n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--acento);
}
.valor__nombre {
  margin-top: auto;
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
}
.valor__linea {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: #b5b5b0;
}

/* ---------- Socios, con retrato flotante (ObsidianUI) ---------- */

.socios__cabeza {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.socios__lista {
  position: relative;
  margin-top: 56px;
  border-top: 1px solid var(--tinta);
}
.socio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 40px;
  padding: clamp(26px, 3.2vw, 44px) 0;
  border-bottom: 1px solid var(--tinta);
}
.socio__nombre {
  flex: 1 1 440px;
  min-width: 0;
  font-family: var(--serif);
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 1;
  transition: color var(--t-color) ease;
}
.socio:hover .socio__nombre {
  color: var(--tinta-4);
}
.socio__ficha {
  flex: 0 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.socio__rol {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--tinta-4);
}
.socio__foco {
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta-3);
}
/* Hueco del retrato: los 3 socios siguen sin foto. */
.retrato {
  background-color: #1a1a18;
  background-image: url("../assets/grain.png");
  background-size: 240px 240px;
  display: flex;
  align-items: flex-end;
  font-family: var(--mono);
  color: var(--papel-4);
}
.retrato--movil {
  display: none;
  width: 96px;
  aspect-ratio: 4 / 5;
  padding: 8px;
  font-size: 9px;
}
.retrato--flotante {
  position: absolute;
  left: 0;
  top: 0;
  width: 230px;
  aspect-ratio: 4 / 5;
  padding: 14px;
  font-size: 11px;
  letter-spacing: 1.2px;
  transform: translate(-50%, -50%) scale(0.55);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  transition: left 0.55s var(--curva), top 0.55s var(--curva),
    transform 0.6s ease, opacity 0.6s ease;
}
.socios__lista[data-sobre="true"] .retrato--flotante {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---------- Cifras + llamada (Nosotros) ---------- */

.remate {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--margen);
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}
.remate__cifras {
  flex: 1 1 560px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--linea-clara-2);
  border: 1px solid var(--linea-clara-2);
}
.remate__cifras .cifra {
  padding: 26px 22px;
}
.remate__cifras .cifra__num {
  font-size: 52px;
  letter-spacing: -2px;
}
.remate__cta {
  flex: 1 1 360px;
  min-width: 0;
}
.remate__frase {
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.08;
}
.remate__cta .disc {
  margin-top: 24px;
}

/* ---------- Contacto ---------- */

.contacto {
  display: flex;
  flex-wrap: wrap;
  min-height: 1220px;
}
.contacto__foto {
  flex: 1 1 560px;
  min-width: 0;
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background: #1a1a19;
}
.contacto__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.velo--contacto {
  background: linear-gradient(180deg, rgba(8, 8, 7, 0) 45%, rgba(8, 8, 7, 0.85) 100%);
}
.contacto__titulo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(28px, 4vw, 56px);
}
.contacto__titular {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(52px, 5.6vw, 92px);
  line-height: 0.94;
  letter-spacing: -2px;
  color: var(--blanco);
}
.contacto__titular .eco {
  color: var(--papel-3);
}
.contacto__lado {
  flex: 1 1 520px;
  min-width: 0;
  padding: clamp(40px, 5vw, 72px) var(--margen);
}
.contacto__entrada {
  margin: 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--papel-3);
}

/* Aviso del prototipo: el formulario todavía no manda nada. */
.aviso-prototipo {
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid var(--acento);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.8px;
  line-height: 1.6;
  color: #ffc4a6;
}

.formulario {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px 20px;
}
.campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  color: #b5b5b0;
}
.campo--ancho {
  grid-column: 1 / -1;
}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo select {
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--linea-oscura-2);
  background: #161615;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--blanco);
}
.campo textarea {
  padding: 12px 14px;
  border: 1px solid var(--linea-oscura-2);
  background: #161615;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--blanco);
  resize: vertical;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}
.campo--casilla {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.5;
}
.campo--casilla input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--papel);
  flex: none;
}
/* Subrayado, porque al heredar el color ya no se distingue por el tono. */
.campo--casilla a {
  color: var(--papel);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.boton-enviar {
  height: 58px;
  padding: 0 30px;
  background: var(--papel);
  color: var(--tinta);
  border: none;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.8px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--t-color) ease;
}
.boton-enviar:hover {
  background: var(--blanco);
}

.enviado {
  margin-top: 28px;
  border: 1px solid var(--linea-oscura-2);
  padding: 48px 36px;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.enviado__titulo {
  margin-top: 24px;
  font-family: var(--serif);
  font-size: 52px;
  line-height: 1;
}
.enviado__texto {
  margin: 16px 0 0;
  max-width: 420px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--papel-3);
}
.enviado__volver {
  margin-top: 32px;
  align-self: flex-start;
  height: 48px;
  padding: 0 22px;
  background: transparent;
  color: var(--blanco);
  border: 1px solid #6b6b66;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.8px;
  cursor: pointer;
}

.datos {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--linea-oscura);
  border: 1px solid var(--linea-oscura);
}
.dato {
  background: #0f0f0e;
  padding: 22px;
}
.dato__rotulo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--papel-4);
}
.dato__valor {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--papel-2);
}
.dato__valor a {
  text-decoration: none;
  color: var(--papel);
}
.dato__valor a:hover {
  color: var(--acento);
}
.dato__nota {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--papel-4);
}
/* Quedan sin usar desde que el horario dejó de estar pendiente (2-nov-2026).
   Se conservan igual que el patrón de "FOTO PENDIENTE": si vuelve a faltar
   un dato, es mejor que se vea el hueco a que pase desapercibido. */
.dato__pendiente {
  color: #8e8e89;
}

/* ---------- Pie simple (páginas interiores) ---------- */

.pie-simple {
  background: var(--oscuro);
  color: var(--papel-3);
  border-top: 1px solid var(--linea-oscura);
}
.pie-simple__fila {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 28px var(--margen) 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
}
.pie-simple a {
  color: var(--papel-3);
}

/* ---------- Celular ---------- */

@media (max-width: 860px) {
  .retrato--movil {
    display: flex;
  }
  .retrato--flotante {
    display: none;
  }
  .socio__nombre {
    flex-basis: 100%;
    font-size: clamp(34px, 9vw, 48px);
  }
  .ficha--invertida .ficha__caja {
    flex-direction: row;
  }
  .ficha__num {
    font-size: clamp(120px, 30vw, 200px);
    letter-spacing: -6px;
  }
  .compas-g__hitos {
    flex-wrap: wrap;
    gap: 32px 16px;
  }
  .hito {
    flex: 1 1 40%;
  }
  .contacto {
    min-height: 0;
  }
  .contacto__foto {
    min-height: 460px;
  }
  .cabecera__tel {
    display: none;
  }
  .mv {
    gap: 40px;
  }
}

@media (max-width: 560px) {
  .boton-enviar {
    width: 100%;
  }
  .tab {
    font-size: clamp(34px, 9vw, 48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .compas-g__punto {
    animation: none;
    left: calc(50% - 7px);
  }
  .retrato--flotante,
  .socio__nombre,
  .cap,
  .tab {
    transition: none;
  }
}

/* =========================================================================
   LOGOTIPO · «El compás» (dirección elegida el 23-oct-2026)
   Especificación completa en propuestas/logotipo-compas.html

   Todo sale de --u, que es la altura de la caja de la palabra GBC.
   Tres versiones, con una frontera que no es opinión sino lo que se ve:
     completa  (≥ 44px)  palabra + compás + razón social
     media     (26–44px) palabra + compás
     reducida  (< 26px)  palabra + punto   ← por debajo de 26 px el compás
                                             se deshace; usar ésta
   ========================================================================= */

.logo {
  --u: 30px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--u) * 0.20);
  color: currentColor;
}

/* El grupo se encoge al ancho exacto de la palabra, para que el compás mida
   lo mismo que GBC y no se estire bajo la razón social. */
.logo__grupo {
  display: inline-block;
}
.logo__gbc {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--u);
  line-height: 0.84;
  letter-spacing: -0.035em;
}

.logo__compas {
  display: block;
  position: relative;
  width: 100%;
  height: calc(var(--u) * 0.22);
  margin-top: calc(var(--u) * 0.17);
}
.logo__riel {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: max(1px, calc(var(--u) * 0.018));
  background: currentColor;
  opacity: 0.32;
}
.logo__marcas {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo__m {
  width: calc(var(--u) * 0.1);
  height: calc(var(--u) * 0.1);
  border-radius: 50%;
  background: currentColor;
  opacity: 0.42;
  flex: none;
}
/* El punto vivo va SIEMPRE en la tercera marca. */
.logo__m--viva {
  width: calc(var(--u) * 0.155);
  height: calc(var(--u) * 0.155);
  background: var(--acento);
  opacity: 1;
}

.logo__pie {
  font-family: var(--mono);
  font-size: calc(var(--u) * 0.155);
  letter-spacing: 0.18em;
  color: var(--tinta-4);
  white-space: nowrap;
}
.logo--claro .logo__pie {
  color: var(--papel-4);
}

/* Versión reducida: la palabra con el punto al lado. */
.logo--min .logo__compas {
  display: none;
}
.logo--min .logo__grupo {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.26);
}
.logo--min .logo__gbc {
  display: inline;
}
.logo__punto {
  width: calc(var(--u) * 0.17);
  height: calc(var(--u) * 0.17);
  border-radius: 50%;
  background: var(--acento);
  flex: none;
}

/* En la cabecera, la razón social va al lado y no debajo, para no hacer la
   barra más alta. Por eso la marca se alinea al centro y no a la base. */
.cabecera__marca {
  align-items: center;
}

/* El punto solo aparece cuando la cabecera baja a la versión reducida. */
.cabecera__marca .logo__punto {
  display: none;
}

@media (max-width: 560px) {
  /* Por debajo de 560 px la barra aprieta: se baja a la reducida completa,
     o sea palabra + punto. Quitar solo el compás dejaría la marca sin el
     acento naranja, que es justo su seña. */
  .cabecera__marca .logo__compas {
    display: none;
  }
  .cabecera__marca .logo__grupo {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 0.26);
  }
  .cabecera__marca .logo__gbc {
    display: inline;
  }
  .cabecera__marca .logo__punto {
    display: block;
  }
}


/* ---------- Formulario: trampa y errores ---------- */

/* Fuera de la vista pero presente en el DOM, que es lo que hace que los
   robots la llenen. No se usa display:none porque muchos la detectan. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--acento);
  background: rgba(255, 106, 43, 0.06);
  font-size: 14px;
  line-height: 1.55;
  color: #ffc4a6;
}
.form-error a {
  color: #ffc4a6;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.boton-enviar[disabled] {
  opacity: 0.55;
  cursor: progress;
}

/* =========================================================================
   PÁGINA LEGAL (aviso de privacidad)
   Texto largo para leer, no para hojear: medida corta y mucho interlineado.
   ========================================================================= */

.legal {
  background: var(--claro-2);
  color: var(--tinta);
}
.legal__caja {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--margen) clamp(64px, 8vw, 112px);
}
.legal__titular {
  margin: 20px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1;
  letter-spacing: -1.4px;
}
.legal__entrada {
  margin: 24px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--tinta-2);
}
.legal h2 {
  margin: clamp(44px, 5vw, 68px) 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.4px;
  padding-top: 22px;
  border-top: 1px solid var(--linea-clara);
}
.legal h3 {
  margin: 30px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.6px;
  font-weight: 400;
  color: var(--tinta-4);
  text-transform: uppercase;
}
.legal p,
.legal li {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--tinta-2);
}
.legal p {
  margin: 16px 0 0;
}
.legal ul,
.legal ol {
  margin: 16px 0 0;
  padding-left: 22px;
}
.legal li + li {
  margin-top: 9px;
}
.legal a {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal strong {
  font-weight: 500;
  color: var(--tinta);
}

/* Lo que aún no está confirmado se marca a la vista, no en un comentario. */
.pc {
  background: rgba(255, 106, 43, 0.14);
  border-bottom: 1px solid var(--acento);
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: 0.86em;
  white-space: nowrap;
}

.legal__aviso {
  margin: 36px 0 0;
  padding: 22px 24px;
  border: 2px solid var(--acento);
  background: rgba(255, 106, 43, 0.06);
}
.legal__aviso p {
  margin: 0;
  color: var(--tinta);
}
.legal__aviso p + p {
  margin-top: 12px;
}
.legal__aviso .rotulo {
  color: #a8431a;
  margin-bottom: 10px;
}

/* La 404 es mucho más corta que el aviso, y sin esto el pie se queda a
   media ventana con un vacío debajo. En pantallas bajas no hace nada. */
.legal--corta {
  min-height: calc(100vh - 250px);
}

.legal__fecha {
  margin-top: clamp(44px, 5vw, 68px);
  padding-top: 22px;
  border-top: 1px solid var(--linea-clara);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--tinta-4);
}

/* =========================================================================
   CANALES DE CONTACTO
   Sustituyen al formulario desde el 2-nov-2026. Son el contenido principal
   de la página, no una nota al pie, así que van grandes y se tocan fácil.
   Mismo gesto que las tarjetas de Servicios: borde, flecha y se invierten.
   ========================================================================= */

.canales {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.canal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px;
  border: 1px solid var(--linea-oscura-2);
  text-decoration: none;
  color: var(--papel);
  transition: background-color var(--t-color) ease, color var(--t-color) ease,
    border-color var(--t-color) ease;
}
.canal:hover,
.canal:focus-visible {
  background: var(--papel);
  border-color: var(--papel);
  color: var(--tinta);
}
.canal__izq {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.canal__rotulo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--papel-4);
  transition: color var(--t-color) ease;
}
.canal:hover .canal__rotulo,
.canal:focus-visible .canal__rotulo {
  color: var(--tinta-4);
}
.canal__valor {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.05;
}
.canal__nota {
  font-size: 14px;
  line-height: 1.5;
  color: var(--papel-4);
  transition: color var(--t-color) ease;
}
.canal:hover .canal__nota,
.canal:focus-visible .canal__nota {
  color: var(--tinta-4);
}
.canal__flecha {
  font-family: var(--sans);
  font-size: 24px;
  flex: none;
}

/* El punto naranja marca el canal que preferimos que usen. */
.canal--principal .canal__rotulo {
  color: var(--acento);
}
.canal--principal:hover .canal__rotulo,
.canal--principal:focus-visible .canal__rotulo {
  color: var(--acento);
}

/* Dato que todavía no se puede publicar. */
.pendiente-dato {
  font-family: var(--mono);
  font-size: 0.9em;
  background: rgba(255, 106, 43, 0.14);
  border-bottom: 1px solid var(--acento);
  padding: 1px 5px;
}

@media (max-width: 560px) {
  .canal {
    padding: 20px 20px;
  }
  .canal__valor {
    font-size: clamp(22px, 7vw, 30px);
  }
  /* El correo es el único valor que no tiene espacios, así que el navegador
     no puede partirlo y se salía de su caja hasta tocar la flecha. Medido a
     375 px: 291 px de texto en una caja de 263. El overflow-wrap es la red
     por si aparece una pantalla aún más estrecha: antes que encimarse,
     que parta. */
  .canal__valor--largo {
    font-size: clamp(17px, 5.6vw, 26px);
    overflow-wrap: anywhere;
  }
}