/* ==========================================================================
   SISTEMA VISUAL DE ORICH — hoja única para todas las páginas de orich.dev
   Criterio y decisiones V1–V10:  docs/landing-sistema-visual.md
   Estructura D1–D12:             docs/landing-estructura.md
   Copy:                          ../comercial/docs/landing-orich-copy.md

   Portado desde design/landing/propuesta-sistema-visual.html (eje 2, it. 3).
   Lo que se retiró al pasar a producción: la barra del instrumento, el medidor,
   los toggles, las anotaciones de revisión y el modo de fondo liso.
   La página de caso hereda esta hoja SIN una sola variable nueva (eje 2, §5).
   ========================================================================== */

/* --------------------------------------------------------------------------
   V4 — las dos voces, AUTO-HOSPEDADAS (decisión de Julián, 25/08).
   No se cargan desde Google Fonts: eso le transmitiría la IP de cada visitante
   a un tercero sin que la persona haga nada, y contradice lo que la política
   de privacidad afirma (§5 de comercial/docs/politicas-privacidad-orich.md).
   Ambas familias son OFL. Subset latin — cubre el español completo.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 700;
  font-stretch:100% 125%; font-display:swap;
  src:url(fonts/archivo-latin.woff2) format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:italic; font-weight:400 700;
  font-stretch:100% 125%; font-display:swap;
  src:url(fonts/archivo-italic-latin.woff2) format('woff2');
}
@font-face{
  font-family:'Piazzolla'; font-style:normal; font-weight:300 800;
  font-display:swap;
  src:url(fonts/piazzolla-latin.woff2) format('woff2');
}
@font-face{
  font-family:'Piazzolla'; font-style:italic; font-weight:300 800;
  font-display:swap;
  src:url(fonts/piazzolla-italic-latin.woff2) format('woff2');
}

:root{
  /* V1 — dos materiales: papel con materia + tinta azulada */
  --papel:#f4f4f1;
  --papel-2:#ebebe6;
  --hairline:#d9d9d2;

  --tinta:#161a22;
  --tinta-2:#4a5160;
  /* V8 declara este par en ≈4.6:1, pero el #6e7585 del instrumento da 4.19:1
     — por debajo del mínimo AA de 4.5, y lo usan los eyebrows, los números de
     los pasos, los rótulos del footer y la fecha. Bajado 7 puntos por canal,
     conservando el matiz azulado: ahora sí mide 4.64:1. */
  --tinta-3:#676e7e;

  /* V2 — el único acento: la firma. Se usa SOLO en giro, acciones y firma. */
  --firma:#2337a0;
  --firma-hover:#1a2b85;

  /* V3 — la tinta concentrada: la única superficie invertida */
  --noche:#101623;
  --noche-luz:#151d31;
  --noche-texto:#e9ebef;
  --noche-2:#a9b0c0;
  --noche-firma:#9aacf8;
  --noche-hairline:#38425c;

  /* V4 — dos voces: Archivo rotula, Piazzolla conversa */
  --rotulo:"Archivo", ui-sans-serif, system-ui, sans-serif;
  --prosa:"Piazzolla", Georgia, "Times New Roman", serif;

  /* V9 — grilla editorial */
  --col-rotulo:17rem;
  --col-gap:clamp(2rem, 5vw, 5rem);

  /* V10 — ritmo comprimido: la distinción corto/largo se conserva (D4) */
  --gap-corto: clamp(2.75rem, 4.5vw, 4rem);
  --gap-largo: clamp(5rem, 8vw, 7.5rem);
}

*{box-sizing:border-box}
figure{ margin:0 }   /* el default del navegador es 1em 40px */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--prosa); font-optical-sizing:auto;
  font-size:17.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* V1 — el grano del papel: la diferencia entre "color de fondo" y "material" */
body::before{
  content:""; position:fixed; inset:0; z-index:30; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.045; mix-blend-mode:multiply;
}

