/* JMPrograma — sistema visual
   Noche (fondo oscuro), crema (papel), bermellón (acción), mostaza (acento).
   Motivo propio: las lamas de la persiana (cabecera, progreso del configurador, transiciones). */
:root {
  --noche: #0b1712;
  --noche-2: #12241c;
  --verde: #1b4a39;
  --crema: #f4eddd;
  --crema-2: #e9dfc8;
  --rojo: #e04a2f;
  --mostaza: #e8b04a;
  --tinta: #141412;
  --gris: #6b685e;
  --linea: rgba(244, 237, 221, 0.16);
  --ancho: 1240px;
  --pad: clamp(18px, 4vw, 48px);
  --display: "Fraunces", Georgia, serif;
  --texto: "DM Sans", system-ui, sans-serif;
  --suave: cubic-bezier(0.2, 0.7, 0.1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--noche); color: var(--tinta); font: 400 17px/1.55 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1; letter-spacing: -0.025em; text-wrap: balance; }
em { font-style: italic; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--mostaza); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--rojo); color: #fff; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 99; background: #fff; padding: 10px 14px; }

/* ---------- Botones ---------- */
.btn {
  --bg: var(--rojo); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; white-space: nowrap;
  padding: 15px 24px; border-radius: 999px; border: 0; background: var(--bg); color: var(--fg);
  font: 700 1rem var(--texto); text-decoration: none; overflow: hidden; isolation: isolate;
  transition: transform 0.25s var(--suave), box-shadow 0.25s var(--suave);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mostaza); transform: translateY(101%); transition: transform 0.35s var(--suave); }
