/* =============================================================================
   MyS SinergiaaS — Portafolio comercial
   Sin dependencias y sin paso de compilación: se despliega tal cual.
   ========================================================================== */

/* ------------------------------------------------------------- 1. TOKENS -- */
:root {
  /* Escala de superficie — tema oscuro (por defecto) */
  --bg:            #0A1020;
  --bg-2:          #0F172A;   /* slate-900 · fondo VÓRTEX PM */
  --surface:       #141F38;
  --surface-2:     #1E293B;   /* superficie VÓRTEX PM */
  --border:        rgba(148, 163, 184, 0.14);
  --border-fuerte: rgba(148, 163, 184, 0.26);

  /* Texto */
  --text:   #E2E8F0;          /* texto principal VÓRTEX PM */
  --muted:  #94A3B8;
  --dim:    #64748B;

  /* Marca */
  --primary:      #6366F1;    /* índigo VÓRTEX PM */
  --primary-lite: #818CF8;
  --primary-deep: #312E81;
  --cyan:         #06B6D4;
  --violet:       #2D1B4E;

  /* Semáforo */
  --amber: #F59E0B;
  --green: #22C55E;
  --red:   #EF4444;

  /* Composición */
  --grad-marca: linear-gradient(135deg, var(--primary-lite) 0%, var(--primary) 45%, var(--cyan) 100%);
  --grad-halo:  radial-gradient(60% 60% at 50% 0%, rgba(99, 102, 241, 0.22) 0%, transparent 70%);
  --sombra:     0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -12px rgba(0, 0, 0, 0.55);
  --sombra-alta:0 2px 4px rgba(0, 0, 0, 0.4), 0 28px 60px -20px rgba(0, 0, 0, 0.75);

  --radio:    14px;
  --radio-sm: 9px;
  --ancho:    1180px;
  --gutter:   clamp(1.1rem, 4vw, 2.5rem);
  --trans:    200ms cubic-bezier(0.4, 0, 0.2, 1);

  --f-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-texto:   "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  color-scheme: dark;
}

/* Tema claro — se activa con el conmutador (preferencia recurrente de Mac:
   claro / oscuro / automático, no solo seguir al sistema) */
:root[data-tema="claro"] {
  --bg:            #F4F6FB;
  --bg-2:          #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F1F5F9;
  --border:        rgba(15, 23, 42, 0.10);
  --border-fuerte: rgba(15, 23, 42, 0.20);
  --text:   #0F172A;
  --muted:  #475569;
  --dim:    #64748B;
  --primary-deep: #C7D2FE;
  --grad-halo: radial-gradient(60% 60% at 50% 0%, rgba(99, 102, 241, 0.13) 0%, transparent 70%);
  --sombra:      0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 28px -14px rgba(15, 23, 42, 0.18);
  --sombra-alta: 0 2px 6px rgba(15, 23, 42, 0.08), 0 28px 56px -22px rgba(15, 23, 42, 0.28);
  color-scheme: light;
}

/* ------------------------------------------------------------- 2. BASE --- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;              /* garantía dura contra desbordamiento lateral */
}

img, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

::selection { background: var(--primary); color: #fff; }

:focus-visible {
  outline: 2px solid var(--primary-lite);
  outline-offset: 3px;
  border-radius: 4px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--primary); color: #fff;
  padding: 0.7rem 1.1rem; border-radius: 0 0 var(--radio-sm) 0; z-index: 200;
}
.saltar:focus { left: 0; }

/* ------------------------------------------------------- 3. CABECERA ----- */
.progreso {
  position: fixed; inset: 0 auto auto 0;
  height: 2px; width: 0%;
  background: var(--grad-marca);
  z-index: 120;
  transition: width 90ms linear;
}

.cabecera {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--trans), background var(--trans);
}
.cabecera.pegada { border-bottom-color: var(--border); }

.cabecera__fila {
  display: flex; align-items: center; gap: 1rem;
  height: 66px;
}

