/* flots · css/paginas/proyectos.css
   Proyectos (/proyectos y /proyectos/:slug) — Proyectos (1440) y MProyectos (390).
   Desktop (≥1200): imagen a la izquierda (760/1440) a todo el alto y columna derecha (680/1440)
   con el encabezado compacto arriba y el proyecto centrado. Tablet: todo apilado (encabezado
   normal, imagen, proyecto). Celular: igual que MProyectos.
   ========================================================================== */

.proyectos{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:1440px;
  min-height:calc(100vh - var(--alto-banner));
  margin-inline:auto;
}

.proyectos-main{
  flex:1 0 auto;
  display:grid;
  grid-template-columns:minmax(0, 760fr) minmax(0, 680fr);
  grid-template-rows:minmax(0, 1fr);
}

/* ---------- Encabezado compacto ----------
   ≥1400: dentro de la columna derecha, sobre el proyecto (como el artboard).
   1200–1399: la columna derecha (680/1440) no alcanza para logo + nav en una línea (se salía
   de la pantalla y aparecía scroll horizontal) → va arriba, a todo el ancho. */
@media (min-width: 1200px) and (max-width: 1399px){
  .proyectos-encabezado{ padding:28px var(--gutter) 24px; }
}
@media (min-width: 1400px){
  .proyectos-encabezado{
    position:absolute;
    top:0;
    right:0;
    width:calc(100% * 680 / 1440);
    padding:36px 56px 0;
  }
}
@media (min-width: 1400px) and (max-width: 1439px){
  .proyectos-encabezado{ padding-inline:48px; }
}

/* ---------- Columna del proyecto ---------- */
.proyectos-info{
  grid-column:2;
  grid-row:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:40px;
  min-width:0;
  /* 36 px de padding + 38 px del encabezado compacto */
  padding:74px 56px 44px;
  text-align:center;
}
/* 1200–1399: el encabezado está arriba (no encima de la columna) → sin el hueco para él */
@media (min-width: 1200px) and (max-width: 1399px){
  .proyectos-info{ padding-top:40px; }
}
.proyectos-info-estado{ gap:24px; }
.proyectos-error{ align-self:stretch; text-align:left; }

.proyectos-cabeza{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  max-width:100%;
}
.proyectos-contador{
  font-size:15px;
  line-height:1.3;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.proyectos-titulo{
  font-size:var(--fs-display-md);
  line-height:.92;
  letter-spacing:-0.05em;
  max-width:100%;
}

.proyectos-muestra{
  display:flex;
  align-items:flex-end;
  gap:14px;
  max-width:100%;
}
.proyectos-servicio{ font-size:13px; line-height:1.3; }
.proyectos-contrapeso{ flex-shrink:0; width:27px; }

/* Tarjeta de detalle: un recorte ampliado de la imagen (fondo al 260 %, posición 70 % 30 %). */
.proyectos-detalle{
  position:relative;
  flex-shrink:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  width:250px;
  height:310px;
  padding:18px;
  border-radius:10px;
  overflow:hidden;
  background:var(--fondo, var(--placeholder));
  background-size:260%;
  background-position:70% 30%;
  animation:flotsFade .5s ease 1;
}
.proyectos-detalle-foto{ padding:0; background:var(--placeholder); }
.proyectos-detalle-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
}
.proyectos-detalle-recorte{
  transform:scale(2.6);
  transform-origin:70% 30%;
}
.proyectos-detalle-marca,
.proyectos-marca{
  color:var(--tinta, var(--ink));
  font-weight:var(--peso, 300);
  letter-spacing:var(--tracking, -0.04em);
  line-height:1;
  overflow-wrap:anywhere;
}
.proyectos-detalle-marca{ font-size:44px; text-align:left; }
.proyectos-detalle-marca.larga{ font-size:20px; }

.proyectos-desc{
  max-width:380px;
  font-size:17px;
  line-height:1.55;
  color:var(--text-body);
  overflow-wrap:break-word;
}

/* ---------- Imagen grande + miniaturas ---------- */
.proyectos-hero{
  --thumb-w:48px; --thumb-h:64px;
  --thumb-w-on:64px; --thumb-h-on:84px; --thumb-borde-on:3px;
  grid-column:1;
  grid-row:1;
  position:relative;
  min-width:0;
  overflow:hidden;
  background:var(--placeholder);
}
.proyectos-hero-vacio{ background:var(--placeholder); }

.proyectos-hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  animation:flotsFade .5s ease 1;
}
.proyectos-hero-marca{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:var(--fondo, var(--placeholder));
  animation:flotsFade .5s ease 1;
}
.proyectos-marca{ font-size:140px; text-align:center; }
.proyectos-marca.larga{ font-size:64px; }

