/* ClicVocacional — Height Fix (cross‑browser) | Mint Gen Z sin rosa */
:root{
  --bg0:#f6fffd;
  --bg1:#f1f7ff;
  --card: rgba(255,255,255,.84);
  --stroke: rgba(13,26,38,.10);
  --shadow: rgba(13,26,38,.12);

  --text:#0d1a26;
  --muted:#4a5a6b;

  --mint:#35e0c3;
  --teal:#16b6c9;
  --sky:#79d5ff;

  --r20:20px;
  --r28:28px;
  --max: 1024px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  line-height:1.55;
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(53,224,195,.26), transparent 62%),
    radial-gradient(860px 540px at 92% 14%, rgba(22,182,201,.20), transparent 62%),
    radial-gradient(900px 560px at 55% 92%, rgba(121,213,255,.20), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{color:var(--teal);text-decoration:none}
a:hover{opacity:.92}

.container{max-width:var(--max); margin:0 auto; padding:16px}

/* Nav */
nav{position:sticky; top:0; z-index:50; background: rgba(246,255,253,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--stroke)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px}
.brand{display:flex; align-items:center; gap:10px}
.logo{width:38px;height:38px;border-radius:14px; background: linear-gradient(135deg, rgba(53,224,195,.98), rgba(22,182,201,.95)); box-shadow: 0 14px 30px var(--shadow); position:relative; overflow:hidden}
.logo:after{content:""; position:absolute; inset:-40%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.75), transparent 55%); transform: rotate(18deg)}
.brand-title{font-weight:900; letter-spacing:.3px}

.menu-toggle{border: 1px solid var(--stroke); background: rgba(255,255,255,.78); color: var(--text); padding: 8px 10px; border-radius: 14px; font-size: 18px; box-shadow: 0 10px 22px var(--shadow)}
.menu{display:none}
.menu.open{display:grid; gap:10px; padding:10px 16px 14px}
.menu a{padding:11px 12px; border-radius: 14px; background: rgba(255,255,255,.86); border: 1px solid var(--stroke); box-shadow: 0 12px 22px var(--shadow); color: var(--text); font-weight: 800}

/* Atoms */
.card{background: var(--card); border: 1px solid var(--stroke); border-radius: var(--r20); padding: 14px; box-shadow: 0 16px 36px var(--shadow)}
.small{color:var(--muted); font-size:.95rem}
.badge{display:inline-flex; align-items:center; gap:8px; padding: 7px 11px; border-radius: 999px; background: linear-gradient(135deg, rgba(53,224,195,.18), rgba(121,213,255,.18)); border: 1px solid rgba(13,26,38,.10); font-weight: 800; font-size: 12px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 16px; border-radius: 18px; border: 1px solid rgba(13,26,38,.08); font-weight: 900; cursor:pointer; color:#07141d; background: linear-gradient(135deg, rgba(53,224,195,.98), rgba(22,182,201,.92)); box-shadow: 0 18px 36px rgba(13,26,38,.14)}
.btn.secondary{background: linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,255,255,.74)); color: var(--text)}

.hero{border-radius: var(--r28); padding: 20px; border: 1px solid rgba(13,26,38,.08); background: linear-gradient(135deg, rgba(53,224,195,.22), rgba(121,213,255,.20)), rgba(255,255,255,.80); box-shadow: 0 22px 60px rgba(13,26,38,.14)}

.grid{display:grid; grid-template-columns:1fr; gap:12px}
.section{margin: 18px 0}

/* Viewer layout (key fix): real height comes from JS variable --viewerH */
.fullscreen-shell{display:flex; flex-direction:column; min-height: calc(100vh - var(--navH, 72px));}
.switcher{position: sticky; top:0; z-index:30; padding: 12px; border-radius: var(--r20); background: rgba(255,255,255,.82); border: 1px solid var(--stroke); box-shadow: 0 12px 28px var(--shadow); backdrop-filter: blur(10px)}
.tabs{display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px}
.tab-btn{width:100%; padding: 12px 12px; border-radius: 16px; border: 1px solid rgba(13,26,38,.12); background: rgba(255,255,255,.90); color: var(--text); font-weight: 900; cursor:pointer; display:flex; justify-content:space-between; align-items:center; box-shadow: 0 10px 22px rgba(13,26,38,.08)}
.tab-btn[aria-selected="true"]{background: linear-gradient(135deg, rgba(53,224,195,.95), rgba(22,182,201,.90)); color: #07141d}
.tab-meta{font-size:12px; opacity:.85; font-weight:700}

.viewer{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  border-radius: var(--r20);
  overflow:hidden;
  background: rgba(255,255,255,.76);
  border: 1px solid var(--stroke);
  box-shadow: 0 18px 42px rgba(13,26,38,.12);
  position:relative;
  /* JS writes --viewerH to fit viewport; fallback uses 720px */
  height: var(--viewerH, 720px);
}
.viewer .toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 9px 10px; font-size: 13px; color: rgba(13,26,38,.72); background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.74)); border-bottom: 1px solid rgba(13,26,38,.08); flex: 0 0 auto}

