/* Palabra 'Ingeniería' en gris claro */
.ingenieria-gris {
  color: #d1d1d6;
}
/* Título Ingeniería Nuclear en la parte inferior izquierda */
.ingenieria-title-wrap {
  display: flex;
  align-items: flex-end;
  position: absolute;
  left: 0;
  bottom: 7.2rem;
  z-index: 2;
  padding-left: 0.5rem;
}

h1.section__title.ingenieria-nuclear-title {
  font-size: 3.2rem;
  font-weight: 600; /* thinner to match hero */
  color: #fff;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.04rem;
  text-shadow: 0 2px 16px #000a;
}

/* Ensure thin weight even if section-level rules use !important */
.hero-description h1.section__title.ingenieria-nuclear-title,
.tecnologia-nuclear h1.section__title.ingenieria-nuclear-title,
.unique-symmetry h1.section__title.ingenieria-nuclear-title {
  font-weight: 600 !important;
}

/* Match Medicina page H1 typography for index section titles */
.hero-description h1.section__title.ingenieria-nuclear-title,
.innovating-response h1.section__title.ingenieria-nuclear-title,
.unique-symmetry h1.section__title.ingenieria-nuclear-title {
  font-family: 'Roboto', Helvetica Neue, sans-serif !important;
  font-size: 4rem !important;
  font-weight: 400 !important;
  letter-spacing: -.04rem !important;
  line-height: 92% !important;
}
@media (min-width: 900px) {
  .hero-description h1.section__title.ingenieria-nuclear-title,
  .innovating-response h1.section__title.ingenieria-nuclear-title,
  .unique-symmetry h1.section__title.ingenieria-nuclear-title {
    font-size: 6.4rem !important;
    letter-spacing: -.128rem !important;
    line-height: 89% !important;
  }
}

/* Hero (top): make Ingeniería Nuclear match Medicina H1 exactly */
.tecnologia-nuclear .section-footer h1.section__title.ingenieria-nuclear-title {
  font-family: 'Roboto', Helvetica Neue, sans-serif !important;
  font-size: 4rem !important;
  font-weight: 400 !important; /* override earlier 600 */
  letter-spacing: -.04rem !important;
  line-height: 92% !important;
}
@media (min-width: 900px) {
  .tecnologia-nuclear .section-footer h1.section__title.ingenieria-nuclear-title {
    font-size: 6.4rem !important;
    letter-spacing: -.128rem !important;
    line-height: 89% !important;
  }
}

/* Física Médica: mismo tipo de letra y escala que Tecnología Nuclear */
.fisica-medica .section-footer h1.section__title.ingenieria-nuclear-title {
  font-family: 'Roboto', Helvetica Neue, sans-serif !important;
  font-size: 4rem !important;
  font-weight: 400 !important;
  letter-spacing: -.04rem !important;
  line-height: 92% !important;
}
@media (min-width: 900px) {
  .fisica-medica .section-footer h1.section__title.ingenieria-nuclear-title {
    font-size: 6.4rem !important;
    letter-spacing: -.128rem !important;
    line-height: 89% !important;
  }
}

@media (min-width: 900px) {
  h1.section__title.ingenieria-nuclear-title {
    font-size: 5.2rem;
  }
  .ingenieria-title-wrap {
    bottom: 8.2rem;
    padding-left: 1.2rem;
  }
}

/* Ajuste para que el footer tenga posición relativa y permita el posicionamiento absoluto del título */
.section-footer__left {
  position: relative;
  min-height: 6.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 0.5rem;
}

@media (min-width: 900px) {
  .section-footer__left {
    padding-left: 1.2rem;
  }
}
/* Scroll Indicator (global fijo y por-sección) */
/* Base visual shared */
#scroll-indicator,
.scroll-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 32px;
  opacity: 0.96;
  pointer-events: none;
  filter: drop-shadow(0 4px 16px #745adb55);
  z-index: 20000;
}
#scroll-indicator svg,
.scroll-indicator svg { width: 64px; height: 32px; display: block; }

/* Global: fijo al centro inferior */
#scroll-indicator {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(16px, calc(12px + env(safe-area-inset-bottom)), 36px);
}

/* Por sección: absoluto dentro de la sección */
.scroll-indicator {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(12px, calc(10px + env(safe-area-inset-bottom)), 24px);
  z-index: 120; /* debajo del nav/menu overlay */
}

/* tamaños en móvil */
@media (max-width: 900px) {
  #scroll-indicator,
  .scroll-indicator { width: 44px; height: 22px; }
  #scroll-indicator svg,
  .scroll-indicator svg { width: 44px; height: 22px; }
}

/* Pulse + slight bounce to make it more visible */
@keyframes v-pulse {
  0% { transform: translateX(-50%) translateY(0) scale(1); opacity: 0.96; }
  50% { transform: translateX(-50%) translateY(-4px) scale(1.04); opacity: 1; }
  100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 0.96; }
}
#scroll-indicator, .scroll-indicator { animation: v-pulse 1.8s ease-in-out infinite; }

/* Smooth fade/out when hidden */
#scroll-indicator.scroll-indicator--hidden, .scroll-indicator.scroll-indicator--hidden {
  opacity: 0;
  bottom: 24px; /* pequeño ajuste hacia arriba al ocultar */
  animation: none; /* detener pulso mientras está oculto */
}

/* Ensure SVG stroke is vivid */
#scroll-indicator path#scroll-indicator-v, .scroll-indicator path#scroll-indicator-v {
  stroke: #e6e6e6; /* gris muy tenue */
  stroke-width: 6;
}

/* Cursos: en móvil, ocultar el indicador global fijo y usar los por sección */
@media (max-width: 900px) {
  body.page-cursos #scroll-indicator { display: none !important; }
  body.page-cursos .scroll-indicator { display: flex !important; }
}

/* Hide native vertical scrollbar but keep scrolling (global) */
html, body {
  -ms-overflow-style: none; /* IE 10+ */
  scrollbar-width: none;    /* Firefox */
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent;
}
/* Base Variables */
:root {
    --color-black: #000;
    --color-white: #fff;
    --color-grey-on-white: #8f8f92;
    --color-grey-on-black: #b2b2b3;
  --color-neutral-800: #333;
    --color-purple: #745adb;
    --content-radius: 12px;
    --nav-height: 3.3rem;
    --logo-width: 7.9rem;
    --logo-height: 2.5rem;
    --ui-font: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

@media (min-width: 900px) {
    :root {
        --nav-height: 4rem;
        --content-radius: 20px;
        --logo-width: 13.7rem;
        --logo-height: 4.4rem;
    }
}

/* Reset & Base Styles */
* {
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

html {
    font-size: 10px;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-white);
  color: var(--color-neutral-800);
    font-family: var(--ui-font);
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: .026rem;
    line-height: 135%;
    overscroll-behavior: none;
}

@media (min-width: 900px) {

/* Uniform spacing: match hero gap between H1 and subtitle (0.5rem) */
.hero-description h1.section__title.ingenieria-nuclear-title,
.innovating-response h1.section__title.ingenieria-nuclear-title,
.unique-symmetry h1.section__title.ingenieria-nuclear-title,
.tecnologia-nuclear h1.section__title.ingenieria-nuclear-title {
  margin: 0 0 0.5rem 0 !important;
}

.hero-description .section-footer .text-small-detail,
.innovating-response .section-footer .text-small-detail,
.unique-symmetry .section-footer .text-small-detail,
.tecnologia-nuclear .section-footer .text-small-detail {
  margin: 0 !important;
  padding: 0 !important; /* remove any section-specific padding */
}
    body {
        font-size: 1.5rem;
        letter-spacing: .015rem;
        line-height: 134%;
    }
}

img, video {
    object-fit: cover;
    width: 100%;
}

svg {
    display: block;
    overflow: visible;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    outline: none;
    padding: 0;
}

/* Typography */
.text-h1 {
    font-family: 'Roboto', Helvetica Neue, sans-serif;
    font-size: 4rem;
    font-weight: 400;
    letter-spacing: -.04rem;
    line-height: 92%;
}

@media (min-width: 900px) {
    .text-h1 {
        font-size: 6.4rem;
        letter-spacing: -.128rem;
        line-height: 89%;
    }
}

.text-h2 {
    font-family: 'Roboto', Helvetica Neue, sans-serif;
    font-size: 2.2rem;
    font-weight: 400;
    letter-spacing: -.022rem;
    line-height: 105%;
}

.text-h2 span {
    color: var(--color-grey-on-white);
}

@media (min-width: 900px) {
    .text-h2 {
        font-size: 3.6rem;
    }
}

.text-h3 {
    font-family: 'Roboto', Helvetica Neue, sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 118%;
}

@media (min-width: 900px) {
    .text-h3 {
        font-size: 2.7rem;
        line-height: 110%;
    }
}

.text-h4 {
    font-family: 'Roboto', Helvetica Neue, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: .016rem;
    line-height: 1.3;
}

@media (min-width: 900px) {
    .text-h4 {
        font-size: 1.8rem;
        letter-spacing: .018rem;
    }
}

.text-body {
    font-family: 'Roboto', Helvetica Neue, sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: .026rem;
    line-height: 135%;
}

@media (min-width: 900px) {
    .text-body {
        font-size: 1.5rem;
        letter-spacing: .015rem;
        line-height: 134%;
    }
}

.text-extra-large-intro {
    font-family: 'Roboto', Helvetica Neue, sans-serif;
    font-size: 5.6rem;
    font-weight: 400;
    letter-spacing: -.352rem;
    line-height: 86%;
}

@media (min-width: 900px) {
    .text-extra-large-intro {
        font-size: 8.8rem;
        line-height: 78%;
    }
}

.text-small-detail {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .1rem;
    line-height: 1;
    text-transform: uppercase;
    font-family: 'Roboto', Helvetica Neue, sans-serif;
}

/* Ensure small-detail overlays on these three sections render in white */
.hero-description .section-footer .text-small-detail,
.innovating-response .section-footer .text-small-detail,
.unique-symmetry .section-footer .text-small-detail {
  color: #fff;
}

/* Layout Helpers */
.max-width {
    left: 0;
    margin: 0 2rem;
    max-width: 100%;
    position: relative;
    right: 0;
}

@media (min-width: 900px) {
    .max-width {
        margin: 0 3rem;
    }
}

.grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 0 1rem;
}

@media (min-width: 900px) {
    .grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 0 1.6rem;
    }
}

