/*
 * Light Theme Override — carga DESPUÉS de style.css
 * Repinta el contenido al sistema de diseño light/tech de /catalogo.
 * Header y footer permanecen oscuros (hardcoded con !important).
 * NO modifica --fc-white para no romper texto blanco en botones.
 */

/* ─── 1. VARIABLES DE CONTENIDO (light) ─────────────────────────────────── */
:root {
  --fc-bg:          #FAF8F2;
  --fc-bg-2:        #F2F0EA;
  --fc-bg-3:        #F2F0EA;
  --fc-surface:     #FFFFFF;
  --fc-surface-2:   #EEF2EF;
  --fc-border:      #DDD9D0;
  --fc-border-2:    #C8C3B8;

  /* Dorado → solo CTAs de conversión */
  --fc-accent:      #C9A227;
  --fc-accent-2:    #9A7A1A;
  --fc-accent-glow: rgba(201,162,39,.2);

  /* Verde salvia — identidad */
  --fc-sage:        #536B57;
  --fc-sage-light:  #EEF2EF;
  --fc-sage-glow:   rgba(83,107,87,.2);

  /* Azul petróleo — links, íconos, checks */
  --fc-petrol:      #176B78;
  --fc-petrol-glow: rgba(23,107,120,.15);

  /* teal = petróleo (override dark theme) */
  --fc-teal:        #176B78;
  --fc-teal-glow:   rgba(23,107,120,.15);

  --fc-text:        #374151;
  --fc-text-2:      #4B5563;
  --fc-text-3:      #9CA3AF;

  --fc-shadow:      0 18px 40px -22px rgba(30,41,59,.18);
  --fc-shadow-lg:   0 18px 40px -22px rgba(30,41,59,.18);
  --fc-shadow-sm:   0 6px 18px -10px rgba(30,41,59,.12);

  --fc-radius:      14px;
  --fc-radius-lg:   18px;
  --fc-radius-xl:   22px;
}

/* ─── 2. BASE ───────────────────────────────────────────────────────────── */
body {
  font-family: 'Geist', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: #FAF8F2;
  color: #374151;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Geist', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #0f172a;
  letter-spacing: -0.02em;
}

