/* home-sections.css — cargar DESPUÉS de components.css. Solo tokens. */
.hs-section{padding-block:var(--space-12)}
.hs-wrap{width:min(100% - 2*var(--space-4),1120px);margin-inline:auto}
.hs-btn-sm{font-size:var(--text-caption);padding:var(--space-1) var(--space-3);white-space:nowrap}

/* ---------- HERRAMIENTAS ---------- */
.hs-tools{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-4);align-items:start}
.hs-tools__left,.hs-tools__right{min-width:0}
.hs-tablist{display:flex;flex-direction:column;gap:var(--space-2)}

/* ---------- TABS / CARDS DE HERRAMIENTAS (Relleno sólido Carmine) ---------- */
.hs-tab{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;cursor:pointer;
  padding:var(--space-3);color:var(--color-text);font-family:var(--font-ui);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  transition:background .3s ease,color .3s ease,transform .3s ease,box-shadow .3s ease}
.hs-tab:hover{background:var(--color-surface-strong);transform:translateY(-2px)}
.hs-tab:focus-visible{outline:2px solid var(--color-accent) !important;outline-offset:3px}
.hs-tab__title{font-weight:600;font-size:1.05rem;line-height:1.2;color:inherit}
.hs-tab__sub{font-size:var(--text-caption);line-height:1.4;opacity:.75;color:inherit}
.hs-tab[aria-selected="true"]{background:var(--color-accent);color:var(--color-bg);border-color:transparent;box-shadow:var(--shadow-hover)}
.hs-tab[aria-selected="true"] .hs-tab__title{color:inherit}
.hs-tab[aria-selected="true"] .hs-tab__sub{color:inherit;opacity:.9}
html[data-theme="dark"] .hs-tab[aria-selected="true"]{color:var(--gray-900, #F4F4F5)}

/* ---------- PANEL DE DETALLE (Superficie Milk Glass con arte procedural trasero) ---------- */
.hs-tools__right{position:relative;padding:var(--space-6);margin-top:16px;isolation:isolate;--gf-px:0;--gf-py:0}

/* Capa 1: Panel trasero con arte (asoma ~14-16px por encima y por los costados) */
.hs-tools__back{position:absolute;top:-16px;left:-14px;right:-14px;bottom:0;border-radius:var(--radius-lg);overflow:hidden;pointer-events:none;z-index:0;
  background:linear-gradient(180deg, var(--gray-50, #F7F7F8) 0%, var(--gray-200, #E4E4E7) 100%);box-shadow:0 4px 20px rgba(0, 0, 0, 0.04)}
html[data-theme="dark"] .hs-tools__back{background:linear-gradient(180deg, #27272A 0%, #18181B 100%);box-shadow:0 4px 24px rgba(0, 0, 0, 0.35)}

.hs-tools__art-canvas{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);object-fit:cover;opacity:0;filter:blur(8px) saturate(.9);
  transition:opacity var(--dur-3, .4s) var(--ease-out, ease),filter .6s var(--ease-out, ease);pointer-events:none}
.hs-tools__art-canvas[data-ready]{filter:none}
.hs-tools__art-canvas.is-active{opacity:.95}
html[data-theme="dark"] .hs-tools__art-canvas.is-active{opacity:.65}

.hs-tools__sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 24%),radial-gradient(120% 80% at 80% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%)}
html[data-theme="dark"] .hs-tools__sheen{background:linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 24%),radial-gradient(120% 80% at 80% 0%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 60%)}

/* Capa 2: Vidrio esmerilado encima (Milk Glass en light, Smoked Glass en dark) */
.hs-tools__glass{position:absolute;inset:0;border-radius:var(--radius-lg);overflow:hidden;pointer-events:none;z-index:1;
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  background:linear-gradient(180deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .65) 16%, rgba(255, 255, 255, .90) 36%, rgba(247, 247, 248, .96) 100%);
  border:1px solid rgba(255, 255, 255, .7);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, .95),inset 0 -1px 0 rgba(255, 255, 255, .2),0 0 0 1px rgba(0, 0, 0, .04),var(--shadow-soft)}
html[data-theme="dark"] .hs-tools__glass{
  background:linear-gradient(180deg, rgba(39, 39, 42, .30) 0%, rgba(39, 39, 42, .70) 16%, rgba(24, 24, 27, .92) 36%, rgba(18, 18, 20, .97) 100%);
  border:1px solid rgba(255, 255, 255, .14);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, .22),inset 0 -1px 0 rgba(255, 255, 255, .04),0 0 0 1px rgba(0, 0, 0, .5),var(--shadow-soft)}

