/* ==========================================================================
   Composición editorial · fotografías cuadradas con bloque de color
   Se usa en las portadas de Inicio, Noticias y Sobre nosotros y en la
   banda Comunidad de Inicio. Todo se configura desde el HTML con variables,
   sin tocar este archivo.

   ESTRUCTURA
   <div class="editorial" style="--ed-proporcion: 1.08">       ← lienzo
     <figure class="foto-bloque" style="--fb-x:4; --fb-y:8; --fb-tam:70;
             --fb-color: var(--lima-suave); --fb-desp-x:10; --fb-desp-y:-9">
       <img …>
     </figure>
     …
   </div>

   LIENZO (.editorial)
   --ed-proporcion      ancho / alto del lienzo en escritorio     (1.08)
   --ed-proporcion-m    ídem en móvil                             (= escritorio)
   Las coordenadas de las fotos se expresan en % del ancho del lienzo,
   así la composición escala entera y nunca se deforma.

   FOTO (.foto-bloque)
   --fb-x, --fb-y       posición de la esquina superior izquierda (% ancho)
   --fb-tam             ancho de la foto (% del ancho del lienzo)
   --fb-ratio           proporción de la foto (1 = cuadrada; 0.8 = 4:5)
   --fb-giro            rotación en grados (número, sin unidad)
   --fb-z               orden de apilado
   --fb-foco            punto de encuadre de la imagen (object-position)
   --fb-radio           radio de las esquinas (4px por defecto)
   --fb-marco           color del marco fino (opcional)
   --fb-marco-ancho     grosor del marco (0 por defecto)
   BLOQUE DE COLOR (detrás de la foto, opcional)
   --fb-color           color del bloque (sin valor = sin bloque)
   --fb-desp-x/-y       desplazamiento del bloque (% del tamaño de la foto)
   --fb-bloque-w/-h     tamaño del bloque (% del tamaño de la foto, 100)
   MÓVIL (< 700px): las mismas variables con sufijo -m (--fb-x-m, --fb-y-m,
   --fb-tam-m, --fb-giro-m, --fb-desp-x-m, --fb-desp-y-m). Si no se definen,
   se usan las de escritorio. .foto-bloque--solo-escritorio la oculta.
   ========================================================================== */

.editorial {
  --ed-p: var(--ed-proporcion, 1.08);
  position: relative;
  width: 100%;
  aspect-ratio: var(--ed-p);
  container-type: inline-size;
}

.foto-bloque {
  --_x: var(--fb-x, 0);
  --_y: var(--fb-y, 0);
  --_tam: var(--fb-tam, 60);
  --_giro: var(--fb-giro, 0);
  --_dx: var(--fb-desp-x, 8);
  --_dy: var(--fb-desp-y, -8);
  position: absolute;
  z-index: var(--fb-z, 1);
  left: calc(var(--_x) * 1cqw);
  top: calc(var(--_y) * 1cqw);
  width: calc(var(--_tam) * 1cqw);
  aspect-ratio: var(--fb-ratio, 1);
  margin: 0;
  isolation: isolate;
  transform: rotate(calc(var(--_giro) * 1deg));
  transition: transform 0.5s var(--ease);
}

/* Bloque de color: detrás de la foto, desplazado y sin sombra.
   Sin --fb-color queda transparente. */
.foto-bloque::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(var(--_dx) * 1%);
  top: calc(var(--_dy) * 1%);
  width: calc(var(--fb-bloque-w, 100) * 1%);
  height: calc(var(--fb-bloque-h, 100) * 1%);
  border-radius: 2px;
  background: var(--fb-color, transparent);
}

.foto-bloque img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: var(--fb-marco-ancho, 0px) solid var(--fb-marco, transparent);
  border-radius: var(--fb-radio, 4px);
  object-fit: cover;
  object-position: var(--fb-foco, 50% 50%);
  background: var(--petroleo-profundo);
}

/* Variante en flujo normal, para usarla fuera de un lienzo */
.foto-bloque--estatica { position: relative; left: auto; top: auto; width: 100%; }

@media (hover: hover) {
  /* Solo crece un 2%: no sube de capa, así nunca tapa a la otra foto */
  .foto-bloque--vivo:hover { transform: rotate(0deg) scale(1.02); }
}

