@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Alex+Brush&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --ink:#5C4A3A;
  --ink-soft:#948270;
  --paper:#FCF9F2;
  --paper-raised:#FFFFFF;
  --line:#E7DFCE;
  --teal:#7C9A6E;
  --teal-deep:#5B7A4F;
  --gold:#D8A854;
  --rose:#E3AEB0;
  --alarm:#C2776B;
  --alarm-bg:#FBEEEA;
  --alarm-line:#EDC7BE;
  --ok-bg:#EEF3E7;
  --ok-line:#D3E1C3;
  --radius-card:16px;
  --radius-sm:10px;
  --shadow-card:0 1px 2px rgba(92,74,58,.05), 0 6px 18px rgba(92,74,58,.06);
  font-size:16px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Sans 3', system-ui, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Fraunces', Georgia, serif;
  font-weight:500;
  color:var(--teal-deep);
  margin:0 0 .4em;
  letter-spacing:-0.01em;
}
p{margin:0 0 .8em;}
button{font-family:inherit;}
.mono{font-family:'IBM Plex Mono', monospace;}

.brand-header{
  display:flex; align-items:center; gap:12px; padding:16px 0 4px;
}
.brand-header img{
  width:52px; height:52px; border-radius:50%; object-fit:cover;
  border:1px solid var(--line); background:#fff;
}
.brand-header .brand-name{
  font-family:'Alex Brush', cursive; font-size:34px; line-height:1;
  color:var(--ink); margin:0;
}
.brand-header .brand-tag{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--teal-deep); margin-top:2px;
}
.share-btn{
  margin-left:auto; flex:0 0 auto;
  display:flex; align-items:center; gap:6px;
  background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--teal-deep);
  font-family:'Source Sans 3', sans-serif; font-weight:600; font-size:12.5px;
  border-radius:999px; padding:8px 14px; cursor:pointer;
}
.share-btn:hover{background:var(--ok-line);}
@media (max-width:420px){
  .share-btn{padding:8px 10px;}
  .share-btn .label-text{display:none;}
}
.cat-card[data-category="emergencias"] .icon{color:var(--teal);}

/* ---------- App shell ---------- */
#app{max-width:760px;margin:0 auto;padding:0 18px 64px;}

.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--paper);
  padding:18px 0 10px;
  border-bottom:1px solid var(--line);
}
.topbar-row{display:flex;align-items:center;gap:12px;}
.back-btn{
  border:1px solid var(--line); background:var(--paper-raised);
  border-radius:999px; width:38px;height:38px; flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer; font-size:18px; color:var(--teal);
}
.back-btn:hover{border-color:var(--teal);}
.crumb{font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.search-wrap{margin-top:12px;}
#search{
  width:100%; padding:11px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--paper-raised); font-size:15px; color:var(--ink);
}
#search:focus{outline:none; border-color:var(--teal);}

/* ---------- Home search bar (sticky, no crumb) ---------- */
.home-search-bar{padding:14px 0 10px;}
.home-search-bar .search-wrap{margin-top:0;}

/* ---------- Hero ---------- */
.hero{padding:14px 0 6px; position:relative;}
.hero .sub{color:var(--ink-soft); font-size:16px; max-width:52ch;}

.info-trigger{
  font-size:30px; line-height:1.1; cursor:pointer; position:relative;
  display:inline-flex; align-items:baseline; gap:6px; outline:none;
}
.info-trigger .info-icon{
  font-size:15px; color:var(--ink-soft); font-family:'IBM Plex Mono', monospace;
  vertical-align:middle;
}
.info-trigger .info-tooltip{
  display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:15;
  width:min(420px, 88vw);
  background:#F6EDDB; border:1px solid #E6D3A8; color:#6B5433;
  font-family:'Source Sans 3', sans-serif; font-size:13.5px; font-weight:400;
  line-height:1.5; border-radius:var(--radius-sm); padding:12px 14px;
  box-shadow:var(--shadow-card);
}
.info-trigger:focus .info-tooltip,
.info-trigger.open .info-tooltip{display:block;}

/* ---------- Category grid ---------- */
.section-label{
  font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-soft); margin:26px 0 10px;
}
.cat-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:520px){.cat-grid{grid-template-columns:1fr;}}
.cat-card{
  position:relative;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-left:5px solid var(--accent, var(--teal));
  border-radius:var(--radius-card);
  padding:16px 16px 14px;
  cursor:pointer;
  box-shadow:var(--shadow-card);
  transition:transform .12s ease;
}
.cat-card:hover{transform:translateY(-2px);}
.cat-card .icon{font-size:22px;}
.cat-card h3{font-size:16.5px; margin:8px 0 4px;}
.cat-card p{font-size:13px; color:var(--ink-soft); margin:0;}
.cat-card .count{
  position:absolute; top:14px; right:16px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft);
}

