/*
Theme Name: EncuentraFacil
Description: Tema a medida para EncuentraFacil.es, catalogo de productos afiliados de Amazon.
Author: EncuentraFacil
Version: 1.0
*/

:root {
  --red: #D6001C;
  --red-dark: #A30016;
  --black: #0A0A0A;
  --ink: #0A0A0A;
  --stone: #565656;
  --mist: #F7F7F7;
  --white: #FFFFFF;
  --border: #111111;
}
body { font-family: 'DM Sans', sans-serif; background: var(--white); color: var(--ink); }
.font-display { font-family: 'Playfair Display', Georgia, serif; }

.disclosure-bar {
  background: var(--black); color: #fff; font-size: 12.5px; text-align: center;
  padding: 8px 12px; line-height: 1.4;
}

.category-tab {
  transition: all 0.2s ease; border: 2px solid var(--black); background: transparent; color: var(--black);
}
.category-tab.active { background: var(--red); color: #fff; border-color: var(--black); }
.category-tab:not(.active):hover { background: rgba(214,0,28,0.08); }

.product-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid #ececec;
}
.product-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -10px rgba(0,0,0,0.18); }

.fav-btn { transition: all 0.15s ease; }
.fav-btn.active i { fill: var(--red); stroke: var(--red); }

.cta-btn {
  background: var(--red); color: #fff; border: 2px solid var(--black); transition: background 0.2s ease;
}
.cta-btn:hover { background: var(--red-dark); }

.modal-overlay { background: rgba(10,10,10,0.65); backdrop-filter: blur(4px); animation: fadeIn 0.2s ease; }
.modal-content { animation: slideUp 0.3s cubic-bezier(0.4,0,0.2,1); }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0;transform:translate(-50%,-50%) translateY(20px)} to{opacity:1;transform:translate(-50%,-50%) translateY(0)} }
@keyframes cardIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.card-animate { animation: cardIn 0.35s ease forwards; }
.fav-item-enter { animation: cardIn 0.3s ease forwards; }

@keyframes btnPop { 0%{transform:scale(1)} 50%{transform:scale(0.94)} 100%{transform:scale(1)} }
.btn-click { animation: btnPop 0.25s ease-out; }

.scrollbar-thin::-webkit-scrollbar { width:5px; }
.scrollbar-thin::-webkit-scrollbar-track { background:transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:10px; }

@media (max-width: 1023px) {
  #fav-panel-fixed .panel-header { height: 88px !important; }
  #fav-panel-fixed { max-height: 88px; }
}

#fav-panel-fixed {
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  background:#fff; border-top:2px solid var(--black); color:#000;
  transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1);
  max-height:200px; overflow:hidden;
}
#fav-panel-fixed.panel-open { max-height: calc(100 * min(var(--vh, 1vh), 1vh) - 20px) !important; }

html { scroll-behavior: smooth; }
.breathing-image { transition: transform 0.7s ease; display:block; }
.img-container { overflow: hidden; }
.img-container:hover .breathing-image { transform: scale(1.045); }

.article-hero { background: var(--mist); text-align:center; padding: 4rem 1.5rem 3.5rem; }
.article-hero .eyebrow { color: var(--red); font-weight:700; font-size:0.8rem; letter-spacing:0.15em; text-transform:uppercase; }
.article-hero h1 { font-family:'Playfair Display', Georgia, serif; color:var(--ink); font-weight:700; line-height:1.08; font-size:clamp(2.1rem, 5vw, 3.75rem); margin-top:0.75rem; max-width:46rem; margin-left:auto; margin-right:auto; }
.article-hero .meta { color:var(--stone); font-size:0.85rem; margin-top:1rem; }

.article-content blockquote {
  border:none; text-align:center; font-family:'Playfair Display', Georgia, serif; font-style:italic;
  font-size:clamp(1.35rem, 3vw, 1.85rem); line-height:1.35; color:var(--ink); margin:2.75rem auto; padding:0 1rem; max-width:38rem;
}

.blog-card-img { aspect-ratio: 4/3; width:100%; object-fit:cover; }

.article-content h2 { font-family:'Playfair Display', Georgia, serif; font-weight:700; font-size:1.5rem; color:var(--ink); margin-top:2rem; margin-bottom:0.75rem; }
.article-content h3 { font-family:'Playfair Display', Georgia, serif; font-weight:700; font-size:1.2rem; color:var(--ink); margin-top:1.5rem; margin-bottom:0.5rem; }
.article-content p { margin-bottom:1rem; }
.article-content ul, .article-content ol { margin:0 0 1.25rem 1.25rem; }
.article-content ul { list-style:disc; }
.article-content ol { list-style:decimal; }
.article-content li { margin-bottom:0.4rem; }
.article-content a:not(.cta-btn) { color:var(--red); text-decoration:underline; font-weight:600; }
.article-content strong { color:var(--ink); }
.article-content blockquote { border-left:3px solid var(--red); padding-left:1rem; margin:1.5rem 0; font-style:italic; color:var(--stone); }
.article-pick { border:1px solid #ececec; border-radius:12px; padding:1.25rem; margin:1.25rem 0; background:#fafafa; }
.article-pick h3 { margin-top:0; }
.article-disclaimer { font-size:0.8rem; color:var(--stone); background:#f7f7f7; border-radius:8px; padding:0.75rem 1rem; margin:1.5rem 0; }

@media (min-width: 1024px) {
  body.encuentrafacil-layout { display:grid; grid-template-columns: 1fr 340px; grid-template-rows: auto auto 1fr; min-height:100vh; }
  header[data-role="hero"] { grid-column: 1 / -1; }
  .disclosure-bar { grid-column: 1 / -1; }
  .main-content-wrapper { grid-column:1; grid-row:3; min-width:0; max-width:100% !important; width:100%; padding-top:30px; padding-bottom:30px; }
  #fav-panel-wrapper { grid-column:2; grid-row:3; padding-right:30px; padding-bottom:30px; margin-top:30px; }
  #fav-panel-fixed {
    position: sticky !important; top:0; height:100%; max-height:none !important;
    border:2px solid var(--black); overflow-y:hidden !important; display:flex; flex-direction:column;
  }
  #fav-panel-fixed.panel-open { max-height:none !important; }
  #panel-toggle-btn { display:none !important; }
  #fav-panel-fixed .panel-header { height:80px !important; }
  #fav-items-container { flex:1; overflow-y:auto; min-height:0; }
  #product-grid { grid-template-columns: repeat(3, 1fr); width:100%; min-width:0; }
  .encuentrafacil-footer { grid-column: 1 / -1; }
}