:root {
  --cream: #f3ead4;
  --cream-strong: #fbf6e6;
  --cream-soft: #ece2c4;
  --parchment: #f7eed7;
  --ink: #142318;
  --muted: #6a604c;
  --green: #1f3a25;
  --green-deep: #102217;
  --green-soft: #d6e0c5;
  --leaf: #5b7a4c;
  --wine: #7a1d2e;
  --wine-deep: #5a1422;
  --wine-light: #93283d;
  --gold: #b8842b;
  --gold-soft: rgba(184, 132, 43, 0.55);
  --line: rgba(122, 95, 49, 0.22);
  --shadow-soft: 0 18px 36px rgba(31, 39, 29, 0.12);
  --shadow-wine: 0 18px 40px rgba(122, 29, 46, 0.32);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 86% -10%, rgba(214, 224, 197, 0.6), transparent 30rem),
    radial-gradient(circle at -8% 110%, rgba(184, 132, 43, 0.08), transparent 28rem),
    linear-gradient(160deg, var(--cream-strong), var(--cream) 55%, var(--parchment));
  font-family: var(--sans);
}

button,
a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  color: inherit;
  font-family: inherit;
}

/* ============ Layout shell ============ */

.app-shell {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  min-height: 100vh;
}

.side-rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  padding: 2rem 1.75rem 1.75rem;
  background: linear-gradient(180deg, rgba(247, 238, 215, 0.95), rgba(238, 226, 197, 0.88));
  border-right: 1px solid var(--line);
  box-shadow: 12px 0 36px rgba(31, 39, 29, 0.06);
  z-index: 10;
}

.rail-top {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.brand-mark {
  width: 2.6rem;
  height: 2.6rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(122, 29, 46, 0.18));
}

