/* Web de promoción de Web Platform (borrador, maqueta) · estilos.
   Mismos tokens de marca que ../plataforma/plataforma.css (tinta azul noche + azul del logo), copiados aquí porque
   plataforma.css trae la estructura de aplicación a pantalla completa (main con scroll propio), que esta página no usa.
   Claro y oscuro: prefers-color-scheme y [data-theme] (botón de la pieza 20). Texto mínimo 14 px; objetivos táctiles de 44 px. */
:root{
  --bg:#f4f5f8;--surface:#fff;--surface-2:#f8f9fb;--fg:#161b2b;--muted:#565d70;--line:#e3e6ee;--line-2:#d0d5e1;
  --accent:#1d55d6;--accent-fg:#fff;--accent-soft:#e8effd;--accent-2:#0f6e86;--accent-2-soft:#e1f1f5;
  --ok:#16774a;--bad:#b42318;--warn:#8a5300;--warn-bg:#fcefd8;--bad-bg:#fde8e6;
  --ink:#101a33;--ink-2:#18244a;--ink-fg:#eef2fb;--ink-muted:#b4bedb;--ink-line:#2b3966;--ember:#5cb0ff;--ember-fg:#06142e;
  --shadow-s:0 1px 2px rgba(28,27,38,.06),0 1px 1px rgba(28,27,38,.04);
  --shadow:0 1px 2px rgba(28,27,38,.05),0 10px 28px -8px rgba(28,27,38,.14);
  --shadow-l:0 30px 70px -20px rgba(6,12,30,.55);
  --radius:18px;--radius-s:12px;--ease:cubic-bezier(.2,.8,.2,1);--max:1160px;--gut:clamp(16px,4vw,40px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0c111e;--surface:#141b2d;--surface-2:#182035;--fg:#ecf0f8;--muted:#a9b1c7;--line:#252f47;--line-2:#34405e;
  --accent:#7cadff;--accent-fg:#06142e;--accent-soft:#132650;--accent-2:#5fd0e6;--accent-2-soft:#0f2a35;
  --ok:#6fd49f;--bad:#ff8f87;--warn:#f2b84b;--warn-bg:#33260c;--bad-bg:#3b1614;
  --ink:#080c18;--ink-2:#111a33;--ink-line:#26335a;
  --shadow-s:0 1px 2px rgba(0,0,0,.4);--shadow:0 1px 2px rgba(0,0,0,.35),0 12px 30px -8px rgba(0,0,0,.55);--shadow-l:0 30px 70px -20px rgba(0,0,0,.8);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c111e;--surface:#141b2d;--surface-2:#182035;--fg:#ecf0f8;--muted:#a9b1c7;--line:#252f47;--line-2:#34405e;
  --accent:#7cadff;--accent-fg:#06142e;--accent-soft:#132650;--accent-2:#5fd0e6;--accent-2-soft:#0f2a35;
  --ok:#6fd49f;--bad:#ff8f87;--warn:#f2b84b;--warn-bg:#33260c;--bad-bg:#3b1614;
  --ink:#080c18;--ink-2:#111a33;--ink-line:#26335a;
  --shadow-s:0 1px 2px rgba(0,0,0,.4);--shadow:0 1px 2px rgba(0,0,0,.35),0 12px 30px -8px rgba(0,0,0,.55);--shadow-l:0 30px 70px -20px rgba(0,0,0,.8);
  color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-100px;z-index:100;background:var(--surface);color:var(--fg);padding:10px 16px;border-radius:10px;border:2px solid var(--accent);font-weight:600}
.skip:focus{top:12px}
.i{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.marcador{font-style:normal;background:var(--warn-bg);color:var(--fg);border:1px dashed var(--warn);border-radius:6px;padding:0 6px;white-space:nowrap}
.marcador--wrap{white-space:normal}

/* ───────── Aviso de maqueta y cabecera ───────── */
.aviso-maqueta{margin:0;display:flex;width:100%;justify-content:center;align-items:center;gap:10px;padding:8px var(--gut);background:var(--warn-bg);color:var(--fg);font-size:14px;font-weight:600;text-align:center;border-bottom:1px solid color-mix(in srgb,var(--warn) 40%,transparent)}
.aviso-maqueta::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none}
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:12px 20px;min-height:68px}
.marca{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;min-width:0;min-height:44px}
.marca img{width:34px;height:34px;flex:none}
.marca__t{display:grid;line-height:1.15;min-width:0}
.marca__t b{font-size:16px;font-weight:750;letter-spacing:-.01em;white-space:nowrap}
.marca__t small{font-size:14px;color:var(--muted);font-weight:500}
.top__in>.marca{margin-right:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;color:var(--fg);text-decoration:none;font-size:15px;font-weight:550}
.nav a:hover{background:color-mix(in srgb,var(--fg) 7%,transparent)}
.top__acc{display:flex;align-items:center;gap:8px;flex:none}
.top .cf-theme{width:44px;height:44px;--cf-th-bg:var(--surface);--cf-th-fg:var(--fg);--cf-th-line:var(--line-2);--cf-th-accent:var(--accent)}
.top .cf-theme svg{width:20px;height:20px}
@media (max-width:1023px){.nav{display:none}}
@media (max-width:599px){.top__in{min-height:60px}.top .solo-ancho{display:none}}

