/* ===================================================
   Procedimientos — OneKey Media
   Subdominio: procedimientos.onekeymedia.online
   Tokens y base idénticos al sitio principal
   =================================================== */

/* ──────────────────── Google Fonts ──────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ──────────────────── Tokens — DARK (default) ────────── */
:root {
  /* Layout */
  --container:  1120px;
  --headerH:    70px;
  --radius:     18px;
  --radiusLg:   26px;

  /* Backgrounds */
  --bg:         #07070c;
  --bg2:        #0b0b12;

  /* Surfaces glass (dark) */
  --glass:         rgba(255,255,255,.18);
  --glass2:        rgba(255,255,255,.22);
  --glassBorder:   rgba(255,255,255,.35);
  --glassBorder2:  rgba(255,255,255,.45);
  --glassHover:    rgba(255,255,255,.24);

  /* Text */
  --text:     rgba(255,255,255,.92);
  --muted:    rgba(255,255,255,.68);
  --muted2:   rgba(255,255,255,.52);
  --title:    #1f2933;

  /* Accents */
  --accentA:  #276e8a;
  --accentB:  #00aac1;
  --accentC:  #a855f7;
  --accentD:  #22c55e;

  /* Gradient shorthand */
  --gradAccent: linear-gradient(90deg, var(--accentA), var(--accentB));
  --gradBtn:    linear-gradient(90deg, #6fd3e8, #3a8fa6);

  /* Shadows */
  --shadow:      0 22px 60px rgba(0,0,0,.45);
  --shadowSoft:  0 10px 26px rgba(0,0,0,.10);
  --shadowSoft2: 0 14px 32px rgba(0,0,0,.14);

  /* Focus */
  --focus: 0 0 0 3px rgba(70,199,255,.35);

  /* Step bubble */
  --stepBg:     rgba(255,255,255,.12);
  --stepBorder: rgba(255,255,255,.28);
  --stepText:   rgba(255,255,255,.92);

  /* Cards */
  --cardBg:     rgba(255,255,255,.18);
  --cardBorder: rgba(255,255,255,.35);

  /* Sub-items */
  --subBg:      rgba(255,255,255,.07);
  --subBorder:  rgba(255,255,255,.10);

  /* Code chips */
  --chipBadBg:  rgba(239,68,68,.16);
  --chipBadTx:  #f87171;
  --chipGoodBg: rgba(34,197,94,.14);
  --chipGoodTx: #4ade80;

  /* Body background (radial + linear) */
  --bodyBg:
    radial-gradient(900px 600px at 15% 10%, rgba(168,85,247,.22), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(70,199,255,.22), transparent 55%),
    radial-gradient(900px 600px at 50% 90%, rgba(34,197,94,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));

  /* Light mode override area */
  --lightSectionBg: #f7f6f1;
}

/* ──────────────────── Tokens — LIGHT ────────────────── */
[data-theme="light"] {
  --bg:  #f7f6f1;
  --bg2: #edecea;

  --glass:         rgba(255,255,255,.70);
  --glass2:        rgba(255,255,255,.85);
  --glassBorder:   rgba(0,0,0,.10);
  --glassBorder2:  rgba(0,0,0,.16);
  --glassHover:    rgba(255,255,255,.90);

  --text:   #1f2933;
  --muted:  rgba(31,41,51,.72);
  --muted2: rgba(31,41,51,.50);
  --title:  #1f2933;

  --shadow:      0 22px 60px rgba(0,0,0,.12);
  --shadowSoft:  0 10px 26px rgba(0,0,0,.07);
  --shadowSoft2: 0 14px 32px rgba(0,0,0,.10);

  --stepBg:     rgba(39,110,138,.10);
  --stepBorder: rgba(39,110,138,.25);
  --stepText:   #276e8a;

  --cardBg:     rgba(255,255,255,.80);
  --cardBorder: rgba(0,0,0,.08);

  --subBg:      rgba(0,0,0,.03);
  --subBorder:  rgba(0,0,0,.06);

  --chipBadBg:  rgba(239,68,68,.10);
  --chipBadTx:  #dc2626;
  --chipGoodBg: rgba(34,197,94,.12);
  --chipGoodTx: #16a34a;

  --bodyBg:
    radial-gradient(900px 600px at 15% 5%,  rgba(39,110,138,.10), transparent 55%),
    radial-gradient(900px 600px at 80% 15%, rgba(0,170,193,.09),  transparent 50%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

/* ──────────────────── Reset & base ──────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--text);
  background: var(--bodyBg);
  background-attachment: fixed;
  overflow-x: hidden;
  transition:
    background-color .4s ease,
    color .4s ease;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 10px;
}

/* Noise overlay — igual al original */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0);
  background-size: 3px 3px;
  opacity: .06;
  mix-blend-mode: overlay;
  z-index: 0;
}

/* ──────────────────── Layout ──────────────────── */
.container {
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
}

/* ──────────────────── HEADER ──────────────────── */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--headerH);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  pointer-events: auto;
}

