/* ============================================================
   Estilos propios de la página — Vinculación ICA · ESIME Zacatenco
   Compone los tokens/componentes de balam.css. Sin literales de
   color, radio o duración fuera de los tokens.
   ============================================================ */

html, body{ overflow-x:hidden; }

/* La hoja de autor (.btn{display:inline-flex}) gana por origen sobre el
   [hidden]{display:none} de la hoja del navegador aunque empaten en
   especificidad: hay que reforzarlo explícitamente. */
[hidden]{ display:none !important; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; left:12px; top:-60px; z-index:100;
  background:var(--surface); color:var(--text);
  padding:10px 16px; border-radius:var(--r-sm); box-shadow:var(--elev), var(--neu-out-sm);
  text-decoration:none; font-weight:600; font-size:14px;
  transition:top var(--t-fast);
}
.skip-link:focus{ top:12px; }

/* ---------- Encabezado ---------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:70;
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--accent-2); border-radius:0 0 var(--r-lg) var(--r-lg);
}
.brand-home{ display:flex; align-items:center; gap:10px; min-width:0; text-decoration:none; }
@media (hover:hover){ .brand-home:hover .brand-text strong{ color:var(--accent); } }
.topbar-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"brand nav theme";
  align-items:center; gap:10px 16px;
  max-width:1240px; margin:0 auto;
  padding:10px clamp(16px,4vw,28px);
}
.brand{ grid-area:brand; display:flex; align-items:center; gap:10px; min-width:0; }
.brand-logos{ display:flex; align-items:center; gap:8px; flex:none; }
/* 52px: con las 3 líneas del texto de marca (2 líneas a 14px/650 + la de
   ESIME a 11.5px, todas a line-height:1.25) el bloque mide ~49.4px de
   alto — se subieron los logos en vez de apretar el interlineado, para
   que el conjunto quede centrado sin recortarse. */
