/* ============================================================
   Portada (p-home) y 404
   Arte propio de la página: retrato en órbita, portadas de las
   tarjetas de perfil, trayectoria (Sobre mí), valores, laurel
   (Formación), programa lineal del recuadro y avión del contacto.
   Colores solo con tokens; todo lo decorativo va con aria-hidden.
   ============================================================ */

/* Tonos de las cuatro áreas, para piezas sueltas */
.t-research { --tone: var(--c-research); }
.t-growth   { --tone: var(--c-growth); }
.t-data     { --tone: var(--c-data); }
.t-teach    { --tone: var(--c-teach); }
.t-sigma    { --tone: var(--accent); }

/* ---------- Héroe: retrato en órbita ---------- */
.hero-visual {
  position: relative;
  isolation: isolate;
  width: clamp(290px, 34vw, 410px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

/* Halo suave detrás del retrato */
.hero-visual::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 20%, transparent), transparent);
}

.hv-orbits {
  position: absolute;
  z-index: -1;
  inset: 0;
}

.hv-dot circle { fill: var(--tone); }
.hv-rev { animation-direction: reverse; }

.hero-visual .portrait {
  width: 60%;
  border: 0;
  box-shadow:
    0 0 0 6px var(--surface),
    0 0 0 7px color-mix(in srgb, var(--accent) 22%, transparent),
    0 26px 50px -24px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* Insignias de las áreas sobre el anillo (ángulos de un pentágono) */
.hv-node {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  animation: hv-pop 0.7s var(--ease-out) var(--pop-delay, 0.3s) both;
}

.hv-node.t-research { left: 25.8%; top: 16.6%; --pop-delay: 0.25s; }
.hv-node.t-growth   { left: 74.2%; top: 16.6%; --pop-delay: 0.4s; }
.hv-node.t-data     { left: 89.2%; top: 62.7%; --pop-delay: 0.55s; }
.hv-node.t-sigma    { left: 50%;   top: 91.3%; --pop-delay: 0.7s; }
.hv-node.t-teach    { left: 10.8%; top: 62.7%; --pop-delay: 0.85s; }

.hv-node .icon-badge {
  --amp: 5px;
  --dur: 7s;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 12%, var(--surface));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--tone) 30%, transparent),
    0 10px 22px -12px color-mix(in srgb, var(--tone) 80%, transparent);
}

.hv-node .icon { stroke-width: 2.3; }

.hv-node .icon-badge.solid {
  color: var(--surface);
  background: var(--accent);
}

@keyframes hv-pop {
  from { opacity: 0; transform: scale(0.4); }
}

