/* =====================================================================
   FUENTES (tipografías) 
   ===================================================================== */
@font-face{
  font-family:'American Lemon';
  src:url('fonts/AmericanLemon.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Glacial Indifference';
  src:url('fonts/GlacialIndifference-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Glacial Indifference';
  src:url('fonts/GlacialIndifference-Bold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('fonts/Montserrat-Variable.ttf') format('truetype');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* =====================================================================
   PALETA DE COLORES (variables)

   --color-acento- es el color principal de marca.
   Se usa en botones, links, título destacado, franja de noticias, etc.
   ===================================================================== */
:root{
  /* Modo OSCURO  */
  --color-fondo:#0B0B0C;
  --color-superficie:#141414;
  --color-superficie-2:#1C1C1C;
  --color-negro-puro:#000000;
  --color-texto:#F5F5F2;
  --color-texto-suave:#B4B4B4;
  --color-borde: rgba(255,255,255,0.12);

  /* Paleta oficial */
  --gris-claro:#D9D9D9; --gris:#B6B6B6; --gris-oscuro:#555555;
  --turquesa-claro:#5FBCBF; --turquesa:#119299; --turquesa-oscuro:#10686C;
  --verde-suave-claro:#E3F9BC; --verde-suave:#BDD392; --verde-suave-oscuro:#688B6A;
  --amarillo-claro:#FFF791; --amarillo:#FBE94B; --amarillo-oscuro:#F6D805;
  --rosa-claro:#F772C1; --rosa:#E50B81; --rosa-oscuro:#C90469;

  /* Color de acento principal */
  --color-acento-claro:var(--rosa-claro);
  --color-acento:var(--rosa);
  --color-acento-oscuro:var(--rosa-oscuro);

  --anillo-degradado: conic-gradient(from 200deg, var(--rosa), var(--amarillo-oscuro), var(--turquesa), var(--rosa));
}

/* Modo CLARO */
:root[data-theme="light"]{
  --color-fondo:#F5FCE6;            /* verde muy suave (tono de #E3F9BC) */
  --color-superficie:#FFFFFF;
  --color-superficie-2:#E3F9BC;     /* verde suave de la paleta */
  --color-negro-puro:#111111;
  --color-texto:#1F1F1F;
  --color-texto-suave:#555555;      /* gris oscuro de la paleta */
  --color-borde: rgba(85,85,85,0.22);
}

/* =====================================================================
   BASE GENERAL
   ===================================================================== */
*{box-sizing:border-box;}
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  margin:0;
  background:var(--color-fondo);
  color:var(--color-texto);
  font-family:'Montserrat', system-ui, sans-serif;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .3s ease, color .3s ease;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{ background:var(--color-acento); color:#fff; }

/* Contenedor centrado que se repite en cada sección */
.contenedor{ max-width:1180px; margin:0 auto; padding:0 clamp(18px,4.5vw,52px); }

h1,h2,h3,h4{
  font-family:'Glacial Indifference', system-ui, sans-serif;
  font-weight:700;
  margin:0;
  letter-spacing:-0.01em;
}
/* Texto con la tipografía manuscrita ("gráfico", frases de Instagram, etc.) */
.texto-manuscrito{
  font-family:'American Lemon', cursive;
  font-weight:400;
  line-height:1;
  display:inline-block;
}
/* Textito chico en mayúsculas que va arriba de un título (ej: "Quiénes somos") */
.texto-etiqueta{
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:0.74rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--color-texto-suave);
  display:flex; align-items:center; gap:8px;
}
.texto-etiqueta .punto{width:7px;height:7px;border-radius:50%;background:var(--color-acento);flex:none;}

/* =====================================================================
   ENCABEZADO / MENÚ DE NAVEGACIÓN
   ===================================================================== */
header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--color-fondo) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--color-borde);
}
.barra-navegacion{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px clamp(18px,4.5vw,52px);
  gap:18px;
}
/* Logo de la izquierda */
.marca{ display:flex; align-items:center; text-decoration:none; }
.logo-img{ height:46px; width:auto; display:block; }
.logo-pie{ height:52px; }


/* Links del medio (Cursos, Galería, etc.) */
nav.menu-principal{ display:flex; gap:22px; font-size:0.82rem; font-weight:600; flex-wrap:wrap; }
nav.menu-principal a{ text-decoration:none; color:var(--color-texto-suave); border-bottom:2px solid transparent; padding:4px 0; transition:.2s;}
nav.menu-principal a:hover{ color:var(--color-texto); border-color:var(--color-acento); }
@media (max-width:980px){ nav.menu-principal{display:none;} }

/* Botón de tema + botón "Consultanos" de la derecha */
.barra-derecha{ display:flex; align-items:center; gap:12px; }
.boton-tema{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--color-borde); background:var(--color-superficie);
  color:var(--color-texto); cursor:pointer; font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  flex:none;
}