/* Brillo especular suave que sigue al puntero */
.hs-tools__spec{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(460px 340px at calc(50% + var(--gf-px, 0)*45%) calc(35% + var(--gf-py, 0)*40%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode:soft-light;opacity:.85;transition:opacity var(--dur-2, .25s) var(--ease-out, ease)}
html[data-theme="dark"] .hs-tools__spec{
  background:radial-gradient(460px 340px at calc(50% + var(--gf-px, 0)*45%) calc(35% + var(--gf-py, 0)*40%), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode:screen;opacity:.32}

/* Capa 3: Contenido por encima con contraste nítido (≥ 4.5:1) */
.hs-panel,.hs-panel__foot{position:relative;z-index:2}
.hs-panel__title{font-size:var(--text-h3);margin:0 0 var(--space-1);display:flex;align-items:center;gap:var(--space-1);color:var(--color-text)}
.hs-panel__title::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-accent)}
.hs-panel__desc{font-size:var(--text-body-lg);line-height:1.5;margin:0 0 var(--space-3);color:var(--color-text);opacity:.9}
.hs-label{font:600 .75rem/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin:var(--space-3) 0 var(--space-1)}

/* chips: nunca desbordan, se acomodan en filas */
.hs-chips{display:flex;flex-wrap:wrap;gap:var(--space-1);list-style:none;margin:0;padding:0}
.hs-chip{display:inline-flex;align-items:baseline;gap:6px;max-width:100%;padding:8px 14px;
  background:var(--color-surface-strong);border:1px solid var(--color-border);border-radius:var(--radius-pill);
  font-family:var(--font-ui);font-weight:600;font-size:var(--text-caption);line-height:1.2}
.hs-chip__name{white-space:nowrap}
.hs-chip__tag{font-weight:400;font-size:.75rem;opacity:.6;white-space:nowrap}

.hs-minis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-2)}
.hs-mini{position:relative;display:flex;flex-direction:column;gap:6px;padding:var(--space-3);
  color:var(--color-bg);background:var(--color-text);border-radius:var(--radius-md);text-decoration:none;
  transition:transform .3s ease,box-shadow .3s ease}
.hs-mini:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.hs-mini:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.hs-mini__kicker{font:600 .7rem/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;opacity:.65}
.hs-mini__title{font:600 1rem/1.25 var(--font-ui);padding-right:var(--space-3)}
.hs-mini__arrow{position:absolute;top:var(--space-2);right:var(--space-2);opacity:.7}
.hs-panel__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--color-border);
  font-size:var(--text-caption);opacity:1}
.hs-panel__foot>span{opacity:.7}

/* marquee: contenido contenido, sin cortes de texto */
.hs-marquee{margin-top:var(--space-4);min-width:0;max-width:100%}
.hs-marquee__label{font:600 .75rem/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin:0 0 var(--space-1) var(--space-2)}
.hs-marquee__viewport{display:flex;overflow:hidden;max-width:100%;height:48px;align-items:center;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--color-text) 6%,var(--color-text) 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,var(--color-text) 6%,var(--color-text) 94%,transparent)}
.hs-marquee__track{display:flex;flex:0 0 auto;align-items:center;margin:0;padding:0;list-style:none;
  animation:hs-marquee 30s linear infinite;will-change:transform}
.hs-marquee__track li{white-space:nowrap;font:600 .95rem/1 var(--font-ui);color:var(--color-text);opacity:.75}
.hs-marquee__track li::after{content:"•";color:var(--color-accent);margin:0 var(--space-2)}
.hs-marquee__viewport:hover .hs-marquee__track,
.hs-marquee__viewport:focus-within .hs-marquee__track{animation-play-state:paused}
@keyframes hs-marquee{to{transform:translateX(-100%)}}

/* ---------- PROYECTOS (Glass Folder Cards) ---------- */
.hs-head{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-3);
  padding-bottom:var(--space-3);margin-bottom:var(--space-6);border-bottom:1px solid var(--color-border)}