/* ---------- Problem list ---------- */
.cat-header{padding:22px 0 4px;}
.cat-header .icon-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px;height:46px;border-radius:12px; font-size:22px;
  background:var(--accent-bg,#EEE); margin-bottom:10px;
}
.problem-list{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
.problem-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 15px; cursor:pointer;
}
.problem-row:hover{border-color:var(--teal);}
.problem-row .txt h4{margin:0 0 2px; font-size:15px; font-weight:600; color:var(--ink); font-family:'Source Sans 3',sans-serif;}
.problem-row .txt .age{font-size:12.5px; color:var(--ink-soft);}
.problem-row .chev{color:var(--ink-soft); font-size:16px;}

/* ---------- Detail view ---------- */
.detail{padding:20px 0 10px;}
.detail .age-pill{
  display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:12px;
  background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:4px 11px; color:var(--ink-soft); margin-bottom:10px;
}
.detail h2{font-size:24px;}
.detail .summary{font-size:16px; color:var(--ink-soft); margin-bottom:20px;}

.detail .age-pill{margin-bottom:10px;}
.quick-numbers{
  display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 16px;
}
.quick-number{
  display:flex; flex-direction:column; gap:1px;
  background:var(--alarm-bg); border:1px solid var(--alarm-line);
  border-radius:var(--radius-sm); padding:9px 14px; text-decoration:none; flex:0 0 auto;
}
.quick-number-label{font-size:11.5px; color:var(--alarm); font-weight:600;}
.quick-number-value{
  font-family:'IBM Plex Mono', monospace; font-size:18px; font-weight:600; color:var(--alarm);
  line-height:1.2;
}
.ana-contact-block{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--ok-bg); border:1px solid var(--ok-line); border-radius:var(--radius-card);
  padding:14px 16px; margin:14px 0 20px;
}
.ana-contact-text{font-size:14px; color:var(--teal-deep); font-weight:500; flex:1 1 200px;}
.ana-contact-block .wa-btn{flex:0 0 auto;}

/* ---------- Static SEO guide pages (guia/) ---------- */
.guide-page{max-width:720px; margin:0 auto; padding:20px 18px 60px; font-family:'Source Sans 3', sans-serif; color:var(--ink);}
.guide-breadcrumb{font-size:12.5px; color:var(--ink-soft); margin-bottom:18px;}
.guide-breadcrumb a{color:var(--teal-deep); text-decoration:none;}
.guide-breadcrumb a:hover{text-decoration:underline;}
.guide-header{margin-bottom:20px;}
.guide-header h1{font-size:26px; margin:8px 0 8px;}
.guide-lede{color:var(--ink-soft); font-size:15.5px;}
.guide-index-list, .guide-cat-list{list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:8px;}
.guide-index-list li, .guide-cat-list li{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 15px;
}
.guide-index-list a, .guide-cat-list a{
  color:var(--teal-deep); font-weight:600; text-decoration:none; font-size:15px;
  display:flex; align-items:center; gap:8px; justify-content:space-between;
}
.guide-cat-list a{justify-content:flex-start;}
.guide-index-list .age{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft); font-weight:400;}
.guide-cat-list p{margin:6px 0 0; font-size:13.5px; color:var(--ink-soft);}
.guide-article h1{font-size:24px; margin:6px 0 10px;}
.guide-app-link{display:inline-block; margin-top:10px;}

.block{margin-bottom:18px; border-radius:var(--radius-card); padding:16px 18px;}
.block h3{
  font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:10px; font-weight:500;
}
.block ul{margin:0; padding-left:20px;}
.block li{margin-bottom:6px; font-size:15px;}
.block li:last-child{margin-bottom:0;}

.block.redflags{background:var(--alarm-bg); border:1px solid var(--alarm-line);}
.block.redflags h3{color:var(--alarm);}
.block.steps{background:var(--paper-raised); border:1px solid var(--line);}
.block.steps h3{color:var(--teal);}
.block.consult{background:var(--ok-bg); border:1px solid var(--ok-line);}
.block.consult h3{color:#5B7A4F;}
.block.consult p{margin:0; font-size:15px;}

.tag-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;}
.tag{
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft);
  background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:3px 9px;
}

/* ---------- Search results ---------- */
.search-results .problem-row .cat-name{font-size:11.5px; color:var(--gold); font-family:'IBM Plex Mono', monospace; text-transform:uppercase;}

.empty-note{color:var(--ink-soft); font-size:14px; padding:30px 0; text-align:center;}

footer.app-footer{
  margin-top:44px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-soft);
}
.version-tag{
  margin-top:8px; font-family:'IBM Plex Mono', monospace; font-size:10.5px; opacity:.5;
}