/* Chip de IA con un destello; encabeza la fila de datos */
.p-home .chip-ai {
  order: -1;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.p-home .chip-ai::before {
  content: "";
  width: 0.85em;
  height: 0.85em;
  flex: none;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: blink 5s linear infinite;
}

@media (max-width: 720px) {
  .hero-visual {
    order: -1;
    justify-self: center;
    width: min(300px, 84vw);
  }
  .hero-visual .portrait { width: 60%; }
}

/* ---------- Tarjetas de perfil con portada ilustrada ---------- */
.card-slot { display: flex; }
.card-slot > .profile-card { flex: 1; }

.card-art {
  --art-ink: var(--card-accent);
  --art-muted: color-mix(in srgb, var(--card-accent) 38%, transparent);
  --art-fill: color-mix(in srgb, var(--card-accent) 14%, var(--surface));
  --art-bg: var(--surface);
  --art-pop: var(--card-accent);
  display: block;
  overflow: hidden;
  margin: -1.6rem -1.5rem 0.5rem;
  padding: 1rem 1.2rem 0.6rem;
  border-bottom: 1px solid color-mix(in srgb, var(--card-accent) 16%, var(--line));
  background:
    radial-gradient(circle, color-mix(in srgb, var(--card-accent) 16%, transparent) 1px, transparent 1.6px) 0 0 / 16px 16px,
    color-mix(in srgb, var(--card-accent) 6%, var(--surface));
}

.card-art .art { overflow: visible; }

/* Piezas que reaccionan al pasar o enfocar la tarjeta */
.card-art :is(.ca-fac, .ca-halo, .ca-nodes circle, .ca-drops, .ca-bar, .ca-arrow, .ca-pts circle, .ca-net circle, .ca-head, .ca-bubble, .ca-pointer) {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.5s var(--ease-out), opacity 0.4s ease;
}

.card-art .ca-soft { opacity: 0.6; }
.card-art .ca-links { opacity: 0.9; }
.card-art .anim-flow { animation-play-state: paused; }
.card-art .ca-halo { opacity: 0; transform: scale(0.5); }
.card-art .ca-bar { transform-origin: bottom; transform: scaleY(0.72); }
.card-art .ca-bar:nth-of-type(2) { transition-delay: 0.05s; }
.card-art .ca-bar:nth-of-type(3) { transition-delay: 0.1s; }
.card-art .ca-bar:nth-of-type(4) { transition-delay: 0.15s; }
.card-art .ca-arrow { transform: translate(10px, -10px); opacity: 0.5; }
.card-art .ca-drops { transform: translateY(-4px); opacity: 0.55; }
.card-art .ca-pointer { transform-origin: 0 100%; transform: rotate(8deg); }
.card-art .ca-bubble { opacity: 0; transform: translateY(6px) scale(0.9); }
.card-art .ca-head:nth-of-type(2) { transition-delay: 0.08s; }

.profile-card:is(:hover, :focus-visible) .card-art .anim-flow { animation-play-state: running; }
.profile-card:is(:hover, :focus-visible) .ca-halo { opacity: 1; transform: scale(1.35); }
.profile-card:is(:hover, :focus-visible) .ca-fac { transform: scale(1.2); }
.profile-card:is(:hover, :focus-visible) .ca-nodes circle { transform: scale(1.2); }
.profile-card:is(:hover, :focus-visible) .ca-bar { transform: scaleY(1); }
.profile-card:is(:hover, :focus-visible) .ca-arrow { transform: none; opacity: 1; }
.profile-card:is(:hover, :focus-visible) .ca-drops { transform: translateY(6px); opacity: 1; }
.profile-card:is(:hover, :focus-visible) .ca-pts circle { transform: scale(1.3); }
.profile-card:is(:hover, :focus-visible) .ca-net circle { transform: scale(1.15); }
.profile-card:is(:hover, :focus-visible) .ca-pointer { transform: none; }
.profile-card:is(:hover, :focus-visible) .ca-head { transform: translateY(-4px); }
.profile-card:is(:hover, :focus-visible) .ca-bubble { opacity: 1; transform: none; }

/* La flecha de "Ver perfil" avanza */
.profile-card .go { transition: transform 0.35s var(--ease-out); }
.profile-card:is(:hover, :focus-visible) .go { transform: translateX(5px); }

/* ---------- Sobre mí: trayectoria ---------- */
/* Disco de fondo de los dibujos de Sobre mí y Formación: se lee en ambos temas */
.art-disc { fill: color-mix(in srgb, var(--accent) 12%, var(--surface)); }

.ab-stars circle { fill: var(--art-muted); }

.ab-node {
  animation: hv-pop 0.6s var(--ease-out) var(--pop-delay, 0.6s) both;
  transform-box: fill-box;
  transform-origin: center;
}

.ab-disc {
  fill: color-mix(in srgb, var(--tone) 12%, var(--surface));
  stroke: var(--tone);
  stroke-width: 1.8;
}

/* Íconos anidados dentro de un dibujo */
.ni {
  overflow: visible;
  fill: none;
  stroke: var(--tone, currentColor);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ni .i-tint { fill: var(--tone, currentColor); fill-opacity: 0.16; }
.ni .i-solid { fill: var(--tone, currentColor); stroke: none; }
.ni .i-faint { opacity: 0.5; }

/* Párrafo de IA resaltado con un destello */
.about-ai {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 2.8rem;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), transparent);
}

.about-ai::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 1.05rem;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--accent);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

/* ---------- Mi compromiso: cuatro pilares ---------- */
.value-grid.service-grid { gap: 1.2rem; }

