/* ===========================================================
   DORILA — ficha.css
   Estilos de la ficha de producto y productos relacionados.
   Cargar después de base.css en las páginas de producto.
   =========================================================== */

/* Migas de pan: ahora definidas en base.css */

/* Ficha principal */
.ficha{ display:grid; grid-template-columns:1fr 1.05fr; gap:var(--space-4); margin-block:var(--space-3) var(--space-5); background:var(--color-card); border:1px solid var(--color-parchment-soft); border-radius:var(--radius-card); overflow:hidden; box-shadow:var(--shadow-card); }
.ficha-media{ position:relative; background:var(--color-parchment-soft); }
.ficha-gallery{ display:grid; gap:var(--space-2); }
.ficha-main{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius-card); }
.ficha-thumbs{ display:flex; gap:var(--space-2); }
.ficha-thumb{ width:64px; height:64px; padding:0; border:2px solid transparent; border-radius:12px; background:none; cursor:pointer; overflow:hidden; opacity:.7; transition:opacity var(--transition-med), border-color var(--transition-med); }
.ficha-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
.ficha-thumb:hover{ opacity:1; }
.ficha-thumb.is-active{ border-color:var(--color-terracotta); opacity:1; }

/* Información del producto */
.ficha-info{ padding:var(--space-4); }
.ficha-cat{ display:inline-block; padding:0.25em 0.8em; border-radius:999px; background:var(--color-salvia); color:#fff; font-size:var(--fs-tiny); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; }
.ficha-info h1{ font-family:var(--font-display); font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.08; margin:var(--space-2) 0 0; color:var(--color-ink); text-wrap:balance; }
.ficha-scientific{ font-size:0.92rem; color:var(--color-body-soft); margin-top:var(--space-1); }
.ficha-desc{ font-size:1.05rem; color:var(--color-ink); margin-top:var(--space-3); }
.ficha-props{ margin-top:var(--space-3); }
.ficha-props h2{ font-family:var(--font-display); font-size:1.05rem; margin:0 0 var(--space-1); color:var(--color-terracotta); }
.ficha-props li{ position:relative; padding-left:1.6rem; margin-top:0.4rem; color:var(--color-ink); }
.ficha-props li::before{ content:""; position:absolute; left:0; top:0.5em; width:0.5em; height:0.5em; border-radius:50%; background:var(--color-terracotta); }
.ficha-price{ font-family:var(--font-display); font-size:1.6rem; color:var(--color-forest-deep); margin-block:var(--space-3) 0; }
.ficha-ctas{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2); }
.ficha-ctas .btn{ flex:1 1 auto; }
.ficha-note{ margin-top:var(--space-3); font-size:var(--fs-small); color:var(--color-body-soft); }
.ficha-by{ margin-top:var(--space-1); font-size:0.8rem; }
.ficha-by a{ color:var(--color-terracotta); font-weight:700; }
.ficha-by a:hover{ text-decoration:underline; }

/* Productos relacionados */
.related{ padding-bottom:var(--space-5); }
.related h2{ font-family:var(--font-display); font-size:clamp(1.4rem,3vw,2rem); margin-block:var(--space-4) var(--space-3); text-wrap:balance; }
.related-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); }
.related-card{ display:flex; align-items:center; gap:var(--space-2); background:var(--color-card); border:1px solid var(--color-parchment-soft); border-radius:var(--radius-sm); padding:var(--space-2); box-shadow:var(--shadow-card); transition:transform var(--transition-med), border-color var(--transition-med); }
.related-card:hover{ transform:translateY(-3px); border-color:var(--color-terracotta); }
.related-card img{ width:74px; height:74px; border-radius:12px; object-fit:cover; flex-shrink:0; }
.related-name{ font-weight:700; font-size:0.95rem; }
.related-price{ font-family:var(--font-display); color:var(--color-forest-deep); font-size:0.9rem; margin-left:auto; }

/* Responsive */
@media (max-width:820px){ .ficha{ grid-template-columns:1fr; } }
@media (max-width:560px){ .related-grid{ grid-template-columns:1fr; } }