:root{
  --bg:#e8eee7; --surface:#fff; --surface2:#f4f7f3; --ink:#13201a; --muted:#5d6d63; --line:#d9e2da;
  --g900:#0d3a21; --g800:#134d2b; --g700:#1b6a3b; --g600:#228247; --g500:#2e9a56; --g100:#dcefe2; --g50:#edf6ef;
  --accent:var(--g700); --gold:#e3a51d; --blue:#2f7fc1; --danger:#b3392f; --radius:16px;
  --shadow:0 1px 2px rgba(13,58,33,.07),0 8px 24px rgba(13,58,33,.09);
  --glass:rgba(255,255,255,.86); --thumb-a:#f3f6f2; --thumb-b:#e2eae3; --thumb-ic:#a9bcaf; --thumb-blend:multiply;
  --star-off:#d3dcd5; --rate-off:#bfcac2; --notice-bg:#fff6df; --notice-line:#efdba6; --prose:#2a3a31;
  --star-on-bg:#fff3d6; --drop-on-bg:#e2eef9;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0e1511; --surface:#18221c; --surface2:#1f2b24; --ink:#e4ece6; --muted:#9aab9f; --line:#2b3a31;
  --g800:#9ad7ae; --g600:#5fbf80; --g100:#20392a; --g50:#1b2d22;
  --accent:#6fcb8f; --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.35);
  --glass:rgba(20,29,24,.86); --thumb-a:#222e27; --thumb-b:#1a241e; --thumb-ic:#3f5246; --thumb-blend:normal;
  --star-off:#3a4a40; --rate-off:#4a5b50; --notice-bg:#2e2715; --notice-line:#4d4120; --prose:#cfdad2;
  --star-on-bg:#352c14; --drop-on-bg:#16293a;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html{-webkit-tap-highlight-color:transparent;background:var(--bg)}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);
  line-height:1.5;padding-bottom:calc(104px + env(safe-area-inset-bottom));-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;color:inherit}
h1{font-size:1.65rem;line-height:1.18;letter-spacing:-.02em;font-weight:800}
h2{font-size:1.08rem;letter-spacing:-.01em;font-weight:700;margin:26px 0 12px}
h3{font-size:.95rem;font-weight:700}
.sub{color:var(--muted);font-size:.9rem}

.ic{width:1.25em;height:1.25em;flex:none;vertical-align:-.25em}
.flag{width:20px;height:14px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.14);vertical-align:-2px;flex:none}

.topbar{position:sticky;top:0;z-index:30;background:var(--glass);backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top)) 18px 10px;display:flex;align-items:center;justify-content:space-between}
.themebtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--g50);color:var(--g800);
  box-shadow:inset 0 0 0 1px var(--line);transition:transform .15s}
.themebtn:active{transform:scale(.92) rotate(-20deg)}
.themebtn .ic{width:21px;height:21px}
.brandmark{display:inline-flex;align-items:center;gap:10px}
.brandmark img{border-radius:10px;display:block}
.wordmark{font-size:1.28rem;font-weight:700;letter-spacing:-.03em;color:var(--g800)}
.wordmark b{font-weight:400;color:var(--g500)}
#app{max-width:780px;margin:0 auto;padding:18px 16px}

.hero{position:relative;overflow:hidden;border-radius:22px;padding:28px 22px 26px;color:#fff;
  background:radial-gradient(120% 140% at 100% 0%,#2e9a56 0%,transparent 55%),linear-gradient(155deg,var(--g700),var(--g900))}
.hero::after{content:"";position:absolute;right:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;border:28px solid rgba(255,255,255,.07)}
.hero h1{max-width:15em;position:relative}
.hero p{opacity:.85;margin:10px 0 20px;max-width:30em;position:relative}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:600;
  background:var(--g700);color:#fff;transition:transform .12s,background .15s;position:relative}
.btn:active{transform:scale(.97)}
.btn.light{background:#fff;color:#134d2b}
.btn.ghost{background:var(--g100);color:var(--g800)}
.btn.line{background:var(--surface);color:var(--g800);box-shadow:inset 0 0 0 1px var(--line)}
.btn.small{padding:8px 14px;font-size:.88rem}
.btn:disabled{opacity:.5}

.searchbox{position:relative;margin-top:14px}
.searchbox .ic{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted)}
.search{width:100%;padding:14px 16px 14px 46px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;
  box-shadow:0 1px 2px rgba(13,58,33,.04)}
.search:focus,input:focus,select:focus,textarea:focus{outline:2px solid var(--g500);outline-offset:1px;border-color:transparent}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;background:var(--surface);color:var(--ink);
  font-size:.88rem;font-weight:600;box-shadow:inset 0 0 0 1px var(--line)}
.chip.active{background:var(--g700);color:#fff;box-shadow:none}
.sechead{margin:26px 0 12px}
.sechead h2{margin:0}
select.sortsel{width:auto;padding:8px 34px 8px 14px;border-radius:999px;font-size:.88rem;font-weight:600;cursor:pointer}

/* tarjetas: miniaturas todas del mismo tamaño (cuadradas, imagen contenida) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
a.card{display:block;transition:transform .15s}
@media(hover:hover){a.card:hover{transform:translateY(-3px)}}
.thumb{position:relative;aspect-ratio:1/1;background:linear-gradient(180deg,var(--thumb-a),var(--thumb-b));overflow:hidden;display:grid;place-items:center;color:var(--thumb-ic)}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:12px;mix-blend-mode:var(--thumb-blend)}
.thumb .ic{width:38%;height:38%}
.pcard .body{padding:12px 14px 14px}
.brand{font-weight:700;letter-spacing:-.01em}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between}
.meta{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.88rem}
.stars{display:inline-flex;align-items:center;gap:1px;color:var(--gold)}
.stars .ic{width:15px;height:15px}.stars .off{color:var(--star-off)}
.stars small{color:var(--muted);margin-left:5px;font-size:.8rem}

.scanwrap{position:relative;border-radius:22px;overflow:hidden;background:#0b1510;aspect-ratio:3/4;box-shadow:var(--shadow)}
.scanwrap video{width:100%;height:100%;object-fit:cover}
.frame{position:absolute;inset:14% 12%;pointer-events:none}
.frame i{position:absolute;width:34px;height:34px;border:3px solid #fff;opacity:.95}
.frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:14px 0 0 0}
.frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 14px 0 0}
.frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 14px}
.frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 14px 0}
.scanhint{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-size:.88rem;text-shadow:0 1px 6px #000}
.scanactions{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap;align-items:center}
.shutter{width:76px;height:76px;border-radius:50%;background:#fff;border:6px solid var(--g500);box-shadow:var(--shadow)}
.loading{text-align:center;padding:56px 10px}
.spinner{width:44px;height:44px;border:4px solid var(--g100);border-top-color:var(--accent);border-radius:50%;margin:0 auto 16px;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.notice{background:var(--notice-bg);border:1px solid var(--notice-line);padding:12px 14px;border-radius:12px;margin:12px 0;font-size:.92rem}
.preview{width:100%;max-height:230px;object-fit:contain;border-radius:var(--radius);background:#0b1510}
.empty{text-align:center;color:var(--muted);padding:34px 10px}

.best,.lrow{display:flex;gap:14px;padding:14px;align-items:center}
.best .thumb{width:112px;border-radius:14px;flex:none}
.lrow .thumb{width:64px;border-radius:12px;flex:none}
.grow{flex:1;min-width:0}
.match{font-size:.78rem;color:var(--accent);font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.list{display:flex;flex-direction:column;gap:10px}

.phero{display:flex;gap:16px;padding:16px;align-items:center}
.phero .thumb{width:128px;border-radius:16px;flex:none}
.score{font-size:2.3rem;font-weight:800;letter-spacing:-.03em;color:var(--accent);line-height:1}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--g50);color:var(--g800);font-size:.8rem;font-weight:600}
.section{padding:18px;margin-top:14px}
.section h2{margin:0 0 12px}
.meter{margin:14px 0}.meter .lbl{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:6px;font-weight:600}
.meter .ends{display:flex;justify-content:space-between;font-size:.76rem;color:var(--muted);margin-top:4px}
.bar{height:8px;background:var(--g100);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--g500),var(--g700));border-radius:99px}
.irow{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.irow:last-of-type{border:0}
.irow .ic{color:var(--g600);margin-top:2px}
.irow .k{color:var(--muted);font-size:.8rem}.irow .v{font-weight:600}
.prose{white-space:pre-line;color:var(--prose)}
.store{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--line)}
.sinfo{min-width:0}
.sinfo .sub{font-size:.84rem;line-height:1.35}
.sbuy{display:flex;align-items:center;gap:12px;justify-content:flex-end}
@media(max-width:520px){
  /* una fila por supermercado: precio y botón apilados a la derecha */
  .sbuy{flex-direction:column;align-items:flex-end;gap:6px}
  .sbuy .long{display:none}
}
.store:last-child{border:0}
.sbadge{width:40px;height:40px;border-radius:11px;background:var(--g50);color:var(--g800);display:grid;place-items:center;font-weight:800;flex:none}
.price{font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.others{font-size:.76rem;color:var(--muted);margin-top:2px}
.review{padding:14px 0;border-bottom:1px solid var(--line)}.review:last-child{border:0}
.mini{display:flex;gap:12px;margin:6px 0;font-size:.8rem;color:var(--muted);flex-wrap:wrap}
.mini span{display:inline-flex;align-items:center;gap:4px}
form .field{margin:14px 0}
label{font-weight:600;font-size:.9rem;display:block;margin-bottom:6px}
input[type=text],input[type=number],select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);font:inherit;background:var(--surface);color:var(--ink)}
.rate{display:flex;gap:6px}
.rate button{width:46px;height:46px;border-radius:12px;background:var(--g50);color:var(--rate-off);display:grid;place-items:center;transition:transform .1s}
.rate button:active{transform:scale(.92)}
.rate .ic{width:24px;height:24px}
.rate.star button.on{color:var(--gold);background:var(--star-on-bg)}
.rate.leaf button.on{color:var(--g600);background:var(--g100)}
.rate.drop button.on{color:var(--blue);background:var(--drop-on-bg)}
.rate-cap{font-size:.82rem;color:var(--muted);margin-top:6px;min-height:1.2em}
details>summary{cursor:pointer;list-style:none}details>summary::-webkit-details-marker{display:none}

.bottomnav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;
  width:min(460px,calc(100% - 20px));display:flex;justify-content:space-around;align-items:center;background:var(--glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:26px;padding:8px 10px;
  box-shadow:0 10px 30px rgba(13,58,33,.18)}
.bottomnav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.68rem;font-weight:600;color:var(--muted);min-width:0;flex:1;padding:4px 0;white-space:nowrap}
.bottomnav a .ic{width:24px;height:24px}
.bottomnav a.active{color:var(--accent)}
.bottomnav a.scan{background:var(--g700);color:#fff;border-radius:50%;width:62px;height:62px;min-width:62px;justify-content:center;
  margin-top:-26px;box-shadow:0 8px 20px rgba(27,106,59,.45);border:4px solid var(--bg)}