.hs-head__id{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.hs-head__icon{display:grid;place-items:center;width:44px;height:44px;flex:none;color:var(--color-accent);
  background:var(--color-surface-strong);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.hs-head__title{font-size:var(--text-h2);margin:0;line-height:1.1}
.hs-head__sub{margin:4px 0 0;font-size:var(--text-caption);opacity:.7}

.hs-grid{display:grid;grid-template-columns:1fr;align-items:stretch;gap:var(--space-4)}
@media (min-width:640px){.hs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.hs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.hs-card{position:relative;display:flex;flex-direction:column;height:100%;min-width:0;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);transition:box-shadow var(--dur-2, .25s) var(--ease-out, ease),background var(--dur-2, .25s) var(--ease-out, ease),border-color var(--dur-2, .25s) var(--ease-out, ease);
  overflow:visible}
.hs-card:hover{box-shadow:var(--shadow-hover);background:var(--color-surface-strong)}
.hs-card:focus-within{outline:2px solid var(--color-accent);outline-offset:3px}

/* 1) Carpeta interactiva en la parte superior */
.hs-card__folder{position:relative;flex:none;width:100%;padding:var(--space-3) var(--space-3) 0;display:flex;justify-content:center;overflow:visible}

/* 2) Cuerpo: meta + título + descripción */
.hs-card__body{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) var(--space-3) var(--space-2)}
.hs-card__meta{display:inline-block;font:600 .75rem/1.2 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--color-accent);opacity:.9;margin-bottom:2px}
.hs-card__title{font-size:var(--text-h3);line-height:1.25;margin:0;overflow-wrap:anywhere}
.hs-card__link{color:inherit;text-decoration:none;transition:color var(--dur-1, .2s) var(--ease-out, ease)}
.hs-card__link:hover{color:var(--color-accent)}
.hs-card__link:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}
.hs-card__desc{margin:var(--space-1) 0 0;font-size:.95rem;line-height:1.5;opacity:.8;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 3) Pie anclado abajo: Rol y flecha */
.hs-card__foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  margin:auto var(--space-3) 0;padding:var(--space-2) 0 var(--space-3);border-top:1px solid var(--color-border);
  font:600 var(--text-caption)/1.3 var(--font-ui);opacity:.85}
.hs-card__arrow{color:var(--color-accent);font-size:1.15rem;line-height:1;transition:transform .25s var(--ease-out, ease)}
.hs-card:hover .hs-card__arrow{transform:translateX(4px)}

/* ---------- QUIÉN SOY ---------- */
.hs-who{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:var(--space-8);align-items:center}
.hs-who__title{font-size:var(--text-h1);line-height:1.15;margin:0 0 var(--space-4);letter-spacing:-.01em}
.hs-hl{background:none;color:var(--color-accent)}
.hs-who__actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hs-tools{grid-template-columns:1fr}
  .hs-tools__right{margin-top:var(--space-6);padding:var(--space-4)}
  .hs-tools__back{top:-14px;left:-8px;right:-8px}
  .hs-tools__spec{background:radial-gradient(400px 300px at 50% 25%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 70%)}
  html[data-theme="dark"] .hs-tools__spec{background:radial-gradient(400px 300px at 50% 25%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%)}
  .hs-who{grid-template-columns:1fr;gap:var(--space-6);text-align:center}
  .hs-who__actions{justify-content:center}
}
@media (max-width:560px){
  .hs-head{flex-wrap:wrap}
  .hs-chip__tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hs-tab,.hs-card,.hs-mini{transition:none}
  .hs-tools__art-canvas{transition:none !important}
  .hs-tools__spec{display:none !important}
  .hs-marquee__viewport{height:auto;padding:var(--space-1) var(--space-2);-webkit-mask-image:none;mask-image:none}
  .hs-marquee__track{animation:none;flex-wrap:wrap}
  .hs-marquee__track[aria-hidden="true"]{display:none}
}

