/* ===========================
   SCOMP · DAMC-UJAT
   styles.css
   =========================== */

:root {
  --red:     #C41A1A;
  --red-dim: rgba(196,26,26,.08);
  --ink:     #111110;
  --ink-2:   #3a3a38;
  --ink-3:   #888882;
  --paper:   #F8F5F0;
  --paper-2: #EFECE6;
  --white:   #FDFCFB;
  --line:    rgba(17,17,16,.1);
  --serif:   'DM Serif Display', Georgia, serif;
  --sans:    'DM Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ==========================
   CURSOR PERSONALIZADO
   ========================== */
.cursor {
  width: 8px; height: 8px; background: var(--red); border-radius: 50%;
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  transform: translate(-50%,-50%); transition: transform .12s ease;
}
.cursor-ring {
  width: 32px; height: 32px; border: 1px solid var(--red); border-radius: 50%;
  position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none;
  transform: translate(-50%,-50%); transition: transform .35s ease; opacity: .4;
}

/* ==========================
   NAV
   ========================== */
nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 56px; height: 60px;
  background: rgba(248,245,240,.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-mark {
  width: 26px; height: 26px; background: var(--red); flex-shrink: 0;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.nav-name { font-family: var(--serif); font-size: 1.1rem; color: var(--ink); }
.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
  font-size: .7rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; position: relative; transition: color .2s;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--red); transition: right .25s;
}
.nav-links a:hover { color: var(--red); }
.nav-links a:hover::after { right: 0; }
.nav-cta {
  font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--white); background: var(--red); padding: 8px 20px; border-radius: 2px;
  text-decoration: none; transition: opacity .2s;
}
.nav-cta:hover { opacity: .82; }

/* ==========================
   HERO
   ========================== */
