@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/inter-variable.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('/fonts/manrope-variable.woff2') format('woff2'); }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --green: #7eb551;
      --green-light: #eef6e6;
      --green-dark: #5a8a3a;
      --green-gradient: linear-gradient(135deg, #7eb551, #a3d47a);
      --green-subtle-gradient: linear-gradient(135deg, #f6fbf2 0%, #ffffff 50%, #f0f7ea 100%);
      --white: #ffffff;
      --gray-50: #f9fafb;
      --gray-100: #f3f4f6;
      --gray-200: #e5e7eb;
      --gray-400: #9ca3af;
      --gray-600: #4b5563;
      --gray-800: #1f2937;
      --gray-900: #111827;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--gray-800);
      background: var(--white);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3 {
      font-family: 'Manrope', 'Inter', sans-serif;
      color: var(--gray-900);
      line-height: 1.1;
    }

    .container {
      width: min(1160px, 90vw);
      margin: 0 auto;
    }

    /* ── Header ── */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(20px);
    }

    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0;
    }

    .nav-bar .logo { height: 44px; }

    .nav-bar nav {
      display: flex;
      gap: 28px;
      align-items: center;
    }

    .nav-bar nav a {
      color: var(--gray-600);
      text-decoration: none;
      font-size: 0.9rem;
      font-weight: 500;
      transition: color 0.2s;
    }

    .nav-bar nav a:hover { color: var(--green-dark); }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 24px;
      border-radius: 10px;
      font-weight: 600;
      font-size: 0.9rem;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all 0.25s;
    }

    .btn-primary {
      background: var(--green);
      color: var(--white);
    }

    .btn-primary:hover {
      background: var(--green-dark);
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(126,181,81,0.3);
    }

    .btn-ghost {
      background: var(--white);
      color: var(--gray-800);
      border: 1.5px solid var(--gray-200);
    }

    .btn-ghost:hover {
      border-color: var(--green);
      color: var(--green-dark);
    }

    /* ── Hero ── */
    .hero {
      padding: 72px 0 56px;
      background: var(--green-subtle-gradient);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 48px;
      align-items: center;
    }

    .hero .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      border-radius: 999px;
      background: rgba(126,181,81,0.12);
      color: var(--green-dark);
      font-weight: 600;
      font-size: 0.82rem;
      margin-bottom: 16px;
    }

    .hero .pill svg {
      width: 14px;
      height: 14px;
    }

    .hero h1 {
      font-size: clamp(2.4rem, 5vw, 3.6rem);
      font-weight: 800;
      margin-bottom: 20px;
    }

    .hero .lead {
      font-size: 1.05rem;
      color: var(--gray-600);
      max-width: 540px;
      line-height: 1.75;
    }

    .hero .actions {
      display: flex;
      gap: 12px;
      margin-top: 28px;
    }

    .hero-visual {
      position: relative;
    }

    .hero-visual img {
      width: 100%;
      height: 420px;
      object-fit: cover;
      border-radius: 20px;
      box-shadow: 0 24px 64px rgba(126,181,81,0.15);
    }

    .hero-visual .float-card {
      position: absolute;
      bottom: -20px;
      left: -20px;
      background: var(--white);
      border-radius: 14px;
      padding: 16px 20px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .float-card .icon-circle {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: var(--green-light);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .float-card .icon-circle svg {
      width: 20px;
      height: 20px;
      color: var(--green);
    }

    .float-card .text {
      font-size: 0.82rem;
    }

    .float-card .text strong {
      display: block;
      font-size: 0.88rem;
      color: var(--gray-900);
    }

    .float-card .text span {
      color: var(--gray-400);
    }

    /* ── Logos ── */
    .logos-section {
      padding: 48px 0;
      border-bottom: 1px solid var(--gray-100);
    }

    .logos-section .label {
      font-size: 0.8rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--gray-400);
      text-align: center;
      margin-bottom: 24px;
    }

    .logo-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 8px;
    }

    .logo-grid img {
      width: 100%;
      height: 72px;
      object-fit: contain;
      padding: 14px 10px;
      background: var(--gray-50);
      border-radius: 12px;
      filter: grayscale(1);
      opacity: 0.55;
      transition: all 0.3s;
    }

    .logo-grid img:hover {
      filter: grayscale(0);
      opacity: 1;
      background: var(--white);
    }

    /* ── Sections ── */
    .section { padding: 80px 0; }

    .section h2 {
      font-size: 1.9rem;
      font-weight: 800;
      margin-bottom: 16px;
    }

    .section p {
      color: var(--gray-600);
      font-size: 1rem;
      line-height: 1.75;
    }

    /* ── Quienes somos ── */
    .about-split {
      display: grid;
      grid-template-columns: 0.4fr 0.6fr;
      gap: 48px;
      align-items: start;
    }

    .section-photo {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1400 / 1083;
      object-fit: cover;
      margin-top: 28px;
      border-radius: 16px;
      box-shadow: 0 16px 40px rgba(17, 24, 39, 0.08);
    }

    .about-images {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 24px;
    }

    .about-images img {
      width: 100%;
      height: 160px;
      object-fit: cover;
      border-radius: 12px;
    }

    /* ── Legislacion ── */
    .legis-section {
      background: var(--gray-900);
      color: var(--gray-200);
    }

    .legis-section h2 { color: var(--white); }

    .legis-section p { color: rgba(255,255,255,0.7); }

    .legis-split {
      display: grid;
      grid-template-columns: 0.4fr 0.6fr;
      gap: 48px;
      align-items: start;
    }

    .risk-card {
      margin: 24px 0;
      padding: 20px 24px;
      border-radius: 12px;
      background: rgba(126,181,81,0.1);
      border: 1px solid rgba(126,181,81,0.25);
    }

    .risk-card p {
      color: var(--green-light) !important;
      font-weight: 500;
    }

    /* ── Protocolos ── */
    .protocols-section {
      background: var(--green-subtle-gradient);
    }

    .protocols-header {
      text-align: center;
      max-width: 600px;
      margin: 0 auto 48px;
    }

    .protocols-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
    }

    .protocol-card {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 16px;
      padding: 28px 24px;
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      opacity: 0;
      transform: translateY(32px) scale(0.97);
      position: relative;
      overflow: hidden;
    }

    .protocol-card.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .protocol-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--green-gradient);
      opacity: 0;
      transition: opacity 0.3s;
    }

    .protocol-card:hover {
      border-color: var(--green);
      box-shadow: 0 12px 40px rgba(126,181,81,0.12);
      transform: translateY(-4px);
    }

    .protocol-card:hover::before {
      opacity: 1;
    }

    .protocol-card .card-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--green-light);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }

    .protocol-card .card-icon svg {
      width: 18px;
      height: 18px;
      color: var(--green);
    }

    .protocol-card h3 {
      font-size: 1.05rem;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .protocol-card p {
      font-size: 0.9rem;
      color: var(--gray-600);
      line-height: 1.65;
      text-align: justify;
      -webkit-hyphens: auto;
      hyphens: auto;
    }

    .protocol-card { grid-column: span 2; }
    .protocol-card.span-3 { grid-column: span 3; }
    .protocol-card.span-6 { grid-column: span 6; }

    /* ── Contact ── */
    .contact-section { background: var(--gray-50); }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: start;
    }

    .contact-form {
      background: var(--white);
      border: 1px solid var(--gray-200);
      border-radius: 16px;
      padding: 28px;
      display: grid;
      gap: 14px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    }

    .contact-form input,
    .contact-form textarea {
      width: 100%;
      padding: 13px 16px;
      border: 1px solid var(--gray-200);
      border-radius: 10px;
      font: inherit;
      font-size: 0.93rem;
      transition: border-color 0.2s;
    }

    .contact-form input:focus,
    .contact-form textarea:focus {
      outline: none;
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(126,181,81,0.12);
    }

    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
      color: var(--gray-400);
    }

    .contact-form .btn { width: 100%; justify-content: center; }

    /* ── Footer ── */
    .site-footer {
      padding: 28px 0;
      border-top: 1px solid var(--gray-200);
      text-align: center;
      font-size: 0.82rem;
      color: var(--gray-400);
    }

    /* ── Additions ── */
    .section p + p { margin-top: 16px; }
    .section strong { color: var(--gray-900); font-weight: 600; }
    .legis-section strong { color: var(--white); }

    /* ── Optical sizing of individual client logos ── */
    .logo-grid a[data-logo="tarifa-spin-out"] img { padding: 4px; }
    .logo-grid a[data-logo="clinica-dental-arual"] img { padding: 12px 2px; }
    .logo-grid a[data-logo="bmotion-audiovisual"] img { padding: 20px 24px; }

    /* ── Justified text (client preference) ── */
    .hero .lead,
    .about-split p,
    .legis-split p,
    .contact-grid > div > p,
    .protocol-card p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }

    /* ── Responsive ── */
    @media (max-width: 960px) {
      .hero-grid,
      .about-split,
      .legis-split,
      .contact-grid {
        grid-template-columns: 1fr;
      }

      .logo-grid { grid-template-columns: repeat(2, 1fr); }

      .protocols-grid {
        grid-template-columns: 1fr;
      }

      .protocol-card, .protocol-card.span-3, .protocol-card.span-6 { grid-column: auto; }

      .hero { padding: 48px 0; }
      .section { padding: 56px 0; }
      .float-card { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .protocol-card {
        opacity: 1;
        transform: none;
        transition: none;
      }
      .btn-primary:hover { transform: none; }
      .protocol-card:hover { transform: none; }
    }
  
/* BCCB prototypes — shared components.
   Relies on the CSS custom properties every variant defines:
   --green, --green-light, --green-dark, --white, --gray-200, --gray-400, --gray-600, --gray-800, --gray-900 */

/* ── Mobile navigation ─────────────────────────────────────────────── */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--white);
  color: var(--gray-900);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.site-header.nav-open .nav-toggle .icon-open { display: none; }