/* HS-INTERACTIONS v2 start */
/* Chips: emoji + nombre + "• etiqueta" (como el mockup) */
.hs-chip{align-items:center;gap:8px;padding:8px 16px}
.hs-emoji{display:inline-block;flex:none;font-size:1.15em;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.hs-chip__tag::before{content:"• "}

/* Header de proyectos */
.hs-head__icon svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Frase: slider chip + tendencia ---------- */
.hs-slider,.hs-trend{display:inline-flex;align-items:center;vertical-align:middle;margin-inline:.14em;font-size:.8em;
  background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-pill);box-shadow:var(--shadow-soft);
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.hs-slider{justify-content:space-between;gap:.2em;width:2.3em;height:1.1em;padding:0 .2em 0 .28em}
.hs-slider__l{display:grid;gap:.14em;width:.95em}
.hs-slider__l i{display:block;height:.1em;border-radius:var(--radius-pill);background:var(--color-surface-strong)}
.hs-slider__l i:first-child{width:62%;background:var(--color-accent)}
.hs-slider b{display:block;width:.72em;height:.46em;border-radius:var(--radius-pill);background:var(--color-text)}
.hs-trend{justify-content:center;width:1.6em;height:1.1em}
.hs-trend svg{width:.78em;height:.78em;fill:none;stroke:var(--color-accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hs-who__title:hover .hs-slider{transform:rotate(-5deg) scale(1.08)}
.hs-who__title:hover .hs-trend{transform:rotate(5deg) scale(1.08)}



/* ---------- "Ver CV": tags que salen volando + nota a mano ---------- */
.hs-tip{position:relative;display:inline-flex}
.hs-tip__fly{position:absolute;left:50%;top:50%;z-index:6;width:3.5rem;height:3.5rem;display:grid;place-items:center;
  border-radius:var(--radius-md);font:700 .8rem/1 var(--font-ui);box-shadow:var(--shadow-hover);
  pointer-events:none;opacity:0;--tx:0px;--ty:0px;--tr:0deg;--d:0ms;
  transform:translate(-50%,-50%) scale(.3);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1) var(--d),opacity .2s ease var(--d)}
.hs-tip__fly--gem{background:var(--color-accent);color:var(--color-bg);--tx:-82px;--ty:-46px;--tr:-12deg;--d:0ms}
.hs-tip__fly--py{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);--tx:-6px;--ty:-64px;--tr:9deg;--d:50ms}
.hs-tip__fly--n8n{background:var(--color-accent-deep);color:var(--color-bg);--tx:-108px;--ty:4px;--tr:-6deg;--d:100ms}
.hs-tip__fly--sql{background:var(--color-text);color:var(--color-bg);--tx:-60px;--ty:48px;--tr:7deg;--d:150ms}
.hs-tip__note{position:absolute;left:46%;top:calc(100% + 12px);z-index:6;white-space:nowrap;pointer-events:none;
  font:400 1.35rem/1.1 "Caveat","Segoe Print","Bradley Hand",cursive;color:var(--color-text);
  opacity:0;transform:translateY(-6px) rotate(-5deg);transition:opacity .25s ease .2s,transform .4s cubic-bezier(.16,1,.3,1) .2s}
.hs-tip:hover .hs-tip__fly,.hs-tip:focus-within .hs-tip__fly{opacity:1;
  transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) rotate(var(--tr)) scale(1)}
.hs-tip:hover .hs-tip__note,.hs-tip:focus-within .hs-tip__note{opacity:1;transform:translateY(0) rotate(-5deg)}
.hs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:560px){ .hs-tip__fly{display:none} .hs-tip__note{left:0} }
@media (prefers-reduced-motion:reduce){
  .hs-mc,.hs-tip__fly,.hs-tip__note,.hs-slider,.hs-trend{transition:none}
}
/* HS-INTERACTIONS v2 end */


/* ===== FIX: texto legible en estados hover/active + brillo ===== */

/* 1) Forzar el color en TODOS los estados del link (gana a a:hover de base.css) */
.hs-mini,
.hs-mini:link,
.hs-mini:visited,
.hs-mini:hover,
.hs-mini:focus-visible,
.hs-mini:active { color: var(--color-bg); }

.hs-card__link,
.hs-card__link:link,
.hs-card__link:visited,
.hs-card__link:hover,
.hs-card__link:focus-visible,
.hs-card__link:active { color: inherit; }

/* 2) Más contraste en el texto secundario */
.hs-mini__kicker { opacity: .8; }
.hs-mini__title  { text-shadow: 0 1px 0 color-mix(in srgb, var(--color-text) 60%, transparent); }

