/* ============================================
   FUTURA CLICK — PAGES.CSS
   Estilos para páginas internas (servicios, nosotros,
   proyectos, contacto). Requiere styles.css cargado antes.
   ============================================ */

/* ============================================
   PAGE HERO
   ============================================ */
.page-hero {
  min-height: 60vh;
  background: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple) 50%, var(--purple-light) 100%);
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  padding: 140px 0 80px;
}

.page-hero--short {
  min-height: 44vh;
  padding: 130px 0 64px;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 80% 20%, rgba(245,184,0,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(123,61,181,0.25) 0%, transparent 70%);
  pointer-events: none;
}

.page-hero__isotipo {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 360px;
  height: auto;
  aspect-ratio: 1 / 1;
  opacity: 0.06;
  filter: brightness(0) invert(1);
  pointer-events: none;
  animation: float 10s ease-in-out infinite;
}

.page-hero__content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 900;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 20px;
}

.page-hero__title em {
  font-style: italic;
  color: var(--yellow);
}

.page-hero__sub {
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  max-width: 560px;
}

/* Breadcrumb */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
  letter-spacing: 0.03em;
  transition: color 0.2s;
}

.breadcrumb:hover { color: rgba(255,255,255,0.85); }

/* ============================================
   PAGE SECTIONS
   ============================================ */
.page-section {
  padding: 100px 0;
}

.page-section--purple {
  background: linear-gradient(135deg, var(--purple-dark) 0%, var(--purple) 100%);
}

.page-section--gray {
  background: var(--gray-100);
}

/* ============================================
   SPLIT GRID (descripción + lista)
   ============================================ */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.split-grid__text { }

.split-grid__visual {
  align-self: center;
}

.body-text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--gray-600);
  margin-bottom: 16px;
}

.body-text:last-child { margin-bottom: 0; }

/* Lista de features */
.list-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 24px;
}

.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.feature-list li {
  font-size: 15px;
  color: var(--gray-600);
  padding: 14px 16px 14px 44px;
  position: relative;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  transition: border-color 0.2s, background 0.2s;
}

.feature-list li::before {
  content: '→';
  position: absolute;
  left: 16px;
  color: var(--yellow);
  font-size: 13px;
  font-weight: 700;
}

.feature-list li:hover {
  background: var(--purple-bg);
  border-left-color: var(--purple);
}

/* ============================================
   PLATAFORMAS / ENTREGABLES GRID
   ============================================ */
.plataformas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.plataforma {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  transition: var(--transition);
}

.plataforma:hover {
  background: rgba(255,255,255,0.13);
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.22);
}

.plataforma span {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 8px;
}

.plataforma small {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}

/* ============================================
   PROCESO INLINE (horizontal strip)
   ============================================ */
.proceso-inline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: steps;
}

.paso-inline {
  position: relative;
  padding: 36px 28px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  transition: var(--transition);
}

.page-section--gray .paso-inline {
  background: var(--white);
}

.paso-inline:hover {
  border-color: transparent;
  box-shadow: 0 16px 48px rgba(91,30,143,0.1);
  transform: translateY(-4px);
}

.paso-inline__num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  color: var(--purple);
  opacity: 0.12;
  line-height: 1;
  margin-bottom: 16px;
}

.paso-inline h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 10px;
}

.paso-inline p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--gray-600);
}

/* Connector line between steps */
.proceso-inline .paso-inline:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -13px;
  width: 24px;
  height: 1px;
  background: var(--gray-200);
  z-index: 1;
}

/* ============================================
   NOSOTROS — HISTORIA
   ============================================ */
.historia-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.historia-visual {
  position: relative;
}


.visual-card--main {
  background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
  display: flex;
  align-items: center;
  justify-content: center;
}

.visual-card__inner {
  text-align: center;
  color: var(--white);
}

.visual-card__iso {
  width: 100px;
  opacity: 0.25;
  filter: brightness(0) invert(1);
  margin: 0 auto 16px;
}

.visual-card__label {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  opacity: 0.6;
}

.visual-stat {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: var(--yellow);
  border-radius: var(--radius);
  padding: 20px 24px;
  text-align: center;
  box-shadow: 0 12px 36px rgba(245,184,0,0.35);
}

.visual-stat__num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 900;
  color: var(--black);
  line-height: 1;
}

