/* ═══════════════════════════════════════════════
   Estilos de la página home (index.html · en/index.html)
   Antes iban en línea: como archivo, el navegador los guarda en caché y
   sirven para las dos versiones de idioma. Variables, nav y pie → shared.css
   ═══════════════════════════════════════════════ */
/* ─── ESTILOS ESPECÍFICOS DE INDEX.HTML ─── */
/* Variables, nav, footer y botones → shared.css  */

/* ─── RESPONSIVE BASE — MOBILE FIRST ─── */
@media (max-width: 640px) {
  #nav { height: 56px; padding: 0 clamp(1rem, 3vw, 1.5rem); }
  .logo { font-size: 16px; }
  .nav-links { gap: 2px; }
  .nav-links a { font-size: 12px; padding: 4px 10px; }
  .nav-cta { padding: 6px 20px !important; min-width: auto !important; font-size: 12px !important; }
  
  h1 { font-size: clamp(28px, 8vw, 48px); }
  h2 { font-size: clamp(24px, 6vw, 40px); }
  
  .c { padding: 0 clamp(16px, 3vw, 24px); }
}

@media (max-width: 768px) {
  #nav { padding: 0 clamp(1rem, 4vw, 2rem); }
  
  h1 { font-size: clamp(32px, 9vw, 64px); }
  h2 { font-size: clamp(24px, 6vw, 44px); }
  
  [class*="grid"] { grid-template-columns: 1fr; gap: clamp(24px, 6vw, 40px); }
}

@media (max-width: 1024px) {
  .c { max-width: calc(100% - 40px); }
  h1 { font-size: clamp(40px, 8vw, 80px); }
}

/* ─── HERO ─── */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  padding: 80px clamp(1.5rem,3vw,2.5rem) 80px;
  display: flex; align-items: center;
  background: var(--white);
  position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(122,123,255,.09) 0%, rgba(122,123,255,.03) 50%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
/* ── Rejilla estática centrada: líneas finas que se difuminan hacia los bordes.
   Sin animación — menos distracción para quien entra al portfolio. ── */
.hero-grid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(17,17,17,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,17,17,.07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 46%, black 0%, black 18%, transparent 72%);
  mask-image: radial-gradient(ellipse 58% 62% at 50% 46%, black 0%, black 18%, transparent 72%);
}
/* El botón "Cómo trabajo" es transparente por diseño: le damos fondo sólido
   para que nunca se le transparente la rejilla detrás. */
.hero-actions .btn-outline {
  background: var(--white);
}

/* ── Textura de grano: da profundidad y personalidad al fondo del hero ── */
.hero-texture {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Single credentials line (replaces pill + cert + badge) ── */
.hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .1px;
  flex-wrap: wrap;
  opacity: 0; animation: fadeUp .8s .42s var(--ease) forwards;
}
.hero-meta-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(60,138,55,.18);
  animation: pulse-gr 2s infinite;
  flex-shrink: 0;
}
.hero-meta-status {
  font-weight: 600;
  color: var(--ink);
}
.hero-meta-item {
  font-weight: 500;
  color: var(--ink);
  opacity: .75;
}
.hero-meta-sep {
  color: var(--muted);
  opacity: .5;
}
@keyframes pulse-gr { 0%,100%{opacity:1} 50%{opacity:.35} }
.hero-social-proof { margin-bottom: 28px; margin-top: -16px; }
.hero-social-proof .hero-meta-item { font-weight: 500; color: var(--muted-light); font-size: 12px; }
.hero-social-proof strong { color: var(--ink); font-weight: 700; }

/* ── CHANGE 1 & 3: Headline all black, each sentence on its own line ── */
.hero-h1 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4.2vw, 58px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -1.6px;
  color: var(--ink);
  margin-bottom: 28px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  opacity: 0; animation: fadeUp .8s .18s var(--ease) forwards;
}

.hero-left {
  width: 100%;
}

/* Antetítulo del hero: las tres disciplinas como una fórmula.
   Mayúsculas finas con tracking amplio; los «+» en gris, más ligeros,
   para que la lectura caiga en las palabras. Entra en cascada antes del H1. */
.hero-eyebrow {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: .7em; row-gap: 4px;
  margin-bottom: 22px;
  font-family: var(--font);
  font-size: 11.5px; font-weight: 600; line-height: 1.5;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
  font-kerning: normal;
}
.hero-eyebrow .he-item,
.hero-eyebrow .he-plus {
  display: inline-block;
  opacity: 0;
  animation: heroEyebrowIn .9s var(--ease) forwards;
}
.hero-eyebrow .he-plus {
  font-size: 1.25em; line-height: 1;
  font-weight: 300; letter-spacing: 0;
  color: var(--muted);
  transform-origin: 50% 60%;
}
.hero-eyebrow > :nth-child(1) { animation-delay: .02s; }
.hero-eyebrow > :nth-child(2) { animation-delay: .10s; }
.hero-eyebrow > :nth-child(3) { animation-delay: .14s; }
.hero-eyebrow > :nth-child(4) { animation-delay: .22s; }
.hero-eyebrow > :nth-child(5) { animation-delay: .26s; }
/* Solo opacidad y desplazamiento: un filter (blur) en la animación hace que
   Safari en iPhone recorte el texto a su caja y deje palabras cortadas o sin pintar. */
@keyframes heroEyebrowIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
  .hero-eyebrow { font-size: 10.5px; letter-spacing: .14em; column-gap: .55em; margin-bottom: 18px; }
}

.hero-sub {
  font-size: 16px; color: var(--muted);
  line-height: 1.75; max-width: 100%;
  margin-bottom: 24px; font-weight: 400;
  opacity: 0; animation: fadeUp .8s .32s var(--ease) forwards;
}
.hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  opacity: 0; animation: fadeUp .8s .62s var(--ease) forwards;
}

/* ─── HERO DASHBOARD ─── */

/* Anotación manuscrita: invita a pasar el ratón sobre el dashboard.
   Señala una interacción que YA existe (ver filter:grayscale más abajo) — no crea ninguna nueva.
   Oculta por defecto y revelada solo donde el hover real existe, para no ser una pista engañosa en touch. */
.hero-annotation {
  display: none;
  position: absolute;
  top: -52px;
  /* Alinea con el borde derecho REAL del dashboard-frame (min(640px,110%) — misma fórmula que su width),
     no con el de .hero-right, que es más ancho porque se estira a toda la columna del grid. */
  left: calc(min(640px, 110%) - 92px);
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  animation: fadeUp 1s 1.4s var(--ease) forwards;
}
@media (hover: hover) and (pointer: fine) {
  .hero-annotation { display: flex; }
}
.hero-annotation-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .1px;
  color: rgba(17,17,17,.34);
  white-space: nowrap;
  line-height: 1;
  transform: rotate(-2deg);
}
.hero-annotation-arrow { color: rgba(17,17,17,.28); flex-shrink: 0; }

.hero-right {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* Empuja el dashboard hacia fuera del viewport por la derecha
     para sugerir que hay más detrás. Sutil, no agresivo. */
  margin-right: clamp(-180px, -8vw, -60px);
}
.hero-right .dashboard-frame {
  width: min(640px, 110%);
  transform-origin: left center;
}