/* 3) Brillo: destello que cruza la card + halo de color */
.hs-mini {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.hs-mini::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%,
              color-mix(in srgb, var(--color-bg) 24%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.hs-mini:hover,
.hs-mini:focus-visible {
  background: var(--color-accent-deep);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 70%, transparent),
              0 10px 30px color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.hs-mini:hover::before,
.hs-mini:focus-visible::before { transform: translateX(120%); }
.hs-mini:hover .hs-mini__title,
.hs-mini:focus-visible .hs-mini__title {
  text-shadow: 0 0 14px color-mix(in srgb, var(--color-bg) 45%, transparent);
}
.hs-mini:active { background: var(--color-accent); transform: translateY(-1px) scale(.99); }
.hs-mini:hover .hs-mini__arrow { transform: translate(2px, -2px); opacity: 1; }
.hs-mini__arrow { transition: transform .25s ease, opacity .25s ease; }

@media (prefers-reduced-motion: reduce) {
  .hs-mini::before { display: none; }
  .hs-mini, .hs-mini__arrow { transition: none; }
}

/* HS-BTN-FIX start */
/* 1) Forzar color de texto en todos los estados para botones sólidos carmín */
a.btn-primary, a.btn-primary:link, a.btn-primary:visited,
a.btn-primary:hover, a.btn-primary:focus-visible, a.btn-primary:active,
button.btn-primary, button.btn-primary:hover, button.btn-primary:active,
a.bg-carmine, a.bg-carmine:link, a.bg-carmine:visited,
a.bg-carmine:hover, a.bg-carmine:focus-visible, a.bg-carmine:active {
  color: var(--color-bg);
}

/* En dark mode, asegurar alto contraste en hover para botones sólidos */
html[data-theme="dark"] a.btn-primary:hover,
html[data-theme="dark"] a.btn-primary:focus-visible,
html[data-theme="dark"] a.bg-carmine:hover,
html[data-theme="dark"] a.bg-carmine:focus-visible {
  color: var(--color-text);
}

/* 2) Forzar color de texto en todos los estados para botones secundarios/outline */
a.btn-secondary, a.btn-secondary:link, a.btn-secondary:visited,
a.btn-secondary:hover, a.btn-secondary:focus-visible, a.btn-secondary:active,
button.btn-secondary, button.btn-secondary:hover, button.btn-secondary:active,
#hero a.text-truffle, #hero a.text-truffle:link, #hero a.text-truffle:visited,
#hero a.text-truffle:hover, #hero a.text-truffle:focus-visible, #hero a.text-truffle:active,
#contact a.text-truffle, #contact a.text-truffle:link, #contact a.text-truffle:visited,
#contact a.text-truffle:hover, #contact a.text-truffle:focus-visible, #contact a.text-truffle:active {
  color: var(--color-text);
}

/* 3) Brillo sutil y estados hover/foco para botones sólidos */
.btn-primary, a.bg-carmine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary svg, a.bg-carmine svg {
  stroke: currentColor;
}
.btn-primary::before, a.bg-carmine::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%,
    color-mix(in srgb, var(--color-bg) 26%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
.btn-primary:hover, .btn-primary:focus-visible,
a.bg-carmine:hover, a.bg-carmine:focus-visible {
  background: var(--color-accent-deep);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 70%, transparent),
              0 8px 26px color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.btn-primary:hover::before, .btn-primary:focus-visible::before,
a.bg-carmine:hover::before, a.bg-carmine:focus-visible::before {
  transform: translateX(120%);
}
.btn-primary:active, a.bg-carmine:active {
  background: var(--color-accent);
  transform: scale(.98);
}

/* 4) Anillo de foco accesible */
.btn-primary:focus-visible, a.bg-carmine:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}
.btn-secondary:focus-visible,
#hero a.text-truffle:focus-visible,
#contact a.text-truffle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary::before, a.bg-carmine::before { display: none; }
  .btn-primary, a.bg-carmine { transition: none; }
}
/* HS-BTN-FIX end */


/* Watermark con textos largos (evita recorte en pantallas estrechas) */
.section-watermark--long {
  font-size: clamp(1.8rem, 7vw, 7.5rem);
}

