@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');

:root {
  --onix: #12100E;
  --onix-suave: #1C1916;
  --oro: #C8A55C;
  --oro-profundo: #8A6A33;
  --marfil: #F5F0E6;
  --gris: #6B655B;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--marfil);
  color: var(--onix);
}

a { color: inherit; text-decoration: none; }

.oculto { display: none !important; }

/* ---------- Encabezado ---------- */
.franja-anuncio {
  background: #FFFFFF;
  color: var(--onix);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 12px 16px;
}

.encabezado-sitio {
  background: #FFFFFF;
  padding: 14px 24px;
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid #EDE7D9;
}

.barra-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1800px;
  margin: 0 auto;
  gap: 20px;
  padding: 0 clamp(0px, 3vw, 40px);
}

.bloque-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.1;
}

.bloque-logo .icono-diamante {
  color: var(--oro);
  margin-bottom: 2px;
}

.bloque-logo .nombre-marca {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--onix);
  letter-spacing: 1px;
}

.bloque-logo .subtitulo-marca {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--oro-profundo);
  margin-top: 2px;
}

.nav-categorias {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  justify-self: start;
}

.nav-categorias a {
  color: var(--onix);
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.nav-categorias a:hover, .nav-categorias a.activo { color: var(--oro-profundo); }

.utilidades-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-self: end;
}

.selector-idioma {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--onix);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.selector-idioma svg { width: 10px; height: 10px; }

.menu-idioma {
  position: absolute;
  margin-top: 8px;
  background: white;
  border: 1px solid #EDE7D9;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  overflow: hidden;
  min-width: 110px;
}

.menu-idioma button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--onix);
  cursor: pointer;
}

.menu-idioma button:hover { background: var(--marfil); }

.icono-nav {
  color: var(--onix);
  cursor: pointer;
  display: flex;
  background: none;
  border: none;
  padding: 0;
}

.menu-cuenta {
  position: absolute;
  right: 0;
  margin-top: 10px;
  background: white;
  border: 1px solid #EDE7D9;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  overflow: hidden;
  min-width: 190px;
  z-index: 30;
}

.menu-cuenta a {
  display: block;
  padding: 11px 16px;
  font-size: 13px;
  color: var(--onix);
  border-bottom: 1px solid #F3EEE0;
}

.menu-cuenta a:last-child { border-bottom: none; }
.menu-cuenta a:hover { background: var(--marfil); color: var(--oro-profundo); }

.boton-menu-movil {
  display: none;
  background: none;
  border: none;
  color: var(--onix);
  cursor: pointer;
  padding: 4px;
}

.panel-menu-movil {
  display: none;
  flex-direction: column;
  background: white;
  border-top: 1px solid #EDE7D9;
  padding: 6px 20px 16px;
}

.panel-menu-movil a {
  padding: 12px 4px;
  border-bottom: 1px solid #F0EBDD;
  color: var(--onix);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.panel-menu-movil.abierto { display: flex; }

/* Zona intermedia (ni celular ni pantalla completa): reduce espaciado
   del menú para que nunca quede pegado al logo del centro. */
@media (max-width: 1150px) and (min-width: 801px) {
  .nav-categorias { gap: 12px; }
  .nav-categorias a { font-size: 12px; letter-spacing: 0.1px; }
  .utilidades-nav { gap: 12px; }
}

@media (max-width: 800px) {
  .barra-nav { grid-template-columns: auto 1fr auto; }
  .nav-categorias { display: none; }
  .boton-menu-movil { display: flex; }
}

/* ---------- Hero: usa foto real si existe, si no un fondo de respaldo ---------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(160deg, var(--marfil) 0%, #EDE3CC 100%);
  padding: 28px 24px 34px;
}

.hero-fondo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.8s ease;
  animation: heroZoomLento 24s ease-in-out infinite alternate;
}

#hero-capa-a { opacity: 1; }

@keyframes heroZoomLento {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

.hero-superposicion {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,16,14,0.05) 30%, rgba(18,16,14,0.6) 100%);
}

/* ---------- Hero fijo (Hombre / Mujer): una sola foto, sin rotación ---------- */
.hero-seccion-fija {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 28px 24px 34px;
  background-size: cover;
  background-position: center;
}

@media (min-width: 700px) {
  .hero-seccion-fija { min-height: 400px; padding: 40px 24px 46px; }
}

/* ---------- Línea simple de categorías (Hombre / Mujer) ---------- */
.linea-categorias-simple {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  background: white;
  padding: 18px 16px;
  border-bottom: 1px solid #EDE7D9;
}

.linea-categorias-simple a {
  font-size: 13px;
  color: var(--onix);
  padding: 6px 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.linea-categorias-simple a:hover { color: var(--oro-profundo); }

.hero-texto-minimo {
  position: relative;
  z-index: 2;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--marfil);
  max-width: 340px;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}

@media (min-width: 700px) {
  .hero { min-height: 440px; padding: 40px 24px 46px; }
  .hero-texto-minimo { font-size: 21px; max-width: 420px; }
}

.boton-oro {
  display: inline-block;
  background: var(--oro);
  color: var(--onix);
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Contenido general ---------- */
.contenedor {
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 40px) clamp(20px, 4vw, 48px);
}

/* Páginas de una sola columna (carrito, checkout, mi cuenta, legales).
   El ancho crece con la pantalla pero nunca se ve como una islita
   perdida en medio de una pantalla ancha, ni apretada en un celular. */
.contenedor-angosto {
  width: min(94vw, 640px);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 44px) 0;
}