.dashboard-frame {
  background: #fbfbfb;
  border: .5px solid var(--gray);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(122,123,255,.08),
    0 8px 24px rgba(0,0,0,.06),
    0 32px 80px rgba(0,0,0,.1);
  position: relative;
  transition: filter .6s var(--ease), background .6s var(--ease);
}
.dashboard-frame::before { content: none; }

.df-titlebar {
  background: #fbfbfb;
  padding: 10px 15px;
  display: flex; align-items: center; gap: 6px;
  border-bottom: .5px solid var(--gray);
  transition: background .6s var(--ease);
}

/* Arranca en gris (fuera de paleta) y revela el color real al pasar el ratón —
   demuestra por qué elegir bien el color importa en data storytelling.
   Solo en dispositivos con hover real: en touch el dashboard se ve siempre en color,
   ya que no hay forma de "pasar el ratón" para revelarlo. */
@media (hover: hover) and (pointer: fine) {
  .dashboard-frame { filter: grayscale(1); }
  .dashboard-frame:hover { filter: grayscale(0); }
}
.df-dot { width: 9px; height: 9px; border-radius: 50%; }
.df-omnibox {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  background: #ffffff;
  border: .5px solid #e6e6ee;
  border-radius: 6px;
  padding: 4px 9px;
  margin-left: 8px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
.df-omnibox > svg { width: 9px; height: 9px; flex-shrink: 0; }
.df-omnibox-refresh { margin-left: auto; }
.df-omnibox-url {
  font-size: 9.5px; letter-spacing: .2px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.df-omnibox-scheme, .df-omnibox-path { color: #b6b6c4; }
.df-omnibox-url b { color: var(--ink); font-weight: 600; }

.df-header {
  padding: 12px 14px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.df-title { font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: -.2px; }
.df-period {
  font-size: 9px; font-weight: 600;
  background: var(--purple-light); color: var(--purple);
  padding: 3px 8px; border-radius: 5px;
  text-transform: uppercase; letter-spacing: .7px;
}

.df-body { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 9px; }

/* KPI row */
.df-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.dk {
  background: #ffffff;
  border: .5px solid #e8e8ee;
  border-radius: 8px;
  padding: 11px 12px;
  position: relative;
  overflow: hidden;
}
.dk::before { content: none; }
.dk-label { font-size: 7.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .7px; margin-bottom: 5px; }
.dk-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 2px; margin-bottom: 4px; }
.dk-value { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -1px; line-height: 1; }
.dk-pos { display: inline-flex; align-items: center; gap: 3px; font-size: 7.5px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: var(--green-light); color: var(--green); }
.dk-neg { display: inline-flex; align-items: center; gap: 3px; font-size: 7.5px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: var(--red-light); color: var(--red); }
.dk-vs { font-size: 6.5px; color: var(--muted-light); font-weight: 500; display: inline-flex; align-items: center; margin-left: 5px; }

/* charts row */
.df-card {
  background: #ffffff; border: .5px solid #e8e8ee;
  border-radius: 8px; padding: 11px 12px;
  position: relative;
}
.dc-label { font-size: 7.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .7px; margin-bottom: 1px; }

/* Tooltip flotante del dumbbell (SVG dibujado a mano, sin tooltip nativo de Chart.js) */
.db-tooltip {
  position: absolute; pointer-events: none; z-index: 10;
  background: var(--ink); color: #fff; font-size: 8.5px; font-weight: 600;
  padding: 6px 9px; border-radius: 5px; white-space: nowrap;
  opacity: 0; transform: translate(-50%,-100%); transition: opacity .12s ease;
}
.db-tooltip.is-visible { opacity: 1; }
.db-tooltip b { font-weight: 800; }

/* Iconos de cabecera de visual (filtro / más opciones), como en un informe Power BI real */
.viz-actions { position: absolute; top: 7px; right: 8px; display: flex; gap: 5px; opacity: 0; transition: opacity .15s ease; }
.viz-ic { width: 10px; height: 10px; color: #b3b3c2; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .df-card:hover .viz-actions, .dk:hover .viz-actions, .df-ranking:hover .viz-actions { opacity: 1; }
}

/* ranking */
.df-ranking { background: #ffffff; border: .5px solid #e8e8ee; border-radius: 8px; padding: 11px 12px; position: relative; }
/* Tabla de detalle estilo informe BI */
.dt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dt th {
  font-size: 6.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); text-align: right; padding: 0 0 5px 10px;
  border-bottom: .5px solid #e8e8ee; white-space: nowrap;
}
.dt th:first-child { text-align: left; padding-left: 0; }
.dt td {
  font-size: 9px; font-weight: 600; text-align: right; padding: 4.5px 0 4.5px 10px;
  border-bottom: .5px solid #f3f3f7; color: var(--ink); white-space: nowrap;
}
.dt td:first-child { text-align: left; padding-left: 0; font-weight: 700; }
.dt tr:last-child td { border-bottom: none; }
.dt-zone { display: inline-flex; align-items: center; gap: 5px; }
.dt-rk { font-size: 7px; color: #b9b9c6; font-weight: 700; min-width: 9px; display: inline-block; }
.dt-sales { position: relative; }
.dt-bar { position: absolute; left: 0; top: 50%; width: 100%; height: 13px; background: rgba(122,123,255,.16); border-radius: 2px; z-index: 0; transform: translateY(-50%) scaleX(0); transform-origin: left; }
.dt-v { position: relative; z-index: 1; padding-left: 4px; }
.dt-chip { display: inline-block; font-size: 7.5px; font-weight: 700; padding: 1.5px 5px; border-radius: 3px; }
.dt-chip.pos { background: var(--green-light); color: var(--green); }
.dt-chip.neg { background: var(--red-light); color: var(--red); }
.dt-obj { font-weight: 700; }
.dt-obj.ok { color: var(--green); }
.dt-obj.warn { color: #b07a00; }
.dt-obj.bad { color: var(--red); }
.dt tr.dt-total td { border-top: .5px solid #d8d8e2; border-bottom: none; padding-top: 5px; font-weight: 800; }
.dr-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }

/* ── Barra de filtros (slicers) ── */
.df-filters { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; position: relative; z-index: 5; }
.df-filter { position: relative; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; font-size: 8.5px; font-weight: 600; color: var(--ink); background: #fff; border: .5px solid #dcdce6; border-radius: 5px; padding: 3px 7px 3px 8px; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.df-filter:hover { border-color: #b9b9d4; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.df-filter-lbl { color: var(--muted); font-weight: 600; }
.df-filter-val { color: var(--ink); font-weight: 700; }
.df-filter-arrow { font-size: 6px; color: var(--muted-light); margin-left: 1px; transition: transform .15s; }
.df-filter.is-open .df-filter-arrow { transform: rotate(180deg); }
.df-filter.is-active { background: var(--purple-light); border-color: rgba(122,123,255,.35); }
.df-filter.is-active .df-filter-val { color: var(--purple); }
.df-filter-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; background: #fff; border: .5px solid #e0e0ea; border-radius: 7px; box-shadow: 0 6px 20px rgba(0,0,0,.14); padding: 4px; min-width: 104px; z-index: 20; max-height: 150px; overflow-y: auto; }
.df-filter-opt { display: flex; align-items: center; font-size: 8.5px; font-weight: 600; color: var(--ink); padding: 4.5px 7px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.df-filter-opt:hover { background: #f2f2f7; }
.df-filter-opt.is-selected { color: var(--purple); background: var(--purple-light); }
.df-filter-opt.is-reset { color: var(--muted); border-bottom: .5px solid #eee; margin-bottom: 2px; border-radius: 0; padding-bottom: 6px; }

/* ── Estados de resaltado (highlight/dim) compartidos por dumbbell y tabla de producto ── */
.db-row { transition: opacity .3s ease; }
.db-line { transition: x1 .45s ease, x2 .45s ease, stroke .25s ease; }
.db-dot-a, .db-dot-b { transition: cx .45s ease, r .3s ease, fill .25s ease; }
.db-val { transition: x .45s ease, fill .25s ease; }
.db-row.is-dim { opacity: .42; }
.db-row.is-dim .db-line, .db-row.is-dim .db-dot-b { stroke: #d7d7e2 !important; fill: #d7d7e2 !important; }
.db-row.is-dim .db-val { fill: #b9b9c6 !important; }
.db-row.is-hl .db-line, .db-row.is-hl .db-dot-b { stroke: var(--purple) !important; fill: var(--purple) !important; }
.db-row.is-hl .db-val { fill: var(--purple) !important; }

.dt tr { transition: opacity .3s ease; }
.dt tr.is-dim { opacity: .45; }
.dt tr.is-dim td { color: #b9b9c6 !important; }
.dt tr.is-dim .dt-bar { background: rgba(0,0,0,.05) !important; }
.dt tr.is-dim .dt-chip { background: #eee !important; color: #b3b3bd !important; }
.dt tr.is-hl td { color: var(--purple) !important; }
.dt tr.is-hl .dt-bar { background: rgba(122,123,255,.34) !important; }
.dt-bar { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.dt tbody tr:nth-child(1) .dt-bar { transition-delay: .02s; }
.dt tbody tr:nth-child(2) .dt-bar { transition-delay: .08s; }
.dt tbody tr:nth-child(3) .dt-bar { transition-delay: .14s; }
.dt tbody tr:nth-child(4) .dt-bar { transition-delay: .2s; }
@media (hover: hover) and (pointer: fine) {
  .dt tbody tr:not(.dt-total):not(.is-dim):hover { background: rgba(122,123,255,.045); }
}

/* ─── SECTION COMMONS ─── */
/* Cada sección lleva la línea divisora pegada al borde superior (sin padding-top).
   El aire visual queda balanceado: divider→contenido ≈ contenido→borde inferior. */
section { padding: 0 clamp(1.5rem,5vw,4rem) clamp(96px,10vw,120px); }
.c { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

.s-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.4px; color: var(--purple); margin-bottom: 16px;
}
.s-tag::before { content:''; width:18px; height:1.5px; background:var(--purple); opacity:.45; }
.s-tag-dark { color: #111111; font-size: 12px; }
.s-tag-dark::before { background: #111111; opacity: .5; }

.s-h {
  font-family: var(--font-serif);
  font-size: clamp(34px,4vw,52px); font-weight: 500;
  line-height: 1.1; letter-spacing: -1.5px; color: var(--ink); margin-bottom: 14px;
}
.s-h em { font-style: italic; color: var(--ink); }

.s-sub { font-size: 15px; color: var(--muted); line-height: 1.7; max-width: 480px; }


/* ─── PROJECTS ─── */
.proj-section { background: var(--off); border-top: 1px solid #e8e8ee; border-bottom: 1px solid #e8e8ee; }
.proj-section > .c { max-width: 100%; padding: 0 clamp(1.5rem,4vw,5rem); margin: 0 auto; }
.proj-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 52px; gap: 24px; flex-wrap: wrap; }
.proj-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; align-items: stretch; }

.proj-card {
  background: var(--white);
  border: 1px solid #e8e8ee;
  border-radius: var(--radius-lg); overflow: hidden;
  transition: background .18s cubic-bezier(.4,0,.2,1), transform .16s ease-out;
  display: flex; flex-direction: column;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06),
    0 1px 1px -0.5px rgba(0,0,0,.06),
    0 3px 3px -1.5px rgba(0,0,0,.06),
    0 6px 6px -3px rgba(0,0,0,.06),
    0 12px 12px -6px rgba(0,0,0,.06),
    0 24px 24px -12px rgba(0,0,0,.06);
  cursor: pointer;
}
.proj-card:active { transform: scale(.98); }
.proj-card:focus-visible, .card-c:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pc-visual {
  display: flex; align-items: center; justify-content: center;
  background: #ffffff;
  border-bottom: 1px solid #e8e8ee;
  position: relative; overflow: hidden;
  aspect-ratio: 1400 / 969;
}
.pc-visual svg {
  width: 100%;
  height: auto;
  display: block;
}
.pc-body { padding: 20px 30px 28px; flex: 1; display: flex; flex-direction: column; }
.pc-cat { font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pc-name { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 10px; letter-spacing: -.4px; line-height: 1.25; }
.pc-desc { font-size: 13.5px; color: var(--muted); line-height: 1.7; flex: 1; margin-bottom: 20px; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid #e8e8ee; }
.pc-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-pill { 
  font-size: 11px; 
  font-weight: 500; 
  background: #eeeef1; 
  border: 1px solid #e2e2e8;
  color: var(--ink); 
  padding: 6px 13px; 
  border-radius: var(--radius-pill); 
  letter-spacing: 0;
  text-transform: none;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.pc-pill + .pc-pill::before { content: ''; margin-right: 0; color: var(--muted); }
.pc-link { font-size: 13.5px; color: var(--ink); font-weight: 600; text-decoration: none; letter-spacing: normal; text-transform: none; transition: color .18s; padding: 12px 4px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
.pc-link:hover { color: var(--ink); }
.proj-more { display: flex; justify-content: center; align-items: center; margin-top: 40px; width: 100%; }

/* ─── ML CARDS — mismo sistema visual que .proj-card ─── */
.ml-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; align-items: stretch; }
.card-c {
  background: var(--white);
  border: 1px solid #e8e8ee;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 20px 30px 28px;
  transition: background .18s cubic-bezier(.4,0,.2,1), transform .16s ease-out;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.06),
    0 1px 1px -0.5px rgba(0,0,0,.06),
    0 3px 3px -1.5px rgba(0,0,0,.06),
    0 6px 6px -3px rgba(0,0,0,.06),
    0 12px 12px -6px rgba(0,0,0,.06),
    0 24px 24px -12px rgba(0,0,0,.06);
  cursor: pointer;
}
.card-c:active { transform: scale(.98); }
.cc-cat { font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -.4px; text-transform: none; color: var(--ink); line-height: 1.25; margin-bottom: 16px; text-wrap: balance; }
.cc-block { margin-bottom: 16px; }
.cc-label { font-size: 10px; font-weight: 700; color: var(--ink); margin-bottom: 6px; letter-spacing: .05em; text-transform: uppercase; }
.cc-text { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.cc-result { margin-bottom: auto; padding-bottom: 16px; }
.cc-result .cc-label { margin-bottom: 10px; }
.cc-result-metric { display: flex; align-items: baseline; gap: 10px; }
.cc-result-num { font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -1px; line-height: 1; }
.cc-result-unit { font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; font-size: 10px; font-weight: 600; color: var(--ink); opacity: .6; text-transform: uppercase; letter-spacing: 1px; }
.cc-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid #e8e8ee; }
.cc-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-pill { font-size: 11px; font-weight: 500; background: #eeeef1; border: 1px solid #e2e2e8; color: var(--ink); padding: 6px 13px; border-radius: var(--radius-pill); letter-spacing: 0; text-transform: none; transition: background .2s var(--ease), color .2s var(--ease); }
.cc-link { font-size: 13.5px; color: var(--ink); font-weight: 600; text-decoration: none; letter-spacing: normal; text-transform: none; transition: color .18s; padding: 12px 4px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
.cc-link:hover { color: var(--ink); }
@media (max-width:900px) { .ml-grid { grid-template-columns:1fr; } }

/* ─── PROYECTO ESTRELLA — "El ticket" (Casa Origen) ───
   Paleta espresso invitada, propia de la sección (tokens --v4-*). */
.star-v4 {
  --v4-esp:       #2B2118;   /* marrón espresso · superficie */
  --v4-esp-deep:  #1b130d;   /* ranura de la impresora */
  --v4-cream:     #fbf8f3;   /* crema · texto y papel */
  --v4-cream-2:   #d2c9bb;   /* crema apagada · texto secundario (9,6:1 sobre espresso) */
  --v4-red:       #C2412E;   /* rojo · importes (4,8:1 sobre crema) */
  --v4-sage:      #6E7F5B;   /* salvia · ticks (gráfico, ≥3:1) */
  --v4-sage-lit:  #b3c297;   /* salvia clara · icono sobre espresso */
  --v4-ink-2:     #6b5d4f;   /* tinta secundaria sobre papel (6:1) */
  --v4-rule:      rgba(43,33,24,.34);

  --v4-pad-t: clamp(80px, 9vw, 120px);
  --v4-pad-b: clamp(72px, 8vw, 120px);
  --v4-out:   clamp(36px, 4.4vw, 64px);   /* cuánto sobresale la fachada por encima de la banda */
  --v4-tk-w:  clamp(330px, 38vw, 440px);  /* ancho del ticket en escritorio */

  --v4-ease-print: cubic-bezier(.22,.8,.3,1);
  --v4-ease-out:   var(--ease, cubic-bezier(0.16,1,0.3,1));

  background: var(--white);
  padding: 0 0 clamp(96px, 10vw, 120px);
  position: relative;
  overflow-x: clip;
}
.star-v4 > .section-divider { width: calc(100% - 2 * clamp(1.5rem, 5vw, 4rem)); }

.v4-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ─── BANDA ─────────────────────────────────────────────────── */
.v4-band {
  position: relative;
  background: var(--v4-esp);
  color: var(--v4-cream);
  padding: var(--v4-pad-t) 0 var(--v4-pad-b);
}
.v4-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 60% at 24% 58%, rgba(251,248,243,.055), transparent 72%);
}

/* ─── REJILLA ───────────────────────────────────────────────── */
.v4-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "art" "head" "stage" "body";
}
.v4-art   { grid-area: art; }
.v4-head  { grid-area: head; }
.v4-stage { grid-area: stage; }
.v4-body  { grid-area: body; }

@media (min-width: 860px) {
  .v4-grid {
    grid-template-columns: minmax(0, var(--v4-tk-w)) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "stage art"
      "stage head"
      "stage body";
    column-gap: clamp(40px, 6vw, 88px);
  }
}

/* ─── FACHADA (sobresale por arriba de la banda) ────────────── */
.v4-art {
  position: relative; z-index: 3;
  margin: calc(-1 * (var(--v4-pad-t) + var(--v4-out))) 0 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: 6px;
  background: #f5f2ec;
  rotate: 1.1deg;
  box-shadow:
    0 0 0 1px rgba(43,33,24,.16),
    0 1px 1px rgba(0,0,0,.22),
    0 4px 6px rgba(0,0,0,.20),
    0 14px 22px rgba(0,0,0,.24),
    0 34px 60px rgba(0,0,0,.30);
}
.v4-art picture, .v4-art img { display: block; width: 100%; height: 100%; }
.v4-art img {
  object-fit: cover; object-position: 50% 44%;
  transform: scale(1.07); transform-origin: 50% 46%;
}

/* ─── TÍTULO Y TEXTO ────────────────────────────────────────── */
.v4-head { margin: 34px 0 30px; }
.v4-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(3rem, 2.1rem + 4.4vw, 6rem);
  line-height: .96;
  letter-spacing: -0.03em;
  color: var(--v4-cream);
  text-wrap: balance;
}
.v4-body { min-width: 0; }
.v4-lead {
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.28rem);
  line-height: 1.55;
  color: var(--v4-cream);
  max-width: 60ch;
  text-wrap: pretty;
}
.v4-lead strong { font-weight: 700; }
.v4-text {
  margin-top: 16px;
  font-size: clamp(1rem, .96rem + .24vw, 1.0625rem);
  line-height: 1.65;
  color: var(--v4-cream-2);
  max-width: 62ch;
  text-wrap: pretty;
}
.v4-foot {
  margin-top: 34px; padding-top: 28px;
  border-top: 1px solid rgba(251,248,243,.2);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 22px 32px;
}
.v4-cred {
  flex: 1 1 250px; max-width: 36ch;
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; font-weight: 600; line-height: 1.5;
  color: var(--v4-cream);
}
.v4-cred svg { flex: none; width: 24px; height: 24px; margin-top: 1px; color: var(--v4-sage-lit); }

/* CTA: botón crema · texto espresso · sweep morado del portfolio */
.v4-cta.btn {
  min-height: 48px; padding: 0 28px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  background: var(--v4-cream); color: var(--v4-esp);
  border: 1px solid var(--v4-cream);
}
.v4-cta.btn::before { background: var(--purple); }
.v4-cta.btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 4px; }
.v4-cta.btn:focus-visible::before { transform: translateY(0); }
.v4-cta.btn:focus-visible .btn-arrow { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) {
  .v4-cta.btn:hover { color: var(--v4-esp); border-color: var(--purple); }
  .v4-cta.btn[data-arrow="right"]:hover .btn-arrow { transform: translateX(4px); }
}

/* ─── ESCENA DE CAJA: pantalla + impresora + ticket ─────────── */
.v4-stage {
  position: relative; z-index: 1;
  min-width: 0;
  --v4-bleed: 3%;
}
@media (min-width: 860px) { .v4-stage { --v4-bleed: 6%; } }

.v4-screen {
  position: absolute; z-index: 0;
  top: 0; left: calc(-1 * var(--v4-bleed)); width: calc(100% + 2 * var(--v4-bleed));
  padding: 8px 8px 0;
  background: var(--v4-esp-deep);
  border-radius: 10px 10px 4px 4px;
  rotate: 3deg;
  box-shadow:
    0 0 0 1px rgba(251,248,243,.10),
    0 2px 3px rgba(0,0,0,.30),
    0 12px 20px rgba(0,0,0,.28),
    0 30px 50px rgba(0,0,0,.30);
}
.v4-screen picture, .v4-screen img { display: block; width: 100%; height: auto; }
.v4-screen img { border-radius: 3px 3px 0 0; }

.v4-printer {
  position: relative; z-index: 1;
  margin-top: 40%;
  rotate: -1.5deg;
}
.v4-slot {
  position: relative; z-index: 3;
  height: 16px; margin: 0 -14px;
  border-radius: 8px;
  background: var(--v4-esp-deep);
  box-shadow:
    inset 0 1px 0 rgba(251,248,243,.14),
    0 2px 3px rgba(0,0,0,.35),
    0 8px 14px rgba(0,0,0,.30);
}
.v4-feed {
  position: relative; z-index: 2;
  margin-top: -8px;
  clip-path: inset(0 -70px -160px -70px);
}
.v4-paper {
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.22))
    drop-shadow(0 6px 7px rgba(0,0,0,.20))
    drop-shadow(0 22px 22px rgba(0,0,0,.26));
}

/* ─── EL TICKET ─────────────────────────────────────────────── */
.v4-ticket {
  --v4-tooth: 18px;
  position: relative;
  background-color: var(--v4-cream);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .13 0 0 0 0 .09 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--v4-esp);
  padding: 34px clamp(22px, 7%, 32px) calc(var(--v4-tooth) / 2 + 34px);
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--v4-tooth) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--v4-tooth) 100%;
}

.v4-tk-head {
  text-align: center;
  font-size: 13px; line-height: 1.45; color: var(--v4-ink-2);
  text-wrap: balance;
}
.v4-tk-head b {
  font-weight: 800; letter-spacing: .16em; color: var(--v4-esp);
}
.v4-rule       { height: 0; border-top: 1.5px dashed var(--v4-rule); margin: 18px 0; }
.v4-rule-heavy { height: 0; border-top: 4px double var(--v4-rule); margin: 4px 0 0; }

.v4-lines { margin: 0; }
.v4-line, .v4-subtotal { display: flex; align-items: baseline; }
.v4-line { padding: 9px 0; }
.v4-line dt, .v4-subtotal .v4-st-l {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v4-esp);
}
.v4-line dt::after, .v4-subtotal .v4-st-l::after {
  content: ""; flex: 1 1 auto; min-width: 16px;
  margin: 0 10px 4px;
  border-bottom: 2px dotted var(--v4-rule);
}
.v4-line dd {
  margin: 0; flex: none;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.85rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -.01em;
  color: var(--v4-red);
  text-align: right;
}
.v4-line dd small { font-size: .62em; font-weight: 700; letter-spacing: 0; margin-left: .12em; }

.v4-subtotal { padding: 14px 0 0; }
.v4-subtotal .v4-st-r {
  flex: none; font-size: 15px; font-weight: 800; color: var(--v4-red);
}

.v4-foot-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.v4-foot-lines li {
  display: flex; align-items: center; gap: 11px;
  font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--v4-esp);
}
.v4-tick { flex: none; width: 18px; height: 18px; color: var(--v4-sage); }
.v4-tick rect { stroke: var(--v4-ink-2); opacity: .55; }
.v4-tick path { stroke-dasharray: 1; stroke-dashoffset: 0; }

.v4-note {
  margin: 0; text-align: center;
  font-size: 12px; font-weight: 500; letter-spacing: .02em; line-height: 1.4;
  color: var(--v4-ink-2);
}
.v4-barcode {
  height: 32px; margin: 18px auto 0; width: min(78%, 240px);
  background: repeating-linear-gradient(90deg,
    var(--v4-esp) 0 2px, transparent 2px 4px,
    var(--v4-esp) 4px 5px, transparent 5px 8px,
    var(--v4-esp) 8px 11px, transparent 11px 12px,
    var(--v4-esp) 12px 13px, transparent 13px 17px,
    var(--v4-esp) 17px 19px, transparent 19px 21px);
  opacity: .82;
}

/* ─── MÓVIL / TABLET ESTRECHA ───────────────────────────────── */
@media (max-width: 859.98px) {
  .v4-head  { margin: 30px 0 34px; }
  .v4-body  { margin-top: 48px; }
  .v4-ticket { --v4-tooth: 16px; }
  .v4-art   { max-width: 640px; }
  .v4-stage { max-width: 520px; }
  .v4-body  { max-width: 640px; }
}
@media (max-width: 420px) {
  .v4-printer { rotate: -1.1deg; }
  .v4-screen  { rotate: 2.2deg; }
  .v4-art     { rotate: .8deg; }
}

/* ══════════════════════════════════════════════════════════════
   MOMENTO WOW · el ticket se imprime + la fachada asoma
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  .star-v4.v4-js .v4-paper  { translate: 0 calc(-100% - 100px); }
  .star-v4.v4-js .v4-screen { opacity: 0; translate: 0 22px; }
  .star-v4.v4-js .v4-art    { opacity: 0; translate: 0 64px; }
  .star-v4.v4-js .v4-head,
  .star-v4.v4-js .v4-body   { opacity: 0; translate: 0 18px; }
  .star-v4.v4-js .v4-tick path { stroke-dashoffset: 1; }

  .star-v4.v4-js.v4-in .v4-screen {
    opacity: 1; translate: 0 0;
    transition: opacity .7s var(--v4-ease-out), translate .9s var(--v4-ease-out);
  }
  .star-v4.v4-js.v4-in .v4-art {
    opacity: 1; translate: 0 0;
    transition: opacity .6s ease-out .3s, translate 1.4s var(--v4-ease-out) .3s;
  }
  .star-v4.v4-js.v4-in .v4-head {
    opacity: 1; translate: 0 0;
    transition: opacity .8s var(--v4-ease-out) .5s, translate .9s var(--v4-ease-out) .5s;
  }
  .star-v4.v4-js.v4-in .v4-body {
    opacity: 1; translate: 0 0;
    transition: opacity .8s var(--v4-ease-out) .65s, translate .9s var(--v4-ease-out) .65s;
  }

  .star-v4.v4-js.v4-print .v4-paper {
    translate: 0 0;
    transition: translate 1.6s var(--v4-ease-print);
  }
  .star-v4.v4-js.v4-print .v4-tick path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .45s ease-out calc(1.15s + var(--i, 0) * .14s);
  }
}
@media (prefers-reduced-motion: reduce) {
  .star-v4 *, .star-v4 *::before, .star-v4 *::after {
    animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important;
  }
}

/* ─── STACK SKILLS ─── */
.stack-section { background: var(--off); border-top: 1px solid #e8e8ee; border-bottom: 1px solid #e8e8ee; }
.stack-section > .c { max-width: 100%; padding: 0 clamp(1.5rem,5vw,4rem); }

/* ─── CTA FINAL ─── */
.cta-final {
  background: var(--white);
  position: relative;
  overflow: hidden;
  text-align: center;
  /* Mismo ritmo que el cierre de las demás secciones (120 px en escritorio),
     simétrico entre el stack y el footer; en móvil baja a 72 px. */
  padding: clamp(72px, 10vw, 120px) 0;
}
.cta-final::before {
  display: none;
}
.cta-final-inner {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto; padding: 0 24px;
}
.cta-final-h {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 500; color: var(--ink);
  letter-spacing: -1.5px; line-height: 1.12;
  margin-bottom: 20px;
}
.cta-final-h em { color: var(--ink); font-style: italic; }
.cta-final-sub {
  font-size: 15.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 8px 0;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.cta-final-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
  margin-bottom: 4px;
}
.cta-final-btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  background: #111111; color: #fff;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 11px; font-weight: 500;
  padding: 16px 32px; border-radius: 0;
  text-decoration: none; letter-spacing: .1em; text-transform: uppercase;
  transition: background .18s cubic-bezier(.4,0,.2,1), color .18s;
}
.cta-final-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid #111111;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 11px; font-weight: 500;
  padding: 16px 32px; border-radius: 0;
  text-decoration: none; letter-spacing: .1em; text-transform: uppercase;
  transition: background .18s cubic-bezier(.4,0,.2,1), color .18s;
}
@media (hover: hover) and (pointer: fine) {
  .cta-final-btn-secondary:hover {
    background: #111111; color: #fff;
    border-color: #111111; transform: none;
  }
}
.cta-final-links {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  margin-top: 16px; margin-bottom: 24px;
}
.cta-final-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted-light);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none;
  padding: 8px 6px; min-height: 44px;
  transition: color .18s;
}
.cta-final-link:hover { color: var(--ink); }
.cta-final-links-sep { color: #cccccc; font-size: 11px; }
.cta-final-pills {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
}
.cta-pill-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 10px; font-weight: 500; color: var(--muted);
  background: transparent; border: 0.5px solid #cccccc;
  padding: 8px 16px; border-radius: 20px;
  transition: border-color .18s, color .18s;
  cursor: default;
  letter-spacing: .4px;
}
@media (hover: hover) and (pointer: fine) {
  .cta-pill-item:hover {
    background: transparent;
    border-color: #111111;
    color: var(--ink);
  }
  .cta-pill-item:hover svg { opacity: 1; }
}
.cta-pill-item svg { opacity: .6; transition: opacity .2s; }

/* ─── CONTACT BAR — franja compacta de contacto ─── */
.contact-alt {
  margin: 18px 0 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px;
  font-size: 14px; color: #5a5a5a; text-align: center;
}
.contact-alt-mail { color: var(--ink); font-weight: 600; }
.contact-alt-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 12px;
  border: 1px solid #d9d9de; border-radius: 999px; background: #fff; color: var(--ink);
  font: 600 12px/1 var(--font); letter-spacing: .2px; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.contact-alt-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.contact-alt-btn:hover { border-color: var(--ink); }
.contact-alt-btn:focus-visible { outline: 2px solid var(--purple2, #5a5be0); outline-offset: 2px; }
.contact-alt-btn.is-copied { background: #111; border-color: #111; color: #fff; }
.contact-bar-wrap {
  position: relative;
  width: 100vw; max-width: 1600px;
  margin-left: 50%; transform: translateX(-50%);
  padding: 0 clamp(20px, 4vw, 48px);
  box-sizing: border-box;
}
/* Tarjeta centrada en columna (titular en dos líneas → foto → acciones),
   la misma composición en escritorio y en móvil; cambia solo la escala. */
.contact-bar {
  background: #f4f4f4;
  border-radius: 24px;
  padding: 32px 28px;
  display: flex; flex-direction: column; align-items: center;
  gap: 28px;
  text-align: center;
}
.contact-bar-h {
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.5vw, 28px);
  font-weight: 500; line-height: 1.3; letter-spacing: -.4px;
}
.contact-bar-h > span { display: block; }
.contact-bar-h-strong { color: var(--ink); }
.contact-bar-h-muted { color: var(--muted); }
.contact-bar-photo {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  flex-shrink: 0; display: block;
}
.contact-bar-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .contact-bar-photo:hover img { transform: scale(1.08); }
}
.contact-bar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.contact-bar-btn {
  font-family: var(--font);
  font-size: 14px; font-weight: 600;
  padding: 13px 22px; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; box-sizing: border-box;
  transition: background .18s var(--ease), color .18s var(--ease), opacity .18s;
}
.contact-bar-btn-primary { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.contact-bar-btn-outline { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.contact-bar-btn-ghost { background: transparent; color: var(--muted); padding: 13px 16px; border: 1px solid transparent; }
@media (hover: hover) and (pointer: fine) {
  .contact-bar-btn-primary:hover { opacity: .85; }
  .contact-bar-btn-outline:hover { background: var(--ink); color: #fff; }
  .contact-bar-btn-ghost:hover { color: var(--ink); }
}
.contact-bar-actions { flex-wrap: wrap; justify-content: center; }

/* Escritorio: la tarjeta compacta del móvil a mayor escala. Tarjeta estrecha
   (640 px) para que el contenido la llene; las dos píldoras a la misma anchura
   y «Descargar CV» centrado debajo como enlace terciario. Ritmo en 8 px:
   titular → 32 → foto → 40 → acciones → 16 → CV. */
@media (min-width: 861px) {
  .contact-bar {
    max-width: 640px; margin: 0 auto;
    padding: 64px 72px;
    border-radius: 28px;
    gap: 0;
  }
  .contact-bar-h { font-size: 40px; line-height: 1.1; letter-spacing: -1px; }
  .contact-bar-photo { width: 72px; height: 72px; margin-top: 32px; }
  .contact-bar-actions {
    display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr));
    column-gap: 12px; row-gap: 16px; margin-top: 40px;
  }
  .contact-bar-btn { font-size: 15px; min-height: 52px; padding: 15px 28px; }
  .contact-bar-btn-ghost {
    grid-column: 1 / -1; justify-self: center;
    min-height: 44px; padding: 10px 12px;
    font-size: 14px; font-weight: 500;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  }
  .contact-alt { margin-top: 32px; }
}




/* ─── SEPARADORES DE SECCIÓN ─── */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(22px, 3vw, 38px);
  position: relative;
  /* Misma rejilla que .c en todas las secciones: ancho máx 1100px centrado. */
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: clamp(72px, 7vw, 92px);
  padding-top: 30px;
}
/* La star-section no tiene padding horizontal en la sección (el mockup del navegador
   sale al borde derecho), así que el divider necesita su propio margen lateral
   mínimo para no pegarse a los bordes en viewports estrechos. */
.star-section > .section-divider {
  width: calc(100% - 2 * clamp(1.5rem, 5vw, 4rem));
}
.section-divider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 100vw;
  height: 1px;
  background: #111111;
  pointer-events: none;
}
.section-divider.no-line::before { display: none; }
.section-divider-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #111111;
  flex-shrink: 0;
}
/* Compat: oculta cualquier numeración heredada */
.section-divider-num {
  display: none;
}
.section-divider-label {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #111111;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ─── SCROLL REVEAL ─── */
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
/* Contenido visible por defecto — accesible y SEO-friendly */
.sr { opacity:1; transform:translateY(0); }
/* Animaciones solo como progressive enhancement */
@media (prefers-reduced-motion: no-preference) {
  .sr { opacity:0; transform:translateY(20px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
  .sr.visible { opacity:1; transform:translateY(0); }
  .sr-d1 { transition-delay:.08s; }
  .sr-d2 { transition-delay:.16s; }
  .sr-d3 { transition-delay:.24s; }
}

/* ── COM CARD HOVER — solo cuando ya es visible ── */

/* ─── RESPONSIVE ─── */
@media (max-width:1050px) {
  .hero-inner { grid-template-columns:1fr; gap: 32px; }
  .hero-right {
    margin-right: 0;
    margin-left: clamp(-32px, -3vw, -16px);
    margin-top: 8px;
    transform: scale(.92);
    transform-origin: top left;
    width: calc(100% + 32px);
  }
  .hero-right .dashboard-frame { width: 100%; }
  /* El frame ahora ocupa el 100% de .hero-right (en vez de min(640px,110%)) — la anotación sigue esa misma fórmula */
  .hero-annotation { left: calc(100% - 92px); }
}
@media (max-width:900px) {
  .proj-grid { grid-template-columns:1fr; }
}

/* ═══════════════════════════════════════════════
   HERO MOBILE — rediseño dedicado (≤600px)
   Sustituye el antiguo breakpoint de 480px: ahora todo el rango
   móvil (incluido iPhone SE) entra en el mismo bloque de abajo.
   No afecta a desktop/tablet. Objetivos:
   1) el hero llena la primera pantalla (100svh) — nada de "Cómo trabajo"
      debe asomar antes de hacer scroll
   2) mismo copy que desktop, sin prueba social (LinkedIn/impresiones) —
      solo disponibilidad + credencial, y un cierre amplio antes de los CTAs
   3) sin dashboard: la rejilla de cuadrados parpadeantes queda como único
      fondo animado del hero
   ═══════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* 1) La primera pantalla es solo el hero — nada de la siguiente sección
     debe asomar antes de hacer scroll. 100svh (no 100vh) porque en un
     móvil real la barra de direcciones/barra inferior recortan la parte
     visible: svh usa esa altura "reducida" como mínimo garantizado. */
  .hero {
    min-height: 100svh;
    padding: 88px clamp(1.25rem, 5vw, 1.75rem) 36px; /* aire bajo el nav fijo (56px) para el antetítulo */
  }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-right { display: none; }

  /* El relato en mobile: titular → copy completo → credenciales → acción.
     Sin prueba social (LinkedIn/impresiones) en mobile — solo disponibilidad
     y credencial. El orden visual sigue el orden real del DOM. */
  .hero-h1 {
    font-size: 40px;      /* un poco más grande que el mínimo del clamp (36px) */
    margin-bottom: 32px;  /* más aire antes del copy */
  }
  .hero-sub { margin-bottom: 40px; }    /* amplio: subtítulo↔credenciales, cambia de categoría */
  .hero-social-proof { display: none; } /* fuera en mobile: LinkedIn + impresiones */
  .hero-meta:not(.hero-social-proof) { margin-bottom: 56px; } /* el más amplio: cierre de la tarjeta antes de los CTAs */

  /* Botones apilados a ancho completo — cada uno una barra horizontal,
     no dos botones estrechos compitiendo por el mismo ancho. */
  .hero-actions { flex-direction: column; gap: 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ─── CÓMO TRABAJO · ÍNDICE XXL ─── */
.dph-section {
  background: var(--white);
  padding: 0 clamp(1.5rem,5vw,4rem) clamp(96px,10vw,120px);
}

.dph-header {
  max-width: 760px;
  margin: 0 0 48px;
}
.dph-header .s-h { line-height: 1.05; }
.dph-header .s-sub { margin-top: 16px; font-size: 14px; }
.dph-header .dph-hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mutedB);
  display: block;
  margin-top: 10px;
}

/* ── ÍNDICE ── */
.idx { border-bottom: 1px solid var(--ink); }
.idx-row { border-top: 1px solid var(--ink); position: relative; }

.idx-head {
  display: flex; align-items: center; gap: clamp(16px,3vw,40px);
  padding: clamp(16px,2.4vw,30px) 4px clamp(16px,2.4vw,30px) clamp(14px,2vw,28px);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.idx-num {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: #717171; width: 38px; flex-shrink: 0;
  transition: color .3s; letter-spacing: .02em;
}
.idx-row.open .idx-num { color: var(--ink); }
.idx-name {
  font-size: clamp(38px,6.6vw,82px); font-weight: 800; letter-spacing: -2.5px;
  line-height: .92; color: #8f8f9f; text-transform: uppercase;
  transition: color .35s var(--ease), transform .45s cubic-bezier(.2,.8,.2,1);
}
.idx-head:hover .idx-name { color: #71717d; }
.idx-row.open .idx-name { color: var(--ink); transform: translateX(6px); }
.idx-meta {
  margin-left: auto; display: flex; align-items: center; gap: 18px; flex-shrink: 0;
}
.idx-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: #737373;
  display: none;
}
@media(min-width:760px){ .idx-tag { display: inline; } }
.idx-toggle {
  width: 30px; height: 30px; border: 1px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 15px; flex-shrink: 0;
  transition: background .25s, color .25s, transform .35s;
}
.idx-row.open .idx-toggle { background: var(--ink); color: #ffffff; transform: rotate(45deg); }

/* Panel expandible (técnica grid-template-rows) */
.idx-panel {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .55s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.idx-row.open .idx-panel { grid-template-rows: 1fr; opacity: 1; }
.idx-panel-inner { overflow: hidden; }
.idx-detail {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,64px);
  padding: 0 4px clamp(28px,3vw,42px) clamp(52px,5vw,66px);
  align-items: start;
}
.idx-d-title {
  font-size: clamp(20px,2vw,26px); font-weight: 700;
  letter-spacing: -.5px; line-height: 1.15;
  color: var(--ink); margin: 0 0 14px;
}
.idx-d-title em { font-style: normal; color: var(--ink); }
.idx-d-body { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0; max-width: 460px; }
.idx-d-side { display: flex; flex-direction: column; gap: 14px; }
.idx-d-tagrow { display: flex; flex-wrap: wrap; gap: 6px; }
.idx-chip {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--ink);
  background: #eeeef1; border: 1px solid #e2e2e8;
  padding: 6px 13px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.idx-d-note {
  font-family: var(--mono); font-size: 10px; color: #737373;
  letter-spacing: .06em; padding-top: 14px; border-top: 1px solid #ececec;
}
@media(max-width:680px){ .idx-detail { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 640px) {
  .dph-section { padding: 0 0 64px; }
  .dph-header { margin-bottom: 40px; }
  .idx-name { letter-spacing: -1.5px; font-size: clamp(30px, 8.4vw, 38px); min-width: 0; }   /* «COMMUNICATE» (versión inglesa) también cabe a 390 px */
}

/* ══════════════════════════════
   1. PROGRESS BAR — hilo de lectura gris → negro
   El degradado está anclado al viewport (no se estira con el avance):
   el trazo nace gris perla y se va entintando hasta negro al final.
   Un destello fino marca la punta y se apaga al llegar al 0 % y al 100 %.
   Scroll-driven animation nativa cuando existe; si no, --p lo pone el JS.
══════════════════════════════ */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }

.progress-bar {
  --p: 0;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 2000;
  pointer-events: none;
  contain: strict;
}
.progress-bar::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #dcdce0 0%, #a7a7ad 38%, #55555b 72%, var(--ink) 100%);
  clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
  will-change: clip-path;
}
.progress-bar::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--p) * 100% - 72px);
  width: 72px;
  background: linear-gradient(90deg, rgba(17,17,17,0) 0%, rgba(17,17,17,.9) 92%, #000 100%);
  box-shadow: 6px 0 10px -2px rgba(17,17,17,.35);
  opacity: calc(min(1, var(--p) * 24) * min(1, (1 - var(--p)) * 24));
  will-change: left, opacity;
}
@supports (animation-timeline: scroll()) {
  .progress-bar {
    animation: progress-ink linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes progress-ink { from { --p: 0; } to { --p: 1; } }
}

/* ══════════════════════════════
   2. GRAIN TEXTURE — hero only
══════════════════════════════ */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}
.hero-inner { position: relative; z-index: 1; }

/* ══════════════════════════════
   3. PROJECT CARDS — image hover zoom + border glow
══════════════════════════════ */
.pc-visual {
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.pc-visual svg,
.pc-visual img,
.pc-visual canvas {
  transition: transform .35s var(--ease);
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .proj-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 20px 40px rgba(17,17,17,.09);
  }
  .proj-card:hover .pc-visual img {
    transform: scale(1.05);
  }
  .card-c:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 20px 40px rgba(17,17,17,.09);
  }
}

/* ══════════════════════════════
   5. BUTTONS — directional sweep (era MAGNETIC)
══════════════════════════════ */
/* Las transiciones principales viven en .btn. El sweep se hace v\u00eda ::before. */
.btn-primary:hover { box-shadow: none; }


/* ══════════════════════════════
   NAV LINKS — purple underline on hover
══════════════════════════════ */
.nav-links a:not(.nav-cta) {
  position: relative;
  padding-bottom: 7px;
}
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: calc(100% - 28px); height: 2px;
  background: #111111;
  border-radius: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .22s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta).active::after {
  transform: translateX(-50%) scaleX(1);
}
/* ensure nav links visible on desktop */
@media(min-width:876px) {
  .nav-links a:not(.nav-cta) { display: inline-flex !important; }
}


/* ── LIVE DOT PULSE ── */
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.5; transform:scale(1.4); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .progress-bar, .hero::before { display: none !important; }
}