.header .container { width: 98%; max-width: none; }

.header-inner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 16px;
  width: min(1480px, calc(100vw - 40px));
  border-radius: 22px;
  background: var(--glass);
  border: 1px solid var(--glassBorder);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadowSoft);
  transition: background .3s, border-color .3s;
}

/* Noise inner */
.header-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.25) 1px, transparent 0);
  background-size: 3px 3px;
  opacity: .18;
  mix-blend-mode: overlay;
}

/* Shine inner */
.header-inner::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.25), transparent);
  opacity: .25;
}

/* ──── Logo ──── */
.logo {
  position: relative;
  display: inline-block;
  height: 40px;
  z-index: 1;
}
.logo img {
  height: 40px;
  width: auto;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.3));
}

/* Logo swap: dark theme → logo-light visible; light theme → logo-dark visible */
.logo .logo-light { opacity: 1; transition: opacity .25s ease; }
.logo .logo-dark  {
  position: absolute;
  left: 0; top: 0;
  opacity: 0;
  transition: opacity .25s ease;
}

[data-theme="light"] .logo .logo-light { opacity: 0; }
[data-theme="light"] .logo .logo-dark  { opacity: 1; }

/* ──── Badge interno ──── */
.badge-interno {
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accentB);
  background: rgba(0,170,193,.12);
  border: 1px solid rgba(0,170,193,.28);
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ──── Theme toggle ──── */
.theme-toggle {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  cursor: pointer;
  transition: transform .18s ease, background .2s, filter .18s;
  color: var(--text);
  flex-shrink: 0;
}
.theme-toggle:hover { transform: translateY(-1px); filter: brightness(1.1); }
.theme-toggle svg { width: 18px; height: 18px; }

.icon-sun  { display: none; }
.icon-moon { display: block; }
[data-theme="light"] .icon-sun  { display: block; }
[data-theme="light"] .icon-moon { display: none; }

/* ──── Header right cluster ──── */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
  justify-self: end;
}

/* ──────────────────── PAGE WRAPPER ──────────────────── */
.page-wrapper {
  padding-top: calc(var(--headerH) + 28px);
}

/* ──────────────────── HERO / INTRO ──────────────────── */
.intro {
  padding: 52px 0 36px;
}

.intro-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  background: var(--gradAccent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}

.intro-title {
  margin: 0 0 16px;
  font-size: clamp(28px, 6vw, 50px);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -0.02em;
  color: var(--text);
}

.intro-title strong {
  font-weight: 700;
  background: var(--gradAccent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.intro-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 50ch;
}

/* ──────────────────── NAV ANCHORS ──────────────────── */
.section-nav {
  padding: 0 0 48px;
}

.section-nav-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nav-anchor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glassBorder);
  color: var(--muted);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .18s ease, background .18s, color .18s, border-color .18s, box-shadow .18s;
  white-space: nowrap;
}
.nav-anchor:hover {
  color: var(--text);
  background: var(--glassHover);
  border-color: var(--glassBorder2);
  transform: translateY(-1px);
  box-shadow: var(--shadowSoft);
}
.nav-anchor .anchor-icon {
  font-size: 15px;
  line-height: 1;
}

/* ──────────────────── SECTIONS ──────────────────── */
.proc-section {
  margin-bottom: 40px;
  scroll-margin-top: calc(var(--headerH) + 20px);
}

/* ──────────────────── CARD ──────────────────── */
.card {
  position: relative;
  border-radius: var(--radiusLg);
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadowSoft);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

/* Shine top edge */
.card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.22), transparent);
  opacity: .30;
}

/* Accent glow */
.card::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background:
    radial-gradient(800px 320px at 10% 0%, rgba(39,110,138,.16), transparent 60%),
    radial-gradient(800px 320px at 90% 10%, rgba(0,170,193,.13), transparent 60%);
  opacity: .8;
}

.card > * { position: relative; z-index: 1; }

/* ──── Card header ──── */
.card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--cardBorder);
}

.card-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(39,110,138,.15);
  border: 1px solid rgba(0,170,193,.25);
  display: grid;
  place-items: center;
  font-size: 22px;
}

.card-meta h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--title);
}

[data-theme="dark"] .card-meta h2 { color: var(--text); }

.card-meta span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--muted2);
}

/* ──── Card body ──── */
.card-body { padding: 24px 26px; }

/* ──────────────────── STEPS ──────────────────── */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }

.step {
  display: flex;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 14px;
  transition: background .18s;
}
.step:hover { background: var(--subBg); }

.step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--stepBg);
  border: 1px solid var(--stepBorder);
  color: var(--accentB);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 1px;
}

.step-body { flex: 1; }

.step-title {
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text);
}

[data-theme="light"] .step-title { color: var(--title); }

