/* ══════════════════════════════════════════════════════
   CATÀLEG AURÓ v3.0 — Mobile-first · Modal fullscreen
   ══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Outfit:wght@300;400;500;600&display=swap');

/* ── TOKENS ──────────────────────────────────────────── */
:root {
  --g1: #162b1e;
  --g2: #2a5c3f;
  --g3: #3d7a56;
  --g4: #6aab82;
  --g5: #a8cfb5;
  --g6: #d4e9db;
  --g7: #edf5ef;
  --g8: #f6faf7;
  --g9: #ffffff;
  --terra: #c8a96e;
  --wa: #25d366;
  --wa2: #128c4a;
  --text: #111f16;
  --mid: #3a5a44;
  --soft: #7a9e85;
  --border: #d4e9db;
  --r: 18px;
  --r-sm: 10px;
  --r-pill: 999px;
  --sh: 0 2px 12px rgba(17,31,22,.07), 0 1px 3px rgba(17,31,22,.05);
  --sh-hover: 0 12px 40px rgba(17,31,22,.16);
  --ease: cubic-bezier(.4,0,.2,1);
  --t: .24s;
  --fd: 'Cormorant Garamond', Georgia, serif;
  --fb: 'Outfit', system-ui, sans-serif;
}

/* ── BASE ────────────────────────────────────────────── */
.ca-wrap *, .ca-wrap *::before, .ca-wrap *::after { box-sizing:border-box; margin:0; padding:0; }
.ca-wrap { font-family:var(--fb); color:var(--text); max-width:1200px; margin:0 auto; padding:0 16px 72px; -webkit-font-smoothing:antialiased; }
.ca-wrap button { font-family:var(--fb); cursor:pointer; }
.ca-wrap img { display:block; max-width:100%; }

/* ── HERO TÍTOL ──────────────────────────────────────── */
.ca-hero {
  padding: 40px 0 8px;
  text-align: center;
}
@media (min-width:640px) { .ca-hero { padding: 56px 0 12px; } }

.ca-hero-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g4);
  margin-bottom: 12px;
}
.ca-hero-title {
  font-family: var(--fd);
  font-size: clamp(36px, 7vw, 64px);
  font-weight: 600;
  color: var(--g1);
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: 14px;
}
.ca-hero-sub {
  font-size: 15px;
  color: var(--soft);
  font-weight: 300;
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto 28px;
}
.ca-hero-line {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--g3), var(--g5));
  border-radius: 2px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════
   CONTROLS
══════════════════════════════════════════════════════ */
.ca-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 0 22px;
}
@media (min-width:640px) {
  .ca-controls { flex-direction:row; align-items:center; justify-content:space-between; }
}

/* Segmented toggle */
.ca-toggle {
  position: relative;
  display: flex;
  background: var(--g7);
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 2px;
  width: 100%;
}
@media (min-width:640px) { .ca-toggle { width:auto; } }

.ca-slider {
  position: absolute;
  top: 4px; bottom: 4px;
  background: var(--g9);
  border-radius: var(--r-pill);
  box-shadow: 0 1px 6px rgba(17,31,22,.12);
  transition: left var(--t) var(--ease), width var(--t) var(--ease);
  pointer-events: none;
  z-index: 0;
}

.ca-toggle-btn {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 6px; justify-content: center;
  padding: 10px 22px;
  border: none; background: transparent; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; color: var(--soft);
  transition: color var(--t); flex: 1; white-space: nowrap;
}
@media (min-width:640px) { .ca-toggle-btn { flex:initial; } }
.ca-toggle-btn svg { width:15px; height:15px; }
.ca-toggle-btn.active { color:var(--g2); font-weight:600; }

