#eco-oraculo{--base:#F4EFE5; --base-2:#EFE7D7; --card:#FBF7EF; --card-2:#F7F1E5;
    --ink:#221E1B; --ink-soft:#4C463D; --dim:#8C8377; --line:#E4DAC8; --line-2:#D9CDB7;
    --blue:#2C39A6; --blue-ink:#1E276F; --blue-soft:#E9E9F4;
    --terra:#C05A38; --terra-dim:#A24A2E;
    --frame:#221E1B;
    --serif:'Instrument Serif', Georgia, 'Iowan Old Style', Palatino, serif;
    --sans:'Syne', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;}
#eco-oraculo, #eco-oraculo *{box-sizing:border-box}
#eco-oraculo{position:relative; z-index:1; min-height:100vh; overflow-x:hidden;
    color:var(--ink); font-family:var(--sans); line-height:1.6;
    background:
      radial-gradient(60% 45% at 16% -10%, rgba(192,90,56,.06), transparent 62%),
      radial-gradient(52% 42% at 92% 2%, rgba(44,57,166,.05), transparent 60%),
      var(--base);}
#eco-oraculo .wrap{position:relative; z-index:1}
#eco-oraculo a{color:inherit}
#eco-oraculo .topbar{position:relative; z-index:2;
    display:flex; align-items:center; gap:20px;
    padding:14px 26px; background:rgba(244,239,229,.86);
    backdrop-filter:saturate(130%) blur(10px);
    border-bottom:1px solid var(--line);}
#eco-oraculo .brand{display:flex; align-items:baseline; gap:10px; font-family:var(--serif); font-size:22px; letter-spacing:.2px; color:var(--ink)}
#eco-oraculo .brand .moon{color:var(--blue)}
#eco-oraculo .brand .sub{font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--dim)}
#eco-oraculo .spacer{flex:1}
#eco-oraculo .tabs{display:flex; gap:5px; background:var(--card-2); border:1px solid var(--line); border-radius:999px; padding:4px}
#eco-oraculo .tab{border:0; background:transparent; color:var(--ink-soft); cursor:pointer;
    font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.01em;
    padding:8px 16px; border-radius:999px; transition:.18s;}
#eco-oraculo .tab:hover{color:var(--ink)}
#eco-oraculo .tab.on{background:var(--blue); color:var(--base); font-weight:600; box-shadow:0 2px 10px rgba(44,57,166,.28)}
#eco-oraculo .screen{display:none}
#eco-oraculo .screen.on{display:block; animation:oskFade .5s ease both}
@keyframes oskFade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
#eco-oraculo .col{max-width:880px; margin:0 auto; padding:0 26px}
#eco-oraculo .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--blue); font-weight:500}
#eco-oraculo .hero{padding:88px 0 64px; border-bottom:1px solid var(--line)}
#eco-oraculo .hero h1{font-family:var(--serif); font-weight:400; font-optical-sizing:auto;
    font-size:clamp(44px, 7.4vw, 82px); line-height:1.02; letter-spacing:-.4px;
    margin:22px 0 0; color:var(--ink);}