#inicio {
  min-height: 100svh; padding: 120px 56px 0;
  display: grid; grid-template-rows: 1fr auto;
  position: relative; overflow: hidden;
}
#inicio::before {
  content: ''; position: absolute; left: 56px; top: 0; bottom: 0;
  width: 1px; background: var(--line);
}
.hero-content {
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 48px; max-width: 820px;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 14px; margin-bottom: 36px;
}
.eyebrow-line { width: 32px; height: 1px; background: var(--red); }
.eyebrow-text {
  font-size: .67rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--red);
}
.hero-h1 {
  font-family: var(--serif);
  font-size: clamp(4rem, 9.5vw, 8.5rem);
  line-height: .93; letter-spacing: -.02em; color: var(--ink); margin-bottom: 36px;
}
.hero-h1 em { font-style: italic; color: var(--red); }
.hero-body {
  font-size: .98rem; font-weight: 300; line-height: 1.88;
  color: var(--ink-2); max-width: 460px; margin-bottom: 52px;
}
.hero-actions { display: flex; align-items: center; gap: 28px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .7rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none; transition: all .22s;
}
.btn-filled {
  background: var(--red); color: var(--white);
  padding: 13px 28px; border-radius: 2px;
}
.btn-filled:hover { opacity: .85; transform: translateY(-1px); }
.btn-ghost {
  color: var(--ink-2); border-bottom: 1px solid var(--line); padding-bottom: 2px;
}
.btn-ghost:hover { color: var(--red); border-color: var(--red); }
.hero-stats {
  display: flex; padding-left: 48px;
  border-top: 1px solid var(--line); margin-top: 80px;
}
.stat {
  padding: 28px 48px 28px 0; border-right: 1px solid var(--line); margin-right: 48px;
}
.stat:last-child { border-right: none; }
.stat-n { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--ink); margin-bottom: 4px; }
.stat-l { font-size: .67rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.hero-bg-word {
  position: absolute; right: -10px; bottom: 20px;
  font-family: var(--serif); font-size: clamp(9rem, 20vw, 18rem);
  color: transparent; -webkit-text-stroke: 1px var(--line);
  line-height: 1; user-select: none; pointer-events: none; letter-spacing: -.04em;
  animation: driftUp 14s ease-in-out infinite alternate;
}
@keyframes driftUp { from { transform: translateY(0); } to { transform: translateY(-28px); } }

/* ==========================
   NOSOTROS
   ========================== */
#nosotros { background: var(--ink); padding: 120px 56px; position: relative; overflow: hidden; }
#nosotros::after {
  content: ''; position: absolute; top: 0; left: 56px;
  width: 1px; height: 100%; background: rgba(255,255,255,.05);
}
.about-grid {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 96px; padding-left: 48px;
}
.label { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.label span {
  font-size: .64rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--red);
}
.label::before { content: ''; width: 24px; height: 1px; background: var(--red); }
.section-h {
  font-family: var(--serif); font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 1.06; letter-spacing: -.01em;
}
.about-left .section-h { color: #F8F5F0; margin-bottom: 32px; }
.about-desc { font-size: .93rem; font-weight: 300; line-height: 1.9; color: rgba(248,245,240,.52); }
.about-desc + .about-desc { margin-top: 1.1em; }

/* Jerarquía */
.hierarchy { display: flex; flex-direction: column; }
.h-item { display: flex; align-items: stretch; gap: 24px; position: relative; }
.h-spine { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 20px; }
.h-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--red); background: transparent; flex-shrink: 0;
  margin-top: 18px; transition: background .2s;
}
.h-dot--active { background: var(--red); border-color: var(--red); }
.h-item:hover .h-dot { background: var(--red); }
.h-line { flex: 1; width: 1px; background: rgba(196,26,26,.22); }
.h-item:last-child .h-line { display: none; }
.h-body { padding: 14px 0 30px; }
.h-tag { font-size: .6rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--red); margin-bottom: 5px; }
.h-name { font-family: var(--serif); font-size: 1.3rem; color: #F8F5F0; margin-bottom: 5px; }
.h-desc { font-size: .8rem; font-weight: 300; line-height: 1.65; color: rgba(248,245,240,.42); }

/* ==========================
   VALORES
   ========================== */
#valores { background: var(--paper); padding: 120px 56px; }
.valores-inner { padding-left: 48px; }
.valores-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 60px;
}
.valor-card { background: var(--paper); padding: 36px 28px; transition: background .22s; }
.valor-card:hover { background: var(--paper-2); }
.valor-num {
  font-family: var(--serif); font-size: 2.8rem; color: var(--red);
  opacity: .18; line-height: 1; margin-bottom: 20px;
}
.valor-title { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); margin-bottom: 10px; }
.valor-text { font-size: .8rem; font-weight: 300; line-height: 1.72; color: var(--ink-3); }

/* ==========================
   EVENTOS
   ========================== */
