/* home-hero-system-desktop — visual del hero (solo desktop, >=1024px)
   fragmentos → lectura → sistema, construido en HTML/CSS/SVG, sin imágenes rasterizadas.
   Paleta y tipografía propias (Bryde): funciona aislado o dentro de index.html. */

.hhs{
  --hhs-ivory:#F5EEE1;
  --hhs-gray:#8A7F6E;
  --hhs-wine:#8f2f3b;
  --hhs-graphite:#1c1a17;
  --hhs-graphite-2:#201d19;
  --hhs-hair:rgba(245,238,225,.14);
  --hhs-hair-strong:rgba(245,238,225,.22);
  position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Manrope',sans-serif;
}

.hhs-field{position:relative;width:min(58vw,900px);height:min(72vh,760px);overflow:hidden}

.hhs-svg{position:absolute;inset:0;display:block;width:100%;height:100%;
  stroke-linecap:round;stroke-linejoin:round}

/* ——— capa técnica de fondo: cuadrícula, marco, marcas de esquina ——— */
.hhs-frame{fill:none;stroke:var(--hhs-ivory);stroke-opacity:.05;stroke-width:1;stroke-linecap:butt}
.hhs-corner{fill:none;stroke:var(--hhs-ivory);stroke-opacity:.13;stroke-width:1;stroke-linecap:butt}
.hhs-grid line{stroke:var(--hhs-ivory);stroke-opacity:.028;stroke-width:1;stroke-linecap:butt}
.hhs-ticks line{stroke:var(--hhs-ivory);stroke-opacity:.07;stroke-width:1;stroke-linecap:butt}

/* ——— fragmentos: tipos distintos de marca (cifra, frase, línea temporal, indicador, anotación, bloque de datos, tarea) ——— */
.hhs-kicker{font:700 11px/1 'Manrope',sans-serif;letter-spacing:.13em;fill:var(--hhs-gray);fill-opacity:.85}
.hhs-figure{font:800 32px/1 'Manrope',sans-serif;letter-spacing:-.02em;fill:var(--hhs-ivory);fill-opacity:.86}
.hhs-frase{font:600 14.5px/1 'Manrope',sans-serif;fill:var(--hhs-ivory);fill-opacity:.62}
.hhs-pill-text{font:600 13px/1 'Manrope',sans-serif;fill:var(--hhs-ivory);fill-opacity:.64}
.hhs-micro{font:500 11px/1 'Manrope',sans-serif;fill:var(--hhs-gray);fill-opacity:.8}
.hhs-annot-text{font:500 14.5px/1 'Manrope',sans-serif;fill:var(--hhs-ivory);fill-opacity:.56}

.hhs-pill{fill:var(--hhs-graphite);stroke:var(--hhs-hair);stroke-width:1}
.hhs-panel{fill:var(--hhs-graphite-2);stroke:var(--hhs-hair);stroke-width:1}
.hhs-panel-div{stroke:var(--hhs-hair);stroke-width:1;stroke-linecap:butt}
.hhs-bar{fill:var(--hhs-ivory);fill-opacity:.15}
.hhs-spark{fill:none;stroke:var(--hhs-gray);stroke-width:1.4;stroke-opacity:.55}
.hhs-tl-axis{stroke:var(--hhs-hair-strong);stroke-width:1;stroke-linecap:butt}
.hhs-tl-dot{fill:var(--hhs-graphite);stroke:var(--hhs-ivory);stroke-opacity:.4;stroke-width:1}
.hhs-tl-dot--open{fill:none;stroke:var(--hhs-wine);stroke-opacity:.7;stroke-width:1.4}
.hhs-ind-ring{fill:none;stroke:var(--hhs-ivory);stroke-opacity:.34;stroke-width:1.2}
.hhs-ind-arrow{fill:none;stroke:var(--hhs-gray);stroke-width:1.4;stroke-opacity:.6}
.hhs-annot-mark{stroke:var(--hhs-ivory);stroke-opacity:.3;stroke-width:1}
.hhs-checkbox{fill:none;stroke:var(--hhs-ivory);stroke-opacity:.34;stroke-width:1.2}

/* ——— conexiones: único lugar donde aparece el burdeo (relaciones, descubrimiento, puntos activos) ——— */
.hhs-stub line{stroke:var(--hhs-ivory);stroke-opacity:.22;stroke-width:1}
.hhs-stub circle{fill:none;stroke:var(--hhs-ivory);stroke-opacity:.3;stroke-width:1}

.hhs-sweep-line{stroke:var(--hhs-wine);stroke-width:1.4;stroke-opacity:.85}
.hhs-sweep-glow{fill:url(#hhsSweepGrad)}

.hhs-line{fill:none;stroke:var(--hhs-wine);stroke-width:1.2;stroke-opacity:.55}
.hhs-line--dashed{stroke-dasharray:3 4;stroke-opacity:.42}

.hhs-node-dot{fill:var(--hhs-wine)}
.hhs-node-ring{fill:none;stroke:var(--hhs-wine);stroke-width:1.3;stroke-dasharray:2.5 3.5;stroke-opacity:.6}
.hhs-node-label{font:700 15px/1 'Manrope',sans-serif;letter-spacing:.1em;fill:var(--hhs-ivory);text-anchor:middle}
.hhs-node-sub{font:500 12.5px/1 'Manrope',sans-serif;fill:var(--hhs-gray);text-anchor:middle}

/* estado de reposo sin JS = estado 3 (sistema resuelto): estos elementos solo existen
   durante la transición y arrancan invisibles hasta que el script los toma y los anima */
.hhs-frag{opacity:.14}
.hhs-transient{opacity:0}
.hhs-label-a{opacity:0}

.hhs-hub-line{fill:none;stroke:var(--hhs-wine);stroke-width:1;stroke-opacity:.4}
.hhs-hub-dot{fill:var(--hhs-wine)}
.hhs-hub-label{font:700 23px/1.3 'Manrope',sans-serif;letter-spacing:-.008em;fill:var(--hhs-ivory);
  fill-opacity:.94;text-anchor:middle}

/* solo existe para el respiro ambiental post-entrada: sin JS no debe duplicar el radio "ordenar" */
.hhs-glint{stroke:var(--hhs-wine);stroke-width:1.4;stroke-opacity:.8;fill:none;opacity:0}

/* ——— responsive desktop: 821–1180 reduce fragmentos secundarios antes que el campo entero ——— */
@media (min-width:1367px) and (max-width:1600px){
  .hhs-field{width:min(56vw,860px)}
}
@media (max-width:1366px) and (min-width:1181px){
  .hhs-field{width:min(54vw,620px);height:min(66vh,620px)}
}
@media (max-width:1180px) and (min-width:821px){
  .hhs-field{width:min(52vw,520px);height:min(62vh,540px)}
}

/* <=820px el hero usa home-hero-system-mobile en su lugar (ver esa hoja) */
@media (max-width:820px){
  .hhs{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hhs *{animation:none!important}
}