/* =====================================================================
   talento contento · Liquid Glass
   Capa de estilo tipo "Liquid Glass" de Apple con los colores del logo
   (naranja #F57F00 y azul marino #0B2F45). Se carga al final para
   sobrescribir estilos anteriores.
   ===================================================================== */

:root {
  /* Colores del logo como protagonistas (el verde pasa a tonos naranja) */
  --accent: #f57f00;
  --accent-hover: #ff8f1a;
  --navy: #0b2f45;
  --teal: #c96400;
  --teal-soft: rgba(245, 127, 0, .12);
  --cream: rgba(245, 127, 0, .10);
  --link: #c25e00;

  /* Vidrio */
  --glass: rgba(255, 255, 255, .55);
  --glass-strong: rgba(255, 255, 255, .72);
  --glass-border: rgba(255, 255, 255, .75);
  --glass-blur: blur(22px) saturate(170%);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.3), 0 14px 36px rgba(11,47,69,.10);
  --glass-dark: rgba(11, 47, 69, .88);
}

/* ---------- Fondo con manchas de color del logo ---------- */
body { background: #fbf6f0; position: relative; }
body::before {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 34% at 12% 8%,  rgba(245,127,0,.38), transparent 70%),
    radial-gradient(30% 30% at 92% 18%, rgba(255,179,92,.40), transparent 70%),
    radial-gradient(42% 40% at 85% 88%, rgba(11,47,69,.22),  transparent 70%),
    radial-gradient(34% 30% at 8% 80%,  rgba(255,156,51,.28), transparent 70%),
    radial-gradient(26% 24% at 50% 50%, rgba(107,122,143,.12), transparent 70%);
  filter: blur(20px);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.04); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* Las secciones claras dejan ver el fondo */
.alt, .home-hero, .page-hero, .svc-hero, .vac-hero, .list-wrap, .apply, .cta,
.jobs-wrap, .proc, .contact, section.block, .svc, .svc:nth-of-type(even), footer {
  background: transparent !important;
}