.fill {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.fill-fixed {
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

.fill-media {
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
}

.sticky {
    height: 100vh;
    position: sticky;
    top: 0;
}

.content-radius {
    border-radius: var(--content-radius);
}

.hidden {
    display: none !important;
}

.no-pointer {
    pointer-events: none;
}

/* Utilities */
@media (min-width: 900px) {
    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 899px) {
    .desktop-only {
        display: none !important;
    }
}

/* Components */
/* Page Loader */
.page-loader {
    background-color: #fff;
    height: 100vh;
    left: 0;
    opacity: 1;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 11;
}

.page-loader__inner {
    align-items: center;
    display: flex;
    height: 100vh;
}

.page-loader__logo {
    grid-column: 1/-1;
}

@media (min-width: 900px) {
    .page-loader__logo {
        grid-column: 2/4;
    }
}

.page-loader__icon {
    height: 4.4rem;
    width: 13.7rem;
}

.page-loader__text {
    grid-column: 1/-1;
    margin-top: 6.4rem;
}

@media (min-width: 900px) {
    .page-loader__text {
        grid-column: 4/6;
        margin-top: 0;
    }
}

.page-loader__progress {
    animation: progress-anim 1s ease-out .3s forwards;
    background-color: #745adb;
    height: 4px;
    left: 0;
    position: fixed;
    top: calc(100vh - 4px);
    transform: scaleX(0);
    transform-origin: left center;
    width: 100%;
    z-index: 11;
}

@keyframes progress-anim {
    to {
        transform: scaleX(1);
    }
}

/* Loader / scroll control */
body.no-scroll{overflow:hidden;height:100vh;touch-action:none}
.page-loader{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;

/* =============================
   TIPOGRAFÍA GLOBAL DE MENÚS
   Unifica tamaños en todas las páginas
   Base: index.html
   ============================= */
:root {
  --nav-font-desktop: 1.44rem;      /* ~14.4px con html=10px */
  --nav-font-mobile: 1.12rem;       /* ~11.2px */
  --nav-letter-desktop: 0.096rem;   /* tracking consistente */
  --nav-letter-mobile: 0.064rem;
}

/* Enlaces del nav superior y del menú lateral: misma escala siempre */
.nav__links-list a,
.nav__links-list .nav__link a,
.menu__list a {
  font-family: var(--ui-font) !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  font-size: var(--nav-font-desktop) !important;
  letter-spacing: var(--nav-letter-desktop) !important;
}

@media (max-width: 720px) {
  .nav__links-list a,
  .nav__links-list .nav__link a,
  .menu__list a {
    font-size: var(--nav-font-mobile) !important;
    letter-spacing: var(--nav-letter-mobile) !important;
  }
}

/* Espaciamiento y separación consistentes (base: index) */
.nav__links-list { gap: 12px !important; }
.nav__links-list .nav__link a {
  padding: 0 10px !important;
  word-spacing: normal !important; /* evitar variaciones por página */
}
@media (max-width: 880px){
  .nav__links-list { gap: 10px !important; }
  .nav__links-list .nav__link a { padding: 6px 8px !important; }
}

/* Menú lateral: mantener coherencia tipográfica y de espaciado de palabras */
.menu__list a { word-spacing: normal !important; }
  justify-content:center;
  flex-direction:column;
  z-index:9999;
  background:#fff;
  transform: translateY(0);
  will-change: transform;
  transition: transform 1s cubic-bezier(.4,1,.6,1);
}
.page-loader.hidden{
  pointer-events:none;
  transform: translateY(-100vh);
}
.page-loader .page-loader__progress{width:240px;height:4px;background:#e6eef4;border-radius:2px;overflow:hidden}
.page-loader .page-loader__progress::after{content:"";display:block;height:100%;width:0%;background:var(--accent, #0b6b9a);animation:loader-fill 1.6s linear forwards}
@keyframes loader-fill{to{width:100%}}

/* Navigation */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo+links on left, button on right */
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(30,30,40,0.55); /* Más oscuro y más transparente */
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
  border-bottom: 1.5px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-radius: 18px;
  margin: 18px 24px;
  transition: background 0.3s, box-shadow 0.3s;
  padding: 12px 20px;
}

.nav.is-hidden {
    transform: translateY(-10rem);
}

.nav[theme="dark"] {
    color: #fff;
}

@media (min-width: 900px) {
    .nav {
        --margin: 2rem;
        top: var(--margin);
    }
}

.nav__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto; /* allow links to use space and keep button to the right */
}

.menu-open .nav__left {
    opacity: 0;
    transition-delay: 0s;
}

.nav__logo-icon {
    height: var(--nav-height);
    width: 6rem;
}

@media (min-width: 900px) {
    .nav__logo-icon {
        width: 7rem;
    }
}

.nav__links-list {
    align-items: center;
    display: flex;
    gap: 3.2rem;
    justify-content: space-between;
  padding-right: 3.8rem;
  padding-left: 3.8rem; /* equilibrar espacio lateral como el izquierdo */
    font-family: var(--ui-font);
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: none; /* cambia si quieres mayúsculas */
}

.nav__link {
    height: var(--nav-height);
}

.nav__item {
    display: flex;
    height: 100%;
    line-height: 1;
    padding-top: 1.6rem;
    position: relative;
    white-space: nowrap;
}

@media (min-width: 900px) {
    .nav__item {
        padding: 2.2rem 0 0;
    }
}

.nav__arrow {
    height: .6rem;
    margin-left: .6rem;
    position: relative;
    width: .6rem;
}

/* Menu Button */
.menu-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 8px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10001;
  flex: 0 0 auto;
}

.menu-btn.hide-links {
    pointer-events: none;
}

.menu-btn__overlay {
    background-color: #000;
    border-radius: .6rem;
    clip-path: inset(100% 0 0 0 round .6rem);
    height: 100%;
    left: 0;
    opacity: .8;
    position: absolute;
    top: 0;
    transition: clip-path .5s cubic-bezier(.215, .61, .355, 1);
    width: 100%;
}

@media (pointer: fine) {
    .menu-btn:hover .menu-btn__overlay {
        clip-path: inset(0 0 0 0 round .6rem);
    }
}

.menu-btn__item {
    display: flex;
    line-height: 1;
    position: absolute;
    top: 1.6rem;
    will-change: opacity, transform;
}

@media (min-width: 900px) {
    .menu-btn__item {
        top: 2.2rem;
    }
}

.menu-btn__ring {
    height: 1rem;
    position: absolute;
    right: .5rem;
    top: .5rem;
    width: 1rem;
}

.menu-btn__ring .icon {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    fill: none;
}

.menu-btn__close {
    height: .8rem;
    position: absolute;
    right: .6rem;
    top: .6rem;
    width: .8rem;
    stroke: currentColor;
    stroke-width: 3;
}

.menu-btn__close .icon {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/* Menu */
.menu-wrap {
    pointer-events: none;
    visibility: hidden;
    transition: visibility .18s linear;
}

.menu-wrap.active {
    pointer-events: auto;
}

.menu-wrap.visible {
    visibility: visible;
}

.menu-wrap.open {
  pointer-events: auto;
  visibility: visible;
}

/* Asegurar que el menú desplegable flote sobre el vídeo y sea clicable */
.menu-wrap {
  position: fixed !important;
  inset: 0 !important;
  z-index: 16000 !important;            /* por encima del hero/video y del nav */
  pointer-events: none !important;      /* habilitar sólo cuando está abierto */
}

/* Underlay (fondo oscuro detrás del panel) */
.menu__underlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.45) !important;
  opacity: 0;
  transition: opacity .28s ease;
  z-index: 15990 !important;
  pointer-events: none;
}

/* Panel lateral del menú */
.menu {
  position: fixed !important;
  top: calc(16px + var(--nav-height, 56px) + 8px) !important; /* justo debajo del nav */
  right: 24px !important;                                    /* alinear con el nav */
  width: min(420px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 48px) !important;
  background: #ffffff !important;
  transform: translateX(110%) !important;                    /* oculto por la derecha */
  transition: transform .32s cubic-bezier(.2,.9,.3,1), opacity .24s ease !important;
  z-index: 16010 !important;                                 /* encima del underlay y nav */
  box-shadow: 0 30px 60px rgba(2,6,23,0.12) !important;
  overflow-y: scroll !important;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  border-radius: 12px !important;
  pointer-events: auto !important;
}
.menu::-webkit-scrollbar { display: none; }

/* Estado abierto: underlay visible y panel dentro de la pantalla */
.menu-wrap.open {
  pointer-events: auto !important;
}
.menu-wrap.open .menu__underlay {
  opacity: 1 !important;
  pointer-events: auto !important;
}
.menu-wrap.open .menu {
  transform: translateX(0) !important;
}

/* Asegurar botón del menú por encima para poder abrirlo */
#menu-btn,
#site-nav .menu-btn {
  position: relative;                /* crea stacking context local */
  z-index: 17000 !important;         /* por encima de overlays cercanos */
  pointer-events: auto !important;   /* asegúralo clickeable */
}

/* Mobile: ajusta márgenes laterales */
@media (max-width: 900px) {
  .menu { right: 12px !important; width: min(360px, calc(100vw - 24px)) !important; top: calc(8px + var(--nav-height, 48px) + 6px) !important; }
}

/* Footer */
.footer {
    background-color: #151515;
    padding-bottom: 2rem;
    padding-top: 2rem;
    position: relative;
    z-index: 0;
}

.footer__bg {
    background-color: #f5f5f5;
    border-radius: .8rem;
    bottom: 0;
    left: -1rem;
    position: absolute;
    right: -1rem;
    top: 0;
    z-index: -1;
}

.footer__logo {
    grid-column: 1/-1;
}

@media (min-width: 900px) {
    .footer__logo {
        grid-column: 2/span 2;
    }
}

@media (max-width: 899px) {
    .footer .max-width {
        padding: 0 .7rem;
    }
}

.footer__inner {
    padding: 3.2rem 0 5.6rem;
}

@media (min-width: 900px) {
    .footer__inner {
        padding: 5.6rem 0 9rem;
    }
}

.footer__logo-icon {
    height: 3.4rem;
    width: 10.8rem;
}

@media (min-width: 900px) {
    .footer__logo-icon {
        height: 4.3rem;
        width: 13.7rem;
    }
}

.footer__main {
    grid-column: 1/-1;
}

@media (min-width: 900px) {
    .footer__main {
        grid-column: 4/span 3;
    }
}

.footer__list {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    font-family: 'Roboto', Helvetica Neue, sans-serif;
    font-size: 3.2rem;
    font-weight: 400;
    gap: 2.4rem;
    letter-spacing: .01em;
    line-height: .9;
    margin-top: 7.2rem;
}

@media (min-width: 900px) {
    .footer__list {
        font-size: 4rem;
        gap: 3.2rem;
        margin-top: 0;
    }
}

.footer__small {
    font-size: 1.4rem;
    font-weight: 400;
    grid-column: 1/-1;
    letter-spacing: .017rem;
    line-height: 1;
}

@media (min-width: 900px) {
    .footer__small {
        grid-column: 7/span 4;
        line-height: 1.5;
    }
}

.footer__list-small {
    color: #8f8f92;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    margin-top: 6.4rem;
    row-gap: 3.2rem;
}

@media (min-width: 900px) {
    .footer__list-small {
        margin-top: 0;
        row-gap: 2.4rem;
    }
}

.footer__list-small .main {
    color: #333;
}

.footer__bottom {
    border-top: 1px solid #e0e0e0;
    color: #8f8f92;
    padding: 1.6rem 0 4.8rem;
}

@media (min-width: 900px) {
    .footer__bottom {
        padding: 2rem .8rem 4rem;
    }
}

.footer__bottom .copyright {
    grid-column: 1/-1;
}

@media (max-width: 899px) {
    .footer__bottom .copyright {
        margin-top: 4rem;
        order: 2;
    }
}

@media (min-width: 900px) {
    .footer__bottom .copyright {
        grid-column: 2/span 5;
    }
}

.footer__bottom .copyright .sub {
    font-size: .9rem;
}

@media (min-width: 900px) {
    .footer__bottom .copyright .sub {
        font-size: 9px;
    }
}

.footer__bottom .links {
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    gap: 1.4rem;
    grid-column: span 4;
    line-height: 1;
}

@media (min-width: 900px) {
    .footer__bottom .links {
        flex-direction: row;
        gap: 2rem;
        grid-column: 7/span 4;
    }
}

.footer__bottom .social {
    display: flex;
    gap: 2rem;
    grid-column: span 1/-1;
}

