/* ============================================================
   Técnicos El Pilar Ancud — estilos propios (sobre Bootstrap 5.3)
   ============================================================
   Sistema de color: cada especialidad tiene su propio color,
   como una insignia (badge) de taller/carrera técnica:
     Administración -> azul   (--c-admin)
     Turismo        -> teal   (--c-turismo)
     Programación   -> violeta(--c-prog)
     Gastronomía    -> coral  (--c-gastro)
   ============================================================ */

:root {
	--c-bg: #F7F8FB;
	--c-ink: #131B33;
	--c-ink-soft: #4B5372;
	--c-line: #E4E7F0;

	--c-admin: #2F6FED;
	--c-admin-soft: #E8F0FF;
	--c-turismo: #00A79A;
	--c-turismo-soft: #E3F7F4;
	--c-prog: #7C5CFC;
	--c-prog-soft: #EFE9FF;
	--c-gastro: #FF6B4A;
	--c-gastro-soft: #FFEBE5;

	--c-accent: #FFC857;

	--font-display: "Space Grotesk", sans-serif;
	--font-body: "Inter", sans-serif;

	--radius: 18px;
	--shadow-soft: 0 12px 30px -14px rgba(19, 27, 51, 0.25);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--font-body);
	padding-top: 76px; /* alto navbar fija */
}

h1, h2, h3, .brand-text, .btn-hero-primary, .btn-hero-outline {
	font-family: var(--font-display);
}

a { text-decoration: none; }

/* ---------------- NAVBAR ---------------- */
.nav-pilar {
	background: rgba(19, 27, 51, 0.92);
	backdrop-filter: blur(8px);
	padding: .65rem 0;
	transition: background .25s ease;
}

.brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--c-prog), var(--c-admin));
	color: #fff;
	font-weight: 700;
	font-size: .85rem;
	margin-right: .55rem;
}

