/*
 * HERO "Holding Coopera Pro × Rciklo" (js/holding-hero.js). Fuente única; la copia de
 * rciklo-web/app/holding-hero.css se reemplaza desde aquí.
 * Las propiedades animadas (transform, opacity, visibility, clip-path) las escribe el JS por cuadro.
 */
.hh {
    --hh-navy: #1c2320;
    --hh-fondo: #0c1212;
    --hh-crema: #ece8d8;
    --hh-verde-cp: #55b74a;
    --hh-verde-rk: #26a058;
    --hh-cobre: #b0804a;
    --hh-plata: #aab3bd;
    --hh-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --hh-texto: 'Barlow', system-ui, sans-serif;
    --hh-curva: cubic-bezier(0.32, 0.72, 0, 1);
    position: relative;
    min-height: 100dvh;
    min-height: max(100svh, 620px);
    overflow: hidden;
    isolation: isolate;
    color: var(--hh-crema);
    font-family: var(--hh-texto);
    background: linear-gradient(150deg, #252b24, var(--hh-fondo) 70%);
}
.hh-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }

/* Letras: cada una se revela desde una máscara (la caja recorta, el span interior se mueve). */
.hh-palabra { display: inline-block; white-space: nowrap; }
.hh-letra { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.12em 0.01em 0.04em; margin: -0.12em -0.01em -0.04em; }
.hh-letra > span { display: inline-block; }

/* Escena 1 */
.hh-escena { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 0 16px; text-align: center; pointer-events: none; }
.hh-grande { margin: 0; font-family: var(--hh-display); font-weight: 900; text-transform: uppercase; font-size: clamp(3.4rem, 10.7vw, 10rem); line-height: 0.91; letter-spacing: -0.025em; text-shadow: 0 4px 28px rgba(0, 0, 0, 0.3); }
.hh-grande em { font-style: normal; color: var(--hh-verde-cp); }

/* Escena 3: el nombre de cada marca dentro de su anillo (mismas posiciones que geo.A y geo.B del JS) */
.hh-marca { position: absolute; z-index: 2; top: 47%; transform: translate(-50%, -50%); width: min(24vw, 280px); text-align: center; pointer-events: none; }
.hh-marca-a { left: 30%; }
.hh-marca-b { left: 70%; }
.hh-marca strong { display: block; font-family: var(--hh-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.7rem, 3.4vw, 3.2rem); line-height: 0.95; }
.hh-marca strong b { font-weight: 900; color: var(--hh-verde-cp); }
.hh-marca-b strong b { color: var(--hh-verde-rk); }
.hh-marca > span { display: block; margin: 10px auto 0; max-width: 24em; font-size: clamp(10px, 0.85vw, 12px); font-weight: 600; line-height: 1.5; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(236, 232, 216, 0.83); }
.hh-puente { position: absolute; z-index: 2; left: 0; right: 0; bottom: 25%; margin: 0; text-align: center; font-family: var(--hh-display); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.4rem); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(236, 232, 216, 0.85); pointer-events: none; }