.marca { display: flex; align-items: center; gap: 0.6rem; font-family: var(--f-display); font-weight: 700; }

/* El logotipo oficial lleva el texto en azul marino y sobre el tema oscuro no
   se leería, así que hay dos archivos y se muestra el que corresponde. Se
   colocan los dos en el HTML —en vez de cambiar el src con JavaScript— para
   que el correcto ya esté descargado cuando el visitante conmuta el tema. */
.marca__logo { height: 32px; width: auto; display: block; }
.marca__logo--oscuro { display: none; }
:root:not([data-tema="claro"]) .marca__logo--claro  { display: none; }
:root:not([data-tema="claro"]) .marca__logo--oscuro { display: block; }

.marca__texto { font-size: 0.95rem; letter-spacing: -0.01em; white-space: nowrap; }
.marca__texto span { color: var(--muted); font-weight: 500; }

.nav { display: flex; gap: 0.15rem; margin-left: auto; }
.nav a {
  padding: 0.45rem 0.8rem;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--muted);
  transition: color var(--trans), background var(--trans);
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a.activo { color: var(--text); }
.nav a.activo::after {
  content: ""; display: block; height: 2px; margin-top: 3px;
  border-radius: 2px; background: var(--grad-marca);
}

.acciones { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.nav + .acciones { margin-left: 0.6rem; }

.icono-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 10px;
  color: var(--muted);
  transition: var(--trans);
}
.icono-btn:hover { color: var(--text); border-color: var(--border-fuerte); transform: translateY(-1px); }
.icono-btn svg { width: 17px; height: 17px; }

#btn-menu { display: none; }

.menu-movil {
  display: none;
  border-top: 1px solid var(--border);
  padding: 0.5rem var(--gutter) 1rem;
}
.menu-movil.abierto { display: block; }
.menu-movil a {
  display: block; padding: 0.72rem 0.2rem;
  color: var(--muted); font-size: 0.98rem;
  border-bottom: 1px solid var(--border);
}
.menu-movil a:last-child { border-bottom: 0; }

/* ------------------------------------------------------------ 4. HERO ---- */
.hero {
  position: relative;
  padding: clamp(6.5rem, 16vw, 9.5rem) 0 clamp(3rem, 8vw, 5rem);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--grad-halo);
  pointer-events: none;
}
#vortex {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.5;
  pointer-events: none;
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.6rem, 5vw, 3.5rem);
  align-items: center;
}
.hero__inner { max-width: 700px; min-width: 0; }

/* --- Retrato -------------------------------------------------------------- */
.retrato { margin: 0; text-align: center; }
.retrato__marco {
  position: relative;
  width: clamp(180px, 22vw, 268px);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border-fuerte);
  background: var(--surface);
  box-shadow: var(--sombra-alta), 0 0 0 6px color-mix(in srgb, var(--primary) 9%, transparent);
}
.retrato__marco img { width: 100%; height: auto; display: block; }
.retrato__marco::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--bg) 72%, transparent) 100%);
  pointer-events: none;
}
.retrato__pie {
  margin-top: 0.9rem;
  font-family: var(--f-display); font-weight: 600; font-size: 0.88rem;
  color: var(--text); line-height: 1.35;
}
.retrato__pie span { display: block; font-family: var(--f-texto); font-weight: 400; font-size: 0.78rem; color: var(--dim); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .retrato { order: -1; text-align: left; }
  .retrato__marco { width: clamp(132px, 34vw, 168px); }
  .retrato__pie { display: none; }
}

.pildora {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.35rem 0.85rem 0.35rem 0.5rem;
  border: 1px solid var(--border-fuerte);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  font-size: 0.78rem; color: var(--muted);
  letter-spacing: 0.01em;
}
.punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
  animation: latido 2.4s ease-in-out infinite;
}
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.42; } }

