/* ══════════════════════════════════════════════════════════════════
   concientizacion.devel.group — sobre devel-base.css
   Línea gráfica de devel.group: negro profundo, código de fondo,
   naranja Devel, tarjetas de vidrio y botones píldora.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --na:#FF3000; --na2:#FF5A2E; --durazno:#2A140D;
  --sup:#000000; --sup2:#0E0E0E; --sup3:#1A1A1A;
  --tinta:#FFFFFF; --tinta2:#B9B9B6; --tinta3:#7C7C78;
  --linea:#1F1F1F; --linea2:#333331;
  --vidrio:rgba(28,28,28,.62);
  --sombra:0 20px 60px -30px rgba(255,48,0,.35);
  --nav:84px;
}
body{background:#000; color:var(--tinta)}
section{border-bottom:none}

/* ── Cabecera ─────────────────────────────────────────────────────── */
.top{background:rgba(0,0,0,.78); border-bottom:1px solid #141414; justify-content:space-between}
.top .marca img{height:44px; display:block}
.menu a{color:#fff; font-weight:700}
.menu a:hover{background:transparent; color:var(--na)}
.menu a.on{background:transparent; color:var(--na); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px}
.btn{border-radius:12px; padding:13px 26px}
.btn.gh{color:#fff; border-color:#3A3A38}
.btn.gh:hover{background:#151515; border-color:var(--na)}
.btn.xl{font-size:17px; padding:17px 34px}
.chip-user{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--tinta2)}
.chip-user i{width:30px; height:30px; border-radius:50%; background:var(--na); color:#fff; display:grid; place-items:center; font-style:normal}
@media(max-width:820px){.top .marca img{height:34px} .top .btn{padding:10px 16px; font-size:13px}}

/* ── Fondo de código (como devel.group) ───────────────────────────── */
.codigo{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
  font-family:"Cascadia Mono",Consolas,monospace; color:#fff; opacity:.11; filter:blur(.6px);
  white-space:pre; line-height:1.25; user-select:none}
.codigo div{position:absolute; left:-2%; right:-2%}
.codigo::after{content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 42%, rgba(0,0,0,.2) 0%, #000 78%)}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; text-align:center;
  padding:clamp(70px,11vw,140px) clamp(16px,4vw,52px) clamp(60px,8vw,100px)}
.hero .wrap{position:relative; z-index:1}
.hero .kick{color:var(--na); letter-spacing:.24em}
.hero h1{font-size:clamp(40px,7.6vw,104px); line-height:.98; letter-spacing:-.035em; max-width:1100px; margin:0 auto}
.hero h1 .na{display:block}
.hero .sub{font-size:clamp(18px,2.2vw,26px); font-weight:700; margin:28px auto 0; max-width:900px; line-height:1.35}
.hero .lead{margin:18px auto 0; color:var(--tinta2)}
.hero .btns{justify-content:center; margin-top:36px}
.tachado{position:relative; color:var(--tinta3); white-space:nowrap}
.tachado::after{content:''; position:absolute; left:-4%; right:-4%; top:52%; height:.09em; background:var(--na); transform:rotate(-4deg)}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1100px; margin:60px auto 0}
.stat{background:var(--vidrio); backdrop-filter:blur(14px); border:1px solid #1E1E1E; border-radius:22px;
  padding:34px 16px; text-align:center}
.stat .n{font-size:clamp(46px,6vw,74px); font-weight:800; color:var(--na); letter-spacing:-.03em; line-height:1}
.stat .t{font-size:15px; margin-top:10px; color:#E8E8E5}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ── Manifiesto ───────────────────────────────────────────────────── */
.manif{background:var(--na); color:#fff; padding:clamp(48px,7vw,90px) clamp(16px,4vw,52px)}
.manif h2{font-size:clamp(30px,5vw,64px); letter-spacing:-.03em; max-width:1050px}
.manif p{font-size:clamp(17px,1.8vw,21px); max-width:820px; margin-top:20px; line-height:1.5; color:#FFE9E2}
.meses{display:grid; grid-template-columns:repeat(12,1fr); gap:6px; margin-top:34px}
.meses span{background:rgba(0,0,0,.18); border-radius:10px; padding:12px 0; text-align:center; font-weight:800; font-size:13px; letter-spacing:.06em}
.meses span.oct{background:#000}
@media(max-width:760px){.meses{grid-template-columns:repeat(6,1fr)}}

/* ── Secciones de recursos ────────────────────────────────────────── */
.cab-sec{display:flex; justify-content:space-between; align-items:flex-end; gap:22px; flex-wrap:wrap; margin-bottom:30px}
.cab-sec .kick{color:var(--na)}
.cuenta{font-size:clamp(64px,9vw,120px); font-weight:800; color:var(--na); line-height:.85; letter-spacing:-.04em}
.alt{background:#070707}

.galeria{display:grid; gap:16px}
.galeria.h{grid-template-columns:repeat(4,1fr)}
.galeria.v{grid-template-columns:repeat(3,1fr); max-width:960px}
@media(max-width:1080px){.galeria.h{grid-template-columns:repeat(2,1fr)} .galeria.v{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.galeria.h{grid-template-columns:1fr} .galeria.v{grid-template-columns:repeat(2,1fr)}}
.pieza{background:var(--sup2); border:1px solid #1C1C1C; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:.2s}
.pieza:hover{border-color:var(--na); transform:translateY(-3px); box-shadow:var(--sombra)}
.pieza .mini{position:relative; background:#111; cursor:zoom-in}
.pieza .mini canvas,.pieza .mini img{width:100%; display:block}
.pieza .info{padding:14px 15px 16px; display:flex; flex-direction:column; gap:8px; flex:1}
.pieza h3{font-size:15px; line-height:1.25}
.pieza .acc{display:flex; gap:6px; margin-top:auto; flex-wrap:wrap}
.mini-btn{font-family:inherit; font-size:12px; font-weight:700; padding:7px 11px; border-radius:8px; cursor:pointer;
  border:1px solid #333; background:transparent; color:#fff; transition:.15s}
.mini-btn:hover{border-color:var(--na); color:var(--na)}
.mini-btn.pri{background:var(--na); border-color:var(--na)}
.mini-btn.pri:hover{background:var(--na2); color:#fff}
.candado{position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.0); transition:.2s}
.bloq .candado{background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75))}
.bloq .candado b{position:absolute; bottom:10px; right:10px; font-size:11px; background:#000; border:1px solid var(--na); color:var(--na); padding:4px 9px; border-radius:20px}

/* Cápsulas: un bloque por mes con su tema y sus dos envíos */
.capsulas{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:1000px){.capsulas{grid-template-columns:1fr}}
.mes-bloque{background:#0B0B0B; border:1px solid #1C1C1C; border-radius:20px; padding:18px; display:flex; flex-direction:column; gap:12px}
.mes-cab{display:flex; gap:14px; align-items:center; padding:4px 4px 6px}
.mes-n{font-size:40px; font-weight:800; color:var(--na); line-height:1; letter-spacing:-.03em}
.mes-nom{font-size:11px; letter-spacing:.16em; font-weight:800; text-transform:uppercase; color:var(--tinta3)}
.mes-cab h3{font-size:20px}
.mes-caps{display:grid; gap:10px}
.cap{background:var(--sup2); border:1px solid #1C1C1C; border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:10px; transition:.2s}
.cap:hover{border-color:var(--na)}
.cap .mes{display:flex; justify-content:space-between; font-size:11px; letter-spacing:.14em; font-weight:800; text-transform:uppercase; color:var(--na)}
.cap .mes span{color:var(--tinta3)}
.cap h3{font-size:19px}
.cap .g{font-size:14.5px; color:var(--tinta2)}
.cap .acc{display:flex; gap:6px; margin-top:auto; padding-top:6px}
.ver-mas{text-align:center; margin-top:24px}

/* Extras */
.extras{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
@media(max-width:1080px){.extras{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.extras{grid-template-columns:1fr}}
.extra{background:var(--vidrio); border:1px solid #1E1E1E; border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:8px}
.extra .ico{width:44px; height:44px; border-radius:12px; background:var(--durazno); color:var(--na); display:grid; place-items:center; font-size:20px; font-weight:800}
.extra h3{font-size:16.5px; line-height:1.25}
.extra p{font-size:13.5px; color:var(--tinta2); line-height:1.45}
.extra .fmt{font-size:11px; letter-spacing:.1em; color:var(--tinta3); text-transform:uppercase; font-weight:700; margin-top:auto}

/* Cómo usarlo */
.pasos4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:p}
@media(max-width:900px){.pasos4{grid-template-columns:1fr 1fr}} @media(max-width:520px){.pasos4{grid-template-columns:1fr}}
.pasos4 div{border-top:3px solid var(--na); padding-top:18px; counter-increment:p}
.pasos4 div::before{content:'0' counter(p); font-size:44px; font-weight:800; color:#262626; display:block; line-height:1}
.pasos4 h3{font-size:19px; margin:10px 0 6px}
.pasos4 p{font-size:14.5px; color:var(--tinta2)}

/* CTA final */
.cta-final{position:relative; overflow:hidden; text-align:center}
.cta-final h2{font-size:clamp(32px,5.4vw,72px); letter-spacing:-.03em; max-width:1000px; margin:0 auto}
.cta-final .wrap{position:relative; z-index:1}

/* ── Modal de registro / vista previa / prompt ────────────────────── */
.modal{position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.82); backdrop-filter:blur(6px);
  display:grid; place-items:center; padding:16px; overflow-y:auto}
.caja{background:#0B0B0B; border:1px solid #262626; border-radius:22px; width:min(560px,100%); padding:clamp(22px,4vw,36px); position:relative; max-height:calc(100vh - 32px); overflow-y:auto}
.caja.ancha{width:min(1100px,100%)}
.caja h2{font-size:clamp(24px,3vw,32px); letter-spacing:-.02em}
.caja .cerrar{position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:1px solid #333; background:#000; color:#fff; cursor:pointer; font-size:15px}
.campos{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px}
.campos .full{grid-column:1/-1}
@media(max-width:520px){.campos{grid-template-columns:1fr}}
.campos label{font-size:12px; font-weight:700; color:var(--tinta3); letter-spacing:.04em; display:flex; flex-direction:column; gap:6px}
.campos input,.campos select{font-family:inherit; font-size:15px; padding:12px 14px; border-radius:10px; border:1px solid #2E2E2E; background:#000; color:#fff; width:100%}
.campos input:focus,.campos select:focus{outline:2px solid var(--na); border-color:transparent}
.check{display:flex; gap:10px; font-size:13px; color:var(--tinta2); line-height:1.45; align-items:flex-start; font-weight:400 !important; letter-spacing:0 !important; flex-direction:row !important}
.check input{width:auto; margin-top:3px; accent-color:var(--na)}
.err{color:#FF6B6B; font-size:13.5px; min-height:18px; margin-top:10px}
.prompt-txt{font-family:"Cascadia Mono",Consolas,monospace; font-size:13.5px; background:#000; border:1px solid #262626; border-radius:12px; padding:16px; line-height:1.55; white-space:pre-wrap; margin:14px 0; color:#E6E6E3}
.vista img,.vista canvas{width:100%; border-radius:12px; display:block}
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(120px); background:var(--na); color:#fff; font-weight:700;
  padding:13px 22px; border-radius:12px; z-index:120; transition:.3s; font-size:14.5px}
.toast.ver{transform:translateX(-50%) translateY(0)}

footer{background:#050505; border-top:1px solid #151515}
.pie-cols{grid-template-columns:1.6fr 1fr 1fr}
.pie-marca img{height:40px}

/* Bloque "crea los tuyos con IA" */
.crea-ia{margin-top:22px; display:flex; justify-content:space-between; align-items:center; gap:22px; flex-wrap:wrap;
  border:1px dashed #3A3A38; border-radius:20px; padding:24px 26px; background:linear-gradient(90deg,#140803,#0B0B0B)}
.crea-ia .kick{color:var(--na); margin-bottom:6px}
.crea-ia h3{font-size:22px}
.crea-ia p{color:var(--tinta2); font-size:15px; max-width:640px; margin-top:6px}

/* Selector de idioma */
.idioma{display:flex; border:1px solid #333; border-radius:10px; overflow:hidden; margin-left:auto; margin-right:10px; flex-shrink:0}
.idioma a{font-size:12.5px; font-weight:800; padding:8px 11px; text-decoration:none; color:var(--tinta3)}
.idioma a.on{background:var(--na); color:#fff}
.menu{margin-left:24px}

/* Sin registro: solo se ven las piezas; todo lo demás aparece al registrarse */
.solo-anon{display:none}
body.anon .solo-anon{display:inline-block}
body.anon .pieza .acc, body.anon .cap .acc, body.anon .extra .acc, body.anon .crea-ia .btns{display:none}
body.anon .pieza .mini, body.anon .cap, body.anon .extra{cursor:pointer}

/* Enlace de regreso a devel.group (barra superior y pie) */
.barra-devel{display:flex; justify-content:space-between; gap:12px; padding:8px clamp(16px,4vw,52px);
  background:#0A0A0A; border-bottom:1px solid #161616; font-size:13px; font-weight:700}
.barra-devel a{color:var(--tinta2); text-decoration:none}
.barra-devel a:hover{color:#fff}
.barra-devel a.cta{color:var(--na)}
.pie-volver{max-width:1200px; margin:0 auto; padding:0 clamp(18px,4vw,52px) 30px; display:flex; gap:10px; flex-wrap:wrap}

/* Header al estilo devel.group: logo, menú blanco, CTA naranja */
.top{gap:18px}
.top .menu a{font-size:15px}
.cta-top{white-space:nowrap}
#usuario:empty{display:none}
@media(max-width:1180px){.cta-top{display:none}}