/* === TIPOGRAFÍA AUTO-ALOJADA (sin dependencias externas) ===
   Subsets latin (español) + latin-ext (nombres con glifos europeos).
   El navegador solo descarga el latin-ext si la página usa esos caracteres. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/fraunces.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/fraunces-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/fraunces-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/fraunces-italic-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/static/fonts/plus-jakarta-sans.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/static/fonts/plus-jakarta-sans-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* === VARIABLES === */
:root {
  --bg:          #FBF7F0;   /* crema cálido */
  --surface:     #ffffff;
  --surface2:    #F4EFE7;   /* crema más cálido para zonas suaves */
  --border:      #E8E2D9;   /* borde cálido */
  --border2:     #D8CFC1;
  --text:        #1F1A15;   /* tinta cálida */
  --text2:       #5A524A;
  --text3:       #938A7E;
  --accent:      #C2521C;   /* naranja teja */
  --accent-hover:#A5410F;
  --accent-bg:   #FBEBDF;   /* fondo suave del acento */
  --ink:         #221C16;   /* fondo oscuro de héroe/CTA */
  --red:         var(--accent);  /* alias retrocompatibilidad */
  --amber:       #E0902A;
  --green:       #3B6D11;
  --green-bg:    #EAF3DE;
  --blue-bg:     #E6F1FB;
  --blue-text:   #0C447C;
  --purple-bg:   #EEEDFE;
  --purple-text: #3C3489;
  --radius:      8px;    /* elementos pequeños: botones, inputs, pastillas */
  --radius-md:   12px;   /* cards medianas */
  --radius-lg:   20px;   /* superficies grandes: hero, CTA, galería */
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:   'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
main { flex: 1; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.3px; line-height: 1.2; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }
select { font-family: inherit; }

/* === TOPBAR === */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 13px 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.logo { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--text); letter-spacing: -.4px; }
.logo span { color: var(--accent); }
.topbar-nav { display: flex; align-items: center; gap: 22px; font-size: 13px; font-weight: 500; color: var(--text2); }
.topbar-nav a:hover { color: var(--text); }
.topbar-nav a.nav-cta { background: var(--accent); color: #fff; padding: 8px 16px; border-radius: 999px; font-weight: 600; }
.topbar-nav a.nav-cta:hover { background: var(--accent-hover); color: #fff; }
.nav-toggle { display: none; background: transparent; border: 0; font-size: 24px; line-height: 1; color: var(--text); cursor: pointer; padding: 0 4px; }

/* === SEARCH BAR === */
.search-bar { background: var(--surface2); border-bottom: 1px solid var(--border); padding: 14px 24px; }
.search-inner { display: flex; gap: 8px; max-width: 1200px; margin: 0 auto; }
.search-input, .search-loc { padding: 10px 14px; border: 1px solid var(--border2); border-radius: var(--radius); font-size: 14px; background: var(--surface); color: var(--text); outline: none; }
.search-input { flex: 1; }
.search-loc { width: 200px; }
.search-input:focus, .search-loc:focus { border-color: var(--accent); }
.btn-search { background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 10px 22px; font-size: 14px; font-weight: 600; flex-shrink: 0; }
.btn-search:hover { background: var(--accent-hover); }

/* === BREADCRUMB === */
.breadcrumb { font-size: 12px; color: var(--text3); padding: 9px 24px; border-bottom: 1px solid var(--border); background: var(--surface2); }
.breadcrumb a { color: var(--text3); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb .sep { margin: 0 5px; }

/* === ESTRELLAS (CSS puro) === */
.stars { position: relative; display: inline-block; color: #ddd; white-space: nowrap; }
.stars::before { content: "★★★★★"; position: absolute; top: 0; left: 0; color: var(--amber); overflow: hidden; width: var(--pct, 0%); white-space: nowrap; }
.stars-sm { font-size: 12px; }
.stars-md { font-size: 14px; letter-spacing: 1px; }
.stars-lg { font-size: 18px; letter-spacing: 2px; }

/* === BADGES === */
.badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; display: inline-block; white-space: nowrap; }
.badge-prem { background: var(--accent-bg); color: #9A3D11; }
.badge-feat { background: #FAEEDA; color: #633806; }
.badge-ver  { background: var(--green-bg); color: #27500A; }
.badge-new  { background: var(--purple-bg); color: var(--purple-text); }
.badge-cat  { display: inline-block; font-size: 11px; font-weight: 600; background: var(--blue-bg); color: var(--blue-text); padding: 3px 12px; border-radius: 20px; letter-spacing: .3px; }

/* === BOTONES === */
.btn { border: none; border-radius: var(--radius); padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-block; text-align: center; }
.btn-red   { background: var(--accent); color: #fff; }
.btn-red:hover { background: var(--accent-hover); }
.btn-amber { background: var(--amber); color: #fff; }
.btn-amber:hover { background: #d4861e; }
.btn-out   { background: transparent; border: 1px solid var(--border2); color: var(--text2); }
.btn-out:hover { background: var(--surface2); }
.btn-block { display: block; width: 100%; margin-top: 7px; }
.btn-more  { font-size: 13px; color: var(--text2); background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 9px 22px; display: block; margin: 14px auto 0; width: max-content; }
.btn-more:hover { border-color: var(--red); color: var(--red); }

/* === CARD (genérica) === */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; margin-bottom: 18px; }
.card-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }

/* Descripción larga generada por el REDACTOR (HTML estructurado: p, strong, ul, li) */
.biz-description { font-size: 14px; color: var(--text2); line-height: 1.7; font-family: var(--font-body); }
.biz-description p { margin: 0 0 14px 0; }
.biz-description p:last-child { margin-bottom: 0; }
.biz-description strong { color: var(--text); font-weight: 700; }
.biz-description ul { margin: 0 0 14px 0; padding-left: 24px; list-style-type: disc; list-style-position: outside; }
.biz-description li { margin-bottom: 6px; display: list-item; }
.biz-description li::marker { color: var(--red); }

.ad-banner { background: var(--surface2); border: 1px dashed var(--border2); border-radius: var(--radius); padding: 11px; text-align: center; font-size: 11px; color: var(--text3); margin-bottom: 18px; }
.ad-banner a { color: var(--text2); text-decoration: underline; }

/* ===================================================
   LISTADO DE NEGOCIOS
=================================================== */
.listado-main { max-width: 1200px; margin: 0 auto; padding: 20px 24px; display: grid; grid-template-columns: 270px 1fr; gap: 22px; }

/* Grid usado por las paginas localidad.html y categoria.html (contenido + sidebar).
   En movil colapsa a una sola columna; la sidebar se oculta via .listado-sidebar. */
.content-grid { display: grid; grid-template-columns: 1fr 270px; gap: 22px; }
@media (max-width: 720px) {
  .content-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Sidebar filtros */
.filter-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 15px; margin-bottom: 13px; }
.filter-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 11px; }
.filter-opt { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; font-size: 13px; color: var(--text2); }
.filter-opt label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.filter-opt input[type="checkbox"], .filter-opt input[type="radio"] { accent-color: var(--red); }
.filter-opt.active,
.filter-opt:has(input:checked) { color: var(--text); font-weight: 600; background: var(--accent-bg); border-radius: var(--radius); margin: 2px -8px; padding: 5px 8px; }
.filter-opt.active label,
.filter-opt:has(input:checked) label { color: var(--red); }
.filter-count { font-size: 11px; color: var(--text3); background: var(--surface2); padding: 1px 7px; border-radius: 20px; }
.star-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text2); cursor: pointer; padding: 4px 0; border-radius: var(--radius); }
.star-row input { accent-color: var(--amber); }
.star-row.active,
.star-row:has(input:checked) { color: var(--text); font-weight: 700; background: var(--accent-bg); margin: 0 -8px; padding: 4px 8px; }
.province-select { width: 100%; padding: 8px 10px; border: 1px solid var(--border2); border-radius: var(--radius); font-size: 13px; background: var(--surface); color: var(--text); }
.province-select.has-value { border-color: var(--red); border-width: 2px; background: var(--accent-bg); color: var(--text); font-weight: 600; }
.ad-sidebar { background: var(--surface2); border: 1px dashed var(--border2); border-radius: var(--radius-md); padding: 18px; text-align: center; font-size: 11px; color: var(--text3); }
.ad-sidebar a { color: var(--text2); text-decoration: underline; }

/* Resultados */
.results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.results-count { font-size: 14px; }
.results-count strong { font-weight: 700; }
.results-count .loc { color: var(--text3); }
.sort-select { padding: 7px 11px; border: 1px solid var(--border2); border-radius: var(--radius); font-size: 13px; background: var(--surface); color: var(--text); }
.active-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.filter-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; background: var(--blue-bg); color: var(--blue-text); padding: 3px 11px; border-radius: 20px; }

/* Tarjeta de negocio (horizontal) */
.biz-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 15px; margin-bottom: 13px; display: grid; grid-template-columns: 95px 1fr; gap: 14px; transition: border-color .15s; }
.biz-card:hover { border-color: var(--border2); }
.biz-card.featured { border: 2px solid var(--amber); }
.biz-card.premium  { border: 2px solid var(--red); }
.biz-img { border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 32px; height: 95px; flex-shrink: 0; overflow: hidden; }
.biz-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.c1 { background: #B5D4F4; } .c2 { background: #C0DD97; } .c3 { background: #EEEDFE; }
.c4 { background: #F5C4B3; } .c5 { background: #FAC775; } .c6 { background: #E1F5EE; }
.biz-body { min-width: 0; }
.biz-top  { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 5px; gap: 8px; }
.biz-name { font-size: 15px; font-weight: 700; line-height: 1.3; }
.biz-name a:hover { color: var(--red); }
.biz-disambig { display: block; font-size: 12px; font-weight: 400; color: var(--text3); margin-top: 1px; }
.biz-badges { display: flex; gap: 5px; flex-wrap: wrap; flex-shrink: 0; }
.biz-rating { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.rating-n { font-size: 13px; font-weight: 700; }
.rating-c { font-size: 12px; color: var(--text3); }
.biz-desc { font-size: 13px; color: var(--text2); line-height: 1.5; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.biz-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.biz-meta-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text3); }
.open-now   { color: var(--green); font-weight: 600; }
.closed-now { color: #A32D2D; }

/* Fila de acciones rápidas en la card del listado: 📞 / WhatsApp / Web / Email. */
.biz-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.biz-action { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 12px; font-weight: 500; color: var(--text2); background: var(--surface); border: 1px solid var(--border2); border-radius: 999px; transition: background .12s, border-color .12s, color .12s; }
.biz-action:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--text); }
.biz-action .ba-ic { font-size: 13px; line-height: 1; }
.biz-action .ba-ic-svg { width: 13px; height: 13px; display: inline-block; vertical-align: -1px; }
.biz-action-wa { color: #25D366; border-color: #25D36633; background: #25D36612; }
.biz-action-wa:hover { background: #25D366; border-color: #25D366; color: #fff; }
@media (max-width: 480px) {
  .biz-action .ba-tx { display: none; }
  .biz-action { padding: 6px 9px; }
  .biz-action .ba-ic { font-size: 15px; }
  .biz-action .ba-ic-svg { width: 15px; height: 15px; }
}

/* Empty state */
.empty-state { text-align: center; padding: 56px 0; color: var(--text3); }
.empty-state p:first-child { font-size: 2.5rem; margin-bottom: 12px; }
.empty-state h2 { font-size: 18px; color: var(--text); margin-bottom: 8px; }

/* Paginación */
.pagination { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 20px; padding-bottom: 24px; }
.page-btn { min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border2); border-radius: var(--radius); font-size: 13px; color: var(--text2); background: var(--surface); padding: 0 8px; }
a.page-btn:hover { border-color: var(--red); color: var(--red); }
.page-btn.active { background: var(--red); color: #fff; border-color: var(--red); font-weight: 700; }
.page-btn.dots { border-color: transparent; background: transparent; pointer-events: none; }

/* ===================================================
   MÁS NEGOCIOS CERCA DE [LOCALIDAD] (Bloque A #2)
=================================================== */
.cercanos { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border); }
.cercanos-head { margin-bottom: 18px; }
.cercanos-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.cercanos-sub { font-size: 13px; color: var(--text3); margin: 0; }
.cercanos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1080px) { .cercanos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .cercanos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .cercanos-grid { grid-template-columns: 1fr; } }
.cercano-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.cercano-card:hover { border-color: var(--border2); transform: translateY(-1px); }
.cercano-img { position: relative; display: block; aspect-ratio: 16/10; background: var(--accent-bg); overflow: hidden; }
.cercano-img img { width: 100%; height: 100%; object-fit: cover; }
.cercano-dist { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; backdrop-filter: blur(4px); }
.cercano-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.cercano-name { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; }
.cercano-name a { color: inherit; }
.cercano-name a:hover { color: var(--accent); }
.cercano-city { font-size: 12px; color: var(--text3); }
.cercano-city a { color: inherit; text-decoration: underline dotted; }

/* Variante destacada: cuando hay <5 resultados locales, este bloque toma
   más protagonismo (separación mayor, título más grande). */
.cercanos-destacada { margin-top: 24px; padding-top: 20px; background: var(--accent-bg); border: 1px solid var(--accent); border-top: 1px solid var(--accent); padding: 22px 22px 24px; border-radius: var(--radius-md); }
.cercanos-destacada .cercanos-title { font-size: 24px; }
.cercanos-destacada .cercanos-sub { color: var(--text2); }

/* Bloque "También buscado en…" (long-tail). Chips discretos, funcionales. */
.busq-rel { margin-top: 30px; padding-top: 18px; border-top: 1px dashed var(--border); }
.busq-rel-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text3); margin-bottom: 10px; }
.busq-rel-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.busq-chip { display: inline-flex; align-items: center; padding: 6px 12px; font-size: 12.5px; color: var(--text2); background: var(--surface); border: 1px solid var(--border2); border-radius: 999px; transition: background .12s, border-color .12s, color .12s; }
.busq-chip:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--text); }

