/* RM Arquitectos · web v5 · tokens del Design System v1.0 (agosto 2026). Los colores, tamaños, medidas de lectura y tiempos se declaran
   acá arriba, en :root, y el resto del archivo solo usa var(--...). Lo único que no es una variable es esto, y es todo:
   - el -999px que saca de pantalla el enlace "Saltar al contenido" y el 1px de solape de la onda de "Qué incluye";
   - los puntos de quiebre de @media (no admiten variables), las proporciones (aspect-ratio), el interlineado sin unidad, el espaciado entre letras en em
     (tracking de títulos, etiquetas y rótulos) y el 100svh del alto de pantalla del inicio;
   - el ángulo (rotate(-45deg)) de las marcas de la cota de pagos, las proporciones de columnas en fr/flex y los z-index de las capas.
   Escala tipográfica del DS: 10 / 13,5 / 15 / 19 / 32 / 56 / 76. Medidas de lectura (--rm-measure-*): ancho máximo de una línea de texto, en ch.
   El movimiento (intro, aparecer, trazar líneas) vive en css/movimiento.css; acá solo están sus tokens y las transiciones de botones.
   Las fuentes están alojadas en assets/fonts/ (nada se pide a Google): los @font-face de abajo llevan las rutas, los rangos Unicode del subconjunto latino
   y los ajustes de la fuente de respaldo (size-adjust y overrides), que son datos de las fuentes y no medidas de diseño. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-display:swap;src:url(../assets/fonts/archivo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/ibm-plex-mono-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/ibm-plex-mono-400-aprox.woff2) format("woff2");unicode-range:U+2248}   /* el signo ≈ de los pesos */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/ibm-plex-mono-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Fuentes de respaldo con las medidas de las reales: mientras Archivo o IBM Plex Mono se descargan, el texto ocupa el mismo lugar y no se corre nada al cambiar.
   Archivo se mide contra Arial (regular para 400 y 500, negrita para 600 y 700); IBM Plex Mono contra Courier New y sus equivalentes (todos de 0,6 em de ancho). */
