:root{--f-body:"IBM Plex Sans","Segoe UI",Roboto,Arial,sans-serif;--f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;--f-display:"Archivo","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:#f5f7fa;color:#0b2545;font:16px/1.6 var(--f-body)}
img{max-width:100%;height:auto}a{color:#1a4fb4}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px;border-radius:6px}
.h-nav{display:flex;gap:18px;font-weight:500;font-size:.95rem}.h-nav a{color:#0b2545;text-decoration:none}.h-nav a:hover{color:#1a4fb4;text-decoration:underline}
@media (max-width:1180px){.h-nav{display:none}}
.p-hero{padding-block:clamp(40px,6vw,80px) clamp(30px,4vw,56px)}
.p-hero .bc{font-size:.88rem;color:#9fb0c8;margin:0 0 18px}.p-hero .bc a{color:#c5d1e3}
.p-hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.02;font-weight:800;margin:0;max-width:22ch}
.p-hero .lead{color:#c5d1e3;font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:46em;margin-top:18px}
.prose{max-width:780px;padding-block:clamp(36px,5vw,64px)}
.prose h2{font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.12;margin:44px 0 12px;letter-spacing:-.01em}
.prose h2:first-child{margin-top:0}.prose h3{font-family:var(--f-display);font-size:1.15rem;margin:28px 0 8px}
.prose p,.prose li{color:#1d2c45;line-height:1.65}.prose ul,.prose ol{padding-left:22px}.prose li{margin:6px 0}
.prose .nota{font-size:.9rem;color:#5b6b82}
.tw{overflow-x:auto;margin:14px 0;border:1px solid #d5dde8;border-radius:10px;background:#fff}
.tw table{border-collapse:collapse;width:100%;font-size:.95rem}.tw th,.tw td{padding:9px 12px;border-bottom:1px solid #e4e9f1;text-align:left;vertical-align:top}
.tw th{background:#eef2f8;font-weight:600;font-size:.85rem}.tw .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tw tr:last-child td{border-bottom:0}
a.dl{display:inline-block;background:#1a4fb4;color:#fff;text-decoration:none;font-weight:600;padding:13px 20px;border-radius:10px}
.faq{max-width:780px;padding-bottom:clamp(36px,5vw,64px)}.faq h2{font-family:var(--f-display);font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 14px}
.faq details{border-top:1px solid #d5dde8;padding:14px 0}.faq details:last-child{border-bottom:1px solid #d5dde8}
.faq summary{cursor:pointer;font-weight:600;font-size:1.05rem}.faq details p{margin:10px 0 0;color:#1d2c45}
.rel{padding-bottom:clamp(40px,6vw,72px)}.rel h2{font-family:var(--f-display);font-size:1.4rem;margin:0 0 14px}
.rel-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.rel-g a{display:block;background:#fff;border:1px solid #d5dde8;border-radius:12px;padding:16px;text-decoration:none;color:#0b2545}
.rel-g a b{display:block;font-family:var(--f-display);font-size:1.05rem;margin-bottom:4px}.rel-g a span{color:#5b6b82;font-size:.92rem;line-height:1.45}
.rel-g a:hover{border-color:#1a4fb4}
.cta-band{background:#0b2545;color:#e8eef8;padding-block:clamp(36px,5vw,60px)}
.cta-band .hw{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-band h2{color:#fff;font-family:var(--f-display);font-size:clamp(1.5rem,3vw,2.2rem);margin:0;max-width:22ch;line-height:1.1}
.cta-band p{margin:8px 0 0;color:#c5d1e3}
.foot-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 20px;margin:0 0 18px;padding:0;list-style:none}
.foot-links a{color:#33415a;text-decoration:none;font-size:.92rem}.foot-links a:hover{text-decoration:underline}
.h-foot .hw{display:block}.h-foot .row2{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap}
.home .cta-band h2{color:#fff}
.grp-bar{background:#fff;border-bottom:1px solid #e4e9f1}.grp-bar .hw{max-width:1200px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:8px;flex-wrap:wrap}
.grp-bar a{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#33415a;font-weight:600;font-size:.92rem}.grp-bar img{height:34px;width:auto;display:block}
.grp-bar .grp-claim{font-size:.88rem;font-weight:700;color:#14482e;background:#e8f1ea;border-radius:99px;padding:5px 12px}
@media (max-width:640px){.grp-bar .hw{justify-content:center}.grp-bar img{height:24px}.grp-bar a span{font-size:.8rem}.grp-bar .grp-claim{display:none}}
.grp-foot{background:#0f3d2a;color:#e3efe6;padding-block:clamp(32px,5vw,56px)}.grp-foot .hw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,4vw,56px);align-items:center}
.grp-foot .grp-logo img{width:100%;max-width:440px;height:auto;display:block}.grp-foot p{margin:0 0 16px;font-size:1.05rem;line-height:1.55}.grp-foot b{color:#fff}
.grp-btns{display:flex;gap:10px;flex-wrap:wrap}.grp-foot .h-btn.ghost{color:#fff;border-color:rgba(255,255,255,.5)}
@media (max-width:820px){.grp-foot .hw{grid-template-columns:1fr}.grp-foot .grp-logo img{max-width:320px}}
.home .prose{max-width:860px}
.legal-links{font-size:.85rem;color:#5b6b82;margin:14px 0 0}.legal-links a{color:#33415a}
.particular{background:#e8eef8;border-radius:12px;padding:14px 16px;margin:28px 0 0;font-size:.95rem}

/* ===== Home pública · precioobra.com ===== */
.home { --h-ink: #0b2545; --h-green: #1a4fb4; --h-leaf: #2563eb; --h-tint: #e8eef8; --h-paper: #f5f7fa; --h-stone: #5b6b82; --h-line: #d5dde8;
  background: var(--h-paper); color: var(--h-ink); font-family: var(--f-body); }
.home a { color: var(--h-green) }
.home .h-btn { color: #fff }
.home .h-btn.ghost { color: var(--h-green) }
.home .hw { max-width: 1200px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
.home h1, .home h2, .home h3 { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; color: var(--h-ink); letter-spacing: -0.02em }
.home .x { font-stretch: 118%; font-variation-settings: "wdth" 118 }

/* barra */
.h-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: color-mix(in srgb, var(--h-paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--h-line) }
.h-top .hw { display: flex; align-items: center; gap: 16px; padding-block: 12px }
.h-logo { display: flex; align-items: center; gap: 10px; font: 800 1.08rem "Archivo", sans-serif; font-stretch: 112%; color: var(--h-ink); text-decoration: none }
.h-logo i { width: 28px; height: 28px; border-radius: 6px; background: var(--h-green); position: relative; flex: none }
.h-logo i::before { content: ""; position: absolute; left: 6px; right: 6px; top: 7px; height: 9px; border: 2px solid #fff; border-bottom: 0 }
.h-logo i::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 7px; height: 2px; background: #fff }
.h-logo span small { margin-left: 1px }
.h-logo small { font: 500 .82rem var(--f-body); color: var(--h-stone); font-stretch: 100% }
.h-top .sp { flex: 1 }
.h-top .by { font-size: .86rem; color: var(--h-stone) }
.h-btn { font: 600 .95rem var(--f-body); border-radius: 8px; padding: 11px 18px; border: 1.5px solid var(--h-green); background: var(--h-green); color: #fff; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; line-height: 1.2 }
.h-btn:hover { background: #163f8f; border-color: #163f8f }
.h-btn.ghost { background: transparent; color: var(--h-green) }
.h-btn.ghost:hover { background: var(--h-tint) }
.h-btn:focus-visible, .h-sheet:focus-visible { outline: 3px solid var(--h-leaf); outline-offset: 3px }
@media (max-width: 720px) { .h-top .by { display: none } }

/* hero */
.h-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(36px, 7vw, 96px) clamp(40px, 6vw, 80px) }
.h-hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: .98; font-weight: 800; margin: 0 }
.h-hero .lead { font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.55; color: #33415a; max-width: 34em; margin-top: 22px }
.h-free { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 6px 14px 6px 6px; border-radius: 99px; background: var(--h-tint); color: var(--h-green); font-weight: 600; font-size: .92rem }
.h-free b { background: var(--h-green); color: #fff; border-radius: 99px; padding: 3px 10px; font-weight: 700 }
.h-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px }
.h-note { margin-top: 14px; font-size: .88rem; color: var(--h-stone) }
@media (max-width: 900px) { .h-hero { grid-template-columns: 1fr } }
@media (max-width: 520px) { .h-rows li { grid-template-columns: minmax(0, 1fr) auto } .h-rows .q { display: none } .h-rows .ok { grid-column: 2 } .h-sheet { padding: 18px 16px 14px } }
/* trama de plano detrás de la hoja */
.h-plan { position: relative }
.h-plan::before { content: ""; position: absolute; inset: -40px -40px -40px -40px; z-index: 0; border-radius: 24px;
  background-image: linear-gradient(rgba(26, 79, 180, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 79, 180, .09) 1px, transparent 1px), linear-gradient(rgba(26, 79, 180, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 79, 180, .05) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent) }
.h-plan > .h-sheet { position: relative; z-index: 1 }
@media (max-width: 520px) { .h-plan::before { inset: -20px -10px } }

/* hoja de presupuesto animada */
.h-sheet { background: #fff; border: 1px solid var(--h-line); border-radius: 4px; box-shadow: 0 1px 0 var(--h-line), 0 30px 60px -28px rgba(11, 37, 69, .35); padding: 22px 22px 18px; position: relative; font-size: .86rem }
.h-sheet::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--h-green); border-radius: 4px 4px 0 0 }
.h-sh-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding-bottom: 12px; border-bottom: 2px solid var(--h-ink) }
.h-sh-head b { font: 800 1.05rem "Archivo", sans-serif; font-stretch: 110%; display: block }
.h-sh-head span { color: var(--h-stone); font-size: .8rem }
.h-sh-head .n { white-space: nowrap; text-align: right; font-family: var(--f-mono); font-size: .78rem; color: var(--h-stone) }
.h-rows { list-style: none; margin: 0; padding: 0 }
.h-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 14px; padding: 9px 0; border-bottom: 1px dashed var(--h-line); align-items: baseline }
.h-rows .t { font-weight: 600; color: var(--h-ink) }
.h-rows .c { grid-column: 1; font-family: var(--f-mono); font-size: .72rem; color: var(--h-stone) }
.h-rows .q { font-family: var(--f-mono); font-size: .8rem; color: var(--h-stone); text-align: right; white-space: nowrap }
.h-rows .i { font-family: var(--f-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; min-width: 6.5em }
.h-rows .ok { grid-column: 2 / 4; justify-self: end; font-size: .72rem; font-weight: 600; color: var(--h-green); background: var(--h-tint); border-radius: 99px; padding: 1px 8px; opacity: 0; transition: opacity .3s }
.h-rows li.on .ok { opacity: 1 }
.h-tot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; gap: 10px }
.h-tot span { color: var(--h-stone); font-size: .82rem }
.h-tot b { font: 700 1.6rem var(--f-mono); font-variant-numeric: tabular-nums; color: var(--h-ink) }
.h-cap { margin-top: 10px; font-size: .78rem; color: var(--h-stone) }
.h-anim .h-rows li { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease }
.h-anim .h-rows li.in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .h-anim .h-rows li { opacity: 1; transform: none; transition: none } .h-rows .ok { opacity: 1; transition: none } }

/* franja verde */
.h-band { background: var(--h-ink); color: #dde5f0 }
.h-band .hw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 }
.h-band div.f { padding: 34px 28px 36px 0; border-right: 1px solid rgba(221, 229, 240, .16) }
.h-band div.f + div.f { padding-left: 28px }
.h-band div.f:last-child { border-right: 0 }
.h-band h3 { color: #fff; font-size: 1.2rem; margin: 0 0 8px; font-stretch: 108% }
.h-band p { margin: 0; line-height: 1.55; font-size: .96rem; color: #b8c6db }
@media (max-width: 820px) { .h-band .hw { grid-template-columns: 1fr } .h-band div.f, .h-band div.f + div.f { padding: 24px 0; border-right: 0; border-bottom: 1px solid rgba(221, 229, 240, .16) } .h-band div.f:last-child { border-bottom: 0 } }

/* secciones */
.h-sec { padding-block: clamp(56px, 8vw, 104px) }
.h-sec > .hw > h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.04; font-weight: 800; max-width: 18ch; margin: 0 }
.h-sec .intro { color: #33415a; font-size: 1.08rem; max-width: 40em; margin-top: 14px; line-height: 1.55 }
.h-steps { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: paso }
.h-steps li { counter-increment: paso; border-top: 3px solid var(--h-green); padding-top: 18px }
.h-steps li::before { content: counter(paso); display: block; font: 800 3.4rem/1 "Archivo", sans-serif; font-stretch: 125%; color: var(--h-leaf); margin-bottom: 14px }
.h-steps h3 { font-size: 1.22rem; margin: 0 0 8px }
.h-steps p { margin: 0; color: #33415a; line-height: 1.55 }
@media (max-width: 820px) { .h-steps { grid-template-columns: 1fr } }

.h-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start }
.h-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--h-line) }
.h-list li { padding: 16px 0; border-bottom: 1px solid var(--h-line); display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 16px }
.h-list b { font-weight: 600 }
.h-list span { color: #33415a; line-height: 1.5 }
@media (max-width: 820px) { .h-split { grid-template-columns: 1fr } .h-list li { grid-template-columns: 1fr; gap: 4px } }

.h-assoc { background: var(--h-tint); border-radius: 18px; padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: center }
.h-assoc h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.05; margin: 0 }
.h-assoc p { color: #33415a; line-height: 1.55; margin: 14px 0 0 }
.h-assoc .acts { display: flex; flex-direction: column; gap: 12px; align-items: stretch }
.h-assoc .acts .h-btn { justify-content: center; padding-block: 14px }
@media (max-width: 820px) { .h-assoc { grid-template-columns: 1fr } }

.h-foot { border-top: 1px solid var(--h-line); padding-block: 28px 40px; color: var(--h-stone); font-size: .86rem }
.h-foot .hw { display: flex; gap: 18px; justify-content: space-between; flex-wrap: wrap }
.h-foot p { margin: 0; max-width: 60em; line-height: 1.5 }

/* ventana de acceso */
dialog.h-dlg { border: 0; border-radius: 14px; padding: 0; width: min(440px, calc(100% - 32px)); box-shadow: 0 30px 80px -20px rgba(11, 37, 69, .5); color: var(--h-ink) }
dialog.h-dlg::backdrop { background: rgba(11, 37, 69, .45) }
.h-dlg .in { padding: 28px }
.h-dlg h2 { font: 800 1.6rem "Archivo", sans-serif; font-stretch: 110%; margin: 0 0 4px }
.h-dlg .sub { color: var(--h-stone); font-size: .92rem; margin: 0 0 18px }
.h-dlg form { display: flex; flex-direction: column; gap: 12px }
.h-dlg label { display: flex; flex-direction: column; gap: 5px; font-size: .84rem; font-weight: 500; color: #33415a }
.h-dlg input { font: 400 1rem var(--f-body); padding: 11px 12px; border: 1px solid #b9c5d6; border-radius: 8px; color: var(--h-ink); background: #fff }
.h-dlg input:focus-visible { outline: 3px solid var(--h-leaf); outline-offset: 1px; border-color: var(--h-green) }
.h-dlg .h-btn { justify-content: center; padding-block: 13px; margin-top: 4px }
.h-dlg .err { background: #f9e4e0; color: #a33b2b; border-radius: 8px; padding: 10px 12px; font-size: .9rem }
.h-dlg .alt { font-size: .88rem; color: var(--h-stone); margin: 14px 0 0 }
.h-dlg .x-close { position: absolute; right: 12px; top: 12px; border: 0; background: none; font-size: 1.4rem; color: var(--h-stone); cursor: pointer; padding: 4px 8px; border-radius: 6px }

/* ===== Home v2: héroe oscuro con demostración ===== */
.home .h-btn.big { font-size: 1.05rem; padding: 15px 24px; border-radius: 10px }
.h-top .h-btn { padding: 9px 16px }
.h-dark { --d-bg: #0b2545; color: #e8eef8; background:
  radial-gradient(60% 70% at 85% 30%, rgba(37, 99, 235, .28), transparent 70%),
  linear-gradient(rgba(210, 225, 245, .05) 1px, transparent 1px) 0 0 / 32px 32px,
  linear-gradient(90deg, rgba(210, 225, 245, .05) 1px, transparent 1px) 0 0 / 32px 32px, var(--d-bg) }
.h-dark .h-hero { padding-block: clamp(40px, 7vw, 100px) }
.h-dark h1 { color: #fff; font-size: clamp(2.7rem, 6.4vw, 5.4rem); line-height: .95; font-weight: 800; margin: 0 }
.h-dark .lead { color: #c5d1e3; font-size: clamp(1.08rem, 1.6vw, 1.28rem) }
.h-dark .h-note { color: #9fb0c8 }
.h-dark .h-btn { background: #f26a1b; border-color: #f26a1b; color: #0b2545 }
.h-dark .h-btn:hover { background: #ff8a3d; border-color: #ff8a3d }
.home .h-dark .h-btn.ghost { background: transparent; color: #e8eef8; border-color: rgba(232, 238, 248, .45) }
.home .h-dark .h-btn.ghost:hover { background: rgba(232, 238, 248, .08) }
.h-for { display: inline-block; margin: 0 0 20px; padding: 6px 14px; border-radius: 99px; border: 1px solid rgba(242, 106, 27, .5); color: #ffb27a; font-weight: 600; font-size: .92rem }
.h-demo { position: relative; display: flex; flex-direction: column; gap: 14px }
.h-clock { position: absolute; z-index: 2; right: -6px; top: -18px; display: flex; align-items: baseline; gap: 6px; background: #fff; color: #0b2545; border-radius: 99px; padding: 8px 16px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5) }
.h-clock b { font: 700 1.25rem var(--f-mono); font-variant-numeric: tabular-nums }
.h-clock small { color: #5b6b82; font-size: .8rem }
.h-clock .dot { width: 9px; height: 9px; border-radius: 50%; background: #d64535; align-self: center }
.h-say { display: flex; gap: 12px; align-items: flex-start; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; padding: 14px 16px; min-height: 78px }
.h-say .mic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #f26a1b; color: #0b2545; display: grid; place-items: center }
.h-say .mic svg { width: 24px; height: 24px; fill: currentColor }
.h-say p { margin: 0; color: #f2f6fc; font-size: 1.02rem; line-height: 1.45 }
.h-say .caret { display: inline-block; width: 2px; height: 1.1em; background: #f26a1b; margin-left: 2px; vertical-align: -2px; animation: hcaret 1s steps(2) infinite }
.h-say.done .caret { display: none }
@keyframes hcaret { 50% { opacity: 0 } }
.h-dark .h-sheet { box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .65) }
.h-dark .h-sheet .h-tot span { max-width: 22ch }
.h-ten .h-bar { display: flex; gap: 6px; margin: 34px 0 0; height: 10px }
.h-ten .h-bar i { display: block; border-radius: 99px; background: var(--h-leaf) }
.h-ten .h-bar i:nth-child(2) { background: var(--h-green) } .h-ten .h-bar i:nth-child(3) { background: var(--h-ink) }
.h-ten .h-steps { margin-top: 18px; counter-reset: none }
.h-ten .h-steps li { border-top: 0; padding-top: 0 }
.h-ten .h-steps li::before { content: none }
.h-ten .min { display: block; font: 800 2.4rem/1 "Archivo", sans-serif; font-stretch: 118%; color: var(--h-green); margin-bottom: 12px }
.h-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 30px }
.h-kind { border-radius: 18px; padding: clamp(24px, 4vw, 40px); background: #fff; border: 1px solid var(--h-line) }
.h-kind h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 8px; font-stretch: 112% }
.h-kind p { color: #33415a; margin: 0 0 18px; line-height: 1.5 }
.h-kind ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.h-kind li { padding: 6px 12px; border-radius: 99px; background: var(--h-tint); color: var(--h-green); font-weight: 600; font-size: .9rem }
.h-kind.dark { background: var(--h-ink); border-color: var(--h-ink) }
.h-kind.dark h3 { color: #fff } .h-kind.dark p { color: #b8c6db } .h-kind.dark li { background: rgba(255, 255, 255, .1); color: #dbe6f7 }
@media (max-width: 820px) { .h-two { grid-template-columns: 1fr } .h-clock { right: 6px } }
@media (max-width: 520px) { .h-top .h-btn.ghost { display: none } }
@media (prefers-reduced-motion: reduce) { .h-say .caret { animation: none } }
.h-dark .h-sheet { color: #0b2545 }
.h-dark .h-sheet .h-sh-head b, .h-dark .h-sheet .h-tot b, .h-dark .h-sheet .h-rows .i { color: #0b2545 }
.h-demo { padding-top: 34px }
.h-clock { top: 0; right: 0 }
.h-top .h-btn { white-space: nowrap }
@media (max-width: 440px) { .h-logo { font-size: .95rem } .h-logo small { display: none } .h-top .hw { gap: 8px } .h-top .h-btn { padding: 8px 12px; font-size: .88rem } }

/* ===== Marca precioobra.com: azul marino + naranja ===== */
.h-logo { font: 700 1.2rem "Inter", "Archivo", sans-serif; font-stretch: 100%; letter-spacing: -0.02em; gap: 10px }
.h-logo .mk { width: 32px; height: 32px; flex: none; display: block }
.h-logo b { color: #f26a1b; font-weight: inherit }
.h-logo small { font: 600 1.2rem "Inter", sans-serif; color: var(--h-stone); margin-left: 0 }
/* un solo color de acción: naranja (botón principal) */
.home .h-btn:not(.ghost) { background: #f26a1b; border-color: #f26a1b; color: #0b2545; font-weight: 700 }
.home .h-btn:not(.ghost):hover { background: #ff8a3d; border-color: #ff8a3d }
.home .h-btn.ghost { color: var(--h-ink); border-color: var(--h-line); background: #fff }
.home .h-btn.ghost:hover { background: var(--h-tint) }
.h-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 22px 0 0; padding: 0; font-size: .92rem; color: #c5d1e3 }
.h-trust li { display: flex; align-items: center; gap: 7px }
.h-trust li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: #f26a1b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%230b2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat }
.h-dark .h-note a.h-in { color: #fff; font-weight: 600 }
.home .h-btn.big svg { flex: none }

/* logo grande */
.h-top .hw { padding-block: 14px }
.h-logo { gap: 14px }
.h-logo .mk { width: 54px; height: 54px }
.h-logo .lw { display: flex; flex-direction: column; line-height: 1 }
.h-logo .ln { font: 700 2rem "Inter", "Archivo", sans-serif; letter-spacing: -0.03em }
.h-logo .ln small { font: 600 2rem "Inter", sans-serif; letter-spacing: -0.03em }
.h-logo .lt { font: 500 .8rem var(--f-body); color: var(--h-stone); margin-top: 6px; letter-spacing: 0 }
@media (max-width: 1100px) { .h-top nav, .h-top .nav { display: none } }
@media (max-width: 720px) { .h-logo .mk { width: 44px; height: 44px } .h-logo .ln, .h-logo .ln small { font-size: 1.55rem } .h-logo .lt { display: none } }
@media (max-width: 400px) { .h-logo .ln small { display: none } }
/* hoja de ejemplo: coste y ficticio */
.h-sheet { overflow: hidden }
.h-stamp { position: absolute; z-index: 3; left: 50%; top: 38%; transform: translate(-50%, -50%) rotate(-18deg); white-space: nowrap; pointer-events: none;
  font: 800 clamp(2rem, 4.4vw, 3.4rem)/1 "Inter", "Archivo", sans-serif; letter-spacing: .04em; color: rgba(242, 106, 27, .38); border: 6px solid rgba(242, 106, 27, .38); border-radius: 14px; padding: 10px 22px }
.h-tot b.h-coste { font: 800 .9rem "Inter", var(--f-body); display: inline-block; background: #0b2545; color: #fff; border-radius: 6px; padding: 2px 8px; font-size: .9rem; letter-spacing: .06em; margin-bottom: 2px }
.h-tot span { line-height: 1.35 }
.h-ficticio { margin: 0; background: #f26a1b; color: #0b2545; border-radius: 12px; padding: 14px 16px; font-size: 1rem; line-height: 1.45 }
.h-ficticio b:first-child { font-size: 1.12rem; display: block; margin-bottom: 2px }
.h-logo .lt { white-space: nowrap }
.h-nav { white-space: nowrap }
@media (max-width: 1400px) { .h-nav { display: none !important } }
.h-rows li { padding: 7px 0 }
.h-dark .h-hero { align-items: start }
.h-dark .h-copy { padding-top: 40px }
@media (max-width: 900px) { .h-dark .h-copy { padding-top: 0 } }
.h-stamp { font-size: clamp(1.8rem, 3.6vw, 2.8rem) }
.h-dark .h-sheet .h-tot b.h-coste { color: #fff; background: #0b2545; font: 800 1.15rem "Inter", var(--f-body); letter-spacing: .08em; padding: 4px 10px }
.h-dark .h-sheet .h-tot { border-top: 2px solid #0b2545; margin-top: 4px }
.h-dark .h-sheet .h-tot span { font-size: .95rem; color: #33415a }
.h-dark .h-sheet .h-tot b[data-total] { font-size: 1.9rem }
.h-for { font-size: 1.05rem; padding: 9px 18px; border-width: 2px; color: #fff; background: rgba(242, 106, 27, .12) }
.h-for b { color: #ffb27a; font-weight: 700 }
.h-dark .lead b { color: #fff; font-weight: 600 }
.h-for { border-radius: 14px }

/* ===== Tres bloques ===== */
.h-bloques { background: linear-gradient(#f5f7fa, #fff) }
.h-kicker { display: inline-block; margin: 0 0 14px; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: #f26a1b }
.h-bloques h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.02; margin: 0 }
.h-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 44px }
.h-block { background: #fff; border: 1px solid var(--h-line); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 0 var(--h-line), 0 24px 50px -30px rgba(11, 37, 69, .35); transition: transform .25s ease, box-shadow .25s ease }
.h-block:hover { transform: translateY(-6px); box-shadow: 0 1px 0 var(--h-line), 0 36px 60px -30px rgba(11, 37, 69, .45) }
.h-block .ilu svg { display: block; width: 100%; height: auto }
.h-block .bd { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; position: relative }
.h-block .num { position: absolute; top: -26px; right: 22px; width: 52px; height: 52px; border-radius: 14px; background: #f26a1b; color: #0b2545; display: grid; place-items: center; font: 800 1.15rem "Inter", sans-serif; box-shadow: 0 10px 20px -8px rgba(242, 106, 27, .7) }
.h-block h3 { font-size: 1.45rem; line-height: 1.1; margin: 0; padding-right: 60px }
.h-block p { margin: 0; color: #33415a; line-height: 1.55 }
.h-block ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.h-block li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--h-ink) }
.h-block li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: #e8eef8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%231a4fb4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat }
.home .h-link { margin-top: auto; padding-top: 10px; background: none; border: 0; padding-left: 0; text-align: left; font: 700 1rem var(--f-body); color: #1a4fb4; cursor: pointer; text-decoration: none }
.home .h-link:hover { text-decoration: underline }
.h-block.dark { background: #0b2545; border-color: #0b2545 }
.h-block.dark h3, .h-block.dark li { color: #fff }
.h-block.dark p { color: #c5d1e3 }
.h-block.dark li::before { background-color: #1a4fb4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.home .h-block.dark .h-link { color: #ffb27a }
.h-block.warm li::before { background-color: #ffe1cc; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23c2510f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.home .h-block.warm .h-link { color: #c2510f }
@media (max-width: 980px) { .h-blocks { grid-template-columns: 1fr; max-width: 560px } }
/* pasos con icono */
.h-steps li::before { display: none }
.st-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #0b2545; color: #f26a1b; margin-bottom: 16px }
.st-ic svg { width: 28px; height: 28px }
.h-steps .min { display: inline-block; font: 700 .8rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #f26a1b; margin-bottom: 8px }
/* banda con iconos */
.bd-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(242, 106, 27, .16); color: #ff8a3d; font: 800 1.3rem "Inter", sans-serif; margin-bottom: 12px }
.h-tres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px }
.h-tres span { padding: 7px 14px; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-weight: 600; font-size: .9rem }
.h-tres + .h-trust { margin-top: 18px }
.h-tres ~ .h-cta, .h-cta { }
.h-dark .h-hero { padding-block: clamp(32px, 4vw, 56px) clamp(40px, 5vw, 72px) }
.h-dark h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1 }
.h-dark .h-copy { padding-top: 12px }
.h-dark .lead { margin-top: 18px }
.h-tres { margin-top: 20px }
.h-tres span { font-size: .85rem; padding: 6px 12px }
#plataforma { scroll-margin-top: 100px }

/* ===== v3: tres herramientas muy visuales ===== */
.h-tri { background: #fff; padding-bottom: clamp(30px, 4vw, 50px) }
.h-tri h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: .98; margin: 0 }
.h-tri h2 span { color: #f26a1b }
.h-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px }
.home a.tile { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 22px; text-decoration: none; color: #fff; min-height: 210px; position: relative; overflow: hidden; transition: transform .2s ease }
.home a.tile:hover { transform: translateY(-5px) }
.tile .ic { width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, .18); display: grid; place-items: center; margin-bottom: auto }
.tile .ic svg { width: 36px; height: 36px }
.tile b { font: 800 1.4rem/1.1 "Inter", sans-serif; letter-spacing: -.01em; margin-top: 18px }
.tile small { font-size: .95rem; opacity: .85 }
.tile::after { content: "→"; position: absolute; right: 22px; top: 22px; font: 700 1.4rem "Inter", sans-serif; opacity: .8 }
.tile.t1 { background: linear-gradient(135deg, #1a4fb4, #2563eb) }
.tile.t2 { background: linear-gradient(135deg, #0b2545, #16365f) }
.tile.t3 { background: linear-gradient(135deg, #f26a1b, #ff8a3d) }
.home .tile.t3 { color: #0b2545 }
.tile.t3 .ic { background: rgba(255, 255, 255, .35) }

.h-feat { padding-block: clamp(56px, 8vw, 110px); overflow: hidden; scroll-margin-top: 90px }
.h-feat .hw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 90px); align-items: center }
.h-feat.rev .txt { order: 2 }
.h-feat .nbig { display: block; font: 800 clamp(4rem, 9vw, 7rem)/0.8 "Inter", sans-serif; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px currentColor; margin-bottom: 14px }
.f1 .nbig { -webkit-text-stroke-color: #1a4fb4 } .f2 .nbig { -webkit-text-stroke-color: #ffb27a } .f3 .nbig { -webkit-text-stroke-color: #f26a1b }
.h-feat h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.02; margin: 0 0 16px }
.h-feat .txt > p { font-size: 1.1rem; line-height: 1.6; margin: 0 0 18px }
.h-feat ul { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px }
.h-feat li { display: flex; gap: 12px; align-items: center; font-weight: 600; font-size: 1.02rem }
.h-feat li::before { content: "✓"; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; background: #f26a1b; color: #0b2545 }
.h-feat .vis { position: relative; padding: 34px 26px }
.h-feat .vis::before { content: ""; position: absolute; inset: 0; border-radius: 32px; transform: rotate(-3deg) }
.h-feat.rev .vis::before { transform: rotate(3deg) }
.mock { position: relative; background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 40px 80px -30px rgba(11, 37, 69, .55); display: flex; flex-direction: column; gap: 12px; color: #0b2545 }
.mk-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 2px solid #0b2545 }
.mk-top b { font: 800 1.1rem "Inter", sans-serif }
.mk-top span { color: #5b6b82; font-size: .85rem }
.mk-top .chip { background: #fff4ec; color: #c2510f; font-weight: 700; padding: 5px 10px; border-radius: 99px }
.rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.room { border: 2px solid #d5dde8; border-radius: 14px; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start }
.room i { font-style: normal; font-size: 1.6rem }
.room b { font-size: .95rem }
.room span { font-size: .72rem; color: #5b6b82 }
.room.on { border-color: #f26a1b; background: #fff4ec }
.sel { display: flex; flex-direction: column; gap: 3px; background: #f5f7fa; border-radius: 10px; padding: 10px 12px }
.sel span { font-size: .72rem; color: #5b6b82; text-transform: uppercase; letter-spacing: .05em; font-weight: 600 }
.sel b { font-size: .95rem }
.mk-tot { display: flex; justify-content: space-between; align-items: center; background: #0b2545; color: #fff; border-radius: 12px; padding: 14px 16px; margin-top: 4px }
.mk-tot span { font-size: .85rem; color: #c5d1e3 }
.mk-tot b { font: 800 1.5rem "Inter", sans-serif; color: #ffb27a }
.cap { display: grid; grid-template-columns: 7.5rem 1fr 3rem; gap: 10px; align-items: center; font-size: .9rem; font-weight: 600 }
.cap i { height: 10px; background: #e8eef8; border-radius: 99px; overflow: hidden }
.cap em { display: block; height: 100%; background: linear-gradient(90deg, #1a4fb4, #f26a1b); border-radius: 99px }
.cap b { text-align: right; color: #5b6b82; font-size: .82rem }
.wk { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px dashed #d5dde8 }
.wk .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: #1a4fb4; position: relative }
.wk .av::before { content: ""; position: absolute; top: -6px; left: 6px; right: 6px; height: 12px; border-radius: 12px 12px 3px 3px; background: #f26a1b }
.wk b { display: block; font-size: .95rem }
.wk small { color: #5b6b82; font-size: .78rem }
.wk em { font-style: normal; font-weight: 700; font-size: .8rem; color: #0b2545; background: #f26a1b; padding: 7px 12px; border-radius: 99px }
.mock .mk-note { margin: 0; font-size: .72rem; color: #9fb0c8; text-align: right }
.badge { position: absolute; z-index: 2; background: #fff; color: #0b2545; font-weight: 700; font-size: .9rem; padding: 10px 16px; border-radius: 99px; box-shadow: 0 16px 30px -12px rgba(11, 37, 69, .5); white-space: nowrap }
.badge.b-a { top: 6px; left: -6px; transform: rotate(-4deg) }
.badge.b-b { bottom: 8px; right: -4px; transform: rotate(3deg); background: #f26a1b }

.f1 { background: #e8eef8 } .f1 .vis::before { background: #1a4fb4 }
.f1 h2, .f1 li { color: #0b2545 } .f1 .txt > p { color: #33415a }
.f2 { background: #0b2545 } .f2 .vis::before { background: #f26a1b }
.home .f2 h2, .f2 li { color: #fff } .f2 .txt > p { color: #c5d1e3 }
.f3 { background: #fff4ec } .f3 .vis::before { background: #0b2545 }
.f3 h2, .f3 li { color: #0b2545 } .f3 .txt > p { color: #33415a }
.f2 .badge.b-b { background: #fff }
@media (max-width: 900px) {
  .h-tiles { grid-template-columns: 1fr }
  .home a.tile { min-height: 0; flex-direction: row; align-items: center; gap: 16px; padding: 18px }
  .tile .ic { margin: 0; flex: none; width: 54px; height: 54px } .tile b { margin: 0; font-size: 1.15rem } .tile small { display: none }
  .h-feat .hw { grid-template-columns: 1fr } .h-feat.rev .txt { order: 0 }
  .h-feat .vis { padding: 26px 8px }
}
@media (max-width: 440px) { .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px } .room { padding: 8px 6px } .room b { font-size: .8rem } .cap { grid-template-columns: 6rem 1fr 2.6rem; font-size: .8rem } .badge { font-size: .78rem; padding: 8px 12px } }

/* ===== v4: tres bloques sobre el diseño actual ===== */
.h-plat { background: #fff; scroll-margin-top: 90px }
.h-plat h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.04; margin: 0 }
.h-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 34px }
.h-three .h-kind { display: flex; flex-direction: column; position: relative; transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 20px 40px -30px rgba(11, 37, 69, .4) }
.h-three .h-kind:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -28px rgba(11, 37, 69, .5) }
.h-three .h-kind h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.1 }
.kh { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px }
.kic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: #e8eef8; color: #1a4fb4 }
.kic svg { width: 36px; height: 36px }
.kn { font: 800 2.6rem/1 "Inter", sans-serif; letter-spacing: -.04em; color: #d5dde8 }
.k1 { border-top: 5px solid #1a4fb4 }
.k2 .kic { background: rgba(255, 255, 255, .1); color: #ffb27a } .k2 .kn { color: rgba(255, 255, 255, .18) }
.h-kind.warm { background: #fff4ec; border-color: #ffd9bf; border-top: 5px solid #f26a1b }
.k3 .kic { background: #f26a1b; color: #0b2545 } .k3 .kn { color: #ffd0b0 }
.h-kind.warm li { background: #fff; color: #c2510f; border: 1px solid #ffd9bf }
.h-three .h-link { margin-top: auto; padding-top: 22px }
.home .h-kind.dark .h-link { color: #ffb27a }
.home .h-kind.warm .h-link { color: #c2510f }
@media (max-width: 980px) { .h-three { grid-template-columns: 1fr } }

/* esquemático */
.h-three .h-kind p { font-size: 1.05rem; margin-bottom: 14px }
.h-three .h-kind h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem) }
.h-plat h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem) }
.h-dark .lead { font-size: clamp(1.2rem, 1.8vw, 1.45rem); color: #fff; font-weight: 500 }
.h-steps p, .h-band p { font-size: 1.02rem }
/* titular grande e impactante, como antes */
.h-dark h1 { font-size: clamp(2.9rem, 6.6vw, 5.6rem); line-height: .95 }
/* titular siempre dentro de su columna: tamaño según el ancho real de la columna */
.h-copy { container-type: inline-size; min-width: 0 }
@supports (font-size: 1cqi) { .h-dark .h-copy h1 { font-size: clamp(2.3rem, 12.6cqi, 5.6rem) } }
.h-dark .h-copy h1 { overflow-wrap: normal; hyphens: none }
@media (min-width: 901px) { .h-dark .h-hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) } }
@supports (font-size: 1cqi) { .h-dark .h-copy h1 { font-size: clamp(2.3rem, 13.6cqi, 5.6rem) } }

.h-grupo { display: inline-flex; flex-direction: column; gap: 8px; margin: 18px 0 22px; text-decoration: none; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 16px; background: rgba(255, 255, 255, .05); max-width: 100% }
.h-grupo span { color: #c5d1e3; font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em }
.h-grupo img { height: clamp(34px, 4.2vw, 52px); width: auto; max-width: 100%; display: block }
.h-grupo em { font-style: normal; font-weight: 700; color: #a8c4a0; font-size: .95rem }
.h-grupo:hover { border-color: #a8c4a0; background: rgba(168, 196, 160, .1) }
/* pantallas muy estrechas (320-360 px) */
@media (max-width: 380px) { .h-top .hw { gap: 6px } .h-logo { font-size: .88rem } .h-logo .mk { width: 34px; height: 34px } .h-top .h-btn { padding: 7px 10px; font-size: .8rem } .h-top .h-btn.ghost { display: none } }
.home { overflow-x: clip }