/* =====================================================================
   BOTONES 
   ===================================================================== */
.boton{
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.8rem;
  text-decoration:none; padding:11px 20px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, opacity .2s ease;
  white-space:nowrap;
}
.boton:hover{ transform:translateY(-2px); }
.boton-lleno{ background:var(--color-acento); color:#fff; }       
.boton-oscuro{ background:var(--color-texto); color:var(--color-fondo); }
.boton-whatsapp{ background:#BDD392; color:#1B1B18; }
.boton-whatsapp:hover{ background:#A9C67A; }
.boton-youtube{ background:#fbe94b; color:#1B1B18; border-color:#fbe94b; }
.boton-youtube:hover{ background:#f0dc2e; border-color:#f0dc2e; }
.boton-borde{ background:transparent; color:var(--color-texto); border-color:var(--color-borde); }
.boton-chico{ padding:8px 14px; font-size:0.72rem; }

/* Cartelito "Próximo cuatrimestre: MARZO 2027" */
.etiqueta-cuatrimestre{
  font-family:'Montserrat',sans-serif; font-size:0.7rem; font-weight:700;
  padding:6px 12px; border-radius:999px; display:inline-block;
  background:var(--color-superficie-2); color:var(--color-texto-suave); border:1px solid var(--color-borde);
}
/* En celular se oculta el cartelito (solo se ve en PC/tablet) */
@media (max-width:640px){ .etiqueta-cuatrimestre{ display:none; } }
@media (max-width:480px){ .barra-navegacion{ flex-wrap:wrap; row-gap:10px; } }

/* =====================================================================
   SECCIÓN PRINCIPAL (HERO) — "Estudiá el oficio gráfico"
   ===================================================================== */
.seccion-principal{ padding:clamp(40px,7vw,86px) 0 50px; }
.principal-cuadricula{ display:grid; grid-template-columns:1.25fr 0.9fr; gap:44px; align-items:start;}
@media (max-width:940px){ .principal-cuadricula{ grid-template-columns:1fr; } }

.titulo-hero{ font-size:clamp(2.3rem,5.6vw,4.2rem); line-height:1.02; margin-top:18px; }
.titulo-hero .resaltado{ color:var(--color-acento); }
.seccion-principal p.texto-bajada{ margin-top:20px; max-width:56ch; color:var(--color-texto-suave); font-size:1.02rem; }
.linea-certificacion{
  margin-top:18px; display:flex; align-items:center; gap:10px;
  font-size:0.82rem; color:var(--color-texto-suave); font-weight:600;
}
.linea-certificacion .icono{ color:var(--amarillo); font-size:1rem; }
.botones-principales{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }

/* Tarjeta con el "perfil" tipo Instagram del costado del hero */
.tarjeta-perfil{
  background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:18px;
  padding:26px;
}
.perfil-cabecera{ display:flex; gap:16px; align-items:center; }
.avatar-grande{ width:74px;height:74px;border-radius:50%; background:var(--anillo-degradado); padding:4px; flex:none;}
.avatar-grande img{ width:100%; height:100%; border-radius:50%; background:#fff; padding:7px; object-fit:contain; }
.perfil-usuario{ font-weight:700; font-size:0.95rem; text-decoration:none; display:inline-block; }
.perfil-usuario:hover{ text-decoration:underline; }
.perfil-descripcion{ font-size:0.78rem; color:var(--color-texto-suave); }
.estadisticas{ display:flex; gap:0; margin-top:20px; border-top:1px solid var(--color-borde); border-bottom:1px solid var(--color-borde); }
.estadistica{ flex:1; text-align:center; padding:14px 4px; }
.estadistica + .estadistica{ border-left:1px solid var(--color-borde); }
.estadistica b{ display:block; font-family:'Glacial Indifference',sans-serif; font-size:1.25rem; }
.estadistica span{ font-size:0.68rem; color:var(--color-texto-suave); text-transform:uppercase; letter-spacing:0.05em; }
.accesos-rapidos{ display:flex; gap:16px; margin-top:20px; overflow-x:auto; padding-bottom:4px; }
.acceso-rapido{ text-align:center; flex:none; width:66px; }
.acceso-rapido .acceso-rapido-circulo{
  width:58px;height:58px;border-radius:50%;background:var(--color-superficie-2);border:1.5px solid var(--color-borde);
  display:flex;align-items:center;justify-content:center;font-size:1.35rem;
  text-decoration:none;
}
.acceso-rapido span{ display:block; font-size:0.62rem; margin-top:6px; color:var(--color-texto-suave); font-weight:700; text-transform:uppercase; }

/* =====================================================================
   CINTA DE TEXTO QUE SE DESLIZA 
   ===================================================================== */
.cinta-noticias{
  border-top:1px solid var(--color-borde); border-bottom:1px solid var(--color-borde);
  background:var(--color-superficie);
  overflow:hidden;           /* oculta lo que sobra a los costados */
  white-space:nowrap;        /* fuerza que todo quede en una sola línea */
  padding:13px 0;
}
.cinta-noticias-texto{
  display:inline-block;
  white-space:nowrap;        /* refuerzo: nunca pasa a una segunda línea */
  animation:deslizar-texto 28s linear infinite;
  font-family:'Glacial Indifference',sans-serif; font-weight:700; font-size:0.9rem;
  text-transform:uppercase; letter-spacing:0.04em;
}
.cinta-noticias-texto span{ margin:0 24px; color:var(--color-texto-suave); }
.cinta-noticias-texto span.cinta-noticias-resaltado{ color:#BDD392; }
@keyframes deslizar-texto{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){ .cinta-noticias-texto{animation:none;} }

/* =====================================================================
   BLOQUES GENERALES DE SECCIÓN (título + texto arriba de cada sección)
   ===================================================================== */
.seccion{ padding:80px 0; }
.seccion-titulo{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:40px; flex-wrap:wrap; border-bottom:1px solid var(--color-borde); padding-bottom:22px;}
.seccion-titulo h2{ font-size:clamp(1.7rem,3.4vw,2.35rem); max-width:20ch; }
.seccion-titulo p{ max-width:38ch; color:var(--color-texto-suave); font-size:0.92rem; margin:0; }

/* =====================================================================
   SECCIÓN "¿CÓMO ME INSCRIBO?"
   ===================================================================== */
.inscripcion-cuadricula{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media (max-width:860px){ .inscripcion-cuadricula{grid-template-columns:1fr;} }
.pasos{ display:flex; flex-direction:column; gap:22px; }
.paso{ display:flex; gap:16px; }
.paso .paso-numero{
  font-family:'Glacial Indifference',sans-serif; font-weight:700; font-size:1rem;
  width:34px;height:34px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--color-superficie-2); border:1px solid var(--color-borde);
}
.paso h4{ font-size:1rem; }
.paso p{ margin:6px 0 0; color:var(--color-texto-suave); font-size:0.88rem; }
.aviso-importante{
  background:var(--color-superficie); border:1px solid var(--color-borde); border-left:4px solid var(--amarillo-oscuro);
  border-radius:8px; padding:16px 18px; font-size:0.85rem; color:var(--color-texto-suave); margin-bottom:22px;
}
.tarjeta-contacto{ background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:16px; padding:28px; }
.fila-contacto{ display:flex; align-items:center; gap:12px; margin-top:14px; font-size:0.92rem; }
.fila-contacto .icono{
  width:38px;height:38px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.fila-contacto .icono img{ width:100%; height:100%; object-fit:contain; }
.fila-contacto .icono svg{ width:20px; height:20px; color:var(--color-texto-suave); }

/* =====================================================================
   SECCIÓN "NUESTROS CURSOS"
   ===================================================================== */
.filtros-cursos{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
.filtro-boton{
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:0.78rem;
  padding:10px 16px; border-radius:999px; border:1px solid var(--color-borde);
  background:var(--color-superficie); color:var(--color-texto-suave); cursor:pointer;
}
.filtro-boton.active{ background:var(--color-texto); color:var(--color-fondo); border-color:var(--color-texto); }
.cursos-cuadricula{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:940px){ .cursos-cuadricula{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .cursos-cuadricula{grid-template-columns:1fr;} }
.curso-tarjeta{
  background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:14px; padding:22px;
  display:flex; flex-direction:column; gap:10px;
}
.curso-tarjeta h3,
#cursoContenido h1,
#cursoContenido h2,
#cursoContenido h3,
#galeria h2{
  font-family:'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif;
}
.curso-tarjeta h3{ font-size:1.02rem; font-weight:700; line-height:1.25; }
.curso-datos{ font-size:0.78rem; color:var(--color-texto-suave); }
.curso-etiquetas{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.boton-curso{ margin-top:auto; align-self:flex-start; }
.curso-tarjeta .curso-etiquetas{ margin-bottom:8px; }
.curso-tarjeta:hover{ border-color:var(--color-negro-puro); }
.etiqueta{ font-family:'Montserrat',sans-serif; font-size:0.66rem; font-weight:700; padding:5px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:0.03em;}
/* Un color de etiqueta distinto por área de curso */
.etiqueta-diseno{ background:var(--rosa-claro); color:#1B1B18; }
.etiqueta-produccion{ background:var(--verde-suave); color:#1B1B18; }
.etiqueta-datos{ background:var(--turquesa); color:#1B1B18; }
.etiqueta-marketing{ background:var(--amarillo); color:#1B1B18; }
.etiqueta-modalidad{ background:transparent; border:1px solid var(--color-borde); color:var(--color-texto-suave); }
.etiqueta-modulo{ background:var(--turquesa-claro); border:1px solid var(--color-borde); color:#1B1B18; margin-left:6px; }

/* =====================================================================
   SECCIÓN "QUIÉNES SOMOS"
   ===================================================================== */
.nosotros-cuadricula{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:44px; align-items:start; }
@media (max-width:900px){ .nosotros-cuadricula{grid-template-columns:1fr;} }
.nosotros-cuadricula p{ color:var(--color-texto-suave); font-size:0.96rem; }
.nosotros-cuadricula p + p{ margin-top:14px; }
.datos-clave{ display:flex; flex-direction:column; gap:14px; }
.dato-clave{ background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:12px; padding:16px 18px; display:flex; gap:12px; align-items:flex-start; }
.dato-clave .icono{ font-size:1.2rem; }
.dato-clave b{ display:block; font-size:0.9rem; }
.dato-clave span{ font-size:0.8rem; color:var(--color-texto-suave); }

/* =====================================================================
   SECCIÓN "EXPERIENCIAS DE EX ALUMNOS" (testimonios)
   ===================================================================== */
.testimonios-cuadricula{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .testimonios-cuadricula{grid-template-columns:1fr;} }
.testimonio-tarjeta{ background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:16px; padding:24px; }
.testimonio-tarjeta p{ font-size:0.9rem; color:var(--color-texto-suave); }
.testimonio-persona{ display:flex; align-items:center; gap:10px; margin-top:16px; }
.avatar-persona{ width:38px;height:38px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#1B1B18; flex:none; }
.testimonio-persona b{ display:block; font-size:0.85rem; }
.testimonio-persona span{ font-size:0.72rem; color:var(--color-texto-suave); }

/* =====================================================================
   SECCIÓN "NOTICIAS" 
   ===================================================================== */
.noticias-cuadricula{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; }
@media (max-width:860px){ .noticias-cuadricula{grid-template-columns:1fr;} }
.noticia-tarjeta{ background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.video-marco{ aspect-ratio:16/9; background:#000; }
.instagram-marco{ height:min(62vw,420px); background:var(--color-superficie-2); overflow:hidden; }
.video-marco iframe, .instagram-marco iframe{ width:100%; height:100%; border:0; display:block; }
.noticia-cuerpo{ padding:20px 22px 24px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.noticia-cuerpo h3{ font-size:1.15rem; }
.noticia-cuerpo p{ margin:0; color:var(--color-texto-suave); font-size:0.88rem; }
.noticia-cuerpo .boton{ margin-top:6px; }

/* =====================================================================
   TARJETAS (Red de Emprendedores / Orientación Sociolaboral)
   ===================================================================== */
.accesos-institucionales{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:760px){ .accesos-institucionales{grid-template-columns:1fr;} }
.acceso-institucional{ background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:16px; padding:26px; text-decoration:none; display:flex; flex-direction:column; gap:8px; }
.acceso-institucional h3{ font-size:1.15rem; }
.acceso-institucional p{ color:var(--color-texto-suave); font-size:0.88rem; margin:0; }
.acceso-institucional .flecha-enlace{ margin-top:10px; font-weight:700; color:var(--color-acento); font-size:0.85rem; }

/* =====================================================================
   SECCIÓN "CONTACTO" 
   ===================================================================== */
.tarjeta-mapa{
  background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:16px;
  padding:20px; display:flex; flex-direction:column; gap:16px;
}
.tarjeta-mapa .mapa-info p{ color:var(--color-texto-suave); font-size:0.88rem; margin:6px 0 0; }
/* El mapa de Google se ve directo adentro de la tarjeta */
.mapa-iframe{
  width:100%;
  height:260px;
  border:0;
  border-radius:12px;
  display:block;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
footer{ border-top:1px solid var(--color-borde); padding:46px 0 26px; }
.footer-cuadricula{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; }
@media (max-width:640px){ .footer-cuadricula{ flex-direction:column; } }
footer h4{ font-family:'Glacial Indifference',sans-serif; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--color-texto-suave); margin-bottom:14px; font-weight:700; }
footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
footer a{ text-decoration:none; font-size:0.85rem; color:var(--color-texto-suave); }
footer a:hover{ color:var(--color-acento); }
.redes-sociales{ display:flex; gap:10px; margin-top:14px; }
.redes-sociales a{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center; overflow:hidden;
  transition:transform .15s ease;
}
.redes-sociales a:hover{ transform:translateY(-2px); }
.redes-sociales a img{ width:100%; height:100%; object-fit:contain; }
.footer-final{ margin-top:36px; padding-top:18px; border-top:1px solid var(--color-borde); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:0.74rem; color:var(--color-texto-suave); }

/* =====================================================================
   ENCABEZADO DE PÁGINA INTERNA (emprendedores.html, sociolaboral.html)
   ===================================================================== */
.pagina-hero{ padding:clamp(34px,6vw,64px) 0 10px; }
.pagina-hero .aviso-importante{ margin-bottom:22px; }
.titulo-pagina{ font-size:clamp(2rem,4.6vw,3.1rem); line-height:1.06; margin-top:14px; max-width:20ch; }
.titulo-pagina .resaltado{ color:var(--color-acento); }
.texto-pagina{ color:var(--color-texto-suave); font-size:0.98rem; max-width:62ch; margin:16px 0 0; }
.pagina-2col{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:44px; align-items:start; }
@media (max-width:900px){ .pagina-2col{ grid-template-columns:1fr; } }
.pagina-foto{
  position:relative; aspect-ratio:4/3; border-radius:18px; overflow:hidden;
  background:var(--color-superficie-2); border:1px solid var(--color-borde);
  display:flex; align-items:center; justify-content:center;
}
.pagina-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pagina-foto .emp-foto-vacia{ position:relative; z-index:0; font-size:2.4rem; }

/* =====================================================================
   RED DE EMPRENDEDORES — tarjetas de emprendedores y galería de feria
   ===================================================================== */
.emp-cuadricula{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
@media (max-width:980px){ .emp-cuadricula{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .emp-cuadricula{ grid-template-columns:repeat(2,1fr); } }
.emp-tarjeta{
  background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:14px;
  padding:14px; text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:transform .15s ease, border-color .15s ease; text-align:center;
}
.emp-tarjeta:hover{ transform:translateY(-3px); border-color:var(--color-negro-puro); }
.emp-foto{
  position:relative; width:100%; aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  background:var(--color-superficie-2); display:flex; align-items:center; justify-content:center;
}
.emp-foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.emp-foto-vacia{ position:relative; z-index:0; font-size:1.5rem; color:var(--color-texto-suave); }
.emp-nombre{ font-size:0.76rem; font-weight:700; word-break:break-word; }
.llamado-red{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.llamado-red h3{ font-size:1.15rem; }
@media (max-width:640px){ .llamado-red{ flex-direction:column; align-items:flex-start; } .llamado-red .boton{ width:100%; justify-content:center; } }

/* =====================================================================
   PROGRAMAS INSTITUCIONALES (sociolaboral.html)
   ===================================================================== */
.programas-cuadricula{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:860px){ .programas-cuadricula{ grid-template-columns:1fr; } }

/* =====================================================================
   PÁGINA DE CADA CURSO (curso.html)
   ===================================================================== */
.curso-volver{ display:inline-block; text-decoration:none; font-weight:700; font-size:0.82rem; color:var(--color-texto-suave); margin-bottom:22px; }
.curso-volver:hover{ color:var(--color-acento); }
.curso-pagina{ padding:clamp(34px,6vw,64px) 0 30px; }
.curso-pagina h1{ font-size:clamp(1.9rem,4.6vw,3.2rem); line-height:1.08; margin:14px 0 18px; max-width:22ch; }
.curso-fichas{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.curso-ficha{ background:var(--color-superficie); border:1px solid var(--color-borde); border-radius:12px; padding:12px 16px; min-width:150px; }
.curso-ficha small{ display:block; font-size:0.64rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:var(--color-texto-suave); }
.curso-ficha b{ font-size:0.92rem; }
.curso-descripcion{ max-width:70ch; color:var(--color-texto-suave); font-size:1rem; }
.curso-descripcion p{ margin:0 0 14px; }
.curso-requisitos{
  margin-top:18px; background:var(--color-superficie); border:1px solid var(--color-borde); border-left:4px solid var(--color-acento);
  border-radius:8px; padding:18px 20px; max-width:70ch;
}
#cursoContenido.curso-acento-diseno .curso-requisitos{ border-left-color:var(--rosa-oscuro); }
#cursoContenido.curso-acento-diseno .boton-inscribir{ background:var(--rosa-oscuro); color:#fff; }
#cursoContenido.curso-acento-produccion .curso-requisitos{ border-left-color:var(--verde-suave-oscuro); }
#cursoContenido.curso-acento-produccion .boton-inscribir{ background:var(--verde-suave-oscuro); color:#1B1B18; }
#cursoContenido.curso-acento-datos .curso-requisitos{ border-left-color:var(--turquesa-oscuro); }
#cursoContenido.curso-acento-datos .boton-inscribir{ background:var(--turquesa-oscuro); color:#fff; }
#cursoContenido.curso-acento-marketing .curso-requisitos{ border-left-color:var(--amarillo-oscuro); }
#cursoContenido.curso-acento-marketing .boton-inscribir{ background:var(--amarillo-oscuro); color:#1B1B18; }
.curso-requisitos h3{ font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-texto); margin-bottom:10px; }
.curso-requisitos ul{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:8px; }
.curso-requisitos li{ font-size:0.88rem; color:var(--color-texto-suave); }
.galeria-cuadricula{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:760px){ .galeria-cuadricula{grid-template-columns:repeat(2,1fr);} }
.galeria-foto{ aspect-ratio:4/3; border-radius:12px; overflow:hidden; border:1px solid var(--color-borde); background:var(--color-superficie-2); padding:0; cursor:zoom-in; }
.galeria-foto img, .galeria-foto video{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.galeria-foto:hover img, .galeria-foto:hover video{ transform:scale(1.04); }
.galeria-vacia{ aspect-ratio:4/3; border-radius:12px; border:1.5px dashed var(--color-borde); background:var(--color-superficie-2); display:flex; align-items:center; justify-content:center; color:var(--color-texto-suave); font-size:0.8rem; font-weight:700; }
.visor{ position:fixed; inset:0; z-index:100; background:rgba(0,0,0,0.88); display:none; align-items:center; justify-content:center; padding:24px; }
.visor.abierto{ display:flex; }
.visor img, .visor video{ max-width:100%; max-height:100%; border-radius:8px; }
.visor-cerrar{ position:absolute; top:calc(16px + env(safe-area-inset-top,0px)); right:18px; width:42px; height:42px; border-radius:50%; border:0; font-size:1.3rem; cursor:pointer; background:#fff; color:#111; z-index:2; }
.visor-flecha{
  position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:0;
  font-size:1.7rem; line-height:1; cursor:pointer; background:rgba(255,255,255,0.92); color:#111;
  display:flex; align-items:center; justify-content:center; z-index:2; transition:background .15s ease;
}
.visor-flecha:hover{ background:#fff; }
.visor-prev{ left:calc(14px + env(safe-area-inset-left,0px)); }
.visor-next{ right:calc(14px + env(safe-area-inset-right,0px)); }
@media (max-width:640px){ .visor-flecha{ width:40px; height:40px; font-size:1.4rem; } }