.hero h1 {
  margin: 1.4rem 0 0;
  /* Tope bajado de 4.4 a 3.8rem: con el retrato ocupando la columna derecha,
     "Dirijo proyectos de software" se partía en cuatro líneas. */
  font-size: clamp(2.15rem, 5.2vw, 3.8rem);
  letter-spacing: -0.035em;
}
.hero h1 .degradado {
  background: var(--grad-marca);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero__rol {
  margin-top: 1rem;
  font-family: var(--f-display);
  font-size: clamp(1rem, 2.6vw, 1.28rem);
  font-weight: 500;
  color: var(--primary-lite);
  letter-spacing: -0.01em;
}
.hero__texto {
  margin-top: 1.35rem;
  max-width: 62ch;
  color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.08rem);
}

.hero__botones { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2.2rem; }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.78rem 1.4rem;
  border-radius: 11px;
  border: 1px solid transparent;
  font-weight: 600; font-size: 0.94rem;
  transition: var(--trans);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
.btn--primario {
  background: var(--grad-marca); color: #fff;
  box-shadow: 0 10px 30px -12px rgba(99, 102, 241, 0.85);
}
.btn--primario:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(99, 102, 241, 0.95); }
.btn--fantasma {
  border-color: var(--border-fuerte); color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}
.btn--fantasma:hover { border-color: var(--primary); color: var(--primary-lite); transform: translateY(-2px); }

/* Verde oficial de WhatsApp: es una marca reconocible, no se tiñe de índigo. */
.btn--whatsapp {
  background: #25D366; color: #06301A;
  box-shadow: 0 10px 30px -12px rgba(37, 211, 102, 0.75);
}
.btn--whatsapp:hover { background: #1FBE5B; transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(37, 211, 102, 0.9); }
.btn--whatsapp svg { width: 18px; height: 18px; flex: 0 0 18px; }

/* Franja de cifras */
.cifras {
  position: relative; z-index: 1;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 158px), 1fr));
  margin-top: clamp(3rem, 8vw, 4.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: var(--border);
  overflow: hidden;
}
.cifra { background: var(--bg-2); padding: 1.35rem 1.2rem; }
.cifra__n {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.7rem, 4.6vw, 2.3rem);
  line-height: 1;
  background: var(--grad-marca);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-variant-numeric: tabular-nums;
}
.cifra__l { margin-top: 0.45rem; font-size: 0.79rem; color: var(--dim); line-height: 1.4; }

/* --------------------------------------------------------- 5. SECCIONES -- */
.seccion { padding: clamp(3.5rem, 9vw, 6.5rem) 0; position: relative; }
.seccion--alt { background: var(--bg-2); border-block: 1px solid var(--border); }

.seccion__cab { max-width: 720px; margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.etiqueta {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 0.85rem;
}
.seccion__cab h2 { font-size: clamp(1.6rem, 4.4vw, 2.5rem); }
.seccion__cab p { margin-top: 0.9rem; color: var(--muted); font-size: clamp(0.97rem, 2vw, 1.05rem); }

/* Tarjetas de enfoque */
.rejilla-enfoque {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 262px), 1fr));
}
.enfoque {
  padding: 1.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: var(--surface);
  transition: var(--trans);
}
.enfoque:hover { border-color: var(--border-fuerte); transform: translateY(-3px); box-shadow: var(--sombra); }
.enfoque__ico {
  width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent);
  color: var(--primary-lite);
  margin-bottom: 1.1rem;
}
.enfoque__ico svg { width: 20px; height: 20px; }
.enfoque h3 { font-size: 1.06rem; margin-bottom: 0.6rem; }
.enfoque p { color: var(--muted); font-size: 0.93rem; }

/* --------------------------------------------------------- 6. PROYECTOS -- */
.filtros {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 2rem;
}
.filtro {
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.87rem; font-weight: 500;
  transition: var(--trans);
}
.filtro:hover { color: var(--text); border-color: var(--border-fuerte); }
.filtro[aria-pressed="true"] {
  background: var(--grad-marca); color: #fff; border-color: transparent;
  box-shadow: 0 8px 22px -10px rgba(99, 102, 241, 0.8);
}
.filtro__n { opacity: 0.6; font-family: var(--f-mono); font-size: 0.78em; margin-left: 0.35rem; }