.brand-copy strong {
  display: block;
  color: var(--wine-deep);
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

.brand-copy small {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.rail-nav {
  display: grid;
  gap: 0.7rem;
}

.rail-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  min-height: 3.1rem;
  padding: 0 1.05rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.rail-link:hover {
  background: rgba(122, 29, 46, 0.08);
}

.rail-link.active {
  background: var(--wine);
  color: #fff7ea;
  box-shadow: 0 14px 24px rgba(122, 29, 46, 0.22);
}

.rail-link-icon {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
}

.rail-link-label {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.rail-footer {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--wine-deep);
  font-family: var(--serif);
}

.rail-footer span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.rail-grapes {
  width: 2.6rem;
  height: 2.6rem;
  object-fit: contain;
  opacity: 0.9;
}

/* ============ Workspace ============ */

.workspace {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 100vh;
  padding: 1.6rem 2.6rem 2rem;
  overflow: hidden;
}

.workspace::before {
  content: "";
  position: absolute;
  right: 2.5rem;
  bottom: 1.5rem;
  width: 5rem;
  height: 5rem;
  background: url("imagenes/UVA Racimo.png") center / contain no-repeat;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.linkprove-watermark {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  font-family: var(--serif);
  color: var(--wine-deep, #5a1a2a);
  white-space: nowrap;
}

.linkprove-watermark-text {
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.04em;
}

.linkprove-watermark-logo {
  height: 1.2rem;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ============ Vine stage ============ */

.vine-stage {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 6rem);
  scrollbar-width: thin;
  scrollbar-color: rgba(94, 122, 82, 0.45) transparent;
}

.vine-stage::-webkit-scrollbar {
  width: 8px;
}

.vine-stage::-webkit-scrollbar-thumb {
  background: rgba(94, 122, 82, 0.45);
  border-radius: 4px;
}

.vine-stage::-webkit-scrollbar-track {
  background: transparent;
}

.vine-cluster {
  position: relative;
  width: 100%;
  height: var(--cluster-height, 44rem);
}

.vine-cluster > .center-node {
  top: 6.5rem;
}

.results-vine-stage {
  min-height: calc(100vh - 6rem);
}

.vine-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.vine-group {
  animation: revealGroup 0.85s cubic-bezier(0.2, 0.72, 0.16, 1) forwards;
  animation-delay: var(--vine-delay, 0ms);
  opacity: 0;
}

.vine-path {
  fill: none;
  stroke: url(#vineGradient);
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* Sin filter: drop-shadow aqui. Un drop-shadow sobre un trazo que anima
     stroke-dashoffset se re-rasteriza en cada frame y era la causa principal
     de la traba en equipos de 1 nucleo. */
  animation: drawVine 0.95s cubic-bezier(0.2, 0.72, 0.16, 1) forwards;
  animation-delay: inherit;
}

.vine-curl {
  fill: none;
  stroke: url(#vineGradient);
  stroke-width: 0.24;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.85;
  animation: drawVine 0.7s ease-out forwards;
  animation-delay: calc(var(--vine-delay, 0ms) + 350ms);
}

.vine-leaf {
  opacity: 0;
  animation: leafPop 0.5s ease-out forwards;
  animation-delay: calc(var(--vine-delay, 0ms) + 500ms);
}

.vine-flourish .vine-path {
  stroke-width: 0.22;
  opacity: 0.78;
}

.vine-flourish .vine-curl {
  stroke-width: 0.2;
  opacity: 0.7;
}

.vine-flourish .vine-leaf {
  opacity: 0;
  animation: leafPop 0.5s ease-out forwards;
  animation-delay: calc(var(--vine-delay, 0ms) + 600ms);
}

.vine-branch-path,
.vine-branch-curl {
  fill: none;
  stroke: url(#vineGradient);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: drawVine 0.7s ease-out forwards;
  animation-delay: calc(var(--vine-delay, 0ms) + 700ms);
  opacity: 0.85;
}

.vine-branch-path {
  stroke-width: 0.22;
}

.vine-branch-curl {
  stroke-width: 0.2;
  animation-delay: calc(var(--vine-delay, 0ms) + 850ms);
}

.vine-branch-leaf {
  opacity: 0;
  animation: leafPop 0.5s ease-out forwards;
  animation-delay: calc(var(--vine-delay, 0ms) + 950ms);
}

@keyframes drawVine {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes revealGroup {
  to {
    opacity: 1;
  }
}

@keyframes leafPop {
  to {
    opacity: 0.9;
  }
}

/* ============ Nodes ============ */

.explore-node {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  /* place-items centra el item DENTRO de su track, pero cuando el circulo es
     mas alto que el texto la fila se ubicaba arriba (align-content por defecto
     = start) y el texto quedaba pegado al borde superior. align-content:center
     centra el track => texto centrado verticalmente. Es inerte en el flex de
     una sola linea de la lista movil, asi que no la afecta. */
  align-content: center;
  cursor: pointer;
  border: none;
  background: transparent;
  transition:
    left 0.52s cubic-bezier(0.2, 0.72, 0.16, 1),
    top 0.52s cubic-bezier(0.2, 0.72, 0.16, 1),
    width 0.52s cubic-bezier(0.2, 0.72, 0.16, 1),
    height 0.52s cubic-bezier(0.2, 0.72, 0.16, 1),
    background 0.4s ease,
    color 0.4s ease,
    box-shadow 0.3s ease,
    opacity 0.3s ease;
}

.explore-node:focus-visible,
.ghost-button:focus-visible,
.back-link:focus-visible,
.primary-cta:focus-visible,
.secondary-cta:focus-visible,
.search-fab:focus-visible,
.rail-link:focus-visible,
.icon-button:focus-visible,
.filter-card summary:focus-visible,
.search-popover input:focus-visible {
  outline: 3px solid rgba(184, 132, 43, 0.62);
  outline-offset: 4px;
}

.explore-node:disabled {
  cursor: default;
  opacity: 0.4;
}

.node-copy {
  display: grid;
  gap: 0;
  padding: 0 0.55rem;
  text-align: center;
  /* Que el bloque de texto nunca exceda el ancho del nodo (evita que palabras
     largas empujen el contenido fuera del circulo). */
  min-width: 0;
  max-width: 100%;
}

.node-copy strong {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  /* Palabras siempre enteras: nunca cortar con guion ni partir la palabra. */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  -webkit-hyphens: none;
}

.node-copy small {
  color: currentColor;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.3;
  opacity: 0.78;
  text-transform: uppercase;
}

.center-node .node-copy small,
.child-node .node-copy small,
.result-node .node-copy small,
.back-node .node-copy small {
  display: none;
}

/* El centro aprovecha todo el ancho interior: sin el padding lateral de
   .node-copy gana ~18px utiles, suficiente para que palabras largas entren
   enteras incluso en el circulo minimo. */
.center-node .node-copy {
  padding-left: 0;
  padding-right: 0;
}

.center-node .node-copy strong {
  -webkit-line-clamp: 3;
}

.child-node .node-copy strong {
  -webkit-line-clamp: 4;
}

.result-node .node-copy strong {
  -webkit-line-clamp: 3;
}

.back-node .node-copy strong {
  -webkit-line-clamp: 2;
}

/* ----- Central node ----- */

.center-node {
  left: 50%;
  top: 18%;
  /* Circulo de tamaño FIJO (no width:auto): asi app.js puede medir un diametro
     estable y achicar la tipografia con fitCenterNode() hasta que la palabra
     mas larga entre ENTERA, sin desbordar ni partirse (misma idea que los
     granos con fitGrapes). Con width:auto + overflow-wrap el circulo se
     encogia al minimo y partia las palabras. */
  width: clamp(9.5rem, 13vw, 13rem);
  height: clamp(9.5rem, 13vw, 13rem);
  aspect-ratio: 1;
  /* Padding mas contenido => mas ancho útil para el texto dentro del circulo
     (ayuda a que las palabras largas entren enteras, sobre todo en ventanas
     angostas donde el circulo cae a su tamaño minimo). */
  padding: 0.9rem 1rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 250, 230, 0.18), transparent 65%),
    radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.18), transparent 60%),
    var(--green);
  border: 3px solid var(--gold);
  box-shadow:
    inset 0 0 0 6px rgba(255, 250, 230, 0.06),
    0 0 0 8px rgba(184, 132, 43, 0.18),
    0 0 36px rgba(184, 132, 43, 0.28),
    0 34px 70px rgba(23, 59, 39, 0.42);
  color: #fdf6e3;
  transform: translate(-50%, -50%);
}

.center-node::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: url("imagenes/UVA Racimo.png") center / 95% no-repeat;
  opacity: 0.18;
  mix-blend-mode: screen;
  pointer-events: none;
}

.center-node:hover {
  box-shadow:
    inset 0 0 0 6px rgba(255, 250, 230, 0.08),
    0 0 0 10px rgba(184, 132, 43, 0.22),
    0 36px 72px rgba(23, 59, 39, 0.42);
}

.center-node .node-copy strong {
  /* Font mas contenida para que las palabras largas (p. ej. "fraccionamiento")
     entren enteras dentro del circulo en la mayoria de los casos. */
  font-size: clamp(0.95rem, 1.25vw, 1.4rem);
  line-height: 1.1;
  /* overflow-wrap: anywhere (NO break-word): ademas de permitir el quiebre,
     reduce el tamaño min-content del texto, por lo que una palabra mas ancha
     que el circulo se parte en vez de desbordar el borde. break-word no
     alcanzaba (no achica el min-content y la palabra seguia saliendose).
     Anula el word-break: keep-all heredado, solo para el nodo central. */
  overflow-wrap: anywhere;
  word-break: normal;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.center-node .node-copy small {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  opacity: 0.85;
  margin-top: 0.4rem;
}

/* ----- Child / area nodes ----- */

.child-node {
  left: var(--x);
  top: var(--y);
  /* Tamaño uniforme para TODOS los granos: el valor por defecto es idéntico
     para todos; app.js puede fijar --grape-size una vez (mismo valor en todos). */
  width: var(--grape-size, clamp(7rem, 7.6vw, 9rem));
  height: var(--grape-size, clamp(7rem, 7.6vw, 9rem));
  min-width: 0;
  max-width: none;
  aspect-ratio: 1;
  padding: 0.6rem 0.8rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 250, 230, 0.18), transparent 60%),
    var(--wine);
  border: 2px solid var(--gold);
  color: #fff7ea;
  /* Sombra mas equilibrada verticalmente (antes var(--shadow-wine) = 0 18px):
     un desplazamiento grande hacia abajo daba peso visual inferior y hacia
     percibir el texto "alto" aunque esta centrado de forma exacta. */
  box-shadow:
    inset 0 0 0 4px rgba(255, 250, 230, 0.06),
    0 0 0 5px rgba(184, 132, 43, 0.12),
    0 7px 26px rgba(122, 29, 46, 0.28);
  transform: translate(-50%, -50%);
  /* Reposo VISIBLE = estilo base (opacity:1, posicion final). El keyframe "to"
     de nodePop es identico a esta base, y se usa fill-mode "backwards" (NO
     forwards/both): asi la animacion solo aplica el "from" durante el --delay
     (conserva el escalonado) y al terminar SUELTA el control, dejando que el
     grano se pinte desde su estilo base por la via normal de render.
     Esto evita el glitch de composicion de Chromium por el que el estado final
     "retenido" de un forwards no se repintaba y el grano quedaba invisible
     hasta pasar el mouse por encima. */
  opacity: 1;
  animation: nodePop 0.55s cubic-bezier(0.2, 0.72, 0.16, 1) backwards;
  animation-delay: var(--delay, 0ms);
}

.child-node:hover {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 250, 230, 0.22), transparent 60%),
    var(--wine-light);
  box-shadow:
    inset 0 0 0 4px rgba(255, 250, 230, 0.08),
    0 0 0 7px rgba(184, 132, 43, 0.2),
    0 22px 48px rgba(122, 29, 46, 0.38);
}

