/* Heroes de Empresas y Eventos · Composición V6 con paleta V5.
   La imagen responsive, el velo CSS y el contenido son capas independientes. */
body[data-initial-mode] .app { overflow: visible; }
.c360-hero {
  /* Azul marino suavizado para conservar lectura sobre fotografía. */
  --c360-hero-ink: #2b3d4a;
  --c360-petroleum: var(--c360-hero-ink);
  --c360-white: var(--white);
  --c360-olive-light: var(--bg-alt);
  --c360-graphite: var(--coffee-soft);
  --c360-gold: var(--gold);
  --c360-hero-icon-color: var(--c360-hero-ink);
  --c360-border: var(--line);
  --c360-font-heading: var(--font-heading);
  --c360-font-body: var(--font-body);
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: clip;
  color: var(--c360-petroleum);
  background: var(--c360-white);
}
.c360-hero__stage {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.c360-hero__video,
.c360-hero__photo {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  user-select: none;
  mask-image: linear-gradient(to bottom, transparent, #000 28cqi);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28cqi);
}
.c360-hero__video {
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.c360-hero__photo {
  --c360-hero-pan-x: -.7%;
  --c360-hero-pan-y: .25%;
  transform: translate3d(0, 0, 0) scale(1.015);
  transform-origin: 68% 58%;
  animation: c360-hero-boomerang 12s ease-in-out infinite alternate both;
  backface-visibility: hidden;
  will-change: transform;
}
.c360-hero--empresas .c360-hero__photo {
  --c360-hero-pan-x: -.55%;
  transform-origin: 72% 62%;
}
.c360-hero--eventos .c360-hero__photo {
  --c360-hero-pan-x: -.8%;
  transform-origin: 68% 58%;
}
@keyframes c360-hero-boomerang {
  from { transform: translate3d(0, 0, 0) scale(1.015); }
  to { transform: translate3d(var(--c360-hero-pan-x), var(--c360-hero-pan-y), 0) scale(1.065); }
}
.c360-hero__veil {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 82% 105% at 0% -4%,
      white 0% 36%, rgb(255 255 255 / 96%) 48%,
      rgb(255 255 255 / 72%) 63%, rgb(255 255 255 / 28%) 81%,
      transparent 100%);
}
.c360-hero__content { position: relative; z-index: 3; width: 62%; margin-left: 6.3%; padding: 14.9cqi 0 14cqi; }
.c360-hero__brand {
  display: block;
  width: clamp(104px, 30cqi, 124px);
  height: auto;
  margin: 0 0 clamp(12px, 3cqi, 18px);
}
.c360-hero__eyebrow {
  margin: 0 0 1.9cqi;
  font: 600 clamp(.65rem, 1.95cqi, 1.15rem)/1.4 var(--c360-font-heading);
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The introductory phrase stays on one line at every breakpoint. */
.c360-hero__eyebrow span { display: inline; }
.c360-hero__title { margin: 0; font: 800 clamp(2rem, 8.65cqi, 5.1rem)/.98 var(--c360-font-heading); letter-spacing: -.047em; }
.c360-hero__title-line, .c360-hero__description-line { display: block; }
.c360-hero__title em {
  font-style: normal;
  color: var(--gold-text);
}
.c360-hero__description {
  width: 85%;
  margin: 3.05cqi 0 0;
  font: 400 clamp(.8125rem, 2.85cqi, 1.6875rem)/1.25 var(--c360-font-body);
  letter-spacing: -.04em;
  color: var(--c360-graphite);
}
.c360-hero__benefits {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5cqi 4.1cqi;
  width: 33.9cqi;
  margin: 5.1cqi 0 0 -1.3cqi;
  padding: 0;
  list-style: none;
}
/* La protección sigue al contenido: no depende de su altura dentro de la foto. */
.c360-hero__benefits::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -48px -64px;
  pointer-events: none;
  background: radial-gradient(ellipse closest-side at center,
    rgb(255 255 255 / 82%) 0% 55%, rgb(255 255 255 / 68%) 70%,
    rgb(255 255 255 / 32%) 85%, transparent 100%);
}
.c360-hero__benefit { display: flex; flex-direction: column; align-items: center; gap: 1cqi; text-align: center; }
.c360-hero__icon {
  width: 6.7cqi;
  height: 6.7cqi;
  min-width: 36px;
  min-height: 36px;
  fill: none;
  /* El café profundo conserva definición sobre los detalles de ambas fotos. */
  stroke: var(--c360-hero-icon-color);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.c360-hero__icon g[stroke-width] { stroke-width: 2.6; }
.c360-hero__benefit-label { font: 500 clamp(.625rem, 1.85cqi, 1.0625rem)/1.28 var(--c360-font-body); text-transform: uppercase; }
.c360-hero__benefit-label span { display: block; white-space: nowrap; }
.c360-hero__benefit--demo { grid-column: 1 / -1; }
.c360-hero__demo-action {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:44px;
  padding:7px 10px;
  color:var(--c360-petroleum);
  border:1px solid rgb(201 168 106 / 72%);
  border-radius:12px;
  background:rgb(255 255 255 / 58%);
  text-decoration:none;
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.c360-hero__demo-action .c360-hero__icon { width:30px; height:30px; min-width:30px; min-height:30px; }
.c360-hero__demo-action .c360-hero__benefit-label { text-align:left; }
.c360-hero__demo-arrow { color:var(--c360-gold); font-size:22px; line-height:1; }
.c360-hero__demo-action:hover { background:rgb(255 255 255 / 86%); border-color:var(--c360-gold); transform:translateY(-1px); }
.c360-hero__demo-action:focus-visible { outline:3px solid var(--c360-gold); outline-offset:3px; }
.c360-hero__cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: max(44px, 9.2cqi);
  min-width: clamp(184px, 18cqi, 248px);
  margin-top: 4.7cqi;
  padding: 1.7cqi 4.25cqi;
  border: 0;
  border-radius: 999px;
  background: rgb(201 168 106 / 85%);
  color: var(--navy);
  cursor: pointer;
  font: 700 clamp(1rem, 3.35cqi, 2rem)/1.2 var(--c360-font-heading);
  letter-spacing: -.035em;
  transition: background-color .18s ease;
}
.c360-hero__cta:hover { background: rgb(183 146 84 / 92%); }
.c360-hero__cta svg { width: 3.6cqi; height: 3.6cqi; min-width: 20px; min-height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.c360-hero__discover {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 6.7cqi;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8cqi;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--c360-white);
  text-align: center;
  text-shadow: 0 1px 4px rgb(0 0 0 / 35%);
  font: 500 clamp(.65rem, 1.9cqi, 1.125rem)/1.4 var(--c360-font-body);
  letter-spacing: .25em;
  white-space: nowrap;
}
.c360-hero__discover svg { width: 4.1cqi; height: 4.5cqi; min-width: 24px; min-height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.c360-hero__discover:focus-visible { outline-color: var(--c360-white); }
.c360-hero--empresas .c360-hero__content { padding-top: 5.9cqi; }
.c360-hero--empresas .c360-hero__description { width: 100%; }
.c360-hero--empresas .c360-hero__veil {
  background:
    radial-gradient(ellipse 78% 102% at 0% -4%,
      white 0% 38%, rgb(255 255 255 / 96%) 49%,
      rgb(255 255 255 / 72%) 64%, rgb(255 255 255 / 28%) 82%,
      transparent 100%);
}
@media (max-width: 540px) {
  .c360-hero__description { font-size: max(.875rem, 2.85cqi); }
  .c360-hero__benefit-label { font-size: max(.6875rem, 1.85cqi); }
  .c360-hero__benefits { row-gap: 3.5cqi; }
  .c360-hero--empresas .c360-hero__content { width: 67%; }
  .c360-hero--empresas .c360-hero__eyebrow { letter-spacing: .12em; white-space: normal; }
  .c360-hero--empresas .c360-hero__description { line-height: 1.32; }
  .c360-hero--empresas .c360-hero__benefits { width: 39cqi; column-gap: 5cqi; }
}
@media (max-width: 420px) {
  .c360-hero--eventos .c360-hero__content { width: 67%; }
  .c360-hero--eventos .c360-hero__eyebrow { letter-spacing: .12em; white-space: normal; }
  .c360-hero--eventos .c360-hero__description { width: 96%; line-height: 1.32; }
  .c360-hero--eventos .c360-hero__benefits { width: 39cqi; column-gap: 5cqi; }
  .c360-hero--eventos .c360-hero__title { font-size: clamp(2rem, 8.65cqi, 2.28rem); }
}
/* Dos estructuras por ancho: compacta <1200px y escritorio >=1200px. */
@media (min-width:1200px) {
  .c360-hero { --hero-space: clamp(12px, min(2cqi, 3dvh), 32px); }
  /* El catálogo debe empezar a asomar sin sacrificar la lectura del hero. */
  .c360-hero__stage {
    min-height:min(80vh, 800px);
    min-height:min(80dvh, 800px);
  }
  .c360-hero__video, .c360-hero__photo { mask-image: none; -webkit-mask-image: none; }
  .c360-hero .c360-hero__veil {
    background:
      radial-gradient(ellipse 92% 105% at -4% -8%,
        white 0% 25%, rgb(255 255 255 / 95%) 40%,
        rgb(255 255 255 / 72%) 56%, rgb(255 255 255 / 28%) 75%,
        transparent 100%);
  }
  .c360-hero--empresas .c360-hero__veil {
    background:
      radial-gradient(ellipse 86% 100% at -4% -8%,
        white 0% 30%, rgb(255 255 255 / 95%) 42%,
        rgb(255 255 255 / 68%) 60%, rgb(255 255 255 / 25%) 78%,
        transparent 100%);
  }
  .c360-hero .c360-hero__content { width: 36.5%; max-width: 44rem; margin-left: 6.65%; padding: clamp(24px, 6dvh, 88px) 0 16px; flex-shrink: 0; }
  .c360-hero__brand { width: clamp(124px, 7.4cqi, 148px); margin-bottom: var(--hero-space); }
  .c360-hero__eyebrow { margin-bottom: var(--hero-space); font-size: clamp(.75rem, .96cqi, 1.125rem); line-height: 1.45; letter-spacing: .23em; white-space: nowrap; }
  .c360-hero__title { font-size: clamp(2.5rem, min(4.45cqi, 8dvh), 5.35rem); line-height: .99; }
  .c360-hero .c360-hero__description { width: 86%; margin-top: var(--hero-space); font-size: clamp(1rem, min(1.55cqi, 2.8dvh), 1.875rem); line-height: 1.3; }
  .c360-hero__benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; width: min(33.4cqi, 40rem); margin: var(--hero-space) 0 0 max(-1.5cqi, -24px); }
  .c360-hero__benefits::before { inset: -100px -12cqi; }
  .c360-hero--empresas .c360-hero__benefits { grid-template-columns:repeat(4, minmax(0, 1fr)); width:min(35.5cqi, 42rem); }
  .c360-hero--empresas .c360-hero__benefit--demo { grid-column:1 / -1; align-items:flex-start; margin-top:8px; }
  .c360-hero--empresas .c360-hero__benefit--demo::before { display:none; }
  .c360-hero--empresas .c360-hero__demo-action { width:fit-content; min-height:44px; padding:7px 12px; border:1px solid rgb(201 168 106 / 72%); border-radius:12px; background:rgb(255 255 255 / 58%); }
  .c360-hero__demo-action .c360-hero__icon { width:clamp(36px, min(2.8cqi, 5dvh), 56px); height:clamp(36px, min(2.8cqi, 5dvh), 56px); min-width:36px; min-height:36px; }
  .c360-hero__demo-action .c360-hero__benefit-label { text-align:center; }
  .c360-hero__demo-arrow { margin-top:-1px; }
  .c360-hero__benefit { gap: 6px; padding-inline: 6px; }
  .c360-hero__icon { width: clamp(40px, min(2.8cqi, 5dvh), 56px); height: clamp(40px, min(2.8cqi, 5dvh), 56px); min-width: 40px; min-height: 40px; }
  .c360-hero__benefit-label { font-size: clamp(.75rem, .83cqi, 1rem); line-height: 1.35; }
  .c360-hero__cta { min-width: clamp(200px, 17cqi, 248px); min-height: clamp(48px, min(4.4cqi, 7dvh), 80px); margin-top: var(--hero-space); padding: 12px clamp(24px, 3.15cqi, 60px); gap: 0; font-size: clamp(1rem, min(1.7cqi, 3.2dvh), 2rem); }
  .c360-hero__cta svg { width: 28px; height: 28px; }
  .c360-hero__discover { display:none; }
  .c360-hero__discover svg { width: 24px; height: 32px; }
  .c360-hero__discover:focus-visible { outline-color: var(--c360-petroleum); }
  .c360-hero--empresas .c360-hero__title { font-size: clamp(2.125rem, min(3.85cqi, 7dvh), 4.625rem); }
  .c360-hero--empresas .c360-hero__description { font-size: clamp(1rem, min(1.4cqi, 2.6dvh), 1.6875rem); }
}
@media (min-width:1200px) and (max-height:700px) {
  .c360-hero { --hero-space: 12px; }
  .c360-hero .c360-hero__content { padding-top: 24px; }
  .c360-hero--empresas .c360-hero__title { font-size: clamp(2rem, min(3.85cqi, 6.5dvh), 4.625rem); }
}
@media (prefers-reduced-motion: reduce) {
  .c360-hero__video { display: none; }
  .c360-hero__photo { animation: none; transform: none; }
  .c360-hero__cta { transition: none; }
}

/* The selector floats above the page; it never reserves space before the hero. */
body[data-initial-mode] .selector-block {
  position: fixed;
  inset: 0 0 auto;
  z-index: 950;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  padding: max(2px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 2px max(16px, env(safe-area-inset-left));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 8px rgb(43 31 24 / 8%);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
body[data-initial-mode].hero-has-scrolled:not(.modal-open) .selector-block {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
body[data-initial-mode] .selector-block .toggle {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 360px);
}
body[data-initial-mode] .selector-block .toggle-btn {
  min-width: 0;
  min-height: 28px;
  padding: 3px 12px;
  font-size: 13px;
  line-height: 18px;
}
body[data-initial-mode] .selector-block .toggle-btn:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 0;
}

/* Compacto: conserva el alto visible y crece si el texto necesita más espacio. */
@media (max-width:1199px) {
  /* `svh` conserva la altura del viewport inicial cuando la interfaz del
     navegador móvil aparece o desaparece. Se descuenta la barra fija para que
     el hero ocupe únicamente el área que el usuario puede ver. */
  .c360-hero__stage {
    height: auto;
    min-height: calc(100vh - var(--sticky-cta-height) - env(safe-area-inset-bottom));
    min-height: calc(100svh - var(--sticky-cta-height) - env(safe-area-inset-bottom));
  }
  /* El blanco protege el título y se disuelve en diagonal antes de la foto. */
  .c360-hero .c360-hero__veil {
    background:
      radial-gradient(ellipse 118% 78% at -7% -5%,
        white 0% 25%, rgb(255 255 255 / 97%) 36%,
        rgb(255 255 255 / 82%) 48%, rgb(255 255 255 / 42%) 64%,
        rgb(255 255 255 / 12%) 79%, transparent 100%);
  }
  .c360-hero--eventos .c360-hero__veil {
    background:
      radial-gradient(ellipse 145% 80% at -7% -5%,
        white 0% 27%, rgb(255 255 255 / 97%) 40%,
        rgb(255 255 255 / 82%) 54%, rgb(255 255 255 / 42%) 68%,
        rgb(255 255 255 / 12%) 82%, transparent 100%);
  }
  .c360-hero .c360-hero__content {
    padding-top: max(env(safe-area-inset-top), clamp(20px, 4svh, 40px));
    padding-bottom: 16px;
    flex-shrink: 0;
  }
  .c360-hero__video, .c360-hero__photo { object-position: center center; }
  .c360-hero__discover {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    align-self: center;
    margin-top: auto;
    margin-bottom: max(12px, env(safe-area-inset-bottom));
    flex-shrink: 0;
  }
}

@media (max-width:359px) {
  .c360-hero .c360-hero__content { padding-top: max(12px, env(safe-area-inset-top)); }
  .c360-hero .c360-hero__title { font-size: clamp(1.75rem, 7.5vw, 2.5rem); }
  .c360-hero__benefits { margin-top: 12px; row-gap: 8px; }
  .c360-hero__cta { margin-top: 12px; }
  .c360-hero__discover { gap: 4px; }
}



@media (prefers-reduced-motion: reduce) {
  body[data-initial-mode] .selector-block { transition: none; }
}

/* Keep the introductory phrase on one line across the mobile hero. */
@media (max-width:1199px) {
  .c360-hero .c360-hero__eyebrow {
    width: max-content;
    max-width: 87vw;
    white-space: nowrap;
    font-size: clamp(.625rem, 2.9vw, .8125rem);
    letter-spacing: .08em;
  }
}

/* Los rótulos conservan espacio propio en teléfonos estrechos. */
@media (max-width:1199px) {
  .c360-hero .c360-hero__benefits{width:min(100%,224px);margin-left:0;grid-template-columns:minmax(0,1fr);row-gap:8px}
  .c360-hero .c360-hero__benefit{flex-direction:row;justify-content:flex-start;align-items:center;gap:10px;text-align:left}
  .c360-hero__benefit-label{align-items:flex-start;font-size:12px;text-align:left}
  .c360-hero__cta{width:190px;min-width:0;max-width:100%}
  .c360-hero--empresas .c360-hero__benefit--demo{align-items:flex-start}
  .c360-hero--empresas .c360-hero__demo-action{
    width:fit-content;
    min-height:36px;
    gap:6px;
    padding:4px 8px;
    border-radius:10px;
  }
  .c360-hero--empresas .c360-hero__demo-action .c360-hero__icon{width:24px;height:24px;min-width:24px;min-height:24px;transform:translateX(-2px)}
  .c360-hero--empresas .c360-hero__demo-action .c360-hero__benefit-label{font-size:11px;line-height:1.15}
  .c360-hero--empresas .c360-hero__demo-arrow{font-size:18px}
}
@media (max-width:360px) {
  .c360-hero__discover{color:var(--coffee);text-shadow:none}
  .c360-hero__discover:focus-visible{outline-color:var(--coffee)}
}


/* Eventos comparte la jerarquía editorial del hero de Empresas. */
body[data-initial-mode="eventos"] .c360-hero__content { padding-top: 5.9cqi; }
body[data-initial-mode="eventos"] .c360-hero .c360-hero__description {
  width: 100%;
  max-width: none;
  margin: 3.05cqi 0 0;
  font-size: clamp(.8125rem, 2.85cqi, 1.6875rem);
  line-height: 1.25;
  letter-spacing: -.04em;
  white-space: normal;
}
body[data-initial-mode="eventos"] .c360-hero .c360-hero__title {
  width: auto;
  max-width: none;
  font-family: var(--font-body);
  font-size: clamp(2rem, 8.65cqi, 5.1rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.047em;
}
body[data-initial-mode="eventos"] .c360-hero .c360-hero__title-line { white-space: normal; }
@media (max-width: 540px) {
  body[data-initial-mode="eventos"] .c360-hero__content { width: 67%; }
  body[data-initial-mode="eventos"] .c360-hero__eyebrow { letter-spacing: .12em; white-space: normal; }
  body[data-initial-mode="eventos"] .c360-hero .c360-hero__description { line-height: 1.32; }
  body[data-initial-mode="eventos"] .c360-hero__benefits { width: 39cqi; column-gap: 5cqi; }
}
@media (min-width:1200px) {
  body[data-initial-mode="eventos"] .c360-hero .c360-hero__title {
    font-size: clamp(2.125rem, min(3.85cqi, 7dvh), 4.625rem);
    line-height: .99;
  }
  body[data-initial-mode="eventos"] .c360-hero .c360-hero__description {
    width: 100%;
    margin-top: var(--hero-space);
    font-size: clamp(1rem, min(1.4cqi, 2.6dvh), 1.6875rem);
    line-height: 1.3;
  }
}
@media (min-width:1200px) and (max-height: 700px) {
  body[data-initial-mode="eventos"] .c360-hero .c360-hero__title {
    font-size: clamp(2rem, min(3.85cqi, 6.5dvh), 4.625rem);
  }
}
/* La estructura compacta es la misma en teléfono, tablet y al girar la pantalla.
   La escala fluye con el espacio disponible; no crea una tercera composición. */
@media (max-width:1199px) {
  body[data-initial-mode] .c360-hero .c360-hero__title {
    font-size:clamp(2rem,min(8.65cqi,6.6svh),3.5rem);
  }
  .c360-hero .c360-hero__benefits {
    margin-top:min(5.1cqi,28px);
    row-gap:min(3.5cqi,18px);
  }
  .c360-hero__icon {width:clamp(36px,6.7cqi,48px);height:clamp(36px,6.7cqi,48px);}
}

@media (max-width:359px) {
  body[data-initial-mode] .c360-hero .c360-hero__title {font-size:clamp(1.75rem,7.5vw,2.5rem);}
}