/* ============================================================
   Rediseño "Galería luminosa" — maqueta (rama rediseno/maqueta)
   Capa visual sobre la página existente: no cambia el contenido.
   ============================================================ */
:root {
  /* Paleta A, "Rosa empolvado" (predeterminada). Sin cafés. */
  --cream: #fffafa; --cream-rgb: 255, 250, 250;
  --wall: #f9ecef;
  --band: #a9476a; --band-2: #8a3354; --band-ink: #fff3f6;
  --accent: #f6d6a8; --accent-rgb: 246, 214, 168;
  --accent-ink: #d17a98;
  --shade-rgb: 120, 40, 70;
  --overlay-rgb: 40, 12, 24;
  --room-wall: #f6e9ec; --room-wall-2: #f0dfe4; --room-floor: #e2cbc4; --room-floor-2: #d6bab2;
  --bluebird: #4d7fa8;
  --ease: cubic-bezier(.2,.7,.2,1);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--cream); }

/* ---------- Encabezado: vidrio esmerilado ---------- */
header.site {
  background: rgba(var(--cream-rgb), 0.82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: rgba(154, 35, 71, 0.10);
  transition: box-shadow .3s ease;
}
header.site.scrolled { box-shadow: 0 10px 30px rgba(var(--shade-rgb), 0.08); }
nav.main a { position: relative; border-bottom: 0; }
nav.main a::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .35rem; height: 1px;
  background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
nav.main a:hover::after { transform: scaleX(1); }

/* ---------- Hero: escena de galería ---------- */
.hero {
  position: relative; overflow: hidden; border-bottom: 0;
  background:
    radial-gradient(60rem 40rem at 85% 20%, rgba(188, 47, 90, 0.10), transparent 60%),
    radial-gradient(40rem 30rem at 10% 90%, rgba(77, 127, 168, 0.08), transparent 60%),
    var(--cream);
}
.hero-grid { min-height: min(calc(100vh - 7rem), 52rem); grid-template-columns: 1.05fr .95fr; padding-top: 2.5rem; padding-bottom: 4rem; }
.hero h1 { font-size: clamp(2.8rem, 5.4vw, 5.2rem); font-weight: 400; line-height: .98; letter-spacing: -0.02em; }
.hero h1 .u { font-weight: 500; }
.hero .byline { font-size: 2.2rem; margin-bottom: 1rem; }
.hero p.mission { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.35rem; color: var(--rose-dark); }

/* foto en arco, como un nicho de galería */
.hero-photo { margin: 0 0 0 auto; width: 100%; max-width: 30rem; }
.hero-photo::after { display: none; }
.hero-photo img {
  aspect-ratio: 4 / 5; width: 100%; border-radius: 999px 999px 4px 4px;
  box-shadow: 0 40px 80px -30px rgba(var(--shade-rgb), 0.45);
}
.hero-photo::before {
  content: ""; position: absolute; inset: -1.1rem -1.1rem 1.1rem 1.1rem; z-index: 0;
  border: 1px solid rgba(188, 47, 90, 0.35); border-radius: 999px 999px 4px 4px; pointer-events: none;
}
.hero-photo .tag { left: auto; right: -0.6rem; bottom: 2.2rem; }

/* sello giratorio */
.rd-seal {
  position: absolute; z-index: 3; left: -2.6rem; bottom: -1.6rem; width: 9.5rem; height: 9.5rem;
  display: grid; place-items: center; pointer-events: none;
}
.rd-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: rd-spin 26s linear infinite; }
.rd-seal text { font: 800 9.6px "Manrope", sans-serif; letter-spacing: .28em; fill: var(--rose-dark); text-transform: uppercase; }
.rd-seal img { width: 54%; height: 54%; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 12px 28px rgba(var(--shade-rgb), .25); background: #fff; }
.rd-seal::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 18px 40px rgba(var(--shade-rgb), .18); }
@keyframes rd-spin { to { transform: rotate(360deg); } }