.brand-logo{ height:52px; width:auto; display:block; flex:none; object-fit:contain; }
[data-theme="dark"] .brand-logos{
  background:var(--plate-logo); border-radius:var(--r-md); padding:6px;
}
.brand-divider{ width:1px; align-self:stretch; background:var(--edge); flex:none; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.brand-text strong{ font-size:14px; font-weight:650; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-text span{ font-size:11.5px; color:var(--text-faint); white-space:nowrap; }
/* Es el propósito de la página: mismo peso visual que "Control y
   Automatización" (14px/650), no un dato secundario como la línea de
   ESIME. --accent-2-on-glass (no --accent-2 a secas): el fondo real de
   esta línea es el vidrio del encabezado, más oscuro en tema oscuro que
   --surface plano — ver el token en balam.css. */
.brand-text .brand-coord{ font-size:14px; font-weight:650; color:var(--accent-2-on-glass); }

/* Entre 681px (donde el texto de marca vuelve a mostrarse) y ~900px, el
   ancho natural de "Coordinación de Vinculación Industrial" (262px, la
   línea más ancha con diferencia — más que "Control y Automatización" o
   "ESIME Zacatenco · IPN") empuja la columna auto de la marca lo
   suficiente para que a la navbar (columna 1fr) le quede menos espacio
   del que necesita y sus botones se recorten. Se trunca con elipsis solo
   en ese rango — se sigue leyendo el inicio de la línea, y las otras 2
   líneas quedan intactas (verificado por medición: ninguna de las dos es
   la que estrecha la navbar, así que ocultarlas no habría resuelto nada). */
@media (max-width:900px){
  .brand-text .brand-coord{
    max-width:150px; overflow:hidden; text-overflow:ellipsis;
  }
}

@media (max-width:480px){
  .brand-logo{ height:36px; }
}

.navbar{ grid-area:nav; justify-self:center; }
.theme-toggle{ grid-area:theme; justify-self:end; }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .icon-moon{ display:none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:inline-flex; }

@media (max-width:680px){
  .topbar-inner{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "brand theme"
      "nav   nav";
  }
  .navbar{ justify-self:stretch; }
  .brand-text{ display:none; }
  .brand-divider{ display:none; }
}

/* Pie siempre al fondo aunque la página sea corta: body ocupa todo el
   viewport como columna, main crece y empuja el pie hasta el borde. */
body{
  padding-top:var(--header-h, 76px);
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100dvh;
}
main{ flex:1; }

/* ---------- Banda institucional (portada, arriba del hero) ---------- */
.institucional-band{ max-width:1240px; margin:0 auto; padding:var(--sp-5) clamp(16px,4vw,28px) 0; }
.institucional-card{ padding:var(--sp-4) var(--sp-5); }
.institucional-inner{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:var(--sp-5);
}
.institucional-texto{ text-align:center; }
.institucional-l1{ font-size:clamp(24px,2.6vw,34px); font-weight:700; color:var(--text); margin-bottom:4px; }
.institucional-l2{ font-size:clamp(17px,1.8vw,22px); font-weight:600; color:var(--accent-2); margin-bottom:4px; }
.institucional-l3{ font-size:16px; color:var(--text-soft); }

/* Placa clara fija (no varía con el tema, sin degradado) */
.institucional-logo-plate{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--plate-logo); border-radius:var(--r-lg); padding:var(--sp-3);
}
.institucional-logo{ height:150px; width:auto; display:block; }

@media (max-width:767px){
  .institucional-card{ padding:var(--sp-4); }
  .institucional-inner{
    grid-template-columns:auto auto;
    justify-content:center; gap:var(--sp-3) var(--sp-4);
  }
  .institucional-logo-plate--ipn{ order:1; }
  .institucional-logo-plate--esime{ order:2; }
  .institucional-texto{ order:3; grid-column:1/-1; }
  .institucional-logo{ height:96px; }
}

/* ---------- Banda del nombre de la carrera (portada) ----------
   Entre la banda institucional y el hero. Mismo ancho/padding lateral y
   mismo radio que las otras dos (hereda .institucional-band/.hero);
   mismos 40px (--sp-5) de separación arriba y abajo por el mismo patrón
   de padding-top en cascada. Fondo en degradado fijo (--accent-3-hi →
   --accent-3-lo, mismo matiz que --accent-3): NO cambia con el tema,
   igual que el guinda del pie. Este azul no se usa en ningún otro
   elemento del sitio. overflow:hidden solo recorta el filete superior
   (::before) a las esquinas redondeadas; no afecta su propio box-shadow
   (un elemento nunca recorta su propia sombra con su propio overflow). */
.carrera-band{ max-width:1240px; margin:0 auto; padding:var(--sp-5) clamp(16px,4vw,28px) 0; }
.carrera-band-inner{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--accent-3-hi), var(--accent-3-lo));
  color:var(--accent-3-ink);
  border-radius:var(--r-lg); box-shadow:var(--neu-out-card);
  padding:var(--sp-4) var(--sp-5);
  text-align:center;
}
.carrera-band-inner::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--accent);
}
@media (max-width:480px){
  .carrera-band-inner{ padding:var(--sp-4); }
}
/* Sin :hover a propósito: no es un enlace, no lleva el realce de .card. */
.carrera-band-text{
  margin:0; color:inherit;
  text-transform:uppercase; font-weight:700; letter-spacing:.08em;
  font-size:clamp(18px,2.2vw,28px); line-height:1.3;
  text-wrap:balance;
}
.carrera-band-text-sec{
  margin:4px 0 0; color:inherit; opacity:.88; font-weight:600;
  font-size:calc(clamp(18px,2.2vw,28px) * 0.62); line-height:1.3;
  text-wrap:balance;
}

/* ---------- Hero (portada) ----------
   Mismo contenedor y ancho que las bandas de arriba (--hero no lleva
   max-width propio: hereda el de .hero, igual que .institucional-band
   y .carrera-band). Contenido centrado, mismo padding interno que
   .institucional-card. */
.hero{ max-width:1240px; margin:0 auto; padding:var(--sp-5) clamp(16px,4vw,28px) 0; }
/* Mismo espacio vertical banda→hero (padding-top de .hero) que hero→Explora:
   se fuerza aquí porque .section (Explora) es un componente compartido con
   otro padding-top por defecto en las demás páginas. */
.hero + .section{ padding-top:var(--sp-5); }

.hero-card{
  padding:var(--sp-4) var(--sp-5);
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
  text-align:center;
}
.hero-card h1{
  font-size:clamp(34px,4.6vw,56px); line-height:1.1; color:var(--text); margin:0;
  max-width:22ch; margin-inline:auto; text-wrap:balance;
}
.hero-parrafo{ font-size:18px; color:var(--text-soft); max-width:60ch; margin-inline:auto; }
.hero-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-2); margin-top:2px; }
.hero-sep{ height:1px; width:100%; background:var(--edge); margin:var(--sp-2) 0; }
.hero-stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-4); }
.hero-stat{ display:flex; flex-direction:column; gap:2px; }
.hero-stat-num{ font-size:30px; font-weight:650; letter-spacing:-.02em; color:var(--accent); }
.hero-stat-label{ font-size:12.5px; color:var(--text-faint); max-width:17ch; }

@media (max-width:480px){
  .hero-ctas{ flex-direction:column; align-self:stretch; }
  .hero-ctas .btn{ width:100%; }
  .hero-stats{ gap:var(--sp-3); }
  .hero-stat-num{ font-size:26px; }
  .hero-stat-label{ max-width:12ch; }
}
/* A 360px los 3 datos no caben en una fila ni siquiera a 26px (se probó:
   parten 2+1); mejor pasarlos a 1 columna limpia que dejarlos partidos. */
