:root{
  --pine-950:#182619;
  --pine-800:#2C4130;
  --pine-700:#3A5540;
  --parchment:#F1E8D6;
  --parchment-dim:#E4D9C2;
  --bark:#5B4632;
  --moss:#7C8A5C;
  --ember:#C97A3D;
  --ember-dim:#B56930;
  --charcoal:#221B14;
  --warn-bg:#EFDFC9;

  --font-display:'Fraunces', serif;
  --font-body:'Work Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --radius-lg:28px;
  --radius-md:16px;
  --radius-sm:10px;
}

*{box-sizing:border-box;}

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--charcoal);
  background:
    radial-gradient(ellipse at top, #24382A 0%, var(--pine-950) 55%, #10190F 100%);
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index:1000;
}

.app-frame{
  position:relative;
  width:100%;
  max-width:480px;
  height:100dvh;
  max-height:900px;
  background:var(--parchment);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 40px 80px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.2);
}

@media (min-width:520px){
  .app-frame{ border-radius:36px; margin:24px 0; }
}

/* ---------- HEADER ---------- */
.app-header{
  flex:0 0 auto;
  padding:20px 22px 16px;
  background:linear-gradient(180deg, var(--pine-950), var(--pine-800));
  color:var(--parchment);
  position:relative;
}

.wordmark{ display:flex; align-items:center; gap:12px; }

.mark{ width:52px; height:52px; flex:0 0 auto; }

.wordmark-text h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.46rem;
  line-height:1.05;
  letter-spacing:0.01em;
}

.wordmark-text p{
  margin:3px 0 0;
  font-family:var(--font-mono);
  font-size:0.66rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--parchment-dim);
  opacity:0.75;
}

/* ---------- MAIN / VIEWS ---------- */
.app-main{ flex:1 1 auto; position:relative; overflow:hidden; }

.view{
  position:absolute;
  inset:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  opacity:0;
  transform:translateX(16px);
  pointer-events:none;
  transition:opacity 0.26s ease, transform 0.26s ease;
}

.view.is-active{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}

.view-home.is-active{ transform:none; }

/* ---------- HOME ---------- */
.view-home{ padding:20px 22px 12px; display:flex; flex-direction:column; }

.home-greeting{
  font-family:var(--font-display);
  font-size:1.02rem;
  line-height:1.4;
  color:var(--bark);
  margin:4px 0 20px;
  max-width:36ch;
}

.tile-groups{ display:flex; flex-direction:column; gap:16px; flex:1 1 auto; }

.group-label{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.08rem;
  letter-spacing:0.01em;
  color:var(--pine-950);
  opacity:1;
  padding-left:11px;
  border-left:3px solid var(--ember);
}

.tile-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tile-grid-1{ grid-template-columns:1fr; }

.tile{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:var(--radius-md);
  background:#fff8ec;
  border:1px solid rgba(91,70,50,0.14);
  text-decoration:none;
  color:var(--charcoal);
  min-height:64px;
  box-shadow:0 2px 0 rgba(91,70,50,0.06);
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tile:hover, .tile:focus-visible{
  transform:translateY(-2px);
  background:#fffdf7;
  box-shadow:0 8px 18px -8px rgba(34,27,20,0.25);
}
.tile:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }

.tile-icon{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:11px;
  background:rgba(201,122,61,0.14);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ember-dim);
}
.tile-icon svg{ width:22px; height:22px; }

.tile-label{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.9rem;
  letter-spacing:0.01em;
}

.tile-emergency{ background:#F7E9D6; border-color:rgba(178,74,42,0.35); }
.tile-emergency .tile-icon{ background:rgba(178,74,42,0.16); color:#B24A2A; }

.treeline{
  width:100%;
  height:40px;
  color:var(--pine-800);
  opacity:0.9;
  margin-top:18px;
  flex:0 0 auto;
}

/* ---------- DETAIL VIEWS ---------- */
.view-detail{ padding:18px 22px 40px; }

.back-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:none;
  background:none;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--bark);
  padding:6px 2px;
  margin-bottom:12px;
  cursor:pointer;
}
.back-btn svg{ width:16px; height:16px; }
.back-btn:hover{ color:var(--ember-dim); }

.detail-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }

.detail-icon{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:12px;
  background:rgba(201,122,61,0.14);
  color:var(--ember-dim);
  display:flex;
  align-items:center;
  justify-content:center;
}
.detail-icon svg{ width:24px; height:24px; }

.view-detail h2{
  font-family:var(--font-display);
  font-size:1.6rem;
  font-weight:600;
  margin:0;
  color:var(--pine-950);
}

.lede{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1rem;
  color:var(--bark);
  margin:0 0 18px;
  line-height:1.4;
}

.card{
  background:#fff8ec;
  border:1px solid rgba(91,70,50,0.14);
  border-radius:var(--radius-md);
  padding:16px 18px;
  margin-bottom:14px;
}

.card p{ margin:0 0 8px; line-height:1.55; font-size:0.94rem; }
.card p:last-child{ margin-bottom:0; }

.highlight-card{ background:#F2E7D2; border-color:rgba(201,122,61,0.3); }
.warning-card{ background:var(--warn-bg); border-color:rgba(178,74,42,0.3); }

.label{
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ember-dim);
  margin:0 0 6px !important;
}