.rejilla {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.5rem;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: var(--surface);
  transition: var(--trans);
  overflow: hidden;
  width: 100%;
}
.tarjeta::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--grad-marca);
  transform: scaleX(0); transform-origin: left;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tarjeta:hover, .tarjeta:focus-visible {
  border-color: var(--border-fuerte);
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
}
.tarjeta:hover::before, .tarjeta:focus-visible::before { transform: scaleX(1); }

/* Las destacadas NO ocupan dos columnas: al ser 8 seguidas, cada una dejaba un
   hueco vacío a su derecha y la rejilla se veía rota (visto en la auditoría de
   la iteración 1 a 1440 px). Se distinguen con acento permanente, no con tamaño. */
.tarjeta--destacada {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 42%),
    var(--surface);
}
.tarjeta--destacada::before { transform: scaleX(1); opacity: 0.55; }
.tarjeta--destacada:hover::before { opacity: 1; }

/* --- Portada de la tarjeta: captura real de la aplicación ----------------- */
.tarjeta--confoto { padding-top: 0; }
.tarjeta__foto {
  position: relative;
  margin: -1px -1.5rem 1.25rem;      /* sangra a los bordes de la tarjeta */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.tarjeta__foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tarjeta:hover .tarjeta__foto img { transform: scale(1.045); }

/* Captura de celular: se muestra entera y centrada, no recortada. */
.tarjeta__foto--vertical {
  background:
    radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%),
    var(--bg-2);
}
.tarjeta__foto--vertical img {
  object-fit: contain;
  object-position: center top;
  padding: 0.5rem 0 0;
}
.tarjeta:hover .tarjeta__foto--vertical img { transform: scale(1.03); }
.tarjeta__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--surface) 88%, transparent) 100%);
}
/* Portada sin captura: banda con el icono de la categoría en marca de agua. */
.tarjeta__foto--vacia {
  display: grid; place-items: center;
  background:
    radial-gradient(120% 140% at 30% 0%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%),
    var(--bg-2);
}
.tarjeta__foto--vacia svg {
  width: 46px; height: 46px;
  color: var(--primary-lite);
  opacity: 0.42;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity var(--trans);
}
.tarjeta:hover .tarjeta__foto--vacia svg { transform: scale(1.12); opacity: 0.62; }

.tarjeta__nfotos {
  position: absolute; right: 0.7rem; bottom: 0.7rem; z-index: 1;
  font-family: var(--f-mono); font-size: 0.66rem;
  padding: 0.22rem 0.5rem; border-radius: 5px;
  background: rgba(2, 6, 18, 0.72); color: #E2E8F0;
  border: 1px solid rgba(226, 232, 240, 0.2);
  backdrop-filter: blur(4px);
}
.tarjeta--confoto .tarjeta__top { padding-top: 0; }

.tarjeta__top { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 0.9rem; }
.tarjeta__titulos { min-width: 0; flex: 1; }
.tarjeta__ico {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--primary-lite);
}
.tarjeta__ico svg { width: 19px; height: 19px; }
.tarjeta h3 { font-size: 1.12rem; }
.tarjeta__tipo { color: var(--dim); font-size: 0.83rem; margin-top: 0.15rem; }

/* La insignia participa del layout (no flota en absoluto): así nunca pisa un
   título largo ni obliga a reservar espacio muerto. Visto en la auditoría. */
.insignia {
  flex: 0 0 auto; align-self: flex-start; margin-top: 0.15rem;
  font-family: var(--f-mono); font-size: 0.63rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.24rem 0.55rem; border-radius: 5px;
  background: color-mix(in srgb, var(--amber) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 38%, transparent);
  color: var(--amber);
  white-space: nowrap;
}

