/* ===================================================================
   recetasIndie — frontend.css v2.0.0
   Alineado al tema Comiweb. Sin selectores HTML bare. !important global.
   =================================================================== */

.comindie-context {
  --ci-bg:        var(--cw-off-white,    #FFF8F3) !important;
  --ci-card:      var(--cw-white,        #FFFFFF) !important;
  --ci-ink:       var(--cw-text,         #1C1917) !important;
  --ci-muted:     var(--cw-text-light,   #57534E) !important;
  --ci-accent:    var(--cw-orange,       #E85D04) !important;
  --ci-accent-d:  var(--cw-orange-dark,  #C44B02) !important;
  --ci-leaf:      var(--cw-green,        #0D4F2E) !important;
  --ci-line:      var(--cw-gray-light,   #F4F1EE) !important;
  --ci-shadow:    var(--cw-shadow-sm,    0 2px 8px rgba(0,0,0,0.08)) !important;
  --ci-radius:    var(--cw-radius,       10px) !important;
  --ci-font:      var(--font-body,       'Nunito', system-ui, sans-serif) !important;
  --ci-serif:     var(--font-title,      'Playfair Display', Georgia, serif) !important;
  background: var(--ci-bg) !important;
}

.comindie-main {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 32px 20px 64px !important;
  color: var(--ci-ink) !important;
  font-family: var(--ci-font) !important;
}

/* Hero */
.comindie-hero {
  text-align: center !important;
  padding: 28px 0 36px !important;
  border-bottom: 1px solid var(--ci-line) !important;
  margin-bottom: 36px !important;
}
.comindie-eyebrow {
  font-size: 0.78rem !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--ci-leaf) !important;
  margin: 0 0 8px !important;
  font-weight: 700 !important;
  font-family: var(--ci-font) !important;
}
.comindie-hero-title {
  font-family: var(--ci-serif) !important;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  margin: 0 0 8px !important;
  color: var(--ci-ink) !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
}
.comindie-hero-sub {
  color: var(--ci-muted) !important;
  margin: 0 0 20px !important;
  font-size: 1.05rem !important;
}
.comindie-cta {
  display: inline-block !important;
  background: var(--ci-accent) !important;
  color: #fff !important;
  padding: 12px 26px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-family: var(--ci-font) !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
.comindie-cta:hover {
  background: var(--ci-accent-d) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}

/* Grid */
.comindie-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 22px !important;
}
.comindie-card {
  background: var(--ci-card) !important;
  border-radius: var(--ci-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--ci-shadow) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.comindie-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(43, 33, 24, 0.12) !important;
}
.comindie-card-link {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
  height: 100% !important;
}
.comindie-card-thumb {
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background: var(--ci-line) !important;
}
.comindie-card-thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}
.comindie-card:hover .comindie-card-thumb-img {
  transform: scale(1.05) !important;
}
.comindie-card-body {
  padding: 16px 18px 18px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.comindie-card-title {
  font-family: var(--ci-serif) !important;
  font-size: 1.2rem !important;
  margin: 0 !important;
  color: var(--ci-ink) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.comindie-card-meta {
  display: flex !important;
  gap: 10px !important;
  font-size: 0.82rem !important;
  color: var(--ci-muted) !important;
}
.comindie-card-meta-item {
  background: var(--ci-bg) !important;
  padding: 3px 10px !important;
  border-radius: 50px !important;
}
.comindie-card-time {
  display: inline-block !important;
  margin: 8px 0 14px 14px !important;
  font-size: 0.82rem !important;
  color: var(--ci-muted) !important;
}

.comindie-empty {
  text-align: center !important;
  color: var(--ci-muted) !important;
  padding: 40px 0 !important;
}

/* Pagination */
.comindie-pagination {
  margin-top: 36px !important;
  text-align: center !important;
}
.comindie-pagination .page-numbers {
  display: inline-block !important;
  padding: 8px 14px !important;
  margin: 0 4px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: var(--ci-ink) !important;
  border: 1px solid var(--ci-line) !important;
  font-family: var(--ci-font) !important;
}
.comindie-pagination .current {
  background: var(--ci-accent) !important;
  color: #fff !important;
  border-color: var(--ci-accent) !important;
}

/* Single */
.comindie-single { max-width: 820px !important; }
.comindie-breadcrumbs {
  font-size: 0.85rem !important;
  color: var(--ci-muted) !important;
  margin-bottom: 14px !important;
}
.comindie-breadcrumbs-link {
  color: var(--ci-leaf) !important;
  text-decoration: none !important;
}
.comindie-breadcrumbs-sep {
  margin: 0 6px !important;
}
.comindie-recipe-head { margin-bottom: 16px !important; }
.comindie-recipe-title {
  font-family: var(--ci-serif) !important;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem) !important;
  margin: 0 0 8px !important;
  line-height: 1.15 !important;
  color: var(--ci-ink) !important;
  font-weight: 700 !important;
}
.comindie-by {
  color: var(--ci-muted) !important;
  margin: 0 0 12px !important;
  font-size: 0.95rem !important;
}
.comindie-excerpt {
  font-size: 1.1rem !important;
  color: var(--ci-muted) !important;
  line-height: 1.55 !important;
}
.comindie-recipe-figure {
  margin: 24px 0 !important;
  border-radius: var(--ci-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--ci-shadow) !important;
}
.comindie-recipe-figure-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.comindie-stats {
  list-style: none !important;
  padding: 18px !important;
  margin: 24px 0 !important;
  background: #fff !important;
  border-radius: var(--ci-radius) !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
  gap: 14px !important;
  box-shadow: var(--ci-shadow) !important;
}
.comindie-stats-item { text-align: center !important; }
.comindie-stats-label {
  display: block !important;
  font-size: 0.72rem !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--ci-leaf) !important;
  margin-bottom: 4px !important;
  font-weight: 700 !important;
}
.comindie-stats-value {
  font-family: var(--ci-serif) !important;
  font-size: 1.15rem !important;
  color: var(--ci-ink) !important;
}

.comindie-section { margin: 32px 0 !important; }
.comindie-section-title {
  font-family: var(--ci-serif) !important;
  font-size: 1.6rem !important;
  margin: 0 0 16px !important;
  color: var(--ci-ink) !important;
  border-bottom: 2px solid var(--ci-accent) !important;
  display: inline-block !important;
  padding-bottom: 4px !important;
  font-weight: 700 !important;
}

.comindie-ingredients {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  columns: 2 !important;
  column-gap: 28px !important;
}
.comindie-ingredients-item {
  padding: 10px 0 10px 28px !important;
  position: relative !important;
  border-bottom: 1px dashed var(--ci-line) !important;
  break-inside: avoid !important;
}
.comindie-ingredients-item::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--ci-leaf) !important;
  transform: translateY(-50%) !important;
}

.comindie-steps {
  padding-left: 0 !important;
  counter-reset: step !important;
  list-style: none !important;
}
.comindie-steps-item {
  counter-increment: step !important;
  padding: 14px 14px 14px 56px !important;
  position: relative !important;
  margin-bottom: 12px !important;
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: var(--ci-shadow) !important;
  line-height: 1.55 !important;
}
.comindie-steps-item::before {
  content: counter(step) !important;
  position: absolute !important;
  left: 14px !important;
  top: 14px !important;
  width: 30px !important;
  height: 30px !important;
  background: var(--ci-accent) !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
}

.comindie-video-iframe {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  border: 0 !important;
  border-radius: var(--ci-radius) !important;
}
.comindie-recipe-foot {
  margin-top: 40px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--ci-line) !important;
}
.comindie-back {
  color: var(--ci-leaf) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

/* Form */
.comindie-form {
  max-width: 720px !important;
  background: #fff !important;
  padding: 28px !important;
  border-radius: var(--ci-radius) !important;
  box-shadow: var(--ci-shadow) !important;
  font-family: var(--ci-font) !important;
}
.comindie-form-label {
  display: block !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
  color: var(--ci-ink) !important;
  font-size: 0.92rem !important;
}
.comindie-form-input,
.comindie-form-select,
.comindie-form-textarea {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid var(--ci-line) !important;
  border-radius: 8px !important;
  font: inherit !important;
  background: var(--ci-bg) !important;
  color: var(--ci-ink) !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
.comindie-form-input:focus,
.comindie-form-select:focus,
.comindie-form-textarea:focus {
  outline: none !important;
  border-color: var(--ci-accent) !important;
  background: #fff !important;
}
.comindie-form-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 14px !important;
  margin: 14px 0 !important;
}
.comindie-form-row { margin: 14px 0 !important; }
.comindie-submit {
  background: var(--ci-accent) !important;
  color: #fff !important;
  border: 0 !important;
  padding: 12px 28px !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  font-family: var(--ci-font) !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
.comindie-submit:hover {
  background: var(--ci-accent-d) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

.comindie-notice {
  padding: 12px 16px !important;
  border-radius: 10px !important;
  margin-bottom: 18px !important;
  font-size: 0.95rem !important;
}
.comindie-ok {
  background: #e8f0e0 !important;
  color: #3a5a2a !important;
  border: 1px solid #b3cfa0 !important;
}
.comindie-err {
  background: #fbe5df !important;
  color: #8f3a26 !important;
  border: 1px solid #e7b3a4 !important;
}

@media (max-width: 600px) {
  .comindie-main { padding: 20px 14px 40px !important; }
  .comindie-ingredients { columns: 1 !important; }
  .comindie-form { padding: 18px !important; }
}