/* ---------- Bottom tab bar ---------- */
#app{padding-bottom:92px;}
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; justify-content:center; gap:6px;
  background:var(--paper-raised); border-top:1px solid var(--line);
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
}
.tab-btn{
  flex:1; max-width:160px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; border-radius:12px; padding:6px 8px;
  cursor:pointer; color:var(--ink-soft);
}
.tab-btn .tab-icon{font-size:19px;}
.tab-btn .tab-label{font-size:11.5px; font-weight:600;}
.tab-btn.active{color:var(--teal-deep); background:var(--ok-bg);}

/* ---------- WhatsApp buttons ---------- */
.wa-btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--teal); color:#fff !important; text-decoration:none;
  font-weight:600; font-size:14px; border-radius:999px; padding:10px 18px;
  border:none;
}
.wa-btn:hover{background:var(--teal-deep);}
.wa-btn-lg{font-size:15px; padding:12px 20px; white-space:nowrap;}

.wa-banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--ok-bg); border:1px solid var(--ok-line); border-radius:var(--radius-card);
  padding:16px 18px; margin:18px 0;
}
.wa-banner strong{font-size:15px; color:var(--teal-deep);}
.wa-banner p{margin:2px 0 0; font-size:13px; color:var(--ink-soft);}
@media (max-width:480px){
  .wa-banner{flex-direction:column; align-items:flex-start;}
}

/* ---------- Servicios ---------- */
.service-icon{font-size:26px; margin-bottom:6px;}
.service-icon-lg{font-size:40px; margin-bottom:4px;}
.service-badge{
  display:inline-block; margin-top:8px; font-family:'IBM Plex Mono', monospace; font-size:10.5px;
  font-weight:600; letter-spacing:.02em; color:var(--teal-deep); background:var(--ok-bg);
  border:1px solid var(--ok-line); border-radius:999px; padding:3px 10px;
}
.service-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:18px 20px; box-shadow:var(--shadow-card);
}
.service-card h3{font-size:18px; margin-bottom:4px;}
.service-summary{color:var(--ink-soft); font-size:14.5px; margin-bottom:10px;}
.service-cta-row{display:flex; flex-wrap:wrap; gap:8px;}
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--paper); color:var(--teal-deep) !important; text-decoration:none;
  font-weight:600; font-size:14px; border-radius:999px; padding:10px 18px;
  border:1px solid var(--line);
}
.btn-secondary:hover{border-color:var(--teal);}

/* ---------- Música ---------- */
.yt-channel-link{
  display:block; text-align:center; margin:6px 0 4px;
  background:var(--rose); color:#5C2F35 !important; text-decoration:none;
  font-weight:600; font-size:14.5px; border-radius:999px; padding:12px 18px;
}
.yt-playlist-card{
  display:flex; align-items:center; gap:14px;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:16px 18px; text-decoration:none; box-shadow:var(--shadow-card);
}
.yt-playlist-icon{font-size:28px; flex:0 0 auto;}
.yt-playlist-card strong{display:block; color:var(--teal-deep); font-size:15.5px; margin-bottom:3px;}
.yt-playlist-sub{display:block; color:var(--ink-soft); font-size:13px; line-height:1.4;}

.mozart-block{
  margin-top:26px; background:var(--paper-raised); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:20px 22px;
}
.mozart-block h2{font-size:19px; margin-bottom:12px;}
.mozart-block p{font-size:14.5px; color:var(--ink); margin-bottom:12px;}
.mozart-block p:last-child{margin-bottom:0; color:var(--teal-deep); font-weight:500;}

/* ---------- Emergency contacts directory ---------- */
.province-hint{font-size:13px; color:var(--ink-soft); margin:-4px 0 12px;}
.contact-list{display:flex; flex-direction:column; gap:8px; margin-bottom:8px;}
.contact-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:11px 14px; text-decoration:none;
}
.contact-row:hover{border-color:var(--teal);}
.contact-label{font-size:14px; color:var(--ink); max-width:70%;}
.contact-number{
  font-family:'IBM Plex Mono', monospace; font-size:13.5px; font-weight:500;
  color:var(--teal-deep); white-space:nowrap;
}
.province-accordion{display:flex; flex-direction:column; gap:8px;}
.province-block{border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:var(--paper-raised);}
.province-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; padding:13px 14px; cursor:pointer;
  font-family:'Source Sans 3', sans-serif; font-size:14.5px; font-weight:600; color:var(--ink);
  text-align:left;
}
.province-chev{color:var(--ink-soft); transition:transform .15s ease;}
.province-block.open .province-chev{transform:rotate(90deg);}
.province-panel{
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .18s ease;
}
.province-block.open .province-panel{grid-template-rows:1fr;}
.province-panel-inner{overflow:hidden; padding:0 14px;}
.province-panel-inner .contact-row{border:none; border-top:1px solid var(--line); border-radius:0; padding:11px 0;}