/* ============================================================================
   06por-PORTADA.css — LA PORTADA DE SECCIÓN, UNA SOLA VEZ
   ----------------------------------------------------------------------------
   POR QUÉ EXISTE ESTE ARCHIVO (2026-10-21)
   Oz: "no se puede postergar más, debes unificar los estilos, todo debe seguir
   la misma línea" y, antes: "diferencias entre quienes somos y clientes que eran
   de forma y no de fondo, diferencias en colores de letras y disposiciones de
   texto que deberían estar regidas por el contrato".

   Tenía razón y el motivo era estructural: la portada de Quiénes vivía en
   `06-quienes.css` y la de Clientes la volví a escribir en `06bis-clientes.css`.
   Dos copias del mismo diseño. En cuanto una se toca, divergen — y no da ningún
   error, porque las dos "funcionan".

   La copia de Clientes llegó a tener font-weight 800 donde Quiénes usa 400,
   la entradilla 8ch más ancha y más pequeña, y el valor de ficha en 700 en vez
   de 600. Nada de eso se veía "roto": se veía parecido, que es peor.

   REGLA: una portada de sección se escribe AQUÍ y solo aquí. Si una sección
   necesita una variante, se le pasa una clase modificadora (`.portada--x`) y se
   documenta en el contrato; NUNCA se duplica el bloque en su hoja.

   CARGA: va DESPUÉS de 04-componentes.css (necesita .etq, .marca, .ficha) y
   ANTES de 06-quienes.css y 06bis-clientes.css, para que esas hojas puedan
   ajustar casos concretos sin pelear con estas reglas.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   EL MARCO
   `max-width` y el centrado son los mismos en las dos secciones. El `15ch` del
   h1 es del contrato: el título nunca pasa de 15 caracteres de ancho, que es lo
   que hace que "Quiénes somos" y "Clientes" ocupen un bloque parecido.
   ------------------------------------------------------------------------- */
.portada-sec {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  /* SOLO los laterales. Con `padding:0 ...` se reseteaba el padding-top que
     pone mas abajo `var(--aire-cabecera)`, y la ceja se metia debajo de la
     cabecera (-57px). Un shorthand pisa las cuatro caras. */
  padding-inline: clamp(22px, 6vw, 90px);
}

/* LA FICHA CUELGA DEL CONTENIDO, NO SE ANCLA AL FONDO.
   Se probo `margin-top:auto` para igualar el hueco inferior y funcionaba, pero
   movia el punto de partida segun el largo de cada seccion. Manda el criterio de
   Oz: punto de partida fijo arriba y todo hacia abajo. El margen superior de la
   ficha es el mismo en las dos secciones, asi que la separacion con la
   entradilla tambien. */
/* La separacion entradilla -> ficha NO puede depender de cuantas lineas tenga
   la entradilla: la de Clientes ocupa 2 lineas y la de Quienes 1, y la ficha
   caia 24px mas abajo en Clientes (628 vs 662 en PC). La referencia es la ALTURA
   DE LA ENTRADILLA de una linea, asi que se reserva el hueco minimo y la ficha
   arranca siempre a la misma distancia del titulo. */
.portada-sec__ficha {
  margin-top: auto;
}

/* EL AIRE BAJO LA FICHA ES UNA MEDIDA, NO LO QUE SOBRE.
   Oz: "ve ese hueco te parece logico? si mides arriba debes referenciar cada
   objeto al que sigue arriba para que todos tengan las mismas separaciones".
   Tenia razon: la portada era `min-height:100svh`, el contenido ocupaba ~470px
   y los 527px restantes se quedaban de vacio debajo de la ficha. Eso no es una
   separacion, es un sobrante.
   Ahora la portada mide lo que mide su contenido + este aire fijo. Y cada
   separacion es una medida: 39 / 31 / 27 / 46 / 60. */
.portada-sec {
  --aire-ficha: clamp(48px, 5vw, 72px);
}

/* LA PORTADA NO CENTRA: EL CONTENIDO EMPIEZA ARRIBA.
   Con `justify-content:center` el bloque se centraba verticalmente y el aire
   sobrante se repartia arriba/abajo segun lo largo de cada seccion: el primer
   objeto caia en y=199 en Quienes y y=182 en Clientes (17px de salto al cambiar
   de seccion). Con flex-start todo cuelga del padding-top, que es fijo.
   El aire de abajo lo pone `padding-bottom`, igual en las dos. */
