/* Títulos en Syne (Carlos, 2 oct 2026: «más ancha», «más original»). Licencia OFL en fonts/syne/OFL.txt */
@font-face { font-family: 'Syne'; src: url(fonts/syne/syne-latin.woff2) format('woff2'); font-weight: 400 800; font-display: swap; 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: 'Syne'; src: url(fonts/syne/syne-latin-ext.woff2) format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lora'; font-style: italic; src: url(fonts/lora-400-italic-latin.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Lora'; font-style: italic; src: url(fonts/lora-400-italic-latin-ext.woff2) format('woff2'); font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Space Mono'; src: url(fonts/space-mono-400-latin.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url(fonts/space-mono-400-latin-ext.woff2) format('woff2'); font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; }

/* Tres partes (1 oct 2026): portada con tres estilos en una imagen partida en
   tres, estilos en tarjetas con visor, y presupuesto con la calculadora. */
:root {
  --night: #12100e;        /* casi negro, cálido: nunca negro puro */
  --wall: #e8e2d7;          /* yeso */
  --ink: #16130f;
  --mute: #6d665b;
  --line: rgba(22, 19, 15, .18);
  --pigment: #eb0c77;       /* el rosa de los destacados de Instagram: el único color */
  --display: 'Syne', 'Arial Black', sans-serif;
  /* Textos: Satoshi (Carlos, 1 oct 2026), en vez de Space Mono, que se leía «de máquina». */
  --mono: 'Satoshi', system-ui, sans-serif;
  /* Movimiento (Apple + Emil Kowalski, 2 oct 2026): curvas propias, nunca ease-in */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--night); color: var(--ink); font: 16px/1.4 var(--mono); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hp { position: absolute; left: -9999px; }
html { scroll-behavior: smooth; }

/* Portada: una imagen partida en tres estilos */
.hero { position: relative; isolation: isolate; height: 100svh; min-height: 560px; color: #f2efe9; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(20px, 3vw, 44px); overflow: hidden; }
.tri { position: absolute; inset: 0; z-index: -2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--night); }
.tri-p { position: relative; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.tri-p img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out), filter .4s ease; filter: saturate(.9); }
@media (hover: hover) and (pointer: fine) { .tri-p:hover img { transform: scale(1.04); filter: saturate(1.05); } }
.tri-p span { position: absolute; left: 50%; top: clamp(84px, 13vh, 130px); transform: translateX(-50%); padding: 6px 16px; border: 1px solid rgba(242,239,233,.8); border-radius: 99px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #fff; white-space: nowrap; background: rgba(18,16,14,.35); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(18,16,14,.9) 0%, rgba(18,16,14,.3) 22%, rgba(18,16,14,.05) 45%, rgba(18,16,14,.9) 100%); }
.hero-text { pointer-events: none; }
.hero-text .btn { pointer-events: auto; display: inline-block; margin-top: 22px; text-decoration: none; }
.brand { display: flex; align-items: flex-end; gap: 10px; margin: 0; pointer-events: none; filter: drop-shadow(0 2px 6px rgba(18,16,14,.75)); }
.mark { display: block; width: 110px; aspect-ratio: 5 / 1; background: currentColor; -webkit-mask: url(img/snap-mark.png) center / contain no-repeat; mask: url(img/snap-mark.png) center / contain no-repeat; }
.arte-word { width: 36px; height: 9px; overflow: visible; }
h1 { font: 400 clamp(52px, 7.4vw, 128px)/.88 var(--display); letter-spacing: .01em; margin: 0 0 14px; max-width: 12ch; text-wrap: balance; }
.sub { margin: 0; font-size: 14px; letter-spacing: .04em; opacity: .9; }

main h2 { font: 400 clamp(44px, 6vw, 88px)/.9 var(--display); margin: 0 0 clamp(20px, 3vw, 36px); letter-spacing: .01em; }

/* Estilos, dentro del presupuesto */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.card { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--night); color: #f2efe9; cursor: zoom-in; text-align: left; overflow: hidden; }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .7s var(--ease-out); }
.card:focus-visible img { transform: scale(1.05); }
@media (hover: hover) and (pointer: fine) { .card:hover img { transform: scale(1.05); } }
.card:focus-visible { outline: 2px solid var(--pigment); outline-offset: 2px; }
.c-txt { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 16px 16px; }
.c-txt b { font: 400 26px/1 var(--display); letter-spacing: .02em; }
.c-txt small { grid-column: 1; font-size: 12px; color: #b5ad9f; }
.c-txt em { grid-column: 2; grid-row: 1 / 3; align-self: center; font: 400 24px/1 var(--display); color: var(--pigment); font-style: normal; white-space: nowrap; }

/* Presupuesto */
.presu { background: var(--wall); padding: clamp(48px, 7vw, 96px) clamp(16px, 4vw, 56px); }
.quote { max-width: 760px; display: flex; flex-direction: column; gap: 24px; }
.calc { border: 0; margin: 0; padding: 0 0 24px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 14px 24px; }
.chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 8px 15px; border: 1px solid var(--ink); border-radius: 99px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; transition: background .2s, color .2s; }
.chip input:checked + span { background: var(--ink); color: var(--wall); }
.chip input:focus-visible + span { outline: 2px solid var(--pigment); outline-offset: 2px; }
.m2 { display: flex; align-items: baseline; gap: 8px; }
.m2 span { font-size: 13px; letter-spacing: .1em; order: 2; }
.m2 input { width: 3.2ch; font: 400 clamp(56px, 7vh, 84px)/1 var(--display); background: transparent; border: 0; border-bottom: 2px solid var(--ink); padding: 0; text-align: center; -moz-appearance: textfield; }
.m2 input::-webkit-inner-spin-button { opacity: 1; height: 40px; }
.m2 input:focus { outline: none; border-color: var(--pigment); }
.price { margin: 0; justify-self: end; font: 400 clamp(56px, 7vh, 84px)/1 var(--display); color: var(--pigment); white-space: nowrap; }
.price span { font: 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); vertical-align: middle; }
.fine { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--mute); letter-spacing: .06em; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.fields label { display: grid; gap: 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.fields input { width: 100%; min-width: 0; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 8px 0; border-radius: 0; }
.fields input:focus { outline: none; border-color: var(--ink); }
.fields .file, .fields .nombre { grid-column: 1 / -1; }   /* nombre a lo ancho; email y teléfono debajo, en pareja */
.fields .file input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fields .file b { font-weight: 400; font-size: 14px; letter-spacing: .04em; text-transform: none; color: var(--ink); border: 1px dashed var(--mute); border-radius: 99px; padding: 9px 16px; justify-self: start; cursor: pointer; }
.fields .file:focus-within b { outline: 2px solid var(--pigment); outline-offset: 2px; }
.btn { border: 0; border-radius: 99px; background: var(--pigment); color: #fff; padding: 18px 28px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: transform 160ms var(--ease-out), background-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #c90865; } }
.fine b { color: var(--ink); font-weight: 700; }
.wa { font-size: 13px; letter-spacing: .06em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
@media (hover: hover) and (pointer: fine) { .wa:hover { color: var(--pigment); border-color: var(--pigment); } }
.direct { margin: 0; display: flex; gap: 22px; flex-wrap: wrap; }

/* Visor */
.visor { border: 0; padding: 0; max-width: min(1100px, 94vw); width: 100%; max-height: 92svh; background: var(--night); color: #f2efe9; display: none; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); overflow: hidden; }
.visor[open] { display: grid; }
.visor::backdrop { background: rgba(10, 9, 8, .86); backdrop-filter: blur(4px); }
.visor-fotos { overflow-y: auto; max-height: 92svh; display: grid; gap: 4px; background: #0d0c0b; }
.visor-fotos img { width: 100%; height: auto; }
.visor-txt { padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; gap: 10px; align-self: end; }
.visor-txt h3 { font: 400 clamp(36px, 4vw, 56px)/.95 var(--display); margin: 0; }
.visor-txt p { margin: 0; color: #c9c1b3; font-size: 14px; }
.visor-txt .v-precio { font: 400 34px/1 var(--display); color: var(--pigment); margin: 6px 0 12px; }
.cerrar { position: absolute; top: 10px; right: 12px; z-index: 2; width: 42px; height: 42px; border: 1px solid rgba(242,239,233,.6); border-radius: 50%; background: rgba(18,16,14,.6); color: #fff; font-size: 22px; cursor: pointer; }

@media (max-width: 860px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-txt { grid-template-columns: 1fr; padding: 10px 12px 12px; }
  .c-txt b { font-size: 21px; }
  .c-txt small { font-size: 11px; }
  .c-txt em { grid-column: 1; grid-row: auto; font-size: 20px; margin-top: 4px; }
  .tri-p span { font-size: 9px; letter-spacing: .14em; padding: 4px 9px; top: 74px; }
  h1 { font-size: clamp(44px, 12vw, 72px); }
  .visor { grid-template-columns: 1fr; max-height: 94svh; overflow-y: auto; }
  .visor-fotos { max-height: none; overflow: visible; }
  .price, .m2 input { font-size: 52px; }
  .fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tri-p img, .card img { transition: none; } }

.paso { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin: 0 0 14px; }
.paso b { color: var(--ink); }
.calc .paso { grid-column: 1 / -1; margin: 0; }
.presu .cards { margin-bottom: clamp(32px, 4vw, 48px); max-width: 1100px; }
.presu .quote { max-width: 1100px; }
.card { outline: 3px solid transparent; outline-offset: -3px; transition: outline-color .2s ease, transform 140ms var(--ease-out); }
.card.on { outline-color: var(--pigment); }
.card.on .c-txt b::after { content: ' ✓'; color: var(--pigment); }
.presu > h2, .presu > .paso, .presu .cards, .presu .quote { max-width: 1100px; margin-left: auto; margin-right: auto; }
.cards li { display: flex; }
.card { height: 100%; display: flex; flex-direction: column; }
.c-txt { flex: 1; align-content: start; }

/* Lienzo: ancho × alto en cm */
.cm { display: flex; align-items: flex-end; gap: 10px; }
.cm[hidden] { display: none; }
.cm label { display: grid; gap: 2px; }
.cm input { width: 3.4ch; font: 400 clamp(44px, 6vh, 64px)/1 var(--display); background: transparent; border: 0; border-bottom: 2px solid var(--ink); padding: 0; text-align: center; -moz-appearance: textfield; }
.cm input:focus { outline: none; border-color: var(--pigment); }
.cm span { font-size: 11px; letter-spacing: .1em; color: var(--mute); }
.cm b { font: 400 34px/1 var(--display); padding-bottom: 18px; }
.m2[hidden] { display: none; }
/* Precio de oferta: el de antes tachado, pequeño y apagado */
.c-txt em s, .v-precio s { color: #8a8274; text-decoration-thickness: 2px; margin-right: 4px; }
.fine b s { color: var(--mute); font-weight: 400; }
.price b s { display: block; font: 400 .42em/1 var(--display); color: var(--mute); text-decoration-thickness: 2px; text-align: right; margin-bottom: 2px; }

/* Paso a paso (Carlos, 1 oct): estilo → medidas y precio → «Continuar» → datos. Los datos son lo último */
.calc[hidden], .datos[hidden], .seguir[hidden] { display: none; }
.datos { display: flex; flex-direction: column; gap: 24px; }
.datos .paso { margin: 0; }
.seguir { align-self: flex-start; }
/* Cada paso llega desde donde viene: las medidas bajan desde las tarjetas; los datos suben desde «Continuar» */
.calc:not([hidden]) { animation: baja .42s var(--ease-out) both; }
.datos:not([hidden]) { animation: sube .46s var(--ease-out) both; }
@keyframes baja { from { opacity: 0; transform: translateY(-14px); filter: blur(4px); } }
@keyframes sube { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } }
@media (prefers-reduced-motion: reduce) { .calc, .datos { animation: none !important; } }

/* Etiqueta de oferta (Carlos, 1 oct): en la tarjeta, sobre la foto; en el visor, bajo el precio */
.oferta { font-size: 11px; line-height: 1; font-weight: 400; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--pigment); border-radius: 99px; padding: 7px 11px; }
.card .oferta { position: absolute; top: 0; left: 0; right: 0; z-index: 1; border-radius: 0; text-align: center; font-size: 10px; letter-spacing: .1em; line-height: 1.3; padding: 7px 8px; }
.v-precio .oferta { display: table; margin-top: 10px; }

/* Los estilos ocupan una pantalla entera (Carlos, 1 oct): al pulsar «Presupuesto en un clic»
   se ven los nueve sin cortar. Mosaico que rellena el alto; nombre y precio sobre la foto. */
.presu { padding-top: 0; }
.estilos { height: 100vh; height: 100svh; min-height: 520px; display: flex; flex-direction: column; padding: clamp(18px, 3vh, 36px) 0 clamp(14px, 2.4vh, 28px); box-sizing: border-box; }
.estilos h2 { margin: 0 0 6px; }
.estilos .paso { margin: 0 0 clamp(10px, 1.6vh, 18px); }
.presu .estilos .cards { flex: 1; min-height: 0; max-width: none; margin: 0; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.estilos .cards li { min-height: 0; }
.estilos .card { position: relative; height: 100%; }
.estilos .card img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.estilos .c-txt { position: absolute; left: 0; right: 0; bottom: 0; flex: none; padding: 44px 16px 14px; background: linear-gradient(to bottom, rgba(18,16,14,0), rgba(18,16,14,.88) 62%); }
@media (max-width: 860px) {
  .presu .estilos .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .estilos .cards li:last-child { grid-column: 1 / -1; }
  .estilos .c-txt { padding: 30px 10px 8px; }
  .estilos .c-txt small { display: none; }
  .estilos .c-txt b { font-size: 18px; }
  .estilos .c-txt em { font-size: 16px; margin-top: 2px; }
  .estilos .card .oferta { font-size: 8px; padding: 4px 6px; letter-spacing: .06em; }
}

/* Botón de idioma (1 oct 2026): arriba a la derecha, sobre la portada */
.lang { position: absolute; top: clamp(18px, 3vw, 34px); right: clamp(16px, 3vw, 40px); z-index: 5; font-size: 12px; letter-spacing: .16em; color: #f2efe9; text-decoration: none; border: 1px solid rgba(242,239,233,.45); border-radius: 99px; padding: 8px 14px; background: rgba(18,16,14,.35); transition: background-color .2s ease, border-color .2s ease, transform 140ms var(--ease-out); }
.lang:focus-visible { background: var(--pigment); border-color: var(--pigment); outline: none; }
@media (hover: hover) and (pointer: fine) { .lang:hover { background: var(--pigment); border-color: var(--pigment); outline: none; } }

/* Con Satoshi los rótulos en mayúsculas piden menos espaciado que la de máquina, y el texto corrido un punto más */
html, body { font-size: 17px; }
.paso, .fine, .direct, .tri-p span, .oferta, .lang, .c-txt small { letter-spacing: .06em; }
.wa { font-weight: 500; }

/* ── La experiencia al tacto (2 oct 2026, apple-design + emil-design-eng) ──
   Todo lo que se pulsa responde al apretar, no al soltar. El visor nace de la
   tarjeta tocada, las fotos se pasan con el dedo (siguen al dedo, se lanzan
   con inercia, ceden con goma en los extremos) y se cierra tirando hacia abajo. */
.btn:active, .lang:active, .cerrar:active, .wa:active, .fields .file b:active, .v-nav:active { transform: scale(.97); transition-duration: 100ms; }
.card:active { transform: scale(.97); }
.tri-p:active img { transform: scale(.985); transition-duration: 140ms; }
.btn, .card, .tri-p, .cerrar, .v-nav, .v-dots button, .lang { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.wa, .fields .file b, .cerrar { transition: transform 140ms var(--ease-out), color .2s ease, border-color .2s ease, background-color .2s ease; }

/* Materiales: las piezas que flotan sobre la foto son cristal, no pegatinas */
.lang, .tri-p span, .cerrar, .v-nav { -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.tri-p span { background: rgba(18,16,14,.28); }

/* Visor: escenario con las fotos en fila; una a la vista */
.visor { overscroll-behavior: contain; transform-origin: 50% 50%; }
.visor::backdrop { opacity: 0; transition: opacity .28s var(--ease-out); }
.visor.in::backdrop { opacity: var(--bd, 1); }
.visor.arrastra::backdrop { transition: none; }
.visor-fotos { position: relative; overflow: hidden; display: block; height: min(86svh, 760px); max-height: none; gap: 0; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.visor-fotos:active { cursor: grabbing; }
.pista { display: flex; height: 100%; will-change: transform; }
.pista img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; pointer-events: none; }
.v-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.v-dots[hidden] { display: none; }
.v-dots button { pointer-events: auto; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #f2efe9; opacity: .4; cursor: pointer; transition: opacity .2s ease, transform .2s var(--ease-out); }
.v-dots button[aria-current="true"] { opacity: 1; transform: scale(1.25); }
.v-nav { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; border: 1px solid rgba(242,239,233,.4); border-radius: 50%; background: rgba(18,16,14,.45); color: #f2efe9; font-size: 20px; line-height: 1; cursor: pointer; display: none; transition: opacity .2s ease, transform 140ms var(--ease-out), background-color .2s ease; }
.v-nav.prev { left: 12px; } .v-nav.next { right: 12px; }
.v-nav:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .v-nav { display: block; }
  .v-nav:hover, .cerrar:hover { background: var(--pigment); border-color: var(--pigment); }
}
.cerrar { -webkit-tap-highlight-color: transparent; }
@media (max-width: 860px) {
  .visor { max-width: 100vw; width: 100%; max-height: 94svh; margin: auto auto 0; border-radius: 14px 14px 0 0; }
  .visor-fotos { height: 58svh; }
  /* Asa de la hoja: dice que se puede bajar para cerrar */
  .visor-fotos::before { content: ''; position: absolute; top: 8px; left: 50%; z-index: 2; width: 36px; height: 5px; margin-left: -18px; border-radius: 99px; background: rgba(242,239,233,.55); pointer-events: none; }
  .v-dots { bottom: 12px; }
}

/* Precio que rueda: cifras del mismo ancho para que no baile */
.price b { font-variant-numeric: tabular-nums; }

/* Validación en el momento, no al enviar */
.fields label { position: relative; }
.fields .aviso { font-style: normal; font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--pigment); min-height: 0; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s var(--ease-out); }
.fields label.err .aviso { opacity: 1; transform: none; }
.fields label.err input { border-color: var(--pigment); }
.fields label.ok input { border-color: var(--ink); }
.tiembla { animation: tiembla .32s var(--ease-out); }
@keyframes tiembla { 20% { transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }

/* Menos movimiento: fundidos cortos en vez de desplazamientos; nada de goma ni temblor */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .lang:active, .cerrar:active, .wa:active, .card:active, .v-nav:active, .fields .file b:active { transform: none; }
  .tri-p:active img { transform: none; }
  .calc:not([hidden]), .datos:not([hidden]) { animation: funde .2s ease both !important; }
  .tiembla { animation: none; }
}
@keyframes funde { from { opacity: 0; } }
/* Menos transparencia: superficies sólidas, sin desenfoque */
@media (prefers-reduced-transparency: reduce) {
  .lang, .tri-p span, .cerrar, .v-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--night); }
  .visor::backdrop { backdrop-filter: none; background: rgba(18,16,14,.96); }
}

/* ==========================================================================
   LA NAVE (2 oct 2026) — Carlos: «maravillosa la nave del densocreative, vamos
   a empezar a publicar así». La misma dirección, con la identidad de Arte:
   casi negro cálido, el rosa como único color, Syne y Satoshi.
   Cabina de precisión, no cyberpunk: sin neones por todas partes, sin glitch,
   sin líneas de escaneo. Cuatro gestos con función:
   · la barra es una cápsula de cristal que flota (el contenido pasa por debajo)
   · botones de ignición: el principal es una cápsula mecanizada en rosa con la
     flecha en un chip oscuro; los secundarios, cristal ahumado cuyo filo se
     enciende en rosa solo cerca del cursor
   · telemetría real en la portada: Madrid, sus coordenadas y la hora del estudio
   · retícula de visor en el visor de fotos y en el estilo elegido
   Los colores, solo por variables.
   ========================================================================== */
:root {
  --fg: #f2efe9;                                   /* el blanco cálido de siempre (nunca #fff) */
  --fg-mid: #b5ad9f;
  --surface: #1a1714;                              /* un punto por encima del casi negro */
  --surface-2: #221e1a;
  --hair: color-mix(in srgb, var(--fg) 12%, transparent);
  --glass: color-mix(in srgb, var(--night) 55%, transparent);
  --nav-h: 60px;
}

/* --- La cápsula ------------------------------------------------------------ */
.cabina {
  position: fixed; z-index: 50; top: 14px; left: 50%; translate: -50% 0;
  width: min(1180px, calc(100% - 28px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 8%, transparent), 0 12px 40px -18px color-mix(in srgb, var(--night) 90%, transparent);
  color: var(--fg);
}
.cabina .brand { pointer-events: auto; filter: none; text-decoration: none; color: var(--fg); align-items: flex-end; -webkit-tap-highlight-color: transparent; }
.cabina .mark { width: 96px; }
.cabina .arte-word { width: 32px; height: 8px; }
.cabina-acc { display: flex; align-items: center; gap: 8px; }
.cabina .lang { position: static; padding: 10px 16px; }
.cab-cta { padding: 10px 18px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }

/* El cristal ahumado: secundarios (idioma, presupuesto de la barra, WhatsApp, Instagram, cerrar, flechas) */
.glass { position: relative; }
.glass, .cerrar, .v-nav {
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg);
  transition: transform 140ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}
.glass::before, .cerrar::before, .v-nav::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: radial-gradient(80px circle at var(--mx, 50%) var(--my, 50%), var(--pigment), color-mix(in srgb, var(--pigment) 0%, transparent) 70%);
  -webkit-mask: linear-gradient(var(--fg) 0 0) content-box, linear-gradient(var(--fg) 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(var(--fg) 0 0) content-box exclude, linear-gradient(var(--fg) 0 0);
  opacity: 0; transition: opacity 250ms ease; pointer-events: none;
}
.glass:focus-visible, .cerrar:focus-visible, .v-nav:focus-visible { outline: 1px solid var(--pigment); outline-offset: 3px; background: color-mix(in srgb, var(--fg) 8%, transparent); border-color: color-mix(in srgb, var(--fg) 16%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .glass:hover, .cerrar:hover, .v-nav:hover { background: color-mix(in srgb, var(--fg) 9%, transparent); border-color: color-mix(in srgb, var(--fg) 16%, transparent); color: var(--fg); }
  .glass:hover::before, .cerrar:hover::before, .v-nav:hover::before { opacity: 1; }
}
.glass:active, .cerrar:active, .v-nav:active { transform: scale(.97); transition-duration: 100ms; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.cerrar { display: grid; place-items: center; line-height: 1; }

/* --- Ignición: el botón principal ----------------------------------------- */
.btn, .hero-text .btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 16px;
  min-height: 52px; padding: 8px 8px 8px 26px;
  border-radius: 999px;
  color: var(--fg);
  font-weight: 500; font-size: 13px; letter-spacing: .12em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pigment), var(--fg) 16%) 0%, var(--pigment) 50%, color-mix(in srgb, var(--pigment), var(--night) 16%) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--fg) 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--night) 35%, transparent),
    0 0 0 1px color-mix(in srgb, var(--pigment) 55%, transparent),
    0 10px 28px -12px color-mix(in srgb, var(--pigment) 60%, transparent);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--night) 25%, transparent);
  transition: transform 120ms var(--ease-out), box-shadow 300ms ease;
}
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--fg) 60%, transparent), color-mix(in srgb, var(--fg) 0%, transparent) 65%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity 250ms ease;
}
.btn > * { position: relative; z-index: 1; }
.btn .chip-ico {
  box-sizing: content-box; flex: none; width: 14px; height: 14px; padding: 11px;
  border-radius: 999px; background: var(--night); color: var(--pigment);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 10%, transparent);
  transition: transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--pigment), var(--fg) 16%) 0%, var(--pigment) 50%, color-mix(in srgb, var(--pigment), var(--night) 16%) 100%);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--fg) 60%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--night) 35%, transparent),
      0 0 0 1px color-mix(in srgb, var(--pigment), var(--fg) 20%),
      0 14px 36px -12px color-mix(in srgb, var(--pigment) 85%, transparent);
  }
  .btn:hover::after { opacity: 1; }
  .btn:hover .chip-ico { transform: rotate(-45deg); }
}
.btn:focus-visible { outline: 1px solid var(--pigment); outline-offset: 4px; }
.btn:active { transform: scale(.97); transition-duration: 100ms; box-shadow: inset 0 1px 2px color-mix(in srgb, var(--night) 45%, transparent), 0 0 0 1px color-mix(in srgb, var(--pigment) 55%, transparent); }