/* Cerca */
.ca-searchbox {
  display: flex; align-items: center; gap: 8px;
  background: var(--g9); border: 1.5px solid var(--border);
  border-radius: var(--r-pill); padding: 10px 14px;
  transition: border-color var(--t), box-shadow var(--t);
}
.ca-searchbox:focus-within { border-color:var(--g3); box-shadow:0 0 0 3px rgba(42,92,63,.1); }
.ca-searchbox svg { width:15px; height:15px; color:var(--soft); flex-shrink:0; }
.ca-search { border:none; outline:none; background:transparent; font-family:var(--fb); font-size:14px; color:var(--text); width:180px; min-width:0; }
.ca-search::placeholder { color:var(--soft); }
.ca-clear { border:none; background:none; color:var(--soft); font-size:12px; padding:0; opacity:0; pointer-events:none; transition:opacity var(--t); }
.ca-clear.vis { opacity:1; pointer-events:auto; }

/* Recompte */
.ca-count { font-size:13px; color:var(--soft); margin-bottom:20px; font-weight:300; }
.ca-count-n { font-family:var(--fd); font-size:24px; font-weight:600; color:var(--g2); line-height:1; margin-right:3px; vertical-align:middle; }

/* ══════════════════════════════════════════════════════
   GRID
══════════════════════════════════════════════════════ */
.ca-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width:640px)  { .ca-grid { gap:16px; } }
@media (min-width:768px)  { .ca-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px) { .ca-grid { grid-template-columns:repeat(4,1fr); gap:20px; } }

/* ══════════════════════════════════════════════════════
   CARD — neta, sense preu, imatge dominant
══════════════════════════════════════════════════════ */
.ca-card {
  position: relative;
  border: none; background: none; text-align: left; padding: 0;
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sh);
  cursor: pointer;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  aspect-ratio: 3/4;
  display: flex; flex-direction: column; justify-content: flex-end;

  opacity: 0; transform: translateY(14px);
  animation: caIn .5s var(--ease) calc(var(--i,0) * 55ms) forwards;
}
@keyframes caIn { to { opacity:1; transform:translateY(0); } }
.ca-card:hover { transform:translateY(-5px) scale(1.01); box-shadow:var(--sh-hover); }
.ca-card:active { transform:scale(.98); }
.ca-card.ca-hidden { display:none; }

/* Foto ocupa tota la card */
.ca-card-img { position:absolute; inset:0; }
.ca-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.ca-card:hover .ca-card-img img { transform:scale(1.07); }

/* Gradient baix */
.ca-card-grad {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(17,31,22,.85) 0%, rgba(17,31,22,.3) 45%, transparent 70%);
}