@media (min-width: 1000px) {
  .value-grid.service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.value-slot { display: flex; }

.value-slot > .service {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1.5rem 1.4rem 1.4rem;
}

.value-slot > .service::before { top: -1px; left: -1px; width: calc(100% + 2px); height: 3px; }

.value-slot > .service:is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

@media (max-width: 599px) {
  /* En el celular: ícono a la izquierda y texto a la derecha */
  .value-slot > .service {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    align-content: start;
  }
  .value-slot > .service > .icon-badge { --badge: 52px; grid-row: span 2; margin-bottom: 0; }
}

/* ---------- Formación: lista con íconos y laurel ---------- */
.edu-split { align-items: start; }
.edu-split .highlight-list .icon-badge { color: var(--accent); }
.edu-split .highlight-list .icon { stroke-width: 2.1; }

/* Topes de los dibujos solo en escritorio; en pantallas chicas mandan los de abajo */
@media (min-width: 821px) {
  .about-art { max-width: 340px; }
  /* El laurel arriba y fijo mientras se recorre la lista */
  .edu-art { max-width: 320px; align-self: start; position: sticky; top: 6rem; }
}

@media (max-width: 820px) {
  .about-art,
  .edu-art { max-width: min(220px, 62%); }
}

.ed-leaves { stroke-width: 1.1; }
.ed-tassel { transform-origin: 50% 0; }

/* ---------- Recuadro de Optimización en Acción ---------- */
.promo.promo-lp {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 1.8rem 2.6rem;
}

.promo-copy {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.promo-art {
  justify-self: center;
  width: 100%;
  max-width: 340px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--accent) 60%, transparent);
  transform: rotate(1.5deg);
}

.promo-art .lp-grid { opacity: 0.45; }

/* Región factible: visible también en modo oscuro */
.promo-art .lp-region { fill: color-mix(in srgb, var(--accent) 18%, var(--surface)); }

/* La recta objetivo avanza hasta tocar el vértice óptimo, que destella */
.lp-iso { animation: lp-sweep 9s var(--ease-io) 1s infinite; }

.lp-hit {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: lp-hit 9s ease-out 1s infinite;
}

@keyframes lp-sweep {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 0.9; }
  60%, 84% { transform: translateX(142px); opacity: 1; }
  95%, 100% { transform: translateX(142px); opacity: 0; }
}

@keyframes lp-hit {
  0%, 57% { transform: scale(0.6); opacity: 0; }
  63% { opacity: 1; }
  88%, 100% { transform: scale(2.4); opacity: 0; }
}

@media (max-width: 820px) {
  .promo.promo-lp { grid-template-columns: 1fr; }
  .promo-art { max-width: min(320px, 100%); transform: none; }
}

/* ---------- 404: ruta perdida de vuelta al centro ---------- */
.nf-art { --art-fill: color-mix(in srgb, var(--surface) 62%, transparent); }

.nf-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: hv-pop 0.6s var(--ease-out) var(--pop-delay, 0.4s) both;
}

.nf-node.t-research { --pop-delay: 0.3s; }
.nf-node.t-growth   { --pop-delay: 0.45s; }
.nf-node.t-data     { --pop-delay: 0.6s; }
.nf-node.t-teach    { --pop-delay: 0.75s; }

/* ---------- Contacto: avión de papel ---------- */
.cta-plane {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: max(24px, calc(50% - 520px));
  width: 250px;
  margin-top: -96px;
  pointer-events: none;
}

.cta-plane .anim-flow { stroke-dasharray: 2 8; }

@media (max-width: 980px) {
  .cta-plane { display: none; }
}

/* ---------- Animaciones propias: esperan al bloque y respetan el movimiento reducido ---------- */
.js .reveal:not(.is-visible) :is(.ab-node, .lp-iso, .lp-hit) { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hv-node,
  .ab-node,
  .nf-node,
  .lp-hit,
  .p-home .chip-ai::before { animation: none !important; }

  .lp-iso { animation: none !important; transform: translateX(142px); opacity: 1; }
  .lp-hit { opacity: 0; }

  .card-art *,
  .profile-card .go { transform: none !important; }
  .card-art .ca-halo,
  .card-art .ca-bubble { opacity: 1; }
  .card-art .ca-halo { opacity: 0.6; }
}