/* ===== Intercyd – site.css ===== */
/* Tipografía (opcional; puedes quitar si prefieres solo system fonts) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");

/* --- Tokens de marca (derivados del logo actual) --- */
:root{
  /* Paleta aproximada detectada del logo */
  --brand-navy:#244274;      /* también aparece #213376 */
  --brand-teal:#0D636F;
  --brand-aqua:#63BEB1;
  --brand-lime:#79CE70;
  --brand-gray:#434444;

  /* UI */
  --color-text:#111827;
  --color-muted:#6B7280;
  --color-bg:#FFFFFF;
  --color-surface:#F6F8FB;

  /* Overrides Bootstrap 5 */
  --bs-primary: var(--brand-navy);
  --bs-primary-rgb: 36,66,116;

  /* Misc */
  --radius:14px;
  --shadow:0 10px 30px rgba(16,24,40,.08);
}

html{ scroll-behavior:smooth; }
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
}

/* Navbar */
.navbar{ backdrop-filter:saturate(120%) blur(6px); }

/* Buttons */
.btn-primary{
  background:var(--brand-navy);
  border-color:var(--brand-navy);
  border-radius:var(--radius);
}
.btn-primary:hover{
  background:#1c345d; border-color:#1c345d;
}
.btn-outline-primary{ border-radius:var(--radius); }

/* Cards */
.card{
  border:1px solid #E5E7EB;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Sections */
.section-pad{ padding:64px 0; }

/* Hero */
.hero{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(36,66,116,.15), transparent 60%),
    radial-gradient(1000px 500px at -10% 10%, rgba(121,206,112,.18), transparent 60%),
    linear-gradient(180deg, #fff 0%, #F8FAFF 100%);
}
.hero .lead{ color:#374151; }

/* Chips e iconografía */
.chip{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#EEF2FF; color:#1E3A8A; padding:.35rem .6rem; border-radius:999px;
  font-weight:600; font-size:.9rem;
}
.icon-xxl{ font-size:2rem; color:var(--brand-navy); }

/* Logo wall */
.logo-wall .logo{
  height:40px; width:140px; border:1px dashed #D1D5DB; border-radius:10px;
  display:flex; align-items:center; justify-content:center; color:#6B7280; font-weight:600;
  background:white;
}

/* Métricas */
.metrics{ background: var(--color-surface); }

/* Back-to-top */
#toTop{
  position:fixed; right:16px; bottom:16px; z-index:1030; display:none;
  border-radius:999px; box-shadow:var(--shadow);
}

/* Footer */
footer{ background:#0B1220; color:#E5E7EB; }
footer a{ color:#C7D2FE; text-decoration:none; }
footer a:hover{ color:#fff; text-decoration:underline; }

/* Anclas con navbar fija */
:target::before { content:""; display:block; height:72px; margin-top:-72px; visibility:hidden; }

/* Accesibilidad */
.visually-hidden-focusable:active,
.visually-hidden-focusable:focus {
  clip:auto; width:auto; height:auto; margin:0; overflow:visible; position:static;
}

/* === Acentos y gradientes para dar más vida === */
:root{
  --brand-aqua:#63BEB1;
  --brand-lime:#79CE70;
  --brand-navy:#244274;
  --brand-teal:#0D636F;
}

/* Barra inferior del navbar con gradiente sutil */
.navbar{ border-bottom:4px solid transparent; border-image: linear-gradient(90deg, var(--brand-aqua), var(--brand-lime)) 1; }

/* Fondos de sección */
.bg-accent-soft{
  background: linear-gradient(180deg, #F8FAFF 0%, #F0FBF5 100%);
}
.bg-brand-gradient{
  background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-navy) 70%);
  color:#fff;
}

/* Texto y subrayados con gradiente */
.text-gradient{
  background: linear-gradient(135deg, var(--brand-aqua), var(--brand-lime));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.underline-gradient::after{
  content:""; display:block; width:64px; height:4px; margin-top:8px; border-radius:2px;
  background: linear-gradient(90deg, var(--brand-aqua), var(--brand-lime));
}

/* Chips y badges */
.chip--accent{ background: rgba(121,206,112,.12); color: var(--brand-teal); }
.badge-tech{
  display:inline-block; padding:.25rem .6rem; border-radius:999px; font-weight:600;
  background: rgba(13,99,111,.10); color: var(--brand-teal); border:1px solid rgba(13,99,111,.25);
}

/* Iconos con variedad cromática */
.icon-aqua{ color: var(--brand-aqua); }
.icon-lime{ color: var(--brand-lime); }
.icon-teal{ color: var(--brand-teal); }

/* Cards con borde de acento (aplícalo a elementos destacados) */
.card-accent{
  border-color: rgba(13,99,111,.25);
  box-shadow: 0 10px 30px rgba(99,190,177,.15);
}

/* === Sticky footer (no fija en viewport, sólo “pega” al final) === */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer { flex-shrink: 0; margin-top: auto; }

/* === Imagen en hero + duotono / overlays === */
.hero-photo { position: relative; border-radius: var(--radius); overflow: hidden; }
.hero-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(13,99,111,.50), rgba(36,66,116,.50));
  mix-blend-mode:multiply; /* aporta duotono */
}

.hero-banner{ position:relative; color:#fff; }
.hero-banner.has-image{
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
.hero-banner.has-image::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(13,99,111,.70), rgba(36,66,116,.85));
}
.hero-banner .container{ position:relative; z-index:1; }

/* Imágenes en cards de casos */
.case-card .thumb { border-radius: var(--radius) var(--radius) 0 0; overflow:hidden; }
.case-card .thumb img { width:100%; height:220px; object-fit:cover; display:block; }

/* Figcaption / crédito opcional */
.fig-credit{
  position:absolute; right:8px; bottom:8px; background: rgba(0,0,0,.45);
  color:#fff; font-size:.75rem; padding:.2rem .4rem; border-radius:6px;
}

/* Utilidad para fondos con imagen CSS variable */
.bg-hero{
  background-image: var(--hero-image, none);
}

/* === Timeline sencilla (Sobre) === */
.timeline{ position:relative; }
.timeline::before{
  content:""; position:absolute; left:18px; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, var(--brand-aqua), var(--brand-lime));
  border-radius:2px; opacity:.6;
}
.timeline-item{ position:relative; padding-left:64px; margin-bottom:1.75rem; }
.timeline-item .dot{
  position:absolute; left:10px; top:.3rem; width:20px; height:20px; border-radius:50%;
  background: #fff; border:4px solid var(--brand-teal); box-shadow:0 0 0 3px rgba(13,99,111,.12);
}
.timeline-item .year{ font-weight:700; color: var(--brand-teal); }
.timeline-item .card{ border-color: rgba(13,99,111,.2); }

/* Language switcher */
.nav-lang .nav-link {
  font-weight: 600;
  letter-spacing: .08em;
  font-size: .85rem;
  color: #244274;
  padding-left: .75rem;
  padding-right: .75rem;
}

.nav-lang .nav-link:hover {
  text-decoration: underline;
}

/* Vertical separator */
.nav-separator {
  display: inline-block;
  width: 2px;
  height: 20px;
  background-color: rgba(0,0,0,.15);
}

/* Mobile: keep it simple */
@media (max-width: 991.98px) {
  .nav-separator {
    display: none;
  }
  .nav-lang .nav-link {
    padding-left: .5rem;
    padding-right: .5rem;
  }
}