/* ==========================================================================
   rediseno.css · Capa de rediseño v1 — Francisco Sosa García
   --------------------------------------------------------------------------
   · Se carga DESPUÉS de los estilos de cada página: no cambia contenido,
     textos ni traducciones.
   · Conserva la paleta (negro cálido, hueso, rojo-naranja, dorado) y las
     tipografías (Barlow Condensed, Lora, DM Mono).
   · Para volver al diseño anterior: quitar de index.html y diplomas.html
     el <link> a este archivo y el <script> de rediseno.js.
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  --black: #0b0a09;                       /* negro cálido (antes #0a0a0a) */
  --mid: #151311;
  --raised: #1c1916;
  --white: #f5f2ec;
  --accent: #e4411b;                      /* mismo rojo-naranja, menos saturado */
  --accent-soft: rgba(228, 65, 27, 0.16);
  --gold: #c9a84c;
  --muted: #a39d92;                       /* gris cálido con más contraste */
  --border: rgba(245, 242, 236, 0.1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-grain: 60;
  --z-progress: 150;
}

html { scroll-padding-top: 84px; }
::selection { background: var(--accent); color: var(--white); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
a, button { -webkit-tap-highlight-color: transparent; }

/* Grano sutil: rompe la planitud digital */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Barra de progreso de lectura */
.rd-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: var(--z-progress);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--accent), var(--gold));
  pointer-events: none;
}

/* ── 2. Navegación ─────────────────────────────────────────────────────── */
nav {
  background: rgba(11, 10, 9, 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
.nav-links a { position: relative; transition: color 0.25s; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.is-active::after { transform: scaleX(1); }
.nav-links a.is-active { color: var(--white); }
.nav-cta,
.btn-primary,
.btn-ghost,
.contact-item,
.contact-btn {
  transition: transform 0.35s var(--ease), background 0.25s, border-color 0.25s, box-shadow 0.35s var(--ease), color 0.25s;
}
.nav-cta:hover,
.btn-primary:hover { box-shadow: 0 14px 34px -10px rgba(228, 65, 27, 0.75); }
.nav-cta:active, .btn-primary:active, .btn-ghost:active,
.contact-item:active, .contact-btn:active { transform: scale(0.97); }

/* ── 3. Tipografía global ──────────────────────────────────────────────── */
h2 { letter-spacing: -0.015em; text-wrap: balance; }
html.rd-index .section-label::before {
  counter-increment: rd-sec;
  content: counter(rd-sec, decimal-leading-zero) " /";
  color: var(--gold);
}
body { counter-reset: rd-sec; }
p, .timeline-desc, .testi-quote, .exp-desc { text-wrap: pretty; }
.about-body p { max-width: 62ch; line-height: 1.85; }

/* ── 4. Hero ───────────────────────────────────────────────────────────── */
#hero {
  isolation: isolate;
  min-height: 100dvh;
  background:
    linear-gradient(rgba(245, 242, 236, 0.03) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(90deg, rgba(245, 242, 236, 0.03) 1px, transparent 1px) 0 0 / 80px 80px;
}
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 62% at 76% 48%, rgba(228, 65, 27, 0.26), transparent 70%),
    radial-gradient(38% 46% at 6% 96%, rgba(201, 168, 76, 0.11), transparent 70%);
}
#hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 70%) var(--my, 40%), rgba(245, 242, 236, 0.07), transparent 60%);
}
#hero h1 {
  font-size: clamp(3.8rem, 6.6vw, 7.6rem);
  line-height: 0.88;
  letter-spacing: -0.025em;
}
#hero .hero-text { padding-top: 4.5rem; padding-bottom: 4rem; }
#hero .hero-stats { margin-top: 2.6rem; padding-top: 2rem; }
/* Titular: se oculta hasta que el script lo divide en líneas (con salvavidas) */
html.rd #hero h1 { visibility: hidden; animation: rd-show 0s 1.6s forwards; }
html.rd #hero h1.is-split { visibility: visible; animation: none; }
@keyframes rd-show { to { visibility: visible; } }
.rd-line { display: block; overflow: hidden; padding: 0.04em 0 0.08em; }
.rd-line > span { display: block; transform: translateY(108%); animation: rd-rise 1.1s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 0.13s + 0.1s); }
@keyframes rd-rise { to { transform: none; } }
.rd-line em { display: block; }
#hero h1.is-split em {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--gold);
  transition: color 1.1s ease 1.3s;
}
#hero h1.is-filled em { color: var(--gold); }
.hero-sub { max-width: 46ch; }

