/* ============================================================ ECEP · Dossier de Estudio — sistema de diseño Estudio profundo, desde cero, visual. Educación Básica Generalista. Tipografías ya cargadas por el layout: Poppins (display), Inter (texto), Montserrat. ============================================================ */ :root { --ec-ink: #0f172a; /* texto principal */ --ec-ink-soft: #334155; /* texto secundario */ --ec-muted: #64748b; /* texto tenue (sigue ≥4.5:1 sobre blanco) */ --ec-line: #e2e8f0; /* bordes */ --ec-bg: #f6f8fb; /* fondo de página (gris muy frío, no crema) */ --ec-card: #ffffff; --ec-radius: 16px; --ec-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12); --ec-shadow-lg: 0 24px 60px -24px rgba(15,23,42,.28); /* acentos por dominio */ --d-leng: #4f46e5; --d-leng-soft: #eef2ff; --d-leng-ink:#3730a3; --d-mat: #0369a1; --d-mat-soft: #e0f2fe; --d-mat-ink:#075985; --d-hist: #b45309; --d-hist-soft: #fef3c7; --d-hist-ink:#92400e; --d-cien: #047857; --d-cien-soft: #d1fae5; --d-cien-ink:#065f46; --d-parv: #be185d; --d-parv-soft: #fce7f3; --d-parv-ink:#9d174e; --d-dif: #7c3aed; --d-dif-soft: #ede9fe; --d-dif-ink:#5b21b6; } /* el acento activo lo fija cada página con class="dom-leng|dom-mat|dom-hist|dom-cien" en o wrapper */ .dom-leng { --acc: var(--d-leng); --acc-soft: var(--d-leng-soft); --acc-ink: var(--d-leng-ink); } .dom-mat { --acc: var(--d-mat); --acc-soft: var(--d-mat-soft); --acc-ink: var(--d-mat-ink); } .dom-hist { --acc: var(--d-hist); --acc-soft: var(--d-hist-soft); --acc-ink: var(--d-hist-ink); } .dom-cien { --acc: var(--d-cien); --acc-soft: var(--d-cien-soft); --acc-ink: var(--d-cien-ink); } .dom-parv { --acc: var(--d-parv); --acc-soft: var(--d-parv-soft); --acc-ink: var(--d-parv-ink); } .dom-dif { --acc: var(--d-dif); --acc-soft: var(--d-dif-soft); --acc-ink: var(--d-dif-ink); } /* identidad del portal — hub/índice del dossier: petróleo-teal (armoniza con /evaluaciones/) */ .dom-ecep { --acc:#0e7d8a; --acc-soft:#e4f1f2; --acc-ink:#0a444e; } .ec { background: var(--ec-bg); color: var(--ec-ink); font-family: 'Inter', system-ui, sans-serif; line-height: 1.7; } .ec * { box-sizing: border-box; } .ec-wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; } .ec h1, .ec h2, .ec h3, .ec h4 { font-family: 'Poppins','Inter',sans-serif; color: var(--ec-ink); line-height: 1.2; letter-spacing: -0.02em; } .ec p { max-width: 72ch; } /* texto justificado en todo el dossier (de línea a línea, ordenado) */ .ec-card p, .ec-card li, .note p, .note li, .ec-lectura .cuerpo p, .ec-caso .escenario, .ec-caso .a, .ec-check .a, .ec-section > .ec-wrap > p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .ec a { color: var(--acc, #4f46e5); } /* ---------- Hero del dominio ---------- */ .ec-hero { position: relative; color:#fff; padding: 56px 0 64px; overflow:hidden; background: linear-gradient(135deg, var(--acc,#4f46e5), color-mix(in srgb, var(--acc,#4f46e5) 62%, #0f172a)); } .ec-hero .ec-wrap { position: relative; z-index:2; } .ec-hero .eyebrow { display:inline-flex; align-items:center; font: 700 12px/1 'Poppins',sans-serif; letter-spacing: .12em; text-transform: uppercase; color:#fff; background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.30); padding:6px 13px; border-radius:999px; } .ec-hero h1 { color:#fff; font-size: clamp(30px, 5vw, 46px); margin: 14px 0 12px; text-wrap: balance; } .ec-hero p { color: rgba(255,255,255,.92); max-width: 60ch; font-size: 17px; } .ec-hero .meta { display:flex; flex-wrap:wrap; gap: 10px; margin-top: 22px; } .ec-chip { display:inline-flex; align-items:center; gap:7px; background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff; padding: 7px 13px; border-radius: 999px; font: 600 13px 'Inter'; } /* ---------- Navegación sticky por subtemas ---------- */ .ec-toc { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(10px); border-bottom:1px solid var(--ec-line); } .ec-toc .ec-wrap { display:flex; gap: 6px; overflow-x:auto; padding-top:10px; padding-bottom:10px; scrollbar-width:thin; } .ec-toc a { white-space:nowrap; font: 600 13.5px 'Inter'; color: var(--ec-muted); text-decoration:none; padding: 7px 13px; border-radius: 999px; transition: all .15s ease; } .ec-toc a:hover { color: var(--acc-ink); background: var(--acc-soft); } .ec-toc a.active { color:#fff; background: var(--acc); } .ec-toc a.ec-toc-back { background: var(--acc); color:#fff; font-weight:700; flex:0 0 auto; } .ec-toc a.ec-toc-back:hover { background: var(--acc-ink); color:#fff; } /* ---------- Sección / subtema ---------- */ .ec-section { padding: 40px 0; border-top: 1px solid var(--ec-line); } .ec-section:first-of-type { border-top: 0; } .ec-section > .ec-wrap > h2 { font-size: 27px; margin: 0 0 6px; } .ec-kicker { display:inline-flex; align-items:center; gap:8px; font: 700 12px 'Poppins'; letter-spacing:.1em; text-transform:uppercase; color: var(--acc-ink); background: var(--acc-soft); padding:5px 11px; border-radius:999px; margin-bottom: 14px; } /* ---------- Tarjeta de indicador (la unidad de estudio) ---------- */ .ec-card { background: var(--ec-card); border:1px solid var(--ec-line); border-radius: var(--ec-radius); box-shadow: var(--ec-shadow); margin: 22px 0; overflow:hidden; } .ec-card > header { padding: 20px 24px; border-bottom:1px solid var(--ec-line); display:flex; gap:14px; align-items:flex-start; background: linear-gradient(180deg, var(--acc-soft), transparent); } .ec-card > header .ix { flex:0 0 auto; width:34px; height:34px; border-radius:10px; background: var(--acc); color:#fff; font: 800 15px 'Poppins'; display:grid; place-items:center; } .ec-card > header h3 { font-size: 19px; margin:2px 0 0; } .ec-card .body { padding: 22px 24px; } .ec-card .body > *:first-child { margin-top: 0; } .ec-card h4 { font-size: 16px; margin: 22px 0 8px; color: var(--ec-ink); } .ec-card p, .ec-card li { color: var(--ec-ink-soft); font-size: 16px; } .ec-card ul, .ec-card ol { padding-left: 22px; } .ec-card li { margin: 6px 0; } .ec strong { color: var(--ec-ink); font-weight: 700; } /* ---------- Callouts (sin barra lateral: caja completa + chip rotulado) ---------- */ .note { border:1px solid var(--ec-line); border-radius: 12px; padding: 16px 18px 14px; margin: 18px 0; background:#fff; } .note .lbl { display:inline-flex; align-items:center; gap:7px; font: 700 12.5px 'Poppins'; letter-spacing:.04em; text-transform:uppercase; padding:3px 0; margin-bottom: 8px; } .note p:last-child, .note ul:last-child, .note ol:last-child { margin-bottom: 0; } .note.base { background: var(--acc-soft); border-color: color-mix(in srgb, var(--acc) 24%, var(--ec-line)); } .note.base .lbl { color: var(--acc-ink); } .note.ejemplo{ background:#f0fdf4; border-color:#bbf7d0; } .note.ejemplo .lbl{ color:#15803d; } .note.ojo { background:#fff7ed; border-color:#fed7aa; } .note.ojo .lbl{ color:#c2410c; } .note.prueba { background:#eff6ff; border-color:#bfdbfe; } .note.prueba .lbl{ color:#1d4ed8; } .note.dato { background:#faf5ff; border-color:#e9d5ff; } .note.dato .lbl{ color:#7e22ce; } /* ---------- Figura / imagen explicativa (Nano Banana) ---------- */ .ec-fig { margin: 22px 0; border:1px solid var(--ec-line); border-radius: 14px; overflow:hidden; background:#fff; } .ec-fig img { display:block; width:100%; height:auto; } .ec-fig figcaption { font: 500 14px 'Inter'; color: var(--ec-muted); padding: 11px 16px; border-top:1px solid var(--ec-line); } .ec-fig figcaption b { color: var(--ec-ink-soft); } /* ---------- Caja de lectura: textos reales para estudiar ---------- */ .ec-lectura { background:#fffdf6; border:1px solid #ece6d6; border-radius:14px; padding:18px 22px 18px; margin:20px 0; } .ec-lectura .tt { display:inline-flex; align-items:center; gap:7px; font:700 12px 'Poppins',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#9a7b2e; margin-bottom:10px; } .ec-lectura .cuerpo { font-family:Georgia,'Times New Roman',serif; font-size:16.5px; line-height:1.75; color:#3a3326; } .ec-lectura .cuerpo p { margin:0 0 11px; max-width:none; color:#3a3326; } .ec-lectura .cuerpo p:last-child { margin-bottom:0; } .ec-lectura .cuerpo h5 { font-family:Georgia,serif; font-size:18px; margin:0 0 10px; color:#2a2316; } .ec-lectura .fuente { font:500 13px 'Inter',sans-serif; color:var(--ec-muted); margin-top:12px; padding-top:10px; border-top:1px solid #ece6d6; } /* pregunta tipo CASO real ECEP (más densa que el auto-chequeo simple) */ .ec-caso { border:1px solid color-mix(in srgb, var(--acc) 30%, var(--ec-line)); border-radius:12px; padding:16px 18px; margin:18px 0; background:linear-gradient(180deg, var(--acc-soft), #fff 60%); } .ec-caso .tag { display:inline-flex; align-items:center; gap:7px; font:700 11px 'Poppins',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--acc-ink); margin-bottom:9px; } .ec-caso .escenario { font-size:15.5px; color:var(--ec-ink); margin-bottom:10px; } .ec-caso ol { margin:0 0 4px; padding-left:0; list-style:none; } .ec-caso ol li { padding:7px 12px; border:1px solid var(--ec-line); border-radius:9px; margin:6px 0; background:#fff; font-size:14.5px; color:var(--ec-ink-soft); } .ec-caso ol li b { color:var(--acc-ink); } .ec-caso .a { display:none; margin-top:12px; padding-top:12px; border-top:1px solid var(--ec-line); color:var(--ec-ink-soft); font-size:14.5px; } .ec-caso.open .a { display:block; } .ec-caso button.reveal { font:600 14px 'Inter',sans-serif; color:var(--acc-ink); background:#fff; border:1px solid color-mix(in srgb,var(--acc) 30%, var(--ec-line)); padding:7px 14px; border-radius:9px; cursor:pointer; } .ec-caso.open button.reveal { display:none; } .ec-caso-hint { font:600 13px 'Inter',sans-serif; color:var(--acc-ink); display:flex; align-items:center; gap:7px; margin:2px 0 9px; } .ec-caso ol li.opt { cursor:pointer; transition:background .12s ease, border-color .12s ease, transform .06s ease; } .ec-caso ol li.opt:hover { border-color:var(--acc); background:var(--acc-soft); } .ec-caso ol li.opt:active { transform:scale(.995); } .ec-caso.answered ol li.opt { cursor:default; } .ec-caso.answered ol li.opt:hover { border-color:var(--ec-line); background:#fff; } .ec-caso ol li.correcta { border-color:#16a34a !important; background:#f0fdf4 !important; } .ec-caso ol li.correcta b { color:#15803d; } .ec-caso ol li.elegida-mal { border-color:#dc2626 !important; background:#fef2f2 !important; } .ec-caso ol li.elegida-mal b { color:#b91c1c; } .ec-caso .veredicto { display:flex; align-items:center; gap:8px; font:600 14.5px 'Inter',sans-serif; margin:14px 0 0; padding:11px 14px; border-radius:10px; } .ec-caso .veredicto.ok { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; } .ec-caso .veredicto.no { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; } /* tabla */ .ec-card table { width:100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; } .ec-card th, .ec-card td { border:1px solid var(--ec-line); padding: 9px 12px; text-align:left; vertical-align:top; } .ec-card thead th { background: var(--acc-soft); color: var(--acc-ink); font-family:'Poppins'; font-size:13.5px; } /* ---------- Auto-chequeo (interactivo) ---------- */ .ec-check { border:1px dashed color-mix(in srgb, var(--acc) 45%, var(--ec-line)); border-radius:12px; padding: 16px 18px; margin: 18px 0; background: #fff; } .ec-check .q { font-weight: 600; color: var(--ec-ink); margin-bottom: 10px; } .ec-check .q .lbl { display:inline-flex; align-items:center; gap:6px; font:700 12px 'Poppins'; letter-spacing:.05em; text-transform:uppercase; color: var(--acc-ink); margin-right:8px; } .ec-check button.reveal { font: 600 14px 'Inter'; color: var(--acc-ink); background: var(--acc-soft); border:1px solid color-mix(in srgb,var(--acc) 30%, var(--ec-line)); padding:7px 14px; border-radius:9px; cursor:pointer; } .ec-check .a { display:none; margin-top: 12px; padding-top: 12px; border-top:1px solid var(--ec-line); color: var(--ec-ink-soft); } .ec-check.open .a { display:block; } .ec-check.open button.reveal { display:none; } /* ---------- progreso "estudiado" ---------- */ .ec-done { display:inline-flex; align-items:center; gap:8px; margin-left:auto; font:600 13px 'Inter'; color:var(--ec-muted); background:#fff; border:1px solid var(--ec-line); padding:6px 12px; border-radius:999px; cursor:pointer; transition: all .15s; } .ec-done:hover { border-color: var(--acc); color: var(--acc-ink); } .ec-card.studied { opacity: .96; } .ec-card.studied > header { background: linear-gradient(180deg,#ecfdf5,transparent); } .ec-card.studied .ec-done { color:#15803d; border-color:#86efac; background:#f0fdf4; } .ec-progress { position: sticky; bottom: 16px; margin: 28px auto 0; max-width: 360px; z-index: 20; background:#fff; border:1px solid var(--ec-line); border-radius:999px; box-shadow: var(--ec-shadow-lg); padding: 9px 16px; display:flex; align-items:center; gap:12px; font:600 13px 'Inter'; color:var(--ec-ink-soft); } .ec-progress .bar { flex:1; height:7px; background: var(--ec-line); border-radius:999px; overflow:hidden; } .ec-progress .bar > span { display:block; height:100%; width:0; background: var(--acc); border-radius:999px; transition: width .3s ease; } /* ---------- footer de dominio / navegación entre dominios ---------- */ .ec-foot { padding: 44px 0 64px; } .ec-foot .grid { display:grid; gap:14px; grid-template-columns: 1fr 1fr; } .ec-navcard { display:flex; flex-direction:column; gap:4px; background:#fff; border:1px solid var(--ec-line); border-radius:14px; padding:18px 20px; text-decoration:none; color:var(--ec-ink); box-shadow:var(--ec-shadow); transition:transform .15s, box-shadow .15s; } .ec-navcard:hover { transform: translateY(-2px); box-shadow: var(--ec-shadow-lg); } .ec-navcard small { color:var(--ec-muted); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:11px; } .ec-navcard b { font-family:'Poppins'; font-size:17px; } @media (max-width: 640px){ .ec-foot .grid { grid-template-columns: 1fr; } .ec-hero { padding: 40px 0 46px; } .ec-card .body { padding: 18px; } } @media (prefers-reduced-motion: reduce){ * { transition: none !important; } }