/* Página de servicios de tecnología (tecnologia.html).
   Usa los tokens de la web y se apoya en godi-servicios.css (.svc, .svc-head, .svc-band, .btn-ghost). */

/* --- Portada --- */
.tech-pill{
  display:inline-flex; align-items:center; gap:8px; margin-top:6px; padding:7px 14px; border-radius:999px;
  font-family:var(--f-display); font-weight:700; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.32);
}
.tech-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--orange); }
.tech-hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 16px; margin-top:26px; }

/* --- Antes / con Godi --- */
.tech-ba{ background:var(--paper-dim); }
.ba-list{ display:grid; gap:14px; }
.ba-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; position:relative; }
.ba-row::after{
  content:"\2192"; content:"\2192" / ""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; background:var(--orange); color:var(--negro);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px; z-index:1;
  box-shadow:0 6px 14px -6px rgba(32,30,29,0.45);
}
.ba-cell{ border-radius:18px; padding:18px 24px 18px 22px; font-size:15px; line-height:1.5; display:grid; gap:6px; align-content:center; }
.ba-cell b{ font-family:var(--f-display); font-weight:700; font-size:11px; letter-spacing:0.09em; text-transform:uppercase; }
.ba-before{ background:#fff; border:1.5px dashed #bcc3d3; color:#4a5060; }
.ba-before b{ color:#8a5a00; }
.ba-after{ background:var(--ink); color:#fff; }
.ba-after b{ color:var(--orange); }
@media (max-width:760px){
  .ba-row{ grid-template-columns:1fr; gap:22px; }
  .ba-row::after{ content:"\2193"; content:"\2193" / ""; }
}

/* --- Cómo funciona --- */
.tech-steps-sec{ background:var(--negro); color:#fff; position:relative; overflow:hidden; }
.tech-steps-sec::before{ content:""; position:absolute; width:420px; height:380px; left:-190px; bottom:-200px; background:var(--ink); border-radius:var(--blob-b); opacity:0.8; }
.tech-steps-sec .wrap{ position:relative; z-index:1; }
.tech-steps-sec .svc-head h2{ color:#fff; }
.tech-steps-sec .svc-head h2 em{ background:none; color:var(--orange); padding:0; }
.tech-steps-sec .svc-head p{ color:#c9ccd3; }
.tech-steps-sec .eyebrow{ background:var(--orange); color:var(--negro); }
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.step{ background:var(--negro-2, #2a2826); border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:24px 22px; }
.step-n{
  width:40px; height:40px; border-radius:50%; background:var(--orange); color:var(--negro);
  font-family:var(--f-display); font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.step h3{ font-family:var(--f-display); font-weight:700; font-size:17px; line-height:1.3; margin:0 0 6px; color:#fff; }
.step p{ margin:0; font-size:14px; line-height:1.55; color:#c9ccd3; }
@media (max-width:960px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* --- Capacidades --- */
.tech-caps{ background:#fff; }
.caps{ display:grid; gap:26px; }
.cap{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
  padding:34px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:38px; align-items:center;
}
.cap > *{ min-width:0; }
.cap-tag{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; margin-bottom:12px;
  font-family:var(--f-display); font-weight:700; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
}
.cap-tag.ok{ background:#E3F4EA; color:#1F6B44; }
.cap-tag.soon{ background:#fff0c2; color:#7a4f00; }
.cap-tag.launch{ background:#E6ECFB; color:#2C4A9E; }
.cap h3{ font-family:var(--f-display); font-weight:800; font-size:clamp(22px, 2.4vw, 28px); line-height:1.2; letter-spacing:-0.015em; margin:0 0 8px; color:var(--negro); }
.cap-lede{ font-size:15.5px; line-height:1.55; color:var(--stone); margin:0 0 18px; }
.cap-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.cap-list li{
  position:relative; padding-left:30px; font-size:14.5px; line-height:1.5; color:var(--negro);
}
.cap-list li::before{
  content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201E1D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.cap-list li strong{ font-weight:700; }
.cap-list.two{ grid-template-columns:1fr 1fr; gap:10px 28px; }

.cap.soon{ border:2px dashed #e2b23a; background:#FFFBEF; box-shadow:none; grid-template-columns:1fr; gap:18px; }
.cap.soon .cap-list li::before{ background-color:#fff; border:2px solid #e2b23a; }

.cap-cards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.cap-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:26px 24px; display:grid; gap:4px; align-content:start; }
.cap-card .icon-badge{ margin-bottom:10px; }
.cap-card h3{ font-family:var(--f-display); font-weight:800; font-size:19px; line-height:1.25; margin:0 0 4px; color:var(--negro); }
.cap-card .cap-tag{ justify-self:start; margin-bottom:8px; }
.cap-card .cap-list{ margin-top:10px; }
.cap-card .cap-list li{ font-size:14px; }

@media (max-width:960px){
  .cap{ grid-template-columns:1fr; gap:26px; padding:28px 24px; }
  .cap-media{ order:-1; }
  .cap-cards{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .cap{ padding:24px 18px; }
  .cap-list.two{ grid-template-columns:1fr; }
}

/* Teléfono con la demostración del asistente */
.cap-media{ display:flex; flex-direction:column; align-items:center; }
.tech-phone{ width:min(250px, 70vw); aspect-ratio:720/1560; border-radius:30px; padding:8px; background:var(--ink-deep); box-shadow:0 30px 60px -24px rgba(32,30,29,0.55); }
.tech-phone video{ width:100%; height:100%; object-fit:cover; display:block; border-radius:23px; background:#000; }
.tech-phone video:fullscreen{ object-fit:contain; border-radius:0; }
.tech-phone video:-webkit-full-screen{ object-fit:contain; border-radius:0; }
.tech-video-switch{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:16px; padding:5px; background:var(--paper-dim); border-radius:999px; }
.tech-video-switch button{
  font-family:var(--f-body); font-weight:600; font-size:12px; color:var(--stone); background:transparent; border:none;
  padding:8px 14px; border-radius:999px; cursor:pointer; transition:background .2s ease, color .2s ease;
}
.tech-video-switch button.is-active{ background:var(--ink); color:#fff; }
.tech-demo-note{ font-size:12px; color:var(--stone); margin:10px 0 0; text-align:center; }

/* Maqueta del tablero del CRM (datos de ejemplo) */
.kb-frame{ width:100%; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:var(--paper-dim); box-shadow:var(--shadow-card); }
.kb-bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; background:#fff; border-bottom:1px solid var(--line); }
.kb-bar i{ width:9px; height:9px; border-radius:50%; background:#d6dae4; }
.kb-bar em{ margin-left:8px; font-style:normal; font-family:var(--f-display); font-weight:600; font-size:12px; color:var(--stone); }
.kb{ display:grid; grid-template-columns:repeat(3, minmax(104px, 1fr)); gap:10px; padding:12px; overflow-x:auto; }
.kb-col{ display:grid; gap:8px; align-content:start; }
.kb-col h4{ margin:0 0 2px; font-family:var(--f-display); font-weight:700; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink); }
.kb-card{ background:#fff; border-radius:12px; padding:10px 11px; box-shadow:0 6px 14px -10px rgba(32,30,29,0.45); display:grid; gap:6px; }
.kb-card b{ font-family:var(--f-display); font-weight:700; font-size:12px; color:var(--negro); }
.kb-card span{ justify-self:start; font-size:10.5px; font-weight:600; color:var(--ink); background:var(--azul-cielo, #DDE7FF); padding:2px 8px; border-radius:999px; }
.kb-card.won{ border-left:4px solid var(--orange); }
.kb-note{ margin:12px 0 0; font-size:12px; color:var(--stone); text-align:center; }

/* --- Para quién --- */
.tech-who{ background:var(--paper-dim); }
.who-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.who-item{ background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:24px 22px; }
.who-item h3{ font-family:var(--f-display); font-weight:700; font-size:17px; line-height:1.3; margin:0 0 6px; color:var(--negro); }
.who-item p{ margin:0; font-size:14px; line-height:1.55; color:var(--stone); }
@media (max-width:760px){ .who-grid{ grid-template-columns:1fr; } }

/* Captura ampliable (protección de datos) */
.shot-btn{ position:relative; display:block; width:100%; padding:0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#14213f; box-shadow:var(--shadow-card); }
.shot-btn img{ display:block; width:100%; height:auto; }
.shot-btn .showcase-hint{ position:absolute; right:12px; bottom:12px; width:40px; height:40px; border-radius:50%; background:rgba(32,30,29,0.72); display:flex; align-items:center; justify-content:center; }
.shot-btn .showcase-hint svg{ width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; }
.cap.rev{ grid-template-columns:0.95fr 1.05fr; }
.cap.rev .cap-media{ order:-1; }
@media (max-width:960px){ .cap.rev{ grid-template-columns:1fr; } }

/* --- Páginas web --- */
.tech-hero-link{ color:#fff; font-family:var(--f-display); font-weight:600; font-size:14.5px; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--orange); }
.tech-hero-link:hover{ color:var(--orange); }
.tech-web{ background:#fff; }
.web-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.web-card{ background:var(--paper-dim); border-radius:var(--radius-md); padding:24px 22px; display:grid; gap:4px; align-content:start; }
.web-card .icon-badge{ margin-bottom:10px; }
.web-card h3{ font-family:var(--f-display); font-weight:700; font-size:17px; line-height:1.3; margin:0 0 4px; color:var(--negro); }
.web-card p{ margin:0; font-size:14px; line-height:1.55; color:var(--stone); }
.web-legal{ margin:16px 0 0; font-size:12.5px; line-height:1.5; color:var(--stone); max-width:80ch; }
.web-process{ margin-top:44px; background:var(--negro); border-radius:28px; padding:36px; position:relative; overflow:hidden; }
.web-process::before{ content:""; position:absolute; width:300px; height:270px; right:-120px; top:-140px; background:var(--ink); border-radius:var(--blob-a); opacity:0.85; }
.web-process > *{ position:relative; }
.web-process h3{ font-family:var(--f-display); font-weight:800; font-size:clamp(21px, 2.3vw, 26px); color:#fff; margin:0 0 20px; }
.web-process .step h4{ font-family:var(--f-display); font-weight:700; font-size:16px; line-height:1.3; margin:0 0 6px; color:#fff; }
.web-link{ margin-top:22px; display:flex; gap:18px; align-items:center; background:var(--azul-cielo, #DDE7FF); border-radius:var(--radius-md); padding:22px 26px; }
.web-link-ico{ flex:none; width:46px; height:46px; border-radius:16px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; }
.web-link h3{ font-family:var(--f-display); font-weight:700; font-size:17px; margin:0 0 3px; color:var(--negro); }
.web-link p{ margin:0; font-size:14.5px; line-height:1.55; color:#2b2f3a; }
.web-cta{ margin-top:30px; display:flex; justify-content:center; }
@media (max-width:960px){ .web-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){
  .web-grid{ grid-template-columns:1fr; }
  .web-process{ padding:26px 18px; border-radius:22px; }
  .web-link{ flex-direction:column; align-items:flex-start; padding:20px; }
}

.qhero h1{ max-width:24ch; }