/* ===================================================
   MAPA DE LISTADO (sidebar desktop + overlay móvil) — bloque A #5
   Reutilizado por localidad, categoria y tiendas vía partials/mapa_listado.html
=================================================== */
.mapa-listado-box { height: 340px; width: 100%; }
.ver-mapa-btn { display: none; }
.leaflet-popup-content { margin: 0; }
#mapaSidebar .leaflet-popup-content { width: 200px !important; }
#mapaOverlayBox .leaflet-popup-content { width: 240px !important; }
#mapaSidebar .mapa-pop-img { height: 78px; }
.mapa-pop-acc { display: flex; flex-wrap: wrap; gap: 6px; }
.mapa-pop-acc a { text-align: center; font-size: 12px; font-weight: 600; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border2); color: var(--text2); }
.mapa-pop-acc a.prim { flex-basis: 100%; background: var(--accent); border-color: var(--accent); color: #fff; }
.mapa-pop-acc a.sec { flex: 1; }
.mapa-pop-acc a.wa { color: #25D366; border-color: #25D36655; }
.mapa-pop { font-size: 13px; }
.mapa-pop-img { width: 100%; height: 96px; object-fit: cover; display: block; background: var(--accent-bg); }
.mapa-pop-body { padding: 9px 11px 11px; }
.mapa-pop-nombre { font-weight: 700; font-size: 14px; color: var(--text); display: block; line-height: 1.25; }
.mapa-pop-nombre:hover { color: var(--accent); }
.mapa-pop-dir { font-size: 12px; color: var(--text3); margin: 2px 0 5px; }
.mapa-pop-rating { display: flex; align-items: center; gap: 5px; margin-bottom: 9px; }
@media (max-width: 720px) {
  .ver-mapa-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--surface); border: 1px solid var(--border2); color: var(--text2);
    font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  }
  .ver-mapa-btn:active { background: var(--accent-bg); }
  /* z-index por encima de la .topbar (100), si no su cabecera con "Ver en lista"
     queda tapada por la barra superior. */
  .mapa-overlay {
    position: fixed; inset: 0; z-index: 2000; background: var(--bg);
    display: flex; flex-direction: column; transform: translateY(100%);
    transition: transform .25s ease;
  }
  .mapa-overlay.open { transform: translateY(0); }
  .mapa-overlay-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
  .mapa-overlay-title { font-weight: 700; font-size: 15px; }
  .mapa-overlay-volver { background: var(--accent); border: 0; color: #fff; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
  #mapaOverlayBox { flex: 1; width: 100%; }
}

/* ===================================================
   FAB "FILTRO" móvil + panel slide-up de categorías hermanas
=================================================== */
.filtro-fab { display: none; }
.filtro-overlay { display: none; }
.filtro-panel { display: none; }

@media (max-width: 720px) {
  .filtro-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 16px; bottom: 16px; z-index: 60;
    width: 60px; height: 60px; border-radius: 50%;
    background: var(--accent); color: #fff; border: 0;
    font-size: 11px; font-weight: 700; letter-spacing: .6px;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
    cursor: pointer;
    transform: translateY(0); opacity: 1;
    transition: transform .25s ease, opacity .2s ease, background .15s;
  }
  .filtro-fab:hover { background: var(--accent-hover); }
  .filtro-fab.hide { transform: translateY(90px); opacity: 0; pointer-events: none; }

  .filtro-overlay {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(0,0,0,0); transition: background .25s ease;
    pointer-events: none; /* sin esto, el overlay transparente tapa el FAB */
  }
  .filtro-overlay.open { background: rgba(0,0,0,.55); pointer-events: auto; }

  .filtro-panel {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    max-height: 78vh; overflow-y: auto;
    background: var(--surface); color: var(--text);
    border-top-left-radius: 18px; border-top-right-radius: 18px;
    box-shadow: 0 -8px 32px rgba(0,0,0,.35);
    transform: translateY(100%); transition: transform .25s ease;
    padding: 6px 0 12px;
    pointer-events: none; /* offscreen pero por si acaso */
  }
  .filtro-panel.open { transform: translateY(0); pointer-events: auto; }

  .filtro-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 10px; border-bottom: 1px solid var(--border); }
  .filtro-panel-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text); }
  .filtro-panel-close { background: transparent; border: 0; color: var(--text3); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }

  .filtro-panel-list { display: flex; flex-direction: column; padding: 6px 0; }
  .filtro-item { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; font-size: 15px; color: var(--text); border-bottom: 1px solid var(--border); }
  .filtro-item:active { background: var(--accent-bg); }
  .filtro-item-name { font-weight: 500; }
  .filtro-item-count { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-bg); padding: 2px 9px; border-radius: 999px; min-width: 26px; text-align: center; }
  .filtro-item-reset { color: var(--text3); font-style: italic; }
}

