:root{
  --blue: #0b2cff;
  --text: #1f2937;
  --muted: #6b7280;
  --panel: #ffffff;

  /* Control del recorte del montaje (se ajusta por breakpoints) */
  --montage-pos: 65% 45%;   /* x y */
  --montage-scale: 1.00;
}



@font-face {
  font-family: 'tekobold';
  src: url('fonts/teko-bold-webfont.eot');
  src: url('fonts/teko-bold-webfont.eot?#iefix') format('embedded-opentype'),
  url('fonts/teko-bold-webfont.woff2') format('woff2'),
  url('fonts/teko-bold-webfont.woff') format('woff'),
  url('fonts/teko-bold-webfont.ttf') format('truetype'),
  url('fonts/teko-bold-webfont.svg#tekobold') format('svg');
  font-weight: normal;
  font-style: normal;

}




@font-face {
  font-family: 'tekolight';
  src: url('fonts/teko-light-webfont.eot');
  src: url('fonts/teko-light-webfont.eot?#iefix') format('embedded-opentype'),
  url('fonts/teko-light-webfont.woff2') format('woff2'),
  url('fonts/teko-light-webfont.woff') format('woff'),
  url('fonts/teko-light-webfont.ttf') format('truetype'),
  url('fonts/teko-light-webfont.svg#tekolight') format('svg');
  font-weight: normal;
  font-style: normal;

}




@font-face {
  font-family: 'tekomedium';
  src: url('fonts/teko-medium-webfont.eot');
  src: url('fonts/teko-medium-webfont.eot?#iefix') format('embedded-opentype'),
  url('fonts/teko-medium-webfont.woff2') format('woff2'),
  url('fonts/teko-medium-webfont.woff') format('woff'),
  url('fonts/teko-medium-webfont.ttf') format('truetype'),
  url('fonts/teko-medium-webfont.svg#tekomedium') format('svg');
  font-weight: normal;
  font-style: normal;

}




