/* =====================================================================
   Meridian Consultoría — réplica de "Herkules Advisory"
   Crema + azul marino + marrón. Barra lateral fija de 4 vw, header interno
   que se oculta al scrollear, escultura 3D de la letra M ligada al cursor
   y al scroll, secciones de líneas sin cajas.
   ===================================================================== */

/* ---------- 0. Tokens ---------- */
:root {
  /* Paleta (hex anotados en la referencia) */
  --bg: #ede9e0; /* fondo de página */
  --bg-side: #f3f1ea; /* barra lateral */
  --navy: #1d2a3a; /* titular línea 1-2, botón */
  --brown: #8a6a3a; /* titular línea 3-4, énfasis de color */
  --brown-deep: #6b4a2a; /* diagonales de la M */
  --plaster: #e8e2d6; /* pilares de la M */
  --line: #c9c3b6; /* reglas, bordes de formulario */
  --ink: #1a1a18; /* texto principal */
  --ink-2: #5b5a54; /* texto secundario */
  --ink-3: #8a8a80; /* labels diminutos */
  --edge: #3b2a1a; /* aristas de la escultura */
  --white: #f7f5f0; /* base de la escultura */

  /* Tipografía */
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Playfair Display", "Times New Roman", Georgia, serif;

  /* Escala */
  --fs-hero: clamp(52px, 6.65vw, 96px);
  --fs-h2: clamp(36px, 4vw, 58px);
  --fs-h3: 16px;
  --fs-body: 14px;
  --fs-lead: 12px;
  --fs-micro: 9px;

  /* Layout */
  --side-w: 4vw;
  --gutter: 6vw;

  /* Movimiento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 700ms;
  --dur-header: 500ms;
}

/* ---------- 1. Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}

/* Utilidades tipográficas */
.overline,
.micro {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.micro span {
  margin: 0 0.4em;
  color: var(--ink-3);
}
.brown {
  color: var(--brown);
}
.link {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.02em;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  transition: color 300ms var(--ease-out);
}
.link:hover {
  color: var(--brown);
}
.btn {
  display: inline-block;
  background: var(--navy);
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 16px 22px;
  border-radius: 0;
  transition: background 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.btn:hover {
  background: #2a3b50;
}
.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ---------- 2. Estructura: barra lateral + contenido ---------- */
.site {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  min-height: 100vh;
}

.side {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--bg-side);
  border-right: 1px solid rgba(201, 195, 182, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0 28px;
  z-index: 20;
}
.side__mark {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: #0e0e0c;
}
.side__nav {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  gap: 10px;
  align-items: center;
}
.side__nav a {
  transition: color 300ms var(--ease-out);
}
.side__nav a:hover {
  color: var(--ink);
}
.side__arrow {
  font-size: 14px;
  color: var(--ink);
}

.main {
  position: relative;
  min-width: 0;
}

/* ---------- 3. Header interno (fijo, se oculta al primer scroll) ---------- */
.header {
  position: fixed;
  top: 0;
  left: var(--side-w);
  right: 0;
  z-index: 15;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 26px var(--gutter) 0;
  transition: transform var(--dur-header) var(--ease-out), opacity var(--dur-header) var(--ease-out);
}
.header.is-hidden {
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.brand__letter {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #0e0e0c;
}
.brand__name {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.header__claim {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink-2);
  line-height: 1.6;
}

/* ---------- 4. Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 0 var(--gutter);
  overflow: hidden;
}
.hero__copy {
  position: relative;
  z-index: 2;
  padding-top: 22vh;
  max-width: 40vw;
}
.hero__title {
  margin-top: 3vh;
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
}
.hero__navy {
  display: block;
  color: var(--navy);
}
.hero__brown {
  display: block;
  color: var(--brown);
}
.hero__lead {
  margin-top: 3.2vh;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-2);
}
.hero__copy .link {
  margin-top: 3vh;
}

/* Escultura: x 50–100 %, y 25–95 % del viewport */
.hero__sculpture {
  position: absolute;
  left: 46%;
  right: 0;
  top: 22vh;
  height: 72vh;
  z-index: 1;
}
.sculpture__stage {
  position: absolute;
  inset: 0 6vw 0 0;
}
.sculpture__stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Cota vertical: CRITERIO arriba, ACCIÓN abajo */
.dimension {
  position: absolute;
  right: 3.2vw;
  top: 6%;
  bottom: 8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.dimension__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dimension__line {
  flex: 1;
  width: 1px;
  background: var(--line);
  position: relative;
}
.dimension__line::before,
.dimension__line::after {
  content: "";
  position: absolute;
  left: -5px;
  width: 11px;
  height: 1px;
  background: var(--ink-2);
}
.dimension__line::before {
  top: 0;
}
.dimension__line::after {
  bottom: 0;
}

.hero__foot {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 28px;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}

/* ---------- 5. Fallback CSS 3D de la M (solo sin WebGL) ---------- */
.m3d {
  --u: min(90px, 6.2vw);
  --ry: 0deg;
  --rs: 1;
  --rx: -12deg;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1600px;
  perspective-origin: 50% 40%;
}
.m3d[hidden] {
  display: none;
}
.m3d__letter {
  position: relative;
  width: calc(4.4 * var(--u));
  height: calc(3.6 * var(--u));
  transform-style: preserve-3d;
  transform: scale(var(--rs)) rotateX(var(--rx)) rotateY(calc(-18deg + var(--ry)));
  transition: transform 120ms linear;
}
.prism {
  position: absolute;
  transform-style: preserve-3d;
  width: var(--w);
  height: var(--h);
  left: calc(50% + var(--x) - var(--w) / 2);
  top: calc(50% - var(--y) - var(--h) / 2);
  transform: rotateZ(var(--rz, 0deg));
}
.prism i {
  position: absolute;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(59, 42, 26, 0.55);
  backface-visibility: hidden;
}
.prism .f,
.prism .b {
  inset: 0;
}
.prism .f {
  transform: translateZ(calc(var(--d) / 2));
  background: var(--c-front);
}
.prism .b {
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  background: var(--c-front);
}
.prism .l,
.prism .r {
  width: var(--d);
  height: var(--h);
  top: 0;
  left: calc(50% - var(--d) / 2);
}
.prism .l {
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  background: var(--c-left);
}
.prism .r {
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
  background: var(--c-right);
}
.prism .t,
.prism .u {
  width: var(--w);
  height: var(--d);
  left: 0;
  top: calc(50% - var(--d) / 2);
}
.prism .t {
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
  background: var(--c-top);
}
.prism .u {
  transform: rotateX(-90deg) translateZ(calc(var(--h) / 2));
  background: var(--c-left);
}
/* Materiales: yeso crema y madera marrón */
.m3d__pillar,
.m3d__stem {
  --c-front: #e8e2d6;
  --c-top: #f4f0e8;
  --c-left: #d6cfc0;
  --c-right: #cbc3b3;
}
.m3d__diag {
  --c-front: #6b4a2a;
  --c-top: #83603b;
  --c-left: #563a20;
  --c-right: #4c3119;
}
.m3d__base {
  --c-front: #f7f5f0;
  --c-top: #fbfaf7;
  --c-left: #e6e1d6;
  --c-right: #dcd6c9;
  --w: calc(4.4 * var(--u));
  --h: calc(0.25 * var(--u));
  --d: calc(2 * var(--u));
  --x: 0px;
  --y: calc(-1.625 * var(--u));
}
.m3d__pillar {
  --w: calc(0.7 * var(--u));
  --h: calc(3 * var(--u));
  --d: calc(0.7 * var(--u));
  --y: 0px;
}
.m3d__pillar--l {
  --x: calc(-1.25 * var(--u));
}
.m3d__pillar--r {
  --x: calc(1.25 * var(--u));
}
.m3d__stem {
  --w: calc(0.7 * var(--u));
  --h: calc(1.55 * var(--u));
  --d: calc(0.7 * var(--u));
  --x: 0px;
  --y: calc(-0.725 * var(--u));
}
.m3d__diag {
  --w: calc(0.6 * var(--u));
  --h: calc(1.8 * var(--u));
  --d: calc(0.62 * var(--u));
  --y: calc(0.59 * var(--u));
}
/* En CSS rotateZ positivo es horario (eje Y hacia abajo): signos opuestos a three.js */
.m3d__diag--l {
  --x: calc(-0.475 * var(--u));
  --rz: -32.7deg;
}
.m3d__diag--r {
  --x: calc(0.475 * var(--u));
  --rz: 32.7deg;
}

/* ---------- 6. Sección 2: El trabajo ---------- */
.work {
  padding: 14vh var(--gutter) 12vh;
}
.work__overline {
  margin-bottom: 4vh;
}
.work__title {
  margin-left: 30%;
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--navy);
  max-width: 14em;
}
.work__cols {
  margin: 6vh 0 8vh 30%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  max-width: 720px;
  color: var(--ink-2);
  line-height: 1.6;
}
.where {
  padding-top: 5vh;
  display: grid;
  grid-template-columns: 30% 1fr;
  row-gap: 12px;
}
.where__claim {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.list {
  grid-column: 2;
  margin-top: 3vh;
  max-width: 720px;
}
.list__row {
  border-top: 1px solid var(--line);
}
.list__row:last-child {
  border-bottom: 1px solid var(--line);
}
.list__btn {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 22px 0;
  text-align: left;
  font-size: 15px;
}
.list__name {
  font-weight: 500;
  color: var(--ink);
}
.list__dash,
.list__q {
  color: var(--ink-2);
}
.list__q {
  flex: 1;
}
.list__plus {
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  transition: transform 400ms var(--ease-out);
}
.list__btn[aria-expanded="true"] .list__plus {
  transform: rotate(45deg);
}
.list__panel {
  padding: 0 0 22px;
  color: var(--ink-2);
  max-width: 520px;
  line-height: 1.6;
}

/* ---------- 7. Sección 3: El enfoque ---------- */
.approach {
  display: grid;
  grid-template-columns: 46vw 1fr;
  min-height: 92vh;
}
.approach__photo {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #e3ddd1;
  /* Los auriculares sobre lima se tratan como piedra crema: sin color, cálido y claro,
     como los escalones de mármol de la referencia (filtro sobre la figura recortada) */
  filter: grayscale(1) sepia(0.32) brightness(1.22) contrast(0.8);
}
.approach__photo img {
  /* Recorte cerrado (3,4× el ancho de la figura) anclado en el punto 62 % / 62 % de la foto
     (las curvas metálicas del auricular, que leídas en crema parecen escalones de mármol).
     Sin object-fit ni transform: ancho fijo y alto automático, para que el recorte se
     pinte igual en cualquier posición de scroll. Los % verticales de margin se resuelven
     contra el ancho de la figura, que es lo que se busca. */
  position: absolute;
  max-width: none;
  width: 340%;
  height: auto;
  left: -160.8%;
  top: 50%;
  margin-top: -118.5%;
}
.approach__photo::after {
  /* velo crema para llevar la foto al tono de mármol de la referencia */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(237, 233, 224, 0.15), rgba(237, 233, 224, 0.45));
  mix-blend-mode: lighten;
}
.approach__body {
  padding: 14vh 4vw 12vh 5.5vw;
}
.approach__title {
  font-size: clamp(34px, 3.7vw, 54px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.steps {
  margin-top: 8vh;
  max-width: 560px;
}
.step {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.step:last-child {
  border-bottom: 1px solid var(--line);
}
.step__name {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.35;
}
.step__text {
  color: var(--ink-2);
  line-height: 1.6;
  font-size: 13px;
}

/* ---------- 8. Sección 4: La conversación ---------- */
.talk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8vw;
  padding: 16vh var(--gutter) 14vh;
}
.talk__title {
  margin-top: 4vh;
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.talk__lead {
  margin-top: 3.5vh;
  max-width: 34ch;
  color: var(--ink-2);
  line-height: 1.6;
}
.form {
  padding-top: 8vh;
  max-width: 520px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 36px;
}
.field__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field input,
.field select {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 0 12px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 300ms var(--ease-out);
}
.field input::placeholder {
  color: var(--ink-3);
}
.field input:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--navy);
}
.field__select {
  position: relative;
}
.field__caret {
  position: absolute;
  right: 0;
  top: 8px;
  font-size: 13px;
  color: var(--ink-2);
  pointer-events: none;
}
.form__actions {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 8px;
}
.form__note {
  margin-top: 20px;
  font-size: 12px;
  color: var(--ink-2);
  min-height: 1.5em;
}

/* ---------- 9. Footer ---------- */
.footer {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 32px;
  align-items: start;
  padding: 40px var(--gutter) 44px;
  border-top: 1px solid var(--line);
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.footer__claim {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.footer .link {
  justify-self: start;
}
.footer__links {
  justify-self: end;
  font-size: 12px;
  color: var(--ink-2);
}
.footer__links span {
  margin: 0 6px;
}
.footer__links a:hover {
  color: var(--ink);
}

/* ---------- 10. Reveal al entrar (filas e ítems) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
/* Con soporte de scroll-driven animations el reveal se liga al scroll (determinista):
   cada fila se pinta entre el 0 % y el 35 % de su entrada en el viewport, con un
   escalón de 6 % por posición (stagger). Sin soporte, queda el IntersectionObserver. */
@supports (animation-timeline: view()) {
  .reveal {
    --i: 0;
    opacity: 1;
    transform: none;
    transition: none;
    animation: reveal-in linear both;
    animation-timeline: view();
    animation-range: entry calc(var(--i) * 6%) entry calc(35% + var(--i) * 6%);
  }
  .reveal:nth-child(2) {
    --i: 1;
  }
  .reveal:nth-child(3) {
    --i: 2;
  }
}
@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 11. Responsive ---------- */
@media (max-width: 1000px) {
  :root {
    --gutter: 7vw;
    --side-w: 40px;
  }
  .hero__copy {
    max-width: 52vw;
  }
  .hero__sculpture {
    left: 50%;
    top: 26vh;
    height: 62vh;
  }
  .work__title,
  .work__cols {
    margin-left: 0;
  }
  .where {
    grid-template-columns: 1fr;
  }
  .list {
    grid-column: 1;
  }
  .approach {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .approach__photo {
    height: 48vh;
  }
  .talk {
    grid-template-columns: 1fr;
    gap: 4vh;
  }
  .form {
    padding-top: 0;
  }
  .footer {
    grid-template-columns: 1fr 1fr;
  }
  .footer__links {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  :root {
    --fs-hero: 12.4vw;
    --fs-h2: 9vw;
    --side-w: 34px;
    --gutter: 22px;
  }
  .side {
    padding: 18px 0 20px;
  }
  .side__mark {
    font-size: 18px;
  }
  .side__nav {
    font-size: 8px;
    letter-spacing: 0.14em;
  }
  .header {
    padding-top: 18px;
  }
  .header__claim {
    display: none;
  }
  .hero {
    min-height: 0;
    padding-bottom: 72px;
  }
  .hero__copy {
    max-width: none;
    padding-top: 84px;
  }
  .hero__sculpture {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    height: 46vh;
    margin: 24px -22px 0 0;
  }
  .sculpture__stage {
    inset: 0 44px 0 0;
  }
  .dimension {
    right: 10px;
    top: 4%;
    bottom: 4%;
  }
  .hero__foot {
    bottom: 22px;
    flex-direction: column;
    gap: 6px;
  }
  .work {
    padding: 72px var(--gutter) 64px;
  }
  .work__title {
    max-width: none;
  }
  .work__cols {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 32px 0 48px;
  }
  .list__btn {
    flex-wrap: wrap;
    padding: 18px 0;
    font-size: 14px;
  }
  .list__dash {
    display: none;
  }
  .list__q {
    flex-basis: 100%;
  }
  .list__plus {
    position: absolute;
    right: 0;
  }
  .list__row {
    position: relative;
  }
  .approach__photo {
    height: 42vh;
  }
  .approach__body {
    padding: 56px var(--gutter) 56px;
  }
  .step {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .talk {
    padding: 64px var(--gutter) 56px;
  }
  .form__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .footer {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .m3d {
    --u: 9vw;
  }
}

/* ---------- 12. Reduced motion: todo visible y quieto ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  .header,
  .m3d__letter,
  .list__plus,
  .link,
  .btn {
    transition: none;
  }
  /* El header deja de ser fijo: se va con el scroll sin animarse */
  .header {
    position: absolute;
    left: 0;
  }
  .header.is-hidden {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
}