.site-header.nav-open .nav-toggle .icon-close { display: block; }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav-bar nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 5vw 20px;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
  }
  .site-header.nav-open .nav-bar nav { display: flex; }
  .nav-bar nav a { padding: 12px 0; font-size: 1rem; }
  .nav-bar nav a.btn { margin-top: 8px; justify-content: center; }
}

/* ── Primary button in the header: white text like every other primary button ── */
.nav-bar nav a.btn-primary,
.nav-bar nav a.btn-primary:hover { color: var(--white); }

/* ── Client logos (linked) ─────────────────────────────────────────── */
.logo-link {
  display: block;
  line-height: 0;
  border-radius: 12px;
}
.logo-link:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

/* ── Checklist in "Quiénes somos" ──────────────────────────────────── */
.list-intro { margin-top: 20px; }
.check-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  margin: 14px 0 20px;
  padding: 0;
}
.check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.4;
}
.check-list li::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44.992928 44.979431'><path transform='translate(-59.21678,-207.54474)' fill='%237cb64d' d='m 76.299495,235.22055 c -3.65894,-3.10878 -7.89241,-4.55443 -12.7,-4.16302 -1.23888,0.10086 -4.40494,0.33694 -4.3826,2.13229 0.0166,1.33142 1.59791,1.9823 2.62494,2.38492 3.17597,1.24499 5.95194,2.58809 8.45818,4.97071 2.12803,2.02304 3.80824,4.24198 5.45458,6.65579 0.60642,0.889 1.43492,2.24402 2.693,2.12125 2.874893,-0.28046 4.380584,-6.63314 5.387238,-8.81027 3.266932,-7.0654 7.524038,-13.74041 12.454109,-19.75556 1.585381,-1.93466 3.217691,-3.84637 5.059538,-5.54326 0.91369,-0.84152 2.37666,-1.74737 2.7753,-2.99069 0.54646,-1.70235 -1.65064,-1.9299 -2.77883,-1.78382 -2.93651,0.38029 -5.722753,1.86611 -8.112112,3.54426 -7.170357,5.03601 -13.311653,13.29803 -16.933343,21.2374 z'/></svg>") no-repeat center / contain;
}
.check-list a { color: inherit; text-decoration: none; }
.check-list a:hover { color: var(--green-dark); }
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green-dark);
  font-weight: 600;
  text-decoration: none;
}
.more-link:hover { text-decoration: underline; }
@media (max-width: 600px) { .check-list { grid-template-columns: 1fr; } }