.hero-text .btn { margin-top: 26px; }
.hero { justify-content: flex-end; padding-top: calc(var(--nav-h) + 30px); }

/* --- El presupuesto: la consola, de noche ------------------------------------
   Antes era una pared de yeso; ahora la misma noche cálida de la portada.
   Se cambian los tokens dentro de la sección y todo lo demás los sigue. */
.presu {
  --wall: var(--night);
  --ink: var(--fg);
  --mute: #9a9285;
  --line: color-mix(in srgb, var(--fg) 16%, transparent);
  color: var(--ink);
  color-scheme: dark;
}

.estilos h2 { font-size: clamp(40px, 5vw, 76px); }
.calc, .datos {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--hair);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--fg) 6%, transparent);
}
.paso b { color: var(--pigment); }
.m2 input, .cm input { font-variant-numeric: tabular-nums; }
.price span { color: var(--fg-mid); }
.fields .file b { padding: 10px 18px; }
.direct { gap: 10px; }
.wa { padding: 10px 18px; font-size: 13px; }
@media (hover: hover) and (pointer: fine) { .wa:hover { color: var(--fg); } }
.done { font: 400 clamp(48px, 6vw, 80px)/1 var(--display); margin: 0; color: var(--fg); }

/* El visor: una ventanilla */
.visor { border-radius: 20px; border: 1px solid var(--hair); }
.visor-fotos { background: var(--surface); }
.cerrar, .v-nav { background: var(--glass); }