.child-node .node-copy strong {
  font-size: var(--grape-font, clamp(0.72rem, 0.85vw, 0.95rem));
  letter-spacing: 0.005em;
}

.child-node .node-copy small {
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  opacity: 0.75;
  margin-top: 0.2rem;
}

.child-node.no-animate {
  animation: none;
  opacity: 1;
  transform: translate(-50%, -50%);
}

.child-node .node-icon,
.child-node .node-chevron {
  display: none;
}

.child-node.moving {
  left: 50% !important;
  top: 6.5rem !important;
  width: auto;
  height: auto;
  min-width: clamp(8.5rem, 13vw, 13rem);
  min-height: clamp(8.5rem, 13vw, 13rem);
  max-width: 13rem;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 250, 230, 0.18), transparent 65%),
    var(--green);
  border-color: var(--gold);
  color: #fdf6e3;
  box-shadow:
    inset 0 0 0 6px rgba(255, 250, 230, 0.06),
    0 0 0 8px rgba(184, 132, 43, 0.18),
    0 0 36px rgba(184, 132, 43, 0.28),
    0 34px 70px rgba(23, 59, 39, 0.42);
  z-index: 6;
  opacity: 1;
  animation: centerBloom 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.child-node.moving .node-copy strong {
  font-size: clamp(1.25rem, 1.7vw, 1.85rem);
}

