/* =========================
   zero2hero · OWA-like · Off-White (FINAL)
   ========================= */

/* ----- Design tokens (off-white + neón) ----- */
:root{
  /* Base */
  --bg: #f8f9fa;            /* off-white cálido */
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --text-1: #111317;
  --text-2: #5a5f67;
  --muted: #777c85;
  --border: #e6e1d7;

  /* Brand */
  --primary: #1f2a44;       /* azul muy oscuro para detalles */
  --primary-2: #0ea5e9;
  --primary-ink: #ffffff;
  --focus: #cbd5ff;

  /* Efectos */
  --neon: #e8ff3a;          /* amarillo lima para CTAs en hover */

  --grad-1: linear-gradient(135deg, #1f2a44 0%, #0ea5e9 100%);
  --grad-soft: radial-gradient(800px 400px at 15% -20%, rgba(31,42,68,.06), transparent 60%),
               radial-gradient(600px 300px at 85% -10%, rgba(14,165,233,.06), transparent 55%);

  /* Radii & Shadows */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 4px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --shadow-md: 0 10px 24px rgba(0,0,0,.08);

  /* Typography */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Fondos hero split (reemplaza por tus imágenes si gustas) */
  --hero-left: url('/static/images/hero-left.jpg');
  --hero-right: url('/static/images/hero-right.jpg');
}

/* ----- Base reset ----- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.z2h-body{
  margin:0; background: var(--bg);
  color:var(--text-1);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
#main{ padding-top:0; }
.container{ max-width:1120px; }

/* Selection */
::selection{ background: rgba(31,42,68,.16); }

/* Links (sin subrayado global en hover) */
a{ color: var(--primary); text-decoration:none; transition: color .18s ease; }
a:hover{ color:#0b172e; text-decoration:none; }

/* =========================
   NAV · OWA-like
   ========================= */
.z2h-nav{
  position: sticky; top: 0; z-index: 1030;
  background: rgba(10,12,20,.95);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 26px rgba(0,0,0,.28);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.z2h-nav.nav-at-top{
  background: rgba(10,12,20,.95);
  border-bottom-color: rgba(255,255,255,.12);
  box-shadow: 0 8px 26px rgba(0,0,0,.28);
}
.z2h-nav.nav-at-top .navbar .nav-link{
  color:rgba(240,242,246,.9);
  text-shadow:none;
}
.z2h-nav.nav-at-top .z2h-brand--owa{
  color:#f1f5f9 !important;
  text-shadow:none;
}
.z2h-nav .container{ padding-top:.4rem; padding-bottom:.4rem; }

.z2h-brand--owa{
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color:#e5e7eb !important;
}

.navbar .nav-link{
  position: relative;
  padding:.45rem .65rem; margin:0 .05rem;
  color:rgba(229,231,235,.82);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.06em;
  border-radius:10px;
  transition: color .16s ease, background-color .16s ease, transform .16s ease;
  text-decoration:none;
}
.z2h-link--owa{ text-transform:uppercase; }

.navbar .nav-link::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.3rem; height:2px;
  background: linear-gradient(90deg, rgba(232,255,58,.85), rgba(14,165,233,.9));
  border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
.navbar .nav-link:hover{
  color:#fff; background:rgba(255,255,255,.04); transform:translateY(-1px);
}
.navbar .nav-link:hover::after{ transform:scaleX(1); }
.navbar .nav-link.active::after,
.navbar .nav-link[aria-current="page"]::after{ transform:scaleX(1); }

.navbar-toggler{
  border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:.45rem .55rem; line-height:1;
}
.navbar-toggler-icon{
  width:1.3rem; height:1.3rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 16 16'%3E%3Cpath stroke='%23e5e7eb' stroke-width='1.6' stroke-linecap='round' d='M2 4h12M2 8h12M2 12h12'/%3E%3C/svg%3E");
}
@media (max-width:991.98px){
  #nav{
    padding:1.1rem;
    background:rgba(17,24,39,.95);
    border:0;
    position:fixed;
    top:0; left:0;
    width:75vw; max-width:360px;
    height:100vh;
    z-index:1029;
    display:flex;
    flex-direction:column;
    gap:1rem;
    box-shadow: 12px 0 30px rgba(0,0,0,.28);
  }
  #nav:not(.show){ display:none; }
  .navbar-collapse{ transition: transform .2s ease, opacity .2s ease; }
  .navbar-collapse.show{
    display:flex !important;
    height:100vh;
    overflow:auto;
  }
  .navbar-collapse.collapsing{
    height:100vh;
    display:flex !important;
  }
  .navbar .nav-link{ padding:.7rem .6rem; margin:.1rem 0; border-radius:10px; }
  .navbar-nav{ width:100%; gap:.3rem; }
  .navbar .nav-link{ font-size:1rem; letter-spacing:.06em; }
  .navbar .nav-link::after{ display:none; }
  .navbar-toggler{ position:relative; z-index:1031; }
  body.z2h-body{ overflow-x:hidden; }
}

/* =========================
   Mobile polish (≤640px)
   ========================= */
@media (max-width: 640px){
  body.z2h-body{
    background:#f7f4ee;
  }
  .container{ padding-left:0.85rem; padding-right:0.85rem; }
  .z2h-landing-hero{ padding:2.4rem 1rem 2rem; }
  .z2h-hero-title{ font-size:1.65rem; }
  .z2h-hero-sub{ font-size:1rem; }
  .z2h-hero-badges{ gap:.35rem; }
  .z2h-hero-badges .z2h-badge{ padding:.3rem .55rem; font-size:.8rem; }
  .btn{ padding:.55rem .9rem; font-size:.9rem; letter-spacing:.08em; }
  .btn-cta{ box-shadow:0 10px 22px rgba(0,0,0,.18); }
  .btn-sm{ padding:.45rem .75rem; }
  .z2h-pillar{ padding:1.05rem 1rem 1rem; }
  .z2h-pillar__title{ letter-spacing:.14em; }
  .z2h-pillar__meta{ gap:.45rem; }
  .z2h-pillar__list li{ margin:.35rem 0; }
  .z2h-communities__head .h4{ font-size:1.1rem; }
  .z2h-comm-item{ grid-template-columns:48px 1fr; grid-template-rows:auto auto; }
  .z2h-comm-item .btn{ grid-column:1 / -1; width:100%; justify-content:center; }
  .z2h-comm-icon{ width:48px; height:48px; }
  .z2h-devcard{
    flex:0 0 96%;
    margin:0 auto;
    min-height:200px;
    padding:1rem 0.9rem 1.05rem;
  }
  .z2h-devcard__title{ font-size:1rem; }
  .z2h-devcard__desc{ font-size:.93rem; }
  .z2h-devs-rail{ padding:.3rem .4rem .5rem; gap:.75rem; }
  .z2h-devs-showcase{ padding:1.4rem 1rem 1.5rem; }
  .z2h-devs-nav{ width:40px; height:40px; }
  .z2h-tile{
    border-radius:14px;
    box-shadow:0 4px 18px rgba(0,0,0,.08);
  }
  .z2h-tile__content--card{ padding:12px 14px 12px; }
  .z2h-tile__title{ font-size:1.05rem; }
  .z2h-tile__desc{ font-size:.95rem; }
  .z2h-card-3d{ min-height:360px; }
  .z2h-card-3d__inner{ min-height:360px; }
  .z2h-card-back__list{ font-size:.9rem; }
  .z2h-card-back__footer .btn{ width:100%; justify-content:center; }
  .z2h-card-back__footer{ flex-direction:row-reverse; gap:.4rem; }
  .z2h-flip-btn{ width:32px; height:32px; border-radius:9px; }
  .z2h-flip-btn--inline{ width:34px; height:34px; }
  .z2h-flip-btn--ghost{ padding:.3rem .5rem; }
  .z2h-hero-divider{ margin-bottom:1.6rem; }
}

/* =========================
   Buttons
   ========================= */
.btn{
  border-radius: var(--radius);
  padding:.6rem 1rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition: all .18s ease;
}
.btn:active{ transform: translateY(1px); }

.btn-cta{
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color:#fff; border:1px solid #1e55c9;
  box-shadow:0 10px 24px rgba(37,99,235,.18);
}
.btn-cta:hover{ filter:brightness(1.04); color:#fff; }

.btn-owa-outline{
  background:transparent; color:#111; border:1px solid #cfd2d9;
}
.btn-owa-outline:hover{ background:var(--neon); border-color:var(--neon); color:#0b0b0b; }

.btn-ghost{ background:#fff; border:1px solid var(--border); color:var(--text-1); }
.btn-ghost:hover{ background:#f5f5f5; }
.btn-outline{ background:#fff; border:1px solid #cfd7e3; color:#111827; }
.btn-outline:hover{ border-color:var(--neon); background:var(--neon); color:#0b0b0b; }

/* ----- Cards & Dividers ----- */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }

.z2h-divider{
  width:100%; height:1px;
  background:linear-gradient(90deg, rgba(17,24,39,0), rgba(17,24,39,.18), rgba(17,24,39,0));
  opacity:.45;
}

/* =========================
   HERO · Split (Landing) + Course hero compacto
   ========================= */
.z2h-landing-hero,
.z2h-course-hero{
  position:relative; overflow:hidden; isolation:isolate;
  border:none; border-radius:0;
  padding: clamp(2.2rem, 8vw, 5rem) 1rem;
  background:#000; color:#fff;
}
.z2h-landing-hero{ min-height:72vh; margin:0; }
.z2h-course-hero{
  min-height: clamp(220px, 28vw, 380px);
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border-radius:20px;
}

.z2h-landing-hero.z2h-hero--split::before,
.z2h-landing-hero.z2h-hero--split::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-size:cover; background-position:center; opacity:.9;
}
.z2h-landing-hero.z2h-hero--split::before{
  right:50%; width:50%;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.55)),
    linear-gradient(90deg, rgba(0,0,0,.28), transparent),
    var(--hero-left);
  border-top-left-radius:16px; border-bottom-left-radius:16px;
}
.z2h-landing-hero.z2h-hero--split::after{
  left:50%; width:50%;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.48)),
    linear-gradient(-90deg, rgba(0,0,0,.22), transparent),
    var(--hero-right);
  border-top-right-radius:16px; border-bottom-right-radius:16px;
}

@keyframes z2hHeroFlow{
  0%{ background-position:0% 40%, 100% 60%, 0 0; }
  50%{ background-position:100% 60%, 0% 40%, 20% 0; }
  100%{ background-position:0% 40%, 100% 60%, 0 0; }
}

.z2h-hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(140% 200% at 15% 10%, rgba(232,255,58,.16), transparent 60%),
    radial-gradient(160% 220% at 85% 0%, rgba(14,165,233,.26), transparent 60%),
    linear-gradient(120deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  background-size:180% 180%, 180% 180%, 100% 100%;
  opacity:.95;
  animation:z2hHeroFlow 14s ease-in-out infinite;
}
.z2h-hero-divider{
  position:relative;
  height:18px;
  margin:-4px auto 2.2rem;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.z2h-hero-divider::before{
  content:"";
  width:92%; height:2px;
  background:linear-gradient(90deg, rgba(50,45,41,.14) 0%, rgba(50,45,41,.08) 50%, rgba(50,45,41,.14) 100%);
}
.z2h-hero-divider::after{
  content:"";
  position:absolute;
  width:92%; height:2px;
  background:#111;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform 9.0s ease;
}
.z2h-hero-divider.is-active::after{
  transform:scaleX(1);
}

.z2h-hero-full{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:-3rem; /* neutraliza padding del main */
  border-radius:0;
  background:
    radial-gradient(120% 200% at 0% 20%, rgba(14,165,233,.28), transparent 55%),
    radial-gradient(120% 200% at 100% 10%, rgba(232,255,58,.16), transparent 55%),
    linear-gradient(135deg, #040812 0%, #0a1022 55%, #050914 100%);
  box-shadow: inset 0 -20px 60px rgba(0,0,0,.28);
}
.z2h-hero-inner{
  max-width:1100px;
  margin:0 auto;
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 3vw, 2rem);
  position:relative;
  z-index:1;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(4px) saturate(130%);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 18px;
}

.z2h-hero-title,
.z2h-course-title{
  position:relative; z-index:1; margin:0 0 .6rem;
  letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  text-shadow:0 12px 32px rgba(0,0,0,.45);
}
.z2h-gradient-text{ background:none; color:#fff; }
.z2h-hero-sub, .z2h-course-sub{
  position:relative; z-index:1; color:rgba(255,255,255,.9);
  max-width:720px; margin-left:auto; margin-right:auto;
  font-size:1.05rem;
}
.z2h-course-hero .text-muted{ color:rgba(255,255,255,.82) !important; }
.z2h-hero-ctas, .z2h-hero-badges{ position:relative; z-index:1; }
.z2h-hero-badges .z2h-badge{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.22);
  color:#fff;
}

.z2h-hero-ctas .btn-cta{
  background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.65); color:#fff;
  box-shadow:0 14px 32px rgba(0,0,0,.24);
}
.z2h-hero-ctas .btn-cta:hover{ background:var(--neon); color:#0b0b0b; border-color:var(--neon); box-shadow:0 18px 36px rgba(0,0,0,.28); }
.z2h-hero-ctas .btn-ghost{ background:#fff; border:1px solid var(--border); color:#111; }
.z2h-hero-ctas .btn-ghost:hover{ background:#f5f5f5; }

@media (max-width:575.98px){
  .z2h-landing-hero, .z2h-course-hero{ min-height:62vh; padding:2.2rem 1rem 1.6rem; }
  .z2h-landing-hero.z2h-hero--split::before{
    opacity:.85;
    right:0; width:100%;
    background-image:
      linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.55)),
      linear-gradient(90deg, rgba(0,0,0,.28), transparent),
      var(--hero-left);
    border-radius:14px;
  }
  .z2h-landing-hero.z2h-hero--split::after{ display:none; }
  .z2h-hero-title{ letter-spacing:.12em; text-shadow:0 8px 24px rgba(0,0,0,.3); }
  .z2h-hero-sub{ font-size:1.02rem; }
}

/* =========================
   PILLARS · Tiles OWA
   ========================= */
.z2h-pillar{
  position:relative; display:grid; grid-template-rows:auto 1fr auto; gap:.85rem;
  border:1px solid var(--border); background:var(--surface);
  border-radius:16px; padding:1.25rem 1.2rem 1.2rem;
  box-shadow:var(--shadow-sm); overflow:hidden; height:100%;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.z2h-pillar:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:#dfe4ee; }
.z2h-pillar__bg{ position:absolute; inset:-30% -30% auto -30%; height:65%; background:var(--grad-soft); filter:blur(14px); z-index:0; }
.z2h-pillar__head{ position:relative; z-index:1; display:grid; gap:.25rem; }
.z2h-pillar__title{ margin:0; font-weight:800; color:#fff; letter-spacing:.18em; text-transform:uppercase; }
.z2h-pillar__sub{ margin:0; color:rgba(255,255,255,.92); }
.z2h-pillar__list{ position:relative; z-index:1; list-style:none; padding:0; margin:.25rem 0 .5rem; }
.z2h-pillar__list li{ position:relative; padding-left:1.45rem; margin:.45rem 0; color:rgba(255,255,255,.92); }
.z2h-pillar__list li::before{ content:""; position:absolute; left:0; top:.35rem; width:.95rem; height:.95rem; border-radius:50%; background:var(--neon); }
.z2h-pillar__actions{ position:relative; z-index:1; display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
@media (min-width:768px){ .z2h-pillar__actions{ justify-content:flex-start; } }

.z2h-pillar--tile{ color:#fff; background:#111; }
.z2h-pillar--academy{
  background-image:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.75)),
    url('/static/images/academy-cover.jpg');
  background-size:cover; background-position:center;
}
.z2h-pillar--devs{
  background-image:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.75)),
    url('/static/images/developments-cover.jpg');
  background-size:cover; background-position:center;
}
.z2h-pillar--elevated{
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 26px 48px rgba(0,0,0,.32);
  overflow:hidden;
}
.z2h-pillar--elevated::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 160% at 20% 0%, rgba(255,255,255,.08), transparent 55%),
             radial-gradient(140% 160% at 90% 10%, rgba(14,165,233,.12), transparent 60%);
  opacity:.8; z-index:0;
}
.z2h-pillar__eyebrow{ display:block; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:.35rem; }
.z2h-pillar__meta{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.6rem; margin:.4rem 0 1rem; }
.z2h-meta__big{ font-weight:900; font-size:1.3rem; color:#fff; }
.z2h-meta__label{ font-size:.85rem; color:rgba(255,255,255,.85); }

/* =========================
   COMUNIDADES — Rail
   ========================= */
.z2h-communities__head .z2h-subtle{ color:var(--text-2); }
.z2h-comm-rail{
  border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm);
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(239,233,225,.96));
}
.z2h-comm-item{
  display:grid; grid-template-columns:56px 1fr auto; gap:1rem; align-items:center;
  padding:1.1rem 1.2rem; border-top:1px solid var(--border);
}
.z2h-comm-item:first-child{ border-top:0; }
.z2h-comm-item:hover{ background:#f4efe8; }
.z2h-comm-icon{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center; color:#1e3a8a;
  background: radial-gradient(160% 100% at 50% 0%, rgba(37,99,235,.18), rgba(14,165,233,.12) 70%, rgba(14,165,233,0) 100%), #fff;
  border:1px solid #dfe6f2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 18px rgba(16,24,40,.06);
}
.z2h-comm-title{ margin:0 0 .1rem; font-weight:900; font-size:1.05rem; color:var(--text-1); }
.z2h-comm-text{ margin:0; color:var(--text-2); line-height:1.5; }
.z2h-comm-item .btn-owa-outline{ min-width:130px; }
.z2h-comm-meta{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.35rem; }
.z2h-comm-badge{
  display:inline-flex; align-items:center;
  padding:.2rem .55rem; border-radius:999px;
  background:rgba(255,255,255,.85); color:var(--text-1);
  border:1px solid var(--border);
  font-weight:700; font-size:.78rem; letter-spacing:.04em;
}
.z2h-comm-badge--accent{
  background:var(--neon); border-color:var(--neon); color:#0b0b0b;
}

/* Iconos (masks) */
.i{ width:22px; height:22px; background: currentColor; }
.i--chat{ mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H9l-5 5v-5H5a3 3 0 0 1-3-3V5z'/%3E%3C/svg%3E") center/contain no-repeat; }
.i--briefcase{ mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h4a2 2 0 0 1 2 2v2h3a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h3V4a2 2 0 0 1 2-2zm4 4V4h-4v2h4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.i--chart{ mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h2v18H3V3zm8 8h2v10h-2V11zm8-6h2v16h-2V5z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* =========================
   DESARROLLOS / PROJECTS RAIL
   ========================= */
.z2h-eyebrow{ letter-spacing:.18em; font-weight:800; color:var(--text-2); }
.z2h-devs-showcase{
  border:1px solid var(--border);
  border-radius:22px;
  background: var(--surface);
  padding:1.8rem 1.25rem 1.9rem;
  box-shadow:0 24px 52px rgba(0,0,0,.16);
  position:relative;
  overflow:hidden;
}
.z2h-devs-showcase::before{
  content:"";
  position:absolute; inset:12px;
  border-radius:16px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.z2h-devs-rail{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  padding:.4rem .65rem .6rem;
  scrollbar-width:thin;
  align-items:stretch;
  -webkit-overflow-scrolling:touch;
}
.z2h-devs-rail::-webkit-scrollbar{ height:8px; }
.z2h-devs-rail::-webkit-scrollbar-thumb{ background:rgba(50,45,41,.25); border-radius:999px; }
.z2h-devcard{
  position:relative;
  display:grid;
  gap:.55rem;
  padding:1.2rem 1.15rem 1.25rem;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.28)),
    radial-gradient(80% 120% at 20% 0%, rgba(14,165,233,.16), transparent 60%),
    linear-gradient(135deg, #111827, #0f172a);
  background-size:cover; background-position:center;
  color:#fff;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 18px 38px rgba(0,0,0,.28);
  min-height:220px;
  flex:0 0 calc(33.333% - .68rem);
  transform:translateZ(0);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.z2h-devcard::after{
  content:"";
  position:absolute; inset:0;
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  pointer-events:none;
}
.z2h-devcard__top{ display:flex; justify-content:space-between; align-items:center; }
.z2h-devcard__title{ margin:0; font-weight:800; font-size:1.15rem; letter-spacing:.02em; }
.z2h-devcard__desc{ margin:0; color:rgba(255,255,255,.9); line-height:1.55; }
.z2h-devcard__footer{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:.6rem; }
.z2h-devcard .btn-ghost{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:#fff; }
.z2h-devcard .btn-ghost:hover{ background:var(--neon); border-color:var(--neon); color:#111; }
.z2h-devcard__client{
  display:inline-block;
  padding:.1rem 0;
  color:rgba(255,255,255,.9);
  font-weight:700;
  letter-spacing:.01em;
}
.z2h-devcard:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(0,0,0,.28);
  border-color:rgba(255,255,255,.28);
}
.z2h-devs-arrows{ gap:.35rem; }
.z2h-devs-nav{
  width:46px; height:46px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(145deg, rgba(20,27,40,.9), rgba(14,22,35,.8));
  color:#fff;
  display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
}
.z2h-devs-nav:hover{ background:var(--neon); color:#111; border-color:var(--neon); }

@media (max-width: 991.98px){
  .z2h-devcard{ flex:0 0 calc(50% - .6rem); }
}
@media (max-width: 640px){
  .z2h-devcard{
    flex:0 0 92%;
    margin:0 auto;
    padding:1.1rem 1rem 1.2rem;
    gap:.65rem;
  }
  .z2h-devcard__title{ font-size:1.05rem; }
  .z2h-devcard__desc{ font-size:.95rem; }
}

/* =========================
   BADGES (dos variantes)
   ========================= */
/* Por defecto (fondos claros) */
.z2h-badge{
  background:#eef2ff; border:1px solid #e0e7ff; color:#1e3a8a;
  padding:.35rem .6rem; border-radius:999px; font-weight:700;
}
/* En contextos oscuros (hero/pilares/tiles con imagen) */
.z2h-landing-hero .z2h-badge,
.z2h-course-hero .z2h-badge,
.z2h-pillar .z2h-badge,
.z2h-tile__media .z2h-badge{
  background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); color:#fff;
}

/* =========================
   TILES (Cursos) — “finos” 3:2 + hover neón
   ========================= */
.z2h-featured .z2h-subtle{ color:var(--text-2); }
.z2h-featured .row>[class*="col-"]{ display:flex; }
.z2h-featured .z2h-tile{ flex:1; }

.z2h-tile{
  position:relative; display:block; overflow:hidden;
  border-radius:18px; background:#fff; border:1px solid #e6e1d7;
  box-shadow:0 1px 0 rgba(0,0,0,.02), 0 8px 24px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  color:inherit;
  height:100%;
}
.z2h-tile:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 0 rgba(0,0,0,.03), 0 18px 36px rgba(0,0,0,.10);
  border-color:#ded9cf;
}
.z2h-tile--hasimg{ display:grid; grid-template-rows:auto 1fr; }

.z2h-tile__media{
  position:relative; width:100%;
  aspect-ratio:3/2; min-height:180px;
  background-image:var(--bg); background-size:cover; background-position:center;
  border-bottom:1px solid var(--border);
  margin:8px 8px 0; border-radius:14px; border:1px solid rgba(0,0,0,.05);
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 18px rgba(0,0,0,.06);
}
.z2h-tile__media-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 10%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.28) 100%); pointer-events:none; }
.z2h-tile--hasimg .z2h-tile__top{ position:absolute; top:.7rem; left:.7rem; display:flex; gap:.4rem; flex-wrap:wrap; z-index:2; }

.z2h-pill{ padding:.22rem .5rem; font-size:.78rem; border-radius:999px; }
.z2h-tile--hasimg .z2h-pill{ background:rgba(255,255,255,.9); border-color:rgba(0,0,0,.06); color:#0f172a; }

.z2h-tile__content--card{ padding:14px 16px 14px; }
.z2h-owa-title, .z2h-tile__title{
  margin:0 0 .35rem; font-size:clamp(1.1rem,2.2vw,1.35rem); font-weight:800;
  letter-spacing:.02em; line-height:1.22;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.z2h-tile__desc{
  color:#60656d; margin:0 0 .75rem; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.z2h-tile__cta{ position:relative; padding-top:.6rem; display:flex; justify-content:flex-end; }
.z2h-tile__cta::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.09), rgba(0,0,0,0)); opacity:.35;
}

/* CTA outline → hover neón */
.z2h-tile .btn-cta{ background:transparent; color:#0b0b0b; border:1px solid #cfd2d9; box-shadow:none; }
.z2h-tile:hover .btn-cta{ background:var(--neon); border-color:var(--neon); color:#0b0b0b; }

/* Tiles sin imagen */
.z2h-tile--noimg{
  padding:14px 16px 12px; border:1px solid #e6e1d7; background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.02), 0 8px 24px rgba(0,0,0,.05);
}
.z2h-tile--noimg .z2h-tile__top{ margin-bottom:.45rem; }
.z2h-tile--noimg .z2h-tile__content{ padding:0; background:none; }

.z2h-tile__shine{ content:""; position:absolute; inset:-20% -40% auto -40%; height:60%; transform:rotate(8deg); background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.25), rgba(255,255,255,0)); opacity:0; transition:opacity .2s ease, transform .2s ease; }
.z2h-tile:hover .z2h-tile__shine{ opacity:.12; transform:rotate(8deg) translateY(-6px); }

/* =========================
   INSTRUCTORES
   ========================= */
.z2h-instructors-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1rem; align-items:stretch; }
.z2h-instructor-card{
  display:grid; grid-template-columns:88px 1fr; gap:.85rem; padding:.95rem;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--shadow-sm); height:100%;
}
.z2h-instructor-media{ width:88px; height:88px; border-radius:12px; overflow:hidden; background:#f3f4f6; border:1px solid var(--border); display:grid; place-items:center; }
.z2h-instructor-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.z2h-instructor-name{ margin:0 0 .2rem; font-weight:800; color:var(--text-1); font-size:clamp(1.05rem, .5vw + 1rem, 1.35rem); line-height:1.15; }
.z2h-instructor-bio{ margin-top:.15rem; color:var(--text-2); }

/* =========================
   ENROLL STEPS
   ========================= */
section.z2h-enroll-steps .z2h-enroll-card{
  border:1px solid var(--border) !important;
  background:var(--surface) !important;
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
section.z2h-enroll-steps .z2h-steps > li{ display:flex; gap:1rem; padding:.9rem 0; border-top:1px dashed #e9eaee; }
section.z2h-enroll-steps .z2h-steps > li:first-child{ border-top:none; }
section.z2h-enroll-steps .z2h-step-index{
  width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto;
  border-radius:50%; font-weight:800; color:#fff; background:var(--grad-1);
  box-shadow:0 8px 18px rgba(37,99,235,.22);
}
section.z2h-enroll-steps .z2h-step-content h3{ font-size:1rem; margin:0 0 .25rem; color:var(--text-1); }
section.z2h-enroll-steps .z2h-step-content p{ margin:0; color:var(--text-2); }
section.z2h-enroll-steps .alert{ background:#f9fafb !important; color:var(--text-1) !important; border:1px solid var(--border) !important; }

/* =========================
   FILTROS / BUSCADOR
   ========================= */
.z2h-filters.card{ border:1px solid var(--border); }
.z2h-searchgroup .input-group-text{
  background:#f3f4f6; color:var(--text-1); border:1px solid var(--border); border-right:0;
  padding:.6rem .8rem; border-top-left-radius:var(--radius); border-bottom-left-radius:var(--radius);
}
.z2h-searchgroup .form-control{ background:#fff; color:var(--text-1); border:1px solid var(--border); border-left:0; border-right:0; padding:.65rem .9rem; }
.z2h-searchgroup .form-control::placeholder{ color:#9ca3af; }
.z2h-searchgroup .btn{ border-top-right-radius:var(--radius); border-bottom-right-radius:var(--radius); padding:.55rem 1rem; }

.z2h-select{ background:#fff; color:var(--text-1); border:1px solid var(--border); border-radius:var(--radius); padding:.55rem .75rem; }
.z2h-select:focus, .z2h-searchgroup .form-control:focus{
  border-color:#c7d2fe !important; box-shadow:0 0 0 .2rem rgba(37,99,235,.12) !important; outline:none !important;
}
.z2h-clearlink{ color:var(--text-2); }
.z2h-clearlink:hover{ color:var(--text-1); text-decoration:underline; }  /* subrayado solo aquí */

/* =========================
   FOOTER
   ========================= */
.z2h-footer{
  margin-top:3rem; background:var(--surface);
  border-top:1px solid var(--border); color:var(--text-2);
}
.z2h-footer .container{ padding:2rem 1rem 1.25rem; }
.z2h-footer-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1.25rem 2rem; }
.z2h-footer-logo{ font-weight:900; letter-spacing:.2px; font-size:clamp(1.15rem, 1.2vw + 1rem, 1.5rem); color:var(--text-1); }
.z2h-footer-tag{ margin:.35rem 0 0 0; max-width:46ch; }
.z2h-footer-title{ margin:0 0 .5rem; font-weight:800; color:var(--text-1); font-size:.95rem; }
.z2h-footer-list{ list-style:none; padding:0; margin:0; }
.z2h-footer-list li{ margin:.35rem 0; }
.z2h-footer-list a{ color:var(--text-2); text-decoration:none; }
.z2h-footer-list a:hover{ color:var(--primary); text-decoration:underline; }  /* subrayado útil en footer */

.z2h-footer-bottom{
  display:flex; gap:.75rem; align-items:center; justify-content:space-between;
  padding-top:1.25rem; margin-top:1.25rem;
  border-top:1px dashed var(--border);
  font-size:.9rem; color:var(--muted);
}
.z2h-footer-right{ display:inline-flex; align-items:center; gap:.5rem; }
.z2h-footer-right a{ color:var(--muted); text-decoration:none; }
.z2h-footer-right a:hover{ color:var(--text-1); text-decoration:underline; }
.z2h-footer-right [aria-disabled="true"]{ opacity:.55; pointer-events:none; }

/* =========================
   Responsive
   ========================= */
@media (max-width:768px){
  .z2h-landing-hero, .z2h-course-hero{ padding:2rem 1rem; }
  .z2h-tile__media{ min-height:160px; } /* compacto en mobile */
  .z2h-comm-item{ grid-template-columns:48px 1fr; grid-auto-flow:row; }
  .z2h-comm-item .btn{ grid-column:1 / -1; width:100%; }
  .z2h-comm-icon{ width:48px; height:48px; border-radius:12px; }
}
@media (max-width:480px){
  .lead{ font-size:1rem; }
  .z2h-course-title{ font-size:1.75rem; }
  .z2h-searchgroup .btn{ width:110px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ===== Course hero compacto (solo para lista y detalle) ===== */
.z2h-course-hero--compact{
  min-height: clamp(140px, 14vw, 240px);
  padding: clamp(0.9rem, 1.6vw, 1.4rem);
  border-radius: 16px;
}
.z2h-course-hero--compact .z2h-course-title{
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  letter-spacing: .16em; /* un poco menos que la landing */
  margin-bottom: .35rem;
}
.z2h-course-hero--compact .z2h-course-sub{
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  color: rgba(255,255,255,.82);
}

@media (max-width: 575.98px){
  .z2h-course-hero--compact{
    min-height: 150px;
    padding: 1rem;
    border-radius: 14px;
  }
}


/* =========================================================
   THEME · LUXE — sin cambiar el fondo ni la estructura
   Paleta: #322D29, #72383D, #AC9C8D, #D1C7BD, #D9D9D9, #EFE9E1
   ========================================================= */

/* 1) Tokens de color (mantengo --bg tal cual) */
:root{
  /* Base */
  --surface: #FFFFFF;
  --surface-2: #EFE9E1;       /* marfil suave */
  --text-1: #322D29;          /* café carbón */
  --text-2: #5D5550;          /* café/gris medio (legible) */
  --muted:  #7A736E;          /* descripción/footers */
  --border: #D1C7BD;          /* borde cálido */

  /* Brand (bordeaux + carbón) */
  --primary:    #322D29;      /* enlaces/énfasis */
  --primary-2:  #72383D;      /* acento */
  --primary-ink:#FFFFFF;
  --focus:      #AC9C8D;      /* focus ring neutro cálido */

  /* Efectos (antes “neon”) → realce cálido */
  --neon:   #D1C7BD;

  /* Gradientes de marca */
  --grad-1: linear-gradient(135deg, #322D29 0%, #72383D 100%);
  --grad-soft:
    radial-gradient(800px 400px at 15% -20%, rgba(50,45,41,.06), transparent 60%),
    radial-gradient(600px 300px at 85% -10%, rgba(114,56,61,.06), transparent 55%);
}

/* 2) Links y selección (sin subrayado; tonos LUXE) */
::selection{ background: rgba(50,45,41,.14); }
a{ color: var(--primary); }
a:hover{ color:#201C19; text-decoration:none; }

/* 3) Navbar: barrita de hover más suave */
.navbar .nav-link::after{ background: rgba(50,45,41,.35); }

/* 4) Botones (quitamos azules hardcodeados) */
.btn-cta{
  background: var(--grad-1);
  color: var(--primary-ink);
  border: 1px solid #5C3B3E;          /* borde acorde al gradiente */
  box-shadow: 0 10px 24px rgba(114,56,61,.18);
}
.btn-cta:hover{ filter: brightness(1.03); color:#fff; }

.btn-owa-outline{ border:1px solid #CFC6BC; color: var(--text-1); }
.btn-owa-outline:hover{ background: var(--neon); border-color: var(--neon); color:#0b0b0b; }

.btn-ghost{ background:#fff; border:1px solid var(--border); color: var(--text-1); }
.btn-ghost:hover{ background:#F4EFE8; }

/* 5) Badges / Pills (antes azules) */
.z2h-badge{
  background:#EFE9E1;
  border:1px solid #D1C7BD;
  color:#322D29;
}
.z2h-pill{
  background:#EFE9E1;
  border:1px solid #D1C7BD;
  color:#322D29;
}
.z2h-tile--hasimg .z2h-pill{       /* pills sobre imagen */
  background: rgba(255,255,255,.92);
  border-color: rgba(0,0,0,.06);
  color:#2A2421;
}

/* 6) Cards / bordes / sombras ligeramente cálidos */
.card{ border-color: var(--border); }
.z2h-divider{
  background: linear-gradient(90deg, rgba(50,45,41,0), rgba(50,45,41,.18), rgba(50,45,41,0));
}

/* 7) Hero y áreas oscuras: textos siguen en blanco; chips oscuros ya están cubiertos */
.z2h-landing-hero, .z2h-course-hero{ background:#000; color:#fff; }
.z2h-course-hero .text-muted{ color: rgba(255,255,255,.82) !important; }

/* 8) Comunidad (iconos/realces que eran azules) */
.z2h-comm-icon{
  color:#72383D;
  background:
    radial-gradient(160% 100% at 50% 0%,
      rgba(114,56,61,.28),  /* antes .18 */
      rgba(172,156,141,.22) 70%,  /* antes .12 */
      rgba(172,156,141,0) 100%
    ),
    #EFE9E1;                 /* antes #fff */
  border:1px solid #D1C7BD;  /* un pelín más oscuro */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 6px 18px rgba(50,45,41,.10);
}

/* 9) Formularios / focus ring */
.z2h-select:focus,
.z2h-searchgroup .form-control:focus{
  border-color: var(--focus) !important;
  box-shadow: 0 0 0 .2rem rgba(172,156,141,.22) !important;
}

/* 10) Tiles: bordes/hover en cálidos (no cambia estructura) */
.z2h-tile{
  border-color:#D1C7BD;
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 8px 24px rgba(0,0,0,.05);
}
.z2h-tile:hover{
  border-color:#C9BEB3;
  box-shadow: 0 2px 0 rgba(0,0,0,.03), 0 18px 36px rgba(0,0,0,.10);
}
/* CTA dentro de tiles: usa “neon” cálido */
.z2h-tile .btn-cta{ border:1px solid #CFC6BC; color:#0b0b0b; background:transparent; }
.z2h-tile:hover .btn-cta{ background: var(--neon); border-color: var(--neon); color:#0b0b0b; }

/* 11) Footer */
.z2h-footer-list a:hover{ color: var(--primary); }
.z2h-footer-right a:hover{ color: var(--text-1); }

/* Admin panel */
#admin-dashboard .admin-card{
  border:1px solid #e7dfd6;
}
.admin-pill{
  padding:0.4rem 0.75rem;
  border-radius:999px;
  font-weight:600;
}
#admin-dashboard .list-group-item{
  border-color:#efe8e0;
}
.admin-tile{
  display:block;
  text-decoration:none;
  color:inherit;
}
.admin-tile-body{
  border:1px solid #e7dfd6;
  border-radius:12px;
  padding:1.25rem;
  display:flex;
  gap:0.85rem;
  align-items:center;
  transition:transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  background:linear-gradient(145deg, #fffefe, #f8f3ec);
}
.admin-tile:hover .admin-tile-body{
  transform:translateY(-2px);
  border-color:#d9cfc4;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}
.admin-tile-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:1.2rem;
  font-weight:700;
}
.admin-tile-title{
  font-weight:700;
  margin-bottom:2px;
}
.admin-kpis .admin-kpi{
  background:#fff;
  border:1px solid #e7dfd6;
  border-radius:14px;
  padding:1rem 1.1rem;
  box-shadow:var(--shadow-sm);
}
.admin-kpi__label{ font-size:.85rem; text-transform:uppercase; color:#6b7280; letter-spacing:.08em; margin-bottom:.25rem; }
.admin-kpi__value{ font-weight:800; font-size:1.6rem; color:#0f172a; }
.admin-kpi__hint{ font-size:.9rem; color:#6b7280; }
.admin-kpi--muted .admin-kpi__value{ color:#6b7280; font-weight:700; font-size:1.1rem; }