.bottomnav a.scan .ic{width:26px;height:26px}
.toast{position:fixed;left:50%;bottom:112px;transform:translateX(-50%);background:var(--g900);color:#fff;padding:10px 18px;border-radius:999px;z-index:60;box-shadow:var(--shadow);font-size:.9rem}

/* tarjeta + botón de comparar (el botón va fuera del <a> para no anidar elementos interactivos) */
.pwrap{position:relative}
.pwrap>.card{height:100%}
.cmpbtn{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;
  background:var(--glass);color:var(--g800);font-size:.74rem;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.12),inset 0 0 0 1px var(--line);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cmpbtn .ic{width:15px;height:15px}
.cmpbtn.on{background:var(--g700);color:#fff;box-shadow:none}
.cmpbtn.inline{position:static;padding:8px 14px;font-size:.85rem}
.cmpbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));z-index:45;
  display:flex;align-items:center;gap:4px;background:var(--g800);border-radius:999px;padding:4px 4px 4px 16px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);white-space:nowrap}
:root[data-theme="dark"] .cmpbar{background:var(--g700)}
.cmpbar a{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:.9rem;padding:6px 4px}
.cmpbar button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.14)}
.cmpbar button .ic{width:16px;height:16px}
.cmpbar[hidden]{display:none}

/* búsqueda por gustos */
.examples{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;font-size:.84rem;color:var(--muted)}
.examples .ic{width:16px;height:16px;color:var(--gold)}
.examples a{color:var(--accent);font-weight:600;border-bottom:1px dashed currentColor}
.recs{margin-top:18px;padding:16px;border-radius:var(--radius);background:var(--g50);box-shadow:inset 0 0 0 1px var(--line)}
.recs h2{margin:12px 0}
.understood{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.88rem;font-weight:600}
.understood .ic{color:var(--gold)}
.understood .tag{background:var(--surface)}
.why{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.why span{font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--g100);color:var(--g800)}
.bar.est i,.minibar.est i{background:repeating-linear-gradient(45deg,var(--g500) 0 6px,var(--g600) 6px 12px);opacity:.75}

/* comparador */
.cmpwrap{overflow-x:auto}
.cmptable{width:100%;border-collapse:collapse;min-width:calc(130px + var(--n) * 150px)}
.cmptable th,.cmptable td{padding:12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmptable tbody tr:last-child>*{border-bottom:0}
.cmptable tbody th{font-size:.8rem;color:var(--muted);font-weight:600;width:130px;position:sticky;left:0;background:var(--surface);z-index:1}
.cmptable thead th{font-weight:400}
.cmptable thead th:first-child{position:sticky;left:0;background:var(--surface);z-index:1}
/* foto con la ✕ para quitar en la esquina (la ✕ va fuera del enlace: no se anidan elementos que se tocan) */
.cmpimg{position:relative;width:96px;margin-bottom:8px}
.cmptable thead .thumb{width:100%;border-radius:12px}
.cmptable .rm{position:absolute;top:-8px;right:-8px;width:28px;height:28px;padding:0;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);cursor:pointer}
.cmptable .rm::after{content:"";position:absolute;inset:-8px}   /* más fácil de acertar con el dedo */
.cmptable .rm .ic{width:14px;height:14px;stroke-width:2.6}
@media(hover:hover){.cmptable .rm:hover{background:var(--g700);color:#fff}}
.minibar{height:6px;width:100%;max-width:120px;background:var(--g100);border-radius:99px;overflow:hidden;margin:6px 0 2px}
.minibar i{display:block;height:100%;background:linear-gradient(90deg,var(--g500),var(--g700));border-radius:99px}
.win{position:relative;padding-left:10px}
.win::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:3px;background:var(--g500)}
.win b{color:var(--accent)}
/* buscador para sumar yerbas (las sugerencias flotan: la tarjeta de inicio no puede recortarlas) */
.cmpintro{overflow:visible}
.cmpaddrow{margin:8px 0 14px}
.cmpadd{margin-top:0;text-align:left}
.cmpsug{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);max-height:min(380px,55vh);overflow-y:auto}
.cmpsug[hidden]{display:none}
.cmpsug button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;background:none;border:0;
  border-bottom:1px solid var(--line);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.cmpsug button:last-child{border-bottom:0}
.cmpsug button.on{background:var(--g50)}
@media(hover:hover){.cmpsug button:hover{background:var(--g50)}}
.cmpsug .thumb{width:44px;border-radius:9px;flex:none}
.cmpsug .thumb img{padding:4px}
.cmpsug .grow{display:flex;flex-direction:column}
.cmpsug .grow>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmpsug .grow .sub{font-size:.84rem}
.cmpsug .nores{padding:14px 16px}
.cmphint{margin:0 0 8px;font-size:.82rem;text-align:right}
@media(max-width:600px){   /* tabla más compacta: entran más yerbas a la vista antes de deslizar */
  .cmptable{min-width:calc(84px + var(--n) * 124px)}
  .cmptable th,.cmptable td{padding:10px 8px}
  .cmptable tbody th{width:84px;font-size:.74rem}
  .cmpimg{width:64px}
  .cmptable thead .thumb{border-radius:10px}
  .cmptable .rm{top:-7px;right:-7px;width:26px;height:26px}
  .cmptable thead .brand{font-size:.9rem}
}

