:root {
  --bg:
    #f7f1e7;

  --surface:
    rgba(255, 253, 248, 0.92);

  --surface-solid:
    #fffdf8;

  --surface-soft:
    #f1e6d5;

  --text:
    #33271f;

  --text-soft:
    #76665a;

  --accent:
    #a95e2f;

  --accent-dark:
    #7d3f1f;

  --accent-soft:
    #ead4bd;

  --border:
    #dfd1bf;

  --line:
    #d5c2aa;

  --shadow:
    0 10px 35px
    rgba(71, 46, 27, 0.08);

  --radius:
    18px;
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: var(--text);

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(255,255,255,.95),
      transparent 35%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(92,63,39,.018) 0,
      rgba(92,63,39,.018) 1px,
      transparent 1px,
      transparent 5px
    ),
    var(--bg);

  min-height: 100vh;
}


button,
a {
  font: inherit;
}


button {
  cursor: pointer;
}


[hidden] {
  display: none !important;
}


/* =========================
   HEADER
   ========================= */

.site-header {
  background:
    rgba(255, 253, 248, 0.92);

  backdrop-filter:
    blur(10px);

  border-bottom:
    1px solid var(--border);
}


.header-inner {
  max-width: 1180px;
  min-height: 78px;

  margin: 0 auto;
  padding: 0 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}


.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;

  color: var(--text);
  text-decoration: none;
}


.brand-mark {
  width: 42px;
  height: 42px;

  border:
    1px solid var(--accent-soft);

  border-radius:
    50% 50% 46% 54%;

  display: grid;
  place-items: center;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 15px;
  font-weight: 700;

  color:
    var(--accent-dark);

  background:
    #f6eadb;
}


.brand-copy {
  display: flex;
  flex-direction: column;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  line-height: 1.05;
}


.brand-copy strong {
  font-size: 18px;
}


.brand-copy span {
  font-size: 16px;
}


.whatsapp-button {
  min-height: 42px;

  padding:
    0 16px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  border-radius:
    8px;

  background:
    var(--accent);

  color:
    white;

  font-size:
    13px;

  font-weight:
    600;

  text-decoration:
    none;

  box-shadow:
    0 5px 15px
    rgba(122, 62, 31, .14);
}


.whatsapp-button:hover {
  background:
    var(--accent-dark);
}


/* =========================
   HERO
   ========================= */

.tracking-hero {
  max-width:
    1180px;

  min-height:
    245px;

  margin:
    0 auto;

  padding:
    48px 40px;

  position:
    relative;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  border-bottom:
    1px solid
    rgba(186, 157, 124, .35);
}


.hero-content {
  position:
    relative;

  z-index:
    2;

  max-width:
    650px;
}


.hero-eyebrow,
.section-eyebrow {
  margin:
    0 0 8px;

  color:
    var(--accent);

  font-size:
    12px;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    .12em;
}


.tracking-hero h1 {
  margin:
    0 0 12px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      34px,
      5vw,
      53px
    );

  line-height:
    1.02;

  font-weight:
    500;
}


.hero-description {
  margin:
    0;

  max-width:
    560px;

  color:
    var(--text-soft);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    16px;

  line-height:
    1.65;
}


.hero-decoration {
  position:
    absolute;

  opacity:
    .17;

  pointer-events:
    none;
}


.hero-decoration svg {
  width:
    100%;

  height:
    100%;

  fill:
    none;

  stroke:
    var(--accent-dark);

  stroke-width:
    1.4;
}


.hero-decoration-left {
  width:
    220px;

  height:
    160px;

  left:
    -105px;

  bottom:
    -30px;
}


.hero-decoration-right {
  width:
    280px;

  height:
    190px;

  right:
    25px;

  bottom:
    -28px;
}


/* =========================
   MAIN
   ========================= */

.tracking-container {
  width:
    min(
      calc(100% - 40px),
      1120px
    );

  margin:
    -18px auto 70px;

  position:
    relative;

  z-index:
    3;
}


/* =========================
   SUMMARY
   ========================= */

.order-summary {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  background:
    var(--surface-solid);

  border:
    1px solid var(--border);

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow);

  overflow:
    hidden;
}