.rd-scroll {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  font-size: .66rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--rose-dark);
  text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.rd-scroll::after { content: ""; width: 1px; height: 2.6rem; background: linear-gradient(var(--rose), transparent); animation: rd-drip 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes rd-drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* entrada del hero */
.js-rd .hero h1 > span, .js-rd .hero .byline, .js-rd .hero .mission, .js-rd .hero .lede, .js-rd .hero-ctas { opacity: 0; transform: translateY(28px); }
.js-rd .hero-photo { opacity: 0; transform: scale(.96); }
.js-rd.rd-ready .hero h1 > span, .js-rd.rd-ready .hero .byline, .js-rd.rd-ready .hero .mission,
.js-rd.rd-ready .hero .lede, .js-rd.rd-ready .hero-ctas, .js-rd.rd-ready .hero-photo {
  opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.1s var(--ease);
}
.js-rd.rd-ready .hero h1 > span:nth-child(2) { transition-delay: .12s; }
.js-rd.rd-ready .hero .byline { transition-delay: .3s; }
.js-rd.rd-ready .hero .mission { transition-delay: .4s; }
.js-rd.rd-ready .hero .lede { transition-delay: .5s; }
.js-rd.rd-ready .hero-ctas { transition-delay: .62s; }
.js-rd.rd-ready .hero-photo { transition-delay: .15s; transition-duration: 1.4s; }

/* ---------- Franja de confianza: cinta en movimiento ---------- */
.trust { background: var(--band); border: 0; color: var(--band-ink); overflow: hidden; }
.trust .wrap { max-width: none; padding: 0; }
.trust ul { flex-wrap: nowrap; justify-content: flex-start; width: max-content; gap: 0; padding: 1.15rem 0; animation: rd-marquee 38s linear infinite; }
.trust li { white-space: nowrap; margin-right: 3.2rem; }
.trust svg { color: var(--accent); }
.trust:hover ul { animation-play-state: paused; }
@keyframes rd-marquee { to { transform: translateX(-50%); } }

/* ---------- Títulos de sección editoriales ---------- */
section.block { padding: 6.5rem 0; }
h2.title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 400; letter-spacing: -0.015em; }
.kicker { counter-increment: none; }
.kicker::before { content: attr(data-n); font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.1rem; font-style: italic; letter-spacing: 0; color: var(--accent-ink); text-transform: none; }
.kicker:not([data-n])::before { display: none; }