/* sección "El mate" */
.mate-hero{margin-bottom:6px}
.section h2 .ic{color:var(--accent);margin-right:2px}
.steps{list-style:none;padding:0;counter-reset:st;display:flex;flex-direction:column;gap:12px}
.steps li{counter-increment:st;display:grid;grid-template-columns:34px 1fr;gap:2px 12px}
.steps li::before{content:counter(st);grid-row:span 2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--g100);color:var(--g800);font-weight:800}
.steps li span{color:var(--muted);font-size:.92rem}
.kinds{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.kinds>div{padding:12px 14px;border-radius:12px;background:var(--g50)}
.kinds p{margin-top:4px;font-size:.86rem}
.bullets{padding-left:20px;display:flex;flex-direction:column;gap:8px}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.fact{padding:14px;border-radius:12px;background:var(--surface2);box-shadow:inset 0 0 0 1px var(--line)}
.fact p{margin-top:4px;font-size:.88rem;color:var(--muted)}
.notice .ic{color:var(--gold)}
.warn-notice{margin-top:14px}
.bottomnav a.scan{flex:none}
.matecta{display:flex;align-items:center;gap:14px;margin-top:22px}
.matecta>.ic{width:40px;height:40px;padding:8px;border-radius:12px;background:var(--g100);color:var(--g800);flex:none}
.matecta>.hbimg{width:40px;height:40px;border-radius:12px;object-fit:cover;flex:none}
.matecta>.hbemo{width:40px;height:40px;border-radius:12px;background:var(--g100);display:grid;place-items:center;font-size:1.35rem;flex:none}
/* campo trampa anti-bot: invisible para personas, visible para bots que completan todo */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* favoritas */
.topactions{display:flex;gap:8px;align-items:center}
.favlink{position:relative}
.favlink .count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#d9534f;
  color:#fff;font-size:.68rem;display:grid;place-items:center;font-weight:700}
.favbtn{position:absolute;top:8px;left:8px;z-index:2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass);color:var(--muted);box-shadow:0 1px 4px rgba(0,0,0,.12),inset 0 0 0 1px var(--line);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .12s}
.favbtn .ic{width:17px;height:17px}
.favbtn:active{transform:scale(.88)}
.favbtn.on{color:#e0484f}
.favbtn.on .ic{fill:currentColor}
.favbtn.inline{position:static;width:auto;height:auto;display:inline-flex;gap:6px;padding:8px 14px;border-radius:999px;font-size:.85rem;font-weight:700;color:var(--g800)}
.favbtn.inline.on{color:#e0484f}
.pwrap .cmpbtn{z-index:2}
.sechead h2 .ic{color:#e0484f}
h1 .ic{color:#e0484f;vertical-align:-.15em}

/* test de perfil matero */
.profilecta{margin-top:16px}

.quiz{margin-top:4px}
.quizbar{height:6px;border-radius:99px;background:var(--g100);overflow:hidden;margin-bottom:14px}
.quizbar i{display:block;height:100%;background:linear-gradient(90deg,var(--g500),var(--g700));transition:width .3s}
.qopts{display:flex;flex-direction:column;gap:10px}
.qopt{text-align:left;padding:15px 18px;border-radius:14px;background:var(--surface2);font-weight:600;font-size:1rem;
  box-shadow:inset 0 0 0 1.5px var(--line);transition:transform .1s,box-shadow .15s}
.qopt:active{transform:scale(.98)}
@media(hover:hover){.qopt:hover{box-shadow:inset 0 0 0 2px var(--g500)}}
.qopt.on{box-shadow:inset 0 0 0 2px var(--g600);background:var(--g50)}
.profile-hero h1{font-size:2rem}
a.matecta{display:flex}
.profilecta{justify-content:flex-start}

/* perfil matero: tarjeta con botón para repetir */
.profilecta{align-items:center;gap:12px}
.profilecta>a.grow{display:block}
.ctagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.ctagrid .matecta{margin-top:14px}

/* rankings */
.rkchips{margin:0 0 14px}
.rklist{list-style:none;padding:0;display:flex;flex-direction:column}
.rklist li a{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.rklist li:last-child a{border:0}
.rklist .thumb{width:52px;border-radius:10px;flex:none}
.rklist .meta{display:inline-flex;margin-top:2px}
.pos{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;flex:none;background:var(--g50);color:var(--g800)}
.pos.top1{background:#f5c542;color:#4a3700}.pos.top2{background:#cfd6dc;color:#2e3a44}.pos.top3{background:#d99a62;color:#3d2410}
.rkh .ic{color:var(--gold)}

/* trivia */
.qopt.right{box-shadow:inset 0 0 0 2px var(--g500);background:var(--g100)}
.qopt.wrong{box-shadow:inset 0 0 0 2px var(--danger);background:rgba(179,57,47,.12)}
.qopt:disabled{cursor:default;color:var(--ink)}
.notice.okfb{background:var(--g50);border-color:var(--g100)}
.rvlink{color:var(--accent);font-weight:600;background:none;padding:0;font-size:inherit}

/* resultado de la trivia */
.trivia-hero{display:flex;align-items:center;gap:18px}
.trivia-hero .trophy{width:72px;height:72px;border-radius:20px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none;position:relative}
.trivia-hero .trophy .ic{width:42px;height:42px;color:#f5c542}
.trivia-hero h1{font-size:2.1rem;margin:2px 0 4px}
.trivia-hero .tscore{margin:0;font-size:1rem;opacity:.85}

/* yerbas destacadas (puesto fijo elegido en el panel) */
.pwrap.featured>.card{box-shadow:0 0 0 2px var(--gold),0 8px 24px rgba(227,165,29,.22)}
.featbadge{display:inline-flex;align-items:center;gap:4px;margin-bottom:4px;padding:2px 9px;border-radius:999px;
  background:var(--star-on-bg);color:#a87000;font-size:.72rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.featbadge .ic{width:12px;height:12px;color:var(--gold)}
:root[data-theme="dark"] .featbadge{color:var(--gold)}
.ratingjump{margin-top:12px;display:flex;gap:10px;align-items:center;background:none;padding:4px 8px 4px 0;border-radius:12px;text-align:left}
@media(hover:hover){.ratingjump:hover .sub{text-decoration:underline}}
#reviews{scroll-margin-top:80px}
#reviewForm{scroll-margin-top:80px}
/* tarjeta del perfil matero en el celular: ícono + texto a lo ancho, "Repetir test" abajo */
@media(max-width:560px){
  .profilecta{flex-wrap:wrap;row-gap:12px}
  .profilecta>a.grow{flex:1;min-width:0}
  .profilecta>.btn{flex:1 0 100%;justify-content:center}
}
/* texto de las tarjetas: siempre al lado del ícono, ocupando el ancho que sobra */
.matecta>div,.matecta>a.grow{flex:1;min-width:0}
.eyebrow{display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
/* aviso flotante: ancho según el texto (una línea si entra), sin quedar limitado a media pantalla */
.toast{width:max-content;max-width:calc(100vw - 32px);text-align:center;font-weight:600;font-size:.88rem;padding:9px 18px}

/* ficha de la yerba en el celular: foto + nombre arriba; reseñas y botones a todo el ancho abajo */
@media(max-width:560px){
  .phero{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:14px;row-gap:0;align-items:start;padding:14px}
  .phero .thumb{width:104px;grid-row:span 3}
  .phero>.grow{display:contents}
  .phero .brand{grid-column:2}
  .phero .tags{grid-column:2;margin-top:8px}
  .phero .tag{font-size:.74rem;padding:3px 9px}
  /* abajo, en una sola fila: el puntaje a la izquierda (más grande) y los botones apilados a la derecha */
  .phero .phfoot{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
  .phero .phfoot .phrate{flex:1;min-width:0;margin:0}
  .phero .phfoot .ratingjump{gap:12px}
  .phero .phfoot .ratingjump .score{font-size:2.9rem}
  .phero .phfoot .ratingjump .stars .ic{width:18px;height:18px}
  .phero .phbtns{flex:none;width:52%;flex-direction:column;align-items:stretch;gap:8px!important;margin:0!important}
  .phero .phbtns>*{justify-content:center}
}

/* sección desplegable (precios): cerrada de entrada, con el precio más bajo a la vista */
.acc>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary h2{margin:0;flex:1}
.acc .accmeta{font-size:.88rem;color:var(--muted);white-space:nowrap}
.acc .accmeta b{color:var(--accent)}
.acc>summary>.ic{transition:transform .2s;color:var(--muted)}
.acc[open]>summary>.ic{transform:rotate(180deg)}
.acc[open]>summary{margin-bottom:6px}

/* foto de estudio (paquete sobre mesa): ocupa todo el cuadro */
.thumb.studio{background:#1a110b}
.thumb.studio img{padding:0;object-fit:cover;mix-blend-mode:normal}

/* transición de "¡Encontramos tu yerba!" (reconocimiento seguro) */
.found{min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;
  transition:transform .35s ease,opacity .35s ease}
.found.leaving{opacity:0;transition:opacity .2s ease}
.foundpics{position:relative;width:210px;height:210px;margin-bottom:14px}
.foundpics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:26px;box-shadow:var(--shadow)}
/* tu foto: se achica y se desenfoca mientras "llega" la yerba */
.fshot{animation:fshot .9s ease forwards}
/* la yerba: entra con un rebote (desde abajo, girada y chica) y después flota */
.fprod{opacity:0;transform:translateY(40px) scale(.7) rotate(-8deg);
  animation:fprod .75s .5s cubic-bezier(.2,1.4,.4,1) forwards,ffloat 2.4s 1.3s ease-in-out infinite;
  box-shadow:0 18px 40px rgba(0,0,0,.35)!important}
.fcheck{width:56px;height:56px;border-radius:50%;background:var(--g700);color:#fff;display:grid;place-items:center;margin-top:-42px;
  position:relative;z-index:2;box-shadow:0 0 0 5px var(--bg);transform:scale(0);animation:fpop .45s 1s cubic-bezier(.3,1.7,.6,1) forwards}
.fcheck .ic{width:28px;height:28px;stroke-width:2.6}
.found h1{font-size:2rem;margin-top:6px;opacity:0;animation:fup .5s 1.15s ease forwards}
.found .sub{opacity:0;animation:fup .5s 1.1s ease forwards}
.found h1+.sub{animation-delay:1.25s}
@keyframes fshot{0%{transform:scale(1.1);filter:none;opacity:1}100%{transform:scale(.82);filter:blur(6px) brightness(.55);opacity:.9}}
@keyframes fprod{0%{opacity:0;transform:translateY(40px) scale(.7) rotate(-8deg)}60%{opacity:1}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes ffloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(.6deg)}}
@keyframes fpop{to{transform:scale(1)}}
@keyframes fup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* la ficha entra deslizándose cuando llega desde la transición */
/* la ficha aparece alrededor de la foto que aterriza (solo opacidad: así la miniatura no se mueve mientras llega) */
#app.enter{animation:fenter .55s ease both}
@keyframes fenter{from{opacity:0}to{opacity:1}}
.flyer{position:fixed;z-index:90;object-fit:cover;border-radius:26px;transform-origin:0 0;pointer-events:none;
  box-shadow:0 18px 40px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.found *,#app.enter{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important}
  .found{transition:none}}
/* aviso en la ficha abierta por reconocimiento */
.scanbanner{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:10px 14px;margin-bottom:12px;border-radius:14px;
  background:var(--g50);box-shadow:inset 0 0 0 1px var(--line);font-size:.86rem;font-weight:600;color:var(--g800)}
.scanbanner .ic{width:18px;height:18px}
.scanbanner span{flex:1;min-width:140px}
.scanbanner button{background:none;padding:0;font-size:.84rem;font-weight:700;color:var(--accent);text-decoration:underline}
.scanbanner #noPhoto{color:var(--muted);font-weight:600}

/* ícono chiquito junto a la etiqueta de las tarjetas (PERFIL MATERO, TRIVIA) */
.eyebrow .ic{width:13px;height:13px;vertical-align:-2px;margin-right:4px;stroke-width:2.2}
#preparar{scroll-margin-top:80px}

/* ✕ para borrar el buscador */
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.searchbox .search,.searchwrap .search{padding-right:46px}
.searchwrap{position:relative;flex:1;min-width:200px}
.clearbtn{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--g100);color:var(--g800);padding:0}
.clearbtn[hidden]{display:none}
@media(hover:hover){.clearbtn:hover{background:var(--g700);color:#fff}}
.herocta{display:flex;justify-content:flex-start;position:relative}
/* bloque verde del inicio: centrado en el celular, a la izquierda en pantallas grandes */
@media(max-width:600px){
  .homehero{text-align:center}
  .homehero h1,.homehero p{margin-left:auto;margin-right:auto}
  .homehero .herocta{justify-content:center}
}
.hero::after{pointer-events:none}.herocta{z-index:1}   /* el círculo decorativo del fondo no tapa el botón */

/* ---------- cámara (escáner) integrada en la página: entra justo en la pantalla, disparador encima ---------- */
.scanwrap.camfit{aspect-ratio:auto;height:min(calc((100vw - 32px) * 4 / 3), calc(100dvh - 300px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  min-height:300px;max-height:760px}
.scanwrap.camfit .frame{inset:12% 10% 30%}
.nocamview{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding-bottom:110px;color:#b9cdbf;text-align:center;font-size:.92rem;background:radial-gradient(circle at 50% 35%,#1d2b22,#0b1510)}
.nocamview[hidden]{display:none}
.nocamview .ic{width:54px;height:54px;opacity:.7}
.scanctrl{position:absolute;left:0;right:0;bottom:20px;display:flex;align-items:center;justify-content:center;gap:34px;z-index:3}
.scanctrl .shutter{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.25);border:4px solid #fff;padding:0;
  display:grid;place-items:center;box-shadow:0 4px 18px rgba(0,0,0,.4);transition:transform .1s}
.scanctrl .shutter i{display:block;width:58px;height:58px;border-radius:50%;background:#fff;transition:transform .12s}
.scanctrl .shutter:active i,.scanctrl .shutter.pressed i{transform:scale(.85);background:#e8f3ec}
.camside{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff;cursor:pointer}
.camside .ic{width:22px;height:22px}
.camside.ghost{visibility:hidden}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:4}
.flash.on{animation:camflash .45s ease-out}
@keyframes camflash{0%{opacity:.9}100%{opacity:0}}

/* ---------- listas de yerbas: siempre 2 columnas en el celular ---------- */
@media(max-width:600px){
  #app .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  #app .grid .pcard .body{padding:10px 11px 12px}
  #app .grid .brand{font-size:.95rem}
  #app .grid .meta{font-size:.82rem}
  #app .grid .cmpbtn{padding:5px 8px;font-size:.7rem;top:6px;right:6px}
  #app .grid .favbtn{top:6px;left:6px;width:30px;height:30px}
}
@media(max-width:360px){#app .grid .cmpbtn span{display:none}}   /* pantallas muy angostas: solo el ícono */

/* ================= comunidad: logros, pasaporte, desafío, La Ronda, avisos ================= */
.favlink .dot{position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:#e0484f;box-shadow:0 0 0 2px var(--surface)}
#trophyLink{color:#b47c0c}
:root[data-theme="dark"] #trophyLink{color:var(--gold)}
.favcount{display:inline-flex;align-items:center;gap:4px;font-size:.76rem;font-weight:600;color:#c4434a;padding:4px 2px}
.favcount .ic{width:13px;height:13px;fill:currentColor}
.triedbtn.on{color:var(--g600)}
.triedbtn.on .ic{stroke-width:2.8}
/* reseñas útiles */
.helprow{margin-top:8px}
.helpful{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--surface2);
  box-shadow:inset 0 0 0 1px var(--line);font-size:.8rem;font-weight:600;color:var(--muted);transition:transform .15s}
.helpful b{font-weight:800;color:var(--ink)}
.helpful.on{background:var(--g50);color:var(--g800);box-shadow:inset 0 0 0 1px var(--g600)}
.helpful.pop{animation:hpop .35s ease}
@keyframes hpop{40%{transform:scale(1.15)}}
.hcount{font-size:.8rem;font-weight:700;color:var(--g800)}
.review.mine{background:linear-gradient(90deg,var(--g50),transparent);margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:12px}
/* también te pueden gustar: carrusel horizontal */
.hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,42%);gap:12px;overflow-x:auto;padding:2px 2px 10px;
  scroll-snap-type:x mandatory;margin:0 -4px}
.hscroll > *{scroll-snap-align:start}
@media(min-width:700px){.hscroll{grid-auto-columns:200px}}
#app .hscroll .cmpbtn span{display:none}
/* festejo de logro */
.unlock{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(5,15,10,.62);
  backdrop-filter:blur(3px);animation:ufade .25s ease}
@keyframes ufade{from{opacity:0}}
.unlockcard{position:relative;width:min(360px,100%);background:var(--surface);border-radius:26px;padding:30px 22px 22px;text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.4);animation:upop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes upop{from{transform:scale(.6) translateY(30px);opacity:0}}
.unlockcard h2{margin:4px 0 6px;font-size:1.3rem}
.utitle{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#b47c0c}
:root[data-theme="dark"] .utitle{color:var(--gold)}
.medal{width:96px;height:96px;margin:-78px auto 12px;border-radius:50%;display:grid;place-items:center;font-size:3rem;position:relative;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,#e3a51d 60%,#b47c0c);box-shadow:0 0 0 6px var(--surface),0 10px 30px rgba(227,165,29,.55)}
.medal::before{content:"";position:absolute;inset:-26px;border-radius:50%;z-index:-1;
  background:repeating-conic-gradient(rgba(227,165,29,.35) 0 10deg,transparent 10deg 20deg);animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.medal .flag{width:54px;height:38px;border-radius:6px}
.unlock.locked .medal{filter:grayscale(1);opacity:.7}
.unlock.locked .medal::before,.unlock.locked .confetti{display:none}
.unlock.locked .utitle{color:var(--muted)}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-20px;left:var(--x);width:9px;height:14px;background:var(--c);border-radius:2px;opacity:0;
  animation:fall 2.4s var(--d) cubic-bezier(.3,.6,.5,1) forwards;transform:rotate(var(--r))}
@keyframes fall{0%{opacity:1;transform:translateY(0) rotate(var(--r))}100%{opacity:0;transform:translateY(105vh) rotate(calc(var(--r) + 540deg))}}
/* pantalla de logros */
.lvlcard{display:flex;align-items:center;gap:18px;border-radius:22px;padding:22px;color:#fff;
  background:radial-gradient(120% 140% at 100% 0%,#e3a51d55 0%,transparent 55%),linear-gradient(155deg,var(--g700),var(--g900))}
.lvlcard h1{font-size:1.35rem;margin:2px 0 10px}
.eyebrowl{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.ring{--p:0;flex:none;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(#f5c451 calc(var(--p) * 1%),rgba(255,255,255,.18) 0)}
.ring span{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:var(--g800);font-size:1.7rem;font-weight:800;color:#fff}
:root[data-theme="dark"] .ring span{background:#123d24}
.xpbar{height:8px;border-radius:99px;background:rgba(127,127,127,.22);overflow:hidden}
.xpbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#f5c451,#e3a51d)}
.xptxt{font-size:.8rem;opacity:.9;margin-top:6px}
.lvlstats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.lvlstats div{background:var(--surface);border-radius:14px;padding:10px 6px;text-align:center;box-shadow:var(--shadow)}
.lvlstats b{display:block;font-size:1.15rem}
.lvlstats span{font-size:.7rem;color:var(--muted)}
.challenge{margin-top:14px;border:2px dashed #e3a51d88}
.challenge.done{border-style:solid;border-color:#e3a51d;background:linear-gradient(135deg,var(--star-on-bg),var(--surface))}
.chead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cemo{font-size:2rem;line-height:1;flex:none}
.challenge .eyebrowl{color:#b47c0c;opacity:1}
:root[data-theme="dark"] .challenge .eyebrowl{color:var(--gold)}
.challenge.mini{display:flex;align-items:center;gap:14px;margin-top:14px}
.challenge.mini .eyebrow{color:#b47c0c}
:root[data-theme="dark"] .challenge.mini .eyebrow{color:var(--gold)}
.challenge.mini b{display:block;margin-bottom:8px;line-height:1.3}
.challenge.mini .xpbar{margin-bottom:4px}
.stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stamp{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:12px 4px;border-radius:16px;
  background:var(--surface);box-shadow:var(--shadow)}
.sring{width:64px;height:64px;max-width:100%;border-radius:50%;display:grid;place-items:center;border:3px dashed var(--line);transition:transform .3s}
.sring .flag{width:34px;height:24px}
.stamp b{font-size:.8rem}
.stamp small{font-size:.7rem;color:var(--muted)}
.stamp:not(.on) .sring{filter:grayscale(1);opacity:.4}
.stamp.on .sring{border:3px double #c4434a;transform:rotate(var(--rot));box-shadow:inset 0 0 0 3px #c4434a22;background:#c4434a0d}
.stamp.on small{color:#c4434a;font-weight:700}
.kstamps{display:flex;flex-wrap:wrap;gap:8px}
.kstamp{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--surface);font-size:.8rem;
  font-weight:600;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.kstamp:not(.on){opacity:.5;filter:grayscale(1)}
.kstamp.on{background:var(--g50);color:var(--g800);box-shadow:inset 0 0 0 1px var(--g600)}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:700px){.badges{grid-template-columns:repeat(5,1fr)}}
.badge{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 6px 10px;border-radius:18px;
  background:var(--surface);box-shadow:var(--shadow);color:var(--ink)}
.badge b{font-size:.76rem;line-height:1.2;min-height:2.4em;display:flex;align-items:center}
.badge small{font-size:.68rem;color:var(--muted)}
.bemo{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;background:var(--surface2)}
.badge:not(.on) .bemo{filter:grayscale(1);opacity:.35}
.badge:not(.on) b{color:var(--muted)}
.badge .lock{position:absolute;top:8px;right:9px;font-size:.7rem;opacity:.6}
.badge.on{background:linear-gradient(160deg,var(--star-on-bg),var(--surface) 70%);box-shadow:inset 0 0 0 1.5px #e3a51d99,var(--shadow);overflow:hidden}
.badge.on .bemo{background:radial-gradient(circle at 35% 30%,#fff3cf,#f5c451 70%);box-shadow:0 4px 12px rgba(227,165,29,.35)}
.badge.on small{color:#b47c0c;font-weight:700}
:root[data-theme="dark"] .badge.on small{color:var(--gold)}
.badge.on::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.45) 50%,transparent 60%);
  transform:translateX(-120%);animation:shine 5s ease-in-out infinite;pointer-events:none}
@keyframes shine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.bprog{width:70%;height:5px;border-radius:99px;background:var(--surface2);overflow:hidden;margin-top:2px}
.bprog i{display:block;height:100%;background:var(--g600);border-radius:inherit}
.medals{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.mdl{flex:none;width:130px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:12px 8px;border-radius:16px;
  background:var(--surface);box-shadow:var(--shadow)}
.mdl span{font-size:2rem}.mdl b{font-size:.8rem;text-transform:capitalize}.mdl small{font-size:.68rem;color:var(--muted);line-height:1.3}
.myrevs a{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.myrevs a:last-child{border:0}
/* La Ronda */
.ronda-hero{background:radial-gradient(120% 140% at 100% 0%,#c98a2b 0%,transparent 55%),linear-gradient(155deg,#7a4a1f,#3b2410)}
.notes{display:grid;gap:12px}
@media(min-width:700px){.notes{grid-template-columns:repeat(2,1fr)}}
.note{display:flex;gap:14px;align-items:flex-start;padding:14px}
.note img{width:84px;height:84px;object-fit:cover;border-radius:12px;flex:none}
.nemo{width:56px;height:56px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:1.8rem;background:var(--g50)}
.note b{display:block;line-height:1.3}
.note p{margin:4px 0;font-size:.84rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.note small{font-size:.72rem}
#rondacta .sechead a{font-size:.85rem;font-weight:600;color:var(--accent)}
#rondacta h2 .ic{vertical-align:-3px}
.note-page h1{margin:14px 0 4px}
.ncover{width:100%;max-height:300px;object-fit:cover;border-radius:20px;margin-top:12px}
.nbig{font-size:3.4rem;margin-top:12px}
.nbody{margin-top:14px}
.nbody h3{margin:18px 0 6px;font-size:1.02rem}
.nbody p{margin:0 0 10px}
.nbody ul,.nbody ol{margin:0 0 10px;padding-left:22px}
.nbody li{margin:5px 0}
.bellcard{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.bellcard .bell{background:var(--g700);color:#fff}
.bell.on{opacity:.85}
/* invitación a instalar y aviso de comparar */
.installsheet,.nudge{position:fixed;left:12px;right:12px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:55;max-width:520px;margin:0 auto;
  display:flex;gap:12px;align-items:center;background:var(--surface);border-radius:20px;padding:14px;box-shadow:0 14px 40px rgba(0,0,0,.28);
  animation:slideup .4s cubic-bezier(.2,1,.3,1)}
.installsheet{align-items:flex-start}
.installsheet img{border-radius:14px;flex:none}
.installsheet p{font-size:.84rem;margin-top:2px}
@keyframes slideup{from{transform:translateY(40px);opacity:0}}
.nudge .thumb{width:46px;height:46px;flex:none;border-radius:10px}
.nudge b{display:block;font-size:.9rem}
.nudge .sub{display:block;font-size:.78rem;line-height:1.3}
.nudge .btn{flex:none;white-space:nowrap}
.nudge .nx{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface2);color:var(--muted)}
.nudge .nx .ic{width:16px;height:16px}
.nudge.out{transition:.3s;transform:translateY(30px);opacity:0}
@media(max-width:400px){.nudge .btn{padding:8px 10px}.lvlcard{padding:18px;gap:14px}.ring{width:66px;height:66px}.ring span{width:52px;height:52px;font-size:1.4rem}}

.bemo .flag{width:30px;height:21px}.cemo .flag{width:34px;height:24px;vertical-align:middle}

/* ================= ajustes de comunidad (2) ================= */
/* tarjetas de La Ronda: ícono a la izquierda, texto al lado (a.card las forzaba a bloque) */
a.card.note{display:flex}
.ronda-hero + #notes{margin-top:16px}
#notes{margin-top:16px}
.nhead{display:flex;gap:14px;align-items:center;margin-top:14px}
.nhead h1{margin:0 0 2px}
.nemo.big{width:68px;height:68px;font-size:2.3rem;border-radius:18px}
@media(max-width:600px){.nhead{align-items:flex-start}.nemo.big{width:56px;height:56px;font-size:1.9rem}.nhead h1{font-size:1.35rem}}
/* carrusel de notas con puntitos */
.ncarousel{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:2px 2px 4px}
.ncarousel::-webkit-scrollbar{display:none}
.ncarousel > *{scroll-snap-align:start}
@media(min-width:700px){.ncarousel{grid-auto-columns:calc((100% - 24px) / 3)}}
.ncarousel .note{height:100%}
.dots{display:flex;justify-content:center;gap:7px;margin-top:10px}
.dots button{width:8px;height:8px;padding:0;border-radius:99px;background:var(--line);transition:width .25s,background .25s}
.dots button.on{width:22px;background:var(--accent)}
@media(min-width:700px){.dots{display:none}}
/* interruptor de avisos */
.bell{display:inline-flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;border-radius:999px;background:#fff;color:#3b2410;
  font-weight:700;font-size:.88rem;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.bell .sw{position:relative;width:40px;height:24px;border-radius:99px;background:#c9cfca;transition:background .2s;flex:none}
.bell .sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.bell.on .sw{background:var(--g600)}
.bell.on .sw::after{transform:translateX(16px)}
.bellcard .bell{background:var(--surface2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
/* festejo: cerrar y "lograste X más" */
.ux{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface2);color:var(--muted)}
.ux .ic{width:18px;height:18px}
.umore{margin-top:12px;padding:10px 12px;border-radius:14px;background:var(--star-on-bg);font-size:.86rem}
.umore span{display:block;font-size:.78rem;color:var(--muted);margin-top:3px}
/* desafío: a dónde lleva */
.cgo{flex:none;font-size:.78rem;font-weight:700;color:var(--accent);white-space:nowrap}
a.card.challenge{color:inherit}
/* ficha: barra de 3 acciones iguales */
.actbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;max-width:440px}
.phero .actbar > button{position:static;width:auto;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:10px 4px;border-radius:14px;font-size:.74rem;font-weight:700;line-height:1.15;background:var(--surface2);color:var(--g800);
  box-shadow:inset 0 0 0 1px var(--line);top:auto;right:auto;left:auto}
.phero .actbar > button .ic{width:20px;height:20px;fill:none}
.phero .actbar > button span{display:block;white-space:nowrap}
.phero .actbar > button.on{background:var(--g50);box-shadow:inset 0 0 0 1.5px var(--g600);color:var(--g800)}
.phero .actbar > .favbtn:not(.triedbtn).on{background:#fdecec;box-shadow:inset 0 0 0 1.5px #e0484f;color:#c4434a}
:root[data-theme="dark"] .phero .actbar > .favbtn:not(.triedbtn).on{background:#3a1e20;color:#ff8a8f}
.phero .actbar > .favbtn:not(.triedbtn).on .ic{fill:currentColor}
.phero .actbar > .triedbtn.on .ic{stroke-width:2.6}
/* ficha sin reseñas: dos líneas prolijas */
.phrate.norev{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:12px}
.phrate.norev .stars .ic{width:16px;height:16px}
.phrate.norev .sub{font-size:.85rem}
.phrate.norev .rvlink{font-size:.88rem}
@media(max-width:600px){
  .phero .phfoot{flex-direction:column;align-items:stretch}
  .phero .phbtns,.phero .actbar{width:100%;max-width:none;margin-top:12px}
  .phrate.norev{margin:0}
}
/* opiniones: orden + ver todas */
.revhead{align-items:center;flex-wrap:wrap;gap:8px}
.revhead h2{margin:0}
.revhead h2 .sub{font-weight:600}
#reviews .revhead + #revlist{margin-top:6px}
.revmore{display:flex;margin:14px auto 0}
.phero .actbar > .triedbtn.on{color:var(--g800);background:var(--g50);box-shadow:inset 0 0 0 1.5px var(--g600)}
.phero .actbar > .triedbtn .ic{fill:none!important}

/* ================= ajustes (3) ================= */
/* países en el inicio: banderas redondas en una fila */
.countryrow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px}
.countryrow a{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.74rem;font-weight:600;color:var(--muted)}
.cflag{width:52px;height:52px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface);
  box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--line);transition:transform .15s}
.cflag .flag{width:78px;height:54px;border-radius:0;box-shadow:none;max-width:none}
.countryrow a:active .cflag{transform:scale(.92)}
@media(hover:hover){.countryrow a:hover .cflag{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--accent)}}
/* carrusel "también te pueden gustar": que no se corte el borde dorado de la destacada */
.hscroll{padding:6px 6px 12px;margin:0 -6px;scroll-padding-left:6px}
/* manito sola en las opiniones */
.helpful{gap:5px;padding:5px 11px;font-size:.9rem}
.helpful b{font-size:.8rem}
.helpful b:empty{display:none}
/* avisos: el texto al lado del interruptor sin aplastarse */
.bellcard .grow{flex:1 1 170px;min-width:0}
/* reacciones en las notas */
.reactcard{margin-top:14px}
.reacts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.react{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 8px;border-radius:14px;background:var(--surface2);
  box-shadow:inset 0 0 0 1px var(--line);font-size:.7rem;font-weight:600;color:var(--muted);transition:transform .15s}
.react .re{font-size:1.5rem;line-height:1.2;transition:transform .2s}
.react b{font-size:.78rem;color:var(--ink);min-height:1em}
.react.on{background:var(--g50);box-shadow:inset 0 0 0 1.5px var(--g600);color:var(--g800)}
.react.pop .re{animation:rpop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes rpop{40%{transform:scale(1.45) rotate(-8deg)}}
/* ficha en el celular: puntaje chico debajo de la foto y los 3 botones al lado */
@media(max-width:600px){
  .phero .phfoot{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:14px;align-items:center}
  .phero .phfoot .phrate{margin:0}
  .phero .phfoot .ratingjump{flex-direction:column;align-items:flex-start;gap:2px;padding:0}
  .phero .phfoot .ratingjump .score{font-size:2rem;line-height:1}
  .phero .phfoot .ratingjump .stars .ic{width:13px;height:13px}
  .phero .phfoot .ratingjump .sub{font-size:.74rem}
  .phero .actbar{margin-top:0!important;gap:6px}
  .phero .actbar > button{padding:9px 2px;font-size:.7rem}
  .phrate.norev .stars .ic{width:12px;height:12px}
  .phrate.norev .sub,.phrate.norev .rvlink{font-size:.74rem;line-height:1.3}
}

/* ================= cuentas, respuestas e idiomas ================= */
html.i18n-wait #app,html.i18n-wait .bottomnav{visibility:hidden}
.topactions{gap:6px}
.topactions .themebtn{width:40px;height:40px}
@media(max-width:380px){.wordmark{display:none}}
.langbtn .flag{width:22px;height:16px;border-radius:3px}
.langmenu{position:absolute;top:calc(100% + 6px);right:12px;z-index:70;background:var(--surface);border-radius:16px;padding:6px;
  box-shadow:0 14px 40px rgba(0,0,0,.25);display:flex;flex-direction:column;min-width:170px;animation:ufade .15s}
.langmenu button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:none;text-align:left;font-weight:600}
.langmenu button.on{background:var(--g50);color:var(--g800)}
.topbar{position:sticky}
.userlink{overflow:hidden;padding:0}
.avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;display:inline-grid;place-items:center;vertical-align:middle}
.avatar.noimg{background:var(--g600);color:#fff;font-weight:800;font-size:.8rem}
.avatar.top{width:40px;height:40px}
.avatar.big{width:72px;height:72px;font-size:1.8rem;box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--g600)}
/* reseñas con cuenta */
.review .who{display:inline-flex;align-items:center;gap:8px;min-width:0}
.review .who .avatar{width:30px;height:30px}
.vals{font-size:.74rem;color:var(--muted);font-weight:500}
.helprow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.threadbtn{background:none;padding:5px 4px;font-size:.82rem;font-weight:600;color:var(--accent)}
.threadbtn b{font-weight:800}
.thread{margin:10px 0 2px 14px;padding-left:12px;border-left:2px solid var(--line)}
.reply{display:flex;gap:10px;padding:8px 0;align-items:flex-start}
.reply .grow{min-width:0}
.reply p{margin-top:2px;font-size:.9rem;overflow-wrap:anywhere}
.reply .delrep{font-size:.74rem;margin-left:6px;color:var(--muted)}
.replyform{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
.replyform textarea{flex:1;min-width:0;resize:none;border-radius:16px;padding:9px 12px;border:1px solid var(--line);background:var(--surface2);
  color:var(--ink);font:inherit;font-size:.9rem;max-height:160px}
.replylogin{font-size:.85rem;margin-top:6px}
.replylogin a,.asme a{color:var(--accent);font-weight:700}
.asme{display:flex;align-items:center;gap:8px;margin:4px 0 12px;font-size:.88rem}
/* mi cuenta */
.acchero{display:flex;align-items:center;gap:16px;padding:6px 2px 4px}
.acchero h1{font-size:1.4rem}
.acclogin{background:radial-gradient(120% 140% at 100% 0%,#2f7fc1 0%,transparent 55%),linear-gradient(155deg,var(--g700),var(--g900))}
.perks{list-style:none;padding:0;display:grid;gap:14px}
.perks li{display:flex;gap:12px;align-items:flex-start}
.perks li>span{font-size:1.5rem;line-height:1.2}
.gbtn{display:flex;justify-content:center;margin-top:18px;min-height:44px}
.settings{display:grid;gap:4px;padding-top:8px;padding-bottom:8px}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.setrow:last-child{border:0}
.setrow>span{font-weight:600}
.settings .bell{background:var(--surface2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);padding:6px 6px 6px 12px}
.settings .bell[data-theme-toggle]{padding:6px}
.langpick{display:flex;gap:6px;flex-wrap:wrap}
.langpick button{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--surface2);
  box-shadow:inset 0 0 0 1px var(--line);font-size:.8rem;font-weight:600}
.langpick button.on{background:var(--g50);box-shadow:inset 0 0 0 1.5px var(--g600);color:var(--g800)}
.replies .reply{border-bottom:1px solid var(--line);padding:10px 0}
.replies .reply:last-child{border:0}
.replies .reply.new{background:linear-gradient(90deg,var(--g50),transparent);border-radius:10px}

/* ================= ajustes (4) ================= */
/* barra de arriba con 2 botones: el nombre Yerbapp se ve siempre */
@media(max-width:380px){.wordmark{display:inline}}
/* banderas del inicio: agrupadas al centro */
.countryrow{display:flex;justify-content:space-evenly;gap:6px}
@media(min-width:600px){.countryrow{justify-content:center;gap:44px}}
/* favoritas: corazón con el número, arriba a la derecha de la ficha */
.phero{position:relative}
.phero .favcount{position:absolute;top:12px;right:14px;padding:0;font-size:.85rem;font-weight:700;gap:4px;z-index:1}
.phero .favcount .ic{width:15px;height:15px}
.phero .brand{padding-right:44px}
/* botones de la ficha un poco más grandes */
.phero .actbar > button{padding:12px 4px;font-size:.78rem;gap:5px}
.phero .actbar > button .ic{width:22px;height:22px}
@media(max-width:600px){.phero .actbar > button{padding:11px 2px;font-size:.74rem}}
/* interruptor solo (ajustes) */
.settings .bell.bare,.bell.bare{padding:6px;background:var(--surface2)}
/* favoritas dentro de Mi cuenta */
a.card.favrow{display:flex;align-items:center;gap:14px;margin-top:16px}
.favrow>.ic{width:26px;height:26px;color:#e0484f;fill:#e0484f}
.favrow .chev{font-size:1.6rem;color:var(--muted)}
@media(max-width:400px){.phero .actbar{gap:5px}.phero .actbar > button{padding:11px 0;font-size:.7rem;letter-spacing:-.01em}}

/* ================= ajustes (5) ================= */
/* banderas redondas: la imagen llena el círculo y queda centrada (el sol y los escudos al medio) */
.cflag{position:relative}
.cflag .flag{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* selectores: flechita propia, a la misma distancia del borde en todos */
select{appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a9a90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
select.sortsel{padding-right:34px;background-position:right 13px center}
/* ficha en computadora: los 3 botones a la derecha del puntaje, en la misma fila */
@media(min-width:601px){
  .phero .phfoot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:12px}
  .phero .phfoot .phrate{margin:0}
  .phero .actbar{margin:0 0 0 auto;flex:0 1 360px}
}

/* botones de la ficha en el celular: más anchos (el puntaje ocupa solo lo que necesita) */
@media(max-width:600px){
  .phero .phfoot{grid-template-columns:auto minmax(0,1fr);column-gap:12px}
  .phero .actbar{gap:6px}
  .phero .actbar > button{padding:11px 4px;font-size:.76rem}
}
@media(max-width:380px){.phero .phfoot{column-gap:10px}.phero .actbar > button{font-size:.72rem;padding:11px 2px}}

/* ================= ajustes (7) ================= */
/* idioma: control segmentado en una fila */
.langseg{display:inline-flex;padding:3px;border-radius:999px;background:var(--surface2);box-shadow:inset 0 0 0 1px var(--line)}
.langseg button{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:none;font-size:.78rem;font-weight:700;color:var(--muted)}
.langseg button.on{background:var(--surface);color:var(--g800);box-shadow:0 1px 4px rgba(0,0,0,.18),inset 0 0 0 1.5px var(--g600)}
.langseg .flag{width:18px;height:13px}
/* ficha: nombres largos no se pisan con el ♥; sin reseñas, compacto */
@media(max-width:600px){.phero .brand{font-size:1.15rem!important;overflow-wrap:anywhere}}
.phrate.norev .rvlink{white-space:nowrap}
/* contactos: los mails largos se achican y cortan dentro de la pantalla */
.chips.contacts .btn{max-width:100%;min-width:0}
.chips.contacts a[href^="mailto:"]{font-size:.74rem;overflow-wrap:anywhere;word-break:break-all;text-align:left;white-space:normal}
/* nota: ❤️, comentarios y compartir al pie del texto */
.nfoot{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);flex-wrap:wrap}
.nfoot .nshare{margin-left:auto}
.helpful.on.nlike,.cmt .helpful.on{background:#fdecec;box-shadow:inset 0 0 0 1px #e0484f;color:#c4434a}
:root[data-theme="dark"] .helpful.on.nlike,:root[data-theme="dark"] .cmt .helpful.on{background:#3a1e20;color:#ff8a8f}
#ncomments{margin-top:14px}
#ncomments h2{margin:0 0 6px}
.cthread{border-bottom:1px solid var(--line);padding:6px 0}
.cthread:last-of-type{border-bottom:0}
.cmt{display:flex;gap:10px;padding:8px 0;align-items:flex-start}
.cmt .grow{min-width:0}
.cmt p{margin-top:2px;overflow-wrap:anywhere}
.cmt.reply{margin-left:22px;padding-left:12px;border-left:2px solid var(--line)}
.creplyslot .replyform{margin-left:22px}
.cform{margin-top:12px}

/* ================= ajustes (8) ================= */
/* bloque verde del inicio, compacto: texto + botón redondo de escanear */
.homehero.compact{display:flex;align-items:center;gap:16px;padding:20px 20px 20px 22px;text-align:left}
.homehero.compact h1{font-size:1.45rem;margin:0}
.homehero.compact p{margin:6px 0 0;font-size:.9rem;max-width:22em}
.homehero.compact::after{width:150px;height:150px;right:-30px;bottom:-60px;border-width:22px}
@media(max-width:600px){.homehero.compact{text-align:left}.homehero.compact h1,.homehero.compact p{margin-left:0;margin-right:0}}
.scanfab{position:relative;z-index:1;flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-size:.78rem}
.scanfab .ring{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--g700);
  box-shadow:0 8px 22px rgba(0,0,0,.28);animation:fabpulse 2.4s ease-out infinite;transition:transform .15s}
.scanfab .ring .ic{width:34px;height:34px;stroke-width:2}
.scanfab:active .ring{transform:scale(.93)}
@keyframes fabpulse{0%{box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 16px rgba(255,255,255,0)}100%{box-shadow:0 8px 22px rgba(0,0,0,.28),0 0 0 0 rgba(255,255,255,0)}}
@media(min-width:700px){.homehero.compact{padding:26px 34px}.homehero.compact h1{font-size:1.8rem}.scanfab .ring{width:86px;height:86px}}
/* Explorar: banderas redondas que se eligen */
.countryrow.pick{margin-top:14px}
.countryrow.pick button{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;padding:0;font-size:.74rem;font-weight:600;color:var(--muted)}
.countryrow.pick .cflag.all{color:var(--g800);background:var(--g50)}
.countryrow.pick .cflag.all .ic{width:26px;height:26px}
.countryrow.pick button.active{color:var(--g800)}
.countryrow.pick button.active .cflag{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.countryrow.pick button:not(.active) .cflag{opacity:.85}

#preparar{scroll-margin-top:84px}   /* que el título no quede tapado por la barra de arriba */

/* ================= mis reseñas, probadas, números de la cuenta ================= */
.lvlstats.links a{display:block;background:var(--surface);border-radius:14px;padding:10px 6px;text-align:center;box-shadow:var(--shadow);transition:transform .15s}
.lvlstats.links a:active{transform:scale(.96)}
.lvlstats.links b{display:block;font-size:1.15rem}
.lvlstats.links span{font-size:.7rem;color:var(--muted)}
.myrev{margin-top:12px}
.myrevhead{display:flex;gap:12px;align-items:center}
.myrevhead .thumb{width:56px;height:56px;border-radius:12px;flex:none}
.myrev .helprow .grow{flex:1}
#rfCancel{margin-left:8px}

/* el botón de Google se dibuja en modo claro: así su recuadro queda transparente sobre el modo oscuro de la app */
.gbtn{color-scheme:light}
.gbtn iframe{color-scheme:light;background:transparent}
.lvlstats.links button{display:block;width:100%;background:var(--surface);border-radius:14px;padding:10px 6px;text-align:center;box-shadow:var(--shadow);color:var(--ink)}
.lvlstats.links button b{display:block;font-size:1.15rem}
.lvlstats.links button span{font-size:.7rem;color:var(--muted)}
#badgelist{scroll-margin-top:84px}

/* campanita de notificaciones */
.belllink{position:relative}
.belllink .count,.notifrow .count{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:#e0484f;color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface)}
.notifrow{position:relative}
.notifrow>.ic{color:var(--gold);fill:none}
.notifrow .count{position:static;box-shadow:none}
.replies .reply b{font-weight:700}
.dangerlink{color:#c4434a;font-size:.84rem}

/* números de Mi cuenta con ícono */
.lvlstats.icons a .ic{display:block;margin:0 auto 4px;width:20px;height:20px}
.lvlstats.icons .st-star .ic{color:var(--gold)}
.lvlstats.icons .st-check .ic{color:var(--g600);stroke-width:2.6}
.lvlstats.icons .st-heart .ic{color:#e0484f;fill:#e0484f}
.lvlstats.icons .st-trophy .ic{color:#b47c0c}
:root[data-theme="dark"] .lvlstats.icons .st-trophy .ic{color:var(--gold)}

/* números de Mi cuenta: ícono y número en una línea, la palabra abajo */
.lvlstats.icons a{padding:10px 4px}
.lvlstats.icons a em{display:flex;align-items:center;justify-content:center;gap:6px;font-style:normal}
.lvlstats.icons a em .ic{display:inline-block;margin:0;width:18px;height:18px}
.lvlstats.icons a em b{font-size:1.15rem;line-height:1}
.lvlstats.icons a span{display:block;margin-top:3px}
.nemoav{background:var(--g50);font-size:1.1rem;width:30px;height:30px}

/* bloque de notificaciones en Mi cuenta */
.notifcard{margin-top:14px;padding-top:12px;padding-bottom:6px}
.nchead{display:flex;align-items:center;gap:8px;padding-bottom:6px}
.nchead .ic{width:18px;height:18px;color:var(--gold)}
.nchead b{font-size:1rem}
.nchead .count{min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:#e0484f;color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center}
.nchead .sub{margin-left:auto;font-size:.82rem;color:var(--accent);font-weight:600}
.notifcard .setrow>span{font-weight:500;font-size:.92rem}
.notifcard .bell.bare{padding:6px;background:var(--surface2)}
/* números de Mi cuenta: los íconos a la altura de los números */
.lvlstats.icons a em{align-items:center;height:22px}
.lvlstats.icons a em b{display:block;line-height:22px;height:22px}
.lvlstats.icons a em .ic{display:block;flex:none}
.lvlstats.icons .st-heart .ic{transform:translateY(-1px)}
.notifcard .setrow{flex-wrap:nowrap}
.notifcard .setrow>span{flex:1;min-width:0;line-height:1.3}
.notifcard .setrow .bell{flex:none}

.sechead .belllink{width:38px;height:38px}
.sechead .belllink .ic,.nbell .ic{width:19px;height:19px;color:var(--gold)}
.nbell{display:grid;place-items:center;width:38px;height:38px}

.nhead2{align-items:center}
.nhead2 .themebtn{width:40px;height:40px;flex:none}
#notifset{scroll-margin-top:84px}

/* íconos dorados en títulos (campanita de Notificaciones, estrella de Mis reseñas) */
h1 span[style*="--gold"] .ic{color:var(--gold)}

.myrev{cursor:pointer}
/* reseña a la que se llegó desde "Mis reseñas": se ilumina un momento */
.review.revglow{animation:revflash 2.4s ease-out}
@keyframes revflash{0%,35%{background:var(--star-on-bg);box-shadow:0 0 0 2px var(--gold)}100%{background:transparent;box-shadow:none}}
.review.revglow{border-radius:12px;margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}

.helpful.mineonly{cursor:default;opacity:.75}

/* responder / comentar: el texto ocupa todo el ancho y el botón queda abajo a la derecha */
.replyform{flex-wrap:wrap;align-items:flex-start}
.replyform .avatar{margin-top:6px}
.replyform textarea{flex:1 1 0;min-width:0;min-height:42px;padding:10px 14px;font-size:.92rem;line-height:1.4}
.replyform .btn{flex-basis:auto;margin-left:auto}
.replyform::after{content:"";flex-basis:100%;order:1}
.replyform .btn{order:2}
@media(max-width:600px){
  .thread{margin-left:4px;padding-left:10px}
  .cmt.reply{margin-left:10px}
  .creplyslot .replyform{margin-left:10px}
}

/* encabezado de cada reseña: foto + nombre (una línea) y debajo "N reseñas · Tu reseña"; estrellas a la derecha */
.review .revtop{align-items:flex-start;gap:10px}
.review .who{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.review .whotxt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.review .whotxt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.review .whotxt .vals{font-size:.74rem;color:var(--muted);font-weight:500}
.review .mytag{color:var(--g600);font-weight:700}
.review .revtop .stars{flex:none;margin-top:2px}
.review .helprow .rvlink{font-size:.82rem}
.review .helprow{gap:12px}

/* contadores de la ficha arriba a la derecha: 🧉 probadas y ♥ favoritas */
.phero .phcounts{position:absolute;top:12px;right:14px;display:flex;gap:10px;align-items:center;z-index:1}
.phero .phcounts .favcount{position:static;padding:0}
.triedcount{display:inline-flex;align-items:center;gap:4px;font-size:.85rem;font-weight:700;color:var(--g600)}
.triedcount[hidden]{display:none}
.triedcount b{font-weight:700}
.triedcount .ic{width:15px;height:15px}
.phero .brand{padding-right:84px}
.h1gourd .ic{color:var(--g600)}
.lvlstats.icons .st-check .ic{stroke-width:1.9}
/* celular: los contadores van sobre la foto (así el nombre usa todo el ancho y no se corta) */
@media(max-width:600px){
  .phero .phcounts{left:18px;right:auto;top:94px;background:rgba(0,0,0,.6);padding:3px 9px;border-radius:99px;gap:9px;backdrop-filter:blur(4px)}
  .phero .phcounts:not(:has(.favcount)):has(.triedcount[hidden]){display:none}
  .phero .phcounts .triedcount{color:#9ad7ae;font-size:.78rem}
  .phero .phcounts .favcount{color:#ff8a8f;font-size:.78rem}
  .phero .phcounts .ic{width:13px;height:13px}
  .phero .brand{padding-right:0!important;overflow-wrap:normal!important}
}

/* contadores arriba a la derecha, uno debajo del otro: ♥ favoritas y debajo 🧉 probadas (también en el celular) */
.phero .phcounts{position:absolute;top:12px;right:14px;left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  background:none;padding:0;border-radius:0;backdrop-filter:none}
.phero .phcounts .favcount{color:#c4434a;font-size:.85rem}
.phero .phcounts .triedcount{color:var(--g600);font-size:.85rem}
.phero .phcounts .ic{width:15px;height:15px}
.phero .brand{padding-right:44px!important}
@media(max-width:600px){
  .phero .phcounts{left:auto;right:14px;top:12px;background:none;padding:0;backdrop-filter:none}
  .phero .phcounts .favcount,.phero .phcounts .triedcount{font-size:.8rem}
  .phero .phcounts .ic{width:14px;height:14px}
  .phero .brand{padding-right:40px!important;overflow-wrap:normal!important}
}
:root[data-theme="dark"] .phero .phcounts .favcount{color:#ff8a8f}
:root[data-theme="dark"] .phero .phcounts .triedcount{color:#9ad7ae}
.favcount[hidden]{display:none!important}
.favcount b{font-weight:700}

/* sugerencias del buscador: se despliegan al tocarlo */
.exwrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.2,.8,.2,1)}
.exwrap>.examples{overflow:hidden;min-height:0;margin-top:0;transition:margin-top .32s}
.exwrap.open{grid-template-rows:1fr}
.exwrap.open>.examples{margin-top:10px}
.exwrap .examples>*{opacity:0;transform:translateY(-6px)}
.exwrap.open .examples>*{animation:exin .38s cubic-bezier(.2,.9,.3,1.3) forwards;animation-delay:calc(var(--i, -1) * 55ms + 90ms)}
.exwrap.open .examples>.ic,.exwrap.open .examples>span{animation-delay:40ms}
@keyframes exin{to{opacity:1;transform:none}}
.exwrap .examples a{transition:background .15s}
@media(hover:hover){.exwrap .examples a:hover{background:var(--g50)}}

/* yerba destacada en el inicio */
.challenge.mini.spot{align-items:center;gap:14px}
.spot .thumb{width:64px;height:64px;flex:none;border-radius:12px}
.spot .spname{display:block;margin:0 0 4px;line-height:1.25}
.spot .spname .sub{font-weight:500}
.spot .spmeta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.spot .spmeta .stars .ic{width:13px;height:13px}
.spot .sp-dot{opacity:.6}
.spot .sptag{margin-top:4px;font-size:.82rem;font-weight:700;color:#b47c0c}
:root[data-theme="dark"] .spot .sptag{color:var(--gold)}
.spot .sptaste{margin-top:4px;font-size:.8rem}
.spot .chev{font-size:1.6rem;color:var(--muted);flex:none}

/* pasaporte matero: sellos dorados, como el resto de los logros */
.stamp.on .sring{border:3px double #e3a51d;box-shadow:inset 0 0 0 3px #e3a51d22,0 0 12px rgba(227,165,29,.25);background:#e3a51d14}
.stamp.on small{color:#b47c0c}
:root[data-theme="dark"] .stamp.on small{color:var(--gold)}

/* aviso "¿Mejor que tu favorita?": se distingue del fondo (tono propio, borde, sombra, barrita de tiempo) */
.nudge{background:linear-gradient(135deg,#eaf6ee,#fff 70%);border:1.5px solid var(--g600);overflow:hidden;
  box-shadow:0 18px 44px rgba(13,58,33,.32),0 0 0 4px rgba(46,154,86,.14);animation:nudgein .55s cubic-bezier(.2,1.3,.4,1)}
:root[data-theme="dark"] .nudge{background:linear-gradient(135deg,#21402e,#17271e 75%);border-color:#5fbf80;
  box-shadow:0 18px 44px rgba(0,0,0,.6),0 0 0 4px rgba(95,191,128,.16)}
.nudge b{color:var(--g800)}
.nudge::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--g600);transform-origin:left;
  animation:nudgetime 9s linear forwards;opacity:.8}
@keyframes nudgein{0%{transform:translateY(40px) scale(.96);opacity:0}70%{transform:translateY(-4px) scale(1.01);opacity:1}100%{transform:none}}
@keyframes nudgetime{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.nudge .nx{background:rgba(127,127,127,.15)}

/* ================= mateadas del día (historias de 24 h) ================= */
#stories:empty{display:none}
.storyrow{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;margin:0 -2px 6px;scrollbar-width:none;scroll-snap-type:x proximity}
.storyrow::-webkit-scrollbar{display:none}
.story{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;padding:0;cursor:pointer;flex:none;width:70px;scroll-snap-align:start;color:var(--ink)}
.stcirc{position:relative;width:66px;height:66px;border-radius:50%;padding:3px;display:grid;place-items:center;background:var(--line)}
.stcirc.new{background:conic-gradient(from 210deg,var(--gold),#f0c75a,var(--g500),var(--g700),var(--gold))}
.stcirc img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2.5px solid var(--bg);background:var(--surface)}
.stcirc.add{background:var(--g50);color:var(--g800);border:2px dashed var(--g500);padding:0}
.stcirc.add .ic{width:26px;height:26px}
.stcirc.add.has{border:0;padding:3px;background:var(--line)}
.splus{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:var(--g700);color:#fff;font-style:normal;
  font-weight:800;font-size:1rem;line-height:1;display:grid;place-items:center;border:2.5px solid var(--bg)}
.stcirc.add:not(.has) .splus{display:none}
.story .sname{font-size:.72rem;font-weight:600;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.story.mine .sname{color:var(--g800)}
.storyinvite{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;margin-bottom:12px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit}
.storyinvite .stcirc{width:52px;height:52px;flex:none}
.storyinvite .grow{display:flex;flex-direction:column;gap:2px}
.storyinvite .sub{font-size:.8rem}
@media(hover:hover){.stcirc{transition:transform .15s}.story:hover .stcirc{transform:scale(1.04)}}

/* visor */
body.svopen{overflow:hidden}
.sv{position:fixed;inset:0;z-index:200;background:#000;display:flex;justify-content:center;outline:none;touch-action:none;user-select:none;-webkit-user-select:none}
.svbox{position:relative;width:100%;max-width:520px;height:100%;display:flex;flex-direction:column;color:#fff}
.svbars{position:absolute;top:calc(8px + env(safe-area-inset-top));left:10px;right:10px;display:flex;gap:4px;z-index:3}
.svbars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.svbars b{display:block;height:100%;background:#fff}
.svhead{position:absolute;top:calc(18px + env(safe-area-inset-top));left:10px;right:6px;display:flex;align-items:center;gap:8px;z-index:3;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.svhead b{font-size:.92rem}
.svhead>span{font-size:.78rem;opacity:.8;flex:1}
.svav{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--g700);display:grid;place-items:center;font-weight:800;flex:none}
.svbtn{background:none;border:0;color:#fff;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;cursor:pointer;font:inherit}
.svbtn .ic{width:24px;height:24px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.svstage{position:relative;flex:1;display:grid;place-items:center;min-height:0}
.svimg{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}
.svnav{position:absolute;top:70px;bottom:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.svnav.prev{left:0;width:33%}
.svnav.next{right:0;width:67%}
.svpend{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:rgba(0,0,0,.7);padding:8px 14px;border-radius:999px;font-size:.82rem;white-space:nowrap}
.svfoot{padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.55) 30%)}
.svcap{margin:0 0 8px;font-size:.95rem;line-height:1.35}
.svacts{display:flex;align-items:center;gap:6px}
.svprod{display:inline-flex;align-items:center;gap:6px;flex:1;min-width:0;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:.85rem;font-weight:700}
.svprod>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svprod .sub{color:rgba(255,255,255,.75);font-weight:500}
.svprod .ic{width:18px;height:18px;flex:none}
.svviews{display:inline-flex;align-items:center;gap:4px;font-size:.85rem;opacity:.9;padding:0 6px}
.svviews .ic{width:18px;height:18px}
.svreact{width:auto;padding:0 12px;border-radius:999px;gap:4px;display:inline-flex;font-size:1.25rem;background:rgba(255,255,255,.12)}
.svreact span{font-size:.85rem;font-weight:700}
.svreact.on{background:rgba(227,165,29,.35);box-shadow:inset 0 0 0 1.5px var(--gold)}
.svreact.pop{animation:svpop .35s ease}
.svreact:disabled{opacity:.4}
@keyframes svpop{50%{transform:scale(1.25)}}
.svmenu{position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.45);display:flex;align-items:flex-end}
.svmenu[hidden]{display:none}
.svsheet{width:100%;background:var(--surface);color:var(--ink);border-radius:18px 18px 0 0;padding:16px 14px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px}
.svsheet .sub{display:flex;align-items:center;gap:6px;margin:0 0 6px}
.svsheet .sub .ic{width:16px;height:16px}
.svopt{display:flex;align-items:center;gap:8px;width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;text-align:left}
.svopt .ic{width:18px;height:18px}
.svopt.danger{color:var(--danger)}

/* subir */
.storysheet{position:fixed;inset:0;z-index:190;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center}
.ssbox{width:100%;max-width:520px;max-height:92vh;overflow:auto;background:var(--surface);color:var(--ink);border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:var(--shadow)}
.ssbox .sub{margin-top:4px}
@media(min-width:700px){.storysheet{align-items:center}.ssbox{border-radius:20px}}
.storyform{display:flex;flex-direction:column;gap:12px}
.svbtn.plain{color:var(--muted);width:36px;height:36px}
.svbtn.plain .ic{filter:none}
.stprev{width:100%;max-height:42vh;object-fit:contain;border-radius:14px;background:#000}
.strules{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:12px;background:var(--g50);color:var(--g800);font-size:.82rem;line-height:1.35}
.strules .ic{width:18px;height:18px;flex:none;margin-top:1px}
.stlbl{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.88rem}
.stlbl .sub{font-weight:500}
.stlbl input{width:100%}
.stsearch{position:relative}
.stsug{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:2;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.stsug[hidden]{display:none}
.stsug button{display:block;width:100%;text-align:left;padding:10px 12px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.stsug button:last-child{border:0}
.stmsg{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:12px;font-size:.86rem}
.stmsg[hidden]{display:none}
.stmsg.bad{background:#fdecea;color:#8c2a22}
:root[data-theme="dark"] .stmsg.bad{background:#3a1d1b;color:#f3b4ad}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stmsg.bad{background:#3a1d1b;color:#f3b4ad}}
.svprod .ic:last-child{transform:rotate(-90deg);width:16px;height:16px;opacity:.8}

.stprevbox{position:relative}
.stchange{position:absolute;right:8px;bottom:8px;background:var(--surface);box-shadow:var(--shadow)}
.stchange .ic,.stmsg .btn .ic{width:16px;height:16px}
.stmsg .btn{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;gap:6px}

/* visor: la foto queda siempre entre la cabecera y la barra de abajo (no se mete debajo ni se "lava") */
.svbox{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
.svbars,.svhead{position:static}
.svbars{margin:calc(8px + env(safe-area-inset-top)) 10px 0}
.svhead{margin:8px 6px 6px 10px}
.svstage{position:relative;min-height:0;overflow:hidden}
.svimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;max-width:none;max-height:none}
.svfoot{background:#000;padding-top:12px}
.svnav{top:0}
.svpend{bottom:10px}
/* tu círculo: anillo verde parejo (sin el borde gris doble) */
.stcirc.add.has{background:linear-gradient(135deg,var(--g500),var(--g700))}

/* círculos de mateadas: la foto centrada dentro del anillo (el borde no la corre) y anillo parejo */
.stcirc{box-sizing:border-box;padding:2.5px}
.stcirc img{box-sizing:border-box;display:block;width:100%;height:100%;border:2.5px solid var(--bg)}
.stcirc.add.has{padding:2.5px;background:var(--g600)}

/* la foto se fija dentro del anillo (fotos verticales u horizontales, igual) */
.stcirc img{position:absolute;top:2.5px;left:2.5px;width:calc(100% - 5px);height:calc(100% - 5px);object-fit:cover}

/* visor: alto estable (en el celular la barra del navegador aparece/desaparece al tocar abajo y movía la foto) */
.sv{align-items:flex-start}
.svbox{height:100%;height:100svh}

/* visor: avatar con la inicial (sin foto de Google) y barra de abajo que nunca se sale */
.svhead>.svav{flex:none;width:32px;height:32px;opacity:1;font-size:.9rem}
.svav.ini{background:hsl(var(--h) 45% 38%);color:#fff;text-shadow:none}
.svhead>.svago{flex:1;min-width:0}
.svhead b{flex:none;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svprod{flex:1 1 auto;min-width:0}
.svprod>span{min-width:0;flex:1}
.svacts>.svbtn,.svacts>.svviews{flex:none}
.svbox{grid-template-columns:minmax(0,1fr)}

/* visor: profundidad para el giro de cubo al pasar de persona */
.sv{perspective:1100px;overflow:hidden}
.svbox{backface-visibility:hidden;will-change:transform;background:#000;overflow:hidden}

.svpeek{position:absolute;inset:0;display:flex;justify-content:center;pointer-events:none}
.svpeek .svbox{height:100%;height:100svh}

/* perfil: título "Notificaciones" con el interruptor general a la derecha */
.notifhead{align-items:center;margin:26px 0 10px}
.notifhead h2{margin:0}
.notifhead .bell{margin-right:16px}

.notifhint{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;padding:10px 12px;border-radius:12px;background:var(--g50);color:var(--g800);font-size:.84rem;line-height:1.4}
.notifhint[hidden]{display:none}
.notifhint .ic{width:18px;height:18px;flex:none;margin-top:1px}
.notifhint .btn{display:flex;width:max-content;margin-top:8px}

/* notificaciones: botones de la cabecera (marcar como leídas + configurar) */
.nheadbtns{display:flex;gap:8px;align-items:center}
.nheadbtns [hidden]{display:none}
.reply .nkind{font-size:.78rem;margin-bottom:2px}

/* ===== lista de notificaciones (campanita) ===== */
.notiflist{padding:4px 0;overflow:hidden}
.nitem{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;color:var(--ink);text-decoration:none;position:relative;
  border-bottom:1px solid var(--line);transition:background .15s}
.nitem:last-child{border-bottom:0}
@media(hover:hover){.nitem:hover{background:var(--surface2)}}
.nicon{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:1.15rem;background:var(--g50);overflow:hidden}
.nicon .avatar{width:40px;height:40px;font-size:1rem}
.nbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ntext{font-size:.92rem;line-height:1.4;color:var(--ink)}
.ntext .sub{color:var(--muted)}
.ntext b{font-weight:700}
.nkind{display:block;font-size:.76rem;color:var(--muted);margin-bottom:1px}
.nsnip{margin:0;font-size:.85rem;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ntime{font-size:.74rem;color:var(--muted);margin-top:1px}
.nitem.new .ntime{color:var(--g600);font-weight:600}
.ndot{width:9px;height:9px;border-radius:50%;background:var(--g600);flex:none;margin-top:6px}
.nitem{padding:12px 14px;gap:11px}
.nbody{gap:2px}
.ntime{margin-top:2px}

/* inicio: lupa en la fila de banderas y buscador que se despliega debajo */
.cflag.cfsearch{background:var(--g50);color:var(--g800);box-shadow:inset 0 0 0 1.5px var(--g100);transition:background .2s,color .2s,transform .2s}
.cflag.cfsearch .ic{width:24px;height:24px}
#homesearchbtn.on .cfsearch{background:var(--g700);color:#fff;transform:rotate(-12deg) scale(1.05)}
#homesearchbtn.on{color:var(--g800)}
.homesearch{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .38s cubic-bezier(.2,.8,.2,1),opacity .25s,margin .38s;margin-top:0}
.homesearch>.hsin{overflow:hidden;min-height:0;transform:translateY(-8px);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.homesearch.open{grid-template-rows:1fr;opacity:1;margin-top:14px}
.homesearch.open>.hsin{transform:none}
.homesearch .searchbox{margin-top:2px}

/* notificaciones: el resumen sin el margen general de los párrafos, cortado a 2 líneas */
.notiflist p.nsnip{display:-webkit-box!important;margin:0!important}
.notiflist .nitem{align-items:flex-start}
.nhead2 h1{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:clamp(1.45rem,6.4vw,2rem);margin:0}
.nhead2 h1 .ic{width:1em;height:1em}
/* buscador del inicio: que la animación no le corte los bordes redondeados */
.homesearch>.hsin{padding:3px 3px 4px;margin:0 -3px}
.notiflist .nbody{margin:0!important}

/* ❤️ en las respuestas de las reseñas (más chico que el de la reseña) */
.thread .reply .helprow{margin-top:4px}
.helpful.small{padding:3px 10px;font-size:.82rem}
.setrow .setnote{font-size:.78rem;font-weight:500;margin-left:4px}

/* cámara: modo código de barras (opcional) */
.bcband,.bchint{display:none}
.scanwrap.bcmode .frame{display:none}
.scanwrap.bcmode .bcband{display:block;position:absolute;left:8%;right:8%;top:30%;height:22%;border:2.5px solid rgba(255,255,255,.95);border-radius:14px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.38);pointer-events:none;overflow:hidden}
.scanwrap.bcmode .bcband i{position:absolute;left:4%;right:4%;top:50%;height:2px;background:#ff4d4d;box-shadow:0 0 10px #ff4d4d;animation:bcline 1.6s ease-in-out infinite}
@keyframes bcline{0%,100%{transform:translateY(-34px)}50%{transform:translateY(34px)}}
.scanwrap.bcmode .bchint{display:block;position:absolute;left:50%;top:calc(30% - 44px);transform:translateX(-50%);background:rgba(0,0,0,.6);color:#fff;
  padding:6px 14px;border-radius:999px;font-size:.82rem;font-weight:600;white-space:nowrap;pointer-events:none}
.scanwrap.bcmode .shutter{visibility:hidden}
.camside[hidden]{display:none}
.camside.on{background:var(--g600);box-shadow:0 0 0 2px #fff}
.bcmiss{margin-top:12px}
.bcmiss .btn .ic{width:16px;height:16px}

/* opiniones: arriba, solo las estrellas ("¿La probaste? Calificala"); al tocar una se despliega el resto */
.rfbox{margin:4px 0 16px;padding:14px;border-radius:16px;background:var(--g50);border:1px solid var(--line)}
.rfcta{display:flex;gap:12px;align-items:flex-start}
.rfcta>.avatar,.rfcta>.rfic{flex:none;width:40px;height:40px}
.rfic{display:grid;place-items:center;border-radius:50%;background:var(--surface);color:var(--gold,#e0a400)}
.rfic .ic{width:22px;height:22px}
.rfcta>div{flex:1;min-width:0}
.rfcta h3{margin:2px 0 8px;font-size:1rem}
.rfcta .field{margin:0}
.rfcta .field>label:empty{display:none}
.rfcta .rate button{background:var(--surface)}
.rfmore{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s}
.rfmore.open{opacity:1;transform:none}
.rfmore .rate button{background:var(--surface)}
.rfmore .btn+.btn{margin-left:6px}
.rfdone{display:flex;align-items:center;gap:10px;font-size:.92rem}
.rfdone>.ic{width:22px;height:22px;color:var(--g700,#1d6b3f);flex:none}
.rfdone>span{flex:1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rfdone .stars .ic{width:15px;height:15px}
@media (max-width:380px){.rfcta .rate button{width:40px;height:40px}}

/* Explorar: más yerbas a medida que se baja */
.moreload{display:grid;place-items:center;padding:22px 0}
.moreload[hidden]{display:none}
.moreload .spinner{width:28px;height:28px}

/* contenido que manda el servidor para los buscadores (se ve un instante, hasta que arranca la app) */
.ssr h1 { font-size: 1.5rem; margin: 0 0 4px; }
.ssr h2 { font-size: 1.1rem; margin: 18px 0 6px; }
.ssr dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 14px 0; }
.ssr dt { font-weight: 600; }
.ssr dd { margin: 0; }
.ssr ul { padding-left: 18px; }

/* páginas por país y por tipo */
a.tag{text-decoration:none}
a.tag:active{transform:scale(.96)}
.catchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:12px;padding-bottom:2px}
.catchips::-webkit-scrollbar{display:none}
.catchips .chip{flex:none;font-size:.82rem;padding:6px 12px}
.catintro{margin-top:12px}
.catintro p+p{margin-top:10px}
.kinds b a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}