.proyectos-thumbs{
  position:absolute;
  left:0;
  right:0;
  bottom:36px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-end;
  gap:12px;
  padding:0 16px;
}
.proyectos-thumb{
  position:relative;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--thumb-w);
  height:var(--thumb-h);
  padding:0;
  border:2px solid #FFFFFF;
  border-radius:0;
  overflow:hidden;
  background:var(--fondo, var(--placeholder));
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  transition:width .25s ease, height .25s ease, border-width .25s ease, transform .25s ease;
  cursor:pointer;
}
.proyectos-thumb[aria-pressed="true"]{
  width:var(--thumb-w-on);
  height:var(--thumb-h-on);
  border-width:var(--thumb-borde-on);
  cursor:default;
}
@media (hover: hover){
  .proyectos-thumb:hover{ transform:translateY(-4px); }
}
/* Anillo blanco + tinta: se ve sobre cualquier imagen (oscura, azul o clara). */
.proyectos-thumb:focus-visible{
  outline:2px solid #FFFFFF;
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--ink), 0 4px 14px rgba(0,0,0,.25);
}
.proyectos-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
}
.proyectos-thumb-marca{
  font-size:12px;
  font-weight:600;
  line-height:1;
  color:var(--tinta, var(--ink));
  white-space:nowrap;
}

/* Al cambiar de proyecto la página se vuelve a montar: estas animaciones reproducen la
   transición de tamaño de la miniatura que se elige y de la que deja de estar elegida. */
.proyectos-thumb-crece{ animation:proyectosThumbCrece .25s ease 1; }
.proyectos-thumb-achica{ animation:proyectosThumbAchica .25s ease 1; }
@keyframes proyectosThumbCrece{
  from{ width:var(--thumb-w); height:var(--thumb-h); border-width:2px; }
}
@keyframes proyectosThumbAchica{
  from{ width:var(--thumb-w-on); height:var(--thumb-h-on); border-width:var(--thumb-borde-on); }
}

/* ---------- Sin proyectos ---------- */
.proyectos-vacio{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  gap:32px;
  padding-top:24px;
  padding-bottom:72px;
}
.proyectos-vacio-caja{
  align-items:flex-start;
  max-width:560px;
  padding:32px;
  background:var(--surface);
  text-align:left;
}
.proyectos-vacio-caja .vacio-texto{ max-width:none; }

/* ==========================================================================
   Tablet (768–1199): apilado — encabezado normal, imagen, proyecto
   ========================================================================== */
@media (max-width: 1199px){
  .proyectos-main{
    grid-template-columns:minmax(0, 1fr);
    grid-template-rows:auto auto;
  }
  .proyectos-hero{
    grid-column:1;
    grid-row:1;
    height:clamp(460px, 56vw, 620px);
  }
  .proyectos-info{
    grid-column:1;
    grid-row:2;
    justify-content:flex-start;
    padding:48px var(--gutter) 72px;
  }
}

/* ==========================================================================
   Celular (≤767) — MProyectos
   ========================================================================== */
@media (max-width: 767px){
  .proyectos-hero{
    --thumb-w:40px; --thumb-h:52px;
    --thumb-w-on:52px; --thumb-h-on:68px; --thumb-borde-on:2px;
    height:460px;
  }
  .proyectos-marca{ font-size:88px; }
  .proyectos-marca.larga{ font-size:34px; }
  .proyectos-thumbs{ bottom:20px; gap:10px; }
  .proyectos-thumb{ box-shadow:0 4px 12px rgba(0,0,0,.25); }
  .proyectos-thumb-marca{ font-size:11px; }

  .proyectos-info{
    gap:28px;
    padding:32px 24px 48px;
  }
  .proyectos-cabeza{ gap:8px; }
  .proyectos-contador{ font-size:14px; }
  .proyectos-titulo{ font-size:calc(var(--fs-display-md) + 6px); line-height:.95; }
  .proyectos-muestra{ gap:12px; }
  .proyectos-servicio{ font-size:12px; }
  .proyectos-contrapeso{ width:24px; }
  .proyectos-detalle{ width:200px; height:250px; padding:14px; }
  .proyectos-detalle-foto{ padding:0; }
  .proyectos-detalle-marca{ font-size:36px; }
  .proyectos-detalle-marca.larga{ font-size:16px; }
  .proyectos-desc{ max-width:320px; font-size:16px; }

  .proyectos-vacio{ gap:24px; padding-top:16px; padding-bottom:48px; }
  .proyectos-vacio-caja{ padding:24px 20px; }
}