/* BioActiveLabs — hoja común de la corporativa.
   Se toca AQUI y cambia en las ocho paginas. */
:root{
    --paper:#ffffff; --soft:#f5f6f7; --card:#ffffff;
    --ink:#14181a; --ink-2:#545c60; --ink-3:#8b9498;
    --verde:#0a8a6e; --verde-d:#076b55; --verde-l:#e9f4f0;
    --line:#e5e8e9;
    --oscuro:#14181a; --oscuro-t:#f3f5f6; --oscuro-t2:#aab2b6;
    --r:26px; --r-s:18px;
  }
  /* 🔒 Tema ÚNICO y claro, a propósito. Una web corporativa no cambia de color según
     el sistema de quien la mire: la identidad es la identidad. Por eso aquí no hay bloque
     de `prefers-color-scheme` ni `[data-theme]`, y cada superficie pinta su color
     explícitamente en vez de heredar el del contenedor. */

  *{box-sizing:border-box}
  html{scroll-behavior:smooth; background:#ffffff; color-scheme:light}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none !important} }
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:Figtree,system-ui,-apple-system,sans-serif;
    font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.03em; line-height:1.06; text-wrap:balance}
  h1{font-size:clamp(2.5rem,5.6vw,4.3rem); font-weight:800}
  h2{font-size:clamp(1.95rem,3.7vw,2.95rem)}
  h3{font-size:1.32rem; letter-spacing:-.02em}
  p{margin:0}
  a{color:inherit; text-decoration:none}
  img{max-width:100%; display:block}
  :focus-visible{outline:3px solid var(--verde); outline-offset:3px}

  .lim{max-width:1240px; margin:0 auto; padding:0 32px}
  @media(max-width:720px){ .lim{padding:0 20px} }
  .eti{font-size:.81rem; font-weight:700; color:var(--verde)}
  .lede{color:var(--ink-2); font-size:1.17rem; max-width:56ch}

  nav{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line)}
  .nr{display:flex; align-items:center; justify-content:space-between; height:80px; gap:24px}
  .logo{display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.22rem; letter-spacing:-.035em}
  .logo svg{width:32px; height:32px; flex:none; color:var(--verde)}
  .nl{display:flex; gap:30px; font-size:.98rem; font-weight:600; color:var(--ink-2); white-space:nowrap}
  @media(max-width:1180px){ .nl{gap:22px} }
  .nl a:hover{color:var(--verde)}
  @media(max-width:980px){ .nl{display:none} }
  .btn{
    display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:.98rem;
    padding:14px 26px; border-radius:999px; background:var(--verde); color:#fff;
    border:2px solid var(--verde); transition:.18s;
  }
  .btn:hover{background:var(--verde-d); border-color:var(--verde-d)}
  .btn.g{background:transparent; color:var(--ink); border-color:var(--line)}
  .btn.g:hover{background:transparent; border-color:var(--verde); color:var(--verde)}

  .nav-acc{display:flex; align-items:center; gap:20px}

  /* franja de pruebas del prototipo: los destinos externos, para poder clicarlos */

  /* hero: blanco arriba, imagen grande debajo */
  .hero{padding:76px 0 0}
  @media(max-width:720px){ .hero{padding:44px 0 0} }
  .hero h1{max-width:16ch; margin-top:16px}
  .hero .lede{margin-top:26px}
  .acc{display:flex; flex-wrap:wrap; gap:13px; margin-top:34px}
  .foto{border-radius:var(--r); overflow:hidden; background:var(--soft)}
  .foto img{width:100%; height:100%; object-fit:cover}
  .hero .foto{margin-top:56px; aspect-ratio:1216/560}
  @media(max-width:720px){ .hero .foto{aspect-ratio:4/3; margin-top:34px} }
  .foto video{width:100%; height:100%; display:block; object-fit:cover; background:#000}
  .hero .foto.video{aspect-ratio:16/9}
  @media(max-width:720px){ .hero .foto.video{aspect-ratio:16/9} }

  .tira{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:20px}
  @media(max-width:900px){ .tira{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:520px){ .tira{grid-template-columns:1fr} }
  .paso{
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-s);
    padding:24px 22px 26px; display:flex; flex-direction:column; gap:9px; transition:.18s;
  }
  .paso:hover{border-color:var(--verde); transform:translateY(-3px)}
  .paso .n{
    width:34px; height:34px; border-radius:999px; background:var(--verde-l); color:var(--verde);
    display:grid; place-items:center; font-weight:800; font-size:.86rem; margin-bottom:5px;
  }
  .paso h3{font-size:1.1rem}
  .paso p{color:var(--ink-2); font-size:.93rem}

  section.s{padding:92px 0}
  @media(max-width:720px){ section.s{padding:58px 0} }
  .enc{max-width:54ch; display:flex; flex-direction:column; gap:16px; margin-bottom:46px}

  .duo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:58px; align-items:center}
  @media(max-width:920px){ .duo{grid-template-columns:1fr; gap:32px} }
  .duo .foto{aspect-ratio:4/3}
  .duo.inv .foto{order:-1}
  @media(max-width:920px){ .duo.inv .foto{order:0} }
  .duo .txt{display:flex; flex-direction:column; gap:18px}
  .duo .txt h2{max-width:15ch}
  .duo .txt p{color:var(--ink-2)}
  .duo .txt .btn{align-self:flex-start; margin-top:8px}

  .g3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
  @media(max-width:920px){ .g3{grid-template-columns:1fr} }
  .g4{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:18px}
  @media(max-width:1080px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px} }
  @media(max-width:560px){ .g4{grid-template-columns:1fr} }
  /* portfolio: 6 tarjetas, 3×2 en escritorio, 2×3 en tableta, una columna en móvil */
  .g6{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
  @media(max-width:1000px){ .g6{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media(max-width:560px){ .g6{grid-template-columns:1fr} }
  .marca{
    border-radius:var(--r); border:1px solid var(--line); background:var(--card);
    display:flex; flex-direction:column; transition:.18s; overflow:hidden;
  }
  .marca:hover{transform:translateY(-4px); border-color:var(--verde)}
  .marca .cu{padding:28px; display:flex; flex-direction:column; gap:12px; flex:1}
  .marca .est{font-size:.76rem; font-weight:700; color:var(--ink-3)}
  /* tarjeta sin estado confirmado: se reserva su línea para que el título no se descuelgue */
  .marca .est:empty::before{content:"\00a0"}
  .marca p{color:var(--ink-2); font-size:.96rem; flex:1}
  .marca .ir{font-weight:700; color:var(--verde); font-size:.95rem}
  .marca .ir:hover{text-decoration:underline}
  .marca.pdte{border-style:dashed}
  .marca.pdte h3{color:var(--ink-3)}

  .serv{border-radius:var(--r); padding:34px 30px; display:flex; flex-direction:column; gap:14px;
        background:var(--soft)}
  .serv p{color:var(--ink-2); font-size:.97rem}

  /* banda farma: foto con velo */
  .banda{position:relative; border-radius:var(--r); overflow:hidden; min-height:420px; display:grid}
  .banda img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .banda .velo{
    position:relative; padding:64px; display:grid; align-content:center; gap:6px;
    background:linear-gradient(100deg, rgba(14,16,18,.93) 0%, rgba(14,16,18,.78) 46%, rgba(14,16,18,.20) 100%);
    color:var(--oscuro-t);
  }
  @media(max-width:820px){ .banda .velo{padding:38px 26px;
    background:linear-gradient(180deg, rgba(14,16,18,.92), rgba(14,16,18,.86))} }
  .banda h2{margin-top:12px; max-width:17ch; color:#f3f5f6}
  .banda p{color:#c6cbcd; margin-top:14px; max-width:48ch}
  .banda .eti{color:#5cd8b6}
  .banda .btn{margin-top:26px; justify-self:start; background:#f3f5f6; border-color:#f3f5f6; color:#14181a !important}

  .rep{border-radius:var(--r); overflow:hidden; border:1px solid var(--line)}
  .rep table{width:100%; border-collapse:collapse}
  .rep th{background:var(--soft); text-align:left; padding:18px 24px; font-size:.83rem;
          font-weight:700; color:var(--ink-2); width:50%; border-bottom:1px solid var(--line)}
  .rep td{padding:17px 24px; border-bottom:1px solid var(--line); font-size:1.02rem}
  .rep tr:last-child td{border-bottom:0}
  .rep td:first-child{border-right:1px solid var(--line); font-weight:600}
  .rep td:last-child{color:var(--ink-2)}

  .cita{border-radius:var(--r); background:var(--soft); padding:54px 58px; margin-top:26px;
        border-left:5px solid var(--verde);
        font-size:clamp(1.45rem,3vw,2.2rem); font-weight:700; letter-spacing:-.03em; line-height:1.2}
  @media(max-width:720px){ .cita{padding:34px 26px} }

  .comite{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
  @media(max-width:900px){ .comite{grid-template-columns:1fr} }
  .miembro{border-radius:var(--r-s); border:1px dashed var(--line); padding:26px;
           display:flex; align-items:center; gap:16px}
  .miembro .av{width:52px; height:52px; border-radius:999px; background:var(--soft); flex:none}
  .miembro b{display:block; font-size:1.05rem}
  .miembro span{font-size:.87rem; color:var(--ink-3)}

  .cta2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}
  @media(max-width:760px){ .cta2{grid-template-columns:1fr} }
  .cta{border-radius:var(--r); padding:40px; background:var(--soft); display:flex; flex-direction:column; gap:14px}
  .cta p{color:var(--ink-2); flex:1}
  .cta .btn{align-self:flex-start; margin-top:8px}

  footer{background:var(--oscuro); color:var(--oscuro-t2); margin-top:92px; padding:66px 0 36px; font-size:.94rem}
  .fg{display:grid; grid-template-columns:1.7fr repeat(3,1fr); gap:38px}
  @media(max-width:820px){ .fg{grid-template-columns:1fr 1fr; gap:28px} }
  .fg h4{font-size:.8rem; color:var(--oscuro-t); font-weight:700; margin:0 0 14px}
  .fg ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
  .fg a:hover{color:var(--oscuro-t)}
  .legal{margin-top:46px; padding-top:22px; border-top:1px solid rgba(255,255,255,.13);
         display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; font-size:.85rem}

  .andamio{border:1px dashed var(--ink-3); border-radius:var(--r-s); background:var(--soft);
           padding:18px 22px; font-size:.88rem; color:var(--ink-2); margin-top:26px; line-height:1.6}
  .andamio b{color:var(--ink)}