/* ═══════════════════════════════════════════════════════════════
   WEB B-FREE — ESTILOS PRINCIPALES
   Inspirado en www.elisavalero.com
   Fuente: Jost (equivalente a Folio Light)
═══════════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  --sidebar-w:         310px;
  --sidebar-pad-left:  50px;       /* sidebar padding-left, usado para sub-nav */
  --submenu-gap:       0px;        /* Elisa: dropdown lateral sin hueco */
  --slider-gap:        120px;      /* separación entre sidebar y carrusel */
  --font-main:         'Folio', 'Questrial', 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --c-bg:              #ffffff;
  --c-bg-light:        #f6f6f6;    /* = Elisa --mobile_menu_background_color */
  --c-text:            #747474;    /* = Elisa --body_typography-color */
  --c-text-mid:        #777777;    /* = Elisa --nav_typography-color */
  --c-text-light:      #adadad;    /* = Elisa --primary_color */
  --c-border:          #e8e8e8;    /* sidebar border */
  --c-nav:             #777777;    /* = Elisa --nav_typography-color */
  --c-nav-hover:       #333333;    /* = Elisa --link_color */
  --c-nav-active:      #333333;    /* active nav link */
  --c-accent:          #a0ce4e;    /* = Elisa primary green */
  --fw-light:          200;
  --fw-regular:        300;
  --fw-medium:         400;
  --transition:        0.28s ease;
  --section-pad:       54px 56px;
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family:    var(--font-main);
  font-weight:    var(--fw-regular);
  font-size:      13px;            /* = Elisa --body_typography-font-size */
  color:          var(--c-text);
  background:     var(--c-bg);
  line-height:    1.5;             /* = Elisa --body_typography-line-height */
  overflow-x:     hidden;
}

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

