/* ============================================================================
   Can Olivera — « Retiro rural canino / Mediterráneo cálido en el olivar »
   Archétype : pension canine familiale à la campagne, chaleureuse & ensoleillée.
   Palette : Terracota #BE5A38 + Olivo #767F45 + crème-hueso #F4ECDA.
   Fonts : Young Serif (display rustique) / Nunito (body rond).
   Signature : rama de olivo (branche d'olivier SVG) + galerie photos en album/scrapbook.
   Bootstrap = squelette ; ce fichier = toute la peau. Aucune classe custom.
   ========================================================================== */

:root {
  --terra: #BE5A38;
  --terra-700: #9C4227;
  --terra-050: #F6E2D6;
  --olivo: #767F45;
  --olivo-700: #58602F;
  --olivo-050: #E9ECD8;
  --crema: #F4ECDA;
  --crema-2: #EDE1CB;
  --paper: #FCF7EC;
  --tinta: #33271D;
  --muted: #7C6B57;
  --line: #E2D4BC;

  --bs-primary: #BE5A38;
  --bs-primary-rgb: 190, 90, 56;
  --bs-secondary: #767F45;
  --bs-secondary-rgb: 118, 127, 69;
  --bs-body-color: #33271D;
  --bs-body-bg: #F4ECDA;
  --bs-body-font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  --bs-border-color: #E2D4BC;
  --bs-link-color: #9C4227;
  --bs-link-hover-color: #58602F;

  /* rama de olivo (signature) en data-URI */
  --sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 22'%3E%3Cpath d='M2 20 Q13 13 32 2' fill='none' stroke='%23767F45' stroke-width='1.6'/%3E%3Cg fill='%23767F45'%3E%3Cellipse cx='11' cy='13' rx='4.2' ry='2.3' transform='rotate(-38 11 13)'/%3E%3Cellipse cx='19' cy='8.5' rx='4.2' ry='2.3' transform='rotate(-38 19 8.5)'/%3E%3Cellipse cx='27' cy='4' rx='4.2' ry='2.3' transform='rotate(-38 27 4)'/%3E%3C/g%3E%3Ccircle cx='14.5' cy='16' r='2.1' fill='%23BE5A38'/%3E%3C/svg%3E");
  --sprig-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 22'%3E%3Cpath d='M2 20 Q13 13 32 2' fill='none' stroke='%23E9ECD8' stroke-width='1.6'/%3E%3Cg fill='%23E9ECD8'%3E%3Cellipse cx='11' cy='13' rx='4.2' ry='2.3' transform='rotate(-38 11 13)'/%3E%3Cellipse cx='19' cy='8.5' rx='4.2' ry='2.3' transform='rotate(-38 19 8.5)'/%3E%3Cellipse cx='27' cy='4' rx='4.2' ry='2.3' transform='rotate(-38 27 4)'/%3E%3C/g%3E%3C/svg%3E");

  --shadow-soft: 0 3px 8px rgba(51, 39, 29, .06), 0 22px 44px -26px rgba(51, 39, 29, .34);
  --shadow-lift: 0 8px 18px rgba(51, 39, 29, .12), 0 34px 60px -30px rgba(190, 90, 56, .4);
  --r: 22px;
}

/* ------------------------------------------------------------------ base */
body {
  background-color: var(--crema);
  background-image:
    radial-gradient(1000px 460px at 88% -6%, rgba(190, 90, 56, .10), transparent 60%),
    radial-gradient(820px 420px at -6% 100%, rgba(118, 127, 69, .12), transparent 60%);
  background-attachment: fixed;
  color: var(--tinta);
}
h1, h2, h3, h4, h5, .navbar-brand, .h1, .h2, .h3, .h4, .h5, .display-6 {
  font-family: 'Young Serif', Georgia, serif;
  font-weight: 400;
  letter-spacing: .1px;
  color: var(--terra-700);
  line-height: 1.14;
}
p { line-height: 1.75; }
a { text-decoration: none; }
::selection { background: rgba(190, 90, 56, .28); }
.container { max-width: 1160px; }

/* kicker — rama de olivo (signature) */
#section-kicker, #hero-eyebrow {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--olivo-700);
  align-items: center;
}
#section-kicker::before, #hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 26px; height: 17px;
  margin-right: .55rem;
  vertical-align: -3px;
  background: var(--sprig) center/contain no-repeat;
}
#hero-eyebrow { color: var(--terra-700); }
#section-kicker-light {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--crema);
}
#section-kicker-light::before {
  content: '';
  display: inline-block;
  width: 26px; height: 17px;
  margin-right: .55rem;
  vertical-align: -3px;
  background: var(--sprig-cream) center/contain no-repeat;
}

