/* ============================================================
   THEME · COLLAGE / AD
   Dramatic dark velvet ground · Anton impact heads · gold neon ·
   cream "torn-paper" cards. High-energy direct-response vibe.
   ============================================================ */

.theme-collage{
  --bg:#2A0C11;
  --bg-alt:#6C131B;
  --bg-dark:#1A0509;
  --panel:#F1ECDD;            /* cream paper cards */
  --fg:#EAE8DD;              /* default text is light (dark ground) */
  --fg-soft:rgba(234,232,221,.72);
  --fg-on-dark:#EAE8DD;
  --fg-on-dark-soft:rgba(234,232,221,.72);
  --accent:#E5B12A;
  --accent-2:#C8911E;
  --line:rgba(234,232,221,.16);
  --line-strong:rgba(234,232,221,.28);
  --line-dark:rgba(229,177,42,.32);

  --font-display:'Anton',Impact,sans-serif;
  --font-body:'Montserrat',system-ui,sans-serif;
  --font-label:'Montserrat',system-ui,sans-serif;

  --h1-size:clamp(2.6rem,5.6vw,4.8rem);
  --h2-size:clamp(2rem,3.8vw,3.2rem);

  /* cards are cream → dark text inside them */
  --card-fg:#241016;
  --card-fg-soft:#5A4640;
  --card-line:rgba(36,16,22,.16);
  --chip-line:rgba(36,16,22,.28);
  --price-amount:#6C131B;

  color:var(--fg);
  background:
    linear-gradient(180deg,rgba(42,12,17,.92),rgba(26,5,9,.96)),
    url("../assets/texture-1.png") center/cover fixed no-repeat,
    #2A0C11;
}

/* Impact headings — Anton, uppercase, tight, with gold neon bleed */
.theme-collage h1,
.theme-collage h2{
  font-family:'Anton',Impact,sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.005em;line-height:.98;
}
.theme-collage .hero h1{
  color:#EAE8DD;
}
.theme-collage .hero h1 em{
  color:#F3CC4E;font-style:normal;
}
.theme-collage .lead{color:rgba(234,232,221,.8);}

/* nav */
.theme-collage nav{--nav-bg:rgba(26,5,9,.78);--nav-fg:#EAE8DD;--nav-fg-soft:rgba(234,232,221,.7);--nav-line:rgba(229,177,42,.22);}
.theme-collage .brand{letter-spacing:.04em;}

/* COLLAGE LAYOUT — stack the side cards below their text so sections don't
   visually mix into each other. */
.theme-collage .hero-grid,
.theme-collage .twocol{
  grid-template-columns:1fr;
  gap:40px;
}
.theme-collage .commwrap{
  grid-template-columns:1fr;
  gap:0;                       /* dividers control the rhythm, not the grid gap */
}

/* hero — video a pantalla completa */
.theme-collage .hero{padding:0;}
.theme-collage .hero h1{margin:1.4rem 0 1.7rem;line-height:1.04;}
.theme-collage .hero .hero-actions{margin-top:0;}

/* pillar card — three pillars side by side */
.theme-collage .map-card{
  max-width:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:0;row-gap:0;
  align-items:start;
  padding:30px 8px;
}
.theme-collage .map-card .mc-label{grid-column:1 / -1;padding:0 22px;margin-bottom:24px;}
.theme-collage .map-card .pillar-row{
  border-top:none;
  border-left:1px solid rgba(36,16,22,.12);
  padding:4px 24px;
}
.theme-collage .map-card .pillar-row:first-of-type{border-left:none;}
@media(max-width:760px){
  .theme-collage .map-card{grid-template-columns:1fr;}
  .theme-collage .map-card .pillar-row{border-left:none;border-top:1px solid rgba(36,16,22,.12);}
  .theme-collage .map-card .pillar-row:first-of-type{border-top:none;}
}

/* banner del hero — fallback detras del video + compass + velo */
.theme-collage .hero-media{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(108,19,27,.6) 0%, transparent 60%),
    linear-gradient(180deg,rgba(42,12,17,.4),rgba(26,5,9,.85)),
    url("../assets/texture-2.png") center/cover no-repeat,
    #1A0509;
}
.theme-collage .hero-media::before{
  content:"";position:absolute;right:-80px;top:50%;transform:translateY(-50%);
  width:520px;height:520px;z-index:1;
  background:url("../assets/logo-icon-gold.png") center/contain no-repeat;
  opacity:.06;pointer-events:none;
}
/* velo sobre el video + sombra bordo de transicion en la parte de abajo */
.theme-collage .hero-media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(108,19,27,.4) 0%, transparent 60%),
    linear-gradient(180deg, rgba(26,5,9,.5) 0%, rgba(26,5,9,.3) 32%, rgba(26,5,9,.5) 62%, rgba(26,5,9,.88) 86%, #1A0509 100%);
}

