/* ==========================================================================
   proyecto.css — plantilla común de las páginas de proyecto
   Móvil primero (<768) → tableta (768–1199) → escritorio (≥1200, réplica de Framer)
   ========================================================================== */

/* ------------------------------ Portada ------------------------------ */
.p-hero {
  position: relative; display: grid; place-items: center; align-content: center; gap: 20px;
  row-gap: 0;
  min-height: 70svh; padding: 96px var(--gutter) 64px; overflow: hidden;
  color: var(--blanco); text-align: center; background: var(--negro-3);
}
.p-hero__foto { position: absolute; inset: 0; }
.p-hero__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%); }
.p-hero__foto picture { display: block; height: 100%; }
.p-hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.p-hero__t {
  position: relative; font-family: var(--font-cond); font-weight: 800;
  font-size: clamp(2.5rem, 1.6rem + 4.5vw, 5.5rem); line-height: .85; text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
}
.p-hero__t span { display: block; }
.p-hero__t .p-hero__t2 { font-size: .57em; margin-top: .1em; }
.p-hero__t--igual .p-hero__t2 { font-size: 1em; margin-top: 0; }
.p-hero__logo { position: relative; width: calc(var(--lw) * .5px); max-width: 60vw; height: auto; margin-top: 36px; }
.p-hero__tags { position: relative; margin-top: 24px; font-family: var(--font-cond); font-size: 14px; line-height: 1.2; }
@media (min-width: 768px) {
  .p-hero__logo { width: calc(var(--lw) * .8px); }
  .p-hero__tags { font-size: 16px; }
}
@media (min-width: 1200px) {
  .p-hero { display: block; min-height: 0; height: calc(1001 * var(--u)); padding: 0; }
  /* El título se centra con flex (no con transform) porque la animación de entrada usa transform.
     Centro a 440 px: deja más aire entre el título y el logo (pedido en la revisión). */
  .p-hero__t {
    position: absolute; left: 0; right: 0; top: 0; height: calc(880 * var(--u));
    display: flex; flex-direction: column; justify-content: center;
    font-size: calc(106 * var(--u)); line-height: .8; text-shadow: none;
  }
  .p-hero__t .p-hero__t2 { font-size: calc(60 * var(--u)); margin-top: 0; }
  .p-hero__t--igual .p-hero__t2 { font-size: inherit; }
  .p-hero__logo {
    position: absolute; left: 50%; top: calc(670 * var(--u));
    width: calc(var(--lw) * var(--u)); max-width: none; transform: translate(-50%, -50%); margin: 0;
  }
  .p-hero__tags { position: absolute; left: 0; right: 0; top: calc(792 * var(--u)); margin: 0; font-size: 16px; line-height: 19.2px; }
}