@font-face {
  font-family: 'tekoregular';
  src: url('fonts/teko-regular-webfont.eot');
  src: url('fonts/teko-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('fonts/teko-regular-webfont.woff2') format('woff2'),
  url('fonts/teko-regular-webfont.woff') format('woff'),
  url('fonts/teko-regular-webfont.ttf') format('truetype'),
  url('fonts/teko-regular-webfont.svg#tekoregular') format('svg');
  font-weight: normal;
  font-style: normal;

}




@font-face {
  font-family: 'tekosemibold';
  src: url('fonts/teko-semibold-webfont.eot');
  src: url('fonts/teko-semibold-webfont.eot?#iefix') format('embedded-opentype'),
  url('fonts/teko-semibold-webfont.woff2') format('woff2'),
  url('fonts/teko-semibold-webfont.woff') format('woff'),
  url('fonts/teko-semibold-webfont.ttf') format('truetype'),
  url('fonts/teko-semibold-webfont.svg#tekosemibold') format('svg');
  font-weight: normal;
  font-style: normal;

}


@font-face {
  font-family: 'karlaregular';
  src: url('fonts/karla-regular.eot');
  src: url('fonts/karla-regular.eot?#iefix') format('embedded-opentype'),
  url('fonts/karla-regular.woff2') format('woff2'),
  url('fonts/karla-regular.woff') format('woff'),
  url('fonts/karla-regular.ttf') format('truetype'),
  url('fonts/karla-regular.svg#karlaregular') format('svg');
  font-weight: normal;
  font-style: normal;

}

*{ box-sizing:border-box; }
html, body { height:100%; }
body{
  margin:0;
  font-family: "Tekton Pro";
  color: var(--text);
  background:#fff;
}

/* Layout principal */
.working{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  overflow:hidden;
}

/* Panel izquierdo (igual que antes; si ya lo tienes, conserva el tuyo) */
.left{
  background: var(--panel);
  padding: clamp(28px, 4vw, 64px);
  display:flex;
  flex-direction:column;
  gap: clamp(18px, 3vw, 40px);
  padding-right: 0px;
}

.brand__logo{
  width: clamp(220px, 28vw, 420px);
  height:auto;
  display:block;
}
.brand__subtitle{
  margin-top: 10px;
  color: var(--blue);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.copy__kicker{
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 10px;
}
.copy__title{
  margin: 0 0 12px 0;
  color: var(--blue);
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.07;
  font-weight: 800;
}
.copy__text{
  margin: 0;
  color: var(--muted);
  max-width: 54ch;
  line-height: 1.55;
  font-size: 19px;
  font-family: "karlaregular";
}

.contact{
  list-style:none;
  padding:0;
  margin: 6px 0 0 0;
  display:grid;
  gap: 18px;
  max-width: 520px;
}
.contact a {
  text-decoration: none;
}
.contact__item{
  display:grid;
  grid-template-columns: 56px 1fr;
  align-items:center;
  column-gap: 16px;
}
.contact__icon{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  display:grid;
  place-items:center;
}
.contact__icon svg{
  width: 24px;
  height: 24px;
}
.contact__primary{
  font-weight: 600;
  color: #4b5563;
  font-size: 18px;
  font-family: "karlaregular";
}
.contact__secondary{
  color: var(--muted);
  margin-top: 2px;
  font-family: "karlaregular";
}

/* Tiles: marcos inclinados */
.tile{
  position:absolute;
  margin:0;
  border-radius: 10px;
  background:#fff;
  padding: 10px;              /* marco blanco */
  transform: rotate(12deg);
  overflow:hidden;
  z-index: 2;
}

.tile img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  border-radius: 7px;
}

/* Posicionamiento (ajustado para parecerse al montaje) */
.tile--a{
  right: -6%;
  top: -8%;
  width: 56%;
  height: 46%;
}

.tile--b{
  right: 10%;
  top: 26%;
  width: 62%;
  height: 50%;
  z-index: 4; /* al frente */
}

.tile--c{
  right: -10%;
  bottom: -8%;
  width: 52%;
  height: 42%;
}

/* Panel derecho */
.right{
  position:relative;
  background:#FFFFFF; /* por si tarda en cargar la imagen */
  overflow:hidden;
}

.montage-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
}

/* La clave: cover + object-position + scale */
.montage{
  position:absolute;
  inset:0;
  width:150%;
  height:100%;
  object-fit: cover;
  object-position: var(--montage-pos);
  transform: scale(var(--montage-scale));
  transform-origin: center;
}

/* ===== Breakpoints: cambia el “trozo” visible ===== */

/* 1366 / portátil: un pelín más centrado */
@media (max-width: 1400px){
  :root{
    --montage-pos: 62% 45%;
    --montage-scale: 1.05;
  }

  .left {
    padding: clamp(28px, 0vw, 64px);
    gap: clamp(18px, 3vw, 20px);
  }
}

/* 1024: acerca un poco para que el montaje “llene” mejor */
@media (max-width: 1100px){
  .working{ grid-template-columns: 1.15fr .95fr; }
}

/* 900: ajusta para que no se “pierda” el contenido importante */
@media (max-width: 900px){
  .working{ grid-template-columns: 1fr 1fr; }
  :root{
    --montage-pos: 58% 45%;
    --montage-scale: 1.18;
  }
}

/* 768 y menos: apila (derecha abajo) y recorta más “a la derecha” */
@media (max-width: 768px){
  .working{ grid-template-columns: 1fr; }
  .right{ min-height: 52vh; }

  :root{
    --montage-pos: 62% 48%;
    --montage-scale: 1.25;
  }
}

/* Móvil pequeño: recorte más agresivo */
@media (max-width: 420px){
  :root{
    --montage-pos: 66% 52%;
    --montage-scale: 1.35;
  }
}