/* ---------- Obras: presentación de museo ---------- */
#shop { background: var(--wall); }
.grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 3rem; align-items: center; }
.card { background: transparent; }
.card .ph {
  background: #fff; padding: 1.4rem; overflow: visible;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 30px 60px -20px rgba(var(--shade-rgb), 0.35), 0 12px 20px -12px rgba(var(--shade-rgb), .2);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.card .ph img { aspect-ratio: auto; height: auto; transition: none; }
.card:hover .ph img { transform: none; }
.card .ph .badge-avail { top: 2.2rem; left: 2.2rem; }
.card .body { padding: 1.8rem .2rem 0; }
.card .body h3 { font-size: 2rem; font-weight: 500; }
.card .price { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2rem; font-weight: 600; color: var(--rose-dark); }
.card-note { background: transparent; border: 0; border-left: 1px solid rgba(154,35,71,.25); padding: 0 0 0 2rem; }

.rd-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.rd-room-btn { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.rd-room-btn:hover { background: var(--ink); color: #fff; }
.rd-zoomable { cursor: zoom-in; }

/* ---------- Detalle de la obra ---------- */
.detail { background: var(--cream); }
.detail-grid .ph > img { aspect-ratio: auto; height: auto; background: #fff; padding: 1rem; box-shadow: 0 30px 60px -25px rgba(var(--shade-rgb), .35); }
.detail-grid .thumbs img { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.detail-grid .thumbs img:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -12px rgba(var(--shade-rgb), .35); }

/* ---------- Por qué Karina: banda oscura ---------- */
#why-karina { background: linear-gradient(160deg, var(--band) 0%, var(--band-2) 100%); color: var(--band-ink); }
#why-karina h2.title, #why-karina h3 { color: #fff; }
#why-karina .section-lede, #why-karina p { color: rgba(255, 243, 246, .86); }
#why-karina .kicker { color: var(--accent); }
#why-karina .kicker::after { background: var(--accent); }
#why-karina .why-grid { counter-reset: why; }
#why-karina .why-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(var(--accent-rgb), .28); position: relative; padding-top: 4.2rem;
  transition: background .4s ease, transform .4s var(--ease);
}
#why-karina .why-card:hover { background: rgba(255,255,255,.07); transform: translateY(-4px); }
#why-karina .why-card::before {
  counter-increment: why; content: "0" counter(why);
  position: absolute; top: 1rem; right: 1.4rem; font: italic 500 3.4rem/1 "Cormorant Garamond", Georgia, serif; color: rgba(var(--accent-rgb), .55);
}
#why-karina .why-card svg { color: var(--accent); }
#why-karina .sold-slot { background: rgba(255,255,255,.04); border: 1px solid rgba(var(--accent-rgb), .35); color: rgba(255,243,246,.86); }
#why-karina .sold-slot strong { color: var(--accent); }

/* ---------- Proceso: línea de tiempo ---------- */
.process { position: relative; }
.process figure { position: relative; }
.process figure img { border-radius: 2px; transition: transform .6s var(--ease), filter .6s ease; }
.process figure:hover img { transform: scale(1.02); }
.process figure { overflow: hidden; }
.process figcaption strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.5rem; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* En su caballete: collage asimétrico */
@media (min-width: 901px) {
  #on-her-easel .process { grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto; gap: 1.8rem; }
  #on-her-easel .process figure:first-child { grid-row: span 2; }
  #on-her-easel .process figure:first-child img { aspect-ratio: 4 / 5.2; }
  #on-her-easel .process figure:not(:first-child) img { aspect-ratio: 16 / 10; }
}
#on-her-easel figure:first-child::after {
  content: "● Nueva / New"; position: absolute; top: 1rem; left: 1rem;
  background: rgba(255,255,255,.92); color: var(--rose-dark); font-size: .66rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; padding: .45rem .75rem;
}

/* ---------- Espacios reservados: tarjetas elegantes ---------- */
.review-slot, .recent-slot, .press-slot, .reserved-video {
  background: #fff; border: 1px solid rgba(154,35,71,.12);
  box-shadow: 0 20px 40px -30px rgba(var(--shade-rgb), .35);
}
.review-slot .qmark { color: var(--accent-ink); font-size: 4.2rem; }
.recent-slot .photo-slot {
  border: 0; color: var(--rose-dark);
  background:
    repeating-linear-gradient(45deg, rgba(188,47,90,.06) 0 12px, transparent 12px 24px),
    var(--blush);
}
.reserved-video { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--band), var(--band-2)); color: var(--band-ink); border: 0; }
.reserved-video h3 { color: #fff; }
.reserved-video p { color: rgba(255,243,246,.85); }
.reserved-video svg { color: var(--accent); animation: rd-pulse 2.4s ease-in-out infinite; }
@keyframes rd-pulse { 50% { transform: scale(1.08); opacity: .8; } }
.timeline li.slot .when { color: var(--accent-ink); }

/* ---------- Acceso anticipado ---------- */
.band { background: linear-gradient(135deg, var(--band) 0%, var(--band-2) 100%); }

/* ---------- Revelado al desplazarse ---------- */
.js-rd .rv { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js-rd .rv.in { opacity: 1; transform: none; }

/* ---------- Visor de imágenes ---------- */
.rd-lb {
  position: fixed; inset: 0; z-index: 100; background: rgba(var(--overlay-rgb), .94);
  display: grid; place-items: center; padding: 3rem 4.5rem; opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.rd-lb.open { opacity: 1; pointer-events: auto; }
.rd-lb img { max-width: 100%; max-height: 82vh; width: auto; height: auto; box-shadow: 0 40px 80px rgba(0,0,0,.5); transform: scale(.96); transition: transform .45s var(--ease); cursor: zoom-in; }
.rd-lb.open img { transform: none; }
.rd-lb.zoom { overflow: auto; place-items: start center; }
.rd-lb.zoom img { max-width: none; max-height: none; width: 180%; cursor: zoom-out; }
.rd-lb p { color: #f3e3ea; font-size: .9rem; margin: 1rem 0 0; text-align: center; max-width: 46rem; }
.rd-lb button {
  position: absolute; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.25);
  width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.3rem; cursor: pointer; display: grid; place-items: center;
}
.rd-lb button:hover { background: rgba(255,255,255,.18); }
.rd-lb .x { top: 1.2rem; right: 1.2rem; }
.rd-lb .prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.rd-lb .next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---------- Ver en una sala ---------- */
.rd-room { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(var(--overlay-rgb), .9); padding: 1.2rem; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.rd-room.open { opacity: 1; pointer-events: auto; }
.rd-room .scene {
  position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px;
  background: linear-gradient(180deg, var(--room-wall) 0%, var(--room-wall-2) 72%, var(--room-floor) 72%, var(--room-floor-2) 100%);
  box-shadow: 0 40px 80px rgba(0,0,0,.45);
}
.rd-room .scene::before { /* luz de ventana */
  content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 20% 10%, rgba(255,250,240,.7), transparent 60%);
}
.rd-room .art {
  position: absolute; left: 50%; transform: translateX(-50%);
  /* sofá = 84 in = 52% del ancho de la escena; la pintura mide 24 x 30 in */
  width: calc(52% * 24 / 84); top: 24%; /* ~25 cm sobre el respaldo */
  background: #fff; padding: .35%; box-shadow: 0 18px 30px -12px rgba(0,0,0,.45);
}
.rd-room .art img { width: 100%; height: auto; aspect-ratio: 24 / 30; object-fit: cover; }
.rd-room svg.sofa { position: absolute; left: 24%; width: 52%; bottom: 13%; }
.rd-room svg.plant { position: absolute; right: 8%; bottom: 20%; width: 11%; }
.rd-room .caption { position: absolute; left: 0; right: 0; bottom: -3rem; text-align: center; color: #f3e3ea; font-size: .85rem; }
.rd-room .x { position: absolute; top: 1.2rem; right: 1.2rem; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.25); width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.3rem; cursor: pointer; }
.rd-room .wrapper { position: relative; width: min(1100px, 100%); }


/* ---------- Espacios listos para fotos y video ---------- */
.recent-slot .photo-slot.has-photo { padding: 0; background: #fff; border: 0; }
.recent-slot .photo-slot.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.review-slot .rd-review-photo { width: calc(100% + 3.6rem); max-width: none; margin: -1.8rem -1.8rem .6rem; aspect-ratio: 4 / 3; object-fit: cover; }
.detail-grid .thumbs.has-3 { grid-template-columns: repeat(3, 1fr); }
.detail-grid .thumbs.has-4 { grid-template-columns: 1fr 1fr; }
.reserved-video { min-height: 16rem; display: flex; flex-direction: column; justify-content: center; }
.reserved-video:not(.has-video)::after {
  content: "Coming soon"; position: absolute; top: 1rem; left: 1rem; font-size: .62rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--band); background: var(--accent); padding: .4rem .65rem;
}
html[lang="es"] .reserved-video:not(.has-video)::after { content: "Próximamente"; }
.reserved-video.has-video { padding: 0; min-height: 0; background: #000; display: block; }
.reserved-video.has-video video { display: block; width: 100%; max-height: 80vh; background: #000; }
.reserved-video.has-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ---------- Ajustes en celular ---------- */
@media (max-width: 900px) {
  .hero-grid { min-height: 0; padding-top: 2rem; grid-template-columns: 1fr; }
  .hero-photo { margin: 0.5rem auto 1.5rem; width: calc(100% - 2rem); }
  .hero-photo .tag { left: 6.4rem; right: -0.4rem; bottom: 1.4rem; }
  .rd-seal { width: 7rem; height: 7rem; left: -1rem; bottom: -1.5rem; }
  .rd-scroll { display: none; }
  .grid { grid-template-columns: 1fr; }
  .card-note { border-left: 0; border-top: 1px solid rgba(154,35,71,.25); padding: 1.5rem 0 0; }
  section.block { padding: 4.2rem 0; }
  .rd-lb { padding: 3.5rem 1rem; }
  .rd-lb .prev, .rd-lb .next { top: auto; bottom: 1rem; transform: none; }
  .rd-room .scene { aspect-ratio: 4 / 5; background: linear-gradient(180deg, var(--room-wall) 0%, var(--room-wall-2) 76%, var(--room-floor) 76%, var(--room-floor-2) 100%); }
  .rd-room .art { width: calc(84% * 24 / 84); top: 38%; }
  .rd-room svg.sofa { left: 8%; width: 84%; bottom: 11%; }
  .rd-room svg.plant { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-seal svg, .trust ul, .rd-scroll::after, .reserved-video svg { animation: none; }
  .js-rd .rv, .js-rd .hero h1 > span, .js-rd .hero .byline, .js-rd .hero .mission, .js-rd .hero .lede, .js-rd .hero-ctas, .js-rd .hero-photo { opacity: 1; transform: none; transition: none; }
  .card .ph { transform: none !important; }
}

/* Antes y ahora: foto chica del estado anterior sobre la pintura actual */
.antes-ahora { position: relative; overflow: hidden; }
.antes-ahora > img { display: block; width: 100%; }
.antes-ahora .antes { position: absolute; left: 0.8rem; bottom: 0.8rem; width: 25%; max-width: 130px; background: #fff; padding: 4px 4px 0; box-shadow: 0 10px 24px rgba(60, 30, 40, .28); transform: rotate(-3deg); }
.antes-ahora .antes img { display: block; width: 100%; aspect-ratio: 3 / 4 !important; object-fit: cover; border-radius: 0; }
.antes-ahora .antes em { display: block; font-style: normal; font-size: 0.7rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--muted); padding: 3px 0 4px; }
.process figure:hover .antes-ahora .antes img { transform: none; }