/* ==========================================================================
   Workshop de IA — style.css (v5)
   Paleta ESTRICTA: navy #14273C · azul #3676C5 · celeste #73BDFA · blanco
   (los tonos de texto son variaciones tonales del navy, no colores nuevos)
   Tipografía: Sora (titulares) + Inter (texto)
   ========================================================================== */

:root{
  --navy: #14273C;
  --navy-2: #1C3452;
  --navy-3: #24405F;
  --blue: #3676C5;
  --blue-dark: #2A5EA0;
  --sky: #73BDFA;
  --sky-soft: #EAF3FD;
  --white: #FFFFFF;
  --bg: #F6F9FD;
  --bg-card: #FFFFFF;
  --ink: #14273C;
  --gray: #4B5C70;
  --gray-light: #7C8CA0;
  --border: #DCE6F2;
  --radius: 14px;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

html{ scroll-behavior:smooth; }

body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 1.06rem;
  line-height: 1.72;
}

h1,h2,h3,h4,.font-display{
  font-family: var(--display);
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1{ font-size: clamp(2.7rem, 5vw, 4.4rem); line-height:1.06; }
h2{ font-size: clamp(1.9rem, 3.2vw, 2.85rem); line-height:1.16; }
h3{ font-size: 1.5rem; }
h4{ font-size: 1.15rem; }

p{ color: var(--gray); max-width: 74ch; font-size:1.04rem; }
a{ color: var(--blue); text-decoration:none; }
a:hover{ color: var(--blue-dark); }

.text-navy{ color: var(--navy) !important; }
.text-mint{ color: var(--blue) !important; }
.text-indigo{ color: var(--blue) !important; }
.text-gold{ color: var(--blue) !important; }
.text-orange{ color: var(--blue) !important; }
.text-sky{ color: var(--sky) !important; }
.bg-navy{ background-color: var(--navy) !important; }
.bg-navy-light{ background-color: var(--navy-2) !important; }
.bg-cream{ background-color: var(--sky-soft) !important; }

/* ---------- Botones ---------- */
.btn{ border-radius: 10px; font-weight:600; padding:.78rem 1.65rem; letter-spacing:.005em; font-size:1.01rem; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn-gold{
  background: var(--sky);
  color: #0C2138; border:none; box-shadow: 0 10px 24px rgba(115,189,250,.35);
}
.btn-gold:hover{ background:#8ECBFB; color:#0C2138; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(115,189,250,.4); }
.btn-outline-cream{ border:1.5px solid rgba(255,255,255,.35); color:#F6F9FD; }
.btn-outline-cream:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:#fff; }
.btn-teal, .btn-orange{ background: var(--blue); color:#fff; border:none; }
.btn-teal:hover, .btn-orange:hover{ background: var(--blue-dark); color:#fff; transform: translateY(-2px); }
.btn-navy-outline{ border:1.5px solid var(--navy); color:var(--navy); }
.btn-navy-outline:hover{ background:var(--navy); color:#fff; }

/* ---------- Navbar ---------- */
.site-header{
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.navbar-brand{ overflow:hidden; max-width:100%; flex-shrink:1; min-width:0; }
.brand-mark{ height:52px; width:auto; display:block; flex-shrink:0; }
.brand-mark-footer{ height:44px; }
.brand-word{
  font-family: var(--display); font-weight:700; font-size:1.5rem; color:#fff; line-height:1.05;
  white-space:nowrap;
}
.brand-word em{ font-style:normal; color: var(--sky); }
.brand-word-footer{ font-size:1.25rem; }
.text-gradient-accent{
  background: linear-gradient(90deg, var(--sky), #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic;
}
.icon-stat{ display:flex; align-items:center; gap:.6rem; }
.icon-stat i{ font-size:1.3rem; color: var(--sky); }
.icon-stat span{ font-size:.92rem; color: rgba(246,249,253,.85); font-weight:500; }
.navbar{ flex-wrap:nowrap; }
.site-header .navbar{ flex-wrap: nowrap !important; }
.site-header .navbar > .container{
  display:flex !important;
  flex-wrap: nowrap !important;
  align-items:center !important;
  justify-content:space-between !important;
}
.site-header .navbar-toggler{ flex-shrink:0 !important; margin-left:auto; }

/* El menú desplegable en mobile puede ser muy largo (dos submenús largos):
   le damos scroll propio para garantizar que se llegue a todos los items,
   sin depender del scroll general de la página. */
@media (max-width: 991.98px){
  #mainNav.collapse.show,
  #mainNav.collapsing{
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Mientras el menú mobile está abierto, ocultamos los botones flotantes
     para que no tapen ni interfieran con el scroll de los últimos items. */
  body.nav-open .floating-actions{ display:none !important; }
}
@media (max-width: 575.98px){
  .brand-mark{ height:76px !important; }
  .brand-word{ font-size:1.7rem !important; }
  .navbar-brand{
    display:table !important;
    gap:.6rem !important;
    margin:0 auto !important;
    float:none !important;
  }
  .site-header .navbar > .container{
    display:block !important;
    text-align:center !important;
    padding-top:.7rem; padding-bottom:.7rem;
  }
  .navbar-toggler{
    display:table !important;
    margin:.6rem auto 0 !important;
    padding:.4rem .6rem;
    float:none !important;
  }
}
@media (max-width: 400px){
  .brand-word{ font-size:1.4rem !important; }
  .brand-mark{ height:64px !important; }
}
.site-header .nav-link{
  color: rgba(246,249,253,.85);
  font-weight:500;
  padding: .6rem .85rem !important;
  font-size:.95rem;
  white-space:nowrap;
}
.site-header .nav-link:hover,
.site-header .nav-link.active{ color: var(--sky); }
.dropdown-menu{
  border:none; border-radius:14px; box-shadow:0 20px 44px rgba(20,39,60,.22);
  padding:.55rem;
}
@media (max-width: 991.98px){
  .dropdown-menu{
    box-shadow:none;
    background: rgba(255,255,255,.04);
    width:100%;
    margin-top:.4rem;
  }
  .dropdown-menu .dropdown-item{ color: rgba(246,249,253,.85); }
  .dropdown-menu .dropdown-item:hover{ background: rgba(255,255,255,.08); color:#fff; }
  .dropdown-menu .dropdown-divider{ border-color: rgba(255,255,255,.12); }
}
.dropdown-item{ border-radius:9px; padding:.6rem .85rem; font-size:.96rem; }
.dropdown-item:hover{ background: var(--sky-soft); color: var(--blue-dark); }
.dropdown-item.active,.dropdown-item:active{ background:var(--navy); color:#fff; }

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(115,189,250,.18), transparent 60%),
    radial-gradient(700px 420px at 5% 100%, rgba(54,118,197,.2), transparent 60%),
    linear-gradient(160deg, var(--navy), #17304A 60%, var(--navy-2));
  color:#F6F9FD;
  position:relative;
  overflow:hidden;
  padding: 6.2rem 0 5rem;
}
.hero .eyebrow{ color: var(--sky); font-weight:700; font-size:1rem; letter-spacing:.01em; }
.hero p.lead{ color: rgba(246,249,253,.82); font-size:1.2rem; }
.hero-figure img{ border-radius: 18px; box-shadow: 0 32px 64px rgba(0,0,0,.4); }
.stat-strip{ border-top:1px solid rgba(255,255,255,.12); margin-top:3.2rem; padding-top:2.2rem; }
.stat-strip .stat-num{ font-family: var(--display); font-size:2.5rem; color:var(--sky); font-weight:700; }
.stat-strip .stat-label{ color:rgba(246,249,253,.7); font-size:.9rem; }

@keyframes heroRise{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:none; } }
.hero h1, .hero .lead, .hero .eyebrow, .hero .btn, .hero-figure{ animation: heroRise .7s ease both; }
.hero .lead{ animation-delay:.08s; }
.hero .btn{ animation-delay:.16s; }
.hero-figure, .bento-grid{ animation: heroRise .8s ease .1s both; }
@media (prefers-reduced-motion: reduce){
  .hero h1, .hero .lead, .hero .eyebrow, .hero .btn, .hero-figure, .bento-grid{ animation:none; }
}

/* ---------- Secciones ---------- */
.section{ padding: 5.2rem 0; }
.section-sm{ padding: 3.2rem 0; }
.section-title-wrap{ max-width: 780px; margin: 0 auto 3.2rem; text-align:center; }
.kicker{ color: var(--blue); font-weight:700; font-size:.9rem; letter-spacing:.03em; text-transform:uppercase; }

/* ---------- Cards ---------- */
.card{ border:1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: 0 2px 10px rgba(20,39,60,.05); }
.workshop-card{ transition: transform .22s ease, box-shadow .22s ease; height:100%; overflow:hidden; }
.workshop-card:hover{ transform: translateY(-7px); box-shadow: 0 26px 48px rgba(20,39,60,.16); }
.workshop-card .card-icon{
  width:56px; height:56px; border-radius:13px;
  background: linear-gradient(135deg, var(--blue), var(--navy));
  display:flex; align-items:center; justify-content:center;
  color: var(--sky); font-size:1.5rem;
}
.workshop-card .card-title{ font-family:var(--display); color:var(--navy); font-weight:700; }

.value-card{ padding:1.9rem; height:100%; }
.value-card .num{ font-family: var(--display); color: var(--blue); font-size:1.2rem; font-weight:700; }

/* ---------- Cards con imagen (foto arriba, texto abajo) ---------- */
.img-card{
  position: relative;
  border-radius: var(--radius); overflow:hidden; background: var(--bg-card);
  border:1px solid var(--border); height:100%;
  box-shadow: 0 4px 16px rgba(20,39,60,.07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.img-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 46px rgba(20,39,60,.16); }
.img-card .img-card-photo{ position:relative; height:190px; overflow:hidden; background:var(--sky-soft); }
.img-card .img-card-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.img-card:hover .img-card-photo img{ transform: scale(1.06); }
.img-card .img-card-body{ padding:1.5rem; }
.img-card .img-card-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  background: rgba(20,39,60,.78); backdrop-filter: blur(4px);
  color:#F6F9FD; font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:50px;
}

/* Fila de imágenes alineadas: misma altura y recorte consistente */
.align-photo-row{ display:flex; gap:.85rem; }
.align-photo-row .align-photo{ flex:1; border-radius:16px; overflow:hidden; height:230px; box-shadow: 0 10px 28px rgba(20,39,60,.14); }
.align-photo-row .align-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.align-photo-full{ border-radius:16px; overflow:hidden; height:230px; margin-top:.85rem; box-shadow: 0 10px 28px rgba(20,39,60,.14); }
.align-photo-full img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Bento grid (galería hero / mosaico) ---------- */
.bento-grid{ display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 90px; gap:.85rem; grid-auto-flow: dense; }
.bento-item{ border-radius:16px; overflow:hidden; position:relative; box-shadow: 0 10px 30px rgba(20,39,60,.2); background: var(--navy-2); }
.bento-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.bento-item.b1{ grid-column: span 4; grid-row: span 3; }
.bento-item.b2{ grid-column: span 2; grid-row: span 2; }
.bento-item.b3{ grid-column: span 2; grid-row: span 2; }
.bento-item.b4{ grid-column: span 2; grid-row: span 1; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--blue), var(--navy)); color:#fff; text-align:center; padding:.5rem; }
@media (max-width: 767.98px){
  .bento-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows:110px; }
  .bento-item.b1{ grid-column: span 2; grid-row: span 3; }
  .bento-item.b2,.bento-item.b3{ grid-column: span 1; grid-row: span 2; }
  .bento-item.b4{ grid-column: span 2; grid-row: span 1; }
  .align-photo-row{ flex-direction:column; }
}

/* ---------- Metodología / pasos ---------- */
.method-step{ position:relative; padding-left: 2.9rem; }
.method-step::before{
  content: counter(step); counter-increment: step;
  position:absolute; left:0; top:0;
  width:2.25rem; height:2.25rem; border-radius:50%;
  background: linear-gradient(135deg, var(--blue), var(--navy)); color: var(--sky);
  font-family: var(--display); font-weight:700; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
}
.method-steps{ counter-reset: step; }

/* ---------- CTA banda ---------- */
.cta-band{
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
  color:#F6F9FD; border-radius: 22px; position:relative; overflow:hidden;
}
.cta-band::after{ content:""; position:absolute; inset:0; background: radial-gradient(500px 260px at 85% 0%, rgba(115,189,250,.2), transparent 65%); }
.cta-band > *{ position:relative; z-index:1; }

/* ---------- FAQ ---------- */
.accordion-button{ font-family: var(--display); font-weight:600; color: var(--navy); background: var(--bg-card); font-size:1.01rem; }
.accordion-button:not(.collapsed){ background: var(--sky-soft); color: var(--navy); box-shadow:none; }
.accordion-button:focus{ box-shadow: 0 0 0 .2rem rgba(54,118,197,.22); }
.accordion-item{ border-color: var(--border); border-radius: 12px !important; overflow:hidden; margin-bottom:.7rem; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy); color: rgba(246,249,253,.75); }
.site-footer a{ color: rgba(246,249,253,.75); }
.site-footer a:hover{ color: var(--sky); }
.site-footer h6{ color:#fff; font-family: var(--display); font-weight:700; letter-spacing:.01em; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); font-size:.86rem; }

/* ---------- Botones flotantes ---------- */
.floating-actions{ position: fixed; right: 20px; bottom: 20px; z-index: 1050; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.fab{ display:flex; align-items:center; gap:.6rem; padding:.75rem 1.1rem; border-radius:50px; font-weight:600; font-size:.94rem; color:#fff; box-shadow: 0 10px 26px rgba(0,0,0,.25); transition: transform .15s ease; }
.fab:hover{ transform: translateY(-2px); color:#fff; }
.fab-whatsapp{ background:#25D366; }
.fab-calendly{ background: var(--sky); color:#0C2138; }
.fab-whatsapp:hover{ color:#fff; }
.fab-calendly:hover{ color:#0C2138; }
.fab svg{ width:20px; height:20px; flex-shrink:0; }
@media (max-width: 575.98px){
  .fab span{ display:none !important; }
  .fab{
    padding:0 !important;
    border-radius:50% !important;
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    max-width:52px !important;
    justify-content:center !important;
    align-items:center !important;
    flex-shrink:0 !important;
    gap:0 !important;
  }
  .fab i{ font-size:1.25rem; line-height:1; margin:0; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar{ background: var(--sky-soft); border-bottom:1px solid var(--border); }
.breadcrumb{ margin-bottom:0; font-size:.9rem; }

/* ---------- Utilidades ---------- */
.badge-soft{ background: rgba(115,189,250,.18); color:#1A578F; font-weight:700; font-size:.78rem; padding:.45rem .85rem; border-radius:50px; border:1px solid rgba(115,189,250,.45); }
.hero .badge-soft{ background: rgba(255,255,255,.12); color:#EAF3FD; border-color: rgba(115,189,250,.6); }
.img-cover{ object-fit:cover; width:100%; height:100%; }
.rounded-xl{ border-radius: 18px; }
.divider-mint{ width:64px; height:4px; background: var(--sky); border-radius:4px; }

/* ==========================================================================
   COMPONENTES INTERACTIVOS
   ========================================================================== */

/* ---------- Herramientas / chips ---------- */
.tools-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:1rem; }
.tool-chip{
  background: var(--bg-card); border:1px solid var(--border); border-radius:16px;
  padding:1.5rem 1rem; text-align:center; position:relative; overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  cursor:default;
}
.tool-chip::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .25s ease; background: radial-gradient(120px 80px at 50% 0%, rgba(115,189,250,.25), transparent 70%); }
.tool-chip:hover{ transform: translateY(-8px) scale(1.03); box-shadow: 0 20px 40px rgba(20,39,60,.18); border-color: var(--sky); }
.tool-chip:hover::before{ opacity:1; }
.tool-mark{
  width:54px; height:54px; border-radius:27% !important; margin:0 auto .8rem;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--display); font-weight:700; font-size:1.5rem !important; color:#fff;
  transition: transform .25s ease; box-shadow: 0 8px 18px rgba(20,39,60,.2);
}
.tool-chip:hover .tool-mark{ transform: rotate(-6deg) scale(1.08); }
.tool-chip .tool-name{ font-weight:600; font-size:.92rem; color:var(--navy); display:block; }
.tool-chip .tool-desc{ font-size:.78rem; color:var(--gray); display:block; margin-top:.15rem; }

.mark-chatgpt{ background: linear-gradient(135deg,#10A37F,#0D8A6C); }
.mark-claude{ background: linear-gradient(135deg,#D97757,#B85C3F); }
.mark-gemini{ background: linear-gradient(135deg,#4285F4,#9B72CB,#EA4335); }
.mark-copilot{ background: linear-gradient(135deg,#0F6CBD,#14273C); }
.mark-python{ background: linear-gradient(135deg,#3776AB,#3676C5); }
.mark-agents{ background: linear-gradient(135deg, var(--sky), var(--blue)); }
.mark-automation{ background: linear-gradient(135deg, var(--blue), var(--navy)); }

/* ---------- Contadores animados ---------- */
.counter-num{ font-variant-numeric: tabular-nums; }

/* ---------- Tabs interactivos ---------- */
.area-tabs .nav-pills .nav-link{ border-radius: 50px; font-weight:600; color: var(--navy); padding:.6rem 1.3rem; margin:0 .3rem .6rem 0; border:1.5px solid var(--border); transition: all .2s ease; }
.area-tabs .nav-pills .nav-link.active{ background: linear-gradient(135deg, var(--blue), var(--navy)); color:#fff; border-color: transparent; }
.area-tabs .nav-pills .nav-link:not(.active):hover{ border-color: var(--sky); color: var(--blue-dark); }
.area-pane{ background: var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:2rem; }

/* ---------- Diagrama animado (SVG flujo) ---------- */
.flow-diagram .flow-line{ stroke-dasharray: 6 6; animation: dashmove 18s linear infinite; }
@keyframes dashmove{ to{ stroke-dashoffset: -240; } }
.flow-diagram .flow-node{ transition: transform .2s ease; }
.flow-diagram .flow-node:hover{ transform: scale(1.06); }
@media (prefers-reduced-motion: reduce){ .flow-diagram .flow-line{ animation: none; } }

/* ---------- Barras de progreso animadas ---------- */
.progress-bar-anim{ height:10px; border-radius:50px; background: var(--border); overflow:hidden; }
.progress-bar-anim > span{ display:block; height:100%; border-radius:50px; background: linear-gradient(90deg, var(--sky), var(--blue)); width:0; transition: width 1.4s cubic-bezier(.2,.8,.2,1); }

/* ---------- Flip cards ---------- */
.flip-card{ perspective: 1200px; height: 220px; }
.flip-card-inner{ position:relative; width:100%; height:100%; transition: transform .6s; transform-style: preserve-3d; }
.flip-card:hover .flip-card-inner{ transform: rotateY(180deg); }
.flip-card-front, .flip-card-back{ position:absolute; inset:0; backface-visibility:hidden; border-radius:16px; padding:1.5rem; display:flex; flex-direction:column; justify-content:center; }
.flip-card-front{ background: var(--bg-card); border:1px solid var(--border); }
.flip-card-back{
  background: linear-gradient(135deg, var(--blue-dark), var(--navy));
  color:#FFFFFF; transform: rotateY(180deg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.flip-card-back p{ color:#FFFFFF; }

/* ---------- Logo strip / pills ---------- */
.logo-strip{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; justify-content:center; }
.logo-strip .pill{ background: var(--bg-card); border:1px solid var(--border); border-radius:50px; padding:.5rem 1.1rem; font-size:.85rem; font-weight:600; color:var(--navy); display:flex; align-items:center; gap:.4rem; }

/* ---------- Quote cards ---------- */
.quote-card{ background: var(--bg-card); border:1px solid var(--border); border-radius:18px; padding:2rem; position:relative; height:100%; }
.quote-card .quote-mark{ font-family:var(--display); font-size:3rem; color: var(--sky); line-height:1; opacity:.9; }

/* ---------- Overlay de imagen con degradado ---------- */
.photo-overlay{ position:relative; border-radius: var(--radius); overflow:hidden; }
.photo-overlay img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-overlay .overlay-grad{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,39,60,0) 30%, rgba(20,39,60,.9) 100%); }
.photo-overlay .overlay-content{ position:absolute; left:0; right:0; bottom:0; padding:1.5rem; color:#fff; }

/* ---------- Agentes / automatización: nodo de flujo interactivo ---------- */
.agent-flow{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
.agent-node{
  background:var(--bg-card); border:1.5px solid var(--border); border-radius:14px;
  padding:1rem 1.2rem; text-align:center; flex:1; min-width:130px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.agent-node:hover{ border-color: var(--sky); transform: translateY(-4px); box-shadow:0 14px 28px rgba(20,39,60,.12); }
.agent-node i{ font-size:1.4rem; color:var(--blue); }
.agent-node span{ display:block; font-size:.82rem; font-weight:600; color:var(--navy); margin-top:.4rem; }
.agent-arrow{ color: var(--sky); font-size:1.4rem; flex-shrink:0; }
@media (max-width:767.98px){ .agent-arrow{ transform:rotate(90deg); } }