/* ===== LEY ABOUT 1440 FIJO ===== */
:root{
  --fg: #111;

  /* Medidas maestras */
  --m:    100px;   /* márgenes laterales */
  --colL: 410px;   /* columna izquierda */
  --gap:   64px;   /* eje central */
  --colR: calc(1440px - (2 * var(--m)) - var(--colL) - var(--gap));

  --h1: 332px;     /* banda superior (base flor, ABOUT, cubo) */
  --h2: 276px;     /* banda intermedia (nombre) */
  --h1-custom-width: 480px; /* ajusta al gusto */
}

/* Lienzo centrado + retícula rígida */
.about-canvas{
  width: 1200px;
  margin: 50px;
    transform: scale(.75);
  transform-origin: center top;

  display: grid;
  grid-template-columns:
    var(--m)      /* margen izq */
    var(--colL)   /* columna flor/texto */
    var(--gap)    /* eje vertical (gap) */
    var(--colR)   /* columna derecha */
    var(--m);     /* margen der */

  grid-template-rows:
    var(--h1)     /* H1 */
    var(--h2)     /* H2 */
    auto;         /* textos bajos */

  align-items: start;
  position: relative;
  top: -30px;   /* sube todo el contenido 50 px */
}

/* Guías (líneas) */
.g{
  background: var(--fg);
  opacity: .35;
  pointer-events: none;
}
.g-h1{
  grid-column: 1 / -1;
  grid-row: 1;
  height: 1px;
  align-self: end;        /* línea superior */
  
}
.g-h2{
  grid-column: 1 / -1;
  grid-row: 2;
  height: 1px;
  align-self: end;        /* línea intermedia */
}
.g-v{
  grid-column: 3;         /* gap central */
  grid-row: 1 / -1;
  width: 1px;
  justify-self: center;   /* línea vertical exacta */
  transform: translateX(-90px);
}


.g-h1.g-h1--custom{
  grid-column: 1 / -1;
  height: 2px;
  align-self: end;
  justify-self: start;       /* o end, según dónde la quieras anclar */
  width: var(--h1-custom-width);
  
}

.g-h2.g-h2--short {
  grid-column: 1 / -1;
  height: 2px;
  align-self: end;
  justify-self: start;
  width: calc(100% - 90px); /* o prueba con 50px si quieres menos recorte */
}

/* Flor apoyada en H1 */
.flower{
  grid-column: 2;
  grid-row: 1 / 2;
position: relative; /* esto es clave */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* base cae en H1 */
  align-items: flex-start;
  margin: 0;
}
.flower-img{
  width: auto;
  max-height: calc(var(--h1) - 24px); /* respiro antes de la línea */
  object-fit: contain;
 transform: translateY(12px);
  
}
.about-cap{
  position: absolute;
  bottom: 50px;     /* o el valor que prefieras desde la base */
  left: 200px;      /* mueve hacia la derecha */
  
 letter-spacing: .3em;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 1.2rem; 

}

.quadrant--top-right {
  grid-column: 4;
  grid-row: 1;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;

  transform: translate(-300px, 300px);
}

.about-cap--mirror {
  font-family: "Grenze", serif;
  font-size: 30px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--fg);
  opacity: 0.8;

  transform: scaleY(-1); /* solo espejo vertical */
  pointer-events: none;
}



/* Cubo centrado en el cruce (eje/H1) */
.cube{
  grid-column: 2;
  grid-row: 1 / 2;

  /* justify-self: center; */
  align-self: start;
  transform: translate(85%, -15%);

  width: 50px;
  height: 50px;
  background: var(--fg);
  opacity: .10;
}

.cube-right-h2 {
  position: absolute;
  right: 95px;           /* desde el borde derecho del contenedor */
  top: calc(
    var(--h1) + var(--h2) - 1px
  );                     /* calcula altura acumulada hasta justo sobre la línea */
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: var(--fg);
  opacity: 0.1;
  z-index: 3;
}

