/**
 * Hero de portada.
 *
 * Referencia: index.html:54-137.
 * El contenido se centra en el espacio libre real: --cg-header-h y
 * --cg-values-h las publica hero-split.js midiendo el header y la banda.
 */

.cg-split-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--cg-ink);
}

.cg-split-hero__half {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* La diagonal recorta ambas mitades con la misma inclinación: 64% → 40% */
.cg-split-hero__half--left { clip-path: polygon(0 0, 64% 0, 40% 100%, 0 100%); }
.cg-split-hero__half--right { clip-path: polygon(64% 0, 100% 0, 100% 100%, 40% 100%); }

.cg-split-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cada mitad amplía a distinta velocidad: el movimiento no se sincroniza */
.cg-split-hero__media--slow { animation: cgsZoom 22s ease-out forwards; }
.cg-split-hero__media--slower { animation: cgsZoom 26s ease-out forwards; }

/* Velo neutro, no azul: arriba la foto conserva su color real */
.cg-split-hero__veil { position: absolute; inset: 0; }

.cg-split-hero__veil--left {
  background: linear-gradient(115deg,
    rgba(var(--cg-neutral-rgb), .58) 0%,
    rgba(var(--cg-neutral-rgb), .26) 58%,
    rgba(var(--cg-neutral-rgb), .48) 100%);
}

.cg-split-hero__veil--right {
  background: linear-gradient(200deg,
    rgba(var(--cg-navy-700-rgb), .32) 0%,
    rgba(var(--cg-neutral-rgb), .28) 54%,
    rgba(var(--cg-neutral-rgb), .6) 100%);
}

/* Cuña dorada de menos de un punto porcentual: la línea entre líneas */
.cg-split-hero__diagonal {
  position: absolute;
  inset: 0;
  background: rgba(var(--cg-gold-rgb), .55);
  clip-path: polygon(64% 0, 64.9% 0, 40.9% 100%, 40% 100%);
}

/* Oscurecimiento inferior. Nació para dar contraste a la banda de valores;
   sin banda sigue asentando el hero contra la sección siguiente. */
.cg-split-hero__foot {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(var(--cg-neutral-rgb), .9) 0%,
    rgba(var(--cg-neutral-rgb), .5) 26%,
    rgba(var(--cg-neutral-rgb), .06) 56%,
    rgba(var(--cg-neutral-rgb), .2) 100%);
}

.cg-split-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  gap: clamp(32px, 4.6vw, 64px);
  align-items: center;
  /* Nunca paddings fijos: el hueco real lo dicta el header, y la banda de
     valores solo cuando existe (hero-split.js publica su alto; si no hay
     banda el valor por defecto es 0). */
  padding: calc(var(--cg-header-h) + 40px) var(--cg-pad-x) calc(var(--cg-values-h, 0px) + 40px);
}


.cg-split-hero__texto {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 32px);
  /* Sin tarjetas al costado la columna se quedaría con todo el ancho y la
     línea pasaría de 70 caracteres, que ya no se lee cómoda. */
  max-width: 760px;
}

.cg-split-hero .cg-h1 { color: var(--cg-white); }
/* La frase destacada es una unidad de lectura: no se parte entre líneas.
   Al bajar el cuerpo del titular, el reparto la cortaba por la mitad. */
.cg-split-hero .cg-h1 span {
  color: var(--cg-orange);
  white-space: nowrap;
}

/* El antetítulo de portada abre más la letra, pero no crece: la maqueta lo
   subía a 16px y eso aplastaba el escalón con la bajada (design.md §2 lo fija
   en 14px como todos los eyebrow del sitio). */
.cg-split-hero .cg-eyebrow {
  color: var(--cg-gold);
  font-size: var(--cg-fs-eyebrow);
  letter-spacing: .18em;
}

.cg-split-hero__bajada {
  max-width: 660px;
  /* La maqueta la llevaba a 27px y competía con el H1; design.md §2 fija el
     rol «lead» en clamp(17px, 1.7vw, 22px). */
  font-size: var(--cg-fs-lead);
  line-height: 1.45;
  font-weight: 300;
  color: var(--cg-blue-100);
  text-wrap: pretty;
}

.cg-split-hero__bajada strong { font-weight: 600; color: var(--cg-white); }

/* Los CTA de portada van un punto por encima del resto del sitio */
.cg-split-hero .cg-btn {
  font-size: 19px;
  gap: 12px;
}

.cg-split-hero .cg-btn--primary {
  padding: clamp(18px, 2vw, 22px) clamp(30px, 3.8vw, 44px);
}

.cg-split-hero .cg-btn--ghost {
  padding: clamp(17px, 1.9vw, 21px) clamp(28px, 3.6vw, 42px);
}

/* Accesos a las dos líneas */
.cg-split-hero__accesos {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4.4vw, 74px);
}