@keyframes centerBloom {
  from {
    transform: translate(-50%, -50%) scale(0.72);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes nodePop {
  from {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* ----- Result nodes (search) ----- */

.result-node {
  /* Mismo tamaño uniforme que el resto de los granos (hereda de .child-node). */
  min-width: 0;
  min-height: 0;
  max-width: none;
}

.result-node .node-copy strong {
  font-size: var(--grape-font, 0.9rem);
}

/* ----- Back node (small tendril, left of center) ----- */

.back-node {
  left: var(--x);
  top: var(--y);
  width: auto;
  height: auto;
  min-width: 7rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 252, 240, 0.95), rgba(247, 238, 215, 0.95));
  border: 1.5px solid var(--green);
  color: var(--green-deep);
  box-shadow: 0 14px 24px rgba(23, 59, 39, 0.18);
  transform: translate(-50%, -50%);
  opacity: 1;
  animation: backPop 0.5s cubic-bezier(0.2, 0.72, 0.16, 1) backwards;
  animation-delay: 200ms;
  z-index: 5;
}

.vine-cluster > .back-node {
  top: 6.5rem;
}

.vine-back {
  position: absolute;
  top: 6.5rem;
  left: 22%;
  width: 28%;
  height: 5rem;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}

.vine-back-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.vine-back-svg .vine-path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.4px;
}

.vine-back-leaf {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(18deg);
}

.back-node:hover {
  background: linear-gradient(135deg, rgba(214, 224, 197, 0.95), rgba(247, 238, 215, 0.95));
  box-shadow: 0 18px 30px rgba(23, 59, 39, 0.22);
}

.back-node .node-copy {
  gap: 0.05rem;
  padding: 0 0.25rem;
}

.back-node .node-copy strong {
  font-size: 0.78rem;
  color: var(--green-deep);
  line-height: 1.05;
}

.back-node .node-copy small {
  font-size: 0.46rem;
  letter-spacing: 0.16em;
  color: var(--muted);
}

@keyframes backPop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============ Modo bajo consumo (reduce-fx) ============ */
/* app.js agrega .reduce-fx al <html> en equipos de 1-2 nucleos / <=2 GB o
   cuando el usuario pidio "reducir movimiento". Se omiten TODAS las
   animaciones de entrada del explorador: la composicion final (vides, granos y
   hojas) se ve igual, pero se pinta una sola vez en lugar de animarse frame a
   frame. Asi se elimina la traba en hardware limitado. */
.reduce-fx .child-node,
.reduce-fx .result-node,
.reduce-fx .back-node {
  animation: none !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
}

.reduce-fx .child-node.moving {
  animation: none !important;
}

.reduce-fx .vine-group,
.reduce-fx .vine-flourish {
  animation: none !important;
  opacity: 1 !important;
}

.reduce-fx .vine-path,
.reduce-fx .vine-curl,
.reduce-fx .vine-branch-path,
.reduce-fx .vine-branch-curl {
  animation: none !important;
  stroke-dashoffset: 0 !important;
}

.reduce-fx .vine-leaf,
.reduce-fx .vine-branch-leaf {
  animation: none !important;
  opacity: 0.9 !important;
}

/* ============ Status bar (bottom-left) ============ */

.status-bar {
  position: relative;
  z-index: 5;
  align-self: end;
  justify-self: start;
  max-width: 38rem;
  padding: 0.6rem 0;
  color: var(--ink);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.status-bar strong {
  display: inline;
  margin-right: 0.2rem;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.status-bar span {
  color: var(--muted);
}

/* ============ Search dock & popover ============ */

.search-dock {
  position: absolute;
  top: 1.6rem;
  right: 2.6rem;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
}

.search-dock .search-popover {
  order: -1;
}

.scroll-top-fab {
  display: none;
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 20;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--green);
  color: #fdf6e3;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(23, 59, 39, 0.32);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.scroll-top-fab.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.search-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 2.8rem;
  height: 2.8rem;
  padding: 0 0.9rem;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  background: rgba(255, 252, 240, 0.95);
  box-shadow: 0 10px 20px rgba(31, 39, 29, 0.1);
  color: var(--wine-deep);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.search-fab.ghost {
  color: var(--muted);
  background: transparent;
  border-color: var(--line);
}

.search-fab:hover {
  background: var(--cream-strong);
  box-shadow: 0 14px 26px rgba(31, 39, 29, 0.12);
}

.search-fab.open {
  background: var(--wine);
  color: #fff7ea;
  border-color: var(--wine);
}

.search-popover {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 2.8rem;
  padding: 0 1.05rem;
  border-radius: 999px;
  background: var(--cream-strong);
  border: 1px solid var(--gold-soft);
  box-shadow: 0 10px 24px rgba(31, 39, 29, 0.14);
  color: var(--wine);
  transform-origin: right center;
  overflow: hidden;
  animation: searchGrow 0.46s cubic-bezier(0.22, 0.9, 0.24, 1) forwards;
}

.search-popover input {
  width: 18rem;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: 0;
  font: inherit;
  color: var(--ink);
}

@keyframes searchGrow {
  0% {
    max-width: 0;
    opacity: 0;
    transform: scaleX(0.35);
    filter: blur(6px);
  }
  55% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    max-width: 26rem;
    opacity: 1;
    transform: scaleX(1);
  }
}

/* ============ Filter drawer (slides from right) ============ */

.filter-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(26rem, 92vw);
  z-index: 40;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  padding: 1.6rem 1.4rem;
  border-left: 1px solid var(--line);
  background: rgba(255, 252, 240, 0.98);
  box-shadow: -22px 0 44px rgba(31, 39, 29, 0.2);
  transform: translateX(100%);
  animation: drawerIn 0.36s cubic-bezier(0.2, 0.72, 0.16, 1) forwards;
}

@keyframes drawerIn {
  to {
    transform: translateX(0);
  }
}

.filter-drawer-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.filter-drawer-head h2 {
  margin: 0;
  color: var(--green-deep);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.1;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 252, 240, 0.95);
  color: var(--wine-deep);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.icon-button:hover {
  background: var(--cream-strong);
}

.filter-list {
  display: grid;
  gap: 0.55rem;
  overflow: auto;
  padding-right: 0.25rem;
  align-content: start;
}

.filter-card {
  margin: 0;
  max-height: auto;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: rgba(251, 246, 230, 0.85);
  overflow: hidden;

}

.filter-card[open] {
  max-height: 100%;
  background: rgba(251, 246, 230, 1);
  box-shadow: 0 8px 18px rgba(31, 39, 29, 0.08);
}

.filter-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  list-style: none;
}