.contenedor-lectura {
  width: min(94vw, 640px);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 44px) 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--onix);
}

.titulo-seccion {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 28px;
  margin: 0 0 24px;
  letter-spacing: 1px;
  text-align: center;
}

/* Versión para catálogo: título grande centrado con línea dorada */
.titulo-catalogo-pagina {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(28px, 5vw, 48px);
  text-align: center;
  margin: 40px 0 6px;
  letter-spacing: 1px;
  color: var(--onix);
}

.titulo-catalogo-linea {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--oro);
  margin: 0 auto 32px;
}

.grid-productos-sitio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.tarjeta-producto-sitio {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #E4DFD3;
}

.tarjeta-producto-sitio .foto {
  width: 100%;
  aspect-ratio: 1;
  background: var(--onix) center/cover no-repeat;
}

.tarjeta-producto-sitio .info { padding: 14px 16px; }

.tarjeta-producto-sitio .nombre {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}

.tarjeta-producto-sitio .meta {
  font-size: 12px;
  color: var(--gris);
  margin: 0 0 8px;
}

.precio-actual {
  font-size: 15px;
  font-weight: 600;
  color: var(--oro-profundo);
}

.precio-anterior {
  font-size: 12px;
  color: var(--gris);
  text-decoration: line-through;
  margin-right: 6px;
}

.estado-vacio {
  text-align: center;
  padding: 60px 20px;
  color: var(--gris);
}

/* ---------- Ticker de confianza: letrero delgado en movimiento ---------- */
.ticker-confianza {
  background: #FFFFFF;
  border-top: 1px solid #EDE7D9;
  border-bottom: 1px solid #EDE7D9;
  overflow: hidden;
  padding: 11px 0;
}

.ticker-pista {
  display: flex;
  width: max-content;
  animation: deslizarTicker 32s linear infinite;
}

.ticker-pista span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  color: var(--oro-profundo);
  white-space: nowrap;
  padding: 0 16px;
}

@keyframes deslizarTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Categorías del inicio: mosaico de fotos ---------- */
.grid-categorias-fotos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  background: white;
}

@media (min-width: 700px) {
  .grid-categorias-fotos { grid-template-columns: repeat(6, 1fr); }
}