/* ------------------------------------------------------------------ topbar */
#topbar {
  background: var(--olivo-700);
  color: var(--crema);
  font-weight: 600;
  font-size: .86rem;
}
#topbar i { color: var(--crema); }

/* ------------------------------------------------------------------ navbar */
.navbar {
  background: rgba(244, 236, 218, .9);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
#brand-mark {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--terra);
  color: var(--crema);
  font-size: 1.25rem;
  box-shadow: 0 8px 18px -8px rgba(156, 66, 39, .8);
}
#brand-name { font-family: 'Young Serif', serif; font-size: 1.2rem; color: var(--terra-700); }
#brand-sub { color: var(--muted); font-weight: 700; letter-spacing: .3px; }
.navbar .nav-link {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  color: var(--tinta);
  border-radius: 100px;
  padding: .45rem .9rem;
  transition: color .2s, background-color .2s;
}
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--terra-700); background: rgba(190, 90, 56, .12); }

/* ------------------------------------------------------------------ boutons */
.btn { font-family: 'Nunito', sans-serif; font-weight: 800; border-radius: 100px; transition: transform .2s ease, box-shadow .2s ease, background-color .2s; }
.btn-lg { padding: .8rem 1.7rem; }
.btn-primary {
  --bs-btn-bg: var(--terra);
  --bs-btn-border-color: var(--terra);
  --bs-btn-hover-bg: var(--terra-700);
  --bs-btn-hover-border-color: var(--terra-700);
  --bs-btn-active-bg: var(--terra-700);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  box-shadow: 0 12px 24px -12px rgba(156, 66, 39, .85);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(156, 66, 39, .9); }
.btn-outline-primary {
  --bs-btn-color: var(--olivo-700);
  --bs-btn-border-color: var(--olivo);
  --bs-btn-hover-bg: var(--olivo-700);
  --bs-btn-hover-border-color: var(--olivo-700);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--olivo-700);
  background: var(--paper);
  border-width: 2px;
}
.btn-outline-primary:hover { transform: translateY(-2px); }
#shop-cta { background: var(--crema); border: none; color: var(--terra-700); font-weight: 800; box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .35); }
#shop-cta:hover { background: #fff; transform: translateY(-2px); color: var(--terra-700); }

/* ------------------------------------------------------------------ hero */
#inicio::before {
  content: '';
  position: absolute; top: 8%; right: -3%;
  width: 220px; height: 140px;
  background: var(--sprig) center/contain no-repeat;
  opacity: .1;
  transform: rotate(6deg);
  pointer-events: none;
}
#hero-title { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
#hero-sub { font-family: 'Young Serif', serif; color: var(--olivo-700); font-size: 1.3rem; }
#hero-figure {
  border-radius: 26px;
  overflow: hidden;
  border: 8px solid #fff;
  box-shadow: var(--shadow-lift);
  transform: rotate(-1.5deg);
}
#hero-figure img, #about-figure img { display: block; width: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ about */
#about-title { font-size: clamp(2rem, 3.6vw, 2.8rem); }
#about-lead { font-size: 1.12rem; color: var(--tinta); }
#about-p { color: var(--muted); }
#about-figure {
  border-radius: 24px;
  overflow: hidden;
  border: 8px solid #fff;
  box-shadow: var(--shadow-lift);
  transform: rotate(1.5deg);
}

/* destacados */
#dest-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
#dest-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
#dest-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--olivo-050);
  color: var(--olivo-700);
  font-size: 1.7rem;
  border: 2px solid var(--olivo);
}
#dest-valor { font-family: 'Young Serif', serif; font-size: 1.4rem; color: var(--terra-700); }
#dest-etq { color: var(--muted); font-weight: 700; }

/* ------------------------------------------------------------------ actividades (galería scrapbook) */
#actividades { background: linear-gradient(180deg, rgba(237, 225, 203, .5), transparent 45%); }
#actividades-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
#galeria-item {
  margin: 0;
  background: #fff;
  padding: 8px 8px 22px;
  border-radius: 4px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
#galeria-item img { border-radius: 2px; aspect-ratio: 4 / 3; object-fit: cover; }
#galeria-item:nth-child(4n+1) { transform: rotate(-2.2deg); }
#galeria-item:nth-child(4n+2) { transform: rotate(1.6deg); }
#galeria-item:nth-child(4n+3) { transform: rotate(-1.2deg); }
#galeria-item:nth-child(4n+4) { transform: rotate(2.4deg); }
#galeria-item:hover { transform: rotate(0deg) translateY(-6px) scale(1.03); box-shadow: var(--shadow-lift); z-index: 2; position: relative; }

