/* ============================================================
   Nicracan — Estilos específicos de la landing de Adiestramiento
   (triángulo del Método Vínculo, sección del fundador).
   El hero es un componente compartido — ver style.css.
   Requiere brand.css y style.css antes.
   ============================================================ */

.hero-seal{
  width:64px; height:64px; margin:0 auto 28px; opacity:0.95;
}
@media(min-width:900px){ .hero-seal{ width:80px; height:80px; margin-bottom:32px; } }

.recog-intro{max-width:680px;}

/* ================= triángulo: Método Vínculo ================= */
.triangle-diagram{
  position:relative; max-width:420px; margin:0 auto 8px; aspect-ratio:4/3;
}
@media(min-width:900px){ .triangle-diagram{max-width:480px;} }
.tri-svg{width:100%; height:100%; display:block; overflow:visible;}
.tri-line{
  stroke:var(--gold); stroke-width:1.3; stroke-linecap:round; fill:none;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.15s cubic-bezier(.16,.8,.28,1);
}
.tri-ring, .tri-node{ transform-box:fill-box; transform-origin:center; }
.tri-ring{
  fill:none; stroke:var(--gold); stroke-width:1.1; stroke-dasharray:3 4; opacity:0;
  transform:scale(.4);
  transition:opacity .5s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
}
.tri-node{
  fill:var(--gold-light); opacity:0; transform:scale(.4);
  transition:opacity .5s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
}
.tri-label{
  position:absolute; transform:translateX(-50%);
  font-family:'Oswald'; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold-light); white-space:nowrap; opacity:0;
  transition:opacity .6s ease;
}
@media(min-width:900px){ .tri-label{font-size:13px;} }
.tri-label-a{ left:17.5%; top:calc(83.33% + 14px); }
.tri-label-b{ left:82.5%; top:calc(83.33% + 14px); }
.tri-label-c{ left:50%; top:calc(20% - 28px); color:var(--gold); }

.triangle-diagram.in .tri-base{transition-delay:.05s;}
.triangle-diagram.in .tri-left, .triangle-diagram.in .tri-right{transition-delay:.4s;}
.triangle-diagram.in .tri-line{stroke-dashoffset:0;}
.triangle-diagram.in .tri-ring-a, .triangle-diagram.in .tri-node-a,
.triangle-diagram.in .tri-ring-b, .triangle-diagram.in .tri-node-b{
  opacity:1; transform:scale(1);
}
.triangle-diagram.in .tri-ring-c, .triangle-diagram.in .tri-node-c{
  opacity:1; transform:scale(1); transition-delay:1.3s;
}
.triangle-diagram.in .tri-label-a, .triangle-diagram.in .tri-label-b{
  opacity:1; transition-delay:.15s;
}
.triangle-diagram.in .tri-label-c{ opacity:1; transition-delay:1.35s; }

.tri-hit{
  position:absolute; width:54px; height:54px; margin:-27px 0 0 -27px;
  border-radius:50%; background:transparent; border:none; padding:0; margin-top:-27px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.tri-hit-a{ left:17.5%; top:83.33%; }
.tri-hit-b{ left:82.5%; top:83.33%; }
.tri-hit-c{ left:50%; top:20%; }
.tri-hit:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(199,174,106,.55); border-radius:50%; }

.tri-ring.active{ opacity:1 !important; stroke-width:1.8 !important; }
.tri-node.active{ transform:scale(1.5) !important; }
.tri-label.active{ color:var(--gold) !important; }

.tri-hint{
  position:absolute; top:4%; right:1%;
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Jost'; font-size:11.5px; color:var(--gold-light);
  background:rgba(199,174,106,0.10); border:1px solid var(--hair-dark);
  padding:7px 14px 7px 9px; border-radius:999px; white-space:nowrap;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .5s ease, transform .5s ease;
}
.tri-hint svg{width:15px; height:15px; flex:none;}
.triangle-diagram.in .tri-hint{
  opacity:1; transform:translateY(0); transition-delay:1.6s;
  animation:hintBob 1.9s ease-in-out 2.3s infinite;
}
.tri-hint.dismissed{ opacity:0 !important; transform:translateY(-6px) !important; animation:none !important; }
@keyframes hintBob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }

.method-interactive{
  display:flex; flex-direction:column; gap:44px; margin-top:44px;
}
@media(min-width:900px){
  .method-interactive{ display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center; }
}
.method-panel{
  position:relative; width:100%; max-width:440px; min-height:168px;
}
@media(min-width:900px){ .method-panel{min-height:190px;} }
.panel-placeholder, .panel-card{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .5s cubic-bezier(.16,.8,.28,1), transform .5s cubic-bezier(.16,.8,.28,1);
}
.panel-placeholder.active, .panel-card.active{
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.panel-placeholder p{
  font-size:19px; color:var(--gold-light); opacity:.75; max-width:340px;
}
.panel-card h3{
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  font-family:'Oswald'; color:var(--gold); margin-bottom:16px;
}
.panel-card p{ font-size:17px; line-height:1.65; color:#F3EFE6; opacity:.9; }

.ring{
  width:36px; height:36px; border:1.4px dashed var(--gold); border-radius:50%; margin-bottom:20px;
}

.method-quote{
  margin-top:64px; padding-top:48px; border-top:1px solid var(--hair-dark);
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:22px;
  color:var(--gold-light); max-width:640px; line-height:1.55;
}
@media(min-width:900px){ .method-quote{font-size:27px;} }
.method-note{
  margin-top:22px; font-family:'Jost'; font-style:normal; font-size:14px; opacity:0.55;
}

/* ================= historia / fundador ================= */
.founder-layout{
  display:flex; flex-direction:column; gap:44px; margin-top:8px;
}
@media(min-width:900px){
  .founder-layout{ flex-direction:row; align-items:flex-start; gap:64px; }
  .founder-layout .founder{ flex:1 1 auto; margin-top:0; }
  .founder-layout .founder-media{ flex:0 0 280px; }
}
.founder{ max-width:660px; margin-top:8px; }
.founder > .reveal{ transition-delay: calc(var(--i, 0) * 140ms); }

.founder-media{
  position:relative; max-width:260px; margin:0 auto;
  border-radius:2px; overflow:hidden;
  border:1px solid rgba(199,174,106,0.28);
  box-shadow:0 30px 70px -30px rgba(0,0,0,0.65);
}
@media(min-width:900px){ .founder-media{max-width:280px;} }
.founder-video{ display:block; width:100%; height:auto; background:#000; }
.sound-toggle{
  position:absolute; right:12px; bottom:12px; width:38px; height:38px;
  border-radius:50%; background:rgba(13,13,13,0.55);
  border:1px solid rgba(199,174,106,0.5); color:var(--gold-light);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:background .2s ease, border-color .2s ease;
}
.sound-toggle:hover{ background:rgba(13,13,13,0.8); border-color:var(--gold); }
.sound-toggle svg{ width:17px; height:17px; }
.sound-toggle .icon-sound{ display:none; }
.sound-toggle[aria-pressed="true"] .icon-muted{ display:none; }
.sound-toggle[aria-pressed="true"] .icon-sound{ display:block; }
.founder-media-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 14px 10px; text-align:center;
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:13px;
  color:var(--bone); opacity:.85;
  background:linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  pointer-events:none;
}
.founder-lead{
  font-size:22px; color:var(--gold-light); margin-bottom:34px; line-height:1.5;
}
@media(min-width:900px){ .founder-lead{font-size:26px;} }
.founder-body p{
  font-size:16px; line-height:1.8; color:#F3EFE6; opacity:.85; margin-bottom:20px;
}
.founder-body strong{ color:var(--gold-light); font-weight:500; }
.founder-credentials{
  display:flex; align-items:center; gap:26px; margin:40px 0; flex-wrap:wrap;
}
.credential{ display:flex; flex-direction:column; }
.credential-num{
  font-family:'Oswald'; font-size:25px; font-weight:600; color:var(--gold); letter-spacing:0.01em;
}
.credential-label{
  font-family:'Jost'; font-size:11.5px; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--stone); margin-top:5px;
}
.credential-divider{ width:1px; height:36px; background:var(--hair-dark); }
.credential-note{
  font-size:12.5px; color:var(--stone); margin-top:-20px; margin-bottom:34px;
}
.founder-signoff{
  font-size:18px; color:var(--gold-light); border-top:1px solid var(--hair-dark);
  padding-top:28px; line-height:1.55;
}
@media(min-width:900px){ .founder-signoff{font-size:20px;} }

@media (prefers-reduced-motion: reduce){
  .tri-hint{animation:none;}
  .tri-line{stroke-dashoffset:0 !important; transition:none !important;}
  .tri-ring, .tri-node, .tri-label{opacity:1 !important; transform:scale(1) !important; transition:none !important;}
}