/* ───────── Botones ───────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--fg);font:inherit;font-size:15px;font-weight:650;text-decoration:none;cursor:pointer;max-width:100%;text-align:center;transition:transform .15s var(--ease),box-shadow .2s,filter .2s,background .2s}
.btn:hover{box-shadow:var(--shadow)}
.btn:active{transform:translateY(1px)}
.btn .i{width:18px;height:18px}
.btn--pri{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
.btn--pri:hover{filter:brightness(1.07)}
.btn--lg{min-height:52px;padding:12px 24px;font-size:16px;border-radius:14px}
.btn--block{width:100%}
/* sobre la tinta (portada y banda final) */
.tinta .btn--pri{background:var(--ember);border-color:var(--ember);color:var(--ember-fg)}
.tinta .btn--sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.tinta .btn--sec:hover{background:rgba(255,255,255,.08)}
.tinta :focus-visible{outline-color:var(--ember)}
.tinta a:not(.btn){color:#fff}

/* ───────── Portada ───────── */
.tinta{background:var(--ink);color:var(--ink-fg);background-image:radial-gradient(80% 70% at 0% 0%,rgba(30,120,255,.30),transparent 60%),radial-gradient(60% 60% at 100% 100%,rgba(0,190,255,.16),transparent 60%),linear-gradient(160deg,#14214a,#0a1024)}
.hero{padding:clamp(48px,8vw,104px) 0 clamp(56px,8vw,112px);overflow:hidden}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero__txt{display:grid;gap:22px;justify-items:start}
.kicker{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ember)}
.hero h1{font-size:clamp(34px,5.2vw,60px);line-height:1.04;letter-spacing:-.035em;color:#fff;font-weight:800;max-width:14ch}
.hero__sub{font-size:clamp(17px,1.6vw,19px);color:var(--ink-muted);max-width:44ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero__nota{font-size:14px;color:var(--ink-muted)}
.hero__nota b{color:#fff;font-weight:650}
.hero__ya{font-size:15px;color:var(--ink-muted)}
.hero__ya a{display:inline-flex;align-items:center;min-height:44px;font-weight:650}

.hero__fig{position:relative;min-width:0}
.navegador{position:relative;margin:0;border-radius:14px;background:#0d1530;border:1px solid var(--ink-line);box-shadow:var(--shadow-l);transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);transform-origin:left center}
.navegador__barra{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--ink-line)}
.navegador__barra i{width:10px;height:10px;border-radius:50%;background:#2c3a66}
.navegador__dir{margin-left:10px;flex:1;height:22px;border-radius:99px;background:#18234a;max-width:280px}
.navegador img{border-radius:0 0 13px 13px;width:100%;aspect-ratio:1200/750;object-fit:cover}
.chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:var(--surface);color:var(--fg);box-shadow:var(--shadow-l);font-size:14px;line-height:1.3;border:1px solid var(--line)}
.chip b{display:block;font-size:14px}
.chip span span{color:var(--muted)}
.chip__ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.chip--pieza{left:-28px;bottom:28px}
.chip--editor{right:-18px;top:62px}
.chip__ic--ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
@media (prefers-reduced-motion:no-preference){
  .chip{animation:flotar 6s ease-in-out infinite}
  .chip--editor{animation-delay:-3s}
  @keyframes flotar{50%{transform:translateY(-6px)}}
}

/* tres ideas bajo la portada */
.ideas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,32px);margin-top:clamp(48px,7vw,88px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--ink-line)}
.idea{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start}
.idea .i{grid-row:span 2;width:40px;height:40px;padding:9px;border-radius:12px;background:rgba(92,176,255,.12);color:var(--ember);stroke-width:1.7}
.idea h2{font-size:17px;color:#fff;letter-spacing:-.01em}
.idea p{font-size:15px;color:var(--ink-muted)}

@media (max-width:1023px){
  .hero__in{grid-template-columns:minmax(0,1fr)}
  .hero h1{max-width:16ch}
  .hero__fig{max-width:640px;width:100%;justify-self:center}
  .navegador{transform:none}
  .chip--pieza{left:-8px}.chip--editor{right:-8px}
}
@media (max-width:767px){.ideas{grid-template-columns:minmax(0,1fr);gap:20px}}
@media (max-width:599px){
  .hero__cta{width:100%}.hero__cta .btn{flex:1 1 100%}
  .chip{padding:8px 10px 8px 8px;font-size:14px}
  .chip--editor{display:none}
  .chip--pieza{left:8px;bottom:-22px}
  .hero__fig{margin-bottom:22px}
}

/* ───────── Secciones ───────── */
.sec{padding:clamp(64px,9vw,120px) 0}
.sec--alt{background:var(--surface);border-block:1px solid var(--line)}
.sec__head{display:grid;gap:12px;max-width:640px;margin-bottom:clamp(32px,5vw,56px)}
.sec__head--centro{margin-inline:auto;text-align:center;justify-items:center}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.sec h2{font-size:clamp(28px,3.6vw,40px);letter-spacing:-.03em;font-weight:780}
.sec__sub{font-size:17px;color:var(--muted)}

/* Plantillas: rejilla de 4 columnas, todas las tarjetas iguales */
.plantillas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,24px);list-style:none;margin:0;padding:0}
.pl{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-s);transition:box-shadow .25s,transform .25s var(--ease)}
.sec--alt .pl{background:var(--surface-2)}
.pl:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.pl__img{position:relative;background:var(--line);border-bottom:1px solid var(--line)}
.pl__img{overflow:hidden}
.pl__img img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform .6s var(--ease)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.pl:hover .pl__img img{transform:scale(1.04)}}
.pl__cuerpo{display:flex;flex-direction:column;gap:8px;padding:18px 18px 16px;flex:1}
.pl__n{font:650 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
.pl h3{font-size:18px;letter-spacing:-.01em}
.pl p{font-size:15px;color:var(--muted)}
.pl__acc{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:auto;padding-top:8px}
.pl__acc .btn{padding:8px 14px;font-size:15px}
.pl__elegir{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:15px;font-weight:600}
.etiq{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font-size:14px;font-weight:650}
@media (max-width:1023px){.plantillas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.plantillas{grid-template-columns:minmax(0,1fr)}}

/* Cómo funciona */
.pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);counter-reset:paso}
.paso{position:relative;display:grid;gap:10px;align-content:start;padding-top:66px}
.paso::before{counter-increment:paso;content:counter(paso);position:absolute;left:0;top:0;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--accent);color:var(--accent-fg);font-weight:800;font-size:20px;box-shadow:0 8px 20px -10px var(--accent)}
.paso:not(:last-child)::after{content:"";position:absolute;left:62px;right:-8px;top:24px;height:2px;background:linear-gradient(90deg,var(--line-2),transparent)}
.paso h3{font-size:18px}
.paso p{color:var(--muted);font-size:15px}
@media (max-width:1023px){.pasos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}.paso:nth-child(2)::after{display:none}}
@media (max-width:599px){
  .pasos{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .paso{padding:0 0 0 66px;min-height:48px}
  .paso:not(:last-child)::after{display:block;left:23px;right:auto;top:58px;bottom:-22px;width:2px;height:auto;background:var(--line-2)}
}

/* Precio */
.precios{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(16px,2.4vw,28px);align-items:stretch;max-width:980px;margin:0 auto}
.precio{display:flex;flex-direction:column;gap:18px;padding:clamp(24px,3.4vw,40px);border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s)}
.sec--alt .precio{background:var(--surface-2)}
.precio--base{border:2px solid var(--accent);box-shadow:var(--shadow)}
.precio h3{font-size:20px}
.precio__cifra{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.precio__cifra b{font-size:clamp(44px,5vw,56px);font-weight:820;letter-spacing:-.04em;line-height:1}
.precio__cifra span{font-size:17px;color:var(--muted);font-weight:600}
.precio__cifra--desde b{font-size:clamp(34px,3.6vw,42px)}
.precio__cifra small{font-size:15px;color:var(--muted);font-weight:600}
.precio__iva{font-size:15px;color:var(--muted);margin-top:-10px}
.lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lista li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;font-size:15px}
.lista .i{width:20px;height:20px;margin-top:2px;color:var(--ok)}
.precio .btn{margin-top:auto}
.etiq--ejemplo{background:var(--warn-bg);color:var(--fg);border:1px dashed var(--warn)}
.precio__nota{max-width:980px;margin:22px auto 0;font-size:14px;color:var(--muted);text-align:center}
@media (max-width:767px){.precios{grid-template-columns:minmax(0,1fr)}}

