/* CAP III · PULSO — reloj de relojería editorial · DD_016 */

.pulso-section {
  background: var(--paper);
}

.pulso {
  --ruby-pulse: rgba(157, 38, 49, 0.86);
  position: relative;
  max-width: 1728px;
  margin: 0 auto;
  padding: clamp(48px, 7vh, 96px) clamp(28px, 5vw, 96px) clamp(64px, 9vh, 116px);
  color: var(--ink);
  font-family: var(--font-body);
  overflow: hidden;
}

.pulso__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.52;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

.pulso > *:not(.pulso__grain) {
  position: relative;
  z-index: 1;
}

.pulso__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  gap: clamp(28px, 4vw, 72px);
  align-items: end;
}

.pulso__eyebrow,
.pulso-panel__eyebrow,
.pulso-panel__label,
.pulso-ledger__item > p:first-child,
.pulso__signature {
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pulso__eyebrow {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.pulso__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(2.5rem, 4.8vw, 5.35rem);
  line-height: 1.03;
}

.pulso__time { display: block; }
.pulso__time--future { color: var(--brand-349c); }

.pw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.pw__i { display: inline-block; }

.pulso__lead {
  max-width: 43ch;
  font-size: clamp(1rem, 1.2vw, 1.25rem);
  line-height: 1.55;
  font-style: italic;
  color: var(--ink-soft);
}

.pulso__body {
  position: relative;
  min-height: clamp(360px, 50vh, 560px);
  margin-top: clamp(32px, 5vh, 64px);
}

.pulso-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.pulso-link {
  fill: none;
  stroke: var(--brand-349c);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 0.25;
  vector-effect: non-scaling-stroke;
}

.pulso-link--ruby {
  stroke: var(--ruby-pulse);
  opacity: 0.3;
}

.reloj-wrap {
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

.reloj {
  width: clamp(260px, 22vw, 380px);
  height: auto;
  overflow: visible;
}

.reloj__shadow { fill: var(--ink); opacity: 0.1; }
.reloj__bezelOut { fill: none; stroke: var(--ink); stroke-width: 2.4; }
.reloj__knurl { fill: none; stroke: var(--ink-soft); stroke-width: 13; stroke-dasharray: 1.5 6.5; opacity: 0.5; }
.reloj__dial { stroke: var(--rule); stroke-width: 1; }
.reloj__zoneFill { opacity: 0.08; }
.reloj__zoneFill--i { fill: var(--brand-349c); }
.reloj__zoneFill--ii { fill: var(--ink-soft); }
.reloj__zoneFill--iii { fill: var(--ruby-pulse); }
.reloj__teeth { fill: none; stroke: var(--ink); stroke-width: 5; stroke-dasharray: 2 4.6; }
.reloj__gearBody { fill: #f1ebdf; stroke: var(--ink-soft); stroke-width: 1; }
.reloj__hub { fill: none; stroke: var(--ink-soft); stroke-width: 1; }
.reloj__gear { transform-box: fill-box; transform-origin: center; }
.reloj__gearLabel { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.04em; fill: var(--ink-soft); text-anchor: middle; }
.reloj__transmit { fill: none; stroke: var(--ruby-pulse); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.5; }
.reloj__hand { fill: var(--ink); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.reloj__pomme { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.reloj__subRing { fill: #f1ece1; stroke: var(--ink-soft); stroke-width: 1.2; }
.reloj__subdial line { stroke: var(--ink-soft); stroke-width: 1; }
.reloj__seconds { transform-box: fill-box; transform-origin: center; }
.reloj__seconds line { stroke: var(--ruby-pulse); stroke-width: 1.4; stroke-linecap: round; }
.reloj__subHub { fill: var(--ink); }
.reloj__rubyHalo { fill: var(--ruby-pulse); opacity: 0.18; transform-box: fill-box; transform-origin: center; }
.reloj__ruby { fill: url(#rubyGrad); stroke: #6c1620; stroke-width: 0.8; }
.reloj__rubyFacet { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 0.5; }
.reloj__rubyHi { fill: #fff; opacity: 0.6; }
.reloj__axis { transform-box: fill-box; transform-origin: center; }
.reloj__crown { transform-box: fill-box; transform-origin: center; }
.reloj__crownBody { fill: #e6dfd1; stroke: var(--ink-soft); stroke-width: 1.2; }
.reloj__crownTeeth,
.reloj__crownStem { stroke: var(--ink-soft); stroke-width: 1; }
.reloj__windGlow { fill: var(--gold, #C79A45); opacity: 0; }

.reloj__caption {
  margin-top: 16px;
  max-width: 44ch;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.45;
}

.pulso-sat {
  position: absolute;
  z-index: 3;
  width: clamp(180px, 14vw, 244px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: transform 0.25s var(--ease-brand), opacity 0.35s var(--ease-brand);
}

.pulso-sat--right { text-align: right; align-items: flex-end; }
.pulso-sat--left { text-align: left; align-items: flex-start; }
.pulso-sat--down { text-align: center; align-items: center; width: clamp(170px, 13vw, 220px); }
.pulso-sat[data-pulso-reflect="1"] { left: 4%; top: 8%; }
.pulso-sat[data-pulso-reflect="2"] { left: 3%; top: 37%; }
.pulso-sat[data-pulso-reflect="3"] { left: 5%; top: 66%; }
.pulso-sat[data-pulso-reflect="4"] { right: 4%; top: 8%; }
.pulso-sat[data-pulso-reflect="5"] { right: 3%; top: 37%; }
.pulso-sat[data-pulso-reflect="6"] { right: 5%; top: 66%; }
.pulso-sat[data-pulso-reflect="7"] { left: 23%; bottom: 2%; }
.pulso-sat[data-pulso-reflect="8"] { left: 50%; bottom: 0; transform: translateX(-50%); }
.pulso-sat[data-pulso-reflect="9"] { right: 23%; bottom: 2%; }

.pulso-sat__seal {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brand-349c);
}

.pulso-sat__figure {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.35rem, 2vw, 2.35rem);
  line-height: 1.02;
}

.pulso-sat__line {
  max-width: 28ch;
  font-size: 0.86rem;
  line-height: 1.42;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pulso-sat:hover,
.pulso-sat:focus-visible {
  transform: translateY(-7px);
  outline: none;
}
.pulso-sat[data-pulso-reflect="8"]:hover,
.pulso-sat[data-pulso-reflect="8"]:focus-visible {
  transform: translateX(-50%) translateY(-7px);
}

.pulso-sat:hover .pulso-sat__figure,
.pulso-sat:focus-visible .pulso-sat__figure {
  color: var(--brand-349c);
}

.pulso__body.is-focused .pulso-sat,
.pulso__body.is-focused .pulso-links,
.pulso__body.is-focused .reloj-wrap {
  opacity: 0.18;
}

.pulso-panel {
  position: fixed;
  inset: 8vh 6vw auto;
  max-height: 84vh;
  z-index: 20;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 52px);
  background: linear-gradient(180deg, var(--brand-349c-dark), #032f1c);
  color: var(--paper);
  box-shadow: 0 32px 80px rgba(3, 27, 16, 0.24);
}
.pulso-panel[hidden] { display: none; }

.pulso-panel__back,
.pulso-panel__more {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.78);
}

.pulso-panel__back:hover,
.pulso-panel__more:hover,
.pulso-panel__back:focus-visible,
.pulso-panel__more:focus-visible {
  color: var(--gold, #C79A45);
}

.pulso-panel__grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(320px, 1.2fr);
  gap: clamp(28px, 5vw, 80px);
  margin-top: 28px;
}

.pulso-panel__eyebrow {
  font-size: 0.72rem;
  color: var(--gold, #C79A45);
}

.pulso-panel__figure {
  margin-top: 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 0.96;
}

.pulso-panel__cara {
  margin-top: 22px;
  max-width: 42ch;
  font-size: clamp(1rem, 1.25vw, 1.28rem);
  line-height: 1.5;
  color: rgba(245, 241, 232, 0.84);
}

.pulso-panel h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.65rem, 2.6vw, 3rem);
  line-height: 1.1;
  margin-bottom: 18px;
}

.pulso-panel [hidden] { display: none; }

.pulso-panel__label {
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(245, 241, 232, 0.7);
}

.pulso-panel__label--green {
  color: var(--gold, #C79A45);
}

.pulso-panel p:not(.pulso-panel__label):not(.pulso-panel__figure):not(.pulso-panel__cara):not(.pulso-panel__eyebrow) {
  font-size: 0.96rem;
  line-height: 1.58;
  color: rgba(245, 241, 232, 0.84);
  white-space: pre-line;
}

.pulso-ledger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 32px);
  margin-top: clamp(40px, 7vh, 88px);
}

.pulso-ledger__item {
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}

.pulso-ledger__item > p:first-child {
  font-size: 0.68rem;
  color: var(--brand-349c);
}

.pulso-ledger__item h3 {
  margin-top: 10px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 1.9vw, 2rem);
  line-height: 1.1;
}

.pulso-ledger__item p {
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.pulso-ledger summary {
  margin-top: 12px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-349c);
}

.pulso__overlay {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(56px, 8vh, 112px);
  background: var(--brand-349c-dark);
  color: var(--paper);
}

.pulso__closing {
  margin-top: clamp(48px, 7vh, 96px);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.75rem, 2.6vw, 3rem);
  line-height: 1.16;
}

.pulso__signature {
  margin-top: 22px;
  text-align: center;
  font-size: 0.68rem;
  color: var(--ink-soft);
}
.pulso__signature span { color: var(--ink); font-weight: 700; }

@media (max-width: 980px) {
  .pulso__head,
  .pulso-panel__grid,
  .pulso-ledger,
  .pulso__overlay {
    grid-template-columns: 1fr;
  }

  .pulso__body {
    min-height: 0;
    display: grid;
    gap: 12px;
  }

  .pulso-links {
    display: none;
  }

  .reloj-wrap,
  .pulso-sat,
  .pulso-sat[data-pulso-reflect="8"] {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
  }

  .reloj-wrap {
    justify-self: center;
    margin-bottom: 14px;
  }

  .reloj {
    width: min(100%, 430px);
  }

  .pulso-sat,
  .pulso-sat--right,
  .pulso-sat--down {
    text-align: left;
    align-items: flex-start;
    width: 100%;
    padding: 10px 0;
  }

  .pulso-sat:hover,
  .pulso-sat:focus-visible,
  .pulso-sat[data-pulso-reflect="8"]:hover,
  .pulso-sat[data-pulso-reflect="8"]:focus-visible {
    transform: translateY(-5px);
  }

  .pulso-panel {
    inset: 72px 18px 24px;
  }
}