/* Info sobre gradient */
.ca-card-info {
  position: relative; z-index: 1;
  padding: 14px 14px 12px;
  color: #fff;
}
.ca-card-badge {
  display: inline-block;
  font-size: 10px; font-weight: 600; letter-spacing:.05em;
  padding: 3px 9px; border-radius: var(--r-pill);
  margin-bottom: 6px; line-height:1.4;
  backdrop-filter: blur(6px); -webkit-backdrop-filter:blur(6px);
}
.ca-card-badge--exterior { background:rgba(42,92,63,.75); color:#b8dfc4; }
.ca-card-badge--interior { background:rgba(200,169,110,.75); color:#fff8ec; }
.ca-card-nom {
  font-family: var(--fd); font-size:18px; font-weight:600;
  line-height:1.15; color:#fff; letter-spacing:-.01em;
}
@media (min-width:768px) { .ca-card-nom { font-size:20px; } }
.ca-card-cient { font-size:11px; color:rgba(255,255,255,.65); font-style:italic; margin-top:2px; font-weight:300; }

/* CTA hover */
.ca-card-hover {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(42,92,63,.15); backdrop-filter:blur(2px);
  color: #fff; font-size:14px; font-weight:600;
  opacity: 0; transition: opacity var(--t);
  border-radius: var(--r);
}
.ca-card-hover svg { width:18px; height:18px; }
.ca-card:hover .ca-card-hover { opacity:1; }

/* ── EMPTY ───────────────────────────────────────────── */
.ca-empty { display:none; flex-direction:column; align-items:center; gap:10px; padding:80px 0; text-align:center; }
.ca-empty.vis { display:flex; }
.ca-empty span { font-size:44px; }
.ca-empty p { color:var(--soft); font-size:15px; }
.ca-empty-btn { border:1.5px solid var(--g2); background:transparent; color:var(--g2); padding:10px 24px; border-radius:var(--r-pill); font-size:14px; font-weight:600; transition:background var(--t),color var(--t); }
.ca-empty-btn:hover { background:var(--g2); color:#fff; }


/* ══════════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════════ */
.ca-modal {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.ca-modal.open { opacity:1; pointer-events:auto; }

/* Backdrop */
.ca-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(10,20,13,.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter:blur(8px);
  transition: opacity .3s var(--ease);
}

/* Box */
.ca-modal-box {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  background: var(--g9);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: scale(.96) translateY(20px);
  transition: transform .35s var(--ease);
}
.ca-modal.open .ca-modal-box { transform:scale(1) translateY(0); }

@media (min-width: 700px) {
  .ca-modal { padding: 24px; }
  .ca-modal-box {
    width: min(980px, 96vw);
    height: min(640px, 92vh);
    border-radius: 24px;
    box-shadow: 0 32px 80px rgba(10,20,13,.35);
    flex-direction: row;
  }
}

/* Close */
.ca-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 10;
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.18); color: #fff;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter:blur(6px);
  transition: background var(--t), transform var(--t);
  cursor: pointer;
}
.ca-modal-close:hover { background:rgba(255,255,255,.32); transform:scale(1.08); }
.ca-modal-close svg { width:18px; height:18px; }
@media (min-width:700px) {
  .ca-modal-close { top:18px; right:18px; background:rgba(17,31,22,.15); }
}

/* Nav prev/next */
.ca-modal-nav {
  position: absolute; bottom: 14px; left: 50%; z-index: 10;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
}
@media (min-width:700px) {
  .ca-modal-nav { bottom:auto; top:50%; left:0; right:0; transform:translateY(-50%); justify-content:space-between; padding:0 12px; pointer-events:none; }
  .ca-modal-nav .ca-nav-btn { pointer-events:auto; }
}

.ca-nav-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.18); color: #fff;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter:blur(6px);
  transition: background var(--t), transform var(--t); cursor:pointer;
}
.ca-nav-btn:hover { background:rgba(255,255,255,.35); transform:scale(1.08); }
.ca-nav-btn:disabled { opacity:.3; cursor:default; }
.ca-nav-btn svg { width:16px; height:16px; }

.ca-nav-counter {
  font-size:12px; font-weight:500; color:rgba(255,255,255,.8);
  background:rgba(0,0,0,.25); padding:4px 10px; border-radius:var(--r-pill);
  backdrop-filter:blur(4px); letter-spacing:.04em;
}
@media (min-width:700px) {
  .ca-nav-counter { position:absolute; top:-54px; left:50%; transform:translateX(-50%); background:rgba(17,31,22,.5); }
}

/* Inner layout — MOBILE: columna vertical | DESKTOP: dues columnes */
.ca-modal-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@media (min-width:700px) {
  .ca-modal-inner { flex-direction: row; align-items: stretch; }
}

/* ── FOTO ── */
.ca-modal-photo {
  position: relative;
  flex-shrink: 0;
  /* Mòbil: alçada fixa petita per deixar espai al contingut */
  height: 200px;
  overflow: hidden;
  background: var(--g7);
}
@media (min-width:700px) {
  /* Desktop: ocupa tota l'alçada de la columna esquerra */
  .ca-modal-photo {
    width: 42%;
    height: 100%;
    max-height: none;
  }
}

.ca-modal-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.ca-modal.open .ca-modal-img { transform: scale(1.04); }

.ca-modal-photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(17,31,22,.7) 0%, rgba(17,31,22,.15) 50%, transparent 75%);
}
@media (min-width:700px) {
  .ca-modal-photo-overlay {
    background:
      linear-gradient(to right, rgba(17,31,22,.25) 0%, transparent 55%),
      linear-gradient(to top,   rgba(17,31,22,.6)  0%, transparent 50%);
  }
}