@media (max-width: 699px) {
  .editorial { aspect-ratio: var(--ed-proporcion-m, var(--ed-p)); }

  .foto-bloque {
    --_x: var(--fb-x-m, var(--fb-x, 0));
    --_y: var(--fb-y-m, var(--fb-y, 0));
    --_tam: var(--fb-tam-m, var(--fb-tam, 60));
    --_giro: var(--fb-giro-m, calc(var(--fb-giro, 0) * 0.5));
    --_dx: var(--fb-desp-x-m, var(--fb-desp-x, 8));
    --_dy: var(--fb-desp-y-m, var(--fb-desp-y, -8));
  }

  .foto-bloque--solo-escritorio { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .foto-bloque { transition: none; }
}

/* ==========================================================================
   Portadas: el lienzo cuadra dentro del espacio que deja el texto
   (.hero__collage es un contenedor de tamaño)
   ========================================================================== */

.hero .editorial {
  width: min(100cqw, calc(100cqh * var(--ed-p)));
  aspect-ratio: var(--ed-p);
}

@media (max-width: 699px) {
  .hero .editorial {
    width: min(100cqw, calc(100cqh * var(--ed-proporcion-m, var(--ed-p))));
    aspect-ratio: var(--ed-proporcion-m, var(--ed-p));
  }
}

/* Sello de la portada: se ubica en el lienzo con --sello-x / --sello-y
   (y --sello-x-m / --sello-y-m en móvil), en % del ancho del lienzo */
.hero .editorial .hero__sello { white-space: nowrap; }

@media (max-width: 699px) {
  .hero .editorial .hero__sello {
    left: calc(var(--sello-x-m, var(--sello-x, 0)) * 1cqw);
    top: calc(var(--sello-y-m, var(--sello-y, 0)) * 1cqw);
    padding: 6px 10px;
    font-size: 0.6875rem;
  }

  .hero .editorial .hero__sello strong { font-size: 1.125rem; }
}

/* En dos columnas el lienzo se apoya a la derecha */
@media (min-width: 960px) and (min-aspect-ratio: 1/1), (min-width: 600px) and (min-aspect-ratio: 3/2) {
  .hero__collage { justify-items: end; }
}

/* ==========================================================================
   Comunidad (Inicio): moodboard sobre dos zonas de color
   ========================================================================== */

.comunidad__banda {
  --com-claro: var(--petroleo-suave);
  --com-oscuro: var(--petroleo-profundo);
  --com-corte: 45%;   /* altura del lienzo donde empieza la zona oscura */
  position: relative;
  overflow: hidden;
  padding-top: var(--seccion);
  background: var(--com-claro);
  color: var(--texto);
}

.comunidad__cabecera {
  display: grid;
  gap: clamp(14px, 2vw, 28px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 64px);
}

.comunidad__titulo {
  color: var(--petroleo-oscuro);
  font-size: clamp(3rem, 1.6rem + 6vw, 8rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

/* Punto final en lima: detalle de marca, sin competir con las fotos */
.comunidad__titulo::after { content: "."; color: var(--lima-oscuro); }

.comunidad__intro { max-width: 30rem; }

.comunidad__intro h3 {
  color: var(--petroleo-oscuro);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.comunidad__intro p { margin-top: 10px; color: var(--grafito); }

@media (min-width: 860px) {
  .comunidad__cabecera { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .comunidad__intro { justify-self: end; padding-bottom: 0.6em; }
}

/* Escena: el lienzo y la zona oscura, que corre a todo el ancho */
.comunidad__escena {
  position: relative;
  padding-bottom: clamp(48px, 6vw, 96px);
}

.comunidad__escena::before {
  content: "";
  position: absolute;
  top: var(--com-corte);
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: var(--com-oscuro);
}

.comunidad__escena .editorial { z-index: 1; }

@media (max-width: 699px) {
  .comunidad__banda { --com-corte: 42%; }
}

/* Teléfonos bajos: el lienzo es pequeño y el sello taparía la foto */
@media (max-width: 699px) and (max-height: 700px) {
  .hero .editorial .hero__sello { display: none; }
}

/* Lienzos muy pequeños (teléfonos bajos): el sello no cabe junto a las fotos
   sin taparlas, así que se omite. Se mide el lienzo, no la pantalla. */
@container (max-width: 270px) {
  .hero .editorial .hero__sello { display: none; }
}

/* ==========================================================================
   Contacto: la foto del panel usa el mismo tratamiento que las portadas
   (bloque de color detrás, giro leve, entrada subiendo y hover). Ocupa el
   alto que sobra en el panel para que las dos columnas midan lo mismo.
   ========================================================================== */

.contacto-v__foto { padding-right: 6%; padding-bottom: 8%; }

.contacto-v__fb {
  width: 100%;
  height: clamp(160px, 18vw, 240px);
  aspect-ratio: auto;
  -webkit-animation: foto-sube 0.9s var(--ease) 0.35s backwards;
  animation: foto-sube 0.9s var(--ease) 0.35s backwards;
}

@keyframes foto-sube {
  from { opacity: 0; -webkit-transform: translateY(30px) rotate(calc(var(--_giro) * 1deg)); transform: translateY(30px) rotate(calc(var(--_giro) * 1deg)); }
  to { opacity: 1; -webkit-transform: rotate(calc(var(--_giro) * 1deg)); transform: rotate(calc(var(--_giro) * 1deg)); }
}

@media (min-width: 900px) {
  .contacto-v__fb { -webkit-box-flex: 1; flex: 1 1 auto; height: auto; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .contacto-v__fb { -webkit-animation: none; animation: none; }
}

/* Portadas en una columna también en tablets verticales (y pantallas
   verticales grandes): se usa la composición ancha (-m), con las fotos lado a
   lado, porque el espacio disponible bajo el texto es ancho y bajo. */
@media (min-width: 700px) and (max-aspect-ratio: 1/1), (min-width: 700px) and (max-width: 959px) and (max-aspect-ratio: 3/2) {
  .hero .editorial {
    width: min(100cqw, calc(100cqh * var(--ed-proporcion-m, var(--ed-p))));
    aspect-ratio: var(--ed-proporcion-m, var(--ed-p));
  }

  .hero .foto-bloque {
    --_x: var(--fb-x-m, var(--fb-x, 0));
    --_y: var(--fb-y-m, var(--fb-y, 0));
    --_tam: var(--fb-tam-m, var(--fb-tam, 60));
    --_giro: var(--fb-giro-m, var(--fb-giro, 0));
    --_dx: var(--fb-desp-x-m, var(--fb-desp-x, 8));
    --_dy: var(--fb-desp-y-m, var(--fb-desp-y, -8));
  }

  .hero .editorial .hero__sello {
    left: calc(var(--sello-x-m, var(--sello-x, 0)) * 1cqw);
    top: calc(var(--sello-y-m, var(--sello-y, 0)) * 1cqw);
  }
}