.filter-card summary::-webkit-details-marker {
  display: none;
}

.filter-card-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--wine);
  color: #fff7ea;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.filter-card-chevron {
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  transition: transform 0.25s ease;
}

.filter-card[open] .filter-card-chevron {
  transform: rotate(180deg);
}

.filter-card .option-list {
  display: grid;
  gap: 0.4rem;
  max-height: 16rem;
  overflow: auto;
  padding: 0.2rem 0.9rem 0.9rem;
}

.check-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.35;
  cursor: pointer;
}

.check-field input {
  margin-top: 0.18rem;
  accent-color: var(--wine);
}

.filter-drawer-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.3rem;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ghost-button:hover {
  background: var(--cream-strong);
  color: var(--wine-deep);
}

/* ============ Offer card & overlay ============ */

.offer-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: rgba(20, 35, 24, 0.45);
  backdrop-filter: blur(6px);
  animation: overlayIn 0.28s ease-out;
}

.offer-overlay .offer-card {
  width: min(64rem, 100%);
  max-height: 90vh;
  overflow: auto;
  animation: overlayCardIn 0.36s cubic-bezier(0.2, 0.72, 0.16, 1);
}

@keyframes overlayIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes overlayCardIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.offer-card {
  position: relative;
  overflow: hidden;
  padding: 3rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background:
    radial-gradient(circle at 92% 8%, rgba(214, 224, 197, 0.85), transparent 18rem),
    rgba(255, 252, 240, 0.96);
  box-shadow: var(--shadow-soft);
}

.offer-card-compact {
  padding: 2.2rem;
}

.offer-card-header {
  max-width: 56rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0 1rem;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  background: var(--cream-strong);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.offer-card h2 {
  margin: 1.2rem 0 1rem;
  color: var(--green-deep);
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1.05;
}

.offer-card-header p,
.offer-summary-block p {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.65;
}

.offer-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 2.2rem;
  margin-top: 2rem;
}

.offer-main-copy h3,
.offer-summary-block h3 {
  margin: 0 0 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  color: var(--green-deep);
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.15;
}

.offer-main-copy ul {
  display: grid;
  gap: 0.7rem;
  margin: 0 0 1.4rem;
  padding-left: 1.2rem;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
}

.icon-list {
  padding-left: 0;
  list-style: none;
}

.icon-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}

.icon-list svg {
  margin-top: 0.2rem;
  color: var(--green);
}

.offer-side-panel {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: rgba(251, 246, 230, 0.85);
}

.offer-detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  color: var(--ink);
  line-height: 1.45;
}

.offer-detail-icon {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--wine);
}