@font-face{font-family:"Archivo Ajuste";font-weight:400 500;src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:98.1%;ascent-override:89.5%;descent-override:21.4%;line-gap-override:0%}
@font-face{font-family:"Archivo Ajuste";font-weight:600;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold");size-adjust:94.9%;ascent-override:92.5%;descent-override:22.1%;line-gap-override:0%}
@font-face{font-family:"Archivo Ajuste";font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold");size-adjust:98.1%;ascent-override:89.5%;descent-override:21.4%;line-gap-override:0%}
@font-face{font-family:"IBM Plex Mono Ajuste";font-weight:400 500;src:local("Courier New"),local("CourierNewPSMT"),local("Menlo"),local("Droid Sans Mono"),local("Roboto Mono");size-adjust:100%;ascent-override:102.5%;descent-override:27.5%;line-gap-override:0%}
:root{
  --rm-ink-900:#1C1B19; --rm-ink-700:#3A3835; --rm-ink-500:#6B6862; --rm-ink-400:#8C8880;
  --rm-ink-200:#D6D1C7; --rm-ink-100:#E8E4DC; --rm-ink-050:#F4F1EA; --rm-ink-000:#FFFFFF;
  --rm-accent-500:#A8492C;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --space-7:44px; --space-8:64px; --space-9:88px; --space-10:120px;
  --fs-2xs:10px; --fs-sm:13.5px; --fs-md:15px; --fs-lg:19px; --fs-2xl:32px; --fs-4xl:56px; --fs-5xl:76px;
  --font-text:"Archivo","Archivo Ajuste",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono","IBM Plex Mono Ajuste",ui-monospace,Consolas,monospace;
  --container:1180px;
  --rule:1px; --rule-strong:2px; --rule-accent:3px;
  /* CAPA 4 · MOVIMIENTO (sin colores nuevos). Escala de tiempo = números de Fibonacci x 40 ms, igual que la grilla de 4 px pero en el tiempo. */
  --rm-u:40ms;
  --rm-dur-1:calc(var(--rm-u)*3);   /* 120 ms · hover y foco: cambio de tono */
  --rm-dur-2:calc(var(--rm-u)*5);   /* 200 ms · subrayado trazado */
  --rm-dur-3:calc(var(--rm-u)*8);   /* 320 ms · fundidos chicos */
  --rm-dur-4:calc(var(--rm-u)*13);  /* 520 ms · bloques que entran */
  --rm-dur-5:calc(var(--rm-u)*21);  /* 840 ms · trazos largos */
  --rm-ease-out:cubic-bezier(.2,0,0,1);       /* entrar, asentarse, hover */
  --rm-ease-trazo:cubic-bezier(.65,0,.35,1);  /* líneas que se dibujan */
  --rm-stagger:calc(var(--rm-u)*2); /* 80 ms entre hermanos */
  /* CAPA 5 · MOTIVOS GRÁFICOS (decorativos; todos derivados de la escala neutra, ningún color nuevo) */
  --rm-field-1:var(--rm-ink-100);        /* campo claro: Bloque sobre Hueso */
  --rm-field-2:var(--rm-ink-200);        /* campo medio: Línea (máx. 1 por composición) */
  --rm-field-3:var(--rm-ink-900);        /* campo oscuro: Grafito (máx. 1 por composición, en una esquina) */
  --rm-field-on-dark:var(--rm-ink-700);  /* campo sobre Grafito (pie): Tinta */
  --rm-incision:var(--rm-ink-050);       /* incisión = color del fondo que deja ver */
  /* ENCABEZADO E INTRO */
  --rm-header-h:var(--space-8);                          /* 64 px */
  --rm-mark-w-intro:min(60vw,calc(var(--space-10)*4));   /* hasta 480 px */
  --rm-mark-w-head:var(--space-8);                       /* 64 px; 88 px desde 720 px de pantalla */
  --rm-wave-h:var(--space-7);                            /* 44 px: borde ondulado del telón de la intro */
  /* MEDIDAS DE COMPOSICIÓN (dibujos decorativos y columnas). Con nombre y acá, no sueltas en las reglas: se cambian en un solo lugar. */
  --rm-text-w-hero:680px;                                /* ancho máximo de la columna de texto del inicio: el titular de 56 px (la línea más larga mide 641 px) entra en dos líneas */
  --rm-motif-w-hero:min(55%,760px);                      /* dibujo del inicio, escritorio */
  --rm-motif-h-hero-m:240px;                             /* dibujo del inicio, celular y tablet (debajo del texto) */
  --rm-motif-w-estudio:min(42%,520px);                   /* dibujo de "Estudio", escritorio */
  --rm-motif-h-estudio-m:200px;                          /* dibujo de "Estudio", celular y tablet */
  --rm-motif-w-pie:min(60%,640px);                       /* dibujo del pie, escritorio */
  --rm-portrait-w:420px;                                 /* ancho máximo del retrato */
  --rm-hero-img-w:560px;                                 /* ancho máximo de la imagen principal cuando va debajo del texto (menos de 1200 px de pantalla) */
  --rm-hero-h-max:760px;                                 /* alto máximo del inicio en pantallas grandes */
  /* MEDIDAS DE LECTURA (ancho máximo de una línea de texto, en ch: cuántos caracteres entran) */
  --rm-measure-title:26ch;                               /* títulos de sección */
  --rm-measure-narrow:44ch;                              /* bajada de cada fase de "Cómo trabajamos" */
  --rm-measure:60ch;                                     /* texto corrido: bajada, párrafos, aviso de precio */
  --rm-measure-wide:70ch;                                /* notas y textos chicos */
}
@media(min-width:720px){:root{--rm-mark-w-head:var(--space-9)}}
*{box-sizing:border-box;margin:0;border-radius:0;box-shadow:none}
html{scroll-padding-top:var(--space-9)}
body{background:var(--rm-ink-050);color:var(--rm-ink-900);font-family:var(--font-text);font-size:var(--fs-md);line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-4)}
@media(min-width:760px){.container{padding:0 var(--space-6)}}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-999px;top:0;background:var(--rm-ink-050);color:var(--rm-ink-900);padding:var(--space-2) var(--space-4);z-index:80}
.skip:focus{left:0}
:focus-visible{outline:var(--rule-accent) solid var(--rm-ink-900);outline-offset:var(--space-1)}
.site-header :focus-visible,.site-footer :focus-visible,.intro :focus-visible,.wa-flotante:focus-visible{outline-color:var(--rm-ink-050)}