/* ------------------------------------------------------------------ contacto */
#contacto-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
#contacto-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
#contacto-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
#contacto-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--terra-050);
  color: var(--terra);
  font-size: 1.9rem;
  border: 2px solid var(--terra);
}
#contacto-name { color: var(--terra-700); }
#contacto-tel { font-family: 'Young Serif', serif; font-size: 1.35rem; color: var(--olivo-700); }
#contacto-tel:hover { color: var(--terra-700); }
#contacto-horario { color: var(--muted); }
#social-row { flex-wrap: wrap; }
#social-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .55rem 1.2rem;
  color: var(--tinta);
  font-weight: 700;
  transition: background-color .2s, color .2s, transform .2s;
}
#social-btn:hover { background: var(--olivo-700); color: #fff; transform: translateY(-2px); }
#social-btn i { font-size: 1.15rem; }

/* ------------------------------------------------------------------ blog */
#blog-home { background: linear-gradient(180deg, rgba(237, 225, 203, .5), transparent 45%); }
#blog-title { font-size: clamp(1.7rem, 3vw, 2.3rem); }
#post-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform .22s ease, box-shadow .22s ease; }
#post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
#post-thumb { background: var(--crema-2); color: var(--terra); font-size: 2rem; overflow: hidden; }
#post-thumb img { transition: transform .5s ease; object-fit: cover; }
#post-card:hover #post-thumb img { transform: scale(1.06); }
#post-cat, #cat-chip {
  background: var(--olivo-050);
  color: var(--olivo-700);
  border: 1px solid var(--olivo);
  border-radius: 100px;
  padding: .3rem .8rem;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}
#post-title { color: var(--terra-700); font-family: 'Young Serif', serif; }
#post-card:hover #post-title { color: var(--terra); }
#post-excerpt { color: var(--muted); }
#post-meta { color: var(--muted); border-top: 1px solid var(--line); padding-top: .75rem; }

/* article single */
#post-h1 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); }
#post-byline { color: var(--muted); }
#post-figure { border-radius: 20px; overflow: hidden; border: 6px solid #fff; box-shadow: var(--shadow-lift); }
#post-body { font-size: 1.06rem; }
#post-body h2 { font-family: 'Young Serif', serif; margin-top: 2rem; padding-left: 2.3rem; position: relative; }
#post-body h2::before { content: ''; position: absolute; left: 0; top: .3em; width: 30px; height: 19px; background: var(--sprig) center/contain no-repeat; }
#post-body h3 { font-family: 'Young Serif', serif; margin-top: 1.4rem; color: var(--olivo-700); }
#post-body img { max-width: 100%; height: auto; border-radius: 12px; }
#post-body a { color: var(--terra-700); text-decoration: underline; }
#post-cta { background: var(--olivo-700); color: var(--crema); }
#post-cta .btn-primary { background: var(--terra); border-color: var(--terra); }
#post-cta-icon { font-size: 1.9rem; color: var(--crema); }
#related-title { font-family: 'Young Serif', serif; position: relative; padding-left: 2.3rem; }
#related-title::before { content: ''; position: absolute; left: 0; top: .18em; width: 30px; height: 19px; background: var(--sprig) center/contain no-repeat; }

/* ------------------------------------------------------------------ page head (blog/shop/cat) */
#page-head { background: linear-gradient(180deg, rgba(252, 247, 236, .6), transparent); }
#crumbs a { color: var(--terra-700); }
#crumbs { color: var(--muted); }
#hero-lead { color: var(--muted); }

