/* Pagina del proyecto "Del rebusque al emprendimiento".
   Usa los mismos colores de style.css (se carga antes) para que se sienta
   parte del sitio. Aqui solo va lo propio de una pagina de lectura larga. */

/* ---------- Idioma: se muestra solo el bloque del idioma activo ---------- */
html[data-idioma="es"] [lang="en"],
html[data-idioma="en"] [lang="es"]{display:none !important}

.pagina-proyecto{background:var(--navy)}

/* ---------- Barra superior ---------- */
.proy-barra{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 22px;
  background:rgba(11,18,32,.92);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(6px);
}
.proy-volver{color:var(--text2);text-decoration:none;font-size:.9rem;font-weight:600}
.proy-volver:hover{color:var(--text)}
.proy-idiomas{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.proy-idiomas button{
  background:transparent;color:var(--text2);border:0;
  padding:6px 13px;font:inherit;font-size:.8rem;font-weight:700;letter-spacing:.06em;
  cursor:pointer;
}
.proy-idiomas button + button{border-left:1px solid var(--border)}
.proy-idiomas button[aria-pressed="true"]{background:var(--cyan);color:#04222a}
.proy-idiomas button:focus-visible,
.proy-volver:focus-visible{outline:2px solid var(--cyan2);outline-offset:2px}

/* ---------- Columna de lectura ---------- */
.proy{
  width:100%;max-width:760px;margin:0 auto;
  padding:0 22px 64px;
  font-size:1.04rem;line-height:1.7;color:var(--text);
}
.proy p{margin:0 0 14px;max-width:66ch}
.proy em{color:var(--cyan2);font-style:italic}
.proy a{color:var(--cyan)}
.proy a:hover{color:var(--cyan2)}

/* ---------- Portada ---------- */
.proy-portada{padding:44px 0 26px}
.proy-ceja{
  margin:0 0 12px;font-size:.76rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
}
.proy-portada h1{
  margin:0 0 18px;
  font-size:clamp(2.1rem,5.6vw,3.25rem);line-height:1.08;font-weight:800;
  letter-spacing:-.015em;color:var(--gold2);text-wrap:balance;
}
.proy-portada h1 .acento{color:var(--cyan)}
.proy-entrada{font-size:1.16rem;line-height:1.6;color:var(--text)}
.proy-entrada b{color:var(--gold2)}

/* ---------- Cifras en vivo ---------- */
.proy-cifras{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
  margin:6px 0 12px;
}
.proy-cifras .cifra{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:14px 14px 13px;display:flex;flex-direction:column;gap:4px;
}
.proy-cifras .cifra > b{
  font-size:1.45rem;line-height:1.15;color:var(--gold2);font-weight:800;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.proy-cifras .cifra > span{font-size:.78rem;line-height:1.35;color:var(--text2)}
.proy-ver-mapa{font-size:.9rem;margin:0 0 6px}

/* ---------- Bloques de texto ---------- */
.proy-bloque{margin-top:46px}
.proy-bloque h2,
.proy-sumarse h2{
  margin:0 0 14px;font-size:1.4rem;line-height:1.25;font-weight:700;
  color:var(--gold2);text-wrap:balance;
}
.proy-subtitulo{margin-top:20px !important;font-weight:600;color:var(--text2)}

.proy-destacado{
  margin-top:22px;padding:16px 18px;border-radius:10px;
  background:rgba(45,212,200,.06);border:1px solid rgba(45,212,200,.28);
}
.proy-destacado h3{margin:0 0 6px;font-size:1rem;color:var(--cyan2)}
.proy-destacado p{margin:0}

/* Ejemplos de lo que alcanza con el capital semilla */
.proy-ejemplos{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
}
.proy-ejemplos li{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;font-size:.95rem;line-height:1.45;
}

/* Criterios: vineta propia en teal */
.proy-criterios{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:9px}
.proy-criterios li{position:relative;padding-left:22px;max-width:66ch}
.proy-criterios li::before{
  content:"";position:absolute;left:3px;top:.62em;
  width:7px;height:7px;border-radius:2px;background:var(--cyan);
}

/* Pasos: es una secuencia real, por eso van numerados */
.proy-pasos{list-style:none;counter-reset:paso;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.proy-pasos li{counter-increment:paso;position:relative;padding-left:46px;min-height:32px;max-width:64ch}
.proy-pasos li::before{
  content:counter(paso);
  position:absolute;left:0;top:-1px;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--cyan);color:var(--cyan);
  font-size:.9rem;font-weight:800;font-variant-numeric:tabular-nums;
}
.proy-pasos li b{color:var(--gold2)}

/* Tabla de presupuesto */
.proy-tabla-marco{overflow-x:auto;margin-bottom:12px}
.proy-tabla{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.98rem}
.proy-tabla th{
  text-align:left;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan);font-weight:700;padding:0 12px 10px;border-bottom:1px solid var(--border);
}
.proy-tabla td{padding:11px 12px;border-bottom:1px solid var(--border)}
.proy-tabla .num{text-align:right;white-space:nowrap}
.proy-tabla td.num{color:var(--gold2);font-weight:700}
.proy-nota{font-size:.88rem !important;line-height:1.55;color:var(--text2)}

/* Cierre con llamado a la accion */
.proy-sumarse{
  margin-top:52px;padding:22px 22px 20px;border-radius:12px;
  background:var(--navy2);border:1px solid rgba(212,175,106,.35);
}
.proy-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:6px}
.proy-acciones .btn-whatsapp{margin-left:0;font-size:.95rem;padding:11px 20px}
.proy-enlace-secundario{font-size:.92rem;font-weight:600}

.proy-pie{
  margin-top:40px;padding-top:16px;border-top:1px solid var(--border);
  font-size:.82rem;color:var(--text2);
}

/* ---------- Movil ---------- */
@media (max-width:640px){
  .proy-barra{padding:9px 14px}
  .proy{padding:0 16px 48px;font-size:1rem}
  .proy-portada{padding:30px 0 20px}
  .proy-entrada{font-size:1.06rem}
  .proy-cifras{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .proy-cifras .cifra > b{font-size:1.25rem}
  .proy-ejemplos{grid-template-columns:1fr}
  .proy-bloque{margin-top:38px}
  .proy-sumarse{padding:18px 16px}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;transition:none !important}
}

/* ---------- Impresion / Guardar como PDF ---------- */
@media print{
  html,body,.pagina-proyecto{background:#fff !important;color:#111 !important}
  .proy-barra,.proy-ver-mapa,.proy-acciones{display:none !important}
  .proy{max-width:none;padding:0;color:#111}
  .proy-portada h1,.proy-bloque h2,.proy-sumarse h2,
  .proy-cifras .cifra > b,.proy-tabla td.num,.proy-pasos li b,.proy-entrada b{color:#7a5a1c !important}
  .proy-portada h1 .acento,.proy-ceja,.proy-tabla th,.proy-destacado h3,.proy em{color:#0f6f69 !important}
  .proy-cifras .cifra,.proy-ejemplos li,.proy-sumarse,.proy-destacado{
    background:#fff !important;border-color:#bbb !important;
  }
  .proy-cifras .cifra > span,.proy-nota,.proy-pie{color:#444 !important}
  .proy-pasos li::before{border-color:#0f6f69;color:#0f6f69}
  .proy-criterios li::before{background:#0f6f69}
  .proy-bloque,.proy-sumarse{break-inside:avoid}
  .proy a{color:#0f6f69}
}