.footer__bottom .social svg {
    height: 1.8rem;
    width: 1.8rem;
}

/* Cookie Banner */
.cookie-banner {
    background-color: #333;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 3.125rem 0;
    position: fixed;
    width: 100%;
    z-index: 198;
}

.cookie-banner.hidden {
    display: none;
}


/* Minimal footer */
.nx-footer {
  background: #000;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.08);
}
.nx-footer .nx-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 1.2rem;
  padding: 2.4rem 0;
}
@media (min-width: 900px) {
  .nx-footer .nx-footer__inner {
    grid-template-columns: 1fr auto auto;
    gap: 2rem;
    padding: 2.4rem 0;
  }
}
.nx-footer__copy { opacity: .8; font-size: 1.2rem; }
.nx-footer__links, .nx-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
}
.nx-footer__links { align-items: center; }
.nx-footer__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  line-height: 0;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.24);
  background-color: transparent;
  transition: background-color .2s ease, transform .1s ease, opacity .2s ease, border-color .2s ease;
  opacity: 1;
}
.nx-footer a {
  color: #fff;
  font-size: 1.2rem;
}
.nx-footer a:hover { opacity: 1; text-decoration: none; }
.nx-footer__legal a:hover { text-decoration: underline; }

/* Social icons */
.nx-footer__icon { width: 28px; height: 28px; color: #fff; display: block; shape-rendering: geometricPrecision; }
/* Normalize optical sizes per brand using width/height (avoids clipping) */
.nx-footer__links a[aria-label="Facebook"] .nx-footer__icon { width: 34px; height: 34px; }
.nx-footer__links a[aria-label="YouTube"] .nx-footer__icon { width: 32px; height: 32px; }
.nx-footer__links a[aria-label="LinkedIn"] .nx-footer__icon { width: 30px; height: 30px; }
.nx-footer__links a[aria-label="Instagram"] .nx-footer__icon { width: 30px; height: 30px; }
.nx-footer__links a[aria-label="X"] .nx-footer__icon { width: 30px; height: 30px; }
.nx-footer__links a[aria-label="TikTok"] .nx-footer__icon { width: 30px; height: 30px; }
.nx-footer__links a[aria-label="WhatsApp"] .nx-footer__icon { width: 30px; height: 30px; }
/* Fine-tune per brand removed to keep consistent proportions */
.nx-footer__links a:hover { text-decoration: none; opacity: 1; filter: brightness(1.08); transform: translateY(-1px); }
.nx-footer__links a:active { transform: translateY(0); }
.nx-footer__links a:focus-visible { outline: 2px solid #745adb; outline-offset: 2px; text-decoration: none; }
.nx-footer__links a:hover { text-decoration: none; opacity: 1; background-color: rgba(255,255,255,.08); transform: translateY(-1px); }
.nx-footer__links a:focus-visible { outline: 2px solid #745adb; outline-offset: 2px; text-decoration: none; }

/* Screen reader only */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.cookie-banner .module-content {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    max-width: 90rem;
    padding: 0 1.389%;
    width: 100%;
}

.cookie-banner h2 {
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 1rem;
    text-transform: uppercase;
    width: 100%;
}

.cookie-banner .banner-content {
    align-items: flex-end;
    color: #fff;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

@media (max-width: 50rem) {
    .cookie-banner .banner-content {
        display: block;
    }
}

.cookie-banner .banner-text {
    margin-right: 2rem;
}

@media (max-width: 50rem) {
    .cookie-banner .banner-text {
        margin: 0 0 2rem;
    }
}

.cookie-banner .banner-text > * {
    margin: 10px 0;
}

.cookie-banner .banner-text > :first-child {
    margin-top: 0;
}

.cookie-banner .banner-text > :last-child {
    margin-bottom: 0;
}

.cookie-banner .button {
    background-color: transparent;
    color: #fff;
    padding: 0;
    position: relative;
    text-transform: uppercase;
}

.cookie-banner .button:hover {
    color: #fff;
    text-decoration: underline;
}

/* Hero / video full-bleed */
.section__background{position:relative;overflow:hidden}
.section__video-wrap, .rounded-mask.fill{position:absolute;inset:0;width:100%;height:100%}
.fill-media{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.natural-balance{height:100vh;min-height:560px;position:relative}
.unique-symmetry__top{height:100vh;min-height:480px;position:relative}

/* Asegura que contenido sobre el vídeo esté encima */
.section__content{position:relative;z-index:2}
.section__background::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0));pointer-events:none;z-index:1}

/* Ajustes móviles */
@media (max-width:720px){
  .natural-balance{min-height:480px}
  .unique-symmetry__top{height:100vh}
}

/* Fix: asegurar que el hero tenga altura y que el fondo absolute no colapse */
.natural-balance {
  position: relative;    /* contenedor referente para children absolute */
  height: 100vh;         /* ocupa toda la ventana */
  min-height: 560px;     /* evita secciones demasiado pequeñas en desktop */
  overflow: hidden;
  display: block;
}

.section__background {
  position: relative;
  width: 100%;
  height: 100%;          /* importante: hace que el hijo absolute tenga referencia de altura */
}

.section__video-wrap,
.rounded-mask.fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.section__inner {
  position: relative;
  z-index: 2;
  height: 100%;          /* asegura alineado vertical cuando el hero es 100vh */
  display: flex;
  align-items: center;   /* centra contenido verticalmente si lo deseas */
  padding: 48px 20px;
}

.fill-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* móvil */
@media (max-width:720px){
  .natural-balance { min-height: 480px; height: 100vh; }
  .section__inner { padding: 28px 16px; align-items:flex-end; } /* ajustar según diseño */
}

/* Fix: asegurar hero full-bleed y vídeo a full width/height */
html, body { height: 100%; margin: 0; }

/* Hero principal */
.natural-balance {
  position: relative;
  width: 100%;
  height: 100vh;       /* ocupa toda la ventana */
  min-height: 480px;   /* ajusta según preferencia */
  overflow: hidden;
}

/* Secciones con video de fondo: hero-description e innovating-response */
.hero-description,
.innovating-response {
  position: relative;
  height: 100vh;      /* igual que el hero */
  min-height: 480px;
  overflow: hidden;
}

@media (max-width: 720px) {
  .hero-description,
  .innovating-response {
    height: 100vh;
    min-height: 420px;
  }
}

/* Overrides para mantener exactamente 100vh sin sumar padding del contenedor */
.hero-description,
.innovating-response {
  padding: 0 !important;
}
.hero-description .section__inner,
.innovating-response .section__inner {
  height: 100%;
  padding: 48px 20px; /* espacio interior controlado */
  display: flex;
  align-items: center;
}

.hero-description .section__background,
.innovating-response .section__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-description .section__inner,
.innovating-response .section__inner {
  position: relative;
  z-index: 2;
}

/* Títulos superpuestos (como el hero) por sección */
.hero-description .section-footer,
.innovating-response .section-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5; /* por encima del video y de gradientes */
  pointer-events: none; /* no bloquear interacción del contenido por defecto */
}

.unique-symmetry__top { position: relative; }
.unique-symmetry__top .section-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}
/* align inner block like other titles over video */
.unique-symmetry__top .section-footer .section-footer__left {
  position: relative;
  min-height: 6.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 0.5rem;
}
@media (min-width: 900px) {
  .unique-symmetry__top .section-footer .section-footer__left { padding-left: 1.2rem; }
}

/* Hacer clicables los títulos de sección en index y cambiar a morado al pasar el cursor */
.hero-description .section-footer .section-title-link,
.innovating-response .section-footer .section-title-link,
.unique-symmetry__top .section-footer .section-title-link {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
  pointer-events: auto; /* permitir clic en el enlace dentro del footer */
}
.hero-description .section-footer .section-title-link:hover,
.innovating-response .section-footer .section-title-link:hover,
.unique-symmetry__top .section-footer .section-title-link:hover {
  color: var(--color-purple);
}
/* Cuando el h1 contiene span gris, también queremos que el span se ponga morado al hover del enlace */
.hero-description .section-footer .section-title-link:hover .ingenieria-gris,
.innovating-response .section-footer .section-title-link:hover .ingenieria-gris,
.unique-symmetry__top .section-footer .section-title-link:hover .ingenieria-gris {
  color: var(--color-purple) !important;
}

/* Asegurar que el contenedor del título no bloquee eventos, pero el enlace sí */
.hero-description .section-footer .ingenieria-title-wrap,
.innovating-response .section-footer .ingenieria-title-wrap,
.unique-symmetry__top .section-footer .ingenieria-title-wrap {
  pointer-events: auto; /* permitir interacción en el wrapper */
}
.hero-description .section-footer h1.section__title.ingenieria-nuclear-title,
.innovating-response .section-footer h1.section__title.ingenieria-nuclear-title,
.unique-symmetry__top .section-footer h1.section__title.ingenieria-nuclear-title {
  pointer-events: auto; /* permitir interacción dentro del H1 */
}
.hero-description .section-footer .section-title-link,
.innovating-response .section-footer .section-title-link,
.unique-symmetry__top .section-footer .section-title-link {
  pointer-events: auto; /* el enlace sí captura eventos */
}

/* Activar eventos en los footers de las secciones del index para permitir clics */
.hero-description .section-footer,
.innovating-response .section-footer,
.unique-symmetry__top .section-footer {
  pointer-events: auto !important;
}

/* Accesibilidad: indicar foco de teclado en los títulos-enlace */
.hero-description .section-footer .section-title-link:focus-visible,
.innovating-response .section-footer .section-title-link:focus-visible,
.unique-symmetry__top .section-footer .section-title-link:focus-visible {
  color: var(--color-purple);
  outline: 2px solid var(--color-purple);
  outline-offset: 2px;
}

/* Asegurar que el wrapper interior no colapse ni limite ancho */
.natural-balance .section__inner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;          /* el contenido lo posicionamos por separado */
  max-width: none;     /* evitar límite de ancho aquí */
  display: block;
}

/* Fondo / vídeo en absoluto relativo al section.natural-balance */
.natural-balance .section__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Se asegura que el contenedor del vídeo cubra todo */
.natural-balance .section__video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Vídeo siempre cover y ocupa todo el contenedor */
.fill-media {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  pointer-events: none;
}

/* Contenido sobre el vídeo */
.natural-balance .section__content {
  position: relative;
  z-index: 2;
  max-width: var(--max-width, 1200px);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;     /* centra verticalmente */
  padding: 48px 20px;
  color: #fff;
}

/* Ajustes móviles */
@media (max-width: 720px) {
  .natural-balance { min-height: 420px; height: 100vh; }
  .natural-balance .section__content { padding: 28px 16px; align-items: flex-end; }
}

/* Aumentar tamaño del título solo en el hero "Natural Balance" */
.natural-balance .section__title {
  font-size: 68px;           /* doble aprox. de 34px */
  line-height: 1.02;
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
  color: #ffffff;
  z-index: 3;
}

/* Ajuste responsive: tablets y móviles */
@media (max-width: 1024px) {
  .natural-balance .section__title { font-size: 52px; }
}
@media (max-width: 720px) {
  .natural-balance .section__title { font-size: 34px; }
}

/* Si algún otro selector está sobrescribiendo, prueba temporalmente con !important:
.natural-balance .section__title { font-size: 68px !important; }
*/

/* Nav: opaco y siempre por encima del vídeo; enlaces alineados a la derecha y compactos */
.nav{
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999; /* encima del vídeo */
  background: #ffffff; /* opaco: cambiar a otro color si prefieres */
  box-shadow: 0 6px 20px rgba(2,6,23,0.08);
  border-bottom: 1px solid rgba(2,6,23,0.06);
  display:flex;
  align-items:center;
  padding: 12px 20px;
}

