/* ─────────────────────────────────────────────
   RedMindful.es — Front-end
   Estilo inspirado en agencia de viajes/experiencias
   ───────────────────────────────────────────── */

:root {
  /* Colores — calma + naturaleza + energía cálida */
  --color-primary:    #34675c;   /* verde bosque */
  --color-primary-dark: #24493f;
  --color-secondary:  #7fa99b;   /* salvia */
  --color-accent:     #f2a65a;   /* arena cálida (CTA) */
  --color-accent-dark:#e08c3a;
  --color-bg:         #faf8f4;
  --color-bg-alt:     #f0ece4;
  --color-surface:    #ffffff;
  --color-text:       #27302d;
  --color-text-muted: #6b7672;
  --color-border:     #e4e0d8;
  --color-success:    #27ae60;
  --color-danger:     #e74c3c;
  --color-whatsapp:   #25d366;

  /* Tipografía */
  --font-heading: 'Outfit', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --fs-hero:  clamp(2.2rem, 5vw, 3.8rem);
  --fs-h1:    clamp(2rem, 4vw, 3rem);
  --fs-h2:    clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:    clamp(1.15rem, 2.5vw, 1.5rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;

  /* Layout */
  --container-max: 1200px;
  --radius:    10px;
  --radius-lg: 18px;
  --shadow:    0 2px 10px rgba(39,48,45,.08);
  --shadow-lg: 0 12px 36px rgba(39,48,45,.14);
  --transition: 220ms ease;
  --space-section: clamp(3.5rem, 7vw, 6.5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent-dark); }
h1,h2,h3,h4 { font-family: var(--font-heading); line-height: 1.2; font-weight: 700; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 1.25rem; }
section { padding: var(--space-section) 0; }
.section-label {
  display:inline-block; text-transform: uppercase; letter-spacing: .18em;
  font-size: .75rem; font-weight: 600; color: var(--color-accent-dark); margin-bottom: .6rem;
}
.section-title { font-size: var(--fs-h2); margin-bottom: 1rem; }
.section-sub { color: var(--color-text-muted); max-width: 620px; margin-bottom: 2.5rem; }

/* ── Botones ── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.6rem; border-radius: 999px; font-weight:600; font-size:.95rem;
  border:2px solid transparent; cursor:pointer; transition: all var(--transition);
  font-family: var(--font-heading);
}
.btn-primary { background: var(--color-accent); color:#fff; }
.btn-primary:hover { background: var(--color-accent-dark); color:#fff; transform: translateY(-2px); }
.btn-outline { border-color: var(--color-primary); color: var(--color-primary); background:transparent; }
.btn-outline:hover { background: var(--color-primary); color:#fff; }
.btn-whatsapp { background: var(--color-whatsapp); color:#fff; }
.btn-whatsapp:hover { background:#1faa52; color:#fff; }
.btn-sm { padding:.5rem 1.1rem; font-size:.85rem; }

/* ── Topbar + Header ── */
.topbar {
  background: var(--color-primary-dark); color:#cfe0da; font-size:.82rem;
  padding:.45rem 0;
}
.topbar .container { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.topbar a { color:#fff; }
.topbar i { margin-right:.35rem; color: var(--color-accent); }

.site-header {
  position: sticky; top:0; z-index:100;
  background: rgba(250,248,244,.94); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--color-border);
}
.site-header .container { display:flex; align-items:center; justify-content:space-between; height:72px; }
.logo { font-family: var(--font-heading); font-size:1.5rem; font-weight:800; color: var(--color-primary); }
.logo span { color: var(--color-accent); }
.main-nav { display:flex; gap:1.6rem; align-items:center; }
.main-nav a { font-weight:500; color: var(--color-text); font-size:.95rem; }
.main-nav a:hover, .main-nav a.active { color: var(--color-accent-dark); }
.nav-toggle { display:none; background:none; border:none; font-size:1.5rem; color:var(--color-primary); cursor:pointer; }

/* ── Hero con buscador ── */
.hero {
  position:relative; min-height: 78vh; display:flex; align-items:center;
  background: linear-gradient(rgba(36,73,63,.55), rgba(36,73,63,.72)), url('/images/hero.jpg') center/cover no-repeat;
  color:#fff; padding: 6rem 0;
}
.hero h1 { font-size: var(--fs-hero); max-width: 760px; margin-bottom:1rem; }
.hero p { font-size:1.15rem; max-width: 560px; opacity:.92; margin-bottom:2.2rem; }
.hero .highlight { color: var(--color-accent); }

.search-box {
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding:1rem; display:grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap:.75rem;
  max-width: 880px;
}
.search-box .field { display:flex; flex-direction:column; gap:.2rem; padding:.3rem .6rem; }
.search-box label { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--color-text-muted); font-weight:600; }
.search-box input, .search-box select {
  border:none; outline:none; font-size:.98rem; font-family:var(--font-body); color:var(--color-text); background:transparent;
}
.search-box .field + .field { border-left:1px solid var(--color-border); }
.search-box .btn { align-self:center; }
#search-suggest {
  position:absolute; background:#fff; color:var(--color-text); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); margin-top:.4rem; max-width:500px; width:100%;
  max-height:300px; overflow-y:auto; display:none; z-index:50;
}
#search-suggest a { display:block; padding:.7rem 1rem; border-bottom:1px solid var(--color-border); font-size:.9rem; }
#search-suggest a:hover { background: var(--color-bg-alt); }