/* Tipografía */
h1,h2,h3{font-weight:600;line-height:1.1;letter-spacing:-0.01em}
h1{font-size:var(--fs-2xl);font-weight:700;letter-spacing:-0.02em}
h2{font-size:var(--fs-2xl);max-width:var(--rm-measure-title);margin-bottom:var(--space-4)}
h3{font-size:var(--fs-lg);margin-bottom:var(--space-2)}
@media(min-width:760px){h1{font-size:var(--fs-4xl)}}
h1,h2{text-wrap:balance}
.lead,.prose{text-wrap:pretty}
.lead{font-size:var(--fs-lg);color:var(--rm-ink-700);max-width:var(--rm-measure);margin-top:var(--space-4)}
.label{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--rm-ink-500);margin-bottom:var(--space-3)}
.small,.note{font-size:var(--fs-sm);color:var(--rm-ink-500);margin-top:var(--space-3);max-width:var(--rm-measure-wide)}
.section--alt .small,.section--alt .label,.section--alt .note{color:var(--rm-ink-700)}
/* Cifras: IBM Plex Mono con cifras tabulares (regla 05 del DS). .num = cifra dentro de un texto. */
.data,.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
/* Una cifra con su signo ("100 %", "30 %") nunca se parte entre dos líneas */
.num{white-space:nowrap}
/* Plex Mono se carga en 400 y 500: dentro de textos en negrita las cifras usan 500 (así el navegador no inventa una negrita borrosa) */
.rm-btn .num,h1 .num,h2 .num,h3 .num,strong .num{font-weight:500}
.data--lg{font-size:var(--fs-lg);font-weight:500}
.data--xl{font-size:var(--fs-2xl);line-height:1.1;font-weight:500}
.ars{font-size:var(--fs-md);color:var(--rm-ink-700);margin-top:var(--space-1)}
.price-r{text-align:right}
.mt{margin-top:var(--space-5)}
.prose p+p{margin-top:var(--space-4)}
.prose{max-width:var(--rm-measure);font-size:var(--fs-lg);color:var(--rm-ink-700)}

/* Botones: 4 variantes del sistema (principal/accent, secondary, ghost y base). --sm es solo tamaño compacto, no una variante. */
.rm-btn{display:inline-block;text-align:center;min-height:var(--space-7);font-family:var(--font-text);font-weight:600;font-size:var(--fs-md);text-decoration:none;cursor:pointer;
  padding:var(--space-3) var(--space-5);border:var(--rule-strong) solid var(--rm-ink-900);background:var(--rm-ink-900);color:var(--rm-ink-050);line-height:1.2}
.rm-btn--secondary{background:transparent;color:var(--rm-ink-900)}
.rm-btn--accent{background:var(--rm-accent-500);border-color:var(--rm-accent-500);color:var(--rm-ink-000)}
.rm-btn--ghost{background:transparent;border-color:transparent;color:var(--rm-ink-900);text-decoration:underline;text-underline-offset:var(--space-1);padding-left:var(--space-2);padding-right:var(--space-2)}
/* Cambio de tono (la "luz" del sistema): con puntero real al pasar el mouse y, para teclado, al enfocar. Nunca hover pegado en táctiles. */
@media(hover:hover){
  .rm-btn:hover{background:var(--rm-ink-700);border-color:var(--rm-ink-700)}
  .rm-btn--secondary:hover{background:var(--rm-ink-100);border-color:var(--rm-ink-900);color:var(--rm-ink-900)}
  .rm-btn--accent:hover{background:var(--rm-ink-900);border-color:var(--rm-ink-900)}
  .rm-btn--ghost:hover{background:transparent;border-color:transparent;color:var(--rm-accent-500)}
  .site-header .rm-btn--accent:hover{background:var(--rm-ink-050);border-color:var(--rm-ink-050);color:var(--rm-ink-900)}
}
.rm-btn:focus-visible{background:var(--rm-ink-700);border-color:var(--rm-ink-700)}
.rm-btn--secondary:focus-visible{background:var(--rm-ink-100);border-color:var(--rm-ink-900);color:var(--rm-ink-900)}
.rm-btn--accent:focus-visible{background:var(--rm-ink-900);border-color:var(--rm-ink-900)}
.rm-btn--ghost:focus-visible{background:transparent;border-color:transparent;color:var(--rm-accent-500)}
.site-header .rm-btn--accent:focus-visible{background:var(--rm-ink-050);border-color:var(--rm-ink-050);color:var(--rm-ink-900)}
.rm-btn--sm{padding:var(--space-3) var(--space-4);font-size:var(--fs-sm);white-space:nowrap}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-6)}