/* Nombre en banda intermedia (derecha) */
.about-name{
  grid-column: 4;
  grid-row: 2;
  align-self: end;        /* justo SOBRE la línea H2 */
  justify-self: start;
  margin-left: -72px; /* ajusta según lo que necesites */
  margin-bottom: 10px;    /* levanta un poco el bloque para respirar */
 font-family: 'Archivo Narrow', sans-serif;
  font-weight: 600; 
  font-size: 25px;
  letter-spacing: .35em;
  line-height: 1.6;
  text-align: left;
}

/* Teaser pegado a H2 (izquierda) */
.about-teaser{
  grid-column: 2;
  grid-row: 2;

  align-self: start;
  justify-self: start;
  margin-top: 14px;       /* cae apenas bajo H2 */
  max-width: 40ch;

  font-size: .9rem;
  line-height: 1.45;
}

/* BLOQUE EDITORIAL */
.bio-left{
  grid-column: 2;
  grid-row: 3;
  text-align: right;
margin-left: -90px; 
margin-right: 90px;
  margin-top: 54px;
  padding: 1rem;
   /* outline: 1px dashed magenta;*/
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .9rem;
  line-height: 1.45;
}
.bio-right{
  grid-column: 4;
  grid-row: 3;
 margin-left: -90px; 
 margin-right: 150px;
  margin-top: 54px;
  padding: 1rem;
    /* outline: 1px dashed magenta;*/
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .9rem;
  line-height: 1.45;
}

.bio-left p + p,
.bio-right p + p {
  margin-top: 70px;  /* o 60px si quieres un brinco mayor */
}


/* ===== MODO COMPACTO (se parece al “contraído” que te gustaba) ===== */
.about--compact{
  /* ancho total del lienzo (no responsive aún) */
  width: 1200px;

  /* variables locales SOLO para este bloque */
  --m:    80px;   /* márgenes laterales más chicos */
  --colL: 360px;  /* columna izquierda más angosta */
  --gap:  48px;   /* eje central más cerrado */
  --colR: calc(1200px - (2 * var(--m)) - var(--colL) - var(--gap));

  --h1: 300px;    /* banda superior (baja un poco la flor) */
  --h2: 240px;    /* banda intermedia (sube un poco el nombre) */
}

/* aseguro que la guía vertical se vea siempre en este modo */
.about--compact .g-v{
  width: 1px;
  justify-self: center;
  align-self: stretch;
  background: var(--fg);
  opacity: .45;   /* subo un poco para verla claro */
  z-index: 1;
}

.about-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px 60px; /* espacio vertical y horizontal */
  margin-top: 120px;
  margin-bottom: 60px;
}

.animal {
  grid-column: 4;
  grid-row: 3; /* anclado abajo del contenido derecho */
  justify-self: end;
  align-self: end;
  margin-top: 40px;
}

.animal img {
  max-width: 450px;
  margin-top: 60px;     /* lo empuja visualmente hacia el bloque derecho */
  opacity: 0.9;
  margin-right: 250px;
}

.panel--about {
    padding-top: 80px;       /* crea espacio visual respecto al borde superior */
  box-sizing: border-box;
  overflow-y: auto;     /* activa scroll vertical */
  overflow-x: hidden;   /* evita scroll horizontal accidental */
  height: 100vh;        /* ocupa la ventana completa */
  /*scroll-behavior: smooth; /* scroll suave */
}

.h-scroll {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  height: 100vh;
}

@media (max-height: 900px) {
  .panel--about {
    padding-top: 60px;
  }
  .about-canvas {
    margin-top: 20px;
  }
}

/* === Línea de remate en About === */
.about-remate-line {
  position: absolute;
  bottom: 5vh;          /* separación del borde inferior */
  left: 50%;            /* alineada al eje vertical central */
  transform: translateX(-50%);
  width: 380px;         /* largo de la línea, ajusta a gusto */
  height: 1px;
  background-color: var(--fg);
  opacity: 0.6;
}