.offer-detail strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.offer-price {
  margin-top: 0.6rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.offer-price strong,
.offer-price span {
  display: block;
}

.offer-price strong {
  color: var(--gold);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.offer-price span {
  margin-top: 0.3rem;
  font-weight: 800;
}

.offer-card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: end;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.offer-note {
  margin: 0;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.offer-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.primary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 3.2rem;
  padding: 0 1.7rem;
  border-radius: 999px;
  background: var(--wine);
  color: #fff7ea;
  box-shadow: 0 16px 28px rgba(122, 29, 46, 0.24);
  font-weight: 900;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s ease;
}

.primary-cta:hover {
  background: var(--wine-deep);
}

.secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.2rem;
  padding: 0 1.4rem;
  border: 1.5px solid var(--green);
  border-radius: 999px;
  background: rgba(255, 252, 240, 0.95);
  color: var(--green-deep);
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.06em;
  transition: background 0.2s ease, color 0.2s ease;
}

.secondary-cta:hover {
  background: var(--green);
  color: #fdf6e3;
}

/* ============ Detail page ============ */

.detail-page {
  min-height: 100vh;
  padding: 3rem;
  background:
    radial-gradient(circle at 86% 8%, rgba(214, 224, 197, 0.7), transparent 20rem),
    var(--cream);
}

.detail-shell {
  max-width: 70rem;
  margin: 0 auto;
}

.detail-shell h1 {
  margin: 0;
  color: var(--green-deep);
  font-family: var(--serif);
  font-size: 2.6rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 252, 240, 0.95);
  color: var(--wine-deep);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.back-link:hover {
  border-color: var(--gold-soft);
}

.eyebrow {
  margin: 0 0 0.4rem;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ============ Responsive ============ */

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .side-rail {
    position: relative;
    height: auto;
    padding: 1rem 1.25rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    gap: 1.25rem;
  }

  .rail-top {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
  }

  .rail-nav {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .rail-link-label {
    font-size: 0.9rem;
  }

  .rail-footer {
    display: none;
  }

  .workspace {
    padding: 1.4rem 1.4rem 2.4rem;
  }

  .search-dock {
    top: 1.2rem;
    right: 1.4rem;
  }

}

@media (max-width: 760px) {
  .workspace {
    padding: 1rem 1rem 2rem;
  }

  .rail-link {
    display: none;
  }

  .scroll-top-fab {
    display: flex;
  }

  .vine-stage {
    min-height: auto;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    padding: 0 0 2rem 1.6rem;
    position: relative;
  }

  .vine-cluster {
    display: contents;
    height: auto;
    min-height: 0;
  }

  .vine-cluster > .center-node {
    top: auto;
  }

  .vine-stage::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 7.5rem;
    bottom: 1rem;
    width: 1px;
    background: rgba(94, 122, 82, 0.45);
  }

  .vine-svg,
  .vine-back {
    display: none;
  }

  .center-node {
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--green);
    padding: 0.5rem 0 1rem;
    transform: none;
    animation: none;
    opacity: 1;
    text-align: left;
    justify-content: flex-start;
  }

  .center-node .node-copy {
    align-items: flex-start;
    text-align: left;
  }

  .center-node .node-copy strong {
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.05;
    letter-spacing: 0;
    color: var(--green-deep, #173b27);
    text-transform: none;
  }

  .center-node .node-copy small {
    display: none;
  }

  .child-node {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 5.2rem;
    aspect-ratio: auto;
    border-radius: 16px;
    padding: 1.05rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    /* Reset del transform de escritorio (translate(-50%,-50%)): en la lista
       móvil el nodo es position:relative, así que ese transform lo empujaría
       fuera de pantalla. Debe estar en la base porque el fill-mode "backwards"
       (ver comentario abajo) NO conserva el estado final de la animación. */
    transform: none;
    /* Reposo visible = base; fill-mode "backwards" (ver nota en .child-node de
       escritorio): conserva el escalonado durante el --delay y suelta el estado
       final para que el item se pinte desde su base, evitando el grano que
       quedaba invisible hasta el hover. */
    opacity: 1;
    animation: listItemIn 0.26s cubic-bezier(0.2, 0.72, 0.16, 1) backwards;
    animation-delay: var(--delay, 0ms);
    box-shadow:
      0 6px 16px rgba(122, 29, 46, 0.25),
      inset 0 0 0 1px rgba(255, 250, 230, 0.08);
  }

  @keyframes listItemIn {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .child-node::before {
    content: "";
    position: absolute;
    left: -1.2rem;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green, #5e7a52);
    transform: translateY(-50%);
    box-shadow: 0 0 0 2px var(--cream, #faf5e6);
  }

  .child-node .node-icon {
    display: none;
  }

  .child-node .node-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .child-node .node-copy {
    flex: 1 1 auto;
    align-items: flex-start;
    text-align: left;
    gap: 0.15rem;
  }

  .child-node .node-copy strong {
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    color: #fff7ea;
  }

  .child-node .node-copy small {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    opacity: 0.8;
  }

  .child-node .node-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: rgba(255, 247, 234, 0.85);
  }

  .back-node {
    position: static;
    left: auto !important;
    top: auto !important;
    width: auto;
    align-self: flex-start;
    height: auto;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    font-size: 0.78rem;
    margin-bottom: 0.25rem;
    /* Reset del transform de escritorio (translate(-50%,-50%)): en la lista
       móvil el back-node es position:static, así que ese transform lo empujaba
       fuera de pantalla por la izquierda una vez terminada la animación (quedaba
       recortado "…r a Explorar oferta"). Igual que .child-node. */
    transform: none;
    /* Visible por defecto: la animación de entrada es solo un realce. Antes el
       reposo era opacity:0 y la visibilidad dependía de que listItemIn llegara
       a completarse; al reseleccionar en móvil la animación no siempre corría y
       el botón "Volver a…" quedaba invisible. */
    opacity: 1;
    animation: listItemIn 0.26s cubic-bezier(0.2, 0.72, 0.16, 1) backwards;
  }

  .back-node .node-copy strong {
    font-size: 0.85rem;
  }

  .back-node .node-copy small {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .child-node,
    .back-node {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }

  .result-node {
    width: 100% !important;
    height: auto !important;
  }

  .search-popover input {
    width: 12rem;
  }

  .offer-card,
  .offer-card-compact {
    padding: 1.2rem;
  }

  .offer-card h2 {
    font-size: 1.8rem;
  }

  .offer-card-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    margin-top: 1.6rem;
  }

  .offer-card-footer {
    grid-template-columns: 1fr;
  }

  .primary-cta,
  .secondary-cta {
    width: 100%;
  }

  .filter-drawer {
    width: 100vw;
    padding: 1.2rem 1rem;
  }

  .offer-overlay {
    padding: 0.8rem;
  }

  .detail-page {
    padding: 1rem;
  }

  .detail-shell h1 {
    font-size: 1.9rem;
  }
}

/* ============ Forms ============ */

.form-page {
  min-height: 100vh;
  padding: 2.5rem 1.5rem 4rem;
  display: flex;
  justify-content: center;
}

.form-shell {
  width: min(960px, 100%);
  background: var(--cream-strong);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  padding: 2.5rem clamp(1.25rem, 3vw, 3rem) 2.75rem;
}

.form-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

.form-eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.6rem;
}

.form-header h1 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--green-deep);
  margin: 0 0 0.5rem;
  letter-spacing: 0.01em;
}

