/* Espacio Cande Vilar: tema oscuro fijo, el color lo ponen las obras. Un solo acento (bermellón). Syne + Hanken Grotesk */
:root {
  --bg: #111113; --bg2: #19191c; --card: #212125; --ink: #f3f0ea; --ink2: #aaa69e; --line: rgba(255, 255, 255, .13);
  --acc: #ff5a36; --acc-ink: #141416; --acc-soft: rgba(255, 90, 54, .15);
  --font-d: 'Syne', system-ui, sans-serif; --font-b: 'Hanken Grotesk', system-ui, sans-serif;
  --sh: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 40px -16px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
h1, h2, h3 { letter-spacing: -.035em; }
h2 { font-weight: 800; }
.top { background: color-mix(in srgb, var(--bg) 78%, transparent); }
.marca i { font-size: 28px; color: var(--acc); }
.btn.contorno { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.filtros .ind { background: var(--ink); }
.chip[aria-selected="true"] { color: var(--bg); }
.faq details { box-shadow: none; border: 1px solid var(--line); background: var(--card); }
.cinco li a { box-shadow: none; border: 1px solid var(--line); }
.cinco i { color: var(--acc); }
.pend { background: var(--acc-soft); color: var(--ink); }
.pie { background: #0a0a0b; color: var(--ink); }

/* portada: obra a pantalla completa, texto abajo */
.hero-cande { position: relative; display: grid; align-items: end; min-height: min(calc(100dvh - 66px), 860px); isolation: isolate; overflow: clip; }
.hero-cande > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-cande::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(17, 17, 19, .95) 6%, rgba(17, 17, 19, .55) 45%, rgba(17, 17, 19, .15)); }
.hero-cande .wrap { display: grid; gap: 22px; justify-items: start; padding-bottom: clamp(36px, 7vw, 84px); padding-top: 120px; }
.hero-cande h1 { font-size: clamp(38px, 5.6vw, 80px); line-height: 1; font-weight: 800; max-width: 20ch; }
.hero-cande h1 em { font-style: italic; color: var(--acc); padding-bottom: .1em; display: inline-block; }
.hero-cande .bajada { color: #d8d4cc; margin-top: 0; }
@supports (animation-timeline: scroll()) {
  .hero-cande > img { animation: acercar linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
  @keyframes acercar { from { transform: scale(1); } to { transform: scale(1.14); } }
}

/* galería: columnas con alturas distintas */
.galeria { columns: 2; column-gap: 14px; transition: opacity .12s var(--out); }
.galeria.sale { opacity: 0; }
@media (min-width: 760px) { .galeria { columns: 3; column-gap: 18px; } }
.obra { break-inside: avoid; margin: 0 0 18px; animation: sube .5s var(--out) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.obra button { display: block; width: 100%; border-radius: var(--r); overflow: hidden; background: var(--card); box-shadow: var(--sh); }
.obra img { width: 100%; height: auto; transition: transform .7s var(--out); }
.obra:nth-child(3n+1) img { aspect-ratio: 4 / 5; object-fit: cover; }
.obra:nth-child(3n+2) img { aspect-ratio: 1 / 1; object-fit: cover; }
.obra:nth-child(3n) img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (hover: hover) and (pointer: fine) { .obra button:hover img { transform: scale(1.05); } }
.obra figcaption { padding: 10px 4px 0; font-size: 14px; color: var(--ink2); }

/* presupuesto */
.presu-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .presu-grid { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.presu { display: grid; gap: 4px; padding: clamp(20px, 3vw, 32px); border-radius: calc(var(--r) + 6px); background: var(--card); box-shadow: var(--sh); }
.presu fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.presu legend { font-weight: 700; font-size: 14px; margin-bottom: 8px; padding: 0; }
.elige { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { min-height: 46px; padding: 0 18px; border-radius: var(--pill); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .18s var(--out), color .18s var(--out), transform .16s var(--out); }
.opcion:active { transform: scale(.96); }
.opcion[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); box-shadow: none; }
.campo input, .campo select, .campo textarea { min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-weight: 500; resize: vertical; }
.campo textarea { min-height: 96px; }
.campo input:focus, .campo textarea:focus { outline: 3px solid var(--acc-soft); border-color: var(--acc); }
.presu .btn { margin-top: 8px; }

/* conocé a Cande */
.conoce { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .conoce { grid-template-columns: 1fr 1fr; gap: 64px; } }
.conoce-foto { border-radius: calc(var(--r) + 10px); overflow: hidden; box-shadow: var(--sh); }
.conoce-foto img { width: 100%; height: auto; aspect-ratio: 4 / 4.4; object-fit: cover; }
.conoce .pend { margin-top: 18px; }

/* visor de obras */
.cerca.arte { width: min(1000px, calc(100% - 24px)); }
.cerca.arte .lienzo { aspect-ratio: auto; max-height: 78dvh; display: grid; place-items: center; cursor: default; touch-action: auto; background: #0a0a0b; }
.cerca.arte .lienzo img { width: 100%; height: auto; max-height: 78dvh; object-fit: contain; }
.cerca.arte .datos { justify-content: flex-end; }

@media (max-width: 560px) { .top .btn { display: none; } }

/* ── mejoras de la demo ── */
/* titular que entra palabra por palabra */
.pal { display: inline-block; opacity: 0; transform: translateY(.55em); animation: palabra .8s var(--out) forwards; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes palabra { to { opacity: 1; transform: none; } }

/* filtros con cantidad de obras */
.chip .n { margin-left: 8px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--pill); background: color-mix(in srgb, currentColor 14%, transparent); }

/* icono que aparece al apoyar el dedo o el mouse en una obra */
.obra button { position: relative; }
.obra .ojo { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(8px); color: var(--ink); opacity: 0; transform: scale(.85); transition: opacity .25s var(--out), transform .25s var(--out); }
@media (hover: hover) and (pointer: fine) { .obra button:hover .ojo { opacity: 1; transform: none; } }
@media (hover: none) { .obra .ojo { opacity: .9; transform: none; } }

/* franja a pantalla completa: viajo adonde esté el proyecto */
.viajo { position: relative; display: grid; align-items: center; min-height: min(70dvh, 560px); overflow: clip; isolation: isolate; }
.viajo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.viajo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(17, 17, 19, .92) 12%, rgba(17, 17, 19, .55) 55%, rgba(17, 17, 19, .25)); }
.viajo .wrap { display: grid; gap: 20px; justify-items: start; padding-block: 72px; }
.viajo h2 { font-size: clamp(34px, 5.4vw, 72px); max-width: 16ch; line-height: 1; }
.viajo .bajada { max-width: 44ch; color: #d8d4cc; margin-top: 0; }
@supports (animation-timeline: view()) {
  .viajo > img { height: 130%; top: -15%; animation: viaja linear both; animation-timeline: view(); }
  @keyframes viaja { from { transform: translateY(-7%); } to { transform: translateY(7%); } }
}

/* elegir el tipo de trabajo con fotos */
.elige { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .elige { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) and (max-width: 1199px) { .elige { grid-template-columns: repeat(2, 1fr); } }
.tipo-card { position: relative; display: grid; border-radius: 18px; overflow: hidden; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); text-align: left; transition: transform .16s var(--out), box-shadow .2s var(--out); }
.tipo-card:active { transform: scale(.97); }
.tipo-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: .75; transition: opacity .25s var(--out), transform .5s var(--out); }
.tipo-card span { padding: 10px 12px 12px; font-weight: 700; font-size: 15px; }
.tipo-card i { position: absolute; top: 8px; right: 8px; font-size: 26px; color: var(--acc); opacity: 0; transform: scale(.6); transition: opacity .2s var(--out), transform .3s var(--out); background: var(--bg); border-radius: 50%; }
.tipo-card[aria-pressed="true"] { box-shadow: inset 0 0 0 2.5px var(--acc); }
.tipo-card[aria-pressed="true"] img { opacity: 1; }
.tipo-card[aria-pressed="true"] i { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .tipo-card:hover img { opacity: 1; transform: scale(1.04); } }

/* vista previa del mensaje, como burbuja de chat */
.vista { margin-top: 28px; max-width: 420px; }
.vista-t { font-size: 14px; font-weight: 700; color: var(--ink2); margin-bottom: 10px; }
.burbuja { white-space: pre-line; padding: 16px 18px; border-radius: 20px 20px 20px 6px; background: var(--card); box-shadow: var(--sh); font-size: 16px; line-height: 1.5; border: 1px solid var(--line); }

/* visor con flechas */
.cerca.arte .lienzo { position: relative; }
.cerca.arte .lienzo img { transition: opacity .25s var(--out), transform .35s var(--out); }
.cerca.arte .lienzo img.cambia { opacity: 0; transform: scale(.985); }
.visor-nav { position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(8px); color: var(--ink); transition: transform .16s var(--out), background-color .2s var(--out); z-index: 2; }
.visor-nav:active { transform: scale(.92); }
.visor-nav.ant { left: 12px; } .visor-nav.sig { right: 12px; }

/* botón flotante en el celular */
.cta-flotante { position: fixed; z-index: 40; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translate(-50%, 160%); display: inline-flex; align-items: center; gap: 9px; min-height: 54px; padding: 0 24px; border-radius: var(--pill); background: var(--acc); color: var(--acc-ink); font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: 0 18px 40px -12px rgba(255, 90, 54, .55); transition: transform .5s var(--out); }
.cta-flotante.ver { transform: translate(-50%, 0); }
.cta-flotante:active { transform: translate(-50%, 0) scale(.97); }
@media (min-width: 721px) { .cta-flotante { display: none; } }