/* Inicio de Betbeck's con tres colecciones: Oro, Plata y Bisutería (Félix, 15/10/2026).
   Mezcla el diseño de las tiendas de Oro y Plata (letras Cormorant Garamond + Jost) con el rosa de Betbeck's.
   Todo con prefijo .ini- para no chocar con styles.css (catálogo, carrito y apartados no cambian). */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Jost:wght@400;500;600&display=swap');

:root { --ini-titulo: "Cormorant Garamond", Georgia, serif; --ini-texto: "Jost", Arial, sans-serif; }

/* Encabezado oscuro con el logotipo plateado (sin «Plata & Bisutería») */
.site-header.ini-oscuro { background: rgba(11, 11, 12, 0.95); border-bottom-color: #222; }
.ini-oscuro .logo-img { height: 76px; }
.ini-oscuro .header-actions, .ini-oscuro .header-actions a, .ini-oscuro .header-social a { color: #e9e7e4; font-family: var(--ini-texto); }
.ini-oscuro .header-actions a:hover, .ini-oscuro .header-social a:hover { color: #c9c9cf; }
.ini-oscuro .header-social { border-left-color: #3a3a3c; }

/* Las tres entradas */
.ini-portadas { display: grid; grid-template-columns: repeat(3, 1fr); }
.ini-portada { position: relative; min-height: 520px; overflow: hidden; padding: 44px 7% 64px; display: flex; flex-direction: column; }
.ini-portada.oro { background: #e9dcc8; color: #2a2118; }
.ini-portada.plata { background: #0b0b0c; color: #f1efec; }
.ini-portada.bisuteria { background: #f5e3dc; color: #231b18; }
.ini-ceja { font: 600 10px/1.7 var(--ini-texto); letter-spacing: 2px; text-transform: uppercase; margin: 0; }
.ini-portada h2 { font: 400 clamp(38px, 3.6vw, 60px)/1.03 var(--ini-titulo); margin: 22px 0 14px; position: relative; z-index: 2; }
.ini-portada h2 em { font-size: 1.2em; }
.ini-portada p.ini-frase { font: 13px/1.8 var(--ini-texto); margin: 0; position: relative; z-index: 2; max-width: 44%; }
.ini-boton { display: inline-flex; align-items: center; gap: 30px; border: 0; border-bottom: 1px solid currentColor; background: none; color: inherit;
  padding: 12px 0; margin-top: 18px; font: 500 12px var(--ini-texto); cursor: pointer; align-self: flex-start; position: relative; z-index: 2; }
.ini-boton span { font-size: 20px; }
.ini-portada img { position: absolute; right: 5%; bottom: 46px; width: 50%; height: 58%; object-fit: cover; border-radius: 4px; }
.ini-portada.plata img { border-radius: 50%; width: 46%; height: auto; aspect-ratio: 1; object-position: 50% 35%; bottom: 80px; }
.ini-portada.bisuteria img { border-radius: 140px 140px 4px 4px; }
.ini-pie { position: absolute; bottom: 20px; left: 7%; font: 8px var(--ini-texto); letter-spacing: 2px; opacity: 0.7; }

/* Insignias */
.ini-valores { margin: 0; list-style: none; padding: 26px 5%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  text-align: center; font: 11px var(--ini-texto); border-bottom: 1px solid var(--line); }
.ini-valores span { display: block; font-size: 24px; margin-bottom: 4px; }

/* Recién llegadas (19/10/2026): cuatro piezas, una de oro, plata, acero y bisutería */
.ini-recientes { padding: 64px 5% 70px; text-align: center; }
.ini-recientes h2 { font: 400 clamp(30px, 3.2vw, 46px)/1.2 var(--ini-titulo); margin: 8px 0 30px; }
.ini-recientes-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; max-width: 1180px; margin: 0 auto; }
.ini-reciente { display: flex; flex-direction: column; gap: 6px; text-align: left; color: inherit; text-decoration: none; }
.ini-reciente-foto { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: #efe7e1; }
.ini-reciente-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ini-reciente:hover .ini-reciente-foto img { transform: scale(1.05); }
.ini-reciente .ini-ceja { margin-top: 6px; opacity: .7; }
.ini-reciente-nombre { font: 15px/1.35 var(--ini-titulo); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ini-reciente-precio { font: 500 13px var(--ini-texto); }
.ini-reciente.cargando { aspect-ratio: .78; border-radius: 4px; background: linear-gradient(90deg, #f3ebe6, #ece0d9, #f3ebe6); }
a.ini-boton { text-decoration: none; }

/* Vende con nosotros e historia */
.ini-vender { background: #242722; color: #f4ede2; padding: 60px 9%; display: grid; grid-template-columns: 3fr 2fr; gap: 40px; align-items: center; }
.ini-vender h2, .ini-historia h2 { font: 400 clamp(30px, 3.2vw, 48px)/1.2 var(--ini-titulo); margin: 12px 0 16px; }
.ini-vender p { font: 14px/1.7 var(--ini-texto); max-width: 460px; margin: 0; }
.ini-vender a.ini-boton { color: #f4ede2; text-decoration: none; }
.ini-letra { font: 170px/1 var(--ini-titulo); color: #b7aa8d; text-align: center; border-left: 1px solid #575a50; }
.ini-letra span { font: 9px/2 var(--ini-texto); letter-spacing: 3px; display: block; }
.ini-historia { text-align: center; padding: 90px 7%; }
.ini-historia h2 em { font-style: italic; }
.ini-historia p { max-width: 560px; margin: 0 auto; color: var(--ivory-dim); font: 14px/1.8 var(--ini-texto); }

@media (max-width: 900px) {
  .ini-oscuro .logo-img { height: 60px; }
  .ini-portadas { grid-template-columns: 1fr; }
  .ini-portada { min-height: 420px; }
  .ini-portada img { width: 46%; height: 62%; right: 4%; }
  .ini-portada.plata img { width: 44%; bottom: 70px; }
  .ini-valores { grid-template-columns: repeat(3, 1fr); gap: 22px 10px; }
  .ini-recientes-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ini-vender { grid-template-columns: 1fr; padding: 44px 7%; }
  .ini-letra { display: none; }
  .ini-historia { padding: 60px 7%; }
}

/* Celular: logotipo arriba y el menú en un renglón centrado (antes quedaba apilado en columna a la derecha) */
@media (max-width: 900px) {
  .site-header.ini-oscuro .wrap { flex-direction: column; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .site-header.ini-oscuro .header-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-size: 13px; }
}