/* Encabezado: banda Grafito sólida, sin desenfoque ni sombra. Monograma oficial en Hueso (mínimo 48 px, regla 06 del DS). */
.site-header{position:sticky;top:0;z-index:50;height:var(--rm-header-h);background:var(--rm-ink-900);color:var(--rm-ink-050)}
.bar{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}
.brand{display:flex;align-items:center;gap:var(--space-3);min-height:var(--space-7);text-decoration:none;color:var(--rm-ink-050)}
.marca{width:var(--rm-mark-w-head);height:auto;flex:none;color:var(--rm-ink-050)}
.marca-sub{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.2em;color:var(--rm-ink-200);padding:var(--space-1) 0 var(--space-1) var(--space-3);border-left:var(--rule-accent) solid var(--rm-accent-500)}
#nav{display:none;gap:var(--space-5)}
#nav a{text-decoration:none;font-size:var(--fs-sm);color:var(--rm-ink-200)}
@media(hover:hover){#nav a:hover{color:var(--rm-ink-050);text-decoration:underline}}
@media(min-width:1200px){#nav{display:flex}}
/* Botón principal del encabezado: texto corto en celular (.cta-c) y largo desde 760 px (.cta-l). */
.cta-header{display:inline-block}
.cta-header .cta-l{display:none}
@media(min-width:760px){.cta-header .cta-l{display:inline}.cta-header .cta-c{display:none}}
@media(max-width:759px){.bar{gap:var(--space-3)}.cta-header{padding-left:var(--space-3);padding-right:var(--space-3)}}
/* El botón del encabezado y el de WhatsApp nacen ocultos (js/pre.js) y aparecen sin transición cuando ningún botón principal tiene al menos la mitad
   de su alto a la vista (js/movimiento.js): un solo botón principal por pantalla y ningún tramo sin botón. Sin JavaScript se ve siempre.
   El botón del encabezado oculto RESERVA SU LUGAR (visibility, no display): así el menú no se corre de costado cada vez que aparece o desaparece.
   Reservar el lugar también lo saca del teclado y de los lectores de pantalla. El de WhatsApp es flotante: no ocupa lugar en el encabezado. */
html.rm-cta-wait:not(.rm-cta-on) .cta-header{visibility:hidden}
html.rm-cta-wait:not(.rm-cta-on) .wa-flotante{display:none}
/* En pantallas muy angostas el nombre y el botón no entran juntos: no hay lugar para reservar. El nombre se ve en la primera pantalla y el botón
   lo reemplaza cuando hace falta; sin JavaScript a ese ancho no se muestra (alcanza el botón del inicio). */
@media(max-width:359px){
  html.rm-cta-wait:not(.rm-cta-on) .cta-header,html:not(.rm-cta-wait) .cta-header{display:none}
  html.rm-cta-on .marca-sub{display:none}
}

/* Entrada: capa que se ve solo con movimiento permitido (css/movimiento.css la activa). Sin eso no existe. */
.intro{display:none}

/* Secciones */
.hero{position:relative;overflow:hidden;border-bottom:var(--rule-strong) solid var(--rm-ink-900);display:flex;flex-direction:column}
@media(min-width:960px){.hero{min-height:min(calc(100svh - var(--rm-header-h)),var(--rm-hero-h-max))}}
.hero-grid{position:relative;flex:1;width:100%;display:grid;gap:var(--space-7);align-items:center;padding-top:var(--space-8);padding-bottom:var(--space-7)}
/* Con la imagen principal activada, la columna del texto conserva su ancho completo (--rm-text-w-hero) para que el titular siga en dos líneas;
   para eso las dos columnas empiezan a 1200 px. Más angosto, la imagen va debajo del texto. */
@media(min-width:1200px){html.img-hero .hero-grid{grid-template-columns:minmax(0,var(--rm-text-w-hero)) minmax(0,1fr);gap:var(--space-7)}}
@media(max-width:959px){.hero-grid{order:1;padding-top:var(--space-7);padding-bottom:var(--space-5)}}
.hero-texto{max-width:var(--rm-text-w-hero)}
.hero-regla{width:var(--space-10);height:var(--rule-accent);background:var(--rm-accent-500);margin-bottom:var(--space-4);transform-origin:0 50%}
.hero .label{text-wrap:balance}   /* la etiqueta se reparte en dos líneas parejas: no queda una palabra sola en la segunda */
.hero .note{font-family:var(--font-mono);letter-spacing:.04em;color:var(--rm-ink-700)}
.hero .actions{margin-top:var(--space-6)}
.hero .actions .rm-btn--ghost{margin-left:calc((var(--space-2) + var(--rule-strong))*-1)}   /* el texto del enlace queda alineado con el borde del botón */
/* Motivo gráfico del hero (Capa 5): anclado a los bordes derecho e inferior, nunca detrás del texto */
.hero-motivo{position:absolute;right:0;bottom:0;width:var(--rm-motif-w-hero);height:100%;pointer-events:none}
.hero-motivo svg{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:959px){.hero-motivo{position:relative;order:2;width:100%;height:var(--rm-motif-h-hero-m)}}
.specband{position:relative;list-style:none;padding:0;display:flex;border-top:var(--rule-strong) solid var(--rm-ink-900);margin:0;background:var(--rm-ink-050)}
@media(max-width:959px){.specband{order:3}}
.specband li{flex:1;text-align:center;padding:var(--space-3) var(--space-2);font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.08em;border-left:var(--rule) solid var(--rm-ink-200);font-variant-numeric:tabular-nums}
.specband li:first-child{border-left:0}
.section{position:relative;padding:var(--space-9) 0;border-bottom:var(--rule) solid var(--rm-ink-200)}
.section--alt{background:var(--rm-ink-100)}
@media(max-width:759px){.section{padding:var(--space-8) 0}}
/* Transición de sección (Capa 5, una sola vez): el borde superior de "Qué incluye" es una onda que baja hasta el cierre recto */
.onda{position:absolute;left:0;top:calc(var(--rm-wave-h)*-1 + 1px);width:100%;height:var(--rm-wave-h);fill:var(--rm-ink-100);pointer-events:none}
#valor{border-bottom:0}

.razones{list-style:none;padding:0;margin-top:var(--space-7);display:grid;gap:0;counter-reset:r;border-top:var(--rule-strong) solid var(--rm-ink-900)}
.razones li{counter-increment:r;display:grid;grid-template-columns:var(--space-8) 1fr;gap:var(--space-3);padding:var(--space-5) 0;border-bottom:var(--rule) solid var(--rm-ink-200)}
.razones li::before{content:counter(r,decimal-leading-zero);font-family:var(--font-mono);color:var(--rm-ink-500)}
.razones strong{display:block;font-size:var(--fs-lg);font-weight:600}
.razones span{color:var(--rm-ink-700);grid-column:2}
@media(min-width:900px){.razones li{grid-template-columns:var(--space-8) 1fr 1.4fr}.razones strong{margin:0}.razones span{grid-column:auto}}

.grid-precios{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-7)}
@media(min-width:900px){.grid-precios{flex-direction:row;align-items:stretch}.grid-precios>.card{flex:1 1 0;min-width:0}.grid-precios>.card--main{flex:1.25 1 0}}
.card{background:var(--rm-ink-050);border:var(--rule) solid var(--rm-ink-200);padding:var(--space-5)}
.card--main{border:var(--rule-strong) solid var(--rm-ink-900)}
.card--launch{border-top:var(--rule-accent) solid var(--rm-accent-500)}
.card:not(.card--main):not(.card--launch)>.data--xl{margin-top:var(--space-4)}   /* "Gratis" no queda pegado al texto de arriba */
.lista-ref{margin:var(--space-4) 0}
.lista-ref .label{margin-bottom:var(--space-2)}
.fila-ref{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);border-top:var(--rule) solid var(--rm-ink-200);padding:var(--space-2) 0;font-size:var(--fs-sm);color:var(--rm-ink-700);white-space:nowrap}
.fila-ref:last-child{border-bottom:var(--rule) solid var(--rm-ink-200)}
.fila{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);border-top:var(--rule) solid var(--rm-ink-200);padding:var(--space-3) 0}
.fila h3{margin:0;padding-top:var(--space-1)}
/* Packs adicionales (content/packs.js): debajo del pack principal, que conserva el borde fuerte y el lugar de honor. Mismos tokens, borde fino, sin acento.
   Si no hay ninguno visible el bloque queda vacío y no ocupa lugar. */