/* ── Contact form ──────────────────────────────────────────────────── */
.contact-form label {
  display: grid;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gray-800);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-form label.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 500;
  color: var(--gray-600);
}
.contact-form label.check input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--green);
  flex: none;
}
.contact-form label.check a { color: var(--green-dark); }
.contact-form .form-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--green-dark);
}
.contact-email { color: var(--green-dark); font-weight: 600; text-decoration: none; }
.contact-email:hover { text-decoration: underline; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* ── Footer ────────────────────────────────────────────────────────── */
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  text-align: left;
}
.footer-inner p { margin: 0; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: var(--green-dark); }

@media (prefers-reduced-motion: reduce) {
  .protocol-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}
[id] { scroll-margin-top: 88px; }
.nav-bar > a:first-child { display: inline-flex; line-height: 0; }

/* ── Production additions ── */
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--white); color: var(--gray-900); padding: 8px 12px; border-radius: 8px; z-index: 1000; }
.skip-link:focus { left: 12px; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .form-note[data-state="error"] { color: #b42318; }
.contact-form .form-note[data-state="ok"] { color: var(--green-dark); }
.contact-form button[disabled] { opacity: 0.6; cursor: wait; }

/* ── Legal pages ── */
.legal { padding: 64px 0 96px; }
.legal .container { max-width: 800px; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; margin-bottom: 8px; }
.legal .updated { color: var(--gray-400); font-size: 0.85rem; margin-bottom: 32px; }
.legal h2 { font-size: 1.35rem; font-weight: 700; margin: 36px 0 12px; }
.legal h3 { font-size: 1.1rem; font-weight: 700; margin: 24px 0 8px; }
.legal p, .legal li { color: var(--gray-600); line-height: 1.8; }
.legal p, .legal li { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.legal li:has(a[href^="http"]) { text-align: left; }
.legal a { overflow-wrap: anywhere; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 8px 0 12px 22px; }
.legal a { color: var(--green-dark); }
.simple { padding: 96px 0; text-align: center; }
.simple h1 { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 800; margin-bottom: 12px; }
.simple p { color: var(--gray-600); max-width: 56ch; margin: 0 auto 24px; }