#eco-oraculo .hero h1 em{font-style:italic; color:var(--blue)}
#eco-oraculo .hero .lede{font-family:var(--sans); font-size:clamp(17px,2.2vw,20px); color:var(--ink); max-width:620px; margin:26px 0 0; line-height:1.6; font-weight:400}
#eco-oraculo .hero .lede .dim{color:var(--ink-soft)}
#eco-oraculo .hero .meta{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:34px; font-family:var(--mono); font-size:12.5px; letter-spacing:.02em; color:var(--dim)}
#eco-oraculo .hero .meta b{color:var(--blue); font-weight:600}
#eco-oraculo .map{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:16px; overflow:hidden; margin:46px 0 8px}
#eco-oraculo .map a{background:var(--card); padding:18px 16px 20px; text-decoration:none; display:block; transition:.18s}
#eco-oraculo .map a:hover{background:var(--card-2)}
#eco-oraculo .map .n{font-family:var(--mono); font-size:12px; color:var(--terra); letter-spacing:.06em}
#eco-oraculo .map .t{font-family:var(--serif); font-size:22px; margin-top:6px; line-height:1.1; color:var(--ink)}
#eco-oraculo .map .d{font-family:var(--sans); font-size:12.5px; color:var(--dim); margin-top:6px}
#eco-oraculo .phase{padding:74px 0; border-bottom:1px solid var(--line)}
#eco-oraculo .phase-head{display:flex; align-items:flex-start; gap:22px}
#eco-oraculo .phase-num{font-family:var(--serif); font-size:clamp(40px,5.6vw,62px); line-height:.86; color:var(--terra); flex:none; font-weight:400}
#eco-oraculo .phase-titles h2{font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.8vw,42px); margin:8px 0 0; line-height:1.06; color:var(--ink)}
#eco-oraculo .phase p{font-family:var(--sans); font-size:16.5px; color:var(--ink-soft); margin:18px 0 0; max-width:660px; line-height:1.62}
#eco-oraculo .phase p.tight{margin-top:12px}
#eco-oraculo .phase strong{color:var(--ink); font-weight:700}
#eco-oraculo .consignas{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:32px}
#eco-oraculo .consigna{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 20px 22px; position:relative}
#eco-oraculo .consigna::before{content:""; position:absolute; left:20px; top:0; width:34px; height:3px; background:var(--blue); border-radius:0 0 3px 3px}
#eco-oraculo .consigna h3{font-family:var(--serif); font-size:23px; margin:14px 0 0; font-weight:400; color:var(--ink); line-height:1.12}
#eco-oraculo .consigna p{font-family:var(--sans); font-size:14.5px; color:var(--ink-soft); margin:8px 0 0; max-width:none; line-height:1.55}
#eco-oraculo .consigna.open{border-style:dashed; border-color:var(--terra); background:var(--card-2)}
#eco-oraculo .consigna.open::before{background:var(--terra)}
#eco-oraculo .pull{margin:38px 0 0; padding:26px 30px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--terra); border-radius:16px}
#eco-oraculo .pull p{font-family:var(--serif); font-style:italic; font-size:clamp(21px,2.7vw,27px); line-height:1.36; color:var(--ink); margin:0; max-width:none}
#eco-oraculo .ask{margin:30px 0 0; padding:0; display:grid; gap:0}
#eco-oraculo .ask li{list-style:none; display:flex; gap:14px; align-items:baseline; padding:14px 0; border-top:1px solid var(--line); font-family:var(--sans); font-size:16px; color:var(--ink-soft)}
#eco-oraculo .ask li:last-child{border-bottom:1px solid var(--line)}
#eco-oraculo .ask .mk{color:var(--blue); font-family:var(--serif); font-size:18px; flex:none}
#eco-oraculo .ask b{color:var(--blue-ink); font-weight:700}
#eco-oraculo .mesa{margin:34px 0 0}
#eco-oraculo .mesa-cap{font-family:var(--sans); font-size:13px; color:var(--dim); margin:0 0 16px}
#eco-oraculo .mesa-video{margin:30px auto 0; max-width:720px}
#eco-oraculo .mesa-video video{width:100%; height:auto; display:block; border-radius:14px; border:1px solid var(--line-2); box-shadow:0 14px 34px rgba(40,28,16,.14); background:var(--frame)}
#eco-oraculo .mesa-video figcaption{font-family:var(--sans); font-size:13px; color:var(--dim); margin-top:12px; font-style:italic; text-align:center}
#eco-oraculo .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
#eco-oraculo .flip{aspect-ratio:3/4; perspective:1100px; cursor:pointer; background:transparent; border:0; padding:0; font:inherit; text-align:left}
#eco-oraculo .flip-in{position:relative; width:100%; height:100%; transition:transform .7s cubic-bezier(.2,.7,.2,1); transform-style:preserve-3d}
#eco-oraculo .flip:hover .flip-in, #eco-oraculo .flip:focus-visible .flip-in, #eco-oraculo .flip.flipped .flip-in{transform:rotateY(180deg)}
#eco-oraculo .face{position:absolute; inset:0; backface-visibility:hidden; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 10px 26px rgba(40,28,16,.18)}
#eco-oraculo .face img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04)}
#eco-oraculo .face.front{background:var(--frame)}
#eco-oraculo .face.front img{filter:contrast(1.16) saturate(1.12) brightness(1.02)}
#eco-oraculo .face.back{background:var(--frame); transform:rotateY(180deg); border:1px solid var(--line-2)}
#eco-oraculo .face.back img{filter:contrast(1.24) brightness(.97) saturate(1.1)}
#eco-oraculo .flip--crop .face img{transform:scale(1.14)}
#eco-oraculo .flip-cue{position:absolute; bottom:8px; right:9px; z-index:2; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(34,30,27,.5); padding:3px 7px; border-radius:999px; pointer-events:none; backdrop-filter:blur(2px)}
#eco-oraculo .flip:hover .flip-cue, #eco-oraculo .flip.flipped .flip-cue{opacity:0; transition:opacity .3s}
#eco-oraculo .cta-row{margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; align-items:center}
#eco-oraculo .cta{border:0; cursor:pointer; font-family:var(--sans); font-weight:600; font-size:15px;
    padding:15px 28px; border-radius:999px; background:var(--blue); color:var(--base); transition:.16s; letter-spacing:.01em;
    box-shadow:0 4px 16px rgba(44,57,166,.26);}
