/* Punto de Inflexión — podcast de SINAV
   Design tokens, resets and responsive layout.
   Type: Open Sans (official substitute for Gotham per the SINAV brand manual).
   Palette: only the manual's HEX values + oklch derivations of them. */

:root{
  --bg:#0f1027;
  --surface:oklch(0.235 0.052 279);
  --navy:#0e2356;
  --blue:#2264dc;
  --acc:#1a4cff;
  --sky:#5a8cff;
  --grit:oklch(0.7 0.03 272);
  --ink:#f5f5f5;
  --graphite:#1b1b1b;
  --body:oklch(0.885 0.018 272);
  --muted:oklch(0.685 0.034 272);
  --line:color-mix(in oklab, #5a8cff 17%, transparent);
  --line-soft:color-mix(in oklab, #5a8cff 9%, transparent);
  --pad:clamp(42px, 5vw, 66px);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--body);
  font-family:'Open Sans',system-ui,sans-serif;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--sky);text-decoration:none;}
a:hover{color:var(--ink);}
img{display:block;max-width:100%;}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:2px;}
@keyframes traza{to{stroke-dashoffset:0;}}
@keyframes marca{0%{opacity:0;transform:scale(.3);}70%{opacity:1;transform:scale(1.25);}100%{opacity:1;transform:scale(1);}}
@keyframes logoIn{0%{opacity:0;transform:translateY(22px) scale(.97);}100%{opacity:1;transform:translateY(0) scale(1);}}
.hero-logo{animation:logoIn .9s cubic-bezier(.4,0,.3,1) forwards;}
@keyframes trussDrop{0%{opacity:0;transform:translateY(-100%);}100%{opacity:1;transform:translateY(0);}}
.stage-truss{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:2;
  width:100%;
  overflow:hidden;
  pointer-events:none;
  animation:trussDrop 1.1s cubic-bezier(.34,1.56,.64,1) forwards;
}
.stage-truss img{display:block;width:100%;height:auto;}

/* --- Floating decorative props: podcast-themed cutouts, ambient drift ---
   (see index.html — headphones in the hero background, sound-wave and
   ON AIR sign as foreground accents). Independent of scroll, unlike the
   mic-prop in "Conduce" — a slow continuous float instead. */
@keyframes floatDrift{
  0%,100%{transform:translateY(0) rotate(-3deg);}
  50%{transform:translateY(-16px) rotate(3deg);}
}
.float-prop{
  pointer-events:none;
  animation:floatDrift 6s ease-in-out infinite;
}

/* --- Background props: partially hidden behind opaque panels (inserted
   before them in the DOM, so the panels paint over the middle), blurred,
   with a slow breathing scale instead of the foreground props' drift. --- */
@keyframes floatPulse{
  0%,100%{transform:scale(.85) translateY(0);}
  50%{transform:scale(1.08) translateY(-14px);}
}
.float-prop-bg{
  position:absolute;
  pointer-events:none;
  filter:blur(3px);
  opacity:.55;
  animation:floatPulse 8s ease-in-out infinite;
}
.concept-bg-cassette{
  top:clamp(-46px,-4vw,-16px);
  left:clamp(-46px,-4vw,-16px);
  width:clamp(140px,15vw,220px);
  aspect-ratio:712/664;
  object-fit:cover;
  object-position:49.6% 49%;
  animation-duration:9s;
}
.concept-bg-vinyl{
  bottom:clamp(-46px,-4vw,-16px);
  right:clamp(-46px,-4vw,-16px);
  width:clamp(150px,16vw,240px);
  aspect-ratio:684/520;
  object-fit:cover;
  object-position:50.2% 43.8%;
  animation-duration:10.5s;
  animation-delay:-4s;
}
.footer-bg-cassette{
  top:clamp(-30px,-3vw,-8px);
  left:clamp(-10px,4vw,60px);
  width:clamp(90px,9vw,140px);
  aspect-ratio:712/664;
  object-fit:cover;
  object-position:49.6% 49%;
  animation-duration:7.5s;
  animation-delay:-2s;
}
@media (max-width:820px){
  .concept-bg-cassette,.concept-bg-vinyl,.footer-bg-cassette{display:none;}
}
.hero-headphones{
  position:absolute;
  left:clamp(-20px,2vw,40px);
  top:24%;
  width:clamp(130px,16vw,250px);
  aspect-ratio:684/760;
  object-fit:cover;
  object-position:50% 46%;
  z-index:0;
  opacity:.5;
  filter:drop-shadow(0 16px 28px rgba(4,8,24,.4));
  animation-duration:7.5s;
}
.episodes-wave{
  position:absolute;
  top:clamp(-10px,1vw,10px);
  left:clamp(-10px,1vw,20px);
  width:clamp(150px,18vw,280px);
  aspect-ratio:712/556;
  object-fit:cover;
  object-position:50% 49%;
  z-index:0;
  filter:drop-shadow(0 16px 28px rgba(4,8,24,.45));
  animation-duration:5.5s;
  animation-delay:-1.2s;
}
.paraquien-onair{
  position:absolute;
  top:clamp(-16px,0vw,4px);
  right:clamp(-10px,1.5vw,24px);
  width:clamp(160px,19vw,300px);
  aspect-ratio:5/4;
  z-index:0;
  filter:drop-shadow(0 16px 28px rgba(4,8,24,.45));
  animation-duration:6.8s;
  animation-delay:-3s;
}
.onair-sign{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .5s ease;
}
.onair-sign.is-off{
  object-position:48.9% 48.4%;
  opacity:1;
}
.onair-sign.is-on{
  object-position:50% 49.8%;
  opacity:0;
}
[data-onair-switch].is-live .onair-sign.is-off{opacity:0;}
[data-onair-switch].is-live .onair-sign.is-on{opacity:1;
}
@media (max-width:820px){
  .hero-headphones,.episodes-wave,.paraquien-onair{display:none;}
}

