/* ============================================================
   DIMENSIONAL — estilos propios de dimensional.html
   Prefijo .dm- para no chocar con styles.css
   ============================================================ */

:root{
  --dm-navy:     #0a1628;
  --dm-navy-2:   #0e1d33;
  --dm-ink:      #16233c;
  --dm-body:     #4a5568;
  --dm-cream:    #faf5e9;
  --dm-cream-2:  #f5eeda;
  --dm-gold:     #c9a227;
  --dm-gold-lt:  #e3c15c;
  --dm-gold-dk:  #8a6d16;
  --dm-line:     rgba(201,162,39,.38);
  --dm-maxw:     1320px;
}

.dm-page{
  background:#fff;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--dm-body);
}
.dm-wrap{
  width:100%;max-width:var(--dm-maxw);
  margin:0 auto;padding:0 30px;
}
.dm-page h1,.dm-page h2,.dm-page h3{
  font-family:'Cormorant Garamond',Georgia,serif;
  color:var(--dm-ink);margin:0;line-height:1.1;
  text-wrap:balance;
}
.dm-sr{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Regla dorada con rombo y texto centrado */
.dm-rule{
  display:flex;align-items:center;justify-content:center;
  gap:16px;margin:0 auto;
}
.dm-rule::before,.dm-rule::after{
  content:'';height:1px;flex:1;max-width:230px;
  background:linear-gradient(90deg,transparent,var(--dm-gold));
}
.dm-rule::after{background:linear-gradient(90deg,var(--dm-gold),transparent)}
.dm-rule span{
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--dm-gold-dk);font-weight:600;white-space:nowrap;
}

/* ===================== 1. HERO ===================== */
.dm-hero{
  position:relative;
  background:#07101d url('../assets/dim-hero.jpg') center 86%/cover no-repeat;
  min-height:clamp(300px,47vw,700px);
}
.dm-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,16,29,.55) 0,rgba(7,16,29,0) 20%);
  pointer-events:none;
}
/* Va al ancho completo, no al contenedor: el letrero del arte es ancho
   y los textos deben quedar en los bordes oscuros */
.dm-hero-inner{
  position:absolute;left:0;right:0;top:63%;
  transform:translateY(-50%);z-index:2;
  max-width:none;padding:0 clamp(14px,2.2vw,34px);
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;pointer-events:none;
}
.dm-hero-side{
  margin:0;color:#fff;
  font-size:clamp(9px,.78vw,12px);
  letter-spacing:.17em;text-transform:uppercase;
  line-height:2.05;font-weight:500;
  text-shadow:0 2px 10px rgba(0,0,0,.75);
}
.dm-hero-side--r{text-align:right}

/* ===================== 2. QUE ES / PARA QUIEN ===================== */
.dm-about{
  background:var(--dm-cream) url('../assets/dim-texture.jpg') center/cover;
  padding:56px 0 0;
}
.dm-about-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1.26fr);
  gap:46px;align-items:start;
}
.dm-divider{
  align-self:stretch;
  background:linear-gradient(180deg,transparent,var(--dm-line) 15%,var(--dm-line) 85%,transparent);
}
.dm-about h2{
  font-size:clamp(24px,2.5vw,31px);
  font-weight:700;margin-bottom:22px;
  text-transform:uppercase;letter-spacing:.005em;
}
.dm-about p{
  font-size:15px;line-height:1.72;margin:0 0 16px;
  max-width:46ch;
}
.dm-about p.dm-strong{
  color:var(--dm-ink);font-weight:600;margin-bottom:0;
}

.dm-who{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;margin-top:20px;
}
.dm-who-item{text-align:center}
.dm-who-ring{
  width:84px;height:84px;margin:0 auto 15px;
  border:1.5px solid var(--dm-gold);
  border-radius:50%;
  display:grid;place-items:center;
  color:var(--dm-gold-dk);
  background:rgba(201,162,39,.05);
}
.dm-who-ring svg{width:40px;height:40px}
.dm-who h3{
  font-family:'Inter',sans-serif;
  font-size:12.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--dm-ink);margin-bottom:7px;line-height:1.3;
}
.dm-who p{font-size:12.6px;line-height:1.5;margin:0;max-width:none}

.dm-about-foot{padding:34px 0 30px}

/* ===================== 3. REVIVE 2026 ===================== */
.dm-revive{
  background:
    radial-gradient(120% 90% at 18% 40%,rgba(30,58,102,.55),transparent 60%),
    var(--dm-navy);
  padding:52px 0;
}
.dm-revive-grid{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:44px;align-items:center;
}
.dm-revive-eyebrow{
  font-family:'Cormorant Garamond',serif;
  display:block;color:#e8eefb;
  font-size:clamp(21px,2.2vw,27px);
  letter-spacing:.16em;font-weight:500;
}
.dm-revive h2{
  color:#fff;font-size:clamp(28px,3.2vw,40px);
  font-weight:700;letter-spacing:.01em;margin:2px 0 14px;
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
.dm-revive .dm-rule{justify-content:flex-start;margin-bottom:20px}
.dm-revive .dm-rule::before{max-width:34px}
.dm-revive .dm-rule::after{max-width:120px}
.dm-revive .dm-rule span{color:var(--dm-gold-lt)}
.dm-revive p{
  color:rgba(233,238,248,.86);
  font-size:14.6px;line-height:1.75;margin:0 0 26px;max-width:46ch;
}
.dm-btn-gold{
  display:inline-flex;align-items:center;gap:14px;
  border:1px solid var(--dm-gold);
  color:var(--dm-gold-lt);
  font-size:13px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  padding:14px 22px;text-decoration:none;
  background:rgba(201,162,39,.06);
  transition:background .2s ease,color .2s ease;
}
.dm-btn-gold:hover{background:rgba(201,162,39,.16);color:#fff}
.dm-btn-play{
  width:26px;height:26px;border-radius:50%;
  background:var(--dm-gold);color:var(--dm-navy);
  display:grid;place-items:center;flex-shrink:0;
}
.dm-btn-play svg{width:11px;height:11px}
.dm-btn-ext{margin-left:4px;opacity:.75;display:grid;place-items:center}
.dm-btn-ext svg{width:15px;height:15px}

.dm-revive-art{
  border:1px solid rgba(201,162,39,.35);
  border-radius:4px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  display:block;
}
.dm-revive-art img{width:100%;height:auto;display:block}

/* ===================== 4. PLENARIAS ===================== */
.dm-plen{background:var(--dm-cream) url('../assets/dim-texture.jpg') center/cover;padding:34px 0 40px}
.dm-plen .dm-rule{margin-bottom:26px}
.dm-plen-viewport{overflow:hidden}
.dm-plen-track{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 4*18px)/5);
  gap:18px;
  transition:transform .45s ease;
}
.dm-card{text-decoration:none;display:block}
.dm-card-thumb{
  position:relative;border-radius:3px;overflow:hidden;
  box-shadow:0 6px 18px rgba(10,22,40,.18);
}
.dm-card-thumb img{width:100%;height:auto;display:block}
.dm-card h3{
  font-family:'Inter',sans-serif;
  font-size:13.2px;font-weight:700;color:var(--dm-ink);
  margin:12px 0 3px;line-height:1.35;
}
.dm-card p{font-size:12.6px;color:#8a91a0;margin:0}

.dm-plen-nav{
  display:flex;align-items:center;justify-content:center;
  gap:10px;margin-top:20px;position:relative;
}
.dm-dots{display:flex;gap:9px}
.dm-dots button{
  width:9px;height:9px;border-radius:50%;
  border:1px solid #c7bfa8;background:transparent;
  padding:0;cursor:pointer;transition:.2s;
}
.dm-dots button.is-active{background:var(--dm-gold);border-color:var(--dm-gold)}
.dm-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;
  border:0;cursor:pointer;
  background:#9aa1ad;color:#fff;
  display:grid;place-items:center;
  transition:background .2s ease;
}
.dm-arrow:hover{background:var(--dm-ink)}
.dm-arrow svg{width:15px;height:15px}
.dm-arrow--prev{left:0}
.dm-arrow--next{right:0}

/* ===================== 5. CTA FINAL ===================== */
.dm-cta{
  position:relative;overflow:hidden;
  background:#060d1a;
  padding:58px 0 62px;
  text-align:center;
}
.dm-cta-photo{
  position:absolute;inset:0;
  background:url('../assets/dim-cta.jpg') center 58%/cover no-repeat;
  opacity:1;
}
.dm-cta-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(64% 96% at 50% 38%,rgba(6,13,26,.22),rgba(6,13,26,.72) 80%),
    linear-gradient(180deg,rgba(6,13,26,.58),rgba(6,13,26,.34) 42%,rgba(6,13,26,.82));
}
.dm-cta-inner{position:relative;z-index:2}
.dm-cta-eyebrow{
  display:block;color:rgba(233,238,248,.9);
  font-size:12.5px;letter-spacing:.34em;
  text-transform:uppercase;margin-bottom:12px;
}
.dm-page .dm-cta h2{
  font-family:'Cormorant Garamond',serif;
  color:var(--dm-gold-lt);
  font-size:clamp(38px,5.6vw,72px);
  font-weight:600;letter-spacing:.05em;
  line-height:1;margin-bottom:12px;
  text-shadow:0 4px 26px rgba(0,0,0,.6);
}
.dm-cta-sub{
  color:#fff;font-size:clamp(13px,1.5vw,17px);
  letter-spacing:.24em;text-transform:uppercase;
  margin:0 0 28px;
}
.dm-cta-btn{
  display:inline-flex;align-items:center;gap:14px;
  border:1px solid var(--dm-gold);
  background:rgba(6,13,26,.55);
  color:#fff;font-size:13px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  padding:15px 30px;text-decoration:none;
  transition:background .2s ease;
}
.dm-cta-btn:hover{background:rgba(201,162,39,.2)}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1000px){
  .dm-about-grid{grid-template-columns:1fr;gap:30px}
  .dm-divider{display:none}
  .dm-revive-grid{grid-template-columns:1fr;gap:30px}
  .dm-revive .dm-rule::after{max-width:230px}
  .dm-plen-track{grid-auto-columns:calc((100% - 2*18px)/3)}
}
@media (max-width:760px){
  .dm-wrap{padding:0 20px}
  .dm-who{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .dm-plen-track{grid-auto-columns:calc((100% - 18px)/2)}
  .dm-about{padding-top:40px}
  .dm-revive{padding:38px 0}
  .dm-hero{min-height:200px}
  .dm-hero-inner{display:none}
}
@media (max-width:520px){
  .dm-plen-track{grid-auto-columns:100%}
  .dm-rule::before,.dm-rule::after{max-width:40px}
  .dm-rule span{font-size:10.5px;letter-spacing:.2em}
}
@media (prefers-reduced-motion:reduce){
  .dm-page *,.dm-page *::before,.dm-page *::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important;
  }
}