/* =====================================================================
   Hero CoCoCo España (2026-10)
   Titular y fondo del mockup + módulo "de una conversación a un plan"
   (inspirado en heylemon.ai) + arco de salida + carrusel de clientes.
   Todas las clases van con prefijo hx- para no chocar con style.css/ds-es.css.
   ===================================================================== */

.hx {
  --hx-ink: #061424;
  --hx-pink: #ec087c;
  /* Times New Roman / Arial donde existen; Tinos / Arimo (mismas métricas) en Android y Linux */
  --hx-serif: 'Times New Roman', Times, Tinos, serif;
  --hx-sans: Arial, Helvetica, Arimo, sans-serif;
  --hx-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --hx-hand: 'Segoe Print', 'Bradley Hand', Caveat, cursive;
  --hx-night: #111318;
  --hx-paper: #FFFDF7;
  --hx-geist: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --hx-gmono: 'Geist Mono', ui-monospace, monospace;
  max-width: 1500px;
  margin: 0 auto;
  /* Desde 821px la cabecera es fija (82px) y el panel empieza justo debajo; por debajo es sticky y ya ocupa su sitio */
  padding: 90px 24px 0;
  color: var(--hx-ink);
  font-family: var(--hx-sans);
  /* style.css pone 1.6 en body; aquí manda el interlineado normal del mockup */
  line-height: normal;
}

