/* =====================================================================
   IKreaa Enterprises · el pliego tecnico
   Copia canario. Tabular, comparable, defendible en un comite de compras.
   El amarillo lleva el peso; el resto es papel y filete.
   ===================================================================== */

:root {
  --cab-fondo: rgba(239, 226, 166, .94);
  --cab-filete: rgba(38, 32, 47, .3);
  --cab-tinta: #4A4220;
  --cab-solido: var(--papel-canario);
  --cab-tinta-fuerte: var(--tinta);
  --mercado-papel: var(--papel-blanco);
  --mercado-papel-hover: #EFE9DA;
  /* Secundario tintado desde el propio canario, nunca gris. */
  --sobre-canario: #59502A;
}

body { background: var(--papel-blanco); }

.cabecera { border-bottom-width: 2px; }
.cabecera .marca { --marca-tam: 1.0625rem; --marca-division-color: var(--sobre-canario); }

/* ---------------------------------------------------------------
   Campo canario: la mancha de color a escala de pagina
   --------------------------------------------------------------- */

.canario {
  background: var(--papel-canario);
  color: var(--tinta);
  border-bottom: 2px solid var(--tinta);
}
.canario .rotulo { color: var(--sobre-canario); }
.canario .entradilla { color: var(--sobre-canario); }

/* ---------------------------------------------------------------
   Portada del pliego
   --------------------------------------------------------------- */

.pliego {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(3rem, 7vw, 6rem);
}

.pliego h1 {
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  font-weight: 600;
  font-stretch: 104%;
  line-height: 1;
  letter-spacing: -.04em;
  max-width: 15ch;
}

.pliego__entrada {
  margin-top: calc(var(--paso) * 3);
  max-width: 50ch;
  font-size: clamp(1.0625rem, 1.45vw, 1.1875rem);
  line-height: 1.6;
  color: var(--sobre-canario);
}

.pliego__acciones { display: flex; flex-wrap: wrap; gap: calc(var(--paso) * 2); margin-top: calc(var(--paso) * 4); }
.canario .boton { --b-fondo: var(--tinta); --b-tinta: var(--papel-canario); }
.canario .boton--hueco { --b-fondo: transparent; --b-tinta: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta), 0 1px 0 0 var(--laton); }
.canario .boton--hueco:hover { --b-fondo: rgba(38, 32, 47, .07); }

/* Cuadro de suministro: el resumen que se lleva a la reunion. */
.cuadro {
  position: relative;
  background: transparent;
  border: 2px solid var(--tinta);
  isolation: isolate;
}
/* No es una sombra: es la copia de debajo asomando por el troquel.
   El papel del original va en ::after y no en background, porque un
   pseudo con z-index negativo se pinta detras del fondo de su padre. */
.cuadro::before {
  content: '';
  position: absolute;
  inset: 7px -7px -7px 7px;
  z-index: 0;
  background: var(--papel-rosa);
  box-shadow: inset 0 0 0 1px var(--tinta-45);
}
.cuadro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--papel-blanco);
}
.cuadro > * { position: relative; z-index: 2; }
.cuadro__cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: var(--paso);
  padding: calc(var(--paso) * 1.75) calc(var(--paso) * 2.25);
  border-bottom: 2px solid var(--tinta);
}
.cuadro__linea {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--paso) calc(var(--paso) * 2);
  align-items: baseline;
  padding: calc(var(--paso) * 1.5) calc(var(--paso) * 2.25);
  border-bottom: 1px solid var(--tinta-20);
}
.cuadro__linea:last-of-type { border-bottom: 0; }
.cuadro__linea span:first-child { font-size: .9375rem; }
.cuadro__linea .dato { font-size: .6875rem; color: var(--tinta-45); text-align: right; }
.cuadro__pie {
  padding: calc(var(--paso) * 2) calc(var(--paso) * 2.25);
  border-top: 2px solid var(--tinta);
  background: var(--papel-canario);
  display: flex; align-items: center; justify-content: space-between; gap: var(--paso); flex-wrap: wrap;
}