/* --- "Seguí el podcast": real recording-set photo, blurred and blue-toned,
   behind the existing curve + content. Overlay keeps text contrast. --- */
.seguir-bg-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 38%;
  filter:blur(7px) saturate(1.15);
  transform:scale(1.1);
  z-index:0;
}
.seguir-bg-overlay{
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(160deg, color-mix(in oklab, var(--navy) 82%, transparent) 0%, color-mix(in oklab, var(--acc) 45%, var(--navy) 80%) 100%);
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
  [data-traza]{stroke-dashoffset:0 !important;}
  [data-marca]{opacity:1 !important;}
  .pulse-point{transform:none !important;}
  .curve-box{transform:none !important;}
  .hero-logo{opacity:1 !important;transform:none !important;}
  .stage-truss{opacity:1 !important;transform:none !important;}
}


/* ============================================================
   Responsive layout
   In the design prototype these rules were applied by JS after
   measuring the viewport. Here they are plain media queries.
   !important is required because the markup carries the mobile
   baseline as inline styles.
   ============================================================ */

/* --- Header nav: collapses into a menu below 700px --- */
.nav-toggle { display: none; }
.nav-toggle-btn {
  list-style: none;
  cursor: pointer;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
  flex-shrink: 0;
}
.nav-toggle-btn::-webkit-details-marker { display: none; }
.nav-toggle-btn:hover,
.nav-toggle-btn:focus-visible { border-color: var(--sky); color: var(--sky); }
.nav-toggle-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: clamp(20px, 4vw, 36px);
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 20px 22px;
  box-shadow: 0 24px 48px rgba(4, 6, 20, .45);
}
@media (max-width: 699px) {
  .nav-links { display: none !important; }
  .nav-toggle { display: block; position: relative; }
}

/* --- "Conduce" panel: photo breaks out over the top edge --- */
@media (min-width: 760px) {
  [data-host-panel] {
    display: grid !important;
    grid-template-columns: clamp(240px, 26vw, 330px) minmax(0, 1fr) !important;
    gap: clamp(56px, 7vw, 104px) !important;
    align-items: end !important;
    padding: 32px clamp(28px, 3.6vw, 52px) !important;
    overflow: visible !important;
  }
  [data-host-photo] {
    width: 100% !important;
    height: auto !important;
    align-self: end !important;
    margin: calc(-1 * clamp(36px, 4.4vw, 62px)) 0 -32px 0 !important;
  }
  [data-host-text] {
    align-self: center !important;
  }
}

/* --- Episode cards --- */
@media (max-width: 879px) {
  [data-ep-thumb] {
    width: min(240px, 62%) !important;
    margin-inline: auto !important;
  }
}
@media (min-width: 880px) {
  [data-ep-inner] {
    grid-template-columns: clamp(200px, 20vw, 248px) minmax(0, 1fr) auto !important;
  }
  [data-ep-actions] { flex-direction: column !important; }
}

/* --- "De qué hablamos": Inicios | hinge | Crecimiento --- */
@media (min-width: 900px) {
  [data-concept-grid] {
    grid-template-columns: minmax(0, 1fr) clamp(150px, 15vw, 206px) minmax(0, 1fr) !important;
  }
}
@media (max-width: 899px) {
  /* the hinge axis turns horizontal when the trio stacks */
  [data-axis] {
    width: min(180px, 42%) !important;
    height: 2px !important;
    min-height: 2px !important;
    flex: 0 0 auto !important;
  }
}

/* --- Scroll reveal (see app.js) ---
   [data-stagger] groups (Inicios/hinge/Crecimiento, episode cards, perfiles)
   get an incremental transition-delay via the --stagger-i custom property,
   set by app.js on each grouped [data-reveal] child. */
