/* =====================================================================
   IKREAA · home.css
   La portada es un talonario: dos filetes impresos y, entre ellos, las
   tres copias del mismo albaran. Elegir division es arrancar una copia.
   ===================================================================== */

.portada {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--noche);
}

/* ---------------------------------------------------------------
   Filete superior: cabecera del talonario
   --------------------------------------------------------------- */

.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--paso) calc(var(--paso) * 3);
  padding: calc(var(--paso) * 2) var(--margen);
  background: var(--papel-blanco);
  border-bottom: 2px solid var(--tinta);
}

.barra .marca { --marca-tam: clamp(1.05rem, 1.9vw, 1.4rem); }

.barra__tesis {
  font-size: clamp(.9375rem, 1.35vw, 1.0625rem);
  line-height: 1.4;
  color: var(--tinta-70);
  max-width: 60ch;
}
.barra__tesis b { font-weight: 600; color: var(--tinta); }

.barra__ref { display: grid; gap: calc(var(--paso) * .625); justify-items: end; text-align: right; }

@media (max-width: 860px) {
  .barra { gap: calc(var(--paso) * 1.5); }
  .barra__tesis { order: 3; flex-basis: 100%; }
  .barra__ref { display: none; }
}

/* ---------------------------------------------------------------
   Las tres copias
   --------------------------------------------------------------- */

.selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 0;
}

.copia {
  --copia-papel: var(--papel-vellum);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  isolation: isolate;
  /* El papel es el soporte: la foto se imprime ENCIMA, no debajo. */
  background: var(--copia-papel);
  color: var(--tinta);
  min-height: 0;
}

/* Separacion troquelada entre copias: banda de papel con punzonado. */
.copia + .copia::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 6px;
  z-index: 6;
  background-color: var(--papel-blanco);
  background-image: radial-gradient(circle at 50% 50%, var(--tinta-45) 0 1.5px, transparent 1.8px);
  background-size: 100% 14px;
  background-repeat: repeat-y;
  box-shadow: inset 1px 0 0 var(--tinta-12), inset -1px 0 0 var(--tinta-12);
}

/* --- La lamina: papel de fondo con la foto impresa en multiply --- */

.copia__lamina {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.copia__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--foto-pos, 50% 50%);
  /* Impresa sobre el papel: los claros dejan ver el color del soporte. */
  mix-blend-mode: multiply;
  /* Exposicion por columna: cada foto entra con una luz distinta. */
  filter: grayscale(var(--foto-gris, .28))
          brightness(var(--foto-brillo, 1.02))
          contrast(var(--foto-contraste, 1.06));
  transform: scale(1.02);
  transition: transform 1.2s var(--ease), filter var(--t-medio) var(--ease);
}

/* Velo de cabecera: garantiza que el rotulo en tinta se lea sobre la foto. */
.copia__lamina::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 34%;
  background: linear-gradient(to bottom, var(--copia-papel) 6%, transparent);
  opacity: .92;
}

/* Sobreimpresion: la reticula del impreso cae encima de la foto. */
.copia__reticula {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .34;
  background-image:
    repeating-linear-gradient(to bottom, var(--tinta-12) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(to right,  var(--tinta-07) 0 1px, transparent 1px 34px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 74%, transparent 97%);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 74%, transparent 97%);
  transition: opacity var(--t-medio) var(--ease);
}

/* --- Cabecera de la copia: tinta sobre papel --- */

.copia__ref {
  position: relative;
  grid-row: 1;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--paso);
  margin: calc(var(--paso) * 2.5) clamp(1.1rem, 2.1vw, 2rem) 0;
  padding-bottom: calc(var(--paso) * 1.25);
  border-bottom: 1px solid var(--tinta-20);
}
.copia__ref .rotulo { color: var(--tinta-70); }
.copia__ref .dato   { color: var(--tinta); font-weight: 500; }

/* --- Banda de tinta: el pie impreso del albaran --- */

.copia__bloque {
  position: relative;
  grid-row: 3;
  z-index: 2;
  background: var(--tinta);
  color: var(--copia-papel);
  padding: calc(var(--paso) * 2.75) clamp(1.1rem, 2.1vw, 2rem) calc(var(--paso) * 3);
  box-shadow: 0 -1px 0 var(--laton);
}

.copia__nombre {
  font-size: clamp(1.65rem, 3.2vw, 3rem);
  font-weight: 600;
  font-stretch: 118%;
  letter-spacing: -.035em;
  line-height: .94;
  color: var(--copia-papel);
}

/* Este descriptor es lo que segmenta al visitante. Iba a 10px en la cara
   menos legible del sistema: ahora es texto, no pie de foto. */
.copia__para {
  display: block;
  margin-top: calc(var(--paso) * 1.5);
  font-family: var(--rotulo);
  font-size: clamp(.875rem, 1.15vw, .9375rem);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.45;
  color: var(--laton-claro);
  max-width: 30ch;
}

/* La explicacion se despliega: la banda crece, no aparece flotando. */
.copia__nota {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-medio) var(--ease);
}
.copia__nota > span {
  overflow: hidden;
  display: grid;
  gap: calc(var(--paso) * 2);
}
.copia__nota p {
  margin-top: calc(var(--paso) * 2.5);
  max-width: 36ch;
  font-size: clamp(.8125rem, 1.05vw, .875rem);
  line-height: 1.6;
  color: rgba(243, 240, 232, .86);
}

/* Filete de laton bajo el nombre: se dibuja al activar. */
/* En reposo el filete ya esta trazado en corto: es la unica promesa de que
   la columna se abre. Al activarse se completa. */