.visual-stat__label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(0,0,0,0.55);
  margin-top: 4px;
}

/* ============================================
   VALORES
   ============================================ */
.valores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.valor-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 36px 28px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.valor-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--yellow));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.valor-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(91,30,143,0.1);
  border-color: transparent;
}

.valor-card:hover::before { transform: scaleX(1); }

.valor-card__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--purple-bg);
  border-radius: var(--radius-sm);
  color: var(--purple);
  margin-bottom: 20px;
}
.valor-card__icon svg { width: 28px; height: 28px; }

.valor-card h3,
.valor-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 12px;
}

.valor-card p,
.valor-card__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--gray-600);
}

/* ============================================
   EQUIPO
   ============================================ */
.equipo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.miembro {
  text-align: center;
  transition: var(--transition);
}

.miembro:hover { transform: translateY(-4px); }

.miembro__foto {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--purple-dark), var(--purple-light));
  position: relative;
}

.miembro__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(91, 30, 143, 0.12);
  pointer-events: none;
}

.miembro__foto--1 { background: linear-gradient(135deg, #3D1160, #7B3DB5); }
.miembro__foto--2 { background: linear-gradient(135deg, #2D0F5A, #5B1E8F); }
.miembro__foto--3 { background: linear-gradient(135deg, #5B1E8F, #8B5CF6); }

.miembro__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: saturate(0.82) brightness(0.96);
}

.miembro__info { text-align: center; }

.miembro__nombre,
.miembro__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
}

.miembro__rol,
.miembro__role {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.miembro__bio {
  font-size: 14px;
  line-height: 1.65;
  color: var(--gray-600);
}

.equipo-colaboradores {
  margin-top: 48px;
  padding: 28px 36px;
  background: #f5f0fa;
  border-radius: 12px;
  border-left: 4px solid var(--purple);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.equipo-colaboradores p {
  color: #4a4060;
  line-height: 1.75;
  font-size: 15px;
}

/* ============================================
   PROYECTOS — FILTROS
   ============================================ */
.filtros {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  justify-content: center;
}

.filtro {
  padding: 9px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-600);
  transition: var(--transition);
}

.filtro:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.filtro.active,
.filtro--active {
  background: var(--purple);
  border-color: var(--purple);
  color: var(--white);
}

/* Proyecto cards (página proyectos) */
.proy-grid,
.proyectos-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.proy-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-200);
  transition: var(--transition);
}

.proy-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(91,30,143,0.12);
  border-color: transparent;
}

.proy-card__img {
  height: 220px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px;
}

.proy-card__img--1 { background: linear-gradient(135deg, #2D0F5A, #6B3FA0); }
.proy-card__img--2 { background: linear-gradient(135deg, #5B1E8F, #F5B800); }
.proy-card__img--3 { background: linear-gradient(135deg, #3D1160, #8B5CF6); }
.proy-card__img--4 { background: linear-gradient(135deg, #1A0A2E, #5B1E8F); }
.proy-card__img--5 { background: linear-gradient(135deg, #7B3DB5, #F5B800); }
.proy-card__img--6 { background: linear-gradient(135deg, #0D0013, #3D1160); }
.proy-card__img--a { background: linear-gradient(135deg, #2D0F5A, #6B3FA0); }
.proy-card__img--b { background: linear-gradient(135deg, #5B1E8F, #F5B800); }
.proy-card__img--c { background: linear-gradient(135deg, #3D1160, #8B5CF6); }

.proy-card__cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.2);
}

.proy-card__body,
.proy-card__info { padding: 24px; }

.proy-card h3,
.proy-card__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 10px;
  line-height: 1.3;
}

.proy-card p,
.proy-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-600);
  margin-bottom: 12px;
}

.proy-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.proy-card__tags span {
  font-size: 11px;
  font-weight: 600;
  color: var(--purple);
  background: var(--purple-bg);
  padding: 4px 10px;
  border-radius: 100px;
}

/* Sections sin padding top/bottom reducido */
.page-section--tight { padding: 32px 0; }
.page-section--notop { padding-top: 0; }
.page-section--cta-mid { padding: 0 0 48px; }

/* Mid-page CTA en páginas de servicio */
.page-cta-mid {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 28px 32px;
  background: var(--purple-bg);
  border-radius: var(--radius);
  border: 1px solid rgba(91,30,143,0.1);
  margin-top: 48px;
}

.page-cta-mid p {
  font-size: 16px;
  font-weight: 500;
  color: var(--purple);
  margin: 0;
  flex: 1;
}

/* ─── Social proof strip ─── */
.proof-strip {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  padding: 40px 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 24px;
}
.proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 40px;
  border-right: 1px solid var(--gray-200);
}
.proof-item:last-child { border-right: none; }
.proof-num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  color: var(--purple);
  line-height: 1;
  margin-bottom: 6px;
}
.proof-label {
  font-size: 13px;
  color: var(--gray-600);
  max-width: 130px;
  line-height: 1.4;
}
.proof-link {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
}
.proof-link a { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .proof-item { border-right: none; border-bottom: 1px solid var(--gray-200); padding: 20px; width: 100%; }
  .proof-item:last-child { border-bottom: none; }
}

/* visual-card para nosotros stats */
.visual-card {
  background: linear-gradient(135deg, var(--purple-dark), var(--purple));
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 0;
}

.visual-card__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  padding: 8px 28px;
  position: relative;
}

.visual-card__stat:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.18);
}

.stat-num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}

.stat-plus {
  color: var(--yellow);
  font-size: 28px;
}

.stat-label {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  font-weight: 500;
}

/* ============================================
   CONTACTO (página contacto.html)
   ============================================ */
.contacto__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}

.contacto__left {}

.contacto__text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray-600);
  margin-bottom: 36px;
}

.contacto__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
}

.contacto__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--gray-600);
}

.contacto__item svg { color: var(--purple); flex-shrink: 0; }

.contacto__redes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.red-btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--purple);
  border: 1.5px solid var(--purple);
  transition: var(--transition);
}

.red-btn:hover {
  background: var(--purple);
  color: var(--white);
}

.contacto__right {}

/* Nav active state */
.nav__active {
  color: var(--yellow) !important;
}

.nav.scrolled .nav__active {
  color: var(--purple) !important;
}

/* ============================================
   RESPONSIVE — TABLET (≤1024px)
   ============================================ */
@media (max-width: 1024px) {
  .plataformas-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .proceso-inline { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .proceso-inline .paso-inline:not(:last-child)::after { display: none; }
  .valores-grid { grid-template-columns: repeat(2, 1fr); }
  .historia-grid { grid-template-columns: 1fr; gap: 48px; }
  .split-grid { grid-template-columns: 1fr; gap: 40px; }
  .contacto__grid { grid-template-columns: 1fr; gap: 48px; }
  .equipo-grid { grid-template-columns: 1fr; gap: 24px; }
  .proy-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   RESPONSIVE — MOBILE (≤768px)
   ============================================ */
@media (max-width: 768px) {

  /* Hero */
  .page-hero {
    padding: 120px 0 56px;
    min-height: 50vh;
    align-items: flex-end;
  }

  .page-hero--short {
    padding: 110px 0 48px;
    min-height: 38vh;
  }

  .page-hero__title { font-size: clamp(36px, 10vw, 56px); }
  .page-hero__isotipo { width: 200px; right: -20px; bottom: -20px; animation: none; }

  /* Sections */
  .page-section { padding: 64px 0; }

  /* Split grid */
  .split-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Plataformas */
  .plataformas-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .plataforma { padding: 24px 16px; }
  .plataforma span { font-size: 15px; }

  /* Proceso inline */
  .proceso-inline { grid-template-columns: 1fr; gap: 14px; }
  .paso-inline { padding: 28px 24px; }
  .paso-inline__num { font-size: 32px; margin-bottom: 10px; }

  /* Valores */
  .valores-grid { grid-template-columns: 1fr; gap: 14px; }
  .valor-card { padding: 28px 24px; }

  /* Historia */
  .historia-grid { grid-template-columns: 1fr; gap: 40px; }
  .visual-stat { right: -8px; bottom: -12px; }

  /* Equipo */
  .equipo-grid { grid-template-columns: 1fr; gap: 24px; }
  .miembro__foto { max-width: 280px; margin-left: auto; margin-right: auto; }
  .visual-card { flex-direction: column; gap: 12px; padding: 24px 20px; }
  .visual-card__stat { border-right: none !important; padding: 0; }
  .visual-card__stat:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.18); padding-bottom: 12px; }

  /* Proyectos */
  .filtros { gap: 8px; }
  .filtro { padding: 8px 16px; font-size: 12px; }
  .proy-grid { grid-template-columns: 1fr; gap: 16px; }

  /* Contacto */
  .contacto__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================
   RESPONSIVE — SMALL MOBILE (≤480px)
   ============================================ */
@media (max-width: 480px) {
  .page-hero { padding: 100px 0 48px; }
  .plataformas-grid { grid-template-columns: repeat(2, 1fr); }
  .filtros { justify-content: flex-start; }
}

/* ============================================
   PROYECTOS — TABS DE NAVEGACIÓN POR SERVICIO
   ============================================ */
.svc-tabs {
  position: sticky;
  top: 76px;
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.svc-tabs::-webkit-scrollbar { display: none; }

.svc-tabs__inner {
  display: flex;
  min-width: max-content;
  padding: 0 max(24px, calc((100vw - 1200px) / 2));
}

.svc-tab {
  flex-shrink: 0;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-400);
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  text-decoration: none;
}

.svc-tab:hover { color: var(--purple); }

.svc-tab--active {
  color: var(--purple);
  border-bottom-color: var(--purple);
}

/* ============================================
   PROYECTOS — SECCIONES POR SERVICIO
   ============================================ */
.result-section {
  padding: 80px 0;
  border-bottom: 1px solid var(--gray-100);
}

.result-section:last-of-type { border-bottom: none; }

.result-section__hd {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 40px;
}

.result-section__label {
  display: flex;
  align-items: center;
  gap: 12px;
}

.result-section__icon {
  width: 40px;
  height: 40px;
  background: var(--purple-bg);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  flex-shrink: 0;
}

.result-section__name {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  color: var(--black);
  line-height: 1;
}

.result-section__sub {
  font-size: 15px;
  color: var(--gray-400);
  padding-left: 52px;
}

.result-section__link {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
  color: var(--purple);
  padding-left: 52px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
  text-decoration: none;
}

.result-section__link:hover { gap: 8px; }

/* ============================================
   PROYECTOS — RESULT CARDS
   ============================================ */
.result-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.result-cards--2 {
  grid-template-columns: repeat(2, 1fr);
}

.rc-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

a.rc-card { text-decoration: none; color: inherit; }

.rc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(91,30,143,0.16);
  border-color: transparent;
}

/* Imagen real en la preview de la card */
.rc-card__visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 0;
}

