/* Propuesta 1 — Clásica: blanco y negro elegante con acentos ámbar */
:root {
  --rc-ambar: #d8901a;
  --rc-ambar-claro: #f3c165;
  --rc-cafe: #5a3520;
  --rc-tinta: #111;
  --bs-body-font-family: "Inter", system-ui, sans-serif;
  --bs-body-color: #1a1a1a;
  --bs-link-color-rgb: 17, 17, 17;
  --bs-link-hover-color-rgb: 216, 144, 26;
}
body { background: #fff; }
section[id], footer[id] { scroll-margin-top: 70px; }
.text-ambar { color: var(--rc-ambar) !important; }
.py-lg-6 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }

.p1-topbar { background: #000; color: #f5f5f5; letter-spacing: .01em; }
.p1-topbar strong { color: var(--rc-ambar-claro); font-weight: 600; }

.p1-nav { background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid #eee; }
.p1-nav .nav-link { font-weight: 500; font-size: .92rem; color: #222; text-transform: uppercase; letter-spacing: .08em; }
.p1-nav .nav-link:hover { color: var(--rc-ambar); }
.p1-marca { font-family: "Playfair Display", serif; font-size: 1.45rem; font-weight: 700; letter-spacing: .01em; color: #111; }
.p1-marca em { color: var(--rc-ambar); font-style: italic; font-weight: 500; }
.p1-btn-carrito { border: 1px solid #111; border-radius: 999px; width: 46px; height: 46px; }
.p1-btn-carrito:hover { background: #111; color: #fff; }
.p1-badge { background: var(--rc-ambar); color: #111; }

.p1-btn-ambar { --bs-btn-bg: var(--rc-ambar); --bs-btn-color: #111; --bs-btn-border-color: var(--rc-ambar);
  --bs-btn-hover-bg: #fff; --bs-btn-hover-color: #111; --bs-btn-hover-border-color: #fff; font-weight: 600; }

/* hero */
.p1-hero { position: relative; min-height: min(86vh, 760px); background: #000; overflow: hidden; padding: 6rem 0; }
/* slider de la portada */
.p1-slider, .p1-slider .carousel-inner, .p1-slider .carousel-item { position: absolute; inset: 0; height: 100%; }
.p1-slider { z-index: 0; }
.p1-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.8) saturate(1.05); }
.p1-slider .carousel-item.active .p1-hero-img { animation: p1-zoom 7s ease-out both; }
@keyframes p1-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .p1-slider .carousel-item.active .p1-hero-img { animation: none; } }
.p1-slider-nav { position: absolute; left: 50%; transform: translateX(-50%); bottom: 1.1rem; z-index: 3; display: flex; align-items: center; gap: .5rem; }
.p1-slider-nav .carousel-indicators { position: static; margin: 0 .6rem 0 0; }
.p1-slider-nav .carousel-indicators [data-bs-target] { width: 26px; height: 3px; background: #fff; opacity: .45; border: 0; margin: 0 3px; }
.p1-slider-nav .carousel-indicators .active { background: var(--rc-ambar); opacity: 1; }
.p1-slider-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.3); color: #fff; }
.p1-slider-btn:hover { background: var(--rc-ambar); border-color: var(--rc-ambar); color: #111; }
.p1-slider::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 60%, rgba(216,144,26,.25) 100%); }
.p1-hero .container { z-index: 2; }
.p1-eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: .75rem; font-weight: 600; color: var(--rc-ambar-claro); }
.p1-titulo { font-family: "Playfair Display", serif; font-size: clamp(2.3rem, 5.5vw, 4.4rem); line-height: 1.05; font-weight: 700; }
.p1-titulo span { color: var(--rc-ambar); font-style: italic; }
.p1-hero-credito { position: absolute; left: 1.2rem; bottom: 1.2rem; color: rgba(255,255,255,.85); z-index: 3; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
@media (max-width: 575.98px) { .p1-hero-credito { display: none; } }

.p1-beneficios .col { border-right: 1px solid #eee; }
.p1-beneficios .col:last-child { border-right: 0; }
.p1-beneficios i { font-size: 1.8rem; color: var(--rc-ambar); }
.p1-beneficios h3 { font-size: .95rem; font-weight: 700; margin: .6rem 0 .3rem; text-transform: uppercase; letter-spacing: .06em; }
.p1-beneficios p { font-size: .82rem; color: #666; margin: 0; }
@media (max-width: 991.98px) { .p1-beneficios .col:nth-child(2) { border-right: 0; } .p1-beneficios .col { border-bottom: 1px solid #eee; } }

.p1-h2 { font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(1.9rem, 3.5vw, 2.8rem); }

/* categorías */
.p1-cats { display: grid; grid-template-columns: repeat(9, 1fr); gap: 1.2rem; }
@media (max-width: 1199.98px) { .p1-cats { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 575.98px) { .p1-cats { grid-template-columns: repeat(3, 1fr); gap: .8rem; } }
.p1-cat { text-decoration: none; color: #111; font-weight: 600; font-size: .85rem; }
.p1-cat img { border: 3px solid #fff; outline: 1px solid #ddd; transition: outline-color .3s, transform .3s; }
.p1-cat:hover img, .p1-cat.active img { outline: 2px solid var(--rc-ambar); transform: translateY(-3px); }
.p1-cat.active span { color: var(--rc-ambar); }

/* filtros */
.p1-chip { border: 1px solid #ccc; border-radius: 999px; background: #fff; font-weight: 500; }
.p1-chip:hover { border-color: #111; }
.p1-chip.active { background: #111; color: #fff; border-color: #111; }

/* tarjeta de producto */
.p1-producto { background: #fff; border: 1px solid #e9e9e9; transition: box-shadow .25s, transform .25s; }
.p1-producto:hover { box-shadow: 0 18px 40px rgba(0,0,0,.1); transform: translateY(-3px); }
.p1-producto img { transition: transform .6s; }
.p1-producto:hover img { transform: scale(1.05); }
.p1-producto-nombre { font-family: "Playfair Display", serif; font-size: 1.05rem; font-weight: 700; margin: 0; }
.p1-producto-nombre a { text-decoration: none; color: #111; }
.p1-producto .rc-precio { font-weight: 700; font-size: 1.1rem; }
.p1-etiqueta { position: absolute; left: 10px; top: 10px; background: #111; color: #fff; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; padding: .3rem .55rem; }
.p1-fav { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: #111; box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.p1-fav .bi-heart-fill { color: #c0392b; }

/* ámbar */
.p1-ambar { background: var(--rc-ambar); color: #111; }
.p1-ambar .p1-eyebrow { color: #111; opacity: .7; }

/* pasos envío */
.p1-pasos span { font-family: "Playfair Display", serif; font-size: 3rem; color: var(--rc-ambar); line-height: 1; }
.p1-pasos h3 { font-size: 1.1rem; font-weight: 700; margin-top: .4rem; }
.p1-pasos p { color: #666; font-size: .9rem; }
.p1-card { border: 1px solid #e5e5e5; background: #fff; }
.p1-card-negra { background: #111; color: #fff; border-color: #111; }
.p1-card-negra .rc-pasos li { color: rgba(255,255,255,.55); }
.p1-card-negra .rc-pasos li.hecho { color: #fff; }

/* mosaico de paisajes */
.p1-mosaico { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 12px; }
.p1-mosaico figure { margin: 0; position: relative; overflow: hidden; }
.p1-mosaico img { width: 100%; height: 100%; object-fit: cover; }
.p1-mosaico figcaption { position: absolute; left: 0; bottom: 0; padding: .8rem 1rem; font-family: "Playfair Display", serif; font-style: italic;
  font-size: 1.1rem; background: linear-gradient(transparent, rgba(0,0,0,.75)); width: 100%; }
.p1-mosaico .m1 { grid-column: span 2; grid-row: span 2; }
.p1-mosaico .m4, .p1-mosaico .m5, .p1-mosaico .m6 { grid-column: span 2; }
@media (max-width: 767.98px) { .p1-mosaico { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; } .p1-mosaico .m4, .p1-mosaico .m5, .p1-mosaico .m6 { grid-column: span 2; } }

/* footer */
.p1-footer { background: #0b0b0b; color: #ddd; }
.p1-footer h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; color: var(--rc-ambar); margin-bottom: 1rem; }
.p1-footer a { color: #ddd; text-decoration: none; line-height: 2; }
.p1-footer a:hover { color: var(--rc-ambar); }

/* checkout */
.p1-paso-num { width: 30px; height: 30px; border-radius: 50%; background: #111; color: #fff; display: inline-grid; place-items: center; font-size: .85rem; font-weight: 700; margin-right: .6rem; }
.p1-checkout-card { background: #fff; border: 1px solid #e5e5e5; }