/* ──────────────────── SUB-STEPS ──────────────────── */
.sub-steps {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sub-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--subBg);
  border: 1px solid var(--subBorder);
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  transition: background .18s, border-color .18s;
}
.sub-step:hover {
  background: var(--glass);
  border-color: var(--glassBorder);
}
.sub-step::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gradAccent);
  background: var(--accentB);
  flex-shrink: 0;
  margin-top: 6px;
}

/* Sub-sub steps */
.sub-sub-steps {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sub-sub-step {
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--muted2);
  line-height: 1.5;
}
.sub-sub-step::before {
  content: "→";
  color: var(--accentA);
  font-size: 12px;
  flex-shrink: 0;
}

/* ──────────────────── LINK interno ──────────────────── */
.link-internal {
  color: var(--accentB);
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s;
}
.link-internal:hover { opacity: .75; text-decoration: underline; }

/* ──────────────────── DIVIDER LABEL ──────────────────── */
.divider-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 26px 20px;
}
.divider-label::before,
.divider-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cardBorder);
}
.divider-label span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted2);
  white-space: nowrap;
}

/* ──────────────────── TIP LIST (Consejos) ──────────────────── */
.tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.tip {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--subBg);
  border: 1px solid var(--subBorder);
  transition: background .18s, border-color .18s;
}
.tip:hover {
  background: var(--glass);
  border-color: rgba(0,170,193,.28);
}

.tip-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--stepBg);
  border: 1px solid var(--stepBorder);
  color: var(--accentB);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 1px;
}

.tip-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  min-height: 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  gap: 0;
}
.tip-text strong { color: var(--text); font-weight: 600; }
[data-theme="light"] .tip-text strong { color: var(--title); }

/* ──────────────────── CODE CHIPS ──────────────────── */
.chip {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 6px;
  margin: 1px 2px;
  vertical-align: middle;
}
.chip-bad  { background: var(--chipBadBg);  color: var(--chipBadTx);  text-decoration: line-through; }
.chip-good { background: var(--chipGoodBg); color: var(--chipGoodTx); }

/* ──────────────────── BTN ──────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 800;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  will-change: transform;
}
.btn-primary {
  color: #fff;
  background: var(--gradBtn);
  box-shadow: 0 12px 28px rgba(58,143,166,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 16px 36px rgba(58,143,166,.32), inset 0 1px 0 rgba(255,255,255,.45);
}

/* ──────────────────── FOOTER ──────────────────── */
.footer {
  margin-top: 64px;
  padding: 26px 0 34px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.12);
}

[data-theme="light"] .footer {
  border-top-color: rgba(0,0,0,.07);
  background: rgba(0,0,0,.04);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer-copy {
  font-size: 13px;
  color: var(--muted2);
}
.footer-copy a {
  background: var(--gradAccent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
  font-weight: 600;
}

/* ──────────────────── SCROLL TOP ──────────────────── */
#scrollTop {
  position: fixed;
  bottom: 28px;
  right: 22px;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--gradBtn);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(58,143,166,.35);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s;
  z-index: 999;
}
#scrollTop.visible { opacity: 1; transform: translateY(0); }
#scrollTop:hover   { filter: brightness(1.08); transform: translateY(-1px); }
#scrollTop svg     { width: 18px; height: 18px; }

/* ──────────────────── REVEAL ──────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }


/* ──────────────────── VIDEO SECTIONS ──────────────────── */
.video-card-body {
  padding: 22px 26px 26px;
}

.video-desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 18px;
}

.video-wrapper {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  border: 1px solid var(--cardBorder);
}

.video-wrapper video {
  width: 100%;
  display: block;
  max-height: 500px;
  background: #000;
}

/* Custom styling de los controles nativos en navegadores que lo permiten */
.video-wrapper video::-webkit-media-controls-panel {
  background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
}

@media (max-width: 720px) {
  .video-card-body { padding: 14px 16px 18px; }
  .video-wrapper video { max-height: 240px; }
}

@media (max-width: 480px) {
  .video-card-body { padding: 12px 14px 16px; }
  .video-wrapper { border-radius: 10px; }
}

/* ──────────────────── BREAKPOINTS ──────────────────── */
@media (min-width: 721px) {
  :root { --headerH: 76px; }
  .container { width: min(var(--container), calc(100% - 40px)); }
}

@media (min-width: 1025px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
  }
  .badge-interno { display: inline-block; }
  .footer-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (max-width: 1024px) {
  .badge-interno { display: none; }
  .card-header  { padding: 18px 18px 16px; }
  .card-body    { padding: 18px; }
  .intro        { padding: 40px 0 28px; }
}

@media (max-width: 720px) {
  :root { --headerH: 70px; }
  .intro { padding: 32px 0 20px; }
  .section-nav { padding-bottom: 36px; }
}

/* ──────────────────── Reduced motion ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; transform: none; opacity: 1; }
  .btn, .nav-anchor, .card, .step, .tip { transition: none; }
}