.portada-sec {
  /* La portada es una columna flex. Estaba en cada hoja de seccion
     (`.quien-portada{display:flex...}`, `.cli-portada{display:flex...}`) y
     Contacto se quedaba en `block`: ahi la ceja no cuelga de la columna y todo
     se desplaza. Trampa #1 otra vez. */
  display: flex;
  flex-direction: column;
  /* `row-gap:0`. Quienes traia `.quien-portada{gap:clamp(14px,3vw,22px)}` en
     telefono: en una columna flex el `gap` separa las FILAS, asi que sumaba
     14px a la separacion ceja→titulo (38px frente a 24px de Contacto). Es la
     trampa #4: dos fuentes de aire que se suman. La separacion la pone el
     `margin-bottom` de la ceja, una sola vez. */
  row-gap: 0;
  justify-content: flex-start;
  /* EL PUNTO DE PARTIDA. Esto estaba DUPLICADO en 06-quienes.css y en
     06bis-clientes.css, y al añadir Contacto no lo tenía: su ceja caía en y=74
     con la cabecera acabando en 57 (17px) mientras las otras dos dejaban 28px.
     Es la trampa #1 de la lista de control. Ahora vive SOLO aquí. */
  padding-top: var(--aire-cabecera);
  padding-bottom: var(--aire-ficha);
}

/* LA CEJA NO LLEVA `margin-top:auto`.
   Oz: "deberias medir el primer objeto x cantidad de pixeles desde arriba y
   todas las pantallas tengan la misma medida y comenzar a instanciar de alli
   hacia abajo, porque cada seccion es de diferente largo y si no el cambio
   entre secciones se vera una cosa mas arriba que la otra".
   Tenia razon: con `margin-top:auto` la ceja se empujaba segun lo largo que
   fuera el contenido, y el primer objeto caia en y=257 en Quienes y y=223 en
   Clientes (34px de salto al cambiar de seccion).
   Ahora el punto de partida es FIJO: el padding-top de la portada. La ceja es
   lo primero y siempre cae en el mismo y. Todo lo demas cuelga de ahi. */
.portada-sec__ceja {
  margin-top: 0;
}

/* EL NUMERO DE CAPITULO: FUERA DEL FLUJO, EN LAS TRES SECCIONES.
   Estaba DUPLICADO en `06-quienes.css` (.quien-portada .capnum) y en
   `06bis-clientes.css` (.sec-clientes .cli-portada .capnum). Contacto no lo
   tenia, asi que su `capnum` quedaba `position:static`, ocupaba 26px de alto y
   EMPUJABA la ceja hacia abajo: 70px en tablet frente a los 39px de las otras.
   Es la trampa #1 otra vez, y por eso la regla vive ahora aqui, una sola vez. */
/* Doble clase a proposito: `06bis-clientes.css` tenia
   `.sec-clientes .cli-portada .capnum{position:relative}` (0,3,0) y ganaba a un
   `.portada-sec .capnum` (0,2,0). Con `.portada-sec.portada-sec` sube a (0,3,0)
   y empata, ganando por orden de carga. */