.copia__filete {
  /* Es un <span>: sin blockificar, ni height ni transform le aplican y la
     linea no llega a dibujarse nunca, ni en reposo ni al activarse. */
  display: block;
  height: 2px;
  margin-top: calc(var(--paso) * 2);
  background: var(--laton);
  transform: scaleX(.14);
  transform-origin: left;
  transition: transform var(--t-medio) var(--ease);
}

.copia__accion {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  justify-self: start;
  margin-bottom: calc(var(--paso) * .5);
  color: var(--laton-claro);
  font-family: var(--rotulo);
  font-size: .6875rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .55em .9em;
  border: 2px solid currentColor;
  border-radius: 2px;
  opacity: 0;
  transform: rotate(-9deg) scale(1.6);
  /* El filtro de caucho es fijo: si la entrada lo redefiniera para quitar un
     desenfoque, el sello volveria a ser una caja limpia. La entrada la hacen
     opacidad y escala. */
  filter: url(#tinta-caucho);
  transition: opacity var(--t-medio) var(--ease-sello),
              transform var(--t-medio) var(--ease-sello);
}
.copia__accion svg { flex: none; width: 20px; height: 8px; }

/* --- Estado activo: raton, teclado o toque --- */

.copia:hover  .copia__foto,
.copia:focus-visible .copia__foto,
.copia[data-activa] .copia__foto {
  transform: scale(1.075);
  filter: grayscale(calc(var(--foto-gris, .28) * .5))
          brightness(calc(var(--foto-brillo, 1.02) * .82))
          contrast(calc(var(--foto-contraste, 1.06) * 1.06));
}

.copia:hover  .copia__reticula,
.copia:focus-visible .copia__reticula,
.copia[data-activa] .copia__reticula { opacity: .62; }

.copia:hover  .copia__nota,
.copia:focus-visible .copia__nota,
.copia[data-activa] .copia__nota { grid-template-rows: 1fr; }

.copia:hover  .copia__filete,
.copia:focus-visible .copia__filete,
.copia[data-activa] .copia__filete { transform: scaleX(1); }

.copia:hover  .copia__accion,
.copia:focus-visible .copia__accion,
.copia[data-activa] .copia__accion { opacity: 1; transform: rotate(-1.8deg) scale(1); }

.copia:focus-visible { outline: 3px solid var(--sello-violeta); outline-offset: -4px; }

/* Cuando una copia esta activa, las otras dos bajan un paso. */
.selector:has(.copia:hover) .copia:not(:hover) .copia__foto,
.selector:has(.copia[data-activa]) .copia:not([data-activa]) .copia__foto {
  filter: grayscale(.7)
          brightness(calc(var(--foto-brillo, 1.02) * 1.06))
          contrast(.92);
}

/* ---------------------------------------------------------------
   Filete inferior: pie del talonario
   --------------------------------------------------------------- */

.portada__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--paso) calc(var(--paso) * 3);
  padding: calc(var(--paso) * 1.75) var(--margen);
  background: var(--papel-blanco);
  border-top: 2px solid var(--tinta);
}

.portada__pie nav { display: flex; flex-wrap: wrap; gap: calc(var(--paso) * 2.5); }
.portada__pie a {
  font-family: var(--dato);
  font-size: .6875rem;
  letter-spacing: -.02em;
  color: var(--tinta-70);
  border-bottom: 1px solid transparent;
  transition: color var(--t-corto) var(--ease), border-color var(--t-corto) var(--ease);
}
.portada__pie a:hover { color: var(--tinta); border-bottom-color: var(--laton); }

/* ---------------------------------------------------------------
   Reducciones
   --------------------------------------------------------------- */

/* Tablet: las tres siguen en vertical, mas estrechas y sin nota desplegable. */
@media (max-width: 900px) {
  .copia__bloque { padding: calc(var(--paso) * 2.25) calc(var(--paso) * 1.75) calc(var(--paso) * 2.5); }
  .copia__ref { margin-inline: calc(var(--paso) * 1.75); }
  .copia__para { max-width: 22ch; }
}

/* Movil: las copias se apilan como las hojas del talonario y la pagina se
   desliza. Forzarlas a repartirse una sola altura de pantalla dejaba la foto
   en una franja de 40px, y la fotografia es el mundo de esta pagina. */
@media (max-width: 700px) {
  .portada { min-height: 0; }
  .selector {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    /* Suelo por copia: garantiza foto legible mas la banda de tinta. */
    grid-auto-rows: minmax(66svh, auto);
  }
  .copia + .copia::before {
    inset-block: auto;
    inset-inline: 0;
    top: 0;
    width: auto;
    height: 6px;
    background-size: 14px 100%;
    background-repeat: repeat-x;
    box-shadow: inset 0 1px 0 var(--tinta-12), inset 0 -1px 0 var(--tinta-12);
  }
  .copia__nota { grid-template-rows: 1fr; }
  .copia__nota p { margin-top: calc(var(--paso) * 1.75); font-size: .8125rem; max-width: 44ch; }
  .copia__accion { opacity: 1; transform: rotate(-1.8deg) scale(1); }
  .copia__filete { transform: scaleX(1); margin-top: calc(var(--paso) * 1.5); }
  .copia__nombre { font-size: clamp(1.9rem, 8.5vw, 2.5rem); }
  .copia__para { max-width: 40ch; }
}

/* Pantallas apaisadas muy bajas: la banda no puede comerse la foto. */
@media (max-height: 620px) and (min-width: 701px) {
  .copia__nombre { font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
  .copia__bloque { padding-block: calc(var(--paso) * 1.75) calc(var(--paso) * 2); }
  .copia__para { display: none; }
  .copia:hover .copia__nota,
  .copia:focus-visible .copia__nota { grid-template-rows: 0fr; }
}