.ca-modal-photo-meta {
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.ca-modal-badge {
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 5px 12px; border-radius: var(--r-pill);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ca-modal-badge.exterior { background: rgba(42,92,63,.85); color: #b8dfc4; }
.ca-modal-badge.interior { background: rgba(200,169,110,.85); color: #fff8ec; }

.ca-modal-disp {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--r-pill);
}
.ca-modal-disp.si        { background: #d4f5e2; color: #0d5c2e; }
.ca-modal-disp.consultar { background: #fff0d0; color: #8a5300; }
.ca-modal-disp.no        { background: #fde8e8; color: #8b1a1a; }

/* ── CONTINGUT (dreta desktop / baix mòbil) ── */
.ca-modal-content {
  /* Ocupa l'espai restant i permet scroll intern */
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--g9);
  overflow: hidden;
}
.ca-modal-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 24px 22px 80px;
}
@media (min-width:700px) {
  .ca-modal-scroll { padding: 36px 40px 52px; }
}

/* Scrollbar fina */
.ca-modal-scroll::-webkit-scrollbar { width:4px; }
.ca-modal-scroll::-webkit-scrollbar-track { background:transparent; }
.ca-modal-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.ca-modal-cient { font-size:12px; color:var(--soft); font-style:italic; font-weight:300; margin-bottom:4px; }
.ca-modal-nom { font-family:var(--fd); font-size:32px; font-weight:600; line-height:1.1; color:var(--g1); letter-spacing:-.02em; margin-bottom:16px; }
@media (min-width:700px) { .ca-modal-nom { font-size:38px; } }

.ca-modal-desc { font-size:14px; line-height:1.7; color:var(--mid); font-weight:300; margin-bottom:22px; }

/* Fitxa taula */
.ca-modal-fitxa {
  border-radius: var(--r-sm); overflow:hidden;
  border: 1px solid var(--border); margin-bottom:20px;
}
.ca-fitxa-row {
  display: flex; justify-content:space-between; align-items:center;
  padding: 9px 14px; font-size:13px;
  border-bottom: 1px solid var(--border);
}
.ca-fitxa-row:last-child { border-bottom:none; }
.ca-fitxa-row:nth-child(even) { background:var(--g8); }
.ca-fitxa-k { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--soft); }
.ca-fitxa-v { font-weight:500; color:var(--g1); text-align:right; }

/* Cures */
.ca-modal-cures-wrap { margin-bottom:24px; }
.ca-modal-cures-title { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--soft); margin-bottom:10px; }
.ca-modal-cures { list-style:none; display:flex; flex-direction:column; gap:6px; }
.ca-modal-cures li { font-size:13.5px; color:var(--mid); padding-left:18px; position:relative; line-height:1.55; font-weight:300; }
.ca-modal-cures li::before { content:''; position:absolute; left:5px; top:8px; width:5px; height:5px; border-radius:50%; background:var(--g4); }

/* WhatsApp CTA */
.ca-modal-actions { margin-top:4px; }
.ca-modal-wa {
  display: flex; align-items:center; justify-content:center; gap:9px;
  background: var(--wa); color:#fff;
  font-family:var(--fb); font-weight:600; font-size:15px;
  padding: 14px 28px; border-radius:var(--r-pill);
  transition: background var(--t), transform var(--t) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.ca-modal-wa:hover { background:var(--wa2); color:#fff; transform:scale(1.02); }
.ca-modal-wa:active { transform:scale(.98); }
.ca-modal-wa svg { width:20px; height:20px; }

/* ── ACCESSIBILITY ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ca-card { animation:none; opacity:1; transform:none; }
  .ca-modal, .ca-modal-box { transition-duration:.01ms !important; }
}
.ca-toggle-btn:focus-visible,
.ca-modal-close:focus-visible,
.ca-nav-btn:focus-visible,
.ca-modal-wa:focus-visible { outline:2px solid var(--g3); outline-offset:2px; }

/* Touch: eliminar hover fantàstic */
@media (hover:none) {
  .ca-card:hover { transform:none; box-shadow:var(--sh); }
  .ca-card:active { transform:scale(.97); }
  .ca-card-hover { display:none; }
}