.form-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.5;
}

.form-section {
  border: none;
  border-top: 2px solid var(--gold-soft);
  padding: 1.6rem 0 0.4rem;
  margin: 0 0 1.6rem;
}

.form-section > legend {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--wine);
  padding: 0 0.6rem 0 0;
  letter-spacing: 0.02em;
}

.form-section .section-hint {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0.3rem 0 1.2rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem 1.4rem;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 1rem;
}

.form-row.full {
  grid-column: 1 / -1;
}

.form-row > label,
.field-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green-deep);
}

.field-num {
  color: var(--gold);
  font-weight: 700;
  margin-right: 0.4rem;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="url"],
.form-row input[type="tel"],
.form-row input[type="date"],
.form-row input[type="number"],
.form-row select,
.form-row textarea {
  font: inherit;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.form-row textarea {
  min-height: 88px;
  resize: vertical;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(122, 29, 46, 0.12);
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.45rem 1rem;
  margin: 0.3rem 0 0.6rem;
}

.option-grid label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.94rem;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.35;
}

.option-grid input[type="checkbox"],
.option-grid input[type="radio"] {
  margin-top: 0.2rem;
  accent-color: var(--wine);
}

.area-block {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem 0.6rem;
  margin: 0.4rem 0 1rem;
  background: rgba(247, 238, 215, 0.6);
}

.area-block > h4 {
  margin: 0 0 0.6rem;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--green);
  letter-spacing: 0.02em;
}

.inline-other {
  margin-top: 0.4rem;
  display: none;
}

.inline-other.is-visible {
  display: block;
}

.inline-other input {
  width: 100%;
}

.form-row input.is-invalid,
.form-row select.is-invalid,
.form-row textarea.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: #c0392b !important;
  background-color: #fdecea !important;
}

.option-grid.is-invalid {
  outline: 2px solid #c0392b;
  outline-offset: 4px;
  border-radius: 6px;
  background-color: rgba(192, 57, 43, 0.05);
}

