/* =====================================================
   presencia-redes.css — Presencia en Redes Sociales
   Prefijo "pre-red-" para no colisionar con el CSS global
   ===================================================== */

/* ── Tokens ── */
:root {
  --pre-red-bg:          #070c18;
  --pre-red-bg2:         #090f1d;
  --pre-red-bg-card:     #0d1526;
  --pre-red-accent:      #00afe8;
  --pre-red-accent-lt:   #00afe8;
  --pre-red-teal:        #00b3a6;
  --pre-red-purple:      #6133ff;
  --pre-red-white:       #eef2ff;
  --pre-red-muted:       #8896b3;
  --pre-red-dim:         #4f617a;
  --pre-red-border:      rgba(59,130,246,.2);
  --pre-red-border-sub:  rgba(255,255,255,.07);
  --pre-red-radius:      .85rem;
  --pre-red-radius-lg:   1.4rem;
  --pre-red-glow:        0 0 40px rgba(59,130,246,.25);
}

body { background: var(--pre-red-bg) !important; }

/* ── Helpers ── */
.pre-red-container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }

.pre-red-reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.pre-red-reveal.pre-red-visible { opacity: 1; transform: none; }

/* =====================================================
   1. HERO / HEADER
   ===================================================== */
.pre-red-hero {
  position: relative;
  min-height: 480px;
  display: flex; align-items: flex-end;
  overflow: hidden;
  padding: 7rem 1.5rem 4rem;
}

.pre-red-hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.pre-red-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.pre-red-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--pre-red-bg) 0%, rgba(7,12,24,.75) 50%, rgba(7,12,24,.45) 100%),
    radial-gradient(ellipse 60% 60% at 30% 60%, rgba(59,130,246,.18) 0%, transparent 65%);
}

.pre-red-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(59,130,246,.1) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
}

.pre-red-hero-content {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: flex-end;
}

.pre-red-hero-label {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--pre-red-border);
  background: rgba(59,130,246,.1);
  color: var(--pre-red-white);
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  padding: .3rem 1rem; border-radius: 999px;
  margin-bottom: 1.2rem;
  backdrop-filter: blur(8px);
}
.pre-red-hero-label span { color: var(--pre-red-accent-lt); }

.pre-red-hero-h1 {
  font-family: 'Red Hat Display', sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 800; line-height: 1.08;
  color: var(--pre-red-white);
  margin-bottom: 1rem;
  letter-spacing: -.02em;
}
.pre-red-hero-h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--pre-red-accent-lt) 0%, var(--pre-red-teal) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.pre-red-hero-desc {
  color: var(--pre-red-muted);
  font-size: 1rem; line-height: 1.75;
  max-width: 540px;
}

.pre-red-hero-stats {
  display: flex; flex-direction: column; gap: 1rem;
  align-items: flex-end;
}
.pre-red-hero-stat {
  background: rgba(13,21,38,.8);
  border: 1px solid var(--pre-red-border-sub);
  border-left: 3px solid var(--pre-red-accent);
  border-radius: var(--pre-red-radius);
  padding: .9rem 1.4rem;
  backdrop-filter: blur(12px);
  min-width: 220px;
  transition: border-color .2s, transform .2s;
}
.pre-red-hero-stat:nth-child(2) { border-left-color: var(--pre-red-teal); }
.pre-red-hero-stat:nth-child(3) { border-left-color: var(--pre-red-purple); }
.pre-red-hero-stat:hover { border-color: var(--pre-red-border); transform: translateX(-4px); }
.pre-red-stat-num {
  font-family: 'Red Hat Display', sans-serif;
  font-size: 1.7rem; font-weight: 800;
  color: var(--pre-red-accent-lt); display: block; line-height: 1;
}
.pre-red-stat-label {
  font-size: .78rem; color: var(--pre-red-muted); margin-top: .2rem;
}

/* =====================================================
   2. FILTROS DE CATEGORÍA
   ===================================================== */
.pre-red-filters {
  padding: 1.8rem 1.5rem;
  border-bottom: 1px solid var(--pre-red-border-sub);
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,12,24,.92);
  backdrop-filter: blur(20px);
}
.pre-red-filters-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
}
.pre-red-filter-btn {
  background: transparent;
  border: 1px solid var(--pre-red-border-sub);
  color: var(--pre-red-muted);
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: .4rem 1.2rem; border-radius: 999px;
  cursor: pointer; text-decoration: none;
  transition: all .2s;
  white-space: nowrap;
}
.pre-red-filter-btn:hover {
  border-color: var(--pre-red-accent);
  color: var(--pre-red-accent-lt);
  background: rgba(59,130,246,.08);
}
.pre-red-filter-btn.pre-red-active {
  background: var(--pre-red-accent);
  border-color: var(--pre-red-accent);
  color: #fff;
  box-shadow: 0 0 16px rgba(59,130,246,.35);
}