.packs-extra{margin-top:var(--space-7)}
.packs-extra:empty{display:none}
.packs-extra>.label{margin-bottom:var(--space-3)}
.grid-packs{display:grid;gap:var(--space-4)}
@media(min-width:900px){.grid-packs{grid-template-columns:1fr 1fr}}
.card--pack h3{margin-bottom:var(--space-2)}
.pack-detalle{color:var(--rm-ink-700);max-width:var(--rm-measure);margin-bottom:var(--space-4)}
.fila-n{font-size:var(--fs-lg);font-weight:600;line-height:1.1;letter-spacing:-0.01em;padding-top:var(--space-1)}
.pack-inc{margin:var(--space-4) 0 0}
.pack-inc+.checks{margin-top:var(--space-2)}
.checks,.plain{list-style:none;padding:0;margin-top:var(--space-4)}
.checks li,.plain li{padding:var(--space-2) 0 var(--space-2) var(--space-5);position:relative;border-top:var(--rule) solid var(--rm-ink-200);font-size:var(--fs-sm)}
.checks li::before,.plain li::before{content:"+";position:absolute;left:0;font-family:var(--font-mono);color:var(--rm-ink-900)}
.plain li::before{content:"–";color:var(--rm-ink-700)}
.grid-two{display:grid;gap:var(--space-6);margin-top:var(--space-7)}
@media(min-width:900px){.grid-two{grid-template-columns:1fr 1fr;gap:var(--space-8)}}
html:not(.img-moodboard) #incluye .grid-two,html:not(.img-franco) #estudio .grid-two{grid-template-columns:1fr}
#estudio .grid-two,#presupuesto .grid-two{margin-top:0}
#presupuesto .grid-two{align-items:start}