/* ------------------------------------------------------------------ shop / productos */
#shop-block {
  background: radial-gradient(120% 140% at 100% 0%, rgba(118, 127, 69, .35), transparent 55%), var(--terra);
  color: #fff;
  border-radius: 28px;
  box-shadow: var(--shadow-lift);
}
#shop-block::after {
  content: '';
  position: absolute; right: -6px; bottom: -14px;
  width: 200px; height: 130px;
  background: var(--sprig-cream) center/contain no-repeat;
  opacity: .16;
  transform: rotate(-8deg);
  pointer-events: none;
}
#shop-title { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
#shop-bigicon { font-size: 8rem; color: rgba(255, 255, 255, .24); }
#shop-chip { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .34); border-radius: 100px; padding: .5rem .95rem; font-weight: 700; transition: background-color .2s, color .2s; }
#shop-chip:hover { background: var(--crema); color: var(--terra-700); border-color: var(--crema); }
#cat-chip, #cat-chip-active { border-radius: 100px; padding: .5rem 1rem; font-weight: 800; border: 1.5px solid var(--line); transition: all .2s; }
#cat-chip { background: var(--paper); color: var(--terra-700); }
#cat-chip:hover { border-color: var(--terra); }
#cat-chip-active { background: var(--terra); color: #fff; border-color: var(--terra); }
#product-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-soft); transition: transform .2s ease, box-shadow .2s ease; }
#product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
#product-thumb { background: var(--crema-2); color: var(--terra); font-size: 1.8rem; overflow: hidden; }
#product-thumb img { object-fit: cover; }
#product-badge { background: var(--terra); color: #fff; border-radius: 100px; font-weight: 800; }
#product-discount { background: var(--olivo-700); color: #fff; border-radius: 100px; font-weight: 800; }
#product-brand { color: var(--muted); letter-spacing: 1px; font-weight: 800; }
#product-title { color: var(--terra-700); font-family: 'Young Serif', serif; }
#product-price, #product-h1 { color: var(--terra-700); font-family: 'Young Serif', serif; }
#product-old { color: var(--muted); }
#empty-shop { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-soft); }
#empty-icon { font-size: 3.2rem; color: var(--terra); }
#product-figure { border-radius: 20px; overflow: hidden; border: 6px solid #fff; box-shadow: var(--shadow-lift); }
#product-promo { background: var(--olivo-050); border: 1px dashed var(--olivo); border-radius: 14px; padding: .8rem 1rem; }
#product-reassure li { color: var(--muted); }
#product-reassure i { color: var(--olivo); }
#product-body h2, #product-body h3 { color: var(--terra-700); font-family: 'Young Serif', serif; margin-top: 1.6rem; }
#product-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
#product-body th, #product-body td { border: 1px solid var(--line); padding: .6rem .8rem; }
#product-body th { background: var(--crema-2); }

/* ------------------------------------------------------------------ forms (product/divers) */
.form-label { font-weight: 800; color: var(--terra-700); font-size: .9rem; }
.form-control { background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: .7rem .95rem; }
.form-control:focus { border-color: var(--terra); box-shadow: 0 0 0 .25rem rgba(190, 90, 56, .2); }

/* ------------------------------------------------------------------ seo / legal */
#seo h2 { color: var(--terra-700); }
#seo p { color: var(--muted); }
#legal h2 { font-family: 'Young Serif', serif; color: var(--terra-700); }

/* ------------------------------------------------------------------ footer */
#colophon {
  background: radial-gradient(120% 100% at 0% 0%, rgba(190, 90, 56, .18), transparent 45%), #3A3320 !important;
  position: relative;
  border-top: 3px solid var(--olivo);
}
#colophon::before { content: ''; position: absolute; inset: 0; background-image: var(--sprig-cream); background-size: 70px; opacity: .05; pointer-events: none; }
#colophon .container { position: relative; }
#footer-name { font-family: 'Young Serif', serif; color: var(--crema); font-size: 1.3rem; }
#footer-sub { color: var(--terra-050); font-weight: 700; }
#colophon .text-uppercase { color: var(--terra-050) !important; letter-spacing: 1px; }
#colophon a { color: rgba(244, 236, 218, .82); }
#colophon a:hover { color: #fff !important; }
#colophon hr { border-color: rgba(244, 236, 218, .16); }
#footer-social {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(244, 236, 218, .1);
  border: 1px solid rgba(244, 236, 218, .2);
  color: var(--crema) !important;
  font-size: 1.1rem;
  transition: background-color .2s, transform .2s;
}
#footer-social:hover { background: var(--terra); transform: translateY(-2px); color: #fff !important; }
#copyright { color: rgba(244, 236, 218, .82); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 991px) { #shop-bigicon { font-size: 6rem; } }
@media (max-width: 575px) {
  #hero-figure, #about-figure { transform: none; }
  #galeria-item { transform: none !important; }
}

/* focus visibles (WCAG) */
a:focus-visible, .btn:focus-visible, .nav-link:focus-visible, .form-control:focus-visible {
  outline: 3px solid var(--olivo);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  #galeria-item, #dest-card:hover, #contacto-card:hover, #post-card:hover, #product-card:hover, .btn:hover { transform: none !important; }
}