@media (max-width: 860px) {
  :root { --nav-h: 54px; }
  .cabina { top: 10px; width: calc(100% - 20px); padding: 7px 7px 7px 18px; }
  .cabina .mark { width: 80px; }
  .cab-cta, .cabina .lang { padding: 9px 14px; font-size: 11px; }
  .hero { padding-top: calc(var(--nav-h) + 24px); }
  .tri-p span { top: calc(var(--nav-h) + 26px); }

  .btn { min-height: 50px; padding-left: 22px; }
  .visor { border-radius: 18px 18px 0 0; border-bottom: 0; }
  .card { border-radius: 10px; }
}
@media (max-width: 340px) {
  .cab-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn .chip-ico { transition: none; }
  .glass:active, .btn:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .cabina { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .glass, .cerrar, .v-nav { background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .glass, .cabina { border-color: var(--fg); }
}
/* Botón a lo ancho (datos, visor): texto a la izquierda, el chip al otro extremo */
.btn { justify-content: space-between; }
/* Lo que se trae a la vista no queda debajo de la cápsula */
.datos, .calc { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* --- Títulos en Syne ExtraBold (2 oct 2026) ---------------------------------
   Sustituye a Bebas Neue, que era estrecha: Syne es ancha, así que todos los
   tamaños de los títulos y las cifras bajan a algo más de la mitad. Va al final
   para mandar sobre los tamaños de arriba. Mayúsculas como con Bebas. */
h1, main h2, .c-txt b, .c-txt em, .m2 input, .price, .visor-txt h3, .visor-txt .v-precio, .cm input, .cm b, .done { font-weight: 800; }
h1, main h2, .c-txt b, .visor-txt h3, .done { text-transform: uppercase; letter-spacing: -.01em; }
h1 { font-size: clamp(26px, 7.4vw, 112px); line-height: .95; max-width: 12ch; }
main h2, .estilos h2 { font-size: clamp(28px, 4.2vw, 60px); line-height: .95; }
.c-txt b { font-size: 16px; line-height: 1.05; }
.c-txt em { font-size: 15px; }
.m2 input, .price { font-size: clamp(36px, 4.8vh, 56px); letter-spacing: -.02em; }
.visor-txt h3 { font-size: clamp(24px, 2.6vw, 36px); }
.visor-txt .v-precio { font-size: 22px; }
.cm input { font-size: clamp(30px, 4vh, 42px); }
.cm b { font-size: 22px; padding-bottom: 14px; }
.done { font-size: clamp(30px, 4vw, 52px); }
@media (max-width: 860px) {
  h1 { font-size: clamp(26px, 7.4vw, 60px); }
  .c-txt b { font-size: 14px; }
  .c-txt em { font-size: 13px; }
  .estilos .c-txt b { font-size: 12px; }
  .estilos .c-txt em { font-size: 12px; }
  .price, .m2 input { font-size: 36px; }
}
/* Syne trae cifras «de texto» (el 4 cuelga): en precios y medidas, cifras de caja alta */
.c-txt em, .visor-txt .v-precio, .cm b, .price, .done { font-variant-numeric: lining-nums; }
.price b, .m2 input, .cm input { font-variant-numeric: lining-nums tabular-nums; }
/* En el móvil la cifra ancha no cabe junto a los m²: el valor baja a su propia fila */
@media (max-width: 560px) {
  .price { grid-column: 1 / -1; font-size: 40px; }
  .m2 input { font-size: 40px; }
}
@media (max-width: 860px) {
  .estilos .c-txt b { font-size: min(12px, 2.75vw); letter-spacing: -.02em; }
}
.m2 input { width: 3.6ch; }
@media (min-width: 861px) {
  .c-txt b { font-size: clamp(12px, 1.12vw, 16px); }
  .c-txt em { font-size: clamp(11px, 1.02vw, 15px); }
}
@media (max-width: 860px) {
  .estilos .c-txt em { font-size: min(12px, 3.1vw); }
}
@media (max-width: 600px) {
  main h2, .estilos h2 { font-size: 6.9vw; }
}
@media (min-width: 861px) { .visor-txt h3 { font-size: clamp(20px, 1.75vw, 26px); } }

/* ==========================================================================
   CARÁCTER PROPIO (2 oct 2026, noche). Carlos: «que no se parezcan todas las
   páginas entre sí, cada una tiene su carácter». Arte deja la nave de
   densocreative (cápsula de cristal, botones de ignición, telemetría, retícula)
   y vuelve a lo suyo: la pared y la pintura. Tres gestos:
   · la pared: el presupuesto vuelve a ser yeso, con su textura; los estilos
     cuelgan de ella como obras, con su sombra
   · el trazo: el rosa del logo es un brochazo; subraya el titular (se pinta al
     llegar) y el estilo elegido
   · cartelas de galería: los nombres sobre la foto de portada son la etiqueta
     que se pega junto a una obra, no una píldora de cristal
   Se quedan los gestos al tacto: el visor que se pasa con el dedo, el precio
   que rueda y la validación en el momento.
   ========================================================================== */
:root {
  --plaster: #e9e7e2;                                /* yeso de galería, frío, no crema */
  --paper: #f4f3ef;
  --pigment-ink: #b8005c;                            /* el rosa para letra pequeña sobre el yeso (5,3:1) */
  --pigment-btn: color-mix(in srgb, var(--pigment), var(--night) 12%);   /* fondo del botón: con el texto claro llega a 4,6:1 */
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 44' preserveAspectRatio='none'%3E%3Cg fill='%23eb0c77'%3E%3Cpath d='M3 30C40 20 98 15 170 14C240 13 320 15 397 8C398 12 396 17 393 19C330 25 250 26 172 27C104 28 52 32 9 39C5 37 2 34 3 30Z'/%3E%3Cpath d='M40 33C120 27 220 28 330 25L331 26.6C222 30 122 30 42 35.2Z'/%3E%3Cpath d='M60 15C150 9 260 8 360 9L360 10.4C260 10.5 150 11.5 61 16.8Z'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .06 0 0 0 0 .05 0 0 0 .26 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --blotch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
}
::selection { background: var(--pigment); color: var(--fg); }

/* --- El rótulo de la portada (en vez de la cápsula) ------------------------- */
.cabina {
  position: absolute; top: 0; left: 0; translate: none; width: 100%;
  padding: clamp(16px, 2.4vw, 30px) clamp(20px, 3vw, 44px);
  border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.cabina .brand { filter: drop-shadow(0 2px 8px rgba(18,16,14,.6)); }
.cabina .mark { width: 112px; }
.cabina-acc { gap: clamp(14px, 2vw, 26px); }
.cab-cta, .cabina .lang {
  position: relative; inset: auto; isolation: isolate; padding: 12px 2px; border: 0; border-radius: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--fg);
  text-shadow: 0 1px 8px rgba(18,16,14,.7);
}
/* El brochazo aparece debajo al pasar, como si se acabara de pintar */
.cab-cta::after, .cabina .lang::after {
  content: ''; position: absolute; left: -4px; right: -4px; bottom: 4px; height: 8px;
  background: var(--brush) center / 100% 100% no-repeat; z-index: -1;
  clip-path: inset(0 100% 0 0); transition: clip-path 260ms var(--ease-out);
}
.cab-cta:focus-visible, .cabina .lang:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; background: none; border: 0; }
.cab-cta:focus-visible::after, .cabina .lang:focus-visible::after { clip-path: inset(0 0 0 0); }
@media (hover: hover) and (pointer: fine) {
  .cab-cta:hover::after, .cabina .lang:hover::after { clip-path: inset(0 0 0 0); }
  .cabina .lang:hover { background: none; }
}

/* --- Titular con el brochazo del logo --------------------------------------- */
h1 { position: relative; padding-bottom: .22em; margin-bottom: 18px; }
h1::after {
  content: ''; position: absolute; left: -.04em; bottom: 0; width: min(78%, 7.2em); height: .2em;
  background: var(--brush) left center / 100% 100% no-repeat;
  animation: pinta 900ms 250ms var(--ease-out) both;
}
@keyframes pinta { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sub { font-size: 15px; letter-spacing: .02em; opacity: 1; color: var(--fg); text-shadow: 0 1px 10px rgba(18,16,14,.6); }

/* --- Cartelas de galería sobre la portada ----------------------------------- */
.tri-p span {
  padding: 7px 11px 6px; border: 0; border-radius: 2px;
  background: var(--paper); color: var(--night);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  box-shadow: 0 1px 2px rgba(18,16,14,.35), 0 8px 18px -10px rgba(18,16,14,.6);
}
.tri-p span, .hero .tri-p span { top: clamp(80px, 12vh, 120px); }
.tri-p:focus-visible { outline: 3px solid var(--pigment); outline-offset: -3px; }

/* --- El botón: pintura, no ignición ----------------------------------------- */
.btn, .hero-text .btn {
  gap: 14px; min-height: 54px; padding: 0 22px 0 26px;
  background: var(--pigment-btn); color: var(--fg);
  font-weight: 700; font-size: 13px; letter-spacing: .12em;
  box-shadow: 0 1px 2px rgba(18,16,14,.25), 0 10px 22px -14px rgba(18,16,14,.7);
  text-shadow: none;
}
/* Al pasar, una segunda mano de pintura más oscura barre el botón de izquierda a derecha */
.btn::after {
  inset: 0; opacity: 1; mix-blend-mode: normal;
  background: color-mix(in srgb, var(--pigment), var(--night) 34%);
  clip-path: inset(0 100% 0 0); transition: clip-path 340ms var(--ease-out);
}
.btn .chip-ico { padding: 0; width: 16px; height: 16px; background: none; color: currentColor; box-shadow: none; transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--pigment-btn); box-shadow: 0 1px 2px rgba(18,16,14,.25), 0 14px 28px -14px rgba(18,16,14,.75); }
  .btn:hover::after { clip-path: inset(0 0 0 0); }
  .btn:hover .chip-ico { transform: translateX(4px); }
}
.btn:focus-visible { outline: 2px solid var(--pigment); outline-offset: 4px; }
.btn:active { box-shadow: none; }

/* --- La pared: el presupuesto vuelve a ser yeso ----------------------------- */
.presu {
  --wall: var(--plaster);
  --ink: var(--night);
  --mute: #5f5950;
  --line: rgba(18, 16, 14, .2);
  color-scheme: light;
  background-color: var(--plaster);
  background-image: var(--grain), var(--blotch);
  background-size: 300px 300px, 900px 900px;
}
.presu ::selection { background: var(--night); color: var(--plaster); }
.estilos { padding-top: clamp(22px, 4vh, 44px); }
.paso { color: var(--mute); font-weight: 500; }
.paso b { color: var(--pigment-ink); }

/* Los estilos cuelgan de la pared: obra con su sombra, esquinas casi rectas */
.card, .estilos .card { border-radius: 4px; outline: 0; box-shadow: 0 1px 2px rgba(18,16,14,.22), 0 18px 32px -20px rgba(18,16,14,.55); transition: transform 140ms var(--ease-out), box-shadow 240ms ease; }
.card::after { content: none; }
@media (hover: hover) and (pointer: fine) { .card:hover { box-shadow: 0 1px 2px rgba(18,16,14,.22), 0 26px 40px -20px rgba(18,16,14,.6); } }
.card:focus-visible { outline: 3px solid var(--pigment); outline-offset: 3px; }
/* El elegido: un marco de pintura rosa y el brochazo bajo su nombre */
.card.on { outline: 4px solid var(--pigment); outline-offset: -4px; box-shadow: 0 1px 2px rgba(18,16,14,.22), 0 22px 38px -18px rgba(18,16,14,.6); }
.card.on .c-txt b::after { content: none; }
.card.on .c-txt b { padding-bottom: .32em; background: var(--brush) left bottom / 100% .32em no-repeat; justify-self: start; }
.card .oferta { border-radius: 0; font-weight: 700; }

/* Medidas, precio y datos: hojas de papel clavadas en la pared */
.calc, .datos {
  border: 0; border-radius: 4px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(18,16,14,.14), 0 20px 36px -26px rgba(18,16,14,.5);
}
.price { color: var(--pigment); }
.price span { color: var(--mute); font-weight: 500; }
.price b s, .fine b s { color: var(--mute); }
.fine { color: var(--mute); }
.fields label { color: var(--mute); font-weight: 500; }
.fields input { border-bottom-color: rgba(18,16,14,.32); }
.fields input:focus { border-color: var(--pigment); }
.fields .aviso { color: var(--pigment-ink); font-weight: 500; }
.fields label.err input { border-color: var(--pigment-ink); }
.fields .file b { border: 1px dashed rgba(18,16,14,.45); color: var(--ink); }
.m2 input:focus, .cm input:focus { border-color: var(--pigment); }
.m2 span, .cm span { color: var(--mute); font-weight: 500; }
.done { color: var(--ink); }

/* WhatsApp e Instagram: contorno de tinta, sin cristal */
.wa {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid rgba(18,16,14,.35); border-radius: 999px; background: none;
  color: var(--ink); font-weight: 500; text-decoration: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
.wa:focus-visible { outline: 2px solid var(--pigment); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .wa:hover { color: var(--paper); background: var(--night); border-color: var(--night); } }

/* El visor: la sala oscura donde se mira una obra; botones de tinta, sin cristal ni retícula */
.visor { border-radius: 6px; }
.visor-fotos::after { content: none; }
.cerrar, .v-nav { background: rgba(18,16,14,.72); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgba(242,239,233,.35); box-shadow: none; }
.cerrar::before, .v-nav::before { content: none; }
.cerrar:focus-visible, .v-nav:focus-visible { outline: 2px solid var(--pigment); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .cerrar:hover, .v-nav:hover { background: var(--pigment-btn); border-color: var(--pigment-btn); } }
/* Los puntos del visor: 8 px a la vista, 28 px para el dedo */
.v-dots { gap: 0; }
.v-dots button { width: 28px; height: 28px; opacity: .45; background: radial-gradient(circle, #f2efe9 0 4px, transparent 4.5px); }
.v-dots button[aria-current="true"] { opacity: 1; transform: scale(1.25); }

.datos, .calc { scroll-margin-top: 24px; }

@media (max-width: 860px) {
  .cabina { padding: 14px 16px; }
  .cabina .mark { width: 88px; }
  .cab-cta, .cabina .lang { font-size: 11px; padding: 12px 2px; }
  .estilos { padding-top: 20px; }
  .card, .estilos .card { border-radius: 3px; }
  .tri-p span, .hero .tri-p span { font-size: 8.5px; padding: 5px 7px 4px; letter-spacing: .06em; top: 70px; }
  .visor { border-radius: 10px 10px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  h1::after { animation: none; }
  .btn::after, .cab-cta::after, .cabina .lang::after { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .cerrar, .v-nav { background: var(--night); }
}
@media (prefers-contrast: more) {
  .presu { background-image: none; }
  .card { outline: 1px solid var(--night); }
}
/* En el visor, el nombre del estilo lleva el mismo brochazo */
.visor-txt h3 { padding-bottom: .34em; background: var(--brush) left bottom / min(100%, 7em) .3em no-repeat; }
/* El marco rosa del elegido va por encima de la foto (el contorno quedaba debajo) */
.card.on { outline: 0; }
.card.on::after { content: ''; position: absolute; inset: 0; z-index: 2; border: 4px solid var(--pigment); border-radius: inherit; pointer-events: none; }

/* ==========================================================================
   ANIMACIÓN (2 oct 2026). Carlos: «que vayan apareciendo las cosas, algún
   elemento frame a frame también». Tres piezas, todas sin librerías:
   · el logo oficial se pinta al entrar (solo la primera visita de la sesión)
   · cada bloque aparece al llegar a él: sube un poco, se enfoca y se ve
   · «Del muro a la obra»: la pared se pinta fotograma a fotograma al bajar
   Con «menos movimiento» no se mueve nada y todo está a la vista desde el
   principio. Sin JavaScript, igual: lo escondido depende de la clase .rv,
   que pone el propio script y se quita sola si main.js no arranca.
   ========================================================================== */

/* --- El logo en la barra ---------------------------------------------------- */
.cabina { align-items: center; }
.cabina .brand { align-items: center; filter: drop-shadow(0 3px 10px rgba(18,16,14,.55)); }
.logo { position: relative; display: block; width: 84px; height: 84px; flex: none; }
.logo img, .logo picture { display: block; width: 100%; height: 100%; }
.logo .l-capa { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 860px) { .logo { width: 64px; height: 64px; } }
/* Las cartelas de la portada, por debajo del logo */
.tri-p span, .hero .tri-p span { top: calc(clamp(16px, 2.4vw, 30px) + 84px + 16px); }
@media (max-width: 860px) { .tri-p span, .hero .tri-p span { top: calc(14px + 64px + 14px); } }

/* La entrada: el círculo se abre como una pasada de spray y las letras se pintan de izquierda a derecha */
.logo.pinta picture { opacity: 0; }
.logo.pinta .l-fondo { animation: logo-circulo 560ms var(--ease-out) both; }
.logo.pinta .l-letras { animation: logo-letras 680ms 300ms var(--ease-out) both; }
@keyframes logo-circulo {
  from { clip-path: circle(0% at 50% 50%); transform: rotate(-30deg) scale(.92); }
  to { clip-path: circle(72% at 50% 50%); transform: none; }
}
@keyframes logo-letras {
  from { clip-path: polygon(0% 0%, 0% 0%, -34% 100%, -34% 100%); filter: blur(3px); }
  to { clip-path: polygon(0% 0%, 134% 0%, 100% 100%, -34% 100%); filter: blur(0); }
}

/* --- Aparecer al llegar ----------------------------------------------------- */
.rv [data-rv] {
  transition: opacity 560ms var(--ease-out), translate 700ms var(--ease-out), filter 560ms var(--ease-out);
  transition-delay: var(--rv-d, 0ms);
}
.rv [data-rv]:not(.visto) { opacity: 0; translate: 0 16px; filter: blur(6px); }
/* El brochazo del titular se pinta cuando el titular ya está */
.rv h1::after { animation-delay: 480ms; }

/* --- Del muro a la obra ------------------------------------------------------ */
.muro { position: relative; background: var(--plaster); }
.muro-pin { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; }
.muro picture { display: contents; }
.muro-img, .muro-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.muro-lienzo { display: none; }
.muro.vivo { height: 300vh; height: 300svh; }
.muro.vivo .muro-pin { position: sticky; top: 0; }
.muro.vivo .muro-lienzo { display: block; }
.muro.vivo .muro-img { visibility: hidden; }
/* La cartela de la obra, como las de la portada pero con su título */
.muro-txt {
  position: absolute; left: clamp(16px, 3vw, 44px); bottom: clamp(16px, 5vh, 48px); z-index: 1;
  max-width: calc(100% - 32px); padding: 14px 18px 12px; border-radius: 2px;
  background: var(--paper); color: var(--night);
  box-shadow: 0 1px 2px rgba(18,16,14,.35), 0 14px 28px -14px rgba(18,16,14,.6);
}
.muro .muro-txt h2 { font: 800 clamp(18px, 2vw, 28px)/1 var(--display); letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 12px; max-width: none; }
.fases { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6d665b; }
.fases li { padding-bottom: 6px; background: var(--brush) left bottom / 0% 5px no-repeat; transition: background-size 360ms var(--ease-out), color 200ms ease; }
.fases li.on { color: var(--night); background-size: 100% 5px; }
@media (max-width: 860px) {
  .muro.vivo { height: 260vh; height: 260svh; }
  .muro-txt { padding: 12px 14px 10px; }
  .fases { gap: 6px 12px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo.pinta .l-fondo, .logo.pinta .l-letras { animation: none; }
  .fases li { transition: none; }
}

/* --- El titular que cambia (3 oct 2026) --------------------------------------
   Entra pintándose de izquierda a derecha (máscara de spray: borde suave) y
   pasando de borroso a nítido; sale barrida hacia la derecha. El brochazo de
   debajo se repinta con cada frase (.repinta). */
h1 .rota { display: block; }
h1 .rota.entra { animation: rota-entra 820ms var(--ease-out) both; }
h1 .rota.sale { animation: rota-sale 360ms cubic-bezier(.5, 0, .75, 0) both; }
@keyframes rota-entra {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; filter: blur(6px); transform: translateX(-.04em); }
  to   { -webkit-mask-position: 0 0;    mask-position: 0 0;    filter: blur(0);   transform: none; }
}
@keyframes rota-sale { to { clip-path: inset(0 0 0 100%); opacity: .2; transform: translateX(.06em); } }
h1 .rota.entra {
  -webkit-mask-image: linear-gradient(90deg, #fff 0 40%, transparent 60% 100%); mask-image: linear-gradient(90deg, #fff 0 40%, transparent 60% 100%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
}
h1.repinta::after { animation: pinta 900ms 120ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { h1 .rota.entra, h1 .rota.sale, h1.repinta::after { animation: none; } }

/* --- Pulido (3 oct 2026): letra que se lee en el móvil y toques del tamaño del dedo ---- */
html { color: var(--fg); }
.estilos .paso { font-size: 13px; }
@media (max-width: 860px) {
  /* Cartelas de la portada: de 8,5 px a 10,5 px */
  .tri-p span, .hero .tri-p span { font-size: 10.5px; padding: 6px 8px 5px; }
  /* Nombre del estilo en la tarjeta: nunca por debajo de 12 px en un móvil normal */
  .estilos .c-txt b { font-size: min(12.5px, 3.3vw); }
  /* EN / ES: 44 px de ancho para el dedo aunque la palabra sea corta */
  .cabina .lang { min-width: 44px; text-align: center; }
}
.oferta .of-corta { display: none; }
@media (max-width: 860px) {
  .estilos .c-txt b { font-size: min(12px, 2.85vw); letter-spacing: -.03em; }
  .card .oferta .of-larga { display: none; }
  .card .oferta .of-corta { display: inline; }
  .estilos .card .oferta { font-size: 10px; padding: 5px 6px; }
}