/* Preguntas (acordeón de la pieza 06) */
.faq{max-width:800px;margin:0 auto;--cf-acc-bg:var(--surface);--cf-acc-line:var(--line);--cf-acc-accent:var(--accent);--cf-acc-muted:var(--muted)}
.faq summary{min-height:56px;font:650 16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:16px 20px}
.faq .cf-acc__panel p{padding:0 20px 20px;font-size:15px;line-height:1.65}

/* Banda final */
.final{padding:clamp(56px,8vw,96px) 0}
.final__in{display:grid;justify-items:center;text-align:center;gap:18px}
.final h2{font-size:clamp(28px,3.6vw,40px);color:#fff;letter-spacing:-.03em;font-weight:780;max-width:22ch}
.final p{color:var(--ink-muted);max-width:52ch;font-size:17px}
.final .hero__cta{justify-content:center}

/* Pie */
.pie{padding:40px 0 48px;border-top:1px solid var(--line);background:var(--bg);font-size:14px;color:var(--muted)}
.pie__in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:start}
.pie .marca__t b{font-size:15px}
.pie__legal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:flex-end}
.pie__legal li{display:inline-flex;align-items:center;min-height:32px}
.pie__nota{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;justify-content:space-between;padding-top:20px;border-top:1px solid var(--line)}
.pie__nota a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:767px){.pie__in{grid-template-columns:minmax(0,1fr)}.pie__legal{justify-content:flex-start}}