/* ===================================================
   FICHA INDIVIDUAL
=================================================== */
.ficha-wrap { max-width: 1200px; margin: 0 auto; padding: 24px; }

/* === Hero v2 (rediseño estilo Páxinas) ===
   Bloque 1: galería (foto + thumbs + logo circular) a la izquierda y mapa
   con popup + botones a la derecha. Dos columnas igualadas en alto. */
.bloque-foto-mapa { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 22px; align-items: stretch; }

/* Columna izquierda. position:relative para anclar el logo en el borde dch. */
.gal-col { display: flex; flex-direction: column; gap: 6px; position: relative; min-width: 0; }

/* Logo del negocio en círculo (solo Destacado/Premium), anclado al borde
   derecho de la galería con offset = radio + medio gap, así queda siempre
   centrado en el hueco entre columnas y NO se corta. */
.logo-circulo {
  position: absolute; top: 50%; right: -62px; transform: translateY(-50%);
  width: 110px; height: 110px; border-radius: 50%;
  background: #fff; border: 4px solid #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  z-index: 10; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.logo-circulo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Placeholder cuando el negocio aún no ha subido logo: iniciales sobre
   fondo crema, en la tipografía y el color de acento del directorio. */
.logo-iniciales {
  width: 100%; height: 100%; background: var(--accent-bg); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: 1px;
}

/* Foto principal grande (5:2 en desktop, 16:10 en móvil). */
.gal-principal {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 5/2; background: #B5D4F4; cursor: pointer; border: 0; padding: 0; width: 100%;
}
.gal-principal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-principal.gal-empty { display: flex; align-items: center; justify-content: center; font-size: 60px; cursor: default; background: var(--surface2); }

/* Tira de thumbs (5 max). El 5º muestra "+N" si hay más fotos sin enseñar. */
.gal-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.gal-thumbs .gal-thumb { aspect-ratio: 1/1; border: 0; padding: 0; cursor: pointer; border-radius: 6px; overflow: hidden; position: relative; background: var(--surface2); min-height: 0; }
.gal-thumbs .gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-ver { position: absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,.7); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(4px); }
.gal-mas { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; font-size: 22px; font-weight: 700; }

/* Columna derecha: mapa que estira para igualar alto + acciones abajo. */
.mapa-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mapa-col .map-ph { flex: 1; min-height: 240px; height: auto; margin-bottom: 0; border-radius: var(--radius); }
.mapa-col .mapa-acciones { margin-top: 0; flex-shrink: 0; }

