/* ============================================================================
   Premium event mini-site · plantilla EDITORIAL (clara, tipo revista).
   Segunda plantilla seleccionable para eventos destacados (premiumTemplate =
   'editorial'). Fondo claro, secciones alternas y dos secciones oscuras
   (sede + footer). Acentos personalizables por evento (--evp2-a / --evp2-b).
   Todo bajo .evp2 / body.evp2-on para no tocar el resto del sitio.
   ========================================================================== */
.evp2 {
  --evp2-a: #cbe948;            /* accent (default lime, customizable)     */
  --evp2-b: #a8c62f;
  --evp2-bg: #f4f3ec;
  --evp2-ink: #16160f;
  --evp2-dark: #14140f;
  --evp2-muted: #71716a;
  --evp2-line: #e4e3da;
  --evp2-grad: linear-gradient(120deg, var(--evp2-a), var(--evp2-b));
  /* Typography pairing (event-selectable, see EventFontPreset / applyTypography
     in evento.js); every other rule below reads through these two. */
  --evp2-font-heading: 'Montserrat', sans-serif;
  --evp2-font-body: 'Mulish', system-ui, sans-serif;
  font-family: var(--evp2-font-body); color: var(--evp2-ink); line-height: 1.6;
}
body.evp2-on { background: var(--evp2-bg); }
body.evp2-on .site-header, body.evp2-on .site-footer { display: none; }
body.evp2-on main { padding: 0; }
body.evp2-on #evento-root.container { max-width: none; padding: 0; margin: 0; }
.evp2 * { box-sizing: border-box; }
.evp2 h1, .evp2 h2, .evp2 h3 { font-family: var(--evp2-font-heading); }
.evp2-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.evp2-kick { font-family: var(--evp2-font-heading); font-weight: 800; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--evp2-muted); display: inline-flex; align-items: center; gap: 8px; }
.evp2-kick::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--evp2-grad); }
.evp2-kick-light { color: rgba(255,255,255,.8); }
.evp2-thin { font-weight: 400; color: var(--evp2-muted); }
.evp2-section { padding: clamp(52px, 7vw, 92px) 0; }
.evp2-section-alt { background: #fbfbf7; border-top: 1px solid var(--evp2-line); border-bottom: 1px solid var(--evp2-line); }
.evp2-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.evp2-head h2 { font-weight: 800; font-size: clamp(28px, 4vw, 44px); line-height: 1.05; margin: 10px 0 0; letter-spacing: -.02em; }
.evp2-head-sub { color: var(--evp2-muted); margin: 12px 0 0; max-width: 62ch; }

/* Buttons */
.evp2-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--evp2-font-heading); font-weight: 700; font-size: 14px; padding: 13px 24px; border-radius: 999px; border: none; cursor: pointer; text-decoration: none; transition: transform .15s, filter .15s; }
.evp2-btn-dark { background: var(--evp2-dark); color: #fff; }
.evp2-btn-acc { background: var(--evp2-grad); color: #14140f; }
.evp2-btn-acc:hover, .evp2-btn-dark:hover { transform: translateY(-2px); filter: brightness(1.05); }
.evp2-btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }

/* Nav (pill) */
.evp2-nav { position: absolute; top: 18px; left: 0; right: 0; z-index: 20; }
.evp2-nav-inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; gap: 20px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 999px; padding: 10px 12px 10px 20px; box-shadow: 0 8px 30px -12px rgba(0,0,0,.3); }
.evp2-brand { display: flex; align-items: center; gap: 9px; font-family: var(--evp2-font-heading); font-weight: 800; font-size: 15px; color: var(--evp2-ink); text-decoration: none; }
/* El logo institucional es la firma de ANACOVI sobre el mini-sitio del evento:
   se lee antes que el nombre del evento, así que se le da presencia real. */
/* Más contenido que en las otras plantillas: aquí la barra es una píldora de
   padding corto, así que el logo crece sin inflarla de más. */