[data-reveal].is-pending { opacity: 0; transform: translateY(18px); }
[data-reveal] {
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: min(calc(var(--stagger-i, 0) * 100ms), 500ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal].is-pending { opacity: 1; transform: none; }
}

/* --- "Conduce": decorative mic prop, top-right. Reuses [data-reveal]/
   .is-pending (see app.js) with its own slower, right-to-left entrance
   instead of the default rise. Hidden below 960px — no room beside the
   centered title once things stack. --- */
.mic-prop {
  position: absolute;
  top: clamp(-50px, -3.5vw, 16px);
  right: clamp(-90px, -9vw, -22px);
  width: clamp(300px, 34vw, 500px);
  aspect-ratio: 1140 / 822;
  object-fit: cover;
  object-position: 57% 53%;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 20px 34px rgba(4,8,24,.5));
  transition: opacity .18s linear, transform .18s linear;
}
@media (max-width: 959px) {
  .mic-prop { display: none; }
}

/* --- "Punto de Inflexión" marker: grows continuously with how much of
   the hinge panel is in view (see app.js — IntersectionObserver with a
   threshold ladder, not a scroll/rAF loop). --- */
.pulse-point {
  transform-box: fill-box;
  transform-origin: center;
}

/* --- Nav: active section (see app.js) --- */
.nav-links a.is-active,
.nav-toggle-panel a.is-active {
  color: var(--ink) !important;
}

/* --- Hero curve: parallax target (see app.js) --- */
.curve-box { will-change: transform; }

/* ============================================================
   Hover / focus states
   Authored as per-element pseudo-state styles in the prototype.
   ============================================================ */
.hv-1:hover,
.hv-1:focus-visible {
  color: var(--ink) !important;
}

.hv-2:hover,
.hv-2:focus-visible {
  color: var(--ink) !important;
}

.hv-3:hover,
.hv-3:focus-visible {
  color: var(--ink) !important;
}

.hv-4:hover,
.hv-4:focus-visible {
  background: var(--acc) !important;
  color: #fff !important;
}

.hv-5:hover,
.hv-5:focus-visible {
  background: var(--acc) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

.hv-6:hover,
.hv-6:focus-visible {
  border-color: var(--sky) !important;
  color: var(--sky) !important;
  transform: translateY(-2px) !important;
}

.hv-7:hover,
.hv-7:focus-visible {
  background: var(--acc) !important;
  color: #fff !important;
}

.hv-8:hover,
.hv-8:focus-visible {
  border-color: var(--sky) !important;
  color: var(--sky) !important;
}

.hv-9:hover,
.hv-9:focus-visible {
  background: var(--acc) !important;
  color: #fff !important;
}

.hv-10:hover,
.hv-10:focus-visible {
  border-color: var(--sky) !important;
  color: var(--sky) !important;
}

.hv-11:hover,
.hv-11:focus-visible {
  border-color: var(--sky) !important;
  color: var(--sky) !important;
  transform: translateY(-2px) !important;
}

.hv-12:hover,
.hv-12:focus-visible {
  border-color: var(--sky) !important;
  color: var(--sky) !important;
  transform: translateY(-2px) !important;
}

.hv-13:hover,
.hv-13:focus-visible {
  border-color: var(--sky) !important;
  color: var(--sky) !important;
  transform: translateY(-2px) !important;
}

.hv-14:hover,
.hv-14:focus-visible {
  border-color: var(--sky) !important;
  color: var(--sky) !important;
  transform: translateY(-2px) !important;
}

.hv-15:hover,
.hv-15:focus-visible {
  background: var(--acc) !important;
  border-color: var(--acc) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}

.hv-16:hover,
.hv-16:focus-visible {
  border-color: var(--sky) !important;
  color: var(--sky) !important;
  transform: translateY(-2px) !important;
}

.hv-17:hover,
.hv-17:focus-visible {
  border-color: var(--sky) !important;
  color: var(--sky) !important;
  transform: translateY(-2px) !important;
}

.hv-18:hover,
.hv-18:focus-visible {
  border-color: var(--sky) !important;
  color: var(--sky) !important;
  transform: translateY(-2px) !important;
}

.hv-19:hover,
.hv-19:focus-visible {
  border-color: var(--sky) !important;
  color: var(--sky) !important;
  transform: translateY(-2px) !important;
}

.hv-20:hover,
.hv-20:focus-visible {
  color: var(--sky) !important;
}

.hv-21:hover,
.hv-21:focus-visible {
  background: var(--acc) !important;
  color: #fff !important;
}

.hv-22:hover,
.hv-22:focus-visible {
  border-color: var(--sky) !important;
  color: var(--sky) !important;
}