/* ==========================================================================
   SECCIÓN: METODOLOGÍA ("Cómo trabajo") — Tarea 3
   Integración directa sobre fondo de página, línea de luz animada,
   teselas decorativas y franja de cifras unificada.
   ========================================================================== */

.hs-method {
  position: relative;
  padding-block: var(--space-16, 5rem);
  background: transparent;
  color: var(--color-text);
  overflow: hidden;
  --tile-px: 0;
  --tile-py: 0;
}

.hs-method__wrap {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin-inline: auto;
}

/* 1. Encabezado Centrado */
.hs-method__head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto var(--space-12, 3.5rem);
}

.hs-method__eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-3, var(--color-muted));
  margin: 0 0 var(--space-3, 0.75rem);
}

.hs-method__title {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-text);
  margin: 0;
  text-align: center;
}

.hs-method__title-l1 {
  display: block;
  font-family: inherit;
  font-weight: inherit;
}

.hs-method__title-l2 {
  display: inline-block;
  position: relative;
  font-family: inherit;
  font-weight: inherit;
  margin-top: 4px;
}

.hs-method__em {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--inverse-accent, #D36A76) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: currentColor;
}

.hs-method__underline {
  display: none !important;
}

.hs-method.is-visible .hs-method__underline {
  transform: scaleX(1);
}

/* 2. Timeline de Pasos */
.hs-method__timeline {
  position: relative;
  margin: var(--space-8, 2.5rem) 0 var(--space-12, 3.5rem);
  min-height: 220px;
}

/* Riel y Luz viajera */
.hs-method__rail {
  position: absolute;
  top: 74px; /* Altura donde están centrados los dots de los steps en desktop */
  left: 10%;
  width: 80%;
  height: 2px;
  z-index: 1;
  pointer-events: none;
}

.hs-method__rail-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--color-border);
}

.hs-method__rail-fill {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  top: 0;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent) 85%, transparent 100%);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.hs-method__light {
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px 3px var(--color-accent), 0 0 24px 6px rgba(127, 15, 29, 0.45);
  transform: translateX(0);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  will-change: transform, opacity;
}

html[data-theme="dark"] .hs-method__light {
  box-shadow: 0 0 12px 4px var(--color-accent), 0 0 28px 8px rgba(211, 106, 118, 0.45);
}

/* Grilla de los 5 pasos */
.hs-method__steps {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2, 0.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hs-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-2, 0.5rem);
  min-width: 0;
}

.hs-step__aura {
  position: absolute;
  top: 36px;
  left: 50%;
  width: 110px;
  height: 110px;
  margin-left: -55px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 15, 29, 0.22) 0%, rgba(127, 15, 29, 0) 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

html[data-theme="dark"] .hs-step__aura {
  background: radial-gradient(circle, rgba(211, 106, 118, 0.25) 0%, rgba(211, 106, 118, 0) 70%);
}

.hs-step__num {
  position: relative;
  z-index: 1;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  color: var(--color-text);
  margin-bottom: var(--space-3, 0.75rem);
}

.hs-step__node {
  position: relative;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  z-index: 2;
  margin-bottom: var(--space-3, 0.75rem);
}

.hs-step__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.hs-step.is-lit .hs-step__dot {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(127, 15, 29, 0.16), 0 0 14px 2px rgba(127, 15, 29, 0.5);
  transform: scale(1.15);
}

html[data-theme="dark"] .hs-step.is-lit .hs-step__dot {
  box-shadow: 0 0 0 4px rgba(211, 106, 118, 0.2), 0 0 16px 3px rgba(211, 106, 118, 0.55);
}

.hs-step__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--color-text);
  margin: 0 0 var(--space-1, 0.25rem);
}

.hs-step__desc {
  position: relative;
  z-index: 1;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-muted);
  margin: 0;
  max-width: 14rem;
}

/* Estado oculto previo solo cuando JS arma la animación */
.hs-method.is-armed .hs-step__num,
.hs-method.is-armed .hs-step__title,
.hs-method.is-armed .hs-step__desc {
  opacity: 0;
  transform: translateY(14px);
}

/* 3. Divisor fino */
.hs-method__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-12, 3rem) 0 var(--space-8, 2rem);
  width: 100%;
}