.stat-num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hero-stats > div { position: relative; }
.hero-stats > div + div::before {
  content: "";
  position: absolute;
  left: -1.5rem; top: 0.3rem; bottom: 0.2rem;
  width: 1px;
  background: var(--border);
}

/* Foto: anillo giratorio de texto + resplandor */
.rd-orbit {
  position: relative;
  place-self: center;
  width: clamp(290px, 33vw, 480px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.rd-orbit .hero-image {
  width: 74%;
  height: 74%;
  margin: 0;
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(245, 242, 236, 0.16), 0 36px 80px -24px rgba(0, 0, 0, 0.85);
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0);
  transition: transform 0.25s ease-out;
}
.rd-orbit .hero-photo {
  -webkit-filter: grayscale(0.92) contrast(1.08);
  filter: grayscale(0.92) contrast(1.08);
  transition: filter 0.7s ease, transform 1.4s var(--ease);
}
.rd-orbit:hover .hero-photo { -webkit-filter: grayscale(0) contrast(1.05); filter: grayscale(0) contrast(1.05); transform: scale(1.05); }
.rd-glow {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--gold), transparent 38%, var(--accent));
  filter: blur(34px);
  opacity: 0.5;
  animation: rd-spin 16s linear infinite;
}
.rd-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  animation: rd-spin 46s linear infinite;
  overflow: visible;
}
.rd-ring text {
  font-family: 'DM Mono', monospace;
  font-size: 9.6px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  fill: var(--muted);
}
.rd-ring .rd-ring-dot { fill: var(--accent); }
@keyframes rd-spin { to { transform: rotate(360deg); } }

/* Cinta de palabras: inclinada, con sombra de color, pausa al pasar el cursor.
   El contenedor recorta lo que sobresale para no ensanchar la página. */
.rd-tickerbox {
  position: relative;
  z-index: 4;
  overflow: hidden;
  margin-top: -2.2rem;
  padding: 1.6rem 0 2.4rem;
  pointer-events: none;
}
.rd-tickerbox .ticker-wrap {
  width: 104%;
  margin: 0 -2%;
  padding: 0.95rem 0;
  transform: rotate(-1.3deg);
  box-shadow: 0 18px 44px -20px rgba(228, 65, 27, 0.6);
  pointer-events: auto;
}
.ticker-wrap:hover .ticker { animation-play-state: paused; }

/* ── 5. Secciones ──────────────────────────────────────────────────────── */
section { position: relative; }
#about { padding-top: 9rem; }
#about::before, #education::before, #languages::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(46% 60% at 100% 0%, rgba(201, 168, 76, 0.07), transparent 70%);
}
.about-quote em { background: linear-gradient(transparent 62%, rgba(228, 65, 27, 0.35) 62%); }
.tag { transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s var(--ease); }
.tag:hover { background: var(--gold); color: var(--black); border-color: var(--gold); transform: translateY(-2px); }

/* ── 6. Áreas de impacto: bento con foco de luz ────────────────────────── */
.expertise-grid {
  gap: 1px;
  background: var(--border);
}
.expertise-grid .expertise-card {
  border: 0;
  background:
    radial-gradient(340px circle at var(--mx, -999px) var(--my, -999px), rgba(228, 65, 27, 0.17), transparent 62%),
    var(--black);
  transition: transform 0.45s var(--ease);
}
.expertise-grid .expertise-card:hover { transform: translateY(-3px); }
.exp-num {
  -webkit-text-stroke: 1px rgba(201, 168, 76, 0.45);
  color: transparent;
  transition: color 0.4s, -webkit-text-stroke-color 0.4s;
}
.expertise-card:hover .exp-num { color: rgba(228, 65, 27, 0.2); -webkit-text-stroke-color: var(--accent); }
.exp-title { letter-spacing: 0.01em; padding-right: 3.4rem; }
@media (min-width: 1025px) {
  .expertise-grid .expertise-card:nth-child(1),
  .expertise-grid .expertise-card:nth-child(6),
  .expertise-grid .expertise-card:nth-child(7),
  .expertise-grid .expertise-card:nth-child(8) { grid-column: span 2; }
  .expertise-grid .expertise-card:nth-child(1) { padding-top: 3.2rem; padding-bottom: 3.2rem; }
}

