/* ===================================================================
   THEME: "Blacksteel" — Metal/Dark UI for Orlando Alfaro
   Author: Orlando
   Purpose: Full replacement stylesheet for HTML5UP Stellar-like pages
   Notes:
   - Dark hero + navigation
   - Light content cards with proper high-contrast text
   - Red (accent) + Aged Gold (secondary)
   - Works even if original Stellar CSS is present; load THIS after.
   =================================================================== */

/* -------------------------------------------------
   0) Fonts
-------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Metal+Mania&family=Inter:wght@300;400;600;800&display=swap');

/* -------------------------------------------------
   1) Design Tokens
-------------------------------------------------- */
:root{
  --bg-900:#0a0c0f;      /* page background */
  --bg-800:#111419;      /* panels / header */
  --bg-700:#161a20;      /* nav hover */
  --ink-900:#0d0f12;     /* body text on white */
  --ink-700:#2b2f36;     /* muted on white */
  --ink-100:#f1f1f1;     /* text on dark */
  --muted-100:rgba(241,241,241,.7);
  --card:#ffffff;        /* content card background */
  --line-d:#23272f;      /* lines on dark */
  --line-l:#e8e8ee;      /* lines on light */
  --accent:#d90429;      /* red */
  --accent-2:#c0a062;    /* aged gold */
  --radius:14px;
  --radius-sm:10px;
  --shadow-1:0 14px 40px rgba(0,0,0,.45);
  --glow:0 0 12px rgba(217,4,41,.4), 0 0 28px rgba(217,4,41,.22);
}

/* -------------------------------------------------
   2) Global / Body
-------------------------------------------------- */
html,body{
  height:100%;
  background:
    radial-gradient(1200px 800px at 50% -10%, rgba(217,4,41,.12), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 9px),
    linear-gradient(180deg, var(--bg-900), var(--bg-800)) !important;
  color:var(--muted-100);
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* links */
a{
  color:#fff;
  text-decoration:none;
  background-image:linear-gradient(120deg, transparent 0 70%, var(--accent) 70% 100%);
  background-size:300% 2px; background-repeat:no-repeat;
  background-position:100% 100%;
  transition:background-position .25s ease, color .2s ease, text-shadow .2s ease;
}
a:hover{ color:#fff; background-position:0% 100%; text-shadow:0 0 8px rgba(255,255,255,.4); }

/* -------------------------------------------------
   3) Header / Hero
-------------------------------------------------- */
#header{
  background: linear-gradient(180deg, var(--bg-800), var(--bg-900));
  padding:5rem 0 3rem 0;
  text-align:center;
  position:relative;
}
#header:before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(800px 400px at 50% -5%, rgba(217,4,41,.18), transparent 70%);
  pointer-events:none;
}
#header .logo {
  margin: 0 auto;            /* centra horizontalmente */
  display: flex;
  align-items: center;
  justify-content: center;
}

#header h1, #header h2, #header h3{
  font-family:"Metal Mania", system-ui; color:#fff; letter-spacing:.6px;
  text-shadow:0 2px 0 rgba(0,0,0,.4);
}
#header h1{ font-size:3rem; margin:.8rem 0 .4rem; }
#header p{ color:var(--muted-100); margin:0.2rem 0 0.8rem; }
#header .tagline{
  display:inline-block; padding:.35rem .8rem; border-radius:999px;
  border:1px solid var(--line-d);
  background:rgba(255,255,255,.05);
}

/* -------------------------------------------------
   4) Navigation Tabs
-------------------------------------------------- */
#nav{
  background: var(--bg-900);
  border-top:1px solid var(--line-d);
  border-bottom:1px solid var(--line-d);
}
#nav ul{
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  padding:1rem; margin:0;
  list-style:none;
}
#nav a{
  display:inline-block;
  color:#eaeaea; 
  padding:.65rem 1rem;
  border-radius:999px;
  border:1px solid var(--line-d);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
}
#nav a:hover{ 
  transform:translateY(-1px);
  box-shadow: var(--glow);
}
#nav a.active{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(180deg, rgba(217,4,41,.95), rgba(217,4,41,.75));
  box-shadow: var(--glow);
}

/* -------------------------------------------------
   5) Main / Sections (Light cards for readability)
-------------------------------------------------- */
#main{ padding:3rem 0 5rem; }
.main{ /* Stellar section wrapper */
  background: var(--card);
  border:1px solid var(--line-l);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  margin:2rem auto;
  max-width:1100px;
  overflow:hidden;
}
.main > .inner{ padding:3rem 3rem; }

/* High-contrast text for white cards */
.main, .main .inner, .main p, .main li, .main label, .main .content{
  color: var(--ink-900) !important;
}
.main p{ line-height:1.75; }
.main .muted{ color: var(--ink-700) !important; }

/* headings inside cards */
.main h1, .main h2, .main h3, .main h4{
  font-family:"Metal Mania", system-ui;
  color: var(--ink-900);
  letter-spacing:.4px;
  text-shadow:none;
}
.main h1{ font-size:2.2rem; }
.main h2{ font-size:1.7rem; }
.main h3{ font-size:1.3rem; }

/* Underline accent on major headings */
header.major h2{
  position:relative; padding-bottom:.55rem;
}
header.major h2:after{
  content:""; position:absolute; left:0; bottom:0;
  width:120px; height:4px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius:3px; box-shadow: var(--glow);
}