::selection{ background:var(--firma); color:#f7f7f5 }

a{ color:inherit }
:focus-visible{ outline:2px solid var(--firma); outline-offset:3px; border-radius:2px }
.prueba :focus-visible, .noche :focus-visible{ outline-color:var(--noche-firma) }

/* ---------- estructura de página ---------- */
.wrap{ max-width:62rem; margin:0 auto; padding:0 clamp(1.25rem,5vw,2rem); position:relative }

section{ padding-block:var(--gap-largo) }
section.pegada{ padding-top:0 }
section.pegada > .wrap{ padding-top:var(--gap-corto) }

/* V9 — la grilla editorial: rótulo | prosa */
.sec{ display:grid; grid-template-columns:var(--col-rotulo) minmax(0,36rem); column-gap:var(--col-gap); align-items:start }
.sec > h2{ grid-column:1 }
.sec > .cuerpo{ grid-column:2 }
.sec > .aparte{ grid-column:2 }
.sec > .full{ grid-column:1 / -1 }
/* Un segundo bloque de prosa en la misma sección (el remate de la prueba, que
   va DESPUÉS de la captura). Va por clase y no por `style="grid-column:2"`
   inline: el inline sobrevive a la media query de 900px, crea una segunda
   columna implícita cuando la grilla ya colapsó a una, y aplasta la captura
   a ~22 px de ancho en mobile. */
.sec > .col-prosa{ grid-column:2 }

/* ---------- V4/V5: la voz de rótulo ---------- */
.eyebrow{
  font-family:var(--rotulo); font-weight:560; font-stretch:110%;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--tinta-3); margin:0 0 1.4rem;
}
h1{
  font-family:var(--rotulo); font-weight:620; font-stretch:112%;
  font-size:clamp(2rem, 4.3vw, 3.35rem); line-height:1.06;
  letter-spacing:-.022em; margin:0;
}
h1 .l2{ display:block }
h2{
  font-family:var(--rotulo); font-weight:620; font-stretch:108%;
  font-size:clamp(1.45rem, 2.6vw, 1.9rem); line-height:1.14;
  letter-spacing:-.015em; margin:0 0 1.5rem;
}
.sec > h2{ margin-bottom:0; padding-top:.2rem }
h2.larga{ font-size:clamp(1.2rem, 2vw, 1.5rem); line-height:1.32 }
h2.menor{ font-size:clamp(1.15rem, 1.9vw, 1.4rem); margin-bottom:1rem }
h3{ font-family:var(--rotulo) }

/* ---------- V4/V5: la voz que conversa ---------- */
p{ margin:0 0 1.05rem }
p:last-child{ margin-bottom:0 }
.sub{ font-size:1.0625rem; color:var(--tinta-2) }
.cierre{ font-size:1.1875rem; font-weight:560; color:var(--tinta); margin-top:1.6rem }
.micro{ font-size:.9375rem; color:var(--tinta-3); margin-top:1rem }
.lead{ font-size:1.28rem; font-weight:480; color:var(--tinta) }

/* Nombres de producto e identificadores técnicos: voz de rótulo, NO monospace
   (el mono está descartado — §2: el cliché de terminal que §7 prohíbe) */
.prod{ font-family:var(--rotulo); font-weight:560; font-stretch:105%; font-size:.94em; letter-spacing:-.005em }

/* ---------- V5: el giro — único itálica + firma de la página (D3) ---------- */
.giro{
  font-family:var(--prosa); font-style:italic; font-weight:600;
  font-size:clamp(1.3rem, 2.4vw, 1.75rem); line-height:1.25;
  letter-spacing:-.01em; color:var(--firma);
  margin:2.75rem 0 2.25rem;
}

