/* Capa de color de Dreams (2026-10-21).
   Debajo del hero la página va "de la noche al amanecer": cada sección se calienta un poco más.
   Solo sobrescribe estilos de index.html; el hero no se toca. Quitar este archivo regresa al diseño anterior. */

:root{
  --plum:#3B2350;--plum-2:#5C3A6E;--wine:#4A1F33;--ember:#6B3222;
  --coral:#F07A5F;--coral-soft:#F4A08C;--amber-deep:#E8954A;--peach:#F6D3B3;
}

/* ---------- etiquetas de sección: píldoras con color ---------- */
.sec .kicker{padding:7px 13px;border-radius:999px;background:rgba(243,185,95,.12);border:1px solid rgba(243,185,95,.32);color:var(--accent-hover)}
.sec.light .kicker{background:rgba(255,251,245,.78);border-color:rgba(138,90,18,.3);color:#5A3606}
.trail-div{height:2px;background:linear-gradient(90deg,transparent,rgba(243,185,95,.55),rgba(240,122,95,.45),transparent)}

/* ---------- traza ---------- */
#traza{background:
  radial-gradient(ellipse 55% 50% at 88% 12%,rgba(92,58,110,.5),transparent 70%),
  radial-gradient(ellipse 45% 40% at 6% 92%,rgba(243,185,95,.18),transparent 70%),
  var(--canvas)}