/* ------------------------------ Cuerpo ------------------------------ */
.p-cuerpo { display: flex; flex-direction: column; gap: 32px; padding: 40px var(--gutter) 0; }
.p-info__t { font-weight: 800; font-size: clamp(1.75rem, 1.5rem + 1vw, 2rem); line-height: 1.2; color: var(--gris-texto); }
.p-info__texto { margin-top: 20px; }
.p-info__texto p { font-size: 16px; line-height: 1.45; color: var(--gris-texto); }
.p-info__texto p + p { margin-top: 1em; }
.p-datos { margin-top: 24px; border-top: 1px solid rgba(187, 187, 187, .4); }
.p-datos div { display: flex; gap: 6px; padding: 8px 0; border-bottom: 1px solid rgba(187, 187, 187, .4); font-size: 13px; line-height: 24px; color: var(--gris-texto); }
.p-datos dt { font-weight: 600; }
.p-video {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 20px; padding: 0 24px;
  border-radius: 60px; background: rgba(0, 0, 0, .23); color: var(--blanco); font-size: 14px;
}
.p-video svg { width: 12px; height: 12px; }
.p-imagenes { display: flex; flex-direction: column; gap: 12px; }
.p-marco { position: relative; overflow: hidden; border-radius: 10px; background: #d4d4d4; }
.p-marco img { width: 100%; height: auto; }
@media (min-width: 768px) {
  .p-info { max-width: 44rem; }
  .p-info__texto p { text-align: justify; }
  .p-imagenes { gap: 20px; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .p-cuerpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; align-items: start; }
  .p-info { position: sticky; top: 40px; }
}
@media (min-width: 1200px) {
  .p-cuerpo {
    display: grid; grid-template-columns: 35.2% minmax(0, 1fr); column-gap: 3.47%;
    margin-top: 10px; padding: 0 0 0 1.67%; align-items: start;
  }
  .p-info { position: sticky; top: 130px; max-width: none; width: 98.6%; padding-top: 50px; }
  .p-info__t { font-size: 32px; line-height: 38.4px; }
  .p-info__texto { margin-top: 44px; }
  .p-info__texto p { font-size: 14px; line-height: 16.8px; text-align: justify; }
  .p-info__texto p + p { margin-top: 16.8px; }
  .p-datos { margin-top: 10px; border-top: 1px solid rgba(187, 187, 187, .2); }
  .p-datos div { padding: 0 0 10px; margin-top: 10px; border-bottom: 1px solid rgba(187, 187, 187, .2); font-size: 12px; }
  .p-imagenes { padding: 24px 24px 24px 24px; gap: 24px; }
  .p-marco { height: var(--fh); }
  .p-marco picture { position: absolute; left: var(--il); top: var(--it); width: var(--iw); height: var(--ih); max-width: none; }
  .p-marco img { width: 100%; height: 100%; object-fit: cover; }
}

/* ------------------------------ Otros proyectos ------------------------------ */
.otros { padding: var(--section-y) 0 calc(var(--section-y) * .75); overflow: hidden; }
.otros__t {
  padding: 0 var(--gutter); text-align: center;
  font-family: var(--font-cond); font-weight: 800; font-size: clamp(2.5rem, 1.2rem + 6.5vw, 7.5rem); line-height: 1.2; color: var(--gris-texto);
}
/* Móvil: fila deslizable (dedo o ratón) con puntos de posición.
   Tableta: rejilla 2 × 2. Escritorio: las 4 tarjetas completas en una fila.
   Todas las portadas se encuadran con "cover" para que queden bien en formato cuadrado. */
.otros__fila { margin-top: 28px; }
.otros__lista { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 420px); gap: 16px; }
.otro { display: block; width: 100%; aspect-ratio: 1; }
.otro .caso__img--zoom { position: static; width: 100%; height: 100%; transform: none; object-fit: cover; }
@media (max-width: 767.98px) {
  .otros__fila {
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 12px var(--gutter) 8px; scroll-padding-inline: var(--gutter);
  }
  .otros__fila::-webkit-scrollbar { display: none; }
  .otros__lista > li { scroll-snap-align: start; }
}
@media (min-width: 768px) {
  .otros__fila { padding: 0 var(--gutter); }
  .otros__lista { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; gap: 24px; }
}
@media (min-width: 1200px) {
  .otros { padding: calc(80 * var(--u)) 0 calc(120 * var(--u)); }
  .otros__t { font-size: calc(144 * var(--u)); line-height: calc(172.8 * var(--u)); }
  .otros__fila { margin-top: calc(48 * var(--u)); padding: 0 calc(48 * var(--u)); }
  .otros__lista { grid-template-columns: repeat(4, 1fr); gap: calc(32 * var(--u)); max-width: 1440px; margin: 0 auto; }
  .otro { aspect-ratio: 1; height: auto; }
  .otro .caso__info { left: calc(20 * var(--u)); right: calc(20 * var(--u)); }
  .otro .caso__t { font-size: calc(30 * var(--u)); }
  .otro .caso__tags { font-size: 14px; }
}