/* ===========================================================================
   Aspecto visual de ARACENA — según los mockups (directorios/aracena/mockups/).
   Se carga SOLO en Aracena (app/main.py → NICHE_CSS), DESPUÉS del CSS base y del
   tema de color. Juguetes no tiene este archivo → queda intacto.

   Sobrescribe: tipografía (sans, no serif), color de los títulos (verde Sierra) y
   tamaños de los títulos de sección. El ancho del contenido ya es 1200px en el
   CSS base, igual que el mockup.
   =========================================================================== */

/* 1) Tipografía: los mockups usan fuente de SISTEMA (sans limpia), no la serif
   Fraunces de juguetes. Afecta a títulos (font-display) y texto (font-body). */
:root {
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Paleta del mockup (la piel verde ya define --accent/--accent-hover/--accent-bg). */
  --jamon: #9c3a33;
  --crema: #faf6ee;
  --oro:   #c8a24a;
}

/* 2) Títulos en VERDE Sierra (como el mockup), los que van sobre fondo claro.
   Los de fondo oscuro (héroe, CTA dueño) se dejan como están (blancos). */
.biz-name-lg,
.card-title,
.cercanos-title,
.section-title,
.loc-title,
.sidebar-title,
.seo-block h2 {
  color: var(--accent-hover);
}

/* 3) Títulos de sección al tamaño del mockup (h2 ~1.3rem ≈ 20-21px; el base 15px). */
.card-title {
  font-size: 20px;
  letter-spacing: -.2px;
}

/* 4) TAMAÑO BASE y AIRE como el mockup: 16px (el motor usaba 14px) + line-height 1.55. */
body {
  font-size: 16px;
  line-height: 1.55;
}

/* 5) ANCHO / gutters como el mockup (.wrap = max-width 1200px, padding lateral 18px;
   el motor usaba 24px → se veía más estrecho por dentro). Solo el lateral; el
   espaciado vertical de cada zona se respeta. */
.ficha-wrap,
.listado-main,
.home-section,
.home-section-inner,
.main,
.search-inner {
  padding-left: 18px;
  padding-right: 18px;
}