.cg-acceso {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(20px, 2.2vw, 26px);
  color: var(--cg-white);
  background: rgba(var(--cg-neutral-rgb), .42);
  border: 1px solid rgba(var(--cg-gold-rgb), .34);
  border-radius: var(--cg-radius);
  backdrop-filter: blur(6px);
  transition: transform .26s ease, background .26s ease, border-color .26s ease;
}

/* La tarjeta avanza hacia la derecha, en el sentido de lectura del enlace */
a.cg-acceso:hover {
  color: var(--cg-white);
  transform: translateX(6px);
  background: rgba(var(--cg-neutral-rgb), .62);
  border-color: var(--cg-orange);
}

/* La segunda tarjeta se desplaza para acompañar la diagonal */
.cg-acceso:nth-child(2) { margin-left: clamp(0px, 4vw, 56px); }

.cg-acceso .cg-iconframe { width: 52px; height: 52px; font-size: 22px; }

.cg-acceso__body { display: flex; flex-direction: column; gap: 10px; }

.cg-acceso__titulo {
  /* Piso del rol H3 de tarjeta (design.md §2). Va en mayúsculas, que leen un
     escalón más grandes: a 23px superaba a la bajada del hero, que es la voz
     principal de la sección. La maqueta llegaba a subirlo a 25px. */
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.01em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cg-white);
}

.cg-acceso__texto {
  font-size: var(--cg-fs-body);
  line-height: 1.55;
  font-weight: 300;
  color: var(--cg-blue-100);
}

/* La barra crece al pasar el cursor y cambia de dorada a naranja */
.cg-acceso__barra {
  display: block;
  width: 56px;
  height: 3px;
  background: var(--cg-gold);
  transition: width .26s ease, background .26s ease;
}

a.cg-acceso:hover .cg-acceso__barra { width: 104px; background: var(--cg-orange); }

/* Banda de valores al pie del hero */
.cg-values {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: clamp(22px, 2.6vw, 30px) var(--cg-pad-x);
  background: var(--cg-veil-dark);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(var(--cg-gold-rgb), .3);
}

/* Columnas fijas: con 4 valores el auto-fit deja una celda huérfana a ~900px */
.cg-values__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px);
}

.cg-value { display: flex; gap: 14px; align-items: flex-start; }

.cg-value__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.cg-value__titulo {
  font-size: var(--cg-fs-body);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cg-white);
}

.cg-value__texto {
  font-size: 14px;
  line-height: 1.5;
  color: var(--cg-blue-200);
}

@media (max-width: 1080px) {
  .cg-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Bajo 900 px se retiran la mitad derecha y la diagonal: la izquierda cubre todo */
@media (max-width: 899px) {
  .cg-split-hero__half--left { clip-path: none; }
  .cg-split-hero__half--right,
  .cg-split-hero__diagonal { display: none; }
  .cg-acceso:nth-child(2) { margin-left: 0; }
  .cg-split-hero { min-height: clamp(600px, 92vh, 900px); }
}

@media (max-width: 620px) {
  .cg-values { position: static; backdrop-filter: none; }
  .cg-values__grid { grid-template-columns: 1fr; }
  .cg-split-hero__inner { padding-bottom: clamp(40px, 8vw, 64px); }
}

/* Los dos botones del hero son las dos líneas de negocio, y llevan su color:
   naranja para grúas, dorado para manlift, igual que en el resto del sitio.
   Sin tarjetas al costado son la única vía de entrada, así que pesan más. */
.cg-split-hero .cg-btns {
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(6px, 1vw, 14px);
}

.cg-split-hero .cg-btn {
  padding: clamp(18px, 2vw, 22px) clamp(30px, 3.6vw, 42px);
  font-size: clamp(17px, 1.5vw, 19px);
}

.cg-split-hero .cg-btn--ghost {
  color: var(--cg-gold);
  border-color: rgba(var(--cg-gold-rgb), .8);
}

.cg-split-hero .cg-btn--ghost:hover {
  background: var(--cg-gold);
  color: var(--cg-navy-900);
  border-color: var(--cg-gold);
}

/* Señal de continuidad: con el hero a pantalla completa nada indicaba que
   la página sigue. Un filete que baja despacio, sin flecha ni texto. */
.cg-split-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3vw, 34px);
  z-index: 2;
  display: block;
  width: 26px;
  height: 44px;
  margin-left: -13px;
  border: 1.5px solid rgba(var(--cg-white-rgb), .4);
  border-radius: var(--cg-radius-pill);
  transition: border-color var(--cg-t-ui) ease;
}

.cg-split-hero__scroll:hover { border-color: var(--cg-gold); }

.cg-split-hero__scroll-linea {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 2px;
  height: 8px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--cg-gold);
  animation: cgsScroll 2.1s var(--cg-ease) infinite;
}

@keyframes cgsScroll {
  0%   { transform: translateY(0); opacity: 0; }
  22%  { opacity: 1; }
  70%  { transform: translateY(16px); opacity: 1; }
  100% { transform: translateY(20px); opacity: 0; }
}