/* ---------- Superficies de vidrio ---------- */
.svc-card, .why-item, .promise, .profiles, .info-list li, .form-card, .ind,
.vac, .apply-card, .step, .job, .faq details, .svc-visual .pill, .chip-btn,
.search input, .filters select, .hh-card, .tile.light {
  background: var(--glass) !important;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
}
.profiles li { background: var(--glass-strong) !important; border: 1px solid var(--glass-border); box-shadow: inset 0 1px 0 #fff; }
.form-card, .apply-card { background: var(--glass-strong) !important; }
.svc-card:hover, .ind:hover, .vac:hover, .job:hover, .step:hover {
  background: var(--glass-strong) !important;
  box-shadow: inset 0 1px 0 #fff, 0 22px 48px rgba(11,47,69,.14);
}
.vac[open] { border-color: rgba(245,127,0,.55) !important; }
.faq details { border-radius: 18px; padding: 20px 22px; margin-bottom: 10px; }

/* Campos de formulario tipo vidrio */
.field input, .field select, .field textarea, .cta input {
  background: rgba(255,255,255,.7) !important; border: 1px solid rgba(11,47,69,.12) !important;
  box-shadow: inset 0 1px 2px rgba(11,47,69,.06);
}
.field input:focus, .field select:focus, .field textarea:focus, .cta input:focus, .search input:focus {
  border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(245,127,0,.2) !important;
}
.drop { background: rgba(255,255,255,.45); }

/* Vidrio oscuro (azul marino del logo) */
.hero-card, .svc-card.more, .tile.dark {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,179,92,.45), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(245,127,0,.55), transparent 55%),
    var(--glass-dark) !important;
  backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 40px 80px rgba(11,47,69,.28);
}
.mission, .why, .start, .feature-dark, .v-navy {
  background:
    radial-gradient(40% 60% at 95% 0%, rgba(245,127,0,.35), transparent 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(255,156,51,.22), transparent 70%),
    #0b2f45 !important;
}
.why-card, .start-card {
  background: rgba(255,255,255,.08) !important;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.mission .sec-label, .start-card .n, .stat strong { color: #ffa940 !important; }

/* ---------- Menú flotante tipo cápsula ---------- */
.nav {
  position: sticky; top: 12px; z-index: 100;
  width: calc(100% - 24px); max-width: 1180px; margin: 12px auto 0;
  border-radius: 999px; border: 1px solid var(--glass-border) !important;
  background: rgba(255,255,255,.6) !important;
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, 0 10px 30px rgba(11,47,69,.12);
}
.nav-inner { height: 58px; padding: 0 10px 0 18px; }
.nav-links a { padding: 7px 12px; border-radius: 999px; transition: background .2s, opacity .2s; }
.nav-links { gap: 4px !important; }
.nav-links a:hover, .nav-links a.active { background: rgba(245,127,0,.12); opacity: 1; color: var(--navy); }
.subnav {
  top: 82px !important; width: calc(100% - 24px); max-width: 980px; margin: 14px auto 0;
  border-radius: 22px; border: 1px solid var(--glass-border) !important; background: var(--glass) !important;
  box-shadow: var(--glass-shadow);
}
.subnav a.current, .subnav a:hover { background: rgba(245,127,0,.14) !important; }

@media (max-width: 734px) {
  .nav { top: 8px; margin-top: 8px; width: calc(100% - 16px); border-radius: 22px; }
  .nav-inner { height: 56px; }
  .nav.open .nav-links {
    top: 64px !important; left: 0 !important; right: 0 !important; border-radius: 22px;
    background: rgba(255,250,244,.96) !important; border: 1px solid var(--glass-border);
    backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 20px 40px rgba(11,47,69,.15);
  }
  .nav.open .nav-links a { border-radius: 14px; }
  .subnav { top: 72px !important; width: calc(100% - 16px); }
}

/* ---------- Botones "líquidos" ---------- */
.btn-primary, .nav-cta {
  background: linear-gradient(180deg, #ffa13d 0%, #f57f00 55%, #e87400 100%) !important;
  color: #fff !important; border: 1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(160,70,0,.25), 0 8px 22px rgba(245,127,0,.38);
  transition: transform .2s, box-shadow .2s, filter .2s;
}
.btn-primary:hover, .nav-cta:hover {
  transform: translateY(-1px); filter: brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 6px rgba(160,70,0,.25), 0 12px 28px rgba(245,127,0,.45);
}
.nav-cta { border-radius: 999px !important; }
.btn-ghost, .btn-secondary {
  background: rgba(255,255,255,.55) !important; color: var(--navy) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(11,47,69,.10);
}
.btn-ghost:hover, .btn-secondary:hover { background: rgba(255,255,255,.8) !important; }
.tile.dark .btn-secondary { color: #fff !important; background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.3) !important; }
.btn-navy {
  background: linear-gradient(180deg, #164a69, #0b2f45) !important; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px rgba(11,47,69,.35);
}
.chip-btn[aria-pressed="true"] { background: var(--navy) !important; color: #fff; border-color: var(--navy) !important; }

/* ---------- Acentos con los colores del logo ---------- */
.sec-label, .kicker, .eyebrow, .svc .kicker, .hh-text .kicker { color: var(--accent) !important; }
.badge { background: rgba(255,255,255,.6) !important; color: var(--navy) !important; border: 1px solid var(--glass-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 #fff; }
.badge::before { background: var(--accent) !important; box-shadow: 0 0 0 4px rgba(245,127,0,.18); }
.chip, .vac .meta .chip { background: rgba(245,127,0,.12) !important; color: #b85c00 !important; }
.svc-card .ic, .svc-card:nth-child(even) .ic { background: rgba(245,127,0,.12) !important; color: var(--accent) !important; box-shadow: inset 0 1px 0 #fff; }
.svc-card:nth-child(even) .ic { background: rgba(11,47,69,.08) !important; color: var(--navy) !important; }
.step2:nth-child(even) .dot { background: var(--navy) !important; }
.step2 .dot { box-shadow: 0 0 0 8px rgba(255,255,255,.6), inset 0 1px 0 rgba(255,255,255,.45) !important; }
.profiles li:nth-child(even)::before { background: var(--navy) !important; }
.home-hero h1 em, .page-hero h1 em { background: linear-gradient(90deg, #f57f00, #ff9c33); -webkit-background-clip: text; background-clip: text; color: transparent; }
.checks li::before { box-shadow: 0 4px 10px rgba(245,127,0,.35); }

/* Banda naranja con brillo de vidrio */
.band-inner {
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 30px 60px rgba(245,127,0,.30);
}
.band-inner::after {
  content: ""; position: absolute; inset: 0 0 55% 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.28), transparent);
}

/* Visuales de servicios en tonos del logo */
.v-teal  { background: radial-gradient(circle at 30% 20%, #ffe3c4, transparent 55%), linear-gradient(160deg, #ffc27a, #ff9c33) !important; }

/* Pie de página de vidrio */
footer { padding-top: 0; }
footer .foot-inner {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 28px;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow); padding: 36px 32px 22px; margin-bottom: 8px;
}
@media (max-width: 734px) { footer .foot-inner { padding: 28px 20px 18px; border-radius: 22px; } footer { padding: 0 10px 16px; } }

.hero-card .chips span {
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}

.search svg { z-index: 2; color: var(--accent) !important; }

/* Menú móvil: fondo sólido (un desenfoque dentro de otro no se dibuja bien) */
@media (max-width: 734px) {
  .nav.open { background: #fffaf4 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .nav.open .nav-links { background: #fffaf4 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}