html { scroll-behavior: smooth; }

/* ---------- barra superior ---------- */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 4vw, 48px);
}
.barra nav { display: flex; gap: 6px; }
.barra nav a {
  font: 500 13px/1 var(--display); text-decoration: none;
  padding: 9px 14px; border-radius: 999px; transition: background .2s, color .2s;
}
.barra nav a:hover, .barra nav a.activo { background: var(--noche); color: var(--cielo); }

/* ---------- la historia: escenario fijo mientras se baja ---------- */
.historia { position: relative; }
.js .historia { height: 720vh; }
.escenario {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  padding: 80px clamp(16px, 5vw, 72px) 40px; gap: clamp(16px, 4vw, 56px);
}
.js .escenario { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

.flor-caja { position: relative; display: grid; place-items: center; }
.flor { width: min(42vw, 72vh); height: auto; overflow: visible; }
.petalo { cursor: pointer; }
.petalo .lobulo { fill: var(--noche); transition: filter .2s; }
.petalo:hover .lobulo, .petalo:focus-visible .lobulo { filter: brightness(1.18); }
.petalo text {
  fill: var(--cielo); font: 500 7.4px var(--display); letter-spacing: .05em;
  text-transform: uppercase; text-anchor: middle; dominant-baseline: middle; pointer-events: none;
}
/* El centro es del color del fondo; cuando se caen todos los pétalos queda como botón del color de la flor */
.centro { fill: var(--cielo); transition: fill .6s ease; }
.centro-link.listo .centro { fill: var(--noche); }
.centro-txt {
  fill: var(--cielo); font: 900 15px var(--display); text-anchor: middle;
  dominant-baseline: middle; opacity: 0; transition: opacity .4s; pointer-events: none;
}
.centro-link { pointer-events: none; }
.centro-link.listo { pointer-events: auto; cursor: pointer; }
.centro-link.listo .centro-txt { opacity: 1; }
.centro-link.listo .centro { animation: latido 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes latido { 50% { transform: scale(1.06); } }

.deshoje {
  margin-top: 10px; font: italic 500 15px/1 var(--display); color: var(--vino);
  min-height: 1em; text-align: center;
}

/* ---------- propuesta /?flor=colores: fondo y flor cambian por sección ----------
   Usa las parejas de la marca (fondo + flor). El JS pone --fondo y --tinta en <html>. */
.flor-colores body { background: var(--fondo, var(--cielo)); transition: background-color .6s ease; }
.flor-colores .barra, .flor-colores .deshoje, .flor-colores .marca { color: var(--tinta, var(--noche)); transition: color .6s ease; }
.flor-colores .barra nav a:hover, .flor-colores .barra nav a.activo { background: var(--tinta, var(--noche)); color: var(--fondo, var(--cielo)); }
.flor-colores .petalo .lobulo { transition: fill .6s ease, filter .2s; }
.flor-colores .petalo text, .flor-colores .centro-txt { transition: fill .6s ease, opacity .4s; }
/* La tarjeta va del color de la flor, con letras del color del fondo */
.flor-colores .tarjeta { background: var(--tinta); color: var(--fondo); transition: background-color .6s ease, color .6s ease; }
.flor-colores .tarjeta .pie-tarjeta .boton { background: var(--fondo); color: var(--tinta); }
.flor-colores .tarjeta .tienda li,
.flor-colores .tarjeta .contactos a { background: color-mix(in srgb, currentColor 12%, transparent); }
.flor-colores .tarjeta .tienda .tipo { color: inherit; opacity: .75; }
.flor-colores .tarjeta .tienda a { color: inherit; }
.flor-colores .tarjeta .contactos a:hover { background: var(--fondo); color: var(--tinta); }
.flor-colores .tarjeta .obra:focus-visible { outline-color: var(--fondo); }

/* ---------- lado derecho: marca y paneles ---------- */
.lado { position: relative; display: grid; gap: 24px; }
.js .lado { display: block; height: min(560px, 100%); }
.js .marca, .js .panel {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.js .panel:not(.visible), .js .marca.oculto { opacity: 0; transform: translateY(28px); pointer-events: none; visibility: hidden; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1), visibility 0s .5s; }

.marca h1 {
  font: 900 clamp(56px, 8.4vw, 132px)/.86 var(--display); letter-spacing: -0.055em;
}
.marca p { margin-top: 22px; max-width: 30ch; font-size: 17px; line-height: 1.5; }
.marca .pista {
  margin-top: 34px; font: 500 13px var(--display); letter-spacing: .12em; text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.marca .pista::before { content: ""; width: 28px; height: 2px; background: currentColor; }

.tarjeta {
  border-radius: 28px; padding: clamp(22px, 3vw, 40px);
  max-height: 100%; overflow: auto;
}
.t-noche { background: var(--noche); color: var(--cielo); }
.t-vino { background: var(--vino); color: var(--mantequilla); }
.t-mantequilla { background: var(--mantequilla); color: var(--vino); }
.t-papel { background: var(--papel); color: var(--noche); }

.ceja { font: 500 12px var(--display); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.tarjeta h2 {
  font: 900 clamp(34px, 4.2vw, 58px)/.95 var(--display); letter-spacing: -0.04em; margin: 10px 0 16px;
}
.tarjeta p { font-size: 16px; line-height: 1.6; max-width: 46ch; }
.tarjeta p + p { margin-top: 10px; }

.servicios { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
.servicios li { border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent); padding-top: 10px; }
.servicios b { display: block; font: 700 17px var(--display); margin-bottom: 3px; }
.servicios span { font-size: 14px; line-height: 1.45; opacity: .85; }

.pasos { list-style: none; padding: 0; counter-reset: paso; display: grid; gap: 12px; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 44px 1fr; align-items: baseline; }
.pasos li::before { content: counter(paso); font: 900 30px/1 var(--display); }
.pasos b { font: 700 17px var(--display); }
.pasos span { display: block; font-size: 14px; line-height: 1.45; }

/* ---------- portafolio ---------- */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.galeria.completa { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.obra {
  all: unset; box-sizing: border-box; cursor: pointer; display: block; position: relative;
  aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; background: var(--cielo);
  transition: transform .25s;
}
.obra:hover { transform: translateY(-3px) rotate(-.6deg); }
.obra:focus-visible { outline: 3px solid var(--mantequilla); outline-offset: 3px; }
.obra img { width: 100%; height: 100%; object-fit: cover; }
.obra .relleno { width: 100%; height: 100%; display: grid; place-items: center; }
.obra .relleno svg { width: 40%; }
.obra .etiqueta {
  position: absolute; left: 8px; right: 8px; bottom: 8px; width: fit-content; max-width: calc(100% - 16px);
  font: 500 11px/1.25 var(--display); background: var(--papel); color: var(--noche);
  padding: 4px 9px; border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-cielo { background: var(--cielo); } .c-vino { background: var(--vino); }
.c-mantequilla { background: var(--mantequilla); } .c-noche { background: var(--noche); }

.pie-tarjeta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pie-tarjeta:empty { display: none; }
.pie-tarjeta .boton { background: var(--mantequilla); color: var(--noche); padding: 11px 18px; font-size: 14px; }
.aviso { font-size: 13px; line-height: 1.45; background: var(--cielo); color: var(--noche); padding: 10px 14px; border-radius: 12px; }
.vacio { grid-column: 1 / -1; font-size: 15px; line-height: 1.5; }
.vacio a { font-weight: 600; }

/* ---------- tienda ---------- */
.tienda { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tienda.completa { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.tienda li {
  background: color-mix(in srgb, var(--cielo) 12%, transparent); border-radius: 16px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.tienda.completa li { background: var(--papel); color: var(--noche); }
.tienda .foto { aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; margin-bottom: 6px; }
.tienda .foto img { width: 100%; height: 100%; object-fit: cover; }
.tienda .tipo { font: 500 11px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--mantequilla); }
.tienda.completa .tipo { color: var(--vino); }
.tienda b { font: 700 17px var(--display); }
.tienda .desc { font-size: 13.5px; line-height: 1.45; opacity: .85; }
.tienda .precio { font: 700 15px var(--display); }
.tienda a {
  margin-top: auto; padding-top: 6px; align-self: flex-start;
  font: 700 13px var(--display); color: var(--mantequilla); text-decoration: none;
}
.tienda.completa a { color: var(--vino); }
.tienda a:hover { text-decoration: underline; }

/* ---------- contacto ---------- */
.contactos { display: grid; gap: 10px; margin-top: 18px; }
.contactos a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  text-decoration: none; padding: 15px 18px; border-radius: 16px;
  background: color-mix(in srgb, var(--cielo) 14%, transparent); transition: background .2s, transform .2s;
}
.contactos a:hover { background: var(--cielo); color: var(--noche); transform: translateX(4px); }
.contactos b { font: 700 16px var(--display); }
.contactos span { font-size: 14px; opacity: .85; }

/* ---------- ventanas (portafolio completo, visor, tienda) ---------- */
.ventana {
  width: min(960px, calc(100% - 32px)); max-height: calc(100% - 48px); margin: auto;
  border: 0; border-radius: 28px; padding: clamp(18px, 3vw, 32px);
  background: var(--papel); color: var(--noche);
}
.ventana::backdrop { background: rgb(20 51 69 / .6); backdrop-filter: blur(4px); }
.ventana[open] { animation: aparecer .35s cubic-bezier(.2,.8,.2,1); }
@keyframes aparecer { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.ventana-cabeza { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 18px; }
.ventana h2 { font: 900 clamp(28px, 4vw, 44px)/1 var(--display); letter-spacing: -0.04em; }
.cerrar {
  flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--noche); color: var(--cielo); font-size: 17px;
}
.visor { width: min(760px, calc(100% - 32px)); }
.visor-cuerpo { display: grid; gap: 16px; justify-items: start; }
.visor-imagen { width: 100%; border-radius: 18px; overflow: hidden; background: var(--papel); }
.visor-imagen img { width: 100%; max-height: 70vh; object-fit: contain; }
.visor-imagen .relleno { aspect-ratio: 4/3; display: grid; place-items: center; }
.visor-imagen .relleno svg { width: 30%; }
.visor p { font-size: 16px; line-height: 1.6; }
.visor p:empty, .visor a[hidden] { display: none; }

/* ---------- pie ---------- */
.pie {
  background: var(--noche); color: var(--cielo); text-align: center;
  padding: 26px 16px; font: 700 14px var(--display); letter-spacing: .1em; text-transform: uppercase;
}
.pie small { display: block; margin-top: 8px; font: 400 12px var(--texto); letter-spacing: 0; text-transform: none; opacity: .75; }

/* ---------- sin JavaScript: todo apilado ---------- */
html:not(.js) .escenario { grid-template-columns: 1fr; }
html:not(.js) .flor { width: min(70vw, 360px); }

/* ---------- móvil ---------- */
@media (max-width: 820px) {
  .barra nav { display: none; }
  .logo { font-size: 19px; }
  .escenario { grid-template-columns: 1fr; padding: 64px 16px 16px; gap: 6px; }
  .js .escenario { grid-template-rows: auto 1fr; align-items: start; }
  .flor { width: min(58vw, 34vh); }
  .deshoje { font-size: 13px; margin-top: 4px; }
  .js .lado { height: 100%; }
  .js .marca, .js .panel { justify-content: flex-start; }
  .marca { text-align: center; align-items: center; }
  .marca h1 { font-size: clamp(48px, 15vw, 72px); }
  .marca p { font-size: 15px; margin-top: 14px; }
  .tarjeta { border-radius: 22px; padding: 20px; }
  .tarjeta h2 { font-size: 30px; margin: 6px 0 10px; }
  .tarjeta p { font-size: 14.5px; }
  .servicios { grid-template-columns: 1fr; gap: 8px; }
  .servicios span, .pasos span { font-size: 13px; }
  .pasos { gap: 8px; }
  .galeria { gap: 8px; }
  .galeria.completa { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tienda { gap: 8px; }
  .tienda li { padding: 12px; }
  .tienda b { font-size: 15px; }
  .tienda .desc { font-size: 12.5px; }
  .tienda.completa { grid-template-columns: 1fr; }
  .contactos a { padding: 12px 14px; }
  .ventana { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .marca, .js .panel { transform: none !important; }
  .centro-link.listo .centro, .ventana[open] { animation: none; }
  .obra:hover { transform: none; }
}