/* Páginas de carrera (/carreras/...): datos clave, materias, preguntas frecuentes. Usa las variables de itec.css. */
.carrera-area { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: 99px; border: 1px solid; font-size: .8rem; font-weight: 700; margin-bottom: .8rem; background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .3); }
.carrera-botones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.seccion.carrera { padding-top: 3rem; }
.carrera h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--marino); margin: 2.2rem 0 .8rem; }
.carrera-datos { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.carrera-datos li { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1rem 1.1rem; display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center; }
.carrera-datos i { grid-row: span 2; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--azul-claro); color: var(--azul); font-size: 1.25rem; }
.carrera-datos span { font-size: .8rem; color: var(--suave); }
.carrera-datos b { color: var(--marino); font-size: 1rem; }
.carrera-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.5rem; align-items: start; }
.carrera-columnas p { color: #33475b; line-height: 1.7; }
.carrera-materias { counter-reset: m; list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem .9rem; }
.carrera-materias li { counter-increment: m; display: flex; gap: .65rem; align-items: flex-start; background: var(--fondo); border-radius: 10px; padding: .6rem .8rem; font-size: .95rem; color: var(--marino); }
.carrera-materias li::before { content: counter(m); flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--azul); color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center; }
.enlace-pdf { display: inline-flex; gap: .4rem; align-items: center; font-weight: 700; color: var(--azul); }
.carrera-lateral { position: sticky; top: 100px; margin-top: 2.2rem; }
.carrera-lateral .tarjeta { display: grid; gap: .8rem; }
.carrera-lateral .tarjeta:hover { transform: none; }
.carrera-lateral .boton { width: 100%; justify-content: center; }
.carrera-faq { display: grid; gap: .6rem; max-width: 52rem; }
.carrera-faq details { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 0 1.1rem; }
.carrera-faq summary { cursor: pointer; padding: 1rem 0; font-weight: 700; color: var(--marino); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.carrera-faq summary::-webkit-details-marker { display: none; }
.carrera-faq summary::after { content: '+'; font-size: 1.3rem; line-height: 1; color: var(--azul); }
.carrera-faq details[open] summary::after { content: '−'; }
.carrera-faq details p { margin: 0 0 1rem; color: #33475b; line-height: 1.65; }
.carrera-relacionada { display: block; color: inherit; text-decoration: none; }
.carrera-relacionada .area-tag { margin-bottom: .6rem; }
@media (max-width: 960px) {
    .carrera-datos { grid-template-columns: repeat(2, 1fr); }
    .carrera-columnas { grid-template-columns: 1fr; gap: 0; }
    .carrera-lateral { position: static; }
}
@media (max-width: 560px) {
    .carrera-materias { grid-template-columns: 1fr; }
    .carrera-datos li { padding: .8rem; }
}