#eventos { background: var(--white); padding: 120px 56px; }
.eventos-inner { padding-left: 48px; }
.eventos-list { margin-top: 60px; }
.event-row {
  display: grid; grid-template-columns: 72px 1fr auto;
  align-items: center; gap: 36px;
  padding: 26px 0; border-top: 1px solid var(--line);
  transition: padding-left .22s, padding-right .22s;
}
.event-row:last-child { border-bottom: 1px solid var(--line); }
.event-row:hover { padding-left: 14px; padding-right: 14px; }
.event-date-col { text-align: right; flex-shrink: 0; }
.event-dd { font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--red); }
.event-mmyy { font-size: .6rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.event-kind { font-size: .6rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.event-name { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); margin-bottom: 3px; }
.event-place { font-size: .78rem; font-weight: 300; color: var(--ink-3); }
.event-arrow { font-size: 1.1rem; color: var(--line); transition: color .2s, transform .2s; flex-shrink: 0; }
.event-row:hover .event-arrow { color: var(--red); transform: translateX(4px); }

/* ==========================
   EQUIPO
   ========================== */
#equipo { background: var(--paper-2); padding: 120px 56px; }
.equipo-inner { padding-left: 48px; }
.equipo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 2px; background: var(--line); border: 1px solid var(--line); margin-top: 60px;
}
.member { background: var(--paper-2); padding: 32px 24px; transition: background .2s; }
.member:hover { background: var(--white); }
.member-initials { font-family: var(--serif); font-size: 1.5rem; color: var(--red); margin-bottom: 14px; line-height: 1; }
.member-name { font-size: .86rem; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.member-role { font-size: .66rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* ==========================
   GALERÍA  (corregido)
   ========================== */
#galeria { background: var(--paper); padding: 120px 56px; }
.galeria-inner { padding-left: 48px; }

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 300px 300px;
  gap: 8px;
  margin-top: 60px;
}

/* Primera imagen ocupa toda la columna izquierda */
.gimg--large {
  grid-row: span 2;
}

.gimg {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
}

.gimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.gimg:hover img { transform: scale(1.04); }

/* Placeholder cuando no hay imagen */
.gimg img[src="img/foto-1.jpg"]:not([complete]),
.gimg img[src$=".jpg"]:not([naturalWidth]) {
  display: none;
}

.gimg-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 14px;
  font-size: .62rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--white);
  background: linear-gradient(transparent, rgba(17,17,16,.55));
}

/* Placeholder visual si la imagen no carga */
.gimg::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--paper-2);
  z-index: 0;
}
.gimg img { position: relative; z-index: 1; }
.gimg-label { z-index: 2; }

/* ==========================
   CONTACTO (sin formulario)
   ========================== */
#contacto { background: var(--paper); padding: 120px 56px 100px; }
.contacto-inner { padding-left: 48px; }
.contacto-info { max-width: 560px; margin-top: 60px; }
.contacto-info p {
  font-size: .93rem; font-weight: 300; line-height: 1.9;
  color: var(--ink-2); margin-bottom: 40px;
}
.contact-items { display: flex; flex-direction: column; }
.contact-item {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  text-decoration: none; transition: padding-left .2s;
}
.contact-item:hover { padding-left: 6px; }
.ci-icon { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.ci-text { font-size: .83rem; font-weight: 300; color: var(--ink-2); }
.ci-arrow { margin-left: auto; font-size: .9rem; color: var(--line); transition: color .2s; }
.contact-item:hover .ci-arrow { color: var(--red); }

/* ==========================
   FOOTER
   ========================== */
footer {
  background: var(--ink); padding: 34px 56px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.05);
}
.footer-brand { font-family: var(--serif); font-size: .95rem; color: rgba(248,245,240,.38); }
.footer-brand em { font-style: italic; color: var(--red); }
.footer-meta { font-size: .67rem; font-weight: 300; letter-spacing: .1em; color: rgba(248,245,240,.22); }

/* ==========================
   REVEAL ANIMATION
   ========================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ==========================
   RESPONSIVE
   ========================== */
@media (max-width: 960px) {
  nav { padding: 0 24px; }
  .nav-links { display: none; }

  #inicio,
  #nosotros,
  #valores,
  #eventos,
  #equipo,
  #galeria,
  #contacto { padding-left: 24px; padding-right: 24px; }

  #inicio::before { left: 24px; }

  .hero-content,
  .about-grid,
  .valores-inner,
  .eventos-inner,
  .equipo-inner,
  .galeria-inner,
  .contacto-inner { padding-left: 16px; }

  .about-grid { grid-template-columns: 1fr; gap: 56px; }
  .valores-grid { grid-template-columns: 1fr 1fr; }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 180px;
  }
  .gimg--large { grid-row: span 1; }

  footer { padding: 28px 24px; flex-direction: column; gap: 10px; text-align: center; }
}

@media (max-width: 560px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 220px 220px 220px 220px;
  }
  .gimg--large { grid-row: span 1; }
}