@media (max-width: 940px) { .pliego { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Banda de obra: la foto a sangre entre dos filetes
   --------------------------------------------------------------- */

.banda { position: relative; border-bottom: 2px solid var(--tinta); }
.banda img { width: 100%; height: clamp(260px, 42vw, 520px); object-fit: cover; }
.banda figcaption {
  position: absolute; left: var(--margen); bottom: calc(var(--paso) * 2);
  display: inline-flex; align-items: center; gap: calc(var(--paso) * 1.5);
  padding: .55em .9em;
  background: var(--papel-canario);
  box-shadow: 0 0 0 1.5px var(--tinta);
  font-family: var(--dato); font-size: .6875rem; letter-spacing: -.03em;
}

/* ---------------------------------------------------------------
   El pliego propiamente: tabla de alcance
   --------------------------------------------------------------- */

.tabla { width: 100%; border-collapse: collapse; margin-top: clamp(2rem, 4vw, 3.5rem); }

.tabla caption {
  text-align: left;
  padding-bottom: calc(var(--paso) * 2);
  font-family: var(--dato); font-size: .6875rem; letter-spacing: -.03em; color: var(--tinta-45);
}

.tabla th {
  text-align: left;
  padding: calc(var(--paso) * 1.5) calc(var(--paso) * 2);
  border-bottom: 2px solid var(--tinta);
  font-family: var(--rotulo); font-size: .625rem; font-weight: 700; font-stretch: 112%;
  letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-70);
  white-space: nowrap;
}
.tabla th:first-child, .tabla td:first-child { padding-left: 0; }
.tabla th:last-child,  .tabla td:last-child  { padding-right: 0; text-align: right; }
/* Una cabecera con colspan es a la vez primera y ultima celda, asi que la
   regla generica se la llevaba a la derecha. */
.tabla .tabla__parte th { text-align: left; padding-right: calc(var(--paso) * 2.5); }

.tabla td {
  padding: calc(var(--paso) * 2.25) calc(var(--paso) * 2);
  border-bottom: 1px solid var(--tinta-20);
  vertical-align: top;
  line-height: 1.55;
}
.tabla tbody tr { transition: background-color var(--t-corto) var(--ease); }
.tabla tbody tr:hover { background: rgba(239, 226, 166, .5); }
.tabla__que { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; display: block; }
/* Es un <span>: sin blockificar, margin-top y max-width se ignoran y la
   descripcion iba pegada al titulo y a todo el ancho de la columna. */
.tabla__como {
  display: block;
  margin-top: calc(var(--paso) * .875);
  font-size: .875rem;
  color: var(--tinta-70);
  max-width: 54ch;
}
.tabla td .dato { font-size: .6875rem; color: var(--tinta-45); white-space: nowrap; }

/* En movil la tabla deja de ser tabla y pasa a fichas apiladas. */
@media (max-width: 780px) {
  .tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla tr { display: grid; gap: calc(var(--paso) * 1.25); padding-block: calc(var(--paso) * 2.5); border-bottom: 1px solid var(--tinta-20); }
  .tabla td { display: block; padding: 0; border: 0; }
  .tabla td:last-child { text-align: left; }
  .tabla tbody tr:hover { background: transparent; }
}

/* ---------------------------------------------------------------
   Colaboradores
   --------------------------------------------------------------- */

.firmas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--tinta-20);
  border: 2px solid var(--tinta);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.firma {
  background: var(--papel-blanco);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  display: grid; gap: calc(var(--paso) * 1.75); align-content: start;
}
.firma h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.02em; }
.firma p { font-size: .875rem; line-height: 1.58; color: var(--tinta-70); }
.firma__rol { font-family: var(--dato); font-size: .625rem; color: var(--laton); letter-spacing: -.02em; }

/* ---------------------------------------------------------------
   Captacion sobre canario
   --------------------------------------------------------------- */

.solicitud {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.solicitud__texto { display: grid; gap: calc(var(--paso) * 3); position: sticky; top: 6.5rem; }
.solicitud__texto h2 { font-size: clamp(1.75rem, 3.4vw, 2.7rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.02; }
.solicitud__texto p { color: var(--sobre-canario); max-width: 40ch; line-height: 1.6; }

.solicitud__pasos { display: grid; gap: calc(var(--paso) * 2); margin-top: var(--paso); }
.solicitud__pasos li {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: calc(var(--paso) * 1.5);
  align-items: baseline;
  padding-bottom: calc(var(--paso) * 2);
  border-bottom: 1px solid rgba(38, 32, 47, .22);
  font-size: .9375rem; color: var(--tinta);
}
.solicitud__pasos b { font-family: var(--dato); font-size: .6875rem; font-weight: 500; color: var(--sobre-canario); }

.solicitud .hoja {
  --hoja-papel: transparent;
  border: 2px solid var(--tinta);
  box-shadow: none;
  isolation: isolate;
}
/* Misma idea que en .cuadro: la tercera copia asoma bajo el original. */
.solicitud .hoja::before {
  content: '';
  position: absolute;
  inset: 9px -9px -9px 9px;
  z-index: 0;
  background: var(--papel-rosa);
  box-shadow: inset 0 0 0 1px var(--tinta-45);
}
.solicitud .hoja::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--papel-blanco);
}
.solicitud .hoja > * { position: relative; z-index: 2; }

@media (max-width: 940px) {
  .solicitud { grid-template-columns: 1fr; }
  .solicitud__texto { position: static; }
}

/* ---------------------------------------------------------------
   El pliego como pagina
   No hay tarjetas en Enterprises. Hay un documento tabular continuo
   dividido en partes con letra, y las fotos entran como testigo de
   fila, del tamano de una muestra grapada al pliego.
   --------------------------------------------------------------- */

/* Pestana de seccion: el canario vuelve al cuerpo del documento, que es
   donde un pliego de verdad lleva sus separadores de color. */
.tabla__parte th {
  text-align: left;
  padding: calc(var(--paso) * 1.75) calc(var(--paso) * 2.5);
  border-bottom: 2px solid var(--tinta);
  border-top: 2px solid var(--tinta);
  font-size: .8125rem;
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinta);
  background: var(--papel-canario);
}
/* Aire por encima de cada parte, pero sin romper la continuidad del pliego. */
.tabla__parte + tr td { padding-top: calc(var(--paso) * 3); }
.tabla tbody tr.tabla__parte td,
.tabla tbody tr.tabla__parte th:first-child { padding-left: calc(var(--paso) * 2.5); }
.tabla tbody tr.tabla__parte:hover { background: transparent; }

/* Testigo: la muestra que se grapa al margen de la ficha. */
.tabla__conFoto td:first-child {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: calc(var(--paso) * .875) calc(var(--paso) * 2.5);
  align-items: start;
}
.tabla__testigo {
  grid-row: 1 / span 2;
  width: 132px;
  height: 96px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--tinta-20), 0 1px 0 var(--laton);
}
.tabla__conFoto .tabla__como { margin-top: 0; }

@media (max-width: 780px) {
  .tabla__parte th {
    display: block;
    padding-top: clamp(2.25rem, 6vw, 3rem);
  }
  .tabla__conFoto td:first-child {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: calc(var(--paso) * .75) calc(var(--paso) * 1.75);
  }
  .tabla__testigo { width: 88px; height: 66px; }
}