/* Cómo trabajamos: tres fases; los pasos se numeran de corrido (01 a 06). La fase 3 es opcional y se muestra sin pasos. */
.fases{list-style:none;padding:0;margin-top:var(--space-7);border-top:var(--rule-strong) solid var(--rm-ink-900);counter-reset:p}
.fase{display:grid;gap:var(--space-5);padding:var(--space-6) 0;border-bottom:var(--rule) solid var(--rm-ink-200)}
@media(min-width:900px){.fase{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-8)}}
.fase-cab h3{margin-bottom:var(--space-3)}
.fase-cab p:not(.label):not(.fase-tag){color:var(--rm-ink-700);max-width:var(--rm-measure-narrow)}
.fase-tag{display:inline-block;margin-top:var(--space-4);padding:var(--space-1) var(--space-3);border:var(--rule) solid var(--rm-ink-700);font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.12em;color:var(--rm-ink-700)}
.fase-pasos{list-style:none;padding:0;margin:0}
.fase-pasos li{counter-increment:p;display:grid;grid-template-columns:var(--space-8) 1fr;gap:var(--space-3);padding:var(--space-4) 0;border-top:var(--rule) solid var(--rm-ink-400)}
.fase-pasos li:first-child{border-top:0;padding-top:0}
.fase-pasos li::before{content:counter(p,decimal-leading-zero);font-family:var(--font-mono);color:var(--rm-ink-700)}
.fase-pasos strong{display:block;font-size:var(--fs-lg);font-weight:600}
.fase-pasos li>div>span{display:block;margin-top:var(--space-1);color:var(--rm-ink-700);font-size:var(--fs-sm)}
.fase--opcional{border-bottom:0}

