/* ============================================================
   COMECAT — Editorial Design System  2026
   Fraunces (serif) + Inter (sans) + JetBrains Mono
   Palette: cream / black / camel-tobacco
   ============================================================ */

:root {
  --bg:           #F5EFE6;
  --bg-alt:       #EFE8DD;
  --bg-elev:      #FAF6EF;
  --paper:        #FFFEFA;
  --ink:          #141210;
  --ink-soft:     #2A2622;
  --ink-muted:    #6B635A;
  --ink-faint:    rgba(154,145,133,.52);
  --rule:         rgba(20,18,16,.1);
  --rule-strong:  rgba(20,18,16,.2);
  --accent:       #8B6F47;
  --accent-deep:  #5C4A30;
  --accent-soft:  #C9A77C;
  --danger:       #A0442A;
  --ok:           #4A6B3A;
  --serif:        'Fraunces','Cormorant Garamond','Times New Roman',serif;
  --sans:         'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:         'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --size-hero:    clamp(56px,8vw,148px);
  --size-display: clamp(44px,6vw,112px);
  --size-h1:      clamp(36px,4.5vw,80px);
  --size-h2:      clamp(28px,3.2vw,54px);
  --size-h3:      clamp(22px,2vw,34px);
  --size-lede:    clamp(17px,1.3vw,21px);
  --size-body:    16px;
  --size-small:   13px;
  --size-micro:   11px;
  --gutter:       clamp(20px,4vw,72px);
  --maxw:         1440px;
  --ease:         cubic-bezier(.2,.7,.2,1);
}

[data-theme="dark"] {
  --bg:           #100E0C;
  --bg-alt:       #161310;
  --bg-elev:      #1C1814;
  --paper:        #1F1B16;
  --ink:          #F5EFE6;
  --ink-soft:     #E8DFD2;
  --ink-muted:    #A89A86;
  --ink-faint:    #6B635A;
  --rule:         rgba(245,239,230,.1);
  --rule-strong:  rgba(245,239,230,.2);
  --accent:       #D4A574;
  --accent-deep:  #E8C9A0;
  --accent-soft:  #8B6F47;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--size-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .5s var(--ease), color .5s var(--ease);
  overflow-x: hidden;
}

h1, h2, h3, h4, .serif {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.02;
  color: var(--ink);
  text-wrap: balance;
}
.italic { font-style: italic; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rule  { height: 1px; background: var(--rule);        width: 100%; }
.rule-strong { height: 1px; background: var(--rule-strong); width: 100%; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 28px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--ink); color: var(--ink);
  background: transparent; border-radius: 999px;
  transition: all .3s var(--ease); white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn-solid { background: var(--ink); color: var(--bg); }
.btn-solid:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-ghost { border-color: var(--rule-strong); color: var(--ink-soft); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-sm { padding: 10px 18px; font-size: 11px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: 4px;
  transition: all .3s var(--ease);
}
.link-arrow:hover { color: var(--accent-deep); border-color: var(--accent-deep); gap: 14px; }
[data-theme="dark"] .link-arrow:hover { color: var(--accent-deep); border-color: var(--accent-deep); }

/* --- Tags --- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 500;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  color: var(--ink-soft); background: transparent;
}
.tag.filled  { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tag.accent  { background: var(--accent); color: var(--paper); border-color: var(--accent); }

/* --- Stars --- */
.stars { display: inline-flex; align-items: center; gap: 1px; color: var(--accent-deep); }
[data-theme="dark"] .stars { color: var(--accent); }

/* --- Price --- */
.price { display: inline-flex; align-items: baseline; gap: 8px; }
.price-now { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; }
.price-old { font-family: var(--sans); font-size: 13px; color: var(--ink-muted); text-decoration: line-through; }

/* --- Animations --- */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fadeup  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.fadeup { animation: fadeup .9s var(--ease) both; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.4; transform:scale(1.3); } }
@keyframes footerpulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 4px; }

/* ===========================
   TOP STRIP
   =========================== */
.top-strip {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px var(--gutter);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bg); background: var(--ink); font-weight: 500;
}
.top-strip-right { opacity: .7; }

