/* ============================================================================
   hero-dash.css — v3 «EL CICLO» · bento del lineup (módulo web-1)
   Gramática dura (spec): tokens :root de la landing, radios 14/22, curva
   (.25,.46,.45,.94), motion solo transform/opacity, reduced-motion safe.
   Tiles producto = imagen real edge-to-edge (hover: vive). Tiles gestión =
   texto-led (matiz Samuel: con aliados, integración distinta). — web-1
   ============================================================================ */

.hd-chrome{
  --hd-paper: var(--paper, #F5F5F7);
  --hd-card:  var(--card,  #FFFFFF);
  --hd-ink:   var(--ink,   #1D1D1F);
  --hd-blue:  var(--blue,  #0071E3);
  --hd-hair:  var(--hair-soft, rgba(29,29,31,.09));
  --hd-hair2: var(--hair, rgba(29,29,31,.14));
  --hd-muted: var(--muted, rgba(29,29,31,.56));
  --hd-font:  var(--font, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif);
  --hd-mono:  var(--mono, ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace);
  --hd-dash-shadow: var(--dash-shadow, 0 24px 60px -28px rgba(29,29,31,.28), 0 8px 20px -12px rgba(29,29,31,.12));
  --hd-tile-shadow: var(--tile-shadow, 0 4px 14px -8px rgba(29,29,31,.16));
  --hd-ease: cubic-bezier(.25,.46,.45,.94);

  container-type: inline-size;
  container-name: hd;
  box-sizing: border-box;
  width: 100%;
  display: flex; flex-direction: column;
  background: var(--hd-card);
  border: 1px solid var(--hd-hair);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--hd-dash-shadow);
  color: var(--hd-ink);
  font-family: var(--hd-font);
  -webkit-font-smoothing: antialiased;
}
.hd-chrome *, .hd-chrome *::before, .hd-chrome *::after{ box-sizing: border-box; min-width: 0; }

/* ---------- barra de navegador ---------- */
.hd-bar{
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-bottom: 1px solid var(--hd-hair);
  background: linear-gradient(var(--hd-card), color-mix(in srgb, var(--hd-card) 92%, var(--hd-paper)));
}
.hd-dots{ display: flex; gap: 7px; flex: 0 0 auto; }
.hd-dots i{ width: 9px; height: 9px; border-radius: 50%; background: var(--hd-ink); opacity: .18; }
.hd-addr{
  flex: 1 1 auto; display: flex; align-items: center; gap: 7px; justify-content: center;
  font-family: var(--hd-mono); font-size: 11px; letter-spacing: .04em; color: var(--hd-muted);
  background: var(--hd-paper); border: 1px solid var(--hd-hair); border-radius: 999px;
  padding: 6px 14px; max-width: 260px; margin: 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd-addr svg{ width: 11px; height: 11px; flex: 0 0 auto; color: #0E9F6E; }
.hd-addr b{ color: var(--hd-ink); font-weight: 600; }

/* ---------- el ciclo ---------- */
.hd-cycle{ position: relative; padding: 14px; }
/* punto de salida del hilo conductor: web ancla aquí la línea page-level (contrato dir. v4) */
.hd-cycle-out{ position: absolute; bottom: 0; left: 50%; width: 1px; height: 1px; pointer-events: none; }
.hd-linesvg{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hd-line{
  fill: none; stroke: color-mix(in srgb, var(--hd-blue) 34%, var(--hd-hair2)); stroke-width: 1.5;
  transition: stroke-dashoffset 1s var(--hd-ease) .1s;
}

/* grid: 1 columna por etapa (agrupado PERO continuo) */
.hd-grid{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  align-items: stretch;
}
.hd-col{ display: flex; flex-direction: column; gap: 8px; }
.hd-coltiles{ display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }

/* label de etapa (los dots son los nodos de la línea) */
.hd-stlabel{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--hd-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hd-muted); padding: 2px 0 4px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--hd-ease), transform .5s var(--hd-ease);
  transition-delay: calc(.35s + var(--i) * .18s);
}
.hd-stdot{
  width: 7px; height: 7px; border-radius: 50%; background: var(--hd-blue); flex: 0 0 auto;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hd-blue) 16%, transparent);
}
.is-in .hd-stlabel{ opacity: 1; transform: none; }

/* ---------- tiles (base común) ---------- */
.hd-tile{
  position: relative; display: block; width: 100%;
  border: 1px solid var(--hd-hair); border-radius: 14px; overflow: hidden;
  background: var(--hd-card); cursor: pointer; padding: 0; text-align: left;
  font-family: var(--hd-font); color: var(--hd-ink);
  box-shadow: var(--hd-tile-shadow);
  opacity: 0; transform: translateY(12px);
  transition: opacity .55s var(--hd-ease), transform .55s var(--hd-ease), box-shadow .3s var(--hd-ease);
  transition-delay: calc(.5s + var(--i) * .07s);
  -webkit-tap-highlight-color: transparent;
}
.is-in .hd-tile{ opacity: 1; transform: none; transition-delay: calc(.5s + var(--i) * .07s), calc(.5s + var(--i) * .07s), 0s; }
.hd-tile:hover{ transform: translateY(-3px); }
.hd-tile:focus-visible{ outline: 2px solid var(--hd-blue); outline-offset: 2px; }

/* ---------- tile PRODUCTO (imagen real, hover vive) ---------- */
.hd-tile-img{ flex: 1 1 auto; min-height: 108px; aspect-ratio: 4/3; }
/* desktop: las columnas se estiran para alinear el fondo del bento */
@container hd (min-width: 440px){
  .hd-tile-img{ aspect-ratio: auto; }
  .hd-tile-mgmt{ flex: 1 1 auto; }
}
.hd-timg{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.001);
  transition: transform 2.6s var(--hd-ease);
}
.hd-tile-img:hover .hd-timg{ transform: scale(1.09) translateY(-2.5%); }
.hd-tscrim{
  position: absolute; left: 0; right: 0; bottom: 0; height: 52%; pointer-events: none;
  background: linear-gradient(to top, rgba(12,14,18,.6), rgba(12,14,18,.14) 60%, transparent);
}
.hd-tfoot{
  position: absolute; left: 10px; right: 10px; bottom: 8px;
  display: flex; flex-direction: column; gap: 1px;
}
.hd-tally{
  font-family: var(--hd-mono); font-size: 7px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.hd-tname{
  font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; color: #fff; line-height: 1.25;
  display: flex; align-items: baseline; gap: 5px;
}
.hd-tsub{
  font-size: 9.5px; color: rgba(255,255,255,.82); display: flex; align-items: baseline; gap: 4px;
}
.hd-tname i, .hd-tsub i{ font-style: normal; opacity: 0; transform: translateX(-3px); transition: opacity .25s, transform .25s var(--hd-ease); }
.hd-tile-img:hover .hd-tname i, .hd-tile-img:hover .hd-tsub i{ opacity: 1; transform: none; }

/* badge flotante (dato real) */
.hd-badge{
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-family: var(--hd-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hd-ink); background: color-mix(in srgb, #fff 88%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--hd-hair); border-radius: 999px; padding: 4px 8px;
  white-space: nowrap; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
  animation: hd-float 4.5s ease-in-out infinite alternate;
}
@keyframes hd-float{ from{ transform: translateY(0); } to{ transform: translateY(-3px); } }

/* ---------- tile GESTIÓN (con aliados · texto-led, integración distinta) ---------- */
.hd-tile-mgmt{
  background: var(--hd-paper);
  border-style: dashed; border-color: var(--hd-hair2);
  box-shadow: none;
  padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 3px;
  min-height: 72px; justify-content: center;
}
.hd-tkick{
  font-family: var(--hd-mono); font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--hd-muted);
}
.hd-tname2{ font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.hd-tname2 b{ color: var(--hd-blue); }
.hd-tline{
  font-size: 10.5px; color: var(--hd-muted); display: flex; align-items: baseline; gap: 4px;
}
.hd-tline i{ font-style: normal; color: var(--hd-blue); opacity: 0; transform: translateX(-3px); transition: opacity .25s, transform .25s var(--hd-ease); }
.hd-tile-mgmt:hover .hd-tline i, .hd-tile-crm:hover .hd-tline i{ opacity: 1; transform: none; }

/* ---------- tile CRM (producto texto-led, sin UI inventada) ---------- */
.hd-tile-crm{
  background: var(--hd-ink); color: var(--hd-paper);
  padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 3px;
  min-height: 64px; justify-content: center;
}
.hd-tile-crm .hd-tline{ color: color-mix(in srgb, var(--hd-paper) 62%, transparent); }

/* ---------- container queries ---------- */
@container hd (max-width: 439px){
  /* mobile: etapas apiladas, tiles del cluster en fila; línea vertical entre dots */
  .hd-grid{ grid-template-columns: 1fr; gap: 12px; }
  .hd-coltiles{ flex-direction: row; }
  .hd-coltiles .hd-tile{ flex: 1 1 0; }
  .hd-tile-img{ aspect-ratio: 5/4; }
  .hd-tile-mgmt, .hd-tile-crm{ aspect-ratio: auto; min-height: 84px; }
}
@container hd (min-width: 560px){
  .hd-cycle{ padding: 16px; }
  .hd-grid{ gap: 12px; }
  .hd-coltiles{ gap: 10px; }
  .hd-stlabel{ font-size: 10px; }
  .hd-tname{ font-size: 13.5px; }
  .hd-tname2{ font-size: 16px; }
  .hd-badge{ font-size: 8.5px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .hd-line{ transition: none; stroke-dashoffset: 0 !important; }
  .hd-stlabel, .hd-tile{ transition: opacity .001s; transform: none; }
  .hd-timg{ transition: none; }
  .hd-tile-img:hover .hd-timg{ transform: none; }
  .hd-badge{ animation: none; }
}