.proximamente{border:var(--rule) solid var(--rm-ink-200);background:var(--rm-ink-050);padding:var(--space-7) var(--space-5);color:var(--rm-ink-700);max-width:var(--rm-measure-wide);font-size:var(--fs-lg)}
.proyectos{display:grid;gap:var(--space-5);margin-top:var(--space-6)}
@media(min-width:760px){.proyectos{grid-template-columns:1fr 1fr}}
.proyecto .par{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1)}
.proyecto figure{position:relative}
.proyecto figcaption{position:absolute;left:0;top:0;background:var(--rm-ink-900);color:var(--rm-ink-050);font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.12em;padding:var(--space-1) var(--space-2)}
.proyecto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.proyecto .meta{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--fs-sm);border-top:var(--rule-strong) solid var(--rm-ink-900);margin-top:var(--space-3);padding-top:var(--space-2);text-transform:uppercase}
.proyecto blockquote{border-left:var(--rule-accent) solid var(--rm-accent-500);padding-left:var(--space-4);margin-top:var(--space-3)}

/* Marcos de imagen: rectos, de proporción fija, se ven completos aun vacíos (la guía "Cargá una imagen" solo aparece en tu compu) */
.slot{display:none;position:relative;background:var(--rm-ink-100);border:var(--rule) solid var(--rm-ink-200);overflow:hidden}
.img-hero .slot[data-slot="hero"],.img-moodboard .slot[data-slot="moodboard"],.img-franco .slot[data-slot="franco"]{display:block}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.slot img.rm-in{opacity:1}
.slot--hero{aspect-ratio:4/3;max-width:var(--rm-hero-img-w);border:var(--rule-strong) solid var(--rm-ink-900)}
.slot--wide{aspect-ratio:3/2}
.slot--retrato{aspect-ratio:4/5;max-width:var(--rm-portrait-w);width:100%}
@media(min-width:1200px){.slot--hero{aspect-ratio:1/1;max-width:none}}
.slot--vacio::before,.slot--vacio::after{content:"";position:absolute;inset:var(--space-4);border:var(--rule) solid var(--rm-ink-200)}
.slot--vacio::after{inset:0;border:0;border-top:var(--rule-accent) solid var(--rm-accent-500);bottom:auto;height:0}
.slot-guia{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);text-align:center;padding:var(--space-6);z-index:1}
.slot-et{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.12em;color:var(--rm-ink-700)}
.slot-txt{font-size:var(--fs-lg);font-weight:500;color:var(--rm-ink-900)}
.slot-med{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.04em;color:var(--rm-ink-700);line-height:1.6}
.grid-two--center{align-items:center}
.checks--lg li{font-size:var(--fs-md)}
.checks--lg{margin-top:var(--space-6)}
/* Estudio (Capa 5): el motivo queda anclado a los bordes derecho e inferior de la sección; el retrato (marco recto) se apoya encima.
   Sin retrato queda solo el motivo. En pantallas angostas va debajo del texto, nunca detrás. */