.summary-item {
  min-height:
    108px;

  padding:
    23px 25px;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  position:
    relative;
}


.summary-item:not(:last-child)::after {
  content:
    "";

  position:
    absolute;

  right:
    0;

  top:
    22px;

  bottom:
    22px;

  width:
    1px;

  background:
    var(--border);
}


.summary-icon {
  width:
    35px;

  height:
    35px;

  flex:
    0 0 auto;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--accent-soft);

  border-radius:
    50%;

  color:
    var(--accent);
}


.summary-item span {
  display:
    block;

  margin-bottom:
    5px;

  color:
    var(--text-soft);

  font-size:
    11px;
}


.summary-item strong {
  display:
    block;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    17px;
}


.accent-text {
  color:
    var(--accent-dark);
}


/* =========================
   PRODUCTS
   ========================= */

.products-section {
  margin-top:
    38px;
}


.section-heading {
  margin-bottom:
    18px;
}


.section-heading h2 {
  margin:
    0 0 6px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    25px;

  font-weight:
    500;
}


.section-heading p:not(.section-eyebrow) {
  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    14px;
}


.product-card {
  margin-bottom:
    18px;

  padding:
    24px;

  background:
    var(--surface);

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  box-shadow:
    0 7px 24px
    rgba(73, 48, 28, .045);
}


.product-header {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    24px;

  margin-bottom:
    22px;
}


.product-title h3 {
  margin:
    0 0 5px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    21px;
}


.product-title p {
  margin:
    0;

  color:
    var(--text-soft);

  font-size:
    13px;
}


.product-personalization {
  max-width:
    430px;

  margin:
    10px 0 0;

  color:
    var(--text-soft);

  font-size:
    13px;

  line-height:
    1.5;
}


.product-percent {
  min-width:
    72px;

  text-align:
    right;
}


.product-percent strong {
  display:
    block;

  color:
    var(--accent);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    26px;
}


.product-percent span {
  color:
    var(--text-soft);

  font-size:
    11px;
}


/* =========================
   PROGRESS
   ========================= */

.product-progress {
  margin-bottom:
    28px;
}


.progress-track {
  height:
    6px;

  background:
    #e7ddd0;

  border-radius:
    999px;

  overflow:
    hidden;
}


.progress-fill {
  width:
    0;

  height:
    100%;

  background:
    linear-gradient(
      90deg,
      var(--accent-dark),
      var(--accent)
    );

  border-radius:
    inherit;

  transition:
    width .45s ease;
}


/* =========================
   TIMELINE
   ========================= */

.product-timeline {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    repeat(
      7,
      minmax(80px, 1fr)
    );

  gap:
    0;

  overflow-x:
    auto;

  padding:
    8px 2px 4px;

  scrollbar-width:
    thin;
}


.timeline-step {
  min-width:
    90px;

  position:
    relative;

  text-align:
    center;

  padding:
    0 6px;
}


.timeline-step::before {
  content:
    "";

  position:
    absolute;

  top:
    11px;

  left:
    0;

  right:
    0;

  height:
    1px;

  background:
    var(--line);

  z-index:
    0;
}


.timeline-step:first-child::before {
  left:
    50%;
}


.timeline-step:last-child::before {
  right:
    50%;
}


.step-dot {
  width:
    23px;

  height:
    23px;

  margin:
    0 auto 9px;

  position:
    relative;

  z-index:
    2;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    #cbbba8;

  border-radius:
    50%;

  background:
    var(--surface-solid);

  color:
    transparent;

  font-size:
    11px;
}


.timeline-step.completed
.step-dot {
  border-color:
    var(--accent);

  background:
    var(--accent);

  color:
    white;
}


.timeline-step.current
.step-dot {
  border:
    2px solid
    var(--accent);

  background:
    var(--surface-solid);

  box-shadow:
    0 0 0 4px
    rgba(169, 94, 47, .12);

  color:
    var(--accent);
}


.step-label {
  display: block;
  color: var(--text-soft);
  font-size: 11px;
  line-height: 1.3;
}


.timeline-step.current
.step-label {
  color:
    var(--accent-dark);

  font-weight:
    700;
}


/* =========================
   HISTORY
   ========================= */