/* ───────── Alta de demostración (alta.html) ───────── */
.alta{padding:clamp(40px,7vw,88px) 0 clamp(56px,8vw,104px)}
.alta__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;max-width:1040px}
.alta__txt{display:grid;gap:16px;align-content:start}
.alta__txt h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.03em;font-weight:800}
.alta__txt p{color:var(--muted);font-size:17px}
.resumen{display:grid;gap:12px;margin-top:8px;padding:20px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.resumen .precio__cifra b{font-size:34px}
.alta__txt .precio__cifra{color:var(--fg)}
.tarjeta{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:clamp(22px,3.4vw,36px)}
.form{display:grid;gap:20px}
.campo{display:grid;gap:6px;min-width:0}
.campo label{font-weight:650;font-size:15px}
.campo .ayuda{font-size:14px;color:var(--muted)}
.campo input,.campo select{width:100%;min-height:48px;padding:10px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--fg);font:inherit;font-size:16px}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.campo input:focus-visible,.campo select:focus-visible{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.campo [aria-invalid="true"]{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}
.err{font-size:14px;color:var(--bad);font-weight:600;min-height:0}
.err:empty{display:none}
.form__nota{font-size:14px;color:var(--muted)}
.hecho{display:grid;gap:16px;justify-items:start}
.hecho__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--warn-bg);color:var(--warn);border:1px dashed var(--warn)}
.hecho__ic .i{width:26px;height:26px}
.hecho h2{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.02em;line-height:1.25}
.hecho h2:focus{outline:none}
.hecho h2:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:4px}
.hecho dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:0;font-size:15px;width:100%;padding:16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.hecho dt{color:var(--muted)}
.hecho dd{margin:0;overflow-wrap:anywhere;font-weight:600}
.hecho__acc{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:860px){.alta__in{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.hecho dl{grid-template-columns:minmax(0,1fr);gap:2px}.hecho dd{margin-bottom:8px}}

@media (prefers-reduced-motion:reduce){.pl,.btn{transition:none}.pl:hover{transform:none}}
/* Casilla de consentimiento del alta */
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;cursor:pointer}
.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--pri,#2d6a4f)}
.err--form{margin:0}
.final__correo{margin:18px 0 0;font-size:15px}.final__correo a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.editor-fig{margin:32px auto 0;max-width:880px}.editor-fig img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow)}.editor-fig figcaption{margin-top:10px;font-size:15px;color:var(--muted);text-align:center}
/* páginas de plantilla */
.tpl__volver{margin:0 0 18px;font-size:15px}.tpl__volver a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.tpl__figs{padding-bottom:12px}.tpl__figs .navegador{transform:none}
.movil{position:absolute;right:-8px;bottom:-24px;margin:0;width:26%;max-width:150px;border-radius:20px;border:5px solid #0d1530;background:#0d1530;box-shadow:var(--shadow-l);overflow:hidden}
.movil img{display:block;width:100%;height:auto;border-radius:14px}
.tpl__dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.tpl__sep{margin-top:28px}
.tpl__otras{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:12px 0 0;padding:0}.tpl__otras a{display:inline-block;padding:10px 0;color:inherit;text-decoration:underline;text-underline-offset:3px}
@media (max-width:899px){.tpl__dos{grid-template-columns:minmax(0,1fr)}.movil{right:6px;bottom:-16px;width:30%}}
/* recorrido de cada plantilla: capturas de sus secciones con el color de la propia plantilla */
.tpl__rec{--tpl:var(--accent);position:relative}
.tpl__rec .eyebrow{color:var(--tpl)}
.rec{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;margin-top:clamp(36px,6vw,72px)}
.rec--inv{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}.rec--inv .rec__fig{order:2}
.rec__fig{margin:0;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .35s ease,box-shadow .35s ease;border-top:4px solid var(--tpl)}
.rec__fig:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)}
.rec__fig .navegador__barra{background:var(--surface-2)}
.rec__fig img{display:block;width:100%;height:auto}
.rec__txt{position:relative;padding-left:0}
.rec__n{display:block;font-size:clamp(44px,7vw,72px);font-weight:800;line-height:1;color:var(--tpl);opacity:.9}
.rec__txt h3{margin:8px 0 6px;font-size:clamp(20px,2.6vw,26px)}
.rec__txt p{margin:0;color:var(--muted);font-size:17px;line-height:1.55}
.rec__txt::after{content:"";display:block;margin-top:18px;height:4px;width:0;border-radius:2px;background:var(--tpl);transition:width .8s .2s cubic-bezier(.2,.8,.2,1)}
.rec__txt.is-visible::after{width:64px}
@media (max-width:899px){.rec,.rec--inv{grid-template-columns:minmax(0,1fr)}.rec--inv .rec__fig{order:0}}
@media (prefers-reduced-motion:reduce){.rec__fig{transition:none}.rec__fig:hover{transform:none}.rec__txt::after{transition:none;width:64px}}
/* «Cómo funciona» con pasos con scroll (pieza 97) */
.pasos-scroll{--cf-ss-accent:var(--accent);--cf-ss-line:var(--line-2);--cf-ss-muted:var(--muted);--cf-ss-bg:var(--surface);--cf-ss-on:var(--accent-fg,#fff);max-width:1040px;margin:0 auto}
.pasos-scroll .cf-ss__txt h3{color:var(--fg)}
.pd__fig{margin:0;position:relative}.pd__fig img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow)}
.pd__fig--mosaico{display:grid;grid-template-columns:repeat(6,1fr);align-items:start;padding-bottom:6%}
.pd__fig--mosaico img{grid-row:1;box-shadow:var(--shadow-l)}
.pd__fig--mosaico img:nth-child(1){grid-column:1/5;transform:rotate(-3deg);z-index:1}
.pd__fig--mosaico img:nth-child(2){grid-column:2/6;margin-top:18%;transform:rotate(2deg);z-index:2}
.pd__fig--mosaico img:nth-child(3){grid-column:3/7;margin-top:36%;transform:rotate(-1deg);z-index:3}
.pd__fig--piezas{aspect-ratio:480/316;border-radius:14px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);box-shadow:var(--shadow)}
.pz{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0}
.pz:first-child{opacity:1}
.pz img{display:block;width:100%;height:auto;border:0;border-radius:0;box-shadow:none}
.pz__n{display:block;padding:10px 14px;font-weight:700;font-size:15px;background:var(--surface);border-top:1px solid var(--line)}
.is-active .pz{animation:pz-ciclo 10.5s infinite}
.is-active .pz:nth-child(2){animation-delay:3.5s}.is-active .pz:nth-child(3){animation-delay:7s}
@keyframes pz-ciclo{0%{opacity:0}4%,30%{opacity:1}34%,100%{opacity:0}}
.is-active .pd__sello{animation:pd-pop .5s both}
.pd__sello{animation:pd-pop .5s both}
.pd__sello{position:absolute;right:12px;top:12px;padding:6px 14px;border-radius:999px;background:var(--accent);color:var(--accent-fg,#fff);font-weight:700;font-size:14px}
@keyframes pd-pop{from{opacity:0;transform:scale(.7) translateY(8px)}}
@media (prefers-reduced-motion:reduce){.is-active .pz,.is-active .pd__sello{animation:none}.pz:not(:first-child){display:none}}

/* Alta: cómo contrata (profesional o particular) y resumen previo para consumidores */
.campo--opciones{border:0;padding:0;margin:0;display:grid;gap:10px;min-width:0}
.campo--opciones legend{font-weight:650;font-size:15px;padding:0;margin-bottom:6px}
.campo--consumidor{gap:12px}
.campo--consumidor[hidden]{display:none}
.resumen{border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;background:var(--surface-2,var(--surface));font-size:15px;line-height:1.5}
.resumen h3{margin:0 0 6px;font-size:15px}
.resumen ul{margin:0;padding-left:1.2em;display:grid;gap:4px}

/* Precio: dos planes, tabla comparativa y capas de temporada */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.precios--dos{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:820px}
.tabla-planes{max-width:820px;margin:clamp(24px,3vw,36px) auto 0}
.tabla-planes table{width:100%;border-collapse:collapse;font-size:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.tabla-planes th,.tabla-planes td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tabla-planes thead th{font-size:15px;background:var(--surface-2,var(--surface));text-align:center}
.tabla-planes thead th:first-child{text-align:left}
.tabla-planes thead small{font-size:14px;color:var(--muted);font-weight:600}
.tabla-planes tbody th{font-weight:600}
.tabla-planes td{text-align:center;width:24%;font-size:15px}
.tabla-planes tr:last-child>*{border-bottom:0}
.tabla-planes .si{color:var(--accent);font-weight:700}
.tabla-planes .no{color:var(--muted)}
.capas__cab{margin-top:clamp(36px,5vw,56px)}
.capas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,22px);max-width:980px;margin:0 auto}
.capa{margin:0;border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s)}
.capa img{display:block;width:100%;height:auto}
.capa figcaption{display:grid;gap:2px;padding:12px 14px;font-size:15px}
.capa figcaption span{color:var(--muted);font-size:14px}
@media (max-width:767px){.precios--dos{grid-template-columns:minmax(0,1fr)}.capas{grid-template-columns:minmax(0,1fr)}.tabla-planes th,.tabla-planes td{padding:10px}}