/* -------------------------------------------------
   6) Buttons
-------------------------------------------------- */
.button, button, input[type=submit], input[type=button], input[type=reset]{
  display:inline-block;
  font-weight:600;
  padding:.8rem 1.2rem;
  border-radius: var(--radius-sm);
  border:1px solid var(--line-l);
  background:linear-gradient(180deg, #fafafa, #f1f1f1);
  color: var(--ink-900);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition:transform .08s ease, box-shadow .2s ease, filter .15s ease;
}
.button:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.12); }
.button:active{ transform:none; }
.button.primary{
  border:0;
  color:#fff;
  background:linear-gradient(180deg, var(--accent), #96031a);
  box-shadow: var(--glow);
}
.button.ghost{
  color:var(--accent); background:transparent; border:1px solid var(--accent);
}

/* -------------------------------------------------
   7) Forms (dark labels, clear fields)
-------------------------------------------------- */
label{ color: var(--ink-900); font-weight:600; }
input[type=text], input[type=email], input[type=password], select, textarea{
  width:100%;
  background:#fff;
  border:1px solid var(--line-l);
  color: var(--ink-900);
  border-radius: var(--radius-sm);
  padding:.8rem 1rem;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
input:focus, select:focus, textarea:focus{
  outline:0; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(217,4,41,.18);
}

/* -------------------------------------------------
   8) Tables
-------------------------------------------------- */
.table-wrapper{ border:1px solid var(--line-l); border-radius: var(--radius); overflow:hidden; }
table{ width:100%; border-collapse:collapse; }
th, td{ padding: .9rem 1rem; border-bottom:1px solid var(--line-l); }
thead th{ background:#fafafa; color:var(--ink-900); text-align:left; }
tbody tr:nth-child(2n + 1){ background:#fcfcfc; }
tbody tr:hover{ background: #fff5f6; } /* subtle red tint */

/* -------------------------------------------------
   9) Lists / HR
-------------------------------------------------- */
ul.alt li{ border-top:1px solid var(--line-l); }
hr{ border:0; height:2px; background:linear-gradient(90deg, transparent, var(--accent), transparent); margin:2.2rem 0; }

/* -------------------------------------------------
   10) Footer (dark)
-------------------------------------------------- */
#footer{
  background: var(--bg-900);
  color: var(--muted-100);
  border-top:1px solid var(--line-d);
  padding:2.5rem 0;
}
#footer a{ color:#fff; }
#footer .copyright{ opacity:.8; }

/* -------------------------------------------------
   11) Utilities
-------------------------------------------------- */
.card-dark{ background: var(--bg-800); color:#fff; border:1px solid var(--line-d); border-radius:var(--radius); }
.badge{ display:inline-block; padding:.25rem .6rem; border-radius:999px; font-weight:600; border:1px solid var(--line-l); }
.badge.red{ background:#fff1f3; color:#7a0d1c; border-color:#ffd2d9; }
.center{ text-align:center; }
.glow{ box-shadow: var(--glow); }

/* code */
code{ background:#f6f6f8; color:#c7254e; padding:.1rem .3rem; border-radius:6px; border:1px solid var(--line-l); }
pre code{ display:block; padding:1rem; border-radius:10px; overflow:auto; }

/* selection */
::selection{ background:rgba(217,4,41,.5); color:#fff; }
::-moz-selection{ background:rgba(217,4,41,.5); color:#fff; }

/* scrollbars (webkit) */
*::-webkit-scrollbar{ height:10px; width:10px; }
*::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); }
*::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, var(--accent), #7a0216); border-radius:10px; border:2px solid rgba(0,0,0,.35); }
*::-webkit-scrollbar-thumb:hover{ filter:brightness(1.1); }

/* -------------------------------------------------
   12) Responsiveness
-------------------------------------------------- */
@media (max-width: 736px){
  #header{ padding:4rem 0 2rem; }
  #header h1{ font-size:2.3rem; }
  .main > .inner{ padding:2rem 1.4rem; }
}
header.major h2:after {
  display: none !important;
}

/*-- botonos CV --*/
.actions.special {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 28px;
}

/* Botones */
.actions.special .button {
  display: inline-flex;
  align-items: center;          /* <-- centra verticalmente el texto e icono */
  justify-content: center;
  gap: 10px;                    /* espacio entre icono y texto */
  background: linear-gradient(145deg, #121212, #000);
  color: #f5f5f5;
  border: 2px solid #6b6b6b;
  border-radius: 8px;
  padding: 12px 24px;           /* menos padding vertical, más simétrico */
  font-size: 1rem;
  line-height: 1;               /* evita que el texto "baje" */
  font-family: 'Orbitron', 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 0 6px rgba(255,255,255,0.4);
  cursor: url('/images/cursors/icons8-música-metal-64.png'), pointer;
  transition: all 0.35s ease;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1),
              inset 0 0 10px rgba(255,255,255,0.05);
  overflow: hidden;
}

/* Ícono PDF (opcional, si lo usas dentro del botón) */
.actions.special .button i {
  font-size: 1.1rem;
  color: #ff5252;
  position: relative;
  top: 0; /* evita desalineación */
}

/* Hover metalero rojo */
.actions.special .button:hover {
  color: #fff;
  background: linear-gradient(145deg, #b71c1c, #8b0000);
  border-color: #ff3d3d;
  box-shadow: 0 0 20px #b71c1c, 0 0 40px #ff1e1e44 inset;
  transform: translateY(-2px) scale(1.05);
  text-shadow: 0 0 10px rgba(255,255,255,0.8);
}

/* Brillo animado */
.actions.special .button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: all 0.5s ease;
}
.actions.special .button:hover::after {
  left: 100%;
}

/* Responsive */
@media (max-width: 640px) {
  .actions.special {
    flex-direction: column;
  }
  .actions.special .button {
    width: 100%;
    text-align: center;
  }
}

/* -------------------------------------------------
   13) Fixes for main.css (from Stellar)
-------------------------------------------------- */