/* ---------- V2/V7: acciones ---------- */
.cta{
  display:inline-block; font-family:var(--rotulo); font-weight:600; font-stretch:105%;
  font-size:1rem; letter-spacing:.005em;
  padding:.9rem 1.7rem; border-radius:2px; text-decoration:none;
  background:var(--firma); color:#f7f7f5;
  transition:background-color .15s ease;
}
.cta:hover{ background:var(--firma-hover) }
.cta-2{
  display:inline-block; font-family:var(--rotulo); font-weight:600; font-stretch:105%;
  font-size:.9375rem; text-decoration:none; color:var(--firma);
  border-bottom:1.5px solid currentColor; padding-bottom:2px;
  transition:color .15s ease;
}
.cta-2:hover{ color:var(--firma-hover) }
.cta-2.sobre-noche{ color:var(--noche-firma) }
.cta-2.sobre-noche:hover{ color:var(--noche-texto) }
.enlace-cose{
  display:inline-block; margin-top:1.6rem;
  font-weight:600; font-style:italic; color:var(--tinta);
}

/* V7 — enlaces con subrayado real: nada de enlaces que no parecen enlaces */
.foot-grid a, .prosa-enlace{
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:var(--hairline);
  transition:color .15s ease;
}
.foot-grid a:hover, .prosa-enlace:hover{ color:var(--firma); text-decoration-color:currentColor }

/* ---------- header — D1 · V6 ---------- */
.head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-block:1.6rem;
}
.mark{
  font-family:var(--rotulo); font-weight:650; font-stretch:108%;
  font-size:1.25rem; letter-spacing:-.02em; color:var(--tinta);
  text-decoration:none;
}
/* V6 — el punto ES la firma de Orich */
.mark .dot{ color:var(--firma) }
.head a:not(.mark){
  font-family:var(--rotulo); font-weight:500; font-size:.9375rem;
  color:var(--tinta-2); text-decoration:none; transition:color .15s ease;
}
.head a:not(.mark):hover{ color:var(--firma) }

/* ---------- V9 · el hero es PORTADA: centro arriba, eje izquierdo abajo ---------- */
#hero{
  background:radial-gradient(80rem 38rem at 50% -14%, #fafaf7 0%, rgba(250,250,247,0) 60%);
  padding-block:clamp(2.5rem,5vw,4rem) var(--gap-largo);
}
.portada{ text-align:center }
.portada h1{ max-width:30ch; margin-inline:auto }
.hero-cuerpo{ max-width:34rem; margin-top:clamp(3rem,5vw,4.25rem) }

/* ---------- V3: la superficie invertida — tinta plena (D4/D5) ---------- */
.prueba{
  background:linear-gradient(180deg, var(--noche-luz) 0%, var(--noche) 24rem);
  color:var(--noche-texto);
}
.prueba h2{ font-size:clamp(1.7rem, 3.2vw, 2.4rem) }
.prueba .sub{ color:var(--noche-2) }
.prueba .remate{
  font-size:clamp(1.2rem, 2vw, 1.45rem); font-weight:620; line-height:1.4;
  margin-top:2.5rem; max-width:30rem; color:var(--noche-texto);
}

/* La captura real: filete claro fino, sin sombras ni mockup de dispositivo (V3) */
.shot{ margin-top:var(--gap-corto) }
.shot img{
  display:block; width:100%; height:auto;
  border:1px solid rgba(169,176,192,.4); border-radius:2px;
}
.shot figcaption{
  font-family:var(--rotulo); font-size:.8125rem; letter-spacing:.02em;
  color:var(--noche-2); margin-top:.85rem;
}