/* Lightbox de galería: overlay a pantalla completa con carrusel. */
.lb-overlay:not(.open) { pointer-events: none; }
.lb-overlay[hidden] { display: none !important; }
.lb-overlay { position: fixed; inset: 0; z-index: 2100; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease; }
.lb-overlay.open { opacity: 1; pointer-events: auto; }
.lb-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 60px 16px; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lb-close, .lb-prev, .lb-next { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 50%; width: 44px; height: 44px; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.25); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; background: rgba(0,0,0,.5); padding: 5px 12px; border-radius: 999px; }
@media (max-width: 720px) {
  .lb-prev, .lb-next { display: none; }   /* en movil se usa swipe */
}
.gs-a { background: #C0DD97; } .gs-b { background: #F5C4B3; }
.gs-c { background: #EEEDFE; } .gs-d { background: #FAC775; }

/* Bloque 2 (rediseño v5): contenido principal + sidebar lateral larga.
   La sidebar es sticky para que acompañe al scroll mientras se baja por
   la columna principal (descripción, opiniones, FAQs…) en lugar de
   dejar un hueco en blanco a la derecha. */
.bloque-contenido { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; margin-bottom: 24px; }
.col-principal { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.col-sidebar   { display: flex; flex-direction: column; gap: 13px; position: sticky; top: 16px; align-self: start; }

.biz-name-lg { font-family: var(--font-display); font-size: 30px; font-weight: 600; margin-bottom: 10px; line-height: 1.15; letter-spacing: -.4px; }
.rating-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.trend { font-size: 11px; background: var(--green-bg); color: var(--green); padding: 2px 9px; border-radius: 20px; font-weight: 600; }

/* BLUF */
.bluf { background: var(--surface2); border-left: 3px solid var(--red); border-radius: 0 var(--radius) var(--radius) 0; padding: 13px 16px; margin-bottom: 14px; font-size: 14px; line-height: 1.65; color: var(--text2); }
.bluf strong { color: var(--text); }

/* Quick facts */
.qf { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.qf-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 4px 11px; color: var(--text2); white-space: nowrap; }
.qf-item .open { color: var(--green); font-weight: 600; }

/* Info list */
.info-list { display: flex; flex-direction: column; gap: 8px; }
.info-row { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text2); }

/* Sidebar cards */
.claim-card, .feat-card, .ad-box { border-radius: var(--radius-md); padding: 16px; text-align: center; }
.claim-card { background: var(--surface); border: 1px solid var(--border); }
.claim-card.highlight { background: var(--accent-bg); border: 1px solid #E9C2A6; }
.claim-card.highlight strong { color: #9A3D11; }
.claim-card strong { display: block; font-family: var(--font-display); font-size: 15px; margin-bottom: 5px; }
.claim-card p { font-size: 12px; color: var(--text2); margin-bottom: 12px; line-height: 1.5; }
.feat-card { background: #FAEEDA; border: 1px solid #FAC775; }
.feat-card strong { display: block; font-size: 14px; color: #633806; margin-bottom: 5px; }
.feat-card p { font-size: 12px; color: #854F0B; margin-bottom: 12px; line-height: 1.5; }
.ad-box { background: var(--surface2); border: 1px dashed var(--border2); font-size: 11px; color: var(--text3); }
.ad-box a { color: var(--text2); text-decoration: underline; }

/* Panel "¿Eres el propietario?" reforzado (D15) */
.claim-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #9A3D11; margin-bottom: 6px; }
.claim-social { font-size: 11px; color: var(--text3); margin-top: 9px; line-height: 1.4; }

/* Enlace "Sugerir cambios" (D16) */
.sugerir-link { display: block; text-align: center; font-size: 12px; color: var(--text3); padding: 10px; margin-top: 4px; text-decoration: none; }
.sugerir-link:hover { color: var(--text); text-decoration: underline; }

/* Botones de contacto del hero de la ficha (D13) */
.ficha-contacto { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fc-btn { display: inline-flex; align-items: center; gap: 4px; padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border2); border-radius: 10px; transition: background .12s, border-color .12s; }
.fc-btn:hover { background: var(--accent-bg); border-color: var(--accent); }
.fc-wa { color: #fff; background: #25D366; border-color: #25D366; }
.fc-wa:hover { background: #1ebe5b; border-color: #1ebe5b; }

/* Botones bajo el mapa: Vista de calle + Cómo llegar (D17) */
.mapa-acciones { display: flex; gap: 8px; margin-top: 10px; }
.mapa-acciones .ma-btn { flex: 1; text-align: center; font-size: 13px; font-weight: 600; padding: 9px 8px; border-radius: 9px; border: 1px solid var(--border2); color: var(--text2); }
.mapa-acciones .ma-btn:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--text); }
.mapa-acciones .ma-prim { background: var(--accent); border-color: var(--accent); color: #fff; }
.mapa-acciones .ma-prim:hover { background: var(--accent-hover); color: #fff; }

/* Caja "deja tu opinión" (D19) y fallback sin reseñas (D18) */
.valora-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text3); }
.sin-reviews { text-align: center; padding: 8px 0 4px; }
.sin-reviews p { font-size: 13px; color: var(--text3); margin-bottom: 12px; }

/* Barra de contacto fija (solo móvil) — D14 */
.ficha-sticky { display: none; }
@media (max-width: 720px) {
  .ficha-sticky {
    display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); background: var(--surface);
    border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(0,0,0,.10);
  }
  .ficha-sticky .fs-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 13px; font-size: 15px; font-weight: 700; border-radius: 12px; }
  .fs-call { background: #25D366; color: #fff; }
  .fs-wa { background: #128C7E; color: #fff; }
  /* Si solo hay uno, que ocupe todo el ancho (flex:1 ya lo hace). */
  /* Deja hueco al final del contenido para que la barra no tape el footer. */
  .ficha-wrap { padding-bottom: 76px; }
  /* En móvil, WhatsApp ya está en la barra sticky de abajo: ocultarlo del
     popup del mapa para no duplicarlo. (El popup de los listados también lo
     pierde aquí, lo cual está bien: ahí hay WhatsApp en cada card.) */
  .mapa-pop-acc a.wa { display: none; }
}

/* Overlay de Vista de Calle dentro de la web (D17) */
/* Overlay de Vista de Calle dentro de la web (D17).
   IMPORTANTE: respeta el atributo [hidden] (display:none) por defecto y, cuando
   se hace visible, mantiene pointer-events:none hasta que abre — si no, este
   overlay invisible con position:fixed inset:0 capturaria todos los clics de
   la pagina. */
.sv-overlay:not(.open) { pointer-events: none; }
.sv-overlay[hidden] { display: none !important; }
.sv-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.75); display: flex; flex-direction: column; opacity: 0; transition: opacity .2s ease; }
.sv-overlay.open { opacity: 1; pointer-events: auto; }
.sv-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #25D366; color: #fff; flex-shrink: 0; }
.sv-title { font-weight: 700; font-size: 14px; }
.sv-close { background: rgba(0,0,0,.25); border: 0; color: #fff; font-size: 18px; line-height: 1; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; }
.sv-overlay iframe { flex: 1; width: 100%; border: 0; }
.sv-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface); flex-shrink: 0; }
.sv-foot span { font-size: 13px; color: var(--text2); }
@media (min-width: 721px) {
  /* En escritorio, modal centrado en vez de pantalla completa. */
  .sv-overlay { padding: 4vh 4vw; }
  .sv-head { border-radius: 12px 12px 0 0; }
  .sv-foot { border-radius: 0 0 12px 12px; }
}

/* Score grid (sentiment) */
.score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 16px; }
.score-item { background: var(--surface2); border-radius: var(--radius); padding: 11px 13px; }
.score-label { font-size: 11px; color: var(--text2); margin-bottom: 5px; }
.score-bar-wrap { display: flex; align-items: center; gap: 9px; }
.score-bar { flex: 1; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; }
.score-fill { height: 100%; border-radius: 3px; background: var(--amber); }
.score-n { font-size: 13px; font-weight: 700; min-width: 26px; text-align: right; }

/* Pros/cons */
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.pc-title { font-size: 12px; font-weight: 700; margin-bottom: 9px; }
.pros .pc-title { color: var(--green); }
.cons .pc-title { color: #993C1D; }
.pc-item { font-size: 13px; color: var(--text2); display: flex; align-items: flex-start; gap: 7px; margin-bottom: 7px; line-height: 1.5; }
.pc-item::before { content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.pros .pc-item::before { background: var(--green); }
.cons .pc-item::before { background: #993C1D; }
.perfil-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.perfil-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; background: var(--purple-bg); color: var(--purple-text); padding: 4px 13px; border-radius: 20px; }

/* Citas de clientes */
.quote { border-left: 3px solid var(--amber); padding: 11px 15px; background: var(--surface2); border-radius: 0 var(--radius) var(--radius) 0; font-size: 13px; color: var(--text2); font-style: italic; line-height: 1.65; margin-bottom: 9px; }
.quote-author { font-size: 11px; color: var(--text3); font-style: normal; margin-top: 5px; }

/* Review cards */
.review-card { background: var(--surface2); border-radius: var(--radius); padding: 15px; margin-bottom: 11px; }
.rv-header { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 9px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.rv-name { font-size: 13px; font-weight: 700; }
.rv-stars { color: var(--amber); font-size: 12px; }
.rv-date { font-size: 11px; color: var(--text3); }
.rv-source { font-size: 11px; color: var(--text3); margin-top: 2px; }
.rv-text { font-size: 13px; color: var(--text2); line-height: 1.65; }
.rv-reply { margin-top: 11px; padding: 9px 13px; background: var(--surface); border-left: 2px solid var(--border2); border-radius: 0 var(--radius) var(--radius) 0; font-size: 12px; color: var(--text2); line-height: 1.5; }
.rv-reply strong { display: block; color: var(--text); font-size: 12px; margin-bottom: 3px; }

/* Rating distribution */
.reviews-big { display: grid; grid-template-columns: 120px 1fr; gap: 22px; margin-bottom: 18px; align-items: center; }
.reviews-score-big { text-align: center; }
.score-huge { font-size: 52px; font-weight: 700; line-height: 1; }
.score-huge-stars { color: var(--amber); font-size: 20px; margin: 5px 0; }
.score-huge-count { font-size: 12px; color: var(--text3); }
.dist-row { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; font-size: 12px; color: var(--text2); }
.dist-bar { flex: 1; height: 7px; background: var(--border); border-radius: 3px; overflow: hidden; }
.dist-fill { height: 100%; border-radius: 3px; background: var(--amber); }

/* Horario */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.hours-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.hour-row { display: flex; justify-content: space-between; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.hour-row:nth-last-child(-n+2) { border-bottom: none; }
.hour-day { color: var(--text2); }
.hour-time { font-size: 12px; }
.hour-row.today .hour-day { font-weight: 700; color: var(--text); }
.hour-row.closed-day .hour-time { color: #A32D2D; }

/* Mapa */
.map-ph { background: #E1F5EE; border-radius: var(--radius); height: 155px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: #0F6E56; font-size: 13px; border: 1px solid var(--border); margin-bottom: 11px; }
.map-ph .map-icon { font-size: 30px; opacity: .6; }

/* Servicios (about) */
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.svc-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); padding: 4px 0; }
.svc-item::before { content: '✓'; color: var(--green); font-weight: 700; }

/* Vídeos embebidos (ficha Premium) */
.videos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.video-embed { display: flex; flex-direction: column; gap: 6px; }
.video-embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: #000; }
.video-title { font-size: 13px; color: var(--text2); font-weight: 600; }

/* Negocios cercanos */
.nearby-item { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.nearby-item:last-child { border-bottom: none; }
.nearby-icon { width: 38px; height: 38px; border-radius: var(--radius); background: var(--blue-bg); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.nearby-name { font-size: 13px; font-weight: 700; }
.nearby-meta { font-size: 12px; color: var(--text2); }
.nearby-rating { font-size: 12px; color: var(--amber); flex-shrink: 0; }

/* Keywords */
.tag { display: inline-block; font-size: 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 3px 11px; color: var(--text2); margin: 2px; }
.tag .tag-cnt { color: var(--text3); }

/* Perfil cliente + sección genérica subtítulo */
.subsection-label { font-size: 12px; font-weight: 700; color: var(--text2); margin-bottom: 9px; }

/* === FOOTER === */
.footer { background: var(--surface); border-top: 1px solid var(--border); padding: 18px 24px; text-align: center; font-size: 12px; color: var(--text3); margin-top: 24px; }
.footer a { color: var(--text3); }
.footer a:hover { color: var(--text); }

/* === RESPONSIVE === */
@media (max-width: 720px) {
  .topbar { padding: 11px 16px; flex-wrap: wrap; }
  .nav-toggle { display: block; }
  .topbar-nav { display: none; flex-basis: 100%; flex-direction: column; gap: 0; margin-top: 8px; }
  .topbar-nav.open { display: flex; }
  .topbar-nav a { padding: 11px 4px; border-top: 1px solid var(--border); font-size: 15px; }
  .search-bar { padding: 10px 16px; }
  .search-loc { display: none; }
  .breadcrumb { padding: 8px 16px; }
  .listado-main { grid-template-columns: 1fr; padding: 14px 16px; }
  .listado-sidebar { display: none; }
  /* Evita que las insignias (Patrocinado, Verificado, Nuevo) se salgan de la
     tarjeta en pantallas estrechas: nombre arriba, insignias debajo y con wrap. */
  .biz-card { grid-template-columns: 80px 1fr; }
  .biz-top { flex-direction: column; align-items: flex-start; gap: 5px; }
  .biz-badges { flex-wrap: wrap; }
  .ficha-wrap { padding: 16px; }
  /* En movil el contenido del negocio va PRIMERO; la sidebar queda al final. */
  /* Utilidades para mover bloques entre PC y movil sin duplicar logica. */
  .ocultar-en-movil { display: none !important; }
}
@media (min-width: 721px) {
  .solo-movil { display: none !important; }
}
@media (max-width: 720px) {
  /* Reorden de la ficha en móvil:
     1) foto + logo, 2) datos del negocio, 3) mapa, 4) resto (cards),
     y la sidebar (propietario/planes/publi) al final del todo.
     Truco: .ficha-wrap pasa a flex column; los wrappers bloque-foto-mapa,
     bloque-contenido y col-principal usan display:contents para que sus
     hijos participen directamente como flex items y poder reordenarlos. */
  .ficha-wrap { display: flex; flex-direction: column; }
  .bloque-foto-mapa, .bloque-contenido, .col-principal { display: contents; }
  .ficha-wrap > * { order: 10; }   /* cards intermedias en orden natural */
  .gal-col       { order: 1; margin-bottom: 0; }
  .gal-col.con-logo { margin-bottom: 28px; }   /* hueco bajo el logo superpuesto */
  .info-hero     { order: 2; }
  .mapa-col      { order: 3; }
  /* Sidebar (claim + planes + publi) en móvil: justo después del mapa,
     antes del resto de cards. Así el "Multiplica tu visibilidad" queda
     en una posición visible sin tener que hacer scroll hasta el fondo. */
  .col-sidebar   { order: 4; position: static; }
  /* Todas las cards (descripción, sentimiento, horario, opiniones,
     servicios, etiquetas, FAQs, cercanos, publi…) van DESPUÉS de la
     sidebar. Si no les ponemos order explícito, su valor por defecto
     es 0 y aparecerían ANTES que gal-col/info-hero/mapa-col/sidebar. */
  .col-principal > * { order: 5; margin-bottom: 14px; }
  .col-principal > .info-hero { order: 2; }   /* la cabecera del negocio se queda arriba */

  /* Foto principal: más alta en móvil (16:10) que en desktop (5:2). */
  .gal-principal { aspect-ratio: 16/10; }
  /* Thumbs ocultos en móvil (el botón "Ver N fotos" abre el lightbox). */
  .gal-thumbs { display: none; }
  /* Logo más pequeño, abajo-centro, superpuesto a la foto. */
  .logo-circulo {
    top: auto; right: auto;
    bottom: -22px; left: 50%; transform: translateX(-50%);
    width: 64px; height: 64px; border-width: 3px;
  }
  .logo-iniciales { font-size: 22px; }
  .mapa-col .map-ph { min-height: 320px; }   /* alto para que el popup del marcador quepa entero */
  .mapa-col { margin-bottom: 14px; }          /* separa los botones del bloque siguiente */

  .grid2 { grid-template-columns: 1fr; }
  .score-grid { grid-template-columns: 1fr; }
  .pros-cons { grid-template-columns: 1fr; }
  .hours-grid { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .reviews-big { grid-template-columns: 1fr; }
}

/* ===================================================
   HOME / LANDING
=================================================== */
.home-hero { background: var(--ink); color: #fff; padding: 76px 24px 88px; text-align: center; position: relative; overflow: hidden; }
.home-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 900px 480px at 50% 112%, rgba(194,82,28,.32) 0%, transparent 70%); pointer-events: none; }
.home-hero > * { position: relative; z-index: 1; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 5px 14px; font-size: 11px; font-weight: 500; color: rgba(255,255,255,.72); letter-spacing: .6px; text-transform: uppercase; margin-bottom: 26px; }
.hero-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.home-hero h1 { font-family: var(--font-display); font-size: clamp(33px, 5vw, 54px); font-weight: 600; color: #fff; line-height: 1.12; letter-spacing: -1.2px; max-width: 760px; margin: 0 auto 16px; }
.home-hero h1 em { font-style: italic; color: #F0A165; }
.hero-sub { color: rgba(255,255,255,.6); font-size: 17px; max-width: 500px; margin: 0 auto 36px; }
.hero-search { display: flex; max-width: 560px; margin: 0 auto 22px; background: #fff; border-radius: 999px; padding: 6px 6px 6px 20px; box-shadow: 0 12px 36px rgba(0,0,0,.3); }
.hero-search input { flex: 1; border: none; outline: none; font-family: var(--font-body); font-size: 15px; color: var(--text); background: transparent; }
.hero-search input::placeholder { color: var(--text3); }
.hero-search button { background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 11px 26px; font-family: var(--font-body); font-size: 14px; font-weight: 600; white-space: nowrap; }
.hero-search button:hover { background: var(--accent-hover); }
.hero-suggests { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 auto 40px; }
.hero-suggests a { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.88); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 500; transition: background .15s, border-color .15s; }
.hero-suggests a:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); color: #fff; }
.hero-suggests a .chip-icon { font-size: 15px; line-height: 1; }
.hero-stats { display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; }
.hero-stat strong { display: block; font-family: var(--font-display); font-size: 27px; font-weight: 600; color: #fff; }
.hero-stat span { font-size: 11px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .6px; }
.stat-sep { width: 1px; height: 34px; background: rgba(255,255,255,.14); }

/* CTA discreto al dueño en el hero (mini-bloque de 2 líneas). */
.hero-owner-cta { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; margin: 32px auto 0; padding: 12px 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; text-align: center; transition: background .15s, border-color .15s; }
.hero-owner-cta:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.hero-owner-cta-title { font-size: 14px; font-weight: 600; color: #fff; }
.hero-owner-cta-sub { font-size: 12px; color: rgba(255,255,255,.65); }

/* Secciones home */
.home-section { max-width: 1200px; margin: 0 auto; padding: 64px 24px; }
.home-section.alt { max-width: none; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.home-section.alt .home-section-inner { max-width: 1200px; margin: 0 auto; }
.section-head { margin-bottom: 32px; }
.section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent); margin-bottom: 8px; }
.section-title { font-family: var(--font-display); font-size: clamp(23px, 3vw, 31px); font-weight: 600; letter-spacing: -.5px; color: var(--text); }
.section-title em { font-style: italic; color: var(--accent); }
.section-link { font-size: 14px; font-weight: 500; color: var(--accent); white-space: nowrap; }
.section-link:hover { text-decoration: underline; }

/* Categorías (cuadrícula) */
.cats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 16px; }
.cat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 12px); padding: 20px 16px; display: flex; flex-direction: column; gap: 10px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.cat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.07); border-color: var(--accent); }
.cat-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 21px; background: var(--accent-bg); }
.cat-name { font-weight: 600; font-size: 14px; color: var(--text); line-height: 1.3; }
.cat-count { font-size: 12px; color: var(--text3); }

/* Tarjetas destacadas (verticales, home) */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.feat-listing { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: transform .15s, box-shadow .15s; }
.feat-listing:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.09); }
.feat-img { height: 168px; background: var(--surface2); position: relative; overflow: hidden; }
.feat-img img { width: 100%; height: 100%; object-fit: cover; }
.feat-img .badge { position: absolute; top: 12px; left: 12px; }
.feat-content { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.feat-name { font-weight: 600; font-size: 15px; color: var(--text); line-height: 1.3; }
.feat-foot { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text3); }

/* Provincias (pastillas) */
.prov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.prov-pill { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 12px); padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; transition: border-color .15s, box-shadow .15s; }
.prov-pill:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.prov-name { font-size: 14px; font-weight: 500; color: var(--text); }
.prov-count { font-size: 12px; color: var(--text3); background: var(--surface2); border-radius: 999px; padding: 1px 9px; }

/* ===================================================
   CTA DUEÑOS DE NEGOCIO (conversión)
=================================================== */
.owner-cta { background: var(--ink); color: #fff; border-radius: var(--radius-lg); padding: 40px 32px; text-align: center; position: relative; overflow: hidden; }
.owner-cta.full { border-radius: 0; padding: 72px 24px; }
.owner-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 700px 360px at 50% 120%, rgba(194,82,28,.3) 0%, transparent 70%); pointer-events: none; }
.owner-cta > * { position: relative; z-index: 1; }
.owner-cta .cta-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.45); margin-bottom: 16px; }
.owner-cta h2 { font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 38px); font-weight: 600; color: #fff; line-height: 1.18; margin: 0 auto 14px; max-width: 580px; letter-spacing: -.6px; }
.owner-cta h2 em { font-style: italic; color: #F0A165; }
.owner-cta p { color: rgba(255,255,255,.6); font-size: 15px; max-width: 520px; margin: 0 auto 28px; }
.owner-cta .cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-cta { background: var(--accent); color: #fff; padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 15px; display: inline-block; transition: background .15s, transform .1s; }
.btn-cta:hover { background: var(--accent-hover); transform: translateY(-1px); color: #fff; }
.btn-cta-ghost { background: transparent; color: rgba(255,255,255,.8); padding: 13px 26px; border-radius: 999px; font-weight: 500; font-size: 15px; border: 1px solid rgba(255,255,255,.22); display: inline-block; }
.btn-cta-ghost:hover { border-color: rgba(255,255,255,.5); color: #fff; }
.cta-feats { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; }
.cta-feat { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.45); }
.cta-feat::before { content: '✓'; color: #6EE7B7; font-weight: 700; }
/* Variante compacta para insertar dentro de páginas de listado/ficha */
.owner-cta.compact { padding: 30px 26px; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; margin: 28px 0; }
.owner-cta.compact h2 { font-size: 22px; margin: 0 0 6px; text-align: left; }
.owner-cta.compact p { margin: 0; text-align: left; font-size: 14px; }
.owner-cta.compact .cta-buttons { justify-content: flex-start; flex-shrink: 0; }

@media (max-width: 720px) {
  .home-hero { padding: 52px 18px 64px; }
  .hero-search { flex-direction: column; border-radius: 16px; padding: 8px; }
  .hero-search input { padding: 9px 12px; }
  .hero-search button { border-radius: 10px; }
  .stat-sep { display: none; }
  .hero-stats { gap: 20px; }
  .home-section { padding: 48px 18px; }
  .owner-cta.compact { flex-direction: column; align-items: flex-start; }
}

/* === ANUNCIOS · contenedor del anuncio servido (AdSense / HTML / imagen) ===
   Los placeholders "house" (.ad-banner, .ad-sidebar, .ad-box) ya tienen estilo
   más arriba. Esto da forma al hueco cuando SÍ hay un anuncio real. */
.ad-slot { margin: 24px 0; text-align: center; overflow: hidden; line-height: 0; }
.ad-slot img, .ad-slot ins { max-width: 100%; height: auto; }
.ad-slot-sidebar { margin: 0 0 20px; }
.ad-slot-listado-inter { grid-column: 1 / -1; }

/* ===================================================
   Página /planes
   Tarjetas resumen + tabla comparativa + FAQ comercial.
   Prefijo .planes-* para no colisionar con nada.
=================================================== */
.planes-wrap { max-width: 960px; margin: 0 auto; padding: 24px 24px 48px; }

.planes-hero { text-align: center; margin: 18px 0 22px; }
.planes-hero h1 { font-family: var(--font-display); font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -.5px; margin-bottom: 10px; }
.planes-sub { font-size: 15px; color: var(--text3); max-width: 560px; margin: 0 auto; line-height: 1.55; }

/* 3 tarjetas resumen — apiladas en móvil */
.planes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 24px 0 18px; align-items: stretch; }
.planes-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; display: flex; flex-direction: column; }
.planes-card--feat { border: 2px solid var(--amber); }
.planes-card--prem { border: 2px solid var(--accent); }
.planes-ribbon { position: absolute; top: -11px; right: 16px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .3px; }
.planes-ribbon--feat { background: var(--amber); color: #3D2200; }
.planes-ribbon--prem { background: var(--accent); color: #fff; }
.planes-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--text3); margin-bottom: 6px; }
.planes-eyebrow--feat { color: var(--amber); }
.planes-eyebrow--prem { color: var(--accent); }
.planes-price { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1.1; margin-bottom: 6px; }
.planes-price span { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--text3); }
.planes-pitch { font-size: 13px; color: var(--text2); line-height: 1.5; margin: 6px 0 16px; flex: 1; }

/* Sección de la tabla */
.planes-tabla-wrap { margin-top: 32px; }
.planes-h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 14px; letter-spacing: -.3px; }
.planes-tabla { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.planes-tabla th, .planes-tabla td { padding: 12px 14px; font-size: 13px; line-height: 1.45; text-align: left; border-bottom: 1px solid var(--border); color: var(--text2); vertical-align: top; }
.planes-tabla tbody tr:last-child th, .planes-tabla tbody tr:last-child td { border-bottom: 0; }
.planes-tabla thead th { background: var(--surface2); font-weight: 700; color: var(--text); }
.planes-tabla thead th.th-feat { background: #FAEEDA; color: #633806; }
.planes-tabla thead th.th-prem { background: var(--accent-bg); color: #9A3D11; }
.planes-tabla tbody th[scope="row"] { background: var(--surface2); font-weight: 600; color: var(--text); width: 28%; }
.planes-v { color: var(--green); font-weight: 700; }
.planes-x { color: var(--text3); opacity: .6; font-weight: 700; }

/* CTAs finales tras la tabla */
.planes-ctas-final { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 32px 0 40px; }

/* FAQ — usa <details>/<summary> nativos, sin JS */
.planes-faq { margin-top: 16px; }
.planes-faq-item { border-bottom: 1px solid var(--border); padding: 14px 0; }
.planes-faq-item:last-of-type { border-bottom: 0; }
.planes-faq-item summary { font-weight: 600; cursor: pointer; color: var(--text); list-style: none; padding-right: 24px; position: relative; font-size: 14.5px; }
.planes-faq-item summary::-webkit-details-marker { display: none; }
.planes-faq-item summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 22px; line-height: 1; color: var(--text3); font-weight: 400; }
.planes-faq-item[open] summary::after { content: '−'; }
.planes-faq-item p { color: var(--text2); margin-top: 10px; font-size: 14px; line-height: 1.65; }

/* Caja contacto */
.planes-contacto { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; text-align: center; margin-top: 28px; }
.planes-contacto p { font-size: 13px; color: var(--text2); margin: 0; }
.planes-contacto a { color: var(--accent); font-weight: 600; }

/* Responsive móvil */
@media (max-width: 720px) {
  .planes-wrap { padding: 18px 16px 36px; }
  .planes-hero h1 { font-size: 26px; }
  .planes-grid { grid-template-columns: 1fr; gap: 14px; }
  /* Tabla compacta: misma estructura, font y padding reducidos para que entre */
  .planes-tabla th, .planes-tabla td { padding: 8px 6px; font-size: 11.5px; word-break: break-word; }
  .planes-tabla tbody th[scope="row"] { width: 32%; }
  .planes-ctas-final { flex-direction: column; align-items: stretch; }
  /* "Cómo funciona": 3 pasos pasan a 1 columna en móvil */
  .planes-pasos-grid { grid-template-columns: 1fr; gap: 10px; }
  /* Garantías más compactas */
  .planes-garantias { gap: 8px 14px; font-size: 12px; }
  /* Banner FOMO: el precio tachado se ve mejor con un poco menos de tamaño */
  .planes-banner-fomo strong { font-size: 15px; }
}

/* ===================================================
   Banner FOMO + Modal de lista de espera (pre-lanzamiento)
   Visible en /planes y /mi-negocio (mientras Stripe live no esté activo).
=================================================== */
.planes-banner-fomo {
  background: linear-gradient(135deg, var(--accent-bg), #FFF5E5);
  border: 1px solid #E9C2A6;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 4px;
  text-align: center;
}
.planes-banner-eyebrow { font-size: 11px; font-weight: 700; color: #9A3D11; letter-spacing: .5px; text-transform: uppercase; }
.planes-banner-fomo strong { font-family: var(--font-display); font-size: 17px; color: var(--text); }
.planes-banner-tachado { color: var(--text3); text-decoration: line-through; font-weight: 500; opacity: .7; margin-right: 2px; }
.planes-banner-fine { font-size: 12px; color: var(--text2); line-height: 1.5; }

/* Tarjetas resumen: precio tachado encima + cuanto se ahorra debajo */
.planes-precio-antes { font-size: 12px; color: var(--text3); margin-bottom: 2px; }
.planes-precio-antes s { color: var(--text3); }
.planes-ahorro { display: inline-block; background: #EAF3DE; color: #27500A; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 12px; margin-bottom: 10px; }

/* Sección "Cómo funciona" — 3 pasos con número grande */
.planes-pasos { margin-top: 36px; }
.planes-pasos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 14px; }
.planes-paso { background: var(--surface2); border-radius: var(--radius-md); padding: 18px 16px; text-align: center; }
.planes-paso-num { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-display); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.planes-paso strong { display: block; font-family: var(--font-display); font-size: 15px; margin-bottom: 6px; color: var(--text); }
.planes-paso p { font-size: 12.5px; color: var(--text2); line-height: 1.5; margin: 0; }

/* Garantías bajo los CTAs finales */
.planes-garantias { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px; margin: -16px 0 36px; font-size: 13px; color: var(--text2); font-weight: 600; }

/* === Editor del cliente (cliente_editar.html) === */
.ce-section { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 22px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.ce-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ce-grid2 > div { margin-bottom: 0; }
.ce-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--text2); }
.ce-label .ce-opt { font-weight: 400; color: var(--text3); font-size: 12px; }
.ce-input { width: 100%; padding: 10px 12px; border: 1px solid var(--border2); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--surface); color: var(--text); margin-top: 0; }
.ce-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.ce-input-off { background: var(--surface2); color: var(--text3); cursor: not-allowed; }
.ce-help { font-size: 11.5px; color: var(--text3); margin-top: 4px; line-height: 1.45; }
@media (max-width: 720px) { .ce-grid2 { grid-template-columns: 1fr; } }

/* Horario de apertura editable */
.ce-horario { display: flex; flex-direction: column; gap: 8px; }
.ce-hor-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.ce-hor-dia { width: 90px; font-weight: 600; font-size: 13px; text-transform: capitalize; }
.ce-hor-cerrado { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text2); cursor: pointer; }
.ce-hor-turnos { display: flex; gap: 14px; flex-wrap: wrap; flex: 1; }
.ce-hor-turno { display: flex; align-items: center; gap: 6px; }
.ce-hor-time { width: auto; padding: 6px 8px; font-size: 13px; }
.ce-hor-sep { color: var(--text3); }
@media (max-width: 560px) {
  .ce-hor-fila { flex-direction: column; align-items: flex-start; }
  .ce-hor-dia { width: auto; }
  .ce-hor-turnos { width: 100%; }
}

/* Foto principal */
.ce-foto-bloque { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.ce-foto-preview { width: 200px; height: 150px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface2); flex-shrink: 0; }
.ce-foto-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ce-foto-vacia { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text3); font-size: 28px; }
.ce-foto-vacia span { font-size: 12px; }
.ce-foto-form { flex: 1; min-width: 240px; }
@media (max-width: 560px) { .ce-foto-preview { width: 100%; height: 200px; } }