.tile-categoria {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.tile-fondo {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: white;
  transition: transform 0.4s ease;
}

.tile-categoria:nth-child(6n+1) .tile-fondo { background-color: #F9F6F0; }
.tile-categoria:nth-child(6n+2) .tile-fondo { background-color: #F9F6F0; }
.tile-categoria:nth-child(6n+3) .tile-fondo { background-color: #F9F6F0; }
.tile-categoria:nth-child(6n+4) .tile-fondo { background-color: #F9F6F0; }
.tile-categoria:nth-child(6n+5) .tile-fondo { background-color: #F9F6F0; }
.tile-categoria:nth-child(6n+6) .tile-fondo { background-color: #F9F6F0; }

.tile-categoria:hover .tile-fondo { transform: scale(1.04); }

.tile-fondo.con-foto { background-color: #F9F6F0; }

.tile-icono {
  width: 40%;
  height: 40%;
  color: rgba(18,16,14,0.55);
}

.tile-fondo.con-foto .tile-icono { display: none; }

.tile-etiqueta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(18,16,14,0.82);
  color: var(--marfil);
  text-align: center;
  padding: 10px 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@media (min-width: 700px) {
  .tile-etiqueta { font-size: 13px; padding: 12px 6px; }
}

/* ---------- Preguntas frecuentes ---------- */
.seccion-faq {
  max-width: 720px;
  margin: 0 auto;
  padding: 50px 24px;
}

.item-faq {
  border-bottom: 1px solid #E4DFD3;
}

.pregunta-faq {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 18px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--onix);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.pregunta-faq .signo {
  color: var(--oro-profundo);
  font-size: 20px;
  flex-shrink: 0;
}

.respuesta-faq {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  font-size: 14px;
  color: var(--gris);
  line-height: 1.7;
}

.respuesta-faq p { padding: 0 4px 18px; margin: 0; }

.item-faq.abierto .respuesta-faq { max-height: 200px; }
.item-faq.abierto .signo { transform: rotate(45deg); }

/* ---------- Página de producto ---------- */
.detalle-producto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

@media (max-width: 700px) {
  .detalle-producto { grid-template-columns: 1fr; }
}

.foto-grande {
  width: 100%;
  aspect-ratio: 1;
  background: var(--onix) center/cover no-repeat;
  border-radius: 10px;
}

.miniaturas {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.miniaturas div {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: var(--onix) center/cover no-repeat;
  cursor: pointer;
  opacity: 0.6;
}

.miniaturas div.activa { opacity: 1; outline: 2px solid var(--oro); }

.sello-origen {
  display: inline-block;
  background: #F3E3D3;
  color: var(--oro-profundo);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.nombre-producto { font-family: 'Playfair Display', Georgia, serif; font-size: 26px; margin: 0 0 6px; }

.ficha-tecnica {
  font-size: 13px;
  color: var(--gris);
  margin: 12px 0 20px;
  line-height: 1.8;
}

.selector-tallas {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.chip-talla {
  border: 1px solid var(--onix);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  background: white;
}

.chip-talla.seleccionada { background: var(--onix); color: var(--oro); }

.boton-comprar {
  width: 100%;
  padding: 14px;
  background: var(--onix);
  color: var(--oro);
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.boton-comprar:hover { background: var(--onix-suave); }

.nota-talla {
  font-size: 12px;
  color: #B4483E;
  margin-top: -12px;
  margin-bottom: 16px;
}

/* ---------- WhatsApp flotante ---------- */
.whatsapp-flotante {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: white;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 30;
}

/* ---------- Pie de página ---------- */
/* ---------- Checkout ---------- */
.resumen-compra {
  background: var(--onix);
  color: var(--marfil);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 24px;
}

.resumen-compra .oro { color: var(--oro); }

.tarjeta-eleccion-cuenta {
  background: var(--marfil);
  border: 1.5px solid var(--oro);
  border-radius: 12px;
  padding: 22px 20px;
  text-align: center;
}

.pestanas-checkout {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.pestana {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #D9D2C3;
  background: white;
  font-size: 13px;
  cursor: pointer;
}

.pestana.activa { background: var(--onix); color: var(--oro); border-color: var(--onix); }

.campo-checkout { margin-bottom: 14px; }

.campo-checkout label {
  display: block;
  font-size: 13px;
  color: var(--gris);
  margin-bottom: 5px;
}

.campo-checkout input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #D9D2C3;
  font-size: 14px;
}

.fila-dos-checkout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.direccion-guardada {
  border: 1px solid #D9D2C3;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  cursor: pointer;
}

.direccion-guardada.seleccionada { border-color: var(--oro); background: #FBF6EC; }

.confirmacion-pedido {
  text-align: center;
  padding: 60px 20px;
}

.confirmacion-pedido .oro { color: var(--oro-profundo); }

.pie-pagina {
  background: var(--onix);
  color: #C9C4B8;
  text-align: center;
  padding: 34px 24px 30px;
  font-size: 13px;
  margin-top: 0;
}

.pie-pagina .oro { color: var(--oro); font-family: 'Playfair Display', Georgia, serif; letter-spacing: 1px; }

.pie-nombre-marca {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--oro);
  font-size: 20px;
  letter-spacing: 2px;
  margin: 0 0 10px;
}

/* ---------- Nuestra tienda ---------- */
.seccion-tiendas {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--marfil);
}

@media (min-width: 800px) {
  .seccion-tiendas { grid-template-columns: 1fr 1fr; }
}

.tiendas-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 60px 40px;
  border-right: 1px solid #E4DFD3;
}

.tiendas-redes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 40px;
}

/* ---------- Síguenos: mismo fondo y estilo que "Nuestra tienda" ---------- */
.seccion-siguenos {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  background: var(--marfil);
  padding: 50px 32px;
  gap: 24px;
}

@media (min-width: 800px) {
  .seccion-siguenos {
    grid-template-columns: 1fr 1fr;
    padding: 60px 60px;
  }
}

.siguenos-texto { text-align: left; }

.siguenos-texto .titulo-seccion { color: var(--onix); text-align: left; }

.siguenos-texto p { color: var(--gris); }

.siguenos-botones {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (min-width: 800px) {
  .siguenos-botones { justify-content: flex-end; }
}

.boton-red-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--oro);
  color: var(--onix);
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background 0.2s ease, color 0.2s ease;
}

.boton-red-social:hover {
  background: var(--oro-profundo);
  color: var(--marfil);
}

/* ============================================================
   BLINDAJE — protección anti-copia
   ============================================================ */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Permitir seleccionar en campos de formulario */
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
/* Imágenes no arrastrables */
.tarjeta-producto-sitio img, .hero-seccion-fija, .foto {
  pointer-events: none;
}