/* Sello de producto publicado: verde y con el punto latiendo, porque es la
   diferencia comercial entre "lo hicimos" y "ábralo ahora mismo". */
.insignia--vivo {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: color-mix(in srgb, var(--green) 15%, transparent);
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
  color: var(--green);
}
.insignia--vivo .punto { width: 6px; height: 6px; box-shadow: none; }

.tarjeta__resumen {
  color: var(--muted); font-size: 0.92rem;
  display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4;
  -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 1.1rem;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.38rem; margin-top: auto; }
.chip {
  font-family: var(--f-mono); font-size: 0.7rem;
  padding: 0.24rem 0.55rem;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  /* Una etiqueta de stack larga NO puede salirse de la tarjeta en pantallas
     estrechas: medido a 360 px, "Patrón Strategy (…)" llegaba a 432 px y el
     recorte de seguridad del body la cortaba. Se deja que envuelva. */
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.chip--mas { color: var(--dim); border-style: dashed; }

.tarjeta__pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; margin-top: 1.15rem;
  padding-top: 0.95rem; border-top: 1px solid var(--border);
  font-size: 0.82rem; color: var(--dim);
}
.tarjeta__ver { color: var(--primary-lite); font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; }
.tarjeta__ver svg { width: 13px; height: 13px; transition: transform var(--trans); }
.tarjeta:hover .tarjeta__ver svg { transform: translateX(3px); }

.vacio { color: var(--dim); padding: 2.5rem 0; text-align: center; }

/* ----------------------------------------------------------- 7. MODAL ---- */
.modal {
  position: fixed; inset: 0; z-index: 150;
  display: none;
  align-items: flex-start; justify-content: center;
  padding: clamp(0.6rem, 4vw, 2.6rem);
  overflow-y: auto;
  background: rgba(2, 6, 18, 0.72);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
.modal.abierto { display: flex; }

.modal__caja {
  position: relative;
  width: 100%; max-width: 760px;
  background: var(--bg-2);
  border: 1px solid var(--border-fuerte);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  animation: subir 260ms cubic-bezier(0.16, 1, 0.3, 1);
  margin-block: auto;
}
@keyframes subir { from { opacity: 0; transform: translateY(18px) scale(0.985); } }

.modal__cerrar {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2;
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted);
  transition: var(--trans);
}
.modal__cerrar:hover { color: var(--red); border-color: var(--red); }
.modal__cerrar svg { width: 16px; height: 16px; }

.modal__cab {
  padding: 1.9rem clamp(1.2rem, 4vw, 2.2rem) 1.5rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 9%, transparent), transparent);
  border-radius: var(--radio) var(--radio) 0 0;
}
.modal__cab h3 { font-size: clamp(1.35rem, 4vw, 1.85rem); padding-right: 2.4rem; }
.modal__cab .tarjeta__tipo { font-size: 0.95rem; margin-top: 0.35rem; }

.modal__meta { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; }
.meta {
  font-family: var(--f-mono); font-size: 0.7rem;
  padding: 0.26rem 0.6rem; border-radius: 6px;
  border: 1px solid var(--border-fuerte); color: var(--muted);
}
.meta--estado { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }

.modal__cuerpo { padding: 1.6rem clamp(1.2rem, 4vw, 2.2rem) 2.1rem; }