/* ---------- cómo se trabaja — D6/D12 · V5 ---------- */
.pasos{ list-style:none; counter-reset:p; margin:0; padding:0 }
.pasos li{
  counter-increment:p; position:relative; padding:.95rem 0 .95rem 3.6rem;
  font-size:1rem; color:var(--tinta-2); line-height:1.6;
}
/* V5 — los números en tinta-3: no son giro, acción ni firma, así que no llevan acento */
.pasos li::before{
  content:counter(p, decimal-leading-zero);
  position:absolute; left:0; top:1.2rem;
  font-family:var(--rotulo); font-weight:560; font-size:.875rem;
  color:var(--tinta-3); font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
.pasos li b{ display:block; font-weight:640; color:var(--tinta); margin-bottom:.2rem; font-size:1.0625rem }

/* ---------- footer — D10 ---------- */
footer{ padding-block:var(--gap-corto) 3rem; margin-top:var(--gap-largo) }
.foot-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem,1fr));
  gap:2.25rem 2rem; padding-bottom:2.5rem;
}
.foot-grid h3{
  font-weight:600; font-stretch:110%;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--tinta-3); margin:0 0 .9rem;
}
.foot-grid a, .foot-grid p{
  font-size:.9375rem; color:var(--tinta-2); margin:0 0 .45rem; display:block;
}
.foot-base{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; align-items:baseline;
  justify-content:space-between;
  font-family:var(--rotulo); font-size:.875rem; color:var(--tinta-3);
  border-top:1px solid var(--hairline); padding-top:1.5rem;
}

/* ---------- V7: la entrada del hero — único motion de la página ---------- */
@keyframes llega{
  from{ opacity:0; transform:translateY(10px) }
  to{ opacity:1; transform:none }
}
.portada > *, .hero-cuerpo > *{ animation:llega .55s ease-out backwards }
.portada > :nth-child(1){ animation-delay:.05s }
.portada > :nth-child(2){ animation-delay:.14s }
.hero-cuerpo > :nth-child(1){ animation-delay:.28s }
.hero-cuerpo > :nth-child(2){ animation-delay:.36s }
.hero-cuerpo > :nth-child(3){ animation-delay:.44s }
.hero-cuerpo > :nth-child(4){ animation-delay:.50s }
@media (prefers-reduced-motion: reduce){
  .portada > *, .hero-cuerpo > *{ animation:none }
  .cta, .cta-2, .head a, .foot-grid a{ transition:none }
}

/* ==========================================================================
   PÁGINAS INTERIORES (caso, privacidad)
   El encabezado NO abre como portada: la landing capta, el interior informa
   (eje 2, §5). Mismo sistema, sin una variable nueva.
   ========================================================================== */
.enc{ padding-block:clamp(2rem,4vw,3.25rem) var(--gap-corto) }
.enc .eyebrow{ margin-bottom:1.1rem }
.enc h1{ font-size:clamp(1.85rem, 3.6vw, 2.85rem); max-width:26ch }
.enc .sub{ max-width:36rem; margin-top:1.6rem; font-size:1.125rem }

/* C1 — encabezado del caso: NO es hero. Sin CTA, sin imagen, menor escala que
   el H1 de la landing. La landing abre como portada porque capta; el caso
   entra derecho porque informa. */
.caso-head h1{ margin-bottom:1.5rem }
.bajada{ font-size:1.19rem; color:var(--tinta-2); max-width:34rem }

/* C2 — la superficie invertida del caso se la gana el salto multi-tenant
   (D4 rige por página, no global) */
.salto{
  background:linear-gradient(180deg, var(--noche-luz) 0%, var(--noche) 24rem);
  color:var(--noche-texto);
}
.salto h2{ font-size:clamp(1.7rem, 3.2vw, 2.4rem) }
.salto .sub{ color:var(--noche-2) }
.salto .prod{ color:var(--noche-texto) }

/* C5 — el segundo nivel de lectura: subordinado, NO escondido */
.detalle{
  margin-top:2.25rem; padding-left:1.1rem;
  border-left:1.5px solid var(--noche-hairline);
  font-size:.9375rem; line-height:1.6; color:var(--noche-2);
}
.detalle .rot{
  display:block; font-family:var(--rotulo); font-weight:600;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--noche-2); margin-bottom:.5rem;
}

.volver{
  font-family:var(--rotulo); font-size:.875rem; color:var(--tinta-3);
  text-decoration:none; display:inline-block; margin-bottom:2rem;
  transition:color .15s ease;
}
.volver:hover{ color:var(--firma) }