/* ── OVERLAYS PROYECTOS DESTACADOS ── */
.pc-overlay{display:flex;position:fixed;inset:0;z-index:2000;background:rgba(10,10,10,.78);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--ease),visibility 0s linear .25s}
.pc-overlay.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s var(--ease),visibility 0s linear 0s}
.pc-overlay-inner{background:#ffffff;border:1px solid var(--ink);border-radius:var(--radius-lg);width:min(1400px,95vw);height:min(760px,92vh);display:grid;grid-template-columns:1.05fr 1fr;gap:0;align-items:stretch;box-shadow:0 40px 100px rgba(0,0,0,.35);position:relative;overflow:hidden;transform:scale(.95);transition:transform .25s var(--ease)}
.pc-overlay.open .pc-overlay-inner{transform:scale(1)}
.pc-overlay-imgs{position:relative;overflow:hidden;border-right:1px solid var(--ink);background:#ffffff;display:flex;flex-direction:column}
.pcov-track{position:relative;flex:1;overflow:hidden;background:#ffffff}
.pcov-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;opacity:0;transition:opacity .3s ease;padding:20px;background:#ffffff}
.pcov-photo.pcov-active{opacity:1}
.pcov-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:5px;background:rgba(255,255,255,.82);border:1px solid rgba(232,232,238,.9);border-radius:var(--radius-pill);backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(17,17,17,.08);z-index:2}
.pcov-dot{width:24px;height:24px;padding:0;margin:0;background:transparent;border:0;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pcov-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:#d5d5dd;transition:background .2s}
.pcov-dot.pcov-dot-active::before{background:var(--ink)}
.pc-overlay-imgs .pc-arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;background:rgba(255,255,255,.82);border:1px solid rgba(232,232,238,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s,color .12s,transform .18s,box-shadow .18s;z-index:2;backdrop-filter:blur(8px);box-shadow:0 6px 18px rgba(17,17,17,.08)}
@media (hover: hover) and (pointer: fine) { .pc-overlay-imgs .pc-arrow:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-50%) scale(1.07)} }
.pc-overlay-imgs .pc-arrow svg{stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}
.pc-overlay-imgs .pc-arrow-prev{left:14px}
.pc-overlay-imgs .pc-arrow-next{right:14px}
.pc-overlay-copy{padding:28px 32px 24px;display:flex;flex-direction:column;overflow:hidden;background:#ffffff}
.pc-overlay-eyebrow{font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--mutedB);margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.pc-overlay-eyebrow::before{content:"";width:24px;height:1px;background:var(--ink)}
.pc-overlay-title{font-size:22px;font-weight:700;letter-spacing:-.022em;line-height:1.2;color:var(--ink);margin-bottom:18px;flex-shrink:0}
.pcov-stats{display:flex;gap:10px;margin-bottom:16px;flex-shrink:0;flex-wrap:wrap}
.pcov-stat{flex:1;min-width:130px;background:#fafafa;border:1px solid #e8e8ee;border-radius:var(--radius-md);padding:10px 14px}
.pcov-stat-value{font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.4px;line-height:1.15}
.pcov-stat-value.pos{color:var(--green)}
.pcov-stat-value.neg{color:var(--red)}
.pcov-stat-label{font-size:10.5px;color:var(--muted);line-height:1.4;margin-top:3px}
.pcov-hook{font-size:14px;color:var(--ink);line-height:1.65;margin-bottom:16px;flex-shrink:0}
.pc-overlay-pills{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:16px;flex-shrink:0}
.pc-overlay-pill{font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;background:transparent;color:var(--ink);padding:2px 8px;border:.8px solid var(--ink);border-radius:999px;font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.pcov-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink);background:#eeeef1;border:1px solid #e2e2e8;border-radius:var(--radius-pill);padding:8px 14px;cursor:pointer;margin-bottom:14px;flex-shrink:0;transition:background .15s;font-family:inherit}
@media (hover: hover) and (pointer: fine) { .pcov-toggle:hover{background:#e2e2e8} }
.pcov-toggle svg{transition:transform .2s var(--ease);flex-shrink:0}
.pcov-toggle.is-open svg{transform:rotate(180deg)}
.pc-overlay-long{display:none;flex-direction:column;gap:11px;margin-bottom:16px;overflow-y:auto;flex:1;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.pc-overlay-long.is-open{display:flex}
.pc-overlay-long::-webkit-scrollbar{width:4px}
.pc-overlay-long::-webkit-scrollbar-thumb{background:var(--rule);border-radius:2px}
.pc-overlay-long p{font-size:12.5px;color:var(--muted);line-height:1.68}
.pc-overlay-long p strong{color:var(--ink);font-weight:600}
.pc-overlay-long code{font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;font-size:11px;background:#f4f4f8;padding:1px 5px;border-radius:3px;color:var(--ink)}
.pc-overlay-foot{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--rule);flex-shrink:0;gap:12px}
.pc-overlay-close{position:absolute;top:10px;right:10px;width:44px;height:44px;background:#ffffff;border:1px solid var(--ink);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:background .18s,color .12s}
@media (hover: hover) and (pointer: fine) { .pc-overlay-close:hover{background:var(--ink);color:#fff} }
.pc-overlay-btn{display:inline-flex;align-items:center;gap:6px;font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;border:1px solid var(--ink);padding:12px 18px;min-height:44px;transition:background .18s,color .12s}
@media (hover: hover) and (pointer: fine) { .pc-overlay-btn:hover{background:var(--ink);color:#fff} }
.pc-overlay-tech{font-family:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;font-size:10px;color:var(--muted);letter-spacing:.04em}
@media(max-width:768px){.pc-overlay-inner{grid-template-columns:1fr;grid-template-rows:240px 1fr;height:92vh}.pc-overlay-imgs{border-right:0;border-bottom:1px solid var(--ink)}}