.portada-sec.portada-sec .capnum {
  position: absolute;
  top: clamp(50px, 7vw, 90px);
  right: clamp(14px, 4vw, 70px);
  font-family: var(--fuente-texto);
  font-size: clamp(7rem, 22vw, 20rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 1px var(--borde);
  pointer-events: none;
  user-select: none;
}

/* El bloque de textos que va debajo de la marca: ceja + título + entradilla. */
.portada-sec__cabeza {
  display: block;
}

/* EL TITULO RESERVA SIEMPRE 2 LINEAS.
   `Quienes somos` y `Hablemos de tu proyecto` deben ocupar el mismo alto aunque
   el texto sea distinto. Medido en telefono: Quienes partia en 2 lineas
   (154px, 122px) y Contacto en 3 (193, 101, 168) porque "de tu proyecto" no
   cabia tras el <br>. El alto reportado coincidia (86px) por el hueco del <br>,
   pero la entradilla caia 28px mas arriba en Contacto.
   Con `min-height` el bloque mide lo mismo y la entradilla arranca en la misma Y.
   2 lineas x 1.1 de line-height = 2.2em. */
.portada-sec__titulo {
  min-height: 2.2em;
  /* Sin margen: la separacion con la ceja la pone su `margin-bottom`. Quienes
     arrastraba 14px de mas (h1 en y=139 frente a y=125 de Contacto, con la ceja
     acabando en 101 y 24px de margen en las dos). */
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
   LA CEJA: marca + filete + capítulo
   Estructura (idéntica en las dos secciones):
     <div class="portada-sec__ceja">
       <span class="etq marca">Sys<span class="marca__b">netia</span></span>
       <span class="rule"></span>
       <span class="etq">Capítulo 0N</span>
     </div>
   ------------------------------------------------------------------------- */
.portada-sec__ceja {
  display: flex;
  align-items: baseline;          /* Quienes: baseline, no center */
  gap: 14px;                      /* Quienes: 14px fijo */
  margin-bottom: clamp(24px, 4vw, 44px);   /* EXACTO de .quien-portada .meta */
  flex-wrap: wrap;
}

.portada-sec__ceja .rule {
  flex: 1 1 auto;
  min-width: 40px;
  /* max-width 120px: el filete NO cruza la pantalla. Es el valor de
     .quien-portada .meta .rule (06-quienes.css:115). Sin el tope se estiraba
     hasta 1047px en PC. */
  max-width: 120px;
  height: 1px;
  background: var(--borde);
}

/* ---------------------------------------------------------------------------
   EL TÍTULO
   clamp(2.9rem, 10.5vw, 8.2rem) · peso 400 · line-height .92 · tracking -.045em
   · max-width 15ch.
   El peso 400 NO es un descuido: Outfit en 800 con este tracking se cierra y
   pierde el aire del contrato. Ya se metió un 800 aquí una vez y se vio.
   ------------------------------------------------------------------------- */
.portada-sec__titulo {
  font-family: var(--fuente-texto);
  font-size: clamp(2.9rem, 10.5vw, 8.2rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.045em;
  max-width: 15ch;
  margin: 0;
  color: var(--fg);
}

/* La segunda línea del título ("somos") va en acento y NUNCA en itálica:
   Outfit no tiene itálica (§ de fuentes del contrato). */
.portada-sec__titulo em,
.portada-sec__titulo .b {
  font-style: normal;
  color: var(--acento);
}

/* ---------------------------------------------------------------------------
   LA ENTRADILLA
   clamp(1rem, 1.75vw, 1.42rem) · line-height 1.5 · max-width 44ch · --mut.
   Los 44ch son la medida de lectura del contrato; no se suben "para que quepa".
   ------------------------------------------------------------------------- */
.portada-sec__dek {
  margin-top: clamp(26px, 3.5vw, 42px);
  margin-bottom: 0;
  max-width: 44ch;
  font-family: var(--fuente-texto);
  font-size: clamp(1rem, 1.75vw, 1.42rem);
  line-height: 1.5;
  font-weight: 400;
  color: var(--mut);
}

/* LA ENTRADILLA TIENE ALTURA FIJA: 3 LINEAS.
   Oz: "el cambio entre secciones se vera una cosa mas arriba que la otra".
   La entradilla de Clientes ocupa 3 lineas (102px) y la de Quienes 2 (68px); con
   altura libre la ficha caia 34px mas abajo en Clientes y al cambiar de seccion
   todo se movia. Se reserva SIEMPRE el alto de 3 lineas (3 x 1.5em = 4.5em), y
   asi la ficha empieza en la misma Y en las dos.
   Si un texto futuro pasa de 3 lineas, hay que acortarlo: el limite es parte del
   diseno, no un accidente. */
.portada-sec__dek {
  min-height: 4.5em;
}

.portada-sec__dek b,
.portada-sec__dek strong {
  color: var(--fg);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   LA FICHA DE DATOS
   Cuatro pares etiqueta/valor. En PC, cuatro columnas; el gap es fluido para
   que no aparezca un hueco raro entre la ficha y lo de arriba (fallo real).
   ------------------------------------------------------------------------- */
.portada-sec__ficha {
  /* FLEX, igual que `.ficha` de Quienes (06-quienes.css).
     Probe grid con minmax(0,1fr) y NO servia: `.ficha{display:flex}` de
     06-quienes.css tiene la MISMA especificidad (0-1-0) y esa hoja carga DESPUES
     de esta, asi que ganaba el flex de todas formas. Y con flex-wrap el 4o dato
     de Clientes ("BASE / Trabajo entregado", mas largo que "BASE / Resultados
     reales" de Quienes) bajaba a una segunda fila: 2x3 frente a 1x4.
     Solucion: flex identico + `flex:1 1 0` por dato (abajo) para que los cuatro
     quepan siempre en una linea. */
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 64px);
  margin-top: clamp(38px, 5.5vw, 64px);
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--borde);
}

/* Cada dato ocupa una fraccion igual de la fila. `min-width:0` impide que un
   texto largo (DISCIPLINAS, BASE) empuje a los demas a otra linea. */
.portada-sec__ficha > * {
  flex: 1 1 0;
  min-width: 0;
}

.portada-sec__ficha .k {
  display: block;
  font-family: var(--fuente-texto);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 7px;
}

/* Peso 600, no 700: el valor es un dato, no un título. */
.portada-sec__ficha .v {
  display: block;
  font-family: var(--fuente-texto);
  font-size: clamp(1.02rem, 1.5vw, 1.32rem);
  font-weight: 600;
  line-height: 1.65;
  color: var(--fg);
}

/* ============================================================================
   RESPONSIVE — un solo sitio para las dos secciones
   ========================================================================== */

/* EL NUMERO DE CAPITULO en tablet.
   Estaba escrito dos veces con valores distintos: Quienes
   `bottom:clamp(120px,18vw,200px)` y Clientes `bottom:clamp(110px,16vw,160px)`.
   Ese era el "espacio incomprensible" que Oz ve distinto entre las dos.
   Ahora uno solo, aqui, y las dos secciones lo heredan. */
@media (max-width: 860px) {
  /* EL NUMERO DE CAPITULO pegado a la ficha.
     Oz: "tablet reduciria el espacio entre la cuadricula y el 01".
     El elemento mide ~832px de alto (font-size 22vw con line-height .8), asi que
     `bottom` pequeno lo sube mucho: su borde inferior es el que manda. Se ancla
     al fondo de la portada con el mismo hueco que queda bajo la ficha
     (--aire-ficha: 70px), de modo que el 01 queda justo encima de la cuadricula.
     Antes: Quienes bottom:clamp(120,18vw,200) y Clientes clamp(110,16vw,160). */
  .portada-sec .capnum {
    top: auto;
    bottom: var(--aire-ficha);
    opacity: .5;
  }
}

@media (max-width: 860px) {
  /* A 860px NO se toca el titulo: Quienes tampoco lo hace en este breakpoint
     (su unico cambio aqui es el capnum). Meti aqui un clamp(2.5rem,12vw,3.6rem)
     que no existe en Quienes, y en tablet el titulo de Clientes salia 23px mas
     pequeño que el de Quienes. El titulo solo cambia a 520px. */
  .portada-sec__ficha {
    gap: clamp(18px, 4vw, 40px) clamp(24px, 5vw, 64px);
  }
}

/* En teléfono la ficha es UNA COLUMNA, uno debajo de otro, con el valor a la
   derecha y filete entre filas. Es la solución de Quiénes y se replica aquí;
   el 2×2 que llegué a poner en Clientes venía de ds-v2 y no de este contrato. */
@media (max-width: 520px) {
  /* Valores EXACTOS de 06-quienes.css:309 y :339. Tenia otro clamp
     (2.1rem,11vw,2.9rem) tomado del breakpoint de altura, no de este. */
  .portada-sec__titulo {
    font-size: clamp(2.5rem, 12vw, 3.6rem);
  }
  /* NO se toca el dek aqui. En Quienes `.dek{font-size:.95rem}` NO esta en el
     breakpoint de 520px solo: esta en `max-width:520px AND max-height:640px`.
     Yo lo puse sin la condicion de altura, y en un telefono de 844px de alto la
     entradilla de Clientes salia a 15.2px frente a 16px de Quienes. */
  .portada-sec__ficha {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: clamp(28px, 6vw, 40px);
    padding-top: 20px;
  }
  .portada-sec__ficha > * {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--borde);
  }
  .portada-sec__ficha > *:last-child {
    border-bottom: none;
  }
  .portada-sec__ficha .k {
    margin-bottom: 0;
    font-size: .66rem;
  }
  .portada-sec__ficha .v {
    font-size: 1.02rem;
    text-align: right;
  }
}

/* ---------------------------------------------------------------------------
   REFUERZO: `row-gap:0` con DOBLE CLASE.
   `.quien-portada{gap:clamp(14px,3vw,22px)}` vive en una @media de
   `06-quienes.css` (0,1,0) y se carga DESPUES de esta hoja, asi que ganaba por
   orden y dejaba 38px ceja→titulo en Quienes frente a 24px en Contacto.
   Con dos clases (0,2,0) EMPATABA con `.sec-clientes .cli-portada` y perdia por
   orden de carga. Con TRES (0,3,0) gana siempre. Se pone `column-gap` tambien
   porque el shorthand `gap` fija las dos.
   ------------------------------------------------------------------------- */
.portada-sec.portada-sec.portada-sec {
  row-gap: 0;
  column-gap: 0;
}