/* ===========================
   HEADER
   =========================== */
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: var(--bg); border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s, backdrop-filter .4s;
}
.site-header.scrolled {
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--rule);
}
.header-inner {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 40px;
  padding: 20px var(--gutter); max-width: var(--maxw); margin: 0 auto;
}
.logo { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.logo-text { display: flex; flex-direction: column; gap: 2px; }
.logo-sub { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.nav-main { display: flex; justify-content: center; gap: 24px; }
.nav-link { position: relative; font-size: 12.5px; letter-spacing: .02em; color: var(--ink-soft); padding: 6px 0; transition: color .25s var(--ease); white-space: nowrap; }
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); }
.nav-link.active::after { content:''; position:absolute; left:50%; bottom:-2px; width:4px; height:4px; background:var(--accent-deep); border-radius:50%; transform:translateX(-50%); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.icon-btn { width:40px; height:40px; display:grid; place-items:center; border-radius:999px; color:var(--ink); transition:background .25s var(--ease); }
.icon-btn:hover { background: var(--rule); }
.menu-btn { display: none; }
@media (max-width: 1180px) { .nav-main { gap: 16px; } .nav-link { font-size: 11.5px; } }
@media (max-width: 1040px) { .nav-main { display: none; } .menu-btn { display: grid; } }

/* Mobile nav drawer */
.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--bg); padding: 80px var(--gutter) 40px;
  flex-direction: column; gap: 4px;
}
.mobile-nav.open { display: flex; }
.mobile-nav .nav-link { font-size: 28px; font-family: var(--serif); padding: 16px 0; border-bottom: 1px solid var(--rule); }
.mobile-nav-close { position: absolute; top: 24px; right: var(--gutter); }

/* ===========================
   FOOTER
   =========================== */