/* ── 7. Trayectoria: línea de tiempo que se dibuja al hacer scroll ─────── */
.timeline { position: relative; }
.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  left: 234px;
  top: 2.5rem;
  width: 1px;
  pointer-events: none;
}
.timeline::before { bottom: 2.5rem; background: var(--border); }
.timeline::after {
  height: calc(var(--tl, 0) * 1px);
  max-height: calc(100% - 5rem);
  background: linear-gradient(var(--accent), var(--gold));
  box-shadow: 0 0 14px rgba(228, 65, 27, 0.55);
}
.timeline-item { position: relative; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: 229px;
  top: calc(2.5rem + 0.45rem);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--mid);
  border: 1px solid rgba(245, 242, 236, 0.28);
  z-index: 1;
  transition: background 0.5s, border-color 0.5s, box-shadow 0.5s;
}
.timeline-item.in::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.timeline-item > div:last-child { transition: transform 0.5s var(--ease); }
.timeline-item:hover > div:last-child { transform: translateX(8px); }
.timeline-org { transition: color 0.3s; }
.timeline-item:hover .timeline-org { color: var(--gold); }
.timeline-period { font-variant-numeric: tabular-nums; }
.timeline-desc { max-width: 70ch; color: #b2ada3; }

/* ── 8. Formación ──────────────────────────────────────────────────────── */
.edu-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(360px circle at var(--mx, -999px) var(--my, -999px), rgba(201, 168, 76, 0.13), transparent 62%),
    var(--raised);
  transition: transform 0.45s var(--ease);
}
.edu-card::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.edu-card:hover { transform: translateY(-4px); }
.edu-card:hover::after { transform: scaleX(1); }

/* ── 9. Referencias: muro en columnas ──────────────────────────────────── */
.testi-grid {
  display: block;
  columns: 2;
  column-gap: 1.25rem;
}
.testi-card {
  position: relative;
  break-inside: avoid;
  margin: 0 0 1.25rem;
  border: 1px solid var(--border);
  background:
    radial-gradient(380px circle at var(--mx, -999px) var(--my, -999px), rgba(228, 65, 27, 0.14), transparent 62%),
    linear-gradient(180deg, var(--raised), var(--mid));
  transition: transform 0.45s var(--ease), border-color 0.3s;
}
.testi-card:hover { transform: translateY(-4px); border-color: rgba(228, 65, 27, 0.55); background:
    radial-gradient(380px circle at var(--mx, -999px) var(--my, -999px), rgba(228, 65, 27, 0.14), transparent 62%),
    linear-gradient(180deg, var(--raised), var(--mid)); }
.testi-quote { color: #d3cec4; max-width: 62ch; }

/* ── 10. Idiomas ───────────────────────────────────────────────────────── */
.lang-row { gap: 0; background: var(--border); border: 1px solid var(--border); }
.lang-item {
  flex: 1 1 200px;
  border: 0;
  background:
    radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgba(228, 65, 27, 0.16), transparent 62%),
    var(--mid);
}
.lang-name { transition: color 0.3s, letter-spacing 0.5s var(--ease); }
.lang-item:hover .lang-name { color: var(--gold); letter-spacing: 0.04em; }

/* ── 11. Diplomas (bloque de enlace), contacto y pie ───────────────────── */
#diplomas-cta { position: relative; overflow: hidden; }
#diplomas-cta::before {
  content: "";
  position: absolute;
  right: -8%; top: -60%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(228, 65, 27, 0.18), transparent 65%);
  pointer-events: none;
}
#diplomas-cta .btn-primary { position: relative; z-index: 1; }
#contact::after {
  content: "";
  position: absolute;
  right: -12%; top: -35%;
  width: 58%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 64%);
  pointer-events: none;
}
.contact-item:hover, .contact-btn:hover { transform: translateY(-3px); }
.whatsapp-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0;
  animation: rd-pulse 2.8s ease-out infinite;
  pointer-events: none;
}
@keyframes rd-pulse { 0% { transform: scale(1); opacity: 0.65; } 80%, 100% { transform: scale(1.7); opacity: 0; } }