a { color: #176B78; }
a:hover { color: #0d4f59; }

/* ─── 3. HEADER — RE-OSCURECER (inmune al cambio de variables) ───────────── */
.site-header {
  background: #2D2D2F !important;
  border-bottom-color: rgba(255,255,255,0.10) !important;
}
.site-header.scrolled {
  background: #2D2D2F !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45) !important;
}
.nav-menu a { color: #b0b0c8 !important; }
.nav-menu a:hover,
.nav-menu a.current { color: #ffffff !important; background: rgba(255,255,255,.08) !important; }
.nav-toggle-label span { background: #b0b0c8 !important; }
.nav-toggle-label:hover { background: rgba(255,255,255,.08) !important; }

/* Nav mobile overlay — stays dark */
@media (max-width: 1020px) {
  .nav-menu {
    background: #2D2D2F !important;
    border-bottom-color: rgba(255,255,255,0.10) !important;
  }
}

/* Botón del header — dorado (CTA conversión) */
.site-header .btn-primary {
  background: #C9A227 !important;
  color: #2D2D2F !important;
  box-shadow: 0 4px 16px rgba(201,162,39,.35) !important;
  font-weight: 700 !important;
}
.site-header .btn-primary:hover {
  background: #9A7A1A !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(201,162,39,.45) !important;
}

/* ─── 4. FOOTER — RE-OSCURECER ────────────────────────────────────────────── */
.site-footer {
  background: #2D2D2F !important;
  border-top-color: rgba(255,255,255,0.10) !important;
}
.footer-tagline    { color: #7070a0 !important; }
.footer-col-title  { color: #b0b0c8 !important; }
.footer-links a    { color: #7070a0 !important; }
.footer-links a:hover { color: #88c5cc !important; }
.footer-bottom     { border-top-color: rgba(255,255,255,0.07) !important; }
.footer-copy       { color: #7070a0 !important; }
.footer-legal a    { color: #7070a0 !important; }
.footer-legal a:hover { color: #b0b0c8 !important; }
.social-link {
  background: #1a1a27 !important;
  border-color: rgba(255,255,255,0.07) !important;
  color: #b0b0c8 !important;
}
.social-link:hover {
  background: rgba(83,107,87,.15) !important;
  border-color: #536B57 !important;
  color: #A8D5DA !important;
}

/* ─── 5. BOTONES (contenido) ─────────────────────────────────────────────── */
.btn-primary {
  background: #C9A227;
  color: #2D2D2F;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(201,162,39,.30);
  font-weight: 700;
}
.btn-primary:hover {
  background: #9A7A1A;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(201,162,39,.40);
}

.btn-secondary {
  background: #FFFFFF;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.btn-secondary:hover {
  background: #FFFFFF;
  border-color: #536B57;
  color: #176B78;
  box-shadow: 0 6px 18px -10px rgba(30,41,59,.18);
}

.btn-teal {
  background: #176B78;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(23,107,120,.25);
}
.btn-teal:hover {
  background: #0d4f59;
  color: #ffffff;
  transform: translateY(-2px);
}

/* ─── 6. SECTION LABEL (eyebrow pill) ───────────────────────────────────── */
.section-label {
  color: #536B57;
  background: #EEF2EF;
  border: 1px solid rgba(83,107,87,.20);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.section-label::before { display: none; }

/* ─── 7. HERO (front-page) ───────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(760px 360px at 50% -40px, rgba(83,107,87,.12), transparent 70%),
    radial-gradient(500px 260px at 80% 0,     rgba(83,107,87,.08), transparent 70%),
    linear-gradient(180deg, #FAF8F2, #FFFFFF) !important;
}
.hero-grid {
  background-image:
    linear-gradient(#e2e8f0 1px, transparent 1px),
    linear-gradient(90deg, #e2e8f0 1px, transparent 1px) !important;
  opacity: 0.5;
}
.hero-orb { display: none !important; }

.hero-title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
}
.hero-title .highlight {
  color: #C9A227 !important;
  -webkit-text-fill-color: #C9A227 !important;
  background: none !important;
}
.hero-subtitle { color: #475569 !important; }

.hero-badge {
  background: #EEF2EF;
  border-color: rgba(83,107,87,.25);
  color: #536B57;
}
.hero-badge .dot { background: #536B57; }

.hero-stats { border-top-color: #e2e8f0; }
.hero-stat-num {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
}
.hero-stat-num span { color: #176B78; }
.hero-stat-label { color: #94a3b8; }

/* ─── 8. SECTION TITLE & DESC ───────────────────────────────────────────── */
.section-title {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: none !important;
}
.section-title .grad {
  color: #536B57 !important;
  -webkit-text-fill-color: #536B57 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
.section-desc { color: #64748b; }

/* ─── 9. PAGE HERO (sub-páginas) ────────────────────────────────────────── */
.page-hero {
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(83,107,87,.07) 0%, transparent 60%), #F2F0EA !important;
}
.page-hero .page-title { color: #0f172a !important; }
.page-hero .page-desc  { color: #64748b !important; }

/* ─── 10. SERVICES ─────────────────────────────────────────────────────── */
.services-section { background: #F2F0EA !important; }

.service-card {
  background: #FFFFFF;
  border-color: #e2e8f0;
  box-shadow: 0 6px 18px -10px rgba(30,41,59,.18);
}
.service-card::before { background: linear-gradient(90deg, #536B57, #536B57); }
.service-card:hover {
  border-color: #536B57;
  transform: translateY(-5px);
  box-shadow: 0 18px 40px -22px rgba(30,41,59,.26);
}
.service-icon { background: #EEF2EF; }
.service-card:hover .service-icon { background: #D6E3D8; }
.service-title { color: #0f172a; }
.service-desc  { color: #64748b; }
.service-feature { color: #64748b; }
.service-feature::before { color: #536B57; }

/* ─── 11. CASOS DE USO ─────────────────────────────────────────────────── */
.casos-section { background: #FFFFFF !important; }

.caso-card {
  background: #FFFFFF;
  border-color: #e2e8f0;
  box-shadow: 0 6px 18px -10px rgba(30,41,59,.18);
}
.caso-card:hover {
  border-color: #536B57;
  background: #F2F0EA;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(30,41,59,.26);
}
.caso-sector { color: #176B78; }
.caso-title  { color: #0f172a; }
.caso-desc   { color: #94a3b8; }

/* ─── 12. PROCESO ───────────────────────────────────────────────────────── */
.proceso-section { background: #F2F0EA !important; }

.proceso-steps::before { background: linear-gradient(90deg, #536B57, #536B57); opacity: 0.2; }

.paso-num {
  background: #FFFFFF;
  border-color: #e2e8f0;
  box-shadow: 0 6px 18px -10px rgba(30,41,59,.18);
}
.proceso-step:hover .paso-num {
  border-color: #536B57;
  background: #EEF2EF;
  box-shadow: 0 0 0 4px rgba(83,107,87,.10);
}
.paso-num-label { background: #536B57; }
.paso-title { color: #0f172a; }
.paso-desc  { color: #94a3b8; }
.paso-time  { color: #176B78; background: #EEF2EF; border-color: rgba(83,107,87,.20); }

/* ─── 13. STUDIO ────────────────────────────────────────────────────────── */
.studio-section { background: #FFFFFF !important; }

.studio-card {
  background: #FFFFFF;
  border-color: #e2e8f0;
  box-shadow: 0 6px 18px -10px rgba(30,41,59,.18);
}
.studio-card.featured {
  border-color: rgba(83,107,87,.25);
  background: linear-gradient(180deg, #EEF2EF, #ffffff);
}
.studio-card:hover {
  border-color: #536B57;
  transform: translateY(-5px);
  box-shadow: 0 18px 40px -22px rgba(30,41,59,.26);
}
.studio-card-name { color: #0f172a; }
.studio-card-desc { color: #64748b; }
.stack-tag  { background: #F2F0EA; border-color: #e2e8f0; color: #64748b; }
.status-dev      { background: rgba(83,107,87,.10);  color: #176B78; border-color: rgba(83,107,87,.25); }
.status-soon     { background: #EEF2EF; color: #176B78; border-color: rgba(83,107,87,.25); }
.status-research { background: #F2F0EA; color: #64748b; border-color: #e2e8f0; }

/* ─── 14. NOSOTROS ──────────────────────────────────────────────────────── */
.nosotros-section { background: #FFFFFF !important; }

.valor-item {
  background: #FFFFFF;
  border-color: #e2e8f0;
  box-shadow: 0 6px 18px -10px rgba(30,41,59,.18);
}
.valor-item:hover { border-color: #536B57; }
.valor-icon  { background: #EEF2EF; }
.valor-title { color: #0f172a; }
.valor-desc  { color: #94a3b8; }

.about-card {
  background: #FFFFFF;
  border-color: #e2e8f0;
  box-shadow: 0 6px 18px -10px rgba(30,41,59,.18);
}
.about-card-title { color: #94a3b8; }
.tech-badge { background: #F2F0EA; border-color: #e2e8f0; color: #64748b; }
.tech-badge:hover { border-color: #536B57; color: #176B78; }

/* ─── 15. BLOG ──────────────────────────────────────────────────────────── */
.blog-section { background: #F2F0EA !important; }

.blog-card {
  background: #FFFFFF;
  border-color: #e2e8f0;
  box-shadow: 0 6px 18px -10px rgba(30,41,59,.18);
}
.blog-card:hover {
  border-color: #536B57;
  transform: translateY(-5px);
  box-shadow: 0 18px 40px -22px rgba(30,41,59,.26);
}
.blog-card-img { background: #EEF2EF; }
.blog-cat            { color: #176B78; }
.blog-card-title     { color: #0f172a; }
.blog-card-title a:hover { color: #176B78; }
.blog-meta           { color: #94a3b8; }

/* Blog archive / single */
.single-post-wrap { background: #FFFFFF; }
.single-post-wrap .entry-title { color: #0f172a !important; }
.entry-content         { color: #475569; }
.entry-content h2,
.entry-content h3      { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; }
.entry-content a       { color: #176B78; }
.entry-content strong  { color: #0f172a; }

/* Blog archive listing */
.blog-archive-wrap {
  padding: calc(var(--fc-header-h) + 48px) 0 80px;
  background: #FFFFFF;
}
.blog-archive-card {
  background: #FFFFFF;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 6px 18px -10px rgba(30,41,59,.18);
}
.blog-archive-card:hover {
  border-color: #536B57;
  transform: translateY(-4px);
}

/* ─── 16. TESTIMONIOS ───────────────────────────────────────────────────── */
.testi-section { background: #FFFFFF !important; }
.testi-card {
  background: #FFFFFF;
  border-color: #e2e8f0;
  box-shadow: 0 6px 18px -10px rgba(30,41,59,.18);
}
.testi-card:hover { border-color: #536B57; }
.testi-text   { color: #64748b; }
.testi-name   { color: #0f172a; }
.testi-role   { color: #94a3b8; }
.testi-avatar { background: linear-gradient(135deg, #536B57, #536B57); }

/* ─── 17. CTA BAND ──────────────────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, #FAF8F2 0%, #EEF2EF 100%) !important;
  border-color: rgba(83,107,87,.20) !important;
}
.cta-title { color: #0f172a; }

/* ─── 18. FORMULARIO DE CONTACTO ────────────────────────────────────────── */
.contacto-section { background: #F2F0EA !important; }

.contacto-item {
  background: #FFFFFF;
  border-color: #e2e8f0;
}
.contacto-item-icon  { background: #EEF2EF; }
.contacto-item-label { color: #94a3b8; }
.contacto-item-value { color: #0f172a; }
.contacto-item-value a { color: #0f172a; }
.contacto-item-value a:hover { color: #176B78; }

.contact-form {
  background: #FFFFFF;
  border-color: #e2e8f0;
  box-shadow: 0 18px 40px -22px rgba(30,41,59,.26);
}
.form-title { color: #0f172a !important; }
.form-group label { color: #475569; }

.form-group input,
.form-group textarea {
  background-color: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: #94a3b8; }
.form-group input:focus,
.form-group textarea:focus {
  border-color: #536B57;
  box-shadow: 0 0 0 3px rgba(83,107,87,.12);
}
/* ── Select estilizado (quita apariencia nativa, flecha propia) ── */
.form-group select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #ffffff;
  border-color: #e2e8f0;
  color: #94a3b8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
.form-group select:focus {
  border-color: #536B57;
  box-shadow: 0 0 0 3px rgba(83,107,87,.12);
}
.form-group select.has-value { color: #0f172a; }
.form-group select option { background: #FFFFFF; color: #0f172a; }

.form-success {
  background: rgba(83,107,87,.08);
  border-color: rgba(83,107,87,.20);
  color: #176B78;
}

/* ─── 19. PÁGINA CATÁLOGO — PRICING + CPT CATALOG ──────────────────────── */

/* ---- Pricing cards ---- */
.pricing-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 6px 20px -10px rgba(30,41,59,.15);
  transition: transform .2s, box-shadow .2s;
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -16px rgba(30,41,59,.22);
}
.pricing-card--featured {
  border-color: #536B57;
  background: linear-gradient(180deg,#EEF2EF 0%,#fff 60%);
  box-shadow: 0 8px 28px -10px rgba(83,107,87,.25);
}
.pricing-card--featured:hover {
  box-shadow: 0 20px 44px -14px rgba(83,107,87,.30);
}
.pricing-card-inner {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plan-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  align-self: flex-start;
}
.plan-star {
  font-size: .8rem;
  font-weight: 700;
  color: #176B78;
  margin-bottom: 6px;
  letter-spacing: .02em;
}
.plan-price {
  margin-bottom: 10px;
}
.price-amt {
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
}
.price-period {
  font-size: .9rem;
  color: #64748b;
  font-weight: 500;
}
.plan-tagline {
  font-size: .92rem;
  color: #64748b;
  margin: 0 0 18px;
  line-height: 1.5;
}
.plan-features {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.plan-features li {
  font-size: .9rem;
  color: #334155;
  padding-left: 0;
}
.plan-features li.muted {
  color: #94a3b8;
}
.btn-block {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: auto;
}
.pricing-cta {
  font-size: .93rem;
  padding: 12px 20px;
}

/* ---- Extras block ---- */
.extra-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 20px;
}
.extra-name {
  font-weight: 700;
  font-size: .9rem;
  color: #0f172a;
  margin-bottom: 4px;
}
.extra-desc {
  font-size: .82rem;
  color: #64748b;
  margin-bottom: 8px;
}
.extra-price {
  font-size: .9rem;
  font-weight: 700;
  color: #176B78;
}

/* ---- Compare table ---- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.compare-table th,
.compare-table td {
  padding: 11px 16px;
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
  color: #475569;
}
.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
  color: #0f172a;
  font-weight: 600;
}
.compare-table th {
  background: #F2F0EA;
  font-weight: 700;
  color: #334155;
}
.compare-table .featured-col {
  background: rgba(83,107,87,.06);
  color: #176B78;
  font-weight: 600;
}
.compare-table tr:last-child td { border-bottom: none; }

/* ---- Catalog grid ---- */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.sitio-card {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px -8px rgba(30,41,59,.12);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---- Browser mockup preview ---- */
.browser-mockup {
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  border-bottom: 1.5px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 12px;
  height: 34px;
}
.browser-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.browser-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}
.dot-red    { background: #ff5f57; }
.dot-yellow { background: #ffbd2e; }
.dot-green  { background: #28ca42; }
.browser-url {
  flex: 1;
  font-size: 0.7rem;
  color: #475569;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 2px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, monospace;
  min-width: 0;
}
.browser-live {
  font-size: 0.66rem;
  font-weight: 700;
  color: #16a34a;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .01em;
}
.browser-screen {
  height: 190px;
  overflow: hidden;
  position: relative;
  background: #f1f5f9;
}
.browser-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .35s ease;
}
.sitio-card:hover .browser-screen img {
  transform: scale(1.03);
}
.browser-screen--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #EEF2EF, #FAF8F2);
}
.sitio-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px -16px rgba(30,41,59,.22);
  border-color: rgba(83,107,87,.30);
}
.sitio-card--featured { border-color: #536B57; }
.sitio-star-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #536B57;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.sitio-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sitio-rubro {
  font-size: .75rem;
  font-weight: 700;
  color: #176B78;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.sitio-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px;
  line-height: 1.35;
}
.sitio-excerpt {
  font-size: .875rem;
  color: #64748b;
  margin: 0 0 18px;
  line-height: 1.55;
  flex: 1;
}
.sitio-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
}
.btn-sitio-ver {
  font-size: .85rem;
  font-weight: 600;
  color: #176B78;
  text-decoration: none;
  padding: 7px 14px;
  border: 1.5px solid rgba(23,107,120,.35);
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.btn-sitio-ver:hover {
  background: #536B57;
  color: #fff;
  border-color: #536B57;
}
.btn-sitio-wa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  background: #25d366;
  border-radius: 8px;
  padding: 7px 14px;
  text-decoration: none;
  transition: background .15s;
}
.btn-sitio-wa:hover { background: #1ebe5a; }

/* ---- Rubro filter chips ---- */
.chip {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1.5px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.chip:hover {
  border-color: #536B57;
  color: #536B57;
}
.chip--active {
  background: #536B57;
  color: #fff;
  border-color: #536B57;
}

/* ─── 20. OVERFLOW HORIZONTAL — MOBILE SAFE ─────────────────────────────── */
html, body { overflow-x: hidden; max-width: 100vw; }

/* ─── 21. PAGE WRAP — paleta ámbar completa, sin morado/azul ────────────── */
/* Sobreescribe --fc-white dentro de .page-wrap para que los inline         */
/* style="color:var(--fc-white)" queden oscuros en las páginas internas.    */
.page-wrap {
  --fc-white:   #141414;
  --fc-bg:      #ffffff;
  --fc-bg-2:    #F2F0EA;
  --fc-surface: #ffffff;
  --fc-border:  #eee7db;
  --fc-text-2:  #4a4a4a;
  --fc-text-3:  #8a8a8a;
  --fc-accent:  #536B57;
  --fc-teal:    #176B78;
  background:   #ffffff;
  color:        #4a4a4a;
}
/* Empty catalog thumb — ámbar, sin azul */
.sitio-thumb--empty {
  background: linear-gradient(135deg, #EEF2EF, #FAF8F2) !important;
}