/*
Theme Name: Bioxentys Corporate
Theme URI: https://bioxentys.com
Author: Bioxentys
Description: Tema corporativo personalizado para Bioxentys, enfocado en Regulatory Affairs, R&D, FDA, Latinoamérica y Quality & Compliance.
Version: 1.1.0
Text Domain: bioxentys
License: GNU General Public License v2 or later
*/
:root {
      --purple: #41206f;
      --purple-2: #6f42a5;
      --orange: #f47a20;
      --navy: #17233d;
      --ink: #263147;
      --muted: #667085;
      --line: #e8e8ef;
      --soft: #f8f7fb;
      --white: #ffffff;
      --radius: 22px;
      --shadow: 0 18px 60px rgba(34, 31, 68, .10);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background: var(--white);
      line-height: 1.6;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    .container {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--purple);
      font-weight: 800;
      font-size: .82rem;
      text-transform: uppercase;
      letter-spacing: .12em;
    }
    .eyebrow::before {
      content: "";
      width: 26px;
      height: 3px;
      background: var(--orange);
      border-radius: 999px;
    }
    h1,h2,h3 { line-height: 1.12; margin: 0; color: var(--navy); }
    h1 { font-size: clamp(2.7rem, 6vw, 5.7rem); letter-spacing: -.045em; }
    h2 { font-size: clamp(2rem, 4vw, 3.45rem); letter-spacing: -.035em; }
    h3 { font-size: 1.22rem; }
    p { margin: 0; }
    .lead {
      font-size: clamp(1.05rem, 1.7vw, 1.27rem);
      color: var(--muted);
      max-width: 760px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-radius: 999px;
      min-height: 50px;
      padding: 0 24px;
      font-weight: 800;
      transition: .2s ease;
      border: 1px solid transparent;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary {
      color: #fff;
      background: linear-gradient(135deg, var(--purple), var(--purple-2));
      box-shadow: 0 12px 30px rgba(65, 32, 111, .22);
    }
    .btn-secondary {
      color: var(--purple);
      background: #fff;
      border-color: rgba(65, 32, 111, .18);
    }

    /* Header */
    header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(232,232,239,.8);
    }
    .nav {
      min-height: 94px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand {
      width: 270px;
      height: 78px;
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .brand img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: left center;
      display: block;
    }
    .menu { display: flex; align-items: center; gap: 26px; font-size: .94rem; font-weight: 700; }
    .menu a:hover { color: var(--purple); }
    .nav-cta { padding: 0 18px; min-height: 44px; }
    .menu-toggle {
      display: none;
      border: 0;
      background: transparent;
      font-size: 1.8rem;
      cursor: pointer;
    }

    /* Hero */
    .hero {
      position: relative;
      overflow: hidden;
      padding: 92px 0 84px;
      background:
        radial-gradient(circle at 90% 5%, rgba(244,122,32,.12), transparent 28%),
        radial-gradient(circle at 65% 35%, rgba(65,32,111,.10), transparent 30%),
        linear-gradient(180deg, #fff 0%, #fbfaff 100%);
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.07fr .93fr;
      align-items: center;
      gap: 64px;
    }
    .hero-copy { display: grid; gap: 27px; }
    .hero-copy h1 span { color: var(--purple); }
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
    .hero-note {
      display: flex;
      gap: 26px;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: .92rem;
      font-weight: 700;
    }
    .hero-note span::before {
      content: "✓";
      color: var(--orange);
      font-weight: 900;
      margin-right: 7px;
    }
    .hero-visual {
      min-height: 500px;
      position: relative;
      border-radius: 34px;
      background: linear-gradient(145deg, #1f2a46 0%, #41206f 62%, #744aa4 100%);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .orb { position: absolute; border-radius: 50%; filter: blur(1px); }
    .orb.one { width: 240px; height: 240px; right: -50px; top: -40px; background: rgba(244,122,32,.26); }
    .orb.two { width: 320px; height: 320px; left: -120px; bottom: -150px; background: rgba(255,255,255,.08); }
    .map-lines {
      position: absolute;
      inset: 0;
      opacity: .26;
      background-image:
        linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
      background-size: 42px 42px;
      transform: perspective(500px) rotateX(18deg) scale(1.15);
    }
    .visual-card {
      position: absolute;
      padding: 20px 22px;
      border-radius: 18px;
      background: rgba(255,255,255,.94);
      box-shadow: 0 18px 40px rgba(0,0,0,.18);
    }
    .visual-card b { display: block; color: var(--navy); margin-bottom: 4px; }
    .visual-card small { color: var(--muted); }
    .vc1 { left: 38px; top: 58px; }
    .vc2 { right: 28px; top: 208px; }
    .vc3 { left: 70px; bottom: 54px; }
    .connector {
      position: absolute;
      height: 2px;
      background: rgba(255,255,255,.45);
      transform-origin: left center;
    }
    .c1 { width: 245px; left: 160px; top: 150px; transform: rotate(19deg); }
    .c2 { width: 220px; left: 220px; top: 340px; transform: rotate(-18deg); }
    .dot {
      position: absolute;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--orange);
      border: 5px solid rgba(255,255,255,.8);
      box-shadow: 0 0 0 8px rgba(244,122,32,.14);
    }
    .d1 { left: 49%; top: 35%; }
    .d2 { left: 57%; top: 63%; }

    /* Shared sections */
    section { padding: 92px 0; }
    .section-head {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      align-items: end;
      gap: 50px;
      margin-bottom: 44px;
    }
    .section-head .lead { justify-self: end; }

    /* Services */
    .services { background: #fff; }
    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    .card {
      padding: 30px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      transition: .25s ease;
    }
    .card:hover {
      transform: translateY(-5px);
      border-color: rgba(65,32,111,.22);
      box-shadow: var(--shadow);
    }
    .icon {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      margin-bottom: 21px;
      background: var(--soft);
      color: var(--purple);
      font-weight: 900;
      font-size: 1.1rem;
    }
    .card p { margin-top: 10px; color: var(--muted); font-size: .96rem; }
    .card a { display: inline-block; margin-top: 18px; color: var(--purple); font-weight: 800; }

    /* Regions */
    .regions { background: var(--soft); }
    .region-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .region {
      min-height: 360px;
      padding: 44px;
      border-radius: 28px;
      position: relative;
      overflow: hidden;
    }
    .region.usa { background: var(--navy); color: #fff; }
    .region.latam { background: linear-gradient(145deg, var(--purple), #6f42a5); color: #fff; }
    .region h3 { color: #fff; font-size: 2rem; margin: 16px 0 14px; }
    .region p { color: rgba(255,255,255,.78); max-width: 560px; }
    .region .tags { display:flex; gap:8px; flex-wrap:wrap; margin-top: 26px; }
    .region .tag {
      border: 1px solid rgba(255,255,255,.2);
      background: rgba(255,255,255,.09);
      padding: 8px 11px;
      border-radius: 999px;
      font-size: .82rem;
      font-weight: 700;
    }
    .region .glow {
      position: absolute;
      width: 230px; height: 230px;
      border-radius: 50%;
      right: -90px; bottom: -80px;
      background: rgba(244,122,32,.26);
    }

    /* Process */
    .process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      counter-reset: step;
    }
    .step {
      counter-increment: step;
      padding: 28px 24px;
      border-top: 3px solid var(--line);
    }
    .step::before {
      content: "0" counter(step);
      display: block;
      color: var(--orange);
      font-weight: 900;
      margin-bottom: 28px;
    }
    .step p { margin-top: 8px; color: var(--muted); }

    /* Why */
    .why {
      background: var(--navy);
      color: #fff;
    }
    .why h2, .why h3 { color: #fff; }
    .why .eyebrow { color: #fff; }
    .why-grid {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 70px;
      align-items: center;
    }
    .why-copy { display: grid; gap: 26px; }
    .why-copy .lead { color: rgba(255,255,255,.72); }
    .why-list { display:grid; gap: 14px; }
    .why-item {
      padding: 18px 20px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      background: rgba(255,255,255,.05);
    }
    .why-item b { display:block; margin-bottom: 3px; }
    .why-item span { color: rgba(255,255,255,.66); font-size: .94rem; }

    /* CTA/contact */
    .contact-wrap {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 42px;
      padding: 44px;
      border-radius: 30px;
      background: linear-gradient(145deg, #fff7f1, #faf8ff);
      border: 1px solid #eee8f3;
    }
    .contact-copy { display:grid; gap: 20px; align-content: start; }
    form { display:grid; gap: 14px; }
    .field-grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
    input, select, textarea {
      width:100%;
      border:1px solid #dddce7;
      background:#fff;
      border-radius:14px;
      padding:14px 15px;
      font:inherit;
      color:var(--ink);
      outline:none;
    }
    input:focus, select:focus, textarea:focus { border-color: rgba(65,32,111,.5); box-shadow: 0 0 0 4px rgba(65,32,111,.08); }
    textarea { min-height: 128px; resize: vertical; }
    .form-note { font-size: .8rem; color:var(--muted); }

    footer {
      padding: 38px 0;
      border-top: 1px solid var(--line);
      background: #fff;
    }
    .footer-grid {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:30px;
      flex-wrap:wrap;
    }
    .footer-logo {
      width: 245px;
      height: 90px;
      object-fit: contain;
      object-position: left center;
      display: block;
    }
    .footer-text { color:var(--muted); font-size:.9rem; text-align:right; }

    @media (max-width: 980px) {
      .hero-grid, .section-head, .why-grid, .contact-wrap { grid-template-columns: 1fr; }
      .hero-visual { min-height: 430px; }
      .cards { grid-template-columns: 1fr 1fr; }
      .process-grid { grid-template-columns: 1fr 1fr; }
      .section-head .lead { justify-self: start; }
      .menu {
        position: fixed;
        top: 94px; left: 0; right: 0;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        background: #fff;
        padding: 24px;
        border-bottom: 1px solid var(--line);
      }
      .menu.open { display: flex; }
      .menu-toggle { display: block; }
      .nav > .btn { display:none; }
    }
    @media (max-width: 680px) {
      .container { width: min(100% - 28px, 1180px); }
      .hero { padding-top: 58px; }
      .cards, .region-grid, .process-grid, .field-grid { grid-template-columns: 1fr; }
      .region { min-height: auto; padding: 32px 26px; }
      .hero-visual { min-height: 380px; }
      .visual-card { transform: scale(.88); transform-origin: center; }
      .vc1 { left: 8px; top: 34px; }
      .vc2 { right: 2px; top: 175px; }
      .vc3 { left: 20px; bottom: 26px; }
      .brand {
        width: 215px;
        height: 66px;
      }
      .contact-wrap { padding: 28px 20px; }
      .footer-text { text-align:left; }
    }

.form-success {
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eef8f0;
  color: #236b35;
  font-weight: 700;
}
.form-error {
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff1f0;
  color: #9b2c2c;
  font-weight: 700;
}