/* ============================================================
   SU WEB PROFESIONAL — sección "Trabajos"
   Bloque para reemplazar a "Trabajos entregados" en la home.

   Todo cuelga de .swp-trabajos y todas las clases arrancan con
   "swp-", así que no toca nada del resto del sitio ni depende de
   variables del tema: los colores y la tipografía están acá
   adentro, medidos de la home.
   ============================================================ */

/* La tipografía de la casa. Si el tema ya carga Inter Tight,
   borrá este bloque y el archivo de assets/fonts. */
@font-face {
  font-family: 'Inter Tight';
  src: url('../assets/fonts/inter-tight-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

.swp-trabajos {
  /* colores muestreados de la home */
  --swp-azul: #2F86FF;
  --swp-azul-osc: #1668E8;
  --swp-azul-claro: #67A9FF;
  --swp-navy: #061731;
  --swp-tinta: #0A1730;
  --swp-gris: #5B6B85;
  --swp-blanco: #F8FBFF;
  --swp-claro: #F5F7FE;
  --swp-claro-alt: #EDF1FB;
  --swp-linea: rgba(120, 165, 240, .18);
  --swp-linea-clara: #DDE4F5;
  --swp-sombra-azul: 0 14px 34px rgba(47, 134, 255, .34);

  --swp-edge: clamp(18px, 5vw, 72px);
  --swp-ancho: 1296px;
  --swp-radio: 20px;
  --swp-ff: 'Inter Tight', system-ui, -apple-system, sans-serif;

  box-sizing: border-box;
  padding-block: clamp(60px, 7.5vw, 116px);
  background: linear-gradient(180deg, var(--swp-claro) 0%, var(--swp-claro-alt) 100%);
  color: var(--swp-tinta);
  font-family: var(--swp-ff);
  font-size: 16px;
  line-height: 1.62;
}

/* Defensa contra los estilos generales del tema */
.swp-trabajos *, .swp-trabajos *::before, .swp-trabajos *::after { box-sizing: border-box; }
.swp-trabajos p, .swp-trabajos h2 { margin: 0; }
.swp-trabajos img { display: block; max-width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.swp-trabajos a { color: inherit; text-decoration: none; box-shadow: none; }
.swp-trabajos button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.swp-contenedor { width: min(100% - var(--swp-edge) * 2, var(--swp-ancho)); margin-inline: auto; }
.swp-icono { width: 1em; height: 1em; flex: none; }

/* ---------- Cabeza ---------- */
.swp-cabeza { max-width: 760px; margin: 0 auto clamp(34px, 4.4vw, 60px); text-align: center; }

.swp-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(47, 134, 255, .09); border: 1px solid rgba(47, 134, 255, .26);
  color: var(--swp-azul-osc);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.swp-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--swp-azul); }

/* 52px con 55px de interlínea: los mismos que el resto de los
   títulos de sección de la home */
.swp-titulo {
  margin-top: 20px;
  font-family: var(--swp-ff); font-size: clamp(28px, 3.61vw, 52px); font-weight: 800;
  line-height: 1.06; letter-spacing: -.01em;
}
.swp-titulo em { font-style: normal; color: var(--swp-azul); }
.swp-bajada { margin-top: 18px; color: var(--swp-gris); font-size: clamp(16px, 1.32vw, 19px); line-height: 1.63; }

/* ---------- Filtros ---------- */
.swp-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: clamp(28px, 3vw, 44px); }
.swp-filtro {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px;
  border: 1px solid var(--swp-linea-clara); background: #fff; color: var(--swp-gris);
  font-family: var(--swp-ff); font-size: 15px; font-weight: 500;
  transition: border-color .2s, color .2s, background-color .2s, box-shadow .2s;
}
.swp-filtro:hover { border-color: var(--swp-azul); color: var(--swp-tinta); }
.swp-filtro span { font-size: 12px; opacity: .65; }
.swp-filtro.is-activo {
  background: linear-gradient(135deg, #4C97FF 0%, var(--swp-azul) 55%, var(--swp-azul-osc) 100%);
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: var(--swp-sombra-azul);
}

/* ---------- Grilla ---------- */
.swp-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 2.6vw, 38px); }