/* ── Colecciones por categoría ── */
.cat-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap:1.2rem; }
.cat-card {
  position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/5;
  background: var(--color-primary); color:#fff; display:flex; align-items:flex-end;
  box-shadow: var(--shadow); transition: transform var(--transition), box-shadow var(--transition);
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cat-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.78; transition: transform var(--transition); }
.cat-card:hover img { transform: scale(1.05); }
.cat-card .cat-info {
  position:relative; z-index:2; padding:1.1rem; width:100%;
  background: linear-gradient(transparent, rgba(20,40,34,.85));
}
.cat-card h3 { font-size:1.05rem; color:#fff; }
.cat-card small { opacity:.85; }
.cat-card i { font-size:1.4rem; color: var(--color-accent); margin-bottom:.4rem; display:block; }

/* ── Toggle grid/list + fichas ── */
.view-toggle { display:flex; gap:.4rem; }
.view-toggle button {
  background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px;
  width:40px; height:40px; cursor:pointer; color:var(--color-text-muted); font-size:1rem;
  transition: all var(--transition);
}
.view-toggle button.active { background: var(--color-primary); color:#fff; border-color: var(--color-primary); }

.fichas-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap:1.6rem; }
.fichas-grid.list-view { grid-template-columns: 1fr; }

.ficha-card {
  background: var(--color-surface); border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow); transition: transform var(--transition), box-shadow var(--transition);
  display:flex; flex-direction:column;
}
.ficha-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.list-view .ficha-card { flex-direction:row; }
.list-view .ficha-card .ficha-img { width:280px; flex-shrink:0; aspect-ratio:auto; }
.ficha-img { position:relative; aspect-ratio: 16/10; overflow:hidden; }
.ficha-img img { width:100%; height:100%; object-fit:cover; transition: transform var(--transition); }
.ficha-card:hover .ficha-img img { transform: scale(1.06); }
.ficha-badge {
  position:absolute; top:.8rem; left:.8rem; background: var(--color-accent); color:#fff;
  font-size:.72rem; font-weight:700; padding:.25rem .7rem; border-radius:999px; text-transform:uppercase; letter-spacing:.05em;
}
.ficha-body { padding:1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.ficha-body h3 { font-size:1.15rem; }
.ficha-body h3 a { color: var(--color-text); }
.ficha-body h3 a:hover { color: var(--color-accent-dark); }
.ficha-meta { display:flex; gap:1rem; flex-wrap:wrap; font-size:.83rem; color:var(--color-text-muted); }
.ficha-meta i { color: var(--color-secondary); margin-right:.3rem; }
.ficha-desc { font-size:.9rem; color:var(--color-text-muted); flex:1; }
.ficha-foot { display:flex; justify-content:space-between; align-items:center; margin-top:.6rem; }
.stars { color:#f3b13c; font-size:.85rem; }
.stars .num { color: var(--color-text-muted); margin-left:.3rem; }

/* ── Mapa explorar ── */
.explorar-layout { display:grid; grid-template-columns: 1.15fr .85fr; gap:1.6rem; align-items:start; }
#mapa-explorar, #mapa-ficha { width:100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
#mapa-explorar { height: 640px; position: sticky; top: 90px; }
#mapa-ficha { height: 360px; }
.explorar-filtros {
  display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; margin-bottom:1.6rem;
  background: var(--color-surface); padding:1rem; border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.explorar-filtros select, .explorar-filtros input {
  padding:.6rem .9rem; border:1px solid var(--color-border); border-radius:8px;
  font-family: var(--font-body); font-size:.9rem; background:#fff; color: var(--color-text);
}

/* ── Ficha detalle ── */
.ficha-hero { position:relative; height: 420px; overflow:hidden; }
.ficha-hero img { width:100%; height:100%; object-fit:cover; }
.ficha-hero .overlay {
  position:absolute; inset:0; background: linear-gradient(transparent 30%, rgba(20,40,34,.88));
  display:flex; align-items:flex-end;
}
.ficha-hero .container { padding-bottom:2rem; color:#fff; }
.ficha-hero h1 { color:#fff; font-size: var(--fs-h1); }
.ficha-hero .cats { margin-top:.6rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.cat-pill {
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4); color:#fff;
  padding:.25rem .8rem; border-radius:999px; font-size:.78rem;
}
.ficha-layout { display:grid; grid-template-columns: 1fr 360px; gap:2.4rem; align-items:start; }
.ficha-sidebar {
  background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding:1.6rem; position:sticky; top:90px; display:flex; flex-direction:column; gap:.9rem;
}
.ficha-sidebar .dato { display:flex; gap:.8rem; align-items:flex-start; font-size:.92rem; }
.ficha-sidebar .dato i { color: var(--color-accent-dark); width:18px; margin-top:.25rem; }
.ficha-sidebar hr { border:none; border-top:1px solid var(--color-border); }
.redes { display:flex; gap:.6rem; }
.redes a {
  width:38px; height:38px; border-radius:50%; background:var(--color-bg-alt);
  display:flex; align-items:center; justify-content:center; color:var(--color-primary);
}
.redes a:hover { background: var(--color-primary); color:#fff; }
.galeria { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin:1.5rem 0; }
.galeria img { border-radius: var(--radius); aspect-ratio:1; object-fit:cover; cursor:pointer; transition: transform var(--transition); }
.galeria img:hover { transform: scale(1.03); }
.servicios-lista { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.8rem; margin:1.2rem 0; }
.servicios-lista li {
  list-style:none; background:var(--color-surface); padding:.8rem 1rem; border-radius:var(--radius);
  box-shadow:var(--shadow); font-size:.9rem;
}
.servicios-lista li i { color: var(--color-success); margin-right:.5rem; }

/* ── Reseñas Google ── */
.reviews { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.2rem; }
.review-card {
  background:var(--color-surface); border-radius:var(--radius-lg); padding:1.4rem;
  box-shadow:var(--shadow); font-size:.92rem;
}
.review-card .review-head { display:flex; align-items:center; gap:.8rem; margin-bottom:.7rem; }
.review-card img { width:44px; height:44px; border-radius:50%; }
.review-card .g-badge { font-size:.72rem; color:var(--color-text-muted); }
.review-card .g-badge i { color:#4285F4; }

/* ── Testimonios / métricas / blog ── */
.metrics-band { background: var(--color-primary); color:#fff; }
.metrics-band .container { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2rem; text-align:center; }
.metric .value { font-family:var(--font-heading); font-size:2.6rem; font-weight:800; color:var(--color-accent); }
.metric .label { opacity:.85; font-size:.92rem; }

.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.6rem; }
.post-card { background:var(--color-surface); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); transition:transform var(--transition); }
.post-card:hover { transform:translateY(-5px); }
.post-card .post-img { aspect-ratio:16/9; overflow:hidden; }
.post-card .post-img img { width:100%; height:100%; object-fit:cover; }
.post-card .post-body { padding:1.3rem; }
.post-card .post-date { font-size:.78rem; color:var(--color-text-muted); }
.post-card h3 { font-size:1.1rem; margin:.4rem 0; }
.post-card h3 a { color:var(--color-text); }

/* ── CTA banda ── */
.cta-band {
  background: linear-gradient(rgba(36,73,63,.82), rgba(36,73,63,.82)), url('/images/cta-bg.jpg') center/cover;
  color:#fff; text-align:center;
}
.cta-band h2 { color:#fff; font-size:var(--fs-h2); margin-bottom:1rem; }
.cta-band p { opacity:.9; max-width:560px; margin:0 auto 2rem; }

/* ── Footer ── */
.site-footer { background: var(--color-primary-dark); color:#b9cdc6; padding:4rem 0 0; font-size:.92rem; }
.site-footer h4 { color:#fff; margin-bottom:1.1rem; font-size:1.05rem; }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; }
.site-footer a { color:#b9cdc6; }
.site-footer a:hover { color: var(--color-accent); }
.site-footer ul { list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); padding:1.2rem 0; font-size:.8rem; }
.footer-bottom .container { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; }

/* ── Flotantes: WhatsApp + Webchat ── */
.float-btns { position:fixed; right:1.3rem; bottom:1.3rem; z-index:300; display:flex; flex-direction:column; gap:.8rem; }
.float-btn {
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.5rem; box-shadow: var(--shadow-lg); cursor:pointer; border:none;
  transition: transform var(--transition);
}
.float-btn:hover { transform: scale(1.08); color:#fff; }
.float-wa { background: var(--color-whatsapp); }
.float-chat { background: var(--color-primary); }

.webchat {
  position:fixed; right:1.3rem; bottom:9rem; z-index:310; width:340px; max-width:calc(100vw - 2.6rem);
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden;
  display:none; flex-direction:column; height:460px;
}
.webchat.open { display:flex; }
.webchat-head { background:var(--color-primary); color:#fff; padding:.9rem 1.1rem; display:flex; justify-content:space-between; align-items:center; }
.webchat-head button { background:none; border:none; color:#fff; font-size:1.1rem; cursor:pointer; }
.webchat-body { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; background:var(--color-bg); }
.msg { max-width:85%; padding:.6rem .9rem; border-radius:14px; font-size:.88rem; line-height:1.45; }
.msg.bot { background:#fff; box-shadow:var(--shadow); border-bottom-left-radius:4px; align-self:flex-start; }
.msg.user { background:var(--color-primary); color:#fff; border-bottom-right-radius:4px; align-self:flex-end; }
.webchat-input { display:flex; border-top:1px solid var(--color-border); }
.webchat-input input { flex:1; border:none; outline:none; padding:.9rem 1rem; font-family:var(--font-body); }
.webchat-input button { background:var(--color-accent); border:none; color:#fff; padding:0 1.2rem; cursor:pointer; font-size:1rem; }

/* ── Formularios / acceso ── */
.form-card { background:var(--color-surface); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:2rem; max-width:480px; margin:0 auto; }
.form-card .field { margin-bottom:1.1rem; }
.form-card label { display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem; }
.form-card input, .form-card textarea, .form-card select {
  width:100%; padding:.7rem .9rem; border:1px solid var(--color-border); border-radius:8px;
  font-family:var(--font-body); font-size:.95rem;
}
.alert { padding:.9rem 1.1rem; border-radius:var(--radius); margin-bottom:1.2rem; font-size:.9rem; }
.alert-success { background:#e7f6ed; color:#1e7a45; }
.alert-danger { background:#fdecea; color:#b03a2e; }
.alert-info { background:#eaf3fb; color:#21618c; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .explorar-layout, .ficha-layout { grid-template-columns:1fr; }
  #mapa-explorar { position:static; height:420px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .search-box { grid-template-columns:1fr 1fr; }
  .search-box .field + .field { border-left:none; }
  .list-view .ficha-card { flex-direction:column; }
  .list-view .ficha-card .ficha-img { width:100%; }
}
@media (max-width: 680px) {
  .main-nav { display:none; position:absolute; top:72px; left:0; right:0; background:var(--color-bg);
    flex-direction:column; padding:1.4rem; border-bottom:1px solid var(--color-border); gap:1rem; }
  .main-nav.open { display:flex; }
  .nav-toggle { display:block; }
  .search-box { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .topbar { display:none; }
}