/* ═══════════════════════════════════════════════════════════════
   CAPAJUASO — Carlos Quintero | Steel Trader
   Hub de enlaces · Mobile first · Sin dependencias JS de terceros
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Paleta: acero frío + ámbar de fundición */
  --bg:        #0E1116;
  --bg-2:      #141922;
  --surface:   rgba(255, 255, 255, .045);
  --surface-h: rgba(255, 255, 255, .075);
  --stroke:    rgba(255, 255, 255, .09);
  --stroke-h:  rgba(240, 135, 31, .45);

  --text:      #E9EDF2;
  --muted:     #8D9AAB;

  --amber:     #F0871F;
  --amber-2:   #FFB347;
  --amber-dim: rgba(240, 135, 31, .12);
  --wa:        #25D366;

  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --ring:   0 0 0 3px rgba(240,135,31,.35);

  --wrap: 34rem; /* 544px */
  color-scheme: dark;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100dvh;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:where(a, button):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

/* ── Fondo: resplandor de acero al rojo ────────────────────── */
.glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 32rem at 50% -8%,  rgba(240,135,31,.20), transparent 62%),
    radial-gradient(40rem 26rem at 92% 12%,  rgba(120,160,220,.09), transparent 60%),
    radial-gradient(46rem 30rem at 4% 88%,   rgba(240,135,31,.07), transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 46%);
}

/* Textura sutil de metal cepillado */
.glow::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,.014) 0 1px,
    transparent 1px 4px
  );
}

/* ── Contenedor ────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0 1.15rem 3.5rem;
  padding-bottom: max(3.5rem, env(safe-area-inset-bottom));
}

/* ═══════════════ Selector de idioma ═══════════════ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: .9rem 1.15rem;
  padding-top: max(.9rem, env(safe-area-inset-top));
}

.langswitch {
  position: relative;
  display: flex;
  padding: .25rem;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: rgba(14, 17, 22, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.langswitch__thumb {
  position: absolute;
  top: .25rem;
  left: .25rem;
  width: calc(50% - .25rem);
  height: calc(100% - .5rem);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--amber), var(--amber-2));
  box-shadow: 0 2px 10px -2px rgba(240,135,31,.7);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.langswitch[data-active="en"] .langswitch__thumb { transform: translateX(100%); }

.langswitch__btn {
  position: relative;
  z-index: 1;
  min-width: 2.9rem;
  padding: .38rem .1rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted);
  border-radius: 999px;
  transition: color .25s ease;
}
.langswitch__btn.is-active { color: #17120A; }

/* ═══════════════ Encabezado ═══════════════ */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .5rem 0 1.75rem;
}

.hero__avatar {
  position: relative;
  width: 7.25rem;
  height: 7.25rem;
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--amber), var(--amber-2), #6E7C90, var(--amber));
  box-shadow: 0 10px 34px -14px rgba(240,135,31,.85);
}

.hero__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* La foto es un gráfico promocional: encuadramos el rostro */
  object-position: 50% 22%;
  border: 3px solid var(--bg);
  background: var(--bg-2);
}