.btn:hover { color: var(--tinta); transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(224, 74, 47, 0.7); }
.btn:hover::before { transform: none; }
.btn span[aria-hidden] { transition: transform 0.25s var(--suave); }
.btn:hover span[aria-hidden] { transform: translateX(4px); }
.btn-sm { padding: 10px 18px; font-size: 0.92rem; }
.btn-xl { padding: 19px 30px; font-size: 1.1rem; }
.btn-line { --bg: transparent; --fg: var(--crema); box-shadow: inset 0 0 0 1.5px var(--linea); }
.btn-line::before { background: var(--crema); }
.btn-ghost { --bg: transparent; --fg: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn[disabled] { opacity: 0.55; pointer-events: none; }

/* ---------- Navegación ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 max(var(--pad), calc((100vw - var(--ancho)) / 2));
  color: var(--crema); transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s; border-bottom: 1px solid transparent;
}
.nav.solid { background: rgba(11, 23, 18, 0.82); backdrop-filter: blur(14px); border-color: var(--linea); }
.nav nav { display: flex; align-items: center; gap: 28px; }
.nav nav a:not(.btn) { position: relative; text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 6px 0; }
.nav nav a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--mostaza); transform: scaleX(0); transform-origin: right; transition: transform 0.3s var(--suave); }
.nav nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 700 1.3rem var(--display); letter-spacing: -0.01em; text-decoration: none; color: inherit; }
.logo em { color: var(--rojo); }
.logo-mark { display: grid; gap: 3px; width: 28px; padding: 7px 5px; background: var(--crema); border-radius: 7px; }
.logo-mark i { height: 3px; border-radius: 2px; background: var(--noche); transition: transform 0.35s var(--suave); transform-origin: top; }
.logo:hover .logo-mark i:nth-child(1) { transform: translateY(-1px) scaleY(0.6); }
.logo:hover .logo-mark i:nth-child(2) { transform: translateY(-4px) scaleY(0.6); }
.logo:hover .logo-mark i:nth-child(3) { transform: translateY(-7px) scaleY(0.6); }
.burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; position: relative; }
.burger i { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--crema); transition: transform 0.3s var(--suave), top 0.3s var(--suave); }
.burger i:first-child { top: 17px; } .burger i:last-child { top: 26px; }
.burger[aria-expanded="true"] i:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { top: 21px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; color: var(--crema); overflow: hidden;
  padding: 104px max(var(--pad), calc((100vw - var(--ancho)) / 2)) 0;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); grid-template-rows: 1fr auto; column-gap: 40px;
  background:
    radial-gradient(620px circle at var(--mx, 72%) var(--my, 34%), rgba(224, 74, 47, 0.22), transparent 62%),
    radial-gradient(900px circle at 0% 100%, rgba(27, 74, 57, 0.95), transparent 60%),
    var(--noche);
}
.hero::after { /* grano fino para dar profundidad al degradado */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-in { position: relative; z-index: 2; align-self: start; padding-bottom: 24px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mostaza); margin-bottom: 18px; }
.eyebrow b { width: 9px; height: 9px; border-radius: 50%; background: var(--rojo); box-shadow: 0 0 0 0 rgba(224, 74, 47, 0.7); animation: pulso 2.2s infinite; }
@keyframes pulso { 70% { box-shadow: 0 0 0 12px rgba(224, 74, 47, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 74, 47, 0); } }
h1 { font-size: clamp(3.2rem, min(8.2vw, 13.5vh), 7.6rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.045em; }
h1 .ln { display: block; overflow: hidden; padding-bottom: 0.08em; }
h1 .ln > span { display: block; transform: translateY(105%); animation: sube 1s var(--suave) forwards; }
h1 .ln:nth-child(2) > span { animation-delay: 0.1s; } h1 .ln:nth-child(3) > span { animation-delay: 0.2s; }
h1 em { color: var(--rojo); font-weight: 500; }
@keyframes sube { to { transform: none; } }
.hero-foot { display: grid; grid-template-columns: minmax(0, 30em) auto; gap: 28px 48px; align-items: end; margin-top: clamp(26px, 4vw, 44px); opacity: 0; animation: aparece 0.9s 0.55s var(--suave) forwards; }
@keyframes aparece { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: rgba(244, 237, 221, 0.82); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.stage { position: relative; z-index: 1; align-self: center; perspective: 1400px; margin-left: -8%; }
.browser {
  transform: rotateY(calc(-14deg + var(--ry, 0deg))) rotateX(calc(6deg + var(--rx, 0deg))) rotate(-2deg);
  transform-style: preserve-3d; transition: transform 0.25s ease-out;
  border-radius: 16px; overflow: hidden; background: #1b1b19;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.browser-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #1f1f1c; color: #9a978c; font-size: 0.78rem; }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a35; }
.browser-bar span { margin-left: 10px; padding: 4px 14px; border-radius: 999px; background: #2a2a26; }
.browser-bar a { margin-left: auto; color: var(--mostaza); text-decoration: none; font-weight: 700; }
.browser-bar a:hover { text-decoration: underline; }
.browser-view { position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; }
.shot { position: absolute; inset: 0; display: grid; align-content: end; gap: 12px; padding: 9%; opacity: 0; transform: scale(1.04); transition: opacity 0.9s, transform 1.4s var(--suave); }
.shot.on { opacity: 1; transform: none; }
.shot small { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; }
.shot strong { font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: 0.98; }
.shot u { justify-self: start; text-decoration: none; font-weight: 700; font-size: 0.85rem; padding: 10px 16px; border-radius: 999px; }
.shot-a { background: linear-gradient(160deg, #2a1a12, #100a07); color: #f0dcc0; }
.shot-a strong { font-family: var(--display); font-style: italic; font-weight: 500; }
.shot-a u { background: #c98b3c; color: #100a07; }
.shot-b { background: #d7ff3e; color: #0a0a0a; align-content: center; }
.shot-b strong { font: 900 clamp(2.4rem, 5vw, 4.4rem)/0.86 var(--texto); letter-spacing: -0.05em; }
.shot-b u { background: #0a0a0a; color: #d7ff3e; border-radius: 4px; }
.shot-c { background: linear-gradient(180deg, #eaf4f6, #cfe6ea); color: #0f3b46; }
.shot-c strong { font-family: var(--display); font-weight: 700; }
.shot-c u { background: #0f3b46; color: #fff; }
.shutter {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: repeating-linear-gradient(180deg, #b7bab3 0 15px, #8e918a 15px 17px); border-bottom: 12px solid #63665f;
  animation: persiana 1.9s 0.7s cubic-bezier(0.65, 0, 0.15, 1) forwards;
}
.shutter span { font: 700 0.8rem var(--texto); letter-spacing: 0.3em; color: #3c3e39; background: #d9dbd4; padding: 6px 14px; border-radius: 4px; transform: rotate(-4deg); }
@keyframes persiana { to { transform: translateY(-101%); } }
.chip { position: absolute; padding: 10px 16px; border-radius: 999px; font-size: 0.88rem; font-weight: 500; white-space: nowrap; background: rgba(244, 237, 221, 0.1); backdrop-filter: blur(10px); border: 1px solid var(--linea); animation: flota 6s ease-in-out infinite; }
.chip b { color: var(--mostaza); }
.chip-1 { top: 8%; right: -4%; } .chip-2 { bottom: 10%; left: -6%; animation-delay: -3s; background: var(--crema); color: var(--tinta); border: 0; } .chip-2 b { color: var(--rojo); }
@keyframes flota { 50% { transform: translateY(-12px); } }

.marquee { grid-column: 1 / -1; position: relative; z-index: 2; margin: 20px calc(-1 * max(var(--pad), (100vw - var(--ancho)) / 2)) 0; border-top: 1px solid var(--linea); padding: 18px 0; overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: corre 38s linear infinite; }
.marquee span { font: 500 1.05rem var(--display); font-style: italic; padding: 0 26px; position: relative; white-space: nowrap; opacity: 0.75; }
.marquee span::after { content: "✦"; position: absolute; right: -8px; color: var(--rojo); font-style: normal; font-size: 0.8rem; top: 4px; }
@keyframes corre { to { transform: translateX(-50%); } }

/* ---------- Compromisos ---------- */
.promesas { background: var(--rojo); color: #fff; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 max(var(--pad), calc((100vw - var(--ancho)) / 2)); }
.promesas div { padding: 30px 26px 32px 0; display: grid; gap: 6px; align-content: start; }
.promesas div + div { padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, 0.28); }
.promesas b { font: 900 1.55rem/1 var(--display); letter-spacing: -0.02em; }
.promesas span { font-size: 0.95rem; opacity: 0.92; }

/* ---------- Secciones ---------- */
.sec { position: relative; background: var(--crema); padding: clamp(72px, 10vw, 140px) max(var(--pad), calc((100vw - var(--ancho)) / 2)); }
.sec-dark { background: var(--noche); color: var(--crema); }
.sec-crema { background: var(--crema-2); }
.sec-dark::before, .sec-crema::before { /* borde de lamas entre secciones */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 22px;
  background: repeating-linear-gradient(180deg, var(--crema) 0 4px, transparent 4px 9px); opacity: 0.9;
}
.sec-crema::before { background: repeating-linear-gradient(180deg, var(--crema) 0 4px, transparent 4px 9px); }
.sec-head { max-width: 900px; margin-bottom: clamp(36px, 5vw, 64px); }
.kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rojo); margin-bottom: 18px; }
.sec-dark .kicker { color: var(--mostaza); }
h2 { font-size: clamp(2.3rem, 6vw, 5rem); font-weight: 900; letter-spacing: -0.04em; }
h2 em { font-weight: 500; color: var(--rojo); }
.sec-dark h2 em { color: var(--mostaza); }
.sec-sub { margin-top: 18px; font-size: 1.1rem; max-width: 40em; opacity: 0.78; }
.sec-cta { margin-top: 44px; }
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--suave), transform 0.8s var(--suave); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- Servicios ---------- */
.servicios { border-top: 2px solid var(--tinta); }
.srv { border-bottom: 1px solid rgba(20, 20, 18, 0.22); }
.srv summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 64px 1fr auto 34px; align-items: baseline; gap: 16px; padding: 26px 0; position: relative; transition: padding 0.35s var(--suave), color 0.25s; }
.srv summary::-webkit-details-marker { display: none; }
.srv summary::after { content: "+"; font: 500 1.8rem/1 var(--display); color: var(--rojo); text-align: right; transition: transform 0.3s var(--suave); }
.srv[open] summary::after { transform: rotate(45deg); }
.srv summary:hover { padding-left: 18px; color: var(--rojo); }
.srv-n { font-size: 0.85rem; font-weight: 700; color: var(--gris); letter-spacing: 0.08em; }
.srv-t { font: 700 clamp(1.5rem, 3.6vw, 2.9rem)/1.02 var(--display); letter-spacing: -0.03em; }
.srv[open] .srv-t { font-style: italic; font-weight: 500; }
.srv-p { font-weight: 700; font-size: 0.95rem; padding: 6px 14px; border-radius: 999px; background: var(--tinta); color: var(--crema); white-space: nowrap; }
.srv-b { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 48px; padding: 0 34px 30px 80px; color: #3a3832; animation: aparece 0.5s var(--suave); }

/* ---------- Demos ---------- */
.demo-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.demo-tabs button { cursor: pointer; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--linea); background: transparent; color: var(--crema); font-weight: 500; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.demo-tabs button:hover { border-color: var(--crema); }
.demo-tabs button[aria-selected="true"] { background: var(--crema); color: var(--tinta); border-color: var(--crema); font-weight: 700; }
.demo-frame { border-radius: 18px; overflow: hidden; background: #1b1b19; box-shadow: 0 60px 120px -50px #000, 0 0 0 1px rgba(255, 255, 255, 0.08); }
.demo-frame iframe { display: block; width: 100%; height: min(78vh, 720px); border: 0; background: #fff; }
.aviso { margin-top: 20px; font-size: 0.92rem; max-width: 62em; color: rgba(244, 237, 221, 0.72); padding-left: 16px; border-left: 3px solid var(--mostaza); }
.aviso b { color: var(--crema); }

/* ---------- Proceso ---------- */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: p; border-top: 2px solid var(--tinta); }
.pasos li { position: relative; padding: 34px 30px 44px 0; border-bottom: 1px solid rgba(20, 20, 18, 0.22); }
.pasos li:not(:nth-child(3n + 1)) { padding-left: 30px; border-left: 1px solid rgba(20, 20, 18, 0.22); }
.pasos span { display: block; font: 900 clamp(4rem, 8vw, 7rem)/0.85 var(--display); letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px var(--tinta); margin-bottom: 20px; transition: color 0.4s, -webkit-text-stroke-color 0.4s; }
.pasos li:hover span { color: var(--rojo); -webkit-text-stroke-color: var(--rojo); }
.pasos h3 { font-size: 1.45rem; margin-bottom: 10px; }
.pasos p { color: #3a3832; }

/* ---------- Precios ---------- */
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--crema); border-radius: 22px; padding: 32px 30px; transition: transform 0.4s var(--suave), box-shadow 0.4s var(--suave); }
.plan:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(20, 20, 18, 0.45); }
.plan.top { background: var(--noche); color: var(--crema); }
.plan-flag { position: absolute; top: -13px; left: 28px; background: var(--mostaza); color: var(--tinta); font-size: 0.78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.plan h3 { font-size: 1.7rem; font-style: italic; font-weight: 500; }
.plan-para { margin-top: 8px; font-size: 0.95rem; opacity: 0.75; min-height: 3em; }
.plan-precio { margin: 22px 0 4px; font-size: 0.95rem; }
.plan-precio b { font: 900 clamp(2.8rem, 4.5vw, 3.8rem)/1 var(--display); letter-spacing: -0.04em; }
.plan-once { font-size: 0.82rem; opacity: 0.7; }
.plan dl { margin: 24px 0 26px; display: grid; gap: 0; }
.plan dl div { padding: 11px 0; border-top: 1px solid rgba(20, 20, 18, 0.14); display: grid; grid-template-columns: 96px 1fr; gap: 12px; font-size: 0.93rem; }
.plan.top dl div { border-color: var(--linea); }
.plan dt { font-weight: 700; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; padding-top: 3px; }
.plan dd { margin: 0; }
.plan .btn { margin-top: auto; justify-content: center; }
.extras { margin-top: 56px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }
.extras h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.extras h3 small { font: 400 0.88rem var(--texto); letter-spacing: 0; color: var(--gris); }
.tag { font: 700 0.78rem var(--texto); letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: 6px; }
.tag-once { background: var(--tinta); color: var(--crema); } .tag-mes { background: var(--rojo); color: #fff; }
.extras li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0; border-top: 1px solid rgba(20, 20, 18, 0.18); }
.extras li b { font-weight: 700; } .extras li span { font-weight: 700; white-space: nowrap; }
.extras li small { grid-column: 1 / -1; color: var(--gris); font-size: 0.9rem; }
.medida { margin-top: 56px; padding: 34px; border-radius: 22px; background: var(--rojo); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.medida h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 8px; }
.medida p { max-width: 36em; opacity: 0.92; }
.medida .btn { --bg: var(--tinta); }

/* ---------- Configurador ---------- */
.cfg { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.cfg-main { background: var(--crema); color: var(--tinta); border-radius: 24px; padding: clamp(22px, 4vw, 44px); min-height: 520px; display: flex; flex-direction: column; }
.cfg-side { position: sticky; top: 92px; display: grid; gap: 16px; }
.cfg-card { border: 1px solid var(--linea); border-radius: 20px; padding: 22px; background: var(--noche-2); }
.cfg-card h4 { margin: 0 0 14px; font: 700 0.76rem var(--texto); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mostaza); }
.lamas { display: grid; gap: 5px; }
.lamas button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 7px; font-size: 0.92rem; background: rgba(244, 237, 221, 0.06); color: rgba(244, 237, 221, 0.55); transition: background 0.3s, color 0.3s; }
.lamas button b { font-size: 0.75rem; opacity: 0.7; width: 16px; }
.lamas button.hecho { background: rgba(244, 237, 221, 0.16); color: var(--crema); }
.lamas button.actual { background: var(--crema); color: var(--tinta); font-weight: 700; }
.lamas button[disabled] { cursor: default; }
.lamas button:focus-visible { outline: 3px solid var(--mostaza); }
.est-num { font: 900 2rem/1.05 var(--display); letter-spacing: -0.03em; }
.est-nota { margin-top: 10px; font-size: 0.85rem; opacity: 0.7; }
.cfg-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rojo); }
.cfg-bar { height: 5px; border-radius: 3px; background: rgba(20, 20, 18, 0.12); margin-bottom: 28px; overflow: hidden; }
.cfg-bar i { display: block; height: 100%; background: var(--rojo); border-radius: 3px; transition: width 0.5s var(--suave); }
.cfg-step { animation: paso 0.5s var(--suave); flex: 1; }
@keyframes paso { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.cfg-step h3 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 900; letter-spacing: -0.03em; margin-bottom: 8px; }
.cfg-step > p.ayuda { color: var(--gris); margin-bottom: 26px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo { display: grid; gap: 7px; align-content: start; }
.campo.ancho { grid-column: 1 / -1; }
.campo > label, .campo > .rotulo { font-weight: 700; font-size: 0.92rem; }
.campo .opc { font-weight: 400; color: var(--gris); }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input:not([type]), select, textarea {
  width: 100%; font: 400 1rem var(--texto); color: var(--tinta); background: #fff; border: 1.5px solid rgba(20, 20, 18, 0.25); border-radius: 12px; padding: 13px 14px; transition: border-color 0.2s, box-shadow 0.2s;
}
textarea { resize: vertical; min-height: 96px; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(232, 176, 74, 0.45); }
[aria-invalid="true"] { border-color: var(--rojo) !important; }
.err { color: #b3311b; font-size: 0.86rem; font-weight: 500; }
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tarjeta { position: relative; cursor: pointer; display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 16px; background: #fff; border: 1.5px solid rgba(20, 20, 18, 0.16); transition: transform 0.25s var(--suave), border-color 0.2s, box-shadow 0.25s; }
.tarjeta:hover { transform: translateY(-3px); border-color: var(--tinta); }
.tarjeta input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tarjeta:has(input:checked) { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(224, 74, 47, 0.25); }
.tarjeta:has(input:checked)::after { content: "✓"; position: absolute; top: 10px; right: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--rojo); color: #fff; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; }
.tarjeta:has(input:focus-visible) { outline: 3px solid var(--mostaza); outline-offset: 2px; }
.tarjeta svg { width: 100%; height: auto; border-radius: 8px; background: var(--crema); }
.tarjeta b { font-size: 1rem; line-height: 1.2; } .tarjeta small { color: var(--gris); font-size: 0.86rem; line-height: 1.35; }
.tarjeta em { font-style: normal; font-weight: 700; font-size: 0.82rem; color: var(--rojo); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chipo { position: relative; cursor: pointer; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1.5px solid rgba(20, 20, 18, 0.2); font-weight: 500; font-size: 0.95rem; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.chipo input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chipo:hover { border-color: var(--tinta); }
.chipo:has(input:checked) { background: var(--tinta); color: var(--crema); border-color: var(--tinta); }
.chipo:has(input:focus-visible) { outline: 3px solid var(--mostaza); outline-offset: 2px; }
.chipo small { opacity: 0.65; margin-left: 4px; }
.lista-opc { display: grid; gap: 10px; }
.lista-opc .chipo { border-radius: 14px; padding: 15px 18px; font-size: 1.02rem; }
.cfg-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 22px; border-top: 1px solid rgba(20, 20, 18, 0.14); }
.cfg-nav .btn-ghost { color: var(--tinta); }
.resumen { display: grid; gap: 0; margin-bottom: 22px; }
.resumen section { padding: 14px 0; border-top: 1px solid rgba(20, 20, 18, 0.16); display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; }
.resumen h4 { margin: 0; font: 700 0.76rem var(--texto); letter-spacing: 0.12em; text-transform: uppercase; color: var(--rojo); }
.resumen button { all: unset; cursor: pointer; font-weight: 700; font-size: 0.88rem; text-decoration: underline; text-underline-offset: 3px; }
.resumen button:focus-visible { outline: 3px solid var(--mostaza); }
.resumen p { grid-column: 1 / -1; font-size: 0.96rem; overflow-wrap: anywhere; }
.resumen p span { color: var(--gris); }
.nota-pre { padding: 14px 16px; border-radius: 12px; background: #fff3d6; font-size: 0.93rem; margin-bottom: 20px; }
.check { display: grid !important; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-weight: 400 !important; font-size: 0.93rem; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--rojo); }
.legal-mini { font-size: 0.8rem; color: var(--gris); margin-top: 14px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.exito { text-align: center; margin: auto; padding: 20px 0; max-width: 34em; }
.exito-persiana { width: 150px; height: 150px; margin: 0 auto 26px; border-radius: 20px; overflow: hidden; position: relative; background: var(--verde); display: grid; place-items: center; color: var(--crema); font: 900 4rem var(--display); }
.exito-persiana::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, #b7bab3 0 13px, #8e918a 13px 15px); animation: persiana 1.3s 0.2s cubic-bezier(0.65, 0, 0.15, 1) forwards; }
.exito h3 { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; margin-bottom: 14px; }
.exito .ref { display: inline-block; margin: 18px 0; padding: 8px 16px; border-radius: 8px; background: var(--tinta); color: var(--mostaza); font-weight: 700; letter-spacing: 0.08em; }

/* ---------- Contacto ---------- */
.contacto { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq { border-top: 2px solid var(--tinta); }
.faq details { border-bottom: 1px solid rgba(20, 20, 18, 0.22); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 22px 44px 22px 0; font: 700 1.25rem/1.2 var(--display); letter-spacing: -0.01em; transition: color 0.2s; }
.faq summary:hover { color: var(--rojo); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 1.8rem; font-weight: 500; color: var(--rojo); transition: transform 0.3s var(--suave); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 44px 24px 0; color: #3a3832; animation: aparece 0.4s var(--suave); }
.contacto-box { background: var(--noche); color: var(--crema); border-radius: 24px; padding: clamp(24px, 3vw, 36px); position: sticky; top: 92px; }
.contacto-box h3 { font-size: 1.8rem; font-style: italic; font-weight: 500; margin-bottom: 18px; }
.canales { display: grid; gap: 8px; margin-bottom: 22px; }
.canales:empty { display: none; }
.canales a, .canales li > span { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(244, 237, 221, 0.08); text-decoration: none; font-weight: 500; transition: background 0.2s; }
.canales a:hover { background: rgba(244, 237, 221, 0.18); }
.canales small { display: block; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; }
.contacto-box form { display: grid; gap: 14px; position: relative; }
.contacto-box label { display: grid; gap: 6px; font-weight: 700; font-size: 0.9rem; }
.contacto-box .check a { color: var(--mostaza); }
.form-msg { font-size: 0.93rem; min-height: 1.4em; }
.form-msg.ok { color: #9be3b0; font-weight: 700; } .form-msg.mal { color: #ffb4a6; font-weight: 700; }

/* ---------- Cierre y pie ---------- */
.cierre { background: var(--rojo); color: #fff; text-align: center; padding: clamp(80px, 12vw, 170px) var(--pad); display: grid; justify-items: center; gap: 40px; }
.cierre-t { font: 900 clamp(3.4rem, 12vw, 11rem)/0.88 var(--display); letter-spacing: -0.05em; }
.cierre-t em { font-weight: 500; }
.cierre .btn { --bg: var(--tinta); }
.footer { background: var(--noche); color: var(--crema); padding: 48px max(var(--pad), calc((100vw - var(--ancho)) / 2)); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer nav a { text-decoration: none; opacity: 0.8; } .footer nav a:hover { opacity: 1; color: var(--mostaza); }
.footer .legal { grid-column: 1 / -1; font-size: 0.85rem; opacity: 0.6; padding-top: 22px; border-top: 1px solid var(--linea); }
.flotante { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; border-radius: 999px; background: var(--tinta); color: var(--crema); font-weight: 700; text-decoration: none; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12); transform: translateY(140%); transition: transform 0.5s var(--suave), background 0.2s; }
.flotante.ver { transform: none; }
.flotante.wa { background: #1fa855; color: #fff; }
.flotante:hover { background: var(--rojo); }

/* ---------- Páginas de texto (legal) ---------- */
.doc { background: var(--crema); min-height: 100vh; padding: 120px var(--pad) 80px; }
.doc article { max-width: 760px; margin: 0 auto; }
.doc h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-bottom: 24px; }
.doc h2 { font-size: 1.5rem; letter-spacing: -0.01em; margin: 34px 0 10px; }
.doc p, .doc li { margin-bottom: 12px; } .doc ul { list-style: disc; padding-left: 22px; }
.doc mark { background: #ffe08a; padding: 1px 5px; border-radius: 4px; }
.doc .pendiente { padding: 16px 18px; border-radius: 12px; background: #fff3d6; border-left: 4px solid var(--mostaza); margin-bottom: 28px; }

/* ---------- Adaptación ---------- */
@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; padding-top: 104px; }
  .stage { margin: 12px auto 0; width: min(440px, 86%); }
  .hero-foot { grid-template-columns: 1fr; }
  .cfg { grid-template-columns: 1fr; } .cfg-side { position: static; order: -1; grid-template-columns: 1fr; }
  .cfg-side .lamas-card { display: none; }
  .planes { grid-template-columns: 1fr; max-width: 560px; }
  .contacto { grid-template-columns: 1fr; } .contacto-box { position: static; }
  .extras { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 860px) {
  .burger { display: block; }
  .nav nav { position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--pad) 28px; background: rgba(11, 23, 18, 0.97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linea); transform: translateY(-120%); transition: transform 0.45s var(--suave); }
  .nav nav.abierto { transform: none; }
  .nav nav a:not(.btn) { padding: 16px 0; font: 700 1.6rem var(--display); border-bottom: 1px solid var(--linea); }
  .nav nav .btn { margin-top: 20px; justify-content: center; }
  .promesas { grid-template-columns: 1fr 1fr; }
  .promesas div, .promesas div + div { padding: 22px 16px 22px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.28); }
  .promesas div:nth-child(-n + 2) { border-top: 0; }
  .srv summary { grid-template-columns: 34px 1fr 26px; }
  .srv-p { grid-column: 2; justify-self: start; grid-row: 2; }
  .srv summary::after { grid-row: 1; grid-column: 3; }
  .srv-b { grid-template-columns: 1fr; padding: 0 0 26px 50px; }
  .pasos { grid-template-columns: 1fr 1fr; }
  .pasos li, .pasos li:not(:nth-child(3n + 1)) { padding: 26px 18px 30px 0; border-left: 0; }
  .pasos li:nth-child(even) { padding-left: 18px; border-left: 1px solid rgba(20, 20, 18, 0.22); }
  .tarjetas { grid-template-columns: 1fr 1fr; }
  .campos { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; }
  .chip-1 { right: 0; } .chip-2 { left: 0; }
}
@media (max-width: 520px) {
  .pasos { grid-template-columns: 1fr; }
  .pasos li, .pasos li:nth-child(even), .pasos li:not(:nth-child(3n + 1)) { padding: 24px 0 28px; border-left: 0; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
  .cfg-nav .btn { padding-inline: 18px; }
  .plan dl div { grid-template-columns: 84px 1fr; }
  .demo-frame iframe { height: 70vh; }
  .flotante span { display: none; } .flotante::before { content: "✎"; font-size: 1.2rem; } .flotante.wa::before { content: "✆"; }
  .flotante { padding: 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .marquee-track { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ================= Ampliación a cuatro servicios ================= */

/* Cuerpo de cada servicio: problema, solución y pasos a un lado; alcance y beneficios al otro */
.srv-b { grid-template-columns: 1.05fr 0.95fr; gap: 8px 56px; padding-bottom: 40px; }
.srv-col > h4 { margin: 22px 0 8px; font: 700 0.76rem var(--texto); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rojo); }
.srv-col > h4:first-child { margin-top: 4px; }
.srv-col > p { max-width: 38em; }
.srv-pasos { counter-reset: paso; display: grid; gap: 10px; }
.srv-pasos li { counter-increment: paso; position: relative; padding-left: 40px; }
.srv-pasos li::before { content: counter(paso); position: absolute; left: 0; top: -1px; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); color: var(--crema); font: 700 0.82rem var(--texto); }
.srv-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.srv-chips li { padding: 6px 13px; border-radius: 999px; border: 1.5px solid rgba(20, 20, 18, 0.22); font-size: 0.9rem; font-weight: 500; background: rgba(255, 255, 255, 0.5); }
.srv-gana { display: grid; gap: 7px; }
.srv-gana li { position: relative; padding-left: 24px; }
.srv-gana li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 13px; height: 3px; border-radius: 2px; background: var(--rojo); }
.srv-nota { margin-top: 20px; padding: 13px 16px; border-left: 3px solid var(--mostaza); background: rgba(232, 176, 74, 0.14); font-size: 0.93rem; border-radius: 0 10px 10px 0; }
.srv-acc { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.srv-demo { font-weight: 700; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--rojo); }
.srv-demo:hover { color: var(--rojo); }
.srv { scroll-margin-top: 84px; }

/* Portada: una pantalla por servicio */
.bub { margin: 0; max-width: 82%; padding: 9px 13px; border-radius: 16px; font-size: clamp(0.72rem, 1.05vw, 0.92rem); line-height: 1.35; }
.shot-chat { background: #f4f1ea; color: #1c1c1a; align-content: end; gap: 8px; }
.shot-chat small { position: absolute; top: 9%; left: 9%; }
.bub.them { justify-self: end; background: #14382b; color: #f4eddd; border-bottom-right-radius: 4px; }
.bub.me { justify-self: start; background: #fff; border: 1px solid #e2dccb; border-bottom-left-radius: 4px; }
.bub.typing { display: flex; gap: 5px; padding: 13px; }
.bub.typing b { width: 7px; height: 7px; border-radius: 50%; background: #9a968a; animation: teclea 1.2s infinite; }
.bub.typing b:nth-child(2) { animation-delay: 0.15s; } .bub.typing b:nth-child(3) { animation-delay: 0.3s; }
@keyframes teclea { 0%, 60%, 100% { transform: none; opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
.shot-flow { background: #10231b; color: #f4eddd; align-content: center; }
.shot-flow ol { display: grid; gap: 0; margin-top: 6px; }
.shot-flow li { position: relative; padding: 11px 14px 11px 40px; margin-bottom: 14px; border-radius: 10px; background: rgba(244, 237, 221, 0.08); border: 1px solid rgba(244, 237, 221, 0.18); font-size: clamp(0.74rem, 1.1vw, 0.95rem); font-weight: 500; }
.shot-flow li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--mostaza); }
.shot-flow li:not(:last-child)::after { content: ""; position: absolute; left: 19px; bottom: -15px; width: 2px; height: 14px; background: rgba(244, 237, 221, 0.35); }
.shot-flow li:last-child { margin-bottom: 0; background: var(--rojo); border-color: var(--rojo); }
.shot-flow li:last-child::before { background: #fff; }
.shot-cal { background: #fff; color: #141412; align-content: center; }
.shot-cal strong { font-family: var(--display); font-size: clamp(1.5rem, 2.8vw, 2.4rem); }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.slots u { text-decoration: none; text-align: center; padding: 9px 4px; border-radius: 9px; border: 1.5px solid #d9d3c2; font-weight: 700; font-size: clamp(0.72rem, 1vw, 0.9rem); justify-self: stretch; }
.slots u.x { color: #b9b4a6; text-decoration: line-through; border-style: dashed; }
.slots u.sel { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.shot-cal em { font-style: normal; font-weight: 700; font-size: 0.82rem; color: #1b6e3a; background: #e6f4ea; padding: 7px 12px; border-radius: 999px; justify-self: start; }

/* Demostraciones agrupadas */
.demo-grupos { display: grid; gap: 14px; margin-bottom: 22px; }
.demo-grupos .demo-tabs { margin-bottom: 0; }
.demo-rot { display: block; margin-bottom: 8px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mostaza); }

/* Precios por servicio */
.planes { grid-template-columns: repeat(4, 1fr); }
.plan-srv dl div { grid-template-columns: 1fr; gap: 3px; }
.plan-srv .plan-para { min-height: 4.4em; }

/* Configurador: funciones agrupadas por servicio */
.cfg-grupo { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid rgba(20, 20, 18, 0.14); display: grid; gap: 9px; }
.cfg-grupo:first-child { border-top: 0; padding-top: 0; }
.cfg-grupo > b { font: 700 0.76rem var(--texto); letter-spacing: 0.14em; text-transform: uppercase; color: var(--rojo); }
.cfg-vacio { padding: 18px; border-radius: 14px; background: #fff; border: 1.5px dashed rgba(20, 20, 18, 0.25); }

@media (max-width: 1020px) {
  .planes { grid-template-columns: 1fr 1fr; max-width: none; }
}
@media (max-width: 860px) {
  .srv-b { grid-template-columns: 1fr; padding-left: 50px; }
}
@media (max-width: 640px) {
  .planes { grid-template-columns: 1fr; }
  .srv-b { padding-left: 0; }
  .plan-srv .plan-para { min-height: 0; }
}

/* Portada: texto y botones en una sola columna para que los botones queden a la vista sin desplazarse */
.hero-foot { grid-template-columns: 1fr; gap: 24px; margin-top: clamp(20px, 3vw, 34px); }
.lead { max-width: 35em; }