.brand-text { color: #fff; font-weight: 600; letter-spacing: .2px; }

.nav-pilar .nav-link {
	color: rgba(255,255,255,.85);
	font-weight: 500;
	padding: .5rem .85rem !important;
}

.nav-pilar .nav-link:hover,
.nav-pilar .nav-link:focus {
	color: #fff;
}

.nav-pilar .nav-cta {
	background: var(--c-accent);
	color: var(--c-ink) !important;
	border-radius: 999px;
	padding: .45rem 1rem !important;
	font-weight: 600;
}

.nav-pilar .dropdown-menu {
	border: none;
	border-radius: 14px;
	box-shadow: var(--shadow-soft);
	padding: .5rem;
}

.nav-pilar .dropdown-item {
	border-radius: 10px;
	padding: .5rem .75rem;
}

.nav-pilar .dropdown-item:hover { background: var(--c-prog-soft); }

/* ---------------- HERO ---------------- */
.hero {
	position: relative;
	background: radial-gradient(120% 140% at 10% 0%, #1B2A54 0%, var(--c-ink) 55%, #0F1730 100%);
	color: #fff;
	padding: 6.5rem 0 5.5rem;
	overflow: hidden;
}

.hero-badges {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.chip {
	position: absolute;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.3rem;
	color: #fff;
	opacity: .9;
	transform: rotate(-6deg);
	animation: float 7s ease-in-out infinite;
}

.chip-admin { background: var(--c-admin); top: 12%; left: 6%; animation-delay: 0s; }
.chip-turismo { background: var(--c-turismo); top: 65%; left: 14%; animation-delay: 1.2s; transform: rotate(8deg); }
.chip-prog { background: var(--c-prog); top: 20%; right: 8%; animation-delay: .6s; transform: rotate(10deg); }
.chip-gastro { background: var(--c-gastro); top: 68%; right: 12%; animation-delay: 1.8s; transform: rotate(-10deg); }

@keyframes float {
	0%, 100% { transform: translateY(0) rotate(-6deg); }
	50% { transform: translateY(-14px) rotate(-2deg); }
}

@media (max-width: 767.98px) {
	.chip { display: none; } /* despejamos el hero en móvil */
}

.hero-content { position: relative; max-width: 720px; }

.eyebrow {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .78rem;
	font-weight: 600;
	color: var(--c-accent);
	margin-bottom: .75rem;
}

.hero-title {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 700;
	line-height: 1.08;
	margin-bottom: 1.1rem;
}

.hero-title span { color: var(--c-accent); }

.hero-copy {
	font-size: 1.05rem;
	color: rgba(255,255,255,.82);
	max-width: 540px;
	margin-bottom: 2rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.btn-hero-primary {
	background: var(--c-accent);
	color: var(--c-ink);
	font-weight: 600;
	border-radius: 999px;
	padding: .75rem 1.6rem;
	border: none;
}
.btn-hero-primary:hover { filter: brightness(1.05); color: var(--c-ink); }

.btn-hero-outline {
	background: transparent;
	color: #fff;
	font-weight: 600;
	border-radius: 999px;
	padding: .75rem 1.6rem;
	border: 1.5px solid rgba(255,255,255,.5);
}
.btn-hero-outline:hover { border-color: #fff; color: #fff; }

/* ---------------- SECCIONES GENÉRICAS ---------------- */
.section { padding: 5rem 0; }

.section-eyebrow {
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .75rem;
	font-weight: 700;
	color: var(--c-prog);
	margin-bottom: .4rem;
}

.section-title {
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	font-weight: 700;
	margin-bottom: 0;
}

/* ---------------- CARDS DE ESPECIALIDAD (perfil de egreso) ---------------- */
.card-especialidad {
	position: relative;
	background: #fff;
	border-radius: var(--radius);
	padding: 2rem 1.75rem 1.75rem;
	height: 100%;
	box-shadow: var(--shadow-soft);
	border-top: 4px solid transparent;
}

.card-especialidad h3 { font-weight: 700; margin: .9rem 0 .1rem; }
.card-especialidad .mencion { color: var(--c-ink-soft); font-weight: 600; font-size: .88rem; margin-bottom: .75rem; }
.card-especialidad p:last-child { color: var(--c-ink-soft); font-size: .95rem; margin-bottom: 0; }

.badge-letra {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: #fff;
}

.card-admin { border-top-color: var(--c-admin); }
.card-admin .badge-letra { background: var(--c-admin); }

.card-turismo { border-top-color: var(--c-turismo); }
.card-turismo .badge-letra { background: var(--c-turismo); }

.card-prog { border-top-color: var(--c-prog); }
.card-prog .badge-letra { background: var(--c-prog); }

.card-gastro { border-top-color: var(--c-gastro); }
.card-gastro .badge-letra { background: var(--c-gastro); }

/* ---------------- DOCENTES ---------------- */
.section-docentes { background: #fff; }

.card-docente {
	background: var(--c-bg);
	border-radius: var(--radius);
	overflow: hidden;
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease;
}

.card-docente:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-soft);
}

.card-docente img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.card-docente-body { padding: 1.25rem 1.35rem 1.5rem; }
.card-docente-body h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .15rem; }
.card-docente-body .cargo { color: var(--c-prog); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem; }
.card-docente-body .titulo-prof { color: var(--c-ink-soft); font-size: .88rem; margin-bottom: .4rem; }
.card-docente-body p { font-size: .88rem; color: var(--c-ink-soft); }
.card-docente-body .mail-link { font-size: .82rem; color: var(--c-admin); font-weight: 600; word-break: break-all; }

/* ---------------- LOGOS / ESPECIALIDADES ---------------- */
.logo-card {
	display: block;
	background: #fff;
	border-radius: var(--radius);
	padding: 1.75rem 1rem;
	height: 100%;
	box-shadow: var(--shadow-soft);
	color: var(--c-ink);
	transition: transform .2s ease;
}

.logo-card:hover { transform: translateY(-4px); color: var(--c-ink); }

.logo-card img { max-width: 72px; margin-bottom: .9rem; }
.logo-card h3 { font-size: .95rem; font-weight: 700; margin: 0; }

.logo-admin h3 { color: var(--c-admin); }
.logo-turismo h3 { color: var(--c-turismo); }
.logo-prog h3 { color: var(--c-prog); }
.logo-gastro h3 { color: var(--c-gastro); }

/* ---------------- FOOTER ---------------- */
footer {
	background: var(--c-ink);
	color: rgba(255,255,255,.85);
	padding: 3rem 0 1.5rem;
}

.footer-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
}

.footer-brand h2 { font-size: 1.15rem; margin-bottom: .2rem; }
.footer-brand p { color: rgba(255,255,255,.6); font-size: .88rem; margin: 0; }

.social-media { display: flex; gap: .9rem; }

.social-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.08);
	color: #fff;
	font-size: 1.15rem;
	border: none;
}

.social-icon:hover { background: var(--c-accent); color: var(--c-ink); }

.footer-line {
	max-width: 1140px;
	margin: 1.5rem auto 0;
	height: 1px;
	background: rgba(255,255,255,.12);
}

/* ---------------- MODAL CONSULTA ---------------- */
.modal-consulta { border-radius: var(--radius); border: none; overflow: hidden; }
.modal-consulta .modal-header { border-bottom: 1px solid var(--c-line); }
.modal-consulta .modal-title { font-family: var(--font-display); font-weight: 700; }

.btn-enviar {
	background: var(--c-prog);
	color: #fff;
	font-weight: 600;
	border-radius: 999px;
	padding: .5rem 1.4rem;
	border: none;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.btn-enviar:hover { background: #6a49ec; color: #fff; }
.btn-enviar:disabled { opacity: .7; }

/* ---------------- UTILIDADES ---------------- */
@media (prefers-reduced-motion: reduce) {
	.chip { animation: none; }
	html { scroll-behavior: auto; }
}