.bloque + .bloque { margin-top: 1.9rem; }
.bloque__t {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--f-mono); font-size: 0.71rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 0.8rem;
}
.bloque__t::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.bloque p { color: var(--muted); font-size: 0.95rem; }
.bloque--acciones { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.bloque--acciones .btn { flex: 1 1 auto; justify-content: center; }

/* --- Galería de capturas dentro de la ficha ------------------------------- */
.galeria { display: grid; gap: 1rem; }
.galeria__item { margin: 0; }
.galeria__item img {
  width: 100%; height: auto;
  border-radius: var(--radio-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
}
/* Las capturas de celular no deben ocupar todo el ancho de la ficha: a tamaño
   completo se ven desproporcionadas frente a las de escritorio. */
.galeria__item img[src*="__movil"],
.galeria__item img[src*="__ejercicios"],
.galeria__item img[src*="__veder"],
.galeria__item img[src*="__pro."],
.galeria__item img[src*="__express"],
.galeria__item img[src*="__carta"],
.galeria__item img[src*="__preventa"],
.galeria__item img[src*="__agua"] {
  max-width: 300px;
  display: block;
  margin-inline: auto;
}
.galeria__item figcaption {
  margin-top: 0.55rem;
  font-size: 0.82rem; color: var(--dim); line-height: 1.45;
}
/* Con tres o más imágenes se aprovecha el ancho en pantallas grandes. */
@media (min-width: 620px) {
  .galeria:has(.galeria__item:nth-child(3)) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  }
}

/* --- Certificaciones ------------------------------------------------------ */
.rejilla-cert {
  display: grid; gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.cert {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--border);
  border-left: 2px solid var(--cyan);
  border-radius: var(--radio-sm);
  background: var(--surface);
}
.cert h3 { font-size: 0.95rem; margin-bottom: 0.35rem; }
.cert p { color: var(--dim); font-size: 0.83rem; }

.metricas {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  margin-top: 1.3rem;
}
.metrica {
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radio-sm);
  background: var(--surface);
}
.metrica__v {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.22rem; color: var(--primary-lite);
  font-variant-numeric: tabular-nums;
}
.metrica__l { font-size: 0.73rem; color: var(--dim); margin-top: 0.25rem; line-height: 1.35; }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.lista li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--muted); font-size: 0.93rem;
}
.lista li::before {
  content: ""; position: absolute; left: 0.35rem; top: 0.63rem;
  width: 6px; height: 6px; border-radius: 2px;
  background: var(--grad-marca);
}

/* --------------------------------------------------- 8. CAPACIDADES ------ */
.rejilla-cap {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: var(--border);
  overflow: hidden;
}
.cap { background: var(--bg); padding: 1.5rem; }
.cap h3 { font-size: 1rem; margin-bottom: 0.5rem; color: var(--primary-lite); }
.cap p { color: var(--muted); font-size: 0.9rem; }

/* ---------------------------------------------------- 9. TRAYECTORIA ----- */
.linea { position: relative; padding-left: 1.9rem; }
.linea::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 1px; background: linear-gradient(180deg, var(--primary), transparent);
}
.hito { position: relative; padding-bottom: 1.9rem; }
.hito:last-child { padding-bottom: 0; }
.hito::before {
  content: ""; position: absolute; left: -1.9rem; top: 7px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--primary);
}
.hito__a { font-family: var(--f-mono); font-size: 0.74rem; color: var(--cyan); letter-spacing: 0.06em; }
.hito h3 { font-size: 1.02rem; margin: 0.3rem 0 0.35rem; }
.hito p { color: var(--muted); font-size: 0.9rem; }

/* ------------------------------------------------------ 10. CONTACTO ----- */
.contacto {
  text-align: center;
  padding: clamp(2.4rem, 7vw, 4rem) clamp(1.2rem, 5vw, 3rem);
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background:
    radial-gradient(70% 130% at 50% 0%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 72%),
    var(--surface);
}
.contacto h2 { font-size: clamp(1.6rem, 4.6vw, 2.4rem); }
.contacto p { max-width: 54ch; margin: 1rem auto 0; color: var(--muted); }
.contacto__botones { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 2rem; }

/* --------------------------------------------- 10b. STACK TECNOLÓGICO ---- */
.tecno {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.tecno__grupo {
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: var(--surface);
}
.tecno__grupo h3 {
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary-lite); margin-bottom: 0.9rem;
}
.tecno__grupo .chips { margin-top: 0; }

