/* Fuente Poppins autoalojada (SIL Open Font License, ver /assets/fonts/OFL.txt) */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/poppins-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/poppins-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/poppins-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/poppins-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =========================================================
   ArQlik — estilos
   ========================================================= */
:root {
  --navy: #023E8A;
  --navy-dark: #012a5e;
  --navy-soft: #e8eef8;
  --orange: #F29F25;
  --orange-dark: #d9850c;
  --text: #343434;
  --muted: #6b7280;
  --line: #e5e7eb;
  --bg: #ffffff;
  --bg-alt: #f6f8fb;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(2, 62, 138, .08);
  --header-h: 72px;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.6; font-size: 1rem; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { color: var(--navy); line-height: 1.2; margin: 0 0 .6em; font-weight: 600; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--navy); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 200; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 600; color: var(--orange-dark); margin-bottom: .6em; }
.eyebrow--light { color: var(--orange); }
.accent { color: var(--orange); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 600 .9rem/1 var(--font); padding: .85em 1.4em; border-radius: 10px;
  border: 2px solid transparent; text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--lg { padding: 1em 1.7em; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-dark); box-shadow: 0 6px 18px rgba(2,62,138,.25); }
.btn--accent { background: var(--orange); color: #1f1f1f; }
.btn--accent:hover { background: var(--orange-dark); }
.btn--outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--ghost { color: var(--navy); background: var(--navy-soft); }
.btn--ghost:hover { background: #d6e1f3; }
.btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }

/* ---------- Cabecera ---------- */
.header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  transition: box-shadow .25s;
}
.header.is-scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.07); }
.header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.header__logo img { height: 32px; width: auto; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__list { display: flex; gap: 6px; }
.nav__link { display: block; padding: .5em .8em; color: var(--text); text-decoration: none; font-weight: 500; font-size: .92rem; border-radius: 8px; position: relative; }
.nav__link:hover { color: var(--navy); }
.nav__link.is-active { color: var(--navy); }
.nav__link.is-active::after { content: ""; position: absolute; left: .8em; right: .8em; bottom: .15em; height: 2px; background: var(--orange); border-radius: 2px; }
.nav__cta { display: flex; gap: 10px; }

.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; border-radius: 8px; }
.nav-toggle span { display: block; height: 2px; background: var(--navy); margin: 5px 0; border-radius: 2px; transition: transform .25s, opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { padding: 72px 0 32px; background:
  radial-gradient(1000px 500px at 85% 10%, var(--navy-soft), transparent 60%),
  radial-gradient(600px 300px at 0% 100%, #fff4e3, transparent 60%); }
.hero__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.hero__lead { font-size: 1.1rem; color: #4b5563; max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 24px; }
.stores { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.stores img { height: 40px; width: auto; }
.hero__media img { margin-left: auto; filter: drop-shadow(0 25px 40px rgba(2,62,138,.12)); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.stats li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.stats strong { display: block; color: var(--navy); font-size: 1.05rem; }
.stats span { color: var(--muted); font-size: .88rem; }

/* ---------- Respaldo ---------- */
.trust { padding: 40px 0; }
.trust__title { text-align: center; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; }
.trust__logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 980px; margin: 0 auto; }
.trust__logos li { display: grid; place-items: center; height: 120px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: box-shadow .2s, transform .2s; }
.trust__logos li:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.trust__logos img { max-width: 100%; height: auto; }
@media (max-width: 680px) {
  .trust__logos { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .trust__logos li { height: 104px; }
  .trust__logos img { transform: scale(.88); }
}

/* ---------- Secciones ---------- */
.section { padding: 96px 0; }
.section__head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.section__head p:last-child { color: var(--muted); font-size: 1.05rem; }

/* ---------- Funcionalidades ---------- */
.features { background: var(--bg-alt); }
.fx { display: grid; grid-template-columns: 290px 1fr; gap: 24px; align-items: start; }
.fx__nav { display: flex; flex-direction: column; gap: 6px; position: sticky; top: calc(var(--header-h) + 20px); }
.tab {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: 500 .98rem var(--font);
  padding: 14px 18px; border: 1px solid transparent; background: transparent; color: var(--text);
  border-radius: 14px; cursor: pointer; transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.tab__num { font-size: .78rem; font-weight: 600; color: var(--muted); min-width: 22px; transition: color .2s; }
.tab:hover { background: #fff; color: var(--navy); }
.tab.is-active { background: #fff; color: var(--navy); font-weight: 600; border-color: var(--line); box-shadow: var(--shadow); }
.tab.is-active .tab__num { color: var(--orange-dark); }

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center;
  background: #fff; border-radius: 24px; padding: 44px; box-shadow: var(--shadow); min-height: 480px; }
.js .feature { display: none; }
.js .feature.is-active { display: grid; animation: fade .35s ease; }
.feature__num { font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--navy-soft); -webkit-text-stroke: 1px #b8c7e3; margin-bottom: 12px; }
.feature__media img { margin: 0 auto; max-height: 400px; width: auto; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Mini-pantallas HTML (formularios / seguimiento) */
.ui { max-width: 330px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: 0 24px 50px rgba(2,62,138,.14); font-size: 12px; }
.ui__head strong { display: block; color: var(--navy); font-size: 13px; }
.ui__head small, .ui__meta { color: var(--muted); font-size: 11px; }
.ui__progress { height: 6px; background: var(--navy-soft); border-radius: 99px; margin: 14px 0 4px; overflow: hidden; }
.ui__progress span { display: block; width: 58%; height: 100%; background: var(--navy); border-radius: 99px; }
.ui__check { margin-top: 10px; }
.ui__check li { position: relative; padding: 8px 0 8px 28px; border-bottom: 1px solid #f0f2f5; color: #6b7280; }
.ui__check li::before { content: ""; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 6px; border: 2px solid #cbd5e1; box-sizing: border-box; }
.ui__check li.ok { color: #1f2937; }
.ui__check li.ok::before { border: 0; background: #1f9d63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.ui__check li.ko { color: #1f2937; }
.ui__check li.ko::before { border: 0; background: #e5484d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/10px no-repeat; }
.ui__check em { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: #c8282e; }
.ui__sign { margin-top: 12px; height: 46px; border: 1.5px dashed #cbd5e1; border-radius: 10px; display: grid; place-items: center; color: #9aa5b8; font-size: 11px; }
.ui__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 6px; }
.ui__kpis span { background: var(--bg-alt); border-radius: 10px; padding: 8px; text-align: center; color: var(--muted); font-size: 10.5px; }
.ui__kpis b { display: block; font-size: 18px; color: var(--navy); }
.ui__rows li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f0f2f5; }
.ui__rows li:last-child { border-bottom: 0; }
.ui__rows i { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.ui__rows div { flex: 1; min-width: 0; line-height: 1.3; }
.ui__rows strong { display: block; font-size: 12px; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui__rows small { color: var(--muted); font-size: 10.5px; }
.st { flex: none; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: #f1f3f6; color: #6b7280; }
.st--doing { background: #e8eef8; color: var(--navy); }
.st--urgent { background: #fde8e8; color: #c8282e; }
.st--done { background: #e3f5ec; color: #157347; }
.d-purple { background: #7c4dcc; } .d-green { background: #1f9d63; }

.checklist li { position: relative; padding-left: 30px; margin-bottom: .6em; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--navy-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23023E8A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat;
}

.usecases { text-align: center; margin-top: 56px; }
.usecases h3 { font-size: 1.1rem; }
.usecases ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.usecases li { padding: .5em 1.1em; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .92rem; font-weight: 500; }

/* ---------- Precio ---------- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 32px 26px; transition: transform .2s, box-shadow .2s; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan .checklist { flex: 1; margin-bottom: 24px; font-size: .93rem; }
.plan__name { margin-bottom: .2em; }
.plan__desc { color: var(--muted); font-size: .9rem; }
.plan__price { margin: 8px 0 22px; display: flex; align-items: baseline; gap: 4px; }
.plan__amount { font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1; }
.plan__period { color: var(--muted); }
.plan--featured { border: 2px solid var(--navy); box-shadow: var(--shadow); }
.plan__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--orange); color: #1f1f1f; font-size: .75rem; font-weight: 600; padding: .35em 1em; border-radius: 999px; white-space: nowrap; }

/* ---------- Contacto ---------- */
.contact { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); color: #e6ecf6; }
.contact h2 { color: #fff; }
.contact__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.contact__address { font-style: normal; margin: 28px 0; line-height: 1.8; }
.contact__address strong { color: #fff; }
.social { display: flex; gap: 10px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); transition: background .2s; }
.social a:hover { background: var(--orange); }
.social img { width: 20px; height: 20px; filter: brightness(0) invert(1); }

.form { background: #fff; color: var(--text); border-radius: 20px; padding: 32px; box-shadow: 0 20px 50px rgba(0,0,0,.2); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: 6px; }
.field input:not([type="checkbox"]), .field textarea {
  width: 100%; font: 400 1rem var(--font); color: var(--text); padding: .75em .9em;
  border: 1px solid #d1d5db; border-radius: 10px; background: #fafafa; transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgba(2,62,138,.15); }
.field.has-error input, .field.has-error textarea { border-color: #dc2626; }
.field__error { display: block; color: #dc2626; font-size: .8rem; min-height: 0; margin-top: 4px; }
.field__error:empty { display: none; }
.field--check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.field--check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--navy); }
.field--check label { font-weight: 400; margin: 0; }
.field--check .field__error { grid-column: 1 / -1; }
#submit-btn { margin-top: 12px; }
.form__status { margin: 14px 0 0; font-size: .92rem; text-align: center; }
.form__status.is-ok { color: #15803d; }
.form__status.is-error { color: #dc2626; }

/* ---------- Pie ---------- */
.footer { background: #0b1a33; color: #aab6cc; padding: 32px 0; font-size: .88rem; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.footer img { height: 28px; width: auto; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer a, .footer .link-btn { color: #aab6cc; text-decoration: none; }
.footer a:hover, .footer .link-btn:hover { color: #fff; }
.footer__copy { margin: 0; }

/* ---------- Cookies ---------- */
.cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 150; max-width: 560px; margin-left: auto;
  background: #fff; border-radius: 16px; padding: 18px 20px; box-shadow: 0 10px 40px rgba(0,0,0,.18); font-size: .9rem; }
.cookies p { margin-bottom: 12px; }
.cookies__actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- Animación aparición ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
  .plans { grid-template-columns: repeat(2, 1fr); }
  .nav { gap: 16px; }
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .nav-toggle { display: block; }
  .nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: stretch; gap: 24px; padding: 24px 20px;
    background: #fff; transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s; overflow-y: auto;
  }
  .nav.is-open { transform: none; visibility: visible; transition: transform .3s ease; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { padding: 1em 0; font-size: 1.1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav__link.is-active::after { display: none; }
  .nav__cta { flex-direction: column; }
  .nav__cta .btn { padding: 1em; }
  body.nav-open { overflow: hidden; }

  .hero { padding-top: 32px; }
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__lead { margin-left: auto; margin-right: auto; }
  .hero__actions, .stores { justify-content: center; }
  .hero__media img { margin: 0 auto; max-height: 420px; width: auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }

  .section { padding: 72px 0; }
  .fx { grid-template-columns: 1fr; gap: 16px; }
  /* Móvil/tablet: pestañas deslizables; la siguiente siempre asoma para indicar que hay más */
  .fx__nav { position: static; flex-direction: row; overflow-x: auto; gap: 8px; margin: 0 -20px; padding: 4px 20px 12px; scroll-padding: 0 48px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 56px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 56px), transparent 100%); }
  .fx__nav::-webkit-scrollbar { display: none; }
  .tab { width: auto; flex: none; white-space: nowrap; padding: 10px 16px; gap: 8px; font-size: .9rem; border-radius: 999px; background: #fff; border-color: var(--line); max-width: 78%; }
  .tab:last-child { margin-right: 48px; }
  .tab.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
  .tab.is-active .tab__num { color: var(--orange); }
  .feature { grid-template-columns: 1fr; padding: 28px 22px; gap: 20px; min-height: 0; }
  .feature__media { order: -1; }
  .feature__media img { max-height: 320px; }
  .feature__num { display: none; }

  .contact__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* Móvil: sin pestañas, todos los módulos apilados (mejor scroll y lectura) */
@media (max-width: 680px) {
  .plans { grid-template-columns: 1fr; }
  .form { padding: 24px 18px; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .footer__inner { flex-direction: column; text-align: center; }
  .footer__links { justify-content: center; }
  .cookies__actions .btn { flex: 1; }
}

@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr; }
  .hero__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   HERO v2 — "Todo lo que ocurre en obra. Bajo control."
   ========================================================= */
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -.01em; }
.hero__lead { font-size: 1.15rem; }
.hero__lead strong { color: var(--navy); font-weight: 600; }
.hero__types { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; max-width: 36em; }
.hero__types li { font-size: .8rem; font-weight: 500; color: var(--navy); background: var(--navy-soft); padding: .35em .8em; border-radius: 999px; }
.hero__types li.more { background: transparent; color: var(--orange-dark); padding-left: .3em; }
.contact .stores { margin-top: 24px; }

.hero__media { position: relative; }
.mk { position: relative; margin: 0 auto; width: 100%; max-width: 560px; min-height: 560px; display: flex; justify-content: center; align-items: center; }

/* Teléfono */
.mk-phone {
  position: relative; z-index: 1; width: 280px; background: #fff; border-radius: 40px; padding: 10px 10px 12px;
  border: 9px solid #0d1830; box-shadow: 0 40px 80px rgba(2,62,138,.22), 0 0 0 1px rgba(0,0,0,.05);
  font-size: 11px; color: var(--text); text-align: left; overflow: hidden;
}
.mk-status { display: flex; justify-content: space-between; align-items: center; padding: 0 14px 6px; font-weight: 600; font-size: 11px; }
.mk-notch { width: 78px; height: 20px; background: #0d1830; border-radius: 999px; }
.mk-sig { font-size: 8px; letter-spacing: 1px; }
.mk-appbar { display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; color: var(--navy); }
.mk-appbar div { flex: 1; line-height: 1.25; }
.mk-appbar strong { display: block; font-size: 12.5px; }
.mk-appbar small { color: var(--muted); font-size: 10px; }
.mk-plus { width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 17px; }
.mk-filters { display: flex; gap: 5px; padding: 0 4px 8px; overflow: hidden; white-space: nowrap; }
.mk-filters span { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: #4b5563; }
.mk-filters span.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.mk-filters i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.d-red { background: #e5484d; } .d-orange { background: var(--orange); } .d-blue { background: var(--navy); }
.mk-plan { background: #f4f7fc; border-radius: 14px; overflow: hidden; }
.mk-plan svg { display: block; width: 100%; height: auto; }

/* Marcadores */
.mk-pins .pin > * { transform-box: fill-box; }
.mk-pins .pin use, .mk-pins .pin text { animation: pinDrop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: var(--d); transform-origin: 50% 100%; }
.mk-pins .pin use { filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.mk-pins .pin.sel use { stroke: #fff; stroke-width: 1.5; }
.mk-pins .pulse { transform-origin: center; transform-box: fill-box; opacity: 0; animation: pulse 2s ease-out 1.2s infinite; }
@keyframes pinDrop { from { opacity: 0; transform: translateY(-14px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0% { opacity: .45; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.6); } }

/* Hoja inferior con el registro seleccionado */
.mk-sheet { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(2,62,138,.06); animation: up .5s ease 1.3s both; }
.mk-sheet strong { display: block; font-size: 12.5px; color: #1f2937; margin-top: 4px; }
.mk-sheet small { color: var(--muted); font-size: 10px; }
.mk-sheet__top { display: flex; justify-content: space-between; align-items: center; }
.tag { font-size: 9.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.tag--red { background: #fde8e8; color: #c8282e; }
.state { font-size: 9.5px; font-weight: 600; color: var(--orange-dark); }
.mk-sheet__foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.thumb { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, #b9c7dc, #7d8fae); }
.thumb.t2 { background: linear-gradient(135deg, #d9cbb5, #a48b6a); }
.avatars { margin-left: auto; display: flex; }
.avatars i { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-style: normal; font-size: 8px; font-weight: 600; display: grid; place-items: center; border: 2px solid #fff; margin-left: -6px; }
.avatars i:nth-child(2) { background: var(--orange); } .avatars i:nth-child(3) { background: #9aa5b8; }

/* Tarjetas flotantes */
.mk-card { position: absolute; z-index: 2; background: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(2,62,138,.16); border: 1px solid rgba(2,62,138,.06); text-align: left; }
.mk-new { top: 54%; left: -36px; display: flex; gap: 10px; align-items: center; padding: 10px 14px 10px 10px; animation: floatIn .6s ease 1.5s both, bob 6s ease-in-out 2.2s infinite; }
.mk-new .ico { width: 30px; height: 30px; border-radius: 9px; background: #fff3e0; color: var(--orange-dark); display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.mk-new small { display: block; font-size: 10px; color: var(--muted); line-height: 1.3; }
.mk-new strong { display: block; font-size: 12px; color: var(--navy); line-height: 1.3; }
.mk-trace { right: -36px; top: 19%; width: 200px; padding: 14px 16px; animation: floatIn .6s ease 1.8s both; }
.mk-trace__title { font-size: 11px; font-weight: 600; color: var(--navy); margin: 0 0 10px; }
.mk-trace ol { list-style: none; margin: 0; padding: 0; }
.mk-trace li { position: relative; padding: 0 0 9px 22px; line-height: 1.25; }
.mk-trace li:last-child { padding-bottom: 0; }
.mk-trace li::before { content: ""; position: absolute; left: 0; top: 2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #cbd5e1; background: #fff; box-sizing: border-box; }
.mk-trace li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 15px; bottom: 0; width: 2px; background: #e5e7eb; }
.mk-trace li.ok::before { background: #1f9d63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/8px no-repeat; border-color: #1f9d63; }
.mk-trace li.ok::after { background: #1f9d63; }
.mk-trace li.now::before { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(242,159,37,.2); }
.mk-trace strong { display: block; font-size: 11px; color: #1f2937; font-weight: 600; }
.mk-trace small { font-size: 9.5px; color: var(--muted); }
@keyframes floatIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Flujo resumido (móvil) */
.flow { display: none; list-style: none; padding: 0; margin: 20px 0 0; justify-content: center; flex-wrap: wrap; gap: 4px 0; font-size: .78rem; font-weight: 600; color: var(--navy); counter-reset: f; }
.flow li { display: flex; align-items: center; }
.flow li:not(:last-child)::after { content: "→"; color: var(--orange); margin: 0 8px; font-weight: 700; }

@media (max-width: 1080px) {
  .mk-new { left: -16px; }
  .mk-trace { right: -16px; }
}
@media (max-width: 900px) {
  .hero__types { justify-content: center; margin-left: auto; margin-right: auto; }
  .mk { min-height: 0; padding: 10px 0; }
  .mk-new { left: 2%; }
  .mk-trace { right: 2%; }
}
@media (max-width: 640px) {
  .mk-card { display: none; }
  .flow { display: flex; font-size: .72rem; }
  .flow li:not(:last-child)::after { margin: 0 5px; }
  .hero__inner { gap: 24px; }
  .mk-phone { width: 290px; }
}
@media (max-width: 340px) {
  .mk-phone { width: 100%; }
}

/* ---------- Funcionalidad 01 · Registros de obra ---------- */
.feature--wide { grid-template-columns: 1.1fr 1fr; align-items: start; }
.feature__lead { font-size: 1.12rem; font-weight: 600; color: var(--text); margin-bottom: .5em; }
.feature .checklist li { font-size: .95rem; }
.feature .checklist strong { color: var(--navy); font-weight: 600; }
.feature__note { margin: 18px 0 0; padding: 14px 16px; border-left: 3px solid var(--orange); background: #fff8ec; border-radius: 0 12px 12px 0; font-size: .95rem; }
.feature__note strong { color: var(--navy); font-weight: 600; }
.feature--wide .feature__media { align-self: start; position: sticky; top: calc(var(--header-h) + 40px); padding-top: 56px; }

.ui--record { max-width: 340px; }
.rec__top { display: flex; align-items: center; gap: 8px; }
.rec__id { font-size: 11px; font-weight: 600; color: var(--muted); }
.rec__top .st { margin-left: auto; }
.rec__title { display: block; margin: 10px 0 12px; font-size: 15px; color: #1f2937; }
.rec__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 0; padding: 12px; background: var(--bg-alt); border-radius: 12px; }
.rec__fields dt { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rec__fields dd { margin: 2px 0 0; font-size: 11.5px; font-weight: 500; color: #1f2937; display: flex; align-items: center; gap: 5px; }
.rec__fields dd i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.rec__files { display: flex; align-items: center; gap: 6px; margin: 12px 0; }
.rec__files .thumb { width: 40px; height: 40px; }
.thumb.t3 { background: linear-gradient(135deg, #c9d6c3, #8aa184); }
.rec__doc { margin-left: auto; font-size: 10px; font-weight: 600; color: #c8282e; background: #fde8e8; padding: 5px 8px; border-radius: 8px; }
.rec__log { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid #f0f2f5; }
.rec__log li { position: relative; padding: 0 0 8px 16px; font-size: 10.5px; color: #4b5563; line-height: 1.35; }
.rec__log li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); }
.rec__log b { color: #1f2937; font-weight: 600; }
.rec__log small { color: #9aa5b8; margin-left: 4px; }

@media (max-width: 1080px) {
  .feature--wide { grid-template-columns: 1fr; }
  .feature--wide .feature__media { order: -1; }
}
@media (max-width: 1080px) { .feature--wide .feature__media { position: static; padding-top: 0; } }

/* ---------- Funcionalidad 02 · Planos y ubicación ---------- */
.ui--plan { max-width: 400px; padding: 16px; }
.pl__pop .tag, .pl__pop .st { white-space: nowrap; }
.pl__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pl__top strong { display: block; color: var(--navy); font-size: 13px; }
.pl__top small { color: var(--muted); font-size: 10.5px; }
.pl__ver { flex: none; font-size: 10px; font-weight: 500; color: #4b5563; background: var(--bg-alt); border: 1px solid var(--line); padding: 4px 8px; border-radius: 8px; }
.pl__ver b { color: #157347; font-weight: 600; margin-left: 2px; }
.pl__filters { display: flex; gap: 5px; margin: 12px 0 10px; flex-wrap: wrap; }
.pl__filters span { font-size: 10px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: #4b5563; }
.pl__filters span.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.pl__map { position: relative; background: #f4f7fc; border-radius: 12px; overflow: hidden; }
.pl-svg { display: block; width: 100%; height: auto; }
.pl-pins .pin use { filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.pl-pins .pin.dim { opacity: .22; }
.pl-pins .pin.sel use { stroke: #fff; stroke-width: 1.5; }
.pl-ring { transform-box: fill-box; transform-origin: center; animation: ring 2s ease-out infinite; }
@keyframes ring { 0% { opacity: .8; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }
.pl__pop { position: absolute; left: 28%; top: 41%; width: 66%; background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: 0 14px 30px rgba(2,62,138,.22); font-size: 11px; }
.pl__pop::after { content: ""; position: absolute; right: 18%; top: -6px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.pl__pop-top { display: flex; justify-content: space-between; align-items: center; }
.pl__pop strong { display: block; margin: 6px 0; font-size: 12px; color: #1f2937; }
.pl__pop-media { display: flex; align-items: center; gap: 5px; }
.pl__pop-media .thumb { width: 30px; height: 30px; border-radius: 6px; }
.pl__pop-media small { margin-left: auto; color: var(--muted); font-size: 10px; }
.pl__pop-link { display: block; margin-top: 8px; font-size: 10.5px; font-weight: 600; color: var(--navy); }
.pl__foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: 10px; color: var(--muted); }
.pl__dev { color: var(--navy); font-weight: 500; }

/* ---------- Funcionalidad 03 · Formularios y checklists ---------- */
.ui--form { max-width: 360px; }
.fm__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.fm__tpl { font-size: 10px; font-weight: 600; color: #157347; background: #e3f5ec; padding: 3px 8px; border-radius: 6px; }
.fm__count { font-size: 11px; font-weight: 600; color: var(--navy); }
.ui--form .ui__progress { margin: 10px 0 6px; }
.ui--form .ui__progress span { width: 66%; }
.fm__items li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; padding: 9px 0; border-bottom: 1px solid #f0f2f5; font-size: 11.5px; color: #1f2937; }
.fm__items li > span:first-child { flex: 1; min-width: 0; }
.fm__items small { color: var(--muted); font-size: 10px; margin-left: 4px; white-space: nowrap; }
.seg { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: 10px; }
.seg i, .seg b { font-style: normal; padding: 3px 7px; color: #9aa5b8; font-weight: 500; }
.seg b.yes { background: #1f9d63; color: #fff; font-weight: 600; }
.seg b.no { background: #e5484d; color: #fff; font-weight: 600; }
.fm__items li.is-ko { background: #fff7f7; margin: 0 -8px; padding: 9px 8px; border-radius: 10px; border-bottom: 0; }
.fm__action { flex-basis: 100%; font-size: 10.5px; color: #4b5563; background: #fff; border: 1px solid #f5c2c4; border-left: 3px solid #e5484d; border-radius: 8px; padding: 6px 9px; line-height: 1.35; }
.fm__action strong { display: block; color: #c8282e; font-size: 11px; }
.fm__action strong::before { content: "→ "; }
.fm__input { flex: none; min-width: 54px; text-align: center; font-size: 10.5px; color: #9aa5b8; border: 1px solid var(--line); border-radius: 7px; padding: 3px 8px; background: #fafbfc; }
.fm__comment { border-bottom: 0 !important; }
.fm__input--wide { flex-basis: 100%; text-align: left; padding: 7px 9px; }
.ui--form .ui__sign { margin-top: 6px; }
.fm__by { margin: 8px 0 0; font-size: 10px; color: var(--muted); text-align: right; }

/* ---------- Funcionalidad 04 · Seguimiento y responsables ---------- */
.sg { position: relative; max-width: 370px; margin: 0 auto; padding-top: 34px; }
.ui--track { max-width: none; }
.sg__toast { position: absolute; z-index: 2; top: 0; right: -14px; display: flex; align-items: center; gap: 10px; background: #0d1830; color: #fff; padding: 9px 14px 9px 10px; border-radius: 12px; box-shadow: 0 14px 30px rgba(13,24,48,.3); font-size: 11px; line-height: 1.3; animation: floatIn .6s ease .4s both, bob 6s ease-in-out 1.2s infinite; }
.sg__toast strong { display: block; font-size: 11.5px; }
.sg__toast small { color: #b8c4da; font-size: 10px; }
.sg__bell { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 13px; }
.k-pend { color: var(--orange-dark) !important; } .k-proc { color: var(--navy) !important; } .k-ok { color: #157347 !important; }
.sg__bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; margin: 10px 0 4px; gap: 2px; }
.sg__bar span { display: block; height: 100%; }
.b-ok { width: 72%; background: #1f9d63; } .b-proc { width: 10%; background: var(--navy); } .b-pend { flex: 1; background: var(--orange); }
.ui--track .ui__rows { margin-top: 8px; }
.av { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 9px; font-weight: 600; display: grid; place-items: center; }
.av--o { background: var(--orange); } .av--p { background: #7c4dcc; } .av--b { background: #4a6fa5; } .av--g { background: #1f9d63; }
.due { font-style: normal; color: #c8282e; font-weight: 600; }
@media (max-width: 680px) { .sg__toast { right: 0; } }

/* ---------- Funcionalidad 05 · Evidencias ---------- */
.ui--evid { max-width: 360px; }
.ev__count { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--navy); background: var(--navy-soft); padding: 3px 8px; border-radius: 6px; }
.ui--evid .rec__title { margin-bottom: 10px; }
.ev__photo { position: relative; border-radius: 12px; overflow: hidden; height: 150px; }
.ev__photo svg { display: block; width: 100%; height: 100%; }
.ev__stamp { position: absolute; left: 8px; right: 8px; bottom: 8px; font-size: 9.5px; color: #fff; background: rgba(13,24,48,.72); padding: 4px 8px; border-radius: 6px; backdrop-filter: blur(2px); }
.ev__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.ev__tile { height: 74px; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
.ev__tile small { font-size: 9px; line-height: 1.2; font-weight: 500; }
.ev__tile--video { background: linear-gradient(135deg, #3d4f6f, #1d2a44); color: #fff; }
.ev__play { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 10px; padding-left: 2px; }
.ev__tile--voice { background: #fff3e0; color: #8a5a10; }
.ev__wave { display: flex; align-items: center; gap: 2px; height: 26px; }
.ev__wave i { width: 3px; border-radius: 2px; background: var(--orange); height: 40%; }
.ev__wave i:nth-child(3n) { height: 85%; } .ev__wave i:nth-child(4n) { height: 60%; } .ev__wave i:nth-child(5n) { height: 100%; } .ev__wave i:nth-child(7n) { height: 30%; }
.ev__tile--doc { background: #fdecec; color: #8f1f24; }
.ev__pdf { font-size: 10px; font-weight: 700; background: #e5484d; color: #fff; padding: 3px 6px; border-radius: 5px; }
.ev__comment { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 9px 10px; background: var(--bg-alt); border-radius: 10px; }
.ev__comment p { margin: 0; font-size: 10.5px; line-height: 1.4; color: #4b5563; }
.ev__comment b { display: block; color: #1f2937; font-size: 11px; }
.ev__comment small { display: block; color: #9aa5b8; font-size: 9.5px; margin-top: 2px; }
.ev__foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: 10px; color: var(--muted); }
.ev__n { position: absolute; top: 8px; right: 8px; font-size: 9.5px; font-weight: 600; color: #fff; background: rgba(13,24,48,.6); padding: 2px 7px; border-radius: 99px; }
.ev__tile--photo { background: linear-gradient(160deg, #c9d3df 0%, #9fb0c4 60%, #e9e4d8 60%); color: #1d2a44; }
.ev__cam { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.6); display: grid; place-items: center; font-size: 12px; }

/* ---------- Funcionalidad 06 · Informes ---------- */
.rp { position: relative; max-width: 360px; margin: 0 auto; padding: 10px 0 92px; }
.rp__stack { position: absolute; inset: 0 14px 104px 22px; background: #fff; border: 1px solid var(--line); border-radius: 10px; transform: rotate(4deg); box-shadow: 0 10px 24px rgba(2,62,138,.08); }
.rp__stack::after { content: ""; position: absolute; inset: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; transform: rotate(-2.5deg); }
.rp__doc { position: relative; z-index: 1; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px 18px 12px; box-shadow: 0 24px 50px rgba(2,62,138,.16); font-size: 11px; aspect-ratio: 1 / 1.3; display: flex; flex-direction: column; }
.rp__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 2px solid var(--navy); }
.rp__logo { font-weight: 700; color: var(--navy); font-size: 13px; letter-spacing: -.01em; }
.rp__logo::first-letter { color: var(--orange); }
.rp__date { font-size: 9.5px; color: var(--muted); }
.rp__title { display: block; margin-top: 10px; font-size: 13px; color: #1f2937; }
.rp__sub { color: var(--muted); font-size: 10px; }
.rp__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
.rp__kpis span { background: var(--bg-alt); border-radius: 8px; padding: 6px; text-align: center; font-size: 9px; color: var(--muted); }
.rp__kpis b { display: block; font-size: 15px; color: var(--navy); }
.rp__item { display: flex; gap: 9px; padding: 7px 0; border-top: 1px solid #f0f2f5; }
.rp__item .thumb { width: 44px; height: 38px; flex: none; border-radius: 6px; }
.rp__item div { flex: 1; min-width: 0; }
.rp__item strong { display: block; font-size: 10.5px; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp__item small { display: block; font-size: 9px; color: var(--muted); margin: 1px 0 3px; }
.rp__item .st { font-size: 8.5px; padding: 2px 6px; }
.rp__foot { margin-top: auto; text-align: right; font-size: 9px; color: #9aa5b8; }
.rp__share { position: absolute; z-index: 2; left: -18px; right: 30px; bottom: 0; background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 18px 40px rgba(2,62,138,.2); border: 1px solid rgba(2,62,138,.06); animation: floatIn .6s ease .4s both; }
.rp__ok { display: flex; align-items: center; gap: 10px; }
.rp__ok > span { width: 28px; height: 28px; border-radius: 50%; background: #1f9d63; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.rp__ok strong { display: block; font-size: 12px; color: #1f2937; }
.rp__ok small { font-size: 10px; color: var(--muted); }
.rp__btns { display: flex; gap: 6px; margin-top: 10px; }
.rp__btns span { flex: 1; text-align: center; font-size: 10.5px; font-weight: 600; padding: 7px 4px; border-radius: 8px; }
.b-mail { background: var(--navy-soft); color: var(--navy); }
.b-wa { background: #e3f5ec; color: #157347; }
.b-dl { background: var(--navy); color: #fff; }
@media (max-width: 680px) { .rp__share { left: 0; right: 0; } }

/* ---------- Funcionalidad 07 · Comunicación ---------- */
.ui--chat { max-width: 360px; padding: 14px; }
.ch__ctx { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #f0f2f5; }
.ch__ctx div { flex: 1; min-width: 0; line-height: 1.25; }
.ch__ctx strong { display: block; font-size: 12px; color: #1f2937; }
.ch__ctx small { font-size: 10px; color: var(--muted); }
.ch__people { display: flex; align-items: center; padding: 8px 0 4px 6px; }
.ch__people .av { width: 22px; height: 22px; font-size: 8px; margin-left: -6px; border: 2px solid #fff; }
.ch__people small { margin-left: 8px; font-size: 9.5px; color: var(--muted); line-height: 1.25; }
.ch__msgs { background: var(--bg-alt); border-radius: 12px; padding: 10px; margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.msg { display: flex; gap: 7px; align-items: flex-end; }
.msg .av { width: 24px; height: 24px; font-size: 8px; }
.msg__b { background: #fff; border-radius: 12px 12px 12px 4px; padding: 7px 10px; font-size: 10.5px; color: #374151; line-height: 1.4; box-shadow: 0 1px 2px rgba(0,0,0,.05); max-width: 85%; }
.msg__b b { display: block; font-size: 10.5px; color: var(--navy); }
.msg__b em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 9.5px; margin-left: 3px; }
.msg__b small { display: block; text-align: right; font-size: 9px; color: #9aa5b8; margin-top: 2px; }
.msg__att { display: flex; gap: 4px; margin-top: 5px; }
.msg__att .thumb { width: 38px; height: 30px; border-radius: 6px; }
.msg--me { justify-content: flex-end; }
.msg--me .msg__b { background: #e6eefb; border-radius: 12px 12px 4px 12px; }
.msg--me .rec__doc { display: table; margin: 5px 0 0; }
.ch__decision { font-size: 10px; color: #157347; background: #e3f5ec; border-radius: 8px; padding: 6px 9px; line-height: 1.35; }
.ch__decision b { font-weight: 600; }
.ch__input { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; }
.ch__field { flex: 1; font-size: 10.5px; color: #9aa5b8; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; }
.ch__send { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 11px; }

/* ---------- Claim de cada funcionalidad (a la derecha, sobre la imagen) ---------- */
.feature__claim {
  position: relative; max-width: 400px; margin: 0 auto 26px; padding: 18px 20px 18px 22px;
  border-left: 4px solid var(--orange); background: #fff8ec; border-radius: 0 14px 14px 0;
  font-size: 1.18rem; line-height: 1.45; font-weight: 500; color: #4b5563; letter-spacing: -.005em;
}
.feature__claim strong { display: block; margin-top: 4px; color: var(--navy); font-weight: 700; }
@media (min-width: 1081px) {
  .feature--wide .feature__media { padding-top: 8px; }
}
@media (max-width: 1080px) {
  .feature__claim { font-size: 1.08rem; margin-bottom: 22px; }
}

/* =========================================================
   PERFILES — "Una herramienta. Diferentes formas de trabajar."
   ========================================================= */
.perfiles { background: #fff; }
.ptabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.ptab { display: inline-flex; align-items: center; gap: 8px; font: 500 .95rem var(--font); color: var(--text); padding: .75em 1.2em; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; transition: all .2s; }
.ptab svg { color: var(--navy); flex: none; }
.ptab:hover { border-color: var(--navy); color: var(--navy); }
.ptab.is-active { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 8px 20px rgba(2,62,138,.2); }
.ptab.is-active svg { color: var(--orange); }

.perfil { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; background: var(--bg-alt); border-radius: 24px; padding: 40px 44px; max-width: 980px; margin: 0 auto; }
.js .perfil { display: none; }
.js .perfil.is-active { display: grid; animation: fade .35s ease; }
.perfil__icon { width: 52px; height: 52px; border-radius: 14px; background: #fff; color: var(--navy); display: grid; place-items: center; box-shadow: var(--shadow); margin-bottom: 16px; }
.perfil__icon svg { width: 26px; height: 26px; }
.perfil h3 { font-size: 1.6rem; margin-bottom: .2em; }
.perfil__lead { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 1.1em; }
.perfil .checklist li { font-size: 1rem; }
.perfil__side { align-self: center; background: #fff; border-radius: 18px; padding: 22px; box-shadow: var(--shadow); }
.perfil__side-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--orange-dark); margin-bottom: 10px; }
.perfil__feats li + li { border-top: 1px solid var(--line); }
.perfil__feats a { display: flex; align-items: center; gap: 12px; padding: 12px 4px; text-decoration: none; color: var(--text); font-weight: 500; font-size: .95rem; transition: color .2s; }
.perfil__feats a span { font-size: .75rem; font-weight: 600; color: var(--muted); min-width: 20px; }
.perfil__feats a i { margin-left: auto; font-style: normal; color: var(--orange); transition: transform .2s; }
.perfil__feats a:hover { color: var(--navy); }
.perfil__feats a:hover i { transform: translateX(4px); }


@media (max-width: 900px) {
  .ptabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -20px 20px; padding: 4px 20px 10px; scrollbar-width: none; }
  .ptabs::-webkit-scrollbar { display: none; }
  .ptab { flex: none; white-space: nowrap; font-size: .9rem; }
  .perfil { grid-template-columns: 1fr; padding: 28px 22px; gap: 22px; }
  .perfil h3 { font-size: 1.35rem; }
  }

/* Precio: fondo alterno para que no se sume el espacio en blanco con la sección anterior */
.pricing { background: var(--bg-alt); }
.perfiles { padding-bottom: 80px; }
.pricing { padding-top: 80px; }
.plan__desc { min-height: 2.9em; }
@media (max-width: 680px) { .plan__desc { min-height: 0; } }
.section__head--wide { max-width: 940px; }


/* ---------- "Fotos" de obra (ilustraciones SVG) para las miniaturas ---------- */
.thumb[class*="ph-"] { background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.ph-humedad { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23eef1f4'/%3E%3Cstop offset='1' stop-color='%23cfd6de'/%3E%3C/linearGradient%3E%3CradialGradient id='s' cx='.55' cy='.45' r='.5'%3E%3Cstop offset='0' stop-color='%237a6440' stop-opacity='.55'/%3E%3Cstop offset='.6' stop-color='%239c8458' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='%23b8a27a' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='k' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23d9dfe6'/%3E%3C/linearGradient%3E%3ClinearGradient id='fl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23b9b2a6'/%3E%3Cstop offset='1' stop-color='%238f877a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='120' height='100' fill='url(%23w)'/%3E%3Cg stroke='%23c3cad3' stroke-width='.8'%3E%3Cpath d='M0 20h120M0 40h120M0 60h120M30 0v20M90 0v20M15 20v20M60 20v20M105 20v20M30 40v20M90 40v20M15 60v18M60 60v18M105 60v18'/%3E%3C/g%3E%3Cellipse cx='64' cy='58' rx='34' ry='24' fill='url(%23s)'/%3E%3Cpath d='M58 70q1 6-1 12M70 72q2 5 0 10' stroke='%237a6440' stroke-opacity='.35' stroke-width='1.5' fill='none'/%3E%3Crect x='0' y='78' width='120' height='22' fill='url(%23fl)'/%3E%3Cpath d='M38 66h46l-4 12H42z' fill='url(%23k)' stroke='%23aeb7c2' stroke-width='.8'/%3E%3Crect x='58' y='78' width='6' height='22' fill='%23a7b0bb'/%3E%3Cpath d='M60 62v-6h8' stroke='%239aa5b2' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='62' cy='96' rx='22' ry='3' fill='%236d8fb3' opacity='.55'/%3E%3C/svg%3E"); }
.ph-detalle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cdefs%3E%3CradialGradient id='s' cx='.5' cy='.5' r='.55'%3E%3Cstop offset='0' stop-color='%235e4a2c' stop-opacity='.75'/%3E%3Cstop offset='.45' stop-color='%238a7046' stop-opacity='.55'/%3E%3Cstop offset='.75' stop-color='%23b59e74' stop-opacity='.3'/%3E%3Cstop offset='1' stop-color='%23e6e0d4' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='w' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ece8e0'/%3E%3Cstop offset='1' stop-color='%23d6d0c4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='120' height='100' fill='url(%23w)'/%3E%3Cellipse cx='58' cy='52' rx='52' ry='40' fill='url(%23s)'/%3E%3Cpath d='M30 40c8-10 22-14 34-10s20 14 18 26' stroke='%235e4a2c' stroke-opacity='.35' stroke-width='2' fill='none'/%3E%3Cpath d='M44 58l6-3 5 4 7-2' stroke='%23f4f1ea' stroke-width='3' fill='none' stroke-linecap='round' opacity='.85'/%3E%3Cpath d='M47 62l4-1' stroke='%23fff' stroke-width='2' opacity='.7'/%3E%3Ccircle cx='72' cy='46' r='1.4' fill='%233f6e9c' opacity='.7'/%3E%3Ccircle cx='66' cy='66' r='1.8' fill='%233f6e9c' opacity='.6'/%3E%3Cpath d='M66 68q1 8 0 16' stroke='%233f6e9c' stroke-opacity='.45' stroke-width='1.3' fill='none'/%3E%3C/svg%3E"); }
.ph-reparacion { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233b4250'/%3E%3Cstop offset='1' stop-color='%231f242d'/%3E%3C/linearGradient%3E%3ClinearGradient id='cr' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238f99a6'/%3E%3Cstop offset='.45' stop-color='%23f2f5f8'/%3E%3Cstop offset='1' stop-color='%237b8592'/%3E%3C/linearGradient%3E%3ClinearGradient id='cr2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238f99a6'/%3E%3Cstop offset='.45' stop-color='%23f2f5f8'/%3E%3Cstop offset='1' stop-color='%237b8592'/%3E%3C/linearGradient%3E%3ClinearGradient id='rd' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e5484d'/%3E%3Cstop offset='1' stop-color='%23a5282c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='120' height='100' fill='url(%23bg)'/%3E%3Crect x='0' y='0' width='120' height='16' fill='%23e9edf1'/%3E%3Crect x='0' y='14' width='120' height='3' fill='%23b9c1ca'/%3E%3Crect x='52' y='17' width='9' height='30' fill='url(%23cr)'/%3E%3Cpath d='M56.5 47q0 10 10 10h20' stroke='url(%23cr2)' stroke-width='9' fill='none'/%3E%3Crect x='86' y='50' width='34' height='14' fill='url(%23cr2)'/%3E%3Cpath d='M34 100V72q0-8 8-8h6q6 0 6-8' stroke='%23c9ced6' stroke-width='5' fill='none' stroke-dasharray='2 1.2'/%3E%3Crect x='28' y='78' width='12' height='9' rx='2' fill='url(%23rd)'/%3E%3Ccircle cx='34' cy='74' r='4' fill='%23e5484d'/%3E%3Cg transform='rotate(-28 86 82)'%3E%3Crect x='66' y='79' width='44' height='6' rx='3' fill='%239aa4b1'/%3E%3Cpath d='M106 74a8 8 0 1 1 0 16l-3-5h-3v-6h3z' fill='%23b8c1cc'/%3E%3C/g%3E%3Cellipse cx='60' cy='96' rx='40' ry='5' fill='%23000' opacity='.25'/%3E%3Ccircle cx='20' cy='40' r='10' fill='%23fff' opacity='.05'/%3E%3C/svg%3E"); }
.ph-fisura { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f1efea'/%3E%3Cstop offset='1' stop-color='%23d8d4cb'/%3E%3C/linearGradient%3E%3ClinearGradient id='p' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23b8b6b0'/%3E%3Cstop offset='.5' stop-color='%23d0cec8'/%3E%3Cstop offset='1' stop-color='%23a9a7a1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='120' height='100' fill='url(%23w)'/%3E%3Crect x='82' y='0' width='38' height='100' fill='url(%23p)'/%3E%3Crect x='80' y='0' width='3' height='100' fill='%239b9993' opacity='.6'/%3E%3Cpath d='M80 6l-6 10 3 6-8 12 2 8-9 14 4 7-7 12 2 9-5 16' stroke='%233a3833' stroke-width='1.6' fill='none' stroke-linejoin='round'/%3E%3Cpath d='M71 34l-7 3M64 56l-6-2M60 77l-6 4' stroke='%233a3833' stroke-width='.8' fill='none'/%3E%3Cpath d='M80 6l-6 10 3 6-8 12 2 8-9 14 4 7-7 12 2 9-5 16' stroke='%23fff' stroke-width='.6' fill='none' transform='translate(1 0)' opacity='.6'/%3E%3Cg transform='rotate(-6 30 70)'%3E%3Crect x='8' y='62' width='44' height='10' rx='1.5' fill='%23f2c94c'/%3E%3Cpath d='M12 62v4M16 62v3M20 62v4M24 62v3M28 62v5M32 62v3M36 62v4M40 62v3M44 62v4M48 62v3' stroke='%236b5a1e' stroke-width='.7'/%3E%3C/g%3E%3Ccircle cx='68' cy='48' r='14' fill='none' stroke='%23e5484d' stroke-width='2' stroke-dasharray='4 2.5'/%3E%3C/svg%3E"); }
.ph-pintura { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ece6da'/%3E%3Cstop offset='1' stop-color='%23d7cfbf'/%3E%3C/linearGradient%3E%3ClinearGradient id='fl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23c49a6c'/%3E%3Cstop offset='1' stop-color='%239a7550'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='120' height='100' fill='url(%23w)'/%3E%3Cpath d='M14 18h58v44H14z' fill='%23f7f4ee'/%3E%3Cpath d='M14 18h58M14 62h58' stroke='%23e2dccf' stroke-width='1'/%3E%3Cpath d='M20 26c10-3 20 4 30 0s16 2 18 0M20 36c12 2 18-3 30 0s14 1 18-1M20 46c10-2 20 3 30 0s14 0 18 2M22 54c10 1 18-2 26 0' stroke='%23efe9de' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M80 30l14-8 6 10-14 8z' fill='%23cfd6df'/%3E%3Crect x='74' y='24' width='12' height='20' rx='3' transform='rotate(-30 80 34)' fill='%23f7f4ee' stroke='%23c9c0ae'/%3E%3Cpath d='M92 38l4 26' stroke='%235b6472' stroke-width='3' stroke-linecap='round'/%3E%3Crect x='0' y='82' width='120' height='18' fill='url(%23fl)'/%3E%3Crect x='0' y='80' width='120' height='3' fill='%23fff'/%3E%3Cg transform='translate(18 70)'%3E%3Crect width='22' height='16' rx='2' fill='%23dfe5ec'/%3E%3Cellipse cx='11' cy='1' rx='11' ry='3' fill='%23f7f4ee' stroke='%23b9c1ca'/%3E%3C/g%3E%3Cpath d='M48 62l3 4 6-8' stroke='%231f9d63' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ev__tile--photo { background: linear-gradient(180deg, rgba(13,24,48,0) 30%, rgba(13,24,48,.75)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cdefs%3E%3ClinearGradient id='bg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233b4250'/%3E%3Cstop offset='1' stop-color='%231f242d'/%3E%3C/linearGradient%3E%3ClinearGradient id='cr' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%238f99a6'/%3E%3Cstop offset='.45' stop-color='%23f2f5f8'/%3E%3Cstop offset='1' stop-color='%237b8592'/%3E%3C/linearGradient%3E%3ClinearGradient id='cr2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%238f99a6'/%3E%3Cstop offset='.45' stop-color='%23f2f5f8'/%3E%3Cstop offset='1' stop-color='%237b8592'/%3E%3C/linearGradient%3E%3ClinearGradient id='rd' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e5484d'/%3E%3Cstop offset='1' stop-color='%23a5282c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='120' height='100' fill='url(%23bg)'/%3E%3Crect x='0' y='0' width='120' height='16' fill='%23e9edf1'/%3E%3Crect x='0' y='14' width='120' height='3' fill='%23b9c1ca'/%3E%3Crect x='52' y='17' width='9' height='30' fill='url(%23cr)'/%3E%3Cpath d='M56.5 47q0 10 10 10h20' stroke='url(%23cr2)' stroke-width='9' fill='none'/%3E%3Crect x='86' y='50' width='34' height='14' fill='url(%23cr2)'/%3E%3Cpath d='M34 100V72q0-8 8-8h6q6 0 6-8' stroke='%23c9ced6' stroke-width='5' fill='none' stroke-dasharray='2 1.2'/%3E%3Crect x='28' y='78' width='12' height='9' rx='2' fill='url(%23rd)'/%3E%3Ccircle cx='34' cy='74' r='4' fill='%23e5484d'/%3E%3Cg transform='rotate(-28 86 82)'%3E%3Crect x='66' y='79' width='44' height='6' rx='3' fill='%239aa4b1'/%3E%3Cpath d='M106 74a8 8 0 1 1 0 16l-3-5h-3v-6h3z' fill='%23b8c1cc'/%3E%3C/g%3E%3Cellipse cx='60' cy='96' rx='40' ry='5' fill='%23000' opacity='.25'/%3E%3Ccircle cx='20' cy='40' r='10' fill='%23fff' opacity='.05'/%3E%3C/svg%3E") center/cover; color: #fff; }
.ev__tile--photo .ev__cam { background: rgba(255,255,255,.85); }

/* ---------- Funcionalidad 08 · Visitas de obra con IA ---------- */
.ph-barandilla { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cdefs%3E%3ClinearGradient id='sk' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23a9c6e6'/%3E%3Cstop offset='1' stop-color='%23dfe9f3'/%3E%3C/linearGradient%3E%3ClinearGradient id='sl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23b6b3ac'/%3E%3Cstop offset='1' stop-color='%238e8b84'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='120' height='100' fill='url(%23sk)'/%3E%3Cpath d='M0 70h120v30H0z' fill='url(%23sl)'/%3E%3Cpath d='M0 70h120' stroke='%2377746d' stroke-width='2'/%3E%3Cg stroke='%23e0a21c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M14 70V34M58 70V36'/%3E%3Cpath d='M12 38h50M12 54h48'/%3E%3C/g%3E%3Cg stroke='%23e0a21c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M74 70V40M74 42l30 6'/%3E%3C/g%3E%3Cpath d='M104 48l8 22' stroke='%23e0a21c' stroke-width='3' stroke-linecap='round' stroke-dasharray='3 3'/%3E%3Ccircle cx='96' cy='34' r='11' fill='%23e5484d'/%3E%3Cpath d='M91 29l10 10M101 29l-10 10' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M0 84h120' stroke='%237d7a73' stroke-width='.8' opacity='.6'/%3E%3C/svg%3E"); }
.tab__ai { margin-left: 6px; font-size: .65rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: linear-gradient(135deg, #7c4dcc, #023E8A); padding: 2px 6px; border-radius: 6px; }
.badge-ai { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: .7rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7c4dcc, #023E8A); padding: 3px 9px; border-radius: 999px; }
.ui--ai { max-width: 370px; }
.ai__top { display: flex; justify-content: space-between; align-items: center; }
.ai__pill { font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7c4dcc, #023E8A); padding: 4px 10px; border-radius: 999px; }
.ai__rec { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: #c8282e; }
.ai__rec i { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }
.ai__wave { display: flex; align-items: center; gap: 3px; height: 30px; margin: 10px 0 6px; }
.ai__wave i { flex: 1; border-radius: 2px; background: linear-gradient(180deg, #7c4dcc, #023E8A); height: 30%; animation: wave 1.1s ease-in-out infinite; }
.ai__wave i:nth-child(2n) { animation-delay: .15s; } .ai__wave i:nth-child(3n) { animation-delay: .3s; height: 55%; } .ai__wave i:nth-child(5n) { animation-delay: .45s; height: 80%; } .ai__wave i:nth-child(7n) { animation-delay: .6s; }
@keyframes wave { 0%,100% { transform: scaleY(.6); } 50% { transform: scaleY(1.25); } }
.ai__tx { margin: 0; font-size: 11px; line-height: 1.6; color: #4b5563; background: var(--bg-alt); border-radius: 10px; padding: 10px 12px; font-style: italic; }
.ai__tx mark { font-style: normal; font-weight: 500; color: #1f2937; padding: 1px 3px; border-radius: 4px; }
.ai__tx .m1 { background: #fde8e8; } .ai__tx .m2 { background: #fff1d6; } .ai__tx .m3 { background: #efe6fb; }
.ai__found { margin: 12px 0 8px; font-size: 11px; color: #5b3aa0; font-weight: 500; }
.ai__found b { font-weight: 700; }
.ai__drafts li { display: flex; align-items: center; gap: 9px; padding: 8px 8px 8px 10px; margin-bottom: 6px; border: 1px solid var(--line); border-left: 3px solid; border-radius: 10px; background: #fff; }
.ai__drafts .d1 { border-left-color: #e5484d; } .ai__drafts .d2 { border-left-color: var(--orange); } .ai__drafts .d3 { border-left-color: #7c4dcc; }
.ai__drafts .thumb { width: 38px; height: 34px; border-radius: 6px; flex: none; }
.ai__drafts div { flex: 1; min-width: 0; line-height: 1.3; }
.ai__drafts strong { display: block; font-size: 11.5px; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai__drafts small { font-size: 10px; color: var(--muted); }
.ai__drafts .tag { font-size: 9px; padding: 1px 6px; margin-right: 3px; }
.tag--amber { background: #fff1d6; color: #a86a06; } .tag--violet { background: #efe6fb; color: #5b3aa0; }
.ai__btn { flex: none; font-size: 10px; font-weight: 600; color: #fff; background: #1f9d63; padding: 5px 9px; border-radius: 7px; }
.ai__st { flex: none; font-size: 9.5px; font-weight: 600; color: #6b7280; background: #f1f3f6; padding: 3px 7px; border-radius: 6px; border: 1px dashed #cbd5e1; }

/* ---------- Funcionalidad 09 · Posventa ---------- */
.pv { position: relative; max-width: 380px; margin: 0 auto; display: grid; grid-template-columns: 150px 26px 1fr; align-items: center; }
.pv__client { background: #fff; border: 7px solid #0d1830; border-radius: 26px; padding: 12px 10px 10px; box-shadow: 0 20px 40px rgba(2,62,138,.18); font-size: 10px; display: flex; flex-direction: column; gap: 6px; }
.pv__url { font-size: 8px; color: #6b7280; background: #f1f3f6; border-radius: 999px; padding: 3px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv__h { font-size: 11.5px; color: var(--navy); line-height: 1.2; }
.pv__sub { font-size: 9px; color: var(--muted); margin-top: -4px; }
.pv__field { font-size: 9.5px; color: #374151; border: 1px solid var(--line); border-radius: 8px; padding: 6px 7px; line-height: 1.35; background: #fafbfc; }
.pv__photos { display: flex; gap: 5px; }
.pv__photos .thumb { width: 38px; height: 34px; border-radius: 6px; }
.pv__add { width: 38px; height: 34px; border-radius: 6px; border: 1.5px dashed #cbd5e1; display: grid; place-items: center; color: #9aa5b8; font-size: 16px; }
.pv__send { text-align: center; font-weight: 600; font-size: 10.5px; color: #fff; background: var(--navy); border-radius: 8px; padding: 6px; }
.pv__note { text-align: center; font-size: 8.5px; font-weight: 600; color: #157347; }
.pv__arrow { text-align: center; color: var(--orange); font-size: 20px; font-weight: 700; }
.pv__rec { max-width: none; padding: 14px; font-size: 11px; }
.pv__rec .rec__title { font-size: 13px; margin: 8px 0 10px; }
.pv__rec .rec__fields { gap: 8px 10px; padding: 10px; }
.pv__rec .rec__log { margin-top: 10px; }
.tag--teal { background: #def5f2; color: #0f766e; }
@media (max-width: 420px) {
  .pv { grid-template-columns: 1fr; gap: 8px; max-width: 300px; }
  .pv__client { max-width: 200px; margin: 0 auto; }
  .pv__arrow { transform: rotate(90deg); }
}
@media (min-width: 901px) {
  .ptabs { gap: 6px; }
  .ptab { padding: .7em .95em; font-size: .88rem; gap: 6px; }
  .ptab svg { width: 18px; height: 18px; }
}
@media (min-width: 1101px) { .ptabs { flex-wrap: nowrap; } }

/* ---------- Funcionalidad 09 · Modo sin conexión ---------- */
.ui--off { max-width: 360px; padding: 14px; }
.off__bar { display: flex; align-items: center; gap: 10px; background: #2b3445; color: #fff; border-radius: 12px; padding: 10px 12px; }
.off__icon { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.12); display: grid; place-items: center; color: #ffb4b6; flex: none; }
.off__bar div { flex: 1; line-height: 1.25; }
.off__bar strong { display: block; font-size: 12px; }
.off__bar small { font-size: 10px; color: #b8c4da; }
.off__mode { font-size: 9.5px; font-weight: 700; color: #2b3445; background: #ffd27a; padding: 3px 8px; border-radius: 999px; }
.off__label { margin: 12px 2px 6px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.off__list li { display: flex; align-items: center; gap: 9px; padding: 8px; margin-bottom: 6px; border: 1px dashed #cbd5e1; border-radius: 10px; background: #fafbfc; }
.off__list .thumb { width: 38px; height: 34px; border-radius: 6px; flex: none; }
.off__doc { width: 38px; height: 34px; border-radius: 6px; flex: none; display: grid; place-items: center; background: var(--navy-soft); color: var(--navy); font-weight: 700; }
.off__list div { flex: 1; min-width: 0; line-height: 1.3; }
.off__list strong { display: block; font-size: 11.5px; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.off__list small { font-size: 9.5px; color: var(--muted); }
.off__st { flex: none; font-size: 9.5px; font-weight: 600; color: #a86a06; background: #fff1d6; padding: 3px 7px; border-radius: 6px; }
.off__sync { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #e3f5ec; animation: floatIn .6s ease 1s both; }
.off__sync div { flex: 1; line-height: 1.3; }
.off__sync strong { display: block; font-size: 12px; color: #157347; }
.off__sync small { font-size: 10px; color: #3f7a5c; }
.off__spin { width: 28px; height: 28px; border-radius: 50%; background: #1f9d63; color: #fff; display: grid; place-items: center; font-weight: 700; animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.off__ok { font-weight: 700; color: #1f9d63; font-size: 16px; }

/* =========================================================
   EL PROBLEMA + ANTES / CON ARQLIK
   ========================================================= */
.problema { background: linear-gradient(160deg, #0b1a33 0%, #012a5e 100%); color: #dbe4f3; }
.problema h2 { color: #fff; }
.problema__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; max-width: 1000px; margin: 0 auto; }
.flujo { display: flex; flex-direction: column; align-items: center; text-align: center; }
.flujo__src, .flujo__bad { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.flujo__src li { padding: .45em 1em; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-size: .9rem; }
.flujo__src li:nth-child(odd) { transform: rotate(-2deg); } .flujo__src li:nth-child(even) { transform: rotate(2deg); }
.flujo__arrow { font-size: 1.4rem; color: #8ea3c7; margin: 10px 0; line-height: 1; }
.flujo__arrow--ok { color: var(--orange); }
.flujo__mid { margin: 0; font-weight: 600; font-size: 1.1rem; color: #fff; padding: .5em 1.2em; border: 1.5px dashed rgba(255,255,255,.35); border-radius: 12px; }
.flujo__bad li { padding: .45em 1em; border-radius: 999px; background: rgba(229,72,77,.16); border: 1px solid rgba(229,72,77,.45); color: #ffc9cb; font-size: .9rem; font-weight: 500; }
.flujo__ok { margin: 0; font-size: 1.15rem; line-height: 1.4; color: #fff; background: rgba(242,159,37,.12); border: 1px solid rgba(242,159,37,.5); border-radius: 14px; padding: 14px 18px; }
.flujo__ok strong { color: var(--orange); }

.antes { background: #fff; border-radius: 20px; padding: 10px; box-shadow: 0 24px 50px rgba(0,0,0,.25); }
.antes__table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.antes__table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; padding: 14px 16px 10px; }
.antes__table th:first-child { color: #9aa5b8; }
.antes__table th:last-child { color: var(--navy); }
.antes__table td { padding: 13px 16px; border-top: 1px solid var(--line); }
.antes__table td:first-child { color: #8b95a7; text-decoration: line-through; text-decoration-color: rgba(229,72,77,.6); width: 46%; }
.antes__table td:last-child { color: var(--navy); font-weight: 600; position: relative; padding-left: 40px; }
.antes__table td:last-child::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%;
  background: #1f9d63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat; }
.antes__table tbody tr:nth-child(odd) td { background: #fafbfd; }

/* =========================================================
   DISEÑADO PARA TRABAJAR EN OBRA
   ========================================================= */
.enobra { padding: 64px 0; background: var(--navy-soft); text-align: center; }
.enobra__title { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 28px; }
.enobra__list { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; max-width: 1080px; margin: 0 auto; }
.enobra__list li { display: flex; flex-direction: column; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 18px 8px; font-size: .86rem; font-weight: 500; color: var(--text); box-shadow: 0 6px 16px rgba(2,62,138,.06); }
.enobra__list span { width: 44px; height: 44px; border-radius: 12px; background: var(--navy-soft); color: var(--navy); display: grid; place-items: center; }
.enobra__claim { margin: 28px auto 0; font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: #4b5563; font-weight: 500; }
.enobra__claim strong { color: var(--navy); font-weight: 700; }

@media (max-width: 1000px) { .enobra__list { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) {
  .problema__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .enobra { padding: 52px 0; }
  .enobra__list { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .enobra__list li { padding: 12px 4px; font-size: .7rem; gap: 7px; border-radius: 12px; line-height: 1.25; }
  .enobra__list span { width: 36px; height: 36px; border-radius: 10px; }
  .antes__table { font-size: .88rem; }
  .antes__table td, .antes__table th { padding-left: 10px; padding-right: 8px; }
  .antes__table td:last-child { padding-left: 34px; }
  .antes__table td:last-child::before { left: 8px; }
}

/* =========================================================
   CALIDAD DE PRODUCTO (bloque grande)
   ========================================================= */
.calidad { background: #fff; position: relative; overflow: hidden; }
.calidad::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 400px at 50% 0%, var(--navy-soft), transparent 70%); pointer-events: none; }
.calidad .container { position: relative; }
.calidad h2 { font-size: clamp(1.8rem, 4.2vw, 2.9rem); }
.calidad h2 .accent { display: block; }

.qflow { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; position: relative; counter-reset: q; }
.qflow::before { content: ""; position: absolute; top: 34px; left: 8%; right: 8%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #8fb1e3, var(--navy) 55%, #1f9d63); }
.qstep { position: relative; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 0 14px 18px; margin-top: 34px; box-shadow: 0 10px 26px rgba(2,62,138,.06); transition: transform .2s, box-shadow .2s; }
.qstep:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.qstep__dot { position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin: -34px auto 12px; border-radius: 50%; background: var(--navy); color: #fff; border: 5px solid #fff; box-shadow: 0 6px 16px rgba(2,62,138,.25); }
.qstep:nth-child(1) .qstep__dot { background: #6f93cf; } .qstep:nth-child(2) .qstep__dot { background: #3f6db5; } .qstep:nth-child(3) .qstep__dot { background: #e5484d; }
.qstep:nth-child(4) .qstep__dot { background: var(--orange); } .qstep:nth-child(5) .qstep__dot { background: var(--navy); } .qstep:nth-child(6) .qstep__dot { background: #1f9d63; }
.qstep__dot b { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--navy); font-size: .72rem; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.qstep h3 { font-size: 1.05rem; margin-bottom: .4em; }
.qstep p { font-size: .86rem; color: #5b6472; line-height: 1.5; margin-bottom: 12px; }
.qstep__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.qstep__tags span { font-size: .7rem; font-weight: 600; color: var(--navy); background: var(--navy-soft); padding: 3px 8px; border-radius: 999px; }

.calidad__claim { max-width: 860px; margin: 48px auto 0; padding: 22px 26px; text-align: center; font-size: clamp(1.1rem, 2.3vw, 1.4rem); line-height: 1.45; color: #4b5563; font-weight: 500; background: #fff8ec; border-left: 4px solid var(--orange); border-radius: 0 16px 16px 0; }
.calidad__claim strong { display: block; color: var(--navy); font-weight: 700; }

@media (max-width: 1080px) {
  .qflow { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .qflow::before { display: none; }
}
@media (max-width: 640px) {
  .qflow { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
  .qflow::before { display: block; top: 20px; bottom: 20px; left: 33px; right: auto; width: 4px; height: auto; background: linear-gradient(180deg, #8fb1e3, var(--navy) 55%, #1f9d63); }
  .qstep { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; text-align: left; margin-top: 0; padding: 14px 14px 14px 10px; }
  .qstep__dot { grid-row: 1 / span 3; width: 48px; height: 48px; margin: 0; border-width: 3px; }
  .qstep__dot svg { width: 20px; height: 20px; }
  .qstep__dot b { width: 18px; height: 18px; font-size: .62rem; top: -4px; right: -4px; }
  .qstep h3 { margin-bottom: .2em; }
  .qstep p { margin-bottom: 8px; }
  .qstep__tags { justify-content: flex-start; }
  .calidad__claim { text-align: left; }
}
.qflow::before { z-index: 1; }
.qstep__dot { z-index: 2; }

/* =========================================================
   CASO (ArQlik en acción)
   ========================================================= */
.caso { background: linear-gradient(160deg, #0b1a33 0%, #012a5e 100%); color: #dbe4f3; }
.caso h2, .caso h3 { color: #fff; }
.caso__badge { display: inline-block; margin: 6px 0 0 !important; font-size: .78rem !important; font-weight: 600; color: #ffd27a !important; border: 1px dashed rgba(255,210,122,.6); padding: 4px 12px; border-radius: 999px; }
.caso__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: stretch; }
.caso__project { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 28px; }
.caso__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--orange); font-weight: 600; margin-bottom: 6px; }
.caso__project h3 { font-size: 1.4rem; }
.caso__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 18px; }
.caso__facts li { background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px 12px; font-size: .88rem; line-height: 1.35; }
.caso__facts b { display: block; font-size: 1.4rem; color: #fff; }
.caso__ctx { font-size: .95rem; color: #b8c6de; margin: 0; }

.caso__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpi { background: #fff; border-radius: 18px; padding: 20px 18px; color: var(--text); display: flex; flex-direction: column; justify-content: center; box-shadow: 0 16px 34px rgba(0,0,0,.2); }
.kpi b { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; color: var(--navy); line-height: 1.1; letter-spacing: -.02em; }
.kpi span { font-size: .86rem; color: #5b6472; margin-top: 6px; line-height: 1.35; }
.kpi em { font-style: normal; color: #9aa5b8; }
.kpi--big { grid-row: span 2; background: linear-gradient(160deg, var(--orange), #e48a0c); }
.kpi--big b { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.2rem); }
.kpi--big span { color: #fff3dd; font-size: .95rem; }
.kpi--wide { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 12px; }
.kpi--wide span { margin-top: 0; }

.caso__money { display: flex; align-items: center; gap: 24px; margin-top: 28px; padding: 22px 26px; border-radius: 18px; background: rgba(31,157,99,.14); border: 1px solid rgba(31,157,99,.5); }
.caso__money-main span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #9fe0bf; font-weight: 600; }
.caso__money-main b { font-size: clamp(1.8rem, 3.6vw, 2.5rem); color: #fff; white-space: nowrap; }
.caso__money p { margin: 0; color: #c9e9d8; font-size: .95rem; }

.caso__soft { margin-top: 28px; }
.caso__soft h3 { font-size: 1.15rem; margin-bottom: 14px; text-align: center; }
.caso__soft ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.caso__soft li { position: relative; padding: 12px 14px 12px 40px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: .92rem; color: #e6ecf6; }
.caso__soft li::before { content: "✓"; position: absolute; left: 14px; top: 11px; color: var(--orange); font-weight: 700; }

@media (max-width: 900px) {
  .caso__grid { grid-template-columns: 1fr; }
  .caso__soft ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .caso__kpis { grid-template-columns: 1fr 1fr; }
  .kpi--big { grid-row: auto; grid-column: span 2; }
  .kpi { padding: 16px 14px; }
  .caso__money { flex-direction: column; align-items: flex-start; gap: 8px; }
  .caso__soft ul { grid-template-columns: 1fr; }
  .caso__project { padding: 22px 18px; }
}
.kpi--wide { justify-content: flex-start; align-items: center; }

/* ---------- ROI dentro del caso ---------- */
.roi { margin-top: 28px; background: #fff; color: var(--text); border-radius: 22px; padding: 30px; box-shadow: 0 24px 50px rgba(0,0,0,.25); }
.roi__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 18px; }
.roi__head h3 { color: var(--navy); font-size: 1.35rem; margin: 0; }
.roi__head p { margin: 0; font-size: .9rem; color: var(--muted); }
.roi__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.roi__item { border-radius: 16px; padding: 16px 18px; background: var(--bg-alt); }
.roi__item span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--muted); }
.roi__item b { display: block; font-size: clamp(1.5rem, 2.8vw, 2rem); color: var(--navy); margin: 4px 0 2px; letter-spacing: -.01em; white-space: nowrap; }
.roi__item small { font-size: .82rem; color: #6b7280; }
.roi__item--save { background: #e3f5ec; } .roi__item--save b { color: #157347; }
.roi__item--net { background: var(--navy); } .roi__item--net span, .roi__item--net small { color: #b8c6de; } .roi__item--net b { color: #fff; }
.roi__bars { margin: 20px 0 6px; display: grid; gap: 10px; }
.roi__bar { display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; gap: 10px; font-size: .85rem; }
.roi__lbl { color: var(--muted); font-weight: 500; }
.roi__val { text-align: right; font-weight: 600; color: var(--text); }
.roi__track { height: 14px; background: #eef1f5; border-radius: 99px; overflow: hidden; }
.roi__fill { display: block; height: 100%; border-radius: 99px; }
.roi__fill--cost { width: 7%; background: var(--orange); }
.roi__fill--save { width: 100%; background: linear-gradient(90deg, #4cc38a, #1f9d63); }
.roi__highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.roi__highlights div { border: 1.5px solid var(--navy-soft); border-radius: 14px; padding: 12px 14px; text-align: center; }
.roi__highlights b { display: block; font-size: 1.4rem; color: var(--orange-dark); }
.roi__highlights span { font-size: .82rem; color: #5b6472; }
.roi__note { margin: 14px 0 0; font-size: .82rem; color: var(--muted); text-align: center; }
@media (max-width: 680px) {
  .roi { padding: 22px 16px; }
  .roi__cols, .roi__highlights { grid-template-columns: 1fr; }
  .roi__bar { grid-template-columns: 64px 1fr 66px; font-size: .8rem; }
}

/* ---------- Ajustes de móvil (revisión general) ---------- */
@media (max-width: 480px) {
  .stats { gap: 10px; margin-top: 32px; }
  .stats li { padding: 14px 14px; }
  .stats strong { font-size: .95rem; line-height: 1.25; }
  .stats span { font-size: .8rem; line-height: 1.35; display: block; margin-top: 4px; }
  .kpi--wide { flex-direction: column; align-items: flex-start; gap: 2px; }
  .roi__highlights { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .roi__highlights div { padding: 10px 6px; }
  .roi__highlights b { font-size: .88rem; white-space: nowrap; }
  .roi__highlights span { font-size: .7rem; line-height: 1.3; display: block; }
}

/* reCAPTCHA v3: insignia oculta (se muestra el aviso legal bajo el botón, como permite Google) */
.grecaptcha-badge { visibility: hidden !important; }
.form__legal { margin: 10px 0 0; font-size: .72rem; line-height: 1.45; color: var(--muted); text-align: center; }
.form__legal a { color: inherit; }

/* Página 404 */
.notfound { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; background: radial-gradient(800px 400px at 50% 0%, var(--navy-soft), transparent 70%); }
.notfound img { height: 34px; width: auto; margin-bottom: 28px; }
.notfound__code { font-size: clamp(4rem, 14vw, 7rem); font-weight: 700; line-height: 1; color: var(--orange); margin: 0 0 8px; }
.notfound p { color: #5b6472; max-width: 30em; }
.notfound__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }

/* =========================================================
   PÁGINAS INTERIORES (soluciones, sectores, recursos)
   ========================================================= */
.breadcrumb { font-size: .82rem; color: var(--muted); margin-bottom: 18px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 6px; list-style: none; margin: 0; padding: 0; }
.breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 6px; color: #9aa5b8; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--navy); text-decoration: underline; }
.page-hero { padding: 40px 0 56px; background: radial-gradient(900px 400px at 85% 0%, var(--navy-soft), transparent 65%), radial-gradient(600px 300px at 0% 100%, #fff4e3, transparent 60%); }
.page-hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); max-width: 18em; }
.page-hero__lead { font-size: 1.15rem; color: #374151; max-width: 46em; }
.page-hero__lead strong { color: var(--navy); }
.page-hero .hero__actions { margin: 24px 0 18px; }
.page-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.page-facts li { font-size: .82rem; font-weight: 500; color: var(--navy); background: #fff; border: 1px solid var(--line); padding: .35em .9em; border-radius: 999px; }
.page-meta { font-size: .85rem; color: var(--muted); margin-top: 10px; }

.page-section { padding: 64px 0; }
.page-section--alt { background: var(--bg-alt); }
.page-section h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); max-width: 26em; }
.prose { max-width: 760px; }
.prose p, .prose li { font-size: 1.02rem; color: #374151; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1em; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li { margin-bottom: .45em; }
.prose a, .page-section a:not(.btn) { color: var(--navy); font-weight: 500; }
.prose h3 { margin-top: 1.4em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0 1.5em; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--navy-soft); color: var(--navy); font-weight: 600; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 24px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: 0 6px 18px rgba(2,62,138,.05); }
.page-section--alt .card { box-shadow: none; }
.card h3 { font-size: 1.08rem; margin-bottom: .45em; }
.card p { font-size: .95rem; color: #4b5563; margin: 0; }
.card a.card__more { display: inline-block; margin-top: 10px; font-size: .9rem; }

.steps { list-style: none; counter-reset: s; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.steps li { counter-increment: s; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; font-size: .92rem; color: #4b5563; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 600; font-size: .85rem; margin-bottom: 8px; }
.steps strong { display: block; color: var(--navy); }

.faq { max-width: 860px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 20px; font-weight: 600; color: var(--navy); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--orange-dark); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 20px 16px; color: #374151; }
.faq details > div p { margin: 0 0 .6em; }

.cta-band { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); color: #dbe4f3; text-align: center; padding: 56px 0; }
.cta-band h2 { color: #fff; margin-left: auto; margin-right: auto; }
.cta-band p { max-width: 40em; margin: 0 auto 22px; }
.cta-band .hero__actions { justify-content: center; margin: 0; }
.cta-band .btn--outline { border-color: #fff; color: #fff; }
.cta-band .btn--outline:hover { background: #fff; color: var(--navy); }

.related { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.related a { font-size: .9rem; padding: .45em 1em; border-radius: 999px; background: #fff; border: 1px solid var(--line); text-decoration: none; }
.related a:hover { border-color: var(--navy); }
.note { font-size: .88rem; color: var(--muted); border-left: 3px solid var(--line); padding-left: 12px; }

.feature__more { margin: 16px 0 0; font-size: .95rem; }
.feature__more a { color: var(--navy); font-weight: 600; }
.perfil__more { margin: 14px 0 0; font-size: .92rem; }
.perfil__more a { color: var(--navy); font-weight: 600; }

/* Home: soluciones, FAQ y sobre ArQlik */
.soluciones { background: #fff; }
.soluciones .cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.soluciones .card { transition: transform .2s, box-shadow .2s, border-color .2s; }
.soluciones .card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #c9d6ee; }
.home-faq { background: #fff; }
.home-faq .faq { margin: 0 auto; }
.sobre { background: var(--bg-alt); }
.sobre__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; }
.sobre__facts { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; margin: 0; }
.sobre__facts div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f0f2f5; font-size: .93rem; }
.sobre__facts div:last-child { border-bottom: 0; }
.sobre__facts dt { color: var(--muted); font-weight: 500; }
.sobre__facts dd { margin: 0; color: var(--text); }

/* Pie ampliado */
.footer--full { padding: 56px 0 28px; }
.footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.footer__brand p { font-size: .88rem; line-height: 1.6; margin: 14px 0 0; color: #aab6cc; }
.footer__col h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: 12px; }
.footer__col li { margin-bottom: 8px; font-size: .9rem; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); }
@media (max-width: 900px) {
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .sobre__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .footer__cols { grid-template-columns: 1fr; gap: 24px; }
  .footer__bottom { flex-direction: column; text-align: center; align-items: center; }
  .sobre__facts div { grid-template-columns: 1fr; gap: 2px; }
  .page-section { padding: 48px 0; }
}
.mt-48 { margin-top: 48px; }