.site-footer { background:var(--ink); color:var(--bg); margin-top:120px; padding:80px var(--gutter) 32px; }
.site-footer .eyebrow { color:var(--bg); opacity:.5; }
.footer-main { max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.2fr 2fr; gap:80px; padding-bottom:80px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand { display:flex; flex-direction:column; gap:24px; }
.footer-brand .serif { color:var(--bg); }
.footer-tagline { max-width:360px; color:rgba(255,255,255,.67); font-size:15px; line-height:1.5; }
.footer-cols { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.footer-col { display:flex; flex-direction:column; gap:10px; }
.footer-col a { font-size:14px; color:rgba(255,255,255,.8); transition:color .2s; width:fit-content; }
.footer-col a:hover { color:var(--bg); }
.footer-news { font-size:13px; color:rgba(255,255,255,.67); margin:6px 0 4px; }
.footer-form { display:flex; align-items:center; gap:4px; border-bottom:1px solid rgba(255,255,255,.27); padding-bottom:8px; }
.footer-form input { flex:1; background:transparent; border:0; color:var(--bg); font-family:var(--sans); font-size:13px; padding:8px 0; outline:none; }
.footer-form input::placeholder { color:rgba(255,255,255,.4); }
.footer-form button { width:28px; height:28px; border-radius:999px; background:var(--bg); color:var(--ink); display:grid; place-items:center; transition:background .2s; }
.footer-form button:hover { background:var(--accent-deep); color:var(--bg); }
.footer-consent { font-size:10px; letter-spacing:.08em; color:rgba(255,255,255,.4); text-transform:uppercase; }
.footer-meta { max-width:var(--maxw); margin:32px auto 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:12px; color:rgba(255,255,255,.53); letter-spacing:.04em; }
.footer-meta-left { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.footer-meta-left a:hover { color:var(--bg); }
.footer-meta-left .sep { opacity:.3; }
.footer-aff { font-style:italic; opacity:.6; }
.footer-meta-right { display:inline-flex; align-items:center; gap:10px; }
.footer-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#8BB37B; animation:footerpulse 2s infinite; }
@media (max-width:900px) { .footer-main { grid-template-columns:1fr; gap:48px; } .footer-cols { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .footer-cols { grid-template-columns:1fr; } }

/* ===========================
   SCROLL ANIMATIONS
   =========================== */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ===========================
   INNER PAGE HERO
   =========================== */
.inner-hero {
  padding: 60px var(--gutter) 48px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.inner-hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 24px; flex-wrap: wrap;
}
.breadcrumb a { color: var(--ink-muted); transition: color .2s; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { opacity: .5; }
.inner-hero h1 {
  font-family: var(--serif);
  font-size: var(--size-h1);
  line-height: 1.05;
  letter-spacing: -.025em;
  max-width: 900px;
  color: var(--ink);
}
.inner-hero-meta {
  display: flex; align-items: center; gap: 20px;
  margin-top: 20px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-muted);
}

/* ===========================
   ARTICLE BODY
   =========================== */
.inner-article {
  padding: 64px var(--gutter) 120px;
  background: var(--bg);
}
.inner-article-inner {
  max-width: 860px;
  margin: 0 auto;
}
.inner-article h2 {
  font-family: var(--serif);
  font-size: var(--size-h2);
  margin-top: 56px; margin-bottom: 20px;
  padding-top: 48px;
  border-top: 1px solid var(--rule);
  color: var(--ink);
}
.inner-article h3 {
  font-family: var(--serif);
  font-size: var(--size-h3);
  margin-top: 36px; margin-bottom: 14px;
  color: var(--ink);
}
.inner-article h4 {
  font-family: var(--sans);
  font-size: 14px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  margin-top: 28px; margin-bottom: 10px;
  color: var(--ink-muted);
}
.inner-article p {
  font-size: 17px; line-height: 1.75;
  color: var(--ink-soft); margin-bottom: 18px;
}
.inner-article a { color: var(--accent-deep); text-decoration: underline; text-decoration-thickness: 1px; }
[data-theme="dark"] .inner-article a { color: var(--accent); }
.inner-article a:hover { color: var(--ink); }
.inner-article ul, .inner-article ol {
  font-size: 17px; line-height: 1.75;
  color: var(--ink-soft); margin: 0 0 18px 24px;
}
.inner-article li { margin-bottom: 8px; }
.inner-article strong { color: var(--ink); font-weight: 600; }
.inner-article em { color: var(--accent-deep); font-style: italic; }
[data-theme="dark"] .inner-article em { color: var(--accent); }
.inner-article img {
  width: 100%; height: auto;
  border: 1px solid var(--rule);
  margin: 32px 0;
  display: block;
}
.inner-article figure { margin: 32px 0; }
.inner-article figcaption {
  font-size: 13px; color: var(--ink-muted);
  text-align: center; margin-top: 8px;
  font-style: italic;
}
.inner-article table {
  width: 100%; border-collapse: collapse;
  margin: 32px 0; font-size: 15px;
}
.inner-article th {
  text-align: left; padding: 12px 16px;
  border-bottom: 2px solid var(--rule-strong);
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-muted);
}
.inner-article td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft); font-size: 15px;
  vertical-align: top;
}
.inner-article tr:hover td { background: var(--bg-alt); }
.inner-article blockquote {
  border-left: 3px solid var(--accent);
  padding: 16px 24px; margin: 32px 0;
  background: var(--bg-alt);
  color: var(--ink-soft);
  font-style: italic; font-size: 18px;
}
.inner-article .wp-block-image,
.inner-article .et_pb_image,
.inner-article .et_pb_image_wrap { margin: 32px 0; }
.inner-article .et_pb_image img { border: 1px solid var(--rule); }

/* ===== Affiliate / Product boxes ===== */
.inner-article .affiliate-box,
.inner-article .product-comparison-table,
.inner-article .wp-block-table {
  margin: 32px 0;
}
/* Amazon / affiliate CTA buttons */
.inner-article a[href*="amazon"],
.inner-article a[href*="zooplus"],
.inner-article a[href*="tiendanimal"],
.inner-article a.buy-btn, .inner-article .cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px;
  background: var(--ink); color: var(--bg);
  font-size: 12px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
  border-radius: 999px; border: 1px solid var(--ink);
  transition: all .25s;
}
.inner-article a[href*="amazon"]:hover,
.inner-article a[href*="zooplus"]:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: white; }

/* ===== TOC ===== */
.inner-article #ez-toc-container,
.inner-article .ez-toc-container {
  background: var(--bg-alt); border: 1px solid var(--rule);
  padding: 28px 32px; margin: 40px 0;
  border-radius: 0;
}
.inner-article #ez-toc-container .ez-toc-title {
  font-family: var(--sans); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 500;
  margin-bottom: 16px;
}
.inner-article #ez-toc-container nav a {
  color: var(--ink-soft); font-size: 14px;
  text-decoration: none; line-height: 1.8;
}
.inner-article #ez-toc-container nav a:hover { color: var(--accent-deep); }

/* Hide WordPress-specific junk */
.inner-article .wpadminbar,
.inner-article #wpadminbar { display: none !important; }