.hero__name {
  margin-top: 1.05rem;
  font-family: Sora, Inter, system-ui, sans-serif;
  font-size: clamp(1.45rem, 6.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.hero__role {
  margin-top: .4rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--amber), var(--amber-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__bio {
  max-width: 30rem;
  margin-top: .85rem;
  font-size: .94rem;
  color: var(--muted);
  text-wrap: pretty;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  margin-top: 1.05rem;
}

.chip {
  padding: .3rem .7rem;
  font-size: .72rem;
  font-weight: 500;
  color: var(--amber-2);
  background: var(--amber-dim);
  border: 1px solid rgba(240,135,31,.22);
  border-radius: 999px;
  white-space: nowrap;
}

/* ═══════════════ CTA principal (WhatsApp) ═══════════════ */
.cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--amber) 0%, #E5741A 55%, var(--amber-2) 100%);
  color: #17120A;
  box-shadow: 0 6px 26px -8px rgba(240,135,31,.6), inset 0 1px 0 rgba(255,255,255,.28);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.cta__icon {
  display: grid;
  place-items: center;
  flex: 0 0 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(23,18,10,.14);
}
.cta__icon svg { width: 1.6rem; height: 1.6rem; }

.cta__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cta__text strong { font-size: 1rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.cta__text small  { font-size: .78rem; font-weight: 500; opacity: .78; line-height: 1.3; }

/* Barrido de brillo */
.cta__pulse {
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  animation: sweep 4.5s cubic-bezier(.5,0,.5,1) 1.5s infinite;
}
@keyframes sweep {
  0%        { left: -60%; }
  55%, 100% { left: 130%; }
}

/* ═══════════════ Etiquetas de sección ═══════════════ */
.seclabel {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 2rem 0 .8rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.seclabel::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--stroke), transparent);
}

/* ═══════════════ Tarjetas de enlace ═══════════════ */
.links { display: grid; gap: .6rem; }

.link {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem .95rem;
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: var(--surface);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.link__ico {
  display: grid;
  place-items: center;
  flex: 0 0 2.4rem;
  height: 2.4rem;
  border-radius: 11px;
  color: var(--amber-2);
  background: var(--amber-dim);
  border: 1px solid rgba(240,135,31,.2);
}
.link__ico svg { width: 1.25rem; height: 1.25rem; }

.link__ico--ghost {
  color: var(--muted);
  background: rgba(255,255,255,.05);
  border-color: var(--stroke);
}

.link__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.link__body strong {
  font-size: .93rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
}
.link__body small {
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link__chev {
  flex: 0 0 auto;
  width: .95rem;
  height: .95rem;
  color: var(--muted);
  opacity: .5;
  transition: transform .2s ease, opacity .2s ease, color .2s ease;
}

.link--sm { padding: .72rem .9rem; }
.link--sm .link__ico { flex-basis: 2.15rem; height: 2.15rem; }
.link--sm .link__body strong { font-size: .88rem; }

/* ═══════════════ Acciones secundarias ═══════════════ */
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-top: 1.4rem;
}

.action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .72rem .5rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  background: rgba(255,255,255,.03);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.action svg { width: 1.05rem; height: 1.05rem; flex: none; }

/* ═══════════════ Redes ═══════════════ */
.socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
}

.socials a {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--text);
  border: 1px solid var(--stroke);
  border-radius: 50%;
  background: var(--surface);
  transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.socials svg { width: 1.3rem; height: 1.3rem; }

/* ═══════════════ Pie ═══════════════ */
.foot { margin-top: 2.5rem; text-align: center; }

.foot__tag {
  font-family: Sora, Inter, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--muted);
}
.foot__tag b {
  background: linear-gradient(90deg, var(--amber), var(--amber-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.foot__legal {
  margin-top: .55rem;
  font-size: .72rem;
  color: var(--muted);
  opacity: .65;
}

/* ═══════════════ Toast ═══════════════ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 40;
  padding: .65rem 1.1rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: rgba(20, 25, 34, .95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  transform: translate(-50%, 1.5rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ═══════════════ Animación de entrada ═══════════════ */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise .55s cubic-bezier(.2,.7,.3,1) forwards;
}
.reveal:nth-child(1) { animation-delay: .04s; }
.reveal:nth-child(2) { animation-delay: .10s; }
.reveal:nth-child(3) { animation-delay: .16s; }
.reveal:nth-child(4) { animation-delay: .22s; }
.reveal:nth-child(5) { animation-delay: .28s; }
.reveal:nth-child(6) { animation-delay: .34s; }
.reveal:nth-child(7) { animation-delay: .40s; }
.reveal:nth-child(8) { animation-delay: .46s; }
.reveal:nth-child(n+9) { animation-delay: .52s; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* ═══════════════ Interacción (solo punteros finos) ═══════════
   En móvil evitamos :hover pegajoso; usamos :active. */
.cta:active, .link:active, .action:active { transform: scale(.985); }
.socials a:active { transform: scale(.92); }

@media (hover: hover) and (pointer: fine) {
  .cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 34px -10px rgba(240,135,31,.75), inset 0 1px 0 rgba(255,255,255,.28);
  }
  .link:hover {
    transform: translateY(-2px);
    background: var(--surface-h);
    border-color: var(--stroke-h);
  }
  .link:hover .link__chev { transform: translateX(3px); opacity: 1; color: var(--amber); }
  .action:hover { color: var(--text); background: var(--surface-h); border-color: var(--stroke-h); }
  .socials a:hover { transform: translateY(-3px); color: var(--amber-2); border-color: var(--stroke-h); background: var(--surface-h); }
  .langswitch__btn:not(.is-active):hover { color: var(--text); }
}

/* ═══════════════ Puntos de quiebre ═══════════════ */

/* Móviles muy estrechos (≤360px) */
@media (max-width: 22.5rem) {
  .wrap { padding-inline: .9rem; }
  .hero__avatar { width: 6.25rem; height: 6.25rem; }
  .cta { gap: .7rem; padding: .9rem 1rem; }
  .cta__icon { flex-basis: 2.4rem; height: 2.4rem; }
  .cta__text strong { font-size: .93rem; }
  .chip { font-size: .68rem; }
}

/* Tablet y escritorio: molinos en dos columnas */
@media (min-width: 36rem) {
  :root { --wrap: 38rem; }
  .wrap { padding-bottom: 4.5rem; }
  .hero { padding-top: 1rem; }
  .hero__avatar { width: 8.25rem; height: 8.25rem; }
  .links--grid { grid-template-columns: 1fr 1fr; }
  /* La quinta tarjeta ocupa el ancho completo para no dejar hueco */
  .links--grid .link:nth-child(5) { grid-column: 1 / -1; }
  .socials a { width: 3.25rem; height: 3.25rem; }
}

@media (min-width: 60rem) {
  .wrap { padding-bottom: 5.5rem; }
  .topbar { padding-top: 1.4rem; }
}

/* ═══════════════ Accesibilidad y preferencias ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .cta__pulse { display: none; }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #B9C4D2;
    --stroke: rgba(255,255,255,.28);
    --surface: rgba(255,255,255,.09);
  }
}

/* ═══════════════ Impresión ═══════════════ */
@media print {
  .glow, .topbar, .actions, .cta__pulse, .link__chev { display: none !important; }
  body { background: #fff; color: #000; }
  .link, .cta, .socials a { border-color: #bbb; background: none; box-shadow: none; color: #000; }
  .hero__role, .foot__tag b { -webkit-text-fill-color: #B45309; color: #B45309; }
  .link[href]::after { content: " (" attr(href) ")"; font-size: .65rem; color: #555; }
}