/**
 * css/pleca-hero.css — pleca de grosor constante (patrón Home fase 1–2)
 * Cargar DESPUÉS del CSS de marca (food-is.css / ia-works.css).
 * Tokens por html.brand-*: --brand-pleca, thickness, slope, lift [, surface].
 */

html.brand-food {
  --brand-pleca: #F46747;
  --brand-surface: #C44F28;
  --brand-pleca-thickness: 20px;
  --brand-pleca-slope: 5vh;
  --brand-pleca-lift: 6px;
}

html.brand-ia {
  --brand-pleca: #057277;
  --brand-surface: #0097A7;
  --brand-pleca-thickness: 20px;
  --brand-pleca-slope: 5vh;
  --brand-pleca-lift: 6px;
}

/* --- Apaga plecas legacy (rotate + height:% → cuña) --- */
.header::after,
.what-we-do::after,
.what-we-do::before {
  content: none !important;
  display: none !important;
}

.header {
  position: relative;
  z-index: 2;
  background-color: var(--brand-pleca);
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 calc(100% - var(--brand-pleca-slope)));
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0 calc(100% - var(--brand-pleca-slope)));
}

/*
 * Paralelogramo: misma pendiente arriba/abajo.
 * Grosor en px → constante en Retina.
 */
.header-pleca {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: var(--brand-pleca);
  z-index: 40;
  pointer-events: none;
  -webkit-clip-path: polygon(
    0% calc(100% - var(--brand-pleca-slope) - var(--brand-pleca-thickness) - var(--brand-pleca-lift)),
    100% calc(100% - var(--brand-pleca-thickness) - var(--brand-pleca-lift)),
    100% 100%,
    0% calc(100% - var(--brand-pleca-slope))
  );
  clip-path: polygon(
    0% calc(100% - var(--brand-pleca-slope) - var(--brand-pleca-thickness) - var(--brand-pleca-lift)),
    100% calc(100% - var(--brand-pleca-thickness) - var(--brand-pleca-lift)),
    100% 100%,
    0% calc(100% - var(--brand-pleca-slope))
  );
}

.video-background {
  z-index: auto;
}

.personaje-img {
  z-index: 2;
}

.text-box-img,
#open-video-btn {
  z-index: 3;
}

@media (min-width: 1025px) {
  .personaje-img {
    bottom: 4%;
  }
}

/* Costura hero ↔ what-we-do: una sola arista = .header-pleca */
.what-we-do {
  position: relative;
  z-index: 1;
  background-color: var(--brand-pleca);
  margin-top: calc(-2 * var(--brand-pleca-slope) - 4px);
  /* Sin overflow:hidden: cortaba el “+” de Inside Blog (Échale un vistazo) */
  -webkit-clip-path: polygon(
    0% var(--brand-pleca-slope),
    100% 0%,
    100% 100%,
    0% 100%
  );
  clip-path: polygon(
    0% var(--brand-pleca-slope),
    100% 0%,
    100% 100%,
    0% 100%
  );
}

.what-we-do-img-container {
  position: relative;
  z-index: 1;
  margin-top: 0;
}

.parallax-bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 1024px) {
  :root,
  html.brand-food,
  html.brand-ia {
    --brand-pleca-thickness: 16px;
    --brand-pleca-slope: 3vh;
    --brand-pleca-lift: 0px;
  }

  .header {
    background-color: var(--brand-surface, var(--brand-pleca));
  }

  .container {
    z-index: 1;
  }

  .tabs {
    position: relative;
    z-index: 2;
  }

  .what-we-do {
    margin-top: calc(-2 * var(--brand-pleca-slope) - 6px);
  }

  .what-we-do-img-container {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }

  /* Evita GIF estirado (padding + border-box en CSS de marca) */
  .personaje-img {
    height: auto;
    max-width: 36vw;
    padding: 0;
    object-fit: contain;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 480px) {
  :root,
  html.brand-food,
  html.brand-ia {
    --brand-pleca-thickness: 14px;
    --brand-pleca-slope: 2.5vh;
  }

  .what-we-do {
    background-color: transparent !important;
    -webkit-clip-path: polygon(
      0% var(--brand-pleca-slope),
      100% 0%,
      100% 100%,
      0% 100%
    ) !important;
    clip-path: polygon(
      0% var(--brand-pleca-slope),
      100% 0%,
      100% 100%,
      0% 100%
    ) !important;
  }
}