@import url(https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,500&family=Inter:wght@300;400;500;600&family=Albert+Sans:ital,wght@0,300..700;1,300..700);

  :root{
    --ink: #0a0a0b;
    --panel: #131214;
    --panel-2: #1a1818;
    --ivory: #efe9db;
    --ivory-dim: #b8b1a1;
    --gold: #cba15c;
    --gold-bright: #e6c988;
    --burgundy: #5a1420;
    --line: rgba(239,233,219,0.11);
    --line-gold: rgba(203,161,92,0.35);
    --sunset-coral: #ff6f5e;
    --sunset-amber: #ffb057;
    --sunset-violet: #9b5de5;
    --sunset-pink: #ff8fb1;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  body{
    background: var(--ink);
    color: var(--ivory);
    font-family:'Inter', sans-serif;
    font-weight:300;
    overflow-x:hidden;
  }

  ::selection{ background: var(--gold); color: var(--ink); }

  .grain{
    position:fixed; inset:0; pointer-events:none; z-index:3; opacity:0.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .serif{ font-family:'Bodoni Moda', serif; }

  /* NAVBAR */
  header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding: 28px 6vw;
    background: linear-gradient(to bottom, rgba(10,10,11,0.92), transparent);
  }
  .wordmark-nav{
    display:flex; align-items:center; gap:12px;
  }
  .monogram{
    width:34px; height:34px; border:1px solid var(--gold); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Bodoni Moda', serif; font-style:italic; font-size:16px; color: var(--gold);
  }
  .wordmark-nav .name{
    font-family:'Bodoni Moda', serif; font-size:16px; letter-spacing:0.14em; text-transform:uppercase; color: var(--ivory);
  }
  .wordmark-nav .name em{ font-style:normal; color:var(--gold); }

  nav a{
    color: var(--ivory-dim); text-decoration:none; font-size:14px; letter-spacing:0.16em; text-transform:uppercase;
    margin-left:40px; transition: color 0.3s ease; font-weight:400;
  }
  nav a:hover, nav a:focus-visible{ color: var(--gold-bright); }

  /* HERO */
  .hero{
    min-height:100vh;
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding: 160px 6vw 90px;
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(ellipse 60% 50% at 50% 22%, rgba(255,111,94,0.14), transparent 60%),
      radial-gradient(ellipse 70% 55% at 50% 30%, rgba(203,161,92,0.10), transparent 65%),
      radial-gradient(ellipse 50% 40% at 50% 15%, rgba(155,93,229,0.10), transparent 60%),
      var(--ink);
  }
  .hero::after{
    content:''; position:absolute; left:50%; bottom:0; width:1px; height:70px; background:linear-gradient(var(--gold), transparent);
    transform:translateX(-50%);
  }
  .rays{
    position:absolute; top:-4%; left:50%; width:1600px; height:1600px; transform:translateX(-50%);
    z-index:0; opacity:0.55; pointer-events:none;
    animation: rays-drift 40s linear infinite;
  }
  @media (prefers-reduced-motion: reduce){ .rays{ animation:none; } }
  @keyframes rays-drift{ from{ transform:translateX(-50%) rotate(0deg); } to{ transform:translateX(-50%) rotate(360deg); } }
  .rays .beam{
    position:absolute; top:0; left:50%; width:2px; height:56%; transform-origin: top center;
    background:linear-gradient(to bottom, rgba(255,176,87,0.32), rgba(255,111,94,0.12) 45%, transparent 75%);
  }
  .hero-inner{ max-width:900px; margin:0 auto; position:relative; z-index:2; }

  .eyebrow{
    font-family:'Albert Sans', monospace; font-size:14px; letter-spacing:0.35em; text-transform:uppercase;
    color: var(--sunset-amber); display:inline-flex; align-items:center; gap:14px; margin-bottom:34px;
  }
  .eyebrow::before, .eyebrow::after{ content:''; width:34px; height:1px; background: linear-gradient(90deg, transparent, var(--sunset-amber)); display:inline-block; }
  .eyebrow::after{ background: linear-gradient(90deg, var(--sunset-amber), transparent); }

  h1.wordmark{
    font-family:'Bodoni Moda', serif;
    font-weight:500;
    font-size: clamp(52px, 8vw, 118px);
    line-height:0.98;
    letter-spacing:0.01em;
    color: var(--ivory);
    text-shadow: 0 0 46px rgba(255,176,87,0.22);
  }
  h1.wordmark .italic{
    font-style:italic; font-weight:500;
    background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 35%, #fff2d9 50%, var(--gold-bright) 65%, var(--gold) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    text-shadow:none;
  }

  .hero-rule{
    width:120px; height:1px; margin: 34px auto; opacity:0.7;
    background: linear-gradient(90deg, transparent, var(--sunset-coral), var(--gold), var(--sunset-amber), transparent);
  }

  .hero-tagline{
    max-width:560px; margin:0 auto; font-size:17px; line-height:1.8; color: var(--ivory-dim); font-weight:300;
  }

  .hero-ctas{ margin-top:46px; display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; }

  .btn-primary{
    display:inline-flex; align-items:center; gap:14px;
    background: transparent; color: var(--ivory);
    font-family:'Inter', sans-serif; font-weight:500; font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
    padding:20px 38px; text-decoration:none;
    border: 1px solid var(--gold);
    position:relative; overflow:hidden;
    transition: color 0.35s ease;
  }
  .btn-primary::before{
    content:''; position:absolute; inset:0; background: var(--gold);
    transform: scaleX(0); transform-origin:left; transition: transform 0.4s cubic-bezier(.65,0,.35,1); z-index:-1;
  }
  .btn-primary:hover, .btn-primary:focus-visible{ color: var(--ivory-dim); }
  .btn-primary:hover::before, .btn-primary:focus-visible::before{ transform: scaleX(1); }
  .btn-primary svg{ width:14px; height:14px; transition: transform 0.3s ease; }
  .btn-primary:hover svg{ transform: translateX(4px); }

  .btn-ghost{
    font-family:'Albert Sans', monospace; font-size:12px; color: var(--ivory-dim); text-decoration:none;
    border-bottom:1px solid var(--line); padding-bottom:4px; transition: color 0.3s ease, border-color 0.3s ease;
  }
  .btn-ghost:hover{ color: var(--ivory); border-color: var(--ivory); }

  /* BARRA DE TEXTO DESPLAZABLE */
  .seal-strip{
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background: var(--panel);
    padding: 20px 0; overflow:hidden; white-space:nowrap;
  }
  .seal-track{ display:inline-flex; animation: ticker 34s linear infinite; }
  @media (prefers-reduced-motion: reduce){ .seal-track{ animation:none; } }
  @keyframes ticker{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
  .seal-track span{
    font-family:'Albert Sans', monospace; font-size:14px; letter-spacing:0.22em; text-transform:uppercase;
    color: var(--ivory-dim); padding: 0 34px; display:inline-flex; align-items:center; gap:34px;
  }
  .seal-track span:nth-child(4n+1)::after{ content:'—'; color: var(--gold); }
  .seal-track span:nth-child(4n+2)::after{ content:'—'; color: var(--sunset-coral); }
  .seal-track span:nth-child(4n+3)::after{ content:'—'; color: var(--sunset-violet); }
  .seal-track span:nth-child(4n+4)::after{ content:'—'; color: var(--sunset-amber); }

  /* TABLA CATALGO */
  .listen{
    padding: 150px 6vw; position:relative;
    background:
      radial-gradient(ellipse 55% 60% at 50% 45%, rgba(255,111,94,0.06), transparent 65%),
      var(--ink);
    display:flex; justify-content:center;
  }
  .certificate{
    max-width:820px; width:100%;
    border: 1px solid var(--line-gold);
    padding: 4px;
    position:relative;
  }
  .certificate-inner{
    border: 1px solid var(--line-gold);
    padding: 72px 64px;
    text-align:center;
    background: linear-gradient(180deg, rgba(203,161,92,0.045), transparent 40%);
  }
  .cert-mark{
    width:52px; height:52px; border:1px solid var(--gold); border-radius:50%;
    display:flex; align-items:center; justify-content:center; margin:0 auto 30px;
    font-family:'Bodoni Moda', serif; font-style:italic; color:var(--gold); font-size:22px;
  }
  .cert-eyebrow{
    font-family:'Albert Sans', monospace; font-size:16px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold);
    margin-bottom:20px;
  }
  .certificate h2{
    font-family:'Bodoni Moda', serif; font-weight:500; font-size: clamp(30px, 4vw, 46px);
    line-height:1.1; margin-bottom:24px; color:var(--ivory);
  }
  .certificate h2 em{ font-style:italic; color:var(--gold-bright); }
  .certificate p{ color: var(--ivory-dim); font-size:16px; max-width:480px; margin: 0 auto; line-height:1.8; font-weight:300; }
  .cert-link{
    display:block; margin: 26px auto 0; font-family:'Albert Sans', monospace; font-size:13px; color:var(--ivory);
    word-break:break-all;
  }
  .cert-link a{ color: var(--ivory); text-decoration-color: var(--gold); }
  .certificate .btn-primary{ margin-top:38px; }
  .cert-corner{ position:absolute; width:18px; height:18px; border: 1px solid var(--gold); }
  .cert-corner.tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
  .cert-corner.tr{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
  .cert-corner.bl{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
  .cert-corner.br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

  /* SOBRE */
  .about{
    padding: 40px 6vw 150px;
    max-width:1200px; margin:0 auto;
    display:grid; grid-template-columns: 0.85fr 1.15fr; gap:90px; align-items:start;
  }
  .about-label{
    font-family:'Albert Sans', monospace; font-size:16px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold);
    margin-bottom:20px; display:block;
  }
  .about h3{
    font-family:'Bodoni Moda', serif; font-weight:500;
    font-size: clamp(28px, 3.2vw, 40px); line-height:1.15; color:var(--ivory);
  }
  .about h3 em{ font-style:italic; color:var(--gold-bright); }
  .about p{ color: var(--ivory-dim); font-size:16px; line-height:1.85; margin-top:22px; max-width:480px; font-weight:300; }

  .credentials{ display:grid; grid-template-columns: 1fr 1fr; }
  .credential{
    border-top:1px solid var(--line); padding: 28px 0 28px 26px; position:relative;
  }
  .credential:nth-child(-n+2){ border-top:1px solid var(--line); }
  .credential::before{ content:''; position:absolute; left:0; top:28px; width:1px; height:20px; background:var(--gold); }
  .credential .num{ font-family:'Albert Sans', monospace; font-size:14px; color: var(--gold); letter-spacing:0.1em; }
  .credential .val{ font-family:'Bodoni Moda', serif; font-size:22px; margin-top:12px; color:var(--ivory); }
  .credential .sub{ font-size:12px; color:var(--ivory-dim); margin-top:6px; letter-spacing:0.02em; }

  /* FOOTER */
  footer{
    border-top:1px solid var(--line-gold);
    padding: 80px 6vw 40px;
    text-align:center;
  }
  .footer-eyebrow{
    font-family:'Albert Sans', monospace; font-size:16px; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold);
    margin-bottom:24px;
  }
  .footer-cta{
    font-family:'Bodoni Moda', serif; font-size: clamp(34px, 5.5vw, 64px); font-weight:500; line-height:1.05;
    max-width:760px; margin:0 auto;
  }
  .footer-cta a{ color: var(--ivory); text-decoration:none; }
  .footer-cta a em{
    font-style:italic;
    background: linear-gradient(100deg, var(--sunset-coral), var(--gold-bright) 40%, var(--sunset-amber) 70%, var(--gold) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    border-bottom: 1px solid var(--gold); transition: opacity 0.3s ease;
  }
  .footer-cta a:hover em{ opacity:0.8; }

  .footer-yt{
    display:inline-flex; align-items:center; gap:16px; color:var(--ivory-dim); text-decoration:none;
    font-family:'Albert Sans', monospace; font-size:12px; letter-spacing:0.05em; margin-top:40px;
    border:1px solid var(--line); padding:14px 24px; transition: border-color 0.3s ease, color 0.3s ease;
  }
  .footer-yt:hover{ border-color:var(--gold); color:var(--ivory); }
  .footer-yt svg{ width:16px; height:16px; fill:var(--gold); }

  .copyright{
    margin-top:70px; padding-top:26px; border-top:1px solid var(--line);
    font-family:'Albert Sans', monospace; font-size:12px; color: var(--ivory-dim); letter-spacing:0.08em;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
  }

  @media (max-width: 900px){
    .about{ grid-template-columns: 1fr; gap:44px; }
    .certificate-inner{ padding:52px 30px; }
    nav a{ margin-left:20px; }
    .credentials{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 560px){
    nav{ display:none; }
    .credential{ padding-left:20px; }
  }