/* ---------- Panel con degradado y grano ---------- */
.hx .hx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 64px 32px 84px;
  border-radius: 23px 23px 0 0;
  /* Esquinas inferiores rectas: esa zona queda bajo el arco blanco y así no asoma ningún filo */
  clip-path: inset(0 round 23px 23px 0 0);
  background:
    radial-gradient(ellipse at 50% 46%, #fffefa 0%, #fff9f2aa 22%, transparent 50%),
    radial-gradient(ellipse at 0% 78%, #f4a9c0 0%, transparent 52%),
    radial-gradient(ellipse at 100% 70%, #f39cc6 0%, transparent 50%),
    radial-gradient(ellipse at 50% 108%, #f7b7d3 0%, transparent 45%),
    linear-gradient(180deg, #9cc1f0 0%, #c9d7f5 26%, #e6daf1 44%, #f6d3e1 68%, #f2bcd6 100%);
}
.hx .hx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('assets/brand/grano-fuerte.svg') 0 0 / 220px 220px;
  mix-blend-mode: soft-light;
  opacity: .75;
  pointer-events: none;
}

/* ---------- Copy ---------- */
.hx .hx-intro { position: relative; z-index: 1; text-align: center; }
.hx .hx-eyebrow { margin: 0 0 20px; font: 10px var(--hx-mono); letter-spacing: 2.2px; color: #bd166c; }
.hx .hx-eyebrow b { font-weight: 700; }
.hx .hx-title { margin: 0; font: 400 clamp(64px, 7.2vw, 104px)/.88 var(--hx-serif); letter-spacing: -5px; color: var(--hx-ink); }
.hx .hx-title em { font-style: italic; font-weight: 400; }
.hx .hx-deck { margin: 32px 0 8px; font: 400 23px var(--hx-sans); letter-spacing: -.6px; color: #46566b; }
/* #55647a: 4,5:1 sobre el tramo más claro del degradado (AA) */
.hx .hx-sub { margin: 0; font-size: 17px; line-height: 1.5; color: #55647a; text-wrap: balance; }
.hx .hx-cta {
  display: inline-flex; align-items: center; gap: 13px;
  margin-top: 32px; padding: 16px 28px; border-radius: 40px;
  background: linear-gradient(110deg, #ef168c, #e80078); color: #fff;
  font: 500 14px var(--hx-sans); box-shadow: 0 5px 20px #de187c12;
  transition: background .2s, box-shadow .2s;
}
.hx .hx-cta:hover { background: #d80070; box-shadow: 0 8px 24px #de187c33; }
.hx .hx-cta:focus-visible { outline: 3px solid var(--hx-ink); outline-offset: 4px; }
.hx .hx-cta svg { width: 16px; }
.hx .hx-cta-note { margin: 12px 0 0; font-size: 12px; color: #44536a; }

/* ---------- Módulo: de una conversación a un plan ---------- */
.hx .hx-demo { --ac: #4DB8FF; --ac-solid: #0A8FE0; --hl: 168,220,255; position: relative; z-index: 1; max-width: 700px; margin: 88px auto 0; }
.hx .hx-demo[data-tone="vm"] { --ac: #FF5CAD; --ac-solid: #E0137F; --hl: 255,176,214; }
.hx .hx-note { position: absolute; right: calc(100% + 30px); top: 40px; font: italic 22px/1.2 var(--hx-hand); color: #1b3351; transform: rotate(-7deg); white-space: nowrap; }
.hx .hx-note svg { display: block; width: 80px; height: 42px; margin: 4px 0 0 70px; fill: none; stroke: #243956; stroke-width: 1.3; stroke-linecap: round; }

.hx .hx-pill {
  position: absolute; z-index: 3; left: 50%; top: 0; transform: translate(-50%, calc(-100% + 16px));
  display: flex; align-items: center; gap: 14px; width: min(620px, 94%);
  padding: 12px 12px 12px 18px; border-radius: 28px;
  background: var(--hx-night); color: #E9E7DF;
  box-shadow: 0 16px 40px rgba(17,19,24,.28), inset 0 0 0 1px rgba(255,255,255,.06);
}
.hx .hx-wave { display: flex; align-items: center; gap: 2.5px; height: 20px; flex: none; }
.hx .hx-wave i { display: block; width: 2.5px; height: 5px; border-radius: 2px; background: var(--ac); animation: hx-wv 1.1s ease-in-out infinite; }
.hx .hx-wave i:nth-child(2) { animation-delay: .15s; }
.hx .hx-wave i:nth-child(3) { animation-delay: .3s; }
.hx .hx-wave i:nth-child(4) { animation-delay: .45s; }
.hx .hx-wave i:nth-child(5) { animation-delay: .6s; }
.hx .hx-pill.is-idle .hx-wave i { animation: none; height: 4px; opacity: .5; }
.hx .hx-transcript { flex: 1; min-width: 0; height: 3em; display: flex; align-items: center; font: 400 12.5px/1.5 var(--hx-gmono); color: #ECEAE2; }
.hx .hx-caret::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--ac); animation: hx-blink 1.05s step-end infinite; }
.hx .hx-state { flex: none; padding: 6px 10px; border-radius: 999px; font: 500 10px var(--hx-gmono); letter-spacing: .12em; text-transform: uppercase; color: #8E8B80; }
.hx .hx-state.is-live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #ff4d6d; vertical-align: 1px; animation: hx-pulse 1.2s ease-in-out infinite; }
.hx .hx-state.is-done { color: #fff; background: var(--ac-solid); animation: hx-pop .45s cubic-bezier(.3,1.4,.5,1) both; }

.hx .hx-window { position: relative; overflow: hidden; border-radius: 18px; background: var(--hx-paper); box-shadow: 0 22px 48px rgba(40,30,80,.13), 0 0 0 1px rgba(17,19,24,.06); font-family: var(--hx-geist); }
.hx .hx-w-head { display: flex; align-items: center; justify-content: space-between; height: 66px; padding: 18px 18px 0; border-bottom: 1px solid #EEEBE2; }
.hx .hx-w-left { display: flex; align-items: center; gap: 14px; }
.hx .hx-dots { display: flex; gap: 6px; }
.hx .hx-dots i { width: 10px; height: 10px; border-radius: 50%; background: #E4E0D6; }
.hx .hx-w-left svg { display: block; width: 70px; height: auto; color: var(--hx-night); }
.hx .hx-w-right { display: flex; align-items: center; gap: 10px; }
.hx .hx-w-tag { font: 500 10px var(--hx-gmono); letter-spacing: .12em; text-transform: uppercase; color: #6F6B61; }
/* Pausa (WCAG 2.2.2): para la demo y el carrusel */
.hx .hx-pause { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid #E4E0D6; border-radius: 50%; background: transparent; color: #6F6B61; cursor: pointer; }
.hx .hx-pause:hover { color: var(--hx-night); border-color: #CFCABD; }
.hx .hx-pause:focus-visible { outline: 2px solid var(--ac-solid); outline-offset: 2px; }
.hx .hx-pause svg { width: 10px; height: 10px; fill: currentColor; }
.hx .hx-pause .hx-i-play { display: none; }
.hx .hx-pause[aria-pressed="true"] .hx-i-play { display: block; }
.hx .hx-pause[aria-pressed="true"] .hx-i-pause { display: none; }

.hx .hx-w-body { min-height: 240px; padding: 14px 30px 4px; transition: opacity .4s; }
.hx .hx-w-body.is-fading { opacity: 0; }
.hx .hx-row { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px dashed #E9E5DA; }
.hx .hx-row:last-child { border-bottom: 0; }
.hx .hx-k { font: 500 10.5px var(--hx-gmono); letter-spacing: .14em; text-transform: uppercase; color: #8A867B; }
.hx .hx-row.is-on .hx-k { color: var(--hx-night); }
.hx .hx-v { margin: 0; font-size: 16px; line-height: 1.55; letter-spacing: -.01em; color: #2A2D35; }
.hx .hx-v b { font-weight: 600; color: var(--hx-night); }
/* Esqueleto mientras escucha: la estructura Dónde/Cómo/Valor se ve desde el primer segundo */
.hx .hx-v:empty::before { content: ""; display: block; width: var(--sk, 70%); height: 10px; margin: 7px 0; border-radius: 6px; background: linear-gradient(90deg, #EFEBE1 0%, #F7F4EC 50%, #EFEBE1 100%) 0 0 / 200% 100%; animation: hx-sk 1.6s linear infinite; }
.hx .hx-row:nth-child(2) .hx-v { --sk: 84%; }
.hx .hx-row:nth-child(3) .hx-v { --sk: 58%; }
/* Estela de escritura: los últimos caracteres llevan un degradado del color del servicio y cursor de bloque */
.hx .hx-hl { color: var(--hx-night); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 1px 0; border-radius: 3px; background-image: linear-gradient(90deg, rgba(var(--hl),0) 0%, rgba(var(--hl),.45) 26%, rgba(var(--hl),.95) 100%); }
.hx .hx-hl::after { content: ""; display: inline-block; width: 7px; height: 1.02em; margin-left: 1px; vertical-align: -2px; border-radius: 1.5px; background: var(--hx-night); }
.hx .hx-chip { display: flex; width: fit-content; align-items: center; margin: 0 0 8px; padding: 3px 9px; border-radius: 999px; background: var(--hx-night); color: var(--ac); font: 500 11px var(--hx-gmono); white-space: nowrap; opacity: 0; }
.hx .hx-chip.is-on { animation: hx-pop .45s cubic-bezier(.3,1.4,.5,1) both; }
.hx .hx-w-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 30px 16px; font: 400 11px var(--hx-gmono); color: #6F6B61; }
.hx .hx-ready { padding: 7px 12px; border-radius: 999px; background: var(--hx-night); color: var(--ac); font: 500 11px var(--hx-gmono); letter-spacing: .06em; white-space: nowrap; opacity: 0; }
.hx .hx-ready.is-on { animation: hx-pop .45s cubic-bezier(.3,1.4,.5,1) both; }
.hx .hx-footnote { margin: 16px 0 0; text-align: center; font-size: 10px; color: #6F6B61; }
/* Sin JS se ve el primer ejemplo terminado; con JS se oculta hasta que el bucle toma el control */
html.hx-js .hx .hx-static { display: none; }
html:not(.hx-js) .hx .hx-pause { display: none; }
.hx .hx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pausado: se congela todo lo que se mueve dentro del hero */
.hx.is-paused .hx-wave i,
.hx.is-paused .hx-caret::after,
.hx.is-paused .hx-state.is-live::before,
.hx.is-paused .hx-v:empty::before,
.hx.is-paused .hx-track { animation-play-state: paused; }

/* Arco de salida: el panel se funde con la página. Sobresale 2px para que no asome ninguna línea. */
.hx .hx-arc { position: absolute; z-index: 0; left: -2px; right: -2px; bottom: -2px; height: 250px; background: #fff; clip-path: ellipse(72% 100% at 50% 100%); pointer-events: none; }

/* ---------- Carrusel de clientes ---------- */
.hx .hx-clients { max-width: 1204px; margin: 8px auto 24px; padding: 0 24px; text-align: center; }
.hx .hx-clients-label { margin: 0 0 26px; font: 500 11px var(--hx-mono); letter-spacing: 2px; text-transform: uppercase; color: #6F7787; }
.hx .hx-clients-label::before, .hx .hx-clients-label::after { content: "·"; margin: 0 10px; color: #B5BBC6; }
.hx .hx-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hx .hx-track { display: flex; width: max-content; animation: hx-mq 46s linear infinite; will-change: transform; transform: translateZ(0); }
/* Pausa al pasar el ratón solo con hover real: en iOS el toque deja :hover "pegado" y paraba el carrusel */
@media (hover: hover) { .hx .hx-marquee:hover .hx-track { animation-play-state: paused; } }
.hx .hx-marquee:focus-within .hx-track { animation-play-state: paused; }
.hx .hx-track ul { --s: .82; display: flex; align-items: center; gap: 80px; margin: 0; padding: 0 36px; list-style: none; }
/* Mismo peso visual para todos: --ih = alto de tinta; --a/--b = dónde empieza/acaba la tinta dentro del archivo */
.hx .hx-track img { --H: calc(var(--ih) * var(--s) * 1px / (var(--b) - var(--a))); display: block; width: auto; height: var(--H); margin: calc(var(--H) * var(--a) * -1) 0 calc(var(--H) * (1 - var(--b)) * -1); filter: grayscale(1); opacity: .6; transition: opacity .2s; }
.hx .hx-track img:hover { opacity: .9; }

@keyframes hx-wv { 0%, 100% { height: 5px; } 50% { height: 18px; } }
@keyframes hx-blink { 50% { opacity: 0; } }
@keyframes hx-pulse { 50% { opacity: .35; transform: scale(.8); } }
@keyframes hx-pop { 0% { opacity: 0; transform: scale(.5); } 62% { opacity: 1; transform: scale(1.09); } 100% { opacity: 1; transform: scale(1); } }
@keyframes hx-sk { to { background-position: -200% 0; } }
@keyframes hx-mq { to { transform: translateX(-50%); } }

@media (max-width: 1150px) {
  .hx .hx-note { display: none; }
}
@media (max-width: 820px) {
  .hx { padding-top: 6px; }
}
@media (max-width: 700px) {
  .hx { padding: 6px 12px 0; }
  .hx .hx-hero { padding: 44px 16px 64px; border-radius: 18px 18px 0 0; clip-path: inset(0 round 18px 18px 0 0); }
  .hx .hx-eyebrow { margin-bottom: 18px; font-size: 10px; letter-spacing: 1.6px; }
  .hx .hx-title { font-size: clamp(48px, 13.4vw, 72px); letter-spacing: -2.7px; line-height: .99; }
  .hx .hx-title em { white-space: nowrap; }
  .hx .hx-deck { margin: 24px auto 8px; font-size: 17px; line-height: 1.4; text-wrap: balance; }
  .hx .hx-sub { max-width: 320px; margin: auto; font-size: 14px; line-height: 1.55; }
  .hx .hx-cta { margin-top: 28px; padding: 15px 22px; font-size: 13px; }
  .hx .hx-cta-note { font-size: 11px; }
  .hx .hx-demo { margin-top: 132px; }
  .hx .hx-pill { gap: 10px; padding: 10px 10px 10px 14px; border-radius: 22px; }
  .hx .hx-transcript { height: 4.5em; font-size: 11.5px; }
  .hx .hx-state { position: absolute; top: -11px; right: 16px; padding: 5px 9px; font-size: 8.5px; background: var(--hx-night); box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
  .hx .hx-state.is-done { background: var(--ac-solid); }
  .hx .hx-w-head { padding: 0 14px; }
  .hx .hx-w-tag { display: none; }
  .hx .hx-w-body { min-height: 400px; padding: 22px 16px 6px; }
  .hx .hx-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .hx .hx-v { font-size: 15px; }
  .hx .hx-w-foot { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 16px 16px; font-size: 10.5px; }
  .hx .hx-arc { height: 190px; clip-path: ellipse(95% 100% at 50% 100%); }
  .hx .hx-clients { margin: 20px auto 16px; padding: 0 12px; }
  .hx .hx-clients-label { margin-bottom: 20px; font-size: 10px; letter-spacing: 1.4px; }
  .hx .hx-track ul { --s: .58; gap: 44px; padding: 0 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx .hx-track { animation: none; }
  .hx .hx-marquee { overflow-x: auto; }
  .hx .hx-wave i, .hx .hx-caret::after, .hx .hx-state.is-live::before, .hx .hx-v:empty::before { animation: none; }
}

/* Texto mínimo 11px (revisión previa a producción) */
.hx .hx-eyebrow, .hx .hx-k, .hx .hx-footnote, .hx .hx-w-foot, .hx .hx-w-tag, .hx .hx-clients-label { font-size: 11px; }
@media (max-width: 700px) {
  .hx .hx-eyebrow { font-size: 11px; letter-spacing: 1.4px; }
  .hx .hx-state { font-size: 10px; letter-spacing: .08em; }
  .hx .hx-clients-label { font-size: 11px; letter-spacing: 1.2px; }
}

.hx .hx-track img { width: auto; max-width: none; }
@keyframes hx-mq { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }