/* Identity only. All V1 layout and interaction styles remain in their original files. */
.hero--v2::before,
.hero--v2::after {
  visibility: hidden;
}

.hero-identity-v2 {
  position: absolute;
  inset: 0;
  display: block;
}

.hero-identity-v2 img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Keep the complete V1 footprint, including its pseudo-element. The h1 has a V2 accessible name. */
.slogan--v2 {
  opacity: 0;
}

/* The image remains the modal's flex item, using the unchanged V1 art rules. */
.modal-identity-v2 {
  display: contents;
}

/* Original-coordinate master, displayed only in the existing Inicio mobile footprint. */
.identity-v2-mobile-footprint { display: none; }

@media (max-width: 767px) {
  /* V1 remains: hero 354px - content overlap 18px + slogan 92px = 428px.
     Only the five-layer foreground group receives this one proportional scale. */
  .hero--v2:has(> .identity-v2-mobile-footprint) { overflow: visible; }
  .hero--v2:has(> .identity-v2-mobile-footprint) > .hero-identity-v2 { opacity: 0; }
  .identity-v2-mobile-footprint {
    --v2-scale: calc(428 / 1536);
    --v2-x: calc((min(100vw, 560px) - 1024px * var(--v2-scale)) / 2);
    position: absolute;
    inset: 0 0 auto;
    height: calc(100% + 74px);
    display: block;
    overflow: hidden;
    pointer-events: none;
  }
  .identity-v2-mobile-footprint > .v2-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
  .identity-v2-mobile-footprint > .identity-v2-master {
    transform-origin: 0 0;
    transform: translate(var(--v2-x), 0) scale(var(--v2-scale));
  }
}

/* Interior mobile presentation exception: fit MACHALA between the unchanged
   44px navigation hitboxes, preserving the shared master and all other layers.
   Alpha bounds include the complete halo; 0.02px guards layout rounding.
   Top compensates transparent padding after the proportional reduction. */
@media (max-width: 767px) {
  .identity-v2-interior > .identity-v2-master .v2-machala {
    left: 117.269532710px;
    top: -10.609067239px;
    width: 794.582553247px;
  }
}

