@charset "UTF-8";

/* Emotional interactions enhance an already readable page. No photograph moves. */
.meaning-section {
  --memory-ink: #68805b;
  --memory-surface: #e1e8d7;
  --memory-light: #afba7e;
  --memory-halo: rgba(182, 195, 142, .28);
}
.meaning-section[data-memory="gratitud"] {
  --memory-ink: #817551;
  --memory-surface: #eae6d7;
  --memory-light: #c1a473;
  --memory-halo: rgba(200, 179, 125, .24);
}
.meaning-section[data-memory="presencia"] {
  --memory-ink: #587969;
  --memory-surface: #dce7df;
  --memory-light: #a6bda7;
  --memory-halo: rgba(162, 191, 169, .27);
}
.meaning-art {
  position: relative;
  background-color: var(--memory-surface, #e1e8d7);
  transition: background-color .65s ease;
  isolation: isolate;
}
.meaning-art::after {
  content: '';
  position: absolute;
  inset: 10%;
  z-index: -1;
  background: radial-gradient(ellipse at center, var(--memory-halo) 0%, transparent 67%);
  pointer-events: none;
}
.tree-memory {
  display: block;
  width: min(100%, 370px);
  height: auto;
  max-height: 430px;
  overflow: visible;
  color: var(--memory-ink);
}
.meaning-art > .tree-memory { max-width: 76%; }
.tree-memory .memory-orbit {
  fill: none;
  stroke: var(--memory-ink);
  stroke-width: .8;
  opacity: .28;
  vector-effect: non-scaling-stroke;
}
.tree-memory .memory-trunk,
.tree-memory .memory-branch,
.tree-memory .memory-root {
  fill: none;
  stroke: var(--memory-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke .6s ease;
}
.tree-memory .memory-trunk { stroke-width: 2.25; }
.tree-memory .memory-branch, .tree-memory .memory-root { stroke-width: 1.55; }
.tree-memory .memory-bud {
  fill: var(--memory-light);
  stroke: var(--memory-ink);
  stroke-width: .7;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 1;
  transition: fill .6s, stroke .6s;
}
.tree-memory .memory-leaves {
  color: var(--memory-ink);
  fill: var(--memory-ink);
  fill-opacity: .12;
  stroke: var(--memory-ink);
  stroke-width: .9;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center bottom;
  opacity: 1;
}
.memory-copy { min-width: 0; }
.memory-choices { display: flex; flex-wrap: wrap; gap: 9px; margin: 23px 0 16px; }
#memory-line {
  color: #324e3c;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(28px, 2.5vw, 38px);
  line-height: 1.22;
  letter-spacing: -.015em;
  min-height: 2.65em;
  text-wrap: pretty;
}
.memory-copy [data-memory] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid #c1ceb4;
  border-radius: 99px;
  background: transparent;
  color: #586c4c;
  font-size: 14px;
  line-height: 1.4;
  transition: border-color .25s, color .25s, background-color .25s;
}
.memory-copy [data-memory]:hover,
.memory-copy [data-memory]:focus-visible { background: #e5ebda; border-color: #82956e; }
.memory-copy [data-memory][aria-pressed="true"] { background: #2e503b; border-color: #2e503b; color: #f8f7f2; }
#use-memory { min-height: 48px; font-size: 14px; background: transparent; }
#use-memory[data-used="true"] { border-color: #7c9368; }

/* Light remains a background accent; the full product image is untouched. */
.hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 18%, rgba(254, 247, 208, .45), transparent 54%);
  mix-blend-mode: soft-light;
}
.product-photo::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid #a2af86;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
}
.thumbnail { position: relative; }
.gallery-bow {
  position: absolute;
  top: 5px;
  right: 5px;
  display: block;
  width: 19px;
  height: 13px;
  opacity: .38;
  pointer-events: none;
}
.gallery-bow::before, .gallery-bow::after {
  content: '';
  position: absolute;
  top: 2px;
  width: 11px;
  height: 7px;
  border: 1px solid #9b7751;
}
.gallery-bow::before { left: 0; border-radius: 80% 25% 35% 25%; transform: rotate(21deg); }
.gallery-bow::after { right: 0; border-radius: 25% 80% 25% 35%; transform: rotate(-21deg); }
.memory-mote {
  position: absolute;
  z-index: 3;
  left: var(--mote-x, 50%);
  top: var(--mote-y, 58%);
  width: var(--mote-size, 4px);
  height: var(--mote-size, 4px);
  border-radius: 50%;
  opacity: 0;
  background: var(--memory-light, #b7bb85);
  box-shadow: 0 0 8px rgba(230, 222, 170, .28);
  pointer-events: none;
}
.button { position: relative; isolation: isolate; overflow: hidden; }
.whatsapp-float { isolation: isolate; overflow: hidden; }
.cta-ripple {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: rgba(216, 228, 191, .2);
  transform: translate(-50%, -50%) scale(.12);
}
.button-light .cta-ripple,
.memory-copy [data-memory]:not([aria-pressed="true"]) .cta-ripple { background: rgba(116, 143, 96, .17); }
.steps > li { --step-progress-delay: 0ms; }
.steps > li::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #8b9b72;
  transform-origin: left center;
  transform: scaleX(1);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .emotion-ready .memory-stroke {
    stroke-dasharray: var(--memory-path-length, 1);
    stroke-dashoffset: var(--memory-path-length, 1);
  }
  .emotion-ready .meaning-art:not(.is-memory-entered) .memory-bud { opacity: .15; }
  .emotion-ready .meaning-art:not(.is-memory-entered) .memory-leaves { opacity: .32; }
  .emotion-ready .meaning-art.is-memory-entered .memory-stroke {
    animation: memory-draw 1.65s cubic-bezier(.4, 0, .25, 1) var(--memory-path-delay, 0ms) both;
  }
  .emotion-ready .meaning-art.is-memory-entered .memory-bud {
    animation: memory-bloom .95s cubic-bezier(.22, 1, .36, 1) var(--memory-bud-delay, 700ms) both;
  }
  .emotion-ready .meaning-art.is-memory-entered .memory-leaves {
    animation: memory-leaf-open 1.15s cubic-bezier(.22, 1, .36, 1) 600ms both;
  }
  .meaning-art.is-memory-touched .memory-bud {
    animation: memory-bud-touch .85s cubic-bezier(.22, 1, .36, 1) var(--memory-touch-delay, 0ms) both !important;
  }
  #memory-line.is-memory-changing { animation: memory-phrase-arrive .48s cubic-bezier(.22, 1, .36, 1) both; }
  .hero-visual.is-hero-lit::after { animation: memory-ambient-light 2.6s ease-out both; }
  .product-photo.is-gallery-warm::after { animation: memory-gallery-glint .85s ease-out both; }
  .thumbnail.is-ribbon-lit .gallery-bow { animation: memory-ribbon .75s ease-out both; }
  .memory-mote { animation: memory-mote-rise 1.25s ease-out var(--mote-delay, 0ms) both; }
  .cta-ripple { animation: memory-ripple .62s ease-out both; }
  .emotion-ready .steps > li::before { transform: scaleX(0); }
  .emotion-ready .steps > li.is-step-reached::before { animation: memory-step-progress .85s cubic-bezier(.22, 1, .36, 1) var(--step-progress-delay, 0ms) both; }
  .emotion-ready .steps > li.is-step-reached .step-number { color: #6b7c50; }
  .emotion-ready .steps > li.is-step-reached .step-icon { animation: memory-step-icon .65s ease-out var(--step-progress-delay, 0ms) both; }

  [data-emotion-visible="false"] .memory-stroke,
  [data-emotion-visible="false"] .memory-bud,
  [data-emotion-visible="false"] .memory-leaves,
  [data-emotion-visible="false"] .memory-mote,
  [data-emotion-visible="false"].is-memory-changing,
  [data-emotion-visible="false"].is-ribbon-lit .gallery-bow,
  [data-emotion-visible="false"].is-hero-lit::after,
  [data-emotion-visible="false"].is-gallery-warm::after,
  [data-emotion-visible="false"].is-step-reached::before,
  [data-emotion-visible="false"].is-step-reached .step-icon,
  .emotion-document-paused .memory-stroke,
  .emotion-document-paused .memory-bud,
  .emotion-document-paused .memory-leaves,
  .emotion-document-paused .memory-mote,
  .emotion-document-paused .cta-ripple,
  .emotion-document-paused .is-memory-changing,
  .emotion-document-paused .is-ribbon-lit .gallery-bow,
  .emotion-document-paused .is-hero-lit::after,
  .emotion-document-paused .is-gallery-warm::after,
  .emotion-document-paused .is-step-reached::before,
  .emotion-document-paused .is-step-reached .step-icon { animation-play-state: paused !important; }
}

@keyframes memory-draw { to { stroke-dashoffset: 0; } }
@keyframes memory-bloom {
  0% { opacity: .15; transform: scale(.55); }
  65% { opacity: .9; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes memory-leaf-open { from { opacity: .32; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes memory-bud-touch { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 1; transform: scale(1.16); } }
@keyframes memory-phrase-arrive { from { opacity: .7; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes memory-ambient-light { 0% { opacity: 0; } 35% { opacity: .75; } 100% { opacity: 0; } }
@keyframes memory-gallery-glint { 0%, 100% { opacity: 0; } 35% { opacity: .65; } }
@keyframes memory-ribbon { 0%, 100% { opacity: .38; } 45% { opacity: 1; } }
@keyframes memory-mote-rise {
  0% { opacity: 0; transform: translate(0, 8px); }
  30% { opacity: .55; }
  100% { opacity: 0; transform: translate(var(--mote-drift, 7px), -33px); }
}
@keyframes memory-ripple { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes memory-step-progress { to { transform: scaleX(1); } }
@keyframes memory-step-icon { from { opacity: .6; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  #recuerdo { padding: 40px 6%; grid-template-columns: minmax(0, 1fr); gap: 0; }
  #recuerdo .memory-copy { display: contents; }
  #recuerdo .memory-copy.reveal { opacity: 1 !important; transform: none !important; }
  #recuerdo .memory-copy > .eyebrow { order: 1; margin-bottom: 18px; }
  #memory-title { order: 2; font-size: clamp(40px, 10.7vw, 49px); }
  #recuerdo .memory-copy > p:not(.eyebrow):not(#memory-line) { order: 3; margin-top: 20px; margin-bottom: 20px; }
  #recuerdo .meaning-art { order: 4; min-height: 275px; height: 275px; padding: 18px 0 38px; margin: 0 0 4px; border-radius: 7px; }
  #recuerdo .tree-lines { width: 185px; }
  #recuerdo .tree-lines::before { inset: -5px -12px; }
  .tree-memory { max-height: 235px; }
  .meaning-art > span { bottom: 13px; font-size: 9px; }
  .memory-choices { order: 5; margin: 18px 0; }
  #memory-line { order: 6; font-size: 30px; min-height: 2.6em; margin-top: 0; }
  #use-memory { order: 7; justify-self: start; margin-top: 16px; margin-bottom: 0; }
  .memory-copy [data-memory] { padding: 10px 15px; font-size: 14px; }
  .gallery-bow { top: 3px; right: 3px; width: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .meaning-art, .tree-memory *, .memory-copy [data-memory] { transition: none !important; }
  .emotion-ready .memory-stroke { stroke-dashoffset: 0 !important; }
  .emotion-ready .memory-bud, .emotion-ready .memory-leaves, #memory-line { opacity: 1 !important; transform: none !important; }
  .memory-mote, .cta-ripple, .hero-visual::after, .product-photo::after { display: none !important; }
  .emotion-ready .steps > li::before { transform: scaleX(1) !important; }
  .emotion-ready .steps > li .step-icon { opacity: 1 !important; transform: none !important; }
}