@media (max-width:400px){
  .hero-stats{ flex-direction:column; gap:6px; }
  .hero-stat-label{ max-width:none; }
}

/* ---------- Portada: tarjetas de navegación ---------- */
.grid-portada{ display:grid; grid-template-columns:1fr; gap:var(--sp-3); }
@media (min-width:700px){ .grid-portada{ grid-template-columns:repeat(3,1fr); } }
.portada-card{
  display:flex; flex-direction:column; align-items:flex-start;
  text-decoration:none; color:inherit; position:relative;
  padding-right:calc(var(--sp-4) + 30px);
}
.portada-card .block-icon{ margin-bottom:var(--sp-3); }
.portada-card-title{ font-size:19px; font-weight:650; color:var(--text); margin-bottom:6px; }
.portada-card-teaser{ font-size:14.5px; }
.portada-card-arrow{
  position:absolute; right:var(--sp-4); top:var(--sp-4);
  width:30px; height:30px; border-radius:50%; color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--neu-in-sm); transition:transform var(--t);
}
.portada-card-arrow svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (hover:hover){
  .portada-card:hover{ transform:translateY(-2px); }
  .portada-card:hover .portada-card-arrow{ transform:translateX(2px); }
}

/* ---------- Secciones ---------- */
.section{
  max-width:1240px; margin:0 auto;
  padding:var(--sp-6) clamp(16px,4vw,28px);
  scroll-margin-top:calc(var(--header-h, 76px) + 14px);
}
.section-title{
  font-size:clamp(24px,3.4vw,32px); color:var(--accent-2);
  margin-bottom:var(--sp-5);
}
.block{ margin-bottom:var(--sp-5); }
.block:last-of-type{ margin-bottom:0; }
.block-title{ font-size:20px; font-weight:650; color:var(--text); margin-bottom:var(--sp-3); }
.block-intro{ margin-bottom:var(--sp-3); }
.section-fuentes{
  margin-top:var(--sp-5); font-size:12.5px; color:var(--text-faint);
}
.section-fuentes a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* ---------- Ícono de bloque ---------- */
.block-icon{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--neu-in-sm); color:var(--accent); margin-bottom:var(--sp-3);
}
.block-icon svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Disclosure (<details>) compartido ---------- */
details.card{ padding:0; overflow:hidden; }
details.card > summary{
  list-style:none; cursor:pointer; padding:var(--sp-4);
  display:flex; align-items:center; gap:var(--sp-3);
}
details.card > summary::-webkit-details-marker{ display:none; }
.chevron{ width:17px; height:17px; color:var(--text-faint); flex:none; transition:transform var(--t); }
details[open] .chevron{ transform:rotate(180deg); }
.disclosure-body{
  margin:0 var(--sp-4) var(--sp-4); padding-top:var(--sp-3);
  border-top:1px solid color-mix(in srgb, var(--edge) 30%, transparent);
  color:var(--text-soft); font-size:15px; line-height:1.65;
  opacity:0; transition:opacity var(--t);
}
details[open] .disclosure-body{ opacity:1; }
@media (hover:hover){ details.card > summary:hover .summary-title{ color:var(--accent); } }

/* Perfil de ingreso: disclosure simple, sin ícono redondo */
.details-simple > summary{ justify-content:space-between; }
.summary-title{ font-weight:600; color:var(--text); font-size:16px; transition:color var(--t); }

/* Perfil de egreso: grid de competencias */
.grid-competencias{ display:grid; grid-template-columns:1fr; gap:var(--sp-3); align-items:start; }
@media (min-width:600px){ .grid-competencias{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .grid-competencias{ grid-template-columns:repeat(3,1fr); } }

.card-comp > summary{ align-items:center; }
.comp-icon{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--neu-in-sm); color:var(--accent);
}
.comp-icon svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.comp-title{ flex:1; font-weight:600; font-size:15.5px; color:var(--text); transition:color var(--t); }
@media (hover:hover){ .card-comp:hover .comp-title{ color:var(--accent); } }

/* ---------- Campo ocupacional: 3 tarjetas por sector ---------- */
.grid-ocupacion{ display:grid; grid-template-columns:1fr; gap:var(--sp-3); }
@media (min-width:700px){ .grid-ocupacion{ grid-template-columns:repeat(3,1fr); } }
.sector-card .block-icon{ margin-bottom:var(--sp-2); }
.sector-title{ font-size:18px; font-weight:650; color:var(--accent-2); margin:0 0 var(--sp-2); }
.sector-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.sector-list li{
  font-size:16px; color:var(--text-soft); line-height:1.4;
  padding-left:18px; position:relative;
}
.sector-list li::before{
  content:""; position:absolute; left:0; top:9px;
  width:7px; height:7px; border-radius:50%; background:var(--accent);
}