/* Galería del cliente */
.ce-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ce-gal-item { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface2); aspect-ratio: 4 / 3; }
.ce-gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ce-gal-acciones { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.ce-gal-acciones form { margin: 0; }
.ce-gal-acciones button { width: 28px; height: 28px; border: 0; border-radius: 6px; background: rgba(0,0,0,.62); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.ce-gal-acciones button:hover { background: rgba(0,0,0,.82); }
.ce-gal-acciones button:disabled { opacity: .35; cursor: default; }
.ce-gal-acciones .ce-gal-x { background: rgba(180,30,16,.85); }
.ce-gal-acciones .ce-gal-x:hover { background: rgba(180,30,16,1); }

/* Servicios (checkboxes por grupo) */
.ce-svc-grupos { display: flex; flex-direction: column; gap: 14px; }
.ce-svc-grupo-nombre { font-size: 13px; font-weight: 700; color: var(--text2); margin-bottom: 6px; }
.ce-svc-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.ce-svc-opt { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text2); cursor: pointer; }

/* Desplegable con las ventajas comunes a todos los planes */
.planes-comunes { margin-top: 16px; background: var(--surface2); border-radius: var(--radius-md); padding: 12px 18px; border: 1px solid var(--border); }
.planes-comunes summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text2); padding: 4px 0; list-style: none; position: relative; padding-right: 24px; }
.planes-comunes summary::-webkit-details-marker { display: none; }
.planes-comunes summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-55%); font-size: 20px; color: var(--text3); font-weight: 400; }
.planes-comunes[open] summary::after { content: '−'; }
.planes-comunes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; padding-top: 12px; }
.planes-comunes-grid > div { font-size: 13px; color: var(--text2); padding: 4px 0; }
@media (max-width: 720px) { .planes-comunes-grid { grid-template-columns: 1fr; } }