.scen button{background:linear-gradient(160deg,#211A2B,#18131F);border-color:rgba(181,171,162,.16);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.scen button:hover{background:linear-gradient(160deg,#2A2135,#1C1624)}
.scen .q small{color:#B5ABA2}
.scen button[aria-pressed="true"] .q small{color:#F1D9B5}
.scen button[aria-pressed="true"]{background:linear-gradient(160deg,rgba(243,185,95,.2),rgba(240,122,95,.1));border-color:rgba(243,185,95,.7);box-shadow:0 14px 40px rgba(243,185,95,.12)}
.console{border-color:rgba(243,185,95,.28);box-shadow:0 0 0 1px rgba(92,58,110,.35),0 30px 80px rgba(0,0,0,.5),0 0 90px rgba(92,58,110,.25)}
.console-bar{background:linear-gradient(90deg,rgba(92,58,110,.35),rgba(243,185,95,.1))}

/* ---------- niveles: cada tarjeta con su color ---------- */
#niveles{background:
  radial-gradient(ellipse 70% 55% at 50% 100%,rgba(240,122,95,.14),transparent 70%),
  linear-gradient(180deg,var(--canvas),#1A1122)}
.step{background:#1A1520;background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 30%,#18131F),#16121C 72%);border-color:color-mix(in srgb,var(--tc) 38%,transparent);box-shadow:0 18px 44px rgba(0,0,0,.35)}
.step:hover{border-color:var(--tc);box-shadow:0 22px 56px rgba(0,0,0,.4),0 0 40px color-mix(in srgb,var(--tc) 22%,transparent)}
.step::before{left:0;right:0;top:0;height:5px;border-radius:16px 16px 0 0}
.step .code{font-size:2.2rem;font-weight:600}
.step p{color:#CFC5BB}
.step .who{color:color-mix(in srgb,var(--tc) 45%,#FFFFFF);border-top:0;align-self:flex-start;padding:6px 11px;border-radius:999px;background:color-mix(in srgb,var(--tc) 16%,#120E16);border:1px solid color-mix(in srgb,var(--tc) 45%,transparent)}
.ladder-note{color:#CFC5BB}

/* ---------- lo construido (claro y cálido) ---------- */
#construido{background:
  radial-gradient(ellipse 60% 45% at 8% 0%,rgba(243,185,95,.42),transparent 70%),
  radial-gradient(ellipse 55% 45% at 96% 100%,rgba(240,122,95,.26),transparent 70%),
  linear-gradient(180deg,#F3E9DC,#EFE2D2)}
.card{background:#FFFBF5;border-color:rgba(160,120,80,.22);box-shadow:0 14px 40px rgba(90,55,25,.1);overflow:hidden}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--sc,#B7791F),color-mix(in srgb,var(--sc,#B7791F) 45%,#F3B95F))}
.card:hover{border-color:color-mix(in srgb,var(--sc,#B7791F) 55%,transparent);box-shadow:0 22px 56px rgba(90,55,25,.16)}
.card:has(.status.ready){--sc:#C7801A}.card:has(.status.build){--sc:#E0704F}.card:has(.status.v1){--sc:#2F7FB0}.card:has(.status.stg){--sc:#8E5BB8}
.status{background:color-mix(in srgb,var(--sc,#8C8070) 14%,#FFFFFF);border:1px solid color-mix(in srgb,var(--sc,#8C8070) 35%,transparent);color:#2A2018}
.status.build{--sc:#E0704F}
.facts{border-top-color:rgba(160,120,80,.2)}
.facts li::before{color:var(--sc,#8A5A12)}

/* ---------- ingeniería ---------- */
#ingenieria{background:
  radial-gradient(ellipse 50% 45% at 85% 25%,rgba(243,185,95,.18),transparent 70%),
  radial-gradient(ellipse 60% 50% at 0% 80%,rgba(92,58,110,.42),transparent 70%),
  linear-gradient(180deg,#120E17,#170F1C)}
.prac li{border-top-color:rgba(243,185,95,.14)}
.prac li::before{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:50%;background:linear-gradient(135deg,rgba(243,185,95,.3),rgba(240,122,95,.2));border:1px solid rgba(243,185,95,.45);color:var(--accent-hover);font-weight:600;transform:translateY(-4px)}
.ci{background:linear-gradient(170deg,#1E1726,#141019);border-color:rgba(243,185,95,.3);box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 80px rgba(243,185,95,.08)}
.ci-head{background:linear-gradient(90deg,rgba(243,185,95,.16),rgba(92,58,110,.2))}
.ci .ok .ic{background:rgba(127,209,164,.24);box-shadow:inset 0 0 0 1px rgba(127,209,164,.7),0 0 12px rgba(127,209,164,.25)}
.stack{border-color:rgba(243,185,95,.16)}
.stack-label{color:var(--accent)}
.track span{color:var(--text);border-color:rgba(243,185,95,.3);background:rgba(243,185,95,.08)}
.track span:nth-child(5n+2){border-color:rgba(240,122,95,.35);background:rgba(240,122,95,.1)}
.track span:nth-child(5n+3){border-color:rgba(155,110,190,.4);background:rgba(155,110,190,.12)}
.track span:nth-child(5n+4){border-color:rgba(127,209,164,.35);background:rgba(127,209,164,.09)}
.track span:nth-child(5n+5){border-color:rgba(157,183,201,.35);background:rgba(157,183,201,.1)}

/* ---------- método: de la noche al amanecer ---------- */
#metodo{background:
  radial-gradient(ellipse 70% 60% at 50% 110%,rgba(243,185,95,.3),transparent 65%),
  linear-gradient(180deg,var(--canvas) 0%,#170F1D 50%,#2A1714 100%)}
.orbit-svg path{stroke:rgba(243,185,95,.85);stroke-width:1.6}
.stage-i{border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 44px rgba(0,0,0,.35)}
.stage-i .t{color:#CFC5BB}
.stage-i p{color:#DED5CB}
.stage-i:nth-child(1){background:linear-gradient(180deg,#30203F,#1C1526);border-color:rgba(155,110,190,.35)}
.stage-i:nth-child(2){background:linear-gradient(180deg,#3E1F3D,#1E1524);border-color:rgba(190,100,150,.35)}
.stage-i:nth-child(3){background:linear-gradient(180deg,#4F2230,#20151C);border-color:rgba(240,122,95,.38)}
.stage-i:nth-child(4){background:linear-gradient(180deg,#6A3020,#241812);border-color:rgba(232,149,74,.45)}
.stage-i:nth-child(5){background:linear-gradient(180deg,#F6C774,#E8954A);border-color:rgba(255,214,150,.8);box-shadow:0 22px 60px rgba(232,149,74,.3)}
.stage-i:nth-child(5) h3{color:#1A1308}
.stage-i:nth-child(5) .n{color:#5A3606}
.stage-i:nth-child(5) .t{color:#4A2E08}
.stage-i:nth-child(5) p{color:#2E1E0A}
.stage-i:nth-child(1) .dot{box-shadow:inset 0 0 0 2px #B48AD6}
.stage-i:nth-child(2) .dot{box-shadow:inset 0 0 0 2px #D888B4}
.stage-i:nth-child(3) .dot{box-shadow:inset 0 0 0 2px var(--coral)}
.stage-i:nth-child(4) .dot{box-shadow:inset 0 0 0 2px var(--amber-deep)}
.stage-i:nth-child(5) .dot{background:var(--accent);box-shadow:0 0 0 4px rgba(243,185,95,.25),0 0 18px rgba(243,185,95,.6)}

/* ---------- preguntas (claro y cálido) ---------- */
#faq{background:
  radial-gradient(ellipse 55% 50% at 100% 0%,rgba(240,122,95,.2),transparent 70%),
  radial-gradient(ellipse 50% 45% at 0% 100%,rgba(243,185,95,.3),transparent 70%),
  linear-gradient(180deg,#EFE2D2,#F3E9DC)}
.qa{border-top:0;display:grid;gap:12px}
.qa details{border:1px solid rgba(160,120,80,.22);border-radius:16px;background:#FFFBF5;padding:0 20px;box-shadow:0 10px 30px rgba(90,55,25,.08);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.qa details[open]{border-color:rgba(199,128,26,.55);box-shadow:0 16px 44px rgba(90,55,25,.13),inset 4px 0 0 #E8954A}
.qa summary{padding:20px 0}
.qa summary .pm{background:linear-gradient(135deg,#F6C774,#E8954A);border-color:transparent}
.qa summary .pm::before,.qa summary .pm::after{background:#1A1308}
.qa .ans{margin:0 0 20px}

/* ---------- diagnóstico ---------- */
.trust li svg{width:22px;height:22px;padding:4px;border-radius:50%;background:rgba(243,185,95,.2);box-shadow:inset 0 0 0 1px rgba(243,185,95,.5);transform:translateY(5px)}
.form-card{border:1px solid transparent;background:linear-gradient(170deg,rgba(32,25,40,.96),rgba(20,16,26,.96)) padding-box,linear-gradient(140deg,rgba(243,185,95,.75),rgba(240,122,95,.5),rgba(92,58,110,.6)) border-box;box-shadow:0 34px 90px rgba(0,0,0,.5),0 0 90px rgba(243,185,95,.1)}

/* ---------- pie ---------- */
footer{position:relative;border-top:0;background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(92,58,110,.25),transparent 70%),linear-gradient(180deg,#140E19,#0B090E)}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--plum-2),var(--coral),var(--accent),var(--coral),var(--plum-2))}
footer h4{color:var(--accent)}