/* Tarjetas de plan: cabecera con icono, cifra grande, separador y lista */
.precio--plan{position:relative;gap:16px;padding:clamp(24px,3vw,34px);overflow:hidden}
.precio--plan::before{content:"";position:absolute;inset:0 0 auto 0;height:120px;background:linear-gradient(180deg,var(--accent-soft),transparent);opacity:.55;pointer-events:none}
.precio--base.precio--plan::before{opacity:1;height:150px}
.precio--plan>*{position:relative}
.precio__cab{display:flex;align-items:center;gap:14px}
.precio__ico{flex:none;width:46px;height:46px;padding:11px;border-radius:14px;background:var(--accent-soft);color:var(--accent);stroke-width:1.7}
.precio--base .precio__ico{background:var(--accent);color:var(--accent-fg)}
.precio__lema{font-size:15px;color:var(--muted);margin-top:2px}
.precio__cinta{position:absolute;top:0;right:0;padding:6px 14px 6px 16px;border-radius:0 0 0 14px;background:var(--accent);color:var(--accent-fg);font-size:14px;font-weight:700}
.precio--plan .precio__cifra{margin-top:6px;padding-top:18px;border-top:1px solid var(--line)}
.precio--plan .precio__iva{margin-top:-8px}
.precio--plan .lista{margin:6px 0 10px;gap:12px}
.precio--plan .lista .i{width:22px;height:22px;padding:4px;border-radius:99px;background:color-mix(in srgb,var(--ok) 16%,transparent);margin-top:0}
.precio--plan .lista li{font-size:16px;align-items:center}
@media (max-width:767px){.precio__cinta{position:static;align-self:flex-start;border-radius:99px;margin-bottom:-4px}}

/* Páginas legales (aviso legal, privacidad, cookies, condiciones) */
.legal{max-width:780px;padding-top:48px;padding-bottom:64px}
.legal h1{font-size:clamp(28px,4vw,38px);line-height:1.15;margin:0 0 20px}
.legal h2{font-size:22px;margin:36px 0 10px}
.legal h3{font-size:18px;margin:26px 0 8px}
.legal h4{font-size:16px;margin:20px 0 6px}
.legal p,.legal li{max-width:72ch}
.legal ul,.legal ol{padding-left:22px}
.legal li{margin:4px 0}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal blockquote{margin:16px 0;padding:8px 16px;border-left:3px solid var(--line-2);color:var(--muted)}
.legal__tabla{overflow-x:auto;margin:16px 0}
.legal table{border-collapse:collapse;width:100%;font-size:15px}
.legal th,.legal td{border:1px solid var(--line);padding:8px 12px;text-align:left;vertical-align:top}
.legal thead th{background:var(--surface-2)}
.legal tbody th{background:var(--surface-2);font-weight:600;width:32%}
.legal__img{display:inline-block;height:auto;max-width:100%;vertical-align:middle}