/* --------------------------------------------- 10c. MYS REPOSITORIOS ----- */
.repos { text-align: center; }
.repos h2 { font-size: clamp(1.5rem, 4.2vw, 2.25rem); margin-top: 0.9rem; }
.repos > p { max-width: 62ch; margin: 1rem auto 0; color: var(--muted); }

.repos__lista {
  display: grid; gap: 0.8rem; margin: 2.2rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  text-align: left;
}
.repo {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radio);
  background: var(--surface);
  transition: var(--trans);
}
.repo:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  transform: translateY(-3px);
  box-shadow: var(--sombra);
}
.repo__ico { flex: 0 0 34px; color: var(--text); }
.repo__ico svg { width: 26px; height: 26px; display: block; }
.repo__txt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.repo__txt strong { font-size: 0.95rem; color: var(--text); }
.repo__txt span { font-size: 0.82rem; color: var(--muted); }
.repo__flecha { margin-left: auto; color: var(--dim); transition: var(--trans); }
.repo__flecha svg { width: 18px; height: 18px; display: block; }
.repo:hover .repo__flecha { color: var(--primary-lite); transform: translateX(3px); }

.repos__cta { margin-top: 2rem; }
.btn--grande { padding: 1rem 1.9rem; font-size: 1rem; }
.btn--grande svg { width: 19px; height: 19px; flex: 0 0 19px; }
.repos__nota { margin-top: 0.95rem; font-size: 0.8rem; color: var(--dim); }

/* ---------------------------------------------------------- 10d. PIE ----- */
.pie {
  border-top: 1px solid var(--border);
  padding: 2.4rem 0 2rem;
  margin-top: clamp(3rem, 8vw, 5rem);
  color: var(--dim); font-size: 0.84rem;
}
.pie__marca { text-align: center; padding-bottom: 1.8rem; }
.pie__logo { height: 40px; width: auto; margin: 0 auto; display: block; }
.pie__logo.marca__logo--oscuro { display: none; }
:root:not([data-tema="claro"]) .pie__logo.marca__logo--claro  { display: none; }
:root:not([data-tema="claro"]) .pie__logo.marca__logo--oscuro { display: block; }
.pie__eslogan {
  margin-top: 0.55rem;
  font-family: var(--f-display); font-size: 0.82rem;
  letter-spacing: 0.06em; color: var(--muted);
}
.pie__enlaces {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem;
  justify-content: center; margin-top: 1.3rem;
}
.pie__enlaces a { color: var(--muted); font-size: 0.86rem; transition: color var(--trans); }
.pie__enlaces a:hover { color: var(--text); }

.pie__fila {
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem;
  align-items: center; justify-content: space-between;
  padding-top: 1.4rem; border-top: 1px solid var(--border);
}

/* ------------------------------------------------- 11. ANIMACIÓN --------- */
.aparece { opacity: 0; transform: translateY(20px); transition: opacity 620ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1); }
.aparece.visible { opacity: 1; transform: none; }

body.sin-scroll { overflow: hidden; }

/* ------------------------------------------------- 12. RESPONSIVE -------- */
@media (max-width: 860px) {
  .nav { display: none; }
  #btn-menu { display: grid; }
  html { scroll-padding-top: 74px; }
}

@media (max-width: 560px) {
  .marca__logo { height: 27px; }
}

@media (max-width: 420px) {
  .marca__texto span { display: none; }
  .bloque--acciones .btn { flex: 1 1 100%; }
  .hero__botones .btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------- 13. ACCESIBILIDAD ----- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .aparece { opacity: 1; transform: none; }
  #vortex { display: none; }
}

/* ------------------------------------------------- 14. IMPRESIÓN --------- */
@media print {
  .cabecera, .progreso, .filtros, #vortex, .contacto__botones, .icono-btn, .menu-movil { display: none !important; }
  body { background: #fff; color: #000; }
  .tarjeta, .enfoque, .cap { break-inside: avoid; border-color: #ccc; }
  .tarjeta__resumen { -webkit-line-clamp: unset; line-clamp: unset; }
}