/* ============================================================================
   TOBATÍ CONECTA — ESTILOS DE LA WEB PÚBLICA
   Paleta "cerros de Tobatí", aprobada en la fase 1.
   ============================================================================ */

:root{
  --bg:#F5F6F0;          /* piedra clara */
  --surface:#FFFFFF;     /* blanco caolín */
  --sunken:#FAFBF6;
  --ink:#16221C;         /* verde muy oscuro (texto) */
  --ink-2:#5E6A63;
  --ink-3:#69736B;
  --line:#E2E4DA;
  --green:#118755;       /* verde cerro (botones) */
  --green-br:#25B978;    /* verde brillante (degradados) */
  --green-dk:#0A6B41;
  --green-lt:#E4F6EC;
  --moss-tx:#517B2E;     /* musgo para texto */
  --kaolin:#F2EFE2;
  --amber:#8A6410;
  --amber-lt:#FBF1DC;
  --alerta:#93301B;
  --alerta-lt:#FBEAE6;
  --r:14px;
}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Texto que solo leen los lectores de pantalla de personas ciegas */

/* ============ BARRA DE ARRIBA ============ */
.topbar{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,#F8F9F3,rgba(246,246,242,.94));
  backdrop-filter:blur(14px);border-bottom:2px solid var(--ink);
}
/* Una sola fila: el título grande y centrado, y un botón a cada lado. Antes
   los botones iban debajo, en su propia fila, y entre las dos filas más las
   pestañas la cabecera se comía media pantalla del celular.
   Las tres columnas son 1fr · auto · 1fr: los dos costados miden lo mismo, así
   el título queda centrado de verdad aunque los botones sean de distinto largo. */
.tb-row1{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  max-width:1320px;margin:0 auto;padding:14px 26px 12px;
}
.tb-lado{display:flex;align-items:center;gap:9px;min-width:0}
.tb-izq{justify-content:flex-start}
.tb-der{justify-content:flex-end}
/* Con la sesión abierta, este botón pasa a decir el nombre de la persona, que
   puede ser largo: se corta con puntos suspensivos en vez de empujar el título. */
.tb-izq .btn-ghost{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:38vw}
/* En pantalla chica los botones dicen lo mismo con menos letras. */
.t-corto{display:none}
.logo{display:flex;align-items:center;justify-content:center;text-align:center;gap:14px;font-family:'Schibsted Grotesk';font-weight:900;font-size:34px;letter-spacing:-.04em;line-height:1;text-decoration:none}
.logo em{font-style:normal;color:var(--green)}
.logo-m{
  width:48px;height:48px;border-radius:15px;flex:none;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--green-br),var(--green));box-shadow:0 5px 16px rgba(18,144,90,.34);
}
.tb-row2{border-top:1px solid rgba(22,34,28,.1)}
.tabs{display:flex;gap:6px;max-width:1320px;margin:0 auto;padding:11px 26px}
.tab{
  background:none;border:0;padding:10px 18px;border-radius:99px;
  font-size:15px;font-weight:700;color:var(--ink-2);transition:.16s;white-space:nowrap;
  display:flex;align-items:center;gap:8px;text-decoration:none;
}
.tab svg{width:17px;height:17px;flex:none}
.tab:hover{background:var(--green-lt);color:var(--green-dk)}
.tab.on{background:var(--green);color:#fff;box-shadow:0 4px 12px rgba(17,135,85,.3)}
.flags{display:flex;align-items:center;gap:9px;flex:none}
.flag{width:30px;height:20px;border-radius:3px;overflow:hidden;box-shadow:0 1px 3px rgba(22,34,28,.22);flex:none}
.flag svg,.flag img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.flags{display:none}}

.btn-ghost{background:none;border:1.5px solid var(--ink);padding:11px 18px;border-radius:99px;font-size:14.5px;font-weight:700;color:var(--ink);transition:.16s;text-decoration:none;display:inline-flex;align-items:center}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-red{background:var(--green);border:0;color:#fff;padding:12px 22px;border-radius:99px;font-size:14.5px;font-weight:700;transition:.16s;box-shadow:0 4px 12px rgba(17,135,85,.3);text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn-red:hover{background:var(--green-dk)}
.btn-red[disabled]{opacity:.6;cursor:default}

@media(max-width:900px){
  .logo{font-size:23px;gap:9px;min-width:0}
  .logo-m{width:34px;height:34px;border-radius:11px}
  .tb-row1{padding:11px 14px 9px;gap:8px}
  .tb-lado .btn-red{padding:9px 14px;font-size:12.5px;white-space:nowrap}
  .tb-lado .btn-ghost{padding:8px 13px;font-size:12.5px;white-space:nowrap}
  .tabs{gap:2px;padding:7px 8px}
  .tab{flex:1 1 0;min-width:0;flex-direction:column;gap:4px;padding:8px 2px;font-size:10.5px;border-radius:13px}
  .tab svg{width:19px;height:19px}
}
/* Desde acá el botón principal dice "Sumate" en vez de "Sumá tu negocio".
   Medido: con el texto largo el botón necesita 130 px, y hasta los 520 px de
   pantalla la columna que le toca es más angosta. Cuando eso pasa el botón no
   se achica: se desborda hacia adentro y se dibuja encima del título. Estaba en
   480 y a 485 ya se montaban 8 px. */
@media(max-width:560px){
  .t-largo{display:none}
  .t-corto{display:inline}
}
@media(max-width:400px){
  .logo{font-size:18px;gap:7px}
  .logo-m{width:28px;height:28px;border-radius:9px}
  .tb-row1{padding:10px 12px 8px;gap:6px}
  .tb-lado .btn-red,.tb-lado .btn-ghost{padding:8px 11px;font-size:11.5px}
}
/* Los celulares más angostos que se siguen usando (320 px). */
@media(max-width:360px){
  .logo{font-size:16px;gap:6px}
  .logo-m{width:25px;height:25px;border-radius:8px}
  .tb-lado .btn-red,.tb-lado .btn-ghost{padding:7px 9px;font-size:11px}
}
@media(max-width:370px){
  .tabs{gap:1px;padding:7px 5px}
  .tab{font-size:9.5px;padding:8px 1px}
  .tab svg{width:18px;height:18px}
}

/* ============ PANTALLAS ============ */
.view{display:none;padding-bottom:80px}
.view.on{display:block;animation:aparecer .32s ease}
@keyframes aparecer{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.view.on{animation:none}}

/* ============ CARTEL DE LA EXPO (collage de fotos) ============ */
/* El alto del cartel. Era de 480 px en escritorio y 560 en celular, y se comía
   la pantalla entera: había que bajar para ver que debajo hay algo más. Juanjo
   pidió acortarlo. Se bajó a 380 y 400, que sigue dejando ver el collage y las
   dos líneas del título sin que el texto se apriete. */
.banner{
  position:relative;border-radius:22px;overflow:hidden;margin-top:24px;
  background:#15100C;min-height:380px;display:flex;align-items:flex-end;
}
/* Los pedazos del collage, con juntas color caolín para que se lea como un
   cartel pegado a mano y no como una galería de fotos. */
.collage{
  position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1.55fr 1fr;
  gap:5px;background:var(--kaolin);
}
.collage img{width:100%;height:100%;object-fit:cover;display:block}
/* El velo oscuro: sin él, el texto blanco no llega al contraste mínimo. */
.banner:after{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,16,12,.14) 0%,rgba(21,16,12,.34) 34%,rgba(17,12,9,.66) 74%,rgba(15,11,8,.74) 100%);
}
/* El bloque del texto lleva su propio velo: el general no alcanza cuando el
   título cae justo sobre las ollas claras (se midió: quedaba en 2.67:1). */