/* Visual de marca: fondo neutro, más alto, logo centrado */
.rc-card__visual--brand {
  height: 280px;
  background: #f7f7f5;
}
.rc-card__visual--brand > img {
  object-fit: contain;
  object-position: center center;
  padding: 8px;
}

/* Gran Criollo: logo más grande */
[data-project="marca-1"] .rc-card__visual--brand {
  overflow: hidden;
}
[data-project="marca-1"] .rc-card__visual--brand > img {
  padding: 0;
  transform: scale(1.7);
  transform-origin: center center;
}

/* Celeste Levita: fondo cálido + zoom para compensar márgenes internos del PNG */
[data-project="marca-2"] .rc-card__visual--brand {
  background: #e8e2d9;
  overflow: hidden;
}
[data-project="marca-2"] .rc-card__visual--brand > img {
  padding: 0;
  transform: scale(2.8);
  transform-origin: center center;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.12));
}

/* Visual area (gradient + metric) */
.rc-card__visual {
  height: 200px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

/* Decorative ring behind metric */
.rc-card__visual::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.07);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.rc-card__visual::after {
  content: '';
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Gradient variants */
/* pm-1: screenshot de Meta Ads como fondo — blur + overlay */
[data-project="pm-1"] .rc-v1 > img {
  filter: blur(2px);
  transform: scale(1.04);
}
[data-project="pm-1"] .rc-v1::before {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  background: rgba(10, 0, 25, 0.72);
  transform: none;
  top: 0;
  left: 0;
  z-index: 1; /* encima de la img (z-index:0) */
}
[data-project="pm-1"] .rc-v1::after { display: none; }

/* web-1: screenshot del sitio — sin blur, se muestra el diseño */
[data-project="web-1"] .rc-v6::before {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  background: rgba(10, 0, 25, 0.52);
  transform: none;
  top: 0;
  left: 0;
  z-index: 1;
}
[data-project="web-1"] .rc-v6::after { display: none; }
[data-project="web-1"] .rc-card__metric { z-index: 2; font-size: clamp(28px, 4vw, 40px); letter-spacing: 0.02em; }
[data-project="web-1"] .rc-card__metric-label { z-index: 2; color: rgba(255,255,255,0.85); }
[data-project="web-1"] .rc-card__hover { z-index: 3; }

/* web-2: screenshot Agropasión Eventos */
[data-project="web-2"] .rc-v7::before {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  background: rgba(10, 0, 25, 0.52);
  transform: none;
  top: 0;
  left: 0;
  z-index: 1;
}
[data-project="web-2"] .rc-v7::after { display: none; }
[data-project="web-2"] .rc-card__metric { z-index: 2; font-size: clamp(28px, 4vw, 40px); letter-spacing: 0.02em; }
[data-project="web-2"] .rc-card__metric-label { z-index: 2; color: rgba(255,255,255,0.85); }
[data-project="web-2"] .rc-card__hover { z-index: 3; }

/* web-3: La Biferia Mayorista */
[data-project="web-3"] .rc-v8::before {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  background: rgba(10, 0, 25, 0.52);
  transform: none;
  top: 0;
  left: 0;
  z-index: 1;
}
[data-project="web-3"] .rc-v8::after { display: none; }
[data-project="web-3"] .rc-card__metric { z-index: 2; font-size: clamp(28px, 4vw, 40px); letter-spacing: 0.02em; }
[data-project="web-3"] .rc-card__metric-label { z-index: 2; color: rgba(255,255,255,0.85); }
[data-project="web-3"] .rc-card__hover { z-index: 3; }

/* web-4: La Soleada Polo Ranch */
[data-project="web-4"] .rc-v5::before {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  background: rgba(10, 0, 25, 0.52);
  transform: none;
  top: 0;
  left: 0;
  z-index: 1;
}
[data-project="web-4"] .rc-v5::after { display: none; }
[data-project="web-4"] .rc-card__metric { z-index: 2; font-size: clamp(28px, 4vw, 40px); letter-spacing: 0.02em; }
[data-project="web-4"] .rc-card__metric-label { z-index: 2; color: rgba(255,255,255,0.85); }
[data-project="web-4"] .rc-card__hover { z-index: 3; }
[data-project="pm-1"] .rc-card__metric { z-index: 2; }
[data-project="pm-1"] .rc-card__metric-label { z-index: 2; color: rgba(255,255,255,0.85); }
[data-project="pm-1"] .rc-card__hover { z-index: 3; }

/* pm-2: screenshot MasterMetrics Google Ads como fondo — blur + overlay */
[data-project="pm-2"] .rc-v2 > img {
  filter: blur(2px);
  transform: scale(1.04);
}
[data-project="pm-2"] .rc-v2::before {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  background: rgba(10, 0, 25, 0.72);
  transform: none;
  top: 0;
  left: 0;
  z-index: 1;
}
[data-project="pm-2"] .rc-v2::after { display: none; }
[data-project="pm-2"] .rc-card__metric { z-index: 2; }
[data-project="pm-2"] .rc-card__metric-label { z-index: 2; color: rgba(255,255,255,0.85); }
[data-project="pm-2"] .rc-card__hover { z-index: 3; }

/* pm-3: screenshot MasterMetrics Google Ads como fondo — blur + overlay */
[data-project="pm-3"] .rc-v3 > img {
  filter: blur(2px);
  transform: scale(1.04);
}
[data-project="pm-3"] .rc-v3::before {
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
  background: rgba(10, 0, 25, 0.72);
  transform: none;
  top: 0;
  left: 0;
  z-index: 1;
}
[data-project="pm-3"] .rc-v3::after { display: none; }
[data-project="pm-3"] .rc-card__metric { z-index: 2; }
[data-project="pm-3"] .rc-card__metric-label { z-index: 2; color: rgba(255,255,255,0.85); }
[data-project="pm-3"] .rc-card__hover { z-index: 3; }

.rc-v1 { background: linear-gradient(135deg, #1A0433 0%, #5B1E8F 100%); }
.rc-v2 { background: linear-gradient(135deg, #2D0F5A 0%, #7B3DB5 100%); }
.rc-v3 { background: linear-gradient(135deg, #3D1160 0%, #6B3FA0 100%); }
.rc-v4 { background: linear-gradient(135deg, #5B1E8F 0%, #9C3FE0 100%); }
.rc-v5 { background: linear-gradient(135deg, #2D0F5A 0%, #8B5CF6 100%); }
.rc-v6 { background: linear-gradient(135deg, #0D0013 0%, #3D1160 100%); }
.rc-v7 { background: linear-gradient(135deg, #1A0433 0%, #4A1878 100%); }
.rc-v8 { background: linear-gradient(135deg, #5B1E8F 0%, #F5B800 100%); }
.rc-v9 { background: linear-gradient(135deg, #0A0F2A 0%, #2855B5 100%); }
.rc-v10 { background: linear-gradient(135deg, #0D2210 0%, #2D6B1F 100%); }

/* co-agropasion: screenshot real del perfil de Instagram */
[data-project="co-agropasion"] .rc-v10 > img {
  object-position: center center;
  filter: blur(2px);
  transform: scale(1.06);
}
[data-project="co-agropasion"] .rc-v10::before {
  width: 100%; height: 100%; border-radius: 0;
  position: absolute; inset: 0; content: ''; left: 0; z-index: 1;
  transform: none;
  background: linear-gradient(to top, rgba(13,34,16,0.92) 0%, rgba(13,34,16,0.45) 55%, rgba(13,34,16,0.18) 100%);
}
[data-project="co-agropasion"] .rc-v10::after { display: none; }
[data-project="co-agropasion"] .rc-card__metric { z-index: 2; }
[data-project="co-agropasion"] .rc-card__metric-label { z-index: 2; color: rgba(255,255,255,0.85); }

/* co-esm: screenshot real del perfil de Instagram */
[data-project="co-esm"] .rc-v9 > img {
  object-position: center center;
  filter: blur(2px);
  transform: scale(1.06);
}
[data-project="co-esm"] .rc-v9::before {
  width: 100%; height: 100%; border-radius: 0;
  position: absolute; inset: 0; content: ''; left: 0; z-index: 1;
  transform: none;
  background: linear-gradient(to top, rgba(10,15,42,0.92) 0%, rgba(10,15,42,0.45) 55%, rgba(10,15,42,0.18) 100%);
}
[data-project="co-esm"] .rc-v9::after { display: none; }
[data-project="co-esm"] .rc-card__metric { z-index: 2; }
[data-project="co-esm"] .rc-card__metric-label { z-index: 2; color: rgba(255,255,255,0.85); }
[data-project="co-esm"] .rc-card__hover { z-index: 3; }

/* ─── Páginas legales ─── */
.legal-body { max-width: 740px; }
.legal-meta {
  font-size: 13px;
  color: var(--gray-400);
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--gray-200);
}
.legal-body h2 {
  font-family: var(--font-display);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  color: var(--black);
  margin: 40px 0 12px;
}
.legal-body p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray-600);
  margin-bottom: 14px;
}
.legal-body ul { margin: 0 0 16px 20px; }
.legal-body li {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gray-600);
  margin-bottom: 6px;
}
.legal-body a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }
.legal-body strong { color: var(--black); font-weight: 600; }
.legal-highlight {
  background: var(--gray-100);
  border-left: 3px solid var(--purple);
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  margin: 24px 0;
}
.legal-highlight p { margin: 0; }

/* ─── Footer legal links ─── */
.footer__legal { display: flex; gap: 16px; flex-wrap: wrap; }
.footer__legal a {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  text-decoration: none;
  transition: color 0.2s;
}
.footer__legal a:hover { color: rgba(255,255,255,0.65); }
@media (max-width: 768px) {
  .footer__legal { justify-content: center; }
}

/* Numeric metric */
.rc-card__metric {
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 72px);
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  position: relative;
  z-index: 1;
  text-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

.rc-card__metric-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 8px;
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 16px;
}

/* Brand / text variant (identidad de marca) */
.rc-card__brand-bg {
  position: absolute;
  font-family: var(--font-display);
  font-size: 140px;
  font-weight: 900;
  color: rgba(255,255,255,0.07);
  line-height: 1;
  right: 10px;
  bottom: -16px;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.rc-card__brand-label {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 24px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}

/* Card body */
.rc-card__body {
  padding: 22px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.rc-card__industry {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 8px;
}

.rc-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  line-height: 1.3;
  margin-bottom: 10px;
}

.rc-card__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--gray-600);
  flex: 1;
  margin-bottom: 16px;
}

.rc-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.rc-card__tags span {
  font-size: 11px;
  font-weight: 600;
  color: var(--purple);
  background: var(--purple-bg);
  padding: 4px 10px;
  border-radius: 100px;
}

/* ============================================
   CARDS — HOVER OVERLAY Y CURSOR
   ============================================ */
.rc-card { cursor: pointer; }

.rc-card__hover {
  position: absolute;
  inset: 0;
  background: rgba(13, 0, 19, 0.52);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
  z-index: 3;
  backdrop-filter: blur(2px);
}

.rc-card:hover .rc-card__hover,
.rc-card:focus-visible .rc-card__hover { opacity: 1; }

.rc-card__hover span {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.7);
  padding: 8px 20px;
  border-radius: 100px;
  letter-spacing: 0.04em;
  transform: translateY(5px);
  transition: transform 0.25s;
}

.rc-card:hover .rc-card__hover span,
.rc-card:focus-visible .rc-card__hover span { transform: translateY(0); }

.rc-card:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* ============================================
   MODAL DE PROYECTO
   ============================================ */
.proy-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.proy-modal.open {
  opacity: 1;
  pointer-events: all;
}

.proy-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 0, 19, 0.72);
  backdrop-filter: blur(6px);
}

/* Panel principal — layout dividido */
.proy-modal__panel {
  position: relative;
  background: var(--white);
  border-radius: 20px;
  max-width: 960px;
  width: 100%;
  height: min(88vh, 720px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(28px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
  opacity: 0;
}

.proy-modal.open .proy-modal__panel {
  transform: none;
  opacity: 1;
}

/* Botón cerrar — sobre la columna derecha */
.proy-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.proy-modal__close:hover {
  background: var(--white);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* Split: izquierda imágenes / derecha info */
.proy-modal__split {
  display: grid;
  grid-template-columns: 42% 1fr;
  flex: 1;
  min-height: 0;
}

/* ---- Columna izquierda: imágenes ---- */
.proy-modal__images {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(91,30,143,0.2) transparent;
  display: flex;
  flex-direction: column;
  background: #f7f5fa;
}

.proy-modal__images::-webkit-scrollbar { width: 4px; }
.proy-modal__images::-webkit-scrollbar-thumb { background: rgba(91,30,143,0.2); border-radius: 4px; }

/* Cada slot de imagen */
.proy-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
  overflow: hidden;
}

/* Variante portrait para branding sheets: imagen completa, sin recorte */
.proy-img--portrait {
  aspect-ratio: auto;
  height: auto;
  overflow: visible;
  padding: 0;
  display: block;
}
.proy-img.proy-img--portrait img {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  object-fit: unset;
  display: block;
}
.proy-img--portrait .proy-img__label { display: none; }

/* Imagen real cuando esté disponible */
.proy-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Etiqueta descriptiva en el placeholder */
.proy-img__label {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.25);
  padding: 4px 10px;
  border-radius: 100px;
  backdrop-filter: blur(4px);
}

/* ---- Columna derecha: información ---- */
.proy-modal__body {
  overflow-y: auto;
  padding: 36px 40px 36px 36px;
  scrollbar-width: thin;
  scrollbar-color: rgba(91,30,143,0.15) transparent;
  display: flex;
  flex-direction: column;
}

.proy-modal__body::-webkit-scrollbar { width: 4px; }
.proy-modal__body::-webkit-scrollbar-thumb { background: rgba(91,30,143,0.15); border-radius: 4px; }

.proy-modal__meta {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 10px;
}

.proy-modal__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 900;
  color: var(--black);
  line-height: 1.25;
  margin-bottom: 28px;
  padding-right: 40px;
}

/* Secciones de texto */
.proy-modal__section {
  margin-bottom: 22px;
}

.proy-modal__section h4 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 8px;
}

.proy-modal__section p {
  font-size: 13px;
  line-height: 1.75;
  color: var(--gray-600);
}

/* Resultados */
.proy-modal__results {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 0;
}

.proy-modal__results li {
  font-size: 13px;
  font-weight: 500;
  color: var(--black);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

.proy-modal__results li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--yellow);
  font-weight: 700;
}

/* Footer con tags y CTA */
.proy-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 22px;
  margin-top: auto;
  border-top: 1px solid var(--gray-200);
}

.proy-modal__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.proy-modal__tags span {
  font-size: 11px;
  font-weight: 600;
  color: var(--purple);
  background: var(--purple-bg);
  padding: 4px 10px;
  border-radius: 100px;
}

.proy-modal__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--purple);
  text-decoration: none;
  padding: 7px 14px;
  border: 1.5px solid var(--purple);
  border-radius: 100px;
  transition: background 0.18s, color 0.18s;
  margin-top: 20px;
  margin-bottom: 4px;
  width: fit-content;
}
.proy-modal__cta:hover { background: var(--purple); color: var(--white); }

/* ============================================
   RESULT CARDS — SLIDER
   ============================================ */
.result-slider-wrap {
  position: relative;
}

.result-slider-wrap .result-cards,
.result-slider-wrap .result-cards--2 {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 20px;
  padding-top: 8px;
  padding-bottom: 28px;
}

.result-slider-wrap .result-cards::-webkit-scrollbar,
.result-slider-wrap .result-cards--2::-webkit-scrollbar { display: none; }

.result-slider-wrap .rc-card {
  flex: 0 0 calc(50% - 10px);
  scroll-snap-align: start;
  min-width: 0;
}

.result-slider__btn {
  position: absolute;
  top: 110px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gray-200);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--purple);
  z-index: 10;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  font-size: 18px;
  line-height: 1;
}

.result-slider__btn:hover {
  background: var(--purple);
  color: var(--white);
  border-color: var(--purple);
}

.result-slider__btn--prev { left: -22px; }
.result-slider__btn--next { right: -22px; }

/* ============================================
   RESULT SECTIONS — RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .result-slider__btn { display: none; }
  .result-slider-wrap .rc-card { flex: 0 0 calc(50% - 10px); }
}

@media (max-width: 768px) {
  .page-section .result-cards,
  .page-section .result-cards--2 { grid-template-columns: 1fr; }
  .svc-tabs { top: 60px; }
  .result-section { padding: 56px 0; }
  .result-section__hd { margin-bottom: 28px; }
  .result-section__sub,
  .result-section__link { padding-left: 0; }
  .result-slider-wrap .rc-card { flex: 0 0 85%; }
  .rc-card__visual { height: 180px; }
  .rc-card__metric { font-size: clamp(48px, 12vw, 64px); }

  /* Modal mobile — sube desde abajo, una sola columna */
  .proy-modal { padding: 0; align-items: flex-end; }
  .proy-modal__panel {
    height: 93vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(48px);
  }
  .proy-modal.open .proy-modal__panel { transform: translateY(0); }
  .proy-modal__split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .proy-modal__images { max-height: 240px; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .proy-img { width: 280px; aspect-ratio: 4/3; flex-shrink: 0; }
  .proy-modal__body { padding: 24px 20px 32px; }
  .proy-modal__title { padding-right: 0; font-size: 20px; }
  .proy-modal__footer { flex-direction: column; align-items: flex-start; }
}

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.93);
  cursor: zoom-out;
}

.lightbox__img-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 90vh;
}

.lightbox__img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  display: block;
}

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.lightbox__close:hover { background: rgba(255,255,255,0.22); }

.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, opacity 0.2s;
}

.lightbox__prev:hover,
.lightbox__next:hover { background: rgba(255,255,255,0.22); }

.lightbox__prev { left: 20px; }
.lightbox__next { right: 20px; }

.lightbox__prev:disabled,
.lightbox__next:disabled { opacity: 0.25; pointer-events: none; }

.lightbox__counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* Cursor zoom-in en imágenes clickeables del modal */
.proy-img--zoomable { cursor: zoom-in; }
.proy-img--zoomable::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='white' stroke-width='2'/%3E%3Cpath d='M11 8v6M8 11h6' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M16 16l3 3' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat bottom 10px right 12px / 24px 24px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}