/* ============================================================
   CELCCAR · Capa de marca sobre Bootstrap 5
   En Laravel: public/css/celccar.css  (cargar DESPUÉS de bootstrap.min.css)
   ============================================================ */

:root {
  --cc-green: #107030;
  --cc-green-dark: #0a3d1a;
  --cc-green-700: #0b5a25;
  --cc-yellow: #ffe010;
  --cc-yellow-hover: #fff05a;
  --cc-bg-soft: #f3f7f0;
  --cc-border: #e2eadd;
  --cc-ink: #16241a;
  --cc-muted: #62726a;

  /* Sobrescribe el primario de Bootstrap con el verde de marca */
  --bs-primary: #107030;
  --bs-primary-rgb: 16, 112, 48;
}

body {
  font-family: 'Mulish', sans-serif;
  color: var(--cc-ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .font-display {
  font-family: 'Schibsted Grotesk', sans-serif;
  letter-spacing: -0.02em;
}

::selection { background: var(--cc-yellow); color: var(--cc-green-dark); }

/* ---- Utilidades de marca (encima de las de Bootstrap) ---- */
.bg-cc-green       { background-color: var(--cc-green) !important; }
.bg-cc-green-dark  { background-color: var(--cc-green-dark) !important; }
.bg-cc-soft        { background-color: var(--cc-bg-soft) !important; }
.text-cc-green     { color: var(--cc-green) !important; }
.text-cc-yellow    { color: var(--cc-yellow) !important; }
.border-cc         { border-color: var(--cc-border) !important; }

.eyebrow {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: .78rem;
  letter-spacing: .12em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cc-green);
}

/* Botones de marca */
.btn-cc-green { background: var(--cc-green); color: #fff; font-weight: 700; }
.btn-cc-green:hover { background: var(--cc-green-700); color: #fff; }
.btn-cc-yellow { background: var(--cc-yellow); color: var(--cc-green-dark); font-weight: 800; font-family: 'Schibsted Grotesk', sans-serif; }
.btn-cc-yellow:hover { background: var(--cc-yellow-hover); color: var(--cc-green-dark); }

/* Navbar */
.cc-navlink { color: #3a4a3e; font-weight: 600; font-size: .9rem; border-radius: .5rem; padding: .55rem .7rem !important; }
.cc-navlink:hover { background: var(--cc-bg-soft); color: var(--cc-green); }
.cc-navlink.active { color: var(--cc-green); background: #eef4ea; font-weight: 700; }

/* Selector de idioma */
.cc-lang { border: 1px solid #d8e2d2; border-radius: .55rem; overflow: hidden; }
.cc-lang button { border: 0; background: #fff; color: #6b7a6e; font-weight: 800; font-size: .72rem; letter-spacing: .03em; padding: .5rem .65rem; line-height: 1; }
.cc-lang button.active { background: var(--cc-green); color: #fff; }

/* Tarjetas */
.cc-card { border: 1px solid var(--cc-border); border-radius: 1.1rem; transition: box-shadow .18s, border-color .18s; overflow: hidden; background: #fff; }
.cc-card:hover { border-color: var(--cc-green); box-shadow: 0 16px 38px rgba(10,61,26,.12); }

/* Marcador de imagen (reemplazar por <img> real) */
.cc-ph {
  background-image: repeating-linear-gradient(45deg, #eef4ea 0 12px, #f5f8f2 12px 24px);
  color: #9bae9d; font-family: ui-monospace, monospace; font-size: .7rem; letter-spacing: .04em; font-weight: 600;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.cc-ph-dark { background-image: repeating-linear-gradient(45deg, rgba(13,87,34,.4) 0 14px, #0a3d1a 14px 28px); color: rgba(238,244,230,.45); }

.cc-pill { background: #eef4ea; border: 1px solid #d8e6d0; color: #1a4a2a; font-size: .82rem; font-weight: 600; padding: .5rem .9rem; border-radius: 100px; }
.cc-tag { background: var(--cc-green); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .06em; padding: .32rem .7rem; border-radius: 100px; }

/* Hero radial glow */
.cc-hero { background: var(--cc-green-dark); color: #eef4ea; position: relative; overflow: hidden; }
.cc-hero::after { content: ""; position: absolute; top: -120px; right: -80px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(16,112,48,.55) 0%, rgba(10,61,26,0) 70%); pointer-events: none; }

/* ===== PAGINACIÓN ===== */
.pagination { gap: 4px; margin: 0; }
.page-link { border-radius: 10px !important; border: 1px solid var(--cc-border); color: var(--cc-green); font-weight: 600; font-size: 14px; padding: 7px 14px; background: #fff; transition: background .15s, border-color .15s, color .15s; box-shadow: none !important; }
.page-link:hover { background: var(--cc-soft); border-color: var(--cc-soft); color: var(--cc-green-dark); }
.page-item.active .page-link { background: var(--cc-green); border-color: var(--cc-green); color: #fff; }
.page-item.disabled .page-link { background: #fff; border-color: var(--cc-border); color: #9bae9d; opacity: .6; }