#eco-oraculo .cta:hover{background:var(--blue-ink); box-shadow:0 6px 20px rgba(44,57,166,.32)}
#eco-oraculo .cta-note{font-family:var(--sans); font-size:13.5px; color:var(--dim)}
#eco-oraculo .close{padding:80px 0 34px; text-align:center}
#eco-oraculo .close p{font-family:var(--serif); font-style:italic; font-size:clamp(23px,3vw,31px); line-height:1.38; margin:0 auto; max-width:620px; color:var(--ink)}
#eco-oraculo .footer{padding:26px 0 60px; text-align:center; color:var(--dim); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
#eco-oraculo .footer .moon{color:var(--blue)}
#eco-oraculo .reveal{opacity:0; transform:translateY(18px)}
#eco-oraculo .reveal.in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
    border-left:3px solid var(--blue); border-radius:18px; padding:34px 32px;}
@media (max-width:760px){#eco-oraculo .hero{padding:60px 0 48px}
#eco-oraculo .map{grid-template-columns:repeat(2,1fr)}
#eco-oraculo .consignas{grid-template-columns:1fr}
#eco-oraculo .cards{grid-template-columns:1fr 1fr}
#eco-oraculo .phase-head{gap:14px}
#eco-oraculo .topbar{padding:12px 16px; gap:12px}
#eco-oraculo .brand .sub{display:none}
#eco-oraculo .col{padding:0 18px}

  }
@media (max-width:480px){#eco-oraculo .cards{grid-template-columns:1fr}
 }
@media (prefers-reduced-motion:reduce){#eco-oraculo .screen.on{animation:none}
#eco-oraculo .flip-in{transition:none}
#eco-oraculo .reveal{opacity:1; transform:none}

  }


/* estilos que estaban en línea */
#eco-oraculo#eco-oraculo .osk-saa3a2f{margin-top:26px}
#eco-oraculo#eco-oraculo .osk-s9dbee6{margin:34px auto 0; max-width:460px; text-align:center}
#eco-oraculo#eco-oraculo .osk-sd2a703{width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--line); box-shadow:0 14px 34px rgba(40,28,16,.16)}
#eco-oraculo#eco-oraculo .osk-sbc0442{font-size:13px; color:var(--dim); margin-top:12px; font-style:italic}
#eco-oraculo#eco-oraculo .osk-s816a37{margin-top:30px}
#eco-oraculo#eco-oraculo .osk-s062d4a{margin-top:24px}
/* enlaces que antes eran botones o pestañas */
#eco-oraculo .tab{text-decoration:none;display:inline-block}
#eco-oraculo .cta{text-decoration:none;display:inline-block}
@media (prefers-reduced-motion:reduce){#eco-oraculo .reveal{opacity:1;transform:none}}
/* barra superior en el celu: una sola línea limpia */
@media (max-width:560px){#eco-oraculo .topbar{padding:12px 16px; gap:12px}#eco-oraculo .brand .sub{display:none}#eco-oraculo .tab{white-space:nowrap; padding:8px 14px; font-size:12.5px}}