/* Estado final: el contenido real */
.hh-final { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 36vh 24px 24vh; text-align: center; pointer-events: none; }
.hh-eyebrow { position: absolute; top: max(142px, 17%); display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 0; border-bottom: 1px solid rgba(236, 232, 216, 0.22); font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(236, 232, 216, 0.88); }
.hh-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 9999px; background: var(--hh-verde-cp); }
.hh-lockup { position: relative; max-width: 100%; margin: 0; font-family: var(--hh-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2.7rem, 8.4vw, 7.6rem); line-height: 0.94; letter-spacing: -0.02em; color: var(--hh-crema); text-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); text-wrap: balance; }
.hh-lockup .hh-cp-pro { color: var(--hh-verde-cp); }
.hh-nombre { display: inline-block; white-space: nowrap; }
.hh-lockup .hh-x { color: var(--hh-cobre); font-weight: 700; padding: 0 0.08em; }
.hh-lockup .hh-rk-r { color: var(--hh-verde-rk); }
.hh-lockup .hh-rk { color: var(--hh-plata); }
.hh-linea { display: block; flex: none; width: min(400px, 65vw); height: 1px; margin: 26px auto 18px; background: rgba(236, 232, 216, 0.45); }
.hh-bajada { margin: 0; max-width: 34rem; font-weight: 300; font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.5; color: rgba(236, 232, 216, 0.88); }
.hh-ctas { position: absolute; bottom: max(100px, 12%); left: 20px; right: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; pointer-events: auto; }
.hh-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 9999px; font-family: var(--hh-display); font-size: 12px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; transition: background-color 500ms var(--hh-curva), border-color 500ms var(--hh-curva), transform 300ms var(--hh-curva); }
.hh-btn svg { width: 14px; height: 14px; transition: transform 400ms var(--hh-curva); }
.hh-btn:hover svg { transform: translateX(3px); }
.hh-btn:active { transform: scale(0.97); }
.hh-btn-principal { background: #047857; color: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.hh-btn-principal:hover { background: #065f46; }
.hh-btn-secundario { border: 1px solid rgba(236, 232, 216, 0.4); color: var(--hh-crema); background: rgba(12, 18, 18, 0.8); }
.hh-btn-secundario:hover { border-color: var(--hh-verde-cp); }
.hh-btn:focus-visible, .hh-pausa:focus-visible { outline: 2px solid var(--hh-verde-cp); outline-offset: 3px; }

/* Controles */
.hh-pausa { position: absolute; z-index: 4; left: 20px; bottom: 20px; min-height: 44px; padding: 8px 16px; border: 1px solid rgba(236, 232, 216, 0.3); border-radius: 9999px; background: rgba(9, 15, 28, 0.5); color: rgba(236, 232, 216, 0.85); font: 600 12px/1 var(--hh-texto); letter-spacing: 0.08em; cursor: pointer; }
.hh-pausa:hover { border-color: var(--hh-verde-cp); color: #fff; }
.hh-pausa { top: min(calc(100% - 64px), calc(100svh - 64px)); bottom: auto; }
.hh-pausa[hidden] { display: none; }
.hh-progreso { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(236, 232, 216, 0.08); pointer-events: none; }
.hh-progreso span { display: block; height: 100%; background: var(--hh-verde-cp); transform-origin: left; transform: scaleX(0); }

/* Antes de que el JS tome el control no se ve el estado final (evita un destello); si el script
   no arranca en 4 s, una animación CSS lo muestra igual. Sin JS, se ve solo el estado final. */
.js .hh:not(.hh-activo):not(.hh-sin-canvas) .hh-lockup,
.js .hh:not(.hh-activo):not(.hh-sin-canvas) .hh-linea,
.js .hh:not(.hh-activo):not(.hh-sin-canvas) .hh-bajada { visibility: hidden; animation: hh-respaldo 0s linear 4s forwards; }
@keyframes hh-respaldo { to { visibility: visible; } }
.hh:not(.hh-activo) .hh-escena, .hh:not(.hh-activo) .hh-marca, .hh:not(.hh-activo) .hh-puente, .hh:not(.hh-activo) .hh-progreso, .hh:not(.hh-activo) .hh-pausa { display: none; }
.hh-captura .hh-pausa, .hh-captura .hh-progreso { display: none; }
.hh-sin-canvas .hh-escena, .hh-sin-canvas .hh-marca, .hh-sin-canvas .hh-puente, .hh-sin-canvas .hh-lienzo, .hh-sin-canvas .hh-pausa { display: none; }
.hh-sin-canvas .hh-final [data-hh] { visibility: visible !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }

@media (max-width: 639px) {
    .hh-grande { font-size: clamp(2.9rem, 15vw, 5.5rem); }
    .hh-marca { left: 50%; width: 76vw; }
    .hh-marca-a { top: 35%; }
    .hh-marca-b { top: 62%; }
    .hh-marca strong { font-size: clamp(1.9rem, 8vw, 2.7rem); }
    .hh-marca > span { max-width: 22em; font-size: 10px; letter-spacing: 0.1em; }
    .hh-final { padding: 38vh 20px 27vh; }
    .hh-lockup { font-size: clamp(2.6rem, 12vw, 4.2rem); }
    .hh-linea { margin: 20px auto 16px; }
    .hh-puente { bottom: 24%; padding: 0 16px; font-size: 0.9rem; letter-spacing: 0.12em; }
    .hh-eyebrow { top: max(142px, 17%); font-size: 9px; letter-spacing: 0.12em; }
    .hh-btn { padding: 12px 16px; font-size: 11px; letter-spacing: 0.1em; }
    .hh-ctas { bottom: max(128px, 15%); }
    .hh-pausa { left: 12px; }
}
@media (max-height: 640px) and (min-width: 640px) {
    .hh-eyebrow { top: 112px; }
    .hh-ctas { bottom: 82px; }
}
/* A 320px las acciones se apilan; dejar libre el carril del WhatsApp flotante. */
@media (max-width: 359px) {
    .hh-ctas { justify-content: flex-start; }
    .hh-pausa { top: 190px; }
}
@media (prefers-reduced-motion: reduce) {
    .hh *, .hh *::before, .hh *::after { transition: none !important; animation: none !important; }
    .hh .hh-final [data-hh] { visibility: visible !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
}