/* Critical: allow iframe area to stretch */
.iframe-wrap{position:relative; flex: 1 1 auto; min-height: 0; height: auto; overflow:hidden; background:#fff}
.iframe-wrap iframe{width:100%; height:100%; min-height:0; border:0; display:block; background:#fff}

/* Floating helper so it doesn't steal height */
.floating-help{position:absolute; top:12px; right:12px; left:12px; z-index:20; pointer-events:auto}
@media (min-width:768px){.floating-help{left:auto; width:420px}}
.notice{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:16px; border:1px solid rgba(13,26,38,.12); background: rgba(255,255,255,.94); box-shadow: 0 12px 26px rgba(13,26,38,.10)}
.notice strong{font-weight:900}
.notice .actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end}
.notice .mini{padding:8px 10px; border-radius:14px; font-weight:900; border:1px solid rgba(13,26,38,.12); background: rgba(255,255,255,.90); cursor:pointer}
.notice .mini.primary{background: linear-gradient(135deg, rgba(53,224,195,.98), rgba(22,182,201,.92)); border-color: rgba(13,26,38,.08)}

.spinner{position:absolute; inset:0; display:none; align-items:center; justify-content:center; background: rgba(246,255,253,.70); backdrop-filter: blur(6px); z-index:10}
.spinner.show{display:flex}
.spinner .dot{width:10px;height:10px;border-radius:999px;background: rgba(22,182,201,.9); margin:0 4px; animation:bounce .8s infinite alternate}
.spinner .dot:nth-child(2){animation-delay:.12s; background: rgba(53,224,195,.95)}
.spinner .dot:nth-child(3){animation-delay:.24s; background: rgba(121,213,255,.95)}
@keyframes bounce{from{transform:translateY(0); opacity:.7} to{transform:translateY(-8px); opacity:1}}

footer{margin: 26px 0 40px; text-align:center; color: var(--muted)}

@media (min-width: 768px){
  .grid{grid-template-columns: repeat(2,1fr)}
  .tabs{grid-template-columns: repeat(3, 1fr)}
}
@media (min-width: 1024px){
  .grid{grid-template-columns: repeat(3,1fr)}
  .tabs{grid-template-columns: repeat(4, 1fr)}
}

/* ====== Página: quienes.html (Equipo) ====== */
.team-card-head{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.team-photo{
  width: 74px;
  height: 74px;
  border-radius: 18px;
  overflow: hidden;
  flex: 0 0 auto;

  border: 1px solid rgba(13,26,38,.10);
  background: linear-gradient(135deg, rgba(53,224,195,.18), rgba(121,213,255,.18));
  box-shadow: 0 12px 26px rgba(13,26,38,.10);

  display: grid;
  place-items: center;
}

.team-photo img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.team-initials{
  font-weight: 900;
  letter-spacing: .5px;
  color: rgba(13,26,38,.80);
  font-size: 18px;
  user-select: none;
}

@media (min-width: 768px){
  .team-photo{
    width: 86px;
    height: 86px;
    border-radius: 20px;
  }
  .team-initials{ font-size: 20px; }
}



/* ===== Videos (grid responsive) ===== */
.video-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.video-card{
  border-radius: var(--r20, 20px);
  overflow:hidden;
  border: 1px solid rgba(13,26,38,.10);
  background: rgba(255,255,255,.82);
  box-shadow: 0 16px 36px rgba(13,26,38,.12);
}
.video-card iframe{
  width:100%;
  aspect-ratio: 16/9;
  border:0;
  display:block;
}
.video-card .meta{
  padding: 10px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

@media (min-width: 768px){
  .video-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .video-grid{ grid-template-columns: repeat(3, 1fr); }
}