/* Propuesta 2 — Moderna oscura: negro profundo, brillo ámbar y café */
:root, [data-bs-theme="dark"] {
  --rc-ambar: #f0a52b;
  --rc-ambar-claro: #ffc865;
  --rc-cafe: #7a4a2b;
  --rc-tinta: #f0a52b;
  --p2-fondo: #0c0a09;
  --p2-sup: #171311;
  --p2-borde: #2a2320;
  --bs-body-bg: var(--p2-fondo);
  --bs-body-color: #ece6e1;
  --bs-body-font-family: "DM Sans", system-ui, sans-serif;
  --bs-border-color: var(--p2-borde);
  --bs-link-color-rgb: 240, 165, 43;
  --bs-link-hover-color-rgb: 255, 200, 101;
  --bs-tertiary-bg: var(--p2-sup);
  --bs-secondary-bg: #201a17;
}
body { background: var(--p2-fondo); }
section[id], footer[id] { scroll-margin-top: 80px; }
.text-ambar { color: var(--rc-ambar) !important; }

/* el botón primario común en esta propuesta es ámbar */
.rc-btn-primario { --bs-btn-color: #111; --bs-btn-hover-color: #111; --bs-btn-hover-bg: #ffc865; --bs-btn-hover-border-color: #ffc865; }
.rc-toast { background: #1f1916; border: 1px solid var(--rc-ambar) !important; }
.rc-carrito, .rc-modal .modal-content { background: var(--p2-sup); }
.rc-carrito-pie { border-top-color: var(--rc-ambar); }

/* cinta */
.p2-cinta { background: var(--rc-ambar); color: #111; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: .85rem; }
.p2-cinta-track { display: inline-flex; gap: 3rem; padding: .5rem 0; animation: p2-cinta 32s linear infinite; }
.p2-cinta-track i { margin-right: .35rem; }
@keyframes p2-cinta { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .p2-cinta-track { animation: none; } }

/* nav */
.p2-nav { background: rgba(12,10,9,.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--p2-borde); padding: .8rem 0; }
.p2-marca { font-family: "Outfit", sans-serif; font-weight: 500; letter-spacing: .12em; font-size: 1.15rem; color: #fff; }
.p2-marca b { font-weight: 900; color: var(--rc-ambar); }
.p2-nav .nav-link { font-weight: 500; color: #cfc6bf; }
.p2-nav .nav-link:hover { color: var(--rc-ambar); }
.p2-buscador { position: relative; }
.p2-buscador i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: .5; }
.p2-buscador input { background: var(--p2-sup); border: 1px solid var(--p2-borde); color: #fff; border-radius: 999px; padding: .5rem 1rem .5rem 2.4rem; width: 100%; min-width: 240px; }
.p2-buscador input:focus { outline: 2px solid var(--rc-ambar); }
.p2-carrito-btn { background: var(--rc-ambar); color: #111; border-radius: 999px; font-weight: 700; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; }
.p2-carrito-btn:hover { background: #ffc865; color: #111; }
.p2-carrito-btn .badge { background: #111; color: var(--rc-ambar); }

/* hero */
.p2-hero { padding: 5rem 0 4rem; position: relative; overflow: hidden;
  background: radial-gradient(60% 70% at 85% 40%, rgba(240,165,43,.22), transparent 60%), radial-gradient(40% 50% at 10% 90%, rgba(122,74,43,.35), transparent 70%); }
.p2-pill { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--p2-borde); border-radius: 999px; padding: .35rem .9rem; font-size: .85rem; background: var(--p2-sup); }
.p2-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--rc-ambar); box-shadow: 0 0 0 4px rgba(240,165,43,.25); }
.p2-titulo { font-family: "Outfit", sans-serif; font-weight: 900; font-size: clamp(3rem, 8vw, 6.4rem); line-height: .92; letter-spacing: -.03em; color: #fff; }
.p2-titulo span { color: transparent; -webkit-text-stroke: 2px var(--rc-ambar); }
.p2-btn-ambar { --bs-btn-bg: var(--rc-ambar); --bs-btn-color: #111; --bs-btn-border-color: var(--rc-ambar); --bs-btn-hover-bg: #ffc865; --bs-btn-hover-color: #111; --bs-btn-hover-border-color: #ffc865; font-weight: 700; border-radius: 999px; }
.p2-btn-ghost { --bs-btn-color: #fff; --bs-btn-border-color: #3a312c; --bs-btn-hover-bg: #fff; --bs-btn-hover-color: #111; border-radius: 999px; }
.p2-nota-envio { font-size: .9rem; color: var(--rc-ambar-claro); margin: 0; }
.p2-stats b { display: block; font-family: "Outfit", sans-serif; font-size: 2.2rem; font-weight: 800; color: #fff; line-height: 1; }
.p2-stats span { font-size: .8rem; color: #8f857e; text-transform: uppercase; letter-spacing: .12em; }
.p2-collage { position: relative; height: 520px; }
.p2-collage img { position: absolute; object-fit: cover; border-radius: 1.4rem; box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.p2-collage .c1 { width: 58%; height: 78%; right: 0; top: 0; }
.p2-collage .c2 { width: 46%; height: 44%; left: 0; top: 8%; filter: saturate(1.15); }
.p2-collage .c3 { width: 44%; height: 46%; left: 12%; bottom: 0; }
.p2-sello { position: absolute; right: 6%; bottom: 4%; background: var(--rc-ambar); color: #111; border-radius: 1rem; padding: .9rem 1.1rem; display: flex; gap: .6rem; align-items: center; font-weight: 800; line-height: 1.1; font-size: .9rem; }
.p2-sello i { font-size: 1.6rem; }
@media (max-width: 991.98px) { .p2-collage { height: 380px; } }

.p2-h2 { font-family: "Outfit", sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.02em; color: #fff; }
.p2-link { color: var(--rc-ambar); text-decoration: none; font-weight: 700; }
.p2-mini { font-size: .72rem; letter-spacing: .16em; color: #8f857e; font-weight: 700; }

/* bento */
.p2-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 14px; }
.p2-bento a { position: relative; border-radius: 1.2rem; overflow: hidden; color: #fff; text-decoration: none; border: 1px solid var(--p2-borde); }
.p2-bento img { width: 100%; height: 100%; object-fit: cover; transition: filter .5s, transform .6s; }
.p2-bento a:hover img { transform: scale(1.06); }
.p2-bento a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.85)); }
.p2-bento span { position: absolute; left: 1.1rem; bottom: 1rem; z-index: 2; font-family: "Outfit", sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 1.1; }
.p2-bento small { display: block; font-family: "DM Sans", sans-serif; font-weight: 500; font-size: .8rem; color: var(--rc-ambar-claro); }
.p2-bento .b1 { grid-column: span 2; grid-row: span 2; }
.p2-bento .b1 span { font-size: 2.2rem; }
.p2-bento .b4 { grid-row: span 2; }
@media (max-width: 767.98px) { .p2-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; } .p2-bento .b4 { grid-row: span 1; } }

/* scroller */
.p2-franja { background: var(--p2-sup); border-block: 1px solid var(--p2-borde); }
.p2-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 23%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: thin; }
.p2-scroll-item { scroll-snap-align: start; }
.p2-flecha { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--p2-borde); color: #fff; }
.p2-flecha:hover { background: var(--rc-ambar); color: #111; }

/* tarjetas */
.p2-card { background: var(--p2-sup); border: 1px solid var(--p2-borde); border-radius: 1.1rem; overflow: hidden; transition: border-color .25s, transform .25s; }
.p2-card:hover { border-color: var(--rc-ambar); transform: translateY(-4px); }
.p2-card-img { position: relative; overflow: hidden; }
.p2-card-img img { transition: transform .6s; }
.p2-card:hover .p2-card-img img { transform: scale(1.06); }
.p2-card-nombre { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 1.02rem; margin: 0; line-height: 1.25; }
.p2-card-nombre a { color: #fff; text-decoration: none; }
.p2-card .rc-precio { font-family: "Outfit", sans-serif; font-weight: 800; font-size: 1.25rem; color: #fff; }
.p2-tag { position: absolute; left: 10px; top: 10px; background: rgba(12,10,9,.75); backdrop-filter: blur(6px); color: var(--rc-ambar); border: 1px solid rgba(240,165,43,.5); font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .25rem .6rem; }
.p2-fav { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(12,10,9,.7); color: #fff; }
.p2-fav .bi-heart-fill { color: #ff5a5a; }
.p2-add { position: absolute; right: 10px; bottom: 10px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--rc-ambar); color: #111; font-size: 1.3rem; box-shadow: 0 8px 20px rgba(0,0,0,.5); transition: transform .2s; }
.p2-add:hover { transform: scale(1.1) rotate(90deg); }

/* panel filtros */
.p2-panel { background: var(--p2-sup); border: 1px solid var(--p2-borde); border-radius: 1.1rem; }
.p2-cats .list-group-item { background: transparent; border-color: var(--p2-borde); color: #cfc6bf; padding: .6rem .2rem; }
.p2-cats .list-group-item:hover { color: #fff; }
.p2-cats .list-group-item.active { background: transparent; color: var(--rc-ambar); font-weight: 700; border-color: var(--p2-borde); }

/* envío */
.p2-envio { background: var(--rc-ambar); color: #111; border-radius: 1.6rem; }
.p2-envio .p2-mini { color: #3d2a12; }
.p2-envio-titulo { font-family: "Outfit", sans-serif; font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -.03em; }
.p2-envio .rc-aviso-envio { background: rgba(0,0,0,.08); border-color: #111; }
.p2-cotizador { background: #111; color: #fff; border-radius: 1.2rem; }
.p2-envio .form-control.bg-transparent { color: #111; }
.p2-envio .form-control.bg-transparent::placeholder { color: #4a3a24; }
.p2-envio .rc-pasos li { color: #4a3a24; }
.p2-envio .rc-pasos li.hecho, .p2-envio .rc-pasos li.hecho i { color: #111; }

/* paisaje */
.p2-paisaje { min-height: min(70vh, 620px); background: linear-gradient(transparent 30%, rgba(12,10,9,.95)), url(../../img/paisajes/agua-azul.jpg) center/cover; }
.p2-titulo-paisaje { font-family: "Outfit", sans-serif; font-weight: 900; font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: .95; color: #fff; letter-spacing: -.03em; }
.p2-tiras { display: grid; grid-template-columns: repeat(4, 1fr); }
.p2-tiras img { width: 100%; height: 220px; object-fit: cover; }
.p2-tiras img:hover { filter: none; }
@media (max-width: 767.98px) { .p2-tiras { grid-template-columns: 1fr 1fr; } .p2-tiras img { height: 150px; } }

/* footer */
.p2-footer { background: #070605; border-top: 1px solid var(--p2-borde); }
.p2-footer a:not(.btn) { color: #cfc6bf; text-decoration: none; line-height: 2; }
.p2-footer a:not(.btn):hover { color: var(--rc-ambar); }

/* checkout */
.p2-checkout-card { background: var(--p2-sup); border: 1px solid var(--p2-borde); border-radius: 1.1rem; }
.p2-paso-num { width: 30px; height: 30px; border-radius: 50%; background: var(--rc-ambar); color: #111; display: inline-grid; place-items: center; font-size: .85rem; font-weight: 800; margin-right: .6rem; }