/* El segundo nivel de lectura: filete lateral + cuerpo menor.
   Subordinado, NO escondido (nota 2 del eje 2, §5). */
.nivel-2{
  border-left:1.5px solid var(--hairline); padding-left:1.15rem;
  font-size:1rem; color:var(--tinta-2); margin-top:1.5rem;
}
.prueba .nivel-2{ border-left-color:var(--noche-hairline); color:var(--noche-2) }

/* C4/D6 — los entregables: texto anotado junto a la pantalla real, alternando
   lado. CERO cards con ícono: es la firma visual del «hecho rápido» (§7).
   El ritmo lo hace la alternancia, no un separador. */
.entregables{ list-style:none; counter-reset:e; margin:0; padding:0 }
.entregables > li{
  counter-increment:e; display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  column-gap:var(--col-gap); align-items:center;
  padding-block:clamp(1.75rem,3vw,2.75rem);
}
.entregables > li:first-child{ padding-top:0 }
.entregables > li:nth-child(even) .txt{ order:2 }
/* Un entregable cuya captura todavía no existe va a una sola columna: sin
   hueco y sin placeholder, que §7 prohíbe en la página publicada. */
.entregables > li.sin-captura{ grid-template-columns:minmax(0,36rem) }
.entregables .txt{ position:relative; padding-left:3.4rem }
.entregables .txt::before{
  content:counter(e, decimal-leading-zero); position:absolute; left:0; top:.28rem;
  font-family:var(--rotulo); font-weight:560; font-size:.875rem;
  color:var(--tinta-3); font-variant-numeric:tabular-nums; letter-spacing:.04em;
}
.entregables .txt b{
  display:block; font-family:var(--prosa); font-weight:640;
  font-size:1.125rem; color:var(--tinta); margin-bottom:.3rem;
}
.entregables .txt span{ font-size:1rem; color:var(--tinta-2); line-height:1.6; display:block }
.entregables .shot{ margin-top:0 }
.entregables .shot img{ border-color:var(--hairline) }
.entregables .shot figcaption{ color:var(--tinta-3) }

/* Prosa larga de las páginas legales */
.legal{ max-width:38rem }
.legal h2{ font-size:clamp(1.2rem,2vw,1.45rem); margin-top:var(--gap-corto) }
.legal h2:first-child{ margin-top:0 }
.legal p, .legal li{ color:var(--tinta-2); font-size:1.0625rem }
.legal ul{ padding-left:1.25rem; margin:0 0 1.05rem }
.legal li{ margin-bottom:.5rem }
/* La fecha vive en el encabezado, fuera de .legal: el selector va sin anidar */
.fecha{
  font-family:var(--rotulo); font-size:.8125rem; letter-spacing:.02em;
  text-transform:uppercase; color:var(--tinta-3); margin-top:.9rem;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .sec{ grid-template-columns:minmax(0,36rem) }
  .sec > h2, .sec > .cuerpo, .sec > .aparte, .sec > .col-prosa{ grid-column:1 }
  .sec > h2{ margin-bottom:1.4rem; padding-top:0 }
  /* D7 — el aparte conserva una indentación menor cuando la grilla colapsa */
  .sec > .aparte{ margin-left:clamp(0rem, 8vw, 4rem) }
  .pasos li{ padding-left:2.9rem }
  /* A este ancho la primera línea del H1 ya no entra entera y se parte sola:
     balanceada queda simétrica en vez de dejar una viuda de una palabra.
     Sólo acá — en desktop las dos líneas las fija el <span class="l2">. */
  .portada h1{ text-wrap:balance }
  .entregables > li{ grid-template-columns:minmax(0,1fr); row-gap:1.5rem }
  .entregables > li:nth-child(even) .txt{ order:0 }
  .entregables .txt{ padding-left:2.9rem }
}