.banner-in{
  position:relative;z-index:4;padding:46px 48px;width:100%;
  background:linear-gradient(180deg,rgba(20,14,10,0) 0%,rgba(18,13,10,.52) 20%,rgba(16,12,9,.62) 60%,rgba(15,11,8,.58) 100%);
}
.banner-tag{
  display:inline-flex;align-items:center;gap:8px;background:var(--kaolin);
  color:#16221C;font-size:13px;font-weight:800;padding:8px 16px;border-radius:99px;margin-bottom:20px;
}
.banner-tag i{width:7px;height:7px;border-radius:50%;background:#16221C}
.banner h1{color:#fff;font-weight:900;font-size:clamp(40px,6.6vw,84px);line-height:.96;margin-bottom:16px;max-width:14ch;text-shadow:0 2px 18px rgba(4,26,17,.5)}
.banner h1 em{font-style:normal;color:var(--kaolin)}
.banner p{color:rgba(255,255,255,.94);font-size:17.5px;line-height:1.55;max-width:48ch;margin-bottom:28px;text-shadow:0 1px 12px rgba(4,26,17,.5)}
.banner-cta{display:flex;gap:11px;flex-wrap:wrap}
.bc-a{background:var(--kaolin);border:0;color:#16221C;padding:15px 28px;border-radius:99px;font-weight:800;font-size:15.5px;box-shadow:0 6px 18px rgba(150,160,140,.34)}
.bc-b{background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.4);color:#fff;padding:15px 28px;border-radius:99px;font-weight:700;font-size:15.5px;backdrop-filter:blur(8px)}
@media(max-width:720px){
  /* En el celular el texto se comía el cartel entero. Se achica un poco todo
     para que arriba queden a la vista los pedazos del collage. */
  .banner{min-height:400px}
  .banner-in{padding:22px 20px}
  .collage{grid-template-columns:repeat(2,1fr);grid-template-rows:1.35fr 1fr 1fr;gap:4px}
  .banner:after{background:linear-gradient(180deg,rgba(21,16,12,.08) 0%,rgba(20,14,10,.24) 26%,rgba(18,13,10,.58) 52%,rgba(15,11,8,.70) 100%)}
  .banner-tag{font-size:11.5px;padding:7px 13px;margin-bottom:16px;white-space:nowrap}
  .banner p{font-size:15px;margin-bottom:20px}
  /* 🔴 En el celular los dos botones se REPARTEN el ancho en vez de ir cada uno
     con el suyo. Medido: a 320 px sólo quedan 228 px libres y los dos juntos
     pedían 253, así que "Ver el mapa" se caía a la línea de abajo — y Juanjo los
     quiere al lado. Con `flex:1` no depende del largo del texto: entren las
     palabras que entren, siempre son dos botones en una fila. */
  .banner-cta{gap:9px;flex-wrap:nowrap}
  .bc-a,.bc-b{padding:13px 10px;font-size:14px;flex:1 1 0;min-width:0;white-space:nowrap}

}

/* ============ BUSCADOR ============ */
.finder{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:12px;display:flex;gap:10px;margin-top:18px;box-shadow:0 1px 2px rgba(22,34,28,.04);
}
.finder input{flex:1;border:0;outline:none;font-family:inherit;font-size:15.5px;padding:12px 14px;background:var(--sunken);border-radius:10px;color:var(--ink)}
.finder input::placeholder{color:var(--ink-3)}
.finder select{border:0;outline:none;font-family:inherit;font-size:15px;font-weight:600;padding:12px 14px;background:var(--sunken);border-radius:10px;color:var(--ink)}
@media(max-width:680px){.finder{flex-wrap:wrap}.finder input,.finder select{width:100%}}

/* ============ ACCESOS RÁPIDOS ============ */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.q{border:0;border-radius:var(--r);padding:22px;text-align:left;transition:.18s;color:#fff;position:relative;overflow:hidden;text-decoration:none;display:block}
.q:after{content:'';position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.14);top:-46px;right:-34px}
.q:hover{transform:translateY(-4px)}
.q .qi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:34px;background:rgba(255,255,255,.22);position:relative}
.q h4{font-size:17.5px;font-weight:800;margin-bottom:3px;position:relative}
.q p{font-size:13.5px;color:rgba(255,255,255,.85);position:relative}
.q-cerro{background:linear-gradient(145deg,#118755,#0A6B41);box-shadow:0 8px 22px rgba(17,135,85,.28)}
.q-monte{background:linear-gradient(145deg,#5E9436,#3F6822);box-shadow:0 8px 22px rgba(94,148,54,.26)}
.q-piedra{background:linear-gradient(145deg,#7A8570,#535C4C);box-shadow:0 8px 22px rgba(122,133,112,.28)}
.q-pino{background:linear-gradient(145deg,#12857E,#0B5F5A);box-shadow:0 8px 22px rgba(18,133,126,.26)}
@media(max-width:900px){.quick{grid-template-columns:repeat(2,1fr)}.q .qi{margin-bottom:16px}}

/* ============ SECCIONES ============ */
.sec{margin-top:52px}
.sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}
.sec-top h2{font-size:30px;font-weight:900;position:relative;padding-left:16px}
.sec-top h2:before{content:'';position:absolute;left:0;top:.16em;bottom:.16em;width:5px;border-radius:3px;background:var(--green)}
.sec-top p{font-size:14.5px;color:var(--ink-2);margin-top:5px;padding-left:16px}
.see{background:var(--green-lt);border:0;color:var(--green-dk);font-weight:800;font-size:14.5px;padding:10px 18px;border-radius:99px;transition:.16s;text-decoration:none;display:inline-block}
.see:hover{background:var(--green);color:#fff}

/* ============ TARJETAS DE NEGOCIO ============ */
.biz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.biz{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.18s;text-align:left}
.biz:hover{border-color:var(--ink-3);transform:translateY(-3px);box-shadow:0 8px 24px rgba(22,34,28,.07)}
.biz-ph{height:170px;position:relative;display:grid;place-items:center;background:var(--kaolin)}
/* La foto va "clavada" a la caja. Si se deja en el flujo, la caja crece hasta
   el alto natural de la foto y esta termina tapando el nombre del negocio. */
.biz-ph img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.biz-cat{position:absolute;top:11px;left:11px;background:#fff;font-size:11.5px;font-weight:800;padding:6px 12px;border-radius:99px;color:var(--green-dk);z-index:2}
/* Los sellos van abajo a la derecha: arriba se montaban sobre la etiqueta del
   rubro y se comían el nombre del rubro en pantalla de celular. */
.biz-sellos{position:absolute;bottom:11px;right:11px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;max-width:calc(100% - 22px);z-index:2}
.biz-b{padding:17px}
.biz-b h4{font-size:18px;font-weight:800;margin-bottom:6px}
.biz-meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin-bottom:10px;flex-wrap:wrap}
.rt{background:var(--green-lt);color:var(--green-dk);font-weight:700;padding:3px 8px;border-radius:6px;font-size:12.5px}
.biz-b p{font-size:14px;line-height:1.5;color:var(--ink-2);margin-bottom:14px}
.biz-f{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line);gap:10px}
.abierto{font-size:12.5px;font-weight:700;color:var(--moss-tx)}
.cerrado{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.wa{background:var(--ink);border:0;color:#fff;padding:8px 14px;border-radius:8px;font-size:12.5px;font-weight:700;white-space:nowrap}
@media(max-width:980px){.biz-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.biz-grid{grid-template-columns:1fr}}

/* Sellos */
.sello{font-size:11px;font-weight:800;padding:4px 9px;border-radius:99px;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.sello-ver{background:var(--green-lt);color:var(--green-dk)}
.sello-tob{background:var(--kaolin);color:#6B4F0E}
/* Ficha de ejemplo: no es un negocio real. Se ve, pero sin robar atención. */
.sello-demo{background:var(--line);color:#3F4A43}

/* ============ DIRECTORIO ============ */
.dir{display:grid;grid-template-columns:236px 1fr;gap:24px;margin-top:26px}
.lado{position:sticky;top:88px;align-self:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.lado h5{font-size:12px;font-weight:700;letter-spacing:.09em;color:var(--ink-3);margin:16px 0 9px}
.lado h5:first-child{margin-top:0}
.fl{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-2);width:100%;background:none;border:0;text-align:left;transition:.14s}
.fl:hover{background:#F0F3E9;color:var(--ink)}
.fl.on{background:var(--ink);color:#fff;font-weight:600}
.fl .n{margin-left:auto;font-size:12px;color:var(--ink-3)}
.fl.on .n{color:rgba(255,255,255,.7)}
.chk{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2);padding:6px 0;cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--green)}
.dir-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.dir-head h2{font-size:23px;font-weight:800}
.dir-head span{font-size:14px;color:var(--ink-2)}
.sort{border:1px solid var(--line);background:var(--surface);padding:9px 13px;border-radius:9px;font-size:14px;font-weight:600;font-family:inherit;color:var(--ink)}
@media(max-width:900px){.dir{grid-template-columns:1fr}.lado{position:static}}

/* ============ FICHA DE NEGOCIO ============ */
.ficha{max-width:1100px;margin:0 auto;padding:26px 0 80px}

.ficha-tope{display:grid;grid-template-columns:1.25fr .75fr;gap:24px;align-items:start}
/* 🔴 Sin esto la ficha medía 908 px de ancho en un celular de 320. Una caja
   dentro de una grilla NO baja de lo que mide su palabra más larga, aunque se
   le diga que parta el texto: `overflow-wrap:break-word` deja partir la línea
   pero no cambia ese mínimo. El `min-width:0` es lo único que lo suelta. Y hace
   falta justo acá porque el nombre y la descripción los escribe el dueño, que
   puede mandar sesenta caracteres sin un espacio. */
.ficha-tope>*{min-width:0}
@media(max-width:860px){.ficha-tope{grid-template-columns:1fr}}

.galeria{border-radius:var(--r);overflow:hidden;background:var(--kaolin);position:relative}
.galeria-grande{aspect-ratio:4/3;max-width:100%;display:grid;place-items:center}
.galeria-grande img{width:100%;height:100%;object-fit:cover}
.galeria-tiras{display:flex;gap:8px;padding:8px;overflow-x:auto}
.galeria-tiras button{width:66px;height:52px;border-radius:8px;overflow:hidden;border:2px solid transparent;flex:none;padding:0;background:none}
.galeria-tiras button.on{border-color:var(--green)}
.galeria-tiras img{width:100%;height:100%;object-fit:cover}
.sin-foto{color:var(--ink-3);font-size:14px;text-align:center;padding:40px 20px}

.ficha-datos{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.ficha-datos h1{font-size:clamp(25px,4vw,34px);font-weight:900;line-height:1.1;margin-bottom:8px}
.ficha-rubro{display:inline-block;background:var(--green-lt);color:var(--green-dk);font-size:12.5px;font-weight:800;padding:5px 12px;border-radius:99px;margin-bottom:12px}
.ficha-sellos{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.ficha-puntaje{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.puntaje-num{font-family:'Schibsted Grotesk';font-weight:900;font-size:38px;line-height:1}
.puntaje-cant{font-size:13.5px;color:var(--ink-2)}
.ficha-desc{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin-bottom:18px}
.ficha-botones{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.b-wa{background:#118578;border:0;color:#fff;padding:13px 20px;border-radius:10px;font-size:15px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.b-tel{background:var(--ink);border:0;color:#fff;padding:13px 20px;border-radius:10px;font-size:15px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.b-mapa{background:var(--surface);border:1.5px solid var(--ink);color:var(--ink);padding:13px 20px;border-radius:10px;font-size:15px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.ficha-lista{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:16px}
.ficha-dato{display:flex;gap:10px;font-size:14.5px;color:var(--ink-2);align-items:flex-start}
.ficha-dato b{color:var(--ink);font-weight:700;flex:none}
/* La dirección y la referencia también las escribe el dueño. Mismo freno que en
   la grilla de arriba: dentro de un flex, la caja del valor no baja de su
   palabra más larga sin el min-width:0. */
.ficha-dato span{min-width:0}

.bloque{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-top:20px}
.bloque h2{font-size:21px;font-weight:800;margin-bottom:14px}
.bloque h3{font-size:16.5px;font-weight:800;margin-bottom:10px}

.horario-tabla{width:100%;font-size:14.5px;border-collapse:collapse}
.horario-tabla td{padding:7px 0;border-bottom:1px solid var(--line)}
.horario-tabla tr:last-child td{border-bottom:0}
.horario-tabla td:first-child{color:var(--ink-2);text-transform:capitalize}
.horario-tabla td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.horario-tabla tr.hoy td{color:var(--green-dk);font-weight:800}

.productos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.producto{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--sunken)}
.producto-foto{aspect-ratio:4/3;max-width:100%;background:var(--kaolin)}
.producto-foto img{width:100%;height:100%;object-fit:cover}
.producto-b{padding:12px}
.producto-b h4{font-size:15px;font-weight:700;margin-bottom:3px}
.producto-b p{font-size:13px;color:var(--ink-2);margin-bottom:7px}
.producto-precio{font-weight:800;font-size:15px;color:var(--green-dk)}
.destacado{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.destacado-tag{background:var(--green);color:#fff;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:99px;display:inline-block;margin-bottom:6px}

.resena{border-bottom:1px solid var(--line);padding:16px 0}
.resena:last-child{border-bottom:0}
.resena-tope{display:flex;align-items:center;gap:10px;margin-bottom:7px;flex-wrap:wrap}
/* El nombre del negocio lo escribió su dueño y puede venir sin espacios. Tercera
   vez que hace falta esto mismo: dentro de un flex o de una grilla, una caja no
   baja de su palabra más larga sin el min-width:0, y `overflow-wrap` no arregla
   eso. Acá llegaba al píxel 578 en una pantalla de 320. */
.resena-tope>*{min-width:0}
.resena-fecha{font-size:12.5px;color:var(--ink-3);margin-left:auto}
.resena p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.resena-respuesta{background:var(--green-lt);border-radius:10px;padding:12px 14px;margin-top:10px}
.resena-respuesta b{font-size:12.5px;color:var(--green-dk);display:block;margin-bottom:4px}
.resena-respuesta p{font-size:14px;color:var(--ink)}
.estrellas{color:var(--amber);letter-spacing:1px;font-size:14px}

.cupon{border:2px dashed var(--green);border-radius:12px;padding:14px 16px;background:var(--green-lt);margin-bottom:10px}
.cupon h4{font-size:16px;font-weight:800;color:var(--green-dk);margin-bottom:4px}
.cupon p{font-size:14px;color:var(--ink-2)}
.cupon-codigo{display:inline-block;background:var(--surface);border:1px solid var(--green);color:var(--green-dk);font-family:ui-monospace,monospace;font-weight:700;padding:6px 12px;border-radius:8px;margin-top:8px;letter-spacing:1px}
.cupon-pie{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:12px}
.cupon-b{background:var(--surface);border:1px solid var(--green);color:var(--green-dk);font-size:13px;font-weight:700;padding:7px 14px;border-radius:8px;text-decoration:none;display:inline-flex;align-items:center}
.cupon-b:hover{background:var(--green);color:#fff}
.cupon-b[disabled]{opacity:.6;cursor:default}
.cupon-listo{font-size:13px;font-weight:700;color:var(--green-dk)}
/* El código que el vecino le muestra al negocio en el mostrador. Grande y
   separado por letras: alguien lo va a copiar a mano, apurado y atendiendo. */
.cupon-codigo-mio{font-size:13px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.cupon-codigo-mio b{
  background:var(--surface);border:1px solid var(--green);color:var(--green-dk);
  font-family:ui-monospace,monospace;font-weight:700;font-size:16px;
  padding:5px 11px;border-radius:8px;letter-spacing:2px;
}
.cupon-explica{font-size:12.5px;color:var(--ink-2);margin-top:9px;line-height:1.5}
.orden-resenas{display:flex;justify-content:flex-end;margin-bottom:10px}
.fav{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:9px;transition:.15s}
.fav:hover{border-color:var(--ink-3);background:var(--sunken)}
.fav b{display:block;font-size:16px;font-weight:700;margin-bottom:3px}
.fav span{font-size:13.5px;color:var(--ink-2)}

.aviso-dia{background:var(--amber-lt);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.aviso-dia p{font-size:14.5px;color:#6B4F0E}
.aviso-dia span{font-size:12px;color:var(--amber);font-weight:700}

/* ============ MAPA ============ */
.mapa-col{display:flex;flex-direction:column;min-width:0}
.mapwrap{display:grid;grid-template-columns:1fr 340px;gap:0;margin-top:26px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
/* El mapa de verdad y sus pines están más abajo, con su propio bloque. */
.maplist{border-left:1px solid var(--line);overflow-y:auto;max-height:560px}
.ml-h{padding:16px 18px;border-bottom:1px solid var(--line);font-weight:700;font-size:14.5px;position:sticky;top:0;background:var(--surface)}
.ml{display:flex;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;background:none;border-left:0;border-right:0;border-top:0;width:100%;transition:.14s;text-decoration:none;color:inherit;align-items:center}
.ml:hover{background:var(--sunken)}
.ml-th{width:48px;height:48px;border-radius:10px;flex:none;background:var(--kaolin);display:grid;place-items:center;font-size:20px;overflow:hidden}
.ml-th img{width:100%;height:100%;object-fit:cover}
.ml h5{font-size:14.5px;font-weight:700;margin-bottom:3px}
.ml p{font-size:12.5px;color:var(--ink-2)}
@media(max-width:900px){.mapwrap{grid-template-columns:1fr}.maplist{border-left:0;border-top:1px solid var(--line);max-height:320px}}

/* ============ FORMULARIOS ============ */
.campo label{font-size:13.5px;font-weight:700;color:var(--ink)}
.campo input,.campo select,.campo textarea{
  border:1px solid var(--line);background:var(--surface);border-radius:10px;
  padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink);width:100%;
}
.campo textarea{min-height:100px;resize:vertical;line-height:1.5}
@media(max-width:600px){.campos-2{grid-template-columns:1fr}}

/* ============ ESTADOS DE CARGA Y VACÍO ============ */
.vacio h3{font-size:19px;font-weight:800;color:var(--ink);margin-bottom:8px}
.vacio p{font-size:15px;line-height:1.55;max-width:44ch;margin:0 auto}

/* ============ CONSULTAS Y REPORTES ============ */
.pie-reporte{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.enlace-reportar{background:none;border:0;color:var(--ink-3);font-size:13px;font-weight:600;text-decoration:underline;padding:0}
.enlace-reportar:hover{color:var(--ink)}
.caja-form{background:var(--sunken);border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:16px}
.caja-form h3{font-size:16.5px;font-weight:800;margin-bottom:10px}
.caja-form>p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin-bottom:14px;max-width:60ch}

/* ============ CTA + PIE ============ */
.join{
  margin-top:56px;background:linear-gradient(130deg,var(--green-br),var(--green-dk));color:#fff;
  border-radius:22px;padding:48px 46px;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.4fr .6fr;gap:28px;align-items:center;
}
.join:before{content:'';position:absolute;width:340px;height:340px;border-radius:50%;border:54px solid rgba(255,255,255,.14);top:-140px;right:-80px}
.join h3{font-size:clamp(26px,3.6vw,42px);font-weight:900;margin-bottom:10px;position:relative}
.join p{color:rgba(255,255,255,.92);font-size:16.5px;line-height:1.55;max-width:46ch;position:relative}
.join a{background:#fff;border:0;color:var(--green-dk);padding:17px 30px;border-radius:99px;font-weight:800;font-size:15.5px;white-space:nowrap;position:relative;text-decoration:none;display:inline-block;text-align:center}
@media(max-width:820px){.join{grid-template-columns:1fr;padding:32px 26px}}

footer{border-top:1px solid var(--line);margin-top:56px;padding:40px 0 30px}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:30px;margin-bottom:32px}
.fgrid h5{font-size:12px;font-weight:700;letter-spacing:.09em;color:var(--ink-3);margin-bottom:13px}
.fgrid a{display:block;color:var(--ink-2);text-decoration:none;font-size:14px;margin-bottom:9px}
.fgrid a:hover{color:var(--ink)}
.fa p{font-size:14px;color:var(--ink-2);line-height:1.6;max-width:32ch;margin-top:12px}
.fb{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--ink-3);flex-wrap:wrap}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}

/* ============ PÁGINAS DE CUENTA ============ */
.hoja-centro{max-width:440px;margin:0 auto;padding:40px 20px 80px}
.tarjeta{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px}
.tarjeta h1{font-size:26px;font-weight:900;margin-bottom:6px}
.tarjeta .bajada{font-size:15px;color:var(--ink-2);margin-bottom:22px;line-height:1.5}
.pestanas-cuenta{display:flex;gap:6px;background:var(--bg);padding:5px;border-radius:12px;margin-bottom:22px}
.pestanas-cuenta button{flex:1;border:0;background:none;padding:10px;border-radius:9px;font-size:14.5px;font-weight:700;color:var(--ink-2)}
.pestanas-cuenta button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(22,34,28,.1)}
.enlace-suave{background:none;border:0;color:var(--green-dk);font-size:14px;font-weight:600;text-decoration:underline;padding:0;margin-top:14px}

/* ===========================================================================
   PLANES Y PRECIOS  (pantalla privada: se ve sólo con la sesión abierta)
   =========================================================================== */
.cartel-promo{
  display:flex;flex-direction:column;gap:3px;
  background:var(--green-lt);border:1px solid #C7E9D6;border-radius:12px;
  padding:14px 16px;margin-top:4px;
}
.cartel-promo b{font-family:'Schibsted Grotesk';font-size:16px;color:var(--green-dk)}
.cartel-promo span{font-size:14px;color:#24483A;line-height:1.5}

.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:16px 12px;margin-top:14px}

.plan{
  position:relative;background:var(--bg);border:1px solid var(--line);
  border-radius:14px;padding:16px 14px 14px;text-align:center;
}
.plan h3{font-family:'Schibsted Grotesk';font-size:14.5px;color:var(--ink-2);margin-bottom:8px}
/* El precio de antes, tachado. Es el argumento de venta: sin los dos números
   no se puede dibujar. */
.plan-antes{display:block;font-size:14px;color:var(--ink-3);margin-bottom:2px}
.plan-precio{
  font-family:'Schibsted Grotesk';font-weight:900;font-size:23px;
  letter-spacing:-.02em;color:var(--ink);line-height:1.1;
}
.plan-mes{font-size:12.5px;color:var(--ink-3);margin-top:5px}
.plan-promo{border-color:var(--green);background:#fff;box-shadow:0 3px 12px rgba(17,135,85,.12)}
.plan-sello{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:var(--green);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:99px;
}

.extra{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.extra:last-of-type{border-bottom:0}
.extra h4{font-family:'Schibsted Grotesk';font-size:15px;margin-bottom:3px}
.extra p{font-size:13.5px;color:var(--ink-2);line-height:1.5}

.lista-simple{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:18px}
.lista-simple li{font-size:14.5px;color:var(--ink-2);line-height:1.55;padding-left:18px;position:relative}
.lista-simple li::before{
  content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--green);
}
.lista-simple b{color:var(--ink)}

@media(max-width:400px){
  .planes{grid-template-columns:1fr 1fr}
  .extra{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ===========================================================================
   TURISMO · la lista de lugares y la ficha de cada uno
   =========================================================================== */
.atractivos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}

.atractivo{
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;transition:.16s;
}
/* La foto va clavada a su caja: dentro de una grilla, dejarla en el flujo hace
   que la caja crezca hasta el alto natural de la foto y le tape el nombre. */
.atractivo-foto{position:relative;display:block;width:100%;aspect-ratio:3/2;background:var(--kaolin);flex:none}
.atractivo-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.atractivo-sin-foto{
  display:grid;place-items:center;font-size:12.5px;color:var(--ink-3);
  background:var(--kaolin);text-align:center;padding:10px;
}
.atractivo-cuerpo{display:flex;flex-direction:column;gap:7px;padding:15px 16px 16px}
.atractivo:hover{border-color:var(--green);box-shadow:0 4px 14px rgba(17,135,85,.12)}
.atractivo-tipo{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--moss-tx);
}
.atractivo h3{font-family:'Schibsted Grotesk';font-size:18px;color:var(--ink);line-height:1.2}
.atractivo p{font-size:14px;color:var(--ink-2);line-height:1.5}
.atractivo-pie{font-size:12.5px;color:var(--ink-3);margin-top:auto;padding-top:6px}

.miga{font-size:13px;color:var(--ink-3);padding:18px 0 4px}
.miga a{color:var(--ink-2);text-decoration:none}
.miga a:hover{text-decoration:underline}

.ficha-lugar{max-width:760px;margin:0 auto;padding-bottom:50px}
.lugar-tipo{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--moss-tx);margin-top:14px;
}
.ficha-lugar h1{
  font-family:'Schibsted Grotesk';font-weight:900;font-size:clamp(27px,6vw,40px);
  line-height:1.08;letter-spacing:-.02em;margin:6px 0 10px;
}
.lugar-resumen{font-size:17px;color:var(--ink-2);line-height:1.55;margin-bottom:22px}

/* Los datos prácticos arriba: es lo que mira quien está decidiendo si va. */
.lugar-datos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;margin-bottom:24px;
}
.lugar-datos span{display:block;font-size:12px;color:var(--ink-3);margin-bottom:3px}
.lugar-datos b{font-family:'Schibsted Grotesk';font-size:15px;color:var(--ink)}

.lugar-fotos{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.lugar-fotos img{width:100%;border-radius:14px;display:block}
.lugar-fotos figcaption{font-size:12.5px;color:var(--ink-3);margin-top:6px}

.lugar-bloque{margin-bottom:26px}
.lugar-bloque h2{font-family:'Schibsted Grotesk';font-size:21px;margin-bottom:10px}
.lugar-bloque p{font-size:15.5px;color:var(--ink-2);line-height:1.65;margin-bottom:14px}
.lugar-bloque p:last-child{margin-bottom:0}
.lugar-bloque b{color:var(--ink)}
/* La caja que sólo ven los administradores: se distingue a propósito, para que
   nadie la confunda con algo que ve el visitante. */
.caja-admin{background:var(--green-lt);border:1px solid #C7E9D6;border-radius:14px;padding:18px}
.caja-admin h2{font-size:17px;color:var(--green-dk)}
.ubicacion span{font-size:13.5px;color:var(--ink-2);line-height:1.45}

.guias{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.guia{
  display:flex;flex-direction:column;gap:2px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px;
}
.guia:hover{border-color:var(--green)}
.guia b{font-family:'Schibsted Grotesk';font-size:15px;color:var(--ink)}
.guia span{font-size:12.5px;color:var(--ink-3)}

/* De dónde salió lo que está escrito. Un dato sin fuente no se puede revisar. */
/* La página de créditos. Las fotos van limpias en su lugar; el autor, acá. */
.creditos{display:flex;flex-direction:column;gap:14px}
.credito{display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px}
.credito img{width:88px;height:66px;object-fit:cover;border-radius:10px;flex:none}
.credito div{display:flex;flex-direction:column;gap:2px;min-width:0}
.credito b{font-family:'Schibsted Grotesk';font-size:15px}
.credito span{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.lugar-fuente{font-size:12.5px;color:var(--ink-3);line-height:1.6;border-top:1px solid var(--line);padding-top:16px}
.lugar-fuente a{color:var(--moss-tx)}

/* Los títulos de cada categoría del catálogo. */
.grupo-catalogo{font-family:'Schibsted Grotesk';font-size:17px;color:var(--ink-2);margin:18px 0 10px}
.grupo-catalogo:first-of-type{margin-top:4px}

/* =========================================================================
   LA AGENDA — las ferias y fiestas del pueblo
   -------------------------------------------------------------------------
   El cartel manda: es un afiche vertical (3:4), como el que estaría pegado en
   la pared del almacén. Va clavado a su caja (position:absolute pegada a los
   cuatro lados) porque dentro de una grilla el 100% del alto se muerde la cola
   y la foto termina tapando el nombre. Ya pasó en las tarjetas del directorio.
   ========================================================================= */
.titulo-seccion{margin:22px 0 18px}
.titulo-seccion h2{font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:26px;
  font-weight:800;color:var(--ink);margin:0 0 6px;text-wrap:balance}
.titulo-seccion p{margin:0;color:var(--ink-2);font-size:15px;max-width:62ch}

.eventos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.evento{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .12s ease,box-shadow .12s ease}
.evento:hover,.evento:focus-visible{transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(22,34,28,.10)}
.evento-cartel{position:relative;display:block;width:100%;aspect-ratio:3/4;
  background:var(--kaolin);flex:none;max-width:100%}
.evento-cartel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.evento-cuerpo{display:block;padding:14px 16px 16px}
.evento-tipo{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--moss-tx);margin-bottom:6px}
.evento-cuerpo h3{font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:19px;
  font-weight:800;color:var(--ink);margin:0 0 4px;text-wrap:balance}
.evento-cuando{display:block;font-weight:700;color:var(--green-dk);font-size:15px;margin-bottom:8px}
.evento-cuerpo p{margin:0 0 10px;color:var(--ink-2);font-size:14px;line-height:1.5}
.evento-donde{display:block;font-size:13px;color:var(--ink-3)}

/* ------------------------------------------------- la página de un evento */
.evento-tapa{position:relative;border-radius:18px;overflow:hidden;margin:18px 0 22px;
  background:var(--kaolin)}
.evento-tapa img{display:block;width:100%;height:auto;max-width:100%}
.evento-cabecera{margin:0 0 18px}
.evento-cabecera .evento-tipo{font-size:12px}
.evento-cabecera h1{font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:30px;
  font-weight:900;color:var(--ink);margin:0 0 8px;line-height:1.15;text-wrap:balance}
.evento-cabecera .bajada{margin:0;color:var(--ink-2);font-size:16px;line-height:1.55;max-width:62ch}

.evento-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;margin:0 0 24px}
.dato{background:var(--green-lt);border-radius:14px;padding:12px 14px}
.dato h4{margin:0 0 3px;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--moss-tx)}
.dato p{margin:0;color:var(--ink);font-size:15px;font-weight:600;line-height:1.4}
.dato.sin-confirmar{background:#FDF3E3}
.dato.sin-confirmar h4{color:#8A5A12}

.evento-texto{max-width:66ch;margin:0 0 26px}
.evento-texto h2{font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:20px;
  font-weight:800;color:var(--ink);margin:22px 0 8px}
.evento-texto p{margin:0 0 14px;color:var(--ink);font-size:16px;line-height:1.65}

@media (max-width:560px){
  .evento-cabecera h1{font-size:25px}
  .titulo-seccion h2{font-size:22px}
}


/* =========================================================================
   EL PANEL DE RUBROS, DESPLEGABLE EN EL CELULAR
   -------------------------------------------------------------------------
   Arrancaba abierto y se comía la pantalla entera: había que pasar siete
   rubros y cuatro casillas antes de ver el primer negocio. En el escritorio
   sigue siendo una columna al costado, donde no molesta.
   ========================================================================= */
.lado-tope{display:none}
.lado-cuerpo{display:block}

@media(max-width:900px){
  .lado{padding:0;overflow:hidden}
  .lado-tope{display:flex;width:100%;align-items:center;justify-content:space-between;
    gap:12px;padding:15px 16px;background:none;border:0;cursor:pointer;
    font-family:inherit;text-align:left;color:var(--ink)}
  .lado-tope-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
  .lado-tope b{font-size:15.5px;font-weight:700}
  .lado-tope-txt>span{font-size:13px;color:var(--ink-2);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* La flecha es un chevron dibujado con dos bordes: gira al abrir, que es
     lo que le dice a la persona que esto se despliega. */
  .lado-flecha{flex:none;width:11px;height:11px;border-right:2.5px solid var(--ink-2);
    border-bottom:2.5px solid var(--ink-2);transform:rotate(45deg);
    margin-top:-4px;transition:transform .18s ease}
  .lado-tope.abierto .lado-flecha{transform:rotate(-135deg);margin-top:3px}

  .lado-cuerpo{display:none;padding:0 16px 16px}
  .lado-cuerpo.abierto{display:block}
  .lado-cuerpo h5:first-child{margin-top:4px}
}

/* =========================================================================
   EL ARTESANO DEL MES
   -------------------------------------------------------------------------
   Una sola pieza grande, no una tarjeta más: es lo que le da cara de pueblo
   al sitio. En celular la foto va arriba y el texto abajo; en pantalla ancha,
   uno al lado del otro. La foto va clavada a su caja, como todas las del
   sitio: en el flujo, dentro de una grilla, estira la caja y tapa el nombre.
   ========================================================================= */
.artesano{display:grid;grid-template-columns:1fr;gap:0;margin:26px 0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .12s ease,box-shadow .12s ease}
.artesano:hover,.artesano:focus-visible{transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(22,34,28,.10)}
.artesano-foto{position:relative;display:grid;place-items:center;width:100%;
  aspect-ratio:16/10;background:var(--kaolin);font-size:44px;max-width:100%}
.artesano-foto img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.artesano-cuerpo{display:block;padding:20px}
.artesano-sello{display:inline-block;background:var(--green);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;margin-bottom:10px}
.artesano-cuerpo h2{font-family:'Schibsted Grotesk',system-ui,sans-serif;
  font-size:25px;font-weight:800;color:var(--ink);margin:0 0 4px;text-wrap:balance}
.artesano-rubro{display:block;font-size:13px;color:var(--moss-tx);
  font-weight:700;margin-bottom:10px}
.artesano-cuerpo p{margin:0 0 14px;color:var(--ink-2);font-size:15.5px;
  line-height:1.6;max-width:60ch}
.artesano-ir{display:inline-block;font-weight:700;color:var(--green-dk);font-size:15px}

@media(min-width:760px){
  .artesano{grid-template-columns:minmax(0,44%) minmax(0,1fr);align-items:stretch}
  .artesano-foto{aspect-ratio:auto;height:100%;min-height:260px}
  .artesano-cuerpo{padding:26px 28px;align-self:center}
}

/* =========================================================================
   LA PÁGINA LEGAL
   -------------------------------------------------------------------------
   Texto largo para leer, no para adornar: una sola columna angosta (unos 65
   caracteres por renglón, que es donde el ojo no se pierde al saltar de línea)
   y bastante aire entre bloques.
   ========================================================================= */
.legal{max-width:65ch;margin:26px auto 60px}
.legal h1{font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:30px;
  font-weight:900;color:var(--ink);margin:0 0 8px;text-wrap:balance}
.legal .bajada{color:var(--ink-2);font-size:16px;line-height:1.6;margin:0 0 22px}
.legal h2{font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:23px;
  font-weight:800;color:var(--ink);margin:38px 0 6px;padding-top:16px;
  border-top:1px solid var(--line);scroll-margin-top:90px}
.legal h3{font-size:16.5px;font-weight:700;color:var(--ink);margin:22px 0 6px}
.legal p,.legal li{color:var(--ink);font-size:15.5px;line-height:1.7}
.legal p{margin:0 0 12px}
.legal ul,.legal ol{margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal a{color:var(--green-dk);font-weight:600}
.legal-indice{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.legal-indice a{background:var(--green-lt);color:var(--green-dk);font-size:14px;
  font-weight:700;padding:8px 14px;border-radius:999px;text-decoration:none}
.legal-pie{margin-top:32px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:14px}

/* ------------------------------------------- lo de hoy y el trabajo
   Tarjetas cortas, pensadas para leerse de un vistazo: lo de un aviso de 24
   horas es enterarse, no estudiarlo. */
.hoy{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.hoy-uno{display:flex;flex-direction:column;gap:5px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--amber,#C98A12);
  border-radius:12px;padding:14px 16px;text-decoration:none;color:inherit;
  transition:transform .12s ease}
.hoy-uno:hover,.hoy-uno:focus-visible{transform:translateY(-2px)}
.hoy-trabajo{border-left-color:var(--green)}
.hoy-quien{font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--moss-tx)}
.hoy-titulo{font-family:'Schibsted Grotesk',system-ui,sans-serif;font-size:17px;
  font-weight:800;color:var(--ink)}
.hoy-texto{color:var(--ink);font-size:15px;line-height:1.5}
.hoy-cuando{font-size:12.5px;color:var(--ink-3)}

/* Un pie chiquito para las pantallas que no llevan el pie grande (ingresar y
   los dos paneles). El enlace a lo legal tiene que estar en TODAS: una página
   de privacidad escondida es lo mismo que no tenerla, y en "ingresar" es donde
   la persona crea la cuenta — es justo el momento de poder leerla. */

/* ------------------------------------------- quién escribió cada reseña
   La cara y el nombre arriba del todo: una reseña sin autor es un cartel sin
   firma, y la página de privacidad promete que se ven con nombre. */
.resena-quien{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.resena-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;
  background:var(--kaolin);flex:none;display:block}
.resena-quien b{font-size:14.5px;color:var(--ink);font-weight:700}

/* =========================================================================
   EL MENÚ DE LA CUENTA
   -------------------------------------------------------------------------
   Un cajón que entra deslizándose desde la izquierda, el mismo gesto que usan
   los tres paneles. Arriba, en la cabecera, va SÓLO el nombre: la primera
   versión ponía también la foto y quedaba una píldora oscura y gorda que le
   comía el aire al título del sitio en un celular. La cara se ve al abrir, que
   es donde sirve.
   ========================================================================= */
.cuenta-boton{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:inherit}
.cuenta-nombre{max-width:110px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
/* La flecha es un chevron de dos bordes: gira al abrir, y es lo que avisa a la
   vista de que eso se despliega en vez de llevarte a otra página. */
.cuenta-flecha{flex:none;width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;
  transition:transform .18s ease}
.cuenta-boton[aria-expanded="true"] .cuenta-flecha{transform:rotate(-135deg);margin-top:2px}

/* El cajón. Vive pegado al `body` para que ningún recorte de la barra lo
   corte, y arranca fuera de la pantalla. */
.cuenta-panel{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:80;
  height:100dvh;overflow-y:auto;background:#0E2A20;color:#fff;padding:18px 12px;
  transform:translateX(-100%);visibility:hidden;
  transition:transform .24s, visibility .24s}
.cuenta-panel.abierto{transform:none;visibility:visible}

/* El cajón usa por dentro las mismas clases `s-*` que el menú de los paneles,
   que viven en `comun.css`. Antes tenía las suyas propias —`.cuenta-quien`,
   `.cuenta-panel a`— y por eso se veía distinto: la misma persona, dos menús.
   Lo vio Juanjo en su teléfono. Sólo queda acá la caja que se desliza. */

/* El velo del cajón. Se define acá y no sólo en panel.css porque las páginas
   públicas (la portada, las fichas, turismo, agenda) no cargan esa hoja: sin
   esto, el cajón se abriría sobre la página sin oscurecerla y no se entendería
   que hay que tocar afuera para cerrarlo. */
#cuenta-velo{display:none;position:fixed;inset:0;z-index:70;
  background:rgba(14,42,32,.45)}
#cuenta-velo.on{display:block}

/* ---------------------------------------------------------- COMPRA Y VENTA */
/* Los filtros de Ventas tienen clase propia (`vf`) y no la del mapa (`mf`),
   aunque se vean igual. Compartirla hizo que una prueba del mapa contara ocho
   filtros donde hay cuatro, y el día que alguien escuche los clics en toda la
   página en vez de en su caja, se mezclarían de verdad. */
.vf{
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  border-radius:99px;padding:7px 14px;font-size:13.5px;font-weight:700;cursor:pointer;
}
.vf.on{background:var(--green);border-color:var(--green);color:#fff}
.filtros-venta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.filtros-venta .b{margin-left:auto}
@media(max-width:560px){.filtros-venta .b{margin-left:0;width:100%;justify-content:center}}

.venta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.venta{
  display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);overflow:hidden;cursor:pointer;
  font:inherit;color:inherit;min-width:0;
}
.venta:hover{border-color:var(--green)}
/* La foto va clavada a su caja: dentro de una grilla, dejarla en el flujo hace
   que la caja crezca hasta el alto natural de la foto y tape el texto. Es el
   mismo error que rompió las tarjetas del directorio. */
.venta-foto{position:relative;display:block;aspect-ratio:4/3;background:var(--kaolin)}
.venta-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.venta-sin-foto{
  position:absolute;inset:0;display:grid;place-items:center;
  color:var(--ink-3);font-size:13px;
}
.venta-sello{
  position:absolute;left:10px;top:10px;background:var(--ink);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.06em;padding:4px 9px;border-radius:99px;
}
.venta-cuerpo{display:block;padding:12px 14px 14px;min-width:0}
.venta-cuerpo b{display:block;font-size:14.5px;line-height:1.35;margin-bottom:5px}
.venta-precio{
  display:block;font-family:'Schibsted Grotesk';font-size:17px;font-weight:900;
  color:var(--green-dk);margin-bottom:3px;
}
.venta-cat{display:block;font-size:12.5px;color:var(--ink-3)}
.venta.vendida .venta-foto img{filter:grayscale(1);opacity:.7}
.venta.vendida .venta-precio{text-decoration:line-through;color:var(--ink-3)}

.venta-fotos-grandes{display:flex;gap:8px;overflow-x:auto;margin-bottom:16px}
.venta-fotos-grandes img{width:220px;height:165px;object-fit:cover;border-radius:12px;flex:none}
.venta-precio-grande{
  font-family:'Schibsted Grotesk';font-size:26px;font-weight:900;
  color:var(--green-dk);margin-bottom:14px;
}
.venta-contacto{display:flex;gap:9px;flex-wrap:wrap}
.venta-contacto .b{flex:1 1 150px;justify-content:center}
.venta-quien{display:flex;align-items:center;gap:10px;margin-bottom:16px;min-width:0}
.venta-quien img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}
.venta-quien span{display:block;font-size:14px;min-width:0}
.venta-quien small{display:block;font-size:12.5px;color:var(--ink-3)}
.buscador-venta{display:flex;gap:8px;margin-bottom:12px}
.buscador-venta input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;
  padding:11px 14px;font:inherit;font-size:15px;background:var(--surface);color:var(--ink);
}
.buscador-venta input:focus{outline:none;border-color:var(--green)}