:root {
  --orange: #f59b00;
  --orange-deep: #8a5000;
  --graphite: #3a3a3a;
  --graphite-soft: #444444;
  --white: #ffffff;
  --cut-top: 50.8%;     /* posición del corte diagonal arriba */
  --cut-bottom: 36.8%;  /* posición del corte diagonal abajo */
  --font: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  background: var(--orange);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  isolation: isolate;
}

.panel { grid-area: 1 / 1; }

/* ---------- Panel oscuro (izquierda) ---------- */
.panel--dark {
  z-index: 1;
  display: grid;
  place-items: center;
  background-color: var(--graphite);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='120' viewBox='0 0 150 120'%3E%3Cg fill='%23444'%3E%3Cpath id='f' d='M22 0H100L94 16H44Q36 16 34 24L32 32H78L74 46H28L22 80H0L14 12Q16 0 22 0Z' transform='translate(4 4) scale(.62)'/%3E%3Cpath d='M22 0H100L94 16H44Q36 16 34 24L32 32H78L74 46H28L22 80H0L14 12Q16 0 22 0Z' transform='translate(79 64) scale(.62)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 120px;
  clip-path: polygon(0 0, var(--cut-top) 0, var(--cut-bottom) 100%, 0 100%);
  padding-right: calc(100% - var(--cut-top) + 2rem);
  padding-right: 0;
}

.logo {
  width: clamp(220px, 19vw, 380px);
  height: auto;
  margin-right: 50%;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .25));
}

/* ---------- Panel naranja (derecha) ---------- */
.panel--orange {
  position: relative;
  z-index: 0;
  background: var(--orange);
  display: grid;
  align-items: center;
  padding-left: 46%;
  overflow: hidden;
}

.monogram {
  position: absolute;
  left: 41.5%;
  top: 24%;
  width: min(34vw, 640px);
  height: auto;
  transform: skewX(-3deg);
  filter: drop-shadow(0 0 0 transparent);
  will-change: transform;
  transition: transform .4s ease-out;
}

.copy {
  position: relative;
  z-index: 2;
  margin-top: 18vh;
  padding: 0 4vw 4vh 0;
}

/* Eslogan */
.slogan {
  margin: 0;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2rem, 3.1vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.slogan__line { display: block; }
.slogan__line--indent { padding-left: 3.3vw; }
.slogan strong {
  font-weight: 700;
  color: var(--graphite);
}

.status {
  margin: .6rem 0 0 6vw;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.5vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: -.005em;
}

/* Texto secundario */
.note,
.address {
  font-style: italic;
  font-weight: 300;
  letter-spacing: -.005em;
}
.note {
  margin: 3.2rem 0 0;
  font-size: clamp(1rem, 1.05vw, 1.25rem);
  text-transform: uppercase;
  line-height: 1.25;
}
.address {
  margin: 1rem 0 0;
  font-size: clamp(1rem, 1.05vw, 1.25rem);
  max-width: 44ch;
}

/* ---------- Entrada (una sola secuencia) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .panel--dark { animation: reveal-left .9s cubic-bezier(.2, .7, .2, 1) both; }
  .logo { animation: fade-in .8s .5s ease-out both; }
  .monogram { animation: fade-in 1s .35s ease-out both; }
  .copy { animation: fade-in .9s .7s ease-out both; }
}
@keyframes reveal-left {
  from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
}
@keyframes fade-in { from { opacity: 0; } }

/* ---------- Tablet / móvil: apilado con corte diagonal ---------- */
@media (max-width: 860px) {
  .hero { grid-template-rows: auto 1fr; }
  .panel { grid-area: auto; }

  .panel--dark {
    clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
    padding: 3rem 1.5rem 5.5rem;
  }
  .logo { margin-right: 0; width: clamp(200px, 56vw, 300px); }

  .panel--orange {
    margin-top: -3.5rem;
    padding: 5rem 1.5rem 3rem;
    align-items: start;
  }
  .monogram {
    left: auto;
    right: -12%;
    top: 3.5rem;
    width: 72vw;
    opacity: .9;
  }
  .copy { margin-top: 2rem; padding: 0; }
  .slogan { font-size: clamp(2rem, 9vw, 3rem); }
  .slogan__line--indent { padding-left: 1.2em; }
  .status { margin-left: 1.8em; font-size: 1.25rem; }
  .note { margin-top: 2rem; font-size: 1.05rem; }
  .address { font-size: 1.05rem; }
}

:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }