/* ════════════════════════════════════════════════════════════════
   operademorelia.mx · Estilos del ÁREA DE CONTENIDO de páginas internas.
   El nav, la barra de anuncio y el footer usan el CSS REAL del home
   (/css/site.css) para ser idénticos. Aquí solo viven los componentes
   propios de las páginas de silo. Tokens y fuentes vienen de site.css.
   ════════════════════════════════════════════════════════════════ */
:root{ --measure:880px; }

/* La nav fija flota sobre el hero (igual que en el home) → main sin padding-top */
main#contenido{ padding-top:0; }

/* ── HERO de página: imagen full-bleed + overlay + título (premium, estilo home) ── */
.page-hero{position:relative; display:flex; align-items:flex-end; min-height:clamp(400px,58vh,620px); padding:132px 0 56px; overflow:hidden; margin-bottom:26px;}
.page-hero .ph-bg{position:absolute; inset:0; z-index:0;}
.page-hero .ph-bg img,.page-hero .ph-bg video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--ph-pos, center center);}
.page-hero .ph-bg video{z-index:1;} /* el video se monta sobre el poster (la imagen) cuando reproduce */
@media(max-width:820px){ .page-hero .ph-bg video{display:none;} } /* móvil: solo imagen (rendimiento + autoplay confiable) */
.page-hero .ph-ov{position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,10,.50) 0%, rgba(10,10,10,.20) 32%, rgba(10,10,10,.55) 68%, rgba(10,10,10,.94) 100%);}
.page-hero .ph-inner{position:relative; z-index:2; max-width:var(--max); margin:0 auto; padding:0 var(--gutter); width:100%;}
@media(max-width:620px){ .page-hero{ min-height:clamp(360px,64vh,540px); padding:108px 0 40px; } }
.crumbs{font-size:12.5px; letter-spacing:.06em; color:var(--w-55); margin-bottom:20px; text-transform:uppercase; text-shadow:0 1px 12px rgba(0,0,0,.65);}
.crumbs a{color:var(--w-70);} .crumbs a:hover{color:var(--gold);}
.crumbs span{margin:0 8px; color:var(--w-40);}
.eyebrow{font-size:12.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; text-shadow:0 1px 12px rgba(0,0,0,.65);}
.page-hero h1{font-family:var(--display); font-weight:500; line-height:1.04; font-size:clamp(2.6rem,6.5vw,4.8rem); color:var(--bone); text-shadow:0 2px 40px rgba(0,0,0,.5);}
.page-hero .lede{font-size:clamp(1.05rem,2vw,1.35rem); color:var(--w-90); max-width:var(--measure); margin-top:18px; line-height:1.55; text-shadow:0 1px 24px rgba(0,0,0,.6);}
.rule{height:1px; background:linear-gradient(to right,var(--gold),transparent); max-width:120px; margin:28px 0 0;}

/* ── Contenido / prosa ── */
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter);}
.prose{max-width:var(--measure);}
.prose p{color:var(--w-70); margin:0 0 1.1em; line-height:1.7;}
.prose h2{font-family:var(--display); font-weight:500; font-size:clamp(1.6rem,3.4vw,2.3rem); color:var(--bone); margin:1.6em 0 .6em;}
.prose h3{font-family:var(--display); font-weight:500; font-size:1.25rem; color:var(--gold); margin:1.5em 0 .4em;}
.prose a{color:var(--gold); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--w-25);}
.prose strong{color:var(--bone);}
section.block{padding:40px 0;}

/* ── Botones (el home usa btn-primary/secondary; estos son del contenido) ── */
.btn{display:inline-flex; align-items:center; gap:8px; align-self:flex-start; background:var(--gold); color:#11100E;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; padding:12px 22px; border-radius:100px; transition:background .2s,transform .2s;}
.btn:hover{background:var(--bone); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--bone); border:1px solid var(--w-25);}
.btn-ghost:hover{background:var(--w-06); color:var(--white);}
.prose a.btn,.prose a.btn-ghost{text-decoration:none;}
.prose a.btn:not(.btn-ghost){color:#11100E;} .prose a.btn:not(.btn-ghost):hover{color:#11100E;}
.prose a.btn-ghost{color:var(--bone);}
.prose a.btn-ghost:hover{color:var(--white);}

/* ── Ficha técnica ── */
.ficha{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px;
  background:var(--w-08); border:1px solid var(--w-08); border-radius:16px; overflow:hidden; margin:8px 0;}
.ficha div{background:var(--ink-2); padding:20px 22px;}
.ficha dt{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:6px;}
.ficha dd{font-size:15px; color:var(--bone);}

/* ── Funciones ── */
.func-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin:8px 0;}
.func-card{background:var(--ink-2); border:1px solid var(--w-08); border-radius:18px; padding:26px;
  display:flex; flex-direction:column; gap:6px; transition:border-color .25s,transform .25s;}
.func-card:hover{border-color:var(--w-25); transform:translateY(-2px);}
.func-date{font-family:var(--display); font-size:1.5rem; color:var(--bone);}
.func-where{font-size:15px; color:var(--gold); margin-top:2px;}
.func-meta{font-size:13.5px; color:var(--w-55);}
.func-card .btn{margin-top:14px;}

/* ── Placeholder (datos pendientes) ── */
.todo{border:1px dashed var(--gold-3); background:rgba(189,176,157,.06); border-radius:12px;
  padding:16px 20px; color:var(--w-55); font-size:14px; margin:10px 0;}
.todo b{color:var(--gold);}

/* ── Histórico · timeline ── */
.hist-stat{display:flex; flex-wrap:wrap; gap:34px; padding:8px 0 32px; border-bottom:1px solid var(--w-08);}
.hist-stat .stat b{display:block; font-family:var(--display); font-size:2.6rem; color:var(--gold); line-height:1;}
.hist-stat .stat span{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--w-55);}
.season{margin:44px 0;}
.season-year{font-family:var(--display); font-size:1.4rem; color:var(--gold-2); letter-spacing:.04em; margin-bottom:18px; display:flex; align-items:center; gap:14px;}
.season-year::after{content:""; flex:1; height:1px; background:var(--w-08);}
.event-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px;}
.event-card{display:block; background:var(--ink-2); border:1px solid var(--w-08); border-radius:18px; overflow:hidden; transition:transform .25s,border-color .25s;}
.event-card:hover{transform:translateY(-3px); border-color:var(--w-25);}
.event-card .ec-img{aspect-ratio:3/2; background:var(--ink-3) center/cover no-repeat; position:relative;}
.ec-img.noimg{background:linear-gradient(135deg,#17171c,#0e0e12);}
.ec-img.noimg::after{content:""; position:absolute; inset:0; background:url('/img/logo-nav.webp') center/54px no-repeat; opacity:.13;}
.event-card .ec-tag{position:absolute; top:12px; left:12px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; background:rgba(0,0,0,.6); color:var(--gold); padding:5px 11px; border-radius:100px; backdrop-filter:blur(6px);}
.event-card .ec-body{padding:18px 20px;}
.event-card h3{font-family:var(--display); font-weight:500; font-size:1.2rem; color:var(--bone); margin-bottom:4px;}
.event-card .ec-meta{font-size:13px; color:var(--w-55);}
.upcoming-flag{display:inline-block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#11100E; background:var(--gold); padding:4px 10px; border-radius:100px; margin-bottom:14px;}

@media(prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important;} }