.swp-obra { position: relative; }
.swp-obra[hidden] { display: none; }
.swp-obra__link { display: block; }

.swp-marco {
  position: relative; display: block;
  border-radius: var(--swp-radio);
  border: 1px solid rgba(10, 23, 48, .08);
  background: var(--swp-navy);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(10, 23, 48, .16);
  transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s;
}
.swp-obra__link:hover .swp-marco { transform: translateY(-6px); box-shadow: 0 28px 62px rgba(10, 23, 48, .24); }

/* Barra del navegador falso */
.swp-marco__barra {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-bottom: 1px solid var(--swp-linea);
}
.swp-marco__puntos { display: flex; gap: 6px; }
.swp-marco__puntos i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.swp-marco__url {
  flex: 1; padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  font-size: 12px; color: rgba(248, 251, 255, .56); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* La ventana recorta la captura; al pasar el mouse la captura sube
   y se ve la página entera, sin JavaScript. */
.swp-marco__ventana { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.swp-marco__captura { width: 100%; height: auto; transition: transform 1s cubic-bezier(.4, 0, .2, 1); }
.swp-obra__link:hover .swp-marco__captura,
.swp-obra.is-viendo .swp-marco__captura { transform: translateY(-80%); transition-duration: 9s; transition-timing-function: linear; }

/* El celular asomando en la esquina: la misma página, responsive */
.swp-telefono {
  position: absolute; right: 16px; top: 54px; z-index: 3; width: 17%; max-width: 108px;
  border-radius: 12px; border: 2px solid rgba(255, 255, 255, .16);
  background: #05142B; overflow: hidden;
  box-shadow: 0 16px 36px rgba(2, 10, 26, .6);
  transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}
.swp-telefono img { width: 100%; aspect-ratio: 9 / 17; object-fit: cover; object-position: top center; }
.swp-obra__link:hover .swp-telefono { transform: translateY(-8px); }

/* Pie de la tarjeta: rubro, nombre y el botón redondo azul */
.swp-obra__pie {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px;
  padding: 58px 18px 18px;
  color: var(--swp-blanco);
  background: linear-gradient(to top,
    rgba(5, 8, 20, .97) 0%, rgba(5, 8, 20, .95) 42%,
    rgba(5, 8, 20, .62) 72%, rgba(5, 8, 20, 0) 100%);
}
.swp-obra__rubro { grid-column: 1; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--swp-azul-claro); }
.swp-obra__nombre { grid-column: 1; font-size: clamp(19px, 1.6vw, 23px); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.swp-obra__ir {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--swp-azul); color: #fff;
  transition: transform .25s, box-shadow .25s;
}
.swp-obra__ir .swp-icono { width: 19px; height: 19px; }
.swp-obra__link:hover .swp-obra__ir { transform: translateX(3px); box-shadow: var(--swp-sombra-azul); }

.swp-obra__texto { margin-top: 16px; color: var(--swp-gris); font-size: 14px; line-height: 1.57; }

.swp-vacio { margin-top: 30px; text-align: center; color: var(--swp-gris); }

/* ---------- Aparición al scrollear ---------- */
.swp-js .swp-aparece { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1); }
.swp-js .swp-aparece.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .swp-js .swp-aparece { opacity: 1; transform: none; transition: none; }
  .swp-obra__link:hover .swp-marco__captura,
  .swp-obra.is-viendo .swp-marco__captura { transform: none; }
  .swp-trabajos * { transition-duration: .01ms !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .swp-grilla { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .swp-filtros { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--swp-edge) * -1); padding-inline: var(--swp-edge); }
  .swp-filtros::-webkit-scrollbar { display: none; }
  .swp-filtro { flex: none; }

  .swp-marco__barra { padding: 10px 12px; }
  .swp-marco__url { font-size: 11px; }
  .swp-telefono { width: 21%; right: 12px; top: 46px; }
  .swp-obra__pie { padding: 40px 14px 14px; gap: 3px 12px; }
  .swp-obra__ir { width: 40px; height: 40px; }
}