/* ── 12. Diplomas: menú de categorías ──────────────────────────────────── */
.rd-dip-stats {
  display: flex;
  gap: 3rem;
  margin-top: 2.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--border);
  width: fit-content;
}
.rd-dip-stats .stat-num { font-size: 3.2rem; }
/* la hoja de la página solo anima 4 hijos del bloque; este es el quinto */
.stack-group > .rd-dip-stats { opacity: 0; transform: translateY(22px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.stack-group.in > .rd-dip-stats { opacity: 1; transform: none; transition-delay: 0.4s; }

.rd-cats {
  position: sticky;
  top: 3.9rem;
  z-index: 90;
  margin: 0 -6rem 3.5rem;
  padding: 0.9rem 6rem;
  background: rgba(11, 10, 9, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.rd-cats-track {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding: 0.15rem 0;
  /* degradado en los bordes: sugiere que hay más chips al desplazar */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
}
.rd-cats-track::-webkit-scrollbar { display: none; }
.rd-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  transition: color 0.25s, background 0.25s, border-color 0.25s, transform 0.3s var(--ease);
}
.rd-chip b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  transition: color 0.25s;
}
.rd-chip:hover { color: var(--white); border-color: rgba(245, 242, 236, 0.35); transform: translateY(-2px); }
.rd-chip:active { transform: scale(0.97); }
.rd-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--white); }
.rd-chip[aria-pressed="true"] b { color: var(--white); }

.rd-cat { margin-bottom: 5.5rem; scroll-margin-top: 9rem; }
.rd-cat[hidden] { display: none; }
.rd-cat.is-entering { animation: rd-fade 0.6s var(--ease) both; }
@keyframes rd-fade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rd-cat-head {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 1.8rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
}
.rd-cat-num {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.rd-cat-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--white);
  text-wrap: balance;
}
.rd-cat-count {
  margin-left: auto;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.rd-cat-count b { color: var(--gold); font-weight: 500; font-variant-numeric: tabular-nums; }
.rd-sub {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.2rem 0 1rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.rd-sub::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.rd-sub:first-of-type { margin-top: 0; }
.rd-cat .diplomas-grid { gap: 14px; }
.rd-cat .diploma-card {
  border: 1px solid var(--border);
  background: var(--raised);
  transition: transform 0.5s var(--ease), border-color 0.3s, box-shadow 0.5s var(--ease);
}
.rd-cat .diploma-card:hover {
  transform: translateY(-5px);
  border-color: rgba(228, 65, 27, 0.6);
  box-shadow: 0 26px 50px -26px rgba(228, 65, 27, 0.55);
}
.rd-cat .diploma-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(300px circle at var(--mx, -999px) var(--my, -999px), rgba(245, 242, 236, 0.1), transparent 62%);
}
.rd-empty { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 0.8rem; }

/* ── 13. Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .rd-orbit { width: min(78vw, 400px); margin: 1rem auto 0; }
  .testi-grid { columns: 1; }
  .rd-cats { margin: 0 -3rem 3rem; padding: 0.8rem 3rem; }
}
@media (max-width: 768px) {
  #hero h1 { font-size: clamp(3.6rem, 17vw, 6rem); }
  .timeline::before, .timeline::after, .timeline-item::before { display: none; }
  .hero-stats > div + div::before { display: none; }
  .rd-tickerbox { margin-top: -1rem; }
  #about { padding-top: 5rem; }
  .rd-cats { margin: 0 -1.5rem 2.5rem; padding: 0.7rem 1.5rem; top: 3.4rem; }
  .rd-cat { margin-bottom: 4rem; }
  .rd-cat-head { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .rd-cat-count { margin-left: 0; width: 100%; }
  .rd-dip-stats { gap: 2rem; }
}

/* ── 14. Accesibilidad: movimiento reducido ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; scroll-behavior: auto !important; }
  html.rd #hero h1 { visibility: visible; }
  .rd-line > span { transform: none; }
  .rd-glow, .rd-ring { animation: none; }
}