.mono-highlight{
  font-family:var(--font-mono);
  font-size:1.05rem;
  color:var(--pine-950);
  background:rgba(124,138,92,0.14);
  display:inline-block;
  padding:6px 12px;
  border-radius:8px;
  letter-spacing:0.02em;
}

.entrance-photo{
  width:100%;
  border-radius:var(--radius-md);
  display:block;
  margin:0 0 14px;
  border:1px solid rgba(91,70,50,0.14);
}

.photo-figure{
  margin:0 0 14px;
}
.photo-figure .entrance-photo{
  margin-bottom:8px;
}
.photo-figure figcaption{
  font-family:var(--font-mono);
  font-size:0.76rem;
  color:var(--bark);
  text-align:center;
}

.steps{ margin-bottom:14px; }
.steps ol{ margin:0; padding-left:0; list-style:none; counter-reset:step; }
.steps ol li{
  counter-increment:step;
  position:relative;
  padding:10px 0 10px 38px;
  font-size:0.94rem;
  line-height:1.5;
  border-bottom:1px solid rgba(91,70,50,0.12);
}
.steps ol li:last-child{ border-bottom:none; }
.steps ol li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:9px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--pine-800);
  color:var(--parchment);
  font-family:var(--font-mono);
  font-size:0.72rem;
  display:flex;
  align-items:center;
  justify-content:center;
}

.checklist{ margin:0; padding:0; list-style:none; }
.checklist li{
  position:relative;
  padding:9px 0 9px 26px;
  font-size:0.92rem;
  line-height:1.5;
  border-bottom:1px solid rgba(91,70,50,0.12);
}
.checklist li:last-child{ border-bottom:none; }
.checklist li::before{
  content:"";
  position:absolute;
  left:2px;
  top:15px;
  width:8px;
  height:8px;
  border-radius:2px;
  background:var(--moss);
  transform:rotate(45deg);
}
.checklist-plain{ background:transparent; }

.price-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:0.94rem;
  padding:4px 0;
}
.price-row span:first-child{ color:var(--bark); }
.price-row span:last-child{ font-family:var(--font-mono); font-weight:500; }

.note{
  font-size:0.85rem;
  color:var(--bark);
  font-style:italic;
  text-align:center;
  margin:6px 0 20px;
}

.note-inline{ font-size:0.8rem; color:var(--bark); margin-top:0 !important; margin-bottom:12px !important; }

.section-heading{
  margin:22px 0 10px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.05rem;
  color:var(--pine-950);
}
.section-heading:first-of-type{ margin-top:6px; }

.local-link{
  display:inline-block;
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.03em;
  color:var(--ember-dim);
  text-decoration:underline;
  text-underline-offset:2px;
}
.local-link:hover{ color:var(--ember); }

.btn-whatsapp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  margin-top:8px;
  padding:12px 16px;
  border-radius:var(--radius-sm);
  background:var(--pine-950);
  color:var(--parchment);
  text-decoration:none;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.9rem;
  transition:background 0.15s ease;
}
.btn-whatsapp:hover{ background:var(--pine-800); }

.button-group{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}
.button-group .btn-whatsapp,
.button-group .btn-text{
  margin-top:0;
}

.btn-text{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:11px 16px;
  border-radius:var(--radius-sm);
  background:transparent;
  border:1.5px solid var(--pine-800);
  color:var(--pine-950);
  text-decoration:none;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.88rem;
  transition:background 0.15s ease;
}
.btn-text:hover{ background:rgba(44,65,48,0.08); }
.btn-text[aria-disabled="true"]{
  opacity:0.45;
  pointer-events:none;
}

.btn-order{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  margin-top:8px;
  padding:12px 16px;
  border-radius:var(--radius-sm);
  background:var(--ember);
  color:#fff8ec;
  text-decoration:none;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.9rem;
  transition:background 0.15s ease;
}
.btn-order:hover{ background:var(--ember-dim); }

.wood-card{ padding:6px 18px; }

.wood-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid rgba(91,70,50,0.12);
}
.wood-row:last-child{ border-bottom:none; }

.wood-name{
  margin:0;
  font-weight:600;
  font-size:0.96rem;
}

.wood-price{
  margin:2px 0 0;
  font-family:var(--font-mono);
  font-size:0.76rem;
  color:var(--bark);
}

.wood-qty{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:0.95rem;
  padding:8px 10px;
  border-radius:8px;
  border:1.5px solid rgba(91,70,50,0.3);
  background:#fff;
  color:var(--charcoal);
  min-width:56px;
}

#wood-whatsapp-btn[aria-disabled="true"]{
  background:rgba(24,38,25,0.35);
  pointer-events:none;
}

.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:4px;
  padding:11px 16px;
  border-radius:var(--radius-sm);
  background:transparent;
  border:1.5px solid var(--pine-800);
  color:var(--pine-950);
  text-decoration:none;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.88rem;
  transition:background 0.15s ease;
}
.btn-secondary:hover{ background:rgba(44,65,48,0.08); }

.view::-webkit-scrollbar{ width:0; }

@media (prefers-reduced-motion: reduce){
  .view{ transition:none; }
}

/* ---------- View Transitions (progressive enhancement) ---------- */
::view-transition-group(*){ animation-duration:0.32s; }
::view-transition-old(morph-icon),
::view-transition-new(morph-icon){
  height:100%;
  width:100%;
}