/* Paleta de colores */
:root {
    --crimson: #800020;
    --crimson-light: #9e1436;
    --gold: #d4af37;
    --bg-white: #ffffff;
    --bg-offwhite: #faf9f6;
    --text-main: #333333;
    --text-muted: #666666;
    --border-color: #e5e5e5;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Work Sans', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); color: var(--text-main); background-color: var(--bg-white); line-height: 1.6; }

/* Barra Superior */
.top-nav { background-color: var(--crimson); padding: 15px 30px; border-bottom: 3px solid var(--gold); }
.nav-title { font-family: var(--font-heading); font-size: 1.5rem; color: var(--bg-white); font-style: italic; }

/* Diseño Dividido */
.split-layout { display: flex; min-height: 100vh; }
.layout-left { width: 45%; background-color: var(--bg-offwhite); padding: 50px 30px; border-right: 1px solid var(--border-color); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.layout-right { width: 55%; padding: 50px 40px; }

/* Galería (Lado Izquierdo) */
.gallery-module { max-width: 500px; margin: 0 auto; }
.gallery-module input[type="radio"] { display: none; }
.main-viewer { position: relative; width: 100%; aspect-ratio: 1/1; background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
.view-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; padding: 15px; }
.view-slide img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Lógica CSS */
#img1:checked ~ .main-viewer #v-slide1,
#img2:checked ~ .main-viewer #v-slide2,
#img3:checked ~ .main-viewer #v-slide3,
#img4:checked ~ .main-viewer #v-slide4 { opacity: 1; pointer-events: auto; z-index: 2; }

/* Flechas */
.ctrl-arr { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(255,255,255,0.9); border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--crimson); cursor: pointer; opacity: 0; transition: all 0.2s; z-index: 10; user-select: none; }
.main-viewer:hover .ctrl-arr { opacity: 1; }
.ctrl-arr:hover { background: var(--crimson); color: var(--bg-white); border-color: var(--crimson); }
.arr-left { left: 10px; } .arr-right { right: 10px; }

/* Miniaturas */
.thumb-nav { display: flex; gap: 12px; margin-top: 20px; justify-content: center; }
.thumb-icon { width: 75px; height: 75px; border: 1px solid var(--border-color); background: var(--bg-white); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.6; transition: 0.2s; border-radius: 2px; }
.thumb-icon img { max-width: 85%; max-height: 85%; object-fit: contain; }
.thumb-icon:hover { opacity: 1; }

#img1:checked ~ .thumb-nav .thumb-icon[for="img1"],
#img2:checked ~ .thumb-nav .thumb-icon[for="img2"],
#img3:checked ~ .thumb-nav .thumb-icon[for="img3"],
#img4:checked ~ .thumb-nav .thumb-icon[for="img4"] { border-color: var(--gold); opacity: 1; box-shadow: 0 0 0 1px var(--gold); }

/* Información del Producto (Lado Derecho) */
.title-main { font-family: var(--font-heading); font-size: 2.2rem; color: var(--crimson); margin-bottom: 20px; line-height: 1.2; }
.description-area h3 { font-size: 1.1rem; text-transform: uppercase; color: var(--gold); margin-bottom: 15px; letter-spacing: 1px; border-bottom: 1px solid var(--border-color); padding-bottom: 5px; }
.bullet-list { list-style: none; padding-left: 0; margin-bottom: 30px; }
.bullet-list li { margin-bottom: 15px; padding-left: 20px; position: relative; color: var(--text-muted); font-size: 0.95rem; }
.bullet-list li::before { content: "•"; position: absolute; left: 0; top: 0; color: var(--crimson); font-size: 1.5rem; line-height: 1; }
.bullet-list li strong { color: var(--text-main); font-weight: 500; }
.wellness-banner { background-color: var(--bg-offwhite); padding: 15px 20px; border-left: 4px solid var(--gold); font-style: italic; color: var(--text-muted); font-size: 0.95rem; margin-bottom: 30px; }

/* Sección Comprar */
.buy-section { margin: 40px 0 60px 0; }
.btn-crimson { display: inline-block; background-color: var(--crimson); color: var(--bg-white); font-family: var(--font-body); font-size: 1.2rem; font-weight: 500; text-transform: uppercase; padding: 18px 50px; text-decoration: none; border-radius: 2px; transition: 0.3s; letter-spacing: 1px; text-align: center; }
.btn-crimson:hover { background-color: var(--crimson-light); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(128, 0, 32, 0.2); }

/* Reseñas */
.feedback-heading { font-family: var(--font-heading); font-size: 1.8rem; color: var(--crimson); margin-bottom: 30px; }
.review-item { display: flex; gap: 20px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--border-color); }
.review-item:last-of-type { border-bottom: none; margin-bottom: 0; }
.r-avatar img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.r-content { flex: 1; }
.r-name { font-size: 1.05rem; font-weight: 600; margin-bottom: 5px; }
.r-score { color: var(--gold); font-size: 1.1rem; margin-bottom: 5px; }
.r-bold { color: var(--text-main); font-weight: 600; margin-left: 5px; font-size: 0.95rem; }
.r-vine { font-size: 0.8rem; color: var(--crimson-light); text-transform: uppercase; margin-bottom: 10px; font-weight: 500; }
.r-text { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 15px; }
.r-imgs { display: flex; gap: 10px; flex-wrap: wrap; }
.r-imgs img { width: 80px; height: 80px; object-fit: cover; border: 1px solid var(--border-color); }

/* Pie de página */
.bottom-footer { margin-top: 60px; padding-top: 30px; border-top: 1px solid var(--border-color); text-align: center; color: var(--text-muted); }
.f-brand { font-family: var(--font-heading); font-size: 1.2rem; color: var(--crimson); margin-bottom: 10px; }
.f-links { margin-bottom: 10px; font-size: 0.85rem; }
.f-links a { color: var(--text-muted); text-decoration: none; margin: 0 5px; transition: 0.2s; }
.f-links a:hover { color: var(--gold); }
.f-copy { font-size: 0.8rem; }

/* Responsivo */
@media (max-width: 900px) {
    .split-layout { flex-direction: column; }
    .layout-left { width: 100%; height: auto; position: relative; padding: 30px 20px; border-right: none; border-bottom: 1px solid var(--border-color); }
    .layout-right { width: 100%; padding: 30px 20px; }
}
@media (max-width: 600px) {
    .review-item { flex-direction: column; gap: 15px; }
    .ctrl-arr { opacity: 0.8; width: 35px; height: 35px; }
    .btn-crimson { width: 100%; padding: 15px; }
}