/* contenedor izquierdo ocupa todo el ancho para poder empujar links a la derecha */
.nav__left{
  display:flex;
  align-items:center;
  width:100%;
}

/* logo a la izquierda */
.nav__logo{
  flex: 0 0 auto;
  margin-right: 12px;
}

/* links agrupados a la derecha, espaciado compacto y uniforme */
.nav__links{
  margin-left: auto;
  flex: 0 0 auto;
}
.nav__links-list{
  display:flex;
  gap: 12px;              /* compacto pero espaciado uniforme */
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
}
.nav__links-list .nav__link{
  display: flex;
  align-items: center;
  height: var(--nav-height);
}
.nav__links-list .nav__link a{
  display:flex;
  align-items:center;
  height: 100%;
  padding:0 10px;
  color:var(--text, #0b1320);
  text-decoration:none;
  font-weight:600;
  line-height: 1;
  border-radius:6px;
  transition:background .18s ease, color .18s ease;
}

/* efecto hover / foco para legibilidad */
.nav__links-list .nav__link a:hover,
.nav__links-list .nav__link a:focus{
  background: rgba(2,6,23,0.06);
  color: var(--accent, #0b6b9a);
}

/* Asegurar que el botón del menú no sobreponga los enlaces */
.menu-btn{
  margin-left:12px;
  z-index:10000;
  background:transparent;
}

/* Ajustes responsivos: reducir gap y padding en móviles */
@media (max-width: 880px){
  .nav{ padding:10px 14px; }
  .nav__links-list{ gap:10px; }
  .nav__links-list .nav__link a{ padding:6px 8px; font-size:14px; }
}

/* Tamaño y comportamiento del logo (archivo SVG) */
.nav__logo-img,
.page-loader__icon,
.footer__logo img {
  height: var(--logo-height, 4.4rem);
  width: auto;
  display: block;
}

/* Si el footer es oscuro y tu SVG es negro, invertirlo visualmente */
.footer__logo img {
  filter: invert(1) brightness(1.05);
}

/* Ensure header layout allows menu button at top-right */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo+links on left, button on right */
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #ffffff;
  box-shadow: 0 6px 20px rgba(2,6,23,0.08);
  border-bottom: 1px solid rgba(2,6,23,0.06);
  padding: 0 20px;
  height: calc(var(--nav-height) + 16px); /* icon/text centered vertically */
}

.nav__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto; /* allow links to use space and keep button to the right */
}

/* nav__links stay right-aligned inside nav__left */
.nav__links { margin-left: auto; }

/* Menu button: visible on all breakpoints, positioned right */
.menu-btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: calc(var(--nav-height) + 16px);
  height: calc(var(--nav-height) + 16px);
  padding: 8px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10001;
  flex: 0 0 auto;
}

/* hamburger lines */
.menu-btn__lines{ display:inline-flex; flex-direction:column; gap:6px; }
.menu-btn__lines span{
  display:block;
  width:20px;
  height:2px;
  background:var(--text,#0b1320);
  border-radius:2px;
  transition: transform .25s ease, opacity .18s ease;
}

/* animated open state -> X */
.menu-btn.open .menu-btn__lines span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.menu-btn.open .menu-btn__lines span:nth-child(2){ opacity: 0; }
.menu-btn.open .menu-btn__lines span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* Ensure mobile behaviour still OK */
@media (max-width: 880px){
  .nav__links { display: none; } /* keep compact mobile */
  .menu-btn { display: inline-flex; margin-left: auto !important; } /* empuja el botón a la derecha */
}

/* Botón cerrar menú (X) */
.menu__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-neutral-800);
  z-index: 10002;
  transition: background .18s ease, color .18s ease;
  opacity: 0; /* oculto hasta que el menú esté abierto */
  pointer-events: none;
}

/* hover */
.menu__close:hover { background: rgba(2,6,23,0.06); }

/* mostrar cuando el menú esté abierto */
.menu-wrap.open .menu__close {
  opacity: 1;
  pointer-events: auto;
}

/* Ajuste en pantallas grandes (si el menú se presenta como panel flotante) */
@media (min-width: 900px) {
  .menu__close { top: 16px; right: 16px; width: 48px; height: 48px; }
}

/* ocultar logo dentro del menú (fallback) */
.menu__logo { display: none !important; }

/* Forzar misma tipografía en nav y menú */
.nav, .nav__links-list, .menu, .menu__main, .menu__list, .menu__list a {
  font-family: var(--ui-font);
}

/* Alineación tipográfica y peso coherente */
.nav__links-list, .menu__list a {
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Ajuste tamaño de enlace del menú para consistencia */
.menu__list a {
  font-size: 1.6rem; /* ajustar si prefieres más grande/pequeño */
}

/* Menú desplegable: sin bullets y con mayor separación entre opciones */
.menu__list {
  list-style: none;
  margin: 0;
  padding: 12px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px; /* separación entre opciones */
}
.menu__list li { margin: 0; }
.menu__list a {
  display: block;
  padding: 12px 14px; /* área clickeable mayor */
  border-radius: 10px;
}
.menu__list a:hover { background: rgba(2,6,23,0.06); }

/* Menú: misma tipografía, mayúsculas, letras delgadas y mismo tamaño en cabecera y desplegable */
.nav__links-list a,
.nav__links-list .nav__link,
.menu__list a,
.menu__list {
  font-family: var(--ui-font) !important;
  font-weight: 300 !important;
  text-transform: uppercase !important;
  font-size: 1.44rem !important;        /* 1.8rem * 0.8 = 1.44rem (20% menor) */
  letter-spacing: 0.096rem !important;  /* 0.12rem * 0.8 = 0.096rem */
  line-height: 1 !important;
  color: var(--color-neutral-800) !important;
}

/* Ajuste responsive: reducir también 20% sobre el valor móvil */
@media (max-width: 720px) {
  .nav__links-list a,
  .menu__list a {
    font-size: 1.12rem !important;       /* 1.4rem * 0.8 = 1.12rem */
    letter-spacing: 0.064rem !important; /* 0.08rem * 0.8 = 0.064rem */
  }
}

/* Fix: evitar que el contenido del hero quede encima del vídeo.
   Mostrar el título sobre el vídeo y que la descripción vaya debajo del hero. */

.natural-balance {
  /* ya está en 100vh; mantenemos hero a pantalla completa */
  position: relative;
  overflow: hidden;
}

/* Hacer que el contenedor de contenido del hero no sea absoluto (no solape) */
.natural-balance .section__content {
  position: relative !important; /* quitar absolute/top:0 */
  top: auto !important;
  z-index: 2;
  display: block;
  height: auto;
  padding: 4rem 2rem; /* espacio interno del bloque de contenido */
}

/* Asegurar que el título se sitúe en la parte superior del hero (encima del vídeo)
   y la descripción se coloque después del hero */
.natural-balance .section__title-wrap {
  height: auto !important;
  min-height: 56vh; /* título visual sobre vídeo */
  display: flex;
  align-items: center; /* centra verticalmente el título dentro del área del hero */
  padding: 4rem 2rem 2rem;
}

/* La "body/descripcion" del hero debe quedar fuera y no usar altura gigante */
.natural-balance .section__body {
  height: auto !important;
  padding: 2rem; /* espacio para la descripción que queda bajo el hero */
  position: relative;
  z-index: 2;
}

/* Si había un párrafo literal en .section__content que se desea desplazar
   asegurarse de que tenga la clase .hero-lead (puedes añadirla en HTML) */
.natural-balance .hero-lead {
  margin-top: 2rem;
  color: var(--color-grey-on-white);
  max-width: 70ch;
  font-size: 1.6rem;
  line-height: 1.45;
}

/* Ajustes móviles */
@media (max-width: 720px) {
  .natural-balance .section__title-wrap { min-height: 40vh; padding: 3rem 1.2rem 1rem; }
  .natural-balance .hero-lead { font-size: 1.3rem; padding: 0 1rem; }
}

/* Hero description: aparece debajo del hero, margen superior para separarlo claramente */
.hero-description {
  background: var(--color-white);
  padding: 4.8rem 2rem;
  margin-top: 0;
  color: var(--color-neutral-800);
}

.hero-description .hero-lead {
  font-family: var(--ui-font);
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--color-grey-on-white);
  max-width: 70ch;
  margin: 0 auto;
}

/* Ajustes responsive */
@media (min-width: 900px) {
  .hero-description { padding: 6.4rem 3rem; }
  .hero-description .hero-lead { font-size: 1.8rem; }
}

/* --- Tecnología Nuclear (antes .natural-balance) --- */
.tecnologia-nuclear {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 480px;
  overflow: hidden;
}

/* fondo / video */
.tecnologia-nuclear .section__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.tecnologia-nuclear .section__video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Título situado en esquina inferior izquierda, tamaño igual al anterior pero más delgado */
.tecnologia-nuclear .section__content {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 100%;
  pointer-events: none;
}

/* contenedor del título para controlar padding y posición */
.tecnologia-nuclear .tecnologia-title-wrap {
  padding: 3.2rem; /* espacio desde borde inferior/izquierdo */
  pointer-events: auto;
  width: auto;
}

/* título: misma escala que antes, pero peso más delgada y dos colores por palabra */
.tecnologia-nuclear .section__title {
  font-family: var(--ui-font);
  font-size: 6.8rem;       /* 68px equivalente (teniendo base 10px en html) */
  line-height: 1.02;
  margin: 0;
  font-weight: 300;        /* letra más delgada */
  letter-spacing: -0.5px;
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}

/* palabra "Tecnología" en gris */
.tecnologia-nuclear .section__title .word-tech {
  color: var(--color-grey-on-black);
  -webkit-text-stroke: 0px transparent;
}

/* palabra "Nuclear" en blanco para contrastar sobre el vídeo */
.tecnologia-nuclear .section__title .word-nuclear {
  color: var(--color-white);
}

/* Responsivo: reducir tamaño proporcional en tablet/móvil (mismos breakpoints ya usados) */
@media (max-width: 1024px) {
  .tecnologia-nuclear .section__title { font-size: 5.2rem; } /* 52px */
}
@media (max-width: 720px) {
  .tecnologia-nuclear .section__title { font-size: 3.4rem; } /* 34px */
  .tecnologia-nuclear .tecnologia-title-wrap { padding: 1.6rem; }
}

/* asegurar que el vídeo siga cubriendo todo el área */
.tecnologia-nuclear .fill-media {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Section footer small detail visibilidad (CLEAN ENERGY FUTURE) */
.tecnologia-nuclear .section-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 2;
}
.tecnologia-nuclear .section-footer .text-small-detail {
  color: var(--color-white);
  margin: 0;
  padding: 1.6rem 3.2rem;
  font-family: var(--ui-font);
  font-weight: 300;
  letter-spacing: .08rem;
}