/* =====================================================
   3. GRID UNIFORME
   ===================================================== */
.pre-red-gallery-section {
  padding: 3.5rem 1.5rem 5rem;
}

.pre-red-gallery-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2rem;
  max-width: 1280px; margin-left: auto; margin-right: auto;
  padding-bottom: 2rem;
}
.pre-red-gallery-title {
  font-family: 'Red Hat Display', sans-serif;
  font-size: 1.25rem; font-weight: 800; color: var(--pre-red-white);
}
.pre-red-gallery-count {
  font-size: .82rem; color: var(--pre-red-dim);
}

/* ── Grid: 4 columnas, todas iguales ── */
.pre-red-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
}

/* ── Tarjeta: tamaño fijo, sin variantes tall/wide/square ── */
.pre-red-item {
  position: relative;
  border-radius: var(--pre-red-radius);
  overflow: hidden;
  cursor: pointer;
  display: block;
  text-decoration: none;
  aspect-ratio: 4 / 3;           /* todas las tarjetas: misma proporción */
}

/* Clases de formato ignoradas — todas quedan igual */
.pre-red-item.pre-red-tall,
.pre-red-item.pre-red-wide,
.pre-red-item.pre-red-square { aspect-ratio: 4 / 3; }

/* Imagen */
.pre-red-item-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.pre-red-item:hover .pre-red-item-img { transform: scale(1.07); }

/* Overlay al hacer hover */
.pre-red-item-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(7,12,24,.96) 0%,
    rgba(7,12,24,.65) 45%,
    rgba(59,130,246,.15) 100%
  );
  opacity: 0;
  transition: opacity .35s ease;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.4rem 1.2rem;
}
.pre-red-item:hover .pre-red-item-overlay { opacity: 1; }

.pre-red-item-overlay::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--pre-red-accent), var(--pre-red-teal));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s .05s ease;
}
.pre-red-item:hover .pre-red-item-overlay::before { transform: scaleX(1); }

.pre-red-item-cat {
  display: inline-block;
  font-size: .63rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pre-red-accent-lt);
  background: rgba(59,130,246,.15);
  border: 1px solid rgba(59,130,246,.3);
  padding: .2rem .65rem; border-radius: 999px;
  margin-bottom: .55rem;
  transform: translateY(6px); opacity: 0;
  transition: transform .3s .05s ease, opacity .3s .05s ease;
}
.pre-red-item:hover .pre-red-item-cat { transform: translateY(0); opacity: 1; }

.pre-red-item-title {
  font-family: 'Red Hat Display', sans-serif;
  font-size: .95rem; font-weight: 800; line-height: 1.3;
  color: var(--pre-red-white);
  transform: translateY(8px); opacity: 0;
  transition: transform .3s .1s ease, opacity .3s .1s ease;
}
.pre-red-item:hover .pre-red-item-title { transform: translateY(0); opacity: 1; }

.pre-red-item-meta {
  display: flex; align-items: center; gap: .7rem;
  margin-top: .5rem;
  transform: translateY(8px); opacity: 0;
  transition: transform .3s .15s ease, opacity .3s .15s ease;
}
.pre-red-item:hover .pre-red-item-meta { transform: translateY(0); opacity: 1; }

.pre-red-item-client {
  font-size: .75rem; color: var(--pre-red-muted);
}
.pre-red-item-arrow {
  margin-left: auto;
  width: 26px; height: 26px;
  background: var(--pre-red-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  transition: background .2s, transform .2s;
}
.pre-red-item:hover .pre-red-item-arrow { transform: translate(2px, -2px); }

/* Badge de red social */
.pre-red-item-badge {
  position: absolute; top: .7rem; left: .7rem;
  background: rgba(7,12,24,.75);
  backdrop-filter: blur(8px);
  border: 1px solid var(--pre-red-border-sub);
  border-radius: .5rem;
  padding: .25rem .6rem;
  font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pre-red-muted);
  transition: color .2s, border-color .2s;
  z-index: 2;
}
.pre-red-item:hover .pre-red-item-badge {
  color: var(--pre-red-accent-lt);
  border-color: var(--pre-red-border);
}

/* =====================================================
   4. CTA FINAL
   ===================================================== */