a:hover {
  color: var(--c-nav-hover); /* #333333 — Elisa link hover */
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul {
  list-style: none;
}

address {
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════
   BARRA LATERAL IZQUIERDA
═══════════════════════════════════════════════════════════════ */
#sidebar {
  position:   fixed;
  top:        0;
  left:       0;
  width:      var(--sidebar-w);
  height:     100vh;
  background: #ffffff;
  border-right: 1px solid #e8e8e8;
  z-index:    900;
  overflow:   visible;             /* clave: sub-navs se extienden fuera del sidebar */
  display:    flex;
  flex-direction: column;
  padding:    28px 38px 28px var(--sidebar-pad-left);
  transition: transform var(--transition);
}

/* sidebar no necesita scroll — contenido corto */

/* ── Marca / Logo ─────────────────────────────────────────── */
.sidebar-brand {
  margin-bottom: 0;         /* lang-switcher y nav tienen sus propios bordes */
  padding-bottom: 0;
}

.brand-link {
  display:    block;
  text-decoration: none;
}

.brand-title {
  font-size:   52px;
  font-weight: 300;
  letter-spacing: 0;
  color:       var(--c-text);
  line-height: 1.05;
  margin-top:  31px;         /* = Elisa logo data-margin-top */
  margin-bottom: 8px;
  transition:  color var(--transition);
}

.brand-link:hover .brand-title {
  color: var(--c-nav-hover); /* #333333 */
}

.brand-subtitle {
  font-size:   12px;
  font-weight: 400;
  color:       var(--c-text-mid);  /* #777777 = Elisa nav color */
  line-height: 1.4;
  letter-spacing: 0;
  max-width:   200px;
  text-transform: lowercase;
}

/* Evita herencias de color no deseadas dentro del subtitulo */
.brand-subtitle,
.brand-subtitle * {
  color: var(--c-text-mid) !important;
}

/* ── Navegación principal ─────────────────────────────────── */
.main-nav {
  flex: 1;
  margin-top: 24px;
  /* SIN overflow:hidden — los submenús absolutamente posicionados
     deben escapar sin ser recortados */
  overflow: visible;
  position: relative;
}

.nav-list {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.nav-item {
  position: relative;
  /* Sin bordes visibles — Elisa usa border-color blanco = invisible */
}

.nav-item:first-child {
  /* sin borde superior */
}

.nav-item:last-child {
  /* sin borde inferior */
}

.nav-link {
  display:        block;
  font-size:      13px;
  font-weight:    400;
  line-height:    19px;
  letter-spacing: 0;
  color:          #777777;
  padding:        7px 0;
  transition:     color 0.28s ease, opacity 0.28s ease;
  text-decoration: none;
  cursor:         pointer;
}

.nav-link:hover {
  color:   var(--c-nav-hover); /* #333333 = Elisa --link_color */
  opacity: 1;
}

.nav-link.active {
  font-weight:    400;
  color:          var(--c-nav-active); /* #333333 */
  opacity:        1;
}

/* ── Submenú ─────────────────────────────────────────────────
   El submenú aparece a la DERECHA del sidebar.
   Usa display:none → block para que sólo UNO se muestre a la vez
   y nunca se solapen visualmente.
──────────────────────────────────────────────────────────── */
.sub-nav {
  display:    none;            /* completamente fuera del árbol de render */
  position:   absolute;
  top:        -3px;
  /* alineado con el borde derecho del sidebar:        */
  /* li.left-offset = sidebar-pad-left (50px)          */
  /* sub-nav left = sidebar-w - sidebar-pad-left = 260 */
  /* → en viewport: 50+260 = 310px = borde del sidebar */
  left:       calc(var(--sidebar-w) - var(--sidebar-pad-left) + var(--submenu-gap));
  min-width:  175px;
  background: #ffffff;
  box-shadow: 3px 3px 12px rgba(0,0,0,.13);
  border-top: none;
  padding:    4px 0;
  z-index:    9999;            /* siempre encima de todo */
}

.has-sub {
  display:  block;
  position: relative;
  z-index:  1;                 /* contexto de apilamiento base */
}

/* Elevar el item con hover para que su sub-nav gane a los demás */
.has-sub:hover {
  z-index: 100;
}

/* Mostrar submenú */
.has-sub:hover > .sub-nav,
.has-sub:focus-within > .sub-nav,
.has-sub.desktop-open > .sub-nav {
  display: block;
}

.has-sub > .nav-link {
  display: block;
  width:   100%;
}

/* ── Items dentro del submenú ─────────────────────────────── */
.sub-link {
  display:        block;
  font-size:      13px;              /* = Elisa --nav_dropdown_font_size */
  font-weight:    400;
  line-height:    19px;              /* = Elisa sub-menu line-height */
  padding:        7px 20px;         /* = Elisa .fusion-main-menu .sub-menu a */
  color:          #777777;
  letter-spacing: 0;
  white-space:    nowrap;
  transition:     color .2s ease-in-out;
}

.sub-link:hover {
  color: var(--c-nav-hover); /* #333333 */
}

.sub-link.active {
  color: var(--c-nav-active); /* #333333 */
}

/* ── Selector de idioma ──────────────────────────────────── */
.lang-switcher {
  margin-top:    28px;
  margin-bottom: 16px;
  padding:       0;
  border:        none;
  display:     flex;
  align-items: center;
  gap:         8px;
}

.lang-btn {
  background:   none;
  border:       none;
  font-family:  var(--font-main);
  font-size:    13px;            /* = Elisa nav font-size */
  font-weight:  400;
  letter-spacing: 0;
  color:        #777777;
  cursor:       pointer;
  padding:      0;
  display:      inline-flex;
  align-items:  center;
  gap:          5px;
  transition:   color .2s ease-in-out;
}

.lang-flag-img {
  width: 16px;
  height: 11px;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,.08);
}

.lang-code {
  font-size: 13px;
  line-height: 1;
}

.lang-btn:hover {
  color: var(--c-nav-hover);
}

.lang-btn.active {
  color: var(--c-nav-active);
}

.lang-sep {
  color:     var(--c-text-light);
  font-size: 13px;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════════
   CONTENIDO PRINCIPAL
═══════════════════════════════════════════════════════════════ */
#main {
  margin-left: var(--sidebar-w);
  min-height:  100vh;
  position:    relative;
  background:  #ffffff;  /* = Elisa --content_bg_color */
}

/* ── Secciones: ocultar/mostrar ─────────────────────────────── */
.section {
  display:  none;
  width:    100%;
  min-height: 100vh;
}

.section.active {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   SLIDER DE PORTADA
═══════════════════════════════════════════════════════════════ */
.section-hero {
  min-height: 100vh;
}

.slider {
  position:   relative;
  width:      calc(100% - var(--slider-gap));
  height:     100vh;
  overflow:   hidden;
  background: #e9ecef;
  margin-left: var(--slider-gap);  /* gap significativo entre sidebar y slider */
}

.slide {
  position:   absolute;
  inset:      0;
  background-size:     cover;
  background-position: center center; /* encuadre uniforme en todas */
  background-repeat:   no-repeat;
  opacity:    0;
  transition: opacity 0.9s ease;
  will-change: opacity;
}

.slide.active {
  opacity: 1;
}

/* Placeholder cuando no hay imágenes */
.slider-placeholder {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--c-bg-light);
  opacity:         0;
  transition:      opacity 0.3s;
}

.slider-placeholder.visible {
  opacity: 1;
}

.slider-placeholder span {
  font-size:    80px;
  font-weight:  var(--fw-light);
  letter-spacing: 0.15em;
  color:        var(--c-border);
}

/* Flechas de navegación */
.slider-arrow {
  position:   absolute;
  top:        50%;
  transform:  translateY(-50%);
  background: transparent;
  border:     none;
  color:      rgba(255, 255, 255, 0.42);
  font-size:  44px;
  line-height: 1;
  padding:    0;
  width:      42px;
  height:     72px;
  cursor:     pointer;
  z-index:    10;
  opacity:    0;
  transition: opacity var(--transition), color var(--transition);
  font-family: var(--font-main);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.slider:hover .slider-arrow,
.slider-arrow:focus {
  opacity: 1;
}

.slider-arrow:hover {
  color: rgba(255, 255, 255, 0.92);
}

.slider-prev { left:  20px; }
.slider-next { right: 20px; }

/* Puntos indicadores */
.slider-dots {
  position:   absolute;
  bottom:     24px;
  left:       50%;
  transform:  translateX(-50%);
  display:    flex;
  gap:        9px;
  z-index:    10;
}

.dot {
  width:        8px;
  height:       8px;
  border-radius: 50%;
  background:   rgba(255, 255, 255, 0.5);
  border:       1px solid rgba(255, 255, 255, 0.8);
  cursor:       pointer;
  padding:      0;
  transition:   background var(--transition), transform var(--transition);
}

.dot.active {
  background:  rgba(255, 255, 255, 1);
  transform:   scale(1.2);
}

/* ═══════════════════════════════════════════════════════════════
   SECCIONES DE CONTENIDO — BASE
═══════════════════════════════════════════════════════════════ */
.section-inner {
  padding:    var(--section-pad);
  max-width:  980px;
}

.section-title {
  font-size:      24px;
  font-weight:    var(--fw-light);
  letter-spacing: 0;
  color:          var(--c-text);
  margin-bottom:  30px;
  line-height:    1.2;
  text-transform: lowercase;
}

.section-body {
  font-size:   15px;
  font-weight: var(--fw-regular);
  color:       var(--c-text-mid);
  line-height: 1.75;
  max-width:   780px;
}

.section-body br {
  content: '';
  display: block;
  margin-bottom: 0.5em;
}

/* ═══════════════════════════════════════════════════════════════
   EQUIPO
═══════════════════════════════════════════════════════════════ */
.section-team .section-inner {
  max-width: 100%;
  padding: 54px 56px 40px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 44px 36px;
  margin-bottom:   48px;
  align-items: start;
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* Foto del miembro */
.team-photo-wrap {
  width:          100%;
  aspect-ratio:   1 / 1;
  overflow:       hidden;
  margin-bottom:  12px;
  background:     var(--c-bg-light);
  flex-shrink:    0;
  position:       relative;
}

.team-photo {
  width:        100%;
  height:       100%;
  object-fit:   cover;
  object-position: center top;
  display:      block;
}

/* Iniciales como fallback cuando no hay foto */
.team-initials {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       28px;
  font-weight:     var(--fw-light);
  color:           var(--c-text-light);
  letter-spacing:  0.05em;
  background:      var(--c-bg-light);
}

.team-name {
  font-size:      30px;
  font-weight:    300;
  color:          var(--c-text);
  margin-bottom:  6px;
  line-height:    1.3;
  letter-spacing: 0;
}

.team-role {
  font-size:   13px;
  font-weight: 400;
  color:       var(--c-text-mid);
  line-height: 1.4;
  margin-bottom: 8px;
}

.team-bio {
  font-size: 13px;
  color: var(--c-text-mid);
  line-height: 1.5;
  max-width: 260px;
}

/* Texto del grupo de investigación */
.team-group-label {
  font-size:      14px;
  font-weight:    var(--fw-regular);
  color:          var(--c-text-mid);
  letter-spacing: 0;
  line-height:    1.6;
  padding-top:    12px;
  border-top:     0;
  max-width:      360px;
}

.team-member.collaborators {
  grid-row: span 2;
}

.team-collab-title {
  font-size: 30px;
  font-weight: 300;
  color: var(--c-text);
  margin-bottom: 8px;
}

.team-collab-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.team-collab-list li {
  font-size: 13px;
  color: var(--c-text-mid);
  line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════════
   CONTACTO
═══════════════════════════════════════════════════════════════ */
.section-contact .section-inner {
  max-width: 560px;
  padding: 54px 56px;
}

.contact-layout {
  display: block;
}

.contact-info {
  min-width: 0;
}

.contact-address {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-top:     8px;
}

.contact-email,
.contact-tel {
  font-size:      17px;
  font-weight:    300;
  color:          var(--c-text);
  text-decoration: none;
  letter-spacing: 0;
  transition:     opacity var(--transition);
}

.contact-email:hover,
.contact-tel:hover {
  opacity: 0.55;
}

.contact-place {
  font-size:      15px;
  color:          var(--c-text-mid);
  line-height:    1.35;
}

.contact-photo-wrap {
  margin-top: 20px;
  max-width: 500px;
}

.contact-photo {
  width:          100%;
  height:         auto;
  display:        block;
  background:     var(--c-bg-light);
  min-height:     220px;
}

/* ═══════════════════════════════════════════════════════════════
   SISTEMAS CONSTRUCTIVOS — INTRO
═══════════════════════════════════════════════════════════════ */
.sistemas-nav {
  margin-top:  36px;
  display:     flex;
  gap:         24px;
  flex-wrap:   wrap;
}

.sistemas-link {
  font-size:      13px;
  font-weight:    var(--fw-regular);
  letter-spacing: 0.05em;
  color:          var(--c-text);
  padding-bottom: 3px;
  border-bottom:  1px solid var(--c-text);
  transition:     opacity var(--transition);
  text-decoration: none;
  display:        block;
}

.sistemas-link:hover {
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════
   NOTICIAS
═══════════════════════════════════════════════════════════════ */
.news-list {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.news-item {
  padding:     28px 0;
  border-bottom: 1px solid var(--c-border);
}

.news-item:first-child {
  border-top: 1px solid var(--c-border);
}

.news-date {
  font-size:      11px;
  letter-spacing: 0.1em;
  color:          var(--c-text-light);
  text-transform: uppercase;
  margin-bottom:  8px;
}

.news-title {
  font-size:      16px;
  font-weight:    var(--fw-regular);
  color:          var(--c-text);
  margin-bottom:  10px;
  line-height:    1.4;
}

.news-text {
  font-size:      14px;
  font-weight:    var(--fw-regular);
  color:          var(--c-text-mid);
  line-height:    1.8;
  max-width:      600px;
}

.news-link {
  display:        inline-block;
  margin-top:     10px;
  font-size:      12px;
  letter-spacing: 0.05em;
  color:          var(--c-text);
  border-bottom:  1px solid currentColor;
  padding-bottom: 1px;
  transition:     opacity var(--transition);
  text-decoration: none;
}

.news-link:hover {
  opacity: 0.5;
}

.news-empty {
  font-size:   14px;
  color:       var(--c-text-light);
  padding-top: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   CABECERA MÓVIL + BOTÓN HAMBURGUESA
═══════════════════════════════════════════════════════════════ */

/* La cabecera móvil solo se muestra en móvil */
#mobile-header {
  display:    none;
}

.mobile-header-brand {
  font-size:   22px;
  font-weight: 300;
  color:       var(--c-text);
  letter-spacing: 0;
  text-decoration: none;
}

#mobile-toggle {
  display:        none;
  background:     none;
  border:         none;
  padding:        8px 0 8px 8px;
  cursor:         pointer;
  flex-direction: column;
  gap:            5px;
  flex-shrink:    0;
}

#mobile-toggle span {
  display:    block;
  width:      22px;
  height:     1px;
  background: var(--c-text);
  transition: all var(--transition);
}

/* Estado abierto */
#mobile-toggle.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
#mobile-toggle.open span:nth-child(2) {
  opacity: 0;
}
#mobile-toggle.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Superposición oscura (móvil) */
#overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0, 0, 0, 0.35);
  z-index:    800;
}

#overlay.visible {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET Y MÓVIL
═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root {
    --sidebar-w:        270px;
    --sidebar-pad-left: 38px;
    --submenu-gap:      16px;
    --slider-gap:       70px;
    --section-pad:      48px 36px;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    gap: 30px 24px;
  }

  .team-photo-wrap {
    width:  100%;
    height: auto;
  }

  .team-member.collaborators {
    grid-column: span 2;
    grid-row: auto;
  }
}

@media (max-width: 700px) {
  :root {
    --section-pad: 40px 24px;
  }

  /* Mostrar barra de cabecera móvil */
  #mobile-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    height:          54px;
    background:      #ffffff;
    border-bottom:   1px solid #e8e8e8;
    z-index:         1050;
    padding:         0 18px;
  }

  /* Mostrar botón hamburguesa */
  #mobile-toggle {
    display: flex;
  }

  /* Sidebar se convierte en drawer deslizante */
  #sidebar {
    transform:  translateX(-100%);
    z-index:    1100;
    width:      285px;
    top:        0;
    height:     100vh;
    overflow-x: hidden;
    overflow-y: auto;            /* scroll en móvil sí hace falta */
    padding:    70px 24px 24px 28px;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
  }

  #sidebar.open {
    transform: translateX(0);
  }

  /* El contenido principal ocupa toda la pantalla */
  #main {
    margin-left: 0;
    padding-top: 54px;
  }

  /* Brand más pequeño en móvil */
  .brand-title {
    font-size: 44px;
  }

  /* Hero slider en móvil: sin margen */
  .slider {
    height:      calc(100svh - 54px);
    margin-left: 0;
    width:       100%;
  }

  /* Contacto en columna */
  .contact-layout {
    display: block;
  }

  /* Submenús: acordeón en móvil */
  .sub-nav {
    display:    none !important;
    position:   static !important;
    left:       auto !important;
    top:        auto !important;
    box-shadow: none !important;
    border-top: none !important;
    background: transparent !important;
    min-width:  0 !important;
    padding:    0 0 6px 16px !important;
    z-index:    auto !important;
  }

  .sub-nav.open {
    display: block !important;
  }

  /* Hover CSS no activa submenús en móvil */
  .has-sub:hover > .sub-nav,
  .has-sub:focus-within > .sub-nav {
    display: none !important;
  }

  .has-sub.sub-open > .sub-nav {
    display: block !important;
  }

  /* Reset z-index del has-sub en móvil */
  .has-sub,
  .has-sub:hover {
    z-index: auto !important;
  }

  /* Flecha ▸ / ▾ en items con submenú */
  .has-sub > .nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
  }

  .has-sub > .nav-link::after {
    content: '›';
    display: inline-block;
    transform: rotate(90deg);
    transition: transform 0.2s ease;
    font-size: 14px;
    line-height: 1;
    color: var(--c-text-light);
    flex-shrink: 0;
    margin-left: 6px;
  }

  .has-sub.sub-open > .nav-link::after {
    transform: rotate(-90deg);
  }

  /* Guión delante de sub-items, como en elisavalero */
  .sub-link::before {
    content: '– ';
    color: var(--c-text-light);
  }

  .sub-link {
    padding: 5px 0;
    white-space: normal;
  }

  .contact-photo-wrap {
    max-width: 100%;
  }

  /* Team grid más estrecho */
  .team-grid {
    grid-template-columns: 1fr;
    gap: 24px 16px;
  }

  .team-photo-wrap {
    width: 100%;
    max-width: 320px;
    height: auto;
  }

  .team-name,
  .team-collab-title,
  .contact-email,
  .contact-place,
  .contact-tel {
    font-size: 19px;
  }

  /* Section inner */
  .section-team .section-inner {
    padding: 40px 24px;
  }

  /* Slider arrows más pequeñas */
  .slider-arrow {
    font-size:  28px;
    width:      34px;
    height:     54px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   UTILIDADES
═══════════════════════════════════════════════════════════════ */

/* Animación de entrada al mostrar sección */
@keyframes fadeInUp {
  from {
    opacity:   0;
    transform: translateY(18px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.section.active .section-inner {
  animation: fadeInUp 0.45s ease both;
}

/* Evita la animación en el hero */
.section-hero.active .section-inner {
  animation: none;
}

/* Focus visible accesible */
:focus-visible {
  outline:        2px solid var(--c-text);
  outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}