/* ---------- Misión / visión ---------- */
.grid-2{ display:grid; grid-template-columns:1fr; gap:var(--sp-3); }
@media (min-width:700px){ .grid-2{ grid-template-columns:1fr 1fr; } }

/* ---------- Instalaciones ---------- */
.grid-labs{ display:grid; grid-template-columns:1fr; gap:var(--sp-3); }
@media (min-width:700px){ .grid-labs{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .grid-labs{ grid-template-columns:repeat(3,1fr); } }
.lab-card{ padding:0; overflow:hidden; border:0; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.lab-photo{
  aspect-ratio:4/3; width:100%; background:var(--surface-alt); box-shadow:var(--neu-in);
  display:flex; align-items:center; justify-content:center; color:var(--text-faint);
  font-size:13px; overflow:hidden;
}
.lab-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.lab-body{ padding:var(--sp-3) var(--sp-4) var(--sp-4); }
.lab-name{ font-weight:650; color:var(--text); margin-bottom:4px; }
.lab-desc{ font-size:14px; }
.lab-empty{ text-align:center; padding:var(--sp-6) var(--sp-4); color:var(--text-faint); grid-column:1/-1; }
.lab-empty svg{ width:34px; height:34px; stroke:currentColor; fill:none; stroke-width:1.6; margin-bottom:var(--sp-2); }

#lightbox{ padding:0; }
#lightbox .lightbox-inner{ padding:var(--sp-4); }
#lightbox img{ display:block; width:100%; height:auto; border-radius:var(--r-md); }
#lightbox figcaption{ margin-top:var(--sp-3); color:var(--text-soft); font-size:14px; }
.modal-close{ position:absolute; top:14px; right:14px; }

/* ---------- Contacto ---------- */
.contact-card{ max-width:600px; margin:0 auto var(--sp-5); text-align:center; }
.contact-role{ color:var(--text-faint); font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.contact-name{ font-size:22px; margin-bottom:var(--sp-2); }
.contact-meta{ font-size:15px; margin-bottom:var(--sp-4); }
.contact-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center; }
@media (max-width:480px){
  .contact-actions{ flex-direction:column; }
  .contact-actions .btn{ width:100%; }
}

/* ---------- Formulario "Escríbenos" ---------- */
.contacto-form{ text-align:left; }
.form-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-3); margin-bottom:var(--sp-3); }
@media (min-width:700px){ .form-grid{ grid-template-columns:1fr 1fr; } }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field--full{ grid-column:1/-1; }
.form-field label{ font-size:13px; font-weight:600; color:var(--text-soft); }
.form-optional{ font-weight:400; color:var(--text-faint); }
textarea.input{ min-height:120px; }
.form-error{
  margin:0; min-height:15px; font-size:12.5px; color:var(--danger);
}

.form-honey{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-privacidad{ margin-bottom:2px; }
.form-privacidad a{ color:var(--accent); text-decoration:underline; }

#formSubmitBtn{ margin-top:var(--sp-2); }

.form-status{
  margin-top:var(--sp-3); padding:13px 16px; border-radius:var(--r-md);
  font-size:14.5px; color:var(--text);
}
.form-status a{ color:inherit; text-decoration:underline; font-weight:600; }
.form-status.is-success{ background:var(--ok-soft); box-shadow:0 0 0 1px var(--ok); }
.form-status.is-error{ background:var(--danger-soft); box-shadow:0 0 0 1px var(--danger); }

/* ---------- Pie de página ----------
   Bloque de marca fijo: usa --accent-2-solid (guinda oficial, no varía con
   el tema) + --accent-2-solid-ink, no el --accent-2 ajustado por tema. */
.site-footer{
  padding:var(--sp-5) clamp(16px,4vw,28px) calc(var(--sp-5) + env(safe-area-inset-bottom));
  text-align:center; font-size:13px; line-height:1.7;
  background:var(--accent-2-solid); color:var(--accent-2-solid-ink);
}
/* p{color:var(--text-soft)} en balam.css tiene su propia regla de color,
   así que no hereda solo; hay que forzarlo explícitamente aquí. */
.site-footer p{ color:inherit; }
.site-footer a{ color:inherit; }
.site-footer .footer-fuente{ margin-top:var(--sp-2); opacity:.85; }
.site-footer .footer-privacidad{ margin-top:6px; opacity:.85; }
.footer-logos{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-4);
  margin-bottom:var(--sp-3);
}
.footer-logos img{ height:48px; width:auto; display:block; }