.pre-red-cta {
  background: var(--pre-red-bg2);
  border-top: 1px solid var(--pre-red-border-sub);
  padding: 5rem 1.5rem;
  text-align: center;
  position: relative; overflow: hidden;
}
.pre-red-cta::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(59,130,246,.12) 0%, transparent 70%);
}
.pre-red-cta-inner {
  position: relative; z-index: 1;
  max-width: 680px; margin: 0 auto;
}
.pre-red-cta-label {
  display: inline-block;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pre-red-accent-lt); margin-bottom: .9rem;
}
.pre-red-cta-h2 {
  font-family: 'Red Hat Display', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800; color: var(--pre-red-white);
  line-height: 1.15; margin-bottom: 1rem;
}
.pre-red-cta-desc {
  color: var(--pre-red-muted); font-size: 1rem; line-height: 1.7; margin-bottom: 2rem;
}
.pre-red-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.pre-red-btn-primary {
  display: inline-block;
  background: var(--pre-red-accent);
  color: #fff; font-weight: 700; font-size: .95rem;
  padding: .85rem 2.2rem; border-radius: .65rem; text-decoration: none;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.pre-red-btn-primary:hover {
  background: #0072dd; transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(59,130,246,.4);
}
.pre-red-btn-secondary {
  display: inline-block;
  background: rgba(255,255,255,.07);
  color: var(--pre-red-white); font-weight: 600; font-size: .95rem;
  padding: .85rem 2.2rem; border-radius: .65rem; text-decoration: none;
  border: 1px solid var(--pre-red-border-sub);
  transition: background .2s, transform .15s;
}
.pre-red-btn-secondary:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }

/* =====================================================
   LIGHTBOX
   ===================================================== */
.pre-red-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(7,12,24,.96);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.pre-red-lightbox.pre-red-lb-open { opacity: 1; pointer-events: all; }

.pre-red-lb-inner {
  position: relative;
  max-width: 900px; width: 100%;
  background: var(--pre-red-bg-card);
  border: 1px solid var(--pre-red-border);
  border-radius: var(--pre-red-radius-lg);
  overflow: hidden;
  transform: scale(.93);
  transition: transform .3s ease;
  display: grid; grid-template-columns: 1.1fr 1fr;
}
.pre-red-lightbox.pre-red-lb-open .pre-red-lb-inner { transform: scale(1); }

.pre-red-lb-img {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
}
.pre-red-lb-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.pre-red-lb-body {
  padding: 2.5rem 2rem;
  display: flex; flex-direction: column; justify-content: center;
}
.pre-red-lb-cat {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pre-red-accent-lt); margin-bottom: .7rem;
}
.pre-red-lb-title {
  font-family: 'Red Hat Display', sans-serif;
  font-size: 1.4rem; font-weight: 800; color: var(--pre-red-white);
  line-height: 1.2; margin-bottom: .75rem;
}
.pre-red-lb-client {
  font-size: .85rem; color: var(--pre-red-muted); margin-bottom: 1rem;
}
.pre-red-lb-desc {
  font-size: .9rem; color: var(--pre-red-muted); line-height: 1.7; margin-bottom: 1.5rem;
}
.pre-red-lb-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.pre-red-lb-tag {
  font-size: .72rem;
  background: rgba(59,130,246,.1); border: 1px solid var(--pre-red-border);
  color: var(--pre-red-accent-lt); padding: .25rem .75rem; border-radius: 999px;
}
.pre-red-lb-link {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--pre-red-accent-lt); font-size: .85rem; font-weight: 600;
  text-decoration: none; transition: gap .2s;
}
.pre-red-lb-link:hover { gap: .8rem; }

.pre-red-lb-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 34px; height: 34px;
  background: rgba(255,255,255,.1);
  border: 1px solid var(--pre-red-border-sub);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--pre-red-muted);
  font-size: 1.1rem; line-height: 1;
  transition: background .2s, color .2s;
  z-index: 1;
}
.pre-red-lb-close:hover { background: rgba(255,255,255,.2); color: #fff; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1100px) {
  .pre-red-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
  .pre-red-hero-content { grid-template-columns: 1fr; }
  .pre-red-hero-stats   { display: none; }
  .pre-red-grid         { grid-template-columns: repeat(2, 1fr); }
  .pre-red-lb-inner     { grid-template-columns: 1fr; }
  .pre-red-lb-img       { aspect-ratio: 16/9; }
}
@media (max-width: 480px) {
  .pre-red-grid                { grid-template-columns: 1fr; }
  .pre-red-item,
  .pre-red-item.pre-red-tall,
  .pre-red-item.pre-red-wide,
  .pre-red-item.pre-red-square { aspect-ratio: 4/3; }
}