.history-section {
  margin-top:
    25px;

  padding-top:
    22px;

  border-top:
    1px solid
    var(--border);
}


.history-title {
  margin:
    0 0 14px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    16px;
}


.history-list {
  display:
    grid;

  gap:
    14px;
}


.history-entry {
  padding:
    15px 17px;

  border-left:
    2px solid
    var(--accent-soft);

  background:
    rgba(245, 236, 224, .48);

  border-radius:
    0 9px 9px 0;
}


.history-heading {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;
}


.history-heading strong {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    15px;
}


.history-heading time {
  color:
    var(--text-soft);

  font-size:
    11px;
}


.history-entry p {
  margin:
    8px 0 0;

  color:
    var(--text-soft);

  font-size:
    13px;

  line-height:
    1.5;
}


/* =========================
   PHOTOS
   ========================= */

.history-images {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-top:
    13px;
}


.history-image-button {
  width:
    88px;

  height:
    88px;

  padding:
    0;

  border:
    1px solid
    var(--border);

  border-radius:
    10px;

  overflow:
    hidden;

  background:
    #efe7dc;

  cursor: zoom-in;
}

.history-image-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


.history-image-button img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform .25s ease;
}


.history-image-button:hover img {
  transform:
    scale(1.05);
}


/* =========================
   NOTE
   ========================= */

.tracking-note {
  margin-top:
    25px;

  padding:
    18px 20px;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  background:
    rgba(255, 253, 248, .65);

  border:
    1px solid
    var(--border);

  border-radius:
    13px;
}


.note-icon {
  width:
    37px;

  height:
    37px;

  flex:
    0 0 auto;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--accent-soft);

  border-radius:
    50%;

  color:
    var(--accent);
}


.tracking-note p {
  margin:
    0;

  color:
    var(--text-soft);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    13px;

  line-height:
    1.55;
}


/* =========================
   STATES
   ========================= */

.page-state {
  max-width:
    550px;

  margin:
    70px auto;

  padding:
    45px 24px;

  text-align:
    center;
}


.page-state strong {
  display:
    block;

  margin-top:
    15px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    20px;
}


.page-state span,
.page-state p {
  color:
    var(--text-soft);
}


.loading-spinner {
  width:
    34px;

  height:
    34px;

  margin:
    0 auto;

  border:
    3px solid
    var(--accent-soft);

  border-top-color:
    var(--accent);

  border-radius:
    50%;

  animation:
    spin .8s linear
    infinite;
}


@keyframes spin {
  to {
    transform:
      rotate(360deg);
  }
}


.state-icon {
  width:
    50px;

  height:
    50px;

  margin:
    0 auto 18px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--accent);

  border-radius:
    50%;

  color:
    var(--accent);

  font-size:
    22px;
}


.secondary-link-button {
  min-height:
    43px;

  margin-top:
    12px;

  padding:
    0 18px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    var(--accent);

  border-radius:
    8px;

  color:
    var(--accent-dark);

  text-decoration:
    none;
}


/* =========================
   LIGHTBOX
   ========================= */