.evp2-brand img { height: 34px; }
@media (max-width: 860px) { .evp2-brand img { height: 28px; } }
.evp2-links { display: flex; gap: 22px; margin: 0 auto; }
.evp2-links a { color: var(--evp2-ink); text-decoration: none; font-weight: 600; font-size: 13.5px; opacity: .8; }
.evp2-links a:hover { opacity: 1; }
.evp2-nav-cta .evp2-btn { padding: 10px 20px; }
@media (max-width: 860px) { .evp2-links { display: none; } .evp2-nav-inner { justify-content: space-between; } }

/* Hero */
.evp2-hero { position: relative; min-height: clamp(520px, 82vh, 720px); display: flex; align-items: flex-end; background-size: cover; background-position: center; background-color: var(--evp2-dark); }
.evp2-hero-inner { max-width: 1160px; margin: 0 auto; width: 100%; padding: 0 24px clamp(48px, 7vw, 84px); }
.evp2-hero .evp2-eyebrow { font-family: var(--evp2-font-heading); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--evp2-a); }
.evp2-hero h1 { color: #fff; font-weight: 800; font-size: clamp(38px, 6vw, 74px); line-height: 1.0; letter-spacing: -.02em; margin: 14px 0 0; max-width: 16ch; }
.evp2-hero h1 em { display: block; font-style: italic; color: var(--evp2-a); font-weight: 800; font-size: .58em; margin-top: 8px; letter-spacing: -.01em; }
.evp2-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }

/* About + stats */
.evp2-about { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.evp2-about-l h2 { font-weight: 800; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; margin: 12px 0 0; letter-spacing: -.02em; }
.evp2-about-r p { color: #333; font-size: 17px; margin: 0; }
.evp2-about-stats { display: flex; gap: 40px; margin-top: 28px; flex-wrap: wrap; }
.evp2-about-stats b { display: block; font-family: var(--evp2-font-heading); font-weight: 800; font-size: 40px; line-height: 1; }
.evp2-about-stats span { color: var(--evp2-muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 780px) { .evp2-about { grid-template-columns: 1fr; } }

/* Agenda */
.evp2-agenda { border-top: 1px solid var(--evp2-line); }
.evp2-slot { display: grid; grid-template-columns: 130px 1fr 180px; gap: 20px; align-items: baseline; padding: 20px 4px; border-bottom: 1px solid var(--evp2-line); }
.evp2-slot-time { font-family: var(--evp2-font-heading); font-weight: 800; font-size: 16px; color: var(--evp2-ink); }
.evp2-slot-title { font-family: var(--evp2-font-heading); font-weight: 700; font-size: 16px; }
.evp2-slot-detail { color: var(--evp2-muted); font-size: 14px; margin-top: 3px; }
.evp2-slot-who { color: var(--evp2-muted); font-size: 13px; text-align: right; }
@media (max-width: 720px) { .evp2-slot { grid-template-columns: 88px 1fr; } .evp2-slot-who { grid-column: 2; text-align: left; } }

/* Speakers */
.evp2-speakers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.evp2-sp { position: relative; border: 1px solid var(--evp2-line); border-radius: 14px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
/* Las tarjetas rotan: blanca / acento 1 / neutra / acento 2 (turnando todas). */
.evp2-sp--a1 { background: var(--evp2-a); border-color: transparent; }
.evp2-sp--a2 { background: var(--evp2-b); border-color: transparent; }
.evp2-sp--neutral { background: var(--evp2-line); }
.evp2-sp-num { position: absolute; top: 12px; right: 14px; z-index: 2; font-family: var(--evp2-font-heading); font-weight: 800; font-size: 12px; color: rgba(0,0,0,.42); }
.evp2-sp-photo { aspect-ratio: 4 / 3; background-size: cover; background-position: center top; background-color: rgba(0,0,0,.06); }
.evp2-sp-noimg { display: grid; place-items: center; font-family: var(--evp2-font-heading); font-weight: 800; font-size: 46px; color: rgba(0,0,0,.28); }
.evp2-sp-body { padding: 16px 18px 18px; }
.evp2-sp-name { font-family: var(--evp2-font-heading); font-weight: 800; font-size: 17px; }
/* En las tarjetas blancas el nombre va en gradiente de acento. */
.evp2-sp--white .evp2-sp-name { background: var(--evp2-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* En las tarjetas de acento el texto va oscuro para contraste. */
.evp2-sp--a1 .evp2-sp-name, .evp2-sp--a2 .evp2-sp-name { color: var(--evp2-dark); }
.evp2-sp-role { color: var(--evp2-muted); font-size: 13px; margin-top: 3px; }
.evp2-sp--a1 .evp2-sp-role, .evp2-sp--a2 .evp2-sp-role { color: rgba(0,0,0,.64); }
.evp2-sp-org { display: inline-block; margin-top: 12px; font-family: var(--evp2-font-heading); font-weight: 800; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.evp2-sp--a1 .evp2-sp-org, .evp2-sp--a2 .evp2-sp-org { color: rgba(0,0,0,.72); }
.evp2-sp-apply { background: var(--evp2-dark); color: #fff; justify-content: center; padding: 8px; }
.evp2-sp-apply .evp2-sp-name { color: #fff; font-size: 22px; -webkit-text-fill-color: #fff; }
.evp2-sp-apply p { color: rgba(255,255,255,.7); font-size: 14px; margin: 8px 0 16px; }
@media (max-width: 900px) { .evp2-speakers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .evp2-speakers { grid-template-columns: 1fr; } }

/* Gallery */
.evp2-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.evp2-gal { display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--evp2-line); }
.evp2-gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; display: block; }
.evp2-gal:hover img { transform: scale(1.05); }

/* Venue (dark) */
.evp2-venue { background-size: cover; background-position: center; background-color: var(--evp2-dark); color: #fff; padding: clamp(56px, 8vw, 96px) 0; }
.evp2-venue h2 { color: #fff; font-weight: 800; font-size: clamp(28px, 4vw, 44px); margin: 12px 0 0; }
.evp2-venue-in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.evp2-venue-info { display: flex; flex-direction: column; gap: 16px; }
.evp2-venue-info div { border-top: 1px solid rgba(255,255,255,.16); padding-top: 12px; }
.evp2-venue-info span { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.evp2-venue-info b { font-family: var(--evp2-font-heading); font-weight: 700; font-size: 16px; }
@media (max-width: 780px) { .evp2-venue-in { grid-template-columns: 1fr; gap: 22px; } }

/* Sponsors */
.evp2-sptier { margin-bottom: 26px; }
.evp2-sptier-t { font-family: var(--evp2-font-heading); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; color: var(--evp2-muted); margin-bottom: 14px; }
.evp2-splogos { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.evp2-splogo { display: grid; place-items: center; min-width: 150px; height: 80px; padding: 12px 18px; border: 1px solid var(--evp2-line); border-radius: 12px; background: #fff; text-decoration: none; }
.evp2-splogo img { max-height: 46px; max-width: 140px; object-fit: contain; }
.evp2-sp-logoname { font-family: var(--evp2-font-heading); font-weight: 800; color: var(--evp2-ink); }

/* Docs */
.evp2-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.evp2-doc { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 1px solid var(--evp2-line); border-radius: 12px; background: #fff; text-decoration: none; color: var(--evp2-ink); }
.evp2-doc:hover { border-color: var(--evp2-ink); }
.evp2-doc b { font-size: 14px; } .evp2-doc span { color: var(--evp2-muted); font-size: 12px; }

/* Footer (dark) */
.evp2-foot { background: var(--evp2-dark); color: #fff; padding: clamp(48px, 7vw, 84px) 0 36px; }
.evp2-foot-cta { text-align: center; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12); }
.evp2-foot-cta h2 { color: #fff; font-weight: 800; font-size: clamp(26px, 4vw, 42px); margin: 0 0 10px; }
.evp2-foot-cta p { color: rgba(255,255,255,.7); margin: 0 0 22px; }
.evp2-foot-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; }
.evp2-foot-bar img { height: 28px; }
.evp2-foot-bar span { color: rgba(255,255,255,.6); font-size: 13px; }

/* ── Efectos opcionales por evento (video de fondo, brillo, movimiento) ────── */
.evp2 .evp2-hero-inner { position: relative; z-index: 2; }
.evp2-hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; filter: brightness(.55); }

.evp2.is-glow .evp2-hero h1 { animation: evp2-glow 3.4s ease-in-out infinite; }
@keyframes evp2-glow {
  0%, 100% { text-shadow: 0 0 20px color-mix(in srgb, var(--evp2-a) 45%, transparent), 0 0 8px color-mix(in srgb, var(--evp2-a) 30%, transparent); }
  50% { text-shadow: 0 0 34px color-mix(in srgb, var(--evp2-a) 72%, transparent), 0 0 13px color-mix(in srgb, var(--evp2-a) 48%, transparent); }
}

.evp2.is-motion .evp2-hero-inner { animation: evp2-rise .8s cubic-bezier(.2,.7,.2,1) both; }
.evp2.is-motion section { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.evp2.is-motion section.is-in { opacity: 1; transform: none; }
@keyframes evp2-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .evp2.is-motion .evp2-hero-inner { animation: none; }
  .evp2.is-motion section { opacity: 1; transform: none; transition: none; }
  .evp2.is-glow .evp2-hero h1 { animation: none; }
}

/* ── Más dinamismo (cuando is-motion / is-glow) ─────────────────────────────── */
.evp2.is-motion .mo-item { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.evp2.is-motion .mo-item.mo-in { opacity: 1; transform: none; }
/* En claro, el brillo va en los acentos (kicker) donde se lee bien. */
.evp2.is-glow .evp2-kick::before { box-shadow: 0 0 12px color-mix(in srgb, var(--evp2-a) 80%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .evp2.is-motion .mo-item { opacity: 1; transform: none; }
}

/* ── Orbes ambientales del hero (solo con is-motion) ───────────────────────── */
.evp2-orbs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.evp2-orbs i { position: absolute; display: block; border-radius: 50%; filter: blur(60px); opacity: .5; }
.evp2-orbs i:nth-child(1) { width: 40vw; height: 40vw; left: -8vw; top: -6vh; background: radial-gradient(circle, var(--evp2-a), transparent 66%); animation: evp2-orb1 25s ease-in-out infinite; }
.evp2-orbs i:nth-child(2) { width: 30vw; height: 30vw; right: -6vw; top: 24vh; background: radial-gradient(circle, var(--evp2-b), transparent 66%); animation: evp2-orb2 31s ease-in-out infinite; }
.evp2-orbs i:nth-child(3) { width: 22vw; height: 22vw; left: 40vw; bottom: -10vh; background: radial-gradient(circle, var(--evp2-a), transparent 68%); animation: evp2-orb3 28s ease-in-out infinite; }
@keyframes evp2-orb1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(5vw,4vh) scale(1.12); } }
@keyframes evp2-orb2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-4vw,-4vh) scale(1.1); } }
@keyframes evp2-orb3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(4vw,-5vh) scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .evp2-orbs { display: none; } }

/* ── Líneas de fondo animadas del hero (canvas, solo con is-motion) ─────────── */
.evp-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.evp2-hero .evp-lines { z-index: 1; mix-blend-mode: screen; }
@media (prefers-reduced-motion: reduce) { .evp-lines { display: none; } }

/* ── Tamaño de logo de patrocinador (sz-sm / sz-md / sz-lg) ─────────────────── */
.evp2-splogo.sz-sm { min-width: 130px; height: 72px; }
.evp2-splogo.sz-sm img { max-height: 38px; max-width: 130px; }
.evp2-splogo.sz-lg { min-width: 244px; height: 128px; }
.evp2-splogo.sz-lg img { max-height: 88px; max-width: 220px; }

/* ── Galería: badge; patrocinadores más atractivos ─────────────────────────── */
.evp2-gal { position: relative; }
.evp2-splogo { transition: transform .2s ease, box-shadow .2s ease; }
.evp2-splogo:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -16px rgba(0,0,0,.3); }

/* ── Niveles de patrocinio: evento.js ordena por rango y fija --sp-scale
   (cada nivel mide 66% del anterior). Nombre del nivel en su tono metálico. */
.evp2-sptier.tier-diamond  { --t1: #7fd6ff; --t2: #3f97cf; --t3: #7f6ef0; }
.evp2-sptier.tier-platinum { --t1: #b4c3cf; --t2: #6f7f8c; --t3: #4b5863; }
.evp2-sptier.tier-gold     { --t1: #f3c24a; --t2: #c8911a; --t3: #8a5d0f; }
.evp2-sptier.tier-silver   { --t1: #c3c7cb; --t2: #8a9096; --t3: #5f656b; }
.evp2-sptier.tier-bronze   { --t1: #e0a36b; --t2: #b06a2c; --t3: #7c471b; }
.evp2-sptier.tier-other    { --t1: var(--evp2-a); --t2: var(--evp2-a); --t3: var(--evp2-b); }
.evp2-sptier.tiered { margin-bottom: calc(18px + 20px * var(--sp-scale)); }
.evp2-sptier.tiered .evp2-sptier-t {
  font-size: calc(10px + 5px * var(--sp-scale)); letter-spacing: .2em; color: transparent;
  background: linear-gradient(100deg, var(--t3), var(--t2) 38%, var(--t1) 50%, var(--t2) 62%, var(--t3));
  background-size: 240% 100%; -webkit-background-clip: text; background-clip: text;
  animation: evp2-metal 6s linear infinite; }
.evp2-sptier.tiered .evp2-splogo {
  min-width: 0; width: min(calc(280px * var(--sp-scale)), 100%); height: calc(140px * var(--sp-scale));
  padding: calc(14px * var(--sp-scale)) calc(20px * var(--sp-scale));
  border-color: color-mix(in srgb, var(--t2) 45%, var(--evp2-line)); }
.evp2-sptier.tiered .evp2-splogo img { width: calc(226px * var(--sp-scale)); height: calc(92px * var(--sp-scale)); object-fit: contain; }
.evp2-sptier.tiered.is-top .evp2-splogo { border-width: 1.5px; box-shadow: 0 12px 32px -18px color-mix(in srgb, var(--t2) 75%, transparent); }
@keyframes evp2-metal { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .evp2-sptier.tiered .evp2-sptier-t { animation: none; } }

/* Media partners: grupo aparte al final, a tamaño completo y separado. */
.evp2-sptier.tier-media { --t1: var(--evp2-a); --t2: var(--evp2-a); --t3: var(--evp2-b); }
.evp2-sptier + .evp2-sptier.tier-media { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--evp2-line); }

/* ── Alineación de texto (configurable por evento) ── solo el párrafo de
   "Sobre el evento"; títulos, CTAs y etiquetas mantienen su alineación fija. */
.evp2[data-align="center"] .evp2-about-r p { text-align: center; }
.evp2[data-align="justify"] .evp2-about-r p { text-align: justify; text-align-last: left; hyphens: auto; }

/* Justificación por sección (data-sec + data-align los pone evento.js).
   Alcanza a la prosa de la sección; títulos, etiquetas y botones conservan su
   alineación propia, igual que con el ajuste global del evento. */
[data-sec][data-align="left"] p { text-align: left; }
[data-sec][data-align="center"] p { text-align: center; }
[data-sec][data-align="justify"] p { text-align: justify; text-align-last: left; hyphens: auto; }