/* 4. Franja de cifras */
.hs-method__stats {
  text-align: center;
}

.hs-method__stats-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6, 1.5rem);
  max-width: 52rem;
  margin: 0 auto;
}

.hs-stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hs-stat__num {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(2.5rem, 4.5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  color: var(--color-accent);
  margin-bottom: var(--space-1, 0.25rem);
}

.hs-stat__infinity {
  font-weight: 500;
  line-height: 0.95;
}

.hs-stat__label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text);
  opacity: 0.85;
  max-width: 14rem;
}

.hs-stat__sep {
  flex: 0 0 1px;
  height: 52px;
  background: var(--color-border);
}

.hs-method__skills {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--color-text-2, var(--color-muted));
  text-align: center;
  margin: var(--space-6, 1.5rem) auto 0;
}

/* 5. Teselas flotantes ("Built with the technology") */
.hs-method__tiles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.hs-method__tile {
  position: absolute;
  left: var(--tile-x, 0);
  top: var(--tile-y, 0);
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md, 12px);
  background: var(--color-paper, var(--color-surface));
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  color: var(--color-text);
  display: grid;
  place-items: center;
  will-change: transform;
  animation: hsTileFloat var(--float-dur, 8s) ease-in-out infinite alternate var(--float-del, 0s);
  transform: translate(calc(var(--tile-px, 0) * 8px), calc(var(--tile-py, 0) * 8px));
  transition: transform 0.4s var(--ease-out);
  opacity: 0.85;
}

.hs-method__tile svg {
  width: 22px;
  height: 22px;
}

html[data-theme="dark"] .hs-method__tile {
  background: var(--color-surface-strong);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  opacity: 0.75;
}

@keyframes hsTileFloat {
  0% { transform: translateY(-5px); }
  100% { transform: translateY(5px); }
}

/* Responsive (<720px) */
@media (max-width: 719px) {
  .hs-method {
    padding-block: var(--space-10, 3rem);
  }
  
  .hs-method__head {
    margin-bottom: var(--space-8, 2rem);
  }
  
  .hs-method__timeline {
    position: relative;
    padding-left: 48px;
  }
  
  /* Pista vertical */
  .hs-method__rail {
    left: 20px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    height: auto;
  }
  
  .hs-method__rail-track {
    width: 1px;
    height: 100%;
  }
  
  .hs-method__rail-fill {
    width: 2px;
    height: 100%;
    transform-origin: top center;
    transform: scaleY(0);
    background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent) 85%, transparent 100%);
  }
  
  .hs-method__light {
    top: 0;
    left: 50%;
    margin: -6px 0 0 -6px;
    transform: translateY(0);
  }
  
  .hs-method__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 1.5rem);
  }
  
  .hs-step {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    text-align: left;
    padding: 0;
    position: relative;
  }
  
  .hs-step__aura {
    display: none;
  }
  
  .hs-step__node {
    position: absolute;
    left: -38px;
    top: 4px;
    margin: 0;
  }
  
  .hs-step__num {
    font-size: 1.75rem;
    margin-right: var(--space-3, 0.75rem);
    margin-bottom: 0;
  }
  
  .hs-step__title {
    font-size: 1.15rem;
    margin: 0;
  }
  
  .hs-step__desc {
    width: 100%;
    max-width: none;
    margin-top: 4px;
  }
  
  /* Cifras en mobile: columna vertical */
  .hs-method__stats-grid {
    flex-direction: column;
    gap: var(--space-4, 1rem);
  }
  
  .hs-stat__sep {
    display: none;
  }
  
  /* En pantallas <720px mostrar solo 6 teselas sin animación */
  .hs-method__tile:nth-child(n+7) {
    display: none !important;
  }
  .hs-method__tile {
    animation: none !important;
    transform: none !important;
    opacity: 0.45;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .hs-method__underline {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .hs-method__rail-fill {
    transform: scaleX(1) !important;
  }
  .hs-method__light {
    display: none !important;
  }
  .hs-step__dot {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    transition: none !important;
  }
  .hs-method.is-armed .hs-step__num,
  .hs-method.is-armed .hs-step__title,
  .hs-method.is-armed .hs-step__desc {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hs-method__tile {
    animation: none !important;
    transform: none !important;
  }
}