/* Revor — Sistema de decoración diagonal */

/* Base */
.decor {
  position: absolute;
  inset: 0;
  z-index: var(--z-decor);
  pointer-events: none;
  --wedge-top: 55%;
}

.decor ~ *:not(.decor) {
  position: relative;
  z-index: var(--z-content);
}

/* Cuñas de sección — la diagonal a sangre completa */

/* REGLA DEL SISTEMA: una cuña cierra siempre en punta. */

.decor--wedge-left {
  --wedge-bottom: 0%;
  background-color: var(--decor-color, var(--primary-500));
  clip-path: polygon(
    0 0,
    var(--wedge-top) 0,
    var(--wedge-bottom) 100%,
    0 100%
  );
}

.decor--wedge-right {
  --wedge-bottom: 100%;
  background-color: var(--decor-color, var(--primary-800));
  clip-path: polygon(
    var(--wedge-top) 0,
    100% 0,
    100% 100%,
    var(--wedge-bottom) 100%
  );
}

.decor--band {
  background-color: var(--decor-color, var(--primary-600));
  clip-path: polygon(
    0 var(--band-start, 60%),
    100% var(--band-start-end, 20%),
    100% 100%,
    0 100%
  );
}

/* Velo de marca sobre fotografía */
.decor--veil {
  background-color: var(--veil-brand);
}

.decor--veil-deep {
  background-color: var(--veil-deep);
}

.decor--veil-gradient {
  background-image: linear-gradient(
    100deg,
    var(--primary-700) 0%,
    var(--veil-brand) 45%,
    rgb(0 75 135 / 0.15) 75%
  );
}

/* Cortes de esquina — se aplican al propio elemento */
.cut {
  --cut: var(--decor-cut);
}

.cut--sm { --cut: var(--decor-cut-sm); }

.cut--tl {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}

.cut--tr {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

.cut--br {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}

.cut--bl {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

.cut--tl-br {
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}

.cut--notch-bl {
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

/* Triángulos de acento — se dibujan, no recortan */
.tri {
  position: absolute;
  z-index: var(--z-decor);
  pointer-events: none;
  background-color: var(--tri-color, var(--primary-500));
  --tri-size: 62%;
  --tri-inline: var(--tri-size);
  --tri-block: var(--tri-size);
}

.tri--tl {
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--tri-inline);
  block-size: var(--tri-block);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.tri--tr {
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: var(--tri-inline);
  block-size: var(--tri-block);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.tri--br {
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: var(--tri-inline);
  block-size: var(--tri-block);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.tri--bl {
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: var(--tri-inline);
  block-size: var(--tri-block);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* Media con corte */
.media {
  position: relative;
  overflow: hidden;
  background-color: var(--neutral-100);
}

.media > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.media--ratio-4x3 { aspect-ratio: 4 / 3; }
.media--ratio-3x2 { aspect-ratio: 3 / 2; }
.media--ratio-16x9 { aspect-ratio: 16 / 9; }
.media--ratio-square { aspect-ratio: 1; }

/* Degradado en móvil, SOLO en los heros con fotografía */
@media (max-width: 47.99rem) {
  .hero .decor--wedge-left,
  .hero .decor--wedge-right {
    clip-path: none;
    background-color: var(--veil-deep);
  }
}

@supports not (clip-path: polygon(0 0, 100% 0, 0 100%)) {
  .tri {
    display: none;
  }
}