.cuit-status {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: var(--ink-soft, #666);
  min-height: 1.1em;
}

.cuit-status.is-loading { color: #8a6d3b; }
.cuit-status.is-success { color: #2e7d32; }
.cuit-status.is-error { color: #c0392b; }
.cuit-status.is-info { color: #4a5868; }

/* Banner mostrado cuando se detecta una institución ya registrada por CUIT */
.institution-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.6rem 0 1rem;
  padding: 0.75rem 0.9rem;
  background: #eaf3fb;
  border: 1px solid #b6d4ec;
  border-left: 4px solid #2c7fb8;
  border-radius: 6px;
  color: #1f3a52;
  font-size: 0.92rem;
}
.institution-banner-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}
.institution-banner-body { flex: 1; }
.institution-banner-body strong { display: block; margin-bottom: 0.1rem; }
.institution-banner-actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.institution-banner .btn-edit-entidad {
  font-size: 0.85rem;
  padding: 0.3rem 0.7rem;
  background: #fff;
  border: 1px solid #2c7fb8;
  color: #1f3a52;
  border-radius: 4px;
  cursor: pointer;
}
.institution-banner .btn-edit-entidad:hover { background: #f4faff; }
.institution-banner.is-editing {
  background: #fff7e6;
  border-color: #e0b566;
  border-left-color: #c08a1e;
  color: #6b4a16;
}

/* Sección bloqueada cuando se cargan datos institucionales preexistentes */
.form-section.section-locked input:not([type="button"]):not([type="submit"]),
.form-section.section-locked select,
.form-section.section-locked textarea {
  background: #f4f5f7;
  cursor: not-allowed;
}
.form-section.section-locked .option-grid,
.form-section.section-locked .repeater,
.form-section.section-locked .btn-ghost,
.form-section.section-locked .btn-remove {
  pointer-events: none;
  opacity: 0.75;
}

.repeater {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.3rem 0 0.6rem;
}

.repeater-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 0.6rem;
}

.repeater-row input {
  font: inherit;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
}

.btn-ghost {
  align-self: flex-start;
  background: transparent;
  border: 1px dashed var(--gold);
  color: var(--wine);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.88rem;
}

.btn-ghost:hover {
  background: rgba(184, 132, 43, 0.08);
}

.btn-remove {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--wine);
  border-radius: 8px;
  padding: 0 0.7rem;
  cursor: pointer;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.btn-submit {
  background: var(--wine);
  color: var(--cream-strong);
  border: none;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-wine);
  transition: background 120ms ease, transform 120ms ease;
}

.btn-submit:hover {
  background: var(--wine-deep);
}

.btn-submit:active {
  transform: translateY(1px);
}

.btn-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.form-status {
  font-size: 0.95rem;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  display: none;
}

.form-status.is-success {
  display: inline-block;
  background: var(--green-soft);
  color: var(--green-deep);
  border: 1px solid rgba(91, 122, 76, 0.4);
}

.form-status.is-error {
  display: inline-block;
  background: rgba(122, 29, 46, 0.1);
  color: var(--wine-deep);
  border: 1px solid rgba(122, 29, 46, 0.3);
}

/* Aviso de suscripción mensual junto al botón de envío. */
.form-consent {
  flex-basis: 100%;
  margin: 0.35rem 0 0;
  padding: 0.85rem 1.05rem;
  background: rgba(122, 29, 46, 0.05);
  border: 1px solid rgba(122, 29, 46, 0.18);
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--wine-deep);
}

.form-consent strong {
  font-weight: 600;
}

.declaration label {
  display: flex;
  gap: 0.6rem;
  margin: 0.5rem 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.declaration input {
  margin-top: 0.25rem;
  accent-color: var(--wine);
}

@media (max-width: 640px) {
  .repeater-row {
    grid-template-columns: 1fr;
  }
}

/* ====== Lista de ofertas ya cargadas por la entidad (lookup por CUIT) ====== */
.actividades-cargadas {
  margin: 0.6rem 0 1rem;
  padding: 0.85rem 1rem;
  background: var(--cream-strong);
  border: 1px solid var(--gold-soft);
  border-radius: 10px;
}
.actividades-cargadas h4 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--wine-deep);
}
.actividades-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.actividades-lista li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0.6rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.9rem;
}
.actividades-lista .act-titulo { font-weight: 600; color: var(--ink, #142318); }
.actividades-lista .act-fecha { color: var(--gold); white-space: nowrap; }
.actividades-aviso {
  margin: 0.7rem 0 0;
  font-size: 0.85rem;
  color: var(--wine-deep);
}
.actividades-aviso a { color: var(--wine); font-weight: 600; }
.actividades-vacio { margin: 0; font-size: 0.9rem; color: var(--muted, #6a604c); }

/* Tabla de ofertas ya cargadas (Paso 1) */
.actividades-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.actividades-tabla thead th {
  text-align: left;
  background: var(--green, #1f3a25);
  color: var(--cream-strong);
  padding: 0.5rem 0.7rem;
  font-weight: 600;
}
.actividades-tabla tbody td {
  padding: 0.45rem 0.7rem;
  border-top: 1px solid var(--line);
}
.actividades-tabla tbody tr:nth-child(even) { background: var(--cream-strong); }
.actividades-tabla td:last-child { white-space: nowrap; color: var(--wine-deep); }

/* ====== Wizard de 2 pasos del formulario de oferta ====== */
.form-page[data-step="1"] .step-2-only,
.form-page[data-step="1"] .btn-prev-step { display: none; }
.form-page[data-step="2"] .step-1-only,
.form-page[data-step="2"] .btn-next-step { display: none; }
.form-page[data-step="all"] .btn-next-step,
.form-page[data-step="all"] .btn-prev-step { display: none; }

.btn-next-step { margin-top: 1.2rem; }
.btn-prev-step { margin-bottom: 0.6rem; }

/* Asterisco de campo obligatorio */
.req-asterisk {
  color: var(--wine, #7a1d2e);
  font-weight: 700;
  margin-left: 0.15rem;
}
.required-note {
  font-size: 0.85rem;
  color: var(--muted, #6a604c);
  margin: 0.35rem 0 0;
}
.required-note .req-asterisk { margin: 0 0.15rem 0 0; }

/* Grupos de selección múltiple obligatorios (áreas temáticas, etc.) */
[data-require-group].is-invalid {
  outline: 2px solid #c0392b;
  outline-offset: 4px;
  border-radius: 6px;
  background-color: rgba(192, 57, 43, 0.05);
}

/* Botón "Agregar otra actividad" que aparece tras un envío exitoso */
.form-status .btn-add-another {
  display: inline-block;
  margin-top: 0.6rem;
}

/* Banner de modo edición (enlace que comparte el admin) */
.edit-banner {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  background: #fff7e6;
  border: 1px solid #e0b566;
  border-left: 4px solid #c08a1e;
  border-radius: 6px;
  color: #6b4a16;
  font-size: 0.92rem;
}

/* ====== Modal de revisión antes de enviar ====== */
.review-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 35, 24, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 1000;
}
.review-modal {
  background: var(--cream-strong);
  border: 1px solid var(--gold-soft);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(20, 35, 24, 0.35);
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.review-modal h2 {
  margin: 0;
  padding: 1.1rem 1.4rem;
  font-size: 1.2rem;
  color: var(--wine-deep);
  border-bottom: 1px solid var(--line);
}
.review-body {
  padding: 1rem 1.4rem;
  overflow: auto;
}
.review-section { margin-bottom: 1.1rem; }
.review-section h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  color: var(--green-deep);
  border-bottom: 1px dashed var(--gold-soft);
  padding-bottom: 0.2rem;
}
.review-section dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(9rem, 38%) 1fr;
  gap: 0.25rem 0.8rem;
}
.review-section dt { font-weight: 600; color: var(--muted, #6a604c); font-size: 0.85rem; }
.review-section dd { margin: 0; font-size: 0.88rem; word-break: break-word; }
.review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.8rem;
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--line);
  background: var(--cream);
}
.review-actions .btn-submit { margin: 0; }

@media (max-width: 640px) {
  .review-section dl { grid-template-columns: 1fr; }
  .actividades-lista li { flex-direction: column; gap: 0.2rem; }
}