/* La Guía — complementa /assets/estilos.css (mismo estilo que Tráfico Lara) */

/* Color del plan (clave de COLORES_PLAN): borde de tarjetas y fichas */
.c-gris{--pc:var(--line)} .c-verde{--pc:#22c55e} .c-azul{--pc:#38bdf8} .c-morado{--pc:#a78bfa} .c-dorado{--pc:#f5c542}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.guia .links .btn{color:#1a1200;margin-left:6px}
.guia .links .btn:hover{background:var(--brand2)}

/* Portada */
.g-hero{padding-bottom:24px}
.g-buscar{display:flex;flex-wrap:wrap;gap:10px;max-width:820px}
.g-buscar .search{flex:1 1 300px;max-width:none}
.g-buscar select{background:var(--bg2);border:1px solid var(--line);color:var(--text);padding:11px 12px;border-radius:12px;font-size:15px;font-family:inherit;flex:0 1 190px}
.g-buscar .btn{padding:11px 20px;font-size:15px}
.g-rapidas{margin-top:14px}
.g-stats{grid-template-columns:repeat(3,1fr);max-width:620px;margin-top:24px}
@media (max-width:640px){.g-stats{grid-template-columns:repeat(3,1fr)} .g-stats .stat .n{font-size:24px}}
.zonas-chips a.vacio{color:var(--muted);font-weight:500}

.g-grupos{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.g-grupo{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.g-grupo h3{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.g-grupo ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.g-grupo a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:10px;font-weight:600;font-size:15px}
.g-grupo a:hover{background:var(--bg2);color:var(--brand)}
.g-grupo small{margin-left:auto;color:var(--muted);font-weight:600;background:var(--bg2);border-radius:999px;padding:1px 8px;font-size:12px}

.g-cta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;margin-top:40px;padding:28px;border-radius:var(--radius);
  background:radial-gradient(600px 200px at 0% 0%,rgba(251,165,9,.2),transparent 70%),var(--card);border:1px solid var(--line)}
.g-cta h2{margin:0 0 6px}
.g-cta p{margin:0;color:var(--muted);max-width:560px}
.g-cta p b{color:var(--text)}
.g-cta-btns{display:flex;gap:10px;flex-wrap:wrap}
.g-cta .btn{padding:12px 20px;font-size:15px}

/* Listados */
.g-filtros{margin:16px 0 0}
.chips a.chip{display:inline-block}
.g-cats{margin:4px 0 8px}
.g-sec{padding-top:20px}
.g-h2{font-size:18px;margin:0 0 12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.g-paginas{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:24px 0 0}
.g-paginas a{min-width:40px;text-align:center;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);font-weight:600}
.g-paginas a.on,.g-paginas a:hover{border-color:var(--brand);color:var(--brand)}

/* Tarjeta de negocio: tres niveles según las funciones del plan */
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.gn{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.gn:not(.c-gris){border-color:color-mix(in srgb,var(--pc) 55%,var(--line));box-shadow:inset 0 3px 0 var(--pc)}
.gn:hover{transform:translateY(-2px);border-color:var(--pc)}
.gn.c-gris:hover{border-color:var(--brand)}
.gn-portada{position:relative;display:block;aspect-ratio:2/1;background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 30%,var(--bg2)),var(--bg2));overflow:hidden}
.gn-portada img{width:100%;height:100%;object-fit:cover;display:block}
.gn-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:54px;opacity:.9}
.gn-etq{position:absolute;top:10px;left:10px;background:var(--pc);color:#1a1200;font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px}
.gn-top .gn-etq{position:static;margin-left:auto;flex-shrink:0}
.gn-cuerpo{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.gn-top{display:flex;gap:12px;align-items:flex-start}
.gn-logo{width:48px;height:48px;border-radius:12px;object-fit:cover;border:1px solid var(--line);flex-shrink:0;background:var(--bg2)}
.con-foto .gn-logo{margin-top:-34px;width:56px;height:56px;border:3px solid var(--card)}
.gn-icono{width:44px;height:44px;border-radius:12px;background:var(--bg2);display:grid;place-items:center;font-size:22px;flex-shrink:0}
.gn-tit{min-width:0;flex:1}
.gn h3{margin:0;font-size:16px;line-height:1.3}
.gn h3 a:hover{color:var(--brand)}
.gn-tit small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.gn-verif{color:#38bdf8;display:inline-flex;vertical-align:-3px}
.gn-verif svg{width:17px;height:17px}
.gn-chips{display:flex;flex-wrap:wrap;gap:6px}
.gn-chip,.gn-abierto{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--bg2);border:1px solid var(--line);color:#d3d9e4}
.gn-abierto.si{color:#86efac;border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.1)}
.gn-abierto.no{color:#fca5a5;border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}
.gn-promo{margin:0;font-size:14px;font-weight:600;background:rgba(245,197,66,.12);border:1px dashed rgba(245,197,66,.5);color:#fde68a;border-radius:10px;padding:8px 10px}
.gn-acc{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto}
.gn-wa{background:#22c55e;color:#04210f}
.gn-wa:hover{background:#4ade80}
.gn-tel{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:600;font-size:14px}
.gn-tel:hover{color:var(--brand)}
.gn-redes{display:flex;gap:4px;margin-left:auto}
.gn-redes a{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);color:var(--muted)}
.gn-redes a:hover{color:var(--text);border-color:var(--brand)}

/* Ficha */
.gf{margin-top:16px}
.gf-portada{border-radius:var(--radius);overflow:hidden;aspect-ratio:3/1;border:1px solid var(--line);background:var(--bg2)}
.gf-portada img{width:100%;height:100%;object-fit:cover;display:block}
.gf-cab{display:flex;gap:16px;align-items:center;margin:18px 0 14px}
.gf-portada + .gf-cab{margin-top:-40px;padding-left:16px}
.gf-logo{width:88px;height:88px;border-radius:18px;object-fit:cover;border:3px solid var(--bg);background:var(--bg2);flex-shrink:0}
.gf-icono{width:72px;height:72px;border-radius:18px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-size:36px;flex-shrink:0}
.gf-portada + .gf-cab .gf-tit{padding-top:36px}
.gf h1{margin:0;font-size:clamp(26px,4.5vw,38px)}
.gf h1 .gn-verif svg{width:26px;height:26px}
.gf-sub{margin:4px 0 8px;color:var(--muted)}
.gf-sub a{color:var(--text);font-weight:600} .gf-sub a:hover{color:var(--brand)}
.gf-promo{font-size:16px;margin:0 0 14px}
.gf-acc{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.gf-acc .btn{padding:11px 16px;font-size:15px}
.gf-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start}
@media (max-width:820px){.gf-cols{grid-template-columns:1fr} .gf-cab{align-items:flex-start}}
.gf-main,.gf-lado{display:grid;gap:16px}
.gf-texto{margin:0;color:#d3d9e4}
.gf-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.gf-galeria img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;border:1px solid var(--line)}
.gf-video{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.gf-video iframe{width:100%;height:100%;border:0}
.gf-redes{display:flex;flex-direction:column;gap:6px}
.gf-redes a{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);font-weight:600;font-size:14px}
.gf-redes a:hover{border-color:var(--brand)}
.panel dd a{color:var(--brand);word-break:break-word}
.gf-horario{width:100%;border-collapse:collapse;font-size:14px}
.gf-horario th{text-align:left;font-weight:500;color:var(--muted);padding:6px 0}
.gf-horario td{text-align:right;padding:6px 0}
.gf-horario tr.hoy th,.gf-horario tr.hoy td{color:var(--brand);font-weight:700}
.gf-cerrado{color:var(--muted)}
.gf-reclamar{border-color:rgba(251,165,9,.45)}
.gf-reclamar p{color:var(--muted);font-size:14px;margin:0 0 12px}
.gf .c-verde,.gf.c-verde .gf-logo{border-color:#22c55e}
.gf.c-dorado .gf-logo{border-color:#f5c542}

/* Formularios */
.g-form{max-width:760px}
.g-form fieldset{border:0;padding:0;margin:0;display:grid;gap:12px}
.g-form legend{font-size:16px;font-weight:800;margin:0 0 10px;padding:0;color:var(--brand)}
.g-form legend small{color:var(--muted);font-weight:400;font-size:13px}
.g-form input[type=text],.g-form input[type=tel],.g-form input[type=url],.g-form input[type=time]{
  width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--text);padding:12px 14px;border-radius:12px;font-size:16px;font-family:inherit;outline:none;color-scheme:dark}
.g-form input:focus{border-color:var(--brand)}
.g-fila{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.g-fila{grid-template-columns:1fr}}
.g-err{color:#fca5a5;font-weight:600;font-size:13px}
.g-horario{display:grid;gap:6px}
.g-dia{display:grid;grid-template-columns:100px 1fr 1fr;gap:8px;align-items:center;font-size:14px;font-weight:600}
.g-dia input{padding:8px 10px!important}
.g-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#d3d9e4;font-weight:500}
.g-check input{margin-top:3px;accent-color:var(--brand)}
.g-form .btn.ghost{justify-self:start;font-size:14px;padding:8px 14px}

/* Planes */
.g-planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:8px}
.g-plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:10px}
.g-plan:not(.c-gris){border-color:var(--pc);box-shadow:inset 0 4px 0 var(--pc)}
.g-plan h2{font-size:22px}
.g-precio{font-size:38px;font-weight:800;margin:0;line-height:1}
.g-precio small{font-size:15px;color:var(--muted);font-weight:500}
.g-plan-desc{margin:0;color:var(--muted);font-size:14px}
.g-plan ul{margin:6px 0 10px;padding:0;list-style:none;display:grid;gap:8px;font-size:14px;flex:1}
.g-plan li::before{content:"✓";color:var(--pc);font-weight:800;margin-right:8px}
.g-plan.c-gris li::before{color:var(--ok)}
.g-plan .btn{justify-content:center;padding:12px}

/* Pie de tarjeta: siempre abajo y con la misma estructura (alinea las tarjetas de una fila) */
.gn-pie{margin-top:auto;display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.gn-pie .gn-wa{justify-content:center;padding:10px 14px}
.gn-pie-fila{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px}
.gn-pie-fila .gn-redes{margin-left:0}

/* Negocios sin foto: grilla compacta aparte */
.g-h3{font-size:15px;margin:24px 0 10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.g-compacta{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.g-compacta .gn-cuerpo{padding:12px 14px;gap:8px}
.g-compacta .gn-pie{padding-top:8px}

/* Categorías sobrias: solo texto y conteo */
.g-grupo a{justify-content:space-between;font-weight:500}
.g-grupo a small{min-width:28px;text-align:center;font-variant-numeric:tabular-nums;color:var(--text)}
.g-grupo a.vacia{color:var(--muted)}
.g-grupo a.vacia small{color:var(--muted);opacity:.6}

/* Estilo sobrio: monogramas en vez de emojis, logo sin encimarse sobre la portada */
.con-foto .gn-logo{margin-top:0;width:48px;height:48px;border:1px solid var(--line)}
.gn-ph{font-size:44px;font-weight:800;letter-spacing:2px;color:color-mix(in srgb,var(--pc) 70%,#fff);opacity:.55}
.c-gris .gn-ph{color:var(--muted)}
.gn-icono,.gf-icono{font-weight:800;letter-spacing:.5px;color:var(--muted);border:1px solid var(--line)}
.gn-icono{font-size:15px}
.gf-icono{font-size:26px;color:var(--text)}
.gn-promo{font-weight:600;border-left:3px solid #f5c542;border-style:solid;border-width:0 0 0 3px;border-radius:6px;background:rgba(245,197,66,.08)}
/* Ficha: el logo va debajo de la portada, no encima */
.gf-portada + .gf-cab{margin-top:18px;padding-left:0}
.gf-portada + .gf-cab .gf-tit{padding-top:0}
.gf-logo{border:1px solid var(--line)}

/* Celular */
@media (max-width:640px){
  .g-grid,.g-compacta{grid-template-columns:1fr}
  .gf-cab{gap:12px}
  .gf-logo{width:64px;height:64px;border-radius:14px}
  .gf-icono{width:56px;height:56px;font-size:20px}
  .gf-acc .btn{flex:1 1 calc(50% - 10px);justify-content:center;padding:11px 10px;font-size:14px}
  .gf-acc .gn-wa{flex-basis:100%}
  .gf-portada{aspect-ratio:2.2/1}
  .g-buscar select,.g-buscar .btn{flex:1 1 auto}
  .g-cta{padding:20px}
  .g-dia{grid-template-columns:80px 1fr 1fr}
}
.g-nota{margin:0;color:var(--muted);font-size:13px}
.g-form input[type=email]{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--text);padding:12px 14px;border-radius:12px;font-size:16px;font-family:inherit;outline:none}
.g-form input[type=email]:focus{border-color:var(--brand)}
.g-nota{margin:0;color:var(--muted);font-size:13px}
.g-form input[type=email]{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--text);padding:12px 14px;border-radius:12px;font-size:16px;font-family:inherit;outline:none}
.g-form input[type=email]:focus{border-color:var(--brand)}

/* Opción A: grafito + naranja de marca (Plus), dorado (Premium) */
.c-naranja{--pc:#fba509}
.gn-portada{background:#161d2d}
.gn-ph{color:color-mix(in srgb,var(--pc) 45%,transparent);opacity:1}
.c-gris .gn-ph{color:#94a0b855}
.gn.c-dorado{border-color:#f5c542;box-shadow:inset 0 3px 0 #f5c542}
.g-plan.c-dorado{border-width:2px}

/* Planes: tarjeta de ejemplo (no se puede hacer clic) */
.g-muestra{display:grid;gap:6px;margin:4px 0 8px;pointer-events:none;user-select:none}
.g-muestra > small{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.g-muestra .gn:hover{transform:none}
.g-planes{align-items:start}

/* Servicios adicionales */
.g-precio-s{font-size:28px}
.g-beneficio{margin:0;font-size:13px;font-weight:700;color:var(--brand)}
.g-plan ul.g-aclara{flex:0;margin-top:0;padding-top:10px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.g-plan ul.g-aclara li::before{content:"ⓘ";color:var(--muted)}