/* 5) Footer OSCURO como el mockup (era claro). */
.footer {
  background: #1c1c1c;
  color: #bdbdbd;
  border-top: none;
  padding: 26px 24px;
  font-size: 13px;
  margin-top: 28px;
}
.footer a       { color: #dcdcdc; }
.footer a:hover { color: #fff; }

/* 6) Logo de la cabecera: verde Sierra y sin serif (como el mockup). */
.logo,
.logo span { color: var(--accent); }

/* 7) Tarjetas un pelín más redondeadas y separadas (aire del mockup). */
.card { border-radius: 12px; }

/* ====================== CABECERA (esqueleto aracena/base.html) ============== */
.ar-top { background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; }
.ar-top-inner { max-width:1200px; margin:0 auto; padding:0 18px; height:64px; display:flex; align-items:center; gap:18px; position:relative; }
.ar-logo { font-weight:800; font-size:20px; color:var(--accent); line-height:1.05; white-space:nowrap; text-decoration:none; }
.ar-logo .sub { display:block; font-size:9px; font-weight:600; color:var(--text3); letter-spacing:.08em; margin-top:2px; }
.ar-search { flex:1; display:flex; max-width:560px; }
.ar-search input { flex:1; padding:9px 13px; border:1px solid var(--border2); border-radius:8px 0 0 8px; font-size:14px; outline:none; background:#fff; color:var(--text); }
.ar-search input:focus { border-color:var(--accent); }
.ar-search button { background:var(--accent); color:#fff; border:0; padding:0 18px; border-radius:0 8px 8px 0; font-weight:700; cursor:pointer; font-size:14px; }
.ar-search button:hover { background:var(--accent-hover); }
.ar-nav { display:flex; align-items:center; gap:18px; font-size:14px; font-weight:600; }
.ar-nav a { color:var(--text2); text-decoration:none; }
.ar-nav a:hover { color:var(--accent); }
.ar-nav-cta { background:var(--accent); color:#fff !important; padding:8px 15px; border-radius:999px; }
.ar-nav-cta:hover { background:var(--accent-hover); }
.ar-nav-toggle { display:none; background:transparent; border:0; font-size:22px; line-height:1; color:var(--text); cursor:pointer; }
@media (max-width:860px) {
  .ar-nav-toggle { display:block; }
  .ar-logo .sub { display:none; }
  .ar-nav { display:none; position:absolute; top:64px; left:0; right:0; background:#fff; border-bottom:1px solid var(--border); flex-direction:column; align-items:flex-start; padding:12px 18px; gap:13px; z-index:101; }
  .ar-nav.open { display:flex; }
}

/* ====================== FOOTER OSCURO (esqueleto) ========================== */
.ar-footer { background:#1c1c1c; color:#bdbdbd; padding:30px 0; margin-top:32px; font-size:13px; line-height:1.7; }
.ar-footer-inner { max-width:1200px; margin:0 auto; padding:0 18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:22px; }
.ar-footer a { color:#dcdcdc; text-decoration:none; }
.ar-footer a:hover { color:#fff; }
.ar-footer-brand strong { color:#fff; }

/* ====================== HOME (calco del mockup home.html) ================== */
/* Paleta del mockup (verde Sierra, jamón, crema, oro). Scoped a .ar-home-* para
   no chocar con el motor. */
.ar-home-wrap { max-width:1200px; margin:0 auto; padding:0 18px; }

/* Héroe: como no hay foto aún, degradado verde a sangre. */
.ar-home-hero {
  background: linear-gradient(135deg, #1f4d39 0%, #2e6b4f 100%);
  color:#fff; padding:64px 0 72px; text-align:center;
}
.ar-home-hero h1 { font-size:2.5rem; line-height:1.15; margin-bottom:10px; color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.25); }
.ar-home-hero h1 em { font-style:normal; color:#f0d9a0; }
.ar-home-hero-sub { font-size:1.15rem; opacity:.95; margin:0 auto 26px; max-width:760px; }
.ar-home-buscador {
  background:#fff; border-radius:12px; display:flex; max-width:640px; margin:0 auto;
  box-shadow:0 12px 40px rgba(0,0,0,.25); overflow:hidden;
}
.ar-home-buscador input { flex:1; border:0; padding:16px 18px; font-size:1.05rem; border-radius:12px 0 0 12px; outline:none; color:var(--text); }
.ar-home-buscador button { background:#9c3a33; color:#fff; border:0; padding:0 26px; font-weight:800; font-size:1.05rem; cursor:pointer; }
.ar-home-buscador button:hover { background:#86322c; }
.ar-home-chips { margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.ar-home-chips a {
  background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.35);
  padding:6px 13px; border-radius:20px; font-size:.85rem; text-decoration:none;
}
.ar-home-chips a:hover { background:rgba(255,255,255,.28); }

/* Bloque de anuncio (fallback). */
.ar-home-ad {
  background:repeating-linear-gradient(45deg,#f4f0e8,#f4f0e8 10px,#efeae0 10px,#efeae0 20px);
  border:1px dashed #cdbfa6; border-radius:8px; color:#9a8a6a; text-align:center;
  font-size:.78rem; padding:14px; margin:26px 0; font-weight:600; letter-spacing:.03em;
}
.ar-home-ad-leader { height:96px; display:flex; align-items:center; justify-content:center; }
.ar-home-ad-feed   { min-height:120px; display:flex; align-items:center; justify-content:center; }

/* Secciones. */
.ar-home-sec { padding:34px 0; }
.ar-home-sec-h { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; gap:14px; }
.ar-home-sec-h h2 { font-size:1.5rem; color:#1f4d39; }
.ar-home-sec-h a { font-size:.9rem; font-weight:700; color:#2e6b4f; text-decoration:none; }
.ar-home-sec-h a:hover { text-decoration:underline; }

/* Familias (rejilla de 3). */
.ar-home-familias { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ar-home-fam {
  display:flex; align-items:center; gap:14px; border:1px solid var(--border);
  border-radius:12px; padding:16px; background:#faf6ee; transition:.15s; text-decoration:none;
}
.ar-home-fam:hover { border-color:#2e6b4f; transform:translateY(-2px); }
.ar-home-fam .ic { font-size:1.8rem; }
.ar-home-fam b { display:block; color:#1f4d39; font-size:1.05rem; }
.ar-home-fam span span,
.ar-home-fam > span > span { font-size:.82rem; color:var(--text3); }

/* Tarjetas destacadas (Imprescindibles). */
.ar-home-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ar-home-card { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; transition:.15s; text-decoration:none; display:block; }
.ar-home-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.1); transform:translateY(-2px); }
.ar-home-card .ph { height:130px; background:#dfe7e1 center/cover no-repeat; position:relative; }
.ar-home-card .badge { position:absolute; top:8px; left:8px; background:#9c3a33; color:#fff; font-size:.7rem; font-weight:700; padding:3px 8px; border-radius:6px; }
.ar-home-card .b { padding:12px; }
.ar-home-card h3 { font-size:1rem; margin-bottom:3px; color:var(--text); }
.ar-home-card .meta { font-size:.8rem; color:var(--text3); }
.ar-home-card .rate { color:#c8a24a; font-weight:700; font-size:.85rem; margin-top:4px; }

/* Por pueblos (chips con conteo). */
.ar-home-pueblos { display:flex; flex-wrap:wrap; gap:8px; }
.ar-home-pueblos a { border:1px solid var(--border); border-radius:8px; padding:8px 13px; font-size:.9rem; background:#fff; color:var(--text); text-decoration:none; }
.ar-home-pueblos a:hover { border-color:#2e6b4f; }
.ar-home-pueblos a b { color:#2e6b4f; font-weight:700; }

/* CTA dueño (verde oscuro). */
.ar-home-duenyo { background:#1f4d39; color:#fff; border-radius:14px; padding:28px; text-align:center; margin:30px 0; }
.ar-home-duenyo h2 { font-size:1.4rem; margin-bottom:8px; color:#fff; }
.ar-home-duenyo h2 em { font-style:normal; color:#f0d9a0; }
.ar-home-duenyo p { opacity:.95; max-width:680px; margin:0 auto; }
.ar-home-duenyo a { display:inline-block; margin-top:14px; background:#c8a24a; color:#1f1f1f; font-weight:800; padding:12px 24px; border-radius:9px; text-decoration:none; }
.ar-home-duenyo a:hover { background:#b8923c; }

@media (max-width:820px) {
  .ar-home-familias { grid-template-columns:1fr; }
  .ar-home-cards { grid-template-columns:1fr 1fr; }
  .ar-home-hero h1 { font-size:1.8rem; }
}

/* ====================== FICHA (calco del mockup ficha.html) ================ */
/* El motor ya trae toda la estructura (galería+mapa, h1+sub, bluf, secciones,
   sidebar, "cercanos"). Aquí SOLO se reviste para que se vea como el mockup:
   h1 verde Sierra, caja BLUF con franja jamón sobre crema, h2 verde, tarjeta de
   contacto y "cercanos" con la paleta. No se mueve ni se quita contenido. */

/* H1 del negocio: 1.9rem verde oscuro (mockup), sans. */
.biz-name-lg { font-size:1.9rem; color:var(--accent-hover); letter-spacing:-.3px; }

/* Fila de rating bajo el h1: la nota en oro (mockup .rate). */
.rating-row .rating-n { color:var(--oro,#c8a24a); font-weight:800; }

/* BLUF: caja crema con franja jamón a la izquierda (mockup). */
.bluf {
  background:var(--crema,#faf6ee);
  border-left:4px solid var(--jamon,#9c3a33);
  border-radius:8px;
  padding:14px 16px;
  font-size:1.05rem;
  color:var(--text);
}

/* Títulos de sección (h2 de cada card): 1.3rem verde oscuro (mockup). */
.card-title { font-size:1.3rem; color:var(--accent-hover); }

/* Chip de categoría: tono verde de la piel, no azul. */
.badge-cat { background:var(--accent-bg); color:var(--accent-hover); }

/* Tamaño de letra del cuerpo editorial como el mockup (~16px, no 14px). */
.ficha-wrap .biz-description,
.ficha-wrap .biz-description p { font-size:16px; line-height:1.7; }
.ficha-wrap .rv-text { font-size:15px; line-height:1.6; }
.ficha-wrap .card { padding:18px 20px; }

/* La dirección ya va en la tarjeta de contacto lateral → se quita del cuerpo
   (estaba duplicada bajo el BLUF). #info-list solo contiene la dirección. */
.ficha-wrap .info-list { display:none; }

/* "Negocios cercanos" / "Más cosas que ver cerca": título verde. */
.cercanos-title { color:var(--accent-hover); font-family:var(--font-display); }
.ficha-wrap .nearby-name a { color:var(--accent-hover); }
.ficha-wrap .nearby-name a:hover { color:var(--accent); }

/* ── Tarjeta de CONTACTO en la barra lateral (ficha_aracena → mockup .side) ── */
.ar-side {
  border:1px solid var(--border); border-radius:12px; padding:18px; background:#fff;
}
.ar-side-plan {
  display:inline-block; background:var(--jamon); color:#fff; font-size:.72rem;
  font-weight:700; padding:3px 9px; border-radius:6px; margin-bottom:11px;
}
.ar-side-tel {
  display:block; background:var(--accent); color:#fff; text-align:center;
  font-weight:800; padding:13px; border-radius:9px; margin-bottom:9px; font-size:1.05rem;
}
.ar-side-tel:hover { background:var(--accent-hover); color:#fff; }
.ar-side-wa {
  display:block; background:#25d366; color:#fff; text-align:center; font-weight:700;
  padding:11px; border-radius:9px; margin-bottom:14px;
}
.ar-side-wa:hover { background:#1faa53; color:#fff; }
.ar-dato { display:flex; gap:9px; font-size:.9rem; padding:8px 0; border-top:1px solid var(--border); }
.ar-dato b { color:var(--accent-hover); min-width:68px; flex-shrink:0; }
/* El valor (dirección/web/email largos) ajusta dentro de la cajita, no se sale. */
.ar-dato span { min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.ar-dato a { overflow-wrap:anywhere; }
.ar-abierto { color:#1e8a4c; font-weight:700; }
.ar-cerrado { color:var(--jamon); font-weight:700; }
.ar-side-reclama {
  background:var(--crema); border:1px dashed var(--oro); border-radius:10px;
  padding:13px; margin-top:14px; font-size:.85rem; text-align:center;
}
.ar-side-reclama a { font-weight:700; }

/* ====================== LISTADO (calco del mockup listado.html) ============ */
/* Tarjeta propia de Aracena (aracena/partials/biz_card.html): fila horizontal con
   foto grande a la izquierda, nombre verde, nota en oro y botones de acción. */
.ar-row {
  display:grid; grid-template-columns:190px 1fr; gap:14px; background:#fff;
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  margin-bottom:14px; transition:box-shadow .15s, border-color .15s;
}
.ar-row:hover { box-shadow:0 6px 18px rgba(0,0,0,.09); }
.ar-row-dest { border-color:var(--accent); }
.ar-row-ph {
  position:relative; min-height:150px; background:#dde6e0 center/cover no-repeat;
  display:block;
}
.ar-row-ph img { width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }
.ar-row-ph.sin-foto::after { content:'🏪'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:34px; }
.ar-row-badge {
  position:absolute; top:8px; left:8px; background:var(--jamon); color:#fff;
  font-size:.68rem; font-weight:700; padding:3px 8px; border-radius:5px; z-index:1;
}
.ar-row-b { padding:13px 15px; min-width:0; }
.ar-row-name { font-size:1.12rem; margin:0 0 2px; line-height:1.25; }
.ar-row-name a { color:var(--accent-hover); }
.ar-row-name a:hover { color:var(--accent); }
.ar-row-meta { font-size:.82rem; color:var(--text3); margin-bottom:5px; }
.ar-row-rate { color:var(--oro); font-weight:700; font-size:.85rem; margin-bottom:7px; }
.ar-row-desc { font-size:.9rem; color:var(--text2); line-height:1.5; margin:0 0 11px; }
.ar-row-acc { display:flex; gap:8px; flex-wrap:wrap; }
.ar-row-acc a {
  font-size:.8rem; font-weight:700; border:1px solid var(--border2); border-radius:8px;
  padding:6px 11px; color:var(--text2); background:#fff;
}
.ar-row-acc a:hover { border-color:var(--accent); color:var(--accent); }
.ar-row-acc a.tel { background:var(--accent); color:#fff; border-color:var(--accent); }
.ar-row-acc a.tel:hover { background:var(--accent-hover); color:#fff; }
.ar-row-acc a.wa { background:#25d366; color:#fff; border-color:#25d366; }
.ar-row-acc a.wa:hover { background:#1faa53; color:#fff; }

/* Sidebar de filtros: el redondeo y el título del mockup. */
.listado-sidebar .filter-card { border-radius:12px; }
.listado-sidebar .filter-title { color:var(--accent-hover); }

@media (max-width:760px) {
  .ar-row { grid-template-columns:110px 1fr; }
  .ar-row-ph { min-height:120px; }
}