#estudio{overflow:hidden}
.estudio-motivo{position:absolute;right:0;bottom:0;width:var(--rm-motif-w-estudio);height:100%;pointer-events:none}
.estudio-motivo svg{position:absolute;inset:0;width:100%;height:100%}
#estudio>.container{position:relative;z-index:1}
@media(max-width:959px){
  #estudio{padding-bottom:0;display:flex;flex-direction:column}
  #estudio>.container{width:100%}
  .estudio-motivo{position:relative;width:100%;height:var(--rm-motif-h-estudio-m);margin-top:var(--space-6)}
}
/* Cota de pagos: 40 / 30 / 30 dibujado como cota de plano (línea fina, marcas oblicuas, tramos proporcionales). Es decorativo (aria-hidden): el texto equivalente está debajo. */
.cota-bloque{margin-top:var(--space-7)}
.cota-bloque .label{margin-bottom:0}
.cota{margin-top:var(--space-4)}
.cota-et{display:flex}
.cota-et>span{display:block;min-width:0;text-align:center;padding:0 var(--space-2) var(--space-2)}
.cota-et .data{display:block}
.cota-et .label{display:block;margin:var(--space-1) 0 0}
.cota-eje{position:relative;height:var(--space-4)}
.cota-linea{position:absolute;left:0;right:0;top:50%;height:var(--rule);background:var(--rm-ink-900)}
.cota-marca{position:absolute;top:50%;left:0;width:var(--space-4);height:var(--rule);background:var(--rm-ink-900);transform:translate(-50%,-50%) rotate(-45deg)}
.aviso-precio{margin-top:var(--space-5);padding-left:var(--space-4);border-left:var(--rule-accent) solid var(--rm-accent-500);font-size:var(--fs-lg);font-weight:500;max-width:var(--rm-measure)}
.desde{margin:0;text-align:right}
.pedido .actions{margin-top:var(--space-5)}
.pedido .actions .rm-btn--ghost{margin-left:calc((var(--space-2) + var(--rule-strong))*-1)}   /* el texto del enlace de mail queda alineado con el borde del botón de WhatsApp */
.pedido p{color:var(--rm-ink-700)}

/* Motivos gráficos (Capa 5): campos de un solo tono, sin trazo, sombra ni degradado. Solo tokens. Siempre decorativos (aria-hidden). */
.m-c1{fill:var(--rm-field-1)}
.m-c2{fill:var(--rm-field-2)}
.m-c3{fill:var(--rm-field-3)}
.m-cd{fill:var(--rm-field-on-dark)}
.m-inc{fill:var(--rm-incision)}
.m-inc-pie{fill:var(--rm-ink-200)}
.draw{stroke:var(--rm-ink-000);stroke-dasharray:1;stroke-dashoffset:0}   /* blanco = parte visible de la máscara que dibuja la incisión */
.sin-motivos .hero-motivo,.sin-motivos .onda,.sin-motivos .estudio-motivo,.sin-motivos .pie-motivo{display:none}   /* config.motivos: false */

.error-contenido{background:var(--rm-ink-900);color:var(--rm-ink-050);padding:var(--space-4);font-family:var(--font-mono);font-size:var(--fs-sm);border-bottom:var(--rule-accent) solid var(--rm-accent-500)}

/* Pie Grafito con el eco de la intro: un campo Tinta cortado por los bordes derecho e inferior */
.site-footer{position:relative;overflow:hidden;padding:var(--space-8) 0;background:var(--rm-ink-900);color:var(--rm-ink-200)}
.pie-motivo{position:absolute;right:0;bottom:0;width:var(--rm-motif-w-pie);height:100%;pointer-events:none}
.pie-motivo svg{position:absolute;inset:0;width:100%;height:100%}
.pie-grid{position:relative}
@media(max-width:959px){   /* en pantallas angostas el motivo va debajo del texto, nunca detrás */
  .site-footer{display:flex;flex-direction:column;padding-bottom:0}
  .pie-grid{width:100%}
  .pie-motivo{position:relative;order:2;width:100%;height:var(--space-10);margin-top:var(--space-6)}
}
.pie-lockup{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5)}
.site-footer .marca{color:var(--rm-ink-050)}
.site-footer .small{color:var(--rm-ink-200)}
.site-footer a{color:var(--rm-ink-050)}

/* Botón flotante de WhatsApp: rectangular, sin el verde de WhatsApp (no está en el Design System), sin pulso ni animación. Solo existe con número en config.js. */
.wa-flotante{position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:30;display:inline-block;min-height:var(--space-7);padding:var(--space-3) var(--space-4);background:var(--rm-ink-900);color:var(--rm-ink-050);border:var(--rule-strong) solid var(--rm-ink-050);font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.12em;text-decoration:none}
@media(hover:hover){.wa-flotante:hover{background:var(--rm-ink-700)}}

@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .rm-btn{transition:background-color var(--rm-dur-1) var(--rm-ease-out),border-color var(--rm-dur-1) var(--rm-ease-out),color var(--rm-dur-1) var(--rm-ease-out)}
}
@media print{.site-header,.actions,.intro,.wa-flotante{display:none}}