.image-lightbox {
  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  padding:
    35px;

  background:
    rgba(25, 18, 13, .91);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.image-lightbox img {
  display:
    block;

  max-width:
    min(100%, 1050px);

  max-height:
    calc(100vh - 70px);

  border-radius:
    10px;

  object-fit:
    contain;
}


.lightbox-close {
  width:
    44px;

  height:
    44px;

  position:
    absolute;

  right:
    20px;

  top:
    20px;

  border:
    1px solid
    rgba(255,255,255,.4);

  border-radius:
    50%;

  background:
    rgba(0,0,0,.2);

  color:
    white;

  font-size:
    28px;
}


/* =========================
   FOOTER
   ========================= */

.site-footer {
  min-height:
    95px;

  padding:
    25px max(24px, calc((100% - 1120px) / 2));

  border-top:
    1px solid
    var(--border);

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  background:
    rgba(255, 253, 248, .55);
}


.site-footer div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.site-footer strong {
  font-family:
    Georgia,
    "Times New Roman",
    serif;
}


.site-footer span,
.site-footer a {
  color:
    var(--text-soft);

  font-size:
    12px;
}


.site-footer a {
  text-decoration:
    none;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 760px) {

  .header-inner {
    min-height: 64px;
    padding: 0 14px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .brand-copy strong {
    font-size: 16px;
  }

  .brand-copy span {
    font-size: 14px;
  }

  .whatsapp-button {
    width: 42px;
    min-height: 42px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }

  .whatsapp-button span {
    font-size: 17px;
  }


  /* =========================
     HERO
     ========================= */

  .tracking-hero {
    min-height: 185px;

    padding:
      28px 20px
      38px;
  }

  .tracking-hero h1 {
    margin-bottom: 10px;

    font-size:
      clamp(
        35px,
        11vw,
        46px
      );

    line-height: 0.98;
  }

  .hero-eyebrow {
    margin-bottom: 7px;
    font-size: 11px;
  }

  .hero-description {
    max-width: 92%;

    font-size: 15px;
    line-height: 1.55;
  }

  .hero-decoration-left {
    width: 150px;
    height: 115px;

    left: -75px;
    bottom: -20px;
  }

  .hero-decoration-right {
    width: 165px;
    height: 125px;

    right: -45px;
    bottom: -10px;
  }


  /* =========================
     MAIN
     ========================= */

  .tracking-container {
    width:
      min(
        calc(100% - 26px),
        1120px
      );

    margin-top: -20px;
    margin-bottom: 42px;
  }


  /* =========================
     SUMMARY
     ========================= */

  .order-summary {
    grid-template-columns: 1fr;

    border-radius: 16px;
  }

  .summary-item {
    min-height: auto;

    padding:
      14px 18px;

    gap: 12px;
  }

  .summary-item:not(:last-child)::after {
    left: 18px;
    right: 18px;

    top: auto;
    bottom: 0;

    width: auto;
    height: 1px;
  }

  .summary-icon {
    width: 34px;
    height: 34px;
  }

  .summary-item span {
    margin-bottom: 3px;
    font-size: 10px;
  }

  .summary-item strong {
    font-size: 16px;
  }


  /* =========================
     PRODUCTS
     ========================= */

  .products-section {
    margin-top: 30px;
  }

  .section-heading {
    margin-bottom: 15px;
  }

  .section-eyebrow {
    font-size: 11px;
  }

  .section-heading h2 {
    font-size: 29px;
    line-height: 1.06;
  }

  .section-heading p:not(.section-eyebrow) {
    font-size: 13px;
    line-height: 1.45;
  }

  .product-card {
    padding: 18px;
    margin-bottom: 16px;

    border-radius: 16px;
  }

  .product-header {
    gap: 10px;
    margin-bottom: 18px;
  }

  .product-title {
    min-width: 0;
  }

  .product-title h3 {
    font-size: 19px;
    line-height: 1.15;
  }

  .product-title p {
    font-size: 12px;
  }

  .product-personalization {
    margin-top: 5px;

    font-size: 12px;
    line-height: 1.4;
  }

  .product-percent {
    min-width: 55px;
  }

  .product-percent strong {
    font-size: 22px;
  }

  .product-percent span {
    font-size: 10px;
  }


  /* =========================
     PROGRESS
     ========================= */

  .product-progress {
    margin-bottom: 18px;
  }

  .progress-track {
    height: 5px;
  }


  /* =========================
     TIMELINE VERTICAL
     ========================= */

  .product-timeline {
    display: flex;
    flex-direction: column;

    gap: 0;

    overflow: visible;

    padding:
      4px 0
      4px 4px;
  }

  .timeline-step {
    min-width: 0;

    display: grid;

    grid-template-columns:
      32px 1fr;

    align-items: center;

    min-height: 44px;

    padding: 0;

    text-align: left;
  }

  .timeline-step::before {
    top: 0;
    bottom: 0;

    left: 10px;
    right: auto;

    width: 1px;
    height: auto;

    background: var(--line);
  }

  .timeline-step:first-child::before {
    top: 50%;
    left: 10px;
  }

  .timeline-step:last-child::before {
    right: auto;
    bottom: 50%;
  }

  .step-dot {
    width: 21px;
    height: 21px;

    margin: 0;

    grid-column: 1;

    position: relative;
    z-index: 2;

    font-size: 10px;
  }

  .step-label {
    grid-column: 2;

    padding-left: 5px;

    font-size: 12px;
    line-height: 1.25;

    opacity: 0.68;
  }

  .timeline-step.completed .step-label {
    opacity: 0.9;
  }

  .timeline-step.current .step-label {
    color: var(--accent-dark);
    font-weight: 700;
    opacity: 1;
  }


  /* =========================
     HISTORY
     ========================= */

  .history-section {
    margin-top: 18px;
    padding-top: 18px;
  }

  .history-title {
    margin-bottom: 12px;

    font-size: 18px;
  }

  .history-list {
    gap: 10px;
  }

  .history-entry {
    padding:
      12px 14px;

    border-radius:
      0 9px 9px 0;
  }

  .history-heading {
    align-items: flex-start;

    flex-direction: column;

    gap: 3px;
  }

  .history-heading strong {
    font-size: 15px;
  }

  .history-heading time {
    font-size: 10px;
  }

  .history-entry p {
    margin-top: 6px;

    font-size: 12px;
    line-height: 1.45;
  }


  /* =========================
     PHOTOS
     ========================= */

  .history-images {
    gap: 8px;
    margin-top: 10px;
  }

  .history-image-button {
    width: 78px;
    height: 78px;

    border-radius: 9px;
  }


  /* =========================
     NOTE
     ========================= */

  .tracking-note {
    margin-top: 18px;

    padding:
      14px 16px;

    gap: 11px;
  }

  .note-icon {
    width: 34px;
    height: 34px;
  }

  .tracking-note p {
    font-size: 12px;
    line-height: 1.45;
  }


  /* =========================
     FOOTER
     ========================= */

  .site-footer {
    min-height: auto;

    padding:
      20px 22px;

    align-items: flex-start;

    flex-direction: column;

    gap: 12px;
  }

  .site-footer strong {
    font-size: 16px;
  }

  .site-footer span,
  .site-footer a {
    font-size: 11px;
  }


  /* =========================
     LIGHTBOX
     ========================= */

  .image-lightbox {
    padding: 14px;
  }

  .lightbox-close {
    width: 40px;
    height: 40px;

    right: 12px;
    top: 12px;
  }

}


/* ==========================================================
   IDENTIDAD COMPARTIDA CON MOMENTOSGRABADOS.CL
   ========================================================== */

:root {
  --bg: #f8f3eb;
  --surface: rgba(255, 253, 249, 0.94);
  --surface-solid: #fffdf9;
  --surface-soft: #f2e8dc;
  --text: #35271f;
  --text-soft: #71645b;
  --accent: #ad5b32;
  --accent-dark: #8d4527;
  --accent-soft: #e4d2bc;
  --border: #e4d2bc;
  --line: #d8c3aa;
  --shadow: 0 12px 32px rgba(73, 48, 33, 0.07);
}

body {
  font-family: "DM Sans", "Segoe UI", sans-serif;
}

.tracking-hero h1,
.summary-item strong,
.section-heading h2,
.product-title h3,
.product-percent strong,
.history-title,
.history-heading strong,
.tracking-note p,
.page-state strong {
  font-family: "Libre Baskerville", Georgia, serif;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 253, 249, 0.96);
  border-bottom-color: #eee3d4;
  box-shadow: 0 4px 16px rgba(73, 48, 33, 0.035);
}

.header-inner {
  min-height: 82px;
  padding-inline: clamp(18px, 4vw, 34px);
}

.brand {
  flex: 0 0 auto;
}

.brand-logo {
  display: block;
  width: 190px;
  height: 60px;
  object-fit: contain;
  object-position: left center;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.header-store-link {
  position: relative;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.header-store-link::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  content: "";
  opacity: 0;
  transform: scaleX(0.7);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.header-store-link:hover::after,
.header-store-link:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

.whatsapp-button {
  min-height: 44px;
  padding-inline: 17px;
  gap: 8px;
  background: var(--accent);
  border-radius: 9px;
  box-shadow: 0 8px 18px rgba(141, 69, 39, 0.16);
}

.whatsapp-button img {
  width: 17px;
  height: 17px;
  filter: brightness(0) invert(1);
}

.whatsapp-button-label {
  color: #fff;
  font-size: 12px;
}

.tracking-hero {
  isolation: isolate;
}

.tracking-hero h1 {
  color: var(--text);
  font-weight: 400;
}

.hero-eyebrow {
  color: var(--accent-dark);
}

.hero-description {
  font-family: "DM Sans", "Segoe UI", sans-serif;
}

.hero-decoration svg {
  display: none;
}

.hero-decoration-left {
  display: none;
}

.hero-decoration-right {
  top: 26px;
  right: 22px;
  width: 245px;
  height: 190px;
  background: url("https://www.momentosgrabados.cl/assets/brand/tree-symbol.png") center / contain no-repeat;
  filter: sepia(0.55) saturate(0.7);
  opacity: 0.075;
}

.summary-card,
.product-card,
.tracking-note,
.page-state {
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.site-footer {
  min-height: 0;
  padding: 0;
  display: block;
  background: #efe3d4;
  border-top: 1px solid #dfcbb4;
}

.site-footer .tracking-footer-content {
  width: min(100% - 44px, 1180px);
  margin: 0 auto;
  padding: 48px 0 38px;
  display: grid;
  grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
  gap: 42px;
}

.site-footer .tracking-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.tracking-footer-brand img {
  display: block;
  width: 205px;
  height: auto;
}

.tracking-footer-brand p,
.tracking-footer-section p,
.tracking-footer-section small,
.tracking-footer-bottom p {
  margin: 0;
  color: var(--text-soft);
}

.tracking-footer-brand p {
  max-width: 210px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 13px;
  line-height: 1.55;
}

.tracking-footer-section h2 {
  margin: 0 0 16px;
  color: var(--text);
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 15px;
}

.tracking-footer-section ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  list-style: none;
}

.site-footer .tracking-footer-section a,
.tracking-footer-section p,
.tracking-footer-section small {
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.site-footer .tracking-footer-section a {
  text-decoration: none;
}

.site-footer .tracking-footer-section a:hover,
.site-footer .tracking-footer-section a:focus-visible {
  color: var(--accent-dark);
}

.tracking-footer-section small {
  display: block;
  margin-top: 5px;
}

.site-footer .tracking-footer-social {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
}

.site-footer .tracking-footer-social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 253, 249, 0.42);
  border: 1px solid #d7c0a8;
  border-radius: 50%;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.site-footer .tracking-footer-social a:hover,
.site-footer .tracking-footer-social a:focus-visible {
  background: #fffdf9;
  border-color: var(--accent);
  transform: translateY(-2px);
}

.tracking-footer-social img {
  width: 18px;
  height: 18px;
}

.site-footer .tracking-footer-bottom {
  width: min(100% - 44px, 1180px);
  margin: 0 auto;
  padding: 18px 0 22px;
  display: block;
  border-top: 1px solid #ddcab6;
  text-align: center;
}

.tracking-footer-bottom p {
  font-size: 11px;
}

@media (max-width: 900px) {
  .site-footer .tracking-footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .header-inner {
    min-height: 72px;
    padding-inline: 14px;
  }

  .brand-logo {
    width: 154px;
    height: 52px;
  }

  .header-store-link {
    display: none;
  }

  .whatsapp-button {
    width: auto;
    min-height: 42px;
    padding-inline: 13px;
    font-size: 12px;
  }

  .whatsapp-button .whatsapp-button-label {
    font-size: 11px;
  }

  .hero-decoration-right {
    top: 38px;
    right: -42px;
    width: 190px;
    height: 160px;
  }

  .site-footer {
    padding: 0;
    display: block;
  }

  .site-footer .tracking-footer-content {
    width: min(100% - 36px, 1180px);
    padding-block: 38px 30px;
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .site-footer .tracking-footer-bottom {
    width: min(100% - 36px, 1180px);
  }
}

@media (max-width: 520px) {
  .brand-logo {
    width: 138px;
    height: 48px;
  }

  .header-actions {
    gap: 8px;
  }

  .whatsapp-button {
    width: 42px;
    min-width: 42px;
    padding: 0;
    justify-content: center;
  }

  .whatsapp-button .whatsapp-button-label {
    display: none;
  }
}