/* hero pillar card → cream torn paper, slight tilt */
.theme-collage .map-card{
  background:var(--panel);
  border:0;border-radius:2px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.7);
  position:relative;
}
.theme-collage .map-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#F3CC4E,#C8911E,#9A6E1A);
}
.theme-collage .map-card::after{
  content:"";position:absolute;inset:0;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(36,16,22,.1);
  -webkit-mask:linear-gradient(#000,#000);pointer-events:none;
}
.theme-collage .map-card .pn{font-family:'Anton',sans-serif;color:#B8841F;}

/* eyebrows → gold lingote banner bars */
.theme-collage .eyebrow{
  background:linear-gradient(180deg,#F3CC4E 0%,#D9A82E 50%,#A0782A 100%);
  color:#2A0C11;padding:.4em .9em;border-radius:2px;
  letter-spacing:.16em;font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,248,200,.7),0 4px 14px rgba(229,177,42,.3);
}
.theme-collage .eyebrow::before{display:none;}
/* cartel del hero: un poco mas ancho y con mas borde alrededor del texto */
.theme-collage .hero-eyebrow{padding:.55em 2em;}
.theme-collage .secnum{
  color:#F3CC4E;letter-spacing:.2em;
}

/* stat strip — GOLD band, bordo Anton numerals + bordo labels */
.theme-collage .stats{
  --stats-line:rgba(108,19,27,.28);--stats-fg-soft:rgba(108,19,27,.78);
  background:linear-gradient(180deg,#F3CC4E 0%,#E5B12A 55%,#C8911E 100%);
  border-color:rgba(108,19,27,.3);
}
.theme-collage .stat .n{
  --stat-font:'Anton',sans-serif;--stat-color:#6C131B;font-size:2.9rem;letter-spacing:.01em;
}
/* center horizontally + vertically; reserve 2-line label height so single-line
   and two-line boxes stay aligned to each other */
.theme-collage .stat{
  text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.theme-collage .stat .l{min-height:2.5em;display:flex;align-items:flex-start;justify-content:center;}
/* cajas del hero: mas compactas que la franja, para que entren en la primera vista */
.theme-collage .hero-stats .stat .n{font-size:2.3rem;}
.theme-collage .hero-stats .stat .l{min-height:auto;align-items:center;}

/* section grounds — alternate velvet textures, all dark */
.theme-collage section.block{
  background:
    linear-gradient(180deg,rgba(42,12,17,.86),rgba(26,5,9,.92)),
    url("../assets/texture-1.png") center/cover no-repeat;
}
.theme-collage .tint{
  background:
    linear-gradient(180deg,rgba(108,19,27,.7),rgba(42,12,17,.88)),
    url("../assets/texture-2.png") center/cover no-repeat;
  border-top:1px solid rgba(229,177,42,.18);border-bottom:1px solid rgba(229,177,42,.18);
}
.theme-collage .ink-bg{
  --ink-h-color:#EAE8DD;--ink-p-color:rgba(234,232,221,.78);
  --sec-p-color:rgba(234,232,221,.78);--stage-line:rgba(229,177,42,.3);
  background:
    radial-gradient(ellipse at 50% 0%,rgba(108,19,27,.6),transparent 65%),
    linear-gradient(180deg,rgba(26,5,9,.92),rgba(10,2,4,.96)),
    url("../assets/texture-2.png") center/cover no-repeat,
    #1A0509;
}

/* section heads on dark */
.theme-collage .sec-head h2{
  --h2-color:#EAE8DD;
}
.theme-collage .sec-head p{color:rgba(234,232,221,.76);}

/* cards → cream torn paper with subtle alternating tilt */
.theme-collage .card,
.theme-collage .analogy,
.theme-collage .mod,
.theme-collage .weeks,
.theme-collage .notincl{
  background:var(--panel);border:0;border-radius:2px;
  box-shadow:0 20px 44px -26px rgba(0,0,0,.7);
}
.theme-collage .weeks{box-shadow:0 24px 50px -28px rgba(0,0,0,.7);overflow:hidden;}
.theme-collage .week{border-color:rgba(36,16,22,.12);}
.theme-collage .card:hover{box-shadow:0 28px 56px -24px rgba(0,0,0,.8);}
.theme-collage .card .ci,
.theme-collage .mod .mk,
.theme-collage .week .wn{color:#B8841F;}
.theme-collage .card h4,
.theme-collage .mod h4{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.02em;}

/* video placeholders */
.theme-collage .video-slot{
  --vid-bg:rgba(26,5,9,.6);--vid-border:rgba(229,177,42,.5);
  --vid-label:#F3CC4E;--vid-hint:rgba(234,232,221,.7);
}
/* on the light Herramientas section the slots sit on cream → dark dashed */
.theme-collage #app .video-slot{
  --vid-bg:rgba(108,19,27,.06);--vid-border:rgba(108,19,27,.4);
  --vid-label:#9A6E1A;--vid-hint:#5A4640;
}
.theme-collage #testimonios.block{
  background:
    linear-gradient(180deg,rgba(42,12,17,.86),rgba(26,5,9,.92)),
    url("../assets/texture-2.png") center/cover no-repeat;
}
.theme-collage #testimonios .sec-head h2{--h2-color:#EAE8DD;}

/* comunidad hero — darken image, fade into the velvet section */
.theme-collage #comunidad{
  --comm-hero-h:600px;
  --comm-hero-fade:linear-gradient(180deg, rgba(20,6,8,.42) 0%, rgba(24,7,10,.66) 45%, rgba(40,12,17,.92) 80%, #2A0C11 100%);
}
.theme-collage #comunidad.tint{
  background:
    linear-gradient(180deg,rgba(42,12,17,.94),rgba(26,5,9,.96)),
    url("../assets/texture-2.png") center/cover no-repeat;
}

/* ===== INVERTED SECTION · #app Herramientas (light ground, bordo cards) ===== */
.theme-collage #app.block{
  background:
    linear-gradient(180deg, rgba(244,241,232,.96), rgba(236,231,217,.98)),
    url("../assets/texture-3.png") center/cover no-repeat,
    #F1ECDD;
}
.theme-collage #app .sec-head h2{--h2-color:#2A0C11;}
.theme-collage #app .sec-head p{color:#5A4640;}
.theme-collage #app .secnum{color:#9A6E1A;}
/* bordo cards with light text */
.theme-collage #app .card{
  background:linear-gradient(180deg,#7A1820 0%,#5E1118 60%,#460C12 100%);
  box-shadow:0 22px 46px -26px rgba(46,14,19,.6);
}
.theme-collage #app .card .ci{color:#E5B12A;}
.theme-collage #app .card h4{color:#F4EFE3;}
.theme-collage #app .card p{color:rgba(244,239,227,.82);}
.theme-collage #app .card:hover{box-shadow:0 30px 58px -22px rgba(46,14,19,.72);}

/* channels list sits on dark → light text */
.theme-collage .channels .ct{color:#EAE8DD;font-family:'Anton',sans-serif;font-weight:400;}
.theme-collage .channels .cd{color:rgba(234,232,221,.74);}
.theme-collage .channels li{border-color:rgba(229,177,42,.2);}
.theme-collage .community-aside h4{color:#EAE8DD;font-family:'Anton',sans-serif;font-weight:400;}
/* separator line between IncuMatch (channels) and Juntadas presenciales when stacked.
   Match the 20px/20px rhythm of the channel dividers: last <li> already gives 20px
   above the line, so the aside gets 20px below it (no extra margin). */
.theme-collage .commwrap .community-aside{
  border-top:1px solid rgba(229,177,42,.28);
  padding-top:20px;margin-top:0;
}
.theme-collage .community-aside p{color:rgba(234,232,221,.74);}
.theme-collage .city{color:rgba(234,232,221,.78);border-color:rgba(229,177,42,.32);}

/* analogy / cards keep dark text (cream bg) */
.theme-collage .analogy h4{font-family:'Anton',sans-serif;font-weight:400;}
.theme-collage .analogy li::before{color:#B8841F;}

/* mapa stages — light text on velvet */
.theme-collage .stage h4{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.02em;}
.theme-collage .stage{align-items:center;}
.theme-collage .stage .sn{color:#F3CC4E;}

/* pricing — INVERTED: light ground, bordo matrícula card + gold guarantee */
.theme-collage #inscripcion.tint{
  background:
    linear-gradient(180deg, rgba(244,241,232,.96), rgba(236,231,217,.98)),
    url("../assets/texture-3.png") center/cover no-repeat,
    #F1ECDD;
  border-top:1px solid rgba(108,19,27,.18);border-bottom:1px solid rgba(108,19,27,.18);
}
.theme-collage #inscripcion .sec-head h2{--h2-color:#2A0C11;}
.theme-collage #inscripcion .sec-head p{color:#5A4640;}
.theme-collage #inscripcion .secnum{color:#9A6E1A;}

/* bordo matrícula card */
.theme-collage #inscripcion .price-card{
  background:linear-gradient(180deg,#420C12 0%,#2C080D 60%,#1C0508 100%);
  border:2px solid #E5B12A;border-radius:10px;
  box-shadow:0 30px 70px -30px rgba(46,14,19,.6);
}
.theme-collage #inscripcion .price-card .amount{font-family:'Anton',sans-serif;font-weight:400;color:#F3CC4E;}
.theme-collage #inscripcion .price-card .was{color:rgba(244,239,227,.6);}
.theme-collage #inscripcion .price-card .unit,
.theme-collage #inscripcion .price-card .sub{color:rgba(244,239,227,.82);}
.theme-collage #inscripcion .price-card .row2{border-top-color:rgba(244,239,227,.2);}
.theme-collage #inscripcion .pfeatures li{color:rgba(244,239,227,.88);}
.theme-collage #inscripcion .pfeatures li::before{color:#F3CC4E;}

/* gold guarantee card */
.theme-collage #inscripcion .guarantee{
  background:linear-gradient(180deg,#F3CC4E 0%,#E5B12A 55%,#C8911E 100%);
  border:0;
}
.theme-collage #inscripcion .guarantee h4{color:#2A0C11;}
.theme-collage #inscripcion .guarantee p{color:rgba(42,12,17,.82);}
.theme-collage #inscripcion .guarantee .big{font-family:'Anton',sans-serif;color:#6C131B;}

/* pricing — cream card pops on velvet */
.theme-collage .price-card{background:var(--panel);border:2px solid #E5B12A;border-radius:4px;box-shadow:0 30px 70px -30px rgba(0,0,0,.8),0 0 0 1px rgba(229,177,42,.25);}
.theme-collage .price-card .amount{font-family:'Anton',sans-serif;font-weight:400;color:#6C131B;}
.theme-collage .guarantee{background:#1A0509;border:1px solid rgba(229,177,42,.3);}
.theme-collage .guarantee .big{font-family:'Anton',sans-serif;color:#F3CC4E;}

/* faq on dark */
.theme-collage .faq{border-color:rgba(229,177,42,.2);}
.theme-collage details{border-color:rgba(229,177,42,.18);}
.theme-collage summary{color:#EAE8DD;font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.02em;}
.theme-collage details p{color:rgba(234,232,221,.74);}
.theme-collage summary::after{color:#F3CC4E;}

/* final cta */
.theme-collage .finalcta::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:620px;height:620px;background:url("../assets/logo-icon-gold.png") center/contain no-repeat;
  opacity:.05;pointer-events:none;
}

/* buttons */
.theme-collage .btn{font-size:.9rem;padding:1.05rem 1.8rem;}
.theme-collage .nav-cta{font-size:.76rem;padding:.62rem 1.2rem;}
.theme-collage .btn-ghost{border:1.5px solid rgba(229,177,42,.55);color:#F3CC4E;background:transparent;}
.theme-collage .btn-ghost:hover{background:rgba(229,177,42,.12);border-color:#F3CC4E;}

/* footer */
.theme-collage footer{--footer-bg:#120307;border-top:1px solid rgba(229,177,42,.2);}