/* Modal */
.le-overlay { position: fixed; inset: 0; z-index: 2200; background: rgba(20,15,10,.62); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s ease; padding: 20px; }
.le-overlay[hidden] { display: none !important; }
.le-overlay:not(.open) { pointer-events: none; }
.le-overlay.open { opacity: 1; pointer-events: auto; }
.le-modal { background: var(--surface); border-radius: 14px; max-width: 440px; width: 100%; padding: 26px 28px 22px; position: relative; max-height: 92vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.le-cerrar { position: absolute; top: 12px; right: 12px; background: transparent; border: 0; font-size: 22px; color: var(--text3); cursor: pointer; width: 34px; height: 34px; border-radius: 50%; }
.le-cerrar:hover { background: var(--surface2); color: var(--text); }
.le-eyebrow { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 4px; }
.le-titulo { font-family: var(--font-display); font-size: 24px; font-weight: 600; margin: 0 0 8px; line-height: 1.2; letter-spacing: -.3px; }
.le-sub { font-size: 13.5px; color: var(--text2); line-height: 1.55; margin-bottom: 18px; }
.le-sub strong { color: var(--accent); }
.le-form { display: flex; flex-direction: column; gap: 4px; }
.le-label { font-size: 12px; font-weight: 600; color: var(--text2); margin-top: 10px; }
.le-label .le-opt { font-weight: 400; color: var(--text3); }
.le-form input[type="email"], .le-form input[type="tel"], .le-form input[type="text"] {
  border: 1px solid var(--border2); border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; color: var(--text); background: var(--surface); margin-top: 4px;
}
.le-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.le-submit { margin-top: 18px; }
.le-fineprint { font-size: 11.5px; color: var(--text3); margin-top: 12px; text-align: center; line-height: 1.5; }
.le-fineprint strong { color: var(--text2); }
.le-ok { text-align: center; padding: 8px 0 4px; }
.le-ok-icon { font-size: 48px; margin-bottom: 6px; }
.le-ok h3 { font-family: var(--font-display); font-size: 22px; margin-bottom: 8px; }
.le-ok p { font-size: 13.5px; color: var(--text2); line-height: 1.55; margin-bottom: 16px; }