/* Mobile graphic dialogs reuse the frozen master; their V1 shell is unchanged. */
.modal-graphic-v2 { display: none; }
@media (max-width: 767px) {
  .api-response-dialog:has(> .modal-graphic-v2) > .modal-identity-v2 { display: none; }
  .api-response-dialog > .modal-graphic-v2 {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 326 / 300;
    max-height: min(32svh, 260px);
    max-height: min(32dvh, 260px);
    overflow: hidden;
    pointer-events: none;
    container-type: inline-size;
  }
  .modal-graphic-v2 > .v2-background {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .modal-graphic-v2 > .identity-v2-master {
    --v2-modal-height: min(calc(100cqw * 300 / 326), 32svh, 260px);
    --v2-modal-height: min(calc(100cqw * 300 / 326), 32dvh, 260px);
    --v2-modal-scale: min(calc(100cqw / 1024px), calc(var(--v2-modal-height) / 1536px));
    transform-origin: 0 0;
    transform: translate(
      calc((100cqw - 1024px * var(--v2-modal-scale)) / 2),
      calc((var(--v2-modal-height) - 1536px * var(--v2-modal-scale)) / 2)
    ) scale(var(--v2-modal-scale));
  }
}

/* One frozen master definition shared by mobile, tablet and desktop. */
  /* Frozen original-coordinate foreground. Every coordinate is in the 1024x1536 master. */
  .identity-v2-master { position: absolute; inset: 0 auto auto 0; width: 1024px; height: 1536px; overflow: hidden; pointer-events: none; }
  .identity-v2-master img { position: absolute; display: block; height: auto; max-width: none; object-fit: contain; pointer-events: none; }
  .identity-v2-master .v2-secondary { left: 276.954895px; top: 38.339722px; width: 717.51058px; }
  .identity-v2-master .v2-portrait { left: 3.11322px; top: 179.621674px; width: 821.336721px; }
  .identity-v2-master .v2-machala { left: 22.923798px; top: -81.19236px; width: 1054.493718px; }
  .identity-v2-master .v2-name { left: 29.347595px; top: 930.875977px; width: 966.015386px; }
  .identity-v2-master .v2-tagline { left: 51.491153px; top: 1304.943563px; width: 914.386821px; }

/* Tablet overlay: its anchors follow the real V1 boxes without entering flow. */
.identity-v2-tablet-footprint { display: none; }
@media (min-width: 768px) and (max-width: 1199.98px) {
  .page { position: relative; }
  .hero--v2 { anchor-name: --v2-tablet-hero; }
  .hero--v2 > .hero-identity-v2 { opacity: 0; }
  .identity-v2-tablet-footprint {
    position: absolute;
    position-anchor: --v2-tablet-hero;
    top: anchor(--v2-tablet-hero top);
    left: anchor(--v2-tablet-hero left);
    width: anchor-size(--v2-tablet-hero width);
    height: anchor-size(--v2-tablet-hero height);
    display: block;
    overflow: hidden;
    pointer-events: none;
    container-type: size;
  }
  .identity-v2-tablet-footprint > .v2-background {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .identity-v2-tablet-footprint > .identity-v2-master {
    --v2-tablet-scale: min(calc(100cqw / 1024px), calc(100cqh / 1536px));
    transform-origin: 0 0;
    transform: translate(
      calc((100cqw - 1024px * var(--v2-tablet-scale)) / 2),
      calc((100cqh - 1536px * var(--v2-tablet-scale)) / 2)
    ) scale(var(--v2-tablet-scale));
  }
}

/* Desktop reuses the existing layered overlay; only the V1 left hero is painted. */
@media (min-width: 1200px) {
  .page { position: relative; }
  .hero--v2 { anchor-name: --v2-desktop-hero; }
  .hero--v2 > .hero-identity-v2 { opacity: 0; }
  .identity-v2-tablet-footprint {
    position: absolute;
    position-anchor: --v2-desktop-hero;
    top: anchor(--v2-desktop-hero top);
    left: anchor(--v2-desktop-hero left);
    width: anchor-size(--v2-desktop-hero width);
    height: anchor-size(--v2-desktop-hero height);
    display: block;
    overflow: hidden;
    pointer-events: none;
    container-type: size;
  }
  .identity-v2-tablet-footprint > .v2-background {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .identity-v2-tablet-footprint > .identity-v2-master {
    --v2-desktop-scale: min(calc(100cqw / 1024px), calc(100cqh / 1536px));
    transform-origin: 0 0;
    transform: translate(
      calc((100cqw - 1024px * var(--v2-desktop-scale)) / 2),
      calc((100cqh - 1536px * var(--v2-desktop-scale)) / 2)
    ) scale(var(--v2-desktop-scale));
  }
}

/* Reuse the modal master inside the unchanged V1 graphic region from tablet up. */
@media (min-width: 768px) {
  .api-response-dialog:has(> .modal-graphic-v2) > .modal-identity-v2 { display: none; }
  .api-response-dialog > .modal-graphic-v2 {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 326 / 300;
    max-height: min(32svh, 260px);
    max-height: min(32dvh, 260px);
    overflow: hidden;
    pointer-events: none;
    container-type: size;
  }
  .api-response-dialog > .modal-graphic-v2 > .v2-background {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .api-response-dialog > .modal-graphic-v2 > .identity-v2-master {
    --v2-modal-scale: min(calc(100cqw / 1024px), calc(100cqh / 1536px));
    transform-origin: 0 0;
    transform: translate(
      calc((100cqw - 1024px * var(--v2-modal-scale)) / 2),
      calc((100cqh - 1536px * var(--v2-modal-scale)) / 2)
    ) scale(var(--v2-modal-scale));
  }
}
@media (min-width: 1200px) {
  .api-response-dialog > .modal-graphic-v2 { max-height: none; }
}

@media (min-width: 1200px) {
  body > main.page:not([class*="page--"]) > .content > h1#titulo-principal.slogan--v2 {
    height: 0;
    overflow: hidden;
  }
}