/* --- Física Médica: hero fullscreen --- */
.fisica-medica {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 480px;
  overflow: hidden;
}
.fisica-medica .section__background { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.fisica-medica .section__video-wrap { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.fisica-medica .section-footer { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2; }
.fisica-medica .section-footer .section-footer__left { padding-left: 0.5rem; }
@media (min-width: 900px) { .fisica-medica .section-footer .section-footer__left { padding-left: 1.2rem; } }
/* texto descriptivo sobre el video */
.fisica-medica .section-footer .slide-lead {
  color: var(--color-white);
  margin: 0.4rem 0 1.2rem;
  max-width: 70ch;
}

/* Héroe Tecnología Nuclear: mismo formato de la frase que en Física Médica */
.tecnologia-nuclear .section-footer .slide-lead {
  color: var(--color-white);
  margin: 0.4rem 0 1.2rem;
  max-width: 70ch;
}

/* si aún existen reglas .natural-balance en el CSS, ocultarlas para evitar conflicto */
.natural-balance { display: none !important; }
/* Mover el título del hero 4cm hacia arriba */
.tecnologia-nuclear .section__content {
  bottom: 4cm !important; /* mueve el bloque hacia arriba respecto al borde inferior */
}

/* Ajustar posición del título: subir 4cm adicionales y asegurar visibilidad */
.tecnologia-nuclear .section__content {
  position: absolute;
  left: 0;
  /* Subir más: 8cm desde el fondo (antes 4cm). Ajusta si quieres más/menos */
  bottom: 8cm !important;
  z-index: 9999 !important;     /* asegurar encima del vídeo */
  width: 100%;
  pointer-events: auto;         /* permitir interacción en el contenedor del título */
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: visible;            /* evitar que se recorte */
  padding: 0;
}

/* Contenedor del título: reducir padding vertical que puede empujar fuera del viewport */
.tecnologia-nuclear .tecnologia-title-wrap {
  padding: 1.2rem 3.2rem; /* menos padding vertical para que no se oculte */
  max-width: calc(100% - 6.4rem);
  box-sizing: border-box;
}

/* Asegurar que el título no exceda ancho y se muestre completo */
.tecnologia-nuclear .section__title {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  max-width: 100%;
  overflow: visible;
  word-break: break-word;
  white-space: normal;
}

/* Si sigue ocultándose en pantallas pequeñas, usar valores relativos */
@media (max-width: 1024px) {
  .tecnologia-nuclear .section__content { bottom: 6rem !important; }
}
@media (max-width: 720px) {
  .tecnologia-nuclear .section__content { bottom: 3.2rem !important; }
}

/* Evitar barra horizontal por overflow causado por elementos a 100% */
html, body {
  overflow-x: hidden;    /* evita scroll horizontal en todas las páginas */
  max-width: 100vw;      /* protege contra elementos que excedan el viewport */
}

/* Asegurar que se recorten contenidos que puedan desbordar */
.section, .section__background, .section__video-wrap {
  max-width: 100vw;
  overflow: hidden;
}

/* Forzar que los medios no generen ancho extra */
.fill-media,
.section__background video,
.section__video-wrap video {
  display: block;
  max-width: 100vw;
  min-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Evitar que sombras o bordes generen overflow */
* {
  box-sizing: border-box;
}

/* Si usas page-loader con posicionamiento fijo, asegurar que no añade anchura */
.page-loader,
.page-loader__progress {
  max-width: 100vw;
  left: 0;
  right: 0;
}

/* --- Nosotros: Hero con imagen de fondo --- */
.nosotros-hero {
  position: relative;
  height: 100vh; /* fondo a tamaño completo de la página */
  display: flex;
  align-items: stretch; /* usamos footer absoluto */
  padding: 0; /* el footer controla el padding/alineación */
  background-image: url('../images/nosotros/hero/nosotros-hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
.nosotros-hero .section-footer { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2; }
.nosotros-hero .section-footer .section-footer__left { padding-left: 0.5rem; position: relative; min-height: 6.5rem; display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 900px) { .nosotros-hero .section-footer .section-footer__left { padding-left: 1.2rem; } }
.nosotros-hero .section-footer .slide-lead { color: var(--color-white); margin: 0.4rem 0 1.2rem; max-width: 70ch; }
/* H1 igual que otras páginas */
.nosotros-hero .section-footer h1.section__title.ingenieria-nuclear-title { font-family: 'Roboto', Helvetica Neue, sans-serif !important; font-size: 4rem !important; font-weight: 400 !important; letter-spacing: -.04rem !important; line-height: 92% !important; }
@media (min-width: 900px) { .nosotros-hero .section-footer h1.section__title.ingenieria-nuclear-title { font-size: 6.4rem !important; letter-spacing: -.128rem !important; line-height: 89% !important; } }

@media (max-width: 900px) {
  .nosotros-hero { height: 100vh; padding: calc(var(--nav-height) + 24px) 0 36px; }
}

/* --- Contacto: Hero con imagen de fondo a pantalla completa --- */
.contacto-hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: stretch;
  padding: 0; /* usamos footer absoluto */
  /* Fondo: usar el asset existente en images/contacto/hero/ */
  background-image: url('../images/contacto/hero/contacto-hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
.contacto-hero .section-footer { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2; }
.contacto-hero .section-footer .section-footer__left { padding-left: 0.5rem; position: relative; min-height: 6.5rem; display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 900px) { .contacto-hero .section-footer .section-footer__left { padding-left: 1.2rem; } }
.contacto-hero .section-footer .slide-lead { color: var(--color-white); margin: 0.4rem 0 1.2rem; max-width: 70ch; }

/* Asegurar contraste del título en el hero de contacto */
.contacto-hero .section-footer h1.section__title.ingenieria-nuclear-title { color: #ffffff; text-shadow: 0 2px 12px rgba(0,0,0,0.35); }
.contacto-hero .section-footer .slide-lead { text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
/* Tipografía del H1 igual que otras páginas */
.contacto-hero .section-footer h1.section__title.ingenieria-nuclear-title { font-family: 'Roboto', Helvetica Neue, sans-serif !important; font-size: 4rem !important; font-weight: 400 !important; letter-spacing: -.04rem !important; line-height: 92% !important; }
@media (min-width: 900px) { .contacto-hero .section-footer h1.section__title.ingenieria-nuclear-title { font-size: 6.4rem !important; letter-spacing: -.128rem !important; line-height: 89% !important; } }

@media (max-width: 900px) {
  .contacto-hero { height: 100vh; padding: calc(var(--nav-height) + 24px) 0 36px; }
}

/* --- Nosotros: Sección full-screen "NuclearX" --- */
.nosotros-nuclearx {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff; /* fondo claro; ajústalo si necesitas contraste */
  color: var(--color-neutral-800);
}
.nosotros-nuclearx .text-extra-large-intro { text-align: left; margin: 0 0 .8rem; }
/* Igualar tamaño de NuclearX/Misión/Visión al de "Nosotros" sin cambiar .text-h1 global */
.nosotros-nuclearx .text-extra-large-intro {
  font-size: 4rem;           /* match .text-h1 mobile */
  letter-spacing: -.04rem;
  line-height: 92%;
}
@media (min-width: 900px) {
  .nosotros-nuclearx .text-extra-large-intro {
    font-size: 6.4rem;       /* match .text-h1 desktop */
    letter-spacing: -.128rem;
    line-height: 89%;
  }
}

/* Carousel full-screen within nosotros-nuclearx */
.nosotros-nuclearx .carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
}
.nosotros-nuclearx .carousel__track {
  display: flex;
  width: 200%; /* 2 slides */
  height: 100%;
  transition: transform .4s cubic-bezier(.2,.9,.3,1);
}
.nosotros-nuclearx .carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;  /* alinear arriba */
  justify-content: flex-start; /* alinear a la izquierda */
}
.nosotros-nuclearx .carousel__slide .max-width {
  width: 100%;
  padding: calc(var(--nav-height) + 24px) 2rem 0; /* margen superior para no tapar el nav */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Estructura en dos columnas para los slides */
.nosotros-nuclearx .slide-columns {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 */
  gap: 2rem;
  align-items: start;
}
.nosotros-nuclearx .slide-col { min-height: 1px; }
.nosotros-nuclearx .slide-col--left { display: block; }
.nosotros-nuclearx .slide-col--right { display: block; }

/* Justificación del texto dentro de la primera columna */
.nosotros-nuclearx .slide-col--left .slide-lead {
  max-width: 70ch;     /* limitar longitud como en la sección superior */
  width: 100%;
  text-align: justify;
}
/* Imagen a la derecha: cubrir alto disponible y mantener proporción */
.nosotros-nuclearx .slide-col--right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Responsive: en móviles, apilar columnas y mantener justificado */
@media (max-width: 900px) {
  .nosotros-nuclearx .slide-columns { grid-template-columns: 1fr; }
  .nosotros-nuclearx .slide-col--right { display: block; margin-top: 12px; }
  .nosotros-nuclearx .slide-col--right img { height: clamp(180px, 42vh, 360px); width: 100%; object-fit: cover; border-radius: 12px; }
}

/* Ajustes extra para móviles pequeños: asegurar que todo quepa en 1 pantalla */
@media (max-width: 480px) {
  /* Altura real en móviles para evitar cortes por UI del navegador */
  @supports (height: 100dvh) { .nosotros-nuclearx { height: auto; min-height: 100dvh; } }
  .nosotros-nuclearx .max-width { margin: 0 12px; }
  .nosotros-nuclearx .max-width { margin: 0 2rem; }
  .nosotros-nuclearx .carousel__slide .max-width {
  padding: calc(var(--nav-height) + 6px) 10px 96px; /* aire para controles sticky */
  }
  .nosotros-nuclearx .text-extra-large-intro {
    font-size: clamp(2.1rem, 6vw, 2.6rem); /* escalar con ancho para no cortar */
    letter-spacing: -.032rem;
    line-height: 1.02;
    margin: 0 0 .4rem;
  }
  .nosotros-nuclearx .slide-lead {
    font-size: clamp(0.98rem, 3.2vw, 1.06rem); /* escalar suavemente */
    line-height: 1.4;
    max-width: 100%;         /* usar todo el ancho disponible en móvil */
    text-align: justify;
    hyphens: auto;           /* permitir cortes de palabras cuando aplique */
    overflow-wrap: anywhere; /* evitar cortes visuales */
    word-break: break-word;  /* asegurar wrap aún con palabras largas */
    white-space: normal;     /* no mantener en una sola línea */
    margin-top: .2rem;
  }
  /* columna izquierda como stack compacto */
  .nosotros-nuclearx #slide-1 .slide-col--left { display: flex; flex-direction: column; gap: .2rem; }
  /* Controles un poco más compactos para ganar altura útil */
  .nosotros-nuclearx .carousel__controls { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .nosotros-nuclearx .carousel__arrow { font-size: 44px; padding: 4px 6px; }
  .nosotros-nuclearx .carousel__dots { gap: 10px; }
}

/* Mobile: carousel auto height and sticky controls to keep indicators visible */
@media (max-width: 900px) {
  .nosotros-nuclearx,
  .nosotros-nuclearx .carousel,
  .nosotros-nuclearx .carousel__track,
  .nosotros-nuclearx .carousel__slide { height: auto; }
  .nosotros-nuclearx .carousel, .nosotros-nuclearx .carousel__track { overflow: visible; }
  .nosotros-nuclearx .carousel__controls {
    position: sticky;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 0; right: 0;
    pointer-events: none;
  }
  .nosotros-nuclearx .carousel__arrow, .nosotros-nuclearx .carousel__dots { pointer-events: auto; }
}

/* Ajuste adicional para pantallas muy estrechas (≤360px) */
@media (max-width: 360px) {
  .nosotros-nuclearx .text-extra-large-intro { font-size: 2.3rem; }
  .nosotros-nuclearx .slide-lead { font-size: 1.0rem; line-height: 1.38; }
  .nosotros-nuclearx .carousel__controls { bottom: calc(10px + env(safe-area-inset-bottom)); }
  .nosotros-nuclearx .carousel__arrow { font-size: 40px; }
}

/* Ajuste para pantallas con poca altura (p. ej., landscape o dispositivos compactos) */
@media (max-height: 700px) and (max-width: 900px) {
  .nosotros-nuclearx .text-extra-large-intro { font-size: 2.4rem; }
  .nosotros-nuclearx .slide-lead { font-size: 1.0rem; line-height: 1.38; }
  .nosotros-nuclearx .carousel__controls { bottom: calc(10px + env(safe-area-inset-bottom)); }
}

/* Texto descriptivo debajo de NuclearX (slide 1) */
.nosotros-nuclearx .slide-lead {
  font-family: 'Roboto', Helvetica Neue, sans-serif;
  font-size: 1.4rem;            /* más pequeño */
  line-height: 1.5;
  letter-spacing: .02rem;
  color: #555;
  max-width: 70ch;              /* igual que la sección superior */
  text-align: justify;          /* texto justificado */
  margin-top: 1.2rem;
}
@media (min-width: 900px) {
  .nosotros-nuclearx .slide-lead { font-size: 1.6rem; }
}

/* Nota inferior: misma tipografía y color negro, ajustada a ancho como la sección superior */
.nosotros-nuclearx .slide-bottom-note {
  margin-top: auto; /* empuja al fondo */
  padding: 1rem 0 0; /* separación del contenido superior */
}
.nosotros-nuclearx .slide-bottom-note .text-body {
  font-family: 'Roboto', Helvetica Neue, sans-serif;
  color: #000;           /* negro */
  max-width: 70ch;       /* igual a la sección superior */
  letter-spacing: .026rem;
}
@media (max-width: 480px) {
  .nosotros-nuclearx .slide-bottom-note .text-body {
    max-width: 100%;
  }
}

/* Controls: arrows and dots at bottom */
.nosotros-nuclearx .carousel__controls {
  position: absolute;
  left: 0; right: 0; bottom: 24px; /* más separación del borde al crecer elementos */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  pointer-events: none; /* allow text selection above; re-enable for buttons */
}

/* Cursos: estructura y controles del carrusel (alineación idéntica) */
.cursos-section .carousel {
/* Estilos responsivos equivalentes a nosotros-nuclearx para cursos-section */
@media (max-width: 900px) {
  .cursos-section,
  .cursos-section .carousel,
  .cursos-section .carousel__track,
  .cursos-section .carousel__slide { height: auto; }
  .cursos-section .carousel, .cursos-section .carousel__track { overflow: visible; }
  .cursos-section .carousel__controls {
    position: sticky;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 0; right: 0;
    pointer-events: none;
    z-index: 99;
  }
  .cursos-section .carousel__arrow, .cursos-section .carousel__dots { pointer-events: auto; }
  .cursos-section .slide-columns { grid-template-columns: 1fr; }
  .cursos-section .slide-col--right { display: block; margin-top: 12px; }
  .cursos-section .slide-col--right img { height: clamp(180px, 42vh, 360px); width: 100%; object-fit: cover; border-radius: 12px; }
  .cursos-section .carousel__slide .max-width { margin: 0 2rem; padding: calc(var(--nav-height) + 6px) 10px 96px; }
  .cursos-section .text-extra-large-intro { font-size: clamp(2.1rem, 6vw, 2.6rem); letter-spacing: -.032rem; line-height: 1.02; margin: 0 0 .4rem; }
  .cursos-section .slide-lead { font-size: clamp(0.98rem, 3.2vw, 1.06rem); line-height: 1.4; max-width: 100%; text-align: justify; hyphens: auto; overflow-wrap: anywhere; word-break: break-word; white-space: normal; margin-top: .2rem; }
  .cursos-section .carousel__controls { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .cursos-section .carousel__arrow { font-size: 44px; padding: 4px 6px; }
  .cursos-section .carousel__dots { gap: 10px; }
}
@media (max-width: 480px) {
  .cursos-section .carousel__controls { bottom: calc(16px + env(safe-area-inset-bottom)); padding: 0 12px; gap: 12px; }
  .cursos-section .carousel__arrow { font-size: 40px; }
  .cursos-section .text-extra-large-intro { font-size: 2.3rem; }
  .cursos-section .slide-lead { font-size: 1.0rem; line-height: 1.38; }
}
  position: relative;
  width: 100%;
  height: 100%;             /* llenar toda la sección */
  overflow: hidden;
  display: flex;
}
.cursos-section .carousel__track {
  display: flex;
  width: 200%; /* 2 slides */
  height: 100%;             /* track de altura completa */
  transition: transform .4s cubic-bezier(.2,.9,.3,1);
}
.cursos-section .carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;            /* cada slide ocupa toda la altura */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.cursos-section .carousel__slide .max-width {
  width: 100%;
  padding: calc(var(--nav-height) + 24px) 2rem 0; /* margen superior para no tapar el nav */
  display: flex;
  flex-direction: column;
  height: 100%;             /* que el contenido interno mida toda la altura */
}
.cursos-section .carousel__controls {
  position: absolute;
  left: 0; right: 0; bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  pointer-events: none;
}
.cursos-section .carousel__dots {
  pointer-events: auto;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 20px;
}
.cursos-section .carousel__dot {
  width: 8px; height: 8px; border-radius: 9999px;
  background: #cfcfd3;
  opacity: .8; border: none; cursor: pointer;
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
.cursos-section .carousel__dot.is-active { background: #8f8f92; opacity: 1; transform: scale(1.15); }
.cursos-section .carousel__dot:focus-visible { outline: 2px solid #8f8f92; outline-offset: 2px; }
.nosotros-nuclearx .carousel__arrow,
.cursos-section .carousel__arrow {
  pointer-events: auto;
  border: none;                /* sin círculo envolvente */
  background: transparent;     /* sin fondo */
  color: #8f8f92;              /* gris tenue */
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 88px;             /* 2x más grande */
  line-height: 1; font-weight: 400;
  padding: 10px 16px;          /* área de toque proporcional al tamaño */
  transition: transform .1s ease, opacity .2s ease, color .2s ease;
}
.nosotros-nuclearx .carousel__arrow:hover,
.cursos-section .carousel__arrow:hover { color: #7a7a7f; }
.nosotros-nuclearx .carousel__arrow:active,
.cursos-section .carousel__arrow:active { transform: translateY(1px); }

/* Nudge animation to hint horizontal scroll */
@keyframes nudge-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@keyframes nudge-left  { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
.nosotros-nuclearx .carousel__arrow--next,
.cursos-section .carousel__arrow--next { animation: nudge-right 1.6s ease-in-out infinite; }
.nosotros-nuclearx .carousel__arrow--prev,
.cursos-section .carousel__arrow--prev { animation: nudge-left 1.6s ease-in-out infinite; }
/* Pause animation on hover/focus for better UX */
.nosotros-nuclearx .carousel__arrow:hover,
.nosotros-nuclearx .carousel__arrow:focus-visible,
.cursos-section .carousel__arrow:hover,
.cursos-section .carousel__arrow:focus-visible { animation-play-state: paused; }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nosotros-nuclearx .carousel__arrow--next,
  .nosotros-nuclearx .carousel__arrow--prev,
  .cursos-section .carousel__arrow--next,
  .cursos-section .carousel__arrow--prev { animation: none; }
}

.nosotros-nuclearx .carousel__dots {
  pointer-events: auto;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 20px; /* mayor separación al crecer puntos */
}
.nosotros-nuclearx .carousel__dot {
  width: 8px; height: 8px; border-radius: 9999px; /* 1/3 del tamaño anterior */
  background: #cfcfd3; /* puntos grises */
  opacity: .8; border: none; cursor: pointer;
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
.nosotros-nuclearx .carousel__dot.is-active { background: #8f8f92; opacity: 1; transform: scale(1.15); }
.nosotros-nuclearx .carousel__dot:focus-visible { outline: 2px solid #8f8f92; outline-offset: 2px; }

/* Optimización móvil: respetar safe-area y ajustar tamaños en pantallas muy pequeñas */
@media (max-width: 480px) {
  .nosotros-nuclearx .carousel__controls {
    bottom: calc(16px + env(safe-area-inset-bottom));
    padding: 0 12px;
    gap: 12px;
  }
  .nosotros-nuclearx .carousel__arrow {
    font-size: 56px;  /* más razonable en móviles estrechos */
    padding: 6px 8px;
  }
  .nosotros-nuclearx .carousel__dots { gap: 12px; }
}

/* Cursos: comportamiento móvil equivalente */
@media (max-width: 900px) {
  .cursos-section,
  .cursos-section .carousel,
  .cursos-section .carousel__track,
  .cursos-section .carousel__slide { height: auto; }
  .cursos-section .carousel, .cursos-section .carousel__track { overflow: visible; }
  .cursos-section .carousel__controls {
    position: sticky;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 0; right: 0;
    pointer-events: none;
  }
  .cursos-section .carousel__arrow, .cursos-section .carousel__dots { pointer-events: auto; }
}
@media (max-width: 480px) {
  .cursos-section .carousel__controls {
    bottom: calc(16px + env(safe-area-inset-bottom));
    padding: 0 12px;
    gap: 12px;
  }
  .cursos-section .carousel__arrow { font-size: 56px; padding: 6px 8px; }
  .cursos-section .carousel__dots { gap: 12px; }
}

/* --- Nosotros: Sección full-screen "¿Por qué nosotros?" --- */
.nosotros-why {
  height: 100vh;
  display: flex;
  align-items: flex-start;   /* como Misión/Visión */
  justify-content: flex-start; /* como Misión/Visión */
  background: #f7f7f8; /* leve contraste con la sección anterior */
  color: var(--color-neutral-800);
  overflow: visible; /* evitar que se recorte contenido interno */
}
/* padding superior y alineación izquierda como los slides */
.nosotros-why .max-width {
  width: 100%;
  padding: calc(var(--nav-height) + 24px) 2rem 0;
}
.nosotros-why .text-extra-large-intro {
  text-align: left;
  margin: 0 0 .8rem;
  font-size: 4rem;           /* igual a Misión/Visión (match .text-h1 mobile) */
  letter-spacing: -.04rem;
  line-height: 92%;
}
/* igualar layout a Misión/Visión: dos columnas y texto justificado */
.nosotros-why .slide-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.nosotros-why .slide-col--left .slide-lead { max-width: 70ch; width: 100%; text-align: justify; }
.nosotros-why .slide-col--right { display: block; }
/* Listado bajo '¿Por qué nosotros?' alineado con slide-lead */
.nosotros-why .why-list { margin: .6rem 0 1rem; padding-left: 1.2rem; color: #333; }
.nosotros-why .why-list li { margin: .4rem 0; text-align: justify; }
@media (min-width: 900px) {
  .nosotros-why .text-extra-large-intro {
    font-size: 6.4rem;       /* igual a Misión/Visión desktop */
    letter-spacing: -.128rem;
    line-height: 89%;
  }
}
@media (max-width: 900px) {
  .nosotros-why { height: auto; min-height: 100vh; }
}
@media (max-width: 900px) {
  .nosotros-why .slide-columns { grid-template-columns: 1fr; }
  .nosotros-why .slide-col--right { display: block; margin-top: 12px; }
  .nosotros-why .slide-col--right img { height: clamp(180px, 42vh, 360px); width: 100%; object-fit: cover; border-radius: 12px; }
}

/* --- Nosotros: Sección full-screen "Clientes" --- */
.nosotros-clients {
  height: 100vh;
  display: flex;
  align-items: flex-start;   /* como Misión/Visión */
  justify-content: flex-start; /* como Misión/Visión */
  background: #ffffff;
  color: var(--color-neutral-800);
}
/* padding superior y alineación izquierda como los slides */
.nosotros-clients .max-width {
  width: 100%;
  padding: calc(var(--nav-height) + 24px) 2rem 0;
}
.nosotros-clients .text-extra-large-intro {
  text-align: left;
  margin: 0 0 .8rem;
  font-size: 4rem;           /* igual a Misión/Visión (match .text-h1 mobile) */
  letter-spacing: -.04rem;
  line-height: 92%;
}
@media (min-width: 900px) {
  .nosotros-clients .text-extra-large-intro {
    font-size: 6.4rem;       /* igual a Misión/Visión desktop */
    letter-spacing: -.128rem;
    line-height: 89%;
  }
}

/* Clientes: grid de logos en gris con sombra amarilla */
.clients-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 12px;
}
@media (min-width: 600px) { .clients-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .clients-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } }

.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;                 /* menos margen para que el logo crezca */
  background: transparent;      /* sin recuadro */
  border: none;                 /* sin borde */
  border-radius: 0;             /* sin esquinas redondeadas visibles */
  min-height: 0;                /* que la altura la determine el logo */
}
.client-logo img {
  max-width: 100%;
  height: auto;
  /* aumentar altura visible del logo, responsivo */
  max-height: clamp(56px, 10vw, 96px);
  display: block;
  filter: grayscale(1) contrast(1) brightness(0.5); /* tonos grises */
  /* sombra amarilla sutil alineada al diseño */
  box-shadow: 0 6px 16px rgba(255, 213, 0, 0.28);
}
.client-logo:hover img { filter: grayscale(0.1) contrast(1.05) brightness(0.55); }

/* Ajustes responsivos: reducir bottom en móviles para no tapar contenido */
@media (max-width: 720px) {
  .tecnologia-nuclear .section__content { bottom: 3.2rem !important; } /* menos en móviles */
}

/* Ajustes para centrar el título en la sección "Tecnología Nuclear" */
.tecnologia-nuclear .section__content {
  /* mover el título al centro del hero (vertical + horizontal) */
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9999 !important;
  width: 100%;
  pointer-events: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 0;
  box-sizing: border-box;
}

/* Asegurar título centrado y que las dos palabras se mantengan en la misma línea cuando haya espacio */
.tecnologia-nuclear .tecnologia-title-wrap {
  padding: 0 3.2rem;
  text-align: center;
  max-width: 1200px;
  width: 100%;
  box-sizing: border-box;
}

/* Centrar el texto del título y mantener colores por palabra */
.tecnologia-nuclear .section__title {
  justify-content: center;
  text-align: center;
}

/* Ajustes responsivos: mantener centrado y reducir separación en pantallas pequeñas */
@media (max-width: 1024px) {
  .tecnologia-nuclear .tecnologia-title-wrap { padding: 0 2rem; }
  .tecnologia-nuclear .section__title { font-size: 5.2rem; }
}
@media (max-width: 720px) {
  .tecnologia-nuclear .tecnologia-title-wrap { padding: 0 1.2rem; }
  .tecnologia-nuclear .section__title { font-size: 3.4rem; }
}

/* Mover título 50% hacia arriba respecto a la posición centrada anterior */
.tecnologia-nuclear .section__content {
  position: absolute !important;
  left: 50% !important;
  top: 35% !important;            /* bajado 10% respecto a la posición anterior (antes 25%) */
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9999 !important;
  width: 100%;
  pointer-events: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 0;
  box-sizing: border-box;
}

/* Ajustes móviles: mantener buen posicionamiento en pantallas pequeñas */
@media (max-width: 1024px) {
  .tecnologia-nuclear .section__content { top: 30% !important; }
}
@media (max-width: 720px) {
  .tecnologia-nuclear .section__content { top: 35% !important; }
}

/* Alinear título "Tecnología Nuclear" con el footer (CLEAN ENERGY FUTURE) */
:root {
  --hero-align-desktop: 3.2rem; /* mismo padding-left que .section-footer .text-small-detail */
  --hero-align-mobile: 1.6rem;
}

/* Forzar alineamiento izquierdo del título y quitar transformaciones centradas */
.tecnologia-nuclear .section__content {
  position: absolute !important;
  left: 0 !important;
  top: 35% !important;           /* mantener posición vertical actual */
  transform: none !important;    /* quitar translate(-50%,-50%) */
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 0 !important;
  pointer-events: auto !important;
}

/* Contenedor del título con el mismo padding-left que el footer */
.tecnologia-nuclear .tecnologia-title-wrap {
  padding-left: var(--hero-align-desktop) !important;
  padding-right: 3.2rem !important;
  text-align: left !important;
  width: auto;
  box-sizing: border-box;
  max-width: calc(100% - var(--hero-align-desktop));
}

/* Asegurar que el título se alinee a la izquierda */
.tecnologia-nuclear .section__title {
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Alinear el small-detail del footer con el mismo offset */
.tecnologia-nuclear .section-footer .text-small-detail {
  padding-left: var(--hero-align-desktop) !important;
  padding-right: 3.2rem !important;
}

/* Responsive: usar menor offset en pantallas pequeñas y preservar alineamiento */
@media (max-width: 899px) {
  .tecnologia-nuclear .section__content { top: 30% !important; } /* ligera adaptación */
  .tecnologia-nuclear .tecnologia-title-wrap {
    padding-left: var(--hero-align-mobile) !important;
    padding-right: 1.6rem !important;
    max-width: calc(100% - var(--hero-align-mobile));
  }
  .tecnologia-nuclear .section-footer .text-small-detail {
    padding-left: var(--hero-align-mobile) !important;
    padding-right: 1.6rem !important;
  }
}

/* FORCE: mostrar el título "Tecnología Nuclear" (soluciona visibilidad/recorte/conflictos)
   - posiciona con offset izquierdo consistente con footer
   - asegura z-index alto (pero por debajo del nav)
   - fuerza colores por palabra y evita recortes en mobile/desktop
*/
.tecnologia-nuclear .section__content {
  position: absolute !important;
  left: var(--hero-align-desktop, 3.2rem) !important;
  top: 35% !important;
  transform: none !important;
  width: auto !important;
  max-width: calc(100% - var(--hero-align-desktop, 3.2rem)) !important;
  z-index: 12000 !important;            /* por encima del vídeo, por debajo del nav */
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: block !important;
  overflow: visible !important;
}

/* Forzar estilo del título y colores por palabra */
.tecnologia-nuclear .section__title {
  display: inline-flex !important;
  gap: .6rem !important;
  font-family: var(--ui-font) !important;
  font-weight: 300 !important;
  line-height: 1.02 !important;
  white-space: nowrap !important;
  visibility: visible !important;
  color: #fff !important; /* fallback: toda la línea blanca, luego sobreescribimos palabras */
}

/* palabra "Tecnología" en gris y "Nuclear" en blanco */
.tecnologia-nuclear .section__title .word-tech {
  color: #bdbdbd !important; /* gris claro */
}
.tecnologia-nuclear .section__title .word-nuclear {
  color: #ffffff !important;
}

/* Asegurar que pseudo-elementos del background no tapen el título */
.tecnologia-nuclear .section__background,
.tecnologia-nuclear .section__video-wrap {
  z-index: 0 !important;
}
.tecnologia-nuclear .section__background::before,
.tecnologia-nuclear .section__background::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Vídeo no captura pointer-events y queda debajo */
.tecnologia-nuclear .fill-media,
.tecnologia-nuclear video {
  z-index: 0 !important;
  pointer-events: none !important;
  display: block !important;
  object-fit: cover !important;
}

/* Responsive: permitir wrap y visibilidad en pantallas pequeñas */
@media (max-width: 1024px) {
  .tecnologia-nuclear .section__title {
    white-space: normal !important;
    font-size: 5.2rem !important;
  }
  .tecnologia-nuclear .section__content { top: 30% !important; left: var(--hero-align-mobile, 1.6rem) !important; }
}
@media (max-width: 720px) {
  .tecnologia-nuclear .section__title { font-size: 3.4rem !important; }
  .tecnologia-nuclear .section__content { top: 35% !important; left: var(--hero-align-mobile, 1.6rem) !important; }
}

/* FORCE: nav flotante, translúcido y sobre el vídeo */
#site-nav,
header#site-nav {
  position: fixed !important;
  top: 16px !important;
  left: 16px !important;
  right: 24px !important;
  width: calc(100% - 48px) !important;
  margin: 0 auto !important;
  z-index: 14000 !important;                       /* por encima del vídeo */
  background: rgba(0,0,0,0.36) !important;         /* translúcido */
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.30) !important;
  transition: background .28s ease, transform .36s ease, opacity .28s ease !important;
  pointer-events: auto !important;
}

/* La caja interior no añade fondo (visual controlado por #site-nav) */
#site-nav .nav__container {
  background: transparent !important;
  padding: 6px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Forzar texto y elementos del nav SIEMPRE en blanco */
#site-nav .nav__links-list a,
#site-nav .nav__links-list a:visited,
#site-nav .nav__links-list a:hover,
#site-nav .menu-btn {
  color: #ffffff !important;
  fill: #ffffff !important;
  background: transparent !important;
}

/* Asegurar logo blanco visible (si es imagen blanca) */
#site-logo,
#site-nav .nav__logo-img {
  filter: none !important;
  opacity: 1 !important;
}

/* No dejar que el nav reserve espacio en el flujo */
/* No forzar estático en el navbar principal */
header.nav:not(#site-nav), .nav:not(#site-nav) { position: static !important; }

/* Estilos específicos para el nav sobre el hero */
#site-nav {
  position: absolute; /* flota sobre el video */
  top: 18px;
  left: 16px;
  right: 24px;
  z-index: 12000;
  background: rgba(30,30,40,0.55); /* fondo oscuro translúcido para buen contraste */
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border-radius: 12px;
  padding: 0 12px; /* acercar logo a la izquierda y alojar mayor tamaño */
  height: calc(var(--nav-height) * 1.5 + 16px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

/* Forzar texto/blancos dentro del nav cuando está sobre el vídeo */
#site-nav .nav__links-list a,
#site-nav .menu-btn__lines span,
#site-nav .menu-btn {
  color: #ffffff;
}

/* Asegurar líneas blancas del ícono hamburguesa por defecto */
#site-nav .menu-btn__lines span { background: #ffffff !important; }

#site-nav .nav__logo-img {
  filter: none;
  opacity: 1;
  width: auto;
  height: calc(var(--nav-height) * 1.5); /* 1.5x más grande */
}

/* Ajustes móviles: menos margen lateral */
@media (max-width: 900px) {
  #site-nav, header#site-nav {
    left: 12px !important;
    right: 12px !important;
    width: calc(100% - 24px) !important;
    top: 8px !important;
    border-radius: 10px !important;
  }
  #site-nav .nav__container { padding: 6px 12px !important; }
}

/* Hamburger: mantener líneas SIEMPRE blancas */
#site-nav .menu-btn__lines span { background: #ffffff !important; }

/* Alinear "CLEAN ENERGY FUTURE" con "INGENIERÍA NUCLEAR" */
.tecnologia-nuclear .section-footer .text-small-detail {
  /* mismo offset que .ingenieria-title-wrap */
  padding-left: .5rem !important;
}
@media (min-width: 900px) {
  .tecnologia-nuclear .section-footer .text-small-detail {
    padding-left: 1.2rem !important;
  }
}

/* Asegurar contraste del logo en tema claro si usas <img> */
#site-logo {
  /* el JS ya cambia el src; esto evita filtros no deseados */
  filter: none !important;
  min-height: 100vh;
  height: auto;
  position: relative;
}

/* Override final: mantener el navbar por encima y clickeable en cualquier tema */
#site-nav {
  position: fixed !important;
  left: 16px !important; /* mover ligeramente a la izquierda */
  right: 24px !important;
  top: 16px !important;
  z-index: 90000 !important; /* por encima del contenido */
  pointer-events: auto !important;
}

/* Seguridad: asegurar que todos los hijos del nav aceptan interacción */
#site-nav, #site-nav * {
  pointer-events: auto !important;
}

/* Asegurar que el panel del menú quede por encima del nav cuando está abierto */
.menu-wrap { z-index: 2147483646 !important; }
.menu-wrap .menu__underlay { z-index: 2147483646 !important; }
.menu-wrap .menu { z-index: 2147483647 !important; }

/* Evitar que overlays de secciones capten los clics por encima del nav */
.section__wipe,
.section__wipe .blob {
  pointer-events: none !important;
}
/* Rehabilitar interacción en el contenido interno de esas secciones */
.section__wipe .section__body,
.section__wipe .grid,
.section__wipe a,
.section__wipe button,
.section__wipe input,
.section__wipe textarea,
.section__wipe select,
.section__wipe .box,
.section__wipe .box__desc {
  pointer-events: auto !important;
}

/* FINAL OVERRIDE: fijar nav arriba de todo y con contexto propio (después de todas las reglas) */
#site-nav {
  position: fixed !important;
  top: 16px !important;
  left: 24px !important;
  right: 24px !important;
  width: auto !important;
  isolation: isolate !important; /* nuevo stacking context */
  z-index: 2147483645 !important; /* justo por debajo del menú desplegable */
  pointer-events: auto !important;
}
#site-nav, #site-nav * { pointer-events: auto !important; }
@media (max-width: 900px) {
  #site-nav { left: 12px !important; right: 12px !important; top: 8px !important; }
}

/* Legal/long-form content: justify paragraphs and list items */
.legal-article p { text-align: justify; text-justify: inter-word; }
.legal-article ul, .legal-article ol { padding-left: 1.4rem; }
.legal-article li { text-align: justify; }

/* Contact page styles */
.contact-header { margin-bottom: 2.4rem; }
.contact-intro { max-width: 72ch; color: #555; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1.2fr; gap: 3.2rem; }
}

.contact-info { background: #F4F1FF; /* light purple */ border: 1px solid #E6E0FF; border-radius: 12px; padding: 1.6rem; }
@media (min-width: 900px) { .contact-info { padding: 2.4rem; } }

/* Contact page social block */
.contact-social { margin-top: 1.2rem; }
.contact-social__title { font-size: 1rem; color: #3c2a8e; margin: 0 0 .6rem; font-weight: 600; }
.contact-social__links { display: flex; gap: .6rem; flex-wrap: wrap; }
.contact-social__link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid #E6E0FF; transition: .2s ease; }
.contact-social__icon { font-size: 28px; line-height: 1; color: #3c2a8e; display: block; }
.contact-social__link:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(60,42,142,.14); background: #F8F6FF; }
.contact-social__link:active { transform: translateY(0); }
.contact-social__link:focus-visible { outline: 2px solid #745adb; outline-offset: 2px; }

.contact-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.contact-card { background: #fff; border: 1px solid #e6eaf0; border-radius: 10px; padding: 1.2rem 1.4rem; }
.contact-card__label { font-size: 1.1rem; color: #6b7280; margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .06rem; }
.contact-card__value { font-size: 1.5rem; color: #0b1320; word-break: break-word; }

.contact-form-wrap { background: #fff; border: 1px solid #e6eaf0; border-radius: 12px; padding: 1.6rem; }
@media (min-width: 900px) { .contact-form-wrap { padding: 2.4rem; } }

.contact-form { display: grid; gap: 1.2rem; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: end; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 1.2rem; } }

.form-group { display: grid; gap: .6rem; }
.form-group label { font-size: 1.2rem; color: #374151; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 2px;
  border: none;
  border-bottom: 1.5px solid #d1d5db;
  border-radius: 0;
  background: transparent;
  color: #111827;
  font-family: var(--ui-font);
  font-size: 1.4rem;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-bottom-color: #0b6b9a; box-shadow: 0 1px 0 0 #0b6b9a; }
.form-group .error { color: #b91c1c; font-size: 1.2rem; min-height: 1.2em; }

.form-check { align-items: start; grid-template-columns: auto 1fr; gap: .8rem; display: grid; }
.form-check input[type="checkbox"] { margin-top: .25rem; width: 16px; height: 16px; }

.form-actions { display: flex; align-items: center; gap: 1rem; margin-top: .4rem; }
.btn-primary { background: #0b6b9a; color: #fff; border: 1px solid #0b6b9a; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { filter: brightness(.96); }
.form-status { font-size: 1.3rem; color: #0b6b9a; }

/* Text-style submit control */
.form-actions--inline-text { justify-content: center; gap: 1.2rem; }
.btn-text-submit {
  background: transparent;
  border: none;
  color: #0b1320;
  font-size: 2.7rem; /* 50% larger */
  font-weight: 600;
  padding: 6px 8px;
  cursor: pointer;
}
.btn-text-submit:hover { color: #745adb; text-decoration: none; }

/* Contact map: grayscale and responsive */
.contact-map { margin-top: 3.2rem; }
.map-embed-wrap { position: relative; width: 100%; padding-top: 46%; border-radius: 12px; overflow: hidden; filter: grayscale(1) contrast(1.05) brightness(0.9); }
.map-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Cursos: Hero con imagen de fondo a pantalla completa --- */
.cursos-hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: stretch; /* footer se posiciona solo */
  padding: 0; /* usamos footer absoluto como en tecnología/física */
  /* Puedes reemplazar con una imagen de cursos cuando esté disponible */
  background-image: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.5)), url('../images/cursos/hero/hero-cursos.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
.cursos-hero .section-footer { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2; }
.cursos-hero .section-footer .section-footer__left { padding-left: 0.5rem; position: relative; min-height: 6.5rem; display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 900px) { .cursos-hero .section-footer .section-footer__left { padding-left: 1.2rem; } }
.cursos-hero .section-footer .slide-lead { color: var(--color-white); margin: 0.4rem 0 1.2rem; max-width: 70ch; }
/* H1 igual que tecnología/física */
.cursos-hero .section-footer h1.section__title.ingenieria-nuclear-title {
  font-family: 'Roboto', Helvetica Neue, sans-serif !important;
  font-size: 4rem !important;
  font-weight: 400 !important;
  letter-spacing: -.04rem !important;
  line-height: 92% !important;
}
@media (min-width: 900px) {
  .cursos-hero .section-footer h1.section__title.ingenieria-nuclear-title {
    font-size: 6.4rem !important;
    letter-spacing: -.128rem !important;
    line-height: 89% !important;
  }
}
@media (max-width: 900px) { .cursos-hero { height: 100vh; } }

/* --- Cursos: secciones a pantalla completa, patrón similar a Nosotros --- */
.cursos-section {
  height: 100vh;              /* igual que Nosotros: altura exacta de sección */
  display: block;            /* evitar que el flex altere la altura del carrusel */
  background: #ffffff;
  color: var(--color-neutral-800);
}
.cursos-section.alt { background: #f7f7f8; }
.cursos-section .max-width { width: 100%; padding: calc(var(--nav-height) + 24px) 2rem 40px; }
.cursos-section .slide-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
.cursos-section .slide-col--left { padding-right: 2rem; }
.cursos-section .slide-col--left .slide-lead { max-width: 70ch; width: 100%; text-align: justify; color: #555; }
/* Imagen en columnas de cursos: altura consistente y bordes redondeados */
.cursos-section .slide-col--right img { height: clamp(320px, 70vh, 680px); width: 100%; object-fit: cover; border-radius: 12px; }
.cursos-section .text-extra-large-intro { text-align: left; margin: 0 0 .8rem; font-size: 4rem; letter-spacing: -.04rem; line-height: 92%; }
@media (min-width: 900px) { .cursos-section .text-extra-large-intro { font-size: 6.4rem; letter-spacing: -.128rem; line-height: 89%; } }
.cursos-section .slide-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.cursos-section .slide-list li { text-align: justify; }
/* Cursos: meta bajo el título (dirigido, modalidad, duración) */
.course-meta {
  list-style: none;
  margin: .6rem 0 1.2rem;
  padding: 0 0 0 .2rem; /* ligera sangría */
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  gap: 1.95rem; /* +1.5x espacio entre items */
}
.course-meta__item {
  display: inline-flex;
  align-items: center;
  gap: .4rem; /* texto justo frente al ícono */
  color: #444;
}
.course-meta__icon {
  width: 14px;  /* ícono más pequeño */
  height: 14px;
  color: #00b760; /* verde solicitado */
  flex: 0 0 auto;
}
.course-meta__item span { line-height: 1.2; }
@media (max-width: 780px) {
  .course-meta { grid-auto-flow: row; grid-template-columns: 1fr; gap: 2.925rem; }
}
/* CTA buttons under course meta */
.course-cta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.2rem;
  max-width: 520px;
}
/* From Uiverse.io by adamgiebl */
.neu-button {
  color: #090909;
  padding: 0.7em 1.7em;
  font-size: 18px;
  border-radius: 0.5em;
  background: #e8e8e8;
  cursor: pointer;
  border: 1px solid #e8e8e8;
  transition: all 0.3s;
  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.neu-button:hover {
  border: 1px solid #ffffff;
}
.neu-button:active {
  box-shadow: 4px 4px 12px #c5c5c5, -4px -4px 12px #ffffff;
}
/* Igualar anchura entre botones y heredar tamaño de fuente del contexto */
.course-cta .neu-button { width: 100%; font-size: inherit; }
@media (max-width: 780px) {
  .course-cta { grid-template-columns: 1fr; max-width: 100%; }
}
@media (max-width: 900px) {
  .cursos-section { height: auto; min-height: 100vh; }
  .cursos-section .slide-columns { grid-template-columns: 1fr; }
  .cursos-section .slide-col--right { margin-top: 12px; }
  .cursos-section .slide-col--left { padding-right: 0; }

/* (override removido) POE Convencional usa el mismo layout estándar que el resto de cursos */
}

/* --- Industria (Tecnología Nuclear): secciones fullscreen --- */
.industria-section {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background: #ffffff;
  color: var(--color-neutral-800);
}
.industria-section.alt { background: #f7f7f8; }
.industria-section .max-width { width: 100%; padding: calc(var(--nav-height) + 24px) 2rem 40px; }
.industria-section .slide-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.industria-section .slide-col--left .slide-lead { max-width: 70ch; width: 100%; text-align: justify; color: #555; }
.industria-section .text-extra-large-intro { text-align: left; margin: 0 0 .8rem; font-size: 4rem; letter-spacing: -.04rem; line-height: 92%; }
@media (min-width: 900px) { .industria-section .text-extra-large-intro { font-size: 6.4rem; letter-spacing: -.128rem; line-height: 89%; } }
.industria-section .slide-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.industria-section .slide-list li { text-align: justify; }
@media (max-width: 900px) {
  .industria-section { min-height: auto; }
  .industria-section .slide-columns { grid-template-columns: 1fr; }
}